/* ---------------------------------------------------------------------------
   The trading simulator, scoped to #gm.

   Every rule here is prefixed with the id on the wrapper around the interactive
   part of the page. Ten of the game's class names are already taken by the site
   stylesheet, card, chip, field, sheet, faq, up, down, flat, num and lede among
   them, so scoping by id rather than by class decides the collision on
   specificity instead of on which file happens to load second.

   This file is loaded by the simulator page and by nothing else, which is why
   it is its own asset rather than eighteen kilobytes added to the stylesheet
   every other page on the site downloads.

   The tokens below are the ones the site does not already own. --ink, --body,
   --muted, --surface, --line and --accent are deliberately absent: they are
   inherited, so the light chrome around the game follows the site's theme in
   both modes. The panel family is the game's own, because the trading surfaces
   stay dark in both themes so the chart colours carry.
   --------------------------------------------------------------------------- */
/* Light is the default here now, as it is everywhere else on the site.

   The trading panels used to be dark in both themes, on the reasoning that
   the red and green of a candle chart carry better on a dark ground. They do,
   but a reader who has chosen light mode and lands on a page that ignores the
   choice reads it as a bug, and they are right to. So there are two real
   palettes: this one, and the dark one below it.

   --panel-strong is the brightest text on a panel, white in dark and near
   black in light. Every hardcoded #fff in the game stylesheet became this,
   which is what made the inversion possible at all.

   --up and --down are darker in light mode than the candle colours they are
   named after. #16C784 on white is about 2.2:1, which is fine for a filled
   candle and fails badly for text or a thin border, so the text token is the
   deep pair and the canvas keeps the bright one. */
#gm{
  --bg:#F6F7F9;
  --panel:#FFFFFF; --panel-2:#F7F8FA; --panel-3:#EDEFF3;
  --panel-line:#DFE2E8; --panel-ink:#1B1D22; --panel-strong:#101216;
  --panel-muted:#4E5560; --panel-faint:#5C6470;
  --panel-wash:rgba(16,18,22,.04); --panel-wash-2:rgba(16,18,22,.06);
  --panel-shadow:0 10px 30px rgba(16,18,22,.10);
  --panel-shadow-lg:0 18px 50px rgba(16,18,22,.16);
  --readout-shadow:0 1px 2px rgba(255,255,255,.9);
  --badge-bg:rgba(255,255,255,.72);
  --up:#075C3C; --up-deep:#064E33; --up-soft:rgba(7,92,60,.12); --on-up:#FFFFFF;
  --down:#A8152A; --down-deep:#8E1423; --down-soft:rgba(168,21,42,.10); --on-down:#FFFFFF;
  --gold:#8A5A00; --info:#1B62C9;
  /* the canvas, which paints itself and cannot read a class */
  --ch-bg:#FFFFFF; --ch-grid:rgba(16,18,22,.08); --ch-axis:#5C6470;
  --ch-axis-dim:#7A828E; --ch-cross:rgba(16,18,22,.38);
  --ch-tag-bg:#E6E9EE; --ch-tag-fg:#1B1D22;
  --ch-up:#0E9E68; --ch-down:#D42A3E;
  --ch-glow-up:rgba(14,158,104,.55); --ch-glow-down:rgba(212,42,62,.55);
  --r:14px;
  --mono:var(--f-mono,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace);
}
:root[data-theme="dark"] #gm{
  --panel:#0C1017; --panel-2:#141A23; --panel-3:#1B2430;
  --panel-line:#232D3A; --panel-ink:#E9EEF5; --panel-strong:#FFFFFF;
  --panel-muted:#93A0B0; --panel-faint:#8794A3;
  --panel-wash:rgba(255,255,255,.04); --panel-wash-2:rgba(255,255,255,.06);
  --panel-shadow:0 22px 60px rgba(0,0,0,.42);
  --panel-shadow-lg:0 30px 90px rgba(0,0,0,.6);
  --readout-shadow:0 1px 3px rgba(0,0,0,.7);
  --badge-bg:rgba(0,0,0,.42);
  --up:#16C784; --up-deep:#0B8F5D; --up-soft:rgba(22,199,132,.14); --on-up:#04170F;
  --down:#F0364A; --down-deep:#B31B2C; --down-soft:rgba(240,54,74,.14); --on-down:#FFFFFF;
  --gold:#F2B233; --info:#3D8BFD;
  --ch-bg:#0C1017; --ch-grid:rgba(255,255,255,.055); --ch-axis:#6E7C8C;
  --ch-axis-dim:#55626F; --ch-cross:rgba(255,255,255,.35);
  --ch-tag-bg:#2B3A4A; --ch-tag-fg:#E9EEF5;
  --ch-up:#16C784; --ch-down:#F0364A;
  --ch-glow-up:rgba(22,199,132,.85); --ch-glow-down:rgba(240,54,74,.85);
}
:root[data-theme="dark"] #gm{ --bg:#0A0C11 }
/* The wrapper is a plain block; the site section around it does the spacing. */
#gm{display:block}
/* The shell already put the page inside a .wrap, so the .wrap inside each game
   section was capping and padding a second time. That cost about 110px of
   chart. Neutralised here rather than by stripping the class out of the
   markup, because the centring opt-out rules in theme.py key on .sec > .wrap
   and would stop applying to the copy sections if the class went. */
