:root {
  --bg: #eef2f8;
  --panel: #ffffff;
  --ink: #1b2430;
  --muted: #64748b;
  --line: #e2e8f0;
  /* 强调色改为中性深墨色，避免与键盘的粉橙黄绿紫青打架 */
  --accent: #1b2430;
  --ok: #16a34a;
  --bad: #dc2626;
  --cur: #ffe08a;
  --shadow: 0 1px 2px rgba(15,23,42,.06), 0 10px 26px rgba(15,23,42,.06);
  --radius: 14px;
  --maxw: 1560px;   /* 加宽：键盘是主角，尽量铺满 */
  --gut: 24px;      /* 左右安全边距 */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
}

/* ---------- 极简：无页头，直接从标签栏开始 ---------- */
.tabs {
  position: sticky; top: 0; z-index: 20;
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 12px max(var(--gut), calc((100% - var(--maxw)) / 2 + var(--gut)));
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.tab {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  padding: 8px 16px; border-radius: 999px; cursor: pointer;
  font-size: 14.5px; font-weight: 600; transition: .15s; white-space: nowrap;
}
/* 选中态用键盘上特殊键（Tab / Caps / Shift）的灰白，不再用黑色实底 */
.tab:hover { color: var(--ink); border-color: #c3cfdd; }
.tab.active {
  background: #e7ecf3; border-color: #c3cfdd; color: var(--ink);
  box-shadow: inset 0 -2px 0 #9fb0c4;
}
/* ---- 面板标签上键盘同款马卡龙色 ----
   色板与下面的指法键完全同源（一个手指一个颜色），标签取浅底 + 深字。
   前九个标签一一对应九个指法色；符号面板动的是整块主键盘（九色齐上），
   不归任何单根手指，所以另取一个不与任何指法色撞车的青蓝作代表色。 */
.tabs [data-tab="practice"] { background:#ffe0e0; border-color:#f5bcbc; color:#8f2b2b; }
.tabs [data-tab="chinese"]  { background:#ffe9cc; border-color:#f2d3a0; color:#8a5210; }
.tabs [data-tab="pinyin"]   { background:#fdf6c9; border-color:#e8db96; color:#7a6008; }
.tabs [data-tab="wubi"]     { background:#ddf5d6; border-color:#b4e0a8; color:#276b22; }
.tabs [data-tab="digits"]   { background:#d6e8ff; border-color:#aecdf5; color:#1c4a86; }
.tabs [data-tab="test"]     { background:#dedbff; border-color:#c3bcf5; color:#403696; }
.tabs [data-tab="game"]     { background:#ffd9ef; border-color:#f5b4d9; color:#8d2461; }
.tabs [data-tab="custom"]   { background:#f1dafb; border-color:#dfbcee; color:#6f2c93; }
.tabs [data-tab="progress"] { background:#d3f4f1; border-color:#a8e0d9; color:#12625c; }
.tabs [data-tab="symbol"]   { background:#d7f0fb; border-color:#a8dbf1; color:#0d5877; }
/* 悬停只轻微加深，不换色 —— 否则 hover 的灰白会把上面的颜色盖掉 */
.tabs [data-tab]:hover { filter: brightness(.97) saturate(1.12); }
/* 选中态：底色不变，底部内阴影用该色的 ring 色，一眼看出停在哪个面板 */
.tabs [data-tab="practice"].active { box-shadow: inset 0 -2px 0 #ff7676; }
.tabs [data-tab="chinese"].active  { box-shadow: inset 0 -2px 0 #f5a623; }
.tabs [data-tab="pinyin"].active   { box-shadow: inset 0 -2px 0 #dfc01a; }
.tabs [data-tab="wubi"].active     { box-shadow: inset 0 -2px 0 #4fbe42; }
.tabs [data-tab="digits"].active   { box-shadow: inset 0 -2px 0 #5595ee; }
.tabs [data-tab="test"].active     { box-shadow: inset 0 -2px 0 #7f72ee; }
.tabs [data-tab="game"].active     { box-shadow: inset 0 -2px 0 #ea63ae; }
.tabs [data-tab="custom"].active   { box-shadow: inset 0 -2px 0 #b76cdb; }
.tabs [data-tab="progress"].active { box-shadow: inset 0 -2px 0 #35bcb0; }
.tabs [data-tab="symbol"].active   { box-shadow: inset 0 -2px 0 #2f9fd0; }

main { max-width: var(--maxw); margin: 16px auto; padding: 0 var(--gut) 12px; }
.panel { display: none; }
.panel.active { display: block; animation: fade .22s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px);} to {opacity:1; transform:none;} }

.hint {
  color: var(--muted); margin: 0 0 14px; font-size: 13.5px;
  background: var(--panel); border: 1px solid var(--line); border-left: 3px solid #cbd5e1;
  border-radius: 10px; padding: 9px 14px;
}
.hint strong { color: var(--ink); }
/* 提醒态：中文练习里输入法还停在英文状态时，说明行整条转成琥珀色 */
.hint.warn {
  color: #92400e; background: #fff8ed;
  border-color: #fbd9a5; border-left-color: #f59e0b;
}

/* ---------- Stat cards（自适应列数） ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; }
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 14px; text-align: center; box-shadow: var(--shadow);
}
.card .num { display: block; font-size: 24px; font-weight: 800; color: var(--ink); line-height: 1.15; }
.card .num.small { font-size: 15px; color: var(--ink); padding-top: 7px; }
.card .lbl { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }
.next-card .num.small { color: var(--ink); font-weight: 800; }

/* ---------- Passage（压缩上下留白） ---------- */
.passage {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 22px; font-size: 22px; line-height: 1.95; letter-spacing: .6px;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  box-shadow: var(--shadow); white-space: pre-wrap; word-break: break-word;
  margin-bottom: 14px; min-height: 104px;
}
.passage-zh { font-family: "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 24px; letter-spacing: 2px; }
.passage .ch { color: #9aa6b6; }
.passage .ok { color: var(--ok); }
.passage .bad { color: var(--bad); background: #ffe2e2; border-radius: 3px; }
.passage .cur { background: var(--cur); border-radius: 4px; box-shadow: 0 0 0 2px var(--cur); color: var(--ink); }

/* ---------- 五笔：每字一格，上排汉字、下排编码 ---------- */
.wubi-passage {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 12px;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  white-space: normal; font-size: 20px; letter-spacing: 0;
  padding: 16px 20px; min-height: 116px;
}
.wubi-cell {
  display: inline-flex; flex-direction: column; align-items: center;
  padding: 4px 5px 3px; border-radius: 8px; transition: background .12s;
}
.wubi-cell .wb-ch { font-size: 25px; font-weight: 600; color: #99a5b4; line-height: 1.25; }
.wubi-cell .wb-code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 15px; letter-spacing: 2px; line-height: 1.6; margin-top: 3px; white-space: nowrap;
}
.wubi-cell.wb-active { background: #eef2f7; box-shadow: inset 0 -2px 0 #c3cfdd; }
.wubi-cell.wb-active .wb-ch { color: var(--ink); }
.wubi-cell.wb-done .wb-ch { color: #c3cbd6; }
/* 编码逐字母的判定配色（覆盖通用 .passage 的字号与光晕，改为单字母高亮）
   待输入的编码要比汉字更醒目——它才是用户要照着敲的内容 */
.wubi-passage .ch { color: #64748b; }
.wubi-passage .cur { background: var(--cur); color: var(--ink); border-radius: 3px; box-shadow: none; }
.wubi-passage .bad { border-radius: 3px; }

/* ---------- 拼音：上排拼音（照着敲）、下排汉字（对照看） ---------- */
.py-passage {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 15px;
  white-space: normal; letter-spacing: 0; padding: 16px 20px; min-height: 116px;
}
/* 一个词 = 一个不可拆的单元：整体换行，不会被拆到两行去 */
.py-word { display: inline-flex; align-items: flex-start; flex: 0 0 auto; }
.py-cell {
  display: inline-flex; flex-direction: column; align-items: center;
  flex: 0 0 auto; border-radius: 6px;
}
.py-cell .py-syl {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 21px; letter-spacing: .5px; line-height: 1.5; white-space: nowrap;
}
.py-cell .py-hz {
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 17px; line-height: 1.5; color: #7b8798; margin-top: 1px; white-space: nowrap;
}
.py-cell.py-gap .cur { box-shadow: 0 0 0 2px var(--cur); }

/* ---------- Virtual keyboard（键位放大：键高 74px / 字号 18px） ---------- */
.kbd-wrap {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px 14px; box-shadow: var(--shadow); margin-bottom: 14px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
/* 网格布局：宽屏「主键盘 | 小键盘」；容不下时主键盘独占一行，小键盘靠右，
   指法图例与要领填在它左边（不留大片空白） */
.kbd-flex {
  user-select: none;
  display: grid; gap: 14px;
  grid-template-columns: 1fr auto;
  grid-template-areas: "main numpad" "aside aside";
  align-items: start;
}
.kbd-main { grid-area: main; min-width: 840px; }
/* 极简：小键盘不做面板/标题，仅用一条细分隔线与主键盘区分 */
.numpad { grid-area: numpad; width: 300px; padding-left: 14px; border-left: 1px dashed var(--line); }
.kbd-aside { grid-area: aside; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pad-keys { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 62px; gap: 9px; }
/* height 交给网格行高决定：跨行/跨列的 + Enter 0 才能撑满自己的格子 */
.numpad .key { height: auto; font-size: 17px; background: #fff; }
.numpad .key.special { font-size: 12.5px; letter-spacing: -.2px; }
.key.spacer { visibility: hidden; border: none; background: none; }
.kbd-row { display: flex; gap: 10px; }
.kbd-row + .kbd-row { margin-top: 10px; }
.key {
  flex: 1 1 0; min-width: 0; height: 74px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 11px; font-size: 18px; font-weight: 700;
  color: #334155; background: #eef2f7;
  border: 1px solid rgba(15,23,42,.06);
  border-bottom: 3px solid rgba(15,23,42,.16);
  transition: transform .05s, box-shadow .1s, background .1s;
  position: relative;
}
.key.special { color: var(--muted); font-size: 13.5px; font-weight: 600; background: #e7ecf3; }
/* 双符号键（如 1/! ）：上档符号小字在上、基准字符大字在下，与真实键帽一致 */
.key.dual { flex-direction: column; gap: 1px; line-height: 1.05; }
.key .kb-up { font-size: 12px; font-weight: 600; opacity: .58; }
.key .kb-dn { font-size: 16px; font-weight: 700; }
/* 高亮沿用「该键自己指法色」的加深版，避免纯品牌蓝与粉橙黄绿的键盘底色打架
   --f-bg 底色 / --f-next 待敲高亮 / --f-deep 按下或高亮时的文字色 / --f-ring 光晕环 */
.key { --f-bg: #eef2f7; --f-next: #cbd8e8; --f-deep: #3f4d63; --f-ring: #97a6b8; }
.key.next {
  background: var(--f-next) !important;
  color: var(--f-deep) !important;
  transform: translateY(1px) scale(1.08);
  z-index: 3;
  animation: kpulse 1.1s ease-in-out infinite;
}
@keyframes kpulse {
  0%, 100% { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--f-ring), 0 8px 16px rgba(15,23,42,.14); }
  50%      { box-shadow: 0 0 0 3px #fff, 0 0 0 9px var(--f-ring), 0 10px 22px rgba(15,23,42,.20); }
}
.key.down {
  background: var(--f-deep) !important;
  color: #fff !important;
  transform: translateY(2px) scale(.97);
}
/* 指法配色（同时定义高亮用的加深色） */
.key.f-lp { background: var(--f-bg); --f-bg: #ffe0e0; --f-next: #ff9f9f; --f-deep: #8f2b2b; --f-ring: #ff7676; }
.key.f-lr { background: var(--f-bg); --f-bg: #ffe9cc; --f-next: #ffc46b; --f-deep: #8a5210; --f-ring: #f5a623; }
.key.f-lm { background: var(--f-bg); --f-bg: #fdf6c9; --f-next: #f4df6a; --f-deep: #7a6008; --f-ring: #dfc01a; }
.key.f-li { background: var(--f-bg); --f-bg: #ddf5d6; --f-next: #a3e492; --f-deep: #276b22; --f-ring: #4fbe42; }
.key.f-th { background: var(--f-bg); --f-bg: #d6e8ff; --f-next: #9cc5ff; --f-deep: #1c4a86; --f-ring: #5595ee; }
.key.f-ri { background: var(--f-bg); --f-bg: #dedbff; --f-next: #b0a9ff; --f-deep: #403696; --f-ring: #7f72ee; }
.key.f-rm { background: var(--f-bg); --f-bg: #f1dafb; --f-next: #ddaef6; --f-deep: #6f2c93; --f-ring: #b76cdb; }
.key.f-rr { background: var(--f-bg); --f-bg: #ffd9ef; --f-next: #ffa2d7; --f-deep: #8d2461; --f-ring: #ea63ae; }
.key.f-rp { background: var(--f-bg); --f-bg: #d3f4f1; --f-next: #98e4dc; --f-deep: #12625c; --f-ring: #35bcb0; }

.legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 11px; padding-top: 10px; border-top: 1px dashed var(--line); }
.legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.kbd-tips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: 12.5px; color: var(--muted); }
.kbd-tips b { font-size: 12.5px; color: var(--ink); }
.kbd-tips span { position: relative; padding-left: 12px; }
.kbd-tips span::before { content: "·"; position: absolute; left: 3px; color: #94a3b8; }

/* ---------- Input & buttons ---------- */
.typing-input {
  width: 100%; min-height: 76px; resize: vertical;
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
  font-size: 16px; font-family: inherit; outline: none; background: var(--panel);
  box-shadow: var(--shadow);
}
.typing-input:focus { border-color: #94a3b8; box-shadow: 0 0 0 3px #eef2f7; }

.actions { margin-top: 12px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* 按钮做成「键帽」样式：与键盘同一套配色，不用黑色实底 */
.btn {
  background: #e7ecf3; color: var(--ink);
  border: 1px solid #c3cfdd; border-bottom: 3px solid #b3c1d2;
  padding: 10px 22px; border-radius: 10px; cursor: pointer;
  font-size: 15px; font-weight: 600; transition: .12s;
}
.btn:hover { background: #dde5ee; }
.btn:active { border-bottom-width: 1px; transform: translateY(2px); }
.btn.ghost { background: var(--panel); color: var(--muted); border: 1px solid var(--line); border-bottom: 3px solid var(--line); }
.btn.ghost:hover { color: var(--ink); border-color: #c3cfdd; }
.result { color: var(--ok); font-weight: 700; font-size: 15px; }

/* ---------- 语言切换（键帽样式，与全站配色一致） ---------- */
.lang-toggle {
  margin-left: auto; align-self: center;
  background: #d3f4f1; color: #12625c;
  border: 1px solid #a8e0d9; border-bottom: 3px solid #7fccca;
  padding: 7px 16px; border-radius: 999px; cursor: pointer;
  font-size: 13.5px; font-weight: 700; letter-spacing: .3px; transition: .12s; white-space: nowrap;
}
.lang-toggle:hover { background: #c2eee9; }
.lang-toggle:active { border-bottom-width: 1px; transform: translateY(2px); }

/* ---------- 课程条（对齐金山打字通的分级课程） ---------- */
.course-strip {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 14px; box-shadow: var(--shadow); margin-bottom: 14px;
}
.course-label { font-size: 12.5px; font-weight: 700; color: var(--muted); letter-spacing: .5px; }
.course-list { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 8px; margin-top: 8px; }
.course-group { font-size: 11.5px; font-weight: 700; color: #94a3b8; padding-right: 2px; }
.course-chip {
  border: 1px solid var(--line); background: #f7f9fc; color: var(--muted);
  padding: 5px 12px; border-radius: 999px; cursor: pointer;
  font-size: 12.5px; font-weight: 600; transition: .12s; white-space: nowrap;
}
.course-chip:hover { color: var(--ink); border-color: #c3cfdd; }
.course-chip.active {
  background: #e7ecf3; border-color: #c3cfdd; color: var(--ink);
  box-shadow: inset 0 -2px 0 #9fb0c4;
}
.course-chip.passed { background: #f0faf3; border-color: #b7dfc0; color: #2f7d47; }
.course-chip.passed.active { background: #e7ecf3; border-color: #c3cfdd; color: var(--ink); }
.course-tip {
  margin: 10px 0 0; padding-top: 9px; border-top: 1px dashed var(--line);
  font-size: 12.5px; color: var(--muted);
}

/* ---------- 五笔编码方案切换（键帽风格，与全站去黑配色一致） ---------- */
.scheme-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 14px; box-shadow: var(--shadow); margin-bottom: 14px;
}
.scheme-bar[hidden] { display: none; }
.scheme-label { font-size: 12.5px; font-weight: 700; color: var(--muted); letter-spacing: .5px; }
.scheme-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.scheme-chip {
  background: #e7ecf3; color: var(--ink); border: 1px solid #c3cfdd;
  border-bottom: 3px solid #b3c1d2; padding: 6px 16px; border-radius: 9px;
  font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: .12s;
}
.scheme-chip:hover { background: #dde5ee; }
.scheme-chip:active { border-bottom-width: 1px; transform: translateY(2px); }
.scheme-chip.active { background: #dbe6f5; border-color: #9fb6d4; border-bottom-color: #8aa4c8; }
.scheme-hint { flex: 1 1 240px; min-width: 0; font-size: 12px; color: #94a3b8; line-height: 1.5; }

/* ---------- 自定义文本来源框 ---------- */
.custom-source {
  width: 100%; min-height: 92px; resize: vertical;
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
  font-size: 14px; font-family: inherit; line-height: 1.7; outline: none;
  background: var(--panel); box-shadow: var(--shadow); margin-bottom: 14px;
}
.custom-source:focus { border-color: #94a3b8; box-shadow: 0 0 0 3px #eef2f7; }

/* ---------- 错误热力图 / 打卡 ---------- */
.heat-box {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--shadow); margin-bottom: 14px;
}
.box-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 12px; }
.box-head b { font-size: 14px; color: var(--ink); }
.box-head span { font-size: 12.5px; color: var(--muted); }
.heat-stage { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.heat-top { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.heat-top b { font-size: 13px; color: var(--ink); }
.chip-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.chip {
  font-size: 12.5px; font-weight: 600; color: var(--ink);
  background: #f7f9fc; border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px;
}
.chip-empty { font-size: 12.5px; color: var(--muted); }
.key.hot { border-color: rgba(15,23,42,.2); }

#g-canvas, #pr-canvas {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); width: 100%; max-width: 100%; display: block;
}

.foot { text-align: center; color: var(--muted); font-size: 13px; padding: 22px 16px; }
.foot-credit { display: block; margin-top: 7px; font-size: 12px; color: #9aa6b6; line-height: 1.7; }
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px 16px; margin-top: 13px; }
.foot-links a { color: var(--muted); font-size: 12.5px; text-decoration: none; }
.foot-links a:hover { color: var(--ink); text-decoration: underline; }

/* ---------- 宽屏：小键盘靠右对齐，保持在主键盘右侧的观感 ---------- */
@media (min-width: 1241px) {
  .numpad { justify-self: end; }
}

/* ---------- 中等屏：主键盘独占一行，小键盘靠右；左侧图例竖排，高度自然与小键盘相当 ---------- */
@media (max-width: 1240px) {
  .kbd-flex { grid-template-areas: "main main" "aside numpad"; }
  .kbd-aside { align-self: center; }
  .kbd-aside .legend {
    flex-direction: column; align-items: flex-start;
    margin-top: 0; padding-top: 0; border-top: none; gap: 9px;
  }
  .kbd-aside .legend span { font-size: 13px; }
  .kbd-aside .legend i { width: 14px; height: 14px; }
  .kbd-aside .kbd-tips {
    display: grid; gap: 8px; font-size: 13px;
    margin-top: 4px; padding-top: 13px; border-top: 1px dashed var(--line);
  }
  .kbd-aside .kbd-tips b { font-size: 13px; margin-bottom: 2px; }
  .kbd-main { min-width: 800px; }
  .numpad { width: 264px; justify-self: end; padding-left: 0; border-left: none; }
  .key { height: 66px; font-size: 17px; }
  .pad-keys { grid-auto-rows: 55px; gap: 8px; }
  .numpad .key { font-size: 16px; }
  .kbd-row { gap: 9px; }
  .kbd-row + .kbd-row { margin-top: 9px; }
}

/* ---------- 小屏：竖排（主键盘 / 小键盘 / 图例），小键盘靠左保证完全可见 ---------- */
@media (max-width: 900px) {
  :root { --gut: 18px; }
  .kbd-flex { grid-template-areas: "main" "numpad" "aside"; }
  .kbd-aside { align-self: start; }
  .kbd-aside .legend {
    flex-direction: row; flex-wrap: wrap; align-items: center;
    margin-top: 11px; padding-top: 10px; border-top: 1px dashed var(--line); gap: 8px 16px;
  }
  .kbd-aside .legend span { font-size: 12px; }
  .kbd-aside .legend i { width: 12px; height: 12px; }
  .kbd-aside .kbd-tips {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: 12.5px;
    margin-top: 0; padding-top: 0; border-top: none;
  }
  .kbd-aside .kbd-tips b { font-size: 12.5px; margin-bottom: 0; }
  .kbd-main { min-width: 760px; }
  .numpad { width: 236px; justify-self: start; padding-left: 0; border-left: none; }
  .key { height: 58px; font-size: 16px; }
  .pad-keys { grid-auto-rows: 48px; gap: 7px; }
  .numpad .key { font-size: 15px; }
  .kbd-flex { gap: 12px; }
  .kbd-row { gap: 8px; }
  .kbd-row + .kbd-row { margin-top: 8px; }
}

/* ---------- 窄屏 / 手机：标签横滚、键盘横滚防压扁、留白收紧 ---------- */
@media (max-width: 720px) {
  :root { --gut: 14px; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; padding-top: 9px; padding-bottom: 9px; }
  .tab { flex: 0 0 auto; padding: 7px 14px; font-size: 14px; }
  .passage { font-size: 19px; padding: 14px 16px; min-height: 88px; letter-spacing: .4px; }
  .passage-zh { font-size: 21px; letter-spacing: 1.5px; }
  .py-passage { padding: 14px 16px; gap: 9px 11px; }
  .py-cell .py-syl { font-size: 18px; }
  .py-cell .py-hz { font-size: 15px; }
  .kbd-wrap { padding: 12px 12px 10px; }
  .kbd-main { min-width: 700px; }
  .numpad { width: 214px; }
  .pad-keys { grid-auto-rows: 44px; gap: 6px; }
  .numpad .key { font-size: 13.5px; }
  .numpad .key.special { font-size: 10px; }
  .key { height: 50px; font-size: 14.5px; }
  .kbd-flex { gap: 10px; }
  .stats { gap: 8px; }
  .card { padding: 8px 10px; }
  .card .num { font-size: 20px; }
  .card .num.small { font-size: 13px; }
  .legend span { font-size: 11px; }
}

/* ---------- 窄屏：课程条与热力图收紧 ---------- */
@media (max-width: 720px) {
  .course-strip { padding: 9px 11px; }
  .course-list { gap: 6px; }
  .course-chip { font-size: 12px; padding: 4px 10px; }
  .course-group { flex: 0 0 100%; margin-top: 4px; }
  .custom-source { min-height: 78px; font-size: 13px; }
  .heat-box { padding: 12px; }
  .box-head span { font-size: 12px; }
  .lang-toggle { padding: 6px 12px; font-size: 12.5px; }
}

/* ================= 文档页（关于 / 联系 / 隐私权政策 / 服务条款）=================
   这四页是静态正文：不依赖任何 JS，样式自包含，供人和搜索引擎直接读取。 */
.doc-nav {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 14px max(var(--gut), calc((100% - 880px) / 2 + var(--gut)));
  background: rgba(255,255,255,.94);
  border-bottom: 1px solid var(--line);
}
.doc-nav .brand { font-weight: 700; font-size: 15px; margin-right: 4px; }
.doc-nav a.brand {
  border: 0; background: none; padding-left: 0;
  font-weight: 700; font-size: 15px; margin-right: 4px;
}
.doc-nav a {
  font-size: 14px; color: var(--ink); text-decoration: none;
  padding: 7px 13px; border: 1px solid var(--line); border-radius: 9px; background: #f8fafc;
}
.doc-nav a:hover { background: #eef2f8; }
.doc-nav a.home { background: var(--accent); color: #fff; border-color: var(--accent); }

.doc { max-width: 880px; margin: 0 auto; padding: 36px var(--gut) 48px; }
.doc h1 { font-size: 28px; line-height: 1.32; margin: 0 0 8px; letter-spacing: -.2px; }
.doc .doc-meta { color: var(--muted); font-size: 13px; margin: 0 0 28px; }
.doc h2 { font-size: 19px; margin: 34px 0 12px; }
.doc h3 { font-size: 16px; margin: 22px 0 8px; }
.doc p, .doc li { font-size: 15.5px; line-height: 1.9; color: #2c3847; }
.doc p { margin: 0 0 14px; }
.doc ul, .doc ol { margin: 0 0 16px; padding-left: 22px; }
.doc li { margin-bottom: 7px; }
/* 正文里的链接：沿用站内的中性墨色 + 淡下划线，不引入蓝色强调色 */
.doc a { color: var(--ink); text-decoration: underline; text-decoration-color: #b9c6d6; text-underline-offset: 3px; }
.doc a:hover { text-decoration-color: var(--ink); }
.doc code {
  font-family: "SFMono-Regular", Consolas, Menlo, monospace; font-size: 13.5px;
  background: #eef2f8; border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px;
}
.doc blockquote {
  margin: 0 0 18px; padding: 13px 17px; border-radius: 9px;
  background: #fff8ed; border: 1px solid #fbd9a5; border-left: 3px solid #f59e0b;
}
.doc blockquote p { margin-bottom: 0; }
.doc table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 14.5px; }
.doc th, .doc td { border: 1px solid var(--line); padding: 9px 12px; text-align: left; vertical-align: top; }
.doc th { background: #f6f8fb; font-weight: 600; }
.doc-foot {
  margin-top: 42px; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--muted); line-height: 1.9;
}
.doc-foot a { color: var(--muted); margin: 0 3px; }

@media (max-width: 720px) {
  .doc { padding: 26px var(--gut) 40px; }
  .doc h1 { font-size: 23px; }
  .doc h2 { font-size: 17.5px; margin-top: 28px; }
  .doc p, .doc li { font-size: 15px; line-height: 1.85; }
  .doc-nav { padding: 11px var(--gut); }
  .doc-nav a { font-size: 13px; padding: 6px 10px; }
}

/* ---------- 打字指南（文章层） ---------- */
/* 文章页比合规页窄一点：中文长文一行太长会难以换行阅读 */
.doc-article { max-width: 780px; }

.crumb { font-size: 13px; color: var(--muted); margin: 0 0 16px; }
.crumb a { color: var(--muted); text-decoration: none; border-bottom: 1px solid #d6dfea; }
.crumb a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.crumb span { margin: 0 8px; color: #c3cfdd; }
.crumb em { font-style: normal; color: var(--ink); }

/* 正文里的等宽块（键盘布局示意、按键示例） */
.doc pre {
  margin: 0 0 18px; padding: 14px 16px; overflow-x: auto;
  background: #f6f8fb; border: 1px solid var(--line); border-radius: 9px;
}
.doc pre code {
  background: none; border: 0; padding: 0; font-size: 12.5px; line-height: 1.75;
  white-space: pre;
}

/* 文章末尾的「去练一练」：文章 → 工具的内链闭环 */
.art-cta {
  margin: 34px 0 0; padding: 18px 20px; border-radius: 10px;
  background: #f8fafc; border: 1px solid var(--line);
}
.art-cta p { margin: 0 0 13px; font-size: 15px; line-height: 1.85; color: #2c3847; }
.art-btn {
  display: inline-block; font-size: 14px; padding: 9px 18px; border-radius: 9px;
  background: #e7ecf3; border: 1px solid #c3cfdd; color: var(--ink); text-decoration: none;
}
.art-btn:hover { background: #dde5ee; }

/* 同分类内的上一篇 / 下一篇 */
.art-nav { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; }
.art-nav a {
  flex: 1 1 240px; display: block; padding: 13px 16px; border-radius: 10px;
  background: #f8fafc; border: 1px solid var(--line); text-decoration: none;
}
.art-nav a:hover { background: #eef2f8; }
.art-nav span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.art-nav strong {
  display: block; font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.5;
}
.art-nav .next { text-align: right; }

/* 指南索引页：按分类分组的文章列表 */
.gcat { margin-top: 32px; }
.gcat h2 { margin-top: 0; }
.gcat-note { font-size: 14px; color: var(--muted); margin: 0 0 14px; }
.glist { list-style: none; margin: 0; padding: 0; }
.glist li { margin-bottom: 10px; }
.glist a {
  display: block; padding: 14px 16px; border-radius: 10px;
  background: #f8fafc; border: 1px solid var(--line); text-decoration: none;
}
.glist a:hover { background: #eef2f8; }
.glist strong {
  display: block; font-size: 15.5px; font-weight: 600; color: var(--ink);
  margin-bottom: 5px; line-height: 1.5;
}
.glist span { display: block; font-size: 13.5px; color: var(--muted); line-height: 1.7; }

@media (max-width: 720px) {
  .doc-article { max-width: 100%; }
  .art-nav a { flex: 1 1 100%; }
  .art-nav .next { text-align: left; }
  .glist a { padding: 12px 14px; }
  .glist strong { font-size: 15px; }
  .doc pre { font-size: 12px; padding: 12px; }
}