:root { --impact:#ef4444; --bg:#000; --panel:#0c0c0d; --panel2:#151517; --sunk:#0a0a0b; --hover:#1e1e21; --rowhover:#111113; --rowsel:#131316; --track:#232326; --pop:#0e0e10; --line:#1f1f22; --line2:#2a2a2e; --line3:#4a4a50; --text:#f2f2f3; --muted:#8b8b92; --hl:255,255,255; --hi:#fff; --hi-fg:#000; --overlay:rgba(0,0,0,.72); --spot-ov:rgba(0,0,0,.5); --shadow:rgba(0,0,0,.6); --pos-base:#22c55e; --neg-base:#ef4444; --pos:var(--pos-base); --neg:var(--neg-base); --amber:#f59e0b; --blue:#3b82f6; --r:12px; color-scheme:dark; }
* { box-sizing:border-box; }
html,body { height:100%; margin:0; }
body { background:var(--bg); color:var(--text); font:14px/1.45 -apple-system,BlinkMacSystemFont,"Inter","Segoe UI",system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0; text-align:inherit; }
button:disabled { cursor:not-allowed; opacity:.45; }
h1 { font-size:24px; font-weight:500; margin:0; } h2 { font-size:18px; font-weight:500; margin:0; } h3 { font-size:16px; font-weight:600; margin:0; } p { margin:6px 0; }
.ic { display:inline-flex; vertical-align:middle; flex:none; }
.muted { color:var(--muted); } .small { font-size:12px; } .strong { font-weight:600; } .it { font-style:italic; } .right { text-align:right; } .center { text-align:center; }
.pos { color:var(--pos); } .neg { color:var(--neg); } .flat { color:var(--muted); }
.row { display:flex; align-items:center; gap:10px; } .between { justify-content:space-between; } .end { align-items:flex-end; } .grow { flex:1; min-width:0; }
.ellip { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stack { display:flex; flex-direction:column; gap:10px; } .stack.bottom { margin-top:auto; padding-top:14px; gap:6px; } .stackl { display:flex; flex-direction:column; gap:16px; }

/* layout */
.app { display:grid; grid-template-columns:46px 244px 1fr; height:100vh; }
.app.nosb { grid-template-columns:46px 1fr; }
.rail { background:var(--sunk); border-right:1px solid var(--line); display:flex; flex-direction:column; align-items:center; gap:8px; padding:12px 0; }
.rail-logo { height:34px; display:grid; place-items:center; margin-bottom:4px; }
.railbtn { width:32px; height:32px; border-radius:8px; display:grid; place-items:center; color:var(--muted); }
.railbtn:hover,.railbtn.on { background:var(--panel2); color:var(--text); }
.sidebar { background:var(--panel); border-right:1px solid var(--line); display:flex; flex-direction:column; padding:12px 8px; gap:4px; min-height:0; overflow:auto; }
.side-top { padding:0 6px 8px; } .mode { font-size:12px; color:var(--muted); display:flex; align-items:center; gap:6px; }
.switch { border:1px solid var(--line2); border-radius:var(--r); padding:10px 10px 10px 12px; display:flex; align-items:center; gap:8px; cursor:pointer; margin-bottom:14px; }
.switch:hover { border-color:var(--line3); } .switch b { font-size:13px; }
.nav-group { font-size:11px; color:var(--muted); padding:8px 8px 4px; }
.nav { display:flex; align-items:center; gap:9px; padding:8px 12px; border-radius:9px; font-size:14px; width:100%; }
.nav:hover:not(:disabled),.nav.on { background:var(--panel2); }
.soon { font-size:10px; color:var(--muted); background:var(--panel2); border-radius:20px; padding:1px 7px; }
.user { display:flex; align-items:center; gap:10px; padding:8px 4px 0; }
.avatar { width:38px; height:38px; border-radius:10px; background:var(--panel2); display:grid; place-items:center; font-size:17px; flex:none; } .avatar.lg { width:52px; height:52px; font-size:22px; }
.demo-note { font-size:12px; color:var(--muted); padding:8px; border:1px dashed var(--line2); border-radius:9px; margin:6px 4px; }
.main { display:flex; flex-direction:column; min-width:0; min-height:0; }
.top { height:54px; flex:none; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 36px 0 40px; }
.crumb { font-size:14px; }
.content { flex:1; overflow:auto; padding:26px 40px 90px; } .content > * { max-width:1320px; } .content.wide { padding:16px; } .content.wide > * { max-width:none; }
.fab { position:fixed; right:22px; bottom:22px; width:50px; height:50px; border-radius:12px; background:color-mix(in srgb,var(--pos) 18%,var(--bg)); color:var(--pos); display:grid; place-items:center; border:1px solid color-mix(in srgb,var(--pos) 40%,var(--bg)); }
.fab:hover { background:color-mix(in srgb,var(--pos) 26%,var(--bg)); }

/* controls */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:8px 13px; border-radius:9px; background:var(--panel2); border:1px solid var(--line2); font-weight:500; white-space:nowrap; }
.btn:hover:not(:disabled) { background:var(--hover); } .btn.sm { padding:5px 10px; font-size:13px; } .btn.wide { width:100%; margin-top:16px; }
.btn.primary { background:var(--hi); color:var(--hi-fg); border-color:var(--hi); } .btn.primary:hover:not(:disabled) { background:color-mix(in srgb,var(--hi) 86%,var(--bg)); }
.btn.danger { background:#b91c1c; border-color:#b91c1c; color:#fff; } .btn.danger:hover { background:#991b1b; } .btn.ghost { background:none; border-color:transparent; }
.btn.buy { background:var(--pos); border-color:var(--pos); color:#000; } .btn.sell { background:var(--neg); border-color:var(--neg); color:#fff; }
.iconbtn { width:32px; height:32px; border-radius:8px; background:var(--panel2); border:1px solid var(--line2); display:inline-grid; place-items:center; position:relative; flex:none; }
.iconbtn:hover:not(:disabled) { background:var(--hover); } .iconbtn.ghost { background:none; border-color:transparent; } .iconbtn.sm { width:26px; height:26px; }
.iconbtn.fav { color:var(--amber); } .iconbtn.fav svg { fill:currentColor; } .iconbtn.active { color:var(--pos); }
.badge { position:absolute; top:-5px; right:-5px; background:var(--pos); color:#000; font:600 10px/15px system-ui; min-width:15px; border-radius:8px; font-style:normal; text-align:center; }
.selectbtn { display:inline-flex; align-items:center; justify-content:space-between; gap:18px; min-width:150px; padding:8px 13px; border-radius:9px; background:var(--panel2); border:1px solid var(--line2); font-weight:500; }
.linkbtn { color:var(--text); display:inline-flex; align-items:center; gap:6px; font-size:13px; } .linkbtn.open .ic { transform:rotate(90deg); } .linkbtn.inline { text-decoration:underline; display:inline; }
.input { width:100%; background:var(--panel2); border:1px solid var(--line2); border-radius:8px; padding:8px 11px; color:var(--text); font:inherit; outline:none; min-width:0; }
.input:focus { border-color:var(--line3); } .input.auto { width:auto; } .input.sm { padding:4px 8px; max-width:130px; } textarea.input { resize:vertical; }
.color { width:56px; height:34px; border:1px solid var(--line2); border-radius:8px; background:none; padding:2px; }
.form { display:flex; flex-direction:column; gap:14px; }
.field { display:flex; flex-direction:column; gap:6px; flex:1; min-width:0; } .field-label { font-weight:500; display:flex; align-items:center; gap:5px; } .field-label em { color:var(--muted); font-style:normal; } .hint { color:var(--muted); display:inline-flex; cursor:help; }
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; } .row3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.check { display:flex; gap:8px; align-items:center; color:var(--muted); }
.switch input { display:none; }
label.switch { border:0; padding:0; margin:0; gap:10px; cursor:pointer; }
label.switch i { width:30px; height:17px; border-radius:10px; background:var(--track); position:relative; flex:none; } label.switch i::after { content:""; position:absolute; top:2px; left:2px; width:13px; height:13px; border-radius:50%; background:#fff; transition:left .15s; }
label.switch input:checked + i { background:var(--pos); } label.switch input:checked + i::after { left:15px; }
.seg { display:grid; grid-template-columns:1fr 1fr; gap:6px; } .segb { padding:8px; border-radius:8px; border:1px solid var(--line2); background:var(--panel2); text-align:center; font-weight:500; }
.segb.buy.on { background:var(--pos); border-color:var(--pos); color:#000; } .segb.sell.on { background:var(--neg); border-color:var(--neg); }
.tabs { display:inline-flex; gap:4px; } .tab { padding:7px 14px; border-radius:8px; color:var(--muted); font-weight:500; } .tab.on { background:var(--panel2); color:var(--text); } .tabs.sm .tab { padding:4px 11px; font-size:13px; }
.searchbox { display:flex; align-items:center; gap:8px; background:var(--panel2); border-radius:9px; padding:9px 12px; color:var(--muted); max-width:330px; margin:14px auto; } .searchbox input { background:none; border:0; outline:none; color:var(--text); font:inherit; width:100%; } .searchbox.flat { margin:0; max-width:none; border-radius:0; background:none; border-bottom:1px solid var(--line); }
.swatch { width:24px; height:24px; border-radius:50%; border:2px solid transparent; } .swatch.on { border-color:var(--hi); }
.presets { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:-4px; }
.note { font-size:12px; color:var(--amber); border:1px solid color-mix(in srgb,var(--amber) 35%,var(--bg)); background:color-mix(in srgb,var(--amber) 10%,var(--bg)); border-radius:8px; padding:8px 10px; }

/* cards & stats */
.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--r); display:flex; flex-direction:column; min-width:0; }
.pad { padding:16px; } .card-title { color:var(--muted); font-weight:500; } .card-title.big { color:var(--text); font-size:17px; }
.card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:14px; }
.h-value { font-size:26px; font-weight:500; line-height:1.25; margin:2px 0; display:flex; align-items:center; gap:6px; }
.kv { display:flex; justify-content:space-between; gap:10px; font-size:13px; color:var(--muted); } .kv b { color:var(--text); font-weight:600; } .kv b.pos { color:var(--pos); } .kv b.neg { color:var(--neg); }
.chip { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:7px; font-size:13px; font-weight:500; }
.chip.pos { background:color-mix(in srgb,var(--pos) 14%,transparent); color:var(--pos); } .chip.neg { background:color-mix(in srgb,var(--neg) 16%,transparent); color:var(--neg); } .chip.flat { background:var(--panel2); color:var(--muted); }
.tri { width:0; height:0; border:4px solid transparent; display:inline-block; margin-right:4px; } .pos .tri,.chip.pos .tri { border-bottom-color:currentColor; border-top-width:0; } .neg .tri,.chip.neg .tri { border-top-color:currentColor; border-bottom-width:0; } .flat .tri { display:none; }
.sdot { width:8px; height:8px; border-radius:50%; display:inline-block; background:#666; flex:none; } .sdot.green { background:var(--pos); } .sdot.red { background:var(--neg); } .sdot.amber { background:var(--amber); } .sdot.blue { background:var(--blue); } .sdot.lg { width:11px; height:11px; }
.status { display:inline-flex; align-items:center; gap:8px; padding:6px 11px; border-radius:8px; border:1px solid var(--line2); background:var(--panel2); font-weight:500; font-size:13px; white-space:nowrap; }
.tag { font-size:10.500px; font-weight:600; padding:2px 8px; border-radius:20px; } .tag.blue { background:color-mix(in srgb,var(--blue) 18%,transparent); color:var(--blue); } .tag.amber { background:color-mix(in srgb,var(--amber) 18%,transparent); color:var(--amber); } .tag.grey { background:var(--track); color:var(--muted); }
.empty { color:var(--muted); text-align:center; padding:26px 10px; font-size:13px; } .empty.tall { padding:70px 10px; }
.meter { height:4px; border-radius:3px; background:var(--track); overflow:hidden; margin-top:5px; } .meter i { display:block; height:100%; border-radius:3px; }
.tickbar { display:flex; gap:3px; height:30px; margin:14px 0 2px; } .tickbar i { flex:1; border-radius:2px; }
.donut { flex:none; }
.plogo { border-radius:10px; display:inline-grid; place-items:center; color:#fff; font-weight:700; flex:none; letter-spacing:-.3px; }

/* charts */
.linechart { position:relative; width:100%; } .linechart svg { display:block; }
.xt { position:absolute; bottom:8px; transform:translateX(-50%); font-size:12px; color:var(--muted); white-space:nowrap; pointer-events:none; }
.yt { position:absolute; right:10px; transform:translateY(-50%); font-size:11px; color:var(--muted); pointer-events:none; }
.cross { position:absolute; width:1px; display:none; pointer-events:none; } .dot { position:absolute; width:10px; height:10px; border-radius:50%; transform:translate(-50%,-50%); display:none; pointer-events:none; }
.barchart { display:flex; flex-direction:column; margin-top:12px; } .bc-plot { position:relative; flex:1; margin:12px 4px 0 40px; }
.bc-zero { position:absolute; left:0; right:0; border-top:1px solid var(--track); } .bc-y { position:absolute; left:-40px; transform:translateY(-50%); font-size:10.500px; color:var(--muted); width:34px; text-align:right; }
.bc-cols { position:absolute; inset:0; display:flex; } .bc-col { flex:1; position:relative; } .bc-bar { position:absolute; min-width:2px; } .bc-v { position:absolute; left:50%; font-size:11px; font-weight:600; white-space:nowrap; }
.bc-x { display:flex; margin:6px 4px 0 40px; } .bc-x span { flex:1; text-align:center; font-size:10.500px; color:var(--muted); white-space:nowrap; overflow:visible; } .bc-x small { display:block; font-size:9.500px; }
.radar { position:relative; margin:18px auto 26px; } .radar-l { position:absolute; transform:translate(-50%,-50%); text-align:center; white-space:nowrap; font-size:12px; } .radar-l b { display:block; font-weight:600; } .radar-l small { color:var(--muted); font-size:10.500px; }
.scorecard { flex-direction:row; } .scoreside { border-left:1px solid var(--line); width:130px; display:flex; flex-direction:column; }
.gauge { display:flex; gap:10px; flex:1; margin-top:10px; min-height:230px; } .gauge-track { width:12px; border-radius:6px; background:var(--track); position:relative; } .gauge-fill { position:absolute; inset:0; border-radius:6px; opacity:.9; }
.gauge-mark { position:absolute; left:-18px; border:6px solid transparent; border-left-width:9px; transform:translateY(50%); } .gauge-labels { display:flex; flex-direction:column; justify-content:space-between; font-size:12px; }

/* grids */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; } .grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } .grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; } .grid-sym { display:grid; grid-template-columns:2fr 1fr 1fr; gap:10px; }
.span2 { grid-column:span 2; } .rows2 { grid-row:span 2; display:flex; } .rows2 > .card { flex:1; }
.dash { display:flex; flex-direction:column; gap:12px; } .weekstrip { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }
.daycell { background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:10px 12px; display:flex; flex-direction:column; gap:4px; } .daycell:hover { border-color:var(--line2); }  .daycell b { font-weight:500; }
.grid-dash { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:10px; } .balance .linechart { margin-top:auto; }
.recent { display:grid; grid-template-columns:1fr 1fr; gap:8px; } .rt { border:1px solid var(--line); border-radius:10px; padding:12px 14px; display:flex; flex-direction:column; gap:8px; } .rt:hover { border-color:var(--line2); }
.side { font-weight:500; display:inline-flex; align-items:center; gap:3px; } .side.buy .ic { color:var(--pos); } .side.sell .ic { color:var(--neg); }

/* accounts */
.portfolio { max-width:372px; margin:14px 0; gap:6px; }
.acc-grid,.strat-grid,.sess-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:10px; }
.acc-card { background:var(--panel); border:1px solid var(--line); border-radius:var(--r); display:flex; cursor:pointer; min-height:182px; } .acc-card:hover { border-color:var(--line2); } .acc-card.archived { opacity:.6; }
.acc-main { flex:1; padding:14px 16px; position:relative; display:flex; flex-direction:column; gap:3px; min-width:0; } .acc-name { display:flex; align-items:center; gap:8px; font-size:15px; font-weight:500; padding-right:60px; }
.acc-bal { display:flex; align-items:center; gap:12px; } .acc-bal b { font-size:28px; font-weight:500; } .acc-logo { position:absolute; right:14px; top:14px; } .acc-plat { font-weight:500; margin-top:10px; }
.acc-foot { display:flex; justify-content:space-between; align-items:flex-end; margin-top:auto; padding-top:8px; gap:8px; }
.acc-side { width:46px; border-left:1px solid var(--line); background:var(--sunk); border-radius:0 var(--r) var(--r) 0; display:flex; flex-direction:column; align-items:center; gap:6px; padding:8px 0; }
.acc-add { border:1px solid var(--line); border-radius:var(--r); background:var(--sunk); color:var(--muted); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:182px; font-size:16px; font-weight:500; } .acc-add:hover { color:var(--text); border-color:var(--line2); }
.strat-add,.sess-grid .acc-add { min-height:120px; font-size:14px; } .strat { cursor:pointer; gap:8px; } .strat:hover,.sess:hover { border-color:var(--line2); } .sess { cursor:pointer; gap:12px; } .sess.on { border-color:var(--line3); }
.sess-info { display:grid; grid-template-columns:1.300fr .7fr 1fr; gap:10px; font-size:13px; } .rules { list-style:none; padding:0; margin:4px 0 0; font-size:13px; color:var(--muted); } .rules li { display:flex; gap:6px; align-items:center; }

