:root { --bg:#f4f5f7; --card:#fff; --ink:#1a1a1a; --muted:#6b7280; --line:#e5e7eb;
  --green:#15803d; --red:#b91c1c; --blue:#1d4ed8; --amber:#b45309; --radius:14px; }
* { box-sizing:border-box; }
body { margin:0; font-family:-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:var(--bg); color:var(--ink); font-size:16px; line-height:1.5; }
h1 { font-size:20px; margin:0; } h2 { font-size:17px; margin:0 0 10px; }
.topbar { background:#111827; color:#fff; padding:14px 16px; }
.wrap { max-width:720px; margin:0 auto; padding:12px 12px 40px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px; margin-bottom:12px; }
.muted { color:var(--muted); } .small { font-size:13px; }
.hint { color:var(--muted); font-size:13px; margin:6px 0 0; }
.field { display:block; margin-bottom:8px; } .field>span { display:block; font-size:14px; margin-bottom:4px; color:#374151; }
input, select, textarea { font-size:16px; padding:10px 12px; border:1px solid #d1d5db; border-radius:10px; width:100%; background:#fff; }
input[type=number] { -moz-appearance:textfield; }
.row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.row input[type=text] { flex:2 1 120px; } .row input[type=number] { flex:1 1 80px; }
.unit { color:var(--muted); font-size:14px; }
.btn { font-size:16px; padding:11px 18px; border-radius:12px; border:1px solid #d1d5db;
  background:#fff; cursor:pointer; min-height:46px; }
.btn:active { transform:scale(.97); }
.btn.primary { background:#111827; color:#fff; border-color:#111827; }
.btn.warn { background:#fef2f2; color:var(--red); border-color:#fecaca; }
.btn.ghost { background:transparent; border-color:transparent; color:#fff; padding:8px 10px; min-height:36px; }
.btn.big { width:100%; margin-top:8px; }
.btn.small { padding:7px 12px; min-height:38px; font-size:14px; }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.preset-row { display:flex; gap:8px; flex-wrap:wrap; margin:4px 0 8px; }
.preset-row button { flex:1 1 0; min-width:64px; padding:11px 4px; font-size:15px; border-radius:10px;
  border:1px solid #d1d5db; background:#fff; cursor:pointer; min-height:46px; }
.preset-row button.sel { background:#111827; color:#fff; border-color:#111827; }
.preset-row.small button { min-height:40px; padding:8px 4px; }
.custom-price { display:flex; gap:8px; align-items:center; }
.custom-price input { flex:1 1 100px; }
.list .item { display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:12px 4px; border-bottom:1px solid var(--line); }
.list .item:last-child { border-bottom:none; }
.badge { display:inline-block; font-size:12px; padding:2px 8px; border-radius:999px; background:#eef2ff; color:#3730a3; }
.badge.green { background:#dcfce7; color:var(--green); }
.badge.red { background:#fee2e2; color:var(--red); }
.badge.amber { background:#fef3c7; color:var(--amber); }
/* 牌局页 */
.sticky-head { position:sticky; top:0; z-index:20; background:#111827; color:#fff;
  display:flex; align-items:center; gap:8px; padding:8px 10px; }
.game-info { flex:1; min-width:0; }
.game-title { font-size:17px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.game-sub { font-size:13px; color:#d1d5db; }
.status-bar { position:sticky; top:52px; z-index:19; background:#fff; border-bottom:1px solid var(--line);
  display:grid; grid-template-columns:repeat(4,1fr); padding:10px 12px 8px; gap:4px; }
.stat { text-align:center; } .stat b { display:block; font-size:17px; }
.stat span { font-size:11px; color:var(--muted); }
.progress { grid-column:1/-1; height:6px; background:#e5e7eb; border-radius:99px; overflow:hidden; margin-top:6px; }
.progress i { display:block; height:100%; background:#15803d; width:0%; transition:width .3s; }
.tabs { position:sticky; top:118px; z-index:18; display:flex; background:#fff; border-bottom:1px solid var(--line); }
.tab { flex:1; padding:13px 0; font-size:16px; background:none; border:none; border-bottom:3px solid transparent; cursor:pointer; }
.tab.active { border-bottom-color:#111827; font-weight:700; }
.group-title { font-size:15px; color:var(--muted); margin:14px 4px 6px; }
.players { display:grid; gap:10px; }
.pcard { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:12px; }
.pcard.departed { opacity:.92; background:#fafafa; }
.pcard .pname { font-size:17px; font-weight:700; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.pstats { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:10px 0; }
.pstats .cell { background:#f9fafb; border-radius:10px; padding:8px 4px; text-align:center; }
.pstats .cell b { display:block; font-size:16px; }
.pstats .cell span { font-size:11px; color:var(--muted); }
.net { font-size:20px; font-weight:800; }
.net.pos { color:var(--green); } .net.neg { color:var(--red); }
.pactions { display:flex; gap:8px; flex-wrap:wrap; }
.pactions .btn { flex:1 1 40%; }
.pactions .btn.secondary { flex-basis:100%; }
.mini-form { display:flex; gap:8px; margin-top:10px; }
.mini-form input { flex:1; }
.transfer-form { display:flex; gap:8px; align-items:flex-end; }
.transfer-form label { flex:1; font-size:14px; }
.transfer-form select { margin-top:4px; }
.btn.swap { flex:0 0 46px; padding:6px 0; font-size:20px; }
.preview { background:#f9fafb; border:1px dashed #d1d5db; border-radius:10px; padding:10px 12px; margin:10px 0; font-size:14px; white-space:pre-wrap; }
.preview .tag { display:inline-block; background:#111827; color:#fff; border-radius:999px; padding:2px 10px; margin:2px 4px 2px 0; font-size:14px; }
.preview .tag.skip { background:#fff; color:var(--muted); border:1px solid #d1d5db; text-decoration:line-through; }
textarea { resize:vertical; }
.ok { color:var(--green); font-weight:700; } .bad { color:var(--red); font-weight:700; }
.settle-row { display:flex; justify-content:space-between; gap:8px; padding:10px 4px; border-bottom:1px solid var(--line); }
.settle-row:last-child { border-bottom:none; }
.settle-row .nm { font-weight:600; }
.plan-row { display:flex; justify-content:space-between; gap:8px; padding:10px 4px; border-bottom:1px solid var(--line); font-size:16px; }
.plan-row:last-child { border-bottom:none; }
.plan-row b { color:var(--blue); }
@media (max-width:480px) { .pstats .cell b { font-size:15px; } .net { font-size:18px; } }