#gm .wrap{max-width:none;padding-inline:0}

#gm .num{font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.02em}
#gm .sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
#gm .tagrow{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px}
#gm .tag{font-size:12.5px; font-weight:700; letter-spacing:.02em; padding:5px 11px; border-radius:999px; border:1px solid var(--panel-line); color:var(--panel-muted); background:var(--panel-wash)}
#gm .tag.live{color:var(--up); border-color:rgba(22,199,132,.42); background:var(--up-soft)}
#gm .btn{appearance:none; border:0; border-radius:12px; padding:14px 24px; font:inherit; font-weight:700;
  font-size:16px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:9px;}
#gm .btn-primary{background:var(--up); color:var(--on-up)}
#gm .btn-primary:hover{background:var(--up-deep); color:var(--on-up)}
#gm .btn-ghost{background:transparent; color:var(--panel-ink); border:1px solid var(--panel-line)}
#gm .btn-ghost:hover{border-color:var(--panel-ink)}
#gm .setup-card{background:var(--panel-2); border:1px solid var(--panel-line); border-radius:18px; padding:22px;
  box-shadow:var(--panel-shadow);}
#gm .setup-card h2{color:var(--panel-strong); font-size:17px; margin:0 0 14px}
#gm .setup-row{display:grid; gap:9px; margin-bottom:16px}
#gm .setup-row .lbl{font-size:12.5px; font-weight:700; color:var(--panel-muted)}
#gm .pairpick{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px}
#gm .pairbtn{background:var(--panel-3); border:1px solid var(--panel-line); color:var(--panel-ink);
  border-radius:12px; padding:13px 12px; cursor:pointer; text-align:left; font:inherit; line-height:1.3;}
#gm .pairbtn .pairmarks{display:flex; align-items:center; margin:0 0 9px}
#gm .pairbtn .pairmarks img{width:26px; height:26px; object-fit:contain; display:block; margin:0}
#gm .pairbtn .pairmarks img + img{margin-left:-7px}
#gm .pairmarks img[data-l="dark"]{filter:none}
#gm :root[data-theme="dark"] .pairmarks img[data-l="dark"]{filter:drop-shadow(0 0 1px rgba(255,255,255,.55)) drop-shadow(0 0 3px rgba(255,255,255,.3))}
#gm .pairbtn b{display:block; font-size:15px}
#gm .pairbtn span{display:block; font-size:12px; color:var(--panel-faint); margin-top:2px}
#gm .pairbtn[aria-pressed="true"] span,#gm .modebtn[aria-pressed="true"] span,#gm .stakebtn[aria-pressed="true"] span{color:var(--panel-muted)}
#gm .pairbtn[aria-pressed="true"]{border-color:var(--up); background:var(--up-soft); box-shadow:inset 0 0 0 1px var(--up)}
#gm .livepick{display:grid; gap:9px}
#gm .livepick input{width:100%; background:var(--panel-3); border:1px solid var(--panel-line); color:var(--panel-ink);
  border-radius:12px; padding:12px 14px; font:inherit; font-size:15px;}
#gm .livepick input::placeholder{color:var(--panel-faint)}
#gm .livepick input:focus-visible{outline:2px solid var(--up); outline-offset:1px}
#gm .live-chosen{font-size:13px; font-weight:700; color:var(--up); background:var(--up-soft);
  border:1px solid var(--up); border-radius:10px; padding:9px 12px;}
#gm .live-status{font-size:13px; color:var(--panel-faint); padding:2px 2px 0}
#gm .live-results{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:7px;
  max-height:212px; overflow-y:auto; padding-right:2px;}
#gm .live-results:empty{display:none}
#gm .livehit{display:flex; align-items:baseline; gap:7px; text-align:left; font:inherit; cursor:pointer;
  background:var(--panel-3); border:1px solid var(--panel-line); color:var(--panel-ink);
  border-radius:10px; padding:9px 11px; min-width:0;}
#gm .livehit:hover{border-color:var(--up)}
#gm .livehit b{font-size:13.5px; flex:0 0 auto}
#gm .livehit .lh-i{width:20px; height:20px; flex:0 0 auto; object-fit:contain; align-self:center}
#gm .livehit .lh-r{font-family:var(--mono); font-size:11px; color:var(--panel-faint); flex:0 0 auto; margin-left:auto}
#gm .livehit .lh-n{font-size:12px; color:var(--panel-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#gm .live-empty{font-size:13px; color:var(--panel-faint); padding:8px 2px}
#gm .tfset{display:contents}
#gm .tfset[hidden]{display:none}
@media (max-width:560px){#gm .pairpick{grid-template-columns:1fr}}
#gm .stakepick{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px}
#gm .stakebtn{background:var(--panel-3); border:1px solid var(--panel-line); color:var(--panel-ink);
  border-radius:11px; padding:10px 6px; cursor:pointer; font:inherit; text-align:center; line-height:1.25}
#gm .stakebtn b{display:block; font-size:14.5px}
#gm .stakebtn span{display:block; font-size:10.5px; color:var(--panel-faint); margin-top:2px}
#gm .stakebtn[aria-pressed="true"]{border-color:var(--up); background:var(--up-soft);
  box-shadow:inset 0 0 0 1px var(--up)}
@media (max-width:620px){#gm .stakepick{grid-template-columns:repeat(3,minmax(0,1fr))}}
#gm .stake{display:flex; align-items:baseline; gap:10px; padding:14px 16px; border-radius:12px; background:var(--panel-3); border:1px solid var(--panel-line)}
#gm .stake b{font-family:var(--mono); font-size:30px; color:var(--panel-strong); letter-spacing:-.03em}
#gm .stake span{font-size:13px; color:var(--panel-faint)}
#gm .disclose{background:var(--surface); border-bottom:1px solid var(--line)}
#gm .disclose-in{display:flex; gap:14px; align-items:flex-start; padding-block:14px; font-size:14.5px; color:var(--muted)}
#gm .disclose-in b{color:var(--ink)}
#gm .disclose .dot{flex:0 0 auto; width:10px; height:10px; border-radius:50%; background:var(--accent); margin-top:8px}
#gm .game{padding-block:clamp(26px,4vw,40px)}
#gm .game-grid{display:grid; grid-template-columns:minmax(0,1fr) 372px; gap:20px; align-items:start}
#gm .game-grid>*{min-width:0}
@media (max-width:1080px){#gm .game-grid{grid-template-columns:minmax(0,1fr)}}
#gm .card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; padding:0}
#gm .card.dark{background:var(--panel); border-color:var(--panel-line); color:var(--panel-ink)}
#gm .chart-card{position:relative; min-width:0}
#gm .ctop{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:14px 16px; border-bottom:1px solid var(--panel-line); background:var(--panel-2)}
#gm .pairtag{display:flex; align-items:center; gap:10px; font-weight:800; font-size:17px; color:var(--panel-strong); letter-spacing:-.02em}
#gm .pairtag .glyph{width:30px; height:30px; border-radius:50%; background:linear-gradient(140deg,#1C6FE0,#0E3C86); display:grid; place-items:center; color:#fff; font-size:12px; font-weight:800; letter-spacing:.02em}
#gm .glyph>img,#gm .lh-i,#gm .pairmarks img{margin:0; border:0; border-radius:0}
#gm .glyph{position:relative}
#gm .glyph>img{grid-area:1/1; width:100%; height:100%; object-fit:contain; display:block}
#gm .glyph.has-mark{background:none; color:transparent}
#gm .glyph>img[data-l="dark"],#gm .lh-i[data-l="dark"]{filter:none}
#gm :root[data-theme="dark"] .glyph>img[data-l="dark"],#gm :root[data-theme="dark"] .lh-i[data-l="dark"]{filter:drop-shadow(0 0 1px rgba(255,255,255,.55)) drop-shadow(0 0 3px rgba(255,255,255,.3))}
#gm .livepx{display:flex; align-items:baseline; gap:10px; margin-left:4px}
#gm .livepx .p{font-family:var(--mono); font-size:22px; font-weight:700; color:var(--panel-strong); letter-spacing:-.03em}
#gm .livepx .c{font-family:var(--mono); font-size:14px; font-weight:700; padding:3px 8px; border-radius:7px}
#gm .up{color:var(--up); background:var(--up-soft)}
#gm .down{color:var(--down); background:var(--down-soft)}
#gm .flat{color:var(--panel-muted); background:var(--panel-wash-2)}
#gm .ctop-right{margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
#gm .chips{display:flex; gap:4px; padding:10px 16px; border-bottom:1px solid var(--panel-line); background:var(--panel); overflow-x:auto; scrollbar-width:none}
#gm .chips::-webkit-scrollbar{display:none}
#gm .chips.chips-ind{padding-top:8px; padding-bottom:8px; background:var(--panel-2)}
#gm .chips-ind .ind-l{display:inline-flex; align-items:center; font-size:11.5px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--panel-faint);
  padding-right:10px; margin-right:4px; white-space:nowrap; flex:0 0 auto}
#gm .chip{background:transparent; border:1px solid transparent; color:var(--panel-muted); font:inherit; font-size:13px; font-weight:700;
  padding:6px 12px; border-radius:8px; cursor:pointer; white-space:nowrap;}
#gm .chip:hover{color:var(--panel-strong); background:var(--panel-3)}
#gm .chip[aria-pressed="true"]{background:var(--panel-3); color:var(--panel-strong); border-color:var(--panel-line)}
#gm .chips .sep{width:1px; background:var(--panel-line); margin:4px 8px}
#gm .zoom-l{font-size:12px; color:var(--panel-faint); padding:0 4px; white-space:nowrap;
  align-self:center; flex:0 0 auto; min-width:58px; text-align:center}
#gm .tgtbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:9px 16px; border-bottom:1px solid var(--panel-line); background:var(--panel-2)}
#gm .tgt-l{font-size:12px; font-weight:700; color:var(--panel-faint); flex:0 0 auto}
#gm .tgtbar input{width:150px; background:var(--panel-3); border:1px solid var(--panel-line);
  color:var(--panel-strong); border-radius:9px; padding:6px 10px;
  font-family:var(--mono); font-size:14px; font-weight:700;}
#gm .tgtbar input::placeholder{color:var(--panel-faint); font-weight:400}
#gm .tgtbar input:focus-visible{outline:2px solid var(--info); outline-offset:1px}
#gm .tgt-q{display:flex; gap:4px; flex:0 0 auto}
#gm .tgt-rr{font-size:12.5px; color:var(--panel-faint); font-family:var(--mono)}
#gm .tgt-rr.up{color:var(--up); background:none}
#gm .tgt-rr.down{color:var(--down); background:none}
@media (max-width:560px){#gm .tgtbar input{width:120px}#gm .tgt-rr{width:100%}}
#gm .chart-stage{position:relative; background:var(--panel); padding:0}
#gm #chart{display:block; width:100%; height:clamp(340px,50vh,560px); touch-action:pan-y}
#gm .readout{position:absolute; top:12px; left:16px; display:flex; gap:12px; flex-wrap:wrap; font-family:var(--mono);
  font-size:12.5px; color:var(--panel-muted); pointer-events:none; text-shadow:var(--readout-shadow);}
#gm .readout b{font-weight:700}
#gm .flashlayer{position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .16s ease}
#gm .flashlayer.on-up{background:radial-gradient(120% 90% at 50% 100%, rgba(22,199,132,.42), transparent 70%); opacity:1}
#gm .flashlayer.on-down{background:radial-gradient(120% 90% at 50% 0%, rgba(240,54,74,.44), transparent 70%); opacity:1}
#gm .stagebadge{position:absolute; right:14px; bottom:34px; font-size:11.5px; font-weight:800; letter-spacing:.07em;
  color:var(--panel-faint); border:1px solid var(--panel-line); padding:4px 9px; border-radius:6px; background:var(--badge-bg);}
#gm .shake{animation:shk .5s cubic-bezier(.36,.07,.19,.97) both}
@keyframes shk{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(3px)}30%,50%,70%{transform:translateX(-5px)}40%,60%{transform:translateX(5px)}}
#gm .stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--panel-line); border-top:1px solid var(--panel-line)}
@media (max-width:620px){#gm .stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
#gm .stat{background:var(--panel-2); padding:14px 16px; min-height:82px; display:flex;
  flex-direction:column; justify-content:center; align-items:center; text-align:center; gap:3px}
#gm .stat .k{font-size:11.5px; font-weight:700; letter-spacing:.04em; color:var(--panel-faint)}
#gm .stat .v{font-family:var(--mono); font-size:21px; font-weight:700; color:var(--panel-strong); letter-spacing:-.03em; line-height:1.15}
#gm .stat .s{font-size:12px; color:var(--panel-muted)}
#gm .stat.pos .v{color:var(--up)}
#gm .stat.neg .v{color:var(--down)}
#gm .pulse{animation:pls .55s ease}
@keyframes pls{0%{transform:scale(1)}35%{transform:scale(1.085)}100%{transform:scale(1)}}
#gm .swap{background:var(--panel); border:1px solid var(--panel-line); border-radius:var(--r); color:var(--panel-ink); overflow:hidden; position:sticky; top:88px}
@media (max-width:1080px){#gm .swap{position:static}}
#gm .swap-h{display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--panel-line); background:var(--panel-2)}
#gm .swap-h b{font-size:15.5px; color:var(--panel-strong)}
#gm .swap-h .sub{font-size:12px; color:var(--panel-faint); margin-left:auto}
#gm .swap-body{padding:16px}
#gm .field{background:var(--panel-2); border:1px solid var(--panel-line); border-radius:12px; padding:13px 14px}
#gm .field + .field{margin-top:8px}
#gm .field .fh{display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--panel-faint); margin-bottom:7px}
#gm .field .fh .bal{cursor:pointer}
#gm .field .fh .bal:hover{color:var(--up)}
#gm .field .fb{display:flex; align-items:center; gap:10px}
#gm .field input{flex:1; min-width:0; background:transparent; border:0; color:var(--panel-strong); font-family:var(--mono);
  font-size:26px; font-weight:700; letter-spacing:-.03em; padding:0; width:100%;}
#gm .field input:focus{outline:none}
#gm .field input::placeholder{color:#3F4C5C}
#gm .tokpill{display:flex; align-items:center; gap:8px; background:var(--panel-3); border:1px solid var(--panel-line); border-radius:999px; padding:7px 13px 7px 8px; font-weight:700; font-size:14px; white-space:nowrap}
#gm .tokpill .glyph{width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:9.5px; font-weight:800; color:#fff}
#gm .g-ocx{background:linear-gradient(140deg,#1C6FE0,#0E3C86)}
#gm .g-usdc{background:linear-gradient(140deg,#2775CA,#1A56A0)}
#gm .g-sol{background:linear-gradient(140deg,#9945FF,#14F195); color:#06110C}
#gm .field .usd{font-size:12px; color:var(--panel-faint); margin-top:6px; font-family:var(--mono)}
#gm .flip{display:grid; place-items:center; margin:-9px 0; position:relative; z-index:2}
#gm .flip button{width:38px; height:38px; border-radius:11px; background:var(--panel-3); border:1px solid var(--panel-line);
  color:var(--panel-ink); cursor:pointer; font-size:15px; display:grid; place-items:center;}
