:root {
  --navy:#173b57;
  --ink:#153247;
  --cream:#fff9ea;
  --paper:#fffdf7;
  --yellow:#ffd34e;
  --orange:#ff7657;
  --mint:#85d8bd;
  --blue:#6fbde2;
  --line:#d9e5e6;
  --muted:#647985;
  --shadow:0 18px 50px rgba(23,59,87,.13);
  font-family:"Avenir Next","Trebuchet MS",-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--ink);
  background:#f4f8f5
}

* {
  box-sizing:border-box
}

body {
  margin:0;
  min-width:320px;
  background:radial-gradient(circle at 12% 8%,rgba(255,211,78,.22),transparent 25rem),#f4f8f5
}

button,input,select {
  font:inherit
}

button {
  color:inherit
}

button:focus-visible,input:focus-visible,select:focus-visible,.flashcard:focus-visible {
  outline:4px solid rgba(255,118,87,.35);
  outline-offset:3px
}

.app-shell {
  max-width:1500px;
  margin:auto;
  min-height:100vh
}

.topbar {
  height:86px;
  padding:0 clamp(20px,4vw,64px);
  display:flex;
  align-items:center;
  justify-content:space-between
}

.brand {
  display:flex;
  align-items:center;
  gap:12px;
  color:inherit;
  text-decoration:none
}

.brand-mark {
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  background:var(--navy);
  color:white;
  border-radius:16px 16px 16px 5px;
  font:900 20px/1 Georgia,serif;
  transform:rotate(-3deg)
}

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

.brand strong {
  font-size:20px
}

.brand small {
  color:var(--muted);
  margin-top:2px
}

.top-actions {
  display:flex;
  gap:12px;
  align-items:center
}

.icon-button {
  border:1px solid var(--line);
  background:rgba(255,255,255,.8);
  height:44px;
  border-radius:14px;
  cursor:pointer;
  padding:0 16px
}

.hero {
  margin:0 clamp(16px,3vw,48px);
  padding:clamp(28px,5vw,70px);
  background:var(--navy);
  color:white;
  border-radius:38px 38px 12px 38px;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(32px,6vw,90px);
  position:relative;
  overflow:hidden
}

.hero:after {
  content:"";
  position:absolute;
  width:310px;
  height:310px;
  border:2px dashed rgba(255,255,255,.16);
  border-radius:50%;
  right:-110px;
  top:-130px
}

.eyebrow,.panel-label {
  letter-spacing:.15em;
  font-weight:900;
  font-size:12px
}

.eyebrow {
  color:var(--yellow)
}

.hero h1 {
  font-family:Georgia,"Songti SC",serif;
  font-size:clamp(42px,6vw,76px);
  line-height:.98;
  margin:16px 0 24px;
  letter-spacing:-.045em
}

.hero h1 em {
  font-style:normal;
  color:var(--yellow)
}

.hero-copy>p:last-of-type {
  max-width:520px;
  color:#d9e8ec;
  font-size:17px;
  line-height:1.8
}

.hero-actions {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:30px
}

.primary-button,.secondary-button,.shuffle-button,.nav-button,.master-button {
  min-height:48px;
  border-radius:15px;
  border:0;
  padding:0 22px;
  font-weight:900;
  cursor:pointer
}

.primary-button {
  background:var(--yellow);
  color:var(--navy);
  box-shadow:0 7px 0 #cba42b
}

.secondary-button {
  background:transparent;
  color:white;
  border:1px solid rgba(255,255,255,.35)
}

.route-card {
  align-self:center;
  background:var(--paper);
  color:var(--ink);
  padding:28px;
  border-radius:26px 26px 8px 26px;
  box-shadow:0 28px 60px rgba(0,0,0,.18);
  position:relative;
  z-index:1
}

.route-meta {
  display:flex;
  justify-content:space-between;
  font-weight:800
}

.route-track {
  height:12px;
  background:#dfeaec;
  border-radius:99px;
  margin:40px 0 22px;
  position:relative
}

.route-fill {
  height:100%;
  width:0;
  background:var(--orange);
  border-radius:inherit;
  transition:width .5s
}

