/* ================================================================
   D'Burger Command Center v4 — shell.css (OC1 Review Fix)
   ================================================================

   OC1 domain: design tokens, shell layout, nav visual, responsive,
               mobile chrome, typography, card grammar, section rhythm.
   OC2 block:  content-level styles preserved for render compatibility.

   v4: mobile premium, typography hierarchy, toolbar stability,
        V3 duplicate cleanup, tablet breakpoint, shell depth.
   ================================================================ */

/* ═══════════════════════════════════════════════════════════════
   1. DESIGN TOKENS (v2 — premium SaaS, not cream/warm)
   ═══════════════════════════════════════════════════════════════ */
:root {
  /* ── Brand — D'Burger warm red ──────────────────────────── */
  --brand:            #D94A3A;
  --brand-deep:       #B3392B;
  --brand-light:      rgba(217, 74, 58, 0.08);
  --brand-ghost:      rgba(217, 74, 58, 0.04);

  /* ── Surfaces (v2: clean off-white, not cream) ──────────── */
  --bg:               #F4F4F8;
  --bg-sunken:        #EEEEF3;
  --surface:          #FFFFFF;
  --surface-raised:   #FAFAFD;
  --ink:              #18181B;
  --ink-soft:         #3F3F46;
  --muted:            #71717A;
  --line:             #E4E4E7;
  --line-soft:        #F0F0F3;

  /* ── Semantic ────────────────────────────────────────────── */
  --green:            #16A34A;   --green-light:  rgba(22,163,74,0.1);
  --amber:            #D97706;   --amber-light:  rgba(217,119,6,0.1);
  --red:              #DC2626;   --red-light:    rgba(220,38,38,0.1);
  --blue:             #2563EB;   --blue-light:   rgba(37,99,235,0.08);
  --teal:             #0D9488;
  --gray:             #A1A1AA;

  /* ── Shadow Tiers (v2: more depth levels) ───────────────── */
  --shadow-none:      0 0 0 transparent;
  --shadow-xs:        0 1px 2px rgba(0,0,0,0.03);
  --shadow-sm:        0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-card:      0 4px 16px rgba(0,0,0,0.05), 0 1px 4px rgba(0,0,0,0.04);
  --shadow-elevated:  0 8px 32px rgba(0,0,0,0.07), 0 2px 8px rgba(0,0,0,0.04);
  --shadow-lift:      0 16px 48px rgba(217,74,58,0.08), 0 4px 12px rgba(0,0,0,0.04);

  /* ── Radius Scale ────────────────────────────────────────── */
  --radius-sm:        8px;
  --radius-md:        12px;
  --radius-lg:        16px;
  --radius-xl:        24px;
  --radius-full:      999px;

  /* ── Spacing Scale (v2: larger section gaps) ────────────── */
  --space-xs:         4px;
  --space-sm:         8px;
  --space-md:         16px;
  --space-lg:         24px;
  --space-xl:         32px;
  --space-2xl:        48px;
  --space-3xl:        64px;

  /* ── Shell Metrics ───────────────────────────────────────── */
  --sidebar-width:    256px;
  --topbar-height:    56px;
  --content-max:      1440px;
  --hero-max:         1200px;

  /* ── Typography (v4: weight token for consistency) ─── */
  --font-body:        system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-weight-bold: 700;
  --font-weight-heavy:800;
  --font-xs:          0.688rem;
  --font-sm:          0.8125rem;
  --font-base:        0.9375rem;
  --font-md:          1.0625rem;
  --font-lg:          1.25rem;
  --font-xl:          1.5rem;
  --font-2xl:         2rem;
  --font-3xl:         2.5rem;

  /* ── Transitions ─────────────────────────────────────────── */
  --ease-out:         cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:         150ms;
  --dur-base:         250ms;
  --dur-slow:         400ms;
}

/* ═══════════════════════════════════════════════════════════════
   2. RESET & BASE
   ═══════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-body);font-size:var(--font-base);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.55}
button{cursor:pointer;font:inherit}input{font:inherit}

/* ═══════════════════════════════════════════════════════════════
   3. PAGE SHELL
   ═══════════════════════════════════════════════════════════════ */
.page-shell{min-height:100vh;display:flex;flex-direction:column;position:relative}

/* ═══════════════════════════════════════════════════════════════
   4. HERO BAND (v2: tighter, cleaner)
   ═══════════════════════════════════════════════════════════════ */
.hero-band{
  position:relative;
  padding:var(--space-3xl) var(--space-xl) var(--space-2xl);
  max-width:var(--hero-max);
  margin:0 auto;
  width:100%;
  overflow:hidden
}
.hero-band::after{
  content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:60%;height:1px;
  background:linear-gradient(90deg,transparent,var(--brand-light) 30%,var(--brand) 50%,var(--brand-light) 70%,transparent)
}
.hero-copy{position:relative;z-index:1}

/* Brand lockup (v2: clear space enforced) */
.brand-lockup{
  display:flex;align-items:center;gap:var(--space-md);margin-bottom:var(--space-lg)
}
.brand-mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:var(--radius-md);
  background:linear-gradient(135deg,var(--brand),var(--brand-deep));
  color:#fff;font-weight:800;font-size:var(--font-lg);flex-shrink:0;
  box-shadow:var(--shadow-card)
}
.brand-name{font-weight:700;font-size:var(--font-xl);color:var(--ink);line-height:1.2}
.brand-name strong{
  display:block;font-size:var(--font-xs);letter-spacing:0.18em;
  text-transform:uppercase;color:var(--brand);font-weight:700
}
.eyebrow{
  font-weight:700;font-size:var(--font-sm);letter-spacing:0.12em;
  text-transform:uppercase;color:var(--brand);margin-bottom:var(--space-md)
}
.hero-band h1{
  font-weight:800;font-size:var(--font-3xl);line-height:1.18;
  max-width:720px;margin-bottom:var(--space-lg)
}
.hero-bullets{display:flex;flex-wrap:wrap;gap:var(--space-sm)}
.hero-bullets span{
  font-size:var(--font-sm);font-weight:600;color:var(--muted);
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-full);padding:var(--space-xs) var(--space-md)
}
.hero-glow{position:absolute;border-radius:50%;filter:blur(140px);opacity:0.08;pointer-events:none}
.hero-glow-left{width:400px;height:400px;background:var(--brand);top:-100px;left:-120px}
.hero-glow-right{width:280px;height:280px;background:var(--amber);bottom:-60px;right:-80px}

/* ═══════════════════════════════════════════════════════════════
   5. DASHBOARD FRAME
   ═══════════════════════════════════════════════════════════════ */
.dashboard-frame{
  display:flex;flex:1;max-width:var(--content-max);margin:0 auto;
  width:100%;padding:0 var(--space-lg);gap:0
}

/* ── 5a. SIDEBAR ──────────────────────────────────────────── */
.sidebar{
  width:var(--sidebar-width);flex-shrink:0;display:flex;flex-direction:column;
  padding:var(--space-lg) var(--space-md);position:sticky;top:0;
  height:100vh;overflow-y:auto;background:transparent
}
.sidebar-head{padding-bottom:var(--space-lg);margin-bottom:var(--space-lg);border-bottom:1px solid var(--line)}
.sidebar-logo{display:flex;align-items:center;gap:var(--space-sm)}
.sidebar-logo .brand-mark{width:40px;height:40px;font-size:var(--font-md);border-radius:var(--radius-sm)}
.sidebar-logo strong{display:block;font-weight:700;font-size:var(--font-base);color:var(--ink)}
.sidebar-logo small{font-size:var(--font-xs);color:var(--muted)}
.sidebar-group{margin-bottom:var(--space-lg)}
.sidebar-label{
  font-size:var(--font-xs);font-weight:700;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--muted);padding:0 var(--space-sm);margin-bottom:var(--space-sm)
}
.nav-item{
  position:relative;display:flex;align-items:center;gap:var(--space-sm);
  width:100%;padding:var(--space-sm) var(--space-sm);border:none;border-radius:var(--radius-sm);
  background:transparent;color:var(--muted);font-size:var(--font-sm);font-weight:500;
  text-align:left;transition:background var(--dur-fast),color var(--dur-fast);margin-bottom:2px
}
.nav-item::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:0;background:var(--brand);border-radius:var(--radius-full);
  transition:height var(--dur-base) var(--ease-out)
}
.nav-item:hover{background:var(--brand-ghost);color:var(--ink)}
.nav-item:hover::before{height:40%}
.nav-item.active{background:var(--brand-light);color:var(--brand-deep);font-weight:600}
.nav-item.active::before{height:60%}
.nav-icon{font-size:var(--font-base);width:20px;text-align:center;flex-shrink:0}
.sidebar-foot{
  margin-top:auto;padding:var(--space-md) var(--space-sm);
  border-top:1px solid var(--line);display:flex;justify-content:space-between;
  align-items:center;font-size:var(--font-xs);color:var(--muted)
}
.sidebar-foot strong{font-size:var(--font-xs);color:var(--brand);font-weight:600}

/* ── 5b. WORKSPACE ────────────────────────────────────────── */
.workspace{flex:1;min-width:0;display:flex;flex-direction:column;padding:var(--space-lg) 0 var(--space-2xl) var(--space-lg);touch-action:pan-y}
.workspace-body{flex:1;display:flex;flex-direction:column;gap:var(--space-2xl)}

