:root {
      --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
      --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
      --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
      --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
      --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
      --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
      --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
      --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem;
      --color-bg: #f4f1eb; --color-surface: #fffaf0; --color-panel: #ffffff;
      --color-border: rgba(36, 30, 20, 0.10); --color-text: #201d18; --color-muted: #655f55;
      --color-faint: #a9a197; --color-accent: #0f6b5f; --color-accent-h: #0a5048;
      --color-good: #13795b; --color-bad: #b42318; --color-warn: #9a5b00;
      --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem;
      --shadow-sm: 0 1px 2px rgba(0,0,0,0.06); --shadow-md: 0 8px 28px rgba(46,35,18,0.09);
      --transition: 180ms cubic-bezier(0.16, 1, 0.3, 1); --font-body: 'Satoshi', system-ui, sans-serif;
    }
    @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
      --color-bg:#151411; --color-surface:#1d1b17; --color-panel:#22201b; --color-border:rgba(255,255,255,.10);
      --color-text:#e9e3d7; --color-muted:#aaa194; --color-faint:#776f64; --color-accent:#58b7a8; --color-accent-h:#7ecfc3;
      --color-good:#69d2ad; --color-bad:#ff8a80; --color-warn:#f5c06a;
    } }
    [data-theme="dark"] {
      --color-bg:#151411; --color-surface:#1d1b17; --color-panel:#22201b; --color-border:rgba(255,255,255,.10);
      --color-text:#e9e3d7; --color-muted:#aaa194; --color-faint:#776f64; --color-accent:#58b7a8; --color-accent-h:#7ecfc3;
      --color-good:#69d2ad; --color-bad:#ff8a80; --color-warn:#f5c06a;
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
    body { min-height: 100dvh; font-family: var(--font-body); font-size: var(--text-base); color: var(--color-text); background: var(--color-bg); line-height: 1.55; }
    canvas, svg { display: block; max-width: 100%; } button, select { font: inherit; color: inherit; } button { cursor: pointer; border: 0; }
    h1,h2,h3 { line-height: 1.15; text-wrap: balance; } p { max-width: 72ch; text-wrap: pretty; }
    :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: var(--radius-sm); }
    .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border-width:0; }
    @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }
    .shell { width: min(1280px, calc(100% - var(--space-4))); margin: 0 auto; padding: var(--space-6) 0 var(--space-10); }
    .topbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-4); margin-bottom:var(--space-6); }
    .eyebrow { color: var(--color-accent); font-size: var(--text-sm); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
    h1 { font-size: var(--text-2xl); margin-top: var(--space-1); }
    .sub { color: var(--color-muted); margin-top: var(--space-2); }
    .fx-note { margin-bottom: var(--space-4); padding: var(--space-3); border-radius: var(--radius-lg); background: var(--color-surface); border:1px solid var(--color-border); color:var(--color-muted); font-size:var(--text-sm); }
    .source-strip { display:grid; gap:var(--space-2); grid-template-columns:1fr; margin-bottom:var(--space-4); }
    .source-strip .src { display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-3); align-items:center; padding:var(--space-2) var(--space-3); border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-panel); font-size:var(--text-sm); }
    .source-strip .src b { font-weight:700; }
    .source-strip .src .tag { margin-left:auto; color:var(--color-muted); font-size:var(--text-xs); }
    .source-strip .src .ok { color:var(--color-good); font-weight:700; }
    .source-strip .src .warn { color:var(--color-warn); font-weight:700; }
    .source-strip .src .missing { color:var(--color-bad); font-weight:700; }
    .actions { display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:center; }
    .control { display:flex; align-items:center; gap:var(--space-2); background:var(--color-panel); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:0 var(--space-3); min-height:48px; }
    .control label { font-size:var(--text-sm); color:var(--color-muted); font-weight:700; }
    .control select { border:0; background:transparent; min-height:42px; font-weight:700; }
    input, textarea { width:100%; border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-panel); color:var(--color-text); padding:var(--space-3); font:inherit; }
    textarea { min-height:120px; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:var(--text-sm); }
    .import-grid { display:grid; gap:var(--space-3); margin-top:var(--space-3); }
    .import-row { display:grid; gap:var(--space-3); grid-template-columns:1fr; }
    .btn { min-height: 48px; padding: 0 var(--space-4); border-radius: var(--radius-md); background: var(--color-accent); color: #fff; font-weight: 700; transition: transform var(--transition), background var(--transition); }
    .btn.secondary { background: var(--color-panel); color: var(--color-text); border: 1px solid var(--color-border); }
    .btn:active { transform: translateY(1px); } .btn:hover { background: var(--color-accent-h); } .btn.secondary:hover { background: var(--color-surface); }
    .status { margin-bottom: var(--space-4); color: var(--color-muted); font-size: var(--text-sm); }
    .quality-banner { display:grid; gap:var(--space-3); margin-bottom:var(--space-4); padding:var(--space-4); border-radius:var(--radius-xl); border:1px solid var(--color-border); background:var(--color-panel); box-shadow:var(--shadow-sm); }
    .quality-banner.ok { border-color: color-mix(in srgb, var(--color-good) 45%, var(--color-border)); background: color-mix(in srgb, var(--color-good) 8%, var(--color-panel)); }
    .quality-banner.warn { border-color: color-mix(in srgb, var(--color-warn) 55%, var(--color-border)); background: color-mix(in srgb, var(--color-warn) 10%, var(--color-panel)); }
    .quality-banner.danger { border-color: color-mix(in srgb, var(--color-bad) 55%, var(--color-border)); background: color-mix(in srgb, var(--color-bad) 10%, var(--color-panel)); }
    .quality-top { display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:center; justify-content:space-between; }
    .quality-title { font-weight:800; font-size:var(--text-lg); }
    .badge { display:inline-flex; align-items:center; min-height:32px; padding:0 var(--space-3); border-radius:999px; font-size:var(--text-sm); font-weight:800; background:var(--color-surface); border:1px solid var(--color-border); }
    .quality-grid { display:grid; gap:var(--space-2); grid-template-columns:1fr; color:var(--color-muted); font-size:var(--text-sm); }
    .cards { display:grid; grid-template-columns: 1fr; gap: var(--space-4); margin-bottom: var(--space-6); }
    .card, .chart-card, .panel { background: var(--color-panel); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); }
    .card { padding: var(--space-5, 1.25rem); }
    .card h2 { font-size: var(--text-base); color: var(--color-muted); font-weight: 700; }
    .price { font-size: clamp(1.75rem, 3vw, var(--text-xl)); line-height:1; font-weight: 800; margin-top: var(--space-2); }
    .meta { color: var(--color-muted); font-size: var(--text-sm); margin-top: var(--space-2); line-height:1.35; }
    .stats { display:flex; gap:var(--space-2); margin-top: var(--space-3); }
    .pill { flex:1; min-width:0; padding: var(--space-2); background: var(--color-surface); border-radius: var(--radius-md); border: 1px solid var(--color-border); }
    .pill span { display:block; font-size:var(--text-xs); color:var(--color-muted); }
    .pill b { display:block; font-size: var(--text-sm); line-height:1.2; } .pos { color: var(--color-good); } .neg { color: var(--color-bad); }
    .chart-grid { display:grid; grid-template-columns: 1fr; gap: var(--space-4); }
    .chart-card { padding: var(--space-4); min-height: 380px; }
    .chart-head { display:flex; justify-content:space-between; gap:var(--space-3); align-items:flex-start; margin-bottom:var(--space-4); }
    .chart-head h2 { font-size: var(--text-lg); } .chart-wrap { height: 300px; }
    .panel { margin-top: var(--space-4); padding: var(--space-4); }
    .panel-grid { display:grid; grid-template-columns:1fr; gap:var(--space-4); margin-top:var(--space-4); }
    .signal-list { display:grid; gap:var(--space-3); margin-top:var(--space-3); }
    .signal-item { padding:var(--space-3); border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface); }
    .signal-item strong { display:block; font-size:var(--text-lg); }
    .mini-grid { display:grid; gap:var(--space-3); grid-template-columns:1fr; }
    .brief-list { display:grid; gap:var(--space-2); padding-left:var(--space-4); color:var(--color-muted); }
    .table-wrap { overflow:auto; max-width:100%; min-width:0; margin-top:var(--space-3); border:1px solid var(--color-border); border-radius:var(--radius-lg); }
    .panel, .chart-card, .tab-page, .chart-grid, .panel-grid { min-width:0; }
    table { width:100%; max-width:100%; border-collapse:collapse; font-size:var(--text-sm); }
    th, td { padding:var(--space-3); text-align:left; border-bottom:1px solid var(--color-border); white-space:nowrap; }
    th { color:var(--color-muted); background:var(--color-surface); font-weight:700; }
    tr:last-child td { border-bottom:0; }
    .notes { display:grid; gap: var(--space-2); color: var(--color-muted); font-size: var(--text-sm); padding-left: var(--space-4); }
    .error { color: var(--color-bad); background: color-mix(in srgb, var(--color-bad) 10%, transparent); border: 1px solid color-mix(in srgb, var(--color-bad) 35%, transparent); padding: var(--space-3); border-radius: var(--radius-md); }
    /* Decision control sections */
    .blocked-banner { display:grid; gap:var(--space-3); margin-bottom:var(--space-4); padding:var(--space-4); border-radius:var(--radius-xl); border:2px solid var(--color-bad); background: color-mix(in srgb, var(--color-bad) 10%, var(--color-panel)); box-shadow:var(--shadow-sm); }
    .blocked-banner .banner-title { font-size:var(--text-lg); font-weight:800; color:var(--color-bad); }
    .blocked-banner .banner-reasons { display:grid; gap:var(--space-1); color:var(--color-muted); font-size:var(--text-sm); }
    .blocked-banner .banner-allowed { margin-top:var(--space-2); font-weight:700; }
    .guard-summary { display:grid; gap:var(--space-2); margin-bottom:var(--space-4); }
    .guard-row { display:flex; align-items:flex-start; gap:var(--space-2); padding:var(--space-2) var(--space-3); border-radius:var(--radius-md); font-size:var(--text-sm); }
    .guard-row.triggered { background:color-mix(in srgb, var(--color-bad) 10%, var(--color-surface)); }
    .guard-row.cleared { background:color-mix(in srgb, var(--color-good) 10%, var(--color-surface)); }
    .guard-icon { flex-shrink:0; width:1.5rem; text-align:center; }
    .guard-name { font-weight:700; }
    .guard-detail { color:var(--color-muted); }
    .risk-badge { display:inline-block; padding:var(--space-1) var(--space-3); border-radius:999px; font-weight:800; font-size:var(--text-sm); }
    .risk-badge.high { background:color-mix(in srgb, var(--color-bad) 25%, var(--color-surface)); color:var(--color-bad); }
    .risk-badge.elevated { background:color-mix(in srgb, var(--color-warn) 25%, var(--color-surface)); color:var(--color-warn); }
    .risk-badge.caution { background:color-mix(in srgb, var(--color-warn) 15%, var(--color-surface)); color:var(--color-warn); }
    .risk-badge.normal { background:color-mix(in srgb, var(--color-good) 20%, var(--color-surface)); color:var(--color-good); }
    .freshness-grid { display:grid; gap:var(--space-2); grid-template-columns:1fr 1fr; }
    .freshness-item { padding:var(--space-2); border:1px solid var(--color-border); border-radius:var(--radius-md); font-size:var(--text-sm); }
    .freshness-item .label { color:var(--color-muted); font-size:var(--text-xs); }
    .freshness-item .status { font-weight:700; }
    .freshness-item .status.fresh { color:var(--color-good); }
    .freshness-item .status.delayed { color:var(--color-warn); }
    .freshness-item .status.stale { color:var(--color-bad); }
    .freshness-item .status.missing { color:var(--color-bad); }
    .freshness-item .status.proxy { color:var(--color-warn); }
    .bt-quality-grid { display:grid; gap:var(--space-3); grid-template-columns:repeat(auto-fit, minmax(120px,1fr)); }
    .bt-metric { text-align:center; padding:var(--space-2); border:1px solid var(--color-border); border-radius:var(--radius-md); }
    .bt-metric .value { font-size:var(--text-lg); font-weight:700; }
    .bt-metric .value.ok { color:var(--color-good); }
    .bt-metric .value.warn { color:var(--color-warn); }
    .bt-metric .value.danger { color:var(--color-bad); }
    .bt-metric .label { font-size:var(--text-xs); color:var(--color-muted); }
    .score-breakdown { display:grid; gap:var(--space-2); }
    .score-row { display:flex; justify-content:space-between; padding:var(--space-1) 0; font-size:var(--text-sm); border-bottom:1px solid var(--color-border); }
    .score-row:last-child { border-bottom:0; font-weight:700; }
    .history-table-wrap { max-height:400px; overflow:auto; }
    .history-row { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:var(--space-2); padding:var(--space-2); border-bottom:1px solid var(--color-border); font-size:var(--text-sm); align-items:center; }
    .history-row:hover { background:var(--color-surface); }
    .history-header { font-weight:700; color:var(--color-muted); }
    .override-panel { margin-top:var(--space-3); padding:var(--space-3); border:1px solid var(--color-warn); border-radius:var(--radius-md); background:color-mix(in srgb, var(--color-warn) 8%, var(--color-surface)); }
    .collapsible { cursor:pointer; user-select:none; }
    .collapsible:hover { opacity:.8; }
    .exposure-grid { display:grid; gap:var(--space-2); grid-template-columns:1fr 1fr; }
    .mops-status-panel { display:grid; gap:var(--space-2); padding:var(--space-3); border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface); margin-top:var(--space-2); }
    @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
    .skeleton { min-height: 140px; background: linear-gradient(90deg, var(--color-panel) 25%, rgba(127,127,127,.10) 50%, var(--color-panel) 75%); background-size: 200% 100%; animation: shimmer 1.5s ease-in-out infinite; }
    @media (min-width: 760px) { .mini-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } .chart-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr); } .panel-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } .quality-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .import-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } .shell { padding-top: var(--space-8); } .source-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ══ Fuel Command Center layout (v2) ═══════════════════════════════════════ */
