/* =====================================================================
   0. Design tokens & fonts
   ===================================================================== */
:root {
  --c-charcoal: #2D2926;
  --c-cream: #FAF7F2;
  --c-terracotta: #C75B39;
  --c-sage: #6B8F71;
  --c-gold: #D4A843;
  --c-blue: #5B7F9E;
  --c-border: #E8E2D9;
  --c-text: #3D3833;
  --c-text-muted: #8A8279;
  --c-surface: #F3EDE4;
  --f-serif: 'Lora', 'Source Serif 4', 'Georgia', serif;
  --f-sans: 'Inter', system-ui, -apple-system, sans-serif;
}

@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lora/v35/0QI6MX1D_JOuGQbT0gvTJPa787weuxJBkq0.woff2) format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfAZ9hjQ.woff2) format('woff2');
}

/* =====================================================================
   1. Reset & Base
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--f-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--c-text);
  background: var(--c-cream);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--f-serif); font-weight: 600; }

/* =====================================================================
   2. Layout: site-container, nav
   ===================================================================== */
.site-container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

nav {
  border-bottom: 2px solid var(--c-border);
  font-size: 15px;
  background: #fff;
}

nav .site-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  align-items: center;
}

nav a { color: var(--c-text-muted); text-decoration: none; padding: 0.3rem 0; }
nav a:hover { color: var(--c-charcoal); }
nav a.active { color: var(--c-charcoal); font-weight: 600; }

.nav-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-left: 1rem;
  border-left: 1px solid var(--c-border);
}

a.student-name {
  font-weight: 600;
  color: var(--c-charcoal);
  text-decoration: none;
}
a.student-name:hover { color: var(--c-terracotta); }

.nav-lang-badge {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-text-muted);
  text-decoration: none;
  border: 1px solid var(--c-border);
  border-radius: 4px;
  padding: 0.15rem 0.5rem;
}
.nav-lang-badge:hover { color: var(--c-terracotta); border-color: var(--c-terracotta); }

.nav-logout {
  padding: 0.3rem 0.75rem;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background: transparent;
  color: var(--c-text-muted);
  cursor: pointer;
}
.nav-logout:hover { background: var(--c-surface); color: var(--c-text); }

/* Hamburger — hidden on desktop */
.nav-hamburger { display: none; }
.nav-links { display: contents; }

.site-footer {
  margin-top: 3rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--c-border);
  font-size: 0.78rem;
  color: var(--c-text-muted);
  text-align: center;
}
.site-footer a { color: var(--c-text-muted); text-decoration: none; }
.site-footer a:hover { color: var(--c-charcoal); }

/* =====================================================================
   3. Form elements: button, input
   ===================================================================== */
button {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background: var(--c-surface);
  color: var(--c-text);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

button:hover { background: var(--c-cream); }
button:disabled { background: #c4bfb6; cursor: not-allowed; color: #fff; }

input[type="text"] {
  flex: 1;
  padding: 0.4rem 0.6rem;
  font-size: 16px;
  border: 1px solid var(--c-border);
  border-radius: 4px;
  outline: none;
  background: #fff;
}

input[type="text"]:focus { border-color: var(--c-terracotta); }

/* Prevent iOS zoom on focus for all form inputs */
input[type="email"], input[type="password"], input[type="search"],
textarea, select {
  font-size: 16px;
}

/* =====================================================================
   4. Shared components
   ===================================================================== */

/* Vocab word underline */
.vocab-word {
  border-bottom: 1px dashed var(--c-text-muted);
  cursor: help;
}

/* Click-to-reveal translations */
.translation-toggle {
  filter: blur(4px);
  cursor: pointer;
  transition: filter 0.15s;
  user-select: none;
  color: var(--c-text-muted);
  font-size: 0.9em;
}
.translation-toggle.revealed {
  filter: none;
  cursor: default;
  user-select: auto;
}

/* Shared popup base */
.popup {
  position: fixed;
  display: none;
  z-index: 100;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  padding: 0.6rem 0.85rem;
  pointer-events: auto;
}

/* Vocab tooltip */
#vocab-tooltip {
  max-width: 300px;
}

#vocab-tooltip .tt-header {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-bottom: 0.15rem;
}

#vocab-tooltip .tt-word { font-weight: 600; font-size: 1em; }
#vocab-tooltip .tt-pos { font-size: 0.78em; color: var(--c-text-muted); font-style: italic; }
#vocab-tooltip .tt-syllabization { font-size: 0.8em; color: var(--c-text-muted); margin-bottom: 0.2rem; }
#vocab-tooltip .tt-senses { font-size: 0.82em; color: var(--c-text); margin-bottom: 0.2rem; }
#vocab-tooltip .tt-sense { margin-bottom: 0.25rem; }
#vocab-tooltip .tt-sense:last-child { margin-bottom: 0; }
#vocab-tooltip .tt-sense-translation { font-size: 0.88em; color: var(--c-text-muted); font-style: italic; }
#vocab-tooltip .tt-example { font-size: 0.9em; color: var(--c-text-muted); font-style: italic; padding-left: 0.6rem; }
#vocab-tooltip .tt-translation { font-size: 0.82em; color: var(--c-text-muted); font-style: italic; }
#vocab-tooltip .tt-more { display: block; font-size: 0.78em; color: var(--c-blue); text-decoration: none; margin-top: 0.3rem; }
#vocab-tooltip .tt-more:hover { text-decoration: underline; }

/* Drill feedback */
.feedback-block { margin-bottom: 1rem; }

.feedback-correction {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 0.65rem;
}

.feedback-correction blockquote {
  margin: 0;
  padding: 0.45rem 0.85rem;
  border-radius: 0 5px 5px 0;
  font-size: 0.95rem;
  line-height: 1.5;
}

.answer-wrong {
  border-left: 3px solid #f87171;
  background: #fff5f5;
  color: #7f1d1d;
  text-decoration: line-through;
  text-decoration-color: #f87171;
}

.answer-correct {
  border-left: 3px solid #4ade80;
  background: #f0fdf4;
  color: #14532d;
}

.feedback-explanation { font-size: 0.88rem; color: var(--c-text-muted); margin: 0 0 0.25rem; line-height: 1.55; }

.rule-refs { margin-bottom: 1rem; }
.rule-ref {
  font-size: 0.8rem;
  color: var(--c-text-muted);
  padding: 0.2rem 0.6rem;
  background: var(--c-surface);
  border-left: 2px solid var(--c-border);
  margin-bottom: 0.3rem;
  border-radius: 0 4px 4px 0;
}

/* Vocab card (vocab-practice & lezione-activity-vocab) */
.card {
  border: 1px solid var(--c-border);
  border-radius: 10px;
  padding: 2rem;
  background: #fff;
}

#practice-card { max-width: 480px; margin: 2rem auto; }

