/* ============================================================
   WAVE / Bank Побед — дизайн-система (Sprint 0)
   Палитра и типографика взяты из PROTOTYPE/prototype.html.
   Адаптивный layout: mobile (<768) / tablet (768-1023) / desktop (>=1024)
   ============================================================ */

/* ----- 1. Дизайн-токены ----- */
:root {
  /* Цвета фона */
  --bg-primary: #0c0a18;
  --bg-secondary: #16122a;
  --bg-tertiary: #1f1535;
  --bg-card: #1a1625;
  --bg-card-2: #221a36;

  /* Бренд */
  --accent: #BB8CFF;
  --accent-strong: #8B5EF5;
  --accent-soft: rgba(187, 140, 255, 0.15);

  /* Текст */
  --text: #ffffff;
  --text-muted: rgba(255, 255, 255, 0.55);
  --text-faint: rgba(255, 255, 255, 0.30);

  /* Семантика */
  --success: #C4FF4D;
  --danger: #FF6B6B;
  --warning: #FFC857;
  --fire: #FF8A3D;

  /* Радиусы */
  --r-card: 22px;
  --r-button: 16px;
  --r-pill: 999px;

  /* Тени */
  --shadow-card: 0 12px 36px rgba(0, 0, 0, 0.35);
  --shadow-glow: 0 0 30px rgba(187, 140, 255, 0.18);

  /* Базовая 8-px сетка */
  --gap-1: 4px;
  --gap-2: 8px;
  --gap-3: 12px;
  --gap-4: 16px;
  --gap-5: 24px;
  --gap-6: 32px;
  --gap-7: 48px;

  /* Шрифты */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* Размеры layout */
  --sidebar-w: 240px;
  --content-max: 960px;
  --tabbar-h: 68px;
}

/* ----- 2. Reset ----- */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: pan-y;
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: var(--font-sans);
  background: var(--bg-primary);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
button, input, textarea, select { font: inherit; color: inherit; }
input, textarea, select {
  font-size: 16px;
  -webkit-user-select: text;
  user-select: text;
}
button { background: none; border: none; cursor: pointer; padding: 0; }
input::placeholder, textarea::placeholder { color: var(--text-faint); }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--text); }

::-webkit-scrollbar { width: 0; height: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ----- 3. Декоративный фон ----- */
.ambient { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.ambient div { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.35; }
.ambient__a { width: 520px; height: 520px; top: -120px; right: -160px; background: var(--accent-strong); }
.ambient__b { width: 420px; height: 420px; bottom: -120px; left: -120px; background: var(--accent); }

/* ----- 4. Базовый layout ----- */
.app {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "main"
    "tabbar";
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
.sidebar { display: none; grid-area: sidebar; }
.main {
  grid-area: main;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--gap-4);
  padding-bottom: calc(var(--tabbar-h) + var(--gap-4));
}
.tabbar { grid-area: tabbar; }

/* Tablet: контент центрируем, нижний таб-бар остаётся */
@media (min-width: 768px) {
  .main { padding: var(--gap-5) var(--gap-6); padding-bottom: calc(var(--tabbar-h) + var(--gap-5)); }
  .content { max-width: 720px; margin: 0 auto; }
}

/* Desktop: сайдбар слева + sticky-меню, нижний таб-бар скрыт */
@media (min-width: 1024px) {
  .app {
    grid-template-columns: var(--sidebar-w) 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "sidebar main";
  }
  .sidebar { display: flex; flex-direction: column; }
  .tabbar { display: none; }
  .main { padding: var(--gap-5) var(--gap-6); padding-bottom: var(--gap-6); }
  .content { max-width: var(--content-max); margin: 0 auto; }
}

/* ----- 5. Sidebar (десктоп) ----- */
.sidebar {
  position: sticky; top: 0;
  height: 100vh;
  padding: var(--gap-5) var(--gap-4);
  border-right: 1px solid rgba(255, 255, 255, 0.04);
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(8px);
}
.sidebar__brand {
  display: flex; align-items: center; gap: var(--gap-3);
  padding: var(--gap-2);
  margin-bottom: var(--gap-5);
  color: var(--text);
}
.sidebar__brand:hover { color: var(--text); }
.sidebar__logo {
  width: 36px; height: 36px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  display: grid; place-items: center;
  font-weight: 800; font-size: 18px;
  box-shadow: var(--shadow-glow);
}
.sidebar__name { font-weight: 800; letter-spacing: 1.5px; }
.sidebar__nav { display: flex; flex-direction: column; gap: var(--gap-1); }
.sidebar__link {
  display: flex; align-items: center; gap: var(--gap-3);
  padding: var(--gap-3) var(--gap-3);
  border-radius: var(--r-button);
  color: var(--text-muted);
  font-size: 14px; font-weight: 500;
  transition: background 0.15s, color 0.15s;
}
.sidebar__link:hover { background: rgba(255, 255, 255, 0.03); color: var(--text); }
.sidebar__link[aria-current="page"] {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

/* ----- 6. Topbar ----- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--gap-5);
  padding: var(--gap-2) 0;
}
.topbar__title { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.4px; }
.topbar__right { display: none !important; }
@media (min-width: 1024px) {
  .topbar__title { font-size: 28px; }
}

/* ----- 7. Tabbar (мобайл) ----- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0;
  height: var(--tabbar-h);
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: rgba(15, 12, 30, 0.92);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  z-index: 50;
}
.tabbar__btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  color: var(--text-muted);
  font-size: 11px;
  transition: color 0.15s;
}
.tabbar__btn[aria-current="page"] { color: var(--accent); }
.tabbar__icon { width: 22px; height: 22px; display: grid; place-items: center; }

/* ----- 8. Контент-карточки (заготовки для Sprint 1+) ----- */
.card {
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: var(--r-card);
  padding: var(--gap-5);
  box-shadow: var(--shadow-card);
}
.card + .card { margin-top: var(--gap-4); }
.card__title { margin: 0 0 var(--gap-2); font-size: 15px; font-weight: 700; letter-spacing: -0.2px; }
.card__sub   { margin: 0; color: var(--text-muted); font-size: 13px; line-height: 1.5; }

/* Кнопки */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--gap-2);
  padding: 14px 18px;
  border-radius: var(--r-button);
  font-weight: 600; font-size: 14px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  transition: transform 0.08s, background 0.15s;
}
.btn:hover  { background: rgba(255, 255, 255, 0.10); }
.btn:active { transform: translateY(1px); }
.btn--primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  box-shadow: var(--shadow-glow);
}
.btn--primary:hover { background: linear-gradient(135deg, #C9A0FF, #9772FF); }
.btn--ghost { background: transparent; border: 1px solid rgba(255, 255, 255, 0.12); }
.btn--full  { width: 100%; }

/* Текст-инпут */
.input {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--r-button);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text);
  font-size: 16px;
  transition: border-color 0.15s, background 0.15s;
}
.input:focus { outline: none; border-color: var(--accent); background: rgba(255, 255, 255, 0.06); }

