/* Japanese Learning System - Main Stylesheet */

/* ===== Japanese typography =====
   We rely on the platform's native Japanese fonts (see --font-jp below).
   A self-hosted Noto Sans JP webfont was intentionally dropped: the bundled
   file was invalid and got rejected by the browser font sanitizer, and the
   system stack renders Japanese cleanly without the extra download. */

/* ===== CSS Custom Properties (Light Theme Defaults) ===== */
:root {
  --bg: #f5f6f8;
  --text: #1a1a1a;
  --primary: #2563eb;
  --accent: #7c3aed;
  --surface: #ffffff;
  --card-bg: #ffffff;
  --border: #e2e5ea;

  --text-secondary: #4b5563;
  --primary-hover: #1d4ed8;
  --accent-hover: #6d28d9;
  --success: #059669;
  --error: #dc2626;
  --warning: #d97706;

  /* Japanese-inspired accent palette (used purposefully for highlights) */
  --vermilion: #e4572e;  /* torii / celebration */
  --indigo: #4361ee;     /* ai — traditional indigo */
  --sakura: #f7a1c4;     /* cherry blossom */
  --gold: #f4b942;       /* kin */
  --matcha: #2a9d8f;     /* tea green */

  --radius: 10px;
  --radius-lg: 16px;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
  --shadow-md: 0 4px 10px rgba(16, 24, 40, 0.08), 0 2px 6px rgba(16, 24, 40, 0.06);
  --shadow-lg: 0 12px 28px rgba(16, 24, 40, 0.12), 0 4px 10px rgba(16, 24, 40, 0.08);
  --transition: 0.2s ease;

  --font-jp: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', 'MS PGothic', sans-serif;
}

/* ===== Base Reset ===== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-jp);
  background-color: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--transition), color var(--transition);
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--primary-hover);
  text-decoration: underline;
}

a:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 2px;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  font-family: inherit;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* ===== Container ===== */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

@media (min-width: 1440px) {
  .container {
    max-width: 1400px;
  }
}

@media (min-width: 2560px) {
  .container {
    max-width: 1800px;
  }
}

/* ===== Navigation ===== */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  background-color: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav__brand {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.nav__link {
  color: var(--text-secondary);
  font-weight: 500;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  transition: background-color var(--transition), color var(--transition);
}

.nav__link:hover {
  color: var(--primary);
  background-color: rgba(37, 99, 235, 0.08);
  text-decoration: none;
}

.nav__link--active {
  color: var(--primary);
  background-color: rgba(37, 99, 235, 0.1);
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background-color: var(--primary);
  color: #ffffff;
  transition: background-color var(--transition), box-shadow var(--transition), transform var(--transition);
  text-decoration: none;
}

.btn:hover {
  background-color: var(--primary-hover);
  text-decoration: none;
  color: #ffffff;
}

.btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.btn:active {
  transform: scale(0.98);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.btn--secondary {
  background-color: transparent;
  color: var(--primary);
  border-color: var(--border);
}

.btn--secondary:hover {
  background-color: var(--surface);
  color: var(--primary-hover);
}

.btn--accent {
  background-color: var(--accent);
}

.btn--accent:hover {
  background-color: var(--accent-hover);
}

.btn--danger {
  background-color: var(--error);
}

.btn--danger:hover {
  background-color: #b91c1c;
}

.btn--sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
}

.btn--lg {
  padding: 0.875rem 1.75rem;
  font-size: 1.0625rem;
}

/* ===== Cards ===== */
.card {
  background-color: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow);
  transition: box-shadow var(--transition), transform var(--transition);
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* A thin accent rail on primary content cards for a bit of character */
.card--today,
.card--overview {
  border-top: 3px solid var(--indigo);
}
.card--today { border-top-color: var(--vermilion); }

.card__title {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--text);
}

.card__body {
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ===== Inputs ===== */
.input {
  display: block;
  width: 100%;
  padding: 0.625rem 0.875rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text);
  background-color: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.input::placeholder {
  color: var(--text-secondary);
  opacity: 0.7;
}

.input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--surface);
}

.input--error {
  border-color: var(--error);
}

.input--error:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

textarea.input {
  resize: vertical;
  min-height: 6rem;
}

/* ===== Toast Notifications ===== */
.toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  padding: 0.875rem 1.25rem;
  border-radius: var(--radius);
  background-color: var(--text);
  color: var(--bg);
  font-size: 0.9375rem;
  font-weight: 500;
  box-shadow: var(--shadow-md);
  z-index: 9999;
  transform: translateY(0);
  opacity: 1;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.toast--hidden {
  opacity: 0;
  transform: translateY(1rem);
  pointer-events: none;
}

.toast--success {
  background-color: var(--success);
  color: #ffffff;
}

.toast--error {
  background-color: var(--error);
  color: #ffffff;
}

.toast--warning {
  background-color: var(--warning);
  color: #ffffff;
}

/* ===== Loading Spinner ===== */
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  color: var(--text-secondary);
  gap: 0.75rem;
}

.loading::before {
  content: '';
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.loading--overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading--hidden {
  display: none;
}

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

/* ===== #app main area ===== */
#app {
  min-height: 100vh;
}

.page {
  padding: 2rem 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* ===== Utility Classes ===== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.text-center { text-align: center; }
.text-secondary { color: var(--text-secondary); }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .nav {
    flex-direction: column;
    gap: 0.75rem;
  }

  .nav__links {
    flex-wrap: wrap;
    justify-content: center;
  }

  .page {
    padding: 1.5rem 1rem;
  }

  .card {
    padding: 1.25rem;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .page {
    padding: 2rem 1.25rem;
  }
}


/* ===== Activity Pages Layout ===== */
.page--reading,
.page--listening,
.page--dictation,
.page--vocabulary,
.page--activity-list {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

/* Headers with back buttons */
.reading__header,
.listening__header,
.dictation__header,
.activity-list__header {
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.reading__header h1,
.listening__header h1,
.dictation__header h1,
.activity-list__header h1 {
  font-size: 1.5rem;
  margin-top: 0.75rem;
}

/* Reading passage text */
.reading__passage {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  margin-bottom: 2rem;
  font-size: 1.2rem;
  line-height: 2;
  letter-spacing: 0.02em;
}

.reading__passage ruby rt {
  font-size: 0.6em;
  color: var(--text-secondary);
}

.reading__passage:not(.reading__passage--furigana) rt {
  display: none;
}

/* Questions section */
.reading__questions,
.listening__questions {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.reading__questions h2,
.listening__questions h2 {
  margin-bottom: 1.5rem;
  font-size: 1.25rem;
}

.question {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
}

.question__text {
  font-weight: 600;
  margin-bottom: 1rem;
  font-size: 1rem;
}

.question__option {
  display: block;
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition);
}

.question__option:hover {
  background-color: rgba(37, 99, 235, 0.05);
  border-color: var(--primary);
}

.question__option input[type="radio"] {
  margin-right: 0.75rem;
}

/* Audio controls */
.audio-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 1.25rem;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 2rem;
}

.audio-controls__speed {
  display: flex;
  gap: 0.5rem;
  margin-left: auto;
}

.speed-btn--active {
  background-color: var(--accent) !important;
  color: white !important;
}

/* Dictation input area */
.dictation__form {
  margin-top: 2rem;
}

.dictation__input,
.form__textarea {
  width: 100%;
  min-height: 8rem;
  padding: 1.25rem;
  font-size: 1.3rem;
  line-height: 1.8;
  font-family: var(--font-jp);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  resize: vertical;
  margin-top: 0.75rem;
  margin-bottom: 1.5rem;
}

.dictation__input:focus,
.form__textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* Diff display for dictation results */
.dictation__results,
.reading__results,
.listening__results {
  margin-top: 2rem;
  padding: 1.5rem;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.diff-display {
  font-size: 1.5rem;
  line-height: 2;
  letter-spacing: 0.1em;
  padding: 1rem;
  background-color: var(--bg);
  border-radius: var(--radius);
  margin-top: 1rem;
}

.diff-char--correct {
  color: var(--success);
  background-color: rgba(5, 150, 105, 0.1);
  padding: 0.1em 0.05em;
  border-radius: 2px;
}

.diff-char--incorrect,
.diff-char--missing {
  color: var(--error);
  background-color: rgba(220, 38, 38, 0.1);
  padding: 0.1em 0.05em;
  border-radius: 2px;
  text-decoration: underline;
}

.diff-char--extra {
  color: var(--warning);
  background-color: rgba(217, 119, 6, 0.1);
  padding: 0.1em 0.05em;
  border-radius: 2px;
}

/* Exercise grid (exercise list page) */
.exercise-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.exercise-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}

.exercise-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  text-decoration: none;
}

.exercise-card__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--primary);
  color: white;
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.exercise-card__title {
  font-weight: 500;
  flex: 1;
}