.card-queue { font-size: 0.75rem; color: var(--c-text-muted); margin-bottom: 1.25rem; }
.word  { font-size: 2rem; font-weight: 600; margin-bottom: 0.5rem; }
.pos   { font-size: 0.85rem; color: var(--c-text-muted); margin-bottom: 1.5rem; }
.clue  { font-size: 1.1rem; color: var(--c-text); margin-bottom: 1.5rem; line-height: 1.6; }
.prompt { font-size: 0.8rem; color: var(--c-text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.75rem; }
.back  { margin: 1.5rem 0; border-top: 1px solid var(--c-border); padding-top: 1.5rem; }
.translation { font-size: 1.15rem; font-weight: 600; margin-bottom: 0.75rem; }
.senses { text-align: left; margin: 0.5rem 0 0; padding-left: 1.25rem; font-size: 0.9rem; color: var(--c-text); }
.senses li { margin-bottom: 0.4rem; }
.sense-def { color: var(--c-charcoal); }
.sense-ex { font-style: italic; color: var(--c-text-muted); font-size: 0.9em; margin-top: 0.1rem; }
.sense-line { margin-bottom: 0.3rem; font-size: 0.95rem; }
.sense-tr { font-weight: 600; }
.sense-line .sense-ex { display: inline; margin-top: 0; }
.sense-line .sense-ex::before { content: ": "; font-style: normal; }
.rating-buttons { display: flex; gap: 0.5rem; justify-content: center; margin-top: 1rem; flex-wrap: wrap; }
.btn-incorrect {
  background: var(--c-terracotta) !important;
  color: #fff !important;
  border-color: var(--c-terracotta) !important;
  border-radius: 6px;
}
.btn-incorrect:hover { background: #B5492D !important; }
.btn-correct {
  background: var(--c-sage) !important;
  color: #fff !important;
  border-color: var(--c-sage) !important;
  border-radius: 6px;
}
.btn-correct:hover { background: #5a7d60 !important; }

/* Remove button on vocab entry page */
.btn-remove {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.3rem 0.75rem;
  font-size: 13px;
  font-weight: 600;
  background: transparent;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  color: var(--c-text-muted);
  cursor: pointer;
}
.btn-remove:hover { background: var(--c-surface); color: var(--c-terracotta); border-color: var(--c-terracotta); }

/* Lesson progress bar */
.lesson-progress { padding: 1rem 0 0; margin-bottom: 1.5rem; }
.progress-bar { height: 4px; background: var(--c-border); border-radius: 2px; overflow: hidden; margin-bottom: 0.4rem; }
.progress-fill { height: 100%; background: var(--c-terracotta); border-radius: 2px; transition: width 0.3s ease; }
.progress-footer { display: flex; justify-content: space-between; align-items: center; }
.progress-label { font-size: 0.75rem; color: var(--c-text-muted); }
.abandon-link { background: none; border: none; cursor: pointer; font-size: 0.7rem; color: var(--c-text-muted); padding: 0; opacity: 0.6; }
.abandon-link:hover { opacity: 1; text-decoration: underline; }

/* Segmented progress bar */
.progress-segments { display: flex; gap: 3px; height: 10px; margin-bottom: 0.35rem; }
.progress-seg { flex: 1; border-radius: 5px; background: var(--c-border); transition: opacity 0.15s; }
.progress-seg.completed { background: var(--c-sage); }
.progress-seg.current { background: var(--c-terracotta); animation: seg-pulse 2s ease-in-out infinite; }
a.progress-seg { display: block; text-decoration: none; cursor: pointer; }
a.progress-seg:hover { opacity: 0.75; }
/* Grammar activities stand out in the progress bar */
.progress-seg.grammar-seg { box-shadow: 0 0 0 2px var(--c-terracotta); }
.progress-seg.grammar-seg.completed { background: var(--c-terracotta); opacity: 0.55; cursor: pointer; }
.progress-seg.grammar-seg.completed:hover { opacity: 0.8; }
.progress-seg.grammar-seg.current { background: var(--c-terracotta); opacity: 1; }
@keyframes seg-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(199, 91, 57, 0.3); }
  50% { box-shadow: 0 0 0 3px rgba(199, 91, 57, 0.15); }
}

/* Scoring-unavailable banner */
.result-unavailable {
  position: relative;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-gold);
  border-radius: 6px;
  padding: 1.25rem 1.25rem 1.25rem 1.25rem;
  margin-bottom: 1.5rem;
  font-size: 0.88rem;
  color: var(--c-text);
  line-height: 1.55;
}
.result-unavailable::before {
  content: '';
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  margin-bottom: 0.6rem;
  background: var(--c-gold);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") center / contain no-repeat;
}


/* Review banner */
.review-banner { margin-top: 1.75rem; text-align: center; }
.review-banner .continue-btn + .continue-btn { margin-left: 0.75rem; }

/* Shared action buttons */
.submit-btn, .continue-btn, .reveal-btn {
  display: inline-block;
  padding: 0.5rem 1.2rem;
  font-size: 0.9rem;
  font-weight: 600;
  background: var(--c-terracotta);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
}
.submit-btn:hover, .continue-btn:hover, .reveal-btn:hover { background: #B5492D; }

/* Skip link */
.skip-link { font-size: 0.8rem; color: var(--c-text-muted); text-decoration: none; }
.skip-link:hover { color: var(--c-terracotta); }

/* Back link (breadcrumb) */
.back-link { display: inline-block; margin-bottom: 1rem; font-size: 0.85rem; color: var(--c-text-muted); text-decoration: none; }
.back-link:hover { color: var(--c-charcoal); }

/* Card label / section heading */
.card-label, .reading-title, .questions-title {
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-text-muted);
  margin-bottom: 0.5rem;
}

/* Grammar content */
.grammar-content { font-size: 0.95rem; line-height: 1.75; color: var(--c-text); }

.grammar-content h1,
.grammar-content h2,
.grammar-content h3 {
  font-family: var(--f-sans);
  font-weight: 600;
  color: var(--c-charcoal);
  margin: 1.75rem 0 0.5rem;
}
.grammar-content h2 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--c-text-muted); }
.grammar-content h3 { font-size: 0.95rem; }

.grammar-content h1:first-child,
.grammar-content h2:first-child,
.grammar-content h3:first-child { margin-top: 0; }

.grammar-content strong { font-weight: 600; }

.grammar-content p { margin: 0 0 0.9rem; }
.grammar-content p:last-child { margin-bottom: 0; }

.grammar-content code {
  background: var(--c-surface);
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  font-size: 0.9em;
  font-family: ui-monospace, monospace;
}

.grammar-content blockquote {
  border-left: 3px solid var(--c-gold);
  background: var(--c-surface);
  margin: 0.5rem 0 1rem;
  padding: 0.75rem 1rem;
  border-radius: 0 6px 6px 0;
  font-style: normal;
}
.grammar-content blockquote p { margin: 0 0 0.5rem; }
.grammar-content blockquote p:last-child { margin-bottom: 0; }

/* "Why this matters" — always the first h2 + its adjacent paragraph */
.grammar-content > h2:first-child {
  font-size: 0.72rem !important;
  letter-spacing: 0.06em;
  margin-bottom: 0.3rem;
}
.grammar-content > h2:first-child + p {
  border-left: 3px solid var(--c-border);
  background: var(--c-surface);
  padding: 0.6rem 0.9rem;
  border-radius: 0 4px 4px 0;
  font-size: 0.88rem;
  color: var(--c-text-muted);
  font-style: italic;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.grammar-content ul,
.grammar-content ol { margin: 0 0 0.9rem; padding-left: 1.5rem; }

.grammar-content li { margin-bottom: 0.3rem; }

.grammar-content table {
  border-collapse: collapse;
  width: 100%;
  margin: 0.5rem 0 1.25rem;
  font-size: 0.9em;
}

.grammar-content th,
.grammar-content td { border: 1px solid var(--c-border); padding: 0.4rem 0.7rem; text-align: left; }

.grammar-content th { background: var(--c-surface); font-weight: 600; }

/* CEFR badges (vocab, search) */
.cefr-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 1px 5px;
  border-radius: 3px;
}
.cefr-badge.a0 { background: #f5f5f5; color: #757575; }
.cefr-badge.a1 { background: #e8f5e9; color: #2e7d32; }
.cefr-badge.a2 { background: #e3f2fd; color: #1565c0; }
.cefr-badge.b1 { background: #fff3e0; color: #e65100; }
.cefr-badge.b2 { background: #f3e5f5; color: #6a1b9a; }

/* Spinner */
.spinner {
  width: 2.5rem;
  height: 2.5rem;
  border: 3px solid var(--c-border);
  border-top-color: var(--c-terracotta);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
  margin: 0 auto 1.5rem;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Drill result items */
.item-row {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: 0.4rem 0.6rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--c-surface);
}
.item-row:last-child { border-bottom: none; }

.item-row-num { font-size: 0.78rem; color: var(--c-text-muted); padding-top: 0.25rem; text-align: right; }
.item-row-body { display: flex; flex-direction: column; gap: 0.25rem; }
.item-prompt-text { font-size: 0.9rem; color: var(--c-text-muted); font-style: italic; }
.item-student-wrong { font-size: 0.9rem; color: #b91c1c; text-decoration: line-through; }
.item-correct-answer { font-size: 0.9rem; color: #065f46; font-weight: 500; }
.item-explanation { font-size: 0.82rem; color: var(--c-text-muted); margin-top: 0.1rem; }
.item-ok-mark { font-size: 0.85rem; color: var(--c-sage); }

.item-secondary { display: flex; flex-direction: column; gap: 0.2rem; margin-top: 0.3rem; }

.item-grammar-error {
  font-size: 0.78rem;
  color: #92400e;
  background: #fef3c7;
  border-radius: 3px;
  padding: 0.1rem 0.4rem;
  display: inline-block;
  margin-right: 0.25rem;
}

.item-tip {
  font-size: 0.82rem;
  color: var(--c-text);
  background: rgba(212, 168, 67, 0.12);
  border: 1px solid rgba(212, 168, 67, 0.3);
  border-radius: 6px;
  padding: 0.4rem 0.65rem;
  line-height: 1.45;
}

/* Drill result banners */
.result-ok {
  background: #ecfdf5;
  color: #065f46;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  font-weight: 600;
  margin-bottom: 1rem;
}

.result-wrong {
  background: #fef2f2;
  color: #991b1b;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  font-weight: 600;
  margin-bottom: 1rem;
}

.rule-refs-block {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--c-border);
}

/* Activity container */
.activity-container { max-width: 600px; margin: 0 auto; padding: 0 1rem 3rem; }

/* Answer area (writing / free-form drill) */
.answer-area {
  width: 100%;
  min-height: 120px;
  padding: 0.6rem;
  font-size: 0.95rem;
  font-family: inherit;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  resize: vertical;
  outline: none;
  margin-bottom: 1rem;
  box-sizing: border-box;
  background: #fff;
}
.answer-area:focus { border-color: var(--c-terracotta); }

/* Item inputs (fill-blank / error-correction drills) */
.item-input {
  width: 100%;
  padding: 0.38rem 0.6rem;
  font-size: 0.9rem;
  font-family: inherit;
  border: 1px solid var(--c-border);
  border-radius: 5px;
  outline: none;
  box-sizing: border-box;
  background: #fff;
}
.item-input:focus { border-color: var(--c-terracotta); }

/* Mode selector (vocab practice) */
.mode-selector { display: flex; gap: 0.5rem; justify-content: center; padding: 1.5rem 1rem 0; }
.mode-selector a {
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--c-border);
  border-radius: 20px;
  font-size: 13px;
  color: var(--c-text-muted);
  text-decoration: none;
}
.mode-selector a:hover { background: var(--c-surface); }
.mode-selector a.active { background: var(--c-charcoal); color: #fff; border-color: var(--c-charcoal); }

/* =====================================================================
   4b. Lesson index page
   ===================================================================== */
.lesson-index { max-width: 600px; margin: 2.5rem auto; padding: 0 1rem; }
.lesson-index-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.lesson-index-header h1 { font-size: 1.2rem; font-weight: 600; margin: 0; }
.empty-hint { font-size: 0.9rem; color: var(--c-text-muted); font-style: italic; }

/* =====================================================================
   5. Page: Lezione plan
   ===================================================================== */
.lesson-plan { max-width: 560px; margin: 2.5rem auto; padding: 0 1rem; }

.lesson-header { margin-bottom: 1.75rem; }
.lesson-header h1 { font-size: 1.2rem; font-weight: 600; margin: 0 0 0.25rem; }

.lesson-meta { font-size: 0.82rem; color: var(--c-text-muted); display: flex; gap: 0.75rem; flex-wrap: wrap; }

.lesson-overview { font-size: 0.88rem; color: var(--c-text-muted); font-style: italic; margin-bottom: 1rem; line-height: 1.5; }

.activity-list {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: #fff;
}

.activity-icon { font-size: 1.1rem; width: 1.5rem; text-align: center; flex-shrink: 0; margin-top: 0.05rem; }
.activity-body { flex: 1; }
.activity-title { font-size: 0.92rem; font-weight: 500; color: var(--c-charcoal); margin-bottom: 0.15rem; }
.activity-desc { font-size: 0.8rem; color: var(--c-text-muted); }

.actions { display: flex; gap: 0.75rem; align-items: center; }

.btn-primary {
  display: inline-block;
  padding: 0.5rem 1.2rem;
  font-size: 0.9rem;
  font-weight: 600;
  background: var(--c-terracotta);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
}
.btn-primary:hover { background: #B5492D; }

.lesson-plan .btn-secondary { font-size: 0.82rem; color: var(--c-text-muted); text-decoration: none; }
.lesson-plan .btn-secondary:hover { color: var(--c-text); }

/* =====================================================================
   6. Page: Lezione new
   ===================================================================== */
.lesson-new { max-width: 520px; margin: 3rem auto; padding: 0 1rem; }
.lesson-new h1 { font-size: 1.3rem; font-weight: 600; margin: 0 0 0.25rem; }
.lesson-new .subtitle { font-size: 0.85rem; color: var(--c-text-muted); margin: 0 0 2rem; }

.form-section { margin-bottom: 1.75rem; }
.form-section label.section-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-text-muted);
  margin-bottom: 0.75rem;
}

.duration-options { display: flex; gap: 0.75rem; }
.duration-options > span { flex: 1; display: flex; flex-direction: column; }
.duration-options input[type="radio"] { display: none; }
.duration-options label {
  flex: 1;
  text-align: center;
  padding: 0.75rem 0.5rem;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--c-text);
  white-space: nowrap;
  transition: border-color 0.15s, background 0.15s;
}
.duration-options label:hover { border-color: var(--c-text-muted); background: var(--c-surface); }
.duration-options input[type="radio"]:checked + label { border-color: var(--c-terracotta); background: var(--c-terracotta); color: #fff; }
.duration-options .dur-min { display: block; font-size: 1.3rem; font-weight: 600; margin-bottom: 0.1rem; }
.duration-options .dur-label { font-size: 0.75rem; opacity: 0.8; }

/* Config screen: topic select */
.config-select {
  width: 100%;
  padding: 0.55rem 0.75rem;
  font-size: 0.9rem;
  font-family: inherit;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: #fff;
  color: var(--c-text);
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238A8279' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2rem;
}
.config-select:focus { border-color: var(--c-terracotta); }

/* Config screen: checkbox card */
.config-checkbox-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  background: #fff;
}
.config-checkbox-card:hover { border-color: var(--c-text-muted); }
.config-checkbox-card:has(input:checked) { border-color: var(--c-terracotta); background: rgba(199, 91, 57, 0.04); }
.config-checkbox-card input[type="checkbox"] { display: none; }
.config-checkbox-label { font-size: 0.9rem; font-weight: 500; color: var(--c-text); }
.config-checkbox-hint { font-size: 0.8rem; color: var(--c-text-muted); }
.config-weakness-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.15rem; }
.weakness-tag {
  font-size: 0.78rem;
  padding: 0.2rem 0.6rem;
  background: #fdf0ec;
  color: #a03a1f;
  border-radius: 4px;
  border: 1px solid #f0d5cb;
  text-decoration: none;
  transition: background 0.1s;
}
a.weakness-tag:hover { background: #f9e2db; }

/* Config screen: text input */
.config-text-input {
  width: 100%;
  padding: 0.55rem 0.75rem;
  font-size: 0.9rem;
  font-family: inherit;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  outline: none;
  background: #fff;
  box-sizing: border-box;
}
.config-text-input:focus { border-color: var(--c-terracotta); }

.btn-start {
  width: 100%;
  padding: 0.5rem 1.2rem;
  font-size: 0.9rem;
  font-weight: 600;
  background: var(--c-terracotta);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-start:hover { background: #B5492D; }
.btn-start:disabled { background: var(--c-text-muted); cursor: wait; }

.loading-hint { text-align: center; font-size: 0.82rem; color: var(--c-text-muted); margin-top: 0.75rem; }

/* =====================================================================
   7. Page: Lezione complete
   ===================================================================== */
.complete-container { max-width: 520px; margin: 3rem auto; padding: 0 1rem; }

.graduation-banner { text-align: center; background: #fef9e7; border: 2px solid #f0d56c; border-radius: 10px; padding: 1.5rem; margin-bottom: 2rem; }
.graduation-icon { font-size: 2.5rem; margin-bottom: 0.5rem; }
.graduation-banner h2 { font-size: 1.3rem; margin: 0 0 0.5rem; color: #6b5900; }
.graduation-banner p { font-size: 0.9rem; color: #6b5900; margin: 0; line-height: 1.5; }

.info-callout {
  background: #e8f4fd;
  border: 1px solid #b8d4e8;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  font-size: 0.88rem;
  color: #2c5f7c;
  line-height: 1.5;
}

.persona-field { margin-bottom: 0.6rem; }
.persona-label { font-weight: 600; margin-right: 0.4rem; }
.persona-label::after { content: ":"; }

.complete-hero { text-align: center; margin-bottom: 2rem; }
.complete-icon { font-size: 3rem; margin-bottom: 0.75rem; }
.complete-title { font-size: 1.4rem; font-weight: 600; margin: 0 0 0.4rem; }
.complete-subtitle { font-size: 0.9rem; color: var(--c-text-muted); }

.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-bottom: 2rem; }

.stat-card { border: 1px solid var(--c-border); border-radius: 8px; padding: 1rem; text-align: center; background: #fff; }
.stat-value { font-size: 1.6rem; font-weight: 600; color: var(--c-charcoal); }
.stat-label { font-size: 0.75rem; color: var(--c-text-muted); margin-top: 0.2rem; }

.activity-summary { border: 1px solid var(--c-border); border-radius: 8px; overflow: hidden; margin-bottom: 2rem; background: #fff; }
.activity-summary-title {
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-text-muted);
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--c-border);
}

.summary-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--c-surface);
  font-size: 0.88rem;
}
.summary-item:last-child { border-bottom: none; }
.summary-status { font-size: 0.8rem; flex-shrink: 0; }
.summary-title { flex: 1; color: var(--c-text); }
.summary-skipped .summary-title { color: var(--c-text-muted); }

.action-links { display: flex; gap: 0.75rem; flex-wrap: wrap; }

.complete-container .btn-secondary {
  display: inline-block;
  padding: 0.5rem 1.2rem;
  font-size: 0.9rem;
  font-weight: 600;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  color: var(--c-text-muted);
  text-decoration: none;
  background: transparent;
}
.complete-container .btn-secondary:hover { background: var(--c-surface); color: var(--c-text); }

/* Lesson feedback box */
.lesson-feedback {
  border: 1px solid var(--c-border);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  background: #fff;
}
.lesson-feedback .feedback-label {
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-text-muted);
  margin-bottom: 0.5rem;
}
.lesson-feedback .feedback-text { font-size: 0.92rem; color: var(--c-text); line-height: 1.6; margin: 0; }

/* Review / weak grammar box */
.review-box {
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
}
.review-box .review-heading {
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-text-muted);
  margin-bottom: 0.75rem;
}
.review-links { display: flex; flex-direction: column; gap: 0.4rem; }
.review-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.9rem;
  color: var(--c-charcoal);
  text-decoration: none;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--c-border);
}
.review-level {
  font-size: 0.75rem;
  color: var(--c-text-muted);
  border: 1px solid var(--c-border);
  border-radius: 3px;
  padding: 0.1rem 0.4rem;
  margin-left: 0.75rem;
  flex-shrink: 0;
}

/* Pip track (scoring pips — reused from profile + complete) */
.pip-track { display: flex; gap: 2px; flex-shrink: 0; }
.pip { width: 8px; height: 8px; border-radius: 2px; background: var(--c-border); flex-shrink: 0; }
.pip.ok  { background: var(--c-sage); }
.pip.err { background: #C75050; }

@keyframes pip-fade-in {
  from { opacity: 0; transform: scale(0.5); }
  to   { opacity: 1; transform: scale(1); }
}
.pip-animate .pip.ok,
.pip-animate .pip.err {
  animation: pip-fade-in 0.3s ease-out both;
}
.pip-animate .pip:nth-child(1)  { animation-delay: 0.05s; }
.pip-animate .pip:nth-child(2)  { animation-delay: 0.10s; }
.pip-animate .pip:nth-child(3)  { animation-delay: 0.15s; }
.pip-animate .pip:nth-child(4)  { animation-delay: 0.20s; }
.pip-animate .pip:nth-child(5)  { animation-delay: 0.25s; }
.pip-animate .pip:nth-child(6)  { animation-delay: 0.30s; }
.pip-animate .pip:nth-child(7)  { animation-delay: 0.35s; }
.pip-animate .pip:nth-child(8)  { animation-delay: 0.40s; }
.pip-animate .pip:nth-child(9)  { animation-delay: 0.45s; }
.pip-animate .pip:nth-child(10) { animation-delay: 0.50s; }

/* Communicative function tags */
.cf-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.cf-tag {
  font-size: 0.82rem;
  background: var(--c-border);
  color: var(--c-charcoal);
  border-radius: 4px;
  padding: 0.2rem 0.6rem;
}

.discovered-words { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.discovered-word-tag {
  font-size: 0.82rem;
  background: var(--c-border);
  color: var(--c-charcoal);
  border-radius: 4px;
  padding: 0.2rem 0.6rem;
}

/* Student writing response */
.student-writing-response {
  background: var(--c-surface);
  border-left: 3px solid var(--c-border);
  padding: 0.6rem 0.9rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--c-charcoal);
  border-radius: 0 6px 6px 0;
}

@media (max-width: 480px) {
  .pip { width: 7px; height: 7px; }
}

/* =====================================================================
   8. Page: Lezione generating
   ===================================================================== */
.generating-wrap { max-width: 480px; margin: 4rem auto; padding: 0 1rem; text-align: center; }
.generating-title { font-size: 1.1rem; font-weight: 600; margin: 0 0 0.5rem; }
.generating-sub { font-size: 0.88rem; color: var(--c-text-muted); }

/* Error state for generating page */
.generating-wrap.has-error { text-align: left; }
.generating-error-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  padding: 1.75rem;
  position: relative;
}
.generating-error-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: #fef2f2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.generating-error-icon svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--c-terracotta);
}
.generating-error-card .generating-title {
  font-family: var(--f-serif);
  font-size: 1.15rem;
  color: var(--c-charcoal);
  margin-bottom: 0.5rem;
}
.generating-error-card .generating-sub {
  margin-bottom: 1.25rem;
  line-height: 1.5;
}
.generating-error-card .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.4rem;
  font-size: 0.9rem;
  background: var(--c-terracotta);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--f-sans);
  font-weight: 500;
  transition: background 0.15s;
}
.generating-error-card .btn:hover { background: #B5492D; }
.generating-error-card .btn svg {
  width: 0.9rem;
  height: 0.9rem;
}

/* =====================================================================
   9. Page: Activity drill — extra card elements
   ===================================================================== */
.card-meta { font-size: 0.78rem; color: var(--c-text-muted); margin-bottom: 1.25rem; display: flex; gap: 0.5rem; }
.badge { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 20px; background: var(--c-surface); color: var(--c-text-muted); }

.drill-instruction { font-size: 0.85rem; color: var(--c-text-muted); margin-bottom: 1.25rem; font-style: italic; }

.hidden { display: none; }
.hint-container { margin-bottom: 1rem; }
.hint-toggle { background: none; border: 1px solid var(--c-border); color: var(--c-text-muted); font-size: 13px; font-weight: 600; padding: 0.3rem 0.75rem; border-radius: 6px; cursor: pointer; }
.hint-toggle:hover { background: var(--c-surface); color: var(--c-text); }
.hint-text { margin-top: 0.5rem; padding: 0.6rem 0.8rem; background: var(--c-surface); border-radius: 6px; font-size: 0.88rem; color: var(--c-text); border-left: 3px solid var(--c-accent); }
.hint-text table { border-collapse: collapse; margin: 0.3rem 0; font-size: 0.9em; }
.hint-text th, .hint-text td { border: 1px solid var(--c-border); padding: 0.25rem 0.6rem; text-align: left; }
.hint-text th { background: #fff; font-weight: 600; }

.items-form { display: flex; flex-direction: column; gap: 0.85rem; margin-bottom: 1.5rem; }
.drill-item { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.5rem 0.6rem; align-items: start; }
.item-num { font-size: 0.78rem; color: var(--c-text-muted); padding-top: 0.5rem; text-align: right; }
.item-body { display: flex; flex-direction: column; gap: 0.3rem; }

.item-sentence {
  font-size: 0.95rem;
  color: var(--c-charcoal);
  line-height: 1.5;
  padding: 0.35rem 0.6rem;
  background: var(--c-surface);
  border-left: 2px solid var(--c-border);
  border-radius: 0 4px 4px 0;
  font-style: italic;
}

.card-prompt { font-size: 1.05rem; line-height: 1.6; margin-bottom: 1.5rem; color: var(--c-charcoal); }

.submit-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; }

.field + .field { margin-top: 0.75rem; }
.field label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--c-charcoal); margin-bottom: 0.25rem; }

/* =====================================================================
   10. Page: Activity grammar — extra elements
   ===================================================================== */
.grammar-title { font-size: 1.15rem; font-weight: 600; color: var(--c-charcoal); margin-bottom: 1.5rem; }

.why-important {
  border-left: 3px solid var(--c-border);
  background: var(--c-surface);
  padding: 0.6rem 0.9rem;
  margin-bottom: 1.25rem;
  border-radius: 0 4px 4px 0;
}
.why-label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-text-muted); margin-bottom: 0.25rem; }
.why-important p { font-size: 0.88rem; color: var(--c-text-muted); margin: 0; font-style: italic; line-height: 1.5; }

/* =====================================================================
   11. Page: Activity reading — extra elements
   ===================================================================== */
.reading-card { border: 1px solid var(--c-border); border-radius: 10px; padding: 2rem; margin-bottom: 1.25rem; background: #fff; }
.reading-text { font-size: 1rem; line-height: 1.8; color: var(--c-charcoal); }
.questions-card { border: 1px solid var(--c-border); border-radius: 10px; padding: 2rem; background: #fff; }
/* reading/listening questions now use .drill-item / .item-* classes (unified with drills) */

/* =====================================================================
   12. Page: Activity writing — extra elements
   ===================================================================== */
.prompt-text { font-size: 1rem; line-height: 1.7; color: var(--c-charcoal); margin-bottom: 1.5rem; }

/* =====================================================================
   13. Page: Activity speaking — stub card
   ===================================================================== */
.stub-icon { font-size: 2.5rem; margin-bottom: 1rem; }
.stub-title { font-size: 1.1rem; font-weight: 600; color: var(--c-charcoal); margin-bottom: 0.5rem; }
.stub-desc { font-size: 0.9rem; color: var(--c-text-muted); margin-bottom: 2rem; }

/* =====================================================================
   14. Page: Vocab list
   ===================================================================== */
/* Vocab page styles in /static/vocab.css */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; min-width: 360px; }
th, td { text-align: left; padding: 0.4rem 0.75rem; border-bottom: 1px solid var(--c-border); white-space: nowrap; }
th { font-weight: 600; color: var(--c-text-muted); font-size: 12px; text-transform: uppercase; }

/* =====================================================================
   15. Page: Vocab entry
   ===================================================================== */
#entry-card { max-width: 480px; margin: 2rem auto; }

.sense-translation { display: block; font-size: 0.82em; color: var(--c-text-muted); font-style: italic; margin-top: 0.1rem; }

.graded-tabs { display: flex; gap: 0.25rem; margin-bottom: 1rem; }
.graded-tab {
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--c-border);
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85em;
  background: var(--c-surface);
  color: var(--c-text-muted);
}
.graded-tab.active { background: var(--c-charcoal); color: #fff; border-color: var(--c-charcoal); }
.graded-panel { display: none; }
.graded-panel.active { display: block; }

#vocab-add { margin-top: 0.75rem; margin-bottom: 1rem; }
#vocab-add button { padding: 0.35rem 0.85rem; font-size: 0.85rem; cursor: pointer; }
.added-badge {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  background: var(--c-surface);
  color: var(--c-text-muted);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: default;
}

/* =====================================================================
   16. Page: Grammar detail
   ===================================================================== */
.grammar-detail { max-width: 760px; margin: 2.5rem auto; padding: 0 1rem 3rem; }

.gp-header { margin-bottom: 1.75rem; }
.gp-level {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-text-muted);
  border: 1px solid var(--c-border);
  border-radius: 4px;
  padding: 0.1rem 0.5rem;
  margin-bottom: 0.6rem;
}
.gp-title { font-size: 1.35rem; font-weight: 600; color: var(--c-charcoal); margin: 0 0 0.3rem; }

.grammar-detail .grammar-content {
  border: 1px solid var(--c-border);
  border-radius: 10px;
  padding: 1.75rem 2rem;
  margin-bottom: 1.75rem;
  line-height: 1.75;
  background: #fff;
}

.no-explanation {
  font-size: 0.9rem;
  color: var(--c-text-muted);
  font-style: italic;
  padding: 1.5rem;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  margin-bottom: 1.75rem;
}

.practice-btn {
  display: inline-block;
  padding: 0.6rem 1.4rem;
  font-size: 0.95rem;
  font-weight: 500;
  background: var(--c-terracotta);
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.15s;
}
.practice-btn:hover { background: #B5492D; }

/* =====================================================================
   17. Page: Grammar index
   ===================================================================== */
.grammar-index { max-width: 700px; margin: 2.5rem auto; padding: 0 1rem 3rem; }
.grammar-index-header { margin-bottom: 1.5rem; }
.grammar-index-header h1 { font-size: 1.2rem; font-weight: 600; margin: 0; }

.gi-tabs { display: flex; gap: 0.25rem; margin-bottom: 1.5rem; }
.gi-tab {
  padding: 0.3rem 0.9rem;
  border: 1px solid var(--c-border);
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
  background: var(--c-surface);
  color: var(--c-text-muted);
}
.gi-tab:hover { background: var(--c-cream); }
.gi-tab.active { background: var(--c-charcoal); color: #fff; border-color: var(--c-charcoal); }

.gi-panel { display: none; }
.gi-panel.active { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.25rem; }

.gi-category {}
.gi-cat-heading {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--c-text-muted);
  margin-bottom: 0.4rem;
}
.gi-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.gi-link {
  display: block;
  font-size: 0.88rem;
  color: var(--c-text);
  text-decoration: none;
  padding: 0.2rem 0;
  border-bottom: 1px solid transparent;
}
.gi-link:hover { color: var(--c-charcoal); border-bottom-color: var(--c-charcoal); }

/* =====================================================================
   18. Page: Profilo — see /static/profile.css
   ===================================================================== */

/* =====================================================================
   19. Search results
   ===================================================================== */
.search-result-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  text-decoration: none;
  color: var(--c-charcoal);
  border-bottom: 1px solid var(--c-surface);
}

