/* Practice trading league */
:root{--up:#0E9F57;--down:#D6453D;--accent:#0E9F57;--accent-soft:#E5F5EC;--entry:#3A66DB;--edge:0 0 0 1px var(--line);--lift:var(--card-sh)}
html[data-dark]{--up:#2CC46B;--down:#F2665D;--accent:#2CC46B;--accent-soft:#16301F;--entry:#7C9CFF;--edge:0 0 0 1px rgba(255,255,255,.08);--lift:0 0 0 1px rgba(255,255,255,.08)}
.lg{margin-top:12px}
.lg-acct{position:relative;border-radius:24px;padding:16px 18px 4px;background:var(--bg);color:var(--ink);box-shadow:var(--lift,0 0 0 1px var(--line)),var(--edge,0 0 0 1px var(--line))}
.lg-acct-top{display:flex;justify-content:space-between;align-items:center;position:relative}
.lg-badge{font:700 12px var(--body);color:var(--accent);background:var(--accent-soft);border-radius:999px;padding:4px 10px}
.lg-reset{font-size:12.5px;color:var(--muted)}
.lg-eq{font:800 40px/1.05 var(--body);margin:12px 0 2px;letter-spacing:-.04em}
.lg-ret{font:700 13.5px var(--body);color:var(--muted)}
.lg-ret.up{color:var(--up)}.lg-ret.down{color:var(--down)}
.lg-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:14px;border-top:1px solid var(--line)}
.lg-stats div{padding:10px 0 10px;display:flex;flex-direction:column;gap:2px;min-width:0}
.lg-stats div+div{padding-left:10px;border-left:1px solid var(--line)}
.lg-stats small{font-size:11.5px;color:var(--muted);white-space:nowrap}
.lg-stats b{font:700 14.5px var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lg-stats b em{font-style:normal;color:var(--muted);font-weight:600}
.lg-stats b.up{color:var(--up)}.lg-stats b.down{color:var(--down)}
.lg-tabs{display:flex;gap:22px;margin:18px 4px 0;border-bottom:1px solid var(--line)}
.lg-tabs button{border:0;background:none;padding:10px 0;font:600 15px var(--body);color:var(--muted);position:relative}
.lg-tabs button[aria-selected="true"]{color:var(--ink)}
.lg-tabs button[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink);border-radius:2px}
.lg-group{margin-top:14px;background:var(--bg);border-radius:22px;box-shadow:var(--card-sh);overflow:hidden}
.lg-group h3{font:600 12.5px var(--body);color:var(--muted);margin:0;padding:12px 16px 4px}
.lg-row,.lg-pos,.lg-trade,.lg-brow{display:flex;align-items:center;gap:12px;width:100%;border:0;background:none;padding:10px 16px;color:var(--ink);text-align:left;position:relative}
.lg-group>*+.lg-row::before,.lg-group>*+.lg-pos::before,.lg-group>*+.lg-trade::before,.lg-group>*+.lg-brow::before{content:"";position:absolute;top:0;left:68px;right:0;height:.5px;background:var(--sep)}
.lg-row:active,.lg-pos:active{background:var(--hover)}
.lg-mark{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font:800 10.5px var(--body);letter-spacing:.02em;flex:none;background:var(--panel);color:var(--ink)}
.lg-mark.lg-crypto{background:var(--accent-soft);color:var(--accent)}
.lg-nm{display:flex;flex-direction:column;min-width:0;flex:1}
.lg-nm b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lg-nm small{font-size:12.5px;color:var(--muted)}
.lg-held{font-style:normal;color:var(--accent);font-weight:700}
.lg-q{display:flex;flex-direction:column;align-items:flex-end;flex:none}
.lg-q b{font:700 15px var(--body)}
.lg-q small{font:600 12.5px var(--body);color:var(--muted)}
.lg-q .up,.lg-chg.up{color:var(--up)}.lg-q .down,.lg-chg.down{color:var(--down)}
.lg-q b.up{color:var(--up)}.lg-q b.down{color:var(--down)}
.lg-chg{font:600 12.5px var(--body);color:var(--muted)}
@keyframes flashUp{0%{background:color-mix(in srgb,var(--up) 30%,transparent)}100%{background:transparent}}
@keyframes flashDown{0%{background:color-mix(in srgb,var(--down) 30%,transparent)}100%{background:transparent}}
.flash-up{animation:flashUp 1.2s ease-out;border-radius:6px}
.flash-down{animation:flashDown 1.2s ease-out;border-radius:6px}
.lg-side{font:800 11px var(--body);border-radius:8px;padding:4px 7px;flex:none}
.lg-side.buy{background:color-mix(in srgb,var(--up) 14%,transparent);color:var(--up)}
.lg-side.sell{background:color-mix(in srgb,var(--down) 14%,transparent);color:var(--down)}
.lg-medal{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:800 12px var(--body);font-style:normal;background:var(--panel);color:var(--muted);flex:none}
.lg-medal.m1{background:linear-gradient(135deg,#F3E3B6,#C9A24E);color:#3a2a06}
.lg-medal.m2{background:linear-gradient(135deg,#F1F1F1,#A9A9A9);color:#2b2b2b}
.lg-medal.m3{background:linear-gradient(135deg,#F2CFAE,#B5784A);color:#3a1f0a}
.lg-brow.me{background:var(--accent-soft)}
.lg-brow .who-btn{display:flex;align-items:center;gap:10px;flex-direction:row}
.lg-brow .who-btn span{display:flex;flex-direction:column;min-width:0}
.lg-brow .who-btn small{font-size:12px;color:var(--muted)}
.lg-champs{margin-top:14px;border-radius:22px;padding:12px 16px;background:var(--bg);color:var(--ink);box-shadow:var(--edge)}
.lg-champs small{font-size:12px;font-weight:700;color:var(--muted)}
.lg-champs>div{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.lg-champs .who-btn{display:flex;align-items:center;gap:10px;color:inherit;font-weight:600}
.lg-champs em{margin-left:auto;font-style:normal;color:var(--muted)}
.lg-empty{text-align:center;padding:28px 20px;color:var(--muted)}
.lg-empty b{display:block;color:var(--ink);font-size:16px;margin-bottom:4px}
.lg-empty p{margin:0 auto 14px;max-width:30ch;font-size:14px}
.lg-load{padding:30px;text-align:center;color:var(--muted)}
.lg-disc{font-size:12px;color:var(--muted);text-align:center;margin:16px 10px 0;line-height:1.45}

/* market sheet */
.lg-sheet{text-align:left}
.lg-mk-head{display:flex;align-items:center;gap:12px}
.lg-mk-head .lg-nm b{font-size:17px}
.lg-mk-px{display:flex;align-items:baseline;gap:10px;margin:12px 2px 0}
.lg-mk-px b{font:800 34px/1 var(--body);letter-spacing:-.04em}
.lg-mk-px small{font-size:12px;color:var(--muted)}
.lg-ranges{display:flex;gap:6px;margin-top:12px}
.lg-ranges button{border:0;background:var(--panel);color:var(--muted);font:700 12.5px var(--body);border-radius:999px;padding:6px 13px}
.lg-ranges button[aria-selected="true"]{background:var(--ink);color:var(--on-ink)}
.lg-chart{position:relative;height:250px;margin:10px -4px 0;touch-action:pan-y}
.lg-chart canvas{width:100%;height:100%;display:block}
.lg-chart-msg{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:14px;text-align:center;padding:20px}
.lg-chart-msg[hidden]{display:none}
.lg-tip{position:absolute;left:6px;top:4px;right:62px;font:600 11.5px var(--body);color:var(--muted);background:color-mix(in srgb,var(--bg) 88%,transparent);border-radius:8px;padding:4px 7px;pointer-events:none}
.lg-tip b{color:var(--ink);margin-right:4px}
.lg-tip .up{color:var(--up)}.lg-tip .down{color:var(--down)}
.lg-posbox{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
.lg-posbox div{background:var(--panel);border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:2px;min-width:0}
.lg-posbox small{font-size:11.5px;color:var(--muted)}
.lg-posbox b{font:700 15px var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lg-posbox b.up,.lg-posbox em.up{color:var(--up)}.lg-posbox b.down,.lg-posbox em.down{color:var(--down)}
.lg-posbox em{font-style:normal;font-size:12px;font-weight:700}
.lg-nopos{font-size:13.5px;color:var(--muted);margin:12px 2px 0}
.lg-act{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.lg-act button{border:0;border-radius:16px;padding:15px 0;font:800 16px var(--body);color:#fff}
.lg-buy{background:var(--up)}
.lg-sell{background:var(--down)}
.lg-act button:disabled{opacity:.35}
.lg-act button.on{box-shadow:0 0 0 3px var(--bg),0 0 0 5px currentColor}
.lg-act .lg-buy.on{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--up)}
.lg-act .lg-sell.on{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--down)}
.lg-form{margin-top:14px}
.lg-amt{display:flex;align-items:center;gap:6px;border:1.5px solid var(--line);border-radius:16px;padding:2px 14px;background:var(--bg)}
.lg-form.buy .lg-amt{border-color:color-mix(in srgb,var(--up) 50%,var(--line))}
.lg-form.sell .lg-amt{border-color:color-mix(in srgb,var(--down) 50%,var(--line))}
.lg-amt span{font:700 26px var(--body);color:var(--muted)}
.lg-amt .in{border:0!important;background:none!important;font:700 26px var(--body)!important;padding:10px 0!important;width:100%;box-shadow:none!important}
.lg-quick{display:flex;gap:6px;margin-top:8px}
.lg-quick button{flex:1;border:0;background:var(--panel);color:var(--ink);border-radius:12px;padding:9px 0;font:700 13px var(--body)}
.lg-est{font-size:13px;color:var(--muted);margin:8px 2px 0}
.lg-go{margin-top:10px}
.lg-go.buy{background:var(--up)!important;color:#fff!important}
.lg-go.sell{background:var(--down)!important;color:#fff!important}