:root {
  --bg: #f4f8fc;
  --panel: #ffffff;
  --panel-soft: #edf5fc;
  --ink: #1e2a36;
  --muted: #66788a;
  --line: #d7e4ef;
  --blue: #2f7fd1;
  --blue-dark: #1f5e9f;
  --blue-soft: #dceeff;
  --green: #2ca66f;
  --red: #de4b4b;
  --amber: #d89226;
  --key: #ffffff;
  --key-shadow: #bdcad8;
  --radius: 8px;
  --font-size: 18px;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", Arial, sans-serif;
  font-size: var(--font-size);
}

body.dark {
  --bg: #111820;
  --panel: #172230;
  --panel-soft: #203043;
  --ink: #eef5fb;
  --muted: #a9b8c8;
  --line: #31465e;
  --blue: #5aa8ff;
  --blue-dark: #8dc3ff;
  --blue-soft: #183551;
  --key: #203043;
  --key-shadow: #0d141c;
  color-scheme: dark;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
select,
input,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.topbar {
  height: 72px;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 0 28px;
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(12px);
}

body.dark .topbar {
  background: rgba(23, 34, 48, 0.92);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 272px;
}

.brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--blue);
  color: #fff;
  font-weight: 800;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15);
}

.brand strong,
.brand small {
  display: block;
}

.brand strong {
  font-size: 17px;
  line-height: 1.25;
}

.brand small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.topnav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.topnav a {
  color: var(--muted);
  border-radius: 7px;
  padding: 10px 13px;
  font-size: 15px;
}

.topnav a.active,
.topnav a:hover {
  background: var(--blue-soft);
  color: var(--blue-dark);
}

.icon-button {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
}

.profile-button {
  min-width: 104px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  font-weight: 800;
}

.profile-button:hover {
  border-color: var(--blue);
  color: var(--blue-dark);
}

.view {
  width: 100%;
  flex: 1;
  outline: none;
}

.home {
  min-height: calc(100vh - 72px);
  padding: 38px 42px;
  display: grid;
  grid-template-columns: minmax(340px, 0.9fr) minmax(560px, 1.35fr);
  gap: 34px;
  align-items: stretch;
}

.hero-panel,
.module-board,
.training-panel,
.side-panel,
.keyboard-stage {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.hero-panel {
  padding: 34px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 510px;
}

.hero-kicker {
  color: var(--blue-dark);
  font-weight: 700;
  font-size: 15px;
}

.hero-panel h1 {
  margin: 18px 0 16px;
  font-size: clamp(34px, 4vw, 58px);
  line-height: 1.08;
  letter-spacing: 0;
}

.hero-panel p {
  max-width: 520px;
  color: var(--muted);
  line-height: 1.8;
}

.quick-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.quick-stat {
  padding: 14px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 7px;
}

.quick-stat strong {
  display: block;
  font-size: 22px;
  color: var(--blue-dark);
}

.quick-stat span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.continue-card {
  width: fit-content;
  margin-top: 18px;
  padding: 12px 16px;
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid #b9d7f3;
  border-radius: var(--radius);
  background: #edf6ff;
  color: var(--blue-dark);
}

.continue-card span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.continue-card strong {
  font-size: 20px;
}

.module-board {
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.module-card {
  min-height: 182px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--panel), var(--panel-soft));
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.module-card:hover,
.module-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(47, 127, 209, 0.55);
  box-shadow: 0 14px 28px rgba(31, 94, 159, 0.12);
}

.module-card.primary {
  background: var(--blue);
  color: #fff;
}

.module-card.primary p,
.module-card.primary .module-status {
  color: rgba(255, 255, 255, 0.82);
}

.module-card h2 {
  margin: 0 0 10px;
  font-size: 26px;
  letter-spacing: 0;
}

.module-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  font-size: 15px;
}

.module-status {
  display: inline-flex;
  align-items: center;
  color: var(--blue-dark);
  font-size: 14px;
  font-weight: 700;
}

.typing-page {
  min-height: calc(100vh - 72px);
  padding: 18px;
  display: grid;
  grid-template-rows: auto minmax(250px, 1fr) auto;
  gap: 14px;
}

.pinyin-page {
  min-height: calc(100vh - 72px);
  padding: 18px;
  display: grid;
  grid-template-rows: auto minmax(360px, 1fr);
  gap: 14px;
}

.pinyin-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 14px;
  min-height: 0;
}

.pinyin-main {
  min-width: 0;
}

.pinyin-reader {
  min-height: 220px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
  font-size: clamp(26px, 2.25vw, 38px);
  line-height: 1.75;
  overflow: auto;
}

.pinyin-char {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-width: 1.38em;
  min-height: 1.95em;
  margin: 0 0.05em;
  padding: 0.08em 0.08em 0.12em;
  border-radius: 7px;
  vertical-align: bottom;
  text-align: center;
  line-height: 1;
  transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}

.pinyin-char rb,
.pinyin-char rt {
  display: block;
  width: 100%;
  text-align: center;
}

.pinyin-char rb {
  order: 2;
  line-height: 1.08;
}

.pinyin-char rt {
  order: 1;
  margin-bottom: 0.22em;
  color: var(--blue-dark);
  font-size: 0.34em;
  line-height: 1;
  user-select: none;
}

.pinyin-char.current {
  background: var(--blue);
  color: #fff;
  transform: translateY(-2px);
}

.pinyin-char.current rt {
  color: rgba(255, 255, 255, 0.86);
}

.pinyin-char.correct {
  color: var(--green);
}

.pinyin-char.wrong {
  background: var(--red);
  color: #fff;
}

.pinyin-char.wrong rt {
  color: rgba(255, 255, 255, 0.86);
}

.pinyin-char.punctuation {
  min-width: 0.5em;
}

.pinyin-char.punctuation rt {
  visibility: hidden;
}

.pinyin-progress-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.pinyin-progress-card label {
  display: block;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 10px;
}

.pinyin-progress-card strong {
  display: block;
  margin-top: 10px;
  font-size: 16px;
}

.pinyin-dashboard {
  display: block;
}

.finger-dashboard {
  display: block;
}

.pinyin-start-page {
  display: grid;
  place-items: center;
}