/* tables */
.table { display:flex; flex-direction:column; } .tr { display:grid; grid-template-columns:54px 1.200fr 1fr .8fr 1fr 1fr 1fr; align-items:center; padding:13px 8px; border-radius:10px; cursor:pointer; text-align:center; }
.tr:hover:not(.th) { background:var(--rowhover); } .tr.sel { background:color-mix(in srgb,var(--pos) 9%,var(--rowsel)); box-shadow:inset 3px 0 0 var(--pos); } .tr.th { background:var(--sunk); color:var(--muted); font-weight:500; cursor:default; padding:14px 8px; margin-bottom:4px; }
.c-check input,.check input { appearance:none; -webkit-appearance:none; width:18px; height:18px; margin:0; border-radius:6px; border:1.500px solid var(--line3); background:var(--panel2); display:inline-grid; place-items:center; cursor:pointer; vertical-align:middle; transition:background-color .15s, border-color .15s, box-shadow .15s, transform .15s; }
.c-check input:hover,.check input:hover { border-color:var(--pos); }
.c-check input:checked,.check input:checked { background:var(--pos); border-color:var(--pos); box-shadow:0 0 12px color-mix(in srgb,var(--pos) 55%,transparent); }
.c-check input:checked::after,.check input:checked::after { content:""; width:9px; height:5px; border-left:2.200px solid #04130a; border-bottom:2.200px solid #04130a; transform:translateY(-1px) rotate(-45deg); }
.c-check input:active,.check input:active { transform:scale(.88); }
.table.cmp .tr { grid-template-columns:1.400fr repeat(6,1fr); cursor:default; } .table.sym .tr { grid-template-columns:1fr 1fr 1fr 50px; cursor:default; padding:7px 8px; }
.table-foot { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; margin-top:12px; } .table-foot > :last-child { text-align:right; }
.pager { display:flex; align-items:center; gap:6px; } .pg { width:30px; height:30px; border-radius:8px; } .pg.on { background:var(--panel2); border:1px solid var(--line2); }
.bulk { display:flex; align-items:center; gap:8px; background:var(--panel2); border-radius:10px; padding:8px 12px; margin-bottom:10px; }
.listrow { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 12px; border:1px solid var(--line); border-radius:9px; }
.maplist { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; } .maplist span { font-size:11px; background:var(--panel2); border-radius:6px; padding:2px 7px; }
.summary { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; border-top:1px solid var(--line); padding-top:14px; } .summary small { display:block; color:var(--muted); } .shot img { max-width:100%; border-radius:8px; display:block; margin-bottom:8px; }

/* calendar */
.ygrid { display:grid; grid-template-columns:70px repeat(13,1fr); gap:8px; } .yhead { background:var(--sunk); border:1px solid var(--line); border-radius:9px; padding:8px 0; text-align:center; font-weight:500; } .yhead.year { display:grid; place-items:center; }
.ycell { border-radius:9px; border:1px solid var(--line); background:var(--sunk); min-height:52px; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:12px; gap:1px; } .ycell b { font-weight:500; font-size:13px; }
.ycell.pos { background:color-mix(in srgb,var(--pos) 12%,var(--sunk)); border-color:color-mix(in srgb,var(--pos) 35%,transparent); } .ycell.pos b { color:var(--pos); } .ycell.neg { background:color-mix(in srgb,var(--neg) 13%,var(--sunk)); border-color:color-mix(in srgb,var(--neg) 35%,transparent); } .ycell.neg b { color:var(--neg); }
.ycell.on { outline:2px solid var(--hi); outline-offset:1px; } .ycell.blank { color:var(--muted); }
.dgrid { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; } .dgrid.head { margin-bottom:6px; color:var(--muted); font-size:12px; text-align:center; }
.dcell { min-height:74px; border:1px solid var(--line); border-radius:9px; background:var(--sunk); padding:6px 8px; display:flex; flex-direction:column; gap:2px; font-size:12px; text-align:left; } .dcell.void { border:0; background:none; } .dnum { color:var(--muted); }
.dcell.pos { background:color-mix(in srgb,var(--pos) 12%,var(--sunk)); } .dcell.pos b { color:var(--pos); } .dcell.neg { background:color-mix(in srgb,var(--neg) 13%,var(--sunk)); } .dcell.neg b { color:var(--neg); }

/* overlays */
.overlay { position:fixed; inset:0; background:var(--overlay); display:grid; place-items:center; z-index:50; padding:20px; }
.modal { background:var(--panel); border:1px solid var(--line2); border-radius:14px; max-width:100%; max-height:calc(100vh - 40px); display:flex; flex-direction:column; }
.modal-head { display:flex; justify-content:space-between; align-items:flex-start; padding:16px 16px 14px; border-bottom:1px solid var(--line); gap:12px; } .modal-title { font-size:16px; font-weight:600; }
.modal-body { padding:16px; overflow:auto; } .modal-foot { display:flex; justify-content:flex-end; gap:8px; padding:12px 16px 16px; }
.popover { position:fixed; z-index:60; background:var(--pop); border:1px solid var(--line2); border-radius:11px; box-shadow:0 14px 40px var(--shadow); max-height:70vh; overflow:auto; }
.menu { padding:5px; min-width:170px; } .mi { display:flex; align-items:center; gap:10px; width:100%; padding:7px 10px; border-radius:7px; font-size:14px; } .mi:hover { background:var(--panel2); } .mi.danger { color:var(--neg); font-weight:600; } .mi small { display:block; color:var(--muted); }
.sep { height:1px; background:var(--line); margin:5px 0; } .submenu { padding-left:10px; border-left:1px solid var(--line); margin-left:10px; }
.toasts { position:fixed; bottom:22px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; gap:8px; z-index:80; align-items:center; } .toast { background:var(--hi); color:var(--hi-fg); padding:9px 15px; border-radius:9px; font-weight:500; font-size:13px; box-shadow:0 8px 28px var(--shadow); } .toast.err { background:#b91c1c; color:#fff; }
.switcher { width:100%; } .sw-list { padding:5px; display:flex; flex-direction:column; } .sw-item { display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:8px; font-size:13px; } .sw-item:hover,.sw-item.on { background:var(--panel2); }

/* wizard & settings */
.wizard .modal-body { padding:0; } .wizard .modal-body > div:last-child { padding:18px; } .progress { height:3px; background:var(--track); width:245px; margin:-30px auto 26px; border-radius:2px; position:relative; z-index:1; pointer-events:none; } .progress i { display:block; height:100%; background:var(--hi); border-radius:2px; transition:width .2s; }
.stepbadge { display:inline-block; background:var(--panel2); color:var(--muted); border-radius:6px; padding:2px 8px; font-size:12px; margin-bottom:8px; }
.choice-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:22px; } .choice { background:var(--panel2); border-radius:12px; padding:36px 34px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px; } .choice:hover { background:var(--hover); } .choice h3 { font-size:22px; } .choice-ic { width:30px; height:30px; background:var(--track); border-radius:7px; display:inline-grid; place-items:center; }
.plat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; } .plat { background:var(--panel2); border-radius:12px; padding:20px 10px 16px; display:flex; flex-direction:column; align-items:center; gap:5px; } .plat:hover:not(:disabled) { background:var(--hover); } .plat b { font-size:15px; margin-top:8px; } .plat.soon { background:none; border:1px solid var(--line); opacity:.75; }
.split { display:grid; grid-template-columns:1fr 1fr; gap:22px; min-height:440px; } .guide { border-left:1px solid var(--line); padding-left:22px; display:flex; flex-direction:column; gap:16px; } .guide-step b { font-size:13px; }
.settings .modal-body { padding:0; overflow:hidden; display:flex; } .set { display:grid; grid-template-columns:230px 1fr; min-height:520px; width:100%; } .set-nav { border-right:1px solid var(--line); padding:12px; display:flex; flex-direction:column; gap:3px; } .set-group { font-size:12px; color:var(--muted); padding:8px 4px 4px; }
.set-item { padding:7px 12px; border-radius:8px; margin-left:8px; } .set-item:hover,.set-item.on { background:var(--panel2); } .set-help { margin-top:auto; font-size:12px; color:var(--muted); text-align:center; padding:10px; }
.set-pane { padding:18px; overflow:auto; display:flex; flex-direction:column; gap:10px; max-height:calc(100vh - 150px); } .sbox { gap:12px; }
.plans { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:6px; } .plan { border:1px solid var(--line); border-radius:10px; padding:14px; display:flex; flex-direction:column; gap:2px; min-height:140px; } .plan.on { border-color:var(--line3); } .plan .btn { margin-top:auto; }
.help { display:flex; flex-direction:column; gap:10px; }

/* replay */
.replay { display:grid; grid-template-columns:1fr 300px; gap:12px; height:calc(100vh - 54px - 32px); } .replay-main { min-height:0; } .replay-bar,.replay-foot { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 12px; flex-wrap:wrap; } .replay-bar { border-bottom:1px solid var(--line); } .replay-foot { border-top:1px solid var(--line); }
.replay-canvas { flex:1; width:100%; min-height:0; cursor:grab; display:block; } .replay-side { display:flex; flex-direction:column; gap:10px; overflow:auto; }

@media (max-width:1100px) { .grid-4,.grid-dash { grid-template-columns:1fr 1fr; } .grid-2,.grid-3,.grid-sym { grid-template-columns:1fr; } .scorecard { flex-direction:column; } .scoreside { width:auto; border-left:0; border-top:1px solid var(--line); } .weekstrip { grid-template-columns:repeat(4,1fr); } .replay { grid-template-columns:1fr; height:auto; } .replay-canvas { height:420px; flex:none; } .ygrid { overflow:auto; grid-template-columns:60px repeat(13,minmax(64px,1fr)); } }
@media (max-width:760px) { .app { grid-template-columns:46px 1fr; } .sidebar { position:fixed; left:46px; top:0; bottom:0; width:244px; z-index:40; } .content { padding:16px 16px 90px; } .top { padding:0 16px; } .split,.choice-grid,.row3 { grid-template-columns:1fr; } .plat-grid { grid-template-columns:1fr 1fr; } .set { grid-template-columns:1fr; } .set-nav { border-right:0; border-bottom:1px solid var(--line); } .tr { font-size:12px; grid-template-columns:30px 1.300fr 1fr .7fr 1fr 0 1fr; } .tr > :nth-child(6) { display:none; } }