.exercise-card__difficulty {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* Level cards */
.levels__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.level-card {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow);
}

.level-card--locked {
  opacity: 0.6;
}

.level-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.level-card__ja {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.level-card__lock {
  font-size: 1.5rem;
}

.level-card__progress {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.progress-bar {
  flex: 1;
  height: 0.5rem;
  background-color: var(--border);
  border-radius: 9999px;
  overflow: hidden;
}

.progress-bar__fill {
  height: 100%;
  background-color: var(--primary);
  border-radius: 9999px;
  transition: width 0.5s ease;
}

.level-card__pct {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-secondary);
  min-width: 3rem;
  text-align: right;
}

.level-card__activities {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.activity-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background-color: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  font-weight: 500;
  transition: border-color var(--transition), background-color var(--transition);
}

.activity-link:hover {
  border-color: var(--primary);
  background-color: rgba(37, 99, 235, 0.05);
  text-decoration: none;
}

.activity-link__icon {
  font-size: 1.25rem;
}

/* Navbar styling */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  background-color: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.navbar__brand {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.navbar__brand:hover { color: var(--primary); text-decoration: none; }

.navbar__links {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.navbar__link {
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--transition), color var(--transition);
}

.navbar__link:hover {
  color: var(--primary);
  background-color: rgba(37, 99, 235, 0.08);
  text-decoration: none;
}

.navbar__link--active {
  color: var(--primary);
  background-color: rgba(37, 99, 235, 0.1);
}

.navbar__right {
  display: flex;
  align-items: center;
}

.navbar__user {
  padding: 0.5rem 1rem;
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 0.9rem;
}

/* Signed-out "Sign in" entry in the navbar */
.navbar__signin {
  margin-left: 0.5rem;
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--primary);
  border-radius: var(--radius);
  color: var(--primary);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}
.navbar__signin:hover { background: var(--primary); color: #fff; text-decoration: none; }

/* Reading meaning box */
.reading__controls {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.reading__meaning-box {
  margin: 1rem 0;
  padding: 1.25rem;
  background-color: rgba(37, 99, 235, 0.06);
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: var(--radius);
  border-left: 4px solid var(--primary);
}

.reading__meaning-content {
  line-height: 1.7;
  color: var(--text);
  font-size: 0.95rem;
}

/* Auth pages */
.page--auth {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2.5rem;
  box-shadow: var(--shadow-md);
}

.auth-card__title {
  font-size: 1.75rem;
  text-align: center;
  margin-bottom: 0.5rem;
}

.auth-card__subtitle {
  text-align: center;
  color: var(--text-secondary);
  margin-bottom: 2rem;
}

.auth-card__footer {
  text-align: center;
  margin-top: 1.5rem;
  color: var(--text-secondary);
}

/* Form styling */
.form__group {
  margin-bottom: 1.25rem;
}

.form__label {
  display: block;
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: var(--text);
}

.form__input {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--bg);
  color: var(--text);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.form__input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.form__input--small {
  max-width: 120px;
}

.form__hint {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 0.25rem;
}

.form__error {
  background-color: rgba(220, 38, 38, 0.1);
  color: var(--error);
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.btn--block {
  display: block;
  width: 100%;
}

/* Dashboard grid */
.dashboard__header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.dashboard__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.dashboard__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.badge {
  padding: 0.4rem 1rem;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.badge--beginner { background-color: #d1fae5; color: #065f46; }
.badge--intermediate { background-color: #dbeafe; color: #1e40af; }
.badge--advanced { background-color: #ede9fe; color: #5b21b6; }

/* Flashcard */
.flashcard {
  max-width: 500px;
  margin: 2rem auto;
  padding: 3rem 2rem;
  background-color: var(--surface);
  border: 2px solid var(--border);
  border-radius: 12px;
  text-align: center;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flashcard:hover {
  box-shadow: var(--shadow-md);
}

.flashcard--flipped {
  cursor: default;
  border-color: var(--primary);
}

.flashcard__word {
  font-size: 2.5rem;
  font-weight: 700;
}

.flashcard__meaning {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.flashcard__reading {
  font-size: 1.1rem;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
}

.flashcard__example {
  font-size: 1rem;
  color: var(--text-secondary);
  font-style: italic;
}

/* Rating buttons */
.vocabulary__rating-btns {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1rem;
}

.btn--rating {
  min-width: 60px;
  padding: 0.75rem 0.5rem;
  font-size: 1.1rem;
  border-radius: var(--radius);
}

.btn--rating-1 { background-color: #dc2626; }
.btn--rating-2 { background-color: #ea580c; }
.btn--rating-3 { background-color: #d97706; }
.btn--rating-4 { background-color: #16a34a; }
.btn--rating-5 { background-color: #059669; }

/* Dictionary popup */
.dictionary-popup {
  position: fixed;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow-md);
  z-index: 1000;
  max-width: 300px;
}

.dictionary-popup__word {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.dictionary-popup__reading {
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

/* Error message */
.error-message {
  background-color: rgba(220, 38, 38, 0.1);
  color: var(--error);
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  border: 1px solid rgba(220, 38, 38, 0.2);
}

/* Settings */
.settings__grid {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 1.5rem;
}

.settings__section {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
}

.settings__section h2 {
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.settings__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Progress page */
.progress__section {
  margin-bottom: 2.5rem;
}

.progress__section h2 {
  margin-bottom: 1rem;
}

.accuracy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

.accuracy-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.accuracy-item__value {
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--primary);
}

.study-time-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.study-time__item {
  text-align: center;
  padding: 1.25rem;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.study-time__label {
  display: block;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

.study-time__value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary);
}

.streak-display__count {
  font-size: 1.75rem;
  font-weight: 700;
}

/* Vocabulary complete */
.vocabulary__complete {
  text-align: center;
  padding: 3rem 2rem;
}

.vocabulary__complete h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

/* Form group inline */
.form__group--inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Furigana toggle button */
#furigana-toggle {
  float: right;
}

/* Text utilities */
.text-success { color: var(--success); }
.text-danger { color: var(--error); }


/* ===== Result Banners ===== */
.result-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
  font-weight: 600;
}

.result-banner--success {
  background-color: rgba(5, 150, 105, 0.1);
  border: 1px solid rgba(5, 150, 105, 0.3);
  color: var(--success);
}

.result-banner--retry {
  background-color: rgba(217, 119, 6, 0.1);
  border: 1px solid rgba(217, 119, 6, 0.3);
  color: var(--warning);
}

.result-banner__icon {
  font-size: 1.5rem;
}

.reading__actions {
  display: flex;
  gap: 1rem;
  align-items: center;
}

/* ===== Exercise Completion Badges ===== */
.exercise-card--completed {
  border-color: var(--success);
  background-color: rgba(5, 150, 105, 0.05);
}

.exercise-card__number--done {
  background-color: var(--success);
}

.exercise-card__badge {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--success);
  margin-left: auto;
}

.exercise-list__summary {
  padding: 0.75rem 0;
  font-weight: 500;
}


/* ===== Form Actions (Submit + Back buttons) ===== */
.form__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 0.5rem;
}


/* ===== Vocabulary Exercise Styles ===== */
.vocab-question {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.vocab-question__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.vocab-question__number {
  font-weight: 700;
  color: var(--primary);
}

.vocab-question__type {
  font-size: 0.75rem;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  background-color: rgba(37, 99, 235, 0.1);
  color: var(--primary);
  font-weight: 500;
}

.vocab-question__prompt-text {
  display: block;
  font-weight: 500;
  margin-bottom: 0.75rem;
}

.vocab-question__kanji-display {
  font-size: 3rem;
  font-weight: 700;
  text-align: center;
  padding: 1rem;
  background-color: var(--bg);
  border-radius: var(--radius);
  margin-bottom: 1rem;
}

.vocab-question__word-display {
  font-size: 1.75rem;
  font-weight: 600;
  text-align: center;
  padding: 0.75rem;
  background-color: var(--bg);
  border-radius: var(--radius);
  margin-bottom: 1rem;
}

.vocab-question__sentence {
  font-size: 1.2rem;
  padding: 0.75rem 1rem;
  background-color: var(--bg);
  border-radius: var(--radius);
  margin-bottom: 1rem;
  line-height: 1.8;
}

.vocab-question__options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.vocab-option {
  padding: 0.875rem 1rem;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--bg);
  color: var(--text);
  font-size: 1rem;
  font-family: var(--font-jp);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.1s ease;
}

.vocab-option:hover {
  border-color: var(--primary);
  background-color: rgba(37, 99, 235, 0.05);
}

.vocab-option:active {
  transform: scale(0.97);
}

.vocab-option--selected {
  border-color: var(--primary);
  background-color: rgba(37, 99, 235, 0.15);
  font-weight: 600;
}

/* Vocab exercise actions */
.vocab-exercise__actions {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.vocab-exercise__header {
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.vocab-exercise__header h1 {
  margin-top: 0.75rem;
}

/* Vocab results */
.vocab-exercise__banner {
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.vocab-exercise__banner--success {
  background-color: rgba(5, 150, 105, 0.1);
  border: 1px solid rgba(5, 150, 105, 0.3);
  color: var(--success);
}

.vocab-exercise__score {
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
}

.vocab-exercise__score-value {
  font-weight: 700;
  font-size: 1.5rem;
}

.vocab-result {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 0.5rem;
}

.vocab-result--correct {
  background-color: rgba(5, 150, 105, 0.05);
}

.vocab-result--wrong {
  background-color: rgba(220, 38, 38, 0.05);
}

.vocab-result__icon {
  font-size: 1.25rem;
  font-weight: 700;
}

.vocab-result--correct .vocab-result__icon { color: var(--success); }
.vocab-result--wrong .vocab-result__icon { color: var(--error); }

.vocab-result__correct {
  display: block;
  font-size: 0.85rem;
  color: var(--success);
  margin-top: 0.25rem;
}


/* ===== Curriculum & Dashboard Redesign ===== */

/* Dashboard Welcome */
.dashboard__welcome {
  margin-bottom: 1.5rem;
}

.dashboard__welcome h1 {
  font-size: 1.75rem;
  font-weight: 700;
}

/* Program Overview Card */
.card--overview {
  margin-bottom: 1.5rem;
}

.card--overview .card__description {
  font-weight: 600;
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}

.card--overview .card__detail {
  color: var(--text-secondary);
  font-size: 0.95rem;
  margin-bottom: 1rem;
}

.card__progress {
  margin-top: 1rem;
}

.card__progress-text {
  display: block;
  font-weight: 500;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

/* Today's Plan Card */
.card--today {
  margin-bottom: 1.5rem;
}

.card__subtitle {
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

.card__theme {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 1rem;
}

.today-activities {
  margin: 1rem 0;
}

.today-activity {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius);
  margin-bottom: 0.5rem;
  background-color: var(--bg);
  border: 1px solid var(--border);
}

.today-activity__icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}

.today-activity__text {
  flex: 1;
  font-size: 0.95rem;
}

.card__actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

/* Tags */
.tag {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
}

.tag--external {
  background-color: rgba(124, 58, 237, 0.1);
  color: var(--accent);
}

.tag--external-sm {
  background-color: rgba(124, 58, 237, 0.1);
  color: var(--accent);
  font-size: 0.65rem;
  padding: 0.1rem 0.35rem;
}

.tag--review {
  background-color: rgba(217, 119, 6, 0.1);
  color: var(--warning);
}

/* Quick Links */
.card--links .quick-links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.card--links .quick-links li a {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  color: var(--text);
  font-weight: 500;
  transition: background-color var(--transition);
}

.card--links .quick-links li a:hover {
  background-color: rgba(37, 99, 235, 0.08);
  text-decoration: none;
}

/* Week Days Display */
.card--week {
  /* matching the grid spacing */
}

.week-days {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0;
}

.week-day {
  padding: 0.35rem 0.6rem;
  border-radius: var(--radius);
  font-size: 0.8rem;
  font-weight: 500;
  border: 1px solid var(--border);
  background-color: var(--bg);
}

.week-day.day--done {
  background-color: rgba(5, 150, 105, 0.1);
  border-color: var(--success);
  color: var(--success);
}

.week-day.day--current {
  background-color: rgba(217, 119, 6, 0.1);
  border-color: var(--warning);
  color: var(--warning);
  font-weight: 700;
}

.week-day.day--locked {
  opacity: 0.5;
}

/* Success button */
.btn--success {
  background-color: var(--success);
  color: #ffffff;
}

.btn--success:hover {
  background-color: #047857;
  color: #ffffff;
}

/* Outline button */
.btn--outline {
  background-color: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}

.btn--outline:hover {
  border-color: var(--primary);
  color: var(--primary);
  background-color: transparent;
}

/* ===== Curriculum Page Styles ===== */

.page--curriculum,
.page--curriculum-week,
.page--curriculum-day {
  max-width: 1000px;
}

.curriculum__header {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.curriculum__header h1 {
  font-size: 1.5rem;
  margin-top: 0.5rem;
}

/* Progress summary in curriculum page */
.curriculum__progress-summary {
  margin-bottom: 2rem;
  padding: 1rem 1.5rem;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.curriculum__progress-summary p {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* Week cards grid (overview) */
.curriculum__weeks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.75rem;
}

.week-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}

.week-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.week-card__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  text-decoration: none;
  color: var(--text);
}

.week-card__link:hover {
  text-decoration: none;
}

.week-card__number {
  font-weight: 600;
  font-size: 0.85rem;
}

.week-card__status {
  font-size: 1rem;
}

.week-card--completed {
  background-color: rgba(5, 150, 105, 0.08);
  border-color: rgba(5, 150, 105, 0.3);
}

.week-card--current {
  background-color: rgba(217, 119, 6, 0.08);
  border-color: rgba(217, 119, 6, 0.4);
  box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.2);
}

.week-card--locked {
  opacity: 0.6;
}

/* Week detail view - day cards */
.curriculum-week__days {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.curriculum-week__theme {
  font-size: 1.1rem;
  font-weight: 500;
  margin-bottom: 1.5rem;
  color: var(--text-secondary);
}

.day-card {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  transition: border-color var(--transition);
}

.day-card--completed {
  border-left: 4px solid var(--success);
}

.day-card--current {
  border-left: 4px solid var(--warning);
  background-color: rgba(217, 119, 6, 0.03);
}

.day-card--locked {
  opacity: 0.6;
}

.day-card__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

.day-card__status {
  font-size: 1.1rem;
}

.day-card__title {
  font-weight: 600;
  flex: 1;
}

.day-card__activities {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}

.day-card__activity {
  font-size: 0.9rem;
  color: var(--text-secondary);
  padding: 0.25rem 0;
}

.day-card__actions {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

/* Day detail view */
.curriculum-day__info {
  margin-bottom: 2rem;
}

.curriculum-day__info h2 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}

.curriculum-day__duration {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin-top: 0.5rem;
}

.curriculum-day__status {
  margin-top: 0.75rem;
  font-weight: 600;
}

.status--done {
  color: var(--success);
}

.curriculum-day__activities h3 {
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

/* Activity cards in day view */
.activity-card {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.activity-card__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.activity-card__icon {
  font-size: 1.25rem;
}

.activity-card__title {
  font-weight: 600;
  flex: 1;
}

.activity-card__duration {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.activity-card__desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
}

/* Complete day section */
.curriculum-day__complete {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  text-align: center;
}

.text-sm {
  font-size: 0.85rem;
}

/* Responsive */
@media (max-width: 768px) {
  .curriculum__weeks {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  }

  .dashboard__grid {
    grid-template-columns: 1fr;
  }

  .week-days {
    gap: 0.35rem;
  }

  .week-day {
    font-size: 0.7rem;
    padding: 0.25rem 0.4rem;
  }

  .vocab-question__options {
    grid-template-columns: 1fr;
  }
}


/* ===== Curriculum Activity Completion ===== */
.day-card__activity--done {
  opacity: 0.7;
  text-decoration: line-through;
}

.activity-card--done {
  border-left: 4px solid var(--success);
  opacity: 0.8;
}

.activity-card--done .activity-card__title {
  text-decoration: line-through;
}


/* ===== Tester Banner ===== */
.tester-banner {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(37, 99, 235, 0.1));
  border: 1px solid rgba(124, 58, 237, 0.3);
  border-radius: var(--radius);
  padding: 1rem 1.5rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.tester-banner p {
  flex: 1;
  min-width: 200px;
  font-size: 0.95rem;
  line-height: 1.5;
}


/* ===== Audio Status Notice ===== */
.audio-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.12), rgba(249, 115, 22, 0.10));
  border: 1px solid rgba(234, 179, 8, 0.4);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.5rem;
}

.audio-notice__icon {
  font-size: 1.4rem;
  line-height: 1.4;
  color: #b45309;
  flex-shrink: 0;
}

.audio-notice__body {
  flex: 1;
  min-width: 0;
}

.audio-notice__title {
  display: block;
  font-size: 0.98rem;
  margin-bottom: 0.2rem;
}

.audio-notice__help {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-secondary, inherit);
}

.audio-notice__dismiss {
  flex-shrink: 0;
  align-self: center;
  padding: 0.4rem 0.85rem;
  border: 1px solid rgba(234, 179, 8, 0.5);
  border-radius: var(--radius);
  background-color: transparent;
  color: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
}

.audio-notice__dismiss:hover {
  background-color: rgba(234, 179, 8, 0.15);
}

@media (max-width: 560px) {
  .audio-notice { flex-wrap: wrap; }
  .audio-notice__dismiss { align-self: stretch; width: 100%; }
}


/* ===== Language Selector in Navbar ===== */
.navbar__lang-select {
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--bg);
  color: var(--text);
  font-size: 0.85rem;
  cursor: pointer;
}

.navbar__lang-select:focus {
  outline: none;
  border-color: var(--primary);
}

/* ===== Kana Learning Page ===== */
.page--kana {
  max-width: 900px;
  margin: 0 auto;
}

.kana__tabs {
  display: inline-flex;
  gap: 0.25rem;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.25rem;
  margin-bottom: 1.25rem;
}

.kana__tab {
  padding: 0.5rem 1.5rem;
  border-radius: 999px;
  color: var(--text-secondary);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--transition), color var(--transition);
}

.kana__tab--active {
  background-color: var(--primary);
  color: #ffffff;
}

.kana__title {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.kana__intro {
  color: var(--text-secondary);
  max-width: 680px;
  margin-bottom: 0.5rem;
  line-height: 1.7;
}

.kana__hint {
  font-size: 0.9rem;
  color: var(--primary);
  margin-bottom: 1.5rem;
}

.kana-group {
  margin-bottom: 1.75rem;
}

.kana-group__name {
  font-size: 1.05rem;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--border);
}

.kana-group__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.6rem;
}

.kana-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  padding: 0.85rem 0.5rem;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  font-family: var(--font-jp);
}

.kana-cell:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary);
}

.kana-cell__char {
  font-size: 1.9rem;
  line-height: 1.1;
  color: var(--text);
}

.kana-cell__romaji {
  font-size: 0.8rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Detail panel */
.kana-detail {
  /* Sticks just below the sticky navbar so the tapped character stays visible
     without the page jumping. z-index stays under the navbar (100). */
  position: sticky;
  top: 4.75rem;
  z-index: 30;
  background-color: var(--card-bg, #fff);
  background-image: linear-gradient(135deg, rgba(67, 97, 238, 0.07), rgba(228, 87, 46, 0.06));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin: 0 0 1.25rem;
  box-shadow: var(--shadow-lg);
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
}

@media (max-width: 600px) {
  .kana-detail {
    top: 4rem;
    padding: 1rem 1.1rem;
    max-height: 70vh;
  }
}

.kana-detail__close {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text-secondary);
}

.kana-detail__main {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.kana-detail__char-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.kana-detail__char {
  font-size: 5rem;
  line-height: 1;
  font-family: var(--font-jp);
  color: var(--primary);
}

.kana-detail__audio {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  cursor: pointer;
  font-size: 1.1rem;
}

.kana-detail__info {
  flex: 1;
  min-width: 220px;
}

.kana-detail__romaji {
  font-size: 1.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

.kana-detail__strokes {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}

.kana-detail__mnemonic,
.kana-detail__example {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

.kana-detail__example-word {
  font-family: var(--font-jp);
  font-weight: 600;
}

/* Quiz */
.kana__actions {
  text-align: center;
  margin: 2rem 0 1rem;
}

.kana-quiz {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  text-align: center;
  margin-bottom: 2rem;
}

.kana-quiz__progress {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.kana-quiz__char {
  font-size: 5rem;
  font-family: var(--font-jp);
  line-height: 1;
  margin-bottom: 1.5rem;
  color: var(--primary);
}

.kana-quiz__options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  max-width: 400px;
  margin: 0 auto;
}

.kana-quiz__option {
  padding: 0.85rem;
  font-size: 1.2rem;
  font-weight: 600;
  text-transform: uppercase;
  background-color: var(--bg);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--transition), background-color var(--transition);
}

.kana-quiz__option:hover:not(:disabled) {
  border-color: var(--primary);
}

.kana-quiz__option--correct {
  border-color: var(--success);
  background-color: rgba(16, 185, 129, 0.15);
}

.kana-quiz__option--wrong {
  border-color: var(--error);
  background-color: rgba(220, 38, 38, 0.15);
}

.kana-quiz__score {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--primary);
  margin: 1rem 0;
}

@media (max-width: 600px) {
  .kana-group__grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 0.35rem;
  }
  .kana-cell {
    padding: 0.5rem 0.25rem;
  }
  .kana-cell__char {
    font-size: 1.4rem;
  }
  .kana-cell__romaji {
    font-size: 0.65rem;
  }
  .kana-detail__char {
    font-size: 3.5rem;
  }
}

/* ===== Kanji-specific tweaks (reuses kana styles) ===== */
.kana-group__grid--kanji {
  grid-template-columns: repeat(4, 1fr);
}

.kana-group__grid--kanji .kana-cell__romaji {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.72rem;
  line-height: 1.2;
}

.kana-detail__readings {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0 0.75rem;
}

.kana-detail__reading-tag {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: var(--font-jp);
}

.kana-detail__reading-tag--on {
  background-color: rgba(37, 99, 235, 0.15);
  color: var(--primary);
}

.kana-detail__reading-tag--kun {
  background-color: rgba(16, 185, 129, 0.15);
  color: var(--success);
}

.kana-quiz__options--kanji {
  grid-template-columns: 1fr;
  max-width: 460px;
}

.kana-quiz__options--kanji .kana-quiz__option {
  text-transform: none;
  font-size: 1rem;
}

@media (max-width: 600px) {
  .kana-group__grid--kanji {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ===== Kana/Kanji origin-story panel ===== */
.kana__history {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem 1rem;
  margin: 0.75rem 0 1rem;
  max-width: 680px;
}

.kana__history-summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--primary);
  padding: 0.35rem 0;
  list-style: none;
}

.kana__history-summary::-webkit-details-marker {
  display: none;
}

.kana__history-body {
  color: var(--text-secondary);
  line-height: 1.75;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
}

/* ===== Deep Dive page ===== */
.page--deepdive { max-width: 760px; margin: 0 auto; }

.deepdive__kind {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--primary);
  background-color: rgba(37, 99, 235, 0.1);
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  margin: 0.75rem 0 0.5rem;
}

.deepdive__title { font-size: 1.75rem; margin-bottom: 0.5rem; }
.deepdive__intro { color: var(--text-secondary); line-height: 1.7; margin-bottom: 1.5rem; }

.deepdive__list { display: flex; flex-direction: column; gap: 0.75rem; }

.deepdive-item {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow);
}

.deepdive-item__main {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.deepdive-item__jp {
  font-family: var(--font-jp);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.deepdive-item__play { font-size: 0.9rem; }

.deepdive-item__reading {
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.deepdive-item__meaning {
  margin-top: 0.35rem;
  font-weight: 500;
}

.deepdive-item__note {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
  background-color: var(--bg);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
}

.deepdive__actions { margin: 2rem 0; text-align: center; }

/* ===== Grammar lesson page ===== */
.page--grammar { max-width: 720px; margin: 0 auto; }
.grammar__tag {
  display: inline-block;
  font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--primary); background-color: rgba(37, 99, 235, 0.1);
  padding: 0.2rem 0.6rem; border-radius: 999px; margin: 0.75rem 0 0.5rem;
}
.grammar__title { font-size: 1.75rem; margin-bottom: 1rem; font-family: var(--font-jp); }
.grammar__card {
  background-color: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; box-shadow: var(--shadow);
}
.grammar__explanation { line-height: 1.8; margin-bottom: 1rem; }
.grammar__pattern { font-size: 1rem; }
.grammar__pattern-label { font-weight: 600; color: var(--text-secondary); margin-right: 0.5rem; }
.grammar__pattern code {
  font-family: var(--font-jp); background-color: var(--bg);
  padding: 0.3rem 0.6rem; border-radius: var(--radius); border: 1px solid var(--border);
}
.grammar__examples-title { font-size: 1.1rem; margin-bottom: 0.75rem; }
.grammar__examples { display: flex; flex-direction: column; gap: 0.75rem; }
.grammar-example {
  background-color: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 0.85rem 1.1rem;
}
.grammar-example__jp {
  font-family: var(--font-jp); font-size: 1.25rem; font-weight: 600;
  background: none; border: none; cursor: pointer; color: var(--text); padding: 0;
}
.grammar-example__play { font-size: 0.85rem; }
.grammar-example__tr { color: var(--text-secondary); margin-top: 0.35rem; }
.grammar__actions { margin: 2rem 0; text-align: center; }

/* ===== Weekly resources (further reading) ===== */
.week-resources {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(37, 99, 235, 0.08));
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.25rem 1.5rem; margin-top: 1.5rem;
}
.week-resources__title { font-size: 1.05rem; margin-bottom: 0.25rem; }
.week-resources__subtitle { color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 0.75rem; }
.week-resources__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.week-resources__item a {
  display: inline-flex; align-items: center; gap: 0.4rem;
  color: var(--primary); text-decoration: none; font-weight: 500;
}
.week-resources__item a:hover { text-decoration: underline; }

/* ===== Navbar user dropdown (logout menu) ===== */
.navbar__user-menu {
  position: relative;
  display: inline-block;
}

.navbar__user {
  cursor: pointer;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.4rem 0.75rem;
  color: var(--text);
  font-weight: 600;
  font-family: inherit;
  font-size: 0.9rem;
  transition: background-color var(--transition);
}

.navbar__user:hover {
  background-color: var(--bg);
}

.navbar__dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 160px;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 0.35rem;
  display: none;
  z-index: 1000;
}

.navbar__dropdown--open {
  display: block;
}

.navbar__dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.55rem 0.75rem;
  border: none;
  background: none;
  border-radius: var(--radius);
  color: var(--text);
  font-weight: 500;
  font-size: 0.9rem;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition);
}

.navbar__dropdown-item:hover {
  background-color: var(--bg);
  text-decoration: none;
}

.navbar__dropdown-item--danger {
  color: var(--error);
}

/* ===== Home hero + animated mascot ===== */
.hero {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.10), rgba(124, 58, 237, 0.10));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.5rem;
}
.hero__mascot { flex-shrink: 0; }
.hero__greeting { font-size: 1.5rem; margin-bottom: 0.4rem; }
.hero__intro { color: var(--text-secondary); line-height: 1.7; max-width: 620px; }

.mascot__svg { width: 130px; height: auto; display: block; }
.mascot__bob { animation: mascotBob 3.2s ease-in-out infinite; }
.mascot__wave { animation: mascotWave 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: 0% 50%; }
@keyframes mascotBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes mascotWave { 0%, 100% { transform: rotate(0deg); } 20% { transform: rotate(16deg); } 40% { transform: rotate(-6deg); } 60% { transform: rotate(14deg); } }
.mascot__skin { fill: #f2c9a0; }
.mascot__hair { fill: #3a2f2a; }
.mascot__body { fill: var(--primary); }
.mascot__face { fill: #3a2f2a; }
.mascot__smile { fill: none; stroke: #6b4a35; stroke-width: 2.4; stroke-linecap: round; }
.mascot__cap-fill { fill: #1f2937; }
.mascot__cap-line { stroke: #1f2937; stroke-width: 1.6; }
.mascot__bubble-bg { fill: var(--surface); stroke: var(--border); stroke-width: 1.5; }
.mascot__bubble-text { fill: var(--text); font-size: 13px; font-weight: 600; font-family: var(--font-jp); }

@media (max-width: 600px) {
  .hero { flex-direction: column; text-align: center; }
  .hero__intro { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mascot__bob, .mascot__wave { animation: none; }
}

/* ===== Mode selection ===== */
.mode-select { margin-bottom: 1.5rem; }
.mode-select__title { font-size: 1.25rem; margin-bottom: 0.15rem; }
.mode-select__hint { color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 1rem; }
.mode-select__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.mode-card {
  position: relative;
  text-align: left;
  background-color: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.4rem;
  cursor: pointer;
  font-family: inherit;
  color: var(--text);
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.mode-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--primary); }
.mode-card--active { border-color: var(--primary); background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(124, 58, 237, 0.08)); }
.mode-card__label { font-size: 1.6rem; line-height: 1; color: var(--primary); }
.mode-card__title { font-size: 1.15rem; margin: 0.5rem 0 0.35rem; }
.mode-card__desc { color: var(--text-secondary); font-size: 0.92rem; line-height: 1.6; margin-bottom: 0.75rem; }
.mode-card__cta {
  display: inline-block; font-weight: 600; font-size: 0.85rem;
  color: var(--primary); border: 1px solid var(--primary);
  border-radius: 999px; padding: 0.25rem 0.9rem;
}
.mode-card--active .mode-card__cta { background-color: var(--primary); color: #fff; }
.mode-card__badge {
  position: absolute; top: 0.75rem; right: 0.75rem;
  background-color: var(--success); color: #fff;
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 0.15rem 0.55rem; border-radius: 999px;
}
@media (max-width: 600px) { .mode-select__cards { grid-template-columns: 1fr; } }

/* ===== Explore grid ===== */
.card--explore { margin-bottom: 1.5rem; }
.explore-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.85rem;
  margin-top: 1rem;
}
.explore-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem;
  padding: 1.1rem 0.5rem;
  background-color: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none; color: var(--text);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.explore-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--primary); text-decoration: none; }
.explore-tile__mark { font-size: 1.8rem; font-family: var(--font-jp); color: var(--primary); line-height: 1; }
.explore-tile__label { font-size: 0.85rem; font-weight: 500; text-align: center; }
@media (max-width: 700px) { .explore-grid { grid-template-columns: repeat(2, 1fr); } }

/* ===== Japan-themed subtle background (seigaiha waves) ===== */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: transparent;
  background-image:
    radial-gradient(circle at 100% 50%, transparent 20%, rgba(37, 99, 235, 0.06) 21%, rgba(37, 99, 235, 0.06) 34%, transparent 35%),
    radial-gradient(circle at 0% 50%, transparent 20%, rgba(124, 58, 237, 0.06) 21%, rgba(124, 58, 237, 0.06) 34%, transparent 35%);
  background-size: 34px 68px;
}

/* ===== Animated icons (shared) ===== */
.anim-icon { display: inline-block; vertical-align: middle; line-height: 0; }
.anim-icon .ai-svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* star / celebrate */
.ai-star { fill: #f5c518; transform-box: fill-box; transform-origin: center; animation: aiStarPop 2.2s ease-in-out infinite; }
@keyframes aiStarPop { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.14) rotate(6deg); } }
.ai-spark circle { fill: #f5c518; transform-box: fill-box; transform-origin: center; animation: aiTwinkle 1.6s ease-in-out infinite; }
.ai-spark circle:nth-child(2) { animation-delay: 0.4s; }
.ai-spark circle:nth-child(3) { animation-delay: 0.8s; }
.ai-spark circle:nth-child(4) { animation-delay: 1.2s; }
@keyframes aiTwinkle { 0%, 100% { opacity: 0.2; transform: scale(0.6); } 50% { opacity: 1; transform: scale(1); } }

/* refresh / try again */
.ai-arc { fill: none; stroke: var(--primary); stroke-width: 4; stroke-linecap: round; }
.ai-arrowhead { fill: var(--primary); }
.ai-refresh { transform-box: fill-box; transform-origin: center; animation: aiPulse 1.8s ease-in-out infinite; }
@keyframes aiPulse { 0%, 100% { transform: scale(0.9); opacity: 0.7; } 50% { transform: scale(1.05); opacity: 1; } }

/* guided bars */
.ai-bar { fill: var(--primary); transform-box: fill-box; transform-origin: bottom; animation: aiGrow 2s ease-in-out infinite; }
.ai-bar2 { animation-delay: 0.2s; opacity: 0.85; }
.ai-bar3 { animation-delay: 0.4s; opacity: 0.7; }
@keyframes aiGrow { 0%, 100% { transform: scaleY(0.55); } 50% { transform: scaleY(1); } }

/* explore compass */
.ai-compass-ring { fill: none; stroke: var(--primary); stroke-width: 3; }
.ai-compass-needle { transform-box: fill-box; transform-origin: center; animation: aiSpin 5s linear infinite; }
@keyframes aiSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.ai-needle-n { fill: #e11d48; }
.ai-needle-s { fill: var(--text-secondary); }

/* torii + brush bob */
.ai-bob { transform-box: fill-box; transform-origin: center; animation: aiBob 3s ease-in-out infinite; }
@keyframes aiBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.ai-torii { fill: #e11d48; }
.ai-brush-handle { fill: #7c3aed; }
.ai-brush-tip { fill: #1f2937; }

@media (prefers-reduced-motion: reduce) {
  .ai-star, .ai-spark circle, .ai-refresh, .ai-bar, .ai-compass-needle, .ai-bob { animation: none; }
}

/* Animated icon alignment inside result banners */
.result-banner .anim-icon,
.vocab-exercise__banner .anim-icon { margin-right: 0.5rem; }
.vocab-exercise__banner--success { display: flex; align-items: center; gap: 0.25rem; }
.mode-card__label .anim-icon { width: 46px; height: 46px; }

/* ===== Mode switch bar (on plan / explore views) ===== */
.mode-switch {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.mode-switch__label {
  font-weight: 600;
  color: var(--primary);
  background-color: rgba(37, 99, 235, 0.08);
  border-radius: 999px;
  padding: 0.25rem 0.85rem;
  font-size: 0.9rem;
}

/* ===== Day completion gating ===== */
.btn[disabled],
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.3);
}

.today-activity__status {
  display: inline-block;
  width: 1.2em;
  text-align: center;
  color: var(--text-secondary);
  font-weight: 700;
  margin-right: 0.25rem;
}
.today-activity__status--done { color: var(--success); }
.today-activity--done .today-activity__text { color: var(--text-secondary); }

.today-progress,
.curriculum-day__progress {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.85rem 0;
}
.today-progress .progress-bar,
.curriculum-day__progress .progress-bar { flex: 1; }
.today-progress__text,
.curriculum-day__progress-text {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* ===== Locked activity (sequential unlock) ===== */
.activity-card--locked {
  opacity: 0.6;
  background-color: var(--bg);
}
.activity-card--locked .activity-card__title { color: var(--text-secondary); }
.activity-card__locked-hint {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-style: italic;
  margin-top: 0.35rem;
}

/* ===== Lesson finish (confirm to unlock next) ===== */
.lesson-finish {
  margin: 2rem auto 1rem;
  text-align: center;
  max-width: 560px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(37, 99, 235, 0.08));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
}
.lesson-finish__hint {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}

/* Locked activity in the dashboard Today list */
.today-activity--locked { opacity: 0.55; }
.today-activity__lock {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
  margin-left: 0.35rem;
}

/* ===== Next-step call to action (after completing an activity) ===== */
.next-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.next-cta--done {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.10), rgba(37, 99, 235, 0.10));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
}
.next-cta__title { font-weight: 600; }
.next-cta__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* ===== Reference guide page (numbers, counters, time, money) ===== */
.page--guide { max-width: 800px; margin: 0 auto; }
.guide__title { font-size: 1.75rem; margin-bottom: 0.5rem; }
.guide__intro { color: var(--text-secondary); line-height: 1.7; margin-bottom: 1.5rem; }
.guide-section { margin-bottom: 1.75rem; }
.guide-section__heading {
  font-size: 1.1rem;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--border);
}
.guide-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
}
.guide-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.75rem 0.5rem;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--font-jp);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.guide-cell:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--primary); }
.guide-cell__jp { font-size: 1.35rem; color: var(--text); line-height: 1.1; }
.guide-cell__reading { font-size: 0.85rem; color: var(--primary); }
.guide-cell__meaning { font-size: 0.8rem; color: var(--text-secondary); text-align: center; }
.guide__actions { margin: 2rem 0; text-align: center; }
@media (max-width: 600px) { .guide-grid { grid-template-columns: repeat(2, 1fr); } }

