/* TradeDesk — design system. Dense, numbers-first, dark by default with a
   light theme (html[data-theme="light"]). No framework, no icon font: icons
   are inline SVG masks (.ic) painted with currentColor.
   Order: tokens → base → chrome (top bar, watchlist, banner) → desk layout →
   primitives (card, pill, chip, btn, seg, field, tbl, stats, state-msg) →
   components (ticket, ladder, tape, opportunities, screener) → status bar,
   toasts → responsive. Every id/class the js/ modules bind to is kept. */

/* ---------- tokens ---------- */
:root {
  color-scheme: dark;
  --bg: #0a0e14;
  --bg-1: #10161e;          /* card */
  --bg-head: #0d131a;       /* card header band */
  --bg-2: #161d27;          /* inset / inputs */
  --bg-3: #1d2634;          /* hover */
  --line: #1e2733;
  --line-2: #2b3645;
  --fg: #e8edf4;
  --fg-2: #a9b4c3;
  --fg-3: #6d7989;
  --accent: #5b9cff;
  --accent-2: #3f7fe6;
  --accent-fg: #ffffff;
  --up: #22c55e;
  --down: #ef4444;
  --warn: #f5a524;
  --info: #38bdf8;
  --purple: #a78bfa;
  --up-bg: rgba(34, 197, 94, .14);
  --down-bg: rgba(239, 68, 68, .14);
  --warn-bg: rgba(245, 165, 36, .13);
  --info-bg: rgba(56, 189, 248, .12);
  --accent-bg: rgba(91, 156, 255, .16);
  --zebra: rgba(255, 255, 255, .018);
  --row-line: rgba(255, 255, 255, .05);
  --buy-fg: #04210d;
  --r: 8px;
  --r-sm: 5px;
  --gap: 10px;
  --font: Inter, -apple-system, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", "SF Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 8px 24px rgba(0, 0, 0, .35);
  --shadow-pop: 0 14px 36px rgba(0, 0, 0, .55);
  /* chart surface (read by js/charts.js) */
  --chart-bg: #10161e;
  --chart-text: #6d7989;
  --chart-grid: #171f29;
  --chart-border: #243040;
  --chart-vol-up: rgba(34, 197, 94, .42);
  --chart-vol-down: rgba(239, 68, 68, .42);
}
html[data-theme="light"] {
  color-scheme: light;
  --bg: #eef1f5;
  --bg-1: #ffffff;
  --bg-head: #f7f9fb;
  --bg-2: #f2f5f8;
  --bg-3: #e8edf3;
  --line: #e1e7ee;
  --line-2: #cbd4df;
  --fg: #0f172a;
  --fg-2: #475569;
  --fg-3: #687589;
  --accent: #2563eb;
  --accent-2: #1d4ed8;
  --up: #15803d;
  --down: #dc2626;
  --warn: #b45309;
  --info: #0369a1;
  --purple: #6d28d9;
  --up-bg: rgba(21, 128, 61, .10);
  --down-bg: rgba(220, 38, 38, .10);
  --warn-bg: rgba(180, 83, 9, .10);
  --info-bg: rgba(3, 105, 161, .10);
  --accent-bg: rgba(37, 99, 235, .11);
  --zebra: rgba(15, 23, 42, .022);
  --row-line: rgba(15, 23, 42, .07);
  --buy-fg: #ffffff;
  --shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 6px 18px rgba(15, 23, 42, .06);
  --shadow-pop: 0 14px 36px rgba(15, 23, 42, .18);
  --chart-bg: #ffffff;
  --chart-text: #687589;
  --chart-grid: #eef2f6;
  --chart-border: #d7dee7;
  --chart-vol-up: rgba(21, 128, 61, .35);
  --chart-vol-down: rgba(220, 38, 38, .35);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { height: 100%; }
body {
  background: var(--bg); color: var(--fg);
  font: 13px/1.45 var(--font);
  display: flex; flex-direction: column; min-height: 100%;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
/* the shell rows keep their size; only the desk grows */
#chrome, #statusbar { flex: none; }
::selection { background: var(--accent-bg); }
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 9px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--fg-3); background-clip: padding-box; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
kbd {
  font: 600 10px/1 var(--mono); padding: 3px 5px 2px; border-radius: 4px; border: 1px solid var(--line-2);
  border-bottom-width: 2px; background: var(--bg-2); color: var(--fg-2); white-space: nowrap;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.mono, .num, .tbl, .ladder, .tape, .stats b, .q-last, .q-chg, .q-ba, .q-ts { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.up { color: var(--up) !important; }
.down { color: var(--down) !important; }
.dim { color: var(--fg-3); }
.sep { color: var(--fg-3); margin: 0 6px; }
[hidden] { display: none !important; }

/* ---------- icons: inline SVG masks painted with currentColor ---------- */
.ic {
  display: inline-block; width: 12px; height: 12px; flex: none; background: currentColor; vertical-align: -1px;
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat;
}
.btn .ic { width: 11px; height: 11px; }
.ic-play { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 2.6v10.8L13.3 8z'/%3E%3C/svg%3E"); }
.ic-pause { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='3.2' y='2.8' width='3.4' height='10.4' rx='.8'/%3E%3Crect x='9.4' y='2.8' width='3.4' height='10.4' rx='.8'/%3E%3C/svg%3E"); }
.ic-stop { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='3' y='3' width='10' height='10' rx='1.6'/%3E%3C/svg%3E"); }
.ic-clear { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.2 1.8h3.6l.5 1.2H13v1.6H3V3h2.7zM4.1 5.6h7.8l-.6 8.6H4.7z'/%3E%3C/svg%3E"); }
.ic-refresh { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.2 8.4A5.2 5.2 0 1 1 11.6 4.3' fill='none' stroke='#000' stroke-width='1.9' stroke-linecap='round'/%3E%3Cpath d='M13.6 2.2v4.4H9.2z'/%3E%3C/svg%3E"); }
.ic-minimize { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='3' y='7.1' width='10' height='1.8' rx='.9'/%3E%3C/svg%3E"); }
.ic-restore { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='3.3' y='3.3' width='9.4' height='9.4' rx='1.4' fill='none' stroke='#000' stroke-width='1.7'/%3E%3C/svg%3E"); }
.ic-grid { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2' y='2' width='5.2' height='5.2' rx='1.1'/%3E%3Crect x='8.8' y='2' width='5.2' height='5.2' rx='1.1'/%3E%3Crect x='2' y='8.8' width='5.2' height='5.2' rx='1.1'/%3E%3Crect x='8.8' y='8.8' width='5.2' height='5.2' rx='1.1'/%3E%3C/svg%3E"); }
.ic-grip { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='5.5' cy='3.5' r='1.4'/%3E%3Ccircle cx='10.5' cy='3.5' r='1.4'/%3E%3Ccircle cx='5.5' cy='8' r='1.4'/%3E%3Ccircle cx='10.5' cy='8' r='1.4'/%3E%3Ccircle cx='5.5' cy='12.5' r='1.4'/%3E%3Ccircle cx='10.5' cy='12.5' r='1.4'/%3E%3C/svg%3E"); }
.ic-search { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='4.3' fill='none' stroke='#000' stroke-width='1.8'/%3E%3Cpath d='M10.3 10.3l3.4 3.4' stroke='#000' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E"); }
.ic-sun { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3Cpath d='M8 1.2v2.2M8 12.6v2.2M1.2 8h2.2M12.6 8h2.2M3.2 3.2l1.5 1.5M11.3 11.3l1.5 1.5M3.2 12.8l1.5-1.5M11.3 4.7l1.5-1.5' stroke='#000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.ic-moon { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.4 10.2A5.6 5.6 0 0 1 5.8 2.6a6 6 0 1 0 7.6 7.6z'/%3E%3C/svg%3E"); }
.ic-corner { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M14 2v12H2' fill='none' stroke='#000' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M14 7v7H7' fill='none' stroke='#000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.ic-check { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.6' fill='none' stroke='#000' stroke-width='1.6'/%3E%3Cpath d='M5 8.2l2.1 2.1L11.2 6' fill='none' stroke='#000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ic-x { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.6' fill='none' stroke='#000' stroke-width='1.6'/%3E%3Cpath d='M5.6 5.6l4.8 4.8M10.4 5.6l-4.8 4.8' stroke='#000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
.ic-warn { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.8l6.6 11.6H1.4z' fill='none' stroke='#000' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M8 6v3.4' stroke='#000' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.6' r='1'/%3E%3C/svg%3E"); }
.ic-info { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.6' fill='none' stroke='#000' stroke-width='1.6'/%3E%3Cpath d='M8 7v4.2' stroke='#000' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='4.9' r='1'/%3E%3C/svg%3E"); }

/* ---------- chrome: top bar ---------- */
#chrome { position: sticky; top: 0; z-index: 30; background: var(--bg); box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .55); }
#topbar {
  display: flex; align-items: center; gap: 16px;
  height: 54px; padding: 0 16px; border-bottom: 1px solid var(--line);
  background: var(--bg-1);
}
.brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px; letter-spacing: -.01em; white-space: nowrap; }
.brand b { color: var(--accent); font-weight: 700; }
.brand .mark {
  width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 2px 8px var(--accent-bg);
}
.symbol-form { display: flex; position: relative; align-items: center; }
.symbol-form > .ic { position: absolute; left: 11px; color: var(--fg-3); pointer-events: none; }
.symbol-form > kbd { position: absolute; right: 8px; pointer-events: none; opacity: .8; }
#symbol-input {
  width: 156px; height: 34px; padding: 0 34px 0 31px; font: 700 14px var(--mono); text-transform: uppercase;
  color: var(--fg); background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 8px; outline: none;
  letter-spacing: .04em; transition: border-color .12s, box-shadow .12s;
}
#symbol-input::placeholder { color: var(--fg-3); font-weight: 600; letter-spacing: .06em; }
#symbol-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
#symbol-input:focus ~ kbd { display: none; }
.quote-strip { display: flex; align-items: center; gap: 18px; min-width: 0; height: 34px; padding-left: 16px; border-left: 1px solid var(--line-2); }
.q-sym { font-weight: 800; font-size: 15px; letter-spacing: .02em; }
.q-cell { display: inline-flex; flex-direction: column; line-height: 1.15; }
.q-cell small { font-size: 9px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--fg-3); }
.q-last { font-size: 18px; font-weight: 700; line-height: 1.1; transition: color .15s; }
.q-last.flash-up { color: var(--up); }
.q-last.flash-down { color: var(--down); }
.q-chg { font-weight: 600; font-size: 13px; color: var(--fg-3); }
.q-ba { display: inline-flex; gap: 18px; }
.q-ba b { font-weight: 600; font-size: 13px; }
.q-ts { font-size: 11px; color: var(--fg-3); }
.top-right { margin-left: auto; display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; }

/* ---------- chrome: watchlist + banner ---------- */
.watchbar {
  display: flex; gap: 6px; align-items: center; padding: 6px 16px; overflow-x: auto;
  scrollbar-width: none; border-bottom: 1px solid var(--line);
}
.watchbar:empty { display: none; }
.watchbar::-webkit-scrollbar { display: none; }
.wchip {
  display: inline-flex; align-items: baseline; gap: 8px; padding: 4px 11px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg-1); white-space: nowrap; font-size: 12px; color: var(--fg-2);
  transition: background .12s, border-color .12s;
}
.wchip b { font-weight: 700; color: var(--fg); }
.wchip .px { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.wchip .chg { font-family: var(--mono); font-size: 11px; }
.wchip.active { border-color: var(--accent); background: var(--accent-bg); }
.wchip:hover { background: var(--bg-3); border-color: var(--line-2); }
.banner {
  margin: 8px 16px; padding: 8px 12px; border-radius: 8px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--warn); background: var(--warn-bg); color: var(--fg);
  display: flex; align-items: center; gap: 10px;
}
.banner.bad { border-color: var(--down); background: var(--down-bg); }
.banner.info { border-color: var(--accent); background: var(--accent-bg); }
.banner .spin { width: 10px; height: 10px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- desk layout ----------
   js/layout.js positions every card absolutely on a 12-column grid (drag by
   header, resize from the corner, minimize to the header). Below 980px it
   stacks (.compact). */
#desk { flex: 1; position: relative; padding: var(--gap) 16px; min-height: 400px; }
#desk .card { position: absolute; overflow: hidden; transition: left .14s ease, top .14s ease, width .14s ease, height .14s ease; }
#desk:not(.compact) .card-head { cursor: grab; touch-action: none; }
#desk:not(.compact) .card-title::before {
  content: ""; align-self: center; width: 9px; height: 13px; margin-right: 8px; flex: none; background: currentColor;
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='5.5' cy='3.5' r='1.4'/%3E%3Ccircle cx='10.5' cy='3.5' r='1.4'/%3E%3Ccircle cx='5.5' cy='8' r='1.4'/%3E%3Ccircle cx='10.5' cy='8' r='1.4'/%3E%3Ccircle cx='5.5' cy='12.5' r='1.4'/%3E%3Ccircle cx='10.5' cy='12.5' r='1.4'/%3E%3C/svg%3E");
  opacity: .28; transition: opacity .12s;
}
#desk:not(.compact) .card-head:hover .card-title::before { opacity: .8; }
#desk .card.dragging { transition: none; z-index: 25; opacity: .94; box-shadow: var(--shadow-pop); }
#desk .card.dragging .card-head { cursor: grabbing; }
#desk .card.resizing { transition: none; z-index: 25; }
#desk .placeholder { position: absolute; border: 1px dashed var(--accent); border-radius: var(--r); background: var(--accent-bg); pointer-events: none; z-index: 1; transition: left .1s, top .1s, width .1s, height .1s; }
body.desk-editing { user-select: none; }
#desk .card-head { padding-right: 42px; }
.card-min { position: absolute; top: 7px; right: 8px; color: var(--fg-3); }
.card-min:hover { color: var(--fg); }
.card.min > :not(.card-head) { display: none; }
.card.min .card-head { border-bottom: 0; flex-wrap: nowrap; border-radius: var(--r); }
.card.min .card-head > :not(.card-title):not(.card-min):not(.tabs) { display: none; }
.card.min .resizer { display: none; }
.resizer {
  position: absolute; right: 3px; bottom: 3px; width: 12px; height: 12px; cursor: nwse-resize; touch-action: none;
  opacity: .35; background: currentColor; color: var(--fg-3);
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M14 2v12H2' fill='none' stroke='#000' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M14 7v7H7' fill='none' stroke='#000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
.card:hover .resizer { opacity: .9; }
/* ---- mobile: one card at a time, switched from a bottom tab bar ----
   layout.js toggles .compact on #desk and .single-card on <body> from the same
   980px breakpoint. The active card flex-fills the viewport; the rest are .off. */
#desk.compact { display: flex; flex-direction: column; min-height: 0; }
#desk.compact .card { position: static; flex: 1; min-height: 0; }
#desk.compact .card.off { display: none; }
#desk.compact .card-min { display: none; }   /* no minimize in single-card mode */
#desk.compact .resizer, #desk.compact .placeholder { display: none; }

#card-tabs { display: none; }                 /* desktop: hidden (JS shows it in compact) */
body.single-card { height: 100%; overflow: hidden; }   /* app fills the viewport, no page scroll */
body.single-card #statusbar { display: none; }         /* the tab bar replaces it on mobile */
body.single-card #card-tabs {
  display: flex; flex: none; gap: 6px; overflow-x: auto; scrollbar-width: none;
  padding: 6px 10px calc(6px + env(safe-area-inset-bottom, 0px));
  background: var(--bg-1); border-top: 1px solid var(--line);
}
#card-tabs::-webkit-scrollbar { display: none; }
#card-tabs button {
  flex: none; padding: 9px 15px; border-radius: 999px; white-space: nowrap;
  font-size: 12px; font-weight: 600; color: var(--fg-2);
  background: var(--bg-2); border: 1px solid var(--line);
}
#card-tabs button.on { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }

/* ---------- primitives ---------- */
.card {
  background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow); display: flex; flex-direction: column; min-width: 0;
}
.card-head {
  display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 5px 12px;
  border-bottom: 1px solid var(--line); background: var(--bg-head); border-radius: var(--r) var(--r) 0 0;
  flex-wrap: wrap; flex: none;
}
.card-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--fg-2); display: flex; align-items: baseline; margin-right: auto; white-space: nowrap; }
.card-title small { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--fg-3); margin-left: 8px; }
.card-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1; min-height: 0; overflow: auto; }
.chart-card .chart-host { flex: 1; min-height: 0; position: relative; }
.hint { font-size: 11px; color: var(--fg-3); }
.state-msg { color: var(--fg-3); text-align: center; padding: 22px 8px; font-size: 12px; line-height: 1.5; }
.state-msg.err { color: var(--down); }
.scroll { border-radius: 6px; }

.pill {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 6px;
  font: 600 10.5px var(--mono); letter-spacing: .04em; color: var(--fg-2);
  background: var(--bg-2); border: 1px solid var(--line-2); white-space: nowrap;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: none; }
.pill.dot::before { display: inline-block; }
.pill.ok { color: var(--up); background: var(--up-bg); border-color: color-mix(in srgb, var(--up) 40%, transparent); }
.pill.warn { color: var(--warn); background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.pill.bad { color: var(--down); background: var(--down-bg); border-color: color-mix(in srgb, var(--down) 45%, transparent); }
.pill.info { color: var(--info); background: var(--info-bg); border-color: color-mix(in srgb, var(--info) 40%, transparent); }
.pill.hot { color: var(--warn); border-color: var(--warn); background: var(--warn-bg); }
.pill.ok.dot::before, .pill.bad.dot::before { box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent); }
.chips { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.chip {
  font: 600 10px var(--mono); padding: 2px 7px; border-radius: 5px; cursor: default;
  border: 1px solid var(--line); background: var(--bg-2); color: var(--fg-3);
}
.chip.live { color: var(--fg); }
.chip.err { color: var(--down); border-color: var(--down); background: var(--down-bg); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 30px; padding: 0 12px; border-radius: 7px; border: 1px solid var(--line-2);
  background: var(--bg-2); color: var(--fg); font-weight: 600; font-size: 12px; white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s, transform .05s;
}
.btn:hover { background: var(--bg-3); border-color: color-mix(in srgb, var(--fg-3) 55%, var(--line-2)); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.sm { height: 24px; padding: 0 8px; font-size: 11px; border-radius: 6px; }
.btn.icon { width: 30px; padding: 0; }
.btn.sm.icon { width: 24px; }
.btn.primary, .btn.on { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.btn.primary:hover, .btn.on:hover { background: var(--accent-2); border-color: var(--accent-2); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--fg-2); }
.btn.ghost:hover { background: var(--bg-3); border-color: var(--line-2); color: var(--fg); }
.btn.buy, .btn.sell {
  font-weight: 800; letter-spacing: .1em; font-size: 13px; height: 40px; border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(0, 0, 0, .25);
}
.btn.buy { background: var(--up); border-color: var(--up); color: var(--buy-fg); }
.btn.sell { background: var(--down); border-color: var(--down); color: #fff; }
.btn.buy:hover, .btn.sell:hover { filter: brightness(1.08); }
.btn.danger { color: var(--down); }

.seg { display: inline-flex; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 7px; padding: 2px; gap: 2px; }
.seg button {
  height: 22px; padding: 0 9px; border: 0; border-radius: 5px; background: transparent;
  color: var(--fg-3); font: 600 11px var(--mono); transition: background .12s, color .12s;
}
.seg button:hover { color: var(--fg); background: var(--bg-3); }
.seg button[aria-pressed="true"], .seg button.on { background: var(--accent); color: var(--accent-fg); }

.field { display: flex; flex-direction: column; gap: 4px; font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--fg-3); min-width: 0; }
.field.inline, .field.check { flex-direction: row; align-items: center; gap: 6px; text-transform: none; letter-spacing: 0; font-size: 11px; font-weight: 500; color: var(--fg-2); }
.field.check input { width: 15px; height: 15px; accent-color: var(--accent); }
.in {
  height: 30px; padding: 0 9px; border-radius: 6px; border: 1px solid var(--line-2); background: var(--bg-2);
  color: var(--fg); font: 600 13px var(--mono); outline: none; width: 100%; min-width: 0;
  font-variant-numeric: tabular-nums; transition: border-color .12s, box-shadow .12s;
}
.in:hover { border-color: color-mix(in srgb, var(--fg-3) 50%, var(--line-2)); }
.in:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.in:disabled { opacity: .5; }
.in::placeholder { color: var(--fg-3); font-weight: 500; }
.field.inline .in { width: 68px; height: 26px; }
select.in {
  appearance: none; padding-right: 24px;
  background-image: linear-gradient(45deg, transparent 50%, var(--fg-3) 50%), linear-gradient(135deg, var(--fg-3) 50%, transparent 50%);
  background-position: calc(100% - 13px) 12px, calc(100% - 9px) 12px; background-size: 4px 4px; background-repeat: no-repeat;
}
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.form-actions { display: flex; gap: 6px; align-self: flex-end; }

.tbl { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.tbl th {
  position: sticky; top: 0; z-index: 1; background: var(--bg-1);
  text-align: left; color: var(--fg-3); font: 600 10px/1.2 var(--font); letter-spacing: .07em;
  text-transform: uppercase; padding: 6px 8px; box-shadow: inset 0 -1px 0 var(--line); white-space: nowrap;
}
.tbl td { padding: 4px 8px; height: 26px; border-bottom: 1px solid var(--row-line); white-space: nowrap; }
.tbl tbody tr:nth-child(even) td { background: var(--zebra); }
.tbl .num, .tbl td.num { text-align: right; }
.tbl tbody tr { cursor: pointer; }
.tbl tbody tr:hover td { background: var(--bg-3); }
.tbl .x {
  background: none; border: 1px solid var(--line-2); color: var(--down);
  border-radius: 5px; padding: 1px 7px; font-size: 11px; line-height: 1.4;
}
.tbl .x:hover { background: var(--down-bg); border-color: var(--down); }

.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.stats .stat { background: var(--bg-2); border: 1px solid var(--line); border-radius: 7px; padding: 7px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stats .stat small { font-size: 9px; text-transform: uppercase; letter-spacing: .08em; color: var(--fg-3); font-weight: 600; }
.stats .stat b { font-weight: 700; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; }
.stats:empty { display: none; }

/* ---------- ticket ---------- */
.ticket-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; align-items: end; }
.ticket-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--fg-2); font-family: var(--mono); }
.ticket-actions { display: flex; gap: 8px; }
.ticket-actions .btn { flex: 1; }
.ticket-actions.secondary .btn { height: 28px; font-size: 12px; }
#order-card.real .card-head { box-shadow: inset 0 -2px 0 var(--down); }
#order-card.locked .btn.buy, #order-card.locked .btn.sell { opacity: .4; filter: grayscale(.5); }

/* ---------- level 2 ---------- */
.ladder { display: flex; flex-direction: column; gap: 1px; font-size: 12px; }
.ladder .spread { text-align: center; color: var(--fg-3); font-size: 11px; padding: 2px 0 4px; }
.ladder .lvl { display: grid; grid-template-columns: 1fr 72px 72px 1fr; align-items: center; gap: 6px; }
.ladder .sz { position: relative; height: 19px; display: flex; align-items: center; }
.ladder .sz i { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
.ladder .bid-sz i { right: 0; background: var(--up-bg); }
.ladder .ask-sz i { left: 0; background: var(--down-bg); }
.ladder .sz b { position: relative; z-index: 1; font-weight: 600; padding: 0 5px; }
.ladder .bid-sz { justify-content: flex-end; }
.ladder .px { text-align: center; padding: 1px 0; border-radius: 4px; cursor: pointer; font-weight: 600; }
.ladder .bid-px { color: var(--up); } .ladder .ask-px { color: var(--down); }
.ladder .px:hover { background: var(--bg-3); }
.ladder.frozen, .tape.frozen { opacity: .5; }

/* ---------- tape ---------- */
.tape { font-size: 11px; flex: 1; min-height: 0; overflow-y: auto; }
.tape .pr { display: grid; grid-template-columns: 64px 1fr 66px 52px; gap: 6px; padding: 1px 4px; border-radius: 3px; }
.tape .pr.buy { color: var(--up); } .tape .pr.sell { color: var(--down); } .tape .pr.neutral { color: var(--fg-3); }
.tape .pr.big { background: var(--bg-2); font-weight: 700; }
.feed-ctl { display: flex; align-items: center; gap: 4px; }
.feed-state.live { color: var(--up); background: var(--up-bg); border-color: color-mix(in srgb, var(--up) 40%, transparent); }
.feed-state.paused { color: var(--warn); background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }

/* ---------- opportunities (tabs) ---------- */
.tabs-head { gap: 14px; }
.tabs { display: inline-flex; gap: 2px; align-self: stretch; }
.tabs button {
  padding: 0 12px; border: 0; border-bottom: 2px solid transparent; background: transparent;
  color: var(--fg-3); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .09em;
  margin-bottom: -6px; padding-bottom: 6px; transition: color .12s, border-color .12s;
}
.tabs button[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--accent); }
.tabs button:hover { color: var(--fg); }
.head-tools { display: flex; align-items: center; gap: 8px; flex: 1; flex-wrap: wrap; justify-content: flex-end; }
.tab-pane { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 0; overflow: auto; }
.flow-meter { display: flex; align-items: center; gap: 8px; font: 600 11px var(--mono); margin-right: auto; }
.flow-meter .bull { color: var(--up); } .flow-meter .bear { color: var(--down); }
.flow-meter .bar { width: 160px; height: 6px; border-radius: 3px; overflow: hidden; background: var(--down); display: block; }
.flow-meter .bar i { display: block; height: 100%; width: 50%; background: var(--up); transition: width .3s; }
.flow-meter .bar.empty { background: var(--line-2); }
.hot-strip { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font: 11px var(--mono); }
.hot-strip:empty { display: none; }
.hot-strip small { color: var(--fg-3); text-transform: uppercase; font-size: 9px; letter-spacing: .08em; }
.hot-strip .hotc { padding: 3px 8px; border-radius: 6px; cursor: pointer; border: 1px solid var(--line); background: var(--bg-2); }
.hot-strip .hotc.bull { border-color: color-mix(in srgb, var(--up) 50%, transparent); } .hot-strip .hotc.bear { border-color: color-mix(in srgb, var(--down) 50%, transparent); }
.hot-strip .hotc:hover { background: var(--bg-3); }
#flow-tbl td { font-size: 11px; }
#flow-tbl tr.bull td:first-child { box-shadow: inset 3px 0 0 var(--up); }
#flow-tbl tr.bear td:first-child { box-shadow: inset 3px 0 0 var(--down); }
#flow-tbl tr.whale td { background: var(--warn-bg); }
#flow-tbl tr.whale td.prem { color: var(--warn); }
#flow-tbl tr.fresh td { animation: flash 1.2s ease-out; }
@keyframes flash { from { background: var(--accent-bg); } }
#flow-tbl td.side { font-weight: 700; }
#flow-tbl td.side.ask { color: var(--up); } #flow-tbl td.side.bid { color: var(--down); } #flow-tbl td.side.mid { color: var(--fg-3); }
#flow-tbl td.prem { font-weight: 700; }
#flow-tbl td.prem.bull { color: var(--up); } #flow-tbl td.prem.bear { color: var(--down); }
#flow-tbl td.unusual { color: var(--warn); font-weight: 700; }
.flag { display: inline-block; font-size: 9px; font-weight: 700; padding: 0 4px; margin-right: 3px; border-radius: 4px; border: 1px solid var(--line-2); color: var(--fg-3); }
.flag.sweep { color: var(--warn); border-color: var(--warn); }
.flag.open { color: var(--accent); border-color: var(--accent); }
.flag.zero { color: var(--purple); border-color: var(--purple); }
.rank-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.rank-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.rank-head h3 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--fg-2); }
#rank-underlyings td { font-size: 11px; }

/* ---------- screener ---------- */
#screener-tbl td.gap-up { color: var(--up); font-weight: 700; }
#screener-tbl td.gap-down { color: var(--down); font-weight: 700; }
.hotdot { color: var(--warn); }
#screener-tbl td.age.fresh { color: var(--accent); font-weight: 700; }
#screener-tbl td.age.old { color: var(--warn); }

/* ---------- status bar / toasts ---------- */
#statusbar {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  min-height: 34px; padding: 5px 16px; border-top: 1px solid var(--line); background: var(--bg-1);
  color: var(--fg-3); font-size: 11px;
}
#statusbar .keys { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
#statusbar .keys span { display: inline-flex; align-items: center; gap: 5px; }
#statusbar .arm { color: var(--up); font-weight: 700; letter-spacing: .07em; }
#statusbar .arm.off { color: var(--warn); }
#statusbar .meta { display: flex; gap: 12px; align-items: center; }
.status-msg { flex: 1; text-align: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#toasts { position: fixed; right: 16px; bottom: 44px; display: flex; flex-direction: column; gap: 6px; z-index: 50; }
.toast {
  background: var(--bg-2); border: 1px solid var(--line-2); border-left: 3px solid var(--accent);
  color: var(--fg); border-radius: 8px; padding: 8px 12px; font-size: 12px;
  max-width: 360px; box-shadow: var(--shadow-pop); animation: slidein .15s ease-out;
  display: flex; gap: 9px; align-items: center;
}
.toast::before { content: ""; width: 14px; height: 14px; flex: none; background: var(--accent); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.6' fill='none' stroke='#000' stroke-width='1.6'/%3E%3Cpath d='M8 7v4.2' stroke='#000' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='4.9' r='1'/%3E%3C/svg%3E"); }
.toast.ok { border-left-color: var(--up); } .toast.ok::before { background: var(--up); --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.6' fill='none' stroke='#000' stroke-width='1.6'/%3E%3Cpath d='M5 8.2l2.1 2.1L11.2 6' fill='none' stroke='#000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.toast.err { border-left-color: var(--down); } .toast.err::before { background: var(--down); --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.6' fill='none' stroke='#000' stroke-width='1.6'/%3E%3Cpath d='M5.6 5.6l4.8 4.8M10.4 5.6l-4.8 4.8' stroke='#000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
.toast.warn { border-left-color: var(--warn); } .toast.warn::before { background: var(--warn); --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.8l6.6 11.6H1.4z' fill='none' stroke='#000' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M8 6v3.4' stroke='#000' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.6' r='1'/%3E%3C/svg%3E"); }
.toast .msg { flex: 1; }
.toast .count { font: 700 10px var(--mono); padding: 1px 6px; border-radius: 999px; background: var(--bg-3); color: var(--fg-2); }
@keyframes slidein { from { transform: translateX(20px); opacity: 0; } }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .q-ts { display: none; }
}
@media (max-width: 980px) {
  .rank-grid { grid-template-columns: 1fr; }
  .q-ba { display: none; }
}
@media (max-width: 640px) {
  /* never let a stray wide element scroll the whole page sideways */
  body { overflow-x: hidden; }
  /* a phone can't spare a third of its height for a pinned header */
  #chrome { position: static; box-shadow: none; }
  #clock { display: none; }
  #topbar { height: auto; flex-wrap: wrap; gap: 8px 10px; padding: 8px 12px; }
  .brand { font-size: 14px; }
  .symbol-form { flex: 1 1 130px; }            /* search grows to fill its row */
  #symbol-input { width: 100%; height: 38px; }
  .quote-strip { order: 3; width: 100%; padding-left: 0; border-left: 0; height: auto; gap: 14px; }
  .q-last { font-size: 16px; }
  .top-right { margin-left: 0; flex-wrap: wrap; justify-content: flex-end; }
  #desk { padding: 8px 10px; }
  .ticket-grid { grid-template-columns: 1fr 1fr; }
  #statusbar { font-size: 10.5px; padding: 6px 12px; }
  #statusbar .keys span { display: none; }
  #statusbar .keys .arm { display: flex; }
  .flow-meter .bar { width: 90px; }
  /* flow table on a phone: drop Bid×Ask, Spot, IV, Δ (the row still scrolls) */
  #flow-tbl th:nth-child(7), #flow-tbl td:nth-child(7),
  #flow-tbl th:nth-child(9), #flow-tbl td:nth-child(9),
  #flow-tbl th:nth-child(11), #flow-tbl td:nth-child(11),
  #flow-tbl th:nth-child(12), #flow-tbl td:nth-child(12) { display: none; }

  /* finger-friendly tap targets (desktop stays dense) */
  .btn.sm { height: 30px; padding: 0 11px; font-size: 12px; }
  .btn.icon { width: 34px; height: 34px; }
  .btn.sm.icon { width: 30px; height: 30px; }
  .seg button { padding: 7px 12px; }
  .field .in, .field.inline .in { height: 32px; }
  .field.check input { width: 18px; height: 18px; }
  .wchip { padding: 7px 12px; font-size: 13px; }
  .tbl td, .tbl th { height: 32px; }

  /* toasts + dialogs fit the viewport instead of poking off-screen */
  #toasts { left: 12px; right: 12px; bottom: 12px; }
  .toast { max-width: none; }
  .login-overlay, .modal-overlay { padding: 14px; }
  .modal-card { max-height: 90vh; }
}
@media (max-width: 400px) {
  .quote-strip { gap: 10px; }
  .q-sym { font-size: 13px; }
  .top-right .pill { font-size: 10px; padding: 0 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .toast, #flow-tbl tr.fresh td, .banner .spin, #desk .card { animation: none; transition: none; }
}

/* ---- audit trail card ---- */
#audit-tbl td { font-size: 11px; }
#audit-tbl td.ev { font-family: var(--mono); font-weight: 600; color: var(--fg-2); }
#audit-tbl tr.ev-ok td.ev { color: var(--up); }
#audit-tbl tr.ev-bad td.ev { color: var(--down); }
#audit-tbl tr.ev-warn td.ev { color: var(--warn); }
#audit-tbl tr.ev-req td.ev { color: var(--accent); }

/* ---- auth: login overlay, topbar user chip, role gating ---- */
.login-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: radial-gradient(1100px 560px at 50% -12%, var(--accent-bg), transparent), var(--bg);
}
.login-card {
  width: 100%; max-width: 340px;
  display: flex; flex-direction: column; gap: 14px;
  padding: 28px 26px 26px;
  background: var(--bg-head); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow-pop);
}
.login-brand { display: flex; align-items: center; gap: 8px; font-size: 19px; color: var(--fg); }
.login-brand .mark { color: var(--accent); display: inline-flex; }
.login-title { margin: 2px 0 4px; font-size: 13px; font-weight: 500; color: var(--fg-2); }
.login-field { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--fg-2); }
.login-field input {
  font: inherit; font-size: 14px; color: var(--fg);
  padding: 9px 11px; border-radius: 8px; outline: none;
  background: var(--bg); border: 1px solid var(--line);
}
.login-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.login-error { margin: 0; font-size: 12px; color: var(--down); }
.login-submit {
  margin-top: 4px; font: inherit; font-weight: 600; font-size: 14px; cursor: pointer;
  padding: 10px; border-radius: 8px; border: 0;
  color: var(--accent-fg); background: var(--accent);
}
.login-submit:hover { filter: brightness(1.08); }
.login-google { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.google-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer;
  padding: 10px; border-radius: 8px;
  color: var(--fg); background: var(--bg); border: 1px solid var(--line);
}
.google-btn:hover { border-color: var(--accent); background: var(--accent-bg); }
.login-divider {
  display: flex; align-items: center; gap: 10px; width: 100%;
  color: var(--fg-3); font-size: 11px;
}
.login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.user-chip { display: inline-flex; align-items: center; gap: 7px; }
.user-name {
  font-size: 12px; color: var(--fg); max-width: 120px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.role-badge {
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  padding: 2px 6px; border-radius: 999px;
}
.role-badge.trader { color: var(--up); background: var(--up-bg); }
.role-badge.user { color: var(--info); background: var(--info-bg); }

/* a 'user' (market data only) loses the trading-only chrome */
body.no-trade .trade-only { display: none !important; }

/* user-admin modal (trader only) */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(0, 0, 0, .55);
}
.modal-card {
  width: 100%; max-width: 480px; max-height: 84vh; overflow: auto;
  display: flex; flex-direction: column; gap: 14px;
  padding: 20px 22px 22px;
  background: var(--bg-head); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow-pop);
}
.modal-head { display: flex; align-items: center; justify-content: space-between; }
.modal-head h2 { margin: 0; font-size: 15px; }
.admin-list { display: flex; flex-direction: column; gap: 6px; }
.admin-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg);
}
.admin-who { display: flex; flex-direction: column; gap: 1px; margin-right: auto; min-width: 0; }
.admin-who b { font-size: 13px; }
.admin-sub { font-size: 11px; color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.via-badge { font-size: 10px; color: var(--fg-2); border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; }
.admin-empty { color: var(--fg-3); font-size: 12px; margin: 4px 2px; }
.admin-add { display: flex; flex-direction: column; gap: 9px; border-top: 1px solid var(--line); padding-top: 14px; }
.admin-add h3 { margin: 0; font-size: 12px; font-weight: 600; color: var(--fg-2); }
.admin-add-row { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-add-row > * { flex: 1; min-width: 120px; }
.admin-add input, .admin-add select {
  font: inherit; font-size: 13px; color: var(--fg);
  padding: 8px 10px; border-radius: 8px; outline: none;
  background: var(--bg); border: 1px solid var(--line);
}
.admin-add input:focus, .admin-add select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }