/* Colours and type. Light by default, dark when the system asks for it. */
:root { color-scheme:light dark; --bg:#f3f5f8; --card:#ffffff; --raise:#f5f7fa; --ink:#131722; --dim:#667085; --line:#e3e7ee; --up:#0a8a5b; --down:#c9353f; --warn:#a15c00; --accent:#2f62d8; --on-accent:#ffffff;
  --up-bg:rgba(10,138,91,.10); --down-bg:rgba(201,53,63,.10); --warn-bg:rgba(161,92,0,.10); --shadow:0 1px 2px rgba(16,24,40,.05); --mono:ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; --sans:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
@media (prefers-color-scheme: dark) { :root { --bg:#0b0e14; --card:#131822; --raise:#1a202c; --ink:#e7eaf0; --dim:#8c97aa; --line:#232b39; --up:#2ecc8f; --down:#f2606c; --warn:#e5ab3c; --accent:#6b9bff; --on-accent:#0b0e14;
  --up-bg:rgba(46,204,143,.13); --down-bg:rgba(242,96,108,.13); --warn-bg:rgba(229,171,60,.13); --shadow:none; } }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:13px/1.45 var(--sans); -webkit-font-smoothing:antialiased; }
[hidden] { display:none !important; }
:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.ok { color:var(--up); } .bad { color:var(--down); } .warn { color:var(--warn); } .dim { color:var(--dim); }