/* ---------- hover highlight ---------- */
.nav,.tab,.card,.acc-card,.daycell,.ycell,.dcell,.rt,.tr,.acc-add,.sw-item,.set-item,.btn,.iconbtn,.selectbtn,.plat,.choice,.pg,.railbtn { transition:transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s, border-color .18s, background-color .18s, color .18s; }
.content .card:not(.nozoom) { cursor:pointer; }
.content .card:not(.nozoom):hover:not(:has(button:hover, select:hover, input:hover, .tabs:hover)),
.acc-card:hover, .daycell:hover, .ycell:hover, .dcell:not(.void):hover, .rt:hover, .acc-add:hover, .strat:hover, .plat:hover:not(:disabled), .choice:hover {
  border-color:var(--hi); box-shadow:0 0 0 1px rgba(var(--hl),.9), 0 0 26px rgba(var(--hl),.16), inset 0 0 22px rgba(var(--hl),.035); transform:translateY(-2px); position:relative; z-index:2; }
.nav:hover:not(:disabled), .tab:hover, .tr:not(.th):hover, .sw-item:hover, .set-item:hover, .pg:hover, .railbtn:hover {
  box-shadow:0 0 0 1px rgba(var(--hl),.9), 0 0 18px rgba(var(--hl),.14); background:var(--hover); color:var(--text); transform:translateY(-1px); position:relative; z-index:2; }
.btn:hover:not(:disabled), .iconbtn:hover:not(:disabled), .selectbtn:hover { border-color:rgba(var(--hl),.85); box-shadow:0 0 14px rgba(var(--hl),.12); }
.btn.primary:hover:not(:disabled) { box-shadow:0 0 18px rgba(var(--hl),.35); }
.nav:active:not(:disabled), .tab:active, .content .card:not(.nozoom):active, .daycell:active, .ycell:active, .dcell:active, .rt:active, .acc-card:active { transform:scale(.985); }
.weekstrip { grid-template-columns:repeat(var(--n,7),minmax(0,1fr)); }
.daycell.today { border-color:rgba(var(--hl),.5); background:color-mix(in srgb,var(--panel) 90%,rgb(var(--hl))); box-shadow:0 0 0 1px rgba(var(--hl),.18), 0 0 20px rgba(var(--hl),.14); }
.weekstrip.stacked .daycell > .row { flex-direction:column; align-items:flex-start; gap:2px; } .weekstrip.stacked .daycell { padding:10px; } .weekstrip.stacked .daycell b { overflow:visible; }
.chip.big { font-size:17px; font-weight:600; padding:6px 13px; border-radius:10px; } .chip.big.pos { box-shadow:0 0 18px color-mix(in srgb,var(--pos) 28%,transparent); } .chip.big.neg { box-shadow:0 0 18px color-mix(in srgb,var(--neg) 28%,transparent); }
.daycell b { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:13px; }
.period-btn { min-width:150px; justify-content:space-between; }

/* ---------- spotlight ---------- */
.spot-overlay { position:fixed; inset:0; z-index:70; background:var(--spot-ov); backdrop-filter:blur(16px) saturate(125%); -webkit-backdrop-filter:blur(16px) saturate(125%); }
.spot-box { position:fixed; left:50%; top:50%; translate:-50% -50%; transform-origin:0 0; background:var(--panel); border:1px solid rgba(var(--hl),.55); border-radius:20px; overflow:hidden; --tone:rgb(var(--hl)); animation:spot-glow 2.600s ease-in-out infinite; }
.spot-box.tone-pos { --tone:var(--pos); border-color:color-mix(in srgb,var(--pos) 70%,var(--hi)); } .spot-box.tone-neg { --tone:var(--neg); border-color:color-mix(in srgb,var(--neg) 70%,var(--hi)); }
/* the glow takes the profit and loss colours chosen in Settings */
@keyframes spot-glow { 0%,100% { box-shadow:0 0 0 1px color-mix(in srgb,var(--tone) 35%,transparent), 0 0 60px color-mix(in srgb,var(--tone) 16%,transparent), 0 30px 90px var(--shadow); } 50% { box-shadow:0 0 0 1px color-mix(in srgb,var(--tone) 60%,transparent), 0 0 110px color-mix(in srgb,var(--tone) 30%,transparent), 0 30px 90px var(--shadow); } }
.spot-box::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(120% 80% at 50% -10%, color-mix(in srgb,var(--tone) 16%,transparent), transparent 60%); animation:spot-sheen 1.100s ease-out both; }
@keyframes spot-sheen { from { opacity:0; transform:translateY(-30%); } to { opacity:1; transform:none; } }
.spot-clone { cursor:default !important; }
.spot-box.built { max-height:78vh; min-height:56vh; overflow:auto; display:flex; }
.spot-close { position:fixed; top:22px; right:26px; width:40px; height:40px; border-radius:50%; background:rgba(var(--hl),.1); border:1px solid rgba(var(--hl),.3); display:grid; place-items:center; transition:background .15s, transform .15s; } .spot-close:hover { background:rgba(var(--hl),.22); transform:rotate(90deg); }
.spot-pop { animation:spot-pop 1.400s cubic-bezier(.2,.8,.2,1) .2s both; }
.spot-pop.pos { animation-name:spot-pop-pos; } .spot-pop.neg { animation-name:spot-pop-neg; }
@keyframes spot-pop { 0% { opacity:.2; transform:translateY(8px); } 55% { text-shadow:0 0 30px rgba(var(--hl),.55); } 100% { opacity:1; transform:none; text-shadow:none; } }
@keyframes spot-pop-pos { 0% { color:var(--text); opacity:.2; transform:translateY(8px); } 55% { text-shadow:0 0 34px var(--pos); } 100% { color:var(--pos); opacity:1; transform:none; text-shadow:0 0 0 transparent; } }
@keyframes spot-pop-neg { 0% { color:var(--text); opacity:.2; transform:translateY(8px); } 55% { text-shadow:0 0 34px var(--neg); } 100% { color:var(--neg); opacity:1; transform:none; text-shadow:0 0 0 transparent; } }
.spot-detail { display:flex; flex-direction:column; gap:14px; padding:34px 38px 28px; width:100%; position:relative; }
.spot-title { font-size:30px; font-weight:600; line-height:1.15; }
.spot-num { font-size:clamp(56px,9vw,120px); font-weight:500; line-height:1; letter-spacing:-2px; margin-top:8px; font-variant-numeric:tabular-nums; }
.spot-sub { font-size:18px; min-height:24px; font-variant-numeric:tabular-nums; }
.spot-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:8px; }
.spot-cell { border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:var(--sunk); animation:spot-rise .5s cubic-bezier(.2,.8,.2,1) both; } .spot-cell small { display:block; color:var(--muted); font-size:12px; } .spot-cell b { font-size:16px; font-weight:500; }
.spot-grid .spot-cell:nth-child(n) { animation-delay:calc(.25s + var(--i,0) * 1s); }
.spot-grid .spot-cell:nth-child(1){animation-delay:.25s}.spot-grid .spot-cell:nth-child(2){animation-delay:.29s}.spot-grid .spot-cell:nth-child(3){animation-delay:.33s}.spot-grid .spot-cell:nth-child(4){animation-delay:.37s}.spot-grid .spot-cell:nth-child(5){animation-delay:.41s}.spot-grid .spot-cell:nth-child(6){animation-delay:.45s}.spot-grid .spot-cell:nth-child(7){animation-delay:.49s}.spot-grid .spot-cell:nth-child(8){animation-delay:.53s}.spot-grid .spot-cell:nth-child(n+9){animation-delay:.57s}
@keyframes spot-rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
.spot-notes { border:1px solid var(--line); border-radius:12px; padding:12px 14px; } .spot-notes small { color:var(--muted); } .spot-notes p { margin:4px 0 0; white-space:pre-wrap; }
.spot-img { max-width:100%; border-radius:12px; border:1px solid var(--line); }
.spot-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:8px; }
@media (max-width:760px) { .spot-grid { grid-template-columns:1fr 1fr; } .spot-detail { padding:22px; } }
@media (prefers-reduced-motion:reduce) { *,*::before { animation:none !important; transition:none !important; } }
@media (max-width:1100px) { .weekstrip { grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); } }

