* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; background: #0e1512; color: #e8ece8;
  padding-top: max(12px, env(safe-area-inset-top)); }
#screen { max-width: 480px; margin: 0 auto; padding: 16px; min-height: 100vh;
  display: flex; flex-direction: column; }
.card { display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 92px; border-radius: 8px; background: #fff; color: #111;
  font-size: 34px; font-weight: 700; margin: 4px; }
.dealer-row { text-align: center; padding: 12px 0; }
.player-row { text-align: center; padding: 20px 0; }
/* ⚠ minmax(0, 1fr) 而**不是** 1fr：`1fr` 轨道的最小尺寸是 auto，一个塞不下的长词
   会把自己那一列**撑宽、把邻列挤窄**（de 实测 Hit 139px / Stand 179px），
   页面照样不溢出 ⇒ 截图门禁的「按钮文字放不下」那条断言永远咬不到，而按钮已经一大一小了。
   minmax(0, …) 把两列钉成等宽：放不下就是真的放不下，门禁看得见。 */
.actions { margin-top: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
.act { min-height: 56px; font-size: 18px; border: 0; border-radius: 10px;
  background: #1d5c3f; color: #fff; }
.feedback { min-height: 48px; text-align: center; font-size: 17px; padding: 10px; }
.feedback.correct { color: #6fd598; }
.feedback.acceptable { color: #d8c469; }
.feedback.wrong { color: #e08a7c; }
/* 没有背景色的按钮会拿 UA 默认的白底，在深色主题上是一道刺眼的白条 */
.menu-btn, .nav-back { min-height: 48px; border-radius: 10px; margin-top: 10px;
  border: 1px solid #26382f; background: #16211c; color: #e8ece8; font-size: 15px; }
.nav-back { color: #a9bdb1; background: transparent; }
.home-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 4px; }
.home-tools .menu-btn { margin-top: 0; min-height: 46px; }
.home-tools .drill-entry { background: #1d5c3f; border-color: #2f7d52; font-weight: 600; }
.act:disabled { opacity: 0.45; }
.explain { background: #16211c; border: 1px solid #26382f; border-radius: 12px;
  padding: 12px 14px; margin: 4px 0 10px; font-size: 15px; line-height: 1.45; }
.ex-mnemonic { margin: 0 0 8px; font-size: 16px; font-weight: 600; color: #e8ece8; }
.ex-hand { margin: 0 0 4px; color: #d5ded8; }
.ex-table { margin: 0 0 8px; color: #a9bdb1; }
/* 两套口径分家时的实话（少见，但出现时它是这张卡上最该被读到的一句） */
.ex-borderline { margin: 0 0 8px; padding: 8px 10px; border-left: 3px solid #d8c469;
  background: #1b1a10; font-size: 13px; line-height: 1.55; color: #d5ded8; }
.explain summary { cursor: pointer; color: #a9bdb1; padding: 4px 0; }
.ex-ev { font-variant-numeric: tabular-nums; font-family: ui-monospace, monospace;
  font-size: 14px; color: #c8d4cc; padding: 2px 0 2px 8px; }
.continue-btn { min-height: 48px; font-size: 17px; border: 0; border-radius: 10px;
  background: #2a4a3a; color: #fff; margin-bottom: 10px;
  scroll-margin-bottom: 14px; }   /* 被 scrollIntoView 拉回来时留一点余量，别贴死屏幕底边 */
.title { font-size: 22px; margin: 4px 0 12px; }
.section-h { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em;
  color: #8fa397; margin: 8px 0 6px; }
/* 课程列表 */
.lesson-list { display: flex; flex-direction: column; gap: 6px; }
.lesson-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px;
  padding: 8px 12px; border: 1px solid #26382f; border-radius: 10px; background: #16211c;
  color: #e8ece8; font-size: 16px; text-align: left; }
.lesson-item.done { border-color: #2f7d52; }
.lesson-item.locked { opacity: 0.5; }
.lesson-no { flex: 0 0 26px; height: 26px; border-radius: 50%; background: #24312a;
  color: #9aa89f; font-size: 13px; display: grid; place-items: center; }
.lesson-name { flex: 1; }
.lesson-badge { flex: 0 0 auto; color: #6fd598; font-size: 15px; }
/* 课程引导卡 / HUD / 过关卡 */
.lesson-intro { background: #16211c; border: 1px solid #26382f; border-radius: 12px;
  padding: 14px 16px; margin-bottom: 12px; }
.lesson-intro-text { margin: 0; font-size: 16px; line-height: 1.6; color: #d5ded8; }
.lesson-start { min-height: 56px; font-size: 18px; border: 0; border-radius: 10px;
  background: #1d5c3f; color: #fff; }
.lesson-hud { display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-size: 13px; color: #9aa89f; padding-bottom: 6px; border-bottom: 1px solid #1e2b24; }
.lesson-progress { font-variant-numeric: tabular-nums; color: #6fd598; }
.lesson-pass { background: #16211c; border: 1px solid #2f7d52; border-radius: 12px;
  padding: 24px 16px; margin: 24px 0 12px; text-align: center; }
.lesson-pass-emoji { font-size: 44px; }
.lesson-pass-title { margin: 8px 0 4px; font-size: 20px; font-weight: 700; }
.lesson-pass-sub { margin: 0; color: #a9bdb1; }
.lesson-stars { font-size: 26px; color: #e8c65c; margin-top: 8px; }
/* 热力图：形状 + 颜色双编码，灰度下也能分辨 */
.heat-grid { display: grid; gap: 2px; margin: 10px 0; font-size: 10px; }
.heat-cell, .heat-swatch { aspect-ratio: 1; border-radius: 2px; background: #24312a;
  position: relative; }
.heat-cell.green, .heat-swatch.green { background: #2f7d52; }
.heat-cell.green::after, .heat-swatch.green::after { content: '✓'; }
.heat-cell.red, .heat-swatch.red { background: #8a4438; }
.heat-cell.red::after, .heat-swatch.red::after { content: '✗'; }
.heat-cell.yellow, .heat-swatch.yellow { background: #8a7838; }
.heat-cell.yellow::after, .heat-swatch.yellow::after { content: '•'; }
.heat-cell::after, .heat-swatch::after { position: absolute; inset: 0; display: grid;
  place-items: center; color: #fff; font-size: 8px; }
.heat-h, .heat-corner { text-align: center; color: #9aa89f; }
/* 图例：四色各一格，形状+颜色双编码 */
.heat-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 6px; }
.heat-legend-item { display: flex; align-items: center; gap: 5px; }
.heat-legend-label { font-size: 12px; color: #9aa89f; }
.heat-swatch { flex: 0 0 auto; width: 13px; height: 13px; }
/* 规则屏 */
.rules-current { color: #a9bdb1; margin: 0 0 4px; font-size: 14px; }
.rules-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rule-preset { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; min-height: 58px; padding: 8px 4px; border: 1px solid #26382f; border-radius: 10px;
  background: #16211c; color: #e8ece8; }
.rule-preset[aria-pressed="true"] { background: #1d5c3f; border-color: #6fd598; }
/* 选中态不只靠底色：带一个实心/空心圆的形状编码，灰度下也分得清 */
.rule-preset[aria-pressed="true"]::before { content: '●'; font-size: 11px; color: #8ff0b8; }
.rule-preset[aria-pressed="false"]::before { content: '○'; font-size: 11px; color: #7d8c83; }
.rule-preset-name { font-size: 14px; font-weight: 600; text-align: center; line-height: 1.2; }
.rule-preset-sub { font-size: 9px; color: #a9bdb1; letter-spacing: 0.01em; }
.rules-custom { border: 1px solid #26382f; border-radius: 10px; background: #16211c; padding: 2px 12px; }
.rule-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 44px; border-bottom: 1px solid #1e2b24; }
.rule-row:last-child { border-bottom: 0; }
.rule-label { font-size: 14px; color: #d5ded8; }
.rule-toggle { min-width: 62px; min-height: 32px; border: 1px solid #35493e; border-radius: 16px;
  background: #24312a; color: #9aa89f; font-size: 13px; }
.rule-toggle[aria-pressed="true"] { background: #1d5c3f; border-color: #6fd598; color: #fff; }
.rule-toggle[aria-pressed="true"]::before { content: '✓ '; }
.rule-stepper { display: flex; align-items: center; gap: 6px; }
.rule-step { width: 32px; height: 32px; border: 1px solid #35493e; border-radius: 8px;
  background: #24312a; color: #e8ece8; font-size: 17px; line-height: 1; padding: 0; }
.rule-step:disabled { opacity: 0.35; }
.rule-decks-value { min-width: 22px; text-align: center; font-size: 15px;
  font-variant-numeric: tabular-nums; }
.rules-effect { font-size: 12px; line-height: 1.5; color: #8fa397; margin: 10px 0 0; }
/* ---- B1 语言选择器（10 种：折叠一行 + 展开 2 列直选，⛔ 不用循环按钮）---- */
.lang-box { margin: 0 0 12px; border: 1px solid #26382f; border-radius: 10px; background: #16211c; }
.lang-summary { display: flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 12px; font-size: 14px; color: #d5ded8; cursor: pointer; }
.lang-summary-label { margin-right: auto; }
.lang-summary-current { color: #8ff0b8; font-size: 13px; }
/* ⚠ display:flex 把 details 默认的小三角吃掉了，⇒ 必须自己画一个，
   否则折叠态看不出这一行点得开。展开态换个形状（⛔ 不只靠颜色）。 */
.lang-summary::after { content: '▾'; font-size: 12px; color: #8fa397; }
.lang-box[open] .lang-summary::after { content: '▴'; color: #8ff0b8; }
.lang-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 8px 8px; }
.lang-opt { min-height: 42px; padding: 4px 6px; border: 1px solid #35493e; border-radius: 8px;
  background: #24312a; color: #e8ece8; font-size: 13px; line-height: 1.2; }
.lang-opt[aria-pressed="true"] { background: #1d5c3f; border-color: #6fd598; }
/* 选中态形状+颜色双编码（同规则屏那套），灰度下也分得清 */
.lang-opt[aria-pressed="true"]::before { content: '● '; font-size: 10px; color: #8ff0b8; }
.lang-opt[aria-pressed="false"]::before { content: '○ '; font-size: 10px; color: #7d8c83; }
/* ---- 每日 21 手 ---- */
.daily-row { display: grid; grid-template-columns: 1fr 52px; gap: 8px; margin-bottom: 8px; }
.daily-card { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 10px 12px;
  border: 1px solid #2f7d52; border-radius: 12px; background: #16211c; color: #e8ece8; text-align: left; }
.daily-card.done { border-color: #26382f; }
.daily-card-icon { font-size: 24px; flex: 0 0 auto; }
.daily-card-mid { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.daily-card-title { font-size: 16px; font-weight: 600; }
.daily-card-sub { font-size: 12px; color: #9aa89f; line-height: 1.35; }
.daily-card-streak { flex: 0 0 auto; font-size: 14px; color: #f0a35e;
  font-variant-numeric: tabular-nums; }
.cal-entry { border: 1px solid #26382f; border-radius: 12px; background: #16211c;
  color: #e8ece8; font-size: 20px; }
.daily-hud { display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-size: 13px; color: #9aa89f; }
.daily-hud-title { font-weight: 600; color: #d5ded8; }
.daily-progress { font-variant-numeric: tabular-nums; color: #6fd598; }
.daily-bar { height: 4px; margin-top: 6px; border-radius: 2px; background: #1e2b24; overflow: hidden; }
.daily-bar-fill { height: 100%; background: #2f7d52; transition: width 0.25s ease; }
/* 结算卡 */
.daily-result { background: #16211c; border: 1px solid #2f7d52; border-radius: 12px;
  padding: 20px 16px 16px; margin: 16px 0 12px; text-align: center; }
.daily-result-emoji { font-size: 40px; line-height: 1; }
.daily-result-title { margin: 8px 0 2px; font-size: 15px; color: #a9bdb1; }
.daily-score { font-size: 38px; font-weight: 700; font-variant-numeric: tabular-nums; }
.daily-record { margin-top: 6px; font-size: 15px; color: #e8c65c; }
.daily-streak { margin-top: 6px; font-size: 15px; color: #f0a35e; }
.daily-note { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: #8fa397; }
.daily-milestone { width: 100%; min-height: 48px; border: 0; border-radius: 10px;
  background: #8a7838; color: #fff; font-size: 16px; margin-bottom: 4px; }
.daily-milestone-done { padding: 12px; color: #e8c65c; text-align: center; }
.daily-perfect { margin: 8px 0; text-align: center; font-size: 14px; color: #6fd598; }
.miss-list { display: flex; flex-direction: column; gap: 4px; }
.miss-row { padding: 8px 10px; border: 1px solid #26382f; border-radius: 8px;
  background: #16211c; font-size: 14px; color: #d5ded8; }
.miss-more { margin: 2px 0 0; font-size: 13px; color: #8fa397; }
/* ---- 打卡月历 ---- */
.cal-head { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; }
.cal-page { height: 40px; border: 1px solid #26382f; border-radius: 10px; background: #16211c;
  color: #e8ece8; font-size: 20px; line-height: 1; padding: 0; }
.cal-page:disabled { opacity: 0.3; }
.cal-title { margin: 6px 0; font-size: 18px; text-align: center; }
.cal-streak { margin: 0 0 8px; text-align: center; font-size: 13px; color: #a9bdb1; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow { padding-bottom: 2px; text-align: center; font-size: 10px; color: #8fa397; }
.cal-day { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; aspect-ratio: 1; padding: 0; border: 1px solid #26382f; border-radius: 8px;
  background: #16211c; color: #e8ece8; font-size: 13px; }
.cal-num { font-variant-numeric: tabular-nums; }
/* 形状+颜色双编码：✓ 打过 · ○ 还能补 · · 已错过（灰度下也读得出） */
.cal-mark, .cal-swatch { font-size: 10px; line-height: 1; color: #9aa89f; }
.cal-score { font-size: 8px; color: #8ff0b8; font-variant-numeric: tabular-nums; }
.cal-day.cal-done, .cal-swatch.cal-done { background: #1d5c3f; border-color: #2f7d52; }
.cal-day.cal-done .cal-mark, .cal-swatch.cal-done { color: #8ff0b8; }
.cal-day.cal-open, .cal-swatch.cal-open { border-color: #4a6b58; }
.cal-day.cal-missed, .cal-swatch.cal-missed { opacity: 0.45; }
.cal-day.cal-future { opacity: 0.25; }
.cal-day.cal-today { border-color: #6fd598; box-shadow: 0 0 0 1px #6fd598; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 8px 0 0; }
.cal-legend-item { display: flex; align-items: center; gap: 5px; }
.cal-legend-label { font-size: 12px; color: #9aa89f; }
.cal-swatch { display: grid; place-items: center; width: 15px; height: 15px; flex: 0 0 auto;
  border: 1px solid #26382f; border-radius: 3px; background: #16211c; }
.cal-window { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: #8fa397; }
.cal-repair { min-height: 48px; margin-top: 10px; border: 1px solid #8a7838; border-radius: 10px;
  background: #24312a; color: #e8c65c; font-size: 15px; }
.cal-repair-note { margin: 4px 0 0; text-align: center; font-size: 11px; color: #8fa397; }
/* ---- 首页身份条与「下一个目标」 ---- */
.home-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.home-head .title { margin: 4px 0 8px; }
.home-level { display: flex; align-items: center; gap: 6px; padding: 5px 10px 5px 5px; flex-shrink: 0;
  border: 1px solid #26382f; border-radius: 999px; background: #16211c; color: #e8ece8; }
.home-level-badge { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: #1d5c3f; color: #8ff0b8; font-size: 12px; font-weight: 700; }
/* 徽章是**一个词**：⛔ 不许在中间断行。日语没有空格，flex 会把「手練れ」拆成「手練」+「れ」，
   一个称号读成两半比占地方难看得多。nowrap + 不收缩，宽度不够就去挤标题（标题本来就能折行）。*/
.home-level-title { font-size: 13px; color: #a9bdb1; white-space: nowrap; }
.next-goal { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 52px;
  margin-bottom: 8px; padding: 8px 12px; border: 1px solid #35493e; border-radius: 12px;
  background: #1b2a22; color: #e8ece8; text-align: left; }
.next-goal-label { flex: 0 0 auto; padding: 3px 7px; border-radius: 6px; background: #24312a;
  color: #8fa397; font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; }
.next-goal-text { flex: 1; min-width: 0; font-size: 14px; line-height: 1.3; }
.next-goal-arrow { flex: 0 0 auto; color: #6fd598; font-size: 20px; }
.home-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.meta-btn { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; min-height: 56px; border: 1px solid #26382f; border-radius: 10px; background: #16211c;
  color: #e8ece8; }
.meta-btn-icon { font-size: 18px; line-height: 1; }
.meta-btn-label { font-size: 11px; color: #a9bdb1; }
/* ---- 认证屏 ---- */
.certs-intro { margin: 0 0 10px; font-size: 12px; line-height: 1.5; color: #8fa397; }
.certs-list { display: flex; flex-direction: column; gap: 8px; }
.cert-card { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px;
  border: 1px solid #26382f; border-radius: 12px; background: #16211c; }
.cert-card.earned { border-color: #8a7838; background: #1d2119; }
.cert-card.locked { opacity: 0.82; }
.cert-badge { flex: 0 0 auto; font-size: 28px; line-height: 1.1; }
.cert-body { flex: 1; min-width: 0; }
.cert-name { font-size: 16px; font-weight: 600; }
.cert-desc { margin-top: 3px; font-size: 12px; line-height: 1.45; color: #a9bdb1; }
.cert-req { margin-top: 6px; font-size: 12px; color: #d8c469; }
.cert-date { margin-top: 6px; font-size: 12px; color: #8ff0b8; }
.cert-share { min-height: 38px; margin-top: 8px; padding: 0 14px; border: 1px solid #8a7838;
  border-radius: 8px; background: #24312a; color: #e8c65c; font-size: 14px; }
.cert-modal { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; padding: 20px;
  background: rgba(6, 10, 8, 0.94); }
.cert-modal img { width: 100%; max-width: 420px; border-radius: 8px; }
.cert-dl { color: #8ff0b8; font-size: 14px; }
.cert-modal-close { min-height: 44px; padding: 0 24px; border: 1px solid #35493e; border-radius: 10px;
  background: #16211c; color: #e8ece8; font-size: 15px; }
/* ---- 成就屏 ---- */
.ach-progress { margin: 0 0 6px; font-size: 14px; color: #a9bdb1;
  font-variant-numeric: tabular-nums; }
.ach-head-bar, .ach-bar { height: 6px; border-radius: 3px; background: #1e2b24; overflow: hidden; }
.ach-head-bar { margin-bottom: 10px; }
.ach-head-fill, .ach-bar-fill { height: 100%; background: #2f7d52; }
.ach-list { display: flex; flex-direction: column; gap: 6px; }
.ach-item { display: flex; align-items: center; gap: 10px; padding: 10px;
  border: 1px solid #26382f; border-radius: 10px; background: #16211c; }
.ach-item.unlocked { border-color: #8a7838; background: #1d2119; }
.ach-item.locked { opacity: 0.72; }
.ach-icon { flex: 0 0 auto; font-size: 20px; }
.ach-body { flex: 1; min-width: 0; }
.ach-name { font-size: 15px; font-weight: 600; }
.ach-desc { margin-top: 2px; font-size: 12px; line-height: 1.4; color: #9aa89f; }
.ach-bar { margin-top: 6px; }
.ach-bar-fill { background: #8a7838; }
.ach-left { margin-top: 3px; font-size: 11px; color: #d8c469; }
.ach-check { flex: 0 0 auto; color: #e8c65c; font-size: 16px; }
/* ---- 统计屏 ---- */
.stat-level { display: flex; align-items: center; gap: 12px; padding: 12px;
  border: 1px solid #26382f; border-radius: 12px; background: #16211c; }
.stat-level-badge { display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px;
  border-radius: 50%; background: #1d5c3f; color: #8ff0b8; font-size: 20px; font-weight: 700; }
.stat-level-body { flex: 1; min-width: 0; }
.stat-level-title { font-size: 17px; font-weight: 600; }
.stat-level-sub { margin-top: 2px; font-size: 12px; color: #9aa89f;
  font-variant-numeric: tabular-nums; }
.stat-level-bar { height: 6px; margin-top: 7px; border-radius: 3px; background: #1e2b24;
  overflow: hidden; }
.stat-level-fill { height: 100%; background: #2f7d52; }
.stat-group { border: 1px solid #26382f; border-radius: 10px; background: #16211c; padding: 2px 12px; }
.stat-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 42px; border-bottom: 1px solid #1e2b24; }
.stat-row:last-child { border-bottom: 0; }
.stat-label { font-size: 14px; color: #d5ded8; }
.stat-value { font-size: 15px; color: #e8ece8; font-variant-numeric: tabular-nums; }
.stat-note { margin: 6px 0 0; font-size: 11px; line-height: 1.5; color: #8fa397; }
/* ---- Pro 入口（首页）---- */
.pro-entry { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 58px;
  padding: 8px 12px; border: 1px solid #8a7838; border-radius: 12px; background: #1d2119;
  color: #e8ece8; text-align: left; }
.pro-entry.owned { border-color: #2f7d52; background: #16211c; }
.pro-entry-mark { flex: 0 0 auto; font-size: 18px; }
.pro-entry-mid { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.pro-entry-title { font-size: 15px; font-weight: 600; }
.pro-entry-sub { font-size: 12px; color: #d8c469; }
.pro-entry.owned .pro-entry-sub { color: #8ff0b8; }
.pro-entry-arrow { flex: 0 0 auto; color: #d8c469; font-size: 20px; }
.pro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.pro-btn { display: flex; align-items: center; gap: 8px; min-height: 50px; padding: 8px 10px;
  border: 1px solid #26382f; border-radius: 10px; background: #16211c; color: #e8ece8;
  text-align: left; }
/* 锁态：变淡 + 一个 🔒 形状，⛔ 不靠颜色单编码 */
.pro-btn.locked { opacity: 0.62; border-style: dashed; }
.pro-btn-icon { flex: 0 0 auto; font-size: 17px; }
.pro-btn-label { flex: 1; min-width: 0; font-size: 13px; line-height: 1.25; }
.pro-btn-mark { flex: 0 0 auto; font-size: 12px; }
/* ---- 付费页 ---- */
.pw-sub { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: #a9bdb1; }
.pw-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px;
  padding: 12px 14px; border: 1px solid #8a7838; border-radius: 12px; background: #1d2119; }
.pw-price-amount { font-size: 30px; font-weight: 700; color: #e8c65c;
  font-variant-numeric: tabular-nums; }
.pw-price-terms { font-size: 13px; color: #d8c469; }
.pw-price-note { margin: 6px 0 2px; font-size: 12px; line-height: 1.5; color: #8fa397; }
.pw-features { display: flex; flex-direction: column; gap: 6px; }
.pw-feature { display: flex; align-items: flex-start; gap: 10px; padding: 9px 11px;
  border: 1px solid #26382f; border-radius: 10px; background: #16211c; }
.pw-feature-icon { flex: 0 0 auto; font-size: 18px; line-height: 1.2; }
.pw-feature-body { flex: 1; min-width: 0; }
.pw-feature-name { font-size: 15px; font-weight: 600; }
.pw-feature-desc { margin-top: 3px; font-size: 12px; line-height: 1.45; color: #a9bdb1; }
.pw-free { display: flex; flex-direction: column; gap: 4px; }
.pw-free-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #d5ded8; }
.pw-free-check { flex: 0 0 auto; color: #6fd598; font-size: 13px; }
.pw-free-note { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: #8fa397; }
.pw-cta { width: 100%; min-height: 56px; margin-top: 14px; border: 0; border-radius: 10px;
  background: #8a7838; color: #fff; font-size: 18px; font-weight: 600; }
.pw-cta:disabled { opacity: 0.6; }
/* 恢复购买：审核硬性要求的入口 ⇒ 必须看得见（⛔ 不做成灰得快看不出的链接），但不与买按钮抢戏 */
.pw-restore { width: 100%; min-height: 44px; margin-top: 8px; border: 1px solid #35493e;
  border-radius: 10px; background: transparent; color: #a9bdb1; font-size: 14px; }
.pw-restore:disabled { opacity: 0.6; }
/* 购买结果只写这一行（⛔ 不弹 alert）。空的时候不占位。 */
.pw-status:empty { display: none; }
.pw-status { margin: 8px 0 0; padding: 8px 10px; border: 1px solid #35493e; border-radius: 8px;
  background: #131c17; font-size: 12px; line-height: 1.5; color: #d5ded8; }
/* 开发版解锁：被 S1 门禁挡在生产包外，⇒ 长得就该像个开发按钮 */
.pw-dev { width: 100%; min-height: 38px; margin-top: 14px; border: 1px dashed #5a6b60;
  border-radius: 8px; background: transparent; color: #8fa397; font-size: 12px; }
.pw-cta-note { margin: 6px 0 0; text-align: center; font-size: 11px; color: #8fa397; }
.pw-owned { margin-top: 14px; padding: 12px; border: 1px solid #2f7d52; border-radius: 10px;
  background: #16211c; text-align: center; font-size: 15px; color: #8ff0b8; }
.pw-disclosure { margin-top: 14px; padding: 10px 12px; border: 1px solid #35493e;
  border-radius: 10px; background: #131c17; }
.pw-disclosure-title { font-size: 12px; font-weight: 600; color: #d8c469; }
.pw-disclosure-text { margin: 5px 0 0; font-size: 11px; line-height: 1.6; color: #8fa397; }
/* ---- 计数速度训练 ---- */
.cs-intro { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: #a9bdb1; }
.cs-tags { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cs-tag { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px;
  border: 1px solid #26382f; border-radius: 10px; background: #16211c; }
.cs-tag-cards { font-size: 13px; color: #d5ded8; font-variant-numeric: tabular-nums; }
.cs-tag-val { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cs-tag-plus .cs-tag-val { color: #6fd598; }
.cs-tag-zero .cs-tag-val { color: #9aa89f; }
.cs-tag-minus .cs-tag-val { color: #e08a7c; }
.cs-speeds { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.cs-speed { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; min-height: 54px; padding: 6px 2px; border: 1px solid #26382f; border-radius: 10px;
  background: #16211c; color: #e8ece8; }
.cs-speed[aria-pressed="true"] { background: #1d5c3f; border-color: #6fd598; }
/* 选中态形状编码，灰度下也分得清（同规则屏那套） */
.cs-speed[aria-pressed="true"]::before { content: '●'; font-size: 10px; color: #8ff0b8; }
.cs-speed[aria-pressed="false"]::before { content: '○'; font-size: 10px; color: #7d8c83; }
.cs-speed-name { font-size: 12px; font-weight: 600; line-height: 1.15; text-align: center; }
.cs-speed-sub { font-size: 9px; color: #a9bdb1; font-variant-numeric: tabular-nums; }
.cs-record { margin: 10px 0 0; font-size: 13px; color: #d8c469; }
.cs-start { min-height: 56px; margin-top: 10px; border: 0; border-radius: 10px;
  background: #1d5c3f; color: #fff; font-size: 18px; }
.cs-hud { display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-size: 13px; color: #9aa89f; }
.cs-hud-title { font-weight: 600; color: #d5ded8; }
.cs-progress { font-variant-numeric: tabular-nums; color: #6fd598; }
.cs-bar { height: 4px; margin-top: 6px; border-radius: 2px; background: #1e2b24; overflow: hidden; }
.cs-bar-fill { height: 100%; background: #2f7d52; }
.cs-card { display: grid; place-items: center; width: 132px; height: 188px; margin: 28px auto 0;
  border-radius: 12px; background: #fff; color: #111; font-size: 68px; font-weight: 700; }
.cs-card.paused { background: #24312a; color: #8fa397; font-size: 20px; }
.cs-hint { margin: 14px 0 0; text-align: center; font-size: 12px; line-height: 1.5; color: #8fa397; }
.cs-controls { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding-bottom: max(16px, env(safe-area-inset-bottom)); }
.cs-pause, .cs-exit { min-height: 52px; border-radius: 10px; font-size: 16px;
  border: 1px solid #35493e; background: #24312a; color: #e8ece8; }
.cs-pause[aria-pressed="true"] { background: #1d5c3f; border-color: #6fd598; color: #fff; }
.cs-answer { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 10px; }
.cs-answer-note { margin: 0 0 4px; font-size: 13px; line-height: 1.5; color: #8fa397; }
.cs-input { min-height: 56px; padding: 0 14px; border: 1px solid #35493e; border-radius: 10px;
  background: #16211c; color: #e8ece8; font-size: 24px; text-align: center;
  font-variant-numeric: tabular-nums; }
.cs-submit { min-height: 56px; padding: 0 20px; border: 0; border-radius: 10px;
  background: #1d5c3f; color: #fff; font-size: 17px; }
.cs-result { padding: 14px; border: 1px solid #26382f; border-radius: 12px; background: #16211c;
  text-align: center; }
.cs-result[data-verdict="correct"] { border-color: #2f7d52; }
.cs-result[data-verdict="near"] { border-color: #8a7838; }
.cs-result[data-verdict="off"] { border-color: #8a4438; }
.cs-verdict { font-size: 20px; font-weight: 700; }
.cs-result[data-verdict="correct"] .cs-verdict { color: #6fd598; }
.cs-result[data-verdict="near"] .cs-verdict { color: #d8c469; }
.cs-result[data-verdict="off"] .cs-verdict { color: #e08a7c; }
.cs-scoreline { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.cs-truth, .cs-yours { padding: 8px; border-radius: 8px; background: #101a15; font-size: 14px;
  font-variant-numeric: tabular-nums; }
.cs-meta { margin-top: 8px; font-size: 12px; color: #8fa397; }
.cs-record-new { margin-top: 6px; font-size: 14px; color: #e8c65c; }
.cs-replay { display: flex; flex-direction: column; gap: 2px; }
.cs-replay-head, .cs-replay-row { display: grid; grid-template-columns: 28px 1fr 52px 60px;
  align-items: center; gap: 6px; padding: 5px 8px; border-radius: 6px;
  font-variant-numeric: tabular-nums; }
.cs-replay-head { font-size: 10px; color: #8fa397; text-transform: uppercase;
  letter-spacing: 0.06em; }
.cs-replay-row { background: #16211c; font-size: 14px; }
.cs-replay-row:nth-child(even) { background: #131c17; }
.cs-replay-n { color: #7d8c83; font-size: 11px; }
.cs-replay-card { font-weight: 700; }
.cs-replay-tag { text-align: right; }
.cs-replay-tag.tag-plus { color: #6fd598; }
.cs-replay-tag.tag-minus { color: #e08a7c; }
.cs-replay-tag.tag-zero { color: #7d8c83; }
.cs-replay-run { text-align: right; color: #d5ded8; font-weight: 600; }
.cs-seed { margin: 8px 0 0; font-size: 10px; color: #55655c; word-break: break-all; }
.cs-again { min-height: 52px; margin-top: 10px; border: 0; border-radius: 10px;
  background: #1d5c3f; color: #fff; font-size: 17px; }
/* ---- True Count 换算训练 ---- */
.tc-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tc-mode { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; min-height: 52px; padding: 6px 4px; border: 1px solid #26382f; border-radius: 10px;
  background: #16211c; color: #e8ece8; }
.tc-mode[aria-pressed="true"] { background: #1d5c3f; border-color: #6fd598; }
.tc-mode[aria-pressed="true"]::before { content: '●'; font-size: 10px; color: #8ff0b8; }
.tc-mode[aria-pressed="false"]::before { content: '○'; font-size: 10px; color: #7d8c83; }
.tc-mode-name { font-size: 14px; font-weight: 600; }
.tc-mode-sub { font-size: 10px; color: #a9bdb1; }
.tc-score { margin: 10px 0 8px; font-size: 13px; color: #a9bdb1;
  font-variant-numeric: tabular-nums; }
.tc-card { padding: 14px; border: 1px solid #26382f; border-radius: 12px; background: #16211c; }
.tc-tray { height: 22px; border: 1px solid #35493e; border-radius: 6px; background: #101a15;
  overflow: hidden; }
.tc-tray-fill { height: 100%; background: repeating-linear-gradient(90deg,
  #3b5647 0 3px, #2a4034 3px 6px); }
.tc-tray-note { margin: 6px 0 0; font-size: 11px; color: #8fa397; }
.tc-estimate-note { margin: 10px 0 0; font-size: 13px; }
.tc-estimate-note.ok { color: #6fd598; }
.tc-estimate-note.off { color: #d8c469; }
.tc-question { margin: 10px 0 12px; font-size: 17px; line-height: 1.45; font-weight: 600; }
.tc-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tc-opt { min-height: 54px; border: 1px solid #35493e; border-radius: 10px; background: #24312a;
  color: #e8ece8; font-size: 19px; font-variant-numeric: tabular-nums; }
.tc-opt:disabled { opacity: 0.65; }
/* 判定标记是形状（✓ / ✗）+ 颜色双编码，⛔ 不靠底色单编码 */
.tc-opt.correct { background: #1d5c3f; border-color: #6fd598; color: #fff; opacity: 1; }
.tc-opt.picked { background: #3a2420; border-color: #8a4438; color: #f0c3ba; opacity: 1; }
.tc-opt-mark { font-size: 15px; }
.tc-feedback { min-height: 0; }
.tc-feedback.show { margin-top: 12px; padding-top: 10px; border-top: 1px solid #26382f; }
.tc-verdict { font-size: 16px; font-weight: 700; }
.tc-feedback.correct .tc-verdict { color: #6fd598; }
.tc-feedback.wrong .tc-verdict { color: #e08a7c; }
.tc-err { margin-top: 6px; font-size: 13px; line-height: 1.5; color: #d8c469; }
.tc-explain { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: #101a15;
  font-size: 15px; color: #d5ded8; font-variant-numeric: tabular-nums; text-align: center; }
.tc-next { width: 100%; min-height: 50px; margin-top: 12px; border: 0; border-radius: 10px;
  background: #1d5c3f; color: #fff; font-size: 17px; }
.tc-note { margin: 10px 0 0; font-size: 11px; line-height: 1.5; color: #8fa397; }
/* ---- 偏差 SRS 训练 ---- */
.dv-progress { margin: 0 0 10px; font-size: 13px; color: #a9bdb1; font-variant-numeric: tabular-nums; }
.dv-card { padding: 14px; border: 1px solid #26382f; border-radius: 12px; background: #16211c; }
.dv-tc { display: inline-block; padding: 3px 10px; border-radius: 999px; background: #1d5c3f;
  color: #d8f3e2; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dv-question { margin: 10px 0 2px; font-size: 19px; line-height: 1.35; font-weight: 700; }
.dv-ask { margin: 0 0 12px; font-size: 13px; color: #a9bdb1; }
/* 同 .actions：⛔ 别用裸 1fr，长词会偷邻列的宽度而不报警 */
.dv-options { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.dv-opt { min-height: 56px; border: 1px solid #35493e; border-radius: 10px; background: #24312a;
  color: #e8ece8; font-size: 17px; }
.dv-opt:disabled { opacity: 0.65; }
/* 形状 + 颜色双编码 */
.dv-opt.correct { background: #1d5c3f; border-color: #6fd598; color: #fff; opacity: 1; }
.dv-opt.correct::after { content: ' ✓'; }
.dv-opt.picked { background: #3a2420; border-color: #8a4438; color: #f0c3ba; opacity: 1; }
.dv-opt.picked::after { content: ' ✗'; }
.dv-answer { margin-top: 12px; padding-top: 10px; border-top: 1px solid #26382f; }
.dv-verdict { font-size: 17px; font-weight: 700; }
.dv-verdict.ok { color: #6fd598; }
.dv-verdict.no { color: #e08a7c; }
.dv-rule { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: #d5ded8; }
.dv-ev-title { margin-top: 12px; font-size: 10px; color: #8fa397; text-transform: uppercase;
  letter-spacing: 0.06em; }
.dv-ev { display: flex; flex-direction: column; gap: 3px; margin-top: 5px; }
.dv-ev-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  padding: 7px 10px; border-radius: 8px; background: #101a15; font-size: 14px; }
.dv-ev-row.best { background: #14301f; }
.dv-ev-act { color: #d5ded8; }
.dv-ev-val { font-size: 16px; font-weight: 700; color: #9aa89f; font-variant-numeric: tabular-nums; }
.dv-ev-row.best .dv-ev-val { color: #6fd598; }
/* 最优那行加形状标记，⛔ 不只靠底色 */
.dv-ev-row.best .dv-ev-act::before { content: '★ '; color: #6fd598; }
.dv-ev-gap { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: #a9bdb1; }
.dv-ev-caveat { margin: 6px 0 0; font-size: 11px; line-height: 1.5; color: #d8c469; }
.dv-grade-title { margin-top: 14px; font-size: 12px; color: #8fa397; }
/* scroll-margin-bottom：同 .continue-btn 那条纪律 —— 被 scrollIntoView({block:'nearest'})
   拉回来时留一点余量，⛔ 别贴死屏幕底边。⚠ 'nearest' 求的是**最小**滚动量，
   落点带小数时最后 0.3px 会留在屏外（ja 实测 bottom=640.28 vs innerHeight=640）：
   这不是某种语言的问题，是「刚好贴边」这件事在任何语言下都只差一个四舍五入。 */
.dv-grades { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 6px;
  scroll-margin-bottom: 14px; }
.dv-grade { min-height: 50px; border: 1px solid #35493e; border-radius: 10px; background: #24312a;
  color: #e8ece8; font-size: 14px; }
.dv-grade-again { border-color: #6b3a32; }
.dv-grade-good { border-color: #2f7d52; }
.dv-rules-note { margin: 10px 0 0; font-size: 11px; line-height: 1.5; color: #7d8c83; }
.dv-empty { padding: 22px 16px; border: 1px solid #26382f; border-radius: 12px; background: #16211c;
  text-align: center; }
.dv-empty-mark { font-size: 34px; color: #6fd598; }
.dv-empty-title { margin: 8px 0 0; font-size: 17px; font-weight: 700; }
.dv-empty-next { margin: 6px 0 0; font-size: 15px; color: #d8c469; }
.dv-empty-note { margin: 10px 0 0; font-size: 12px; line-height: 1.6; color: #8fa397; }
/* ---- 计数速度：轮长 + 认证进度 ---- */
.cs-lens { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cs-len { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; min-height: 50px; padding: 6px 4px; border: 1px solid #26382f; border-radius: 10px;
  background: #16211c; color: #e8ece8; }
.cs-len[aria-pressed="true"] { background: #1d5c3f; border-color: #6fd598; }
.cs-len[aria-pressed="true"]::before { content: '●'; font-size: 10px; color: #8ff0b8; }
.cs-len[aria-pressed="false"]::before { content: '○'; font-size: 10px; color: #7d8c83; }
.cs-len-name { font-size: 14px; font-weight: 600; }
.cs-len-sub { font-size: 10px; color: #a9bdb1; font-variant-numeric: tabular-nums; }
.cs-cert-line { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: #8fa397; }
.cs-cert-new { margin-top: 6px; font-size: 14px; line-height: 1.4; color: #8ff0b8; }
/* ---- bet spread ---- */
.bs-model-note { margin: 0 0 12px; padding: 10px; border: 1px solid #4a4326; border-radius: 10px;
  background: #1c1a10; font-size: 11px; line-height: 1.6; color: #d8c469; }
.bs-spreads { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.bs-spread { min-height: 44px; border: 1px solid #26382f; border-radius: 10px; background: #16211c;
  color: #e8ece8; font-size: 13px; }
.bs-spread[aria-pressed="true"] { background: #1d5c3f; border-color: #6fd598; }
.bs-spread[aria-pressed="true"]::before { content: '● '; font-size: 10px; color: #8ff0b8; }
.bs-score { margin: 10px 0 8px; font-size: 13px; color: #a9bdb1; font-variant-numeric: tabular-nums; }
.bs-card { padding: 14px; border: 1px solid #26382f; border-radius: 12px; background: #16211c; }
.bs-question { margin: 0 0 12px; font-size: 17px; line-height: 1.45; font-weight: 600; }
.bs-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bs-opt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 58px; border: 1px solid #35493e; border-radius: 10px; background: #24312a;
  color: #e8ece8; font-variant-numeric: tabular-nums; }
.bs-opt:disabled { opacity: 0.65; }
.bs-opt-money { font-size: 19px; font-weight: 700; }
.bs-opt-units { font-size: 11px; color: #a9bdb1; }
.bs-opt.correct { background: #1d5c3f; border-color: #6fd598; color: #fff; opacity: 1; }
.bs-opt.correct::after { content: '✓'; font-size: 12px; }
.bs-opt.picked { background: #3a2420; border-color: #8a4438; color: #f0c3ba; opacity: 1; }
.bs-opt.picked::after { content: '✗'; font-size: 12px; }
.bs-feedback { min-height: 0; }
.bs-feedback.show { margin-top: 12px; padding-top: 10px; border-top: 1px solid #26382f; }
.bs-verdict { font-size: 16px; font-weight: 700; }
.bs-feedback.correct .bs-verdict { color: #6fd598; }
.bs-feedback.wrong .bs-verdict { color: #e08a7c; }
.bs-err { margin-top: 6px; font-size: 13px; line-height: 1.5; color: #d8c469; }
.bs-formula { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: #101a15;
  font-size: 14px; color: #d5ded8; font-variant-numeric: tabular-nums; text-align: center; }
.bs-ramp-title { margin-top: 12px; font-size: 10px; color: #8fa397; text-transform: uppercase;
  letter-spacing: 0.06em; }
.bs-ramp { display: flex; flex-direction: column; gap: 2px; margin-top: 5px; }
.bs-ramp-row { display: flex; justify-content: space-between; gap: 8px; padding: 5px 10px;
  border-radius: 6px; background: #101a15; font-size: 13px; font-variant-numeric: tabular-nums; }
.bs-ramp-row.here { background: #14301f; }
.bs-ramp-row.here .bs-ramp-tc::before { content: '▶ '; color: #6fd598; }
.bs-ramp-tc { color: #a9bdb1; }
.bs-ramp-bet { color: #d5ded8; font-weight: 600; }
.bs-heat-note { margin: 8px 0 0; font-size: 11px; line-height: 1.5; color: #8fa397; }
.bs-next { width: 100%; min-height: 50px; margin-top: 12px; border: 0; border-radius: 10px;
  background: #1d5c3f; color: #fff; font-size: 17px; }
/* ---- V2 资金与风险（B3/B4/B5/B8）---- */
/* 首页那个免费入口：⛔ 不在 Pro 段里，锁态下也长这样 */
.bank-entry { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px;
  margin-top: 8px; padding: 8px 12px; border: 1px solid #4a4326; border-radius: 12px;
  background: #1b1a10; color: #e8ece8; text-align: left; }
.bank-entry-icon { flex: 0 0 auto; font-size: 20px; }
.bank-entry-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bank-entry-title { font-size: 15px; font-weight: 600; }
.bank-entry-sub { font-size: 11px; line-height: 1.35; color: #d8c469; }
.bank-entry-arrow { flex: 0 0 auto; color: #8fa397; font-size: 18px; }
.bk-lead { margin: 0 0 10px; font-size: 13px; line-height: 1.6; color: #a9bdb1; }
.bk-note { margin: 6px 0 0; font-size: 11px; line-height: 1.55; color: #8fa397; }
/* 输入行：标签在左、控件在右，⛔ 别让长标签把数字挤出屏幕 */
.bk-panel { display: flex; flex-direction: column; gap: 6px; }
.bk-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 46px; padding: 6px 12px; border: 1px solid #26382f; border-radius: 10px;
  background: #16211c; }
.bk-row-label { flex: 1; min-width: 0; font-size: 13px; line-height: 1.3; color: #d5ded8; }
.bk-row input { flex: 0 0 116px; min-height: 34px; padding: 4px 8px; border: 1px solid #35493e;
  border-radius: 8px; background: #101a15; color: #e8ece8; font-size: 16px; text-align: right;
  font-variant-numeric: tabular-nums; }
/* 选项条：一套通用样式，⛔ 每种选项别各写一份 */
.bk-presets, .bk-targets, .bk-units, .bk-rates, .bk-kelly-modes, .bk-sources,
.bk-spreads, .bk-pens { display: grid; gap: 6px; margin-bottom: 2px; }
.bk-presets { grid-template-columns: 1fr; }
.bk-targets, .bk-units, .bk-rates, .bk-sources { grid-template-columns: repeat(3, 1fr); }
.bk-kelly-modes { grid-template-columns: repeat(2, 1fr); }
.bk-spreads { grid-template-columns: repeat(5, 1fr); }
.bk-pens { grid-template-columns: repeat(4, 1fr); }
.bk-preset, .bk-target, .bk-unit, .bk-rate, .bk-kelly-mode, .bk-source,
.bk-spread-opt, .bk-pen-opt { display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px; min-height: 44px; padding: 6px 4px; border: 1px solid #26382f;
  border-radius: 10px; background: #16211c; color: #e8ece8; font-size: 12px; line-height: 1.25;
  text-align: center; }
.bk-preset { flex-direction: row; justify-content: space-between; text-align: left; padding: 8px 12px; }
.bk-preset-name { font-size: 13px; }
.bk-preset-sub, .bk-target-sub { font-size: 10px; color: #a9bdb1; font-variant-numeric: tabular-nums; }
.bk-preset[aria-pressed="true"], .bk-target[aria-pressed="true"], .bk-unit[aria-pressed="true"],
.bk-rate[aria-pressed="true"], .bk-kelly-mode[aria-pressed="true"], .bk-source[aria-pressed="true"],
.bk-spread-opt[aria-pressed="true"], .bk-pen-opt[aria-pressed="true"] {
  background: #1d5c3f; border-color: #6fd598; }
/* 形状+颜色双编码：选中不只靠底色 */
.bk-preset[aria-pressed="true"] .bk-preset-name::before,
.bk-target[aria-pressed="true"] .bk-target-name::before,
.bk-unit[aria-pressed="true"] .bk-unit-name::before,
.bk-rate[aria-pressed="true"] .bk-rate-name::before,
.bk-kelly-mode[aria-pressed="true"] .bk-kelly-mode-name::before,
.bk-source[aria-pressed="true"] .bk-source-name::before,
.bk-spread-opt[aria-pressed="true"] .bk-spread-opt-name::before,
.bk-pen-opt[aria-pressed="true"] .bk-pen-opt-name::before { content: '● '; font-size: 9px; color: #8ff0b8; }
/* 结果卡：一个大数 + 一句人话 + 一个「基于什么算的」 */
.bk-card { margin-top: 12px; padding: 14px; border: 1px solid #26382f; border-radius: 12px;
  background: #16211c; }
.bk-metric-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: #8fa397; }
.bk-metric-label + .bk-metric-value { margin-top: 2px; }
.bk-metric-value { font-size: 26px; font-weight: 700; line-height: 1.2; color: #e8ece8;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.bk-answer-money { color: #d8c469; font-size: 32px; }
.bk-answer-units { margin-top: 2px; font-size: 13px; color: #a9bdb1; font-variant-numeric: tabular-nums; }
.bk-answer-plain, .bk-ror-plain { margin: 8px 0 0; font-size: 13px; line-height: 1.55; color: #d5ded8; }
.bk-ror-value { color: #e08a7c; }
.bk-n0 { font-size: 20px; }
.bk-hourly { font-size: 20px; color: #6fd598; }
.bk-earn-card .bk-metric-label { margin-top: 10px; }
.bk-earn-card .bk-metric-label:first-child { margin-top: 0; }
.bk-sub { margin: 6px 0 0; font-size: 11px; line-height: 1.55; color: #8fa397; }
.bk-earn-warn { margin: 8px 0 0; font-size: 11px; line-height: 1.55; color: #d8c469; }
.bk-fullkelly { color: #d8c469; }
.bk-noedge { margin: 0; font-size: 14px; line-height: 1.6; color: #e08a7c; }
.bk-not-cvcx { margin: 12px 0 0; padding: 10px; border: 1px solid #4a4326; border-radius: 10px;
  background: #1b1a10; font-size: 11px; line-height: 1.55; color: #d8c469; }
/* B3：假设面板。⚠ 默认收起 —— 展开后是本屏最高的状态，矮屏靠滚动，⛔ 不许挤掉上面的数字 */
.bk-why { margin-top: 10px; border-top: 1px solid #26382f; padding-top: 8px; }
.bk-why-sum { cursor: pointer; font-size: 12px; color: #6fd598; }
.bk-why-row { margin-top: 6px; font-size: 11px; line-height: 1.55; color: #a9bdb1;
  overflow-wrap: anywhere; }
.bk-why-row[data-assume="source"] { color: #7d8c83; }
/* ---- V2 行程规划：区间是头条，点估计在假设面板里 ---- */
.trip-range { color: #d8c469; font-size: 22px; }
.trip-ruin { color: #e08a7c; }
.trip-need { color: #6fd598; }
.trip-ruin-plain { margin: 8px 0 0; font-size: 13px; line-height: 1.55; color: #d5ded8; }
.trip-hands { margin-top: 10px; }
.bk-why-row.trip-expected { color: #8fa397; }
/* ---- A5 意见反馈：站内一页式表单 + 就地纠错 ---- */
/* 常驻入口：底部一条低调的按钮，不抢主路（⛔ 也不是 .menu-btn —— 别混进首页那批工具） */
.feedback-entry { margin-top: 14px; min-height: 44px; border: 1px dashed #26382f;
  border-radius: 10px; background: transparent; color: #8fa397; font-size: 13px; }
/* 解释卡里的就地纠错：⚠ 故意不起眼（次要出口），但 44px 可点，⛔ 不做成一行灰色小字 */
.fb-report { display: block; width: 100%; margin-top: 10px; min-height: 40px;
  border: 1px solid #3a4a41; border-radius: 8px; background: transparent;
  color: #8fa397; font-size: 12px; }
.fb-lead { margin: 0 0 12px; font-size: 14px; line-height: 1.6; color: #d5ded8; }
.fb-hand { padding: 10px 12px; border: 1px solid #4a4326; border-radius: 10px;
  background: #1b1a10; }
.fb-hand-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: #8fa397; }
.fb-hand-line { margin-top: 4px; font-size: 13px; line-height: 1.5; color: #d8c469;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.fb-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fb-cat { min-height: 44px; padding: 6px 8px; border: 1px solid #26382f; border-radius: 10px;
  background: #16211c; color: #e8ece8; font-size: 13px; line-height: 1.3; }
.fb-cat[aria-pressed="true"] { background: #1d5c3f; border-color: #6fd598; }
/* 形状+颜色双编码（同规则屏那批 chip） */
.fb-cat[aria-pressed="true"]::before { content: '● '; font-size: 9px; color: #8ff0b8; }
.fb-cat[aria-pressed="false"]::before { content: '○ '; font-size: 9px; color: #7d8c83; }
.fb-label { display: block; margin: 12px 0 4px; font-size: 12px; color: #8fa397; }
.fb-text, .fb-email { width: 100%; padding: 10px; border: 1px solid #26382f; border-radius: 10px;
  background: #0f1714; color: #e8ece8; font-size: 15px; font-family: inherit; line-height: 1.5; }
.fb-text { resize: vertical; min-height: 92px; }
.fb-email { min-height: 44px; }
.fb-note { margin: 6px 0 0; font-size: 11px; line-height: 1.55; color: #8fa397; }
.fb-diag { margin-top: 14px; border: 1px solid #26382f; border-radius: 10px; padding: 10px 12px;
  background: #16211c; }
.fb-diag-sum { cursor: pointer; font-size: 12px; color: #6fd598; }
.fb-diag-row { margin-top: 6px; font-size: 11px; line-height: 1.55; color: #a9bdb1;
  overflow-wrap: anywhere; }
.fb-diag-promise { margin: 8px 0 0; font-size: 11px; line-height: 1.55; color: #d8c469; }
.fb-submit { margin-top: 14px; min-height: 50px; border: 0; border-radius: 10px;
  background: #1d5c3f; color: #fff; font-size: 17px; font-weight: 600; }
.fb-submit:disabled { opacity: 0.5; }
.fb-status { margin: 8px 0 0; font-size: 13px; line-height: 1.55; color: #d8c469; min-height: 18px; }
.fb-done { margin-top: 8px; padding: 18px 14px; border: 1px solid #2f7d52; border-radius: 12px;
  background: #16211c; text-align: center; }
.fb-done-mark { font-size: 34px; color: #6fd598; line-height: 1; }
.fb-sent { margin: 10px 0 0; font-size: 16px; line-height: 1.5; color: #e8ece8; }
.fb-queued { margin: 10px 0 0; font-size: 12px; line-height: 1.6; color: #a9bdb1; }
.fb-mailto { display: inline-block; margin-top: 12px; padding: 12px 16px; border-radius: 10px;
  border: 1px solid #26382f; background: #0f1714; color: #6fd598; font-size: 14px;
  text-decoration: none; }
/* ---- A6 通知权限的说明卡：先说清用途再问系统（⛔ 不在启动时问） ---- */
.notify-optin { margin-top: 12px; padding: 14px; border: 1px solid #4a4326; border-radius: 12px;
  background: #1b1a10; }
.notify-optin-title { font-size: 15px; font-weight: 600; color: #d8c469; line-height: 1.4; }
.notify-optin-body { margin: 8px 0 0; font-size: 12px; line-height: 1.6; color: #d5ded8; }
.notify-optin-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.notify-yes { min-height: 46px; border: 0; border-radius: 10px; background: #1d5c3f; color: #fff;
  font-size: 15px; font-weight: 600; }
.notify-no { min-height: 46px; border: 1px solid #26382f; border-radius: 10px; background: transparent;
  color: #a9bdb1; font-size: 15px; }
.notify-note { margin: 12px 0 0; padding: 10px 12px; border: 1px solid #26382f; border-radius: 10px;
  background: #16211c; font-size: 12px; line-height: 1.6; color: #a9bdb1; }

/* ---- 渲染中途抛错时的安全网：⛔ 不许留下一屏走不出去的 DOM ---- */
.screen-crash { margin-top: 12px; padding: 16px 14px; border: 1px solid #4a4326; border-radius: 12px;
  background: #1b1a10; text-align: center; }
.screen-crash-mark { font-size: 30px; line-height: 1; color: #d8c469; }
.screen-crash-text { margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: #d5ded8; }