[hidden]{display:none !important}
:root{--bg:#f7f8fa;--card:#fff;--fg:#1b1f24;--muted:#6b7280;--line:#e5e7eb;--up:#0f9d58;--dn:#d93025;--acc:#2563eb}
@media (prefers-color-scheme:dark){:root{--bg:#0f1115;--card:#171a21;--fg:#e6e8eb;--muted:#9aa3ae;--line:#2a2f3a;--up:#34c77b;--dn:#ff6b61;--acc:#6ea0ff}}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.4 system-ui,sans-serif}
header{display:flex;gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
h1{font-size:18px;margin:0}h3{margin:0 0 8px;font-size:14px}small,.muted{color:var(--muted)}
.pill{padding:2px 8px;border-radius:10px;background:var(--line);font-size:12px}.price{font-weight:700;font-size:18px}
nav{margin-left:auto}nav button,button{background:var(--card);color:var(--fg);border:1px solid var(--line);padding:6px 12px;border-radius:6px;cursor:pointer}
nav button.active,button[type=submit],#bt-run{background:var(--acc);color:#fff;border-color:var(--acc)}
main{padding:16px;max-width:1300px;margin:auto}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-bottom:12px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:12px;margin-top:12px}
.card{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:12px;overflow-x:auto}
.row{display:flex;gap:8px;align-items:baseline}.row span{width:80px;color:var(--muted)}.row em{color:var(--muted);font-style:normal;font-size:12px}
#chart{height:460px;background:var(--card);border:1px solid var(--line);border-radius:8px}#bt-chart{height:340px}
.legend{color:var(--muted);font-size:12px}
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}th,td{text-align:left;padding:4px 6px;border-bottom:1px solid var(--line)}
.BUY{color:var(--up);font-weight:600}.SELL{color:var(--dn);font-weight:600}.pos{color:var(--up)}.neg{color:var(--dn)}
form{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}input,select{padding:6px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--fg);width:100px}input[name=note]{flex:1;min-width:100px}
tr.skip td{color:var(--muted)}
.scroll{max-height:480px;overflow:auto}.pager{display:flex;gap:6px;margin-bottom:8px}
#tab-data td{white-space:nowrap}
table.mini{margin-top:6px;font-size:12px}table.mini td{padding:2px 4px}tr.cur td{font-weight:700}
#toasts{position:fixed;top:12px;right:12px;display:flex;flex-direction:column;gap:8px;z-index:1000;max-width:calc(100vw - 24px)}
.toast{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--acc);border-radius:8px;padding:10px 32px 10px 12px;box-shadow:0 4px 16px rgba(0,0,0,.18);min-width:240px;position:relative;animation:tin .2s ease-out;transition:opacity .3s}
.toast[data-side=BUY]{border-left-color:var(--up)}.toast[data-side=SELL]{border-left-color:var(--dn)}.toast.out{opacity:0}
.toast .x{position:absolute;top:4px;right:6px;border:0;background:none;font-size:18px;line-height:1;padding:2px 6px;color:var(--muted)}
.t-head{font-weight:600}.t-body{margin:2px 0}.t-foot{font-size:12px;color:var(--muted)}
@keyframes tin{from{transform:translateY(-8px);opacity:0}to{transform:none;opacity:1}}
#notif-btn{border:0;cursor:pointer}#notif-btn:disabled{cursor:default;opacity:.85}
.alert-btn{border:0;cursor:pointer}.alert-btn.on{background:var(--acc);color:#fff}
.warm{display:flex;gap:10px;align-items:center;margin:12px 16px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--card)}
.warm.err{border-color:var(--dn);color:var(--dn)}
.spin{width:14px;height:14px;border:2px solid var(--line);border-top-color:var(--acc);border-radius:50%;animation:sp 1s linear infinite}.warm.err .spin{display:none}
@keyframes sp{to{transform:rotate(360deg)}}
/* ---- shell: browser-style ticker tabs + iframe desks ---- */
body.shell{height:100vh;display:flex;flex-direction:column;overflow:hidden}
.shell-bar{display:flex;align-items:flex-end;gap:12px;padding:8px 12px 0;border-bottom:1px solid var(--line);background:var(--bg)}
.shell-bar h1{font-size:17px;margin:0 6px 9px 4px;white-space:nowrap}
.ticker-tabs{display:flex;align-items:flex-end;gap:2px;flex:0 1 auto;min-width:0;overflow:hidden}
.ttab{flex:0 1 200px;width:200px;min-width:64px;display:flex;align-items:center;gap:6px;padding:8px 12px;
      border:1px solid var(--line);border-bottom:0;border-radius:10px 10px 0 0;background:var(--line);cursor:pointer;
      font-weight:600;white-space:nowrap;overflow:hidden;position:relative;top:1px;color:var(--muted)}
.ttab:hover{background:var(--card);color:var(--fg)}
.ttab.active{background:var(--card);color:var(--fg);border-color:var(--line);z-index:1}
.ttab .tname{overflow:hidden;text-overflow:ellipsis}
.ttab .bell{font-size:12px}
.ttab .badge{margin-left:auto;background:var(--dn);color:#fff;border-radius:9px;padding:0 6px;font-size:11px}
.add-btn{flex:none;font-size:18px;line-height:1;padding:4px 10px;margin-bottom:5px;border-radius:50%;font-weight:700}
.add-btn:disabled{opacity:.4;cursor:not-allowed}
.add-form{display:flex;gap:6px;align-items:center;margin-bottom:5px;flex-wrap:wrap}.add-form input{width:150px;text-transform:uppercase}
#frames{flex:1;min-height:0}#frames iframe{width:100%;height:100%;border:0;display:block}
/* toast line: ticker, price, bold B (green) / S (red) at the end */
.t-line{display:flex;align-items:baseline;gap:10px;font-size:16px}.t-tkr{font-weight:700}.t-px{font-variant-numeric:tabular-nums}
.bs{margin-left:auto;font-size:20px;font-weight:800}.bs-B{color:var(--up)}.bs-S{color:var(--dn)}
/* ---- delete tab ---- */
.danger{display:flex;justify-content:center;padding:24px 16px 32px;border-top:1px solid var(--line);margin-top:16px}
.del-btn{background:var(--dn);border-color:var(--dn);color:#fff;font-weight:600;padding:8px 16px}
.del-btn:disabled{opacity:.45;cursor:not-allowed}
.del-dlg{border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--fg);max-width:420px;width:calc(100vw - 32px)}
.del-dlg::backdrop{background:rgba(0,0,0,.45)}
.del-dlg form{display:block;margin:0}
.del-dlg h3{font-size:16px}
.del-dlg label{display:flex;flex-direction:column;gap:6px;margin:12px 0}.del-dlg input{width:100%;text-transform:uppercase}
.del-actions{display:flex;justify-content:flex-end;gap:8px}.del-actions button{padding:8px 14px}
.bolt{margin-right:6px}