#gm .flip button:hover{border-color:var(--up); color:var(--up)}
#gm .pcts{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:12px 0}
#gm .pct{background:var(--panel-2); border:1px solid var(--panel-line); color:var(--panel-muted); border-radius:9px; padding:8px 0; font:inherit; font-size:12.5px; font-weight:700; cursor:pointer}
#gm .pct:hover{color:var(--panel-strong); border-color:var(--panel-faint)}
#gm .quote{border-top:1px dashed var(--panel-line); margin-top:12px; padding-top:12px; display:grid; gap:7px}
#gm .qrow{display:flex; justify-content:space-between; gap:12px; font-size:13px; color:var(--panel-muted)}
#gm .qrow .qv{font-family:var(--mono); color:var(--panel-ink)}
#gm .qrow .qv.warn{color:var(--gold)}
#gm .qrow .qv.bad{color:var(--down)}
#gm .act{display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:14px}
#gm .act .btn{justify-content:center; padding:15px 12px; font-size:16px; border-radius:12px}
#gm .btn-buyx{background:var(--up); color:var(--on-up)}
#gm .btn-buyx:hover{background:var(--up-deep); color:var(--on-up)}
#gm .btn-sellx{background:var(--down); color:var(--on-down)}
#gm .btn-buyx.is-off,#gm .btn-sellx.is-off{background:transparent; box-shadow:inset 0 0 0 1.5px currentColor}
#gm .btn-buyx.is-off{color:var(--up)}
#gm .btn-sellx.is-off{color:var(--down)}
#gm .btn-sellx:hover{background:var(--down-deep); color:var(--on-down)}
#gm .btn:disabled{opacity:.42; cursor:not-allowed}
#gm .act-wide{margin-top:9px}
#gm .act-wide .btn:not(.btn-primary){width:100%; justify-content:center; background:var(--panel-3); color:var(--panel-ink); border:1px solid var(--panel-line); padding:12px; font-size:14.5px; border-radius:12px}
#gm .act-wide .btn:not(.btn-primary):hover{border-color:var(--down); color:var(--down)}
#gm .act-wide .btn-primary{width:100%; justify-content:center; background:var(--up); color:var(--on-up); border:0; padding:15px 12px; font-size:16px; border-radius:12px}
#gm .act-wide .btn-primary:hover{background:var(--up-deep); color:var(--on-up)}
#gm .poscard{margin:0 16px 16px; background:var(--panel-2); border:1px solid var(--panel-line); border-radius:12px; padding:14px}
#gm .poscard .ph{display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--panel-faint); margin-bottom:9px}
#gm .poscard .pg{display:grid; grid-template-columns:1fr 1fr; gap:10px 14px}
#gm .poscard .pk{font-size:11.5px; color:var(--panel-faint)}
#gm .poscard .pv{font-family:var(--mono); font-size:15.5px; font-weight:700; color:var(--panel-strong)}
#gm .poscard .pv.up{color:var(--up); background:none}
#gm .poscard .pv.down{color:var(--down); background:none}
#gm .lower{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:20px; margin-top:20px}
#gm .lower>*{min-width:0}
@media (max-width:820px){#gm .lower{grid-template-columns:minmax(0,1fr)}}
#gm .pnl-h{display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--panel-line); background:var(--panel-2)}
#gm .pnl-h b{color:var(--panel-strong); font-size:15px}
#gm .pnl-h .cnt{margin-left:auto; font-size:12px; color:var(--panel-faint); font-family:var(--mono)}
#gm .feed{max-height:330px; overflow-y:auto; padding:6px 0}
#gm .feed-item{display:grid; grid-template-columns:auto 1fr; gap:12px; padding:12px 16px; border-bottom:1px solid var(--panel-line)}
#gm .feed-item:last-child{border-bottom:0}
#gm .feed .imp{width:5px; border-radius:3px; background:var(--panel-faint)}
#gm .feed .imp.b{background:var(--up)}
#gm .feed .imp.s{background:var(--down)}
#gm .feed .imp.v{background:var(--gold)}
#gm .feed .hl{font-size:14.5px; color:var(--panel-ink); font-weight:600; line-height:1.4}
#gm .feed .mt{font-size:11.5px; color:var(--panel-faint); font-family:var(--mono); margin-top:4px}
#gm .feed .empty{padding:26px 16px; color:var(--panel-faint); font-size:14px; text-align:center}
#gm .logrow{display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:11px 16px; border-bottom:1px solid var(--panel-line); font-size:13.5px}
#gm .logrow:last-child{border-bottom:0}
#gm .logrow .side{font-weight:800; font-size:11.5px; letter-spacing:.05em; padding:3px 8px; border-radius:6px}
#gm .logrow .amt{font-family:var(--mono); color:var(--panel-ink)}
#gm .logrow .rp{font-family:var(--mono); font-weight:700; text-align:right}
#gm .toasts{position:fixed; right:clamp(12px,3vw,26px); bottom:clamp(12px,3vw,26px); z-index:80; display:grid; gap:10px; width:min(358px,calc(100vw - 24px)); pointer-events:none}
#gm .toast{pointer-events:auto; background:var(--panel-2); border:1px solid var(--panel-line); border-left:4px solid var(--info);
  border-radius:12px; padding:13px 15px; color:var(--panel-ink); box-shadow:var(--panel-shadow-lg);
  animation:tin .32s cubic-bezier(.2,.8,.3,1) both;}
