:root{
  --bg:#0b0f14; --panel:#121820; --panel2:#18212b; --border:#243041;
  --text:#e8eef6; --muted:#8b9bb0; --accent:#22d3ee; --accent2:#38bdf8;
  --ok:#34d399; --warn:#f59e0b; --bad:#f87171;
  --w:380px; --h:560px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:"Segoe UI",Tahoma,sans-serif;background:
  radial-gradient(1200px 600px at 10% 0%,#122033 0%,transparent 55%),
  radial-gradient(900px 500px at 90% 100%,#0c2a2a 0%,transparent 50%),
  var(--bg);color:var(--text);overflow:hidden}
.backdrop{position:fixed;inset:0;pointer-events:none;opacity:0;transition:.2s;background:rgba(0,0,0,.45);z-index:40}
.backdrop.on{opacity:1;pointer-events:auto}
.widget{
  position:fixed;z-index:50;display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--border);border-radius:18px;
  box-shadow:0 18px 50px rgba(0,0,0,.45);overflow:hidden;
  width:var(--w);height:var(--h);max-width:96vw;max-height:96vh;
}
.widget.compact{left:24px;bottom:24px;right:auto;top:auto}
.widget.fullscreen{
  left:2vw !important;top:2vh !important;right:auto;bottom:auto;
  width:96vw !important;height:96vh !important;border-radius:14px;
}
.chrome{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,#15202b,#121820);cursor:grab;user-select:none}
.chrome:active{cursor:grabbing}
.chrome-title strong{font-size:15px}
.chrome-title span{color:var(--accent)}
.chrome-title small{display:block;color:var(--muted);font-size:11px;margin-top:2px}
.chrome-actions{display:flex;gap:6px;flex-wrap:wrap}
.iconbtn{border:1px solid var(--border);background:var(--panel2);color:var(--text);border-radius:10px;padding:6px 10px;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.iconbtn:hover{border-color:#334155}
.body{flex:1;min-height:0;overflow:auto;padding:14px 14px 18px}
.screen.hidden,.hidden{display:none !important}
h1{margin:0 0 8px;font-size:20px} h2{margin:8px 0;font-size:16px;color:var(--accent2)}
.muted{color:var(--muted);line-height:1.7;font-size:13px}
.err{color:#fecaca;background:#2a0f0f;border:1px solid #7f1d1d;padding:8px 10px;border-radius:10px;font-size:13px}
.ok{color:#a7f3d0;background:#052e1f;border:1px solid #065f46;padding:8px 10px;border-radius:10px;font-size:13px}
.book-grid{display:grid;gap:10px;margin-top:12px}
.book{
  text-align:right;padding:14px;border-radius:14px;border:1px solid var(--border);
  background:var(--panel2);cursor:pointer;font:inherit;color:var(--text)
}
.book:hover{border-color:#22d3ee55}
.book b{display:block;font-size:15px;margin-bottom:4px}
.book .en{direction:ltr;text-align:left;color:var(--muted);font-size:12px}
.file-group{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.file-head{font-size:12px;color:var(--accent);margin:8px 0 2px;font-weight:800}
.lesson{
  display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;
  padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:#0c141c;
  cursor:pointer;font:inherit;color:var(--text);text-align:right;width:100%
}
.lesson:hover{border-color:#38bdf855}
.badge{min-width:42px;text-align:center;padding:6px 8px;border-radius:10px;background:#0c1a22;border:1px solid #155e75;color:#7dd3fc;font-weight:800;direction:ltr}
.lesson .tfa{font-weight:700;font-size:13px}
.lesson .ten{direction:ltr;text-align:left;color:var(--muted);font-size:11px;margin-top:2px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.row.between{justify-content:space-between}
.row.end{justify-content:flex-end}
.sticky-nav{position:sticky;bottom:0;padding-top:10px;background:linear-gradient(180deg,transparent,var(--panel) 40%);margin-top:8px}
button{border:none;border-radius:12px;padding:10px 14px;font:inherit;font-weight:700;cursor:pointer;background:linear-gradient(180deg,#22d3ee,#0891b2);color:#042f2e}
button.secondary{background:var(--panel2);color:var(--text);border:1px solid var(--border);font-weight:600}
button:disabled{opacity:.45;cursor:not-allowed}
.steps{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.step{padding:3px 7px;border-radius:999px;border:1px solid var(--border);font-size:10px;color:var(--muted);background:var(--panel2)}
.step.on{color:#042f2e;background:linear-gradient(180deg,#5eead4,#2dd4bf);border-color:transparent;font-weight:700}
.step.done{color:var(--ok);border-color:#065f46}
.meta{font-size:12px;color:var(--muted);margin:8px 0}
.card{background:var(--panel2);border:1px solid var(--border);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:10px}
.formula{font-size:16px;font-weight:800;padding:12px;border-radius:12px;background:#0c1a22;border:1px dashed #155e75;text-align:center;white-space:pre-wrap;direction:ltr;line-height:1.5}
.ex{padding:8px 10px;border-radius:10px;background:#0a1017;border:1px solid var(--border);line-height:1.65}
.ex b{color:var(--accent)}
.vitem{padding:10px;border-radius:10px;background:#0a1017;border:1px solid var(--border)}
.vitem .en{font-weight:700;direction:ltr;text-align:left}
.vitem .fa{color:var(--muted);font-size:12px}
.pq{padding:10px;border-radius:12px;border:1px solid var(--border);background:#0a1017}
.pq .prompt{direction:ltr;text-align:left;color:#7dd3fc;margin:6px 0}
.opts{display:flex;flex-wrap:wrap;gap:6px}
.opts button{background:var(--bg);color:var(--text);border:1px solid var(--border)}
.opts button.good{border-color:#059669;background:#052e1f;color:#a7f3d0}
.opts button.bad{border-color:#b91c1c;background:#2a0f0f;color:#fecaca}
.pq .exp{font-size:12px;color:var(--ok);margin-top:6px;display:none}
.pq.done .exp{display:block}
textarea,input,select{
  width:100%;margin-top:4px;border-radius:10px;border:1px solid var(--border);
  background:#0a1017;color:var(--text);padding:9px 10px;font:inherit
}
textarea{min-height:70px;resize:vertical}
.enroll label{display:block;margin:10px 0;font-size:13px}
.req{color:var(--bad)}
.course-suggest{display:grid;gap:8px;margin:10px 0}
.course{padding:10px;border-radius:12px;border:1px solid var(--border);background:#0c1a22;cursor:pointer}
.course.on{border-color:#22d3ee;box-shadow:0 0 0 1px #22d3ee55 inset}
.scorebar{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.scorechip{font-size:11px;padding:3px 8px;border-radius:999px;background:#0c1a22;border:1px solid #155e75;color:#7dd3fc}
.messages{max-height:220px;overflow:auto;display:flex;flex-direction:column;gap:8px;padding:8px;border:1px solid var(--border);border-radius:12px;background:#0a1017}
.bubble{max-width:95%;padding:8px 10px;border-radius:12px;line-height:1.65;white-space:pre-wrap;border:1px solid var(--border);font-size:13px}
.bubble.bot{align-self:flex-end;background:#15202b}
.bubble.user{align-self:flex-start;background:#1e3a5f}
.composer{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:8px}
.voicehint{font-size:12px;color:var(--muted)}
.booklet .bitem{padding:10px;border-radius:12px;border:1px solid var(--border);background:#0a1017;margin-bottom:8px;line-height:1.7;font-size:13px}
.resize-handle{position:absolute;width:16px;height:16px;left:4px;bottom:4px;cursor:nwse-resize;opacity:.55;background:
  linear-gradient(135deg,transparent 40%,#64748b 40%,#64748b 50%,transparent 50%,transparent 60%,#64748b 60%,#64748b 70%,transparent 70%)}
.widget.fullscreen .resize-handle{display:none}
.passage{direction:ltr;text-align:left;line-height:1.7;padding:10px;border-radius:10px;background:#0a1017;border:1px solid var(--border)}
.objectives{padding:8px 10px;border-radius:10px;background:#0c1a22;border:1px solid var(--border);line-height:1.7;font-size:13px}

.speak-composer{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.speak-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.rec-btn{background:linear-gradient(180deg,#334155,#1e293b);color:#e2e8f0;border:1px solid #475569}
.rec-btn.on,.rec-btn:disabled{background:linear-gradient(180deg,#ef4444,#b91c1c);color:#fff;border-color:#7f1d1d;animation:recpulse 1.1s ease-in-out infinite}
.rec-status{color:#fca5a5;font-size:12px;font-weight:700}
.rec-playback{width:100%;max-width:260px;height:32px}
.hint-fa{padding:10px 12px;border-radius:10px;background:#0c1a22;border:1px dashed #155e75;color:#a5f3fc;font-size:13px;line-height:1.75;margin-top:8px}
.teacher-intro{border-color:#155e75;background:#0a1620}
.bubble.bot.intro{border-color:#0e7490}
@keyframes recpulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.45)}50%{box-shadow:0 0 0 6px rgba(239,68,68,0)}}

.hint-fa .hint-line{margin-top:6px;line-height:1.7;color:#c7d2fe}
.hint-fa b{color:#a5f3fc}

.speak-pic{display:block;width:100%;max-height:min(72vh,620px);height:auto;object-fit:contain;object-position:center top;border-radius:12px;border:1px solid var(--border);background:#0b1220}
.pic-bubble{max-width:92%;padding:8px}
.enroll-pitch{color:#a5f3fc;font-size:14px;line-height:1.85;background:#0c1a22;border:1px solid #155e75;border-radius:12px;padding:10px 12px}