/* ===== Drills (sentence building + conjugation) ===== */
.page--drill { max-width: 760px; margin: 0 auto; }
.drill__kind {
  display: inline-block; font-size: 0.8rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--primary); background-color: rgba(37,99,235,0.1);
  padding: 0.2rem 0.6rem; border-radius: 999px; margin: 0.75rem 0 0.5rem;
}
.drill__title { font-size: 1.6rem; margin-bottom: 0.5rem; }
.drill__intro { color: var(--text-secondary); line-height: 1.7; margin-bottom: 1.5rem; }
.drill-q {
  background-color: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 1rem;
}
.drill-q--correct { border-color: var(--success); background: linear-gradient(135deg, rgba(16,185,129,0.06), transparent); }
.drill-q__num { font-size: 0.8rem; font-weight: 700; color: var(--text-secondary); margin-bottom: 0.5rem; }
.drill-q__prompt { font-weight: 500; margin-bottom: 0.75rem; }
.drill-build {
  min-height: 3rem; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center;
  padding: 0.6rem; border: 2px dashed var(--border); border-radius: var(--radius); margin-bottom: 0.75rem;
}
.drill-build__empty { color: var(--text-secondary); }
.drill-bank { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.75rem; }
.drill-tok, .drill-built, .drill-opt {
  font-family: var(--font-jp); font-size: 1.1rem; padding: 0.4rem 0.9rem;
  border: 1px solid var(--border); border-radius: var(--radius); background-color: var(--bg);
  color: var(--text); cursor: pointer; transition: border-color var(--transition), background-color var(--transition);
}
.drill-built { background-color: var(--primary); color: #fff; border-color: var(--primary); }
.drill-tok:hover, .drill-opt:hover { border-color: var(--primary); }
.drill-conj__base { font-family: var(--font-jp); font-size: 1.4rem; font-weight: 600; display: block; margin-bottom: 0.75rem; }
.drill-opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
.drill-opt--ok { background-color: rgba(16,185,129,0.18); border-color: var(--success); }
.drill-opt--wrong { background-color: rgba(220,38,38,0.15); border-color: var(--error); }
.drill-q__result { font-weight: 600; margin-top: 0.5rem; font-family: var(--font-jp); }
.drill-q__result--ok { color: var(--success); }
.drill-q__result--wrong { color: var(--error); font-family: inherit; }
.drill-progress { display: flex; align-items: center; gap: 0.75rem; margin: 1rem 0; }
.drill-progress .progress-bar { flex: 1; }
.drill-progress__text { font-weight: 600; color: var(--text-secondary); }
.drill-done { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 1.1rem; margin: 1rem 0; }
@media (max-width: 600px) { .drill-opts { grid-template-columns: 1fr; } }

/* Drill topic tabs */
.drill__tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.75rem; }
.drill__tab {
  padding: 0.35rem 0.8rem; border-radius: 999px; font-size: 0.85rem; font-weight: 600;
  text-decoration: none; color: var(--text-secondary); border: 1px solid var(--border);
}
.drill__tab--active { background-color: var(--primary); color: #fff; border-color: var(--primary); }

/* ===== Writing-practice tracer ===== */
.kana-detail__char-actions { display: flex; flex-direction: column; gap: 0.4rem; align-items: center; }
.tracer-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0, 0, 0, 0.5);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.tracer {
  background-color: var(--surface);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow-md);
  text-align: center;
  max-width: 340px;
}
.tracer__canvas {
  width: 300px; height: 300px; max-width: 78vw; max-height: 78vw;
  background-color: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  touch-action: none;
  cursor: crosshair;
}
.tracer__hint { color: var(--text-secondary); font-size: 0.85rem; margin: 0.75rem 0; line-height: 1.5; }
.tracer__actions { display: flex; gap: 0.5rem; justify-content: center; }

