:root {
  color-scheme: light;
  --ink: #172033;
  --muted: #6c7688;
  --line: #e2e7ef;
  --surface: #ffffff;
  --canvas: #f5f7fb;
  --blue: #365cf5;
  --blue-soft: #edf1ff;
  --green: #0f7a50;
  --red: #c04048;
  /* 未打到的字母：原来是 #b3bac6（对比 1.9:1），iPad 上几乎看不见；现在 9.5:1 */
  --pending: #3d4756;
  /* 汉字退为辅助：比拼音浅一档，但仍保证 5.8:1，iPad 上不发灰 */
  --hanzi: #5b6572;
  /* 视觉主次：拼音为主（大、深、中等字重），汉字为辅（小、浅一档） */
  --py-size: 12px;
  --hz-size: 15px;
  /* 格子：按最长拼音 6 字母（zhuang/chuang）定宽，保证每格等宽、整体成阵列 */
  --cell-w: 40px;
  --cell-h: 44px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); color: var(--ink); -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
button, textarea, select, input { font: inherit; }
button { cursor: pointer; }
.shell { max-width: 1240px; min-height: 100vh; margin: 0 auto; padding: 28px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 28px; }
h2 { font-size: 23px; }
h3 { font-size: 17px; }
.eyebrow { color: var(--muted); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }

/* ---------- 骨架 ---------- */
.workspace { display: grid; grid-template-columns: 258px minmax(0, 1fr); gap: 20px; align-items: start; }
.sidebar, .practice-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.sidebar { position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto; padding: 14px; min-height: 600px; }
.practice-panel { padding: clamp(18px, 3.4vw, 30px); background: linear-gradient(180deg, #fffdf8 0%, #f6f9ff 100%); }

/* ---------- 侧栏 ---------- */
.subject-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--canvas); border-radius: 7px; }
.subject-tab { border: 0; background: transparent; color: var(--muted); padding: 8px; border-radius: 5px; font-size: 13px; }
.subject-tab.active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 4px #17203312; }
.control-section { margin-top: 18px; }
.section-label { display: block; color: var(--muted); font-size: 12px; font-weight: 700; }
#grade-select { width: 100%; margin-top: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font-size: 12px; }
.search-box { display: block; margin-top: 16px; color: var(--muted); font-size: 12px; font-weight: 700; }
.search-box input { display: block; width: 100%; margin-top: 8px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font-size: 13px; outline: none; }
.search-box input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px #365cf51a; }
.lesson-list { display: grid; gap: 6px; margin-top: 16px; }
.lesson-item { border: 1px solid transparent; background: transparent; text-align: left; padding: 9px 10px; border-radius: 6px; color: var(--ink); font-size: 12.5px; line-height: 1.45; }
.lesson-item:hover, .lesson-item.active { background: var(--blue-soft); border-color: #cbd5ff; }
.empty-list, .empty-practice { padding: 18px 8px; color: var(--muted); font-size: 13px; text-align: center; }
.sidebar-history { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 14px; }
.history-title { margin-bottom: 10px; color: var(--muted); font-size: 12px; font-weight: 700; }
.history-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; }
.history-grid strong { font-size: 20px; }
.history-grid span { color: var(--muted); font-size: 11px; }