@keyframes tin{from{opacity:0; transform:translateY(14px) scale(.97)}to{opacity:1; transform:none}}
#gm .toast.out{animation:tout .28s ease forwards}
@keyframes tout{to{opacity:0; transform:translateX(24px)}}
#gm .toast .tt{display:flex; align-items:center; gap:8px; font-size:11.5px; font-weight:800; letter-spacing:.05em; color:var(--panel-faint); margin-bottom:5px}
#gm .toast .tb{font-size:14.5px; line-height:1.45}
#gm .toast .tn{font-size:12.5px; color:var(--panel-muted); margin-top:6px}
#gm .toast.bull{border-left-color:var(--up)}
#gm .toast.bull .tt{color:var(--up)}
#gm .toast.bear{border-left-color:var(--down)}
#gm .toast.bear .tt{color:var(--down)}
#gm .toast.vol{border-left-color:var(--gold)}
#gm .toast.vol .tt{color:var(--gold)}
#gm .toast.coach{border-left-color:var(--info)}
#gm .toast.coach .tt{color:var(--info)}
#gm .toast .tacts{display:flex; gap:8px; margin-top:10px}
#gm .toast .tacts button{background:var(--panel-3); border:1px solid var(--panel-line); color:var(--panel-ink); border-radius:8px; padding:7px 12px; font:inherit; font-size:12.5px; font-weight:700; cursor:pointer}
#gm .toast .tacts button:hover{border-color:var(--up); color:var(--up)}
#gm .modal{position:fixed; inset:0; z-index:100; display:none; place-items:center; padding:clamp(12px,3vw,28px); background:rgba(6,8,12,.76); backdrop-filter:blur(6px)}
#gm .modal[open]{display:grid}
#gm .sheet{width:min(700px,100%); max-height:92vh; overflow:auto; background:var(--panel); border:1px solid var(--panel-line); border-radius:18px; color:var(--panel-ink); box-shadow:var(--panel-shadow-lg)}
#gm .sheet-h{padding:26px 26px 18px; border-bottom:1px solid var(--panel-line); text-align:center; background:radial-gradient(90% 130% at 50% 0%, rgba(22,199,132,.16), transparent 70%)}
#gm .sheet-h.lose{background:radial-gradient(90% 130% at 50% 0%, rgba(240,54,74,.18), transparent 70%)}
#gm .sheet-h .rank{font-size:12.5px; font-weight:800; letter-spacing:.1em; color:var(--panel-faint)}
#gm .sheet-h h2{color:var(--panel-strong); font-size:clamp(26px,4.4vw,36px); margin:8px 0 4px}
#gm .sheet-h .big{font-family:var(--mono); font-size:clamp(38px,7vw,58px); font-weight:800; letter-spacing:-.04em; line-height:1.05}
#gm .sheet-h .sub{color:var(--panel-muted); font-size:14.5px; margin-top:6px}
#gm .sheet-b{padding:22px 26px 26px}
#gm .rgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; margin-bottom:20px}
#gm .rtile{background:var(--panel-2); border:1px solid var(--panel-line); border-radius:12px; padding:13px 14px}
#gm .rtile .k{font-size:11.5px; color:var(--panel-faint); margin-bottom:3px}
#gm .rtile .v{font-family:var(--mono); font-size:19px; font-weight:700; color:var(--panel-strong)}
#gm .lesson{background:var(--panel-2); border:1px solid var(--panel-line); border-left:4px solid var(--gold); border-radius:12px; padding:15px 16px; margin-bottom:18px}
#gm .lesson b{color:var(--panel-strong); display:block; margin-bottom:5px; font-size:14.5px}
#gm .lesson p{color:var(--panel-muted); font-size:14px; margin:0; max-width:none}
#gm #cardcanvas{width:100%; height:auto; border-radius:12px; border:1px solid var(--panel-line); display:block; margin-bottom:16px}
#gm .shares{display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:9px}
#gm .shares a,#gm .shares button{display:flex; align-items:center; justify-content:center; gap:7px; background:var(--panel-2);
  border:1px solid var(--panel-line); color:var(--panel-ink); border-radius:11px; padding:12px 10px;
  font:inherit; font-size:13.5px; font-weight:700; text-decoration:none; cursor:pointer;}
#gm .shares a:hover,#gm .shares button:hover{border-color:var(--up); color:var(--up)}
#gm .again{display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:12px}
#gm .again .btn{justify-content:center; padding:14px}
#gm .sec{padding-block:clamp(34px,5vw,58px)}
#gm .sec-alt{background:var(--surface); border-block:1px solid var(--line)}
#gm .lede{font-size:clamp(17px,1.8vw,19.5px); color:var(--muted); max-width:70ch}
#gm .cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(272px,1fr)); gap:20px; margin-top:26px}
#gm .tile{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:22px}
#gm .sec-alt .tile{background:var(--bg)}
#gm .tile h3{font-size:18.5px; margin-bottom:.45em}
#gm .tile p{font-size:15.5px; color:var(--muted); margin:0}
#gm .tile p + p{margin-top:.7em}
#gm .faq{margin-top:26px; border-top:1px solid var(--line)}
#gm .faq details{border-bottom:1px solid var(--line)}
#gm .faq summary{cursor:pointer; padding:17px 46px 17px 0; font-weight:700; color:var(--ink); font-size:17px; position:relative; list-style:none}
#gm .faq summary::-webkit-details-marker{display:none}
#gm .faq summary::after{content:"+"; position:absolute; right:10px; top:50%; transform:translateY(-50%); font-size:22px; color:var(--accent); font-weight:400}
#gm .faq details[open] summary::after{content:"\2013"}
#gm .faq .ans{padding:0 0 18px; color:var(--muted); font-size:15.5px; max-width:74ch}
#gm .linkrow{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}
#gm .linkrow a{background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:9px 16px; font-size:14.5px; font-weight:600; color:var(--body); text-decoration:none}
#gm .linkrow a:hover{border-color:var(--accent); color:var(--accent)}
#gm .sec-alt .linkrow a{background:var(--bg)}
@media (prefers-reduced-motion:reduce){#gm .flashlayer{display:none}}
@media (max-width:560px){#gm .act{grid-template-columns:1fr 1fr}#gm .stat .v{font-size:19px}}
#gm .modepick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
#gm .modebtn{background:var(--panel-3);border:1px solid var(--panel-line);color:var(--panel-ink);
  border-radius:12px;padding:12px 12px;cursor:pointer;text-align:left;font:inherit;line-height:1.3}
#gm .modebtn b{display:block;font-size:14.5px}
#gm .modebtn span{display:block;font-size:11.5px;color:var(--panel-faint);margin-top:2px}
#gm .modebtn[aria-pressed="true"]{border-color:var(--up);background:var(--up-soft);
  box-shadow:inset 0 0 0 1px var(--up)}
