/* ============ Tokens ============ */
:root{
  --bg: #0d1117;
  --bg-elev: #10151c;
  --card: #161b22;
  --card-hover: #1c2229;
  --border: #2a313c;
  --border-soft: #1f252d;
  --text: #e6edf3;
  --text-dim: #8b96a5;
  --text-faint: #5b6472;

  --accent: #57c2a3;       /* correct / progress teal */
  --accent-dim: #2f4b43;
  --gold: #e3b341;         /* streak / xp */
  --gold-dim: #4a3d1e;
  --coral: #f0665c;        /* wrong / again */
  --coral-dim: #4a2624;
  --blue: #6ea8fe;         /* book II */
  --violet: #b394f5;       /* book III */

  --radius: 14px;
  --radius-sm: 9px;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  --nav-h: 68px;
  --top-h: 58px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
button{ font-family: inherit; }
h1,h2,h3{ margin:0; }
p{ margin:0; }

#app{
  max-width: 560px;
  margin: 0 auto;
  min-height: 100dvh;
  display:flex;
  flex-direction: column;
  background: var(--bg);
  position: relative;
}

/* ============ Top bar ============ */
.topbar{
  height: var(--top-h);
  display:flex;
  align-items:center;
  gap:10px;
  padding: 0 14px;
  position: sticky; top:0; z-index: 20;
  background: rgba(13,17,23,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-soft);
}
.icon-btn{
  background: var(--card);
  border:1px solid var(--border);
  color: var(--text);
  width:36px; height:36px;
  border-radius: 10px;
  font-size: 16px;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.icon-btn:active{ background: var(--card-hover); }
.hidden{ display:none !important; }

.brand{ display:flex; align-items:center; gap:8px; flex:1; min-width:0; }
.brand-mark{ color: var(--accent); font-size: 13px; letter-spacing:-2px; }
.brand-name{
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text-dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.brand-name b{ color: var(--text); font-weight:700; }

.stat-pills{ display:flex; gap:6px; flex-shrink:0; }
.pill{
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  display:flex; align-items:center; gap:4px;
  padding: 5px 9px;
  border-radius: 8px;
  border:1px solid var(--border);
  background: var(--bg-elev);
}
.pill-streak{ color: var(--gold); border-color: var(--gold-dim); }
.pill-xp{ color: var(--accent); border-color: var(--accent-dim); }
.pill-ic{ font-size: 11px; opacity:.85; }

/* ============ Main view ============ */
.view{
  flex:1;
  padding: 16px 14px calc(var(--nav-h) + var(--safe-b) + 20px);
  overflow-y: auto;
}

/* ============ Bottom nav ============ */
.bottomnav{
  position: fixed;
  bottom:0; left:50%; transform: translateX(-50%);
  width:100%; max-width:560px;
  height: calc(var(--nav-h) + var(--safe-b));
  padding-bottom: var(--safe-b);
  display:flex;
  background: rgba(16,21,28,0.96);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--border-soft);
  z-index: 30;
}
.navbtn{
  flex:1;
  background:none; border:none;
  color: var(--text-faint);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px;
  font-size: 11px;
  font-weight: 500;
  cursor:pointer;
  position:relative;
}
.navicon{ font-size: 19px; line-height:1; }
.navbtn.active{ color: var(--accent); }
.badge{
  position:absolute; top:6px; right:calc(50% - 26px);
  background: var(--coral);
  color:#fff;
  font-family: var(--font-mono);
  font-size: 10px; font-weight:700;
  min-width:16px; height:16px;
  border-radius: 8px;
  display:flex; align-items:center; justify-content:center;
  padding: 0 4px;
}

/* ============ Sections / cards ============ */
.section-title{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  font-weight:600;
  margin: 22px 2px 10px;
}
.section-title:first-child{ margin-top:0; }

.card{
  background: var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}

/* Hero / continue card */
.hero{
  background: linear-gradient(155deg, #17222070 0%, var(--card) 60%);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  position:relative;
  overflow:hidden;
}
.hero-eyebrow{ font-family: var(--font-mono); font-size:11px; color:var(--accent); letter-spacing:.06em; text-transform:uppercase; }
.hero-title{ font-size: 20px; font-weight:800; margin-top:4px; line-height:1.25; }
.hero-sub{ color: var(--text-dim); font-size: 13px; margin-top:6px; }
.hero-actions{ display:flex; gap:8px; margin-top:14px; }

.btn{
  border:none;
  border-radius: 10px;
  padding: 12px 16px;
  font-weight:700;
  font-size: 14px;
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
}
.btn-primary{ background: var(--accent); color:#04231a; }
.btn-primary:active{ opacity:.85; }
.btn-secondary{ background: var(--bg-elev); color: var(--text); border:1px solid var(--border); }
.btn-block{ width:100%; }
.btn-lg{ padding:15px 18px; font-size:15px; }
.btn:disabled{ opacity:.4; cursor:not-allowed; }

/* Equalizer-style progress bar (signature element) */
.eq{
  display:flex; align-items:flex-end; gap:2px;
  height: 20px;
}
.eq i{
  display:block;
  width: 4px;
  border-radius: 2px 2px 0 0;
  background: var(--border);
  flex-shrink:0;
}
.eq i.on{ background: var(--accent); }

.progress-row{ display:flex; align-items:center; gap:10px; margin-top:10px; }
.progress-track{
  flex:1; height:6px; border-radius:4px;
  background: var(--border-soft);
  overflow:hidden;
}
.progress-fill{ height:100%; background: var(--accent); border-radius:4px; }
.progress-label{ font-family: var(--font-mono); font-size:11.5px; color: var(--text-dim); flex-shrink:0; }

/* Book summary cards on home */
.book-grid{ display:flex; flex-direction:column; gap:10px; }
.book-row{
  display:flex; align-items:center; gap:12px;
  background: var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  cursor:pointer;
}
.book-row:active{ background: var(--card-hover); }
.book-tag{
  font-family: var(--font-mono);
  font-weight:700; font-size:13px;
  width:34px; height:34px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.book-tag.b1{ background: var(--accent-dim); color: var(--accent); }
.book-tag.b2{ background: #1c3357; color: var(--blue); }
.book-tag.b3{ background: #2d2149; color: var(--violet); }
.book-tag.b4{ background: var(--gold-dim); color: var(--gold); }
.book-row-body{ flex:1; min-width:0; }
.book-row-title{ font-weight:700; font-size:14px; }
.book-row-sub{ color: var(--text-dim); font-size:12px; margin-top:2px; }
.chev{ color: var(--text-faint); font-size:18px; }

/* Lesson list */
.tabbar{ display:flex; gap:6px; margin-bottom:14px; }
.tab{
  flex:1; text-align:center;
  padding:9px 6px;
  border-radius: 10px;
  background: var(--bg-elev);
  border:1px solid var(--border);
  color: var(--text-dim);
  font-weight:700; font-size:13px;
  cursor:pointer;
}
.tab.active{ color:#04231a; background: var(--accent); border-color: var(--accent); }

.lesson-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(64px,1fr));
  gap:8px;
}
.lesson-tile{
  aspect-ratio: 1;
  border-radius: 10px;
  border:1px solid var(--border);
  background: var(--card);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  cursor:pointer;
  position:relative;
  font-family: var(--font-mono);
}
.lesson-tile .num{ font-size:15px; font-weight:700; color:var(--text); }
.lesson-tile .dot{ width:5px; height:5px; border-radius:50%; margin-top:4px; background: var(--border); }
.lesson-tile.locked{ opacity:.35; cursor:not-allowed; }
.lesson-tile.locked .num{ color: var(--text-faint); }
.lesson-tile.done{ border-color: var(--accent-dim); background: rgba(87,194,163,0.08); }
.lesson-tile.done .dot{ background: var(--accent); }
.lesson-tile.progress{ border-color: var(--gold-dim); }
.lesson-tile.progress .dot{ background: var(--gold); }
.lesson-tile.current{ box-shadow: 0 0 0 2px var(--accent); }

/* ============ Card / drill screen ============ */
.drill-wrap{
  display:flex; flex-direction:column;
  min-height: calc(100dvh - var(--top-h) - var(--nav-h) - 60px);
}
.drill-progress{ display:flex; gap:4px; margin-bottom: 18px; }
.drill-progress i{ flex:1; height:4px; border-radius:2px; background: var(--border-soft); }
.drill-progress i.filled{ background: var(--accent); }
.drill-progress i.current{ background: var(--gold); }

.flash{
  flex:1;
  background: var(--card);
  border:1px solid var(--border);
  border-radius: 18px;
  padding: 28px 22px;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  gap: 14px;
  min-height: 200px;
  position:relative;
}
.flash-eyebrow{ font-family:var(--font-mono); font-size:11px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.08em; position:absolute; top:16px; left:0; right:0; }
.flash-main{ font-size: 24px; font-weight:800; line-height:1.35; }
.flash-sub{ font-size: 17px; color: var(--accent); font-weight:600; line-height:1.4; min-height: 24px; }
.flash-hint{ color: var(--text-faint); font-size:12.5px; }

.speak-btn{
  background: var(--bg-elev);
  border:1px solid var(--border);
  color: var(--text);
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:17px; cursor:pointer;
}
.speak-btn:active{ background:var(--card-hover); }
.speak-btn.playing{ border-color: var(--accent); color: var(--accent); }

.drill-actions{ margin-top:16px; }
.grade-row{ display:grid; grid-template-columns: repeat(4,1fr); gap:8px; }
.grade-btn{
  border-radius: 10px; border:1px solid var(--border);
  padding: 12px 4px;
  font-weight:700; font-size:12.5px;
  cursor:pointer; background: var(--bg-elev); color: var(--text);
  display:flex; flex-direction:column; gap:3px; align-items:center;
}
.grade-btn small{ font-family: var(--font-mono); font-weight:500; color: var(--text-faint); font-size:10px; }
.grade-again{ color: var(--coral); }
.grade-hard{ color: var(--gold); }
.grade-good{ color: var(--accent); }
.grade-easy{ color: var(--blue); }

/* MCQ options */
.opt-list{ display:flex; flex-direction:column; gap:9px; margin-top: 4px; }
.opt{
  text-align:left;
  padding: 14px 15px;
  border-radius: 12px;
  border:1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  cursor:pointer;
}
.opt:active{ background: var(--card-hover); }
.opt.correct{ border-color: var(--accent); background: rgba(87,194,163,0.12); color: var(--accent); }
.opt.wrong{ border-color: var(--coral); background: rgba(240,102,92,0.12); color: var(--coral); }
.opt.dim{ opacity:.45; }

/* Typing input */
.type-input{
  width:100%;
  background: var(--bg-elev);
  border: 1.5px solid var(--border);
  color: var(--text);
  border-radius: 12px;
  padding: 14px 15px;
  font-size: 16px;
  font-family: var(--font-body);
}
.type-input:focus{ outline:none; border-color: var(--accent); }
.type-input.correct{ border-color: var(--accent); }
.type-input.wrong{ border-color: var(--coral); }
.type-feedback{ font-size:13px; margin-top:8px; color: var(--text-dim); }
.type-feedback b{ color: var(--accent); }

/* Session summary */
.summary-icon{ font-size: 44px; text-align:center; }
.summary-stats{ display:grid; grid-template-columns: repeat(3,1fr); gap:8px; margin-top:16px; }
.summary-stat{ background: var(--bg-elev); border:1px solid var(--border); border-radius:10px; padding:12px 8px; text-align:center; }
.summary-stat .n{ font-family: var(--font-mono); font-size:19px; font-weight:700; }
.summary-stat .l{ font-size:10.5px; color: var(--text-faint); margin-top:2px; text-transform:uppercase; letter-spacing:.04em; }

/* Empty state */
.empty{ text-align:center; padding: 40px 16px; color: var(--text-dim); }
.empty .ico{ font-size:34px; margin-bottom:10px; }

/* Stats screen */
.stat-big{ display:flex; justify-content:space-between; align-items:flex-end; }
.stat-big .n{ font-family:var(--font-mono); font-size:34px; font-weight:700; color: var(--accent); }
.stat-big .l{ color: var(--text-dim); font-size:13px; }
.heat-row{ display:flex; gap:4px; margin-top:14px; }
.heat-cell{ flex:1; aspect-ratio:1; border-radius:5px; background: var(--border-soft); }
.heat-cell.on1{ background: var(--accent-dim); }
.heat-cell.on2{ background: var(--accent); opacity:.7; }
.heat-cell.on3{ background: var(--accent); }

.kv-list{ display:flex; flex-direction:column; }
.kv-row{ display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--border-soft); font-size:14px; }
.kv-row:last-child{ border-bottom:none; }
.kv-row span:last-child{ font-family: var(--font-mono); font-weight:600; color: var(--text); }

/* Utility */
.mt8{ margin-top:8px; } .mt14{ margin-top:14px; } .mt20{ margin-top:20px; }
.dim{ color: var(--text-dim); }
.center{ text-align:center; }
.fadein{ animation: fadein .25s ease; }
@keyframes fadein{ from{ opacity:0; transform: translateY(4px);} to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce){
  .fadein{ animation:none; }
}

::-webkit-scrollbar{ width:0; height:0; }