/* ===== Base ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:none;text-size-adjust:none;-webkit-font-smoothing:antialiased;scroll-behavior:smooth;width:100%;max-width:100%;overflow-x:clip}
img,svg{display:block;max-width:100%;height:auto}
button,select{cursor:pointer;background:none;border:none;font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--color-primary);outline-offset:2px;border-radius:var(--radius-sm)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

:root{
  --text-xs:clamp(.75rem,.7rem + .25vw,.875rem);
  --text-sm:clamp(.875rem,.8rem + .35vw,1rem);
  --text-base:clamp(1rem,.95rem + .25vw,1.125rem);
  --text-lg:clamp(1.125rem,1rem + .75vw,1.5rem);
  --text-xl:clamp(1.5rem,1.2rem + 1.25vw,2.25rem);
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;

  /* Classroom palette: warm paper, book coral, banner teal, desk honey */
  --color-bg:#fbf6ee;
  --color-surface:#fffdf9;
  --color-surface-2:#f6efe3;
  --color-border:#e8dccb;
  --color-divider:#efe5d6;
  --color-text:#2c2a33;
  --color-text-muted:#6f6a73;
  --color-text-faint:#a9a3a8;
  --color-primary:#e0553f;       /* book coral */
  --color-primary-hover:#c64431;
  --color-primary-soft:#fde4dc;
  --color-teal:#2f8f9d;          /* title banner */
  --color-teal-soft:#d9eff1;
  --color-honey:#e7a43c;         /* desks */
  --color-honey-soft:#fbecd0;
  --color-green:#3f9a5a;
  --color-green-soft:#dcf0e1;
  --color-pink:#d2477f;
  --color-pink-soft:#fadbe7;

  --radius-sm:.5rem;--radius-md:.75rem;--radius-lg:1.1rem;--radius-xl:1.5rem;--radius-full:9999px;
  --shadow-sm:0 1px 2px rgb(60 40 20 / .06);
  --shadow-md:0 6px 18px rgb(60 40 20 / .08);
  --shadow-lg:0 16px 40px rgb(60 40 20 / .12);
  --ease:cubic-bezier(.16,1,.3,1);

  --font-display:'Chillax','Nunito',sans-serif;
  --font-body:'Nunito','General Sans',system-ui,sans-serif;
}

body{
  width:100%;max-width:100%;overflow-x:clip;
  min-height:100dvh;font-family:var(--font-body);font-size:var(--text-base);line-height:1.55;
  color:var(--color-text);background:var(--color-bg);
  background-image:radial-gradient(circle at 1px 1px,rgb(120 90 50 / .07) 1px,transparent 0);
  background-size:22px 22px;
}
.hidden{display:none!important}

/* ===== Header ===== */
.app-header{position:sticky;top:0;z-index:40;background:rgb(255 253 249 / .92);backdrop-filter:blur(10px);border-bottom:1px solid var(--color-border)}
.header-inner{max-width:1360px;margin:0 auto;padding:var(--space-3) var(--space-5);display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.brand-group{display:flex;align-items:center;gap:var(--space-3);margin-right:auto;min-width:0}
.unit-badge{flex-shrink:0;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--color-primary);color:#fff;font-family:var(--font-display);font-weight:700;font-size:var(--text-xs);line-height:1.1;text-align:center;transform:rotate(-5deg);box-shadow:0 4px 0 #b83d2b}
.title-stack{min-width:0}
.title-select-row{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}
.app-title{font-family:var(--font-display);font-size:var(--text-lg);font-weight:700;color:var(--color-teal);line-height:1.05}
.unit-select{padding:4px 14px;border-radius:var(--radius-full);background:var(--color-surface-2);border:1.5px solid var(--color-border);font-size:var(--text-xs);font-weight:800;color:var(--color-text);width:auto;max-width:100%}
.unit-select:hover{border-color:var(--color-teal)}
.app-subtitle{font-size:var(--text-xs);color:var(--color-text-muted);font-weight:600;margin-top:2px}

.mode-tabs{display:flex;gap:var(--space-1);background:var(--color-surface-2);padding:var(--space-1);border-radius:var(--radius-full);border:1px solid var(--color-border)}
.mode-tab{display:flex;align-items:center;gap:6px;padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:700;color:var(--color-text-muted);transition:background .2s var(--ease),color .2s var(--ease)}
.mode-tab:hover{color:var(--color-text)}
.mode-tab.active{background:var(--color-surface);color:var(--color-primary);box-shadow:var(--shadow-sm)}

.controls-bar{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}
.segmented-control{display:flex;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-full);padding:3px}
.seg-btn{padding:6px var(--space-3);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:800;color:var(--color-text-muted)}
.seg-btn.active{background:var(--color-teal);color:#fff}
.chip-toggle{display:flex;align-items:center;gap:6px;padding:7px var(--space-3);border-radius:var(--radius-full);border:1px solid var(--color-border);background:var(--color-surface);font-size:var(--text-xs);font-weight:800;color:var(--color-text-muted)}
.chip-toggle.active{border-color:var(--color-teal);color:var(--color-teal);background:var(--color-teal-soft)}
.share-btn{display:flex;align-items:center;gap:6px;padding:8px var(--space-4);border-radius:var(--radius-full);background:var(--color-primary);color:#fff;font-size:var(--text-xs);font-weight:800;box-shadow:0 3px 0 #b83d2b}
.share-btn:hover{background:var(--color-primary-hover)}
.share-btn:active{transform:translateY(2px);box-shadow:0 1px 0 #b83d2b}

/* ===== Scalable Unit / Chapter Strip ===== */
.app-main{width:100%;max-width:1360px;margin:0 auto;padding:var(--space-4) var(--space-5)}
.unit-strip-bar{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  margin-bottom:var(--space-4);background:var(--color-surface);padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-lg);border:1px solid var(--color-border);box-shadow:var(--shadow-sm)
}
.unit-pills-scroll{
  display:flex;align-items:center;gap:var(--space-2);overflow-x:auto;min-width:0;flex:1;
  scrollbar-width:none;-ms-overflow-style:none;padding:2px 0
}
.unit-pills-scroll::-webkit-scrollbar{display:none}
.unit-pill{
  flex-shrink:0;display:flex;align-items:center;gap:8px;padding:7px 14px;
  border-radius:var(--radius-full);border:1.5px solid var(--color-border);background:var(--color-surface-2);
  font-size:var(--text-xs);font-weight:800;color:var(--color-text-muted);white-space:nowrap;transition:all .18s var(--ease)
}
.unit-pill:hover{border-color:var(--color-teal);color:var(--color-text)}
.unit-pill .u-tag{padding:1px 7px;border-radius:var(--radius-full);background:var(--color-surface);color:var(--color-teal);font-family:var(--font-display)}
.unit-pill.active{background:var(--color-primary);border-color:var(--color-primary);color:#fff;box-shadow:0 2px 6px rgb(224 85 63 / .28)}
.unit-pill.active .u-tag{background:rgb(255 255 255 / .22);color:#fff}

.page-step-nav{flex-shrink:0;display:flex;align-items:center;gap:6px}
.step-nav-btn{
  display:flex;align-items:center;gap:3px;padding:6px 10px;border-radius:var(--radius-full);
  border:1px solid var(--color-border);background:var(--color-surface-2);font-size:var(--text-xs);font-weight:800;color:var(--color-text)
}
.step-nav-btn:hover:not(:disabled){border-color:var(--color-teal);color:var(--color-teal)}
.step-nav-btn:disabled{opacity:.4;cursor:not-allowed}
.page-indicator{font-family:var(--font-display);font-size:var(--text-xs);font-weight:800;color:var(--color-teal);min-width:68px;text-align:center}

/* ===== Layout ===== */
.workspace-grid{width:100%;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--space-6);align-items:start}
.book-stage-col{position:sticky;top:96px;display:flex;flex-direction:column;gap:var(--space-3);min-width:0;width:100%;max-width:100%}
.companion-col{display:flex;flex-direction:column;gap:var(--space-5);min-width:0;width:100%;max-width:100%}

/* ===== Dynamic Page Switcher ===== */
.page-switcher{
  width:100%;display:grid;grid-template-columns:repeat(var(--page-count, 5),minmax(0,1fr));
  gap:5px;background:var(--color-surface);padding:5px;border-radius:var(--radius-lg);
  border:1px solid var(--color-border);box-shadow:var(--shadow-sm)
}
.page-pill{
  min-width:0;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:6px 2px;border-radius:var(--radius-md);font-size:var(--text-xs);font-weight:800;
  color:var(--color-text-muted);white-space:nowrap;overflow:hidden;transition:all .18s var(--ease)
}
.page-pill:hover{color:var(--color-text);background:var(--color-surface-2)}
.page-pill .p-num{padding:1px 6px;border-radius:6px;background:var(--color-surface-2);color:var(--color-teal);font-family:var(--font-display);flex-shrink:0;line-height:1.2}
.page-pill .p-name{line-height:1.15}
.page-pill.active{background:var(--color-teal);color:#fff;box-shadow:var(--shadow-sm)}
.page-pill.active .p-num{background:rgb(255 255 255 / .22);color:#fff}

/* Match SVG overlay */
.match-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.hotspots-layer{position:absolute;inset:0;z-index:3}
.match-tip{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px dashed var(--color-border);flex-wrap:wrap}

/* ===== Book toolbar ===== */
.book-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap}
.toolbar-hint{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs);font-weight:700;color:var(--color-text-muted)}
.pulse-dot{flex-shrink:0;width:9px;height:9px;border-radius:50%;background:var(--color-green);box-shadow:0 0 0 0 rgb(63 154 90 / .5);animation:pulse 1.8s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgb(63 154 90 / 0)}100%{box-shadow:0 0 0 0 rgb(63 154 90 / 0)}}
.toolbar-actions{display:flex;gap:var(--space-2)}
.toolbar-btn{display:flex;align-items:center;gap:6px;padding:7px var(--space-3);border-radius:var(--radius-full);border:1px solid var(--color-border);background:var(--color-surface);font-size:var(--text-xs);font-weight:800;color:var(--color-text-muted)}
.toolbar-btn.active{color:var(--color-teal);border-color:var(--color-teal)}
.toolbar-btn.primary-play{background:var(--color-teal);border-color:var(--color-teal);color:#fff}
.toolbar-btn.primary-play.playing{background:var(--color-primary);border-color:var(--color-primary)}

/* ===== Book page ===== */
.book-canvas-wrap{background:var(--color-surface);border-radius:var(--radius-xl);padding:var(--space-3);box-shadow:var(--shadow-lg);border:1px solid var(--color-border);width:100%}
.book-page{position:relative;border-radius:var(--radius-lg);overflow:hidden;user-select:none;-webkit-user-select:none;max-height:calc(100dvh - 210px);aspect-ratio:900/1280;margin:0 auto}
.book-img{width:100%;height:100%;object-fit:contain}

.hotspot{position:absolute;z-index:2;border-radius:10px;border:2.5px dashed transparent;transition:background .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease)}
.hotspot.type-object{z-index:1}
.hotspots-visible .hotspot{border-color:rgb(47 143 157 / .7);background:rgb(47 143 157 / .06)}
.hotspots-visible .hotspot.type-word{border-color:rgb(63 154 90 / .85);background:rgb(63 154 90 / .08)}
.hotspots-visible .hotspot.type-sentence{border-color:rgb(210 71 127 / .7);background:rgb(210 71 127 / .05)}
.hotspots-visible .hotspot.type-object{border-color:rgb(231 164 60 / .6);border-style:dotted;background:transparent}
.hotspot:hover{background:rgb(255 255 255 / .18);border-color:var(--color-teal)}
.hotspot.active{border-style:solid;border-color:var(--color-primary)!important;background:rgb(224 85 63 / .16)!important;box-shadow:0 0 0 4px rgb(224 85 63 / .25);animation:pop .4s var(--ease)}
.hotspot.quiz-correct{border-style:solid;border-color:var(--color-green)!important;background:rgb(63 154 90 / .25)!important;box-shadow:0 0 0 5px rgb(63 154 90 / .3)}
.hotspot.quiz-wrong{border-style:solid;border-color:var(--color-primary)!important;background:rgb(224 85 63 / .22)!important;animation:shake .4s}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.05)}100%{transform:scale(1)}}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

