:root{
  color-scheme:dark; /* 深色下原生滚动条/表单渲染成深色，不再突兀发白 */
  /* 千羽宗 · 暗金主题(深色模式) */
  --bg:#14110a; --bg2:#1e1910; --card:#1b160c; --card2:#241e11;
  --border:#2e2717; --border2:#40371f;
  --text:#efe7d2; --text2:#b6a983; --text3:#7d7255;
  /* 红涨绿跌(交易惯例，不动)：--up 红 / --down 绿。旧代码 --green 表"正/涨/多"→红，--red 表"负/跌/空"→绿 */
  --c-red:#f6465d; --c-green:#2ebd85;
  --up:var(--c-red); --down:var(--c-green);
  --long:var(--up); --short:var(--down);
  --green:var(--up); --red:var(--down);
  --gold:#e0c56a; --blue:#4f8ef7; --purple:#c99a3a;
  /* 千羽宗古金强调 */
  --accent:#d4af37; --accent2:#f0d98a; --neon:#e6c250;
  --shadow:0 8px 28px rgba(0,0,0,.5);
  --r:6px;
}
body.light{
  color-scheme:light;
  /* 千羽宗 · 奶油金主题(默认浅色) */
  --bg:#f7f1e2; --bg2:#efe6cf; --card:#fdfaf1; --card2:#f5eeda;
  --border:#e7dcbf; --border2:#d8c99a;
  --text:#463c26; --text2:#8a7c57; --text3:#b0a37c;
  --c-red:#d8483c; --c-green:#1f8a5b;
  --accent:#b8860b; --accent2:#d9ad38; --neon:#bf8f1e;
  --shadow:0 6px 22px rgba(150,120,40,.13);
}
/* 浅色态：渐变修为文字加深以满足对比，深度条加浓 */
body.light .rc-name,body.light .realm-name-lg,body.light .pfhr-name{background-image:linear-gradient(90deg,#b87d00,#9c7b1a)} /* 浅色下亮黄渐变落奶油底对比不足→压深金。用 background-image(非 background 简写)避免重置 background-clip:text → 否则渐变填满整块、文字透明变成金条 */
body.light .book-row .bar{opacity:.2}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);color:var(--text);
  font:13px/1.5 -apple-system,BlinkMacSystemFont,"PingFang SC","Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;cursor:pointer}
input,select{font-family:inherit}
select:disabled,.strip-input:disabled,.ms-sym:disabled{opacity:.45;cursor:not-allowed}
:focus-visible{outline:1.5px solid var(--accent);outline-offset:1px}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r)}
/* 共享：admin 等附属页用 */
.tag{font-size:12px;color:var(--text3);border:1px solid var(--border);padding:4px 10px;border-radius:8px}

