/* invest.css — the Invest tab (practice investing), Phase 1.
   Every rule is scoped under .inv, so nothing here can reach Log, Dashboard
   or Settings; removing the tab is deleting this file and invest.js.

   The tab keeps its own fixed palette for now: it does not follow the Teal or
   Custom theme. Stocks wear blue, crypto wears gold, and green/red keep their
   app-wide meaning of gain and loss. */
.inv{
  --bg:#0E1626; --bg2:#131F33; --card:#16233A; --line:#25344F;
  --ink:#E8EEF9; --ink2:#93A4BF; --ink3:#64748B;
  --in:#22C55E; --out:#F87171;
  --accent:#60A5FA; --on-accent:#08111F; --icon-tile:#1B2B45;
  --overlay:rgba(8,14,26,.86);
  color:var(--ink);
}
#view-invest{background:var(--bg);min-height:calc(100dvh - 72px);padding-bottom:8px}
body.inv-on{background:#0E1626}
.sheet.inv{background:var(--bg2)}
.sheet.inv .sheet-foot{background:var(--bg2)}

/* The app styles every input and label globally; the ticket's fields are
   borderless inputs inside a bordered box, so undo that here. */
.inv .fld input{width:auto;margin:0;padding:0;border:0;border-radius:0;background:none}
.inv .ticket label{font-size:11px}
.inv .fld.typebtn{display:flex}
.inv textarea.why-box{display:block;width:100%;resize:vertical;font:inherit;font-size:14px;
  line-height:1.45}
.inv textarea.why-box:focus{outline:none;border-color:var(--accent)}
.inv .inst button.pick{display:flex;align-items:center;gap:8px;background:none;border:0;
  padding:0;font:inherit;color:inherit;cursor:pointer}
.inv .eod-last b.up{color:var(--in)}
.inv .depth .last b.up{color:var(--in)}
.inv .depth .dr{cursor:pointer}
.inv .depth .dr:active{background:var(--bg2)}
.inv .notch i{cursor:pointer}
.inv .notch{cursor:pointer}
.inv .cap-head .amt{margin-left:auto}
.inv .sim{display:inline-block;margin-left:6px;font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;color:#E2A33C;
  border:1px solid rgba(226,163,60,.45);border-radius:999px;padding:1px 7px;vertical-align:1px}
.inv .err{color:var(--out);font-size:12px;margin:8px 0 0}

/* Open orders — new in Phase 1, not in the mockup. */
.inv .oo{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:center;
  padding:11px 0;border-top:1px solid var(--line);font-size:13px}
.inv .oo:first-of-type{border-top:0;padding-top:0}
.inv .oo b{font-variant-numeric:tabular-nums}
.inv .oo .side-buy{color:var(--in);font-weight:700}
.inv .oo .side-sell{color:var(--out);font-weight:700}
.inv .oo span{display:block;font-size:11.5px;color:var(--ink3)}
.inv .oo .btn{padding:7px 12px;font-size:12.5px}
.inv .hist{font-size:12px;color:var(--ink2);padding:8px 0;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:10px;font-variant-numeric:tabular-nums}
.inv .hist:first-of-type{border-top:0}

/* Instrument list in the picker sheet. */
.inv .ilist{display:flex;flex-direction:column}
.inv .irow{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;
  background:none;border:0;border-top:1px solid var(--line);padding:11px 0;font:inherit;
  color:var(--ink);text-align:left;cursor:pointer}
.inv .irow:first-child{border-top:0}
.inv .irow.is-on .nm b{color:var(--accent)}

/* The test controls only exist on the preview and on localhost. */
.inv .testcard{border-style:dashed;border-color:#E2A33C}
.inv .testcard h3{margin:0 0 4px;font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;
  color:#E2A33C}
.inv .testcard .row{margin-top:10px}
.inv .testcard .btn{padding:11px 8px;font-size:13.5px}
.inv.crypto{--accent:#E2A33C; --on-accent:#1A1206; --icon-tile:#2A2212}
.inv .pill.only{border-color:var(--accent);color:var(--accent);background:rgba(226,163,60,.12); font-weight:700}
.inv .balance-amount .unit{font-size:20px;font-weight:600;color:var(--ink3); letter-spacing:0;margin-left:4px}
.inv .php-line{font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums;margin-top:1px}
.inv .php-line span{color:var(--ink3);font-size:12.5px;font-weight:400}
.inv .fxbar{display:flex;align-items:center;gap:8px;margin-top:12px;padding:9px 11px; background:var(--bg2);border:1px solid var(--line);border-radius:10px; font-size:12px;font-variant-numeric:tabular-nums;color:var(--ink2)}
.inv .fxbar b{color:var(--ink);font-weight:700}
.inv .fxbar .sp{flex:1 1 auto}
.inv .from{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.inv .from .fr{display:grid;grid-template-columns:1fr auto;gap:3px 10px;font-size:12px; color:var(--ink2);align-items:center;margin-bottom:9px}
.inv .from .fr b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.inv .from .fr .bar-track{grid-column:1/-1;height:6px}
.inv .from .fr.coin .bar-fill{background:var(--accent)}
.inv .mode{display:flex;gap:2px;background:var(--bg2);border:1px solid var(--line); border-radius:999px;padding:2px;flex:0 0 auto}
.inv .mode button{background:none;border:0;border-radius:999px;padding:5px 12px;font:inherit; font-size:11.5px;font-weight:700;color:var(--ink3);cursor:pointer;white-space:nowrap}
.inv .mode button.is-on{background:var(--accent);color:var(--on-accent)}
.inv .mkt-strip{display:flex;gap:20px;padding:12px var(--pad) 2px}
.inv .mkt-strip button{background:none;border:0;padding:0 0 8px;font:inherit;font-size:17px; font-weight:600;color:var(--ink3);cursor:pointer;border-bottom:2px solid transparent}
.inv .mkt-strip button.is-on{color:var(--ink);border-bottom-color:var(--accent)}
.inv .banner{display:flex;gap:10px;align-items:flex-start;margin:4px var(--pad) 0; background:var(--bg2);border:1px solid var(--line);border-left:3px solid var(--accent); border-radius:10px;padding:10px 12px;font-size:12px;line-height:1.5;color:var(--ink2)}
.inv .banner b{color:var(--ink)}
.inv .banner .ic{flex:0 0 auto;font-size:14px;line-height:1.3}
.inv .banner.hot{border-left-color:var(--out);background:rgba(248,113,113,.08); border-color:rgba(248,113,113,.3)}
.inv .banner.inline{margin:14px 0 0}
.inv .banner.brk{border-left-color:#E2A33C}
.inv .inst{display:flex;align-items:center;gap:10px}
.inv .inst h2{margin:0;font-size:21px;letter-spacing:-.02em}
.inv .inst .tag{background:var(--bg2);border:1px solid var(--line);color:var(--ink2); font-size:11px;padding:3px 8px;border-radius:999px}
.inv .inst .caret{color:var(--ink3);font-size:12px}
.inv .inst .spacer{flex:1 1 auto}
.inv .trade{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.inv .trade>*{min-width:0}
.inv .trade.pse{grid-template-columns:1.18fr 1fr;gap:12px}
@media (max-width:359px){.inv .trade,.inv .trade.pse{grid-template-columns:1fr}
}.inv .ticket label{display:block;font-size:11px;text-transform:uppercase; letter-spacing:.06em;color:var(--ink3);margin:12px 0 5px}
.inv .ticket .fld{display:flex;align-items:center;gap:8px;background:var(--bg); border:1px solid var(--line);border-radius:12px;padding:11px 12px}
.inv .ticket .fld input{flex:1 1 auto;min-width:0;background:none;border:0;color:var(--ink); font:inherit;font-size:16px;font-variant-numeric:tabular-nums;outline:none}
.inv .ticket .fld .unit{flex:0 0 auto;color:var(--ink3);font-size:13px}
.inv .pf{padding:0;overflow:hidden}
.inv .pf-head,.inv .pf-row>summary{display:grid; grid-template-columns:34px minmax(0,1fr) auto auto 12px; gap:9px;align-items:center;padding:10px 13px}
.inv .pf-head{border-bottom:1px solid var(--line);font-size:9.5px;text-transform:uppercase; letter-spacing:.07em;color:var(--ink3)}
.inv .pf-head span:first-child{grid-column:1/3}
.inv .pf-head span:nth-child(2),.inv .pf-head span:nth-child(3){text-align:right}
.inv .pf-row{border-bottom:1px solid var(--line)}
.inv .pf-row:last-of-type{border-bottom:0}
.inv .pf-row>summary{cursor:pointer;list-style:none}
.inv .pf-row>summary::-webkit-details-marker{display:none}
.inv .pf-row>summary:active{background:var(--bg2)}
.inv .pf-row .cv{color:var(--ink3);font-size:10px;text-align:right}
.inv .pf-row[open] .cv{transform:rotate(90deg)}
.inv .av{width:34px;height:34px;border-radius:50%;display:flex;align-items:center; justify-content:center;font-size:14px;font-weight:800;letter-spacing:-.02em}
.inv .nm{min-width:0}
.inv .nm b{display:block;font-size:14.5px;font-weight:700;line-height:1.2}
.inv .nm span{display:block;font-size:11px;color:var(--ink3);white-space:nowrap; overflow:hidden;text-overflow:ellipsis}
.inv .ph,.inv .ch{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.inv .ph b,.inv .ch b{display:block;font-size:14.5px;font-weight:700;line-height:1.2}
.inv .ph span,.inv .ch span{display:block;font-size:11px;color:var(--ink3)}
.inv .ch.up b,.inv .ch.up span{color:var(--in)}
.inv .ch.down b,.inv .ch.down span{color:var(--out)}
.inv .pf-note{padding:2px 13px 14px 56px}
.inv .pf-note .q{margin:0 0 10px;font-size:12.5px;font-style:italic;color:var(--ink2); line-height:1.5;padding-left:10px;border-left:2px solid var(--accent)}
.inv .pf-meta{display:grid;grid-template-columns:1fr 1fr;gap:7px 10px;font-size:11.5px; color:var(--ink3);font-variant-numeric:tabular-nums}
.inv .pf-meta b{color:var(--ink);font-weight:600}
.inv .pf-note .mini{margin-top:11px}
.inv .pf-foot{padding:0 13px 14px}
.inv .cardfold{padding:0}
.inv .cardfold>summary{cursor:pointer;list-style:none;display:flex;align-items:center; gap:10px;padding:14px 16px}
.inv .cardfold>summary::-webkit-details-marker{display:none}
.inv .cardfold>summary .ct{flex:1 1 auto;min-width:0;font-size:12.5px;font-weight:600; text-transform:uppercase;letter-spacing:.08em;color:var(--ink2)}
.inv .cardfold>summary .cs{flex:0 0 auto;font-size:12px;color:var(--ink3); font-variant-numeric:tabular-nums;white-space:nowrap}
.inv .cardfold>summary .cv{flex:0 0 auto;color:var(--ink3);font-size:10px; display:inline-block}
.inv .cardfold[open]>summary .cv{transform:rotate(90deg)}
.inv .cardfold>summary:active .ct,.inv .cardfold>summary:active .cv{color:var(--accent)}
.inv .cardfold-body{padding:0 16px 16px}
.inv .feefold>summary{display:flex;align-items:baseline;gap:8px;cursor:pointer; list-style:none;margin-top:10px;font-size:12px;color:var(--ink2)}
.inv .feefold>summary::-webkit-details-marker{display:none}
.inv .feefold>summary .lbl{flex:1 1 auto;min-width:0}
.inv .feefold>summary b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums; flex:0 0 auto;white-space:nowrap}
.inv .feefold>summary .cv{flex:0 0 auto;color:var(--ink3);font-size:9px;display:inline-block}
.inv .feefold[open]>summary .cv{transform:rotate(90deg)}
.inv .feefold>summary:active .lbl,.inv .feefold>summary:active .cv{color:var(--accent)}
.inv .feebd{margin-top:8px;padding:9px 11px;background:var(--bg);border:1px solid var(--line); border-radius:10px;font-size:11.5px;font-variant-numeric:tabular-nums}
.inv .feebd .fr{display:flex;justify-content:space-between;gap:10px;padding:2px 0; color:var(--ink3)}
.inv .feebd .fr b{color:var(--ink2);font-weight:600;flex:0 0 auto;white-space:nowrap}
.inv .feebd .fn{margin:7px 0 0;padding-top:7px;border-top:1px solid var(--line); font-size:11px;line-height:1.45;color:var(--ink3)}
.inv .feebd .fn b{color:var(--out)}
.inv .avail.grand{margin-top:11px;padding-top:9px;border-top:1px solid var(--line); font-size:13px;color:var(--ink)}
.inv .avail.grand b{font-size:14px}
.inv .avail.be{margin-top:8px;color:var(--accent)}
.inv .avail.be b{color:var(--accent)}
.inv .be-sub{text-align:right;font-size:10.5px;color:var(--ink3);margin-top:2px; font-variant-numeric:tabular-nums;line-height:1.45}
.inv .equity{display:flex;align-items:center;gap:14px;margin-top:14px;padding-top:14px; border-top:1px solid var(--line)}
.inv .eq-l{flex:1 1 auto;min-width:0}
.inv .eq-r{flex:0 0 96px;width:96px;height:96px;position:relative}
.inv .donut{width:96px;height:96px;display:block;transform:rotate(-90deg)}
.inv .donut circle{fill:none;stroke-width:11}
.inv .dlab{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center; justify-content:center;font-size:10.5px;color:var(--ink3);line-height:1.15}
.inv .dlab b{font-size:20px;font-weight:700;color:var(--ink);line-height:1.1}
.inv .alloc{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.inv .alloc li{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink2)}
.inv .alloc i{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.inv .alloc b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.inv .alloc .amt{margin-left:auto;font-size:12px;color:var(--ink3); font-variant-numeric:tabular-nums}
.inv .bal2{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center; margin-top:14px;background:var(--bg2);border:1px solid var(--line); border-radius:12px;padding:9px 12px}
.inv .bal2 .fig{min-width:0}
.inv .bal2 b{display:block;font-size:22px;font-weight:700;letter-spacing:-.025em; font-variant-numeric:tabular-nums;line-height:1.08}
.inv .bal2 span{display:block;font-size:9.5px;color:var(--ink2);font-weight:700; margin-top:1px;line-height:1.2;text-transform:uppercase;letter-spacing:.05em; white-space:nowrap}
.inv .bal2 em{display:block;font-style:normal;font-size:10px;color:var(--ink3); margin-top:1px;line-height:1.2}
.inv .bal2 .why{font-size:11px;color:var(--ink2);line-height:1.45; padding-left:12px;border-left:1px solid var(--line)}
.inv .fld.stepin{padding:7px 6px 7px 10px;gap:5px}
.inv .fld.stepin input{font-size:15px;font-weight:700;min-width:0}
.inv .fld.stepin .step{display:flex;gap:4px;flex:0 0 auto}
.inv .fld.stepin .step .sb{width:26px;height:26px;border-radius:7px;background:var(--bg2); border:1px solid var(--line);color:var(--ink);font:inherit;font-size:14px; font-weight:700;cursor:pointer;line-height:1;padding:0}
.inv .fld.stepin .step .sb:active{border-color:var(--accent);color:var(--accent)}
.inv .recall{margin-top:14px;padding:12px 13px;background:var(--bg2); border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:12px}
.inv .recall .rh{display:block;font-size:10.5px;text-transform:uppercase; letter-spacing:.06em;color:var(--ink3);margin-bottom:6px}
.inv .recall q{display:block;font-size:14.5px;line-height:1.5;color:var(--ink); font-style:italic;quotes:none}
.inv .recall .rm{margin-top:9px;padding-top:9px;border-top:1px solid var(--line); font-size:11.5px;color:var(--ink2);font-variant-numeric:tabular-nums}
.inv .recall .rm b{color:var(--ink)}
.inv .eod{font-variant-numeric:tabular-nums;font-size:12px}
.inv .eod .hd{display:flex;justify-content:space-between;color:var(--ink3);font-size:10px; text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.inv .eod button{display:flex;width:100%;background:none;border:0;font:inherit;color:inherit; cursor:pointer;text-align:left;border-radius:6px}
.inv .eod button:active{background:var(--bg2)}
.inv .eod-last{flex-direction:column;padding:6px 5px 9px;border-bottom:1px solid var(--line)!important; border-radius:0!important;margin-bottom:4px}
.inv .eod-last b{font-size:20px;font-weight:700;color:var(--out);letter-spacing:-.02em}
.inv .eod-last em{font-style:normal;font-size:11px;color:var(--ink2)}
.inv .eod .eod-r{justify-content:space-between;align-items:baseline;padding:4px 5px;color:var(--ink2)}
.inv .eod-r b{color:var(--ink);font-weight:600}
.inv .eod-r.plain{display:flex}
.inv .eod-range{padding:6px 5px 8px}
.inv .eod-range .lh{display:flex;justify-content:space-between;font-size:10px;color:var(--ink3);margin-bottom:4px}
.inv .eod-range .bar{position:relative;height:5px;border-radius:3px;background:var(--line)}
.inv .eod-range .bar i{position:absolute;top:-4px;width:3px;height:13px;border-radius:2px;background:var(--ink)}
.inv .typebtn{width:100%;justify-content:space-between;cursor:pointer;text-align:left; font:inherit;font-size:14px;color:var(--ink)}
.inv .typebtn .caret{color:var(--ink3);font-size:11px}
.inv .ptype{display:grid;grid-template-columns:32px 1fr 22px;gap:12px;align-items:center; width:100%;background:none;border:0;border-top:1px solid var(--line); padding:15px 0;text-align:left;font:inherit;color:var(--ink);cursor:pointer}
.inv .ptype:first-of-type{border-top:0}
.inv .ptype:active{opacity:.7}
.inv .ptype b{display:block;font-size:16px;font-weight:600;line-height:1.25}
.inv .ptype .ptxt span{display:block;font-size:12.5px;color:var(--ink3);line-height:1.45; margin-top:2px}
.inv .ptype .pico{color:var(--ink2);display:flex}
.inv .ptype .pico svg{width:30px;height:20px;fill:none;stroke:currentColor; stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.inv .ptype .ptick{width:22px;height:22px;border-radius:50%;display:flex; align-items:center;justify-content:center;font-size:12px;font-weight:700; background:var(--ink);color:var(--bg);visibility:hidden}
.inv .ptype.is-on .ptick{visibility:visible}
.inv .mkt-note{background:var(--bg);border:1px solid var(--line); border-left:3px solid var(--accent);border-radius:12px;padding:11px 12px; font-size:12px;line-height:1.55;color:var(--ink2)}
.inv .mkt-note b{color:var(--ink)}
.inv .mkt-note .px{display:block;font-size:18px;font-weight:700;color:var(--ink); font-variant-numeric:tabular-nums;margin-bottom:4px;letter-spacing:-.01em}
.inv .mkt-note.bare{padding:10px 12px}
.inv .mkt-note.bare .px{margin-bottom:0}
.inv .notch{display:flex;align-items:center;margin:12px 2px 2px}
.inv .notch .rail{flex:1 1 auto;height:2px;background:var(--line)}
.inv .notch .rail.done{background:var(--accent)}
.inv .notch i{flex:0 0 auto;width:11px;height:11px;border-radius:50%;background:var(--bg); border:2px solid var(--line)}
.inv .notch i.on{border-color:var(--accent);background:var(--accent)}
.inv .notch-lbl{display:flex;justify-content:space-between;font-size:10px;color:var(--ink3); margin-top:6px;font-variant-numeric:tabular-nums}
.inv .avail{display:flex;justify-content:space-between;gap:10px;font-size:12px; color:var(--ink2);margin-top:10px}
.inv .avail span{min-width:0}
.inv .avail b{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:600; flex:0 0 auto;white-space:nowrap}
.inv .btn.buy{background:var(--in);border-color:var(--in);color:#06210F;margin-top:14px}
.inv .btn.sell{background:var(--out);border-color:var(--out);color:#2A0A0A;margin-top:14px}
.inv .depth{font-variant-numeric:tabular-nums;font-size:11.5px}
.inv .depth .hd{display:flex;justify-content:space-between;color:var(--ink3);font-size:10px; text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.inv .depth .dr{display:flex;justify-content:space-between;gap:8px;padding:3px 5px; position:relative;border-radius:4px;overflow:hidden}
.inv .depth .dr span{position:relative;z-index:1}
.inv .depth .dr i{position:absolute;top:0;bottom:0;right:0;z-index:0;opacity:.22}
.inv .depth .ask span:first-child{color:var(--out)}
.inv .depth .ask i{background:var(--out)}
.inv .depth .bid span:first-child{color:var(--in)}
.inv .depth .bid i{background:var(--in)}
.inv .depth .last{padding:9px 5px;border-top:1px solid var(--line); border-bottom:1px solid var(--line);margin:6px 0}
.inv .depth .last b{display:block;font-size:19px;font-weight:700;color:var(--out); letter-spacing:-.02em}
.inv .depth .last em{font-style:normal;font-size:11px;color:var(--ink2)}
.inv .pressure{display:flex;height:22px;border-radius:6px;overflow:hidden;margin-top:10px; font-size:10px;font-weight:700;white-space:nowrap}
.inv .pressure .b{background:rgba(34,197,94,.22);color:var(--in);flex:0 0 60%; display:flex;align-items:center;padding-left:6px}
.inv .pressure .s{background:rgba(248,113,113,.22);color:var(--out);flex:1 1 auto; display:flex;align-items:center;justify-content:flex-end;padding-right:6px}
.inv .costs{margin-top:14px;padding-top:12px;border-top:1px solid var(--line); font-size:12px;font-variant-numeric:tabular-nums}
.inv .costs .cr{display:flex;justify-content:space-between;gap:10px;padding:3px 0;color:var(--ink2)}
.inv .costs .cr b{color:var(--ink);font-weight:600}
.inv .costs .cr.tot{margin-top:6px;padding-top:8px;border-top:1px solid var(--line);color:var(--ink)}
.inv .costs .cr.be{color:var(--accent)}
.inv .costs .cr.be b{color:var(--accent)}
.inv .costs .cr.gain,.inv .costs .cr.gain b{color:var(--in)}
.inv .costs .cr.loss,.inv .costs .cr.loss b{color:var(--out)}
.inv .up{color:var(--in)}
.inv .down{color:var(--out)}
.inv .card .pct.up{color:var(--in)}
.inv .card .pct.down{color:var(--out)}
.inv .les{display:flex;align-items:center;gap:11px;padding:11px 0;border-top:1px solid var(--line)}
.inv .les:first-of-type{border-top:0;padding-top:2px}
.inv .les .n{flex:0 0 26px;height:26px;border-radius:50%;background:var(--bg2); border:1px solid var(--line);color:var(--ink3);font-size:12px;font-weight:700; display:flex;align-items:center;justify-content:center}
.inv .les.done .n{background:var(--in);border-color:var(--in);color:#06210F}
.inv .les.now .n{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.inv .les .t{flex:1 1 auto;min-width:0;font-size:13.5px}
.inv .les .t span{display:block;font-size:11px;color:var(--ink3)}
.inv .les.locked .t{color:var(--ink3)}
.inv .les .st{flex:0 0 auto;font-size:11px;color:var(--ink3)}
.inv .les.now .st{color:var(--accent)}
.inv .grade{display:flex;align-items:center;gap:14px}
.inv .grade .g{flex:0 0 56px;height:56px;border-radius:14px;background:rgba(96,165,250,.14); border:1px solid var(--accent);color:var(--accent);font-size:26px;font-weight:800; display:flex;align-items:center;justify-content:center}
.inv.crypto .grade .g{background:rgba(226,163,60,.14)}
.inv .grade .gt{flex:1 1 auto;min-width:0;font-size:12.5px;color:var(--ink2);line-height:1.5}
.inv .grade .gw{display:block;font-size:16px;font-weight:700;color:var(--ink);line-height:1.2}
.inv .grade .gc{display:block;font-size:11.5px;font-weight:600;margin-top:2px; font-variant-numeric:tabular-nums}
.inv .grade .gc.ok{color:var(--in)}
.inv .grade .gc.bad{color:var(--out)}
.inv .grade .gt p{margin:8px 0 0}
.inv .marks{margin-top:14px;padding-top:12px;border-top:1px solid var(--line); display:flex;flex-direction:column;gap:9px}
.inv .mark{display:grid;grid-template-columns:1fr auto;gap:4px 10px;font-size:12px; color:var(--ink2);align-items:center}
.inv .mark b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.inv .mark .bar-track{grid-column:1/-1;height:5px}
.inv .mark.ok b,.inv .mark.ok .bar-fill{color:var(--in);background:var(--in)}
.inv .mark.bad b,.inv .mark.bad .bar-fill{color:var(--out);background:var(--out)}
.inv .mark.ok b,.inv .mark.bad b{background:none}
.inv .order-line{font-size:15px;line-height:1.55;margin:0 0 4px}
.inv .order-line b{font-variant-numeric:tabular-nums}
.inv .why-box{background:var(--bg);border:1px solid var(--accent);border-radius:12px; padding:11px 12px;margin-top:6px;font-size:14px;color:var(--ink);min-height:62px}
.inv .req{font-size:10px;color:var(--accent);text-transform:uppercase;letter-spacing:.06em; margin-left:6px;font-weight:700}
.inv .sheet-lbl{display:flex;align-items:baseline;font-size:11px;text-transform:uppercase; letter-spacing:.06em;color:var(--ink3);margin:14px 0 0}
.inv .dd{margin-top:14px;background:rgba(248,113,113,.09);border:1px solid rgba(248,113,113,.3); border-radius:12px;padding:11px 12px;font-size:12px;line-height:1.55;color:var(--ink2)}
.inv .dd b{color:var(--out)}
.inv .dd .hd{display:block;color:var(--ink);font-weight:700;font-size:12.5px;margin-bottom:3px}
.inv .dd.ok{background:var(--bg2);border-color:var(--line)}
.inv .dd.ok .hd{color:var(--accent)}
.inv .dd.ok b{color:var(--accent)}
.inv .dd+.dd{margin-top:10px}
.inv .cap-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 10px;margin-top:16px}
.inv .cap-head .lb{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink3);white-space:nowrap}
.inv .cap-head .amt{font-size:13.5px;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap}
.inv .cap-of{font-size:11px;color:var(--ink3);font-variant-numeric:tabular-nums;text-align:right;margin-top:3px}

/* The coin title doubles as a search box: tap the name to type a ticker or a
   coin's name, tap the caret to browse the full list. */
.inv .isearch{position:relative;display:flex;align-items:center;gap:4px;min-width:0}
.inv .caretbtn{background:none;border:0;color:var(--ink3);font:inherit;font-size:13px;padding:6px 8px;cursor:pointer;border-radius:8px}
.inv .caretbtn:active{background:var(--bg2);color:var(--accent)}
.inv .inst .pick h2{border-bottom:1px dashed var(--line)}
.inv .symedit{display:flex;align-items:baseline;gap:6px;background:var(--bg);border:1px solid var(--accent);
  border-radius:10px;padding:3px 10px}
.inv .symedit .symin{width:7.5em;margin:0;padding:0;border:0;border-radius:0;background:none;color:var(--ink);
  font:inherit;font-size:19px;font-weight:700;letter-spacing:-.02em;text-transform:uppercase}
.inv .symedit .symin::placeholder{color:var(--ink3);font-weight:600}
.inv .symedit .symin:focus{outline:none}
.inv .symq{color:var(--ink3);font-size:14px;font-weight:600;white-space:nowrap}
.inv .isugg{position:absolute;top:calc(100% + 6px);left:0;z-index:5;width:min(300px,78vw);
  background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:2px 10px;
  box-shadow:0 10px 28px rgba(0,0,0,.45)}
.inv .isugg .irow{padding:8px 0;width:100%}
.inv .isugg .irow .av{width:28px;height:28px;font-size:12px}
.inv .isugg .irow{grid-template-columns:28px minmax(0,1fr) auto}