:root{
  --bg:#1C1A17; --surface:#252220; --surface-2:#2E2A26; --line:#3A352F;
  --text:#EDE6DA; --text-dim:#A69C8D; --amber:#E8A33D; --amber-soft:#3A2E1A;
  --sage:#7FA37A; --sage-dim:#3E4C3B; --rose:#C97B6B;
  --shadow: rgba(0,0,0,.4);
  --notepad-bg:#F4EEDD; --notepad-line:#E3D9BB; --notepad-text:#3A3428;
  --notepad-header:#8A7A4A; --notepad-placeholder:#B0A47F;
}
:root[data-theme="light"]{
  --bg:#FBF8F2; --surface:#FFFFFF; --surface-2:#F3EEE1; --line:#E4DCC8;
  --text:#2A251E; --text-dim:#7C7160; --amber:#B8720F; --amber-soft:#FBEACB;
  --sage:#4F7A4A; --sage-dim:#DCEBD8; --rose:#B5503D;
  --shadow: rgba(80,70,50,.15);
  --notepad-bg:#FFFDF6; --notepad-line:#EADFC0; --notepad-text:#3A3428;
  --notepad-header:#9C8A52; --notepad-placeholder:#C2B896;
}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{background:var(--bg);color:var(--text);font-family:'Inter',system-ui,sans-serif;transition:background .2s ease,color .2s ease;}

/* ---------- Shell layout ---------- */
.app-shell{display:flex;min-height:100vh;}

.topbar{
  display:none;
  align-items:center;justify-content:space-between;
  background:var(--surface);border-bottom:1px solid var(--line);
  padding:12px 16px;position:sticky;top:0;z-index:20;
}
.topbar-title{font-family:'Fraunces',serif;font-weight:600;font-size:16px;}
.hamburger{background:none;border:1px solid var(--line);color:var(--text);border-radius:8px;padding:7px 10px;font-size:16px;cursor:pointer;}

.sidebar{
  width:262px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--line);
  padding:22px 16px 40px;position:sticky;top:0;height:100vh;overflow-y:auto;
}
.brand{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
.brand-mark{width:30px;height:30px;border-radius:8px;background:var(--amber-soft);display:flex;align-items:center;justify-content:center;font-size:15px;}
.brand-name{font-family:'Fraunces',serif;font-weight:600;font-size:15px;}
.brand-sub{color:var(--text-dim);font-size:11.5px;margin:0 0 20px;}

.progress-mini{background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:11px 13px;margin-bottom:20px;}
.progress-mini-label{font-size:11px;color:var(--text-dim);margin-bottom:6px;display:flex;justify-content:space-between;}
.progress-mini-track{height:6px;background:var(--bg);border-radius:99px;overflow:hidden;}
.progress-mini-fill{height:100%;background:linear-gradient(90deg,var(--amber-soft),var(--amber));border-radius:99px;transition:width .4s ease;}

.nav-group{margin-bottom:6px;}
.nav-group-label{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-dim);padding:14px 8px 6px;display:flex;align-items:center;gap:6px;
}
.nav-soon{font-size:9.5px;background:var(--surface-2);border:1px solid var(--line);color:var(--text-dim);padding:1px 6px;border-radius:99px;text-transform:none;letter-spacing:0;}
.nav-item{
  display:flex;align-items:center;gap:9px;padding:8px 8px;border-radius:8px;
  color:var(--text-dim);text-decoration:none;font-size:13.5px;cursor:pointer;
}
.nav-item:hover{background:var(--surface-2);color:var(--text);}
.nav-item.active{background:var(--amber-soft);color:var(--amber);font-weight:600;}
.nav-check{
  width:16px;height:16px;border-radius:5px;border:1.5px solid var(--text-dim);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.nav-check.on{background:var(--sage);border-color:var(--sage);}
.nav-check svg{width:9px;height:9px;opacity:0;}
.nav-check.on svg{opacity:1;}
.nav-item.disabled{opacity:.45;cursor:default;pointer-events:none;}

.main-area{flex:1;display:flex;min-width:0;padding-right:340px;}
.content-col{flex:1;min-width:0;max-width:900px;margin:0 auto;padding:36px 44px 80px;}
.notes-col{
  width:300px;flex-shrink:0;padding:36px 24px 36px 0;
  position:fixed;top:0;right:0;height:100vh;overflow-y:auto;z-index:15;
}

@media (max-width:1300px){
  .main-area{padding-right:290px;}
  .notes-col{width:260px;}
}
@media (max-width:960px){
  .topbar{display:flex;}
  .sidebar{
    position:fixed;left:0;top:0;bottom:0;z-index:30;transform:translateX(-100%);
    transition:transform .25s ease;box-shadow:0 0 40px var(--shadow);
  }
  .sidebar.open{transform:translateX(0);}
  .sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:25;}
  .sidebar-overlay.open{display:block;}
  .main-area{flex-direction:column;padding-right:0;}
  .content-col{max-width:none;margin:0;padding:24px 18px 50px;}
  .notes-col{width:auto;position:static;height:auto;padding:0 18px 40px;}
}