/* badge inside hotspot for P27 numbering */
.num-badge{position:absolute;right:4px;bottom:4px;width:24px;height:24px;border-radius:6px;background:var(--color-primary);color:#fff;font-size:var(--text-xs);font-weight:800;display:grid;place-items:center;box-shadow:var(--shadow-sm);pointer-events:none}

/* ripple dot on tap */
.tap-ripple{position:absolute;width:16px;height:16px;border-radius:50%;background:var(--color-primary);pointer-events:none;transform:translate(-50%,-50%);animation:ripple .6s ease-out forwards}
@keyframes ripple{to{width:80px;height:80px;opacity:0}}

/* ===== Quiz banner ===== */
.quiz-banner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;padding:var(--space-4);border-radius:var(--radius-lg);background:var(--color-honey-soft);border:2px solid var(--color-honey)}
.quiz-banner-left{display:flex;align-items:center;gap:var(--space-3)}
.quiz-step-badge{padding:4px 10px;border-radius:var(--radius-full);background:var(--color-honey);color:#fff;font-size:var(--text-xs);font-weight:800;white-space:nowrap}
.quiz-question-en{font-size:var(--text-lg);font-weight:800}
.quiz-question-cn{font-size:var(--text-xs);color:var(--color-text-muted);font-weight:600}
.quiz-banner-actions{display:flex;align-items:center;gap:var(--space-2)}
.btn-replay-prompt{display:flex;align-items:center;gap:6px;padding:8px var(--space-3);border-radius:var(--radius-full);background:var(--color-surface);border:1px solid var(--color-honey);font-size:var(--text-xs);font-weight:800}
.quiz-score-pill{padding:8px var(--space-3);border-radius:var(--radius-full);background:var(--color-surface);font-size:var(--text-xs);font-weight:800;color:var(--color-green)}

/* ===== Now playing ===== */
.now-playing-card{background:var(--color-surface);border-radius:var(--radius-xl);padding:var(--space-5) var(--space-6);box-shadow:var(--shadow-md);border:1px solid var(--color-border);border-top:6px solid var(--color-teal)}
.np-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-3)}
.np-tag{padding:3px 10px;border-radius:var(--radius-full);background:var(--color-teal-soft);color:var(--color-teal);font-size:var(--text-xs);font-weight:800}
.sound-wave{display:flex;align-items:flex-end;gap:3px;height:20px;opacity:.25}
.sound-wave span{width:4px;height:6px;border-radius:2px;background:var(--color-primary)}
.sound-wave.playing{opacity:1}
.sound-wave.playing span{animation:wave .9s ease-in-out infinite}
.sound-wave.playing span:nth-child(2){animation-delay:.15s}
.sound-wave.playing span:nth-child(3){animation-delay:.3s}
.sound-wave.playing span:nth-child(4){animation-delay:.45s}
@keyframes wave{50%{height:20px}}
.np-body{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
.np-text-group{min-width:0;flex:1}
.np-english{font-family:var(--font-display);font-size:var(--text-xl);font-weight:700;line-height:1.15;color:var(--color-text);word-break:break-word}
.np-phonetic{font-size:var(--text-sm);color:var(--color-teal);font-weight:700;margin-top:4px}
.np-chinese{font-size:var(--text-base);color:var(--color-text-muted);font-weight:700;margin-top:2px}
.hide-cn .np-chinese,.hide-cn .cn-text{visibility:hidden}
.np-big-speaker{flex-shrink:0;width:68px;height:68px;border-radius:50%;display:grid;place-items:center;background:var(--color-primary);color:#fff;box-shadow:0 5px 0 #b83d2b;transition:transform .15s}
.np-big-speaker:active{transform:translateY(3px);box-shadow:0 2px 0 #b83d2b}
.np-big-speaker svg{width:28px;height:28px}

.np-word-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--space-4)}
.np-word-chips:empty{display:none}
.word-chip{padding:4px 12px;border-radius:var(--radius-full);background:var(--color-surface-2);border:1px solid var(--color-border);font-size:var(--text-sm);font-weight:700}
.word-chip:hover{border-color:var(--color-teal);color:var(--color-teal)}
.word-chip.active{background:var(--color-teal);color:#fff;border-color:var(--color-teal)}

.np-footer-actions{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px dashed var(--color-border)}
.action-pill{display:flex;align-items:center;gap:6px;padding:8px var(--space-3);border-radius:var(--radius-full);background:var(--color-surface-2);border:1px solid var(--color-border);font-size:var(--text-xs);font-weight:800;color:var(--color-text)}
.action-pill:hover{border-color:var(--color-teal);color:var(--color-teal)}
.record-pill.recording{background:var(--color-primary);border-color:var(--color-primary);color:#fff;animation:recpulse 1.2s infinite}
@keyframes recpulse{50%{box-shadow:0 0 0 6px rgb(224 85 63 / .2)}}
.replay-my-voice{background:var(--color-green-soft);border-color:var(--color-green);color:var(--color-green)}

/* ===== Panels ===== */
.panel-section{background:var(--color-surface);border-radius:var(--radius-xl);padding:var(--space-5);border:1px solid var(--color-border);box-shadow:var(--shadow-sm)}
.panel-section+.panel-section{margin-top:var(--space-5)}
.section-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-4);flex-wrap:wrap}
.section-heading{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-base);font-weight:800}
.section-sub{font-size:var(--text-xs);color:var(--color-text-muted);font-weight:600;margin-top:2px}
.sec-num{flex-shrink:0;display:grid;place-items:center;min-width:26px;height:24px;padding:0 6px;border-radius:7px;background:var(--color-teal);color:#fff;font-size:var(--text-xs)}
.cards-header-btns{display:flex;gap:6px;flex-wrap:wrap}
.mini-play-all{flex-shrink:0;padding:6px 12px;border-radius:var(--radius-full);background:var(--color-teal-soft);color:var(--color-teal);font-size:var(--text-xs);font-weight:800}
.mini-play-all:hover{background:var(--color-teal);color:#fff}

.quick-word-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2)}
.quick-word{min-width:0;display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2);border-radius:var(--radius-md);border:1.5px solid var(--color-border);background:var(--color-surface);text-align:left;transition:border-color .2s,transform .2s var(--ease)}
.quick-word:hover{border-color:var(--color-green);transform:translateY(-2px)}
.quick-word.active{border-color:var(--color-primary);background:var(--color-primary-soft)}
.quick-word img{width:44px;height:44px;border-radius:8px;object-fit:cover;flex-shrink:0}
.qw-en{display:block;font-size:var(--text-sm);font-weight:800;line-height:1.2;word-break:break-word}
.qw-cn{display:block;font-size:var(--text-xs);color:var(--color-text-muted);font-weight:700}

