/* ============================================================================
   187N DEFAULT BUILD: Design System (single source of truth)
   Corporate is the BASE (brand book v2.0: warm, editorial, decisive).
   Light and dark are MODES (deltas). Per-client brands override via client.css.
   Edit a value here and the whole build updates. See theme.md for the guide.
   Drives all 20 dashboard pages.
   ============================================================================ */

/* ---------------------------------------------------------------- TOKENS --- */
/* ---------------------------------------------------------------------------
   PER-CLIENT OVERRIDE SLOTS (the ONLY things a client copy changes)
   Set these in client.css (loaded AFTER tokens.css). Each is consumed below
   through var(--client-*, <187N default>), so leaving one unset falls back to
   the 187N corporate value. Structural tokens (ink weights, lines, status,
   shadows, spacing, the band contract) are intentionally NOT overridable.
     --client-accent        the one brand color (re-points the accent in ALL modes)
     --client-accent-ink    darkened accent for text on an accent tint
     --client-accent-glow   accent glow alpha
     --client-gradient      the thin accent hairline mark (eyebrow rules, progress)
     --client-font-display  display / headline face
     --client-font-sans     body / UI face
     --client-font-mono     mono / label face (optional)
     --client-logo          logo asset (set as a string in client.config.js too)
     --client-radius-scale  optional single geometry multiplier (default 1)
   Name, logo and document title also live in client.config.js for the JS hooks.
   --------------------------------------------------------------------------- */

/* ===========================================================================
   BASE = CORPORATE  (:root)
   =========================================================================== */
