/* ==============================================================
   МатГим — палитра для подростка: глубокий индиго + мятный акцент,
   тёплый янтарь для достижений. Игровой, но не «детский».
   ============================================================== */

:root, [data-theme="light"] {
  --font-body: 'Inter', system-ui, sans-serif;
  --font-display: 'Fraunces', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  --text-2xl: clamp(1.875rem, 1.4rem + 2vw, 2.75rem);
  --text-task: clamp(2rem, 1.5rem + 3.5vw, 3.75rem);

  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem;
  --space-4: 1rem;   --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem;   --space-10: 2.5rem; --space-12: 3rem;
  --space-16: 4rem;

  --radius-sm: .5rem; --radius-md: .75rem; --radius-lg: 1rem;
  --radius-xl: 1.5rem; --radius-2xl: 2rem; --radius-full: 9999px;

  --transition: 200ms cubic-bezier(.16, 1, .3, 1);

  /* Surfaces */
  --color-bg: #f5f4ff;
  --color-surface: #ffffff;
  --color-surface-2: #fbfaff;
  --color-surface-offset: #efedff;
  --color-divider: #e6e3f5;
  --color-border: #d9d5ef;

  /* Text */
  --color-text: #1b1637;
  --color-text-muted: #635e85;
  --color-text-faint: #a49fc0;
  --color-text-inverse: #ffffff;

  /* Primary — deep indigo */
  --color-primary: #5b3fd6;
  --color-primary-hover: #4a30bd;
  --color-primary-active: #3a239e;
  --color-primary-soft: #ece7ff;

  /* Accent — mint (correct / streak) */
  --color-accent: #17c39b;
  --color-accent-hover: #10a683;
  --color-accent-soft: #d6f6ec;

  /* Warm — amber (achievements, xp) */
  --color-warm: #f2a423;
  --color-warm-soft: #fbead0;

  /* Error / wrong */
  --color-error: #e0435b;
  --color-error-soft: #fce0e4;

  --shadow-sm: 0 1px 2px rgb(27 22 55 / 6%);
  --shadow-md: 0 6px 20px rgb(27 22 55 / 8%);
  --shadow-lg: 0 20px 40px rgb(91 63 214 / 15%);
  --shadow-primary: 0 8px 24px rgb(91 63 214 / 25%);
}

[data-theme="dark"] {
  --color-bg: #0f0d1f;
  --color-surface: #171529;
  --color-surface-2: #1c1a30;
  --color-surface-offset: #221f3a;
  --color-divider: #262340;
  --color-border: #35314f;

  --color-text: #ecebf4;
  --color-text-muted: #9a95b8;
  --color-text-faint: #6b6688;
  --color-text-inverse: #0f0d1f;

  --color-primary: #8b73ff;
  --color-primary-hover: #a08cff;
  --color-primary-active: #b3a4ff;
  --color-primary-soft: #2a2450;

  --color-accent: #34d9b3;
  --color-accent-hover: #4be2c0;
  --color-accent-soft: #143a30;

  --color-warm: #f9b955;
  --color-warm-soft: #3c2f16;

  --color-error: #ff6879;
  --color-error-soft: #3a1c22;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
  --shadow-md: 0 6px 20px rgb(0 0 0 / 45%);
  --shadow-lg: 0 20px 40px rgb(0 0 0 / 55%);
  --shadow-primary: 0 8px 24px rgb(139 115 255 / 30%);
}

/* ============ APP SHELL ============ */

body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
}

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: color-mix(in oklab, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-divider);
}

.brand { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-primary); }
.brand svg { color: currentColor; }
.brand-name { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; color: var(--color-text); letter-spacing: -.02em; }
.brand-name em { font-style: italic; color: var(--color-primary); }

.topbar-actions { display: inline-flex; align-items: center; gap: var(--space-2); }

.streak, .xp {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 10px;
  background: var(--color-surface-offset);
  border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: 600;
  color: var(--color-text);
  min-height: 32px;
}
.streak { color: #d55e00; }
[data-theme="dark"] .streak { color: #ffb066; }
.xp { color: var(--color-warm); }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--radius-full);
  color: var(--color-text-muted); transition: background var(--transition), color var(--transition);
}
.icon-btn:hover, .icon-btn:active { background: var(--color-surface-offset); color: var(--color-text); }

/* ============ NAV TABBAR ============ */

.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  background: color-mix(in oklab, var(--color-surface) 92%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--color-divider);
}
.tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 8px 4px; border-radius: var(--radius-md);
  font-size: 11px; font-weight: 500; color: var(--color-text-muted);
  min-height: 56px;
  transition: color var(--transition), background var(--transition);
}
.tab > span:first-child { font-size: 22px; line-height: 1; }
.tab[aria-current="page"] { color: var(--color-primary); background: var(--color-primary-soft); }
.tab:active { transform: scale(.96); }