/* ── 5c. TOPBAR (v2: clean, elevated) ─────────────────────── */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);
  height:var(--topbar-height);margin-bottom:var(--space-lg);
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:var(--space-sm) var(--space-md);
  box-shadow:var(--shadow-xs)
}
.search-shell{
  display:flex;align-items:center;gap:var(--space-sm);flex:1;max-width:360px;
  background:var(--bg-sunken);border:1px solid transparent;border-radius:var(--radius-full);
  padding:var(--space-xs) var(--space-md);
  transition:border-color var(--dur-fast),box-shadow var(--dur-fast),background var(--dur-fast)
}
.search-shell:focus-within{
  border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-light);background:var(--surface)
}
.search-shell input{border:none;background:transparent;outline:none;flex:1;font-size:var(--font-sm);color:var(--ink);min-width:0}
.search-shell input::placeholder{color:var(--muted)}
.search-clear{border:none;background:transparent;color:var(--muted);font-size:var(--font-sm);padding:2px 4px;border-radius:var(--radius-sm)}
.topbar-actions{display:flex;align-items:center;gap:var(--space-sm);flex-shrink:0}
.top-pill{
  display:inline-flex;align-items:center;padding:var(--space-xs) var(--space-md);
  border-radius:var(--radius-full);font-size:var(--font-xs);font-weight:600;
  background:var(--brand-ghost);color:var(--brand);cursor:pointer;
  border:none;transition:background var(--dur-fast)
}
.top-pill:hover{background:var(--brand-light)}
.top-pill.active{background:var(--brand);color:#fff}
.avatar-chip{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:var(--radius-full);
  background:var(--ink-soft);color:#fff;font-size:var(--font-xs);font-weight:700
}

/* ── 5d. WORKSPACE TITLE ──────────────────────────────────── */
.workspace-title{
  display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-md)
}
.crumb{
  font-size:var(--font-xs);font-weight:600;color:var(--brand);
  letter-spacing:0.04em;text-transform:uppercase;margin-bottom:var(--space-xs)
}
.workspace-title h2{font-weight:800;font-size:var(--font-2xl);color:var(--ink);line-height:1.15}
.title-actions{display:flex;gap:var(--space-sm);flex-shrink:0}
.btn-ghost,.btn-primary{
  padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-full);
  font-size:var(--font-sm);font-weight:600;border:none;
  transition:all var(--dur-fast) var(--ease-out)
}
.btn-ghost{background:transparent;color:var(--muted);border:1px solid var(--line)}
.btn-ghost:hover{background:var(--bg-sunken);color:var(--ink);border-color:var(--muted)}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-deep);box-shadow:var(--shadow-sm)}

/* ═══════════════════════════════════════════════════════════════
   6. METRIC CARDS (v2: elevated, wider spacing)
   ═══════════════════════════════════════════════════════════════ */
.summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-xl)}
.metric-card{
  position:relative;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:var(--space-xl);box-shadow:var(--shadow-xs);
  transition:transform var(--dur-base),box-shadow var(--dur-base)
}
.metric-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-elevated)}
.metric-accent{display:block;width:8px;height:8px;border-radius:var(--radius-full);margin-bottom:var(--space-lg)}
.metric-accent.green{background:var(--green);box-shadow:0 0 8px rgba(22,163,74,0.4)}
.metric-accent.amber{background:var(--amber);box-shadow:0 0 8px rgba(217,119,6,0.4)}
.metric-accent.red{background:var(--red);box-shadow:0 0 8px rgba(220,38,38,0.4)}
.metric-accent.blue{background:var(--blue);box-shadow:0 0 8px rgba(37,99,235,0.4)}
.metric-card p{font-size:var(--font-sm);color:var(--muted);margin-bottom:var(--space-sm);font-weight:500}
.metric-card h3{font-weight:800;font-size:var(--font-2xl);color:var(--ink);margin-bottom:var(--space-md);line-height:1.1}
.metric-card small{font-size:var(--font-xs);color:var(--muted);font-weight:500;display:block}

/* ═══════════════════════════════════════════════════════════════
   7. PANELS (v2: stronger elevation, consistent padding)
   ═══════════════════════════════════════════════════════════════ */
.panel{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:var(--space-xl);
  box-shadow:var(--shadow-xs);overflow:hidden
}
.panel-head{
  display:flex;justify-content:space-between;align-items:flex-start;
  margin-bottom:var(--space-lg);padding-bottom:var(--space-lg);
  border-bottom:1px solid var(--line-soft)
}
.panel-head.compact{margin-bottom:var(--space-md);padding-bottom:var(--space-md)}
.panel-kicker{
  font-size:var(--font-xs);font-weight:700;text-transform:uppercase;
  letter-spacing:0.08em;color:var(--muted);margin-bottom:var(--space-sm)
}
.panel-head h3{font-weight:700;font-size:var(--font-md);color:var(--ink)}
.analytics-row{display:grid;grid-template-columns:2fr 1fr;gap:var(--space-xl)}
.insight-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-xl)}
.analysis-row,.insight-grid,.table-row{margin-top:0}
/* v4: explicit section bottom margins for premium rhythm */
.summary-grid{margin-bottom:0}
.analytics-row{margin-bottom:0}
.insight-grid{margin-bottom:0}
.table-row{grid-column:1/-1}

/* ═══════════════════════════════════════════════════════════════
   8. TABLES (v2: cleaner, better contrast)
   ═══════════════════════════════════════════════════════════════ */
table{width:100%;border-collapse:collapse;font-size:var(--font-sm)}
thead th{
  text-align:left;font-size:var(--font-xs);font-weight:700;
  text-transform:uppercase;letter-spacing:0.06em;color:var(--muted);
  padding:var(--space-sm) var(--space-md);border-bottom:2px solid var(--line);white-space:nowrap
}
tbody td{padding:var(--space-sm) var(--space-md);border-bottom:1px solid var(--line-soft);color:var(--ink)}
tbody tr:hover td{background:var(--bg-sunken)}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ═══════════════════════════════════════════════════════════════
   9. PAGE TOOLBAR (v2 — data-heavy page filter/sort/action zone)
   ═══════════════════════════════════════════════════════════════ */