/* ---------- 顶栏 ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:9px 16px;border-bottom:1px solid var(--border);background:var(--card);position:sticky;top:0;z-index:50}
.brand{display:flex;align-items:center;gap:12px}
.back{color:var(--text2);text-decoration:none;font-size:12.5px;padding:5px 10px;border:1px solid var(--border);border-radius:8px;transition:.15s;white-space:nowrap}
.back:hover{color:var(--text);border-color:var(--border2)}
.logo{font-weight:700;font-size:15px;letter-spacing:.3px;white-space:nowrap}
.top-right{display:flex;align-items:center;gap:10px}
.realm-chip{display:flex;align-items:center;gap:7px;padding:4px 12px;border-radius:20px;border:1px solid rgba(184,134,11,.35);background:linear-gradient(135deg,rgba(240,185,11,.12),rgba(184,134,11,.12))}
.rc-ico{font-size:13px}
.rc-name{font-weight:700;font-size:13px;background:linear-gradient(90deg,#f0b90b,#c99a3a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.rc-eq{font:600 12px/1 "Menlo",monospace;color:var(--text2)}
.icon-btn,.icon-link{background:transparent;border:1px solid var(--border);color:var(--text2);width:30px;height:30px;border-radius:8px;font-size:14px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.icon-btn:hover,.icon-link:hover{color:var(--text);border-color:var(--border2)}
.user{font-size:12px;color:var(--text2);border:1px solid var(--border);padding:5px 10px;border-radius:8px;white-space:nowrap;max-width:160px;overflow:hidden;text-overflow:ellipsis}

/* ---------- 行情条 ---------- */
.market-strip{display:flex;align-items:center;gap:18px;padding:9px 16px;border-bottom:1px solid var(--border);background:var(--card2);position:sticky;top:49px;z-index:40;flex-wrap:wrap}
.ms-ident{display:flex;align-items:center;gap:9px;position:relative}
.ms-sym{background:transparent;border:1px solid var(--border);color:var(--text);font-weight:700;font-size:15px;padding:5px 8px;border-radius:8px;cursor:pointer}
.sym-picker{display:flex;align-items:center;gap:6px;background:var(--bg2);border:1px solid var(--border);color:var(--text);font-weight:700;font-size:15px;padding:6px 10px;border-radius:8px}
.sym-picker:hover{border-color:var(--border2)}
.sym-picker:disabled{opacity:.5;cursor:not-allowed}
.sym-picker .caret{font-size:10px;color:var(--text3)}
.sym-pop{position:absolute;top:42px;left:0;z-index:60;width:300px;max-width:88vw;background:var(--card);border:1px solid var(--border2);border-radius:12px;box-shadow:var(--shadow);overflow:hidden}
.sym-search{width:100%;background:var(--bg2);border:none;border-bottom:1px solid var(--border);color:var(--text);padding:11px 14px;font-size:13px}
.sym-search:focus{outline:none}
.sym-list{max-height:340px;overflow-y:auto}
.sym-item{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.03)}
.sym-item:hover,.sym-item.active{background:var(--bg2)}
.sym-item .s-name{font-weight:600;font-size:13px}
.sym-item .s-ex{display:flex;gap:4px}
.sym-item .s-tag{font-size:10px;padding:1px 6px;border-radius:5px;color:var(--text3);border:1px solid var(--border2)}
.sym-item .s-tag.bn{color:var(--gold);border-color:rgba(240,185,11,.4)}
.sym-item .s-tag.okx{color:var(--blue);border-color:rgba(79,142,247,.4)}
.sym-list .empty{padding:18px;text-align:center;color:var(--text3);font-size:12px}
.ms-perp{font-size:10.5px;color:var(--text3);background:var(--bg2);padding:3px 7px;border-radius:5px}
.ms-mark{display:flex;flex-direction:column;line-height:1.15}
.ms-px{font:700 19px/1 "Menlo",monospace;color:var(--gold)}
.ms-chg{font:600 11.5px/1 "Menlo",monospace;margin-top:3px}
.ms-chg.pos{color:var(--green)}.ms-chg.neg{color:var(--red)}
.ms-stats{display:flex;gap:18px}
.ms-stat{display:flex;flex-direction:column;gap:2px}
.ms-stat label{font-size:10px;color:var(--text3)}
.ms-stat span{font:600 12px/1 "Menlo",monospace;color:var(--text)}
.ms-spacer{flex:1}
.ms-modes{display:flex;gap:6px}
.mode-btn{background:var(--card);border:1px solid var(--border);color:var(--text2);font-size:12px;padding:6px 11px;border-radius:8px;font-weight:600;white-space:nowrap}
.mode-btn.active{color:#fff;border-color:transparent;background:linear-gradient(135deg,#3a7bf0,#4f8ef7)}
.ms-ctrls{display:flex;align-items:center}
.mode-ctrl{display:flex;align-items:center;gap:7px}
.strip-input{background:var(--bg2);border:1px solid var(--border);color:var(--text);border-radius:7px;padding:6px 9px;font-size:12px;max-width:120px}
.ghost-btn{background:var(--card);border:1px solid var(--border);color:var(--text2);font-size:12px;padding:6px 11px;border-radius:8px;white-space:nowrap}
.ghost-btn:hover{color:var(--text);border-color:var(--border2)}

/* ---------- 交易网格 ---------- */
.trade-grid{
  display:grid;gap:10px;padding:10px;max-width:1680px;margin:0 auto;align-items:start;
  grid-template-columns:minmax(0,1fr) 210px 312px;
  grid-template-areas:"chart book side" "panel panel side";
}
.tg-chart{grid-area:chart;min-width:0;order:0}
.tg-book{grid-area:book}
.tg-side{grid-area:side;display:flex;flex-direction:column;gap:10px}
.tg-panel{grid-area:panel;min-width:0}

/* ---------- 图表 ---------- */
.chart-card{padding:0;overflow:hidden}
.chart-head{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;gap:10px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.ind-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.chk{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--text2);cursor:pointer}
.chk input{accent-color:var(--blue)}
.sep{width:1px;height:15px;background:var(--border)}
.osc-btn{background:transparent;border:1px solid var(--border);color:var(--text2);font-size:11.5px;padding:4px 9px;border-radius:7px}
.osc-btn.active{color:var(--text);border-color:var(--blue);background:rgba(79,142,247,.1)}
.view-ctrls{display:flex;align-items:center;gap:8px}
.mode-ctrl-interval{display:flex}
.speeds{display:flex;gap:4px}
.speed-btn{background:transparent;border:1px solid var(--border);color:var(--text2);font-size:11.5px;padding:4px 8px;border-radius:7px}
.speed-btn.active{color:var(--text);border-color:var(--gold);background:rgba(240,185,11,.1)}
.chart-box{width:100%;height:440px;position:relative}
.chart-legend{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:5px 14px;min-height:25px;font:11px/1.4 "Menlo",monospace;color:var(--text2);border-bottom:1px solid var(--border);overflow:hidden;white-space:nowrap}
.chart-legend.overlay{position:absolute;top:6px;left:10px;z-index:4;border:none;padding:0;pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.chart-legend b{font-weight:700}
.chart-legend i{font-style:normal;margin-left:3px}
.draw-tools{display:flex;gap:4px;margin-right:4px}
.draw-btn{background:transparent;border:1px solid var(--border);color:var(--text2);font-size:13px;width:28px;height:28px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center}
.draw-btn.active{color:var(--text);border-color:var(--gold);background:rgba(240,185,11,.12)}
.draw-btn:hover{color:var(--text);border-color:var(--border2)}

/* ---------- 订单簿 ---------- */
.book-card{padding:0;display:flex;flex-direction:column;overflow:hidden}
.book-title{font-weight:600;font-size:12.5px;padding:10px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.book-sym{font-size:11px;color:var(--text3);font-weight:400}
.book-head{display:flex;justify-content:space-between;padding:5px 12px;font-size:10px;color:var(--text3);border-bottom:1px solid var(--border)}
.book-head .r{text-align:right}
.book-asks,.book-bids{flex:1;display:flex;flex-direction:column}
.book-asks{justify-content:flex-end}
.book-row{position:relative;display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;padding:2px 12px;font:11px/1.5 "Menlo",monospace;font-variant-numeric:tabular-nums;cursor:default}
.book-row .bar{position:absolute;top:0;bottom:0;right:0;opacity:.13;z-index:0}
.book-row.ask .bar{background:var(--red)}
.book-row.bid .bar{background:var(--green)}
.book-row span{position:relative;z-index:1}
.book-row .r{text-align:right}
.book-row.ask .bp{color:var(--red)}.book-row.bid .bp{color:var(--green)}
.book-row .bs{color:var(--text)}.book-row .bc{color:var(--text3)}
.book-mid{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(--card2)}
.book-mid-px{font:700 14px/1 "Menlo",monospace}
.book-mid-px.pos{color:var(--green)}.book-mid-px.neg{color:var(--red)}
.book-mid-lbl{font-size:10px;color:var(--text3)}

/* ---------- 持仓 / 成交 标签页 ---------- */
.panel-card{padding:0;overflow:hidden}
.panel-tabs{display:flex;align-items:center;gap:4px;padding:6px 12px;border-bottom:1px solid var(--border)}
.panel-tab{background:transparent;border:none;color:var(--text2);font-size:13px;font-weight:600;padding:7px 12px;border-radius:7px;position:relative}
.panel-tab.active{color:var(--text);background:var(--bg2)}
.panel-tab i{font-style:normal;font-size:11px;color:var(--text3);margin-left:3px}
.panel-tab.active i{color:var(--gold)}
.panel-tabs .mini-btn{margin-left:auto}
.panel-body{min-height:120px;overflow-x:auto}
.panel-body .pos-table{min-width:560px}
.pos-table{width:100%;border-collapse:collapse;font-size:12.5px}
.pos-table th{text-align:right;color:var(--text3);font-weight:500;padding:9px 14px;font-size:11px;border-bottom:1px solid var(--border)}
.pos-table th:first-child{text-align:left}
.pos-table td{text-align:right;padding:10px 14px;border-bottom:1px solid var(--border);font-variant-numeric:tabular-nums}
.pos-table td:first-child{text-align:left}
.pos-table tr:last-child td{border-bottom:none}
.pos-table .empty{text-align:center;color:var(--text3);padding:30px}
.badge{font-size:11px;padding:3px 8px;border-radius:6px;font-weight:600}
.badge.long{color:var(--green);background:rgba(14,203,129,.13)}
.badge.short{color:var(--red);background:rgba(246,70,93,.13)}
.mm-tag{display:inline-block;margin-left:5px;font-size:10px;color:var(--text3);border:1px solid var(--border2);border-radius:4px;padding:1px 4px}
.liq{color:var(--red)}
.pos-table .pos{color:var(--green)}.pos-table .neg{color:var(--red)}
.roe{display:block;font-size:10.5px;opacity:.75}
.mini-btn{background:var(--bg2);border:1px solid var(--border2);color:var(--text2);font-size:11.5px;padding:4px 10px;border-radius:6px}
.mini-btn:hover{color:var(--text)}
.mini-btn.danger{color:var(--red);border-color:rgba(246,70,93,.4)}
.mini-btn.danger:disabled{opacity:.4;cursor:not-allowed}
.trade-log{max-height:260px;overflow-y:auto;padding:4px 0}
.log-row{display:flex;align-items:center;gap:10px;padding:6px 14px;font-size:12px;border-bottom:1px solid rgba(255,255,255,.03)}
.log-row .t{color:var(--text3);font:11px "Menlo",monospace;min-width:64px}
.log-row .long{color:var(--green)}.log-row .short{color:var(--red)}
.log-row .pos{color:var(--green)}.log-row .neg{color:var(--red)}
.log-row .muted{color:var(--text3);margin-left:auto;font-size:11px}
.log-row .reset{color:var(--gold)}
.trade-log .empty{text-align:center;color:var(--text3);padding:26px;font-size:12px}

/* ---------- 账户卡 ---------- */
.acct-card{padding:14px 16px}
.acct-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.acct-label{font-size:12px;color:var(--text2)}
.acct-mode{font-size:11px;color:var(--blue);background:rgba(79,142,247,.12);padding:2px 9px;border-radius:10px;font-weight:600}
.acct-eq{font:700 24px/1.1 "Menlo",monospace;margin-bottom:14px}
.acct-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 10px;margin-bottom:14px}
.acct-grid>div{display:flex;flex-direction:column;gap:3px}
.acct-grid label{font-size:11px;color:var(--text3)}
.acct-grid span{font:600 14px/1.1 "Menlo",monospace;font-variant-numeric:tabular-nums}
.acct-grid .kpi-num.pos{color:var(--green)}.acct-grid .kpi-num.neg{color:var(--red)}
.reset-btn{width:100%;background:var(--bg2);border:1px solid var(--border2);color:var(--text2);padding:9px;border-radius:9px;font-size:12.5px;font-weight:500}
.reset-btn:hover{color:var(--text);border-color:var(--gold)}

/* ---------- 下单卡 ---------- */
.order-card{padding:14px 16px}
.side-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.side-tab{padding:10px;border-radius:9px;border:1px solid var(--border);background:var(--bg2);color:var(--text2);font-weight:700;font-size:14px;transition:.15s}
.side-tab.long.active{color:#fff;background:linear-gradient(135deg,#0ba968,#0ecb81);border-color:transparent}
.side-tab.short.active{color:#fff;background:linear-gradient(135deg,#d8344b,#f6465d);border-color:transparent}
.mm-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.mm-btn{padding:7px;border-radius:8px;border:1px solid var(--border);background:var(--bg2);color:var(--text2);font-size:12.5px;font-weight:600}
.mm-btn.active{color:var(--text);border-color:var(--gold);background:rgba(240,185,11,.1)}
.field{display:block;margin-bottom:11px}
.field>span{font-size:11.5px;color:var(--text2);margin-bottom:5px;display:flex;justify-content:space-between;align-items:baseline}
.field>span b{color:var(--gold)}
.field>span .avail{color:var(--text3);font-weight:400;font-size:11px}
.field input[type=number]{width:100%;background:var(--bg2);border:1px solid var(--border);color:var(--text);border-radius:9px;padding:10px 12px;font:600 14px/1 "Menlo",monospace}
.field input[type=number]:focus{outline:none;border-color:var(--accent)}
.field input[type=range]{width:100%;accent-color:var(--gold);margin-top:2px}
.pcts{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:-3px 0 12px}
.pct-btn{background:var(--bg2);border:1px solid var(--border);color:var(--text2);font-size:12px;padding:6px 0;border-radius:7px}
.pct-btn:hover{color:var(--text);border-color:var(--border2)}
.tpsl{display:flex;gap:10px}
.field.half{flex:1}
.field.half input{font-size:13px;padding:8px 10px}
.submit-btn{width:100%;padding:12px;border:none;border-radius:10px;font-weight:700;font-size:15px;color:#fff;transition:.15s}
.submit-btn.long{background:linear-gradient(135deg,#0ba968,#0ecb81);box-shadow:0 4px 14px rgba(14,203,129,.28)}
.submit-btn.short{background:linear-gradient(135deg,#d8344b,#f6465d);box-shadow:0 4px 14px rgba(246,70,93,.28)}
.submit-btn:hover{filter:brightness(1.08)}
.hint{font-size:10.5px;color:var(--text3);margin-top:9px;line-height:1.5}

/* ---------- 境界卡 ---------- */
.realm-card{padding:14px 16px;background:linear-gradient(150deg,rgba(184,134,11,.09),rgba(79,142,247,.04)),var(--card);border-color:var(--border2)}
.realm-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.realm-label{font-size:11.5px;color:var(--text2)}
.realm-name-lg{font-weight:800;font-size:22px;letter-spacing:2px;background:linear-gradient(90deg,#f0b90b,#c99a3a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.realm-prog-wrap{height:7px;background:var(--bg2);border-radius:6px;overflow:hidden;border:1px solid var(--border)}
.realm-prog{height:100%;width:0;background:linear-gradient(90deg,#f0b90b,#c99a3a);border-radius:6px;transition:width .4s}
.realm-next{font-size:11px;color:var(--text2);margin-top:8px}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);background:var(--card);border:1px solid var(--border2);color:var(--text);padding:11px 20px;border-radius:10px;font-size:13.5px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:.25s;z-index:100;max-width:90vw}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.ok{border-color:rgba(14,203,129,.5)}
.toast.err{border-color:rgba(246,70,93,.5)}

/* ---------- 平板 ---------- */
@media (max-width:1080px){
  .trade-grid{grid-template-columns:minmax(0,1fr) 300px;grid-template-areas:"chart side" "book side" "panel panel"}
}

/* ---------- H5 ---------- */
@media (max-width:760px){
  .trade-grid{display:flex;flex-direction:column;padding:8px;gap:8px}
  .tg-side{order:1}.tg-book{order:2}.tg-panel{order:3}
  .topbar{padding:8px 12px;gap:8px}
  .logo{display:none}
  .user{display:none}
  .rc-eq{display:none}
  .market-strip{gap:10px 14px;padding:8px 12px;top:47px}
  .ms-stats{display:none}
  .ms-spacer{display:none}
  .ms-px{font-size:17px}
  .ms-modes{order:5;width:100%}
  .ms-ctrls{order:6}
  .strip-input{max-width:108px}
  .book-asks,.book-bids{max-height:none}
  .chart-box{height:340px}
  .acct-eq{font-size:21px}
  .pos-table{font-size:11.5px}
  .pos-table th,.pos-table td{padding:9px 8px}
  /* 触摸目标 ≥36px */
  .mode-btn,.ghost-btn,.pct-btn,.speed-btn,.osc-btn,.mm-btn,.side-tab{min-height:36px}
  .icon-btn,.icon-link{width:34px;height:34px}
}
@media (max-width:480px){
  .ind-row .sep{display:none}
  .chart-head{gap:7px}
  .ms-modes .mode-btn{flex:1;text-align:center;padding:6px 4px}
}

/* ══════════════════ OKX 1:1 复刻布局 ══════════════════ */
body.okx-page{overflow:hidden}
/* 顶部行情条 */
.okx-top{display:flex;align-items:center;gap:18px;height:52px;padding:0 12px;background:var(--card);border-bottom:1px solid var(--border)}
.ot-sym{display:flex;align-items:center;gap:8px;position:relative}
.ot-star{background:transparent;border:none;color:var(--text2);font-size:15px;padding:4px 6px}
.ot-star:hover{color:var(--text)}
.sym-picker{display:flex;align-items:center;gap:6px;background:transparent;border:none;color:var(--text);font-weight:700;font-size:17px;padding:4px 6px;border-radius:6px}
.sym-picker:hover{background:var(--bg2)}
.sym-picker .sp-ico{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;background:#f7931a;color:#fff;border-radius:50%;font-size:12px}
.sym-picker .sp-perp{font-size:11px;color:var(--text3);font-weight:500;margin-left:-1px}
.sym-picker .caret{font-size:10px;color:var(--text3)}
.sym-picker:disabled{opacity:.55;cursor:not-allowed}
.ot-mark{display:flex;flex-direction:column;line-height:1.18;min-width:96px}
.otm-px{font:700 19px/1 "Menlo",monospace}
.otm-chg{font:600 12px/1 "Menlo",monospace;margin-top:3px}
.otm-chg.pos{color:var(--up)}.otm-chg.neg{color:var(--down)}
.ot-stats{display:flex;gap:22px}
.ot-stat{display:flex;flex-direction:column;gap:3px}
.ot-stat label{font-size:11px;color:var(--text3);white-space:nowrap}
.ot-stat span{font:600 12.5px/1 "Menlo",monospace;color:var(--text)}
.ot-stat .muted{color:var(--text3)}
.ot-spacer{flex:1}
.ot-modes{display:flex;gap:4px;background:var(--bg2);padding:3px;border-radius:7px}
.ot-modes .mode-btn{background:transparent;border:none;color:var(--text2);font-size:12.5px;font-weight:600;padding:5px 12px;border-radius:5px}
.ot-modes .mode-btn.active{background:var(--card);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.3)}
.ot-right{display:flex;align-items:center;gap:9px}

/* 主网格 */
.okx-grid{display:grid;height:calc(100vh - 52px);grid-template-columns:minmax(0,1fr) 258px 296px;grid-template-rows:minmax(0,1fr) 244px;grid-template-areas:"chart book trade" "pos pos trade";gap:1px;background:var(--border)}
.okx-chart{grid-area:chart;background:var(--card);display:flex;flex-direction:column;min-width:0;min-height:0}
.okx-book{grid-area:book;background:var(--card);display:flex;flex-direction:column;min-height:0;overflow:hidden}
.okx-trade{grid-area:trade;background:var(--card);display:flex;flex-direction:column;overflow-y:auto}
.okx-pos{grid-area:pos;background:var(--card);display:flex;flex-direction:column;min-width:0;overflow:hidden}

/* 图表工具条 */
.chart-toolbar{display:flex;align-items:center;gap:9px;padding:6px 10px;border-bottom:1px solid var(--border);flex-wrap:wrap;min-height:40px}
.ct-modectrl{display:flex}
.ct-sep{width:1px;height:16px;background:var(--border)}
.ct-tf{background:var(--bg2);border:1px solid var(--border);color:var(--text);border-radius:5px;padding:5px 8px;font-size:12px}
.strip-input{background:var(--bg2);border:1px solid var(--border);color:var(--text);border-radius:5px;padding:5px 8px;font-size:12px;max-width:104px}
.ghost-btn{background:var(--bg2);border:1px solid var(--border);color:var(--text2);font-size:12px;padding:5px 10px;border-radius:5px;white-space:nowrap}
.ghost-btn:hover{color:var(--text)}
.speeds{display:flex;gap:3px}
.speed-btn{background:transparent;border:1px solid var(--border);color:var(--text2);font-size:11.5px;padding:4px 8px;border-radius:5px}
.speed-btn.active{color:var(--text);border-color:var(--blue);background:rgba(79,142,247,.12)}
.ind-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.chk{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--text2);cursor:pointer}
.chk input{accent-color:var(--blue)}
.osc-btn{background:transparent;border:1px solid var(--border);color:var(--text2);font-size:11.5px;padding:4px 8px;border-radius:5px}
.osc-btn.active{color:var(--text);border-color:var(--blue);background:rgba(79,142,247,.12)}

/* 图表主体 + 左侧画线栏 */
.chart-main{flex:1;display:flex;min-height:0}
.draw-rail{width:38px;flex-shrink:0;display:flex;flex-direction:column;gap:2px;padding:6px 0;border-right:1px solid var(--border);align-items:center}
.draw-btn{width:28px;height:28px;background:transparent;border:none;color:var(--text2);font-size:14px;border-radius:5px;display:flex;align-items:center;justify-content:center}
.draw-btn:hover{background:var(--bg2);color:var(--text)}
.draw-btn.active{background:rgba(79,142,247,.16);color:var(--blue)}
.chart-wrap{flex:1;position:relative;min-width:0}
.chart-box{width:100%;height:100%;position:relative}
.chart-legend{position:absolute;top:6px;left:10px;z-index:4;display:flex;flex-wrap:wrap;gap:9px;font:11px/1.4 "Menlo",monospace;color:var(--text2);pointer-events:none;text-shadow:0 1px 3px rgba(0,0,0,.7)}
body.light .chart-legend{text-shadow:none}
.chart-legend b{font-weight:700}.chart-legend i{font-style:normal;margin-left:3px}

/* 订单簿 */
.book-tabs{display:flex;align-items:center;gap:14px;padding:9px 12px 7px;border-bottom:1px solid var(--border)}
.book-tabs .bt{font-size:13px;font-weight:600;color:var(--text)}
.book-tabs .bt.muted{color:var(--text3);font-weight:500}
.book-tabs .book-sym{margin-left:auto;font-size:11px;color:var(--text3)}
.book-head{display:flex;justify-content:space-between;padding:6px 12px 4px;font-size:10.5px;color:var(--text3)}
.book-head .r{text-align:right}
.book-asks,.book-bids{flex:1;display:flex;flex-direction:column;overflow:hidden}
.book-asks{justify-content:flex-end}
.book-row{position:relative;display:grid;grid-template-columns:1fr 1fr 1fr;gap:2px;padding:1.5px 12px;font:11px/1.55 "Menlo",monospace;font-variant-numeric:tabular-nums}
.book-row .bar{position:absolute;top:0;bottom:0;right:0;opacity:.16;z-index:0}
.book-row.ask .bar{background:var(--down)}
.book-row.bid .bar{background:var(--up)}
.book-row span{position:relative;z-index:1}
.book-row .r{text-align:right}
.book-row.ask .bp{color:var(--down)}.book-row.bid .bp{color:var(--up)}
.book-row .bs{color:var(--text)}.book-row .bc{color:var(--text3)}
.book-mid{display:flex;align-items:center;gap:8px;padding:6px 12px;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.book-mid-px{font:700 16px/1 "Menlo",monospace}
.book-mid-px.pos{color:var(--up)}.book-mid-px.neg{color:var(--down)}
.book-mid-lbl{font-size:10.5px;color:var(--text3)}
.book-ratio{display:flex;align-items:center;gap:6px;padding:8px 12px;font-size:11px;border-top:1px solid var(--border)}
.book-ratio .br-buy{color:var(--up);display:flex;gap:5px}
.book-ratio .br-sell{color:var(--down);display:flex;gap:5px}
.book-ratio b{font-weight:700}
.br-bar{flex:1;height:6px;border-radius:3px;background:var(--down);overflow:hidden;position:relative}
.br-bar i{position:absolute;left:0;top:0;bottom:0;background:var(--up);display:block}

/* 下单区 */
.trade-card{padding:12px;border-bottom:1px solid var(--border)}
.tc-row2{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.mm-tabs{display:flex;background:var(--bg2);border-radius:6px;padding:2px}
.mm-btn{background:transparent;border:none;color:var(--text2);font-size:12px;font-weight:600;padding:5px 12px;border-radius:4px}
.mm-btn.active{background:var(--card);color:var(--text)}
.lev-box{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text2)}
.lev-box b{color:var(--gold);font:700 13px/1 "Menlo",monospace}
.lev-range{width:100%;accent-color:var(--gold);margin-bottom:10px}
.ord-types{display:flex;gap:16px;border-bottom:1px solid var(--border);margin-bottom:10px}
.ord-types .ot-tab{font-size:13px;font-weight:500;color:var(--text3);padding-bottom:8px;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;transition:color .15s,border-color .15s}
.ord-types .ot-tab:hover{color:var(--text2)}
.ord-types .ot-tab.active{color:var(--text);font-weight:600;border-bottom-color:var(--accent)}
.ord-types .ot-tab.muted{color:var(--text3);border-color:transparent;font-weight:500}
.field{display:block;margin-bottom:10px}
.field .f-lbl{display:block;font-size:11px;color:var(--text3);margin-bottom:4px}
.field input[type=number]{width:100%;background:var(--bg2);border:1px solid var(--border);color:var(--text);border-radius:6px;padding:9px 11px;font:600 14px/1 "Menlo",monospace}
.field input[type=number]:focus{outline:none;border-color:var(--accent)}
.pct-slider{margin-bottom:10px}
.pct-slider #pctRange{width:100%;accent-color:var(--blue);margin-bottom:6px}
.pcts{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.pct-btn{background:var(--bg2);border:1px solid var(--border);color:var(--text2);font-size:11px;padding:5px 0;border-radius:5px}
.pct-btn:hover{color:var(--text);border-color:var(--border2)}
.tp-toggle{margin-bottom:8px}
.tpsl{display:flex;gap:8px}
.field.half{flex:1}.field.half input{font-size:13px;padding:8px 9px}
.avail-row{display:flex;justify-content:space-between;font-size:12px;color:var(--text2);margin:4px 0 10px}
.avail-row b{color:var(--text);font-family:"Menlo",monospace}
.order-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.act-btn{padding:11px;border:none;border-radius:6px;font-weight:700;font-size:14px;color:#fff}
.act-btn.long{background:var(--up)}.act-btn.short{background:var(--down)}
.act-btn:hover{filter:brightness(1.08)}

/* 账户/合约模式卡 */
.acct-card2{padding:12px}
.ac-head{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--text2);margin-bottom:10px}
.ac-head b{color:var(--text)}
.ac-reset{background:var(--bg2);border:1px solid var(--border2);color:var(--text2);font-size:11.5px;padding:4px 9px;border-radius:5px}
.ac-reset:hover{color:var(--text);border-color:var(--gold)}
.ac-eqrow{margin-bottom:12px}
.ac-eqrow label{display:block;font-size:11px;color:var(--text3);margin-bottom:3px}
.ac-eq{font:700 22px/1 "Menlo",monospace}
.ac-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px 10px;margin-bottom:14px}
.ac-grid label{display:block;font-size:11px;color:var(--text3);margin-bottom:3px}
.ac-grid span{font:600 13px/1 "Menlo",monospace}
.kpi-num.pos{color:var(--up)}.kpi-num.neg{color:var(--down)}
.ac-realm{border-top:1px solid var(--border);padding-top:12px}
.acr-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.acr-lbl{font-size:11.5px;color:var(--text2)}
.realm-name-lg{font-weight:800;font-size:19px;letter-spacing:2px;background:linear-gradient(90deg,#f0b90b,#c99a3a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.realm-prog-wrap{height:6px;background:var(--bg2);border-radius:4px;overflow:hidden;border:1px solid var(--border)}
.realm-prog{height:100%;width:0;background:linear-gradient(90deg,#f0b90b,#c99a3a);border-radius:4px;transition:width .4s}
.realm-next{font-size:11px;color:var(--text2);margin-top:7px}

/* 底部持仓 */
.okx-pos .panel-tabs{display:flex;align-items:center;gap:2px;padding:6px 8px;border-bottom:1px solid var(--border);flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
.okx-pos .panel-tabs::-webkit-scrollbar{display:none}
.panel-tab{flex-shrink:0;white-space:nowrap;background:transparent;border:none;color:var(--text2);font-size:12.5px;font-weight:600;padding:6px 9px;border-radius:5px}
.panel-tab.active{color:var(--text);background:var(--bg2)}
.panel-tab i{font-style:normal;font-size:11px;color:var(--text3);margin-left:2px}
.panel-tab.active i{color:var(--gold)}
.panel-tabs .mini-btn{margin-left:auto;flex-shrink:0;white-space:nowrap}
.mini-btn{background:var(--bg2);border:1px solid var(--border2);color:var(--text2);font-size:11.5px;padding:4px 10px;border-radius:5px}
.mini-btn.danger{color:var(--down);border-color:rgba(46,189,133,.4)}
.mini-btn.danger:disabled{opacity:.4;cursor:not-allowed}
.panel-body{flex:1;overflow:auto}
.okx-pos{overflow:hidden}
.okx-pos .panel-body{height:calc(100% - 38px)}
.pos-table{width:100%;border-collapse:collapse;font-size:12px}
.pos-table th{text-align:right;color:var(--text3);font-weight:500;padding:8px 12px;font-size:11px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--card)}
.pos-table th:first-child{text-align:left}
.pos-table td{text-align:right;padding:9px 12px;border-bottom:1px solid var(--border);font-variant-numeric:tabular-nums}
.pos-table td:first-child{text-align:left}
.pos-table .empty{text-align:center;color:var(--text3);padding:30px}
.badge{font-size:11px;padding:2px 7px;border-radius:4px;font-weight:600}
.badge.long{color:var(--up);background:rgba(246,70,93,.14);background:color-mix(in srgb,var(--up) 14%,transparent)}
.badge.short{color:var(--down);background:rgba(46,189,133,.14);background:color-mix(in srgb,var(--down) 14%,transparent)}
.mm-tag{font-size:10px;color:var(--text3);border:1px solid var(--border2);border-radius:3px;padding:0 4px;margin-left:4px}
.liq{color:var(--gold)}
.pos-table .pos{color:var(--up)}.pos-table .neg{color:var(--down)}
.roe{display:block;font-size:10px;opacity:.8}

/* 全币种搜索弹层(顶栏下) */
.sym-pop{position:absolute;top:46px;left:30px;z-index:60;width:300px;max-width:88vw;background:var(--card);border:1px solid var(--border2);border-radius:8px;box-shadow:var(--shadow);overflow:hidden}
.sym-search{width:100%;background:var(--bg2);border:none;border-bottom:1px solid var(--border);color:var(--text);padding:11px 14px;font-size:13px}
.sym-search:focus{outline:none}
.sym-list{max-height:340px;overflow-y:auto}
.sym-item{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.03)}
.sym-item:hover{background:var(--bg2)}
.sym-item .s-name{font-weight:600;font-size:13px}
.sym-item .s-ex{display:flex;gap:4px}
.sym-item .s-tag{font-size:10px;padding:1px 6px;border-radius:4px;color:var(--text3);border:1px solid var(--border2)}
.sym-item .s-tag.bn{color:var(--gold);border-color:rgba(240,185,11,.4)}
.sym-item .s-tag.okx{color:var(--blue);border-color:rgba(79,142,247,.4)}
.sym-list .empty{padding:18px;text-align:center;color:var(--text3);font-size:12px}

.realm-chip{display:flex;align-items:center;gap:6px;padding:4px 10px;border-radius:16px;border:1px solid rgba(184,134,11,.3);background:linear-gradient(135deg,rgba(240,185,11,.1),rgba(184,134,11,.1))}
.rc-ico{font-size:12px}.rc-name{font-weight:700;font-size:12.5px;background:linear-gradient(90deg,#f0b90b,#c99a3a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.rc-eq{font:600 11.5px/1 "Menlo",monospace;color:var(--text2)}
.icon-btn,.icon-link{background:transparent;border:1px solid var(--border);color:var(--text2);width:28px;height:28px;border-radius:6px;font-size:13px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.icon-btn:hover,.icon-link:hover{color:var(--text);border-color:var(--border2)}
.user{font-size:12px;color:var(--text2);max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ══════════════════ H5 · 币安 App 式 ══════════════════ */
@media (max-width:860px){
  body.okx-page{overflow:auto}

  /* —— 顶栏：紧凑，币种+价格一行，模式+徽章一行 —— */
  .okx-top{flex-wrap:wrap;height:auto;padding:8px 10px;gap:8px 10px;position:sticky;top:0;z-index:50}
  .ot-sym{order:1}
  .ot-mark{order:2;margin-left:auto;align-items:flex-end;min-width:0}
  .otm-px{font-size:17px}
  .ot-stats,.ot-spacer{display:none}
  .ot-modes{order:4}
  .ot-right{order:3;width:100%;justify-content:flex-end;gap:8px}
  .ot-right .realm-chip{margin-right:auto}
  .user{display:none}.rc-eq{display:inline}

  /* —— 主体：盘口 | 下单 左右分栏；图表、持仓依次在下 —— */
  .okx-grid{
    display:grid;height:auto;gap:6px;padding:6px;background:var(--bg);
    grid-template-columns:minmax(0,43%) minmax(0,57%);
    grid-template-rows:auto auto auto;
    grid-template-areas:"book trade" "chart chart" "pos pos";
  }
  .okx-chart,.okx-book,.okx-trade,.okx-pos{border-radius:10px;border:1px solid var(--border);overflow:hidden}

  /* 盘口：靠上，自然高度(不拉伸) */
  .okx-book{align-self:stretch}
  .book-asks,.book-bids{flex:none}
  .book-tabs{padding:8px 10px 6px;gap:10px}
  .book-tabs .bt{font-size:12px}
  .book-head{padding:5px 10px 3px;font-size:10px}
  .book-row{padding:2px 10px;font-size:10.5px}
  .book-mid{padding:5px 10px}.book-mid-px{font-size:14px}
  .book-ratio{padding:7px 10px;font-size:10px;gap:5px}

  /* 下单：内边距收紧，开多/开空竖排(各占一行，像币安) */
  .okx-trade{overflow:visible}
  .trade-card{padding:10px}
  .ord-types{gap:14px}
  .field{margin-bottom:9px}
  .pcts{gap:4px}.pct-btn{font-size:10.5px;padding:5px 0}
  .order-actions{grid-template-columns:1fr;gap:7px}
  .act-btn{padding:12px;font-size:15px}

  /* 账户卡：紧凑 */
  .acct-card2{padding:10px}
  .ac-eq{font-size:19px}
  .ac-grid{gap:9px 8px}
  .ac-grid span{font-size:12px}
  .realm-name-lg{font-size:17px}

  /* 图表：工具条单行横滑(像币安指标行)；图高 340 */
  .chart-toolbar{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:8px;padding:7px 10px}
  .chart-toolbar::-webkit-scrollbar{display:none}
  .ind-row{flex-wrap:nowrap}
  .chart-main{flex-direction:column;min-height:0}
  .chart-wrap{height:340px}.chart-box{height:340px}
  .draw-rail{flex-direction:row;width:100%;border-right:none;border-bottom:1px solid var(--border);padding:4px 6px;gap:4px;overflow-x:auto}

  /* 持仓表：横向滚动 */
  .okx-pos .panel-body{height:auto;max-height:340px;overflow:auto}
  .pos-table{min-width:600px}
}

/* 极窄屏(<400)进一步收紧 */
@media (max-width:400px){
  .okx-grid{grid-template-columns:minmax(0,45%) minmax(0,55%)}
  .otm-px{font-size:15px}
  .ac-eq{font-size:17px}
}

/* ══════════════════ 底部 Tab 导航（4 页共用）══════════════════ */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:200;display:flex;height:56px;
  background:var(--card);border-top:1px solid var(--border);padding-bottom:env(safe-area-inset-bottom,0)}
.tb-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--text3);text-decoration:none;font-size:10.5px;font-weight:600;background:none;border:none}
.tb-item .ti{line-height:0;display:flex}
.tb-item .ti svg{width:23px;height:23px;display:block}
.tb-item.active{color:var(--accent)}
body.has-tabbar{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))} /* 含刘海机 home indicator，否则列表末尾被 tabbar 永久遮住 */
/* 交易页(固定视口)：桌面给底栏留位；移动端 body 滚动加底部留白 */
body.okx-page .okx-grid{height:calc(100vh - 52px - 56px)}
@media (max-width:860px){
  body.okx-page{padding-bottom:62px}
}

/* ══════════════════ 首页 · 行情列表 ══════════════════ */
.mk-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 16px 10px;
  position:sticky;top:0;background:var(--bg);z-index:10}
.mk-top .mk-back{font-size:12.5px;font-weight:600;color:var(--text2);text-decoration:none;
  border:1px solid var(--border);border-radius:8px;padding:5px 10px;white-space:nowrap;flex-shrink:0}
.mk-top .mk-back:hover{color:var(--text);border-color:var(--border2)}
/* 标题：绝对居中(不受两侧宽度影响) + 渐变紫字 + 徽记 */
.mk-title{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:6px;font-size:19px;font-weight:800;letter-spacing:1.5px;
  white-space:nowrap;pointer-events:none}
.mkt-ic{font-size:15px;filter:drop-shadow(0 0 6px rgba(184,134,11,.55))}
.mkt-txt{background:linear-gradient(90deg,var(--accent),var(--accent2) 55%,var(--neon));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* 分类 tab(热门/美股/涨幅/跌幅) */
.mk-cats{display:flex;gap:4px;max-width:760px;margin:0 auto;padding:2px 10px 6px;overflow-x:auto}
.mk-cats::-webkit-scrollbar{display:none}
.mk-cat{flex-shrink:0;background:none;border:none;color:var(--text3);font-size:14px;font-weight:600;
  padding:6px 14px;border-radius:9px;white-space:nowrap;cursor:pointer;transition:.15s}
.mk-cat.active{color:#fff;font-weight:800;background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 3px 10px rgba(184,134,11,.35)}
.mk-actions{display:flex;gap:8px;align-items:center}
/* 总资产估值 hero（千羽宗金卡 + 走势线）*/
.mk-assets{width:calc(100% - 24px);max-width:760px;margin:6px auto 12px;padding:16px 18px;cursor:pointer;
  display:flex;align-items:center;gap:12px;position:relative;overflow:hidden;border-radius:18px;color:#fff;
  background:radial-gradient(120% 140% at 100% 0%,#7a5c15 0%,#4a3610 48%,#251a06 100%);
  box-shadow:0 12px 30px rgba(120,90,20,.4),inset 0 1px 0 rgba(255,240,200,.14)}
.mk-assets::after{content:"";position:absolute;right:-40px;top:-60px;width:180px;height:180px;
  background:radial-gradient(circle,rgba(224,197,106,.3),transparent 60%);pointer-events:none}
.mka-l{flex:1;min-width:0;position:relative;z-index:1}
.mka-head{display:flex;align-items:center;gap:7px}
.mka-lbl{font-size:12.5px;color:rgba(255,246,220,.72);letter-spacing:.5px}
.mka-eye{background:none;border:none;color:rgba(255,246,220,.72);font-size:14px;line-height:1;padding:2px 4px;cursor:pointer}
.mka-val{display:flex;align-items:baseline;gap:7px;margin:7px 0 7px}
.mka-val #mkAssetVal{font:800 30px/1 "Menlo",monospace;letter-spacing:.5px;color:#fff}
.mka-unit{font-size:13px;color:rgba(255,246,220,.72);font-weight:600}
.mka-sub{font-size:12px;color:rgba(255,246,220,.85);display:flex;align-items:center;gap:9px}
.mka-sub b{font-weight:800;color:#ffe08a}
.mka-go{margin-left:auto;color:#f0d98a;font-weight:600}
.mka-chart{width:118px;flex-shrink:0;position:relative;z-index:1;display:flex;align-items:center;justify-content:flex-end}
.mka-chart svg{width:118px;height:54px;overflow:visible}
/* 浅色(千羽宗默认)：奶油金卡 + 深字，跟主站一致(不再过深) */
body.light .mk-assets{color:#463618;border:1px solid #e6d2a0;
  background:linear-gradient(135deg,#fdf7e6 0%,#f3e3b8 100%);
  box-shadow:0 8px 22px rgba(180,140,40,.2),inset 0 1px 0 rgba(255,255,255,.6)}
body.light .mk-assets::after{background:radial-gradient(circle,rgba(184,134,11,.16),transparent 60%)}
body.light .mka-lbl,body.light .mka-eye,body.light .mka-unit{color:#9a8654}
body.light .mka-val #mkAssetVal{color:#43370f}
body.light .mka-sub{color:#7a6a3e}
body.light .mka-sub b{color:#1f8a5b}
body.light .mka-go{color:#b8860b}
.mk-search-wrap{padding:0 12px 8px;max-width:760px;margin:0 auto}
.mk-search-box{display:flex;align-items:center;gap:9px;background:var(--card2);border:1px solid var(--border);
  border-radius:13px;padding:0 14px;transition:.15s}
.mk-search-box:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(184,134,11,.14);background:var(--card)}
.mk-search-ic{color:var(--text3);flex-shrink:0}
.mk-search-box:focus-within .mk-search-ic{color:var(--accent)}
.mk-search{flex:1;min-width:0;background:none;border:none;color:var(--text);padding:12px 0;font-size:13.5px}
.mk-search:focus{outline:none}
.mk-search::placeholder{color:var(--text3)}
.mk-head{display:grid;grid-template-columns:1fr 96px 88px;gap:10px;padding:6px 20px;
  font-size:11px;color:var(--text3);max-width:760px;margin:0 auto}
.mk-head .r{text-align:right}
.mk-list{padding:2px 8px;max-width:760px;margin:0 auto}
.mk-row{display:grid;grid-template-columns:1fr 96px 88px;gap:10px;align-items:center;
  padding:11px 12px;text-decoration:none;color:var(--text);border-radius:12px;transition:background .12s,transform .06s;
  border-bottom:1px solid var(--border);border-bottom-color:color-mix(in srgb,var(--border) 60%,transparent)}
.mk-list .mk-row:last-child{border-bottom:none}
.mk-row:hover{background:var(--card2)}
.mk-row:active{background:var(--card2);transform:scale(.99)}
.mk-coin{display:flex;align-items:center;gap:11px;min-width:0}
.mk-ico{position:relative;width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;overflow:hidden;
  box-shadow:0 2px 8px rgba(184,134,11,.28)}
.mk-ico b{font-weight:800} /* 字母兜底：图标未加载/加载失败时都露出，不留空圈 */
.mk-ico img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mk-name{font-weight:700;font-size:15px;display:flex;flex-direction:column;line-height:1.25;min-width:0}
.mk-name .mkn-top{display:flex;align-items:center;gap:5px}
.mk-name i{font-style:normal;font-size:10.5px;color:var(--text3);font-weight:500}
.mk-tag{font-size:9px;font-weight:700;color:var(--text3);border:1px solid var(--border2);border-radius:3px;padding:0 4px;line-height:1.5}
.mk-px{text-align:right;font:700 14px/1.25 "Menlo",monospace;display:flex;flex-direction:column;gap:2px}
.mk-px .mk-vol{font-size:10px;color:var(--text3);font-weight:500}
.mk-chg{text-align:center;font:700 13.5px/1 "Menlo",monospace;padding:9px 4px;border-radius:8px;color:#fff}
.mk-chg.pos{background:var(--up)}.mk-chg.neg{background:var(--down)}
.mk-empty{text-align:center;color:var(--text3);padding:44px 20px;font-size:13px}

/* ══════════════════ 我的 · 个人中心 ══════════════════ */
.pf{max-width:640px;margin:0 auto;padding:12px 14px 18px}
/* ── Hero：用户 + 修为 ── */
.pf-hero{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:18px;margin-bottom:18px;position:relative;overflow:hidden}
.pf-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(130% 90% at 100% 0%,rgba(184,134,11,.20),transparent 58%);pointer-events:none}
.pf-hero>*{position:relative}
.pfh-top{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.pf-avatar{width:58px;height:58px;border-radius:50%;background:linear-gradient(135deg,#f0b90b,#c99a3a);
  color:#fff;font-weight:800;font-size:25px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:0 5px 16px rgba(184,134,11,.42);border:2px solid rgba(255,255,255,.35)}
.pfh-id{min-width:0}
.pf-uname{font-size:19px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-utier{display:inline-block;margin-top:6px;font-size:11px;font-weight:700;color:var(--accent);
  background:rgba(184,134,11,.14);border:1px solid rgba(184,134,11,.28);padding:2px 10px;border-radius:20px}
.pfh-realm{background:var(--card2);border:1px solid var(--border);border-radius:14px;padding:14px 15px}
.pfhr-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:11px}
.pfhr-lbl{font-size:12px;color:var(--text3);white-space:nowrap}
.pfhr-name{font-weight:800;font-size:22px;letter-spacing:2px;line-height:1;
  background:linear-gradient(90deg,#f0b90b,#c99a3a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.pfhr-next{font-size:11.5px;color:var(--text3);margin-top:10px}
/* ── 账户 ── */
.pf-sec-t{font-size:14px;color:var(--text);margin:2px 2px 11px;font-weight:800}
.pf-sec-x{font-size:11.5px;color:var(--text3);font-weight:500}
.pf-accts{display:grid;gap:11px;margin-bottom:18px}
.pf-acct{background:var(--card);border:1px solid var(--border);border-radius:15px;padding:15px 15px 15px 17px;position:relative;overflow:hidden}
.pf-acct::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(var(--accent),var(--accent2))}
.pfa-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.pfa-mode{font-size:13.5px;font-weight:700}
.pfa-reset{background:var(--bg2);border:1px solid var(--border2);color:var(--text2);font-size:11.5px;padding:5px 12px;border-radius:8px;cursor:pointer;transition:.15s}
.pfa-reset:hover{color:var(--accent);border-color:var(--accent)}
.pfa-eq{font:800 25px/1 "Menlo",monospace;margin-bottom:14px;letter-spacing:-.5px}
.pfa-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 12px}
.pfa-grid>div{background:var(--card2);border-radius:9px;padding:9px 11px}
.pfa-grid label{display:block;font-size:10.5px;color:var(--text3);margin-bottom:4px}
.pfa-grid span{font:700 13.5px/1 "Menlo",monospace}
.pfa-grid .pos{color:var(--up)}.pfa-grid .neg{color:var(--down)}
/* ── 操作 ── */
.pf-links{display:grid;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.pf-link{display:flex;align-items:center;justify-content:space-between;padding:15px 16px;background:var(--card);
  color:var(--text);text-decoration:none;font-size:14.5px;font-weight:500;border:none;width:100%;text-align:left;cursor:pointer;font-family:inherit;transition:.15s}
.pf-link:hover{background:var(--card2)}
.pf-link .pfl-l{display:flex;align-items:center;gap:11px}
.pf-link .pfl-l i{font-style:normal;font-size:16px;width:22px;text-align:center}
.pf-link.danger{color:var(--down)}
.pf-arr{color:var(--text3);font-size:18px}
@media(min-width:680px){ .pf-accts{grid-template-columns:repeat(2,1fr)} }

/* ══════════════════ 交易页(币安式：盘口|下单 + 持仓) ══════════════════ */
.tp-head{display:flex;align-items:center;gap:10px;padding:11px 14px 9px;position:sticky;top:0;z-index:20;background:var(--bg)}
.tp-sym-wrap{display:flex;align-items:center;gap:10px;position:relative;min-width:0}
.tp-head .sym-picker{display:flex;align-items:center;gap:6px;background:transparent;border:none;color:var(--text);font-weight:800;font-size:17px;padding:2px 4px}
.tp-head .sym-picker .sp-ico{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:#fff;border-radius:50%;font-size:12px}
.tp-head .sym-picker .sp-perp{font-size:11px;color:var(--text3);font-weight:500}
.tp-head .sym-picker .caret{font-size:10px;color:var(--text3)}
.tp-head .otm-chg{font:600 13px/1 "Menlo",monospace}
.tp-head .otm-chg.pos{color:var(--up)}.tp-head .otm-chg.neg{color:var(--down)}
.tp-head-r{margin-left:auto;display:flex;align-items:center;gap:6px}
.tp-icon{width:32px;height:32px;border-radius:9px;border:1px solid var(--border);background:transparent;color:var(--text2);
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-size:15px}
.tp-icon:hover{color:var(--accent);border-color:var(--border2)}
.tp-modes{order:0;display:flex;gap:4px;margin:0 14px 8px;background:var(--card2);padding:3px;border-radius:9px;width:max-content}
.tp-modes .mode-btn{background:transparent;border:none;color:var(--text2);font-size:12.5px;font-weight:600;padding:6px 16px;border-radius:6px}
.tp-modes .mode-btn.active{background:var(--card);color:var(--accent);font-weight:800;box-shadow:0 1px 4px rgba(0,0,0,.1)}
.tp-grid{display:grid;gap:6px;padding:0 6px 6px;max-width:900px;margin:0 auto;
  grid-template-columns:minmax(0,43%) minmax(0,57%);grid-template-areas:"book trade" "pos pos"}
.tp-grid .okx-book{grid-area:book;align-self:stretch}
.tp-grid .okx-trade{grid-area:trade;overflow:visible}
.tp-grid .okx-pos{grid-area:pos}
.tp-grid .okx-book,.tp-grid .okx-trade,.tp-grid .okx-pos{background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.tp-grid .book-asks,.tp-grid .book-bids{flex:1}
.tp-grid .order-actions{grid-template-columns:1fr;gap:7px}
.tp-grid .okx-pos .panel-body{max-height:340px;overflow:auto}
.tp-grid .pos-table{min-width:600px}

/* ══════════════════ K线页(全屏图表) ══════════════════ */
.kl-page{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden;background:var(--bg)} /* dvh：移动端地址栏收缩时底部按钮不被浏览器 UI 盖住 */
.kl-head{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--border);flex-shrink:0}
.kl-back{color:var(--text2);display:flex;text-decoration:none;flex-shrink:0}
.kl-back:hover{color:var(--text)}
.kl-sym{flex:1;position:relative;min-width:0}
.kl-sym .sym-picker{display:flex;align-items:center;gap:6px;background:transparent;border:none;color:var(--text);font-weight:800;font-size:17px;padding:2px 4px}
.kl-sym .sym-picker .sp-perp{font-size:11px;color:var(--text3);font-weight:500}
.kl-sym .sym-picker .caret{font-size:10px;color:var(--text3)}
.kl-mode-badge{flex-shrink:0;font-size:11px;font-weight:700;color:var(--gold);background:rgba(240,185,11,.14);padding:3px 9px;border-radius:8px}
.kl-price{padding:10px 14px 12px;display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid var(--border);flex-shrink:0}
.klp-l{min-width:0}
.klp-lbl{font-size:11px;color:var(--text3);margin-bottom:3px}
.klp-px{font:800 28px/1 "Menlo",monospace;font-variant-numeric:tabular-nums}
.klp-r2{display:flex;align-items:baseline;gap:10px;margin-top:6px}
.klp-usd{font:600 13px/1 "Menlo",monospace;color:var(--text2)}
.klp-r2 .otm-chg{font:700 13px/1 "Menlo",monospace}
.klp-r2 .otm-chg.pos{color:var(--up)}.klp-r2 .otm-chg.neg{color:var(--down)}
.klp-mark{font-size:11.5px;color:var(--text3);margin-top:7px}
.klp-mark b{color:var(--text2);font-family:"Menlo",monospace;font-weight:600}
.klp-grid{display:grid;grid-template-columns:auto auto;gap:9px 26px;align-content:center;flex-shrink:0}
.klp-grid>div{display:flex;flex-direction:column;gap:3px}
.klp-grid label{font-size:11px;color:var(--text3);white-space:nowrap}
.klp-grid span{font:600 12px/1 "Menlo",monospace;color:var(--text);white-space:nowrap;font-variant-numeric:tabular-nums}
.kl-perf{display:flex;overflow-x:auto;border-bottom:1px solid var(--border);flex-shrink:0}
.kl-perf::-webkit-scrollbar{display:none}
.kl-perf>div{flex:1;min-width:62px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px}
.kl-perf label{font-size:11px;color:var(--text3)}
.kl-perf span{font:700 12.5px/1 "Menlo",monospace}
.kl-perf .pos{color:var(--up)}.kl-perf .neg{color:var(--down)}
.kl-page .chart-toolbar{flex-shrink:0;flex-wrap:nowrap;overflow-x:auto;gap:9px;padding:7px 12px;border-bottom:1px solid var(--border)}
.kl-page .chart-toolbar::-webkit-scrollbar{display:none}
.kl-page .ind-row{flex-wrap:nowrap}
.mode-ctrl-interval{display:flex;gap:2px}
.iv-btn{background:none;border:none;color:var(--text3);font-size:12.5px;font-weight:600;padding:5px 10px;border-radius:7px;white-space:nowrap}
.iv-btn.active{color:var(--accent);background:var(--card2);font-weight:800}
.kl-chart{flex:1;min-height:0}
.kl-page .chart-wrap{height:auto;flex:1;min-height:0}
.kl-page .chart-box{height:100%}
.kl-trade-btn{flex-shrink:0;display:block;margin:8px 12px;padding:13px;text-align:center;border-radius:13px;text-decoration:none;
  background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-weight:800;font-size:15px;
  box-shadow:0 4px 14px rgba(184,134,11,.3)}

/* 交易页两排头 + 收藏星 */
.tp-row1{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px 3px;position:sticky;top:0;z-index:20;background:var(--bg)}
.tp-row1 .tp-modes{margin:0;flex-wrap:nowrap}
.tp-row1 .tp-modes .mode-btn{padding:6px 12px}
.tp-row2{display:flex;align-items:center;gap:10px;padding:3px 14px 8px}
.tp-row2 .sym-picker .sp-ico{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:#fff;border-radius:50%;font-size:12px}
.tp-row2-r{margin-left:auto;display:flex;align-items:center;gap:6px}
.fav-star svg{fill:none}
.fav-star.on{color:var(--gold);border-color:var(--gold)}
.fav-star.on svg{fill:var(--gold);stroke:var(--gold)}

/* ══════════════════ 持仓/历史仓位 卡片(币安式) ══════════════════ */
.pos-cards{display:flex;flex-direction:column;gap:8px;padding:8px}
.pc-empty{text-align:center;color:var(--text3);padding:30px;font-size:13px}
.pos-card{background:var(--card2);border:1px solid var(--border);border-radius:12px;padding:12px 13px}
.pc-head{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.pc-side{font-size:11px;font-weight:800;color:#fff;padding:2px 7px;border-radius:4px}
.pc-side.long{background:var(--up)}.pc-side.short{background:var(--down)}
.pc-sym{font-size:15px;font-weight:800}
.pc-meta{font-size:11px;color:var(--text3)}
.pc-status{margin-left:auto;font-size:12.5px;color:var(--text2);font-weight:600}
.pc-row2{display:flex;justify-content:space-between;margin-bottom:13px}
.pc-cell label,.pc-g3>div label,.pc-g2>div label{display:block;font-size:11px;color:var(--text3);margin-bottom:4px}
.pc-cell.r,.pc-g3 .r,.pc-g2 .r{text-align:right}
.pc-big{font:800 22px/1 "Menlo",monospace}
.pc-big.pos{color:var(--up)}.pc-big.neg{color:var(--down)}
.pc-g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:13px}
.pc-g3>div span,.pc-g2>div span{font:600 13px/1.3 "Menlo",monospace;color:var(--text)}
.pc-g3 .liq{color:var(--gold)}
.pc-g2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:8px}
.pc-g2>div span{font-size:11.5px;color:var(--text2);font-weight:500}
.pc-hold{font-size:11.5px;color:var(--text3);border-top:1px solid var(--border);padding-top:9px}
.pc-btns{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:2px}
.pc-btn{padding:9px;border-radius:8px;border:1px solid var(--border2);background:var(--card);color:var(--text2);font-size:13px;font-weight:600}
.pc-btn.close{color:#fff;background:var(--accent);border-color:transparent;font-weight:700}
.pc-btn.close:hover{filter:brightness(1.05)}
.tp-grid .okx-pos .pc-body{max-height:420px}

/* ══════════════════ 滑动修复：有底栏的页面内容能完整滚到底 ══════════════════ */
/* html/body 固定 100% 会让超出视口的内容滚不到底；has-tabbar 页面改为随内容增长 */
body.has-tabbar{height:auto;min-height:100%}
/* 交易页持仓区不再是固定高度内滚动框 → 随卡片自然增长，整页滚动 */
.tp-grid .okx-pos{overflow:visible}
.tp-grid .okx-pos .panel-body,.tp-grid .okx-pos .pc-body{max-height:none;overflow:visible}
.tp-grid{padding-bottom:12px}

/* toast 提示：抬到底部导航之上，别被盖住 */
.toast{z-index:300}
body.has-tabbar .toast{bottom:76px}

/* 限价委托下单/止盈止损修改弹窗 */
.td-modal-mask{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:400;display:flex;align-items:center;justify-content:center;padding:20px;overflow-y:auto} /* overflow：超高弹窗(矮屏/横屏)可滚动，不被上下裁掉够不到 */
.td-modal{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px;width:100%;max-width:340px;max-height:calc(100dvh - 40px);overflow:auto;box-shadow:0 12px 40px rgba(0,0,0,.35)}

/* ---- 修为境界详情弹窗 ---- */
.pfh-realm.tap{cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .12s}
.pfh-realm.tap:active{background:rgba(212,175,55,.08);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.pfhr-more{margin-left:auto;font-size:11.5px;color:var(--accent);font-weight:700;white-space:nowrap}
.rlm-modal{max-width:360px}
.rlm-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.rlm-title{font-size:16px;font-weight:800;color:var(--text)}
.rlm-x{width:28px;height:28px;border:none;background:var(--card2);color:var(--text2);border-radius:8px;font-size:13px;cursor:pointer;flex-shrink:0}
.rlm-sub{font-size:11.5px;color:var(--text3);margin-bottom:10px;line-height:1.6}
.rlm-cur{font-size:12.5px;color:var(--text2);background:var(--card2);border:1px solid var(--border);border-radius:10px;padding:9px 12px;margin-bottom:10px}
.rlm-cur b{color:var(--accent);font-size:15px;font-family:"Menlo",monospace}
.rlm-cur-name{color:var(--text);font-weight:700}
.rlm-list{max-height:52vh;overflow-y:auto;display:flex;flex-direction:column;gap:3px;-webkit-overflow-scrolling:touch}
.rlm-row{display:grid;grid-template-columns:24px 1fr auto auto;gap:9px;align-items:center;padding:9px 10px;border-radius:9px;border:1px solid transparent}
.rlm-i{font-size:11px;color:var(--text3);text-align:center;font-variant-numeric:tabular-nums}
.rlm-n{font-size:13.5px;font-weight:600;color:var(--text)}
.rlm-m{font-size:12.5px;font-weight:700;color:var(--text2);font-family:"Menlo",monospace;white-space:nowrap}
.rlm-t{min-width:44px;text-align:right}
.rlm-row.reached{opacity:.5}
.rlm-row.reached .rlm-n{color:var(--text2);font-weight:500}
.rlm-ok{color:var(--c-green);font-weight:700;font-size:10.5px;font-style:normal;white-space:nowrap}
.rlm-row.cur{background:rgba(212,175,55,.15);border-color:var(--accent)}
.rlm-row.cur .rlm-n{color:var(--accent);font-weight:800}
.rlm-row.cur .rlm-m{color:var(--text)}
.rlm-badge{font-size:10px;font-weight:800;color:#241a06;background:var(--accent);padding:2px 8px;border-radius:6px;white-space:nowrap} /* 深棕字压金底：白字压亮金对比仅~2:1，10px 小字发飘 */
.td-modal .tdm-head{font-size:15px;font-weight:700;margin-bottom:4px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.td-modal .tdm-sub{font-size:12px;color:var(--text3);margin-bottom:14px}
.td-modal .field{display:flex;flex-direction:column;gap:5px;margin-bottom:11px}
.td-modal input{padding:10px;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:var(--text);font-size:14px;width:100%}
.td-modal .tdm-btns{display:flex;gap:10px;margin-top:8px}
.tdm-btn{flex:1;padding:11px;border-radius:10px;border:none;font-size:14px;font-weight:700;cursor:pointer}
.tdm-btn.ghost{background:var(--card2);color:var(--text2);border:1px solid var(--border)}
.tdm-btn.primary{background:var(--accent);color:#fff}

/* ═══ 币安式下单卡 (千羽宗配色) ═══ */
.bnc-order{display:flex;flex-direction:column;gap:5px;padding:5px 12px;max-width:400px;width:100%;margin:0 auto;box-sizing:border-box}
/* 1. 开仓/平仓 分段 */
.bo-seg{display:flex;background:var(--card2);border:1px solid var(--border);border-radius:11px;padding:3px;gap:3px}
.bo-seg-btn{flex:1;border:none;background:transparent;color:var(--text3);font-size:13px;font-weight:700;padding:5px 0;border-radius:8px;cursor:pointer;transition:.15s}
.bo-seg-btn.active{background:var(--card);color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,.12)}
/* 2. 三按钮 */
.bo-triple{display:flex;gap:10px}
.bo-pill{flex:1;background:var(--card2);border:1px solid transparent;color:var(--text);font-size:13px;font-weight:600;padding:6px 0;border-radius:8px;cursor:pointer;transition:.15s}
.bo-pill:hover{background:var(--border)}
/* 杠杆弹层 */
.bo-levpop{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px;box-shadow:0 8px 28px rgba(0,0,0,.25)}
.bo-levpop-h{display:flex;justify-content:space-between;font-size:13px;color:var(--text2);margin-bottom:10px}
.bo-levpop-h b{color:var(--accent);font-size:15px}
.bo-levrange{width:100%;accent-color:var(--accent)}
.bo-levpop-marks{display:flex;justify-content:space-between;font-size:10.5px;color:var(--text3);margin:4px 0 12px}
.bo-levpop-ok{width:100%;background:var(--accent);color:#fff;border:none;border-radius:8px;padding:10px;font-weight:700;font-size:14px;cursor:pointer}
/* 3. 订单类型 */
.bo-otype{position:relative;display:flex;align-items:center;background:var(--card2);border:1px solid var(--border);border-radius:9px;padding:7px 13px;cursor:pointer}
.bo-ot-i{color:var(--text3);font-size:13px}
.bo-ot-txt{flex:1;text-align:center;font-size:14.5px;font-weight:700;color:var(--text)}
.bo-ot-caret{color:var(--text3);font-size:12px}
.bo-ot-pop{position:absolute;top:calc(100% + 5px);left:0;right:0;background:var(--card);border:1px solid var(--border);border-radius:9px;box-shadow:0 8px 24px rgba(0,0,0,.22);z-index:30;overflow:hidden}
.bo-ot-opt{padding:12px 14px;font-size:14px;color:var(--text2);cursor:pointer}
.bo-ot-opt:hover{background:var(--card2)}
.bo-ot-opt.active{color:var(--accent);font-weight:700}
/* 3b. 限价 */
.bo-limit input{width:100%;background:var(--card2);border:1px solid var(--border);border-radius:9px;padding:9px 13px;color:var(--text);font-size:14px}
/* 4. 数量 */
.bo-qty{display:flex;align-items:center;background:var(--card2);border:1px solid var(--border);border-radius:9px;overflow:hidden}
.bo-step{width:38px;flex-shrink:0;border:none;background:transparent;color:var(--text2);font-size:19px;font-weight:400;padding:9px 0;cursor:pointer}
.bo-step:active{background:var(--border)}
.bo-qty-in{flex:1;min-width:0;border:none;background:transparent;color:var(--text);font-size:14px;font-weight:600;text-align:center;padding:8px 2px;-webkit-appearance:none;appearance:none}
.bo-qty-in::placeholder{color:var(--text3);font-weight:500}
.bo-unit{flex-shrink:0;display:flex;align-items:center;gap:3px;border:none;border-left:1px solid var(--border);background:transparent;color:var(--text);font-size:13px;font-weight:600;padding:0 10px;height:100%;align-self:stretch;cursor:pointer}
.bo-unit-caret{color:var(--text3);font-size:11px}
/* 5. 菱形滑块 */
.bo-slider{position:relative;height:22px;margin:1px 5px}
.bo-track{position:absolute;top:50%;left:0;right:0;height:2px;background:var(--border);transform:translateY(-50%);border-radius:2px}
.bo-fill{position:absolute;left:0;top:0;height:100%;background:var(--accent);border-radius:2px;width:0}
.bo-node{position:absolute;top:50%;width:9px;height:9px;padding:0;background:var(--card);border:1.5px solid var(--text3);transform:translate(-50%,-50%) rotate(45deg);cursor:pointer;transition:.12s}
.bo-node.on{background:var(--accent);border-color:var(--accent)}
/* 6. 可用 */
.bo-avail{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--text3);margin-top:1px}
.bo-avail b{color:var(--text2);font-weight:600;font-family:"Menlo",monospace;display:flex;align-items:center;gap:5px}
.bo-swap{color:var(--accent);cursor:pointer;font-size:14px;font-weight:700}
/* 7/8. 复选 */
.bo-chk{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text2);cursor:pointer}
.bo-chk input{width:15px;height:15px;accent-color:var(--accent);cursor:pointer}
.bo-chk .dsh{border-bottom:1px dashed var(--text3);padding-bottom:1px}
.bo-sub{display:flex;gap:8px}
.bo-sub[hidden]{display:none}
.bo-sub input{flex:1;width:100%;background:var(--card2);border:1px solid var(--border);border-radius:8px;padding:8px 12px;color:var(--text);font-size:13.5px}
/* 9/10. 可开信息 + 开多开空 */
.bo-info{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;color:var(--text3);line-height:1.28;margin-top:0}
.bo-info-r{text-align:right;color:var(--text2);font-weight:600;font-family:"Menlo",monospace}
.bo-info-r i{color:var(--text3);font-style:normal}
.bo-act{display:flex;align-items:center;justify-content:center;gap:0;position:relative;border:none;border-radius:9px;padding:8px 16px;font-size:14.5px;font-weight:800;color:#fff;cursor:pointer;transition:filter .15s}
.bo-act:hover{filter:brightness(1.06)}
.bo-act span{flex:1;text-align:center}
.bo-act i{position:absolute;right:16px;font-style:normal;font-size:13px;font-weight:600;opacity:.9}
.bo-act.long{background:var(--long)}  /* 多=红：对齐全站红涨绿跌 + 持仓卡/徽章(多=红)，避免下单绿→持仓红的方向色反转 */
.bo-act.short{background:var(--short)}

/* 资金费率 · 倒计时(订单簿列顶部，两行紧凑，与币安一致) */
.bk-funding{padding:8px 10px 7px;border-bottom:1px solid var(--border)}
.bk-funding .bkf-lbl{font-size:10.5px;color:var(--text3);margin-bottom:2px;white-space:nowrap}
.bk-funding .bkf-val{font-size:11.5px;font-family:"Menlo",monospace;color:var(--text2);white-space:nowrap;letter-spacing:-.2px}
.bk-funding .tpf-rate{font-weight:700}
.bk-funding .tpf-rate.pos{color:var(--c-green)}
.bk-funding .tpf-rate.neg{color:var(--c-red)}
.bk-funding .tpf-cd{font-weight:600}

/* 预估手续费行 */
.bo-fee{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--text3);margin-top:-3px}
.bo-fee b{font-family:"Menlo",monospace;font-weight:600;color:var(--text2)}

/* 订单记录表格适应窄屏(不再强制 600px 溢出横滑) */
.tp-grid #tabLog .pos-table{min-width:0}
.tp-grid #tabLog .pos-table th,.tp-grid #tabLog .pos-table td{padding:8px 7px;font-size:11px}
.tp-grid #tabLog .pos-table td:first-child,.tp-grid #tabLog .pos-table th:first-child{white-space:nowrap}

/* 调整杠杆/保证金 弹窗 */
.adj-tabs{display:flex;gap:6px;margin:12px 0 4px}
.adj-tab{flex:1;background:var(--card2);border:1px solid var(--border);color:var(--text2);font-size:13px;font-weight:600;padding:8px;border-radius:8px;cursor:pointer}
.adj-tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.adj-pane{margin:10px 0}
.adj-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--text2);margin-bottom:6px}
.adj-row b{color:var(--accent);font-size:15px}
.adj-seg{display:flex;gap:6px;margin-bottom:10px}
.adj-seg-btn{flex:1;background:var(--card2);border:1px solid var(--border);color:var(--text2);font-size:13px;padding:8px;border-radius:8px;cursor:pointer}
.adj-seg-btn.active{background:var(--card);color:var(--text);border-color:var(--accent);font-weight:700}
.adj-preview{background:var(--card2);border-radius:10px;padding:9px 12px;margin:8px 0}
.adj-pv{display:flex;justify-content:space-between;font-size:12.5px;color:var(--text3);padding:3px 0}
.adj-pv b{color:var(--text2);font-family:"Menlo",monospace;font-weight:600}
.adj-pv b.pos{color:var(--up)}.adj-pv b.neg{color:var(--down)}
.adj-warn{color:#f6465d;font-size:12px;margin-top:7px;text-align:center}
.tdm-btn.primary:disabled{opacity:.45;cursor:not-allowed}

/* 持仓卡盈亏平衡价行 + 订单记录手续费列 */
.pos-card .pc-be{display:flex;justify-content:space-between;align-items:center;padding-top:2px}
.pos-card .pc-be label{font-size:11px;color:var(--text3)}
.pos-card .pc-be span{font:600 12.5px/1 "Menlo",monospace;color:var(--accent)}
.tp-grid #tabLog .pos-table td.tfee{color:var(--text3);white-space:nowrap}

/* 个人中心：账户 tab 切换(H5 省滚动) */
.pf-acct-tabs{display:flex;gap:4px;background:var(--card2);border:1px solid var(--border);border-radius:11px;padding:3px;margin-bottom:12px}
.pf-atab{flex:1;background:transparent;border:none;color:var(--text2);font-size:13.5px;font-weight:600;padding:9px 0;border-radius:8px;cursor:pointer;transition:.15s}
.pf-atab.active{background:var(--card);color:var(--accent);font-weight:800;box-shadow:0 1px 4px rgba(0,0,0,.12)}

/* 个人中心：充值/赛季占位 */
.pfa-acts{display:flex;gap:6px}
.pfa-recharge{background:var(--accent);border:1px solid var(--accent);color:#fff;font-size:11.5px;font-weight:700;padding:5px 12px;border-radius:8px;cursor:pointer}
.pfa-recharge:hover{filter:brightness(1.08)}
.pf-acct.xw::before{background:linear-gradient(#f0b90b,#c99a3a)}
.pf-acct.xw{box-shadow:0 4px 16px rgba(184,134,11,.14)}
.pfa-foot{margin-top:12px;padding-top:11px;border-top:1px solid var(--border);font-size:12px;color:var(--accent);font-weight:600}
.pf-acct.locked{opacity:.92}
.pf-acct.locked::before{background:var(--text3)}
.pfa-lock{font-size:11px;color:var(--text3);background:var(--card2);border:1px solid var(--border);padding:3px 10px;border-radius:20px}
.pf-lockmsg{padding:22px 8px;text-align:center;color:var(--text3);font-size:13px;line-height:1.6}

/* admin 赛季表单 */
.sea-form{display:grid;gap:12px;max-width:420px;margin:6px 0 14px}
.sea-form label{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--text2)}
.sea-form input{padding:9px 11px;border:1px solid var(--border);border-radius:8px;background:var(--card);color:var(--text);font-size:14px}

/* 弹窗打开时锁定背景滚动(防移动端穿透) */
body.no-scroll{overflow:hidden;touch-action:none}

/* 止盈止损弹窗预期盈亏预览 */
.tpsl-pv{font-size:12px;color:var(--text3);margin:-4px 2px 10px;line-height:1.4}
.tpsl-pv b{font-family:"Menlo",monospace;font-weight:700}
.tpsl-pv.pos,.tpsl-pv.pos b{color:var(--up)}
.tpsl-pv.neg,.tpsl-pv.neg b{color:var(--down)}
.pos-card .pos{color:var(--up)}.pos-card .neg{color:var(--down)}
/* 平仓模式：隐藏开仓专用控件(杠杆/全仓/双向、止盈止损、滑点)，保留数量/滑块/市价限价 */
.bnc-order.close-mode .bo-triple,
.bnc-order.close-mode .bo-chk,
.bnc-order.close-mode .bo-sub,
.bnc-order.close-mode .bo-levpop{display:none !important}

/* ═══ 交易页可展开图表：底部固定条(tabbar 上方)，向上展开 ═══ */
body.has-chartbar{padding-bottom:calc(112px + env(safe-area-inset-bottom,0px))} /* tabbar 56 + 图表条 ~48 + 余量 + 安全区 */
.tp-chart{position:fixed;left:0;right:0;bottom:calc(56px + env(safe-area-inset-bottom,0));z-index:150;display:flex;flex-direction:column;background:var(--card);border-top:1px solid var(--border);box-shadow:0 -6px 18px rgba(0,0,0,.12)}
.tpc-bar{width:100%;display:flex;align-items:center;justify-content:space-between;padding:13px 16px;background:var(--card);border:none;color:var(--text);font-size:14px;font-weight:600;cursor:pointer}
.tpc-arrow{color:var(--text3);font-size:12px;transition:transform .2s}
.tpc-body{background:var(--card);padding:6px 8px 4px;border-bottom:1px solid var(--border)} /* 位于 bar 之上 → 向上展开 */
.tpc-ivs{display:flex;gap:2px;overflow-x:auto;padding:4px 2px 8px}
.tpc-ivs button{flex-shrink:0;padding:5px 12px;border:none;background:transparent;color:var(--text3);font-size:13px;border-radius:7px;cursor:pointer}
.tpc-ivs button.active{background:var(--bg2);color:var(--text);font-weight:600}
.tpc-canvas{height:min(32vh,240px);width:100%}
/* 展开时底部留出足够可滚动空间，让下单区能滑到图表面板上方(与币安一致，不遮挡下单) */
body.chart-expanded{padding-bottom:calc(min(32vh,240px) + 150px)}
body.has-chartbar .toast{bottom:120px}

/* 历史回放弹窗币种搜索列表 */
.hist-sel{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text2);background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin:2px 0 10px}
.hist-sel b{color:var(--gold);font-size:15px;font-weight:800}
.hist-sel-ok{color:#2ebd85;font-weight:800}
.hist-citem.on{background:rgba(240,185,11,.1)}
.hist-citem.on span:first-child{color:var(--gold);font-weight:700}
.hist-clist{max-height:190px;overflow-y:auto;margin:8px 0 12px;border:1px solid var(--border);border-radius:10px}
.hist-citem{display:flex;align-items:center;justify-content:space-between;padding:11px 12px;font-size:14px;cursor:pointer;border-bottom:1px solid var(--border)}
.hist-citem:last-child{border-bottom:none}
.hist-citem:active,.hist-citem:hover{background:var(--bg2)}
.hist-citem .s-ex{display:flex;gap:4px}
.hist-empty{padding:16px;text-align:center;color:var(--text3);font-size:13px}

/* 持仓数量币/U切换 可点 */
.pc-tap{cursor:pointer}
.pc-tap label{color:var(--blue)}
/* 平仓弹窗 */
.cl-seg{display:flex;gap:6px;margin-bottom:10px}
.cl-seg-btn{flex:1;padding:8px;border:1px solid var(--border);background:transparent;color:var(--text2);font-size:13px;border-radius:8px;font-weight:600}
.cl-seg-btn.active{color:var(--text);border-color:var(--blue);background:rgba(79,142,247,.1)}
.cl-pcts{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:-4px 0 10px}
.cl-pcts button{padding:7px 0;border:1px solid var(--border);background:var(--bg2);color:var(--text2);font-size:12px;border-radius:7px}
.cl-pcts button:active{color:var(--text);border-color:var(--blue)}
.cl-pv{font-size:12.5px;color:var(--text2);margin:0 2px 12px;min-height:16px}
.cl-pv b{font-family:"Menlo",monospace}

/* 下单单位弹层(订单数量币/金额U/初始保证金U) */
.bo-unit-pop{background:var(--card2);border:1px solid var(--border);border-radius:9px;overflow:hidden;margin-top:-2px}
.bo-unit-pop[hidden]{display:none}
.bo-unit-opt{padding:11px 14px;font-size:13.5px;color:var(--text2);cursor:pointer;border-bottom:1px solid var(--border)}
.bo-unit-opt:last-child{border-bottom:none}
.bo-unit-opt.active{color:var(--text);font-weight:600;background:rgba(79,142,247,.08)}
.bo-unit-opt:active{background:var(--border)}

/* 窄下单列：去掉 +/- 步进给输入框腾地方，输入左对齐+16px(防 iOS 聚焦缩放) */
.tp-grid .bo-step{display:none}
.tp-grid .bo-qty-in{text-align:left;padding-left:12px}
.bo-qty-in{font-size:16px}
.tp-grid .book-ratio{margin-top:auto}
/* 防止点击缩放：禁用双击缩放 + 输入聚焦不缩放 */
html,body{touch-action:manipulation}
.bnc-order input,.td-modal input,.sym-search,.bo-limit input,.bo-sub input{font-size:16px}

/* 下单/弹窗输入聚焦：去蓝线，容器细金边(不刺眼) */
.bnc-order input:focus{outline:none;box-shadow:none}
.bo-qty:focus-within,.bo-otype:focus-within{border-color:var(--accent)}
.bo-limit input:focus,.bo-sub input:focus,.td-modal input:focus,.sym-search:focus{outline:none;border-color:var(--accent)}
input:focus{outline:none}

/* K线图表手势：让缩放/拖动/捏合走图表而非页面 */
.chart-box{touch-action:none}

/* K线页底部常用指标行(同币安) */
.kl-ind{display:flex;overflow-x:auto;border-top:1px solid var(--border);border-bottom:1px solid var(--border);flex-shrink:0}
.kl-ind::-webkit-scrollbar{display:none}
.kl-ind button{flex-shrink:0;border:none;background:transparent;color:var(--text3);font-size:12px;font-weight:600;padding:10px 12px;cursor:pointer;white-space:nowrap}
.kl-ind button.on{color:var(--accent)}
.kl-ind button:active{background:var(--bg2)}

/* ═══ 币安式底部选币大半屏 ═══ */
.ss-mask{position:fixed;inset:0;z-index:400;background:rgba(0,0,0,.45);opacity:0;transition:opacity .2s}
.ss-mask.show{opacity:1}
.ss-sheet{position:absolute;left:0;right:0;bottom:0;height:85vh;max-height:85vh;display:flex;flex-direction:column;background:var(--card);border-radius:18px 18px 0 0;transform:translateY(100%);transition:transform .26s cubic-bezier(.2,.7,.3,1)}
.ss-mask.show .ss-sheet{transform:translateY(0)}
.ss-top{position:relative;height:42px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ss-handle{width:40px;height:4px;border-radius:3px;background:var(--border2)}
.ss-close{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:30px;height:30px;display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:var(--bg2);color:var(--text2);font-size:14px;line-height:1;cursor:pointer}
.ss-close:active{background:var(--border)}
.ss-search{padding:4px 14px 10px;flex-shrink:0}
.ss-search input{width:100%;background:var(--bg2);border:1px solid var(--border);border-radius:11px;padding:11px 14px;color:var(--text);font-size:16px;outline:none}
.ss-search input:focus{border-color:var(--accent)}
.ss-cats{display:flex;gap:8px;overflow-x:auto;padding:0 14px 10px;flex-shrink:0}
.ss-cats::-webkit-scrollbar{display:none}
.ss-cat{flex-shrink:0;border:none;background:var(--bg2);color:var(--text2);font-size:13px;font-weight:600;padding:7px 14px;border-radius:9px;cursor:pointer;white-space:nowrap}
.ss-cat.active{background:var(--accent);color:#fff}
.ss-head{display:grid;grid-template-columns:1fr 96px 88px;gap:10px;align-items:center;padding:6px 12px;font-size:11px;color:var(--text3);border-bottom:1px solid var(--border);flex-shrink:0} /* 与 .mk-row 同栅格：表头文字对齐各列正上方 */
.ss-head .r{text-align:right}
.ss-list{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
.ss-list .mk-row.on{background:rgba(240,185,11,.1)}

/* ═══════════════════════════════════════════════════════════════════
   桌面端 (≥1024px)。全部走 min-width：移动端(<1024) 零影响，H5 冻结不变。
   ═══════════════════════════════════════════════════════════════════ */
.pc-nav{display:none} /* 移动端永远隐藏，桌面媒体查询里再显示 */
.mk-main{display:contents} /* 移动端：包裹层透明，布局与原 H5 完全一致；桌面媒体查询里再变网格 */
.mk-vol2,.mk-hvol{display:none} /* 24h量独立列：移动端隐藏(仍用价格下的小量)，仅桌面显示 */
.mk-news{display:none} /* 消息面：仅桌面右栏显示，移动端隐藏(H5 不变) */

@media (min-width:1024px){
  /* ---- 顶栏取代底部 tabbar ---- */
  .tabbar{display:none!important}
  body.has-tabbar,body.has-chartbar{padding-bottom:0}
  .mk-top{display:none} /* 内容页移动 header 由 pc-nav 取代 */
  .pc-nav{display:flex;align-items:center;gap:20px;height:56px;padding:0 24px;
    background:var(--card);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}
  .pcn-brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:16px;color:var(--text);text-decoration:none;letter-spacing:.5px}
  .pcn-logo{color:var(--accent);font-size:19px}
  .pcn-links{display:flex;gap:2px}
  .pcn-link{padding:7px 15px;border-radius:8px;color:var(--text2);text-decoration:none;font-size:14px;font-weight:600;transition:background .12s,color .12s}
  .pcn-link:hover{color:var(--text);background:var(--card2)}
  .pcn-link.active{color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
  .pcn-right{margin-left:auto;display:flex;align-items:center;gap:8px}
  .pcn-theme{width:34px;height:34px;border:1px solid var(--border);background:var(--card2);color:var(--text2);border-radius:9px;cursor:pointer;font-size:15px;transition:.12s}
  .pcn-theme:hover{color:var(--text);border-color:var(--border2)}
  .pcn-me,.pcn-back{color:var(--text2);text-decoration:none;font-size:13.5px;font-weight:600;padding:7px 12px;border-radius:8px;transition:.12s;white-space:nowrap}
  .pcn-me:hover,.pcn-back:hover{color:var(--text);background:var(--card2)}
  .pcn-me.active{color:var(--accent)}
  .pcn-back{border:1px solid var(--border)}

  /* ---- 行情页：左行情(分类+搜索同排/表) + 右消息面 两栏 ---- */
  .mk-main{display:grid;grid-template-columns:auto minmax(0,1fr) 344px;
    grid-template-areas:"cats search news" "head head news" "list list news";
    column-gap:24px;align-items:center;max-width:1340px;margin:0 auto;padding:22px 28px 44px}
  .mk-main .mk-assets{display:none} /* 桌面隐藏总资产卡；余额去「我的」看。移动端 hero 不受影响 */
  /* 覆盖移动端 max-width:760/margin:auto */
  .mk-main .mk-search-wrap{grid-area:search;max-width:none;margin:0;padding:0}
  .mk-main .mk-search-box{max-width:420px;margin-left:auto} /* 搜索右靠，贴近消息面 */
  .mk-main .mk-cats{grid-area:cats;max-width:none;margin:0;align-self:center;white-space:nowrap;overflow:visible}
  .mk-main .mk-head{grid-area:head;max-width:none;grid-template-columns:1.6fr 1fr 1fr 110px;margin:16px 0 0;padding:6px 12px}
  .mk-main .mk-list{grid-area:list;max-width:none;margin:0;padding:0}
  /* 消息面右栏 */
  .mk-news{grid-area:news;display:flex;flex-direction:column;align-self:start;
    position:sticky;top:74px;max-height:calc(100vh - 96px);
    background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden}
  .mkn-head{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--border)}
  .mkn-title{font-size:14px;font-weight:800;color:var(--text)}
  .mkn-live{font-size:11px;color:var(--text3)}
  .mkn-list{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .mkn-empty{padding:44px 16px;text-align:center;color:var(--text3);font-size:12.5px}
  /* 快讯条：时间(金色小字) + 标题，整行可点，底部细分隔 */
  .mkn-item{position:relative;display:block;text-decoration:none;padding:12px 16px;
    border-bottom:1px solid color-mix(in srgb,var(--border) 40%,transparent);transition:background .12s}
  .mkn-item:last-child{border-bottom:none}
  .mkn-item:hover{background:var(--card2)}
  .mkn-time{display:block;font:600 11px/1 "Menlo",monospace;color:var(--accent);margin-bottom:6px;letter-spacing:.3px}
  .mkn-t{font-size:13px;line-height:1.6;color:var(--text)}
  a.mkn-item .mkn-t{color:var(--text)} /* 链接条标题不走链接蓝 */
  .mkn-item.imp{padding-left:16px}
  .mkn-item.imp::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;background:var(--up);border-radius:0 2px 2px 0}
  .mkn-item.imp .mkn-t{font-weight:600}
  .mk-main .mk-row{grid-template-columns:1.6fr 1fr 1fr 110px;padding:10px 12px;border-radius:0;
    border-bottom:1px solid var(--border);border-bottom-color:color-mix(in srgb,var(--border) 48%,transparent)}
  .mk-main .mk-row:hover{background:var(--card2)}
  .mk-main .mk-row .mk-chg{justify-self:end;width:104px}
  /* 桌面显示独立 24h量 列，隐藏价格下的小量 */
  .mk-main .mk-vol2{display:block;color:var(--text2);font:600 13px/1 "Menlo",monospace;align-self:center}
  .mk-main .mk-hvol{display:block}
  .mk-main .mk-px .mk-vol{display:none}
}

/* ═══════════ 桌面交易终端 (≥1024px)：单屏多面板 ═══════════ */
@media (min-width:1024px){
  /* body 变终端网格；.tp-grid display:contents 把三个面板并入 body 网格 */
  body.has-chartbar{
    height:100vh;height:100dvh;overflow:hidden;
    display:grid;
    grid-template-columns:minmax(0,1fr) 300px 336px;
    grid-template-rows:56px auto auto minmax(0,1fr) 244px;
    grid-template-areas:
      "nav   nav   nav"
      "modes modes modes"
      "tick  tick  tick"
      "chart book  form"
      "pos   book  form";
    column-gap:1px;row-gap:1px;background:var(--border);
  }
  body.has-chartbar .pc-nav{grid-area:nav}
  body.has-chartbar .tp-row1{grid-area:modes}
  body.has-chartbar .tp-row2{grid-area:tick}
  body.has-chartbar .tp-chart{grid-area:chart}
  body.has-chartbar .okx-book{grid-area:book}
  body.has-chartbar .okx-trade{grid-area:form}
  body.has-chartbar .okx-pos{grid-area:pos}
  body.has-chartbar .tp-grid{display:contents}
  body.has-chartbar .toast{position:fixed}

  /* 模式条 + 币种条：横向 strip */
  body.has-chartbar .tp-row1{margin:0;padding:8px 20px;background:var(--card);display:flex;align-items:center}
  body.has-chartbar .tp-row1 .tp-icon{display:none} /* 主题切换走 pc-nav */
  body.has-chartbar .tp-row2{margin:0;padding:10px 20px;background:var(--card);display:flex;align-items:center;gap:16px}
  body.has-chartbar .tp-row2 #lastPrice{display:inline;font:800 22px/1 "Menlo",monospace;color:var(--text)}
  body.has-chartbar .tp-row2 .otm-chg{font-size:15px;font-weight:700}

  /* 各面板：暗底 + 内部独立滚动，1px gap 透出分隔线 */
  body.has-chartbar .tp-chart{position:static;display:flex;flex-direction:column;min-height:0;overflow:hidden;background:var(--bg)}
  body.has-chartbar .tpc-bar{display:none}
  body.has-chartbar .tpc-body{display:flex!important;flex-direction:column;flex:1;min-height:0;padding:0}
  body.has-chartbar #chart,body.has-chartbar .tpc-canvas{flex:1;min-height:0;height:auto;width:100%}
  body.has-chartbar .tpc-ivs{flex-shrink:0}

  body.has-chartbar .okx-book,body.has-chartbar .okx-trade{min-height:0;overflow-y:auto;background:var(--card);margin:0}
  body.has-chartbar .okx-pos{min-height:0;overflow:hidden;display:flex;flex-direction:column;background:var(--card);margin:0}
  body.has-chartbar .okx-pos .panel-tabs{flex-shrink:0}
  body.has-chartbar .okx-pos .panel-body{flex:1;min-height:0;overflow-y:auto}
  body.has-chartbar .okx-trade{padding:12px 14px}

  /* 隐藏底栏 tabbar(基础块已 !important) + 底部展开条占位 */
  body.has-chartbar.chart-expanded{padding-bottom:0}
}

/* ═══════════ 桌面：K线 / 排行榜 / 个人中心 (≥1024px) ═══════════ */
@media (min-width:1024px){
  /* K线页：pc-nav 置顶(flex 列首)，隐藏冗余返回/主题，内容居中，图表大 */
  .kl-page .kl-back{display:none}
  .kl-page .kl-head .tp-icon{display:none}
  .kl-page .kl-head,.kl-page .kl-price,.kl-page .chart-toolbar,
  .kl-page .chart-main,.kl-page .kl-ind,.kl-page .kl-perf{max-width:1240px;margin-left:auto;margin-right:auto;width:100%}
  .kl-page .kl-trade-btn{display:none} /* 交易入口走 pc-nav */

  /* 排行榜：居中窄栏 */
  .lb{max-width:840px;margin:0 auto;padding:20px 24px 48px}
  .lb .tp-icon{display:none}

  /* 个人中心：居中容器(账户卡两栏已有 min-width:680) */
  .pf{max-width:940px;margin:0 auto;padding:24px 24px 48px}
}