:root {
  --training-font: Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  --training-serif: Georgia, "Songti SC", STSong, serif;
  --training-page-width: 1120px;
  --training-sidebar-width: 270px;
  --training-gap: 18px;
  --training-radius: 22px;
  --training-control-height: 52px;
  --training-touch-height: 44px;
  --training-title-size: clamp(26px, 3vw, 36px);
  --training-body-size: 14px;
  --training-label-size: 14px;
  --training-meta-size: 12px;
}

html { font-size:16px; }
body, button, input { font-family:var(--training-font); }
button { font-size:var(--training-label-size); }

/* Shared listening-app frame */
.training-layout {
  width:min(var(--training-page-width), calc(100% - 36px));
  max-width:none;
  margin:0 auto;
  padding:22px 0 40px;
  display:grid;
  grid-template-columns:var(--training-sidebar-width) minmax(0, 1fr);
  gap:var(--training-gap);
  align-items:start;
}
.settings-card, .practice-card {
  min-width:0;
  height:clamp(600px, calc(100vh - 160px), 705px);
  min-height:600px;
  border-radius:var(--training-radius);
}
.settings-card { padding:20px; }
.practice-card { overflow:hidden; }
.section-label>span { width:28px; height:28px; font-size:11px; }
.section-label p, .settings-card legend, .setting-group>span {
  font-size:12px;
  line-height:1.4;
}
.settings-card fieldset {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin:20px 0 8px;
}
.settings-card fieldset legend { grid-column:1/-1; }
.level-option { margin:0; }
.level-option>span, .choice-row button {
  min-height:var(--training-control-height);
  padding:10px 12px;
  border-radius:11px;
}
.level-option b, .choice-row button { font-size:var(--training-label-size); }
.level-option small, .choice-row button small, .sound-mode small,
.direction-mode small, .attempts small, .listening-stage>p {
  font-size:var(--training-meta-size);
  line-height:1.45;
}
.sound-mode b, .direction-mode b { font-size:var(--training-label-size); }
.shortcut-note { font-size:12px; }
.shortcut-note kbd { font-size:12px; }
.question-head { min-height:64px; padding:0 22px; }
.listening-stage { min-height:250px; }
.play-button { width:112px; height:112px; }
.play-button>span { font-size:14px; }
.play-button small { font-size:12px; }
.answer-grid { gap:10px; padding:16px; }
.answer-button { min-height:62px; padding:13px 12px; }
.answer-button strong { font-size:16px; line-height:1.3; }
.answer-button small { font-size:12px; line-height:1.4; }
.answer-button .key { width:20px; height:20px; font-size:10px; }
.answer-grid.many-options { gap:8px; padding:14px 16px 16px; }
.answer-grid.many-options .answer-button { min-height:56px; padding:10px; }
.answer-grid.many-options .answer-button strong { font-size:14px; }
.feedback { margin:0 16px 16px; padding:14px 16px; gap:12px; }
.feedback h2 { font-size:20px; }
.feedback-copy>p, .feedback p { font-size:12px; line-height:1.5; }
.note-pills span { font-size:12px; }
.next-button { min-height:44px; padding:11px 16px; font-size:14px; }
.practice-card.answered .answer-button strong { font-size:14px; }
.practice-card.answered .answer-button small { font-size:11px; }
.practice-card.answered .feedback h2 { font-size:18px; }

/* Shared writing-app frame; staff SVG geometry is intentionally untouched. */
body>main:not(.app-shell) {
  width:min(1120px, calc(100% - 36px));
  margin:22px auto 54px;
}
.modes { gap:10px; margin-bottom:14px; }
.modes button { min-height:72px; padding:13px 18px; }
.modes b { font-size:14px; }
.modes small { font-size:11px; line-height:1.4; }
.question { min-height:108px; padding:20px 22px; }
.question h1 { font-size:var(--training-title-size); }
.question p { font-size:var(--training-body-size); line-height:1.65; }
.question>div>small { font-size:12px; }
.ear-settings .setting-group>span, .construction-guide .setting-group>span {
  font-size:12px;
}
.ear-settings .choice-row button, .construction-guide .choice-row button,
.construction-sound-modes button {
  min-height:50px;
  padding:9px 10px;
  font-size:13px;
}
.ear-settings .choice-row button small, .construction-guide .choice-row button small,
.construction-sound-modes button small {
  font-size:10px;
  line-height:1.35;
}
.listen-panel .play { width:116px; height:116px; min-height:116px; }
.listen-panel .play b { font-size:13px; }
.listen-panel .play small { font-size:10px; }
.card footer { min-height:74px; padding:13px 24px; gap:18px; }
.card footer>span { font-size:12px; }
.card footer button {
  min-width:150px;
  min-height:44px;
  padding:11px 18px;
  font-size:14px;
}
.card footer .secondary { min-width:76px; }
.tip { padding:14px 18px; }
.tip b, .tip p { font-size:12px; }

