:root{
  --bg:#f4f1e8;
  --bg2:#e8e3d5;
  --surface:#ffffff;
  --surface2:#eee9db;
  --green:#16532f;
  --green-l:#1e6e3e;
  --green-bg:rgba(22,83,47,.08);
  --amber:#a8640a;
  --amber-bg:rgba(168,100,10,.1);
  --red:#c0321a;
  --red-bg:rgba(192,50,26,.08);
  --blue:#1a56a0;
  --blue-bg:rgba(26,86,160,.08);
  --text:#1e1a12;
  --text2:#64584a;
  --border:#d4cebb;
  --shadow:0 2px 18px rgba(30,26,18,.08);
  --shadow-lg:0 12px 48px rgba(30,26,18,.15);
  --shadow-card:0 4px 24px rgba(22,83,47,.10);
  --radius:14px;
  /* Font size controls — adjusted by setFontSize() */
  --fs-en:16px;   /* English text in dialogue & player */
  --fs-zh:12px;   /* Chinese translation */
  --fs-ph:13px;   /* Phonetics / IPA */
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased;}

/* ── Layout ── */
#wrap{display:flex;min-height:100vh;}
#sidebar{
  width:80px;background:linear-gradient(180deg,#133d24 0%,var(--green) 100%);
  position:fixed;top:0;left:0;height:100vh;
  display:flex;flex-direction:column;align-items:center;padding:16px 0 20px;z-index:200;
  box-shadow:3px 0 28px rgba(26,92,53,.22);transition:transform .3s;
}
.logo-mark{
  font-family:'Playfair Display',serif;font-size:20px;font-weight:900;
  color:#fff;letter-spacing:.02em;margin-bottom:24px;cursor:pointer;
  background:rgba(255,255,255,.14);border-radius:12px;width:52px;height:52px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:background .2s;line-height:1.1;
}
.logo-mark span{font-size:8px;font-weight:700;letter-spacing:.14em;opacity:.7;font-family:'DM Sans',sans-serif;}
.logo-mark:hover{background:rgba(255,255,255,.22);}
.nav-icon{
  width:52px;height:52px;border-radius:14px;border:none;background:transparent;
  color:rgba(255,255,255,.5);font-size:22px;cursor:pointer;transition:all .22s;
  display:flex;align-items:center;justify-content:center;margin:3px 0;position:relative;
}
a.nav-icon{text-decoration:none;}
.nav-icon:hover,.nav-icon.on{background:rgba(255,255,255,.18);color:#fff;box-shadow:0 2px 12px rgba(0,0,0,.15);}
.nav-icon.on::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:28px;background:#fff;border-radius:0 3px 3px 0;opacity:.8;
}
.nav-icon .tip{
  position:absolute;left:68px;background:rgba(19,61,36,.96);color:#fff;
  padding:6px 14px;border-radius:9px;font-size:13px;font-weight:700;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .18s;
  box-shadow:0 3px 12px rgba(0,0,0,.2);
}
.nav-icon .tip::before{
  content:'';position:absolute;left:-5px;top:50%;transform:translateY(-50%);
  border:5px solid transparent;border-right-color:rgba(19,61,36,.96);border-left:none;
}
.nav-icon:hover .tip{opacity:1;}
/* Mobile menu toggle */
#mob-toggle{
  display:none;position:fixed;top:14px;left:14px;z-index:300;
  width:42px;height:42px;border-radius:10px;background:var(--green);border:none;
  color:#fff;font-size:18px;cursor:pointer;box-shadow:0 3px 12px rgba(26,92,53,.3);
  align-items:center;justify-content:center;
}
#sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:199;}

#main{
  margin-left:80px;
  flex:1;
  padding:36px 48px 48px;
  width:calc(100% - 80px);
  box-sizing:border-box;
}
/* Inner content wrapper for centering on ultra-wide */
.page{display:none;animation:fadeUp .35s ease both;max-width:1400px;margin:0 auto;}
.page.on{display:block;}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

/* ── Typography ── */
.display{font-family:'Playfair Display',serif;font-size:clamp(28px,4vw,46px);font-weight:700;color:var(--green);line-height:1.18;}
.subtitle{color:var(--text2);font-size:15px;font-weight:500;margin-top:6px;}
.section-label{
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text2);margin-bottom:12px;display:flex;align-items:center;gap:8px;
}
.section-label::after{content:'';flex:1;height:1px;background:var(--border);}

/* ── Book tabs ── */
.book-tabs{display:flex;gap:6px;margin-bottom:28px;margin-top:20px;}
.book-tab{
  padding:9px 20px;border-radius:8px;border:1.5px solid var(--border);background:var(--surface);
  color:var(--text2);font-weight:600;font-size:13px;cursor:pointer;transition:all .2s;
}
.book-tab.on{background:var(--green);border-color:var(--green);color:#fff;}

/* ── Lesson grid ── */
.lesson-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:22px;}
.lesson-card{
  background:var(--surface);border-radius:22px;
  cursor:pointer;transition:all .3s cubic-bezier(.22,.8,.38,1);position:relative;overflow:hidden;
  box-shadow:var(--shadow-card);border:1.5px solid rgba(255,255,255,.8);
}
.lesson-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 20px 56px rgba(22,83,47,.18);border-color:var(--lc-color,var(--green));}
/* cover illustration band */
.lc-cover{
  height:96px;width:100%;position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--lc-color,var(--green)) 0%,var(--lc-color2,#2a8a50) 100%);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 18px;
}
.lc-cover-num{
  font-family:'Playfair Display',serif;font-size:48px;font-weight:900;
  color:rgba(255,255,255,.18);line-height:1;letter-spacing:-.04em;position:absolute;right:14px;bottom:-6px;
}
.lc-cover-tag{
  font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.85);background:rgba(0,0,0,.18);border-radius:6px;
  padding:4px 9px;align-self:flex-start;margin-top:14px;
}
.lc-cover-icon{font-size:38px;align-self:flex-end;margin-bottom:10px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.2));}
.lc-body{padding:16px 18px 18px;}
.lc-num{
  font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--lc-color,var(--amber));margin-bottom:5px;
}
.lc-title{
  font-family:'Playfair Display',serif;font-size:17px;font-weight:700;
  color:var(--text);margin-bottom:3px;line-height:1.28;
}
.lc-sub{font-size:12px;color:var(--text2);font-weight:600;margin-bottom:12px;}
.lc-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:12px;}
.tag{
  font-size:10px;font-weight:700;padding:3px 9px;border-radius:20px;
  background:var(--green-bg);color:var(--green);
}
.tag.amber{background:var(--amber-bg);color:var(--amber);}
.tag.blue{background:var(--blue-bg);color:var(--blue);}
.lc-prog-row{display:flex;align-items:center;gap:10px;}
.lc-prog{flex:1;background:var(--bg2);border-radius:6px;height:5px;overflow:hidden;}
.lc-prog-fill{height:100%;background:linear-gradient(90deg,var(--lc-color,var(--green)),var(--lc-color2,var(--amber)));transition:width .8s;border-radius:6px;}
.lc-prog-pct{font-size:11px;color:var(--text2);font-weight:800;min-width:28px;text-align:right;}