.quick-sentence-list{display:flex;flex-direction:column;gap:6px}
.quick-sentence{display:flex;align-items:center;gap:var(--space-3);padding:10px var(--space-3);border-radius:var(--radius-md);background:var(--color-surface-2);text-align:left;border:1.5px solid transparent}
.quick-sentence:hover{border-color:var(--color-pink)}
.quick-sentence.active{border-color:var(--color-primary);background:var(--color-primary-soft)}
.qs-idx{flex-shrink:0;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--color-pink-soft);color:var(--color-pink);font-size:var(--text-xs);font-weight:800}
.qs-text{flex:1;min-width:0}
.qs-en{display:block;font-size:var(--text-sm);font-weight:800}
.qs-cn{display:block;font-size:var(--text-xs);color:var(--color-text-muted);font-weight:700}

/* Flashcards */
.flashcards-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
.flashcard{min-width:0;display:flex;flex-direction:column;border-radius:var(--radius-lg);overflow:hidden;border:2px solid var(--color-border);background:var(--color-surface);text-align:left;transition:transform .25s var(--ease),border-color .2s,box-shadow .25s}
.flashcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--color-honey)}
.flashcard.active{border-color:var(--color-primary);box-shadow:0 0 0 4px rgb(224 85 63 / .18)}
.flashcard img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--color-surface-2)}
.fc-body{padding:var(--space-3) var(--space-4) var(--space-4)}
.fc-word{font-family:var(--font-display);font-size:var(--text-xl);font-weight:700;line-height:1.1;color:var(--color-teal);word-break:break-word}
.fc-syll{display:flex;flex-wrap:wrap;gap:2px;margin-top:4px;font-size:var(--text-sm);font-weight:800}
.fc-syll span:nth-child(odd){color:var(--color-primary)}
.fc-syll span:nth-child(even){color:var(--color-honey)}
.fc-ipa{font-size:var(--text-xs);color:var(--color-text-muted);font-weight:700}
.fc-cn{font-size:var(--text-sm);font-weight:800;margin-top:2px}
.fc-example{margin-top:var(--space-2);padding-top:var(--space-2);border-top:1px dashed var(--color-border);font-size:var(--text-xs);color:var(--color-text-muted);font-weight:700}

