@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* -- Design tokens ------------------------------------------------ */
:root {
  --bg:           #f8fafc;
  --panel:        #ffffff;
  --ink:          #0f172a;
  --ink-2:        #334155;
  --muted:        #64748b;
  --muted-2:      #94a3b8;
  --line:         #e2e8f0;
  --line-light:   #f1f5f9;

  --primary:      #6366f1;
  --primary-dark: #4f46e5;
  --primary-bg:   #eef2ff;
  --primary-text: #4f46e5;

  --good:         #10b981;
  --good-dark:    #059669;
  --bad:          #f43f5e;
  --bad-dark:     #e11d48;
  --warn:         #f59e0b;
  --info:         #06b6d4;
  --accent:       #3b82f6;
  --accent-2:     #f59e0b;

  /* level colours */
  --A1: #22c55e;
  --A2: #06b6d4;
  --B1: #3b82f6;
  --B2: #f97316;
  --C1: #8b5cf6;
  --C2: #ec4899;

  --shadow-sm:  0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
  --shadow-md:  0 4px 16px rgba(0,0,0,.09);
  --radius:     12px;
  --radius-sm:  8px;
  --sidebar-w:  240px;

  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
}

/* -- Reset & base -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  overflow-x: hidden;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; font-size: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--sans);
  color: var(--ink);
  line-height: 1.25;
  margin: 0 0 .5em;
}
h1 { font-size: 1.9rem; font-weight: 700; }
h2 { font-size: 1.4rem; font-weight: 700; border-bottom: 1px solid var(--line); padding-bottom: .35em; margin-top: 1.6em; }
h3 { font-size: 1.1rem; font-weight: 600; margin-top: 1.2em; }
h4 { font-size: .95rem; font-weight: 600; margin-top: .8em; }

code, kbd {
  font-family: var(--mono);
  font-size: .85em;
  background: var(--line-light);
  border: 1px solid var(--line);
  padding: 2px 6px;
  border-radius: 5px;
  color: var(--primary);
}

hr { border: 0; border-top: 1px solid var(--line); margin: 1.5em 0; }

/* -- Layout -------------------------------------------------------- */

/* Hide the legacy checkbox — not used in the new sidebar */
#mobile-menu-toggle { display: none; }

#app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

/* Explicitly pin sidebar + main so nothing else can displace them */
nav#sidebar       { grid-column: 1; grid-row: 1; }
main#main-content { grid-column: 2; grid-row: 1; }

/* Stray grid children (btn, overlay) collapse to zero height — they are
   positioned fixed/absolute on mobile so they don't affect flow */
#app > .mobile-menu-btn,
#app > .nav-overlay {
  grid-column: 1 / -1;
  grid-row: 1;
  height: 0;
  overflow: visible;
  align-self: start;
}

main#main-content {
  padding: 32px 40px 80px;
  max-width: 960px;
  width: 100%;
}

/* -- Sidebar ------------------------------------------------------- */
nav#sidebar {
  background: var(--panel);
  border-right: 1px solid var(--line);
  width: var(--sidebar-w);
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  font-size: .875rem;
  z-index: 100;
}

/* scrollbar */
nav#sidebar::-webkit-scrollbar { width: 4px; }
nav#sidebar::-webkit-scrollbar-track { background: transparent; }
nav#sidebar::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

/* brand bar */
.sb-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 14px 14px;
  border-bottom: 1px solid var(--line-light);
}
.sb-logo {
  background: var(--ink);
  color: #fff;
  font-weight: 800;
  font-size: .75rem;
  width: 32px;
  height: 32px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: .02em;
}
.sb-title {
  font-weight: 700;
  font-size: .875rem;
  color: var(--ink);
  line-height: 1.2;
}
.sb-sub {
  font-size: .65rem;
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: 1px;
}
/* Close button — hidden on desktop, shown inside sidebar on mobile */
.sb-close-btn {
  display: none;
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: var(--line-light);
  color: var(--ink-2);
  font-size: 1rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
  z-index: 10;
}
.sb-close-btn:hover { background: var(--line); color: var(--ink); }

/* top nav section (kept for fallback) */
.sb-section {
  padding: 8px 8px 4px;
  border-bottom: 1px solid var(--line-light);
}

/* pinned top items */
.sb-pinned {
  padding: 8px 8px 4px;
  border-bottom: 1px solid var(--line-light);
}

/* group accordion container */
.sb-groups {
  padding: 6px 8px;
  border-bottom: 1px solid var(--line-light);
}

/* group header row */
.sb-group-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  user-select: none;
  border-left: 3px solid transparent;
  font-size: .83rem;
  font-weight: 600;
  color: var(--ink-2);
  transition: background .12s;
}
.sb-group-row:hover { background: var(--line-light); color: var(--ink); }
.sb-group-row.open {
  background: var(--line-light);
  border-left-color: var(--primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--primary);
}
.sb-group-name { flex: 1; }

/* group sub-links */
.sb-group-links {
  overflow: hidden;
  max-height: 0;
  transition: max-height .22s ease;
  padding-left: 8px;
}
.sb-group-links.open { max-height: 400px; }
.sb-group-links a.nav-item {
  font-size: .82rem;
  padding: 5px 10px 5px 18px;
  color: var(--ink-2);
}
.sb-group-links a.nav-item:hover  { color: var(--primary); background: var(--primary-bg); }
.sb-group-links a.nav-item.active {
  color: var(--primary);
  background: var(--primary-bg);
  border-left-color: var(--primary);
  font-weight: 600;
}

nav#sidebar a.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  color: var(--ink-2);
  font-weight: 500;
  margin-bottom: 1px;
  cursor: pointer;
  transition: background .15s, color .15s;
  font-size: .875rem;
  text-decoration: none;
}
nav#sidebar a.nav-item:hover {
  background: var(--line-light);
  text-decoration: none;
}
nav#sidebar a.nav-item.active {
  background: var(--primary-bg);
  color: var(--primary-text);
  font-weight: 600;
}

.nav-icon {
  font-size: .95rem;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
  opacity: .7;
}
nav#sidebar a.nav-item.active .nav-icon { opacity: 1; }

/* level accordion rows */
.sb-levels {
  padding: 8px 8px;
  flex: 1;
}

.sb-level-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  margin-bottom: 1px;
  transition: background .15s, border-left-color .15s;
  user-select: none;
  border-left: 3px solid transparent;
}
.sb-level-row:hover { background: var(--line-light); }
.sb-level-row.open { background: var(--line-light); }

.sb-pill {
  color: #fff;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: .72rem;
  font-weight: 700;
  min-width: 26px;
  text-align: center;
  flex-shrink: 0;
}
.sb-pill.A1 { background: var(--A1); }
.sb-pill.A2 { background: var(--A2); }
.sb-pill.B1 { background: var(--B1); }
.sb-pill.B2 { background: var(--B2); }
.sb-pill.C1 { background: var(--C1); }
.sb-pill.C2 { background: var(--C2); }

.sb-level-name {
  font-size: .83rem;
  color: var(--ink-2);
  font-weight: 500;
  flex: 1;
}
.sb-chevron {
  color: var(--muted-2);
  font-size: .8rem;
  transition: transform .2s;
}
.sb-level-row.open .sb-chevron { transform: rotate(90deg); }

