/* =========================================================================
   娱乐记分牌 · 全局样式（极简现代风 · 浅色）
   UI polish: 2026-11-07（上海时区）—— 移动端层级 / 触控 / 底栏 / 卡片降噪
   移植到微信小程序：将 :root 变量拷贝到 app.wxss，
   把 .class 选择器重命名为小程序 page 作用域即可。
   ========================================================================= */

:root {
  /* 调色板 */
  --bg: #f6f7fb;
  --surface: #ffffff;
  --surface-2: #f1f3f9;
  --border: #e6e9f1;
  --text: #0f172a;
  --text-muted: #556074;
  --text-faint: #7b879c;

  --primary: #4f46e5;       /* 靛蓝主色 */
  --primary-soft: #eef2ff;
  --accent: #10b981;        /* 主操作强调色（保留绿色，用于按钮/启用徽章） */
  --accent-soft: #ecfdf5;
  --danger: #ef4444;        /* 危险操作 / 错误提示色（保留红色，用于删除/警告） */
  --danger-soft: #fef2f2;
  --warning: #f59e0b;
  --warning-soft: #fffbeb;

  /* 盈亏色：中式约定——赚到了=红；亏钱了=绿。
     与 --accent/--danger 视觉相同色相但语义独立，避免跟按钮/危险操作混淆 */
  --win: #ef4444;           /* 净分 > 0：赚到了 */
  --win-soft: #fef2f2;
  --loss: #10b981;          /* 净分 < 0：亏钱了 */
  --loss-soft: #ecfdf5;

  /* 上分/下分（房间内逐手累计，过程指标，区别于上面的结果指标）
     - 上分 = 输出去的分（付给桌上）→ 红
     - 下分 = 收回来的分（从桌上拿走）→ 绿
     恒等式：下分 − 上分 = 该玩家净胜分 */
  --up: #ef4444;
  --down: #10b981;

  /* 尺寸 */
  --radius: 12px;
  --radius-lg: 16px;
  --radius-sm: 8px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.045);
  --shadow:    0 3px 12px rgba(15, 23, 42, 0.07);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);

  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
          "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font);
  font-size: 15px;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}
input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

/* ============== 顶栏品牌（导航已移到底部） ============== */
.app-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-3);
  flex-wrap: nowrap; /* v143：header 只剩品牌，不再为 tab 换行 */
}
.brand { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; }

/* v71 版本身份徽章（头部，品牌名右侧）
   只有云端版显示；用品牌靛蓝而非盈亏红绿，避免跟盈利/亏损语义混淆 */
.edition-badge {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.edition-badge[hidden] { display: none; }
.brand-mark {
  width: 28px; height: 28px;
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.tab-bar { display: flex; gap: var(--space-1); background: var(--surface-2); border-radius: 999px; padding: 3px; }
.tab {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--text-muted);
  transition: all .15s ease;
}
/* v91：tab 图标 —— 纯 CSS ::before 注入，DOM 与 textContent 零变化（不踩守卫断言面） */
.tab[data-route="home"]::before { content: "🏠 "; }
.tab[data-route="game"]::before { content: "🃏 "; }
.tab[data-route="leaderboard"]::before { content: "🏆 "; }
.tab[data-route="monthly"]::before { content: "📊 "; }
.tab[data-route="history"]::before { content: "🕘 "; }
.tab.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.tab:disabled { opacity: 0.5; cursor: not-allowed; }
/* v72 起 tab 可用 hidden 隐藏（v73 起两版本 tab 一致，此规则留给将来的按需隐藏） */
.tab[hidden] { display: none; }

/* ============== 视图容器 ============== */
.view {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--space-4);
  padding-bottom: 80px;
}
.section-title {
  font-size: 13px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: var(--space-5) 0 var(--space-3);
}
.section-title:first-child { margin-top: 0; }

/* ============== 卡片 ============== */
.card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}
.card + .card { margin-top: var(--space-3); }

/* ============== 玩家卡片 ============== */
.player-list { display: flex; flex-direction: column; gap: var(--space-3); }
.player-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.player-row.has-profit { border-color: var(--win); background: var(--win-soft); }
.player-row.has-loss   { border-color: var(--loss); background: var(--loss-soft); }
.player-rank {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
}
.player-row.rank-1 .player-rank { background: #fef3c7; color: #b45309; }
.player-row.rank-2 .player-rank { background: #e2e8f0; color: #475569; }
.player-row.rank-3 .player-rank { background: #fde6cc; color: #c2410c; }

.avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #c7d2fe, #a5b4fc);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #4338ca;
  font-weight: 600;
  font-size: 16px;
  flex-shrink: 0;
}
.player-info { flex: 1; min-width: 0; }
.player-name { font-weight: 600; line-height: 1.3; }
.player-stats { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.player-balance { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 80px; text-align: right; }
.player-balance.profit { color: var(--win); }
.player-balance.loss   { color: var(--loss); }

.player-actions { display: flex; gap: var(--space-1); }
.icon-btn {
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  transition: all .15s ease;
}
/* v90：这两条 :hover 已收进下面的「指针悬停」媒体查询 —— 手机上点完 hover 态会粘住不消
   ⚠️ 注释里别再写该媒体查询的完整源码串：守卫用 indexOf 定位它，会被注释带偏 */

/* ============== 按钮 ============== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 10px 16px;
  border-radius: var(--radius);
  font-weight: 500;
  background: var(--surface-2);
  color: var(--text);
  transition: all .15s ease;
}
/* v90：.btn 系列 :hover 同样收进下面的「指针悬停」媒体查询 */
.btn-primary { background: var(--primary); color: #fff; }
.btn-accent  { background: var(--accent); color: #fff; }
.btn-danger  { background: var(--danger-soft); color: var(--danger); }
.btn-ghost   { background: transparent; color: var(--text-muted); }
.btn-block   { width: 100%; }
.btn-sm      { padding: 6px 12px; font-size: 13px; }
.btn-lg      { padding: 14px 20px; font-size: 16px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ============== 徽章 ============== */
.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.badge-on  { background: var(--accent-soft); color: var(--accent); }
.badge-off { background: var(--surface-2); color: var(--text-muted); }
/* v68 核对未通过徽章（红）：与「净分」红绿语义无关 —— 这里是纯的错误提示色 */
.badge-bad { background: var(--danger-soft); color: var(--danger); }

/* ============== 表单 ============== */
.field { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-3); }
.field label { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.input, .select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  transition: border-color .15s ease;
}
.input:focus, .select:focus { outline: none; border-color: var(--primary); }
.input.input-num { font-variant-numeric: tabular-nums; text-align: right; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }

/* ============== 空状态 ============== */
.empty-state {
  text-align: center;
  padding: var(--space-6) var(--space-4);
  color: var(--text-muted);
}
.empty-state .emoji { font-size: 48px; margin-bottom: var(--space-3); display: block; }
.empty-state .title { color: var(--text); font-weight: 600; margin-bottom: var(--space-1); }

/* ============== 模态框 ============== */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.4);
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: fadeIn .15s ease;
}
@media (min-width: 640px) {
  .modal-backdrop { align-items: center; }
}
.modal {
  width: 100%;
  max-width: 480px;
  background: var(--surface);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: var(--space-5);
  animation: slideUp .2s ease;
  max-height: 90vh;
  overflow-y: auto;
}
@media (min-width: 640px) {
  .modal { border-radius: var(--radius-lg); }
}
.modal-title { font-size: 18px; font-weight: 600; margin: 0 0 var(--space-4); }
.modal-actions {
  display: flex; gap: var(--space-2);
  margin-top: var(--space-4);
}
.modal-actions .btn { flex: 1; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(20px); } to { transform: translateY(0); } }

/* ============== Toast ============== */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--text);
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--radius);
  font-size: 13px;
  z-index: 200;
  opacity: 0;
  transition: all .25s ease;
  pointer-events: none;
  box-shadow: var(--shadow-lg);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============== 单局结果表 ============== */