/* =====================================================================
   20. Student picker
   ===================================================================== */
.student-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.student-card-form { display: contents; }

.student-card {
  width: 100%;
  padding: 1.25rem 1rem;
  font-size: 1rem;
  font-weight: 600;
  font-family: var(--f-serif);
  color: var(--c-charcoal);
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.student-card:hover {
  border-color: var(--c-terracotta);
  box-shadow: 0 2px 8px rgba(199, 91, 57, 0.12);
}

.new-student-form {
  display: flex;
  gap: 0.5rem;
  max-width: 320px;
}
.new-student-form input[type="text"] {
  flex: 1;
  padding: 0.55rem 0.75rem;
  font-size: 0.9rem;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  outline: none;
  background: #fff;
}
.new-student-form input[type="text"]:focus { border-color: var(--c-terracotta); }
.new-student-form button {
  padding: 0.5rem 1.2rem;
  font-size: 0.9rem;
  font-weight: 600;
  background: var(--c-terracotta);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
.new-student-form button:hover { background: #B5492D; }

/* =====================================================================
   21. Auth forms
   ===================================================================== */
.form-error {
  background: #fef2f2;
  color: #b91c1c;
  padding: 0.6rem 0.85rem;
  border-radius: 6px;
  font-size: 0.85rem;
  margin-bottom: 1.5rem;
}

.form-success {
  background: #e8f0ea;
  color: #2d5a35;
  padding: 0.6rem 0.85rem;
  border-radius: 6px;
  font-size: 0.85rem;
  margin-bottom: 1.5rem;
}

.verify-banner {
  background: #fef9e7;
  color: #7c6a1a;
  font-size: 0.85rem;
  padding: 0.5rem 0;
}

.verify-banner .site-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.verify-banner-dismiss {
  color: #7c6a1a;
  text-decoration: underline;
  white-space: nowrap;
}

.auth-switch {
  text-align: center;
  font-size: 0.82rem;
  color: var(--c-text-muted);
  margin-top: 1.25rem;
}
.auth-switch a { color: var(--c-terracotta); }

/* =====================================================================
   22. Account settings
   ===================================================================== */
.nav-settings {
  display: inline-flex;
  align-items: center;
  color: var(--c-text-muted);
  text-decoration: none;
  margin-left: 0.25rem;
  transition: color 0.15s;
}
.nav-settings:hover { color: var(--c-charcoal); }

.account-section {
  border: 1px solid var(--c-border);
  border-radius: 8px;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}
.account-section-label {
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-text-muted);
  margin-bottom: 0.75rem;
}
.account-section-hint {
  font-size: 0.85rem;
  color: var(--c-text-muted);
  margin: 0 0 0.75rem;
}

.account-saved-banner {
  background: #e8f0ea;
  color: #2d5a35;
  border-radius: 6px;
  padding: 0.6rem 0.85rem;
  font-size: 0.85rem;
  margin-bottom: 1.5rem;
}

.account-danger {
  border-color: #e5c5c5;
  background: #fef8f8;
}
.account-danger .account-section-label { color: #b91c1c; }

.btn-danger {
  padding: 0.5rem 1.2rem;
  font-size: 0.9rem;
  font-weight: 600;
  background: #b91c1c;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-danger:hover { background: #991b1b; }

/* =====================================================================
   23. Media queries
   ===================================================================== */
@media (max-width: 640px) {
  /* Full-width content — remove card chrome on small screens */
  .activity-container { max-width: 100%; }
  .activity-container .card,
  .reading-card,
  .questions-card {
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 1.25rem 0;
  }
  /* Keep card chrome for vocab flashcards & entry detail */
  .activity-container #practice-card,
  #entry-card {
    border: 1px solid var(--c-border);
    border-radius: 10px;
    background: #fff;
    padding: 1.5rem 1.25rem;
  }
  .grammar-detail { max-width: 100%; }
  .grammar-detail .grammar-content {
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 1.25rem 0;
    overflow-x: auto;
  }
  .grammar-detail .no-explanation { border: none; border-radius: 0; padding: 1.25rem 0; }
  /* Grammar tables in activities can also overflow */
  .activity-container .grammar-content { overflow-x: auto; }
  /* Nav: drop separator when it wraps to second row */
  .nav-right { border-left: none; padding-left: 0; }

  /* Hamburger menu */
  .nav-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    order: 0;
    flex-shrink: 0;
  }
  .nav-hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--c-charcoal);
    border-radius: 1px;
    transition: transform 0.25s ease, opacity 0.2s ease;
    transform-origin: center;
  }
  nav.nav-open .nav-hamburger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  nav.nav-open .nav-hamburger span:nth-child(2) { opacity: 0; }
  nav.nav-open .nav-hamburger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .nav-links {
    display: none;
    width: 100%;
    flex-direction: column;
    order: 3;
    padding: 0.25rem 0 0.5rem;
    border-top: 1px solid var(--c-border);
    margin-top: 0.25rem;
  }
  .nav-links a {
    padding: 0.6rem 0.5rem;
    border-left: 3px solid transparent;
    transition: border-color 0.15s, color 0.15s;
  }
  .nav-links a:hover,
  .nav-links a.active {
    border-left-color: var(--c-terracotta);
  }
  nav.nav-open .nav-links { display: flex; }
  .nav-right { order: 2; }
  /* Remove horizontal padding on content containers */
  .lesson-new { margin: 1.25rem auto; padding: 0; }
  .activity-container { padding: 0 0 3rem; }
  .lesson-index { padding: 0; }
  .lesson-plan { padding: 0; }
  .complete-container { padding: 0; }
  .grammar-detail { padding: 0 0 3rem; }
  .grammar-index { padding: 0 0 3rem; }
  .generating-wrap { padding: 0; }
  /* Tighten drill/scoring item grids */
  .drill-item { grid-template-columns: 1.2rem 1fr; gap: 0.3rem 0.4rem; }
  .item-row { grid-template-columns: 1.2rem 1fr; gap: 0.3rem 0.4rem; }
  .item-num, .item-row-num { font-size: 0.72rem; }
}