/* ---------- Notepad ---------- */
.notepad{background:var(--notepad-bg);border-radius:16px;padding:20px 22px;box-shadow:0 10px 40px var(--shadow);border:1px solid var(--notepad-line);}
.notepad-header{font-family:'Fraunces',serif;font-weight:600;font-size:13px;color:var(--notepad-header);text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px;}
.notepad-area{width:100%;min-height:50vh;background:transparent;border:none;outline:none;resize:vertical;font-family:'Inter',sans-serif;font-size:14px;line-height:1.9;color:var(--notepad-text);}
.notepad-area::placeholder{color:var(--notepad-placeholder);}
.notepad-saved{font-size:11px;color:var(--notepad-header);margin-top:8px;text-align:right;min-height:14px;}

/* ---------- Lesson header ---------- */
.eyebrow{color:var(--amber);font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin:0 0 6px;}
h1{font-family:'Fraunces',serif;font-weight:600;font-size:28px;margin:0 0 8px;letter-spacing:-.01em;}
.lead{color:var(--text-dim);font-size:14.5px;margin:0 0 30px;max-width:640px;}

/* ---------- Sections ---------- */
section.block-section{margin-bottom:36px;}
.sec-head{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
.sec-num{width:28px;height:28px;border-radius:8px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;color:var(--amber);flex-shrink:0;}
.sec-title{font-family:'Fraunces',serif;font-size:18px;font-weight:600;margin:0;}
.sec-sub{color:var(--text-dim);font-size:13px;margin:0 0 16px 38px;}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px 22px;}
.card + .card{margin-top:12px;}