.page-toolbar{
  display:flex;align-items:center;gap:var(--space-sm);flex-wrap:wrap;
  padding:var(--space-md);margin-bottom:var(--space-lg);
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-xs)
}
.page-toolbar > *{flex-shrink:0}
.toolbar-btn{
  padding:var(--space-xs) var(--space-md);border:1px solid var(--line);
  border-radius:var(--radius-full);background:var(--surface);
  font-size:var(--font-xs);font-weight:600;color:var(--muted);
  transition:all var(--dur-fast) var(--ease-out)
}
.toolbar-btn:hover{background:var(--bg-sunken);color:var(--ink);border-color:var(--muted)}
.toolbar-btn.active{background:var(--brand);color:#fff;border-color:var(--brand)}
.toolbar-sep{width:1px;height:20px;background:var(--line);margin:0 var(--space-xs)}
.toolbar-search{
  flex:1;max-width:200px;display:flex;align-items:center;gap:var(--space-xs);
  background:var(--bg-sunken);border:1px solid var(--line);
  border-radius:var(--radius-full);padding:var(--space-xs) var(--space-sm)
}
.toolbar-search input{border:none;background:transparent;outline:none;font-size:var(--font-xs);color:var(--ink);width:100%}

/* ═══════════════════════════════════════════════════════════════
   10. COMPACT PAGE HEADER
   ═══════════════════════════════════════════════════════════════ */
.page-header-compact{margin-bottom:var(--space-md)}
.page-header-compact .crumb{margin-bottom:var(--space-xs)}
.page-header-compact h2{font-weight:800;font-size:var(--font-2xl);color:var(--ink);margin-bottom:var(--space-sm)}
.page-desc{font-size:var(--font-sm);color:var(--muted);max-width:560px}
.compact-shell{min-height:400px;display:flex;flex-direction:column;gap:var(--space-lg)}

/* ═══════════════════════════════════════════════════════════════
   11. RFSM MAP ZONE (v2 — flagship differentiator)
   ═══════════════════════════════════════════════════════════════ */
.rfsm-map-shell{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:var(--space-lg);
  box-shadow:var(--shadow-card);margin-bottom:var(--space-lg)
}
.rfsm-map-shell .map-placeholder{
  display:flex;align-items:center;justify-content:center;
  min-height:360px;background:var(--bg-sunken);
  border:2px dashed var(--line);border-radius:var(--radius-md);
  color:var(--muted);font-size:var(--font-sm)
}

/* ═══════════════════════════════════════════════════════════════
   12. PRESENCE WIDGET (v2 — Lobby right-bottom, polished)
   ═══════════════════════════════════════════════════════════════ */
.presence-widget{
  position:fixed;bottom:var(--space-lg);right:var(--space-lg);
  width:320px;max-height:420px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-elevated);overflow:hidden;z-index:50;
  display:flex;flex-direction:column;
  animation:fade-in var(--dur-base) var(--ease-out)
}
.pw-head{
  display:flex;align-items:center;gap:var(--space-sm);
  padding:var(--space-sm) var(--space-md);
  border-bottom:1px solid var(--line);
  flex-shrink:0
}
.pw-pulse{
  width:8px;height:8px;border-radius:50%;
  background:var(--green);box-shadow:0 0 6px var(--green);
  animation:pulse 2s ease-in-out infinite;flex-shrink:0
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.35}}
.pw-head-title{
  font-size:var(--font-xs);font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:0.06em;flex:1
}
.pw-count{
  font-size:var(--font-xs);font-weight:600;color:var(--green)
}
.pw-close{
  width:24px;height:24px;border:none;background:transparent;
  color:var(--muted);font-size:var(--font-md);border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;
  transition:background var(--dur-fast),color var(--dur-fast);
  flex-shrink:0;margin-left:var(--space-xs)
}
.pw-close:hover{background:var(--red-light);color:var(--red)}
.pw-list{flex:1;overflow-y:auto;padding:var(--space-xs) var(--space-sm)}
.pw-list:empty::after{
  content:'No active members';display:flex;align-items:center;
  justify-content:center;padding:var(--space-xl) var(--space-md);
  color:var(--muted);font-size:var(--font-xs);font-style:italic
}
.pw-item{
  display:flex;align-items:center;gap:var(--space-sm);
  padding:var(--space-sm);border-radius:var(--radius-sm);
  font-size:var(--font-xs);transition:background var(--dur-fast);
  cursor:default
}
.pw-item:hover{background:var(--brand-ghost)}
.pw-avatar{
  width:28px;height:28px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:var(--font-xs);font-weight:700;color:#fff
}
.pw-name{font-weight:600;color:var(--ink);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pw-status{
  width:6px;height:6px;border-radius:50%;flex-shrink:0
}
.pw-online{background:var(--green);box-shadow:0 0 4px var(--green)}
.pw-idle{background:var(--amber)}
.pw-offline{background:var(--gray)}
.pw-type{
  font-size:9px;font-weight:600;padding:1px 6px;border-radius:var(--radius-full);
  text-transform:uppercase;letter-spacing:0.04em
}
.pw-type-human{background:var(--blue-light);color:var(--blue)}
.pw-type-agent{background:var(--brand-light);color:var(--brand)}

/* ═══════════════════════════════════════════════════════════════
   13. MOBILE CHROME
   ═══════════════════════════════════════════════════════════════ */
.mob-topbar,.mob-bottomnav{display:none}

@media (max-width:768px){
  .mob-topbar,.mob-bottomnav{display:flex}
  .sidebar{display:none}
  .topbar{display:none}
  .presence-widget{display:none} /* hidden on mobile */
  .hero-band{padding:var(--space-xl) var(--space-md) var(--space-lg)}
  .hero-band h1{font-size:var(--font-xl)}
  .hero-glow{opacity:0.04}
  .dashboard-frame{flex-direction:column;padding:0 var(--space-md)}
  .workspace{
    padding:0;
    padding-bottom:calc(var(--space-2xl) + 72px + env(safe-area-inset-bottom,0px))
  }
  .workspace-body{gap:var(--space-md)}
  .workspace-title h2{font-size:var(--font-xl)}
  .title-actions{display:none}
  .summary-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-md)}
  .analytics-row,.insight-grid{gap:var(--space-md)}
  .analytics-row{grid-template-columns:1fr}
  .insight-grid{grid-template-columns:1fr}
  .metric-card{padding:var(--space-md)}
  .metric-accent{margin-bottom:var(--space-sm)}
  .metric-card h3{font-size:var(--font-xl);margin-bottom:var(--space-sm)}
  .panel{padding:var(--space-md)}
  .page-header-compact h2{font-size:var(--font-xl)}
  .page-toolbar{flex-wrap:wrap;gap:var(--space-xs);padding:var(--space-sm)}
  .toolbar-search{max-width:100%}
  .rfsm-map-shell .map-placeholder{min-height:240px}
  .table-wrap{
    margin:0 calc(-1 * var(--space-md));padding:0 var(--space-md);
    position:relative
  }
  .table-wrap::after{
    content:'';position:absolute;top:0;right:0;bottom:0;width:24px;
    background:linear-gradient(90deg,transparent,var(--surface));pointer-events:none
  }

  /* mobile topbar — v4 premium */
  .mob-topbar{
    position:fixed;top:0;left:0;right:0;
    height:calc(48px + env(safe-area-inset-top,0px));
    padding-top:env(safe-area-inset-top,0px);
    background:var(--surface);border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-sm);
    display:flex;align-items:center;justify-content:space-between;
    padding-left:var(--space-md);padding-right:var(--space-md);z-index:100
  }
  .mob-back,.mob-search{
    background:none;border:none;font-size:var(--font-lg);color:var(--muted);
    width:44px;height:44px;display:flex;align-items:center;justify-content:center;
    border-radius:var(--radius-sm);-webkit-tap-highlight-color:transparent;
    transition:background var(--dur-fast)
  }
  .mob-back:active,.mob-search:active{background:var(--brand-ghost)}
  .mob-title{
    flex:1;font-weight:700;font-size:var(--font-base);color:var(--ink);
    text-align:center;overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap;padding:0 var(--space-sm)
  }
  .page-shell{padding-top:calc(48px + env(safe-area-inset-top,0px))}

  /* mobile bottomnav — v4 premium */
  .mob-bottomnav{
    position:fixed;bottom:0;left:0;right:0;
    height:calc(56px + env(safe-area-inset-bottom,0px));
    padding-bottom:env(safe-area-inset-bottom,0px);
    background:var(--surface);border-top:1px solid var(--line);
    box-shadow:0 -2px 12px rgba(0,0,0,0.05);
    display:flex;align-items:stretch;justify-content:space-around;
    padding-left:var(--space-xs);padding-right:var(--space-xs);z-index:100
  }
  .mob-nav-item{
    position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:2px;flex:1;border:none;background:transparent;color:var(--muted);
    font-size:var(--font-xs);font-weight:500;border-radius:var(--radius-sm);
    -webkit-tap-highlight-color:transparent;
    transition:color var(--dur-fast),transform 0.1s
  }
  .mob-nav-item::after{
    content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);
    width:0;height:2px;border-radius:2px;background:var(--brand);
    transition:width var(--dur-base) var(--ease-out)
  }
  .mob-nav-item:active{transform:scale(0.92)}
  .mob-nav-item.active{color:var(--brand)}
  .mob-nav-item.active::after{width:20px}
  .mob-nav-icon{font-size:var(--font-lg);line-height:1}
  .mob-nav-label{font-size:10px;font-weight:600;letter-spacing:0.02em}
}

/* ── Mobile "More" slide-up sheet ── */
.more-sheet-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.35);z-index:200;
  opacity:0;pointer-events:none;transition:opacity 0.25s;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)
}
.more-sheet-overlay.open{opacity:1;pointer-events:auto}
.more-sheet{
  position:fixed;bottom:0;left:0;right:0;background:var(--surface);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;z-index:201;
  transform:translateY(100%);transition:transform 0.3s cubic-bezier(0.32,0.72,0,1);
  padding-bottom:env(safe-area-inset-bottom,0px);max-height:70vh;
  display:flex;flex-direction:column
}
.more-sheet.open{transform:translateY(0)}
.more-sheet-handle{width:36px;height:4px;border-radius:2px;background:var(--line);margin:var(--space-sm) auto var(--space-md)}
.more-sheet-title{
  font-weight:700;font-size:var(--font-md);color:var(--ink);
  padding:0 var(--space-lg) var(--space-md);border-bottom:1px solid var(--line-soft)
}
.more-sheet-scroll{flex:1;overflow-y:auto;padding:var(--space-md) var(--space-lg)}
.more-sheet-item{
  display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md);
  border-radius:var(--radius-md);border:none;background:transparent;
  width:100%;text-align:left;font-size:var(--font-base);color:var(--ink);
  -webkit-tap-highlight-color:transparent;transition:background var(--dur-fast)
}
.more-sheet-item:active{background:var(--brand-ghost)}
.more-sheet-item.active{background:var(--brand-light);color:var(--brand-deep);font-weight:600}

/* ── Swipe indicator ── */
.swipe-indicator{
  position:fixed;top:50%;transform:translateY(-50%);width:40px;height:80px;
  display:flex;align-items:center;justify-content:center;z-index:50;
  opacity:0;pointer-events:none;transition:opacity 0.2s
}
.swipe-indicator.left{left:var(--space-xs)}
.swipe-indicator.right{right:var(--space-xs)}
.swipe-indicator.show{opacity:1}

/* ── Extra-small mobile ── */
@media (max-width:480px){
  .compact-split{grid-template-columns:1fr}
  .compact-metrics{grid-template-columns:1fr 1fr}
  .mini-metric{padding:var(--space-sm)}
  .mini-metric strong{font-size:1.1rem}
  .fin-head{flex-wrap:wrap}
  .fin-head .conf-src{width:100%;margin-left:0;margin-top:var(--space-xs)}
  .fin-row{flex-wrap:wrap}
  .fin-row small{width:100%;margin-top:2px}
  .pipe-flow{gap:var(--space-xs)}
  .pipe-stage{min-width:56px;padding:var(--space-xs);font-size:0.65rem}
  .pipe-stage strong{font-size:0.95rem}
  .roster-grid{grid-template-columns:1fr 1fr}
  .rost-avatar{width:36px;height:36px;font-size:0.85rem}
  .rost-name{font-size:0.8rem}
}

/* ═══════════════════════════════════════════════════════════════
   14. UTILITY
   ═══════════════════════════════════════════════════════════════ */
.hidden{display:none!important}
.chart-placeholder{
  display:flex;align-items:center;justify-content:center;
  min-height:200px;background:var(--bg-sunken);
  border:2px dashed var(--line);border-radius:var(--radius-md);
  color:var(--muted);font-size:var(--font-sm)
}
@keyframes fade-in{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:translateY(0)}
}
.workspace-body>*{animation:fade-in var(--dur-slow) var(--ease-out)}

/* ═══════════════════════════════════════════════════════════════
   15. OC2 BLOCK — CONTENT-LEVEL STYLES (preserved)
   ═══════════════════════════════════════════════════════════════
   These serve OC2's render functions (renderCompactPage, etc.)
   OC1: maintained here for single-source CSS delivery.
   ═══════════════════════════════════════════════════════════════ */

/* ── Pills ── */
.pill-green{display:inline-block;background:var(--green-light);color:var(--green);padding:2px 8px;border-radius:var(--radius-full);font-size:var(--font-xs);font-weight:600}
.pill-amber{display:inline-block;background:var(--amber-light);color:var(--amber);padding:2px 8px;border-radius:var(--radius-full);font-size:var(--font-xs);font-weight:600}
.pill-red{display:inline-block;background:var(--red-light);color:var(--red);padding:2px 8px;border-radius:var(--radius-full);font-size:var(--font-xs);font-weight:600}
.pill-blue{display:inline-block;background:var(--blue-light);color:var(--blue);padding:2px 8px;border-radius:var(--radius-full);font-size:var(--font-xs);font-weight:600}
.pill-gray{display:inline-block;background:var(--bg-sunken);color:var(--muted);padding:2px 8px;border-radius:var(--radius-full);font-size:var(--font-xs);font-weight:600}