:root {
  color-scheme: light;

  /* surfaces - warm cream world (brand book) */
  --canvas:      #F6F6F5;
  --canvas-2:    #EEEDEA;
  --surface:     #FFFFFF;
  --surface-2:   #FAFAF8;   /* app-UI elevation step */
  --surface-3:   #F1F0ED;   /* app-UI elevation step */

  /* ink - one warm near-black, several weights (brand book) */
  --ink:        #1C1C1C;
  --ink-strong: #121212;
  --ink-body:   rgba(28,28,28,.82);
  --ink-muted:  rgba(28,28,28,.56);
  --ink-faint:  rgba(28,28,28,.44);
  --ink-label:  rgba(28,28,28,.70);

  /* ink on the near-black cinematic band (brand book) */
  --ink-on-dark:        #F4F3F1;
  --ink-on-dark-muted:  rgba(244,243,241,.64);
  --ink-on-dark-faint:  rgba(244,243,241,.44);

  /* lines */
  --line:         rgba(28,28,28,.11);
  --line-strong:  rgba(28,28,28,.18);
  --line-faint:   rgba(28,28,28,.06);   /* app-UI step */
  --line-on-dark: rgba(255,255,255,.12);

  /* accent - the ONE coral mark, on the --teal slot (client-overridable).
     Coral is a MARK, never a section fill (brand book). */
  --teal:        var(--client-accent, #FF6301);
  --teal-ink:    var(--client-accent-ink, #C24A07);   /* text on a coral tint */
  --teal-bright: #FF8F6B;
  --grad-a:      var(--client-accent, #FF6301);
  --grad-b:      #FF8F4D;
  --teal-glow:   var(--client-accent-glow, rgba(255,99,1,.16));
  --teal-wash:   rgba(255,99,1,.07);
  --teal-wash-2: rgba(255,99,1,.10);

  /* structural fills resolve to warm INK in corporate (coral is not a fill).
     --mark-gradient is the genuine thin coral hairline (eyebrow, progress, seam).
     --accent-warm collapses the per-page gold-eviction overrides: ink here,
     real gold in light/dark. */
  --gradient:      var(--ink);
  --gradient-soft: rgba(28,28,28,.05);
  --mark-gradient: var(--client-gradient, linear-gradient(110deg, #FF6301, #FF8F4D));
  --accent-warm:   var(--ink);

  /* gold - the precious mark. LOGO ONLY in corporate (brand book hard rule). */
  --gold:        #9C7A43;
  --gold-bright: #C9A24B;
  --gold-soft:   #E0BE94;   /* = brand book --gold-glow */
  --gold-glow:   rgba(156,122,67,.22);
  --gold-wash:   rgba(156,122,67,.08);
  --gold-line:   linear-gradient(90deg, #7a5a26, #C9A24B 40%, #F6E4B6 50%, #C9A24B 60%, #7a5a26);
  --medallion:   radial-gradient(120% 120% at 30% 18%, #2b2e33, #121417 52%, #050608);

  /* status - app-UI exception (brand book defines none; a command center needs
     them). Tuned warm/corporate. Ratified as a documented deviation. */
  --st-live:    #2E9E6B;  --st-live-2: #36B97D;  --st-idle: #9A958C;
  --st-warn:    #CC8A2C;  --st-error:  #C53A22;  --st-pending: #5B61B0;
  --st-info:    var(--teal);
  --st-live-glow:    rgba(46,158,107,.22);
  --st-warn-glow:    rgba(204,138,44,.22);
  --st-error-glow:   rgba(197,58,34,.22);
  --st-pending-glow: rgba(91,97,176,.22);
  --st-live-tint:    rgba(46,158,107,.12);
  --st-warn-tint:    rgba(204,138,44,.13);
  --st-error-tint:   rgba(197,58,34,.12);
  --st-pending-tint: rgba(91,97,176,.13);
  --st-idle-tint:    rgba(28,28,28,.06);

  /* instrument-panel band contract (phase 4): consume these instead of raw
     literals so the band themes from one place and the ~150 per-page repaints
     collapse. CORPORATE default = a LIGHT report panel. */
  --ip-bg:         linear-gradient(162deg, #FCFCFB 0%, #ECEBE7 100%);
  --ip-border:     var(--line-strong);
  --ip-ink:        var(--ink);
  --ip-ink-strong: var(--ink-strong);
  --ip-mut:        var(--ink-muted);
  --ip-faint:      var(--ink-faint);
  --ip-line:       rgba(28,28,28,.10);
  --ip-line-strong:rgba(28,28,28,.16);
  --ip-track:      rgba(28,28,28,.08);
  --ip-fill:       var(--surface-2);
  --ip-grid:       rgba(28,28,28,.045);
  --ip-chart:      var(--teal);   /* the one coral chart line on the band */
  --ip-seam:       var(--teal);   /* coral top seam */

  /* shadows - warm-neutral, never black (brand book) */
  --shadow-xs:   0 1px 2px rgba(28,28,28,.05);
  --shadow-sm:   0 1px 2px rgba(28,28,28,.05), 0 2px 8px rgba(28,28,28,.04);
  --shadow-md:   0 2px 6px rgba(28,28,28,.06), 0 18px 44px rgba(28,28,28,.08);
  --shadow-lg:   0 4px 12px rgba(28,28,28,.07), 0 40px 90px rgba(28,28,28,.12);
  --shadow-teal: 0 18px 50px rgba(255,99,1,.16);
  --inset-hi:    inset 0 1px 0 rgba(255,255,255,.7);

  /* geometry - brand book (--r-lg = book --r-card, --r-md = --r-tile,
     --r-xl = --r-shell). --r-2xs and --r-icon are phase-4 additions that
     replace hardcoded 5/6/7px and 11/13px radii. */
  --client-radius-scale: 1;
  --chamfer: 14px;
  --r-2xs:   calc(6px  * var(--client-radius-scale));   /* (phase 4) */
  --r-xs:    calc(8px  * var(--client-radius-scale));
  --r-sm:    calc(10px * var(--client-radius-scale));
  --r-icon:  calc(11px * var(--client-radius-scale));    /* (phase 4) */
  --r-md:    calc(14px * var(--client-radius-scale));
  --r-lg:    calc(20px * var(--client-radius-scale));
  --r-xl:    clamp(22px, 3vw, 34px);
  --r-pill:  999px;

  /* enamel logo badge (login + splash + hero); holds the black+gold mark in any theme */
  --enamel:        linear-gradient(158deg, #ffffff, #e6ecef);
  --enamel-border: rgba(21,67,89,.16);

  /* motion */
  --ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --t-fast: 140ms; --t-med: 220ms; --t-slow: 360ms;

  /* type - corporate. Schibsted Grotesk stands in for STK Bureau until the
     licensed woff2 files are supplied (then set --client-font-display). */
  --f-sans:    var(--client-font-sans,    "Schibsted Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif);
  --f-display: var(--client-font-display, "Schibsted Grotesk", "Inter", system-ui, sans-serif);
  --f-serif:   "Instrument Serif", "Newsreader", Georgia, serif;
  --f-mono:    var(--client-font-mono,    "Geist Mono", ui-monospace, "SF Mono", monospace);

  /* layout */
  --sidebar-w: 264px;
  --maxw: 1400px;
  --tour-scrim: rgba(28,28,28,.42);
  --z-splash: 999; --z-modal: 800; --z-nav: 100;
}

/* ===========================================================================
   MODE: LIGHT  (cool command - the original 187n.ai light world, as a delta)
   Redefines only what changes off the corporate base.
   =========================================================================== */
[data-theme="light"] {
  color-scheme: light;

  --canvas:      #F0F5F7;
  --canvas-2:    #E8EFF2;
  --surface:     #FFFFFF;
  --surface-2:   #F7FAFB;
  --surface-3:   #EEF4F6;

  --ink:        #154359;
  --ink-strong: #0E2A38;
  --ink-body:   rgba(21,67,89,.86);
  --ink-muted:  rgba(21,67,89,.62);
  --ink-faint:  rgba(21,67,89,.46);
  --ink-label:  rgba(21,67,89,.74);

  --line:        rgba(21,67,89,.10);
  --line-strong: rgba(21,67,89,.18);
  --line-faint:  rgba(21,67,89,.06);

  /* accent = teal; client accent still overrides uniformly */
  --teal:        var(--client-accent, #066377);
  --teal-ink:    var(--client-accent-ink, #0A7488);
  --teal-bright: #4BBDF0;
  --grad-a:      #185B7B;
  --grad-b:      #4BBDF0;
  --teal-glow:   var(--client-accent-glow, rgba(75,189,240,.20));
  --teal-wash:   rgba(6,99,119,.06);
  --teal-wash-2: rgba(6,99,119,.10);

  /* fills are the teal gradient signature in light; coral-mark logic is off here */
  --gradient:      var(--client-gradient, linear-gradient(294deg, #185B7B 16%, #4BBDF0));
  --gradient-soft: linear-gradient(294deg, rgba(24,91,123,.14), rgba(75,189,240,.14));
  --mark-gradient: var(--gradient);
  --accent-warm:   var(--gold-bright);

  --gold:        #9C7A43;
  --gold-bright: #C9A24B;
  --gold-soft:   #E6C683;
  --gold-glow:   rgba(201,162,75,.26);
  --gold-wash:   rgba(156,122,67,.09);

  --st-live:    #0E9E8A;  --st-live-2: #14C2A8;  --st-idle: #8AA0AA;
  --st-warn:    #C8881C;  --st-error:  #C7443B;  --st-pending: #6B6FB5;
  --st-live-glow:    rgba(14,158,138,.22);
  --st-warn-glow:    rgba(200,136,28,.20);
  --st-error-glow:   rgba(199,68,59,.20);
  --st-pending-glow: rgba(107,111,181,.20);
  --st-live-tint:    rgba(14,158,138,.12);
  --st-warn-tint:    rgba(200,136,28,.13);
  --st-error-tint:   rgba(199,68,59,.12);
  --st-pending-tint: rgba(107,111,181,.13);
  --st-idle-tint:    rgba(21,67,89,.07);

  /* band = the dark instrument slab (current light/dark behavior) */
  --ip-bg:         radial-gradient(150% 130% at 8% -10%, #143442, #0b1e29 52%, #060d12);
  --ip-border:     rgba(255,255,255,.08);
  --ip-ink:        #ECF3F6;
  --ip-ink-strong: #FFFFFF;
  --ip-mut:        rgba(236,243,246,.62);
  --ip-faint:      rgba(236,243,246,.40);
  --ip-line:       rgba(255,255,255,.10);
  --ip-line-strong:rgba(255,255,255,.16);
  --ip-track:      rgba(255,255,255,.10);
  --ip-fill:       rgba(255,255,255,.04);
  --ip-grid:       rgba(255,255,255,.025);
  --ip-chart:      var(--teal);
  --ip-seam:       var(--gold);

  --shadow-xs: 0 1px 2px rgba(21,67,89,.05);
  --shadow-sm: 0 1px 2px rgba(21,67,89,.05), 0 2px 8px rgba(21,67,89,.04);
  --shadow-md: 0 2px 6px rgba(21,67,89,.06), 0 18px 40px rgba(21,67,89,.09);
  --shadow-lg: 0 4px 12px rgba(21,67,89,.07), 0 40px 80px rgba(21,67,89,.13);
  --shadow-teal: 0 14px 40px rgba(6,99,119,.16);
  --inset-hi: inset 0 1px 0 rgba(255,255,255,.7);

  /* geometry: light uses the original tighter radii + 13px chamfer */
  --chamfer: 13px;
  --r-lg: calc(18px * var(--client-radius-scale));
  --r-xl: 24px;

  /* type: light/dark are the cool command look = Inter + JetBrains Mono */
  --f-sans:    var(--client-font-sans, "Inter", system-ui, -apple-system, "Segoe UI", sans-serif);
  --f-display: var(--client-font-display, "Inter", system-ui, sans-serif);
  --f-mono:    var(--client-font-mono, "JetBrains Mono", ui-monospace, "SF Mono", monospace);

  --enamel-border: rgba(21,67,89,.16);
  --tour-scrim: rgba(16,28,36,.46);
}

/* ===========================================================================
   MODE: DARK  (obsidian command - a delta; near-black cockpit)
   =========================================================================== */
[data-theme="dark"] {
  color-scheme: dark;

  --canvas:      #070A0E;
  --canvas-2:    #0A0E13;
  --surface:     #0F151B;
  --surface-2:   #141B22;
  --surface-3:   #1B242C;

  --ink:        #EAF2F5;
  --ink-strong: #FFFFFF;
  --ink-body:   rgba(234,242,245,.84);
  --ink-muted:  rgba(234,242,245,.60);
  --ink-faint:  rgba(234,242,245,.42);
  --ink-label:  rgba(234,242,245,.66);

  --line:        rgba(255,255,255,.10);
  --line-strong: rgba(255,255,255,.18);
  --line-faint:  rgba(255,255,255,.05);

  --teal:        var(--client-accent, #4BBDF0);
  --teal-ink:    var(--client-accent-ink, #6FCBF3);
  --teal-bright: #6FD0F5;
  --grad-a:      #185B7B;
  --grad-b:      #4BBDF0;
  --teal-glow:   var(--client-accent-glow, rgba(75,189,240,.30));
  --teal-wash:   rgba(75,189,240,.08);
  --teal-wash-2: rgba(75,189,240,.13);

  --gradient:      var(--client-gradient, linear-gradient(294deg, #185B7B 16%, #4BBDF0));
  --gradient-soft: linear-gradient(294deg, rgba(24,91,123,.20), rgba(75,189,240,.18));
  --mark-gradient: var(--gradient);
  --accent-warm:   var(--gold-bright);

  --gold:        #E6C683;
  --gold-bright: #F2D89A;
  --gold-soft:   #F6E6BD;
  --gold-glow:   rgba(230,198,131,.30);
  --gold-wash:   rgba(230,198,131,.08);
  --medallion:   radial-gradient(120% 120% at 30% 18%, #2f3338, #121417 50%, #030405);

  --st-live:    #19D6B6;  --st-live-2: #2CE8C6;  --st-idle: #6F8893;
  --st-warn:    #F0B84B;  --st-error:  #FF6A60;  --st-pending: #9CA0E8;
  --st-live-glow:    rgba(25,214,182,.30);
  --st-warn-glow:    rgba(240,184,75,.26);
  --st-error-glow:   rgba(255,106,96,.26);
  --st-pending-glow: rgba(156,160,232,.26);
  --st-live-tint:    rgba(25,214,182,.14);
  --st-warn-tint:    rgba(240,184,75,.14);
  --st-error-tint:   rgba(255,106,96,.14);
  --st-pending-tint: rgba(156,160,232,.14);
  --st-idle-tint:    rgba(255,255,255,.07);

  /* band = dark slab (matches the dark canvas) */
  --ip-bg:         radial-gradient(150% 130% at 8% -10%, #143442, #0b1e29 52%, #060d12);
  --ip-border:     rgba(255,255,255,.08);
  --ip-ink:        #ECF3F6;
  --ip-ink-strong: #FFFFFF;
  --ip-mut:        rgba(236,243,246,.62);
  --ip-faint:      rgba(236,243,246,.40);
  --ip-line:       rgba(255,255,255,.10);
  --ip-line-strong:rgba(255,255,255,.16);
  --ip-track:      rgba(255,255,255,.10);
  --ip-fill:       rgba(255,255,255,.04);
  --ip-grid:       rgba(255,255,255,.025);
  --ip-chart:      var(--teal);
  --ip-seam:       var(--gold);

  --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 2px 10px rgba(0,0,0,.3);
  --shadow-md: 0 2px 8px rgba(0,0,0,.4), 0 20px 48px rgba(0,0,0,.45);
  --shadow-lg: 0 4px 14px rgba(0,0,0,.5), 0 44px 90px rgba(0,0,0,.55);
  --shadow-teal: 0 16px 48px rgba(75,189,240,.20);
  --inset-hi: inset 0 1px 0 rgba(255,255,255,.06);

  --chamfer: 13px;
  --r-lg: calc(18px * var(--client-radius-scale));
  --r-xl: 24px;

  --f-sans:    var(--client-font-sans, "Inter", system-ui, -apple-system, "Segoe UI", sans-serif);
  --f-display: var(--client-font-display, "Inter", system-ui, sans-serif);
  --f-mono:    var(--client-font-mono, "JetBrains Mono", ui-monospace, "SF Mono", monospace);

  --tour-scrim: rgba(0,0,0,.64);
}

/* corporate signature exceptions ------------------------------------------- */
/* emphasis is carried by the italic serif, not color (per brand book) */
[data-theme="corporate"] em, [data-theme="corporate"] .i {
  font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: 0; color: var(--ink);
}
/* retire the gradient-on-text trick: payoff numbers go solid warm ink */
[data-theme="corporate"] .grad {
  background: none; -webkit-background-clip: initial; background-clip: initial;
  -webkit-text-fill-color: var(--ink); color: var(--ink);
}
/* the instrument band, in corporate, is a refined LIGHT report panel — no black slab */
[data-theme="corporate"] .instrument-panel {
  --ip-ink: var(--ink); --ip-mut: var(--ink-muted); --ip-faint: var(--ink-faint);
  background: linear-gradient(162deg, #FCFCFB 0%, #ECEBE7 100%);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-sm);
}
[data-theme="corporate"] .instrument-panel .ip-num { color: var(--ink); }
/* faint ink ledger grid (the white grid was for the old dark band) */
[data-theme="corporate"] .instrument-panel::after {
  background-image: linear-gradient(rgba(28,28,28,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(28,28,28,.045) 1px, transparent 1px);
}
/* warm coral/gold corner light instead of the cool teal/navy glow */
[data-theme="corporate"] .bg-field::after {
  background:
    radial-gradient(680px 460px at 80% -6%, rgba(255,99,1,.10), transparent 60%),
    radial-gradient(560px 420px at 4% 104%, rgba(156,122,67,.08), transparent 62%);
}

/* ===== corporate v2 elevation: coral is a mark not a fill; flat, editorial ===== */
/* P0 — structural data fills go warm ink (coral neutralized at the token level) */
[data-theme="corporate"] .bars .bar { background: var(--ink); opacity: .88; }
[data-theme="corporate"] .rev-card .rc-bar > span { background: var(--ink); box-shadow: none; }
[data-theme="corporate"] .linechart .line { stroke: var(--ink); }
[data-theme="corporate"] .donut { --c: var(--ink); }
[data-theme="corporate"] .areachart .ac-line { stroke: var(--ink); filter: none; }
[data-theme="corporate"] .areachart .ac-dot { stroke: var(--ink); }
[data-theme="corporate"] .icon-badge { background: var(--surface-2); border-color: var(--line); color: var(--ink); }
[data-theme="corporate"] .pulse-track::after { background: linear-gradient(90deg, transparent, var(--ink), transparent); }
/* the near-black instrument band keeps the ONE coral line so the hero chart reads */
[data-theme="corporate"] .instrument-panel .ac-line { stroke: var(--teal); filter: none; }

/* P1 — primary action = near-black fill, cream text (not coral) */
[data-theme="corporate"] .btn-primary { background: var(--ink); color: var(--canvas); box-shadow: var(--shadow-sm); }
[data-theme="corporate"] .btn-primary:hover { background: #000; box-shadow: var(--shadow-md); transform: translateY(-2px); }
[data-theme="corporate"] .btn-ghost:hover { background: var(--teal-wash); color: var(--teal); }
[data-theme="corporate"] .switch.on { background: var(--ink); }

/* P2 — gold lives ONLY on the logo mark; evict it from UI seams/rules */
[data-theme="corporate"] .gold-text { color: var(--ink); }
[data-theme="corporate"] .gold-rule,
[data-theme="corporate"] .gold-seam::before,
[data-theme="corporate"] .op-hero::before { background: var(--ink); box-shadow: none; }
/* the hero metric underline + the report-panel top seam are the coral accent moments */
[data-theme="corporate"] .metric-hero .mh-under { background: var(--teal); box-shadow: none; }
[data-theme="corporate"] .instrument-panel::before { background: var(--teal); box-shadow: none; opacity: .85; }

/* P3 + P4 — kill the trendy effects: grain, aurora, blur-in, glows. calm + editorial. */
[data-theme="corporate"] body::after { display: none; }
[data-theme="corporate"] .bg-field::after { animation: none; }
[data-theme="corporate"] .reveal { filter: none; }
[data-theme="corporate"] [data-anim="blur"] { filter: none; transform: translateY(16px); }
[data-theme="corporate"] [data-anim="pop"] { transform: translateY(16px); }
[data-theme="corporate"] [data-anim="mask"] { clip-path: none; transform: translateY(16px); opacity: 0; }
[data-theme="corporate"] .nav-item.active::before { background: var(--teal); box-shadow: none; }
[data-theme="corporate"] .brand-mark:hover { box-shadow: var(--shadow-md); }
[data-theme="corporate"] .activity-dot.live,
[data-theme="corporate"] .activity-dot.warn,
[data-theme="corporate"] .activity-dot.error { box-shadow: none; }

/* P5 — the chamfer signature on CTAs */
[data-theme="corporate"] .btn-primary,
[data-theme="corporate"] .btn-secondary {
  clip-path: polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
  border-radius: 0;
}

/* P6 — type discipline: hierarchy from weight 400-600 + size, not from black weights */
[data-theme="corporate"] .page-header h1,
[data-theme="corporate"] .op-hero .oh-title { font-weight: 600; letter-spacing: -.022em; }
[data-theme="corporate"] h1 { letter-spacing: -.025em; line-height: 1.03; }
[data-theme="corporate"] h2 { letter-spacing: -.022em; line-height: 1.06; }
[data-theme="corporate"] .brand-name { font-weight: 600; }
[data-theme="corporate"] .metric-hero .mh-num,
[data-theme="corporate"] .instrument-panel .ip-num,
[data-theme="corporate"] .rev-card .rc-value,
[data-theme="corporate"] .hero-num { font-weight: 600; }
[data-theme="corporate"] body, [data-theme="corporate"] p { letter-spacing: 0; }

/* P7 — warm selection */
[data-theme="corporate"] ::selection { background: rgba(255,99,1,.22); color: var(--ink); }

/* P8 — tables read like a financial report */
[data-theme="corporate"] .table tbody tr:hover { background: var(--surface-2); }
[data-theme="corporate"] .table td { font-variant-numeric: tabular-nums; }

/* ===================================================== GUIDED TOUR ========= */
/* tour scrim is defined per theme in the token layer at the top of this file */
.tour-root { position: fixed; inset: 0; z-index: 1000; }
.tour-cutout { position: fixed; border-radius: 12px; box-shadow: 0 0 0 9999px var(--tour-scrim); outline: 2px solid var(--teal); outline-offset: 0; pointer-events: none;
  transition: left .28s var(--ease), top .28s var(--ease), width .28s var(--ease), height .28s var(--ease); }
/* full mode: a zero-size, ring-less cutout whose box-shadow still dims the WHOLE page evenly behind
   a centered card (intro / overview steps). Without this, display:none would kill the only scrim. */
.tour-cutout.tour-cut-full { outline: none; border-radius: 0; transition: none; }
.tour-pop { position: fixed; z-index: 1001; width: 340px; max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px); box-sizing: border-box; display: flex; flex-direction: column;
  background: var(--surface); color: var(--ink-body); border: 1px solid var(--line-strong);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 17px 18px 15px;
  animation: tourFade .18s var(--ease); }
@keyframes tourFade { from { opacity: 0; } to { opacity: 1; } }
.tour-pop .tour-body { overflow-y: auto; min-height: 0; }
.tour-pop-center { transition: none; }
.tour-pop-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.tour-kicker { font-family: var(--f-mono); font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--teal); padding-top: 3px; }
.tour-x { width: 26px; height: 26px; flex: none; border-radius: 7px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-muted); font-size: 17px; line-height: 1; display: grid; place-items: center; transition: color var(--t-fast), border-color var(--t-fast); }
.tour-x:hover { color: var(--ink); border-color: var(--line-strong); }
.tour-title { font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); margin: 0 0 7px; line-height: 1.25; }
.tour-body { font-size: 13.5px; color: var(--ink-muted); line-height: 1.55; margin: 0 0 15px; }
.tour-foot { display: flex; flex-direction: column; gap: 12px; }
.tour-prog { height: 3px; background: var(--surface-3); border-radius: var(--r-pill); overflow: hidden; }
.tour-prog-bar { display: block; height: 100%; width: 0; background: var(--teal); border-radius: var(--r-pill); transition: width .3s var(--ease); }
.tour-btns { display: flex; align-items: center; gap: 8px; }
.tour-skip { margin-right: auto; font-size: 12.5px; font-weight: 500; color: var(--ink-muted); background: none; border: none; cursor: pointer; padding: 6px 2px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.tour-skip:hover { color: var(--ink); text-decoration-color: var(--ink-muted); }
/* arrow pointing from the card to the highlighted element */
.tour-arrow { position: absolute; width: 0; height: 0; display: none; }
.tour-arrow-bottom { top: -8px;  border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid var(--surface); filter: drop-shadow(0 -1px 0 var(--line-strong)); }
.tour-arrow-top    { bottom: -8px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid var(--surface); filter: drop-shadow(0 1px 0 var(--line-strong)); }
.tour-arrow-right  { left: -8px;  border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 8px solid var(--surface); filter: drop-shadow(-1px 0 0 var(--line-strong)); }
.tour-arrow-left   { right: -8px; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 8px solid var(--surface); filter: drop-shadow(1px 0 0 var(--line-strong)); }
/* calmer focus ring inside the card (the global one read as an empty box on Skip) */
.tour-pop button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--teal-wash-2); border-radius: var(--r-sm); }
.tour-back { font-size: 12.5px; font-weight: 500; color: var(--ink-muted); background: var(--surface-2); border: 1px solid var(--line); padding: 7px 14px; border-radius: var(--r-sm); }
.tour-back:hover { border-color: var(--line-strong); color: var(--ink); }
.tour-next { padding: 7px 16px; }
@media (prefers-reduced-motion: reduce) { .tour-cutout, .tour-pop, .tour-prog-bar { transition: none !important; } }
@media (max-width: 560px) { .tour-pop { width: calc(100vw - 24px); } }

/* ------------------------------------------------------------- RESET ------ */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body {
  margin: 0; padding: 0;
  background: var(--canvas);
  color: var(--ink-body);
  font-family: var(--f-sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body { min-height: 100vh; overflow-x: hidden; position: relative; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
::selection { background: rgba(75,189,240,.28); color: var(--ink); }
[data-theme="dark"] ::selection { background: rgba(75,189,240,.34); color: #fff; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 4px; }

/* ----------------------------------------------------- ATMOSPHERE --------- */
.bg-field { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.bg-field::before {  /* faint structural grid */
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, var(--line-faint) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-faint) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 30% 0%, #000 10%, transparent 80%);
  mask-image: radial-gradient(ellipse 90% 70% at 30% 0%, #000 10%, transparent 80%);
}
.bg-field::after { /* corner teal glow */
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(680px 460px at 78% -6%, var(--teal-glow), transparent 60%),
    radial-gradient(560px 420px at 6% 102%, rgba(24,91,123,.10), transparent 60%);
}
[data-theme="dark"] .bg-field::after {
  background:
    radial-gradient(720px 500px at 80% -8%, rgba(75,189,240,.12), transparent 60%),
    radial-gradient(560px 420px at 100% 8%, rgba(230,198,131,.06), transparent 60%),
    radial-gradient(620px 460px at 2% 104%, rgba(24,91,123,.18), transparent 62%);
}

/* ----------------------------------------------------- UTILITIES ---------- */
.chamfer {
  clip-path: polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)),
    calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
}
.grad {
  background: var(--gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--grad-a);
}
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.tnum { font-variant-numeric: tabular-nums; }
.eyebrow {
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink-label);
  display: inline-flex; align-items: center; gap: 12px;
}
.eyebrow.line::before { content: ""; height: 1px; width: 28px; background: var(--gradient); }
.muted { color: var(--ink-muted); }
.faint { color: var(--ink-faint); }
.strong { color: var(--ink); font-weight: 600; }

/* live status dot */
.dot {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-label);
}
.dot::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--st-live); box-shadow: 0 0 0 0 var(--st-live-glow);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 var(--st-live-glow); }
  70% { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ===================================================== APP SHELL ========== */
.app { position: relative; z-index: 1; display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; max-width: 1720px; margin-inline: auto; }

/* ------------------------------------------------------- SIDEBAR ---------- */
.sidebar {
  position: sticky; top: 0; height: 100vh; padding: 22px 14px;
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 64%, transparent);
  backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
  display: flex; flex-direction: column; overflow-y: auto; scrollbar-width: none;
}
.sidebar::-webkit-scrollbar { width: 0; }
.brand { display: flex; align-items: flex-start; gap: 12px; padding: 6px 8px 18px; border-bottom: 1px solid var(--line); }
.brand-mark {
  width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm), var(--inset-hi);
  color: var(--ink);
}
.brand-mark svg, .brand-mark img { width: 26px; height: 26px; }
.brand-stack { display: flex; flex-direction: column; line-height: 1; padding-top: 2px; }
.brand-name { font-weight: 700; font-size: 17px; letter-spacing: .04em; color: var(--ink); }
.brand-sub { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .04em; color: var(--ink-muted); margin-top: 6px; }
.online-pill {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 11px; padding: 4px 11px;
  border-radius: var(--r-pill); background: var(--st-live-tint); border: 1px solid transparent; width: fit-content;
}
.online-pill .pdot { width: 6px; height: 6px; border-radius: 50%; background: var(--st-live); box-shadow: 0 0 8px var(--st-live-glow); animation: pulse 2.4s var(--ease) infinite; }
.online-pill .label { font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--st-live); }

.nav-section { margin-top: 22px; }
.nav-section:first-of-type { margin-top: 24px; }
.nav-label { font-family: var(--f-mono); font-size: 9.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); padding: 0 12px 9px; }
.nav-item {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; margin: 1px 0;
  border-radius: var(--r-sm); color: var(--ink-muted); font-size: 13.5px; font-weight: 500;
  position: relative; transition: background var(--t-fast), color var(--t-fast);
}
.nav-item:hover { color: var(--ink); background: var(--teal-wash); }
.nav-item svg { width: 17px; height: 17px; flex: none; opacity: .8; }
.nav-item.active { color: var(--ink); background: var(--teal-wash-2); font-weight: 600; }
.nav-item.active svg { opacity: 1; color: var(--teal); }
.nav-item.active::before {
  content: ""; position: absolute; left: -14px; top: 7px; bottom: 7px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--gradient); box-shadow: 0 0 10px var(--teal-glow);
}
.sidebar-footer { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.theme-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px;
  border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface-2);
  color: var(--ink-muted); font-size: 12.5px; font-weight: 500; transition: border-color var(--t-fast), color var(--t-fast);
}
.theme-toggle:hover { border-color: var(--line-strong); color: var(--ink); }
.theme-toggle .tt-icons { display: inline-flex; gap: 7px; }
.theme-toggle svg { width: 15px; height: 15px; }
.theme-toggle .sun, .theme-toggle .moon, .theme-toggle .corp { display: none; }
[data-theme="light"] .theme-toggle .sun { display: block; }
[data-theme="dark"] .theme-toggle .moon { display: block; }
[data-theme="corporate"] .theme-toggle .corp { display: block; }
.who { display: flex; align-items: center; gap: 10px; padding: 4px 8px; }
.avatar { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; background: var(--gradient); box-shadow: var(--shadow-sm); }
.who .who-name { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.2; }
.who .who-role { font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-faint); }

/* --------------------------------------------------------- MAIN ----------- */
.main { padding: 26px 34px 80px; min-width: 0; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.breadcrumb { font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-faint); letter-spacing: .06em; text-transform: uppercase; }
.breadcrumb .sep { margin: 0 8px; opacity: .5; }
.breadcrumb .here { color: var(--ink-muted); }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.cmdk {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 13px; min-width: 300px;
  border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line);
  color: var(--ink-faint); font-size: 13px; box-shadow: var(--shadow-xs); transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.cmdk:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.cmdk svg { width: 14px; height: 14px; opacity: .7; }
.cmdk .placeholder { flex: 1; }
.cmdk .kbd { font-family: var(--f-mono); font-size: 10px; padding: 2px 6px; border-radius: 5px; background: var(--surface-3); border: 1px solid var(--line); color: var(--ink-muted); }
.icon-btn { width: 34px; height: 34px; border-radius: var(--r-pill); display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); color: var(--ink-muted); box-shadow: var(--shadow-xs); transition: border-color var(--t-fast), color var(--t-fast); }
.icon-btn:hover { border-color: var(--line-strong); color: var(--ink); }
.icon-btn svg { width: 15px; height: 15px; }

/* page header */
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.page-header h1 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 600; letter-spacing: -.025em; margin: 0 0 6px; color: var(--ink); line-height: 1.04; }
.page-header .subtitle { font-size: 15px; color: var(--ink-muted); margin: 0; max-width: 60ch; }
.page-header .right { text-align: right; line-height: 1.5; }
.page-header .date { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.page-header .updated { font-family: var(--f-mono); font-size: 11px; color: var(--ink-faint); margin-top: 2px; }

/* section heads */
.section-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.section-kicker { font-family: var(--f-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-label); }
.section-meta { font-family: var(--f-mono); font-size: 11px; color: var(--ink-faint); }
.section-meta .live-tag { color: var(--st-live); }
.section-meta .sep { margin: 0 8px; opacity: .5; }

/* ===================================================== SURFACES =========== */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
}
.card.hoverable { cursor: pointer; }
.card.hoverable:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.card.pad { padding: 24px; }
.card.teal-seam { border-color: color-mix(in srgb, var(--teal) 34%, transparent); box-shadow: var(--shadow-md), 0 0 0 1px color-mix(in srgb, var(--teal) 12%, transparent); }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-md); position: relative; overflow: hidden; }

/* grids */
.grid { display: grid; gap: 16px; }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
.two-col { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; align-items: start; }
.col-left { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.col-right { min-width: 0; }

/* ====================================================== STAT CARDS ======== */
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.stat-row.cols-4 { grid-template-columns: repeat(4, 1fr); }
.rev-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px 24px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med); cursor: pointer; }
.rev-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.rev-card .rc-label { font-family: var(--f-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 14px; }
.rev-card .rc-row { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.rev-card .rc-value { font-family: var(--f-mono); font-weight: 600; font-size: 34px; line-height: 1; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.rev-card .rc-value.grad { font-weight: 700; }
.rev-card .rc-tri { width: 0; height: 0; }
.rev-card .rc-tri.up { border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid var(--st-live); }
.rev-card .rc-tri.down { border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 10px solid var(--st-error); }
.rev-card .rc-sub { font-size: 12px; color: var(--ink-faint); }
.rev-card .rc-sub .mono { font-family: var(--f-mono); color: var(--ink-muted); }
.rev-card .rc-progress { margin-top: 16px; display: flex; flex-direction: column; gap: 7px; }
.rev-card .rc-progress-row { display: flex; align-items: center; justify-content: space-between; font-family: var(--f-mono); font-size: 11px; color: var(--ink-faint); }
.rev-card .rc-progress-row .pct { color: var(--teal); font-weight: 600; }
.rev-card .rc-bar { height: 4px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.rev-card .rc-bar > span { display: block; height: 100%; border-radius: var(--r-pill); background: var(--gradient); box-shadow: 0 0 12px var(--teal-glow); }

.stat-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px 24px; box-shadow: var(--shadow-sm); position: relative; transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med); cursor: pointer; }
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.stat-card .row1 { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.stat-card .row1-left { display: flex; align-items: center; gap: 11px; }
.icon-badge { width: 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--teal-wash); border: 1px solid color-mix(in srgb, var(--teal) 18%, transparent); color: var(--teal); }
.icon-badge svg { width: 17px; height: 17px; }
.cat-label { font-family: var(--f-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.arrow-go { width: 22px; height: 22px; display: grid; place-items: center; color: var(--ink-faint); transition: color var(--t-fast), transform var(--t-fast); }
.stat-card:hover .arrow-go { color: var(--teal); transform: translate(2px,-2px); }
.arrow-go svg { width: 14px; height: 14px; }
.hero-num { font-family: var(--f-mono); font-weight: 600; font-size: 48px; line-height: 1; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.hero-num.ok { color: var(--st-live); }
.hero-num.grad { font-weight: 700; }
.sub-label { font-size: 12px; color: var(--ink-muted); margin-bottom: 4px; }
.delta { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 4px 10px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 600; width: fit-content; }
.delta .d-dot { width: 6px; height: 6px; border-radius: 50%; }
.delta.up { background: var(--st-live-tint); color: var(--st-live); } .delta.up .d-dot { background: var(--st-live); }
.delta.down { background: var(--st-error-tint); color: var(--st-error); } .delta.down .d-dot { background: var(--st-error); }
.spark-wrap { margin-top: 16px; height: 54px; position: relative; }
.spark-wrap svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* ====================================================== SECTION CARD ====== */
.section-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 22px 24px; }
.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 14px; }
.section-title { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); display: flex; align-items: center; gap: 10px; }
.section-title .count { font-family: var(--f-mono); font-size: 11px; color: var(--ink-faint); letter-spacing: 0; text-transform: none; font-weight: 400; }
.ghost-link { font-size: 12.5px; font-weight: 500; color: var(--ink-muted); background: var(--surface-2); border: 1px solid var(--line); padding: 6px 12px; border-radius: var(--r-pill); transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast); }
.ghost-link:hover { color: var(--teal); border-color: color-mix(in srgb, var(--teal) 30%, transparent); }

/* ====================================================== ROWS / LISTS ====== */
.agent-row { display: grid; grid-template-columns: 14px 1fr 120px auto; align-items: center; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.agent-row:last-child { border-bottom: none; padding-bottom: 0; }
.agent-row:first-child { padding-top: 0; }
.agent-dot { width: 8px; height: 8px; border-radius: 50%; }
.agent-dot.live { background: var(--st-live); box-shadow: 0 0 10px var(--st-live-glow); animation: pulse 2.4s var(--ease) infinite; }
.agent-dot.idle { background: var(--st-idle); }
.agent-dot.warn { background: var(--st-warn); box-shadow: 0 0 8px var(--st-warn-glow); }
.agent-dot.error { background: var(--st-error); box-shadow: 0 0 8px var(--st-error-glow); }
.agent-dot.pending { background: var(--st-pending); }
.agent-name { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.agent-slug { font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-faint); margin-top: 2px; }
.activity-strip { height: 18px; display: flex; align-items: center; gap: 3px; }
.activity-strip .tick { width: 3px; border-radius: 1px; background: var(--line-strong); }
.activity-strip .tick.hot { background: var(--ink-faint); }
.activity-strip .tick.live { background: var(--st-live); }

.routine-row { display: grid; grid-template-columns: 128px 1fr 110px 104px; align-items: center; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.routine-row:last-child { border-bottom: none; padding-bottom: 0; }
.routine-row:first-child { padding-top: 0; }
.cron { font-family: var(--f-mono); font-size: 12.5px; color: var(--teal); }
.routine-name { font-size: 13px; color: var(--ink-body); }
.countdown { font-family: var(--f-mono); font-size: 13.5px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.last-run { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--line); font-size: 11px; color: var(--ink-muted); }
.last-run .check { color: var(--st-live); font-weight: 700; }
.last-run .x { color: var(--st-error); font-weight: 700; }
.last-run .dur { font-family: var(--f-mono); }

/* ====================================================== PILLS / BADGES ==== */
.pill { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: var(--r-pill); font-family: var(--f-mono); font-size: 9.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; border: 1px solid transparent; }
.pill .pdot { width: 6px; height: 6px; border-radius: 50%; }
.pill.live { background: var(--st-live-tint); color: var(--st-live); } .pill.live .pdot { background: var(--st-live); box-shadow: 0 0 8px var(--st-live-glow); animation: pulse 2.4s var(--ease) infinite; }
.pill.idle { background: var(--st-idle-tint); color: var(--ink-muted); } .pill.idle .pdot { background: var(--st-idle); }
.pill.warn { background: var(--st-warn-tint); color: var(--st-warn); } .pill.warn .pdot { background: var(--st-warn); }
.pill.error { background: var(--st-error-tint); color: var(--st-error); } .pill.error .pdot { background: var(--st-error); }
.pill.pending { background: var(--st-pending-tint); color: var(--st-pending); } .pill.pending .pdot { background: var(--st-pending); }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: var(--r-sm); font-size: 11px; font-weight: 600; background: var(--surface-3); color: var(--ink-muted); border: 1px solid var(--line); }
.badge.teal { background: var(--teal-wash); color: var(--teal); border-color: color-mix(in srgb, var(--teal) 22%, transparent); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--r-pill); font-size: 12px; font-weight: 500; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-muted); transition: border-color var(--t-fast), color var(--t-fast); }
.chip:hover { border-color: var(--line-strong); color: var(--ink); }
.chip.active { background: var(--teal-wash); border-color: color-mix(in srgb, var(--teal) 30%, transparent); color: var(--teal); }

/* ====================================================== ACTIVITY FEED ===== */
.activity-card { display: flex; flex-direction: column; }
.activity-stream { flex: 1; overflow: hidden; position: relative; margin-top: 6px; -webkit-mask-image: linear-gradient(transparent 0, #000 28px, #000 calc(100% - 22px), transparent 100%); mask-image: linear-gradient(transparent 0, #000 28px, #000 calc(100% - 22px), transparent 100%); }
.activity-list { display: flex; flex-direction: column; gap: 14px; padding: 10px 0; }
.activity-item { display: grid; grid-template-columns: 60px 10px 1fr; align-items: flex-start; gap: 10px; }
.activity-time { font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-faint); padding-top: 1px; }
.activity-dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 5px; }
.activity-dot.live { background: var(--st-live); box-shadow: 0 0 8px var(--st-live-glow); }
.activity-dot.idle { background: var(--st-idle); }
.activity-dot.warn { background: var(--st-warn); box-shadow: 0 0 8px var(--st-warn-glow); }
.activity-dot.error { background: var(--st-error); box-shadow: 0 0 8px var(--st-error-glow); }
.activity-dot.pending { background: var(--st-pending); }
.activity-text { font-size: 12.5px; color: var(--ink-body); line-height: 1.5; }
.activity-text .who { color: var(--ink); font-weight: 600; }
.activity-text .mono { font-family: var(--f-mono); font-size: 11px; color: var(--ink-muted); }
.activity-text .mono.ok { color: var(--st-live); }

/* ====================================================== BUTTONS =========== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: 14px; padding: 11px 20px; border-radius: var(--r-sm); border: 1px solid transparent; transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), border-color var(--t-fast); }
.btn svg { width: 15px; height: 15px; }
.btn-primary { background: var(--teal); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-teal); background: var(--teal-ink); }
[data-theme="dark"] .btn-primary { color: #04222b; }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-secondary:hover { border-color: var(--teal); color: var(--teal); }
.btn-ghost { background: transparent; color: var(--ink-muted); }
.btn-ghost:hover { background: var(--teal-wash); color: var(--teal); }
.btn-sm { padding: 7px 14px; font-size: 12.5px; }

/* ====================================================== FORMS ============== */
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-label); }
.input, input[type=text], input[type=email], input[type=password], input[type=search], textarea, select {
  width: 100%; padding: 11px 14px; border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.input:focus, input:focus, textarea:focus, select:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-wash-2); }
.input::placeholder, input::placeholder, textarea::placeholder { color: var(--ink-faint); }
.switch { position: relative; width: 42px; height: 24px; border-radius: var(--r-pill); background: var(--surface-3); border: 1px solid var(--line); transition: background var(--t-fast); flex: none; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform var(--t-fast); }
.switch.on { background: var(--teal); } .switch.on::after { transform: translateX(18px); }

/* ====================================================== TABLES ============ */
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th { font-family: var(--f-mono); font-size: 10px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); text-align: left; padding: 0 16px 12px; border-bottom: 1px solid var(--line); }
.table td { padding: 13px 16px; border-bottom: 1px solid var(--line); color: var(--ink-body); }
.table tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background var(--t-fast); }
.table tbody tr:hover { background: var(--teal-wash); }
.table td.num, .table th.num { text-align: right; font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

/* ====================================================== CHART PRIMITIVES == */
.bars { display: flex; align-items: flex-end; gap: 6px; height: 120px; }
.bars .bar { flex: 1; border-radius: 4px 4px 0 0; background: var(--gradient); opacity: .85; transition: opacity var(--t-fast); min-height: 4px; }
.bars .bar:hover { opacity: 1; }
.bars .bar.muted { background: var(--surface-3); }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 11.5px; color: var(--ink-muted); }
.legend .li { display: inline-flex; align-items: center; gap: 7px; }
.legend .sw { width: 10px; height: 10px; border-radius: 3px; }
.donut { --p: 60; --c: var(--teal); width: 120px; height: 120px; border-radius: 50%; background: conic-gradient(var(--c) calc(var(--p)*1%), var(--surface-3) 0); display: grid; place-items: center; }
.donut::after { content: ""; width: 78px; height: 78px; border-radius: 50%; background: var(--surface); box-shadow: var(--inset-hi); }
.donut .donut-val { position: absolute; font-family: var(--f-mono); font-weight: 600; font-size: 20px; color: var(--ink); }
.linechart { width: 100%; height: 100%; }
.linechart .area { fill: url(#gradFill); opacity: .18; }
.linechart .line { fill: none; stroke: var(--teal); stroke-width: 2; }

/* ====================================================== CHAT BUBBLES ====== */
.msg-bubble { max-width: 74%; padding: 12px 15px; border-radius: 16px; font-size: 13.5px; line-height: 1.5; box-shadow: var(--shadow-xs); }
.msg-bubble.in { background: var(--surface); border: 1px solid var(--line); color: var(--ink-body); border-bottom-left-radius: 5px; }
.msg-bubble.out { background: var(--teal); color: #fff; margin-left: auto; border-bottom-right-radius: 5px; }
[data-theme="dark"] .msg-bubble.out { color: #04222b; }

/* ====================================================== MISC ============== */
.divider { height: 1px; background: var(--line); margin: 22px 0; }
.divider.dashed { background-image: linear-gradient(to right, var(--line-strong) 50%, transparent 50%); background-size: 7px 1px; }
.skeleton-line { background: linear-gradient(90deg, var(--surface-3), var(--surface-2), var(--surface-3)); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 4px; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--ink); color: var(--canvas); padding: 12px 20px; border-radius: var(--r-pill); font-size: 13px; box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: opacity var(--t-med), transform var(--t-med); z-index: var(--z-modal); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--r-pill); border: 3px solid var(--canvas); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }

/* ====================================================== SPLASH ============ */
.splash { position: fixed; inset: 0; z-index: var(--z-splash); background: var(--canvas); display: grid; place-items: center; cursor: pointer; transition: opacity var(--t-slow); }
.splash.hidden { opacity: 0; pointer-events: none; }
.splash-inner { display: flex; flex-direction: column; align-items: center; gap: 24px; animation: splashIn 1.2s var(--ease) both; }
@keyframes splashIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.splash-mark { width: 92px; height: 92px; color: var(--teal); filter: drop-shadow(0 8px 30px var(--teal-glow)); }
.splash-word { font-weight: 700; font-size: 34px; letter-spacing: .14em; color: var(--ink); }
.splash-sub { font-family: var(--f-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); }
.splash-hint { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; color: var(--ink-faint); margin-top: 6px; }

/* reveal-on-load */
.reveal { opacity: 0; transform: translateY(14px); animation: reveal .7s var(--ease) forwards; }
@keyframes reveal { to { opacity: 1; transform: none; } }

/* ====================================================== RESPONSIVE ======== */
@media (max-width: 1240px) { .stat-row, .stat-row.cols-4 { grid-template-columns: repeat(2, 1fr); } .g-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 1080px) { .two-col { grid-template-columns: 1fr; } }
@media (max-width: 920px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; top: 0; transform: translateX(-100%); transition: transform var(--t-med); z-index: var(--z-nav); width: var(--sidebar-w); }
  .sidebar.open { transform: none; }
  .main { padding: 18px 18px 70px; }
  .stat-row, .stat-row.cols-4, .g-2, .g-3, .g-4 { grid-template-columns: 1fr; }
  .cmdk { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ============================================ INTERACTIVITY LAYER ========= */
.is-hidden { display: none !important; }
.cmdk { cursor: text; }

/* command palette */
.cmd-overlay { position: fixed; inset: 0; z-index: 900; display: none; padding: 12vh 20px 20px; justify-content: center; align-items: flex-start;
  background: color-mix(in srgb, var(--ink-strong) 32%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.cmd-overlay.open { display: flex; animation: cmdFade .16s var(--ease); }
@keyframes cmdFade { from { opacity: 0; } to { opacity: 1; } }
.cmd-panel { width: 100%; max-width: 620px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden; animation: cmdRise .2s var(--ease); display: flex; flex-direction: column; max-height: 70vh; }
@keyframes cmdRise { from { opacity: 0; transform: translateY(-8px) scale(.99); } to { opacity: 1; transform: none; } }
.cmd-search { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.cmd-search svg { width: 18px; height: 18px; color: var(--ink-faint); flex: none; }
.cmd-search input { flex: 1; border: none; background: none; font: inherit; font-size: 16px; color: var(--ink); outline: none; }
.cmd-search input::placeholder { color: var(--ink-faint); }
.cmd-search .esc { font-family: var(--f-mono); font-size: 10px; padding: 3px 7px; border-radius: 5px; background: var(--surface-3); border: 1px solid var(--line); color: var(--ink-muted); }
.cmd-results { overflow-y: auto; padding: 8px; }
.cmd-group-label { font-family: var(--f-mono); font-size: 9.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); padding: 12px 12px 6px; }
.cmd-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-sm); cursor: pointer; }
.cmd-item .ci-ic { width: 30px; height: 30px; border-radius: 8px; flex: none; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-muted); }
.cmd-item .ci-ic svg { width: 15px; height: 15px; }
.cmd-item .ci-main { min-width: 0; flex: 1; }
.cmd-item .ci-label { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmd-item .ci-sub { font-size: 11.5px; color: var(--ink-faint); line-height: 1.3; }
.cmd-item .ci-type { font-family: var(--f-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); padding: 3px 8px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--line); flex: none; }
.cmd-item.sel, .cmd-item:hover { background: var(--teal-wash); }
.cmd-item.sel .ci-ic, .cmd-item:hover .ci-ic { color: var(--teal); border-color: color-mix(in srgb, var(--teal) 26%, transparent); }
.cmd-empty { padding: 28px 16px; text-align: center; color: var(--ink-faint); font-size: 13.5px; }
.cmd-foot { display: flex; align-items: center; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--line); font-family: var(--f-mono); font-size: 10px; color: var(--ink-faint); }
.cmd-foot kbd { font-family: var(--f-mono); background: var(--surface-3); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; color: var(--ink-muted); }

/* detail drawer */
.drawer-overlay { position: fixed; inset: 0; z-index: 850; display: none; background: color-mix(in srgb, var(--ink-strong) 28%, transparent); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.drawer-overlay.open { display: block; animation: cmdFade .16s var(--ease); }
.drawer { position: fixed; top: 0; right: 0; height: 100vh; width: min(440px, 92vw); background: var(--surface); border-left: 1px solid var(--line-strong); box-shadow: var(--shadow-lg); z-index: 851; transform: translateX(100%); transition: transform var(--t-med) var(--ease); display: flex; flex-direction: column; }
.drawer.open { transform: none; }
.drawer-head { display: flex; align-items: flex-start; gap: 14px; padding: 22px 24px 18px; border-bottom: 1px solid var(--line); }
.drawer-head .dh-main { flex: 1; min-width: 0; }
.drawer-head .dh-kicker { font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px; }
.drawer-head h3 { font-size: 19px; line-height: 1.25; }
.drawer-close { width: 32px; height: 32px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-muted); display: grid; place-items: center; flex: none; transition: color var(--t-fast), border-color var(--t-fast); }
.drawer-close:hover { color: var(--ink); border-color: var(--line-strong); }
.drawer-close svg { width: 15px; height: 15px; }
.drawer-body { padding: 22px 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; }
.drawer-body .d-row { display: flex; justify-content: space-between; gap: 16px; font-size: 13.5px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.drawer-body .d-row .k { color: var(--ink-faint); font-family: var(--f-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.drawer-body .d-row .v { color: var(--ink); font-weight: 500; text-align: right; }
.drawer-body .d-block { font-size: 14px; color: var(--ink-body); line-height: 1.6; }
.drawer-foot { margin-top: auto; padding: 18px 24px; border-top: 1px solid var(--line); display: flex; gap: 10px; }

/* ============================================ CRAFT + MOTION LAYER ========= */
/* film grain — a subtle bespoke texture flat/AI UIs lack */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9000; pointer-events: none; opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="dark"] body::after { opacity: .05; }

/* ambient aurora drift on the field glow */
.bg-field::after { animation: auroraDrift 26s ease-in-out infinite alternate; will-change: transform; }
@keyframes auroraDrift { 0% { transform: translate3d(0,0,0) scale(1); } 100% { transform: translate3d(-2.5%, 2%, 0) scale(1.07); } }

/* reveal: blur-in (pages set inline animation-delay; this just refines the look) */
.reveal { opacity: 0; transform: translateY(16px); filter: blur(6px); animation: reveal .8s var(--ease) forwards; }
@keyframes reveal { to { opacity: 1; transform: none; filter: blur(0); } }

/* page enter: main content settles in */
.main { animation: mainIn .6s var(--ease) both; }
@keyframes mainIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* press springs */
.btn:active { transform: translateY(0) scale(.98); }
.icon-btn:active, .chip:active, .cat-pill:active, .ghost-link:active, .ag-run:active, .kb-add:active { transform: scale(.95); }
.card.hoverable:active, .rev-card:active, .stat-card:active, .tcard:active, .agent-card:active { transform: translateY(-1px) scale(.997); }

/* refined focus: soft teal glow ring (keeps the outline for true keyboard users) */
:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--teal-wash-2), 0 0 0 1px var(--teal); border-radius: 6px; }
.input:focus, input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px var(--teal-wash-2); }

/* cross-document page transitions (fluid app feel) + same-doc theme crossfade */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vtOut .30s var(--ease) both; }
::view-transition-new(root) { animation: vtIn .46s var(--ease) both; }
@keyframes vtOut { to { opacity: 0; transform: translateY(-8px) scale(.992); filter: blur(2px); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(12px) scale(.993); filter: blur(3px); } }

/* live activity items slide in */
.activity-item { animation: actIn .5s var(--ease) both; }
.activity-item:nth-child(2){animation-delay:.04s}.activity-item:nth-child(3){animation-delay:.08s}.activity-item:nth-child(4){animation-delay:.12s}.activity-item:nth-child(5){animation-delay:.16s}.activity-item:nth-child(n+6){animation-delay:.2s}
@keyframes actIn { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }

/* brand mark gets a faint living glow on the sidebar */
.brand-mark { transition: box-shadow var(--t-med), transform var(--t-med); }
.brand-mark:hover { transform: translateY(-1px); box-shadow: var(--shadow-md), 0 0 18px var(--teal-glow); }

@media (prefers-reduced-motion: reduce) {
  body::after { display: none; }
  .bg-field::after { animation: none; }
  .reveal, .main, .activity-item { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* ===================================== MOTION v2 ============================ */
/* scroll-reveal: opt in with data-anim="up|down|left|right|scale|blur|mask|pop"
   plus optional data-anim-delay="120" (ms). app.js adds .in when scrolled into view. */
[data-anim] { opacity: 0; transition: opacity .7s var(--ease), transform .8s var(--ease), filter .7s var(--ease), clip-path .85s var(--ease); will-change: opacity, transform, filter; }
[data-anim].in { opacity: 1; transform: none; filter: none; clip-path: inset(0 0 0 0); }
[data-anim="up"]    { transform: translateY(26px); }
[data-anim="down"]  { transform: translateY(-26px); }
[data-anim="left"]  { transform: translateX(-30px); }
[data-anim="right"] { transform: translateX(30px); }
[data-anim="scale"] { transform: scale(.92); }
[data-anim="blur"]  { filter: blur(12px); transform: translateY(12px); }
[data-anim="pop"]   { transform: scale(.6); }
[data-anim="mask"]  { opacity: 1; clip-path: inset(0 0 100% 0); }

/* 3D tilt (app.js drives transform on pointermove) */
[data-tilt] { transition: transform .3s var(--ease), box-shadow .3s var(--ease); transform-style: preserve-3d; }
[data-tilt]:hover { box-shadow: var(--shadow-lg); }

/* magnetic pull (app.js) */
[data-magnetic] { transition: transform .3s var(--ease); }

/* cursor spotlight: app.js sets --mx/--my on pointermove */
[data-spotlight] { position: relative; }
[data-spotlight]::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .35s var(--ease); background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 50%), var(--teal-wash-2), transparent 62%); z-index: 0; }
[data-spotlight]:hover::after { opacity: 1; }

