/* Scanner Portal - design tokens (shared with the Tracking Panel)
   Canvas is calm and cool; color only carries meaning (status), near-black for the data people read. */
:root {
  --bg:#f3f5f9; --card:#ffffff; --line:#e3e8ef; --line2:#cbd3de; --row:#f8fafc; --row-h:#eef3fb;
  --ink:#0b1220; --ink2:#2b3648; --muted:#5f6b7d; --faint:#8e99ab;
  --blue:#2f5bea; --blue-h:#2449c7; --blue-soft:#e8eeff; --blue-ink:#1f3fb8;
  --teal:#0f9d8a; --teal-soft:#d8f5ef; --teal-ink:#0b7a6b;
  --amber:#d98a0b; --amber-soft:#fdf1d6; --amber-ink:#9a5b05;
  --red:#d92d2d; --red-soft:#fde8e8; --red-ink:#b31f1f;
  --green:#1e9e5c; --green-soft:#dcf5e7; --green-ink:#15764a;
  --side:#0b1326; --side-2:#15203a; --side-3:#20304f; --side-text:#b7c2d9; --side-faint:#7d8aa6;
  --radius:14px; --radius-sm:9px; --radius-xs:6px;
  --shadow-1:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
  --shadow-2:0 8px 24px rgba(16,24,40,.12), 0 2px 6px rgba(16,24,40,.06);
  --shadow-3:0 24px 60px rgba(10,15,30,.28);
  --ease-out:cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out:cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer:cubic-bezier(0.32, 0.72, 0, 1);
  --t-press:120ms; --t-fast:160ms; --t-ui:220ms; --t-drawer:320ms;
  --safe-b:env(safe-area-inset-bottom, 0px); --safe-t:env(safe-area-inset-top, 0px);
  --surface:#ffffff; --surface2:#fafbfd; --soft:#eef1f6; --soft2:#f1f3f7; --th:#fbfcfd; --hover:#f3f5f9;
  --red-line:#f1bcbc; --amber-line:#f5dfae; --green-line:#bfe8d0; --red-soft2:#fff7f7; --amber-soft2:#fffaf0;
  --glow1:#dfe7ff; --glow2:#d8f5ef; --tab-on-bg:#0b1220; --tab-on-ink:#ffffff; --code-bg:#0f1726;
  color-scheme:light;
}
/* dark theme - same roles, re-tuned for a dark canvas */
:root[data-theme="dark"] {
  --bg:#0a0e16; --card:#111723; --surface:#111723; --surface2:#151c2a; --soft:#1b2333; --soft2:#182030; --th:#131a27; --hover:#182131;
  --line:#222b3b; --line2:#2f3a4e; --row:#131a26; --row-h:#192335;
  --ink:#e9eef7; --ink2:#c4cddc; --muted:#8e9ab0; --faint:#68748a;
  --blue:#5b7cfa; --blue-h:#6d8bff; --blue-soft:rgba(91,124,250,.16); --blue-ink:#a3b8ff;
  --teal:#22b8a4; --teal-soft:rgba(34,184,164,.15); --teal-ink:#6ad8c8;
  --amber:#e9a23b; --amber-soft:rgba(233,162,59,.15); --amber-ink:#f3c47a;
  --red:#ef5350; --red-soft:rgba(239,83,80,.16); --red-ink:#ff9a97;
  --green:#2fbf75; --green-soft:rgba(47,191,117,.15); --green-ink:#7fdcab;
  --red-line:rgba(239,83,80,.35); --amber-line:rgba(233,162,59,.35); --green-line:rgba(47,191,117,.35); --red-soft2:rgba(239,83,80,.07); --amber-soft2:rgba(233,162,59,.07);
  --glow1:rgba(91,124,250,.18); --glow2:rgba(34,184,164,.12); --tab-on-bg:#e9eef7; --tab-on-ink:#0a0e16; --code-bg:#070a10;
  --side:#070a11; --side-2:#0f1522; --side-3:#1b2436;
  --shadow-1:0 1px 2px rgba(0,0,0,.3); --shadow-2:0 8px 24px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.3); --shadow-3:0 24px 60px rgba(0,0,0,.6);
  color-scheme:dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#0a0e16; --card:#111723; --surface:#111723; --surface2:#151c2a; --soft:#1b2333; --soft2:#182030; --th:#131a27; --hover:#182131;
    --line:#222b3b; --line2:#2f3a4e; --row:#131a26; --row-h:#192335;
    --ink:#e9eef7; --ink2:#c4cddc; --muted:#8e9ab0; --faint:#68748a;
    --blue:#5b7cfa; --blue-h:#6d8bff; --blue-soft:rgba(91,124,250,.16); --blue-ink:#a3b8ff;
    --teal:#22b8a4; --teal-soft:rgba(34,184,164,.15); --teal-ink:#6ad8c8;
    --amber:#e9a23b; --amber-soft:rgba(233,162,59,.15); --amber-ink:#f3c47a;
    --red:#ef5350; --red-soft:rgba(239,83,80,.16); --red-ink:#ff9a97;
    --green:#2fbf75; --green-soft:rgba(47,191,117,.15); --green-ink:#7fdcab;
    --red-line:rgba(239,83,80,.35); --amber-line:rgba(233,162,59,.35); --green-line:rgba(47,191,117,.35); --red-soft2:rgba(239,83,80,.07); --amber-soft2:rgba(233,162,59,.07);
    --glow1:rgba(91,124,250,.18); --glow2:rgba(34,184,164,.12); --tab-on-bg:#e9eef7; --tab-on-ink:#0a0e16; --code-bg:#070a10;
    --side:#070a11; --side-2:#0f1522; --side-3:#1b2436;
    --shadow-1:0 1px 2px rgba(0,0,0,.3); --shadow-2:0 8px 24px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.3); --shadow-3:0 24px 60px rgba(0,0,0,.6);
    color-scheme:dark;
  }
}
* { box-sizing:border-box; }
html { -webkit-tap-highlight-color:transparent; -webkit-text-size-adjust:100%; overscroll-behavior:none; }
html, body { margin:0; height:100%; }
body { font:14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; font-feature-settings:"tnum" 1, "cv11" 1, "ss01" 1; }
.hidden { display:none !important; }
a { color:var(--blue); text-decoration:none; }
h1 { font-size:24px; line-height:1.15; margin:0; letter-spacing:-0.025em; font-weight:750; color:var(--ink); }
h2 { font-size:15px; margin:0; letter-spacing:-0.01em; font-weight:650; color:var(--ink); display:flex; align-items:center; gap:8px; }
.muted { color:var(--muted); } .faint { color:var(--faint); } .faint2 { color:var(--side-faint); } .small { font-size:12px; } .tiny { font-size:11.5px; } .nowrap { white-space:nowrap; }
.mono { font-family:ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; font-size:12.5px; letter-spacing:0; color:var(--ink2); }
svg.i { width:1.15em; height:1.15em; flex:none; vertical-align:-0.22em; }
.hIco { display:inline-grid; place-items:center; width:26px; height:26px; border-radius:7px; background:var(--blue-soft); color:var(--blue-ink); }
.hIco svg { width:15px; height:15px; vertical-align:0; } .hIco.warn { background:var(--amber-soft); color:var(--amber-ink); } .hIco.red { background:var(--red-soft); color:var(--red-ink); }

/* ---------- layout ---------- */
.shell { display:grid; grid-template-columns:244px 1fr; min-height:100dvh; }
.side { background:linear-gradient(180deg, #0e1a33 0%, var(--side) 38%); color:var(--side-text); display:flex; flex-direction:column; padding:calc(16px + var(--safe-t)) 12px calc(14px + var(--safe-b)); position:sticky; top:0; height:100dvh; border-right:1px solid rgba(255,255,255,.04); }
.brand { display:flex; align-items:center; gap:10px; color:#fff; font-weight:700; font-size:15px; letter-spacing:-0.01em; padding:6px 10px 20px; }
.logo { display:inline-grid; place-items:center; width:32px; height:32px; border-radius:9px; background:linear-gradient(135deg,#6b8cff 0%, #2f5bea 60%, #1ea8a0 140%); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 4px 12px rgba(47,91,234,.35); }
.logo svg { width:18px; height:18px; vertical-align:0; }
.logo.lg { width:52px; height:52px; border-radius:14px; } .logo.lg svg { width:28px; height:28px; }
.side nav { display:flex; flex-direction:column; gap:3px; }
.side nav a { position:relative; display:flex; align-items:center; gap:11px; color:var(--side-text); padding:9px 12px; border-radius:var(--radius-sm); font-weight:500; font-size:13.5px; transition:background var(--t-fast) ease, color var(--t-fast) ease, transform var(--t-press) var(--ease-out); user-select:none; -webkit-user-select:none; touch-action:manipulation; }
.side nav a .ico { display:inline-grid; place-items:center; width:20px; height:20px; opacity:.8; } .side nav a .ico svg { width:17px; height:17px; vertical-align:0; }
.side nav a em { margin-left:auto; font-style:normal; font-size:11px; font-weight:650; background:var(--side-3); color:#fff; padding:1px 7px; border-radius:10px; min-width:22px; text-align:center; font-variant-numeric:tabular-nums; }
.side nav a em:empty { display:none; } .side nav a em.red { background:var(--red); box-shadow:0 0 0 3px rgba(217,45,45,.18); }
.side nav a.active { background:rgba(255,255,255,.08); color:#fff; } .side nav a.active .ico { opacity:1; color:#8fb0ff; }
.side nav a.active::before { content:""; position:absolute; left:-12px; top:9px; bottom:9px; width:3px; border-radius:0 3px 3px 0; background:linear-gradient(180deg,#6b8cff,#1ea8a0); }
.side nav a:active { transform:scale(0.98); }
.sideFoot { margin-top:auto; padding:14px 6px 0; font-size:12px; border-top:1px solid rgba(255,255,255,.07); }
.meRow { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.avatar { display:inline-grid; place-items:center; width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,#3b6cff,#1ea8a0); color:#fff; font-weight:700; font-size:12px; letter-spacing:.02em; flex:none; }
.avatar.sm { width:24px; height:24px; font-size:10px; }
.meName { color:#fff; font-weight:600; font-size:13px; line-height:1.2; }
.sideLinks { display:flex; gap:4px; margin-bottom:10px; }
.sideLinks a { display:inline-flex; align-items:center; gap:6px; color:var(--side-text); padding:5px 8px; border-radius:var(--radius-xs); flex:1; transition:background var(--t-fast) ease, color var(--t-fast) ease; }
.sideLinks svg { width:14px; height:14px; vertical-align:0; opacity:.8; }
.dataAge { display:flex; align-items:center; gap:7px; color:var(--side-faint); font-size:11.5px; padding:0 8px; }
.dataAge .dot { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(30,158,92,.22); }
.dataAge.old .dot { background:var(--amber); box-shadow:0 0 0 3px rgba(217,138,11,.25); }
.content { min-width:0; padding:26px 30px calc(60px + var(--safe-b)); }
.page.enter { animation:pageIn var(--t-ui) var(--ease-out); }
@keyframes pageIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
.pageHead { margin-bottom:18px; } .pageHead p { margin:4px 0 0; font-size:13.5px; }
.secTitle { margin:4px 0 10px; font-size:13px; text-transform:none; letter-spacing:0; color:var(--muted); font-weight:600; }

.stale { display:flex; align-items:center; gap:8px; background:var(--amber-soft); color:var(--amber-ink); padding:9px 14px; border-radius:var(--radius-sm); margin-bottom:14px; font-size:13px; font-weight:500; border:1px solid var(--amber-line); }

/* ---------- cards & tables ---------- */
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; margin-bottom:16px; box-shadow:var(--shadow-1); }
.cardHead { display:flex; align-items:center; gap:12px; margin-bottom:12px; } .cardHead .muted { margin-left:auto; font-size:12.5px; }
.toolbar { display:flex; align-items:center; gap:12px; margin-bottom:12px; flex-wrap:wrap; } .toolbar .count { margin-left:auto; font-size:12.5px; font-variant-numeric:tabular-nums; }
.searchBox { position:relative; flex:0 1 380px; min-width:200px; } .searchBox.grow { flex:1 1 320px; }
.searchBox svg { position:absolute; left:11px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--faint); pointer-events:none; }
.searchBox input.search { padding-left:34px; }
.tableWrap { overflow:auto; margin:0 -18px -16px; padding:0 0 0; overscroll-behavior-x:contain; border-top:1px solid var(--line); border-radius:0 0 var(--radius) var(--radius); }
.tbl { width:100%; border-collapse:separate; border-spacing:0; font-size:13.5px; }
.tbl th { text-align:left; color:var(--muted); font-weight:600; font-size:12px; letter-spacing:0; padding:10px 11px; border-bottom:1px solid var(--line); white-space:nowrap; position:sticky; top:0; background:var(--th); z-index:1; }
.tbl th:first-child, .tbl td:first-child { padding-left:18px; } .tbl th:last-child, .tbl td:last-child { padding-right:18px; }
.tbl td { padding:10px 11px; border-bottom:1px solid var(--line); vertical-align:top; color:var(--ink2); line-height:1.45; white-space:nowrap; }
.tbl td .st, .tbl td .pill.note, .tbl td .empty { white-space:normal; }
.tbl tbody tr:nth-child(even) td { background:var(--row); }
.tbl tbody tr:last-child td { border-bottom:0; }
.tbl tbody tr[data-row] { cursor:pointer; }
.tbl tbody tr[data-row] td { transition:background var(--t-fast) ease; }
.tbl tbody tr[data-row]:active td { background:var(--row-h); }
.tbl tr.r-red td:first-child { box-shadow:inset 3px 0 0 var(--red); } .tbl tr.r-warn td:first-child { box-shadow:inset 3px 0 0 var(--amber); }
.tbl .num { color:var(--faint); font-size:12px; font-variant-numeric:tabular-nums; }
.id { display:block; font-family:ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; font-size:13px; font-weight:650; color:var(--ink); letter-spacing:-0.01em; white-space:nowrap; }
.sub { display:block; color:var(--faint); font-size:11.5px; margin-top:1px; }
.sub.mono { font-size:11.5px; color:var(--faint); }
.acct { display:inline-block; font-weight:600; color:var(--ink); background:var(--soft); border:1px solid var(--line); padding:1px 8px; border-radius:6px; font-size:12.5px; white-space:nowrap; }
.lvl-red { color:var(--red-ink); font-weight:600; } .lvl-warn { color:var(--amber-ink); font-weight:600; } .lvl-done { color:var(--green-ink); }
.pill { display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:999px; font-size:12px; font-weight:550; background:var(--soft); color:var(--ink2); white-space:nowrap; line-height:1.5; max-width:100%; }
.pill svg { width:13px; height:13px; vertical-align:0; }
.pill.err { background:var(--red-soft); color:var(--red-ink); } .pill.ok { background:var(--green-soft); color:var(--green-ink); } .pill.note { background:var(--amber-soft); color:var(--amber-ink); white-space:normal; } .pill.info { background:var(--blue-soft); color:var(--blue-ink); }
.missing { display:inline-flex; align-items:center; gap:6px; color:var(--red-ink); font-weight:600; }
/* status badge - icon + text, the main thing people scan */
.st { display:inline-flex; align-items:flex-start; gap:7px; padding:4px 10px 4px 8px; border-radius:8px; font-size:12.5px; font-weight:550; line-height:1.4; background:var(--soft); color:var(--ink2); min-width:200px; max-width:400px; }
.st svg { width:15px; height:15px; margin-top:2px; flex:none; vertical-align:0; }
.st-red { background:var(--red-soft); color:var(--red-ink); } .st-warn { background:var(--amber-soft); color:var(--amber-ink); } .st-wait { background:var(--soft); color:var(--ink2); }
.st-transit { background:var(--teal-soft); color:var(--teal-ink); } .st-done { background:var(--green-soft); color:var(--green-ink); }
.empty { display:grid; justify-items:center; gap:4px; padding:36px 16px; color:var(--muted); text-align:center; }
.empty svg { width:34px; height:34px; color:var(--line2); margin-bottom:6px; } .empty b { color:var(--ink2); font-weight:600; } .empty span { font-size:12.5px; }
.userCell { display:inline-flex; align-items:center; gap:8px; color:var(--ink); }

/* ---------- dashboard ---------- */
.dashHead { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; }
.flowCard { padding-bottom:14px; }
.flow { display:flex; align-items:stretch; gap:6px; overflow-x:auto; padding:2px 0 6px; overscroll-behavior-x:contain; }
.fStep { flex:1 1 150px; min-width:160px; display:grid; grid-template-columns:auto 1fr; grid-template-areas:"ico n" "ico l" "ico s"; column-gap:12px; align-content:center; padding:14px 14px; border-radius:12px; border:1px solid var(--line); background:var(--surface); color:var(--ink); transition:transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) ease, border-color var(--t-fast) ease; user-select:none; -webkit-user-select:none; touch-action:manipulation; }
.fStep:active { transform:scale(0.98); }
.fIco { grid-area:ico; display:grid; place-items:center; width:40px; height:40px; border-radius:11px; align-self:start; } .fIco svg { width:20px; height:20px; vertical-align:0; }
.fN { grid-area:n; font-size:26px; font-weight:750; letter-spacing:-0.03em; line-height:1; font-variant-numeric:tabular-nums; }
.fL { grid-area:l; font-weight:600; font-size:13px; margin-top:4px; color:var(--ink); }
.fS { grid-area:s; font-size:11.5px; color:var(--muted); margin-top:1px; }
.f-ink .fIco { background:var(--soft); color:var(--ink2); }
.f-amber .fIco { background:var(--amber-soft); color:var(--amber-ink); } .f-amber .fN { color:var(--amber-ink); }
.f-teal .fIco { background:var(--teal-soft); color:var(--teal-ink); } .f-teal .fN { color:var(--teal-ink); }
.f-green .fIco { background:var(--green-soft); color:var(--green-ink); } .f-green .fN { color:var(--green-ink); }
.f-red .fIco { background:var(--red-soft); color:var(--red-ink); } .f-red .fN { color:var(--red-ink); }
.fProb { margin-left:10px; border-style:dashed; border-color:var(--red-line); background:var(--red-soft2); }
.fArrow { display:grid; place-items:center; color:var(--line2); flex:none; } .fArrow svg { width:18px; height:18px; }
.stack { display:flex; height:10px; border-radius:999px; overflow:hidden; background:var(--soft); margin:14px 0 10px; gap:2px; }
.stack a { display:block; height:100%; min-width:3px; transition:filter var(--t-fast) ease; }
.stackLegend { display:flex; flex-wrap:wrap; gap:6px 18px; font-size:12px; color:var(--muted); }
.stackLegend a { display:inline-flex; align-items:center; gap:6px; color:var(--muted); } .stackLegend b { color:var(--ink); font-weight:650; font-variant-numeric:tabular-nums; }
.stackLegend i { width:9px; height:9px; border-radius:3px; display:inline-block; }
.tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(235px,1fr)); gap:12px; margin-bottom:18px; }
.tile { position:relative; display:block; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 16px 13px 16px; box-shadow:var(--shadow-1); color:var(--ink); transition:transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) ease, border-color var(--t-fast) ease; user-select:none; -webkit-user-select:none; touch-action:manipulation; }
.tile:active { transform:scale(0.98); }
.tIco { position:absolute; top:12px; right:12px; display:grid; place-items:center; width:30px; height:30px; border-radius:9px; background:var(--soft); color:var(--ink2); } .tIco svg { width:16px; height:16px; vertical-align:0; }
.tile .n { font-size:30px; font-weight:750; line-height:1.05; letter-spacing:-0.035em; font-variant-numeric:tabular-nums; color:var(--ink); } .tile .l { color:var(--ink); font-size:13px; font-weight:600; margin-top:6px; } .tile .s { color:var(--muted); font-size:11.5px; margin-top:2px; }
.t-red .tIco { background:var(--red-soft); color:var(--red-ink); } .t-red .n { color:var(--red-ink); }
.t-warn .tIco { background:var(--amber-soft); color:var(--amber-ink); } .t-warn .n { color:var(--amber-ink); }
.t-ok .tIco { background:var(--green-soft); color:var(--green-ink); } .t-ok .n { color:var(--green-ink); }
.t-blue .tIco { background:var(--blue-soft); color:var(--blue-ink); } .t-blue .n { color:var(--blue-ink); }
.tile.zero .n { color:var(--faint); } .tile.zero .tIco { background:var(--soft2); color:var(--faint); }

/* ---------- tabs ---------- */
.tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.tabs button { background:var(--card); border:1px solid var(--line); border-radius:999px; padding:7px 14px 7px 12px; font:inherit; font-weight:500; color:var(--muted); cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:background var(--t-fast) ease, color var(--t-fast) ease, border-color var(--t-fast) ease, transform var(--t-press) var(--ease-out), box-shadow var(--t-fast) ease; }
.tabs button svg { width:15px; height:15px; vertical-align:0; opacity:.8; }
.tabs button b { font-weight:650; background:var(--soft); color:var(--ink2); padding:0 7px; border-radius:999px; font-size:12px; min-width:22px; text-align:center; font-variant-numeric:tabular-nums; transition:background var(--t-fast) ease, color var(--t-fast) ease; } .tabs button b:empty { display:none; }
.tabs button.active { background:var(--tab-on-bg); color:var(--tab-on-ink); border-color:var(--tab-on-bg); box-shadow:0 2px 8px rgba(11,18,32,.18); } .tabs button.active svg { opacity:1; } .tabs button.active b { background:var(--tab-on-ink); color:var(--tab-on-bg); }
.tabs button.tProblems b:not(:empty) { background:var(--red-soft); color:var(--red-ink); } .tabs button.tProblems.active b:not(:empty) { background:var(--tab-on-ink); color:var(--red); }
.tabs button:active { transform:scale(0.97); }

/* ---------- forms & buttons ---------- */
input, select, textarea, button { font:inherit; }
input[type=text], input:not([type]), input[type=password], select, textarea { padding:9px 11px; border:1px solid var(--line2); border-radius:var(--radius-sm); background:var(--surface); color:var(--ink); width:100%; transition:border-color var(--t-fast) ease, box-shadow var(--t-fast) ease, background var(--t-fast) ease; }
select { appearance:none; -webkit-appearance:none; background-image:linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position:calc(100% - 15px) 55%, calc(100% - 10px) 55%; background-size:5px 5px; background-repeat:no-repeat; padding-right:30px; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(47,91,234,.16); }
input:focus-visible, button:focus-visible, a:focus-visible, select:focus-visible, textarea:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
input:focus, select:focus, textarea:focus { outline:none; }
input:disabled, textarea:disabled { background:var(--soft2); color:var(--muted); border-color:var(--line); }
input.bad { border-color:var(--red); background:var(--red-soft2); } input.bad:focus { box-shadow:0 0 0 3px rgba(217,45,45,.14); }
input.good, textarea.good { border-color:var(--green-line); }
.search { max-width:none; }
.filters { display:flex; flex-wrap:wrap; gap:8px; align-items:center; } .filters input, .filters select { width:auto; } .filters .searchBox input { width:100%; }
label { display:block; font-weight:500; margin-bottom:12px; font-size:13px; color:var(--ink); } label input, label select, label textarea { margin-top:6px; font-weight:400; }
.lbl { display:inline-flex; align-items:center; gap:6px; } .lbl svg { width:14px; height:14px; color:var(--muted); vertical-align:0; }
.chk { display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-weight:400; margin:0; } .chk input { width:auto; margin:0; accent-color:var(--blue); }
.help { font-size:12px; color:var(--muted); font-weight:400; margin-top:5px; min-height:16px; transition:color var(--t-fast) ease; } .help.err { color:var(--red-ink); } .help.okk { color:var(--green-ink); }
button { display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:8px 14px; border:1px solid var(--line2); border-radius:var(--radius-sm); background:var(--surface); cursor:pointer; color:var(--ink); font-weight:550; line-height:1.4; transition:transform var(--t-press) var(--ease-out), background var(--t-fast) ease, border-color var(--t-fast) ease, box-shadow var(--t-fast) ease, opacity var(--t-fast) ease; user-select:none; -webkit-user-select:none; touch-action:manipulation; }
button svg { width:15px; height:15px; vertical-align:0; }
button:active:not(:disabled) { transform:scale(0.97); }
button:disabled { opacity:.5; cursor:not-allowed; }
button.primary { background:var(--blue); color:#fff; border-color:var(--blue); box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(47,91,234,.3); }
button.danger { color:var(--red-ink); border-color:var(--red-line); background:var(--surface); }
button.sm { padding:4px 10px; font-size:12px; } .wide { width:100%; }
.inline { display:flex; gap:8px; align-items:center; margin-bottom:12px; flex-wrap:wrap; } .inline input { width:auto; }
.pager { display:flex; align-items:center; gap:6px; } .pager span { font-variant-numeric:tabular-nums; font-size:12.5px; color:var(--muted); min-width:44px; text-align:center; }
.pager button { padding:5px 7px; } .pager button svg { width:14px; height:14px; }
pre { background:var(--code-bg); color:#dbe4f3; padding:12px 14px; border-radius:10px; overflow:auto; white-space:pre-wrap; margin:0 0 8px; font-size:12.5px; line-height:1.55; }
.error { color:var(--red-ink); min-height:18px; font-size:13px; } .notice { color:var(--green-ink); font-size:13px; }
.narrow { max-width:440px; }

/* ---------- login ---------- */
.login { min-height:100dvh; display:grid; place-items:center; padding:16px; background:radial-gradient(900px 500px at 20% -10%, var(--glow1) 0%, transparent 60%), radial-gradient(700px 400px at 100% 100%, var(--glow2) 0%, transparent 55%), var(--bg); }
.loginCard { width:min(380px,100%); background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:30px; box-shadow:var(--shadow-2); animation:cardIn 360ms var(--ease-out); }
@keyframes cardIn { from { opacity:0; transform:translateY(8px) scale(0.985); } to { opacity:1; transform:none; } }
.loginCard h1 { margin:16px 0 4px; } .loginCard p { margin:0 0 18px; }

/* ---------- drawer (order) ---------- */
.drawer { position:fixed; inset:0; background:rgba(10,15,30,.42); z-index:20; display:flex; justify-content:flex-end; opacity:0; visibility:hidden; transition:opacity var(--t-drawer) ease, visibility 0s linear var(--t-drawer); }
.drawer.open { opacity:1; visibility:visible; transition:opacity var(--t-ui) ease; }
.drawerBody { width:min(700px,100%); background:var(--surface); height:100dvh; overflow:auto; overscroll-behavior:contain; padding:22px 26px calc(40px + var(--safe-b)); position:relative; box-shadow:var(--shadow-3); transform:translateX(100%); transition:transform var(--t-drawer) var(--ease-drawer); will-change:transform; }
.drawer.open .drawerBody { transform:translateX(0); }
.close { position:absolute; top:14px; right:16px; width:36px; height:36px; padding:0; border:none; border-radius:50%; background:var(--soft2); color:var(--muted); display:grid; place-items:center; } .close svg { width:17px; height:17px; }
.orderHead { margin-bottom:16px; padding-right:48px; }
.crumbs { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:12.5px; margin-bottom:6px; flex-wrap:wrap; } .crumbs svg { width:13px; height:13px; color:var(--faint); } .crumbs .sep { width:3px; height:3px; border-radius:50%; background:var(--line2); margin:0 3px; }
.orderHead h2 { font-size:19px; margin:0 0 10px; letter-spacing:-0.02em; } .orderHead h2 .mono { font-size:17px; color:var(--ink); font-weight:700; }
.badges { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.noteBox { display:flex; gap:10px; padding:11px 13px; border-radius:10px; background:var(--amber-soft); color:var(--amber-ink); margin:0 0 6px; font-size:13px; line-height:1.45; } .noteBox svg { width:16px; height:16px; flex:none; margin-top:2px; } .noteBox b { font-weight:650; }
.section { margin-top:22px; } .section h3 { display:flex; align-items:center; gap:7px; font-size:13px; color:var(--ink); margin:0 0 10px; font-weight:650; letter-spacing:-0.005em; } .section h3 svg { width:15px; height:15px; color:var(--blue); }
.formCard { border:1px solid var(--line); border-radius:12px; padding:16px 16px 6px; background:var(--surface2); }
.formCard.locked { background:var(--soft2); } .lockNote { display:flex; gap:8px; font-size:12.5px; color:var(--muted); margin:-2px 0 14px; line-height:1.45; } .lockNote svg { width:14px; height:14px; flex:none; margin-top:3px; }
.addAcct { margin:-4px 0 12px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.combo { position:relative; }
.combo .opts { position:absolute; left:0; right:0; top:100%; z-index:5; background:var(--surface); border:1px solid var(--line2); border-radius:var(--radius-sm); max-height:220px; overflow:auto; overscroll-behavior:contain; box-shadow:var(--shadow-2); margin-top:4px; transform-origin:top; animation:popIn var(--t-fast) var(--ease-out); }
@keyframes popIn { from { opacity:0; transform:scale(0.97) translateY(-2px); } to { opacity:1; transform:none; } }
.combo .opts div { padding:8px 11px; cursor:pointer; color:var(--ink); font-weight:500; } .combo .opts div.sel { background:var(--blue-soft); } .combo .opts div:active { background:var(--blue-soft); }
.combo .opts .add { color:var(--blue-ink); font-weight:550; border-top:1px solid var(--line); }
.actions { display:flex; gap:10px; align-items:center; margin:8px 0 12px; flex-wrap:wrap; } .actions .spacer { flex:1; }
.timeline { list-style:none; padding:0; margin:0; position:relative; }
.timeline::before { content:""; position:absolute; left:14px; top:12px; bottom:12px; width:2px; background:var(--line); }
.timeline li { position:relative; display:grid; grid-template-columns:30px 1fr; gap:12px; padding:7px 0; color:var(--muted); }
.timeline li b { color:var(--muted); font-weight:600; } .timeline li.on b, .timeline li.bad b { color:var(--ink); }
.timeline .dot { position:relative; z-index:1; width:30px; height:30px; border-radius:50%; background:var(--surface); border:2px solid var(--line); color:var(--faint); display:grid; place-items:center; } .timeline .dot svg { width:15px; height:15px; vertical-align:0; }
.timeline li.on .dot { background:var(--green-soft); border-color:var(--green); color:var(--green-ink); } .timeline li.bad .dot { background:var(--red-soft); border-color:var(--red); color:var(--red-ink); }
.timeline .t { color:var(--muted); font-size:12px; }
.kv { display:grid; grid-template-columns:160px 1fr; gap:7px 12px; font-size:13px; color:var(--ink); } .kv div:nth-child(odd) { color:var(--muted); }
.hist { font-size:12.5px; color:var(--ink2); } .hist div { padding:7px 0; border-bottom:1px solid var(--line); } .hist div:last-child { border-bottom:0; } .hist b { color:var(--ink); }

/* ---------- modal + toast ---------- */
.modal { position:fixed; inset:0; background:rgba(10,15,30,.5); z-index:30; display:grid; place-items:center; padding:16px; opacity:0; visibility:hidden; transition:opacity var(--t-ui) ease, visibility 0s linear var(--t-ui); }
.modal.open { opacity:1; visibility:visible; transition:opacity var(--t-fast) ease; }
.modalBody { background:var(--surface); border-radius:16px; padding:24px 24px 20px; width:min(480px,100%); box-shadow:var(--shadow-3); transform:scale(0.96) translateY(6px); transition:transform var(--t-ui) var(--ease-out); }
.modal.open .modalBody { transform:none; }
.modalIco { display:grid; place-items:center; width:44px; height:44px; border-radius:12px; background:var(--red-soft); color:var(--red-ink); margin-bottom:12px; } .modalIco svg { width:22px; height:22px; }
.modalBody h3 { margin:0 0 6px; font-size:17px; letter-spacing:-0.015em; color:var(--ink); } .modalBody p { margin:0 0 12px; color:var(--muted); font-size:13.5px; }
.warnBox { display:flex; gap:10px; background:var(--amber-soft); color:var(--amber-ink); border-radius:var(--radius-sm); padding:11px 12px; font-size:13px; margin-bottom:14px; line-height:1.5; } .warnBox svg { width:16px; height:16px; flex:none; margin-top:2px; }
.toast { position:fixed; bottom:calc(22px + var(--safe-b)); left:50%; background:#121b2e; color:#fff; padding:11px 16px; border-radius:11px; z-index:40; font-size:13.5px; font-weight:500; box-shadow:var(--shadow-2); max-width:min(92vw, 520px); transform:translate(-50%, 16px); opacity:0; pointer-events:none; transition:transform var(--t-ui) var(--ease-out), opacity var(--t-ui) ease; }
.toast.show { transform:translate(-50%, 0); opacity:1; } .toast.err { background:var(--red); }

/* ---------- hover only where it exists ---------- */
@media (hover: hover) and (pointer: fine) {
  .side nav a:hover { background:rgba(255,255,255,.06); color:#fff; }
  .sideLinks a:hover { background:rgba(255,255,255,.06); color:#fff; }
  .tbl tbody tr[data-row]:hover td { background:var(--row-h); }
  .tile:hover, .fStep:hover { transform:translateY(-1px); box-shadow:var(--shadow-2); border-color:var(--line2); }
  .stack a:hover { filter:brightness(1.08); } .stackLegend a:hover b { color:var(--blue); }
  .tabs button:hover:not(.active) { background:var(--hover); color:var(--ink); }
  .tabs button.active:hover { background:var(--side-2); color:#fff; }
  button:hover:not(:disabled) { background:var(--hover); } button.primary:hover:not(:disabled) { background:var(--blue-h); } button.danger:hover:not(:disabled) { background:var(--red-soft2); }
  .close:hover { background:var(--soft); color:var(--ink); }
  .combo .opts div:hover { background:var(--blue-soft); }
}

/* ---------- phones ---------- */
@media (max-width: 900px) {
  .shell { grid-template-columns:1fr; }
  .side { position:fixed; left:0; top:0; width:250px; z-index:25; transform:translateX(-100%); transition:transform var(--t-drawer) var(--ease-drawer); box-shadow:none; }
  .side.open { transform:none; box-shadow:var(--shadow-3); }

  .content { padding:calc(14px + var(--safe-t)) 14px calc(60px + var(--safe-b)); }
  .kv { grid-template-columns:1fr; } .tbl { font-size:12.5px; } .drawerBody { padding:18px 16px calc(40px + var(--safe-b)); }
  .tiles { grid-template-columns:repeat(2,1fr); } .tile .n { font-size:26px; }
  .fStep { min-width:138px; padding:12px; } .fS { display:none; } .fProb { margin-left:0; }
  .tableWrap { margin:0 -14px -16px; } .card { padding:14px; } .tbl th:first-child, .tbl td:first-child { padding-left:14px; }
}
@media (pointer: coarse) { input, select, textarea { font-size:16px; } }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration:0.01ms !important; animation-duration:0.01ms !important; }
  .drawerBody, .side { transform:none !important; }
  .drawer, .modal, .toast { transition:opacity 150ms ease !important; }
}

/* ---------- copy buttons & buyer details ---------- */
.cp { display:inline-grid; place-items:center; width:22px; height:22px; padding:0; border:none; border-radius:6px; background:transparent; color:var(--faint); opacity:.55; vertical-align:middle; margin-left:4px; cursor:pointer; transition:opacity var(--t-fast) ease, background var(--t-fast) ease, color var(--t-fast) ease, transform var(--t-press) var(--ease-out); }
.cp svg { width:13px; height:13px; vertical-align:0; }
.cp:active { transform:scale(0.9); }
.cp.done { color:var(--green-ink); background:var(--green-soft); opacity:1; }
.idw, .cpw { display:inline-flex; align-items:center; gap:0; white-space:nowrap; }
.idw .id { display:inline; }
h2 .cp { width:28px; height:28px; margin-left:6px; opacity:.7; } h2 .cp svg { width:16px; height:16px; }
.timeline .cp { margin-left:6px; }
.customer { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:8px 14px; border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:var(--surface2); }
.cf { display:flex; flex-direction:column; gap:1px; min-width:0; }
.cl { font-size:11.5px; color:var(--muted); }
.cv { display:flex; align-items:center; gap:2px; color:var(--ink); font-weight:550; font-size:13.5px; word-break:break-word; }
.cv .cp { flex:none; }
.section h3 .spacer { flex:1; } .section h3 .muted { font-weight:400; }
@media (hover: hover) and (pointer: fine) {
  .cp { opacity:.35; }
  .tbl tr:hover .cp, .cpw:hover .cp, .idw:hover .cp, .cv:hover .cp, h2:hover .cp, .timeline li:hover .cp, .section h3:hover .cp { opacity:.9; }
  .cp:hover { background:var(--blue-soft); color:var(--blue-ink); opacity:1; }
}
@media (pointer: coarse) { .cp { opacity:.75; width:28px; height:28px; } .cp svg { width:15px; height:15px; } }

/* ---------- override ---------- */
.formCard.override { border-color:var(--amber-line); background:var(--amber-soft2); }
.ovNote { display:flex; gap:10px; padding:11px 13px; border-radius:10px; background:var(--amber-soft); color:var(--amber-ink); margin:-2px 0 14px; font-size:13px; line-height:1.45; } .ovNote svg { width:16px; height:16px; flex:none; margin-top:2px; } .ovNote .muted { color:var(--amber-ink); opacity:.8; }
.modalIco.warn { background:var(--amber-soft); color:var(--amber-ink); }
.warnBox ul { margin:6px 0 0; padding-left:18px; } .warnBox li { margin:3px 0; }
.histOv { background:var(--amber-soft); margin:0 -8px; padding:7px 8px; border-radius:8px; }

/* ---------- control center ---------- */
.ccHost { display:flex; gap:14px; flex-wrap:wrap; align-items:center; color:var(--muted); font-size:12.5px; } .ccHost span { display:inline-flex; align-items:center; gap:5px; } .ccHost svg { width:14px; height:14px; color:var(--faint); }
.ccSummary { display:flex; gap:10px; margin:0 0 16px; flex-wrap:wrap; }
.ccSum { display:inline-flex; align-items:center; gap:8px; padding:7px 14px 7px 10px; border-radius:999px; background:var(--surface); border:1px solid var(--line); color:var(--muted); font-size:13px; font-weight:500; }
.ccSum b { font-size:16px; color:var(--ink); font-variant-numeric:tabular-nums; }
.ccSum.live { border-color:var(--green-line); background:var(--green-soft); color:var(--green-ink); } .ccSum.live b { color:var(--green-ink); }
.ccSum.warn.on { border-color:var(--amber-line); background:var(--amber-soft); color:var(--amber-ink); } .ccSum.warn.on b { color:var(--amber-ink); }
.ccSum.down.on { border-color:var(--red-line); background:var(--red-soft); color:var(--red-ink); } .ccSum.down.on b { color:var(--red-ink); }
.ccGrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:12px; margin-bottom:20px; }
.ccCard { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 16px; box-shadow:var(--shadow-1); cursor:pointer; position:relative; transition:transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) ease; user-select:none; -webkit-user-select:none; }
.ccCard::before { content:""; position:absolute; left:0; top:12px; bottom:12px; width:3px; border-radius:0 3px 3px 0; background:var(--green); }
.ccCard.st-warn::before { background:var(--amber); } .ccCard.st-down::before { background:var(--red); } .ccCard.st-off::before { background:var(--faint); }
.ccCard:active { transform:scale(0.99); }
.ccTop { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; } .ccTop b { font-size:14px; letter-spacing:-0.01em; }
.ccState { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:650; padding:2px 9px 2px 7px; border-radius:999px; white-space:nowrap; }
.ccState i { width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 0 3px rgba(0,0,0,.06); }
.ccState.live { background:var(--green-soft); color:var(--green-ink); } .ccState.live i { animation:ccPulse 2s ease-in-out infinite; }
.ccState.warn { background:var(--amber-soft); color:var(--amber-ink); } .ccState.down { background:var(--red-soft); color:var(--red-ink); } .ccState.off { background:var(--soft); color:var(--muted); }
@keyframes ccPulse { 0%,100% { box-shadow:0 0 0 3px rgba(30,158,92,.18); } 50% { box-shadow:0 0 0 6px rgba(30,158,92,.06); } }
.ccLine { font-size:13px; color:var(--ink); line-height:1.45; min-height:19px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.ccBusy { display:inline-flex; align-items:center; gap:4px; color:var(--blue-ink); font-weight:600; font-size:12px; } .ccBusy svg { width:13px; height:13px; }
.ccMeta { display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; font-size:11.5px; color:var(--muted); } .ccMeta span + span::before { content:"·"; margin-right:10px; color:var(--line2); }
.ccLive { border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:linear-gradient(180deg,var(--surface2),var(--surface)); margin-bottom:12px; }
.ccLiveLabel { display:flex; align-items:center; gap:6px; font-size:11.5px; font-weight:650; color:var(--blue-ink); margin-bottom:4px; } .ccLiveLabel svg { width:13px; height:13px; }
.ccLiveText { font-size:14px; color:var(--ink); font-weight:550; line-height:1.45; } .ccLiveAt { margin-top:4px; }
.ccKv { margin-bottom:6px; }
.ccActions { display:flex; flex-wrap:wrap; gap:8px; }
.ccEvents { border:1px solid var(--line); border-radius:10px; max-height:300px; overflow:auto; overscroll-behavior:contain; }
.ccEv { display:grid; grid-template-columns:52px 1fr; gap:10px; padding:7px 12px; font-size:12.5px; border-bottom:1px solid var(--line); } .ccEv:last-child { border-bottom:0; } .ccEv:nth-child(even) { background:var(--row); }
.ccEvAt { color:var(--faint); font-variant-numeric:tabular-nums; } .ccEvText { color:var(--ink2); overflow-wrap:anywhere; }
.ccHow { display:flex; flex-direction:column; gap:6px; }
.ccCmd { display:flex; align-items:center; gap:6px; background:var(--code-bg); color:#dbe4f3; border-radius:8px; padding:7px 10px; font-size:12.5px; } .ccCmd code { font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace; flex:1; overflow-wrap:anywhere; } .ccCmd .cp { color:#9fb0cc; opacity:.9; }
.ccOut { max-height:340px; font-size:12px; }
@media (max-width: 900px) { .ccGrid { grid-template-columns:1fr; } .ccEv { grid-template-columns:44px 1fr; } }

/* ---------- top bar: alerts + theme ---------- */
.topbar { display:flex; align-items:center; gap:8px; margin:-8px 0 14px; min-height:38px; }
.topbar .spacer { flex:1; }
.iconBtn { width:38px; height:38px; padding:0; border-radius:11px; background:var(--surface); border:1px solid var(--line); color:var(--ink2); position:relative; }
.iconBtn svg { width:18px; height:18px; }
.menuBtn.iconBtn { display:none; }
.bellWrap { position:relative; }
.bell i { position:absolute; top:-5px; right:-6px; min-width:19px; height:19px; padding:0 5px; border-radius:999px; background:var(--red); color:#fff; font-style:normal; font-size:11px; font-weight:700; line-height:19px; text-align:center; box-shadow:0 0 0 2px var(--bg); font-variant-numeric:tabular-nums; }
.bellPop { position:absolute; right:0; top:calc(100% + 8px); width:min(360px, calc(100vw - 28px)); background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-2); padding:6px; z-index:15; transform-origin:top right; animation:popIn var(--t-fast) var(--ease-out); }
.bpHead { font-size:12px; font-weight:650; color:var(--muted); padding:8px 10px 6px; }
.bpItem { display:flex; gap:10px; padding:10px; border-radius:10px; color:var(--ink); transition:background var(--t-fast) ease; }
.bpItem b { display:block; font-size:13px; font-weight:600; } .bpItem span span { display:block; font-size:12px; color:var(--muted); margin-top:1px; }
.bpIco { display:grid; place-items:center; width:32px; height:32px; border-radius:9px; flex:none; background:var(--soft); color:var(--ink2); } .bpIco svg { width:16px; height:16px; }
.b-red .bpIco { background:var(--red-soft); color:var(--red-ink); } .b-warn .bpIco { background:var(--amber-soft); color:var(--amber-ink); } .b-info .bpIco { background:var(--blue-soft); color:var(--blue-ink); }
.bpEmpty { display:flex; align-items:center; gap:8px; padding:14px 10px; color:var(--green-ink); font-size:13px; } .bpEmpty svg { width:16px; height:16px; }

/* ---------- alert bar (shows on every page while e-mails wait) ---------- */
.alertBar { display:flex; align-items:center; gap:12px; padding:12px 14px; margin-bottom:16px; border-radius:12px; background:var(--red-soft); border:1px solid var(--red-line); color:var(--red-ink); animation:pageIn var(--t-ui) var(--ease-out); }
.alertBar > div { flex:1; min-width:0; font-size:13px; line-height:1.45; } .alertBar b { display:block; font-weight:650; } .alertBar span:not(.abIco) { opacity:.85; }
.abIco { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:var(--surface); color:var(--red); flex:none; } .abIco svg { width:17px; height:17px; }
.abBtn { display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:var(--radius-sm); background:var(--red); color:#fff; font-weight:600; font-size:13px; white-space:nowrap; transition:transform var(--t-press) var(--ease-out), filter var(--t-fast) ease; } .abBtn svg { width:15px; height:15px; }
.abBtn:active { transform:scale(0.97); }

/* ---------- Aquiline support ---------- */
.supSteps { display:flex; align-items:stretch; gap:6px; overflow-x:auto; padding:2px 0 8px; margin-bottom:6px; overscroll-behavior-x:contain; }
.ssStep { flex:1 1 150px; min-width:160px; display:grid; grid-template-columns:auto 1fr; grid-template-areas:"ico n" "ico l" "ico s"; column-gap:12px; align-content:center; justify-items:start; text-align:left; padding:13px 14px; border-radius:12px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font-weight:400; }
.ssStep .fIco { background:var(--soft); color:var(--ink2); }
.ssStep[data-s="new"] .fIco { background:var(--red-soft); color:var(--red-ink); } .ssStep[data-s="new"] .fN { color:var(--red-ink); }
.ssStep[data-s="sent"] .fIco { background:var(--blue-soft); color:var(--blue-ink); }
.ssStep[data-s="updated"] .fIco { background:var(--teal-soft); color:var(--teal-ink); }
.ssStep[data-s="resolved"] .fIco { background:var(--green-soft); color:var(--green-ink); }
.ssStep.active { border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft); }
.supList { display:grid; gap:12px; }
.supCard { position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px 18px 6px; box-shadow:var(--shadow-1); }
.supCard::before { content:""; position:absolute; left:0; top:14px; bottom:14px; width:3px; border-radius:0 3px 3px 0; background:var(--line2); }
.supCard.s-new::before { background:var(--red); } .supCard.s-sent::before { background:var(--blue); } .supCard.s-updated::before { background:var(--teal); } .supCard.s-resolved::before { background:var(--green); }
.supCard.compact { padding:12px 14px 4px; box-shadow:none; background:var(--surface2); }
.supHead { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px; flex-wrap:wrap; }
.supId .id { font-size:14px; } .supMeta { display:block; font-size:12px; color:var(--muted); margin-top:2px; }
.supAge { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--muted); background:var(--soft); padding:3px 10px; border-radius:999px; white-space:nowrap; } .supAge svg { width:13px; height:13px; }
.supAge.late { background:var(--red-soft); color:var(--red-ink); }
.supFacts { display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:8px 18px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface2); font-size:13px; }
.supFacts > div > span:first-child { display:block; font-size:11.5px; color:var(--muted); margin-bottom:1px; }
.supFacts b { font-weight:600; color:var(--ink); }
.supProg { list-style:none; display:flex; gap:0; padding:0; margin:12px 0 4px; counter-reset:none; }
.supProg li { flex:1; display:grid; justify-items:center; text-align:center; gap:3px; position:relative; color:var(--faint); font-size:11.5px; }
.supProg li::before { content:""; position:absolute; top:12px; left:-50%; right:50%; height:2px; background:var(--line); z-index:0; }
.supProg li:first-child::before { display:none; }
.supProg li.on::before { background:var(--green); }
.spDot { position:relative; z-index:1; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--surface); border:2px solid var(--line); } .spDot svg { width:13px; height:13px; }
.supProg li.on .spDot { background:var(--green-soft); border-color:var(--green); color:var(--green-ink); }
.supProg li.cur .spDot { box-shadow:0 0 0 4px var(--green-soft); }
.supProg li.on .spL { color:var(--ink); font-weight:600; } .spT { color:var(--muted); font-size:11px; min-height:15px; font-variant-numeric:tabular-nums; }
.supWho { display:flex; align-items:center; gap:8px; margin:10px 0 0; padding:8px 11px; border-radius:9px; background:var(--soft); color:var(--ink2); font-size:12.5px; } .supWho svg { width:14px; height:14px; flex:none; }
.supWho.ok { background:var(--green-soft); color:var(--green-ink); }
.supTpl { margin-top:10px; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.supTpl summary { display:flex; align-items:center; gap:7px; padding:9px 12px; cursor:pointer; font-size:12.5px; font-weight:600; color:var(--ink2); background:var(--surface2); list-style:none; user-select:none; } .supTpl summary::-webkit-details-marker { display:none; } .supTpl summary svg { width:14px; height:14px; color:var(--blue); }
.supTpl pre { margin:0; border-radius:0; background:var(--surface); color:var(--ink); border-top:1px solid var(--line); font-size:12.5px; line-height:1.6; }
.supCard .actions { margin-top:12px; }
button.ready { border-color:var(--blue); color:var(--blue-ink); box-shadow:0 0 0 3px var(--blue-soft); }
button.done { border-color:var(--green); color:var(--green-ink); background:var(--green-soft); }
button.primary.done { background:var(--green); border-color:var(--green); color:#fff; }
button.ghost { border-color:transparent; background:transparent; color:var(--muted); }
#notifyBtn.on { color:var(--green-ink); border-color:var(--green-line); background:var(--green-soft); }

@media (hover: hover) and (pointer: fine) {
  .iconBtn:hover { background:var(--hover); color:var(--ink); }
  .bpItem:hover { background:var(--hover); }
  .abBtn:hover { filter:brightness(1.08); }
  .ssStep:hover { border-color:var(--line2); box-shadow:var(--shadow-2); }
  .supTpl summary:hover { color:var(--ink); }
  button.ghost:hover:not(:disabled) { background:var(--soft); color:var(--ink); }
}
@media (max-width: 900px) {
  .menuBtn.iconBtn { display:inline-flex; margin:0; }
  .topbar { margin:0 0 12px; }
  .alertBar { flex-wrap:wrap; } .abBtn { width:100%; justify-content:center; }
  .supCard { padding:12px 14px 4px; } .supProg li .spT { display:none; } .ssStep .fS { display:none; } .ssStep { min-width:130px; }
}
#notifyBtn { white-space:nowrap; flex:none; }
@media (max-width: 900px) {
  .dashHead { flex-wrap:wrap; align-items:flex-start; }
  .supSteps { display:none; }
  .tabs { flex-wrap:nowrap; overflow-x:auto; margin-left:-14px; margin-right:-14px; padding:0 14px 4px; scrollbar-width:none; overscroll-behavior-x:contain; }
  .tabs::-webkit-scrollbar { display:none; }
  .tabs button { flex:none; }
}
.supMail { padding:12px 14px; background:var(--surface); color:var(--ink); border-top:1px solid var(--line); font-size:13.5px; line-height:1.55; user-select:text; }
.supMail b { font-weight:700; color:var(--ink); }

/* ---------- combined e-mail ---------- */
.supBulk { position:sticky; top:8px; z-index:6; display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:10px 14px; margin-bottom:12px; border:1px solid var(--line); border-radius:12px; background:var(--surface); box-shadow:var(--shadow-2); }
.supBulk .spacer { flex:1; } .bulkN { font-size:13px; color:var(--muted); } .bulkN b { color:var(--ink); font-variant-numeric:tabular-nums; }
.bulkAll { font-weight:600; color:var(--ink); }
.supSel { display:inline-grid; place-items:center; margin:0 10px 0 -4px; padding:4px; cursor:pointer; } .supSel input { width:17px; height:17px; margin:0; accent-color:var(--blue); cursor:pointer; }
.supHead { justify-content:flex-start; } .supHead .supAge { margin-left:auto; }
.supCard.picked { border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft); }
.modalBody.wide { width:min(720px, 100%); }
.combinedTpl { margin:0 0 14px; max-height:min(52vh, 460px); overflow:auto; overscroll-behavior:contain; }
.combinedTpl .supMail { border-top:0; }
.modalIco.info { background:var(--blue-soft); color:var(--blue-ink); }
@media (max-width: 900px) { .supBulk { top:4px; } .supBulk #supCombined { width:100%; } }

/* =====================================================================
   Scanner Portal additions
   ===================================================================== */
.menuBtn { display:none; position:fixed; top:12px; left:12px; z-index:26; width:40px; height:40px; padding:0; border-radius:10px; background:var(--surface); box-shadow:var(--shadow-2); }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; } .grid2 > .card { margin-bottom:16px; min-width:0; }
.dashBtns { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.btnLink { display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border:1px solid var(--line2); border-radius:var(--radius-sm); background:var(--surface); color:var(--ink); font-weight:550; line-height:1.4; } .btnLink svg { width:15px; height:15px; }
.alertList { grid-column:1 / -1; display:grid; gap:6px; }
.al { display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:var(--radius-sm); font-size:13px; font-weight:500; border:1px solid var(--line); background:var(--surface); color:var(--ink2); } .al svg { width:16px; height:16px; flex:none; } .al a { margin-left:auto; font-weight:600; }
.al.red { background:var(--red-soft); color:var(--red-ink); border-color:var(--red-line); } .al.warn { background:var(--amber-soft); color:var(--amber-ink); border-color:var(--amber-line); } .al.info { background:var(--blue-soft); color:var(--blue-ink); border-color:transparent; }
.alertBar { display:flex; align-items:center; gap:10px; padding:9px 14px; border-radius:var(--radius-sm); margin-bottom:14px; font-size:13px; font-weight:500; border:1px solid var(--amber-line); background:var(--amber-soft); color:var(--amber-ink); } .alertBar.red { background:var(--red-soft); color:var(--red-ink); border-color:var(--red-line); } .alertBar svg { width:16px; height:16px; flex:none; } .alertBar span { flex:1; min-width:0; } .alertBar a { font-weight:600; color:inherit; text-decoration:underline; }
.tile .n { font-size:28px; }
/* profiles strip (dashboard) */
.profStrip { display:grid; gap:4px; }
.pRow { display:grid; grid-template-columns:26px 86px auto 1fr 70px; align-items:center; gap:10px; padding:6px 8px; border-radius:8px; color:var(--ink); font-size:12.5px; } .pRow b { font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums; } .pName { font-weight:600; white-space:nowrap; } .pSeller { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.miniBar { height:6px; border-radius:999px; background:var(--soft); overflow:hidden; } .miniBar i { display:block; height:100%; background:var(--teal); border-radius:999px; }
.bar { height:7px; border-radius:999px; background:var(--soft); overflow:hidden; min-width:90px; } .bar i { display:block; height:100%; background:linear-gradient(90deg,var(--blue),var(--teal)); border-radius:999px; transition:width var(--t-ui) ease; } .bar.big { height:10px; margin:6px 0; } .bar.amber i { background:var(--amber); } .bar.red i { background:var(--red); }
/* chart */
.dayChart .bars { display:flex; align-items:flex-end; gap:6px; height:150px; padding-top:18px; }
.barCol { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; position:relative; color:var(--muted); text-decoration:none; min-width:0; }
.barCol i { display:block; width:100%; max-width:34px; background:linear-gradient(180deg,var(--blue),var(--teal)); border-radius:6px 6px 2px 2px; transition:filter var(--t-fast) ease; } .barCol b { font-size:10.5px; color:var(--ink2); font-weight:600; margin-bottom:3px; order:-1; font-variant-numeric:tabular-nums; } .barCol span { font-size:10.5px; margin-top:5px; }
/* feeds */
.feed { display:grid; gap:2px; max-height:420px; overflow:auto; overscroll-behavior:contain; } .feed.tall { max-height:70vh; }
.fRow { display:grid; grid-template-columns:62px auto 1fr; align-items:start; gap:8px; padding:5px 6px; border-radius:6px; font-size:12.5px; line-height:1.45; color:var(--ink2); } .fRow:nth-child(even) { background:var(--row); }
.fT { color:var(--faint); font-variant-numeric:tabular-nums; font-size:11.5px; padding-top:1px; } .fP { color:var(--blue-ink); font-weight:650; font-size:11px; min-width:24px; padding-top:1px; } .fX { min-width:0; overflow-wrap:anywhere; }
.fI { display:inline-grid; place-items:center; width:20px; height:20px; border-radius:6px; background:var(--soft); color:var(--ink2); } .fI svg { width:13px; height:13px; } .fI.ok { background:var(--green-soft); color:var(--green-ink); } .fI.err { background:var(--red-soft); color:var(--red-ink); } .fI.note { background:var(--amber-soft); color:var(--amber-ink); }
.feed .fRow[data-job] { cursor:pointer; }
/* quota */
.quotaGrid { display:grid; gap:8px; } .qRow { display:grid; grid-template-columns:180px 1fr 190px; align-items:center; gap:12px; font-size:12.5px; } .qN { color:var(--ink); font-weight:550; } .qV { color:var(--muted); text-align:right; font-variant-numeric:tabular-nums; }
/* tables */
.tbl th.r, .tbl td.r { text-align:right; } .tbl .chkCol { width:34px; padding-right:0; } .tbl .chkCol input { width:16px; height:16px; margin:2px 0 0; accent-color:var(--blue); }
.tbl th[data-sort] { cursor:pointer; user-select:none; } .tbl th[data-sort].sorted { color:var(--blue-ink); } .tbl th[data-sort].sorted::after { content:" ↓"; } .tbl th[data-sort].sorted[data-dir=asc]::after { content:" ↑"; }
.tbl td.wrap { white-space:normal; max-width:600px; }
.ttl { display:inline-block; max-width:420px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; color:var(--ink); } .c-amazonTitle .ttl { max-width:300px; color:var(--ink2); }
.bulkBar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:9px 12px; border-radius:10px; background:var(--blue-soft); color:var(--blue-ink); margin-bottom:12px; font-size:13px; } .bulkBar b { margin-right:6px; } .bulkBar .spacer { flex:1; }
.dupList { margin-top:8px; display:grid; gap:3px; font-size:12.5px; max-height:180px; overflow:auto; color:var(--ink); }
.toolbar select { width:auto; max-width:260px; }
.dateNav { display:inline-flex; align-items:center; gap:4px; } .dateNav select { width:auto; padding:6px 30px 6px 10px; }
.colPop { position:absolute; z-index:15; background:var(--surface); border:1px solid var(--line2); border-radius:12px; box-shadow:var(--shadow-2); padding:12px 14px; width:220px; display:grid; gap:7px; animation:popIn var(--t-fast) var(--ease-out); } .colPop b { font-size:12.5px; color:var(--muted); } .colPop .actions { margin:4px 0 0; }
.wTitle { font-size:17px !important; line-height:1.35; }
.asinBox { display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:10px; background:var(--amber-soft2); border:1px solid var(--amber-line); margin-bottom:10px; } .asin { font-family:ui-monospace, Menlo, Consolas, monospace; font-size:16px; font-weight:700; color:var(--amber-ink); letter-spacing:.02em; }
.modalIco.blue { background:var(--blue-soft); color:var(--blue-ink); } .actions.wrap { flex-wrap:wrap; }
/* profile cards */
.profGrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:12px; }
.pCard { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 16px; box-shadow:var(--shadow-1); position:relative; display:grid; gap:10px; } .pCard::before { content:""; position:absolute; left:0; top:12px; bottom:12px; width:3px; border-radius:0 3px 3px 0; background:var(--line2); }
.pCard.scanning::before { background:var(--green); } .pCard.paused::before, .pCard.restarting::before { background:var(--amber); } .pCard.stopped::before { background:var(--red); } .pCard.isOff { opacity:.7; }
.pHead { display:flex; align-items:center; gap:10px; } .pHead .spacer { flex:1; } .pNum { display:inline-grid; place-items:center; width:30px; height:30px; border-radius:9px; background:var(--soft); color:var(--ink); font-weight:700; }
.pSel { display:flex; align-items:center; gap:7px; font-weight:600; margin-bottom:6px; } .pSel svg { width:14px; height:14px; color:var(--muted); } .pSel a { color:var(--ink); }
.pStatus { margin-top:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pFoot { display:flex; gap:8px; }
/* keywords */
.kwSwitch { display:flex; align-items:center; gap:16px; } .kwSwitch .spacer { flex:1; }
.kwList { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:6px; }
.kwRow { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:9px; border:1px solid var(--line); background:var(--surface2); } .kwRow .spacer { flex:1; } .kwWord { font-weight:600; color:var(--ink); } .kwRow.off .kwWord { color:var(--muted); text-decoration:line-through; } .kwRow.dim { opacity:.6; } .kwRow .cp { opacity:.5; }
.switch { position:relative; display:inline-block; width:36px; height:20px; margin:0; } .switch input { opacity:0; width:0; height:0; position:absolute; } .switch i { position:absolute; inset:0; border-radius:999px; background:var(--line2); transition:background var(--t-fast) ease; } .switch i::after { content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.3); transition:transform var(--t-fast) var(--ease-out); } .switch input:checked + i { background:var(--green); } .switch input:checked + i::after { transform:translateX(16px); }
.switch.big { width:52px; height:28px; } .switch.big i::after { width:24px; height:24px; } .switch.big input:checked + i::after { transform:translateX(24px); }
/* control center */
.ccTop { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; } .ccAct { font-size:12.5px; color:var(--ink2); margin-bottom:6px; }
.ccNotes { margin:0 0 8px; padding-left:18px; font-size:12.5px; color:var(--muted); } .ccNotes.big { font-size:13.5px; color:var(--ink2); } .ccNotes li { margin:2px 0; }
.ccBtns { display:flex; gap:6px; flex-wrap:wrap; } .ccOut { max-height:420px; }
.ccCard.st-live::before { background:var(--green); } .ccCard.st-warn::before { background:var(--amber); } .ccCard.st-down::before { background:var(--red); } .ccCard.st-off::before { background:var(--line2); }
@media (max-width: 1100px) { .grid2 { grid-template-columns:1fr; } }
@media (max-width: 900px) { .menuBtn { display:grid; place-items:center; } .content { padding-top:calc(58px + var(--safe-t)); } .pRow { grid-template-columns:22px 1fr 60px; } .pRow .pSeller, .pRow .miniBar { display:none; } .qRow { grid-template-columns:1fr; gap:4px; } .qV { text-align:left; } .ttl { max-width:220px; } }