@font-face{font-family:'Noto Sans';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/noto-sans-latin.woff2') format('woff2')}
:root{color-scheme:dark;--bg:#10141c;--surface:#161c26;--raised:#1d2532;--line:#283242;--text:#e3e9f1;--muted:#9aa8ba;--green:#49c5aa;--red:#ff7b86;--accent:#82aaff}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:13px/1.5 'Noto Sans','Noto Sans SC',system-ui,sans-serif;font-variant-numeric:tabular-nums;overflow:hidden}
input,select,button,textarea{font:inherit;font-variant-numeric:tabular-nums}
input,select,textarea{background:var(--bg);color:var(--text);border:1px solid #364358;border-radius:6px;padding:8px 10px;min-width:0}
input:hover,select:hover,textarea:hover{border-color:#52617a}
button{background:var(--raised);color:var(--text);border:1px solid #364358;border-radius:6px;padding:7px 11px;cursor:pointer;white-space:nowrap}
button:disabled,input:disabled,select:disabled{opacity:.45;cursor:not-allowed}
button:active:not(:disabled){transform:translateY(1px)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(hover:hover){button:hover:not(:disabled){background:#2b3749;border-color:#5c6e88}}
.green{color:var(--green)}.red{color:var(--red)}.muted{color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.brand{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:750;letter-spacing:.09em}
.brand-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:9px;background:#263c45;border:1px solid #385960;color:#75ddc6;font-size:14px;letter-spacing:-.04em;flex:none}
.brand small{display:block;font-size:10px;font-weight:400;letter-spacing:.08em;color:var(--muted);margin-top:2px}
.tag{display:inline-block;border:1px solid #3b485c;border-radius:4px;padding:2px 6px;font-size:10px;font-weight:400;color:var(--muted);white-space:nowrap}
#wrap{display:flex;align-items:stretch;height:100vh;height:100dvh;overflow:hidden}
#app{flex:1;min-width:320px;min-height:0;display:flex;flex-direction:column}
#app>header{display:flex;align-items:center;gap:18px;padding:12px 16px;background:var(--surface);border-bottom:1px solid var(--line);flex-wrap:wrap;flex:none}
.market-controls{display:flex;gap:6px}.market-controls select{font-weight:600}
.quote{display:flex;align-items:baseline;line-height:1.2;gap:12px;min-width:110px;max-width:100%;flex:none;overflow-x:auto;scrollbar-width:none}
.quote-price{display:flex;align-items:baseline;gap:6px;white-space:nowrap}#price{font-size:30px;font-weight:650;letter-spacing:-.04em}
#price[data-direction='up'] .quote-decimal{color:var(--green)}#price[data-direction='down'] .quote-decimal{color:var(--red)}
#quote-unit{font-size:11px;color:var(--muted)}.quote-change{font-size:12px;min-height:15px;white-space:nowrap}
.user-controls{display:flex;align-items:center;gap:12px;margin-left:auto;font-size:12px}
#who{font-weight:600;max-width:140px;overflow:hidden;text-overflow:ellipsis}.quiet{background:transparent;font-size:11px;padding:5px 9px}
.connection{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:10px;white-space:nowrap}
.connection::before{content:'';width:6px;height:6px;border-radius:50%;background:#d6ac62}
.connection[data-state='ready']::before{background:var(--green)}.connection[data-state='down']{color:#f0c57c}
#acct{margin-top:auto;padding-top:20px;border-top:1px solid var(--line);flex:none}
.account-stats{display:grid;gap:10px}
.account-stat{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:2px 8px;min-width:0}
.account-stat span{color:var(--muted);font-size:10px}
.account-stat b{font-size:14px;font-weight:600;letter-spacing:-.03em;overflow-wrap:anywhere}
.account-meta{display:grid;gap:6px;color:var(--muted);font-size:10px;margin-top:14px}
.account-meta>span{display:flex;justify-content:space-between;gap:8px}
.account-meta strong{font-weight:500;color:var(--text)}.account-meta .green{color:var(--green)}.account-meta .red{color:var(--red)}
#msg{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:6;width:max-content;max-width:calc(100% - 32px);margin:0;padding:8px 12px;background:#302a20;color:#f4cc84;border:1px solid #55482e;border-radius:6px;overflow-wrap:anywhere;font-size:12px;pointer-events:none}
#msg:empty{display:none}
#workspace{flex:1;min-height:0;display:grid;grid-template-rows:minmax(120px,.68fr) 10px minmax(170px,.32fr)}
#lowerpanels{min-height:0;display:grid;grid-template-rows:minmax(80px,.6fr) 10px minmax(80px,.4fr)}
#chartpane{display:flex;flex-direction:column;min-height:0;overflow:hidden;position:relative}
#cv{flex:1;min-height:0;margin:8px 8px 0}#px{padding:3px 16px;color:var(--muted);min-height:23px;font-size:11px;flex:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.splitter{cursor:row-resize;touch-action:none;user-select:none;display:flex;align-items:center;justify-content:center;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg);flex:none}
.splitter::after{content:'';width:32px;height:2px;background:#445169;border-radius:2px}
.splitter.vertical{width:10px;cursor:col-resize;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line)}
.splitter.vertical::after{width:2px;height:32px}
.splitter:hover,.splitter:focus-visible,.splitter[data-dragging]{background:#23324a}.splitter:focus-visible{outline-offset:-2px}
#positions,#history{min-height:0;overflow:auto;position:relative;scrollbar-gutter:stable}
.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:36px;padding:8px 12px;background:var(--surface);border-bottom:1px solid var(--line)}
.panel-heading h3{font-size:12px;font-weight:600;margin:0;white-space:nowrap}.panel-heading>span{color:var(--muted);font-size:10px;white-space:nowrap}
#positions>.panel-heading,#history>.panel-heading,#lbbar>.panel-heading{position:sticky;top:0;z-index:3}
.count{display:inline-block;margin-left:5px;color:var(--muted);font-size:10px;font-weight:500;background:#273245;padding:0 5px;border-radius:4px;vertical-align:middle}
table{width:100%;border-collapse:separate;border-spacing:0;margin:0;white-space:nowrap;font-size:12px}
th,td{padding:9px 10px;text-align:right;border-bottom:1px solid #222c3c}
th{color:var(--muted);font-weight:400;font-size:10px;background:var(--bg)}
thead{position:sticky;top:36px;z-index:2}td:first-child,th:first-child{text-align:left;color:var(--muted)}
#pos th:nth-child(4),#pos td:nth-child(4),#historyT th:nth-child(4),#historyT td:nth-child(4){text-align:left}
.ctr{text-align:center}td button{padding:4px 9px;font-size:11px}
tbody tr:hover{background:#19212e}.empty,.empty:first-child{text-align:center;color:var(--muted);padding:26px 12px;font-size:12px}
#tradebar{width:var(--trade-width,240px);flex:none;min-height:0;overflow:auto;background:var(--surface);padding:20px 16px;display:flex;flex-direction:column}
.section-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:14px}
#tradebar h2{font-size:13px;margin:0;font-weight:600}#tradebar label{display:block;color:var(--muted);font-size:11px}
#tradebar input{display:block;width:100%;margin-top:7px;font-size:15px;padding:9px 10px}
.order-symbol{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:14px}
.order-symbol b{font-size:15px;font-weight:600}.order-symbol span{font-size:10px;color:var(--muted)}
.lot-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:7px}.lot-presets button{font-size:10px;padding:5px 0;background:transparent}
.lot-presets button[aria-pressed='true']{background:#243d3f;border-color:#43736b;color:#9ce2cf}
.order-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.order-buttons button{padding:12px 2px;font-weight:650;font-size:12px}.order-buttons small{display:block;font-size:11px;font-weight:500;margin-top:5px;min-height:16px;overflow-wrap:anywhere}
#tradebar .buy{background:#214d45;color:#a0f2dd;border-color:#39796a}#tradebar .sell{background:#4c2d37;color:#ffc0c6;border-color:#865061}
@media(hover:hover){#tradebar .buy:hover:not(:disabled){background:#2b6257}#tradebar .sell:hover:not(:disabled){background:#633a47}}
#symbol-status:empty{display:none}#symbol-status{font-size:11px;margin:10px 0;color:#f0c57c}
.leverage-form{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
#lev-apply,#close-all{width:100%;margin-top:8px;padding:8px}#lev-hint{color:var(--muted);font-size:10px;margin:8px 0 0;line-height:1.6}
.close-section{border-top:1px solid var(--line);padding-top:12px;margin:20px 0 24px}
#close-all{background:transparent;color:#f5afb7;border-color:#65434f}
#rightbar{width:var(--rank-width,264px);flex:none;min-height:0;display:grid;grid-template-rows:minmax(120px,.5fr) 10px minmax(160px,.5fr);background:var(--surface)}
#lbbar{overflow:auto;position:relative;min-height:0;scrollbar-gutter:stable}
#rankT{font-size:11px}#rankT th,#rankT td{padding:9px 7px}#rankT td:nth-child(2),#rankT th:nth-child(2){text-align:left}
#rankT .offline{color:var(--muted)}#rankT .online{color:var(--text)}#rankT .me{background:#203438}#rankT .me td:nth-child(2){color:#90dbc9;font-weight:600}
#rankT tbody tr:first-child td:first-child{color:#ecc478;font-weight:700}
#chatpane{min-height:0;display:flex;flex-direction:column;position:relative}
#chat-messages{flex:1;min-height:0;overflow:auto;overflow-wrap:anywhere;padding:0 12px}
.chat-item{padding:12px 0;border-bottom:1px solid var(--line);white-space:pre-wrap;font-size:12px}
.chat-item b{color:#abc2eb;font-size:11px}.chat-item time{color:var(--muted);font-size:10px;margin-left:8px}.chat-item>div{margin-top:5px}
#chat-form{padding:10px 12px 8px;border-top:1px solid var(--line)}#chatpane textarea{width:100%;resize:none;padding:8px 10px;font-size:12px}
.chat-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:7px}.chat-actions>span{font-size:10px}#chat-send{padding:5px 16px;font-size:11px}
#chat-error{color:#f0c57c;font-size:11px;overflow-wrap:anywhere}#chat-error:empty{display:none}
.panel-status{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:var(--bg);color:var(--muted);font-size:12px}
#lbbar .panel-status{inset:36px 0 0;background:var(--surface)}#chatpane-status{bottom:132px;top:36px;background:var(--surface)}
.panel-status[hidden],.history-status[hidden]{display:none}
.spinner{width:20px;height:20px;border:2px solid #334157;border-top-color:var(--accent);border-radius:50%;animation:loading-spin .7s linear infinite}
.panel-status:not([data-state='loading']) .spinner,.history-status:not([data-state='loading']) .spinner{display:none}
.panel-status:not([data-state='error']) button,.history-status:not([data-state='error']) button{display:none}
.history-status{display:flex;align-items:center;justify-content:center;gap:10px;padding:16px}
@keyframes loading-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.spinner{animation:none}button:active:not(:disabled){transform:none}}
#auth{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:9;overflow:auto;padding:24px}
#authbox{background:var(--surface);border:1px solid #344155;border-radius:14px;padding:32px;width:380px;max-width:100%;box-shadow:0 24px 70px #0004}
#authbox>.brand{margin-bottom:28px}#authbox h1{margin:0 0 8px;font-size:22px;font-weight:650;letter-spacing:-.04em}
#authbox>p.muted{font-size:12px;line-height:1.7;margin:0 0 24px}#authbox label{display:block;font-size:11px;color:var(--muted);margin:12px 0 6px}
#authbox input{width:100%;padding:10px 12px}#authbox button{width:100%;padding:10px;margin-top:8px;font-size:12px}
#authbox .primary{background:#6bd1b5;color:#102720;border-color:#6bd1b5;font-weight:650}#authbox .primary:hover:not(:disabled){background:#87dfc6}
#autherr{color:var(--red);font-size:12px;min-height:18px;margin-top:8px}.auth-note{color:var(--muted);font-size:10px;text-align:center;margin:22px 0 0}
@media(max-width:1100px){#app>header{gap:10px;padding:10px 12px}.user-controls{gap:8px}.connection{font-size:0}.quote{min-width:95px}#price{font-size:26px}}
@media(max-width:800px){body{overflow:auto}#wrap{flex-direction:column;height:auto;min-height:100dvh;overflow:visible}.splitter.vertical{display:none}
 #tradebar{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;padding:16px;border-bottom:1px solid var(--line)}
 #tradebar>.section-heading{grid-column:1/-1;margin:0}.order-form{grid-column:1}.leverage-form{grid-column:2;grid-row:2;margin:0;padding:0;border:0}
 #symbol-status{grid-column:1/-1;margin:0}.close-section{grid-column:1/-1;margin:0;padding-top:8px}#acct{grid-column:1/-1;margin-top:0;padding-top:16px}
 #app{flex:none;min-width:0;height:85vh;height:85dvh;min-height:640px}#app>header{gap:10px}.user-controls{gap:10px}.connection{font-size:10px}
 #rightbar{width:100%;height:560px;border-top:1px solid var(--line)}
 #authbox{padding:24px}.quote{min-width:90px}#historyT{font-size:11px}}
@media(max-width:420px){.user-controls{width:100%;justify-content:flex-end}.connection{margin-right:auto}#tradebar{gap:12px}.order-buttons button{font-size:11px}}
