:root {
  --gutter: clamp(12px, 1.4vw, 24px);   /* outer horizontal padding: 12px on phones, up to 24px on desktop */
  --gap: clamp(10px, 0.9vw, 16px);      /* space between tiles */
  --bg: #eef0f4;
  --tile: #ffffff;
  --tile-2: #f6f7fa;
  --line: #e2e5eb;
  --text: #12151b;
  --muted: #6a7282;
  --accent: #f7931a;
  --accent-soft: #fff1de;
  --good: #0c8f61;
  --good-rgb: 16, 160, 108;
  --bad: #d23447;
  --bad-rgb: 220, 52, 72;
  --warn: #b26b00;
  --warn-rgb: 230, 150, 20;
  --spot: #2f6bff;
  --pick: #ff8a00;
  --hedge: #7c5cff;
  --itm: rgba(120, 130, 150, .10);
  --radius: 20px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px -12px rgba(16, 24, 40, .10);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a0c10; --tile: #13161c; --tile-2: #1a1e26; --line: #252a33; --text: #e8ebf1; --muted: #8a93a4;
    --accent-soft: #2c2010; --good: #33d69c; --bad: #ff6676; --warn: #f5b041; --spot: #6b9bff;
    --itm: rgba(140, 150, 170, .07); --shadow: none; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0a0c10; --tile: #13161c; --tile-2: #1a1e26; --line: #252a33; --text: #e8ebf1; --muted: #8a93a4;
  --accent-soft: #2c2010; --good: #33d69c; --bad: #ff6676; --warn: #f5b041; --spot: #6b9bff;
  --itm: rgba(140, 150, 170, .07); --shadow: none; color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }  /* layout rules (display: grid / flex) must not override the hidden attribute */
html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { min-width: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-variant-numeric: tabular-nums;
}
h1, h2 { margin: 0; font-weight: 600; }
h1 { font-size: 15px; }
h2 { font-size: 13px; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
button { font: inherit; color: inherit; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.up { color: var(--good); }
.down { color: var(--bad); }

/* ---------- top bar ---------- */
.topbar {
  /* [ brand ]   [ tabs (+ expiry) ]   [ status | actions ] - one row on desktop; the middle gives way first */
  --nav-gap: 12px;          /* between controls inside a group */
  --nav-group-gap: 20px;    /* between groups / sections */
  --nav-h: 34px;            /* every control in the bar has this height */
  position: sticky; top: 0; z-index: 10;
  display: flex; flex-wrap: nowrap; gap: var(--nav-group-gap); align-items: center; justify-content: space-between;
  min-height: 64px;
  padding: 10px var(--gutter);
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; gap: 10px; align-items: center; }
.navbar-left { flex: 0 0 auto; min-width: 0; }
.brand-text { min-width: 0; }
.brand-text h1, .brand-text .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.navbar-center {
  flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; align-items: center; gap: var(--nav-gap);
  overflow-x: auto; scrollbar-width: none;      /* if it ever runs out of room it scrolls, it never overlaps */
}
.navbar-center::-webkit-scrollbar { display: none; }
.navbar-center > nav { flex: 0 0 auto; }
.navbar-right { flex: 0 0 auto; display: flex; align-items: center; gap: var(--nav-group-gap); }
.nav-group { display: flex; align-items: center; gap: var(--nav-gap); }
.nav-sep { width: 1px; height: 24px; background: var(--line); flex: 0 0 auto; }
.btn.nav-btn {
  height: var(--nav-h); padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  white-space: nowrap; font-size: 12px; border-radius: 10px; line-height: 1; text-decoration: none; color: inherit;
}
.btn.nav-btn.primary { color: #fff; }
.btn.nav-btn.danger { color: var(--bad); }
.btn.nav-btn.kill { padding: 0 14px; }
.btn.nav-btn.kill:hover { color: #fff; }
.btn.nav-btn .ico { font-size: 14px; line-height: 1; }
.notif-btn { min-width: var(--nav-h); }
.navbar-right .live { height: var(--nav-h); white-space: nowrap; }
.brand-mark {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: var(--accent); color: #fff; font-weight: 700; font-size: 17px;
}
.sub { margin: 0; font-size: 12px; color: var(--muted); }
.symbols { display: flex; gap: 6px; background: var(--tile); border: 1px solid var(--line); padding: 4px; border-radius: 14px; }
.symbols button {
  border: 0; background: transparent; cursor: pointer; padding: 6px 14px; border-radius: 10px;
  display: grid; text-align: left; line-height: 1.2; min-width: 92px;
}
.symbols button b { font-size: 13px; }
.symbols button span { font-size: 11px; color: var(--muted); }
.symbols button.on { background: var(--text); color: var(--tile); }
.symbols button.on span { color: color-mix(in srgb, var(--tile) 75%, transparent); }
.symbols button:focus-visible, .bias button:focus-visible, .seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.live { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
.live i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.live.ok i { background: var(--good); box-shadow: 0 0 0 3px rgba(var(--good-rgb), .2); }
.live.stale i { background: var(--bad); }

/* ---------- bento grid ----------
   Full viewport width; the arrangement changes with the screen (see the media queries at the end). */
.bento {
  width: 100%;
  padding: var(--gap) var(--gutter) calc(var(--gap) * 2);
  display: grid;
  gap: var(--gap);
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "hero" "verd" "range" "atr" "stats" "frozen" "alerts" "cand" "chain" "levels" "prob";
}
#hero { grid-area: hero; }
#day-card { grid-area: verd; }
#t-range { grid-area: range; }
#t-atr { grid-area: atr; }
#stats-card { grid-area: stats; }
#frozen-card { grid-area: frozen; }
#alerts-card { grid-area: alerts; }
#cand-card { grid-area: cand; }
#chain-card { grid-area: chain; }
#levels-card { grid-area: levels; }
#prob-card { grid-area: prob; }

.tile {
  background: var(--tile); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--shadow); min-width: 0;
}
.tile-head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.banner { margin: var(--gap) var(--gutter) 0; padding: 12px 16px; border-radius: 14px; background: rgba(var(--bad-rgb), .12); color: var(--bad); font-weight: 500; }

/* hero */
.hero {
  display: flex; flex-direction: column; justify-content: space-between; gap: 14px;
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
    var(--tile);
}
.hero .sym { display: flex; align-items: center; gap: 10px; }
.hero .sym b { font-size: 18px; }
.hero .price { font-size: clamp(34px, 2.6vw, 48px); font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.hero .chg { font-size: 15px; font-weight: 600; margin-top: 6px; }
.hero .meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hero .meta div { background: var(--tile-2); border-radius: 12px; padding: 8px 10px; }
.hero .meta span { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.hero .meta b { font-size: 15px; }
.chip { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.chip.session { background: rgba(var(--good-rgb), .15); color: var(--good); }
.chip.pre-open { background: rgba(var(--warn-rgb), .16); color: var(--warn); }

/* stat tiles */
.stat .label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.stat .value { font-size: 26px; font-weight: 700; margin-top: 4px; overflow-wrap: anywhere; }
.stat .foot { font-size: 12px; color: var(--muted); margin-top: 4px; }
.stat-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.stat-pair > div + div { border-left: 1px solid var(--line); padding-left: 14px; }
.meter { position: relative; height: 8px; border-radius: 4px; background: var(--tile-2); margin-top: 10px; overflow: hidden; }
.meter > i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--good), var(--warn) 60%, var(--bad)); border-radius: 4px; }
.meter > em { position: absolute; top: -3px; bottom: -3px; left: 50%; width: 2px; background: var(--text); opacity: .5; }

/* verdict */
.verdict-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.big-verdict { font-size: 30px; font-weight: 800; letter-spacing: .03em; padding: 4px 16px; border-radius: 14px; }
.big-verdict.trade { background: rgba(var(--good-rgb), .14); color: var(--good); }
.big-verdict.skip { background: rgba(var(--bad-rgb), .14); color: var(--bad); }
.big-verdict.pending { background: rgba(var(--warn-rgb), .15); color: var(--warn); }
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.checks li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 10px; border-radius: 10px; background: var(--tile-2); }
.checks .mark { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: 11px; font-weight: 800; margin-right: 8px; }
.checks li.ok .mark { background: rgba(var(--good-rgb), .18); color: var(--good); }
.checks li.fail .mark { background: rgba(var(--bad-rgb), .18); color: var(--bad); }
.checks li.wait .mark { background: rgba(var(--warn-rgb), .18); color: var(--warn); }
.note { font-size: 12px; color: var(--muted); margin: 10px 0 0; }

.bias, .seg { display: inline-flex; gap: 2px; background: var(--tile-2); padding: 3px; border-radius: 10px; }
.bias button, .seg button { border: 0; background: transparent; padding: 5px 11px; border-radius: 8px; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--muted); }
.bias button.on, .seg button.on { background: var(--tile); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.bias button[data-bias="up"].on { color: var(--good); }
.bias button[data-bias="down"].on { color: var(--bad); }
.bias button[disabled] { opacity: .6; cursor: progress; }

/* lists */
table { border-collapse: collapse; width: 100%; }
.table-wrap { overflow-x: auto; }
.list th, .list td { padding: 7px 8px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.list th:first-child, .list td:first-child { text-align: left; }
.list th { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.list tr:last-child td { border-bottom: 0; }
.side { display: inline-block; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 6px; }
.side.call { background: rgba(var(--good-rgb), .14); color: var(--good); }
.side.put { background: rgba(var(--bad-rgb), .14); color: var(--bad); }
.status-chip { padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.status-chip.ok { background: var(--tile-2); color: var(--muted); }
.status-chip.book { background: rgba(var(--good-rgb), .16); color: var(--good); }
.status-chip.defend { background: rgba(var(--bad-rgb), .16); color: var(--bad); }
.empty { color: var(--muted); padding: 10px 0; margin: 0; }

.alerts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 300px; overflow-y: auto; }
.alerts li { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; padding: 9px 11px; border-radius: 12px; background: var(--tile-2); border-left: 3px solid var(--line); }
.alerts li.BOOK { border-left-color: var(--good); }
.alerts li.DEFEND { border-left-color: var(--bad); }
.alerts li.ADD { border-left-color: var(--warn); }
.alerts .k { font-size: 11px; font-weight: 800; }
.alerts li.BOOK .k { color: var(--good); } .alerts li.DEFEND .k { color: var(--bad); } .alerts li.ADD .k { color: var(--warn); }
.alerts .t { font-size: 12px; color: var(--muted); justify-self: end; }
.alerts .msg { grid-column: 1 / -1; font-size: 13px; }

/* ---------- strike table ---------- */
.legend { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; font-size: 12px; margin: -2px 0 12px; }
.legend-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.legend-group > b { font-weight: 600; color: var(--muted); margin-right: 2px; }
.rk { font-style: normal; padding: 2px 7px; border-radius: 6px; font-weight: 600; }
.pk-scale { display: inline-block; width: 90px; height: 10px; border-radius: 5px; background: linear-gradient(90deg, rgba(var(--bad-rgb), 0), rgba(var(--bad-rgb), .55)); border: 1px solid var(--line); }
.tag { font-style: normal; font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 5px; letter-spacing: .03em; }
.tag.sell { background: var(--pick); color: #fff; }
.tag.hedge { background: var(--hedge); color: #fff; }
.tag.lvl { background: rgba(var(--warn-rgb), .18); color: var(--warn); }
.swatch { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--line); }
.swatch.itm { background: repeating-linear-gradient(135deg, var(--itm) 0 4px, transparent 4px 8px), var(--tile-2); }

/* richness scale (cells + legend) */
.r0 { background: rgba(var(--bad-rgb), .16); color: var(--bad); }
.r1 { background: rgba(var(--warn-rgb), .16); color: var(--warn); }
.r2 { background: rgba(var(--good-rgb), .14); color: var(--good); }
.r3 { background: rgba(var(--good-rgb), .28); color: var(--good); }
.r4 { background: rgba(var(--good-rgb), .45); color: var(--text); }

.chain { font-size: 13px; }
.chain th, .chain td { padding: 6px 8px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--line); }
.chain thead th { position: sticky; top: 0; background: var(--tile); font-size: 11px; font-weight: 600; color: var(--muted); z-index: 1; }
.chain thead tr.sides th { font-size: 12px; font-weight: 800; text-align: center; letter-spacing: .08em; border-bottom: 0; }
.chain thead tr.sides th.c { color: var(--good); background: linear-gradient(0deg, rgba(var(--good-rgb), .10), transparent); }
.chain thead tr.sides th.p { color: var(--bad); background: linear-gradient(0deg, rgba(var(--bad-rgb), .10), transparent); }
.chain th.strike, .chain td.strike { text-align: center; font-weight: 700; background: var(--tile-2); position: sticky; left: 0; z-index: 1; min-width: 92px; }
.chain td.richness { font-weight: 700; }
.chain td.itm { background-image: repeating-linear-gradient(135deg, var(--itm) 0 4px, transparent 4px 8px); color: var(--muted); }
.chain td.sel { box-shadow: inset 0 2px 0 var(--pick), inset 0 -2px 0 var(--pick); background-color: color-mix(in srgb, var(--pick) 10%, transparent); }
.chain td.sel.edge-l { box-shadow: inset 2px 0 0 var(--pick), inset 0 2px 0 var(--pick), inset 0 -2px 0 var(--pick); }
.chain td.sel.edge-r { box-shadow: inset -2px 0 0 var(--pick), inset 0 2px 0 var(--pick), inset 0 -2px 0 var(--pick); }
.chain td.hdg { box-shadow: inset 0 2px 0 var(--hedge), inset 0 -2px 0 var(--hedge); }
.chain td .tags { display: inline-flex; gap: 3px; margin-left: 5px; vertical-align: 1px; }
.chain tr.spot td { padding: 0; height: 0; border-bottom: 2px solid var(--spot); }
.chain tr.spot td.strike { background: transparent; overflow: visible; }
.chain tr.spot td.strike span { position: relative; display: inline-block; transform: translateY(-50%); background: var(--spot); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.chain tbody tr:hover td:not(.strike) { filter: brightness(.97); }
.chain.hide-call .c, .chain.hide-put .p { display: none; }

/* other tables */
.kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; text-align: right; font-weight: 600; }
.prob th, .prob td { padding: 7px 8px; text-align: right; border-bottom: 1px solid var(--line); }
.prob th { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.prob th:first-child, .prob td:first-child { text-align: left; }
.bar { display: inline-block; height: 8px; border-radius: 4px; vertical-align: middle; margin-left: 8px; }
.bar.c { background: var(--bad); opacity: .7; }
.bar.t { background: var(--warn); opacity: .7; }
footer.foot { font-size: 12px; text-align: center; padding: 0 var(--gutter) calc(var(--gap) * 2); margin-top: calc(var(--gap) * -1); }

/* ---------- responsive ----------
   < 640     phone: one column (default above)
   640-1023  tablet: 6 columns
   1024-1439 laptop: 12 columns, alerts beside shortlist + candidates
   1440-2199 desktop: 12 columns, hero and day filter side by side with the stat tiles
   >= 2200   ultrawide: shortlist / candidates / alerts in one row, strike table beside price action */
@media (max-width: 639px) {
  .symbols { width: 100%; }
  .symbols button { flex: 1; min-width: 0; }
  .stat-pair { grid-template-columns: minmax(0, 1fr); }
  .stat-pair > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 12px; }
}
@media (min-width: 640px) {
  .bento {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-areas:
      "hero hero hero hero hero hero"
      "verd verd verd verd verd verd"
      "range range range atr atr atr"
      "stats stats stats stats stats stats"
      "frozen frozen frozen frozen frozen frozen"
      "alerts alerts alerts alerts alerts alerts"
      "cand cand cand cand cand cand"
      "chain chain chain chain chain chain"
      "levels levels levels prob prob prob";
  }
}
@media (min-width: 1024px) {
  .bento {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-areas:
      "hero hero hero hero hero verd verd verd verd verd verd verd"
      "range range range atr atr atr stats stats stats stats stats stats"
      "frozen frozen frozen frozen frozen frozen frozen alerts alerts alerts alerts alerts"
      "cand cand cand cand cand cand cand alerts alerts alerts alerts alerts"
      "chain chain chain chain chain chain chain chain chain chain chain chain"
      "levels levels levels levels levels levels prob prob prob prob prob prob";
  }
}
@media (min-width: 1440px) {
  .bento {
    grid-template-areas:
      "hero hero hero hero verd verd verd verd verd range range range"
      "hero hero hero hero verd verd verd verd verd atr atr atr"
      "frozen frozen frozen frozen frozen frozen frozen alerts alerts alerts alerts alerts"
      "cand cand cand cand cand cand cand stats stats stats stats stats"
      "chain chain chain chain chain chain chain chain chain chain chain chain"
      "levels levels levels levels levels levels prob prob prob prob prob prob";
  }
}
@media (min-width: 2200px) {
  .bento {
    grid-template-areas:
      "hero hero hero verd verd verd verd range range atr atr atr"
      "hero hero hero verd verd verd verd stats stats stats stats stats"
      "frozen frozen frozen frozen cand cand cand cand alerts alerts alerts alerts"
      "chain chain chain chain chain chain chain chain chain levels levels levels"
      "chain chain chain chain chain chain chain chain chain prob prob prob";
    grid-template-rows: auto auto auto auto 1fr;
  }
  #levels-card, #prob-card { align-self: start; }
}

/* ---------- expiry switch ---------- */
.expiries { display: flex; gap: 4px; background: var(--tile); border: 1px solid var(--line); padding: 4px; border-radius: 14px; }
.expiries[hidden] { display: none; }
.expiries button { border: 0; background: transparent; cursor: pointer; padding: 5px 12px; border-radius: 10px; display: grid; text-align: left; line-height: 1.2; }
.expiries button b { font-size: 12px; }
.expiries button span { font-size: 11px; color: var(--muted); }
.expiries button.on { background: var(--accent); color: #fff; }
.expiries button.on span { color: rgba(255, 255, 255, .85); }
.symbols button.basket-tab { border-left: 1px solid var(--line); border-radius: 0 10px 10px 0; }
.symbols button.basket-tab.on { border-radius: 10px; }
.chip.forward { background: rgba(var(--good-rgb), .10); color: var(--spot); }
.big-verdict.na { background: var(--tile-2); color: var(--muted); }

/* ---------- buttons, forms, dialog ---------- */
.btn { border: 1px solid var(--line); background: var(--tile-2); padding: 6px 12px; border-radius: 10px; cursor: pointer; font-size: 12px; font-weight: 600; }
.btn:hover { filter: brightness(1.05); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.danger { color: var(--bad); }
.btn.small { padding: 3px 8px; font-size: 11px; border-radius: 8px; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.bk-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.bk-list { display: flex; flex-wrap: wrap; gap: 8px; }
.bk-list button { border: 1px solid var(--line); background: var(--tile-2); border-radius: 12px; padding: 8px 14px; cursor: pointer; display: grid; text-align: left; min-width: 150px; }
.bk-list button b { font-size: 13px; }
.bk-list button span { font-size: 12px; }
.bk-list button.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.bk-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 12px; align-items: end; }
.bk-form label, .dlg label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); font-weight: 600; }
.bk-form select, .bk-form input, .dlg select, .dlg input {
  font: inherit; color: var(--text); background: var(--tile-2); border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; width: 100%; min-width: 0;
}
.bk-form select:focus-visible, .bk-form input:focus-visible, .dlg select:focus-visible, .dlg input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.bk-form .seg, .dlg .seg { width: 100%; }
.bk-form .seg button, .dlg .seg button { flex: 1; }
.bk-form small { font-weight: 400; }
.bk-form .btn.primary { padding: 9px 14px; }
.note.err { color: var(--bad); }
.dlg { border: 1px solid var(--line); border-radius: var(--radius); background: var(--tile); color: var(--text); padding: 18px 20px; width: min(460px, calc(100vw - 32px)); box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
.dlg::backdrop { background: rgba(5, 8, 12, .55); }
.dlg h3 { margin: 0 0 12px; font-size: 16px; }
.dlg #dlg-body { display: grid; gap: 10px; }
.dlg .dlg-actions { display: flex; flex-direction: row-reverse; justify-content: flex-start; gap: 8px; margin-top: 14px; }
.dlg .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ---------- basket tables ---------- */
.bk-table td .acts { display: inline-flex; gap: 4px; }
.bk-table td.pos { color: var(--good); font-weight: 700; }
.bk-table td.neg { color: var(--bad); font-weight: 700; }
.bk-table .contract { font-weight: 700; }
.bk-table .sub { display: block; font-size: 11px; color: var(--muted); font-weight: 400; }
.bk-table tr.warn td { background: rgba(var(--bad-rgb), .06); }
.decay { position: relative; min-width: 90px; }
.decay .meter { margin-top: 4px; }
.decay .meter > i { background: var(--good); }
.scen { display: grid; gap: 4px; margin-bottom: 14px; }
.scen h4 { margin: 0 0 6px; font-size: 13px; }
.scen-row { display: grid; grid-template-columns: 70px 1fr 90px; gap: 10px; align-items: center; font-size: 12px; }
.scen-row .track { position: relative; height: 12px; background: var(--tile-2); border-radius: 6px; }
.scen-row .track::after { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--line); }
.scen-row .bar2 { position: absolute; top: 0; bottom: 0; border-radius: 6px; }
.scen-row .bar2.pos { background: rgba(var(--good-rgb), .7); left: 50%; }
.scen-row .bar2.neg { background: rgba(var(--bad-rgb), .7); right: 50%; }
.scen-row b { text-align: right; }
.scen-row.now { font-weight: 700; }

/* ---------- basket layout ---------- */
.basket-view[hidden] { display: none; }
.basket-view {
  grid-template-areas: "bar" "pnl" "decay" "theta" "delta" "add" "legs" "risk" "hist";
}
#bk-bar { grid-area: bar; } #bk-pnl { grid-area: pnl; } #bk-decay { grid-area: decay; } #bk-theta { grid-area: theta; }
#bk-delta { grid-area: delta; } #bk-add { grid-area: add; } #bk-legs { grid-area: legs; } #bk-risk { grid-area: risk; } #bk-hist { grid-area: hist; }
@media (min-width: 640px) {
  .basket-view {
    grid-template-areas:
      "bar bar bar bar bar bar"
      "pnl pnl pnl decay decay decay"
      "theta theta theta delta delta delta"
      "add add add add add add"
      "legs legs legs legs legs legs"
      "risk risk risk risk risk risk"
      "hist hist hist hist hist hist";
  }
}
@media (min-width: 1024px) {
  .basket-view {
    grid-template-areas:
      "bar bar bar bar bar bar bar bar bar bar bar bar"
      "pnl pnl pnl decay decay decay theta theta theta delta delta delta"
      "add add add add add add add add add add add add"
      "legs legs legs legs legs legs legs legs legs legs legs legs"
      "risk risk risk risk risk hist hist hist hist hist hist hist";
  }
}
@media (min-width: 2200px) {
  .basket-view {
    grid-template-areas:
      "bar bar bar bar bar bar bar bar bar bar bar bar"
      "pnl pnl pnl decay decay decay theta theta theta delta delta delta"
      "add add add add add add add add add add add add"
      "legs legs legs legs legs legs legs legs legs risk risk risk"
      "hist hist hist hist hist hist hist hist hist risk risk risk";
    grid-template-rows: none;
  }
}
@media (max-width: 639px) {
  .expiries { width: 100%; }
  .expiries button { flex: 1; }
}

/* ---------- add-to-basket buttons, toast ---------- */
.add-bk {
  width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--accent); background: transparent; color: var(--accent);
  font-weight: 800; font-size: 14px; line-height: 1; cursor: pointer; display: inline-grid; place-items: center; padding: 0;
}
.add-bk:hover { background: var(--accent); color: #fff; }
.add-bk:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chain th.add, .chain td.add { width: 34px; padding-left: 4px; padding-right: 4px; text-align: center; color: var(--accent); }
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50;
  background: var(--text); color: var(--tile); padding: 10px 16px; border-radius: 12px; font-size: 13px; font-weight: 600;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3); max-width: calc(100vw - 32px);
}

/* ---------- traded strikes ---------- */
.held-bk {
  width: 22px; height: 22px; border-radius: 50%; border: 0; background: var(--good); color: #fff;
  font-weight: 800; font-size: 12px; line-height: 1; cursor: pointer; display: inline-grid; place-items: center; padding: 0;
  box-shadow: 0 0 0 3px rgba(var(--good-rgb), .2);
}
.held-bk:hover { filter: brightness(1.1); }
.held-bk:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pos-card { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: grid; gap: 8px; background: var(--tile-2); }
.pos-top { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.pos-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
.pos-stats .pos { color: var(--good); } .pos-stats .neg { color: var(--bad); }
.pos-acts { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- basket report ---------- */
.report-page .bk-actions a.btn { text-decoration: none; color: inherit; display: inline-flex; align-items: center; }
.report-page .bk-actions a.btn.primary { color: #fff; }
.report {
  grid-template-areas: "eq" "net" "dd" "win" "pf" "fees" "ceq" "cdd" "cday" "det" "und" "trd" "opn";
}
#k-equity { grid-area: eq; } #k-net { grid-area: net; } #k-dd { grid-area: dd; } #k-win { grid-area: win; } #k-pf { grid-area: pf; } #k-fees { grid-area: fees; }
#c-equity-tile { grid-area: ceq; } #c-dd-tile { grid-area: cdd; } #c-daily-tile { grid-area: cday; }
#s-detail { grid-area: det; } #s-under { grid-area: und; } #s-trades { grid-area: trd; } #s-open { grid-area: opn; }
@media (min-width: 640px) {
  .report { grid-template-areas: "eq eq net net dd dd" "win win pf pf fees fees" "ceq ceq ceq ceq ceq ceq" "cdd cdd cdd cdd cdd cdd"
    "cday cday cday cday cday cday" "det det det det det det" "und und und und und und" "trd trd trd trd trd trd" "opn opn opn opn opn opn"; }
}
@media (min-width: 1024px) {
  .report { grid-template-areas:
    "eq eq net net dd dd win win pf pf fees fees"
    "ceq ceq ceq ceq ceq ceq ceq ceq det det det det"
    "cdd cdd cdd cdd cdd cdd cdd cdd det det det det"
    "cday cday cday cday cday cday cday cday und und und und"
    "trd trd trd trd trd trd trd trd trd trd trd trd"
    "opn opn opn opn opn opn opn opn opn opn opn opn"; }
}
.chart { position: relative; height: 300px; width: 100%; }
.chart.short { height: 190px; }
.chart svg { display: block; overflow: visible; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .zero { stroke: var(--muted); stroke-width: 1; }
.chart .baseline { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 5 4; }
.chart .ylab { fill: var(--muted); font-size: 11px; text-anchor: end; }
.chart .xlab { fill: var(--muted); font-size: 11px; }
.chart .cross { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.chart .dot { stroke: var(--tile); stroke-width: 2; }
.chart .dbar.pos { fill: var(--good); }
.chart .dbar.neg { fill: var(--bad); }
.chart .dbar:hover { opacity: .8; }
#c-daily-tile .table-wrap { margin-top: 12px; }
.chart-tip {
  position: fixed; z-index: 60; pointer-events: none; display: grid; gap: 2px;
  background: var(--tile); color: var(--text); border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 10px; font-size: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}
.chart-tip span { color: var(--muted); }
.list td.pos { color: var(--good); font-weight: 600; }
.list td.neg { color: var(--bad); font-weight: 600; }
@media print {
  :root { --bg: #fff; --tile: #fff; --tile-2: #f5f6f8; --line: #dde1e6; --text: #111; --muted: #555; --shadow: none; color-scheme: light; }
  .no-print, .topbar .bk-actions, .chart-tip { display: none !important; }
  .topbar { position: static; backdrop-filter: none; }
  .tile { break-inside: avoid; box-shadow: none; }
}

.dlg label.check { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--text); }
.dlg label.check input { width: auto; }

/* ---------- login ---------- */
.login-page { min-height: 100vh; display: grid; place-items: center; padding: var(--gutter); }
.login-wrap { width: min(400px, 100%); }
.login-card { display: grid; gap: 14px; padding: 24px; }
.login-card label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); font-weight: 600; }
.login-card input { font: inherit; color: var(--text); background: var(--tile-2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; }
.login-card input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.login-card .btn.primary { padding: 10px; font-size: 14px; }
#logout { margin-left: 4px; }

.pw-wrap { position: relative; display: block; }
.pw-wrap input { width: 100%; padding-right: 64px; }
.pw-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer;
  padding: 4px 8px; border-radius: 8px;
}
.pw-toggle:hover { color: var(--text); background: var(--tile); }
.pw-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.login-card h1 { letter-spacing: .04em; }
.brand h1 { letter-spacing: .03em; }

/* ---------- strike table: greeks on the outer edges ---------- */
.chain-controls { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chain th.g, .chain td.g { color: var(--muted); font-size: 12px; }
.chain thead th.g { font-style: italic; }
.chain td.g.c:last-of-type, .chain th.g.c:last-of-type { border-right: 0; }
.chain th.c.g + th.c:not(.g), .chain td.c.g + td.c:not(.g) { border-left: 2px solid var(--line); }
.chain th.p:not(.g) + th.p.g, .chain td.p:not(.g) + td.p.g { border-left: 2px solid var(--line); }

/* ---------- strategies ---------- */
.strategy-view[hidden] { display: none; }
.strategy-view {
  grid-template-areas: "bar" "status" "pnl" "cycle" "next" "pend" "legs" "events" "rules" "hist" "build";
}
#st-bar { grid-area: bar; } #st-status { grid-area: status; } #st-pnl { grid-area: pnl; } #st-cycle { grid-area: cycle; } #st-next { grid-area: next; }
#st-pending { grid-area: pend; } #st-legs { grid-area: legs; } #st-events { grid-area: events; } #st-rules { grid-area: rules; }
#st-history { grid-area: hist; } #st-builder { grid-area: build; }
#st-pending[hidden], #st-builder[hidden] { display: none; }
@media (min-width: 640px) {
  .strategy-view { grid-template-areas:
    "bar bar bar bar bar bar" "status status status pnl pnl pnl" "cycle cycle cycle next next next"
    "pend pend pend pend pend pend" "legs legs legs legs legs legs" "events events events events events events"
    "rules rules rules rules rules rules" "hist hist hist hist hist hist" "build build build build build build"; }
}
@media (min-width: 1024px) {
  .strategy-view { grid-template-areas:
    "bar bar bar bar bar bar bar bar bar bar bar bar"
    "status status status pnl pnl pnl cycle cycle cycle next next next"
    "pend pend pend pend pend pend pend pend pend pend pend pend"
    "legs legs legs legs legs legs legs events events events events events"
    "rules rules rules rules rules rules rules hist hist hist hist hist"
    "build build build build build build build build build build build build"; }
}
.bk-list button.strat b { display: flex; gap: 6px; align-items: center; }
.badge { display: inline-block; font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 5px; letter-spacing: .04em; }
.badge.alert { background: rgba(var(--warn-rgb), .18); color: var(--warn); }
.badge.auto { background: rgba(var(--good-rgb), .16); color: var(--good); }
.badge.paused { background: var(--tile-2); color: var(--muted); }
.badge.pending { background: rgba(var(--bad-rgb), .18); color: var(--bad); }
.st-pending-tile { border-color: var(--warn); box-shadow: 0 0 0 3px rgba(var(--warn-rgb), .18); }
.pend-card { display: grid; gap: 10px; padding: 12px; border-radius: 12px; background: rgba(var(--warn-rgb), .08); border: 1px solid rgba(var(--warn-rgb), .35); margin-bottom: 10px; }
.pend-card .msg { font-size: 14px; font-weight: 600; }
.pend-card .fills { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.pend-card .fills label { display: grid; gap: 3px; font-size: 12px; color: var(--muted); font-weight: 600; }
.pend-card .fills input { font: inherit; color: var(--text); background: var(--tile); border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; }
.pend-card .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.st-form { display: grid; gap: 16px; }
.st-form fieldset { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 0; min-width: 0; }
.st-form legend { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; padding: 0 6px; }
.st-form .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px 12px; align-items: end; }
.st-form label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); font-weight: 600; min-width: 0; }
.st-form input, .st-form select { font: inherit; color: var(--text); background: var(--tile-2); border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; width: 100%; min-width: 0; }
.st-form input:focus-visible, .st-form select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.st-form .days { display: flex; flex-wrap: wrap; gap: 6px; }
.st-form .days label { flex-direction: row; display: inline-flex; align-items: center; gap: 4px; color: var(--text); font-weight: 500; }
.st-form .days input { width: auto; }
.st-form .line { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) 34px; gap: 8px; align-items: end; padding: 8px; border-radius: 10px; background: var(--tile-2); margin-bottom: 8px; }
.st-form .line .x { height: 34px; }
.st-form .rule { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; background: var(--tile); }
.st-form .rule-head { display: flex; gap: 10px; align-items: end; margin-bottom: 8px; }
.st-form .rule-head label { flex: 1; }
.st-form .sub-h { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin: 8px 0 4px; }
.st-form .check { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-weight: 500; }
.st-form .check input { width: auto; }
.st-summary dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: 13px; }
.st-summary dt { color: var(--muted); }
.st-summary dd { margin: 0; }
.st-summary code { background: var(--tile-2); padding: 1px 6px; border-radius: 6px; font-size: 12px; }
.alert-dock { position: fixed; right: 16px; bottom: 16px; z-index: 55; display: grid; gap: 8px; width: min(380px, calc(100vw - 32px)); }
.alert-dock[hidden] { display: none; }
.dock-card { background: var(--tile); border: 1px solid var(--warn); border-radius: 14px; padding: 10px 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, .35); display: grid; gap: 6px; }
.dock-card .k { font-size: 11px; font-weight: 800; color: var(--warn); letter-spacing: .04em; }
.dock-card .m { font-size: 13px; }
.dock-card .acts { display: flex; gap: 6px; justify-content: flex-end; }
#sound-toggle.on { background: rgba(var(--good-rgb), .16); color: var(--good); border-color: transparent; }

/* ---------- kill switch ---------- */
.btn.kill { border-color: var(--bad); color: var(--bad); font-weight: 800; }
.btn.kill:hover { background: var(--bad); color: #fff; }
.kill-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.kill-all { margin-top: 14px; padding: 12px; border-radius: 12px; border: 1px solid rgba(var(--bad-rgb), .4); background: rgba(var(--bad-rgb), .06); }
.kill-all .row2 { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; align-items: center; }
.kill-all input { font: inherit; color: var(--text); background: var(--tile); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; letter-spacing: .1em; text-transform: uppercase; }
.dlg.wide { width: min(720px, calc(100vw - 32px)); }

/* ---------- trade tab ---------- */
.trade-view[hidden] { display: none; }
.trade-view { grid-template-areas: "bar" "ticket" "pos" "ord" "log"; }
#tr-bar { grid-area: bar; } #tr-ticket { grid-area: ticket; } #tr-positions { grid-area: pos; } #tr-orders { grid-area: ord; } #tr-log { grid-area: log; }
@media (min-width: 1024px) {
  .trade-view { grid-template-areas:
    "bar bar bar bar bar bar bar bar bar bar bar bar"
    "ticket ticket ticket ticket ticket ticket ticket ticket ticket ticket ticket ticket"
    "pos pos pos pos pos pos pos ord ord ord ord ord"
    "log log log log log log log log log log log log"; }
}
.bk-list button.acct .sub { display: block; font-size: 11px; }
.review { display: grid; gap: 6px; font-size: 14px; }
.review b { font-size: 18px; }
.review .warn { color: var(--bad); font-weight: 700; }

.acct-form { grid-template-columns: 1fr; min-width: min(440px, 100%); }
.acct-form label.check { display: flex; align-items: center; gap: 8px; }
.acct-form label.check input { width: auto; }
.mono { font-family: ui-monospace, Consolas, monospace; }
.ip-box { display: grid; gap: 6px; padding: 10px 12px; border: 1px dashed var(--accent); border-radius: 10px; font-size: 12px; color: var(--muted); font-weight: 600; }
.ip-box .row2 { display: flex; align-items: center; gap: 10px; }
.ip-box b { font-size: 16px; color: var(--text, inherit); user-select: all; }
.risk-banner { margin-top: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); font-size: 13px; display: grid; gap: 6px; }
.risk-banner.hit { border-color: #e5484d; background: rgba(229, 72, 77, .12); }
.risk-bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.risk-bar i { display: block; height: 100%; background: var(--accent); }
.risk-bar i.neg-bg { background: #e5484d; }
.badge.loss { background: rgba(229, 72, 77, .18); color: #e5484d; }

/* ---- notification bell ---- */
.notif-wrap { position: relative; }
.notif-btn { position: relative; }
.notif-count { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--bad); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.notif-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: min(420px, calc(100vw - 32px)); max-height: min(70vh, 640px); display: flex; flex-direction: column; background: var(--tile); border: 1px solid var(--line); border-radius: var(--radius, 14px); box-shadow: var(--shadow); color: var(--text); text-align: left; }
.notif-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 14px 8px; }
.notif-tools { display: flex; gap: 6px; }
.notif-cats { display: flex; gap: 4px; padding: 0 14px 8px; overflow-x: auto; border-bottom: 1px solid var(--line); }
.notif-cats button { font: inherit; font-size: 12px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; white-space: nowrap; }
.notif-cats button.on { background: var(--accent-soft, var(--tile-2)); color: var(--text); border-color: var(--accent); }
.notif-list { overflow-y: auto; flex: 1; }
.notif-item { display: grid; grid-template-columns: 26px 1fr 18px; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); cursor: pointer; border-left: 3px solid transparent; }
.notif-item:hover, .notif-item:focus-visible { background: var(--tile-2); outline: none; }
.notif-item.unread { background: rgba(var(--warn-rgb), .05); }
.notif-item.critical { border-left-color: var(--bad); }
.notif-item.warning { border-left-color: var(--warn); }
.notif-item.success { border-left-color: var(--good); }
.notif-icon { font-size: 16px; line-height: 20px; }
.notif-text { display: grid; gap: 2px; min-width: 0; font-size: 13px; }
.notif-text span { color: var(--text); opacity: .85; overflow-wrap: anywhere; }
.notif-text small { color: var(--muted); font-size: 11px; }
.notif-item:not(.unread) .notif-text b { font-weight: 500; }
.notif-dot { width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; border: 1px solid var(--muted); background: transparent; padding: 0; cursor: pointer; }
.notif-item.unread .notif-dot { background: var(--accent); border-color: var(--accent); }
.notif-empty { padding: 24px 14px; color: var(--muted); text-align: center; margin: 0; }
.notif-foot { padding: 8px 14px; display: flex; justify-content: flex-end; border-top: 1px solid var(--line); }
#notif-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 80; display: grid; gap: 8px; width: min(360px, calc(100vw - 32px)); }
.notif-toast { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--tile); border: 1px solid var(--line); border-left: 4px solid var(--warn); box-shadow: var(--shadow); cursor: pointer; font-size: 13px; color: var(--text); }
.notif-toast.critical { border-left-color: var(--bad); }
.notif-toast span { opacity: .85; }
@media print { .notif-wrap, #notif-toasts { display: none; } }

/* ---- storage panel ---- */
.storage-btn.warn { border-color: var(--warn); color: var(--warn); }
.storage-btn.crit { border-color: var(--bad); color: #fff; background: var(--bad); }
.st-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-bottom: 12px; }
.st-disk { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 6px; font-size: 13px; }
.st-disk-head { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.st-bar { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.st-bar i { display: block; height: 100%; background: var(--good); }
.st-disk.warning .st-bar i { background: var(--warn); }
.st-disk.critical { border-color: var(--bad); }
.st-disk.critical .st-bar i { background: var(--bad); }
.st-pw { display: grid; gap: 4px; font-size: 12px; color: var(--muted); font-weight: 600; max-width: 320px; }
.st-pw input, .st-num { font: inherit; color: var(--text); background: var(--tile); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; }
.st-num { width: 64px; padding: 4px 6px; }
.st-sec { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 12px; }
.st-sec-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.st-sec h3 { font-size: 14px; margin: 0; }
.st-scroll { max-height: 220px; overflow: auto; margin-top: 8px; }
.st-rows { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--muted); margin-top: 8px; }
label.inline { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }


/* ---- top bar: step down instead of wrapping (checked at 1920 / 1600 / 1440 / 1366) ---- */
@media (max-width: 1799px) {
  .topbar { --nav-group-gap: 16px; }
  .symbols button { min-width: 0; padding: 6px 12px; }
}
@media (max-width: 1599px) {
  .brand-text .sub { display: none; }                         /* the tagline goes first */
  #sound-toggle .lbl { display: none; }                       /* icon only; the title says on / off */
  #sound-toggle { padding: 0 10px; }
}
@media (max-width: 1439px) {
  .topbar { --nav-gap: 6px; --nav-group-gap: 10px; }
  .btn.nav-btn { padding: 0 9px; }
  .btn.nav-btn.kill { padding: 0 11px; }
  .brand-text h1 { font-size: 14px; }
  .symbols { gap: 2px; }
  .symbols button { padding: 5px 8px; }
  .expiries { gap: 2px; }
  .expiries button { padding: 5px 7px; }
}
@media (max-width: 1279px) {
  .brand-text { display: none; }                              /* logo mark only */
}
@media (max-width: 1023px) {
  /* tablet: tabs move to their own full-width row under brand + controls */
  .topbar { flex-wrap: wrap; row-gap: 8px; }
  .navbar-center { order: 3; flex-basis: 100%; justify-content: flex-start; }
  .brand-text { display: block; }
}
@media (max-width: 639px) {
  .btn.nav-btn.kill .lbl { display: none; }                   /* ⛔ stays, the title explains it */
  .brand-text h1 { font-size: 13px; }
  .navbar-right { gap: 8px; }
  .nav-group { gap: 6px; }
  .nav-sep { display: none; }
  .navbar-right .live > span { display: none; }               /* the dot alone */
}