/**
 * public/css/views.css
 * 视图层样式：通用骨架 / 按钮 / 表单 / 门控 / 用户 / 引导 / 主练习台 / 练习壳 /
 * 拼音区 / 虚拟键盘 / 提示条 / 统计面板 / 结果卡 / 弹层 / 占位视图。
 *
 * 约定：
 *   · 只消费 tokens.css 的 var(--x)，不得硬编码色值（无 #hex）。
 *   · 组件基础规则在前，媒体查询一律置于文件末尾。
 *   · 并列容器一律 minmax(0, 1fr)，避免子项撑破网格。
 */

/* ============================================================ 通用视图骨架 */
.view {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
}

.view-title {
  margin: 0;
  color: var(--ink);
  letter-spacing: 0.04em;
}

.section-title {
  margin: var(--sp-2) 0 0;
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line);
  color: var(--daiqing);
  letter-spacing: 0.06em;
}

/* ============================================================ 按钮 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background-color: var(--paper-2);
  color: var(--ink);
  font-size: var(--fs-2);
  line-height: 1.5;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn:hover:not([disabled]) {
  background-color: var(--paper-3);
  border-color: var(--daiqing);
}

.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn-primary {
  background-color: var(--daiqing);
  border-color: var(--daiqing-2);
  color: var(--paper);
  font-weight: 700;
}

.btn-primary:hover:not([disabled]) {
  background-color: var(--daiqing-2);
  border-color: var(--daiqing-2);
  color: var(--paper);
}

.btn-danger {
  background-color: var(--zhu);
  border-color: var(--zhu-2);
  color: var(--paper);
}

.btn-danger:hover:not([disabled]) {
  background-color: var(--zhu-2);
  border-color: var(--zhu-2);
  color: var(--paper);
}

/* 链接型按钮（顶栏导航）：覆盖 base.css 的 a:hover 下划线，保持按钮观感 */
a.btn {
  border-bottom-width: 1px;
  border-bottom-color: var(--line-strong);
  text-decoration: none;
}

a.btn:hover {
  border-bottom-color: var(--daiqing);
  color: var(--ink);
}

/* ============================================================ 表单 */
.form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.form .row {
  align-items: stretch;
}

.input,
.select {
  flex: 1 1 auto;
  min-width: 0;
}

.select {
  padding: var(--sp-2) var(--sp-3);
  background-color: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
}

.form-error {
  margin: 0;
  min-height: 1.4em;
  color: var(--err);
  font-size: var(--fs-1);
}

/* ============================================================ 门控页 */
.gate-view {
  align-items: center;
  justify-content: center;
  padding-top: var(--sp-7);
}

.gate-card {
  width: 100%;
  max-width: 520px;
  align-items: stretch;
}

/* ============================================================ 用户页 */
.user-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: var(--sp-4);
}

.user-card {
  gap: var(--sp-2);
}

.user-name {
  font-family: var(--font-serif);
  font-size: var(--fs-3);
  font-weight: 700;
  color: var(--ink);
}

.user-meta {
  font-size: var(--fs-1);
}

/* ============================================================ 引导页 */
.step-bar {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.step-dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-2);
  background-color: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  text-align: center;
  min-width: 0;
}

.step-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-pill);
  background-color: var(--paper-3);
  border: 1px solid var(--line-strong);
  color: var(--ink-2);
  font-weight: 700;
}

.step-label {
  font-size: var(--fs-0);
  color: var(--ink-3);
  line-height: 1.4;
}

.step-dot.is-current {
  border-color: var(--daiqing);
  background-color: var(--daiqing-soft);
}

.step-dot.is-current .step-index {
  background-color: var(--daiqing);
  border-color: var(--daiqing-2);
  color: var(--paper);
}

.step-dot.is-current .step-label {
  color: var(--daiqing-2);
  font-weight: 700;
}

.step-dot.is-done {
  border-color: var(--ok);
}

.step-dot.is-done .step-index {
  background-color: var(--ok);
  border-color: var(--ok);
  color: var(--paper);
}

.onboarding-body {
  padding: var(--sp-4);
  background-color: var(--paper-2);
  border-left: 3px solid var(--daiqing);
  border-radius: var(--radius-sm);
  color: var(--ink-2);
}

.onboarding-practice {
  gap: var(--sp-3);
}

/* ============================================================ 主练习台 */
.entry-card {
  align-items: flex-start;
  text-align: left;
  gap: var(--sp-2);
  padding: var(--sp-5);
  background-color: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}

.entry-card:hover:not([disabled]) {
  border-color: var(--daiqing);
  background-color: var(--paper-3);
}

.entry-card.is-primary {
  border-color: var(--daiqing);
}