.route-boat {
  position:absolute;
  top:50%;
  left:0;
  transform:translate(-50%,-50%) rotate(-8deg);
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  background:var(--yellow);
  border:3px solid var(--paper);
  border-radius:50%;
  color:var(--navy);
  transition:left .5s
}

.route-stops {
  display:flex;
  gap:4px
}

.route-stops span {
  flex:1;
  min-width:0;
  text-align:center;
  font-size:10px;
  color:var(--muted);
  font-weight:800
}

.route-card p {
  margin:24px 0 0;
  color:var(--muted);
  line-height:1.6
}

.control-deck {
  margin:26px clamp(16px,3vw,48px) 18px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center
}

.unit-tabs {
  display:flex;
  gap:8px;
  overflow:auto;
  padding:4px
}

.unit-tab,.mode-button {
  border:0;
  background:transparent;
  cursor:pointer;
  white-space:nowrap;
  font-weight:800
}

.unit-tab {
  padding:10px 14px;
  border-radius:12px;
  color:var(--muted)
}

.unit-tab.active {
  background:var(--navy);
  color:white
}

.mode-switch {
  display:flex;
  background:white;
  border:1px solid var(--line);
  padding:5px;
  border-radius:15px;
  box-shadow:0 6px 20px rgba(23,59,87,.06)
}

.mode-button {
  padding:9px 14px;
  border-radius:10px;
  color:var(--muted)
}

.mode-button.active {
  background:var(--yellow);
  color:var(--navy)
}

.view {
  display:none
}

.view.active {
  display:grid
}

.learning-layout {
  grid-template-columns:280px minmax(0,1fr);
  gap:24px;
  margin:0 clamp(16px,3vw,48px) 50px
}

.session-panel {
  background:white;
  border:1px solid var(--line);
  border-radius:24px 24px 8px 24px;
  padding:26px;
  display:flex;
  flex-direction:column;
  gap:26px
}

.panel-label {
  color:var(--orange)
}

.session-panel h2,.list-toolbar h2,.quiz-header h2 {
  font:800 30px/1.15 Georgia,"Songti SC",serif;
  margin:8px 0
}

.session-panel p {
  color:var(--muted)
}

.session-stats {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px
}

.session-stats div {
  background:var(--cream);
  padding:16px;
  border-radius:15px
}

.session-stats strong,.session-stats span {
  display:block
}

.session-stats strong {
  font-size:28px
}

.session-stats span {
  font-size:12px;
  color:var(--muted)
}

.toggle-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  cursor:pointer
}

.toggle-row strong,.toggle-row small {
  display:block
}

.toggle-row small {
  color:var(--muted);
  margin-top:4px
}

.toggle-row input {
  position:absolute;
  opacity:0
}

.toggle-row i {
  width:48px;
  height:28px;
  background:#ccd8d9;
  border-radius:99px;
  position:relative;
  transition:.2s
}

.toggle-row i:after {
  content:"";
  position:absolute;
  width:22px;
  height:22px;
  background:white;
  border-radius:50%;
  left:3px;
  top:3px;
  transition:.2s
}

.toggle-row input:checked+i {
  background:var(--mint)
}

.toggle-row input:checked+i:after {
  left:23px
}

.shuffle-button {
  margin-top:auto;
  background:white;
  border:2px solid var(--navy)
}