@media (max-width: 480px) {
  .lesson-plan { margin: 1.5rem auto; }
  .mode-selector { flex-wrap: wrap; padding: 1rem 0.75rem 0; }
  .word { font-size: 1.6rem; }
  .student-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

@media (max-width: 400px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .action-links { flex-direction: column; }
  .btn-primary, .complete-container .btn-secondary { text-align: center; }
}

/* ── Flag button ─────────────────────────────────────────────────────────── */
.flag-form .flag-expand { display: none; }
.flag-form.expanded .flag-expand { display: block; }
.flag-form .flag-expand textarea { width: 100%; box-sizing: border-box; }

/* =====================================================================
   Audio player (mini player for vocab + listening activities)
   ===================================================================== */
.audio-player-wrap {
  margin: 0.75rem 0;
}

.audio-player-inline {
  margin: 0.5rem 0 0.75rem;
}

.mini-player {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.65rem;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background: var(--c-surface);
}

.play-btn {
  background: var(--c-terracotta);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0.3rem 0.75rem;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  min-width: 6rem;
}

.play-btn:hover { background: #B5492D; }
.play-btn:disabled { background: #c4bfb6; cursor: not-allowed; }

.play-btn-sm {
  font-size: 0.78rem;
  padding: 0.2rem 0.55rem;
  min-width: 4.5rem;
}

.speed-slider {
  max-width: 110px;
  accent-color: var(--c-terracotta);
  cursor: pointer;
}

.speed-label {
  font-size: 0.8rem;
  color: var(--c-text-muted);
  min-width: 2.5rem;
  text-align: right;
}

/* Tooltip audio button */
.tt-audio-btn {
  display: block;
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.78rem;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 4px;
  cursor: pointer;
  color: var(--c-text);
  text-align: center;
}
.tt-audio-btn:hover { background: var(--c-cream); }

/* Inline audio play button (grammar tables) — reuses .tt-audio-btn style */
.inline-play-btn {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  font-size: 13px;
  font-weight: 600;
  background: transparent;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  cursor: pointer;
  color: var(--c-text-muted);
  text-align: center;
}
.inline-play-btn:hover { background: var(--c-surface); color: var(--c-text); }

/* Tooltip add-to-vocab action */
.tt-actions { margin-top: 0.35rem; }
.tt-add-btn {
  display: block;
  width: 100%;
  padding: 0.3rem 0.75rem;
  font-size: 13px;
  font-weight: 600;
  background: var(--c-sage);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: #fff;
  text-align: center;
}
.tt-add-btn:hover { background: #5a7d60; }
.tt-added {
  display: block;
  width: 100%;
  padding: 0.3rem 0.75rem;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text-muted);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  text-align: center;
  cursor: default;
}

.flag-actions { display: flex; gap: 4px; margin-top: 4px; }

/* =====================================================================
   23. Listening activity — broadcast player
   ===================================================================== */

/* Card: dark header + white body */
.listening-card {
  border: 1px solid var(--c-border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 1.25rem;
  background: #fff;
}

/* Dark "broadcast" header */
.listening-header {
  background: var(--c-charcoal);
  padding: 1.5rem 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}

.listening-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(250, 247, 242, 0.4);
  align-self: flex-start;
}

/* Waveform */
.waveform {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 48px;
}

.wave-bar {
  width: 3px;
  border-radius: 2px;
  background: var(--c-cream);
  opacity: 0.2;
  transform-origin: center;
}

.waveform.playing .wave-bar {
  opacity: 0.75;
  animation: wavePulse 0.55s calc(var(--i, 0) * 38ms) ease-in-out infinite alternate;
}

@keyframes wavePulse {
  from { transform: scaleY(0.2); }
  to   { transform: scaleY(1); }
}

/* Circular play button */
.listening-play-btn {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--c-terracotta);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.12);
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0; /* centering handled via #play-icon nudge */
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
  box-shadow: 0 0 0 5px rgba(199, 91, 57, 0.18);
}

.listening-play-btn:hover {
  background: #d66c4d;
  transform: scale(1.05);
  box-shadow: 0 0 0 7px rgba(199, 91, 57, 0.12);
}

/* Nudge ▶ glyph slightly right for optical centering; ⏸ sits centered already */
#play-icon { position: relative; left: 2px; }

/* Seek bar row */
.seek-row {
  width: 100%;
}

.seek-bar {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: transparent;
  cursor: pointer;
  padding: 6px 0; /* easier click target */
  box-sizing: content-box;
}

.seek-bar::-webkit-slider-container {
  background: transparent;
}

.seek-bar::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(
    to right,
    var(--c-terracotta) var(--seek-pct, 0%),
    rgba(250, 247, 242, 0.2) var(--seek-pct, 0%)
  );
}