.entry-kids {
  border-color: var(--jin);
}

.entry-title {
  font-family: var(--font-serif);
  font-size: var(--fs-3);
  font-weight: 700;
  color: var(--daiqing-2);
}

.entry-desc {
  font-size: var(--fs-1);
  line-height: 1.6;
}

/* ============================================================ 练习壳 */
.practice-top {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  min-width: 0;
}

.practice-top .view-title {
  margin: 0;
}

.timer {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  padding: var(--sp-1) var(--sp-3);
  background-color: var(--paper-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  color: var(--ink-2);
}

.practice-view .practice-stage {
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: var(--sp-1) 0;
  min-height: 30vh;
  font-size: var(--fs-3);
  line-height: 1.9;
  letter-spacing: 0.02em;
}

.extended-hint {
  font-size: var(--fs-1);
}

.practice-controls {
  gap: var(--sp-2);
}

.vk-host {
  min-width: 0;
}

/* ---------- 目标字符 ---------- */
.tchar {
  display: inline-block;
  min-width: 0.62em;
  border-radius: var(--radius-xs);
  color: var(--ink-3);
  transition: color 0.1s ease, background-color 0.1s ease;
}

.tchar.is-done {
  color: var(--ok);
}

.tchar.is-current {
  background-color: var(--daiqing-soft);
  color: var(--daiqing-2);
  box-shadow: inset 0 -2px 0 0 var(--daiqing);
}

.tchar.is-wrong {
  background-color: var(--err);
  color: var(--paper);
}

/* ============================================================ 拼音区 */
.pinyin-zone {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding: var(--sp-4);
  background-color: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.pinyin-display {
  font-family: var(--font-serif);
  font-size: var(--fs-6);
  line-height: 1.2;
  color: var(--zhu);
}

.pinyin-parts {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.part {
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-1);
}

.part.initial {
  background-color: var(--daiqing-soft);
  color: var(--daiqing-2);
  border: 1px solid var(--daiqing);
}

.part.final {
  background-color: var(--paper-3);
  color: var(--ink-2);
  border: 1px solid var(--line-strong);
}

.part.full {
  border: 1px dashed var(--line-strong);
}

.pinyin-candidates {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  font-size: var(--fs-2);
}

.cand {
  padding: var(--sp-1) var(--sp-3);
  background-color: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink-2);
}

.cand.is-target {
  border-color: var(--zhu);
  color: var(--zhu);
  font-weight: 700;
}

/* ============================================================ 虚拟键盘 */
.virtual-keyboard {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3);
  background-color: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow-x: auto;
}

.vk-board {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 620px;
}

.vk-row {
  display: flex;
  gap: var(--sp-1);
  min-width: 0;
}

.vk-key {
  flex: 1 1 2.2rem;
  min-width: 0;
  padding: var(--sp-2) 0;
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  line-height: 1;
  text-align: center;
  background-color: var(--paper);
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: var(--radius-xs);
  color: var(--ink-2);
}

.vk-key:hover {
  background-color: var(--paper-3);
  border-color: var(--daiqing);
}

.vk-key[data-finger] {
  border-top: 3px solid var(--line-strong);
}

.vk-key.is-pressed {
  transform: translateY(1px);
  background-color: var(--paper-3);
}

.vk-key.is-next {
  background-color: var(--daiqing);
  border-color: var(--daiqing-2);
  color: var(--paper);
  box-shadow: 0 0 0 2px var(--focus);
}

.vk-key.is-correct {
  background-color: var(--ok);
  border-color: var(--ok);
  color: var(--paper);
}

.vk-key.is-wrong {
  background-color: var(--err);
  border-color: var(--err);
  color: var(--paper);
}

.vk-extra {
  display: flex;
  gap: var(--sp-1);
  flex-wrap: wrap;
}

.vk-key-extra {
  flex: 0 0 auto;
  min-width: 2.4rem;
  padding: var(--sp-2);
  font-size: var(--fs-3);
  background-color: var(--paper-3);
  border-color: var(--jin);
}

/* ============================================================ 键位提示条（内部元素） */
#key-hint-bar .hint-key {
  font-family: var(--font-mono);
  font-size: var(--fs-3);
  font-weight: 700;
  padding: var(--sp-1) var(--sp-4);
  background-color: var(--paper);
  border: 1px solid var(--line-strong);
  border-bottom-width: 3px;
  border-radius: var(--radius-sm);
  color: var(--daiqing-2);
}

#key-hint-bar .hint-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  background-color: var(--line-strong);
}

#key-hint-bar .hint-finger {
  font-weight: 700;
  color: var(--ink);
}

