:root{
  /* Trade Scouter brand: cyan-blue -> green on dark navy (matches the logo) */
  --bg:#0a0f1a;--bg2:#0d1420;--panel:#121a2a;--panel2:#182739;--panel3:#1d2e44;
  --border:#22344e;--border2:#2c4262;
  --text:#e8eef8;--dim:#8296b4;--dim2:#8296b4;
  --accent:#2bb0ec;--accent2:#3bc46b;--brand2:#3bc46b;--green:#22c55e;
  --red:#f04a4a;--amber:#f5a623;--radius:12px;--radius-sm:8px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 6px 20px -4px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.3);
  --shadow-lg:0 20px 50px -12px rgba(0,0,0,.55);
  --ease:cubic-bezier(.2,.7,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
::selection{background:rgba(43,176,236,.35);color:#fff}
html{scrollbar-color:var(--border2) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:20px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--dim2)}
body{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' opacity='0.05'%3E%3Cdefs%3E%3ClinearGradient id='wmG' x1='0' y1='1' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%2328a9e0'/%3E%3Cstop offset='1' stop-color='%233bc46b'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='24' cy='24' r='21' fill='none' stroke='%232a86c8' stroke-width='1.4'/%3E%3Ccircle cx='18' cy='17' r='4.3' fill='%2329a3e0'/%3E%3Cpath d='M10.5 31.5c0-5 3.4-8.5 7.5-8.5s7.5 3.5 7.5 8.5z' fill='%2329a3e0'/%3E%3Cpath d='M31 31c-4.4 0-8-3.6-8-8 5 0 9 3.6 9 8z' fill='%233bc46b'/%3E%3Cpath d='M17 33 L32.5 15.5' stroke='url(%23wmG)' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M32.5 15.5 l-6.2 1.3 l4.6 4.2 z' fill='%23e6f6ff'/%3E%3C/svg%3E") no-repeat center/min(640px,68vmin) fixed,
    radial-gradient(1100px 480px at 12% -10%,rgba(43,176,236,.10),transparent 60%),
    radial-gradient(900px 420px at 100% 0%,rgba(59,196,107,.07),transparent 55%),
    var(--bg);
  color:var(--text);font:14px/1.55 -apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  padding-bottom:60px;overflow-x:hidden;max-width:100vw;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-variant-numeric:tabular-nums;
}
a{color:inherit}
header{display:flex;align-items:center;gap:16px;padding:13px 22px;border-bottom:1px solid var(--border);
  background:rgba(18,26,42,.82);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  position:sticky;top:0;z-index:20;flex-wrap:wrap;box-shadow:0 1px 0 rgba(255,255,255,.02),0 8px 24px -12px rgba(0,0,0,.6)}
header h1{font-size:18px;letter-spacing:.2px;font-weight:800}
header h1 span{background:linear-gradient(90deg,var(--accent),var(--brand2));-webkit-background-clip:text;background-clip:text;color:transparent}
nav{display:flex;gap:2px;flex-wrap:wrap;background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:11px;padding:3px}
nav button{background:none;border:1px solid transparent;color:var(--dim);padding:7px 14px;border-radius:8px;cursor:pointer;
  font-size:13.5px;font-weight:600;transition:color .15s var(--ease),background .15s var(--ease),box-shadow .15s var(--ease),transform .1s var(--ease)}
nav button:active{transform:scale(.96)}
nav button.active{background:linear-gradient(180deg,var(--panel3),var(--panel2));color:var(--text);box-shadow:inset 0 0 0 1px var(--border2),var(--shadow-sm)}
nav button:hover{color:var(--text);background:rgba(255,255,255,.04)}
main{max-width:1180px;margin:0 auto;padding:22px}
.banner{background:linear-gradient(180deg,rgba(245,166,35,.08),rgba(245,166,35,.03));border:1px solid var(--border);
  border-left:3px solid var(--amber);border-radius:var(--radius);padding:12px 16px;margin-bottom:18px;color:var(--dim);font-size:12.5px}
.banner b{color:var(--text)}
.grid{display:grid;gap:14px}
.g4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(360px,1fr))}
.card{background:linear-gradient(180deg,var(--panel),var(--bg2) 220%);border:1px solid var(--border);border-radius:var(--radius);
  padding:17px;box-shadow:var(--shadow-sm);transition:border-color .18s var(--ease),box-shadow .18s var(--ease),transform .18s var(--ease);
  animation:cardIn .35s var(--ease)}
