/* Qwanta — trading terminal for DummyFX. TradingView-matched palette: blue = brand/action, green = BUY/profit, red = SELL/loss. */
:root{
  --bg:#ffffff; --bg2:#f8f9fd; --panel:#ffffff; --panel2:#f8f9fd; --panel3:#f0f3fa; --line:#e0e3eb; --line2:#f0f3fa;
  --ink:#131722; --ink2:#434651; --mute:#787b86; --acc:#2962ff; --acc2:#1e53e5; --accsoft:#e3effd; --accink:#ffffff;
  --buy:#089981; --buysoft:#e5f5f2; --sell:#f23645; --sellsoft:#fde9eb; --warn:#f57c00; --warnsoft:#fff3e0; --info:#2962ff; --ma:#ff9800;
  --grid:rgba(42,46,57,.07); --shadow:0 1px 2px rgba(19,23,34,.06),0 12px 32px -16px rgba(19,23,34,.22); --scrim:rgba(19,23,34,.4);
  --display:-apple-system,BlinkMacSystemFont,"Segoe UI","Trebuchet MS",Roboto,Ubuntu,"PingFang SC","Hiragino Sans","Apple SD Gothic Neo","Noto Sans CJK SC","Noto Sans Thai",sans-serif;
  --body:-apple-system,BlinkMacSystemFont,"Segoe UI","Trebuchet MS",Roboto,Ubuntu,"PingFang SC","Hiragino Sans","Apple SD Gothic Neo","Noto Sans CJK SC","Noto Sans Thai",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --r:10px; --ease:cubic-bezier(.2,.8,.2,1); color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#131722; --bg2:#171b26; --panel:#1e222d; --panel2:#1a1e29; --panel3:#2a2e39; --line:#2a2e39; --line2:#232733;
  --ink:#d1d4dc; --ink2:#b2b5be; --mute:#787b86; --acc:#2962ff; --acc2:#4f7dff; --accsoft:#1c2645; --accink:#ffffff;
  --buy:#089981; --buysoft:#0d2e2a; --sell:#f23645; --sellsoft:#3a1a20; --warn:#ff9800; --warnsoft:#33260f; --info:#5b8cff; --ma:#ff9800;
  --grid:rgba(120,123,134,.12); --shadow:0 18px 44px -20px rgba(0,0,0,.75); --scrim:rgba(0,0,0,.55); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#131722; --bg2:#171b26; --panel:#1e222d; --panel2:#1a1e29; --panel3:#2a2e39; --line:#2a2e39; --line2:#232733;
  --ink:#d1d4dc; --ink2:#b2b5be; --mute:#787b86; --acc:#2962ff; --acc2:#4f7dff; --accsoft:#1c2645; --accink:#ffffff;
  --buy:#089981; --buysoft:#0d2e2a; --sell:#f23645; --sellsoft:#3a1a20; --warn:#ff9800; --warnsoft:#33260f; --info:#5b8cff; --ma:#ff9800;
  --grid:rgba(120,123,134,.12); --shadow:0 18px 44px -20px rgba(0,0,0,.75); --scrim:rgba(0,0,0,.55); color-scheme:dark}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font:14px/1.45 var(--body);-webkit-font-smoothing:antialiased;overflow:hidden;user-select:none}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
input{user-select:text}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.num,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.up{color:var(--buy)} .dn{color:var(--sell)} .mut{color:var(--mute)}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ---------- screens ---------- */
.scr{position:fixed;inset:0;display:flex;opacity:0;pointer-events:none;transition:opacity .45s var(--ease)}
.scr.on{opacity:1;pointer-events:auto}