/* Top bar, status and figures */
#top { display:flex; align-items:center; gap:14px; padding:10px 20px; background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:3; }
.brand { display:flex; align-items:center; gap:10px; min-width:0; margin:0; font-size:inherit; font-weight:inherit; }
.brand img { display:block; border-radius:6px; }
.brand .name { font-size:15px; font-weight:650; letter-spacing:-.01em; white-space:nowrap; }
.brand .sub { padding-left:10px; border-left:1px solid var(--line); color:var(--dim); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#status { margin-left:auto; }
.pill { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.06em; white-space:nowrap; background:var(--up-bg); }
.pill::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.pill.ok::before { animation:pulse 2s ease-in-out infinite; }
.pill.warn { background:var(--warn-bg); } .pill.bad { background:var(--down-bg); }
@keyframes pulse { 50% { opacity:.3; } }
@media (prefers-reduced-motion: reduce) { .pill.ok::before { animation:none; } }
#strip { display:flex; flex-wrap:wrap; padding:0 20px; background:var(--card); border-bottom:1px solid var(--line); }
.stat { display:flex; flex-direction:column; gap:1px; margin-right:18px; padding:8px 18px 9px 0; border-right:1px solid var(--line); }
.stat:last-child { border-right:0; }
.stat .k { font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); white-space:nowrap; }
.stat .v { font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
#alerts { display:flex; flex-wrap:wrap; gap:8px; padding:0 20px; }
#alerts:not(:empty) { padding-top:12px; }
.alert { max-width:100%; padding:4px 10px; border:1px solid var(--line); border-left:3px solid currentColor; border-radius:6px; background:var(--card); font-size:12px; overflow-wrap:anywhere; }

/* Layout and cards */
main { display:grid; grid-template-columns:minmax(0, 3fr) minmax(340px, 2fr); gap:14px; padding:14px 20px; align-items:start; }
@media (max-width: 1000px) { main { grid-template-columns:1fr; } }
#movers { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; }
@media (min-width: 1900px) { #movers { grid-template-columns:repeat(4, minmax(0, 1fr)); } }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px; min-width:0; box-shadow:var(--shadow); }
h2 { margin:0; font-size:11.5px; font-weight:650; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); }
.sep { height:1px; background:var(--line); margin:8px 0; }
.empty { padding:28px 12px; text-align:center; color:var(--dim); }

/* Mover rows. The name and the two figures keep fixed columns on the first line and the calls get a line of their own,
   so nothing can run into anything else at any width. */
.card-head, .row { display:grid; grid-template-columns:minmax(0, 1fr) 64px 48px; column-gap:8px; align-items:center; }
.card-head { margin-bottom:4px; padding:0 8px 7px; border-bottom:1px solid var(--line); }
.card-head h2 { grid-area:1 / 1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cols { font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); text-align:right; white-space:nowrap; }
.chg { grid-area:1 / 2; } .spr { grid-area:1 / 3; }
.row { row-gap:4px; width:100%; padding:5px 8px; border:0; border-radius:6px; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.row:hover { background:var(--raise); }
.row.sel { background:var(--raise); box-shadow:inset 2px 0 0 var(--accent); }
.row .sym { grid-area:1 / 1; font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row .marks { grid-area:2 / 1 / 3 / -1; display:flex; flex-wrap:wrap; gap:3px 4px; min-width:0; }
.row .marks:empty { display:none; }
.num { font-family:var(--mono); font-size:12px; font-variant-numeric:tabular-nums; text-align:right; }
.chip { padding:1px 6px; border:1px solid var(--line); border-radius:4px; background:var(--raise); font-size:10.5px; font-weight:600; white-space:nowrap; }
.chip.up { color:var(--up); } .chip.down { color:var(--down); }
.chip.s-money { border-color:var(--up); background:var(--up-bg); } .chip.s-losing { text-decoration:line-through; opacity:.65; }
.tag { padding:2px 6px; border-radius:4px; background:var(--up); color:var(--card); font-size:9.5px; font-weight:800; letter-spacing:.06em; }

/* Coin panel */
#coin { overflow-x:auto; }
/* Beside the movers the panel stays in view and scrolls inside itself, so a long call list leaves no empty column. */
@media (min-width: 1001px) { #coin { position:sticky; top:66px; max-height:calc(100vh - 80px); overflow-y:auto; } }
.coin-head { display:flex; align-items:baseline; gap:8px; margin-bottom:10px; }
.coin-head h2 { font-size:18px; letter-spacing:-.01em; text-transform:none; color:var(--ink); }
.btns { display:flex; gap:8px; margin-bottom:8px; }
button.act { padding:6px 14px; border:1px solid var(--line); border-radius:6px; background:var(--card); color:var(--ink); font:inherit; font-weight:600; cursor:pointer; }
button.act:hover { background:var(--raise); }
button.act.long { border-color:var(--up); background:var(--up); color:var(--card); } button.act.short { border-color:var(--down); background:var(--down); color:var(--card); }
button.act.primary { border-color:var(--accent); background:var(--accent); color:var(--on-accent); }
button.act.long:hover, button.act.short:hover, button.act.primary:hover { filter:brightness(1.08); }
button.act.ghost { background:none; color:var(--dim); font-weight:500; }
button.act.ghost:hover { color:var(--ink); }
select, input.note, #login input { padding:6px 10px; border:1px solid var(--line); border-radius:6px; background:var(--card); color:var(--ink); font:inherit; }
input.note { width:100%; }
#msg { margin-top:6px; } #msg:empty, #login-msg:empty { display:none; }
.kv { display:grid; grid-template-columns:1fr auto; }
.kv div { padding:3px 0; border-bottom:1px solid var(--line); }
.kv div:nth-child(odd) { color:var(--dim); }
.kv div:nth-child(even) { padding-left:12px; font-family:var(--mono); font-size:12px; text-align:right; }
.kv div:nth-last-child(-n+2) { border-bottom:0; }
.book { display:grid; grid-template-columns:1fr 1fr; gap:1px 8px; font-family:var(--mono); font-size:12px; font-variant-numeric:tabular-nums; }
.lvl { position:relative; display:flex; justify-content:space-between; gap:8px; min-height:20px; padding:2px 6px; }
.lvl.bid { flex-direction:row-reverse; }
.lvl::before { content:""; position:absolute; top:1px; bottom:1px; width:var(--w, 0%); border-radius:3px; }
.lvl.bid::before { right:0; background:var(--up-bg); } .lvl.ask::before { left:0; background:var(--down-bg); }
.lvl span { position:relative; white-space:nowrap; } .lvl .px { flex:0 0 auto; font-weight:600; } .lvl .sz { min-width:0; overflow:hidden; text-overflow:ellipsis; color:var(--dim); }
.lvl.bid .px { color:var(--up); } .lvl.ask .px { color:var(--down); }
.lvl.hd { min-height:0; padding-bottom:3px; font-family:var(--sans); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; }
.lvl.hd span, .lvl.hd .px { color:var(--dim); font-weight:600; }

/* Tabs and tables */
nav { display:flex; gap:4px; margin-top:4px; padding:0 20px; border-bottom:1px solid var(--line); }
.tabbtn { margin-bottom:-1px; padding:9px 12px; border:0; border-bottom:2px solid transparent; background:none; color:var(--dim); font:inherit; font-weight:600; cursor:pointer; }
.tabbtn:hover { color:var(--ink); } .tabbtn.on { border-bottom-color:var(--accent); color:var(--ink); }
#tab { padding:14px 20px 24px; }
.toolbar { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.caption { margin-bottom:10px; }
.frame { border:1px solid var(--line); border-radius:10px; background:var(--card); box-shadow:var(--shadow); overflow:auto; }
table { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
th, td { padding:6px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
th { background:var(--raise); color:var(--dim); font-size:10.5px; font-weight:650; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
tr:last-child td { border-bottom:0; }
.frame tr:hover td { background:var(--raise); }
#coin table { font-size:12px; } #coin th, #coin td { padding:4px 6px; } #coin th { background:none; }
#tab-data > .card + .card { margin-top:8px; }
footer { padding:0 20px 28px; color:var(--dim); font-size:11.5px; }

/* Sign-in */
#login { display:flex; flex-direction:column; gap:10px; width:min(360px, calc(100vw - 32px)); margin:16vh auto 0; padding:28px; border:1px solid var(--line); border-radius:12px; background:var(--card); box-shadow:0 8px 30px rgba(16,24,40,.08); }
#login .name { font-size:17px; }
#login .sub { margin:0 0 8px; color:var(--dim); }
#login label { color:var(--dim); font-size:12px; font-weight:600; }
#login input { padding:9px 11px; background:var(--bg); }
#login button { padding:9px; }
#login .fine { margin:8px 0 0; color:var(--dim); font-size:11.5px; }

@media (max-width: 560px) { #movers { grid-template-columns:1fr; } #top, #strip, #alerts, main, nav, #tab, footer { padding-left:12px; padding-right:12px; } #top .sub { display:none; } }