/* ── Alert rows ── */
.alert-row{display:flex;align-items:flex-start;gap:var(--space-sm);padding:var(--space-sm) 0;border-bottom:1px solid var(--line-soft);font-size:var(--font-sm)}
.alert-row span:first-child{flex-shrink:0;font-size:var(--font-xs)}

/* ── Sub-panel rows ── */
.sp-row{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-xs) 0;font-size:var(--font-sm)}
.sp-row strong{margin-left:auto;color:var(--ink)}
.sp-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.dot-blue{background:var(--blue)}.dot-green{background:var(--green)}.dot-amber{background:var(--amber)}.dot-red{background:var(--red)}.dot-gray{background:var(--gray)}

/* ── Compact content (v2: card contained) ── */
.compact-full{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:var(--space-lg);
  box-shadow:var(--shadow-xs);margin-bottom:var(--space-lg)
}
.compact-title{font-weight:700;font-size:var(--font-md);color:var(--ink);margin-bottom:var(--space-md)}
.compact-sub{font-weight:700;font-size:var(--font-sm);color:var(--muted);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:var(--space-sm)}
.compact-split{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg)}
.compact-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-md);margin-bottom:var(--space-lg)}
.mini-metric{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-md);padding:var(--space-md);
  text-align:center;box-shadow:var(--shadow-xs)
}
.mini-metric .mini-label{display:block;font-size:var(--font-xs);color:var(--muted);margin-bottom:var(--space-xs)}
.mini-metric strong{display:block;font-size:var(--font-xl);font-weight:800;color:var(--ink);margin-bottom:2px}
.mini-metric small{font-size:var(--font-xs);color:var(--muted)}
.compact-note{
  margin-top:var(--space-lg);padding-top:var(--space-md);
  border-top:1px solid var(--line);font-size:var(--font-xs);
  color:var(--muted);font-style:italic
}

/* ── Bar rows ── */
.bar-row{margin-bottom:var(--space-sm);font-size:var(--font-sm)}
.bar-row span{color:var(--muted)}
.bar-pct{float:right;font-weight:600;color:var(--ink)}
.bar-track{background:var(--line);border-radius:var(--radius-sm);height:8px;margin-top:4px;overflow:hidden}
.bar-fill{background:var(--brand);border-radius:var(--radius-sm);height:100%;transition:width 0.3s var(--ease-out)}

/* ── Shortlist ── */
.short-row{padding:var(--space-sm) 0;border-bottom:1px solid var(--line-soft)}
.short-row strong{display:block;font-size:var(--font-sm);color:var(--ink)}
.short-row .pill-green{margin:2px 0}
.short-row small{display:block;font-size:var(--font-xs);color:var(--muted);margin-top:2px}

/* ── Finance blocks (v2: stronger card containment) ── */
.finance-block{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:var(--space-lg);
  box-shadow:var(--shadow-xs);margin-bottom:var(--space-lg)
}
.fin-head{
  display:flex;align-items:center;gap:var(--space-sm);
  margin-bottom:var(--space-md);padding-bottom:var(--space-md);
  border-bottom:1px solid var(--line-soft)
}
.fin-head h4{font-weight:700;font-size:var(--font-sm);color:var(--ink)}
.conf-badge{font-size:var(--font-xs);font-weight:700;padding:1px 6px;border-radius:var(--radius-sm);text-transform:uppercase}
.conf-green{background:var(--green-light);color:var(--green)}
.conf-amber{background:var(--amber-light);color:var(--amber)}
.conf-red{background:var(--red-light);color:var(--red)}
.conf-src{font-size:var(--font-xs);color:var(--muted);margin-left:auto;font-style:italic}
.fin-row{display:flex;align-items:center;padding:var(--space-xs) 0;font-size:var(--font-sm);border-bottom:1px solid var(--line-soft)}
.fin-row:last-child{border-bottom:none}
.fin-row span{flex:1;color:var(--muted)}
.fin-row strong{margin-right:var(--space-md);color:var(--ink)}
.fin-row small{font-size:var(--font-xs);color:var(--muted);white-space:nowrap}

/* ── Pipeline ── */
.pipe-flow{display:flex;flex-wrap:wrap;gap:var(--space-sm)}
.pipe-stage{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:var(--space-sm);background:var(--bg-sunken);
  border:1px solid var(--line);border-radius:var(--radius-sm);
  font-size:var(--font-xs);min-width:64px
}
.pipe-stage strong{font-size:1.1rem;color:var(--ink)}

/* ── Comms ── */
.comms-row{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-xs) 0;border-bottom:1px solid var(--line-soft);font-size:var(--font-sm)}
.comms-row:last-child{border-bottom:none}
.comms-row .dot-green,.comms-row .dot-amber,.comms-row .dot-gray{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.comms-row strong{min-width:90px;color:var(--ink)}
.comms-row span:last-child{color:var(--muted)}

/* ── Roster (v2: elevated cards) ── */
.roster-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--space-md)}
.roster-card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:var(--space-lg);
  text-align:center;box-shadow:var(--shadow-xs);
  transition:transform var(--dur-fast),box-shadow var(--dur-fast)
}
.roster-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-elevated)}
.rost-avatar{
  width:44px;height:44px;border-radius:50%;
  background:linear-gradient(135deg,var(--brand),var(--brand-deep));
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:var(--font-md);font-weight:700;margin:0 auto var(--space-sm)
}
.rost-name{font-weight:700;font-size:var(--font-sm);color:var(--ink)}
.rost-role{font-size:var(--font-xs);color:var(--muted);margin:2px 0}
.rost-dept{font-size:var(--font-xs);color:var(--gray);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:var(--space-sm);font-weight:600}
.rost-last{display:block;font-size:var(--font-xs);color:var(--gray);margin-top:var(--space-xs)}

/* ── Dashboard mini header ── */
.dash-mini-header{
  display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-md);
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-md);margin-bottom:var(--space-md);box-shadow:var(--shadow-xs)
}
.dash-mini-pulse{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.pulse-green{background:var(--green);box-shadow:0 0 6px var(--green);animation:pulse 2s ease-in-out infinite}
.pulse-gray{background:var(--gray);box-shadow:none;animation:none}
.dash-mini-title{font-weight:700;font-size:var(--font-base);color:var(--ink)}

/* ── Alert severity ── */
.alert-sev{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;font-size:var(--font-xs);font-weight:700;flex-shrink:0;text-align:center;line-height:18px}
.alert-high .alert-sev{background:var(--red-light);color:var(--red)}
.alert-medium .alert-sev{background:var(--amber-light);color:var(--amber)}
.alert-low .alert-sev{background:var(--green-light);color:var(--green)}

/* ── V2 MODULE CARD SYSTEM ── */
.mod-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-lg);box-shadow:var(--shadow-xs);margin-bottom:var(--space-lg)}
.mod-card-title{font-weight:700;font-size:var(--font-base);color:var(--ink);margin-bottom:var(--space-md)}
.mod-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-md);flex-wrap:wrap;gap:var(--space-sm)}
.mod-toolbar-title{font-weight:800;font-size:var(--font-md);color:var(--ink)}
.mod-filters{display:flex;gap:var(--space-xs)}
.mod-filter-btn{padding:var(--space-xs) var(--space-md);border:1px solid var(--line);border-radius:var(--radius-full);background:var(--bg);font-size:var(--font-xs);font-weight:600;color:var(--muted);cursor:pointer;transition:all var(--dur-fast)}
.mod-filter-btn:hover{background:var(--brand-ghost);color:var(--brand)}
.mod-filter-btn.active{background:var(--brand);color:#fff;border-color:var(--brand)}

/* ── MISSION CONTROL V2 ── */
/* V3 shell: gantt strip, summary cards, sticky toolbar */
.mc-top-rail{display:grid;grid-template-columns:2fr 1fr;gap:var(--space-lg);margin-bottom:var(--space-lg)}
.mc-gantt-strip{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:var(--space-lg);
  box-shadow:var(--shadow-xs);min-height:120px
}
.mc-gantt-strip .mc-gantt-title{font-weight:700;font-size:var(--font-sm);color:var(--muted);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:var(--space-sm)}
.mc-summary-cards{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md);align-content:start}
.mc-summary-card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-md);padding:var(--space-md);
  box-shadow:var(--shadow-xs);text-align:center
}
.mc-summary-card strong{display:block;font-size:var(--font-xl);font-weight:800;color:var(--ink)}
.mc-summary-card span{font-size:var(--font-xs);color:var(--muted);text-transform:uppercase;letter-spacing:0.04em;font-weight:600}
.mc-summary-card.done{border-left:3px solid var(--green)}
.mc-summary-card.pending{border-left:3px solid var(--amber)}
.mc-summary-card.blocked{border-left:3px solid var(--red)}
.mc-sticky-toolbar{
  position:sticky;top:var(--topbar-height);z-index:20;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:var(--space-sm) var(--space-md);
  box-shadow:var(--shadow-sm);margin-bottom:var(--space-lg)
}
.mission-group{margin-bottom:var(--space-lg)}
.group-label{font-weight:700;font-size:var(--font-sm);color:var(--muted);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:var(--space-sm);display:flex;align-items:center;gap:var(--space-sm)}
.group-count{background:var(--bg);color:var(--muted);padding:1px 8px;border-radius:var(--radius-full);font-size:var(--font-xs)}
.mission-cards{display:flex;flex-direction:column;gap:var(--space-sm)}
.mission-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--space-md);box-shadow:var(--shadow-xs);transition:box-shadow var(--dur-fast)}
.mission-card:hover{box-shadow:var(--shadow-elevated)}
.mc-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-sm)}
.mc-top strong{font-size:var(--font-base);color:var(--ink)}
.mc-meta{display:flex;gap:var(--space-lg);font-size:var(--font-xs);color:var(--muted);margin-bottom:var(--space-xs)}
.mc-meta b{color:var(--ink)}
.mc-blockers{font-size:var(--font-xs);color:var(--red);background:var(--red-light);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);margin:var(--space-xs) 0}
.mc-foot{font-size:var(--font-xs);color:var(--muted)}

