/* AUTO-EXTRACTED from the approved Afterburn artifact (6ad6eeb5). The app's real cockpit stylesheet. */

  /* ── AFTERBURN — cockpit HUD prototype. Brand #087EFC/#023E8A. Blue-flame world. Dual theme. EN/AR. ── */
  @font-face { font-family:'Chakra Petch'; font-style:italic; font-weight:700; font-display:block;
    src:url('../fonts/ab-chakra-petch-italic.woff2') format('woff2'); }
  @font-face { font-family:'Chakra Petch'; font-style:normal; font-weight:500; font-display:block;
    src:url('../fonts/ab-chakra-petch.woff2') format('woff2'); }
  @font-face { font-family:'Saira'; font-style:normal; font-weight:100 900; font-display:block;
    src:url('../fonts/ab-saira.woff2') format('woff2'); }
  @font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:100 800; font-display:block;
    src:url('../fonts/ab-jetbrains-mono.woff2') format('woff2'); }
  @font-face { font-family:'Cairo'; font-style:normal; font-weight:200 1000; font-display:block;
    src:url('../fonts/ab-cairo.woff2') format('woff2'); }

  :root {
    --blue: #087EFC; --navy: #023E8A;
    --disp: 'Chakra Petch', 'Cairo', 'Segoe UI', sans-serif;
    --body: 'Saira', 'Cairo', 'Segoe UI', sans-serif;
    --mono: 'JetBrains Mono', 'Cairo', ui-monospace, monospace;
    --tag: 'Chakra Petch', 'Cairo', sans-serif;
    --r-1: 3px; --r-2: 6px;
    --slide: -105%;
  }

  [dir="rtl"] { --slide: 105%; --disp: 'Cairo', 'Chakra Petch', sans-serif; --body: 'Cairo', 'Saira', sans-serif; }
  /* Cairo has no italic — never synthesize oblique Arabic */
  [dir="rtl"] .page-head h1, [dir="rtl"] .st-value, [dir="rtl"] .m-read b, [dir="rtl"] .ign-count,
  [dir="rtl"] .ign-label, [dir="rtl"] .gauge-read b { font-style: normal; }

  :root, [data-theme="dark"] {
    color-scheme: dark;
    --bg: #04070F;
    --panel: #0A101F;
    --panel-2: #101A30;
    --rail-bg: #030610;
    --line: rgba(111,193,255,0.11);
    --line-strong: rgba(111,193,255,0.22);
    --text: #EAF2FF;
    --dim: #93A7C9;
    --faint: #5F7096;
    --blue-hi: #6FC1FF;
    --blue-glow: rgba(8,126,252,0.6);
    --hot: #FFFFFF;
    --live: #30D97F; --warn: #F0B03C; --fail: #F2594E;
    --mark-arrow: #087EFC; --mark-rocket: #FFFFFF;
    --shadow: 0 18px 44px -16px rgba(0, 6, 24, 0.9);
    --overlay: rgba(2, 6, 16, 0.7);
    --side-grad: linear-gradient(180deg, #060B18 0%, var(--bg) 44%);
    --streak-a: rgba(8,126,252,0.030); --streak-b: rgba(255,255,255,0.016);
    --engine-bg: radial-gradient(130% 110% at 50% 20%, #0B1730 0%, #050B1A 55%, #04070F 100%);
  }
  [data-theme="light"] {
    color-scheme: light;
    --bg: #EDF3FB;
    --panel: #FFFFFF;
    --panel-2: #E4EDF9;
    --rail-bg: #FFFFFF;
    --line: rgba(2,62,138,0.12);
    --line-strong: rgba(2,62,138,0.24);
    --text: #0C1F3E;
    --dim: #40598A;
    --faint: #5C7099;
    --blue-hi: #0A6FE0;
    --blue-glow: rgba(8,126,252,0.35);
    --hot: #023E8A;
    --live: #0E8A4C; --warn: #955F00; --fail: #C22B24;
    --mark-arrow: #023E8A; --mark-rocket: #087EFC;
    --shadow: 0 18px 44px -18px rgba(15, 40, 90, 0.30);
    --overlay: rgba(14, 34, 66, 0.42);
    --side-grad: linear-gradient(180deg, #DFEAFA 0%, var(--bg) 44%);
    --streak-a: rgba(2,62,138,0.035); --streak-b: rgba(2,62,138,0.016);
    --engine-bg: radial-gradient(130% 110% at 50% 20%, #D9E7FB 0%, #E9F1FC 60%, #EDF3FB 100%);
  }

  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body { background: var(--bg); color: var(--text); font: 400 14px/1.5 var(--body); -webkit-font-smoothing: antialiased; }
  /* velocity field — the whole app slides through space */
  body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
      repeating-linear-gradient(115deg, var(--streak-a) 0 1px, transparent 1px 96px),
      repeating-linear-gradient(115deg, var(--streak-b) 0 1px, transparent 1px 52px); }
  @media (prefers-reduced-motion: no-preference) {
    body::before { animation: streaks 16s linear infinite; }
    @keyframes streaks { to { background-position: 636px 0, 1040px 0; } }
  }
  .shell { position: relative; z-index: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); min-height: 100vh; }
  .rails { display: flex; position: sticky; top: 0; height: 100vh; z-index: 40; }

  /* ── HUD frame: corner brackets on major panels ── */
  .hud { position: relative; }
  .hud::before, .hud::after { content: ''; position: absolute; width: 15px; height: 15px; pointer-events: none; z-index: 4; }
  .hud::before { top: 0; inset-inline-start: 0; border-top: 2px solid var(--blue); border-inline-start: 2px solid var(--blue); }
  .hud::after { bottom: 0; inset-inline-end: 0; border-bottom: 2px solid var(--blue); border-inline-end: 2px solid var(--blue); }

  /* ── dock ── */
  .dock { display: flex; flex-direction: column; align-items: center; gap: 13px; padding: 16px 0; width: 64px;
    background: var(--rail-bg); border-inline-end: 1px solid var(--line); }
  .dock-brand { width: 38px; height: 38px; margin-bottom: 5px; }
  .mark-arrow { fill: var(--mark-arrow); } .mark-rocket { fill: var(--mark-rocket); }
  .dock-sep { width: 26px; height: 1px; background: var(--line-strong); }
  .dock-node { position: relative; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
    color: #fff; background: linear-gradient(145deg, var(--blue), var(--navy)); border: none; cursor: pointer;
    box-shadow: 0 0 16px rgba(8,126,252,0.5); }
  .dock-node svg { width: 20px; height: 20px; }
  .dock-node.active::before { content: ''; position: absolute; inset: -5px; border-radius: 50%;
    border: 1px dashed var(--blue-hi); }
  @media (prefers-reduced-motion: no-preference) { .dock-node.active::before { animation: spin 9s linear infinite; } }
  @keyframes spin { to { transform: rotate(360deg); } }
  .dock-node.soon { background: transparent; border: 1px dashed var(--line-strong); color: var(--faint); box-shadow: none; }
  .dock-node.soon svg { width: 18px; height: 18px; }
  .dock-spacer { flex: 1; }

  /* ── sidebar ── */
  .side { border-inline-end: 1px solid var(--line); padding: 18px 12px; display: flex; flex-direction: column; gap: 3px;
    background: var(--side-grad); width: 206px; overflow-y: auto; --side-ink: #fff; }
  .side-plat { display: flex; align-items: center; gap: 8px; padding: 4px 8px 14px; }
  .side-plat b { font: 500 12px var(--tag); letter-spacing: .22em; color: var(--side-ink); }
  .side-label { font: 500 10px var(--mono); letter-spacing: .14em; color: var(--side-ink); opacity: .66;
    text-transform: uppercase; padding: 11px 8px 5px; }
  .side a.item { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--r-1);
    color: var(--side-ink); opacity: .88; text-decoration: none; font-size: 13.5px;
    transition: color .12s, background .12s, opacity .12s; }
  .side a.item .nav-icon { width: 18px; height: 18px; flex: 0 0 18px; color: rgba(255,255,255,.68);
    transition: color .12s, filter .12s, transform .12s; }
  .side a.item > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .side a.item:hover { color: var(--side-ink); opacity: 1; background: rgba(111,193,255,0.05); }
  .side a.item:hover .nav-icon { color: #fff; transform: translateY(-1px); }
  .side a.item.active { color: var(--side-ink); opacity: 1; font-weight: 600;
    background: linear-gradient(90deg, rgba(8,126,252,0.18), transparent 78%); }
  .side a.item.active .nav-icon { color: var(--blue-hi); filter: drop-shadow(0 0 5px var(--blue-glow)); }
  .side .count, .side a.item.active .count { margin-inline-start: auto; font: 400 11px var(--mono); color: var(--side-ink); }
  /* Admin navigation is task-grouped instead of one long, undifferentiated link wall. These overrides adapt
     the shared native <details> nav-group pattern to the narrower Afterburn rail. */
  .side .admin-nav-group { margin: 1px 0 0; }
  .side .admin-nav-group:first-of-type { margin-top: 4px; }
  .side .admin-nav-head { min-height: 32px; height: auto; padding: 7px 8px; gap: 7px;
    font: 500 10px/1.25 var(--mono); letter-spacing: .08em; color: var(--side-ink); opacity: .7;
    transition: color .12s, background .12s, opacity .12s; }
  .side .admin-nav-head > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  [dir="rtl"] .side .admin-nav-head { font-size: 11px; letter-spacing: 0; }
  .side .admin-nav-head:hover, .side .admin-nav-group[open] > .admin-nav-head {
    color: var(--side-ink); opacity: 1; background: rgba(111,193,255,0.05); }
  .side .admin-nav-head .nav-group-chev { width: 13px; height: 13px; }
  .side .admin-nav-items { gap: 2px; margin-inline-start: 11px; padding: 2px 0 5px 7px;
    border-inline-start: 1px solid var(--line); }
  .side .admin-nav-items a.item { gap: 8px; padding-inline: 7px 5px; font-size: 12.5px; }
  .side .admin-nav-items a.item .nav-icon { width: 15px; height: 15px; flex-basis: 15px; }
  .nav-soon { display: flex; align-items: flex-start; gap: 10px; padding: 8px; margin-top: 2px; border-radius: var(--r-1);
    border: 1px dashed var(--line-strong); color: var(--faint); }
  .nav-soon svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }
  .nav-soon-label { display: block; font-size: 12.5px; color: var(--dim); font-weight: 600; }
  .nav-soon-hint { display: block; font-size: 11px; }

  /* ── topbar ── */
  .main { display: flex; flex-direction: column; min-width: 0; }
  .topbar { display: flex; align-items: center; gap: 10px; padding: 10px 22px; position: sticky; top: 0; z-index: 30;
    background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line); }
  .topbar::after { content: ''; position: absolute; bottom: -1px; inset-inline-start: 0; width: 220px; height: 1px;
    background: linear-gradient(90deg, var(--blue), transparent); }
  .nav-toggle { display: none; width: 36px; height: 36px; border: 1px solid var(--line-strong); border-radius: var(--r-1);
    background: transparent; color: var(--dim); cursor: pointer; place-items: center; }
  .nav-toggle svg { width: 19px; height: 19px; }
  .topbar-brand { display: none; align-items: center; gap: 8px; text-decoration: none; color: var(--text); }
  .topbar-brand svg { width: 26px; height: 26px; }
  .topbar-brand span { font: 600 15px var(--body); }
  .topbar-brand b { color: var(--blue); }
  .crumb { font: 500 11px var(--tag); letter-spacing: .18em; color: var(--faint); text-transform: uppercase; }
  .crumb b { color: var(--dim); font-weight: 500; }
  .topbar .spacer { flex: 1; }
  .cmdk-hint { display: flex; align-items: center; gap: 8px; font: 400 12.5px var(--body); color: var(--faint);
    border: 1px solid var(--line); border-radius: var(--r-1); padding: 6px 10px; background: transparent; cursor: pointer; }
  .cmdk-hint:hover { color: var(--dim); border-color: var(--line-strong); }
  .cmdk-hint svg { width: 14px; height: 14px; }
  .cmdk-hint kbd { font: 400 10.5px var(--mono); border: 1px solid var(--line-strong); border-radius: 3px; padding: 1px 5px; color: var(--dim); }
  .clock { font: 400 12.5px var(--mono); color: var(--dim); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
  .credits { font: 600 12.5px var(--mono); color: var(--blue-hi); border: 1px solid var(--line); border-radius: 999px;
    padding: 5px 12px; text-decoration: none; }
  .credits small { color: var(--faint); font-weight: 400; font-size: 11px; }
  .icon-btn { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line);
    border-radius: var(--r-1); background: transparent; color: var(--dim); cursor: pointer; position: relative; }
  .icon-btn:hover { color: var(--text); border-color: var(--line-strong); }
  .icon-btn svg { width: 17px; height: 17px; }
  .dd { position: relative; }
  .dd > summary { list-style: none; cursor: pointer; }
  .dd > summary::-webkit-details-marker { display: none; }
  .dd-panel { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); min-width: 230px; z-index: 50;
    background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--r-2); box-shadow: var(--shadow); overflow: hidden; }
  .dd-head { padding: 10px 14px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px; }
  .dd-head b { font-size: 13px; }
  .dd-head .mini { margin-inline-start: auto; font-size: 11.5px; color: var(--blue-hi); cursor: pointer; background: none; border: none; }
  .dd-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 14px; font: 400 13px var(--body);
    color: var(--text); background: none; border: none; text-align: start; cursor: pointer; text-decoration: none; }
  .dd-item:hover { background: var(--panel-2); }
  .dd-item svg { width: 16px; height: 16px; color: var(--faint); flex: none; }
  .dd-item + .dd-item { border-top: 1px solid var(--line); }
  .badge { position: absolute; top: -4px; inset-inline-end: -4px; min-width: 16px; height: 16px; border-radius: 999px;
    background: var(--fail); color: #fff; font: 700 10px/16px var(--body); text-align: center; padding: 0 4px; }
  .lang-code { font: 500 11.5px var(--tag); letter-spacing: .06em; }
  .notif-row { display: flex; gap: 10px; padding: 10px 14px; align-items: flex-start; }
  .notif-row + .notif-row { border-top: 1px solid var(--line); }
  .notif-row .lamp { margin-top: 5px; }
  .notif-txt { min-width: 0; font-size: 12.5px; line-height: 1.45; }
  .notif-txt small { display: block; color: var(--faint); font: 400 10.5px var(--mono); margin-top: 2px; }
  .user-head { padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .user-email { font: 400 12px var(--mono); color: var(--dim); direction: ltr; text-align: start; }
  .role-chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 7px; font: 500 10px var(--tag);
    letter-spacing: .14em; color: var(--blue-hi); border: 1px solid rgba(8,126,252,0.4); border-radius: 2px; padding: 3px 9px; }
  .avatar-btn { width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer; display: grid; place-items: center;
    background: linear-gradient(145deg, var(--blue), var(--navy)); color: #fff; font: 800 13px var(--body);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15); }
  .signout, .signout svg { color: var(--fail); }

  /* ── page ── */
  .page { padding: 26px 28px 48px; max-width: 1220px; width: 100%; margin: 0 auto; }
  .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
  .page-head h1 { margin: 0; font: italic 700 30px/1.15 var(--disp); letter-spacing: .03em; text-transform: uppercase;
    text-shadow: 0 0 24px var(--blue-glow); }
  .page-head .sub { color: var(--dim); font-size: 13.5px; margin-top: 8px; }
  .actions { display: flex; gap: 10px; }
  .btn { display: inline-flex; align-items: center; gap: 7px; font: 600 13px var(--body); border-radius: var(--r-1);
    padding: 8px 16px; text-decoration: none; cursor: pointer; border: 1px solid var(--line-strong); color: var(--dim);
    background: transparent; transition: color .12s, border-color .12s, filter .12s; }
  .btn:hover { color: var(--text); border-color: var(--faint); }
  .btn.primary { position: relative; overflow: hidden; border: none; border-radius: 0; color: #fff;
    background: linear-gradient(120deg, var(--navy), var(--blue) 60%);
    clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
    box-shadow: 0 4px 20px -6px var(--blue-glow); }
  .btn.primary::after { content: ''; position: absolute; top: -30%; bottom: -30%; width: 34%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent);
    transform: skewX(-20deg) translateX(-260%); inset-inline-start: 0; }
  .btn.primary:hover::after { transition: transform .55s ease; transform: skewX(-20deg) translateX(380%); }
  .btn.danger { background: var(--fail); border: none; border-radius: 0; color: #fff;
    clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); }
  .btn.danger:hover { filter: brightness(1.1); }

  .lamp { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
  .lamp.live { background: var(--live); box-shadow: 0 0 7px rgba(48,217,127,.5), inset 0 0 2px rgba(255,255,255,.5); }
  .lamp.warn { background: var(--warn); box-shadow: 0 0 7px rgba(240,176,60,.45), inset 0 0 2px rgba(255,255,255,.5); }
  .lamp.fail { background: var(--fail); box-shadow: 0 0 7px rgba(242,89,78,.45), inset 0 0 2px rgba(255,255,255,.5); }
  .lamp.hold { background: var(--blue); box-shadow: 0 0 7px var(--blue-glow), inset 0 0 2px rgba(255,255,255,.5); }
  .lamp.blink-on { animation: lampOn .9s both; }
  @keyframes lampOn { 0%,28% {opacity:0} 34% {opacity:1} 44% {opacity:.2} 55%,100% {opacity:1} }

  /* ── hero: engine bay + HUD cluster ── */
  .hero { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr); gap: 18px; margin-bottom: 20px; }
  .engine { border: 1px solid var(--line-strong); border-radius: var(--r-2); overflow: hidden; min-height: 440px;
    background: var(--engine-bg); display: flex; flex-direction: column; align-items: center; }
  .engine-head { align-self: stretch; display: flex; align-items: center; gap: 10px; padding: 10px 16px; }
  .engine-title { font: 500 10.5px var(--tag); letter-spacing: .24em; color: var(--dim); text-transform: uppercase; }
  .engine-status { margin-inline-start: auto; display: flex; align-items: center; gap: 7px;
    font: 400 10.5px var(--mono); letter-spacing: .14em; color: var(--live); }
  .engine-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
  .engine-stage { position: relative; align-self: stretch; flex: 1; min-height: 190px; }
  .engine-mark { position: absolute; left: 50%; top: 46%; width: 118px; height: 118px; transform: translate(-50%, -50%);
    filter: drop-shadow(0 0 22px var(--blue-glow)); }
  @media (prefers-reduced-motion: no-preference) {
    .engine-mark { animation: hoverFloat 4.5s ease-in-out infinite; }
    @keyframes hoverFloat { 0%,100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, calc(-50% - 7px)); } }
  }
  .gauge-block { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 0 16px 18px; }
  .gauge-svg { width: 218px; height: 128px; overflow: visible; }
  .gauge-tick { stroke: var(--line-strong); stroke-width: 2; }
  .gauge-arc-safe { stroke: var(--blue); opacity: .8; }
  .gauge-arc-gov { stroke: var(--fail); opacity: .75; }
  .gauge-needle line { stroke: var(--hot); stroke-width: 2.5; stroke-linecap: round;
    filter: drop-shadow(0 0 6px var(--blue-glow)); }
  .gauge-needle circle { fill: var(--blue); }
  .gauge-read { display: flex; align-items: baseline; gap: 7px; margin-top: -34px; }
  .gauge-read b { font: italic 700 30px/1 var(--disp); color: var(--text); text-shadow: 0 0 18px var(--blue-glow); }
  .gauge-read span { font: 400 11px var(--mono); color: var(--faint); letter-spacing: .1em; }
  .governor { display: flex; align-items: center; gap: 7px; margin-top: 10px;
    font: 500 10px var(--tag); letter-spacing: .18em; color: var(--dim); text-transform: uppercase;
    border: 1px dashed var(--line-strong); border-radius: 2px; padding: 5px 10px; }
  .governor svg { width: 13px; height: 13px; color: var(--warn); flex: none; }

  .board { border: 1px solid var(--line-strong); border-radius: var(--r-2); background: var(--panel); overflow: hidden;
    display: flex; flex-direction: column; }
  .board-head { display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-bottom: 1px solid var(--line);
    background: var(--panel-2); }
  .board-title { font: 500 10.5px var(--tag); letter-spacing: .24em; color: var(--dim); text-transform: uppercase; }
  .board-flag { margin-inline-start: auto; display: flex; align-items: center; gap: 8px;
    font: 400 11px var(--mono); letter-spacing: .14em; color: var(--warn); }
  .stations { display: grid; grid-template-columns: 1fr 1fr; flex: 1; }
  .station { padding: 20px 20px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; position: relative; }
  .station::before { content: ''; position: absolute; top: 10px; inset-inline-end: 10px; width: 8px; height: 8px;
    border-top: 2px solid var(--line-strong); border-inline-end: 2px solid var(--line-strong); }
  .station:nth-child(even) { border-inline-start: 1px solid var(--line); }
  .station:nth-child(n+3) { border-top: 1px solid var(--line); }
  .st-label { font: 400 10.5px var(--mono); letter-spacing: .2em; color: var(--faint); text-transform: uppercase;
    display: flex; align-items: center; gap: 8px; }
  .st-value { font: italic 700 40px/1 var(--disp); letter-spacing: .01em; color: var(--text); direction: ltr; text-align: center;
    text-shadow: 0 0 20px var(--blue-glow); }
  .st-value .of { font-size: 18px; color: var(--faint); }
  .st-foot { font-size: 12px; color: var(--faint); display: flex; align-items: center; gap: 7px; min-height: 16px; margin-top: auto; flex-wrap: wrap; }
  .st-foot .up { color: var(--live); }
  .spark { width: 100%; height: 26px; display: block; }

  .rail-label { font: 500 10.5px var(--tag); letter-spacing: .24em; color: var(--faint); text-transform: uppercase;
    margin: 22px 0 10px; display: flex; align-items: center; gap: 10px; }
  .rail-label::before { content: ''; width: 7px; height: 7px; background: var(--blue); flex: none;
    clip-path: polygon(0 0, 100% 50%, 0 100%); }
  [dir="rtl"] .rail-label::before { clip-path: polygon(100% 0, 0 50%, 100% 100%); }
  .rail-label::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-strong), transparent); }
  [dir="rtl"] .rail-label::after { background: linear-gradient(-90deg, var(--line-strong), transparent); }

  .flags { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; }
  .flag { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border-radius: var(--r-1);
    border: 1px solid var(--line); background: var(--panel); color: var(--text); text-decoration: none;
    font-size: 13.5px; transition: border-color .12s, transform .12s; }
  .flag:hover { transform: translateY(-1px); }
  .flag.warn:hover { border-color: var(--warn); } .flag.fail:hover { border-color: var(--fail); }
  .flag .go { margin-inline-start: auto; font: 400 11px var(--mono); letter-spacing: .1em; color: var(--faint); white-space: nowrap; }
  .flag.warn .go { color: var(--warn); } .flag.fail .go { color: var(--fail); }

  /* ── throttle channels ── */
  .missions { border: 1px solid var(--line-strong); border-radius: var(--r-2); background: var(--panel); overflow: hidden; }
  .mission { display: grid; grid-template-columns: 92px minmax(0,1fr) auto; gap: 18px; align-items: center; padding: 15px 18px; }
  .mission + .mission { border-top: 1px solid var(--line); }
  .m-id { font: 400 11.5px var(--mono); color: var(--faint); letter-spacing: .08em; direction: ltr; }
  .m-main { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
  .m-top { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
  .m-name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .m-status { display: inline-flex; align-items: center; gap: 7px; font: 500 10.5px var(--tag); letter-spacing: .18em;
    text-transform: uppercase; flex: none; }
  .m-status.live { color: var(--live); } .m-status.warn { color: var(--warn); } .m-status.hold { color: var(--blue-hi); }
  .track { position: relative; height: 9px; border-radius: 2px; background:
      repeating-linear-gradient(90deg, var(--line-strong) 0 1px, transparent 1px 28px),
      rgba(111,193,255,0.06); }
  [data-theme="light"] .track { background:
      repeating-linear-gradient(90deg, var(--line-strong) 0 1px, transparent 1px 28px),
      rgba(2,62,138,0.08); }
  .track-fill { position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--p, 0%); border-radius: 2px;
    background: linear-gradient(90deg, var(--navy), var(--blue) 78%, var(--blue-hi)); overflow: hidden; }
  [dir="rtl"] .track-fill { background: linear-gradient(-90deg, var(--navy), var(--blue) 78%, var(--blue-hi)); }
  .track-fill::after { content: ''; position: absolute; inset: 0;
    background: repeating-linear-gradient(115deg, transparent 0 7px, rgba(255,255,255,0.22) 7px 10px); }
  @media (prefers-reduced-motion: no-preference) {
    .mission:not(.paused) .track-fill::after { animation: thrust 1.1s linear infinite; }
    @keyframes thrust { to { transform: translateX(17px); } }
    [dir="rtl"] .mission:not(.paused) .track-fill::after { animation-name: thrustR; }
    @keyframes thrustR { to { transform: translateX(-17px); } }
  }
  .track-node { position: absolute; top: 50%; inset-inline-end: -5px; width: 10px; height: 10px;
    transform: translateY(-50%) rotate(45deg); background: var(--hot);
    box-shadow: 0 0 0 3px rgba(8,126,252,0.3), 0 0 16px var(--blue-glow); }
  .mission.paused .track-fill { opacity: .4; }
  .mission.paused .track-node { background: var(--warn); box-shadow: 0 0 0 3px rgba(240,176,60,.18); }
  .mission.sched .track { background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px); }
  .m-read { display: flex; gap: 18px; align-items: baseline; font: 400 12px var(--mono); color: var(--faint);
    font-variant-numeric: tabular-nums; white-space: nowrap; }
  .m-read b { font: italic 700 17px/1 var(--disp); letter-spacing: .02em; color: var(--text); }
  .m-read .tminus { color: var(--blue-hi); letter-spacing: .06em; direction: ltr; }

  .deck { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; align-items: start; }
  .panel { border: 1px solid var(--line-strong); border-radius: var(--r-2); background: var(--panel); overflow: hidden; }
  .panel-head { display: flex; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--panel-2); }
  .panel-head span { font: 500 10.5px var(--tag); letter-spacing: .24em; color: var(--dim); text-transform: uppercase; }
  .panel-head a { margin-inline-start: auto; font-size: 12px; color: var(--blue-hi); text-decoration: none; white-space: nowrap; }
  .panel-head a:hover { text-decoration: underline; }
  .man-row { display: flex; align-items: center; gap: 13px; padding: 10px 16px; font-size: 13px; }
  .man-row + .man-row { border-top: 1px solid var(--line); }
  .man-row time { font: 400 11.5px var(--mono); color: var(--faint); flex: none; width: 52px; font-variant-numeric: tabular-nums; direction: ltr; }
  .man-row .what { font-weight: 600; flex: none; }
  .man-row .ref { color: var(--faint); font: 400 12px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: plaintext; }
  .man-row .st { margin-inline-start: auto; display: flex; align-items: center; gap: 7px; font: 500 10.5px var(--tag);
    letter-spacing: .14em; flex: none; }
  .man-row .st.ok { color: var(--live); } .man-row .st.warn { color: var(--warn); } .man-row .st.bad { color: var(--fail); }

  .bay { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
  .bay + .bay { border-top: 1px solid var(--line); }
  .bay-icon { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff;
    background: linear-gradient(145deg, var(--blue), var(--navy)); box-shadow: 0 0 12px rgba(8,126,252,0.4); }
  .bay-icon svg { width: 17px; height: 17px; }
  .bay.soon .bay-icon { background: var(--panel-2); border: 1px dashed var(--line-strong); color: var(--faint); box-shadow: none; }
  .bay-txt { min-width: 0; }
  .bay-txt b { display: block; font-size: 13px; font-weight: 600; }
  .bay-txt small { color: var(--faint); font-size: 11.5px; }
  .bay.soon .bay-txt b { color: var(--dim); }
  .bay-chip { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; flex: none;
    font: 500 10px var(--tag); letter-spacing: .16em; color: var(--live);
    border: 1px solid color-mix(in srgb, var(--live) 40%, transparent); border-radius: 2px; padding: 3px 9px; }
  .bay.soon .bay-chip { color: var(--faint); border-style: dashed; border-color: var(--line-strong); }

  .foot-note { margin-top: 26px; text-align: center; font: 400 10.5px var(--mono); letter-spacing: .22em;
    color: var(--faint); text-transform: uppercase; }
  .foot-note b { color: var(--dim); font-weight: 400; }
  .foot-note button { background: none; border: none; color: var(--blue-hi); cursor: pointer;
    font: 400 10.5px var(--mono); letter-spacing: .22em; text-transform: uppercase; }
  .foot-note button:hover { text-decoration: underline; }

  /* ── cmdk / modal / toast (chrome, restyled by tokens) ── */
  .cmdk { position: fixed; inset: 0; z-index: 80; display: none; }
  .cmdk.open { display: block; }
  .cmdk-backdrop { position: absolute; inset: 0; background: var(--overlay); backdrop-filter: blur(3px); }
  .cmdk-sheet { position: relative; margin: 11vh auto 0; width: min(560px, calc(100% - 32px));
    background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--r-2); box-shadow: var(--shadow); overflow: hidden; }
  .cmdk-input { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
  .cmdk-input svg { width: 17px; height: 17px; color: var(--faint); flex: none; }
  .cmdk-input input { flex: 1; background: none; border: none; outline: none; color: var(--text); font: 400 14.5px var(--body); }
  .cmdk-input input::placeholder { color: var(--faint); }
  .cmdk-group { padding: 8px 16px 4px; font: 500 10px var(--tag); letter-spacing: .2em; color: var(--faint); text-transform: uppercase; }
  .cmdk-row { display: flex; align-items: center; gap: 11px; padding: 9px 16px; cursor: pointer; font-size: 13.5px; color: var(--text); }
  .cmdk-row:hover { background: var(--panel-2); }
  .cmdk-row svg { width: 16px; height: 16px; color: var(--faint); flex: none; }
  .cmdk-row .k { margin-inline-start: auto; font: 400 10.5px var(--mono); color: var(--faint); }
  .cmdk-empty { padding: 18px 16px; color: var(--faint); font-size: 13px; display: none; }
  .modal { position: fixed; inset: 0; z-index: 85; display: none; }
  .modal.open { display: grid; place-items: center; }
  .modal-backdrop { position: absolute; inset: 0; background: var(--overlay); backdrop-filter: blur(3px); }
  .modal-card { position: relative; width: min(400px, calc(100% - 32px)); background: var(--panel);
    border: 1px solid var(--line-strong); border-radius: var(--r-2); box-shadow: var(--shadow); padding: 22px; }
  .modal-title { font: 600 16px var(--body); margin: 0 0 8px; }
  .modal-msg { color: var(--dim); font-size: 13.5px; margin: 0 0 18px; }
  .modal-actions { display: flex; justify-content: flex-end; gap: 10px; }
  .toast-host { position: fixed; bottom: 18px; inset-inline-end: 18px; z-index: 88; display: flex; flex-direction: column; gap: 10px; }
  .toast { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--line-strong);
    border-radius: var(--r-1); box-shadow: var(--shadow); padding: 11px 16px; font-size: 13px; max-width: 340px;
    animation: toastIn .25s ease-out both; }
  @keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  .toast.out { transition: opacity .3s, transform .3s; opacity: 0; transform: translateY(6px); }
  .nav-backdrop { position: fixed; inset: 0; z-index: 60; background: var(--overlay); opacity: 0; pointer-events: none; transition: opacity .22s; }
  body.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }

  /* ── IGNITION SEQUENCE ── */
  .ignition { position: fixed; inset: 0; z-index: 100; background: #02040A; display: grid; place-items: center;
    transition: opacity .4s ease; cursor: pointer; }
  .ignition.done { opacity: 0; pointer-events: none; }
  .ignition canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
  .ign-stack { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; }
  .ign-mark { width: 130px; height: 130px; filter: drop-shadow(0 0 30px rgba(8,126,252,0.75));
    --mark-arrow: #087EFC; --mark-rocket: #FFFFFF; }
  .ign-count { font: italic 700 84px/1 var(--disp); color: #EAF2FF; letter-spacing: .02em;
    text-shadow: 0 0 40px rgba(8,126,252,0.9); min-height: 88px; }
  .ign-count.boost { color: #6FC1FF; }
  .ign-label { font: 500 12px var(--tag); letter-spacing: .5em; color: #5F7096; text-transform: uppercase; }
  .ign-skip { margin-top: 26px; font: 400 10px var(--mono); letter-spacing: .2em; color: #3A4763; text-transform: uppercase; }
  .shock { position: absolute; left: 50%; top: 50%; width: 130px; height: 130px; margin: -65px; border-radius: 50%;
    border: 2px solid rgba(111,193,255,0.9); opacity: 0; transform: scale(.4); pointer-events: none; }
  .shock.fire { animation: shockwave .8s ease-out both; }
  @keyframes shockwave { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(9); } }
  body.pre .page > * { opacity: 0; }
  body.launched .page > * { animation: slam .45s cubic-bezier(.2,.8,.25,1) both; }
  body.launched .page > *:nth-child(1) { animation-delay: 0s; }
  body.launched .page > *:nth-child(2) { animation-delay: .07s; }
  body.launched .page > *:nth-child(3) { animation-delay: .13s; }
  body.launched .page > *:nth-child(4) { animation-delay: .18s; }
  body.launched .page > *:nth-child(5) { animation-delay: .23s; }
  body.launched .page > *:nth-child(6) { animation-delay: .28s; }
  body.launched .page > *:nth-child(7) { animation-delay: .33s; }
  body.launched .page > *:nth-child(8) { animation-delay: .38s; }
  @keyframes slam { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) {
    .track-node, .lamp.blink-on, .dock-node.active::before, .engine-mark, .track-fill::after { animation: none !important; }
    body.launched .page > * { animation: none; opacity: 1; }
  }

  /* ── RTL tracking fixes ── */
  [dir="rtl"] .st-label, [dir="rtl"] .board-title, [dir="rtl"] .engine-title, [dir="rtl"] .rail-label,
  [dir="rtl"] .side-label, [dir="rtl"] .m-status, [dir="rtl"] .bay-chip, [dir="rtl"] .board-flag,
  [dir="rtl"] .crumb, [dir="rtl"] .panel-head span, [dir="rtl"] .foot-note, [dir="rtl"] .governor,
  [dir="rtl"] .engine-status, [dir="rtl"] .side-plat b, [dir="rtl"] .role-chip, [dir="rtl"] .man-row .st,
  [dir="rtl"] .flag .go, [dir="rtl"] .cmdk-group, [dir="rtl"] .ign-label { letter-spacing: .02em; }
  [dir="rtl"] .page-head h1 { letter-spacing: 0; }

  /* (v1 retrofit breakpoints removed — see v6 mobile-first layer) */
  a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

  /* ═══ v2 PRECISION LAYER — alignment discipline, world-consistency ═══ */

  /* selection + scrollbars belong to the world too */
  ::selection { background: rgba(8,126,252,0.45); color: #fff; }
  html { scrollbar-width: thin; scrollbar-color: #0A57B8 var(--sb-track); }
  :root, [data-theme="dark"] { --sb-track: #060B18; }
  [data-theme="light"] { --sb-track: #D9E4F4; }
  ::-webkit-scrollbar { width: 11px; height: 11px; }
  ::-webkit-scrollbar-track { background: var(--sb-track); }
  ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #023E8A, #087EFC); border: 2px solid var(--sb-track); }
  ::-webkit-scrollbar-thumb:hover { background: #087EFC; }
  ::-webkit-scrollbar-corner { background: var(--sb-track); }

  /* the rails are ALWAYS night — the cockpit never switches on the cabin lights */
  .rails {
    --panel: #0A101F; --panel-2: #101A30; --rail-bg: #030610;
    --line: rgba(111,193,255,0.11); --line-strong: rgba(111,193,255,0.22);
    --text: #EAF2FF; --dim: #93A7C9; --faint: #5F7096;
    --side-grad: linear-gradient(180deg, #060B18 0%, #04070F 44%);
    --mark-arrow: #087EFC; --mark-rocket: #FFFFFF;
  }

  /* one head rhythm for every panel */
  .engine-head, .board-head, .panel-head { padding: 11px 16px; min-height: 42px; }
  .engine-head { border-bottom: 1px solid var(--line); }
  .engine { min-height: 0; }
  .engine-stage { min-height: 205px; }

  /* KPI values share one baseline; sparks and feet pin to the same floor */
  .st-value { height: 46px; display: flex; align-items: flex-end; justify-content: center; gap: 6px; }
  .st-value .of { line-height: 1.45; }
  .station .spark { margin-top: auto; }

  /* mission readouts align in columns across rows */
  .m-read { justify-content: flex-end; }
  .m-read > span { min-width: 106px; text-align: end; }
  .m-read > span:first-child { min-width: 134px; }

  /* gauge: readout optically centered inside the dial — no offset hacks */
  .gauge-wrap { position: relative; width: 216px; margin: 0 auto; }
  .gauge-svg { display: block; width: 100%; height: auto; }
  .gauge-read { position: absolute; inset-inline: 0; bottom: 0; display: flex; flex-direction: column;
    align-items: center; gap: 1px; margin: 0; }
  .gauge-read b { font: italic 700 30px/1 var(--disp); color: var(--text); text-shadow: 0 0 18px var(--blue-glow); }
  .gauge-read span { font: 400 9.5px var(--mono); color: var(--faint); letter-spacing: .12em; }
  .gauge-block { padding-bottom: 16px; gap: 0; }
  .governor { margin-top: 10px; }

  /* ── views: every page enters like a launch ── */
  .view[hidden] { display: none; }
  body.pre .page { opacity: 0; }
  body.launched .page > * { animation: none; opacity: 1; }
  @media (prefers-reduced-motion: no-preference) {
    .view.enter > * { animation: slam .45s cubic-bezier(.2,.8,.25,1) both; }
    .view.enter > *:nth-child(1) { animation-delay: 0s; }
    .view.enter > *:nth-child(2) { animation-delay: .07s; }
    .view.enter > *:nth-child(3) { animation-delay: .13s; }
    .view.enter > *:nth-child(4) { animation-delay: .18s; }
    .view.enter > *:nth-child(5) { animation-delay: .23s; }
    .view.enter > *:nth-child(6) { animation-delay: .28s; }
    .view.enter > *:nth-child(7) { animation-delay: .33s; }
    .view.enter > *:nth-child(8) { animation-delay: .38s; }
  }

  /* filter chips (campaigns page) */
  .chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
  .chip-f { font: 500 10.5px var(--tag); letter-spacing: .14em; text-transform: uppercase; color: var(--dim);
    background: var(--panel-2); border: none; padding: 7px 13px; cursor: pointer;
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
  .chip-f:hover { color: var(--text); }
  .chip-f.active { background: linear-gradient(120deg, var(--navy), var(--blue) 70%); color: #fff; }

  /* fleet cards (accounts page) */
  .fleet { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 12px; }
  .acct { position: relative; background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--r-2);
    padding: 14px; display: flex; flex-direction: column; gap: 12px; transition: border-color .12s, transform .12s; }
  .acct:hover { transform: translateY(-1px); border-color: var(--blue); }
  .acct::before { content: ''; position: absolute; top: 8px; inset-inline-end: 8px; width: 8px; height: 8px;
    border-top: 2px solid var(--line-strong); border-inline-end: 2px solid var(--line-strong); }
  .acct-top { display: flex; gap: 10px; align-items: center; min-width: 0; }
  .acct-av { position: relative; overflow: hidden; width: 36px; height: 36px; border-radius: 50%; flex: none;
    display: grid; place-items: center;
    background: linear-gradient(145deg, var(--blue), var(--navy)); color: #fff; font: 600 12px var(--body); }
  /* Profile photo overlays the initial and is clipped to the avatar circle (FB pics are arbitrary sizes). */
  .acct-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
  .acct-name { min-width: 0; }
  .acct-name b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .acct-name small { display: block; font: 400 10.5px var(--mono); color: var(--faint); }
  .acct-status { margin-inline-start: auto; display: flex; align-items: center; gap: 6px; flex: none;
    font: 500 9.5px var(--tag); letter-spacing: .14em; }
  .acct-status .cd { font: 400 10.5px var(--mono); letter-spacing: .04em; }
  .acct-status.ok { color: var(--live); } .acct-status.cool { color: var(--blue-hi); } .acct-status.chk { color: var(--warn); }
  .acct-stats { display: flex; gap: 16px; font-size: 12px; color: var(--faint); margin-top: auto; }
  .acct-stats b { font: italic 700 15px var(--disp); color: var(--text); }
  .acct.ghost { border-style: dashed; align-items: center; justify-content: center; color: var(--faint);
    font: 400 12px var(--mono); letter-spacing: .08em; min-height: 56px; grid-column: 1 / -1; }
  .acct.ghost::before { display: none; }

  /* failed campaign channel */
  .m-status.bad { color: var(--fail); }
  .mission.failed .track-fill { background: var(--fail); opacity: .3; }
  .mission.failed .track-fill::after { animation: none; }
  .mission.failed .track-node { background: var(--fail); box-shadow: 0 0 0 3px rgba(242,89,78,.15); }

  /* BOOST kick */
  @media (prefers-reduced-motion: no-preference) {
    .ignition.boosting .ign-stack { animation: kick .38s ease-out; }
    @keyframes kick { 0%,100% { transform: none; } 22% { transform: translate(3px,-3px); }
      44% { transform: translate(-3px,2px); } 66% { transform: translate(2px,2px); } 84% { transform: translate(-2px,-1px); } }
  }


  /* ═══ v3 — one hero instrument, full page features ═══ */

  /* unified hero: rocket | gauge | stations in ONE panel */
  .hero { display: block; }
  .hero-panel { border: 1px solid var(--line-strong); border-radius: var(--r-2); background: var(--panel); overflow: hidden; }
  .hero-panel .board-flag { margin-inline-start: 18px; }
  .hero-panel .engine-status { margin-inline-start: auto; }
  .hero-body { display: grid; grid-template-columns: 240px 268px minmax(0, 1fr); }
  .engine-stage { position: relative; min-height: 100%; border-inline-end: 1px solid var(--line);
    background: var(--engine-bg); }
  .engine-mark { width: 104px; height: 104px; }
  .gauge-block { border-inline-end: 1px solid var(--line); display: flex; flex-direction: column;
    align-items: center; justify-content: center; padding: 14px 16px 16px; gap: 0; }
  .gauge-block .governor { white-space: nowrap; font-size: 9.5px; letter-spacing: .1em; }
  .stations { min-height: 292px; }

  /* toolbar: search + chips share one row, one height */
  .toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
  .toolbar .chips { margin-bottom: 0; }
  .searchbar { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line-strong);
    background: var(--panel); padding: 0 12px; height: 32px; min-width: 230px;
    clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); }
  .searchbar svg { width: 15px; height: 15px; color: var(--faint); flex: none; }
  .searchbar input { background: none; border: none; outline: none; color: var(--text);
    font: 400 13px var(--body); width: 170px; }
  .searchbar input::placeholder { color: var(--faint); }
  .searchbar:focus-within { border-color: var(--blue); }
  .chip-f { height: 32px; }

  /* bulk selection bar */
  .bulkbar { display: flex; align-items: center; gap: 12px; padding: 8px 14px; margin-bottom: 10px;
    background: var(--panel-2); border: 1px solid rgba(8,126,252,0.5); font-size: 13px; border-radius: var(--r-1); }
  .bulkbar[hidden] { display: none; }
  .bulkbar b { color: var(--blue-hi); font-variant-numeric: tabular-nums; }
  .bulkbar .mini { margin-inline-start: auto; color: var(--blue-hi); background: none; border: none;
    cursor: pointer; font-size: 12px; }
  .bulkbar .mini:hover { text-decoration: underline; }
  .btn-sm { padding: 5px 12px; font-size: 12px; }
  .ghost-danger { color: var(--fail); border-color: color-mix(in srgb, var(--fail) 45%, transparent); }
  .ghost-danger:hover { color: var(--fail); border-color: var(--fail); }

  /* HUD checkbox */
  .hcheck { position: relative; width: 16px; height: 16px; flex: none; cursor: pointer; align-self: center; }
  .hcheck input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
  .hcheck span { position: absolute; inset: 0; border: 1px solid var(--line-strong); background: transparent;
    transition: background .12s, border-color .12s; pointer-events: none; }
  .hcheck input:checked + span { background: var(--blue); border-color: var(--blue); box-shadow: 0 0 8px var(--blue-glow); }
  .hcheck input:checked + span::after { content: ''; position: absolute; left: 4.5px; top: 1.5px; width: 4px; height: 8px;
    border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(43deg); }
  .hcheck input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }

  /* row action buttons */
  .row-act { display: flex; gap: 6px; align-items: center; }
  .ra { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line);
    border-radius: var(--r-1); background: transparent; color: var(--faint); cursor: pointer;
    transition: color .12s, border-color .12s; }
  .ra svg { width: 14px; height: 14px; }
  .ra:hover { color: var(--text); border-color: var(--line-strong); }
  .ra.danger:hover { color: var(--fail); border-color: var(--fail); }

  /* mission rows gain select + actions columns */
  .mission { grid-template-columns: 16px 92px minmax(0, 1fr) auto auto; gap: 14px; }
  #cpList .m-read > span { min-width: 96px; }
  #cpList .m-read > span:first-child { min-width: 124px; }
  .speed-chip { font: 500 10px var(--tag); letter-spacing: .08em; color: var(--blue-hi);
    border: 1px solid rgba(8,126,252,0.4); border-radius: 2px; padding: 1px 6px; flex: none; }

  /* fleet card foot: last check + actions */
  .acct-foot { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; }
  .acct-chk { font: 400 10.5px var(--mono); color: var(--faint); letter-spacing: .04em; }
  .acct-foot .row-act { margin-inline-start: auto; }
  .acct-top .hcheck { align-self: flex-start; margin-top: 2px; }

  /* pager */
  .pager { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
  .pager-info { font: 400 11px var(--mono); color: var(--faint); letter-spacing: .06em; margin-inline-end: auto; }
  .pg { min-width: 28px; height: 28px; font: 400 11.5px var(--mono); border: 1px solid var(--line);
    background: transparent; color: var(--dim); cursor: pointer; border-radius: var(--r-1); }
  .pg:hover:not(:disabled):not(.active) { color: var(--text); border-color: var(--line-strong); }
  .pg.active { background: linear-gradient(120deg, var(--navy), var(--blue)); color: #fff; border-color: transparent; cursor: default; }
  .pg:disabled { opacity: .35; cursor: default; }
  .pg-dots { color: var(--faint); font: 400 11px var(--mono); padding: 0 2px; }

  /* overview mission list (no select/actions there) keeps its original grid */
  #ovList .mission { grid-template-columns: 92px minmax(0, 1fr) auto; gap: 18px; }


  /* ═══ v4 — the logo IS the engine; energy in every counter ═══ */

  /* animated brand: perpetual burn in the dock */
  .dock-brand-wrap { position: relative; width: 46px; height: 44px; margin-bottom: 5px; display: grid; place-items: center; }
  .dock-flame { position: absolute; left: 50%; top: -6px; transform: translateX(-50%); width: 64px; height: 128px;
    pointer-events: none; z-index: 0; }
  .dock-flame canvas { display: block; }
  .dock-brand { position: relative; z-index: 1; margin-bottom: 0; filter: drop-shadow(0 0 10px rgba(8,126,252,0.45)); }
  @media (prefers-reduced-motion: no-preference) {
    .dock-brand { animation: hoverFloat2 4.5s ease-in-out infinite; }
    @keyframes hoverFloat2 { 0%,100% { transform: none; } 50% { transform: translateY(-3px); } }
  }

  /* hero: four stations, one power band */
  .hero-body { display: block; }
  .hero-panel .stations { grid-template-columns: repeat(4, minmax(0, 1fr)); min-height: 0; }
  .hero-panel .station { min-height: 168px; }
  .hero-panel .station:nth-child(n+3) { border-top: none; }
  .hero-panel .station:nth-child(odd):not(:first-child) { border-inline-start: 1px solid var(--line); }
  .hero-panel .st-value { font-size: 44px; height: 50px; }
  .hero-panel .station:hover .st-value { text-shadow: 0 0 30px var(--blue-glow), 0 0 60px rgba(8,126,252,0.35); }
  .hero-panel .station { transition: background .15s; }
  .hero-panel .station:hover { background: rgba(8,126,252,0.04); }

  /* capacity meter (live accounts) — segmented energy cells */
  .cap-bar { position: relative; height: 7px; margin-top: 2px;
    background: repeating-linear-gradient(90deg, rgba(111,193,255,0.12) 0 12px, transparent 12px 16px); }
  [data-theme="light"] .cap-bar { background: repeating-linear-gradient(90deg, rgba(2,62,138,0.14) 0 12px, transparent 12px 16px); }
  .cap-bar i { position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--f, 0%);
    background: repeating-linear-gradient(90deg, var(--live) 0 12px, transparent 12px 16px);
    filter: drop-shadow(0 0 5px rgba(48,217,127,0.6)); }

  /* micro thrust channels (active campaigns) */
  .micro-tracks { display: flex; flex-direction: column; gap: 5px; margin-top: 4px; }
  .mt { position: relative; height: 4px; background: rgba(111,193,255,0.08); }
  [data-theme="light"] .mt { background: rgba(2,62,138,0.09); }
  .mt i { position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--f, 0%); overflow: hidden;
    background: linear-gradient(90deg, var(--navy), var(--blue)); }
  .mt i::after { content: ''; position: absolute; inset: 0;
    background: repeating-linear-gradient(115deg, transparent 0 5px, rgba(255,255,255,0.25) 5px 7px); }
  .mt.sched { background: repeating-linear-gradient(90deg, var(--line) 0 5px, transparent 5px 10px); }
  @media (prefers-reduced-motion: no-preference) {
    .mt.live i::after { animation: thrust 1.1s linear infinite; }
  }

  /* sync ping (pages) */
  .ping { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--live); flex: none;
    box-shadow: 0 0 6px rgba(48,217,127,0.5); }
  @media (prefers-reduced-motion: no-preference) {
    .ping::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--live);
      animation: pingr 2.2s ease-out infinite; }
    @keyframes pingr { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(3); opacity: 0; } }
  }

  /* burn strip (campaigns): the gauge's new home */
  .burn-strip { display: flex; align-items: center; gap: 22px; padding: 6px 20px; margin-bottom: 14px;
    border: 1px solid var(--line-strong); border-radius: var(--r-2);
    background: var(--engine-bg); }
  .burn-strip .gauge-wrap { width: 150px; margin: 0; flex: none; }
  .burn-strip .gauge-read b { font-size: 22px; }
  .burn-strip .gauge-read span { font-size: 8.5px; }
  .burn-strip .governor { margin-top: 0; white-space: nowrap; font-size: 9.5px; letter-spacing: .1em; }
  .burn-strip .spacer { flex: 1; }
  .burn-total { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
  .st-value.sm { font-size: 30px; height: auto; display: block; text-align: end; }

  /* powered counters on fleet cards */
  .acct-meters { display: flex; gap: 16px; margin-top: auto; }
  .meter { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .meter-label { font: 400 9px var(--mono); letter-spacing: .16em; color: var(--faint); text-transform: uppercase;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .meter b { font: italic 700 17px/1 var(--disp); color: var(--text); }
  .meter-bar { position: relative; height: 4px; background: rgba(111,193,255,0.09); }
  [data-theme="light"] .meter-bar { background: rgba(2,62,138,0.1); }
  .meter-bar i { position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--f, 0%); overflow: hidden;
    background: linear-gradient(90deg, var(--navy), var(--blue)); }
  .meter-bar.hot i::after { content: ''; position: absolute; inset: 0;
    background: repeating-linear-gradient(115deg, transparent 0 5px, rgba(255,255,255,0.25) 5px 7px); }
  .meter-bar.warn { background: repeating-linear-gradient(90deg, rgba(240,176,60,0.25) 0 5px, transparent 5px 10px); }
  @media (prefers-reduced-motion: no-preference) {
    .meter-bar.hot i::after { animation: thrust 1.1s linear infinite; }
  }


  /* ═══ v5 — THE FULL BURN: forms, live mission, front door ═══ */

  .back-link { display: inline-flex; align-items: center; gap: 5px; font: 400 11px var(--mono); letter-spacing: .1em;
    color: var(--faint); text-decoration: none; text-transform: uppercase; margin-bottom: 8px; }
  .back-link::before { content: '‹'; font-size: 14px; }
  [dir="rtl"] .back-link::before { content: '›'; }
  .back-link:hover { color: var(--blue-hi); }

  /* clickable mission names */
  .m-name { cursor: pointer; transition: color .12s; }
  .m-name:hover { color: var(--blue-hi); }

  /* ── mission detail ── */
  .dt-hero { border: 1px solid var(--line-strong); border-radius: var(--r-2); background: var(--engine-bg);
    padding: 18px 22px; display: flex; flex-direction: column; gap: 16px; margin-bottom: 16px; }
  .dt-top { display: flex; align-items: center; gap: 12px; }
  .acct-av.lg { width: 46px; height: 46px; font-size: 15px; }
  .acct-av.xs { width: 26px; height: 26px; font-size: 10px; box-shadow: none; }
  .dt-id { min-width: 0; }
  .dt-id b { display: block; font-size: 15px; }
  .dt-id small { display: block; font: 400 11px var(--mono); color: var(--faint); }
  .dt-top .m-status { margin-inline-start: auto; }
  .dt-prog-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
  .dt-count { font: italic 700 19px/1 var(--disp); color: var(--text); }
  .dt-pct { font: italic 700 22px/1 var(--disp); color: var(--blue-hi); text-shadow: 0 0 16px var(--blue-glow); }
  .track.big { height: 12px; border-radius: 3px; }
  .track.big .track-node { width: 14px; height: 14px; }
  .dt-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
  .dt-meta .governor { margin: 0; white-space: nowrap; font-size: 9.5px; letter-spacing: .1em; }
  .dt-pacing { font-size: 11px; color: var(--faint); }
  .hero-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
  .pane { border: 1px solid var(--line-strong); border-radius: var(--r-2); background: var(--panel);
    padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; }
  .st-value.huge { font-size: 52px; height: 56px; }
  .c-live { color: var(--live) !important; text-shadow: 0 0 26px rgba(48,217,127,0.4); }
  .c-fail { color: var(--fail) !important; text-shadow: 0 0 26px rgba(242,89,78,0.35); }
  .stat-strip { display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: baseline; border: 1px solid var(--line-strong);
    border-radius: var(--r-1); background: var(--panel); padding: 10px 18px; margin-bottom: 14px;
    font: 400 12px var(--mono); color: var(--faint); }
  .stat-strip b { font: italic 700 16px/1 var(--disp); color: var(--text); }
  .live-tag { margin-inline-start: auto; display: flex; align-items: center; gap: 6px;
    font: 500 9.5px var(--tag); letter-spacing: .2em; color: var(--live); }
  .chart-host { position: relative; height: 120px; padding: 10px 14px 12px; }
  .chart-host canvas { display: block; width: 100%; height: 100%; }
  .panel + .panel, .stat-strip + .panel { margin-top: 14px; }
  /* .deck lays its panels out side-by-side as CSS grid columns (gap already spaces them) — the stacked-panel
     margin above only makes sense in normal flow and was dropping the second column out of row alignment. */
  .deck > .panel + .panel { margin-top: 0; }
  .row-in { animation: rowIn .35s ease-out both; }
  @keyframes rowIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

  /* ── form system ── */
  .tplbar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; margin-bottom: 14px;
    border: 1px solid var(--line-strong); border-radius: var(--r-2); background: var(--panel); flex-wrap: wrap; }
  .tpl-lbl { font: 500 10px var(--tag); letter-spacing: .2em; color: var(--faint); }
  .tplbar .mini { color: var(--blue-hi); background: none; border: none; cursor: pointer; font-size: 12px; }
  .tplbar .mini:hover { text-decoration: underline; }
  .edit-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
  .edit-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
  .edit-side { position: sticky; top: 72px; }
  .edit-section { border: 1px solid var(--line-strong); border-radius: var(--r-2); background: var(--panel); padding: 18px 20px; }
  .es-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; }
  .es-icon { width: 34px; height: 34px; flex: none; display: grid; place-items: center; color: var(--blue-hi);
    background: rgba(8,126,252,0.1); border: 1px solid rgba(8,126,252,0.35);
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
  .es-icon svg { width: 17px; height: 17px; }
  .es-title { font: 500 12px var(--tag); letter-spacing: .18em; text-transform: uppercase; }
  .es-desc { font-size: 12px; color: var(--faint); margin-top: 2px; }
  .fld { display: flex; flex-direction: column; gap: 6px; }
  .fld + .fld, .segrow + .fld-row, .fld + .segrow { margin-top: 14px; }
  .fld label { font: 400 10px var(--mono); letter-spacing: .16em; color: var(--faint); text-transform: uppercase; }
  .inp { background: color-mix(in srgb, var(--panel-2) 70%, transparent); border: 1px solid var(--line-strong);
    border-radius: var(--r-1); color: var(--text); font: 400 13.5px var(--body); padding: 9px 12px; outline: none;
    transition: border-color .12s, box-shadow .12s; width: 100%; }
  .inp:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(8,126,252,0.18), 0 0 18px -6px var(--blue-glow); }
  .inp::placeholder { color: var(--faint); }
  textarea.inp { resize: vertical; min-height: 90px; }
  select.inp { appearance: auto; }
  /* Auto-style bare form controls inside a .fld (the app's converted forms drop plain <input>/<select>/
     <textarea> in a .fld without repeating class="inp" on each). Scoped to .fld; radios/checkboxes excluded. */
  .fld > input:not([type=radio]):not([type=checkbox]):not([type=range]),
  .fld > select, .fld > textarea {
    background: color-mix(in srgb, var(--panel-2) 70%, transparent); border: 1px solid var(--line-strong);
    border-radius: var(--r-1); color: var(--text); font: 400 13.5px var(--body); padding: 9px 12px; outline: none;
    transition: border-color .12s, box-shadow .12s; width: 100%; }
  .fld > textarea { resize: vertical; min-height: 90px; }
  .fld > select { appearance: auto; }
  .fld > input:focus, .fld > select:focus, .fld > textarea:focus {
    border-color: var(--blue); box-shadow: 0 0 0 3px rgba(8,126,252,0.18), 0 0 18px -6px var(--blue-glow); }
  .fld > input::placeholder, .fld > textarea::placeholder { color: var(--faint); }
  .fld-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
  .segrow { display: flex; gap: 8px; flex-wrap: wrap; }
  .segopt { position: relative; cursor: pointer; }
  .segopt input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
  .segopt span { display: inline-block; padding: 7px 14px; font: 600 12px var(--body); color: var(--dim);
    background: var(--panel-2); clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
  .segopt input:checked + span { background: linear-gradient(120deg, var(--navy), var(--blue) 70%); color: #fff; }
  .segopt input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
  .hint { font-size: 11.5px; color: var(--faint); }
  .combo { position: relative; }
  .combo-pane { position: absolute; inset-inline: 0; top: calc(100% + 6px); z-index: 40; background: var(--panel);
    border: 1px solid var(--line-strong); border-radius: var(--r-1); box-shadow: var(--shadow); overflow: hidden; }
  .combo-it { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; background: none;
    border: none; color: var(--text); font: 400 13px var(--body); cursor: pointer; text-align: start; }
  .combo-it:hover { background: var(--panel-2); }
  .combo-it + .combo-it { border-top: 1px solid var(--line); }
  .combo-it .mono { margin-inline-start: auto; }
  .ph-row { display: flex; gap: 8px; }

  /* ── the throttle ── */
  .thr-range { width: 100%; accent-color: var(--blue); height: 22px; cursor: pointer; }
  .thr-meter { display: flex; gap: 6px; margin: 4px 0 10px; }
  .thr-meter i { flex: 1; height: 10px; background: var(--panel-2); border: 1px solid var(--line);
    clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
    transition: background .15s, box-shadow .15s; }
  .thr-meter i.on:nth-child(-n+3) { background: linear-gradient(120deg, var(--navy), var(--blue)); box-shadow: 0 0 10px var(--blue-glow); border-color: transparent; }
  .thr-meter i.on:nth-child(4), .thr-meter i.on:nth-child(5) { background: linear-gradient(120deg, #8a5a00, var(--warn)); box-shadow: 0 0 10px rgba(240,176,60,.55); border-color: transparent; }
  .thr-meter i.on:nth-child(6) { background: linear-gradient(120deg, #7a1f1a, var(--fail)); box-shadow: 0 0 12px rgba(242,89,78,.65); border-color: transparent; }
  .thr-read { display: flex; align-items: baseline; gap: 10px; }
  .thr-read b { font: italic 700 15px var(--disp); letter-spacing: .06em; }
  #thrSection.hot .es-icon { color: var(--warn); border-color: rgba(240,176,60,.45); background: rgba(240,176,60,.1); }
  #thrSection.max .es-icon { color: var(--fail); border-color: rgba(242,89,78,.5); background: rgba(242,89,78,.1); }
  .thr-ack { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 11px 13px; cursor: pointer;
    border: 1px dashed rgba(240,176,60,.55); border-radius: var(--r-1); font-size: 12.5px; color: var(--dim);
    background: rgba(240,176,60,.05); }
  .thr-ack .hcheck { margin-top: 1px; }
  #thrCustom { margin-top: 14px; }

  /* ── live preview thread ── */
  .pv-thread { padding: 14px; }
  .pv-head { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--line);
    margin-bottom: 12px; font-size: 13px; }
  .pv-bubble { background: linear-gradient(120deg, var(--navy), var(--blue)); color: #fff; font-size: 13px;
    line-height: 1.5; padding: 10px 13px; border-radius: 14px; border-end-start-radius: 4px; max-width: 100%;
    overflow-wrap: break-word; min-height: 40px; box-shadow: 0 6px 20px -8px var(--blue-glow); }
  .pv-meta { margin-top: 8px; font: 400 10px var(--mono); color: var(--faint); letter-spacing: .06em; }
  .btn.lg { padding: 12px 22px; font-size: 14px; }
  .btn.wide { width: 100%; justify-content: center; }

  /* ── the front door ── */
  .auth-screen { position: fixed; inset: 0; z-index: 95; display: grid; grid-template-columns: minmax(380px, 44%) 1fr; }
  .auth-screen[hidden] { display: none; }
  .auth-brand { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center;
    gap: 10px; padding: 48px 40px; overflow: hidden; color: #EAF2FF;
    background: radial-gradient(130% 110% at 50% 30%, #0B1730 0%, #050B1A 55%, #030610 100%); }
  .auth-stage { position: relative; width: 170px; height: 190px; }
  .auth-flame { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 170px; height: 260px; pointer-events: none; }
  .auth-mark { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); width: 130px; height: 130px;
    filter: drop-shadow(0 0 26px rgba(8,126,252,0.6)); --mark-arrow: #087EFC; --mark-rocket: #FFFFFF; }
  @media (prefers-reduced-motion: no-preference) {
    .auth-mark { animation: authFloat 4.5s ease-in-out infinite; }
    @keyframes authFloat { 0%,100% { transform: translateX(-50%); } 50% { transform: translateX(-50%) translateY(-7px); } }
  }
  .auth-word { font: 600 26px var(--body); letter-spacing: -.01em; }
  .auth-word b { color: var(--blue-hi); }
  .auth-tag { margin: 0; font: 500 11px var(--tag); letter-spacing: .3em; text-transform: uppercase; color: #5F7096; }
  .auth-points { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
  .auth-points li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #93A7C9; }
  .auth-side { display: grid; place-items: center; padding: 32px 24px; background: var(--bg); }
  .auth-card { width: min(400px, 100%); background: var(--panel); border: 1px solid var(--line-strong);
    border-radius: var(--r-2); padding: 30px 28px; display: flex; flex-direction: column; gap: 16px; }
  .auth-card h2 { margin: 0; font: italic 700 20px var(--disp); text-transform: uppercase; letter-spacing: .02em; }
  [dir="rtl"] .auth-card h2 { font-style: normal; letter-spacing: 0; }
  .auth-sub { margin: -8px 0 0; font-size: 13px; color: var(--dim); }
  .auth-forgot { text-align: center; font-size: 12px; color: var(--blue-hi); text-decoration: none; }
  .auth-forgot:hover { text-decoration: underline; }

  /* ═══ v6 — MOBILE-FIRST RESPONSIVE LAYER ═══
     Base = a 360px phone. min-width steps re-assemble the cockpit.
     The rails stay a drawer below 900px; navigation lives in a bottom
     tab bar (always-night, like the rails — the cockpit never switches
     on the cabin lights). */

  /* ─ base chrome: single column, drawer rails, bottom tabs ─ */
  .fld-row[hidden], .fld[hidden], .thr-ack[hidden] { display: none; }
  /* the .fld+.fld stack-margin must NOT apply inside a horizontal row — it staggered the date fields */
  .fld-row { align-items: start; }
  .fld-row > .fld + .fld { margin-top: 0; }  /* pre-existing: class display beat UA [hidden] */
  .board-head { flex-wrap: wrap; row-gap: 2px; }
  .acct-foot { flex-wrap: wrap; }
  .shell { display: block; }
  .rails { position: fixed; inset-block: 0; inset-inline-start: 0; height: 100vh; height: 100dvh;
    transform: translateX(var(--slide)); transition: transform .25s ease; z-index: 70; box-shadow: var(--shadow); }
  body.nav-open .rails { transform: none; }
  body.nav-open { overflow: hidden; }
  .nav-toggle { display: none; }
  .topbar-brand { display: flex; }
  .crumb, .clock, .credits, .cmdk-hint { display: none; }
  .topbar { padding: 10px 14px; }
  .page { padding: 18px 14px calc(92px + env(safe-area-inset-bottom)); }
  .toast-host { bottom: calc(76px + env(safe-area-inset-bottom)); inset-inline-end: 12px; }
  .dd-panel { max-width: min(92vw, 340px); }
  .inp { font-size: 16px; }               /* ≥16px stops iOS zoom-on-focus */
  .cmdk-input input { font-size: 16px; }

  /* ─ bottom tab bar ─ */
  .tabbar { position: fixed; inset-inline: 0; bottom: 0; z-index: 55; display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding: 7px max(6px, env(safe-area-inset-left)) calc(7px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-right));
    background: rgba(3, 6, 16, 0.94); backdrop-filter: blur(10px);
    border-top: 1px solid rgba(111, 193, 255, 0.22); }
  .tabbar .tab { position: relative; appearance: none; background: none; border: none; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    min-height: 48px; padding: 4px 2px; color: #5F7096;
    font: 500 9.5px var(--tag); letter-spacing: .08em; text-transform: uppercase; }
  .tabbar .tab svg { width: 21px; height: 21px; }
  .tabbar .tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabbar .tab.active { color: #6FC1FF; }
  .tabbar .tab.active::before { content: ''; position: absolute; top: -7px; left: 18%; right: 18%; height: 2px;
    background: linear-gradient(90deg, transparent, #087EFC, transparent); box-shadow: 0 0 10px rgba(8,126,252,0.6); }
  .tabbar .tab.active svg { filter: drop-shadow(0 0 6px rgba(8,126,252,0.55)); }
  [dir="rtl"] .tabbar .tab { letter-spacing: .02em; }

  /* ─ base type scale (fluid) ─ */
  .page-head h1 { font-size: clamp(24px, 6.4vw, 30px); }
  .st-value { font-size: clamp(30px, 8.9vw, 40px); }
  .hero-panel .st-value { font-size: clamp(32px, 9.5vw, 44px); }
  .st-value.huge { font-size: clamp(36px, 11vw, 52px); }
  .ign-count { font-size: clamp(56px, 18vw, 84px); }

  /* ─ base layout: everything stacks ─ */
  .page-head .actions { width: 100%; }
  .page-head .actions .btn { flex: 1; justify-content: center; }
  .stations, .hero-panel .stations { grid-template-columns: 1fr; }
  .hero-panel .station { min-height: 0; }
  .station:nth-child(even), .hero-panel .station:nth-child(odd):not(:first-child) { border-inline-start: none; }
  .station:nth-child(n+2), .hero-panel .station:nth-child(n+2) { border-top: 1px solid var(--line); }
  .deck { grid-template-columns: 1fr; }
  .mission, #ovList .mission { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  #cpList .mission { grid-template-columns: 16px minmax(0, 1fr) auto; gap: 10px; }
  #cpList .mission .hcheck { grid-row: 1; grid-column: 1; }
  #cpList .mission .m-id { grid-row: 1; grid-column: 2; align-self: center; }
  #cpList .mission .row-act { grid-row: 1; grid-column: 3; justify-self: end; }
  #cpList .mission .m-main, #cpList .mission .m-read { grid-column: 1 / -1; }
  .m-read { justify-content: flex-start; flex-wrap: wrap; }
  .m-read > span, .m-read > span:first-child,
  #cpList .m-read > span, #cpList .m-read > span:first-child { min-width: 0; text-align: start; }
  .ra { width: 34px; height: 34px; }
  .ra svg { width: 16px; height: 16px; }
  .burn-strip { flex-wrap: wrap; gap: 10px 22px; padding-bottom: 14px; }
  .burn-total { align-items: flex-start; }
  .st-value.sm { text-align: start; }
  .searchbar { min-width: 100%; }
  .fld-row { grid-template-columns: 1fr; }
  .hero-pair { grid-template-columns: 1fr; }
  .edit-layout { grid-template-columns: 1fr; }
  .edit-side { position: static; }
  .pager { flex-wrap: wrap; }
  .pager-info { flex-basis: 100%; margin-inline-end: 0; margin-bottom: 4px; }
  .cmdk-sheet { margin: 0; width: 100%; height: 100vh; height: 100dvh; border: none; border-radius: 0; }
  .cmdk-row { padding: 12px 16px; }
  .auth-screen { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .auth-brand { padding: 26px; }
  .auth-stage { width: 120px; height: 130px; }
  .auth-mark { width: 92px; height: 92px; }
  .auth-points { display: none; }

  /* ─ ≥560: paired cards ─ */
  @media (min-width: 560px) {
    .credits { display: inline-block; }
    .page-head .actions { width: auto; }
    .page-head .actions .btn { flex: none; }
    .stations { grid-template-columns: 1fr 1fr; }
    .hero-panel .stations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .station:nth-child(odd), .hero-panel .station:nth-child(odd) { border-inline-start: none; }
    .station:nth-child(even), .hero-panel .station:nth-child(even) { border-inline-start: 1px solid var(--line); }
    .station:nth-child(n+2), .hero-panel .station:nth-child(n+2) { border-top: none; }
    .station:nth-child(n+3), .hero-panel .station:nth-child(n+3) { border-top: 1px solid var(--line); }
    .searchbar { min-width: 230px; }
    .fld-row { grid-template-columns: 1fr 1fr; }
    .pager-info { flex-basis: auto; margin-inline-end: auto; margin-bottom: 0; }
  }

  /* ─ ≥640: paired panes, floating palette ─ */
  @media (min-width: 640px) {
    .hero-pair { grid-template-columns: 1fr 1fr; }
    .cmdk-sheet { margin: 11vh auto 0; width: min(560px, calc(100% - 32px)); height: auto;
      border: 1px solid var(--line-strong); border-radius: var(--r-2); }
    .cmdk-row { padding: 9px 16px; }
  }

  /* ─ ≥860: two-panel front door ─ */
  @media (min-width: 860px) {
    .auth-screen { grid-template-columns: minmax(380px, 44%) 1fr; grid-template-rows: none; }
    .auth-brand { padding: 48px 40px; }
    .auth-stage { width: 170px; height: 190px; }
    .auth-mark { width: 130px; height: 130px; }
    .auth-points { display: flex; }
  }

  /* ─ ≥900: the rails return, tabs retire ─ */
  @media (min-width: 900px) {
    .shell { display: grid; grid-template-columns: auto minmax(0, 1fr); }
    .rails { position: sticky; top: 0; height: 100vh; transform: none; transition: none;
      z-index: 40; box-shadow: none; }
    body.nav-open { overflow: auto; }
    .nav-backdrop { display: none; }
    .tabbar { display: none; }
    .topbar-brand { display: none; }
    .crumb { display: inline; }
    .cmdk-hint { display: flex; }
    .cmdk-hint span { display: none; }
    .topbar { padding: 10px 22px; }
    .page { padding: 26px 28px 48px; }
    .toast-host { bottom: 18px; inset-inline-end: 18px; }
    .inp { font-size: 13.5px; }
    .cmdk-input input { font-size: 14.5px; }
    .mission { grid-template-columns: 16px 92px minmax(0, 1fr) auto auto; gap: 14px; }
    #ovList .mission { grid-template-columns: 92px minmax(0, 1fr) auto; gap: 18px; }
    #cpList .mission .hcheck, #cpList .mission .m-id, #cpList .mission .row-act,
    #cpList .mission .m-main, #cpList .mission .m-read { grid-row: auto; grid-column: auto; justify-self: auto; }
    #cpList .mission .m-id { align-self: auto; }
    .m-read { justify-content: flex-end; flex-wrap: nowrap; }
    .acct-foot, .data-card-actions { flex-wrap: nowrap; }
    .m-read > span { min-width: 106px; text-align: end; }
    .m-read > span:first-child { min-width: 134px; }
    #cpList .m-read > span { min-width: 96px; }
    #cpList .m-read > span:first-child { min-width: 124px; }
    .ra { width: 28px; height: 28px; }
    .ra svg { width: 14px; height: 14px; }
    .board-head { flex-wrap: nowrap; }
    .burn-strip { flex-wrap: nowrap; gap: 22px; padding-bottom: 6px; }
    .burn-total { align-items: flex-end; }
    .st-value.sm { text-align: end; }
  }

  /* ─ ≥1020: two-column deck, four stations, sticky builder rail ─ */
  @media (min-width: 1020px) {
    .deck { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
    .cmdk-hint span { display: inline; }
    .hero-panel .stations { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .hero-panel .station { min-height: 168px; }
    .hero-panel .station:nth-child(n+2) { border-inline-start: 1px solid var(--line); border-top: none; }
    .edit-layout { grid-template-columns: minmax(0, 1fr) 300px; }
    .edit-side { position: sticky; top: 72px; }
  }

  /* ═══ v7 — real-page parity: metric tiles, data-cards, bulk bars ═══ */
  .st-value.md { font-size: clamp(24px, 6vw, 30px); height: 36px; }
  .stations.q4 { min-height: 0; }
  .stations.q4 .station { min-height: 0; }
  @media (min-width: 1020px) {
    .stations.q4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .stations.q4 .station:nth-child(n+2) { border-inline-start: 1px solid var(--line); border-top: none; }
  }
  /* Campaigns KPI board carries a 5th tile (Paused). It rides the SAME hero-panel breakpoints as the 4-tile
     board (1-up mobile → 2-up ≥560 → n-across desktop); these overrides only bump the desktop track to five and,
     on the 2-up tablet range, span the trailing Paused tile full-width so it is never left sitting alone. */
  @media (min-width: 560px) {
    .hero-panel .stations.q5 .station:nth-child(5) { grid-column: 1 / -1; border-inline-start: none; }
  }
  @media (min-width: 1020px) {
    .hero-panel .stations.q5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .hero-panel .stations.q5 .station:nth-child(5) { grid-column: auto; border-inline-start: 1px solid var(--line); }
  }
  .st-value.amber { color: var(--warn); text-shadow: 0 0 20px rgba(240,176,60,.28); }
  @media (max-width: 559.98px) {
    .page-head .actions { flex-wrap: wrap; }
    .page-head .actions .btn { flex: 1 1 40%; }
  }
  .man-row.jobrow time { width: auto; margin-inline-start: auto; }
  .man-row.jobrow .st { margin-inline-start: 0; }
  .man-row.jobrow .what { flex: none; }
  .btn.live { background: var(--live); border: none; border-radius: 0; color: #fff;
    clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); }
  .btn.live:hover { filter: brightness(1.08); }
  .btn.btn-sm.live { color: #fff; }
  .bulkbar { flex-wrap: wrap; }
  .bulkbar .dd { margin-inline-start: auto; }
  .chip-f b { font: 600 11px var(--mono); opacity: .85; }
  .camp .acct-name b { cursor: pointer; transition: color .12s; }
  .camp .acct-name b:hover { color: var(--blue-hi); }
  .camp-chips { display: flex; gap: 6px; flex-wrap: wrap; }
  .speed-chip.warn { color: var(--warn); border-color: rgba(240,176,60,.45); }
  .speed-chip.neutral { color: var(--dim); border-color: var(--line-strong); }
  .camp-when { font: 400 11px var(--mono); color: var(--faint); }
  /* Paused-reason note on a campaign card — a compact warn strip stating exactly why the engine paused it. */
  .camp-pause-reason { display: flex; align-items: flex-start; gap: 8px; margin-top: 2px; padding: 8px 10px;
    border: 1px solid rgba(240,176,60,.42); border-inline-start-width: 3px; border-radius: var(--r-1);
    background: rgba(240,176,60,.08); color: var(--warn); font-size: 12px; line-height: 1.45; }
  .camp-pause-reason svg { width: 14px; height: 14px; flex: none; margin-top: 1px; }
  /* A paused card carries the most footer actions (Resume / Stop + Open); drop the icons so they read as clean
     text buttons and fit one row without wrapping — Edit/Delete already live in the kebab, not the footer. */
  .acct.camp[data-status="warn"] .acct-foot .btn svg { display: none; }
  .acct-top .dd { flex: none; }
  .acct-top .m-status { margin-inline-start: auto; }
  .kebab-sum { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line);
    border-radius: var(--r-1); color: var(--faint); cursor: pointer; }
  .kebab-sum:hover { color: var(--text); border-color: var(--line-strong); }
  .kebab-sum svg { width: 15px; height: 15px; }
  .admins { display: flex; flex-direction: column; gap: 10px; }
  .admins label { display: flex; align-items: center; gap: 10px; font-size: 13px; cursor: pointer; }
  .admins .mono.dim { margin-inline-start: auto; font-size: 11px; }
  .pv-rows { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 7px; }
  .pv-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--dim); }
  .pv-row b { font-weight: 600; color: var(--text); }

  /* ═══ v8 — the chamfer IS the identity: every control wears it; stats perfected ═══ */
  /* Ghost controls get a dedicated surface token that is CLEARLY distinct from the page bg in
     both themes (the old var(--panel-2) was almost identical to the light body → buttons vanished),
     plus a 1px inset ring that follows the chamfer so they read unmistakably as buttons. */
  :root, [data-theme="dark"] { --ctl: #1B2842; --ctl-hover: #263756; --ctl-edge: rgba(111,193,255,0.34); }
  [data-theme="light"] { --ctl: #D6E3F5; --ctl-hover: #C4D6EF; --ctl-edge: rgba(2,62,138,0.30); }

  .btn { border: none; border-radius: 0; background: var(--ctl); justify-content: center;
    clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); }
  .btn:not(.primary):not(.danger):not(.live):not(.btn-primary):not(.btn-danger):not(.btn-live):not(.btn-open):not(.btn-check):not(.btn-sync):not(.btn-warn) { box-shadow: inset 0 0 0 1px var(--ctl-edge); }
  .btn:not(.primary):not(.danger):not(.live):not(.btn-primary):not(.btn-danger):not(.btn-live):not(.btn-open):not(.btn-check):not(.btn-sync):not(.btn-warn):hover { background: var(--ctl-hover); color: var(--text); }
  .btn.btn-sm { clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); }

  .ra, .kebab-sum, .pg, .icon-btn, .nav-toggle { border: none; border-radius: 0; background: var(--ctl);
    box-shadow: inset 0 0 0 1px var(--ctl-edge);
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
  .icon-btn:hover, .ra:hover, .kebab-sum:hover, .pg:hover:not(:disabled):not(.active) { background: var(--ctl-hover); color: var(--text); }
  .pg.active { box-shadow: none; }   /* active page keeps its gradient, no ghost ring */

  /* filter chips + segmented options are buttons too — same distinct surface */
  .chip-f { background: var(--ctl); box-shadow: inset 0 0 0 1px var(--ctl-edge); }
  .chip-f.active { box-shadow: none; }
  .segopt span { background: var(--ctl); box-shadow: inset 0 0 0 1px var(--ctl-edge); }
  .segopt input:checked + span { box-shadow: none; }

  /* the clip-path clips anything outside the button — keep the bell badge inside the box */
  .icon-btn .badge { top: 1px; inset-inline-end: 1px; min-width: 15px; height: 15px; font: 700 9.5px/15px var(--body); }

  /* buttons fill their row, content centered */
  .acct-foot { display: flex; gap: 8px; }
  .acct-foot .btn { flex: 1 1 auto; min-width: 0; white-space: nowrap; }
  .page-head .actions .btn { justify-content: center; }

  /* card stats: number over label (real data-stat), status chip centered beside them */
  .acct-stats { align-items: center; gap: 10px; }
  .acct-stats > span:not(.m-status) { flex: 1 1 0; display: flex; flex-direction: column; gap: 4px;
    align-items: center; text-align: center; min-width: 0; }
  .acct-stats > span:not(.m-status) b { font: italic 700 18px/1 var(--disp); color: var(--text);
    font-variant-numeric: tabular-nums; }
  .acct-stats > span:not(.m-status) > span { font: 400 9.5px var(--mono); letter-spacing: .14em;
    text-transform: uppercase; color: var(--faint); white-space: nowrap; }
  [dir="rtl"] .acct-stats > span:not(.m-status) > span { letter-spacing: .02em; }
  .acct-stats .m-status { flex: 1 1 0; justify-content: center; }
  .acct-top .dd { margin-inline-start: auto; }
  /* no oversized buttons — one height for all; .lg collapses to normal, keeps only full-width intent via .wide */
  .btn.lg { padding: 8px 16px; font-size: 13px; }

  /* fleet grids: 3 cards per row maximum */
  .fleet { grid-template-columns: 1fr; }
  @media (min-width: 640px) { .fleet { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1150px) { .fleet { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

  /* ─ ≥1280: the clock ─ */
  @media (min-width: 1280px) { .clock { display: inline; } }

  /* ── App → Afterburn button bridge (MUST stay last). The app markup uses hyphenated variants
     (.btn-primary / .btn-danger / .btn-live); the control-normalization `.btn { background: var(--ctl) }`
     above only protects the artifact's dot-variants (.primary/.danger/.live), so without this the app's
     semantic buttons render as the ghost surface. These fills come last → they win the base background; the
     ghost inset-ring + ghost-hover already exclude the hyphenated variants via :not() above. */
  .btn-primary { position: relative; overflow: hidden; color: #fff;
    background: linear-gradient(120deg, var(--navy), var(--blue) 60%);
    box-shadow: 0 4px 20px -6px var(--blue-glow); }
  .btn-primary::after { content: ''; position: absolute; top: -30%; bottom: -30%; width: 34%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent);
    transform: skewX(-20deg) translateX(-260%); inset-inline-start: 0; pointer-events: none; }
  .btn-primary, .btn-danger, .btn-live { transition: filter .14s, transform .14s, box-shadow .14s, background .14s; }
  /* background is reasserted on every :hover below — components.css's earlier .btn-primary/.btn-danger/
     .btn-live:hover rules also set background (their own pale "wash" fill), and since afterburn's hover
     rules didn't repeat the property, that earlier declaration kept winning the cascade on hover and the
     solid button washed out to a near-transparent tint. filter/transform/box-shadow alone aren't enough. */
  .btn-primary:hover { color: #fff; background: linear-gradient(120deg, var(--navy), var(--blue) 60%);
    transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 8px 22px -6px var(--blue-glow); }
  .btn-primary:hover::after { transition: transform .55s ease; transform: skewX(-20deg) translateX(380%); }
  .btn-primary:active, .btn-danger:active, .btn-live:active { transform: translateY(0); filter: brightness(.97); }
  .btn-danger { background: var(--fail); color: #fff; }
  .btn-danger:hover { color: #fff; background: var(--fail); transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 7px 18px -7px var(--fail); }
  .btn-live { background: linear-gradient(120deg, #0b6b40, #15a058 92%); color: #ffffff;
    box-shadow: 0 4px 20px -8px rgba(48,217,127,.5); }
  .btn-live:hover { color: #ffffff; background: linear-gradient(120deg, #0b6b40, #15a058 92%);
    transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 7px 18px -7px var(--live); }

  /* ── Purpose-tinted action buttons — premium soft fills that hint at what the action does, instead of one
     generic ghost for every button. A cohesive cool-hue family (view=blue, verify=teal, sync=indigo, plus the
     existing live=green / danger=red / warn=amber fills). Works on both card themes: a low-alpha same-hue wash
     + inset hue ring + saturated label. Pair with .btn (+ .btn-sm). ── */
  /* Solid fills, white label, on the Afterburn palette (icons carry the finer meaning). Same in both themes. */
  .btn-open, .btn-check, .btn-sync, .btn-warn { border: none; box-shadow: none; color: #fff;
    transition: filter .14s, transform .14s, box-shadow .14s, background .14s; }
  .btn-open  { background: var(--blue); }        /* view — brand blue */
  .btn-check { background: #0a4fb0; }             /* verify — cobalt (blue→navy) */
  .btn-sync  { background: var(--navy); }         /* sync — navy */
  .btn-warn  { background: #bd7a0c; }             /* caution — deep amber (white-legible) */
  /* hover: a subtle lift + a glow in the button's own hue + a touch brighter */
  .btn-open:hover, .btn-check:hover, .btn-sync:hover, .btn-warn:hover { color: #fff; transform: translateY(-1px); filter: brightness(1.09); }
  .btn-open:hover  { box-shadow: 0 7px 18px -7px var(--blue); }
  .btn-check:hover { box-shadow: 0 7px 18px -7px #1668e0; }
  .btn-sync:hover  { box-shadow: 0 7px 18px -7px var(--blue); }
  .btn-warn:hover  { box-shadow: 0 7px 18px -7px #e0951a; }
  .btn-open:active, .btn-check:active, .btn-sync:active, .btn-warn:active { transform: translateY(0); filter: brightness(.97); }
  /* LIGHT theme: a solid button on a light card must DEEPEN on hover, not brighten — brightening washes it
     out (invisible). Darken instead so it clearly gains presence. Covers every solid action button. */
  [data-theme="light"] .btn-open:hover, [data-theme="light"] .btn-check:hover, [data-theme="light"] .btn-sync:hover,
  [data-theme="light"] .btn-warn:hover, [data-theme="light"] .btn-primary:hover,
  [data-theme="light"] .btn-danger:hover, [data-theme="light"] .btn-live:hover { filter: brightness(0.9); }

  /* Disabled — no variant styled this state (e.g. "Delete selected" before anything is checked), so a
     disabled solid button rendered at full un-dimmed strength and read as clickable. Dim + cancel every
     fill's hover/active lift; :disabled must win over the hover rules above since it loads after them. */
  .btn:disabled, .btn:disabled:hover, .btn:disabled:active,
  .btn[disabled], .btn[disabled]:hover, .btn[disabled]:active {
    opacity: .45; cursor: not-allowed; filter: none; transform: none; box-shadow: none;
  }

  /* ── Long-tail list/stat primitives → Afterburn (pages the artifact doesn't define still use the app's
     .metric-card / .data-card; give them the station/fleet-card treatment so none falls back to the old
     rounded design). Scoped to those classes; the converted core views use .station/.acct/.panel instead. ── */
  .metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 18px; }
  .metric-card { position: relative; background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--r-2);
    padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit;
    transition: border-color .12s, transform .12s; }
  a.metric-card:hover { transform: translateY(-1px); border-color: var(--blue); }
  .metric-head { display: flex; align-items: center; gap: 9px; }
  .metric-icon { width: 30px; height: 30px; flex: none; display: grid; place-items: center; color: var(--blue-hi);
    background: rgba(8,126,252,0.1); border: 1px solid rgba(8,126,252,0.35);
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
  .metric-icon svg { width: 16px; height: 16px; }
  .metric-icon.mint { color: var(--live); background: rgba(48,217,127,.1); border-color: rgba(48,217,127,.35); }
  .metric-icon.warn { color: var(--warn); background: rgba(240,176,60,.1); border-color: rgba(240,176,60,.35); }
  .metric-icon.danger { color: var(--fail); background: rgba(242,89,78,.1); border-color: rgba(242,89,78,.35); }
  .metric-label { font: 500 10px var(--tag); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
  .metric-value { font: italic 700 30px/1 var(--disp); color: var(--text); }
  .metric-value.mint { color: var(--live); } .metric-value.danger { color: var(--fail); }

  .data-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
  .data-card { position: relative; background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--r-2);
    padding: 14px; display: flex; flex-direction: column; gap: 12px; transition: border-color .12s, transform .12s; }
  .data-card:hover { transform: translateY(-1px); border-color: var(--blue); }
  /* the top-left + bottom-right HUD corner brackets come from identity.css (.data-card::before/::after) —
     don't override ::before here or the top-left tick goes missing while the bottom-right stays. */
  .data-title { font-weight: 600; color: var(--text); }
  /* Card avatar (initials / photo / folder icon) → the afterburn blue-gradient circle, white content — not the
     old pale wash. Photo still clips (components' .data-avatar img rule handles inset/cover). */
  .data-avatar { background: linear-gradient(145deg, var(--blue), var(--navy)); color: #fff;
    box-shadow: 0 0 0 1px rgba(111,193,255,0.18); }
  .data-avatar > svg { color: #fff; }
  .data-avatar.folder { background: linear-gradient(145deg, var(--blue), var(--navy)); color: #fff; }
  .data-stat-num { font: italic 700 18px/1 var(--disp); color: var(--text); font-variant-numeric: tabular-nums; }
  .data-stat-label { font: 400 9.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
  .data-empty { border: 1px dashed var(--line-strong); border-radius: var(--r-2); background: var(--panel);
    padding: 40px 20px; text-align: center; color: var(--dim); }

  /* Generic .card panels (search bars, toolbars, info cards) → the flat afterburn panel: sharp small-radius
     corners + panel border/bg, no soft drop-shadow. Kills the old rounded-card edge across every page. The
     dedicated card variants (.modal-card / .auth-card / .data-card / .metric-card) are separate classes and
     keep their own treatment. */
  .card { border-radius: var(--r-2); box-shadow: none; background: var(--panel); border-color: var(--line-strong); }
  .card-title { font: 500 10.5px var(--tag); letter-spacing: .24em; text-transform: uppercase; color: var(--dim); }

  /* _Sparkline endpoint dot + the live (green) variant — matches the artifact station spark. */
  .sparkline-dot { fill: var(--accent); }
  .sparkline.sp-live .sparkline-line { stroke: var(--live); }
  .sparkline.sp-live .sparkline-area { fill: rgba(48,217,127,0.13); }
  .sparkline.sp-live .sparkline-dot { fill: var(--live); }
  .sparkline.sp-warn .sparkline-line { stroke: var(--warn); }
  .sparkline.sp-warn .sparkline-area { fill: rgba(240,176,60,0.13); }
  .sparkline.sp-warn .sparkline-dot { fill: var(--warn); }

  /* ── Auth pages — the artifact .auth-screen adapted from the SPA fixed overlay to a real full-height page.
     _AuthLayout loads afterburn.css and marks the container .auth-page so tall forms (Register) can scroll. ── */
  .auth-screen.auth-page { position: relative; inset: auto; z-index: auto; min-height: 100vh; }
  .auth-side { position: relative; overflow-y: auto; align-content: center; }
  .auth-mark .brand-mark { width: 100%; height: 100%; display: block; }
  /* dock rail brand mark (span wrapping the app's _BrandMark svg) */
  .dock-brand { display: block; }
  .dock-brand .brand-mark { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 14px rgba(8,126,252,0.55)); }
  /* The dock rail + auth brand panel are ALWAYS dark (theme-invariant), so the rocket keeps its dark-theme
     colours (blue arrow + white rocket) in light mode too — not the light-theme navy/light-blue pairing that
     would wash out on the dark rail. Pin the logo vars on these always-dark marks. */
  .dock-brand, .auth-mark { --logo-arrow: #087EFC; --logo-rocket: #FFFFFF; }
  .auth-toggle { position: absolute; top: 18px; inset-inline-end: 18px; z-index: 3; }
  .auth-title { margin: 0; font: italic 700 20px var(--disp); text-transform: uppercase; letter-spacing: .02em; color: var(--text); }
  [dir="rtl"] .auth-title { font-style: normal; letter-spacing: 0; }
  .auth-card .stack { display: flex; flex-direction: column; gap: 16px; }
  .auth-card .label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
  .auth-card .label-row label { margin: 0; }
  .auth-card .link-xs { font-size: 12px; color: var(--blue-hi); text-decoration: none; }
  .auth-card .link-xs:hover { text-decoration: underline; }
  .auth-alt { margin: 0; text-align: center; font-size: 13px; color: var(--dim); }
  .auth-alt a { color: var(--blue-hi); text-decoration: none; margin-inline-start: 5px; }
  .auth-alt a:hover { text-decoration: underline; }
  .auth-card .check { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--dim); cursor: pointer; }
  .auth-side-foot { margin-top: 20px; display: flex; flex-direction: column; align-items: center; gap: 10px;
    font-size: 12px; color: var(--faint); }
  .auth-side-foot .auth-legal { display: flex; align-items: center; gap: 8px; }
  .auth-side-foot a { color: var(--dim); text-decoration: none; }
  .auth-side-foot a:hover { color: var(--blue-hi); text-decoration: underline; }
  .auth-points li .lamp { flex: none; }

  /* Roadmap platform coming-soon Overview — cockpit chrome, honest "on the roadmap" panel (no fake stats). */
  .platform-soon { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px;
    padding: 40px 24px 46px; }
  .platform-soon-glyph { width: 76px; height: 76px; display: grid; place-items: center; color: var(--blue-hi);
    background: rgba(8,126,252,0.08); border: 1px solid rgba(8,126,252,0.32);
    clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
    box-shadow: 0 0 30px -8px var(--blue-glow); }
  .platform-soon-glyph svg { width: 38px; height: 38px; }
  .platform-soon-title { margin: 4px 0 0; font: italic 700 22px var(--disp); text-transform: uppercase; letter-spacing: .03em;
    color: var(--text); text-shadow: 0 0 22px var(--blue-glow); }
  [dir="rtl"] .platform-soon-title { font-style: normal; letter-spacing: 0; }
  .platform-soon-copy { margin: 0; max-width: 46ch; font-size: 14px; line-height: 1.6; color: var(--dim); }

  /* ═══ KPI + chrome tweaks (2026-07-11) ═══ */
  /* the "Facebook Automation" sidebar plate stays on ONE line (was wrapping to two) */
  .side-plat b { white-space: nowrap; letter-spacing: .05em; font-size: 11px; }
  /* metric-card counter numbers centered (Pages, Message Templates) — the .metric-2up selector below
     matches components.css's start-align rule specificity and wins by load order. */
  .metric-value,
  .metric-grid.metric-2up .metric-value { text-align: center; }
  /* Activity (board-panel) KPI tiles sit in ONE row on desktop, not a 2×2 grid */
  .board-panel .stations { min-height: 0; }
  @media (min-width: 1020px) {
    .board-panel .stations { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .board-panel .stations .station:nth-child(n+2) { border-inline-start: 1px solid var(--line); border-top: none; }
  }
  /* sparkline under a metric-card value (Pages / Message Templates) pins to the card floor */
  .metric-card .sparkline { width: 100%; height: 30px; margin-top: auto; display: block; }
  /* KPI number that abbreviates a big value → clickable to reveal the full figure */
  .kpi-clickable { cursor: pointer; }
  .kpi-full { font: italic 700 34px/1 var(--disp); color: var(--text); text-align: center; direction: ltr;
    font-variant-numeric: tabular-nums; margin: 6px 0 2px; }

  /* ═══ Shell + Overview hierarchy refinement (2026-07-26) ═══ */
  /* Keep the cockpit texture, but let content and actions carry the visual weight. */
  body::before { opacity: .48; }

  /* A compact title band returns useful vertical space without crowding the primary actions. */
  .page-header { min-height: 112px; padding: 22px 40px; gap: 20px; }
  .page-header h1 { font-size: clamp(27px, 2vw, 31px); text-shadow: 0 0 14px color-mix(in srgb, var(--blue-glow) 55%, transparent); }
  .page-header .sub { margin-top: 5px; line-height: 1.45; }
  .page-header .actions { gap: 10px; }

  /* One control rhythm across search, language, theme, support and notifications. */
  .topbar-actions { gap: 10px; }
  .topbar-actions .cmdk-hint,
  .topbar-actions .lang-switch > summary { height: 40px; min-height: 40px; }
  .topbar-actions .theme-toggle,
  .topbar-actions .support-menu > summary,
  .topbar-actions .notif-bell > summary { width: 40px; height: 40px; min-width: 40px; }
  .topbar-actions .support-menu > summary { justify-content: center; }
  .topbar-actions .support-menu > summary > svg { display: block; width: 18px; height: 18px; flex: none; }
  .topbar-actions .user-menu > summary .user-avatar { width: 40px; height: 40px; }

  /* Overview labels stay technical, with less tracking so they scan as words rather than decoration. */
  .hero-panel .board-title, .hero-panel .st-label, .rail-label { letter-spacing: .13em; }
  .hero-panel .station { min-height: 156px; padding: 18px 20px 14px; gap: 8px; }
  .hero-panel .st-value { text-shadow: 0 0 11px color-mix(in srgb, var(--blue-glow) 52%, transparent); }
  .hero-panel .station:hover .st-value {
    text-shadow: 0 0 16px color-mix(in srgb, var(--blue-glow) 62%, transparent);
  }
  .st-context { min-height: 17px; color: var(--faint); font: 500 11px/1.4 var(--body); text-align: center; }
  .hero-panel .station.is-empty .st-value { color: var(--faint); text-shadow: none; }
  .hero-panel .station.is-empty .sparkline { opacity: .3; }

  /* Attention rows expose severity immediately and give the action a real, reachable target. */
  .flag { min-height: 54px; padding: 10px 12px 10px 14px; }
  .flag.warn { border-inline-start: 3px solid var(--warn); background:
    linear-gradient(90deg, color-mix(in srgb, var(--warn) 8%, transparent), transparent 48%), var(--panel); }
  .flag.fail { border-inline-start: 3px solid var(--fail); background:
    linear-gradient(90deg, color-mix(in srgb, var(--fail) 8%, transparent), transparent 48%), var(--panel); }
  [dir="rtl"] .flag.warn { background:
    linear-gradient(-90deg, color-mix(in srgb, var(--warn) 8%, transparent), transparent 48%), var(--panel); }
  [dir="rtl"] .flag.fail { background:
    linear-gradient(-90deg, color-mix(in srgb, var(--fail) 8%, transparent), transparent 48%), var(--panel); }
  .flag .go { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid currentColor;
    background: color-mix(in srgb, currentColor 7%, transparent); letter-spacing: .04em;
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
  .flag:hover .go { background: color-mix(in srgb, currentColor 13%, transparent); }
  [dir="rtl"] .flag .go > [aria-hidden="true"] { transform: rotate(180deg); }

  @media (max-width: 860px) {
    .page-header { min-height: 0; padding: 18px 16px; }
  }

  @media (max-width: 640px) {
    .page-header .actions { gap: 8px; }
    .flag { align-items: flex-start; flex-wrap: wrap; }
    .flag .go { margin-inline-start: 27px; }
  }

  /* ═══ Account profile: compact settings center (2026-07-26) ═══ */
  .profile-page {
    width: min(100%, 1120px);
    margin-inline: 0 auto;
    gap: 12px;
  }
  .profile-page .edit-section {
    border-color: color-mix(in srgb, var(--line-strong) 72%, transparent);
    box-shadow: 0 8px 24px -24px rgba(11, 39, 80, .65);
  }
  .profile-page .es-head { margin-bottom: 16px; }
  .profile-page .es-title { letter-spacing: .11em; }
  .profile-page .es-desc { color: var(--dim); line-height: 1.45; }
  .profile-page .fld label { color: var(--dim); letter-spacing: .11em; }
  .profile-page .fld + .fld { margin-top: 0; }
  .profile-page .hint { color: var(--dim); line-height: 1.45; }
  .profile-page .input {
    min-height: 40px;
    border-color: color-mix(in srgb, var(--line-strong) 78%, transparent);
    background: color-mix(in srgb, var(--panel-2) 22%, var(--panel));
  }

  .profile-summary {
    display: grid;
    grid-template-columns: minmax(240px, .9fr) minmax(0, 1.7fr);
    align-items: center;
    gap: 26px;
    padding: 16px 20px;
  }
  .profile-identity { display: flex; align-items: center; gap: 13px; min-width: 0; }
  .profile-avatar {
    width: 48px;
    height: 48px;
    flex: none;
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--blue) 48%, var(--line-strong));
    border-radius: 50%;
    background: linear-gradient(145deg, var(--navy), var(--blue));
    box-shadow: 0 0 20px -7px var(--blue-glow);
    color: #fff;
    font: italic 700 20px/1 var(--disp);
  }
  .profile-identity-copy { min-width: 0; }
  .profile-summary-meta {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
  }
  .profile-meta {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    gap: 6px 10px;
    min-width: 0;
    min-height: 54px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
    border-radius: var(--r-1);
    background: color-mix(in srgb, var(--panel-2) 45%, transparent);
  }
  .profile-meta-label {
    width: 100%;
    color: var(--dim);
    font: 500 9px/1 var(--tag);
    letter-spacing: .11em;
    text-transform: uppercase;
  }
  .profile-meta-value {
    max-width: 100%;
    color: var(--text);
    font-size: 13px;
    overflow-wrap: anywhere;
  }
  .profile-email { font-weight: 700; }

  .profile-form-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px 12px;
  }
  .profile-form-grid > .fld { grid-column: span 2; min-width: 0; }
  .profile-form-grid > .profile-field-wide { grid-column: span 3; }
  .profile-form-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
  }

  .profile-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
  }
  .profile-settings-grid > .edit-section { min-width: 0; }
  .profile-preference-block {
    min-width: 0;
    padding: 0;
  }
  .profile-preference-block + .profile-preference-block {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
  }
  .profile-subhead { display: flex; flex-direction: column; gap: 4px; margin-bottom: 11px; }
  .profile-subhead strong { color: var(--text); font-size: 13px; }
  .profile-subhead span { max-width: 52ch; color: var(--dim); font-size: 11.5px; line-height: 1.45; }
  .profile-inline-form { display: flex; flex-direction: column; align-items: stretch; }
  .profile-inline-form > .fld { min-width: 0; }
  .profile-inline-form > .btn {
    min-width: 154px;
    align-self: flex-end;
    justify-content: center;
    margin-top: 11px;
    white-space: nowrap;
  }

  .profile-security-list {
    overflow: hidden;
  }
  .profile-security-row,
  .profile-row-heading {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 18px;
    gap: 11px;
    align-items: center;
  }
  .profile-security-row {
    min-height: 60px;
    padding: 10px 0;
    color: var(--text);
    transition: background .12s, color .12s;
  }
  .profile-security-row + .profile-security-row,
  .profile-email-change { border-top: 1px solid var(--line); }
  .profile-security-row:hover { background: color-mix(in srgb, var(--blue) 5%, transparent); }
  .profile-security-row:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
  .profile-row-icon {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    color: var(--blue-hi);
    border: 1px solid color-mix(in srgb, var(--blue) 28%, var(--line));
    border-radius: var(--r-1);
    background: color-mix(in srgb, var(--blue) 7%, var(--panel));
  }
  .profile-row-icon svg { width: 16px; height: 16px; }
  .profile-row-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .profile-row-copy strong { color: var(--text); font-size: 12.5px; }
  .profile-row-copy > span { color: var(--dim); font-size: 11.5px; line-height: 1.4; }
  .profile-row-arrow { color: var(--faint); }
  .profile-row-arrow svg { width: 16px; height: 16px; }
  [dir="rtl"] .profile-row-arrow { transform: rotate(180deg); }
  .profile-email-change { padding: 16px 0 0; }
  .profile-row-heading { grid-template-columns: 34px minmax(0, 1fr); margin-bottom: 12px; }
  .profile-email-form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-inline-start: 45px;
  }
  .profile-email-form > .btn {
    min-width: 154px;
    align-self: flex-end;
    justify-content: center;
    margin-top: 11px;
    white-space: nowrap;
  }

  .profile-sessions .card.flush {
    margin: 0;
    border-color: var(--line);
    background: color-mix(in srgb, var(--panel-2) 24%, var(--panel));
  }
  .profile-sessions .table th {
    color: var(--dim);
    letter-spacing: .1em;
  }
  .profile-sessions .table th,
  .profile-sessions .table td { vertical-align: middle; }
  .profile-sessions .table td { padding-top: 10px; padding-bottom: 10px; }
  .profile-device { display: inline-flex; align-items: center; gap: 10px; }
  .profile-device-icon {
    width: 30px;
    height: 30px;
    flex: none;
    display: grid;
    place-items: center;
    color: var(--dim);
    border-radius: 50%;
    background: color-mix(in srgb, var(--panel-2) 72%, transparent);
  }
  .profile-device-icon svg { width: 15px; height: 15px; }
  .profile-device strong { font-size: 12.5px; }
  .profile-session-revoke {
    color: var(--fail);
    border-color: color-mix(in srgb, var(--fail) 45%, var(--line));
    background: transparent;
    box-shadow: none;
  }
  .profile-session-revoke:hover { background: color-mix(in srgb, var(--fail) 9%, transparent); }
  .profile-session-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
  }

  @media (max-width: 1180px) {
    .profile-summary { grid-template-columns: 1fr; gap: 14px; }
    .profile-settings-grid { grid-template-columns: 1fr; }
    .profile-preferences { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
    .profile-preferences > .es-head { grid-column: 1 / -1; }
    .profile-preference-block + .profile-preference-block {
      margin-top: 0;
      padding-top: 0;
      padding-inline-start: 24px;
      border-top: 0;
      border-inline-start: 1px solid var(--line);
    }
  }

  @media (max-width: 860px) {
    .profile-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .profile-form-grid > .fld,
    .profile-form-grid > .profile-field-wide { grid-column: span 1; }
    .profile-preferences { display: block; }
    .profile-preference-block + .profile-preference-block {
      margin-top: 17px;
      padding-top: 17px;
      padding-inline-start: 0;
      border-top: 1px solid var(--line);
      border-inline-start: 0;
    }
  }

  @media (max-width: 680px) {
    .profile-summary-meta { grid-template-columns: 1fr; }
    .profile-form-grid { grid-template-columns: 1fr; }
    .profile-email-form { padding-inline-start: 0; }
    .profile-session-footer form { width: 100%; }
    .profile-session-footer .btn { width: 100%; justify-content: center; }
  }

  @media (max-width: 480px) {
    .profile-summary { padding: 15px; }
    .profile-avatar { width: 43px; height: 43px; font-size: 18px; }
    .profile-form-footer { justify-content: stretch; }
    .profile-form-footer .btn,
    .profile-inline-form > .btn,
    .profile-email-form > .btn { width: 100%; justify-content: center; }
  }

  /* ═══ Pages index: scan-first fleet management (2026-07-26) ═══ */
  .pages-index {
    width: min(100%, 1240px);
    margin-inline: 0 auto;
  }

  /* One compact operational strip instead of three competing hero cards. */
  .pages-index .pages-kpi-strip {
    grid-template-columns: minmax(150px, .7fr) minmax(180px, .9fr) minmax(360px, 1.55fr);
    gap: 0;
    overflow: hidden;
    margin-bottom: 12px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-2);
    background: var(--panel);
  }
  .pages-index .pages-kpi-strip .metric-card {
    min-height: 92px;
    padding: 13px 17px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .pages-index .pages-kpi-strip .metric-card + .metric-card { border-inline-start: 1px solid var(--line); }
  .pages-index .pages-kpi-strip .metric-card::before,
  .pages-index .pages-kpi-strip .metric-card::after { display: none; }
  .pages-index .pages-kpi-strip .metric-head { gap: 8px; }
  .pages-index .pages-kpi-strip .metric-icon { width: 27px; height: 27px; }
  .pages-index .pages-kpi-strip .metric-value { margin-top: auto; font-size: 27px; text-align: start; }
  .pages-index .pages-kpi-strip .sparkline { display: none; }
  .pages-index .pages-kpi-strip .seg-bar { height: 7px; margin-top: auto; }
  .pages-index .pages-kpi-strip .seg-legend { gap: 5px 14px; }

  /* Search and filters read as one toolbar, with less nested-card weight. */
  .pages-index .pages-filter-card {
    margin-bottom: 10px;
    padding: 12px 14px;
    border-color: var(--line);
  }
  .pages-index .pages-filter-card .ptb-search { gap: 9px; }
  .pages-index .pages-filter-card .search-field .input,
  .pages-index .pages-filter-card .acct-filter-btn { min-height: 40px; background: var(--panel); }
  .pages-index .pages-filter-card .filter-chips {
    flex-basis: 100%;
    gap: 6px;
    padding-top: 3px;
  }
  .pages-index .pages-filter-card .filter-chip {
    padding: 5px 9px;
    border-color: var(--line);
    background: color-mix(in srgb, var(--ctl) 72%, var(--panel));
    color: var(--dim);
  }
  .pages-index .pages-filter-card .filter-chip:hover {
    border-color: var(--blue);
    background: var(--ctl-hover);
    color: var(--text);
  }
  .pages-index .pages-filter-card .filter-chip.is-active,
  .pages-index .pages-filter-card .filter-chip.is-active:hover {
    border-color: transparent;
    background: linear-gradient(120deg, var(--navy), var(--accent-solid) 72%);
    color: #fff;
    box-shadow: 0 5px 14px -8px var(--blue-glow);
  }
  .pages-index .pages-filter-card .filter-chip.is-active b {
    color: #fff;
    opacity: .88;
  }
  .pages-index .pages-filter-card .pages-search-btn {
    min-width: 104px;
    background: linear-gradient(120deg, var(--navy), var(--accent-solid) 72%);
    color: #fff;
    box-shadow: 0 5px 16px -9px var(--blue-glow);
  }
  .pages-index .pages-filter-card .pages-search-btn:hover {
    background: linear-gradient(120deg, var(--navy), var(--accent-solid) 72%);
    color: #fff;
  }

  /* Bulk tools stay one calm command row until the user asks for them. */
  .pages-index .pages-bulk-card {
    margin-bottom: 14px;
    padding: 11px 14px;
    border-color: var(--line);
  }
  .pages-index .pages-bulk-card .ptb-fetch-head { min-height: 30px; }
  .pages-bulk-count {
    margin-inline-start: auto;
    padding: 3px 8px;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--panel-2) 55%, transparent);
    color: var(--dim);
    font: 600 10.5px var(--body);
  }
  .pages-index .pages-bulk-card .ptb-fetch-title { margin-inline-end: 0; }
  .pages-index .pages-bulk-card #fetchBody { padding-top: 2px; border-top: 1px solid var(--line); }
  .pages-index .pages-bulk-card .ptb-select,
  .pages-index .pages-bulk-card .ptb-acct {
    border-color: var(--line);
    background: color-mix(in srgb, var(--panel-2) 42%, transparent);
  }
  .pages-index .pages-bulk-card .ptb-method { margin-top: 0 !important; }
  .pages-index .pages-bulk-card .ptb-method-alert { margin: 0 !important; padding: 9px 11px; }
  .pages-index .pages-bulk-card .ptb-acct-list { max-height: 210px; }

  /* Cards prioritize identity → health → action and drop decorative nesting. */
  .pages-index .pages-card-grid { gap: 12px; }
  .pages-index .page-card {
    gap: 10px;
    min-height: 302px;
    padding: 13px;
    border-color: var(--line);
    box-shadow: 0 8px 24px -26px rgba(11, 39, 80, .7);
  }
  .pages-index .page-card::before,
  .pages-index .page-card::after { display: none; }
  .pages-index .page-card:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--blue) 42%, var(--line));
    box-shadow: 0 12px 28px -25px var(--blue-glow);
  }
  .pages-index .page-card .data-card-top { min-height: 25px; }
  .pages-index .page-card .data-avatar { width: 43px; height: 43px; font-size: 17px; box-shadow: none; }
  .pages-index .page-card .data-title { font-size: 14px; line-height: 1.3; }
  .pages-index .page-card .data-sub { margin-top: 2px; color: var(--dim); }
  .pages-index .page-card .data-stats {
    padding: 9px 0;
    border-width: 1px 0;
    border-radius: 0;
    background: transparent;
  }
  .pages-index .page-card .data-stat-num { font-size: 17px; }
  .pages-index .page-card .data-foot-meta { min-height: 24px; }
  .pages-index .page-card .data-uid { opacity: .62; }
  .pages-index .page-card .page-admin-warn {
    gap: 5px;
    min-height: 45px;
    padding: 8px 9px;
    border-width: 0 0 0 3px;
    border-radius: var(--r-1);
  }
  [dir="rtl"] .pages-index .page-card .page-admin-warn { border-width: 0 3px 0 0; }
  .pages-index .page-card .page-admin-warn-head { font-size: 11px; }
  .pages-index .page-card .page-admin-issues { gap: 4px; }
  .pages-index .page-card .admin-issue-chip {
    padding: 2px 6px;
    border-color: color-mix(in srgb, currentColor 28%, transparent);
    background: color-mix(in srgb, var(--panel) 82%, transparent);
    font-size: 10px;
  }
  .pages-index .page-card .page-admin-more { color: var(--dim); }
  .pages-index .page-card .data-card-actions {
    gap: 7px;
    padding-top: 10px;
    border-color: var(--line);
  }
  .pages-index .page-card .data-card-actions .btn { min-height: 34px; justify-content: center; }
  .pages-index .page-card .data-card-actions .btn-open,
  .pages-index .page-card .data-card-actions .btn-open:hover {
    background: var(--accent-solid);
    color: #fff;
  }
  .pages-index .page-card .data-card-actions .btn:disabled,
  .pages-index .page-card .data-card-actions .btn[disabled] {
    opacity: 1;
    background: color-mix(in srgb, var(--ctl) 68%, var(--panel));
    color: var(--dim);
    box-shadow: inset 0 0 0 1px var(--ctl-edge);
  }
  .pages-index .page-card .data-card-actions > a.btn-open { order: 2; }

  .pages-index + .pager,
  .pages-index .pager { margin-top: 14px; }

  @media (max-width: 1100px) {
    .pages-index .pages-kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pages-index .pages-kpi-strip .metric-card:last-child { grid-column: 1 / -1; border-inline-start: 0; border-top: 1px solid var(--line); }
  }

  @media (max-width: 720px) {
    .pages-index .pages-kpi-strip { grid-template-columns: 1fr; }
    .pages-index .pages-kpi-strip .metric-card + .metric-card {
      border-inline-start: 0;
      border-top: 1px solid var(--line);
    }
    .pages-index .pages-kpi-strip .metric-card:last-child { grid-column: auto; }
    .pages-index .pages-filter-card .acct-filter { width: 100%; }
    .pages-index .pages-filter-card .ptb-search > .btn { flex: 1 1 auto; justify-content: center; }
    .pages-index .pages-bulk-card .ptb-actions { width: 100%; margin-inline-start: 0; }
    .pages-index .pages-bulk-card .ptb-actions .btn { flex: 1 1 140px; }
  }

  /* Account filter popover: identity and health need separate rows at this width. */
  .pages-index .acct-filter-panel {
    width: min(410px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    max-height: min(470px, calc(100vh - 96px));
    inset-inline-start: auto;
    inset-inline-end: 0;
    z-index: 320;
    display: flex;
    flex-direction: column;
    background: var(--panel);
  }
  .pages-index .acct-filter-search {
    flex: none;
    padding: 9px;
    background: var(--panel);
  }
  .pages-index .acct-filter-search .input {
    width: 100%;
    height: 40px;
    background: color-mix(in srgb, var(--panel-2) 42%, var(--panel));
  }
  .pages-index .acct-filter-list {
    min-height: 0;
    max-height: min(360px, calc(100vh - 166px));
    padding: 4px 8px 8px;
    gap: 0;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }
  .pages-index .acct-filter-row {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 18px;
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 6px;
    align-items: center;
    min-height: 68px;
    padding: 10px 8px;
    border-radius: 0;
    overflow: hidden;
  }
  .pages-index .acct-filter-row + .acct-filter-row {
    border-block-start: 1px solid var(--line);
  }
  .pages-index .acct-filter-row-all {
    grid-template-rows: auto;
    min-height: 56px;
  }
  .pages-index .acct-filter-row .acct-row-avatar {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 36px;
    height: 36px;
  }
  .pages-index .acct-filter-row-all .acct-row-avatar { grid-row: 1; }
  .pages-index .acct-filter-row .acct-row-body {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
    overflow: hidden;
  }
  .pages-index .acct-filter-row .acct-row-name,
  .pages-index .acct-filter-row .acct-row-uid {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .pages-index .acct-filter-row .acct-row-name { flex: 1 1 auto; }
  .pages-index .acct-filter-row .acct-row-uid {
    flex: 0 1 46%;
    text-align: end;
    unicode-bidi: isolate;
  }
  .pages-index .acct-filter-row .acct-row-meta {
    grid-column: 2 / 4;
    grid-row: 2;
    min-width: 0;
    min-height: 20px;
    justify-content: flex-start;
    overflow: hidden;
  }
  .pages-index .acct-filter-row .acct-row-meta .chip {
    max-width: 100%;
    min-height: 20px;
    padding-inline: 7px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .pages-index .acct-filter-row .acct-row-check {
    grid-column: 3;
    grid-row: 1;
  }
  .pages-index .acct-filter-row-all .acct-row-check { grid-row: 1; }
  .pages-index .acct-filter-row:hover,
  .pages-index .acct-filter-row[aria-selected="true"] { border-radius: var(--r-1); }

  @media (max-width: 520px) {
    .pages-index .acct-filter-panel {
      width: calc(100vw - 32px);
      inset-inline-start: auto;
      inset-inline-end: 0;
    }
  }