.flashcard-stage {
  min-width:0;
  background:linear-gradient(135deg,#e4f4ef,#d9edf7);
  border-radius:30px 30px 10px 30px;
  padding:20px clamp(18px,4vw,48px) 28px;
  display:flex;
  flex-direction:column;
  align-items:center
}

.card-counter {
  width:min(100%,650px);
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:var(--muted);
  font-weight:800
}

.card-counter div {
  display:flex;
  gap:8px
}

.card-counter button {
  border:0;
  background:rgba(255,255,255,.75);
  padding:8px 12px;
  border-radius:10px;
  cursor:pointer
}

.flashcard {
  width:min(100%,650px);
  height:390px;
  margin:16px auto 18px;
  position:relative;
  transform-style:preserve-3d;
  transition:transform .5s;
  cursor:pointer
}

.flashcard.flipped {
  transform:rotateY(180deg)
}

.card-face {
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  background:var(--paper);
  border-radius:34px 34px 10px 34px;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:28px 24px 36px;
  text-align:center;
  border:1px solid rgba(23,59,87,.08)
}

.card-back {
  transform:rotateY(180deg);
  background:var(--navy);
  color:white
}

.save-button {
  position:absolute;
  right:24px;
  top:20px;
  border:0;
  background:transparent;
  font-size:34px;
  color:var(--orange);
  cursor:pointer
}

.save-button.saved {
  color:var(--orange)
}

.word-type {
  font-size:11px;
  letter-spacing:.18em;
  font-weight:900;
  color:var(--orange)
}

.card-face h2 {
  font:800 clamp(32px,5vw,56px)/1.15 Georgia,"Times New Roman",serif;
  margin:14px 0 6px;
  max-width:100%;
  overflow-wrap:anywhere;
  text-wrap:pretty
}

.card-face h2.long-word {
  font-size:clamp(24px,3.8vw,38px);
  line-height:1.2
}

.card-face h2.xlong-word {
  font-size:clamp(20px,3vw,28px);
  line-height:1.25
}

.card-back h2 {
  font-family:"Avenir Next","PingFang SC",sans-serif;
  font-size:clamp(30px,4.5vw,46px);
  margin:14px 0 6px
}

.card-back h2.long-meaning {
  font-size:clamp(22px,3.2vw,32px)
}

.phonetic {
  color:var(--muted);
  font-size:15px;
  margin:4px 0 0;
  line-height:1.4
}

.card-back>p {
  color:#cfe0e7;
  font-size:16px;
  margin:4px 0 12px
}

.speaker-orb {
  width:58px;
  height:58px;
  border-radius:50%;
  border:0;
  background:var(--yellow);
  color:var(--navy);
  cursor:pointer;
  box-shadow:0 6px 0 #d2aa2d;
  margin-top:14px
}

.example-speak {
  border:1px solid rgba(255,255,255,.35);
  color:white;
  background:transparent;
  border-radius:12px;
  padding:10px 16px;
  cursor:pointer
}

.flip-hint {
  position:absolute;
  bottom:12px!important;
  font-size:12px!important;
  color:#82939a!important;
  pointer-events:none
}

.card-actions {
  display:grid;
  grid-template-columns:1fr 1.35fr 1fr;
  gap:12px;
  width:min(100%,650px)
}

.nav-button {
  background:white;
  border:1px solid var(--line)
}

.master-button {
  background:var(--mint);
  color:var(--navy)
}

.master-button.mastered {
  background:var(--navy);
  color:white
}

.quiz-view,.list-view {
  margin:0 clamp(16px,3vw,48px) 50px
}

.quiz-view.active {
  display:block
}

.quiz-header,.list-toolbar {
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin:30px 0 18px
}

.quiz-score {
  background:var(--yellow);
  padding:12px 20px;
  border-radius:16px;
  text-align:center
}

.quiz-score strong,.quiz-score span {
  display:block
}

.quiz-score strong {
  font-size:28px
}

.quiz-score span {
  font-size:11px
}

.quiz-card {
  max-width:780px;
  margin:auto;
  background:white;
  border:1px solid var(--line);
  border-radius:30px 30px 10px 30px;
  padding:clamp(24px,5vw,56px);
  text-align:center;
  box-shadow:var(--shadow)
}

.quiz-card>p {
  color:var(--muted)
}

.quiz-word {
  border:0;
  background:transparent;
  display:flex;
  flex-direction:column;
  margin:20px auto 36px;
  cursor:pointer
}

.quiz-word span {
  font:800 clamp(38px,6vw,64px)/1.1 Georgia,serif
}

.quiz-word small {
  color:var(--orange);
  margin-top:8px
}

.answer-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px
}

.answer-button {
  min-height:80px;
  border:2px solid var(--line);
  background:var(--paper);
  border-radius:16px;
  padding:12px;
  cursor:pointer;
  font-weight:800
}

.answer-button:hover {
  border-color:var(--blue)
}

.answer-button.correct {
  background:#d8f4e7;
  border-color:#54b98e
}