@media (min-width:981px) {
  .settings-card, .practice-card {
    height:clamp(600px, calc(100vh - 160px), 705px);
    min-height:600px;
  }
  .settings-card { display:flex; flex-direction:column; }
  .settings-card .shortcut-note { margin-top:auto; }
  .practice-card { display:flex; flex-direction:column; }
  .practice-card .listening-stage { flex:1; min-height:250px; }
}

@media (max-width:980px) {
  .training-layout {
    width:min(760px, calc(100% - 32px));
    grid-template-columns:1fr;
    padding-top:18px;
  }
  .settings-card, .practice-card { min-height:0; height:auto; }
  .settings-card { display:block; }
  .settings-card fieldset { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .level-option { margin:0; }
  .settings-card .choice-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .settings-card .compact-options { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .shortcut-note { display:none; }
}

@media (max-width:800px) {
  body>main:not(.app-shell) { width:calc(100% - 24px); margin-top:16px; }
  .question { min-height:0; padding:18px; }
  .train-sidebar .ear-settings, .train-sidebar .construction-guide { padding:14px; }
  .train-sidebar .listen-panel { min-height:176px; }
}

@media (max-width:700px) {
  .training-layout { width:calc(100% - 24px); padding-top:12px; gap:12px; }
  .settings-card { padding:14px; border-radius:18px; }
  .practice-card { border-radius:18px; }
  .level-option>span, .choice-row button { min-height:48px; padding:9px 10px; }
  .question-head { min-height:58px; padding:0 14px; }
  .listening-stage { min-height:220px; }
  .play-button { width:96px; height:96px; }
  .play-button>span { font-size:13px; }
  .answer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:10px; }
  .answer-grid.many-options { grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; padding:10px; }
  .answer-button { min-height:54px; padding:10px; }
  .answer-button strong { font-size:14px; }
  .answer-button small { font-size:11px; }
  .feedback { grid-template-columns:32px 1fr; margin:0 10px 10px; padding:12px; }
  .next-button { grid-column:1/3; width:100%; }
}

@media (max-width:560px) {
  body>main:not(.app-shell) { width:calc(100% - 20px); margin:12px auto 32px; }
  .modes { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-bottom:10px; }
  .modes button { min-height:60px; padding:9px 10px; grid-template-columns:28px minmax(0,1fr); }
  .modes i { font-size:17px; }
  .modes b { font-size:13px; }
  .modes small { font-size:10px; }
  .question { padding:16px; }
  .question h1 { font-size:clamp(24px,8vw,32px); }
  .question p { font-size:13px; }
  .train-sidebar .ear-settings, .train-sidebar .construction-guide { padding:10px; }
  .ear-settings .choice-row button, .construction-guide .choice-row button,
  .construction-sound-modes button { min-height:44px; padding:7px 6px; font-size:12px; }
  .ear-settings .choice-row button small, .construction-guide .choice-row button small,
  .construction-sound-modes button small { font-size:9px; }
  .train-sidebar .listen-panel { min-height:138px; }
  .listen-panel .play { width:94px; height:94px; min-height:94px; }
  .paper { padding:8px; }
  #staff { width:100%; height:auto; }
  .card footer { min-height:66px; padding:10px 12px; gap:10px; }
  .card footer>span { font-size:11px; }
  .card footer button { min-width:118px; min-height:44px; padding:10px 12px; font-size:13px; }
  .card footer .secondary { min-width:62px; }
}