/* FLIP reflow uses this during filter/search to glide cards into place — set by JS */
.flipping { transition: transform .42s var(--ease); will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  [data-anim] { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; transition: none !important; }
  [data-tilt], [data-magnetic] { transform: none !important; }
  .flipping { transition: none !important; }
}

/* ============================================================================
   v4 — BLACK + GOLD COMMAND CENTER
   New logo (metallic infinity), obsidian dark mode, and the dashboard primitives
   that out-craft the original: operation-pulse hero, dark instrument panel,
   live equalizer agents, real area chart. Tokens only; works in both themes.
   ============================================================================ */

/* ---- brand mark = the real 187N logo on a light enamel badge (reads in both themes) -- */
.brand-mark {
  width: 40px; height: 40px; border-radius: 11px; flex: none;
  display: grid; place-items: center; position: relative; overflow: hidden;
  background: linear-gradient(158deg, #ffffff, #e6ecef);
  border: 1px solid rgba(21,67,89,.16);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.95);
}
.brand-mark .mark-img { width: 30px; height: auto; display: block; }
.brand-mark::after {  /* periodic specular sheen across the badge */
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, transparent 34%, rgba(255,255,255,.7) 48%, transparent 60%);
  transform: translateX(-130%); animation: markSheen 7s ease-in-out infinite;
}
@keyframes markSheen { 0%, 74% { transform: translateX(-130%); } 88% { transform: translateX(130%); } 100% { transform: translateX(130%); } }
@keyframes logoFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.brand-mark:hover { transform: translateY(-1px); box-shadow: var(--shadow-md), 0 0 16px var(--gold-glow); }