/* ---------- themes ---------- */
:root[data-theme="light"] { --impact:#dc2626; --bg:#eceef2; --panel:#ffffff; --panel2:#f1f2f5; --sunk:#f5f6f8; --hover:#e6e8ed; --rowhover:#f2f3f6; --rowsel:#eceef2; --track:#e1e4ea; --pop:#ffffff; --line:#e0e3e9; --line2:#d0d4dc; --line3:#a4aab8; --text:#14151a; --muted:#666c7c; --hl:20,21,28; --hi:#14151a; --hi-fg:#ffffff; --overlay:rgba(30,34,48,.42); --spot-ov:rgba(226,229,236,.6); --shadow:rgba(30,34,48,.2); --pos:color-mix(in srgb,var(--pos-base) 76%,#000); --neg:color-mix(in srgb,var(--neg-base) 86%,#000); --amber:#b96f00; --blue:#2563eb; color-scheme:light; }
:root[data-theme="navy"] { --bg:#050a18; --panel:#0a1226; --panel2:#111c38; --sunk:#070d1e; --hover:#192850; --rowhover:#0e1830; --rowsel:#121e3c; --track:#1b284e; --pop:#0b142b; --line:#18244a; --line2:#24345f; --line3:#40548c; --text:#eef2ff; --muted:#8a97bb; --hl:196,216,255; --hi:#e8efff; --hi-fg:#050a18; --overlay:rgba(2,5,14,.74); --spot-ov:rgba(3,7,20,.55); --shadow:rgba(0,3,12,.65); --blue:#5b9bff; color-scheme:dark; }
:root[data-theme="light"] .card, :root[data-theme="light"] .acc-card, :root[data-theme="light"] .daycell { box-shadow:0 1px 2px rgba(30,34,48,.05); }
:root[data-theme="light"] .spot-close { background:rgba(255,255,255,.7); }
:root.theming *, :root.theming *::before, :root.theming *::after { transition:background-color .45s ease, color .45s ease, border-color .45s ease, box-shadow .45s ease, fill .45s ease, stroke .45s ease !important; }
.theme-menu { padding:8px; display:flex; flex-direction:column; gap:4px; width:232px; }
.theme-opt { display:flex; align-items:center; gap:12px; padding:7px 9px; border-radius:10px; width:100%; border:1px solid transparent; transition:background-color .15s, border-color .15s, transform .15s; }
.theme-opt:hover { background:var(--panel2); border-color:rgba(var(--hl),.6); transform:translateY(-1px); } .theme-opt.on { background:var(--panel2); }
.theme-opt b { font-weight:500; display:block; } .theme-opt small { color:var(--muted); display:block; }
.theme-prev { width:46px; height:32px; border-radius:8px; border:1px solid rgba(128,128,140,.45); position:relative; overflow:hidden; flex:none; }
.theme-prev i { position:absolute; left:7px; right:7px; top:7px; bottom:7px; border-radius:4px; display:block; } .theme-prev u { position:absolute; left:11px; top:12px; width:14px; height:3px; border-radius:2px; display:block; }
.theme-opt .tick { margin-left:auto; color:var(--pos); }

/* ---------- news ---------- */
.news-list { display:flex; flex-direction:column; gap:6px; }
.news-row { display:grid; grid-template-columns:54px 46px 1fr auto; align-items:center; gap:10px; padding:9px 12px; border:1px solid var(--line); border-radius:10px; background:var(--sunk); transition:opacity .3s; }
.news-row.wide { grid-template-columns:58px 48px minmax(0,1.600fr) minmax(70px,.6fr) minmax(70px,.6fr) minmax(96px,auto); padding:11px 14px; }
.news-row .t { font-variant-numeric:tabular-nums; font-weight:500; } .news-row .title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.news-row.past { opacity:.42; } .news-row.next { border-color:color-mix(in srgb,var(--impact) 55%,var(--line)); box-shadow:0 0 18px color-mix(in srgb,var(--impact) 16%,transparent); }
.news-row .val small { display:block; color:var(--muted); font-size:11px; } .news-row .val { font-variant-numeric:tabular-nums; font-size:13px; }
.cur { display:inline-flex; align-items:center; gap:5px; font-weight:600; font-size:12px; } .cur::before { content:""; width:9px; height:9px; border-radius:2px; background:var(--neg-base); box-shadow:0 0 8px color-mix(in srgb,var(--neg-base) 70%,transparent); flex:none; }
.cd { font-size:12px; color:var(--muted); white-space:nowrap; text-align:right; font-variant-numeric:tabular-nums; } .news-row.next .cd { color:var(--impact); font-weight:600; }
.news-day { display:flex; align-items:baseline; gap:10px; margin:14px 0 6px; } .news-day b { font-size:15px; font-weight:600; } .news-day.today b::after { content:"Today"; margin-left:8px; font-size:11px; font-weight:600; color:var(--impact); border:1px solid color-mix(in srgb,var(--impact) 50%,transparent); border-radius:20px; padding:1px 8px; }
.news-headcols { display:grid; grid-template-columns:58px 48px minmax(0,1.600fr) minmax(70px,.6fr) minmax(70px,.6fr) minmax(96px,auto); gap:10px; padding:0 14px; color:var(--muted); font-size:12px; margin-top:6px; } .news-headcols span:last-child { text-align:right; }
.news-next { display:flex; align-items:center; gap:14px; flex-wrap:wrap; } .news-next .spot-num { font-size:clamp(40px,6vw,76px); margin:0; }
.curpick { padding:10px; width:250px; } .curpick .grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:8px 0 10px; }
.curbtn { padding:7px 0; border-radius:8px; border:1px solid var(--line2); background:var(--panel2); text-align:center; font-weight:600; font-size:12px; color:var(--muted); transition:all .15s; } .curbtn.on { border-color:var(--neg-base); color:var(--text); background:color-mix(in srgb,var(--neg-base) 14%,var(--panel2)); } .curbtn:hover { border-color:rgba(var(--hl),.7); }
@media (max-width:760px) { .news-row.wide,.news-headcols { grid-template-columns:50px 44px 1fr auto; } .news-row.wide .val,.news-headcols .v { display:none; } }

/* ---------- summary story ---------- */
.summary-btn { gap:7px; } .summary-btn .ic { color:var(--pos); }
.sum-menu { padding:8px; width:270px; display:flex; flex-direction:column; gap:4px; }
.sum-row { display:flex; align-items:center; gap:4px; }
.sum-play { flex:1; min-width:0; text-align:left; padding:8px 12px; border-radius:10px; border:1px solid var(--line); background:var(--panel2); transition:border-color .15s, box-shadow .15s, transform .15s; }
.sum-play:hover { border-color:rgba(var(--hl),.85); box-shadow:0 0 16px rgba(var(--hl),.14); transform:translateY(-1px); } .sum-play b { display:block; font-weight:600; } .sum-play small { color:var(--muted); display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.story { position:fixed; inset:0; z-index:90; background:var(--bg); display:flex; flex-direction:column; align-items:center; cursor:pointer; overflow:hidden; --tone:var(--muted); animation:st-in .35s ease-out both; user-select:none; -webkit-user-select:none; }
.story.tone-pos { --tone:var(--pos-base); } .story.tone-neg { --tone:var(--neg-base); }
@keyframes st-in { from { opacity:0; } to { opacity:1; } }
.st-glow { position:absolute; left:50%; top:46%; width:min(1100px,130vw); aspect-ratio:1; translate:-50% -50%; border-radius:50%; background:radial-gradient(closest-side, color-mix(in srgb,var(--tone) 26%,transparent), transparent 70%); pointer-events:none; transition:background .6s; animation:st-breathe 5s ease-in-out infinite; }
@keyframes st-breathe { 0%,100% { transform:scale(.92); opacity:.75; } 50% { transform:scale(1.06); opacity:1; } }
.st-top { position:relative; width:min(900px,100%); padding:18px 22px 0; display:flex; flex-direction:column; gap:12px; z-index:2; }
.st-segs { display:flex; gap:5px; } .st-segs span { flex:1; height:3px; border-radius:2px; background:rgba(var(--hl),.18); overflow:hidden; } .st-segs i { display:block; height:100%; width:0; background:rgb(var(--hl)); border-radius:2px; }
.st-head { font-size:13px; } .st-x { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:rgba(var(--hl),.08); border:1px solid rgba(var(--hl),.22); transition:transform .15s, background-color .15s; } .st-x:hover { background:rgba(var(--hl),.2); transform:rotate(90deg); }
.st-stage { position:relative; flex:1; min-height:0; width:100%; display:grid; place-items:center; padding:10px 22px; overflow:auto; z-index:1; }
.st-hint { position:relative; padding:0 0 22px; font-size:12px; color:var(--muted); letter-spacing:.3px; min-height:40px; z-index:1; } .story.paused .st-hint::after { content:"  ·  Paused"; color:var(--text); }
.st-slide { display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; width:min(620px,100%); animation:st-slide .55s cubic-bezier(.2,.8,.2,1) both; } .st-slide.wide { width:min(760px,100%); }
@keyframes st-slide { from { opacity:0; transform:translateY(26px) scale(.96); filter:blur(6px); } to { opacity:1; transform:none; filter:none; } }
.st-pill { font:600 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:3px; text-transform:uppercase; padding:9px 16px; border-radius:30px; border:1px solid rgba(var(--hl),.3); background:rgba(var(--hl),.07); animation:st-pop .5s cubic-bezier(.3,1.500,.5,1) .05s both; }
.st-pill.pos { color:var(--pos); border-color:color-mix(in srgb,var(--pos-base) 55%,transparent); background:color-mix(in srgb,var(--pos-base) 14%,transparent); } .st-pill.neg { color:var(--neg); border-color:color-mix(in srgb,var(--neg-base) 55%,transparent); background:color-mix(in srgb,var(--neg-base) 14%,transparent); }
@keyframes st-pop { from { opacity:0; transform:scale(.7); } to { opacity:1; transform:none; } }
.st-big { font-size:clamp(54px,11vw,124px); font-weight:600; line-height:1; letter-spacing:-3px; font-variant-numeric:tabular-nums; animation:st-num 1.500s cubic-bezier(.2,.8,.2,1) .15s both; } .st-big.pos { color:var(--pos); } .st-big.neg { color:var(--neg); }
@keyframes st-num { 0% { opacity:0; transform:translateY(14px) scale(.94); } 50% { text-shadow:0 0 46px color-mix(in srgb,var(--tone) 80%,transparent); } 100% { opacity:1; transform:none; text-shadow:0 0 0 transparent; } }
.st-chip { font-size:20px; font-weight:600; padding:6px 16px; border-radius:12px; background:rgba(var(--hl),.08); animation:st-rise .5s ease-out .5s both; } .st-chip.pos { color:var(--pos); background:color-mix(in srgb,var(--pos-base) 15%,transparent); } .st-chip.neg { color:var(--neg); background:color-mix(in srgb,var(--neg-base) 16%,transparent); }
.st-sub { font-size:15px; max-width:460px; animation:st-rise .5s ease-out .9s both; }
@keyframes st-rise { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
.st-curve { width:100%; height:200px; } .st-curve svg,.st-card-curve svg { width:100%; height:100%; display:block; overflow:visible; }
.st-line { stroke-dasharray:1; stroke-dashoffset:1; animation:st-draw 1.800s cubic-bezier(.4,0,.2,1) .35s forwards; filter:drop-shadow(0 0 8px color-mix(in srgb,var(--tone) 70%,transparent)); } .st-area { opacity:0; animation:st-fade .9s ease-out 1.500s forwards; }
@keyframes st-draw { to { stroke-dashoffset:0; } } @keyframes st-fade { to { opacity:1; } }
.st-row { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; width:100%; }
.st-mini { min-width:130px; padding:11px 16px; border-radius:12px; border:1px solid var(--line2); background:color-mix(in srgb,var(--panel) 80%,transparent); animation:st-rise .5s cubic-bezier(.2,.8,.2,1) var(--d,.5s) both; } .st-mini b { display:block; font-size:18px; font-weight:600; font-variant-numeric:tabular-nums; } .st-mini small { color:var(--muted); font-size:12px; }
.st-ringwrap { position:relative; width:min(250px,60vw); aspect-ratio:1; display:grid; place-items:center; } .st-ringwrap > div:first-child { position:absolute; inset:0; } .st-ringwrap .st-big { font-size:clamp(44px,8vw,70px); letter-spacing:-2px; }
.st-ring { animation:st-ring 1.500s cubic-bezier(.3,0,.2,1) .3s backwards; filter:drop-shadow(0 0 10px color-mix(in srgb,var(--tone) 70%,transparent)); } @keyframes st-ring { from { stroke-dasharray:0 var(--len); } }
.st-bars { width:min(520px,100%); display:flex; flex-direction:column; gap:12px; } .st-barrow { display:grid; grid-template-columns:100px 1fr 90px; align-items:center; gap:12px; font-size:14px; } .st-barrow span { text-align:left; color:var(--muted); } .st-barrow b { text-align:right; font-variant-numeric:tabular-nums; }
.st-bar { height:10px; border-radius:6px; background:var(--track); overflow:hidden; } .st-bar i { display:block; height:100%; border-radius:6px; transform-origin:left; animation:st-grow 1.100s cubic-bezier(.2,.8,.2,1) var(--d,.5s) both; } @keyframes st-grow { from { transform:scaleX(0); } }
.st-box { text-align:left; width:min(440px,100%); padding:16px 18px; border-radius:14px; border:1px solid var(--line2); background:color-mix(in srgb,var(--panel) 85%,transparent); animation:st-rise .55s cubic-bezier(.2,.8,.2,1) .7s both; } .st-box.pos { border-color:color-mix(in srgb,var(--pos-base) 45%,transparent); background:color-mix(in srgb,var(--pos-base) 9%,var(--panel)); } .st-box.neg { border-color:color-mix(in srgb,var(--neg-base) 45%,transparent); background:color-mix(in srgb,var(--neg-base) 9%,var(--panel)); }
.st-box small { color:var(--muted); font:500 12px ui-monospace,Menlo,monospace; } .st-box b { display:block; font-size:19px; margin:3px 0; }
.st-notes { text-align:left; display:flex; flex-direction:column; gap:16px; width:100%; } .st-notes > div { animation:st-rise .6s cubic-bezier(.2,.8,.2,1) var(--d,.4s) both; } .st-notes small { font:600 11px ui-monospace,Menlo,monospace; letter-spacing:2px; text-transform:uppercase; color:var(--pos); } .st-notes p { margin:4px 0 0; font-size:clamp(16px,2.200vw,20px); line-height:1.4; }
.st-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; animation:st-rise .5s ease-out 1s both; }
.st-card { width:min(360px,86vw); text-align:left; padding:20px; border-radius:22px; background:#0b0b0c; color:#f2f2f3; border:1px solid rgba(255,255,255,.25); display:flex; flex-direction:column; gap:4px; cursor:default; animation:st-card .9s cubic-bezier(.2,.9,.2,1) .15s both; box-shadow:0 0 70px color-mix(in srgb,var(--tone) 30%,transparent), 0 30px 80px var(--shadow); }
.st-card.pos { border-color:color-mix(in srgb,var(--pos-base) 60%,transparent); } .st-card.neg { border-color:color-mix(in srgb,var(--neg-base) 60%,transparent); }
@keyframes st-card { from { opacity:0; transform:perspective(900px) rotateX(18deg) translateY(40px) scale(.9); } to { opacity:1; transform:none; } }
.st-brand { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:#9a9aa2; } .st-tag { font:600 10px ui-monospace,Menlo,monospace; letter-spacing:1.500px; text-transform:uppercase; padding:4px 9px; border-radius:20px; border:1px solid rgba(255,255,255,.25); color:#c8c8cf; }
.st-card-title { font-size:26px; font-weight:600; margin-top:10px; line-height:1.15; } .st-card-sub { font-size:12px; color:#8b8b92; } .st-card-num { font-size:42px; font-weight:600; letter-spacing:-1px; margin-top:8px; line-height:1.1; font-variant-numeric:tabular-nums; color:#f2f2f3; } .st-card-num.pos { color:var(--pos-base); } .st-card-num.neg { color:var(--neg-base); }
.st-card-curve { height:92px; margin:8px 0; } .st-card-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; } .st-card-grid > div { background:#141416; border:1px solid #26262a; border-radius:10px; padding:7px 9px; } .st-card-grid small { display:block; font-size:10.500px; color:#8b8b92; } .st-card-grid b { font-size:14px; font-weight:600; font-variant-numeric:tabular-nums; } .st-card-grid b.pos { color:var(--pos-base); } .st-card-grid b.neg { color:var(--neg-base); }
@media (max-height:760px) { .st-slide { gap:10px; } .st-curve { height:140px; } .st-card-curve { height:64px; } }

/* ---------- start-up greeting ---------- */
.greet { position:fixed; inset:0; z-index:200; background:var(--bg); display:grid; place-items:center; overflow:hidden; cursor:pointer; transition:opacity .6s ease, transform .6s cubic-bezier(.4,0,.2,1), filter .6s ease; }
.greet.out { opacity:0; transform:scale(1.06); filter:blur(10px); pointer-events:none; }
.greet-glow { position:absolute; left:50%; top:50%; width:min(1000px,130vw); aspect-ratio:1; translate:-50% -50%; border-radius:50%; background:radial-gradient(closest-side, rgba(var(--hl),.13), transparent 70%); animation:greet-glow 2.400s ease-out both; }
@keyframes greet-glow { 0% { opacity:0; transform:scale(.5); } 60% { opacity:1; } 100% { opacity:.85; transform:scale(1.05); } }
.greet-box { position:relative; text-align:center; padding:0 24px; max-width:100%; }
.greet-hi { font-size:clamp(18px,2.600vw,26px); color:var(--muted); letter-spacing:.5px; animation:st-rise .7s cubic-bezier(.2,.8,.2,1) .1s both; }
.greet-name { font-size:clamp(44px,9vw,104px); font-weight:600; letter-spacing:-2px; line-height:1.1; margin-top:6px; overflow-wrap:anywhere; }
.greet-name span { display:inline-block; animation:greet-letter 1.300s cubic-bezier(.2,.8,.2,1) calc(.35s + var(--i) * .055s) both; }
@keyframes greet-letter { 0% { opacity:0; transform:translateY(22px) scale(.9); filter:blur(8px); color:var(--muted); } 45% { opacity:1; color:rgb(var(--hl)); text-shadow:0 0 34px rgba(var(--hl),.95), 0 0 80px rgba(var(--hl),.5); } 100% { opacity:1; transform:none; filter:none; color:var(--text); text-shadow:0 0 22px rgba(var(--hl),.28); } }
.greet-line { height:2px; width:min(260px,60%); margin:20px auto 14px; border-radius:2px; background:linear-gradient(90deg, transparent, rgb(var(--hl)), transparent); transform-origin:center; animation:greet-line 1.100s cubic-bezier(.2,.8,.2,1) .9s both; }
@keyframes greet-line { from { transform:scaleX(0); opacity:0; } to { transform:scaleX(1); opacity:.7; } }
.greet-date { font-size:13px; color:var(--muted); animation:st-rise .6s ease-out 1.200s both; }

/* ---------- certificates ---------- */
.certs.drop { outline:2px dashed rgba(var(--hl),.7); outline-offset:10px; border-radius:16px; }
.cert-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:12px; }
.cert { background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; text-align:left; transition:transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s, border-color .18s; }
.cert:hover, .cert-add:hover { border-color:var(--hi); box-shadow:0 0 0 1px rgba(var(--hl),.9), 0 0 26px rgba(var(--hl),.16); transform:translateY(-2px); position:relative; z-index:2; } .cert:active { transform:scale(.985); }
.cert-img { position:relative; aspect-ratio:4/3; background:var(--sunk); overflow:hidden; } .cert-thumb { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s cubic-bezier(.2,.8,.2,1); } .cert:hover .cert-thumb { transform:scale(1.04); }
.cert-info { padding:11px 13px 12px; display:flex; flex-direction:column; gap:3px; min-width:0; } .cert-info b { font-weight:600; }
.cert-badge { font-size:11px; font-weight:600; padding:4px 10px; border-radius:20px; white-space:nowrap; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } .cert-img .cert-badge { position:absolute; left:10px; top:10px; }
.cert-badge.payout { background:color-mix(in srgb,var(--pos-base) 26%,rgba(0,0,0,.55)); color:#d6ffe4; border:1px solid color-mix(in srgb,var(--pos-base) 60%,transparent); } .cert-badge.challenge { background:color-mix(in srgb,var(--blue) 28%,rgba(0,0,0,.55)); color:#dbe9ff; border:1px solid color-mix(in srgb,var(--blue) 60%,transparent); }
.cert-add { min-height:230px; border-style:dashed; border-radius:14px; } .cert-missing { display:grid; place-items:center; height:100%; min-height:120px; color:var(--muted); font-size:12px; padding:12px; text-align:center; }
.cert-previews { display:flex; gap:8px; overflow:auto; padding-bottom:2px; } .cert-previews img { height:110px; border-radius:9px; border:1px solid var(--line2); flex:none; } .cert-edit-img { max-height:170px; max-width:100%; border-radius:9px; border:1px solid var(--line2); align-self:flex-start; }
.cert-full { max-width:100%; max-height:52vh; object-fit:contain; border-radius:12px; border:1px solid var(--line); align-self:center; animation:spot-rise .5s cubic-bezier(.2,.8,.2,1) .2s both; }

/* ---------- prop firm rules ---------- */
.rule-bar { height:7px; border-radius:5px; background:var(--track); overflow:hidden; } .rule-bar i { display:block; height:100%; border-radius:5px; transition:width .6s cubic-bezier(.2,.8,.2,1); }
.rule-cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:22px; } .rule-col { display:flex; flex-direction:column; gap:7px; min-width:0; } .rule-col b { font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.rule-mini { display:flex; flex-direction:column; gap:4px; margin-top:8px; max-width:230px; } .rule-mini-row { display:grid; grid-template-columns:58px 1fr; align-items:center; gap:8px; font-size:11px; color:var(--muted); } .rule-mini .rule-bar { height:4px; }
.namebtn { cursor:pointer; } .namebtn:hover { text-decoration:underline; }
.score-info { padding:14px; display:flex; flex-direction:column; gap:10px; } .score-rows { display:flex; flex-direction:column; gap:2px; }
.score-row { display:grid; grid-template-columns:1fr 78px 40px; gap:8px; align-items:center; padding:6px 0; border-top:1px solid var(--line); font-size:13px; } .score-row.head { border:0; color:var(--muted); font-size:11px; padding:0 0 2px; } .score-row small { display:block; color:var(--muted); font-size:11px; } .score-row > :last-child { text-align:right; }
/* ---------- emotions ---------- */
.emo-pick { display:flex; flex-wrap:wrap; gap:6px; }
.emo { padding:5px 12px; border-radius:20px; border:1px solid var(--line2); background:var(--panel2); font-size:13px; font-weight:500; color:var(--muted); transition:all .15s; } button.emo:hover { border-color:rgba(var(--hl),.7); color:var(--text); }
.emo.on.good, .emo.on { color:var(--pos); border-color:color-mix(in srgb,var(--pos-base) 55%,transparent); background:color-mix(in srgb,var(--pos-base) 14%,transparent); } .emo.on.bad { color:var(--neg); border-color:color-mix(in srgb,var(--neg-base) 55%,transparent); background:color-mix(in srgb,var(--neg-base) 14%,transparent); }
.emo.static { display:inline-block; cursor:inherit; } .emo.static:not(.good):not(.bad) { color:var(--text); border-color:var(--line2); background:var(--panel2); }
.psy-table { display:flex; flex-direction:column; } .psy-row { display:grid; grid-template-columns:minmax(120px,1.200fr) 70px 80px 110px 110px minmax(80px,1.500fr); gap:10px; align-items:center; padding:9px 4px; border-top:1px solid var(--line); font-variant-numeric:tabular-nums; } .psy-row.head { border:0; color:var(--muted); font-size:12px; padding-top:0; } .psy-row b { font-weight:600; }
.psy-bar { height:8px; border-radius:5px; background:var(--track); overflow:hidden; } .psy-bar i { display:block; height:100%; border-radius:5px; }
@media (max-width:760px) { .psy-row { grid-template-columns:1fr 50px 60px 80px; } .psy-row > :nth-child(4), .psy-row > :nth-child(6) { display:none; } }

/* ---------- trade view image ---------- */
.spot-detail > * { flex:none; }
.spot-img { max-width:100%; max-height:38vh; width:auto; height:auto; object-fit:contain; align-self:center; cursor:zoom-in; transition:max-height .35s cubic-bezier(.2,.8,.2,1); }
.spot-img.big { max-height:none; width:100%; cursor:zoom-out; }

/* ---------- trade images ---------- */
.shots { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; } .shots:empty { display:none; }
.shot-item { position:relative; aspect-ratio:16/10; border-radius:9px; overflow:hidden; border:1px solid var(--line2); background:var(--sunk); } .shot-item img { width:100%; height:100%; object-fit:cover; display:block; cursor:zoom-in; }
.shot-x { position:absolute; top:5px; right:5px; width:22px; height:22px; border-radius:50%; background:rgba(0,0,0,.7); color:#fff; display:grid; place-items:center; border:1px solid rgba(255,255,255,.35); } .shot-x:hover { background:#b91c1c; }
.spot-shots { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.spot-shots img { width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:12px; border:1px solid var(--line); cursor:zoom-in; display:block; transition:transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s, border-color .18s; animation:spot-rise .5s cubic-bezier(.2,.8,.2,1) .3s both; }
.spot-shots img:hover { border-color:var(--hi); box-shadow:0 0 0 1px rgba(var(--hl),.9), 0 0 22px rgba(var(--hl),.18); transform:translateY(-2px); }
.lightbox { position:fixed; inset:0; z-index:120; background:rgba(0,0,0,.86); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); display:grid; place-items:center; padding:3vh 3vw; cursor:zoom-out; animation:st-in .2s ease-out both; }
.lightbox img { max-width:94vw; max-height:94vh; object-fit:contain; border-radius:10px; box-shadow:0 30px 90px rgba(0,0,0,.7); animation:lb-in .3s cubic-bezier(.2,.8,.2,1) both; } @keyframes lb-in { from { opacity:0; transform:scale(.92); } }

/* ---------- trade log date chip ---------- */
.filterchip { display:inline-flex; align-items:center; gap:7px; align-self:flex-start; margin-bottom:10px; padding:5px 6px 5px 11px; border-radius:20px; border:1px solid color-mix(in srgb,var(--pos-base) 50%,transparent); background:color-mix(in srgb,var(--pos-base) 12%,transparent); font-size:13px; font-weight:500; }
.filterchip button { width:20px; height:20px; border-radius:50%; display:grid; place-items:center; background:rgba(var(--hl),.1); } .filterchip button:hover { background:rgba(var(--hl),.25); }

/* ---------- score constellation ---------- */
.sv-canvas { position:absolute; inset:0; display:block; }
.sv .radar-l { text-shadow:0 0 10px var(--panel), 0 0 4px var(--panel); }

/* menus must open above enlarged cards and the summary */
.popover { z-index:110; } .toasts { z-index:130; }

/* ---------- product name ---------- */
.brand { font-size:17px; font-weight:600; letter-spacing:-.3px; padding:2px 6px 10px; }
.greet-brand { position:absolute; left:0; right:0; bottom:34px; text-align:center; font-size:13px; font-weight:600; letter-spacing:4px; text-transform:uppercase; color:var(--muted); animation:st-rise .7s ease-out 1.300s both; }

/* ---------- fine grid backdrops ---------- */
.balance .linechart::before, .st-card-curve::before, .st-curve::before { content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(var(--hl),.06) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--hl),.06) 1px, transparent 1px); background-size:30px 30px; background-position:-1px -1px;
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent); mask-image:linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent); }
.balance .linechart svg, .balance .linechart .xt, .st-card-curve svg, .st-curve svg { position:relative; } .balance .linechart .xt { position:absolute; }
.st-card-curve, .st-curve { position:relative; } .st-card-curve::before { background-image:linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size:22px 22px; -webkit-mask-image:none; mask-image:none; border-radius:8px; }
.greet::before { content:""; position:absolute; inset:-60px; pointer-events:none;
  background-image:linear-gradient(rgba(var(--hl),.07) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--hl),.07) 1px, transparent 1px); background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 62% 58% at 50% 50%, #000 15%, transparent 78%); mask-image:radial-gradient(ellipse 62% 58% at 50% 50%, #000 15%, transparent 78%);
  animation:grid-in 1.400s ease-out both, grid-drift 14s linear infinite; }