/* ── RFSM COMMAND V2 ── */
.rfsm-layout{display:grid;grid-template-columns:5fr 2fr;gap:var(--space-xl)}
.rfsm-map-col,.rfsm-data-col{display:flex;flex-direction:column;gap:var(--space-lg)}
.rfsm-map-col{flex:1;min-height:0}
.rfsm-map{position:relative;width:100%;min-height:460px;border-radius:var(--radius-md);overflow:hidden;background:var(--bg);border:1px solid var(--line);flex-shrink:0}
.map-grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(0,0,0,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,0.04) 1px,transparent 1px);background-size:20px 20px}
.map-point{position:absolute;transform:translate(-50%,-50%);cursor:pointer;z-index:2}
.map-dot{display:block;width:14px;height:14px;border-radius:50%;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,0.3)}
.map-label{display:block;font-size:var(--font-xs);font-weight:700;color:var(--ink);text-align:center;margin-top:4px;text-shadow:0 1px 2px #fff}
.map-score{display:block;font-size:var(--font-xs);color:var(--muted);text-align:center}
.map-shortlisted .map-dot{background:var(--green)}
.map-reviewing .map-dot{background:var(--amber)}
.map-pending .map-dot{background:var(--blue)}
.map-rejected .map-dot{background:var(--red)}

/* ── RFSM Zone Cards (replaces CSS map mock) ── */
.rfsm-zone-cards{display:flex;flex-direction:column;gap:var(--space-sm);flex:1;overflow-y:auto;min-height:0}
.rfsm-zone-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--space-md);box-shadow:var(--shadow-xs);transition:box-shadow var(--dur-fast)}
.rfsm-zone-card:hover{box-shadow:var(--shadow-elevated)}
.rzc-top{display:flex;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-sm)}
.rzc-top strong{font-size:var(--font-base);color:var(--ink);flex:1}
.rzc-score{font-weight:800;font-size:var(--font-lg);color:var(--brand)}
.rzc-readiness{font-size:var(--font-xs);font-weight:700;padding:2px 8px;border-radius:var(--radius-full)}
.rzc-meta{display:flex;flex-wrap:wrap;gap:var(--space-md);font-size:var(--font-xs);color:var(--muted);margin-bottom:var(--space-xs)}
.rzc-detail{display:flex;flex-direction:column;gap:2px;font-size:var(--font-xs);color:var(--muted);margin-bottom:var(--space-sm)}
.rzc-gmaps a{font-size:var(--font-xs);color:var(--blue);text-decoration:none;font-weight:600}
.rzc-gmaps a:hover{text-decoration:underline}

/* ── Sort Dropdown ── */
.mod-toolbar-right{display:flex;align-items:center;gap:var(--space-sm)}
.mod-sort{padding:var(--space-xs) var(--space-md);border:1px solid var(--line);border-radius:var(--radius-full);background:var(--bg);font-size:var(--font-xs);font-weight:600;color:var(--muted);cursor:pointer}
.mod-sort:focus{outline:none;border-color:var(--brand)}

/* ── Budget vs Actual table ── */
.fin-bva-table{width:100%}
.fin-bva-table th{text-align:left;font-size:var(--font-xs);font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--muted);padding:var(--space-sm);border-bottom:2px solid var(--line)}
.location-detail{border-left:4px solid var(--brand)}
.loc-metrics{margin-bottom:var(--space-sm)}
.loc-action{font-size:var(--font-sm);color:var(--muted);font-style:italic;padding-top:var(--space-sm);border-top:1px solid var(--line-soft);margin-top:var(--space-sm)}

/* ── FINANCE COMMAND V2 ── */
.fin-perf-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-md);margin-bottom:var(--space-lg)}
.fin-perf-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-lg);box-shadow:var(--shadow-xs);text-align:center}
.fin-perf-card:hover{box-shadow:var(--shadow-elevated)}
.fin-perf-label{display:block;font-size:var(--font-xs);color:var(--muted);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:var(--space-xs);font-weight:600}
.fin-perf-card strong{display:block;font-size:var(--font-lg);font-weight:800;color:var(--ink);margin-bottom:var(--space-xs)}
.fin-perf-card small{font-size:var(--font-xs);color:var(--muted)}
.fin-chart-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md);margin-bottom:var(--space-lg)}

/* ── OMEGA VIEW V2 ── */
/* V3: vertical layout — status strip → KPIs → modules → iframe wide */
.omega-layout{display:flex;flex-direction:column;gap:var(--space-lg)}
.omega-top-strip{
  display:flex;align-items:center;gap:var(--space-md);flex-wrap:wrap;
  padding:var(--space-md);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-xs)
}
.omega-top-strip .dash-mini-header{margin-bottom:0;border:none;padding:0;box-shadow:none;flex:1}
.omega-kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-md)}
.omega-kpi-row .mini-metric{margin-bottom:0}
.omega-iframe-wide{width:100%}
.omega-iframe-wide .omega-frame{margin-bottom:0}
.omega-status-card .dash-mini-header{margin-bottom:0}
.omega-status-meta{display:flex;gap:var(--space-lg);padding:var(--space-md);font-size:var(--font-xs);color:var(--muted);background:var(--bg);border-radius:var(--radius-sm);margin:var(--space-md) 0}
.omega-actions{display:flex;gap:var(--space-sm);margin-top:var(--space-sm)}
.omega-module-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-sm)}
.omega-mod-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--space-md);text-align:center;transition:box-shadow var(--dur-fast)}
.omega-mod-card:hover{box-shadow:var(--shadow-elevated)}
.om-icon{width:32px;height:32px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;margin:0 auto var(--space-xs);font-weight:700;font-size:var(--font-sm)}
.om-green{background:var(--green-light);color:var(--green)}
.om-amber{background:var(--amber-light);color:var(--amber)}
.om-gray{background:var(--bg-sunken);color:var(--gray)}
.om-name{font-weight:700;font-size:var(--font-xs);color:var(--ink);margin-bottom:2px}
.om-status{font-size:var(--font-xs);color:var(--muted)}
.om-records{font-size:var(--font-xs);color:var(--muted)}
.omega-frame{border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden}
.omega-frame-bar{background:var(--bg);padding:var(--space-xs) var(--space-md);font-size:var(--font-xs);color:var(--muted);border-bottom:1px solid var(--line)}
.omega-frame-body{display:block;min-height:200px;padding:var(--space-md);font-size:var(--font-sm);color:var(--muted)}
.omega-live-toolbar{display:flex;gap:var(--space-sm);padding:0 var(--space-md) var(--space-md);flex-wrap:wrap}
.omega-live-embed{display:flex;flex-direction:column;gap:var(--space-sm)}
.omega-live-frame{width:100%;height:620px;border:1px solid var(--line);border-radius:var(--radius-md);background:#fff}
.omega-live-fallback{font-size:var(--font-xs);color:var(--muted);padding:0 var(--space-xs)}
.omega-frame-expanded{position:fixed;inset:24px;z-index:1200;background:var(--surface);box-shadow:var(--shadow-lift);border-radius:var(--radius-xl)}
.omega-frame-expanded .omega-live-frame{height:calc(100vh - 180px)}

/* ── FRANCHISE SALES HUB V4 (Premium CRM) ── */
.sales-layout{display:grid;grid-template-columns:1fr 360px;gap:var(--space-lg)}
.pipeline-cards{display:flex;flex-direction:column;gap:var(--space-md)}
.pipe-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-xs);transition:box-shadow var(--dur-fast)}
.pipe-card:hover{box-shadow:var(--shadow-card)}
.pipe-card-head{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md) var(--space-lg);background:var(--surface);border-bottom:1px solid var(--line-soft);font-size:var(--font-sm);font-weight:600}
.pipe-card-head strong{font-size:var(--font-lg);margin-left:auto;font-weight:800}
.pipe-card-sub{font-size:var(--font-xs);color:var(--muted);margin-left:var(--space-xs)}
.pipe-lead{padding:var(--space-md) var(--space-lg);border-bottom:1px solid var(--line-soft);font-size:var(--font-sm);transition:background var(--dur-fast)}
.pipe-lead:last-child{border-bottom:none}
.pipe-lead:hover{background:var(--bg-sunken)}
.pipe-lead strong{display:block;font-size:var(--font-base);color:var(--ink);font-weight:600;margin-bottom:2px}
.pipe-lead-src{color:var(--brand);margin-right:var(--space-sm);font-weight:600}
.pipe-lead span{color:var(--muted)}
.pipe-lead small{display:block;color:var(--gray);margin-top:2px}
.pipe-lead-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px}
.pipe-lead-meta{display:flex;gap:var(--space-md);font-size:var(--font-xs);color:var(--muted)}
.pipe-lead-contact{color:var(--brand);font-weight:500}
.comms-grid{display:flex;flex-direction:column;gap:var(--space-md)}
.comms-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-lg);box-shadow:var(--shadow-xs);transition:box-shadow var(--dur-fast)}
.comms-card:hover{box-shadow:var(--shadow-card)}
.comms-card-top{display:flex;align-items:center;gap:var(--space-md);margin-bottom:var(--space-sm);font-size:var(--font-sm)}
.comms-card-detail{font-size:var(--font-sm);color:var(--muted);line-height:1.5}