/* splash */
#scrSplash{align-items:center;justify-content:center;flex-direction:column;gap:18px;background:var(--bg)}
.logo-mark{width:84px;height:84px}
.logo-mark .lm-bg{fill:var(--panel);stroke:var(--line)}
.logo-mark .lm-7{fill:none;stroke:url(#m7g);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:140;stroke-dashoffset:140}
.logo-mark .lm-dot{fill:var(--buy);opacity:0}
#scrSplash.on .lm-7{animation:draw 1s .15s var(--ease) forwards}
#scrSplash.on .lm-dot{animation:pop .4s 1s var(--ease) forwards}
.logo-anim{animation:pop .5s var(--ease)}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{0%{opacity:0;transform:scale(.2)}70%{opacity:1;transform:scale(1.3)}100%{opacity:1;transform:scale(1)}}
.wordmark{font:700 30px/1 var(--display);letter-spacing:-.025em}
.wordmark b{color:var(--acc)}
.splash-sub{color:var(--mute);font-size:13px;letter-spacing:.08em;text-transform:uppercase;opacity:0;animation:fadeup .6s .7s var(--ease) forwards}
.splash-bar{width:140px;height:3px;border-radius:3px;background:var(--line);overflow:hidden}
.splash-bar i{display:block;height:100%;width:40%;background:var(--acc);border-radius:3px;animation:slide 1.1s ease-in-out infinite}
@keyframes slide{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}
@keyframes fadeup{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- onboarding ---------- */
#scrOnb{background:var(--bg)}
.onb-art{flex:1.1;position:relative;overflow:hidden;background:var(--panel2);border-right:1px solid var(--line)}
.onb-art canvas{position:absolute;inset:0;width:100%;height:100%}
.onb-art .art-copy{position:absolute;left:48px;right:48px;bottom:48px;max-width:520px}
.art-kicker{font:600 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
.art-title{font:800 46px/1.02 var(--display);letter-spacing:-.025em;margin:14px 0 14px}
.art-text{color:var(--ink2);font-size:16px;max-width:440px}
.art-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:6px 11px;font-size:12px;color:var(--ink2);white-space:nowrap}
.chip b{color:var(--ink);font-family:var(--mono);font-weight:600}
.art-brand{position:absolute;left:48px;top:36px;display:flex;align-items:center;gap:10px}
.art-brand .logo-mark{width:34px;height:34px}
.art-brand .wordmark{font-size:20px}
.art-ticker{position:absolute;right:28px;top:30px;display:grid;gap:6px;justify-items:end}
.tick-pill{display:flex;gap:10px;align-items:center;background:color-mix(in srgb,var(--panel) 80%,transparent);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:12px}
.tick-pill .num{font-weight:600;transition:color .3s}

.onb-side{flex:1;display:flex;flex-direction:column;min-width:0;position:relative}
.onb-top{display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:18px 22px}
.onb-mid{flex:1;display:flex;align-items:center;justify-content:center;padding:12px 24px 32px;overflow:auto}
.card{width:100%;max-width:420px}
.steps{display:flex;gap:6px;margin-bottom:26px}
.steps i{flex:1;height:4px;border-radius:4px;background:var(--line);position:relative;overflow:hidden}
.steps i::after{content:"";position:absolute;inset:0;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.steps i.done::after,.steps i.cur::after{transform:scaleX(1)}
.steps i.cur::after{opacity:.55}
.step-lbl{font:600 12px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:10px}
.h1{font:800 32px/1.08 var(--display);letter-spacing:-.02em;margin:0 0 10px}
.lead{color:var(--ink2);margin:0 0 24px;font-size:15px}
.pane{animation:paneIn .45s var(--ease)}
@keyframes paneIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:50px;border-radius:12px;font-weight:600;font-size:15px;position:relative;overflow:hidden;transition:transform .15s var(--ease),background .2s,box-shadow .2s,opacity .2s}
.btn:active{transform:scale(.98)}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn-pri{background:var(--acc);color:var(--accink);box-shadow:0 10px 24px -12px color-mix(in srgb,var(--acc) 80%,transparent)}
.btn-pri:hover{background:var(--acc2)}
.btn-sec{background:var(--panel);border:1px solid var(--line);color:var(--ink)}
.btn-sec:hover{background:var(--panel3)}
.btn-ghost{color:var(--mute);height:40px;font-weight:500}
.btn-ghost:hover{color:var(--ink)}
.btn .ic{width:18px;height:18px}
.stack{display:grid;gap:10px}
.fine{color:var(--mute);font-size:12px;margin-top:18px;display:flex;gap:8px;align-items:flex-start}
.fine svg{flex:none;margin-top:1px}
.ripple{position:absolute;border-radius:50%;transform:scale(0);background:currentColor;opacity:.25;animation:rip .6s ease-out;pointer-events:none}
@keyframes rip{to{transform:scale(4);opacity:0}}

.wlist{display:grid;gap:8px}
.witem{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--panel);text-align:left;transition:border-color .2s,transform .15s,background .2s}
.witem:hover{border-color:var(--acc);transform:translateY(-1px)}
.witem .wi{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font:800 15px/1 var(--display);color:#fff;flex:none}
.witem .wn{font-weight:600;flex:1}
.witem .wt{font-size:11px;color:var(--buy);background:var(--buysoft);border-radius:999px;padding:3px 8px;font-weight:600}
.witem .wt.wc{color:var(--info);background:color-mix(in srgb,var(--info) 14%,transparent)}
.wsec{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin:14px 2px 4px;font-weight:600}

.wait{display:flex;flex-direction:column;align-items:center;text-align:center;padding:18px 0}
.rings{position:relative;width:96px;height:96px;margin-bottom:20px}
.rings i{position:absolute;inset:0;border-radius:50%;border:2px solid var(--acc);opacity:0;animation:ring 1.8s ease-out infinite}
.rings i:nth-child(2){animation-delay:.6s}.rings i:nth-child(3){animation-delay:1.2s}
.rings .wi{position:absolute;inset:22px;border-radius:14px;display:grid;place-items:center;font:800 20px/1 var(--display);color:#fff}
@keyframes ring{0%{transform:scale(.6);opacity:.8}100%{transform:scale(1.35);opacity:0}}
.okmark{width:96px;height:96px;margin-bottom:18px}
.okmark circle{fill:var(--buysoft);stroke:var(--buy);stroke-width:2;transform-origin:center;animation:pop .45s var(--ease)}
.okmark path{fill:none;stroke:var(--buy);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;animation:draw .45s .25s var(--ease) forwards}

.msgbox{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:14px;font:12px/1.6 var(--mono);color:var(--ink2);white-space:pre-wrap;margin-bottom:16px;max-height:170px;overflow:auto}
.freechips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.freechips span{font-size:12px;border-radius:999px;padding:4px 10px;background:var(--buysoft);color:var(--buy);font-weight:600}

.field{position:relative;margin-bottom:12px}
.field input{width:100%;height:54px;border-radius:12px;border:1.5px solid var(--line);background:var(--panel);padding:0 48px 0 16px;font:600 18px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;transition:border-color .2s,box-shadow .2s}
.field input:focus{outline:0;border-color:var(--acc);box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 18%,transparent)}
.field .st{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:22px;height:22px}
.field.ok input{border-color:var(--buy)} .field.bad input{border-color:var(--sell);animation:shake .35s}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.spin{width:20px;height:20px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--acc);animation:rot .7s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.refres{min-height:46px;font-size:13px;color:var(--mute);margin-bottom:8px}
.refres .inv{display:flex;align-items:center;gap:10px;background:var(--buysoft);color:var(--buy);border-radius:10px;padding:10px 12px;font-weight:600;animation:fadeup .35s var(--ease)}
.refres .bad{color:var(--sell)}

.depo-bal{display:flex;justify-content:space-between;align-items:center;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:12px;font-size:13px;color:var(--ink2)}
.depo-bal b{font-family:var(--mono);color:var(--ink)}
.amt{position:relative;margin-bottom:10px}
.amt input{width:100%;height:64px;border-radius:12px;border:1.5px solid var(--line);background:var(--panel);padding:0 80px 0 16px;font:600 26px/1 var(--mono)}
.amt input:focus{outline:0;border-color:var(--acc);box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 18%,transparent)}
.amt span{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-weight:700;color:var(--mute)}
.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:16px}
.quick button{height:36px;border-radius:9px;border:1px solid var(--line);background:var(--panel);font:600 13px/1 var(--mono);transition:all .15s}
.quick button:hover,.quick button.on{border-color:var(--acc);color:var(--acc)}
.txsteps{display:grid;gap:8px;margin:4px 0 16px}
.txs{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--panel);font-size:13px;transition:all .3s}
.txs .n{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--panel3);font:700 12px/1 var(--mono);flex:none}
.txs.run{border-color:var(--acc)} .txs.run .n{background:var(--accsoft);color:var(--acc)}
.txs.ok{border-color:color-mix(in srgb,var(--buy) 50%,var(--line))} .txs.ok .n{background:var(--buy);color:#fff}
.txs .r{margin-left:auto;font-size:12px;color:var(--mute)}

/* simulated wallet popup (mockup only) */
.wpop{position:fixed;z-index:90;right:24px;top:24px;width:340px;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden;animation:wpopIn .35s var(--ease)}
@keyframes wpopIn{from{opacity:0;transform:translateY(-12px) scale(.97)}to{opacity:1;transform:none}}
.wpop-h{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);font-weight:700}
.wpop-h .wi{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;color:#fff;font:800 12px/1 var(--display)}
.wpop-h small{margin-left:auto;font-weight:500;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);border:1px dashed var(--line);padding:2px 6px;border-radius:6px}
.wpop-b{padding:14px;font-size:13px;color:var(--ink2)}
.wpop-b .site{display:flex;align-items:center;gap:8px;margin-bottom:12px;color:var(--ink);font-weight:600}
.wpop-b .kv{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px dashed var(--line2)}
.wpop-b .kv b{font-family:var(--mono);color:var(--ink)}
.wpop-f{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 14px 14px}
.wpop-f .btn{height:42px;font-size:14px}

/* top-right small controls */
.mini{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border-radius:9px;border:1px solid var(--line);background:var(--panel);font-size:12px;color:var(--ink2);transition:border-color .2s}
.mini:hover{border-color:var(--acc);color:var(--ink)}
.mini svg{width:15px;height:15px}
.menu{position:fixed;z-index:95;min-width:200px;max-height:70vh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px;animation:menuIn .18s var(--ease)}
@keyframes menuIn{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
.menu button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:8px;text-align:left;font-size:13px;color:var(--ink2)}
.menu button:hover{background:var(--panel3);color:var(--ink)}
.menu button.on{color:var(--acc);font-weight:600}
.menu button.on::after{content:"✓";margin-left:auto}
.menu hr{border:0;border-top:1px solid var(--line);margin:6px 4px}
.menu .mh{padding:8px 10px 4px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}

/* ---------- terminal (desktop) ---------- */
#scrTerm{flex-direction:column;background:var(--bg)}
.tbar{height:52px;flex:none;display:flex;align-items:center;gap:10px;padding:0 12px;border-bottom:1px solid var(--line);background:var(--panel)}
.tbar .brand{display:flex;align-items:center;gap:8px;padding-right:10px;border-right:1px solid var(--line);height:32px}
.tbar .brand .logo-mark{width:26px;height:26px}
.tbar .brand .wordmark{font-size:17px}
.acct{display:flex;align-items:center;gap:8px;height:34px;padding:0 10px 0 6px;border-radius:9px;border:1px solid var(--line);background:var(--panel2)}
.acct:hover{border-color:var(--acc)}
.badge{font:700 10px/1 var(--body);letter-spacing:.08em;padding:4px 6px;border-radius:5px;text-transform:uppercase}
.badge.live{background:var(--buysoft);color:var(--buy)} .badge.demo{background:var(--warnsoft);color:var(--warn)}
.acct .addr{font:600 12px/1 var(--mono)}
.kpis{display:flex;gap:18px;margin-left:8px;min-width:0;overflow:hidden}
.kpi{display:flex;flex-direction:column;line-height:1.15;white-space:nowrap}
.kpi small{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.kpi b{font:600 13px/1.3 var(--mono)}
.sp{flex:1}
.conn{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 10px;border-radius:999px;font:600 12px/1 var(--mono);background:var(--panel2);border:1px solid var(--line);white-space:nowrap}
.conn i{width:8px;height:8px;border-radius:50%;background:var(--buy);box-shadow:0 0 0 0 var(--buy);animation:beat 2s infinite}
.conn.slow i{background:var(--warn);animation:none} .conn.slow{color:var(--warn)}
.conn.off i{background:var(--sell);animation:none} .conn.off{color:var(--sell)}
@keyframes beat{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--buy) 60%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.ibtn{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;color:var(--ink2);transition:background .15s,color .15s}
.ibtn:hover{background:var(--panel3);color:var(--ink)}
.ibtn svg{width:18px;height:18px}
.dep-btn{height:34px;padding:0 14px;border-radius:9px;background:var(--acc);color:var(--accink);font-weight:700;font-size:13px;display:inline-flex;align-items:center;gap:6px}
.dep-btn:hover{background:var(--acc2)}

.tbody{flex:1;min-height:0;display:grid;grid-template-columns:250px 44px 1fr 300px;grid-template-rows:1fr 230px}
.mw{grid-row:1 / 3;border-right:1px solid var(--line);background:var(--panel);display:flex;flex-direction:column;min-height:0}
.ph{display:flex;align-items:center;gap:8px;height:38px;padding:0 12px;border-bottom:1px solid var(--line);font:600 11px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);flex:none}
.ph .sp{flex:1}
.mw-search{margin:8px;position:relative}
.mw-search input{width:100%;height:32px;border-radius:8px;border:1px solid var(--line);background:var(--panel2);padding:0 10px 0 30px;font-size:13px}
.mw-search svg{position:absolute;left:9px;top:8px;width:15px;height:15px;color:var(--mute)}
.mw-list{flex:1;overflow:auto}
.mrow{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:2px 8px;padding:9px 12px;border-left:3px solid transparent;cursor:pointer;transition:background .15s}
.mrow:hover{background:var(--panel2)}
.mrow.on{background:var(--panel3);border-left-color:var(--acc)}
.mrow .s{font-weight:700;font-size:13px}
.mrow .d{font-size:11px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mrow .p{font:600 14px/1.2 var(--mono);text-align:right;border-radius:4px;padding:0 3px;transition:background .5s}
.mrow .c{font:500 11px/1.2 var(--mono);text-align:right}
.flash-up{animation:fu .7s} .flash-dn{animation:fd .7s}
@keyframes fu{0%{background:color-mix(in srgb,var(--buy) 35%,transparent)}100%{background:transparent}}
@keyframes fd{0%{background:color-mix(in srgb,var(--sell) 35%,transparent)}100%{background:transparent}}
.mrow canvas{grid-column:1 / 3;width:100%;height:22px;margin-top:2px}
.mw-foot{border-top:1px solid var(--line);padding:10px 12px;font-size:11px;color:var(--mute)}
.mw-foot b{color:var(--ink);font-family:var(--mono)}
.mw-soon{padding:6px 12px 12px;font-size:11px;color:var(--mute)}
.mw-soon span{display:inline-block;margin:3px 4px 0 0;padding:2px 6px;border:1px dashed var(--line);border-radius:5px;font-family:var(--mono)}

.tools{grid-row:1 / 3;border-right:1px solid var(--line);background:var(--panel);display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0}
.tools .ibtn.on{background:var(--accsoft);color:var(--acc)}
.tools hr{width:24px;border:0;border-top:1px solid var(--line);margin:6px 0}

.chartwrap{grid-column:3;grid-row:1;position:relative;min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--bg)}
.chbar{height:40px;flex:none;display:flex;white-space:nowrap;overflow:hidden;align-items:center;gap:4px;padding:0 10px;border-bottom:1px solid var(--line);background:var(--panel)}
.chbar .symt{font:700 14px/1 var(--display);margin-right:8px;display:flex;align-items:center;gap:8px;flex:none}
.chbar .hint{overflow:hidden;text-overflow:ellipsis;min-width:0}
@media (max-width:1280px){.chbar .symt .mut{display:none}}
.seg{display:flex;gap:2px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:2px}
.seg button{height:26px;min-width:34px;padding:0 8px;border-radius:6px;font:600 12px/1 var(--mono);color:var(--mute);transition:all .15s}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.chbar .vsep{width:1px;height:20px;background:var(--line);margin:0 6px}
.chart{position:relative;flex:1;min-height:0;overflow:hidden;cursor:crosshair}
.chart canvas{position:absolute;inset:0;width:100%;height:100%}
.legend{position:absolute;left:12px;top:10px;font:12px/1.5 var(--mono);color:var(--ink2);pointer-events:none;z-index:2}
.legend b{font-family:var(--display);font-size:15px;color:var(--ink);margin-right:8px}
.legend span{margin-right:8px}
.chart-skel{position:absolute;inset:0;display:grid;place-items:center;color:var(--mute);font-size:13px;background:var(--bg);z-index:3;transition:opacity .4s}
.chart-skel .bars{display:flex;gap:6px;align-items:flex-end;height:60px;margin-bottom:12px}
.chart-skel .bars i{width:8px;border-radius:2px;background:var(--line);animation:skel 1.2s ease-in-out infinite}
@keyframes skel{50%{opacity:.35}}
.stale{position:absolute;left:50%;top:14px;transform:translateX(-50%);z-index:4;display:flex;align-items:center;gap:10px;max-width:calc(100% - 24px);text-align:center;background:var(--warnsoft);color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 40%,transparent);padding:8px 14px;border-radius:14px;font-size:12px;font-weight:600;animation:fadeup .3s var(--ease);width:max-content}
.stale.off{background:var(--sellsoft);color:var(--sell);border-color:color-mix(in srgb,var(--sell) 40%,transparent)}