@keyframes grid-in { from { opacity:0; } } @keyframes grid-drift { to { background-position:44px 44px; } }

/* ---------- typography ---------- */
:root { --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif; --display:"Space Grotesk","Inter",-apple-system,system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; }
body { font-family:var(--font); font-feature-settings:"cv11","ss01"; }
h1, h2, h3, .brand, .modal-title, .spot-title, .st-card-title, .greet-name, .card-title.big { font-family:var(--display); letter-spacing:-.02em; }
h1 { font-weight:600; } h2 { font-weight:600; }
.h-value, .spot-num, .st-big, .st-card-num, .acc-bal b, .sv-num, .chip.big { font-family:var(--display); font-variant-numeric:tabular-nums; letter-spacing:-.03em; }
.h-value { font-weight:600; }
.kv b, .chip, .tr, .ycell, .dcell, .daycell, .psy-row, .rule-col b, .spot-cell b, .st-mini b, .news-row { font-variant-numeric:tabular-nums; }
.st-pill, .st-tag, .st-box small, .st-notes small, .greet-brand, .nav-group, .card-title { font-family:var(--mono); }
.card-title { font-size:11.500px; letter-spacing:.09em; text-transform:uppercase; font-weight:500; } .card-title.big { font-family:var(--display); text-transform:none; letter-spacing:-.02em; font-size:17px; }
.nav-group { letter-spacing:.12em; text-transform:uppercase; font-size:10.500px; }

/* ---------- page transition ---------- */
.content.enter > * { animation:page-in .42s cubic-bezier(.2,.8,.2,1) both; }
@keyframes page-in { from { opacity:0; transform:translateY(14px); filter:blur(4px); } }
.crumb-acc { font:inherit; } .crumb-acc:hover { color:var(--text); text-decoration:underline; }

/* ---------- calendar heatmap ---------- */
.ycell.heat.pos, .dcell.heat.pos, .heat-legend i.pos { background:color-mix(in srgb, var(--pos-base) calc(7% + var(--k,0) * 46%), var(--sunk)); border-color:color-mix(in srgb, var(--pos-base) calc(22% + var(--k,0) * 55%), transparent); }
.ycell.heat.neg, .dcell.heat.neg, .heat-legend i.neg { background:color-mix(in srgb, var(--neg-base) calc(7% + var(--k,0) * 46%), var(--sunk)); border-color:color-mix(in srgb, var(--neg-base) calc(22% + var(--k,0) * 55%), transparent); }
.ycell.heat b, .dcell.heat b { color:color-mix(in srgb, var(--text) calc(var(--k,0) * 70%), var(--tone-c)); } .heat.pos { --tone-c:var(--pos); } .heat.neg { --tone-c:var(--neg); }
.heat-legend { display:flex; align-items:center; justify-content:flex-end; gap:5px; margin-top:12px; font-size:11.500px; color:var(--muted); } .heat-legend i { width:16px; height:16px; border-radius:4px; border:1px solid var(--line); display:block; } .heat-legend i.zero { background:var(--sunk); } .heat-legend span:first-child { margin-right:4px; } .heat-legend span:last-child { margin-left:4px; }

/* ---------- phone layout ---------- */
.mobnav { display:none; }
@media (max-width:760px) {
  .app, .app.nosb { grid-template-columns:1fr; } .rail, .sidebar { display:none; }
  .mobnav { display:grid; grid-template-columns:repeat(5,1fr); position:fixed; left:0; right:0; bottom:0; z-index:45; background:color-mix(in srgb,var(--panel) 88%,transparent); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-top:1px solid var(--line); padding:6px 6px calc(6px + env(safe-area-inset-bottom)); }
  .mob { display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 0 4px; border-radius:10px; font-size:10.500px; color:var(--muted); transition:color .15s, background-color .15s; } .mob.on { color:var(--text); background:var(--panel2); }
  .content { padding:16px 14px calc(96px + env(safe-area-inset-bottom)); } .top { padding:0 14px; height:50px; }
  .fab { bottom:calc(76px + env(safe-area-inset-bottom)); right:14px; }
  h1 { font-size:21px; }
  .grid-dash, .grid-4 { grid-template-columns:1fr 1fr; gap:8px; } .grid-2, .grid-3, .grid-sym { grid-template-columns:1fr; }
  .weekstrip, .weekstrip.stacked { grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; } .daycell { padding:8px; } .weekstrip .daycell > .row { flex-direction:column; align-items:flex-start; gap:2px; }
  .recent, .acc-grid, .strat-grid, .cert-grid { grid-template-columns:1fr; }
  .h-value { font-size:22px; } .pad { padding:13px; }
  .ygrid { grid-template-columns:44px repeat(13,minmax(58px,1fr)); overflow-x:auto; } .dgrid { gap:4px; } .dcell { min-height:58px; padding:5px; font-size:10.500px; } .dcell small { display:none; }
  .scorecard { flex-direction:column; } .scoreside { width:auto; border-left:0; border-top:1px solid var(--line); } .gauge { min-height:150px; }
  .radar { transform:scale(.86); margin:4px auto 10px; }
  .modal { width:100% !important; } .overlay { padding:10px; align-items:end; } .row2, .row3 { grid-template-columns:1fr; }
  .spot-box.built { width:94vw !important; max-height:86vh; } .spot-detail { padding:20px 16px; } .spot-num { letter-spacing:-1px; } .spot-shots { gap:6px; }
  .rule-cols { gap:14px; } .dash > .row.between.end { flex-direction:column; align-items:flex-start; gap:10px; }
  .toasts { bottom:calc(86px + env(safe-area-inset-bottom)); }
  .content .card:not(.nozoom):hover, .daycell:hover, .ycell:hover, .dcell:hover, .rt:hover, .acc-card:hover { transform:none; }
}
@media (max-width:760px) {
  .table:not(.cmp):not(.sym) > .tr { grid-template-columns:26px minmax(0,1.200fr) minmax(0,1fr) auto; gap:8px; font-size:12px; padding:11px 4px; text-align:left; }
  .table:not(.cmp):not(.sym) > .tr > :nth-child(4), .table:not(.cmp):not(.sym) > .tr > :nth-child(5), .table:not(.cmp):not(.sym) > .tr > :nth-child(6) { display:none; }
  .table:not(.cmp):not(.sym) > .tr > :nth-child(3) { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .table.cmp, .table.sym, .psy-table { overflow-x:auto; } .card-head { flex-wrap:wrap; } .table-foot { grid-template-columns:1fr; gap:8px; justify-items:center; } .table-foot > :last-child { text-align:center; }
}
@media (max-width:760px) { .tabs { max-width:100%; overflow-x:auto; scrollbar-width:none; } .tabs::-webkit-scrollbar { display:none; } .tab { white-space:nowrap; flex:none; } .stackl > .row.between { min-width:0; } .selectbtn { min-width:120px; } }

/* ---------- summary card follows the colour scheme ---------- */
.st-card { background:var(--panel); color:var(--text); border-color:rgba(var(--hl),.25); }
.st-brand, .st-card-sub, .st-card-grid small { color:var(--muted); } .st-tag { border-color:rgba(var(--hl),.25); color:var(--muted); }
.st-card-num { color:var(--text); } .st-card-num.pos, .st-card-grid b.pos { color:var(--pos); } .st-card-num.neg, .st-card-grid b.neg { color:var(--neg); }
.st-card-grid > div { background:var(--panel2); border-color:var(--line2); }
.st-card-curve::before { background-image:linear-gradient(rgba(var(--hl),.07) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--hl),.07) 1px, transparent 1px); }