.pinyin-start-panel {
  width: min(820px, 100%);
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.pinyin-start-panel h2 {
  margin: 16px 0 8px;
  font-size: 28px;
}

.pinyin-start-panel p {
  margin: 0 0 18px;
  color: var(--muted);
}

.mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.mode-choice {
  display: grid;
  gap: 6px;
  min-height: 92px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.mode-choice.active {
  border-color: var(--blue);
  background: var(--blue-soft);
  box-shadow: inset 0 0 0 1px rgba(47, 127, 209, 0.3);
}

.mode-choice span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.pinyin-practice {
  height: calc(100vh - 72px);
  min-height: 0;
  padding: 10px 14px;
  gap: 10px;
  grid-template-rows: auto minmax(0, 1fr) 360px;
  overflow: hidden;
}

.pinyin-practice .training-panel {
  min-height: 0;
  padding: 14px;
  grid-template-rows: auto minmax(150px, 1fr) 96px;
  gap: 12px;
}

.pinyin-practice .pinyin-reader {
  min-height: 0;
  max-height: none;
}

.pinyin-item {
  display: inline-block;
  margin: 0 0.38em 0.38em 0;
  white-space: nowrap;
}

.pinyin-item.article-item {
  white-space: normal;
  margin-right: 0;
}

.pinyin-practice .input-panel textarea {
  height: 96px;
  font-size: 22px;
}

.pinyin-line-mode .training-panel {
  grid-template-rows: auto minmax(150px, auto);
  gap: 10px;
  position: relative;
}

.pinyin-line-mode .pinyin-reader {
  min-height: 0;
  height: auto;
  max-height: 188px;
  padding: 14px 16px;
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
}

.pinyin-article-lines {
  width: 100%;
  min-width: max-content;
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 2px 4px;
}

.pinyin-line-pair {
  display: grid;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid #bcd8f2;
  border-radius: 8px;
  background: #f8fcff;
}

.pinyin-line-source,
.pinyin-line-input {
  --pinyin-cell: 2.28em;
  display: grid;
  grid-template-columns: repeat(var(--pinyin-line-count, 24), var(--pinyin-cell));
  align-items: center;
  color: var(--text);
  font-size: clamp(16px, 1.45vw, 23px);
  line-height: 1.2;
  letter-spacing: 0;
  word-break: keep-all;
  width: max-content;
  max-width: 100%;
  box-sizing: border-box;
}

.pinyin-line-source {
  min-height: 56px;
  padding: 4px 7px;
  border: 2px solid transparent;
  border-radius: 8px;
}

.pinyin-line-input {
  min-height: 40px;
  padding: 4px 7px;
  border: 2px solid #d5e4f3;
  border-radius: 8px;
  background: #fff;
}

.pinyin-line-source span,
.pinyin-line-input span {
  width: var(--pinyin-cell);
  min-width: var(--pinyin-cell);
  min-height: 1.45em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  text-align: center;
  box-sizing: border-box;
}

.pinyin-line-source span {
  min-height: 52px;
  flex-direction: column;
  gap: 2px;
}

.pinyin-line-source small {
  min-height: 16px;
  color: #1f6fb2;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.pinyin-line-source strong {
  font-size: 1.35em;
  font-weight: 500;
  line-height: 1.05;
}

.pinyin-line-source span.punctuation small {
  visibility: hidden;
}

.pinyin-line-input span.empty {
  color: transparent;
}

.pinyin-line-input span.ok {
  color: #237246;
  background: #e9f8ef;
}

.pinyin-line-input span.bad {
  color: #c23535;
  background: #ffe8e8;
}

.pinyin-line-source span.ok {
  color: #237246;
}

.pinyin-line-source span.bad {
  color: #c23535;
  background: #ffe8e8;
}

.pinyin-line-source span.current {
  background: var(--blue);
  color: #fff;
}

.pinyin-line-source span.current small {
  color: #eaf4ff;
}

.pinyin-line-input span.caret {
  position: relative;
}

.pinyin-line-input span.caret::after {
  content: "";
  position: absolute;
  left: 0.08em;
  top: 12%;
  width: 2px;
  height: 76%;
  background: var(--blue);
  animation: caretBlink 1s step-end infinite;
}

.pinyin-line-mode .input-panel {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}

.pinyin-line-target {
  display: inline-flex;
  align-items: flex-end;
  min-width: max-content;
  white-space: nowrap;
}

.pinyin-line-mode .input-panel textarea {
  height: 58px;
  min-height: 58px;
  padding: 10px 14px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: pre;
}

.pinyin-bottom {
  min-height: 0;
  height: 360px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 150px 200px;
  gap: 10px;
}

.pinyin-keyboard-stage {
  min-height: 0;
  padding: 9px;
  overflow: hidden;
}

.pinyin-keyboard-stage .keyboard {
  min-width: 640px;
  max-width: 760px;
  gap: 4px;
}

.pinyin-keyboard-stage .key-row {
  gap: 4px;
}

.pinyin-keyboard-stage .key {
  height: 34px;
  min-width: 34px;
  padding: 2px 5px;
  border-radius: 6px;
  font-size: 12px;
}

.pinyin-keyboard-stage .key.wide-1 { min-width: 48px; }
.pinyin-keyboard-stage .key.wide-2 { min-width: 62px; }
.pinyin-keyboard-stage .key.wide-3 { min-width: 76px; }
.pinyin-keyboard-stage .key.wide-4 { min-width: 92px; }
.pinyin-keyboard-stage .key.space { min-width: 250px; }

.pinyin-hands-card {
  min-height: 0;
  height: 150px;
  padding: 10px 14px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  justify-items: center;
  overflow: hidden;
}

.pinyin-hands-card label {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.pinyin-hands-card .hands-visual {
  width: min(100%, 560px);
  height: 122px;
  aspect-ratio: auto;
  margin: 0 auto;
}

.pinyin-hands-card .finger-map-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pinyin-mode-badge {
  align-self: center;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue-dark);
  font-size: 13px;
  font-weight: 800;
}

.pinyin-detail-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.pinyin-detail-card p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  color: var(--muted);
}

.pinyin-detail-card strong {
  color: var(--ink);
}

.intro-reader p {
  margin: 0 0 18px;
  line-height: 2;
}

.daily-panel {
  display: grid;
  gap: 18px;
}

.daily-panel h2 {
  margin: 0;
}

.daily-sentence {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
  font-size: 30px;
  line-height: 2;
}

.stars {
  margin-bottom: 8px;
  font-size: 28px;
  color: #cbd5e1;
}

.stars .on {
  color: #f2b830;
}

.progress-track {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--line);
}

.progress-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--blue);
  transition: width 180ms ease;
}

.compact-setting {
  min-height: 56px;
}

.wubi-page {
  min-height: calc(100vh - 72px);
  padding: 18px;
  display: grid;
  grid-template-rows: auto minmax(420px, 1fr);
  gap: 14px;
}

.wubi-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 14px;
  min-height: 0;
}

.wubi-main {
  min-width: 0;
  grid-template-rows: auto minmax(150px, 1fr) auto auto;
}

.wubi-target {
  display: grid;
  place-items: center;
  gap: 18px;
  min-height: 210px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.wubi-root-target {
  display: grid;
  place-items: center;
  gap: 10px;
}

.wubi-root-type {
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--blue-dark);
  font-size: 14px;
  font-weight: 800;
}

.wubi-component {
  min-width: min(100%, 360px);
  min-height: 104px;
  display: grid;
  place-items: center;
  padding: 18px 24px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  font-size: clamp(34px, 4vw, 58px);
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
}

.wubi-char.has-root-image,
.wubi-component.has-root-image {
  width: min(100%, 300px);
  min-height: 156px;
  display: grid;
  place-items: center;
  gap: 6px;
}

.wubi-char.has-root-image {
  padding: 14px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--panel);
}

.wubi-root-image {
  width: 136px;
  height: 136px;
  object-fit: contain;
  image-rendering: auto;
}

.wubi-char.has-root-image span,
.wubi-component.has-root-image span {
  font-size: 18px;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.2;
}