/* splash + hero use the same enamel badge, larger, with a gentle float */
.splash-mark { width: 132px; height: 92px; border-radius: 20px; display: grid; place-items: center;
  position: relative; overflow: hidden; background: linear-gradient(158deg, #ffffff, #e6ecef);
  border: 1px solid rgba(21,67,89,.14); box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.95); }
.splash-mark .mark-img { width: 78%; height: auto; display: block; animation: logoFloat 5s var(--ease) infinite; }

.hero-logo { position: relative; display: grid; place-items: center; border-radius: 14px; overflow: hidden;
  background: linear-gradient(158deg, #ffffff, #e6ecef); border: 1px solid rgba(21,67,89,.14);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.95); }
.hero-logo .mark-img { width: 74%; height: auto; display: block; animation: logoFloat 5s var(--ease) infinite; }
.hero-logo::after, .splash-mark::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, transparent 36%, rgba(255,255,255,.6) 50%, transparent 62%);
  transform: translateX(-130%); animation: markSheen 8s ease-in-out infinite 1s; }
@media (prefers-reduced-motion: reduce) {
  .brand-mark::after, .hero-logo::after, .splash-mark::after { animation: none; }
  .splash-mark .mark-img, .hero-logo .mark-img { animation: none; }
}

/* ---- gold rule: the precious 1-2px divider, used once or twice per view ------ */
.gold-rule { height: 2px; border: 0; border-radius: 2px; background: var(--gold-line);
  box-shadow: 0 0 12px var(--gold-glow); opacity: .9; }
