:root {
    --navy:#192165;
    --teal:#18BFA0;
    --blue:#2660E5;
    --ink:#1f2553;
    --muted:#6f7696;
    --line:#e7eaf3;
    --soft:#f7f9fd;
    --soft-teal:#eefbf8;
    --soft-blue:#f1f5ff;
    /* 第三角色 C（2.27）：A 蓝 / B 绿 / C 橙 */
    --orange:#F5871F;
    --soft-orange:#fff4e8;
    --white:#ffffff;
    --success:#16876f;
    --danger:#c84545;
    --warning:#a96c00;
    --shadow:0 18px 50px rgba(25,33,101,.10);
    --radius:24px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;
    font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC","Noto Sans CJK SC",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
    color:var(--ink);
    background:
      radial-gradient(circle at 0% 0%, rgba(24,191,160,.08), transparent 25%),
      radial-gradient(circle at 100% 0%, rgba(38,96,229,.08), transparent 24%),
      #f9fbff;
  }
  button,input{font:inherit}
  button{cursor:pointer}
  a{color:inherit;text-decoration:none}

  .app-shell{max-width:1480px;margin:0 auto;padding:24px}
  .topbar{
    position:sticky;top:14px;z-index:30;
    display:flex;align-items:center;justify-content:space-between;gap:18px;
    background:rgba(255,255,255,.92);backdrop-filter:blur(18px);
    border:1px solid rgba(231,234,243,.95);
    border-radius:22px;padding:12px 16px 12px 14px;box-shadow:0 10px 36px rgba(25,33,101,.08);
  }
  .brand{display:flex;align-items:center;gap:12px;min-width:0}
  .logo-wrap{width:68px;height:44px;overflow:hidden;border-radius:12px;background:white;display:flex;align-items:center;justify-content:center}
  .logo-wrap img{width:68px;height:auto;display:block}
  .brand-copy{min-width:0}
  .brand-title{font-size:14px;font-weight:800;color:var(--navy);white-space:nowrap}
  .brand-sub{font-size:12px;color:var(--muted);margin-top:2px}
  .top-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
  .pill{
    border:1px solid var(--line);background:white;color:var(--ink);
    border-radius:999px;padding:8px 12px;font-size:13px;font-weight:700;
  }
  .pill.primary{background:var(--navy);color:white;border-color:var(--navy)}
.hero{
    margin-top:18px;
    display:grid;grid-template-columns:minmax(0,1.24fr) minmax(340px,.76fr);gap:22px;
    align-items:stretch;
  }
  .hero-main{
    min-height:0;padding:24px 28px;border-radius:28px;color:white;position:relative;overflow:hidden;
    background:linear-gradient(135deg,var(--navy) 0%,#202c86 52%,var(--blue) 100%);
    box-shadow:var(--shadow);
  }
  .hero-main:before,.hero-main:after{
    content:"";position:absolute;border-radius:50%;
  }
  .hero-main:before{width:160px;height:160px;background:rgba(24,191,160,.12);right:-42px;top:-60px}
  .hero-main:after{width:96px;height:96px;background:rgba(255,255,255,.045);right:86px;bottom:-60px}
  .hero-copy{position:relative;z-index:5;width:64%;min-width:0}
  .hero-decor{
    position:absolute;right:18px;top:18px;bottom:18px;width:28%;
    z-index:3;display:flex;align-items:center;justify-content:center;
  }
  .hero-card{
    position:relative;z-index:2;width:100%;max-width:270px;
    padding:18px 18px 16px;border-radius:24px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.18);
    box-shadow:0 10px 30px rgba(10,20,90,.18);
    backdrop-filter:blur(6px);
  }
  .hero-card-title{
    color:#dfe6ff;font-size:12px;font-weight:900;letter-spacing:.08em;
    text-transform:uppercase;margin-bottom:12px;
  }
  .hero-chip-wrap{display:flex;flex-wrap:wrap;gap:8px}
  .hero-chip{
    display:inline-flex;align-items:center;justify-content:center;
    padding:8px 11px;border-radius:999px;
    background:rgba(255,255,255,.14);color:#fff;font-size:13px;font-weight:800;
    border:1px solid rgba(255,255,255,.16);
  }
  .bubble{
    position:absolute;border-radius:50%;pointer-events:none;
    background:rgba(255,255,255,.07);
  }
  .bubble-a{width:118px;height:118px;right:-8px;top:-16px}
  .bubble-b{width:86px;height:86px;left:18px;bottom:-8px;background:rgba(24,191,160,.18)}
  .bubble-c{width:42px;height:42px;right:22px;bottom:28px;background:rgba(255,255,255,.12)}
  .eyebrow{display:inline-flex;gap:8px;align-items:center;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.12);font-size:11px;font-weight:800}
  h1{font-size:clamp(40px,4.7vw,62px);line-height:1.03;margin:12px 0 7px;letter-spacing:-1px}
  .hero-en{font-size:16px;opacity:.92;margin-bottom:14px}
  .hero-tags{display:flex;gap:8px;flex-wrap:wrap}
  .hero-tag{padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.12);font-size:11px;font-weight:700}
  .hero-aside{
    padding:16px 18px;border-radius:26px;background:white;border:1px solid var(--line);box-shadow:var(--shadow);
    display:flex;flex-direction:column;justify-content:flex-start;gap:9px;overflow:visible;
  }
  .hero-aside .section-kicker{
    font-size:12px;letter-spacing:.14em;margin-bottom:2px
  }
  .hero-aside h3{
    font-size:21px !important;line-height:1.16;margin:1px 0 6px !important
  }
  .hero-aside .overview-list{
    line-height:1.48 !important;font-size:14px;margin-left:-2px
  }
  .overview-stats{margin-top:auto}
  .lesson-meta{
    display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:1px
  }
  .meta-card{
    background:var(--soft);border-radius:15px;padding:10px 13px;min-height:64px;
    display:flex;flex-direction:column;justify-content:center;align-items:flex-start
  }
  .meta-num{
    font-size:22px;font-weight:900;color:var(--navy);line-height:1.04
  }
  .meta-label{
    font-size:11px;color:var(--muted);margin-top:5px;line-height:1.2
  }
  .progress-wrap{margin-top:1px}
  .progress-head{
    display:flex;justify-content:space-between;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:5px
  }
  .progress{height:7px;border-radius:999px;background:#edf0f7;overflow:hidden}
  .progress > div{height:100%;width:0%;background:linear-gradient(90deg,var(--teal),var(--blue));transition:.35s}
  @media(min-width:981px){
    .hero-main,.hero-aside{height:320px;min-height:320px}
  }

  .layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:22px;margin-top:22px}
  .side{
    position:sticky;top:94px;align-self:start;background:white;border:1px solid var(--line);
    border-radius:24px;padding:14px;box-shadow:0 12px 32px rgba(25,33,101,.06)
  }
  .side-title{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:800;padding:8px 10px}
  .nav-item{
    display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:14px;font-size:14px;font-weight:700;color:#50577c;
    transition:.2s;
  }
  .nav-item:hover{background:var(--soft-blue);color:var(--navy)}
  .nav-dot{width:9px;height:9px;border-radius:50%;background:#d7dbea;flex:0 0 auto}
  .nav-item.done .nav-dot{background:var(--teal)}
  .content{display:flex;flex-direction:column;gap:20px}
  .section{
    background:white;border:1px solid var(--line);border-radius:28px;padding:30px;box-shadow:0 10px 34px rgba(25,33,101,.055);
    scroll-margin-top:110px;
  }
  .section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:22px}
  .section-kicker{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:900;color:var(--teal)}
  .section h2{margin:6px 0 5px;font-size:28px;color:var(--navy)}
  .section-desc{color:var(--muted);font-size:14px;line-height:1.7}
  .step{width:44px;height:44px;border-radius:15px;background:var(--soft-blue);display:flex;align-items:center;justify-content:center;color:var(--blue);font-weight:900}

  .food-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
  .food-card{
    border:1px solid var(--line);background:white;border-radius:20px;padding:20px 10px;text-align:center;transition:.2s;
  }
  .food-card:hover,.food-card.selected{transform:translateY(-2px);border-color:rgba(24,191,160,.65);box-shadow:0 10px 24px rgba(24,191,160,.12);background:var(--soft-teal)}
  .emoji{font-size:38px}
  .food-name{font-weight:800;margin-top:9px}
  .reply-box{margin-top:16px;padding:18px 20px;border-radius:18px;background:linear-gradient(90deg,var(--soft-teal),var(--soft-blue));font-size:22px;font-weight:900;color:var(--navy);display:none}

  .vocab-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
  .vocab-card{
    border:1px solid var(--line);border-radius:20px;padding:18px;position:relative;background:#fff;
  }
  .vocab-card:hover{border-color:#cad2f4}
  .vocab-cn{font-size:26px;font-weight:900;color:var(--navy)}
  .vocab-py{font-size:14px;color:var(--blue);margin-top:4px;font-weight:700}
  .vocab-en{font-size:13px;color:var(--muted);margin-top:4px}
  .sound-btn{
    position:absolute;right:12px;top:12px;border:0;width:34px;height:34px;border-radius:50%;
    background:var(--soft-teal);color:var(--teal);font-weight:900;
  }

  .reader-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
  .toggle{
    border:1px solid var(--line);background:white;border-radius:999px;padding:9px 13px;font-weight:800;font-size:13px;color:#596080;
  }
  .toggle.active{background:var(--navy);border-color:var(--navy);color:white}
  .reading-card{background:#fcfdff;border:1px solid var(--line);border-radius:22px;padding:26px}
  .reading-title{font-size:25px;font-weight:900;color:var(--navy);margin-bottom:16px}
  .reading-cn{font-size:21px;letter-spacing:.02em}
  .annotated-reading{display:flex;flex-direction:column;gap:12px}
  .annotated-line{display:flex;flex-wrap:wrap;align-items:flex-start;gap:5px 2px;min-height:36px}
  .word-token{
    display:inline-flex;flex-direction:column;align-items:center;justify-content:flex-start;
    padding:2px 3px 3px;border-radius:9px;min-width:1.15em;vertical-align:top;
    transition:.15s;cursor:pointer;user-select:none;
  }
  .word-token:hover{background:var(--soft-teal)}
  .word-token.peek{background:linear-gradient(180deg,var(--soft-teal),var(--soft-blue));box-shadow:0 0 0 1px rgba(24,191,160,.18)}
  .word-py,.word-en{display:none;white-space:nowrap;text-align:center}
  .word-py{font-size:11px;line-height:1.25;color:var(--blue);font-weight:800;margin-bottom:3px}
  .word-cn{font-size:21px;line-height:1.32;color:var(--ink)}
  .word-en{font-size:10px;line-height:1.25;color:var(--muted);margin-top:4px;max-width:86px}
  .reading-card.show-pinyin .word-py,
  .word-token.peek .word-py{display:block}
  .word-token.peek .word-en{display:block}
  .reading-card.show-pinyin .annotated-line{row-gap:9px}
  .punct-token{display:inline-flex;align-items:center;font-size:21px;line-height:1.32;padding:2px 0 3px;color:var(--ink)}


  .version-toolbar{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    margin-bottom:10px;flex-wrap:wrap;
  }
  .font-controls{display:flex;align-items:center;gap:6px}
  .font-label{font-size:11px;color:var(--muted);font-weight:800;margin-right:3px}
  .font-btn{
    min-width:34px;height:30px;border:1px solid #dfe4f3;border-radius:10px;background:#fff;
    color:var(--navy);font-weight:900;display:inline-flex;align-items:center;justify-content:center;
    box-shadow:0 3px 8px rgba(25,33,101,.04);
  }
  .font-btn:hover{background:var(--soft-blue);border-color:#cbd5f6}

  .full-version{
    display:none;margin-top:16px;padding:18px 20px;border-radius:18px;border:1px solid var(--line);
    background:#fbfcff;line-height:1.9;color:#53617b;
  }
  .full-version.visible{display:block}
  .full-version-title{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:900;color:var(--teal);margin-bottom:9px}
  .full-pinyin-text{font-size:15px;color:var(--blue);line-height:2}
  .full-english-text{font-size:15px;color:#596080;line-height:1.85}
  .grammar-cn{font-size:22px;font-weight:800;color:var(--navy);line-height:1.45}
  .grammar-py{font-size:14px;color:var(--blue);font-weight:700;margin-top:5px;line-height:1.45}
  .grammar-tr{font-size:14px;color:var(--muted);margin-top:4px;line-height:1.5}
  .grammar-en{
    margin:12px 0 4px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.72);
    color:#53617b;font-size:13px;line-height:1.65;border:1px solid rgba(210,218,240,.8)
  }
  .grammar-en strong{color:var(--navy)}
  .mini-choice{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
  .mini-choice button{border:1px solid var(--line);border-radius:12px;background:white;padding:9px 12px;font-weight:800}
  .mini-choice button.good{background:#eaf9f5;border-color:#a7e7d7;color:var(--success)}
  .mini-result{margin-top:10px;font-size:13px;font-weight:800;min-height:20px}


  .listening-q-head{
    display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:13px;
  }
  .q-number{
    min-width:26px;color:var(--navy);font-size:18px;font-weight:900;
    display:inline-flex;align-items:center;justify-content:flex-start;
  }
  .question-audio-btn{
    width:40px;height:40px;border-radius:50%;
    font-size:16px;font-weight:900;display:flex;align-items:center;justify-content:center;
  }
  .reveal-q-btn{
    border:1px solid #dfe4f3;background:#fff;color:var(--navy);
    border-radius:999px;padding:9px 13px;font-size:12px;font-weight:900;
    transition:.16s;
  }
  .reveal-q-btn:hover{background:var(--soft-teal);border-color:#bcebdd}
  .hidden-question-text{
    display:none;font-size:17px;font-weight:900;color:var(--navy);
    padding:8px 12px;border-radius:12px;background:#fbfcff;border:1px solid var(--line);
  }
  .hidden-question-text.visible{display:inline-block}

  .question{border:1px solid var(--line);border-radius:20px;padding:20px;margin-bottom:14px}
  .q-title{font-size:17px;font-weight:900;margin-bottom:13px;color:var(--navy)}
  .options{display:grid;gap:9px}
  .option{
    display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:14px;padding:12px 14px;
    background:white;transition:.18s;
  }
  .option:hover{background:var(--soft-blue)}
  .option input{accent-color:var(--blue)}
  .feedback{margin-top:10px;font-size:13px;font-weight:800;min-height:18px}
  .feedback.ok{color:var(--success)} .feedback.no{color:var(--danger)} .feedback.warn{color:var(--warning)}
  .feedback.correct{color:var(--success)!important} .feedback.wrong{color:var(--danger)!important}
  .check-btn,.cta-btn{
    border:0;border-radius:14px;padding:12px 18px;font-weight:900;background:var(--navy);color:white;
  }
  .check-btn.secondary{background:var(--blue)}


  .speed-control{
    display:inline-flex;align-items:center;gap:5px;padding:4px 6px;border-radius:999px;
    background:#fff;border:1px solid var(--line);
  }
  .speed-label{font-size:11px;font-weight:900;color:var(--muted);padding-left:4px}
  .speed-btn{
    border:0;background:transparent;color:#636b90;font-size:11px;font-weight:900;
    padding:6px 8px;border-radius:999px;
  }
  .speed-btn:hover{background:var(--soft-blue);color:var(--navy)}
  .speed-btn.active{
    background:linear-gradient(135deg,var(--teal),var(--blue));color:#fff;
  }
  .sentence-row{
    display:grid;grid-template-columns:34px minmax(0,1fr);gap:9px;align-items:flex-start;
    margin-bottom:10px;
  }
  .sentence-row:last-child{margin-bottom:0}
  .sentence-audio-btn{
    width:32px;height:32px;border:0;border-radius:50%;
    background:linear-gradient(135deg,var(--teal),var(--blue));color:#fff;
    box-shadow:0 5px 12px rgba(38,96,229,.17);
    display:flex;align-items:center;justify-content:center;font-size:12px;
    margin-top:2px;transition:.16s;
  }
  .sentence-audio-btn:hover{
    transform:translateY(-1px);box-shadow:0 8px 16px rgba(38,96,229,.23)
  }
  .sentence-content{min-width:0}


  .reading2-row{
    padding:8px 0;border-bottom:1px solid #edf0f7;
    margin-bottom:0;
  }
  .reading2-row:last-child{border-bottom:0}
  .reading2-row p{margin:0;font-size:20px;line-height:1.7}
  .speaker{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:30px;padding:3px 7px;border-radius:999px;
    font-size:12px;font-weight:900;margin-right:6px;
  }
  .speaker.female{background:#fff0f6;color:#cf4776}
  .speaker.male{background:#eef5ff;color:#2d67c7}

  .reading-two-card{background:linear-gradient(180deg,#ffffff,#f8fbff)}
  .reading-two-text p{margin:0 0 9px;font-size:20px;line-height:1.75}
  .reading-two-text p:last-child{margin-bottom:0}

  .listen-box{
    display:flex;align-items:center;justify-content:space-between;gap:18px;background:linear-gradient(135deg,#f0f4ff,#eefbf8);
    border:1px solid #dfe6fa;border-radius:24px;padding:24px;
  }
  .listen-copy h3{margin:0 0 6px;font-size:22px;color:var(--navy)}
  .listen-copy p{margin:0;color:var(--muted)}
  .play-big{
    width:62px;height:62px;border-radius:50%;border:0;background:var(--blue);color:white;font-size:25px;box-shadow:0 10px 24px rgba(38,96,229,.23)
  }
  .transcript{display:none;margin-top:14px;border-radius:18px;padding:18px;background:#fbfcff;border:1px solid var(--line);line-height:1.9}
  .transcript.visible{display:block}
  .unlock-note{font-size:13px;color:var(--muted);margin-top:10px}

  .speak-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .speak-card{border-radius:22px;padding:22px;color:white;background:linear-gradient(135deg,var(--navy),var(--blue))}
  .speak-card.teal{background:linear-gradient(135deg,#0f907a,var(--teal))}
  .speak-q{font-size:22px;font-weight:900;line-height:1.45}
  .stem{margin-top:12px;padding:11px 13px;border-radius:14px;background:rgba(255,255,255,.13);font-size:17px;font-weight:800}
  .speak-options{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:16px}
  .speak-option{
    position:relative;border:1px solid rgba(255,255,255,.28);border-radius:15px;background:rgba(255,255,255,.11);
    padding:14px 10px 14px;color:white;text-align:center;min-height:92px;transition:.18s;
  }
  .speak-option:hover,.speak-option.open{background:rgba(255,255,255,.2);transform:translateY(-1px)}
  .speak-emoji{font-size:28px;line-height:1}
  .speak-cn{font-size:15px;font-weight:900;margin-top:7px}
  .speak-detail{display:none;font-size:10px;line-height:1.35;margin-top:5px;color:rgba(255,255,255,.9)}
  .speak-option.open .speak-detail{display:block}
  .speak-sound{
    position:absolute;right:7px;top:7px;width:30px;height:30px;border-radius:50%;
    font-size:13px;display:flex;align-items:center;justify-content:center;
  }
  .speak-tip{margin-top:10px;font-size:11px;color:rgba(255,255,255,.78)}

  .game-board{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
  .chip{
    border:1px solid #dbe0ed;border-radius:999px;background:white;padding:10px 14px;font-weight:900;user-select:none;
    box-shadow:0 4px 12px rgba(25,33,101,.05)
  }
  .chip.selected{outline:3px solid rgba(38,96,229,.16);border-color:var(--blue)}
  .dropzone{min-height:150px;border:2px dashed #ccd3e8;border-radius:22px;padding:18px;background:#fafbfe}
  .dropzone.active{border-color:var(--teal);background:var(--soft-teal)}
  .drop-title{font-size:20px;font-weight:900;color:var(--navy);margin-bottom:12px}
  .drop-items{display:flex;flex-wrap:wrap;gap:8px}
  .game-hint{font-size:13px;color:var(--muted);margin-bottom:14px}

  .complete{
    text-align:center;padding:42px 30px;background:linear-gradient(135deg,var(--navy),#222b83 50%,var(--teal));color:white
  }
  .complete h2{color:white;font-size:34px}
  .complete .section-desc{color:rgba(255,255,255,.82)}
  .learned{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:22px 0}
  .learned span{padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.12);font-size:14px;font-weight:800}
  .complete .cta-btn{background:white;color:var(--navy)}


  .sound-btn,.speak-sound,.question-audio-btn{
    border:0 !important;
    background:linear-gradient(135deg,var(--teal),var(--blue)) !important;
    color:#fff !important;
    box-shadow:0 6px 14px rgba(38,96,229,.18) !important;
    transition:transform .16s ease, box-shadow .16s ease, opacity .16s ease;
  }
  .sound-btn:hover,.speak-sound:hover,.question-audio-btn:hover{
    transform:translateY(-1px);
    box-shadow:0 9px 18px rgba(38,96,229,.24) !important;
  }
@media print{
    body{background:#fff!important}
    .topbar,.side,.reader-toolbar,.font-controls,.sound-btn,.speak-sound,
    .question-audio-btn,.reveal-q-btn,.check-btn,.cta-btn,.play-big,
    .toast,.unlock-note{display:none!important}
    .app-shell{max-width:none;padding:0}
    .layout{display:block}
    .section{box-shadow:none;break-inside:avoid}
  }


  .question-audio-btn,.sound-btn,.speak-sound{
    background:linear-gradient(135deg,var(--teal),var(--blue))!important;
    color:white!important;border:0!important;
    box-shadow:0 6px 14px rgba(38,96,229,.18)!important;
  }
  .question-audio-btn:hover,.sound-btn:hover,.speak-sound:hover{
    transform:translateY(-1px);box-shadow:0 9px 18px rgba(38,96,229,.24)!important;
  }

  .toast{
    position:fixed;right:20px;bottom:20px;z-index:60;padding:13px 16px;border-radius:14px;background:var(--navy);color:white;
    box-shadow:0 12px 30px rgba(25,33,101,.25);opacity:0;transform:translateY(12px);pointer-events:none;transition:.22s;font-weight:800
  }
  .toast.show{opacity:1;transform:none}

  @media(max-width:980px){
    .hero{grid-template-columns:1fr}
    .layout{grid-template-columns:1fr}
    .side{position:relative;top:auto;display:flex;overflow:auto;white-space:nowrap}
    .side-title{display:none}
    .nav-item{flex:0 0 auto}
    .food-grid{grid-template-columns:repeat(3,1fr)}
    .vocab-grid{grid-template-columns:repeat(2,1fr)}
  }
  @media(max-width:640px){
    .app-shell{padding:12px}
    .topbar{top:8px}
    .brand-sub{display:none}
    .top-actions .pill:not(.primary){display:none}
    .top-actions .pill.scoring-mode-toggle-v1{display:inline-flex!important}
    .hero-main,.hero-aside,.section{border-radius:22px}
    .hero{grid-template-columns:1fr}
    .hero-main{padding:20px;min-height:250px}
    .hero-copy{width:100%}
    .hero-decor{position:relative;right:auto;top:auto;bottom:auto;width:100%;margin-top:18px}
    .hero-card{max-width:none}
    .hero-aside{padding:18px}
    h1{font-size:42px}
    .section{padding:22px}
    .food-grid{grid-template-columns:repeat(2,1fr)}
    .vocab-grid{grid-template-columns:1fr 1fr}
    .focus-grid,.speak-grid,.game-board{grid-template-columns:1fr}
    .speak-options{grid-template-columns:repeat(3,1fr)}
    .reading-cn{font-size:19px}
    .listen-box{align-items:flex-start}
  }


/* ===== OVERVIEW + PROGRESS FIX ===== */
.hero-aside .overview-goals{
  display:flex !important;
  flex-direction:column !important;
  gap:5px !important;
  font-size:14px !important;
  line-height:1.45 !important;
}
.hero-aside .goal-row{
  display:flex !important;
  align-items:center !important;
  gap:18px !important;
  flex-wrap:nowrap !important;
}
.hero-aside .goal-row-two span{
  white-space:nowrap !important;
}
.hero-aside .progress-wrap{
  display:block !important;
  width:100% !important;
  margin-top:9px !important;
  flex:0 0 auto !important;
}
.hero-aside .progress-head{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  width:100% !important;
  color:#69718f !important;
  font-size:12px !important;
  font-weight:800 !important;
}
.hero-aside .progress{
  display:block !important;
  width:100% !important;
  height:8px !important;
  background:#e9edf7 !important;
  border-radius:999px !important;
  overflow:hidden !important;
}
.hero-aside #progressBar{
  display:block !important;
  height:100% !important;
  width:0%;
  min-width:0;
  border-radius:999px !important;
  background:linear-gradient(90deg,var(--teal),var(--blue)) !important;
  transition:width .3s ease !important;
}
.hero-aside #progressText{
  display:inline-block !important;
  min-width:42px !important;
  text-align:right !important;
  color:var(--navy) !important;
}
@media(max-width:1250px){
  .hero-aside .goal-row{
    gap:10px !important;
  }
  .hero-aside .overview-goals{
    font-size:13px !important;
  }
}

/* ===== FINAL HERO LAYOUT FIX ===== */
.hero{
  display:grid !important;
  grid-template-columns:minmax(0,1.32fr) minmax(360px,.68fr) !important;
  gap:22px !important;
  align-items:stretch !important;
}
.hero-main,
.hero-aside{
  height:320px !important;
  min-height:320px !important;
}
.hero-main{
  padding:30px 34px !important;
  border-radius:28px !important;
  display:flex !important;
  align-items:center !important;
}
.hero-main .hero-copy{
  width:100% !important;
  max-width:760px !important;
}
.hero-main h1{
  font-size:clamp(48px,4.8vw,68px) !important;
  line-height:1.02 !important;
  margin:14px 0 8px !important;
}
.hero-main .hero-en{
  font-size:19px !important;
  margin-bottom:18px !important;
}
.hero-main .hero-tags{
  gap:9px !important;
}
.hero-main .hero-tag{
  font-size:12px !important;
  padding:8px 12px !important;
}

.hero-aside{
  padding:20px 24px 18px !important;
  border-radius:28px !important;
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:space-between !important;
}
.hero-aside .section-kicker{
  font-size:12px !important;
  letter-spacing:.15em !important;
}
.hero-aside h3{
  font-size:24px !important;
  line-height:1.15 !important;
  margin:4px 0 8px !important;
}
.hero-aside .overview-list{
  font-size:15px !important;
  line-height:1.65 !important;
  margin:0 !important;
}
.hero-aside .overview-stats{
  margin-top:12px !important;
}
.hero-aside .lesson-meta{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:10px !important;
  margin:0 !important;
}
.hero-aside .meta-card{
  min-height:66px !important;
  padding:10px 13px !important;
  border-radius:16px !important;
}
.hero-aside .meta-num{
  font-size:24px !important;
}
.hero-aside .meta-label{
  font-size:11px !important;
  margin-top:5px !important;
}
.hero-aside .progress-wrap{
  margin-top:10px !important;
}
.hero-aside .progress-head{
  font-size:12px !important;
  margin-bottom:5px !important;
}
.hero-aside .progress{
  height:7px !important;
}

@media(max-width:980px){
  .hero{
    grid-template-columns:1fr !important;
  }
  .hero-main,.hero-aside{
    height:auto !important;
    min-height:0 !important;
  }
  .hero-main{
    min-height:280px !important;
  }
}

/* ===== V20 OVERVIEW FIT FIX ===== */
@media(min-width:981px){
  .hero-main,.hero-aside{
    height:320px !important;
    min-height:320px !important;
  }
}
.hero-aside{
  padding:16px 20px 14px !important;
  overflow:hidden !important;
}
.hero-aside h3{
  font-size:22px !important;
  margin:2px 0 6px !important;
}
.hero-aside .overview-goals{
  gap:3px !important;
  font-size:13.5px !important;
  line-height:1.35 !important;
}
.hero-aside .overview-stats{
  margin-top:6px !important;
}
.hero-aside .lesson-meta{
  gap:7px !important;
}
.hero-aside .meta-card{
  min-height:52px !important;
  height:52px !important;
  padding:7px 11px !important;
  border-radius:14px !important;
}
.hero-aside .meta-num{
  font-size:20px !important;
  line-height:1 !important;
}
.hero-aside .meta-label{
  font-size:10px !important;
  margin-top:4px !important;
}
.hero-aside .progress-wrap{
  margin-top:7px !important;
  padding-bottom:1px !important;
}
.hero-aside .progress-head{
  font-size:11.5px !important;
  margin-bottom:4px !important;
}
.hero-aside .progress{
  height:8px !important;
  min-height:8px !important;
  background:#e7ebf5 !important;
  box-shadow:inset 0 0 0 1px rgba(25,33,101,.035) !important;
}
.hero-aside #progressBar{
  height:8px !important;
  min-height:8px !important;
  background:linear-gradient(90deg,var(--teal),var(--blue)) !important;
}


/* ===== GAME PINYIN ===== */
.game-toolbar{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
}
.chip{
  display:inline-flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:2px !important;
  min-height:42px;
}
.chip-cn{
  font-size:14px;
  font-weight:900;
  line-height:1.2;
}
.chip-py{
  display:none;
  font-size:10px;
  line-height:1.2;
  color:var(--blue);
  font-weight:800;
}
#game.show-game-pinyin .chip-py{
  display:block;
}
.dropzone .chip-py{
  color:var(--blue);
}


/* ===== V21 OVERVIEW HARMONY FIX ===== */
.hero-aside{
  padding:18px 22px 16px !important;
  justify-content:flex-start !important;
  gap:7px !important;
}
.hero-aside .section-kicker{
  font-size:12px !important;
  margin-bottom:0 !important;
}
.hero-aside h3{
  font-size:24px !important;
  line-height:1.12 !important;
  margin:2px 0 5px !important;
}
.hero-aside .overview-goals{
  font-size:16px !important;
  line-height:1.42 !important;
  gap:4px !important;
  margin:0 !important;
}
.hero-aside .goal-row{
  gap:20px !important;
  margin:0 !important;
}
.hero-aside .goal-row span{
  white-space:nowrap !important;
}
.hero-aside .overview-stats{
  margin-top:5px !important;
}
.hero-aside .lesson-meta{
  gap:8px !important;
}
.hero-aside .meta-card{
  height:56px !important;
  min-height:56px !important;
  padding:8px 12px !important;
}
.hero-aside .meta-num{
  font-size:22px !important;
}
.hero-aside .meta-label{
  font-size:10.5px !important;
  margin-top:4px !important;
}
.hero-aside .progress-wrap{
  margin-top:5px !important;
  padding-bottom:0 !important;
}
.hero-aside .progress-head{
  font-size:11.5px !important;
  margin-bottom:4px !important;
}
@media(min-width:981px){
  .hero-main,.hero-aside{
    height:306px !important;
    min-height:306px !important;
  }
}
@media(max-width:1250px) and (min-width:981px){
  .hero-aside .overview-goals{
    font-size:15px !important;
  }
  .hero-aside .goal-row{
    gap:13px !important;
  }
}


/* ===== GAME RETURN / DRAG BACK ===== */
#gameChips{
  min-height:58px;
  padding:10px;
  border:1.5px dashed #d7ddec;
  border-radius:18px;
  background:#fbfcff;
  transition:.16s;
}
#gameChips.pool-active{
  border-color:var(--teal);
  background:var(--soft-teal);
}
.dropzone .chip{
  cursor:pointer;
}


/* ===== NAV NUMBERING ===== */
.side .nav-item{
  letter-spacing:0;
}
.side .nav-item::first-letter{
  color:var(--blue);
}


/* ===== Grammar example audio ===== */
.grammar-cn-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.grammar-audio-btn{
  flex:0 0 34px;
  width:34px;
  height:34px;
  border:0;
  border-radius:50%;
  background:linear-gradient(135deg,var(--teal),var(--blue));
  color:#fff;
  cursor:pointer;
  font-size:13px;
  box-shadow:0 5px 12px rgba(38,96,229,.16);
  transition:.16s ease;
}
.grammar-audio-btn:hover{
  transform:translateY(-1px);
}


/* ===== Brand name under original logo ===== */
.logo-stack{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.logo-brand-name{font-size:10px;line-height:1.15;font-weight:800;letter-spacing:.02em;color:var(--navy);white-space:nowrap;text-align:center}

/* ===== Larger speaking cards + answer pinyin ===== */
.speak-answer-pinyin{display:none;margin-top:6px;color:#dce8ff;font-size:14px;font-weight:700;text-align:left;line-height:1.45}
.speak-answer-row.answer-pinyin-visible .speak-answer-pinyin{display:block}
.speak-answer-actions{display:none;align-items:center;gap:8px;flex-wrap:nowrap}
.speak-answer-row.has-answer .speak-answer-actions{display:flex}
.answer-pinyin-btn{
  border:1px solid rgba(255,255,255,.36);border-radius:999px;background:rgba(255,255,255,.12);color:#fff;
  padding:7px 11px;font-size:11px;font-weight:900;cursor:pointer;white-space:nowrap;transition:.16s;
}
.answer-pinyin-btn:hover,.answer-pinyin-btn.active{background:rgba(255,255,255,.22)}
#speakFoodOptions,#speakDrinkOptions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:16px}
#speakFoodOptions .speak-option,#speakDrinkOptions .speak-option{min-height:176px;padding:22px 12px 16px;border-radius:20px}
#speakFoodOptions .speak-emoji,#speakDrinkOptions .speak-emoji{font-size:42px;line-height:1;margin-bottom:10px}
#speakFoodOptions .speak-cn,#speakDrinkOptions .speak-cn{font-size:21px;line-height:1.25;margin-bottom:6px}
#speakFoodOptions .speak-detail,#speakDrinkOptions .speak-detail{font-size:12.5px;line-height:1.5}
@media(max-width:900px){#speakFoodOptions,#speakDrinkOptions{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ===== Four-column matching review ===== */
.match-instruction{padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#fbfcff;color:#616a88;font-size:13px;line-height:1.65;margin-bottom:16px}
.match-board{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:42px;padding:18px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(180deg,#fff,#fbfcff);overflow:hidden}
.match-svg{position:absolute;inset:0;z-index:1;pointer-events:none}
.match-col{position:relative;z-index:2;display:flex;flex-direction:column;gap:13px}
.match-col-title{text-align:center;font-size:12px;font-weight:900;color:var(--muted);letter-spacing:.04em;margin-bottom:2px}
.match-item{min-height:54px;border:1.5px solid #dfe4f1;border-radius:14px;background:#fff;color:var(--navy);font-size:15px;font-weight:900;padding:9px 10px;cursor:pointer;box-shadow:0 4px 12px rgba(25,33,101,.045);transition:.16s}
.match-item:hover{transform:translateY(-1px);border-color:#b8c5ee}
.match-item.selected{border-color:var(--blue);box-shadow:0 0 0 3px rgba(38,96,229,.12);background:var(--soft-blue)}
.match-item.connected{border-color:#a9e6d8;background:#f2fcf9}
.match-item.wrong{border-color:#e79b9b;background:#fff3f3;animation:matchShake .22s linear 0s 2}
.emoji-item{font-size:28px}.pinyin-item{color:var(--blue)}
.match-actions{display:flex;justify-content:flex-end;margin-top:14px}
@keyframes matchShake{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
@media(max-width:860px){.match-board{gap:12px;padding:12px}.match-item{font-size:12px;min-height:50px;padding:8px 5px}.emoji-item{font-size:22px}}
@media(max-width:620px){.match-board{overflow-x:auto;grid-template-columns:repeat(4,145px);justify-content:start}}


/* ===== Lesson aligned to approved unified template ===== */
.sound-btn,.grammar-audio-btn,.sentence-audio-btn,.question-audio-btn,.warm-word-audio,.warm-question-audio,.warm-sentence-audio,.speak-answer-audio{
  background:var(--soft-teal)!important;color:#54cdb3!important;border:1px solid #cfeee6!important;
  box-shadow:none!important;font-weight:900!important;
}
.sound-btn:hover,.grammar-audio-btn:hover,.sentence-audio-btn:hover,.question-audio-btn:hover,.warm-word-audio:hover,.warm-question-audio:hover,.warm-sentence-audio:hover,.speak-answer-audio:hover{
  background:#e2f8f2!important;color:var(--teal)!important;box-shadow:0 4px 10px rgba(24,191,160,.10)!important;
}
.dialogue-audio.voice-male{background:var(--soft-blue)!important;color:var(--blue)!important;border-color:#cfdbf6!important}
.dialogue-audio.voice-male:hover{background:#e7efff!important;color:#1f55ce!important}
.dialogue-audio.voice-female{background:var(--soft-teal)!important;color:#18a98d!important;border-color:#cfeee6!important}
.dialogue-audio.voice-female:hover{background:#e2f8f2!important;color:var(--teal)!important}
.warm-question{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px;font-size:21px;font-weight:900;color:var(--navy)}
.warm-question-py{font-size:13px;color:var(--blue);font-weight:800;width:100%}
.warm-question-audio,.warm-word-audio,.warm-sentence-audio,.speak-answer-audio{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;cursor:pointer;flex:0 0 34px}
.food-card{position:relative;cursor:pointer}
.warm-word-audio{position:absolute;right:8px;top:8px;z-index:3;font-size:12px}
.reply-box.unified-reply{padding:15px 16px!important;align-items:center;grid-template-columns:minmax(0,1fr) auto;gap:12px}
.reply-main-text{font-size:21px;font-weight:900;color:var(--navy)}
.reply-main-py{font-size:13px;color:var(--blue);font-weight:800;margin-top:4px}
.reading-scene-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(240px,.75fr);gap:22px;align-items:start}
.scene-art-card{border:1px solid #dfe6f4;border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 12px 28px rgba(25,33,101,.08);position:sticky;top:92px}
.scene-art-card svg{width:100%;height:auto;display:block}
.speak-toolbar{display:flex;justify-content:flex-end;margin-bottom:10px}
.pinyin-mini-btn{border:1px solid #d7ddec;border-radius:999px;background:#fff;color:var(--navy);padding:8px 13px;font-size:12px;font-weight:900;cursor:pointer}
.pinyin-mini-btn.active{background:var(--soft-teal);border-color:#cfeee6;color:var(--teal)}
.speak-option-py{display:none;font-size:11px;line-height:1.35;margin-top:4px;color:rgba(255,255,255,.9);font-weight:800}
#speak.show-speaking-pinyin .speak-option-py{display:block}
.speak-answer-row{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px}
.speak-answer-copy{min-width:0}
.speak-answer-pinyin{font-size:12px;color:#dce8ff;font-weight:800;margin-top:4px}
.speak-answer-audio{display:none}
.speak-answer-row.has-answer .speak-answer-audio{display:inline-flex}
.speak-tip{font-size:11px;color:rgba(255,255,255,.82)}
#readingAudioBtn,#reading2AudioBtn{background:var(--soft-teal)!important;border-color:#cfeee6!important;color:var(--teal)!important}
@media(max-width:980px){.reading-scene-layout{grid-template-columns:1fr}.scene-art-card{position:relative;top:auto;max-width:440px;margin:4px auto 0}}



/* ===== Pinyin support across reading / practice / listening ===== */
.inline-pinyin-toolbar{display:flex;justify-content:flex-end;gap:8px;margin:0 0 14px;flex-wrap:wrap}
.support-py,.reading2-py,.option-py,.question-py{display:none}
#readingQuiz.show-support-pinyin .support-py,
#listening.show-reading2-pinyin .reading2-py,
#listeningQuiz.show-listening-pinyin .option-py,
#listeningQuiz.show-listening-pinyin .question-py{display:block}
.support-py{margin-top:5px;font-size:13px;line-height:1.45;color:var(--blue);font-weight:800}
.option-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.option-py{font-size:12px;line-height:1.35;color:var(--blue);font-weight:800}
.reading2-py{margin-top:3px;font-size:13px;line-height:1.5;color:var(--blue);font-weight:700}
.question-py{margin-top:4px;font-size:12px;line-height:1.4;color:var(--blue);font-weight:800}
.hidden-question-text .question-py{white-space:normal}

/* ===== Speaking word audio ===== */
.speak-word-audio{
  position:static;width:31px;height:31px;border:0;border-radius:50%;
  background:#eaf9f5;color:var(--teal);font-size:12px;font-weight:900;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(24,191,160,.14);
  margin-top:8px;
}
.speak-word-audio:hover{transform:translateY(-1px);background:#daf5ee}
.speak-emoji svg{width:42px;height:42px;display:block;margin:0 auto}


/* ===== Reading 1 teacher scene ===== */
.teacher-scene{
  position:relative;min-height:420px;background:linear-gradient(160deg,#f4f8ff 0%,#eefbf8 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;overflow:hidden;
}
.teacher-scene::before{
  content:"";position:absolute;width:190px;height:190px;border-radius:50%;
  background:rgba(38,96,229,.08);top:-58px;right:-50px;
}
.teacher-scene::after{
  content:"";position:absolute;width:130px;height:130px;border-radius:50%;
  background:rgba(24,191,160,.10);bottom:64px;left:-52px;
}
.teacher-scene-bubble{
  position:absolute;z-index:3;top:22px;left:20px;right:20px;background:#fff;border:1px solid #dfe6f4;
  border-radius:20px;padding:13px 16px;text-align:center;box-shadow:0 10px 24px rgba(25,33,101,.08);
}
.teacher-scene-bubble .cn{font-size:22px;line-height:1.2;font-weight:900;color:var(--navy)}
.teacher-scene-bubble .py{font-size:12px;line-height:1.4;color:var(--blue);font-weight:800;margin-top:4px}
.teacher-scene-foods{position:absolute;z-index:4;right:16px;bottom:18px;display:flex;gap:7px}
.teacher-scene-foods span{width:40px;height:40px;border-radius:13px;background:rgba(255,255,255,.94);border:1px solid #e3e7f1;display:flex;align-items:center;justify-content:center;font-size:23px;box-shadow:0 6px 16px rgba(25,33,101,.08)}
.teacher-scene img{
  position:relative;z-index:2;width:100%;height:350px;object-fit:cover;object-position:center 12%;display:block;
  mix-blend-mode:multiply;
}
@media(max-width:980px){.teacher-scene{min-height:390px}.teacher-scene img{height:325px}}


/* ===== Unified reading display controls ===== */
.reading-card-head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px;
}
.reading-card-head .reading-title{margin:0}
.reading1-cn{font-size:21px;line-height:1.55;color:var(--ink);font-weight:700}
/* 2.27 逐词对齐：汉字一列、拼音一列，拼音落在它自己那个词下面。
   英文名 token 的拼音是空的，列宽由正文里的名字撑开 —— 于是拼音层自动
   留出等宽空白，句号落在那块空白之后，而不是黏在前一个音节后面。
   **拼音收起时列宽塌回汉字本身的宽度**，所以不看拼音时中文之间没有空隙。 */
.reading1-rt{display:flex;flex-wrap:wrap;align-items:flex-start;font-size:21px;line-height:1.55;color:var(--ink);font-weight:700}
.reading1-rt .rt{display:inline-flex;flex-direction:column;align-items:center;min-width:0;overflow:visible}
/* 调号是组合字符（ɑ + U+0300…），容器一裁剪就会被削掉一截 */
.reading1-rt,.reading1-rt .rt,.reading1-rt .rt-c{overflow:visible}
.reading1-rt .rt-c{display:block;white-space:nowrap}
.reading1-rt .rt-p{display:none;font-size:12px;line-height:1.7;color:var(--blue);font-weight:700;white-space:nowrap;padding:3px 2px 2px;overflow:visible}
.reading1-rt .rt-p:empty::before{content:"\00a0"}
/* 2.35 · R-099：阅读练习顶上那份就地展开的课文副本。
   样式蹭课文那一套（.v7-speaker / .reading1-rt / .rt-p），只加自己的开合与间距，
   拼音由本块自己的 .show-rp-pinyin-v235 控制 —— 课文区那个开关挂在 #readingCard 上，
   这里是另一棵子树。 */
/* 2.36 · R-098：自由表达题。输入框 + 参考答案 + 两个记号。
   记号只是记号，不进计分（27-scoring.js 里 open 题不建单元）。 */
.expr-open-body-v36{display:grid;grid-template-columns:34px minmax(0,1fr);gap:9px;align-items:start;margin-top:10px}
.expr-open-copy-v36{min-width:0}
.expr-open-input-v36{width:100%;box-sizing:border-box;border:1px solid #d8dfef;border-radius:12px;padding:10px 12px;font:inherit;font-size:17px;line-height:1.6;color:var(--ink);background:#fff;resize:vertical}
.expr-open-input-v36:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(38,96,229,.10)}
.expr-open-model-v36{margin-top:10px;padding:11px 13px;border-radius:12px;background:var(--soft-teal,#effaf6);border:1px solid #ccefe5;display:block}
.expr-open-model-v36[hidden]{display:none}
.expr-open-model-v36 b{font-size:18px;line-height:1.6;display:block}
.expr-open-model-en-v36{display:block;margin-top:4px;font-size:13px;line-height:1.5;color:var(--muted)}
.expr-open-mark-v36{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.expr-open-mark-v36[hidden]{display:none}
.expr-marked-ok-v36 .expr-mark-ok-v36{border-color:#12957d;color:#12957d;background:var(--soft-teal,#effaf6)}
.expr-marked-no-v36 .expr-mark-no-v36{border-color:var(--danger,#c84545);color:var(--danger,#c84545);background:#fdf1f1}
@media(max-width:650px){.expr-open-body-v36{grid-template-columns:30px minmax(0,1fr);gap:7px}}
.rp-text-v235{margin:0 0 16px}
.rp-text-bar-v235{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.rp-text-body-v235{margin-top:10px;padding:12px 14px;border:1px solid #e3e9f6;border-radius:14px;background:var(--soft-blue,#f5f8ff);display:flex;flex-direction:column;gap:11px}
.rp-text-body-v235[hidden]{display:none}
.rp-text-line-v235{display:grid;grid-template-columns:34px minmax(0,1fr);gap:9px;align-items:start}
.rp-text-v235.show-rp-pinyin-v235 .reading1-rt{row-gap:6px}
.rp-text-v235.show-rp-pinyin-v235 .reading1-rt .rt-p{display:block}
@media(max-width:650px){.rp-text-line-v235{grid-template-columns:30px minmax(0,1fr);gap:7px}}
#readingCard.show-pinyin .reading1-rt{row-gap:6px}
#readingCard.show-pinyin .reading1-rt .rt-p{display:block}

#readingCard.hide-chinese .reading1-rt .rt-c{visibility:hidden}
@media(max-width:650px){.reading1-rt{font-size:19px}.reading1-rt .rt-p{font-size:11.5px}}
.reading1-py,.reading1-en,.reading2-en{display:none;margin-top:5px;font-size:13px;line-height:1.55;font-weight:600}
.reading1-py{color:var(--blue);font-weight:700}
.reading1-en,.reading2-en{color:#69718c}
#readingCard.show-pinyin .reading1-py{display:block}
#readingCard.show-english .reading1-en{display:block}
#reading2Card.show-english .reading2-en{display:block}
#readingCard.hide-chinese .reading1-cn{display:none}
#reading2Card.hide-chinese .reading2-row p{display:none}
#reading2Card.show-pinyin .reading2-py{display:block}
.reader-toolbar .toggle{white-space:nowrap}
@media(max-width:760px){
  .reading-card-head{align-items:flex-start}
  .reading-card-head .font-controls{margin-left:auto}
}



/* ===== Independent font size controls for each reading layer ===== */
.reading-font-controls{
  display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;
}
.reading-font-controls .font-group{
  display:none;align-items:center;gap:4px;padding:4px 6px;border:1px solid #e1e6f2;
  border-radius:999px;background:#fff;
}
.reading-font-controls .font-layer-label{
  min-width:24px;text-align:center;font-size:11px;font-weight:900;color:#626b89;
}
.reading-font-controls .font-btn{width:29px;height:29px;min-width:29px;padding:0;font-size:11px}
#readingCard:not(.hide-chinese) .font-group-chinese,
#reading2Card:not(.hide-chinese) .font-group-chinese{display:flex}
#readingCard.show-pinyin .font-group-pinyin,
#reading2Card.show-pinyin .font-group-pinyin{display:flex}
#readingCard.show-english .font-group-english,
#reading2Card.show-english .font-group-english{display:flex}
@media(max-width:760px){
  .reading-font-controls{width:100%;justify-content:flex-start}
}

/* ===== RESTORE ORIGINAL GRAMMAR CARD LAYOUT ===== */
.focus-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:16px;
  align-items:stretch;
}
.focus-card{
  border-radius:22px;
  padding:22px;
  background:var(--soft-blue);
  border:1px solid #dfe7ff;
}
.focus-card.teal{
  background:var(--soft-teal);
  border-color:#d4f4ec;
}
.focus-pattern{
  font-size:22px;
  font-weight:900;
  color:var(--navy);
  margin-bottom:12px;
}
.example{font-size:18px;line-height:1.8}
.grammar-examples{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin:4px 0 8px;
}
.grammar-line{
  padding:12px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.68);
  border:1px solid rgba(210,218,240,.75);
}
.grammar-cn{
  font-size:22px;
  font-weight:800;
  color:var(--navy);
  line-height:1.45;
}
.grammar-py{
  font-size:14px;
  color:var(--blue);
  font-weight:700;
  margin-top:5px;
  line-height:1.45;
}
.grammar-tr{
  font-size:14px;
  color:var(--muted);
  margin-top:4px;
  line-height:1.5;
}
.grammar-en{
  margin:12px 0 4px;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.72);
  color:#53617b;
  font-size:13px;
  line-height:1.65;
  border:1px solid rgba(210,218,240,.8);
}
.grammar-en strong{color:var(--navy)}
.grammar-cn-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.grammar-audio-btn{
  flex:0 0 34px;
  width:34px;
  height:34px;
  border:1px solid #c8eee5 !important;
  border-radius:50%;
  background:#edf9f6 !important;
  color:var(--teal) !important;
  cursor:pointer;
  font-size:13px;
  box-shadow:none !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:.16s ease;
}
.grammar-audio-btn:hover{
  transform:translateY(-1px);
  background:#def6f0 !important;
}
@media(max-width:900px){
  .focus-grid{grid-template-columns:1fr;}
}


/* ===== v26 speaking example: show complete exchange, not question only ===== */
#speakingPracticeV14 .speaking-model-dialogues-v26{gap:12px!important}
#speakingPracticeV14 .speaking-model-pair-v26{
  display:grid;gap:7px;padding:12px 14px;border:1px solid #e0e7f5;border-radius:16px;background:#fbfcff;
}
#speakingPracticeV14 .speaking-model-pair-v26 .speaking-model-line-v21{
  display:grid!important;grid-template-columns:32px minmax(0,1fr)!important;gap:10px;align-items:start;
}
#speakingPracticeV14 .speaking-example-speaker-v26{
  width:28px;height:28px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:950;line-height:1;margin-top:2px;
}
#speakingPracticeV14 .speaker-a-v26{background:#eaf0ff;color:#2660E5}
#speakingPracticeV14 .speaker-b-v26{background:#eaf8f4;color:#168a73}
#speakingPracticeV14 .speaking-answer-v26 p{font-weight:800!important}
#speakingPracticeV14 .water-glass-icon-v26{display:inline-flex!important;align-items:center;justify-content:center}
#speakingPracticeV14 .water-glass-icon-v26 svg{width:36px;height:36px;display:block}


/* ===== v27 premium mini illustrations + sentence audio ===== */
#speakingPracticeV14 .speak-item-v14{min-height:126px!important;padding:11px 8px 12px!important;}
#speakingPracticeV14 .food-art-v27{width:54px;height:54px;display:flex;align-items:center;justify-content:center;margin-bottom:2px;flex:0 0 54px;}
#speakingPracticeV14 .food-art-v27 svg{width:54px;height:54px;display:block;}
.v7-dialogue-line.v27-audio-line{grid-template-columns:34px 36px minmax(0,1fr)!important;gap:9px!important;align-items:start!important;}
.reading-line-audio-v27{width:32px;height:32px;border-radius:50%;border:0;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:13px;cursor:pointer;margin-top:1px;box-shadow:0 4px 10px rgba(30,62,150,.13);transition:transform .14s ease,box-shadow .14s ease;flex:0 0 32px;}
.reading-line-audio-v27:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(30,62,150,.18)}
.reading-line-audio-v27.voice-a{background:#2660E5;}
.reading-line-audio-v27.voice-b{background:#18BFA0;}
.reading-line-audio-v27.voice-c{background:#F5871F;}
.reading-line-audio-v27.playing{outline:3px solid rgba(38,96,229,.13);}
.reading-line-audio-v27.voice-b.playing{outline-color:rgba(24,191,160,.15);}
.reading-line-audio-v27.voice-c.playing{outline-color:rgba(245,135,31,.18);}
.v27-line-audio{display:none;}
@media(max-width:650px){.v7-dialogue-line.v27-audio-line{grid-template-columns:32px 34px minmax(0,1fr)!important;gap:7px!important}.reading-line-audio-v27{width:30px;height:30px;flex-basis:30px}.v7-speaker{width:28px;height:28px}}



/* 综合练习：线上课堂大字版 */
#game .review-task-head h3{font-size:20px!important;line-height:1.35!important;}
#game .match-col:nth-of-type(2) .match-item{font-size:24px!important;line-height:1.25!important;min-height:62px!important;}
#game .review-drag-word{font-size:22px!important;line-height:1.3!important;padding:11px 16px!important;}
#game .review-cloze-row{font-size:22px!important;line-height:1.75!important;padding:15px 16px!important;}
#game .review-drop{font-size:21px!important;min-width:104px!important;min-height:40px!important;}
#game .review-order-cn{font-size:22px!important;line-height:1.55!important;}
#game .review-order-item{min-height:64px!important;padding:13px 14px!important;}
#game .review-cloze-row .review-py,#game .review-order-py,#game .review-drag-word .review-py{font-size:15px!important;line-height:1.45!important;}
@media(max-width:860px){
  #game .match-col:nth-of-type(2) .match-item{font-size:21px!important;min-height:58px!important;}
  #game .review-drag-word,#game .review-cloze-row,#game .review-order-cn{font-size:20px!important;}
}


/* Reading + Listening practice: larger classroom-friendly type */
#readingQuiz .q-title{font-size:23px!important;line-height:1.5!important;margin-bottom:16px!important;}
#readingQuiz .option{font-size:22px!important;line-height:1.45!important;padding:15px 17px!important;min-height:58px!important;}
#readingQuiz .support-py{font-size:15px!important;line-height:1.5!important;margin-top:5px!important;}
#readingQuiz .feedback{font-size:15px!important;line-height:1.45!important;}

#listeningQuiz .q-number{font-size:21px!important;}
#listeningQuiz .hidden-question-text{font-size:22px!important;line-height:1.5!important;padding:10px 14px!important;}
#listeningQuiz .option{font-size:22px!important;line-height:1.45!important;padding:15px 17px!important;min-height:58px!important;}
#listeningQuiz .question-py,#listeningQuiz .option-py{font-size:15px!important;line-height:1.5!important;margin-top:5px!important;}
#listeningQuiz .feedback{font-size:15px!important;line-height:1.45!important;}
#listeningQuiz .reveal-q-btn{font-size:14px!important;padding:10px 15px!important;}

@media(max-width:640px){
  #readingQuiz .q-title,#listeningQuiz .hidden-question-text{font-size:20px!important;}
  #readingQuiz .option,#listeningQuiz .option{font-size:19px!important;}
  #readingQuiz .support-py,#listeningQuiz .question-py,#listeningQuiz .option-py{font-size:14px!important;}
}


/* ===== v27: balance readability + visual polish ===== */
/* Point-to-lookup words must stay inline inside ordinary sentences. */
.review-instruction .page-lookup-word,
.match-instruction .page-lookup-word,
#readingQuiz .option-copy .page-lookup-word,
#listeningQuiz .option-copy .page-lookup-word{
  display:inline!important;
  margin:0!important;
  font-size:inherit!important;
  line-height:inherit!important;
  color:inherit!important;
  vertical-align:baseline!important;
}

/* Keep Chinese answer text on one natural line; pinyin stays on the next line. */
#readingQuiz .option-copy,
#listeningQuiz .option-copy{
  display:block!important;
  min-width:0!important;
  flex:1 1 auto!important;
  line-height:1.45!important;
}
#readingQuiz .option-copy .support-py,
#listeningQuiz .option-copy .option-py{
  display:block;
  margin-top:5px!important;
}
#readingQuiz .option,
#listeningQuiz .option{
  align-items:center!important;
  gap:11px!important;
}

/* Review instructions: Chinese and English are each a clean line, never one word per line. */
#game .review-instruction{
  font-size:15px!important;
  line-height:1.65!important;
  color:#5f6986!important;
  margin-bottom:14px!important;
}
#game .review-instruction > span:not(.page-lookup-word){
  display:block!important;
  margin-top:3px!important;
  font-size:14px!important;
  line-height:1.55!important;
  color:#8790a4!important;
}
#game .match-instruction{
  font-size:14px!important;
  line-height:1.6!important;
  padding:11px 14px!important;
}

/* 4 × 4 matching board: all 16 cells share exactly the same box size. */
#game .match-board{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:24px!important;
  padding:18px!important;
  align-items:start!important;
}
#game .match-col{
  display:grid!important;
  grid-template-rows:28px repeat(4,64px)!important;
  gap:12px!important;
  min-width:0!important;
}
#game .match-col-title{
  height:28px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin:0!important;
  font-size:13px!important;
}
#game .match-item{
  box-sizing:border-box!important;
  width:100%!important;
  height:64px!important;
  min-height:64px!important;
  max-height:64px!important;
  padding:8px 10px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  font-size:17px!important;
  line-height:1.2!important;
}
#game .match-col:nth-of-type(2) .match-item{
  font-size:21px!important;
  min-height:64px!important;
}
#game .emoji-item{font-size:27px!important}
#game .pinyin-item{font-size:16px!important}

@media(max-width:980px){
  #game .match-board{gap:14px!important;padding:14px!important}
  #game .match-col{grid-template-rows:26px repeat(4,60px)!important;gap:10px!important}
  #game .match-item{height:60px!important;min-height:60px!important;max-height:60px!important;font-size:15px!important;padding:7px 6px!important}
  #game .match-col:nth-of-type(2) .match-item{font-size:19px!important;min-height:60px!important}
  #game .pinyin-item{font-size:14px!important}
  #game .emoji-item{font-size:24px!important}
}
@media(max-width:700px){
  #game .match-board{overflow-x:auto!important;grid-template-columns:repeat(4,138px)!important;justify-content:start!important}
  #game .review-instruction{font-size:14px!important}
  #game .review-instruction > span:not(.page-lookup-word){font-size:13px!important}
}


/* Confirmed Clear Talk Mandarin illustration style: modern minimal flat vector, round-headed characters. */
.scene-art-card{background:#fff!important;overflow:hidden!important}
.scene-art-card .reading-scene-img{display:block;width:100%;height:auto;object-fit:contain;background:#fff}
.scene-art-card .reading-scene-img-1{object-position:center}
.scene-art-card .reading-scene-img-2{object-position:center}


/* ===== Clear Talk Mandarin · standalone HSK graded reading final product layer ===== */
.hero-aside .overview-h3-en{display:block;margin-top:2px;font-size:12px;line-height:1.2;font-weight:800;color:#7b83a1}
.hero-aside .overview-goals{display:grid!important;grid-template-columns:1fr!important;gap:5px!important}
.hero-aside .goal-item{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:baseline;gap:10px;line-height:1.25}
.hero-aside .goal-cn{font-size:12.5px;font-weight:800;color:#515879}.hero-aside .goal-en{font-size:10.5px;color:#858da7}
.hero-aside .lesson-meta{grid-template-columns:repeat(3,minmax(0,1fr))!important}.hero-aside .meta-card{min-width:0;align-items:center!important;text-align:center}
.hero-aside .meta-label{display:flex;flex-direction:column;gap:1px;align-items:center}.hero-aside .meta-label span:last-child{font-size:9px;color:#9299ad}
.start-btn-en{font-size:.9em;font-weight:800}
.study-tip{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;align-items:center;margin:-2px 0 18px;padding:11px 14px;border:1px solid #dfe7f4;border-radius:15px;background:linear-gradient(90deg,#f3fbf8,#f5f8ff);color:#515879;font-size:12.5px;line-height:1.45}
.study-tip-label{grid-row:1 / span 2;align-self:center;white-space:nowrap;font-weight:900;color:var(--navy)}.study-tip-en{font-size:11px;color:#7b83a1}
.audio-browser-tip[hidden]{display:none!important}.audio-browser-tip{display:flex;align-items:flex-start;gap:9px;margin:0 0 14px;padding:10px 13px;border:1px solid #dfe6f4;border-radius:14px;background:#f7f9ff;color:#515879;font-size:12px;line-height:1.5}.audio-browser-tip .audio-tip-icon{font-size:15px;line-height:1.35;flex:0 0 auto}.audio-browser-tip strong{color:var(--navy)}.audio-browser-tip .audio-tip-en{display:block;color:#727b96;margin-top:2px}
.grammar-structure{margin:10px 0 14px;padding:11px 13px;border-radius:14px;background:rgba(255,255,255,.58);border:1px solid rgba(25,33,101,.08)}
.grammar-structure-cn{font-size:15px;font-weight:900;color:var(--navy)}.grammar-structure-en{font-size:13px;color:#707994;margin-top:3px}.grammar-structure-example{margin-top:7px;font-size:16px;font-weight:900;color:var(--blue);letter-spacing:.01em}
.instruction-en{font-size:.92em;color:#7b83a1}

/* Unified language switches */
.lang-switch-btn,.pinyin-switch-btn{display:inline-flex!important;align-items:center!important;gap:9px!important;border:0!important;background:transparent!important;padding:2px 0!important;color:var(--navy)!important;cursor:pointer!important;box-shadow:none!important;min-height:auto!important}
.lang-switch-btn .lang-switch-copy,.pinyin-switch-btn .pinyin-switch-copy{display:flex;flex-direction:column;align-items:flex-end;line-height:1.08;font-weight:900}
.lang-switch-btn .lang-switch-copy .cn,.pinyin-switch-btn .pinyin-switch-copy .cn{font-size:12px}.lang-switch-btn .lang-switch-copy .en,.pinyin-switch-btn .pinyin-switch-copy .en{font-size:10px;color:#7b83a1;margin-top:2px}
.lang-switch-btn .lang-switch-track,.pinyin-switch-btn .pinyin-switch-track{position:relative;width:44px;height:24px;border-radius:999px;background:#e5e9f2;box-shadow:inset 0 0 0 1px rgba(25,33,101,.06);transition:.18s ease;flex:0 0 auto}
.lang-switch-btn .lang-switch-knob,.pinyin-switch-btn .pinyin-switch-knob{position:absolute;width:18px;height:18px;border-radius:50%;left:3px;top:3px;background:#fff;box-shadow:0 2px 6px rgba(25,33,101,.18);transition:.18s ease}
.lang-switch-btn.active .lang-switch-track,.pinyin-switch-btn.active .pinyin-switch-track{background:linear-gradient(135deg,var(--teal),var(--blue))}.lang-switch-btn.active .lang-switch-knob,.pinyin-switch-btn.active .pinyin-switch-knob{transform:translateX(20px)}
.lang-switch-btn:focus-visible,.pinyin-switch-btn:focus-visible{outline:3px solid rgba(38,96,229,.16);outline-offset:3px;border-radius:10px}
.reader-toolbar .lang-switch-btn,.reader-toolbar .pinyin-switch-btn{margin-left:2px}

/* Reading practice: one Pinyin control per question */
#readingQuiz > .inline-pinyin-toolbar,#listeningQuiz > .inline-pinyin-toolbar{display:none!important}
#readingQuiz .question-headline{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:12px}
#readingQuiz .question-headline .q-title{flex:1 1 auto;min-width:0;margin-bottom:0!important;display:block!important;word-spacing:0!important;letter-spacing:normal!important}
#readingQuiz .q-title .page-lookup-word{display:inline!important;padding:0!important;margin:0!important}
#readingQuiz .question .support-py{display:none!important}
#readingQuiz .question.show-local-pinyin .q-title .support-py{display:inline-block!important;margin-left:14px!important;white-space:normal!important;color:var(--blue);font-size:15px!important;font-weight:800!important}
#readingQuiz .question.show-local-pinyin .option-copy .support-py{display:block!important;margin-top:3px;color:var(--blue);font-size:14px!important;font-weight:800!important}

/* Listening controls: audio/revealed text left, independent switches right */
#listeningQuiz .listening-q-head{display:block!important;margin-bottom:13px!important}
#listeningQuiz .listening-controls{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;width:100%;min-height:38px}
#listeningQuiz .listening-controls-left,#listeningQuiz .listening-controls-right{display:flex;align-items:center;gap:10px;min-width:0}
#listeningQuiz .listening-controls-left{flex:1 1 auto}#listeningQuiz .listening-controls-right{flex:0 0 auto;justify-content:flex-end;flex-wrap:wrap}
#listeningQuiz .listening-controls .q-number{flex:0 0 28px;min-width:28px;margin-right:1px}#listeningQuiz .listening-controls .question-audio-btn{flex:0 0 40px}
#listeningQuiz .listening-reveal-area{flex:1 1 auto;min-width:0;margin:0;padding:0}
#listeningQuiz .hidden-question-text{display:none!important}#listeningQuiz .hidden-question-text.visible{display:inline-flex!important;align-items:center;max-width:100%;padding:10px 16px!important}
#listeningQuiz .question .question-py,#listeningQuiz .question .option-py{display:none!important}#listeningQuiz .question.show-option-pinyin .option-py{display:block!important}
#listeningQuiz .local-question-pinyin-only{display:none!important;margin:0;padding:10px 16px;font-size:15px;line-height:1.5;color:var(--blue);font-weight:800;border:1px solid var(--line);border-radius:18px;background:#f8fbff}
#listeningQuiz .question.show-question-pinyin .local-question-pinyin-only{display:inline-flex!important;align-items:center;max-width:100%}

/* Speaking: one Pinyin switch per speaking task */
#speak .speak-toolbar{display:none!important}#speak .speak-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:12px}#speak .speak-card-head-copy{min-width:0;flex:1 1 auto}#speak .speak-card-head .speak-q{margin:0}
#speak .speak-q-py,#speak .speak-option-py,#speak .speak-answer-pinyin{display:none!important}#speak .speak-card.show-card-pinyin .speak-q-py,#speak .speak-card.show-card-pinyin .speak-option-py,#speak .speak-card.show-card-pinyin .speak-answer-row.has-answer .speak-answer-pinyin{display:block!important}
#speak .speak-answer-actions .answer-pinyin-btn{display:none!important}#speak .speaking-card-pinyin-switch{flex:0 0 auto}
#speak .speak-card .speaking-card-pinyin-switch{color:#fff!important}#speak .speak-card .speaking-card-pinyin-switch .pinyin-switch-copy .cn{color:#fff!important}#speak .speak-card .speaking-card-pinyin-switch .pinyin-switch-copy .en{color:rgba(255,255,255,.82)!important}#speak .speak-card .speaking-card-pinyin-switch .pinyin-switch-track{background:rgba(255,255,255,.28)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.42)!important}#speak .speak-card .speaking-card-pinyin-switch.active .pinyin-switch-track{background:linear-gradient(135deg,#53e0c5,#75a0ff)!important}

@media(max-width:1100px){.hero-aside .goal-item{grid-template-columns:1fr;gap:1px}}
@media(max-width:700px){.hero-aside .lesson-meta{grid-template-columns:repeat(3,minmax(0,1fr))!important}.study-tip{grid-template-columns:1fr}.study-tip-label{grid-row:auto}#listeningQuiz .listening-controls{flex-direction:column;align-items:stretch;gap:10px}#listeningQuiz .listening-controls-left,#listeningQuiz .listening-controls-right{width:100%;flex-wrap:wrap}#listeningQuiz .listening-controls-right{justify-content:flex-start}#speak .speak-card-head{gap:10px}}
@media(max-width:640px){.lang-switch-btn .lang-switch-copy,.pinyin-switch-btn .pinyin-switch-copy{display:none}}


/* Page-wide tap-to-lookup */
.page-lookup-word{cursor:pointer;border-radius:6px;padding:0!important;margin:0!important;transition:background .15s ease,box-shadow .15s ease}
.page-lookup-word:hover{background:#eaf9f5;box-shadow:0 0 0 1px rgba(24,191,160,.18)}
.page-lookup-word.active{background:linear-gradient(180deg,#eaf9f5,#eef4ff);box-shadow:0 0 0 1px rgba(38,96,229,.20)}



/* ===== ClearTalk HSK Graded Reading Skill v7 review overrides ===== */
.hero-aside .lesson-meta{grid-template-columns:repeat(3,1fr)!important}
.hero-aside .goal-item{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;align-items:center;gap:12px!important;margin:0!important}
.hero-aside .goal-cn{font-weight:900;color:var(--navy);word-break:keep-all;overflow-wrap:normal}
.hero-aside .goal-en{color:var(--muted);font-size:12px;line-height:1.35}
@media(min-width:981px){.hero-aside .goal-cn{white-space:nowrap;font-size:13.5px}.hero-aside .overview-goals{gap:6px!important}}
@media(max-width:1180px) and (min-width:981px){.hero-aside .goal-cn{font-size:12.5px}.hero-aside .goal-en{font-size:11px}}

.switch-control{display:inline-flex;align-items:center;gap:9px;border:0;background:transparent;color:#596080;font-weight:900;font-size:13px;padding:6px 2px;cursor:pointer}
.switch-track{position:relative;display:inline-block;width:42px;height:24px;border-radius:999px;background:#dfe4ef;box-shadow:inset 0 0 0 1px #ccd3e3;transition:.18s;flex:0 0 42px}
.switch-knob{position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(25,33,101,.20);transition:.18s}
.switch-control[aria-pressed="true"] .switch-track{background:linear-gradient(90deg,var(--teal),var(--blue));box-shadow:none}
.switch-control[aria-pressed="true"] .switch-knob{transform:translateX(18px)}
.compact-switch{font-size:12px}.compact-switch .switch-track{width:38px;height:22px;flex-basis:38px}.compact-switch .switch-knob{width:16px;height:16px}.compact-switch[aria-pressed="true"] .switch-knob{transform:translateX(16px)}
.inverse-switch{color:#fff}.inverse-switch .switch-track{background:rgba(255,255,255,.22);box-shadow:inset 0 0 0 1px rgba(255,255,255,.38)}

.v7-reader-toolbar{align-items:center}.audio-main-btn{border:1px solid #cfeee6;border-radius:14px;background:var(--soft-teal);color:var(--teal);padding:9px 14px;font-weight:900;cursor:pointer}.audio-main-btn.playing{background:#daf5ee}
.main-reading-audio{display:none}.audio-source-note{margin:-6px 0 14px;color:#8a92a8;font-size:11px}.audio-source-note code{color:var(--blue);background:#f3f6ff;padding:2px 5px;border-radius:6px}
.v7-reading-lines{display:flex;flex-direction:column;gap:13px}.v7-dialogue-line{display:grid;grid-template-columns:36px minmax(0,1fr);gap:10px;align-items:start}.v7-speaker{width:30px;height:30px;border-radius:10px;background:var(--soft-blue);color:var(--blue);font-weight:950;display:flex;align-items:center;justify-content:center;margin-top:1px}.v7-dialogue-copy{min-width:0}.reading1-cn{font-size:21px;line-height:1.65;font-weight:700}.reading1-py,.reading1-en{display:none;margin-top:3px;font-size:13px;line-height:1.55}.reading1-py{color:var(--blue);font-weight:700}.reading1-en{color:var(--muted)}#readingCard.show-pinyin .reading1-py{display:block}#readingCard.show-english .reading1-en{display:block}#readingCard.hide-chinese .reading1-cn{display:none}
.lookup-token{cursor:pointer;border-radius:7px;padding:1px 2px;transition:.15s}.lookup-token:hover{background:var(--soft-teal)}.lookup-token.active{background:var(--soft-blue);color:var(--blue);box-shadow:0 0 0 1px rgba(38,96,229,.12)}
.lookup-pop-v7{position:fixed;z-index:160;display:none;min-width:190px;max-width:280px;background:#fff;border:1px solid var(--line);border-radius:15px;padding:12px 14px;box-shadow:0 18px 46px rgba(25,33,101,.20)}.lookup-pop-v7.show{display:block}.lookup-pop-v7 b{font-size:20px;color:var(--navy)}.lookup-pop-v7 .py{color:var(--blue);font-weight:800;margin-top:3px}.lookup-pop-v7 .en{color:var(--muted);font-size:13px;margin-top:3px}
.v7-scene-card{position:relative;top:auto}.v7-scene-card img{width:100%;height:auto;display:block}

.v7-vocab-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.v7-vocab-card{appearance:none;text-align:left;cursor:pointer;width:100%;position:relative}.v7-vocab-card .vocab-check{display:none;position:absolute;right:12px;bottom:11px;width:22px;height:22px;border-radius:50%;align-items:center;justify-content:center;background:#dff8f1;color:#138a74;font-size:12px}.v7-vocab-card.reviewed{border-color:#a9e6d8;background:#f6fdfa}.v7-vocab-card.reviewed .vocab-check{display:flex}
@media(max-width:1080px){.v7-vocab-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:700px){.v7-vocab-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.grammar-list-v7{display:grid;gap:13px}.grammar-card-v7{padding:0!important;overflow:hidden}.grammar-card-v7 summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:17px 19px;color:var(--navy);font-size:18px;font-weight:950}.grammar-card-v7 summary::-webkit-details-marker{display:none}.grammar-card-v7 summary:after{content:'+';font-size:22px;color:var(--blue)}.grammar-card-v7[open] summary:after{content:'−'}.grammar-card-v7 summary small{margin-left:auto;color:var(--muted);font-size:12px;font-weight:800}.grammar-body-v7{border-top:1px solid var(--line);padding:16px 19px 18px}.grammar-explain-v7{color:#596080;line-height:1.7;font-size:14px}.article-example-v7,.mini-examples-v7>div{padding:11px 13px;border-radius:13px;background:#fbfcff;margin-top:9px;color:var(--navy);font-weight:800}.article-example-v7 span,.article-example-v7 em,.mini-examples-v7 span,.mini-examples-v7 em{display:block;font-style:normal;font-size:12px;margin-top:3px}.article-example-v7 span,.mini-examples-v7 span{color:var(--blue)}.article-example-v7 em,.mini-examples-v7 em{color:var(--muted);font-weight:600}

#reading-practice .support-py,#listening .support-py{display:none;color:var(--blue);font-weight:800;font-size:12px;margin-left:8px}#reading-practice.show-support-pinyin .support-py,#listening.show-support-pinyin .support-py{display:inline}
@media(max-width:760px){#reading-practice .support-py,#listening .support-py{margin-left:0;margin-top:4px}#reading-practice.show-support-pinyin .support-py,#listening.show-support-pinyin .support-py{display:block}}
.listen-fill{width:min(360px,100%);border:1px solid var(--line);border-radius:12px;padding:11px 13px;font-size:16px;color:var(--navy);outline:none}.listen-fill:focus{border-color:#a8b9eb;box-shadow:0 0 0 3px rgba(38,96,229,.08)}
.transcript-btn{margin-top:10px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--navy);padding:10px 14px;font-weight:900}.transcript-btn:disabled{opacity:.45;cursor:not-allowed}.v7-transcript{line-height:1.7}.transcript-line{padding:7px 0;border-bottom:1px solid #edf0f7}.transcript-line:last-child{border-bottom:0}.transcript-line span{display:block;color:var(--blue);font-size:12px;margin-top:2px}

.speaking-production-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.v7-speak-card .speak-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.speak-q-py{display:none;font-size:12px;color:#dce8ff;margin-top:4px}.v7-speak-card.show-speak-pinyin .speak-q-py{display:block}.speak-actions-v7{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.speak-done-btn,.sample-btn{border:1px solid rgba(255,255,255,.34);border-radius:12px;background:rgba(255,255,255,.13);color:#fff;padding:9px 12px;font-weight:900;cursor:pointer}.speak-done-btn.done{background:rgba(255,255,255,.24);box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}.sample-answer{display:none;margin-top:12px;padding:11px 13px;border-radius:13px;background:rgba(255,255,255,.12);font-weight:900}.sample-answer.show{display:block}.sample-answer span{display:block;font-size:12px;color:#dce8ff;margin-top:4px}.review-divider{display:flex;align-items:center;gap:12px;margin:24px 0 16px;color:#9aa2b6;font-size:11px;font-weight:950;letter-spacing:.13em}.review-divider:before,.review-divider:after{content:'';height:1px;background:var(--line);flex:1}
@media(max-width:820px){.speaking-production-grid{grid-template-columns:1fr}}

.review-task-stack{display:grid;gap:16px}.review-task-card{border:1px solid var(--line);border-radius:22px;background:#fff;padding:20px;box-shadow:0 8px 24px rgba(25,33,101,.045)}.review-task-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:8px}.review-task-head>div{display:flex;align-items:center;gap:10px}.review-task-head h3{margin:0;color:var(--navy);font-size:19px}.review-task-num{display:inline-flex;width:32px;height:32px;border-radius:11px;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--soft-teal),var(--soft-blue));color:var(--navy);font-size:12px;font-weight:950}.review-task-card.task-done{border-color:#bce8dc;background:linear-gradient(180deg,#fff,#f8fffd)}.review-instruction{font-size:13px;color:#606a86;line-height:1.55;margin-bottom:14px}.review-instruction span{display:block;color:#8790a4;font-size:12px;margin-top:2px}.review-word-bank{display:flex;flex-wrap:wrap;gap:9px;padding:12px;border-radius:16px;background:#f7f9fd;margin-bottom:14px}.review-drag-word{border:1px solid #d9e0ef;border-radius:12px;background:#fff;padding:9px 13px;color:var(--navy);font-weight:900;cursor:grab}.review-drag-word.used{opacity:.35;cursor:not-allowed}.review-drag-word .review-py{display:none;color:var(--blue);font-size:11px;margin-top:3px}.review-cloze-list{display:grid;gap:10px}.review-cloze-row{padding:13px 14px;border:1px solid #e1e6f0;border-radius:15px;color:var(--navy);font-weight:800;line-height:1.65}.review-cloze-row .review-py{display:none;color:var(--blue);font-size:12px;margin-top:4px}.review-drop{display:inline-flex;min-width:92px;min-height:34px;align-items:center;justify-content:center;border:2px dashed #c9d2e5;border-radius:9px;padding:2px 10px;margin:0 4px;color:#8992a7;background:#fbfcff;vertical-align:middle}.review-drop.drag-over{border-color:var(--blue);background:#eff4ff}.review-drop.filled{border-style:solid;border-color:#9ccfc4;color:var(--navy);background:#effbf8}.review-drop.correct{border-color:#60bfa7;background:#eafaf5}.review-drop.wrong{border-color:#e6a3a3;background:#fff1f1}.review-row-feedback{min-height:18px;font-size:12px;margin-top:5px}.review-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}.review-reset-btn{border:1px solid #d7ddec;border-radius:12px;background:#fff;color:var(--navy);padding:9px 13px;font-weight:900}.review-order-list{display:grid;gap:9px}.review-order-item{display:grid;grid-template-columns:34px minmax(0,1fr) 68px;gap:10px;align-items:center;border:1px solid #dfe5f0;border-radius:14px;padding:11px 12px;background:#fff;cursor:grab}.review-order-item.dragging{opacity:.45}.review-order-code{width:30px;height:30px;border-radius:9px;background:var(--soft-blue);display:flex;align-items:center;justify-content:center;color:var(--blue);font-size:12px;font-weight:950}.review-order-cn{font-weight:900;color:var(--navy)}.review-order-py{display:none;color:var(--blue);font-size:12px;margin-top:3px}.review-order-position{font-size:11px;color:#8e96aa;text-align:right;font-weight:800}.review-order-handle{color:#9ba4ba;margin-left:5px;letter-spacing:-2px}.show-review-py .review-py,.show-review-py .review-order-py{display:block}

.nav-item.done .nav-check{opacity:1}.nav-check{margin-left:auto;color:var(--teal);opacity:0;font-weight:950}.nav-item.done{background:#f3fcf9;color:var(--navy)}
.toast{z-index:200}.complete{margin-bottom:30px}
@media(max-width:650px){.review-task-head{align-items:flex-start}.review-actions{justify-content:stretch}.review-actions button{flex:1}.review-order-item{grid-template-columns:30px minmax(0,1fr) 54px}.audio-source-note code{word-break:break-all}}


/* ===== User feedback patch v8 ===== */
.brand-title{font-size:18px!important;font-weight:950!important;letter-spacing:.01em}
@media(min-width:981px){
  .hero{grid-template-columns:minmax(0,.88fr) minmax(500px,1.12fr)!important;gap:20px!important}
  .hero-main,.hero-aside{height:286px!important;min-height:286px!important}
  .hero-main{padding:24px 28px!important}
  .hero-main h1{font-size:clamp(46px,4.2vw,58px)!important;margin:10px 0 6px!important}
  .hero-main .hero-en{font-size:17px!important;margin-bottom:14px!important}
  .hero-aside{padding:15px 20px 14px!important;gap:5px!important}
  .hero-aside h3{font-size:22px!important;margin:1px 0 5px!important}
  .hero-aside .overview-goals{font-size:14px!important;line-height:1.35!important;gap:3px!important}
  .hero-aside .goal-row,.hero-aside .goal-item{gap:14px!important}
  .hero-aside .meta-card{height:50px!important;min-height:50px!important;padding:7px 10px!important}
  .hero-aside .meta-num{font-size:20px!important}.hero-aside .meta-label{font-size:10px!important}
}
.v7-reader-toolbar{gap:13px!important;align-items:center!important}
.v7-reader-toolbar .switch-control{padding:6px 0!important}
/* 2.34：角色徽章里多一行性别（R-096）。字母还是主角，性别用小一号压在下面，徽章尺寸不变 —— 一变就得重排整个对话列。 */
.v7-speaker{flex-direction:column!important;line-height:1;gap:1px}
.v7-speaker-sex-v34{font-size:9px;font-weight:800;letter-spacing:0;opacity:.82}
@media(max-width:650px){.v7-speaker-sex-v34{font-size:8px}}
.v7-speaker.speaker-a{background:var(--soft-blue)!important;color:var(--blue)!important;border:1px solid #d6e1ff}
.v7-speaker.speaker-b{background:var(--soft-teal)!important;color:#12957d!important;border:1px solid #ccefe5}
.v7-speaker.speaker-c{background:var(--soft-orange)!important;color:#b35c00!important;border:1px solid #ffd9b0}

/* vocabulary match */
.vocab-practice-v8{margin-top:22px;padding:20px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(180deg,#fff,#fbfcff)}
.vocab-practice-head-v8{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:16px}
.vocab-practice-head-v8 h3{margin:0;color:var(--navy);font-size:20px}.vocab-practice-head-v8 p{margin:5px 0 0;color:var(--muted);font-size:13px;line-height:1.55}
.vocab-match-reset-v8{border:1px solid var(--line);background:#fff;color:var(--navy);border-radius:12px;padding:9px 12px;font-weight:900}
.vocab-match-board-v8{display:grid;grid-template-columns:1fr 1fr;gap:18px}.vocab-match-col-v8{display:grid;gap:9px}
.vocab-match-item-v8{border:1.5px solid #dfe4f1;border-radius:14px;background:#fff;color:var(--navy);padding:12px 14px;font-weight:900;text-align:left;transition:.16s}
.vocab-match-item-v8:hover{border-color:#b9c5ee;transform:translateY(-1px)}.vocab-match-item-v8.selected{border-color:var(--blue);background:var(--soft-blue);box-shadow:0 0 0 3px rgba(38,96,229,.10)}
.vocab-match-item-v8.matched{border-color:#9cdecf;background:#effbf7;color:#137c69}.vocab-match-item-v8.wrong{border-color:#e59a9a;background:#fff5f5}
.vocab-match-item-v8 .match-py-v8{font-size:11px;color:var(--blue);margin-top:3px}.vocab-match-feedback-v8{min-height:20px;margin-top:12px;font-size:13px;font-weight:900;color:var(--muted)}.vocab-match-feedback-v8.ok{color:var(--success)}.vocab-match-feedback-v8.no{color:var(--danger)}
@media(max-width:680px){.vocab-match-board-v8{grid-template-columns:1fr}.vocab-practice-head-v8{flex-direction:column}}

/* grammar */
.grammar-card-v7 summary{font-size:21px!important;padding:18px 20px!important}.grammar-title-v8{font-size:22px!important;line-height:1.3!important}.grammar-card-v7 summary small{font-size:12.5px!important}
.grammar-body-v7{padding:17px 20px 19px!important}.grammar-structure-v8{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important;align-items:start!important;margin-bottom:12px!important}
.grammar-structure-v8>div{padding:10px 12px!important;border-radius:12px!important;background:#f8faff!important;font-size:14px!important;line-height:1.55!important}
.grammar-structure-cn{font-weight:900!important;color:var(--navy)!important}.grammar-structure-en{color:#68728e!important}
.grammar-explain-pair-v8{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:4px 0 13px}.grammar-explain-pair-v8 p{margin:0;padding:10px 12px;border-radius:12px;line-height:1.65;font-size:14px}
/* v2.33（MCR-010 甲案）句型卡：Structure 那个绿块删了 —— 它和折叠标题一字不差。
   现在盒子里只剩 Meaning 一块，两栏网格改成通栏，不然 Meaning 只占左半边。
   .grammar-structline-v31 / .grammar-explain-cn-v8 保留：Structure 块虽然不再
   出现在句型卡里，样式名还挂在别处（复习 PDF 的句型页照用同一套配色）。 */
.grammar-meaning-only-v33{grid-template-columns:1fr!important}
.grammar-lab-v31{display:block;font-size:10px;letter-spacing:.9px;font-weight:900;color:var(--blue);margin-bottom:6px}
.grammar-structline-v31{display:block;font-size:19px;font-weight:900;color:#385c57;line-height:1.5;letter-spacing:.02em}
.grammar-hl-v31{color:var(--teal);font-weight:900}
.grammar-meanline-v31{display:block;font-size:19px;font-weight:900;color:#3c4763;line-height:1.5}
.grammar-mcn-v31{display:block;font-weight:750;color:#3c4763;margin-bottom:6px}
.grammar-men-v31{display:block;color:#68728e}
.grammar-meaning-v31{display:flex;flex-direction:column;justify-content:center}
.grammar-title-v8 .grammar-hl-v31{color:var(--teal)}
.grammar-explain-cn-v8{background:#f4fbf9;color:#385c57;font-weight:750}.grammar-explain-en-v8{background:#f7f9fd;color:#5c6784}
.grammar-examples-v8{display:grid;gap:8px}.grammar-example-row-v8{display:grid;grid-template-columns:1.05fr 1.05fr 1.2fr;gap:12px;align-items:center;padding:11px 13px;border:1px solid #e6eaf3;border-radius:13px;background:#fff}
.grammar-example-cn-v8{font-size:16px;font-weight:900;color:var(--navy)}.grammar-example-py-v8{font-size:13px;font-weight:800;color:var(--blue)}.grammar-example-en-v8{font-size:13px;color:#64708b;line-height:1.45}
@media(max-width:760px){.grammar-structure-v8,.grammar-explain-pair-v8,.grammar-example-row-v8{grid-template-columns:1fr}.grammar-card-v7 summary{align-items:flex-start;flex-wrap:wrap}.grammar-card-v7 summary small{width:100%;margin-left:0!important}}

/* per-question reading pinyin */
#reading-practice .question-head-v8{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:13px}
#reading-practice .question-head-v8 .q-title{margin:0;flex:1 1 auto}
#reading-practice .question .support-py{display:none!important}
#reading-practice .question.show-q-pinyin .support-py{display:block!important}
#reading-practice .q-title .support-py{margin-top:4px}.question-pinyin-switch-v8{flex:0 0 auto}
@media(max-width:660px){#reading-practice .question-head-v8{flex-direction:column}.question-pinyin-switch-v8{align-self:flex-start}}

/* listening: independent Hanzi / Pinyin */
.listen-question-head-v8{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:12px}
.listen-question-title-v8{display:flex;align-items:baseline;gap:8px;min-width:0}.listen-q-num-v8{font-size:18px;font-weight:950;color:var(--navy);flex:0 0 auto}.listen-task-v8{font-size:15px;font-weight:900;color:#596080;line-height:1.45}
.listen-question-controls-v8{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end;flex:0 0 auto}
.listen-support-v8{display:grid;gap:5px;margin:0 0 12px 34px}.listen-cn-v8,.listen-py-v8{display:none;padding:10px 12px;border-radius:12px;background:#fbfcff;border:1px solid var(--line);font-weight:900;line-height:1.5}
.listen-cn-v8{font-size:17px;color:var(--navy)}.listen-py-v8{font-size:13px;color:var(--blue)}
.listen-question.show-listen-hanzi .listen-cn-v8{display:block}.listen-question.show-listen-pinyin .listen-py-v8{display:block}
.listen-option-cn-v8,.listen-option-py-v8{display:none}.listen-question.show-listen-hanzi .listen-option-cn-v8{display:block}.listen-question.show-listen-pinyin .listen-option-py-v8{display:block}
.listen-option-py-v8{font-size:12px;color:var(--blue);font-weight:800;margin-top:2px}.listen-option-cn-v8{font-weight:800}
.listen-question:not(.show-listen-hanzi):not(.show-listen-pinyin) .listen-options-v8 .option{min-height:46px}
@media(max-width:700px){.listen-question-head-v8{flex-direction:column}.listen-question-controls-v8{justify-content:flex-start}.listen-support-v8{margin-left:0}}

/* speaking builder */
.speaking-builder-v8{border-radius:24px;background:linear-gradient(135deg,#172064 0%,#26368f 58%,#138c79 100%);color:#fff;padding:24px;box-shadow:0 16px 38px rgba(25,33,101,.14)}
.speaking-builder-head-v8{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.speaking-builder-head-v8 h3{margin:0;font-size:24px;color:#fff}.speaking-builder-head-v8 p{margin:7px 0 0;color:rgba(255,255,255,.80);font-size:13px;line-height:1.6}.speaking-builder-v8 .switch-control{color:#fff!important}
.speaking-builder-v8 .switch-track{background:rgba(255,255,255,.24);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.speak-bank-block-v8{margin-top:18px}.speak-bank-label-v8{font-size:12px;font-weight:950;letter-spacing:.04em;color:#cfe2ff;margin-bottom:9px}
.speak-chip-grid-v8{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.item-grid-v8{grid-template-columns:repeat(4,minmax(0,1fr))}
.speak-chip-v8,.speak-polarity-btn-v8{border:1px solid rgba(255,255,255,.28);border-radius:16px;background:rgba(255,255,255,.10);color:#fff;padding:12px 10px;text-align:center;transition:.16s;min-width:0}
.speak-chip-v8:hover,.speak-polarity-btn-v8:hover,.speak-chip-v8.selected,.speak-polarity-btn-v8.selected{background:rgba(255,255,255,.21);border-color:rgba(255,255,255,.55);transform:translateY(-1px)}
.person-chip-v8{display:grid;grid-template-columns:38px minmax(0,1fr);grid-template-rows:auto auto;column-gap:9px;align-items:center;text-align:left}.person-avatar-v8{grid-row:1/3;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.18);font-weight:950}.chip-cn-v8{font-size:17px;font-weight:950}.chip-py-v8{display:none;font-size:11px;color:#d5e2ff}.chip-en-v8{font-size:10.5px;color:rgba(255,255,255,.75)}
.item-chip-v8{display:grid;grid-template-columns:34px minmax(0,1fr);grid-template-rows:auto auto;text-align:left;column-gap:8px;align-items:center}.item-emoji-v8{grid-row:1/3;font-size:25px}.speaking-builder-v8.show-builder-pinyin .chip-py-v8{display:block}
.speak-polarity-v8{display:flex;gap:10px;flex-wrap:wrap}.speak-polarity-btn-v8{padding:10px 15px;font-weight:900}
.speak-builder-output-v8{margin-top:20px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;padding:16px 17px;border-radius:18px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.24)}
.speak-builder-cn-v8{font-size:24px;font-weight:950}.speak-builder-py-v8{display:none;margin-top:4px;font-size:13px;color:#d8e6ff;font-weight:800}.speaking-builder-v8.show-builder-pinyin .speak-builder-py-v8{display:block}.speak-builder-en-v8{margin-top:4px;font-size:12px;color:rgba(255,255,255,.76)}
.speak-builder-done-v8{border:1px solid rgba(255,255,255,.38);border-radius:13px;background:#fff;color:var(--navy);padding:10px 14px;font-weight:950;white-space:nowrap}.speak-builder-done-v8.done{background:#dff8f1;color:#116d5d}
@media(max-width:780px){.speaking-builder-head-v8{flex-direction:column}.speak-chip-grid-v8,.item-grid-v8{grid-template-columns:repeat(2,minmax(0,1fr))}.speak-builder-output-v8{grid-template-columns:1fr}.speak-builder-done-v8{justify-self:start}}

/* review polish */
.review-drop{min-width:92px;min-height:36px;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}
.review-drop:empty::after{content:''}.review-order-code{background:#fff4e7!important;color:#b66a22!important;border:1px solid #f0d4b4!important}


/* ===== User feedback patch v9: visual unity + clean interaction ===== */

/* One unified blue hero with a white overview card inside */
.hero{
  grid-template-columns:minmax(0,.92fr) minmax(470px,1.08fr)!important;
  gap:18px!important;padding:18px!important;border-radius:32px!important;
  background:linear-gradient(135deg,var(--navy) 0%,#202c86 54%,var(--blue) 100%)!important;
  box-shadow:0 20px 55px rgba(25,33,101,.14)!important;
}
.hero-main{background:transparent!important;box-shadow:none!important;border-radius:22px!important;padding:26px 30px!important;height:286px!important;min-height:286px!important}
.hero-aside{height:286px!important;min-height:286px!important;border:0!important;box-shadow:0 12px 30px rgba(8,20,76,.15)!important;border-radius:22px!important;padding:18px 22px 16px!important}
.hero-main h1{font-size:clamp(44px,4.2vw,62px)!important}
.hero-aside .overview-goals{gap:7px!important}.hero-aside .goal-item{gap:16px!important}.hero-aside .goal-cn{font-size:13.5px!important}.hero-aside .goal-en{font-size:12px!important}
@media(max-width:1100px) and (min-width:981px){.hero{grid-template-columns:minmax(0,.82fr) minmax(500px,1.18fr)!important}.hero-main{padding:24px!important}.hero-main h1{font-size:48px!important}}
@media(max-width:980px){.hero{grid-template-columns:1fr!important;padding:14px!important}.hero-main,.hero-aside{height:auto!important;min-height:0!important}.hero-main{min-height:235px!important}.hero-aside{margin-top:0!important}}

/* Dialogue: speaker A = brand blue, speaker B = brand teal */
#reading .v7-dialogue-line{padding:12px 14px;border-radius:16px;border:1px solid transparent}
/* 2.27：角色色按**角色**走，不按行的奇偶走。
   2.26 这里是 :nth-child(odd/even) 且带 !important，把 .speaker-a/.speaker-b 盖掉了 ——
   于是同一句里徽章按位置上色、播放按钮按角色上色，一蓝一绿。
   HSK1-07 七句里有四句对不上，就是这么来的。 */
#reading .v7-dialogue-line.line-a{background:#f3f7ff;border-color:#dce7ff}
#reading .v7-dialogue-line.line-b{background:#f0fbf8;border-color:#d4f1e9}
#reading .v7-dialogue-line.line-c{background:var(--soft-orange);border-color:#ffd9b0}
#reading .v7-dialogue-line .v7-speaker.speaker-a{background:var(--blue)!important;color:#fff!important;border-color:var(--blue)}
#reading .v7-dialogue-line .v7-speaker.speaker-b{background:var(--teal)!important;color:#fff!important;border-color:var(--teal)}
#reading .v7-dialogue-line .v7-speaker.speaker-c{background:var(--orange)!important;color:#fff!important;border-color:var(--orange)}
#reading .v7-dialogue-line.line-a .reading1-cn,#reading .v7-dialogue-line.line-a .reading1-rt{color:#1f3275}
#reading .v7-dialogue-line.line-b .reading1-cn,#reading .v7-dialogue-line.line-b .reading1-rt{color:#175e55}
#reading .v7-dialogue-line.line-c .reading1-cn,#reading .v7-dialogue-line.line-c .reading1-rt{color:#8a4a00}


#listeningTranscript .transcript-line{padding:9px 11px;border-radius:12px;margin:5px 0;border:1px solid transparent}
#listeningTranscript .transcript-line:nth-child(even){background:#f3f7ff;border-color:#dce7ff}
#listeningTranscript .transcript-line:nth-child(odd){background:#f0fbf8;border-color:#d4f1e9}
#listeningTranscript .transcript-line:nth-child(even)>b{color:var(--blue)}
#listeningTranscript .transcript-line:nth-child(odd)>b{color:var(--teal)}
#listeningTranscript .listening-transcript-item-v60.speaker-a-line{background:#f3f7ff;border-color:#dce7ff}
#listeningTranscript .listening-transcript-item-v60.speaker-b-line{background:#f0fbf8;border-color:#d4f1e9}
#listeningTranscript .listening-transcript-item-v60.speaker-a-line>b{color:var(--blue)}
#listeningTranscript .listening-transcript-item-v60.speaker-b-line>b{color:var(--teal)}
#listeningTranscript .listening-transcript-item-v60.speaker-c-line{background:var(--soft-orange);border-color:#ffd9b0}
#listeningTranscript .listening-transcript-item-v60.speaker-c-line>b{color:var(--orange)}
/* 2.27：听力「显示全部原文」总开关 + 挂在每道题下面的本题原文 */
.listen-q-transcript-v227{margin:10px 0 2px;padding:10px 12px;border:1px dashed var(--line);border-radius:12px;background:var(--soft)}
.listen-q-transcript-v227 .lqt-head-v227{font-size:12px;font-weight:800;color:var(--muted);margin-bottom:6px}
.listen-q-transcript-v227 .lqt-line-v227{padding:6px 9px;border-radius:10px;margin:4px 0;border:1px solid transparent;line-height:1.6}
.listen-q-transcript-v227 .lqt-line-v227.speaker-a-line{background:#f3f7ff;border-color:#dce7ff}
.listen-q-transcript-v227 .lqt-line-v227.speaker-b-line{background:#f0fbf8;border-color:#d4f1e9}
.listen-q-transcript-v227 .lqt-line-v227.speaker-c-line{background:var(--soft-orange);border-color:#ffd9b0}
/* 听力原文里的逐词对齐：字体/行高/overflow/句首大写/标点占位全部继承 .reading1-rt，
   这里只做两件事 —— 拼音常显（它不在 #readingCard 里，吃不到那个开关），
   以及把汉字压到适合原文区的字号。**不另写一套拼音样式。** */
.listen-q-transcript-v227 .reading1-rt,
#listeningTranscript .reading1-rt{font-size:17px;line-height:1.5;color:inherit;row-gap:6px}
.listen-q-transcript-v227 .reading1-rt .rt-p,
#listeningTranscript .reading1-rt .rt-p{display:block}

/* Vocabulary cards: soft alternating brand tints, still clean */
#vocab .v7-vocab-card{border-width:1px!important;box-shadow:0 7px 18px rgba(25,33,101,.04)!important}
#vocab .v7-vocab-card:nth-child(4n+1){background:#f3f7ff!important;border-color:#dce6fb!important}
#vocab .v7-vocab-card:nth-child(4n+2){background:#f0fbf8!important;border-color:#d5efe8!important}
#vocab .v7-vocab-card:nth-child(4n+3){background:#f8f5ff!important;border-color:#e8dff8!important}
#vocab .v7-vocab-card:nth-child(4n){background:#fff9ef!important;border-color:#f3e6c8!important}
#vocab .v7-vocab-card.reviewed{background:#eaf9f5!important;border-color:#a9e6d8!important}
.vocab-practice-v8{background:linear-gradient(135deg,#f4f8ff 0%,#f2fbf8 100%)!important;border-color:#dce6f4!important}
.vocab-match-item-v8{background:rgba(255,255,255,.88)!important}.vocab-match-item-v8.correct-away{animation:matchAwayV9 .3s ease forwards}.vocab-match-item-v8.wrong{animation:matchWrongV9 .38s ease}
@keyframes matchAwayV9{to{opacity:0;transform:scale(.88);filter:blur(1px)}}
@keyframes matchWrongV9{0%,100%{background:#fff}30%,70%{background:#ffe8e8;border-color:#e05f5f;box-shadow:0 0 0 3px rgba(224,95,95,.10)}}

/* Reading / listening true-false must remain on one line */
.truth-main-v9{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
#reading-practice .question.truth-question-v9 .option-copy{display:flex!important;align-items:center!important;gap:7px!important;flex-wrap:nowrap!important;white-space:nowrap!important}
#reading-practice .question.truth-question-v9 .support-py{display:none!important;margin:0!important}
#reading-practice .question.truth-question-v9.show-q-pinyin .support-py{display:inline!important}
#listening .truth-listen-v9 .listen-option-cn-v8{display:inline-flex!important;white-space:nowrap!important}
#listening .truth-listen-v9 .listen-option-py-v8{display:none!important;margin-left:5px!important}
#listening .truth-listen-v9.show-listen-pinyin .listen-option-py-v8{display:inline!important}
#listening .truth-listen-v9 .listen-option-copy-v8{display:flex!important;align-items:center!important;gap:6px!important;flex-wrap:nowrap!important;white-space:nowrap!important}

/* Listening: each question owns an audio button; support is clearly on a new row */
.listen-question{background:linear-gradient(180deg,#fff,#fbfcff)!important}
.listen-question:nth-of-type(odd){border-color:#dbe7fa!important}.listen-question:nth-of-type(even){border-color:#d7eee8!important}
.listen-question-title-v8{display:flex!important;align-items:flex-start!important;gap:8px!important;min-width:0}
.listen-question-controls-v8{gap:8px!important}
.listen-q-audio-v9{width:38px;height:38px;flex:0 0 38px;border:1px solid #cfeee6;border-radius:50%;background:var(--soft-teal);color:var(--teal);font-weight:950;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;box-shadow:none;transition:.16s}
.listen-q-audio-v9:hover,.listen-q-audio-v9.playing{background:#ddf7f0;color:#11856f;transform:translateY(-1px)}
.listen-support-v8{margin:0 0 13px 34px!important;display:grid!important;gap:6px!important}
.listen-cn-v8,.listen-py-v8{width:min(100%,720px)!important}
@media(max-width:700px){.listen-support-v8{margin-left:0!important}.listen-question-controls-v8{width:100%!important}}

/* Small on-screen Hanzi keyboard for learners without a Chinese IME */
.hanzi-keyboard-v9{display:none;margin:8px 0 14px;padding:10px;border:1px solid #dfe5f0;border-radius:14px;background:#f6f9ff;box-shadow:0 8px 20px rgba(25,33,101,.06);max-width:520px}
.hanzi-keyboard-v9.show{display:block}.hanzi-keyboard-title-v9{font-size:11px;color:#7a849f;font-weight:850;margin:0 0 7px}
.hanzi-keyboard-keys-v9{display:flex;gap:7px;flex-wrap:wrap}.hanzi-key-v9{min-width:36px;height:36px;border:1px solid #d8e0ef;border-radius:10px;background:#fff;color:var(--navy);font-weight:950;cursor:pointer}.hanzi-key-v9:hover{background:var(--soft-blue);border-color:#b9c8ee}.hanzi-key-v9.action{padding:0 11px;color:#6e7890;font-size:12px}

/* Speaking: scenario cards rather than a builder */
.speaking-scenarios-v9{padding:24px;border-radius:25px;background:linear-gradient(135deg,#172064 0%,#24358f 56%,#128f7a 100%);color:#fff;box-shadow:0 16px 38px rgba(25,33,101,.14)}
.speaking-scenarios-head-v9{display:flex;justify-content:space-between;align-items:flex-start;gap:18px}.speaking-scenarios-head-v9 h3{margin:0;color:#fff;font-size:24px}.speaking-scenarios-head-v9 p{margin:7px 0 0;font-size:13px;line-height:1.55;color:rgba(255,255,255,.88)}.speaking-scenarios-en-v9{color:rgba(255,255,255,.70)!important;font-size:12px!important}
.scenario-grid-v9{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px}.scenario-card-v9{padding:16px;border-radius:20px;background:rgba(255,255,255,.95);color:var(--ink);border:1px solid rgba(255,255,255,.55);box-shadow:0 9px 24px rgba(11,20,73,.12)}
.scenario-person-v9{display:flex;align-items:center;gap:11px;padding-bottom:12px;border-bottom:1px solid #e8ebf3}.scenario-person-v9>div{display:grid;grid-template-columns:auto auto;column-gap:8px;align-items:baseline}.scenario-person-v9 b{font-size:20px;color:var(--navy)}.scenario-person-v9 small{grid-column:1/3;color:#8a92a8}.scenario-person-py-v9{display:none;color:var(--blue);font-size:12px;font-weight:850}
.scenario-avatar-v9{width:48px;height:48px;border-radius:16px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:950;font-size:18px}.avatar-me,.avatar-she{background:var(--blue)}.avatar-he,.avatar-friend{background:var(--teal)}
.scenario-picks-v9{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.scenario-pick-v9{position:relative;padding:12px;border-radius:15px;background:#f7f9fd;border:1px solid #e5e9f2;min-height:100px}.scenario-kind-v9{display:block;font-size:10.5px;color:#8992a8;font-weight:850}.scenario-item-v9{display:block;font-size:19px;font-weight:950;color:var(--navy);margin-top:6px}.scenario-status-v9{display:inline-flex;margin-top:8px;padding:4px 8px;border-radius:999px;font-size:11px;font-weight:950}.scenario-status-v9.yes{background:#ddf7f0;color:#117a66}.scenario-status-v9.no{background:#fff0f0;color:#bd4c4c}.scenario-py-v9{display:none;margin-top:5px;font-size:11px;color:var(--blue);font-weight:800}
.speaking-scenarios-v9.show-scenario-pinyin .scenario-person-py-v9,.speaking-scenarios-v9.show-scenario-pinyin .scenario-py-v9{display:block}
.scenario-answer-btn-v9{margin-top:12px;border:1px solid #dce2ef;border-radius:11px;background:#fff;color:var(--navy);padding:8px 10px;font-size:11px;font-weight:900;cursor:pointer}.scenario-answer-v9{display:none;margin-top:10px;padding:11px 12px;border-radius:13px;background:#f3f7ff;border:1px solid #dce6fb}.scenario-answer-v9.show{display:block}.scenario-answer-v9>div{font-size:16px;font-weight:950;color:var(--navy);line-height:1.55}.scenario-answer-v9>span{display:none;color:var(--blue);font-size:12px;font-weight:800;line-height:1.5;margin-top:3px}.speaking-scenarios-v9.show-scenario-pinyin .scenario-answer-v9>span{display:block}.scenario-answer-v9>small{display:block;color:#747e96;line-height:1.45;margin-top:4px}
.scenario-finish-v9{margin-top:16px;padding:12px 14px;border-radius:15px;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:space-between;gap:12px}.scenario-finish-v9 span{font-size:12px;color:rgba(255,255,255,.78)}.scenario-finish-v9 button{border:0;border-radius:11px;background:#fff;color:var(--navy);padding:9px 12px;font-weight:950;cursor:pointer;white-space:nowrap}.scenario-finish-v9 button.done{background:#dff8f1;color:#116d5d}
@media(max-width:760px){.speaking-scenarios-head-v9{flex-direction:column}.scenario-grid-v9{grid-template-columns:1fr}.scenario-finish-v9{align-items:flex-start;flex-direction:column}}

/* Review: less white, cleaner cloze rows and cleaner numeric ordering */
#speaking-review .review-task-card{background:linear-gradient(180deg,#f8faff,#f4fbf9)!important;border-color:#dce6f1!important;box-shadow:none!important}
#reviewClozeTask .review-word-bank{background:linear-gradient(90deg,#edf4ff,#eaf9f5)!important;border:1px solid #dbe6f1!important}
#reviewClozeTask .review-drag-word:nth-child(odd){background:#f2f6ff!important;border-color:#d6e1f7!important}#reviewClozeTask .review-drag-word:nth-child(even){background:#effaf7!important;border-color:#d4ece5!important}
#reviewClozeTask .review-cloze-list{gap:9px!important}.review-cloze-row{display:grid!important;grid-template-columns:32px minmax(0,1fr)!important;gap:10px!important;align-items:center!important;background:#fff!important;padding:12px 14px!important}.review-cloze-row:nth-child(odd){background:#f7f9ff!important}.review-cloze-row:nth-child(even){background:#f4fbf9!important}.review-cloze-num-v9{width:28px;height:28px;border-radius:9px;background:#fff4e7;color:#a75e1b;border:1px solid #efd2ae;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:950}.review-cloze-main-v9{min-width:0}.review-cloze-sentence-v9{font-size:19px;font-weight:900;color:var(--navy);white-space:nowrap;overflow-x:auto;overflow-y:hidden;padding-bottom:2px}.review-cloze-row .review-py{margin-left:0!important}.review-row-feedback{grid-column:2;margin-top:2px!important}
.review-drop{min-width:78px!important;min-height:31px!important;margin:0 5px!important;background:#fff!important}
#reviewOrderTask .review-order-list{gap:9px!important}.review-order-item{grid-template-columns:34px minmax(0,1fr) 28px!important;padding:12px 13px!important;background:#fff!important}.review-order-item:nth-child(odd){background:#f7f9ff!important}.review-order-item:nth-child(even){background:#f3fbf8!important}.review-order-code{background:#fff4e7!important;color:#a75e1b!important;border:1px solid #efd2ae!important}.review-order-position{display:flex!important;align-items:center!important;justify-content:center!important}.review-order-handle{font-size:18px!important;color:#9aa3b7!important;margin:0!important;letter-spacing:-2px!important}.review-order-cn{font-size:18px!important;line-height:1.5!important}.order-speaker-v9{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;border-radius:8px;color:#fff;font-size:12px;font-weight:950;margin-right:7px}.order-speaker-v9.a{background:var(--blue)}.order-speaker-v9.b{background:var(--teal)}
@media(max-width:650px){.review-cloze-row{grid-template-columns:30px minmax(0,1fr)!important}.review-cloze-sentence-v9{font-size:17px}.review-order-item{grid-template-columns:32px minmax(0,1fr) 24px!important}}


/* ===== User feedback patch v10: logo-first palette + strict visual cleanup ===== */
/* Vocabulary: no rainbow. Neutral/light-blue default; green is reserved for learned/reviewed state. */
#vocab .v7-vocab-card{background:#fbfcff!important;border-color:#dce4f3!important;box-shadow:0 6px 18px rgba(25,33,101,.035)!important}
#vocab .v7-vocab-card:hover{background:#f4f7ff!important;border-color:#bfccef!important}
#vocab .v7-vocab-card.reviewed{background:#eaf9f5!important;border-color:#a9e6d8!important}
#vocab .vocab-cn{color:var(--navy)!important}#vocab .vocab-py{color:var(--blue)!important}

/* 3-column vocabulary match: Pinyin / Hanzi / English. All columns use the same logo-color system. */
#vocabMatchV8{background:#f5f8ff!important;border:1px solid #dbe4f4!important}
#vocabMatchV8 .vocab-match-board-v8{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important;align-items:start!important}
.vocab-match-col-wrap-v10{min-width:0}.vocab-match-col-title-v10{font-size:12px;font-weight:950;color:var(--navy);margin:0 0 8px;padding-left:2px}
#vocabMatchV8 .vocab-match-col-v8{display:grid!important;gap:8px!important}
#vocabMatchV8 .vocab-match-item-v8{min-height:48px!important;background:#fff!important;border:1px solid #d7e0f0!important;color:var(--navy)!important;border-radius:13px!important;font-weight:900!important;box-shadow:none!important}
#vocabMatchV8 .vocab-match-item-v8:hover,#vocabMatchV8 .vocab-match-item-v8.selected{background:#eef4ff!important;border-color:#9fb4e8!important;box-shadow:0 0 0 3px rgba(38,96,229,.08)!important}
#vocabMatchV8 .vocab-match-item-v8.wrong{animation:matchWrongV10 .34s ease!important}
@keyframes matchWrongV10{0%,100%{background:#fff;border-color:#d7e0f0}35%,70%{background:#ffecec;border-color:#d85c5c;box-shadow:0 0 0 3px rgba(216,92,92,.10)}}
@media(max-width:760px){#vocabMatchV8 .vocab-match-board-v8{grid-template-columns:repeat(3,180px)!important;overflow-x:auto!important;padding-bottom:5px!important}}

/* Reading Practice: per-question Pinyin appears to the RIGHT of Hanzi, never underneath on desktop. */
#reading-practice .question-head-v8{align-items:center!important}
#reading-practice .q-title{display:flex!important;align-items:baseline!important;gap:14px!important;flex-wrap:wrap!important}
#reading-practice .q-title .support-py{margin:0!important;display:none!important;white-space:nowrap!important}
#reading-practice .question.show-q-pinyin .q-title .support-py{display:inline-flex!important}
#reading-practice .option-copy{display:flex!important;flex-direction:row!important;align-items:baseline!important;gap:12px!important;flex-wrap:wrap!important;min-width:0!important}
#reading-practice .option-copy .support-py{display:none!important;margin:0!important;white-space:nowrap!important}
#reading-practice .question.show-q-pinyin .option-copy .support-py{display:inline!important}
@media(max-width:620px){#reading-practice .q-title,#reading-practice .option-copy{gap:7px!important}}

/* Speaking: each scenario owns its own Pinyin toggle. */
.scenario-top-v10{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:12px;border-bottom:1px solid #e8ebf3}
.scenario-top-v10 .scenario-person-v9{padding-bottom:0!important;border-bottom:0!important;flex:1}
.scenario-pinyin-switch-v10{flex:0 0 auto}.scenario-card-v10.show-card-pinyin .scenario-person-py-v9,.scenario-card-v10.show-card-pinyin .scenario-py-v9{display:block!important}.scenario-card-v10.show-card-pinyin .scenario-answer-v9>span{display:block!important}
.scenario-avatar-v9{background:linear-gradient(135deg,var(--navy),var(--blue))!important}.scenario-card-v10:nth-child(even) .scenario-avatar-v9{background:linear-gradient(135deg,var(--teal),#159c87)!important}

/* Review: one large calm color field per task. Only draggable options carry stronger color blocks. */
#speaking-review .review-task-card{box-shadow:none!important;border-width:1px!important}
#reviewClozeTask{background:#f3f6ff!important;border-color:#d7e1f5!important}
#reviewOrderTask{background:#f1faf8!important;border-color:#d6ece6!important}
#reviewClozeTask .review-word-bank{background:transparent!important;border:0!important;padding:0!important;margin:0 0 16px!important}
#reviewClozeTask .review-drag-word{background:var(--navy)!important;color:#fff!important;border:0!important;box-shadow:none!important;padding:10px 15px!important;border-radius:12px!important}
#reviewClozeTask .review-drag-word .review-py{color:#d9e4ff!important}
#reviewClozeTask .review-cloze-list{display:grid!important;gap:9px!important;padding:14px!important;background:#fff!important;border:1px solid #dfe6f3!important;border-radius:16px!important}
#reviewClozeTask .review-cloze-row{display:grid!important;grid-template-columns:30px minmax(0,1fr)!important;gap:10px!important;align-items:center!important;background:transparent!important;border:0!important;border-bottom:1px solid #edf0f6!important;border-radius:0!important;padding:10px 2px!important}
#reviewClozeTask .review-cloze-row:last-child{border-bottom:0!important}
.review-cloze-num-v9{background:var(--soft-teal)!important;color:var(--teal)!important;border-color:#ccebe3!important}.review-cloze-sentence-v9{white-space:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;line-height:1.55!important}.review-row-feedback{grid-column:1/3!important;margin:0!important;padding-left:40px!important}
.review-drop{background:#fff!important;border:1.5px dashed #9eb0d8!important;border-radius:9px!important;min-width:72px!important;min-height:30px!important}
#reviewOrderTask .review-order-list{display:grid!important;gap:8px!important;padding:14px!important;background:#fff!important;border:1px solid #dce9e6!important;border-radius:16px!important}
#reviewOrderTask .review-order-item{display:grid!important;grid-template-columns:32px minmax(0,1fr) 26px!important;gap:10px!important;align-items:center!important;background:transparent!important;border:0!important;border-bottom:1px solid #edf2f1!important;border-radius:0!important;padding:11px 2px!important;min-height:52px!important}
#reviewOrderTask .review-order-item:last-child{border-bottom:0!important}.review-order-code{background:var(--soft-teal)!important;color:var(--teal)!important;border-color:#ccebe3!important}.review-order-cn{white-space:nowrap!important;overflow-x:auto!important;line-height:1.45!important;padding-bottom:2px!important}.review-order-py{display:none!important;white-space:nowrap!important;color:var(--blue)!important;font-size:12px!important;margin-top:3px!important}#reviewOrderTask.show-review-pinyin .review-order-py{display:block!important}.review-order-position{display:flex!important;justify-content:flex-end!important}.review-order-handle{color:#8da39d!important}
.order-speaker-v9.a{background:var(--blue)!important}.order-speaker-v9.b{background:var(--teal)!important}

/* Remove older rainbow/alternating review backgrounds completely. */
#reviewClozeTask .review-cloze-row:nth-child(odd),#reviewClozeTask .review-cloze-row:nth-child(even),#reviewOrderTask .review-order-item:nth-child(odd),#reviewOrderTask .review-order-item:nth-child(even){background:transparent!important}


/* ===== v11: review clarity + bilingual guidance ===== */
.section-desc-en-v11{
  color:var(--muted);
  margin-left:5px;
}
#game .review-instruction,
#speaking-review .review-instruction{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  margin:0 0 16px!important;
  color:#5f6986!important;
  font-size:15px!important;
  line-height:1.6!important;
}
#game .review-instruction .review-instruction-cn-v11,
#speaking-review .review-instruction .review-instruction-cn-v11{
  display:block!important;
  width:100%!important;
  font-size:15px!important;
  line-height:1.6!important;
  color:#5f6986!important;
  margin:0!important;
}
#game .review-instruction .review-instruction-en-v11,
#speaking-review .review-instruction .review-instruction-en-v11{
  display:block!important;
  width:100%!important;
  margin-top:3px!important;
  font-size:14px!important;
  line-height:1.5!important;
  color:#8790a4!important;
}
#game .review-instruction .lookup-token,
#speaking-review .review-instruction .lookup-token,
.review-cloze-sentence-v9 .lookup-token,
.review-order-cn .lookup-token{
  display:inline!important;
  margin:0!important;
  padding:1px 2px!important;
  font-size:inherit!important;
  line-height:inherit!important;
  color:inherit!important;
  vertical-align:baseline!important;
  white-space:normal!important;
}

/* One calm visual field per major review task. */
#speaking-review .review-task-card{
  background:#f6f8ff!important;
  border:1px solid #dfe5f3!important;
  box-shadow:none!important;
  padding:22px!important;
}
#speaking-review .review-task-card + .review-task-card{margin-top:2px!important;}
#speaking-review .review-task-head{
  margin-bottom:12px!important;
}
#speaking-review .review-task-head > div{
  min-width:0!important;
  flex:1 1 auto!important;
}
#speaking-review .review-task-head h3{
  font-size:22px!important;
  line-height:1.25!important;
  white-space:normal!important;
}

/* Drag options are the only strong color blocks. */
#reviewClozeTask .review-word-bank{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:10px!important;
  background:transparent!important;
  border:0!important;
  padding:0!important;
  margin:0 0 16px!important;
}
#reviewClozeTask .review-drag-word{
  min-width:86px!important;
  min-height:48px!important;
  border:0!important;
  border-radius:14px!important;
  background:var(--navy)!important;
  color:#fff!important;
  padding:10px 16px!important;
  font-size:18px!important;
  font-weight:900!important;
  box-shadow:0 6px 14px rgba(25,33,101,.12)!important;
}
#reviewClozeTask .review-drag-word .review-py{
  color:#dfe7ff!important;
  font-size:12px!important;
}
#reviewClozeTask .review-drag-word.used{opacity:.34!important;}

/* Clean fill-in list: one sentence per row, no decorative alternating backgrounds. */
#reviewClozeTask .review-cloze-list{
  display:block!important;
  background:transparent!important;
  border:0!important;
  padding:0!important;
  border-radius:0!important;
}
#reviewClozeTask .review-cloze-row{
  display:grid!important;
  grid-template-columns:34px minmax(0,1fr)!important;
  gap:12px!important;
  align-items:center!important;
  background:transparent!important;
  border:0!important;
  border-top:1px solid #e2e7f1!important;
  border-radius:0!important;
  padding:16px 2px!important;
}
#reviewClozeTask .review-cloze-row:last-child{border-bottom:1px solid #e2e7f1!important;}
#reviewClozeTask .review-cloze-num-v9{
  width:30px!important;height:30px!important;
  background:#eef2ff!important;
  border:1px solid #d7def7!important;
  color:var(--navy)!important;
}
#reviewClozeTask .review-cloze-main-v9{min-width:0!important;}
#reviewClozeTask .review-cloze-sentence-v9{
  display:block!important;
  width:100%!important;
  font-size:21px!important;
  line-height:1.55!important;
  color:var(--navy)!important;
  white-space:nowrap!important;
  overflow:visible!important;
  padding:0!important;
}
#reviewClozeTask .review-drop{
  min-width:86px!important;
  min-height:38px!important;
  margin:0 7px!important;
  vertical-align:middle!important;
  background:#fff!important;
  border:2px dashed #9fafe1!important;
}
#reviewClozeTask .review-row-feedback{
  grid-column:2!important;
  padding-left:0!important;
  margin-top:4px!important;
  min-height:19px!important;
}

/* Dialogue order: one full sentence per draggable row, quiet uniform styling. */
#reviewOrderTask .review-order-list{
  display:block!important;
  background:transparent!important;
  border:0!important;
  padding:0!important;
  border-radius:0!important;
}
#reviewOrderTask .review-order-item{
  display:grid!important;
  grid-template-columns:36px minmax(0,1fr) 26px!important;
  gap:12px!important;
  align-items:center!important;
  min-height:64px!important;
  background:#fff!important;
  border:1px solid #dde4f1!important;
  border-radius:14px!important;
  padding:13px 14px!important;
  margin-bottom:9px!important;
}
#reviewOrderTask .review-order-item:last-child{margin-bottom:0!important;}
#reviewOrderTask .review-order-code{
  width:32px!important;height:32px!important;
  background:#eef2ff!important;
  color:var(--navy)!important;
  border:1px solid #d7def7!important;
}
#reviewOrderTask .review-order-cn{
  display:block!important;
  width:100%!important;
  font-size:20px!important;
  line-height:1.45!important;
  white-space:nowrap!important;
  overflow:visible!important;
  padding:0!important;
}
#reviewOrderTask .review-order-py{
  display:none!important;
  margin-top:4px!important;
  font-size:13px!important;
  line-height:1.4!important;
  white-space:nowrap!important;
}
#reviewOrderTask.show-review-pinyin .review-order-py{display:block!important;}
#reviewOrderTask .review-order-position{justify-content:center!important;}
#reviewOrderTask .review-order-handle{font-size:18px!important;color:#919bb2!important;}

/* Keep controls from squeezing instructional copy. */
#speaking-review .compact-switch{flex:0 0 auto!important;}

@media(max-width:760px){
  .section-desc-en-v11{display:block;margin-left:0;margin-top:3px}
  #reviewClozeTask .review-cloze-sentence-v9,
  #reviewOrderTask .review-order-cn,
  #reviewOrderTask .review-order-py{white-space:normal!important;}
  #speaking-review .review-task-card{padding:18px!important;}
  #speaking-review .review-task-head{align-items:flex-start!important;}
}


/* ===== v12 final visual + interaction corrections ===== */
/* Vocabulary default state: absolutely no green. Green only means learned/reviewed/success. */
#vocab .v7-vocab-card:not(.reviewed),
#vocab .v7-vocab-card:nth-child(4n+1):not(.reviewed),
#vocab .v7-vocab-card:nth-child(4n+2):not(.reviewed),
#vocab .v7-vocab-card:nth-child(4n+3):not(.reviewed),
#vocab .v7-vocab-card:nth-child(4n):not(.reviewed){
  background:#f6f8ff!important;
  border-color:#d9e2f5!important;
  color:var(--navy)!important;
}
#vocab .v7-vocab-card:not(.reviewed):hover,
#vocab .v7-vocab-card:nth-child(4n+1):not(.reviewed):hover,
#vocab .v7-vocab-card:nth-child(4n+2):not(.reviewed):hover,
#vocab .v7-vocab-card:nth-child(4n+3):not(.reviewed):hover,
#vocab .v7-vocab-card:nth-child(4n):not(.reviewed):hover{
  background:#eef3ff!important;
  border-color:#b9c9ee!important;
}
#vocab .v7-vocab-card.reviewed{background:#eaf9f5!important;border-color:#9fdfd0!important}

/* Vocabulary matching: neutral/logo palette until success disappears. */
#vocabMatchV8 .vocab-match-item-v8{background:#fff!important;color:var(--navy)!important;border-color:#d7e0f0!important}
#vocabMatchV8 .vocab-match-item-v8:hover,#vocabMatchV8 .vocab-match-item-v8.selected{background:#eef4ff!important;color:var(--navy)!important;border-color:#9fb4e8!important}

/* Review: one calm field per task. Options only get stronger fill. */
#reviewClozeTask,#reviewOrderTask{background:#f4f7ff!important;border:1px solid #d7e1f5!important;box-shadow:none!important}
#reviewClozeTask .review-word-bank{background:transparent!important;border:0!important;padding:0!important}
#reviewClozeTask .review-drag-word{
  background:#e8f8f3!important;
  color:var(--blue)!important;
  border:1px solid #c6e9df!important;
  box-shadow:none!important;
  font-weight:950!important;
  min-width:88px!important;
}
#reviewClozeTask .review-drag-word:hover{background:#def4ed!important;border-color:#a9ddd0!important}
#reviewClozeTask .review-drag-word .review-py{color:#315fc7!important}
#reviewClozeTask .review-cloze-list,#reviewOrderTask .review-order-list{background:#fff!important;border-color:#dfe6f3!important}
#reviewClozeTask .review-cloze-row,#reviewOrderTask .review-order-item{background:#fff!important}

/* Keep all review sentences intact and easy to scan. */
#reviewClozeTask .review-cloze-sentence-v9,#reviewOrderTask .review-order-cn{white-space:nowrap!important;overflow:visible!important;line-height:1.55!important}
#reviewClozeTask .review-cloze-row{grid-template-columns:34px minmax(0,1fr)!important;align-items:center!important}
#reviewOrderTask .review-order-item{grid-template-columns:36px minmax(0,1fr) 30px!important;align-items:center!important}
#reviewOrderTask .review-order-code{background:#eef3ff!important;color:var(--navy)!important;border-color:#d5e0f6!important}
#reviewOrderTask .review-order-position{justify-content:center!important}
#reviewOrderTask .review-order-handle{color:#8c96ad!important}
#reviewOrderTask .order-speaker-v9{display:none!important}

/* Instructions: Chinese one natural line + English one natural line on desktop. */
.review-instruction{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:4px!important}
.review-instruction .lookup-token{display:inline!important;white-space:normal!important}
.review-instruction-cn-v11,.review-instruction-en-v11{display:block!important;width:100%!important;white-space:normal!important}

/* Pinyin IME-style virtual keyboard */
.hanzi-keyboard-v9{display:none!important}
.pinyin-keyboard-v12{display:none;margin:10px 0 16px;padding:12px 13px;border:1px solid #d9e2f1;border-radius:16px;background:#f7f9ff;box-shadow:0 8px 20px rgba(25,33,101,.06);max-width:620px}
.pinyin-keyboard-v12.show{display:block}
.pinyin-keyboard-title-v12{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;font-weight:900;color:var(--navy);margin-bottom:9px}
.pinyin-compose-v12{display:flex;align-items:center;gap:8px;min-height:38px;padding:8px 10px;border:1px solid #dce4f2;border-radius:11px;background:#fff;margin-bottom:8px}
.pinyin-compose-label-v12{font-size:11px;color:#7a849f;font-weight:850;white-space:nowrap}
.pinyin-compose-text-v12{font-size:16px;color:var(--blue);font-weight:900;letter-spacing:.02em;min-width:70px}
.pinyin-candidates-v12{display:flex;gap:7px;flex-wrap:wrap;min-height:34px;margin-bottom:9px}
.pinyin-candidate-v12{border:1px solid #cfdaf0;border-radius:10px;background:#fff;color:var(--navy);padding:7px 12px;font-weight:950;cursor:pointer}
.pinyin-candidate-v12:hover{background:#eef4ff;border-color:#aebfe8}
.pinyin-candidate-note-v12{font-size:11px;color:#8a93a8;align-self:center}
.pinyin-rows-v12{display:grid;gap:6px}
.pinyin-row-v12{display:flex;gap:6px;justify-content:center}
.pinyin-key-v12{width:42px;height:38px;border:1px solid #d7dfed;border-radius:10px;background:#fff;color:var(--navy);font-weight:950;cursor:pointer;box-shadow:0 2px 5px rgba(25,33,101,.04)}
.pinyin-key-v12:hover{background:#eef4ff;border-color:#b3c2e7}
.pinyin-key-v12.action{width:auto;min-width:70px;padding:0 12px;color:#5d6785}
@media(max-width:700px){
  #reviewClozeTask .review-cloze-sentence-v9,#reviewOrderTask .review-order-cn{white-space:normal!important}
  .pinyin-key-v12{width:32px;height:36px;font-size:12px}.pinyin-row-v12{gap:4px}
}


/* ===== v13: calmer design, horizontal learning path, atomic lookup, meaningful transfer ===== */
/* Main layout: full-width content with a horizontal sticky learning path. */
.layout{display:block!important;margin-top:18px!important}
.content{width:100%!important;min-width:0!important}
.lesson-flow-nav-v13{
  position:sticky!important;top:88px!important;z-index:24!important;
  width:100%!important;display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:6px!important;margin:0 0 20px!important;padding:8px!important;
  background:rgba(255,255,255,.96)!important;border:1px solid #e1e6f2!important;border-radius:20px!important;
  box-shadow:0 10px 28px rgba(25,33,101,.07)!important;backdrop-filter:blur(16px)!important;
}
.lesson-flow-nav-v13 .side-title,.lesson-flow-nav-v13 .nav-icon{display:none!important}
.lesson-flow-nav-v13 .nav-item{
  position:relative!important;display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;
  align-items:center!important;gap:9px!important;min-height:66px!important;padding:10px 12px!important;
  border-radius:14px!important;background:transparent!important;color:#68718e!important;
  border:1px solid transparent!important;transition:.18s ease!important;
}
.lesson-flow-nav-v13 .nav-item:hover{background:#f5f7fd!important;color:var(--navy)!important}
.lesson-flow-nav-v13 .nav-item.active-section{background:#eef3ff!important;border-color:#d6e1f6!important;color:var(--navy)!important}
.lesson-flow-nav-v13 .nav-item.done{background:transparent!important;color:var(--navy)!important}
.lesson-flow-nav-v13 .nav-item.done.active-section{background:#eef3ff!important}
.lesson-flow-nav-v13 .nav-num-new{font-size:15px!important;font-weight:950!important;color:var(--blue)!important;line-height:1!important}
.lesson-flow-nav-v13 .nav-label{display:flex!important;flex-direction:column!important;gap:2px!important;min-width:0!important}
.lesson-flow-nav-v13 .nav-cn{font-size:14px!important;line-height:1.25!important;font-weight:950!important;color:inherit!important;white-space:nowrap!important}
.lesson-flow-nav-v13 .nav-en{font-size:10.5px!important;line-height:1.2!important;font-weight:750!important;color:#9299ad!important;white-space:nowrap!important}
.lesson-flow-nav-v13 .nav-check{position:absolute!important;right:8px!important;top:7px!important;margin:0!important;font-size:12px!important;color:var(--teal)!important;opacity:0!important}
.lesson-flow-nav-v13 .nav-item.done .nav-check{opacity:1!important}
@media(max-width:1050px){
  .lesson-flow-nav-v13{display:flex!important;overflow-x:auto!important;scrollbar-width:thin!important;top:82px!important}
  .lesson-flow-nav-v13 .nav-item{flex:0 0 150px!important}
}
@media(max-width:640px){.lesson-flow-nav-v13{top:72px!important;margin-bottom:14px!important}.lesson-flow-nav-v13 .nav-item{flex-basis:138px!important;min-height:60px!important}.lesson-flow-nav-v13 .nav-cn{font-size:13px!important}}

/* Atomic lookup: code is segmented; Chinese typography remains continuous. */
.lookup-token{display:inline!important;padding:0!important;margin:0!important;border-radius:4px!important;line-height:inherit!important;letter-spacing:inherit!important;word-spacing:0!important;vertical-align:baseline!important}
.lookup-token:hover{background:#edf3ff!important;box-shadow:0 0 0 1px rgba(38,96,229,.13)!important}
.lookup-token.active{background:#e8efff!important;color:inherit!important;box-shadow:0 0 0 1px rgba(38,96,229,.22)!important}
.reading1-cn,.q-title,.option-copy,.listen-cn-v8,.review-cloze-sentence-v9,.info-q-title-v13{word-spacing:0!important}
.lookup-pop-v7{min-width:160px!important;max-width:245px!important;padding:11px 13px!important;border-radius:14px!important}
.lookup-pop-v7 b{font-size:22px!important}.lookup-pop-v7 .py{font-size:14px!important}.lookup-pop-v7 .en{font-size:12.5px!important}

/* Keep green exclusively for success/completion states. Decorative UI stays navy/blue/neutral. */
.switch-control[aria-pressed="true"] .switch-track{background:var(--blue)!important}
.scenario-avatar-v9,.scenario-card-v10:nth-child(even) .scenario-avatar-v9{background:linear-gradient(135deg,var(--navy),var(--blue))!important}
.scenario-status-v9.yes{background:#eef3ff!important;color:var(--blue)!important;border-color:#d4def5!important}
.scenario-status-v9.no{background:#f2f4f8!important;color:#727b92!important;border-color:#e0e4ec!important}
.review-task-num{background:#eef3ff!important;color:var(--blue)!important}

/* Transfer task: calm, readable, and not copied from the main dialogue. */
#reviewOrderTask.info-challenge-v13{background:#f6f8ff!important;border:1px solid #dbe3f3!important}
.info-table-v13{overflow:hidden;border:1px solid #dde4f1;border-radius:16px;background:#fff;margin:8px 0 16px}
.info-head-v13,.info-row-v13{display:grid;grid-template-columns:1.05fr 1fr 1fr;gap:0;align-items:stretch}
.info-head-v13{background:#eef3ff;color:var(--navy);font-size:12px;font-weight:950}
.info-head-v13>span,.info-row-v13>span{padding:11px 13px;border-right:1px solid #e7ebf4;display:flex;align-items:center;gap:8px;min-width:0}
.info-head-v13>span:last-child,.info-row-v13>span:last-child{border-right:0}
.info-row-v13{border-top:1px solid #edf0f6;color:var(--navy)}
.info-row-v13 b{font-size:16px}.info-row-v13 small{display:block;color:var(--blue);font-size:11px;font-weight:800;margin-left:3px}
.info-row-v13 em{font-style:normal;margin-left:auto;border-radius:999px;padding:4px 7px;font-size:10px;font-weight:900;white-space:nowrap}
.cue-yes-v13{background:#eef3ff;color:var(--blue)}.cue-no-v13{background:#f2f4f8;color:#737c92}
.info-questions-v13{display:grid;gap:10px}.info-q-v13{padding:14px 15px;border:1px solid #e1e6f0;border-radius:15px;background:#fff}
.info-q-title-v13{font-size:16px;font-weight:950;color:var(--navy);line-height:1.5}.info-q-title-v13>span{margin-left:9px;color:var(--blue);font-size:12px;font-weight:800;white-space:nowrap}
.info-options-v13{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.info-options-v13 label{display:flex;align-items:center;gap:6px;padding:9px 11px;border:1px solid #dfe4ef;border-radius:11px;background:#fbfcff;color:var(--navy);font-weight:850;cursor:pointer}.info-options-v13 label:hover{background:#eef3ff;border-color:#bdcbea}.info-options-v13 input{accent-color:var(--blue)}

/* Situation challenge: quiet two-column card. */
.situation-challenge-v13{background:#fff!important;border:1px solid #dfe5f0!important}
.situation-grid-v13{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr);gap:16px;align-items:stretch}
.situation-copy-v13,.situation-model-v13{border-radius:16px;padding:17px 18px}
.situation-copy-v13{background:#f7f9fd;border:1px solid #e4e8f1;color:var(--navy)}
.situation-copy-v13>b{font-size:17px}.situation-copy-v13>span{display:block;color:#7b849c;font-size:12px;margin-top:3px}.situation-copy-v13 ol{margin:12px 0 0;padding-left:21px;display:grid;gap:8px}.situation-copy-v13 li{font-weight:850}.situation-copy-v13 li span{display:block;color:#838ca3;font-size:11px;font-weight:600;margin-top:2px}
.situation-model-v13{background:#eef3ff;border:1px solid #d9e3f6;color:var(--navy)}.model-label-v13{font-size:11px;font-weight:950;color:var(--blue);margin-bottom:10px}.situation-model-v13 p{margin:7px 0;font-size:17px;font-weight:900}.situation-done-v13{margin-top:14px;background:var(--navy)!important;color:#fff!important;border:0!important}
@media(max-width:760px){.info-head-v13,.info-row-v13{grid-template-columns:1fr 1fr 1fr}.info-head-v13>span,.info-row-v13>span{padding:9px 8px}.info-q-title-v13>span{display:block;margin:3px 0 0}.situation-grid-v13{grid-template-columns:1fr}}


/* ===== v14: cleaner hierarchy + six exact modules ===== */
.lesson-flow-nav-v14{
  position:relative!important;top:auto!important;z-index:4!important;display:flex!important;align-items:stretch!important;
  gap:0!important;padding:0!important;margin:0 0 24px!important;overflow:hidden!important;
  background:#fff!important;border:1px solid #e1e6f2!important;border-radius:18px!important;box-shadow:none!important;backdrop-filter:none!important;
}
.lesson-flow-nav-v14 .nav-item{
  flex:1 1 0!important;min-width:0!important;min-height:58px!important;padding:11px 12px!important;border:0!important;border-right:1px solid #edf0f6!important;
  border-radius:0!important;background:#fff!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;color:#5f6887!important;
}
.lesson-flow-nav-v14 .nav-item:last-child{border-right:0!important}
.lesson-flow-nav-v14 .nav-item:hover{background:#f8faff!important;color:var(--navy)!important}
.lesson-flow-nav-v14 .nav-item.active-section{background:#f0f4ff!important;color:var(--navy)!important;box-shadow:inset 0 -3px 0 var(--blue)!important}
.lesson-flow-nav-v14 .nav-item.done{background:#fff!important;color:#5f6887!important}
.lesson-flow-nav-v14 .nav-item.done.active-section{background:#f0f4ff!important;color:var(--navy)!important}
.lesson-flow-nav-v14 .nav-num-new{font-size:14px!important;color:var(--blue)!important;flex:0 0 auto!important}
.lesson-flow-nav-v14 .nav-label{display:flex!important;align-items:baseline!important;flex-direction:row!important;gap:6px!important;min-width:0!important}
.lesson-flow-nav-v14 .nav-cn{font-size:15px!important;font-weight:950!important;line-height:1.2!important;white-space:nowrap!important}
.lesson-flow-nav-v14 .nav-en{font-size:10.5px!important;font-weight:750!important;color:#959caf!important;white-space:nowrap!important}
.lesson-flow-nav-v14 .nav-check{display:none!important}
@media(max-width:1050px){.lesson-flow-nav-v14{overflow-x:auto!important;justify-content:flex-start!important}.lesson-flow-nav-v14 .nav-item{flex:0 0 155px!important}.lesson-flow-nav-v14 .nav-label{flex-direction:column!important;align-items:flex-start!important;gap:1px!important}}

/* Reading script selector */
.script-toggle-v14{display:inline-flex;align-items:center;padding:4px;border:1px solid #d7deee;border-radius:13px;background:#f6f8fc;gap:3px}
.script-btn-v14{border:0;background:transparent;color:#59627f;border-radius:10px;padding:8px 11px;font-weight:950;cursor:pointer;line-height:1.1}
.script-btn-v14 span{font-size:10px;font-weight:750;color:#8b93a8;margin-left:4px}
.script-btn-v14.active{background:var(--navy);color:#fff;box-shadow:0 4px 10px rgba(25,33,101,.14)}
.script-btn-v14.active span{color:#dbe3ff}

/* Vocabulary: larger typography, white cards; practice and grammar use separate surfaces. */
#vocab .v7-vocab-grid{gap:16px!important}
#vocab .v7-vocab-card:not(.reviewed){background:#fff!important;border:1px solid #cfd9ef!important;border-top:3px solid #bfd0f4!important;min-height:150px!important;padding:22px 20px!important;box-shadow:0 8px 22px rgba(25,33,101,.045)!important}
#vocab .v7-vocab-card:not(.reviewed):hover{background:#fbfcff!important;border-color:#aec0e8!important;border-top-color:var(--blue)!important}
#vocab .vocab-cn{font-size:32px!important;line-height:1.15!important;margin:0!important}
#vocab .vocab-py{font-size:17px!important;line-height:1.35!important;margin-top:10px!important;color:var(--blue)!important}
#vocab .vocab-en{font-size:15.5px!important;line-height:1.45!important;margin-top:7px!important;color:#69728f!important}
#vocabMatchV8{background:#f6f8ff!important;border:1px solid #dbe3f3!important;box-shadow:none!important}
#vocabMatchV8 .vocab-match-item-v8{font-size:16px!important;min-height:56px!important;padding:11px 14px!important;background:#fff!important}
#grammar .grammar-card-v7{background:#fff!important;border:1px solid #dbe1ec!important;box-shadow:none!important}
#grammar .grammar-card-v7 summary{background:#fafbfe!important}
#grammar .grammar-card-v7[open] summary{background:#f1f5ff!important}
#grammar .grammar-body-v7{background:#fff!important}

/* Reading practice: use the available space and increase legibility. */
#reading-practice .question{padding:24px 26px!important;border-radius:20px!important}
#readingQuiz .q-title{font-size:28px!important;line-height:1.45!important;margin-bottom:18px!important}
#readingQuiz .option{font-size:24px!important;line-height:1.45!important;padding:17px 19px!important;min-height:64px!important}
#readingQuiz .question.show-local-pinyin .q-title .support-py{font-size:17px!important;margin-left:18px!important}
#readingQuiz .question.show-local-pinyin .option-copy .support-py{font-size:15.5px!important}

/* Listening support is a reveal; Q1 Hanzi/Pinyin shows the complete sentence including the answer. */
#listening .listen-cn-v8{font-size:23px!important;font-weight:900!important;line-height:1.55!important}
#listening .listen-py-v8{font-size:15px!important;line-height:1.5!important}

/* Expression section: calm, distinct cards. */
.expression-section-v14 .expression-stack-v14{display:grid;gap:18px}
.expression-section-v14 .expression-card-v14{background:#fff!important;border:1px solid #dce3f0!important;box-shadow:none!important;padding:24px!important}
.expression-section-v14 .review-task-num{background:#eef3ff!important;color:var(--blue)!important;border:1px solid #d8e3f8!important}
/* Word bank only: explicit user override – all four options green, blue text. */
#reviewClozeTask{background:#f8faff!important}
#reviewClozeTask .review-word-bank{background:transparent!important;padding:4px 0 10px!important;gap:10px!important}
#reviewClozeTask .review-drag-word{background:#e6f7f2!important;border:1px solid #bfe6db!important;color:var(--blue)!important;min-width:92px!important;font-size:18px!important;padding:11px 16px!important;box-shadow:none!important}
#reviewClozeTask .review-drag-word:hover{background:#dcf3ec!important;border-color:#9fd9ca!important}
#reviewClozeTask .review-cloze-list{background:#fff!important;border:1px solid #e0e6f2!important;border-radius:17px!important;padding:4px 18px!important}
#reviewClozeTask .review-cloze-row{display:grid!important;grid-template-columns:36px minmax(0,1fr)!important;gap:12px!important;align-items:center!important;min-height:82px!important;padding:12px 0!important;border:0!important;border-bottom:1px solid #edf0f6!important;background:#fff!important}
#reviewClozeTask .review-cloze-row:last-child{border-bottom:0!important}
#reviewClozeTask .review-cloze-num-v9{align-self:center!important;margin:0!important;width:30px!important;height:30px!important;background:#eef3ff!important;color:var(--blue)!important;border:1px solid #d5e1f7!important}
#reviewClozeTask .review-cloze-main-v9{align-self:center!important}
#reviewClozeTask .review-cloze-sentence-v9{font-size:22px!important;line-height:1.5!important;white-space:nowrap!important;overflow:visible!important}
#reviewClozeTask .review-row-feedback{grid-column:auto!important;padding-left:0!important}

/* Dialogue practice */
.dialogue-shell-v14{border:1px solid #dde4f1;border-radius:18px;overflow:hidden;background:#fbfcff}
.dialogue-line-v14,.dialogue-choice-row-v14{display:grid;grid-template-columns:86px minmax(0,1fr);gap:14px;align-items:start;padding:18px 20px;border-bottom:1px solid #e8ecf4}
.dialogue-shell-v14>*:last-child{border-bottom:0}
.dialogue-name-v14{font-size:14px;font-weight:950;color:var(--navy);padding-top:3px}
.dialogue-name-v14.you-v14{color:var(--blue)}
.dialogue-line-v14 b{display:block;font-size:22px;color:var(--navy);line-height:1.45}.dialogue-line-v14 small{display:block;font-size:13px;color:var(--blue);margin-top:4px}
.speaker-blue-v14{border-left:4px solid var(--blue)}.speaker-green-v14{border-left:4px solid var(--teal)}
.dialogue-choice-row-v14{background:#fff}
.dialogue-choice-options-v14{display:flex;flex-wrap:wrap;gap:9px}
.dialogue-choice-options-v14 button{border:1px solid #d8e0ee;border-radius:12px;background:#fff;color:var(--navy);padding:11px 14px;font-size:17px;font-weight:850;cursor:pointer;text-align:left}
.dialogue-choice-options-v14 button:hover{background:#f2f6ff;border-color:#b8c8eb}.dialogue-choice-options-v14 button.correct{background:#eaf9f5;border-color:#9edbcb;color:#157b68}.dialogue-choice-options-v14 button.wrong{background:#fff1f1;border-color:#e8a8a8;color:#b44444;animation:matchShake .22s linear 0s 2}
.dialogue-feedback-v14{grid-column:2;min-height:20px;margin-top:8px;font-size:13px;font-weight:850;color:#59617d}
/* The per-question action row is a new grid child added after feedback; without an
   explicit column it would auto-place into column 1 (the narrow speaker-label column)
   instead of spanning the row, which was pushing the options/feedback layout off. */
#dialoguePracticeV14 .dialogue-choice-row-v14 .per-question-actions-v76{grid-column:1/-1}

/* Speaking practice */
.speaking-teacher-prompt-v14{display:flex;gap:14px;align-items:flex-start;background:#f1f5ff;border:1px solid #dbe5f8;border-radius:17px;padding:16px 18px;margin-bottom:14px}
.teacher-badge-v14{flex:0 0 auto;background:var(--navy);color:#fff;border-radius:999px;padding:7px 11px;font-size:12px;font-weight:900}
.speaking-teacher-prompt-v14 b,.speaking-teacher-prompt-v14 span{display:block}.speaking-teacher-prompt-v14 span{font-size:12px;color:#76809b;margin-top:2px}.speaking-teacher-prompt-v14 p{margin:8px 0 0;font-size:20px;font-weight:950;color:var(--navy)}
.speaking-instruction-v14{margin-bottom:15px}.speaking-instruction-v14 b{display:block;color:var(--navy);font-size:16px}.speaking-instruction-v14 span{display:block;color:#78819b;font-size:13px;margin-top:4px}
.speak-bank-grid-v14{display:grid;grid-template-columns:1fr 1fr;gap:16px}.speak-bank-v14{border:1px solid #e0e6f1;border-radius:18px;padding:16px;background:#fbfcff}.speak-bank-v14 h4{margin:0 0 12px;color:var(--navy);font-size:17px}
.speak-items-v14{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.speak-item-v14{position:relative;min-height:132px;border:1px solid #dce3ef;border-radius:15px;background:#fff;padding:13px 10px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.speak-item-icon-v1{width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:32px;line-height:1}
/* 2.37：「？」开放位只留图形，图形放大到 64px（老师 2026-09-28 定）。
   卡片高度跟别的卡对齐 —— 一排里高矮不齐比多一个文字问号更难看。 */
.speak-item-open-v37{justify-content:center;align-items:center}
.speak-item-open-v37 .speak-item-icon-v1{width:64px;height:64px}
@media(max-width:650px){.speak-item-open-v37 .speak-item-icon-v1{width:54px;height:54px}}
.speak-item-icon-v1 svg,.speak-item-icon-v1 img{width:100%;height:100%}.food-emoji-v14{font-size:30px}.speak-item-v14 b{font-size:19px;color:var(--navy)}.speak-item-v14 button{border:1px solid #d8e2f3;border-radius:999px;background:#f5f8ff;color:var(--blue);font-size:10.5px;font-weight:900;padding:5px 8px;cursor:pointer}.speak-item-v14 small{display:none;font-size:12px;color:var(--blue);font-weight:800}.speak-item-v14.show-py small{display:block}.speak-item-v14.show-py button{background:#eaf1ff}
.speaking-model-v14{margin-top:15px;border-radius:15px;background:#f7f9fd;padding:14px 16px;color:var(--navy)}.speaking-model-v14 b{font-size:13px}.speaking-model-v14 p{margin:7px 0 0;font-size:20px;font-weight:950}
.speaking-done-v14{margin-top:14px;border:0;border-radius:13px;background:var(--navy);color:#fff;padding:11px 16px;font-weight:900;cursor:pointer}.speaking-done-v14.done{background:var(--teal)}
@media(max-width:850px){.speak-bank-grid-v14{grid-template-columns:1fr}.speak-items-v14{grid-template-columns:repeat(2,minmax(0,1fr))}.dialogue-line-v14,.dialogue-choice-row-v14{grid-template-columns:1fr}.dialogue-feedback-v14{grid-column:1}.script-toggle-v14{width:100%;justify-content:center}}
@media(max-width:700px){#readingQuiz .q-title{font-size:23px!important}#readingQuiz .option{font-size:20px!important}#reviewClozeTask .review-cloze-sentence-v9{font-size:19px!important;white-space:normal!important}}


/* ===== v15: professional online Chinese classroom polish ===== */
/* 1) Sticky, calm learning navigation. */
.lesson-flow-nav-v14{
  position:sticky!important;top:84px!important;z-index:27!important;
  margin:18px 0 26px!important;border-radius:16px!important;
  background:rgba(255,255,255,.97)!important;backdrop-filter:blur(16px)!important;
  border:1px solid #e3e8f2!important;box-shadow:0 8px 24px rgba(25,33,101,.075)!important;
}
.lesson-flow-nav-v14 .nav-item{min-height:64px!important;padding:10px 9px!important;gap:9px!important}
.lesson-flow-nav-v14 .nav-label{flex-direction:column!important;align-items:flex-start!important;gap:2px!important}
.lesson-flow-nav-v14 .nav-cn{font-size:14.5px!important}.lesson-flow-nav-v14 .nav-en{font-size:10px!important}
.lesson-flow-nav-v14 .nav-item.active-section{background:#f2f5ff!important;box-shadow:inset 0 -3px 0 var(--blue)!important}
.section{scroll-margin-top:165px!important}
@media(max-width:640px){.lesson-flow-nav-v14{top:68px!important}.lesson-flow-nav-v14 .nav-item{flex:0 0 145px!important}.section{scroll-margin-top:145px!important}}

/* 2) Vocabulary: exactly five across on desktop, two rows, compact but readable. */
#vocab .v7-vocab-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:12px!important}
#vocab .v7-vocab-card:not(.reviewed){min-height:112px!important;padding:15px 16px!important;border-top-width:2px!important;border-radius:17px!important;box-shadow:none!important}
#vocab .vocab-cn{font-size:28px!important;line-height:1.05!important}
#vocab .vocab-py{font-size:15.5px!important;line-height:1.25!important;margin-top:7px!important}
#vocab .vocab-en{font-size:14px!important;line-height:1.35!important;margin-top:4px!important}
@media(max-width:1100px){#vocab .v7-vocab-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(max-width:700px){#vocab .v7-vocab-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}

/* 3) Vocabulary Match gets its own soft-green practice field; columns are intentionally narrower. */
#vocabMatchV8{background:#eef9f6!important;border:1px solid #cfe9e2!important;padding:20px 22px!important;border-radius:20px!important}
#vocabMatchV8 .vocab-practice-head-v8{margin-bottom:14px!important}
#vocabMatchV8 .vocab-match-board-v8{grid-template-columns:repeat(3,minmax(180px,245px))!important;justify-content:center!important;gap:16px!important;max-width:820px!important;margin:0 auto!important}
#vocabMatchV8 .vocab-match-item-v8{min-height:45px!important;padding:9px 12px!important;font-size:14.5px!important;border-radius:12px!important;background:#fff!important}
#vocabMatchV8 .vocab-match-col-title-v10{text-align:center!important;color:#167b68!important;font-size:12px!important}
#vocabMatchV8 .vocab-match-reset-v8{padding:8px 11px!important}
@media(max-width:760px){#vocabMatchV8 .vocab-match-board-v8{grid-template-columns:repeat(3,170px)!important;justify-content:start!important;overflow-x:auto!important;max-width:none!important}}

/* 4) Grammar explanations: both languages use the same clear teal language. */
#grammar .grammar-explain-pair-v8 p{background:#eef9f6!important;border:1px solid #d5eee7!important;color:#167b68!important}
#grammar .grammar-explain-cn-v8{font-weight:850!important}#grammar .grammar-explain-en-v8{font-weight:700!important}
#grammar .grammar-example-row-v8{padding:12px 14px!important}

/* 5) Reading practice typography: classroom-screen readable. */
#reading-practice .section-desc{font-size:16px!important;line-height:1.65!important}
#readingQuiz .question{padding:25px 28px!important;margin-bottom:16px!important}
#readingQuiz .q-title{font-size:30px!important;line-height:1.42!important}
#readingQuiz .option{font-size:25px!important;min-height:66px!important;padding:17px 20px!important}
#readingQuiz .feedback{font-size:15px!important;margin-top:12px!important}
#readingQuiz .question.show-q-pinyin .q-title .support-py{font-size:17px!important}
#readingQuiz .question.show-q-pinyin .option-copy .support-py{font-size:16px!important}

/* 6) Listening: answer choices are always visible; Hanzi toggle reveals the stem/support sentence. */
#listening .listen-options-v8 .listen-option-cn-v8{display:block!important;font-size:20px!important;line-height:1.35!important}
#listening .listen-options-v8 .option{min-height:58px!important;padding:13px 16px!important}
#listening .listen-option-py-v8{font-size:13px!important}
#listening .question-audio-v15{width:38px;height:38px;border:1px solid #cfe9e2;border-radius:50%;background:#eef9f6;color:#16876f;font-weight:950;cursor:pointer;flex:0 0 38px}
#listening .question-audio-v15:hover{background:#e2f5ef}

/* 7) Word bank: all four draggable options are the same green; sentence rows stay neutral. */
#reviewClozeTask .review-drag-word{background:#e2f6f0!important;border:1px solid #b9e1d6!important;color:var(--blue)!important}
#reviewClozeTask .review-drag-word:hover{background:#d6f0e8!important;border-color:#96d3c3!important}
#reviewClozeTask .review-cloze-row{grid-template-columns:36px minmax(0,1fr)!important;align-items:center!important}
#reviewClozeTask .review-cloze-num-v9{align-self:center!important}
#reviewClozeTask .review-cloze-main-v9{display:flex!important;align-items:center!important;min-height:48px!important}

/* 8) Dialogue practice: two independent questions, each with its own Pinyin control. */
.dialogue-question-stack-v15{display:grid;gap:14px}
.dialogue-question-v15{border:1px solid #dfe5ef;border-radius:18px;background:#fbfcff;overflow:hidden}
.dialogue-question-head-v15{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;background:#f5f7fc;border-bottom:1px solid #e7ebf2}
.dialogue-q-num-v15{display:inline-flex;width:30px;height:30px;border-radius:10px;align-items:center;justify-content:center;background:#eaf0ff;color:var(--blue);font-weight:950}
.dialogue-question-v15 .dialogue-line-v14,.dialogue-question-v15 .dialogue-choice-row-v14{border-radius:0!important;border-left:0!important;border-right:0!important;padding:16px 18px!important}
.dialogue-question-v15 .dialogue-choice-row-v14{border-bottom:0!important}
.dialogue-py-v15,.dialogue-option-py-v15{display:none!important;color:var(--blue)!important;font-size:12.5px!important;line-height:1.45!important;margin-top:4px!important;font-weight:750!important}
.dialogue-question-v15.show-dialogue-pinyin .dialogue-py-v15,.dialogue-question-v15.show-dialogue-pinyin .dialogue-option-py-v15{display:block!important}
.dialogue-choice-options-v14 button{display:flex!important;flex-direction:column!important;align-items:flex-start!important;min-width:185px!important;padding:11px 14px!important;background:#fff!important}
.dialogue-choice-options-v14 button>span{font-size:18px!important;font-weight:900!important}
.dialogue-choice-options-v14 button.correct{background:#eaf9f5!important}.dialogue-choice-options-v14 button.wrong{background:#fff1f1!important}

/* 9) Speaking practice: prompt lives in one coherent task box; no loose/garbled text. */
.speaking-task-box-v15{border:1px solid #d8e3f5;border-radius:18px;background:#f4f7ff;padding:18px;margin-bottom:16px}
.speaking-task-title-v15{display:flex;align-items:baseline;gap:10px;margin-bottom:14px}.speaking-task-title-v15 b{font-size:20px;color:var(--navy)}.speaking-task-title-v15 span{font-size:12px;color:#7b85a0;font-weight:750}
.speaking-round-v15{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;padding:14px 0;border-top:1px solid #dfe6f4}.speaking-round-v15:first-of-type{border-top:0;padding-top:0}
.speaking-round-num-v15{width:32px;height:32px;border-radius:10px;background:#fff;color:var(--blue);border:1px solid #d4def1;display:flex;align-items:center;justify-content:center;font-weight:950}
.speaking-round-head-v15{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.speaking-round-head-v15 b{display:block;font-size:17px;color:var(--navy)}.speaking-round-head-v15 span{display:block;margin-top:2px;font-size:12.5px;color:#7c86a0}
.speaking-round-copy-v15 p{margin:9px 0 0;font-size:21px;font-weight:950;color:var(--navy);line-height:1.45}
.speaking-prompt-py-v15{display:none;color:var(--blue);font-size:13px;font-weight:750;margin-top:3px}.speaking-round-v15.show-speaking-prompt-py .speaking-prompt-py-v15{display:block}
.speaking-bank-note-v15{margin:2px 0 13px}.speaking-bank-note-v15 b{display:block;font-size:16px;color:var(--navy)}.speaking-bank-note-v15 span{display:block;font-size:12.5px;color:#7a849d;margin-top:3px}
.speak-bank-v14{background:#fff!important;padding:14px!important}.speak-items-v14{gap:8px!important}.speak-item-v14{min-height:118px!important;padding:11px 8px!important;box-shadow:none!important}.food-emoji-v14{font-size:27px!important}.speak-item-v14 b{font-size:18px!important}
.speaking-model-v15{margin-top:15px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;border:1px solid #dfe5f0;border-radius:15px;background:#fff;padding:14px 16px;color:var(--navy)}
.speaking-model-v15>div b{display:block;font-size:14px}.speaking-model-v15>div span{display:block;font-size:11.5px;color:#858ea5;margin-top:2px}.speaking-model-v15 p{grid-column:1/3;margin:3px 0 0;font-size:21px;font-weight:950}.speaking-model-py-v15{display:none;grid-column:1/3;color:var(--blue);font-size:13px;font-weight:750}.speaking-model-v15.show-model-py .speaking-model-py-v15{display:block}
@media(max-width:720px){.speaking-round-head-v15{flex-direction:column}.speaking-model-v15{grid-template-columns:1fr}.speaking-model-v15 p,.speaking-model-py-v15{grid-column:1}.dialogue-choice-options-v14 button{min-width:0!important;width:100%!important}}

/* 10) Overall visual hierarchy: fewer competing shadows, more breathing room, consistent surfaces. */
.content{gap:24px!important}.section{border-color:#e4e8f1!important;box-shadow:0 10px 28px rgba(25,33,101,.045)!important;padding:28px!important}.section-head{margin-bottom:20px!important}
.expression-section-v14 .expression-card-v14{border-radius:20px!important;padding:22px!important;background:#fff!important}


/* ===== v16: calmer graded-reading layout, breathing room, sticky teacher navigation ===== */

/* Overall page breathing room */
.app-shell{
  max-width:1360px!important;
  margin:0 auto!important;
  padding:32px clamp(20px,2.5vw,40px) 72px!important;
}
.content{gap:30px!important}
.section{
  padding:36px 40px!important;
  border-radius:24px!important;
  box-shadow:0 8px 24px rgba(25,33,101,.038)!important;
}
.section-head{margin-bottom:26px!important}
.review-task-stack,.expression-stack-v14{gap:22px!important}
.expression-section-v14 .expression-card-v14{padding:28px!important;border-radius:22px!important}
@media(max-width:760px){
  .app-shell{padding:16px 14px 48px!important}
  .section{padding:24px 20px!important}
}

/* Hero: remove learning outcomes; keep only compact reading metadata + progress. */
.hero{
  grid-template-columns:minmax(0,1fr) minmax(390px,.72fr)!important;
  padding:20px!important;
  gap:20px!important;
}
.hero-main,.hero-aside{
  height:242px!important;
  min-height:242px!important;
}
.hero-main{padding:28px 32px!important}
.hero-info-v16{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:24px!important;
}
.hero-info-v16 .overview-stats{
  width:100%!important;
  margin:0!important;
}
.hero-info-v16 .lesson-meta{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px!important;
}
.hero-info-v16 .meta-card{
  height:auto!important;
  min-height:74px!important;
  padding:12px 10px!important;
  background:#f7f9fd!important;
}
.hero-info-v16 .meta-num{font-size:25px!important}
.hero-info-v16 .meta-label{font-size:11px!important;line-height:1.35!important}
.hero-info-v16 .progress-wrap{margin-top:18px!important}
@media(max-width:980px){
  .hero{grid-template-columns:1fr!important}
  .hero-main,.hero-aside{height:auto!important;min-height:0!important}
}

/* Sticky learning path: teacher can always click it.
   The cover above it hides scrolling lesson content, so content never appears above the bar. */
.topbar{z-index:70!important}
.lesson-flow-nav-v14{
  position:sticky!important;
  top:84px!important;
  z-index:60!important;
  margin:22px 0 30px!important;
  overflow:visible!important;
  background:#fff!important;
  box-shadow:0 8px 24px rgba(25,33,101,.07)!important;
}
.lesson-flow-nav-v14::before{
  content:"";
  position:absolute;
  left:-100vw;
  right:-100vw;
  top:-86px;
  height:86px;
  background:#f9fbff;
  pointer-events:none;
}
.lesson-flow-nav-v14 .nav-item{position:relative;z-index:1}
.section{scroll-margin-top:176px!important}
@media(max-width:640px){
  .lesson-flow-nav-v14{top:70px!important;margin-bottom:24px!important}
  .lesson-flow-nav-v14::before{top:-72px;height:72px}
  .section{scroll-margin-top:158px!important}
}

/* Word Bank: every option uses one consistent soft-green practice color.
   Explicitly override legacy odd/even color alternation. */
#reviewClozeTask .review-word-bank .review-drag-word,
#reviewClozeTask .review-word-bank .review-drag-word:nth-child(odd),
#reviewClozeTask .review-word-bank .review-drag-word:nth-child(even){
  background:#e2f6f0!important;
  border:1px solid #b7e0d5!important;
  color:var(--blue)!important;
}
#reviewClozeTask .review-word-bank .review-drag-word:hover{
  background:#d7f1e9!important;
  border-color:#98d2c3!important;
}

/* Speaking task: one concise, bilingual instruction card instead of a two-step explanation. */
.speaking-task-box-v16{
  border:1px solid #d8e3f5;
  border-radius:18px;
  background:#f5f7fd;
  padding:20px 22px;
  margin-bottom:18px;
}
.speaking-task-title-v16{
  display:flex;align-items:baseline;gap:10px;margin-bottom:12px;
}
.speaking-task-title-v16 b{font-size:21px;color:var(--navy)}
.speaking-task-title-v16 span{font-size:12px;color:#7d86a0;font-weight:750}
.speaking-task-cn-v16{
  margin:0;color:var(--navy);font-size:19px;line-height:1.65;font-weight:850;
}
.speaking-task-en-v16{
  margin:5px 0 0;color:#7a849d;font-size:13.5px;line-height:1.55;
}
.speaking-prompt-grid-v16{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:16px;
}
.speaking-prompt-v16{
  background:#fff;
  border:1px solid #e0e6f1;
  border-radius:14px;
  padding:12px 14px;
}
.speaking-prompt-v16 b{display:block;color:var(--navy);font-size:18px;line-height:1.45}
.speaking-prompt-v16 span{display:block;color:var(--blue);font-size:12px;font-weight:750;margin-top:3px}
.speaking-bank-note-v15{margin:4px 0 16px!important}
.speak-bank-grid-v14{gap:20px!important}
.speak-bank-v14{padding:18px!important}
.speak-items-v14{gap:10px!important}
.speak-item-v14{min-height:112px!important}
@media(max-width:760px){
  .speaking-prompt-grid-v16{grid-template-columns:1fr}
  .speaking-task-cn-v16{font-size:17px}
}

/* Keep the final reading-complete panel simple; graded reading does not need outcome recap. */
.complete .learned{display:none!important}
.complete{padding:38px 30px!important}


/* ===== v17: return desktop learning navigation to the left ===== */
@media (min-width:981px){
  .layout{
    display:grid!important;
    grid-template-columns:220px minmax(0,1fr)!important;
    gap:30px!important;
    align-items:start!important;
    margin-top:30px!important;
  }
  .content{width:100%!important;min-width:0!important}
  .lesson-flow-nav-v14{
    position:sticky!important;
    top:96px!important;
    z-index:26!important;
    width:220px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:6px!important;
    margin:0!important;
    padding:12px!important;
    overflow:visible!important;
    background:#fff!important;
    border:1px solid #e3e8f2!important;
    border-radius:22px!important;
    box-shadow:0 10px 28px rgba(25,33,101,.055)!important;
    backdrop-filter:none!important;
  }
  .lesson-flow-nav-v14::before{display:none!important}
  .lesson-flow-nav-v14 .side-title-v17{
    display:block!important;
    padding:6px 8px 8px!important;
    color:#8a93ab!important;
    font-size:11px!important;
    line-height:1!important;
    font-weight:900!important;
    letter-spacing:.12em!important;
  }
  .lesson-flow-nav-v14 .nav-item{
    flex:none!important;
    width:100%!important;
    min-width:0!important;
    min-height:60px!important;
    padding:10px 11px!important;
    border:1px solid transparent!important;
    border-right:1px solid transparent!important;
    border-radius:14px!important;
    background:#fff!important;
    display:grid!important;
    grid-template-columns:34px minmax(0,1fr)!important;
    justify-content:stretch!important;
    align-items:center!important;
    gap:9px!important;
    color:#5f6887!important;
    box-shadow:none!important;
  }
  .lesson-flow-nav-v14 .nav-item:hover{
    background:#f7f9fd!important;
    color:var(--navy)!important;
    border-color:#e5eaf4!important;
  }
  .lesson-flow-nav-v14 .nav-item.active-section{
    background:#eef3ff!important;
    color:var(--navy)!important;
    border-color:#d5e0f5!important;
    box-shadow:inset 3px 0 0 var(--blue)!important;
  }
  .lesson-flow-nav-v14 .nav-item.done{background:#fff!important;color:#5f6887!important}
  .lesson-flow-nav-v14 .nav-item.done.active-section{background:#eef3ff!important;color:var(--navy)!important}
  .lesson-flow-nav-v14 .nav-num-new{
    font-size:14px!important;
    color:var(--blue)!important;
    text-align:center!important;
  }
  .lesson-flow-nav-v14 .nav-label{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:2px!important;
    min-width:0!important;
  }
  .lesson-flow-nav-v14 .nav-cn{
    font-size:15px!important;
    line-height:1.25!important;
    font-weight:950!important;
    white-space:nowrap!important;
  }
  .lesson-flow-nav-v14 .nav-en{
    font-size:10.5px!important;
    line-height:1.22!important;
    font-weight:750!important;
    color:#9299ad!important;
    white-space:normal!important;
  }
  .lesson-flow-nav-v14 .nav-check{display:none!important}
  .section{scroll-margin-top:104px!important}
}

/* Keep a compact horizontal fallback on tablet/mobile. */
@media (max-width:980px){
  .layout{display:block!important;margin-top:20px!important}
  .lesson-flow-nav-v14{
    position:sticky!important;top:72px!important;z-index:60!important;
    width:100%!important;display:flex!important;flex-direction:row!important;
    gap:0!important;margin:0 0 24px!important;padding:0!important;overflow-x:auto!important;
    border-radius:16px!important;background:#fff!important;
  }
  .lesson-flow-nav-v14 .side-title-v17{display:none!important}
  .lesson-flow-nav-v14 .nav-item{flex:0 0 148px!important;min-height:58px!important;border-radius:0!important}
  .lesson-flow-nav-v14::before{display:block!important}
  .section{scroll-margin-top:158px!important}
}


/* ===== v18: typography consistency, calmer mint, bilingual rhythm, clear error state ===== */
:root{
  --mint-practice-v18:#f2faf7;
  --mint-practice-hover-v18:#eaf7f3;
  --mint-practice-border-v18:#d4ebe4;
  --danger-bg-v18:#fff0f0;
  --danger-border-v18:#dc6f6f;
  --danger-text-v18:#b43f3f;
}
html,body,button,input,textarea,select{
  font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC","Noto Sans CJK SC",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;
}
/* Avoid mixed synthetic font weights in prominent Chinese UI labels. */
.meta-label,.meta-label span,.section h2,.q-title,.vocab-cn,.grammar-title-v8,
.review-task-head h3,.speaking-task-title-v16,.speaking-bank-note-v15,
.listen-task-v8,.nav-item,.nav-label-v17{font-family:inherit!important}
.meta-label{font-weight:700!important}
.meta-label span:first-child{font-weight:700!important}
.meta-label span:last-child{font-weight:600!important}

/* Chinese and English learner instructions should breathe on separate lines. */
.bilingual-stack-v18,.bilingual-copy-v18{display:flex!important;flex-direction:column!important;gap:5px!important}
.bilingual-stack-v18 .zh-line-v18,.bilingual-copy-v18 span:first-child{display:block!important;color:#66708f!important}
.bilingual-stack-v18 .en-line-v18,.bilingual-copy-v18 span:last-child{display:block!important;color:#8a93aa!important}
#reading-practice .section-desc.bilingual-stack-v18{max-width:920px!important;line-height:1.55!important}
#vocabMatchV8 .bilingual-copy-v18{margin:5px 0 0!important;line-height:1.45!important}

/* Vocabulary Match: both wrongly chosen items become unmistakably red. */
#vocabMatchV8 .vocab-match-item-v8.wrong,
#vocabMatchV8 .vocab-match-item-v8.wrong:hover,
#vocabMatchV8 .vocab-match-item-v8.wrong.selected{
  background:var(--danger-bg-v18)!important;
  border-color:var(--danger-border-v18)!important;
  color:var(--danger-text-v18)!important;
  box-shadow:0 0 0 3px rgba(200,69,69,.09)!important;
}

/* Word Bank: all four options keep the same, much lighter mint. */
#reviewClozeTask .review-word-bank .review-drag-word,
#reviewClozeTask .review-word-bank .review-drag-word:nth-child(odd),
#reviewClozeTask .review-word-bank .review-drag-word:nth-child(even){
  background:var(--mint-practice-v18)!important;
  border-color:var(--mint-practice-border-v18)!important;
  color:var(--blue)!important;
  box-shadow:none!important;
}
#reviewClozeTask .review-word-bank .review-drag-word:hover{
  background:var(--mint-practice-hover-v18)!important;
  border-color:#bddfd5!important;
}

/* Speaking note: keep Chinese and English on two clean rows. */
.speaking-bank-note-v15{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:5px!important}
.speaking-bank-note-v15 b,.speaking-bank-note-v15 span{display:block!important}

/* Remove accidental typographic spacing around speaker letters in comprehension/listening stems. */
#readingQuiz .q-title,#listeningQuiz .listen-cn-v8{letter-spacing:0!important;word-spacing:0!important}


/* ===== v19: line integrity, lookup state, reading legibility, single listening audio, dialogue typography ===== */

/* One Chinese font system across learner-facing text. Use stable, commonly available weights. */
body,button,input,label,summary,
.vocab-cn,.vocab-py,.vocab-en,.q-title,.option,.listen-task-v8,.listen-cn-v8,.listen-py-v8,
.dialogue-name-v14,.dialogue-line-v14 b,.dialogue-choice-options-v14 button,
.speaking-task-cn-v16,.speaking-task-en-v16,.speaking-prompt-v16 b,
.speaking-bank-note-v15,.review-instruction,.grammar-title-v8,.grammar-structure-v8,
.grammar-explain-pair-v8,.grammar-example-row-v8{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC","Noto Sans CJK SC","Segoe UI",Arial,sans-serif!important;
}

/* Global lookup: selected Hanzi turns blue; same word clicked again already closes popup + restores color. */
.lookup-token.active{
  color:var(--blue)!important;
  background:#eef4ff!important;
  box-shadow:0 0 0 1px rgba(38,96,229,.16)!important;
}

/* Keep learner-facing Chinese visually continuous. Tokenization must never create block fragments. */
.lookup-token,
.bilingual-copy-v18 .lookup-token,
.bilingual-stack-v18 .lookup-token,
.speaking-bank-note-v15 .lookup-token,
.review-instruction .lookup-token,
.section-desc .lookup-token,
.q-title .lookup-token,
.dialogue-line-v14 .lookup-token{
  display:inline!important;
  margin:0!important;
  padding:0!important;
  white-space:normal!important;
  vertical-align:baseline!important;
  line-height:inherit!important;
  letter-spacing:inherit!important;
  word-spacing:0!important;
}

/* Bilingual directions are two clean rows, not one broken character-stack. */
.bilingual-copy-v18,
.bilingual-stack-v18,
.speaking-bank-note-v15{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:5px!important;
  width:100%!important;
}
.bilingual-copy-v18 > span:first-child,
.bilingual-stack-v18 > .zh-line-v18,
.speaking-bank-note-v15 > b{
  display:block!important;
  width:100%!important;
  color:#66708f!important;
  font-weight:700!important;
}
.bilingual-copy-v18 > span:last-child,
.bilingual-stack-v18 > .en-line-v18,
.speaking-bank-note-v15 > span{
  display:block!important;
  width:100%!important;
  color:#8a93aa!important;
}
#vocabMatchV8 .bilingual-copy-v18 > span:first-child,
.speaking-bank-note-v15 > b{white-space:nowrap!important;}
#vocabMatchV8 .bilingual-copy-v18 > span:last-child,
.speaking-bank-note-v15 > span{white-space:nowrap!important;}

/* Reading Practice: larger Hanzi, Pinyin and answer text for screen-sharing. */
#reading-practice .question{padding:28px 30px!important;}
#readingQuiz .q-title{
  font-size:32px!important;
  line-height:1.42!important;
  font-weight:800!important;
  letter-spacing:0!important;
  word-spacing:0!important;
}
#readingQuiz .option{
  font-size:27px!important;
  line-height:1.42!important;
  min-height:72px!important;
  padding:18px 22px!important;
}
#readingQuiz .question.show-local-pinyin .q-title .support-py{
  display:inline!important;
  font-size:20px!important;
  line-height:1.4!important;
  margin-left:20px!important;
  color:var(--blue)!important;
  font-weight:700!important;
  white-space:nowrap!important;
}
#readingQuiz .question.show-local-pinyin .option-copy .support-py{
  display:inline!important;
  font-size:18px!important;
  line-height:1.4!important;
  margin-left:12px!important;
  color:var(--blue)!important;
  font-weight:700!important;
  white-space:nowrap!important;
}

/* Listening: one consistent light-green play button per question -- same soft-teal
   background/border/text-color family for default, hover, and playing states. Never
   a solid dark fill, never blue. */
#listening .listen-q-audio-v9{
  width:40px!important;height:40px!important;flex:0 0 40px!important;
  border:1px solid #cfeee6!important;border-radius:50%!important;
  background:var(--soft-teal)!important;color:var(--teal)!important;
  box-shadow:none!important;
}
#listening .listen-q-audio-v9:hover,#listening .listen-q-audio-v9.playing{
  background:#ddf7f0!important;color:#11856f!important;border-color:#b9e6da!important;transform:translateY(-1px)!important;
}
#listening .question-audio-v15{display:none!important;}

/* Dialogue: speaker name + colon use the same visual size as the utterance. */
.dialogue-line-v14,.dialogue-choice-row-v14{
  grid-template-columns:128px minmax(0,1fr)!important;
  gap:8px!important;
  align-items:start!important;
}
.dialogue-name-v14{
  font-size:22px!important;
  line-height:1.45!important;
  font-weight:800!important;
  padding-top:0!important;
  color:var(--navy)!important;
  white-space:nowrap!important;
}
.dialogue-name-v14::after{content:"：";}
.dialogue-name-v14.you-v14{color:var(--blue)!important;}
.dialogue-line-v14 b{
  font-size:22px!important;
  line-height:1.45!important;
  font-weight:800!important;
}
.dialogue-py-v15{font-size:14px!important;line-height:1.5!important;margin-top:5px!important;}
.dialogue-choice-options-v14 button{font-size:19px!important;line-height:1.45!important;}
.dialogue-option-py-v15{font-size:13.5px!important;line-height:1.45!important;}

/* Speaking is the final output stage: core prompt frames stay Hanzi-only, clean and single-line on desktop. */
.speaking-prompt-v16 > span{display:none!important;}
.speaking-prompt-v16 b{
  font-size:22px!important;
  line-height:1.45!important;
  font-weight:800!important;
  white-space:nowrap!important;
}
.speaking-bank-note-v15{margin:8px 0 16px!important;}
.speaking-bank-note-v15 > b{font-size:18px!important;color:var(--navy)!important;}
.speaking-bank-note-v15 > span{font-size:14px!important;color:#7f88a1!important;}

/* Short Chinese instructional lines should stay as a line on desktop; mobile may wrap naturally. */
#vocabMatchV8 .bilingual-copy-v18,
.speaking-bank-note-v15{max-width:100%!important;}

@media(max-width:900px){
  #vocabMatchV8 .bilingual-copy-v18 > span:first-child,
  #vocabMatchV8 .bilingual-copy-v18 > span:last-child,
  .speaking-bank-note-v15 > b,
  .speaking-bank-note-v15 > span,
  .speaking-prompt-v16 b{white-space:normal!important;}
  #readingQuiz .q-title{font-size:27px!important;}
  #readingQuiz .option{font-size:22px!important;}
  #readingQuiz .question.show-local-pinyin .q-title .support-py{font-size:17px!important;margin-left:10px!important;}
  #readingQuiz .question.show-local-pinyin .option-copy .support-py{font-size:16px!important;margin-left:8px!important;}
  .dialogue-line-v14,.dialogue-choice-row-v14{grid-template-columns:1fr!important;gap:5px!important;}
}


/* ===== v19b regression fixes after visual QA ===== */
/* Every lookup token must inherit the exact typography of the sentence around it. */
.lookup-token{
  display:inline!important;
  font-family:inherit!important;
  font-size:inherit!important;
  font-weight:inherit!important;
  line-height:inherit!important;
  letter-spacing:inherit!important;
  word-spacing:0!important;
  margin:0!important;
  padding:0!important;
  vertical-align:baseline!important;
}
#vocabMatchV8 .bilingual-copy-v18 span.lookup-token,
.speaking-bank-note-v15 span.lookup-token,
.bilingual-stack-v18 span.lookup-token{
  display:inline!important;
  font-size:inherit!important;
  font-weight:inherit!important;
  color:inherit!important;
}

/* Reading stems are normal continuous sentences, not flex items with gaps between tokens. */
#reading-practice .q-title{
  display:block!important;
  gap:0!important;
  flex-wrap:unset!important;
  word-break:keep-all!important;
  overflow-wrap:normal!important;
}
#reading-practice .q-title .support-py{display:none!important;}
#reading-practice .question.show-q-pinyin .q-title .support-py{
  display:inline!important;
  margin-left:20px!important;
  font-size:20px!important;
  line-height:1.4!important;
  color:var(--blue)!important;
  font-weight:700!important;
  white-space:nowrap!important;
}
#reading-practice .question.show-q-pinyin .option-copy .support-py{
  display:inline!important;
  margin-left:12px!important;
  font-size:18px!important;
  line-height:1.4!important;
  color:var(--blue)!important;
  font-weight:700!important;
  white-space:nowrap!important;
}

/* Keep short Chinese instructions as intact lines on desktop. */
#vocabMatchV8 .bilingual-copy-v18 > span,
.speaking-bank-note-v15 > b,
.speaking-task-cn-v16,
.dialogue-line-v14 b{
  word-break:keep-all!important;
  overflow-wrap:normal!important;
}

/* Dialogue speaker + colon and utterance read as one visual line with equal type size. */
.dialogue-line-v14,.dialogue-choice-row-v14{
  grid-template-columns:max-content minmax(0,1fr)!important;
  column-gap:6px!important;
  row-gap:5px!important;
  align-items:start!important;
}
.dialogue-name-v14,.dialogue-line-v14 b{
  font-size:22px!important;
  line-height:1.45!important;
  font-weight:800!important;
}
.dialogue-prompt-v15 .dialogue-name-v14{color:var(--blue)!important;}
.dialogue-choice-row-v14 .dialogue-name-v14{color:var(--teal)!important;}

@media(max-width:900px){
  #reading-practice .q-title{word-break:normal!important;overflow-wrap:anywhere!important;}
  #vocabMatchV8 .bilingual-copy-v18 > span,
  .speaking-bank-note-v15 > b,
  .speaking-task-cn-v16,
  .dialogue-line-v14 b{word-break:normal!important;overflow-wrap:anywhere!important;}
}


/* V20 — Vocabulary match is a simple Hanzi ↔ English memory game. */
#vocabMatchV8 .vocab-match-board-v20{
  grid-template-columns:repeat(2,minmax(190px,260px))!important;
  max-width:590px!important;
  gap:18px!important;
  justify-content:center!important;
}
#vocabMatchV8 .vocab-match-item-v8{
  transition:opacity .22s ease, transform .22s ease, background .18s ease, border-color .18s ease!important;
}
#vocabMatchV8 .vocab-match-item-v8.correct-away{
  opacity:0!important;
  transform:scale(.96)!important;
  pointer-events:none!important;
}
#vocabMatchV8 .vocab-match-item-v8.wrong{
  background:#fff0f0!important;
  border-color:#e77f7f!important;
  color:#b83d3d!important;
  box-shadow:0 0 0 3px rgba(200,69,69,.08)!important;
}
@media(max-width:680px){
  #vocabMatchV8 .vocab-match-board-v20{
    grid-template-columns:repeat(2,170px)!important;
    justify-content:start!important;
    overflow-x:auto!important;
  }
}

/* Dialogue practice is checked only when the teacher/student presses Check Answers. */
.dialogue-actions-v20{
  display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;
  padding:16px 18px 4px;
}
#dialoguePracticeV14 .dialogue-choice-options-v14 button.selected-v20{
  background:#eef4ff!important;
  border-color:#9fb4e8!important;
  box-shadow:0 0 0 3px rgba(38,96,229,.08)!important;
}
#dialoguePracticeV14 .dialogue-choice-options-v14 button.correct-v20{
  background:#eaf9f5!important;border-color:#9edbcb!important;color:#157b68!important;
}
#dialoguePracticeV14 .dialogue-choice-options-v14 button.wrong-v20{
  background:#fff1f1!important;border-color:#e8a8a8!important;color:#b44444!important;
}

/* Pinyin controls in the speaking word bank must be bilingual, not "拼音" alone. */
#speakingPracticeV14 .speak-item-v14 button{
  min-width:88px!important;
  white-space:nowrap!important;
  font-size:11px!important;
}

/* New reading illustration: two people chatting, no food answer leakage. */
.conversation-scene-v20{padding:0!important;background:#fff!important}
.conversation-scene-v20 svg{display:block;width:100%;height:auto}

/* Bottom restart always returns to the beginning of the lesson after reset. */
html{scroll-behavior:smooth}

/* ===== V43 speaking word-bank group-level Pinyin controls ===== */
#speakingPracticeV14 .speak-bank-head-v43{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px;
}
#speakingPracticeV14 .speak-bank-head-v43 h4{margin:0!important;}
#speakingPracticeV14 .bank-pinyin-switch-v43{flex:0 0 auto;}
#speakingPracticeV14 .speak-item-v14>button{display:none!important;}
#speakingPracticeV14 .speak-item-v14 small{
  display:none!important;margin-top:1px;font-size:13px!important;line-height:1.35;color:var(--blue)!important;font-weight:800!important;
}
#speakingPracticeV14 .speak-bank-v14.show-bank-pinyin-v43 .speak-item-v14 small{display:block!important;}
#speakingPracticeV14 .speak-item-v14{gap:6px!important;}
@media(max-width:620px){
  #speakingPracticeV14 .speak-bank-head-v43{align-items:flex-start;flex-wrap:wrap;}
}


/* ===== v21: speaking model + restart controls + final illustration polish ===== */
.practice-actions-v21{
  display:flex;justify-content:flex-end;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px;
}

/* Speaking example card: same compact Pinyin switch language as the rest of the site. */
#speakingPracticeV14 .speaking-model-v21{
  position:relative!important;
  display:block!important;
  padding:18px 18px 16px!important;
  margin-top:16px!important;
  min-height:0!important;
}
#speakingPracticeV14 .speaking-model-heading-v21{
  padding-right:145px;
}
#speakingPracticeV14 .speaking-model-heading-v21 b{
  display:block;font-size:15px;line-height:1.35;color:var(--navy);
}
#speakingPracticeV14 .speaking-model-heading-v21 span{
  display:block;margin-top:2px;font-size:12px;line-height:1.35;color:#858ea5;
}
#speakingPracticeV14 .speaking-model-pinyin-btn-v21{
  position:absolute!important;top:14px!important;right:16px!important;
  width:auto!important;min-width:0!important;max-width:none!important;
  padding:6px 2px!important;margin:0!important;
  font-size:12px!important;line-height:1!important;
  white-space:nowrap!important;
}
#speakingPracticeV14 .speaking-model-lines-v21{
  display:grid;gap:9px;margin-top:14px;
}
#speakingPracticeV14 .speaking-model-line-v21{
  display:block;min-width:0;
}
#speakingPracticeV14 .speaking-model-line-v21 p{
  display:block!important;grid-column:auto!important;
  margin:0!important;font-family:var(--font-cn)!important;
  font-size:21px!important;font-weight:900!important;line-height:1.55!important;
  color:var(--navy)!important;white-space:normal;
}
#speakingPracticeV14 .speaking-model-line-v21 .speaking-model-py-v15{
  display:none!important;grid-column:auto!important;
  margin-top:3px!important;font-size:13px!important;line-height:1.5!important;
  color:var(--blue)!important;font-weight:750!important;
}
#speakingPracticeV14 .speaking-model-v21.show-model-py .speaking-model-py-v15{
  display:block!important;
}
/* v2.28：口语示例按标点切成片段后，片段要**横向流式排布**，不是一段一行。
   每个片段是一个不可拆的竖直单元（汉字在上、它自己的拼音紧贴在下），
   整个单元一起换行 —— 所以句子再长，汉字和对应拼音也不会被拆到两处。
   拼音字符串没有任何改写，这里只管版式。 */
#speakingPracticeV14 .speaking-model-segs-v228{
  display:flex!important;flex-wrap:wrap;align-items:flex-start;
  /* 横向 gap 必须是 0 —— 片段之间是**汉字接汉字**，约定 20：中文之间不许有空隙。
     纵向 gap 只作用在换行之后的两行片段之间，不落在任何一对汉字中间。 */
  row-gap:10px;column-gap:0;margin-top:14px;
}
#speakingPracticeV14 .speaking-model-seg-v228{
  display:flex!important;flex-direction:column!important;align-items:flex-start!important;
  min-width:0;max-width:100%;
}
#speakingPracticeV14 .speaking-model-seg-v228>p,
#speakingPracticeV14 .speaking-model-seg-v228>.speaking-model-py-v15{
  width:auto!important;max-width:100%!important;
}
/* 2.36：片段之间横向 gap 是 0（中文之间不许有空隙），于是**拼音也贴死了** ——
   上一段的句号直接顶着下一段的第一个字母：`…hē rè shuǐ.Shēng bìng de…`，
   老师 2026-09-23：「口语练习的示例有点太挤了 尤其是拼音部分」。
   只给拼音留右边一点空，汉字一个像素不动；最后一段不留，免得整块右边空一截。
   汉字行本来就只在「拼音比汉字宽」的片段边界上出现空隙（那条断言管着），
   这里把空隙稍微加宽一点点，位置还是原来那些边界，不会多出新的空隙。 */
#speakingPracticeV14 .speaking-model-seg-v228:not(:last-of-type)>.speaking-model-py-v15{
  padding-right:10px!important;
}
/* 英文整行独占一行，排在所有片段之后 */
#speakingPracticeV14 .speaking-model-en-row-v228{flex:0 0 100%;max-width:100%;margin-top:6px;}
@media(max-width:640px){
  #speakingPracticeV14 .speaking-model-heading-v21{padding-right:0;padding-top:42px}
  #speakingPracticeV14 .speaking-model-pinyin-btn-v21{top:12px;right:14px}
  #speakingPracticeV14 .speaking-model-line-v21 p{font-size:19px!important}
}

/* Polished reading illustration: natural hair, visible faces, conversation only. */
.conversation-scene-v21{padding:0!important;overflow:hidden!important;background:#f7faff!important}
.conversation-scene-v21 .reading-scene-img-v21{
  display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:center;
}

/* ===== v23: fresh listening micro-dialogues + one woman/one man illustration ===== */
#listening .listening-intro-v23{padding:20px 24px!important;min-height:0!important;}
#listening .listening-intro-v23 .listen-copy p{margin-bottom:0!important;}
#listening .listening-intro-v23 .listen-copy p span{display:block;margin-top:5px;color:var(--muted);}
#listening .listening-question-stem-v23,#listening .listening-fill-prompt-v23{margin:8px 0 14px 34px;font-size:25px;line-height:1.5;font-weight:900;color:var(--navy);font-family:var(--font-cn,inherit);}
/* v2.28：「汉字」开关**只管三个选项的显示 / 隐藏**，题干永远显示。
   改动前这里把题干（.listening-question-stem-v23）和填空提示
   （.listening-fill-prompt-v23）整块 display:none —— 一点「汉字」题干就没了，
   而选项容器 .options 没有任何规则门控，于是选项反而留着，正好是反的。
   现在：题干不再被任何 hanzi 规则隐藏；关掉「汉字」隐藏的是 .options。
   用 CSS 隐藏而不是拆 DOM —— 已选答案、对错状态、feedback、选项顺序全部原样保留。
   「显示原文」是另一套（.listen-q-transcript-v227 + toggleOneListeningTranscriptV227），
   本次一行未动，与「汉字」开关互不相干。 */
#listening .listen-question:not(.show-listen-hanzi) .options{display:none!important;}
#listening .listen-blank-v23{display:inline-block;min-width:92px;text-align:center;color:var(--blue);}
#listening .transcript-group-v23{padding:15px 0;border-bottom:1px solid var(--line);}
#listening .transcript-group-v23:last-child{border-bottom:0;}
#listening .transcript-group-v23>b{display:inline-flex;width:30px;height:30px;border-radius:9px;background:var(--soft-blue);align-items:center;justify-content:center;color:var(--blue);margin-bottom:7px;}
@media(max-width:760px){#listening .listening-question-stem-v23,#listening .listening-fill-prompt-v23{margin-left:0;font-size:22px;}}


/* ===== v28: reading/listening size parity + Chinese-only truth labels ===== */
#reading-practice .q-title{
  font-size:25px!important;
  line-height:1.5!important;
  font-weight:900!important;
}
#reading-practice .option{
  min-height:58px!important;
  padding:13px 16px!important;
  font-size:20px!important;
}
#reading-practice .option-copy{
  font-size:20px!important;
  line-height:1.35!important;
}
#reading-practice .question.show-q-pinyin .q-title .support-py{
  font-size:20px!important;
}
#reading-practice .question.show-q-pinyin .option-copy .support-py{
  font-size:16px!important;
}
#reading-practice .truth-main-v9,
#listening .truth-main-v9{gap:0!important;}
@media(max-width:760px){
  #reading-practice .q-title{font-size:22px!important;}
  #reading-practice .option,#reading-practice .option-copy{font-size:19px!important;}
}


/* ===== v29: calmer surfaces, centered artwork, non-button transcript hint ===== */
#grammar{
  background:linear-gradient(180deg,#f8fbff 0%,#f7faff 100%)!important;
  border-color:#dfe7f5!important;
}
#grammar .grammar-card-v7{
  background:#fcfdff!important;
}
#grammar .grammar-body-v7{
  background:#fbfdff!important;
}
#reading-practice{
  background:linear-gradient(180deg,#f8faff 0%,#f6f9ff 100%)!important;
  border-color:#dfe7f5!important;
}
#reading-practice .question{
  background:#fcfdff!important;
  border-color:#dfe6f2!important;
}
#reading-practice .option{
  background:#fff!important;
}
.conversation-scene-v21{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:310px!important;
  padding:24px!important;
}
.conversation-scene-v21 .reading-scene-img-v21{
  width:min(88%,390px)!important;
  height:auto!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  object-position:center!important;
  margin:auto!important;
}
.transcript-note-v29{
  margin-top:14px;
  padding:2px 2px 0;
  color:#7d86a2;
  font-size:14px;
  line-height:1.55;
  font-weight:650;
  cursor:default;
  user-select:text;
}
.transcript-note-v29 span{display:block;}
.transcript-note-v29 span+span{margin-top:2px;font-size:13px;color:#959db4;}
.transcript-note-v29.done{color:#628579;}
@media(max-width:980px){
  .conversation-scene-v21{min-height:0!important;padding:18px!important;}
  .conversation-scene-v21 .reading-scene-img-v21{width:min(84%,420px)!important;}
}


/* ===== v31: unified section visual logic =====
   Outer section = calm white surface. Inner learning/practice area = soft blue or mint.
   Do not tint an entire Grammar / Reading Practice / Listening section. */
#grammar,#reading-practice,#listening{
  background:#fff!important;
  border-color:#e3e8f2!important;
}
/* Grammar: white card shell + colored learning core. */
#grammar .grammar-card-v7{
  background:#fff!important;
  border-color:#e1e7f1!important;
  box-shadow:none!important;
}
#grammar .grammar-card-v7 summary,
#grammar .grammar-card-v7[open] summary{background:#fff!important;}
#grammar .grammar-body-v7{background:#fff!important;}
#grammar .grammar-structure-v8{
  background:#f3f7ff!important;
  border:1px solid #dce6fb!important;
  border-radius:15px!important;
  padding:13px 15px!important;
}
#grammar .grammar-explain-pair-v8{
  background:#f1faf7!important;
  border:1px solid #d7eee7!important;
  border-radius:16px!important;
  padding:10px!important;
}
#grammar .grammar-explain-pair-v8 p{
  background:transparent!important;
  border:0!important;
  margin:0!important;
  padding:5px 7px!important;
}
#grammar .grammar-examples-v8{
  background:#f5f8ff!important;
  border:1px solid #e0e7f5!important;
  border-radius:16px!important;
  padding:10px!important;
}
#grammar .grammar-example-row-v8{background:#fff!important;border-color:#e3e8f2!important;}

/* Reading practice: white question shell + soft-blue answer zone. */
#reading-practice .question{
  background:#fff!important;
  border-color:#e1e7f1!important;
  box-shadow:none!important;
}
#reading-practice .options{
  background:#f4f7ff!important;
  border:1px solid #dfe7f7!important;
  border-radius:17px!important;
  padding:12px!important;
  gap:10px!important;
}
#reading-practice .option{background:#fff!important;border-color:#e2e7f0!important;}

/* Listening: white question shell + soft tinted interaction zones. */
#listening .listening-intro-v23{
  background:#f0faf7!important;
  border-color:#d5eee7!important;
}
#listening .listen-question{
  background:#fff!important;
  border-color:#e1e7f1!important;
  box-shadow:none!important;
}
#listening .listen-support-v8{
  background:#f4f7ff!important;
  border:1px solid #dfe7f7!important;
  border-radius:16px!important;
  padding:13px 15px!important;
}
#listening .listen-options-v8{
  background:#f0faf7!important;
  border:1px solid #d7eee7!important;
  border-radius:17px!important;
  padding:12px!important;
  gap:10px!important;
}
#listening .listen-options-v8 .option{background:#fff!important;border-color:#e1e8ee!important;}
#listening .listen-fill{background:#f5f8ff!important;border-color:#dce6f7!important;}

/* Generic dialogue speakers. */
#dialoguePracticeV14 .dialogue-name-v14{
  min-width:36px!important;
  width:auto!important;
  font-weight:950!important;
  letter-spacing:0!important;
}


/* v32: Grammar must visually follow the same white-shell + tinted-core logic even before cards are opened. */
#grammar .grammar-card-v7:nth-child(odd) summary{background:#f4f7ff!important;}
#grammar .grammar-card-v7:nth-child(even) summary{background:#f0faf7!important;}
#grammar .grammar-card-v7[open]:nth-child(odd) summary{background:#eef4ff!important;}
#grammar .grammar-card-v7[open]:nth-child(even) summary{background:#eaf8f4!important;}


/* ===== v33: tinted section shell + white content cards; unified speaking-example typography ===== */
/* The page logic is now: soft colored section background, white learning cards inside. */
#grammar{
  background:linear-gradient(180deg,#f3f7ff 0%,#eef5ff 100%)!important;
  border-color:#dce6f7!important;
}
#reading-practice{
  background:linear-gradient(180deg,#f4f7ff 0%,#eef4ff 100%)!important;
  border-color:#dce5f6!important;
}
#listening{
  background:linear-gradient(180deg,#f2faf7 0%,#edf8f5 100%)!important;
  border-color:#d7ece6!important;
}
/* White content cards live on top of the tinted section shells. */
#grammar .grammar-card-v7,
#reading-practice .question,
#listening .listen-question,
#listening .listening-intro-v23{
  background:#fff!important;
  border-color:#dfe6f1!important;
  box-shadow:0 4px 14px rgba(25,33,101,.035)!important;
}
#grammar .grammar-card-v7 summary,
#grammar .grammar-card-v7[open] summary{background:#fff!important;}
#grammar .grammar-body-v7{background:#fff!important;}
/* Keep small semantic emphasis areas soft, not full-panel blue/green. */
#grammar .grammar-structure-v8{background:#f5f8ff!important;}
#grammar .grammar-explain-pair-v8{background:#f3faf8!important;}
#grammar .grammar-examples-v8{background:#f8faff!important;}
#reading-practice .options{background:#f7f9ff!important;}
#listening .listen-support-v8{background:#f7f9ff!important;}
#listening .listen-options-v8{background:#f5faf8!important;}
/* Speaking example: exact same Chinese font system as the rest of the page. */
#speakingPracticeV14 .speaking-model-line-v21 p,
#speakingPracticeV14 .speaking-model-line-v21 p .lookup-token{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC","Noto Sans CJK SC","Segoe UI",Arial,sans-serif!important;
  font-size:22px!important;
  line-height:1.52!important;
  font-weight:800!important;
  color:var(--navy)!important;
  letter-spacing:0!important;
  word-spacing:0!important;
}
#speakingPracticeV14 .speaking-model-line-v21 p .lookup-token.active{
  color:var(--blue)!important;
}
/* Removing the label should not leave excess empty space in the speaking task box. */
#speakingPracticeV14 .speaking-task-box-v16{padding-top:18px!important;}
#speakingPracticeV14 .speaking-task-cn-v16{margin-top:0!important;}
@media(max-width:760px){
  #speakingPracticeV14 .speaking-model-line-v21 p,
  #speakingPracticeV14 .speaking-model-line-v21 p .lookup-token{font-size:19px!important;}
}


/* ===== v34: unified module surface logic =====
   All six major modules use a white outer section/card shell.
   Soft blue/mint is reserved for inner learning/interaction zones, not the whole section. */
#grammar,#reading-practice,#listening{
  background:#fff!important;
  border-color:#e2e8f2!important;
  box-shadow:none!important;
}
/* Grammar: each point is a white card; only structure/explanation/example containers are softly tinted. */
#grammar .grammar-card-v7{
  background:#fff!important;
  border-color:#dfe6f0!important;
  box-shadow:none!important;
}
#grammar .grammar-card-v7 summary,
#grammar .grammar-card-v7[open] summary{
  background:#fff!important;
}
#grammar .grammar-body-v7{background:#fff!important;}
#grammar .grammar-structure-v8{background:#f4f7ff!important;border-color:#dfe7f7!important;}
#grammar .grammar-explain-pair-v8{background:#f1faf7!important;border-color:#d7eee7!important;}
#grammar .grammar-examples-v8{background:#f7f9ff!important;border-color:#e2e8f4!important;}
#grammar .grammar-example-row-v8{background:#fff!important;}

/* Reading Practice: white question cards, soft-blue options area, white answer choices. */
#reading-practice .question{
  background:#fff!important;
  border-color:#dfe6f0!important;
  box-shadow:none!important;
}
#reading-practice .options{
  background:#f5f8ff!important;
  border:1px solid #e0e7f5!important;
  border-radius:17px!important;
  padding:12px!important;
}
#reading-practice .option{background:#fff!important;}

/* Listening: white question cards; support/options use subtle blue/mint only inside. */
#listening .listening-intro-v23{
  background:#fff!important;
  border-color:#dfe6f0!important;
  box-shadow:none!important;
}
#listening .listen-question{
  background:#fff!important;
  border-color:#dfe6f0!important;
  box-shadow:none!important;
}
#listening .listen-support-v8{
  background:#f5f8ff!important;
  border-color:#e0e7f5!important;
}
#listening .listen-options-v8{
  background:#f1faf7!important;
  border-color:#d8eee7!important;
}
#listening .listen-options-v8 .option{background:#fff!important;}
#listening .listen-fill{background:#fff!important;}


#grammar,#reading-practice,#listening{background:#fff!important;border-color:#e2e8f2!important;box-shadow:none!important;}
#grammar .grammar-card-v7{background:#fff!important;border:1px solid #dfe6f0!important;box-shadow:none!important;}
#grammar .grammar-card-v7 summary,#grammar .grammar-card-v7[open] summary,#grammar .grammar-body-v7{background:#fff!important;}
#grammar .grammar-structure-v8{background:#f3f7ff!important;border-color:#dce6f8!important;}
#grammar .grammar-explain-pair-v8{background:#eef9f6!important;border-color:#d4ece5!important;}
#grammar .grammar-examples-v8{background:#f5f8ff!important;border-color:#e0e7f4!important;}
#grammar .grammar-example-row-v8{background:#fff!important;}
#reading-practice .question{background:#fff!important;border:1px solid #dfe6f0!important;box-shadow:none!important;}
#reading-practice .options{background:#f3f7ff!important;border:1px solid #dfe7f7!important;border-radius:17px!important;padding:12px!important;}
#reading-practice .option{background:#fff!important;border-color:#e2e7f0!important;}
#listening .listen-question{background:#fff!important;border:1px solid #dfe6f0!important;box-shadow:none!important;}
#listening .listening-intro-v23{display:none!important;}
#listening .listen-support-v8{background:#f3f7ff!important;border:1px solid #dfe7f7!important;border-radius:16px!important;padding:13px 15px!important;}
#listening .listen-question:not(.show-listen-hanzi):not(.show-listen-pinyin) .listen-support-v8{display:none!important;}
#listening .listen-question.show-listen-hanzi .listen-support-v8,#listening .listen-question.show-listen-pinyin .listen-support-v8{display:grid!important;}
#listening .listen-options-v8{background:#eef9f6!important;border:1px solid #d5ece6!important;border-radius:17px!important;padding:12px!important;}
#listening .listen-options-v8 .option{background:#fff!important;border-color:#e1e8ee!important;}
#listening .listen-fill{background:#fff!important;border-color:#dce5f3!important;}
#reviewClozeTask.sentence-order-practice-v36{background:#f4f7ff!important;border-color:#d9e3f6!important;}
.sentence-order-list-v36{display:grid;gap:14px;}
.sentence-order-item-v36{background:#fff;border:1px solid #dfe6f2;border-radius:18px;padding:16px 18px;}
.sentence-order-top-v36{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.sentence-order-num-v36{width:30px;height:30px;border-radius:9px;background:#edf3ff;color:var(--blue);display:inline-flex;align-items:center;justify-content:center;font-weight:950;flex:0 0 30px;}
.sentence-order-chip-zone-v36,.sentence-order-answer-v36{display:flex;flex-wrap:wrap;gap:9px;align-items:center;min-height:50px;}
.sentence-order-chip-zone-v36{padding:12px;background:#f7f9ff;border:1px solid #e3e8f4;border-radius:14px;}
.sentence-order-answer-v36{margin-top:10px;padding:12px;background:#f0faf7;border:1px dashed #bfe2d8;border-radius:14px;}
.sentence-order-chip-v36{border:1px solid #cbdaf5;background:#fff;color:var(--navy);border-radius:11px;padding:9px 13px;font-size:18px;font-weight:850;cursor:pointer;line-height:1.2;}
.sentence-order-chip-v36:hover{border-color:#aabfe9;background:#f7faff;}
.sentence-order-chip-v36 small{display:none;margin-top:3px;font-size:11px;color:var(--blue);font-weight:750;}
.sentence-order-item-v36.show-order-pinyin-v40 .sentence-order-chip-v36 small{display:block;}
.sentence-order-item-v36.correct{border-color:#b9e5d8;background:#fbfffd;}
.sentence-order-item-v36.wrong{border-color:#efc7c7;}
.sentence-order-feedback-v36{min-height:22px;margin-top:9px;font-size:14px;font-weight:800;}
.sentence-order-feedback-v36.ok{color:#13896f}.sentence-order-feedback-v36.no{color:#c94f4f}
.sentence-order-correct-v36{margin-top:5px;color:var(--navy);font-weight:850;}
#speakingPracticeV14 .speaking-prompt-v16 .lookup-token,#speakingPracticeV14 .speaking-model-line-v21 .lookup-token{font:inherit!important;line-height:inherit!important;letter-spacing:inherit!important;}
#speakingPracticeV14 .lookup-token.active{color:var(--blue)!important;background:#edf3ff!important;}


/* v39: sentence order = number + word bank on one row; punctuation is fixed in answer position, never attached to draggable words. */
.sentence-order-top-v36{display:flex!important;align-items:center!important;gap:12px!important;margin-bottom:10px!important;}
.sentence-order-top-v36 .sentence-order-chip-zone-v36{flex:1 1 auto!important;margin:0!important;}
.sentence-order-answer-v36{display:flex!important;align-items:center!important;flex-wrap:wrap!important;gap:7px!important;}
.sentence-order-slot-v39{display:inline-flex;align-items:center;justify-content:center;min-width:54px;min-height:48px;border-bottom:2px solid #cfe1dc;border-radius:10px;padding:3px;}
.sentence-order-slot-v39:empty{background:rgba(255,255,255,.58);}
.sentence-order-punct-v39{font-size:27px;font-weight:900;color:var(--navy);line-height:1;}
.sentence-order-slot-v39 .sentence-order-chip-v36{width:100%;}
/* Listening Q1 gets the same restrained mint interaction accent as the rest of Listening. */
#listening .listen-question[data-ltype="fill"] .listening-fill-prompt-v23{background:#f1fbf8;border:1px solid #cfeee6;border-radius:16px;padding:13px 16px!important;margin-top:10px!important;}
#listening .listen-question[data-ltype="fill"] .listen-blank-v23{color:#159b82;border-bottom-color:#8dd9c7!important;}
#listening .listen-question[data-ltype="fill"] .listen-fill{border-color:#bfe7dd!important;background:#fbfffe!important;}
#listening .listen-question[data-ltype="fill"] .listen-fill:focus{outline:3px solid rgba(24,191,160,.12)!important;border-color:var(--teal)!important;}
/* Global Simplified/Traditional control lives in the header, not inside Reading. */
.global-script-btn-v39{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;}
.global-script-btn-v39[aria-pressed="true"]{background:var(--soft-teal);border-color:#cfeee6;color:#16876f;}
@media(max-width:640px){.top-actions .global-script-btn-v39{display:inline-flex!important}.sentence-order-top-v36{align-items:flex-start!important}.sentence-order-num-v36{margin-top:10px}}


/* ===== V40 listening transcript + per-question order pinyin ===== */
.order-item-pinyin-v40{flex:0 0 auto!important;}
.sentence-order-top-v36 .sentence-order-chip-zone-v36{min-width:0;}
.transcript-head-v40{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px;}
.transcript-head-v40 .full-version-title{margin:0;}
.transcript-fold-btn-v40,.transcript-reopen-v40{border:1px solid #dfe6f0;border-radius:999px;background:#fff;color:var(--navy);padding:8px 12px;font-size:12px;font-weight:900;cursor:pointer;}
.transcript-fold-btn-v40:hover,.transcript-reopen-v40:hover{background:var(--soft-blue);}
.transcript-reopen-v40{display:none;margin-top:10px;}
.transcript-reopen-v40.visible{display:inline-flex;}
@media(max-width:720px){.sentence-order-top-v36{flex-wrap:wrap!important}.sentence-order-top-v36 .sentence-order-chip-zone-v36{flex-basis:100%!important}.order-item-pinyin-v40{margin-left:auto;}}


/* ===== v41: question-stem typography parity =====
   Reading and Listening question stems use the same size system. */
#reading-practice .q-title,
#listening .listen-task-v8,
#listening .listen-cn-v8{
  font-size:25px!important;
  line-height:1.5!important;
  font-weight:900!important;
}
#listening .listen-q-num-v8{
  font-size:25px!important;
  line-height:1.5!important;
  font-weight:950!important;
}
@media(max-width:760px){
  #reading-practice .q-title,
  #listening .listen-task-v8,
  #listening .listen-cn-v8,
  #listening .listen-q-num-v8{font-size:22px!important;}
}


/* v42 locked layout: desktop sentence-order source and answer are side-by-side. */
#sentenceOrderListV36 .sentence-order-item-v36{
  display:grid!important;
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)!important;
  grid-template-areas:"source answer" "feedback feedback"!important;
  gap:12px 16px!important;
  align-items:stretch!important;
}
#sentenceOrderListV36 .sentence-order-top-v36{
  grid-area:source!important;
  margin:0!important;
  min-width:0!important;
  align-self:stretch!important;
}
#sentenceOrderListV36 .sentence-order-answer-v36{
  grid-area:answer!important;
  margin:0!important;
  min-width:0!important;
  min-height:100%!important;
  align-content:center!important;
}
#sentenceOrderListV36 .sentence-order-feedback-v36{
  grid-area:feedback!important;
  margin-top:0!important;
}
#sentenceOrderListV36 .sentence-order-chip-zone-v36{
  min-height:100%!important;
}
@media(max-width:900px){
  #sentenceOrderListV36 .sentence-order-item-v36{
    grid-template-columns:1fr!important;
    grid-template-areas:"source" "answer" "feedback"!important;
  }
  #sentenceOrderListV36 .sentence-order-answer-v36{min-height:58px!important;}
}


/* v44: compact dictionary-style lookup card: Pinyin → Hanzi → English. */
.lookup-pop-v7{
  min-width:176px!important;
  max-width:250px!important;
  padding:13px 18px 14px!important;
  border-radius:17px!important;
  line-height:1.18!important;
}
.lookup-pop-v7 .py{
  margin:0 0 5px!important;
  color:var(--blue)!important;
  font-size:18px!important;
  line-height:1.2!important;
  font-weight:850!important;
}
.lookup-pop-v7 b{
  display:block!important;
  margin:0!important;
  color:var(--navy)!important;
  font-size:30px!important;
  line-height:1.12!important;
  font-weight:900!important;
}
.lookup-pop-v7 .en{
  margin:6px 0 0!important;
  color:var(--muted)!important;
  font-size:17px!important;
  line-height:1.25!important;
  font-weight:600!important;
}
@media(max-width:640px){
  .lookup-pop-v7{min-width:164px!important;max-width:228px!important;padding:12px 16px 13px!important}
  .lookup-pop-v7 .py{font-size:17px!important}
  .lookup-pop-v7 b{font-size:28px!important}
  .lookup-pop-v7 .en{font-size:16px!important}
}


/* v46: Expression Practice uses a distinct green visual family; regenerated dumpling art. */
#dialoguePracticeV14{
  background:linear-gradient(180deg,#f3fcf8 0%,#eefaf6 100%)!important;
  border-color:#bfe8dc!important;
}
#dialoguePracticeV14 .review-task-num{
  background:#e3f7f1!important;color:#148a73!important;border-color:#bce6da!important;
}
#dialoguePracticeV14 .review-task-head h3{color:#146f61!important}
#dialoguePracticeV14 .review-instruction{background:rgba(255,255,255,.78)!important;border-color:#d5eee7!important}
#dialoguePracticeV14 .dialogue-question-v15{background:#fff!important;border-color:#d8eee8!important}
#dialoguePracticeV14 .dialogue-q-num-v15{background:#e7f8f3!important;color:#148a73!important;border-color:#c3e9df!important}
#dialoguePracticeV14 .dialogue-choice-options-v14 button:hover{background:#eefaf6!important;border-color:#a9dccf!important}
#dialoguePracticeV14 .dialogue-pinyin-btn-v15.active{background:#e3f7f1!important;border-color:#bce6da!important;color:#148a73!important}
.dumpling-art-v46{width:64px!important;height:58px!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important}
.dumpling-art-v46 img{display:block!important;width:78px!important;height:auto!important;max-width:none!important;object-fit:contain!important;mix-blend-mode:multiply}


/* v47: Expression Practice keeps standard navy title text; green is the whole task background, not the heading. */
#dialoguePracticeV14{
  background:linear-gradient(180deg,#f2fbf7 0%,#eaf8f3 100%)!important;
  border-color:#bfe6da!important;
}
#dialoguePracticeV14 .review-task-head h3{
  color:var(--navy)!important;
}
/* Keep the regenerated dumpling at the same visual footprint as the other 54px food icons. */
#speakingPracticeV14 .dumpling-art-v46{
  width:54px!important;
  height:54px!important;
  flex:0 0 54px!important;
  margin-bottom:2px!important;
  overflow:hidden!important;
}
#speakingPracticeV14 .dumpling-art-v46 img{
  width:54px!important;
  height:54px!important;
  max-width:54px!important;
  object-fit:contain!important;
}


/* v48 LOCK: Expression Practice = whole task card uses a clearly visible mint-green background. Title/text colors stay standard navy. */
#dialoguePracticeV14{
  background:#eefaf5!important;
  border:1.5px solid #b9e5d7!important;
}
#dialoguePracticeV14 .review-task-head{
  background:transparent!important;
}
#dialoguePracticeV14 .review-task-head h3{
  color:var(--navy)!important;
}
#dialoguePracticeV14 .review-instruction{
  background:#f8fffc!important;
  border-color:#cfece3!important;
}
#dialoguePracticeV14 .dialogue-question-v15{
  background:#f7fdfa!important;
  border-color:#cce9e0!important;
}
#dialoguePracticeV14 .dialogue-question-head-v15{
  background:#e7f7f1!important;
  border-color:#cce9e0!important;
}
#dialoguePracticeV14 .dialogue-q-num-v15{
  background:#d9f4eb!important;
  color:#148a73!important;
  border-color:#b9e5d7!important;
}
#dialoguePracticeV14 .dialogue-pinyin-btn-v15{
  border-color:#b9e5d7!important;
  background:#fbfffd!important;
}
#dialoguePracticeV14 .dialogue-choice-row-v14{
  background:#fbfffd!important;
}
#dialoguePracticeV14 .check-btn{
  background:var(--navy)!important;
  color:#fff!important;
}


/* v49 LOCK: Expression Practice green refers to the OUTER/BOTTOM COLOR FIELD behind the question cards.
   Inner instruction/question surfaces stay white/neutral; heading text stays navy. */
#dialoguePracticeV14{
  background:#eaf8f2!important;
  border:1.5px solid #b9e5d7!important;
}
#dialoguePracticeV14 .review-task-head{background:transparent!important;}
#dialoguePracticeV14 .review-task-head h3{color:var(--navy)!important;}
#dialoguePracticeV14 .review-instruction{
  background:#fff!important;
  border-color:#dfe5f0!important;
}
#dialoguePracticeV14 .dialogue-question-v15{
  background:#fff!important;
  border-color:#dfe5f0!important;
}
#dialoguePracticeV14 .dialogue-question-head-v15{
  background:#f6f8fd!important;
  border-color:#e4e8f1!important;
}
#dialoguePracticeV14 .dialogue-line-v14,
#dialoguePracticeV14 .dialogue-choice-row-v14{
  background:#fff!important;
}
#dialoguePracticeV14 .dialogue-q-num-v15{
  background:#e5f7f1!important;
  color:#148a73!important;
  border-color:#c7eadf!important;
}
#dialoguePracticeV14 .dialogue-pinyin-btn-v15{
  background:#fff!important;
  border-color:#d7deea!important;
  color:var(--navy)!important;
}
#dialoguePracticeV14 .dialogue-actions-v20{
  background:transparent!important;
}
#dialoguePracticeV14 .check-btn{
  background:var(--navy)!important;
  color:#fff!important;
}


/* V52 LOCK: Major question/task stems use the ClearTalk logo navy as the primary color.
   Avoid muted gray for actual question text; reserve gray for secondary descriptions/help text. */
#reading-practice .q-title,
#listening .listen-task-v8,
#listening .listen-cn-v8,
#speaking-review .review-task-head h3,
#speaking-review .dialogue-prompt-v15 b,
#speaking-review .sentence-order-chip-v36{
  color:var(--navy)!important;
}
#listening .listen-q-num-v8{color:var(--navy)!important;}


/* ===== V54 Reading cloze + grammar translation ===== */
.lesson-inline-practice-v54{margin-top:24px;padding:22px;border:1px solid #dfe6f4;border-radius:22px;background:#fbfcff}
.lesson-inline-practice-head-v54{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}
.lesson-inline-practice-head-v54 h3{margin:0;color:var(--navy);font-size:22px;line-height:1.25}
.lesson-inline-practice-head-v54 p{margin:5px 0 0;color:#69718c;font-size:13px;line-height:1.55}
.cloze-set-v54{padding:18px;border:1px solid #e2e7f2;border-radius:18px;background:#fff;margin-top:12px}
.cloze-set-title-v54{font-size:15px;font-weight:900;color:var(--navy);margin-bottom:12px}
.cloze-text-v54{font-size:20px;line-height:2;color:var(--ink);font-weight:650}
.cloze-blank-v54{display:inline-flex;align-items:center;justify-content:center;min-width:78px;min-height:38px;padding:3px 10px;margin:0 4px;border:1.5px dashed #9fb2dc;border-radius:11px;background:#f5f8ff;color:var(--navy);font-weight:900;vertical-align:middle;cursor:pointer}
.cloze-blank-v54.filled{border-style:solid;border-color:#b5e4d8;background:#eefbf8;color:#148a73}
.cloze-wordbank-v54{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:14px;padding-top:13px;border-top:1px solid #edf0f6}
.cloze-bank-label-v54{font-size:12px;color:#737b99;font-weight:900;margin-right:2px}
.cloze-chip-v54{border:1px solid #d8dfef;border-radius:999px;background:#fff;color:var(--navy);padding:8px 13px;font-weight:900;cursor:pointer}
.cloze-chip-v54.selected{border-color:var(--blue);background:var(--soft-blue);box-shadow:0 0 0 3px rgba(38,96,229,.10)}
.cloze-chip-v54.used{opacity:.42;text-decoration:line-through;pointer-events:none}
.cloze-actions-v54,.translation-actions-v54{display:flex;justify-content:flex-end;gap:9px;margin-top:14px;flex-wrap:wrap}
.cloze-feedback-v54,.translation-feedback-v54{min-height:20px;margin-top:10px;font-size:13px;font-weight:850;color:#68718e}
.cloze-feedback-v54.ok,.translation-feedback-v54.ok{color:var(--success)}
.cloze-feedback-v54.no,.translation-feedback-v54.no{color:var(--danger)}
.grammar-translation-v54{margin-top:18px;padding:16px;border:1px solid #dfe6f4;border-radius:17px;background:#fff}
.grammar-translation-title-v54{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:12px;color:var(--navy)}
.grammar-translation-title-v54 b{font-size:16px}.grammar-translation-title-v54 span{font-size:12px;color:#737b99;font-weight:800}
.translation-item-v54{padding:13px 0;border-top:1px solid #edf0f6}
.translation-item-v54:first-of-type{border-top:0;padding-top:0}
.translation-en-v54{font-size:16px;line-height:1.45;color:var(--navy);font-weight:850;margin-bottom:7px}
.translation-hint-v54{font-size:12px;color:#6e7794;margin-bottom:8px}.translation-hint-v54 b{color:var(--blue)}
.translation-input-v54{width:100%;border:1.5px solid #dbe2ef;border-radius:12px;padding:11px 13px;background:#fbfcff;color:var(--ink);font-size:17px;outline:none}
.translation-input-v54:focus{border-color:#9bb0e9;box-shadow:0 0 0 3px rgba(38,96,229,.08);background:#fff}
.translation-item-feedback-v54{min-height:18px;margin-top:6px;font-size:12px;font-weight:850}
.translation-item-feedback-v54.ok{color:var(--success)}.translation-item-feedback-v54.no{color:var(--danger)}
@media(max-width:700px){.lesson-inline-practice-v54{padding:16px}.cloze-set-v54{padding:14px}.cloze-text-v54{font-size:18px}.lesson-inline-practice-head-v54 h3{font-size:20px}.cloze-blank-v54{min-width:68px}}


/* V55: match practice heading to ClearTalk navy; hide hints until requested; show one cloze set at a time. */
.grammar-translation-title-v54,
.grammar-translation-title-v54 b,
.grammar-translation-title-v54 .lookup-token,
.grammar-translation-title-v54 *{color:var(--navy)!important;}
.translation-hint-v54[hidden]{display:none!important;}
.translation-hint-btn-v55{border:1px solid #cfd9ef;border-radius:999px;background:#fff;color:var(--blue);font-size:12px;font-weight:900;padding:7px 12px;margin:1px 0 9px;cursor:pointer;}
.translation-hint-btn-v55:hover{background:var(--soft-blue);}
.cloze-progress-v55{flex:0 0 auto;border:1px solid #cfe8e1;border-radius:999px;background:#eef9f6;color:var(--teal);font-size:13px;font-weight:950;padding:7px 11px;}
#readingClozeV54 .cloze-set-v54{display:none;}
#readingClozeV54 .cloze-set-v54.cloze-active-v55{display:block;}
#readingClozeV54 .cloze-next-v55:disabled{opacity:.42;cursor:not-allowed;filter:saturate(.5);}
@media(max-width:700px){.lesson-inline-practice-head-v54{align-items:flex-start}.cloze-actions-v55{justify-content:stretch}.cloze-actions-v55 button{flex:1 1 44%;}}


#vocab .v7-vocab-card{padding-right:58px!important}
.vocab-audio-btn-v79{
  position:absolute;right:14px;top:14px;z-index:5;
  width:40px;height:40px;flex:0 0 40px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:#eefbf8;color:#13947f;
  border:1px solid #cfeee6;box-shadow:none;
  font-size:16px;font-weight:950;line-height:1;cursor:pointer;
  transition:.16s;
}
.vocab-audio-btn-v79:hover,.vocab-audio-btn-v79:focus-visible{
  background:#e2f8f2;color:#118a76;box-shadow:0 4px 10px rgba(24,191,160,.10);
  transform:translateY(-1px);outline:none;
}
.vocab-audio-btn-v79.playing{
  background:#e2f8f2;color:#118a76;box-shadow:0 0 0 3px rgba(24,191,160,.10);
}
#vocab .v7-vocab-card .vocab-check{right:14px;bottom:12px}


#speakingPracticeV14 .feel-bank-v110{grid-column:1/-1!important;}
#speakingPracticeV14 .feel-bank-v110 .speak-items-v14{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:10px!important;}
#speakingPracticeV14 .feel-bank-v110 .speak-item-v14{min-width:0!important;}
@media(max-width:1100px){#speakingPracticeV14 .feel-bank-v110 .speak-items-v14{grid-template-columns:repeat(3,minmax(0,1fr))!important;}}
@media(max-width:700px){#speakingPracticeV14 .feel-bank-v110 .speak-items-v14{grid-template-columns:repeat(2,minmax(0,1fr))!important;}}


.classroom2-bar{display:none;margin:14px 0 0;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.96);box-shadow:0 8px 24px rgba(25,33,101,.06)}
.classroom2-bar-left{display:flex;align-items:center;gap:10px;min-width:0}
.classroom2-badge{width:38px;height:38px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:var(--soft-blue);color:var(--blue);font-size:18px;flex:0 0 38px}
.classroom2-bar-title{font-size:14px;font-weight:950;color:var(--navy);line-height:1.2}
.classroom2-bar-sub{font-size:11px;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.classroom2-start{border:0;border-radius:13px;padding:10px 15px;background:var(--navy);color:#fff;font-weight:900;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.classroom2-start:hover{background:#222d7d}
.classroom2-panel{display:none;margin:10px 0 0;padding:18px;border:1px solid #dfe5f1;border-radius:22px;background:linear-gradient(180deg,#fff,#fbfcff);box-shadow:0 12px 30px rgba(25,33,101,.07)}
.classroom2-panel.open{display:block}
.classroom2-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:15px}
.classroom2-head h3{margin:0;color:var(--navy);font-size:20px}
.classroom2-status{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;background:#eefbf8;color:#148a75;font-size:12px;font-weight:900}
.classroom2-dot{width:8px;height:8px;border-radius:50%;background:var(--teal)}
.classroom2-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:12px}
.classroom2-card{border:1px solid var(--line);border-radius:17px;background:#fff;padding:14px}
.classroom2-label{font-size:11px;font-weight:900;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;margin-bottom:7px}
.classroom2-code{font-size:28px;letter-spacing:.12em;font-weight:950;color:var(--navy)}
.classroom2-link-row{display:flex;gap:8px;align-items:center}
.classroom2-link{min-width:0;flex:1;border:1px solid #dfe4f1;border-radius:12px;background:#f9fbff;padding:10px 11px;font-size:12px;color:#596080;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.classroom2-copy,.classroom2-small-btn{border:1px solid #d9e0ef;border-radius:11px;background:#fff;color:var(--navy);padding:9px 11px;font-size:12px;font-weight:900;white-space:nowrap}
.classroom2-copy:hover,.classroom2-small-btn:hover{background:var(--soft-blue)}
.classroom2-mode{margin-top:12px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 14px;border-radius:16px;background:#f7f9fd;border:1px solid var(--line)}
.classroom2-mode-copy{min-width:0}
.classroom2-mode-title{font-size:14px;font-weight:950;color:var(--navy)}
.classroom2-mode-desc{font-size:11px;color:var(--muted);margin-top:3px}
.classroom2-mode-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.classroom2-mode-btn{border:1px solid #dce3ef;border-radius:999px;background:#fff;color:#5c6483;padding:8px 11px;font-size:11px;font-weight:900}
.classroom2-mode-btn.active{background:var(--soft-teal);border-color:#cfeee6;color:#118a76}
.classroom2-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid #edf0f6}
.classroom2-note{font-size:11px;color:var(--muted);line-height:1.45}
.classroom2-end{border:0;background:transparent;color:#b44545;font-size:12px;font-weight:900;padding:8px 4px}
.classroom2-toast{position:fixed;right:18px;bottom:18px;z-index:180;background:var(--navy);color:#fff;border-radius:13px;padding:11px 14px;font-size:12px;font-weight:850;box-shadow:0 12px 28px rgba(25,33,101,.24);opacity:0;transform:translateY(8px);pointer-events:none;transition:.18s}
.classroom2-toast.show{opacity:1;transform:none}
@media(max-width:760px){.classroom2-bar{align-items:flex-start}.classroom2-bar-sub{white-space:normal}.classroom2-grid{grid-template-columns:1fr}.classroom2-mode{align-items:flex-start;flex-direction:column}.classroom2-mode-actions{justify-content:flex-start}.classroom2-footer{align-items:flex-start;flex-direction:column}.classroom2-start{padding:10px 12px;font-size:12px}}


.student-live-bar{
  display:none;margin:14px 0 0;padding:11px 14px;border:1px solid #dfe6f4;border-radius:16px;
  background:#fff;align-items:center;justify-content:space-between;gap:12px;
  box-shadow:0 8px 22px rgba(25,33,101,.05)
}
.student-live-left{display:flex;align-items:center;gap:10px;min-width:0}
.student-live-dot{width:9px;height:9px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px rgba(24,191,160,.10)}
.student-live-title{font-size:13px;font-weight:950;color:var(--navy)}
.student-live-sub{font-size:11px;color:var(--muted);margin-top:2px}
html[data-classroom-role="teacher"] .classroom2-bar{display:flex}
html[data-classroom-role="student"] .student-live-bar{display:flex}
@media(max-width:640px){
  .student-live-bar{align-items:flex-start}
}


.classroom-mode-entry{
  border:1px solid var(--line);
  background:#fff;
  color:var(--navy);
  border-radius:999px;
  padding:8px 12px;
  font-size:12px;
  font-weight:900;
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}
.classroom-mode-entry:hover{background:var(--soft-blue);border-color:#ccd7f3}
.selfstudy-mode-entry{
  border:1px solid var(--line);
  background:#fff;
  color:var(--navy);
  border-radius:999px;
  padding:8px 12px;
  font-size:12px;
  font-weight:900;
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}
.selfstudy-mode-entry:hover{background:var(--soft-blue);border-color:#ccd7f3}
html[data-classroom-role="student"] .classroom-mode-entry{display:none!important}
html[data-classroom-teacher-open="true"] .classroom2-bar{display:flex}
html[data-classroom-teacher-open="true"] .classroom2-panel.open{display:block}


.dialogue-audio-download-btn{
  border:1px solid #d9e2ef;
  background:#fff;
  color:var(--navy);
  border-radius:999px;
  padding:9px 13px;
  font-size:12px;
  font-weight:900;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  white-space:nowrap;
  transition:.16s ease;
}
.dialogue-audio-download-btn:hover,
.dialogue-audio-download-btn:focus-visible{
  background:var(--soft-blue);
  border-color:#c8d5f0;
  color:var(--blue);
  outline:none;
}


.free-pdf-download{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border-color:#d5dcf1;
  background:linear-gradient(180deg,#fff,#f7f9ff);
  color:var(--navy);
  box-shadow:0 4px 12px rgba(25,33,101,.05);
}
.free-pdf-download:hover{
  background:var(--soft-blue);
  border-color:#b9c4ec;
}


/* ClearTalk HSK UI Skill v1.2:
   Chinese core content in Speaking support cards must never inherit muted gray. */
#speakingPracticeV14 .speak-item-v14 > b,
#speakingPracticeV14 .speak-item-v14 .speak-word-row-v65 > b,
#speakingPracticeV14 .speak-bank-v14 .speak-items-v14 b {
  color: var(--navy) !important;
  opacity: 1 !important;
  -webkit-text-fill-color: var(--navy) !important;
}
#speakingPracticeV14 .speak-item-v14 > small,
#speakingPracticeV14 .speak-item-v14 .speak-word-row-v65 > small {
  color: var(--blue) !important;
}
#speakingPracticeV14 .speak-item-v14 > div:not(.speak-word-row-v65) {
  color: var(--muted);
}


/* HSK2-2 final QA: IME panels must never create horizontal overflow on narrow screens. */
@media(max-width:700px){
  #listening .ct-listening-kb-v24,
  #readingClozeV54 .pinyin-keyboard-v57,
  .grammar-translation-v54 .pinyin-keyboard-v57,
  .grammar-translation-v54 .translation-keyboard-v56{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin-left:0!important;
    margin-right:0!important;
    box-sizing:border-box!important;
  }
}


/* v3.34 Beginner MASTER lock: Learning Flow stays visible while scrolling. */
.lesson-flow-nav.lesson-flow-nav-v13.lesson-flow-nav-v14{
  position:sticky!important;
  top:96px!important;
  z-index:140!important;
  align-self:start!important;
}
@media(max-width:760px){
  .lesson-flow-nav.lesson-flow-nav-v13.lesson-flow-nav-v14{
    position:sticky!important;
    top:8px!important;
    z-index:140!important;
  }
  .section{scroll-margin-top:112px!important;}
}


/* v3.34 semantic feedback lock: correct = green; wrong/retry = red. */
#reading-practice .feedback.ok,
#reading-practice .feedback.correct,
#reading-practice [class*="feedback"].ok,
#reading-practice [class*="feedback"].correct,
#listening .feedback.ok,
#listening .feedback.correct,
#listening [class*="feedback"].ok,
#listening [class*="feedback"].correct{
  color:var(--success)!important;
}
#reading-practice .feedback.no,
#reading-practice .feedback.wrong,
#reading-practice [class*="feedback"].no,
#reading-practice [class*="feedback"].wrong,
#listening .feedback.no,
#listening .feedback.wrong,
#listening [class*="feedback"].no,
#listening [class*="feedback"].wrong{
  color:var(--danger)!important;
}


/* White major-module shells; tint belongs only to inner learning/interaction surfaces. */
#grammar.section,#reading-practice.section,#listening.section{background:#fff!important;}
#grammar .grammar-card-v7{background:#fff!important;border:1px solid #dfe6f0!important;box-shadow:none!important;}
#grammar .grammar-structure-v8{background:#f3f7ff!important;border:1px solid #dfe7f7!important;border-radius:16px!important;}
#grammar .grammar-explain-pair-v8{background:#f0fbf8!important;border:1px solid #d4f1e9!important;border-radius:16px!important;}
#reading-practice .question{background:#fff!important;border:1px solid #dfe6f0!important;box-shadow:none!important;}
#reading-practice .options{padding:12px;border-radius:16px;background:#f7f9ff;}
#listening .listen-question{background:#fff!important;border:1px solid #dfe6f0!important;box-shadow:none!important;}
#listening .listen-support-v8{background:#f3f7ff!important;border:1px solid #dfe7f7!important;border-radius:16px!important;padding:13px 15px!important;}
/* No decorative blank strip: support surface does not exist until Hanzi/Pinyin is opened. */
#listening .listen-question:not(.show-listen-hanzi):not(.show-listen-pinyin) .listen-support-v8{display:none!important;margin:0!important;padding:0!important;border:0!important;min-height:0!important;height:0!important;}
#listening .listen-question.show-listen-hanzi .listen-support-v8,
#listening .listen-question.show-listen-pinyin .listen-support-v8{display:grid!important;height:auto!important;margin:0 0 13px 34px!important;}
/* Lookup tokens must visually remain part of their sentence, not mini buttons. */
.lookup-token{font:inherit!important;font-size:inherit!important;font-weight:inherit!important;line-height:inherit!important;letter-spacing:inherit!important;vertical-align:baseline!important;}
@media(max-width:700px){#listening .listen-question.show-listen-hanzi .listen-support-v8,#listening .listen-question.show-listen-pinyin .listen-support-v8{margin-left:0!important;}}

/* ===== V45 expression color + dumpling visual lock ===== */
#dialoguePracticeV14{
  background:linear-gradient(180deg,#f4fcf9 0%,#eefaf6 100%)!important;
  border-color:#cfeee5!important;
}
#dialoguePracticeV14 .review-task-num{
  background:#e2f8f2!important;
  color:#15967f!important;
  border-color:#c8ece2!important;
}
#dialoguePracticeV14 .review-instruction{
  background:rgba(255,255,255,.72)!important;
  border:1px solid #d7efe8!important;
}
#dialoguePracticeV14 .dialogue-question-v15{
  background:#fff!important;
  border-color:#d7ece6!important;
}
#dialoguePracticeV14 .dialogue-q-num-v15{
  background:#e7f8f3!important;
  color:#168d78!important;
}


/* V50 FINAL LOCK: the visible OUTER COLOR FIELD of Expression Practice is green.
   This rule is intentionally placed at the end of the document so older blue/white overrides cannot win. */
#dialoguePracticeV14.review-task-card.expression-card-v14{
  background:#e9f8f1!important;
  border-color:#b9e5d3!important;
}
#dialoguePracticeV14 .review-task-head{background:transparent!important;}
#dialoguePracticeV14 .review-task-head h3{color:var(--navy)!important;}
#dialoguePracticeV14 .review-instruction,
#dialoguePracticeV14 .dialogue-question-v15,
#dialoguePracticeV14 .dialogue-line-v14,
#dialoguePracticeV14 .dialogue-choice-row-v14{background:#fff!important;}
#dialoguePracticeV14 .dialogue-actions-v20{background:transparent!important;}


/* V51 LOCK: In Expression Practice, each question sentence sits on the SAME ROW as its item number.
   The whole number+question header strip is pure white. The mint color remains only on the outer task field. */
#dialoguePracticeV14 .dialogue-question-head-v51{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  padding:14px 16px!important;
  background:#fff!important;
  border-bottom:1px solid #e7eaf3!important;
}
#dialoguePracticeV14 .dialogue-question-inline-v51{
  display:flex!important;
  align-items:center!important;
  gap:14px!important;
  min-width:0!important;
  flex:1 1 auto!important;
}
#dialoguePracticeV14 .dialogue-question-head-v51 .dialogue-prompt-v15{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:#fff!important;
  min-width:0!important;
}
#dialoguePracticeV14 .dialogue-question-head-v51 .dialogue-prompt-v15 b{
  font-size:25px!important;
  line-height:1.35!important;
}
#dialoguePracticeV14 .dialogue-question-head-v51 .dialogue-prompt-v15 .dialogue-py-v15{
  margin-top:4px!important;
}
#dialoguePracticeV14 .dialogue-question-v15{background:#fff!important;}
@media(max-width:760px){
  #dialoguePracticeV14 .dialogue-question-head-v51{align-items:flex-start!important;}
  #dialoguePracticeV14 .dialogue-question-inline-v51{align-items:flex-start!important;}
  #dialoguePracticeV14 .dialogue-question-head-v51 .dialogue-prompt-v15 b{font-size:22px!important;}
}
/* 2.36：手机上题干被挤成一行一两个字 —— 这一行是 flex，题号、A：、题干、拼音开关
   全挤在一排，390px 下留给题干的宽度只剩几十像素，于是「电动车贵吗？」竖着排了六行。
   **这个毛病是旧的**（三选一那版就有，全库 28 课都这样），2026-09-23 做 R-098
   拍样板时才看见。改法：窄屏下让拼音开关自己占一行，题干拿满整行宽。 */
@media(max-width:650px){
  #dialoguePracticeV14 .dialogue-question-head-v51{
    flex-wrap:wrap!important;
    gap:8px!important;
  }
  #dialoguePracticeV14 .dialogue-question-inline-v51{
    flex:1 1 100%!important;
    min-width:100%!important;
  }
  #dialoguePracticeV14 .dialogue-question-head-v51 > .switch-control{
    flex:0 0 auto!important;
    margin-left:auto!important;
  }
}


#readingClozeV54 .cloze-wordbank-v56[hidden]{display:none!important}
#readingClozeV54 .cloze-dialogue-v56{display:grid;gap:10px;line-height:1.9}
#readingClozeV54 .cloze-hint-btn-v56{margin-top:14px}
#readingClozeV54 .cloze-wordbank-v56{margin-top:10px}
#readingClozeV54 .cloze-bank-label-v54{color:var(--navy);font-weight:900}
.translation-keyboard-v56{margin-top:10px}


/* ClearTalk HSK MASTER: ONE canonical Pinyin IME for Translation / Text Practice / Listening.
   Visual + interaction model is the Listening Practice keyboard. */
.ct-listening-kb-v24{
  display:none;
  margin:10px 0 14px;
  padding:12px 13px;
  border:1px solid #d9e2f1;
  border-radius:16px;
  background:#f7f9ff;
  box-shadow:0 8px 20px rgba(25,33,101,.06);
  width:100%;max-width:680px;box-sizing:border-box;
  position:relative;z-index:30;
}
.ct-listening-kb-v24.show{display:block!important}
.ct-listening-kb-v24 .ct-kb-head-v24{
  display:flex;justify-content:space-between;gap:10px;
  font-size:12px;font-weight:900;color:var(--navy);margin-bottom:9px
}
.ct-listening-kb-v24 .ct-kb-compose-v24{
  display:flex;align-items:center;gap:8px;min-height:38px;
  padding:7px 10px;border:1px solid #dbe3f2;border-radius:11px;
  background:#fff;margin-bottom:8px
}
.ct-listening-kb-v24 .ct-kb-compose-v24 .label{font-size:11px;color:#7b849b;font-weight:850}
.ct-listening-kb-v24 .ct-kb-compose-v24 .text{font-size:17px;color:var(--navy);font-weight:900;letter-spacing:.4px}
.ct-listening-kb-v24 .ct-kb-candidates-v24{
  display:flex;gap:7px;flex-wrap:nowrap;align-items:center;
  height:48px;min-height:48px;max-height:48px;padding:5px 0 9px;box-sizing:border-box;
  overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch
}
.ct-listening-kb-v24 .ct-kb-candidate-v24{
  flex:0 0 auto;min-width:44px;height:34px;padding:0 10px;border:1px solid #cdd9ee;
  border-radius:9px;background:#fff;color:var(--navy);font-size:16px;font-weight:900;cursor:pointer
}
.ct-listening-kb-v24 .ct-kb-candidate-v24:hover{background:#eaf2ff;border-color:#aebfe1}
.ct-listening-kb-v24 .ct-kb-row-v24{display:flex;gap:6px;justify-content:center;margin-top:6px;flex-wrap:nowrap}
.ct-listening-kb-v24 .ct-kb-key-v24{
  flex:0 1 47px;min-width:32px;height:39px;border:1px solid #d4deed;border-radius:9px;
  background:#fff;color:var(--navy);font-weight:900;cursor:pointer;box-shadow:0 1px 2px rgba(25,33,101,.04)
}
.ct-listening-kb-v24 .ct-kb-key-v24.action{flex:0 1 auto;padding:0 14px;color:#68738b;font-size:12px}
.ct-listening-kb-v24 .ct-kb-key-v24:hover{background:#edf3ff}
.ct-listening-kb-v24 .ct-kb-note-v24{color:#8991a5;font-size:12px;align-self:center}
#readingClozeV54 .cloze-blank-v54{cursor:text}
#readingClozeV54 .cloze-blank-v54.keyboard-active-v57{outline:3px solid rgba(64,104,183,.12);border-color:#7898d7}
.ct-vk-off-v11 .ct-listening-kb-v24,
.ct-vk-off-v11 .ct-listening-kb-v24.show,
html.ct-kb-hard-closed-v19 .ct-listening-kb-v24{display:none!important}
.ct-final-vk-on .ct-listening-kb-v24.show{display:block!important}
@media(max-width:700px){
  .ct-listening-kb-v24{width:100%!important;max-width:100%!important;min-width:0!important;margin-left:0!important;margin-right:0!important;padding:10px!important}
  .ct-listening-kb-v24 .ct-kb-key-v24{height:37px;min-width:28px}
  .ct-listening-kb-v24 .ct-kb-row-v24{gap:4px}
}


/* v58 LOCK: all three grammar summary cards use the same ClearTalk blue family. */
#grammar .grammar-card-v7 summary,
#grammar .grammar-card-v7[open] summary,
#grammar .grammar-card-v7:nth-child(odd) summary,
#grammar .grammar-card-v7:nth-child(even) summary,
#grammar .grammar-card-v7[open]:nth-child(odd) summary,
#grammar .grammar-card-v7[open]:nth-child(even) summary{background:#f2f6ff!important;}
#grammar .grammar-card-v7 summary small{color:#6f7892!important;}

/* Real-keyboard + virtual IME polish. */
.pinyin-candidate-v57::before{content:attr(data-index) '. ';font-size:11px;color:#7c87a3;font-weight:800;}
.pinyin-kb-head-v57 span:last-child{color:#6e7893;font-weight:800;}
#listening .listen-fill.keyboard-active-v58,
.translation-input-v54.keyboard-active-v58{outline:3px solid rgba(64,104,183,.12)!important;border-color:#7898d7!important;}
#readingClozeV54 .cloze-blank-v54[contenteditable="true"]{min-width:72px;display:inline-block;white-space:nowrap;}


/* v59 locked interaction: objective practices use Restart + Show Answers + Submit. */
.show-answer-btn-v59{border:1.5px solid #cfd9ef;border-radius:12px;background:#fff;color:var(--navy);padding:10px 15px;font-weight:900;cursor:pointer;min-height:42px}
.show-answer-btn-v59:hover{background:#f6f8ff;border-color:#b8c7e8}
.show-answer-btn-v59:focus-visible{outline:3px solid rgba(38,96,229,.16);outline-offset:2px}
.vocab-actions-v59{display:flex;justify-content:flex-end;gap:9px;margin-top:14px;flex-wrap:wrap}
.correct-answer-note-v59{margin-top:7px;color:var(--navy);font-size:13px;font-weight:850}


/* v60 LOCK: answer reveal is reversible visually, but once viewed this attempt can no longer be submitted until Restart. */
.answer-reveal-note-v60{margin-top:8px;padding:9px 11px;border-radius:10px;background:#f3f7ff;color:var(--navy);font-size:13px;font-weight:850;line-height:1.5}
.show-answer-btn-v59.answers-open-v60{background:#f6f8ff;border-color:#b8c7e8}
.check-btn.answer-locked-v60,.check-btn.secondary.answer-locked-v60{opacity:.45;cursor:not-allowed;pointer-events:none}
.answer-viewed-note-v60{margin-top:8px;color:#7a849d;font-size:12px;font-weight:750}
.transcript-manual-v60{display:flex;justify-content:flex-start;margin:12px 0 8px}
.show-transcript-btn-v60{border:1.5px solid #cfd9ef;border-radius:12px;background:#fff;color:var(--navy);padding:10px 15px;font-weight:900;cursor:pointer;min-height:42px}
.show-transcript-btn-v60:hover{background:#f6f8ff;border-color:#b8c7e8}
#listeningTranscript{display:none}
#transcriptReopenV40{display:none!important}


/* v61: Text Practice pinyin support; vocabulary action order; remove legacy duplicate listening keyboard. */
#readingClozeV54 .lesson-inline-practice-head-v54{align-items:flex-start!important}
#readingClozeV54 .cloze-head-actions-v61{display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:flex-end}
#readingClozeV54 .cloze-pinyin-btn-v61{border:1px solid #cbd8ef;border-radius:11px;background:#fff;color:var(--navy);padding:8px 12px;font-size:12px;font-weight:900;cursor:pointer;min-height:36px}
#readingClozeV54 .cloze-pinyin-btn-v61:hover{background:#f4f7ff;border-color:#aebfe1}
#readingClozeV54 .cloze-line-pinyin-v61{display:none;color:var(--blue);font-size:12px;font-weight:800;line-height:1.45;margin:2px 0 5px 22px;letter-spacing:.1px}
#readingClozeV54.show-cloze-pinyin-v61 .cloze-set-v54:not([hidden]) .cloze-line-pinyin-v61{display:block}
#vocabMatchV8 .vocab-match-reset-v8{display:none!important}
#vocabMatchV8 .vocab-actions-v59{justify-content:flex-end!important}
#listening #pinyinKeyboardV12,
#listening .pinyin-keyboard-v12{display:none!important}
#listening .pinyin-keyboard-v57{display:none!important}
#listening .pinyin-keyboard-v57.show{display:block!important}
.answer-viewed-note-v60.v61-current-note{color:#7a5a16!important;background:#fff8df!important;border:1px solid #ead79a!important;padding:9px 11px;border-radius:10px;font-size:12px;font-weight:800;margin-top:8px}
@media(max-width:700px){#readingClozeV54 .cloze-head-actions-v61{justify-content:flex-start}.cloze-line-pinyin-v61{margin-left:0!important}}


/* v62: all Pinyin controls use the same switch UI; Vocabulary Practice gets Pinyin; Listening separates question Pinyin from per-item transcript. */
#vocabMatchV8 .match-py-v8{display:none!important;color:var(--blue)!important;font-size:12px!important;font-weight:800!important;margin-top:4px!important}
#vocabMatchV8.show-vocab-pinyin-v62 .match-py-v8{display:block!important}
#vocabMatchV8 .vocab-practice-head-v8{display:flex!important;justify-content:space-between!important;align-items:flex-start!important;gap:14px!important}
#vocabMatchV8 .vocab-head-controls-v62{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* Normalize older text-only Pinyin buttons to the canonical switch shape. */
button.v62-pinyin-switch.switch-control{border:0!important;background:transparent!important;padding:4px 2px!important;min-height:36px!important;box-shadow:none!important;color:#66708f!important}
button.v62-pinyin-switch .switch-label{font-size:13px!important;font-weight:900!important;color:#66708f!important;white-space:nowrap}
/* Listening: legacy answer-revealing support controls never appear. */
#listening .listen-support-v8{display:none!important}
#listening #listeningTranscript,#listening .transcript-reopen-v40{display:none!important}
/* The Show Transcript button toggles the `hidden` attribute on #listeningTranscript;
   the blanket rule above must not defeat that when the attribute is actually removed. */
#listening #listeningTranscript:not([hidden]){display:block!important}
#listening .listen-question-controls-v8{display:flex!important;align-items:center!important;gap:9px!important;flex-wrap:wrap!important;justify-content:flex-end!important}
#listening .listening-question-pinyin-v62{display:none;color:var(--blue);font-size:13px;font-weight:800;line-height:1.5;margin:7px 0 0 0}
#listening .listen-question.show-question-pinyin-v62 .listening-question-pinyin-v62{display:block}
#listening .listen-local-transcript-v62{display:none;margin-top:12px;padding:14px 16px;border-radius:14px;background:#fff;border:1px solid #dbe4f4}
#listening .listen-local-transcript-v62.open{display:block}
#listening .listen-local-transcript-head-v62{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:9px;flex-wrap:wrap}
#listening .listen-local-transcript-title-v62{font-size:13px;font-weight:900;color:var(--navy)}
#listening .listen-local-transcript-cn-v62{font-size:17px;font-weight:800;color:var(--navy);line-height:1.75}
#listening .listen-local-transcript-py-v62{display:none;margin-top:7px;color:var(--blue);font-size:13px;font-weight:800;line-height:1.65}
#listening .listen-local-transcript-v62.show-transcript-pinyin-v62 .listen-local-transcript-py-v62{display:block}
#listening .show-item-transcript-v62{border:1px solid #cbd8ef;background:#fff;color:var(--navy);font-weight:900;border-radius:11px;padding:8px 11px;cursor:pointer;min-height:36px}
#listening .show-item-transcript-v62:hover{background:#f4f7ff;border-color:#aebfe1}
@media(max-width:700px){#listening .listen-question-controls-v8{justify-content:flex-start!important}.vocab-practice-head-v8{flex-direction:column!important}}


/* V65 — Hanzi stays LEFT; Pinyin sits RIGHT on the same line whenever space allows. */

/* Text Practice: each original-text line becomes Hanzi-left + Pinyin-right. */
#readingClozeV54 .cloze-dialogue-v56{
  display:flex!important;
  flex-direction:column!important;
  gap:8px!important;
}
#readingClozeV54 .cloze-line-row-v65{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(150px,34%)!important;
  align-items:baseline!important;
  gap:18px!important;
  min-width:0!important;
}
#readingClozeV54 .cloze-line-row-v65 > .cloze-hanzi-v65{
  min-width:0!important;
  text-align:left!important;
}
#readingClozeV54 .cloze-line-row-v65 > .cloze-line-pinyin-v61{
  display:none!important;
  margin:0!important;
  text-align:left!important;
  color:var(--blue)!important;
  font-size:14px!important;
  line-height:1.5!important;
  font-weight:800!important;
}
#readingClozeV54.show-cloze-pinyin-v61 .cloze-set-v54:not([hidden]) .cloze-line-row-v65 > .cloze-line-pinyin-v61{display:block!important}

/* Vocabulary Practice: Hanzi left, Pinyin right inside the same word card. */
#vocabMatchV8 .vocab-match-item-v8{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:16px!important;
  text-align:left!important;
}
#vocabMatchV8 .vocab-match-item-v8 .vocab-hanzi-v65{flex:1 1 auto!important;min-width:0!important;text-align:left!important}
#vocabMatchV8 .vocab-match-item-v8 .match-py-v8{
  flex:0 0 auto!important;
  display:none!important;
  margin:0 0 0 auto!important;
  color:var(--blue)!important;
  font-size:14px!important;
  font-weight:800!important;
  text-align:right!important;
}
#vocabMatchV8.show-vocab-pinyin-v62 .vocab-match-item-v8 .match-py-v8{display:block!important}

/* Listening: the Hanzi stem and Pinyin live INSIDE the same mint question surface. */
#listening .listening-stem-row-v64{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(180px,34%)!important;
  align-items:center!important;
  gap:20px!important;
  width:100%!important;
  min-width:0!important;
  padding:22px 28px!important;
  border:1px solid #bfe7dc!important;
  border-radius:18px!important;
  background:#eaf8f4!important;
  box-sizing:border-box!important;
}
#listening .listening-stem-row-v64 > .listening-fill-prompt-v23,
#listening .listening-stem-row-v64 > .listening-question-stem-v23{
  background:transparent!important;
  border:0!important;
  padding:0!important;
  margin:0!important;
  min-width:0!important;
  text-align:left!important;
}
#listening .listening-stem-row-v64 > .listening-question-pinyin-v62{
  display:none!important;
  margin:0!important;
  max-width:none!important;
  text-align:left!important;
  color:var(--blue)!important;
  font-size:16px!important;
  line-height:1.55!important;
  font-weight:800!important;
}
#listening .listen-question.show-question-pinyin-v62 .listening-stem-row-v64 > .listening-question-pinyin-v62{display:block!important}
/* Choices also keep Hanzi left and their Pinyin right within the white option card. */
#listening .listen-option-copy-v8{display:inline-flex!important;align-items:baseline!important;gap:12px!important;min-width:0!important}
#listening .listen-option-py-v8{display:none!important;margin:0!important;color:var(--blue)!important;font-size:.78em!important;font-weight:800!important}
#listening .listen-question.show-question-pinyin-v62 .listen-option-py-v8{display:inline!important}

/* Speaking model: Hanzi left, Pinyin right. */
#speakingPracticeV14 .speaking-model-line-v21 > div{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(160px,38%)!important;
  align-items:baseline!important;
  gap:16px!important;
  width:100%!important;
  min-width:0!important;
}
#speakingPracticeV14 .speaking-model-line-v21 p{margin:0!important;text-align:left!important;min-width:0!important}
#speakingPracticeV14 .speaking-model-line-v21 .speaking-model-py-v15{
  display:none!important;
  margin:0!important;
  color:var(--blue)!important;
  text-align:left!important;
  font-size:14px!important;
  line-height:1.5!important;
}
#speakingPracticeV14 .speaking-model-v21.show-model-py .speaking-model-line-v21 .speaking-model-py-v15{display:block!important}

/* Speaking Food / Drinks word cards: Hanzi left, Pinyin right under the illustration row. */
#speakingPracticeV14 .speak-item-v14 b,
#speakingPracticeV14 .speak-item-v14 small{margin:0!important}
#speakingPracticeV14 .speak-item-v14 .speak-word-row-v65{
  display:flex!important;
  align-items:baseline!important;
  justify-content:center!important;
  gap:10px!important;
  width:100%!important;
  min-width:0!important;
}
#speakingPracticeV14 .speak-item-v14 .speak-word-row-v65 small{
  display:none!important;
  color:var(--blue)!important;
  font-size:13px!important;
  font-weight:800!important;
}
#speakingPracticeV14 .speak-bank-v14.show-bank-pinyin-v43 .speak-word-row-v65 small{display:inline!important}

@media(max-width:760px){
  #readingClozeV54 .cloze-line-row-v65,
  #listening .listening-stem-row-v64,
  #speakingPracticeV14 .speaking-model-line-v21 > div{
    grid-template-columns:1fr!important;
    gap:5px!important;
  }
  #readingClozeV54 .cloze-line-row-v65 > .cloze-line-pinyin-v61,
  #listening .listening-stem-row-v64 > .listening-question-pinyin-v62,
  #speakingPracticeV14 .speaking-model-line-v21 .speaking-model-py-v15{
    text-align:left!important;
  }
  #listening .listening-stem-row-v64{padding:18px 20px!important}
}


/* v73 LOCK: every task/instruction prompt follows one ClearTalk visual grammar.
   Chinese first, English second; white card, same border/radius/padding/type hierarchy. */
.task-instruction-v73{
  box-sizing:border-box!important;
  display:block!important;
  width:100%!important;
  max-width:none!important;
  margin:10px 0 18px!important;
  padding:13px 16px!important;
  border:1px solid #dfe8ee!important;
  border-radius:14px!important;
  background:#fff!important;
  box-shadow:none!important;
  color:var(--navy)!important;
  text-align:left!important;
}
.task-instruction-v73 .task-instruction-cn-v73,
.task-instruction-v73 > .task-instruction-cn-v73,
.task-instruction-v73 .review-instruction-cn-v11,
.task-instruction-v73 .zh-line-v18,
.task-instruction-v73.speaking-task-box-v16 .speaking-task-cn-v16{
  display:block!important;
  margin:0!important;
  color:var(--navy)!important;
  font-size:16px!important;
  line-height:1.5!important;
  font-weight:800!important;
}
.task-instruction-v73 .task-instruction-en-v73,
.task-instruction-v73 > .task-instruction-en-v73,
.task-instruction-v73 .review-instruction-en-v11,
.task-instruction-v73 .en-line-v18,
.task-instruction-v73.speaking-task-box-v16 .speaking-task-en-v16{
  display:block!important;
  margin:4px 0 0!important;
  color:#7c879f!important;
  font-size:14px!important;
  line-height:1.5!important;
  font-weight:600!important;
}
/* Head-attached instruction blocks should still look exactly like the review instruction cards. */
#readingClozeV54 .lesson-inline-practice-head-v54 p.task-instruction-v73,
#vocabMatchV8 .vocab-practice-head-v8 p.task-instruction-v73,
#reading-practice .section-desc.task-instruction-v73,
#listening .section-desc.task-instruction-v73,
#speaking-review .review-instruction.task-instruction-v73,
#speakingPracticeV14 .speaking-task-box-v16.task-instruction-v73,
.grammar-translation-v54 .grammar-task-instruction-v73{
  margin-top:10px!important;
  margin-bottom:16px!important;
}
/* Prevent legacy speaking styles from stripping the unified instruction card. */
#speakingPracticeV14 .speaking-task-box-v16.task-instruction-v73{
  border:1px solid #dfe8ee!important;
  background:#fff!important;
  border-radius:14px!important;
  padding:13px 16px!important;
  box-shadow:none!important;
}
/* Translation practice title no longer mixes its instruction on the same line. */
.grammar-translation-v54 .grammar-translation-title-v54{
  margin-bottom:0!important;
}
/* Listening sub-question stems: Chinese above English with one consistent hierarchy. */
#listening .listen-task-v8.task-stem-v73{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:2px!important;
  min-width:0!important;
}
#listening .task-stem-cn-v73{
  display:block!important;
  color:var(--navy)!important;
  font-size:22px!important;
  line-height:1.35!important;
  font-weight:850!important;
}
#listening .task-stem-en-v73{
  display:block!important;
  color:#7c879f!important;
  font-size:14px!important;
  line-height:1.35!important;
  font-weight:650!important;
}
@media(max-width:640px){
  .task-instruction-v73{padding:12px 14px!important;margin:9px 0 15px!important;border-radius:13px!important}
  .task-instruction-v73 .task-instruction-cn-v73,
  .task-instruction-v73 > .task-instruction-cn-v73,
  .task-instruction-v73 .review-instruction-cn-v11,
  .task-instruction-v73 .zh-line-v18,
  .task-instruction-v73.speaking-task-box-v16 .speaking-task-cn-v16{font-size:15px!important}
  .task-instruction-v73 .task-instruction-en-v73,
  .task-instruction-v73 > .task-instruction-en-v73,
  .task-instruction-v73 .review-instruction-en-v11,
  .task-instruction-v73 .en-line-v18,
  .task-instruction-v73.speaking-task-box-v16 .speaking-task-en-v16{font-size:13px!important}
  #listening .task-stem-cn-v73{font-size:20px!important}
  #listening .task-stem-en-v73{font-size:13px!important}
}


/* ClearTalk HSK Skill v1.3 — Text Practice keyboard is opt-in, and Chinese long lines avoid orphan characters. */
#readingClozeV54 .virtual-keyboard-toggle-v10{
  border:1px solid #cbd8ef;border-radius:11px;background:#fff;color:var(--navy);
  padding:8px 12px;font-size:12px;font-weight:900;cursor:pointer;min-height:36px;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
}
#readingClozeV54 .virtual-keyboard-toggle-v10:hover{background:#f4f7ff;border-color:#aebfe1}
#readingClozeV54 .virtual-keyboard-toggle-v10.active{background:var(--soft-blue);border-color:#aac0ef;color:var(--blue)}
#readingClozeV54.text-kb-disabled-v10 .pinyin-keyboard-v57{display:none!important}
#readingClozeV54 .pinyin-keyboard-v57{max-width:680px;width:100%}
#readingClozeV54 .cloze-blank-v54{max-width:100%}

/* Better Chinese line breaking. Never leave a single final Hanzi alone if a light local adjustment can prevent it. */
#reading .reading1-cn,
#readingClozeV54 .cloze-dialogue-v56 > div,
#grammar .example-cn,
#speakingPracticeV14 .speaking-model-line-v21 p{
  text-wrap:pretty;
  overflow-wrap:normal;
  word-break:normal;
}
#reading .reading-long-v10{font-size:20px!important;line-height:1.68!important}
#reading .no-orphan-tail-v10{white-space:nowrap;display:inline-block}
@media(max-width:700px){
  #reading .reading-long-v10{font-size:19px!important}
  #readingClozeV54 .virtual-keyboard-toggle-v10{white-space:normal}
}


/* Final QA owner: keyboard visibility must follow the explicit group toggle, not legacy hard-close residue. */
.ct-final-vk-toggle{
  margin:0!important;border:1px solid #cfd9ed!important;border-radius:12px!important;background:#fff!important;
  color:var(--navy)!important;padding:8px 11px!important;font-size:12px!important;font-weight:900!important;cursor:pointer!important;
  max-width:100%!important;white-space:normal!important;min-height:34px!important;line-height:1.2!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
}
.ct-final-vk-toggle[aria-pressed="true"]{background:var(--soft-blue)!important;border-color:#b8c9ec!important;color:var(--blue)!important}
.ct-final-vk-on .pinyin-keyboard-v57.show,
.ct-final-vk-on .pinyin-keyboard-v12.show,
.ct-final-vk-on .translation-keyboard-v56.show,
.ct-final-vk-on .ct-listening-kb-v24.show{display:block!important}
@media(max-width:700px){.ct-final-vk-toggle{font-size:11.5px!important;padding:7px 10px!important}}


/* v53 LOCK:
   1) Listening choice/judgment question stem belongs inside the mint answer field visually.
   2) Speaking Practice role-play instruction area has no extra inner frame/border; it sits directly on the task background. */
#listening .listen-question[data-ltype="choice"] .listening-question-stem-v23{
  margin:14px 0 0!important;
  padding:18px 20px 10px!important;
  background:#eef9f6!important;
  border:1px solid #cfe9e2!important;
  border-bottom:0!important;
  border-radius:18px 18px 0 0!important;
  color:var(--navy)!important;
}
#listening .listen-question[data-ltype="choice"] .listen-options-v8{
  margin-top:0!important;
  padding:10px 18px 18px!important;
  background:#eef9f6!important;
  border:1px solid #cfe9e2!important;
  border-top:0!important;
  border-radius:0 0 18px 18px!important;
}
#speakingPracticeV14 .speaking-task-box-v16{
  border:0!important;
  background:transparent!important;
  border-radius:0!important;
  padding:8px 0 0!important;
  margin-bottom:18px!important;
  box-shadow:none!important;
}


/* V63 — one canonical Pinyin switch everywhere. Active state is always ClearTalk blue; no green/filled button variants. */
button.v63-pinyin-switch,
button.v62-pinyin-switch,
button.switch-control.v63-pinyin-switch{
  display:inline-flex!important;align-items:center!important;gap:8px!important;
  border:0!important;background:transparent!important;box-shadow:none!important;
  color:#66708f!important;padding:4px 2px!important;min-height:36px!important;border-radius:10px!important;
}
button.v63-pinyin-switch .switch-label,
button.v62-pinyin-switch .switch-label{color:#66708f!important;font-size:13px!important;font-weight:900!important;white-space:nowrap!important}
button.v63-pinyin-switch .switch-track,
button.v62-pinyin-switch .switch-track{background:#d9deea!important;border:0!important}
button.v63-pinyin-switch[aria-pressed="true"],button.v63-pinyin-switch.active,
button.v62-pinyin-switch[aria-pressed="true"],button.v62-pinyin-switch.active{background:transparent!important;color:#66708f!important}
button.v63-pinyin-switch[aria-pressed="true"] .switch-track,button.v63-pinyin-switch.active .switch-track,
button.v62-pinyin-switch[aria-pressed="true"] .switch-track,button.v62-pinyin-switch.active .switch-track{background:var(--blue)!important}
button.v63-pinyin-switch[aria-pressed="true"] .switch-label,button.v63-pinyin-switch.active .switch-label,
button.v62-pinyin-switch[aria-pressed="true"] .switch-label,button.v62-pinyin-switch.active .switch-label{color:#66708f!important}

/* Text Practice Pinyin must actually reveal the prepared line Pinyin. */
#readingClozeV54 .cloze-line-pinyin-v61{display:none!important;color:var(--blue)!important;font-size:14px!important;font-weight:800!important;line-height:1.55!important;margin:3px 0 8px 22px!important}
#readingClozeV54.show-cloze-pinyin-v61 .cloze-set-v54:not([hidden]) .cloze-line-pinyin-v61{display:block!important}

/* Vocabulary Practice Pinyin must actually reveal the Hanzi-column Pinyin. */
#vocabMatchV8 .match-py-v8{display:none!important;color:var(--blue)!important;font-size:13px!important;font-weight:800!important;margin-top:4px!important}
#vocabMatchV8.show-vocab-pinyin-v62 .match-py-v8{display:block!important}

/* Hint words are plain lookup text, never selectable chips / answer-state buttons. */
#readingClozeV54 .cloze-wordbank-v56 .cloze-chip-v54,
#readingClozeV54 .cloze-wordbank-v56 .cloze-hint-word-v63{
  display:inline!important;border:0!important;background:transparent!important;box-shadow:none!important;
  color:var(--navy)!important;padding:0!important;margin:0 7px 0 0!important;border-radius:0!important;
  font:inherit!important;font-weight:900!important;cursor:pointer!important;
}
#readingClozeV54 .cloze-wordbank-v56 .cloze-chip-v54:hover,
#readingClozeV54 .cloze-wordbank-v56 .cloze-chip-v54:focus,
#readingClozeV54 .cloze-wordbank-v56 .cloze-chip-v54.active,
#readingClozeV54 .cloze-wordbank-v56 .cloze-chip-v54[aria-pressed="true"]{background:transparent!important;color:var(--navy)!important;transform:none!important}

/* Listening: keep the per-question Pinyin button visible. */
#listening .listen-question-controls-v8 > .listen-question-pinyin-switch-v62{display:inline-flex!important}
#listening .listen-question-controls-v8 > .show-item-transcript-v62{display:inline-flex!important;align-items:center!important}
#listening .listening-question-pinyin-v62{font-size:15px!important;line-height:1.65!important}
/* Listening transcript must be readable. */
#listening .listen-local-transcript-cn-v62{font-size:21px!important;line-height:1.85!important;font-weight:800!important}
#listening .listen-local-transcript-py-v62{font-size:16px!important;line-height:1.75!important}
#listening .listen-local-transcript-title-v62{font-size:15px!important}

/* Listening's typing surface follows the mint/green listening color family; functionality remains the same. */
#listening .pinyin-keyboard-v57,#listening .pinyin-keyboard-v12{
  background:#eef9f6!important;border-color:#b9e5d3!important;
}
#listening .pinyin-kb-head-v57,#listening .pinyin-keyboard-title-v12{color:#166b5c!important}
#listening .pinyin-candidate-v57,#listening .pinyin-candidate-v12{border-color:#b9e5d3!important}
#listening .pinyin-candidate-v57:hover,#listening .pinyin-candidate-v12:hover{background:#dff4eb!important;border-color:#89ceb5!important}

/* Make bilingual font-size controls understandable for beginners. */
.font-layer-label{min-width:max-content!important;font-size:12px!important;font-weight:900!important;color:#66708f!important}


/* V64 — compact, responsive Pinyin placement and repaired Vocabulary Pinyin. */
/* Article font-size control labels: English only, to keep the toolbar compact. */
.reading-font-controls .font-group-chinese .font-layer-label::before{content:'Hanzi'}
.reading-font-controls .font-group-pinyin .font-layer-label::before{content:'Pinyin'}
.reading-font-controls .font-group-english .font-layer-label::before{content:'EN'}
.reading-font-controls .font-layer-label{font-size:0!important}
.reading-font-controls .font-layer-label::before{font-size:12px!important}

/* Text Practice: Pinyin sits to the LEFT of the matching Hanzi line when there is room. */
#readingClozeV54 .cloze-dialogue-v56{
  display:grid!important;
  grid-template-columns:minmax(170px, 31%) minmax(0, 1fr)!important;
  column-gap:18px!important;
  row-gap:8px!important;
  grid-auto-flow:row dense!important;
  align-items:baseline!important;
}
#readingClozeV54 .cloze-dialogue-v56 > div:not(.cloze-line-pinyin-v61){
  grid-column:2!important;
  min-width:0!important;
  margin:0!important;
}
#readingClozeV54 .cloze-dialogue-v56 > .cloze-line-pinyin-v61{
  grid-column:1!important;
  display:none!important;
  margin:0!important;
  text-align:right!important;
  align-self:baseline!important;
  font-size:13px!important;
  line-height:1.45!important;
}
#readingClozeV54.show-cloze-pinyin-v61 .cloze-set-v54:not([hidden]) .cloze-dialogue-v56 > .cloze-line-pinyin-v61{display:block!important}

/* Vocabulary Practice: generated Hanzi items expose a real Pinyin line when the switch is on. */
#vocabMatchV8 .vocab-match-item-v8 .match-py-v8{display:none!important;color:var(--blue)!important;font-size:13px!important;font-weight:800!important;line-height:1.35!important;margin-top:4px!important}
#vocabMatchV8.show-vocab-pinyin-v62 .vocab-match-item-v8 .match-py-v8{display:block!important}

/* Listening: question text + its Pinyin use one responsive row; Pinyin prefers the RIGHT side. */
#listening .listening-stem-row-v64{
  display:flex!important;
  align-items:baseline!important;
  gap:18px!important;
  width:100%!important;
  min-width:0!important;
}
#listening .listening-stem-row-v64 > .listening-fill-prompt-v23,
#listening .listening-stem-row-v64 > .listening-question-stem-v23{flex:1 1 auto!important;min-width:0!important}
#listening .listening-stem-row-v64 > .listening-question-pinyin-v62{
  flex:0 1 auto!important;
  margin:0 0 0 auto!important;
  text-align:right!important;
  white-space:normal!important;
  max-width:45%!important;
  font-size:15px!important;
  line-height:1.5!important;
}
#listening .listen-question.show-question-pinyin-v62 .listening-stem-row-v64 > .listening-question-pinyin-v62{display:block!important}

@media(max-width:820px){
  #readingClozeV54 .cloze-dialogue-v56{grid-template-columns:1fr!important;row-gap:3px!important}
  #readingClozeV54 .cloze-dialogue-v56 > div:not(.cloze-line-pinyin-v61),
  #readingClozeV54 .cloze-dialogue-v56 > .cloze-line-pinyin-v61{grid-column:1!important;text-align:left!important}
  #readingClozeV54 .cloze-dialogue-v56 > .cloze-line-pinyin-v61{order:2!important;margin:0 0 5px 0!important}
  #listening .listening-stem-row-v64{flex-direction:column!important;gap:5px!important;align-items:flex-start!important}
  #listening .listening-stem-row-v64 > .listening-question-pinyin-v62{margin:0!important;text-align:left!important;max-width:100%!important}
}


/* V66 FINAL LOCK — compact placement of Hanzi + Pinyin.
   Text/Vocabulary/Listening/Speaking example: Pinyin immediately follows Hanzi.
   Food/Drinks word cards are the deliberate exception: Hanzi above, Pinyin below. */

/* Text Practice: whole text block and every sentence stay LEFT; Pinyin sits right beside Hanzi. */
#readingClozeV54 .cloze-dialogue-v56,
#readingClozeV54 .cloze-line-row-v65,
#readingClozeV54 .cloze-hanzi-v65{
  text-align:left!important;
  justify-content:flex-start!important;
}
#readingClozeV54 .cloze-line-row-v65{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:baseline!important;
  gap:6px 10px!important;
  width:100%!important;
}
#readingClozeV54 .cloze-line-row-v65 > .cloze-hanzi-v65{
  flex:0 1 auto!important;
  width:auto!important;
  min-width:0!important;
}
#readingClozeV54 .cloze-line-row-v65 > .cloze-line-pinyin-v61{
  flex:0 1 auto!important;
  width:auto!important;
  margin:0!important;
  text-align:left!important;
}

/* Vocabulary Practice: Pinyin immediately after its Hanzi, never pushed to card edge. */
#vocabMatchV8 .vocab-match-item-v8{
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:flex-start!important;
  align-items:baseline!important;
  gap:6px 9px!important;
  text-align:left!important;
}
#vocabMatchV8 .vocab-match-item-v8 .vocab-hanzi-v65{
  flex:0 1 auto!important;
  width:auto!important;
  min-width:0!important;
}
#vocabMatchV8 .vocab-match-item-v8 .match-py-v8{
  flex:0 1 auto!important;
  width:auto!important;
  margin:0!important;
  text-align:left!important;
}

/* Listening: Pinyin remains INSIDE the mint question surface and immediately follows Hanzi. */
#listening .listening-stem-row-v64{
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:flex-start!important;
  align-items:baseline!important;
  gap:6px 10px!important;
}
#listening .listening-stem-row-v64 > .listening-fill-prompt-v23,
#listening .listening-stem-row-v64 > .listening-question-stem-v23{
  flex:0 1 auto!important;
  width:auto!important;
}
#listening .listening-stem-row-v64 > .listening-question-pinyin-v62{
  flex:0 1 auto!important;
  width:auto!important;
  max-width:100%!important;
  margin:0!important;
  text-align:left!important;
}
#listening .listen-option-copy-v8{
  display:inline-flex!important;
  flex-wrap:wrap!important;
  justify-content:flex-start!important;
  gap:5px 8px!important;
}

/* Speaking example lines: Pinyin stays close to the Hanzi, not at the far edge. */
#speakingPracticeV14 .speaking-model-line-v21 > div{
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:flex-start!important;
  align-items:baseline!important;
  gap:6px 10px!important;
  width:100%!important;
}
#speakingPracticeV14 .speaking-model-line-v21 p,
#speakingPracticeV14 .speaking-model-line-v21 .speaking-model-py-v15{
  flex:0 1 auto!important;
  width:auto!important;
  margin:0!important;
  text-align:left!important;
}

/* Food / Drinks cards: deliberate vertical layout — illustration, Hanzi, then Pinyin. */
#speakingPracticeV14 .speak-item-v14 .speak-word-row-v65{
  display:flex!important;
  flex-direction:column!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  justify-content:center!important;
  gap:2px!important;
  width:100%!important;
}
#speakingPracticeV14 .speak-item-v14 .speak-word-row-v65 b,
#speakingPracticeV14 .speak-item-v14 .speak-word-row-v65 small{
  margin:0!important;
  text-align:center!important;
}
#speakingPracticeV14 .speak-bank-v14.show-bank-pinyin-v43 .speak-word-row-v65 small{
  display:block!important;
}

@media(max-width:620px){
  /* Only when horizontal room is genuinely insufficient, allow the inline pairs to wrap naturally. */
  #readingClozeV54 .cloze-line-row-v65,
  #vocabMatchV8 .vocab-match-item-v8,
  #listening .listening-stem-row-v64,
  #speakingPracticeV14 .speaking-model-line-v21 > div{
    align-items:flex-start!important;
  }
}


/* V67 LOCK — Listening choice options:
   1) all option content sits at the LEFT side of each white option card, never visually centered;
   2) Pinyin sits immediately to the RIGHT of its Hanzi, not underneath and not at the far edge;
   3) only wrap when the viewport is genuinely too narrow. */
#listening .listen-options-v8 .option{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  text-align:left!important;
  width:100%!important;
  box-sizing:border-box!important;
  padding-left:22px!important;
  padding-right:22px!important;
}
#listening .listen-options-v8 .option > input{
  flex:0 0 auto!important;
  margin:0 10px 0 0!important;
}
#listening .listen-options-v8 .option > b{
  flex:0 0 auto!important;
  margin:0 10px 0 0!important;
  min-width:34px!important;
  text-align:left!important;
}
#listening .listen-options-v8 .listen-option-copy-v8{
  display:inline-flex!important;
  flex:0 1 auto!important;
  align-items:baseline!important;
  justify-content:flex-start!important;
  flex-wrap:nowrap!important;
  gap:8px!important;
  width:auto!important;
  min-width:0!important;
  margin:0!important;
  text-align:left!important;
}
#listening .listen-options-v8 .listen-option-cn-v8,
#listening .listen-options-v8 .listen-option-py-v8{
  flex:0 0 auto!important;
  width:auto!important;
  margin:0!important;
  text-align:left!important;
  white-space:nowrap!important;
}
#listening .listen-question.show-question-pinyin-v62 .listen-options-v8 .listen-option-py-v8{
  display:inline!important;
}
@media(max-width:520px){
  #listening .listen-options-v8 .listen-option-copy-v8{flex-wrap:wrap!important;gap:3px 7px!important}
}


/* V68 FINAL LOCK — Text Practice CONTENT POSITION, not just text alignment.
   The dialogue block itself must start from the LEFT side of the white exercise card.
   Never center the dialogue group inside the card. */
#readingClozeV54 .cloze-set-v54{
  text-align:left!important;
}
#readingClozeV54 .cloze-text-v54.cloze-dialogue-v56{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  text-align:left!important;
}
#readingClozeV54 .cloze-dialogue-v56 .cloze-line-row-v65{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:baseline!important;
  justify-content:flex-start!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  text-align:left!important;
}
#readingClozeV54 .cloze-dialogue-v56 .cloze-hanzi-v65{
  flex:0 1 auto!important;
  width:auto!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  text-align:left!important;
}
#readingClozeV54 .cloze-dialogue-v56 .cloze-line-pinyin-v61{
  flex:0 1 auto!important;
  width:auto!important;
  max-width:none!important;
  margin:0 0 0 10px!important;
  padding:0!important;
  text-align:left!important;
}
@media(max-width:700px){
  #readingClozeV54 .cloze-dialogue-v56 .cloze-line-pinyin-v61{
    margin-left:0!important;
  }
}


/* V69 FINAL LOCK — Listening choice Hanzi + Pinyin stay on ONE horizontal line.
   Pinyin immediately follows Hanzi; never stack vertically on normal desktop/tablet widths. */
#listening .listen-options-v8 .option{
  justify-content:flex-start!important;
  text-align:left!important;
}
#listening .listen-options-v8 .listen-option-copy-v8{
  display:inline-flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  align-items:baseline!important;
  justify-content:flex-start!important;
  gap:8px!important;
  width:auto!important;
  margin:0!important;
}
#listening .listen-options-v8 .listen-option-cn-v8,
#listening .listen-options-v8 .listen-option-py-v8{
  display:inline-block!important;
  width:auto!important;
  margin:0!important;
  white-space:nowrap!important;
  vertical-align:baseline!important;
}
@media(max-width:420px){
  #listening .listen-options-v8 .listen-option-copy-v8{flex-wrap:wrap!important;}
}


/* v71: product-readiness fixes from full desktop/mobile QA. */
.lesson-estimate-v71{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;padding:9px 12px;border-radius:12px;background:#f5f8ff;color:#66708f;font-size:13px;font-weight:800}
.lesson-estimate-v71 b{color:var(--navy);font-size:14px;white-space:nowrap}
.vocab-layer-note-v71{display:flex;flex-direction:column;gap:4px;margin:0 0 16px;padding:12px 14px;border:1px solid #d8e7df;border-radius:14px;background:#f3fbf8;color:var(--navy);font-size:13px;line-height:1.55}
.vocab-layer-note-v71 b{font-size:14px}.vocab-layer-en-v71{color:#71809b}
.nav-swipe-hint-v71{display:none;color:#76829b;font-size:11px;font-weight:800;white-space:nowrap;padding:0 4px 7px}
.speaking-selfcheck-v71{margin:16px 0 12px;padding:14px;border-radius:14px;background:#fff;border:1px solid #dfe6f0;display:grid;gap:9px}
.speaking-selfcheck-title-v71{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;color:var(--navy)}
.speaking-selfcheck-title-v71 span{font-size:12px;color:#78839b}
.speaking-selfcheck-v71 label{display:flex;align-items:flex-start;gap:9px;color:var(--navy);font-size:14px;font-weight:750;line-height:1.45;cursor:pointer}
.speaking-selfcheck-v71 input{margin-top:3px;accent-color:#2660e5}
.speaking-selfcheck-head-v72{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.selfcheck-select-all-v72{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1px solid #d8e3f0;background:#fff;cursor:pointer;user-select:none;box-shadow:0 1px 2px rgba(25,33,101,.04)}
.selfcheck-select-all-v72:hover{background:#f7faff;border-color:#c3d3ea}
.selfcheck-select-all-v72 input{position:absolute;opacity:0;width:0;height:0;margin:0}
.selfcheck-select-all-box-v72{width:18px;height:18px;flex:0 0 18px;border-radius:5px;border:2px solid #cfd9ea;background:#fff;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s}
.selfcheck-select-all-box-v72 svg{opacity:0;transition:opacity .1s}
.selfcheck-select-all-v72 input:checked+.selfcheck-select-all-box-v72{background:var(--teal);border-color:var(--teal)}
.selfcheck-select-all-v72 input:checked+.selfcheck-select-all-box-v72 svg{opacity:1}
.selfcheck-select-all-v72 input:indeterminate+.selfcheck-select-all-box-v72{background:#8fcdbe;border-color:#8fcdbe}
.selfcheck-select-all-v72 input:indeterminate+.selfcheck-select-all-box-v72 svg{opacity:1}
.selfcheck-select-all-text-v72{font-size:13px;font-weight:900;color:var(--navy);white-space:nowrap}
.speaking-done-v71:disabled{opacity:.45;cursor:not-allowed;filter:saturate(.4)}
.show-answer-btn-v59.v71-locked{opacity:.46;cursor:not-allowed;pointer-events:none}
.show-answer-btn-v59.v71-locked::after{content:' · Try first';font-size:10px;font-weight:800}
#listening input.listen-fill,#listening input[type="text"]{max-width:100%!important;box-sizing:border-box!important}
@media(max-width:760px){
  .nav-swipe-hint-v71{display:block}
  .lesson-flow-nav{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;scroll-snap-type:x proximity}
  .lesson-flow-nav .nav-item{scroll-snap-align:start}
  #listening input.listen-fill,#listening input[type="text"]{font-size:14px!important}
}


/* V72 FINAL LOCK — Listening option Pinyin is progressive support.
   It is hidden by default and appears ONLY after the learner turns on that
   listening question's Pinyin switch. Hanzi remains visible; when shown,
   Pinyin stays immediately to the right of Hanzi inside the same option. */
#listening .listen-options-v8 .listen-option-py-v8{
  display:none!important;
}
#listening .listen-question.show-question-pinyin-v62 .listen-options-v8 .listen-option-py-v8{
  display:inline-block!important;
  width:auto!important;
  margin:0!important;
  white-space:nowrap!important;
  vertical-align:baseline!important;
}


/* V76 — independently gradable cards own their own Submit + Show Answer controls. */
.per-question-actions-v76{display:flex;justify-content:flex-end;gap:9px;flex-wrap:wrap;margin-top:12px;padding-top:10px;border-top:1px solid #e7ebf2}
.per-question-actions-v76 .show-answer-v76[disabled]{opacity:.42;cursor:not-allowed}
.per-question-answer-v76{margin-top:9px;padding:9px 11px;border-radius:10px;background:#f4f8ff;color:var(--navy);font-size:13px;font-weight:800;line-height:1.5}
@media(max-width:520px){.per-question-actions-v76{justify-content:stretch}.per-question-actions-v76 button{flex:1 1 auto}}


/* V77 — Sentence Order and Expression Practice are independent-question exercises. */
.v77-item-actions{display:flex;justify-content:flex-end;gap:9px;flex-wrap:wrap;margin-top:12px;padding-top:10px;border-top:1px solid #e7ebf2}
.v77-item-actions .v77-show[disabled]{opacity:.42;cursor:not-allowed}
.v77-answer-note{margin-top:9px;padding:9px 11px;border-radius:10px;background:#f4f8ff;color:var(--navy);font-size:13px;font-weight:800;line-height:1.5}
@media(max-width:520px){.v77-item-actions{justify-content:stretch}.v77-item-actions button{flex:1 1 auto}}


/* V78: mobile header/nav fixes + solved-state/retry polish. */
.retry-one-v78{border:1px solid #cfd9ef;border-radius:10px;background:#fff;color:var(--navy);padding:9px 13px;font-weight:850;cursor:pointer}
.v78-solved input:disabled + *{cursor:default}
@media(max-width:760px){
  .app-shell{padding:12px!important}
  .topbar{position:relative!important;top:auto!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:9px 10px!important;padding:10px 11px!important}
  .brand{min-width:0!important;gap:8px!important}
  .logo-wrap{width:46px!important;height:34px!important}.logo-wrap img{width:50px!important}
  .brand-title{font-size:14px!important;line-height:1.15!important;white-space:nowrap!important;word-break:keep-all!important;writing-mode:horizontal-tb!important}
  .brand-sub{display:none!important}
  .top-actions{grid-column:2;grid-row:1;flex-wrap:nowrap!important;justify-content:flex-start!important;min-width:0!important;gap:5px!important;overflow-x:auto!important;max-width:100%!important;scrollbar-width:none!important}
  .top-actions::-webkit-scrollbar{display:none!important}
  .top-actions .pill{padding:7px 9px!important;font-size:11px!important}
  .top-actions .free-pdf-download{display:none!important}
  .lesson-flow-wrap,.side-nav,.learning-flow{position:relative!important}
  .nav-swipe-hint-v71{display:block!important;position:relative!important;z-index:3!important;width:max-content!important;margin-left:auto!important;padding:0 4px 6px!important}
  .lesson-flow-nav{scroll-position:0!important}
  .lesson-flow-nav:after{content:'→';position:sticky;right:0;display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:44px;background:linear-gradient(90deg,rgba(255,255,255,0),#fff 55%);color:var(--blue);font-weight:950;pointer-events:none}
}


/* v79: UI headings must not inherit click-to-lookup token coloring. */
.speaking-selfcheck-title-v71,
.speaking-selfcheck-title-v71 *,
.speaking-selfcheck-title-v71 .lookup-word,
.speaking-selfcheck-title-v71 [data-lookup],
.speaking-selfcheck-title-v71 [data-word] {
  color: #172a6b !important;
  text-decoration: none !important;
}


/* =========================================================
   HSK2-1 v26 — ClearTalk HSK Skill v2.2 / UI DS v2.2
   1) Pinyin single-storey a through a dedicated geometric Latin font stack.
   2) Optional virtual keyboard for every Chinese-entry task.
   3) Global click-to-lookup robustness.
   4) Speaking visual support cards + richer banks.
   ========================================================= */

/* Pinyin typography: keep real Hanyu Pinyin characters in data; change glyph only. */
.reading1-py,
.vocab-pinyin,
.vocab-pinyin-v7,
.vocab-py,
.grammar-example-py-v8,
.support-py,
.speaking-model-py-v15,
.speak-item-v14 small,
.transcript-line span,
.match-py-v8,
[class*="-py-v"],
[class~="pinyin"],
.pinyin-compose-v57 .text,
.pinyin-compose-text-v12,
.lookup-pop-v7 .py {
  font-family:"Futura","Futura PT","Century Gothic","URW Gothic",sans-serif!important;
  font-feature-settings:"ss01" 1,"salt" 1;
  font-variant-ligatures:none;
}

/* Grammar pattern title must fit without looking like a linguistics label. */
#grammar .grammar-card-v7:nth-of-type(3) summary .grammar-title-v8{
  font-size:16px!important;
  letter-spacing:.01em!important;
}

/* One unified optional keyboard toggle for all input-type exercises. */
.ct-vk-toggle-v11{
  margin:8px 0 4px!important;
  border:1px solid #cfd9ed!important;
  border-radius:12px!important;
  background:#fff!important;
  color:var(--navy)!important;
  padding:8px 11px!important;
  font-size:12px!important;
  font-weight:900!important;
  cursor:pointer!important;
  max-width:100%!important;
  white-space:normal!important;
}
.ct-vk-toggle-v11.active{
  background:var(--soft-blue)!important;
  border-color:#b8c9ec!important;
  color:var(--blue)!important;
}
.ct-vk-off-v11 .pinyin-keyboard-v57,
.ct-vk-off-v11 .pinyin-keyboard-v12{display:none!important}
.ct-vk-off-v11 .pinyin-keyboard-v57.show,
.ct-vk-off-v11 .pinyin-keyboard-v12.show{display:none!important}

/* Global lookup: clearer affordance without making text look like links. */
.lookup-token{cursor:pointer!important;touch-action:manipulation}
.lookup-token:focus-visible{outline:2px solid rgba(38,96,229,.35);outline-offset:2px}

/* Speaking visual support: HSK1-style compact illustrated vocabulary cards. */
#speakingPracticeV14 .speak-bank-grid-v14{align-items:start!important}
/* 通栏词库：词多（>=7）或落单在最后一行的词库整行铺开，右边不留大片空白。
   列数与列宽由引擎按条目数和最长词长算出，写在行内 style 上，这里不再写死。 */
#speakingPracticeV14 .speak-bank-v14.speak-bank-wide-v11{grid-column:1/-1!important}
#speakingPracticeV14 .speak-visual-v11{
  width:52px;height:52px;flex:0 0 52px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,#f3f8ff,#eefbf8);
  border:1px solid #e0e8f3;
  margin-bottom:3px;
}
#speakingPracticeV14 .speak-visual-v11 svg{
  width:31px;height:31px;display:block;stroke:var(--blue);fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
#speakingPracticeV14 .speak-item-v14:nth-child(3n+2) .speak-visual-v11 svg{stroke:var(--teal)}
#speakingPracticeV14 .speak-item-v14{
  min-height:126px!important;
  justify-content:center!important;
}
#speakingPracticeV14 .speak-item-v14 b{color:var(--navy)!important}
#speakingPracticeV14 .speak-item-v14 small{color:var(--blue)!important}
#speakingPracticeV14 .finish-work-v11 .speak-item-v14{
  min-height:132px!important;
}
#speakingPracticeV14 .finish-work-v11 .speak-visual-v11{width:58px;height:58px}

@media(max-width:760px){
  #grammar .grammar-card-v7:nth-of-type(3) summary .grammar-title-v8{font-size:14.5px!important}
}


/* V13: one optional virtual-keyboard entry per question/task group, always top-right. */
.ct-vk-host-v13{position:relative!important}
.ct-vk-corner-v13{
  display:flex!important;
  justify-content:flex-end!important;
  align-items:center!important;
  width:100%!important;
  margin:0 0 8px!important;
  min-height:34px!important;
}
.ct-vk-corner-v13 .ct-vk-toggle-v11{
  margin:0!important;
  flex:0 0 auto!important;
}
/* Hide any legacy per-input keyboard toggle that might be left by an older runtime patch. */
.ct-vk-toggle-v11[data-vk-placement="legacy-input"]{display:none!important}
@media(max-width:700px){
  .ct-vk-corner-v13{justify-content:flex-end!important;margin-bottom:7px!important}
  .ct-vk-corner-v13 .ct-vk-toggle-v11{max-width:100%!important;font-size:11.5px!important;padding:7px 10px!important}
}


/* v15: user-provided speaking SVGs must show as-is; keep only sizing, no global recolor/outline override. */
#speakingPracticeV14 .speak-visual-v11{
  width:60px!important;height:60px!important;flex:0 0 60px!important;
  background:transparent!important;border:0!important;border-radius:0!important;
  margin-bottom:6px!important;overflow:visible!important;
}
#speakingPracticeV14 .speak-visual-v11 svg{
  width:56px!important;height:56px!important;display:block!important;
  stroke:initial!important;fill:initial!important;stroke-width:initial!important;
  stroke-linecap:initial!important;stroke-linejoin:initial!important;
}
#speakingPracticeV14 .speak-item-v14{min-height:132px!important}


/* v15: only one virtual keyboard button per question group; never keep the old root Reading Practice button. */
#readingClozeV54 .virtual-keyboard-toggle-v10{display:none!important}
#readingClozeV54 .cloze-set-v54{position:relative!important}
#readingClozeV54 .ct-vk-corner-v13{margin:0 0 10px!important}
#readingClozeV54 .ct-vk-corner-v13 .ct-vk-toggle-v11{white-space:nowrap!important}


.reader-toolbar.v7-reader-toolbar{flex-wrap:wrap;gap:10px 10px!important}
.reading-speed-wrap-v16{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 12px;border:1px solid #d9e3f2;border-radius:999px;
  background:#fff;color:var(--navy);font-size:12px;font-weight:900;
}
.reading-speed-wrap-v16 label{white-space:nowrap;color:var(--navy);font-weight:900}
.reading-speed-select-v16{
  border:0;background:transparent;color:var(--blue);font-weight:900;
  font-size:12px;outline:none;cursor:pointer;padding-right:4px;
}
@media(max-width:700px){
  .reading-speed-wrap-v16{width:100%;justify-content:space-between;border-radius:14px}
}


/* Listening Q1: the sentence blank itself is the answer box. */
#listening .listen-question[data-ltype="fill"] .listening-fill-prompt-v23{
  /* Normal inline text flow (NOT flex): the prompt is a sentence with an inline answer
     box in it, and its own Pinyin has to read as part of that same line. Making it a
     flex container turned every lookup token into a separate flex item and pushed the
     Pinyin onto a line of its own. */
  display:block!important;
}
#listening .listen-question[data-ltype="fill"] .listen-inline-fill-v17{
  display:inline-block!important;
  width:128px!important;min-width:110px!important;max-width:180px!important;
  padding:3px 7px 4px!important;margin:0!important;
  border:0!important;border-bottom:2px solid #8dd9c7!important;border-radius:0!important;
  background:transparent!important;color:var(--navy)!important;
  box-shadow:none!important;font-size:22px!important;font-weight:900!important;text-align:center!important;
}
#listening .listen-question[data-ltype="fill"] .listen-inline-fill-v17:focus{
  outline:none!important;border-bottom-color:var(--teal)!important;background:#fff!important;
}

/* Speaking support headings are core content: always ClearTalk navy, never muted gray. */
#speakingPracticeV14 .speak-bank-head-v43 h4,
#speakingPracticeV14 .finish-work-v11 .speak-bank-head-v43 h4,
#speakingPracticeV14 .after-home-v11 .speak-bank-head-v43 h4{
  color:var(--navy)!important;opacity:1!important;
}

/* Next Group is learner-controlled: it ALWAYS receives clicks and keyboard focus.
   2.26 候选修订：本组没做完时，它不再假装是可用状态（老师 2026-09-11：
   「未完成时点击下一组没有反馈」）。点击照样收得到，只是给出提示、不前进。
   所以 pointer-events 仍然无条件强制打开，外观强制只在未锁定时生效。 */
#readingClozeV54 #clozeNextV55:not([style*="display: none"]){
  pointer-events:auto!important;
}
#readingClozeV54 #clozeNextV55:not([style*="display: none"]):not([aria-disabled="true"]){
  opacity:1!important;filter:none!important;cursor:pointer!important;
}

/* Show Answers is always directly available on objective tasks. */
.show-answer-btn-v59{
  opacity:1!important;cursor:pointer!important;pointer-events:auto!important;
}


/* v19 — virtual keyboard closes decisively on outside click; no flash/reopen. */
html.ct-kb-hard-closed-v19 .pinyin-keyboard-v57,
html.ct-kb-hard-closed-v19 .pinyin-keyboard-v12,
html.ct-kb-hard-closed-v19 .translation-keyboard-v56{
  display:none!important;
}

/* Listening completion blank starts visually empty: no underscores / placeholder text. */
#listening #lq1Input::placeholder{color:transparent!important;opacity:0!important}
#listening #lq1Input{caret-color:var(--navy)!important}

/* Speaking support Pinyin switches: lock back to the standard compact pill proportions. */
#speakingPracticeV14 .bank-pinyin-switch-v43{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:8px!important;
  width:auto!important;
  min-width:max-content!important;
  max-width:100%!important;
  height:34px!important;
  min-height:34px!important;
  padding:5px 7px 5px 10px!important;
  margin:0!important;
  border-radius:999px!important;
  flex:0 0 auto!important;
  white-space:nowrap!important;
  line-height:1!important;
  transform:none!important;
}
#speakingPracticeV14 .bank-pinyin-switch-v43 .switch-label{
  display:inline-block!important;
  white-space:nowrap!important;
  line-height:1!important;
  font-size:11.5px!important;
  font-weight:900!important;
}
#speakingPracticeV14 .bank-pinyin-switch-v43 .switch-track{
  position:relative!important;
  display:inline-block!important;
  width:38px!important;
  min-width:38px!important;
  height:22px!important;
  min-height:22px!important;
  flex:0 0 38px!important;
  border-radius:999px!important;
  padding:0!important;
  margin:0!important;
}
#speakingPracticeV14 .bank-pinyin-switch-v43 .switch-knob{
  position:absolute!important;
  left:3px!important;
  top:3px!important;
  width:16px!important;
  height:16px!important;
  border-radius:50%!important;
  margin:0!important;
}
#speakingPracticeV14 .bank-pinyin-switch-v43[aria-pressed="true"] .switch-knob{
  transform:translateX(16px)!important;
}
@media(max-width:560px){
  #speakingPracticeV14 .bank-pinyin-switch-v43{height:32px!important;min-height:32px!important;padding:4px 6px 4px 9px!important;gap:6px!important}
  #speakingPracticeV14 .bank-pinyin-switch-v43 .switch-label{font-size:11px!important}
}


/* v20 — Sentence Order words are draggable and can swap/reorder positions. */
#sentenceOrderListV36 .sentence-order-chip-v36{
  cursor:grab!important;
  user-select:none!important;
  -webkit-user-select:none!important;
  touch-action:none!important;
  transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease,opacity .14s ease!important;
}
#sentenceOrderListV36 .sentence-order-chip-v36:active{cursor:grabbing!important}
#sentenceOrderListV36 .sentence-order-chip-v36.dragging-v20{
  opacity:.38!important;
  transform:scale(.97)!important;
}
#sentenceOrderListV36 .sentence-order-slot-v39.drop-target-v20,
#sentenceOrderListV36 .sentence-order-chip-zone-v36.drop-target-v20{
  outline:2px solid rgba(38,96,229,.34)!important;
  outline-offset:2px!important;
  background:#eef4ff!important;
}
#sentenceOrderListV36 .sentence-order-chip-v36.drop-target-chip-v20{
  border-color:var(--blue)!important;
  box-shadow:0 0 0 3px rgba(38,96,229,.12)!important;
}
.sentence-drag-ghost-v20{
  position:fixed!important;z-index:220!important;pointer-events:none!important;
  margin:0!important;transform:translate(-50%,-50%) scale(1.03)!important;
  box-shadow:0 12px 28px rgba(25,33,101,.20)!important;
  opacity:.96!important;
}


/* v23 — Text Practice shows per-blank validation; Submit never becomes inert after Show Answers. */
#readingClozeV54 .cloze-blank-v54.ct-cloze-correct-v23{
  border-style:solid!important;border-color:#8fd7c4!important;background:#eefbf8!important;color:#148a73!important;
  box-shadow:0 0 0 2px rgba(24,191,160,.07)!important;
}
#readingClozeV54 .cloze-blank-v54.ct-cloze-wrong-v23{
  border-style:solid!important;border-color:#e2a0a0!important;background:#fff1f1!important;color:#c84545!important;
  box-shadow:0 0 0 2px rgba(200,69,69,.06)!important;
}
#readingClozeV54 .cloze-blank-v54.ct-cloze-empty-v23{
  border-style:dashed!important;border-color:#e1bd67!important;background:#fff9e9!important;color:#8b6a1d!important;
}
.check-btn.answer-locked-v60,.check-btn.secondary.answer-locked-v60{
  opacity:1!important;cursor:pointer!important;pointer-events:auto!important;
}


/* v24 — final interaction fixes requested by user. */

/* Listening Q1 inline keyboard: same visual family, but independently stable. */
#listening .ct-listening-kb-v24{
  display:none;
  margin:10px 0 14px;
  padding:12px 13px;
  border:1px solid #d9e2f1;
  border-radius:16px;
  background:#f7f9ff;
  box-shadow:0 8px 20px rgba(25,33,101,.06);
  max-width:680px;
}
#listening .ct-listening-kb-v24.show{display:block!important}
#listening .ct-listening-kb-v24 .ct-kb-head-v24{
  display:flex;justify-content:space-between;gap:10px;
  font-size:12px;font-weight:900;color:var(--navy);margin-bottom:9px
}
#listening .ct-listening-kb-v24 .ct-kb-compose-v24{
  display:flex;align-items:center;gap:8px;min-height:38px;
  padding:7px 10px;border:1px solid #dbe3f2;border-radius:11px;
  background:#fff;margin-bottom:8px
}
#listening .ct-listening-kb-v24 .ct-kb-compose-v24 .label{
  font-size:11px;color:#7b849b;font-weight:850
}
#listening .ct-listening-kb-v24 .ct-kb-compose-v24 .text{
  font-size:17px;color:var(--navy);font-weight:900;letter-spacing:.4px
}
#listening .ct-listening-kb-v24 .ct-kb-candidates-v24{
  display:flex;gap:7px;flex-wrap:nowrap;align-items:center;
  height:48px;min-height:48px;max-height:48px;padding:5px 0 9px;box-sizing:border-box;
  overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch
}
#listening .ct-listening-kb-v24 .ct-kb-candidate-v24{
  flex:0 0 auto;min-width:44px;height:34px;padding:0 10px;border:1px solid #cdd9ee;
  border-radius:9px;background:#fff;color:var(--navy);
  font-size:16px;font-weight:900;cursor:pointer
}
#listening .ct-listening-kb-v24 .ct-kb-row-v24{
  display:flex;gap:6px;justify-content:center;margin-top:6px;flex-wrap:nowrap
}
#listening .ct-listening-kb-v24 .ct-kb-key-v24{
  flex:0 1 47px;min-width:32px;height:39px;border:1px solid #d4deed;
  border-radius:9px;background:#fff;color:var(--navy);
  font-weight:900;cursor:pointer
}
#listening .ct-listening-kb-v24 .ct-kb-key-v24.action{
  flex:0 1 auto;padding:0 14px;color:#68738b;font-size:12px
}
#listening .ct-listening-kb-v24 .ct-kb-note-v24{
  color:#8991a5;font-size:12px;align-self:center
}

/* Translation and expression feedback should be immediately visible. */
.translation-item-feedback-v54.v24-ok,
#dialoguePracticeV14 .dialogue-feedback-v14.v24-ok{color:var(--success)!important}
.translation-item-feedback-v54.v24-no,
#dialoguePracticeV14 .dialogue-feedback-v14.v24-no{color:var(--danger)!important}

@media(max-width:700px){
  #listening .ct-listening-kb-v24 .ct-kb-key-v24{height:37px;min-width:28px}
  #listening .ct-listening-kb-v24 .ct-kb-row-v24{gap:4px}
}


/* =========================================================
   v25
   1) Vocabulary Practice: Hanzi appears once, matching click works,
      and a correct pair disappears from the board.
   2) Listening choice questions: no generic unanswered warning.
   3) Speaking support headings: force ClearTalk logo navy.
   ========================================================= */

/* Vocabulary matching — exactly one visible Hanzi per left button. */
#vocabMatchV8 .v25-match-hanzi{
  display:block!important;
  color:var(--navy)!important;
  font-size:17px!important;
  font-weight:900!important;
  line-height:1.35!important;
}
#vocabMatchV8 .vocab-match-item-v8 .match-py-v8{display:none!important}
#vocabMatchV8 .vocab-match-item-v8.correct-away-v25{
  opacity:0!important;
  transform:scale(.95)!important;
  pointer-events:none!important;
  visibility:hidden!important;
}
#vocabMatchV8 .vocab-match-item-v8.selected-v25{
  background:#eef4ff!important;
  border-color:#9fb4e8!important;
  box-shadow:0 0 0 3px rgba(38,96,229,.08)!important;
}
#vocabMatchV8 .vocab-match-item-v8.wrong-v25{
  background:#fff0f0!important;
  border-color:#e77f7f!important;
  color:#b83d3d!important;
  box-shadow:0 0 0 3px rgba(200,69,69,.08)!important;
}

/* Speaking section headings use the exact logo navy, not muted gray. */
#speakingPracticeV14 .speak-bank-head-v43 h4{
  color:#192165!important;
  opacity:1!important;
}
#speakingPracticeV14 .speak-bank-head-v43 h4,
#speakingPracticeV14 .speak-bank-head-v43 h4 *{
  color:#192165!important;
}

/* Listening unanswered choice questions should remain visually quiet. */
#listening .listen-question[data-ltype="choice"] .feedback.v25-unanswered{
  min-height:0!important;
  margin-top:0!important;
}


/* =========================================================
   V26 Vocabulary Matching hard fix
   - Hanzi is rendered exactly ONCE.
   - The visible Hanzi comes from data-label via ::before,
     so legacy Pinyin/lookup normalizers cannot duplicate it.
   - Correct pairs leave with a very small, calm animation.
   ========================================================= */

#vocabMatchV8 #vocabMatchCnV8 .vocab-match-item-v8[data-v26-single="1"]{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  transition:
    opacity .18s ease,
    transform .18s ease,
    background-color .14s ease,
    border-color .14s ease,
    box-shadow .14s ease!important;
}

/* The ONLY visible Hanzi label. */
#vocabMatchV8 #vocabMatchCnV8 .vocab-match-item-v8[data-v26-single="1"]::before{
  content:attr(data-label);
  display:block;
  color:var(--navy);
  font-size:17px;
  font-weight:900;
  line-height:1.35;
}

/* Legacy V65/V25 nodes may still be inserted by older observers.
   They must never become a second visible copy. */
#vocabMatchV8 #vocabMatchCnV8 .vocab-match-item-v8[data-v26-single="1"] > .vocab-hanzi-v65,
#vocabMatchV8 #vocabMatchCnV8 .vocab-match-item-v8[data-v26-single="1"] > .v25-match-hanzi,
#vocabMatchV8 #vocabMatchCnV8 .vocab-match-item-v8[data-v26-single="1"] > .match-py-v8,
#vocabMatchV8 #vocabMatchCnV8 .vocab-match-item-v8[data-v26-single="1"] > .lookup-token{
  display:none!important;
}

/* Small success exit animation — not abrupt, not flashy. */
#vocabMatchV8 .vocab-match-item-v8.correct-away-v25,
#vocabMatchV8 .vocab-match-item-v8.correct-away{
  visibility:visible!important;
  opacity:0!important;
  transform:translateY(-3px) scale(.98)!important;
  background:#ecfaf6!important;
  border-color:#a9ded0!important;
  box-shadow:0 0 0 3px rgba(24,191,160,.07)!important;
}

/* Keep English-side cards on the same subtle transition. */
#vocabMatchV8 #vocabMatchEnV8 .vocab-match-item-v8{
  transition:
    opacity .18s ease,
    transform .18s ease,
    background-color .14s ease,
    border-color .14s ease,
    box-shadow .14s ease!important;
}

/* The legacy v25 logic sets hidden=true after the transition.
   Our flex rule must never override the hidden state. */
#vocabMatchV8 #vocabMatchCnV8 .vocab-match-item-v8[data-v26-single="1"][hidden],
#vocabMatchV8 #vocabMatchEnV8 .vocab-match-item-v8[hidden]{
  display:none!important;
}


/* Final QA fix: Vocabulary Matching must fit mobile width without its own horizontal scroll. */
@media(max-width:640px){
  #vocabMatchV8 .vocab-match-board-v8,
  #vocabMatchV8 .vocab-match-board-v20{
    width:100%!important;
    max-width:100%!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:10px!important;
    overflow-x:hidden!important;
    box-sizing:border-box!important;
  }
  #vocabMatchV8 .vocab-match-col-wrap-v10,
  #vocabMatchV8 .vocab-match-col-v8{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }
  #vocabMatchV8 .vocab-match-item-v8{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    box-sizing:border-box!important;
  }
}


/*
  V28 Pinyin display rule:
  learner-facing Pinyin uses IPA-style ɑ instead of Latin a.
  Underlying IME typing still accepts normal keyboard a/A.
*/
.word-py,
.full-pinyin-text,
.grammar-py,
.grammar-example-py-v8,
.vocab-py,
.reading1-py,
.reading2-py,
.support-py,
.option-py,
.question-py,
.listen-py-v8,
.listen-option-py-v8,
.listen-local-transcript-py-v62,
.dialogue-py-v15,
.dialogue-option-py-v15,
.speaking-model-py-v15,
.review-py,
.review-order-py,
.order-item-pinyin-v40,
.chip-py,
.pinyin-item,
.speak-option-py,
.speak-answer-pinyin,
.warm-question-py,
.reply-main-py,
.teacher-scene-bubble .py,
.lookup-pop-v7 .py,
#speakingPracticeV14 .speak-item-v14 small{
  font-family:
    "Noto Sans",
    "Noto Sans CJK SC",
    "Arial Unicode MS",
    "Segoe UI Symbol",
    sans-serif!important;
}


/* V30 — stable Pinyin controls. No global MutationObserver. */

/* Vocabulary Practice */
#vocabMatchV8 #vocabMatchCnV8 .vocab-match-item-v8[data-v30-pinyin]::after{
  content:attr(data-v30-pinyin);
  display:none!important;
  margin-left:auto!important;
  color:var(--blue)!important;
  font-size:13px!important;
  line-height:1.35!important;
  font-weight:800!important;
  text-align:right!important;
  white-space:normal!important;
}
#vocabMatchV8.ct-v30-show-pinyin #vocabMatchCnV8 .vocab-match-item-v8[data-v30-pinyin]::after{display:block!important}

/* Listening: one Pinyin state shows support dialogue + question/stem + option Pinyin. */
#listening .listen-question .listen-py-v8,
#listening .listen-question .listening-question-pinyin-v62,
#listening .listen-question .options .support-py{display:none!important}
#listening .listen-question.ct-v30-show-pinyin .listen-py-v8,
#listening .listen-question.ct-v30-show-pinyin .listening-question-pinyin-v62{display:block!important}
/* Question/prompt Pinyin sits inline right after the Hanzi, matching Reading Practice's
   .support-py pattern, not as its own block on the next line. Higher specificity than the
   rule above (adds the stem/prompt ancestor class) so it wins regardless of source order. */
#listening .listen-question.ct-v30-show-pinyin .listening-question-stem-v23 .listen-py-v8,
#listening .listen-question.ct-v30-show-pinyin .listening-fill-prompt-v23 .listen-py-v8{
  display:inline!important;
  padding:0!important;border:0!important;background:transparent!important;
  font-size:.78em!important;font-weight:800!important;margin-left:4px!important;
}
#listening .listen-question.ct-v30-show-pinyin .options .support-py{display:inline!important}
#listening .listen-question.ct-v30-show-pinyin .options .support-py{
  margin-top:2px!important;
  color:var(--blue)!important;
  font-size:12px!important;
  line-height:1.35!important;
  font-weight:800!important;
}

/* Preserve the existing Text Practice / Sentence Order show classes. */
#readingClozeV54.show-cloze-pinyin-v61 .cloze-set-v54:not([hidden]) .cloze-line-pinyin-v61{display:block!important}
#sentenceOrderListV36 .sentence-order-item-v36.show-order-pinyin-v40 .sentence-order-chip-v36 small{display:block!important}

/* Listening keeps exactly one visible Pinyin control: the V62 per-question switch. */
#listening .listen-question-controls-v8 .listen-question-pinyin-switch-v62{
  display:inline-flex!important;
  visibility:visible!important;
  pointer-events:auto!important;
}


.word-py,.full-pinyin-text,.grammar-py,.grammar-example-py-v8,.vocab-py,
.reading1-py,.reading2-py,.support-py,.option-py,.question-py,
.listen-py-v8,.listen-option-py-v8,.listen-local-transcript-py-v62,
.dialogue-py-v15,.dialogue-option-py-v15,.speaking-model-py-v15,
.review-py,.review-order-py,.chip-py,.pinyin-item,.speak-option-py,
.speak-answer-pinyin,.warm-question-py,.reply-main-py,.teacher-scene-bubble .py,
.lookup-pop-v7 .py,#speakingPracticeV14 .speak-item-v14 small,
#readingClozeV54 .cloze-line-pinyin-v61,
#sentenceOrderListV36 .sentence-order-chip-v36 small,
#listening .listening-question-pinyin-v62,#listening .options .support-py,
#vocabMatchV8 #vocabMatchCnV8 .vocab-match-item-v8[data-v30-pinyin]::after,
.reading1-rt .rt-p{
  font-family:Arial,"Helvetica Neue",Helvetica,sans-serif!important;
  font-variant-ligatures:none!important;
  letter-spacing:0!important;
}

/* Vocabulary matching Pinyin appears clearly BELOW the single Hanzi label. */
#vocabMatchV8.ct-v30-show-pinyin #vocabMatchCnV8 .vocab-match-item-v8[data-v30-pinyin],
#vocabMatchV8.show-vocab-pinyin-v62 #vocabMatchCnV8 .vocab-match-item-v8[data-v30-pinyin]{
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
}
#vocabMatchV8.ct-v30-show-pinyin #vocabMatchCnV8 .vocab-match-item-v8[data-v30-pinyin]::after,
#vocabMatchV8.show-vocab-pinyin-v62 #vocabMatchCnV8 .vocab-match-item-v8[data-v30-pinyin]::after{
  display:block!important;
  margin:4px 0 0!important;
  width:100%!important;
  text-align:left!important;
  color:var(--blue)!important;
  font-size:12.5px!important;
  line-height:1.45!important;
  font-weight:800!important;
  opacity:1!important;
  visibility:visible!important;
}

#grammar .grammar-card-v7:nth-of-type(3) summary small{
  display:block!important;
  margin-left:auto!important;
  color:var(--muted)!important;
  font-size:12.5px!important;
  font-weight:800!important;
  text-align:right!important;
}


.app-shell{
  max-width:100%!important;
  overflow-x:visible!important;
  overflow-y:visible!important;
}
html,body{ overflow-x:visible!important;overflow-y:visible!important;overflow-anchor:none!important; }
*{ overflow-anchor:none!important; }


/* =========================================================
   V32 FINAL
   1) Grammar ③ title size exactly matches other grammar titles.
   2) Vocabulary Matching Pinyin sits to the RIGHT of Hanzi.
   3) Vocabulary / lookup Pinyin uses IPA ɑ with tone anchored on ɑ.
   ========================================================= */

/* Grammar ③: same Chinese title size as every other grammar card. */
#grammar .grammar-card-v7:nth-of-type(3) summary .grammar-title-v8{
  font-size:22px!important;
  line-height:1.3!important;
  letter-spacing:normal!important;
}

/* Vocabulary Matching: Hanzi LEFT, Pinyin RIGHT — never underneath. */
#vocabMatchV8.ct-v30-show-pinyin #vocabMatchCnV8 .vocab-match-item-v8[data-v30-pinyin],
#vocabMatchV8.show-vocab-pinyin-v62 #vocabMatchCnV8 .vocab-match-item-v8[data-v30-pinyin]{
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  align-items:baseline!important;
  justify-content:flex-start!important;
  gap:12px!important;
}

#vocabMatchV8.ct-v30-show-pinyin #vocabMatchCnV8 .vocab-match-item-v8[data-v30-pinyin]::after,
#vocabMatchV8.show-vocab-pinyin-v62 #vocabMatchCnV8 .vocab-match-item-v8[data-v30-pinyin]::after{
  display:inline-block!important;
  flex:0 1 auto!important;
  width:auto!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  text-align:left!important;
  white-space:nowrap!important;
  color:var(--blue)!important;
  font-size:12.5px!important;
  line-height:1.35!important;
  font-weight:800!important;
  opacity:1!important;
  visibility:visible!important;
  font-family:Arial,"Helvetica Neue",Helvetica,sans-serif!important;
}

/* Exact same Pinyin font stack in cards and lookup popover. */
#vocab .vocab-py,
#lookupPopV7 .py{
  font-family:Arial,"Helvetica Neue",Helvetica,sans-serif!important;
  font-variant-ligatures:none!important;
  letter-spacing:0!important;
}

@media(max-width:760px){
  #grammar .grammar-card-v7:nth-of-type(3) summary .grammar-title-v8{
    font-size:22px!important;
  }
  #vocabMatchV8.ct-v30-show-pinyin #vocabMatchCnV8 .vocab-match-item-v8[data-v30-pinyin],
  #vocabMatchV8.show-vocab-pinyin-v62 #vocabMatchCnV8 .vocab-match-item-v8[data-v30-pinyin]{
    gap:7px!important;
  }
  #vocabMatchV8.ct-v30-show-pinyin #vocabMatchCnV8 .vocab-match-item-v8[data-v30-pinyin]::after,
  #vocabMatchV8.show-vocab-pinyin-v62 #vocabMatchCnV8 .vocab-match-item-v8[data-v30-pinyin]::after{
    font-size:11.5px!important;
  }
}


/* A correct pair sets hidden=true after its subtle exit animation.
   This rule must outrank the Pinyin-on flex display rule. */
#vocabMatchV8 #vocabMatchCnV8 .vocab-match-item-v8[hidden],
#vocabMatchV8 #vocabMatchEnV8 .vocab-match-item-v8[hidden]{
  display:none!important;
}


/* Final specificity lock: when a correct matching pair is hidden,
   hidden wins even while Pinyin mode is ON. */
#vocabMatchV8.ct-v30-show-pinyin #vocabMatchCnV8 .vocab-match-item-v8[data-v30-pinyin][hidden],
#vocabMatchV8.show-vocab-pinyin-v62 #vocabMatchCnV8 .vocab-match-item-v8[data-v30-pinyin][hidden],
#vocabMatchV8 #vocabMatchEnV8 .vocab-match-item-v8[hidden]{
  display:none!important;
}


/* HSK2-2 v1.6 — ONLY two fixes:
   1) standalone structural A is not Pinyin;
   2) 对/错 Pinyin stays to the RIGHT of Hanzi. */

#reading-practice .question.truth-question-v9 label.option .option-copy,
#listening .listen-question.truth-listen-v9 label.option .option-copy{
  display:inline-flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:8px!important;
  flex-wrap:nowrap!important;
  width:auto!important;
  min-width:0!important;
  white-space:nowrap!important;
}

#reading-practice .question.truth-question-v9 label.option .truth-main-v9{
  display:inline-flex!important;
  flex:0 0 auto!important;
  width:auto!important;
  margin:0!important;
}

#reading-practice .question.truth-question-v9 label.option .support-py,
#listening .listen-question.truth-listen-v9 label.option .support-py,
#listening .listen-question.truth-listen-v9 label.option .listen-option-py-v8{
  flex:0 0 auto!important;
  width:auto!important;
  margin:0!important;
  padding:0!important;
  line-height:1.25!important;
}
#reading-practice .question.truth-question-v9.show-q-pinyin label.option .support-py{
  display:inline-block!important;
}
#listening .listen-question.truth-listen-v9.ct-v30-show-pinyin label.option .support-py,
#listening .listen-question.truth-listen-v9.show-question-pinyin-v62 label.option .support-py,
#listening .listen-question.truth-listen-v9.show-listen-pinyin label.option .listen-option-py-v8{
  display:inline-block!important;
}

@media(max-width:640px){
  #reading-practice .truth-question-v9 label.option .option-copy,
  #listening .truth-listen-v9 label.option .option-copy{
    display:inline-flex!important;
    flex-direction:row!important;
    align-items:center!important;
    flex-wrap:nowrap!important;
    gap:6px!important;
  }
}


/* =========================================================
   ClearTalk Beginner shared lock
   连词成句 Sentence Building
   Retry / Restart must restore all word chips to their
   original shuffled bank positions so the learner can answer again.
   ========================================================= */
#reviewClozeTask .sentence-building-reset-note{
  display:none;
}

/* FINAL LOCK -- Listening option Hanzi+Pinyin must sit on one row (Pinyin right after
   the Hanzi), on desktop and tablet, regardless of any earlier rule in this file. Only
   wraps naturally at genuinely narrow phone widths. Scoped to .listen-option-copy-v8
   specifically so Reading Practice's .option-copy is never touched. */
#listening .listen-option-copy-v8{
  display:inline-flex!important;
  flex-direction:row!important;
  align-items:baseline!important;
  flex-wrap:nowrap!important;
  gap:6px!important;
}
@media(max-width:480px){
  #listening .listen-option-copy-v8{flex-wrap:wrap!important}
}

/* FINAL LOCK -- Speaking support-bank layout (v3): word-item grid moves from 3 to 4
   columns so 6/7/8-item banks settle at 2 rows instead of 2-3, which keeps paired
   banks in the two-column outer grid close in height without needing exact item-count
   pairing or artificially stretching a shorter bank's card height. Never uses a fixed
   height on an empty/placeholder card to fake alignment -- every card here holds a real
   icon+word.
   v2.2 update: desktop column count is now set per-bank via an inline style at render
   time (08-speaking.js), matched to that bank's own item count (2/3/4 items -> that
   many columns; 5-6 -> 3 columns/2 rows) so a short bank's cards use the full width
   instead of leaving empty grid cells next to them. These media queries only need to
   cap that inline value down further on narrower screens; they intentionally do not
   fix the desktop count anymore. */
/* 2.26 候选（R-045）：上面注释说这三条只是「把内联列数往下压」，但它们写的是
   !important 的固定列数 —— 那不是压，是**整段替换**。结果是 561–1100px 之间
   所有词库一律 3 列、560px 以下一律 2 列，08-speaking.js 按词数算好的列数
   完全不起作用：4 个词被摆成 3 列（空 2 格）、3 个词被摆成 2 列（空 1 格），
   看着就像少了几张卡片。列数改由 layoutBanks() 按真实测得的宽度统一决定，
   这三条固定列数整段删除，不再和它打架。 */

/* Sentence Templates: a compact 2-column grid of left-aligned, auto-height cards,
   instead of the old full-width vertically-stacked blocks that made this one bank far
   taller than everything next to it. */
.speak-items-template-v1{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
@media(max-width:700px){
  .speak-items-template-v1{grid-template-columns:1fr}
}
.speak-template-item-v1{
  border:1px solid #dce3ef;border-radius:15px;background:#fff;
  padding:14px 14px;text-align:left;
  display:flex;flex-direction:column;gap:4px;
}
.speak-template-item-v1 b{font-size:17px;color:var(--navy);font-weight:900;line-height:1.4}
.speak-template-item-v1 small{display:none;font-size:12px;color:var(--blue);font-weight:800}
#speakingPracticeV14 .speak-bank-v14.show-bank-pinyin-v43 .speak-template-item-v1 small{display:block!important}
.speak-bank-template-v1 .speak-items-template-v1 .speak-item-icon-v1{display:none}

/* Speaking example dialogue (v2.2): reuses Reading's .v7-dialogue-line/.reading1-*
   classes for visual consistency ("same layout as body dialogue"), scoped to
   #speakingModelV21 so it never leaks into the real Reading section which uses the
   same class names. Pinyin and English are independent toggles, both default hidden. */
#speakingModelV21 .speaking-model-dialogue-v22{margin-top:10px}
#speakingModelV21.show-model-py .reading1-py{display:block!important}
#speakingModelV21.show-model-en .reading1-en{display:block!important}
#speakingModelV21 .speaking-model-en-v100{display:none;margin-top:8px;color:#536273;font-size:14px;line-height:1.6}
#speakingModelV21.show-model-en .speaking-model-en-v100{display:block!important}
.speaking-model-switches-v22{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 4px}

/* FINAL LOCK -- lookup card English color must be brand teal/green, not the muted
   gray several earlier rules left it as. Every earlier .lookup-pop-v7 .en rule in this
   file used var(--muted); this one wins by appearing last with matching specificity. */
.lookup-pop-v7 .en{color:var(--teal)!important;font-weight:700!important}

/* Scoring Mode toggle button + accessible rules tooltip (v2.2). */
.scoring-mode-toggle-v1{
  border:1px solid var(--line);background:#fff;color:var(--navy);border-radius:999px;
  padding:8px 12px;font-size:12px;font-weight:900;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
}
.scoring-mode-toggle-v1.active{background:var(--soft-teal);border-color:#b9e6da;color:#0f6e56}
.scoring-mode-toggle-v1:hover{background:var(--soft-blue);border-color:#ccd7f3}
.scoring-mode-toggle-v1.active:hover{background:#ddf7f0}
.scoring-rules-tip-v1{
  position:fixed;z-index:170;display:none;max-width:320px;background:#1a2456;color:#fff;
  border-radius:12px;padding:12px 14px;box-shadow:0 12px 30px rgba(0,0,0,.25);font-size:13px;line-height:1.55;
}
.scoring-rules-tip-v1.show{display:block}
.scoring-rules-tip-v1 .cn{font-weight:700;margin-bottom:6px}
.scoring-rules-tip-v1 .en{color:#c7d0f0;font-size:12px}

/* Final score panel shown when Complete Speaking is clicked with Scoring Mode on. */
.scoring-final-panel-v1{
  margin-top:14px;padding:16px 18px;border-radius:16px;background:#f0f9f6;border:1px solid #cdeee1;
}
.scoring-final-panel-v1 .total{font-size:28px;font-weight:950;color:#0f6e56;margin-bottom:10px}
.scoring-final-panel-v1 .block-row{display:flex;justify-content:space-between;font-size:13px;padding:4px 0;color:var(--navy)}
.scoring-final-panel-v1 .reset-btn{margin-top:12px}


/* ============================================================================
   MASTER v2.3 — final layout contract for the shared engine.
   These are NOT an injected runtime patch: they are part of the one official
   stylesheet, placed last so they are the authoritative rule for the three
   behaviours below regardless of which earlier layered block also matched.
   ============================================================================ */

/* --- 1. Listening: the question's own Pinyin sits INLINE, directly after the
   Hanzi it belongs to, never on its own line and never inside the old grey
   support-box chrome. (.listen-py-v8 is shared with the legacy .listen-support-v8
   block layout, which is why it needs an explicit inline rule when it is used
   inside a question stem / fill prompt.) Visibility is still driven only by that
   question's own 拼音 Pinyin switch. --------------------------------------- */
#listening .listening-question-stem-v23 .listen-py-v8,
#listening .listening-fill-prompt-v23 .listen-py-v8{
  display:none!important;
  padding:0!important;
  border:0!important;
  background:none!important;
  border-radius:0!important;
  width:auto!important;
  margin:0 0 0 8px!important;
  font-weight:750!important;
  vertical-align:baseline!important;
}
#listening .listen-question.show-listen-pinyin .listening-question-stem-v23 .listen-py-v8,
#listening .listen-question.show-listen-pinyin .listening-fill-prompt-v23 .listen-py-v8{
  display:inline!important;
}

/* --- 2. Expression Practice keeps its options in a HORIZONTAL row at every
   width. Instead of letting them wrap (or go 100%-wide below 720px, which is
   what turned them into a vertical stack), the row stays nowrap and each option
   is an equal flexible column that shrinks; the text wraps INSIDE the option.
   min-width:0 on both the row and the buttons is what allows the shrink without
   producing document-level horizontal overflow at 390px. ------------------- */
.dialogue-choice-options-v14{
  display:flex!important;
  flex-wrap:nowrap!important;
  align-items:stretch!important;
  min-width:0!important;
}
.dialogue-choice-options-v14 button{
  flex:1 1 0!important;
  min-width:0!important;
  width:auto!important;
  overflow-wrap:anywhere;
}
@media(max-width:900px){
  .dialogue-choice-options-v14{gap:7px!important;}
  .dialogue-choice-options-v14 button{padding:9px 10px!important;font-size:15px!important;}
  .dialogue-choice-options-v14 button>span{font-size:15px!important;}
}
@media(max-width:520px){
  .dialogue-choice-options-v14{gap:5px!important;}
  .dialogue-choice-options-v14 button{padding:8px 6px!important;font-size:12.5px!important;line-height:1.35!important;border-radius:10px!important;}
  .dialogue-choice-options-v14 button>span{font-size:12.5px!important;line-height:1.35!important;}
  .dialogue-choice-options-v14 button .dialogue-option-py-v15{font-size:10.5px!important;}
}

/* --- 3. Speaking example rendered as an A/B dialogue reuses the Reading line
   markup (.reading1-cn/.reading1-py/.reading1-en). Those classes are only
   revealed by #readingCard's own toggles, so inside the Speaking model card they
   need their own rules or the Pinyin / English switches there do nothing.
   English stays hidden until the English switch is pressed. ---------------- */
#speakingModelV21 .speaking-model-dialogue-v22 .reading1-py,
#speakingModelV21 .speaking-model-dialogue-v22 .reading1-en{display:none!important;}
#speakingModelV21.show-model-py .speaking-model-dialogue-v22 .reading1-py{display:block!important;}
#speakingModelV21.show-model-en .speaking-model-dialogue-v22 .reading1-en{display:block!important;}
#speakingModelV21 .speaking-model-dialogue-v22 .v7-dialogue-line{margin-top:8px;}


/* ============================================================================
   MASTER v2.4 — four defects found in the 2026-09-09 review round.
   ============================================================================ */

/* --- 1. TOAST had no stylesheet at all. #toast was a bare <div> at the end of
   <body>, so window.toast() wrote its text as static content ~13,000px down the
   document: every toast in the whole product was invisible, including the
   download-failure message. It is now a real fixed-position notification. ---- */
#toast{
  position:fixed;
  left:50%;
  bottom:28px;
  transform:translate(-50%,14px);
  z-index:9999;
  max-width:min(620px,calc(100vw - 32px));
  padding:13px 20px;
  border-radius:14px;
  background:#192165;
  color:#fff;
  font-size:14.5px;
  font-weight:800;
  line-height:1.55;
  text-align:center;
  box-shadow:0 12px 34px rgba(25,33,101,.30);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
}
#toast.show{opacity:1;visibility:visible;transform:translate(-50%,0);}
@media(max-width:560px){
  #toast{bottom:16px;padding:11px 15px;font-size:13px;max-width:calc(100vw - 24px);}
}

/* --- 2. Hero: kicker / 中文标题 / 英文标题 must be three separate lines.
   26-title-autofit.js used to force display:inline-block on the <h1> in order to
   measure it, which put the h1 on the SAME line box as the inline-flex .eyebrow
   above it — the two ran side by side. The script now measures a block element;
   this rule makes the intent explicit and survives any future measuring code. -- */
.hero-main .hero-copy > .eyebrow{display:inline-flex!important;}
.hero-main .hero-copy > h1#heroTitle{
  display:block!important;
  width:100%!important;
  white-space:nowrap;
}
.hero-main .hero-copy > .hero-en{display:block!important;clear:both;}

/* --- 3. Speaking example text was light grey and its A/B badge was tiny.
   `.speaking-model-v15>div span{display:block;font-size:11.5px;color:#858ea5}`
   was written for the little caption spans in the model card's heading, but it
   also matched every .lookup-token in the example sentence and the .v7-speaker
   badge. Restore both to exactly what the Reading section uses. ------------- */
#speakingModelV21 .reading1-cn,
#speakingModelV21 .speaking-model-line-v21 p,
#speakingModelV21 .speaking-model-lines-v21 p{
  color:var(--navy)!important;
  font-size:21px!important;
  line-height:1.7!important;
  font-weight:700!important;
}
#speakingModelV21 .reading1-cn .lookup-token,
#speakingModelV21 .speaking-model-lines-v21 p .lookup-token,
#speakingModelV21 .speaking-model-line-v21 p .lookup-token{
  display:inline!important;
  font-size:inherit!important;
  font-weight:inherit!important;
  color:inherit!important;
  margin-top:0!important;
}
#speakingModelV21 .speaking-model-py-v15,
#speakingModelV21 .reading1-py{
  font-size:14px!important;
  color:var(--blue)!important;
  font-weight:750!important;
  margin-top:4px!important;
}
#speakingModelV21 .speaking-model-en-v100,
#speakingModelV21 .reading1-en{
  font-size:14px!important;
  color:var(--muted)!important;
  font-weight:600!important;
}
/* A/B badge identical to Reading's: same box, same 21px, same solid fill. */
#speakingModelV21 .v7-speaker{
  display:flex!important;
  width:30px!important;height:30px!important;
  font-size:21px!important;font-weight:950!important;
  line-height:1!important;margin-top:1px!important;border-radius:10px!important;
  align-items:center!important;justify-content:center!important;
}
#speakingModelV21 .v7-speaker.speaker-a{background:var(--blue)!important;color:#fff!important;border:0!important;}
#speakingModelV21 .v7-speaker.speaker-b{background:var(--teal)!important;color:#fff!important;border:0!important;}


/* ============================================================================
   MASTER v2.5 — lesson-complete banner (was missing entirely: restartLesson()
   existed in engine/12-progress.js but nothing on the page ever rendered it).
   Appears at the very bottom of the lesson once every module is done.
   ============================================================================ */
.lesson-complete-v24{
  margin:26px 0 8px;
  padding:44px 30px 40px;
  border-radius:22px;
  background:linear-gradient(103deg,#1b2570 0%,#1d3f9b 42%,#19b394 100%);
  color:#fff;
  text-align:center;
  box-shadow:0 16px 40px rgba(25,33,101,.20);
}
.lesson-complete-kicker-v24{
  font-size:13px;
  font-weight:900;
  letter-spacing:2.4px;
  text-transform:uppercase;
  color:#6ff0d2;
  margin-bottom:12px;
}
.lesson-complete-title-v24{
  margin:0 0 14px;
  font-size:clamp(24px,3.2vw,40px);
  line-height:1.25;
  font-weight:950;
  color:#fff;
}
.lesson-complete-sub-v24{
  margin:0 0 22px;
  font-size:16px;
  font-weight:650;
  color:rgba(255,255,255,.90);
  line-height:1.6;
}
.lesson-complete-btn-v24{
  border:0;
  border-radius:999px;
  background:#fff;
  color:#192165;
  font-size:17px;
  font-weight:900;
  padding:15px 34px;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.16);
  transition:transform .14s ease,box-shadow .14s ease;
}
.lesson-complete-btn-v24:hover{transform:translateY(-1px);box-shadow:0 9px 24px rgba(0,0,0,.22)}
.lesson-complete-btn-v24:active{transform:translateY(0)}
.lesson-complete-btn-v24:focus-visible{outline:3px solid #6ff0d2;outline-offset:3px}
@media(max-width:560px){
  .lesson-complete-v24{padding:32px 18px 30px;border-radius:18px;margin-top:18px}
  .lesson-complete-kicker-v24{font-size:11.5px;letter-spacing:1.8px}
  .lesson-complete-sub-v24{font-size:14px}
  .lesson-complete-btn-v24{font-size:15px;padding:13px 26px}
}

/* ===== MASTER v2.9 · 连词成句：拖拽重排 ==========================================
   点击仍然是主交互（键盘和触屏都可用）；拖拽是叠加上去的，让学生能直接调整顺序，
   而不必清空整句重来。 */
#sentenceOrderListV36 .sentence-order-chip-v36.dragging-v41{opacity:.45;cursor:grabbing}
#sentenceOrderListV36 .sentence-order-slot-v39.drag-over-v41,
#sentenceOrderListV36 .sentence-order-chip-zone-v36.drag-over-v41{
  outline:2px dashed var(--blue);outline-offset:2px;background:#eef4ff;border-radius:10px}
@media(prefers-reduced-motion:reduce){
  #sentenceOrderListV36 .sentence-order-chip-v36.dragging-v41{opacity:.6}}

/* ===== MASTER v2.9 · 开关圆钮垂直居中 =========================================
   原来的写法是 .switch-knob{top:3px}，一个写死的数值 —— 只在「轨道 24 / 圆钮 18」
   和「22 / 16」这两组尺寸下正好居中。口语示例那两个开关（拼音 / 英文）外层按钮带了
   line-height:1 与自定义 padding，圆钮实测 top 5px、bottom 1px，明显偏下。
   改成上下都贴边 + 上下 margin auto 自动居中：与轨道高度无关，也不占用 transform
   （开关打开时的位移仍然靠 translateX）。 */
.switch-track > .switch-knob,
.lang-switch-track > .lang-switch-knob,
.pinyin-switch-track > .pinyin-switch-knob{
  top:0;bottom:0;margin-top:auto;margin-bottom:auto;
}

/* ============================================================================
   v2.11 —— 中文之间不许有空隙
   选项区用 flex + gap 把「汉字块」和「拼音块」分开，但汉字是由若干 .lookup-token
   组成的，每个 token 都是独立的 flex item，于是 gap 落在了词与词之间：
   页面上出现「新家 没有 超市」这种带空格的中文，不符合汉语规范。
   容器 gap 一律归零，间隔改挂在拼音元素自己的 margin 上。
   ========================================================================== */
#reading-practice .option-copy,
#reading-practice .q-title,
#listening .listen-option-copy-v8,
#listening .listen-options-v8 .listen-option-copy-v8,
#listening .listening-question-stem-v23,
#listening .listening-fill-prompt-v23{ gap:0!important; column-gap:0!important; }
#reading-practice .option-copy > .support-py,
#reading-practice .q-title > .support-py{ margin-left:12px!important; }
#listening .listen-option-copy-v8 > .listen-option-py-v8,
#listening .listening-question-stem-v23 > .listen-py-v8,
#listening .listening-fill-prompt-v23 > .listen-py-v8{ margin-left:8px!important; }
@media(max-width:620px){
  #reading-practice .option-copy > .support-py,
  #reading-practice .q-title > .support-py{ margin-left:7px!important; }
}

/* v2.11 —— 口语词卡：词不许挤成三行。最小列宽由引擎按最长词算好，这里只保证
   词本身可以正常换行、卡片高度跟着内容走，而不是把字压进一个固定的小方块。 */
#speakingPracticeV14 .speak-item-v14{ height:auto!important; }
#speakingPracticeV14 .speak-item-v14 b{ white-space:normal!important; line-height:1.28!important; word-break:keep-all!important; }

/* 词汇练习分页条（2026-09-10）：18 个词一屏放不下，分成每组 ≤9 个，
   做完一组点「下一题」。样式沿用本页已有的变量，不引入新配色。 */
.vocab-page-bar-v26{display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid #edf0f6;flex-wrap:wrap}
.vocab-page-count-v26{font-size:13px;font-weight:900;color:var(--muted)}
.vocab-prev-v26,.vocab-next-v26{border-radius:12px;padding:9px 16px;
  font-weight:900;font-size:14px;cursor:pointer}
.vocab-prev-v26{border:1px solid #d8dfef;background:#fff;color:var(--navy)}
.vocab-next-v26{border:1px solid var(--blue);background:var(--blue);color:#fff}
.vocab-prev-v26:disabled,.vocab-next-v26:disabled{opacity:.4;cursor:default}
.vocab-prev-v26:not(:disabled):hover,.vocab-next-v26:not(:disabled):hover{filter:brightness(1.06)}
.vocab-next-v26:focus-visible{outline:3px solid var(--soft-blue);outline-offset:2px}
.vocab-next-v26[hidden]{display:none!important}


/* V57: 填空练习按段显示 —— 每组上方标出这一组对应课文的哪几句，
   学生一眼知道自己在读第几段，而不是每组都从头读整篇。 */
.cloze-range-v57{font-size:12px;font-weight:900;color:var(--muted);
  letter-spacing:.02em;margin-bottom:10px}

/* V58: 课文分页 —— 一屏装不下就切成两页，插图两页都留着。 */
.reading-page-off-v58{display:none!important}
.reading-page-bar-v58{display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid #edf0f6;flex-wrap:wrap}
.reading-page-count-v58{font-size:13px;font-weight:900;color:var(--muted)}
.reading-page-btn-v58{border:1px solid #d8dfef;background:#fff;color:var(--navy);
  border-radius:12px;padding:9px 15px;font-weight:900;font-size:14px;cursor:pointer}
.reading-page-btn-v58.primary{border-color:var(--blue);background:var(--blue);color:#fff}
.reading-page-btn-v58:disabled{opacity:.4;cursor:default}
.reading-page-btn-v58:not(:disabled):hover{filter:brightness(1.06)}

/* V58: 课文插图竖向居中 —— 原来贴在右上角，课文一长就显得图吊在上面、
   下面空一大片。窄屏（≤980px）图本来就换到课文下面，不受影响。 */
@media(min-width:981px){
  #readingSceneLayout .v7-scene-card{align-self:center}
}

/* V59: 语速控件 —— 课文和听力都能放慢（老师原话：「本来我设置了可以调整语速的，
   现在全部不见了」）。旧课件只有 0.75/1.0 两档，这一版四档。 */
.speed-wrap-v59{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;
  padding:4px 8px;border:1px solid #dfe6f4;border-radius:999px;background:#fff}
.speed-label-v59{font-size:12px;font-weight:900;color:var(--muted);
  letter-spacing:.02em;margin-right:2px}
.speed-btn-v59{border:1px solid transparent;background:transparent;color:var(--navy);
  border-radius:999px;padding:5px 10px;font-weight:900;font-size:13px;cursor:pointer;
  font-variant-numeric:tabular-nums;line-height:1}
.speed-btn-v59:hover{background:var(--soft-blue)}
.speed-btn-v59.on{background:var(--blue);color:#fff}
.speed-btn-v59:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.speed-wrap-listening-v59{margin:0 0 14px}
@media(max-width:700px){.speed-wrap-v59{width:100%;justify-content:space-between}}


/* v80: 窄屏顶栏 —— 品牌名和两个模式按钮不许挤在同一行。

   老师 2026-09-10 报的：「顶部的两个模式和 logo 品牌名重叠了」。
   实测 ≤760px 时 `.brand` 的宽度被压成 **0** —— 顶栏是
   `grid-template-columns: minmax(0,1fr) auto`，右边那列按内容自动撑开，
   而「课堂模式 Classroom Mode / 自学模式 Self-Study Mode」两个按钮
   `flex-wrap:nowrap` 后宽得吃掉整行，把左列挤没了。品牌那块的文字
   （`white-space:nowrap`）于是溢出到框外，画在按钮底下。

   修法：窄屏下让按钮**自己占一行**，品牌拿回整行宽度。
   按钮那一行本来就可以横向滚动，放到第二行不影响操作。 */
@media(max-width:760px){
  .topbar{grid-template-columns:minmax(0,1fr)!important}
  .top-actions{grid-column:1!important;grid-row:2!important;justify-content:flex-start!important}
  .brand{min-width:0!important}
}
/* 按钮换行摆，而不是横着滚 —— 横着滚的话「自学模式 Self-Study Mode」
   会被切掉半截，而那一行没有任何可以滚动的提示，学生只会以为按钮坏了。
   实测 521–760px 之间原来还会切掉「繁体 Traditional」和「开始学习」两个，
   所以断点跟外面那一段对齐，都用 760px。 */
@media(max-width:760px){
  .top-actions{flex-wrap:wrap!important;overflow-x:visible!important}
}


/* ===== v81 · MCR-001 / MCR-002 / MCR-003（老师 2026-09-10 批准） ===== */

/* MCR-001 拼音调号：`ɑ̌` 是「单层 ɑ(U+0251) + 组合调号」两个字符，中文字体不给
   U+0251 做组合符定位，会把调号甩到字母右边。字不能改（标准第 251 行定死，规则锁看着），
   所以把一个含 U+0251 且能正确定位组合符的西文字体排到中文字体**前面**；
   中文字仍然落到后面的中文字体上，一个字形都不变。字体文件在 工具/assets/。 */
@font-face{font-family:"CT Pinyin";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/ct-400.woff2") format("woff2");
  unicode-range:U+0020-007E,U+00C0-024F,U+0251,U+0300-036F,U+1E00-1EFF,U+2018-201D,U+2026}
@font-face{font-family:"CT Pinyin";font-style:normal;font-weight:700;font-display:swap;
  src:url("fonts/ct-700.woff2") format("woff2");
  unicode-range:U+0020-007E,U+00C0-024F,U+0251,U+0300-036F,U+1E00-1EFF,U+2018-201D,U+2026}
body,.v7-shell,#app{font-family:"CT Pinyin","PingFang SC","Microsoft YaHei","Noto Sans SC","Noto Sans CJK SC",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}

/* MCR-002 课文练习（填空）的拼音层与开关 —— 以前这一区没有拼音，学生关不掉也开不出 */
#readingClozeV54 .cloze-py-v81{display:none;margin-top:3px;color:var(--blue);
  font-size:13px;line-height:1.55;font-weight:700}
#readingClozeV54 .cloze-set-v54.show-cloze-pinyin-v81 .cloze-py-v81{display:block}

/* ===== P0 · 2026-09-11 课文练习拼音层 =====================================
   1) 汉字行、拼音行各自带 A：/ B：，两行一一对应；
   2) 没作答的空，拼音行同样是空的（答案不提前泄露）；
   3) 拼音用和全站其他拼音**同一套字体规则**（就是 .reading1-py 那一条），
      课文练习不再自己维护一套；
   4) 行高和下内边距给足，j g p q y 的下伸笔画和调号都不会被裁掉。 */
#readingClozeV54 .cloze-line-v83{display:block;margin:0 0 10px}
#readingClozeV54 .cloze-hanzi-line-v83{display:block}
#readingClozeV54 .cloze-py-line-v83{display:none;align-items:baseline;gap:0;
  margin-top:4px;overflow:visible;flex-wrap:nowrap}
#readingClozeV54 .cloze-set-v54.show-cloze-pinyin-v81 .cloze-py-line-v83{display:flex}
#readingClozeV54 .cloze-py-line-v83 .cloze-speaker-v83{color:var(--blue);font-weight:900;
  font-size:13px;line-height:1.75;flex:0 0 auto;margin-right:2px}
#readingClozeV54 .cloze-py-line-v83 .cloze-py-v81{display:block;margin:0;
  flex:1 1 auto;min-width:0;
  font-size:13px;line-height:1.75;padding-bottom:3px;overflow:visible;font-weight:700}
/* 未作答：等宽占位，既不显示答案汉字，也不显示答案拼音 */
#readingClozeV54 .cloze-py-blank-v83{display:inline-block;min-width:3.4em;
  text-align:center;color:transparent;border-bottom:1.5px dashed #9fb2dc;
  vertical-align:baseline;font-weight:800;margin:0 2px}
#readingClozeV54 .cloze-py-blank-v83.revealed-v83{color:#148a73;border-bottom:0;
  min-width:0;font-weight:800;margin:0}
/* 字体：和 .reading1-py 完全同一条规则，不另立一套 */
#readingClozeV54 .cloze-py-v81,
#readingClozeV54 .cloze-py-blank-v83,
#readingClozeV54 .cloze-py-line-v83 .cloze-speaker-v83{
  font-family:Arial,"Helvetica Neue",Helvetica,sans-serif!important;
  font-variant-ligatures:none!important;
  letter-spacing:0!important;
  font-feature-settings:normal!important;
}
/* 容器一律不裁剪，下伸笔画和调号有地方放 */
#readingClozeV54 .cloze-set-v54,
#readingClozeV54 .cloze-text-v54,
#readingClozeV54 .cloze-line-v83,
#readingClozeV54 .cloze-py-line-v83{overflow:visible!important}
@media(max-width:700px){
  #readingClozeV54 .cloze-py-line-v83 .cloze-speaker-v83{margin-right:4px}
}
#readingClozeV54 .cloze-tools-v81{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
#readingClozeV54 .cloze-tools-v81 .cloze-hint-btn-v56{margin-top:14px}
/* ===== v85 · 口语示例卡版式（R-044） =====
   之前那一段把两个开关摆成 flex-direction:column + align-items:flex-end，
   于是它们竖排在卡片右侧、**并且占着正常流**，把中文示例整段顶到卡片下方，
   左边空出一大块。现在改成一行表头：标题在左上、两个开关在右上同一行横排，
   示例正文紧接标题下面。只动版式，不改任何开关行为和内容。 */
#speakingPracticeV14 .speaking-model-v21{
  display:flex!important;flex-direction:column!important;align-items:stretch!important;
}
/* 卡片变成 flex 之后，正文块必须占满整行 —— 否则它会缩成内容宽度并被挤到中间，
   左边又空出一大块（这是改版式时容易带出来的新毛病，先在预览里挡掉）。 */
#speakingPracticeV14 .speaking-model-v21 > *{width:100%!important;min-width:0!important}
#speakingPracticeV14 .speaking-model-v21 .v7-reading-lines,
#speakingPracticeV14 .speaking-model-v21 .speaking-model-lines-v21{
  width:100%!important;align-self:stretch!important;
}
/* 表头一行：标题左上、两个开关右上。窄屏放不下时，**整组开关**一起换到标题下面
   （flex-wrap 自己判断，不用写死断点），但两个开关之间永远是 nowrap 横排。 */
#speakingPracticeV14 .speaking-model-head-row-v85{
  display:flex!important;flex-wrap:wrap!important;
  align-items:flex-start!important;justify-content:space-between!important;
  gap:10px 12px!important;width:100%!important;
}
#speakingPracticeV14 .speaking-model-head-row-v85 .speaking-model-heading-v21{
  flex:1 1 auto!important;min-width:0!important;padding-right:0!important;padding-top:0!important;
  margin:0!important;
}
#speakingPracticeV14 .speaking-model-head-row-v85 .speaking-model-switches-v22{
  display:flex!important;flex-direction:row!important;align-items:flex-start!important;
  justify-content:flex-end!important;flex:0 1 auto!important;
  gap:8px!important;margin:0!important;flex-wrap:nowrap!important;
  min-width:0!important;max-width:100%!important;
}
#speakingPracticeV14 .speaking-model-head-row-v85 .speaking-model-pinyin-btn-v21,
#speakingPracticeV14 .speaking-model-head-row-v85 .speaking-model-english-btn-v22{
  position:static!important;top:auto!important;right:auto!important;margin:0!important;
  flex:0 1 auto!important;min-width:0!important;align-items:center!important;
  padding:6px 2px!important;
}
/* 390 这一档卡片内宽只有 216px，两个开关一行排开要 241px。不允许一上一下，
   所以让**按钮自己的文字**折成「拼音 / Pinyin」两行，开关滑块仍在文字右边；
   字号不缩小，两个开关始终横向并排。宽屏空间够时文字自然还是一行。 */
#speakingPracticeV14 .speaking-model-head-row-v85 .switch-control .switch-label{
  white-space:normal!important;min-width:0!important;line-height:1.25!important;
  text-align:left!important;
}
/* 正文紧接标题下面，不因为右上角的按钮被推走 */
#speakingPracticeV14 .speaking-model-v21 .speaking-model-lines-v21,
#speakingPracticeV14 .speaking-model-v21 .speaking-model-dialogue-v22{
  margin-top:12px!important;
}
/* 关掉拼音/英文之后不许留大块空白 */
#speakingPracticeV14 .speaking-model-line-v21 .speaking-model-py-v15,
#speakingPracticeV14 .speaking-model-en-v100{margin-bottom:0!important}
/* 换到标题下面时靠左起排，仍然是同一行两个开关 */
@media(max-width:520px){
  #speakingPracticeV14 .speaking-model-head-row-v85 .speaking-model-switches-v22{
    justify-content:flex-start!important;flex-wrap:nowrap!important;
  }
}
/* 359px 及以下（iPhone SE 一代这种老窄屏）卡片内宽只剩 146px，
   两个开关横排的物理下限是 206px，横排必然撑破页面。这一档才允许换行，
   与改动前的表现一致，不制造新的横向溢出。 */
@media(max-width:359px){
  #speakingPracticeV14 .speaking-model-head-row-v85 .speaking-model-switches-v22{
    flex-wrap:wrap!important;justify-content:flex-start!important;
  }
}

/* ===== v85 · 课文练习提示词与 Next 锁定（R-042 / R-043） =====
   提示词用**和语法练习提示词完全同一个设计变量** var(--blue)，不另写一个近似蓝。
   它现在是统一查词组件（.lookup-token），点一下开全站同一张注释卡。 */
#readingClozeV54 .cloze-wordbank-v56 .cloze-hint-word-v86{
  /* 仍然是 <button>（键盘和读屏需要它），但外形不做成可填的按钮 ——
     否则学生会以为点一下能把词填进空里。只保留「和语法提示同色的可点词」。 */
  color:var(--blue)!important;font-weight:900!important;cursor:pointer;
  background:transparent!important;border:0!important;box-shadow:none!important;
  padding:2px 4px!important;margin:0!important;border-radius:6px!important;
  font-family:inherit!important;font-size:inherit!important;line-height:inherit!important;
}
#readingClozeV54 .cloze-wordbank-v56 .cloze-hint-word-v86:hover{
  background:var(--soft-blue)!important;
}
#readingClozeV54 .cloze-wordbank-v56 .cloze-hint-word-v86:focus-visible{
  outline:2px solid var(--blue)!important;outline-offset:2px!important;
}
#readingClozeV54 .cloze-wordbank-v56 .cloze-hint-word-v86.active{
  background:var(--soft-blue)!important;
}
/* Next 在本组没做完时：看得出是锁着的，但仍然收得到点击和键盘操作 */
#readingClozeV54 .cloze-next-v55[aria-disabled="true"]{
  opacity:.55!important;filter:saturate(.55)!important;cursor:not-allowed!important;
}
#readingClozeV54 .cloze-next-v55[aria-disabled="true"]:focus-visible{
  outline:2px solid var(--blue);outline-offset:2px;
}
/* 轻量说明：用页面现有的反馈样式（.cloze-feedback-v54.no），不是浏览器弹窗 */
#readingClozeV54 .cloze-nav-note-v85{
  margin-top:8px;text-align:right;min-height:0;
}
#readingClozeV54 .cloze-nav-note-v85[hidden]{display:none!important}
@media(max-width:700px){
  #readingClozeV54 .cloze-nav-note-v85{text-align:left}
}

/* MCR-005 拼音开关放右上角、虚拟键盘按钮下面（老师原话：「拼音开关要在右上角 使用虚拟键盘下面」）。
   键盘角标 .ct-vk-corner-v13 由 20-keyboard-toggle.js 插成 firstChild，这一行紧跟其后。 */
#readingClozeV54 .cloze-py-corner-v82{display:flex;justify-content:flex-end;align-items:center;
  width:100%;margin:0 0 10px}
#readingClozeV54 .cloze-py-corner-v82 .cloze-pinyin-switch-v81{margin:0;flex:0 0 auto}

/* MCR-002 词汇练习（配对）的拼音层与开关 */
#vocabMatchV8 .v25-match-py{display:none;margin-top:3px;color:var(--blue);
  font-size:12px;line-height:1.3;font-weight:800}
#vocabMatchV8.show-vocab-match-pinyin-v81 .v25-match-py{display:block}
#vocabMatchV8 .vocab-match-pinyin-switch-v81{margin-left:auto;align-self:center;flex:0 0 auto}
@media(max-width:680px){#vocabMatchV8 .vocab-match-pinyin-switch-v81{margin-left:0}}

/* MCR-003 表达练习的拼音按钮改成和其余五处同一套开关控件。
   `.pinyin-mini-btn` 那三条旧样式**留着不删** —— 它们用 !important 写死了边框和底色，
   会盖住 switch-control 的滑轨，所以这里只对这一个按钮把它们复位。 */
#dialoguePracticeV14 .dialogue-pinyin-btn-v15{
  border:0!important;background:transparent!important;border-radius:0!important;
  padding:6px 2px!important;color:#596080!important}
#dialoguePracticeV14 .dialogue-pinyin-btn-v15.active{
  background:transparent!important;border-color:transparent!important;color:#596080!important}

/* 2026-09-10 那一版把两个开关竖排在右侧（拼音在上、英文在下）。
   它解决的是「一个在右上、一个在左边」的老问题，但竖排本身占正常流，
   把中文示例整段顶到卡片下方 —— 就是老师现在看到的大块空白。
   2.26 候选用上面的 v85 表头一行取代它，这里只保留两条仍然需要的复位规则，
   竖排规则整段删除，不留下互相打架的死样式。 */
#speakingPracticeV14 .speaking-model-pinyin-btn-v21{
  position:static!important;top:auto!important;right:auto!important;
  padding:6px 2px!important;margin:0!important}
#speakingPracticeV14 .speaking-model-heading-v21{padding-right:0!important}

/* ===== v86 · 口语词库最后一行不留「缺卡片」的大洞（R-045） =====
   列数由 08-speaking.js 的 layoutBanks() 按真实宽度算（只准比最大列数退一步）。
   退完仍有空位时（例如 3 个词只放得下 2 列），这个类把网格换成同宽的弹性行，
   整行排满的行照旧铺满，**只有最后一行居中** —— 读起来是有意居中，不是缺卡。
   不加任何课程词汇，只动列数与对齐。 */
#speakingPracticeV14 .speak-items-v14.speak-items-center-last-v86{
  display:flex!important;flex-wrap:wrap!important;justify-content:center!important;
  align-content:flex-start!important;gap:10px!important;
}
#speakingPracticeV14 .speak-items-v14.speak-items-center-last-v86 > *{
  /* 同宽列 + 280px 上限：居中的那一行也不许把卡片拉大 */
  flex:0 1 min(280px, calc((100% - (var(--speak-cols-v86) - 1) * 10px) / var(--speak-cols-v86)))!important;
  max-width:min(280px, calc((100% - (var(--speak-cols-v86) - 1) * 10px) / var(--speak-cols-v86)))!important;
  min-width:0!important;
}
/* 卡片宽度上限：退列之后（例如 10 个词退到 3 列）不许把卡片拉成异常巨大的一块。
   现网最宽的卡片实测 219px，这个上限不会改变任何现有版面。 */
#speakingPracticeV14 .speak-items-v14 .speak-item-v14{
  max-width:280px;margin-left:auto;margin-right:auto;width:100%;
}