/* order panel */
.op{grid-row:1 / 3;grid-column:4;border-left:1px solid var(--line);background:var(--panel);display:flex;flex-direction:column;min-height:0;overflow:auto}
.op-sec{padding:12px 14px;border-bottom:1px solid var(--line)}
.op-sym{display:flex;align-items:baseline;justify-content:space-between}
.op-sym .s{font:800 18px/1 var(--display)}
.op-sym .ch{font:600 12px/1 var(--mono)}
.op-px{font:600 30px/1.1 var(--mono);margin:8px 0 2px;letter-spacing:-.02em;transition:color .25s}
.op-px small{font-size:.62em}
.op-note{font-size:11px;color:var(--mute)}
.lbl{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin:0 0 6px;font-weight:600}
.stepper{display:grid;grid-template-columns:38px 1fr 38px;height:40px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel2)}
.stepper button{font-size:18px;color:var(--ink2)} .stepper button:hover{background:var(--panel3);color:var(--ink)}
.stepper input{border:0;background:transparent;text-align:center;font:600 16px/1 var(--mono);min-width:0}
.stepper input:focus{outline:0}
.presets{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:6px}
.presets button{height:26px;border-radius:7px;border:1px solid var(--line);font:600 11px/1 var(--mono);color:var(--mute)}
.presets button:hover,.presets button.on{border-color:var(--acc);color:var(--acc)}
.kv{display:flex;justify-content:space-between;font-size:12px;padding:4px 0;color:var(--ink2)}
.kv b{font-family:var(--mono);color:var(--ink);font-weight:600}
.kv .tag{font:700 11px/1 var(--mono);background:var(--accsoft);color:var(--acc);padding:3px 6px;border-radius:5px}
.tpsl{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.tg{border:1px solid var(--line);border-radius:10px;padding:7px 9px;background:var(--panel2);transition:border-color .2s}
.tg.on{border-color:var(--acc)}
.tg label{display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:700;color:var(--mute);cursor:pointer}
.tg input[type=text]{width:100%;border:0;background:transparent;font:600 13px/1.6 var(--mono);padding:0}
.tg input[type=text]:focus{outline:0}
.tg input[type=text]:disabled{opacity:.35}
.sw{position:relative;width:30px;height:18px;flex:none}
.sw input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.sw i{position:absolute;inset:0;border-radius:18px;background:var(--line);transition:background .2s}
.sw i::after{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .2s var(--ease);box-shadow:0 1px 2px rgba(0,0,0,.25)}
.sw input:checked+i{background:var(--acc)} .sw input:checked+i::after{transform:translateX(12px)}
.bs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bsb{position:relative;overflow:hidden;height:62px;border-radius:12px;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transition:transform .12s,filter .2s,opacity .2s}
.bsb:hover{filter:brightness(1.08)} .bsb:active{transform:scale(.97)}
.bsb.sell{background:var(--sell)} .bsb.buy{background:var(--buy)}
.bsb b{font:800 15px/1 var(--display);letter-spacing:.06em}
.bsb span{font:600 13px/1 var(--mono);opacity:.92}
.bsb.busy::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);animation:shim 1s linear infinite}
@keyframes shim{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.locked .bsb{opacity:.35;pointer-events:none;filter:grayscale(.6)}
.costs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px}
.costs div{background:var(--panel2);border:1px solid var(--line2);border-radius:8px;padding:6px 4px;text-align:center;font-size:10px;color:var(--mute);letter-spacing:.04em}
.costs b{display:block;font:700 13px/1.3 var(--mono);color:var(--buy)}
.feeline{font-size:11px;color:var(--mute);margin-top:8px;line-height:1.5}
.feeline b{color:var(--acc)}
.pool{background:var(--panel)}
.pool .big{font:700 22px/1.1 var(--mono);margin:4px 0}
.pool canvas{width:100%;height:44px;display:block;margin:6px 0}
.oc{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--ink2);padding:2px 0}
.oc .sw{margin-left:8px}

