:root{--bg-app: #131722;--bg-surface: #1e222d;--bg-elevated: #2a2e39;--bg-hover: #242833;--border: #2a2e39;--border-strong: #363a45;--text-primary: #d1d4dc;--text-secondary: #9598a1;--text-muted: #787b86;--text-inverse: #ffffff;--brand: #2962ff;--brand-hover: #1e53e5;--brand-subtle: rgba(41, 98, 255, .12);--up: #089981;--up-subtle: rgba(8, 153, 129, .12);--down: #f23645;--down-subtle: rgba(242, 54, 69, .12);--neutral: #787b86;--focus-ring: rgba(41, 98, 255, .5);--selection: rgba(41, 98, 255, .16);--radius-sm: 4px;--radius-md: 6px;--radius-full: 9999px;--shadow-popover: 0 2px 8px rgba(0, 0, 0, .4);--row-height: 40px;--font-ui: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--bg: var(--bg-app);--panel: var(--bg-surface);--line: var(--border);--line-2: var(--border-strong);--text: var(--text-primary);--dim: var(--text-secondary);--buy: var(--up);--sell: var(--down);--accent: var(--brand);--mono: var(--font-ui);--sans: var(--font-ui);--r: var(--radius-md);--gap: 1px;--dur: .15s}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{background:var(--bg-app);color:var(--text-primary);font-family:var(--font-ui);font-size:13px;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}button,input,select{font-family:inherit}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--bg-elevated);border-radius:4px}::-webkit-scrollbar-track{background:transparent}.app{display:flex;flex-direction:column;height:100%;background:var(--bg-app);overflow:hidden}.topbar{height:54px;flex:none;display:flex;align-items:center;padding:0 14px;border-bottom:1px solid var(--border);background:var(--bg-app)}.tb-divider{width:1px;height:26px;background:var(--border)}.brand{font-size:16px;font-weight:700;letter-spacing:-.3px;padding-right:14px}.tb-symbol{display:flex;align-items:center;gap:9px;padding:0 14px}.tb-avatar{width:22px;height:22px;border-radius:var(--radius-full);background:var(--brand-subtle);border:1px solid rgba(41,98,255,.35);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--brand)}.tb-sym{font-size:15px;font-weight:600;color:var(--text-primary)}.tb-badge{font-size:11px;color:var(--text-muted);padding:2px 6px;border:1px solid var(--border-strong);border-radius:var(--radius-sm)}.tb-price{display:flex;align-items:baseline;gap:8px;padding:0 14px}.tb-price .px{font-size:20px;font-weight:600;letter-spacing:-.5px;color:var(--text-primary)}.tb-price .px.up{color:var(--up)}.tb-price .px.down{color:var(--down)}.tb-price .unit{font-size:11px;color:var(--text-muted)}.tb-price .chg{font-size:13px;font-weight:500;margin-left:2px}.tb-stats{display:flex;align-items:center;gap:18px;padding:0 16px}.tb-stat{display:flex;flex-direction:column;gap:1px}.tb-stat>span:first-child{font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.3px}.tb-stat>span:last-child{font-size:12px;color:var(--text-secondary)}.tb-spacer{flex:1}.conn{display:flex;align-items:center;gap:6px;padding:5px 11px;border-radius:var(--radius-full);font-size:12px;font-weight:500;border:1px solid var(--border-strong);color:var(--text-muted)}.conn .dot{width:6px;height:6px;border-radius:50%;background:currentColor}.conn.open{color:var(--up);border-color:#08998166;background:var(--up-subtle)}.conn.open .dot{box-shadow:0 0 0 2px #08998140}.conn.connecting{color:var(--brand);border-color:#2962ff66}.conn.closed{color:var(--down);border-color:#f2364566;background:var(--down-subtle)}.up{color:var(--up)}.down{color:var(--down)}.halt-banner{background:var(--down);color:#fff;text-align:center;padding:6px;font-weight:600}.grid{flex:1;min-height:0;display:grid;grid-template-columns:1fr 264px 312px;grid-template-rows:minmax(0,1fr);gap:1px;background:var(--border)}.col-left{display:grid;grid-template-rows:minmax(0,1fr) 232px;gap:1px;background:var(--border);min-width:0;min-height:0}.col-mid{display:grid;grid-template-rows:1.25fr 1fr;gap:1px;background:var(--border);min-width:0;min-height:0}.col-right{display:grid;grid-template-rows:auto minmax(0,1fr);gap:1px;background:var(--border);min-width:0;min-height:0}.panel{background:var(--bg-surface);min-height:0;overflow:hidden;display:flex;flex-direction:column}.empty{color:var(--text-muted);font-size:13px;padding:12px}.panel>h2{height:34px;flex:none;display:flex;align-items:center;padding:0 12px;border-bottom:1px solid var(--border);font-size:13px;font-weight:500;color:var(--text-primary);letter-spacing:0;text-transform:none}.chart.panel{background:var(--bg-app)}.chart-tabs{height:38px;flex:none;display:flex;align-items:center;gap:2px;padding:0 10px;border-bottom:1px solid var(--border)}.chart-tabs button{height:26px;padding:0 11px;background:transparent;border:none;border-radius:var(--radius-sm);color:var(--text-muted);font-size:12px;font-weight:500;cursor:pointer}.chart-tabs button:hover,.chart-tabs button.active{background:var(--bg-elevated);color:var(--text-primary)}.ct-divider{width:1px;height:18px;background:var(--border);margin:0 8px}.ct-ind-wrap{position:relative;display:flex}.ct-ind{display:flex;align-items:center;gap:5px;height:26px;padding:0 9px;background:transparent;border:none;color:var(--text-muted);font-size:12px;cursor:pointer;border-radius:var(--radius-sm)}.ct-ind:hover,.ct-ind.on{background:var(--bg-elevated);color:var(--text-primary)}.ct-menu-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40}.ct-menu{position:absolute;top:32px;left:0;z-index:50;min-width:168px;background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:var(--radius-md);box-shadow:var(--shadow-popover);padding:6px;display:flex;flex-direction:column;gap:2px}.ct-menu label{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:var(--radius-sm);font-size:12px;color:var(--text-secondary);cursor:pointer}.ct-menu label:hover{background:var(--bg-hover);color:var(--text-primary)}.ct-menu input{width:14px;height:14px;accent-color:var(--brand);cursor:pointer}.ct-swatch{width:10px;height:2px;border-radius:1px;flex:none}.ct-spacer{flex:1}.ct-brand{font-size:11px;color:var(--text-muted)}.chart-canvas{flex:1;min-height:0;position:relative}.history.panel{background:var(--bg-surface)}.tabs{height:34px;flex:none;display:flex;align-items:center;gap:2px;padding:0 8px;border-bottom:1px solid var(--border)}.tabs button{height:34px;padding:0 12px;background:transparent;border:none;border-bottom:2px solid transparent;color:var(--text-muted);font-size:13px;font-weight:500;cursor:pointer;margin-bottom:-1px}.tabs button:hover{color:var(--text-primary)}.tabs button.on{color:var(--text-primary);border-bottom-color:var(--brand)}.hhead,.hrow{display:grid;align-items:center}.hbody{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column}.hhead{padding:6px 12px 4px;font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.3px}.hrow{padding:0 12px;height:20px;font-size:12px}.hhead span:not(:first-child){text-align:right}.hrow .px,.hrow .q{text-align:right}.hrow .t{color:var(--text-muted)}.hrow .q{color:var(--text-secondary)}.hrow:hover{background:var(--bg-hover)}.hhead.trades,.hrow.trades{grid-template-columns:1fr 1fr .6fr}.hrow.trades.buy .px{color:var(--up);font-weight:500}.hrow.trades.sell .px{color:var(--down);font-weight:500}.history .hhead{height:28px;padding:0 12px;border-bottom:1px solid var(--border);align-content:center}.history .hrow{height:36px;border-bottom:1px solid var(--border);font-size:13px}.hhead.pos,.hrow.pos{grid-template-columns:1fr 1.2fr 1fr 1.2fr 1fr 1fr 1.2fr 52px}.hhead.oo,.hrow.oo{grid-template-columns:64px 1fr 1fr 48px}.hhead.fills,.hrow.fills{grid-template-columns:1fr 64px 1fr .7fr}.hhead.funding,.hrow.funding{grid-template-columns:1fr 1fr 1fr}.history .empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}.side-b{color:var(--up)}.side-s,.hrow .liq{color:var(--down)}.hrow .x{background:transparent;border:1px solid var(--border-strong);color:var(--text-muted);border-radius:var(--radius-sm);padding:3px 8px;cursor:pointer;font-size:11px;justify-self:end}.hrow .x:hover{color:var(--down);border-color:var(--down)}.orderbook.panel{background:var(--bg-surface)}.obhead{display:grid;grid-template-columns:1fr 1fr 1fr;padding:6px 12px 4px;font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.3px}.obhead span:nth-child(2),.obhead span:nth-child(3){text-align:right}.obasks,.obbids{display:flex;flex-direction:column;flex:1;overflow:hidden}.obasks{justify-content:flex-end}.obrow{position:relative;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;padding:0 12px;height:21px;border:none;background:none;cursor:pointer;font-size:12px;width:100%;text-align:left}.obrow .obdepth{position:absolute;right:0;top:0;bottom:0;z-index:0}.obrow.ask .obdepth{background:var(--down-subtle)}.obrow.bid .obdepth{background:var(--up-subtle)}.obrow .obpx,.obrow .obsz,.obrow .obtot{position:relative;z-index:1}.obrow.ask .obpx{color:var(--down);font-weight:500}.obrow.bid .obpx{color:var(--up);font-weight:500}.obrow .obsz{text-align:right;color:var(--text-secondary)}.obrow .obtot{text-align:right;color:var(--text-muted)}.obrow:hover{background:var(--bg-hover)}.obmid{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--bg-app)}.obmid b{font-size:15px;font-weight:600;color:var(--text-primary)}.obmid b.dim{color:var(--text-muted)}.obspread{font-size:11px;color:var(--text-muted);white-space:nowrap}.account.panel{background:var(--bg-surface);padding:14px 16px;display:flex;flex-direction:column;gap:12px}.acct-row{display:flex;align-items:center;justify-content:space-between}.acct-row span{font-size:12px;color:var(--text-secondary)}.acct-row b{font-size:15px;font-weight:600;color:var(--text-primary)}.acct-row b.up{color:var(--up)}.acct-row b.down{color:var(--down)}.acct-row b i{font-size:11px;color:var(--text-muted);font-weight:400;font-style:normal;margin-left:2px}.orderform.panel{background:var(--bg-surface)}.of-body{padding:14px 16px;display:flex;flex-direction:column;gap:14px;min-height:0;overflow-y:auto}.sides{display:grid;grid-template-columns:1fr 1fr;gap:8px}.sides button{height:36px;border-radius:var(--radius-sm);font-size:14px;font-weight:600;cursor:pointer;background:transparent;color:var(--text-secondary);border:1px solid var(--border)}.sides .buy.on{background:var(--up);color:#fff;border-color:var(--up)}.sides .sell.on{background:var(--down);color:#fff;border-color:var(--down)}.orderform label{display:flex;flex-direction:column;gap:6px;font-size:11px;color:var(--text-secondary)}.orderform input,.orderform select{height:34px;padding:0 10px;background:var(--bg-app);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-size:13px;font-variant-numeric:tabular-nums;outline:none}.orderform input:focus,.orderform select:focus{border-color:var(--brand);box-shadow:0 0 0 2px var(--focus-ring)}.orderform .row{display:flex;align-items:flex-end;gap:10px}.orderform .row>label:first-child{flex:1}.orderform .chk{flex-direction:row;align-items:center;gap:6px;height:34px;font-size:12px;color:var(--text-secondary);cursor:pointer}.orderform .chk input{width:15px;height:15px}.submit{height:44px;border:none;border-radius:var(--radius-sm);font-size:15px;font-weight:600;cursor:pointer;color:#fff}.submit.buy{background:var(--up)}.submit.sell{background:var(--down)}.acct{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--text-muted);padding-top:2px}@media (max-width: 980px){.grid{display:flex;flex-direction:column;overflow:auto;gap:1px}.col-left,.col-mid,.col-right{display:flex;flex-direction:column;gap:1px}.chart.panel{height:360px}.col-left .history.panel{height:240px}.col-mid .orderbook.panel{height:320px}.col-mid .trades.panel{height:240px}.topbar{flex-wrap:wrap;height:auto;padding:8px 12px;gap:8px 0}.tb-stats{gap:12px}}