/* ===== SRS Review page ===== */
.page--review { max-width: 640px; margin: 0 auto; }
.review__stats { display: flex; gap: 0.75rem; margin: 1rem 0 1.5rem; }
.review-stat {
  flex: 1; text-align: center; background-color: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 0.85rem;
}
.review-stat__num { display: block; font-size: 1.6rem; font-weight: 700; color: var(--primary); }
.review-stat__label { font-size: 0.8rem; color: var(--text-secondary); }
.review__empty { text-align: center; padding: 2rem 1rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; }

.flashcard {
  background-color: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-md);
  padding: 2rem 1.5rem; text-align: center; margin-top: 0.5rem;
}
.flashcard__progress { color: var(--text-secondary); font-size: 0.85rem; margin-bottom: 1rem; }
.flashcard__word { font-family: var(--font-jp); font-size: 3rem; line-height: 1.2; }
.flashcard__audio {
  background: var(--bg); border: 1px solid var(--border); border-radius: 999px;
  padding: 0.3rem 0.9rem; cursor: pointer; font-size: 1.1rem; margin: 0.75rem 0;
}
.flashcard__back { margin: 1rem 0; padding-top: 1rem; border-top: 1px solid var(--border); }
.flashcard__reading { font-family: var(--font-jp); font-size: 1.4rem; color: var(--primary); }
.flashcard__meaning { font-size: 1.2rem; font-weight: 600; margin: 0.35rem 0; }
.flashcard__example { font-family: var(--font-jp); color: var(--text-secondary); margin-top: 0.5rem; }
.flashcard__mnemonic { font-size: 0.9rem; color: var(--text-secondary); margin-top: 0.5rem; font-style: italic; }
.flashcard__actions { margin-top: 1.25rem; }
.flashcard__rate { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
.rate { font-weight: 600; }
.rate--again { border-color: var(--error); color: var(--error); }
.rate--hard { border-color: var(--warning); color: var(--warning); }
.rate--good { border-color: var(--primary); color: var(--primary); }
.rate--easy { border-color: var(--success); color: var(--success); }
@media (max-width: 500px) { .flashcard__rate { grid-template-columns: repeat(2, 1fr); } }

/* ===== Shadowing (speaking) page ===== */
.page--shadow { max-width: 720px; margin: 0 auto; }
.shadow__title { font-size: 1.6rem; margin-bottom: 0.5rem; }
.shadow__intro { color: var(--text-secondary); line-height: 1.7; margin-bottom: 0.5rem; }
.shadow__mic-note { color: var(--error); font-size: 0.85rem; min-height: 1rem; }
.shadow__list { display: flex; flex-direction: column; gap: 0.85rem; }
.shadow-item {
  background-color: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem 1.25rem;
}
.shadow-item__jp { font-family: var(--font-jp); font-size: 1.4rem; }
.shadow-item__reading { color: var(--primary); font-size: 0.9rem; }
.shadow-item__meaning { color: var(--text-secondary); margin-bottom: 0.6rem; }
.shadow-item__controls { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.shadow-rec--active { background-color: var(--error) !important; color: #fff !important; border-color: var(--error) !important; }
.shadow__actions { margin: 2rem 0; text-align: center; }

/* ===== Exams (placement / mock) ===== */
.page--exam { max-width: 720px; margin: 0 auto; }
.exam__title { font-size: 1.6rem; margin-bottom: 0.5rem; }
.exam__intro { color: var(--text-secondary); line-height: 1.7; margin-bottom: 1.5rem; }
.exam-q {
  background-color: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 1rem;
}
.exam-q__num { font-size: 0.8rem; font-weight: 700; color: var(--text-secondary); }
.exam-q__jp { font-family: var(--font-jp); font-size: 1.8rem; margin: 0.5rem 0; }
.exam-q__prompt { margin-bottom: 0.75rem; }
.exam-q__options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
.exam-opt {
  font-family: var(--font-jp); font-size: 1.05rem; padding: 0.6rem 0.9rem;
  border: 1px solid var(--border); border-radius: var(--radius); background-color: var(--bg);
  color: var(--text); cursor: pointer; text-align: center;
}
.exam-opt:hover:not(:disabled) { border-color: var(--primary); }
.exam-opt--sel { border-color: var(--primary); background-color: rgba(37,99,235,0.1); }
.exam-opt--ok { border-color: var(--success); background-color: rgba(16,185,129,0.18); }
.exam-opt--wrong { border-color: var(--error); background-color: rgba(220,38,38,0.15); }
.exam__actions { display: flex; align-items: center; gap: 1rem; margin: 1.5rem 0; }
.exam__progress { color: var(--text-secondary); font-weight: 600; }
.exam-result {
  text-align: center; padding: 1.5rem; margin-top: 1rem;
  background: linear-gradient(135deg, rgba(16,185,129,0.08), rgba(37,99,235,0.08));
  border: 1px solid var(--border); border-radius: var(--radius);
}
.exam-result__rec { font-weight: 600; margin: 0.75rem 0; }
.exam-result__actions { margin-top: 1rem; }
@media (max-width: 500px) { .exam-q__options { grid-template-columns: 1fr; } }

/* ===== Gamification: hero, badges, heatmap ===== */
.gamify-hero {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.gamify-stat {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  background: var(--card-bg, var(--bg));
}

.gamify-stat--streak {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 130px;
  background: linear-gradient(135deg, rgba(228, 87, 46, 0.14), rgba(247, 185, 66, 0.12));
  border-color: rgba(228, 87, 46, 0.35);
}

.gamify-stat__mark {
  font-size: 1.6rem;
  color: #e4572e;
  line-height: 1;
}

.gamify-stat__value {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
}

.gamify-stat__label {
  font-size: 0.8rem;
  color: var(--text-secondary, inherit);
  text-align: center;
}

.gamify-stat--xp {
  flex: 1;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.4rem;
}

.gamify-xp__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.gamify-xp__level { font-weight: 700; font-size: 1.05rem; }
.gamify-xp__total { color: var(--primary); font-weight: 600; }
.gamify-xp__next { font-size: 0.78rem; color: var(--text-secondary, inherit); }

/* Badges */
.badges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 0.75rem;
}

.badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.85rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
}

.badge__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 1.3rem;
  font-weight: 700;
}

.badge__name { font-size: 0.72rem; line-height: 1.25; }

.badge--earned .badge__mark {
  background: linear-gradient(135deg, var(--primary), #7c3aed);
  color: #fff;
}

.badge--locked {
  opacity: 0.55;
  filter: grayscale(1);
}

.badge--locked .badge__mark {
  background: var(--border);
  color: var(--text-secondary, #888);
}

/* Heatmap */
.heatmap {
  display: flex;
  gap: 3px;
  overflow-x: auto;
  padding-bottom: 0.25rem;
}

.heatmap__col {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.heatmap__cell {
  width: 13px;
  height: 13px;
  border-radius: 3px;
  background: var(--border);
}

.heatmap__cell--l1 { background: rgba(67, 97, 238, 0.35); }
.heatmap__cell--l2 { background: rgba(67, 97, 238, 0.55); }
.heatmap__cell--l3 { background: rgba(67, 97, 238, 0.78); }
.heatmap__cell--l4 { background: rgba(67, 97, 238, 1); }

@media (max-width: 560px) {
  .heatmap__cell { width: 11px; height: 11px; }
}

/* ===== Gamification chip (dashboard plan view) ===== */
.gamify-chip {
  display: inline-flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  padding: 0.5rem 0.9rem;
  margin-bottom: 1rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  text-decoration: none;
  color: inherit;
  background: var(--card-bg, var(--bg));
  font-size: 0.9rem;
}

.gamify-chip:hover { border-color: var(--primary); }

.gamify-chip__item { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 600; }
.gamify-chip__mark { color: #e4572e; }

/* ===== Vocabulary Illustrations ===== */
.vocab-art {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--radius);
  background: var(--card-bg, rgba(0, 0, 0, 0.02));
  padding: 4px;
}

.vocab-art svg { display: block; }

.vocab-result { display: flex; align-items: center; gap: 0.6rem; }

/* ===== Brand Footer ===== */
.app-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 2rem 1.5rem 2.5rem;
  margin-top: 2rem;
  border-top: 1px solid var(--border);
  background: var(--surface);
  text-align: center;
}

.app-footer__logo {
  height: 72px;
  width: auto;
  opacity: 0.95;
}

.app-footer__copy {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin: 0;
}

@media (max-width: 560px) {
  .app-footer__logo { height: 60px; }
  .app-footer__copy { font-size: 0.76rem; }
}

/* ===== Stroke Order Viewer ===== */
.kana-detail__stroke-order {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.kana-detail__section-title {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.6rem;
}

.strokes {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
}

.strokes__stage {
  width: 160px;
  height: 160px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg, #fff);
}

.strokes--compact .strokes__stage { width: 150px; height: 150px; }

.strokes__svg { width: 100%; height: 100%; display: block; }

.strokes__grid {
  stroke: rgba(127, 127, 127, 0.28);
  stroke-width: 1;
  stroke-dasharray: 5 5;
}

.strokes__stroke {
  stroke: var(--text);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.strokes__ghost {
  stroke: rgba(127, 127, 127, 0.22);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.strokes__stroke--anim { stroke: var(--vermilion); }

.strokes__dot { fill: var(--vermilion); }

.strokes__num {
  fill: var(--indigo);
  font-size: 8px;
  font-weight: 700;
  font-family: 'Segoe UI', Arial, sans-serif;
  text-anchor: middle;
}

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

.strokes__status {
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.strokes__none {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* Tracer: stroke-order guide layered behind the drawing canvas */
.tracer__stage {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 0 auto;
}

.tracer__guide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0.9;
}

.tracer__guide .strokes { align-items: center; }
.tracer__guide .strokes__stage {
  width: 300px;
  height: 300px;
  border: none;
  background: transparent;
}

.tracer__guide .strokes__controls {
  position: absolute;
  bottom: -2.4rem;
  left: 0;
  right: 0;
  justify-content: center;
  pointer-events: auto;
}

.tracer__canvas { position: relative; z-index: 1; }

.kana-detail__credit {
  font-size: 0.72rem;
  color: var(--text-secondary);
  margin-top: 0.4rem;
}

/* ===== Catalog & Course Landing (paid platform) ===== */
.catalog__title, .pricing__title, .taster__title { margin-bottom: 0.75rem; }

.catalog__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
  margin-top: 1rem;
}

.course-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card-bg, #fff);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: inherit;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.course-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--primary); text-decoration: none; }
.course-card__lang { font-size: 0.72rem; font-weight: 700; color: var(--indigo); letter-spacing: 0.05em; }
.course-card__title { font-size: 1.2rem; margin: 0; }
.course-card__desc { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.5; }
.course-card__from { font-weight: 700; color: var(--primary); }
.course-card__cta { font-size: 0.85rem; font-weight: 600; color: var(--primary); margin-top: auto; }

/* Course hero */
.course-hero { margin: 1rem 0 1.5rem; }
.course-hero__lang { font-size: 0.75rem; font-weight: 700; color: var(--indigo); letter-spacing: 0.05em; }
.course-hero__title { font-size: clamp(1.4rem, 5vw, 1.9rem); margin: 0.25rem 0 0.5rem; overflow-wrap: break-word; }
.course-hero__desc { color: var(--text-secondary); line-height: 1.65; max-width: 720px; }

/* Taster */
.taster {
  border: 1px solid rgba(67, 97, 238, 0.3);
  background: linear-gradient(135deg, rgba(67, 97, 238, 0.06), rgba(228, 87, 46, 0.05));
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.75rem;
}
.taster__sub { color: var(--text-secondary); margin-bottom: 0.9rem; }
.taster__grid { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.taster__item {
  display: inline-flex; flex-direction: column; gap: 0.15rem;
  padding: 0.5rem 0.8rem; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--card-bg, #fff);
  flex: 1 1 auto; min-width: 140px; max-width: 220px;
}
.taster__ref { overflow-wrap: break-word; }
@media (max-width: 480px) {
  .taster__item { max-width: none; flex-basis: 100%; }
}
.taster__kind { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--indigo); font-weight: 700; }
.taster__ref { font-size: 0.9rem; }
.taster__cta { margin-top: 1rem; }

/* Pricing */
.pricing__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.plan-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.25rem;
  text-align: center;
  background: var(--card-bg, #fff);
  box-shadow: var(--shadow);
}
.plan-card--featured { border-color: var(--primary); box-shadow: var(--shadow-md); }
.plan-card__badge {
  position: absolute; top: -0.7rem; left: 50%; transform: translateX(-50%);
  background: var(--primary); color: #fff; font-size: 0.7rem; font-weight: 700;
  padding: 0.2rem 0.7rem; border-radius: 999px;
}
.plan-card__name { font-size: 1.05rem; margin-bottom: 0.5rem; }
.plan-card__price { font-size: 2rem; font-weight: 800; color: var(--text); }
.plan-card__suffix { font-size: 0.9rem; font-weight: 500; color: var(--text-secondary); }
.plan-card__buy { margin-top: 1rem; width: 100%; }
.pricing__msg { margin-top: 1rem; font-size: 0.9rem; }
.pricing__help { margin: 0 0 1rem; color: var(--text-secondary); font-size: 0.92rem; }
.pricing__help a { color: var(--primary); font-weight: 600; }

/* Loading placeholders for platform pages (centered, muted, with a spinner) */
.catalog__loading, .course__loading, .account__loading, .legal__loading {
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 40vh; color: var(--text-secondary); font-size: 0.95rem;
}
.catalog__loading::before, .course__loading::before,
.account__loading::before, .legal__loading::before {
  content: ''; width: 1.1rem; height: 1.1rem; border-radius: 50%;
  border: 2px solid var(--border); border-top-color: var(--primary);
  animation: nm-spin 0.7s linear infinite;
}
@keyframes nm-spin { to { transform: rotate(360deg); } }

/* Auth form labelled rows */
.form__row { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.75rem; }
.form__label { font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); }

/* ===== Account / Auth (Supabase) ===== */
.auth {
  max-width: 400px;
  margin: 2rem auto;
  padding: 1.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card-bg, #fff);
  box-shadow: var(--shadow);
}
.auth__title { text-align: center; margin-bottom: 1rem; }
.auth__next { text-align: center; color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 0.75rem; }
.auth__tabs { display: flex; gap: 0.5rem; margin-bottom: 1.25rem; }
.auth__tab {
  flex: 1; padding: 0.5rem; border: 1px solid var(--border); border-radius: var(--radius);
  background: transparent; color: var(--text-secondary); font-weight: 600;
}
.auth__tab--active { background: var(--primary); color: #fff; border-color: var(--primary); }
.auth__form { display: flex; flex-direction: column; gap: 0.75rem; }
.auth__form .form__input {
  width: 100%; padding: 0.65rem 0.8rem; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--bg); color: var(--text); font-size: 0.95rem;
}
.auth__submit { width: 100%; }
.auth__link { background: none; border: none; color: var(--primary); font-size: 0.85rem; text-align: center; cursor: pointer; }
.auth__msg { text-align: center; font-size: 0.9rem; margin-top: 0.9rem; line-height: 1.5; }

/* Account (signed in) */
.account-card {
  max-width: 560px; margin: 1rem auto; padding: 1.5rem;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--card-bg, #fff); box-shadow: var(--shadow);
}
.account-card__name { font-size: 1.15rem; margin-bottom: 0.15rem; }
.account-card__email { margin-bottom: 1.25rem; color: var(--text-secondary); font-size: 0.92rem; }
.account-card__section-title {
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-secondary); margin: 0 0 0.6rem;
}
.account-card__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.25rem; }

/* Subscription card (paid-platform billing summary) */
.sub-card {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 1.1rem 1.2rem; background: var(--surface, #fff);
}
.sub-card + .sub-card { margin-top: 0.75rem; }
.sub-card__head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem;
  padding-bottom: 0.9rem; margin-bottom: 0.9rem; border-bottom: 1px solid var(--border);
}
.sub-card__plan { font-size: 1.1rem; margin: 0; }
.sub-card__scope { margin: 0.15rem 0 0; color: var(--text-secondary); font-size: 0.85rem; }
.sub-card__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 1.25rem;
}
.sub-detail { display: flex; flex-direction: column; gap: 0.1rem; }
.sub-detail__label {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-secondary);
}
.sub-detail__value { font-size: 0.95rem; color: var(--text); }
.sub-card__note {
  margin-top: 0.9rem; padding: 0.6rem 0.75rem; border-radius: var(--radius);
  font-size: 0.85rem; background: rgba(37,99,235,0.08); color: var(--text-secondary);
}
.sub-card__note--warn { background: rgba(217,119,6,0.12); color: var(--warning); }
.sub-card__change { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--border); }
.sub-card__change-label {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-secondary); margin: 0 0 0.55rem;
}
.sub-card__change-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sub-empty {
  text-align: center; padding: 1.5rem 1rem; border: 1px dashed var(--border);
  border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: 0.5rem; align-items: center;
}
.sub-empty__title { font-weight: 700; font-size: 1.05rem; }
.btn--sm { padding: 0.4rem 0.9rem; font-size: 0.85rem; }
@media (max-width: 480px) {
  .sub-card__grid { grid-template-columns: 1fr; }
}
.ent-list { display: flex; flex-direction: column; gap: 0.5rem; }
.ent-list__item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.6rem 0.8rem; border: 1px solid var(--border); border-radius: var(--radius);
}
.ent-list__status { font-size: 0.78rem; font-weight: 700; padding: 0.15rem 0.55rem; border-radius: 999px; }
.ent-list__status--active { background: rgba(16,185,129,0.15); color: var(--success); }
.ent-list__status--canceled, .ent-list__status--past_due { background: rgba(217,119,6,0.15); color: var(--warning); }
.ent-list__status--expired, .ent-list__status--refunded { background: rgba(220,38,38,0.12); color: var(--error); }