/* bottom panel */
.bp{grid-column:3;grid-row:2;border-top:1px solid var(--line);background:var(--panel);display:flex;flex-direction:column;min-height:0}
.tabs{display:flex;align-items:center;gap:2px;height:38px;padding:0 8px;border-bottom:1px solid var(--line);flex:none;position:relative}
.tabs button{height:38px;padding:0 12px;font-size:13px;font-weight:600;color:var(--mute);position:relative}
.tabs button.on{color:var(--ink)}
.tabs button .cnt{font:700 10px/1 var(--mono);background:var(--accsoft);color:var(--acc);border-radius:999px;padding:2px 6px;margin-left:6px}
.tabs .ink{position:absolute;bottom:-1px;height:2px;background:var(--acc);border-radius:2px;transition:left .3s var(--ease),width .3s var(--ease)}
.bp-body{flex:1;overflow:auto}
table.t{width:100%;border-collapse:collapse;font-size:12px}
.t th{position:sticky;top:0;background:var(--panel);text-align:right;font-weight:600;color:var(--mute);font-size:11px;padding:7px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.t td{text-align:right;padding:7px 10px;border-bottom:1px solid var(--line2);font-family:var(--mono);white-space:nowrap}
.t th:first-child,.t td:first-child,.t th:nth-child(2),.t td:nth-child(2){text-align:left}
.t tr.new{animation:rowIn .55s var(--ease)}
.t tr.out{animation:rowOut .4s var(--ease) forwards}
@keyframes rowIn{from{opacity:0;transform:translateY(-6px);background:var(--accsoft)}to{opacity:1;transform:none}}
@keyframes rowOut{to{opacity:0;transform:translateX(20px)}}
.t .x{width:22px;height:22px;border-radius:6px;display:inline-grid;place-items:center;color:var(--mute);border:1px solid var(--line)}
.t .x:hover{color:var(--sell);border-color:var(--sell)}
.side-b{color:var(--buy);font-weight:700}.side-s{color:var(--sell);font-weight:700}
.pend{color:var(--warn)}
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;height:100%;min-height:120px;color:var(--mute);font-size:13px;text-align:center;padding:16px}
.empty svg{width:34px;height:34px;opacity:.5}
.acc-foot{display:flex;gap:18px;padding:6px 12px;border-top:1px solid var(--line);font-size:11px;color:var(--mute);flex:none;white-space:nowrap;overflow:hidden}
.acc-foot b{color:var(--ink);font-family:var(--mono);margin-left:4px}
.jrow{display:flex;gap:12px;padding:5px 12px;font:12px/1.5 var(--mono);border-bottom:1px solid var(--line2);color:var(--ink2)}
.jrow span:first-child{color:var(--mute);flex:none}
.jrow span:nth-child(2){color:var(--acc);flex:none;width:70px}

.sbar{height:26px;flex:none;display:flex;align-items:center;gap:16px;padding:0 12px;border-top:1px solid var(--line);background:var(--panel);font:11px/1 var(--mono);color:var(--mute);white-space:nowrap;overflow:hidden}
.sbar b{color:var(--ink2);font-weight:600}

/* toasts */
#toasts{position:fixed;right:16px;bottom:40px;display:grid;gap:8px;z-index:80;width:min(330px,calc(100% - 32px))}
.toast{display:flex;gap:10px;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--acc);border-radius:12px;padding:10px 12px;box-shadow:var(--shadow);font-size:13px;animation:toastIn .4s var(--ease)}
.toast.ok{border-left-color:var(--buy)} .toast.bad{border-left-color:var(--sell)} .toast.warn{border-left-color:var(--warn)}
.toast b{display:block;font-size:13px;margin-bottom:1px}
.toast p{margin:0;color:var(--ink2);font-size:12px}
.toast.bye{animation:toastOut .3s var(--ease) forwards}
@keyframes toastIn{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateX(30px)}}

/* modal & sheet */
.scrim{position:fixed;inset:0;background:var(--scrim);z-index:70;display:flex;align-items:center;justify-content:center;padding:16px;animation:fade .25s}
@keyframes fade{from{opacity:0}}
.modal{width:min(440px,100%);max-height:calc(100% - 32px);overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:22px;animation:modalIn .35s var(--ease)}
@keyframes modalIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.modal-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.modal-h h3{margin:0;font:800 20px/1.1 var(--display)}
.qr{width:180px;height:180px;margin:6px auto 14px;display:block;border-radius:12px;background:#fff;padding:10px}

/* coach marks */
.coach{position:fixed;inset:0;z-index:85;pointer-events:none}
.coach .hole{position:fixed;border-radius:12px;box-shadow:0 0 0 9999px var(--scrim);transition:all .45s var(--ease);pointer-events:none}
.coach .tip{position:fixed;width:280px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow);pointer-events:auto;transition:all .45s var(--ease)}
.coach .tip b{display:block;font:800 16px/1.2 var(--display);margin-bottom:4px}
.coach .tip p{margin:0 0 12px;color:var(--ink2);font-size:13px}
.coach .tip .row{display:flex;align-items:center;justify-content:space-between}
.coach .tip .row small{color:var(--mute)}
.coach .tip .btn{height:36px;width:auto;padding:0 16px;font-size:13px}

/* demo banner */
.demo-ribbon{background:var(--warnsoft);color:var(--warn);font-size:12px;font-weight:600;text-align:center;padding:6px;flex:none}
.demo-ribbon button{text-decoration:underline;font-weight:700;margin-left:6px}

/* ---------- mobile ---------- */
body.mob .onb-art{display:none}
body.mob .onb-mid{align-items:flex-start;padding:8px 20px calc(24px + env(safe-area-inset-bottom,0px))}
body.mob .onb-top{padding:14px 16px;justify-content:space-between}
body.mob .h1{font-size:28px}
body.mob .wpop{left:12px;right:12px;width:auto;top:auto;bottom:12px;animation:sheetIn .35s var(--ease)}
.mob-hero{display:none}
body.mob .mob-hero{display:block;position:relative;height:200px;margin:0 -20px 18px;overflow:hidden}
body.mob .mob-hero canvas{position:absolute;inset:0;width:100%;height:100%}
.mob-brand{display:none;align-items:center;gap:8px}
body.mob .mob-brand{display:flex}
.mob-brand .logo-mark{width:28px;height:28px} .mob-brand .wordmark{font-size:18px}