/* ── Lesson Detail ── */
.back-row{display:flex;align-items:center;gap:12px;margin-bottom:20px;}
.back-btn{
  background:var(--surface);border:1.5px solid var(--border);color:var(--text2);
  padding:8px 16px;border-radius:10px;cursor:pointer;font-size:13px;font-weight:600;
  transition:all .18s;display:flex;align-items:center;gap:5px;
}
.back-btn:hover{border-color:var(--green);color:var(--green);}
.lesson-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}

/* Content tabs */
.content-tabs{display:flex;gap:4px;background:var(--surface2);border-radius:12px;padding:4px;margin-bottom:24px;width:fit-content;}
.ctab{
  padding:9px 18px;border-radius:9px;border:none;background:transparent;
  color:var(--text2);font-weight:600;font-size:13px;cursor:pointer;transition:all .18s;
}
.ctab.on{background:var(--surface);color:var(--green);box-shadow:0 1px 8px rgba(0,0,0,.09);}

/* Dialogue */
.dialogue-wrap{background:var(--surface);border:1.5px solid var(--border);border-radius:18px;padding:32px 36px;margin-bottom:20px;}
.dial-row{display:flex;gap:14px;margin-bottom:20px;align-items:flex-start;}
.dial-row:last-child{margin-bottom:0;}
.dial-speaker{
  min-width:86px;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--amber);padding-top:18px;line-height:1.3;flex-shrink:0;
}
.dial-bubble{
  background:var(--bg);border-radius:0 13px 13px 13px;padding:12px 16px 10px;
  flex:1;border:1px solid var(--border);
}
/* Interlinear three-line display */
.interlinear{display:flex;flex-wrap:wrap;gap:2px 8px;align-items:flex-end;margin-bottom:8px;line-height:1;}
.tok{display:inline-flex;flex-direction:column;align-items:center;gap:1px;}
.tok-ph{
  font-family:'DM Mono',monospace;font-size:var(--fs-ph);color:var(--amber);
  letter-spacing:-.01em;line-height:1.5;min-height:18px;white-space:nowrap;
}
.tok-en{
  font-size:var(--fs-en);font-weight:600;color:var(--text);line-height:1.3;
  cursor:pointer;transition:color .15s;
}
.tok-en:hover{color:var(--green);}
.tok-en.kw{color:var(--green);font-weight:700;border-bottom:1.5px dashed var(--green);}
.dial-zh{
  font-size:var(--fs-zh);color:var(--text2);font-weight:500;padding-top:6px;
  border-top:1px solid var(--border);line-height:1.6;
}
.play-btn{
  background:none;border:1.5px solid var(--border);color:var(--text2);
  width:36px;height:36px;border-radius:8px;cursor:pointer;font-size:14px;
  transition:all .18s;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  margin-top:14px;
}
.play-btn:hover{border-color:var(--green);color:var(--green);background:var(--green-bg);}
.play-btn.active{border-color:var(--green);color:#fff;background:var(--green);animation:pb-pulse 1s ease-in-out infinite;}
@keyframes pb-pulse{0%,100%{opacity:1}50%{opacity:.65}}

/* ── Display-toggle toolbar ── */
.disp-bar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:16px;}
.disp-btn{
  padding:5px 12px;border-radius:7px;border:1.5px solid var(--border);background:var(--surface);
  color:var(--text2);font-size:11px;font-weight:700;cursor:pointer;transition:all .18s;
  display:flex;align-items:center;gap:4px;letter-spacing:.02em;
}
.disp-btn:hover{border-color:var(--green);color:var(--green);}
.disp-btn.on{background:var(--green);border-color:var(--green);color:#fff;}
.disp-btn.seg{border-radius:0;}
.disp-btn.seg:first-of-type{border-radius:7px 0 0 7px;}
.disp-btn.seg:last-of-type{border-radius:0 7px 7px 0;}
.disp-sep{width:1px;height:22px;background:var(--border);margin:0 2px;}

/* Vocab grid */
.vocab-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:18px;}
.vc{
  background:var(--surface);border:2px solid transparent;border-radius:20px;
  padding:0 0 14px;cursor:pointer;transition:all .26s cubic-bezier(.22,.8,.38,1);position:relative;
  display:flex;flex-direction:column;align-items:center;text-align:center;overflow:hidden;
  box-shadow:0 3px 14px rgba(33,29,21,.08);
}
.vc:hover{transform:translateY(-5px);box-shadow:0 14px 40px rgba(33,29,21,.14);}
.vc.known{box-shadow:0 4px 18px rgba(184,114,14,.18);}
/* coloured top band — colour set via CSS var --vc-h (hue) */
.vc-band{
  width:100%;height:84px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;
  margin-bottom:12px;flex-shrink:0;
  background:linear-gradient(140deg, var(--vc-c1,#1a5c35) 0%, var(--vc-c2,#266e42) 100%);
  border-radius:17px 17px 0 0;transition:filter .22s;position:relative;overflow:hidden;
}
.vc-band::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 80% 20%, rgba(255,255,255,.18) 0%, transparent 65%);
}
.vc:hover .vc-band{filter:brightness(1.08);}
.vc.known .vc-band{
  background:linear-gradient(140deg,#a05c08 0%,#c87e18 100%) !important;
}
/* row 1: phonetic inside band */
.vc-ph{
  font-family:'DM Mono',monospace;font-size:15px;color:#fff;
  font-weight:700;letter-spacing:.02em;line-height:1;
  background:rgba(0,0,0,.25);border-radius:7px;padding:4px 10px;
  position:relative;z-index:1;
}

/* Pagination */
.vocab-pager{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;}
.pg-btn{
  background:var(--surface);border:1.5px solid var(--border);color:var(--text2);
  width:34px;height:34px;border-radius:9px;cursor:pointer;font-size:14px;font-weight:700;
  transition:all .18s;display:flex;align-items:center;justify-content:center;
}
.pg-btn:hover:not(:disabled){border-color:var(--green);color:var(--green);}
.pg-btn:disabled{opacity:.35;cursor:default;}
.pg-info{font-size:13px;font-weight:700;color:var(--text2);min-width:70px;text-align:center;}

/* Modal overlay */
#vc-modal{
  position:fixed;inset:0;background:rgba(38,33,26,.6);backdrop-filter:blur(6px);
  z-index:500;display:none;align-items:center;justify-content:center;padding:20px;
}
#vc-modal.open{display:flex;}
#vc-modal-inner{
  background:var(--surface);border:1.5px solid var(--border);border-radius:24px;
  padding:36px 32px 28px;max-width:420px;width:100%;position:relative;
  box-shadow:0 24px 64px rgba(38,33,26,.22);animation:modalIn .25s ease both;
  text-align:center;
}
@keyframes modalIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
.modal-close{
  position:absolute;top:14px;right:14px;background:var(--surface2);border:1.5px solid var(--border);
  color:var(--text2);width:32px;height:32px;border-radius:8px;cursor:pointer;font-size:14px;
  display:flex;align-items:center;justify-content:center;transition:all .15s;
}
.modal-close:hover{border-color:var(--red);color:var(--red);}
.modal-nav{display:flex;align-items:center;justify-content:space-between;margin-top:22px;gap:8px;}
.modal-nav-btn{
  background:var(--surface2);border:1.5px solid var(--border);color:var(--text2);
  padding:9px 18px;border-radius:10px;cursor:pointer;font-size:13px;font-weight:700;
  transition:all .18s;display:flex;align-items:center;gap:5px;
}
.modal-nav-btn:hover{border-color:var(--green);color:var(--green);}
.modal-nav-btn:disabled{opacity:.3;cursor:default;}
.modal-ph{font-family:'DM Mono',monospace;font-size:18px;color:var(--amber);margin-bottom:6px;}
.modal-en{font-family:'Playfair Display',serif;font-size:48px;font-weight:700;color:var(--green);line-height:1.1;margin-bottom:6px;}
.modal-zh{font-size:22px;font-weight:700;color:var(--text);margin-bottom:12px;}
.modal-phonics{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin-bottom:14px;}
.modal-type{display:inline-block;font-size:10px;font-weight:700;padding:2px 8px;border-radius:5px;background:var(--amber-bg);color:var(--amber);margin-bottom:10px;}
.modal-ex{font-size:14px;color:var(--text2);font-style:italic;line-height:1.7;margin-bottom:14px;}
.modal-known-btn{
  background:var(--green-bg);border:1.5px solid var(--green);color:var(--green);
  padding:9px 20px;border-radius:9px;font-weight:700;font-size:13px;cursor:pointer;
  transition:all .18s;display:inline-flex;align-items:center;gap:6px;
}
.modal-known-btn:hover,.modal-known-btn.on{background:var(--green);color:#fff;}
.modal-sound{
  background:none;border:1.5px solid var(--border);color:var(--text2);
  width:36px;height:36px;border-radius:9px;cursor:pointer;font-size:15px;
  transition:all .15s;display:inline-flex;align-items:center;justify-content:center;margin-left:8px;
}
.modal-sound:hover{border-color:var(--green);color:var(--green);}
.modal-counter{font-size:11px;color:var(--text2);font-weight:700;}
/* row 2: english word */
.vc-en{
  font-family:'Playfair Display',serif;font-size:30px;font-weight:700;
  color:var(--green);line-height:1.1;margin-bottom:2px;padding:0 8px;
  letter-spacing:-.02em;
}
/* row 3: chinese */
.vc-zh{font-size:15px;font-weight:800;color:var(--text);margin-bottom:5px;}
/* row 4: phonics chunks */
.vc-phonics{display:flex;flex-wrap:wrap;gap:3px;margin-bottom:7px;align-items:flex-end;justify-content:center;}
.ph-chunk{
  display:inline-flex;flex-direction:column;align-items:center;
  border-radius:6px;padding:2px 5px 3px;cursor:default;
  border-bottom:2px solid transparent;
}
.ph-chunk .pc-spell{font-family:'Playfair Display',serif;font-size:15px;font-weight:700;line-height:1.25;}
.ph-chunk .pc-ph{font-family:'DM Mono',monospace;font-size:12px;font-weight:500;line-height:1.4;letter-spacing:-.02em;opacity:.85;}
/* 5-color palette cycling */
.phc-0{background:rgba(27,94,56,.1);border-color:rgba(27,94,56,.3);color:#1b5e38;}
.phc-0 .pc-ph{color:#2d7a50;}
.phc-1{background:rgba(192,124,26,.1);border-color:rgba(192,124,26,.3);color:#8a5a0a;}
.phc-1 .pc-ph{color:#c07c1a;}
.phc-2{background:rgba(30,100,180,.1);border-color:rgba(30,100,180,.3);color:#1a4fa0;}
.phc-2 .pc-ph{color:#3070c8;}
.phc-3{background:rgba(160,40,130,.1);border-color:rgba(160,40,130,.3);color:#901878;}
.phc-3 .pc-ph{color:#c040a8;}
.phc-4{background:rgba(160,60,20,.1);border-color:rgba(160,60,20,.3);color:#9e3810;}
.phc-4 .pc-ph{color:#c05028;}
/* separator dash */
.ph-sep{font-size:11px;color:var(--border);align-self:center;line-height:1;font-weight:700;}
/* row 5: type + example */
.vc-meta{display:flex;align-items:center;gap:5px;margin-bottom:5px;justify-content:center;}
.vc-type{
  font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;
  background:var(--amber-bg);color:var(--amber);letter-spacing:.05em;white-space:nowrap;
}
.vc-ex{font-size:11px;color:var(--text2);font-style:italic;line-height:1.55;flex:1;min-height:0;}
/* bottom row: sound + known badge */
.vc-foot{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:auto;padding-top:8px;border-top:1px solid var(--border);width:100%;}
.vc-sound{
  background:none;border:1.5px solid var(--border);color:var(--text2);
  width:28px;height:28px;border-radius:7px;cursor:pointer;font-size:12px;
  transition:all .15s;display:flex;align-items:center;justify-content:center;
}
.vc-sound:hover{border-color:var(--green);color:var(--green);background:var(--green-bg);}
.vc-badge{
  width:28px;height:28px;border-radius:50%;border:2px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:var(--text2);transition:all .22s;flex-shrink:0;
  cursor:pointer;background:none;
}
.vc-badge:hover{border-color:var(--green);color:var(--green);background:var(--green-bg);}
.vc.known .vc-badge{border-color:var(--green);background:var(--green);color:#fff;}
.vc.known .vc-badge:hover{background:var(--green-l);border-color:var(--green-l);}
.vi-sound{
  width:34px;height:34px;border-radius:8px;border:1.5px solid var(--border);
  background:none;color:var(--text2);cursor:pointer;font-size:14px;transition:all .18s;
  display:flex;align-items:center;justify-content:center;
}
.vi-sound:hover{border-color:var(--green);color:var(--green);background:var(--green-bg);}

/* Grammar – kid-friendly redesign */
.grammar-card{
  background:var(--surface);border:1.5px solid var(--border);border-radius:18px;
  padding:22px 24px 20px;margin-bottom:16px;
  border-top:4px solid var(--green);
}
.grammar-card.gc-color-blue{border-top-color:var(--blue);}
.grammar-card.gc-color-amber{border-top-color:var(--amber);}
.grammar-card.gc-color-purple{border-top-color:#8b5cf6;}
.gc-title{
  font-family:'Playfair Display',serif;font-size:18px;font-weight:700;
  color:var(--text);margin-bottom:14px;display:flex;align-items:center;gap:8px;
}
.gc-body{font-size:15px;line-height:1.9;color:var(--text);}
.gc-body strong{color:var(--text);font-weight:700;}

/* Phonetic rules */
.gm-phon-rule{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);}
.gm-phon-rule:last-child{border-bottom:none;}
.gm-phon-sym{
  font-family:'DM Mono',monospace;font-size:18px;font-weight:700;
  color:var(--blue);background:var(--blue-bg);border-radius:8px;
  padding:4px 12px;min-width:64px;text-align:center;flex-shrink:0;
  letter-spacing:.02em;
}
.gm-word-chips{display:flex;flex-wrap:wrap;gap:6px;}
.gm-word-chip{
  background:var(--surface2);border:1.5px solid var(--border);border-radius:20px;
  padding:4px 13px;font-size:15px;font-weight:600;color:var(--text);
}

/* Practice sentences */
.gm-sent{
  padding:9px 14px;margin:5px 0;
  background:var(--green-bg);border-left:3px solid var(--green);
  border-radius:0 10px 10px 0;font-size:15px;color:var(--text);line-height:1.75;
}

/* Idioms */
.gm-idiom{
  display:flex;align-items:center;gap:8px;
  padding:7px 0;border-bottom:1px dashed var(--border);
  font-size:15px;color:var(--text);
}
.gm-idiom:last-child{border-bottom:none;}

/* Proverbs */
.gm-proverb{
  padding:10px 16px;margin:6px 0;
  background:var(--amber-bg);border-radius:10px;
  font-size:15px;font-style:italic;color:var(--amber);line-height:1.75;
}

/* Grammar exercise */
.gm-section-header{
  font-size:13px;font-weight:800;color:var(--text2);
  background:var(--bg2);border-radius:8px;
  padding:5px 12px;margin:10px 0 4px;letter-spacing:.04em;
}
.gm-exercise-instr{
  font-size:14px;font-weight:700;color:var(--text);
  padding:8px 0 4px;border-top:1px solid var(--border);margin-top:6px;
}
.gm-exercise-item{
  font-size:15px;color:var(--text);padding:6px 0;
  border-bottom:1px dashed var(--border);line-height:1.9;
}
.gm-exercise-item:last-child{border-bottom:none;}
.gm-blank{
  display:inline-block;border-bottom:2px solid var(--amber);
  min-width:52px;color:transparent;background:var(--amber-bg);
  border-radius:3px;margin:0 2px;vertical-align:middle;height:1.1em;
}

/* Expressions */
.gm-expr-header{
  font-size:15px;font-weight:800;color:var(--green);
  background:var(--green-bg);border-radius:8px;
  padding:8px 14px;margin-bottom:8px;
}
.gm-expr{
  font-size:15px;color:var(--text);padding:6px 10px;
  margin:3px 0;border-left:3px solid var(--border);line-height:1.75;
}
.gm-expr-pair{display:flex;align-items:flex-start;flex-wrap:wrap;gap:6px;padding:5px 0;}
.gm-expr-bubble{
  background:var(--surface2);border:1.5px solid var(--border);
  border-radius:12px;padding:5px 13px;font-size:14px;line-height:1.6;
}
.gm-expr-arrow{color:var(--text2);font-size:14px;padding-top:6px;}

/* Legacy fallback */
.gm-row{padding:5px 0;border-bottom:1px solid var(--border);font-size:15px;line-height:1.8;}
.gm-row:last-child{border-bottom:none;}

/* Word-click speak */
.grammar-speak-on .gm-speak-w{
  cursor:pointer;border-radius:4px;transition:background .13s,color .13s;
}
.grammar-speak-on .gm-speak-w:hover{
  background:var(--amber-bg);color:var(--amber);
}

.gc-formula{
  background:var(--green-bg);border:1.5px solid rgba(27,94,56,.15);border-radius:10px;
  padding:12px 16px;margin:12px 0;font-family:'DM Mono',monospace;font-size:13px;
  color:var(--green);font-weight:500;line-height:1.9;
}
.gc-eg{
  background:var(--amber-bg);border-radius:8px;padding:10px 14px;
  margin-top:10px;font-size:13px;font-style:italic;color:var(--amber);font-weight:500;
}

/* ── Flashcard ── */
.fc-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
.fc-progress{flex:1;max-width:280px;background:var(--bg2);border-radius:8px;height:6px;overflow:hidden;margin:0 16px;}
.fc-prog-fill{height:100%;background:linear-gradient(90deg,var(--green),var(--amber));transition:width .5s;}
.fc-counter{font-size:13px;color:var(--text2);font-weight:600;}
.fc-scene{width:100%;max-width:500px;height:280px;perspective:1400px;cursor:pointer;margin:0 auto 22px;}
.fc-card{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.4,0,.2,1);}
.fc-card.flip{transform:rotateY(180deg);}
.fc-face{
  position:absolute;inset:0;backface-visibility:hidden;border-radius:20px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:30px;border:1.5px solid var(--border);
}
.fc-front{background:var(--surface);}
.fc-back{background:linear-gradient(145deg,var(--green) 0%,#2d7a50 100%);border-color:transparent;transform:rotateY(180deg);}
.fc-en{font-family:'Playfair Display',serif;font-size:48px;font-weight:700;color:var(--green);margin-bottom:4px;}
.fc-ph{font-family:'DM Mono',monospace;font-size:16px;color:var(--amber);font-weight:500;}
.fc-phonic{margin-top:10px;display:flex;justify-content:center;}
.fc-phonic .ph-chunk{padding:4px 10px 5px;border-radius:10px;}
.fc-phonic .pc-spell{font-size:22px;}
.fc-phonic .pc-ph{font-size:14px;}
.fc-phonic .ph-sep{font-size:18px;}
.fc-hint{font-size:12px;color:var(--text2);margin-top:14px;font-weight:500;}
.fc-zh{font-size:38px;font-weight:700;color:#fff;margin-bottom:8px;}
.fc-ex{font-size:13px;color:rgba(255,255,255,.8);text-align:center;line-height:1.7;font-style:italic;}
.fc-ex span{color:#fff;font-weight:700;font-style:normal;}
.fc-controls{display:flex;justify-content:center;gap:10px;align-items:center;}
.fc-btn{
  background:var(--surface);border:1.5px solid var(--border);color:var(--text2);
  width:46px;height:46px;border-radius:10px;cursor:pointer;font-size:16px;
  transition:all .18s;display:flex;align-items:center;justify-content:center;
}
.fc-btn:hover{border-color:var(--green);color:var(--green);}
.fc-btn.main{
  width:58px;height:58px;background:var(--green);border-color:var(--green);
  color:#fff;font-size:20px;border-radius:12px;box-shadow:0 4px 16px rgba(27,94,56,.28);
}
.fc-btn.main:hover{background:var(--green-l);}
.fc-action-row{display:flex;justify-content:center;gap:10px;margin-top:14px;}
.fc-action{
  padding:10px 20px;border-radius:9px;font-weight:700;font-size:13px;
  cursor:pointer;transition:all .18s;border:1.5px solid;
}
.fc-know{background:var(--green-bg);border-color:var(--green);color:var(--green);}
.fc-know:hover{background:var(--green);color:#fff;}
.fc-skip{background:var(--red-bg);border-color:var(--red);color:var(--red);}
.fc-skip:hover{background:var(--red);color:#fff;}
.fc-sel{
  background:var(--surface);border:1.5px solid var(--border);color:var(--text);
  padding:9px 14px;border-radius:8px;font-family:'DM Sans',sans-serif;
  font-size:13px;font-weight:600;cursor:pointer;outline:none;
}

/* ── Quiz ── */
.quiz-setup{max-width:520px;}
.qs-label{font-size:13px;font-weight:700;color:var(--text2);margin-bottom:10px;margin-top:18px;}
.quiz-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px;}
.qmode{
  background:var(--surface);border:2px solid var(--border);border-radius:12px;
  padding:14px 10px;text-align:center;cursor:pointer;transition:all .2s;
}
.qmode.on,.qmode:hover{border-color:var(--green);background:var(--green-bg);}
.qm-icon{font-size:26px;margin-bottom:4px;}
.qm-name{font-weight:700;font-size:13px;color:var(--text);}
.qm-desc{font-size:11px;color:var(--text2);margin-top:2px;}
.start-btn{
  background:var(--green);color:#fff;border:none;padding:14px 34px;border-radius:10px;
  font-family:'DM Sans',sans-serif;font-size:16px;font-weight:700;cursor:pointer;
  box-shadow:0 4px 18px rgba(27,94,56,.25);transition:all .22s;
}
.start-btn:hover{background:var(--green-l);transform:translateY(-2px);box-shadow:0 8px 28px rgba(27,94,56,.3);}
.qbar-row{display:flex;align-items:center;gap:12px;margin-bottom:22px;}
.qbar-track{flex:1;background:var(--bg2);border-radius:6px;height:7px;overflow:hidden;}
.qbar-fill{height:100%;background:linear-gradient(90deg,var(--green),var(--amber));transition:width .5s;}
.qbar-txt{font-size:13px;font-weight:700;color:var(--text2);white-space:nowrap;}
.q-card{
  background:var(--surface);border:1.5px solid var(--border);border-radius:18px;
  padding:32px;text-align:center;margin-bottom:18px;max-width:560px;
}
.q-prompt{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text2);margin-bottom:12px;}
.q-main{font-family:'Playfair Display',serif;font-size:46px;font-weight:700;color:var(--green);line-height:1.1;}
.q-ph{font-family:'DM Mono',monospace;font-size:15px;color:var(--amber);margin-top:5px;}
.q-zh{font-size:36px;font-weight:700;color:var(--text);margin-bottom:6px;}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:560px;}
.opt{
  background:var(--surface);border:2px solid var(--border);color:var(--text);
  padding:14px 16px;border-radius:11px;font-family:'DM Sans',sans-serif;
  font-weight:600;font-size:14px;cursor:pointer;transition:all .18s;
}
.opt:hover:not(:disabled){border-color:var(--green);background:var(--green-bg);}
.opt.ok{border-color:var(--green)!important;background:var(--green-bg)!important;color:var(--green)!important;}
.opt.no{border-color:var(--red)!important;background:var(--red-bg)!important;color:var(--red)!important;}
.spell-row{display:flex;gap:10px;align-items:center;max-width:400px;}
.spell-in{
  flex:1;background:var(--surface);border:2px solid var(--border);color:var(--text);
  padding:12px 16px;border-radius:10px;font-family:'Playfair Display',serif;
  font-size:22px;outline:none;transition:border-color .18s;
}
.spell-in:focus{border-color:var(--green);}
.spell-in.ok{border-color:var(--green);color:var(--green);}
.spell-in.no{border-color:var(--red);color:var(--red);}
.confirm-btn{
  background:var(--green);border:none;color:#fff;padding:12px 20px;border-radius:10px;
  font-family:'DM Sans',sans-serif;font-weight:700;font-size:14px;cursor:pointer;
  box-shadow:0 3px 12px rgba(27,94,56,.2);transition:all .18s;
}
.confirm-btn:hover{background:var(--green-l);}
.fb{font-weight:700;font-size:16px;text-align:center;margin-bottom:12px;animation:pop .3s ease;}
@keyframes pop{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}
.fb.ok{color:var(--green);}
.fb.no{color:var(--red);}
.next-q{
  background:var(--surface2);border:1.5px solid var(--border);color:var(--text2);
  padding:10px 22px;border-radius:9px;font-weight:700;font-size:13px;cursor:pointer;
  transition:all .18s;
}
.next-q:hover{border-color:var(--green);color:var(--green);}
/* Results */
.result-wrap{max-width:440px;margin:0 auto;text-align:center;}
.r-trophy{font-size:72px;margin-bottom:12px;animation:rock 1.2s ease-in-out infinite;}
@keyframes rock{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
.r-score{font-family:'Playfair Display',serif;font-size:64px;font-weight:700;color:var(--green);}
.r-sub{font-size:15px;color:var(--text2);font-weight:600;margin-bottom:20px;}
.r-table{background:var(--surface);border:1.5px solid var(--border);border-radius:14px;padding:16px;margin-bottom:20px;text-align:left;}
.r-row{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--border);font-weight:600;font-size:14px;}
.r-row:last-child{border:none;}
.rbtn{
  background:var(--green);color:#fff;border:none;padding:12px 26px;border-radius:9px;
  font-weight:700;font-size:14px;cursor:pointer;box-shadow:0 3px 14px rgba(27,94,56,.2);
  transition:all .2s;margin:0 5px;
}
.rbtn:hover{background:var(--green-l);}
.rbtn.ghost{background:var(--surface);border:1.5px solid var(--border);color:var(--text2);box-shadow:none;}
.rbtn.ghost:hover{border-color:var(--green);color:var(--green);}

/* ── Progress page ── */
.prog-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:32px;}
.ps-card{
  background:var(--surface);border:1.5px solid var(--border);border-radius:14px;
  padding:20px;display:flex;align-items:center;gap:14px;
}
.ps-icon{font-size:28px;}
.ps-n{font-family:'Playfair Display',serif;font-size:30px;font-weight:700;}
.ps-n.g{color:var(--green);}
.ps-n.a{color:var(--amber);}
.ps-l{font-size:11px;color:var(--text2);font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-top:1px;}
.ulist{display:flex;flex-direction:column;gap:10px;}
.ul-item{
  background:var(--surface);border:1.5px solid var(--border);border-radius:12px;
  padding:13px 16px;display:flex;align-items:center;gap:14px;cursor:pointer;transition:all .18s;
}
.ul-item:hover{border-color:var(--green);}
.ul-book{
  font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 8px;border-radius:5px;background:var(--green-bg);color:var(--green);white-space:nowrap;
}
.ul-title{font-weight:600;font-size:13px;flex:1;}
.ul-bar{flex:1;max-width:180px;background:var(--bg2);border-radius:4px;height:5px;overflow:hidden;}
.ul-fill{height:100%;background:linear-gradient(90deg,var(--green),var(--amber));transition:width .8s;}
.ul-pct{font-size:12px;font-weight:700;color:var(--text2);min-width:34px;text-align:right;}

/* ── Toast ── */
#toast{
  position:fixed;bottom:24px;right:24px;background:var(--green);color:#fff;
  padding:10px 18px;border-radius:10px;font-weight:700;font-size:13px;z-index:999;
  opacity:0;transform:translateY(10px);transition:all .28s;box-shadow:var(--shadow-lg);
}
#toast.on{opacity:1;transform:translateY(0);}

/* ── Confetti ── */
#confetti{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:998;}

/* ── Video Player ── */
#ct-video{}
.video-tab-wrap{display:flex;flex-direction:column;gap:28px;}
.video-section{background:var(--surface);border:1.5px solid var(--border);border-radius:18px;overflow:hidden;}
.video-section-header{
  display:flex;align-items:center;gap:10px;padding:14px 18px;
  border-bottom:1.5px solid var(--border);background:var(--surface2);
}
.video-section-icon{font-size:18px;}
.video-section-title{
  font-family:'Playfair Display',serif;font-size:15px;font-weight:700;
  color:var(--text);letter-spacing:.01em;
}
.video-embed-wrap{
  position:relative;width:100%;padding-bottom:56.25%;
  overflow:hidden;background:#0a0a0a;
}
.video-embed-wrap iframe{
  position:absolute;top:0;left:0;width:100%;height:100%;border:none;
}
/* ── Word Video Grid ── */
.word-video-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:16px;padding:18px;
}
.word-video-item{
  background:var(--surface2);border:1.5px solid var(--border);
  border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;
  transition:box-shadow .18s,transform .18s;
}
.word-video-item:hover{
  box-shadow:0 6px 24px rgba(0,0,0,.13);
  transform:translateY(-2px);
}
video.word-video-player{
  width:100%;aspect-ratio:16/9;
  display:block;background:#0a0a0a;
  border-bottom:none;
}
.word-video-label{
  padding:9px 14px;
  font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;
  color:var(--text);letter-spacing:.02em;
  text-align:center;
  border-top:1.5px solid var(--border);
  background:var(--surface);
}
.video-empty{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;text-align:center;padding:24px;
}
.video-empty-icon{font-size:52px;opacity:.6;}
.video-empty-title{font-family:'Playfair Display',serif;font-size:20px;font-weight:700;color:rgba(255,255,255,.85);}
.video-empty-sub{font-size:13px;color:rgba(255,255,255,.5);font-weight:500;max-width:320px;line-height:1.6;}
.video-ctrl-bar{
  background:var(--surface);border:1.5px solid var(--border);border-top:none;
  border-radius:0 0 18px 18px;padding:14px 18px;display:flex;flex-direction:column;gap:10px;
}
.video-url-row{display:flex;gap:8px;align-items:center;}
.video-url-input{
  flex:1;padding:9px 14px;border:1.5px solid var(--border);border-radius:10px;
  background:var(--bg);font-family:'DM Sans',sans-serif;font-size:13px;color:var(--text);
  outline:none;transition:border-color .18s;
}
.video-url-input:focus{border-color:var(--green);}
.video-url-input::placeholder{color:var(--text2);}
.video-url-btn{
  padding:9px 16px;border-radius:10px;border:none;font-family:'DM Sans',sans-serif;
  font-size:13px;font-weight:700;cursor:pointer;transition:all .18s;white-space:nowrap;
}
.video-url-btn.primary{background:var(--green);color:#fff;}
.video-url-btn.primary:hover{background:var(--green-l);}
.video-url-btn.ghost{background:var(--surface);border:1.5px solid var(--border);color:var(--text2);}
.video-url-btn.ghost:hover{border-color:var(--green);color:var(--green);}
.video-search-row{display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
.video-search-lbl{font-size:11px;font-weight:800;color:var(--text2);letter-spacing:.04em;}
.video-search-btn{
  padding:5px 12px;border-radius:20px;border:1.5px solid var(--border);
  background:var(--surface);color:var(--text2);font-size:11px;font-weight:700;
  cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:4px;
  text-decoration:none;
}
.video-search-btn:hover{border-color:var(--green);color:var(--green);}
.video-saved-badge{
  display:inline-flex;align-items:center;gap:4px;
  background:var(--green-bg);border:1.5px solid var(--green);color:var(--green);
  border-radius:20px;padding:3px 10px;font-size:11px;font-weight:700;
}
.video-clear-btn{
  background:none;border:none;color:var(--text2);font-size:12px;cursor:pointer;
  padding:2px 6px;border-radius:5px;transition:all .15s;font-weight:700;
}
.video-clear-btn:hover{color:var(--red);}

/* ── Audio Player ── */
#player-wrap{display:flex;flex-direction:column;gap:0;}
/* Lyrics panel */
.lyric-panel{
  background:var(--surface);border:1.5px solid var(--border);border-radius:20px 20px 0 0;
  height:420px;overflow-y:auto;padding:12px 0;scroll-behavior:smooth;
}
.lyric-panel::-webkit-scrollbar{width:4px;}
.lyric-panel::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;}
.ly-row{
  display:flex;gap:12px;padding:12px 20px;
  cursor:pointer;transition:all .22s;margin:1px 6px;position:relative;
  border-radius:12px;
}
.ly-row:hover{background:var(--bg2);}
.ly-row.active{
  background:linear-gradient(90deg,var(--green-bg) 0%,transparent 100%);
  border-left:3px solid var(--green);margin-left:0;padding-left:17px;
}
.ly-row.played{opacity:.38;}
.ly-idx{
  font-size:10px;font-weight:700;color:var(--text2);min-width:22px;
  padding-top:4px;letter-spacing:.04em;flex-shrink:0;
}
.ly-row.active .ly-idx{color:var(--green);font-weight:800;}
.ly-content{flex:1;}
.ly-en{
  font-size:var(--fs-en);font-weight:600;color:var(--text);line-height:1.55;
}
.ly-row.active .ly-en{color:var(--green);font-weight:800;}
.ly-ph-line{
  display:flex;flex-wrap:wrap;gap:2px 8px;margin-top:3px;
}
.ly-ph-tok{display:inline-flex;flex-direction:column;align-items:center;}
.ly-ph-tok .lpt-ph{font-family:'DM Mono',monospace;font-size:9.5px;color:var(--amber);line-height:1.5;}
.ly-ph-tok .lpt-en{font-size:14px;font-weight:600;color:var(--text2);line-height:1.3;}
.ly-row.active .ly-ph-tok .lpt-en{color:var(--green);font-weight:700;}
.ly-zh{font-size:var(--fs-zh);color:var(--text2);margin-top:4px;font-weight:500;line-height:1.5;}
.ly-row.active .ly-zh{color:var(--text);font-weight:600;}
.ly-sp{
  font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--amber);padding-top:5px;min-width:60px;text-align:right;flex-shrink:0;
}
/* Progress bar */
.player-progress-wrap{
  background:var(--surface);border-left:1.5px solid var(--border);border-right:1.5px solid var(--border);
  padding:12px 22px 0;
}
.player-prog-track{
  width:100%;height:6px;background:var(--bg2);border-radius:6px;cursor:pointer;position:relative;
}
.player-prog-fill{
  height:100%;background:linear-gradient(90deg,var(--green),var(--amber));
  border-radius:6px;transition:width .3s;
}
.player-prog-thumb{
  position:absolute;top:50%;width:16px;height:16px;border-radius:50%;
  background:#fff;border:2.5px solid var(--green);box-shadow:0 2px 8px rgba(22,83,47,.28);
  transform:translate(-50%,-50%);transition:left .3s;pointer-events:none;
}
.player-time{display:flex;justify-content:space-between;margin-top:6px;padding-bottom:10px;}
.player-time span{font-family:'DM Mono',monospace;font-size:11px;color:var(--text2);font-weight:600;}
/* Controls bar */
.player-controls{
  background:var(--surface);border:1.5px solid var(--border);border-top:none;border-radius:0 0 20px 20px;
  padding:16px 22px 20px;
}
.ctrl-row{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:14px;}
.p-btn{
  background:none;border:1.5px solid var(--border);color:var(--text2);
  border-radius:12px;cursor:pointer;font-size:16px;transition:all .18s;
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;
}
.p-btn:hover{border-color:var(--green);color:var(--green);background:var(--green-bg);}
.p-btn.active{border-color:var(--green);color:var(--green);background:var(--green-bg);}
.p-btn.play{
  width:60px;height:60px;border-radius:50%;font-size:22px;
  background:linear-gradient(135deg,var(--green),var(--green-l));
  border-color:var(--green);color:#fff;
  box-shadow:0 6px 22px rgba(22,83,47,.32);
}
.p-btn.play:hover{transform:scale(1.08);box-shadow:0 8px 28px rgba(22,83,47,.38);}
.p-btn.play.playing{
  background:linear-gradient(135deg,var(--amber),#c07c1a);
  border-color:var(--amber);
  box-shadow:0 6px 22px rgba(168,100,10,.3);
}
/* Speed & options row */
.ctrl-row-2{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;}
.speed-group{display:flex;gap:0;border:1.5px solid var(--border);border-radius:9px;overflow:hidden;}
.sp-btn{
  background:var(--surface);border:none;border-right:1px solid var(--border);color:var(--text2);
  padding:6px 11px;font-size:11px;font-weight:700;cursor:pointer;transition:all .15s;
}
.sp-btn:last-child{border-right:none;}
.sp-btn:hover{background:var(--bg2);}
.sp-btn.on{background:var(--green);color:#fff;}
.lmode-group{display:flex;gap:4px;}
.lm-btn{
  background:var(--surface);border:1.5px solid var(--border);color:var(--text2);
  padding:6px 11px;border-radius:8px;font-size:11px;font-weight:700;cursor:pointer;transition:all .15s;
}
.lm-btn:hover{border-color:var(--green);color:var(--green);}
.lm-btn.on{background:var(--green);border-color:var(--green);color:#fff;}
.player-options{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.opt-chip{
  background:var(--surface);border:1.5px solid var(--border);color:var(--text2);
  padding:6px 11px;border-radius:8px;font-size:11px;font-weight:700;cursor:pointer;transition:all .15s;
  display:flex;align-items:center;gap:4px;
}
.opt-chip:hover{border-color:var(--green);color:var(--green);}
.opt-chip.on{background:var(--green-bg);border-color:var(--green);color:var(--green);}
/* ── Lesson Browser ── */
.lesson-search-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px;}
.lesson-search{
  flex:1;min-width:180px;max-width:320px;
  padding:9px 14px 9px 36px;border-radius:10px;border:1.5px solid var(--border);
  background:var(--surface);font-family:'DM Sans',sans-serif;font-size:14px;color:var(--text);
  transition:border-color .18s;outline:none;
}
.lesson-search:focus{border-color:var(--green);}
.search-wrap{position:relative;flex:1;max-width:320px;}
.search-wrap::before{
  content:'🔍';position:absolute;left:10px;top:50%;transform:translateY(-50%);
  font-size:13px;pointer-events:none;
}
.view-toggle{display:flex;gap:0;border:1.5px solid var(--border);border-radius:8px;overflow:hidden;}
.vt-btn{
  background:var(--surface);border:none;color:var(--text2);padding:7px 12px;
  cursor:pointer;font-size:14px;transition:all .15s;
}
.vt-btn:hover{background:var(--bg2);}
.vt-btn.on{background:var(--green);color:#fff;}
.filter-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:20px;}
.filter-chip{
  padding:5px 13px;border-radius:20px;border:1.5px solid var(--border);
  background:var(--surface);color:var(--text2);font-size:12px;font-weight:700;
  cursor:pointer;transition:all .18s;
}
.filter-chip:hover{border-color:var(--green);color:var(--green);}
.filter-chip.on{background:var(--green);border-color:var(--green);color:#fff;}
.unit-section{margin-bottom:28px;}
.unit-header{
  font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text2);margin-bottom:10px;padding:6px 0;
  display:flex;align-items:center;gap:10px;
}
.unit-header::after{content:'';flex:1;height:1px;background:var(--border);}
/* Compact list view */
.lesson-list{display:flex;flex-direction:column;gap:6px;}
.lesson-list-item{
  background:var(--surface);border:1.5px solid var(--border);border-radius:12px;
  padding:12px 16px;cursor:pointer;transition:all .2s;
  display:flex;align-items:center;gap:14px;
  border-left:4px solid var(--lc-color,var(--green));
}
.lesson-list-item:hover{border-color:var(--lc-color,var(--green));box-shadow:var(--shadow);transform:translateX(4px);}
.ll-num{font-size:10px;font-weight:800;color:var(--lc-color,var(--amber));letter-spacing:.08em;text-transform:uppercase;min-width:70px;}
.ll-title{font-weight:700;font-size:14px;flex:1;}
.ll-cn{font-size:12px;color:var(--text2);margin-left:4px;}
.ll-tags{display:flex;gap:5px;flex-shrink:0;}
.ll-bar-wrap{flex:0 0 80px;height:5px;background:var(--bg2);border-radius:4px;overflow:hidden;}
.ll-bar{height:100%;background:linear-gradient(90deg,var(--lc-color,var(--green)),var(--lc-color2,var(--amber)));border-radius:4px;transition:width .6s;}
.ll-pct{font-size:11px;font-weight:800;color:var(--text2);min-width:32px;text-align:right;}
.ll-done{color:var(--green);font-size:14px;flex-shrink:0;}
#page-spelling .sg-setup{max-width:480px;}
.sg-book-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.sg-start{
  background:linear-gradient(135deg,var(--green),var(--green-l));border:none;color:#fff;
  padding:14px 36px;border-radius:14px;font-family:'DM Sans',sans-serif;
  font-size:16px;font-weight:800;cursor:pointer;
  box-shadow:0 6px 22px rgba(26,92,53,.28);transition:all .25s;margin-top:8px;
}
.sg-start:hover{transform:translateY(-3px);box-shadow:0 10px 32px rgba(26,92,53,.32);}
/* Game arena */
.sg-arena{max-width:560px;}
.sg-hud{display:flex;align-items:center;gap:16px;margin-bottom:22px;}
.sg-score-box{
  background:var(--surface);border:1.5px solid var(--border);border-radius:12px;
  padding:10px 16px;text-align:center;min-width:72px;
}
.sg-score-val{font-family:'Playfair Display',serif;font-size:26px;font-weight:700;}
.sg-score-val.green{color:var(--green);}
.sg-score-val.amber{color:var(--amber);}
.sg-score-val.red{color:var(--red);}
.sg-score-lbl{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--text2);}
.sg-prog-wrap{flex:1;background:var(--bg2);border-radius:6px;height:8px;overflow:hidden;}
.sg-prog{height:100%;background:linear-gradient(90deg,var(--green),var(--amber));border-radius:6px;transition:width .5s;}
/* Word prompt card */
.sg-prompt{
  background:var(--surface);border:1.5px solid var(--border);border-radius:20px;
  padding:28px 24px 22px;text-align:center;margin-bottom:20px;
  box-shadow:var(--shadow);
}
.sg-prompt-zh{font-size:36px;font-weight:900;color:var(--text);margin-bottom:6px;}
.sg-prompt-ph{font-family:'DM Mono',monospace;font-size:14px;color:var(--amber);margin-bottom:4px;}
.sg-prompt-ex{font-size:13px;color:var(--text2);font-style:italic;}
.sg-prompt-hint{
  margin-top:10px;font-size:12px;font-weight:700;color:var(--text2);
  display:flex;align-items:center;justify-content:center;gap:6px;
}
/* Letter slots */
.sg-slots{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-bottom:18px;}
.sg-slot{
  width:44px;height:52px;border-radius:10px;border:2px solid var(--border);
  background:var(--surface);display:flex;align-items:center;justify-content:center;
  font-family:'Playfair Display',serif;font-size:22px;font-weight:700;color:var(--text);
  transition:all .2s;cursor:pointer;
}
.sg-slot.filled{border-color:var(--green);background:var(--green-bg);color:var(--green);}
.sg-slot.correct{border-color:var(--green)!important;background:var(--green)!important;color:#fff!important;animation:slotPop .3s ease;}
.sg-slot.wrong{border-color:var(--red)!important;background:var(--red-bg)!important;color:var(--red)!important;animation:shake .4s ease;}
.sg-slot.active{border-color:var(--amber);box-shadow:0 0 0 3px var(--amber-bg);}
@keyframes slotPop{0%{transform:scale(.8)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
/* Letter tiles */
.sg-tiles{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:20px;}
.sg-tile{
  width:46px;height:52px;border-radius:10px;border:2px solid var(--border);
  background:var(--surface);display:flex;align-items:center;justify-content:center;
  font-family:'Playfair Display',serif;font-size:22px;font-weight:700;color:var(--text);
  cursor:pointer;transition:all .2s;box-shadow:0 2px 6px rgba(33,29,21,.08);
  user-select:none;
}
.sg-tile:hover:not(.used){border-color:var(--green);color:var(--green);background:var(--green-bg);transform:translateY(-3px);}
.sg-tile.used{opacity:.25;pointer-events:none;background:var(--bg2);}
/* Controls */
.sg-ctrl{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;}
.sg-btn{
  padding:10px 22px;border-radius:11px;font-family:'DM Sans',sans-serif;
  font-weight:800;font-size:13px;cursor:pointer;transition:all .2s;border:1.5px solid;
}
.sg-btn.primary{background:var(--green);border-color:var(--green);color:#fff;box-shadow:0 3px 14px rgba(26,92,53,.22);}
.sg-btn.primary:hover{background:var(--green-l);}
.sg-btn.secondary{background:var(--surface);border-color:var(--border);color:var(--text2);}
.sg-btn.secondary:hover{border-color:var(--green);color:var(--green);}
.sg-btn.danger{background:var(--red-bg);border-color:var(--red);color:var(--red);}
/* Feedback flash */
.sg-feedback{
  text-align:center;font-weight:800;font-size:18px;margin-bottom:14px;
  animation:feedPop .35s ease both;
}
@keyframes feedPop{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}
.sg-feedback.ok{color:var(--green);}
.sg-feedback.no{color:var(--red);}
/* Result */
.sg-result{max-width:400px;margin:0 auto;text-align:center;padding:32px 24px;}
.sg-result-icon{font-size:72px;margin-bottom:14px;animation:resultBob 1.2s ease-in-out infinite;}
@keyframes resultBob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-14px) rotate(4deg)}}
.sg-result-score{font-family:'Playfair Display',serif;font-size:60px;font-weight:900;color:var(--green);}
.sg-result-sub{font-size:15px;color:var(--text2);font-weight:700;margin-bottom:22px;}
.sg-result-table{background:var(--surface);border:1.5px solid var(--border);border-radius:16px;padding:16px;margin-bottom:22px;text-align:left;}
.sg-result-row{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--border);font-weight:700;font-size:14px;}
.sg-result-row:last-child{border:none;}
/* Keyboard hint */
.sg-kb-hint{font-size:11px;color:var(--text2);font-weight:600;text-align:center;margin-top:8px;}

/* ── Mobile bottom nav ── */
#mob-bottom-nav{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:300;
  background:var(--surface);border-top:1.5px solid var(--border);
  padding:8px 0 env(safe-area-inset-bottom,0);
  box-shadow:0 -4px 24px rgba(30,26,18,.10);
}
.mbn-inner{display:flex;align-items:stretch;justify-content:space-around;}
.mbn-btn{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  background:none;border:none;cursor:pointer;padding:6px 10px;border-radius:10px;
  transition:all .18s;color:var(--text2);font-size:10px;font-weight:700;letter-spacing:.04em;
  flex:1;
}
.mbn-btn .mbn-icon{font-size:22px;line-height:1;}
.mbn-btn.on{color:var(--green);}
.mbn-btn.on .mbn-icon{transform:scale(1.12);}

/* ── Responsive / Mobile ── */
@media(max-width:700px){
  #mob-toggle{display:flex;}
  #mob-bottom-nav{display:block;}
  #sidebar{transform:translateX(-100%);}
  #sidebar.open{transform:translateX(0);}
  #sidebar-overlay.open{display:block;}
  #main{margin-left:0;padding:16px 14px 80px;padding-top:56px;}
  .lesson-grid{grid-template-columns:1fr 1fr;gap:12px;}
  .lc-cover{height:72px;}
  .lc-cover-icon{font-size:28px;}
  .lc-cover-num{font-size:36px;}
  .lc-body{padding:12px 14px 14px;}
  .lc-title{font-size:15px;}
  .opts{grid-template-columns:1fr;}
  .quiz-modes{grid-template-columns:1fr;}
  .vocab-grid{grid-template-columns:1fr 1fr;}
  .sg-slot{width:36px;height:44px;font-size:18px;}
  .sg-tile{width:38px;height:44px;font-size:18px;}
  .content-tabs{flex-wrap:wrap;}
  .ctab{font-size:12px;padding:7px 10px;}
  .player-controls .ctrl-row-2{flex-direction:column;align-items:stretch;gap:8px;}
  #player-wrap{max-width:100%;}
  .lyric-panel{height:280px;}
  .p-btn{width:40px;height:40px;}
  .p-btn.play{width:54px;height:54px;}
  .ly-en{font-size:14px;}
  .ly-row.active .ly-en{font-size:15px;}
  .disp-bar{gap:5px;}
  .disp-btn{padding:5px 9px;font-size:10px;}
  .back-row{flex-direction:column;align-items:flex-start;gap:8px;}
}
@media(max-width:420px){
  .lesson-grid{grid-template-columns:1fr;}
  .vocab-grid{grid-template-columns:1fr 1fr;}
  .sg-prompt-zh{font-size:28px;}
  .ctrl-row{gap:7px;}
}