.answer-button.wrong {
  background:#ffe1dc;
  border-color:var(--orange)
}

.quiz-feedback {
  min-height:48px;
  padding:15px;
  font-weight:800
}

.quiz-next {
  display:none;
  margin:auto
}

.quiz-next.show {
  display:block
}

.list-view.active {
  display:block
}

.search-box {
  display:flex;
  align-items:center;
  gap:10px;
  background:white;
  border:1px solid var(--line);
  padding:8px 14px;
  border-radius:14px
}

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

.search-box input {
  border:0;
  outline:0;
  background:transparent;
  min-width:220px
}

.word-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px
}

.word-row {
  background:white;
  border:1px solid var(--line);
  padding:17px;
  border-radius:16px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  align-items:center
}

.word-row strong,.word-row span {
  display:block
}

.word-row strong {
  font-family:Georgia,serif;
  font-size:19px
}

.word-row span {
  color:var(--muted);
  margin-top:5px
}

.word-row button {
  width:42px;
  height:42px;
  border-radius:50%;
  border:0;
  background:var(--cream);
  cursor:pointer
}

dialog {
  border:0;
  border-radius:26px;
  padding:0;
  box-shadow:0 30px 90px rgba(0,0,0,.25);
  width:min(90vw,460px)
}

dialog::backdrop {
  background:rgba(12,35,50,.55);
  backdrop-filter:blur(4px)
}

dialog form {
  padding:28px;
  display:grid;
  gap:22px
}

.dialog-head {
  display:flex;
  justify-content:space-between
}

.dialog-head h2 {
  margin:5px 0
}

.dialog-head button {
  border:0;
  background:transparent;
  font-size:28px;
  cursor:pointer
}

dialog label {
  display:grid;
  gap:9px;
  font-weight:800
}

dialog select {
  padding:12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:white
}

dialog output {
  color:var(--orange)
}

dialog p {
  font-size:13px;
  color:var(--muted);
  line-height:1.6
}

.toast {
  position:fixed;
  left:50%;
  bottom:24px;
  transform:translate(-50%,30px);
  background:var(--navy);
  color:white;
  padding:12px 20px;
  border-radius:14px;
  opacity:0;
  pointer-events:none;
  transition:.25s;
  z-index:10
}

.toast.show {
  opacity:1;
  transform:translate(-50%,0)
}

@media(max-width:900px) {
  .hero {
    grid-template-columns:1fr
  }
  .learning-layout {
    grid-template-columns:1fr
  }
  .session-panel {
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center
  }
  .session-panel .shuffle-button {
    margin:0
  }
  .control-deck {
    align-items:stretch;
    flex-direction:column
  }
  .word-grid {
    grid-template-columns:repeat(2,1fr)
  }
}

@media(max-width:620px) {
  .topbar {
    height:74px
  }
  .brand small,.icon-button {
    display:none
  }
  .hero {
    border-radius:26px 26px 8px 26px;
    padding:28px 22px
  }
  .hero h1 {
    font-size:42px
  }
  .hero-actions>* {
    width:100%
  }
  .route-card {
    padding:20px
  }
  .control-deck {
    margin-top:14px
  }
  .mode-switch>* {
    flex:1
  }
  .mode-button {
    font-size:13px;
    padding:9px 7px
  }
  .learning-layout {
    gap:12px
  }
  .session-panel {
    grid-template-columns:1fr 1fr;
    padding:18px;
    gap:14px
  }
  .session-panel>div:first-child,.toggle-row {
    grid-column:1/-1
  }
  .flashcard-stage {
    padding:14px 12px 22px
  }
  .flashcard {
    height:360px
  }
  .card-face {
    padding:26px 18px
  }
  .card-actions {
    grid-template-columns:1fr 1fr
  }
  .master-button {
    grid-column:1/-1;
    grid-row:1
  }
  .answer-grid {
    grid-template-columns:1fr
  }
  .quiz-header,.list-toolbar {
    align-items:stretch;
    flex-direction:column;
    gap:12px
  }
  .search-box input {
    min-width:0;
    width:100%
  }
  .word-grid {
    grid-template-columns:1fr
  }
  .route-stops span {
    font-size:8px
  }
}

