:root {
  --blue: #2563EB;
  --blue-dark: #1D4ED8;
  --green: #16A34A;
  --yellow: #F59E0B;
  --red: #EF4444;
  --sky: #0284C7;
  --bg: #F8FAFC;
  --white: #FFFFFF;
  --text: #1E293B;
  --muted: #64748B;
  --line: #E2E8F0;
  --green-soft: #F0FDF4;
  --blue-soft: #EFF6FF;
  --yellow-soft: #FFFBEB;
  --radius: 18px;
  --reading-size: 1.52rem;
  --hl-bg: #FEF08A;
  --hl-text: #991B1B;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Nunito', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text);
  background: linear-gradient(180deg, #EFF6FF 0, var(--bg) 280px);
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }

.app-shell { min-height: 100vh; }
.topbar {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  max-width: 1180px; margin: 0 auto; padding: 12px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.brand {
  display: flex; align-items: center; gap: 10px; border: 0; background: transparent; padding: 0;
}
.brand-badge {
  width: 42px; height: 42px; border-radius: 14px;
  display: grid; place-items: center; background: linear-gradient(135deg, var(--blue), #60A5FA);
  color: #fff; font-weight: 900; font-size: 1.25rem; box-shadow: 0 8px 20px rgba(37,99,235,.22);
}
.brand-text { text-align: left; }
.brand-title { font-size: 1.1rem; font-weight: 900; letter-spacing: .4px; }
.brand-subtitle { font-size: .76rem; color: var(--muted); font-weight: 700; }
.nav { display:flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.nav button {
  border: 1px solid transparent; background: transparent; color: var(--muted); font-weight: 800;
  padding: 9px 12px; border-radius: 12px;
}
.nav button.active, .nav button:hover { background: var(--blue-soft); color: var(--blue); }

.page { max-width: 1180px; margin: 0 auto; padding: 28px 18px 60px; }
.hero {
  display: grid; grid-template-columns: 1.3fr .7fr; gap: 22px; align-items: stretch; margin-bottom: 24px;
}
.hero-main {
  background: linear-gradient(135deg, #DBEAFE, #FFFFFF 60%);
  border: 1px solid #BFDBFE; border-radius: 28px; padding: 30px;
  box-shadow: 0 18px 42px rgba(30,64,175,.08);
}
.eyebrow { display:inline-flex; align-items:center; gap:8px; padding: 7px 12px; border-radius: 999px; background:#fff; border:1px solid #BFDBFE; color:var(--blue); font-weight:900; font-size:.82rem; }
h1 { margin: 16px 0 10px; font-size: clamp(2rem, 4.6vw, 3.7rem); line-height: 1.03; letter-spacing: -1.6px; }
.hero-main p { margin: 0; max-width: 650px; font-size: 1.08rem; color: #475569; line-height: 1.7; font-weight: 700; }
.hero-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top: 20px; }
.primary, .secondary, .danger, .success {
  border: 0; border-radius: 13px; padding: 11px 15px; font-weight: 900; display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
.primary { background: var(--blue); color:white; box-shadow: 0 10px 20px rgba(37,99,235,.2); }
.primary:hover { background: var(--blue-dark); }
.secondary { background: #fff; color: var(--text); border:1px solid var(--line); }
.secondary:hover { background:#F8FAFC; }
.success { background: var(--green); color:#fff; }
.danger { background: var(--red); color:#fff; }

.hero-side {
  border-radius: 28px; background: linear-gradient(180deg, #ECFDF5, #FFFFFF); border: 1px solid #BBF7D0;
  padding: 22px; display:grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.feature-tile { background:#fff; border:1px solid var(--line); border-radius:16px; padding:16px; }
.feature-icon { font-size:1.55rem; }
.feature-tile strong { display:block; margin-top:8px; font-size:.98rem; }
.feature-tile span { display:block; color:var(--muted); font-size:.78rem; font-weight:700; margin-top:4px; line-height:1.35; }

.section-head { display:flex; justify-content:space-between; align-items:end; gap:12px; margin: 20px 0 12px; }
.section-head h2 { margin:0; font-size:1.45rem; }
.section-head p { margin:0; color:var(--muted); font-size:.9rem; font-weight:700; }

.class-grid { display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap:14px; }
.class-card {
  position:relative; overflow:hidden; min-height: 190px; background:#fff; border:1px solid var(--line); border-radius:20px; padding:18px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.class-card:hover { transform: translateY(-3px); border-color:#BFDBFE; box-shadow:0 12px 28px rgba(15,23,42,.08); }
.class-number { font-size:2.2rem; font-weight:900; color:var(--blue); }
.class-card h3 { margin:4px 0 6px; }
.class-card p { margin:0; color:var(--muted); font-size:.83rem; line-height:1.45; font-weight:700; }
.card-footer { margin-top:14px; display:flex; justify-content:space-between; align-items:center; gap:8px; }
.unit-pill { display:inline-flex; padding:5px 9px; border-radius:999px; background:#F1F5F9; color:#475569; font-size:.73rem; font-weight:900; }
.arrow { color:var(--blue); font-weight:900; }

.lesson-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.breadcrumb { display:flex; gap:7px; flex-wrap:wrap; color:var(--muted); font-size:.88rem; font-weight:800; }
.breadcrumb .current { color:var(--text); }
.class-header { background:#fff; border:1px solid var(--line); border-radius:22px; padding:22px; margin-bottom:16px; }
.class-header h2 { margin:0 0 4px; font-size:1.7rem; }
.class-header p { margin:0; color:var(--muted); font-weight:700; }
.lesson-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px; }
.lesson-card { background:#fff; border:1px solid var(--line); border-radius:18px; padding:18px; }
.lesson-card.available { border-color:#BFDBFE; box-shadow:0 10px 26px rgba(37,99,235,.07); }
.lesson-label { color:var(--blue); font-size:.76rem; font-weight:900; text-transform:uppercase; letter-spacing:.5px; }
.lesson-card h3 { margin:7px 0 6px; font-size:1.14rem; }
.lesson-card p { margin:0; color:var(--muted); font-size:.83rem; line-height:1.45; font-weight:700; }
.lesson-card .meta { margin-top:12px; display:flex; gap:7px; flex-wrap:wrap; }
.lesson-empty { grid-column:1/-1; padding:28px; background:#fff; border:1px dashed #CBD5E1; border-radius:18px; text-align:center; }
.lesson-empty strong { display:block; font-size:1.05rem; }
.lesson-empty span { display:block; margin-top:6px; color:var(--muted); font-size:.85rem; font-weight:700; }

.lesson-layout { display:grid; grid-template-columns: 225px minmax(0,1fr); gap:16px; align-items:start; }
.lesson-nav { position:sticky; top:82px; background:#fff; border:1px solid var(--line); border-radius:18px; padding:10px; }
.lesson-nav button { width:100%; text-align:left; border:0; background:transparent; padding:11px 12px; border-radius:12px; font-weight:900; color:var(--muted); }
.lesson-nav button.active, .lesson-nav button:hover { background:var(--blue-soft); color:var(--blue); }
.lesson-main { min-width:0; }
.lesson-hero { background:linear-gradient(135deg,#ECFDF5,#fff 65%); border:1px solid #BBF7D0; border-radius:22px; padding:22px; margin-bottom:14px; }
.lesson-hero-row { display:flex; gap:14px; align-items:center; justify-content:space-between; }
.lesson-hero h2 { margin:6px 0 3px; font-size:2rem; }
.lesson-hero p { margin:0; color:var(--muted); font-weight:800; }
.tag { display:inline-flex; padding:6px 9px; border-radius:999px; font-size:.76rem; font-weight:900; background:#fff; border:1px solid var(--line); }
.tag.green { background:#DCFCE7; color:#166534; border-color:#BBF7D0; }
.tag.yellow { background:#FEF3C7; color:#92400E; border-color:#FDE68A; }

.card { background:#fff; border:1px solid var(--line); border-radius:18px; padding:18px; margin-bottom:14px; }
.card h3 { margin:0 0 10px; font-size:1.15rem; }
.warmup { background:var(--green-soft); border-color:#BBF7D0; }
.warmup ul, .teacher-notes ul { margin:0; padding-left:20px; }
.warmup li, .teacher-notes li { margin:8px 0; line-height:1.55; font-weight:700; }

.reading-controls { background:var(--blue-soft); border-color:#BFDBFE; }
.control-grid { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:10px; }
.control { display:flex; flex-direction:column; gap:5px; }
.control label { font-size:.72rem; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); font-weight:900; }
.control select, .control input { width:100%; border:1px solid #CBD5E1; border-radius:11px; padding:9px 10px; background:#fff; }
.color-row { display:flex; gap:7px; }
.color-row input[type=color] { height:39px; padding:3px; }
.button-row { margin-top:12px; display:flex; flex-wrap:wrap; gap:7px; }
.reading-modes { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:10px; }
.mode-btn { border:1px solid #CBD5E1; background:#fff; color:var(--muted); padding:9px 12px; border-radius:11px; font-weight:900; }
.mode-btn.active { background:var(--blue); color:#fff; border-color:var(--blue); }
.progress-wrap { margin-top:12px; }
.progress-info { display:flex; justify-content:space-between; color:var(--muted); font-size:.78rem; font-weight:900; margin-bottom:5px; }
.progress-track { height:10px; border-radius:999px; background:#E2E8F0; overflow:hidden; }
.progress-fill { width:0; height:100%; background:linear-gradient(90deg,#10B981,#2563EB); transition:width .15s ease; }

.reading-board { overflow:visible; padding:0; }
.reading-strip { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:10px 15px; background:#F8FAFC; border-bottom:1px solid var(--line); font-size:.78rem; font-weight:900; color:var(--muted); }
.illustration { min-height:180px; display:grid; place-items:center; background:linear-gradient(180deg,#E0F2FE,#ECFDF5); border-bottom:1px solid var(--line); }
.illustration svg { width:min(720px, 100%); height:210px; }
.reading-body { padding:22px; font-size:var(--reading-size); line-height:2.0; letter-spacing:.15px; }
.reading-body .title { text-align:center; color:#166534; font-size:calc(var(--reading-size) * 1.28); line-height:1.2; font-weight:900; margin-bottom:16px; }
.reading-body p { margin:0 0 14px; text-indent:1.5rem; }
.reading-body .dialogue { margin:0 0 13px; padding:9px 14px; border-left:4px solid #34D399; background:#F0FDF4; border-radius:0 12px 12px 0; }
.reading-body .source { color:var(--muted); font-size:.82em; font-style:italic; text-align:right; margin-top:18px; }
.word { display:inline-block; padding:0 3px; margin-right:1px; border-radius:7px; cursor:pointer; transition:.12s; }
.word:hover { background:#DCFCE7; outline:1px dotted #15803D; }
.word.active-word { background:var(--hl-bg) !important; color:var(--hl-text) !important; font-weight:900; transform:scale(1.15); box-shadow:0 4px 10px rgba(15,23,42,.15); }

.word-popup { position:fixed; z-index:500; width:min(330px, calc(100vw - 20px)); display:none; background:#fff; border:2px solid #16A34A; border-radius:16px; padding:15px; box-shadow:0 18px 38px rgba(15,23,42,.22); }
.popup-head { display:flex; justify-content:space-between; gap:10px; align-items:center; border-bottom:1px solid #DCFCE7; padding-bottom:8px; }
.popup-word { font-size:1.28rem; font-weight:900; color:#166534; }
.popup-actions { display:flex; gap:5px; }
.icon-btn { border:1px solid #BBF7D0; background:#F0FDF4; width:32px; height:32px; border-radius:50%; font-weight:900; }
.popup-row { margin-top:9px; }
.popup-label { display:block; font-size:.67rem; color:var(--muted); font-weight:900; text-transform:uppercase; letter-spacing:.5px; }
.popup-value { margin-top:2px; font-weight:800; }
.popup-telugu { font-size:1.08rem; color:#B91C1C; }

.vocab-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.vocab-card { border:1px solid var(--line); border-radius:14px; padding:13px; background:#fff; }
.vocab-word { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.vocab-word strong { font-size:1.05rem; }
.vocab-meta { color:var(--muted); font-size:.72rem; font-weight:800; margin-top:4px; }
.vocab-meaning { margin-top:8px; font-size:.93rem; color:#B91C1C; font-weight:900; }
.vocab-def { margin-top:5px; font-size:.8rem; line-height:1.45; color:#475569; font-weight:700; }

.practice-grid { display:grid; gap:10px; }
.question { border:1px solid var(--line); border-radius:15px; padding:14px; }
.question-title { font-weight:900; margin-bottom:9px; }
.options { display:grid; gap:7px; }
.option { border:1px solid #CBD5E1; background:#fff; border-radius:11px; padding:9px 11px; text-align:left; font-weight:800; color:#475569; }
.option.selected { border-color:#93C5FD; background:#EFF6FF; color:#1D4ED8; }
.question-result { margin-top:7px; font-size:.78rem; font-weight:900; }
.practice-score { margin-top:10px; padding:12px; border-radius:13px; background:#F8FAFC; font-weight:900; }

.completion { text-align:center; padding:30px 20px; background:linear-gradient(180deg,#ECFDF5,#fff); border-color:#BBF7D0; }
.celebrate { font-size:3rem; }
.completion h3 { font-size:1.7rem; margin:8px 0 4px; }
.completion p { margin:0; color:var(--muted); font-weight:700; }
.completion-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin:18px 0; }
.stat { background:#fff; border:1px solid var(--line); border-radius:14px; padding:12px; }
.stat strong { display:block; font-size:1.4rem; color:var(--blue); }
.stat span { display:block; font-size:.72rem; color:var(--muted); font-weight:900; margin-top:2px; }

.progress-page-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.big-progress { background:#fff; border:1px solid var(--line); border-radius:20px; padding:20px; }
.big-number { font-size:2.6rem; font-weight:900; color:var(--blue); }
.source-list { display:grid; gap:9px; }
.source-item { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 12px; background:#F8FAFC; border:1px solid var(--line); border-radius:12px; }
.source-item strong { font-size:.84rem; }
.source-item span { font-size:.72rem; font-weight:900; color:var(--green); }

.admin-grid { display:grid; grid-template-columns:260px 1fr; gap:14px; }
.admin-nav { background:#fff; border:1px solid var(--line); border-radius:18px; padding:10px; }
.admin-nav button { width:100%; text-align:left; padding:10px 12px; border:0; background:transparent; border-radius:11px; font-weight:900; color:var(--muted); }
.admin-nav button.active { background:#EFF6FF; color:var(--blue); }
.admin-panel { background:#fff; border:1px solid var(--line); border-radius:18px; padding:20px; }
.admin-panel h2 { margin-top:0; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.field { display:flex; flex-direction:column; gap:4px; }
.field.full { grid-column:1/-1; }
.field label { font-size:.72rem; color:var(--muted); font-weight:900; text-transform:uppercase; }
.field input, .field textarea, .field select { border:1px solid #CBD5E1; border-radius:11px; padding:10px 11px; background:#fff; }
.field textarea { min-height:110px; resize:vertical; }
.admin-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.notice { padding:12px; border-radius:12px; background:#FFF7ED; border:1px solid #FED7AA; color:#9A3412; font-weight:800; font-size:.84rem; line-height:1.5; }

.footer { max-width:1180px; margin:0 auto; padding:0 18px 30px; color:var(--muted); font-size:.75rem; font-weight:700; }
.footer strong { color:var(--text); }

.toast { position:fixed; left:50%; bottom:18px; transform:translateX(-50%) translateY(120px); background:#0F172A; color:#fff; padding:10px 14px; border-radius:999px; font-weight:900; font-size:.8rem; z-index:900; transition:.22s; box-shadow:0 14px 30px rgba(15,23,42,.25); }
.toast.show { transform:translateX(-50%) translateY(0); }

@media (max-width: 980px) {
  .class-grid { grid-template-columns:repeat(3,1fr); }
  .hero { grid-template-columns:1fr; }
  .lesson-grid { grid-template-columns:repeat(2,1fr); }
  .vocab-grid { grid-template-columns:repeat(2,1fr); }
  .control-grid { grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 760px) {
  .topbar-inner { align-items:flex-start; }
  .nav { max-width: 52%; }
  .page { padding:20px 12px 42px; }
  .class-grid { grid-template-columns:repeat(2,1fr); }
  .lesson-layout, .admin-grid { grid-template-columns:1fr; }
  .lesson-nav { position:static; display:flex; overflow:auto; gap:5px; }
  .lesson-nav button { width:auto; min-width:max-content; }
  .progress-page-grid { grid-template-columns:1fr; }
  .completion-stats { grid-template-columns:1fr; }
  .form-grid { grid-template-columns:1fr; }
  .field.full { grid-column:auto; }
}

@media (max-width: 520px) {
  .brand-subtitle { display:none; }
  .nav button { padding:8px 9px; font-size:.78rem; }
  .hero-main { padding:22px; border-radius:20px; }
  .hero-side { padding:14px; border-radius:20px; }
  .class-grid { grid-template-columns:1fr; }
  .lesson-grid { grid-template-columns:1fr; }
  .vocab-grid { grid-template-columns:1fr; }
  .control-grid { grid-template-columns:1fr 1fr; }
  .reading-body { padding:16px 14px; line-height:1.85; }
  .reading-body .title { font-size:1.65rem; }
  .lesson-hero h2 { font-size:1.55rem; }
  .lesson-hero-row { align-items:flex-start; }
  .button-row > button { flex:1 1 45%; }
}

.textbook-work .source-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.source-box{background:#f8fafc;border:1px solid #e2e8f0;border-radius:16px;padding:16px}.source-box h4{margin:0 0 10px}.source-box li{margin:7px 0;line-height:1.55}.muted{color:#64748b;font-weight:700}@media(max-width:760px){.textbook-work .source-grid{grid-template-columns:1fr}}

/* Read-aloud controls for every learning section */
.section-title-row,.source-title-row{display:flex;align-items:center;justify-content:space-between;gap:10px}.section-title-row h3,.source-title-row h4{margin:0}.read-section-btn,.mini-read{border:1px solid #BBF7D0;background:#F0FDF4;color:#166534;font-weight:900;cursor:pointer}.read-section-btn{padding:7px 11px;border-radius:10px;white-space:nowrap}.mini-read{width:30px;height:30px;border-radius:50%;padding:0;display:inline-flex;align-items:center;justify-content:center;margin-left:7px;vertical-align:middle}.warmup li,.teacher-notes li,.source-box li{display:flex;align-items:flex-start;gap:5px}.warmup li>span,.teacher-notes li>span,.source-box li>span{flex:1}.question-title{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.option{position:relative}.option-speaker{margin-left:6px;font-size:.85em;opacity:.8}.voice-note{font-size:.7rem;color:#64748B;font-weight:700;margin-left:4px}@media(max-width:600px){.section-title-row,.source-title-row{align-items:flex-start}.read-section-btn{font-size:.75rem;padding:6px 8px}.voice-note{display:block;margin:2px 0 0}}

/* Easy English v3 polish */
.lesson-search{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:15px;padding:8px 10px;margin:-4px 0 16px;box-shadow:0 5px 16px rgba(15,23,42,.04)}
.lesson-search span{font-size:1.1rem}.lesson-search input{flex:1;border:0;outline:0;font:inherit;font-weight:800;color:var(--text);min-width:0;padding:7px}.lesson-search input::placeholder{color:#94a3b8}
.practice-progress{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:10px;padding:10px 12px;border-radius:12px;background:#f8fafc;color:#475569;font-size:.82rem;font-weight:900}.practice-progress strong{color:#1d4ed8}.practice-nav{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:12px}.practice-nav button{min-width:120px}.option:disabled{cursor:default;opacity:1}.option.correct-option{border-color:#86efac;background:#f0fdf4;color:#166534}.option.wrong-option{border-color:#fca5a5;background:#fef2f2;color:#991b1b}.question-result.correct{color:#15803d}.question-result.wrong{color:#b91c1c}
@media(max-width:520px){.lesson-search{position:sticky;top:8px;z-index:20}.practice-nav button{flex:1 1 30%;min-width:0}.practice-progress{align-items:flex-start;flex-direction:column;gap:4px}.button-row{display:grid;grid-template-columns:1fr 1fr}.button-row .primary,.button-row .success,.button-row .secondary,.button-row .danger{min-height:44px}.reading-modes .mode-btn{flex:1;min-width:0}.control select{min-height:42px}.vocab-card{padding:15px}.source-box{padding:14px}}

/* === Easy English v4 visual polish === */
.nav button,
.lesson-nav button,
.admin-nav button,
.mode-btn,
.read-section-btn,
.mini-read,
.primary,
.secondary,
.success,
.danger {
  transition: transform .22s ease, background-color .22s ease, color .22s ease,
              border-color .22s ease, box-shadow .22s ease, opacity .22s ease;
}

.nav button:hover,
.lesson-nav button:hover,
.admin-nav button:hover {
  transform: translateY(-2px);
}

.nav button:active,
.lesson-nav button:active,
.admin-nav button:active,
.mode-btn:active,
.primary:active,
.secondary:active,
.success:active,
.danger:active {
  transform: translateY(0) scale(.97);
}

/* Different cheerful tab hover colors */
.nav button:nth-child(1):hover { background:#EFF6FF; color:#2563EB; border-color:#BFDBFE; box-shadow:0 7px 18px rgba(37,99,235,.14); }
.nav button:nth-child(2):hover { background:#ECFDF5; color:#15803D; border-color:#BBF7D0; box-shadow:0 7px 18px rgba(22,163,74,.14); }
.nav button:nth-child(3):hover { background:#FFFBEB; color:#B45309; border-color:#FDE68A; box-shadow:0 7px 18px rgba(245,158,11,.14); }
.nav button:nth-child(4):hover { background:#F5F3FF; color:#7C3AED; border-color:#DDD6FE; box-shadow:0 7px 18px rgba(124,58,237,.14); }

.lesson-nav button { position:relative; overflow:hidden; }
.lesson-nav button::before {
  content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px;
  border-radius:99px; transform:scaleY(0); transition:transform .22s ease, background-color .22s ease;
}
.lesson-nav button:hover::before,
.lesson-nav button.active::before { transform:scaleY(1); }
.lesson-nav button:nth-child(1):hover, .lesson-nav button:nth-child(1).active { background:#EFF6FF; color:#2563EB; }
.lesson-nav button:nth-child(1)::before { background:#2563EB; }
.lesson-nav button:nth-child(2):hover, .lesson-nav button:nth-child(2).active { background:#ECFDF5; color:#15803D; }
.lesson-nav button:nth-child(2)::before { background:#16A34A; }
.lesson-nav button:nth-child(3):hover, .lesson-nav button:nth-child(3).active { background:#FFFBEB; color:#B45309; }
.lesson-nav button:nth-child(3)::before { background:#F59E0B; }
.lesson-nav button:nth-child(4):hover, .lesson-nav button:nth-child(4).active { background:#FFF1F2; color:#E11D48; }
.lesson-nav button:nth-child(4)::before { background:#E11D48; }
.lesson-nav button:nth-child(5):hover, .lesson-nav button:nth-child(5).active { background:#F0F9FF; color:#0284C7; }
.lesson-nav button:nth-child(5)::before { background:#0284C7; }
.lesson-nav button:nth-child(6):hover, .lesson-nav button:nth-child(6).active { background:#F5F3FF; color:#7C3AED; }
.lesson-nav button:nth-child(6)::before { background:#7C3AED; }
.lesson-nav button:nth-child(7):hover, .lesson-nav button:nth-child(7).active { background:#FDF4FF; color:#A21CAF; }
.lesson-nav button:nth-child(7)::before { background:#A21CAF; }

.mode-btn { transition: all .22s ease; }
.mode-btn:hover { transform:translateY(-2px); box-shadow:0 6px 14px rgba(15,23,42,.08); }

/* Reading is now true paragraph-based content rather than one dense block. */
.reading-body { padding:28px clamp(18px, 3.5vw, 44px); line-height:2.0; }
.reading-body > p { margin:0 0 22px; text-indent:1.4em; }
.reading-body > p:last-child { margin-bottom:0; }
.reading-body > p.dialogue {
  text-indent:0; margin:0 0 18px; padding:12px 16px;
  border-left:4px solid #34D399; background:#F0FDF4;
  border-radius:0 12px 12px 0;
}
.reading-body > p + p { border-top:1px solid transparent; }
.reading-body .word { transition:background-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease; }

@media (max-width:760px) {
  .reading-body { padding:22px 16px; line-height:1.9; }
  .reading-body > p { margin-bottom:19px; text-indent:1em; }
  .reading-body > p.dialogue { padding:10px 12px; }
}

@media (max-width:520px) {
  .reading-body { padding:20px 14px; line-height:1.82; }
  .reading-body > p { margin-bottom:17px; text-indent:.7em; }
  .lesson-nav button:hover { transform:translateY(-1px); }
}

/* =========================
   Easy English Dark Mode
   ========================= */
.header-actions { display:flex; align-items:center; gap:8px; }
.theme-toggle {
  border:1px solid var(--line); background:var(--white); color:var(--text);
  min-height:42px; padding:8px 11px; border-radius:12px; font-weight:900;
  display:inline-flex; align-items:center; gap:7px;
  transition:transform .18s ease, background .22s ease, border-color .22s ease, color .22s ease, box-shadow .22s ease;
}
.theme-toggle:hover { transform:translateY(-2px); box-shadow:0 8px 18px rgba(15,23,42,.12); }
.theme-icon { font-size:1rem; }

:root[data-theme="dark"] {
  --bg:#0B1220;
  --white:#111827;
  --text:#E5E7EB;
  --muted:#94A3B8;
  --line:#263449;
  --green-soft:#10251A;
  --blue-soft:#10213B;
  --yellow-soft:#2A2110;
  --hl-bg:#FACC15;
  --hl-text:#3F2500;
}

:root[data-theme="dark"] body {
  color:var(--text);
  background:linear-gradient(180deg,#0F1B2E 0,var(--bg) 320px);
}
:root[data-theme="dark"] .topbar {
  background:rgba(15,23,42,.92);
  border-bottom-color:var(--line);
}
:root[data-theme="dark"] .brand-title,
:root[data-theme="dark"] .lesson-hero h2,
:root[data-theme="dark"] .class-header h2,
:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] h4,
:root[data-theme="dark"] strong { color:var(--text); }
:root[data-theme="dark"] .nav button { color:#A8B5C7; }
:root[data-theme="dark"] .nav button.active,
:root[data-theme="dark"] .nav button:hover { background:#162B4B; color:#60A5FA; }
:root[data-theme="dark"] .theme-toggle { background:#172033; border-color:#334155; color:#F8FAFC; }

:root[data-theme="dark"] .hero-main {
  background:linear-gradient(135deg,#14294A,#111827 62%);
  border-color:#294B76;
  box-shadow:0 18px 42px rgba(0,0,0,.25);
}
:root[data-theme="dark"] .hero-main p { color:#B6C2D2; }
:root[data-theme="dark"] .hero-side { background:linear-gradient(180deg,#10251A,#111827); border-color:#245437; }
:root[data-theme="dark"] .feature-tile,
:root[data-theme="dark"] .class-card,
:root[data-theme="dark"] .lesson-card,
:root[data-theme="dark"] .lesson-empty,
:root[data-theme="dark"] .class-header,
:root[data-theme="dark"] .lesson-nav,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .big-progress,
:root[data-theme="dark"] .source-item,
:root[data-theme="dark"] .question,
:root[data-theme="dark"] .vocab-card,
:root[data-theme="dark"] .stat {
  background:#111827;
  border-color:var(--line);
  color:var(--text);
}
:root[data-theme="dark"] .feature-tile span,
:root[data-theme="dark"] .class-card p,
:root[data-theme="dark"] .lesson-card p,
:root[data-theme="dark"] .class-header p,
:root[data-theme="dark"] .lesson-card .meta,
:root[data-theme="dark"] .hero-main > div[style],
:root[data-theme="dark"] .section-head p,
:root[data-theme="dark"] .muted { color:#94A3B8 !important; }
:root[data-theme="dark"] .unit-pill { background:#1E293B; color:#CBD5E1; }
:root[data-theme="dark"] .secondary { background:#172033; color:#E5E7EB; border-color:#334155; }
:root[data-theme="dark"] .secondary:hover { background:#1E293B; }
:root[data-theme="dark"] .lesson-nav button { color:#94A3B8; }
:root[data-theme="dark"] .lesson-nav button.active,
:root[data-theme="dark"] .lesson-nav button:hover { background:#172D4B; color:#60A5FA; }
:root[data-theme="dark"] .lesson-hero { background:linear-gradient(135deg,#10251A,#111827 65%); border-color:#245437; }
:root[data-theme="dark"] .tag { background:#172033; border-color:#334155; }
:root[data-theme="dark"] .tag.green { background:#12351F; color:#86EFAC; border-color:#28633C; }
:root[data-theme="dark"] .tag.yellow { background:#33260B; color:#FCD34D; border-color:#6B4C0D; }
:root[data-theme="dark"] .warmup { background:#10251A; border-color:#245437; }
:root[data-theme="dark"] .reading-controls { background:#10213B; border-color:#294B76; }
:root[data-theme="dark"] .control select,
:root[data-theme="dark"] .control input,
:root[data-theme="dark"] .lesson-search input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] input,
:root[data-theme="dark"] select {
  background:#0F172A; color:#E5E7EB; border-color:#334155;
}
:root[data-theme="dark"] .reading-strip { background:#0F172A; border-bottom-color:var(--line); color:#94A3B8; }
:root[data-theme="dark"] .reading-body { color:#E5E7EB; }
:root[data-theme="dark"] .reading-body .title { color:#86EFAC; }
:root[data-theme="dark"] .reading-body .dialogue { background:#10251A; border-left-color:#34D399; }
:root[data-theme="dark"] .word:hover { background:#12351F; outline-color:#4ADE80; }
:root[data-theme="dark"] .word-popup { background:#111827; border-color:#22C55E; box-shadow:0 18px 38px rgba(0,0,0,.45); }
:root[data-theme="dark"] .popup-head { border-bottom-color:#245437; }
:root[data-theme="dark"] .popup-word { color:#86EFAC; }
:root[data-theme="dark"] .popup-label { color:#94A3B8; }
:root[data-theme="dark"] .popup-telugu { color:#FCA5A5; }
:root[data-theme="dark"] .icon-btn { background:#10251A; border-color:#245437; color:#E5E7EB; }
:root[data-theme="dark"] .vocab-meta,
:root[data-theme="dark"] .vocab-def { color:#A8B5C7; }
:root[data-theme="dark"] .vocab-meaning { color:#FCA5A5; }
:root[data-theme="dark"] .option { background:#172033; color:#CBD5E1; border-color:#334155; }
:root[data-theme="dark"] .option.selected { background:#172D4B; color:#93C5FD; border-color:#3B82F6; }
:root[data-theme="dark"] .practice-score { background:#0F172A; }
:root[data-theme="dark"] .completion { background:linear-gradient(180deg,#10251A,#111827); border-color:#245437; }
:root[data-theme="dark"] .source-item { background:#0F172A; }
:root[data-theme="dark"] .source-box { background:#111827; border-color:var(--line); }
:root[data-theme="dark"] .notice { background:#172033; border-color:#334155; color:#CBD5E1; }
:root[data-theme="dark"] hr { border-top-color:#263449 !important; }
:root[data-theme="dark"] .progress-track { background:#263449; }

@media (max-width:760px) {
  .header-actions { gap:5px; }
  .theme-toggle { min-width:42px; width:42px; padding:8px; justify-content:center; }
  .theme-label { display:none; }
}

/* =========================================================
   Easy English v8 — Mobile layout fix
   Keeps the header compact and prevents navigation wrapping.
   ========================================================= */

@media (max-width: 760px) {
  .topbar-inner {
    width: 100%;
    max-width: none;
    padding: 9px 12px;
    gap: 8px;
    align-items: center;
  }

  .brand {
    flex: 0 0 auto;
    min-width: 0;
    gap: 8px;
  }

  .brand-badge {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }

  .brand-title {
    font-size: 1rem;
    line-height: 1.05;
    white-space: nowrap;
  }

  .header-actions {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
  }

  .nav {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    gap: 3px;
    padding: 2px 0;
  }

  .nav::-webkit-scrollbar {
    display: none;
  }

  .nav button {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 8px 9px;
    font-size: .76rem;
    border-radius: 10px;
  }

  .theme-toggle {
    flex: 0 0 42px;
    width: 42px;
    min-width: 42px;
    height: 42px;
    padding: 8px;
    justify-content: center;
  }

  .theme-label {
    display: none;
  }

  .page {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .lesson-toolbar {
    align-items: center;
    gap: 8px;
  }

  .breadcrumb {
    min-width: 0;
  }

  .breadcrumb .secondary {
    white-space: nowrap;
  }

  .lesson-layout,
  .lesson-main,
  .lesson-hero,
  .card {
    min-width: 0;
  }

  /* Lesson section tabs become a clean horizontal swipe strip. */
  .lesson-nav {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    gap: 4px;
    padding: 7px;
    scroll-snap-type: x proximity;
  }

  .lesson-nav::-webkit-scrollbar {
    display: none;
  }

  .lesson-nav button {
    flex: 0 0 auto;
    width: auto;
    min-width: max-content;
    white-space: nowrap;
    padding: 10px 12px;
    scroll-snap-align: start;
  }

  .lesson-hero-row {
    gap: 10px;
  }

  .lesson-hero-row > div:first-child {
    min-width: 0;
  }

  .lesson-hero-row > div:last-child {
    flex: 0 0 auto;
  }

  .lesson-hero h2 {
    overflow-wrap: anywhere;
  }

  .section-title-row,
  .source-title-row {
    min-width: 0;
  }

  .reading-strip {
    min-width: 0;
  }

  .reading-body,
  .vocab-card,
  .source-box,
  .question,
  .admin-panel {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 520px) {
  .topbar-inner {
    padding: 8px 10px;
  }

  .brand-text {
    min-width: 0;
  }

  .brand-title {
    font-size: .94rem;
    letter-spacing: .2px;
  }

  .brand-badge {
    width: 38px;
    height: 38px;
    font-size: 1.12rem;
  }

  .nav button {
    padding: 7px 8px;
    font-size: .72rem;
  }

  .theme-toggle {
    width: 40px;
    min-width: 40px;
    height: 40px;
    flex-basis: 40px;
  }

  .lesson-toolbar {
    flex-wrap: nowrap;
  }

  .lesson-toolbar .tag {
    flex: 0 0 auto;
  }

  .lesson-hero {
    padding: 18px;
  }

  .lesson-hero-row {
    align-items: flex-start;
  }

  .lesson-hero-row > div:last-child .tag {
    white-space: nowrap;
  }
}

/* =========================================================
   Easy English v9 — Mobile & Tablet Drawer Navigation
   Desktop keeps the original navigation. Screens <= 1024px
   use a compact header with a hamburger and slide-out drawer.
   ========================================================= */
.mobile-menu-button,
.mobile-drawer,
.mobile-drawer-backdrop { display:none; }

@media (max-width: 1024px) {
  .topbar-inner {
    max-width: none;
    width: 100%;
    padding: 10px 16px;
    gap: 12px;
  }

  .header-actions { margin-left:auto; }
  .nav { display:none !important; }

  .mobile-menu-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    flex:0 0 44px;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--white);
    color:var(--text);
    font-size:1.45rem;
    font-weight:900;
    line-height:1;
    box-shadow:0 4px 12px rgba(15,23,42,.06);
    transition:transform .18s ease, background .22s ease, box-shadow .22s ease;
  }
  .mobile-menu-button:hover { transform:translateY(-1px); box-shadow:0 8px 18px rgba(15,23,42,.1); }
  .mobile-menu-button:active { transform:scale(.96); }

  .mobile-drawer {
    display:block;
    position:fixed;
    top:0;
    right:0;
    width:min(360px, 88vw);
    height:100dvh;
    z-index:1001;
    background:var(--white);
    border-left:1px solid var(--line);
    box-shadow:-18px 0 50px rgba(15,23,42,.22);
    padding:20px 16px 24px;
    transform:translateX(105%);
    transition:transform .28s cubic-bezier(.2,.8,.2,1);
    overflow-y:auto;
  }

  .mobile-drawer-backdrop {
    display:block;
    position:fixed;
    inset:0;
    z-index:1000;
    background:rgba(15,23,42,.42);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .25s ease, visibility .25s ease;
    backdrop-filter:blur(2px);
  }

  body.drawer-open { overflow:hidden; }
  body.drawer-open .mobile-drawer { transform:translateX(0); }
  body.drawer-open .mobile-drawer-backdrop { opacity:1; visibility:visible; pointer-events:auto; }

  .drawer-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:4px 2px 18px;
    border-bottom:1px solid var(--line);
  }
  .drawer-head strong { display:block; font-size:1.35rem; color:var(--text); }
  .drawer-head span { display:block; margin-top:2px; color:var(--muted); font-size:.8rem; font-weight:800; }
  .drawer-close {
    width:42px;
    height:42px;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--white);
    color:var(--text);
    font-size:1.8rem;
    line-height:1;
    display:grid;
    place-items:center;
  }

  .drawer-links { display:grid; gap:8px; margin-top:18px; }
  .drawer-link,
  .drawer-theme {
    width:100%;
    border:1px solid transparent;
    border-radius:14px;
    background:transparent;
    color:var(--text);
    min-height:52px;
    padding:11px 13px;
    display:flex;
    align-items:center;
    gap:12px;
    text-align:left;
    font-weight:900;
    font-size:1rem;
  }
  .drawer-link > span:first-child,
  .drawer-theme > span:first-child { width:30px; text-align:center; font-size:1.25rem; }
  .drawer-link:hover,
  .drawer-link.active { background:var(--blue-soft); color:var(--blue); border-color:#BFDBFE; }
  .drawer-divider { height:1px; background:var(--line); margin:18px 2px; }
  .drawer-theme { background:#F8FAFC; border-color:var(--line); }
  .drawer-theme:hover { background:var(--blue-soft); }
  .drawer-note { margin:18px 4px 0; color:var(--muted); font-size:.78rem; font-weight:800; line-height:1.5; text-align:center; }

  /* Give tablet/mobile content the full width available below the compact header. */
  .page { width:100%; max-width:1180px; }
}

@media (max-width: 520px) {
  .topbar-inner { padding:8px 10px; }
  .brand { gap:8px; }
  .brand-title { font-size:.94rem; }
  .brand-badge { width:38px; height:38px; font-size:1.12rem; }
  .header-actions { gap:6px; }
  .theme-toggle { width:40px; min-width:40px; height:40px; padding:8px; }
  .mobile-menu-button { width:40px; height:40px; flex-basis:40px; font-size:1.3rem; }
}

:root[data-theme="dark"] .mobile-menu-button,
:root[data-theme="dark"] .drawer-close,
:root[data-theme="dark"] .drawer-theme {
  background:#172033;
  border-color:#334155;
  color:#E5E7EB;
}
:root[data-theme="dark"] .mobile-drawer { background:#111827; border-left-color:#334155; }
:root[data-theme="dark"] .mobile-drawer-backdrop { background:rgba(0,0,0,.58); }
:root[data-theme="dark"] .drawer-link { color:#E5E7EB; }
:root[data-theme="dark"] .drawer-link:hover,
:root[data-theme="dark"] .drawer-link.active { background:#172D4B; color:#60A5FA; border-color:#294B76; }
:root[data-theme="dark"] .drawer-theme:hover { background:#172D4B; }


/* v10 cache-busted mobile/tablet navigation hardening */
@media screen and (max-width: 1024px) {
  .topbar .nav { display: none !important; }
  .topbar .header-actions { display:flex !important; align-items:center; justify-content:flex-end; margin-left:auto; }
  .topbar .theme-toggle { display:inline-flex !important; }
  .topbar .mobile-menu-button { display:inline-flex !important; appearance:none; -webkit-appearance:none; border:1px solid var(--line); background:var(--white); color:var(--text); cursor:pointer; }
  .mobile-drawer { display:block !important; }
  .mobile-drawer-backdrop { display:block !important; }
}
@media screen and (min-width: 1025px) {
  .mobile-menu-button, .mobile-drawer, .mobile-drawer-backdrop { display:none !important; }
}