/* ── DESIGN TOKENS ── */
    :root {
      --bg: #f5f4f0;
      --surface: #ffffff;
      --surface-alt: #f9f8f6;
      --border: #e8e5df;
      --text: #1a1a1a;
      --text-secondary: #444440;
      --text-muted: #777770;
      --accent: #b83030;
      --accent-light: #fdf2f2;
      --radius: 10px;
      --shadow: 0 1px 3px rgba(0,0,0,0.07);
      --shadow-md: 0 2px 8px rgba(0,0,0,0.09);
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    /* Prevent any element from causing horizontal page scroll.
       clip (not hidden) so position:sticky still works. */
    html { overflow-x: clip; }
    /* Flex/grid children shrink to fit — prevents overflow from min-width:auto default */
    header, nav, .content-wrap,
    .fc-toolbar, .fc-stats-bar, .fc-mark-row, .fc-nav-row, .fc-type-row, .fc-tone-btns,
    .vfilter-bar, .dtab-bar, .fc-anki-bar, .fc-pill-grid, .header-actions,
    .order-formula, .order-examples, .drinks-grid-2, .phrase-list, .phrase-row,
    .pattern-formula, .example-row {
      min-width: 0;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
      background: var(--bg);
      color: var(--text);
      font-size: 17px;
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
    }

    /* ── HEADER ── */
    header {
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      padding: 12px 20px;
      position: sticky;
      top: 0;
      z-index: 200;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .header-flag { font-size: 1.4rem; line-height: 1; flex-shrink: 0; }
    .header-text { min-width: 0; flex: 1; }
    .header-text h1 {
      font-size: 0.95rem;
      font-weight: 700;
      color: var(--text);
      letter-spacing: 0.01em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .header-sub {
      font-size: 0.7rem;
      color: var(--text-muted);
      margin-top: 1px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .header-actions {
      margin-left: auto;
      display: flex;
      gap: 6px;
      align-items: center;
      flex-shrink: 0;
    }
    .hdr-btn {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 7px 12px;
      border-radius: 8px;
      text-decoration: none;
      font-weight: 600;
      font-size: 0.82rem;
      white-space: nowrap;
      color: #fff;
      line-height: 1;
    }
    .hdr-btn-green { background: #1a4a2e; }
    .hdr-btn-red   { background: #b83030; }

    /* ── NAV ── */
    nav {
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      display: flex;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      padding: 0 8px;
      gap: 0;
      position: sticky;
      top: 53px; /* just below header */
      z-index: 190;
    }
    nav::-webkit-scrollbar { display: none; }
    nav a {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: none;
      border: none;
      border-bottom: 2px solid transparent;
      color: var(--text-muted);
      cursor: pointer;
      font-size: 0.83rem;
      font-weight: 500;
      padding: 10px 12px;
      white-space: nowrap;
      transition: color 0.15s, border-color 0.15s;
      border-radius: 0;
      line-height: 1;
      text-decoration: none;
    }
    nav a:hover { color: var(--text-secondary); }
    nav a.active {
      color: var(--accent);
      border-bottom-color: var(--accent);
      font-weight: 600;
    }
    .nav-icon  { font-size: 1rem; line-height: 1; }
    .nav-label { font-size: 0.8rem; }

    /* ── MAIN CONTENT WRAPPER ── */
    .content-wrap {
      max-width: 860px;
      margin: 0 auto;
      padding: 24px 16px 48px;
    }

    .section > h2 {
      font-size: 1.3rem;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 4px;
    }
    .section > p {
      color: var(--text-secondary);
      font-size: 0.9rem;
      margin-bottom: 20px;
    }

    /* ── LESSON BADGES ── */
    .l1 { background: #fee2e2; color: #991b1b; font-size: 0.7rem; font-weight: 600; padding: 2px 7px; border-radius: 20px; display: inline-block; }
    .l2 { background: #dbeafe; color: #1e40af; font-size: 0.7rem; font-weight: 600; padding: 2px 7px; border-radius: 20px; display: inline-block; }
    .l3 { background: #d1fae5; color: #065f46; font-size: 0.7rem; font-weight: 600; padding: 2px 7px; border-radius: 20px; display: inline-block; }
    .l4 { background: #fef3c7; color: #92400e; font-size: 0.7rem; font-weight: 600; padding: 2px 7px; border-radius: 20px; display: inline-block; }
    .l5 { background: #ede9fe; color: #5b21b6; font-size: 0.7rem; font-weight: 600; padding: 2px 7px; border-radius: 20px; display: inline-block; }
    .l6 { background: #ccfbf1; color: #0f766e; font-size: 0.7rem; font-weight: 600; padding: 2px 7px; border-radius: 20px; display: inline-block; }
    .l7 { background: #fde8d0; color: #8b3a0f; font-size: 0.7rem; font-weight: 600; padding: 2px 7px; border-radius: 20px; display: inline-block; }
    .l8 { background: #ddeeff; color: #1a3a6b; font-size: 0.7rem; font-weight: 600; padding: 2px 7px; border-radius: 20px; display: inline-block; }
    .l9 { background: #fff0e6; color: #8b3a0f; font-size: 0.7rem; font-weight: 600; padding: 2px 7px; border-radius: 20px; display: inline-block; }

    /* ── DIALOGUE ── */
    .dtab-bar {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 20px;
    }
    .dtab {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text-secondary);
      cursor: pointer;
      font-size: 0.83rem;
      font-weight: 500;
      padding: 7px 14px;
      transition: all 0.15s;
    }
    .dtab:hover { border-color: var(--accent); color: var(--accent); }
    .dtab.active {
      background: var(--accent);
      border-color: var(--accent);
      color: white;
      font-weight: 600;
    }
    .dialogue-container {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
    }
    .dialogue-line {
      display: grid;
      grid-template-columns: 76px 1fr;
      border-bottom: 1px solid var(--border);
      padding: 0;
    }
    .dialogue-line:last-child { border-bottom: none; }
    .speaker {
      padding: 14px 10px;
      text-align: center;
      border-right: 1px solid var(--border);
      background: var(--surface-alt);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .speaker-name {
      font-weight: 700;
      font-size: 0.88rem;
      color: var(--text);
    }
    .speaker-pinyin {
      font-size: 0.76rem;
      color: var(--text-muted);
      margin-top: 2px;
    }
    .line-content {
      padding: 14px 16px;
    }
    .line-content .chinese {
      font-size: 1.25rem;
      font-weight: 500;
      color: var(--text);
      letter-spacing: 0.5px;
      line-height: 1.4;
    }
    .line-content .pinyin {
      font-size: 0.88rem;
      color: var(--text-secondary);
      margin-top: 3px;
    }
    .line-content .english {
      font-size: 0.85rem;
      color: var(--text-muted);
      margin-top: 3px;
    }

    /* ── VOCAB ── */
    .vfilter-bar {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 16px;
      align-items: center;
    }
    .vfilter-label {
      font-size: 0.78rem;
      color: var(--text-muted);
    }
    .reveal-btn, .vfilter {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text-secondary);
      cursor: pointer;
      font-size: 0.84rem;
      padding: 6px 13px;
      transition: all 0.15s;
    }
    .reveal-btn:hover, .vfilter:hover {
      border-color: var(--accent);
      color: var(--accent);
    }
    .vfilter.active, .reveal-btn.active {
      background: var(--accent);
      border-color: var(--accent);
      color: white;
    }
    .vocab-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 1.05rem;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
    }
    .vocab-table thead tr {
      background: var(--surface-alt);
      border-bottom: 2px solid var(--border);
    }
    .vocab-table th {
      padding: 13px 16px;
      text-align: left;
      font-size: 0.82rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--text-muted);
    }
    .vocab-table tbody tr {
      border-bottom: 1px solid var(--border);
      cursor: pointer;
      transition: background 0.1s;
    }
    .vocab-table tbody tr:last-child { border-bottom: none; }
    .vocab-table tbody tr:hover { background: var(--surface-alt); }
    .vocab-table td { padding: 15px 16px; vertical-align: top; }
    .vocab-char {
      font-size: 1.7rem;
      font-weight: 700;
      color: var(--text);
      line-height: 1.3;
    }
    .vocab-py {
      font-size: 0.95rem;
      color: var(--text-secondary);
      margin-top: 3px;
    }
    .vocab-detail {
      background: var(--surface-alt);
      border-top: 1px solid var(--border);
      padding: 18px 20px;
      font-size: 1rem;
    }
    .mnemonic-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 8px;
    }
    .mnemonic-part {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 8px 12px;
      font-size: 0.9rem;
    }
    .mnemonic-char { font-size: 1.35rem; font-weight: 700; color: var(--text); }
    .mnemonic-tip { color: var(--text-secondary); margin-top: 3px; font-size: 0.88rem; }
    .example-sentence {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 12px 16px;
      margin-top: 10px;
    }
    .example-zh { font-size: 1.15rem; font-weight: 500; color: var(--text); }
    .example-py { font-size: 0.95rem; color: var(--text-secondary); margin-top: 3px; }
    .example-en { font-size: 0.92rem; color: var(--text-muted); margin-top: 3px; }
    /* vocab table row cells (JS-rendered) */
    .vocab-table td.big-char { font-size: 1.7rem; font-weight: 700; color: var(--text); line-height: 1.2; white-space: nowrap; }
    .vocab-table td.py { font-size: 1rem; color: var(--text-secondary); }
    .pos-badge { display: inline-block; font-size: 0.82rem; font-weight: 600; background: var(--surface-alt); border: 1px solid var(--border); border-radius: 5px; padding: 2px 8px; color: var(--text-muted); white-space: nowrap; }

    /* ── FLASHCARDS ── */
    .fc-toolbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:14px; }
    .fc-toolbar select {
      background: var(--surface); border: 1px solid var(--border); border-radius:6px;
      color: var(--text-secondary); cursor:pointer; font-size:0.84rem; padding:6px 10px;
    }
    .fc-btn {
      background: var(--surface); border: 1px solid var(--border); border-radius:6px;
      color: var(--text-secondary); cursor:pointer; font-size:0.84rem; padding:6px 14px;
      transition: all 0.15s; white-space:nowrap;
    }
    .fc-btn:hover { border-color: var(--accent); color: var(--accent); }
    .fc-btn.active { background: var(--accent); border-color: var(--accent); color: white; }
    .fc-btn.danger { border-color:#e74c3c; color:#e74c3c; }
    .fc-btn.danger:hover { background:#e74c3c; color:white; }
    .fc-btn.success { border-color:#1a8a4a; color:#1a8a4a; }
    .fc-btn.success:hover { background:#1a8a4a; color:white; }
    .fc-stats-bar {
      display:flex; gap:16px; align-items:center; flex-wrap:wrap;
      background: var(--surface); border:1px solid var(--border); border-radius:8px;
      padding:10px 16px; margin-bottom:16px; font-size:0.88rem;
    }
    .fc-stat-known { color:#1a8a4a; font-weight:600; }
    .fc-stat-unknown { color:#b83030; font-weight:600; }
    .fc-stat-neutral { color:var(--text-muted); }
    .fc-progress-wrap { flex:1; min-width:80px; height:6px; background:var(--border); border-radius:3px; overflow:hidden; }
    .fc-progress-fill { height:100%; background: var(--accent); border-radius:3px; transition:width 0.3s; }
    /* Card */
    .fc-card-wrap { max-width:480px; margin:0 auto 16px; }
    .fc-card {
      width:100%; min-height:280px; cursor:pointer; position:relative;
      border-radius:14px;
    }
    .fc-face {
      display:flex; flex-direction:column;
      align-items:center; justify-content:center;
      border-radius:14px; border:1px solid var(--border); padding:28px 24px;
      text-align:center; min-height:280px;
    }
    .fc-face.fc-front { background:var(--surface); box-shadow:0 2px 12px rgba(0,0,0,0.09); }
    .fc-face.fc-back  { background:var(--surface-alt); box-shadow:0 2px 12px rgba(0,0,0,0.07); display:none; }
    .fc-card.flipped .fc-front { display:none; }
    .fc-card.flipped .fc-back  { display:flex; }
    .fc-card.known-card .fc-face { border:2px solid #1a8a4a; }
    .fc-card.unknown-card .fc-face { border:2px solid #b83030; }
    .fc-char-big { font-size:4.5rem; font-weight:700; color:var(--text); line-height:1.1; }
    .fc-pos-hint { font-size:0.82rem; color:var(--text-muted); margin-top:8px; }
    .fc-tap-hint { font-size:0.78rem; color:var(--border); margin-top:20px; letter-spacing:0.04em; }
    .fc-py-big { font-size:1.6rem; font-weight:600; color:var(--accent); margin-bottom:8px; }
    .fc-meaning-big { font-size:1.15rem; font-weight:600; color:var(--text); margin-bottom:6px; }
    .fc-back-pos { font-size:0.82rem; color:var(--text-muted); margin-bottom:14px; }
    .fc-example {
      background:var(--surface); border:1px solid var(--border); border-radius:8px;
      padding:10px 14px; text-align:left; width:100%; max-width:380px; margin-top:4px;
    }
    .fc-example .ezh { font-size:1rem; font-weight:500; color:var(--text); }
    .fc-example .epy { font-size:0.85rem; color:var(--text-secondary); margin-top:2px; }
    .fc-example .een { font-size:0.82rem; color:var(--text-muted); margin-top:2px; }
    /* Mark buttons */
    .fc-mark-row {
      display:flex; gap:10px; justify-content:center; max-width:480px; margin:0 auto 14px;
    }
    .fc-mark-wrong {
      flex:1; padding:12px; border-radius:10px; border:2px solid #e74c3c;
      background:white; color:#e74c3c; font-size:1rem; font-weight:700; cursor:pointer;
      transition:all 0.15s;
    }
    .fc-mark-wrong:hover { background:#e74c3c; color:white; }
    .fc-mark-right {
      flex:1; padding:12px; border-radius:10px; border:2px solid #1a8a4a;
      background:white; color:#1a8a4a; font-size:1rem; font-weight:700; cursor:pointer;
      transition:all 0.15s;
    }
    .fc-mark-right:hover { background:#1a8a4a; color:white; }
    /* Type mode */
    .fc-type-area {
      max-width:480px; margin:0 auto 14px; background:var(--surface);
      border:1px solid var(--border); border-radius:12px; padding:16px 18px;
    }
    .fc-type-label { font-size:0.85rem; color:var(--text-muted); margin-bottom:8px; }
    .fc-type-row { display:flex; gap:8px; }
    .fc-type-input {
      flex:1; border:1px solid var(--border); border-radius:8px;
      padding:10px 14px; font-size:1rem; background:white; outline:none;
      transition:border-color 0.15s;
    }
    .fc-type-input:focus { border-color:var(--accent); }
    .fc-type-input.correct { border-color:#1a8a4a; background:#f0fff4; }
    .fc-type-input.wrong   { border-color:#e74c3c; background:#fff5f5; }
    .fc-type-submit {
      padding:10px 18px; background:var(--accent); color:white;
      border:none; border-radius:8px; cursor:pointer; font-size:0.95rem; font-weight:600;
      transition:opacity 0.15s;
    }
    .fc-type-submit:hover { opacity:0.88; }
    .fc-feedback { font-size:0.92rem; margin-top:10px; font-weight:500; min-height:22px; }
    .fc-feedback.ok  { color:#1a8a4a; }
    .fc-feedback.bad { color:#e74c3c; }
    /* Nav row */
    .fc-nav-row { display:flex; gap:8px; justify-content:center; max-width:480px; margin:0 auto 20px; }
    .fc-nav-btn {
      padding:8px 20px; background:var(--surface); border:1px solid var(--border);
      border-radius:8px; cursor:pointer; font-size:0.9rem; color:var(--text-secondary);
      transition:all 0.15s;
    }
    .fc-nav-btn:hover { border-color:var(--accent); color:var(--accent); }
    /* Anki bar */
    .fc-anki-bar { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; padding-top:16px; border-top:1px solid var(--border); }
    .fc-anki-btn {
      display:flex; align-items:center; gap:6px; padding:8px 16px;
      border:1px solid #b83030; border-radius:8px; background:white;
      color:#b83030; font-size:0.85rem; cursor:pointer; font-weight:600;
      transition:all 0.15s;
    }
    .fc-anki-btn:hover { background:#b83030; color:white; }
    /* Unknown list */
    .fc-unknown-list { margin-top:20px; }
    .fc-unknown-list h3 { font-size:0.9rem; color:var(--text-muted); font-weight:600; margin-bottom:10px; text-transform:uppercase; letter-spacing:0.05em; }
    .fc-pill-grid { display:flex; flex-wrap:wrap; gap:6px; }
    .fc-pill {
      background:#fff5f5; border:1px solid #f5c6c6; border-radius:20px;
      padding:4px 12px; font-size:0.9rem; color:#b83030; cursor:pointer;
      transition:all 0.15s;
    }
    .fc-pill:hover { background:#b83030; color:white; border-color:#b83030; }

    /* ── KEY PHRASES ── */
    .phrase-block {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 18px 20px;
      margin-bottom: 14px;
    }
    .phrase-block h3 {
      font-size: 1rem;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 12px;
      padding-bottom: 8px;
      border-bottom: 1px solid var(--border);
    }
    .phrase-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      font-size: 0.92rem;
      padding: 8px 0;
      border-bottom: 1px solid var(--border);
    }
    .phrase-row:last-child { border-bottom: none; }
    .phrase-zh { font-weight: 600; font-size: 1.1rem; color: var(--text); }
    .phrase-py { font-size: 0.86rem; color: var(--text-secondary); margin-top: 2px; }
    .phrase-en { color: var(--text-muted); font-size: 0.9rem; align-self: center; }

    /* ── GRAMMAR ── */
    .grammar-block {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 20px 22px;
      margin-bottom: 14px;
    }
    .grammar-block h3 {
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 6px;
    }
    .grammar-block p {
      font-size: 0.92rem;
      color: var(--text-secondary);
      margin-bottom: 10px;
    }
    .grammar-example {
      background: var(--surface-alt);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 12px 16px;
      margin-top: 8px;
      font-size: 0.92rem;
    }
    .grammar-example .zh { font-size: 1.1rem; font-weight: 500; color: var(--text); }
    .grammar-example .py { font-size: 0.88rem; color: var(--text-secondary); margin-top: 2px; }
    .grammar-example .en { font-size: 0.88rem; color: var(--text-muted); margin-top: 2px; }
    /* Grammar pattern cards (L9+ format) */
    .pattern-name {
      font-size: 1rem; font-weight: 700; color: var(--text);
      margin: 16px 0 6px;
    }
    .grammar-pattern:first-of-type .pattern-name { margin-top: 4px; }
    .pattern-formula {
      display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
      background: var(--surface-alt); border: 1px solid var(--border);
      border-radius: 8px; padding: 8px 14px; font-size: 1rem;
      font-weight: 600; color: var(--text); margin-bottom: 8px;
    }
    .formula-plus { color: var(--accent); font-weight: 700; }
    .pattern-explanation {
      font-size: 0.88rem; color: var(--text-secondary);
      margin-bottom: 10px; line-height: 1.55;
    }
    .pattern-examples { display: flex; flex-direction: column; gap: 6px; }
    .example-row {
      display: grid; grid-template-columns: auto 1fr 1fr;
      gap: 8px 14px; align-items: baseline;
      background: var(--surface-alt); border: 1px solid var(--border);
      border-radius: 6px; padding: 10px 14px;
    }
    @media (max-width: 640px) {
      .example-row { grid-template-columns: 1fr; gap: 3px; }
    }
    .grammar-tip {
      background: var(--accent-light);
      border-left: 3px solid var(--accent);
      border-radius: 0 6px 6px 0;
      padding: 10px 14px;
      font-size: 0.9rem;
      color: var(--text-secondary);
      margin-top: 10px;
    }
    table { border-collapse: collapse; width: 100%; max-width: 100%; }
    th, td { text-align: left; }

    /* ── PATTERNS ── */
    .pattern-block {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 18px 20px;
      margin-bottom: 14px;
    }

    /* ── EXERCISES ── */
    .ex-block {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 18px 20px;
      margin-bottom: 14px;
    }
    .ex-block h3 {
      font-size: 0.9rem;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 14px;
      padding-bottom: 8px;
      border-bottom: 1px solid var(--border);
    }
    .ex-item {
      padding: 10px 0;
      border-bottom: 1px solid var(--border);
      font-size: 0.88rem;
    }
    .ex-item:last-child { border-bottom: none; }
    .ex-q { color: var(--text); margin-bottom: 6px; line-height: 1.6; }
    .ex-zh { font-size: 1rem; color: var(--text); }
    .ex-py { font-size: 0.78rem; color: var(--text-secondary); }
    .ex-en { font-size: 0.78rem; color: var(--text-muted); }
    .ex-ans {
      display: none;
      margin-top: 8px;
      background: var(--surface-alt);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 8px 12px;
    }
    .show-ans-btn {
      background: none;
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text-secondary);
      cursor: pointer;
      font-size: 0.78rem;
      padding: 4px 10px;
      margin-top: 6px;
      transition: all 0.15s;
    }
    .show-ans-btn:hover { border-color: var(--accent); color: var(--accent); }

    /* ── QUIZ ── */
    .quiz-score {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      display: inline-block;
      font-size: 0.88rem;
      font-weight: 600;
      padding: 8px 16px;
      margin-bottom: 16px;
      color: var(--text);
    }
    .quiz-item {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 18px 20px;
      margin-bottom: 12px;
    }
    .quiz-item .q-char {
      font-size: 2.5rem;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 6px;
    }
    .quiz-item .q-py {
      font-size: 0.95rem;
      color: var(--text-secondary);
      margin-bottom: 14px;
    }
    .quiz-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .quiz-opt {
      background: var(--surface-alt);
      border: 1px solid var(--border);
      border-radius: 8px;
      cursor: pointer;
      font-size: 0.92rem;
      padding: 12px 16px;
      text-align: left;
      transition: all 0.15s;
      color: var(--text);
    }
    .quiz-opt:hover { border-color: var(--accent); }
    .quiz-opt.correct { background: #d1fae5; border-color: #065f46; color: #065f46; }
    .quiz-opt.wrong { background: #fee2e2; border-color: #991b1b; color: #991b1b; }

    /* ── NUMBERS SECTION ── */
    #numbers h3, #drinks h3 {
      font-size: 0.95rem;
      font-weight: 700;
      color: var(--text);
      margin: 24px 0 10px;
    }

    /* ── RESPONSIVE ── */
    @media (max-width: 640px) {
      body { font-size: 15px; max-width: 100vw; }
      .content-wrap { padding: 14px 12px 60px; max-width: 100%; width: 100%; }
      .dialogue-line { grid-template-columns: 58px 1fr; }
      .speaker { padding: 10px 6px; }
      .line-content { padding: 10px 12px; }
      .line-content .chinese { font-size: 1.1rem; }
      .vocab-table th:nth-child(3),
      .vocab-table td:nth-child(3) { display: none; }
      .vocab-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
      .quiz-options { grid-template-columns: 1fr; }
      .phrase-row { grid-template-columns: 1fr; }
      .flashcard { height: 200px; }
      .card-face .char { font-size: 3.2rem; }

      /* Header — compact, no subtitle */
      header { padding: 9px 12px; gap: 8px; }
      .header-flag { font-size: 1.2rem; }
      .header-text h1 { font-size: 0.85rem; }
      .header-sub { display: none; }
      .hdr-btn { padding: 7px 9px; font-size: 0.78rem; gap: 3px; }
      .hdr-btn-label { display: none; } /* icon-only on mobile */

      /* Nav — icon + short label, compact */
      nav { padding: 0 4px; top: 46px; }
      nav a { padding: 9px 9px; gap: 3px; }
      .nav-icon  { font-size: 1rem; }
      .nav-label { font-size: 0.7rem; }

      /* ── Flashcard mobile ── */

      /* Mode toggle */
      .fc-mode-bar { gap: 6px; margin-bottom: 8px; }
      .fc-mode-bar .fc-btn { flex: 1; text-align: center; padding: 10px 8px; }

      /* Toolbar */
      .fc-toolbar { gap: 6px; }
      .fc-toolbar select {
        width: 100%; font-size: 0.9rem; padding: 10px 12px;
      }
      .fc-btn { padding: 9px 12px; font-size: 0.85rem; }

      /* Stats bar — stack progress on own line */
      .fc-stats-bar { gap: 8px 14px; padding: 10px 14px; font-size: 0.84rem; }
      .fc-progress-wrap { flex-basis: 100%; min-width: unset; margin-top: 2px; height: 7px; }

      /* Card — full width, taller character */
      .fc-card-wrap { max-width: 100%; margin-bottom: 10px; }
      .fc-card { min-height: 220px; }
      .fc-face { min-height: 220px; padding: 22px 16px; }
      .fc-char-big { font-size: 3.8rem; }
      .fc-py-big { font-size: 1.45rem; }
      .fc-meaning-big { font-size: 1.05rem; }
      .fc-example { max-width: 100%; }

      /* Mark buttons — large tap targets */
      .fc-mark-row { max-width: 100%; gap: 8px; margin-bottom: 10px; }
      .fc-mark-wrong, .fc-mark-right {
        padding: 18px 10px; font-size: 1.05rem; border-radius: 12px;
      }

      /* Type input area */
      .fc-type-area { max-width: 100%; padding: 12px 14px; margin-bottom: 10px; }
      .fc-type-row { gap: 6px; }
      .fc-type-input { font-size: 1rem; padding: 12px 12px; }
      .fc-type-submit { padding: 12px 14px; font-size: 0.95rem; }
      .fc-feedback { font-size: 0.88rem; }

      /* Tone buttons — bigger touch targets, allow wrap */
      .fc-tone-btns { gap: 8px; margin-top: 10px; }
      .fc-tone-btn { width: 54px; padding: 12px 0; font-size: 1.4rem; border-radius: 10px; }

      /* Nav row — stretch full width */
      .fc-nav-row { max-width: 100%; gap: 6px; margin-bottom: 14px; }
      .fc-nav-btn { flex: 1; padding: 13px 6px; font-size: 0.88rem; text-align: center; }

      /* Anki bar — compact */
      .fc-anki-bar { gap: 6px; }
      .fc-anki-btn { font-size: 0.78rem; padding: 6px 10px; }

      /* Unknown pills */
      .fc-pill { font-size: 0.85rem; padding: 5px 12px; }
    }

    /* ── DIALOGUE PANELS ── */
    .dialogue-panel { display: none; }
    .dialogue-panel.active { display: block; }

    /* ── VOCAB EXPAND ROWS ── */
    .stroke-row { display: none; }
    .stroke-row.open { display: table-row; }

    /* ── EXERCISE ANSWERS ── */
    .ex-answer { display: none; margin-top: 8px; padding: 10px 14px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: 6px; }
    .ex-answer.shown { display: block; }

    /* ── MNEMONIC PARTS ── */
    .mnemonic-parts { list-style: none; padding: 0; margin: 0; }
    .mnemonic-parts li { padding: 3px 0; display: flex; gap: 6px; align-items: baseline; line-height: 1.4; }
    .mnemo-pos { font-weight: 700; color: #b36200; min-width: 52px; display: inline-block; font-style: normal; flex-shrink: 0; }
    .vocab-example { margin-top: 8px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; }
    .vocab-example strong { font-size: 0.7rem; letter-spacing: 0.07em; text-transform: uppercase; color: #2471c0; display: block; margin-bottom: 4px; font-style: normal; }
    .stroke-panels { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
    .stroke-panel { display: flex; flex-direction: column; align-items: center; gap: 3px; }
    .stroke-panel svg { border: 1px solid var(--border); border-radius: 6px; background: white; display: block; }

    /* ── STROKE SECTION ── */
    .stroke-section { margin-top: 10px; }
    .stroke-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
    .stroke-cell {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 8px;
      text-align: center;
      min-width: 52px;
    }
    .stroke-cell .sc { font-size: 1.4rem; color: var(--text); }
    .stroke-cell .sn { font-size: 0.68rem; color: var(--text-muted); margin-top: 2px; }

    /* ── DRINKS TAB ── */
    .drinks-order-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 20px 22px;
      margin-bottom: 20px;
    }
    .drinks-order-card h3 {
      font-size: 0.95rem;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 14px;
    }
    .order-formula {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 16px;
      align-items: center;
    }
    .order-token {
      background: var(--surface-alt);
      border: 1px solid var(--border);
      border-radius: 6px;
      font-size: 0.9rem;
      font-weight: 600;
      padding: 5px 11px;
      color: var(--text);
    }
    .order-token.accent {
      background: var(--accent);
      border-color: var(--accent);
      color: white;
    }
    .order-arrow {
      color: var(--text-muted);
      font-size: 0.85rem;
    }
    .order-examples {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    .order-example {
      background: var(--surface-alt);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 14px 16px;
    }
    .order-example .zh {
      font-size: 1.05rem;
      font-weight: 600;
      color: var(--text);
      line-height: 1.5;
      margin-bottom: 5px;
    }
    .order-example .py {
      font-size: 0.83rem;
      color: var(--text-secondary);
      margin-bottom: 4px;
    }
    .order-example .en {
      font-size: 0.83rem;
      color: var(--text-muted);
    }

    .drinks-grid-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin-bottom: 20px;
    }
    .drinks-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 18px 20px;
    }
    .drinks-card h4 {
      font-size: 0.92rem;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 12px;
      padding-bottom: 8px;
      border-bottom: 1px solid var(--border);
    }
    .level-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 0;
      border-bottom: 1px solid var(--border);
      gap: 10px;
    }
    .level-row:last-child { border-bottom: none; }
    .level-zh {
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--text);
      min-width: 60px;
    }
    .level-py {
      font-size: 0.85rem;
      color: var(--text-secondary);
      flex: 1;
    }
    .level-pct {
      font-size: 0.8rem;
      color: var(--text-muted);
      font-variant-numeric: tabular-nums;
      min-width: 36px;
      text-align: right;
    }

    .drinks-section-title {
      font-size: 1rem;
      font-weight: 700;
      color: var(--text);
      margin: 24px 0 12px;
      padding-bottom: 8px;
      border-bottom: 2px solid var(--border);
    }
    .drink-menu-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
      gap: 10px;
      margin-bottom: 20px;
    }
    .drink-item {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 13px 14px;
    }
    .drink-item .di-zh {
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 3px;
    }
    .drink-item .di-py {
      font-size: 0.8rem;
      color: var(--text-secondary);
      margin-bottom: 3px;
    }
    .drink-item .di-en {
      font-size: 0.82rem;
      color: var(--text-muted);
    }

    .topping-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
      gap: 10px;
      margin-bottom: 20px;
    }
    .topping-item {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 12px;
      text-align: center;
    }
    .topping-item .ti-zh {
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 3px;
    }
    .topping-item .ti-py {
      font-size: 0.78rem;
      color: var(--text-secondary);
      margin-bottom: 3px;
    }
    .topping-item .ti-en {
      font-size: 0.78rem;
      color: var(--text-muted);
    }

    .phrase-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-bottom: 16px;
    }
    .phrase-item {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 13px 16px;
    }
    .phrase-item .pi-zh {
      font-size: 1.05rem;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 4px;
    }
    .phrase-item .pi-py {
      font-size: 0.82rem;
      color: var(--text-secondary);
      margin-bottom: 3px;
    }
    .phrase-item .pi-en {
      font-size: 0.82rem;
      color: var(--text-muted);
    }

    @media (max-width: 640px) {
      .order-examples { grid-template-columns: 1fr; }
      .drinks-grid-2 { grid-template-columns: 1fr; }
      .drink-menu-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
      .phrase-list { grid-template-columns: 1fr; }
    }