/* betbot portal.
   Dark by default, whatever the device (long sessions); light only when chosen with the
   switch in the top bar (remembered in the browser). The side bar, the top bar and the band
   with the title are the dark anchor in both themes; the cards of the screen sit over the band.
   One accent (amber, like a signal lamp) for what is chosen or new; green only for value and
   profit, red only for loss and trouble. Neutrals lean slightly blue. */
:root {
  --bg: #0b1118; --surface: #131c26; --surface-2: #192431; --zebra: #151f2a; --line: #233140;
  --ink: #e7edf3; --muted: #8f9db0; --accent: #f2a93b; --accent-soft: #3a2c14;
  --value: #3ecf8e; --value-soft: rgba(62, 207, 142, .14); --value-strong: rgba(62, 207, 142, .28);
  --loss: #ff6b5e; --info: #6ea1ff; --hover: #1d2a38;
  /* the anchor: the same in both themes */
  --night: #0b1118; --night-2: #111b26; --night-ink: #e7edf3; --night-muted: #8796a8;
  --night-line: rgba(255, 255, 255, .07); --amber: #f2a93b;
  --display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --body: "Inter", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #e9edf2; --surface: #ffffff; --surface-2: #f2f4f7; --zebra: #f7f9fb; --line: #e1e6ec;
  --ink: #142030; --muted: #5e6b7c; --accent: #c27a0e; --accent-soft: #fbefd9;
  --value: #0f7a56; --value-soft: rgba(18, 128, 92, .10); --value-strong: rgba(18, 128, 92, .20);
  --loss: #c0392b; --info: #2f6fd6; --hover: #fdf6e8; color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 14px/1.45 var(--body); }
a { color: var(--accent); text-decoration: none; }
h1, h2, h3 { font-family: var(--display); margin: 0; text-wrap: balance; }
h2 { font-size: 15px; }
code { font: 12px var(--mono); }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.err { color: var(--loss); }
.warn { color: var(--accent); font-weight: 600; }
svg { stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* ------------------------------------------------------------ frame */
.app { display: grid; grid-template-columns: 228px minmax(0, 1fr); min-height: 100vh; }

/* side bar */
.side { background:
    radial-gradient(120% 50% at 0% 0%, rgba(242, 169, 59, .10), transparent 60%),
    linear-gradient(180deg, var(--night-2) 0%, var(--night) 100%);
  border-right: 1px solid rgba(255, 255, 255, .04); padding: 18px 12px; color: var(--night-ink);
  display: flex; flex-direction: column; gap: 22px; position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 4; }
.brand { display: flex; align-items: center; gap: 10px; padding: 2px 8px 14px; color: var(--night-ink);
  border-bottom: 1px solid var(--night-line); }
.brand img { filter: drop-shadow(0 0 10px rgba(242, 169, 59, .35)); }
.word { font: 700 21px/1 var(--display); letter-spacing: -0.02em; }
.word b { color: var(--amber); }
.group { display: grid; gap: 2px; }
.group h4 { margin: 0 0 6px; padding: 0 10px; font: 600 10px/1 var(--body); letter-spacing: .14em; text-transform: uppercase;
  color: var(--night-muted); opacity: .8; }
.nav { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px;
  color: var(--night-muted); transition: background .15s, color .15s; }
.nav svg { width: 16px; height: 16px; flex: none; }
.nav:hover { background: rgba(255, 255, 255, .05); color: var(--night-ink); }
.nav.on { color: #fff; font-weight: 600;
  background: linear-gradient(90deg, rgba(242, 169, 59, .22), rgba(242, 169, 59, .04));
  box-shadow: inset 0 0 0 1px rgba(242, 169, 59, .18), 0 6px 18px -8px rgba(242, 169, 59, .45); }
.nav.on::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0;
  background: var(--amber); box-shadow: 0 0 10px var(--amber); }
.nav.on svg { color: var(--amber); }
.livedot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #3ecf8e; flex: none; }
.livechip { display: inline-flex; align-items: center; gap: 7px; margin-left: 10px; vertical-align: middle; padding: 4px 10px 4px 9px;
  border-radius: 999px; background: rgba(62, 207, 142, .12); border: 1px solid rgba(62, 207, 142, .25);
  font: 600 11px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: #3ecf8e; }
@media (prefers-reduced-motion: no-preference) { .livedot { animation: pulse 2s infinite; } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(62, 207, 142, .55); } 70% { box-shadow: 0 0 0 7px rgba(62, 207, 142, 0); }
  100% { box-shadow: 0 0 0 0 rgba(62, 207, 142, 0); } }
.count { margin-left: auto; font: 500 11px var(--mono); color: var(--night-muted); }
.count.late { color: #fff; background: var(--loss); border-radius: 8px; padding: 1px 6px; }
.side-foot { margin-top: auto; padding: 12px 10px 0; border-top: 1px solid var(--night-line); font-size: 11px; color: var(--night-muted); }

/* top bar + band: dark, one piece with the side bar */
.main { min-width: 0; display: flex; flex-direction: column; }
.top { display: flex; align-items: center; gap: 12px; min-height: 52px; color: var(--night-ink);
  padding: 8px max(16px, env(safe-area-inset-right, 0px)) 8px 24px; background: var(--night-2);
  border-bottom: 1px solid var(--night-line); position: sticky; top: 0; z-index: 3; }
.crumb { font-size: 12px; color: var(--night-muted); letter-spacing: .02em; }
.top .right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.icon-btn { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px;
  color: var(--night-muted); background: none; border: 0; cursor: pointer; }
.icon-btn:hover { background: rgba(255, 255, 255, .06); color: var(--night-ink); }
.icon-btn svg { width: 19px; height: 19px; }
.icon-btn b { position: absolute; top: 2px; right: 1px; background: var(--loss); color: #fff; font: 600 10px/16px var(--body);
  min-width: 16px; padding: 0 4px; text-align: center; border-radius: 8px; }
.out { color: var(--night-muted); font-size: 13px; padding: 0 6px; }
.out:hover { color: var(--night-ink); }
.menu { display: none; }

.band { color: var(--night-ink); padding: 22px max(16px, env(safe-area-inset-right, 0px)) 64px 24px;
  background:
    radial-gradient(60% 120% at 100% 0%, rgba(110, 161, 255, .12), transparent 60%),
    radial-gradient(40% 90% at 15% 100%, rgba(242, 169, 59, .10), transparent 70%),
    linear-gradient(180deg, var(--night-2), var(--night));
  display: grid; gap: 16px; position: relative; }
.band::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 28px 28px; mask-image: linear-gradient(180deg, #000, transparent); }
.band > * { position: relative; z-index: 1; }
.band h1 { font-size: 26px; letter-spacing: -0.01em; }
.stats { display: flex; gap: 10px; flex-wrap: wrap; }
.stat { min-width: 150px; padding: 10px 14px; border-radius: 10px; background: rgba(255, 255, 255, .04);
  border: 1px solid var(--night-line); display: grid; gap: 2px; }
.stat span { font-size: 11px; color: var(--night-muted); letter-spacing: .04em; text-transform: uppercase; }
.stat b { font: 600 22px/1.15 var(--display); font-variant-numeric: tabular-nums; }
.stat b.good { color: #3ecf8e; } .stat b.bad { color: #ff6b5e; } .stat b.amber { color: var(--amber); }

/* controls on the band */
.bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.band select { padding: 7px 10px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 8px; color: var(--night-ink);
  background: rgba(255, 255, 255, .05); font: inherit; color-scheme: dark; }
.band select:hover { border-color: rgba(242, 169, 59, .45); }
.band select option, .band select optgroup { background: #111b26; color: #e7edf3; }
.band select option:checked { background: #3a2c14; color: #f2a93b; }
select option { background: var(--surface); color: var(--ink); }
.band .check { color: var(--night-muted); }
.check { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.tabs { display: inline-flex; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); border-radius: 9px; padding: 3px; }
.tabs span, .tabs a { padding: 5px 12px; border-radius: 6px; color: var(--night-muted); font-size: 13px; }
.tabs .on { background: rgba(242, 169, 59, .18); color: #fff; font-weight: 600; }
.tabs .off { opacity: .5; cursor: default; }
.band .info { font-size: 12px; color: var(--night-muted); }

/* the screen: cards rise over the band */
.content { padding: 0 max(16px, env(safe-area-inset-right, 0px)) 40px 24px; margin-top: -44px; display: grid; gap: 14px;
  align-content: start; min-width: 0; position: relative; z-index: 2; }
select, input[type=password] { padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface);
  color: var(--ink); font: inherit; }

/* ------------------------------------------------------------ tables */
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .55); }
table.grid { width: 100%; border-collapse: collapse; font-size: 13px; }
.grid th, .grid td { padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.grid tr:last-child td { border-bottom: 0; }
.grid th { font: 600 11px var(--body); letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
  white-space: nowrap; background: var(--surface-2); }
.grid tbody tr:nth-child(even) td { background: var(--zebra); }
.grid tbody tr:hover td { background: var(--hover); }
.grid td.num, .grid th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.grid td.time { white-space: nowrap; font-family: var(--mono); font-size: 12px; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) { .grid tr.new td { animation: lit 3s ease-out; } }
.grid tr.new td:first-child { box-shadow: inset 3px 0 0 var(--amber); }
@keyframes lit { from { background: var(--accent-soft); } to { background: transparent; } }
.match b, .mk b { display: block; font-weight: 600; }
.match span, .mk span { color: var(--muted); font-size: 12px; }
.pill { display: inline-block; min-width: 58px; text-align: right; padding: 3px 8px; border-radius: 999px; font: 600 12px var(--mono); }
.pill.low { color: var(--muted); font-weight: 500; }
.pill.mid { color: var(--value); background: var(--value-soft); }
.pill.high { color: var(--value); background: var(--value-strong); box-shadow: inset 0 0 0 1px var(--value-soft); }
.src { display: inline-block; font: 600 10px/1 var(--mono); padding: 4px 6px; border-radius: 5px; letter-spacing: .04em; white-space: nowrap; }
.src.bb { background: rgba(110, 161, 255, .16); color: var(--info); }
.src.lv { background: rgba(255, 107, 94, .16); color: var(--loss); display: inline-flex; align-items: center; gap: 5px; }
.beat { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
@media (prefers-reduced-motion: no-preference) { .beat { animation: beat 1.6s ease-in-out infinite; } }
@keyframes beat { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255, 107, 94, .5); }
  50% { opacity: .45; box-shadow: 0 0 0 3px rgba(255, 107, 94, 0); } }
.src.api { background: var(--accent-soft); color: var(--accent); }
.src.sb { background: var(--value-soft); color: var(--value); }

/* ------------------------------------------------------------ source cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px;
  box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .55); }
.feed .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; background: var(--value); }
.feed.late { border-color: var(--loss); }
.feed.late .dot { background: var(--loss); }
.feed .big { font: 600 22px/1.2 var(--display); margin: 4px 0 10px; }
.feed.late .big { color: var(--loss); }
.feed dl { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; margin: 0; font-size: 13px; }
.feed dt { color: var(--muted); }
.feed dd { margin: 0; text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
details { margin-top: 10px; font-size: 13px; }

/* ------------------------------------------------------------ login */
body.login { display: grid; place-items: center; min-height: 100vh; padding: 16px;
  background: radial-gradient(60% 60% at 50% 0%, rgba(242, 169, 59, .12), transparent 70%), linear-gradient(180deg, var(--night-2), var(--night)); }
body.login .card { width: 100%; max-width: 320px; display: grid; gap: 10px; background: var(--night-2); border-color: var(--night-line); color: var(--night-ink); }
body.login .brand { justify-content: center; border: 0; padding-bottom: 6px; }
body.login input { background: rgba(255, 255, 255, .05); color: var(--night-ink); border-color: rgba(255, 255, 255, .12); }
body.login button { padding: 9px; border: 0; border-radius: 7px; background: var(--amber); color: #1a1205; font-weight: 600; cursor: pointer; }

/* ------------------------------------------------------------ phone */
@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; }
  .side { position: fixed; z-index: 6; left: 0; top: 0; width: 240px; transform: translateX(-100%); transition: transform .2s;
    padding-left: max(12px, env(safe-area-inset-left, 0px)); box-shadow: 0 0 30px rgba(0, 0, 0, .45); }
  .side.open { transform: none; }
  .menu { display: grid; }
  .top, .band, .content { padding-left: max(16px, env(safe-area-inset-left, 0px)); }
  .stat { min-width: 0; flex: 1 1 40%; }
}

/* the Sesame column */
.grid td.sx { min-width: 190px; }
.sx-ok, .sx-cand { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font: 700 11px/1 var(--body); }
.sx-ok { background: var(--value-soft); color: var(--value); }
.sx-cand { background: var(--accent-soft); color: var(--accent); }
.bk { display: inline-block; font: 600 11px/1 var(--body); padding: 4px 7px; border-radius: 5px; letter-spacing: .02em;
  background: rgba(242, 169, 59, .14); color: var(--accent); white-space: nowrap; }
.tabs a { cursor: pointer; }