/* Состояния пустоты — на старте «без моков» — это будет частый случай */
.empty {
  text-align: center;
  padding: var(--gap-7) var(--gap-5);
  color: var(--text-muted);
}
.empty__title { color: var(--text); font-size: 16px; font-weight: 600; margin-bottom: var(--gap-2); }
.empty__sub   { font-size: 14px; line-height: 1.5; max-width: 360px; margin: 0 auto; }

/* Тосты */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + var(--gap-4));
  transform: translateX(-50%);
  background: rgba(15, 12, 30, 0.95);
  border: 1px solid var(--accent-soft);
  color: var(--text);
  padding: 12px 18px;
  border-radius: var(--r-pill);
  font-size: 13px;
  z-index: 100;
  animation: toast-in 0.25s ease-out;
}
@media (min-width: 1024px) {
  .toast { bottom: var(--gap-5); }
}
@keyframes toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ----- 9. Хелперы ----- */
.text-muted { color: var(--text-muted); }
.text-mono  { font-family: var(--font-mono); }
.row { display: flex; gap: var(--gap-3); align-items: center; }
.col { display: flex; gap: var(--gap-3); flex-direction: column; }
.between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }

/* ============================================================
   AUTH / ONBOARDING — Sprint 1
   ============================================================ */

/* Когда пользователь не залогинен — показываем карточку по центру,
   без сайдбара/таб-бара (они скрываются классом .is-auth на body) */
body.is-auth .sidebar,
body.is-auth .tabbar { display: none !important; }
body.is-auth .app    { grid-template-columns: 1fr !important; grid-template-areas: "main" !important; }
body.is-auth .topbar { display: none; }
body.is-auth .main   { padding: 0; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; }

.auth-stage,
.onb-stage {
  width: 100%;
  display: grid;
  place-items: center;
  padding: var(--gap-5) var(--gap-4);
  min-height: 100vh;
  min-height: 100dvh;
}

.auth-card,
.onb-card {
  width: 100%;
  max-width: 440px;
  padding: var(--gap-6);
}

.auth-card__hero { text-align: center; margin-bottom: var(--gap-5); }
.auth-logo {
  width: 56px; height: 56px;
  margin: 0 auto var(--gap-3);
  border-radius: 18px;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: var(--text); font-size: 26px; font-weight: 800;
  display: grid; place-items: center;
  box-shadow: var(--shadow-glow);
}
.auth-title { margin: 0 0 var(--gap-2); font-size: 22px; font-weight: 700; letter-spacing: -0.4px; }
.auth-sub { margin: 0; color: var(--text-muted); font-size: 14px; }

.auth-tabs {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--gap-1);
  padding: 4px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--r-button);
  margin-bottom: var(--gap-4);
}
.auth-tab {
  padding: 10px;
  border-radius: 12px;
  color: var(--text-muted);
  font-size: 14px; font-weight: 600;
  transition: background 0.15s, color 0.15s;
}
.auth-tab.is-active { background: var(--accent-soft); color: var(--text); }

.auth-form { display: flex; flex-direction: column; gap: var(--gap-3); }
.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-field__label { font-size: 12px; font-weight: 600; color: var(--text-muted); letter-spacing: 0.3px; text-transform: uppercase; }

.auth-error { color: var(--danger); font-size: 13px; min-height: 16px; }
.auth-footnote { text-align: center; margin: var(--gap-4) 0 0; color: var(--text-muted); font-size: 13px; }
.auth-fineprint { text-align: center; margin: var(--gap-2) 0 0; color: var(--text-faint); font-size: 11px; }

/* Onboarding */
.onb-progress-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--gap-4); }
.onb-progress { display: flex; gap: 6px; }
.onb-progress__dot {
  width: 24px; height: 4px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
}
.onb-progress__dot.is-active { background: var(--accent); box-shadow: 0 0 8px var(--accent-soft); }

.onb-title { margin: 0 0 var(--gap-2); font-size: 22px; font-weight: 700; letter-spacing: -0.3px; }

.onb-class-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--gap-3);
  margin: var(--gap-4) 0;
}
.onb-class {
  padding: var(--gap-5) var(--gap-3);
  border-radius: var(--r-card);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
  transition: border-color 0.15s, background 0.15s, transform 0.08s;
}
.onb-class:hover { background: rgba(255, 255, 255, 0.06); }
.onb-class:active { transform: translateY(1px); }
.onb-class.is-active {
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: var(--shadow-glow);
}
.onb-class__num { font-size: 40px; font-weight: 800; letter-spacing: -1px; }
.onb-class__sub { color: var(--text-muted); font-size: 12px; margin-top: 4px; }

.onb-subjects {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: var(--gap-4) 0;
}
.onb-chip {
  padding: 10px 14px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text);
  font-size: 13px;
  transition: background 0.15s, border-color 0.15s;
}
.onb-chip:hover { background: rgba(255, 255, 255, 0.08); }
.onb-chip.is-active { background: var(--accent-soft); border-color: var(--accent); color: var(--text); }

.onb-goal { text-align: center; padding: var(--gap-5) 0; }
.onb-goal__num { font-size: 56px; font-weight: 800; letter-spacing: -2px; color: var(--accent); }
.onb-goal__label { color: var(--text-muted); font-size: 13px; margin-bottom: var(--gap-4); }
.onb-goal__slider {
  -webkit-appearance: none; appearance: none;
  display: block;
  width: 100%;
  height: 44px;
  background: transparent;
  border-radius: 999px;
  outline: none;
  cursor: pointer;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.onb-goal__slider::-webkit-slider-runnable-track {
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--accent) 0,
    var(--accent-strong) var(--goal-pct, 44%),
    rgba(255, 255, 255, 0.10) var(--goal-pct, 44%),
    rgba(255, 255, 255, 0.10) 100%
  );
}
.onb-goal__slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 34px; height: 34px; border-radius: 50%;
  margin-top: -11px;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  border: 4px solid rgba(255, 255, 255, 0.88);
  cursor: grab;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), var(--shadow-glow);
}
.onb-goal__slider:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.04); }
.onb-goal__slider::-moz-range-track {
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
}
.onb-goal__slider::-moz-range-progress {
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
}
.onb-goal__slider::-moz-range-thumb {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  cursor: grab;
  border: 4px solid rgba(255, 255, 255, 0.88);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), var(--shadow-glow);
}

.onb-actions { display: flex; justify-content: space-between; gap: var(--gap-3); margin-top: var(--gap-4); }
.onb-actions .btn { flex: 1; }

/* ============================================================
   TRACKER (главный экран) — Sprint 2
   ============================================================ */
.tracker { display: grid; gap: var(--gap-3); }