/* ── APPROVAL CENTER V4 (Enterprise Decision Desk) ── */
.approval-list{display:flex;flex-direction:column;gap:var(--space-md)}
.approval-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-lg);box-shadow:var(--shadow-xs);transition:box-shadow var(--dur-fast);position:relative}
.approval-card:hover{box-shadow:var(--shadow-card)}
.approval-card[data-impact="Critical"]{border-left:4px solid var(--red)}
.approval-card[data-impact="High"]{border-left:4px solid var(--amber)}
.ap-top{display:flex;align-items:center;gap:var(--space-md);margin-bottom:var(--space-md)}
.ap-type{font-weight:700;font-size:var(--font-sm);color:var(--brand);text-transform:uppercase;letter-spacing:0.06em}
.ap-impact-critical{display:inline-flex;align-items:center;gap:var(--space-xs);background:var(--red);color:#fff;padding:3px 12px;border-radius:var(--radius-full);font-size:var(--font-xs);font-weight:700;letter-spacing:0.04em}
.ap-impact-high{display:inline-flex;align-items:center;gap:var(--space-xs);background:var(--amber);color:#fff;padding:3px 12px;border-radius:var(--radius-full);font-size:var(--font-xs);font-weight:700}
.ap-impact-medium{display:inline-flex;align-items:center;gap:var(--space-xs);background:var(--blue-light);color:var(--blue);padding:3px 12px;border-radius:var(--radius-full);font-size:var(--font-xs);font-weight:600}
.ap-request{font-size:var(--font-md);color:var(--ink);font-weight:600;margin-bottom:var(--space-md);line-height:1.5}
.ap-meta{display:flex;gap:var(--space-lg);font-size:var(--font-sm);color:var(--muted);margin-bottom:var(--space-md);flex-wrap:wrap}
.ap-urgency{font-weight:600;color:var(--red);margin-left:auto;font-size:var(--font-xs)}
.ap-actions{display:flex;gap:var(--space-sm);padding-top:var(--space-md);border-top:1px solid var(--line-soft)}
.btn-sm{padding:var(--space-xs) var(--space-md);font-size:var(--font-sm)}

/* ── LOBBY V4 (Premium Collaboration Board) ── */
.lobby-layout{display:grid;grid-template-columns:1fr 340px;gap:var(--space-lg)}
.lobby-presence{display:flex;justify-content:space-between;align-items:center;padding:var(--space-lg);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);margin-bottom:var(--space-lg);box-shadow:var(--shadow-xs);flex-wrap:wrap;gap:var(--space-md)}
.lobby-presence-left{display:flex;align-items:center;gap:var(--space-md)}
.lobby-presence-count{font-size:var(--font-sm);color:var(--muted)}
.lobby-presence-count strong{font-size:var(--font-2xl);color:var(--green);font-weight:800}
.lobby-presence-right{display:flex;gap:var(--space-lg);font-size:var(--font-sm);color:var(--muted)}
.lobby-presence-last{font-style:italic}
.lobby-main{display:flex;flex-direction:column;gap:var(--space-lg)}
.lobby-activity{display:flex;flex-direction:column;gap:var(--space-lg)}
.lobby-console-shell{display:flex;flex-direction:column;min-height:320px}
.lobby-console-body{min-height:220px;max-height:520px;overflow:auto;padding:var(--space-lg)}
.lobby-console-card{display:flex;flex-direction:column;gap:var(--space-md)}
.lobby-console-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-sm);padding-bottom:var(--space-sm);border-bottom:1px solid var(--line-soft)}
.lobby-console-ident{display:flex;gap:var(--space-sm);align-items:center}
.lobby-console-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-sm);padding-top:var(--space-sm)}
.lobby-console-grid span{font-size:var(--font-xs);color:var(--muted);text-transform:uppercase;letter-spacing:0.04em;font-weight:600}
.lobby-console-grid .console-k{display:block;margin-bottom:2px}
.lobby-console-grid .console-v{font-size:var(--font-sm);font-weight:700;color:var(--ink)}
.lobby-console-grid strong{display:block}
.lobby-console-log{display:flex;flex-direction:column;gap:var(--space-sm);padding:var(--space-sm) 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.console-log-line{display:flex;align-items:center;gap:var(--space-sm)}
.console-log-line span{font-size:var(--font-xs);color:var(--muted);min-width:64px;text-transform:uppercase}
.console-log-line strong{font-size:var(--font-sm);color:var(--ink)}
.lobby-console-actions{display:flex;gap:var(--space-sm);padding-top:var(--space-sm)}
.roster-online{border-color:var(--green-light);background:var(--green-light)}
.activity-latest{animation:activityFadeIn 0.6s var(--ease-out)}
.activity-row{padding:var(--space-md) 0;border-bottom:1px solid var(--line-soft);font-size:var(--font-sm)}
.activity-row strong{display:block;color:var(--ink);font-size:var(--font-base);font-weight:600;margin-bottom:2px}
.activity-row span{display:block;color:var(--muted);line-height:1.4}
.activity-row small{color:var(--gray);font-size:var(--font-xs)}

@media (max-width:768px){
  .agent-hall{grid-template-columns:1fr}
  .human-roster{grid-template-columns:1fr 1fr}
  .hall-console{left:var(--space-md);right:var(--space-md);width:auto;bottom:calc(var(--space-lg) + 56px)}
  .hall-header{flex-direction:column;align-items:flex-start;gap:var(--space-md)}
}
.page-error{border:1px solid rgba(220,38,38,0.16);background:#fff}
.page-error p{color:var(--muted);line-height:1.7}

/* ── V4: Lobby hall-style expanded panel ── */
.lobby-hall{display:flex;flex-direction:column;gap:var(--space-lg)}
.lobby-hall-top{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-lg)}
.lobby-hall-card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:var(--space-lg);
  box-shadow:var(--shadow-xs);min-height:200px;
  transition:box-shadow var(--dur-fast),transform var(--dur-fast)
}
.lobby-hall-card:hover{box-shadow:var(--shadow-elevated);transform:translateY(-1px)}
.lobby-hall-card.expanded{grid-column:1/-1;min-height:360px;box-shadow:var(--shadow-elevated)}
.lobby-hall-title{font-weight:700;font-size:var(--font-md);color:var(--ink);margin-bottom:var(--space-md);display:flex;align-items:center;gap:var(--space-sm)}
.lobby-hall-body{display:flex;flex-direction:column;gap:var(--space-sm)}
.lobby-hall-row{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-sm) 0;border-bottom:1px solid var(--line-soft);font-size:var(--font-sm)}
.lobby-hall-row:last-child{border-bottom:none}
.lobby-hall-avatar{width:36px;height:36px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:var(--font-sm);font-weight:700;color:#fff}
.lobby-hall-name{font-weight:600;color:var(--ink);flex:1}
.lobby-hall-meta{font-size:var(--font-xs);color:var(--muted)}
.lobby-hall-badge{font-size:9px;font-weight:600;padding:1px 6px;border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:0.04em}
.lobby-expand-btn{padding:var(--space-xs) var(--space-md);border:1px solid var(--line);border-radius:var(--radius-full);background:var(--surface);font-size:var(--font-xs);font-weight:600;color:var(--muted);cursor:pointer;transition:all var(--dur-fast)}
.lobby-expand-btn:hover{background:var(--brand-ghost);color:var(--brand);border-color:var(--brand)}
@media (max-width:768px){.lobby-hall-top{grid-template-columns:1fr}}

/* ── Metric up/down ── */
.metric-up{color:var(--green)}
.metric-down{color:var(--red)}

/* ── Final UI correction pass: source-of-truth overrides ── */
.summary-grid{
  gap:var(--space-xl);
  margin-bottom:0;
  align-items:stretch;
}
.analytics-row,
.insight-grid{
  gap:var(--space-xl);
  margin-bottom:0;
}
.metric-card{
  padding:36px 32px;
  min-height:196px;
}
.metric-card .dot-green,
.metric-card .dot-amber,
.metric-card .dot-red,
.metric-card .dot-blue{
  display:none;
}
.metric-label{
  display:block;
  margin:0 0 10px;
  font-size:var(--font-sm);
  font-weight:600;
  color:var(--muted);
}
.metric-value-wrap{
  display:flex;
  align-items:flex-end;
  gap:12px;
  min-height:60px;
  margin-bottom:18px;
  flex-wrap:wrap;
}
.metric-prefix{
  font-size:var(--font-sm);
  font-weight:700;
  color:var(--muted);
  line-height:1;
  text-transform:uppercase;
}
.metric-value{
  display:block;
  font-size:clamp(2rem,2.2vw,2.9rem);
  line-height:0.95;
  letter-spacing:-0.04em;
  font-weight:800;
  color:var(--ink);
}
.metric-note{
  display:block;
  margin-top:auto;
  padding-top:10px;
  font-size:var(--font-sm);
  line-height:1.45;
  color:var(--muted);
}
.panel{
  padding:36px 32px;
}
.panel-head{
  margin-bottom:24px;
  padding-bottom:24px;
}

.rfsm-layout{
  grid-template-columns:minmax(580px,1.8fr) minmax(360px,1fr);
  align-items:start;
  gap:32px;
}
.rfsm-map-col{
  gap:32px;
}
.rfsm-map{
  min-height:660px;
}
.rfsm-zone-stats{
  margin-top:0;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}
.rfsm-zone-stats .rfsm-stat-card{
  min-height:112px;
}
.rfsm-data-col{
  gap:32px;
}
.location-detail{
  min-height:312px;
}

.sales-layout{
  grid-template-columns:minmax(0,1.15fr) minmax(440px,1fr);
  align-items:start;
  gap:32px;
}
.sales-comms{
  display:flex;
  flex-direction:column;
  gap:32px;
}
.sales-chatwoot-card{
  overflow:hidden;
}
.sales-chatwoot-card .chatwoot-shell{
  display:flex;
}
.chatwoot-live-status{
  display:flex;
  align-items:center;
  gap:var(--space-sm);
  margin-bottom:var(--space-sm);
  color:var(--muted);
  font-size:var(--font-xs);
}
.chatwoot-status{font-weight:700;color:var(--ink)}
.chatwoot-status-dot{
  width:8px;
  height:8px;
  border-radius:50%;
}
.chatwoot-status-dot-online{background:var(--green)}
.chatwoot-status-dot-warn{background:var(--amber)}
.chatwoot-status-dot-offline{background:var(--red)}
.chatwoot-live-panel{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--space-lg);
  padding:var(--space-xl);
  text-align:center;
  border:2px dashed var(--line);
  border-radius:var(--radius-lg);
  background:var(--bg);
  min-height:520px;
}
.chatwoot-live-copy{
  max-width:420px;
  display:flex;
  flex-direction:column;
  gap:var(--space-sm);
  color:var(--muted);
}
.chatwoot-live-copy strong{color:var(--ink);font-size:var(--font-lg)}
.chatwoot-live-actions{display:flex;gap:var(--space-sm);flex-wrap:wrap;justify-content:center}
.chatwoot-bridge{
  width:min(760px,100%);
  display:flex;
  flex-direction:column;
  gap:var(--space-lg);
  padding:clamp(20px,3vw,28px);
  border:1px solid rgba(20,37,63,.08);
  border-radius:calc(var(--radius-lg) + 4px);
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(246,248,252,.96));
  box-shadow:0 24px 56px rgba(15,23,42,.08);
}
.chatwoot-bridge-hero{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.chatwoot-bridge-hero h4{
  margin:0;
  font-size:clamp(1.2rem,2vw,1.5rem);
  color:var(--ink);
}
.chatwoot-bridge-hero p{
  margin:0;
  color:var(--muted);
}
.chatwoot-bridge-badge{
  display:inline-flex;
  align-self:flex-start;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(22,163,74,.12);
  color:var(--green-deep);
  font-size:var(--font-xs);
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.chatwoot-bridge-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-md);
}
.chatwoot-bridge-card{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:16px;
  border-radius:var(--radius-md);
  background:rgba(255,255,255,.88);
  border:1px solid rgba(20,37,63,.08);
}
.chatwoot-bridge-label{
  font-size:var(--font-xs);
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--muted);
}
.chatwoot-bridge-card strong{
  color:var(--ink);
  line-height:1.35;
}
.chatwoot-bridge-card small{
  color:var(--muted);
  line-height:1.5;
}
.chatwoot-bridge-footer{
  display:flex;
  gap:var(--space-sm);
  flex-wrap:wrap;
}
.chatwoot-fallback{
  margin-top:var(--space-md);
  color:var(--muted);
  font-size:var(--font-xs);
}
.sales-chatwoot-frame{
  width:100%;
  height:600px;
  border:0;
  border-radius:var(--radius-lg);
  background:#fff;
}