@media(prefers-reduced-motion:reduce) {
  * {
    scroll-behavior:auto!important;
    transition:none!important
  }
}

.dictation-view {
  margin:0 clamp(16px,3vw,48px) 50px
}

.dictation-view.active {
  display:block
}

.dictation-header {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:24px;
  margin:30px 0 18px
}

.dictation-header h2 {
  font:800 30px/1.15 Georgia,"Songti SC",serif;
  margin:8px 0
}

.dictation-header p {
  margin:0;
  color:var(--muted)
}

.dictation-settings {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end
}

.dictation-settings label {
  display:grid;
  gap:5px;
  color:var(--muted);
  font-size:11px;
  font-weight:800
}

.dictation-settings select {
  min-height:42px;
  border:1px solid var(--line);
  background:white;
  border-radius:12px;
  padding:0 12px;
  color:var(--ink);
  font-weight:800
}

.dictation-card {
  max-width:780px;
  margin:auto;
  background:linear-gradient(135deg,#fffdf7,#fff8df);
  border:1px solid var(--line);
  border-radius:30px 30px 10px 30px;
  padding:clamp(24px,5vw,54px);
  box-shadow:var(--shadow);
  text-align:center
}

.dictation-meta {
  display:flex;
  justify-content:space-between;
  color:var(--muted)
}

.dictation-meta span {
  display:flex;
  gap:12px;
  align-items:center
}

.dictation-meta i {
  font-style:normal;
  font-size:12px
}

.dictation-meta i.running {
  color:var(--orange);
  font-weight:900
}

.dictation-progress {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:8px;
  margin:18px 0 36px
}

.dictation-progress span {
  height:7px;
  border-radius:99px;
  background:#dce6e7
}

.dictation-progress span.current {
  background:var(--yellow)
}

.dictation-progress span.done {
  background:var(--mint)
}

.dictation-prompt {
  border:0;
  background:transparent;
  display:flex;
  flex-direction:column;
  align-items:center;
  margin:auto;
  cursor:pointer
}

.dictation-prompt span {
  font-weight:900;
  font-size:clamp(36px,6vw,62px);
  line-height:1.35
}

.dictation-prompt small {
  margin-top:12px;
  color:var(--orange)
}

.dictation-hint {
  color:var(--muted);
  margin:26px 0 16px
}

.dictation-answer {
  min-height:120px;
  background:var(--navy);
  color:white;
  border-radius:22px 22px 7px 22px;
  padding:20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:.22s
}

.dictation-answer.show {
  opacity:1;
  visibility:visible;
  transform:none
}

.dictation-answer span {
  color:#cfe0e7;
  font-size:12px
}

.dictation-answer strong {
  font:800 clamp(28px,5vw,44px)/1.1 Georgia,serif
}

.dictation-answer button {
  border:1px solid rgba(255,255,255,.35);
  background:transparent;
  color:white;
  border-radius:10px;
  padding:8px 12px;
  cursor:pointer
}

.dictation-actions {
  display:grid;
  grid-template-columns:1fr 1.6fr 1fr;
  gap:12px;
  margin-top:20px
}

.dictation-restart-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border:1px solid var(--line);
  background:var(--paper);
  color:var(--muted);
  border-radius:6px;
  font-size:13px;
  line-height:1;
  cursor:pointer;
  padding:0;
  transition:all .15s ease;
  vertical-align:middle;
}

.dictation-restart-btn:hover {
  color:var(--navy);
  border-color:var(--blue);
  background:white;
  transform:rotate(-45deg);
}

@media(max-width:620px) {
  .dictation-header {
    align-items:stretch;
    flex-direction:column
  }
  .dictation-settings {
    justify-content:stretch
  }
  .dictation-settings label {
    flex:1;
    min-width:120px
  }
  .dictation-card {
    padding:22px 16px
  }
  .dictation-actions {
    grid-template-columns:1fr 1fr
  }
  .dictation-actions .master-button {
    grid-column:1/-1;
    grid-row:1
  }
  .mode-switch {
    overflow-x:auto
  }
  .mode-button {
    min-width:max-content
  }
}