/* Огонёк */
.fire-card {
  background: linear-gradient(135deg, #2a1640 0%, #3a1c5c 50%, #4a1a4a 100%);
  border: 1px solid rgba(255, 138, 61, 0.18);
  position: relative;
  overflow: hidden;
}
.fire-card::before {
  content: ""; position: absolute; right: -40px; top: -40px;
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,138,61,0.25), transparent 70%);
  pointer-events: none;
}
.fire-card__top { display: flex; align-items: center; gap: var(--gap-4); position: relative; }
.fire-card__emoji { font-size: 56px; line-height: 1; filter: drop-shadow(0 0 16px rgba(255,138,61,0.5)); }
.fire-card__main { flex: 1; min-width: 0; }
.fire-card__num { font-size: 56px; font-weight: 800; letter-spacing: -2px; line-height: 1; }
.fire-card__label { color: var(--text-muted); font-size: 13px; margin-top: 4px; }
.fire-card__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-3); margin-top: var(--gap-4); position: relative; }

.kv {
  padding: var(--gap-3);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--r-button);
}
.kv__label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; }
.kv__value { font-size: 18px; font-weight: 700; margin-top: 2px; }

/* Сегодня */
.today-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--gap-3); }
.today-card__pct { color: var(--accent); font-weight: 700; font-size: 14px; }

.progress {
  height: 10px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  overflow: hidden;
}
.progress__bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--success));
  transition: width 0.4s ease;
}

/* Таймер фокуса */
.focus-card { text-align: center; }
.focus-card__display {
  font-size: 64px; font-weight: 700; letter-spacing: 2px;
  margin: var(--gap-3) 0;
  color: var(--text);
  font-feature-settings: "tnum";
}

/* Неделя */
.week-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: var(--gap-2); height: 130px;
  align-items: end;
  padding: var(--gap-3) 0;
}
.week-bar { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.week-bar__fill {
  width: 100%; max-width: 22px;
  background: linear-gradient(180deg, var(--accent), var(--accent-strong));
  border-radius: 6px;
  min-height: 4px;
  transition: height 0.3s;
}
.week-bar__label { font-size: 11px; color: var(--text-muted); }

/* ============================================================
   TASK (решение задания) — Sprint 2
   ============================================================ */
.task-stage { display: grid; gap: var(--gap-3); }
.task-card { padding: var(--gap-5); }

.task-card__head { display: flex; flex-wrap: wrap; gap: var(--gap-2); margin-bottom: var(--gap-4); }

.chip {
  display: inline-flex; align-items: center;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12px; color: var(--text-muted);
}
.chip--accent { background: var(--accent-soft); color: var(--accent); border-color: rgba(187,140,255,0.3); }
.chip--muted  { color: var(--warning); }

.task-question {
  margin: 0 0 var(--gap-5);
  font-size: 22px; line-height: 1.4; font-weight: 600; letter-spacing: -0.3px;
}

.task-answer { display: flex; flex-direction: column; gap: var(--gap-2); }

.task-option {
  text-align: left;
  padding: 14px 16px;
  border-radius: var(--r-button);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text);
  font-size: 15px;
  transition: background 0.15s, border-color 0.15s, transform 0.06s;
}
.task-option:hover { background: rgba(255, 255, 255, 0.08); }
.task-option:active { transform: translateY(1px); }
.task-option.is-active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--text);
}

/* Результат */
.task-result {
  margin-top: var(--gap-4);
  padding: var(--gap-4);
  border-radius: var(--r-card);
  border: 1px solid;
}
.task-result.is-correct { background: rgba(196, 255, 77, 0.06); border-color: rgba(196, 255, 77, 0.3); }
.task-result.is-wrong   { background: rgba(255, 107, 107, 0.06); border-color: rgba(255, 107, 107, 0.3); }
.task-result__head { display: flex; align-items: center; gap: var(--gap-3); margin-bottom: var(--gap-2); }
.task-result__icon {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 18px; font-weight: 800;
}
.is-correct .task-result__icon { background: var(--success); color: #0c0a18; }
.is-wrong   .task-result__icon { background: var(--danger);  color: white; }
.task-result__title { font-size: 17px; font-weight: 700; }
.task-result__sub     { color: var(--text-muted); font-size: 14px; margin: 4px 0; }
.task-result__explain { color: var(--text); font-size: 14px; line-height: 1.5; margin: var(--gap-2) 0 0; padding: var(--gap-3); background: rgba(255, 255, 255, 0.03); border-radius: var(--r-button); }
.task-result__actions { display: flex; gap: var(--gap-3); margin-top: var(--gap-4); }
.task-result__actions .btn { flex: 1; }

.task-achievement {
  margin-top: var(--gap-2);
  padding: var(--gap-2) var(--gap-3);
  background: rgba(255, 200, 87, 0.1);
  border: 1px solid rgba(255, 200, 87, 0.3);
  border-radius: var(--r-button);
  font-size: 13px;
}

/* Конфетти */
.confetti-layer {
  position: fixed; inset: 0; pointer-events: none; z-index: 200; overflow: hidden;
}
.confetti-piece {
  position: absolute; top: -20px;
  width: 10px; height: 14px;
  border-radius: 2px;
  animation: confetti-fall 1.4s ease-in forwards;
}
@keyframes confetti-fall {
  to {
    transform: translateY(110vh) rotate(720deg);
    opacity: 0;
  }
}

/* ============================================================
   Sprint 3: Profile, Courses, Freeze banner
   ============================================================ */

/* sidebar user-block (десктоп) */
.sidebar__user {
  margin: 0 var(--gap-1) var(--gap-2);
  padding: var(--gap-3);
  border-radius: var(--r-button);
  background: rgba(255, 255, 255, 0.04);
}
.sidebar__user-name { font-weight: 700; font-size: 14px; }
.sidebar__user-stat { color: var(--text-muted); font-size: 12px; margin-top: 4px; }

/* ----- Freeze banner ----- */
.freeze-banner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--gap-3);
  align-items: center;
  background: linear-gradient(135deg, #1d2c4a 0%, #1a2238 100%);
  border-color: rgba(115, 200, 255, 0.3);
}
.freeze-banner__icon {
  font-size: 32px;
  filter: drop-shadow(0 0 14px rgba(115, 200, 255, 0.5));
}
.freeze-banner__title { font-weight: 700; font-size: 14px; line-height: 1.3; }
.freeze-banner__sub   { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

/* ----- Profile ----- */
.profile { display: grid; gap: var(--gap-3); }

.profile-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--gap-4);
  align-items: center;
}
.profile-avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: white; font-size: 32px; font-weight: 800;
  display: grid; place-items: center;
  box-shadow: var(--shadow-glow);
}
.profile-head-main { min-width: 0; }
.profile-nickname { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.3px; }
.profile-wins {
  margin-top: 6px;
  font-size: 14px; font-weight: 600;
  color: var(--warning);
}
.profile-edit {
  width: 40px; height: 40px;
  padding: 0;
  font-size: 18px;
}