.app { display:grid; grid-template-columns: 232px minmax(0,1fr); min-height:100dvh; }
.sidebar { position:sticky; top:0; height:100dvh; display:flex; flex-direction:column; gap:var(--space-4); padding:var(--space-5) var(--space-3); background:linear-gradient(180deg, color-mix(in srgb, var(--color-surface) 92%, #000), var(--color-surface)); border-right:1px solid var(--color-border); overflow-y:auto; }
.brand { display:flex; align-items:center; gap:var(--space-3); min-height:48px; padding:0 var(--space-2) var(--space-3); border-bottom:1px solid var(--color-border); font-size:var(--text-base); font-weight:700; letter-spacing:.01em; }
.brand-mark { display:grid; place-items:center; width:34px; height:34px; border-radius:12px; color:var(--color-accent); background:color-mix(in srgb, var(--color-accent) 13%, transparent); box-shadow:0 0 18px color-mix(in srgb, var(--color-accent) 22%, transparent); }
.brand-copy { display:grid; line-height:1.08; }
.brand-copy > span { color:var(--color-muted); font-size:var(--text-xs); font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.brand b { color:var(--color-text); font-weight:800; }
.nav { display:grid; gap:6px; }
.nav-section-label { padding:0 var(--space-2) var(--space-1); color:var(--color-muted); font-size:var(--text-xs); font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.nav-btn { display:flex; align-items:center; gap:var(--space-2); width:100%; min-height:46px; padding:0 var(--space-2); border:1px solid transparent; border-radius:var(--radius-lg); background:transparent; color:var(--color-muted); font-weight:750; font-size:var(--text-sm); text-align:left; text-decoration:none; transition:background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition); }
.nav-icon { display:grid; place-items:center; width:30px; height:30px; border-radius:10px; flex:0 0 30px; color:var(--color-muted); background:color-mix(in srgb, var(--color-panel) 72%, transparent); border:1px solid color-mix(in srgb, var(--color-border) 72%, transparent); }
.nav-btn:hover { background:var(--color-panel); color:var(--color-text); border-color:var(--color-border); }
.nav-btn:hover .nav-icon { color:var(--color-text); }
.nav-btn.active { background:linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 18%, var(--color-panel)), color-mix(in srgb, var(--color-panel) 86%, transparent)); color:var(--color-text); border-color:color-mix(in srgb, var(--color-accent) 34%, var(--color-border)); box-shadow:inset 3px 0 0 var(--color-accent), 0 12px 28px color-mix(in srgb, var(--color-accent) 10%, transparent); }
.nav-btn.active .nav-icon { color:var(--color-accent); background:color-mix(in srgb, var(--color-accent) 13%, transparent); border-color:color-mix(in srgb, var(--color-accent) 35%, var(--color-border)); }
.side-health { margin-top:auto; display:grid; gap:var(--space-2); padding:var(--space-3); border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-panel); }
.side-health-title { font-size:var(--text-xs); font-weight:800; letter-spacing:.08em; color:var(--color-muted); }
.side-health-list { display:grid; gap:var(--space-1); font-size:var(--text-xs); color:var(--color-muted); }
.side-health-list .hrow { display:flex; align-items:center; gap:var(--space-2); }
.side-health-list .dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.side-health-list .dot.ok { background:var(--color-good); box-shadow:0 0 6px var(--color-good); }
.side-health-list .dot.warn { background:var(--color-warn); box-shadow:0 0 6px var(--color-warn); }
.side-health-list .dot.missing { background:var(--color-bad); box-shadow:0 0 6px var(--color-bad); }
.side-foot { display:grid; gap:var(--space-1); }
.btn.block { width:100%; justify-content:center; }
.content { padding: var(--space-6) var(--space-6) var(--space-10); min-width:0; }
.tab-rail { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:var(--space-3) 0 var(--space-4); padding:6px; border:1px solid var(--color-border); border-radius:var(--radius-xl); background:color-mix(in srgb, var(--color-panel) 82%, transparent); box-shadow:var(--shadow-sm); }
.tab-btn { min-height:38px; padding:0 var(--space-3); border:1px solid transparent; border-radius:999px; color:var(--color-muted); background:transparent; font-size:var(--text-sm); font-weight:800; letter-spacing:.01em; transition:background var(--transition), color var(--transition), border-color var(--transition); }
.tab-btn:hover { color:var(--color-text); background:var(--color-surface); border-color:var(--color-border); }
.tab-btn.active { color:var(--color-text); background:color-mix(in srgb, var(--color-accent) 16%, var(--color-surface)); border-color:color-mix(in srgb, var(--color-accent) 32%, var(--color-border)); box-shadow:0 8px 20px color-mix(in srgb, var(--color-accent) 10%, transparent); }
.hero { margin-bottom: var(--space-4); }
.tab-page { display:none; animation: tabIn 220ms cubic-bezier(.16,1,.3,1); }
.tab-page.active { display:block; }
@keyframes tabIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.cards { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.card { position:relative; overflow:hidden; }
.card .spark { display:block; width:100% !important; height:42px !important; max-height:42px !important; min-height:42px !important; margin-top:var(--space-2); }
.card .delta { display:inline-flex; align-items:center; gap:2px; font-size:var(--text-xs); font-weight:800; padding:1px 7px; border-radius:999px; }
.card .delta.up { color:var(--color-good); background:color-mix(in srgb, var(--color-good) 14%, var(--color-panel)); }
.card .delta.down { color:var(--color-bad); background:color-mix(in srgb, var(--color-bad) 14%, var(--color-panel)); }
.card .delta.flat { color:var(--color-muted); background:var(--color-surface); }
.notes-panel { margin-top: var(--space-6); }
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position:static; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center; padding:var(--space-3) var(--space-4); border-right:0; border-bottom:1px solid var(--color-border); }
  .nav { display:flex; order:3; width:100%; overflow-x:auto; gap:6px; }
  .nav-section-label { display:none; }
  .nav-btn { min-height:40px; white-space:nowrap; width:auto; padding-right:var(--space-3); }
  .nav-icon { width:28px; height:28px; flex-basis:28px; }
  .side-health { display:none; }
  .side-foot { display:none; }
  .content { padding: var(--space-4) var(--space-4) var(--space-8); }
}