#scrMob{flex-direction:column;background:var(--bg)}
.mh{height:52px;flex:none;display:flex;align-items:center;gap:10px;padding:0 14px;padding-top:env(safe-area-inset-top,0px);background:var(--panel);border-bottom:1px solid var(--line)}
.mh .ttl{font:800 18px/1 var(--display);flex:1;display:flex;align-items:center;gap:8px;min-width:0}
.mh .conn{height:26px;padding:0 8px;font-size:11px}
.mview{flex:1;min-height:0;overflow:auto;display:none;animation:paneIn .35s var(--ease)}
.mview.on{display:block}
#mvChart.on{display:flex;flex-direction:column;overflow:hidden}
.m-eq{margin:12px 14px;padding:16px;border-radius:16px;background:linear-gradient(135deg,var(--panel2),var(--panel));border:1px solid var(--line)}
.m-eq small{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.m-eq .big{font:700 30px/1.15 var(--mono);margin:4px 0 8px}
.m-eq .row{display:flex;gap:14px;font-size:12px;color:var(--mute)}
.m-eq .row b{color:var(--ink);font-family:var(--mono)}
.m-eq .acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.m-eq .acts .btn{height:42px;font-size:14px}
.mq{display:grid;grid-template-columns:1fr 90px auto;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line2);background:var(--panel)}
.mq:active{background:var(--panel3)}
.mq .s{font-weight:700} .mq .d{font-size:11px;color:var(--mute)}
.mq canvas{width:90px;height:30px}
.mq .p{text-align:right;font:600 15px/1.2 var(--mono);border-radius:4px;padding:0 3px}
.mq .c{display:block;text-align:right;font:600 11px/1.3 var(--mono);margin-top:3px}
.mq .c span{padding:2px 6px;border-radius:5px}
.msec{padding:16px 14px 6px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);font-weight:600}
.m-chbar{display:flex;gap:6px;padding:8px 10px;overflow-x:auto;flex:none;background:var(--panel);border-bottom:1px solid var(--line);scrollbar-width:none}
.m-chbar .seg{flex:none}
.m-chbar::-webkit-scrollbar{display:none}
#mvChart .chart{flex:1}
.m-trade{flex:none;display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;padding:10px 12px;background:var(--panel);border-top:1px solid var(--line)}
.m-trade .bsb{height:54px}
.m-vol{display:flex;flex-direction:column;align-items:center;font-size:10px;color:var(--mute);min-width:72px}
.m-vol b{font:700 15px/1.3 var(--mono);color:var(--ink)}
.mpos{margin:8px 12px;padding:12px 14px;border-radius:14px;background:var(--panel);border:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:4px 10px;animation:paneIn .4s var(--ease)}
.mpos .a{font-weight:700;display:flex;gap:8px;align-items:center}
.mpos .b{font-size:12px;color:var(--mute);font-family:var(--mono)}
.mpos .pl{font:700 17px/1.2 var(--mono);text-align:right}
.mpos .cl{grid-column:2;justify-self:end;font-size:12px;font-weight:700;color:var(--sell);border:1px solid color-mix(in srgb,var(--sell) 45%,transparent);border-radius:8px;padding:5px 10px}
.mtabs{flex:none;display:grid;grid-template-columns:repeat(5,1fr);height:62px;padding-bottom:env(safe-area-inset-bottom,0px);background:var(--panel);border-top:1px solid var(--line);position:relative}
.mtabs button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10px;font-weight:600;color:var(--mute);transition:color .2s;position:relative}
.mtabs button svg{width:22px;height:22px;transition:transform .25s var(--ease)}
.mtabs button.on{color:var(--acc)}
.mtabs button.on svg{transform:translateY(-2px) scale(1.08)}
.mtabs .dot{position:absolute;top:8px;right:calc(50% - 18px);min-width:16px;height:16px;border-radius:8px;background:var(--acc);color:var(--accink);font:700 10px/16px var(--mono);padding:0 4px}
.mtabs .bar{position:absolute;top:-1px;height:2px;width:20%;background:var(--acc);border-radius:2px;transition:left .35s var(--ease)}
.mlist button.mi{display:flex;align-items:center;gap:12px;width:100%;padding:14px;border-bottom:1px solid var(--line2);background:var(--panel);text-align:left}
.mlist .mi svg{width:20px;height:20px;color:var(--mute)}
.mlist .mi span{flex:1}
.mlist .mi small{color:var(--mute)}
.sheet-scrim{align-items:flex-end;padding:0}
.sheet{width:100%;background:var(--panel);border-radius:20px 20px 0 0;padding:8px 16px calc(18px + env(safe-area-inset-bottom,0px));box-shadow:var(--shadow);animation:sheetIn .38s var(--ease);max-height:92%;overflow:auto}
@keyframes sheetIn{from{transform:translateY(100%)}to{transform:none}}
.sheet .grab{width:40px;height:5px;border-radius:5px;background:var(--line);margin:4px auto 12px}
.sheet h3{margin:0 0 4px;font:800 20px/1.2 var(--display)}
.sheet .op-px{font-size:26px}
.sheet .sec{margin:14px 0}
body.mob #toasts{top:60px;bottom:auto;left:12px;right:12px;width:auto}
body.mob .coach .tip{width:auto;left:16px!important;right:16px}

/* email sign-up / verification */
.flbl{display:block;font-size:12px;font-weight:600;color:var(--ink2);margin:0 0 6px}
.tfield{position:relative;margin-bottom:12px}
.tfield input{width:100%;height:48px;border-radius:10px;border:1.5px solid var(--line);background:var(--panel);padding:0 44px 0 14px;font-size:15px;transition:border-color .2s,box-shadow .2s}
.tfield input:focus{outline:0;border-color:var(--acc);box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 16%,transparent)}
.tfield .eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:32px;height:32px;display:grid;place-items:center;color:var(--mute);border-radius:8px}
.tfield.shake{animation:shake .35s}
.pwmeter{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:-4px 0 4px}
.pwmeter i{height:4px;border-radius:4px;background:var(--line);transition:background .3s}
.pwmeter i.s1{background:var(--sell)}.pwmeter i.s2{background:var(--warn)}.pwmeter i.s3,.pwmeter i.s4{background:var(--buy)}
.pwhint{font-size:11px;color:var(--mute);min-height:16px;margin-bottom:6px}
.agree{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--ink2);margin:4px 0 6px;cursor:pointer}
.agree input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--acc);flex:none}
.otp{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:10px}
.otp input{width:100%;min-width:0;height:58px;border-radius:12px;border:1.5px solid var(--line);background:var(--panel);text-align:center;font:600 24px/1 var(--mono);transition:border-color .2s,transform .15s}
.otp input:focus{outline:0;border-color:var(--acc);box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 16%,transparent);transform:translateY(-2px)}
.acctcard{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);margin-bottom:16px}
.acctcard b{display:block;font-size:14px}.acctcard small{color:var(--buy);font-size:12px;font-weight:600}
.okdot{width:28px;height:28px;border-radius:50%;background:var(--buy);color:#fff;display:grid;place-items:center;font-weight:800;flex:none}

/* drawing kit */
.dki{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.tools{overflow-y:auto;scrollbar-width:none}
.tools .ibtn{position:relative;flex:none}
.tools .ibtn .car{position:absolute;right:3px;bottom:3px;width:0;height:0;border-left:4px solid transparent;border-bottom:4px solid var(--mute);opacity:.8}
.tools .ibtn:hover .car{border-bottom-color:var(--acc)}
.dkfly{position:fixed;z-index:96;width:260px;max-height:72vh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:6px;animation:menuIn .16s var(--ease)}
.dkf-h{padding:8px 10px 4px;font-weight:700;font-size:13px}
.dkf-sec{padding:10px 10px 4px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);font-weight:600}
.dkf-it{display:flex;align-items:center;gap:10px;width:100%;padding:7px 10px;border-radius:7px;font-size:13px;color:var(--ink2);text-align:left}
.dkf-it:hover{background:var(--panel3);color:var(--ink)}
.dkf-it.on{background:var(--accsoft);color:var(--acc)}
.dkf-it span{flex:1}
.dkf-it kbd{font:600 10px/1 var(--mono);color:var(--mute);border:1px solid var(--line);border-radius:4px;padding:2px 5px}
.dkhint,.dksel{position:absolute;left:50%;transform:translateX(-50%);z-index:5;display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:10px;padding:5px 6px 5px 10px;font-size:12px;color:var(--ink2);white-space:nowrap;animation:fadeup .25s var(--ease)}
.dkhint{bottom:12px}.dksel{top:44px}
.dkhint b,.dksel b{color:var(--ink)}
.dkhint button,.dksel button{height:26px;min-width:26px;padding:0 8px;border-radius:7px;color:var(--ink2);display:grid;place-items:center;font-size:12px;font-weight:600}
.dkhint button:hover,.dksel button:hover{background:var(--panel3);color:var(--ink)}
.dkhint [data-x]{border:1px solid var(--line)}
.dkic{display:grid;place-items:center;color:var(--acc)}
.dksel .sw8{width:18px;height:18px;min-width:18px;padding:0;border-radius:50%;border:2px solid var(--panel);box-shadow:0 0 0 1px var(--line)}
.dksel [data-del]:hover{color:var(--sell)}
.dks-g{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);font-weight:600;margin:14px 0 6px}
.dks-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.dks-grid button{display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 4px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);font-size:10px;line-height:1.2;color:var(--ink2);text-align:center}
.dks-grid button .dki{width:22px;height:22px}
body.mob .dksel{top:8px;max-width:calc(100% - 16px);overflow-x:auto}
body.mob .dkhint{bottom:8px;max-width:calc(100% - 16px);white-space:normal}