.profile-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-3);
}
.metric {
  text-align: center;
  padding: var(--gap-3);
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--r-button);
}
.metric__icon { font-size: 22px; line-height: 1; }
.metric__val  { font-size: 18px; font-weight: 700; margin-top: 4px; }
.metric__label { font-size: 11px; color: var(--text-muted); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.4px; }

.subj-list { display: flex; flex-direction: column; gap: var(--gap-3); }
.subj-row__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.subj-row__title { font-weight: 600; font-size: 14px; }
.subj-row__pct   { color: var(--accent); font-weight: 700; font-size: 14px; }
.subj-row__sub   { color: var(--text-muted); font-size: 12px; margin-top: 4px; }

.ach-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-2);
}
@media (min-width: 768px) {
  .ach-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .ach-grid { grid-template-columns: repeat(4, 1fr); }
}
.ach {
  padding: var(--gap-3);
  text-align: center;
  border-radius: var(--r-button);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: filter 0.15s;
}
.ach.is-locked { opacity: 0.45; filter: grayscale(0.6); }
.ach.is-granted {
  background: rgba(255, 200, 87, 0.10);
  border-color: rgba(255, 200, 87, 0.30);
}
.ach__icon  { font-size: 26px; }
.ach__title { font-size: 12px; font-weight: 600; margin-top: 6px; line-height: 1.3; }
.ach__sub   { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

.profile-actions { display: flex; flex-direction: column; gap: var(--gap-2); }
.profile-edit-modal { max-width: 560px; }
.profile-edit-form {
  display: flex;
  flex-direction: column;
  gap: var(--gap-4);
  overflow-y: auto;
  padding: var(--gap-4);
}
.profile-edit-field {
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
}
.profile-edit-choice,
.profile-edit-subjects {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-2);
}
.profile-edit-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-3);
  margin-top: var(--gap-2);
}

/* ----- Courses ----- */
.courses { display: grid; gap: var(--gap-3); }

.courses-filters { display: flex; flex-direction: column; gap: var(--gap-3); }
.filter-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.filter-label { font-size: 12px; color: var(--text-muted); margin-right: 6px; min-width: 60px; }
.filter-chip {
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
  font-size: 12px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.filter-chip:hover { background: rgba(255, 255, 255, 0.08); }
.filter-chip.is-active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--text);
  font-weight: 600;
}

.course-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-3);
}
@media (min-width: 768px) {
  .course-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .course-grid { grid-template-columns: repeat(3, 1fr); }
}

.course-card {
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
  padding: var(--gap-4);
}
.course-cover {
  height: 110px;
  border-radius: var(--r-button);
  background: linear-gradient(135deg, var(--accent-strong), var(--accent));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--gap-3);
  margin-bottom: var(--gap-2);
}
.course-cover__subj { font-size: 12px; font-weight: 600; opacity: 0.9; }
.course-cover__type {
  display: inline-block;
  align-self: flex-start;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  color: white;
  font-size: 11px; font-weight: 600;
}
.course-cover__type.is-free { background: var(--success); color: var(--bg-primary); }

.course-title { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.3; }
.course-meta {
  display: flex; gap: var(--gap-3); flex-wrap: wrap;
  font-size: 12px; color: var(--text-muted);
  margin-top: auto;
}
.course-price { color: var(--text); font-weight: 700; margin-left: auto; }

/* Sprint 3 fix: фиксируем размер auth-карточки между табами Вход/Регистрация */
.auth-card {
  min-height: 580px;       /* высота под форму регистрации (3 поля + футер) */
  transition: none;
}
.auth-form { min-height: 280px; }   /* стабилизирует поля в обоих табах */

/* ============================================================
   UX-fix: только одна нав-панель + центральная кнопка трекера
   ============================================================ */

/* На /auth и /onboarding скрываем обе панели и topbar */
body.is-fullscreen .sidebar,
body.is-fullscreen .tabbar,
body.is-fullscreen .topbar { display: none !important; }
body.is-fullscreen .app    { grid-template-columns: 1fr !important; grid-template-areas: "main" !important; }
body.is-fullscreen .main   { padding: 0 !important; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; }

/* Бывший .is-auth остаётся для обратной совместимости */
body.is-auth .sidebar, body.is-auth .tabbar, body.is-auth .topbar { display: none !important; }
body.is-auth .app  { grid-template-columns: 1fr !important; grid-template-areas: "main" !important; }
body.is-auth .main { padding: 0 !important; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; }

/* Гарантия: на десктопе только sidebar, на мобайле/планшете только tabbar */
@media (max-width: 1023px) {
  .sidebar { display: none !important; }
  .tabbar  { display: grid !important; }
}
@media (min-width: 1024px) {
  .sidebar { display: flex !important; }
  .tabbar  { display: none !important; }
}

/* Центральная кнопка трекера в tabbar — зелёный круг */
.tabbar__btn--primary {
  position: relative;
  align-self: end;
}
.tabbar__btn--primary .tabbar__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #C4FF4D 0%, #88E03B 100%);
  color: #0c0a18;
  font-size: 26px;
  display: grid;
  place-items: center;
  margin-top: -22px;
  box-shadow: 0 8px 24px rgba(196, 255, 77, 0.35),
              0 0 0 4px rgba(15, 12, 30, 0.95);
  transition: transform 0.12s ease;
}
.tabbar__btn--primary:active .tabbar__icon {
  transform: translateY(2px) scale(0.96);
}
.tabbar__btn--primary[aria-current="page"] .tabbar__icon {
  box-shadow: 0 0 0 3px var(--success),
              0 8px 24px rgba(196, 255, 77, 0.5),
              0 0 0 6px rgba(15, 12, 30, 0.95);
}
.tabbar__label {
  font-size: 11px;
  font-weight: 500;
}

/* Аналог в сайдбаре (десктоп): трекер-link выделяем зелёным */
.sidebar__link--primary .sidebar__icon {
  background: linear-gradient(135deg, var(--success), #88E03B);
  color: #0c0a18;
  width: 28px; height: 28px;
  border-radius: 8px;
  display: grid; place-items: center;
  font-size: 16px;
  flex-shrink: 0;
}
.sidebar__link--primary[aria-current="page"] {
  color: var(--success);
}

/* ============================================================
   Sprint 4: Social (feed/groups/rating), Tinder, Modals
   ============================================================ */

/* Социалка — общая шапка */
.social-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--gap-3);
}
.social-header__title { margin: 0; font-size: 22px; font-weight: 800; }
.social-add-friend {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: white;
  font-size: 20px; font-weight: 700;
  display: grid; place-items: center;
  box-shadow: var(--shadow-glow);
}
.social-add-friend:hover { filter: brightness(1.1); }