.wubi-component.text-root-only::after,
.wubi-char.text-root-only::after {
  content: "文字字根";
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.wubi-root-key {
  color: var(--muted);
  font-family: Consolas, "Cascadia Mono", monospace;
  font-size: 18px;
  font-weight: 800;
}

.wubi-char {
  font-size: clamp(64px, 8vw, 116px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}

.wubi-code {
  display: flex;
  gap: 8px;
  min-height: 48px;
  align-items: center;
  justify-content: center;
}

.code-cell {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--blue-dark);
  font-family: Consolas, "Cascadia Mono", monospace;
  font-weight: 800;
}

.code-cell.current {
  background: var(--blue);
  color: #fff;
}

.code-cell.filled {
  background: #e4f7ee;
  border-color: #9eddbf;
  color: #19794f;
}

.code-cell.masked {
  color: var(--muted);
}

.wubi-code.exam-hidden {
  opacity: 0.72;
}

.wubi-input {
  width: 100%;
  height: 62px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 0 18px;
  background: var(--panel);
  color: var(--ink);
  font-family: Consolas, "Cascadia Mono", monospace;
  font-size: 28px;
  text-transform: uppercase;
  letter-spacing: 0;
}

.wubi-input:focus {
  border-color: var(--blue);
  outline: 3px solid rgba(47, 127, 209, 0.14);
}

.wubi-keyboard-stage {
  max-height: 270px;
}

.mode-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.mode-tab {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  color: var(--muted);
  font-size: 14px;
}

.mode-tab.active {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

.wubi-chart {
  margin: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.wubi-zone-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.wubi-zone-card label {
  display: block;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 8px;
}

.wubi-zone-card strong,
.wubi-zone-card span {
  display: block;
}

.wubi-zone-card strong {
  color: var(--blue-dark);
  font-size: 18px;
}

.wubi-zone-card span {
  margin-top: 6px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.wubi-chart img {
  display: block;
  width: 100%;
  max-height: 280px;
  object-fit: contain;
  border-radius: 5px;
}

.wubi-chart img.zone-chart-image {
  max-height: 430px;
  object-position: top center;
}

.speed-page {
  min-height: calc(100vh - 72px);
  padding: 18px;
  display: grid;
  grid-template-rows: auto minmax(420px, 1fr);
  gap: 14px;
}

.speed-center {
  min-height: calc(100vh - 72px);
  padding: 24px;
  display: grid;
  gap: 16px;
}

.speed-hero {
  min-height: 190px;
  padding: 26px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.7fr);
  gap: 24px;
  align-items: center;
}

.speed-hero h1 {
  margin: 8px 0 10px;
  font-size: 34px;
  line-height: 1.2;
}

.speed-hero p {
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
}

.speed-best-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.speed-best-board div,
.speed-history-row {
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.speed-best-board span,
.speed-best-board small,
.speed-history-row span,
.speed-history-row small {
  color: var(--muted);
  font-size: 13px;
}

.speed-best-board strong {
  display: inline-block;
  margin: 0 6px;
  color: var(--blue-dark);
  font-size: 30px;
}

.speed-start-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 16px;
  align-items: start;
}

.speed-setup-panel {
  display: block;
  padding: 20px;
}

.speed-mode-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.speed-mode-card {
  min-height: 118px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink);
  text-align: left;
}

.speed-mode-card:hover,
.speed-mode-card.active {
  border-color: var(--blue);
  background: var(--blue-soft);
  color: var(--blue-dark);
}

.speed-mode-card strong,
.speed-mode-card span {
  display: block;
}

.speed-mode-card span {
  margin-top: 10px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.speed-options {
  margin: 18px 0 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.speed-options label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 14px;
}

.speed-options select {
  height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0 10px;
  background: var(--panel);
  color: var(--ink);
}

.speed-custom-text {
  display: none;
  width: 100%;
  min-height: 120px;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  resize: vertical;
  background: var(--panel);
  color: var(--ink);
}

.speed-custom-text.visible {
  display: block;
}

.speed-toggle-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.speed-toggle {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
  color: var(--ink);
  font-size: 14px;
}

.speed-history-panel {
  padding: 18px;
}

.speed-history-panel h2 {
  margin: 0 0 12px;
  font-size: 21px;
}

.speed-history-list {
  display: grid;
  gap: 10px;
}

.speed-history-row {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 8px;
  align-items: center;
}

.speed-history-row strong {
  font-size: 15px;
}

.speed-history-row em {
  color: var(--blue-dark);
  font-style: normal;
  font-weight: 900;
}

.speed-history-row small {
  grid-column: 2 / 4;
}

.speed-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 14px;
  min-height: 0;
}

.speed-main {
  min-width: 0;
}

.speed-text {
  min-height: 250px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
  color: var(--ink);
  font-size: clamp(24px, 2.2vw, 36px);
  line-height: 1.95;
  overflow: auto;
}

.speed-input {
  width: 100%;
  min-height: 96px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  resize: vertical;
  background: var(--panel);
  color: var(--ink);
  line-height: 1.7;
}

.speed-keyboard-stage {
  padding: 10px;
}

.speed-chart {
  width: 100%;
  height: 150px;
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.speed-wubi-chart {
  margin-top: 12px;
}

.exam-hidden {
  visibility: hidden;
}

.speed-result {
  display: block;
  width: min(760px, 100%);
  margin: 0 auto;
  padding: 18px 24px;
  text-align: center;
}

.speed-result .stars {
  margin-bottom: 4px;
  font-size: 30px;
}

.speed-result h2 {
  margin-bottom: 4px;
  font-size: 25px;
}

.speed-result > p {
  margin-bottom: 12px;
}

.speed-result .result-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.speed-result .result-grid div {
  padding: 9px 11px;
}

.speed-result .result-grid span {
  margin-bottom: 3px;
  font-size: 12px;
}

.speed-result .result-grid strong {
  font-size: 17px;
}

.speed-advice {
  margin: 0 0 16px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
  text-align: left;
}

.speed-advice strong {
  display: block;
  margin-bottom: 6px;
  color: var(--blue-dark);
}

.speed-advice p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  font-size: 14px;
}

.training-panel.speed-result {
  display: block;
  grid-template-rows: none;
}

.speed-char {
  border-radius: 4px;
  padding: 0 1px;
}

.speed-char.current {
  background: var(--blue);
  color: #fff;
}

.speed-char.correct {
  color: var(--green);
}

.speed-char.wrong {
  background: var(--red);
  color: #fff;
}

.score-panel {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.score-panel label {
  display: block;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 10px;
}

.score-panel dl {
  margin: 0;
  display: grid;
  gap: 9px;
}

.score-panel div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.score-panel div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.score-panel dt {
  color: var(--muted);
  font-size: 14px;
}

.score-panel dd {
  margin: 0;
  font-weight: 800;
  color: var(--blue-dark);
}

.training-stats {
  display: grid;
  grid-template-columns: minmax(210px, 1.4fr) repeat(5, minmax(110px, 1fr));
  gap: 10px;
}

.stat-box {
  min-height: 66px;
  padding: 11px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.stat-box label {
  color: var(--muted);
  font-size: 12px;
}

.stat-box strong {
  margin-top: 4px;
  font-size: 21px;
  line-height: 1.1;
}

.practice-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 14px;
  min-height: 0;
}

.training-panel {
  padding: 18px;
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(120px, 1fr) auto;
  gap: 16px;
}

.lesson-row {
  display: flex;
  gap: 12px;
  align-items: center;
}

.lesson-row select {
  min-width: 220px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 9px 11px;
  color: var(--ink);
  background: var(--panel);
}

.lesson-desc {
  color: var(--muted);
  font-size: 14px;
}

.practice-text {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
  font-family: Consolas, "Cascadia Mono", monospace;
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1.8;
  overflow: auto;
}

.char {
  position: relative;
  border-radius: 4px;
  padding: 0 1px;
  white-space: pre-wrap;
}

.char.current {
  background: var(--blue);
  color: #fff;
}

.char.done {
  color: var(--green);
}

.char.wrong {
  color: #fff;
  background: var(--red);
}

.input-panel textarea {
  width: 100%;
  height: 116px;
  resize: none;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  background: var(--panel);
  color: var(--ink);
  font-family: Consolas, "Cascadia Mono", monospace;
  font-size: 22px;
  line-height: 1.45;
}

.input-panel textarea:focus {
  border-color: var(--blue);
  outline: 3px solid rgba(47, 127, 209, 0.14);
}

.side-panel {
  padding: 18px;
  display: grid;
  gap: 14px;
  align-content: start;
}

.hint-card {
  padding: 18px;
  border-radius: var(--radius);
  background: var(--blue-soft);
  border: 1px solid var(--line);
}

.hint-card label,
.hands-card label {
  display: block;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 8px;
}

.hint-card strong {
  display: block;
  font-size: 24px;
  line-height: 1.45;
  color: var(--blue-dark);
}

.hands-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.hands-svg {
  width: 100%;
  height: auto;
  display: block;
}

.hands-visual {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 7px;
  background: #fff;
}

.finger-map-image {
  display: block;
  width: 100%;
  height: auto;
}

.finger-map-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.finger-zone-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.finger-zone {
  opacity: 0;
  fill: rgba(255, 255, 255, 0.16);
  stroke: transparent;
  stroke-width: 14;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity 160ms ease, fill 160ms ease, stroke 160ms ease, filter 160ms ease;
}

.finger-zone.active {
  opacity: 1;
  filter: drop-shadow(0 0 8px rgba(47, 127, 209, 0.38));
}

.finger-zone.left-pinky.active,
.finger-zone.right-pinky.active {
  fill: rgba(255, 112, 112, 0.22);
  stroke: rgba(255, 112, 112, 0.95);
}

.finger-zone.left-ring.active,
.finger-zone.right-ring.active {
  fill: rgba(242, 184, 48, 0.22);
  stroke: rgba(242, 184, 48, 0.95);
}

.finger-zone.left-middle.active,
.finger-zone.right-middle.active {
  fill: rgba(140, 206, 54, 0.22);
  stroke: rgba(140, 206, 54, 0.95);
}

.finger-zone.left-index.active,
.finger-zone.right-index.active {
  fill: rgba(52, 152, 219, 0.22);
  stroke: rgba(52, 152, 219, 0.95);
}

.finger-zone.left-thumb.active,
.finger-zone.right-thumb.active {
  fill: rgba(154, 94, 206, 0.22);
  stroke: rgba(154, 94, 206, 0.95);
}

.finger-highlight {
  position: absolute;
  display: block;
  border-radius: 48% 48% 42% 42% / 32% 32% 58% 58%;
  border: 2px solid transparent;
  background: rgba(47, 127, 209, 0);
  opacity: 0;
  transform-origin: center;
  transition: opacity 160ms ease, box-shadow 160ms ease, background 160ms ease, scale 160ms ease;
}

.finger-highlight.active {
  opacity: 1;
  scale: 1;
  border-color: rgba(47, 127, 209, 0.9);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55), 0 0 13px rgba(47, 127, 209, 0.42);
}

.finger-highlight.left-pinky.active,
.finger-highlight.right-pinky.active {
  border-color: rgba(255, 112, 112, 0.95);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55), 0 0 13px rgba(255, 112, 112, 0.38);
}

.finger-highlight.left-ring.active,
.finger-highlight.right-ring.active {
  border-color: rgba(242, 184, 48, 0.95);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55), 0 0 13px rgba(242, 184, 48, 0.38);
}

