/* 多币种手动挂单 — 看板式移动端设计 */
:root {
  --bg:#0b0e14; --panel:#10151d; --panel2:#151c26; --line:#1d2530;
  --txt:#e6edf3; --dim:#7d8b99; --gold:#f0b90b;
  --green:#3fb950; --red:#f85149;
  --tabbar-h:56px; --sheet-max:86vh;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-tap-highlight-color:transparent; }
body { background:var(--bg); color:var(--txt); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; font-size:16px; -webkit-text-size-adjust:100%; }
body.sheet-open { overflow:hidden; }
.hidden { display:none !important; }
.dim { color:var(--dim); }
.num { font-variant-numeric:tabular-nums; }

/* ---------- login ---------- */
.login-wrap { min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:20px; }
.login-card { width:100%; max-width:360px; padding:24px 4px; text-align:center; }
.logo { font-size:34px; font-weight:800; letter-spacing:1px; }
.logo span { color:var(--gold); }
.sub { color:var(--dim); font-size:13px; margin:8px 0 28px; }
.login-card input { width:100%; padding:15px 14px; border-radius:12px; border:1px solid var(--line); background:var(--panel); color:var(--txt); font-size:17px; margin-bottom:14px; }
.login-card .btn { width:100%; padding:15px; border-radius:12px; background:var(--gold); color:#111; font-weight:700; font-size:17px; border:none; }
.err { color:var(--red); font-size:13px; min-height:18px; margin-top:10px; }

/* ---------- 布局 ---------- */
#app { max-width:640px; margin:0 auto; min-height:100dvh; }
#content { padding:8px 16px calc(var(--tabbar-h) + 20px + env(safe-area-inset-bottom)); }
.page-title { font-size:18px; font-weight:800; padding:12px 0 4px; }

/* ---------- 看板头部 ---------- */
.board-head { display:flex; justify-content:space-between; align-items:center; padding:14px 2px 10px; }
.brand { font-size:19px; font-weight:800; }
.brand span { color:var(--gold); }
.acct { display:flex; align-items:center; gap:12px; font-size:13px; color:var(--dim); }
.acct-item b { color:var(--txt); font-variant-numeric:tabular-nums; }
.badge { padding:3px 10px; border-radius:20px; font-size:12px; background:#1a2330; color:var(--dim); font-weight:600; }
.badge.live { background:#3a1d1f; color:var(--red); }
.badge.paper { background:#14261a; color:var(--green); }
.head-right { display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.add-sym-btn { min-height:34px; padding:6px 12px; font-size:13px; color:var(--gold); border-color:#4a3a20; background:#2a1a10; }

/* ---------- 熔断条 ---------- */
.haltbar { margin:8px 0 4px; padding:12px; border-radius:12px; background:rgba(255,60,60,.1); border:1px solid rgba(255,60,60,.35); display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between; }
.haltbar span { font-size:13px; color:#ff8a8a; flex:1 1 200px; line-height:1.5; }

/* ---------- 列表标签 ---------- */
.list-label { font-size:13px; font-weight:700; color:var(--dim); letter-spacing:1px; padding:16px 2px 8px; }
.list-label .dim { font-weight:400; }

/* ---------- 持仓卡 ---------- */
.pos-card { background:var(--panel); border:1px solid rgba(63,185,80,.3); border-radius:14px; padding:12px 14px; margin-bottom:10px; }
.pos-top { display:flex; justify-content:space-between; align-items:center; }
.pos-sym { font-size:15px; font-weight:800; }
.live-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--green); margin-left:5px; vertical-align:2px; }
.pos-pnl { font-size:19px; font-weight:800; font-variant-numeric:tabular-nums; }
.pos-pnl em { font-style:normal; font-size:12px; margin-left:4px; font-weight:600; }
.pos-mid { display:flex; gap:18px; margin-top:10px; font-size:13px; color:var(--dim); }
.pos-mid b { color:var(--txt); font-variant-numeric:tabular-nums; }
.pos-bot { display:flex; align-items:center; gap:14px; margin-top:10px; font-size:13px; color:var(--dim); }
.pos-bot .sl b { color:var(--red); font-variant-numeric:tabular-nums; }
.pos-bot .tp b { color:var(--green); font-variant-numeric:tabular-nums; }
.pos-bot .dyn { font-style:normal; color:var(--gold); font-size:11px; margin-left:3px; }
.close-btn { margin-left:auto; background:none; border:1px solid #5c2a2d; color:var(--red); border-radius:8px; padding:6px 14px; font-size:13px; min-height:34px; }
.close-btn:active { transform:scale(0.96); }
.pos-actions { display:flex; gap:8px; margin-top:10px; }
.pos-actions .close-btn, .pos-actions .lmt-close-btn { flex:1; margin-left:0; }
.lmt-close-btn { background:none; border:1px solid #4a3a20; color:var(--gold); border-radius:8px; padding:6px 14px; font-size:13px; min-height:34px; }
.lmt-close-btn:active { background:var(--gold); color:#111; }
.lmt-cancel-btn { flex:1; background:none; border:1px solid var(--line); color:var(--dim); border-radius:8px; padding:6px 14px; font-size:13px; min-height:34px; }

/* ---------- 币种行 ---------- */
.sym-list { display:flex; flex-direction:column; gap:8px; }
.sym-row { display:flex; align-items:center; gap:10px; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:12px 12px; min-height:64px; }
.sym-row:active { background:var(--panel2); }
.row-main { flex:1; min-width:0; }
.row-sym { font-size:16px; font-weight:800; }
.row-sym .dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-left:5px; vertical-align:2px; }
.row-sym .dot.open { background:#ff5c5c; }
.row-sym .dot.pend { background:#ffd166; }
.row-st { margin-top:3px; font-size:12px; }
.st-pos { color:var(--green); }
.st-pend { color:var(--gold); }
.st-idle { color:var(--dim); }
.row-price { text-align:right; }
.row-price .px { font-size:17px; font-weight:800; font-variant-numeric:tabular-nums; }
.row-price .chg { font-size:12px; color:var(--dim); margin-top:1px; font-variant-numeric:tabular-nums; }
.row-price .chg.up { color:var(--green); }
.row-price .chg.down { color:var(--red); }
.row-set { flex:0 0 auto; min-height:40px; padding:0 16px; border-radius:10px; border:1px solid var(--gold); background:rgba(240,185,11,.1); color:var(--gold); font-size:14px; font-weight:700; }
.row-set:active { background:var(--gold); color:#111; }

/* ---------- 底部导航 ---------- */
.tabbar { position:fixed; left:0; right:0; bottom:0; z-index:50; max-width:640px; margin:0 auto; display:flex; background:rgba(11,14,20,.96); border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom); }
.tab-item { flex:1; min-height:var(--tabbar-h); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; background:none; border:none; color:var(--dim); font-size:11px; font-weight:600; }
.tab-item .ti-ico { font-size:18px; line-height:1; }
.tab-item.active { color:var(--gold); }

/* ---------- 底部弹层 ---------- */
.sheet-overlay { position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.55); display:flex; align-items:flex-end; justify-content:center; }
.sheet { width:100%; max-width:640px; max-height:var(--sheet-max); background:var(--bg); border-radius:18px 18px 0 0; border-top:1px solid var(--line); padding:8px 18px calc(18px + env(safe-area-inset-bottom)); transform:translateY(100%); transition:transform .28s cubic-bezier(.32,.72,.28,1); overflow-y:auto; }
.sheet.open { transform:translateY(0); }
.sheet-grabber { width:40px; height:4px; border-radius:2px; background:var(--line); margin:2px auto 14px; }
.sheet-head { display:flex; justify-content:space-between; align-items:flex-start; }
.sheet-sym { font-size:20px; font-weight:800; }
.sheet-mark { color:var(--dim); font-size:13px; margin-top:3px; }
.sheet-mark b { color:var(--txt); font-size:16px; font-variant-numeric:tabular-nums; }
.sheet-close { width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:var(--panel); color:var(--dim); font-size:15px; }
.sheet-status { margin-top:10px; min-height:24px; }
.chip { display:inline-block; min-height:34px; padding:7px 14px; border-radius:999px; border:1px solid var(--line); background:var(--panel); color:var(--dim); font-size:13px; font-weight:700; }
.chip-pos { color:var(--green); border-color:rgba(63,185,80,.4); background:rgba(63,185,80,.1); }
.chip-pend { color:var(--gold); border-color:rgba(240,185,11,.4); background:rgba(240,185,11,.1); }
.chip-on { color:#111; background:var(--gold); border-color:var(--gold); font-weight:800; box-shadow:0 2px 10px rgba(240,185,11,.35); }
.sheet-input-row { margin-top:12px; }
.sheet-input-row input { width:100%; background:var(--panel); border:1px solid var(--line); color:#eee; border-radius:14px; padding:0 16px; font-size:24px; font-weight:700; height:56px; text-align:center; font-variant-numeric:tabular-nums; }
.sheet-input-row input:focus { outline:none; border-color:var(--gold); }
.sx-label { display:block; font-size:12px; color:var(--dim); margin-bottom:6px; }
.tf-row { display:flex; gap:6px; }
.tf-btn { flex:1; min-height:42px; border-radius:10px; border:1px solid var(--line); background:var(--panel); color:var(--dim); font-size:13px; font-weight:700; }
.tf-btn.tf-on { color:#111; background:var(--gold); border-color:var(--gold); font-weight:800; }
.sheet-input-row select { width:100%; background:var(--panel); border:1px solid var(--line); color:#eee; border-radius:14px; padding:0 16px; font-size:16px; height:52px; -webkit-appearance:none; appearance:none; }
.quick-row { display:flex; gap:8px; margin-top:10px; }
.quick-chip { flex:1; min-height:42px; border-radius:10px; border:1px solid var(--line); background:var(--panel); color:var(--dim); font-size:13px; font-weight:700; }
.quick-chip:active { color:var(--gold); border-color:var(--gold); }
.mode-row { display:flex; gap:8px; margin-top:12px; }
.mode-btn { flex:1; min-height:44px; border-radius:10px; border:1px solid var(--line); background:var(--panel); color:var(--dim); font-size:13px; font-weight:700; }
.mode-btn.mode-on { color:#111; background:var(--gold); border-color:var(--gold); box-shadow:0 2px 10px rgba(240,185,11,.35); }
.limit-prev { margin-top:10px; padding:10px 12px; border-radius:10px; background:var(--panel); border:1px solid var(--line); font-size:13px; color:var(--dim); display:flex; flex-wrap:wrap; gap:4px 10px; justify-content:center; }
.limit-prev b { color:var(--txt); font-variant-numeric:tabular-nums; }
.btn { border:none; border-radius:12px; min-height:48px; padding:13px; font-size:16px; font-weight:700; background:var(--panel); color:var(--txt); border:1px solid var(--line); }
.btn:active { transform:scale(0.98); }
.btn.primary { background:var(--gold); color:#111; border:none; }
.btn.danger { background:#3a1d1f; color:var(--red); border-color:#5c2a2d; }
.btn.danger-soft { background:#2a1a10; color:var(--gold); border-color:#4a3a20; }
.btn.ghost { background:none; color:var(--dim); border-color:var(--line); }
.btn.big { width:100%; min-height:52px; margin-top:12px; font-size:17px; }
.btn.sm { min-height:40px; padding:8px 14px; font-size:14px; }
.btn:disabled { opacity:.5; }
.btnrow { display:flex; gap:8px; margin-top:12px; }
.btnrow .btn { flex:1; }

/* ---------- 设置页 ---------- */
.sec-label { font-size:13px; font-weight:700; color:var(--gold); margin:20px 0 10px; }
.form { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form .full { grid-column:1 / -1; }
.form label { display:flex; flex-direction:column; font-size:12px; color:var(--dim); gap:5px; }
.form input { background:var(--panel); border:1px solid var(--line); color:#eee; border-radius:10px; padding:12px 10px; font-size:16px; width:100%; min-height:44px; -webkit-appearance:none; appearance:none; }
.form select { background:var(--panel); border:1px solid var(--line); color:#eee; border-radius:10px; padding:12px 10px; font-size:16px; width:100%; min-height:44px; -webkit-appearance:none; appearance:none; }
.form label.chk { flex-direction:row; align-items:center; justify-content:space-between; gap:10px; font-size:13px; color:var(--txt); padding:14px 12px; border:1px solid var(--line); background:var(--panel); border-radius:10px; }
.form label.chk em { font-style:normal; color:var(--dim); font-size:11px; margin-left:6px; }
/* 滑动开关: 开=金色 / 关=灰色 */
.switch { position:relative; display:inline-block; width:48px; height:28px; flex:0 0 auto; }
.switch input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.switch .knob { position:absolute; inset:0; border-radius:999px; background:#2a3440; border:1px solid var(--line); pointer-events:none; transition:background .2s; }
.switch .knob::after { content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#7d8b99; transition:transform .2s, background .2s; }
.switch input:checked + .knob { background:rgba(240,185,11,.22); border-color:var(--gold); }
.switch input:checked + .knob::after { transform:translateX(20px); background:var(--gold); }
.trade-filter { display:flex; gap:6px; overflow-x:auto; padding:8px 0; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.trade-filter::-webkit-scrollbar { display:none; }
.msg { color:var(--gold); font-size:13px; min-height:18px; margin-top:10px; }
.hint { color:var(--dim); font-size:12px; margin-top:10px; line-height:1.6; }

/* ---------- 记录 ---------- */
.trade-item { display:flex; justify-content:space-between; align-items:center; padding:12px 2px; border-bottom:1px solid var(--line); font-size:14px; }
.trade-item:last-child { border-bottom:none; }
.trade-item .t-detail { font-size:12px; color:var(--dim); margin-top:3px; }
.trade-item .t-pnl { font-weight:700; font-variant-numeric:tabular-nums; }
.t-sym { display:inline-block; background:var(--panel); border:1px solid var(--line); color:var(--dim); border-radius:6px; padding:1px 6px; font-size:11px; font-weight:700; margin-right:4px; }
.empty { color:var(--dim); text-align:center; padding:20px 0; }

/* ---------- 币种管理 ---------- */
.sym-mgr { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.sym-item { display:flex; justify-content:space-between; align-items:center; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:10px 12px; font-size:14px; }
.sym-item-name { font-weight:700; }
.sym-item-name em { font-style:normal; font-weight:400; color:var(--dim); margin-left:8px; font-size:12px; }
.del-btn { background:none; border:1px solid #5c2a2d; color:var(--red); border-radius:8px; padding:8px 14px; font-size:13px; min-height:38px; }
.del-btn:active { transform:scale(0.96); }
.addrow { display:flex; gap:8px; }
.addrow input { flex:1; background:var(--panel); border:1px solid var(--line); color:#eee; border-radius:10px; padding:12px 10px; font-size:16px; min-height:46px; }
.addrow .btn { flex:0 0 auto; padding:12px 20px; }
.sym-quick { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.sym-quick .chip { flex:0 0 auto; }

/* ---------- 页脚提示 ---------- */
.foot-hint { position:fixed; bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom)); left:0; right:0; max-width:640px; margin:0 auto; text-align:center; color:var(--dim); font-size:11px; padding:4px; pointer-events:none; z-index:40; }