#gm .levpick{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
#gm .levbtn{background:var(--panel-3);border:1px solid var(--panel-line);color:var(--panel-ink);
  border-radius:10px;padding:9px 4px;cursor:pointer;text-align:center;font:inherit;line-height:1.2}
#gm .levbtn b{display:block;font-size:13px;font-family:var(--mono)}
#gm .levbtn span{display:block;font-size:10.5px;color:var(--panel-faint);margin-top:2px}
#gm .levbtn[data-lev="500"] span,#gm .levbtn[data-lev="1000"] span{color:var(--down)}
#gm .levbtn[aria-pressed="true"]{border-color:var(--gold);background:rgba(242,178,51,.12);
  box-shadow:inset 0 0 0 1px var(--gold)}
#gm .levbtn[aria-pressed="true"][data-lev="500"],#gm .levbtn[aria-pressed="true"][data-lev="1000"]{border-color:var(--down);
  background:var(--down-soft);box-shadow:inset 0 0 0 1px var(--down)}
@media (max-width:620px){#gm .modepick{grid-template-columns:minmax(0,1fr)}#gm .levpick{grid-template-columns:repeat(4,minmax(0,1fr))}}
#gm .modetag{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--gold);border:1px solid rgba(242,178,51,.4);
  background:rgba(242,178,51,.1);border-radius:999px;padding:3px 9px;margin-left:8px}
#gm .lev-note{font-size:12.5px;color:var(--panel-faint);border:1px solid var(--panel-line);
  border-radius:10px;padding:9px 11px;margin-bottom:12px;background:var(--panel-3)}
#gm .lev-side{font-family:var(--mono);font-size:12.5px;font-weight:700}
#gm .lev-side.up{color:var(--up)}
#gm .lev-side.down{color:var(--down)}
#gm .lev-room{height:7px;border-radius:999px;background:var(--panel-3);overflow:hidden;
  margin:10px 0 6px}
#gm .lev-room-b{display:block;height:100%;border-radius:999px;background:var(--up);
  transition:width .25s linear}
#gm .lev-room-b.warn{background:var(--gold)}
#gm .lev-room-b.crit{background:var(--down)}
#gm .lev-room-t{font-size:11.5px;color:var(--panel-faint);margin-bottom:10px}
@media (prefers-reduced-motion:reduce){#gm .lev-room-b{transition:none}}
#gm .chart-card.is-fs{position:fixed; inset:0; z-index:200; border-radius:0; border:0;
  display:flex; flex-direction:column;
  
  --fs-gutter:clamp(12px,2.2vw,40px);
  padding-left:calc(var(--fs-gutter) + env(safe-area-inset-left,0px));
  padding-right:calc(var(--fs-gutter) + env(safe-area-inset-right,0px));
  padding-top:calc(10px + env(safe-area-inset-top,0px));
  padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));}
#gm .chart-card.is-fs .ctop,#gm .chart-card.is-fs .chips{padding-inline:0}
#gm .chart-card.is-fs .stats{border-radius:10px; overflow:hidden}
#gm .chart-card.is-fs .chart-stage{flex:1 1 auto; min-height:0}
#gm .chart-card.is-fs #chart{height:100%}
#gm .chart-card.is-fs .stats{flex:0 0 auto}
@media (max-width:620px){#gm .chart-card.is-fs .ctop{flex-wrap:nowrap; overflow-x:auto; gap:10px; padding:10px 12px;
    scrollbar-width:none}#gm .chart-card.is-fs .ctop::-webkit-scrollbar{display:none}#gm .chart-card.is-fs .ctop-right{flex-wrap:nowrap}#gm .chart-card.is-fs .pairtag{font-size:15px; flex:0 0 auto; white-space:nowrap}#gm .chart-card.is-fs .livepx{flex:0 0 auto; white-space:nowrap}#gm .chart-card.is-fs .readout{font-size:11.5px}#gm .chart-card.is-fs .livepx .p{font-size:18px}#gm .chart-card.is-fs .stats{display:flex; overflow-x:auto; scrollbar-width:none}#gm .chart-card.is-fs .stats::-webkit-scrollbar{display:none}#gm .chart-card.is-fs .stat{flex:0 0 45%; min-height:56px; padding:8px 12px}#gm .chart-card.is-fs .stat .v{font-size:16px}#gm .chart-card.is-fs .stat .s{display:none}}