.intro-note{background:var(--amber-soft);border:1px solid #4A3A1E;border-radius:10px;padding:16px 18px;font-size:13.5px;color:#D9B77A;line-height:1.6;}

/* prose */
.prose{font-size:13.5px;color:var(--text-dim);line-height:1.7;margin:0 0 12px;}
.prose:last-child{margin-bottom:0;}
.prose b{color:var(--text);}
.mistake{color:var(--rose);}
.correct{color:var(--sage);}

/* rule list */
.rule-label{font-size:12.5px;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em;margin:0 0 8px;}
.ex-list{list-style:none;padding:0;margin:0 0 6px;display:flex;flex-direction:column;gap:8px;}
.ex-list li{font-size:13.5px;padding:10px 12px;background:var(--surface-2);border-radius:8px;border:1px solid var(--line);}
.vn{color:var(--text-dim);font-size:12px;display:block;margin-top:2px;}
.hl{color:var(--amber);font-weight:700;background:var(--amber-soft);padding:1px 5px;border-radius:4px;}

/* table */
.conj-table{width:100%;border-collapse:collapse;font-size:13.5px;margin-bottom:6px;}
.conj-table th{text-align:left;color:var(--text-dim);font-weight:600;font-size:12px;padding:6px 10px;border-bottom:1px solid var(--line);}
.conj-table td{padding:8px 10px;border-bottom:1px solid var(--line);}
.conj-table tr:last-child td{border-bottom:none;}

/* pronunciation rows */
.pron-row{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:13px;margin-bottom:8px;}
.pron-row:last-child{margin-bottom:0;}
.pron-ipa{font-family:'JetBrains Mono',monospace;color:var(--amber);font-weight:700;font-size:15px;}
.pron-ex{color:var(--text-dim);font-style:italic;font-size:12px;white-space:nowrap;}
.pron-desc b{color:var(--text);}

/* vocab cards */
.vocab-grid{display:flex;flex-direction:column;gap:10px;}
.vcard{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 18px;}
.vcard-top{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;flex-wrap:wrap;}
.vword-row{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;}
.vword{font-family:'Fraunces',serif;font-size:16.5px;font-weight:600;}
.vipa{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--amber);}
.toggle-btn{background:var(--surface-2);border:1px solid var(--line);color:var(--text-dim);font-size:12px;font-weight:600;padding:6px 12px;border-radius:99px;cursor:pointer;white-space:nowrap;transition:all .15s;}
.vcard.open .toggle-btn{background:var(--sage-dim);border-color:var(--sage);color:#C9D9C7;}
.vcard-body{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.vcard.open .vcard-body{max-height:220px;}
.vcard-body-inner{padding-top:12px;}
.vmeaning{font-size:14px;color:var(--amber);font-weight:600;margin-bottom:6px;}
.vexample{font-size:13px;color:var(--text-dim);font-style:italic;margin-bottom:10px;}
.vinput{width:100%;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;color:var(--text);font-family:'Inter',sans-serif;font-size:13.5px;padding:9px 12px;outline:none;}
.vinput:focus{border-color:var(--amber);}
.vinput-label{font-size:11.5px;color:var(--text-dim);margin-bottom:5px;text-transform:uppercase;letter-spacing:.04em;font-weight:600;}
.checkall{display:inline-flex;align-items:center;gap:7px;background:none;border:1px solid var(--line);color:var(--text-dim);font-size:12.5px;font-weight:600;padding:7px 13px;border-radius:8px;cursor:pointer;margin-bottom:14px;}
.checkall:hover{color:var(--amber);border-color:var(--amber-soft);}

/* sound grid (vowels) */
.sound-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;}
.scard{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 15px;cursor:pointer;transition:border-color .15s;}
.scard:hover{border-color:#4A443C;}
.scard.open{border-color:var(--sage-dim);background:linear-gradient(180deg,rgba(127,163,122,.07),rgba(127,163,122,.02));}
.symbol{font-family:'JetBrains Mono',monospace;font-size:20px;font-weight:600;color:var(--amber);margin-bottom:4px;}
.sword{font-size:13px;font-weight:600;margin-bottom:2px;}
.shint{font-size:11.5px;color:var(--text-dim);}
.stip{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.scard.open .stip{max-height:100px;}
.stip-inner{padding-top:9px;font-size:12px;color:#C9D9C7;line-height:1.5;border-top:1px dashed var(--line);margin-top:9px;}

/* warn grid (consonants) */
.warn-grid{display:flex;flex-direction:column;gap:10px;}
.wcard{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:15px 18px;}
.wcard-top{display:flex;align-items:center;gap:12px;cursor:pointer;}
.wsymbol{font-family:'JetBrains Mono',monospace;font-size:18px;font-weight:700;color:var(--amber);background:var(--amber-soft);width:42px;height:42px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.wtitle{font-size:14px;font-weight:600;}
.wsub{font-size:12px;color:var(--text-dim);margin-top:2px;}
.wcard .toggle-btn{margin-left:auto;flex-shrink:0;}
.wbody{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.wcard.open .wbody{max-height:200px;}
.wbody-inner{padding-top:12px;font-size:13px;color:var(--text-dim);line-height:1.6;}
.wbody-inner b{color:var(--text);}

/* minimal pairs */
.pair-row{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);}
.pair-row:last-child{border-bottom:none;}
.pair-words{display:flex;gap:8px;align-items:center;font-family:'JetBrains Mono',monospace;font-size:13.5px;flex-shrink:0;width:170px;}
.pair-words span:first-child{color:var(--amber);font-weight:700;}
.pair-vs{color:var(--text-dim);font-size:11px;}
.pair-input{flex:1;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;color:var(--text);font-family:'Inter',sans-serif;font-size:13px;padding:8px 12px;outline:none;}
.pair-input:focus{border-color:var(--amber);}

/* pattern list */
.pattern{background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:12px 14px;margin-bottom:10px;font-family:'JetBrains Mono',monospace;font-size:13px;}
.pattern:last-child{margin-bottom:0;}
.pattern b{color:var(--amber);}
.pattern .vn{font-family:'Inter',sans-serif;}

/* source row + steps */
.source-row{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;margin-bottom:14px;}
.source-icon{width:38px;height:38px;border-radius:9px;background:var(--amber-soft);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.source-name{font-weight:700;font-size:14px;}
.source-hint{font-size:12px;color:var(--text-dim);margin-top:2px;}
.steps{list-style:none;padding:0;margin:0;counter-reset:step;}
.steps li{counter-increment:step;position:relative;padding:10px 0 10px 34px;border-bottom:1px solid var(--line);font-size:13.5px;}
.steps li:last-child{border-bottom:none;}
.steps li::before{content:counter(step);position:absolute;left:0;top:9px;width:22px;height:22px;border-radius:6px;background:var(--surface-2);border:1px solid var(--line);color:var(--amber);font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.step-sub{color:var(--text-dim);font-size:12px;margin-top:3px;}

/* exercise / textarea / checklist */
.ex-item{margin-bottom:14px;}
.ex-item:last-child{margin-bottom:0;}
.ex-prompt{font-size:14px;margin-bottom:7px;display:flex;gap:8px;}
.ex-idx{color:var(--amber);font-weight:700;font-family:'JetBrains Mono',monospace;font-size:13px;flex-shrink:0;}
.ex-input,.ex-textarea{width:100%;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;color:var(--text);font-family:'Inter',sans-serif;font-size:14px;padding:10px 13px;outline:none;}
.ex-textarea{min-height:80px;resize:vertical;line-height:1.6;}
.ex-input:focus,.ex-textarea:focus{border-color:var(--amber);}
.word-count{font-size:12px;color:var(--text-dim);text-align:right;margin-top:6px;}

.check-row{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--line);cursor:pointer;}
.check-row:last-child{border-bottom:none;}
.check-box{width:19px;height:19px;border-radius:5px;border:1.5px solid var(--text-dim);flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.check-box.on{background:var(--sage);border-color:var(--sage);}
.check-box svg{width:11px;height:11px;opacity:0;}
.check-box.on svg{opacity:1;}
.check-label{font-size:14px;}

/* dynamic vocab (buổi nghe) */
.vocab-form{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;margin-bottom:14px;}
.vocab-form input{background:var(--surface-2);border:1px solid var(--line);border-radius:8px;color:var(--text);font-family:'Inter',sans-serif;font-size:13.5px;padding:10px 12px;outline:none;}
.vocab-form input:focus{border-color:var(--amber);}
.add-btn{background:var(--amber);color:#1C1A17;border:none;border-radius:8px;font-weight:700;font-size:13px;padding:10px 16px;cursor:pointer;white-space:nowrap;}
.add-btn:hover{opacity:.88;}
.dyn-vocab-list{display:flex;flex-direction:column;gap:8px;}
.dyn-vocab-item{display:flex;justify-content:space-between;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:11px 14px;}
.vw{font-weight:700;color:var(--amber);}
.vm{font-size:13px;color:var(--text-dim);margin-left:10px;}
.del-btn{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:15px;}
.del-btn:hover{color:var(--rose);}
.empty-note{color:var(--text-dim);font-size:13px;text-align:center;padding:16px 0;}

/* recap */
.recap-item{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);}
.recap-item:last-child{border-bottom:none;}
.recap-tag{flex-shrink:0;font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700;color:var(--amber);background:var(--amber-soft);padding:4px 9px;border-radius:6px;height:fit-content;white-space:nowrap;}
.recap-text{font-size:13.5px;}
.pron-mini{display:flex;gap:14px;flex-wrap:wrap;font-family:'JetBrains Mono',monospace;font-size:12.5px;margin-top:8px;}
.pron-mini span{background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:4px 9px;}
.pron-mini b{color:var(--amber);}

/* stress examples */
.stress-row{display:flex;gap:20px;flex-wrap:wrap;font-family:'JetBrains Mono',monospace;font-size:14px;}
.stress-word b{color:var(--amber);font-weight:700;}
.stress-note{color:var(--text-dim);font-family:'Inter',sans-serif;font-size:12px;margin-left:4px;}

/* completion button */
.complete-row{margin-top:44px;display:flex;justify-content:center;}
.complete-btn{
  background:var(--surface);border:1.5px solid var(--sage-dim);color:var(--sage);
  font-weight:700;font-size:13.5px;padding:12px 22px;border-radius:10px;cursor:pointer;
  display:flex;align-items:center;gap:8px;
}
.complete-btn.done{background:var(--sage-dim);color:#C9D9C7;}
.complete-btn:hover{filter:brightness(1.1);}

.crumbs{margin-top:44px;display:flex;justify-content:space-between;gap:12px;}
.crumb-link{color:var(--text-dim);text-decoration:none;font-size:13px;border:1px solid var(--line);padding:9px 14px;border-radius:9px;}
.crumb-link:hover{color:var(--amber);border-color:var(--amber-soft);}

.empty-lesson{color:var(--text-dim);font-size:14px;padding:60px 0;text-align:center;}

/* ---------- Theme toggle ---------- */
.theme-toggle{
  display:flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--line);
  color:var(--text-dim);font-size:12px;font-weight:600;padding:7px 12px;border-radius:99px;cursor:pointer;
  margin-bottom:16px;width:100%;justify-content:center;
}
.theme-toggle:hover{color:var(--amber);border-color:var(--amber-soft);}

/* ---------- Course tabs ---------- */
.course-tabs{display:flex;gap:6px;margin-bottom:16px;}
.course-tab{
  flex:1;background:var(--surface-2);border:1px solid var(--line);color:var(--text-dim);
  font-size:12.5px;font-weight:600;padding:9px 8px;border-radius:9px;cursor:pointer;text-align:center;
}
.course-tab:hover{color:var(--text);}
.course-tab.active{background:var(--amber-soft);border-color:var(--amber);color:var(--amber);}

/* ---------- YouTube embed ---------- */
.yt-wrap{position:relative;width:100%;padding-top:56.25%;border-radius:12px;overflow:hidden;background:var(--surface-2);border:1px solid var(--line);margin-bottom:14px;}
.yt-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.yt-caption{font-size:12px;color:var(--text-dim);margin:-6px 0 14px;}

/* ---------- Translate exercise ---------- */
.tr-item{margin-bottom:16px;}
.tr-item:last-child{margin-bottom:0;}
.tr-vi{font-size:14px;margin-bottom:6px;display:flex;gap:8px;}
.tr-hint{font-size:12px;color:var(--text-dim);margin:0 0 7px 21px;}
.tr-hint b{color:var(--amber);font-weight:600;}
.tr-input{width:100%;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;color:var(--text);font-family:'Inter',sans-serif;font-size:14px;padding:10px 13px;outline:none;}
.tr-input:focus{border-color:var(--amber);}

/* ---------- Lesson actions (export) ---------- */
.lesson-actions{display:flex;gap:8px;margin:-14px 0 26px;flex-wrap:wrap;}
.action-btn{
  display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--line);
  color:var(--text-dim);font-size:12.5px;font-weight:600;padding:8px 14px;border-radius:8px;cursor:pointer;
}
.action-btn:hover{color:var(--amber);border-color:var(--amber-soft);}
.action-btn:disabled{opacity:.5;cursor:wait;}

/* ---------- Guide page ---------- */
.guide-step{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);}
.guide-step:last-child{border-bottom:none;}
.guide-num{flex-shrink:0;width:30px;height:30px;border-radius:9px;background:var(--amber-soft);color:var(--amber);font-family:'JetBrains Mono',monospace;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;}
.guide-title{font-weight:700;font-size:14.5px;margin-bottom:3px;}
.guide-text{font-size:13.5px;color:var(--text-dim);line-height:1.6;}