/* ===== NAV ===== */
nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:var(--nav-bg); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--card-border);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 40px; height:56px; transition:background 0.4s, border-color 0.4s;
}
.logo { display:flex; align-items:center; gap:4px; }
.logo .bracket { font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-weight:100; font-size:28px; color:#4FC3F7; letter-spacing:4px; transition:color 0.4s; }
.logo .word { font-family:'Bebas Neue',sans-serif; font-size:24px; letter-spacing:5px; color:#4FC3F7; transition:color 0.4s; }
.logo .tagline { font-family:'Bebas Neue',sans-serif; font-size:10px; letter-spacing:4px; text-transform:uppercase; color:#6670A0; margin-left:16px; }
.nav-tabs { display:flex; gap:0; }
.nav-tab {
  font-family:'Bebas Neue',sans-serif; font-size:15px; letter-spacing:2px; text-transform:uppercase;
  padding:16px 24px; cursor:pointer; color:var(--text-secondary); border-bottom:2px solid transparent;
  transition:all 0.3s;
}
.nav-tab:hover { color:var(--text-primary); }
.nav-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.nav-right { display:flex; align-items:center; gap:16px; }
.nav-status { display:flex; align-items:center; gap:8px; font-size:11px; color:var(--text-secondary); }
.status-dot { width:8px; height:8px; border-radius:50%; background:var(--accent); animation:pulse 2s infinite; }

/* ===== SECTIONS ===== */
.section { display:none; padding:80px 40px 40px; min-height:100vh; }
.section.active { display:block; animation:fadeIn 0.5s ease; }
.section-header { margin-bottom:36px; }
.section-header h2 { font-family:'Bebas Neue',sans-serif; font-size:36px; letter-spacing:3px; color:var(--text-primary); text-transform:uppercase; transition:color 0.4s; }
.section-header p { font-size:14px; color:var(--text-secondary); margin-top:4px; line-height:1.6; }

/* ===== GRID ===== */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; }
.grid-9 { display:grid; grid-template-columns:repeat(auto-fill, minmax(120px,1fr)); gap:12px; }

/* ===== RESPONSIVE ===== */

/* Tablet */
@media(max-width:900px) {
  .grid-2,.grid-3 { grid-template-columns:1fr; }
  .pipeline { flex-wrap:wrap; justify-content:center; }
  nav { padding:0 16px; flex-wrap:wrap; height:auto; min-height:56px; gap:4px; }
  .logo .tagline { display:none; }
  .nav-tabs { order:3; width:100%; justify-content:center; border-top:1px solid var(--card-border); }
  .nav-tab { padding:10px 16px; font-size:13px; }
  .section { padding:70px 16px 24px; }
  .section-header h2 { font-size:28px; }
  .kpi-number { font-size:48px; }
  #canvasContainer { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  #wfCanvas { min-width:900px; }
}

/* Mobile */
@media(max-width:600px) {
  nav { padding:8px 12px; gap:2px; }
  .logo .bracket { font-size:22px; }
  .logo .word { font-size:19px; }
  .nav-tabs { gap:0; }
  .nav-tab { padding:8px 10px; font-size:11px; letter-spacing:1px; }
  .nav-right { gap:8px; }
  .mode-label { font-size:8px; }
  .nav-status { display:none; }
  .section { padding:60px 12px 20px; }
  .section-header h2 { font-size:22px; letter-spacing:2px; }
  .section-header p { font-size:12px; }
  .kpi-number { font-size:36px; }
  .kpi-label { font-size:8px; }
  .grid-9 { grid-template-columns:repeat(auto-fill, minmax(90px,1fr)); gap:8px; }
  .card { padding:16px; }
  .card-title { font-size:15px; }
  .stat-row { gap:12px; }
  .stat-num { font-size:16px; }
  .btn-primary, .btn-secondary { font-size:11px; padding:8px 16px; }
  .text-input { font-size:13px; min-height:60px; }
  .badge { font-size:9px; padding:3px 8px; }
  .pipe-icon { width:38px; height:38px; font-size:14px; }
  .pipe-label { font-size:9px; }
  .pipe-arrow { font-size:16px; }
  #canvasContainer { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  #wfCanvas { min-width:800px; }
  .wf-meta { display:none; }
  .wf-toolbar { justify-content:center; }
}