:root{
  --bg:#0b0e13; --panel:#12161d; --panel2:#1a2029; --border:#272e3a;
  --txt:#dde5ee; --muted:#8b949e; --accent:#2f81f7; --green:#2ea043;
  --red:#f85149; --orange:#d29922; --yellow:#e3b341;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--txt);
  font:12.5px/1.45 -apple-system,"PingFang SC","Microsoft YaHei",Segoe UI,Roboto,sans-serif;
  overflow:hidden;display:flex;flex-direction:column}

/* ===== 全局滚动条（各版块独立上下滚动，深底上高对比显眼） ===== */
*{scrollbar-width:auto;scrollbar-color:#5f6b7d rgba(0,0,0,.22)}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:rgba(0,0,0,.22);border-radius:5px}
::-webkit-scrollbar-thumb{background:#5f6b7d;border-radius:5px;border:1px solid rgba(0,0,0,.3)}
::-webkit-scrollbar-thumb:hover{background:#7d8ba3}
::-webkit-scrollbar-corner{background:transparent}

/* ===== 顶栏 ===== */
.topbar{display:flex;align-items:center;justify-content:space-between;flex:0 0 46px;
  padding:0 14px;border-bottom:1px solid var(--border);background:var(--panel)}
.brand{display:flex;align-items:center;gap:9px}
.brand .logo{font-size:20px;color:var(--accent)}
.brand-txt h1{font-size:14px;margin:0;font-weight:600}
.brand-txt small{color:var(--muted);font-size:11px}
.topright{display:flex;align-items:center;gap:8px}
.badge{padding:2px 10px;border-radius:20px;font-size:11px;font-weight:600;border:1px solid var(--border)}
.mode-sim{color:var(--green);border-color:var(--green)}
.mode-paper{color:var(--yellow);border-color:var(--yellow)}
.mode-live{color:var(--red);border-color:var(--red);background:rgba(248,81,73,.12)}

/* ===== 三栏布局 ===== */
.terminal{flex:1;display:grid;grid-template-columns:250px 1fr 310px;gap:6px;
  padding:6px;min-height:0}
.col{display:flex;flex-direction:column;gap:6px;min-height:0;min-width:0}
/* 中栏三行：minmax(0,..) 保证内容再多也是面板内部滚动，不撑爆布局 */
.col-mid{display:grid;grid-template-rows:minmax(0,5fr) minmax(0,3.4fr) minmax(0,3fr);gap:6px}
/* 右栏：账户表限高（多账户自身滚动），下单面板占余量独立滚动 */
.col-right{display:flex;flex-direction:column}
.acct-panel{flex:0 1 auto;min-height:120px;max-height:46%}
.orderform-panel{flex:1 1 0;min-height:0}

/* ===== 面板 ===== */
.panel{background:var(--panel);border:1px solid var(--border);border-radius:8px;
  display:flex;flex-direction:column;min-height:0;overflow:hidden}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:7px 10px;border-bottom:1px solid var(--border);
  font-size:12.5px;font-weight:600;color:var(--accent);flex:0 0 auto}
.head-right{display:flex;align-items:center;gap:6px}
/* 表格区常驻滚动轨道：信息不满时也能看到"可滚动"提示，信息多时滑块出现 */
.tbl-wrap{flex:1;overflow-y:scroll;overflow-x:auto;min-height:0}

/* ===== 表格 ===== */
.tbl{width:100%;border-collapse:collapse}
.tbl th,.tbl td{border-bottom:1px solid var(--border);padding:4px 8px;text-align:left;
  font-size:12px;white-space:nowrap}
.tbl th{background:var(--panel2);color:var(--muted);font-weight:600;position:sticky;top:0;z-index:2}
.tbl tbody tr:hover{background:var(--panel2)}
.tbl.sm td,.tbl.sm th{padding:4px 7px;font-size:11.8px}
.tag{padding:1px 7px;border-radius:4px;font-size:10.5px;font-weight:600;display:inline-block}
.tag-filled{color:var(--green);background:rgba(46,160,67,.14)}
.tag-submitted{color:var(--yellow);background:rgba(227,179,65,.14)}
.tag-rejected,.tag-failed{color:var(--red);background:rgba(248,81,73,.14)}
.tag-canceled{color:var(--muted);background:rgba(139,148,158,.14)}
.tag-partial{color:var(--orange);background:rgba(210,153,34,.14)}
.tag-working{color:var(--accent);background:rgba(47,129,247,.14)}
.tag-quote{color:#bc8cff;background:rgba(188,140,255,.14);margin-left:5px;font-weight:600}
.pos{color:var(--green)}.neg{color:var(--red)}.muted{color:var(--muted);font-size:11px}
.empty-tip{text-align:center;color:var(--muted);padding:18px 10px;font-size:12px}
.conn-yes{color:var(--green)}.conn-no{color:var(--red)}

/* ===== 左栏 自选股 ===== */
.wl-panel{flex:1}
.wl-add{display:flex;gap:5px}
.wl-inp{width:104px;padding:3px 7px;font-size:12px}
.wl-head{display:grid;grid-template-columns:1fr 74px 62px;padding:3px 10px;
  color:var(--muted);font-size:11px;border-bottom:1px solid var(--border)}
.wl-list{flex:1;overflow-y:scroll}
.wl-row{display:grid;grid-template-columns:1fr 74px 62px;align-items:center;
  padding:5px 10px;cursor:pointer;border-bottom:1px solid rgba(39,46,58,.5)}
.wl-row:hover{background:var(--panel2)}
.wl-row.active{background:rgba(47,129,247,.13);box-shadow:inset 2px 0 0 var(--accent)}
.wl-name{font-weight:600;font-size:12px}
.wl-name .muted{margin-left:4px}
.wl-price{font-family:ui-monospace,Consolas,monospace;text-align:right}
.wl-chg{text-align:right;font-family:ui-monospace,Consolas,monospace}
.wl-chg.up{color:var(--green)}.wl-chg.down{color:var(--red)}
.wl-del{opacity:0;color:var(--muted);cursor:pointer;font-size:14px;justify-self:end}
.wl-row:hover .wl-del{opacity:.8}

/* ===== tab ===== */
.tab-group{display:inline-flex;gap:2px}
.tab{background:none;border:none;color:var(--muted);padding:4px 10px;cursor:pointer;
  font-size:12px;border-radius:5px;font-weight:600}
.tab.active{background:var(--panel2);color:var(--accent)}
.tab:hover{color:var(--txt)}

/* ===== 右栏 ===== */
.inp{background:var(--bg);border:1px solid var(--border);color:var(--txt);
  border-radius:5px;padding:4px 8px;font-size:12px;outline:none}
.inp:focus{border-color:var(--accent)}
.inp-sm{padding:3px 7px;font-size:12px}
.btn{background:var(--panel2);border:1px solid var(--border);color:var(--txt);
  border-radius:5px;padding:5px 11px;cursor:pointer;font-size:12px}
.btn:hover{border-color:var(--accent)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-danger{background:var(--red);border-color:var(--red);color:#fff}
.btn-warn{background:var(--orange);border-color:var(--orange);color:#1a1209}
.btn-sm{font-size:11.5px;padding:3px 8px}
.seg{display:inline-flex;gap:8px;align-items:center;padding:3px 9px;
  border:1px solid var(--border);border-radius:5px;font-size:12px}
.seg-sm{padding:2px 7px;gap:6px;font-size:12px}
.chk-all{display:flex;align-items:center;gap:4px;color:var(--muted);cursor:pointer;font-size:12px;font-weight:400}

/* 盘口 */
.bbo{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;padding:8px 10px;
  border-bottom:1px solid var(--border);flex:0 0 auto}
.bbo-side{display:flex;flex-direction:column;gap:2px;justify-content:center}
.bbo-row{font-size:11px;color:var(--muted);display:flex;justify-content:space-between;padding:2px 6px;
  border-radius:4px;background:rgba(39,46,58,.35)}
.bbo-row.sell{color:var(--red)}
.bbo-row.buy{color:var(--green)}
.bbo-mid{text-align:center}
.bbo-price{font-size:22px;font-weight:700;font-family:ui-monospace,Consolas,monospace}
.bbo-sym{font-size:11px;color:var(--muted)}

/* 下单表单 */
.orderform-panel{overflow:auto}
.of-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:6px 10px;flex:0 0 auto}
.of-sym{width:110px;font-family:ui-monospace,Consolas,monospace;text-transform:uppercase;font-weight:600}
/* 期权模式：合约名称完整显示在一个格子（加宽） */
.of-sym.opt-full{width:216px;font-size:11.5px;letter-spacing:-.2px;font-weight:600}
.side-seg{display:flex;gap:0;padding:0;border-radius:5px;overflow:hidden}
.side-btn{background:none;border:none;padding:6px 16px;cursor:pointer;font-size:13px;
  font-weight:700;color:var(--muted)}
.side-btn.buy.active{background:rgba(46,160,67,.2);color:var(--green)}
.side-btn.sell.active{background:rgba(248,81,73,.18);color:var(--red)}
.ratio-presets{display:flex;gap:3px}
.preset{background:var(--panel2);border:1px solid var(--border);color:var(--txt);
  border-radius:4px;padding:3px 8px;cursor:pointer;font-size:11.5px}
.preset.active{background:var(--accent);border-color:var(--accent);color:#fff}
.basis-lbl{flex:1;min-width:0}
.of-btn{flex:1;padding:7px}
.preview-box{margin:2px 10px 6px;border:1px dashed var(--border);border-radius:6px;padding:6px 8px}
.exec-mini{margin:2px 10px 8px;border-top:1px solid var(--border);padding-top:6px;font-size:11px}

/* ===== Modal ===== */
.modal-mask{position:fixed;inset:0;background:rgba(0,0,0,.62);display:flex;
  align-items:flex-start;justify-content:center;padding:36px 16px;z-index:100;overflow:auto}
.modal{background:var(--panel);border:1px solid var(--border);border-radius:12px;
  width:100%;max-width:880px;box-shadow:0 18px 60px rgba(0,0,0,.5)}
.modal-head{display:flex;align-items:center;justify-content:space-between;
  padding:13px 18px;border-bottom:1px solid var(--border);position:sticky;top:0;
  background:var(--panel);border-radius:12px 12px 0 0;z-index:1}
.modal-head h3{margin:0;font-size:15px}
.modal-body{padding:14px 18px 18px;max-height:calc(100vh - 160px);overflow-y:scroll}
.modal-body h4{font-size:13px;color:var(--accent);margin:16px 0 6px;font-weight:600}
.row{display:flex;align-items:center;gap:10px;margin:8px 0;flex-wrap:wrap}
.row.inline{margin:0}
.auth-box{max-width:360px;padding:24px;margin-top:12vh}
.auth-box h3{margin:0 0 6px}
.auth-box .inp{width:100%;margin:10px 0 0}
.vfield{margin:8px 0}
.vfield label{display:block;font-size:12.5px;margin-bottom:3px}
.vfield .inp{width:100%;max-width:560px}
.vf-set{border-color:var(--green)}
.vfield textarea{font-family:ui-monospace,Consolas,monospace;font-size:12px;resize:vertical}
.modal-mask a{color:var(--accent)}
.optfields{display:flex;gap:5px;flex-wrap:wrap}
.opt-toolbar{display:flex;align-items:center;gap:8px;padding:6px 10px;flex-wrap:wrap}
.opt-expiries{display:flex;gap:4px;flex-wrap:wrap}
.exp-chip{background:var(--panel2);border:1px solid var(--border);border-radius:4px;
  padding:2px 8px;cursor:pointer;font-size:11.5px;color:var(--muted)}
.exp-chip.active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* 中栏下：期权链(窄列) + 资产 并排常驻 */
.bottom-panel{flex-direction:row;gap:0}
.opt-panel{flex:0 0 352px;display:flex;flex-direction:column;min-width:0;min-height:0;
  border-right:1px solid var(--border)}
.asset-panel{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0}
.opt-sym{color:var(--txt);margin-left:4px}
.opt-hint{padding:6px 10px;display:inline-block}
.opt-expiries{display:flex;gap:4px;padding:6px 10px;border-bottom:1px solid var(--border);
  overflow-x:auto;flex:0 0 auto;scrollbar-width:thin}
.exp-chip{background:var(--panel2);border:1px solid var(--border);border-radius:4px;
  padding:2px 9px;cursor:pointer;font-size:11.5px;color:var(--muted);white-space:nowrap}
.exp-chip:hover{color:var(--txt);border-color:var(--accent)}
.exp-chip.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.opt-tbl th{text-align:center}
.th-code{text-align:left!important;color:var(--muted);padding-left:10px!important}
.th-strike{text-align:center!important;color:var(--yellow);width:78px}
/* CALL/PUT 切换器 */
.opt-right-seg{display:flex;gap:6px;padding:6px 10px;border-bottom:1px solid var(--border);flex:0 0 auto}
.right-btn{flex:1;background:var(--panel2);border:1px solid var(--border);border-radius:4px;
  padding:3px 0;cursor:pointer;font-size:12px;font-weight:700;color:var(--muted);letter-spacing:1px}
.right-btn:hover{color:var(--txt)}
.right-btn.call.active{background:rgba(46,160,67,.18);color:var(--green);border-color:var(--green)}
.right-btn.put.active{background:rgba(248,81,73,.18);color:var(--red);border-color:var(--red)}
/* 行权价两列：完整合约代码 | 行权价（紧凑行高） */
.opt-tbl td{text-align:center}
.chain-row td{padding:3px 8px;cursor:pointer}
.chain-row td.oc{font-family:ui-monospace,Consolas,monospace;font-size:10.5px;
  text-align:left;color:var(--txt);white-space:nowrap;letter-spacing:-.2px}
.chain-row td.strike{color:var(--txt);font-weight:600;font-variant-numeric:tabular-nums}
.opt-panel.mode-call .chain-row:hover td{background:rgba(46,160,67,.16)}
.opt-panel.mode-put  .chain-row:hover td{background:rgba(248,81,73,.16)}
.chain-row.selected td{background:var(--panel2)!important;outline:1px solid var(--accent);outline-offset:-1px}
.opt-panel.mode-call .chain-row.selected td{outline-color:var(--green)}
.opt-panel.mode-put  .chain-row.selected td{outline-color:var(--red)}
.atm-tag{margin-left:6px;font-size:9px;padding:0 4px;border-radius:3px;
  background:rgba(47,129,247,.15);color:var(--accent);font-weight:600;vertical-align:middle}
.opt-tbl td.muted{cursor:default}

/* 期权合约锁定限价：市价变灰 */
#otype.locked{color:var(--muted);border-color:var(--orange);background:rgba(210,153,34,.08)}
#otype option:disabled{color:#5a626d}

/* 窄屏降级（竖排） */
@media(max-width:1180px){
  body{overflow:auto}
  .terminal{grid-template-columns:1fr;grid-auto-rows:auto}
  .col-left,.col-mid,.col-right{display:flex}
  .wl-panel,.pos-panel,.order-panel,.bottom-panel,.acct-panel,.orderform-panel{min-height:220px}
  .bottom-panel{flex-direction:column}
  .opt-panel{border-right:none;border-bottom:1px solid var(--border)}
}