.m-seg{padding:10px 12px 0}.m-seg .seg{display:grid;grid-template-columns:1fr 1fr}.m-seg .seg button{height:32px;font-family:var(--body);font-size:13px}
.pool-hero .big{font-size:26px}
.pool-hero .kv{font-size:13px}
.pool-how{margin:0 12px;display:grid;gap:8px}
.pool-how .txs{align-items:flex-start;font-size:13px;line-height:1.45}
.pool-how>.kv,.pool-how>.freechips{padding:0 4px}
.tnav{display:flex;gap:2px;margin-left:6px}
.tnav a,.tnav button{height:32px;display:inline-flex;align-items:center;gap:6px;padding:0 10px;border-radius:8px;font-size:13px;font-weight:600;color:var(--ink2);text-decoration:none}
.tnav a:hover,.tnav button:hover{background:var(--panel3);color:var(--ink)}
.tnav .on{color:var(--acc);background:var(--accsoft)}

/* front screen (landing) */
.onb-art .art-copy{top:84px;bottom:28px;left:48px;right:48px;max-width:560px;display:flex;flex-direction:column;justify-content:flex-end;overflow:auto;scrollbar-width:none}
.onb-art canvas{opacity:.55}
.lp-kick{font:700 12px/1.3 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--acc);animation:fadeup .6s .1s var(--ease) both}
.lp-title{font:800 46px/1.02 var(--display);letter-spacing:-.03em;margin:12px 0 16px;animation:fadeup .7s .2s var(--ease) both}
.lp-x{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.lp-x span{display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 12px;border-radius:999px;background:var(--panel);border:1px solid var(--line);font-size:13px;font-weight:800;color:var(--buy);animation:fadeup .45s var(--d) var(--ease) both}
.lp-x .lp-no{font-style:normal;color:var(--buy);font-weight:800}
.lp-x s{text-decoration:none;position:relative;color:var(--mute);font-weight:600}
.lp-x s::after{content:"";position:absolute;left:-2px;right:-2px;top:52%;height:2px;background:var(--sell);border-radius:2px;transform:scaleX(0);transform-origin:left;animation:strike .4s calc(var(--d) + .35s) var(--ease) forwards}
@keyframes strike{to{transform:scaleX(1)}}
.lp-own{font:800 24px/1.15 var(--display);letter-spacing:-.02em;margin-bottom:18px;animation:fadeup .6s 1.3s var(--ease) both}
.lp-g{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow);animation:fadeup .6s 1.35s var(--ease) both}
.lp-gh{display:flex;align-items:center;gap:8px;color:var(--buy);margin-bottom:10px}
.lp-gh b{color:var(--ink);font-size:15px}
.lp-gl{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
.lp-gi{display:flex;gap:10px;align-items:flex-start;animation:fadeup .45s var(--d) var(--ease) both}
.lp-gi b{display:block;font-size:13px;margin-bottom:1px}
.lp-gi p{margin:0;font-size:12px;line-height:1.4;color:var(--ink2)}
.lp-gic{width:30px;height:30px;flex:none;border-radius:9px;background:var(--buysoft);color:var(--buy);display:grid;place-items:center}
.lp-gic svg{width:17px;height:17px}
.lp-v{display:flex;align-items:center;gap:8px;width:100%;margin-top:12px;padding:10px 12px;border-radius:10px;background:var(--accsoft);color:var(--acc);font-weight:700;font-size:13px;text-align:left;transition:background .2s}
.lp-v span{flex:1}.lp-v i{font-style:normal;transition:transform .2s}
.lp-v:hover i{transform:translateX(4px)}
.lp-foot{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-top:14px;font-size:12px;color:var(--mute);animation:fadeup .6s 2s var(--ease) both}
.lp-foot b{color:var(--ink);font-size:14px;white-space:nowrap}
@media (max-height:820px){.lp-title{font-size:38px}.lp-own{font-size:20px;margin-bottom:12px}.lp-gi p{display:none}}
/* mobile front */
body.mob .mob-hero{height:auto;min-height:0;margin:0 -20px 18px;padding:18px 20px 16px;background:var(--panel2);border-bottom:1px solid var(--line)}
body.mob .mob-hero canvas{opacity:.35}
.lp-m{position:relative}
.lp-m .lp-title{font-size:34px;margin:8px 0 12px}
.lp-m .lp-x{margin-bottom:0}
.lp-m .lp-x span{height:28px;font-size:12px;padding:0 10px}
body.mob .lp-g{margin-top:16px;box-shadow:none}
body.mob .lp-gl{grid-template-columns:1fr}
.onb-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 18%,color-mix(in srgb,var(--panel2) 78%,transparent) 48%,var(--panel2) 100%);pointer-events:none}
.onb-art .art-copy,.onb-art .art-brand,.onb-art .art-ticker{z-index:1}
.lp-m .lp-own{font-size:15px;margin:12px 0 0;animation-delay:1.2s}.lp-m .lp-own br{display:none}