/* accordion sub-links */
.sb-sub-links {
  overflow: hidden;
  max-height: 0;
  transition: max-height .22s ease;
  padding-left: 8px;
}
.sb-sub-links.open { max-height: 600px; }

.sb-sub-links a.nav-item {
  font-size: .82rem;
  padding: 5px 10px;
  padding-left: 12px;
  color: var(--muted);
  font-weight: 400;
  /* stable left border slot — avoids layout shift on active */
  border-left: 2px solid transparent;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-left: 4px;
}

/* ── Level-specific accordion: open row accent ── */
.sb-level-row[data-level="A1"].open { border-left: 3px solid var(--A1); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding-left: 7px; }
.sb-level-row[data-level="A2"].open { border-left: 3px solid var(--A2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding-left: 7px; }
.sb-level-row[data-level="B1"].open { border-left: 3px solid var(--B1); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding-left: 7px; }
.sb-level-row[data-level="B2"].open { border-left: 3px solid var(--B2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding-left: 7px; }
.sb-level-row[data-level="C1"].open { border-left: 3px solid var(--C1); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding-left: 7px; }
.sb-level-row[data-level="C2"].open { border-left: 3px solid var(--C2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding-left: 7px; }

/* ── A1 — green ── */
.sb-sub-links a.nav-item.lvl-A1:hover  { color: var(--A1); background: rgba(34,197,94,.07); }
.sb-sub-links a.nav-item.lvl-A1.active { color: var(--A1); background: rgba(34,197,94,.10); border-left-color: var(--A1); font-weight: 600; }

/* ── A2 — cyan ── */
.sb-sub-links a.nav-item.lvl-A2:hover  { color: var(--A2); background: rgba(6,182,212,.07); }
.sb-sub-links a.nav-item.lvl-A2.active { color: var(--A2); background: rgba(6,182,212,.10); border-left-color: var(--A2); font-weight: 600; }

/* ── B1 — red ── */
.sb-sub-links a.nav-item.lvl-B1:hover  { color: var(--B1); background: rgba(244,63,94,.07); }
.sb-sub-links a.nav-item.lvl-B1.active { color: var(--B1); background: rgba(244,63,94,.10); border-left-color: var(--B1); font-weight: 600; }

/* ── B2 — orange ── */
.sb-sub-links a.nav-item.lvl-B2:hover  { color: var(--B2); background: rgba(249,115,22,.07); }
.sb-sub-links a.nav-item.lvl-B2.active { color: var(--B2); background: rgba(249,115,22,.10); border-left-color: var(--B2); font-weight: 600; }

/* ── C1 — violet ── */
.sb-sub-links a.nav-item.lvl-C1:hover  { color: var(--C1); background: rgba(139,92,246,.07); }
.sb-sub-links a.nav-item.lvl-C1.active { color: var(--C1); background: rgba(139,92,246,.10); border-left-color: var(--C1); font-weight: 600; }

/* ── C2 — pink ── */
.sb-sub-links a.nav-item.lvl-C2:hover  { color: var(--C2); background: rgba(236,72,153,.07); }
.sb-sub-links a.nav-item.lvl-C2.active { color: var(--C2); background: rgba(236,72,153,.10); border-left-color: var(--C2); font-weight: 600; }

/* -- Cards --------------------------------------------------------- */
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 20px 24px;
  margin: 16px 0;
}

/* level-coloured top border on overview cards */
.card.lvl-A1 { border-top: 3px solid var(--A1); }
.card.lvl-A2 { border-top: 3px solid var(--A2); }
.card.lvl-B1 { border-top: 3px solid var(--B1); }
.card.lvl-B2 { border-top: 3px solid var(--B2); }
.card.lvl-C1 { border-top: 3px solid var(--C1); }
.card.lvl-C2 { border-top: 3px solid var(--C2); }

/* -- Tags / level pills -------------------------------------------- */
.tag {
  display: inline-block;
  color: #fff;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .03em;
}
.tag.A1 { background: var(--A1); }
.tag.A2 { background: var(--A2); }
.tag.B1 { background: var(--B1); }
.tag.B2 { background: var(--B2); }
.tag.C1 { background: var(--C1); }
.tag.C2 { background: var(--C2); }
.tag.muted { background: var(--line); color: var(--muted); }
.tag.good  { background: var(--good); }
.tag.gold  { background: var(--warn); }

/* -- Buttons ------------------------------------------------------- */
.btn {
  display: inline-block;
  background: var(--primary);
  color: #fff;
  padding: 9px 18px;
  border: none;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: .875rem;
  cursor: pointer;
  transition: background .15s, opacity .15s;
  text-decoration: none;
}
.btn:hover { background: var(--primary-dark); color: #fff; text-decoration: none; }
.btn.secondary {
  background: var(--panel);
  color: var(--ink-2);
  border: 1px solid var(--line);
}
.btn.secondary:hover { background: var(--line-light); color: var(--ink-2); }
.btn.good    { background: var(--good); }
.btn.good:hover { background: var(--good-dark); }
.btn.danger  { background: #fff; color: var(--bad); border: 1px solid var(--bad); }
.btn.danger:hover { background: #fff1f2; }
.btn.small   { padding: 5px 12px; font-size: .8rem; }
.btn.primary { background: var(--primary); }

/* -- Callouts ------------------------------------------------------ */
.callout {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: #fffbeb;
  margin: 12px 0;
  font-size: .875rem;
}
.callout strong { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; color: var(--ink); }
.callout.tip  { background: #f0fdf4; border-color: #86efac; }
.callout.info { background: #eff6ff; border-color: #93c5fd; }
.callout.warn { background: #fff7ed; border-color: #fdba74; }
.callout.error { background: #fff1f2; border-color: #fca5a5; }

/* -- Bilingual box ------------------------------------------------- */
.bilingual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 14px 0;
}
.bilingual > div {
  padding: 14px 18px;
  background: var(--line-light);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  font-size: .9rem;
}
.bilingual > div:first-child { background: #eff6ff; border-color: #bfdbfe; }
.bilingual h4 {
  margin: 0 0 6px;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 600;
}

/* -- Tables -------------------------------------------------------- */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 14px 0;
  font-size: .9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
th, td { padding: 9px 13px; text-align: left; border-bottom: 1px solid var(--line); }
th { background: var(--line-light); font-weight: 600; font-size: .75rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
tr:last-child td { border-bottom: none; }
tr.irregular td { background: #fffbeb; }
tr.highlight td { background: #f0fdf4; }
table.compact td, table.compact th { padding: 5px 9px; font-size: .85rem; }

/* -- Grids --------------------------------------------------------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }

/* -- Flashcard component ------------------------------------------- */
.flashcard {
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 36px 32px 28px;
  text-align: center;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: box-shadow .15s, border-color .15s, transform .1s;
  position: relative;
  overflow: hidden;
  width: 100%;
}
.flashcard::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--primary-dark));
}
.flashcard:hover { box-shadow: var(--shadow-md); border-color: var(--primary); transform: translateY(-1px); }
.flashcard:active { transform: translateY(0); }
/* legacy selectors kept for any inline-HTML cards */
.flashcard .word, .flashcard .fc-word  { font-size: 2.4rem; font-weight: 800; color: var(--ink); line-height: 1.2; margin: 6px 0 8px; }
.flashcard .meaning, .flashcard .fc-tap-hint { font-size: .9rem; color: var(--muted); font-weight: 500; margin-top: 4px; opacity: .8; }
.flashcard .meta, .flashcard .fc-meta  { font-size: .72rem; color: var(--muted-2); text-transform: uppercase; letter-spacing: .08em; }
.fc-progress-row { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 14px; }
.fc-box-badge { font-size: .7rem; background: var(--primary-bg); color: var(--primary-text); border-radius: 10px; padding: 2px 9px; font-weight: 700; letter-spacing: .04em; }

/* -- Quiz ---------------------------------------------------------- */
.quiz-q { margin: 12px 0; padding: 14px 18px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.quiz-q .prompt { font-weight: 600; margin-bottom: 8px; font-size: 1.05rem; color: var(--ink); }
.quiz-q input[type=text] {
  font-family: var(--sans); font-size: 1rem; font-weight: 500;
  padding: 7px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  width: 280px; outline: none; transition: border-color .2s; background: var(--panel);
}
.quiz-q input[type=text]:focus { border-color: var(--primary); }
@keyframes quiz-correct { 0%,100%{transform:scale(1)} 50%{transform:scale(1.04)} }
@keyframes quiz-wrong   { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-5px)} 40%,80%{transform:translateX(5px)} }
.quiz-q input.correct { border-color: var(--good); background: #f0fdf4; color: var(--good-dark); animation: quiz-correct .15s ease-out; }
.quiz-q input.wrong   { border-color: var(--bad);  background: #fff1f2; color: var(--bad-dark);  animation: quiz-wrong .2s ease-out; }
.quiz-q .feedback { font-size: .9rem; margin-top: 6px; margin-left: 10px; display: inline-block; font-weight: 600; }
.quiz-q .feedback.correct { color: var(--good); }
.quiz-q .feedback.wrong   { color: var(--bad); }
.quiz-q input.needs-answer { border-color: var(--warn); background: #fffbeb; }

/* -- Practice multiple-choice (lessons + hören) -------------------- */
.practice-mc-list { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.practice-mc { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; }
.practice-mc-q { font-weight: 600; color: var(--ink); margin: 0 0 10px; font-size: .95rem; }
.practice-mc-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.btn.practice-opt {
  background: var(--bg); border: 1px solid var(--line); color: var(--ink);
  padding: 7px 14px; font-size: .9rem; font-weight: 500; border-radius: 8px;
  cursor: pointer; transition: border-color .15s, background .15s;
  text-align: left;
}
.btn.practice-opt:hover:not(:disabled) { border-color: var(--primary); background: var(--primary-bg); color: var(--primary); }
.btn.practice-opt.practice-opt-correct { background: #f0fdf4; border-color: var(--good); color: #14532d; font-weight: 700; }
.btn.practice-opt.practice-opt-wrong   { background: #fff1f2; border-color: var(--bad);  color: #9f1239; font-weight: 700; }
.btn.practice-opt:disabled { cursor: default; }
.practice-mc-fb { font-size: .88rem; font-weight: 700; margin-top: 8px; padding: 6px 10px; border-radius: 6px; }
.practice-fb-correct { color: #14532d; background: #f0fdf4; }
.practice-fb-wrong   { color: #9f1239; background: #fff1f2; }

/* -- Hören MC layout (same classes, different container) ----------- */
.horen-mc-list { display: flex; flex-direction: column; gap: 12px; margin: 12px 0 4px; }
.horen-mc { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; }
.horen-mc-q { font-weight: 600; color: var(--ink); margin: 0 0 10px; font-size: .95rem; }
.horen-mc-opts { display: flex; flex-wrap: wrap; gap: 8px; }

/* -- Verb card grid ------------------------------------------------- */
.verb-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 12px;
}
.verb-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  border-top: 3px solid var(--primary);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.verb-card-header { display: flex; align-items: center; gap: 6px; }
.verb-card-de { font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.verb-card-en { font-size: .82rem; color: var(--muted); font-weight: 500; }
.verb-card-note { font-size: .78rem; color: var(--ink-2); font-style: italic; border-left: 2px solid var(--line); padding-left: 6px; }
.verb-card-conj { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; }
.vc-row { display: grid; grid-template-columns: 3.5rem 1fr 3.5rem 1fr; font-size: .83rem; gap: 2px 6px; align-items: baseline; }
.vc-p { color: var(--muted); font-size: .78rem; }
.vc-v { font-weight: 700; color: var(--ink); }
.verb-card-pp { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line-light); font-size: .82rem; color: var(--ink-2); }
.vc-pp-label { font-size: .73rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-right: 2px; }
.vc-pp-aux { color: var(--muted); }

.quiz-summary, .lesson-progress-panel, .mock-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--line-light); margin: 12px 0; flex-wrap: wrap;
}
.lesson-progress-panel > div { min-width: 200px; flex: 1; }

/* -- Lesson accordion ---------------------------------------------- */
.lesson-card { padding: 0; overflow: hidden; }
.lesson-card > summary {
  list-style: none; cursor: pointer; padding: 16px 20px;
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  font-weight: 600; color: var(--ink);
}
.lesson-card > summary::-webkit-details-marker { display: none; }
.lesson-card > summary::before { content: '\25B8'; color: var(--primary); font-size: 1rem; }
.lesson-card[open] > summary::before { content: '\25BE'; }
.lesson-body { padding: 0 20px 20px; }

/* -- Lesson nav dots ----------------------------------------------- */
.lesson-nav-wrap { position: relative; }
.lesson-nav-wrap::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 40px; background: linear-gradient(to right, transparent, var(--bg)); pointer-events: none; display: none; }
.lesson-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.lesson-nav a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 50%;
  color: var(--muted); font-weight: 700; font-size: 1rem;
  cursor: pointer; transition: all .15s;
}
.lesson-nav a:hover { border-color: var(--primary); color: var(--primary); }
.lesson-nav a.done { background: var(--warn); border-color: #d97706; color: #fff; }

/* -- Progress bar -------------------------------------------------- */
.progress { height: 10px; background: var(--line-light); border: 1px solid var(--line); border-radius: 99px; overflow: hidden; margin: 10px 0; }
.progress > div { height: 100%; background: var(--primary); border-radius: 99px; transition: width .4s ease-out; }
.progress.green > div { background: var(--good); }

/* -- Details / collapsible ----------------------------------------- */
details { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px; margin: 8px 0; background: var(--panel); }
details > summary { cursor: pointer; font-weight: 600; font-size: 1rem; outline: none; color: var(--ink); }
details[open] { border-color: var(--primary); }

/* -- Select / dropdown -------------------------------------------- */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-family: var(--sans);
  font-size: .875rem;
  color: var(--ink);
  background-color: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 7px 34px 7px 12px;
  cursor: pointer;
  line-height: 1.4;
  /* custom chevron — neutral so it works in light & dark */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
  transition: border-color .15s, box-shadow .15s;
  max-width: 100%;
}
select:hover  { border-color: var(--primary); }
select:focus  { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,102,241,.13); }
select option { background: var(--panel); color: var(--ink); }

/* compact size for TTS player row */
select.tts-speed { font-size: .82rem; padding-top: 6px; padding-bottom: 6px; }

/* vocab filter label row */
.no-print label,
.vocab-filter label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .875rem;
  font-weight: 600;
  color: var(--ink-2);
}

/* -- Vocab search -------------------------------------------------- */
.vocab-search { padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; font-size: .875rem; min-width: 180px; background: var(--panel); color: var(--ink); }
.vocab-search:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,102,241,.13); }
.vocab-count { color: var(--muted); font-weight: 600; font-size: .82rem; }

/* -- Flashcard back + actions -------------------------------------- */
.fc-back {
  background: var(--panel);
  border: 2px solid var(--good);
  border-radius: var(--radius);
  padding: 24px 20px 20px;
  text-align: center;
  margin-top: 8px;
  animation: fcReveal .18s ease;
}
@keyframes fcReveal { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.fc-answer { font-size: 1.7rem; font-weight: 800; color: var(--ink); display: block; margin-bottom: 16px; line-height: 1.25; }
.fc-listen-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 20px;
  background: var(--primary-bg);
  color: var(--primary-text);
  border: 1.5px solid var(--primary);
  border-radius: 20px;
  font: 600 .875rem var(--sans);
  cursor: pointer;
  transition: background .15s, color .15s, transform .1s;
}
.fc-listen-btn:hover { background: var(--primary); color: #fff; transform: scale(1.04); }
.fc-listen-btn:active { transform: scale(.97); }
.fc-actions {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}
.fc-btn-forgot, .fc-btn-knew {
  flex: 1;
  padding: 14px 12px;
  border-radius: var(--radius-sm);
  font: 700 1rem var(--sans);
  cursor: pointer;
  transition: background .15s, color .15s, transform .1s;
  letter-spacing: .01em;
}
.fc-btn-forgot { background: #fff1f2; color: var(--bad-dark); border: 2px solid var(--bad); }
.fc-btn-knew   { background: #f0fdf4; color: var(--good-dark); border: 2px solid var(--good); }
.fc-btn-forgot:hover { background: var(--bad); color: #fff; }
.fc-btn-knew:hover   { background: var(--good); color: #fff; }
.fc-btn-forgot:active, .fc-btn-knew:active { transform: scale(.97); }
[data-theme="dark"] .fc-btn-forgot { background: rgba(244,63,94,.1);  color: #fca5a5; border-color: var(--bad); }
[data-theme="dark"] .fc-btn-knew   { background: rgba(16,185,129,.1); color: #6ee7b7; border-color: var(--good); }
[data-theme="dark"] .fc-back { border-color: var(--good); }

/* -- Mock exam ----------------------------------------------------- */
.mock-timer { font-weight: 800; color: var(--primary-dark); }
.mock-answer-key { border-color: var(--warn); background: #fffbeb; }
.answer-line { display: inline-block; border-bottom: 1px solid #000; min-width: 120px; height: 18pt; vertical-align: bottom; }
.answer-box { border: 1px solid #000; min-height: 60pt; padding: 6pt; margin: 4pt 0; }

/* -- Theme toggle -------------------------------------------------- */
.sb-theme-btn {
  margin-left: auto; flex-shrink: 0;
  background: none; border: 1px solid var(--line);
  border-radius: 50%; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: .9rem;
  transition: background .15s;
}
.sb-theme-btn:hover { background: var(--line-light); }
.sb-theme-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* -- Mobile header bar --------------------------------------------- */
/* Hidden on desktop; becomes a full-width sticky bar on mobile */
.mobile-menu-btn {
  display: none;
}
.nav-overlay { display: none; }

/* -- Utility ------------------------------------------------------- */
.row { display: flex; gap: .5em; align-items: baseline; flex-wrap: wrap; }
.daily-queue { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.skip-link { position: absolute; top: -40px; left: 0; background: var(--primary); color: #fff; padding: 6px 12px; z-index: 999; }
.skip-link:focus { top: 0; }
.section { display: none; }
.section.active { display: block; animation: fadeIn .25s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.print-only { display: none; }
.worksheet-header { display: none; }

/* -- Dark mode ----------------------------------------------------- */
[data-theme="dark"] {
  --bg:           #0f172a;
  --panel:        #1e293b;
  --ink:          #f1f5f9;
  --ink-2:        #cbd5e1;
  --muted:        #94a3b8;
  --muted-2:      #64748b;
  --line:         #334155;
  --line-light:   #1e293b;
  --primary-bg:   #1e1b4b;
  --primary-text: #818cf8;
}

/* Dark mode overrides for hardcoded light backgrounds */
[data-theme="dark"] .bilingual > div:first-child {
  background: var(--panel);
  border-color: var(--line);
}
[data-theme="dark"] .callout      { background: rgba(100,116,139,.15); border-color: var(--line); }
[data-theme="dark"] .callout.tip  { background: rgba(16,185,129,.12);  border-color: rgba(16,185,129,.35); }
[data-theme="dark"] .callout.info { background: rgba(99,102,241,.12);  border-color: rgba(99,102,241,.35); }
[data-theme="dark"] .callout.warn { background: rgba(245,158,11,.12);  border-color: rgba(245,158,11,.35); }
[data-theme="dark"] .callout.error{ background: rgba(244,63,94,.12);   border-color: rgba(244,63,94,.35);  }
[data-theme="dark"] .callout strong { color: var(--ink); }
[data-theme="dark"] tr.irregular td { background: rgba(245,158,11,.08); }
[data-theme="dark"] tr.highlight td { background: rgba(16,185,129,.08); }
[data-theme="dark"] .quiz-q input.correct { background: rgba(16,185,129,.15); }
[data-theme="dark"] .quiz-q input.wrong   { background: rgba(244,63,94,.15);  }
[data-theme="dark"] .practice-fb-correct  { color: #6ee7b7; background: rgba(16,185,129,.15); }
[data-theme="dark"] .practice-fb-wrong    { color: #fca5a5; background: rgba(244,63,94,.15);  }

/* -- Print --------------------------------------------------------- */
@page { size: A4; margin: 18mm 16mm; }
@media print {
  body { background: #fff; font-size: 11.5pt; color: #000; font-family: 'Times New Roman', serif; }
  nav#sidebar, .no-print, .btn { display: none !important; }
  #app { display: block; }
  main { padding: 0; max-width: none; }
  .card { box-shadow: none; border: 1px solid #999; break-inside: avoid; page-break-inside: avoid; margin: 10px 0; }
  .bilingual > div { background: #fff; border: 1px solid #ccc; }
  table { border: 1px solid #000; }
  th, td { border-bottom: 1px solid #000; }
  th { background: #eee !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  h1 { font-size: 18pt; } h2 { font-size: 14pt; page-break-after: avoid; } h3 { font-size: 12pt; page-break-after: avoid; }
  .page-break { page-break-before: always; }
  .print-only { display: block !important; }
  .worksheet-header { border-bottom: 2px solid #000; padding-bottom: 6pt; margin-bottom: 12pt; display: flex !important; justify-content: space-between; font-size: 10pt; }
  .worksheet-header strong { font-size: 14pt; }
  details { break-inside: avoid; border: 1px solid #000; }
  details > summary { font-weight: bold; }
  details > *:not(summary) { display: block !important; }
}

/* -- Mobile -------------------------------------------------------- */
@media (max-width: 768px) {
  /* Single column layout */
  #app { grid-template-columns: 1fr; }
  nav#sidebar       { grid-column: 1; grid-row: 1; }
  main#main-content { grid-column: 1; grid-row: 1; padding: 72px 18px 60px; max-width: 100%; min-width: 0; }

  /* Sidebar: off-screen left, slides in when .open */
  nav#sidebar {
    position: fixed; top: 0; left: -280px; width: 280px;
    height: 100vh; z-index: 250;
    transition: left .25s ease;
    box-shadow: none;
  }
  nav#sidebar.open { left: 0; box-shadow: var(--shadow-md); }

  /* Show close button inside sidebar on mobile */
  .sb-close-btn { display: flex; }

  /* ── Mobile top nav bar ───────────────────────────────────────────
     Full-width, flat, flush to top — clean standard mobile pattern.
     Note: #app > .mobile-menu-btn has height:0 for grid flow, so we
     must match that specificity here to override it visually. */
  #app > .mobile-menu-btn,
  .mobile-menu-btn {
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 300;
    height: 56px;
    padding: 0 16px;
    background: var(--panel);
    border: none;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--ink-2);
    box-shadow: 0 1px 6px rgba(0,0,0,.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    cursor: pointer;
    transition: background .15s;
    overflow: visible;
  }
  .mobile-menu-btn:active { background: var(--line-light); }

  /* App title centred absolutely so it doesn't shift with button width */
  .mobile-menu-btn::after {
    content: 'Deutsch Trainer';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: .9rem;
    font-weight: 800;
    letter-spacing: .01em;
    color: var(--ink);
    pointer-events: none;
    white-space: nowrap;
  }

  /* Main content clears the 56px bar + 8px breathing room */
  main#main-content { padding-top: 68px; }



  /* Dim overlay behind sidebar */
  .nav-overlay {
    display: block;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 240;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
  }
  .nav-overlay.visible { opacity: 1; pointer-events: all; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}
/* -- Grammar Hub -------------------------------------------------- */

/* Golden Rules */
.golden-rules-section { margin-bottom: 40px; }
.gr-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 12px; }
.gr-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.gr-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 4px solid var(--gr-color);
  border-radius: 12px;
  padding: 16px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gr-num { font-size: 1.5rem; font-weight: 800; color: var(--gr-color); opacity: 0.5; line-height: 1; }
.gr-title { font-weight: 700; font-size: 0.95rem; color: var(--ink); }
.gr-short { font-size: 0.8rem; color: var(--ink-2); line-height: 1.4; flex: 1; }
.gr-ex { font-size: 0.85rem; font-weight: 600; color: var(--primary); background: var(--primary-bg); padding: 4px 8px; border-radius: 6px; align-self: flex-start; }

/* Memory Tips */
.tips-section { margin-top: 48px; }
.tips-cat-block { margin-bottom: 32px; }
.tips-cat-label { 
  display: inline-block; padding: 4px 12px; border-radius: 20px; 
  background: var(--tc); color: #fff; font-size: 0.72rem; font-weight: 700; 
  text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 16px; 
}
.tips-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.tip-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s;
}
.tip-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.tip-top { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 20px; }
.tip-emoji { font-size: 2rem; }
.tip-meta { display: flex; flex-direction: column; gap: 2px; }
.tip-cat-badge { font-size: 0.65rem; font-weight: 700; color: var(--tc); text-transform: uppercase; }
.tip-title { font-size: 1.15rem; font-weight: 700; color: var(--ink); }

.tip-hook, .tip-rule { margin-bottom: 16px; }
.tip-hook-label, .tip-rule-label, .tip-ex-label { 
  display: block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; 
  letter-spacing: 0.05em; color: var(--muted); margin-bottom: 4px; 
}
.tip-hook-text { font-size: 0.9rem; color: var(--ink-2); font-style: italic; background: var(--line-light); padding: 10px; border-radius: 8px; border-left: 3px solid var(--tc); }
.tip-rule-text { font-size: 0.95rem; font-weight: 500; color: var(--ink); }

.tip-ex-list { display: flex; flex-direction: column; gap: 8px; }
.tip-ex-item { padding: 8px 12px; background: var(--bg); border-radius: 8px; border: 1px solid var(--line); }
.tip-ex-de { font-weight: 700; color: var(--ink); font-size: 0.9rem; }
.tip-ex-en { font-size: 0.85rem; color: var(--muted); }
.conn-en { font-size: 0.82rem; color: var(--muted); font-style: italic; }
.tip-ex-note { font-size: 0.75rem; color: var(--primary); font-weight: 500; margin-top: 2px; }

/* Modal Verb Bank */
.mv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 20px; margin-top: 20px; }
.mv-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.mv-header {
  padding: 16px 20px;
  background: var(--line-light);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.mv-level-badge {
  padding: 2px 6px; border-radius: 4px; font-size: 0.65rem; font-weight: 700;
  background: var(--ink); color: #fff;
}
.mv-verb { font-size: 1.25rem; font-weight: 700; color: var(--ink); }
.mv-en { font-size: 0.95rem; color: var(--muted); flex: 1; }
.mv-use { width: 100%; font-size: 0.8rem; color: var(--ink-2); display: flex; gap: 6px; align-items: center; }
.mv-use-lbl { font-weight: 700; color: var(--primary); text-transform: uppercase; font-size: 0.65rem; }

.mv-body { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.mv-conj { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mv-conj-cell { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid var(--line-light); }
.mv-pronoun { font-size: 0.8rem; color: var(--muted); font-weight: 500; }
.mv-form { font-size: 0.9rem; font-weight: 700; color: var(--ink); }

.mv-past { display: flex; flex-direction: column; gap: 4px; padding: 12px; background: var(--bg); border-radius: 8px; }
.mv-past-lbl { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; color: var(--muted); }
.mv-past-val { font-weight: 600; color: var(--ink); font-size: 0.9rem; margin-bottom: 4px; }

.mv-ex-lbl { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.mv-examples { margin: 0; padding-left: 18px; font-size: 0.85rem; color: var(--ink-2); }
.mv-examples li { margin-bottom: 4px; }

@media (max-width: 1024px) {
  .gr-strip { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .gr-strip { grid-template-columns: 1fr; }
  .tips-grid { grid-template-columns: 1fr; }
  .mv-grid { grid-template-columns: 1fr; }
  .reveal-keyboard-hint { display: none; }
}

/* ── Mobile responsive fixes ──────────────────────────────────────── */

/* FIX: Tables scroll horizontally only when they genuinely overflow.
   Cells wrap by default — no blanket white-space:nowrap.
   Column hiding removes the least-critical column from wide tables
   so most tables fit without scrolling at all. */
@media (max-width: 768px) {
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* No white-space:nowrap — let cells wrap naturally */
  }

  /* Compact cell padding on mobile for density */
  table th, table td {
    padding: 6px 8px;
    font-size: .82rem;
  }

  /* ── Vocab tables (A1–C2): hide Theme column (col 3) ─────────────
     Visible columns: Deutsch · English · Status (still 3 cols, fits) */
  [id$="-vocab"] table th:nth-child(3),
  [id$="-vocab"] table td:nth-child(3) { display: none; }

  /* ── Roadmap: hide "Time to ready" column (col 5) ────────────────
     Visible columns: Level · Hours · What you can do · Goethe Exam */
  #roadmap table th:nth-child(5),
  #roadmap table td:nth-child(5) { display: none; }

  /* ── Konnektoren: hide "Type" column (col 2) on 5-col tables ────────
     Hides the descriptive label (subordinating/coordinating/adverbial)
     which is optional context. Keeps "Word order" (col 4) visible —
     that column contains the exam-critical verb-placement rule. */
  #konnektoren table:has(th:nth-child(5)) th:nth-child(2),
  #konnektoren table:has(th:nth-child(5)) td:nth-child(2) { display: none; }
}

/* FIX: h1 font shrinks on mobile so titles don't orphan words */
@media (max-width: 768px) {
  h1 { font-size: 1.45rem; }
}

/* FIX: Article Trainer subtitle stays on one line */
@media (max-width: 480px) {
  #article-trainer h1 { font-size: 1.3rem; }
}

/* FIX: Flashcard Leitner box stat badges — flex row with wrapping */
[id$="-leitner-status"],
[id$="-leitner-stats"] {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

/* FIX: Dashboard daily-queue action buttons — 2-column grid on mobile */
@media (max-width: 600px) {
  .daily-queue {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .daily-queue .btn { text-align: center; width: 100%; }
}

/* FIX: Bilingual grid stacks on narrow mobile */
@media (max-width: 500px) {
  .bilingual { grid-template-columns: 1fr; }
}

/* ── details/summary: suppress browser native disclosure triangle ─── */
/* Keeps only our custom ▶ (▶) — prevents double-arrow on Hören */
details summary { list-style: none; }
details summary::-webkit-details-marker { display: none; }

/* ── Back-to-top FAB ───────────────────────────────────────────────── */
.back-to-top-btn {
  display: none;
  position: fixed;
  bottom: 24px;
  right: 16px;
  z-index: 200;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  border: none;
  font-size: 1.3rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s;
  line-height: 1;
}
.back-to-top-btn.visible {
  opacity: 1;
  pointer-events: all;
}
/* Show FAB on mobile; also on desktop for long pages (Grammar Hub etc.) */
@media (max-width: 768px) {
  .back-to-top-btn { display: flex; }
}
@media (min-width: 769px) {
  .back-to-top-btn {
    display: flex;
    bottom: 32px;
    right: 32px;
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
    opacity: 0;
    pointer-events: none;
  }
  .back-to-top-btn.visible { opacity: .8; pointer-events: all; }
  .back-to-top-btn.visible:hover { opacity: 1; transform: translateY(-2px); }
}

/* ── AI Features ─────────────────────────────────────────────────────────── */
.ai-thinking { color: var(--muted); font-style: italic; }
.tutor-chip { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 7px 12px; font-size: .82rem; color: var(--ink-2); cursor: pointer; text-align: left; transition: border-color .15s, background .15s; }
.tutor-chip:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-bg); }
.tutor-chip.used { border-color: var(--good); color: var(--good); }

.wc-badge { font-size: 0.82rem; color: var(--muted); margin-top: 6px; min-height: 1.2em; }
.wc-badge.ok { color: var(--good); font-weight: 600; }
.wc-badge.warn { color: var(--warn); }

/* Chat window */
.chat-messages {
  height: 360px; overflow-y: auto; padding: 14px 16px;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 10px 10px 0 0; display: flex; flex-direction: column; gap: 10px;
}
.chat-bubble {
  max-width: 78%; padding: 10px 14px; border-radius: 14px;
  line-height: 1.6; font-size: 0.93rem; word-wrap: break-word; white-space: pre-wrap;
}
.chat-bubble.user {
  background: var(--primary); color: #fff;
  align-self: flex-end; border-bottom-right-radius: 4px;
}
.chat-bubble.ai {
  background: var(--panel); border: 1px solid var(--line);
  align-self: flex-start; border-bottom-left-radius: 4px; color: var(--ink);
}
.chat-bubble.thinking { color: var(--muted); font-style: italic; }

.chat-input-row {
  display: flex; gap: 8px; padding: 10px 12px;
  background: var(--panel); border: 1px solid var(--line);
  border-top: none; border-radius: 0 0 10px 10px;
}
.chat-input-row textarea {
  flex: 1; padding: 8px 12px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg);
  color: var(--ink); font-family: inherit; font-size: 0.93rem;
  resize: none; line-height: 1.5; min-height: 38px;
}

/* Scenario pills */
.chat-scenarios { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.chat-scenario-pill {
  padding: 6px 14px; border-radius: 99px; font-size: 0.85rem; cursor: pointer;
  border: 1.5px solid var(--line); background: var(--bg); color: var(--ink);
  transition: background .15s, color .15s, border-color .15s;
}
.chat-scenario-pill.active,
.chat-scenario-pill:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

@media (max-width: 480px) {
  .chat-bubble { max-width: 92%; }
  .chat-messages { height: 300px; }
}

/* Story builder */
.story-area {
  max-height: 360px; overflow-y: auto; padding: 16px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px 10px 0 0;
  display: flex; flex-direction: column; gap: 10px;
}
.story-line {
  padding: 10px 14px; border-radius: 12px; line-height: 1.7;
  font-size: 0.94rem; white-space: pre-wrap; word-wrap: break-word;
}
.story-line.ai {
  background: var(--panel); border: 1px solid var(--line);
  align-self: flex-start; border-bottom-left-radius: 4px; max-width: 88%;
}
.story-line.user {
  background: var(--primary); color: #fff;
  align-self: flex-end; border-bottom-right-radius: 4px; max-width: 80%;
}
.story-line.thinking { color: var(--muted); font-style: italic; }
.story-input-row {
  display: flex; gap: 8px; padding: 10px 12px;
  background: var(--panel); border: 1px solid var(--line); border-top: none;
  border-radius: 0 0 10px 10px;
}
.story-input-row textarea {
  flex: 1; padding: 8px 12px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg);
  color: var(--ink); font-family: inherit; font-size: 0.93rem; resize: none;
}

/* Voice recording active state */
.btn-recording { background: var(--bad) !important; border-color: var(--bad) !important; }

/* ── Level Picker ─────────────────────────────────────────────── */
.sb-level-picker { padding: 10px 12px 8px; border-bottom: 1px solid var(--line); }
.sb-level-picker-label { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 6px; }
.sb-level-picker-pills { display: flex; gap: 4px; flex-wrap: wrap; }
.lp-pill { padding: 3px 8px; border-radius: 20px; font-size: 12px; font-weight: 700; border: 2px solid transparent; cursor: pointer; background: var(--panel); color: var(--ink-2); transition: all .15s; }
.lp-pill:hover:not(.active) { border-color: var(--primary); color: var(--primary); }
.lp-pill.active { color: #fff; }
.lp-pill.A1.active { background: var(--A1); border-color: var(--A1); }
.lp-pill.A2.active { background: var(--A2); border-color: var(--A2); }
.lp-pill.B1.active { background: var(--B1); border-color: var(--B1); }
.lp-pill.B2.active { background: var(--B2); border-color: var(--B2); }
.lp-pill.C1.active { background: var(--C1); border-color: var(--C1); }
.lp-pill.C2.active { background: var(--C2); border-color: var(--C2); }

/* ── Level gating ─────────────────────────────────────────────── */
.sb-level-row.level-current { background: rgba(99,102,241,.08); border-radius: 8px; }
.sb-level-row.level-current .sb-level-name { font-weight: 700; }
.sb-level-row.level-previous .sb-chevron::after { content: ' ✓'; color: var(--good); font-size: 11px; }
.sb-level-row.level-next .sb-level-name::after { content: ' 👁'; font-size: 11px; }
.sb-level-row.level-locked { opacity: .38; pointer-events: none; }
.sb-sub-links.level-locked-content { display: none !important; }

/* ── Trainer dashboard card ───────────────────────────────────── */
.dash-level-progress { margin: 8px 0 10px; }
.dash-pb-track { background: var(--line-light); border-radius: 20px; height: 6px; overflow: hidden; }
.dash-pb-fill { height: 100%; border-radius: 20px; transition: width .4s; }
.dash-pb-label { font-size: .75rem; color: var(--muted); margin-top: 3px; }
.trainer-focus-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px 22px; margin-bottom: 20px; border-top: 3px solid var(--primary); }
.trainer-focus-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.trainer-focus-title { font-weight: 700; font-size: 1rem; }
.trainer-focus-links { display: flex; gap: 7px; flex-wrap: wrap; }
.trainer-level-badge { font-size: 13px; padding: 4px 10px; border-radius: 20px; font-weight: 700; color: #fff; }

/* ── AI Hören widget ──────────────────────────────────────────── */
.ai-horen-widget { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px 22px; margin-top: 24px; }
.ai-horen-widget h3 { margin: 0 0 10px; font-size: 1rem; }
.ai-horen-qa { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.ai-horen-q { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; }
.ai-horen-q p { margin: 0 0 8px; font-weight: 600; }
.ai-horen-answer { display: flex; gap: 6px; flex-wrap: wrap; }
.ai-horen-answer button { padding: 5px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer; font-size: .88rem; transition: all .15s; }
.ai-horen-answer button.correct { background: var(--good) !important; border-color: var(--good) !important; color: #fff !important; }
.ai-horen-answer button.wrong { background: var(--bad) !important; border-color: var(--bad) !important; color: #fff !important; }
.ai-horen-tts-bar { display: flex; align-items: center; gap: 10px; padding: 8px 0 4px; }

/* ── Level Test ───────────────────────────────────────────────── */
.lt-question { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px 20px; margin-bottom: 12px; }
.lt-question p { margin: 0 0 10px; font-weight: 600; font-size: .95rem; }
.lt-options { display: flex; flex-direction: column; gap: 5px; }
.lt-options button { text-align: left; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer; font-size: .9rem; transition: all .15s; }
.lt-options button:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.lt-options button.lt-selected { border-color: var(--primary); color: var(--primary); font-weight: 600; }
.lt-options button.lt-correct { background: var(--good) !important; border-color: var(--good) !important; color: #fff !important; }
.lt-options button.lt-wrong { background: var(--bad) !important; border-color: var(--bad) !important; color: #fff !important; }
.lt-result-card { background: var(--panel); border: 2px solid var(--primary); border-radius: 12px; padding: 28px; text-align: center; margin: 20px 0; }
.lt-score-big { font-size: 2.8rem; font-weight: 800; color: var(--primary); line-height: 1; }

/* ── AI toast ─────────────────────────────────────────────────── */
#ai-toast { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 9px 20px; border-radius: 20px; font-size: .88rem; z-index: 9999; transition: opacity .3s; pointer-events: none; opacity: 0; white-space: nowrap; }

/* ── Onboarding banner ────────────────────────────────────────── */
.onboarding-banner { background: linear-gradient(135deg, rgba(99,102,241,.08), rgba(99,102,241,.03)); border: 1px solid var(--primary); border-radius: 12px; padding: 18px 20px; margin-bottom: 20px; position: relative; }
.onboarding-title { font-weight: 700; font-size: 1rem; margin-bottom: 12px; }
.onboarding-steps { display: flex; gap: 12px; flex-wrap: wrap; }
.onboarding-step { flex: 1; min-width: 200px; display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; }
.ob-num { width: 28px; height: 28px; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 700; font-size: .88rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.onboarding-step > div:not(.ob-num) { flex: 1; font-size: .88rem; line-height: 1.4; }
.onboarding-step > div:not(.ob-num) span { color: var(--muted); font-size: .82rem; }
.ob-dismiss { position: absolute; top: 10px; right: 12px; background: none; border: none; color: var(--muted); cursor: pointer; font-size: 1rem; padding: 2px 6px; }
.ob-dismiss:hover { color: var(--ink); }

/* ── Chat starter chips ───────────────────────────────────────── */
.chat-chip { padding: 4px 11px; border-radius: 20px; border: 1px solid var(--line); background: var(--bg); color: var(--ink-2); font-size: .82rem; cursor: pointer; transition: all .15s; white-space: nowrap; }
.chat-chip:hover { border-color: var(--primary); color: var(--primary); background: var(--panel); }

/* ── Sidebar Level Test pin + roadmap bottom ──────────────────── */
.sb-level-test-pin { color: var(--primary) !important; font-weight: 600; }
.sb-level-test-pin .nav-icon { font-size: 1rem; }
.sb-roadmap-link { margin-top: 6px; color: var(--muted) !important; font-size: .88rem; border-top: 1px solid var(--line); padding-top: 8px !important; }

/* ── UX Audit Fixes ──────────────────────────────────────────────────── */

/* Fix #4: C2 level pill — prevent wrap, all 6 on one row */
.sb-level-picker-pills { flex-wrap: nowrap; }
.lp-pill { padding: 2px 6px; font-size: 11px; min-width: 0; cursor: pointer; user-select: none; }

/* Fix #21: Sidebar subtitle — more legible */
.sb-sub { color: var(--muted); }

/* Fix #15: Progress bar — tiny indicator even at 0% so bar renders */
.progress > div, .progress.green > div { min-width: 4px; }

/* Fix #5 + #24: Bilingual blocks — compact on mobile, reduce viewport cost */
@media (max-width: 600px) {
  .section > .bilingual { margin-top: 0; margin-bottom: 8px; }
  .bilingual > div { padding: 8px 12px; font-size: .83rem; }
}

/* Fix #6: Scenario chips — horizontal scroll on mobile, no 5-row wrap */
@media (max-width: 600px) {
  .chat-scenarios { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .chat-scenarios::-webkit-scrollbar { height: 3px; }
  .chat-scenarios::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }
  .chat-chip { white-space: nowrap; }
  #chat-starter-chips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Fix #7: Story input — prevent placeholder truncation on mobile */
.story-input-row { flex-wrap: nowrap; }
.story-input-row textarea { min-width: 0; }

/* Fix #11: Onboarding steps — single column below 640px (tablet cramping fix) */
@media (max-width: 640px) {
  .onboarding-steps { flex-direction: column; gap: 8px; }
  .onboarding-step { min-width: 0; }
}

/* Fix #9: Vocab table — compact status column on mobile */
@media (max-width: 480px) {
  [id$="-vocab"] table td:last-child { width: 58px; padding: 4px 6px; }
  [id$="-vocab"] table td:last-child .btn { font-size: .72rem; padding: 4px 7px; white-space: nowrap; }
  .vocab-mark-word { display: none; }
}

/* Fix #1: Chat messages — flexible sizing + empty state */
.chat-messages { min-height: 160px; }
.chat-no-key-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; height: 100%; min-height: 200px; padding: 24px; text-align: center;
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px 10px 0 0;
}
.chat-no-key-icon { font-size: 2.2rem; margin-bottom: 4px; }
.chat-no-key-title { font-weight: 600; font-size: 1rem; color: var(--ink); }
.chat-no-key-sub { font-size: .88rem; color: var(--muted); margin-bottom: 8px; }

/* Fix #2: Level test landing */
.lt-landing { text-align: center; padding: 40px 20px 24px; }
.lt-what-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 20px 0 16px; }
.lt-what-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px; background: var(--line-light); border: 1px solid var(--line);
  border-radius: 20px; font-size: .85rem; color: var(--ink-2);
}
.lt-sections-preview { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 16px 0 24px; }
.lt-sec-chip { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; font-size: .88rem; }
.lt-sec-chip span { color: var(--muted); font-size: .8rem; }

/* Level test sections */
.lt-section-block { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 0; margin-bottom: 20px; overflow: hidden; }
.lt-section-header { background: var(--line-light); border-bottom: 1px solid var(--line); padding: 10px 18px; font-weight: 700; font-size: .95rem; color: var(--ink); }
.lt-text-block { background: var(--bg); border-bottom: 1px solid var(--line); padding: 14px 18px; font-size: .9rem; line-height: 1.7; color: var(--ink-2); }
.lt-transcript { font-style: italic; }
.lt-section-block .lt-question { margin: 0; border-radius: 0; border-left: none; border-right: none; border-top: none; border-bottom: 1px solid var(--line); }
.lt-section-block .lt-question:last-child { border-bottom: none; }
.lt-lvl-tag { font-size: .72rem; font-weight: 700; color: #fff; border-radius: 4px; padding: 1px 6px; margin-right: 6px; display: inline-block; vertical-align: middle; }
.lt-q-num { color: var(--muted); font-size: .88rem; margin-right: 3px; }
.lt-writing-area { width: 100%; padding: 12px 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: .95rem; line-height: 1.6; resize: vertical; margin-top: 4px; }
.lt-writing-area:focus { outline: none; border-color: var(--primary); }
.lt-section-block .callout { margin: 12px 18px; border-radius: 8px; }
.lt-section-block .lt-writing-area { margin: 0 18px 4px; width: calc(100% - 36px); }
#lt-word-count { padding: 0 18px 12px; }

/* Fix #13: Grammar hub golden rules — 2-col on tablet (not 3) */
@media (max-width: 1100px) and (min-width: 769px) {
  .gr-strip { grid-template-columns: repeat(2, 1fr); }
}

/* Fix #26 + #8: Quiz step-by-step layout */
.quiz-step-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.quiz-step-label { font-size: .82rem; color: var(--muted); white-space: nowrap; flex-shrink: 0; }
.quiz-summary-card {
  text-align: center; padding: 36px 24px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
}
.quiz-score-big { font-size: 3.2rem; font-weight: 800; color: var(--primary); line-height: 1; }
.quiz-score-emoji { font-size: 2rem; margin-bottom: 8px; }

/* Fix #18: Roadmap current-level row highlight */
#roadmap .roadmap-current td { background: rgba(99,102,241,.06); font-weight: 600; }
#roadmap .roadmap-current td:first-child { border-left: 3px solid var(--primary); padding-left: 10px; }

/* Fix #14: Flashcard — hint when no session started */
.fc-empty-hint { text-align: center; padding: 20px; color: var(--muted); font-size: .9rem; }

/* Fix #27: API-key-required callout — consistent across features */
.api-key-callout {
  display: flex; align-items: flex-start; gap: 12px;
  background: #fffbeb; border: 1px solid #fdba74;
  border-radius: var(--radius-sm); padding: 14px 16px;
  font-size: .9rem; margin: 12px 0;
}
.api-key-callout-icon { font-size: 1.3rem; flex-shrink: 0; }
.api-key-callout-body strong { display: block; font-weight: 700; margin-bottom: 3px; }

/* Fix #16: Chat Level badge — looks interactive */
.chat-level-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 20px;
  background: var(--primary); color: #fff;
  font-size: .82rem; font-weight: 700;
}

/* Fix #20: Grammar hub — improve card grid spacing */
.gr-card { padding: 14px 16px; gap: 6px; }

/* Fix #3: Dashboard mobile — ensure Focus card isn't clipped at top */
@media (max-width: 768px) {
  .trainer-focus-card { scroll-margin-top: 68px; }
}

/* Fix #10: Dashboard level cards — less aggressive dimming (in JS, but CSS fallback) */
#dashboard-level-grid .card { transition: opacity .3s, filter .3s; }

[data-theme="dark"] .api-key-callout { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.35); }
[data-theme="dark"] .chat-no-key-state { background: var(--panel); }

/* ── Bilingual Reader (Todaii-style) ─────────────────────────────── */
.br-article { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.br-title { font-size: 1rem; font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.br-hint { font-size: .78rem; color: var(--muted); margin: 0 0 12px; }
.br-pair { margin-bottom: 1px; }
.br-de {
  font-size: .95rem; line-height: 1.75;
  padding: 5px 10px 5px 14px;
  border-left: 3px solid transparent;
  border-radius: 4px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.br-de:hover { border-color: var(--primary); background: var(--primary-bg); }
.br-pair.open .br-de { border-color: var(--primary); background: var(--primary-bg); }
.br-en {
  display: none;
  font-size: .83rem; color: var(--muted); font-style: italic;
  line-height: 1.55; padding: 2px 10px 7px 30px;
}
.br-pair.open .br-en { display: block; }
[data-theme="dark"] .br-pair.open .br-de { background: rgba(99,102,241,.12); }

/* ── On-demand translate button (chat + story) ───────────────────── */
.bubble-translate-btn {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 5px; padding: 2px 0;
  font-size: .73rem; color: var(--muted);
  background: none; border: none; cursor: pointer;
  line-height: 1;
}
.bubble-translate-btn:hover { color: var(--primary); }
.bubble-en {
  margin-top: 4px; font-size: .83rem; color: var(--muted);
  font-style: italic; line-height: 1.5;
  border-left: 2px solid var(--line); padding-left: 8px;
}