/* Portfolio Lab v0.2 design system
   Direction: strict two-colour system (one electric-blue accent on off-white or near-black), big confident numerals,
   data viz as the hero, thin precise lines. Cues from Awwwards SOTD finance sites (Clear Street, Due, Sharplink) and Market Map.
   Colour  light: bg #F3F3F1 · ink #0D111D · ink2 #5A6070 · rule #D9DAD6 · fill #E7E7E3 · accent #2E21DE
           dark:  bg #0D111D · ink #ECEEF4 · ink2 #8B93A7 · rule #242B3D · fill #182033 · accent #6F66FF
           data only: gain #0E8A4F / #3CC47F · loss #D23A2A / #FF6B5B · proxy #A86A00 / #E0A63A
   Type    UI: system sans (-apple-system, Segoe UI, Roboto, Inter). Numerals tabular. ISIN: ui-monospace.
           scale 12 / 14 (body) / 16 (inputs, lead) / 20 (h2 mobile) / 28 (h2 desktop) / 44-72 (hero figure), weights 400/600/700, display tracking -0.02em
   Space   4px base: 4 8 12 16 24 32 48 · content max 1240px · gutters 16 (mobile) / 32 (desktop)
   Radii   0 on surfaces and tables; 999px on chips, segmented controls and buttons only. No shadows, no gradients.
   Targets ≥44px tap targets and ≥16px input text below 760px. Motion: 600ms line-draw on charts; off with prefers-reduced-motion. */