/* ══ Fuel Command polish: graphics + motion (v9) ══════════════════════════ */
:root {
  --fc-glow: color-mix(in srgb, var(--color-accent) 55%, transparent);
  --fc-glow-soft: color-mix(in srgb, var(--color-accent) 16%, transparent);
}
body::before {
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1100px 520px at 82% -8%, var(--fc-glow-soft), transparent 62%),
    radial-gradient(820px 460px at -12% 108%, var(--fc-glow-soft), transparent 58%),
    var(--color-bg);
}
body::after {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.55;
  background-image:
    linear-gradient(var(--color-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(900px 620px at 60% 6%, #000 10%, transparent 78%);
  -webkit-mask-image:radial-gradient(900px 620px at 60% 6%, #000 10%, transparent 78%);
  animation: gridDrift 46s linear infinite;
}
@keyframes gridDrift { to { background-position: 44px 44px, 44px 44px; } }

.topbar { position:relative; overflow:hidden; }
.topbar::after {
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg, transparent, var(--fc-glow) 30%, var(--fc-glow) 70%, transparent);
  opacity:.8;
}
.command-graphic {
  position:relative; width:132px; height:132px; flex:0 0 132px; margin-left:auto;
  display:grid; place-items:center;
}
.radar-core {
  width:52px; height:52px; border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, var(--color-accent) 0 18%, transparent 62%),
    var(--color-panel);
  border:1px solid var(--fc-glow);
  box-shadow:0 0 34px var(--fc-glow-soft), inset 0 0 18px var(--fc-glow-soft);
  position:relative; z-index:2;
}
.radar-core::before, .radar-core::after {
  content:""; position:absolute; inset:0; border-radius:50%;
}
.radar-core::before {
  border:1px dashed color-mix(in srgb, var(--color-accent) 65%, transparent);
  animation: spin 9s linear infinite;
}
.radar-core::after {
  border-left:3px solid var(--color-accent); border-top:3px solid transparent; border-right:3px solid transparent; border-bottom:3px solid transparent;
  animation: spin 2.6s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }
.orbit {
  position:absolute; border-radius:50%; border:1px solid var(--fc-glow-soft);
  animation: spin var(--orbit-t, 14s) linear infinite;
}
.orbit::before { content:""; position:absolute; top:-3px; left:calc(50% - 3px); width:6px; height:6px; border-radius:50%; background:var(--color-accent); box-shadow:0 0 10px var(--fc-glow); }
.orbit-a { inset:6px; --orbit-t:14s; }
.orbit-b { inset:22px; --orbit-t:10s; animation-direction:reverse; }
.flow-line {
  position:absolute; right:-14px; width:64px; height:2px;
  background:linear-gradient(90deg, transparent, var(--fc-glow), transparent);
  animation: flowPulse 2.4s ease-in-out infinite;
}
@keyframes flowPulse { 0%,100% { opacity:.25; transform:translateX(10px) scaleX(.6);} 50% { opacity:1; transform:translateX(-4px) scaleX(1.05);} }

.app { animation: appIn .5s cubic-bezier(.16,1,.3,1); }
@keyframes appIn { from { opacity:0; } to { opacity:1; } }
.nav-btn, .tab-btn { position:relative; }
.nav-btn.active::after {
  content:""; position:absolute; inset:auto 0 -1px 0; height:1px; opacity:.6;
  background:linear-gradient(90deg, transparent, var(--fc-glow), transparent);
}
.tab-rail { position:relative; overflow:hidden; }
.tab-rail::after {
  content:""; position:absolute; inset:auto 0 0 0; height:1px;
  background:linear-gradient(90deg, transparent, var(--fc-glow) 30%, var(--fc-glow) 70%, transparent); opacity:.7;
}
.tab-btn.active::before {
  content:""; position:absolute; left:50%; bottom:-3px; width:14px; height:3px; border-radius:99px;
  background:var(--color-accent); transform:translateX(-50%);
  box-shadow:0 0 12px var(--fc-glow);
  animation: dotIn 220ms cubic-bezier(.16,1,.3,1);
}
@keyframes dotIn { from { transform:translateX(-50%) scale(.2); opacity:0;} to { transform:translateX(-50%) scale(1); opacity:1;} }

.card, .chart-card, .panel, .source-strip .src, .quality-banner, .blocked-banner, .side-health, .wf-filters, .main-panel, .login-card {
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.card:hover, .chart-card:hover, .panel:hover {
  transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--color-accent) 28%, var(--color-border));
  box-shadow:0 18px 44px color-mix(in srgb, var(--color-accent) 10%, transparent);
}
.card::before, .chart-card::before, .panel::before {
  content:""; position:absolute; top:0; left:0; right:0; height:2px; opacity:0;
  background:linear-gradient(90deg, transparent, var(--fc-glow), transparent);
  transition:opacity var(--transition);
}
.card:hover::before, .chart-card:hover::before, .panel:hover::before { opacity:1; }
.card { position:relative; }
.quality-banner, .blocked-banner { position:relative; }
.quality-banner::before, .blocked-banner::before {
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px; border-radius:var(--radius-xl) 0 0 var(--radius-xl);
}
.quality-banner.ok::before { background:var(--color-good); box-shadow:0 0 16px color-mix(in srgb, var(--color-good) 60%, transparent); }
.quality-banner.warn::before { background:var(--color-warn); box-shadow:0 0 16px color-mix(in srgb, var(--color-warn) 60%, transparent); }
.quality-banner.danger::before { background:var(--color-bad); box-shadow:0 0 16px color-mix(in srgb, var(--color-bad) 60%, transparent); }
.blocked-banner::before { background:var(--color-bad); box-shadow:0 0 16px color-mix(in srgb, var(--color-bad) 60%, transparent); }
.brand-mark { animation: brandGlow 3.6s ease-in-out infinite; }
@keyframes brandGlow { 0%,100% { box-shadow:0 0 18px var(--fc-glow-soft);} 50% { box-shadow:0 0 30px var(--fc-glow);} }
.status { display:inline-flex; align-items:center; gap:var(--space-2); }
.status::before {
  content:""; width:9px; height:9px; border-radius:50%; background:var(--color-good);
  box-shadow:0 0 12px color-mix(in srgb, var(--color-good) 70%, transparent);
  animation: statusBlink 2.2s ease-in-out infinite;
}
@keyframes statusBlink { 0%,100% { opacity:1;} 50% { opacity:.45;} }
.badge, .risk-badge { animation: none; }
.skeleton { position:relative; overflow:hidden; background:var(--color-surface); }
.skeleton::after {
  content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-accent) 12%, transparent), transparent);
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer { to { transform:translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  body::after, .radar-core::before, .radar-core::after, .orbit, .flow-line, .brand-mark, .status::before, .skeleton::after { animation:none !important; }
  .card:hover, .chart-card:hover, .panel:hover { transform:none; }
}