/* Chant */
.chant-stage-card{background:var(--color-surface);border-radius:var(--radius-xl);padding:var(--space-5);border:1px solid var(--color-border);box-shadow:var(--shadow-sm)}
.chant-header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-4)}
.chant-badge{font-size:var(--text-xs);font-weight:800;color:var(--color-pink)}
.chant-title{font-size:var(--text-lg);font-weight:800}
.chant-controls{display:flex;gap:var(--space-2)}
.chant-btn{display:flex;align-items:center;justify-content:center;gap:6px;padding:9px var(--space-4);border-radius:var(--radius-full);border:1.5px solid var(--color-border);background:var(--color-surface);font-size:var(--text-xs);font-weight:800}
.chant-btn.primary{background:var(--color-pink);border-color:var(--color-pink);color:#fff;box-shadow:0 3px 0 #a5325f}
.chant-btn.primary.playing{background:var(--color-primary);border-color:var(--color-primary);box-shadow:0 3px 0 #b83d2b}
.chant-btn[aria-pressed="true"]{border-color:var(--color-pink);color:var(--color-pink);background:var(--color-pink-soft)}
.chant-btn.full-width{width:100%;margin-top:var(--space-4)}
.chant-lines-container{display:flex;flex-direction:column;gap:var(--space-2)}
.chant-line{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg);background:var(--color-surface-2);text-align:left;border:2px solid transparent;transition:all .25s var(--ease)}
.chant-line:hover{border-color:var(--color-pink-soft)}
.chant-line.active{background:var(--color-pink-soft);border-color:var(--color-pink);transform:scale(1.01)}
.chant-line.title-line .cl-en{color:var(--color-pink);font-style:normal}
.cl-note{flex-shrink:0;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--color-surface);color:var(--color-pink)}
.chant-line.active .cl-note{background:var(--color-pink);color:#fff}
.cl-en{display:block;font-size:var(--text-lg);font-weight:800;line-height:1.3}
.cl-en .kw{color:var(--color-teal);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.cl-cn{display:block;font-size:var(--text-xs);color:var(--color-text-muted);font-weight:700}

/* Quiz side */
.quiz-side-card{background:var(--color-surface);border-radius:var(--radius-xl);padding:var(--space-5);border:1px solid var(--color-border)}
.quiz-checklist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2);margin-top:var(--space-4)}
.quiz-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:var(--space-3) var(--space-2);border-radius:var(--radius-md);background:var(--color-surface-2);font-size:var(--text-xs);font-weight:800;color:var(--color-text-muted);border:2px solid transparent;text-align:center}
.quiz-item .qi-icon{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--color-surface);font-size:var(--text-sm)}
.quiz-item.current{border-color:var(--color-honey);color:var(--color-text)}
.quiz-item.done{background:var(--color-green-soft);color:var(--color-green)}
.quiz-item.done .qi-icon{background:var(--color-green);color:#fff}
.quiz-finish{margin-top:var(--space-4);padding:var(--space-4);border-radius:var(--radius-lg);background:var(--color-green-soft);text-align:center}
.quiz-finish strong{display:block;font-family:var(--font-display);font-size:var(--text-xl);color:var(--color-green)}

/* Footer */
.app-footer{max-width:1360px;margin:var(--space-4) auto 0;padding:var(--space-4) var(--space-5) var(--space-8);text-align:center;font-size:var(--text-xs);font-weight:700;color:var(--color-text-muted);border-top:1px dashed var(--color-border)}

/* Toast */
.toast-popup{position:fixed;left:50%;bottom:var(--space-8);transform:translateX(-50%);z-index:100;padding:12px var(--space-5);border-radius:var(--radius-full);background:var(--color-text);color:#fff;font-size:var(--text-sm);font-weight:700;box-shadow:var(--shadow-lg);animation:toastIn .3s var(--ease);max-width:calc(100vw - 32px);text-align:center}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,12px)}}

/* ===== Responsive ===== */
@media (max-width:1160px){
  .header-inner{gap:var(--space-2)}
  .mode-tabs{order:3;width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
  .mode-tab{width:100%;min-width:0;justify-content:center}
  .page-pill{flex-direction:column;gap:2px;padding:6px 2px}
  .page-pill .p-num{padding:1px 6px;font-size:var(--text-xs)}
  .page-pill .p-name{font-size:var(--text-xs);line-height:1.15}
}
@media (max-width:900px){
  .workspace-grid{grid-template-columns:minmax(0,1fr)}
  .book-stage-col{position:static}
  .book-canvas-wrap{width:100%}
  .book-page{max-height:none;width:100%;height:auto}
}
@media (max-width:640px){
  .app-main{padding:var(--space-3);padding-bottom:var(--space-10)}
  .header-inner{padding:var(--space-2) var(--space-3);gap:var(--space-2)}
  .brand-group{gap:var(--space-2)}
  .unit-badge{width:38px;height:38px;border-radius:10px}
  .app-title{font-size:var(--text-lg)}
  .unit-select{padding:3px 10px;max-width:100%}
  .app-subtitle{display:none}
  .controls-bar{width:100%;justify-content:space-between;flex-wrap:nowrap;gap:4px}
  .seg-btn{padding:5px 8px}
  .chip-toggle{padding:5px 8px;gap:4px}
  .share-btn span{display:none}
  .share-btn{padding:6px 9px;flex-shrink:0}
  .mode-tabs{padding:3px;gap:2px}
  .mode-tab{padding:7px 2px;font-size:var(--text-xs);gap:3px;white-space:nowrap}
  .mode-tab svg{width:14px;height:14px;flex-shrink:0}
  .unit-strip-bar{flex-wrap:wrap;gap:var(--space-2);padding:var(--space-2)}
  .unit-pills-scroll{width:100%;flex:none}
  .unit-pill{padding:6px 11px}
  .page-step-nav{width:100%;justify-content:space-between}
  .page-switcher{gap:4px;padding:4px}
  .page-pill{flex-direction:column;gap:2px;padding:5px 1px;border-radius:var(--radius-sm)}
  .page-pill .p-num{padding:1px 4px;font-size:var(--text-xs)}
  .page-pill .p-name{font-size:var(--text-xs);line-height:1.1}
  .book-toolbar{gap:var(--space-2)}
  .toolbar-hint{flex:1;min-width:150px}
  .toolbar-actions{margin-left:auto}
  .book-canvas-wrap{padding:6px;border-radius:var(--radius-lg)}
  .now-playing-card{padding:var(--space-4)}
  .np-big-speaker{width:54px;height:54px}
  .quick-word-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flashcards-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2)}
  .fc-body{padding:var(--space-2) var(--space-3) var(--space-3)}
  .quiz-banner{padding:var(--space-3)}
}