.lobby-layout{
  grid-template-columns:minmax(0,1fr) 380px;
  gap:32px;
  align-items:start;
}
.lobby-hall-top{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
}
.lobby-hall-card{
  min-height:240px;
}
.lobby-hall-card.expanded{
  min-height:420px;
}
.lobby-hall-body{
  gap:12px;
}
.presence-widget{
  width:360px;
  max-height:540px;
}

@media (max-width:1200px){
  .summary-grid{grid-template-columns:repeat(2,1fr)}
  .rfsm-layout{grid-template-columns:1fr}
  .rfsm-map{min-height:520px}
  .sales-layout{grid-template-columns:1fr}
  .lobby-layout{grid-template-columns:1fr}
}

@media (max-width:768px){
  .compact-split{grid-template-columns:1fr}
  .compact-metrics{grid-template-columns:repeat(2,1fr)}
  .roster-grid{grid-template-columns:repeat(2,1fr)}
  .pipe-flow{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* V2 layout collapse — single column on mobile */
  .rfsm-layout{grid-template-columns:1fr}
  .omega-layout{grid-template-columns:1fr}
  .sales-layout{grid-template-columns:1fr}
  .lobby-layout{grid-template-columns:1fr}
  .fin-chart-row{grid-template-columns:1fr}
  .fin-perf-grid{grid-template-columns:repeat(2,1fr)}
  .omega-module-grid{grid-template-columns:repeat(2,1fr)}
  .fin-bva-table{font-size:var(--font-xs)}

  /* V3: Mission Control + Omega mobile */
  .mc-top-rail{grid-template-columns:1fr}
  .mc-gantt-strip{min-height:80px}
  .omega-kpi-row{grid-template-columns:repeat(2,1fr)}

  /* RFSM map compact on mobile */
  .rfsm-map{min-height:240px;height:auto}
  .rfsm-map-col,.rfsm-data-col{gap:var(--space-sm)}

  /* Omega frame compact */
  .omega-frame-body{min-height:140px}
  .omega-live-frame{height:420px}
  .omega-frame-expanded{inset:12px}

  .summary-grid,
  .analytics-row,
  .insight-grid{gap:16px}
  .metric-card,
  .panel{padding:20px}
  .metric-value-wrap{min-height:auto;margin-bottom:10px}
  .metric-value{font-size:clamp(1.75rem,8vw,2.35rem)}
  .metric-note{font-size:var(--font-xs)}
  .rfsm-zone-stats{grid-template-columns:repeat(2,1fr)}
  .rfsm-map{min-height:320px}
  .sales-chatwoot-frame{height:420px}
  .chatwoot-bridge-grid{grid-template-columns:1fr}
  .chatwoot-bridge-footer{flex-direction:column}
  .chatwoot-bridge-footer .btn-primary,
  .chatwoot-bridge-footer .btn-ghost{width:100%;justify-content:center}
  .lobby-hall-top{grid-template-columns:1fr}
  .presence-widget{width:auto;left:12px;right:12px}

  /* V4: Sales mobile — pipeline cards */
  .pipeline-cards{gap:var(--space-sm)}
  .pipe-card-head{padding:var(--space-sm) var(--space-md)}
  .pipe-card-head strong{font-size:var(--font-md)}
  .pipe-lead{padding:var(--space-sm) var(--space-md)}
  .pipe-lead strong{font-size:var(--font-sm)}
  .pipe-lead-meta{flex-wrap:wrap;gap:var(--space-xs)}
  .comms-card{padding:var(--space-md)}
  .comms-card-top{font-size:var(--font-xs)}

  /* V4: Approval mobile — cards */
  .approval-card{padding:var(--space-md)}
  .ap-top{flex-wrap:wrap;gap:var(--space-xs)}
  .ap-request{font-size:var(--font-base)}
  .ap-meta{flex-wrap:wrap;gap:var(--space-sm)}
  .ap-urgency{margin-left:0;width:100%}
  .ap-actions{flex-wrap:wrap}

  /* V4: Lobby mobile — presence + roster */
  .lobby-presence{flex-direction:column;align-items:flex-start;padding:var(--space-md)}
  .lobby-presence-count strong{font-size:var(--font-xl)}
  .lobby-presence-right{flex-wrap:wrap;gap:var(--space-sm)}
  .roster-grid{grid-template-columns:1fr 1fr;gap:var(--space-sm)}
  .roster-card{padding:var(--space-md)}
  .rost-avatar{width:36px;height:36px;font-size:var(--font-sm)}
  .rost-name{font-size:var(--font-xs)}
  .activity-row{padding:var(--space-sm) 0}
}

/* ── P0 CSS Bar Charts ── */
.css-chart{padding:var(--space-sm) 0}
.chart-bars{display:flex;gap:var(--space-sm);align-items:flex-end;height:180px;padding:0 var(--space-xs)}
.chart-bar-group{flex:1;display:flex;flex-direction:column;align-items:center;height:100%}
.chart-bar-stack{flex:1;display:flex;flex-direction:column;justify-content:flex-end;width:100%;gap:2px}
.chart-bar{border-radius:4px 4px 0 0;position:relative;min-height:4px;transition:height 0.4s var(--ease-out)}
.chart-bar span{position:absolute;top:-16px;left:50%;transform:translateX(-50%);font-size:9px;white-space:nowrap;color:var(--muted)}
.chart-rev{background:var(--brand)}.chart-cost{background:var(--red-light)}
.chart-bar-label{font-size:var(--font-xs);color:var(--muted);margin-top:var(--space-xs)}
.chart-legend{display:flex;align-items:center;gap:var(--space-md);justify-content:center;margin-top:var(--space-sm);font-size:var(--font-xs);color:var(--muted)}
.legend-dot{width:10px;height:10px;border-radius:3px;display:inline-block}.legend-rev{background:var(--brand)}.legend-cost{background:var(--red-light)}
.runway-bars{display:flex;flex-direction:column;gap:var(--space-sm)}
.runway-row{display:flex;align-items:center;gap:var(--space-sm);font-size:var(--font-sm)}
.runway-label{width:36px;font-weight:600;color:var(--ink);flex-shrink:0}
.runway-track{flex:1;background:var(--line);border-radius:var(--radius-full);height:22px;overflow:hidden;position:relative}
.runway-fill{background:var(--brand);border-radius:var(--radius-full);height:100%;transition:width 0.5s var(--ease-out);min-width:8px}
.runway-val{position:absolute;right:var(--space-sm);top:50%;transform:translateY(-50%);font-size:var(--font-xs);font-weight:600;color:var(--ink)}
.chart-note{margin-top:var(--space-sm);font-size:var(--font-xs);color:var(--muted);text-align:center}
.omega-kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-sm);margin-bottom:var(--space-md)}
.omega-kpi-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--space-md);text-align:center}
.omega-kpi-label{display:block;font-size:var(--font-xs);color:var(--muted);text-transform:uppercase;letter-spacing:0.04em;margin-bottom:var(--space-xs);font-weight:600}
.omega-kpi-card strong{display:block;font-size:var(--font-md);font-weight:800;color:var(--ink);margin-bottom:2px}
.omega-kpi-card small{font-size:var(--font-xs);color:var(--muted)}
.omega-bar-mock{margin-top:var(--space-sm);padding:var(--space-sm);background:var(--bg);border-radius:var(--radius-sm)}
.omega-frame-refresh{font-size:var(--font-xs);color:var(--muted);margin-left:auto}
.rfsm-map{overflow:hidden;border-radius:var(--radius-md)}
.rfsm-map .leaflet-control-attribution{font-size:8px}
@media (max-width:768px){.chart-bars{height:120px}.omega-kpi-grid{grid-template-columns:repeat(2,1fr)}.fin-chart-row{grid-template-columns:1fr}}

