:root { --bg:#0f1420; --panel:#172033; --ink:#e7ecf5; --muted:#9fb0cc; --accent:#4f8cff; --danger:#e5484d; --ok:#30a46c; --warn:#f0a83a; --line:#243049; --pos:#5fd39b; --neg:#ff8a8d; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, Segoe UI, Roboto, sans-serif; background:var(--bg); color:var(--ink); }
.topbar { display:flex; align-items:center; gap:1rem; padding:.75rem 1.25rem; background:var(--panel); border-bottom:1px solid #243049; }
.topbar a { color:var(--ink); text-decoration:none; font-size:.95rem; }
.topbar a:hover { color:var(--accent); }
.brand { font-weight:700; letter-spacing:.5px; margin-right:1rem; }
.spacer { flex:1; }
.user { color:var(--muted); font-size:.9rem; }
.inline { display:inline; }
button.link { background:none; border:none; color:var(--muted); cursor:pointer; }
button.link:hover { color:var(--accent); }
main { max-width:1240px; margin:2rem auto; padding:0 1.25rem; }
footer { text-align:center; color:var(--muted); padding:2rem 0; }
h1 { font-size:1.5rem; } h2 { font-size:1.15rem; margin-top:2rem; }
.panel { background:var(--panel); border:1px solid #243049; border-radius:10px; padding:1.25rem; margin:1rem 0; }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:.5rem .6rem; border-bottom:1px solid #243049; font-size:.92rem; }
th { color:var(--muted); font-weight:600; }
input, select { background:#0d1422; color:var(--ink); border:1px solid #2a3650; border-radius:6px; padding:.45rem .6rem; min-width:260px; }
.btn { background:var(--accent); color:#fff; border:none; border-radius:6px; padding:.5rem .9rem; cursor:pointer; font-size:.92rem; }
.btn.danger { background:var(--danger); }
.btn.ok { background:var(--ok); }
.badge { padding:.15rem .5rem; border-radius:99px; font-size:.8rem; }
.badge.on { background:rgba(229,72,77,.2); color:#ff8a8d; }
.badge.off { background:rgba(48,163,108,.2); color:#5fd39b; }
.msg { padding:.6rem .8rem; border-radius:6px; margin:.5rem 0; }
.msg.err { background:rgba(229,72,77,.15); color:#ff8a8d; }
.msg.ok { background:rgba(48,163,108,.15); color:#5fd39b; }
label { display:block; color:var(--muted); font-size:.85rem; margin:.6rem 0 .2rem; }
.login-wrap { max-width:380px; margin:5rem auto; }

/* ---- Strategies ------------------------------------------------------------------------ */
.topbar { flex-wrap:wrap; }
.page-head { display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; flex-wrap:wrap; margin-bottom:.5rem; }
.page-head h1 { margin:0 0 .25rem; }
.head-actions { display:flex; gap:.75rem; align-items:center; }
.crumbs { color:var(--muted); font-size:.85rem; margin:0 0 .25rem; }
.crumbs a { color:var(--muted); }
.muted { color:var(--muted); }
.small { font-size:.85rem; }
.note { color:var(--muted); font-size:.82rem; max-width:90ch; }
.pos { color:var(--pos); } .neg { color:var(--neg); }
.num, td.num { font-variant-numeric:tabular-nums; white-space:nowrap; }
th.r, td.r { text-align:right; }
.msg.warn { background:rgba(240,168,58,.14); color:#ffc56b; }
.tiles { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:.75rem; margin:1rem 0; }
.tiles.compact { grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); }
.tile { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:.7rem .9rem; display:flex; flex-direction:column; gap:.2rem; }
.tile .lab { color:var(--muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; }
.tile .val { font-size:1.25rem; font-weight:650; font-variant-numeric:tabular-nums; }
.tile .val small { font-size:.8rem; color:var(--muted); font-weight:400; }
.chips { display:flex; flex-wrap:wrap; gap:.4rem; margin:1rem 0; align-items:center; }
.chip { border:1px solid #2a3650; border-radius:99px; padding:.25rem .7rem; font-size:.82rem; color:var(--ink); text-decoration:none; }
.chip.on { border-color:var(--accent); background:rgba(79,140,255,.15); font-weight:600; }
.panel.flush { padding:0; overflow:hidden; }
.panel.empty p { margin:0; color:var(--muted); }
.table-scroll { overflow-x:auto; }
table.strat td { vertical-align:middle; }
table.strat .idx { color:var(--muted); font-variant-numeric:tabular-nums; }
table.strat a.name { color:var(--ink); font-weight:600; text-decoration:none; }
table.strat a.name:hover { color:var(--accent); }
table.strat .sub { color:var(--muted); font-size:.78rem; margin-top:.1rem; }
.pill { display:inline-block; padding:.12rem .55rem; border-radius:99px; font-size:.75rem; white-space:nowrap; border:1px solid transparent; }
.pill.big { font-size:.85rem; padding:.25rem .8rem; }
.pill.on { background:rgba(48,163,108,.2); color:var(--pos); }
.pill.off { background:rgba(159,176,204,.12); color:var(--muted); }
.pill.warn { background:rgba(240,168,58,.18); color:#ffc56b; }
.pill.muted { border-color:#2a3650; color:var(--muted); }
.toggle { width:42px; height:24px; border-radius:99px; border:1px solid #2a3650; background:#0d1422; position:relative; cursor:pointer; padding:0; }
.toggle .knob { position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:var(--muted); transition:left .15s, background .15s; }
.toggle.is-on { background:rgba(48,163,108,.35); border-color:var(--ok); }
.toggle.is-on .knob { left:21px; background:var(--pos); }
.toggle:focus-visible, .btn:focus-visible, .chip:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.spark path { fill:none; stroke-width:1.5; }
.spark.pos path { stroke:var(--pos); } .spark.neg path { stroke:var(--neg); }
.chart { width:100%; height:auto; display:block; }
.chart .grid { stroke:#243049; stroke-width:1; }
.chart .tick { fill:var(--muted); font-size:11px; }
.chart .line { fill:none; stroke-width:2; }
.chart .line.equity { stroke:var(--accent); } .chart .dot.equity { fill:var(--accent); }
.chart .line.invested { stroke:var(--muted); stroke-dasharray:5 4; stroke-width:1.5; } .chart .dot.invested { fill:var(--muted); }
.legend { color:var(--muted); font-size:.82rem; display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; margin-bottom:.5rem; }
.legend .key { display:inline-block; width:18px; height:3px; border-radius:2px; }
.legend .key.equity { background:var(--accent); } .legend .key.invested { background:var(--muted); }
.grid-2 { display:grid; grid-template-columns:minmax(0, 1.6fr) minmax(0, 1fr); gap:1rem; }
@media (max-width: 800px) { .grid-2 { grid-template-columns:1fr; } }
.risk { border-left:3px solid var(--danger); padding-left:.7rem; }
.meters { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.meter { border:1px solid var(--line); border-radius:8px; padding:.5rem .7rem; display:flex; flex-direction:column; gap:.2rem; }
.meter .lab { color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; }
.meter .val { font-size:1.2rem; font-weight:650; } .meter .val small { color:var(--muted); font-size:.8rem; font-weight:400; }
.meter .val.dots { letter-spacing:.1em; font-size:1rem; }
.meter .bar { height:5px; border-radius:3px; background:#0d1422; overflow:hidden; }
.meter .bar i { display:block; height:100%; background:var(--accent); }
.meter .risk-bar i { background:var(--warn); }
.months td, .months th { padding:.35rem .45rem; font-size:.8rem; }
.journal { list-style:none; margin:0; padding:0; }
.journal li { padding:.55rem 1rem; border-bottom:1px solid var(--line); font-size:.88rem; }
.journal .date { color:var(--muted); font-variant-numeric:tabular-nums; margin-right:.5rem; }
.journal .outcome { font-weight:600; margin-right:.5rem; }
.journal .notes { color:var(--muted); }
.side { font-size:.78rem; padding:.05rem .45rem; border-radius:4px; }
.side.buy { background:rgba(48,163,108,.18); color:var(--pos); } .side.sell { background:rgba(229,72,77,.15); color:var(--neg); }
.config fieldset { border:0; margin:0; padding:0; min-width:0; }
.config h3 { margin:1.5rem 0 .5rem; font-size:1rem; }
.form-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:.25rem 1.25rem; }
.form-grid .span-2 { grid-column:span 2; }
@media (max-width: 640px) { .form-grid .span-2 { grid-column:auto; } }
.form-grid input:not([type=checkbox]) { width:100%; min-width:0; }
label.check { display:flex; align-items:center; gap:.5rem; color:var(--ink); font-size:.92rem; margin-top:1.2rem; }
label.check input { min-width:0; width:auto; }
.hint { display:block; color:var(--muted); font-size:.75rem; margin-top:.2rem; }
.field-err { display:block; color:var(--neg); font-size:.78rem; margin-top:.15rem; }
.actions { display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.25rem; }
.btn.ghost { background:transparent; border:1px solid #2a3650; color:var(--ink); }
.btn.danger.ghost { border-color:rgba(229,72,77,.6); color:var(--neg); }
.inline-form { display:flex; gap:.75rem; align-items:center; flex-wrap:wrap; }
.inline-form label { margin:0; color:var(--muted); display:flex; align-items:center; gap:.4rem; }
.inline-form input { min-width:0; }
tr.sel td { background:rgba(79,140,255,.08); }
.roi-cell { min-width:170px; white-space:nowrap; }
main a { color:#8fb3ff; }
tr.sel a { color:#b7ccff; }
.roi-bar { position:relative; display:inline-block; width:90px; height:8px; background:#0d1422; border-radius:4px; vertical-align:middle; margin-right:.4rem; overflow:hidden; }
.roi-bar i { position:absolute; top:0; bottom:0; border-radius:4px; }
.roi-bar i.pos { background:var(--ok); } .roi-bar i.neg { background:var(--danger); }
.roi-bar::after { content:""; position:absolute; left:50%; top:0; bottom:0; width:1px; background:#3a4766; }