/* 两个听写页面共用卡片尺寸、排版与控制布局。 */
.paper-dictation .dictation-header {
  gap: 16px;
  margin: 20px 0 14px;
}

.paper-dictation .dictation-header h2 {
  font-size: clamp(22px, 2.2vw, 28px);
}

.paper-dictation .dictation-header p {
  font-size: 14px;
  line-height: 1.5;
}

.dictation-stage {
  max-width: 780px;
  margin: auto;
}

.paper-dictation .dictation-meta {
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 14px;
}

.paper-dictation .dictation-meta > span {
  max-width: 100%;
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px 10px;
  text-align: right;
}

.paper-dictation .dictation-meta b {
  white-space: nowrap;
}

.paper-dictation .dictation-progress {
  width: min(100%, 650px);
  gap: 6px;
  margin: 12px 0 0;
}

.paper-dictation .dictation-badge {
  margin-bottom: 8px;
}

/* 沿用 styles.css 的翻转动画和固定高度，仅适配较长的短语与句型。 */
.dictation-flashcard .card-face h2 {
  font-size: clamp(24px, 3.4vw, 36px);
  line-height: 1.35;
  margin: 16px 0 8px;
  text-wrap: pretty;
}

.dictation-flashcard .card-front h2 {
  font-family: inherit;
}

.dictation-flashcard .card-back h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(20px, 2.8vw, 32px);
}

.dictation-flashcard .flip-hint {
  margin: 0;
}

.dictation-flashcard .example-speak {
  min-height: 44px;
}

.paper-dictation .dictation-actions {
  margin-top: 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 8px;
}

.paper-dictation .dictation-actions button {
  min-width: 0;
  min-height: 44px;
  padding: 10px 8px;
  font-size: 14px;
}

.paper-dictation .dictation-actions .master-button {
  grid-column: auto;
  grid-row: auto;
}

@media (max-width: 620px) {
  .paper-dictation .dictation-actions {
    gap: 6px;
  }
}

/* 打印答题纸（两个页面共用，由 print.js 生成）：屏幕上隐藏，打印时只输出答题纸 */
.print-sheet {
  display: none;
}

@media print {
  @page {
    size: A4;
    margin: 10mm 12mm 8mm;
  }

  html, body {
    background: white !important;
    color: #000;
  }

  .app-shell, dialog, .toast {
    display: none !important;
  }

  .print-sheet {
    display: block;
    font-family: "PingFang SC", "Microsoft YaHei", "Songti SC", sans-serif;
    color: #000;
  }

  .print-page {
    break-after: page;
    page-break-after: always;
  }

  .print-page:last-child {
    break-after: auto;
    page-break-after: auto;
  }

  .print-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    border-bottom: 2px solid #000;
    padding-bottom: 4px;
    margin-bottom: 6px;
  }

  .print-head h1 {
    font-size: 18px;
    margin: 0;
  }

  .print-head p {
    margin: 3px 0 0;
    font-size: 12px;
    color: #333;
  }

  .print-head .print-info {
    font-size: 13px;
    color: #000;
    white-space: nowrap;
  }

  .print-section {
    font-size: 14px;
    font-weight: 800;
    margin: 12px 0 5px;
    break-after: avoid;
  }

  .print-note {
    margin: 6px 0 0;
    font-size: 12px;
    color: #444;
  }

  /* 中文提示与书写线并排放在同一行，一个单元尽量控制在一页内 */
  .print-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 3px 20px;
  }

  .print-double {
    grid-template-columns: 1fr 1fr;
  }

  .print-item {
    display: grid;
    grid-template-columns: 22px auto minmax(38%, 1fr);
    align-items: end;
    column-gap: 5px;
    font-size: 13.5px;
    min-height: 30px;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .print-item b {
    font-weight: 700;
  }

  .print-item b::after {
    content: ".";
  }

  .print-zh {
    line-height: 1.3;
    padding-bottom: 3px;
  }

  .print-line {
    height: 24px;
    border-bottom: 1px solid #444;
  }

  /* 宽松版式：条目少的单词页用，行更高字略大 */
  .print-roomy .print-item {
    font-size: 15px;
    min-height: 38px;
  }

  .print-roomy .print-line {
    height: 30px;
  }
}