/* ── V3: Mission summary stats ── */
.mission-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-md);margin-bottom:var(--space-lg)}
.mission-stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-md);text-align:center;box-shadow:var(--shadow-xs)}
.mission-stat-val{display:block;font-size:var(--font-2xl);font-weight:800;color:var(--ink);line-height:1.1}
.mission-stat-label{display:block;font-size:var(--font-xs);color:var(--muted);margin-top:var(--space-xs);text-transform:uppercase;letter-spacing:0.06em;font-weight:600}
/* ── V3: Mission progress bar ── */
.mc-progress{margin:var(--space-sm) 0}
.mc-progress-bar{background:var(--line);border-radius:var(--radius-full);height:4px;overflow:hidden}
.mc-progress-fill{background:var(--brand);border-radius:var(--radius-full);height:100%;transition:width 0.5s var(--ease-out)}
/* ── V3: Sales enhanced ── */
.pipe-card-sub{font-size:var(--font-xs);color:var(--muted);margin-left:var(--space-xs)}
.pipe-lead-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px}
.pipe-lead-meta{display:flex;gap:var(--space-md);font-size:var(--font-xs);color:var(--muted)}
.pipe-lead-contact{color:var(--brand);font-weight:500}
/* ── V3: Approval impact badges ── */
.ap-impact-critical{display:inline-block;background:var(--red);color:#fff;padding:2px 8px;border-radius:var(--radius-full);font-size:var(--font-xs);font-weight:700;letter-spacing:0.04em}
.ap-impact-high{display:inline-block;background:var(--amber);color:#fff;padding:2px 8px;border-radius:var(--radius-full);font-size:var(--font-xs);font-weight:700}
.ap-impact-medium{display:inline-block;background:var(--blue);color:#fff;padding:2px 8px;border-radius:var(--radius-full);font-size:var(--font-xs);font-weight:600}
.ap-urgency{font-weight:600;color:var(--red);margin-left:auto}
.activity-latest{animation:activityFadeIn 0.6s var(--ease-out)}
@keyframes activityFadeIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}

/* ── V4: Gantt chart internals ── */
.mc-gantt-rows{display:flex;flex-direction:column;gap:var(--space-sm)}
.mc-gantt-row{display:flex;align-items:center;gap:var(--space-sm);font-size:var(--font-xs)}
.mc-gantt-label{width:160px;flex-shrink:0;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mc-gantt-track{flex:1;background:var(--line);border-radius:var(--radius-full);height:8px;overflow:hidden}
.mc-gantt-bar-active{background:var(--brand);border-radius:var(--radius-full);height:100%}
.mc-gantt-bar-blocked{background:var(--red);border-radius:var(--radius-full);height:100%}
.mc-gantt-due{width:44px;text-align:right;color:var(--muted);flex-shrink:0;font-weight:600}

/* ── V4: Enhanced summary + Omega sub-components ── */
.mc-summary-val{display:block;font-size:var(--font-2xl);font-weight:800;line-height:1.1}
.mc-summary-label{display:block;font-size:var(--font-xs);color:var(--muted);margin-top:var(--space-xs);text-transform:uppercase;letter-spacing:0.06em;font-weight:600}
.mc-summary-active .mc-summary-val{color:var(--brand)}.mc-summary-blocked .mc-summary-val{color:var(--red)}.mc-summary-pending .mc-summary-val{color:var(--amber)}.mc-summary-done .mc-summary-val{color:var(--green)}
.omega-top-left{display:flex;align-items:center;gap:var(--space-md)}
.omega-top-left strong{font-size:var(--font-md);color:var(--ink)}
.omega-top-meta{display:block;font-size:var(--font-xs);color:var(--muted);margin-top:2px}
.omega-top-actions{display:flex;gap:var(--space-sm)}
.metric-prefix{display:block;font-size:var(--font-xs);font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:2px}
.pw-subline{display:block;font-size:var(--font-xs);color:var(--muted);margin-top:1px}
.pw-presence-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-left:auto}
.pw-presence-dot-online{background:var(--green)}.pw-presence-dot-away{background:var(--amber)}.pw-presence-dot-offline{background:var(--gray)}
@media (max-width:768px){.mission-summary{grid-template-columns:repeat(2,1fr)}.lobby-presence{flex-direction:column;align-items:flex-start}.mc-meta{flex-wrap:wrap;gap:var(--space-xs)}.mc-gantt-row{flex-wrap:wrap}.mc-gantt-label{width:100%}}

/* ── Tablet (769-1024px) — salvage cramped layouts ── */
@media (min-width:769px) and (max-width:1024px){
  .rfsm-layout{grid-template-columns:1fr 1fr}
  .omega-iframe-wide .omega-live-frame{height:360px}
  .mc-top-rail{grid-template-columns:2fr 1fr}
  .sales-layout{grid-template-columns:1fr 280px}
}

/* ── V4: Mission timeline date-positioned gantt ── */
.mc-gantt-header{display:flex;justify-content:space-between;font-size:var(--font-xs);color:var(--muted);margin-bottom:var(--space-sm);position:relative;padding:0 48px 0 160px}
.mc-gantt-today-label{position:absolute;transform:translateX(-50%);color:var(--red);font-weight:700;font-size:10px;white-space:nowrap;top:-2px}
.mc-gantt-track{position:relative;flex:1;background:var(--line);border-radius:var(--radius-full);height:18px;overflow:visible}
.mc-gantt-bar{position:absolute;top:2px;bottom:2px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;min-width:4px}
.mc-gantt-bar-active{background:var(--brand)}
.mc-gantt-bar-high{background:var(--amber)}
.mc-gantt-bar-blocked{background:var(--red)}
.mc-gantt-bar-label{font-size:8px;color:#fff;font-weight:700;white-space:nowrap;overflow:hidden;padding:0 4px}
.mc-gantt-today-line{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--red);z-index:3;border-radius:1px}
/* ── V4: Mission card progress pct ── */
.mc-progress{display:flex;align-items:center;gap:var(--space-sm);margin:var(--space-sm) 0}
.mc-progress-bar{flex:1}
.mc-progress-pct{font-size:var(--font-xs);font-weight:700;color:var(--muted);min-width:32px;text-align:right}
/* ── V4: Gantt row layout ── */
.mc-gantt-row{display:flex;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-xs)}
.mc-gantt-rows{padding:0 48px 0 0}
@media (max-width:768px){
  .mc-gantt-header{padding:0 36px 0 100px}
  .mc-gantt-label{width:100px;font-size:10px}
  .mc-gantt-rows{padding:0 36px 0 0}
  .mc-gantt-bar-label{font-size:7px}
}

/* ── V4 review: Gantt mode switch ── */
.mc-gantt-title-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-md)}
.mc-gantt-mode-switch{display:flex;gap:2px;background:var(--line);border-radius:var(--radius-full);padding:2px}
.mc-gantt-mode-btn{padding:var(--space-xs) var(--space-md);border:none;border-radius:var(--radius-full);background:transparent;font-size:11px;font-weight:600;color:var(--muted);cursor:pointer;transition:all var(--dur-fast)}
.mc-gantt-mode-btn:hover{color:var(--ink)}
.mc-gantt-mode-btn.active{background:var(--surface);color:var(--brand);box-shadow:0 1px 3px rgba(0,0,0,0.08)}
.mc-gantt-header{display:flex;justify-content:space-between;font-size:var(--font-xs);color:var(--muted);margin-bottom:var(--space-sm);position:relative}
.mc-gantt-header span{text-align:center;flex:1}
.mc-gantt-header small{display:block;font-size:9px;color:var(--gray)}

/* ── V4 review: RFSM zone stats ── */
.rfsm-zone-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-sm);margin-top:var(--space-md)}
.rfsm-stat-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--space-md);text-align:center;box-shadow:var(--shadow-xs)}
.rfsm-stat-val{display:block;font-size:var(--font-lg);font-weight:800;color:var(--brand);line-height:1.1}
.rfsm-stat-label{display:block;font-size:var(--font-xs);color:var(--muted);margin-top:var(--space-xs);text-transform:uppercase;letter-spacing:0.06em;font-weight:600}

/* ── V4 review: Omega lazy-load placeholder ── */
.omega-lazy-placeholder{display:flex;align-items:center;justify-content:center;min-height:300px;background:var(--bg);border:2px dashed var(--line);border-radius:var(--radius-md)}
.omega-lazy-content{text-align:center;padding:var(--space-xl)}
.omega-lazy-content span{display:block;font-size:var(--font-md);font-weight:700;color:var(--ink);margin-bottom:var(--space-sm)}
.omega-lazy-content small{display:block;font-size:var(--font-sm);color:var(--muted);margin-bottom:var(--space-lg);max-width:320px;margin-left:auto;margin-right:auto}
.omega-live-frame{width:100%;height:420px;border:none}

@media (max-width:768px){
  .rfsm-zone-stats{grid-template-columns:repeat(2,1fr)}
  .omega-lazy-placeholder{min-height:200px}
  .omega-live-frame{height:280px}
  .mc-gantt-mode-btn{padding:var(--space-xs) var(--space-sm);font-size:10px}
}