.hand-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: var(--space-2);
}
.hand-summary .hand-no { font-weight: 600; color: var(--primary); }
/* v116：手号后面的录入时间（MM/DD HH:mm）。等宽数字，避免每行时间跳动 */
.hand-summary .hand-time {
  font-weight: 400;
  font-size: 11px;
  color: var(--text-muted);
  margin-left: 4px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ============== 轮次切换器 ============== */
.segment {
  display: flex;
  background: var(--surface-2);
  border-radius: var(--radius);
  padding: 3px;
  gap: 2px;
}
.segment button {
  flex: 1;
  padding: 8px 12px;
  border-radius: calc(var(--radius) - 2px);
  font-size: 13px;
  color: var(--text-muted);
}
.segment button.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

/* ============== v121 统计页：月度 / 年度 / 总 子页签 + 年月下拉 ============== */
.stats-tabs { margin-bottom: var(--space-3); }
/* 三个页签等宽，中文不会被挤成两行 */
.stats-tabs button { padding: 8px 4px; font-size: 13px; white-space: nowrap; }
.stats-picker {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.stats-picker .select {
  flex: 1;
  min-width: 0;          /* 不加会被 width:100% + flex 撑破 */
  padding: 8px 10px;
  font-size: 13px;
}

/* ============== v126 月份多选下拉框（替代 v125 的 12 宫格芯片） ============== */
/* 收起态：一行摘要「X 年 Y 月」/「X 年 · 已选 N 个月」；展开态：逐行勾选，只列有对局的月份 */
/* v127：与年份下拉并排一行（.stats-picker 是 flex）→ 各占一半；面板浮层展开，不顶下方内容 */
.mon-dd {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
}
.mon-dd-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
}
.mon-dd.open .mon-dd-trigger {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
}
.mon-dd-val {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 一个月份都没选：摘要淡化，一眼看出「当前是空」而不是「选了但没数据」 */
.mon-dd-val.is-empty { color: var(--text-faint); }
/* 下拉箭头用纯 CSS 三角，不依赖字体图标（PWA 离线时不缺字） */
.mon-dd-caret {
  flex: none;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform .15s ease;
}
.mon-dd.open .mon-dd-caret { transform: rotate(180deg); }
/* 多月时摘要下行的小字：「9、10、11 月」 */
.mon-dd-sub {
  margin: 6px 0 var(--space-2);
  padding-left: 4px;
  font-size: 12px;
  color: var(--text-muted);
}
.mon-dd-panel {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  max-height: min(60vh, 320px);
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.mon-dd-panel[hidden] { display: none; }
.mon-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
}
.mon-opt + .mon-opt { margin-top: 2px; }
.mon-opt-m { flex: 1; }
.mon-opt-n { font-size: 12px; color: var(--text-faint); }
/* 勾选框：选中后由 ::after 画勾，避免每行插一段 SVG */
.mon-opt-box {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
}
.mon-opt-box::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 3px;
  width: 7px;
  height: 4px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
  opacity: 0;
}
.mon-opt.on { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.mon-opt.on .mon-opt-n { color: var(--primary); }
.mon-opt.on .mon-opt-box { background: var(--primary); border-color: var(--primary); }
.mon-opt.on .mon-opt-box::after { opacity: 1; }
.mon-dd-acts { display: flex; gap: 6px; padding: 8px 4px 2px; }
.mon-dd-acts .pa-chip { flex: 1; }
.mon-dd-empty {
  margin: 2px;
  padding: 8px 6px;
  font-size: 12px;
  color: var(--text-faint);
}
/* ============== v124 玩家分析：排行榜 / 对比 / 趋势图 ============== */
/* 口径说明折叠（统计页与战绩页共用）：默认收起，点一下才展开 */
.rule-note > summary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-muted);
  list-style: none;
  padding: 2px 0;
}
.rule-note > summary::-webkit-details-marker { display: none; }
.rule-note > summary::before { content: "ⓘ"; color: var(--text-faint); }
.rule-note[open] > summary { color: var(--text); }

.pa-scope { margin-bottom: 8px; }
.pa-scope button { padding: 6px 4px; font-size: 12px; }

.pa-title { font-size: 13px; font-weight: 500; }
.pa-chip {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}
.pa-chip.on {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary);
}

/* ---- v136：玩家多选下拉（代替「对比」按钮）----
   1 人 = 单人走势；2~3 人自动叠加对比。样式与月份下拉（.mon-dd）同源，
   保证两处下拉的手感、圆角、阴影一致。 */
.pa-pick { position: relative; min-width: 0; flex: 0 1 auto; }
.pa-pick-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 190px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}
.pa-pick.open .pa-pick-btn {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
}
.pa-pick-k { flex: none; color: var(--text-muted); }
.pa-pick.open .pa-pick-k { color: var(--primary); }
.pa-pick-val {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
/* 下拉箭头用纯 CSS 三角（与月份下拉一致，PWA 离线时不缺字） */
.pa-pick-caret {
  flex: none;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform 0.15s;
}
.pa-pick.open .pa-pick-caret { transform: rotate(180deg); }
.pa-pick-panel {
  position: absolute;
  z-index: 30;
  left: 0;
  top: calc(100% + 6px);
  width: min(72vw, 260px);
  max-height: min(56vh, 300px);
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.pa-pick-panel[hidden] { display: none; }
.pa-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
}
.pa-opt + .pa-opt { margin-top: 2px; }
.pa-opt-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pa-opt-meta {
  flex: none;
  font-size: 11px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
/* 勾选框：选中后由 ::after 画勾，避免每行插一段 SVG */
.pa-opt-box {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
}
.pa-opt-box::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 3px;
  width: 7px;
  height: 4px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
  opacity: 0;
}
.pa-opt.on { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.pa-opt.on .pa-opt-meta { color: var(--primary); }
.pa-opt.on .pa-opt-box { background: var(--primary); border-color: var(--primary); }
.pa-opt.on .pa-opt-box::after { opacity: 1; }
.pa-pick-hint { margin: -2px 0 var(--space-2); font-size: 12px; }

/* 窄屏下 8 列放不下 → 横向滚动，而不是把字挤成竖排 */
.pa-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
.pa-table { min-width: 440px; }
.pa-row {
  display: grid;
  grid-template-columns: 18px minmax(80px, 1fr) 24px 42px 44px 54px 56px 46px 26px;
  align-items: center;
  gap: 4px;
  padding: 9px 4px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.pa-row:last-child { border-bottom: none; }
.pa-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-row.pa-hd {
  font-size: 11px;
  color: var(--text-faint);
  padding-bottom: 6px;
  cursor: default;
}
.pa-row.on { background: var(--primary-soft); border-radius: 8px; }
.pa-row.dim { opacity: 0.55; }
.pa-rank { color: var(--text-faint); font-size: 12px; text-align: center; }
.pa-name { font-weight: 500; display: flex; align-items: center; gap: 4px; min-width: 0; }
.pa-ava {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 12px;
  line-height: 1;
  background: var(--surface-2);
  border-radius: 6px;
  flex-shrink: 0;
}
.pa-wld { color: var(--text-muted); font-size: 12px; }
/* v128：净胜分 / 场均 是原始口径，降为次要灰字；盈利才是这张表的主数值 */
.pa-dim { color: var(--text-faint); }
.pa-profit { font-weight: 500; }
.pa-tag {
  font-style: normal;
  font-size: 10px;
  color: var(--text-faint);
  background: var(--surface-2);
  border-radius: 4px;
  padding: 1px 4px;
  flex-shrink: 0;
}
.pa-box {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--border);
  border-radius: 4px;
  vertical-align: middle;
}
.pa-box.on { background: var(--primary); border-color: var(--primary); }

/* 横向对比表 */
.pa-cmp-row {
  display: grid;
  grid-template-columns: minmax(76px, 1fr) 26px 44px 54px 56px 46px 26px;
  gap: 4px;
  align-items: center;
  padding: 8px 2px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--border);
}
.pa-cmp-row:last-child { border-bottom: none; }
.pa-cmp-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-cmp-hd { font-size: 11px; color: var(--text-faint); }
.pa-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
}

