/* 赌狗模拟器 · 星梦股市 — 同花顺风格移动优先 UI */
:root{
  --bg:#0d1017; --bg2:#131826; --card:#171d2e; --card2:#1c2338;
  --line:rgba(255,255,255,0.07); --line2:rgba(255,255,255,0.12);
  --tx:#e6e9f2; --tx2:#98a0b3; --tx3:#5d6577;
  --up:#ff4d4f; --up-bg:rgba(255,77,79,0.14);
  --dn:#00b578; --dn-bg:rgba(0,181,120,0.14);
  --gold:#f5c542; --blue:#42a5f5; --purple:#e879f9;
  --nav-h:54px;
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  background:var(--bg);color:var(--tx);
  font:14px/1.5 system-ui,-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;
  overscroll-behavior:none;
}
#app{max-width:560px;margin:0 auto;height:100vh;height:100dvh;display:flex;flex-direction:column;position:relative;background:var(--bg)}
.up{color:var(--up)!important}.down{color:var(--dn)!important}
b{font-weight:600}
button{font-family:inherit;border:none;background:none;color:inherit;cursor:pointer}
button:disabled{opacity:.42;cursor:not-allowed}
input,select{font-family:inherit;color:var(--tx);background:var(--bg2);border:1px solid var(--line2);border-radius:8px;padding:9px 10px;font-size:14px;outline:none;width:100%}
input:focus{border-color:var(--blue)}
::-webkit-scrollbar{width:0;height:0}