.gold-rule.thin { height: 1px; box-shadow: none; opacity: .7; }
.gold-text { color: var(--gold-bright); }

/* ---- operation-pulse hero strip --------------------------------------------- */
.op-hero { display: grid; grid-template-columns: auto 1fr auto; gap: 26px; align-items: center;
  padding: 22px 26px; border-radius: var(--r-xl); position: relative; overflow: hidden;
  background:
    radial-gradient(120% 160% at 0% 0%, var(--teal-wash-2), transparent 46%),
    var(--surface);
  border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.op-hero::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gold-line); opacity: .8; }
.op-hero .oh-logo { width: 92px; height: 56px; }
.op-hero .oh-mid { min-width: 0; }
.op-hero .oh-kicker { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); display: inline-flex; align-items: center; gap: 10px; }
.op-hero .oh-title { font-size: clamp(20px, 2.2vw, 27px); font-weight: 600; letter-spacing: -.02em; color: var(--ink); margin: 7px 0 3px; line-height: 1.1; }
.op-hero .oh-sub { font-size: 13px; color: var(--ink-muted); }
.op-hero .oh-right { text-align: right; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }

/* live throughput ticker line (a pulse travels left→right under the hero) */
.pulse-track { position: relative; height: 2px; width: 100%; background: var(--line); border-radius: 2px; overflow: hidden; }
.pulse-track::after { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 38%;
  background: linear-gradient(90deg, transparent, var(--teal), transparent); animation: pulseTrack 2.6s var(--ease) infinite; }