/* 趋势图 */
.pa-chart-title { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
.pa-chart { display: block; width: 100%; height: auto; }
/* ---- v134：趋势图全屏（标题行右侧「⤢ 全屏」+ 覆盖层） ---- */
.pa-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.pa-chart-head .pa-chart-title { margin-bottom: 0; }
.pa-zoom-btn {
  flex: 0 0 auto;
  font-size: 11px;
  line-height: 1;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
}
.pa-zoom-btn:active { background: var(--surface-2); }
/* ---- v140：趋势图卡工具栏（玩家下拉 + 颗粒度切换并排，与全屏层 .pa-zoom-tools 同构）---- */
.pa-chart-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.pa-chart-tools .pa-pick { flex: 0 1 auto; }
.pa-chart-tools .segment { flex: 0 0 auto; margin-bottom: 0; }
.pa-chart-tools .segment button { flex: none; padding: 5px 9px; font-size: 12px; white-space: nowrap; }

/* 全屏层：铺满视口，纵向三段（标题 / 图+明细 / 页脚） */
.pa-zoom {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg);
  padding: calc(8px + env(safe-area-inset-top, 0px)) 10px calc(8px + var(--safe-b));
}
.pa-zoom-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex: 0 0 auto;
}
.pa-zoom-tt {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pa-zoom-close {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1;
}
.pa-zoom-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex: 0 0 auto;
}
.pa-zoom-tools .segment { flex: 0 0 auto; }
.pa-zoom-tools .segment button { padding: 6px 10px; font-size: 12px; white-space: nowrap; }
.pa-zoom-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pa-zoom-chart {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 12px);
  padding: 8px 10px;
}
.pa-zoom-chart svg { display: block; width: 100%; height: auto; }
.pa-zoom-detail {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 12px);
  padding: 6px 10px;
  font-size: 12px;
}
.pa-zoom-det-hd,
.pa-zoom-det-row { display: grid; gap: 8px; padding: 5px 0; align-items: center; }
.pa-zoom-det-hd { color: var(--text-faint); font-size: 11px; border-bottom: 1px solid var(--border); }
.pa-zoom-det-row + .pa-zoom-det-row { border-top: 1px dashed var(--border); }
.pa-zoom-det-row > span { text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.pa-zoom-det-row > span:first-child,
.pa-zoom-det-hd > span:first-child { text-align: left; }
.pa-zoom-det-k { color: var(--text-muted); }
.pa-zoom-det-body { max-height: 30vh; overflow-y: auto; }
.pa-zoom-foot {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: var(--text-muted);
}

/* ★ 横屏自动优化：视口矮（手机横持）时改左右两栏 —— 图吃满剩余宽度，
   明细表靠右独立滚动，不跟图抢纵向空间。纯媒体查询，转屏即时生效，不必重绘 SVG。 */
@media (orientation: landscape) and (max-height: 560px) {
  .pa-zoom {
    gap: 6px;
    padding-top: calc(4px + env(safe-area-inset-top, 0px));
    padding-left: calc(10px + env(safe-area-inset-left, 0px));
    padding-right: calc(10px + env(safe-area-inset-right, 0px));
  }
  .pa-zoom-tt { font-size: 12px; }
  .pa-zoom-close { width: 26px; height: 26px; font-size: 12px; }
  .pa-zoom-body { flex-direction: row; align-items: stretch; overflow: hidden; gap: 8px; }
  .pa-zoom-chart { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; padding: 4px 8px; }
  .pa-zoom-chart svg { width: 100%; height: 100%; max-height: 100%; }
  .pa-zoom-detail { flex: 0 0 34%; max-width: 300px; min-width: 150px; max-height: 100%; overflow-y: auto; }
  .pa-zoom-det-body { max-height: none; }
  .pa-zoom-foot { font-size: 11px; }
}
.pa-chart-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-muted);
}
/* v125：累计 / 当期两条线的图例（只出现在按月、按年粒度） */
.pa-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}
/* v125：口径说明挪到页面底部后，与上方内容留点距离 */
.rule-note-bottom { display: block; }
.rule-note-bottom > summary { padding: 4px 0; }

/* ============== 数据网格 ============== */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
}
.stat-card .label { font-size: 12px; color: var(--text-muted); }
.stat-card .value {
  font-size: 22px;
  font-weight: 600;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.stat-card .value.profit { color: var(--win); }
.stat-card .value.loss   { color: var(--loss); }

/* ============== 历史时间轴 ============== */
.timeline-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) 0;
}
.timeline-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--primary);
  margin-top: 6px;
  flex-shrink: 0;
}
.timeline-content { flex: 1; }
.timeline-date { font-size: 12px; color: var(--text-muted); }
.timeline-title { font-weight: 600; margin-top: 2px; }
.timeline-meta { font-size: 13px; color: var(--text-muted); margin-top: 2px; }

/* v120：合并成一条时间线后列表变长，相邻两间房之间补一条分隔线，
   否则连续几张卡的日期行会糊成一片、分不清卡边界。 */
.timeline-item + .timeline-item { border-top: 1px solid var(--border); }

/* v120：「进行中」与「已结算」两组之间的轻分隔（只在两组都有内容时出现） */
.list-divider {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-2) 0;
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}
.list-divider::before,
.list-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ============== 帮助文本 ============== */
.hint {
  font-size: 12px;
  color: var(--text-faint);
  text-align: center;
  margin-top: var(--space-3);
}

/* v68 核对提示条：合计不为 0 时贴在标题下方，把差异值摆到最显眼处 */
.check-strip {
  background: var(--danger-soft);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
  font-size: 12px;
  line-height: 1.6;
  color: var(--danger);
  text-align: left;
}
.check-strip b { font-variant-numeric: tabular-nums; }

/* v76 总分口径块：结算流程里把「总分 = 下分 − 上分 + 分台 + 工资」连同代入示例摆出来 */
.score-logic {
  margin-top: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: var(--space-2) var(--space-3);
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-muted);
  text-align: left;
}
.score-logic-formula {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.score-logic-eg { font-variant-numeric: tabular-nums; }
.score-logic-note { color: var(--text-faint); }

/* ============== 分享结算单 ============== */
.modal-share { padding-bottom: var(--space-2); }
.share-tabs {
  display: flex;
  background: var(--surface-2);
  border-radius: var(--radius);
  padding: 3px;
  margin-bottom: var(--space-3);
  gap: 3px;
}
.share-tab {
  flex: 1;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  transition: all 0.15s;
}
.share-tab.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}
.share-pane { animation: shareFade 0.18s ease; }
@keyframes shareFade {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.share-image-wrap {
  background: var(--surface-2);
  border-radius: var(--radius);
  padding: var(--space-2);
  text-align: center;
  margin-bottom: var(--space-3);
  max-height: 50vh;
  overflow: auto;
}
.share-image-wrap img {
  display: block;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
.share-loading {
  padding: var(--space-6) var(--space-3);
  color: var(--text-muted);
  font-size: 13px;
}
.share-hint {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
  text-align: center;
  padding: 0 var(--space-2);
  margin-bottom: var(--space-2);
}
.share-textarea {
  width: 100%;
  min-height: 220px;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  background: var(--surface-2);
  resize: vertical;
  margin-bottom: var(--space-3);
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
}

/* =========================================================================
   邀请码页面（覆盖整个 APP，隐藏 tab-bar）
   ========================================================================= */
.invite-screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  background:
    radial-gradient(circle at 20% 10%, rgba(79, 70, 229, 0.08), transparent 50%),
    radial-gradient(circle at 80% 90%, rgba(16, 185, 129, 0.08), transparent 50%),
    var(--bg);
  z-index: 100;
}
.invite-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  box-shadow: var(--shadow-lg);
  text-align: center;
  border: 1px solid var(--border);
}
.invite-logo {
  font-size: 56px;
  line-height: 1;
  color: var(--primary);
  margin-bottom: var(--space-3);
  filter: drop-shadow(0 2px 6px rgba(79, 70, 229, 0.25));
}
.invite-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 var(--space-1);
  letter-spacing: 0.5px;
}
.invite-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 var(--space-5);
}
.invite-input-wrap {
  margin-top: var(--space-3);
}
.invite-input {
  font-size: 18px;
  letter-spacing: 2px;
  text-align: center;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  padding: var(--space-3) var(--space-4);
  height: auto;
}
.invite-input::placeholder {
  letter-spacing: 0;
  font-family: inherit;
  font-size: 14px;
}
.invite-error {
  min-height: 20px;
  margin-top: var(--space-2);
  font-size: 13px;
  color: var(--danger);
  font-weight: 500;
}
.invite-submit {
  margin-top: var(--space-3);
  height: 48px;
  font-size: 15px;
  letter-spacing: 2px;
}
.invite-submit:disabled {
  opacity: 0.7;
  cursor: wait;
}
.invite-tip {
  margin-top: var(--space-4);
  font-size: 12px;
  color: var(--text-faint);
  line-height: 1.6;
}
/* 输入错误抖动动画 */
@keyframes shake-x {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}
.invite-input.shake {
  animation: shake-x 0.42s cubic-bezier(.36,.07,.19,.97) both;
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 3px var(--danger-soft);
}

