/* app.css — 深色、密集、数据优先。移动端硬约束见 docs/PRD.md §9.1 */
:root{
  --bg:#0f1114; --panel:#171a20; --panel2:#1d222a; --line:#272d37;
  --tx:#e7eaee; --dim:#8b939f; --gold:#d4a548;
  --up:#35c46a; --down:#ff5f56; --warn:#e6a23c;
  --r:14px;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* 必须在所有布局规则之前且带 !important：#login 有 display:flex，
   会盖过 [hidden] 的 UA 默认样式，导致登录后登录卡片还浮在最上面。 */
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--tx);
  font:15px/1.45 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  min-height:100vh; min-height:100dvh;   /* 100dvh 别删：iOS 的 100vh 含地址栏，底部会被切 */
  touch-action:manipulation;             /* 防双击缩放，替代 maximum-scale */
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
/* 输入框 font-size 不得 <16px：iOS Safari 一聚焦就把整页放大且不缩回 */
input,select,textarea{font:inherit;font-size:16px;color:var(--tx)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.dim{color:var(--dim)}
.dim.sm{font-size:11px;display:block}
.up{color:var(--up)} .down{color:var(--down)} .flat{color:var(--dim)}
.up.big,.down.big,.flat.big{font-size:30px;font-weight:700;letter-spacing:-.5px}
.mb{margin-bottom:10px} .mt{margin-top:14px}

/* ---------- 登录 ---------- */
#login{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;
  padding:calc(24px + var(--safe-t)) 18px calc(24px + var(--safe-b))}
.login-card{width:100%;max-width:400px;background:var(--panel);border:1px solid var(--line);
  border-radius:18px;padding:22px}
.brand{display:flex;gap:12px;align-items:center;margin-bottom:20px}
.brand-mark{width:44px;height:44px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:linear-gradient(145deg,#d4a548,#a97c26);color:#1a1206;font-weight:800;font-size:20px}
.brand b{font-size:17px;display:block}
.login-hint{margin-top:14px;font-size:12px;line-height:1.7;color:var(--dim);
  background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.login-foot{margin-top:14px;display:flex;justify-content:space-between;align-items:center;font-size:12px}
.linkbtn{background:none;border:0;color:var(--gold);padding:8px 0;min-height:44px}

/* ---------- 外壳 ---------- */
#app{max-width:560px;margin:0 auto;padding:0 12px;
  padding-top:calc(var(--safe-t));
  padding-bottom:calc(80px + var(--safe-b))}   /* 留够玩家端放大后的 tabbar */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  gap:8px;padding:10px 2px;background:linear-gradient(var(--bg) 72%,rgba(15,17,20,0));
  backdrop-filter:blur(6px)}
.who{display:flex;align-items:center;gap:8px;min-width:0}
.who b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topright{display:flex;align-items:center;gap:6px;flex:none}
.avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:linear-gradient(145deg,#3a4250,#242a34);font-weight:700}
.avatar.sm{width:28px;height:28px;font-size:13px}
.avatar.off{opacity:.45}

/* ---------- 底部导航 ---------- */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;
  background:rgba(20,23,29,.94);backdrop-filter:blur(12px);border-top:1px solid var(--line);
  padding-bottom:var(--safe-b)}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;min-height:54px;font-size:11px;color:var(--dim)}
.tabbar a.on{color:var(--gold)}
.tabbar .ic{font-size:17px;line-height:1}
/* 玩家端：图标和字号放大一档 */
.tabbar.big a{min-height:66px;font-size:14px;gap:4px}
.tabbar.big .ic{font-size:26px}

/* ---------- 卡片 ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:14px;margin-bottom:10px}
.card-hd{display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-weight:600;margin-bottom:10px;font-size:14px}
.card-hd .dim,.card-hd .link{font-weight:400;font-size:12px}
.link{color:var(--gold)}
.page-title{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:700;margin:6px 2px 12px}
.back{width:44px;height:44px;margin-left:-10px;display:grid;place-items:center;
  font-size:24px;color:var(--dim)}   /* 44px 触摸目标，别改小 */
.note-line{margin-top:10px;font-size:11px;color:var(--dim);line-height:1.6}
.warn-line{margin:-2px 2px 10px;font-size:12px;color:var(--warn)}
.alert{background:rgba(255,95,86,.12);border:1px solid rgba(255,95,86,.4);color:#ffb4af;
  border-radius:10px;padding:10px 12px;margin-bottom:10px;font-size:13px}
.okbox{border-color:rgba(53,196,106,.45);background:rgba(53,196,106,.08)}
.errbox{border-color:rgba(255,95,86,.45);background:rgba(255,95,86,.08)}
.fine{margin:0;padding-left:18px;font-size:12px;line-height:1.8;color:var(--dim)}
.empty{padding:22px 6px;text-align:center;color:var(--dim);font-size:13px}