/* ---------- no left rail: logo sits in front of the name ---------- */
.app { grid-template-columns:244px 1fr; } .app.nosb { grid-template-columns:1fr; }
.brand { display:flex; align-items:center; gap:10px; padding:4px 6px 12px; }
.brand-logo { width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:var(--panel2); border:1px solid var(--line2); flex:none; }
@media (max-width:760px) { .app, .app.nosb { grid-template-columns:1fr; } }

/* ---------- Dataflow mark ---------- */
.logo-img { display:block; object-fit:contain; user-select:none; -webkit-user-select:none; pointer-events:none; }
:root[data-theme="light"] .logo-img { filter:invert(1); }
.brand-logo { width:36px; height:36px; border:0; background:none; overflow:hidden; border-radius:8px; } .brand-logo .logo-img { width:46px; height:46px; max-width:none; margin:-6px 0 0 0; transform:translateY(-2px); }
.brand { gap:8px; padding:2px 4px 10px; }
.st-brand { gap:4px; } .st-brand .logo-img { width:26px; height:26px; margin:-6px 0 -2px -4px; }
.greet-mountain { position:absolute; left:50%; top:50%; width:min(680px,96vw); aspect-ratio:1; translate:-50% -56%; pointer-events:none; opacity:.34;
  -webkit-mask-image:radial-gradient(closest-side, #000 45%, transparent 96%); mask-image:radial-gradient(closest-side, #000 45%, transparent 96%); animation:greet-mountain 2.200s cubic-bezier(.2,.8,.2,1) both; }
.greet-mountain .logo-img { width:100%; height:100%; }
@keyframes greet-mountain { from { opacity:0; transform:translateY(34px) scale(.94); filter:blur(8px); } }
.greet-brand { display:flex; align-items:center; justify-content:center; gap:6px; } .greet-brand .logo-img { width:30px; height:30px; margin-top:-8px; }
.greet-box { text-shadow:0 0 24px var(--bg), 0 0 8px var(--bg); }

/* ---------- sidebar hidden: the page uses the full width ---------- */
.app.nosb .content > * { max-width:none; }

/* ---------- sidebar slides in and out ---------- */
.app { transition:grid-template-columns .5s cubic-bezier(.3,.7,.2,1); overflow:hidden; }
.app.nosb { grid-template-columns:0px 1fr; }
.sidebar { width:244px; transition:transform .5s cubic-bezier(.3,.7,.2,1), opacity .4s ease; }
.app.nosb .sidebar { transform:translateX(-100%); opacity:0; pointer-events:none; }
.showsb { transition:opacity .35s ease .15s, transform .35s ease .15s, width .35s ease, margin .35s ease; }
.app:not(.nosb) .showsb { opacity:0; transform:translateX(-8px); width:0; margin-right:-10px; pointer-events:none; border-width:0; overflow:hidden; }
@media (max-width:760px) { .app, .app.nosb { grid-template-columns:1fr; } .showsb { display:none; } }
@media (prefers-reduced-motion:reduce) { .app, .sidebar, .showsb { transition:none; } }

/* ---------- no jump at the right edge while the sidebar slides ---------- */
.content { scrollbar-gutter:stable; }                         /* a scrollbar appearing mid-slide no longer pushes the tiles */
.content > * { transition:max-width .5s cubic-bezier(.3,.7,.2,1); }
.app.nosb .content > * { max-width:calc(100vw - 80px); }      /* a real number instead of "none", so the width limit can glide */
@media (prefers-reduced-motion:reduce) { .content > * { transition:none; } }

/* ---------- right edge always fixed: the page fills the width with and without the sidebar ---------- */
.content > *, .app.nosb .content > * { max-width:none; transition:none; }

/* ---------- name and logo in the top bar while the sidebar is hidden ---------- */
.top { position:relative; }
.top-brand { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) translateY(4px); display:flex; align-items:center; gap:8px; font-family:var(--display); font-size:17px; font-weight:600; letter-spacing:-.02em; white-space:nowrap; pointer-events:none; opacity:0; transition:opacity .45s ease, transform .5s cubic-bezier(.3,.7,.2,1); }
.app.nosb .top-brand { opacity:1; transform:translate(-50%,-50%); transition-delay:.18s; }
@media (max-width:760px) { .top-brand { display:none; } }
@media (prefers-reduced-motion:reduce) { .top-brand { transition:none; } }

/* ================= phone: the essentials first ================= */
.mob-logo { display:none; }
* { -webkit-tap-highlight-color:transparent; }
@media (max-width:760px) {
  html, body { overscroll-behavior:none; }
  .app { height:100dvh; }
  .top { height:calc(50px + env(safe-area-inset-top, 0px)); padding:env(safe-area-inset-top, 0px) max(14px, env(safe-area-inset-right, 0px)) 0 max(14px, env(safe-area-inset-left, 0px)); }
  .mob-logo { display:block; width:30px; height:30px; overflow:hidden; flex:none; margin-right:-4px; } .mob-logo .logo-img { width:40px; height:40px; max-width:none; margin:-7px 0 0 -5px; }
  .crumb { font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; } .top > .row:first-of-type { min-width:0; }
  .content { padding:14px max(14px, env(safe-area-inset-right, 0px)) calc(96px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px)); scrollbar-gutter:auto; }
  .input, select.input, textarea.input, .searchbox input { font-size:16px; }   /* iOS zooms into smaller fields */

  /* dashboard header: name, then one row with Summary and the period */
  .dash > .row.between.end > div:first-child .muted { font-size:12px; }
  .dash > .row.between.end > .row { width:100%; justify-content:space-between !important; flex-wrap:nowrap !important; gap:8px !important; }
  .summary-btn { background:var(--hi); color:var(--hi-fg); border-color:var(--hi); padding:9px 14px; } .summary-btn .ic { color:inherit; }
  .period-btn { min-width:0; flex:1; }

  /* period strip: one swipeable row */
  .weekstrip, .weekstrip.stacked { display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x proximity; margin:0 -14px; padding:2px 14px 6px; scrollbar-width:none; } .weekstrip::-webkit-scrollbar { display:none; }
  .weekstrip .daycell { flex:0 0 27%; scroll-snap-align:center; }

  /* key figures: title and number only; a tap opens the full card */
  .content .grid-dash > .card.pad, .content .grid-4 > .card.pad { min-height:0; gap:2px; padding:12px 13px; position:relative; }
  .content .grid-dash > .card.pad > .stack, .content .grid-dash > .card.pad > .meter, .content .grid-dash > .card.pad > .tickbar,
  .content .grid-4 > .card.pad > .stack, .content .grid-4 > .card.pad > .tickbar { display:none; }
  .content .grid-dash > .card.pad .donut, .content .grid-4 > .card.pad .donut { width:38px; height:38px; }
  .content .grid-dash > .card.pad::after, .content .grid-4 > .card.pad::after { content:"›"; position:absolute; right:10px; bottom:6px; color:var(--muted); font-size:15px; line-height:1; opacity:.7; }
  .content .grid-dash > .card.pad:has(.donut)::after, .content .grid-4 > .card.pad:has(.donut)::after { display:none; }
  .card-title { font-size:10.500px; }
  .content .balance .h-value { font-size:30px; } .content .balance .linechart svg { height:190px !important; }
  .chip.big { font-size:15px; padding:5px 11px; }

  /* lists */
  .rt { padding:11px 12px; } .card-head { margin-bottom:10px; } h2 { font-size:16px; }
  .news-row { grid-template-columns:44px 42px 1fr; } .news-row .cd { grid-column:2 / -1; text-align:left; }
  .rules-card .rule-cols { grid-template-columns:1fr; }

  /* calendar: months as a swipe row */
  .ygrid { display:flex; overflow-x:auto; gap:6px; margin:0 -13px; padding:0 13px 4px; scrollbar-width:none; } .ygrid::-webkit-scrollbar { display:none; }
  .ygrid > span { display:none; } .ygrid > .ycell { flex:0 0 68px; min-height:56px; } .ygrid > .ycell::before { content:attr(title); font-size:10px; color:var(--muted); }
  .ygrid > .ycell.blank { font-size:0; } .ygrid > .ycell.blank::before { font-size:10px; }

  /* overlays use the full width; sheets rise from the bottom */
  .modal { border-radius:18px 18px 0 0; max-height:calc(100dvh - 30px - env(safe-area-inset-top, 0px)); } .overlay { padding:0; } .modal-foot { padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px)); flex-wrap:wrap; }
  .spot-close { top:calc(10px + env(safe-area-inset-top, 0px)); right:12px; } .spot-grid { grid-template-columns:1fr 1fr; }
  .spot-detail > .row:last-child { flex-wrap:wrap; } .spot-detail > .row:last-child .btn { flex:1; }
  .st-top { padding-top:calc(14px + env(safe-area-inset-top, 0px)); } .st-hint { padding-bottom:calc(16px + env(safe-area-inset-bottom, 0px)); } .st-actions .btn { flex:1 1 40%; }
  .popover { max-width:calc(100vw - 16px); }
  .mobnav { padding-left:max(6px, env(safe-area-inset-left, 0px)); padding-right:max(6px, env(safe-area-inset-right, 0px)); }
}
/* touch screens: no hover lift or glow that would stick after a tap */
@media (hover:none) {
  .content .card:not(.nozoom):hover, .acc-card:hover, .daycell:hover, .ycell:hover, .dcell:not(.void):hover, .rt:hover, .acc-add:hover, .strat:hover, .cert:hover, .nav:hover:not(:disabled), .tab:hover, .tr:not(.th):hover, .btn:hover:not(:disabled), .iconbtn:hover:not(:disabled) { transform:none; box-shadow:none; }
  .content .card:not(.nozoom):hover, .acc-card:hover, .daycell:hover, .ycell:hover, .dcell:not(.void):hover, .rt:hover, .cert:hover { border-color:var(--line); }
  .content .card:not(.nozoom):active, .rt:active, .daycell:active, .tr:not(.th):active, .mob:active { transform:scale(.97); transition-duration:.08s; }
}
@media (max-width:760px) {
  .content .balance .linechart { height:190px !important; } .content .balance .linechart svg { height:100% !important; width:100%; }
  .ygrid > .ycell.blank { font-size:12px; color:var(--muted); gap:3px; }
}
@media (max-width:760px) { .spot-box:not(.built) { max-height:84dvh; overflow:auto; } .spot-clone { padding:16px !important; } }
@media (max-width:760px) { .spot-box:not(.built) { overflow-x:hidden; } }

/* ---------- phone: small, quiet add button in the corner ---------- */
@media (max-width:760px) {
  .fab { width:42px; height:42px; border-radius:12px; right:max(12px, env(safe-area-inset-right, 0px)); bottom:calc(74px + env(safe-area-inset-bottom, 0px)); background:color-mix(in srgb,var(--panel) 72%,transparent); border-color:color-mix(in srgb,var(--pos-base) 45%,var(--line)); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 6px 18px var(--shadow); }
  .fab svg { width:18px; height:18px; }
}

/* ---------- touch screens: a tap never leaves a glowing outline behind ---------- */
@media (hover:none) {
  .content .card:hover, .content .card:not(.nozoom):hover:not(:has(button:hover, select:hover, input:hover, .tabs:hover)),
  .acc-card:hover, .daycell:hover, .ycell:hover, .dcell:not(.void):hover, .rt:hover, .acc-add:hover, .strat:hover, .cert:hover, .cert-add:hover, .plat:hover, .choice:hover,
  .nav:hover:not(:disabled), .tab:hover, .tr:not(.th):hover, .sw-item:hover, .set-item:hover, .pg:hover, .btn:hover:not(:disabled), .iconbtn:hover:not(:disabled), .selectbtn:hover, .sum-play:hover, .theme-opt:hover, .curbtn:hover {
    transform:none !important; box-shadow:none !important; border-color:var(--line) !important; z-index:auto !important; }
  .btn:hover:not(:disabled), .iconbtn:hover:not(:disabled), .selectbtn:hover { border-color:var(--line2) !important; }
  .btn.primary:hover:not(:disabled), .summary-btn:hover { border-color:var(--hi) !important; }
  .daycell.today:hover { border-color:rgba(var(--hl),.5) !important; box-shadow:0 0 0 1px rgba(var(--hl),.18), 0 0 20px rgba(var(--hl),.14) !important; }
  .ycell.heat.pos:hover, .dcell.heat.pos:hover { border-color:color-mix(in srgb, var(--pos-base) calc(22% + var(--k,0) * 55%), transparent) !important; }
  .ycell.heat.neg:hover, .dcell.heat.neg:hover { border-color:color-mix(in srgb, var(--neg-base) calc(22% + var(--k,0) * 55%), transparent) !important; }
  .ycell.on { outline:2px solid var(--hi); }
}
/* the add button steps aside while scrolling down and returns when scrolling up */
.fab { transition:transform .3s cubic-bezier(.3,.7,.2,1), opacity .25s ease, background-color .18s; }
.fab.away { transform:translateY(24px) scale(.8); opacity:0; pointer-events:none; }