.seek-bar::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: rgba(250, 247, 242, 0.2);
}

.seek-bar::-moz-range-progress {
  height: 4px;
  border-radius: 2px;
  background: var(--c-terracotta);
}

.seek-bar::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  margin-top: -5px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  transition: transform 0.1s;
}

.seek-bar::-webkit-slider-thumb:hover { transform: scale(1.25); }

.seek-bar::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: none;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

/* Speed/time row in dark header */
.listening-controls-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.listening-time {
  font-size: 0.75rem;
  color: rgba(250, 247, 242, 0.45);
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, monospace;
  min-width: 7rem;
}

.listening-speed-slider { accent-color: var(--c-cream); }

.listening-speed-label {
  color: rgba(250, 247, 242, 0.45);
}

/* White body: transcript reveal */
.listening-body {
  padding: 0;
}

.transcript-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.7rem 2rem;
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  font-size: 0.78rem;
  color: var(--c-text-muted);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.transcript-toggle:hover { color: var(--c-text); }

.transcript-toggle::after {
  content: '↓';
  display: inline-block;
  transition: transform 0.25s ease;
}

.transcript-toggle.open { border-bottom-color: var(--c-border); }
.transcript-toggle.open::after { transform: rotate(180deg); }

/* Transcript slides open */
.listening-transcript {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              padding 0.3s ease;
  font-size: 0.97rem;
  line-height: 1.8;
  color: var(--c-charcoal);
  padding: 0 2rem;
}

.listening-transcript.revealed {
  max-height: 600px;
  padding: 1.25rem 2rem;
}

/* =====================================================================
   Graduation details (A1 banner enhancement)
   ===================================================================== */
.graduation-details {
  margin: 0.75rem 0 0;
  padding-left: 1.25rem;
  list-style: disc;
}

.graduation-details li {
  font-size: 0.88rem;
  line-height: 1.55;
  color: inherit;
  margin-bottom: 0.3rem;
}

/* Welcome card (returning A0 students) + onboarding progress — see also welcome.css */

.onboarding-progress {
  display: inline-block;
  background: var(--c-blue);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.25rem 0.85rem;
  border-radius: 999px;
  margin-bottom: 1rem;
  letter-spacing: 0.02em;
}

/* ----- Shared lesson history (used on profile + new-lesson page) ----- */
.history-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.history-list {
  display: flex;
  flex-direction: column;
  border-left: 2px solid var(--c-border);
  margin-left: 0.5rem;
}
.history-row {
  display: flex; gap: 0.75rem; align-items: baseline;
  padding: 0.45rem 0.6rem 0.45rem 1rem;
  text-decoration: none; color: inherit;
  font-size: 0.85rem;
  position: relative;
  transition: background 0.1s;
}
.history-row::before {
  content: '';
  position: absolute;
  left: -5px; top: 50%;
  transform: translateY(-50%);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-surface);
  border: 2px solid var(--c-border);
}
.history-row:hover { background: var(--c-surface); border-radius: 0 4px 4px 0; }
.history-row:hover::before { border-color: var(--c-terracotta); background: #fff; }
.history-date {
  color: var(--c-text-muted);
  min-width: 3rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.history-topic { flex: 1; }
.history-scenario { color: var(--c-text-muted); font-size: 0.8rem; }

/* ----- Scenario preview on new-lesson page ----- */
.next-scenario {
  margin-top: 0.5rem;
}
.next-scenario-label {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--c-terracotta);
  margin-bottom: 0.25rem;
}
.next-scenario-desc {
  font-size: 0.92rem;
  margin: 0 0 0.35rem;
}
.next-scenario-overview {
  font-size: 0.85rem;
  color: var(--c-text-muted);
  margin: 0;
  line-height: 1.5;
}

/* ----- Lesson intro activity ----- */
.intro-scenario-title { margin-bottom: 0.25rem; }
.intro-scenario-desc {
  font-size: 0.95rem;
  color: var(--c-text-muted);
  margin: 0 0 0.5rem;
}
.intro-scenario-image {
  margin: 0.75rem 0 1rem;
  text-align: center;
}
.intro-scenario-image img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}
.intro-scenario-overview {
  font-size: 0.9rem;
  line-height: 1.55;
  margin: 0 0 1rem;
}
.intro-section { margin-bottom: 1rem; }
.intro-section-heading {
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-text-muted);
  margin-bottom: 0.35rem;
}
.intro-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.intro-list li {
  font-size: 0.92rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--c-border);
}
.intro-list li:last-child { border-bottom: none; }
.intro-tt-link {
  color: var(--c-terracotta);
  cursor: help;
  border-bottom: 1px dashed var(--c-text-muted);
}