#key-hint-bar .hint-tip {
  font-size: var(--fs-1);
}

/* ============================================================ 统计面板 */
.stats-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background-color: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.stat-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  min-width: 0;
  text-align: center;
}

.stat-value {
  font-family: var(--font-mono);
  font-size: var(--fs-4);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--daiqing);
  line-height: 1.2;
}

.stat-label {
  font-size: var(--fs-0);
  color: var(--ink-3);
  letter-spacing: 0.04em;
}

/* ============================================================ 结果卡与建议 */
.result-host {
  min-width: 0;
}

.result-card {
  gap: var(--sp-4);
}

.result-card h3 {
  margin: 0;
}

.result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: var(--sp-3);
}

.result-grid .stat-value {
  color: var(--zhu);
}

.advice-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.advice-list h4 {
  margin: 0;
}

.advice-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-1);
  width: 100%;
  padding: var(--sp-3);
  text-align: left;
  background-color: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--jin);
  border-radius: var(--radius-sm);
}

.advice-item:hover {
  border-color: var(--daiqing);
  border-left-color: var(--jin);
  background-color: var(--paper-3);
}

.advice-title {
  font-weight: 700;
  color: var(--daiqing-2);
}

.advice-reason {
  font-size: var(--fs-1);
  line-height: 1.6;
}

/* ============================================================ 弹层 */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
  background-color: var(--ink);
  background-color: color-mix(in srgb, var(--ink) 55%, transparent);
}

.modal-box {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  width: 100%;
  max-width: 480px;
  padding: var(--sp-5);
  background-color: var(--paper-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
}

.modal-title {
  margin: 0;
}

.modal-body {
  min-width: 0;
}

.modal-text {
  margin: 0;
  color: var(--ink-2);
}

.modal-input {
  width: 100%;
  margin-top: var(--sp-2);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
}

/* ============================================================ 占位视图（stats / help / settings） */
.placeholder-card {
  align-items: center;
  text-align: center;
  padding: var(--sp-7);
}

/* ============================================================ 数据看板（#/stats） */
.stats-toolbar {
  padding: var(--sp-2) var(--sp-3);
  background-color: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.range-select {
  flex: 0 0 auto;
  min-width: 8rem;
}

.streak-line {
  white-space: nowrap;
}

.stats-status {
  min-height: 1.4em;
  margin: 0;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: var(--sp-3);
  padding: var(--sp-4);
  background-color: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

/* ---------- 成绩曲线 ---------- */
.chart-card {
  min-width: 0;
}

.series-chart {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  align-items: end;
  gap: var(--sp-3);
  min-height: 220px;
  overflow-x: auto;
}

.series-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  min-width: 0;
}

.series-value {
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  font-weight: 700;
  color: var(--daiqing-2);
}

.series-track {
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 150px;
  background-color: var(--paper-3);
  border-radius: var(--radius-xs);
  overflow: hidden;
}

.series-bar {
  width: 100%;
  background-color: var(--daiqing);
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  transition: height 0.2s ease;
}

.series-meta,
.series-time {
  font-size: var(--fs-0);
  white-space: nowrap;
}

/* ---------- 错误键位直方图 ---------- */
.histogram {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.hist-row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) 3rem;
  align-items: center;
  gap: var(--sp-3);
}

.hist-label {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--ink);
  text-align: right;
}

.hist-track {
  height: 16px;
  background-color: var(--paper-3);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.hist-bar {
  height: 100%;
  background-color: var(--zhu);
  border-radius: var(--radius-pill);
  transition: width 0.2s ease;
}

.hist-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  text-align: right;
}

/* ---------- 错误字符统计 ---------- */
.char-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.char-chip {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3);
  background-color: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}

.char-chip-char {
  font-family: var(--font-mono);
  font-size: var(--fs-3);
  font-weight: 700;
  color: var(--ink);
}

.char-chip-count {
  font-size: var(--fs-0);
  color: var(--ink-3);
}

/* ---------- 建议（可忽略 / 可直达） ---------- */
.advice-panel {
  min-width: 0;
}

.advice-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-2);
}

.advice-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-1);
  width: 100%;
  padding: var(--sp-3);
  text-align: left;
  background-color: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--jin);
  border-radius: var(--radius-sm);
}

.advice-main:hover {
  background-color: var(--paper-3);
  border-color: var(--daiqing);
  border-left-color: var(--jin);
}

.advice-actions {
  display: flex;
  gap: var(--sp-2);
}

/* ---------- 空态与小组件 ---------- */
.empty-hint {
  margin: 0;
  padding: var(--sp-3) 0;
}

.btn-sm {
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--fs-1);
}

.switch {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--daiqing);
}