/* 总战绩：净分颜色（中式约定：赚到=红，亏了=绿）*/
.net-plus  { color: var(--win); }   /* 净分 > 0 = 赚到 = 红 */
.net-minus { color: var(--loss); }  /* 净分 < 0 = 亏了 = 绿 */
.net-zero  { color: var(--text-muted); }

/* =========================================================================
   上分 / 下分 /（分台）/ 总分（结算模态、房间记录、战绩页共用）
   结构：<div class="score-cols"> N × <div><div class="col-label">…</div><div class="col-value …">…</div></div>
   - 默认三列（上分 / 下分 / 总分）
   - v57：房间做过分台时多一列「分台」→ 加 .has-fentai，整体收紧字号避免换行
   ========================================================================= */
.score-cols {
  display: flex;
  gap: 8px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* 四列变体：压缩列宽与间距，保证手机一行放得下 */
.score-cols.has-fentai { gap: 6px; }
.score-cols.has-fentai > .score-col { min-width: 46px; }
.score-cols.has-fentai > .score-col.wide { min-width: 54px; }
.score-cols.has-fentai .col-value { font-size: 13px; }
.score-cols.has-fentai.compact > .score-col { min-width: 40px; }
.score-cols.has-fentai.compact > .score-col.wide { min-width: 48px; }
.score-cols.has-fentai.compact .col-value { font-size: 12px; }
.score-cols.has-fentai.compact .col-label { font-size: 9px; }

/* v58 战绩页精简模式：只留「分台 / 工资 / 总分 / 盈利」，列宽压缩保证窄屏放得下
   ⚠️ 必须排在 .has-fentai 之后：两者优先级相同，靠源码顺序覆盖它收窄的 min-width
   v102：加盈利列后共 4 列，手机端整体再收一档（列宽/字号/gap），副标题不换行 */
.score-cols.lean { gap: 8px; }
.score-cols.lean > .score-col { min-width: 58px; }
.score-cols.lean > .score-col.wide { min-width: 66px; }
.score-cols.lean .col-value { font-size: 14px; }
.score-cols.lean .col-label { font-size: 9px; }
/* 窄屏（iPhone SE ~ 360px）再收一档，避免把名字挤没 */
@media (max-width: 400px) {
  .score-cols.lean { gap: 6px; }
  .score-cols.lean > .score-col { min-width: 50px; }
  .score-cols.lean > .score-col.wide { min-width: 58px; }
  .score-cols.lean .col-value { font-size: 13px; }
  /* 窄屏先舍「上次」时间，保住「局数 · 胜率」不被省略号吃掉 */
  .lb-last { display: none; }
}
/* 极窄屏（320px 级别的老设备）最后一档 */
@media (max-width: 340px) {
  .score-cols.lean { gap: 4px; }
  .score-cols.lean > .score-col { min-width: 44px; }
  .score-cols.lean > .score-col.wide { min-width: 52px; }
  .score-cols.lean .col-value { font-size: 12px; }
}
.score-cols > .score-col {
  min-width: 54px;
}
.score-cols > .score-col.wide {
  min-width: 64px;
}
.score-cols .col-label {
  font-size: 10px;
  line-height: 1.5;
  color: var(--text-faint);
  font-weight: 400;
}
.score-cols .col-value {
  font-size: 14px;
  line-height: 1.35;
  font-weight: 600;
}
.score-cols .col-value.up   { color: var(--up); }
.score-cols .col-value.down { color: var(--down); }

/* =========================================================================
   对局录入行（每位玩家一行：头像 + 名字 + 上分*5 / 上分 / 数字 / 下分 / 下分*5）
   - 数字区加宽到能宽裕显示六位数（如 123,456），同时把左侧按钮整体左移
   - 窄屏（≤560px）放不下时，控制区自动换到第二行并撑满，保证触控面积
   ========================================================================= */
.entry-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px var(--space-2);
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 8px;
}
.entry-avatar {
  width: 34px;
  height: 34px;
  font-size: 14px;
  flex: 0 0 auto;
}
.entry-name {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* -------------------------------------------------------------------------
   v81：玩家名旁的「本局总分」（下分 − 上分 + 分台）
   - 只展示、不可点：玩家名右侧的小徽章
   - 配色沿用项目固定约定：.net-plus 红=赚 / .net-minus 绿=亏 / .net-zero 灰
   - .is-pending = 叠加了本手尚未提交的数字，用虚线框提示「还没提交」
   ------------------------------------------------------------------------- */
.entry-total {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.15;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: var(--surface-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.entry-total-label {
  font-size: 9px;
  color: var(--text-faint);
  letter-spacing: .04em;
}
.entry-total-value {
  font-size: 15px;
  font-weight: 600;
}
/* pending：本手数字已录入但尚未提交，用虚线框与「已提交」区分 */
.entry-total.is-pending {
  border-style: dashed;
  border-color: currentColor;
}

.entry-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}
.entry-btn {
  min-width: 52px;
  height: 44px;
  padding: 0 10px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
}
.entry-btn--up   { background: var(--danger); }   /* 上分 = 输出去的分 → 红 */
.entry-btn--down { background: var(--accent); }   /* 下分 = 收回来的分 → 绿 */
/* 5 倍按钮：同色系但视觉降一级，避免和基准按钮点错 */
.entry-btn--x5 { opacity: .8; }
.entry-value {
  min-width: 104px;
  /* 两侧额外留白：把「上分侧」与「下分侧」视觉分开，避免误点 */
  margin: 0 6px;
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
  .entry-controls {
    flex: 1 1 100%;
    justify-content: space-between;
    gap: 8px;
  }
  .entry-value { margin: 0; min-width: 92px; font-size: 19px; }
  .entry-btn { min-width: 46px; padding: 0 6px; font-size: 13px; }
  .entry-btn--x5 { font-size: 12px; }
  /* v81：窄屏下总分徽章跟着缩，别把名字挤没 */
  .entry-total { padding: 1px 6px; }
  .entry-total-label { font-size: 8px; }
  .entry-total-value { font-size: 14px; }
}
.score-cols .col-value.zero { color: var(--text-faint); font-weight: 400; }

/* 小尺寸变体（历史页卡片，空间更窄） */
.score-cols.compact > .score-col { min-width: 46px; }
.score-cols.compact .col-value { font-size: 13px; }
.score-cols.compact .col-label { font-size: 9px; }

/* =========================================================================
   房间记录卡内的玩家明细行（v55，对齐小程序 v54）
   = 头像 + 名字 + 上分 / 下分 / 总分三列，与战绩页同一套展示
   ========================================================================= */
.room-player-rows { margin-top: var(--space-2); }
.room-player-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.room-player-row:last-child { border-bottom: none; }
.room-player-row .avatar {
  width: 28px;
  height: 28px;
  font-size: 12px;
  flex-shrink: 0;
}
.room-player-name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.room-players-more {
  font-size: 12px;
  color: var(--text-muted);
  padding-top: 4px;
}

/* =========================================================================
   云端「进行中」房间（v56）
   = 别的设备开了还没结算的房间，本机拉到后展示在「其余记录」区最上面
   ========================================================================= */
.remote-active-block {
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px dashed var(--border);
}
.remote-active-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: var(--space-2);
}
.remote-active-card {
  padding: var(--space-3);
  margin-bottom: var(--space-2);
  border: 1px solid var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.remote-active-card:last-child { margin-bottom: 0; }
.badge-live {
  display: inline-block;
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--accent-soft);
  color: var(--accent);
}

/* =========================================================================
   手机端适配（≤520px）：整体缩小显示比例
   反馈来源：手机端元素显示太大。两层处理：
   1) html { zoom: 0.9 } —— 全局等比缩小 10%，连各视图内联 px 字号一起生效；
      不支持 zoom 的旧浏览器自动忽略，等价于回退到原样式，无破坏风险
   2) 收紧 --space-* 间距变量与部分组件内边距，让信息密度更高
   注意：桌面端（>520px）完全不受影响
   ========================================================================= */
@media (max-width: 520px) {
  html { zoom: 0.9; }

  :root {
    --space-1: 3px;
    --space-2: 6px;
    --space-3: 9px;
    --space-4: 12px;
    --space-5: 18px;
    --space-6: 24px;
  }

  html, body {
    font-size: 14px;
    -webkit-text-size-adjust: 100%; /* 防移动端自动放大文本 */
    text-size-adjust: 100%;
  }

  .app-header { padding: var(--space-2) var(--space-3); }
  .view { padding: var(--space-3); padding-bottom: 64px; }
  .btn { padding: 9px 14px; }
  .btn-lg { padding: 12px 18px; font-size: 15px; }
  .modal { padding: var(--space-4); }
  .stat-grid { grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); }
  .empty-state .emoji { font-size: 40px; }
  .toast { bottom: 14px; }
}