.finger-highlight.left-middle.active,
.finger-highlight.right-middle.active {
  border-color: rgba(140, 206, 54, 0.95);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55), 0 0 13px rgba(140, 206, 54, 0.38);
}

.finger-highlight.left-index.active,
.finger-highlight.right-index.active {
  border-color: rgba(52, 152, 219, 0.95);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55), 0 0 13px rgba(52, 152, 219, 0.42);
}

.finger-highlight.left-thumb.active,
.finger-highlight.right-thumb.active {
  border-color: rgba(154, 94, 206, 0.95);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55), 0 0 13px rgba(154, 94, 206, 0.38);
}

.finger-highlight.left-pinky {
  left: 5.1%;
  top: 34%;
  width: 8%;
  height: 29%;
  rotate: -22deg;
}

.finger-highlight.left-ring {
  left: 14.4%;
  top: 22%;
  width: 8%;
  height: 34%;
  rotate: -12deg;
}

.finger-highlight.left-middle {
  left: 23.1%;
  top: 16%;
  width: 7.5%;
  height: 38%;
}

.finger-highlight.left-index {
  left: 31.2%;
  top: 20%;
  width: 7%;
  height: 32%;
  rotate: 10deg;
}

.finger-highlight.left-thumb {
  left: 40.1%;
  top: 49%;
  width: 10%;
  height: 19%;
  rotate: -42deg;
}

.finger-highlight.right-thumb {
  left: 55.9%;
  top: 49%;
  width: 10%;
  height: 19%;
  rotate: 42deg;
}

.finger-highlight.right-index {
  left: 65.8%;
  top: 20%;
  width: 7%;
  height: 32%;
  rotate: -9deg;
}

.finger-highlight.right-middle {
  left: 75.1%;
  top: 16%;
  width: 7.5%;
  height: 38%;
}

.finger-highlight.right-ring {
  left: 84.8%;
  top: 22%;
  width: 8%;
  height: 34%;
  rotate: 10deg;
}

.finger-highlight.right-pinky {
  left: 94.8%;
  top: 34%;
  width: 8%;
  height: 29%;
  rotate: 22deg;
  transform: translateX(-100%);
}

.finger-part {
  fill: #f4d1bc;
  stroke: #c99578;
  stroke-width: 3;
  transition: fill 160ms ease, filter 160ms ease, transform 160ms ease;
  transform-box: fill-box;
  transform-origin: center bottom;
}

.finger-part.active {
  fill: #5aa8ff;
  filter: drop-shadow(0 5px 7px rgba(47, 127, 209, 0.35));
  transform: translateY(-4px);
}

.finger-part.palm {
  fill: #ecc1a8;
}

.control-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink);
  background: var(--panel);
}