/* broker picker & entity line */
.bpick{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel);text-align:left;margin:0 0 16px;transition:border-color .2s}
.bpick:hover{border-color:var(--acc)}
.bpick .bn{flex:1;min-width:0}.bpick .bn b{display:block;font-size:14px}.bpick .bn small{display:block;color:var(--mute);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.blogo{width:32px;height:32px;border-radius:9px;background:#131722;color:#fff;display:grid;place-items:center;font:800 15px/1 var(--display);flex:none}
:root[data-theme="dark"] .blogo{background:#2962ff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .blogo{background:#2962ff}}
.bchip{display:inline-flex;align-items:center;gap:8px;margin-bottom:10px;padding:4px 10px 4px 4px;border:1px solid var(--line);border-radius:999px;font-size:13px;font-weight:700}
.bchip .blogo{width:24px;height:24px;border-radius:7px;font-size:12px}
.bchip small{font-weight:500;color:var(--mute)}
.lp-ent{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;margin-top:10px;font-size:13px;color:var(--ink2);animation:fadeup .6s .15s var(--ease) both}
.lp-ent b{color:var(--ink)}.lp-ent i{color:var(--mute);font-style:normal}
.acct .bname{font-weight:700;font-size:12px}
.kv.sub{padding-left:10px;font-size:11px;color:var(--mute)}.kv.sub b{color:var(--ink2);font-weight:500}
.lp-ent .pwr{color:var(--acc);text-decoration:none;font-weight:600}.lp-ent .pwr:hover{text-decoration:underline}

/* co-branding (broker edition) */
.cobrand{display:flex;align-items:center;gap:10px;margin-top:4px;animation:fadeup .6s .5s var(--ease) both}
.cobrand .blogo.big{width:40px;height:40px;font-size:18px;border-radius:11px}
.cobrand b{display:block;font:800 18px/1.1 var(--display)}.cobrand small{color:var(--mute);font-size:12px}
.pbtag{margin-left:6px;font:700 10px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--acc);background:var(--accsoft);padding:4px 7px;border-radius:5px;white-space:nowrap}
.tbar .brand .blogo{width:28px;height:28px;border-radius:8px;font-size:13px}
.wordmark.cob{font-size:15px;line-height:1.05}.wordmark.cob small{display:block;font:500 10px/1.2 var(--body);color:var(--mute);letter-spacing:0}
.bpick.fixed{cursor:default}.bpick.fixed .wt{font-size:11px;color:var(--buy);background:var(--buysoft);border-radius:999px;padding:3px 8px;font-weight:600}
.op-note.rule{color:var(--warn);margin-top:6px}.op-note.rule:empty{display:none}
/* ###DFXSIM ribbon */
.demo-ribbon.sim{background:#141b2e;color:#c9d3ea;border-bottom:1px solid var(--line);font-weight:500}
.demo-ribbon.sim b{color:#fff}.demo-ribbon.sim b.dn{color:var(--sell)}
.demo-ribbon.sim a{color:#ffb15c;margin-left:10px;font-weight:600}
.demo-ribbon.sim button{background:#ff8a3d;color:#1b0f05;border-radius:7px;padding:3px 14px;text-decoration:none;margin-left:10px}
/* ###DFXSIM "Aliran Pool" panel */
.simpanel{position:fixed;left:0;right:0;top:82px;bottom:24px;z-index:40;background:var(--bg);overflow:auto;border-top:1px solid var(--line)}
.simpanel .fl-in{max-width:1400px;margin:0 auto;padding:18px 20px 40px}
.fl-kpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}
.fl-kpi>div{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.fl-kpi small{display:block;color:var(--mute);font-size:11.5px}.fl-kpi b{display:block;font:600 22px/1.2 'IBM Plex Mono',monospace;margin:4px 0}
.fl-kpi span{font-size:11.5px;color:var(--ink2)}
.fl-tabs{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.fl-tabs button{border:1px solid var(--line);background:var(--panel);color:var(--ink2);border-radius:9px;padding:7px 12px;font-weight:600;font-size:12.5px}
.fl-tabs button.on{color:var(--ink);border-color:var(--acc);box-shadow:inset 0 -2px 0 var(--acc)}.fl-tabs button span{font:500 11px 'IBM Plex Mono',monospace;color:var(--mute);margin-left:4px}
.fl-upd{margin-left:auto;font:11px 'IBM Plex Mono',monospace;color:var(--mute)}
.fl-body{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:auto}
.fl-body table{width:100%;border-collapse:collapse;font-size:12.5px}.fl-body th{position:sticky;top:0;background:var(--panel2,var(--panel));text-align:left;color:var(--mute);font-weight:600;font-size:11.5px;padding:9px 10px;border-bottom:1px solid var(--line)}
.fl-body td{padding:7px 10px;border-bottom:1px solid var(--line);font-family:'IBM Plex Mono',monospace;font-size:12px;white-space:nowrap}
.fl-body td b{font-family:'IBM Plex Sans',sans-serif}.fl-body tr.hum td{background:rgba(255,138,61,.09)}
.fl-h{font:600 10px 'IBM Plex Sans';color:#ff8a3d;border:1px solid #ff8a3d;border-radius:5px;padding:1px 5px;margin-left:4px}
.fl-empty{padding:30px;text-align:center;color:var(--mute);background:var(--panel);border:1px solid var(--line);border-radius:12px}
#navFlows.on{color:var(--ink)}
@media (max-width:900px){.fl-kpi{grid-template-columns:1fr 1fr}}
/* ###DFXSIM "Semua Akun" panel */
.ac-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.ac-bar input,.ac-bar select{height:36px;border-radius:9px;border:1px solid var(--line);background:var(--panel);color:var(--ink);padding:0 10px;font-size:13px}
.ac-bar input{flex:1;min-width:220px}
.ac-row{cursor:pointer}.ac-row:hover td{background:var(--accsoft,rgba(41,98,255,.08))}
.ac-t{font-family:'IBM Plex Sans',sans-serif!important;color:var(--ink2)}
.ac-head{display:flex;align-items:center;gap:14px;margin-bottom:10px}.ac-head h2{margin:0;font-size:22px}
.btn-back{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:9px;padding:7px 12px;font-weight:600;font-size:12.5px}
.ac-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.ac-chip{font-size:11.5px;font-weight:600;color:var(--ink2);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:4px 10px}
.ac-kpi b{font-size:16px!important}
.ac-h3{margin:16px 0 8px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
#navAccts.on{color:var(--ink)}
.fl-kpi b span{font:inherit}.ac-kpi b{font:600 16px/1.3 "IBM Plex Mono",monospace!important}