:root{--bg:#F3F3F1;--ink:#0D111D;--ink2:#5A6070;--rule:#D9DAD6;--fill:#E7E7E3;--acc:#2E21DE;--accT:rgba(46,33,222,.08);--pos:#0E8A4F;--neg:#D23A2A;--prox:#A86A00;--hp:14,138,79;--hn:210,58,42;
 --f:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Helvetica,Arial,sans-serif;--m:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
[data-theme=dark]{--bg:#0D111D;--ink:#ECEEF4;--ink2:#8B93A7;--rule:#242B3D;--fill:#182033;--acc:#6F66FF;--accT:rgba(111,102,255,.14);--pos:#3CC47F;--neg:#FF6B5B;--prox:#E0A63A;--hp:60,196,127;--hn:255,107,91}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;font:14px/1.5 var(--f);color:var(--ink);background:var(--bg);overflow-x:hidden}
a{color:var(--acc)}.num,td.n{font-variant-numeric:tabular-nums}.mono{font:12px/1.4 var(--m);color:var(--ink2);letter-spacing:.02em}
.muted{color:var(--ink2)}.small{font-size:12px}.neg{color:var(--neg)}.pos{color:var(--pos)}.warn{color:var(--prox);font-weight:600}.ok{color:var(--pos);font-size:12px;font-weight:600;margin-left:6px}.bad{color:var(--neg);font-size:12px;font-weight:600;margin-left:6px}
header{position:sticky;top:0;z-index:10;background:var(--bg);border-bottom:1px solid var(--rule)}
.bar{display:flex;align-items:center;gap:12px;padding:10px 32px 0;max-width:1304px}
.brand{font-weight:700;font-size:18px;letter-spacing:-.02em;color:var(--ink);text-decoration:none}.brand span{color:var(--acc)}.ver{font-size:12px;color:var(--ink2)}
#demobadge{margin-left:auto}.badge{display:inline-block;padding:2px 10px;border:1px solid var(--prox);color:var(--prox);border-radius:999px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
nav{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding:0 28px;max-width:1304px;-webkit-overflow-scrolling:touch}nav::-webkit-scrollbar{display:none}
nav a{flex:none;color:var(--ink2);text-decoration:none;padding:12px 10px 10px;border-bottom:2px solid transparent;font-weight:500;white-space:nowrap}nav a:hover{color:var(--ink)}nav a.on{color:var(--ink);border-color:var(--acc)}
main{padding:24px 32px;max-width:1304px}section{margin:0 0 40px}
h2{font-size:28px;letter-spacing:-.02em;margin:4px 0 8px;font-weight:700}h3{font-size:12px;margin:32px 0 12px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink2);font-weight:600}
h4{font-size:12px;margin:16px 0 4px;color:var(--ink2);font-weight:600}.lead{font-size:16px;margin:0 0 16px;max-width:760px}
.hero{padding:8px 0 8px}.hero .k{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink2)}
.big{font-size:clamp(44px,9vw,72px);font-weight:700;letter-spacing:-.035em;line-height:1.05;margin:4px 0 12px}
.sub2{display:flex;flex-wrap:wrap;gap:8px 28px;color:var(--ink2)}.sub2 b{color:var(--ink);font-weight:600}
.sum{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline;margin:0 0 12px}.sum b{font-size:28px;letter-spacing:-.02em}
/* controls */
input,select,button,textarea{font:inherit;font-size:14px;color:var(--ink)}
input[type=text],input[type=search],select,textarea{width:100%;min-height:36px;padding:6px 8px;border:1px solid var(--rule);background:var(--bg);border-radius:0}
input:focus,select:focus,textarea:focus{outline:2px solid var(--acc);outline-offset:-1px;border-color:var(--acc)}
input.r{text-align:right;font-variant-numeric:tabular-nums}
button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:6px 16px;border:1px solid var(--ink);background:transparent;color:var(--ink);border-radius:999px;cursor:pointer;text-decoration:none;font-weight:500;white-space:nowrap}
button:hover,.btn:hover{background:var(--fill)}button.pri{background:var(--acc);border-color:var(--acc);color:#fff}button.pri:hover{filter:brightness(1.1)}
button.ghost{border-color:var(--rule);min-height:32px;padding:4px 12px;font-size:12px}button.x{border-color:var(--rule);width:36px;padding:0;font-size:18px}
.file{position:relative;overflow:hidden}.file input{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:16px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:12px 0}
.chk,.rad{display:inline-flex;align-items:center;gap:8px;min-height:36px;cursor:pointer}.chk input,.rad input{width:18px;height:18px;accent-color:var(--acc);margin:0;flex:none}
.fld{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--ink2);margin:0 0 12px;max-width:420px}.fld input,.fld output{color:var(--ink)}
.fld output{min-height:36px;display:flex;align-items:center;justify-content:flex-end;font-size:16px;font-weight:600}
.wgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 12px;max-width:640px}.wgrid .fld{margin-bottom:8px}
.ctl{display:flex;flex-wrap:wrap;gap:4px 24px;align-items:flex-end;margin:0 0 16px}.ctl .fld{width:180px;margin:0}
.slider input{width:100%;accent-color:var(--acc);min-height:44px}.slider b{font-size:20px;color:var(--ink)}
.seg{display:inline-flex;border:1px solid var(--ink);border-radius:999px;overflow:hidden}.seg button{border:0;border-radius:0;min-width:64px}.seg button.on{background:var(--ink);color:var(--bg)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}.chips button{border-color:var(--rule);font-size:13px;padding:4px 12px}.chips button.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
details{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin:12px 0;padding:0 0 4px;max-width:760px}summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600;color:var(--acc)}
textarea{font:13px/1.4 var(--m);resize:vertical}
/* tables */
table{border-collapse:collapse;width:100%}th,td{padding:8px 10px;border-bottom:1px solid var(--rule);text-align:left;vertical-align:middle}
th{font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink2);border-bottom-color:var(--ink)}
td.n,th.n{text-align:right;white-space:nowrap}td.z{color:var(--rule)}tr.sel td{background:var(--accT)}tr.sel .nm{font-weight:700}.nm{white-space:nowrap}
table.hold td{padding:4px 6px}.hold td:nth-child(2){width:150px}.hold td:nth-child(3){width:110px}.hold td:nth-child(4){width:170px}.hold td:nth-child(5){width:130px}
.pen td{padding:4px 6px}.pen input{max-width:80px;margin-left:auto;display:block}
.mt{margin:12px 0}.mt td:first-child{color:var(--ink2)}.lbls td{padding:5px 10px}.ms{margin:2px 0 6px}
tr.tot td,tr.tot th{border-bottom:0;border-top:1px solid var(--ink)}.cand{margin-top:6px;display:flex;flex-direction:column;gap:2px}.cand a{font-size:12px;text-decoration:none}.cand a:hover{text-decoration:underline}
.brk{word-break:break-all}
.lbl{display:inline-block;font-size:11px;padding:0 7px;border:1px solid;border-radius:999px;white-space:nowrap;line-height:18px;margin:1px 2px 1px 0;cursor:help}.L-hard{color:var(--pos)}.L-proxy{color:var(--prox)}.L-analogy{color:var(--neg)}.L-na{color:var(--ink2)}
.note{border-left:2px solid var(--acc);padding:4px 0 4px 14px;margin:12px 0;max-width:860px;color:var(--ink)}
.cols{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:32px}.per{border-top:1px solid var(--rule);padding-top:4px}.per h3{color:var(--ink);font-size:13px}
/* bars */
.ab{position:relative;height:8px;background:var(--fill);min-width:100px}.ab i{position:absolute;left:0;top:0;bottom:0;background:var(--ink2)}.ab b{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--acc)}
.alloc{display:grid;gap:10px;max-width:860px}.ar{display:grid;grid-template-columns:170px minmax(0,1fr) 120px;gap:16px;align-items:center}.av{text-align:right;font-size:13px}
.ddl{display:grid;max-width:860px}.ddr{display:grid;grid-template-columns:260px minmax(0,1fr);gap:16px;padding:10px 0;border-bottom:1px solid var(--rule);color:inherit;text-decoration:none}.ddr:hover .an{color:var(--acc)}
.dbars{display:grid;gap:4px}.db{display:flex;align-items:center;gap:8px;font-size:13px}.db i{display:block;height:10px;flex:none;max-width:75%}.db i.c0{background:var(--ink2)}.db i.c1{background:var(--acc)}
.lg{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:12px;color:var(--ink2);margin:0 0 6px}.lg i{display:inline-block;width:18px;height:0;border-top:2px solid;vertical-align:middle;margin-right:6px}.sw0{border-color:var(--ink2)!important;border-top-style:dashed!important}.sw1{border-color:var(--acc)!important}
/* charts */
.chw{margin:4px 0}svg.ch{display:block;max-width:100%;height:auto;touch-action:pan-y;user-select:none;-webkit-user-select:none}
svg.ch text{font-size:11px;fill:var(--ink2);font-family:var(--f)}svg.ch .gr{stroke:var(--rule);stroke-width:1}svg.ch .base{stroke:var(--ink2);stroke-dasharray:2 3}
svg.ch .after{fill:var(--fill);opacity:.6}svg.ch .ln{fill:none;stroke-width:2;stroke-linejoin:round}svg.ch .ln.dash{stroke-dasharray:5 3;stroke-width:1.6}
svg.ch .area{opacity:.1}svg.ch .ev line{stroke:var(--acc);stroke-width:1;opacity:.45}svg.ch .ev text{fill:var(--acc);font-weight:700}svg.ch .hid{display:none}
svg.ch .cur line{stroke:var(--ink);stroke-width:1}svg.ch .cur circle{stroke:var(--bg);stroke-width:2}
svg.ch .ln.anim:not(.dash){stroke-dasharray:1;stroke-dashoffset:1;animation:draw .7s ease-out forwards}svg.ch .ln.anim.dash{animation:fade .7s ease-out}
@keyframes draw{to{stroke-dashoffset:0}}@keyframes fade{from{opacity:0}}
@media (prefers-reduced-motion:reduce){svg.ch .ln.anim:not(.dash){animation:none;stroke-dasharray:none;stroke-dashoffset:0}svg.ch .ln.anim.dash{animation:none}}
.tt{min-height:22px;font-size:12px;color:var(--ink2);padding:4px 0}.tt b{color:var(--ink)}.tt i{color:var(--acc);font-style:normal}
.evl{margin:4px 0 0;padding-left:22px;font-size:13px}.evl li{margin:2px 0}.evl li::marker{color:var(--acc);font-weight:700}.evl .hid{opacity:.25}.evl .num{color:var(--ink2);margin-right:4px}
/* heatmap */
.hm{max-width:760px}table.heat{table-layout:fixed}.heat th,.heat td{padding:3px 2px;text-align:center;font-size:12px;border-bottom:1px solid var(--bg)}.heat th:first-child{width:52px;text-align:left}
.heat td.hp{background:rgba(var(--hp),var(--a));color:var(--ink)}.heat td.hn{background:rgba(var(--hn),var(--a));color:var(--ink)}
/* ETF list */
ul.etf{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}ul.etf li{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,3fr) auto;gap:8px 20px;align-items:center;padding:12px 0;border-bottom:1px solid var(--rule)}
.em{display:flex;flex-wrap:wrap;gap:2px 14px;font-size:13px;color:var(--ink2)}.em b{color:var(--ink)}.ea{display:flex;gap:6px}
footer{padding:20px 32px 32px;color:var(--ink2);font-size:12px;border-top:1px solid var(--rule);margin-top:32px;max-width:1304px}
/* ---------- phones ---------- */
@media (max-width:760px){
 body{font-size:15px}.bar{padding:8px 16px 0}nav{padding:0 12px}nav a{padding:12px 8px 10px;min-height:44px}
 main{padding:16px}footer{padding:16px}h2{font-size:24px}
 input[type=text],input[type=search],select,textarea,.file input{font-size:16px;min-height:44px}
 button,.btn{min-height:44px;font-size:15px}button.ghost{min-height:44px}button.x{width:44px}.chips button{min-height:44px}
 .chk,.rad{min-height:44px}.cols{grid-template-columns:minmax(0,1fr);gap:8px}
 .wgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.fld{max-width:none}.ctl{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px}.ctl .fld{width:auto}.ctl .chk{grid-column:1/-1}
 .ar{grid-template-columns:minmax(0,1fr) 96px;gap:4px 12px}.ar .ab{grid-column:1/-1;grid-row:2}.ddr{grid-template-columns:minmax(0,1fr);gap:6px}
 ul.etf li{grid-template-columns:minmax(0,1fr)}.ea .btn,.ea button{flex:1}
 /* stacked tables: each row becomes a labelled block */
 table.stack,table.stack tbody,table.stack tr,table.stack td,table.stack th{display:block;width:auto!important}
 table.stack tr.hd{display:none!important}table.stack tr{border-bottom:1px solid var(--rule);padding:8px 0}table.stack tr:first-of-type+tr{border-top:1px solid var(--ink)}
 table.stack td,table.stack th{border:0;padding:3px 0;display:grid;grid-template-columns:minmax(0,40%) minmax(0,1fr);gap:8px;align-items:center;text-align:right}
 table.stack td::before,table.stack th::before{content:attr(data-label);text-align:left;font-size:12px;color:var(--ink2);text-transform:none;letter-spacing:0;font-weight:400}
 table.stack td.full{grid-template-columns:minmax(0,1fr);text-align:left}table.stack td.full::before{display:none}
 table.stack td:empty,table.stack td[data-label=""]:not(.full):not(.act){display:none}table.stack td.act{position:absolute;right:0;top:6px;display:block;padding:0}table.stack td.act::before{display:none}
 table.stack tr{position:relative}table.stack input,table.stack select{text-align:left}table.stack input.r{text-align:right}
 table.stack.hold td.full,table.stack.strat td.full,table.stack.pen td.full{padding-right:52px}
 table.stack.hold td .ok,table.stack.hold td .bad{grid-column:2;justify-self:end;margin:0}
 table.stack.strat tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}table.stack.strat td.full{grid-column:1/-1}table.stack.strat td.z{display:none}
 table.stack.pen tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}table.stack.pen td.full{grid-column:1/-1}table.stack.pen td{grid-template-columns:minmax(0,1fr) 80px}
 table.stack.reb tr.empty{display:none}table.stack.reb td.mv{font-weight:700;font-size:16px}table.stack.reb td:last-child{grid-template-columns:minmax(0,1fr);text-align:left}table.stack.reb td:last-child::before{display:none}
 table.stack.reb tr.tot{border-top:1px solid var(--ink);border-bottom:0}
 table.stack td .brk{text-align:left}table.stack.hold td:nth-child(2){grid-template-columns:minmax(0,40%) minmax(0,1fr)}
 .heat th,.heat td{font-size:11px;padding:4px 1px}.heat th:first-child{width:40px}
 .mt td,.mt th{padding:6px 6px}
}
#toast{position:fixed;left:16px;right:16px;bottom:16px;max-width:560px;margin:0 auto;background:var(--ink);color:var(--bg);padding:12px 16px;font-size:13px;z-index:20}