.mandarin-section { background: linear-gradient(145deg, #f5f5eb 0%, #e7efe7 72%, #eff4e9); }
.mandarin-section .section-top { margin-bottom: 28px; }
.mandarin-intro { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(300px,.75fr); gap: 28px; align-items: center; }
.mandarin-eyebrow,.mandarin-step-label { color: var(--teal); font-size: 11px; font-weight: 800; letter-spacing: .18em; }
.mandarin-intro h2 { max-width: 900px; margin: 6px 0; font-size: clamp(28px,2.5vw,39px); }
.mandarin-intro .english-subtitle { margin: 0 0 16px; }
.mandarin-lead { max-width: 780px; margin: 0; color: #466363; font-size: 15px; line-height: 1.8; }
.mandarin-path { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.mandarin-path > div { display: flex; align-items: center; gap: 10px; padding: 10px 13px; border: 1px solid #cfddd1; border-radius: 8px; background: #fffdf6c9; }
.mandarin-path b { flex: none; color: #b58538; font: 28px Georgia,serif; }
.mandarin-path span { font-size: 14px; font-weight: 700; line-height: 1.2; }
.mandarin-path small { display: block; margin-top: 5px; color: #557174; font-size: 11px; font-weight: 400; }
.mandarin-workspace { margin-top: 22px; border: 1px solid #cbded0; border-radius: 14px; overflow: hidden; background: #fffefa; box-shadow: 0 20px 55px #244d3b14; }
.mandarin-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 17px 24px; border-bottom: 1px solid #dce7dc; background: #f8fbf6; }
.mandarin-toolbar > div:first-child { display: flex; align-items: baseline; gap: 9px; }
.mandarin-toolbar strong { color: var(--teal); font: 25px Georgia,serif; }
.mandarin-toolbar span { color: #587472; font-size: 12px; }
.mandarin-toolbar-actions { display: flex; gap: 9px; }
.mandarin-toolbar-actions button { min-height: 38px; padding: 7px 13px; font-size: 12px; }
.mandarin-toolbar-actions span { color: inherit; font-weight: 800; }
.mandarin-layout { display: grid; grid-template-columns: minmax(220px, .27fr) minmax(0, 1fr); }
.mandarin-sidebar { min-width:0; padding: 24px 14px; border-right: 1px solid #dce7dc; background: #f4f7f0; }
.mandarin-sidebar h3 { padding: 0 9px; margin: 0 0 15px; font-size: 15px; }
.mandarin-sidebar h3 small { display: block; margin-top: 3px; color: #68817e; font-size: 9px; font-weight: 500; letter-spacing: .12em; }
.mandarin-lessons { display: grid; gap: 6px; }
.mandarin-lesson { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--ink); padding: 12px 10px; }
.mandarin-lesson:hover { background: #e9f1e8; }
.mandarin-lesson.active { background: #e2eee5; border-color: #a9cbb8; }
.mandarin-lesson-num { color: #b18743; font: 18px Georgia,serif; }
.mandarin-lesson-name { min-width: 0; flex: 1; font-size: 13px; font-weight: 700; line-height: 1.25; }
.mandarin-lesson-name small { display: block; margin-top: 4px; color: #617b78; font-size: 11px; font-weight: 400; }
.mandarin-lesson-count { color: #6f8780; font-size: 11px; }
.mandarin-main { min-width: 0; padding: 24px; }
.mandarin-main h3 { margin: 0; font-size: clamp(24px,2vw,30px); line-height: 1.25; }
.mandarin-step-label { margin: 0 0 7px; }
.mandarin-goal { margin: 9px 0 13px; color: #466365; font-size: 14px; }
.mandarin-sound-note { padding: 9px 14px; border-left: 3px solid var(--gold); background: #f9f3e8; border-radius: 0 7px 7px 0; font-size: 12px; }
.mandarin-sound-note summary { cursor:pointer; color:#7b5a24; }
.mandarin-sound-note p { margin:8px 0 0; }
.mandarin-sound-note strong { flex: none; color: #7b5a24; }
.mandarin-sound-note span { color: #586c65; }
.mandarin-tabs { display: flex; overflow-x: auto; gap: 6px; margin: 17px 0; border-bottom: 1px solid #d6e2d8; scrollbar-width: thin; }
.mandarin-tabs button { flex: none; border: 0; border-bottom: 3px solid transparent; background: transparent; color: #5c7878; padding: 10px 13px; font-size: 13px; font-weight: 650; }
.mandarin-tabs button.active { border-bottom-color: var(--gold); color: var(--teal-dark); }
.mandarin-instruction { margin: 0 0 15px; color: #567173; font-size: 13px; }
.mandarin-card-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.mandarin-phrase { position: relative; display: flex; flex-direction: column; align-items: start; min-height: 205px; padding: 20px; border: 1px solid #d4e4d8; border-radius: 10px; background: #fff; }
.mandarin-phrase:first-child { background: #edf5ee; border-color: #bad5c4; }
.mandarin-card-index { color: #5a8980; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.mandarin-hanzi { display: block; margin: 10px 0 2px; color: #183e41; font-size: clamp(24px,2.2vw,34px); line-height: 1.32; font-weight: 650; }
.mandarin-pinyin { display: block; color: #a0702e; font-size: 14px; font-weight: 650; }
.mandarin-meaning { margin: 8px 0 12px; color: #3e6062; font-size: 13px; }
.mandarin-audio { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; margin-top: auto; padding: 5px 11px; border: 1px solid #b9d2c6; border-radius: 5px; color: var(--teal); background: #f5faf6; font-size: 12px; font-weight: 700; }
.mandarin-audio::before { content: '◖))'; font-size: 12px; }
.mandarin-audio:hover { background: #e6f0e9; }
.mandarin-next { margin-top: 17px; }
.mandarin-recall { max-width: 630px; padding: clamp(25px,3vw,42px); border: 1px solid #c7dbca; border-radius: 12px; background: linear-gradient(140deg,#eef6ed,#fffdf7); }
.mandarin-recall-prompt { margin: 26px 0; color: #153f42; font: clamp(23px,2.6vw,35px)/1.35 Georgia,serif; }
.mandarin-answer { margin: 18px 0; padding: 19px 22px; border-radius: 8px; background: white; }
.mandarin-answer .mandarin-hanzi { margin-top: 0; }
.mandarin-answer .mandarin-audio { margin-top: 11px; }
.mandarin-rating { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; }
.mandarin-finished { max-width: 660px; margin-bottom: 19px; padding: 25px; background: #eaf3e8; border-radius: 9px; font-size: 16px; }
.mandarin-pair-mission { padding: 22px; border-radius: 10px; background: #ecf3e7; border: 1px solid #c9ddc9; }
.mandarin-pair-mission h4 { margin: 8px 0 0; font-size: 19px; line-height: 1.5; }
.mandarin-pair-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 15px 0 19px; }
.mandarin-pair-steps article { padding: 15px; border: 1px solid #d4e2d8; border-radius: 8px; background: white; }
.mandarin-pair-steps b { float: right; color: #c09b57; font: 24px Georgia,serif; }
.mandarin-pair-steps strong { display: block; font-size: 13px; }
.mandarin-pair-steps p { margin: 7px 0 0; color: #5b7472; font-size: 12px; }
.mandarin-pair-prompts { padding: 17px; border-top: 1px solid #d6e2d8; }
.mandarin-pair-prompts h4 { margin: 0 0 11px; }
.mandarin-pair-prompts > div { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid #e2e9e1; }
.mandarin-pair-prompts span { min-width: 130px; font-size: 17px; font-weight: 650; }
.mandarin-pair-prompts small { flex: 1; color: #5b7472; font-size: 12px; }
.mandarin-pair-prompts .mandarin-audio { margin: 0; }
.mandarin-tone-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 11px; }
.mandarin-tone { display: flex; flex-direction: column; align-items: start; padding: 16px; border: 1px solid #d3e2d4; border-radius: 9px; background: #fff; }
.mandarin-tone-shape { color: #bb8c3d; font: 34px Georgia,serif; line-height: 1; margin: 12px 0 0; }
.mandarin-tone strong { font-size: 35px; line-height: 1.1; }
.mandarin-tone .mandarin-pinyin { margin: 3px 0 12px; }
.mandarin-tone small { min-height: 43px; color: #5c7374; font-size: 11px; }
.mandarin-tone .mandarin-audio { margin-top: 10px; }
.mandarin-tone-note,.mandarin-privacy { color: #5c7470; font-size: 12px; line-height: 1.7; }
.mandarin-tone-note { margin-top: 17px; }
.mandarin-privacy { margin-top: 15px; }
.mandarin-status { min-height: 20px; margin: 17px 0 0; color: var(--teal); font-size: 12px; }
.mandarin-print-sheet { display: none; }
html[lang="en"] .mandarin-intro h2 { font-family: Georgia,serif; font-size: clamp(30px,2.5vw,40px); letter-spacing: -.02em; }
@media(max-width:1050px) { .mandarin-intro { grid-template-columns: 1fr; } .mandarin-path { max-width: 670px; grid-template-columns: repeat(4,minmax(0,1fr)); } .mandarin-path > div { display: block; } .mandarin-path b { display: block; } }
@media(max-width:760px) { .mandarin-layout { grid-template-columns: 1fr; } .mandarin-sidebar { border-right: 0; border-bottom: 1px solid #dce7dc; padding: 17px; } .mandarin-sidebar h3 { margin-bottom: 10px; } .mandarin-lessons { display: flex; overflow-x: auto; padding-bottom: 3px; } .mandarin-lesson { flex: 0 0 190px; } .mandarin-main { padding: 23px; } .mandarin-path { grid-template-columns: repeat(2,minmax(0,1fr)); } .mandarin-card-grid { grid-template-columns: 1fr; } .mandarin-phrase { min-height: 0; } .mandarin-pair-steps { grid-template-columns: 1fr; } .mandarin-tone-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:460px) { .mandarin-section { padding-inline: 16px; } .mandarin-intro h2 { font-size: 30px; } html[lang="en"] .mandarin-intro h2 { font-size: 32px; } .mandarin-path { gap: 6px; } .mandarin-path > div { min-height: 63px; padding: 9px; } .mandarin-path b { font-size: 20px; } .mandarin-path span { font-size: 12px; } .mandarin-toolbar { align-items: stretch; flex-direction: column; padding: 14px; } .mandarin-toolbar-actions button { flex: 1; } .mandarin-main { padding: 18px; } .mandarin-pair-prompts > div { flex-wrap: wrap; } .mandarin-pair-prompts span { min-width: 0; } .mandarin-tone { padding: 11px; } }
.mandarin-study-controls { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.mandarin-option { min-height:36px; padding:6px 12px; border:1px solid #cadcce; border-radius:20px; background:#fffefa; color:var(--muted); font-size:12px; }
.mandarin-option[aria-pressed="true"] { background:#e7f0e4; color:var(--teal); border-color:#aac7b1; }
.mandarin-study-controls .mandarin-option:last-child { margin-left:auto; }
.mandarin-deck .mandarin-phrase { min-height:230px; align-items:center; justify-content:center; text-align:center; background:linear-gradient(130deg,#edf5eb,#fcfbf2); }
.mandarin-deck .mandarin-hanzi { font-size:clamp(30px,3vw,44px); margin-top:12px; }
.mandarin-deck .mandarin-pinyin { font-size:17px; }
.mandarin-deck .mandarin-meaning { font-size:16px; margin-bottom:13px; }
.mandarin-deck .mandarin-audio { margin-top:4px; }
.mandarin-example { display:grid; gap:3px; padding:10px 16px; margin:0 0 12px; border-left:2px solid var(--gold); text-align:left; background:#ffffff90; font-size:13px; }
.mandarin-example small { color:var(--muted); font-size:10px; }
.mandarin-example .mandarin-pinyin { font-size:12px; }
.mandarin-paging { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; }
.mandarin-paging span { color:var(--muted); font-size:12px; }
.mandarin-paging .outline-button { padding:8px 14px; min-height:38px; }
.mandarin-eyebrow { margin:0 0 8px; }
.mandarin-intro .english-subtitle { font-size:15px; margin-bottom:8px; }
.mandarin-lead { font-size:13px; }
.mandarin-status:empty { display:none; }
@media(max-width:1050px) { .mandarin-intro { grid-template-columns:1fr; } .mandarin-path { display:none; } }
@media(max-width:760px) {
  .mandarin-layout { grid-template-columns:minmax(0,1fr); }
  .mandarin-section .section-top { margin-bottom:18px; }
  .mandarin-intro .english-subtitle,.mandarin-eyebrow { display:none; }
  .mandarin-lead,.mandarin-section .state-pill { display:none; }
  .mandarin-intro h2 { margin:0 0 9px; font-size:28px; }
  .mandarin-toolbar { flex-direction:row; align-items:center; flex-wrap:wrap; gap:12px; }
  .mandarin-toolbar-actions { margin-left:auto; }
  .mandarin-sidebar { padding:12px; }
  .mandarin-sidebar h3 { display:none; }
  .mandarin-lesson { flex-basis:175px; padding:9px; }
  .mandarin-lesson-name small { display:none; }
  .mandarin-main { padding:16px; }
  .mandarin-sound-note { display:block; font-size:12px; }
  .mandarin-sound-note strong { margin-right:8px; }
  .mandarin-tabs button { padding:10px; font-size:12px; }
  .mandarin-deck .mandarin-phrase { min-height:215px; padding:18px; }
  .mandarin-study-controls { gap:6px; }
  .mandarin-option { font-size:11px; padding:6px 10px; }
  .mandarin-study-controls .mandarin-option:last-child { margin-left:0; }
}
@media(max-width:460px) {
  #mandarin-progress-label { display:none; }
  .mandarin-toolbar { padding:12px; gap:8px; }
  .mandarin-toolbar strong { font-size:21px; }
  .mandarin-toolbar-actions { gap:6px; }
  .mandarin-toolbar-actions button { font-size:11px; padding:7px 10px; }
}
@media print {
  body[data-print="mandarin"] main>[data-view]:not(#learn-chinese),body[data-print="mandarin"] .mandarin-section>*:not(.mandarin-print-sheet) { display:none!important; }
  body[data-print="mandarin"] .mandarin-section { display:block!important; min-height:0; padding:0; background:white; }
  body[data-print="mandarin"] .mandarin-print-sheet { display:block; color:#111; font-family:Arial,"Microsoft YaHei",sans-serif; }
  .mandarin-print-sheet h1 { font-size:24pt; }
  .mandarin-print-sheet h2 { margin-top:22pt; font-size:15pt; }
  .mandarin-print-sheet li { padding:8pt 0; font-size:13pt; break-inside:avoid; }
}