/* =========================================================================
   v57 分台（结算第 2 步）
   ========================================================================= */
.fentai-list {
  border-top: 1px solid var(--border);
  max-height: 300px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.fentai-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

/* 「台」那一行：整体高亮，金额是他的净额（自动 = 已分摊合计的负值） */
.fentai-row.is-table {
  background: var(--primary-soft);
  border-radius: var(--radius-sm);
  padding-left: 6px;
  padding-right: 6px;
}

.fentai-who { flex: 1; min-width: 0; }

.fentai-name {
  font-size: 14px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fentai-total {
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.fentai-input {
  width: 106px;
  flex-shrink: 0;
  text-align: right;
  padding: 6px 8px;
  font-size: 14px;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.fentai-input:focus {
  outline: none;
  border-color: var(--primary);
}

.fentai-fixed {
  width: 106px;
  flex-shrink: 0;
  text-align: right;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.fentai-balance {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.fentai-chip {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  flex-shrink: 0;
  white-space: nowrap;
}

/* v60：不参与分摊的小输家（亏损没超门槛）——整行淡出，右侧只写「不参与」 */
.fentai-row.is-excluded { opacity: 0.55; }

.fentai-tag {
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  font-weight: 400;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-muted);
  vertical-align: middle;
  white-space: nowrap;
}

.fentai-fixed.is-muted { font-weight: 400; font-size: 12px; }

/* =========================================================================
   v63 工资（结算前给玩家发分，单独记账）
   结构与分台面板一致：头像 + 姓名/本局分 + 右侧输入。
   v79：删掉「从「台」身上扣」——面板里只有玩家，不再有只读的「台」那一行。
   这里独立成一套，不与 .fentai-* 共用，两个面板可各自演化。
   ========================================================================= */
.salary-list {
  border-top: 1px solid var(--border);
  max-height: 300px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.salary-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

/* 「台」那一行：扣款方，高亮且不可编辑 */
.salary-row.is-table {
  background: var(--primary-soft);
  border-radius: var(--radius-sm);
  padding-left: 6px;
  padding-right: 6px;
}

.salary-who { flex: 1; min-width: 0; }

.salary-name {
  font-size: 14px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.salary-total {
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.salary-input {
  width: 106px;
  flex-shrink: 0;
  text-align: right;
  padding: 6px 8px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.salary-input:focus {
  outline: none;
  border-color: var(--primary);
}

.salary-fixed {
  width: 106px;
  flex-shrink: 0;
  text-align: right;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.salary-balance {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: 13px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.salary-hint { font-size: 12px; }
.salary-hint.is-warn { color: var(--danger); }

/* 房间卡 / 战绩页：五列（上分 下分 分台 工资 总分）时再收紧一档 */
.score-cols.has-salary { gap: 5px; }
.score-cols.has-salary > .score-col { min-width: 38px; }
.score-cols.has-salary > .score-col.wide { min-width: 46px; }
.score-cols.has-salary .col-value { font-size: 12px; }
.score-cols.has-salary .col-label { font-size: 9px; }
.score-cols.has-salary.compact > .score-col { min-width: 34px; }
.score-cols.has-salary.compact > .score-col.wide { min-width: 42px; }
.score-cols.has-salary.compact .col-value { font-size: 11.5px; }

/* 战绩页精简模式的第三列：分台 / 工资 / 总分
   特异性高于 .score-cols.lean，能覆盖它的两列宽度
   v102：加盈利列后共 4 列，再压一档（46/54 起步，窄屏 38/44） */
.score-cols.lean.has-salary { gap: 6px; }
.score-cols.lean.has-salary > .score-col { min-width: 46px; }
.score-cols.lean.has-salary > .score-col.wide { min-width: 54px; }
.score-cols.lean.has-salary .col-value { font-size: 13px; }
.score-cols.lean.has-salary .col-label { font-size: 9px; }
@media (max-width: 400px) {
  .score-cols.lean.has-salary { gap: 5px; }
  .score-cols.lean.has-salary > .score-col { min-width: 40px; }
  .score-cols.lean.has-salary > .score-col.wide { min-width: 48px; }
  .score-cols.lean.has-salary .col-value { font-size: 12px; }
}
@media (max-width: 340px) {
  .score-cols.lean.has-salary { gap: 4px; }
  .score-cols.lean.has-salary > .score-col { min-width: 36px; }
  .score-cols.lean.has-salary > .score-col.wide { min-width: 44px; }
  .score-cols.lean.has-salary .col-value { font-size: 11.5px; }
}

/* =========================================================================
   v74 手机端 UI 呼吸感优化（≤520px）：用户反馈「手机端有点拥挤」
   拥挤的根源：① 品牌名 + 5 个 tab 全挤在 header 一行，tab 被压得很窄；
   ② 之前「整体缩小」的 zoom 0.9 连间距一起缩，卡片/列表贴得太近。
   处理（只动 ≤520px，桌面端零影响；字号不放大——zoom 保留，靠留白解决拥挤）：
   1) header 改双行：品牌一行（居中），tab 一行等宽铺满（segmented 风格）
   2) 视图/卡片/列表恢复呼吸间距，区分信息块
   ========================================================================= */
@media (max-width: 520px) {
  /* 1) v143：导航已固定到底部，顶栏只保留品牌单行 */
  .app-header {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
  }
  .brand { justify-content: flex-start; }

  /* 2) 呼吸间距：视图上下留白（底部再由 v129/v133 规则加到底栏高度） */
  .view { padding: 14px 10px 72px; }
  .section-title { margin: 22px 0 10px; }
  .card { padding: 14px; }
  .card + .card { margin-top: 12px; }

  /* 玩家列表：行距拉开一点 */
  .player-list { gap: 10px; }
  .player-row { padding: 12px; }
  .room-player-row { padding: 8px 0; }

  /* 历史页房间卡内的明细、汇总条、空状态 */
  .hand-summary { margin-bottom: 10px; }
  .empty-state { padding: 28px 12px; }

  /* 模态框：标题与内容、底部按钮留出余地 */
  .modal { padding: 20px 16px 16px; }
  .modal-actions { margin-top: 16px; }

  /* 提示文字不再贴底 */
  .hint { margin-top: 14px; line-height: 1.7; }
  .score-logic { padding: 10px 12px; line-height: 1.8; }
}

/* =========================================================================
   v90 手机端体验优化（安全区 / 触摸反馈 / iOS 输入框 / 触控目标 / 滚动手感）
   背景：v74 解决了「拥挤」，但手机端仍有四处硬伤——
     ① 全面屏（iPhone X 起）底部内容被 Home Indicator 压住、顶部被刘海挡；
     ② 全站 0 处 :active → 手指按下去没有任何反馈，且 :hover 在手机上会「粘住」；
     ③ iOS Safari 聚焦 font-size < 16px 的输入框会放大整页且不自动缩回；
     ④ .tab / .icon-btn 触控目标不足 44px（HIG 建议值），容易点空。
   原则：只加样式、不动 DOM 结构与 class 名，避免踩到已有 39 个守卫的断言面。
   ========================================================================= */

/* -------------------------------------------------------------------------
   ① 安全区变量：一次性定义，下面各处只引用 var(--safe-*)
   兜底 0px —— 不支持 env() 的旧浏览器/桌面端取值 0，等价于没加这些 padding
   ------------------------------------------------------------------------- */
:root {
  --safe-t: 0px;
  --safe-b: 0px;
  --safe-l: 0px;
  --safe-r: 0px;
}
@supports (padding: env(safe-area-inset-bottom)) {
  :root {
    --safe-t: env(safe-area-inset-top, 0px);
    --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-l: env(safe-area-inset-left, 0px);
    --safe-r: env(safe-area-inset-right, 0px);
  }
}

/* 视图底部：原 80px 硬编码 → 叠加 Home Indicator 高度，最后一张卡片不再被压 */
.view { padding-bottom: calc(80px + var(--safe-b)); }

/* Toast：抬到 Home Indicator 上方，否则提示文字被切成半截 */
.toast { bottom: calc(24px + var(--safe-b)); }

/* 头部：横屏/刘海屏时顶部让出安全区 */
.app-header {
  padding-left: calc(var(--space-4) + var(--safe-l));
  padding-right: calc(var(--space-4) + var(--safe-r));
}
@supports (padding-top: env(safe-area-inset-top)) {
  .app-header { padding-top: calc(var(--space-3) + var(--safe-t)); }
}

/* 模态框：底部按钮（确认/取消）不被 Home Indicator 切掉 */
.modal {
  padding-bottom: calc(var(--space-5) + var(--safe-b));
  overscroll-behavior: contain;
}

/* -------------------------------------------------------------------------
   ② 触摸反馈：把 :hover 关进「真有指针悬停」的设备，避免手机点完 hover 态不消；
   再给所有可点元素加 :active 按压态（缩一下 + 略微变淡），手指按下去立刻有回应。
   ------------------------------------------------------------------------- */
@media (hover: hover) {
  .btn:hover { background: var(--border); }
  .btn-primary:hover { background: #4338ca; }
  .btn-accent:hover { background: #059669; }
  .btn-danger:hover { background: #fee2e2; }
  .icon-btn:hover { background: var(--surface-2); color: var(--text); }
  .icon-btn.danger:hover { background: var(--danger-soft); color: var(--danger); }
  .entry-btn { transition: transform .08s ease, opacity .08s ease, filter .12s ease; }
  .entry-btn:hover { filter: brightness(1.08); }
  .share-tab:hover { color: var(--text); }
  .avatar-opt:hover { border-color: var(--accent); }
  .player-pick:hover { background: var(--surface-2); }
}

/* 按压态（所有设备通用，手机上是唯一能拿到的即时反馈） */
.btn,
.tab,
.icon-btn,
.entry-btn,
.share-tab,
.avatar-opt,
.player-pick,
.fentai-row,
.salary-row {
  transition: transform .08s ease, opacity .08s ease, background-color .15s ease;
}
.btn:active,
.tab:active:not(:disabled),
.icon-btn:active,
.entry-btn:active,
.share-tab:active,
.avatar-opt:active,
.player-pick:active {
  transform: scale(0.965);
  opacity: .82;
}
/* 录入区的上下分按钮反馈再明显一点：这里是全站点击最密集的地方 */
.entry-btn:active { transform: scale(0.92); opacity: .78; }

/* 尊重系统的「减弱动态效果」设置 */
@media (prefers-reduced-motion: reduce) {
  .btn, .tab, .icon-btn, .entry-btn, .share-tab, .avatar-opt, .player-pick,
  .fentai-row, .salary-row { transition: none; }
  .btn:active, .tab:active:not(:disabled), .icon-btn:active, .entry-btn:active,
  .share-tab:active, .avatar-opt:active, .player-pick:active { transform: none; }
}

/* -------------------------------------------------------------------------
   ③ iOS 输入框聚焦缩放：iOS Safari 会把 font-size < 16px 的输入框自动放大整页。
   只提移动端字号（桌面端保持原有紧凑比例），并同步放宽窄输入框宽度防止撑破。
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .input,
  .select,
  .fentai-input,
  .salary-input,
  .share-textarea {
    font-size: 16px;
  }
  /* 分台/工资输入框原本 106px，字号变大后要放宽才放得下六位数 */
  .fentai-input,
  .salary-input {
    width: 116px;
  }
  .fentai-fixed,
  .salary-fixed {
    width: 116px;
    font-size: 16px;
  }
  /* 注：.entry-value（contenteditable 数字格）基准 20px / ≤560px 时 19px，
     本就 ≥16px 不会触发 iOS 缩放，故此处不动它 —— 避免把它撑大挤破录入行 */
}
@media (max-width: 360px) {
  .fentai-input,
  .salary-input,
  .fentai-fixed,
  .salary-fixed {
    width: 104px;
  }
}

/* -------------------------------------------------------------------------
   ④ 触控目标与滚动手感
   ------------------------------------------------------------------------- */
/* 可点元素：禁掉长按选中/复制菜单与 300ms 点击延迟 */
.btn, .tab, .icon-btn, .entry-btn, .share-tab, .avatar-opt, .player-pick {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

/* 图标按钮视觉 32px、热区补到 44px：用伪元素扩张，不挤动布局 */
.icon-btn {
  position: relative;
}
.icon-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

/* 滚动容器：iOS 惯性滚动 + 阻止滚动链（滚到底不会带动整页/触发下拉刷新） */
.fentai-list,
.salary-list,
.share-image-wrap,
.modal {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* 滚动条不占位（移动端本就不显示，桌面窄窗下更干净） */
.fentai-list::-webkit-scrollbar,
.salary-list::-webkit-scrollbar,
.share-image-wrap::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* 页面纵向滚动到底时不要带动浏览器橡皮筋 */
html, body {
  overscroll-behavior-y: none;
}

/* -------------------------------------------------------------------------
   手机端（≤520px）在此基础上再收紧一档：tab 触控高度补到 40px，
   并让卡片圆角/阴影更贴合小屏手感
   ------------------------------------------------------------------------- */
@media (max-width: 520px) {
  .tab {
    padding: 10px 2px;      /* 触控高度 29px → ≈40px */
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .card { border-radius: 14px; }
  .player-row { border-radius: 10px; }
  /* 底部留白沿用 v74 的 72px，再叠加安全区 */
  .view { padding-bottom: calc(72px + var(--safe-b)); }
  .toast { bottom: calc(14px + var(--safe-b)); }
  /* 总分口径块：公式行在手机上再提一档，说明文字 12px 小屏读起来吃力 */
  .score-logic { padding: 12px 14px; line-height: 1.9; }
  .score-logic-formula { font-size: 14px; }
  .fentai-input,
  .salary-input,
  .fentai-fixed,
  .salary-fixed {
    width: 104px;
    font-size: 16px;
  }
}

/* -------------------------------------------------------------------------
   ⑤ 吸顶 header 滚动态投影：class 由 app.js 的 bindHeaderShadow() 切换
   ------------------------------------------------------------------------- */
.app-header { transition: box-shadow .18s ease; }
.app-header.is-scrolled { box-shadow: 0 4px 14px rgba(15, 23, 42, 0.10); }

/* -------------------------------------------------------------------------
   ⑥ 焦点可见性：只在键盘导航时显示焦点环（:focus-visible），
   手指点击不显示 —— 否则手机上点完按钮会留一圈蓝框。
   原 .input:focus 的变色规则不动，仍对所有输入方式生效。
   ------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }



/* =========================================================================
   v129 · A 档「视觉密度」→ v143：tab-bar DOM 已移出 .app-header
   ① 底部导航：必须挂在 body 下，不能放在带 backdrop-filter 的 header 内，
      否则 fixed 会被锁成相对 header（用户截图像「还在顶部」）
   ② 战绩榜行改 grid 两段式：第一行 名次/头像/姓名，第二行 分数列整行铺开
      —— 原来 4 列分数挤在同一行，名字只剩 60px 宽，手机上必被截断
   ③ 空态补一个动作按钮（原来只有一行 emoji + 灰字，用户不知道下一步点哪）
   ========================================================================= */

/* ---- ① 底部导航（v143：强化 fixed，杜绝被早期 pill 样式盖回） ---- */
.tab-bar {
  position: fixed !important;
  left: 0;
  right: 0;
  top: auto !important;
  bottom: 0 !important;
  width: 100%;
  max-width: none;
  margin: 0;
  z-index: 60;
  border-radius: 0;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 10px rgba(15, 23, 42, 0.06);
  display: flex;
  gap: var(--space-1);
}
.tab-bar .tab {
  flex: 1 1 0;
  flex-direction: column;
  min-height: 52px;
  padding: 8px 2px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  line-height: 1.25;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.tab-bar .tab::before { display: block; font-size: 18px; line-height: 1; margin-bottom: 3px; }
.tab-bar .tab.active { color: var(--primary); box-shadow: none; font-weight: 600; }
.tab-bar .tab:disabled { opacity: 0.35; }

/* 底部导航占位：给视图区与 toast 让出高度（含 iPhone 底部安全区） */
.view { padding-bottom: calc(88px + var(--safe-b)); }
.toast { bottom: calc(84px + var(--safe-b)); }

/* v130：战绩榜行回到单行 flex（v129 的 ② 两段式样式已删） */

/* ---- ③ 空态动作 ---- */
.empty-state .empty-act {
  margin-top: var(--space-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  border: none;
}
.empty-state .empty-act.ghost {
  background: var(--surface);
  color: var(--primary);
  border: 1px solid var(--border);
}


/* =========================================================================
   v129 · B 档「布局重排」
   ① 提交条吸底（sticky，不出卡片范围）
   ② ×5 按钮视觉降级 —— 主用的是 ±1，×5 是倍速键，不该和 ±1 抢注意力
   ③ 房间页「本房实时排名」卡片
   ========================================================================= */

/* ---- ① 提交条吸底 ---- */
.entry-submit {
  position: sticky;
  bottom: calc(64px + var(--safe-b));
  z-index: 5;
  border: 1px solid var(--border);
  box-shadow: 0 -6px 16px rgba(15, 23, 42, 0.08);
}

/* ---- ② ×5 降级为次要键 ---- */
/* ★ v132：必须显式给 color —— .entry-btn 基准色是 #fff（给绿/红实心底用的），
   只改 background 就成了「白字浅底」，真机上整块看不见（用户截图报「好几个空白按钮」）。
   方向色保留，降级后仍能分清哪边加分、哪边减分。 */
.entry-btn--x5 {
  font-size: 11px;
  opacity: 0.78;
  background: var(--surface);
  border: 1px dashed var(--border);
  color: var(--text-muted);
  letter-spacing: -0.2px;
  padding: 0 4px;
}
.entry-btn--down.entry-btn--x5 { color: var(--down); }
.entry-btn--up.entry-btn--x5   { color: var(--up); }
.entry-btn--x5:active { opacity: 1; }

/* ---- ③ 房间页实时排名 ---- */
.live-rank {
  margin-top: var(--space-3);
  border-top: 1px solid var(--border);
  padding-top: var(--space-3);
}
.live-rank-hd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.live-rank-sub { font-size: 11px; font-weight: 400; color: var(--text-faint); }
.live-rank-row {
  display: grid;
  grid-template-columns: 18px 22px minmax(0, 1fr) auto;
  column-gap: 8px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.live-rank-row:last-child { border-bottom: none; }
.live-rank-no {
  font-size: 11px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.live-rank-av { font-size: 15px; text-align: center; }
.live-rank-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-rank-net { font-weight: 600; font-variant-numeric: tabular-nums; }
.live-rank-more {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-faint);
  text-align: center;
}

/* =========================================================================
   v133 · UI polish（2026-11-07）
   目标：移动端层级更清晰、触控更稳、底栏/顶栏少折腾、卡片降噪。
   约束：只追加/覆盖样式；不改 DOM / class / 盈亏红绿语义；不碰 sharecode 兜底脚本。
   ========================================================================= */

/* 顶栏：底栏导航后 header 只剩品牌，禁止换行导致窄屏「空一行」 */
.app-header {
  flex-wrap: nowrap;
  align-items: center;
  min-height: 48px;
  gap: var(--space-2);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: saturate(1.2) blur(10px);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
}
.brand { min-width: 0; gap: 8px; }
.brand-text {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  box-shadow: 0 1px 2px rgba(79, 70, 229, 0.28);
}

/* 卡片略收紧，减轻「一块块白板」噪感 */
.card {
  padding: 14px;
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}
.card + .card { margin-top: 10px; }
.player-list { gap: 10px; }
.player-row { padding: 10px 12px; }
.section-title {
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 600;
  color: var(--text-muted);
  margin: 18px 0 10px;
}

/* 主按钮 / 通用按钮：更稳触控 + 主色更醒目 */
.btn {
  min-height: 44px;
  padding: 11px 16px;
  border-radius: 11px;
  font-weight: 600;
}
.btn-sm {
  min-height: 36px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 500;
}
.btn-lg {
  min-height: 48px;
  padding: 14px 20px;
}
.btn-primary {
  background: linear-gradient(180deg, #5b54f0 0%, var(--primary) 100%);
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.28);
}
.btn-primary:active { box-shadow: 0 1px 3px rgba(79, 70, 229, 0.22); }
.btn-block + .btn-block { margin-top: 8px; }

/* 输入框触控高度 */
.input, .select { min-height: 44px; padding: 11px 12px; }

/* 底栏 Tab：活动态更清楚，触控 ≥44px 已由 min-height:52 覆盖 */
.tab-bar {
  padding: 4px 6px calc(4px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: saturate(1.15) blur(12px);
  -webkit-backdrop-filter: saturate(1.15) blur(12px);
  box-shadow: 0 -4px 18px rgba(15, 23, 42, 0.07);
  border-top-color: color-mix(in srgb, var(--border) 80%, transparent);
}
.tab-bar .tab {
  min-height: 52px;
  gap: 0;
  color: var(--text-muted);
  border-radius: 12px;
}
.tab-bar .tab.active {
  color: var(--primary);
  background: var(--primary-soft);
  box-shadow: none;
  font-weight: 700;
}
.tab-bar .tab::before { margin-bottom: 2px; }
.tab-bar .tab:disabled { opacity: 0.32; }

/* 分段控件活动态与主色对齐 */
.segment button.active {
  color: var(--primary);
  font-weight: 600;
}

/* 统计子页签 */
.stats-tabs button { min-height: 40px; }
.stats-tabs button.active {
  color: var(--primary);
  font-weight: 600;
}

/* 空态与统计卡：对比与留白 */
.stat-card {
  padding: 12px 14px;
  border-radius: 12px;
}
.stat-card .label { color: var(--text-muted); }
.empty-state .title { font-size: 16px; }
.empty-state .empty-act { min-height: 44px; }

/* 窄屏：顶栏更紧，避免品牌被裁切难看 */
@media (max-width: 520px) {
  .app-header {
    min-height: 44px;
    padding-top: calc(8px + var(--safe-t));
    padding-bottom: 8px;
  }
  .brand-text { font-size: 14px; }
  .card { padding: 12px; border-radius: 12px; }
  .btn { min-height: 44px; }
  .view { padding-bottom: calc(92px + var(--safe-b)); }
  .toast { bottom: calc(88px + var(--safe-b)); }
}

/* 不支持 color-mix / backdrop 时的兜底：保持实底不透明 */
@supports not (background: color-mix(in srgb, white 50%, black)) {
  .app-header,
  .tab-bar { background: var(--surface); }
}

/* v143：邀请码全屏时 JS 会隐藏 header + tab-bar；CSS 兜底防闪一下 */
body.is-invite-locked .app-header,
body.is-invite-locked .tab-bar { display: none !important; }


/* =========================================================================
   v144 · P0/P1（后续裁剪：v146 去买入上限/曲线，v147 去导出）
   ========================================================================= */

/* 顶栏主题开关 */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.theme-toggle {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.theme-toggle:active { transform: scale(0.96); }

/* 买入上限 */
.buyin-cap-hint {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-muted);
  background: var(--warning-soft);
  border: 1px solid color-mix(in srgb, var(--warning) 28%, var(--border));
  border-radius: var(--radius-sm);
  padding: 6px 10px;
}
.buyin-over-badge {
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  font-weight: 600;
  color: var(--danger);
  background: var(--danger-soft);
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
  border-radius: 999px;
  padding: 1px 6px;
  vertical-align: middle;
}
.entry-row.is-over-cap {
  background: color-mix(in srgb, var(--danger-soft) 70%, var(--surface));
  border-radius: var(--radius-sm);
  outline: 1px solid color-mix(in srgb, var(--danger) 22%, transparent);
}
.entry-submit-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* 常用牌友 */
.fav-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--space-2);
}
.fav-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  min-height: 36px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
}
.fav-chip.is-picked,
.fav-chip:active {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
}
.fav-star {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 16px;
  color: var(--text-faint);
  background: transparent;
  border: 1px solid transparent;
}
.fav-star.is-on { color: var(--warning); }
.fav-star:active { background: var(--surface-2); }

/* 导出条 */
.export-bar {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
.month-pnl-card .pa-chart { margin-top: 4px; }

/* ---- 深色主题（data-theme="dark"）---- */
html[data-theme="dark"] {
  --bg: #0b1220;
  --surface: #121a2b;
  --surface-2: #1a2438;
  --border: #2a3650;
  --text: #e8eef9;
  --text-muted: #9aa8c2;
  --text-faint: #7b879c;

  --primary: #818cf8;
  --primary-soft: rgba(129, 140, 248, 0.16);
  --accent: #34d399;
  --accent-soft: rgba(52, 211, 153, 0.14);
  --danger: #f87171;
  --danger-soft: rgba(248, 113, 113, 0.14);
  --warning: #fbbf24;
  --warning-soft: rgba(251, 191, 36, 0.14);

  --win: #f87171;
  --win-soft: rgba(248, 113, 113, 0.14);
  --loss: #34d399;
  --loss-soft: rgba(52, 211, 153, 0.14);
  --up: #f87171;
  --down: #34d399;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow:    0 3px 12px rgba(0, 0, 0, 0.40);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.50);
}
html[data-theme="dark"] body { background: var(--bg); color: var(--text); }
html[data-theme="dark"] .app-header,
html[data-theme="dark"] .tab-bar {
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}
html[data-theme="dark"] .card {
  background: var(--surface);
  border-color: var(--border);
}
html[data-theme="dark"] .input,
html[data-theme="dark"] .select,
html[data-theme="dark"] .modal {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
html[data-theme="dark"] .modal-backdrop {
  background: rgba(2, 6, 23, 0.72);
}
html[data-theme="dark"] .btn-ghost {
  color: var(--text);
  border-color: var(--border);
}
html[data-theme="dark"] .pa-chart line[stroke="#e4e9f0"],
html[data-theme="dark"] .pa-chart line[stroke="#eef2f8"] {
  stroke: #2a3650;
}
html[data-theme="dark"] .pa-chart line[stroke="#cbd5e1"] {
  stroke: #475569;
}
html[data-theme="dark"] .pa-chart text[fill="#94a3b8"] {
  fill: #9aa8c2;
}


/* =========================================================================
   v145 · UI / 图表 polish（独立版 texas-app-v144-opt）
   - 视觉层级：卡片、底栏、按钮、徽章、收藏芯片更精致
   - 盈亏曲线：SVG 网格/轴线走 CSS class，深浅色一致；图例带末值色
   - 不改 上下分 口径文案
   ========================================================================= */

/* 图表框架 */
.pa-chart-frame {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 6px 4px;
  margin-top: 2px;
}
.month-pnl-card .pa-chart-head {
  align-items: baseline;
  margin-bottom: 10px;
}
.month-pnl-card .pa-chart-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.01em;
}
.pa-chart-sub {
  font-size: 11px;
  color: var(--text-faint);
  font-weight: 500;
  white-space: nowrap;
}
.pa-chart--clean { overflow: visible; }

/* SVG 轴线 / 网格（跟随主题） */
.pa-chart .pa-grid { stroke: var(--border); opacity: 0.95; }
.pa-chart .pa-grid-v { stroke: var(--border); opacity: 0.55; }
.pa-chart .pa-zero { stroke: color-mix(in srgb, var(--text-muted) 55%, var(--border)); }
.pa-chart .pa-axis { fill: var(--text-faint); font-variant-numeric: tabular-nums; }

/* 图例：名字 + 末值，盈亏着色 */
.pa-chart-foot.pa-legend {
  gap: 8px;
  margin-top: 10px;
}
.pa-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.2;
  max-width: 100%;
}
.pa-legend-item em {
  font-style: normal;
  color: var(--text);
  font-weight: 500;
  max-width: 5.5em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pa-legend-item b {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.pa-legend-item.is-win b { color: var(--win); }
.pa-legend-item.is-loss b { color: var(--loss); }
.pa-legend-item .pa-dot { margin-right: 2px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--surface) 80%, transparent); }

/* 主题开关更精致 */
.theme-toggle {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: background .15s ease, transform .12s ease, border-color .15s ease;
}
.theme-toggle:hover {
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  background: var(--primary-soft);
}
.theme-toggle:active { transform: scale(0.94); }

/* 买入上限提示 / 超限徽章 */
.buyin-cap-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.35;
  color: #92400e;
  background: linear-gradient(180deg, #fffbeb 0%, var(--warning-soft) 100%);
  border: 1px solid color-mix(in srgb, var(--warning) 32%, var(--border));
  border-radius: 10px;
  padding: 8px 12px;
}
html[data-theme="dark"] .buyin-cap-hint {
  color: #fde68a;
  background: var(--warning-soft);
}
.buyin-over-badge {
  margin-left: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  background: linear-gradient(180deg, #f87171 0%, var(--danger) 100%);
  border: none;
  border-radius: 999px;
  padding: 2px 7px;
  box-shadow: 0 1px 3px rgba(239, 68, 68, 0.28);
  vertical-align: middle;
}
.entry-row.is-over-cap {
  background: color-mix(in srgb, var(--danger-soft) 80%, var(--surface));
  outline: 1px solid color-mix(in srgb, var(--danger) 28%, transparent);
  border-radius: 10px;
}

/* 常用牌友芯片 */
.fav-chips { gap: 8px; margin-bottom: 10px; }
.fav-chip {
  padding: 7px 12px 7px 10px;
  min-height: 34px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  transition: border-color .15s ease, background .15s ease, color .15s ease, transform .12s ease;
}
.fav-chip:hover {
  border-color: color-mix(in srgb, var(--warning) 40%, var(--border));
}
.fav-chip.is-picked {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  background: var(--primary-soft);
  color: var(--primary);
  box-shadow: 0 1px 4px rgba(79, 70, 229, 0.18);
}
.fav-chip:active { transform: scale(0.97); }
.fav-star {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: var(--text-faint);
  transition: color .15s ease, background .15s ease;
}
.fav-star.is-on {
  color: var(--warning);
  background: var(--warning-soft);
  border-color: color-mix(in srgb, var(--warning) 28%, transparent);
}

/* 底栏再收一档：活动态胶囊更明显 */
.tab-bar {
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
  gap: 4px;
}
.tab-bar .tab {
  border-radius: 14px;
  font-size: 11px;
  letter-spacing: 0.01em;
  transition: background .15s ease, color .15s ease;
}
.tab-bar .tab.active {
  color: var(--primary);
  background: var(--primary-soft);
  font-weight: 700;
}
.tab-bar .tab::before {
  font-size: 17px;
  margin-bottom: 2px;
  filter: grayscale(0.15);
}
.tab-bar .tab.active::before { filter: none; }

/* 按钮 / 幽灵按钮 */
.btn-ghost {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  box-shadow: var(--shadow-sm);
}
.btn-ghost:hover {
  border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
  color: var(--primary);
}
.btn-ghost:disabled {
  opacity: 0.42;
  box-shadow: none;
}
.entry-submit-actions .btn-ghost {
  min-width: 108px;
}
.entry-submit-actions .btn-primary {
  min-width: 148px;
}

/* 导出条 / 分段页签 */
.export-bar {
  margin: 0 0 12px;
  justify-content: flex-end;
}
.export-bar .btn {
  border-radius: 999px;
}
.stats-tabs {
  padding: 3px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.stats-tabs button {
  border-radius: 10px;
  min-height: 38px;
  font-size: 13px;
}
.stats-tabs button.active {
  background: var(--surface);
  color: var(--primary);
  box-shadow: var(--shadow-sm);
  font-weight: 700;
}

/* 总览卡轻微分层 */
.view > .card {
  box-shadow: var(--shadow-sm);
}
.month-pnl-card {
  padding-bottom: 12px;
}

/* 深色主题下图表框架与网格 */
html[data-theme="dark"] .pa-chart-frame {
  background: color-mix(in srgb, var(--surface-2) 88%, #000);
}
html[data-theme="dark"] .pa-chart .pa-grid { stroke: #2a3650; }
html[data-theme="dark"] .pa-chart .pa-grid-v { stroke: #243049; }
html[data-theme="dark"] .pa-chart .pa-zero { stroke: #64748b; }
html[data-theme="dark"] .pa-chart .pa-axis { fill: #9aa8c2; }
html[data-theme="dark"] .pa-legend-item {
  background: var(--surface-2);
  border-color: var(--border);
}
html[data-theme="dark"] .theme-toggle:hover {
  background: var(--primary-soft);
}
html[data-theme="dark"] .fav-chip {
  background: var(--surface-2);
}
html[data-theme="dark"] .tab-bar .tab.active {
  background: var(--primary-soft);
}
html[data-theme="dark"] .btn-ghost {
  background: var(--surface-2);
  color: var(--text);
}

/* v147 · 移除导出 Excel/CSV（export-bar 样式保留无害） */