/* ===== 顶栏 ===== */
.topbar{display:flex;align-items:center;gap:8px;padding:8px 12px 6px;background:var(--bg);flex:0 0 auto;flex-wrap:nowrap}
.tb-logo{display:flex;align-items:center;gap:6px;font-size:15px;font-weight:700;white-space:nowrap;min-width:0}
.tb-mark{position:relative;flex:0 0 auto;width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:7px;background:linear-gradient(140deg,#ffe680 0%,#ffc02e 48%,#ff9800 100%);box-shadow:0 1px 4px rgba(255,167,38,.3),inset 0 0 0 1px rgba(255,255,255,.45)}
.tb-dog{font-size:15px;line-height:1;filter:drop-shadow(0 1px 1px rgba(74,39,0,.3))}
.tb-bolt{position:absolute;right:-3px;bottom:-3px;width:11px;height:11px;padding:1.5px;border-radius:50%;background:#2a1906;fill:#ffd54f;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.tb-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-status{flex:1;display:flex;align-items:center;gap:6px;font-size:11px;color:var(--tx2);min-width:0;overflow:hidden}
.tb-status span{white-space:nowrap}
.phase-dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.phase-dot.open{background:var(--up);box-shadow:0 0 6px var(--up);animation:blink 1.6s infinite}
.phase-dot.closed{background:var(--tx3)}
@keyframes blink{50%{opacity:.35}}
.tb-ctrl{display:flex;align-items:center;gap:5px;flex:0 0 auto}
.icon-btn{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:4px 8px;font-size:12px;color:var(--tx2)}
.icon-btn.active{color:var(--gold);border-color:var(--gold)}
.spd{display:flex;background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.spd-btn{padding:4px 7px;font-size:11px;color:var(--tx2)}
.spd-btn.active{background:var(--blue);color:#fff}
@media (max-width:380px){
  .topbar{gap:6px;padding:8px 8px 6px}
  .icon-btn{padding:4px 6px}
  .tb-logo{font-size:14px}
}
@media (max-width:340px){
  #tbClock{display:none}
}

/* ===== 风险提示跑马灯 ===== */
.risk-strip{flex:0 0 auto;background:rgba(255,77,79,0.09);border-top:1px solid rgba(255,77,79,0.25);border-bottom:1px solid rgba(255,77,79,0.25);overflow:hidden;height:22px;position:relative}
.risk-scroll{display:inline-block;white-space:nowrap;animation:marquee 18s linear infinite;will-change:transform}
.risk-scroll span{display:inline-block;font-size:11px;color:#ff8a8c;line-height:22px;padding-right:40px}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.progress{height:2px;background:var(--bg2);flex:0 0 auto}
.bar{height:100%;width:0;transition:width .3s}
.bar.open{background:linear-gradient(90deg,var(--up),var(--gold))}
.bar.closed{background:var(--tx3)}
.risk-bar{flex:0 0 auto;background:rgba(255,77,79,0.15);color:#ffb3b4;font-size:12px;padding:6px 12px;border-bottom:1px solid rgba(255,77,79,0.3)}
.risk-val{color:var(--up);font-size:13px}

/* ===== 页面容器 ===== */
.pages{flex:1;overflow:hidden;position:relative}
.page{position:absolute;top:0;right:0;bottom:0;left:0;overflow-y:auto;overflow-x:hidden;display:none;padding:10px 12px calc(var(--nav-h) + 26px + var(--safe-b));-webkit-overflow-scrolling:touch}
.page.active{display:block}

/* ===== 底部导航 ===== */
.bnav{position:absolute;left:0;right:0;bottom:0;height:calc(var(--nav-h) + var(--safe-b));padding-bottom:var(--safe-b);box-sizing:border-box;background:rgba(19,24,38,0.97);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid var(--line);display:flex;z-index:40}
.bnav-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-size:10px;color:var(--tx3);position:relative}
.bnav-btn .ico{display:flex;align-items:center;justify-content:center;height:22px}
.bnav-btn .ico svg{width:21px;height:21px}
.bnav-btn.active{color:var(--up)}
.nav-badge{position:absolute;top:4px;right:calc(50% - 22px);background:var(--up);color:#fff;font-size:9px;border-radius:8px;padding:0 4px;line-height:14px;font-weight:700}

/* ===== 自选页 ===== */
.idx-card{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,var(--card),var(--card2));border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:8px}
.idx-name{font-size:13px;color:var(--tx2)}
.idx-code{font-size:11px;color:var(--tx3)}
.idx-val{font-size:30px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-0.5px;margin-top:2px}
.idx-right{display:flex;align-items:center;gap:10px}
.idx-chgbox{min-width:86px;text-align:center;background:var(--up-bg);border-radius:10px;padding:6px 10px;font-variant-numeric:tabular-nums}
.idx-chgbox.up{background:var(--up-bg);color:var(--up)}
.idx-chgbox.down{background:var(--dn-bg);color:var(--dn)}
.idx-chgbox div:first-child{font-size:14px;font-weight:700}
.idx-chgbox div:last-child{font-size:12px;font-weight:600}
.idx-spark{width:76px;height:38px}
.mkt-row{display:flex;gap:12px;font-size:11px;color:var(--tx2);padding:0 4px 8px;align-items:center}
.mkt-phase{margin-left:auto;color:var(--tx3)}
.wl-head{display:flex;align-items:center;font-size:11px;color:var(--tx3);padding:4px 12px;border-bottom:1px solid var(--line)}
.wl-head .w1{flex:0 0 42%}
.wl-head .w2{flex:1;text-align:center}
.wl-head .w3{flex:0 0 34%;text-align:right}
.stock-list{border-bottom:1px solid var(--line)}
.stk{display:flex;align-items:center;padding:9px 12px;border-bottom:1px solid var(--line);gap:8px;cursor:pointer;transition:background .12s}
.stk:active{background:var(--card)}
.stk-main{flex:0 0 42%;min-width:0}
.stk-name{display:flex;align-items:center;gap:4px;font-size:14px;font-weight:600;white-space:nowrap}
.stk-sub{display:flex;align-items:center;gap:4px;font-size:10px;color:var(--tx3);margin-top:1px}
.badge{font-size:9px;border-radius:3px;padding:0 3px;line-height:14px;font-weight:400;flex:0 0 auto}
.badge.rong{color:var(--gold);border:1px solid rgba(245,197,66,0.5)}
.badge.halt{color:#fff;background:var(--tx3)}
.badge.hold{color:var(--blue);border:1px solid rgba(66,165,245,0.5)}
.badge.yao{color:#c792ea;border:1px solid rgba(199,146,234,0.6)}
.badge.sig-b{color:var(--up);border:1px solid rgba(255,77,79,0.5)}
.badge.sig-s{color:var(--dn);border:1px solid rgba(0,181,120,0.5)}
.stk-spark{flex:1;height:30px;min-width:0}
.stk-px{flex:0 0 34%;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.stk-price{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.stk-chg{font-size:11px;border-radius:4px;padding:0 6px;line-height:17px;font-weight:600;font-variant-numeric:tabular-nums}
.stk-chg.up{background:var(--up-bg);color:var(--up)}
.stk-chg.down{background:var(--dn-bg);color:var(--dn)}
.foot-warn{text-align:center;font-size:11px;color:var(--tx3);padding:14px 0 6px}

/* ===== 详情页 ===== */
.detail-head{display:flex;align-items:flex-start;justify-content:space-between;padding:2px 2px 8px;gap:8px;cursor:pointer}
.back-btn{flex:0 0 auto;align-self:center;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:5px 9px;font-size:12px;color:var(--tx2)}
.dh-l{flex:1;min-width:0}
.dh-name{display:flex;align-items:center;gap:6px;font-size:18px;font-weight:700}
.badge-rong{font-size:10px;color:var(--gold);border:1px solid rgba(245,197,66,0.5);border-radius:4px;padding:0 4px;line-height:16px;font-weight:400}
.badge-halt{font-size:10px;color:#fff;background:var(--tx3);border-radius:4px;padding:0 4px;line-height:16px;font-weight:400}
.dh-code{font-size:11px;color:var(--tx3);margin-top:2px}
.dh-r{text-align:right}
.dh-price{font-size:26px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.15}
.dh-chg{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.dh-tip{font-size:10px;color:var(--tx3);margin-top:3px}
.dh-caret{display:inline-block;transition:transform .18s ease}
.dh-caret.open{transform:rotate(180deg)}
.detail-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:6px 4px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:9px 10px;margin-bottom:10px;animation:metaIn .18s ease}
.detail-meta.hide{display:none}
@keyframes metaIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.detail-meta>div{font-size:10px;color:var(--tx3);text-align:center}
.detail-meta b{display:block;font-size:12px;color:var(--tx);margin-top:1px;font-variant-numeric:tabular-nums;font-weight:600}
.chart-sec{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px;margin-bottom:10px}
.tf-row{display:flex;gap:0;border-bottom:1px solid var(--line);margin-bottom:6px}
.tf-btn{flex:1;padding:7px 0;font-size:13px;color:var(--tx2);position:relative}
.tf-btn.active{color:var(--up);font-weight:700}
.tf-btn.active::after{content:'';position:absolute;left:25%;right:25%;bottom:0;height:2px;background:var(--up);border-radius:1px}
.chart-wrap{height:300px;position:relative}
/* 横向拖动归图表（事件保持可取消），纵向仍交给页面滚动，避免和浏览器滚动抢手势 */
.chart-wrap canvas{width:100%;height:100%;display:block;touch-action:pan-y}
.ov-row,.sub-row{display:flex;gap:6px;padding:7px 2px 1px;flex-wrap:wrap}
.chip-btn{font-size:11px;color:var(--tx2);background:var(--bg2);border:1px solid var(--line);border-radius:20px;padding:3px 11px}
.chip-btn.active{color:#fff;background:var(--blue);border-color:var(--blue)}
.k-day-bar{display:flex;align-items:center;gap:8px;margin:7px 0 8px;padding:7px 9px;background:var(--card);border:1px solid var(--line);border-radius:9px;font-size:11px;color:var(--tx2)}
.kdb-day{font-size:12px;font-weight:700;color:var(--tx);white-space:nowrap}
.kdb-meta{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tx3);font-size:10px}
.k-day-panel{margin:0 0 8px;padding:8px;background:var(--card);border:1px solid var(--line);border-radius:10px}
.kdp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;font-size:12px;color:var(--tx)}
.kdp-chart{height:170px;position:relative}
.kdp-chart canvas{width:100%;height:100%;display:block;touch-action:pan-y}
.signal-box{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:10px;font-size:12px}
.sig-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sig-dir{font-size:15px;font-weight:700}
.sig-dir.up{color:var(--up)}.sig-dir.down{color:var(--dn)}.sig-dir.flat{color:var(--tx2)}
.sig-score{color:var(--gold);font-size:11px}
.sig-rate{margin-left:auto;color:var(--tx3);font-size:11px}
.sig-desc{color:var(--tx2);margin-top:4px}
.sig-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.sig-tag{font-size:10px;border-radius:4px;padding:1px 6px}
.sig-tag.up{color:var(--up);background:var(--up-bg)}
.sig-tag.down{color:var(--dn);background:var(--dn-bg)}
.sig-note{color:var(--tx3);font-size:10px;margin-top:6px}
.sig-empty{color:var(--tx3)}
.trade-acts{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.ta-hold{flex:1;font-size:11px;color:var(--tx2);background:var(--card);border:1px solid var(--line);border-radius:10px;padding:7px 9px;min-width:0;line-height:1.35}
.trade-acts .btn{flex:0 0 auto;padding:10px 16px;font-size:14px}
.orders-inline{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px 10px;margin-bottom:10px}

/* ===== 通用按钮 ===== */
.btn{background:var(--card2);border:1px solid var(--line2);border-radius:10px;padding:10px 14px;font-size:13px;color:var(--tx);font-weight:600}
.btn.buy{background:var(--up);border-color:var(--up);color:#fff}
.btn.sell{background:var(--dn);border-color:var(--dn);color:#fff}
.btn.ghost{background:transparent;color:var(--tx2)}
.btn.danger{background:#d43a3d;border-color:#d43a3d;color:#fff}
.btn.reborn{background:linear-gradient(135deg,#7b2ff7,#f107a3);border:none;color:#fff}
.btn.farewell{background:rgba(255,77,79,.08);border:1px solid rgba(255,77,79,.32);color:#ff8a8c}
.btn.big{padding:13px 0;font-size:15px;flex:1}
.btn.small{padding:7px 12px;font-size:12px}
.btn.tiny{padding:6px 9px;font-size:11px;width:auto;flex:0 0 auto}
.btn.wide{width:100%}
.btn:active{opacity:.8}

/* ===== 交易页 ===== */
.sec-title{font-size:15px;font-weight:700;padding:6px 2px 8px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.sec-sub{font-size:10px;color:var(--tx3);font-weight:400}
.otype-row{display:flex;gap:8px;margin-bottom:10px}
.otype{flex:1;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:9px 0;font-size:13px;color:var(--tx2)}
.otype.active{border-color:var(--up);color:var(--up);background:var(--up-bg);font-weight:700}
.pick-row{display:flex;gap:6px;overflow-x:auto;padding-bottom:8px;margin-bottom:4px}
.pick-chip{flex:0 0 auto;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:5px 12px;font-size:12px;color:var(--tx2);white-space:nowrap}
.pick-chip.active{border-color:var(--blue);color:var(--blue);background:rgba(66,165,245,0.10)}
.pick-chip b{font-size:10px;margin-left:4px;font-variant-numeric:tabular-nums}
.order-form{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px}
.of-row{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.of-label{flex:0 0 52px;font-size:12px;color:var(--tx2)}
.of-row input{flex:1;text-align:center;font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}
.step-btn{flex:0 0 40px;height:40px;background:var(--bg2);border:1px solid var(--line2);border-radius:8px;font-size:18px;color:var(--tx2)}
.qty-btns{display:flex;gap:6px;margin-bottom:10px}
.qty-btns button{flex:1;background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:7px 0;font-size:12px;color:var(--tx2)}
.qty-btns button:active{border-color:var(--blue);color:var(--blue)}
.lev-row{display:flex;align-items:center;gap:5px;flex-wrap:wrap;font-size:12px;color:var(--tx2);margin-bottom:8px}
.lev-btn{background:var(--bg2);border:1px solid var(--line);border-radius:6px;padding:4px 9px;font-size:12px;color:var(--tx2)}
.lev-btn.active{background:var(--gold);border-color:var(--gold);color:#1a1400;font-weight:700}
.lev-hint{width:100%;font-size:10px;color:var(--tx3)}
.est-box{background:var(--bg2);border-radius:8px;padding:8px 10px;font-size:11px;color:var(--tx2);margin-bottom:10px;line-height:1.7}
.est-box b{color:var(--tx);font-variant-numeric:tabular-nums}
.big-btns{display:flex;gap:10px}
.orders-box .empty,.pos-list .empty,.news-box .empty,.log-box .empty{color:var(--tx3);font-size:12px;text-align:center;padding:18px 0}
.order-item{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:9px 11px;margin-bottom:8px;font-size:12px}
.oi-l{flex:1;min-width:0}
.oi-t{display:flex;align-items:center;gap:6px;font-weight:600}
.oi-side{font-size:10px;border-radius:3px;padding:0 4px;line-height:16px}
.oi-side.buy{color:#fff;background:var(--up)}
.oi-side.sell{color:#fff;background:var(--dn)}
.oi-sub{color:var(--tx3);font-size:10px;margin-top:2px}
.btn-mini{background:var(--bg2);border:1px solid var(--line2);border-radius:6px;padding:4px 9px;font-size:11px;color:var(--tx2)}
.btn-mini.cancel{color:#ff8a8c;border-color:rgba(255,77,79,0.4)}

/* ===== 排行榜 ===== */
.rank-box{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.rank-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line);font-size:13px}
.rank-row:last-child{border-bottom:none}
.rank-no{flex:0 0 26px;text-align:center;font-weight:700;color:var(--tx3);font-variant-numeric:tabular-nums}
.rank-row.top1 .rank-no{color:var(--gold);font-size:16px}
.rank-row.top2 .rank-no{color:#c0c8d8;font-size:15px}
.rank-row.top3 .rank-no{color:#cd8b4f;font-size:15px}
.rank-ava{flex:0 0 auto;font-size:18px}
.rank-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank-name .tag-me{font-size:9px;color:#1a1400;background:var(--gold);border-radius:3px;padding:0 4px;margin-left:5px;font-weight:700}
.rank-name .tag-style{display:block;font-size:10px;color:var(--tx3);font-weight:400}
.rank-r{flex:0 0 auto;text-align:right;font-variant-numeric:tabular-nums}
.rank-na{font-size:13px;font-weight:700}
.rank-chg{font-size:10px;margin-top:1px}
.rank-row.me{background:rgba(245,197,66,0.07)}
.rank-row.bankrupt .rank-name{color:var(--tx3);text-decoration:line-through}

/* ===== 消息 / 日志 ===== */
.tab2-row{display:flex;gap:8px;margin-bottom:10px}
.tab2{flex:1;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 0;font-size:13px;color:var(--tx2)}
.tab2.active{color:var(--up);border-color:rgba(255,77,79,0.5);font-weight:700;background:var(--up-bg)}
.news-box,.log-box{max-width:100%}
.news{display:flex;gap:7px;align-items:baseline;background:var(--card);border:1px solid var(--line);border-left:3px solid var(--tx3);border-radius:8px;padding:8px 10px;margin-bottom:7px;font-size:12px;line-height:1.5}
.news.up{border-left-color:var(--up)}
.news.down{border-left-color:var(--dn)}
.news-day{flex:0 0 auto;color:var(--tx3);font-size:10px}
.news-scope{flex:0 0 auto;font-size:10px;color:var(--blue)}
.news-text{flex:1;color:var(--tx2)}
.log{font-size:12px;color:var(--tx2);padding:6px 2px;border-bottom:1px solid var(--line);line-height:1.5}
.log.up{color:#ff9a9b}.log.down{color:#6fd7b0}.log.warn{color:var(--gold)}

/* ===== 我的 ===== */
.me-hero{background:linear-gradient(135deg,#1c2338,#232c4a);border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:10px}
.me-na span{font-size:11px;color:var(--tx2)}
.me-na b{display:block;font-size:30px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:2px}
.me-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.me-grid>div{font-size:10px;color:var(--tx3)}
.me-grid b{display:block;font-size:12px;color:var(--tx);margin-top:1px;font-variant-numeric:tabular-nums}
.sub-head{font-size:13px;font-weight:700;padding:12px 2px 7px;color:var(--tx2)}
.pos-list{margin-bottom:4px}
.pos{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 11px;margin-bottom:8px}
.pos-l{flex:1;min-width:0}
.pos-name{font-size:13px;font-weight:600;display:flex;align-items:center;gap:5px}
.pos-lev{font-size:9px;color:var(--gold);border:1px solid rgba(245,197,66,0.5);border-radius:3px;padding:0 3px;font-weight:400}
.pos-sub{font-size:10px;color:var(--tx3);margin-top:2px}
.pos-r{text-align:right;font-variant-numeric:tabular-nums}
.pos-px{font-size:14px;font-weight:700}
.pos-pnl{font-size:10px;margin-top:1px}
.pos-acts{display:flex;flex-direction:column;gap:5px}
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.stat-grid>div{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:9px 11px;font-size:11px;color:var(--tx3)}
.stat-grid b{display:block;font-size:14px;color:var(--tx);margin-top:2px;font-variant-numeric:tabular-nums}
.equity{width:100%;height:110px;background:var(--card);border:1px solid var(--line);border-radius:10px}
.trade-list{max-height:320px;overflow-y:auto}
.tbl{width:100%;border-collapse:collapse;font-size:11px}
.tbl th{color:var(--tx3);font-weight:400;text-align:left;padding:5px 4px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:6px 4px;border-bottom:1px solid var(--line);color:var(--tx2);font-variant-numeric:tabular-nums;white-space:nowrap}
.me-btns{display:flex;flex-direction:column;gap:9px;margin:16px 0 6px}
.ach-box{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.ach{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:9px 11px;opacity:.45}
.ach.got{opacity:1;border-color:rgba(245,197,66,0.5);background:rgba(245,197,66,0.06)}
.ach b{display:block;font-size:12px;color:var(--gold)}
.ach span{font-size:10px;color:var(--tx3)}

/* ===== 贷款 ===== */
.loan-sum{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:10px}
.loan-sum>div{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px;text-align:center;font-size:10px;color:var(--tx3)}
.loan-sum b{display:block;font-size:12px;color:var(--tx);margin-top:2px}
.loan-form{display:flex;gap:6px;align-items:center;margin-bottom:8px}
.loan-form input{flex:1;text-align:center}
.loan-form span{font-size:12px;color:var(--tx2);flex:0 0 auto}
.loan-form select{flex:0 0 auto;width:auto}
.loan-hint{font-size:10px;color:var(--tx3);line-height:1.6;margin-bottom:8px}
.loan-item{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:9px 11px;margin-bottom:8px;font-size:12px}
.li-l{flex:1;min-width:0}
.li-sub{font-size:10px;color:var(--tx3);margin-top:2px}
.badge.warn{color:var(--gold);border:1px solid rgba(245,197,66,0.5)}
.badge.bad{color:#ff8a8c;border:1px solid rgba(255,77,79,0.5)}

/* ===== Toast ===== */
.toast-box{position:absolute;top:64px;left:12px;right:12px;z-index:90;display:flex;flex-direction:column;gap:6px;pointer-events:none}
.toast{background:rgba(28,35,56,0.96);border:1px solid var(--line2);border-left:3px solid var(--blue);border-radius:9px;padding:9px 12px;font-size:12px;color:var(--tx);box-shadow:0 6px 20px rgba(0,0,0,0.45);animation:tin .25s;line-height:1.45}
.toast.up{border-left-color:var(--up)}
.toast.down{border-left-color:var(--dn)}
.toast.warn{border-left-color:var(--gold)}
.toast.out{opacity:0;transform:translateY(-6px);transition:.3s}
@keyframes tin{from{opacity:0;transform:translateY(-8px)}}

/* ===== 弹窗 ===== */
.modal{position:absolute;top:0;right:0;bottom:0;left:0;background:rgba(5,7,12,0.72);z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.modal-box{background:var(--bg2);border:1px solid var(--line2);border-radius:16px;max-width:440px;width:100%;max-height:82vh;max-height:82dvh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--line);font-size:15px}
.modal-body{padding:13px 16px;overflow-y:auto;font-size:13px;color:var(--tx2);line-height:1.65}
.modal-body p{margin-bottom:9px}
.modal-body .warn{color:#ff9a9b;background:rgba(255,77,79,0.08);border:1px solid rgba(255,77,79,0.25);border-radius:9px;padding:9px 11px;font-size:12px}
.modal-body .warn.small{font-size:11px;padding:7px 10px}
.modal-btns{display:flex;gap:10px;padding:12px 16px;border-top:1px solid var(--line)}
.modal-btns .btn{flex:1}
.rb-q{font-size:15px;color:var(--tx);font-weight:700;text-align:center}
.rb-info{font-size:12px;color:var(--tx2);text-align:center}
.bk{border-color:rgba(255,77,79,0.4);text-align:center;padding:22px 18px}
.bk-title{font-size:26px;font-weight:800;color:var(--up);letter-spacing:6px}
.bk-sub{font-size:12px;color:var(--tx2);margin:5px 0 14px}
.bk-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;text-align:left;margin-bottom:12px}
.bk-grid>div{background:var(--card);border-radius:9px;padding:8px 11px;font-size:10px;color:var(--tx3)}
.bk-grid b{display:block;font-size:14px;color:var(--tx);margin-top:1px}
.bk-quote{font-size:12px;color:var(--tx3);font-style:italic;margin-bottom:10px;line-height:1.6}
.bk .btn.big{width:100%;background:linear-gradient(135deg,#7b2ff7,#f107a3);border:none}

/* ===== 桌面适配 ===== */
@media (min-width:600px){
  body{background:#07090f}
  #app{border-left:1px solid var(--line);border-right:1px solid var(--line)}
  .chart-wrap{height:360px}
  .trade-chart-wrap{height:240px}
}

/* ===== 三按钮下单模式 ===== */
.mode-row{display:flex;gap:8px;margin:2px 0 10px}
.mode-btn{flex:1;padding:11px 0;font-size:15px;font-weight:800;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--tx2);position:relative}
.mode-btn.buy.active{background:rgba(255,77,79,0.16);border-color:var(--up);color:var(--up)}
.mode-btn.sell.active{background:rgba(0,181,120,0.16);border-color:var(--dn);color:var(--dn)}
.mode-btn.ghost.active{background:rgba(66,165,245,0.14);border-color:var(--blue);color:var(--blue)}

/* ===== K线手势提示 ===== */
.k-hint{font-size:10px;color:var(--tx3);text-align:center;padding:2px 0 4px}

/* ===== 快捷下单弹层 ===== */
.qsheet{position:absolute;top:0;right:0;bottom:0;left:0;z-index:95}
.qs-mask{position:absolute;top:0;right:0;bottom:0;left:0;background:rgba(5,7,12,0.55)}
.qs-panel{position:absolute;left:0;right:0;bottom:0;background:var(--bg2);border-top:1px solid var(--line2);border-radius:16px 16px 0 0;padding:12px 14px calc(12px + env(safe-area-inset-bottom,0px));box-shadow:0 -12px 40px rgba(0,0,0,.5);animation:qsUp .22s ease-out}
@keyframes qsUp{from{transform:translateY(30px);opacity:.4}}
.qs-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.qs-head b{font-size:15px}
.qs-head #qsPx{font-size:15px;font-weight:700}
.qs-head #qsChg{font-size:12px}
.qs-hold{flex:1;font-size:11px;color:var(--tx2);text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qs-qty{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.qs-qty input{flex:1;min-width:120px}
.qs-chips{display:flex;gap:6px;width:100%}
.qs-chips button{flex:1;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:6px 0;font-size:11px;color:var(--tx2)}
.qs-btns{display:flex;gap:8px}
.qs-btns .btn{flex:1;padding:12px 0;font-size:15px}
.qs-foot{margin-top:9px;font-size:10px;color:var(--tx3);text-align:center}
.qs-foot #qsMore{color:var(--blue)}
#qsOrders{max-height:150px;overflow-y:auto;margin-top:9px}

/* ===== 交易页持仓条 + 图表卡 ===== */
.pos-strip{display:flex;gap:8px;overflow-x:auto;padding:2px 0 8px;-webkit-overflow-scrolling:touch}
.pos-card{flex:0 0 auto;min-width:132px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 10px;text-align:left}
.pos-card.active{border-color:var(--blue)}
.pos-card .pc-n{font-size:12px;font-weight:700;display:flex;gap:6px;align-items:center}
.pos-card .pc-q{font-size:10px;color:var(--tx3);margin:2px 0}
.pos-card .pc-p{font-size:13px;font-weight:700}
.chart-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px;margin-bottom:10px}
.ttf-row{display:flex;gap:6px;margin-bottom:6px}
.ttf-btn{padding:4px 10px;font-size:11px;color:var(--tx2);background:var(--bg2);border:1px solid var(--line);border-radius:8px}
.ttf-btn.active{color:#fff;background:var(--blue);border-color:var(--blue)}
.trade-chart-wrap{height:200px;position:relative}
.trade-chart-wrap canvas{width:100%;height:100%;display:block;touch-action:pan-y}

/* ===== 消息中性色 ===== */
.news.flat{border-left-color:var(--tx3)}
.news.flat .news-text{color:var(--tx2)}