/* Clickable taster samples */
.taster__item--link { text-decoration: none; color: inherit; transition: border-color var(--transition), transform var(--transition); }
.taster__item--link:hover { border-color: var(--primary); transform: translateY(-1px); text-decoration: none; }
.taster__try { font-size: 0.75rem; font-weight: 700; color: var(--primary); margin-top: 0.2rem; }

/* ===== Preview ("free sample") banner ===== */
.preview-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.7rem 1.25rem;
  background: linear-gradient(135deg, var(--indigo), var(--vermilion));
  color: #fff;
  box-shadow: 0 -2px 10px rgba(16,24,40,0.15);
}
.preview-banner__text { font-size: 0.9rem; }
.preview-banner__text strong { font-weight: 700; }
.preview-banner__cta { flex-shrink: 0; }
.has-preview-banner { padding-bottom: 3.5rem; }

@media (max-width: 560px) {
  .preview-banner { font-size: 0.82rem; padding: 0.6rem 0.9rem; }
}

/* ===== Legal pages + footer links ===== */
.page--legal { max-width: 760px; margin: 0 auto; }
.legal__title { margin: 1rem 0; }
.legal__meta { color: var(--text-secondary); font-size: 0.85rem; margin-bottom: 1rem; }
.legal__body h2 { font-size: 1.1rem; margin: 1.25rem 0 0.4rem; }
.legal__body p, .legal__body li { line-height: 1.65; }
.legal__body ul { list-style: disc; padding-left: 1.4rem; margin: 0.5rem 0; }
.legal__plans { list-style: none; padding-left: 0; }
.legal__plans li { padding: 0.25rem 0; }
.legal__links {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center;
  margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--border);
}
.legal__links a { font-size: 0.9rem; }

.app-footer__links { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin: 0.25rem 0; }
.app-footer__links a { font-size: 0.82rem; color: var(--text-secondary); }
.app-footer__links a:hover { color: var(--primary); }