* { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: "Segoe UI","Microsoft YaHei","Helvetica Neue",sans-serif; background:#f0f4f8; color:#2d3748; line-height:1.6; }
  .container { max-width:1200px; margin:0 auto; padding:16px; }
  h1 { text-align:center; color:#1a365d; margin-bottom:6px; font-size:24px; }
  .subtitle { text-align:center; color:#718096; margin-bottom:12px; font-size:13px; }

  /* Progress bar */
  .progress-wrap { max-width:480px; margin:0 auto 20px; background:white; border-radius:10px; padding:14px 18px; box-shadow:0 1px 4px rgba(0,0,0,0.06); }
  .progress-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
  .progress-label { font-size:13px; color:#4a5568; font-weight:500; }
  .progress-ratio { font-size:13px; color:#3182ce; font-weight:700; }
  .progress-bar-bg { height:10px; background:#e2e8f0; border-radius:5px; overflow:hidden; }
  .progress-bar-fill { height:100%; background:#3182ce; border-radius:5px; width:0%; transition:width 0.4s ease; }

  #home-page { display:none; }
  #home-page.active { display:block; animation:fadeIn 0.3s ease; }
  .home-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; }
  .home-card { background:white; border-radius:10px; padding:18px 16px; cursor:pointer; transition:all 0.2s; box-shadow:0 1px 4px rgba(0,0,0,0.06); text-align:center; border:2px solid transparent; position:relative; }
  .home-card:hover { transform:translateY(-3px); box-shadow:0 6px 16px rgba(0,0,0,0.1); border-color:#3182ce; }
  .home-card.completed { border-color:#38a169; background:#f0fff4; }
  .home-card-num { width:36px; height:36px; line-height:36px; border-radius:50%; background:#ebf8ff; color:#3182ce; font-weight:700; font-size:14px; margin:0 auto 10px; }
  .home-card.completed .home-card-num { background:#38a169; color:white; }
  .home-card-title { font-size:14px; font-weight:600; color:#1a365d; margin-bottom:6px; }
  .home-card-meta { font-size:12px; color:#a0aec0; }
  .card-check { position:absolute; top:8px; right:10px; width:22px; height:22px; line-height:22px; border-radius:50%; background:#e2e8f0; color:white; font-size:13px; font-weight:700; opacity:0; transition:all 0.2s; }
  .home-card.completed .card-check { opacity:1; background:#38a169; }

  #workout-page { display:none; animation:fadeIn 0.3s ease; }
  #workout-page.active { display:block; }
  @keyframes fadeIn { from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)} }

  .top-bar { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; gap:10px; }
  .back-btn { padding:8px 18px; border:1px solid #cbd5e0; border-radius:6px; background:white; color:#4a5568; font-size:13px; cursor:pointer; }
  .back-btn:hover { background:#edf2f7; }
  .topic-badge { font-size:16px; font-weight:600; color:#1a365d; background:white; padding:8px 18px; border-radius:6px; box-shadow:0 1px 4px rgba(0,0,0,0.06); }

  .steps-bar { display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
  .step-dot { display:flex; align-items:center; gap:8px; font-size:13px; color:#a0aec0; font-weight:500; }
  .step-num { width:28px; height:28px; border-radius:50%; background:#e2e8f0; color:#718096; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; transition:all 0.3s; }
  .step-dot.active { color:#3182ce; }
  .step-dot.active .step-num { background:#3182ce; color:white; }
  .step-dot.done { color:#38a169; }
  .step-dot.done .step-num { background:#38a169; color:white; }
  .step-line { width:30px; height:2px; background:#e2e8f0; border-radius:1px; }
  .step-line.done { background:#38a169; }

  .step-page { display:none; animation:fadeIn 0.3s ease; }
  .step-page.active { display:block; }

  .step-nav { display:flex; justify-content:center; gap:12px; margin-top:24px; padding-top:16px; border-top:1px dashed #e2e8f0; }
  .step-btn { padding:10px 28px; border:none; border-radius:6px; font-size:14px; cursor:pointer; font-weight:500; transition:all 0.2s; }
  .step-btn.primary { background:#3182ce; color:white; }
  .step-btn.primary:hover { background:#2b6cb0; }
  .step-btn.secondary { background:#e2e8f0; color:#4a5568; }
  .step-btn.secondary:hover { background:#cbd5e0; }
  .step-btn.success { background:#38a169; color:white; }
  .step-btn.success:hover { background:#2f855a; }

  .topic-card { background:white; border-radius:10px; padding:20px; margin-bottom:16px; box-shadow:0 1px 4px rgba(0,0,0,0.06); }
  .topic-title { font-size:18px; color:#1a365d; margin-bottom:14px; padding-bottom:8px; border-bottom:2px solid #3182ce; font-weight:600; }
  .question-block { margin-bottom:20px; padding-bottom:16px; border-bottom:1px dashed #e2e8f0; }
  .question-block:last-child { border-bottom:none; margin-bottom:0; padding-bottom:0; }
  .question-text { font-size:15px; font-weight:600; color:#2d3748; margin-bottom:10px; }
  .answer-box { background:#f7fafc; border-left:3px solid #3182ce; padding:14px; margin-bottom:10px; border-radius:0 6px 6px 0; }
  .answer-en { font-size:14px; color:#1a202c; margin-bottom:8px; line-height:1.7; }
  .answer-cn { font-size:13px; color:#4a5568; line-height:1.75; }
  .pairs-section { margin-top:10px; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
  .pair-tag { display:inline-flex; align-items:center; padding:5px 10px; border-radius:16px; font-size:12px; font-weight:500; }
  .pair-abstract { background:#ebf8ff; color:#2b6cb0; border:1px solid #bee3f8; }
  .pair-concrete { background:#fffff0; color:#975a16; border:1px solid #fefcbf; }
  .pair-arrow { color:#a0aec0; font-size:11px; margin:0 4px; }
  .match-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; }
  .match-col { background:#f7fafc; border-radius:8px; padding:14px; }
  .match-col h4 { text-align:center; color:#1a365d; margin-bottom:10px; font-size:14px; }
  .match-item { padding:10px 14px; margin-bottom:8px; border-radius:6px; cursor:pointer; transition:all 0.15s; font-size:13px; border:2px solid transparent; line-height:1.5; }
  .match-item:hover { transform:translateY(-1px); box-shadow:0 3px 8px rgba(0,0,0,0.08); }
  .match-item.selected { border-color:#3182ce; background:#ebf8ff; }
  .match-item.matched { opacity:0.45; pointer-events:none; }
  .match-item.correct { border-color:#38a169; background:#f0fff4; }
  .match-item.wrong { border-color:#e53e3e; background:#fff5f5; animation:shake 0.4s; }
  @keyframes shake { 0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)} }
  .match-abstract { background:#ebf8ff; color:#2b6cb0; }
  .match-concrete { background:#fffff0; color:#975a16; }
  .words-box { display:flex; flex-wrap:wrap; gap:6px; padding:12px; background:#edf2f7; border-radius:6px; margin-bottom:14px; min-height:50px; }
  .word-chip { padding:6px 12px; border-radius:16px; font-size:12px; cursor:grab; user-select:none; transition:all 0.15s; font-weight:500; }
  .word-chip:active { cursor:grabbing; }
  .word-chip.abstract { background:#ebf8ff; color:#2b6cb0; border:1px solid #bee3f8; }
  .word-chip.concrete { background:#fffff0; color:#975a16; border:1px solid #fefcbf; }
  .word-chip.dragging { opacity:0.4; }
  .word-chip.used { opacity:0.3; pointer-events:none; text-decoration:line-through; }
  .drag-question { margin-bottom:12px; padding:12px; background:#f7fafc; border-radius:6px; }
  .drag-q-text { font-weight:600; color:#2d3748; margin-bottom:8px; font-size:14px; }
  .drop-zone { min-height:36px; padding:8px; border:2px dashed #cbd5e0; border-radius:6px; background:white; display:flex; flex-wrap:wrap; gap:5px; align-items:center; transition:all 0.2s; }
  .drop-zone.drag-over { border-color:#3182ce; background:#ebf8ff; }
  .drop-zone .dropped-chip { padding:5px 10px; border-radius:14px; font-size:11px; font-weight:500; }
  .check-btn { display:inline-block; margin:12px 0 8px; padding:10px 28px; background:#3182ce; color:white; border:none; border-radius:6px; font-size:14px; cursor:pointer; font-weight:500; }
  .check-btn:hover { background:#2b6cb0; }
  .score-display { font-size:15px; color:#38a169; margin-top:8px; font-weight:600; }
  .info-box { background:#ebf8ff; border:1px solid #bee3f8; border-radius:8px; padding:12px 16px; margin-bottom:16px; font-size:13px; color:#2b6cb0; }

  @media(max-width:768px){
    .home-grid { grid-template-columns:repeat(2,1fr); }
    .match-grid { grid-template-columns:1fr; }
    .steps-bar { font-size:12px; }
    .step-line { width:16px; }
  }


  :root {
    --ink:#171914; --ink-2:#35382f; --paper:#f4f1e8; --surface:#fffdf7;
    --line:#cbc7ba; --muted:#75776f; --acid:#d8ff3e; --sky:#b9ddff;
    --coral:#ff765f; --green:#24734b; --red:#b93d32; --shadow:0 14px 34px rgba(23,25,20,.09);
  }
  html { scroll-behavior:smooth; }
  body { background:var(--paper); color:var(--ink); font-family:Inter,"Segoe UI","Microsoft YaHei",sans-serif; line-height:1.6; }
  button,input,select { font:inherit; }
  button:focus-visible,input:focus-visible,select:focus-visible,.home-card:focus-visible { outline:3px solid var(--ink); outline-offset:3px; }
  .preview-topbar { height:72px; max-width:1320px; margin:auto; padding:0 28px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
  .preview-brand { display:flex; align-items:center; gap:11px; color:inherit; text-decoration:none; }
  .preview-brand>span { width:38px; height:38px; display:grid; place-items:center; background:var(--ink); color:var(--acid); border-radius:50%; font-size:12px; font-weight:900; letter-spacing:.04em; }
  .preview-brand>div { display:grid; line-height:1.08; }
  .preview-brand strong { font-size:14px; letter-spacing:.02em; }
  .preview-brand small { margin-top:5px; color:var(--muted); font-size:10px; letter-spacing:.1em; text-transform:uppercase; }
  .preview-badge { padding:7px 12px; border:1px solid var(--ink); border-radius:999px; font-size:11px; font-weight:800; letter-spacing:.06em; }
  .container { max-width:1240px; padding:28px 28px 64px; }
  .catalog-hero { overflow:hidden; position:relative; padding:28px 32px 34px; border:1px solid var(--ink); border-radius:24px 24px 6px 24px; background:var(--ink); color:var(--surface); box-shadow:var(--shadow); }
  .catalog-hero:after { content:"A → C"; position:absolute; right:-8px; bottom:-68px; color:rgba(216,255,62,.1); font-family:Georgia,serif; font-weight:900; font-size:190px; line-height:1; pointer-events:none; }
  .catalog-kicker { position:relative; z-index:1; display:flex; justify-content:space-between; align-items:center; padding-bottom:20px; border-bottom:1px solid rgba(255,255,255,.2); color:var(--acid); font-size:10px; font-weight:800; letter-spacing:.18em; }
  .catalog-version { color:#fff; opacity:.55; }
  .catalog-hero-grid { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.5fr) minmax(250px,.7fr); align-items:end; gap:56px; padding-top:26px; }
  .catalog-eyebrow { margin-bottom:10px; color:var(--sky); font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
  .catalog-hero h1 { margin:0; color:#fff; text-align:left; font-family:Georgia,"Times New Roman",serif; font-size:clamp(40px,5vw,68px); font-weight:500; line-height:1.02; letter-spacing:-.045em; }
  .catalog-hero h1 em { color:var(--acid); font-weight:500; }
  .catalog-hero .subtitle { max-width:650px; margin:20px 0 0; color:rgba(255,255,255,.7); text-align:left; font-size:14px; line-height:1.8; }
  .catalog-method { padding:18px 20px; border:1px solid rgba(255,255,255,.23); background:rgba(255,255,255,.05); backdrop-filter:blur(6px); }
  .catalog-method>span { color:rgba(255,255,255,.54); font-size:10px; font-weight:800; letter-spacing:.16em; }
  .catalog-method ol { margin-top:11px; list-style:none; }
  .catalog-method li { display:flex; align-items:center; gap:12px; padding:9px 0; border-top:1px solid rgba(255,255,255,.14); color:#fff; font-size:13px; }
  .catalog-method b { color:var(--acid); font-size:10px; }
  .progress-wrap { max-width:none; margin:-1px 24px 20px; padding:18px 20px; border:1px solid var(--ink); border-top:0; border-radius:0 0 16px 16px; background:var(--surface); box-shadow:none; }
  .progress-top { margin-bottom:10px; }
  .progress-label,.progress-ratio { color:var(--ink); font-size:12px; font-weight:800; }
  .progress-bar-bg { height:8px; border-radius:0; background:#dedacf; }
  .progress-bar-fill { border-radius:0; background:var(--acid); box-shadow:inset 0 0 0 1px rgba(23,25,20,.18); }
  .catalog-controls { margin:24px 0 18px; }
  .resume-panel { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:10px; padding:20px 22px; border:1px solid var(--ink); border-radius:16px 16px 4px 16px; background:var(--sky); }
  .resume-panel>div { display:grid; }
  .control-kicker { margin-bottom:3px; font-size:9px; font-weight:900; letter-spacing:.18em; }
  .resume-panel strong { font-size:18px; line-height:1.35; }
  .resume-panel small { margin-top:3px; color:var(--ink-2); font-size:11px; }
  .control-primary,.control-secondary { min-height:44px; padding:0 18px; border:1px solid var(--ink); border-radius:8px; cursor:pointer; font-size:12px; font-weight:800; transition:transform .16s,box-shadow .16s,background .16s; }
  .control-primary { background:var(--ink); color:#fff; }
  .control-primary span { margin-left:8px; color:var(--acid); }
  .control-secondary { background:rgba(255,255,255,.45); color:var(--ink); }
  .control-primary:hover,.control-secondary:hover { transform:translateY(-2px); box-shadow:3px 3px 0 var(--ink); }
  .filter-panel { display:grid; grid-template-columns:minmax(280px,1fr) 180px auto; gap:10px; margin-top:10px; padding:14px; border:1px solid var(--line); background:rgba(255,253,247,.72); }
  .catalog-search { display:flex; align-items:center; gap:8px; min-height:44px; padding:0 13px; border:1px solid var(--line); background:#fff; }
  .catalog-search span { font-size:22px; line-height:1; transform:rotate(-18deg); }
  .catalog-search input { width:100%; border:0; outline:0; background:transparent; color:var(--ink); font-size:12px; }
  #topic-category { min-height:44px; padding:0 12px; border:1px solid var(--line); border-radius:0; background:#fff; color:var(--ink); font-size:12px; }
  .status-filters { display:flex; align-items:stretch; border:1px solid var(--line); background:#fff; }
  .status-filters button { padding:0 11px; border:0; border-right:1px solid var(--line); background:transparent; color:var(--muted); cursor:pointer; white-space:nowrap; font-size:11px; font-weight:700; }
  .status-filters button:last-child { border-right:0; }
  .status-filters button.is-active { background:var(--ink); color:#fff; }
  .status-filters b { margin-left:4px; color:inherit; }
  .filter-summary { display:flex; justify-content:space-between; align-items:center; padding:10px 4px 0; color:var(--muted); font-size:11px; }
  #clear-filters { border:0; border-bottom:1px solid currentColor; background:transparent; color:var(--ink); cursor:pointer; font-size:11px; }
  .home-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
  .home-card { min-height:162px; padding:18px; overflow:hidden; border:1px solid var(--line); border-radius:4px 16px 16px 16px; background:var(--surface); box-shadow:none; text-align:left; transform:none; }
  .home-card:hover { transform:translateY(-3px); border-color:var(--ink); box-shadow:5px 5px 0 var(--ink); }
  .home-card[hidden] { display:none !important; }
  .home-card-num { width:auto; height:auto; margin:0 0 28px; border-radius:0; background:transparent; color:var(--muted); font-family:Georgia,serif; font-size:12px; font-weight:700; line-height:1; }
  .home-card-title { margin-bottom:8px; color:var(--ink); font-size:15px; font-weight:800; line-height:1.4; }
  .home-card-meta { color:var(--muted); font-size:10px; letter-spacing:.02em; }
  .card-check { display:none; }
  .card-status { position:absolute; top:12px; right:12px; padding:4px 8px; border:1px solid var(--line); border-radius:99px; color:var(--muted); background:#fff; font-size:9px; font-weight:800; }
  .home-card.is-learning { border-color:#8b6b13; background:#fff9df; }
  .home-card.is-learning .card-status { border-color:#8b6b13; color:#705306; background:#ffe88b; }
  .home-card.is-mastered { border-color:var(--green); background:#f1fff3; }
  .home-card.is-mastered .card-status { border-color:var(--green); color:#fff; background:var(--green); }
  .home-card.is-mastered .home-card-num:after { content:"  ✓"; color:var(--green); }
  .empty-state { grid-column:1/-1; padding:58px 20px; border:1px dashed var(--line); background:rgba(255,255,255,.3); text-align:center; }
  .empty-state strong { display:block; margin-bottom:6px; font-family:Georgia,serif; font-size:22px; }
  .empty-state span { color:var(--muted); font-size:12px; }
  #workout-page { max-width:1040px; margin:0 auto; }
  .top-bar { position:sticky; top:10px; z-index:20; margin-bottom:12px; padding:10px 12px; border:1px solid var(--ink); border-radius:13px; background:rgba(244,241,232,.94); box-shadow:0 8px 24px rgba(23,25,20,.08); backdrop-filter:blur(10px); }
  .back-btn { padding:9px 13px; border:1px solid var(--ink); border-radius:7px; background:var(--surface); color:var(--ink); font-size:11px; font-weight:800; }
  .topic-heading { flex:1; text-align:center; }
  .topic-heading>span { display:block; color:var(--muted); font-size:9px; font-weight:900; letter-spacing:.12em; }
  .topic-badge { padding:0; border-radius:0; background:transparent; box-shadow:none; color:var(--ink); font-size:14px; font-weight:800; }
  .topic-state { display:flex; align-items:center; gap:7px; padding:7px 10px; border:1px solid var(--line); border-radius:99px; background:#fff; font-size:10px; font-weight:800; }
  .topic-state i { width:7px; height:7px; border-radius:50%; background:#e3b12a; }
  .topic-state.is-mastered i { background:var(--green); }
  .steps-bar { margin:0 0 16px; padding:15px; border:1px solid var(--line); background:rgba(255,253,247,.68); }
  .step-dot { color:var(--muted); font-size:11px; font-weight:800; }
  .step-num { width:28px; height:28px; border:1px solid var(--line); background:#fff; color:var(--muted); }
  .step-dot.active { color:var(--ink); }
  .step-dot.active .step-num { border-color:var(--ink); background:var(--acid); color:var(--ink); }
  .step-dot.done { color:var(--green); }
  .step-dot.done .step-num { background:var(--green); color:#fff; }
  .step-line { background:var(--line); }
  .step-line.done { background:var(--green); }
  .topic-card { padding:22px; border:1px solid var(--line); border-radius:6px 20px 20px 20px; background:var(--surface); box-shadow:var(--shadow); }
  .topic-title { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:18px; padding:0 0 14px; border-bottom:1px solid var(--ink); color:var(--ink); font-family:Georgia,"Microsoft YaHei",serif; font-size:19px; }
  .topic-title:after { content:"VOCABULARY LOGIC"; color:var(--muted); font-family:Inter,"Segoe UI",sans-serif; font-size:8px; letter-spacing:.15em; }
  .question-block { margin:0 0 9px; padding:0; border:1px solid var(--line); border-radius:8px; background:#fff; }
  .question-block:last-child { margin-bottom:0; }
  .question-toggle { width:100%; display:grid; grid-template-columns:42px 1fr 24px; align-items:center; gap:10px; padding:14px; border:0; background:transparent; color:var(--ink); text-align:left; cursor:pointer; }
  .question-toggle>span { color:var(--muted); font-size:9px; font-weight:900; letter-spacing:.1em; }
  .question-toggle>strong { font-size:13px; line-height:1.5; }
  .question-toggle>i { font-style:normal; font-size:18px; transition:transform .2s; }
  .question-block.is-open .question-toggle>i { transform:rotate(45deg); }
  .question-block .answer-box,.question-block .pairs-section { display:none; }
  .question-block.is-open .answer-box,.question-block.is-open .pairs-section { display:block; animation:fadeIn .2s ease; }
  .answer-box { margin:0 14px 12px; padding:14px 16px; border:0; border-left:3px solid var(--sky); border-radius:0; background:#f5f8fa; }
  .answer-en { color:var(--ink); font-size:13px; line-height:1.75; }
  .answer-cn { padding-top:10px; border-top:1px solid #dfe4e6; color:var(--muted); font-size:12px; line-height:1.75; }
  .pairs-section { margin:0 14px 14px; padding:12px; border:1px solid #d5d1c4; background:#faf8f0; }
  .pair-tag { border-radius:4px; font-size:10px; }
  .pair-abstract { border-color:#86bde9; background:var(--sky); color:#153b56; }
  .pair-concrete { border-color:#c5a70e; background:#fff0a6; color:#5e4b00; }
  .info-box { position:relative; padding:13px 15px 13px 42px; border:1px solid #84b5d9; border-radius:8px; background:#eaf6ff; color:#163d57; font-size:11px; }
  .info-box:before { content:"i"; position:absolute; left:14px; top:13px; width:18px; height:18px; display:grid; place-items:center; border-radius:50%; background:#163d57; color:#fff; font-family:Georgia,serif; font-weight:800; }
  .exercise-overview { display:grid; grid-template-columns:1fr auto; align-items:center; gap:14px; margin-bottom:14px; }
  .exercise-overview span { color:var(--muted); font-size:10px; }
  .exercise-overview b { color:var(--ink); font-size:12px; }
  .mini-progress { width:180px; height:6px; overflow:hidden; background:#ddd9cd; }
  .mini-progress i { display:block; height:100%; width:0; background:var(--green); transition:width .25s; }
  .match-grid { gap:10px; }
  .match-col { padding:12px; border:1px solid var(--line); border-radius:8px; background:#f7f5ee; }
  .match-col h4 { display:flex; justify-content:space-between; color:var(--ink); font-size:11px; }
  .match-col h4 span { color:var(--muted); font-size:9px; }
  .match-item { width:100%; min-height:50px; margin-bottom:7px; padding:10px 12px; border:1px solid transparent; border-radius:6px; text-align:left; cursor:pointer; font-size:11px; line-height:1.45; }
  .match-item:hover { transform:none; border-color:var(--ink); box-shadow:none; }
  .match-abstract { background:#dfedfa; color:#183e59; }
  .match-concrete { background:#fff1b5; color:#5e4a00; }
  .match-item.selected { border-color:var(--ink); background:var(--acid); color:var(--ink); box-shadow:3px 3px 0 var(--ink); }
  .match-item.matched { opacity:.28; }
  .match-item.correct { border-color:var(--green); background:#dff4e5; }
  .match-item.wrong { border-color:var(--red); background:#ffe4de; }
  .feedback-panel { display:flex; align-items:flex-start; gap:11px; margin-top:13px; padding:13px 14px; border:1px solid var(--line); background:#fff; color:var(--ink-2); font-size:11px; }
  .feedback-panel i { flex:0 0 auto; width:22px; height:22px; display:grid; place-items:center; border-radius:50%; background:#dedbd2; font-style:normal; font-weight:900; }
  .feedback-panel.is-good { border-color:var(--green); background:#effbf2; }
  .feedback-panel.is-good i { background:var(--green); color:#fff; }
  .feedback-panel.is-wrong { border-color:var(--red); background:#fff1ed; }
  .feedback-panel.is-wrong i { background:var(--red); color:#fff; }
  .score-display { color:var(--ink); font-size:11px; }
  .word-bank { position:sticky; top:86px; z-index:14; max-height:min(42vh,280px); margin-bottom:15px; padding:14px; overflow:hidden; border:1px solid var(--ink); background:rgba(246,243,235,.97); box-shadow:0 10px 24px rgba(23,25,20,.13); backdrop-filter:blur(10px); }
  .word-bank-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
  .word-bank-head strong { font-size:11px; }
  .word-bank-head span { color:var(--muted); font-size:9px; }
  .words-box { gap:7px; max-height:calc(min(42vh,280px) - 58px); margin:0; padding:2px 5px 5px 2px; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; background:transparent; }
  .word-chip { padding:7px 11px; border-radius:5px; cursor:pointer; font-size:10px; }
  .word-chip:hover { transform:translateY(-1px); border-color:var(--ink); }
  .word-chip.selected { outline:2px solid var(--ink); outline-offset:2px; box-shadow:2px 2px 0 var(--ink); }
  .word-chip.used { opacity:.25; pointer-events:none; text-decoration:none; }
  .drag-question { padding:12px; border:1px solid var(--line); border-radius:8px; background:#fff; }
  .drag-q-text { display:flex; gap:9px; color:var(--ink); font-size:12px; }
  .drag-q-text span { flex:0 0 auto; color:var(--muted); font-size:9px; }
  .drop-zone { min-height:45px; margin-top:9px; padding:8px; border:1px dashed #9e9b91; border-radius:5px; background:#faf9f5; cursor:pointer; }
  .place-here { flex:1 1 100%; min-height:30px; border:0; border-radius:3px; background:transparent; color:#8b8a84; cursor:pointer; text-align:left; font-size:10px; }
  .place-here:hover,.place-here:focus-visible { background:#f0eee6; color:var(--ink); }
  .drop-zone.is-target { border-color:var(--ink); background:#f1f9d2; }
  .drop-zone.is-correct { border-color:var(--green); background:#effbf2; }
  .drop-zone.has-error { border-color:var(--red); background:#fff1ed; }
  .dropped-chip { border-radius:4px !important; cursor:pointer; }
  .dropped-chip.is-correct { outline:1px solid var(--green); }
  .dropped-chip.is-wrong { outline:1px solid var(--red); text-decoration:line-through; }
  .exercise-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:12px; }
  .check-btn,.retry-btn { margin:0; padding:10px 18px; border:1px solid var(--ink); border-radius:6px; cursor:pointer; font-size:11px; font-weight:800; }
  .check-btn { background:var(--ink); color:#fff; }
  .retry-btn { background:#fff; color:var(--ink); }
  .step-nav { position:sticky; bottom:12px; z-index:15; justify-content:flex-end; margin-top:18px; padding:12px; border:1px solid var(--ink); border-radius:12px; background:rgba(255,253,247,.95); box-shadow:0 10px 28px rgba(23,25,20,.16); backdrop-filter:blur(10px); }
  .step-btn { min-height:42px; padding:0 18px; border:1px solid var(--ink); border-radius:6px; font-size:11px; font-weight:800; }
  .step-btn.primary { background:var(--ink); color:#fff; }
  .step-btn.primary:hover { background:#2e3129; }
  .step-btn.secondary { background:#fff; color:var(--ink); }
  .step-btn.success { background:var(--green); color:#fff; }
  .step-btn:disabled { opacity:.35; cursor:not-allowed; }
  .nav-hint { margin-right:auto; align-self:center; color:var(--muted); font-size:10px; }
  .complete-dialog { width:min(520px,calc(100% - 28px)); padding:0; border:1px solid var(--ink); border-radius:8px 24px 24px 24px; background:var(--surface); color:var(--ink); box-shadow:12px 12px 0 var(--ink); }
  .complete-dialog::backdrop { background:rgba(23,25,20,.66); backdrop-filter:blur(3px); }
  .complete-inner { padding:28px; }
  .complete-kicker { color:var(--green); font-size:9px; font-weight:900; letter-spacing:.16em; }
  .complete-inner h2 { margin:7px 0 8px; font-family:Georgia,"Microsoft YaHei",serif; font-size:30px; line-height:1.2; }
  .complete-inner p { color:var(--muted); font-size:12px; }
  .complete-score { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:20px 0; }
  .complete-score div { padding:13px; border:1px solid var(--line); background:#f7f5ed; }
  .complete-score b { display:block; font-size:20px; }
  .complete-score span { color:var(--muted); font-size:9px; }
  .complete-actions { display:flex; justify-content:flex-end; gap:8px; }
  @media(max-width:980px){
    .home-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .filter-panel { grid-template-columns:1fr 160px; }
    .status-filters { grid-column:1/-1; min-height:40px; }
    .status-filters button { flex:1; }
  }
  @media(max-width:720px){
    .preview-topbar { height:60px; padding:0 16px; }
    .preview-brand small,.preview-badge { display:none; }
    .container { padding:18px 14px 44px; }
    .catalog-hero { padding:22px 20px 26px; border-radius:18px 18px 4px 18px; }
    .catalog-kicker { font-size:8px; }
    .catalog-version { display:none; }
    .catalog-hero-grid { grid-template-columns:1fr; gap:24px; }
    .catalog-hero h1 { font-size:43px; }
    .catalog-method { display:none; }
    .progress-wrap { margin:0 10px 16px; }
    .resume-panel { grid-template-columns:1fr 1fr; padding:16px; }
    .resume-panel>div { grid-column:1/-1; }
    .filter-panel { grid-template-columns:1fr; padding:10px; }
    .status-filters { grid-column:auto; overflow:auto; }
    .status-filters button { min-width:82px; min-height:40px; }
    .home-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .home-card { min-height:150px; padding:15px; }
    .home-card-num { margin-bottom:25px; }
    .top-bar { top:6px; display:grid; grid-template-columns:auto 1fr auto; gap:7px; }
    .back-btn { padding:8px 9px; }
    .topic-heading { overflow:hidden; }
    .topic-badge { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
    .topic-state { padding:6px; font-size:0; }
    .steps-bar { justify-content:space-between; flex-wrap:nowrap; gap:4px; padding:10px; }
    .step-dot { gap:5px; font-size:9px; }
    .step-num { width:23px; height:23px; font-size:10px; }
    .step-line { width:9px; }
    .topic-card { padding:13px; border-radius:5px 14px 14px 14px; }
    .topic-title { align-items:flex-start; font-size:16px; }
    .topic-title:after { display:none; }
    .question-toggle { grid-template-columns:32px 1fr 20px; padding:12px 10px; }
    .question-toggle>strong { font-size:12px; }
    .match-grid { grid-template-columns:1fr; }
    .match-col { padding:9px; }
    .match-item { min-height:44px; }
    .exercise-overview { grid-template-columns:1fr; }
    .mini-progress { width:100%; }
    .step-nav { bottom:7px; flex-wrap:wrap; padding:9px; }
    .nav-hint { width:100%; margin:0 0 2px; text-align:center; }
    .step-btn { flex:1; padding:0 10px; white-space:nowrap; }
  }
  /* Readability pass: teaching content takes priority over compact density. */
  body { font-size:16px; }
  .preview-brand strong { font-size:16px; }
  .preview-brand small,.preview-badge { font-size:12px; }
  .catalog-kicker { font-size:12px; }
  .catalog-eyebrow { font-size:14px; }
  .catalog-hero .subtitle { max-width:720px; font-size:17px; line-height:1.85; }
  .catalog-method>span { font-size:12px; }
  .catalog-method li { font-size:15px; }
  .catalog-method b { font-size:12px; }
  .progress-label,.progress-ratio { font-size:14px; }
  .control-kicker { font-size:11px; }
  .resume-panel strong { font-size:20px; }
  .resume-panel small { font-size:14px; line-height:1.6; }
  .control-primary,.control-secondary { min-height:48px; font-size:14px; }
  .catalog-search input,#topic-category { font-size:14px; }
  .status-filters button { min-height:46px; padding:0 14px; font-size:13px; }
  .filter-summary,#clear-filters { font-size:13px; }
  .home-card { min-height:178px; }
  .home-card-num { font-size:14px; }
  .home-card-title { font-size:18px; line-height:1.5; }
  .home-card-meta { font-size:13px; }
  .card-status { padding:5px 9px; font-size:11px; }
  .back-btn { font-size:13px; }
  .topic-heading>span { font-size:11px; }
  .topic-badge { font-size:17px; }
  .topic-state { font-size:12px; }
  .step-dot { font-size:14px; }
  .step-num { width:32px; height:32px; font-size:14px; }
  .topic-title { font-size:23px; line-height:1.45; }
  .topic-title:after { font-size:10px; }
  .question-toggle { grid-template-columns:48px 1fr 28px; padding:18px 16px; }
  .question-toggle>span { font-size:12px; }
  .question-toggle>strong { font-size:16px; line-height:1.65; }
  .question-toggle>i { font-size:21px; }
  .answer-box { padding:18px 20px; }
  .answer-en { font-size:16px; line-height:1.9; }
  .answer-cn { font-size:15px; line-height:1.9; }
  .pairs-section { gap:10px; padding:15px; }
  .pair-tag { padding:7px 11px; font-size:13px; line-height:1.5; }
  .pair-arrow { font-size:13px; }
  .info-box { padding:16px 17px 16px 48px; font-size:14px; line-height:1.75; }
  .info-box:before { top:17px; width:21px; height:21px; }
  .exercise-overview span { font-size:13px; }
  .exercise-overview b { font-size:15px; }
  .match-col h4 { font-size:14px; }
  .match-col h4 span { font-size:11px; }
  .match-item { min-height:58px; padding:13px 14px; font-size:14px; line-height:1.6; }
  .feedback-panel { padding:16px; font-size:14px; line-height:1.65; }
  .feedback-panel i { width:26px; height:26px; }
  .word-bank-head strong { font-size:15px; }
  .word-bank-head span { font-size:12px; }
  .word-chip { padding:9px 12px; font-size:13px; line-height:1.45; }
  .drag-question { padding:15px; }
  .drag-q-text { font-size:15px; line-height:1.65; }
  .drag-q-text span { font-size:11px; }
  .drop-zone { min-height:54px; }
  .place-here { min-height:36px; font-size:13px; }
  .dropped-chip { padding:7px 10px !important; font-size:13px !important; }
  .check-btn,.retry-btn { min-height:44px; font-size:13px; }
  .score-display { font-size:14px; }
  .score-display:before { content:"AUTO · "; color:var(--green); font-size:11px; font-weight:900; letter-spacing:.08em; }
  .nav-hint { font-size:13px; }
  .step-btn { min-height:46px; font-size:13px; }
  .complete-kicker { font-size:11px; }
  .complete-inner p { font-size:14px; line-height:1.7; }
  .complete-score span { font-size:12px; }
  @media(max-width:720px){
    .catalog-kicker { font-size:10px; }
    .catalog-hero .subtitle { font-size:16px; }
    .resume-panel strong { font-size:19px; }
    .home-card { min-height:150px; }
    .home-card-title { font-size:17px; }
    .topic-badge { font-size:15px; }
    .step-dot { font-size:12px; }
    .step-num { width:28px; height:28px; font-size:12px; }
    .topic-title { font-size:20px; }
    .question-toggle { grid-template-columns:40px 1fr 24px; padding:15px 12px; }
    .question-toggle>strong { font-size:15px; }
    .answer-en { font-size:16px; }
    .answer-cn { font-size:15px; }
    .match-item { font-size:14px; }
    .word-chip { font-size:13px; }
    .word-bank { top:72px; max-height:min(38vh,260px); padding:12px; }
    .words-box { max-height:calc(min(38vh,260px) - 54px); }
    .nav-hint { font-size:12px; line-height:1.5; }
  }
  @media(max-width:420px){ .home-grid{grid-template-columns:1fr;} .home-card{min-height:140px;} }

/* OpenIELTS speaking studio: navy ink, warm paper, acid-yellow accents. */
:root { --ink:#102331; --ink-2:#173849; --paper:#f7f3ea; --surface:#fffdf7; --line:#ccd2cf; --muted:#5d707a; --acid:#e7ff59; --sky:#bfe8ef; --coral:#ff6b4a; }
body.season-edition { font-family:"PingFang SC","Microsoft YaHei",sans-serif; background:var(--paper); }
.season-edition .preview-topbar { max-width:1240px; height:78px; }
.season-edition .preview-brand > span { border-radius:8px; color:#fff; }
.season-edition .preview-brand strong { font-family:Georgia,serif; font-size:21px; }
.season-edition .preview-badge { display:block; border:0; padding:8px 0; border-radius:0; color:var(--ink); text-decoration:none; font-size:13px; }
.season-edition .container { padding-top:34px; }
.season-edition .catalog-hero { padding:26px 34px 40px; border-radius:0; box-shadow:8px 8px 0 var(--sky); }
.season-edition .catalog-hero::after { content:"P3"; right:-8px; bottom:-42px; font-size:240px; color:rgba(231,255,89,.09); }
.season-edition .catalog-hero-grid { grid-template-columns:minmax(0,1.5fr) minmax(240px,.7fr); gap:40px; padding-top:34px; }
.season-edition .catalog-hero h1 { font-family:Georgia,"Songti SC","SimSun",serif; font-size:clamp(42px,5vw,68px); font-weight:700; line-height:1.15; letter-spacing:-.035em; }
.season-edition .catalog-hero h1 em { font-weight:700; }
.season-label { display:inline-block; margin-bottom:24px; padding:7px 13px; color:var(--acid); border:1px solid rgba(231,255,89,.6); font-size:14px; font-weight:700; letter-spacing:.04em; }
.season-edition .catalog-eyebrow { color:var(--sky); font-family:monospace; font-size:12px; }
.season-edition .catalog-version { opacity:.85; }
.season-edition .catalog-method { padding:14px 18px; }
.season-edition .catalog-hero .subtitle { max-width:610px; margin-top:22px; color:#d3dfe2; font-size:16px; }
.season-stats { display:grid; grid-template-columns:repeat(3,1fr) 1.35fr; margin-top:30px; border:1px solid var(--ink); background:var(--surface); }
.season-stats > div { display:flex; gap:6px; flex-direction:column; justify-content:center; padding:20px 24px; border-right:1px solid var(--line); }
.season-stats strong { font:700 36px/1.1 Georgia,serif; }
.season-stats span { color:var(--muted); font-size:13px; }
.season-stats .season-source { border:0; background:var(--acid); }
.season-source b { font-size:14px; }
.season-edition .progress-wrap { margin:18px 0 24px; border:1px solid var(--line); border-radius:0; }
.season-edition .resume-panel { border-radius:0; }
.season-edition .control-primary,.season-edition .control-secondary,.season-edition .back-btn { border-radius:0; }
.season-edition .home-card { border-radius:0; border-color:var(--ink); min-height:195px; }
.season-edition .home-card:nth-child(4n+2) { background:#eef7f3; }
.season-edition .home-card:nth-child(4n+3) { background:#fff0e9; }
.season-edition .home-card:nth-child(4n) { background:#f5f8dc; }
.season-edition .home-card:hover { transform:translate(-3px,-3px); box-shadow:6px 6px 0 var(--ink); }
.season-edition .home-card-num { margin-bottom:38px; font:700 12px/1 monospace; }
.season-edition .home-card-num::before { content:"TOPIC / "; }
.season-edition .home-card-title { font-family:Georgia,"Songti SC","SimSun",serif; font-size:21px; }
.season-edition .home-card.is-learning { background:#fff4ca; }
.season-edition .home-card.is-mastered { background:var(--acid); }
.season-edition .card-status { border-radius:0; }
.season-edition .topic-card,.season-edition .question-block,.season-edition .match-col,.season-edition .drag-question,.season-edition .step-btn { border-radius:0; }
.season-edition .top-bar { border-radius:0; background:var(--ink); }
.season-edition .topic-badge { color:#fff; }
.season-edition .topic-heading > span { color:var(--sky); }
.season-edition .back-btn { min-height:44px; color:var(--ink); background:var(--acid); }
.season-edition .topic-state { border-radius:0; }
.season-edition .pair-row { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1.45fr); gap:10px; align-items:center; }
.pair-row + .pair-row { margin-top:10px; }
.season-edition .pair-tag { display:block; border-radius:0; overflow-wrap:anywhere; }
.season-edition .pair-arrow { margin:0; }
.season-edition .question-toggle > strong,.season-edition .match-item,.season-edition .word-chip,.season-edition .drag-q-text > strong { overflow-wrap:anywhere; }
.season-edition .word-bank { background:rgba(247,243,234,.98); }
.season-edition .word-chip { border-radius:3px; }
.season-edition .word-chip[draggable="true"] { cursor:grab; }
.season-edition .word-chip[draggable="true"]:active { cursor:grabbing; }
.season-edition .word-chip.is-dragging { opacity:.45; }
.season-edition .drop-zone.drag-over { border:2px solid var(--ink); background:#edf8bc; outline:3px solid var(--acid); outline-offset:2px; }
.season-edition .step-btn:disabled { cursor:not-allowed; opacity:.45; }
.season-edition .step-btn:disabled:hover { transform:none; box-shadow:none; }
[hidden] { display:none !important; }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid var(--coral); outline-offset:3px; }
@media(max-width:980px) {
  .season-edition .catalog-hero-grid { grid-template-columns:1fr; gap:28px; }
  .season-edition .catalog-method { max-width:500px; }
  .season-stats { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .season-stats > div:nth-child(3) { border-right:0; }
  .season-stats .season-source { grid-column:1/-1; border-top:1px solid var(--ink); padding:14px 22px; }
}
@media(max-width:720px) {
  .season-edition .preview-topbar { height:66px; }
  .season-edition .container { padding:20px 14px 44px; }
  .season-edition .catalog-hero { padding:20px 22px 30px; box-shadow:5px 5px 0 var(--sky); }
  .season-edition .catalog-kicker { font-size:9px; }
  .season-edition .catalog-hero-grid { gap:20px; padding-top:24px; }
  .season-edition .catalog-hero h1 { font-size:42px; }
  .season-label { margin-bottom:18px; font-size:13px; }
  .season-edition .catalog-method { display:block; }
  .season-edition .catalog-method ol { display:flex; flex-wrap:wrap; gap:8px 18px; }
  .season-edition .catalog-method li { padding:4px 0; border:0; font-size:13px; }
  .season-stats { margin-top:22px; }
  .season-stats > div { padding:16px 12px; }
  .season-stats strong { font-size:29px; }
  .season-stats span { font-size:11px; }
  .season-edition .home-card { min-height:158px; }
  .season-edition .home-card-title { font-size:19px; }
  .season-edition .topic-badge { white-space:normal; line-height:1.4; }
  .season-edition .top-bar { position:relative; top:0; grid-template-columns:auto minmax(0,1fr); }
  .season-edition .topic-state { display:none; }
  .season-edition .word-bank { top:8px; }
  .season-edition .pair-row { grid-template-columns:minmax(0,1fr); gap:5px; }
  .season-edition .pair-arrow { text-align:center; transform:rotate(90deg); }
  .season-edition .step-nav { bottom:0; }
  .season-edition .match-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; }
  .season-edition .match-col { min-width:0; padding:7px; }
  .season-edition .match-col h4 { display:block; }
  .season-edition .match-col h4 span { display:block; }
  .season-edition .match-item { padding:10px 8px; font-size:13px; }
}
@media(max-width:420px) { .season-edition .home-grid { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }