/* ===================== 主题变量 ===================== */
:root {
  --bg: #f6f7fb;
  --bg-elev: #ffffff;
  --bg-sunk: #eef1f7;
  --text: #1b2233;
  --text-soft: #5b6579;
  --text-faint: #8d97ab;
  --line: #e2e6ef;
  --accent: #3f6bff;
  --accent-soft: #e2e9ff;
  --accent-text: #ffffff;
  --danger: #e0453f;
  --danger-soft: #fde8e7;
  --ok: #1f9d68;
  --given: #1b2233;
  --user: #2f6bf6;
  --peer: #eef2fd;          /* 同行/列/宫 */
  --same: #dbe5ff;          /* 相同数字 */
  --sel: #c3d4ff;           /* 选中格 */
  --grid-thin: #d3dae8;
  --grid-thick: #7b869c;
  --grid-out: #39445c;
  --shadow: 0 1px 2px rgba(20, 30, 60, .05), 0 8px 24px rgba(20, 30, 60, .07);
  --shadow-lift: 0 2px 6px rgba(20, 30, 60, .08), 0 18px 40px rgba(20, 30, 60, .14);
  --radius: 16px;
  --radius-sm: 12px;
  --tap: 44px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
          "Microsoft YaHei UI", "Noto Sans SC", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

html[data-theme="dark"] {
  --bg: #0f1216;
  --bg-elev: #171b21;
  --bg-sunk: #1e242c;
  --text: #e8ecf4;
  --text-soft: #a7b1c2;
  --text-faint: #6e7889;
  --line: #262d37;
  --accent: #6d90ff;
  --accent-soft: #22304f;
  --accent-text: #0b0f15;
  --danger: #ff6b63;
  --danger-soft: #3a1f20;
  --ok: #4fd39c;
  --given: #e8ecf4;
  --user: #8fb0ff;
  --peer: #1b222b;
  --same: #26334a;
  --sel: #33456a;
  --grid-thin: #2b333e;
  --grid-thick: #556274;
  --grid-out: #8a97ab;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .45);
  --shadow-lift: 0 2px 8px rgba(0, 0, 0, .5), 0 18px 40px rgba(0, 0, 0, .6);
}

/* ===================== 基础 ===================== */
* { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
h1, h2 { margin: 0; font-weight: 700; letter-spacing: .01em; }
p { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.muted { color: var(--text-soft); }
.small { font-size: 13px; }
.tiny { font-size: 12px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ic { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ic.big { width: 34px; height: 34px; }

/* ===================== 屏幕容器 ===================== */
#app { min-height: 100%; }
.screen {
  max-width: 560px;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top, 0px) + 20px) 18px calc(env(safe-area-inset-bottom, 0px) + 20px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 100dvh;
}
/* 用 display:flex/grid 的元素会覆盖 [hidden] 的默认样式，这里统一兜底 */
[hidden] { display: none !important; }

/* ===================== 首页 ===================== */
.home-head { padding-top: 8px; }
.home-head h1 { font-size: 30px; letter-spacing: .08em; }
.home-head p { margin-top: 6px; }

.resume-card {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 14px 14px 16px;
  background: linear-gradient(140deg, var(--accent-soft), var(--bg-elev) 62%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.resume-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.resume-title { font-weight: 650; }
.resume-actions { display: flex; gap: 8px; align-items: center; flex: none; }

.levels { display: grid; gap: 12px; }
.level {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-height: 68px;
  padding: 14px 16px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  cursor: pointer;
  text-align: left;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.level-name { font-size: 18px; font-weight: 650; }
.level-desc { color: var(--text-soft); font-size: 13px; }
.level:active { transform: scale(.985); }
@media (hover: hover) {
  .level:hover { border-color: var(--accent); box-shadow: var(--shadow-lift); }
}

.quick-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.qs {
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 10px 12px; display: flex; flex-direction: column; gap: 2px;
}
.qs b { font-size: 18px; font-variant-numeric: tabular-nums; }
.qs span { font-size: 12px; color: var(--text-soft); }

.home-nav { display: flex; gap: 10px; margin-top: auto; }
.link-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap); border-radius: var(--radius-sm);
  background: var(--bg-elev); border: 1px solid var(--line); color: var(--text);
  cursor: pointer;
}

/* 页脚：一行签名、一行备案号，都用最弱的层级，读得到但不抢戏 */
.home-foot {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  margin-top: 2px; text-align: center;
}
.home-foot .beian {
  font-size: 11px; letter-spacing: .02em; line-height: 1.35;
  color: var(--text-faint); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .12s ease, border-color .12s ease;
}
.home-foot .beian:hover, .home-foot .beian:focus-visible { color: var(--text-soft); border-bottom-color: currentColor; }

/* ===================== 按钮 ===================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--tap); padding: 0 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--bg-elev);
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, transform .1s ease;
}
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.btn.danger { color: var(--danger); border-color: var(--line); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.icon-only { width: var(--tap); padding: 0; }
.btn.small { min-height: 36px; padding: 0 12px; font-size: 14px; }
.btn.small.icon-only { width: 36px; padding: 0; }
@media (hover: hover) {
  .btn:hover { border-color: var(--accent); }
  .btn.ghost:hover { background: var(--bg-sunk); }
  .btn.primary:hover { filter: brightness(1.05); }
}
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.row { display: flex; gap: 10px; }
.row.wrap { flex-wrap: wrap; }

/* ===================== 游戏页 ===================== */
/* 单栏三段式：顶栏固定 / 棋盘吃掉剩余高度 / 底部操作区固定。
   棋盘边长由 flex 算出的真实剩余空间决定，不再用 calc(100dvh - 常数) 去猜。 */
.screen.game {
  gap: 12px;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  justify-content: flex-start;
}
/* 手机上是拇指区，操作区贴底最好按 */
.screen.game > .pad { flex: none; }
.game-head {
  display: flex; align-items: center; gap: 6px;
  min-height: var(--tap);
}
.game-meta { display: flex; gap: 5px; align-items: center; flex-wrap: nowrap; flex: 1; min-width: 0; overflow: hidden; }
.game-actions { display: flex; gap: 0; flex: none; }
.game-actions .btn.icon-only { width: 40px; }
/* 窄屏：压缩 chip 与图标按钮，保证顶栏不横向裁切 */
@media (max-width: 374px) {
  .game-head { gap: 2px; }
  .game-actions .btn.icon-only { width: 34px; }
  .chip { padding: 0 7px; font-size: 12px; }
}
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  height: 28px; padding: 0 9px;
  border-radius: 999px;
  background: var(--bg-sunk);
  color: var(--text-soft);
  font-size: 12.5px; font-weight: 600;
  white-space: nowrap;
}
.chip.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* 棋盘尺寸：宽度撑满内容列，高度上限来自「真正可用的剩余高度」。
   单栏时 = 屏高 - 顶栏 - 底部操作区（由 flex 算出来，不再写死 320px）；
   两栏（宽屏）时 = 屏高。真正生效的边长取两者较小值，棋盘永远是正方形。 */
.board-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  /* 吃掉顶栏与操作区之间的剩余高度，棋盘在中间居中 */
  flex: 1 1 auto;
  min-height: 0;
}
.board-shell {
  position: relative;
  /* 边长 = min(列宽, 上限, 可用高度)。用 width 一次性定死，
     避免 max-height 只压高度、不缩宽度，把格子挤成扁矩形。
     --board-limit 是高度上限：单栏 = 屏高减顶栏/工具条/键盘，两栏 = 屏高减留白。 */
  width: 100%;
  max-width: min(100%, var(--board-max, 520px), var(--board-limit, 100%));
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  container-type: inline-size;
}
/* 高度上限：宽屏（>=900px）在两栏里另有定义，
   这里兜住所有「窄屏」和「矮窗口」情况，避免棋盘把操作区顶出屏幕。
   240px ≈ 顶栏 44 + 间距 + 工具条 + 键盘 + 安全区。 */
@media (max-width: 899px), (max-height: 559px) {
  .board-shell { --board-limit: min(100vw - 36px, calc(100dvh - 240px)); }
}
/* 横屏手机更矮：顶栏更薄、工具条更紧，给棋盘多留一点 */
@media (max-width: 1000px) and (max-height: 460px) {
  .board-shell { --board-limit: min(100vw - 36px, calc(100dvh - 220px)); }
}

.board {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--bg-elev);
  border: 2px solid var(--grid-out);
  border-radius: 10px;
  overflow: hidden;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.cell {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-elev);
  border-right: 1px solid var(--grid-thin);
  border-bottom: 1px solid var(--grid-thin);
  /* 直接跟着棋盘自身宽度缩放（cqi），格子永远是正方形，字号也永远贴合 */
  font-size: clamp(15px, 8.4cqi, 30px);
  font-weight: 500;
  color: var(--user);
  cursor: pointer;
  /* 不加过渡：选中格、同行/列/宫高亮要在点下的同一帧到位，淡入会像闪烁 */
  min-width: 0; min-height: 0;
  font-variant-numeric: tabular-nums;
}
.cell:nth-child(9n) { border-right: 0; }
.cell:nth-child(n+73) { border-bottom: 0; }
/* 宫线 > 单元线 */
.cell[data-c="2"], .cell[data-c="5"] { border-right: 2px solid var(--grid-thick); }
.cell[data-r="2"], .cell[data-r="5"] { border-bottom: 2px solid var(--grid-thick); }

.cell.given { color: var(--given); font-weight: 650; }
.cell.peer { background: var(--peer); }
.cell.same { background: var(--same); }
.cell.sel { background: var(--sel); }
.cell.hinted { animation: pop .45s ease; }
/* 同行/列/宫撞上同一个数字：只标红这一对，不计数、不阻断，改掉就消失 */
.cell.conflict { background: var(--danger-soft); }
.cell.conflict .val { color: var(--danger); font-weight: 700; }
.cell.conflict.sel { box-shadow: inset 0 0 0 2px var(--danger); }
/* 题目给定格不能被改，所以不常驻红：闪两下提醒，然后回归原样 */
.cell.given.conflict-flash { animation: conflict-blink 1s ease both; }
.cell.given.conflict-flash .val { color: var(--danger); font-weight: 700; }

.cell .val { position: relative; z-index: 1; }
.cell .notes {
  position: absolute; inset: 2px;
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  font-size: clamp(7px, 10cqi, 11px); font-weight: 600; line-height: 1;
  color: var(--text-faint);
}
.cell .notes span { display: flex; align-items: center; justify-content: center; }

@keyframes pop { 0% { transform: scale(.7); opacity: .3; } 100% { transform: scale(1); opacity: 1; } }
@keyframes conflict-blink {
  0%, 24%, 52% { background: var(--danger-soft); opacity: .45; }
  12%, 38% { background: transparent; opacity: 1; }
  100% { background: transparent; opacity: 1; }
}

.paused-veil {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: color-mix(in srgb, var(--bg-elev) 88%, transparent);
  backdrop-filter: blur(6px);
  border-radius: 10px;
  border: 2px solid var(--grid-out);
}
.paused-veil p { color: var(--text-soft); font-weight: 600; letter-spacing: .1em; }

/* 底部操作区 */
.pad { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.toolbar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tool {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: var(--tap);
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  color: var(--text-soft);
  cursor: pointer;
  transition: background .12s ease, color .12s ease, transform .1s ease;
}
.tool:active { transform: scale(.96); }
.tool[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
/* 笔记模式：数字键盘换成「候选」的样子，一眼看出此刻是多选而不是落子 */
#keypad[aria-disabled="true"] .key,
#keypad[aria-disabled="true"] .key:active { opacity: .5; transform: none; }
body.notes-mode .key {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: transparent;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent);
}
body.notes-mode .key:active { background: color-mix(in srgb, var(--accent) 26%, transparent); }

/* 笔记模式状态条：挤在工具条上面，不覆盖棋盘也不覆盖键盘 */
.notes-status {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 650; letter-spacing: .02em;
  color: var(--accent);
}
.notes-status .ic { width: 15px; height: 15px; stroke-width: 2.1; }
/* 切换那一刻点亮一次，替代原先会盖住键盘的 toast */
.notes-status.flash { animation: notes-flash 1.6s ease-out; }
@keyframes notes-flash {
  0% { opacity: .2; transform: translateY(3px); }
  18% { opacity: 1; transform: none; }
  100% { opacity: .78; }
}
.tool[disabled] { opacity: .4; }
.tool .badge {
  position: absolute; top: 4px; right: 6px;
  font-size: 11px; font-weight: 700; color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.tool .badge:empty { display: none; }

.keypad {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 6px;
  container-type: inline-size;
}
@media (max-width: 420px) { .keypad { gap: 4px; } }
/* 手机上主操作已够用，主题切换放进设置面板，避免顶栏拥挤 */
@media (max-width: 430px) { .theme-btn { display: none; } }
.key {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 56px;
  padding: 0 1px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--bg-elev);
  color: var(--user);
  /* 键盘很窄：数字随格宽缩放，上方留出足够空间给右下角的「剩余数」 */
  font-size: clamp(14px, 18cqi, 25px);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: transform .1s ease, background .12s ease;
}
.key:active { transform: scale(.95); background: var(--bg-sunk); }
@media (hover: hover) { .key:hover { border-color: var(--accent); } }

@media (min-width: 481px) {
  .key { min-height: 62px; }
  .tool { min-height: 46px; }
}
@media (max-height: 700px) {
  .key { min-height: 48px; }
  .tool { min-height: 42px; }
}

/* ===================== 大屏：棋盘 + 操作区左右两栏 =====================
   手机上一列到底最顺手；但平板/桌面上屏幕很宽，继续压成一列只会让棋盘
   贴在两列留白中间。够宽够高时切成「左棋盘 / 右操作区」，棋盘跟着屏高长到最大。 */
@media (min-width: 900px) and (min-height: 560px) {
  /* 内容区不再是 560px 的窄条 */
  .screen.game {
    --board-max: 640px;
    --pad-col: 240px;
    /* 棋盘可用边长：屏高 - 顶部 54px - 上下留白 96px */
    --board-side: min(var(--board-max), calc(100dvh - 150px));
    max-width: min(1120px, 100%);
    display: grid;
    /* 四条轨道：左右两条弹性空白把「棋盘 + 操作区」夹在正中间 */
    grid-template-columns:
      minmax(0, 1fr)
      min(var(--board-side), 100%)
      var(--pad-col)
      minmax(0, 1fr);
    /* 四条行：顶栏，再用两条 1fr 把内容夹在垂直正中 */
    grid-template-rows: auto 1fr auto 1fr;
    grid-template-areas:
      "head head head head"
      ".    .    .     ."
      ".    board pad  ."
      ".    .    .     .";
    column-gap: 32px;
    align-items: center;
    align-content: center;
    row-gap: 20px;
  }
  /* 顶栏横跨整行，返回键贴左、设置贴右 */
  .screen.game > .game-head {
    grid-area: head;
    width: 100%;
    justify-self: stretch;
  }
  .screen.game > .board-wrap {
    grid-area: board;
    align-self: center;
    margin-block: 0;
  }
  /* 两栏里棋盘边长完全由 --board-side 决定，宽高一致 */
  .screen.game .board-shell { max-width: var(--board-side); }
  /* 操作区跟着棋盘一起垂直居中，不贴底 */
  .screen.game > .pad {
    grid-area: pad;
    align-self: center;
    width: 100%;
    margin-top: 0;
  }
  /* 右栏变窄，工具条与数字键盘改成 2 列 / 3 列，避免 9 个键挤成细条 */
  .screen.game .toolbar { grid-template-columns: repeat(2, 1fr); }
  .screen.game .keypad { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .screen.game .key { min-height: 56px; font-size: clamp(18px, 4.2cqi, 24px); }
  .screen.game .tool { min-height: 48px; }

  /* 棋盘上限交给高度；宽度不足时由 minmax(0, …) 自动收缩 */
  .screen.game .board-shell { --board-limit: var(--board-side); }
}

/* 超宽屏：棋盘可以再大一点，操作区保持舒适宽度 */
@media (min-width: 1400px) and (min-height: 700px) {
  .screen.game {
    --board-max: 720px;
    --pad-col: 260px;
    --board-side: min(var(--board-max), calc(100dvh - 130px));
    max-width: min(1240px, 100%);
    column-gap: 40px;
  }
}

/* ===================== 弹层 ===================== */
.modal {
  width: min(92vw, 440px);
  max-height: 86dvh;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--bg-elev);
  color: var(--text);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}
.modal::backdrop { background: rgba(10, 14, 22, .45); backdrop-filter: blur(2px); }
.modal-body { padding: 20px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; max-height: 86dvh; }
.modal-body.center { align-items: center; text-align: center; }
.modal-head { display: flex; align-items: center; justify-content: space-between; }
.modal-head h2 { font-size: 18px; }

.win-mark { font-size: 34px; color: var(--accent); line-height: 1; }
.facts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin: 0; width: 100%;
}
.facts div { background: var(--bg-sunk); border-radius: var(--radius-sm); padding: 10px; }
.facts dt { font-size: 12px; color: var(--text-soft); }
.facts dd { margin: 2px 0 0; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.modal .row { width: 100%; }
.modal .row .btn { flex: 1; }
.row.wrap .btn { flex: 0 0 auto; }

.setting { display: flex; flex-direction: column; gap: 8px; }
.setting.row-between { flex-direction: row; align-items: center; justify-content: space-between; gap: 14px; }
.setting-label { display: flex; flex-direction: column; gap: 2px; }
.setting.stack { gap: 10px; }

.segmented {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--bg-sunk); border-radius: 12px; flex-wrap: wrap;
}
.segmented button {
  min-height: 36px; padding: 0 12px;
  border: 0; border-radius: 9px; background: transparent; color: var(--text-soft);
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.segmented button[aria-checked="true"] { background: var(--bg-elev); color: var(--text); box-shadow: var(--shadow); }

.switch {
  width: 50px; height: 30px; flex: none; padding: 0;
  border-radius: 999px; border: 1px solid var(--line);
  background: var(--bg-sunk); cursor: pointer; position: relative;
  transition: background .16s ease;
}
.switch span {
  position: absolute; top: 3px; left: 3px; width: 22px; height: 22px;
  border-radius: 50%; background: var(--bg-elev); box-shadow: var(--shadow);
  transition: transform .16s ease;
}
.switch[aria-checked="true"] { background: var(--accent); border-color: var(--accent); }
.switch[aria-checked="true"] span { transform: translateX(20px); }

/* 战绩 */
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.stat-card { background: var(--bg-sunk); border-radius: var(--radius-sm); padding: 10px 12px; }
.stat-card b { display: block; font-size: 20px; font-variant-numeric: tabular-nums; }
.stat-card span { font-size: 12px; color: var(--text-soft); }
.hist { display: flex; flex-direction: column; gap: 8px; }
.hist-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--radius-sm); font-size: 14px;
}
.hist-item .lvl { font-weight: 650; }
.hist-item .when { color: var(--text-faint); font-size: 12px; }
.hist-item .nums { font-family: var(--font-num); color: var(--text-soft); font-size: 13px; }
.empty { color: var(--text-faint); text-align: center; padding: 18px 0; font-size: 14px; }
.section-title { font-size: 13px; font-weight: 700; color: var(--text-soft); letter-spacing: .04em; margin: 0; }
.section-title.spaced { margin-top: 4px; }

/* 提示条 */
.toast, .update-toast {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  max-width: min(92vw, 460px);
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px; font-weight: 600;
  background: #1f2733;
  color: #f2f5fa;
  box-shadow: var(--shadow-lift);
  z-index: 50;
}
.update-toast { bottom: auto; top: calc(env(safe-area-inset-top, 0px) + 12px); }
.update-toast .btn { color: inherit; border-color: color-mix(in srgb, currentColor 40%, transparent); }
.update-toast .btn.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}