.social-tabs {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  padding: 4px;
  background: rgba(255,255,255,0.04);
  border-radius: var(--r-button);
  margin-bottom: var(--gap-3);
}
.social-tab {
  padding: 10px 6px;
  border-radius: 12px;
  color: var(--text-muted);
  font-size: 13px; font-weight: 600;
  transition: background 0.15s, color 0.15s;
}
.social-tab.is-active { background: var(--accent-soft); color: var(--text); }

/* Composer (создание поста) */
.composer { padding: var(--gap-3); }
.composer__input {
  width: 100%; resize: none; min-height: 80px;
  padding: 10px 12px;
}
.composer__actions { display: flex; justify-content: flex-end; margin-top: 10px; }

/* Posts */
.feed { display: flex; flex-direction: column; gap: var(--gap-3); }
.post { padding: var(--gap-4); }
.post__head { display: flex; align-items: center; gap: var(--gap-3); margin-bottom: var(--gap-2); }
.post__avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  display: grid; place-items: center;
  font-weight: 700; flex-shrink: 0;
}
.post__head-main { flex: 1; min-width: 0; }
.post__nick { font-weight: 700; font-size: 14px; }
.post__date { color: var(--text-muted); font-size: 12px; margin-top: 2px; }
.post__text { margin: 0 0 var(--gap-3); font-size: 15px; line-height: 1.45; white-space: pre-wrap; }
.post__image { max-width: 100%; border-radius: 12px; margin-bottom: var(--gap-3); }
.post__actions { display: flex; gap: var(--gap-3); border-top: 1px solid rgba(255,255,255,0.04); padding-top: var(--gap-3); }
.post-action {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-muted);
  font-size: 13px;
  padding: 6px 8px;
  border-radius: 8px;
  transition: color 0.15s, background 0.15s;
}
.post-action:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.post-action.is-active { color: var(--danger); }

/* Groups search */
.groups__search { width: 100%; }

/* Rating */
.rating { display: flex; flex-direction: column; gap: var(--gap-3); }
.rating-filters { display: flex; flex-direction: column; gap: var(--gap-3); }

.podium-card { padding: var(--gap-4); }
.podium {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: var(--gap-2);
  align-items: end;
  height: 220px;
}
.podium__col {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 6px;
  padding: var(--gap-2);
  border-radius: 14px 14px 0 0;
}
.podium__col--1 {
  background: linear-gradient(180deg, rgba(255,200,87,0.25), rgba(255,200,87,0.05));
  border-top: 3px solid var(--warning);
  height: 100%;
}
.podium__col--2 {
  background: linear-gradient(180deg, rgba(187,140,255,0.20), rgba(187,140,255,0.04));
  border-top: 3px solid var(--accent);
  height: 80%;
}
.podium__col--3 {
  background: linear-gradient(180deg, rgba(255,138,61,0.20), rgba(255,138,61,0.04));
  border-top: 3px solid var(--fire);
  height: 65%;
}
.podium__avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  display: grid; place-items: center;
  font-weight: 700; font-size: 18px;
}
.podium__nick   { font-weight: 700; font-size: 13px; text-align: center; }
.podium__points { color: var(--warning); font-size: 12px; font-weight: 600; }
.podium__place  { color: var(--text-muted); font-size: 11px; }

.rate-row {
  display: grid; grid-template-columns: auto auto 1fr auto;
  gap: var(--gap-3); align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.rate-row:last-child { border-bottom: 0; }
.rate-row.is-me { background: var(--accent-soft); border-radius: 12px; padding: 10px var(--gap-3); }
.rate-row__place  { color: var(--text-muted); font-size: 13px; min-width: 36px; }
.rate-row__avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  display: grid; place-items: center; font-weight: 600; font-size: 13px;
}
.rate-row__nick { font-weight: 600; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rate-row__points { color: var(--warning); font-weight: 700; font-size: 13px; }

.rating-me-sticky {
  position: sticky; bottom: var(--tabbar-h);
  background: rgba(15,12,30,0.95);
  backdrop-filter: blur(12px);
  border-radius: var(--r-card);
  border: 1px solid var(--accent-soft);
  margin-top: var(--gap-2);
  padding: var(--gap-3);
}
@media (min-width: 1024px) { .rating-me-sticky { bottom: var(--gap-3); } }

/* Modals */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
  z-index: 200;
  display: grid; place-items: center;
  padding: var(--gap-4);
}
.modal {
  width: 100%; max-width: 480px; max-height: 80vh;
  background: var(--bg-card);
  border-radius: var(--r-card);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.modal__head { display: flex; align-items: center; justify-content: space-between; padding: var(--gap-4); border-bottom: 1px solid rgba(255,255,255,0.06); }
.modal__title { margin: 0; font-size: 16px; font-weight: 700; }
.modal__close { font-size: 24px; color: var(--text-muted); padding: 0 6px; }

.users-results { overflow-y: auto; padding: 0 var(--gap-3) var(--gap-3); flex: 1; }
.user-row {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: var(--gap-3); align-items: center;
  padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.04);
}
.user-row__avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-strong)); display: grid; place-items: center; font-weight: 700; }
.user-row__nick { font-weight: 600; font-size: 14px; }
.user-row__sub  { color: var(--text-muted); font-size: 12px; margin-top: 2px; }
.user-row .btn { padding: 8px 14px; font-size: 12px; }

/* Comments modal */
.comments-list { overflow-y: auto; padding: var(--gap-3); flex: 1; max-height: 50vh; }
.comment { display: grid; grid-template-columns: auto 1fr; gap: var(--gap-3); padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.comment:last-child { border-bottom: 0; }
.comment__avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-strong)); display: grid; place-items: center; font-weight: 600; font-size: 13px; }
.comment__nick { font-weight: 600; font-size: 13px; }
.comment__text { color: var(--text); font-size: 14px; margin-top: 2px; line-height: 1.4; }
.comments-composer {
  display: grid; grid-template-columns: 1fr auto; gap: var(--gap-2);
  padding: var(--gap-3); border-top: 1px solid rgba(255,255,255,0.06);
}

/* Tinder */
.tinder { display: flex; flex-direction: column; gap: var(--gap-3); }
.uni-card { padding: var(--gap-5); }
.uni-card__top { display: flex; gap: var(--gap-3); align-items: flex-start; margin-bottom: var(--gap-4); }
.uni-card__name    { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.3px; flex: 1; }
.uni-card__faculty { margin: 4px 0 0; color: var(--text-muted); font-size: 14px; flex: 1; }
.uni-card__match {
  text-align: center;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--accent-soft);
  border: 1px solid rgba(187,140,255,0.3);
  flex-shrink: 0;
}
.uni-card__match-num { font-size: 26px; font-weight: 800; color: var(--accent); }
.uni-card__match-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; }