.button.primary {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

.keyboard-stage {
  padding: 13px;
  overflow: auto;
}

.finger-head {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.finger-head h1 {
  margin: 0 0 8px;
  font-size: 30px;
}

.finger-head p {
  margin: 0;
  color: var(--muted);
}

.eyebrow {
  margin-bottom: 6px !important;
  color: var(--blue) !important;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
}

.finger-progress-card {
  min-width: 160px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  text-align: center;
}

.finger-progress-card strong {
  display: block;
  color: var(--blue);
  font-size: 28px;
}

.finger-progress-card span {
  color: var(--muted);
  font-size: 13px;
}

.finger-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.finger-tabs button {
  min-width: 108px;
  height: 38px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-weight: 800;
  cursor: pointer;
}

.finger-tabs button.active {
  background: var(--blue);
  color: #fff;
}

.course-stage-list {
  display: grid;
  gap: 16px;
}

.course-stage {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.course-stage header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.course-stage h2 {
  margin: 0;
  font-size: 18px;
}

.course-stage header span {
  color: var(--muted);
  font-size: 13px;
}

.lesson-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.lesson-card {
  display: grid;
  gap: 7px;
  min-height: 122px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.lesson-card:hover {
  transform: translateY(-2px);
  border-color: rgba(47, 127, 209, 0.45);
  box-shadow: var(--shadow);
}

.lesson-card span,
.lesson-card small,
.lesson-card em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.lesson-card strong {
  font-size: 15px;
  line-height: 1.35;
}

.lesson-card.completed {
  border-color: rgba(45, 168, 107, 0.45);
  background: #f0fbf5;
}

.lesson-card.locked {
  opacity: 0.56;
  cursor: not-allowed;
}

.lesson-card.locked:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--line);
}

.finger-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(320px, 0.8fr);
  gap: 16px;
  margin-top: 16px;
}

.lesson-info {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.lesson-info h3 {
  margin: 8px 0 0;
  font-size: 14px;
}

.lesson-info h3:first-child {
  margin-top: 0;
}

.lesson-info p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.intro-lesson {
  display: grid;
  gap: 18px;
  align-content: center;
  min-height: 360px;
}

.intro-lesson h2 {
  margin: 0;
  font-size: 28px;
}

.intro-lesson p {
  margin: 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.9;
}

.practice-toolbar,
.mode-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.typing-capture {
  width: 100%;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0 14px;
  background: var(--panel);
  color: var(--ink);
  font-size: 16px;
}

.typing-capture:focus,
.free-config select:focus,
.free-textarea:focus {
  border-color: var(--blue);
  outline: 3px solid rgba(47, 127, 209, 0.14);
}

.button.primary-btn,
.button.primary {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

.button.ghost-btn {
  background: var(--panel);
  color: var(--ink);
}

.finger-mode-panel,
.result-panel {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.free-config {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.free-config label,
.challenge-setup label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.free-config select,
.challenge-setup select {
  height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0 12px;
  background: var(--panel-soft);
  color: var(--ink);
  font-size: 15px;
}

.free-textarea {
  display: none;
  width: 100%;
  min-height: 150px;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  background: var(--panel-soft);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.7;
  resize: vertical;
}

.free-textarea.visible {
  display: block;
}

.input-warning {
  border-color: var(--danger) !important;
}

.challenge-setup {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px auto;
  align-items: end;
  gap: 16px;
}

.challenge-setup h2 {
  margin: 0 0 8px;
}

.challenge-setup p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.challenge-key {
  display: grid;
  place-items: center;
  min-height: 280px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
  color: var(--blue);
  font-size: 88px;
  font-weight: 900;
}

.challenge-note {
  margin: 0;
  color: var(--muted);
}

.result-page {
  display: grid;
  place-items: center;
  min-height: calc(100vh - 96px);
}

.result-panel {
  width: min(700px, 100%);
}

.result-panel h2 {
  margin: 0 0 8px;
  font-size: 28px;
}

.result-panel > p {
  margin: 0 0 18px;
  color: var(--muted);
}

.result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.result-grid div {
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.result-grid span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 13px;
}

.result-grid strong {
  font-size: 18px;
}

.finger-practice {
  height: calc(100vh - 72px);
  min-height: 0;
  padding: 10px 14px;
  grid-template-rows: auto minmax(0, 1fr) 360px;
  gap: 10px;
  overflow: hidden;
}

.finger-practice .training-stats {
  gap: 8px;
}

.finger-practice .stat-box {
  min-height: 54px;
  padding: 8px 10px;
}

.finger-practice .stat-box strong {
  margin-top: 2px;
  font-size: 18px;
}

.finger-practice .practice-grid {
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 10px;
  min-height: 0;
}

.finger-practice .training-panel {
  min-height: 0;
  padding: 12px;
  grid-template-rows: auto minmax(0, 1fr) 40px;
  gap: 10px;
}

.finger-practice .practice-toolbar {
  min-height: 34px;
}

.finger-practice .button {
  min-height: 34px;
  padding: 0 12px;
}

.finger-practice .practice-text {
  min-height: 0;
  padding: 14px 16px;
  font-size: clamp(20px, 1.8vw, 28px);
  line-height: 1.48;
}

.finger-practice .typing-capture {
  height: 38px;
}

.finger-practice .side-panel {
  min-height: 0;
  padding: 10px;
  gap: 10px;
  overflow: hidden;
}

.finger-practice .hint-card {
  padding: 12px;
}

.finger-practice .hint-card label,
.finger-practice .hands-card label {
  margin-bottom: 5px;
  font-size: 12px;
}

.finger-practice .hint-card strong {
  font-size: 21px;
  line-height: 1.25;
}

.finger-practice .lesson-info {
  padding: 12px;
  gap: 5px;
  overflow: auto;
}

.finger-practice .lesson-info h3 {
  margin-top: 6px;
  font-size: 13px;
}

.finger-practice .lesson-info p {
  font-size: 13px;
  line-height: 1.45;
}

.finger-practice .finger-bottom {
  min-height: 0;
  height: 360px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 150px 200px;
  gap: 10px;
  margin-top: 0;
}

.finger-practice .keyboard-stage {
  min-height: 0;
  padding: 9px;
  overflow: hidden;
}

.finger-practice .keyboard {
  min-width: 640px;
  max-width: 760px;
  gap: 4px;
}

.finger-practice .key-row {
  gap: 4px;
}

.finger-practice .key {
  height: 34px;
  min-width: 34px;
  padding: 2px 5px;
  font-size: 12px;
  border-radius: 6px;
}

.finger-practice .key.wide-1 { min-width: 48px; }
.finger-practice .key.wide-2 { min-width: 62px; }
.finger-practice .key.wide-3 { min-width: 76px; }
.finger-practice .key.wide-4 { min-width: 92px; }
.finger-practice .key.space { min-width: 250px; }

.finger-practice .hands-card {
  min-height: 0;
  height: 150px;
  padding: 10px 14px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  justify-items: center;
  overflow: hidden;
}

.finger-practice .hands-visual {
  width: min(100%, 560px);
  height: 122px;
  aspect-ratio: auto;
  margin: 0 auto;
}

.finger-practice .finger-map-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.finger-practice.finger-hints-off .finger-only-hint {
  display: none;
}

.finger-practice.finger-hints-off .hands-card {
  opacity: 0.45;
}

.finger-practice.finger-hints-off .hands-card label::after {
  content: "（已在设置中关闭提示）";
  margin-left: 6px;
  color: var(--muted);
  font-weight: 400;
}

.keyboard {
  max-width: 900px;
  min-width: 760px;
  margin: 0 auto;
  display: grid;
  gap: 6px;
}

.key-row {
  display: flex;
  gap: 6px;
  justify-content: center;
}

.key {
  height: 42px;
  min-width: 42px;
  padding: 3px 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-bottom-color: var(--key-shadow);
  border-radius: 7px;
  background: var(--key);
  color: var(--ink);
  font-size: 13px;
  box-shadow: 0 2px 0 var(--key-shadow);
  transition: transform 80ms ease, background 140ms ease, border-color 140ms ease, color 140ms ease;
  user-select: none;
}

.key.finger-left-pinky,
.key.finger-right-pinky {
  background: #ffe7e7;
  border-color: #f6a7a7;
  color: #9e2f2f;
}

.key.finger-left-ring,
.key.finger-right-ring {
  background: #fff3cf;
  border-color: #efc65f;
  color: #825c00;
}

.key.finger-left-middle,
.key.finger-right-middle {
  background: #e9f8c9;
  border-color: #acd85c;
  color: #4f7415;
}

.key.finger-left-index,
.key.finger-right-index {
  background: #dff1ff;
  border-color: #86c5ed;
  color: #1b6596;
}

.key.finger-thumb {
  background: #f0e5ff;
  border-color: #bd96ed;
  color: #6d39aa;
}

body.dark .key.finger-left-pinky,
body.dark .key.finger-right-pinky {
  background: #4b1f24;
  border-color: #8b454e;
  color: #ffd1d6;
}

body.dark .key.finger-left-ring,
body.dark .key.finger-right-ring {
  background: #4c3913;
  border-color: #987235;
  color: #ffe2a0;
}

body.dark .key.finger-left-middle,
body.dark .key.finger-right-middle {
  background: #2e4217;
  border-color: #6f943c;
  color: #d8f7a5;
}

body.dark .key.finger-left-index,
body.dark .key.finger-right-index {
  background: #183c56;
  border-color: #4f86aa;
  color: #c9ecff;
}

body.dark .key.finger-thumb {
  background: #392153;
  border-color: #8060a7;
  color: #ead7ff;
}

.key.wide-1 { min-width: 58px; }
.key.wide-2 { min-width: 76px; }
.key.wide-3 { min-width: 92px; }
.key.wide-4 { min-width: 112px; }
.key.space { min-width: 310px; }

.key.next {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  transform: translateY(2px);
  box-shadow: 0 0 0 var(--key-shadow);
}

.key.done {
  filter: saturate(1.15) brightness(0.96);
  box-shadow: inset 0 0 0 2px rgba(45, 168, 107, 0.28), 0 2px 0 var(--key-shadow);
}

body.dark .key.done {
  filter: saturate(1.1) brightness(1.08);
}

.key.error {
  animation: key-error 260ms ease;
}

@keyframes key-error {
  0%, 100% { background: var(--key); }
  45% { background: var(--red); color: #fff; transform: translateY(2px); }
}

.settings-page {
  display: block;
  padding: 18px;
}

.settings-hero {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.settings-hero h1 {
  margin: 0 0 8px;
  font-size: 30px;
}

.settings-hero p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.settings-state {
  min-width: 170px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  text-align: center;
}

.settings-state strong {
  display: block;
  color: var(--blue);
  font-size: 28px;
}

.settings-state span {
  color: var(--muted);
  font-size: 13px;
}

.settings-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.settings-group {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.settings-group header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.settings-group h2 {
  margin: 0;
  font-size: 18px;
}

.settings-group header span {
  color: var(--muted);
  font-size: 13px;
}

.setting-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.setting-line > span,
.setting-stack > div:first-child {
  min-width: 0;
}

.setting-line strong {
  display: block;
  font-size: 16px;
}

.setting-line p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.setting-stack {
  align-items: stretch;
  flex-direction: column;
}

.switch-input {
  appearance: none;
  flex: 0 0 auto;
  width: 48px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #cbd6e3;
  position: relative;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}

.switch-input::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(15, 33, 51, 0.18);
  transition: transform 160ms ease;
}

.switch-input:checked {
  border-color: var(--blue);
  background: var(--blue);
}

.switch-input:checked::after {
  transform: translateX(20px);
}

.segmented-setting {
  display: inline-flex;
  width: fit-content;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.segmented-setting button {
  min-width: 82px;
  height: 36px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-weight: 800;
  cursor: pointer;
}

.segmented-setting button.active {
  background: var(--blue);
  color: #fff;
}

.range-setting {
  display: flex;
  align-items: center;
  gap: 14px;
}

.range-setting input {
  width: min(100%, 320px);
  accent-color: var(--blue);
}

.range-setting output {
  min-width: 46px;
  color: var(--blue-dark);
  font-weight: 800;
}

.settings-data-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.settings-data-grid div {
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.settings-data-grid strong {
  display: block;
  color: var(--blue);
  font-size: 24px;
}

.settings-data-grid span {
  color: var(--muted);
  font-size: 13px;
}

.account-page {
  min-height: calc(100vh - 72px);
  padding: 32px;
  display: grid;
  place-items: start center;
}

.account-panel {
  width: min(100%, 1080px);
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.account-head h1 {
  margin: 0 0 8px;
  font-size: 30px;
}

.account-head p {
  margin: 0;
  color: var(--muted);
}

.account-tabs {
  width: fit-content;
  display: inline-flex;
  gap: 4px;
  margin: 22px 0;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.account-tabs button {
  min-width: 104px;
  height: 38px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-weight: 800;
}

.account-tabs button.active {
  background: var(--blue);
  color: #fff;
}

.profile-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.profile-card {
  min-height: 158px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
  color: var(--ink);
  text-align: left;
}

.profile-card:hover {
  border-color: var(--blue);
  box-shadow: 0 10px 22px rgba(31, 94, 159, 0.1);
  transform: translateY(-1px);
}

.profile-card.new,
.profile-card.guest {
  background: #f9fcff;
}

.profile-avatar {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  font-size: 28px;
}

.profile-card strong {
  margin-top: 10px;
  font-size: 20px;
}

.profile-card small,
.manage-row small,
.empty-text {
  color: var(--muted);
  font-size: 13px;
}

.profile-form {
  display: grid;
  gap: 18px;
}

.profile-form label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-weight: 800;
}

.profile-form input[type="text"],
.profile-form input[type="password"],
.profile-form input:not([type]) {
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  background: #fff;
  color: var(--ink);
}

.inline-check {
  display: inline-flex !important;
  grid-template-columns: none;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-weight: 800;
}

.form-message {
  min-height: 24px;
  margin: 0;
  color: #b42318;
  font-weight: 800;
}

.account-server-status {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid #f2c7b8;
  border-radius: 8px;
  background: #fff5ef;
  color: #9f2f17;
  line-height: 1.6;
}

.account-server-status[hidden] {
  display: none;
}

.account-server-status strong {
  color: #8f2412;
}

.student-center {
  display: grid;
  gap: 18px;
}

.student-card {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.student-card h2 {
  margin: 0 0 6px;
}

.student-card p {
  margin: 3px 0;
  color: var(--muted);
}

.account-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.recent-panel {
  display: grid;
  gap: 10px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.recent-panel h2 {
  margin: 0;
}

.avatar-grid {
  display: grid;
  grid-template-columns: repeat(10, 48px);
  gap: 10px;
  margin-top: 10px;
}

.avatar-choice {
  display: block !important;
}

.avatar-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.avatar-choice span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  font-size: 26px;
}

.avatar-choice input:checked + span {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(47, 127, 209, 0.16);
}

.manage-list {
  display: grid;
  gap: 10px;
}

.manage-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.manage-row strong,
.manage-row small {
  display: block;
}

.danger-btn {
  border-color: #f3c3c3 !important;
  color: #bc3636 !important;
}

@media (max-width: 1200px) {
  .topbar {
    padding: 0 18px;
    gap: 12px;
  }

  .brand {
    min-width: 230px;
  }

  .home {
    grid-template-columns: 1fr;
    padding: 24px;
  }

  .hero-panel {
    min-height: 360px;
  }

  .training-stats {
    grid-template-columns: repeat(3, 1fr);
  }

  .practice-grid {
    grid-template-columns: 1fr;
  }

  .lesson-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .finger-bottom,
  .pinyin-bottom,
  .challenge-setup {
    grid-template-columns: 1fr;
  }

  .pinyin-workspace {
    grid-template-columns: 1fr;
  }

  .wubi-workspace {
    grid-template-columns: 1fr;
  }

  .speed-workspace {
    grid-template-columns: 1fr;
  }

  .settings-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .topbar {
    height: auto;
    min-height: 72px;
    flex-wrap: wrap;
    padding: 12px;
  }

  .brand {
    min-width: 0;
    flex: 1;
  }

  .topnav {
    order: 3;
    width: 100%;
    overflow-x: auto;
  }

  .home,
  .typing-page {
    padding: 12px;
  }

  .module-board,
  .quick-stats,
  .training-stats {
    grid-template-columns: 1fr;
  }

  .finger-head,
  .settings-hero,
  .free-config {
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .lesson-grid,
  .result-grid,
  .profile-grid,
  .settings-data-grid {
    grid-template-columns: 1fr;
  }

  .keyboard {
    min-width: 680px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* Wubi course system */
.wubi-dashboard.typing-page {
  display: block;
}

.wubi-dashboard .finger-head,
.wubi-start-page .pinyin-start-panel,
.wubi-setup-panel,
.wubi-result {
  max-width: 1280px;
  margin-inline: auto;
}

.wubi-dashboard .finger-head {
  max-width: none;
  margin-inline: 0;
}

.wubi-tabs {
  width: fit-content;
  min-width: 0;
  margin-bottom: 16px;
}

.wubi-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 14px;
  align-items: stretch;
}

.wubi-practice .training-stats {
  grid-template-columns: 1.25fr repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 10px;
}

.wubi-main {
  min-height: calc(100vh - 196px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wubi-target-area {
  flex: 1 1 auto;
  min-height: 240px;
  border: 1px solid #d5e4f3;
  border-radius: var(--radius);
  background: #edf6ff;
  padding: 22px;
  overflow: auto;
}

.wubi-target-card {
  min-height: 220px;
  display: grid;
  place-items: center;
  gap: 14px;
  text-align: center;
}

.wubi-display {
  min-height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.wubi-display strong {
  color: var(--text);
  font-size: clamp(56px, 6vw, 92px);
  font-weight: 800;
  line-height: 1;
}

.wubi-root-image {
  width: 180px;
  height: 180px;
  object-fit: contain;
  border: 1px solid #d5e4f3;
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.wubi-root-image.placeholder {
  width: 132px;
  height: 132px;
}

.wubi-code-row {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.wubi-code-row span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid #c6d9ed;
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-size: 22px;
  font-weight: 900;
}

.wubi-code-row span.current {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

.wubi-code-row span.done {
  border-color: #86c6a2;
  background: #e9f8ef;
  color: #237246;
}

.wubi-target-card p {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
}

.wubi-article-target {
  color: var(--text);
  font-size: clamp(28px, 3.2vw, 46px);
  line-height: 1.9;
  letter-spacing: 0;
}

.wubi-article-lines {
  width: 100%;
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 6px 8px;
}

.wubi-line-pair {
  display: grid;
  gap: 6px;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
}

.wubi-line-pair.current {
  border-color: #bcd8f2;
  background: #f8fcff;
}

.wubi-line-source,
.wubi-line-input {
  --wubi-cell: 1.12em;
  display: grid;
  grid-template-columns: repeat(var(--wubi-line-count, 24), var(--wubi-cell));
  align-items: center;
  min-height: 30px;
  color: var(--text);
  font-size: clamp(16px, 1.45vw, 24px);
  line-height: 1.2;
  letter-spacing: 0;
  word-break: keep-all;
  width: max-content;
  max-width: 100%;
  box-sizing: border-box;
}

.wubi-line-source {
  padding: 3px 7px;
  border: 2px solid transparent;
  border-radius: 8px;
}

.wubi-line-input {
  min-height: 34px;
  padding: 3px 7px;
  border: 2px solid #d5e4f3;
  border-radius: 8px;
  background: #fff;
}

.wubi-line-source span,
.wubi-line-input span {
  width: var(--wubi-cell);
  min-width: var(--wubi-cell);
  height: 1.35em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  text-align: center;
  box-sizing: border-box;
}

.wubi-line-input span.empty {
  color: transparent;
}

.wubi-line-input span.ok {
  color: #237246;
  background: #e9f8ef;
}

.wubi-line-input span.bad {
  color: #c23535;
  background: #ffe8e8;
}

.wubi-line-source span.ok {
  color: #237246;
}

.wubi-line-source span.bad {
  color: #c23535;
  background: #ffe8e8;
}

.wubi-line-source span.current {
  background: var(--blue);
  color: #fff;
}

.wubi-line-input span.caret {
  position: relative;
}

.wubi-line-input span.caret::after {
  content: "";
  position: absolute;
  left: 0.08em;
  top: 12%;
  width: 2px;
  height: 76%;
  background: var(--blue);
  animation: caretBlink 1s step-end infinite;
}

@keyframes caretBlink {
  50% { opacity: 0; }
}

.wubi-line-input-panel {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.wubi-line-mode .wubi-target-area {
  align-items: stretch;
  place-items: stretch;
  min-height: 220px;
  max-height: 320px;
  overflow: auto;
}

.wubi-article-target span {
  border-radius: 4px;
  padding: 1px 2px;
}

.wubi-article-target span.current {
  background: var(--blue);
  color: #fff;
}

.wubi-article-target span.ok {
  color: #237246;
}

.wubi-article-target span.bad {
  background: #ffe8e8;
  color: #c23535;
}

.wubi-input {
  width: 100%;
  height: 56px;
  border: 2px solid #d5e4f3;
  border-radius: 8px;
  padding: 0 18px;
  color: var(--text);
  background: #fff;
  font-size: 24px;
  font-weight: 800;
  outline: none;
}

.wubi-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(51, 132, 216, 0.14);
}

.wubi-keyboard-stage,
.wubi-root-map-stage {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  overflow-x: auto;
}

.wubi-root-map-stage {
  min-height: 260px;
  overflow: auto;
}

.wubi-full-root-map {
  margin: 0;
}

.wubi-full-root-map figcaption {
  margin-bottom: 8px;
  color: var(--muted);
  font-weight: 800;
}

.wubi-full-root-map img {
  display: block;
  width: 100%;
  max-height: 360px;
  object-fit: contain;
  object-position: top center;
}

.wubi-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wubi-side .hint-card,
.wubi-current-char-card,
.wubi-side-detail,
.wubi-breakdown-card,
.wubi-zone-card,
.wubi-chart {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  padding: 14px;
}

/* Unified training workspace: Wubi is the visual baseline */
.wubi-practice,
.pinyin-line-mode,
.finger-practice {
  height: calc(100vh - 72px);
  min-height: 0;
  padding: 10px 14px;
  gap: 10px;
  overflow: hidden;
}

.pinyin-line-mode,
.finger-practice {
  grid-template-rows: auto minmax(0, 1fr) 318px;
}

.wubi-practice .training-stats,
.pinyin-line-mode .training-stats,
.finger-practice .training-stats {
  grid-template-columns: 1.25fr repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 0;
}

.wubi-practice .stat-box,
.pinyin-line-mode .stat-box,
.finger-practice .stat-box {
  min-height: 58px;
  padding: 9px 12px;
  border-radius: 8px;
}

.wubi-practice .stat-box label,
.pinyin-line-mode .stat-box label,
.finger-practice .stat-box label {
  font-size: 12px;
}

.wubi-practice .stat-box strong,
.pinyin-line-mode .stat-box strong,
.finger-practice .stat-box strong {
  margin-top: 3px;
  font-size: 19px;
}

.wubi-workspace,
.pinyin-line-mode .pinyin-workspace,
.finger-practice .practice-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 14px;
  align-items: stretch;
  min-height: 0;
}

.wubi-main,
.pinyin-line-mode .pinyin-main,
.finger-practice .training-panel {
  min-height: 0;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wubi-target-area,
.pinyin-line-mode .pinyin-reader,
.finger-practice .practice-text {
  flex: 1 1 auto;
  min-height: 180px;
  border: 1px solid #d5e4f3;
  border-radius: var(--radius);
  background: #edf6ff;
  padding: 18px;
  overflow: auto;
}

.pinyin-line-mode .pinyin-reader {
  max-height: none;
}

.finger-practice .practice-text {
  font-size: clamp(20px, 1.7vw, 28px);
  line-height: 1.55;
}

.finger-practice .typing-capture {
  height: 46px;
  border: 2px solid #d5e4f3;
  border-radius: 8px;
  padding: 0 16px;
  background: #fff;
}

.finger-practice .typing-capture:focus {
  border-color: var(--blue);
  outline: 3px solid rgba(47, 127, 209, 0.14);
}

.wubi-side,
.pinyin-line-mode .pinyin-side,
.finger-practice .side-panel {
  min-height: 0;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: auto;
}

.pinyin-bottom,
.finger-practice .finger-bottom {
  min-height: 0;
  height: 318px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 128px 178px;
  gap: 10px;
}

.pinyin-hands-card,
.finger-practice .hands-card {
  height: 128px;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.pinyin-hands-card .hands-visual,
.finger-practice .hands-visual {
  width: min(100%, 560px);
  height: 100px;
  margin: 0 auto;
}

.pinyin-keyboard-stage,
.finger-practice .keyboard-stage {
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
}

.pinyin-keyboard-stage .keyboard,
.finger-practice .keyboard {
  min-width: 640px;
  max-width: 760px;
  gap: 4px;
}

.wubi-current-card {
  background: #dceeff !important;
}

.wubi-current-card strong {
  display: block;
  margin-top: 8px;
  color: var(--blue-dark);
  font-size: 34px;
}

.wubi-current-char-card {
  background: #dceeff;
}

.wubi-current-char-card label,
.wubi-current-char-card span {
  display: block;
  color: var(--muted);
  font-weight: 800;
}

.wubi-current-char-card strong {
  display: block;
  margin: 8px 0 4px;
  color: var(--blue-dark);
  font-size: 42px;
  line-height: 1.05;
}

.wubi-side-root-image {
  width: 124px;
  height: 124px;
  display: block;
  margin: 8px auto 0;
  object-fit: contain;
  border: 1px solid #d5e4f3;
  border-radius: 8px;
  background: #fff;
  padding: 8px;
}

.wubi-side-root-image.placeholder {
  opacity: 0.82;
}

.wubi-side-detail dl {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 8px 10px;
  margin: 0;
}

.wubi-side-detail dt {
  color: var(--muted);
  font-weight: 700;
}

.wubi-side-detail dd {
  margin: 0;
  color: var(--text);
  font-weight: 800;
  word-break: break-word;
}

.wubi-breakdown-card label {
  display: block;
  margin-bottom: 10px;
  color: var(--muted);
  font-weight: 800;
}

.wubi-breakdown-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  align-items: center;
}

.wubi-break-item {
  position: relative;
  width: auto;
  min-height: 86px;
  display: grid;
  grid-template-rows: 28px 48px;
  gap: 4px;
  justify-items: center;
  align-items: center;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.wubi-break-item.key-only {
  width: auto;
  min-height: 64px;
  grid-template-rows: 32px auto;
  background: #fff;
}

.wubi-break-item.representative {
  border-style: dashed;
}

.wubi-break-key {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--blue);
  color: #fff;
  font-family: Consolas, "Cascadia Mono", monospace;
  font-weight: 900;
}

.wubi-break-item.key-only .wubi-break-key {
  width: 38px;
  height: 38px;
  font-size: 19px;
}

.wubi-break-item small {
  color: var(--muted);
  font-size: 12px;
}

.wubi-break-item img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  border-radius: 6px;
  background: #fff;
}

.wubi-break-item img.placeholder {
  opacity: 0.55;
}

.wubi-break-item strong {
  display: none;
  max-width: 58px;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.25;
  text-align: center;
  word-break: break-all;
}

.wubi-break-arrow {
  display: none;
  color: var(--muted);
  font-weight: 900;
}

.wubi-break-item:not(:last-child)::after {
  content: "→";
  position: absolute;
  top: 50%;
  right: -9px;
  transform: translateY(-50%);
  color: var(--muted);
  font-weight: 900;
  z-index: 1;
}

.wubi-break-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.wubi-chart {
  margin: 0;
  padding: 10px;
}

.wubi-chart figcaption {
  margin-bottom: 8px;
  color: var(--muted);
  font-weight: 800;
}

.wubi-chart img {
  width: 100%;
  max-height: 360px;
  object-fit: contain;
  border-radius: 8px;
  background: #f7fbff;
}

.wubi-intro-card {
  min-height: 420px;
  border: 1px solid #d5e4f3;
  border-radius: var(--radius);
  background: #edf6ff;
  padding: 28px;
}

.wubi-intro-card h2 {
  margin: 0 0 16px;
  font-size: 30px;
}

.wubi-intro-card p {
  margin: 0 0 12px;
  color: var(--text);
  font-size: 18px;
  line-height: 1.8;
}

.wubi-setup-panel {
  padding: 24px;
}

.wubi-setup-panel h2 {
  margin: 0 0 8px;
}

.setup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 240px));
  gap: 14px;
  margin: 18px 0;
}

.setup-grid label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-weight: 800;
}

.setup-grid select,
.free-textarea {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font: inherit;
}

.setup-grid select {
  height: 42px;
  padding: 0 10px;
}

.free-textarea {
  width: 100%;
  min-height: 130px;
  margin-bottom: 16px;
  padding: 12px;
  resize: vertical;
}

.speed-duration-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.wubi-result,
.pinyin-result {
  display: block;
  width: min(700px, 100%);
  margin: 0 auto;
  padding: 24px 28px;
  text-align: center;
}

.result-stars,
.stars {
  color: #f4b740;
  font-size: 34px;
  letter-spacing: 4px;
}

.wubi-result .pass,
.pinyin-result .pass {
  color: #237246;
  font-weight: 900;
}

.wubi-result .retry,
.pinyin-result .retry {
  color: #c46a1a;
  font-weight: 900;
}

.training-panel.speed-result {
  display: block;
  grid-template-rows: none;
}

.training-panel.speed-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.7fr);
  grid-template-rows: none;
  min-height: auto;
  align-items: center;
}

@media (max-width: 1200px) {
  .wubi-workspace {
    grid-template-columns: 1fr;
  }

  .wubi-main {
    min-height: auto;
  }

  .wubi-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .wubi-tabs {
    min-width: 0;
    width: 100%;
  }

  .wubi-practice .training-stats,
  .setup-grid {
    grid-template-columns: 1fr;
  }

  .wubi-display {
    flex-direction: column;
  }
}

/* Final practice alignment across Wubi, Pinyin and Finger lessons */
.wubi-workspace,
.pinyin-line-mode .pinyin-workspace,
.finger-practice .practice-grid {
  grid-template-columns: minmax(0, 1fr) 320px;
}

.pinyin-line-mode .pinyin-reader,
.finger-practice .practice-text,
.wubi-target-area {
  box-shadow: inset 0 0 0 1px rgba(188, 216, 242, 0.45);
}

.pinyin-line-mode .pinyin-bottom,
.finger-practice .finger-bottom {
  margin-top: 0;
}

.pinyin-line-mode .pinyin-keyboard-stage,
.finger-practice .keyboard-stage,
.wubi-root-map-stage {
  box-shadow: none;
}

@media (max-width: 1200px) {
  .wubi-workspace,
  .pinyin-line-mode .pinyin-workspace,
  .finger-practice .practice-grid {
    grid-template-columns: 1fr;
  }

  .wubi-side,
  .pinyin-line-mode .pinyin-side,
  .finger-practice .side-panel {
    max-height: 220px;
  }

  .pinyin-line-mode,
  .finger-practice {
    height: auto;
    min-height: calc(100vh - 72px);
    overflow: visible;
  }
}

@media (max-width: 760px) {
  .wubi-practice .training-stats,
  .pinyin-line-mode .training-stats,
  .finger-practice .training-stats {
    grid-template-columns: 1fr;
  }

  .pinyin-line-mode .pinyin-bottom,
  .finger-practice .finger-bottom {
    height: auto;
    grid-template-rows: 128px 178px;
  }

  .pinyin-line-mode .pinyin-reader,
  .finger-practice .practice-text,
  .wubi-target-area {
    min-height: 160px;
    padding: 14px;
  }
}