@keyframes pulseTrack { 0% { transform: translateX(-110%); } 100% { transform: translateX(320%); } }

/* ---- hero metric: one number that matters, with a gold underline ------------ */
.metric-hero { display: flex; flex-direction: column; gap: 4px; }
.metric-hero .mh-num { font-family: var(--f-mono); font-weight: 700; font-size: clamp(30px, 4vw, 46px); line-height: 1; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.metric-hero .mh-under { width: 64px; height: 2px; background: var(--gold-line); border-radius: 2px; margin: 8px 0 6px; box-shadow: 0 0 10px var(--gold-glow); }
.metric-hero .mh-cap { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }

/* ---- instrument panel: a dark band for drama, in BOTH themes (per 187n.ai) --- */
.instrument-panel { --ip-ink: #ECF3F6; --ip-mut: rgba(236,243,246,.62); --ip-faint: rgba(236,243,246,.40);
  position: relative; overflow: hidden; color: var(--ip-ink); border-radius: var(--r-xl);
  background: radial-gradient(150% 130% at 8% -10%, #143442, #0b1e29 52%, #060d12);
  border: 1px solid rgba(255,255,255,.08); box-shadow: var(--shadow-md); }
.instrument-panel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--gold-line); opacity: .5; }
.instrument-panel::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 40px 40px; -webkit-mask-image: radial-gradient(120% 100% at 80% 0%, #000, transparent 75%); mask-image: radial-gradient(120% 100% at 80% 0%, #000, transparent 75%); }
.instrument-panel .ip-ink { color: var(--ip-ink); }
.instrument-panel .ip-mut { color: var(--ip-mut); }
.instrument-panel .ip-faint { color: var(--ip-faint); }
.instrument-panel .ip-num { font-family: var(--f-mono); font-weight: 700; font-variant-numeric: tabular-nums; color: #fff; letter-spacing: -.02em; }

/* ---- real area chart (gridlines + draw-in via engine) ----------------------- */
.areachart { width: 100%; height: var(--ac-h, 200px); display: block; overflow: visible; }
.areachart .ac-grid { stroke: currentColor; opacity: .12; stroke-width: 1; vector-effect: non-scaling-stroke; }
.areachart .ac-area { opacity: .9; }
.areachart .ac-line { fill: none; stroke: var(--teal); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 6px 10px var(--teal-glow)); }
.areachart .ac-dot { fill: var(--surface); stroke: var(--teal); stroke-width: 2.5; }
.areachart .ac-axis { font-family: var(--f-mono); font-size: 9.5px; fill: currentColor; opacity: .5; }

/* ---- live equalizer (replaces the flat tick strip on agent rows) ------------ */
.eq { display: inline-flex; align-items: flex-end; gap: 2.5px; height: 22px; }
.eq i { width: 3px; border-radius: 2px; background: var(--st-live); height: 30%;
  transform-origin: bottom; animation: eqp 1s ease-in-out infinite; }
.eq.is-idle i, .eq.is-warn i { animation: none; opacity: .45; height: 26%; }
.eq.is-idle i { background: var(--st-idle); }
.eq.is-warn  i { background: var(--st-warn); opacity: .7; }
.eq i:nth-child(1){animation-duration:1.1s;animation-delay:-.2s}.eq i:nth-child(2){animation-duration:.8s;animation-delay:-.5s}
.eq i:nth-child(3){animation-duration:1.3s;animation-delay:-.1s}.eq i:nth-child(4){animation-duration:.9s;animation-delay:-.7s}
.eq i:nth-child(5){animation-duration:1.15s;animation-delay:-.35s}.eq i:nth-child(6){animation-duration:.75s;animation-delay:-.15s}
.eq i:nth-child(7){animation-duration:1.25s;animation-delay:-.6s}.eq i:nth-child(8){animation-duration:.95s;animation-delay:-.25s}
.eq i:nth-child(9){animation-duration:1.05s;animation-delay:-.45s}.eq i:nth-child(10){animation-duration:.85s;animation-delay:-.05s}
@keyframes eqp { 0%,100% { height: 22%; opacity: .55; } 50% { height: 100%; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .eq i { animation: none !important; height: 45% !important; } }

/* ---- a subtle gold seam any card can opt into for a premium edge ------------ */
.gold-seam { position: relative; }
.gold-seam::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; background: var(--gold-line); opacity: .65; }

/* ---- dark-mode polish for the existing surfaces ----------------------------- */
[data-theme="dark"] .card, [data-theme="dark"] .rev-card, [data-theme="dark"] .stat-card, [data-theme="dark"] .section-card, [data-theme="dark"] .panel {
  background: linear-gradient(180deg, rgba(255,255,255,.025), transparent 60%), var(--surface);
}
[data-theme="dark"] .icon-badge { box-shadow: 0 0 14px var(--teal-glow); }
[data-theme="dark"] .rev-card .rc-value.grad, [data-theme="dark"] .hero-num.grad { text-shadow: 0 0 22px var(--teal-glow); }

@media (max-width: 1080px) { .op-hero { grid-template-columns: auto 1fr; } .op-hero .oh-right { display: none; } }
@media (max-width: 720px) { .op-hero { grid-template-columns: 1fr; text-align: left; } .op-hero .oh-logo { display: none; } }