.uni-card__scores { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-3); margin-bottom: var(--gap-4); }
.score-box {
  text-align: center; padding: var(--gap-3);
  border-radius: var(--r-button);
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
}
.score-box--mine { background: rgba(196,255,77,0.10); border-color: rgba(196,255,77,0.25); }
.score-box__label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; }
.score-box__num   { font-size: 24px; font-weight: 700; margin-top: 4px; }
.score-box--mine .score-box__num { color: var(--success); }

.uni-card__subjects { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--gap-3); }
.uni-card__region { color: var(--text-muted); font-size: 13px; margin-bottom: var(--gap-3); }

.uni-actions { display: flex; justify-content: center; gap: var(--gap-5); margin-top: var(--gap-3); }
.uni-btn {
  width: 64px; height: 64px; border-radius: 50%;
  font-size: 26px; font-weight: 800;
  display: grid; place-items: center;
  transition: transform 0.12s ease, box-shadow 0.15s;
}
.uni-btn:active { transform: scale(0.92); }
.uni-btn--dislike { background: rgba(255,107,107,0.12); color: var(--danger); border: 2px solid rgba(255,107,107,0.4); }
.uni-btn--like    { background: rgba(196,255,77,0.12); color: var(--success); border: 2px solid rgba(196,255,77,0.45); box-shadow: 0 0 24px rgba(196,255,77,0.18); }

/* Peers */
.peers-card { padding: var(--gap-4); }
.peers-list { display: flex; flex-direction: column; gap: var(--gap-2); margin-top: var(--gap-3); }
.peer-row {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: var(--gap-3); align-items: center;
  padding: 10px;
  background: rgba(255,255,255,0.03);
  border-radius: var(--r-button);
}
.peer-row__avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-strong)); display: grid; place-items: center; font-weight: 700; }
.peer-row__nick { font-weight: 600; font-size: 14px; }
.peer-row__sub  { color: var(--text-muted); font-size: 12px; margin-top: 2px; }
.peer-row .btn { padding: 8px 12px; font-size: 12px; }

/* ============================================================
   Лого-медуза + SVG-иконки (взамен AI-эмодзи)
   ============================================================ */

/* Сайдбар-лого: убираем квадрат-плашку, делаем прозрачным */
.sidebar__logo {
  background: transparent !important;
  box-shadow: none !important;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  overflow: hidden;
}
.sidebar__logo svg { width: 100%; height: 100%; display: block; }

/* Auth-лого */
.auth-logo {
  background: transparent !important;
  box-shadow: none !important;
  width: 64px; height: 64px;
  display: grid; place-items: center;
  margin: 0 auto var(--gap-3);
}
.auth-logo svg { width: 100%; height: 100%; display: block; }

/* Универсальные SVG-иконки в навигации/кнопках */
.icon { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
.icon svg { width: 22px; height: 22px; }

.sidebar__icon { width: 24px; height: 24px; }
.sidebar__icon svg { width: 20px; height: 20px; }

.tabbar__icon { width: 24px; height: 24px; display: grid; place-items: center; }
.tabbar__icon svg { width: 22px; height: 22px; }

/* Центральная зелёная кнопка трекера — иконка должна быть тёмной */
.tabbar__btn--primary .tabbar__icon svg {
  width: 28px; height: 28px;
  stroke-width: 2.4;
}

/* Сайдбар: primary-link (трекер) — зелёный квадрат-иконка */
.sidebar__link--primary .sidebar__icon { background: linear-gradient(135deg, var(--success), #88E03B); border-radius: 8px; }


/* Кнопка «добавить друга» — SVG внутри */
.social-add-friend svg { width: 22px; height: 22px; stroke: white; }

/* Лайк на посту — заливка сердечка при is-active */
.post-action svg { width: 18px; height: 18px; }
.post-action.is-active svg { stroke: var(--danger); fill: var(--danger); }

/* Тиндер — иконки кнопок */
.uni-btn svg { width: 28px; height: 28px; }
.uni-btn--like svg { fill: var(--success); stroke: var(--success); }
.uni-btn--dislike svg { stroke: var(--danger); stroke-width: 3; }

/* Profile metric — иконка центрируется */
.metric__icon svg { width: 22px; height: 22px; stroke: var(--accent); margin: 0 auto; }

/* Ачивки — кубок */
.ach__icon svg { width: 26px; height: 26px; stroke: var(--warning); }

/* Огонёк на главной */
.fire-card__emoji svg { width: 56px; height: 56px; stroke: var(--fire); fill: var(--fire); fill-opacity: 0.25; }

/* ============================================================
   Sprint 5: Billing + Family
   ============================================================ */
.billing-card { padding: var(--gap-4); }
.plans-row { display: flex; flex-direction: column; gap: var(--gap-2); margin-top: var(--gap-3); }
@media (min-width: 768px) {
  .plans-row { flex-direction: row; }
  .plans-row > * { flex: 1; }
}
.plan-card {
  padding: var(--gap-3);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-button);
}
.plan-card__title { font-weight: 700; font-size: 14px; }
.plan-card__price { color: var(--accent); font-weight: 700; font-size: 18px; margin-top: 4px; }
.plan-card__desc  { color: var(--text-muted); font-size: 12px; margin: 6px 0 0; }

/* Invite code */
.invite-code {
  font-family: var(--font-mono);
  font-size: 32px; font-weight: 700;
  letter-spacing: 6px;
  margin: 16px 0 12px;
  padding: 16px;
  background: var(--accent-soft);
  border-radius: var(--r-card);
  color: var(--accent);
}

/* Parent screen */
.parent-screen { display: flex; flex-direction: column; gap: var(--gap-3); }
.parent-link__input { text-transform: uppercase; letter-spacing: 4px; text-align: center; font-family: var(--font-mono); font-size: 18px; }
.parent-report__head { display: flex; align-items: center; gap: var(--gap-3); margin-bottom: var(--gap-3); }
.parent-report__sec  { margin: var(--gap-4) 0 var(--gap-2); font-size: 13px; font-weight: 700; color: var(--accent); }
.parent-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-2); }
@media (min-width: 768px) { .parent-stats { grid-template-columns: repeat(4, 1fr); } }

/* === Убираем зелёное выделение трекера в навигации === */
.sidebar__link--primary .sidebar__icon {
  background: transparent !important;
  border-radius: 0 !important;
  width: auto !important; height: auto !important;
}
.sidebar__link--primary .sidebar__icon svg { stroke: currentColor !important; }
.sidebar__link--primary { color: var(--text-muted) !important; font-weight: 500 !important; }
.sidebar__link--primary[aria-current="page"] {
  color: var(--accent) !important;
  background: var(--accent-soft) !important;
  font-weight: 600 !important;
}