@keyframes cardIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.card:hover{border-color:var(--border2);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.card[onclick]{cursor:pointer}
.card[onclick]:active{transform:translateY(0) scale(.99)}
.card h2{font-size:12.5px;text-transform:uppercase;letter-spacing:1.1px;color:var(--dim);margin-bottom:13px;font-weight:700}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:6px 12px;margin:22px 0 10px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.sec-head h2{font-size:15px;margin:0;color:var(--text);letter-spacing:.2px;text-transform:none;font-weight:700}
.sec-head .dim{font-size:12px}
.ngx-hero{background:radial-gradient(120% 140% at 0% 0%,rgba(14,132,184,.10),transparent 60%),linear-gradient(180deg,var(--panel),var(--bg2) 220%);padding:20px 22px}
.ngx-hero-title{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:4px 12px;margin-bottom:12px}
.ngx-hero-title h2{font-size:17px;margin:0;color:var(--text);letter-spacing:.2px;text-transform:none;font-weight:700}
.ngx-search{display:flex;gap:10px;flex-wrap:wrap}
.ngx-search input{flex:1 1 280px;min-width:0;font-size:15px;padding:11px 14px}
.ngx-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px;font-size:12.5px}
.ngx-chip{border:1px solid var(--border);background:var(--panel2);color:var(--text);border-radius:999px;padding:4px 12px;cursor:pointer;font-weight:600;font-size:12.5px}
.ngx-chip:hover{border-color:var(--accent)}
.ngx-movers{display:grid;gap:14px;grid-template-columns:repeat(3,minmax(0,1fr))}
.ngx-movers .card{min-width:0}
@media (max-width:900px){.ngx-movers{grid-template-columns:1fr}}
.ngx-row{display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 4px;border-bottom:1px solid var(--border);cursor:pointer;border-radius:8px}
.ngx-row:last-child{border-bottom:0}
.ngx-row:hover{background:var(--panel2)}
.ngx-rank{font-size:12px;color:var(--dim);text-align:center;font-variant-numeric:tabular-nums}
.ngx-name{min-width:0}
.ngx-sym{font-weight:700}
.ngx-sub{font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ngx-figs{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ngx-price{font-weight:700}
.ngx-chg{display:inline-block;font-size:12px;font-weight:700;padding:2px 8px;border-radius:999px;margin-top:2px}
.ngx-chg.up{background:rgba(34,197,94,.14);color:var(--green)}
.ngx-chg.down{background:rgba(240,74,74,.14);color:var(--red)}
.big{font-size:23px;font-weight:800;letter-spacing:-.2px}
.up{color:var(--green)}.down{color:var(--red)}.dim{color:var(--dim)}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{color:var(--dim2);text-align:left;font-weight:700;padding:8px;border-bottom:1px solid var(--border);font-size:11px;text-transform:uppercase;letter-spacing:.6px}
td{padding:10px 8px;border-bottom:1px solid rgba(255,255,255,.04)}
tr:last-child td{border-bottom:none}
tr:hover td{background:rgba(255,255,255,.025)}
.sym{font-weight:700;cursor:pointer;color:var(--accent);transition:color .15s var(--ease)}
.sym:hover{color:#6cd0ff;text-decoration:underline;text-underline-offset:3px}
.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11.5px;font-weight:700;letter-spacing:.2px}
.bA{background:rgba(34,197,94,.14);color:#4ade80;box-shadow:inset 0 0 0 1px rgba(34,197,94,.25)}
.bB{background:rgba(43,176,236,.14);color:#5cc4f5;box-shadow:inset 0 0 0 1px rgba(43,176,236,.25)}
.bC{background:rgba(245,166,35,.14);color:#f7bb52;box-shadow:inset 0 0 0 1px rgba(245,166,35,.25)}
.bD{background:rgba(240,74,74,.14);color:#f87979;box-shadow:inset 0 0 0 1px rgba(240,74,74,.25)}
button{font-family:inherit}
button.btn{background:linear-gradient(180deg,#33b8f2,var(--accent) 70%);color:#04121c;border:none;padding:9px 18px;border-radius:9px;
  cursor:pointer;font-size:13.5px;font-weight:700;box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 4px 14px -4px rgba(43,176,236,.55);
  transition:filter .15s var(--ease),transform .1s var(--ease),box-shadow .15s var(--ease)}
button.btn:hover{filter:brightness(1.08);box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 6px 18px -4px rgba(43,176,236,.7)}
button.btn:active{transform:translateY(1px) scale(.99)}
button.btn.ghost{background:var(--panel2);color:var(--text);border:1px solid var(--border);box-shadow:none;font-weight:600}
button.btn.ghost:hover{background:var(--panel3);border-color:var(--border2);filter:none}
button.btn.danger{background:linear-gradient(180deg,#e15252,#c53030 70%);color:#fff;box-shadow:0 4px 14px -4px rgba(197,48,48,.55)}
button.btn.green{background:linear-gradient(180deg,#34d17a,#15803d 70%);color:#04140a;box-shadow:0 4px 14px -4px rgba(21,128,61,.5)}
button.btn:disabled{opacity:.4;cursor:default;filter:none;box-shadow:none;transform:none}
input,select{background:var(--panel2);border:1px solid var(--border);color:var(--text);padding:9px 12px;border-radius:9px;
  font-size:14px;width:100%;transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
input:hover,select:hover{border-color:var(--border2)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(43,176,236,.18)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
label{display:block;color:var(--dim);font-size:11.5px;margin:12px 0 5px;text-transform:uppercase;letter-spacing:.6px;font-weight:700}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.checkline{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.04);font-size:13px;align-items:baseline}
.checkline .mark{width:22px;flex:none;font-weight:700}
.flag{background:rgba(240,74,74,.1);border:1px solid rgba(240,74,74,.3);color:#fca5a5;border-radius:9px;padding:9px 12px;margin-top:8px;font-size:13px}
.planbox{background:var(--panel2);border:1px solid var(--border);border-radius:var(--radius);padding:15px;margin-top:12px}
.planbox li{margin-left:18px;color:var(--dim);font-size:13px}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:rgba(24,39,57,.92);backdrop-filter:blur(10px);
  border:1px solid var(--border2);padding:12px 22px;border-radius:12px;z-index:99;max-width:90%;box-shadow:var(--shadow-lg);
  animation:toastIn .25s var(--ease)}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
.modal-overlay{position:fixed;inset:0;background:rgba(4,10,18,.6);backdrop-filter:blur(2px);z-index:200;
  display:flex;align-items:center;justify-content:center;padding:20px;animation:toastIn .15s var(--ease)}
.modal-box{background:var(--panel2);border:1px solid var(--border2);border-radius:var(--radius);padding:20px;
  max-width:460px;width:100%;box-shadow:var(--shadow-lg)}
.modal-box .modal-msg{white-space:pre-line;font-size:14px;line-height:1.5}
.spin{display:inline-block;width:14px;height:14px;border:2px solid var(--dim);border-top-color:var(--accent);border-radius:50%;animation:sp .7s linear infinite;vertical-align:-2px}
@keyframes sp{to{transform:rotate(360deg)}}
@keyframes flashUp{0%{background:rgba(34,197,94,.4);box-shadow:0 0 0 3px rgba(34,197,94,.15)}100%{background:transparent;box-shadow:none}}
@keyframes flashDown{0%{background:rgba(240,74,74,.4);box-shadow:0 0 0 3px rgba(240,74,74,.15)}100%{background:transparent;box-shadow:none}}
.tick-up{animation:flashUp .7s var(--ease);border-radius:5px}
.tick-down{animation:flashDown .7s var(--ease);border-radius:5px}
.switch{display:flex;align-items:center;gap:10px;padding:10px 0}
.mt{margin-top:14px}.mb{margin-bottom:14px}
/* responsive: adapt to phones and any screen size */
*{box-sizing:border-box}
img,svg,table{max-width:100%}
.card{overflow-x:auto}
/* tables must NOT shrink to fit narrow screens — that silently truncates
   real numbers (a $334.08 becomes "$3"). Let them keep natural width and
   scroll horizontally inside their own wrapper/card instead. */
table{min-width:max-content}
#navToggle{display:none}
@media (max-width:900px){
  main{padding:12px 12px 60px}
  header{padding:10px 12px;gap:8px}
  header h1{font-size:16px}
  #navToggle{display:inline-flex;align-items:center;justify-content:center;
    width:38px;height:38px;padding:0;font-size:18px;flex:none}
  nav{display:none;order:5;width:100%;flex-direction:column;flex-wrap:nowrap;
    background:var(--panel2);border:1px solid var(--border);border-radius:12px;
    padding:6px;margin-top:4px;box-shadow:var(--shadow-lg)}
  nav.open{display:flex;animation:cardIn .2s var(--ease)}
  nav button{width:100%;text-align:left;padding:12px 14px;border-radius:8px}
  header>div[style*="margin-left:auto"]{order:2;margin-left:0 !important;width:100%;flex-wrap:wrap;gap:8px 6px}
  .hdr-acct{flex:1 1 auto;max-width:none;min-width:140px}
  .grid.g2,.grid.g4{grid-template-columns:1fr !important}
  .statgrid{grid-template-columns:repeat(2,1fr) !important}
  .big{font-size:19px}
  input,select,textarea{font-size:16px}  /* prevents iOS zoom-on-focus */
  table{font-size:12.5px}
  th,td{padding:7px 5px}
  .btn{padding:9px 14px}
  h1,h2{overflow-wrap:anywhere}
}
@media (max-width:420px){
  .hdr-acct{min-width:0;flex-basis:100%}
  .statgrid{grid-template-columns:1fr !important}
}
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.stat{background:linear-gradient(180deg,var(--panel3),var(--panel2));border:1px solid var(--border);border-radius:var(--radius-sm);padding:11px 13px;transition:border-color .15s var(--ease)}
.stat:hover{border-color:var(--border2)}
.stat .v{font-size:19px;font-weight:800;letter-spacing:-.2px}.stat .k{font-size:10.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.6px;margin-top:2px;font-weight:600}
/* Dashboard hero KPI row -- bigger, bolder numbers than the plain .stat tiles used elsewhere, so the
   4 things that matter most (portfolio value, P/L, win rate, open count) read at a glance from across
   the room, the way a real trading-journal dashboard's headline numbers should. */
.hero-tile{padding:16px 18px;position:relative;overflow:hidden}
.hero-tile .k{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.6px;font-weight:700;margin-bottom:6px}
.hero-tile .v{font-size:27px;font-weight:800;letter-spacing:-.4px;line-height:1.1;font-variant-numeric:tabular-nums}
.hero-tile .v2{font-size:12px;font-weight:600;margin-top:4px;color:var(--dim)}
/* Visual open-position cards -- replaces a dense text table with scannable cards, each carrying a real
   stop->target progress gauge (svgPositionGauge) instead of just two more numbers to parse. */
.pos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.pos-card{padding:13px 14px;cursor:pointer}
.pos-card:hover{border-color:var(--border2);transform:none;box-shadow:var(--shadow-sm)}
.pos-card{transition:border-color .15s var(--ease)}
.pill{font-size:11px;padding:3px 10px;border-radius:20px;background:var(--panel2);border:1px solid var(--border);color:var(--dim);font-weight:600;letter-spacing:.2px}
.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor;vertical-align:1px}
.live-dot.live{animation:livePulse 1.8s ease-in-out infinite}
@keyframes livePulse{0%,100%{opacity:1;box-shadow:0 0 0 0 currentColor}50%{opacity:.55;box-shadow:0 0 0 4px transparent}}
.src{font-size:11px;color:var(--dim2);margin-top:6px}
/* Numbered steps inside the Options "Build your own trade" builder -- a
   divider + label per step so five stacked control rows read as a
   sequence instead of one undifferentiated wall of buttons. */
.opt-step{padding:12px 0;border-bottom:1px solid var(--border)}
.opt-step:first-of-type{padding-top:14px}
.opt-steplabel{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--dim2);margin-bottom:8px}
/* Strategy group switcher: one glowing pill segmented-control instead of
   plain ghost buttons -- the active segment lifts on an accent glow so
   "which group am I in" reads at a glance instead of by border/opacity. */
.opt-grouptabs{display:inline-flex;background:var(--panel2);border:1px solid var(--border);
  border-radius:999px;padding:3px;gap:2px}
.opt-grouptab{border:none;background:transparent;color:var(--dim);font:inherit;font-size:13px;
  font-weight:600;padding:7px 18px;border-radius:999px;cursor:pointer;
  transition:background .18s var(--ease),color .18s var(--ease),box-shadow .18s var(--ease)}
.opt-grouptab:hover:not(.active){color:var(--text)}
.opt-grouptab.active{background:var(--accent);color:#04141f;box-shadow:0 0 20px -3px var(--accent)}
/* Strategy cards: a clean tiled grid replaces the old wrapped buttons
   that crammed a full label + complexity badge + checkmark into one
   pill. Complexity is now a single color-coded dot (title tooltip carries
   the word) and "fits your outlook" is a small corner mark, so each card
   reads as one glanceable object instead of a run-on sentence. */
.opt-stratgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px}
.opt-stratcard{position:relative;text-align:left;padding:12px 34px 11px 14px;border-radius:12px;
  background:var(--panel2);border:1px solid var(--border);cursor:pointer;font:inherit;
  color:var(--text);font-size:13px;font-weight:600;line-height:1.35;
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease),transform .12s var(--ease),background .15s var(--ease)}
.opt-stratcard:hover{border-color:var(--border2);transform:translateY(-1px)}
.opt-stratcard.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 0 24px -6px var(--accent);
  background:linear-gradient(165deg,rgba(43,176,236,.14),var(--panel2) 65%)}
.opt-stratcard .dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:7px;vertical-align:1px}
.opt-stratcard .match{position:absolute;top:9px;right:10px;color:var(--green);font-size:12px;font-weight:800}
/* Suggested-trade "research inputs" -- compact, editable, single block
   instead of four label/value pairs each falling onto their own line. */
.opt-research{background:var(--panel2);border-radius:8px;padding:8px 10px 9px}
.opt-research-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:5px}
.opt-research-field{display:flex;flex-direction:column;gap:3px;min-width:0}
.opt-research-field>span{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--dim2)}
.opt-research-field select{font:inherit;font-size:12.5px;font-weight:600;color:var(--text);
  background:var(--panel3);border:1px solid var(--border);border-radius:6px;padding:4px 7px;
  cursor:pointer;max-width:220px}
.opt-research-field select:hover{border-color:var(--border2)}
.opt-research-field .ro{font-size:12.5px;font-weight:600;padding:4px 0}
.opt-research-edit{background:none;border:none;color:var(--accent);font:inherit;font-size:11px;
  font-weight:700;cursor:pointer;padding:0;margin-left:6px}
.opt-research-edit:hover{text-decoration:underline}
.sugRow:hover{background:rgba(43,176,236,.08)}
.sugRow:last-child{border-bottom:none !important}
.newsRow:hover div:first-child{color:var(--accent)}
.newsRow:last-child{border-bottom:none !important}
.ticker-wrap{overflow:hidden;white-space:nowrap;border:1px solid var(--border);border-radius:var(--radius-sm);
  background:linear-gradient(180deg,var(--panel3),var(--panel2));padding:10px 0;margin-bottom:16px;position:relative;box-shadow:var(--shadow-sm)}
.ticker-wrap::before,.ticker-wrap::after{content:"";position:absolute;top:0;bottom:0;width:44px;z-index:2;pointer-events:none}
.ticker-wrap::before{left:0;background:linear-gradient(90deg,var(--panel2),transparent)}
.ticker-wrap::after{right:0;background:linear-gradient(270deg,var(--panel2),transparent)}
.ticker-track{display:inline-flex;will-change:transform;animation:tickerScroll linear infinite}
.ticker-wrap:hover .ticker-track{animation-play-state:paused}
.ticker-item{display:inline-flex;align-items:center;gap:8px;padding:0 24px;white-space:nowrap;color:var(--text);
  text-decoration:none;font-size:12.5px;font-weight:500;border-right:1px solid var(--border);transition:color .15s var(--ease)}
.ticker-item .tag{font-weight:800;color:var(--accent);letter-spacing:.2px}
.ticker-item:hover{color:var(--accent2)}
@keyframes tickerScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
#view{transition:opacity .16s var(--ease),transform .16s var(--ease)}
#view.fading{opacity:0;transform:translateY(6px)}
/* header: minimal by design everywhere — account select, one mode pill,
   two icon buttons, hamburger. Nothing here needs its own breakpoint-
   specific rework because there's little enough of it to just... fit. */
.hdr-right{gap:8px}
.hdr-acct{cursor:pointer;font-weight:600;max-width:170px;flex:none}
/* Beginner view: a separate axis from Practice/Live (money) — this one is
   display complexity. .adv-only marks the denser/jargon-heavy bits that a
   brand-new user doesn't need on day one; hidden only while body.beginner
   is set, never removed, so nothing here changes for anyone who doesn't
   opt in via the header pill. */
body.beginner .adv-only{display:none !important}
body.beginner .beg-only{display:block !important}
.hdr-mode{cursor:pointer;font-weight:600;flex:none;white-space:nowrap}
/* Daily streak badge -- tiers reflect a REAL consecutive-day count from
   store.touch_streak(), never a made-up number. Color/glow intensity
   scales with the streak itself so the badge visibly grows more special
   the longer it runs, without needing a tooltip to read at a glance. */
.streak-pill{cursor:default;flex:none;white-space:nowrap;font-weight:700;
  display:inline-flex;align-items:center;gap:4px;transition:transform .15s var(--ease)}
.streak-t1{background:var(--panel2);color:var(--dim)}
.streak-t2{background:rgba(245,166,35,.16);color:#f7bb52;box-shadow:inset 0 0 0 1px rgba(245,166,35,.3)}
.streak-t3{background:rgba(240,110,50,.18);color:#ff9a5c;box-shadow:inset 0 0 0 1px rgba(240,110,50,.35),0 0 10px rgba(240,110,50,.25)}
.streak-t4{background:linear-gradient(135deg,rgba(255,196,64,.22),rgba(255,110,50,.22));color:#ffce6b;
  box-shadow:inset 0 0 0 1px rgba(255,196,64,.4),0 0 14px rgba(255,170,60,.35);
  animation:streakGlow 2.4s ease-in-out infinite}
@keyframes streakGlow{0%,100%{box-shadow:inset 0 0 0 1px rgba(255,196,64,.4),0 0 8px rgba(255,170,60,.25)}
  50%{box-shadow:inset 0 0 0 1px rgba(255,196,64,.6),0 0 18px rgba(255,170,60,.5)}}
.streak-bump{animation:streakBump .55s var(--ease)}
@keyframes streakBump{0%{transform:scale(1)}35%{transform:scale(1.28) rotate(-4deg)}
  60%{transform:scale(.96) rotate(3deg)}100%{transform:scale(1) rotate(0)}}
/* First-time guided tour -- a CSS spotlight (a border-radius box whose huge box-shadow darkens
   everything else on the page) over one real nav button or header control per step, never a fake
   screenshot of the UI. pointer-events:none on the spot so it never blocks the real element underneath. */
.tour-spot{position:fixed;border-radius:10px;box-shadow:0 0 0 9999px rgba(4,8,16,.74);
  border:2px solid var(--accent);z-index:9998;pointer-events:none;transition:top .25s var(--ease),left .25s var(--ease),width .25s var(--ease),height .25s var(--ease)}
.tour-card{position:fixed;z-index:9999;background:var(--panel3);border:1px solid var(--border2);
  border-radius:var(--radius);padding:16px;width:300px;max-width:calc(100vw - 24px);box-shadow:var(--shadow-lg)}
.tour-card h3{font-size:15px;font-weight:800;margin-bottom:2px}
/* Milestone celebration -- fires once, the moment store.check_milestones
   confirms a real threshold was just crossed, never a permanent card. */
.milestone-overlay{opacity:0;transition:opacity .25s var(--ease)}
.milestone-overlay.in{opacity:1}
.milestone-box{position:relative;background:radial-gradient(120% 140% at 50% -10%,rgba(255,196,64,.16),var(--panel2) 60%);
  border:1px solid rgba(255,196,64,.4);border-radius:18px;padding:34px 30px 28px;max-width:340px;width:100%;
  text-align:center;box-shadow:0 0 40px rgba(255,170,60,.18),var(--shadow-lg);
  transform:scale(.85) translateY(8px);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.milestone-overlay.in .milestone-box{transform:scale(1) translateY(0)}
.milestone-badge{font-size:56px;line-height:1;filter:drop-shadow(0 0 18px rgba(255,196,64,.55));
  animation:milestonePop .6s cubic-bezier(.34,1.56,.64,1) .1s both}
@keyframes milestonePop{0%{transform:scale(.3) rotate(-15deg)}60%{transform:scale(1.15) rotate(6deg)}100%{transform:scale(1) rotate(0)}}
.milestone-title{margin-top:12px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:#ffce6b}
.milestone-label{margin-top:4px;font-size:22px;font-weight:800;letter-spacing:-.2px}
.milestone-confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:18px}
.milestone-confetti span{position:absolute;top:-10px;width:7px;height:11px;opacity:0;border-radius:2px;
  animation:confettiFall 1.3s ease-in forwards}
@keyframes confettiFall{0%{opacity:0;transform:translateY(0) rotate(0)}
  8%{opacity:1}100%{opacity:0;transform:translateY(280px) rotate(340deg)}}
@media (prefers-reduced-motion: reduce){
  .milestone-badge,.milestone-confetti span{animation:none}
  .milestone-box{transition:none}
}
.hdr-icon-wrap{position:relative}
.hdr-icon{position:relative;background:var(--panel2);border:1px solid var(--border);color:var(--text);
  width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:15px;display:inline-flex;
  align-items:center;justify-content:center;flex:none;
  transition:background .15s var(--ease),border-color .15s var(--ease),transform .1s var(--ease)}
.hdr-icon:hover{background:var(--panel3);border-color:var(--border2)}
.hdr-icon:active{transform:scale(.92)}
.hdr-badge{position:absolute;top:-3px;right:-3px;background:var(--red);color:#fff;font-size:9.5px;
  font-weight:800;min-width:16px;height:16px;border-radius:9px;display:flex;align-items:center;
  justify-content:center;padding:0 3px;box-shadow:0 0 0 2px var(--bg2)}
.hdr-dropdown{position:absolute;top:44px;right:0;z-index:50;background:var(--panel2);
  border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lg);
  width:min(340px,90vw);max-height:70vh;overflow:auto;padding:6px;
  animation:cardIn .16s var(--ease)}
.hdr-status-block{padding:4px 8px 2px;font-size:12px;color:var(--dim);line-height:1.8}
/* tablets (iPad Mini/portrait ~768-810px etc.) used to fall between the old
   760px mobile cutoff and desktop assumptions, landing on a broken hybrid:
   desktop nav trying to wrap horizontally with not enough room. One
   breakpoint, now wide enough to actually cover that whole range, and the
   header itself is light enough now to not need special-casing beyond it. */
@media (max-width:900px){
  .hdr-dropdown{position:fixed;top:64px;right:8px;left:8px;width:auto}
}
/* Stock detail modal */
.stock-detail-overlay{
  display:none;position:fixed;top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,.7);backdrop-filter:blur(4px);
  align-items:center;justify-content:center;z-index:1000;
  padding:16px;overflow-y:auto
}
.stock-detail-box{
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  padding:28px;max-width:600px;width:100%;box-shadow:var(--shadow-lg);
  max-height:90vh;overflow-y:auto;position:relative
}
.stock-detail-box h2{
  font-size:26px;margin-bottom:12px;color:var(--accent)
}
.stock-detail-box .close-btn{
  position:absolute;top:12px;right:12px;background:none;border:none;
  color:var(--dim);font-size:28px;cursor:pointer;padding:0 8px;
  transition:color .15s var(--ease)
}
.stock-detail-box .close-btn:hover{color:var(--text)}
.quote-bar{
  display:flex;align-items:baseline;gap:16px;margin:16px 0 24px;padding:12px 0;
  border-bottom:1px solid var(--border)
}
.quote-bar .price{
  font-size:24px;font-weight:700;color:var(--text)
}
.quote-bar span:last-child{font-size:14px;font-weight:500}
.quote-bar .gain{color:var(--green)}
.quote-bar .loss{color:var(--red)}
.stock-section{margin-bottom:22px}
.stock-section h3{
  font-size:16px;font-weight:600;margin-bottom:12px;color:var(--accent)
}
.perf-badges{
  display:flex;flex-wrap:wrap;gap:8px
}
.perf-badge{
  background:var(--panel2);border:1px solid var(--border);
  border-radius:6px;padding:6px 12px;font-size:12.5px;font-weight:500
}
.perf-badge.gain{border-color:rgba(34,197,94,.3);background:rgba(34,197,94,.1);color:var(--green)}
.perf-badge.loss{border-color:rgba(240,74,74,.3);background:rgba(240,74,74,.1);color:var(--red)}
.position-info{
  display:flex;flex-direction:column;gap:8px;padding:12px;background:var(--panel2);
  border-radius:8px;font-size:14px
}
.position-info span{
  display:flex;justify-content:space-between
}
.position-info .gain{color:var(--green)}
.position-info .loss{color:var(--red)}
.trades-table{
  width:100%;border-collapse:collapse;font-size:13px
}
.trades-table thead{border-bottom:1px solid var(--border)}
.trades-table th{
  text-align:left;padding:8px 6px;font-weight:600;color:var(--dim);
  font-size:12px;text-transform:uppercase;letter-spacing:.5px
}
.trades-table td{
  padding:8px 6px;border-bottom:1px solid rgba(255,255,255,.05)
}
.trades-table tr:last-child td{border-bottom:none}
@media (max-width:600px){
  .stock-detail-box{padding:20px}
  .stock-detail-box h2{font-size:20px}
  .quote-bar{flex-direction:column;gap:6px}
  .perf-badges{gap:6px}
  .perf-badge{font-size:12px;padding:4px 10px}
}

/* ---- Polish pass: readability, keyboard focus, and clearer numbers (no layout changes) ---- */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
tr:hover td{background:rgba(43,176,236,.05)}
td{font-variant-numeric:tabular-nums}
td.up,td.down,.hero-tile .v.up,.hero-tile .v.down{font-weight:700}
.up,.down{font-variant-numeric:tabular-nums}

/* Pending trade proposals: one layout per screen size. Wide screens get a six-column row with a header;
   tablets get three columns; phones get stacked rows with large, easy-to-tap buttons. */
.prop-list{display:grid;gap:8px}
.prop-head,.prop{display:grid;grid-template-columns:minmax(80px,.7fr) minmax(90px,.7fr) minmax(120px,1.1fr) minmax(150px,1.4fr) minmax(140px,1.2fr) minmax(230px,auto);gap:10px;align-items:center}
.prop-head{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--dim);padding:0 12px}
.prop{padding:12px;border:1px solid var(--border);border-radius:10px;background:var(--panel2);min-width:0}
.prop-sym{font-weight:800;font-size:15px;color:var(--accent);cursor:pointer;overflow-wrap:anywhere}
.prop-plan,.prop-risk,.prop-src{min-width:0;overflow-wrap:anywhere}
.prop-act{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.prop-act .btn{min-height:36px}
@media (max-width:1100px){
  .prop-head{display:none}
  .prop{grid-template-columns:repeat(3,minmax(0,1fr))}
  .prop-sym{grid-column:1/-1}
  .prop-act{grid-column:1/-1;justify-content:stretch}
  .prop-act .btn{flex:1 1 0;min-height:40px}
}
@media (max-width:640px){
  .prop{grid-template-columns:1fr 1fr;gap:8px;padding:12px 10px}
  .prop-plan,.prop-score{min-width:0}
  .prop-risk,.prop-src{grid-column:1/-1}
  .prop-act .btn{min-height:44px;font-size:15px}
}

/* Utility classes that replace fixed inline style attributes. !important keeps the same precedence the inline style had. */
.u-scroll-x{overflow-x:auto!important}
.u-w-auto{width:auto!important}
.u-w-full{width:100%!important}
.u-fs-12{font-size:12px!important}
.u-fs-125{font-size:12.5px!important}
.u-fs-13{font-size:13px!important}
.u-fs-11{font-size:11px!important}
.u-fs-15{font-size:15px!important}
.u-fs-115-mb6{font-size:11.5px!important;margin-bottom:6px!important}
.u-pointer{cursor:pointer!important}
.u-pointer-13{cursor:pointer!important;font-size:13px!important}
.u-link-dim{cursor:pointer!important;color:var(--dim)!important;font-size:13px!important}
.u-m0{margin:0!important}
.u-label-reset{margin:0!important;text-transform:none!important;letter-spacing:0!important}
.u-mb-6{margin-bottom:6px!important}
.u-jc-between{justify-content:space-between!important}
.u-jc-end{justify-content:flex-end!important}
.u-ai-center{align-items:center!important}
.u-maxw-110{max-width:110px!important}
.u-maxw-160{max-width:160px!important}
.u-p-14{padding:14px!important}
.u-pad-2-10{padding:2px 10px!important}
.u-gap-10-wrap{gap:10px!important;flex-wrap:wrap!important}
.u-gap-8-wrap{gap:8px!important;flex-wrap:wrap!important}
.u-fw400-fs12{font-weight:400!important;font-size:12px!important}
.u-mono-11-full{width:100%!important;font-family:monospace!important;font-size:11px!important}
.u-float-r-btn{float:right!important;padding:5px 12px!important}
.u-bg-panel3{background:var(--panel3)!important}
.u-rel{position:relative!important}

/* Batch 2: utility classes for the remaining fixed inline styles (no display toggles). */
.u-flex-direction-column__align-items-stretch__gap-8px{flex-direction:column!important;align-items:stretch!important;gap:8px!important}
.u-border-bottom-1pxsolidh1a2436__padding-10px0{border-bottom:1px solid #1a2436!important;padding:10px 0!important}
.u-cursor-pointer__font-weight-600{cursor:pointer!important;font-weight:600!important}
.u-border-bottom-1pxsolidv-border__padding-10px0{border-bottom:1px solid var(--border)!important;padding:10px 0!important}
.u-cursor-pointer__font-weight-700{cursor:pointer!important;font-weight:700!important}
.u-font-size-13px__line-height-1p6{font-size:13px!important;line-height:1.6!important}
.u-width-100pc__min-height-80px__background-v-panel2__border-1pxsolidv-border__color-v-text__border-radius-8px__padding-8px{width:100%!important;min-height:80px!important;background:var(--panel2)!important;border:1px solid var(--border)!important;color:var(--text)!important;border-radius:8px!important;padding:8px!important}
.u-line-height-1p6{line-height:1.6!important}
.u-border-left-4pxsolidv-green{border-left:4px solid var(--green)!important}
.u-align-items-center__gap-10px__padding-6px0{align-items:center!important;gap:10px!important;padding:6px 0!important}
.u-font-size-16px{font-size:16px!important}
.u-flex-1__min-width-160px{flex:1!important;min-width:160px!important}
.u-margin-top-1px{margin-top:1px!important}
.u-font-size-11px__margin-bottom-4px{font-size:11px!important;margin-bottom:4px!important}
.u-font-size-13p5px__line-height-1p5__color-v-text__margin-top-4px{font-size:13.5px!important;line-height:1.5!important;color:var(--text)!important;margin-top:4px!important}
.u-padding-5px12px{padding:5px 12px!important}
.u-gap-6px__margin-0{gap:6px!important;margin:0!important}
.u-border-1pxsolidv-border__padding-4px{border:1px solid var(--border)!important;padding:4px!important}
.u-font-size-10px{font-size:10px!important}
.u-text-align-center__font-size-11px__border-1pxsolidv-border{text-align:center!important;font-size:11px!important;border:1px solid var(--border)!important}
.u-justify-content-space-between__align-items-center{justify-content:space-between!important;align-items:center!important}
.u-width-100pc__border-collapse-collapse__font-size-11px{width:100%!important;border-collapse:collapse!important;font-size:11px!important}
.u-font-size-11px__margin-top-3px{font-size:11px!important;margin-top:3px!important}
.u-border-left-3pxsolidv-accent{border-left:3px solid var(--accent)!important}
.u-font-weight-400{font-weight:400!important}
.u-border-left-3pxsolidv-accent2{border-left:3px solid var(--accent2)!important}
.u-width-13px__height-13px__vertical-align-1px{width:13px!important;height:13px!important;vertical-align:1px!important}
.u-gap-6px{gap:6px!important}
.u-border-top-1pxsolidv-border__padding-top-12px{border-top:1px solid var(--border)!important;padding-top:12px!important}
.u-margin-6px04px{margin:6px 0 4px!important}
.u-border-top-1pxsolidv-border__padding-top-8px{border-top:1px solid var(--border)!important;padding-top:8px!important}
.u-gap-26px__flex-wrap-wrap__align-items-center{gap:26px!important;flex-wrap:wrap!important;align-items:center!important}
.u-text-align-center{text-align:center!important}
.u-font-size-11p5px__margin-top-4px{font-size:11.5px!important;margin-top:4px!important}
.u-flex-1__min-width-260px{flex:1!important;min-width:260px!important}
.u-font-size-11p5px__margin-bottom-4px{font-size:11.5px!important;margin-bottom:4px!important}
.u-justify-content-flex-end__gap-6px{justify-content:flex-end!important;gap:6px!important}
.u-padding-3px10px{padding:3px 10px!important}
.u-gap-7px__font-size-12p5px__margin-3px0__align-items-center{gap:7px!important;font-size:12.5px!important;margin:3px 0!important;align-items:center!important}
.u-min-width-64px__text-align-right{min-width:64px!important;text-align:right!important}
.u-gap-22px__flex-wrap-wrap__align-items-flex-start{gap:22px!important;flex-wrap:wrap!important;align-items:flex-start!important}
.u-text-align-center__flex-none{text-align:center!important;flex:none!important}
.u-font-size-11px__margin-top-4px{font-size:11px!important;margin-top:4px!important}
.u-flex-1__min-width-170px{flex:1!important;min-width:170px!important}
.u-align-items-center__gap-8px__padding-3px0__margin-0{align-items:center!important;gap:8px!important;padding:3px 0!important;margin:0!important}
.u-gap-26px__flex-wrap-wrap__align-items-flex-start{gap:26px!important;flex-wrap:wrap!important;align-items:flex-start!important}
.u-flex-1__min-width-220px{flex:1!important;min-width:220px!important}
.u-max-width-230px{max-width:230px!important}
.u-padding-5px10px{padding:5px 10px!important}
.u-gap-12px__font-size-11px{gap:12px!important;font-size:11px!important}
.u-justify-content-space-between__align-items-flex-start__margin-0{justify-content:space-between!important;align-items:flex-start!important;margin:0!important}
.u-min-width-0{min-width:0!important}
.u-font-size-15px__font-weight-800{font-size:15px!important;font-weight:800!important}
.u-text-align-right__flex-none{text-align:right!important;flex:none!important}
.u-align-items-center__gap-8px__margin-top-9px__flex-wrap-wrap{align-items:center!important;gap:8px!important;margin-top:9px!important;flex-wrap:wrap!important}
.u-color-v-text{color:var(--text)!important}
.u-justify-content-space-between__align-items-center__flex-wrap-wrap__gap-6px__margin-top-9px{justify-content:space-between!important;align-items:center!important;flex-wrap:wrap!important;gap:6px!important;margin-top:9px!important}
.u-gap-4px__margin-0{gap:4px!important;margin:0!important}
.u-border-left-4pxsolidv-red{border-left:4px solid var(--red)!important}
.u-color-v-dim__font-size-14px{color:var(--dim)!important;font-size:14px!important}
.u-max-width-200px{max-width:200px!important}
.u-gap-4px__justify-content-flex-end{gap:4px!important;justify-content:flex-end!important}
.u-font-size-12px__margin-bottom-4px{font-size:12px!important;margin-bottom:4px!important}
.u-justify-content-space-between__font-size-13px__padding-2px0{justify-content:space-between!important;font-size:13px!important;padding:2px 0!important}
.u-gap-8px__flex-wrap-wrap__margin-0{gap:8px!important;flex-wrap:wrap!important;margin:0!important}
.u-justify-content-space-between__align-items-baseline{justify-content:space-between!important;align-items:baseline!important}
.u-gap-18px__flex-wrap-wrap{gap:18px!important;flex-wrap:wrap!important}
.u-cursor-pointer__color-v-dim__font-size-13px__padding-4px0{cursor:pointer!important;color:var(--dim)!important;font-size:13px!important;padding:4px 0!important}
.u-border-left-4pxsolidv-accent{border-left:4px solid var(--accent)!important}
.u-margin-bottom-8px{margin-bottom:8px!important}
.u-font-weight-700__font-size-13px{font-weight:700!important;font-size:13px!important}
.u-padding-6px14px{padding:6px 14px!important}
.u-padding-12px{padding:12px!important}
.u-border-color-v-border__margin-8px0{border-color:var(--border)!important;margin:8px 0!important}
.u-border-color-v-border__margin-10px0{border-color:var(--border)!important;margin:10px 0!important}
.u-padding-10px__border-1pxsolidv-border__border-radius-8px__background-v-bg2_h0d1420{padding:10px!important;border:1px solid var(--border)!important;border-radius:8px!important;background:var(--bg2,#0d1420)!important}
.u-width-460px__max-width-100pc{width:460px!important;max-width:100%!important}
.u-font-size-14px{font-size:14px!important}
.u-margin-top-12px{margin-top:12px!important}
.u-height-8px__background-h331616__border-radius-5px__overflow-hidden__margin-top-4px{height:8px!important;background:#331616!important;border-radius:5px!important;overflow:hidden!important;margin-top:4px!important}
.u-width-100pc__min-height-60px__background-v-panel2__border-1pxsolidv-border__color-v-text__border-radius-8px__padding-8px{width:100%!important;min-height:60px!important;background:var(--panel2)!important;border:1px solid var(--border)!important;color:var(--text)!important;border-radius:8px!important;padding:8px!important}
.u-width-420px__max-width-100pc{width:420px!important;max-width:100%!important}
.u-font-size-10px__padding-1px7px__margin-right-5px{font-size:10px!important;padding:1px 7px!important;margin-right:5px!important}
.u-font-size-13p5px__font-weight-600__line-height-1p4{font-size:13.5px!important;font-weight:600!important;line-height:1.4!important}
.u-font-size-11p5px{font-size:11.5px!important}
.u-flex-wrap-wrap__gap-6px{flex-wrap:wrap!important;gap:6px!important}
.u-margin-4px0{margin:4px 0!important}
.u-cursor-pointer__margin-left-8px__font-size-15px__user-select-none{cursor:pointer!important;margin-left:8px!important;font-size:15px!important;user-select:none!important}
.u-gap-12px__flex-wrap-wrap{gap:12px!important;flex-wrap:wrap!important}
.u-background-v-panel2__margin-bottom-10px{background:var(--panel2)!important;margin-bottom:10px!important}
.u-min-width-280px{min-width:280px!important}
.u-font-weight-600__font-size-13px{font-weight:600!important;font-size:13px!important}
.u-color-inherit__opacity-p75{color:inherit!important;opacity:.75!important}
.u-font-weight-800__letter-spacing-p3px__flex-none{font-weight:800!important;letter-spacing:.3px!important;flex:none!important}
.u-font-size-13px__color-v-text__overflow-hidden__text-overflow-ellipsis__white-space-nowrap{font-size:13px!important;color:var(--text)!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
.u-background-v-green__color-h06240f{background:var(--green)!important;color:#06240f!important}
.u-background-v-red__color-hfff{background:var(--red)!important;color:#fff!important}
.u-background-v-panel2__margin-bottom-8px{background:var(--panel2)!important;margin-bottom:8px!important}
.u-font-size-13p5px{font-size:13.5px!important}
.u-position-relative__margin-top-10px{position:relative!important;margin-top:10px!important}
.u-overflow-x-auto__max-height-300px__overflow-y-auto{overflow-x:auto!important;max-height:300px!important;overflow-y:auto!important}
.u-padding-10px0{padding:10px 0!important}
.u-flex-1__min-width-150px__padding-12px14px__background-v-panel3__border-radius-v-radius-sm{flex:1!important;min-width:150px!important;padding:12px 14px!important;background:var(--panel3)!important;border-radius:var(--radius-sm)!important}
.u-margin-004px{margin:0 0 4px!important}
.u-font-size-18px__font-weight-700{font-size:18px!important;font-weight:700!important}
.u-margin-2px00{margin:2px 0 0!important}
.u-font-size-11px__font-weight-700__letter-spacing-p4px__padding-3px9px__border-radius-999px__background-rgba-34_197_94_p15__color-v-green{font-size:11px!important;font-weight:700!important;letter-spacing:.4px!important;padding:3px 9px!important;border-radius:999px!important;background:rgba(34,197,94,.15)!important;color:var(--green)!important}
.u-font-size-11px__font-weight-700__letter-spacing-p4px__padding-3px9px__border-radius-999px__background-v-panel3__color-v-dim{font-size:11px!important;font-weight:700!important;letter-spacing:.4px!important;padding:3px 9px!important;border-radius:999px!important;background:var(--panel3)!important;color:var(--dim)!important}
.u-justify-content-space-between__align-items-flex-start__gap-12px__flex-wrap-wrap{justify-content:space-between!important;align-items:flex-start!important;gap:12px!important;flex-wrap:wrap!important}
.u-gap-10px__align-items-center{gap:10px!important;align-items:center!important}
.u-gap-6px__flex-wrap-wrap{gap:6px!important;flex-wrap:wrap!important}
.u-flex-wrap-wrap{flex-wrap:wrap!important}
.u-color-v-dim__font-size-13px__line-height-1p6{color:var(--dim)!important;font-size:13px!important;line-height:1.6!important}
.u-max-width-180px{max-width:180px!important}
.u-font-size-11p5px__margin-2px06px{font-size:11.5px!important;margin:2px 0 6px!important}
.u-font-size-18px{font-size:18px!important}
.u-min-width-0__flex-1{min-width:0!important;flex:1!important}
.u-margin-0__font-size-15px{margin:0!important;font-size:15px!important}
.u-font-size-13px__margin-top-3px{font-size:13px!important;margin-top:3px!important}
.u-margin-0010px{margin:0 0 10px!important}
.u-font-size-13px__color-v-dim__text-transform-uppercase__letter-spacing-p05em__margin-24px08px{font-size:13px!important;color:var(--dim)!important;text-transform:uppercase!important;letter-spacing:.05em!important;margin:24px 0 8px!important}
.u-border-top-1pxsolidv-border__padding-12px0{border-top:1px solid var(--border)!important;padding:12px 0!important}
.u-margin-top-6px{margin-top:6px!important}
.u-max-width-760px{max-width:760px!important}
.u-text-align-right{text-align:right!important}
.u-font-size-12px__align-self-center{font-size:12px!important;align-self:center!important}
.u-color-v-accent{color:var(--accent)!important}
.u-max-width-260px{max-width:260px!important}
.u-max-width-320px{max-width:320px!important}
.u-grid-template-columns-repeat-auto-fit_minmax-150px_1fr__gap-10px{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important;gap:10px!important}
.u-color-h4ade80__background-rgba-34_197_94_p16{color:#4ade80!important;background:rgba(34,197,94,.16)!important}
.u-color-h4ade80__background-rgba-34_197_94_p15{color:#4ade80!important;background:rgba(34,197,94,.15)!important}
.u-grid-template-columns-1fr__max-width-720px{grid-template-columns:1fr!important;max-width:720px!important}
.u-margin-top--6px{margin-top:-6px!important}
.u-flex-1{flex:1!important}
.u-flex-3{flex:3!important}
.u-margin-8px00__padding-left-20px__font-size-13px__line-height-1p7{margin:8px 0 0!important;padding-left:20px!important;font-size:13px!important;line-height:1.7!important}
.u-gap-14px__flex-wrap-wrap__align-items-center{gap:14px!important;flex-wrap:wrap!important;align-items:center!important}
.u-gap-10px__align-items-center__flex-wrap-wrap{gap:10px!important;align-items:center!important;flex-wrap:wrap!important}
.u-gap-6px__align-items-center{gap:6px!important;align-items:center!important}
.u-white-space-pre-wrap{white-space:pre-wrap!important}
.u-max-width-340px{max-width:340px!important}
.u-margin-0010px__line-height-1p65{margin:0 0 10px!important;line-height:1.65!important}
.u-align-items-center__gap-8px__flex-wrap-wrap{align-items:center!important;gap:8px!important;flex-wrap:wrap!important}
.u-font-size-18px__font-weight-800{font-size:18px!important;font-weight:800!important}
.u-line-height-1p55__color-v-amber{line-height:1.55!important;color:var(--amber)!important}
.u-justify-content-space-between__flex-wrap-wrap__gap-6px{justify-content:space-between!important;flex-wrap:wrap!important;gap:6px!important}
.u-max-width-70ch{max-width:70ch!important}
.u-margin-14px08px{margin:14px 0 8px!important}
.u-line-height-1p6__max-width-70ch{line-height:1.6!important;max-width:70ch!important}
.u-justify-content-space-between__align-items-center__flex-wrap-wrap__gap-8px{justify-content:space-between!important;align-items:center!important;flex-wrap:wrap!important;gap:8px!important}
.u-margin-top-2px{margin-top:2px!important}
.u-grid-column-span1__min-width-0{grid-column:span 1!important;min-width:0!important}
.u-color-hf87171__background-rgba-239_68_68_p16{color:#f87171!important;background:rgba(239,68,68,.16)!important}
.u-gap-10px__flex-wrap-wrap__align-items-center{gap:10px!important;flex-wrap:wrap!important;align-items:center!important}
.u-margin-top-4px{margin-top:4px!important}
.u-max-width-140px__text-align-center{max-width:140px!important;text-align:center!important}
.u-user-select-all{user-select:all!important}
.u-border-left-color-v-amber{border-left-color:var(--amber)!important}
.u-border-color-v-border__margin-14px0{border-color:var(--border)!important;margin:14px 0!important}
.u-color-inherit__text-decoration-underline{color:inherit!important;text-decoration:underline!important}
.u-align-items-center__gap-10px{align-items:center!important;gap:10px!important}
.u-margin-0__padding-12px{margin:0!important;padding:12px!important}
.u-font-weight-800__letter-spacing-1px{font-weight:800!important;letter-spacing:1px!important}
.u-max-width-140px{max-width:140px!important}
.u-cursor-pointer__font-size-15px__font-weight-700{cursor:pointer!important;font-size:15px!important;font-weight:700!important}
.u-font-weight-400__font-size-13px{font-weight:400!important;font-size:13px!important}
.u-font-weight-400__text-transform-none__letter-spacing-0{font-weight:400!important;text-transform:none!important;letter-spacing:0!important}
.u-color-v-green{color:var(--green)!important}
.u-line-height-1p5{line-height:1.5!important}
.u-border-bottom-none{border-bottom:none!important}
.u-font-weight-600{font-weight:600!important}
.u-background-v-panel2__border-radius-8px__padding-8px10px{background:var(--panel2)!important;border-radius:8px!important;padding:8px 10px!important}
.u-font-weight-600__margin-bottom-3px{font-weight:600!important;margin-bottom:3px!important}
.u-margin-0__padding-left-16px__font-size-11p5px__color-v-dim{margin:0!important;padding-left:16px!important;font-size:11.5px!important;color:var(--dim)!important}
.u-gap-8px__align-items-center{gap:8px!important;align-items:center!important}
.u-flex-1__min-width-140px__padding-12px14px__background-v-panel3__border-radius-v-radius-sm{flex:1!important;min-width:140px!important;padding:12px 14px!important;background:var(--panel3)!important;border-radius:var(--radius-sm)!important}
.u-margin-left-14px{margin-left:14px!important}
.u-letter-spacing-p4px{letter-spacing:.4px!important}
.u-font-weight-600__margin-bottom-2px{font-weight:600!important;margin-bottom:2px!important}
.u-background-v-panel2__border-radius-8px__padding-10px12px{background:var(--panel2)!important;border-radius:8px!important;padding:10px 12px!important}
.u-font-weight-600__margin-bottom-4px{font-weight:600!important;margin-bottom:4px!important}
.u-margin-0__padding-left-18px__font-size-13px__color-v-dim{margin:0!important;padding-left:18px!important;font-size:13px!important;color:var(--dim)!important}
.u-margin-bottom-2px{margin-bottom:2px!important}
.u-margin-left-8px{margin-left:8px!important}
.u-font-size-12px__line-height-1p5{font-size:12px!important;line-height:1.5!important}
.u-gap-8px{gap:8px!important}
.u-max-width-1180px__margin-0auto__padding-20px20px60px{max-width:1180px!important;margin:0 auto!important;padding:20px 20px 60px!important}
.u-justify-content-space-between__align-items-center__padding-8px030px{justify-content:space-between!important;align-items:center!important;padding:8px 0 30px!important}
.u-width-30px__height-30px__border-radius-8px{width:30px!important;height:30px!important;border-radius:8px!important}
.u-color-v-brand2{color:var(--brand2)!important}
.u-gap-18px__align-items-center{gap:18px!important;align-items:center!important}
.u-color-v-dim__font-size-13p5px{color:var(--dim)!important;font-size:13.5px!important}
.u-text-align-center__padding-40px020px{text-align:center!important;padding:40px 0 20px!important}
.u-margin-bottom-18px{margin-bottom:18px!important}
.u-font-size-clamp-30px_5vw_48px__line-height-1p15__margin-0016px__font-weight-800__text-wrap-balance{font-size:clamp(30px,5vw,48px)!important;line-height:1.15!important;margin:0 0 16px!important;font-weight:800!important;text-wrap:balance!important}
.u-font-size-16px__max-width-560px__margin-0auto26px__line-height-1p6{font-size:16px!important;max-width:560px!important;margin:0 auto 26px!important;line-height:1.6!important}
.u-justify-content-center__gap-12px__flex-wrap-wrap{justify-content:center!important;gap:12px!important;flex-wrap:wrap!important}
.u-font-size-15px__padding-12px26px{font-size:15px!important;padding:12px 26px!important}
.u-justify-content-center__gap-22px__flex-wrap-wrap__margin-top-22px{justify-content:center!important;gap:22px!important;flex-wrap:wrap!important;margin-top:22px!important}
.u-padding-top-30px{padding-top:30px!important}
.u-font-size-26px__text-align-center__margin-bottom-8px__font-weight-800{font-size:26px!important;text-align:center!important;margin-bottom:8px!important;font-weight:800!important}
.u-text-align-center__margin-bottom-28px{text-align:center!important;margin-bottom:28px!important}
.u-gap-10px__align-items-center__margin-bottom-8px{gap:10px!important;align-items:center!important;margin-bottom:8px!important}
.u-font-size-20px{font-size:20px!important}
.u-margin-0__font-size-15px__text-transform-none__letter-spacing-0__color-v-text{margin:0!important;font-size:15px!important;text-transform:none!important;letter-spacing:0!important;color:var(--text)!important}
.u-font-size-13p5px__line-height-1p5__margin-bottom-12px{font-size:13.5px!important;line-height:1.5!important;margin-bottom:12px!important}
.u-background-v-panel2__border-1pxsolidv-border__border-radius-v-radius-sm__padding-12px{background:var(--panel2)!important;border:1px solid var(--border)!important;border-radius:var(--radius-sm)!important;padding:12px!important}
.u-padding-top-50px__text-align-center{padding-top:50px!important;text-align:center!important}
.u-font-size-26px__margin-bottom-30px__font-weight-800{font-size:26px!important;margin-bottom:30px!important;font-weight:800!important}
.u-grid-template-columns-repeat-auto-fit_minmax-220px_1fr{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important}
.u-font-weight-700__margin-bottom-6px{font-weight:700!important;margin-bottom:6px!important}
.u-font-size-13px__max-width-240px__margin-0auto{font-size:13px!important;max-width:240px!important;margin:0 auto!important}
.u-margin-top-50px__text-align-center{margin-top:50px!important;text-align:center!important}
.u-text-transform-none__letter-spacing-0__font-size-16px__color-v-text__margin-bottom-10px{text-transform:none!important;letter-spacing:0!important;font-size:16px!important;color:var(--text)!important;margin-bottom:10px!important}
.u-font-size-13p5px__max-width-520px__margin-0auto__line-height-1p6{font-size:13.5px!important;max-width:520px!important;margin:0 auto!important;line-height:1.6!important}
.u-text-align-center__padding-50px020px{text-align:center!important;padding:50px 0 20px!important}
.u-font-size-26px__margin-bottom-16px__font-weight-800{font-size:26px!important;margin-bottom:16px!important;font-weight:800!important}
.u-font-size-12px__max-width-480px__margin-16pxauto0__line-height-1p5{font-size:12px!important;max-width:480px!important;margin:16px auto 0!important;line-height:1.5!important}
.u-width-min-360px_92vw{width:min(360px,92vw)!important}
.u-text-align-center__font-size-20px__letter-spacing-6px{text-align:center!important;font-size:20px!important;letter-spacing:6px!important}
.u-text-align-center__margin-top-8px{text-align:center!important;margin-top:8px!important}
.u-margin-top-10px{margin-top:10px!important}
.u-vertical-align--3px__margin-right-8px{vertical-align:-3px!important;margin-right:8px!important}
.u-justify-content-center__gap-16px{justify-content:center!important;gap:16px!important}
.u-color-v-dim__font-size-13px{color:var(--dim)!important;font-size:13px!important}
.u-line-height-1{line-height:1!important}
.u-font-size-9px__letter-spacing-3px__color-v-dim__margin-top-2px{font-size:9px!important;letter-spacing:3px!important;color:var(--dim)!important;margin-top:2px!important}
.u-margin-left-auto{margin-left:auto!important}

/* Basket run status pills (Baskets screen). */
.pill-hold{font-size:11px;font-weight:700;letter-spacing:.4px;padding:3px 9px;border-radius:999px;background:rgba(245,166,35,.18);color:var(--amber)}
.pill-live{font-size:11px;font-weight:700;letter-spacing:.4px;padding:3px 9px;border-radius:999px;background:rgba(240,74,74,.16);color:var(--red)}