/* Look & feel taken from the old alert portal: clean cards, blue accent, automatic dark mode. */
:root{--bg:#f6f7f9;--card:#fff;--ink:#1b1f24;--mut:#6b7280;--line:#e5e7eb;--soft:#f3f4f6;--soft2:#f9fafb;
--acc:#2563eb;--acc2:#1d4ed8;--accbg:#eff6ff;--grn:#15803d;--grnbg:#dcfce7;--red:#b91c1c;--redbg:#fee2e2;
--amb:#b45309;--ambbg:#fef3c7;--blu:#1d4ed8;--blubg:#dbeafe;--hdr:#0f172a;--hdr2:#1e293b;--input:#fff}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#1c222b;--card:#262e39;--ink:#f1f5f9;--mut:#b6c0cc;--line:#3b4552;--soft:#2e3744;--soft2:#2a323e;
--acc:#8ab8ff;--acc2:#5b9bf5;--accbg:#2f3d52;--grn:#6ee7a0;--grnbg:#1f3d2d;--red:#ff9a9a;--redbg:#4d2626;--amb:#fcd34d;--ambbg:#4a3b14;
--blu:#b3d1ff;--blubg:#2f3d52;--hdr:#161b22;--hdr2:#1f2630;--input:#1f262f}}
:root[data-theme=dark]{--bg:#1c222b;--card:#262e39;--ink:#f1f5f9;--mut:#b6c0cc;--line:#3b4552;--soft:#2e3744;--soft2:#2a323e;
--acc:#8ab8ff;--acc2:#5b9bf5;--accbg:#2f3d52;--grn:#6ee7a0;--grnbg:#1f3d2d;--red:#ff9a9a;--redbg:#4d2626;--amb:#fcd34d;--ambbg:#4a3b14;
--blu:#b3d1ff;--blubg:#2f3d52;--hdr:#161b22;--hdr2:#1f2630;--input:#1f262f}
*{box-sizing:border-box}
body{margin:0;font:14px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink)}
.hidden{display:none!important}
a{color:var(--acc)}
.top{display:flex;align-items:center;gap:14px;background:var(--hdr);color:#e2e8f0;padding:8px 16px}
.brand{font-weight:700;color:#93c5fd;letter-spacing:.3px;white-space:nowrap}
nav{display:flex;gap:2px;flex-wrap:wrap}nav a{color:#cbd5e1;text-decoration:none;padding:6px 9px;border-radius:7px;white-space:nowrap}
nav a.on,nav a:hover{background:#1e293b;color:#fff}
#pauseBtn{margin-left:auto}
.statusbar{display:flex;gap:6px;flex-wrap:wrap;align-items:center;background:var(--hdr2);padding:5px 16px;position:sticky;top:0;z-index:10;border-bottom:1px solid #00000040}
.pill{padding:2px 9px;border-radius:99px;font-size:11.5px;background:#334155;color:#cbd5e1;white-space:nowrap}
.pill.ok{background:#14532d;color:#bbf7d0}.pill.bad{background:#991b1b;color:#fee2e2}.pill.warn{background:#92400e;color:#fde68a}
.pill.clickable{cursor:pointer}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}.pill.blink{animation:blink 1s steps(2,start) infinite;font-weight:700}
main{padding:14px 16px;max-width:1900px;margin:0 auto}
#banner .b{padding:8px 16px;font-weight:600}#banner .paused{background:var(--ambbg);color:var(--amb)}#banner .live{background:var(--redbg);color:var(--red)}
.grid{display:grid;gap:14px}.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.grid>*,.mon3>*{min-width:0}
/* Monitor: 3 columns like the old portal - new alert | my alerts | strategies */
.mon3{display:grid;gap:14px;align-items:start}
@media (min-width:1100px){.mon3{grid-template-columns:minmax(290px,.8fr) minmax(270px,.7fr) minmax(560px,1.7fr)}}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;min-width:0}
.card h3{margin:0 0 10px;font-size:15px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.card h3 .sp{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.addbar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th,td{padding:5px 7px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle;white-space:nowrap}
th{font-size:11px;color:var(--mut);font-weight:600;text-transform:uppercase;letter-spacing:.3px;background:var(--soft2)}
td.n,th.n{text-align:right}
.tbl-wrap{overflow:auto;max-height:72vh}
.pos{color:var(--grn)}.neg{color:var(--red)}.mut{color:var(--mut)}.small{font-size:11.5px}
.book{font-size:13px}
.s-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 10px;background:var(--accbg);border-radius:9px;margin-top:10px;font-weight:700}
.ev{border:1px solid var(--line);border-radius:9px;margin:8px 0 0 10px;padding:6px 8px}
.e-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-weight:600}
.tot{margin-left:auto;display:flex;gap:10px;font-variant-numeric:tabular-nums;font-weight:600}
.acts{display:flex;gap:4px;flex-wrap:wrap}
.lk{background:none;border:1px solid var(--line);color:var(--acc);border-radius:6px;padding:1px 7px;font:inherit;font-size:12px;cursor:pointer;white-space:nowrap}
.lk:hover{border-color:var(--acc)}.lk.del{color:var(--red)}.lk.dan{background:var(--red);color:#fff;border-color:var(--red)}
.tw{cursor:pointer;user-select:none;color:var(--mut);width:14px;display:inline-block}
table.legs td,table.legs th{padding:4px 6px}
tr.contract{cursor:pointer}tr.contract:hover td{background:var(--soft2)}
tr.trade td{color:var(--mut);font-size:12px;background:var(--soft2)}
tr.exp td{background:var(--ambbg)!important}tr.dup td{background:var(--redbg)!important}tr.rel td{background:var(--ambbg)}
tr.strat td{background:var(--accbg);font-weight:700}tr.event td{background:var(--soft2);font-weight:600}
tr.closedrow td{color:var(--mut);font-size:12px;cursor:pointer}
.selbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--accbg);border:1px solid var(--acc);border-radius:9px;padding:6px 10px;margin-bottom:8px}
.tag{display:inline-block;padding:1px 6px;border-radius:4px;font-size:11px;font-weight:600;background:var(--soft);color:var(--ink)}
.tag.red{background:var(--redbg);color:var(--red)}.tag.amb{background:var(--ambbg);color:var(--amb)}.tag.grn{background:var(--grnbg);color:var(--grn)}.tag.blu{background:var(--blubg);color:var(--blu)}
.btn{border:1px solid var(--line);background:var(--card);color:var(--ink);padding:6px 11px;border-radius:8px;cursor:pointer;font:inherit}
.btn:hover{border-color:#94a3b8}.btn.pri{background:var(--acc);color:#fff;border-color:var(--acc)}.btn.pri:hover{background:var(--acc2)}
.btn.dan{background:var(--red);color:#fff;border-color:var(--red)}.btn.sm{padding:3px 8px;font-size:12.5px}.btn.ghost{border-color:transparent;background:transparent}
.btn.pause{background:#f59e0b;color:#111;border:0;font-weight:700}.btn.pause.resume{background:#22c55e}
input,select,textarea{font:inherit;padding:6px 8px;border:1px solid var(--line);border-radius:7px;background:var(--input);color:var(--ink)}
input[type=number]{width:100px}label{font-size:12px;color:var(--mut);display:flex;flex-direction:column;gap:3px}
.row{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}.row.c{align-items:center}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px}.kpi .v{font-size:20px;font-weight:700}.kpi .l{color:var(--mut);font-size:12px}
.modal{position:fixed;inset:0;background:rgba(15,23,42,.5);display:flex;align-items:flex-start;justify-content:center;z-index:50;overflow:auto;padding:30px 10px}
.modal-box{background:var(--card);border-radius:12px;padding:18px;width:min(900px,100%);box-shadow:0 20px 50px rgba(0,0,0,.3)}
.modal-box h2{margin:0 0 12px;font-size:17px}
.cond{border:1px solid var(--line);border-radius:9px;padding:8px;margin:6px 0;background:var(--soft2)}.cond.group{background:var(--accbg)}
.legrow{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:4px 0}
.notes{max-height:320px;overflow:auto}.note{padding:5px 0;border-bottom:1px dashed var(--line);white-space:pre-wrap;font-size:12px}
.note .k{font-size:10px;text-transform:uppercase;color:var(--mut);margin-right:6px}
#toast{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:6px;z-index:60}
#toast div{background:#0f172a;color:#fff;padding:9px 14px;border-radius:8px;max-width:420px;box-shadow:0 8px 20px rgba(0,0,0,.25)}#toast div.err{background:#b91c1c}
.auth{display:flex;align-items:center;justify-content:center;min-height:100vh}.auth .card{width:340px;display:flex;flex-direction:column;gap:10px}
pre{background:#0f172a;color:#d1fae5;padding:10px;border-radius:8px;overflow:auto;max-height:420px;font-size:12px}
.bar{height:8px;background:var(--soft);border-radius:4px;position:relative;min-width:80px}.bar i{position:absolute;top:0;bottom:0;border-radius:4px}
.tree-ok{color:var(--grn);font-weight:700}.tree-no{color:var(--mut)}
.hint{color:var(--mut);font-size:12px;margin:4px 0 8px}
.tabs{display:flex;gap:4px;margin-bottom:10px}.tabs button{border:1px solid var(--line);background:var(--card);color:var(--ink);padding:5px 12px;border-radius:7px;cursor:pointer}.tabs button.on{background:var(--acc);color:#fff;border-color:var(--acc)}
input.secret{-webkit-text-security:disc;text-security:disc}
/* guided alert form */
.qa-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:6px}
.qa-card{border:1px solid var(--line);border-radius:9px;padding:7px 9px;cursor:pointer;background:var(--card);color:var(--ink);text-align:left;font:inherit}
.qa-card b{display:block;font-size:12.5px}.qa-card span{font-size:11px;color:var(--mut)}
.qa-card:hover{border-color:#94a3b8}.qa-card.on{border-color:var(--acc);background:var(--accbg);box-shadow:0 0 0 1px var(--acc)}
.qa-step{margin-top:12px}.qa-step>h4{font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--mut);margin:0 0 6px}
.qa-sentence{display:flex;flex-wrap:wrap;gap:6px;align-items:center;background:var(--soft2);border:1px solid var(--line);border-radius:8px;padding:8px;margin-bottom:6px}
.qa-now{font-size:12px;margin-left:auto}.qa-slot{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:4px 0}
.qa-slot .lbl{min-width:105px;font-weight:600;font-size:12px}
.qa-scope{display:flex;align-items:center;gap:6px;background:var(--accbg);border-radius:7px;padding:4px 8px;font-size:12.5px;margin-bottom:6px}
/* phone */
@media (max-width:760px){
  html,body{overflow-x:hidden}body{font-size:14px}
  .top{flex-wrap:wrap;gap:6px;padding:6px 10px}nav{order:3;width:100%;flex-wrap:nowrap;overflow-x:auto}
  #pauseBtn{position:fixed;right:12px;bottom:12px;z-index:40;padding:12px 16px;border-radius:99px;box-shadow:0 6px 16px rgba(0,0,0,.3)}
  .statusbar{padding:5px 8px}main{padding:10px 8px}.card{padding:10px}th,td{padding:6px 5px}
  .modal{padding:0}.modal-box{border-radius:0;min-height:100vh;padding:14px}
  input,select{font-size:16px}.tbl-wrap{max-height:none}.g3,.g4{grid-template-columns:1fr 1fr}.g2{grid-template-columns:1fr}
  .cp{flex-wrap:wrap}.row>*{max-width:100%}.ev{margin-left:0}
}
a.btn,a.lk{text-decoration:none;display:inline-block}
.cond .acts .lk{font-size:11.5px}
.datawin{position:absolute;left:8px;top:6px;z-index:3;background:color-mix(in srgb,var(--card) 88%,transparent);border:1px solid var(--line);border-radius:8px;padding:4px 8px;font-size:12px;line-height:1.5;pointer-events:none;font-variant-numeric:tabular-nums}

.btn.power{margin-left:6px;padding:6px 10px;background:transparent;color:#cbd5e1;border:1px solid #475569}
.btn.power:hover{color:#fff;border-color:#94a3b8}

.qa-card.loopc{border-style:dashed}.cond.loop{border-left:3px solid var(--acc)}
.lo-level{background:var(--card)}.lo-level .lo-ords{margin:4px 0}

.btn.kill{background:#7f1d1d;color:#fff;border:0;font-weight:700;margin-right:6px}.btn.kill:hover{background:#991b1b}
.stale{color:var(--mut)!important;opacity:.6;font-style:italic}
#banner .down{background:#7f1d1d;color:#fff}

.qt-step{border:1px solid var(--line);border-radius:8px;padding:6px 8px;margin:4px 0;background:var(--soft2)}.qt-step.fire{border-color:var(--amb);background:var(--ambbg)}

.s-head{border-left:5px solid var(--sc,transparent)}.ev{border-left:3px solid var(--sc,var(--line))}
.kbd{display:inline-block;min-width:22px;text-align:center;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:0 5px;font:600 12px ui-monospace,monospace;background:var(--soft)}

body.test-env .top{background:#7c2d12}body.test-env .statusbar{background:#9a3412}body.test-env .brand{color:#fed7aa}

.top .btn{white-space:nowrap}

/* softer dark theme: placeholders and hints readable */
:root[data-theme=dark] ::placeholder{color:#8f9aa8}

/* frozen table headers: stay visible while the table scrolls */
.tbl-wrap thead th{position:sticky;top:0;z-index:2;box-shadow:0 1px 0 var(--line)}

/* login page picture */
.auth{position:relative;isolation:isolate;overflow:hidden;background:#0b0d11;justify-content:flex-end;padding:0 4vw}
.auth::before{content:"";position:absolute;inset:-30px;z-index:-2;background:url("/static/login_bg.jpg") center/cover no-repeat;filter:blur(24px) brightness(.45)}
.auth::after{content:"";position:absolute;inset:0;z-index:-1;background:url("/static/login_bg.jpg") left center/contain no-repeat}
.auth .card{background:rgba(20,24,31,.72);color:#f1f5f9;border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 10px 40px rgba(0,0,0,.45)}
.auth .card label{color:#e2e8f0}.auth .card input,.auth .card select{background:rgba(15,18,24,.75);color:#f1f5f9;border-color:rgba(255,255,255,.25)}
@media (max-width:700px){.auth{justify-content:center;align-items:flex-end;padding:0 12px 24px}}

/* visual dashboard */
.viz-hero{display:flex;align-items:center;justify-content:space-between;gap:20px}
.viz-hero-v{font-size:40px;font-weight:800;letter-spacing:-.5px;margin:4px 0}.viz-hero-v.pos{color:var(--grn)}.viz-hero-v.neg{color:var(--red)}
.viz-hero-ring{width:130px}.viz-ring{width:120px;height:120px}
.viz-track{fill:none;stroke:var(--soft);stroke-width:9}.viz-ringval{fill:none;stroke:#2a78d6;stroke-width:9;stroke-linecap:round}
.viz-big{font-size:17px;font-weight:800;text-anchor:middle;fill:var(--ink)}.viz-sm{font-size:9px;text-anchor:middle;fill:var(--mut)}
.viz-kpi.warn{border-color:var(--amb)}
.viz-donut{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.viz-donut svg{width:190px;height:190px;flex:none}
.viz-donut path{stroke:var(--card);stroke-width:2;cursor:pointer}.viz-donut path:hover{opacity:.85}
.viz-legend{display:grid;grid-template-columns:1fr;gap:5px;font-size:12.5px;min-width:150px;max-width:260px;flex:1}
.viz-legend div{display:flex;align-items:center;gap:7px}.viz-legend i{width:10px;height:10px;border-radius:3px;flex:none}.viz-legend span{flex:1}.viz-legend b{font-weight:600;color:var(--mut)}
.viz-div,.viz-area{width:100%;height:auto;display:block}
.viz-zero{stroke:var(--line);stroke-width:1.5}.viz-gain{fill:var(--grn)}.viz-loss{fill:var(--red)}
.viz-lab{font-size:12.5px;fill:var(--ink)}.viz-val{font-size:12.5px;font-weight:700;fill:var(--ink)}.viz-ax{font-size:10.5px;fill:var(--mut)}
.viz-div g:hover rect[fill=transparent]{fill:var(--soft2)}
.viz-grid{stroke:var(--line);stroke-width:1}.viz-limit{stroke:var(--amb);stroke-width:1.5;stroke-dasharray:5 4}
.viz-fill{fill:#2a78d6;opacity:.14}.viz-line{fill:none;stroke:#2a78d6;stroke-width:2;stroke-linejoin:round}
.viz-dot{fill:#2a78d6;stroke:var(--card);stroke-width:2}.viz-peak{fill:var(--red);stroke:var(--card);stroke-width:2}
.viz-meter{margin-top:10px}.viz-bar{height:10px;border-radius:6px;background:var(--soft);overflow:hidden;margin:5px 0}
.viz-bar i{display:block;height:100%;border-radius:6px;background:#2a78d6}.viz-bar i.over{background:var(--red)}
.viz-tip{position:fixed;z-index:70;background:var(--hdr);color:#f1f5f9;padding:6px 9px;border-radius:7px;font-size:12px;pointer-events:none;box-shadow:0 4px 14px rgba(0,0,0,.3);max-width:260px}
:root[data-theme=dark] .viz-ringval,:root[data-theme=dark] .viz-line,:root[data-theme=dark] .viz-bar i{stroke:#3987e5}
:root[data-theme=dark] .viz-fill,:root[data-theme=dark] .viz-dot,:root[data-theme=dark] .viz-bar i:not(.over){fill:#3987e5;background:#3987e5}
details.card summary{cursor:pointer}

.sug{display:flex;flex-direction:column;gap:5px;background:var(--accbg);border-radius:9px;padding:8px 10px;margin:8px 0}
.sug-chip{text-align:left;white-space:normal}

.viz-col{fill:#2a78d6}.viz-muted{fill:var(--line)}.viz-col-bg{background:#2a78d6}.viz-muted-bg{background:var(--line)}
.sw{display:inline-block;width:10px;height:10px;border-radius:3px;vertical-align:-1px;margin-right:3px}
.viz-h{font-size:12px;font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.3px;margin-bottom:6px}
.viz-waits{display:flex;flex-direction:column;gap:9px}.viz-wrow{display:grid;grid-template-columns:78px 1fr 34px;align-items:center;gap:8px;font-size:12.5px}
.viz-wrow.cur span{font-weight:800}.viz-wrow b{text-align:right}
.viz-stack{display:flex;height:16px;border-radius:5px;overflow:hidden;background:var(--soft);gap:2px}.viz-stack i{display:block;height:100%}
.viz-stack i.f{background:#2a78d6;border-radius:4px 0 0 4px}.viz-stack i.x{background:var(--line)}
.viz-ins{background:var(--accbg);border-radius:9px;padding:10px 12px}.viz-ins ul{margin:6px 0 6px 18px;padding:0}.viz-ins li{margin:3px 0}
:root[data-theme=dark] .viz-col{fill:#3987e5}:root[data-theme=dark] .viz-col-bg,:root[data-theme=dark] .viz-stack i.f{background:#3987e5}

.viz-hero-mid{flex:1;max-width:420px;min-width:220px}

.viz-prem{text-align:center}.viz-prem-v{font-size:30px;font-weight:800;margin:2px 0}.viz-prem-v.pos{color:var(--grn)}.viz-prem-v.neg{color:var(--red)}
.viz-bar.big{height:14px}.viz-prem-row{display:flex;justify-content:space-between;font-size:12px;color:var(--mut);gap:10px}.viz-prem-row b{color:var(--ink)}
.viz-bar i.over{background:var(--red)!important}

/* scrolling spot banner */
.ticker{overflow:hidden;white-space:nowrap;background:var(--hdr);color:#e2e8f0;font-size:13px;border-bottom:1px solid #00000040;height:26px;line-height:26px}
.tk-track{display:inline-block;animation:tk 40s linear infinite}
.ticker:hover .tk-track{animation-play-state:paused}
.tk-item{margin:0 14px}.tk-item b{color:#fff;margin-right:4px}.tk-item .pos{color:#4ade80}.tk-item .neg{color:#f87171}.tk-sep{opacity:.4}
@keyframes tk{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* restart vs log out: different look, kept apart */
.btn.power.bot-power{color:#fbbf24;border-color:#b45309}
.btn.power.bot-power:hover{color:#fde68a;border-color:#f59e0b}
.btn.logout{margin-left:18px;padding:6px 4px;background:transparent;border:0;color:#cbd5e1;text-decoration:underline;font-size:13px}
.btn.logout:hover{color:#fff}

.btn.stand{background:transparent;color:#fecaca;border:1px solid #b91c1c;font-weight:600}.btn.stand:hover{background:#7f1d1d;color:#fff}
.btn.stand.on{background:#16a34a;color:#fff;border-color:#16a34a}