.tabbar__btn--primary .tabbar__icon {
  width: 24px !important; height: 24px !important;
  background: transparent !important;
  margin-top: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.tabbar__btn--primary .tabbar__icon svg {
  width: 22px !important; height: 22px !important;
  stroke: currentColor !important; stroke-width: 2 !important;
}
.tabbar__btn--primary[aria-current="page"] .tabbar__icon { box-shadow: none !important; }
.tabbar__btn--primary { align-self: center !important; }
.tabbar__btn--primary[aria-current="page"] { color: var(--accent); }

/* === Мягкое выделение трекера в навигации (фиолетовая палитра, без смены цвета) === */
/* Sidebar (десктоп) — иконка чуть крупнее + фиолетовая плашка-подложка, ник чуть жирнее */
.sidebar__link--primary .sidebar__icon {
  width: 32px !important; height: 32px !important;
  background: var(--accent-soft) !important;
  border-radius: 10px !important;
  display: grid !important; place-items: center !important;
}
.sidebar__link--primary .sidebar__icon svg {
  width: 20px !important; height: 20px !important;
  stroke: var(--accent) !important;
}
.sidebar__link--primary { font-weight: 700 !important; color: var(--text) !important; }

/* Tabbar (мобайл) — иконка чуть крупнее, приподнята, в фиолетовой плашке */
.tabbar__btn--primary { align-self: end !important; }
.tabbar__btn--primary .tabbar__icon {
  width: 44px !important; height: 44px !important;
  background: var(--accent-soft) !important;
  border-radius: 14px !important;
  margin-top: -10px !important;
  border: 1px solid rgba(187, 140, 255, 0.35) !important;
  box-shadow: 0 6px 16px rgba(187, 140, 255, 0.22) !important;
}
.tabbar__btn--primary .tabbar__icon svg {
  width: 24px !important; height: 24px !important;
  stroke: var(--accent) !important; stroke-width: 2.2 !important;
}
.tabbar__btn--primary[aria-current="page"] .tabbar__icon {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong)) !important;
  border-color: rgba(255,255,255,0.18) !important;
  box-shadow: var(--shadow-glow) !important;
}
.tabbar__btn--primary[aria-current="page"] .tabbar__icon svg { stroke: white !important; }

/* === Трекер выглядит как остальные иконки навигации === */
.sidebar__link--primary {
  font-weight: 500 !important;
  color: var(--text-muted) !important;
  background: transparent !important;
}
.sidebar__link--primary[aria-current="page"] {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  font-weight: 600 !important;
}
.sidebar__link--primary .sidebar__icon {
  width: 24px !important; height: 24px !important;
  background: transparent !important;
  border-radius: 0 !important;
}
.sidebar__link--primary .sidebar__icon svg { stroke: currentColor !important; }

.tabbar__btn--primary { align-self: center !important; }
.tabbar__btn--primary .tabbar__icon {
  width: 24px !important; height: 24px !important;
  background: transparent !important;
  border-radius: 0 !important;
  margin-top: 0 !important;
  border: none !important;
  box-shadow: none !important;
}
.tabbar__btn--primary .tabbar__icon svg {
  width: 22px !important; height: 22px !important;
  stroke: currentColor !important; stroke-width: 2 !important;
}
.tabbar__btn--primary[aria-current="page"] .tabbar__icon {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.tabbar__btn--primary[aria-current="page"] .tabbar__icon svg { stroke: var(--accent) !important; }

/* ============================================================
   Sprint 6: Groups + Chat
   ============================================================ */
.groups-list { display: flex; flex-direction: column; gap: var(--gap-3); margin-top: var(--gap-3); }
.group-card { padding: var(--gap-4); display: flex; flex-direction: column; gap: var(--gap-2); }
.group-card__name { margin: 0; font-size: 16px; font-weight: 700; }
.group-card__meta { display: flex; gap: 12px; color: var(--text-muted); font-size: 12px; margin-top: 4px; }

/* Chat */
.chat-screen {
  display: flex; flex-direction: column;
  height: calc(100vh - 80px);
  max-height: 720px;
  background: var(--bg-card);
  border-radius: var(--r-card);
  border: 1px solid rgba(255,255,255,0.04);
  overflow: hidden;
}
.chat-header {
  display: flex; align-items: center; gap: var(--gap-3);
  padding: var(--gap-3) var(--gap-4);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.chat-back {
  width: 36px; height: 36px;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  color: var(--text); font-size: 18px;
  display: grid; place-items: center;
}
.chat-header__title { margin: 0; font-size: 15px; font-weight: 700; }
.chat-body { flex: 1; overflow: hidden; }
.chat-list {
  height: 100%; overflow-y: auto;
  padding: var(--gap-3);
  display: flex; flex-direction: column; gap: 8px;
}
.msg {
  display: flex; gap: 8px; align-items: flex-end;
  max-width: 80%;
}
.msg--mine { align-self: flex-end; flex-direction: row-reverse; }
.msg__avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  display: grid; place-items: center;
  font-weight: 700; font-size: 13px;
  flex-shrink: 0;
}
.msg__bubble {
  padding: 8px 12px;
  background: rgba(255,255,255,0.06);
  border-radius: 14px;
  font-size: 14px; line-height: 1.35;
}
.msg--mine .msg__bubble {
  background: linear-gradient(135deg, var(--accent-strong), var(--accent));
  color: white;
}
.msg__nick { font-size: 11px; color: var(--text-muted); font-weight: 600; margin-bottom: 2px; }
.msg__text { white-space: pre-wrap; word-break: break-word; }
.chat-composer {
  display: grid; grid-template-columns: 1fr auto; gap: var(--gap-2);
  padding: var(--gap-3);
  border-top: 1px solid rgba(255,255,255,0.06);
}
.chat-composer .btn { padding: 12px 20px; }

/* === Финальный фикс цвета иконки трекера: только currentColor === */
.tabbar__btn--primary svg,
.tabbar__btn--primary .tabbar__icon svg,
.sidebar__link--primary svg,
.sidebar__link--primary .sidebar__icon svg {
  stroke: currentColor !important;
  fill: none !important;
  color: inherit !important;
}

/* === Тарифные карточки одной высоты (flex column + растяжение) === */
.plans-row { align-items: stretch; }
.plan-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
}
.plan-card__desc { flex: 1; margin-bottom: 0; }   /* описание занимает всё свободное место */
.plan-card .btn  { margin-top: auto; }            /* кнопка прижимается к низу */

/* === Финальный фикс цвета иконок навигации (стрelka белая, активная фиолетовая) === */
.sidebar__link svg, .sidebar__link--primary svg,
.tabbar__btn svg,   .tabbar__btn--primary svg {
  stroke: currentColor !important;
  fill: none !important;
}
.sidebar__link, .sidebar__link--primary { color: var(--text-muted); }
.sidebar__link[aria-current="page"], .sidebar__link--primary[aria-current="page"] {
  color: var(--accent) !important;
}
.tabbar__btn, .tabbar__btn--primary { color: var(--text-muted); }
.tabbar__btn[aria-current="page"], .tabbar__btn--primary[aria-current="page"] {
  color: var(--accent) !important;
}
.sidebar__link:hover, .sidebar__link--primary:hover { color: var(--text); }