/* Hide tabbar in session mode */
body.in-session .tabbar { display: none; }
body.in-session { padding-bottom: env(safe-area-inset-bottom); }

/* ============ PAGES ============ */

.page {
  max-width: 720px; margin: 0 auto;
  padding: var(--space-5) var(--space-4) var(--space-8);
  display: flex; flex-direction: column; gap: var(--space-5);
}

.page-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-xl); letter-spacing: -.02em;
  color: var(--color-text);
}
.page-sub { color: var(--color-text-muted); font-size: var(--text-sm); margin-top: calc(-1 * var(--space-3)); }

.section-title {
  font-size: var(--text-sm); font-weight: 700;
  color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .08em;
  margin-top: var(--space-3);
}

.back-link {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 500;
  padding: 4px 0;
}
.back-link:hover { color: var(--color-primary); }

/* ============ HERO CARD ============ */

.hero {
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  color: white;
  position: relative; overflow: hidden;
  display: flex; gap: var(--space-4); align-items: flex-end;
  min-height: 220px;
}
.card-gradient {
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(255,255,255,.14), transparent 55%),
    linear-gradient(135deg, var(--color-primary) 0%, #7b5cf3 55%, #17c39b 130%);
  box-shadow: var(--shadow-primary);
}
.hero-text { flex: 1; display: flex; flex-direction: column; gap: var(--space-3); }
.eyebrow { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .1em; opacity: .85; font-weight: 600; }
.hero-title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.hero-sub { font-size: var(--text-sm); opacity: .9; }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }

.hero-medals { display: none; }
@media (min-width: 560px) { .hero-medals { display: block; }
  .medal { background: rgba(255,255,255,.15); backdrop-filter: blur(8px); padding: 12px 16px; border-radius: var(--radius-lg); font-size: var(--text-sm); font-weight: 600; }
}

.progress {
  width: 100%; height: 8px; border-radius: var(--radius-full);
  background: rgba(255,255,255,.25); overflow: hidden;
}
.hero .progress { background: rgba(255,255,255,.22); }
.progress-bar {
  height: 100%; background: white; border-radius: inherit;
  transition: width 500ms cubic-bezier(.16,1,.3,1);
}
.page .progress { background: var(--color-surface-offset); }
.page .progress-bar { background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); }

/* ============ BUTTONS ============ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: 0 var(--space-5);
  border-radius: var(--radius-full);
  font-size: var(--text-sm); font-weight: 600;
  transition: transform var(--transition), background var(--transition), box-shadow var(--transition), color var(--transition);
  user-select: none;
}
.btn-primary { background: white; color: var(--color-primary); box-shadow: 0 4px 14px rgb(0 0 0 / 12%); }
.btn-primary:hover { background: color-mix(in oklab, white 92%, var(--color-primary)); }
.btn-primary:active { transform: scale(.97); }

.page .btn-primary { background: var(--color-primary); color: white; box-shadow: var(--shadow-primary); }
.page .btn-primary:hover { background: var(--color-primary-hover); }

.btn-ghost { background: color-mix(in oklab, white 20%, transparent); color: white; border: 1px solid rgba(255,255,255,.35); }
.btn-ghost:hover { background: color-mix(in oklab, white 30%, transparent); }
.page .btn-ghost { background: var(--color-surface-offset); color: var(--color-text); border: 1px solid var(--color-border); }
.page .btn-ghost:hover { background: var(--color-primary-soft); border-color: var(--color-primary); color: var(--color-primary); }

.btn-danger { color: var(--color-error); border-color: color-mix(in oklab, var(--color-error) 40%, transparent); }
.btn-danger:hover { background: var(--color-error-soft); color: var(--color-error); border-color: var(--color-error); }

/* ============ MODULE GRID ============ */

.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-3);
}
.module-card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  min-height: 138px;
  text-align: left;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  position: relative; overflow: hidden;
}
.module-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--color-primary); }
.module-card:active { transform: scale(.98); }
.module-icon {
  width: 40px; height: 40px; border-radius: var(--radius-md);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; background: var(--color-primary-soft); color: var(--color-primary);
  flex-shrink: 0;
}
.module-card[data-color="mint"] .module-icon { background: var(--color-accent-soft); color: var(--color-accent-hover); }
[data-theme="dark"] .module-card[data-color="mint"] .module-icon { color: var(--color-accent); }
.module-card[data-color="warm"] .module-icon { background: var(--color-warm-soft); color: var(--color-warm); }
.module-card[data-color="rose"] .module-icon { background: var(--color-error-soft); color: var(--color-error); }
.module-card[data-color="blue"] .module-icon { background: #dbeafe; color: #1e40af; }
[data-theme="dark"] .module-card[data-color="blue"] .module-icon { background: #1e3a5f; color: #93c5fd; }

.module-title { font-size: var(--text-sm); font-weight: 700; color: var(--color-text); line-height: 1.25; }
.module-desc { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.4; }
.module-meta { margin-top: auto; display: flex; align-items: center; justify-content: space-between; font-size: var(--text-xs); color: var(--color-text-muted); }
.mastery-dot { display: inline-block; width: 32px; height: 4px; border-radius: 2px; background: var(--color-divider); overflow: hidden; }
.mastery-dot > i { display: block; height: 100%; background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); }

/* ============ MODES ============ */

.modes { display: flex; flex-direction: column; gap: var(--space-3); }
.mode-card {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  text-align: left;
  width: 100%;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.mode-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); }
.mode-card:active { transform: scale(.99); }
.mode-icon {
  width: 48px; height: 48px; border-radius: var(--radius-md);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 24px; flex-shrink: 0;
  background: var(--color-primary-soft); color: var(--color-primary);
}
.mode-card[data-mode="speed"] .mode-icon { background: var(--color-warm-soft); color: var(--color-warm); }
.mode-card[data-mode="marathon"] .mode-icon { background: var(--color-accent-soft); color: var(--color-accent-hover); }
[data-theme="dark"] .mode-card[data-mode="marathon"] .mode-icon { color: var(--color-accent); }
.mode-body { flex: 1; }
.mode-title { font-weight: 700; color: var(--color-text); font-size: var(--text-base); }
.mode-desc { color: var(--color-text-muted); font-size: var(--text-xs); margin-top: 2px; }
.mode-arrow { color: var(--color-text-faint); font-size: 20px; }

/* ============ SESSION ============ */

.session-page {
  max-width: 640px;
  min-height: calc(100dvh - 60px);
  display: flex; flex-direction: column; gap: var(--space-4);
  padding-top: var(--space-3);
}
.session-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
}
.session-meta { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.chip {
  padding: 4px 10px; border-radius: var(--radius-full);
  background: var(--color-primary-soft); color: var(--color-primary);
  font-size: var(--text-xs); font-weight: 600;
}
.chip + .chip { background: var(--color-surface-offset); color: var(--color-text-muted); }
.session-timer {
  font-family: var(--font-mono); font-size: var(--text-lg); font-weight: 700;
  color: var(--color-text); min-width: 60px; text-align: right;
  font-variant-numeric: tabular-nums;
}
.session-timer.warn { color: var(--color-warm); }
.session-timer.danger { color: var(--color-error); animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .5; } }

.session-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-divider);
}
.stat-cell { display: flex; flex-direction: column; align-items: center; }
.stat-num { font-family: var(--font-mono); font-size: var(--text-lg); font-weight: 700; color: var(--color-text); font-variant-numeric: tabular-nums; }
.stat-cell:nth-child(1) .stat-num { color: var(--color-accent-hover); }
[data-theme="dark"] .stat-cell:nth-child(1) .stat-num { color: var(--color-accent); }
.stat-cell:nth-child(2) .stat-num { color: var(--color-error); }
.stat-cell:nth-child(3) .stat-num { color: var(--color-warm); }
.stat-label { font-size: 11px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .06em; }

/* Task area */
.task-area {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--space-6) var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-divider);
  min-height: 200px;
  text-align: center;
}
.task-prompt { color: var(--color-text-muted); font-size: var(--text-sm); margin-bottom: var(--space-4); }
.task-expression {
  font-family: var(--font-display);
  font-size: var(--text-task);
  font-weight: 700; letter-spacing: -.02em;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.task-word {
  font-family: var(--font-body);
  font-size: clamp(2.5rem, 4vw + 1rem, 4.5rem);
  font-weight: 700; color: var(--color-text);
}
.task-symbol-stream {
  font-family: var(--font-mono);
  font-size: clamp(4rem, 8vw + 2rem, 8rem);
  font-weight: 700; color: var(--color-primary);
  min-height: 1.1em;
  line-height: 1;
}
.task-text { font-family: var(--font-body); font-size: var(--text-base); color: var(--color-text); line-height: 1.7; max-width: 100%; }
.task-text mark { background: var(--color-warm-soft); color: var(--color-warm); padding: 0 4px; border-radius: 4px; font-weight: 600; }

/* Fraction rendering */
.frac {
  display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle;
  margin: 0 .1em; line-height: 1;
}
.frac .num, .frac .den { padding: 0 .35em; font-size: .85em; }
.frac .num { border-bottom: .07em solid currentColor; padding-bottom: .05em; }

/* Attention grid */
.attn-grid {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 400px;
}
.attn-cell {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: clamp(14px, 3vw, 22px); font-weight: 700;
  background: var(--color-surface-offset);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  cursor: pointer; user-select: none;
  color: var(--color-text);
  transition: transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
  min-height: 40px;
}
.attn-cell:active { transform: scale(.92); }
.attn-cell.hit { background: var(--color-accent-soft); border-color: var(--color-accent); color: var(--color-accent-hover); transform: scale(.9); pointer-events: none; }
[data-theme="dark"] .attn-cell.hit { color: var(--color-accent); }
.attn-cell.miss { background: var(--color-error-soft); border-color: var(--color-error); color: var(--color-error); animation: shake 300ms; }

/* Word memory chips */
.word-list {
  display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center;
}
.word-chip {
  padding: 8px 14px; background: var(--color-primary-soft); color: var(--color-primary);
  border-radius: var(--radius-md); font-weight: 600; font-size: var(--text-base);
  animation: pop 300ms ease-out;
}
@keyframes pop { from { transform: scale(.7); opacity: 0; } }

/* Answer area */
.answer-area {
  display: flex; flex-direction: column; gap: var(--space-3);
}
.answer-input {
  width: 100%; padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 700;
  text-align: center;
  color: var(--color-text);
  min-height: 64px;
  transition: border-color var(--transition), background var(--transition);
  -moz-appearance: textfield;
}
.answer-input::-webkit-outer-spin-button,
.answer-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.answer-input:focus { outline: none; border-color: var(--color-primary); background: var(--color-primary-soft); }
.answer-input.correct { border-color: var(--color-accent); background: var(--color-accent-soft); }
.answer-input.wrong { border-color: var(--color-error); background: var(--color-error-soft); animation: shake 400ms; }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

.choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}
.choice-btn {
  padding: var(--space-4);
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--text-base); font-weight: 600;
  color: var(--color-text);
  min-height: 60px;
  transition: transform var(--transition), border-color var(--transition), background var(--transition);
}
.choice-btn:hover { border-color: var(--color-primary); background: var(--color-primary-soft); }
.choice-btn:active { transform: scale(.97); }
.choice-btn.correct { background: var(--color-accent-soft); border-color: var(--color-accent); color: var(--color-accent-hover); }
[data-theme="dark"] .choice-btn.correct { color: var(--color-accent); }
.choice-btn.wrong { background: var(--color-error-soft); border-color: var(--color-error); color: var(--color-error); }

/* Numeric keypad for mobile */
.keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}
.keypad button {
  min-height: 56px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font-family: var(--font-mono); font-size: var(--text-lg); font-weight: 700;
  color: var(--color-text);
  transition: transform var(--transition), background var(--transition);
}
.keypad button:active { transform: scale(.95); background: var(--color-primary-soft); }
.keypad .key-submit { background: var(--color-primary); color: white; border-color: var(--color-primary); }
.keypad .key-submit:active { background: var(--color-primary-active); }
.keypad .key-back { color: var(--color-text-muted); }

.action-row { display: flex; gap: var(--space-2); }
.action-row .btn { flex: 1; }

/* Feedback */
.feedback {
  min-height: 32px;
  text-align: center;
  font-size: var(--text-sm);
  font-weight: 600;
  color: transparent;
  transition: color var(--transition);
}
.feedback.ok { color: var(--color-accent-hover); }
[data-theme="dark"] .feedback.ok { color: var(--color-accent); }
.feedback.err { color: var(--color-error); }

/* ============ RESULT ============ */

.result-page { align-items: center; text-align: center; }
.result-crown { color: var(--color-primary); margin: var(--space-6) auto 0; }
.result-crown svg text { font-family: var(--font-mono); }
.result-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3);
  width: 100%; max-width: 480px;
}
.rcard {
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column; gap: 4px;
}
.rlabel { font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .06em; }
.rval { font-family: var(--font-mono); font-size: var(--text-lg); font-weight: 700; color: var(--color-text); font-variant-numeric: tabular-nums; }
.result-cta { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; width: 100%; max-width: 480px; }
.result-cta .btn { flex: 1; min-width: 140px; }
.achievements-new { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }

/* ============ ACHIEVEMENTS ============ */

.achievements {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--space-2);
}
.achievement {
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  text-align: center;
  display: flex; flex-direction: column; gap: 4px; align-items: center;
  opacity: .45;
  transition: opacity var(--transition), transform var(--transition);
}
.achievement.earned { opacity: 1; border-color: var(--color-warm); background: var(--color-warm-soft); }
[data-theme="dark"] .achievement.earned { background: color-mix(in oklab, var(--color-warm) 15%, var(--color-surface)); }
.achievement-icon { font-size: 28px; }
.achievement-name { font-size: var(--text-xs); font-weight: 700; color: var(--color-text); line-height: 1.2; }
.achievement-desc { font-size: 11px; color: var(--color-text-muted); line-height: 1.3; }

.achievement.pop {
  padding: var(--space-2) var(--space-3);
  background: var(--color-warm-soft); border: 1px solid var(--color-warm);
  border-radius: var(--radius-full);
  flex-direction: row; opacity: 1;
  animation: pop 400ms ease-out;
}
.achievement.pop .achievement-icon { font-size: 18px; }

/* ============ STATS ============ */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
}
.kpi {
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column; gap: 4px;
}
.kpi-label { font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .06em; }
.kpi-val { font-family: var(--font-mono); font-size: var(--text-xl); font-weight: 700; color: var(--color-text); font-variant-numeric: tabular-nums; }

.chart-card {
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
}
#chartActivity { width: 100%; height: auto; }

.mastery-list { display: flex; flex-direction: column; gap: var(--space-3); }
.mastery-row {
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.mastery-head { display: flex; justify-content: space-between; font-size: var(--text-sm); font-weight: 600; }
.mastery-bar { height: 8px; background: var(--color-surface-offset); border-radius: 4px; overflow: hidden; }
.mastery-bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); border-radius: inherit; transition: width 500ms; }
.mastery-meta { font-size: var(--text-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

/* ============ REPORT ============ */

.report-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.report {
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  line-height: 1.6;
}
.report h2 { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-text); margin-bottom: var(--space-3); }
.report h3 { font-size: var(--text-sm); font-weight: 700; color: var(--color-text); margin-top: var(--space-4); margin-bottom: var(--space-2); text-transform: uppercase; letter-spacing: .06em; }
.report p { color: var(--color-text); margin-bottom: var(--space-2); max-width: none; }
.report ul { padding-left: var(--space-5); color: var(--color-text); }
.report .r-hero {
  padding: var(--space-4);
  background: linear-gradient(135deg, var(--color-primary-soft), var(--color-accent-soft));
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  color: var(--color-text);
}
.report table { width: 100%; border-collapse: collapse; margin-top: var(--space-2); font-size: var(--text-xs); }
.report th, .report td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--color-divider); }
.report th { font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .04em; font-size: 11px; }
.report .num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

@media print {
  body { background: white; padding: 0; }
  .topbar, .tabbar, .report-actions { display: none !important; }
  .report { border: none; padding: 0; }
  .page { max-width: 100%; padding: 0; }
}

/* ============ FLOAT TOAST ============ */

.toast-layer {
  position: fixed; left: 50%; top: 80px; transform: translateX(-50%);
  z-index: 100; pointer-events: none;
  display: flex; flex-direction: column; gap: 8px; align-items: center;
}
.toast {
  padding: 10px 16px;
  background: var(--color-text); color: var(--color-text-inverse);
  border-radius: var(--radius-full);
  font-size: var(--text-sm); font-weight: 600;
  box-shadow: var(--shadow-lg);
  animation: toastIn 300ms ease-out, toastOut 300ms ease-in 2s forwards;
}
.toast.xp { background: var(--color-warm); color: #3b2500; }
.toast.ach { background: var(--color-accent); color: #003528; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-8px); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-8px); } }

/* ---- Мельк-число: прогрессия уровней ---- */
.flash-meta {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin-bottom: 12px;
}
.flash-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--color-primary-soft); color: var(--color-primary);
  font-size: var(--text-xs); font-weight: 600;
  border: 1px solid transparent;
}
.flash-display {
  transition: color .12s, transform .12s;
  min-height: 1.2em;
}
.flash-display.flash-on {
  color: var(--color-primary);
  transform: scale(1.02);
  text-shadow: 0 0 24px color-mix(in srgb, var(--color-primary) 30%, transparent);
}
.level-toast {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: .85em;
  font-weight: 700;
  animation: toastIn .25s ease-out;
}
.level-toast.ok { background: var(--color-accent-soft); color: var(--color-accent-hover); }
[data-theme="dark"] .level-toast.ok { color: var(--color-accent); }
.level-toast.err { background: var(--color-error-soft); color: var(--color-error); }