/* ---------- settings: sections that are not open yet ---------- */
.set-item.locked { display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--muted); opacity:.55; cursor:not-allowed; }
.set-item.locked:hover { background:none !important; box-shadow:none !important; transform:none !important; color:var(--muted) !important; }

/* ---------- day view: curve of the day and the trades in order ---------- */
.day-view { gap:16px; }
.day-label { font-family:var(--mono); font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.dc { position:relative; height:132px; }
.dc-plot, .dc-plot svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.dc-zero { stroke:var(--line2); stroke-width:1; stroke-dasharray:3 4; vector-effect:non-scaling-stroke; }
.dc-line { fill:none; stroke-width:2.200; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.dc-plot svg { animation:dc-reveal 1.300s cubic-bezier(.4,0,.2,1) .2s both; } @keyframes dc-reveal { from { clip-path:inset(-10px 100% -10px 0); } to { clip-path:inset(-10px 0 -10px 0); } }
.dc-dot { position:absolute; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; border:2px solid var(--panel); background:var(--muted); animation:dc-pop .35s cubic-bezier(.3,1.600,.5,1) both; transition:transform .15s; }
.dc-dot.pos { background:var(--pos); box-shadow:0 0 10px color-mix(in srgb,var(--pos-base) 60%,transparent); } .dc-dot.neg { background:var(--neg); box-shadow:0 0 10px color-mix(in srgb,var(--neg-base) 60%,transparent); }
.dc-dot:hover, .dc-dot:focus-visible { transform:scale(1.4); }
@keyframes dc-pop { from { transform:scale(0); } }
.dc-times { position:absolute; left:14px; right:14px; bottom:0; display:flex; justify-content:space-between; font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; }
.day-list { display:flex; flex-direction:column; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.day-list.long { max-height:min(360px, 40vh); overflow-y:auto; }
.day-row { display:grid; grid-template-columns:48px minmax(0,1fr) 56px auto 14px; align-items:center; gap:10px; padding:10px 14px; text-align:left; border-top:1px solid var(--line); background:var(--sunk); font-variant-numeric:tabular-nums; animation:spot-rise .45s cubic-bezier(.2,.8,.2,1) both; transition:background-color .15s; }
.day-row:first-child { border-top:0; } .day-row:hover { background:var(--panel2); }
.dr-time { color:var(--muted); font-size:13px; } .dr-sym { display:flex; align-items:baseline; gap:8px; min-width:0; } .dr-sym b { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .dr-sym small { font-size:12px; }
.dr-r { color:var(--muted); font-size:13px; text-align:right; } .dr-go { color:var(--muted); font-size:16px; }
@media (max-width:760px) { .day-row { grid-template-columns:42px minmax(0,1fr) auto 10px; gap:8px; padding:10px; } .dr-r { display:none; } .dc { height:120px; } }

/* ---------- news page ---------- */
.imp { display:inline-block; width:10px; height:10px; border-radius:3px; flex:none; background:var(--muted); }
.imp.high { background:var(--impact); box-shadow:0 0 8px color-mix(in srgb,var(--impact) 65%,transparent); }
.imp.medium { background:var(--amber); box-shadow:0 0 8px color-mix(in srgb,var(--amber) 55%,transparent); }
.imp.low { background:color-mix(in srgb,var(--muted) 70%,var(--panel)); }
.flagwrap { display:inline-flex; flex:none; } .flag { width:21px; height:14px; display:block; border-radius:3px; box-shadow:0 0 0 1px rgba(var(--hl),.14); }
.nw-legend { display:flex; gap:14px; font-size:12px; color:var(--muted); } .nw-legend span { display:inline-flex; align-items:center; gap:6px; }
.nw-top { display:grid; grid-template-columns:minmax(0,1.050fr) minmax(0,1fr); gap:12px; }
.nw-globe { display:flex; flex-direction:column; gap:10px; }
.globe-host { position:relative; width:100%; aspect-ratio:1; max-height:420px; display:grid; place-items:center; margin:0 auto; touch-action:pan-y; }
.globe-cv { display:block; cursor:grab; } .globe-cv:active { cursor:grabbing; }
.nw-side { display:flex; flex-direction:column; gap:12px; min-width:0; }
.nw-count { font-family:var(--display); font-size:clamp(34px,4.400vw,52px); font-weight:600; letter-spacing:-.03em; line-height:1.05; margin:8px 0 12px; font-variant-numeric:tabular-nums; color:var(--impact); }
.nw-next-ev { display:flex; align-items:center; gap:12px; } .nw-next-ev > div { flex:1; min-width:0; } .nw-next-ev b { display:block; font-weight:600; }
.nw-next-ev .flag { width:30px; height:20px; }
.nw-hint { margin-top:12px; padding-top:12px; border-top:1px solid var(--line); font-size:13px; color:var(--muted); display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.nw-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:10px 0 14px; }
.nw-stat { border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:var(--sunk); display:flex; flex-direction:column; gap:2px; } .nw-stat b { font-family:var(--display); font-size:24px; font-weight:600; font-variant-numeric:tabular-nums; }
.nw-curs { display:flex; flex-direction:column; gap:7px; }
.nw-cur { display:grid; grid-template-columns:22px 38px 1fr 24px; align-items:center; gap:8px; font-size:13px; } .nw-code { font-family:var(--mono); font-weight:600; font-size:12px; } .nw-cur > :last-child { text-align:right; font-variant-numeric:tabular-nums; }
.nw-bar { display:flex; height:6px; border-radius:4px; overflow:hidden; background:var(--track); } .nw-bar i { display:block; height:100%; } .nw-bar i.high { background:var(--impact); } .nw-bar i.medium { background:var(--amber); } .nw-bar i.low { background:color-mix(in srgb,var(--muted) 55%,var(--panel)); }
.nw-filters { display:flex; flex-direction:column; gap:10px; }
.nw-frow { display:flex; align-items:center; gap:6px; flex-wrap:wrap; } .nw-frow > .muted { width:68px; flex:none; }
.nw-chip { display:inline-flex; align-items:center; gap:7px; padding:6px 11px; border-radius:20px; border:1px solid var(--line2); background:var(--panel2); font-size:13px; font-weight:500; color:var(--muted); transition:border-color .15s, color .15s, background-color .15s; }
.nw-chip:hover { border-color:rgba(var(--hl),.7); color:var(--text); } .nw-chip.on { color:var(--text); border-color:rgba(var(--hl),.55); background:color-mix(in srgb,var(--panel2) 70%,rgb(var(--hl))); }
.nw-day { overflow:hidden; } .nw-day.past { opacity:.62; } .nw-day.today { border-color:rgba(var(--hl),.35); }
.nw-dayhead { display:flex; align-items:baseline; gap:10px; padding:13px 16px; border-bottom:1px solid var(--line); background:var(--sunk); } .nw-dayhead b { font-family:var(--display); font-size:16px; font-weight:600; }
.nw-today { font-size:11px; font-weight:600; color:var(--impact); border:1px solid color-mix(in srgb,var(--impact) 50%,transparent); border-radius:20px; padding:1px 8px; }
.nw-rows { display:flex; flex-direction:column; }
.nw-row { display:grid; grid-template-columns:50px 12px 72px minmax(0,1fr) 92px 92px 110px; align-items:center; gap:12px; padding:10px 16px; border-top:1px solid var(--line); font-variant-numeric:tabular-nums; transition:background-color .15s, opacity .3s; }
.nw-row:first-child { border-top:0; } .nw-row:hover { background:var(--panel2); }
.nw-row.past { opacity:.45; } .nw-row.next { background:color-mix(in srgb,var(--impact) 8%,transparent); box-shadow:inset 3px 0 0 var(--impact); }
.nw-time { font-weight:500; } .nw-ccy { display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:12px; font-weight:600; }
.nw-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .nw-row.high .nw-title { font-weight:600; } .nw-row.low .nw-title { color:var(--muted); }
.nw-val { font-size:13px; } .nw-val small { display:block; font-size:10.500px; color:var(--muted); }
.nw-cd { text-align:right; font-size:12px; color:var(--muted); white-space:nowrap; } .nw-row.next .nw-cd { color:var(--impact); font-weight:600; }
@media (max-width:1100px) { .nw-top { grid-template-columns:1fr; } .globe-host { max-height:360px; } }
@media (max-width:760px) {
  .nw-legend { display:none; } .nw-stats { grid-template-columns:repeat(3,minmax(0,1fr)); } .nw-stat b { font-size:20px; }
  .nw-row { grid-template-columns:42px 10px 58px minmax(0,1fr); gap:8px; padding:10px 12px; } .nw-row .nw-val, .nw-row .nw-cd { display:none; }
  .nw-frow > .muted { width:100%; } .globe-host { max-height:300px; }
}
.streak-cols { display:grid; grid-template-columns:1fr 1fr; gap:18px; } .streak-cols > div { min-width:0; }
@media (max-width:760px) { .streak-cols { grid-template-columns:1fr; } }

/* ---------- trade log: table or gallery ---------- */
.seg2 { display:inline-flex; padding:3px; border-radius:10px; border:1px solid var(--line2); background:var(--sunk); gap:2px; }
.seg2 button { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:7px; font-size:13px; font-weight:500; color:var(--muted); transition:background-color .15s, color .15s; }
.seg2 button.on { background:var(--panel2); color:var(--text); box-shadow:0 0 0 1px var(--line2); } .seg2 button:hover:not(.on) { color:var(--text); }
.tgal { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; }
.tg { display:flex; flex-direction:column; text-align:left; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--panel); transition:transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s, border-color .18s; }
.tg:hover { border-color:var(--hi); box-shadow:0 0 0 1px rgba(var(--hl),.9), 0 0 24px rgba(var(--hl),.15); transform:translateY(-2px); position:relative; z-index:2; } .tg:active { transform:scale(.985); }
.tg-img { position:relative; aspect-ratio:16/10; background:var(--sunk); overflow:hidden; border-bottom:1px solid var(--line); }
.tg-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s cubic-bezier(.2,.8,.2,1); } .tg:hover .tg-img img { transform:scale(1.04); }
.tg-empty { position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:6px; color:var(--muted); font-size:12px; background-image:linear-gradient(rgba(var(--hl),.04) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--hl),.04) 1px, transparent 1px); background-size:22px 22px; }
.tg-res { position:absolute; right:8px; bottom:8px; } .tg-res .chip { backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); background:color-mix(in srgb,var(--panel) 70%,transparent); box-shadow:0 0 0 1px var(--line2); }
.tg-res.pos .chip { color:var(--pos); } .tg-res.neg .chip { color:var(--neg); }
.tg-count { position:absolute; left:8px; top:8px; font-size:11px; font-weight:600; padding:2px 7px; border-radius:20px; background:rgba(0,0,0,.6); color:#fff; }
.tg-info { padding:11px 13px 12px; display:flex; flex-direction:column; gap:4px; } .tg-info b { font-weight:600; }
@media (max-width:760px) { .tgal { grid-template-columns:1fr 1fr; gap:8px; } .tg-info { padding:9px 10px; } .seg2 button span { display:none; } }
@media (hover:none) { .tg:hover { transform:none !important; box-shadow:none !important; border-color:var(--line) !important; } }

/* ---------- logo + name in enlarged cards ---------- */
.spot-brand { display:inline-flex; align-items:center; gap:8px; font-family:var(--display); font-weight:600; font-size:14px; letter-spacing:-.01em; color:var(--text); align-self:flex-start; margin-bottom:-4px; }
.spot-brand img { width:22px; height:22px; }
.spot-brand.corner { position:absolute; top:22px; right:26px; z-index:3; color:var(--text); background:color-mix(in srgb,var(--panel) 80%,transparent); padding:5px 10px 5px 6px; border-radius:10px; }
.spot-box.branded { display:flex; flex-direction:column; }
.spot-foot { display:flex; justify-content:flex-end; gap:8px; padding:12px 18px 16px; flex:none; position:relative; z-index:2; }
@media (max-width:760px) { .spot-brand.corner { top:14px; right:56px; } .spot-foot .btn { flex:1; } }

/* ---------- news page: globe in the middle, four cards around it ---------- */
.nw-stage { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.nw-stage .globe-host { max-height:none; aspect-ratio:auto; width:100%; height:min(92vw,380px); grid-column:1 / -1; order:-1; }
.nw-stage.cut { grid-auto-rows:minmax(calc(var(--cut) + 46px),auto); }
.nw-stage.cut .globe-host { order:0; grid-column:auto; z-index:4; pointer-events:none; }
.nw-stage.cut .globe-cv { pointer-events:auto; }
.nw-stage.cut .nw-tile { position:relative; border:0 !important; background:none; box-shadow:none !important; }
.nw-shape { position:absolute; inset:0; pointer-events:none; overflow:visible; }
.nw-shape path { fill:var(--panel); stroke:var(--line); stroke-width:2; transition:stroke .15s, fill .15s; }
.nw-stage.cut .nw-tile:hover:not(:has(button:hover)) .nw-shape path { stroke:rgba(var(--hl),.95); stroke-width:3; fill:color-mix(in srgb,var(--panel) 96%,rgb(var(--hl))); }
.nw-tile .nw-in { position:relative; display:flex; flex-direction:column; gap:4px; }
.nw-stage.cut .nw-in { width:100%; max-width:calc(100% - var(--cut) + 6px); }
.nw-stage.cut .nw-tile.nw-tr .nw-in, .nw-stage.cut .nw-tile.nw-br .nw-in { margin-left:auto; }
.nw-stage.cut .nw-tile.nw-bl, .nw-stage.cut .nw-tile.nw-br { justify-content:flex-end; }
.spot-clone.nw-tile { clip-path:none !important; } .spot-clone .nw-shape { display:none; } .spot-clone .nw-in { max-width:none !important; margin:0 !important; }
.nw-big { margin:6px 0 2px; } .nw-big b { font-family:var(--display); font-size:34px; font-weight:600; letter-spacing:-.02em; }
.nw-tile .nw-stats { margin:8px 0 10px; }
.nw-progress { display:flex; flex-direction:column; gap:6px; } .nw-progress .nw-bar i.done { width:100%; background:rgba(var(--hl),.7); }
.nw-fill { display:flex; height:100%; width:100%; transform-origin:left; } .nw-progress .nw-fill { width:auto; }
.nw-cur.off { opacity:.4; }
.nw-clock { font-family:var(--display); font-size:clamp(38px,4.600vw,56px); font-weight:600; letter-spacing:-.03em; line-height:1.05; margin:8px 0 2px; font-variant-numeric:tabular-nums; }
.nw-today-sum { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:14px 0 12px; padding-top:12px; border-top:1px solid var(--line); font-size:13px; }
.nw-today-sum span { display:inline-flex; align-items:center; gap:6px; }
.nw-tz { align-self:flex-start; }
.nw-day { cursor:pointer; }
@media (max-width:760px) { .nw-stage { grid-template-columns:1fr; } }
/* enlarged globe */
.globe-ov { display:grid; place-items:center; }
.globe-spot { position:relative; display:grid; place-items:center; touch-action:none; }
.globe-pill { position:fixed; left:50%; bottom:6vh; translate:-50% 0; display:none; align-items:center; gap:10px; padding:9px 16px; border-radius:30px; background:color-mix(in srgb,var(--panel) 88%,transparent); border:1px solid var(--line2); font-size:14px; max-width:90vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.globe-pill.on { display:inline-flex; } .globe-pill i { width:9px; height:9px; border-radius:50%; background:var(--impact); flex:none; } .globe-pill b { color:var(--impact); }
.globe-pill.live i { animation:pill-pulse 1.400s ease-out infinite; }
@keyframes pill-pulse { 0% { box-shadow:0 0 0 0 color-mix(in srgb,var(--impact) 70%,transparent); } 100% { box-shadow:0 0 0 12px transparent; } }
/* week calendar card on the news page */
.wc { display:flex; flex-direction:column; gap:10px; margin-top:6px; }
.wc-days { display:grid; grid-template-columns:repeat(var(--n,5),minmax(0,1fr)); gap:5px; }
.wc-day { display:flex; flex-direction:column; align-items:center; gap:2px; padding:7px 2px 8px; border-radius:10px; border:1px solid var(--line); background:var(--sunk); transition:border-color .15s, background-color .15s; min-width:0; }
.wc-day small { font-size:10.500px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; } .wc-day b { font-family:var(--display); font-size:18px; font-weight:600; font-variant-numeric:tabular-nums; }
.wc-day:hover { border-color:rgba(var(--hl),.6); } .wc-day.on { border-color:rgba(var(--hl),.9); background:var(--panel2); box-shadow:0 0 14px rgba(var(--hl),.1); }
.wc-day.today b { color:var(--impact); } .wc-day.past:not(.on) { opacity:.6; }
.wc-sq { display:flex; flex-wrap:wrap; justify-content:center; gap:2px; min-height:9px; max-width:40px; margin-top:3px; } .wc-sq .imp { width:7px; height:7px; border-radius:2px; } .wc-sq em { font-style:normal; font-size:9.500px; color:var(--muted); line-height:7px; }
.wc-head { display:flex; align-items:baseline; justify-content:space-between; gap:8px; padding-top:4px; } .wc-head b { font-weight:600; font-size:14px; }
.wc-list { display:flex; flex-direction:column; max-height:150px; overflow:auto; margin:0 -4px; }
.wc-ev { display:grid; grid-template-columns:40px 10px 21px minmax(0,1fr); align-items:center; gap:8px; padding:6px 4px; border-radius:8px; text-align:left; font-size:13px; } .wc-ev:hover { background:var(--panel2); } .wc-ev.past { opacity:.5; }
.wc-t { font-variant-numeric:tabular-nums; color:var(--muted); } .wc-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wc-empty { padding:10px 0; }
.nw-row.flash { animation:row-flash 1.800s ease-out; }
@keyframes row-flash { 0%, 30% { background:color-mix(in srgb,rgb(var(--hl)) 16%,transparent); box-shadow:inset 3px 0 0 rgb(var(--hl)); } 100% { background:transparent; } }
.nw-stage.cut .wc-list { height:150px; } .nw-stage.cut .wc-empty { min-height:150px; } /* fixed beside the globe, so the card keeps its size when another day is picked */

/* colour pairs in Settings › Customization */
.color-presets { display:flex; flex-wrap:wrap; gap:8px; }
.color-preset { display:inline-flex; align-items:center; gap:8px; padding:7px 12px 7px 9px; border-radius:10px; border:1px solid var(--line2); background:var(--panel2); font-size:13px; font-weight:500; transition:border-color .15s; }
.color-preset:hover { border-color:rgba(var(--hl),.6); } .color-preset.on { border-color:rgba(var(--hl),.95); box-shadow:0 0 12px rgba(var(--hl),.12); }
.color-preset small { color:var(--muted); font-size:11px; font-weight:400; }
.cp-dots { display:inline-flex; } .cp-dots i { width:14px; height:14px; border-radius:50%; border:2px solid var(--panel2); } .cp-dots i + i { margin-left:-5px; }

/* ---------- Analytics › Simulation (Monte Carlo) ---------- */
.mc-head { flex-wrap:nowrap; } .mc-title { flex:1; min-width:0; }
.mc-controls { display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:flex-end; flex:none; max-width:62%; }
.mc-riskrow { display:inline-flex; align-items:center; gap:12px; flex-wrap:nowrap; white-space:nowrap; } /* risk slider and Roll again always side by side */
.mc-risk { display:inline-flex; align-items:center; gap:8px; font-size:13px; } .mc-risk b { font-variant-numeric:tabular-nums; width:42px; }
.mc-range { width:120px; accent-color:rgb(var(--hl)); }
.mc-plot { position:relative; margin-top:6px; }
.mc-cv { display:block; width:100%; height:360px; cursor:crosshair; }
.mc-badge { position:absolute; left:calc(52% + 8px); top:10px; font-size:12px; color:var(--muted); background:color-mix(in srgb,var(--panel) 80%,transparent); border:1px solid var(--line); border-radius:20px; padding:3px 10px; pointer-events:none; }
.mc-count { color:var(--text); font-weight:600; font-variant-numeric:tabular-nums; }
.mc-tip { position:absolute; top:12px; width:178px; padding:10px 12px; border-radius:10px; background:var(--pop); border:1px solid var(--line2); box-shadow:0 10px 30px var(--shadow); font-size:12px; display:flex; flex-direction:column; gap:3px; opacity:0; pointer-events:none; transition:opacity .12s; }
.mc-legend { display:flex; gap:16px; flex-wrap:wrap; font-size:12px; color:var(--muted); margin-top:8px; } .mc-legend span { display:inline-flex; align-items:center; gap:6px; }
.mc-legend i { display:inline-block; width:16px; height:8px; border-radius:2px; }
.mc-legend .l-hist { height:2px; background:rgba(var(--hl),.75); } .mc-legend .l-mid { height:3px; background:rgba(var(--hl),.95); }
.mc-legend .l-50 { background:rgba(var(--hl),.2); } .mc-legend .l-90 { background:rgba(var(--hl),.08); border:1px dashed rgba(var(--hl),.35); }
.mc-bins { display:flex; align-items:flex-end; gap:2px; height:190px; margin-top:6px; }
.mc-bins i { flex:1; min-height:2px; border-radius:3px 3px 1px 1px; transform-origin:bottom; } .mc-bins.grow i { animation:mc-grow .7s cubic-bezier(.2,.8,.2,1) both; }
.mc-bins i.pos { background:color-mix(in srgb,var(--pos) 55%,transparent); } .mc-bins i.neg { background:color-mix(in srgb,var(--neg) 55%,transparent); }
.mc-bins i.med { background:rgb(var(--hl)); box-shadow:0 0 12px rgba(var(--hl),.35); }
@keyframes mc-grow { from { transform:scaleY(0); } }
.mc-axis { display:flex; justify-content:space-between; font-size:11.500px; color:var(--muted); margin-top:6px; font-variant-numeric:tabular-nums; }
.mc-prop { display:flex; flex-direction:column; gap:14px; }
.mc-split { display:flex; height:8px; border-radius:5px; overflow:hidden; background:var(--track); gap:2px; }
.mc-split i { display:block; min-width:0; } .mc-split i.pos { background:var(--pos); } .mc-split i.neg { background:var(--neg); } .mc-split i.open { background:rgba(var(--hl),.25); }
.mc-pill { cursor:pointer; gap:6px; } .mc-pill b { font-variant-numeric:tabular-nums; } .mc-pill:hover { border-color:rgba(var(--hl),.7); }
@media (max-width:760px) { .mc-cv { height:280px; } .mc-controls { justify-content:flex-start; } .mc-badge { left:auto; right:8px; } .mc-bins { height:150px; } }
.mc-binwrap { position:relative; padding-top:24px; }
.mc-start { position:absolute; top:0; bottom:0; width:0; border-left:1px dashed rgba(var(--hl),.45); pointer-events:none; }
.mc-start b { position:absolute; top:0; left:0; translate:-50% 0; font-size:11px; font-weight:600; color:var(--text); background:var(--panel); border:1px solid var(--line2); border-radius:6px; padding:1px 6px; white-space:nowrap; }
.mc-start.edge-l b { translate:0 0; } .mc-start.edge-r b { translate:-100% 0; }
.mc-plot + .mc-legend { } .mc-early[hidden] { display:none; }
@media (max-width:900px) { .mc-head { flex-wrap:wrap; } .mc-controls { flex:1 1 100%; max-width:100%; justify-content:flex-start; } .mc-riskrow { flex:1 1 100%; } .mc-risk { flex:1; min-width:0; } .mc-range { flex:1; min-width:60px; width:auto; } }
@media (max-width:480px) { .mc-riskrow { gap:8px; } .mc-risk { gap:6px; } .mc-risk > span { display:none; } .mc-range { min-width:50px; } }
.mc-sub { min-height:2.9em; } /* room for two lines, so the card keeps its height */

/* ---------- sign-in screen ---------- */
.auth { position:fixed; inset:0; z-index:210; background:var(--bg); display:grid; place-items:center; overflow:hidden auto; padding:24px 16px; transition:opacity .5s ease, filter .5s ease; }
.auth.out { opacity:0; filter:blur(8px); pointer-events:none; }
.auth-mountain { position:absolute; left:50%; top:50%; translate:-50% -46%; width:min(560px,120vw); opacity:.07; pointer-events:none; } .auth-mountain .logo-img { width:100%; height:auto; }
.auth-card { position:relative; width:min(400px,100%); background:color-mix(in srgb,var(--panel) 88%,transparent); border:1px solid var(--line2); border-radius:18px; padding:28px 26px 24px; box-shadow:0 30px 80px var(--shadow); backdrop-filter:blur(10px); animation:auth-in .6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes auth-in { from { opacity:0; transform:translateY(14px) scale(.98); } }
.auth-brand { display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:600; font-size:17px; margin-bottom:18px; }
.auth-title { font-size:24px; margin:0 0 14px; }
.auth-tabs { margin-bottom:16px; display:flex; width:100%; } .auth-tabs .tab { flex:1; justify-content:center; white-space:nowrap; text-align:center; }
.auth-form { display:flex; flex-direction:column; gap:12px; }
.auth-form .btn.wide { width:100%; justify-content:center; height:42px; margin-top:4px; }
.auth-link { align-self:center; margin-top:2px; font-size:13px; } .auth-note { text-align:center; }
.auth-msg { display:none; font-size:13px; line-height:1.4; padding:9px 12px; border-radius:9px; }
.auth-msg.err { display:block; color:var(--neg); background:color-mix(in srgb,var(--neg-base) 10%,transparent); border:1px solid color-mix(in srgb,var(--neg-base) 35%,transparent); }
.auth-msg.ok { display:block; color:var(--text); background:rgba(var(--hl),.06); border:1px solid var(--line2); }
.auth-loading { position:relative; display:flex; align-items:center; gap:12px; color:var(--muted); font-size:14px; }
.spinner { width:18px; height:18px; border-radius:50%; border:2px solid rgba(var(--hl),.18); border-top-color:rgb(var(--hl)); animation:spin .8s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } }
.sync-line { display:flex; align-items:center; gap:6px; } .sync-dot { width:6px; height:6px; border-radius:50%; background:var(--pos); flex:none; }
.sync-line[data-s="saving"] .sync-dot { background:var(--amber); animation:pill-pulse 1.2s ease-out infinite; } .sync-line[data-s="offline"] .sync-dot { background:var(--neg); }
.onb { display:flex; flex-direction:column; gap:10px; }
.onb-opt { display:flex; align-items:center; gap:14px; text-align:left; padding:14px 16px; border-radius:12px; border:1px solid var(--line2); background:var(--panel2); transition:border-color .15s; }
.onb-opt:hover { border-color:rgba(var(--hl),.7); } .onb-opt b { display:block; font-weight:600; } .onb-opt small { color:var(--muted); font-size:12.5px; }
.onb-opt .onb-ic { width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:rgba(var(--hl),.08); flex:none; }
.invite-row { display:grid; grid-template-columns:150px 1fr auto auto; gap:10px; align-items:center; padding:9px 0; border-top:1px solid var(--line); font-size:13px; } .invite-row:first-child { border-top:0; }
.invite-row code { font-family:var(--mono); font-weight:600; letter-spacing:.04em; }

/* sign-in: moving dots in the background, and the flight into the app */
.auth-stars { position:fixed; inset:0; pointer-events:none; }
.auth .greet-glow { animation:none; opacity:.8; }
.auth.warp .auth-card { animation:auth-away .7s cubic-bezier(.5,0,.75,0) forwards; pointer-events:none; }
.auth.warp .auth-mountain { transition:transform 1.4s cubic-bezier(.5,0,.75,0), opacity 1s ease; transform:scale(3); opacity:0; }
@keyframes auth-away { to { opacity:0; transform:scale(.6) translateY(10px); filter:blur(6px); } }
.auth.flash { animation:auth-flash .7s ease forwards; pointer-events:none; }
@keyframes auth-flash { 0% { background:var(--bg); } 35% { background:#fff; opacity:1; } 100% { background:#fff; opacity:0; } }
.auth.flash > * { opacity:0; transition:opacity .25s; }