/* === ABSOLUTE FINAL: трекер выглядит ровно как остальные иконки === */
.sidebar__link.sidebar__link--primary .sidebar__icon,
.tabbar__btn.tabbar__btn--primary .tabbar__icon {
  width: 24px !important; height: 24px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  display: grid; place-items: center;
}
.sidebar__link.sidebar__link--primary .sidebar__icon svg,
.tabbar__btn.tabbar__btn--primary .tabbar__icon svg {
  width: 22px !important; height: 22px !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2 !important;
  color: inherit !important;
}
.sidebar__link.sidebar__link--primary { color: var(--text-muted) !important; font-weight: 500 !important; background: transparent !important; }
.sidebar__link.sidebar__link--primary[aria-current="page"] {
  color: var(--accent) !important;
  background: var(--accent-soft) !important;
  font-weight: 600 !important;
}
.tabbar__btn.tabbar__btn--primary { align-self: center !important; color: var(--text-muted) !important; }
.tabbar__btn.tabbar__btn--primary[aria-current="page"] { color: var(--accent) !important; }

/* === ABSOLUTE FINAL: тарифные карточки одной высоты, кнопка прижата к низу === */
.plans-row { display: flex !important; align-items: stretch !important; }
.plans-row > .plan-card { display: flex !important; flex-direction: column !important; height: auto !important; align-self: stretch !important; }
.plan-card > .plan-card__desc { flex: 1 1 auto !important; }
.plan-card > .btn { margin-top: auto !important; }

/* === Анимация переключения вкладок Лента / Группы / Рейтинг === */
#social-body { animation: fadeUp 0.22s ease-out; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.social-tab {
  position: relative;
  transition: background 0.2s, color 0.2s, transform 0.12s;
}
.social-tab.is-active { transform: scale(1.02); }

/* Иконка трекера — как у остальных (32×32 контейнер на десктопе) */

/* === Шапка соцсети теперь без своего заголовка — только кнопка справа === */
.social-header { justify-content: flex-end; margin-bottom: var(--gap-2); }

/* === Соцсеть: таб «Чаты» + теперь 4 таба === */
.social-tabs { grid-template-columns: 1fr 1fr 1fr 1fr !important; }

.chats-tab { display: flex; flex-direction: column; gap: var(--gap-2); }
.chat-row {
  display: grid; grid-template-columns: auto 1fr; gap: var(--gap-3);
  align-items: center;
  padding: var(--gap-3);
  cursor: pointer;
  transition: background 0.15s;
}
.chat-row:hover { background: rgba(255,255,255,0.04); }
.chat-row__avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  display: grid; place-items: center;
  font-weight: 700; font-size: 16px;
}
.chat-row__main { min-width: 0; }
.chat-row__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.chat-row__nick { font-weight: 700; font-size: 14px; }
.chat-row__date { color: var(--text-muted); font-size: 11px; flex-shrink: 0; }
.chat-row__last { color: var(--text-muted); font-size: 13px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* === Auth card — гарантированно одна высота для login и register === */
.auth-card { min-height: 540px !important; height: auto !important; }
.auth-form { min-height: 240px; }

/* === Курсы: уменьшить отступ под "Тип:" и привести фильтр-роу к компакту === */
.courses-filters .filter-label { min-width: 70px !important; margin-right: 4px !important; }
.courses-filters .filter-row { gap: 6px !important; }

/* === Полноценный мессенджер: шапка с peer + время сообщений === */
.chat-header { gap: var(--gap-3); }
.chat-header__sub { color: var(--text-muted); font-size: 11px; margin-top: 2px; }
.msg__time {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 4px;
  text-align: right;
  font-feature-settings: "tnum";
}
.msg--mine .msg__time { color: rgba(255, 255, 255, 0.75); }

/* === Фильтры в /courses: убираем огромный отступ от label "Тип:" === */
.courses-filters .filter-label { min-width: auto !important; margin-right: 4px !important; }
.courses-filters .filter-row { flex-wrap: wrap; gap: 6px; }

/* === Auth: одинаковая высота для login и register === */
.auth-card { min-height: 480px !important; max-width: 440px; }
.auth-form { min-height: 240px; }

/* === Чаты: групповой аватар отличается === */
.chat-row__avatar.is-group {
  background: linear-gradient(135deg, var(--success), #88E03B);
  color: var(--bg-primary);
  font-size: 18px;
}

/* === Шапка чата: аватар собеседника === */
.chat-header__avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  display: grid; place-items: center;
  font-weight: 700; font-size: 14px;
  flex-shrink: 0;
}

/* === Курсы: все карточки одной высоты === */
.course-grid { grid-auto-rows: 1fr !important; align-items: stretch !important; }
.course-card {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
.course-card .card__sub { flex: 1 1 auto; }
.course-card .btn { margin-top: auto !important; }

/* === Тиндер: обложка вуза, свайп-анимация === */
.uni-card { overflow: hidden; user-select: none; touch-action: pan-y; }
.uni-card__cover {
  margin: -24px -24px 16px;
  height: 160px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
}
.uni-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.uni-swipe { transition: transform 0.2s, opacity 0.2s; }
.uni-card--out-left  { transform: translateX(-120%) rotate(-20deg) !important; opacity: 0 !important; }
.uni-card--out-right { transform: translateX( 120%) rotate( 20deg) !important; opacity: 0 !important; }

.scores-banner {
  cursor: pointer;
  background: linear-gradient(135deg, var(--accent-soft), rgba(255,200,87,0.10));
  border-color: var(--accent-soft);
}
.scores-banner__title { font-weight: 700; font-size: 14px; color: var(--accent); }
.scores-banner:hover { filter: brightness(1.1); }

.peers-screen { display: flex; flex-direction: column; gap: var(--gap-3); }
.peers-hero { text-align: center; padding: var(--gap-5); }
.peers-hero__title { margin: 0 0 8px; font-size: 22px; font-weight: 800; }
.peers-actions { display: flex; gap: 8px; }

/* === Профиль: «Мои баллы» === */
.scores-card { padding: var(--gap-4); }
.scores-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-3);
  margin-top: var(--gap-3);
}
@media (min-width: 768px) { .scores-grid { grid-template-columns: repeat(3, 1fr); } }
.score-input { display: flex; flex-direction: column; gap: 4px; }
.score-input span { font-size: 12px; color: var(--text-muted); }
.score-input input { padding: 10px 12px; font-size: 15px; }

/* Тиндер: «Твой балл» красным если ниже проходного */
.score-box--mine.is-low {
  background: rgba(255, 107, 107, 0.10) !important;
  border-color: rgba(255, 107, 107, 0.35) !important;
}
.score-box--mine.is-low .score-box__num { color: var(--danger) !important; }