/* ---------- 钱包卡 ---------- */
.purse{background:linear-gradient(150deg,#1f242e,#171a20)}
.purse-lbl{font-size:12px;color:var(--dim)}
.purse-val{font-size:34px;font-weight:700;letter-spacing:-1px;margin-top:2px}
.purse-sub{display:flex;gap:22px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:13px}
.purse-sub div{display:flex;gap:6px;align-items:baseline}
.hero{text-align:center;padding:20px 14px}
.hero.sm{padding:16px 14px}
.hero-lbl{font-size:12px;color:var(--dim)}
.hero-val{font-size:32px;font-weight:700;letter-spacing:-1px;margin:4px 0 6px}
.hero-sub{font-size:12px;color:var(--dim)}

/* ---------- 玩家首页：只有一个大圆按钮 ----------
   给不熟手机的人用：一屏一个动作，按钮大到不可能点错，文字大到不用眯眼。 */
.home{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:26px;text-align:center;
  min-height:calc(100vh - 200px);min-height:calc(100dvh - 200px)}
.bigbtn{width:236px;height:236px;max-width:70vw;max-height:70vw;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  border:0;padding:0;
  background:radial-gradient(circle at 38% 30%,#f0c469,#d4a548 46%,#a97c26);
  color:#1a1206;box-shadow:0 14px 40px rgba(212,165,72,.28),inset 0 -6px 18px rgba(0,0,0,.18)}
.bigbtn .bigbtn-ic{font-size:44px;line-height:1;opacity:.85}
.bigbtn .bigbtn-tx{font-size:38px;font-weight:800;letter-spacing:2px}
.bigbtn:active{transform:scale(.96)}
.bigbtn.stop{background:radial-gradient(circle at 38% 30%,#ff8f88,#ff5f56 46%,#c9382f);
  color:#2a0d0b;box-shadow:0 14px 40px rgba(255,95,86,.26),inset 0 -6px 18px rgba(0,0,0,.2)}
.bigbtn.muted{background:radial-gradient(circle at 38% 30%,#4a525f,#39414d 46%,#2a3038);
  color:#aeb6c1;box-shadow:none}
.home-tip{font-size:17px;line-height:1.7;color:var(--dim)}
.home-tip.warn{color:var(--warn)}
.home-live{display:flex;flex-direction:column;align-items:center;gap:6px}
.home-live-hd{display:flex;align-items:center;gap:7px;font-size:15px;color:var(--gold)}
.home-live-venue{font-size:26px;font-weight:700}
.home-live-meta{font-size:15px;color:var(--dim)}
.linkbtn.quiet{color:var(--dim);font-size:15px;text-decoration:underline;text-underline-offset:4px}

/* ---------- 进行中 ---------- */
.live{border-color:rgba(212,165,72,.45);background:linear-gradient(150deg,rgba(212,165,72,.1),var(--panel))}
.live-hd{display:flex;align-items:center;gap:7px;font-weight:600;font-size:14px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--gold);animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.live-body{display:flex;gap:24px;margin:12px 0 14px;font-size:14px}
.live-body div{display:flex;gap:6px;align-items:baseline}

/* ---------- 统计块 ---------- */
.grid2,.grid3{display:grid;gap:8px;margin-bottom:10px}
.grid2{grid-template-columns:1fr 1fr}
.grid3{grid-template-columns:repeat(3,1fr)}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 10px;text-align:center}
.stat .sv{font-size:18px;font-weight:700;letter-spacing:-.3px}
.stat .sl{font-size:11px;color:var(--dim);margin-top:3px}
.stat .ss{font-size:11px;color:var(--dim);opacity:.8;margin-top:1px}

/* ---------- 列表 ---------- */
.rows{list-style:none;margin:0;padding:0}
.row{display:flex;align-items:center;gap:10px;padding:11px 2px;border-top:1px solid var(--line)}
.rows .row:first-child{border-top:0}
.row.tap{cursor:pointer}
.row.tap:active{background:var(--panel2)}
.row-main{flex:1;min-width:0}
.row-t{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-s{font-size:11px;color:var(--dim);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-right{flex:none;text-align:right;font-size:14px;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.row.total{border-top:2px solid var(--line);margin-top:4px}
.kv{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--line);font-size:14px}
.kv:first-child{border-top:0;padding-top:0}
.kv span{color:var(--dim)}
.me-hd{display:flex;gap:12px;align-items:center;padding-bottom:12px}
.me-hd .dim{font-size:12px}

/* ---------- 按钮 ---------- */
.btn{border:1px solid var(--line);background:var(--panel2);border-radius:11px;
  padding:11px 16px;min-height:44px;font-weight:600}
.btn.primary{background:linear-gradient(145deg,#d4a548,#b98a2e);border-color:#c19334;color:#1a1206}
.btn.danger{background:rgba(255,95,86,.14);border-color:rgba(255,95,86,.4);color:#ff8b84}
.btn.ghost{background:transparent}
.btn.block{display:block;width:100%;margin-bottom:10px}
.btn.big-cta{padding:16px;font-size:16px}
.btn:active{transform:translateY(1px)}
.mini{border:1px solid var(--line);background:var(--panel2);border-radius:8px;
  padding:6px 10px;font-size:12px;min-height:32px}
.list-actions{display:grid;gap:8px;padding:10px}
.list-actions.row2{grid-template-columns:1fr 1fr}
.list-actions.row3{grid-template-columns:repeat(3,1fr)}
.list-actions button{border:1px solid var(--line);background:var(--panel2);border-radius:10px;
  padding:12px 10px;min-height:46px;text-align:center;font-size:14px}
.list-actions button.primary{background:linear-gradient(145deg,#d4a548,#b98a2e);color:#1a1206;font-weight:600}
.list-actions button.danger{color:#ff8b84}
.list-actions button:active{background:#232935}

/* ---------- 分段 / 徽章 / chips ---------- */
.seg{display:flex;gap:6px;background:var(--panel);border:1px solid var(--line);
  border-radius:11px;padding:4px;margin-bottom:10px}
.seg button{flex:1;border:0;background:transparent;border-radius:8px;padding:9px;
  min-height:40px;color:var(--dim);font-size:13px}
.seg button.on{background:var(--panel2);color:var(--tx);font-weight:600}
.mini-seg{margin:0;padding:2px;gap:2px}
.mini-seg button{padding:5px 8px;min-height:30px;font-size:11px}
.pill{display:inline-block;font-size:10px;padding:2px 7px;border-radius:999px;
  background:var(--panel2);border:1px solid var(--line);color:var(--dim);vertical-align:middle}
.pill.gold{color:var(--gold);border-color:rgba(212,165,72,.4);background:rgba(212,165,72,.1)}
.pill.live{color:var(--gold);border-color:rgba(212,165,72,.5)}
.pill.warn{color:var(--warn);border-color:rgba(230,162,60,.4);background:rgba(230,162,60,.1)}
.pill.win,.pill.inject,.pill.allocate{color:var(--up);border-color:rgba(53,196,106,.35)}
.pill.loss,.pill.withdraw,.pill.reclaim{color:var(--down);border-color:rgba(255,95,86,.35)}
.pill.adjust{color:var(--warn);border-color:rgba(230,162,60,.35)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:-2px 0 12px}
.chip{border:1px solid var(--line);background:var(--panel2);border-radius:999px;
  padding:7px 12px;font-size:12px;min-height:34px}
.chip:active{background:#2a3240}
.ck{display:inline-block;width:18px}
.ck.ok{color:var(--up)} .ck.bad{color:var(--down)}

/* ---------- 启用/停用开关 ---------- */
/* 外框 44px 高保证触摸目标够大，视觉上的轨道只有 28px */
.sw{position:relative;width:52px;height:44px;padding:0;border:0;background:none;flex:none}
.sw::before{content:"";position:absolute;left:2px;top:9px;width:48px;height:26px;
  border-radius:999px;background:#333b47;border:1px solid var(--line);transition:.16s}
.sw.on::before{background:rgba(53,196,106,.35);border-color:rgba(53,196,106,.6)}
.sw .knob{position:absolute;left:5px;top:12px;width:20px;height:20px;border-radius:50%;
  background:#8b939f;transition:.16s}
.sw.on .knob{transform:translateX(22px);background:var(--up)}
.sw:active .knob{width:24px}
.row.off .row-t{color:var(--dim)}
.list-actions button[disabled]{opacity:.4}

/* ---------- 表单 ---------- */
.fld{display:block;margin-bottom:12px}
.fld .lbl{display:block;font-size:12px;color:var(--dim);margin-bottom:5px}
.fld input,.fld select{width:100%;background:var(--panel2);border:1px solid var(--line);
  border-radius:10px;padding:11px 12px;min-height:46px;outline:none}
.fld input:focus,.fld select:focus{border-color:var(--gold)}
.fld .hint{display:block;font-size:11px;color:var(--dim);margin-top:5px}
.two{display:grid;grid-template-columns:1.6fr 1fr;gap:10px}
.filters{display:flex;gap:8px;align-items:center;padding:10px}
.filters select{flex:1;background:var(--panel2);border:1px solid var(--line);border-radius:9px;
  padding:9px;min-height:42px}
.net-preview{margin-top:-2px;font-size:15px;font-weight:600}

/* ---------- 开局弹层（简化版） ---------- */
.avail-line{font-size:15px;color:var(--dim);padding:2px 0 14px;border-bottom:1px solid var(--line);margin-bottom:16px}
.avail-line b{color:var(--tx);font-size:19px}
.fld-block{margin-bottom:20px}
.fld-block>.lbl{font-size:15px;font-weight:600;margin-bottom:8px}
.fld-block>input,.fld-block select{width:100%;background:var(--panel2);border:1px solid var(--line);
  border-radius:11px;padding:14px 12px;min-height:54px;font-size:18px;outline:none}
.fld-block>input:focus,.fld-block select:focus{border-color:var(--gold)}
.btn.geo{width:100%;margin-bottom:8px;background:var(--panel2);font-weight:500;font-size:15px}
.btn.geo:disabled{opacity:.55}
.geo-tip{font-size:13px;line-height:1.6;margin-bottom:8px}
.geo-tip:empty{display:none}
.geo-tip.ok{color:var(--up)}
.geo-tip.warn{color:var(--warn)}
.geo-tip .warn{color:var(--warn)}
.chips.big .chip{padding:11px 16px;min-height:46px;font-size:15px}
details.more{border-top:1px solid var(--line);padding-top:12px}
details.more>summary{list-style:none;cursor:pointer;color:var(--gold);font-size:15px;
  padding:10px 0;min-height:44px;display:flex;align-items:center;gap:6px}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary::before{content:"▸";transition:.15s}
details.more[open]>summary::before{transform:rotate(90deg)}
details.more[open]>summary{margin-bottom:8px}

/* ---------- 表格 ---------- */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl{width:100%;border-collapse:collapse;font-size:13px;white-space:nowrap}
.tbl th{text-align:left;font-weight:500;color:var(--dim);font-size:11px;padding:6px 8px 8px;
  border-bottom:1px solid var(--line)}
.tbl td{padding:10px 8px;border-bottom:1px solid var(--line)}
.tbl tr:last-child td{border-bottom:0}
.tbl tr.tap:active{background:var(--panel2)}

/* ---------- 图表 ---------- */
.chart{width:100%;height:110px;display:block}
.bars{display:flex;flex-direction:column;gap:8px}
.bar-row{display:flex;align-items:center;gap:8px;font-size:12px}
.bar-lbl{width:96px;flex:none;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-track{flex:1;height:16px;position:relative;background:var(--panel2);border-radius:4px}
.bar-mid{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--line)}
.bar-fill{position:absolute;top:3px;bottom:3px;border-radius:3px}
.bar-fill.up{background:var(--up)} .bar-fill.down{background:var(--down)}
.bar-val{width:74px;flex:none;text-align:right}

/* ---------- 弹层 ---------- */
.modal{position:fixed;inset:0;z-index:100;display:none;align-items:flex-end;justify-content:center;
  background:rgba(0,0,0,.6);backdrop-filter:blur(3px)}
.modal.show{display:flex}
.sheet{width:100%;max-width:520px;max-height:88vh;display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);border-bottom:0;
  border-radius:18px 18px 0 0;animation:up .18s ease-out}
@keyframes up{from{transform:translateY(18px);opacity:.4}to{transform:none;opacity:1}}
.sheet-hd{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px;
  font-size:16px;border-bottom:1px solid var(--line)}
.sheet-hd .x{background:none;border:0;font-size:26px;line-height:1;color:var(--dim);
  width:44px;height:44px;margin:-8px -12px -8px 0}
.sheet-bd{padding:14px 16px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.sheet-ft{display:flex;gap:10px;padding:12px 16px calc(14px + var(--safe-b));border-top:1px solid var(--line)}
.sheet-ft .btn{flex:1}

/* ---------- toast / 版本号 ---------- */
.toast{position:fixed;left:50%;bottom:calc(84px + var(--safe-b));transform:translateX(-50%) translateY(12px);
  z-index:200;max-width:86vw;padding:11px 16px;border-radius:11px;font-size:13px;
  background:#2a3240;border:1px solid var(--line);box-shadow:0 8px 26px rgba(0,0,0,.45);
  opacity:0;pointer-events:none;transition:.18s}
.toast.show{opacity:1;transform:translateX(-50%)}
.toast.ok{background:#1d3b28;border-color:rgba(53,196,106,.5)}
.toast.err{background:#3b1e1c;border-color:rgba(255,95,86,.5)}
.ver{position:fixed;right:8px;bottom:calc(2px + var(--safe-b));z-index:1;
  font-size:10px;color:#3a424e;pointer-events:none}

@media (min-width:600px){
  .tabbar{max-width:560px;left:50%;transform:translateX(-50%);border-radius:14px 14px 0 0;border:1px solid var(--line);border-bottom:0}
  .sheet{border-radius:18px;margin-bottom:24px}
  .modal{align-items:center}
}