/* ---------- 标题栏 ---------- */
.practice-heading { display: flex; justify-content: space-between; align-items: start; gap: 20px; }
.practice-heading h2 { margin-top: 6px; }
.ghost-button, .primary-button { border: 0; border-radius: 6px; padding: 9px 14px; font-size: 13px; }
.ghost-button { background: #eef1f7; color: var(--ink); }
.primary-button { background: var(--blue); color: #fff; box-shadow: 0 5px 14px #365cf533; }
.text-button { border: 0; padding: 4px; background: transparent; color: var(--muted); font-size: 12px; }
.text-button:hover { color: var(--ink); }

/* ---------- 统计 ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 820px; margin: 20px auto 12px; gap: 10px; }
.stats div { border-top: 1px solid var(--line); padding-top: 9px; }
.stats span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 3px; }
.stats strong { font-size: 19px; font-variant-numeric: tabular-nums; }

/* ---------- 字母流舞台 ---------- */
.target-card {
  width: min(820px, 100%);
  margin: 0 auto;
  padding: 16px 20px 10px;
  min-height: 240px;
  /* 长课文给足高度可滚动，短课文按内容自适应，不留大片空白 */
  max-height: clamp(320px, calc(100vh - 380px), 880px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fcfdff;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: text;
}
.target-card::-webkit-scrollbar { width: 8px; }
.target-card::-webkit-scrollbar-thumb { background: #d5dce8; border-radius: 4px; }

.practice-line { margin-bottom: 11px; }
.practice-line.gap-before { margin-top: 17px; }
.line-grid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 3px; }
.seg { display: flex; flex: 0 0 auto; }
/* 首行缩进两格：两个格宽 + 两个横向间隙 */
.indent-2 { flex: 0 0 auto; width: calc(var(--cell-w) * 2 + 6px); }

/* 每字一格：固定宽高排成阵列，汉字在上、拼音在下 */
.cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex: 0 0 auto; padding: 1px 2px;
  background: #fff; border: 1px solid #dbe3ef; border-radius: 5px;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
body[data-subject="chinese"] .cell { width: var(--cell-w); min-width: var(--cell-w); height: var(--cell-h); }
/* 拼音：主打对象，深色、中等字重；排在汉字下方，作为要敲的基准行 */
.cell .py { display: flex; justify-content: center; min-height: 1.2em; line-height: 1.2; margin-top: 2px; }
.cell .py i {
  font-style: normal; font-size: var(--py-size); font-weight: 500; letter-spacing: 0;
  color: var(--pending); padding: 0 .2px; border-radius: 2px;
  transition: color .1s, background .1s;
}
/* 汉字：辅助提示，字号小一档 */
.cell .hz {
  font-size: var(--hz-size); line-height: 1.2; text-align: center;
  color: var(--hanzi); transition: color .12s;
}

/* 逐字母状态 */
.cell .py i.ok { color: var(--green); }
.cell .py i.bad { color: var(--red); background: #ffe9ea; }
.cell .py i.cur { position: relative; background: var(--blue); color: #fff; }
.cell .py i.cur::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  border-radius: 1px; background: var(--blue); animation: caret 1s step-end infinite;
}
@keyframes caret { 50% { opacity: 0; } }

/* 汉字锚点状态（辅助层）——高亮落在格子上，不再给字加底色 */
.cell.active { border-color: var(--blue); background: #f7f9ff; box-shadow: 0 0 0 2px #365cf51a; }
.cell.active .hz { color: var(--ink); }
.cell.wrong { border-color: #efb4ba; background: #fffafb; }
.cell.punct .hz { color: var(--muted); }
.cell.punct .py i { font-size: calc(var(--py-size) - 0.5px); }

/* 汉字同步结果色：整字打对转绿、出现错字母立刻转红，与拼音行保持一致 */
.cell.hz-ok .hz { color: var(--green); }
.cell.hz-bad .hz { color: var(--red); }

/* 默写模式：未打到的字母隐形，只留已输入部分 */
body.hide-py .cell .py i:not(.ok):not(.bad):not(.cur) { color: transparent; }

/* 韵文居中（古诗/现代诗） */
body[data-layout="verse"] .line-grid { justify-content: center; }
body[data-layout="verse"] .practice-line { margin-bottom: 8px; }

/* 英语：单字符直接打，不需要拼音行，字符本身就是主对象 */
body[data-subject="english"] .cell .py { display: none; }
body[data-subject="english"] .cell .hz { font-size: 20px; font-weight: 500; color: var(--ink); }
body[data-subject="english"] .cell.hz-ok .hz { color: var(--green); }
body[data-subject="english"] .cell.hz-bad .hz { color: var(--red); }

/* ---------- 提示与输入 ---------- */
.hint-line { width: min(820px, 100%); margin: 10px auto 0; color: var(--muted); font-size: 12.5px; line-height: 1.65; }
.hint-line b { color: var(--ink); font-weight: 600; }
textarea#typing-input {
  position: fixed; left: 0; top: 0; z-index: -1; width: 1px; height: 1px; opacity: 0;
  pointer-events: none; border: 0; padding: 0; margin: 0; font-size: 16px;
}
.input-footer { display: flex; align-items: center; justify-content: space-between; width: min(820px, 100%); gap: 12px; margin: 10px auto 0; color: var(--muted); font-size: 12.5px; }

/* ---------- 草稿横幅 ---------- */
.resume-banner { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: min(820px, 100%); margin: 0 auto 12px; padding: 10px 12px; border: 1px solid #cbd5ff; border-radius: 7px; background: #f4f6ff; font-size: 13px; }
.resume-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* ---------- 结果 ---------- */
.result {
  margin-top: 22px; padding: 16px 18px; border-radius: 10px; background: #f1faf6;
  border: 1px solid #cbe8da; border-left: 3px solid var(--green);
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.result p { color: var(--muted); font-size: 12.5px; margin-top: 4px; }
.result-kpi { display: flex; flex-direction: column; }
.result-kpi span { color: var(--muted); font-size: 11px; }
.result-kpi strong { font-size: 19px; font-variant-numeric: tabular-nums; }
.result-actions { display: flex; gap: 8px; margin-left: auto; }

/* ---------- 开关与提示条 ---------- */
.switch { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12.5px; cursor: pointer; }
.switch input { width: 15px; height: 15px; accent-color: var(--blue); }
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  background: #172033; color: #fff; font-size: 13px; padding: 9px 16px; border-radius: 20px;
  opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 50;
}
.toast.on { opacity: .94; }

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
  .workspace { grid-template-columns: 1fr; }
  /* 单列布局：练习区放上面，课文列表收成可滚动的块，别让 27 篇课文把打字区挤到两屏以下 */
  .practice-panel { order: -1; }
  .sidebar { position: static; max-height: 44vh; overflow-y: auto; min-height: auto; }
  .lesson-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* iPad 竖屏这一档：单列布局、横向够宽，字放大一档，练习区也放大 */
@media (min-width: 761px) and (max-width: 900px) {
  :root { --py-size: 13px; --hz-size: 16px; --cell-w: 42px; --cell-h: 46px; }
  .target-card { max-height: clamp(380px, calc(100vh - 280px), 840px); }
}
@media (max-width: 760px) {
  /* 小屏：格子跟着缩，但要塞得下 6 字母拼音 */
  :root { --py-size: 10px; --hz-size: 13px; --cell-w: 34px; --cell-h: 38px; }
  .shell { padding: 14px; }
  .workspace { gap: 14px; }
  .practice-panel { padding: 16px 13px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 16px auto 10px; }
  .target-card { padding: 13px 12px 8px; max-height: min(58vh, 480px); }
  .lesson-list { grid-template-columns: 1fr; }
  .input-footer { flex-direction: column; align-items: stretch; }
  .input-footer .primary-button { width: 100%; }
  .result-actions { width: 100%; margin-left: 0; }
  .result-actions button { flex: 1; }
  .resume-banner { flex-direction: column; align-items: flex-start; }
}