/* ============================================================ 帮助（#/help） */
.help-tip-title {
  margin: 0;
  color: var(--daiqing-2);
}

.table-card {
  overflow-x: auto;
}

.shortcut-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-2);
}

.shortcut-table th,
.shortcut-table td {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.shortcut-table thead th {
  color: var(--ink-3);
  font-size: var(--fs-1);
  letter-spacing: 0.04em;
  border-bottom: 2px solid var(--line-strong);
  white-space: nowrap;
}

.shortcut-table .scope-group th {
  padding-top: var(--sp-4);
  background-color: var(--paper-3);
  color: var(--daiqing-2);
  font-weight: 700;
}

.shortcut-keys kbd {
  margin: 0 var(--sp-1) var(--sp-1) 0;
  white-space: nowrap;
}

.finger-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: var(--sp-3);
}

.finger-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3);
  background-color: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  min-width: 0;
}

.finger-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.finger-dot {
  width: 14px;
  height: 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
}

.finger-name {
  font-weight: 700;
  color: var(--ink);
}

.finger-keys {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
}

.finger-keys kbd {
  font-size: var(--fs-0);
}

/* ============================================================ 设置（#/settings） */
.setting-card {
  gap: var(--sp-3);
}

.setting-title {
  margin: 0;
}

.setting-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--line);
}

.setting-label {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
}

.setting-name {
  font-weight: 700;
  color: var(--ink);
}

.setting-desc {
  font-size: var(--fs-1);
  line-height: 1.6;
}

.setting-control {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.theme-options {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.theme-option {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background-color: var(--paper);
  cursor: pointer;
}

.user-manage {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.user-manage-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  background-color: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.user-manage-name {
  font-weight: 700;
}

.badge-current {
  padding: 0 var(--sp-2);
  font-size: var(--fs-0);
  color: var(--paper);
  background-color: var(--ok);
  border-radius: var(--radius-pill);
}

.danger-zone {
  border-color: var(--zhu);
}

/* ============================================================ 媒体查询（置于末尾） */
@media (max-width: 720px) {
  .step-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .series-chart {
    grid-auto-columns: 3.2rem;
    min-height: 180px;
  }

  .series-track {
    height: 110px;
  }

  .setting-row,
  .user-manage-row,
  .advice-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .hist-row {
    grid-template-columns: 3.2rem minmax(0, 1fr) 2.4rem;
    gap: var(--sp-2);
  }

  .theme-options {
    gap: var(--sp-2);
  }

  .practice-view .practice-stage {
    font-size: var(--fs-2);
    min-height: 22vh;
  }

  .pinyin-display {
    font-size: var(--fs-5);
  }

  .user-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .modal-actions {
    flex-direction: column-reverse;
  }

  .modal-actions .btn {
    width: 100%;
  }
}

/* ============================================================
   儿童区虚拟键盘放大（仅在 html[data-kid-scope="on"] 下生效 → 成人区零变化）

   ★ 尺寸来源：--vk-key-size（junior 52px / senior 44px）与 --vk-gap（8px/6px），
     定义在 tokens.css 并由 html[data-age-band] 覆盖两档差异。
   ★ min-width 的推导（按 virtual-keyboard.js 的 LAYOUT 实际最宽行计算，不写死）：
     第 1 行最宽：` 1 2 3 4 5 6 7 8 9 0 - = Backspace = 14 键；
     第 2 行 13 键（Tab…\），第 3 行 13 键（Caps…Enter），第 4 行 12 键，第 5 行 1 键。
     最宽行 = 第 1 行：14 键 × --vk-key-size + 13 间隙 × --vk-gap。
       junior: 14×52 + 13×8 = 728+104 = 832px
       senior: 14×44 + 13×6 = 616+78 = 694px
     用 calc() 随档位自动推导，避免手写常量与 LAYOUT 漂移。
   ★ 窄屏溢出：.virtual-keyboard 已有 overflow-x:auto（既有），不换行 ——
     换行会破坏 QWERTY 的空间记忆（与「按错更少」的目标直接冲突）。
   ============================================================ */
html[data-kid-scope="on"] .vk-key {
  flex: 0 0 auto;
  min-width: var(--vk-key-size);
  height: var(--vk-key-size);
  padding: 0;
  font-size: var(--fs-kid-2);
  font-weight: 700;
  gap: var(--vk-gap);
}

html[data-kid-scope="on"] .vk-row {
  gap: var(--vk-gap);
}

html[data-kid-scope="on"] .vk-board {
  /* 14 键 × 键宽 + 13 间隙 × 间距（LAYOUT 第 1 行，见上方推导） */
  min-width: calc(14 * var(--vk-key-size) + 13 * var(--vk-gap));
}