/* css/tokens.css */
/* ============================================================
   AI Репетитор — дизайн-токены
   Палитра выведена из логотипа (сова, золотое кольцо, книга),
   но смещена в индиго/аква, чтобы уйти от сине-жёлтой пары.
   ============================================================ */

:root {
  /* — Бренд — */
  --brand-ink:      #0B1533;   /* глубокий синий с логотипа  */
  --brand-cyan:     #29ABE2;   /* перо совы                  */
  --brand-cyan-2:   #5BE1F5;
  --brand-violet:   #7C5CFF;   /* ведущий акцент             */
  --brand-violet-2: #A78BFA;
  --brand-magenta:  #F472B6;
  --brand-gold:     #FFC53D;   /* только награды/XP          */
  --brand-gold-2:   #FFE8A3;

  /* — Семантика — */
  --ok:      #34D399;
  --ok-soft: rgba(52, 211, 153, .14);
  --warn:    #FBBF24;
  --warn-soft: rgba(251, 191, 36, .14);
  --danger:  #FB7185;
  --danger-soft: rgba(251, 113, 133, .14);
  --info:    #38BDF8;

  /* — Поверхности (тёмная тема по умолчанию) — */
  --bg-0: #060A18;
  --bg-1: #0A1024;
  --bg-2: #0E1630;
  --surface:        rgba(255, 255, 255, .045);
  --surface-strong: rgba(255, 255, 255, .075);
  --surface-hover:  rgba(255, 255, 255, .10);
  --stroke:        rgba(255, 255, 255, .10);
  --stroke-strong: rgba(255, 255, 255, .18);

  /* — Текст — */
  --text:      #EEF2FF;
  --text-soft: #B9C2E0;
  --text-dim:  #7C87AD;
  --text-on-accent: #0A0F22;

  /* — Тени и свечения — */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .28);
  --shadow-md: 0 10px 30px rgba(3, 6, 20, .45);
  --shadow-lg: 0 28px 70px rgba(3, 6, 20, .6);
  --glow-violet: 0 0 44px rgba(124, 92, 255, .38);
  --glow-cyan:   0 0 44px rgba(41, 171, 226, .34);
  --glow-gold:   0 0 34px rgba(255, 197, 61, .35);

  /* — Градиенты — */
  /* Белый текст на основном градиенте читается (контраст ≥ 4.5:1 по всей длине) */
  --grad-primary: linear-gradient(135deg, #6B47F0 0%, #3F5BE0 50%, #1573AD 100%);
  --grad-aurora:  linear-gradient(120deg, #7C5CFF 0%, #29ABE2 40%, #34D399 75%, #FFC53D 100%);
  --grad-gold:    linear-gradient(135deg, #FFE8A3 0%, #FFC53D 55%, #F59E0B 100%);
  --grad-surface: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02));

  /* — Геометрия — */
  --r-xs: 8px;  --r-sm: 12px; --r-md: 16px;
  --r-lg: 22px; --r-xl: 30px; --r-pill: 999px;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 22px; --sp-6: 30px; --sp-7: 42px; --sp-8: 60px; --sp-9: 88px;

  --maxw: 1240px;
  --header-h: 72px;
  --rail-w: 264px;

  /* — Типографика — */
  --font: "Onest", "Manrope", "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Onest", "Manrope", var(--font);
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  /* — Движение — */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out-back: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: .16s; --t: .28s; --t-slow: .55s;
}

/* ——— Светлая тема ——— */
[data-theme="light"] {
  --bg-0: #F4F6FE;
  --bg-1: #FFFFFF;
  --bg-2: #EEF1FB;
  --surface:        rgba(11, 21, 51, .035);
  --surface-strong: rgba(11, 21, 51, .06);
  --surface-hover:  rgba(11, 21, 51, .08);
  --stroke:        rgba(11, 21, 51, .10);
  --stroke-strong: rgba(11, 21, 51, .18);

  --text:      #0B1533;
  --text-soft: #3A4A74;
  --text-dim:  #56638A;   /* контраст с белым ≥ 5.5:1 — мелкий текст читается */
  --text-on-accent: #FFFFFF;

  /* Акцентные цвета, которыми пишут текст, на светлом фоне темнее */
  --brand-violet-2: #6A48DE;
  --brand-cyan:     #0B7FB5;
  --brand-cyan-2:   #0E7490;
  --brand-gold:     #A35F00;
  --brand-magenta:  #C0266E;
  --ok:     #047857;
  --ok-soft: rgba(4, 120, 87, .12);
  --warn:   #A15C07;
  --warn-soft: rgba(161, 92, 7, .12);
  --danger: #C8203F;
  --danger-soft: rgba(200, 32, 63, .10);
  --info:   #0369A1;

  --shadow-sm: 0 2px 8px rgba(23, 38, 84, .08);
  --shadow-md: 0 12px 32px rgba(23, 38, 84, .10);
  --shadow-lg: 0 30px 70px rgba(23, 38, 84, .16);
  --glow-violet: 0 0 40px rgba(124, 92, 255, .22);
  --glow-cyan:   0 0 40px rgba(41, 171, 226, .20);
  --grad-surface: linear-gradient(160deg, rgba(255,255,255,.95), rgba(255,255,255,.72));
}

/* Уважаем системную настройку «меньше движения» */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* css/base.css */
/* ============ Сброс и базовая типографика ============ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--bg-0);
  color: var(--text);
  font-size: 16px;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}

img, svg, video { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.12;
  letter-spacing: -.025em;
  font-weight: 800;
}
h1 { font-size: clamp(2.1rem, 5.4vw, 4.1rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.7rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); }
h4 { font-size: 1.05rem; font-weight: 700; }

::selection { background: rgba(124, 92, 255, .38); color: #fff; }

:focus-visible {
  outline: 2px solid var(--brand-violet-2);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Полоса прокрутки */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--surface-strong);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: var(--stroke-strong); background-clip: content-box; }

/* ============ Космический фон с «северным сиянием» ============ */
.bg-canvas {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background:
    radial-gradient(1200px 700px at 12% -8%,  rgba(124, 92, 255, .30), transparent 62%),
    radial-gradient(1000px 640px at 92% 6%,   rgba(41, 171, 226, .26), transparent 60%),
    radial-gradient(900px 620px at 50% 108%,  rgba(244, 114, 182, .16), transparent 62%),
    var(--bg-0);
}
[data-theme="light"] .bg-canvas {
  background:
    radial-gradient(1100px 660px at 10% -10%, rgba(124, 92, 255, .20), transparent 60%),
    radial-gradient(900px 600px at 94% 4%,    rgba(41, 171, 226, .20), transparent 58%),
    radial-gradient(800px 560px at 46% 106%,  rgba(52, 211, 153, .14), transparent 60%),
    var(--bg-0);
}

.bg-canvas::after {   /* тонкая «сетка знаний» */
  content: "";
  position: absolute;
  inset: -40%;
  background-image:
    linear-gradient(var(--stroke) 1px, transparent 1px),
    linear-gradient(90deg, var(--stroke) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: .30;
  mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 72%);
  animation: gridDrift 60s linear infinite;
}
@keyframes gridDrift { to { transform: translate3d(64px, 64px, 0); } }

.bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .5;
  will-change: transform;
}
.bg-orb--1 { width: 520px; height: 520px; top: -160px;  left: -120px; background: #7C5CFF; animation: float1 26s ease-in-out infinite; }
.bg-orb--2 { width: 460px; height: 460px; top: 24%;     right: -160px; background: #29ABE2; animation: float2 32s ease-in-out infinite; }
.bg-orb--3 { width: 380px; height: 380px; bottom: -140px; left: 38%;  background: #F472B6; opacity: .3; animation: float3 38s ease-in-out infinite; }

@keyframes float1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(90px, 70px) scale(1.12); } }
@keyframes float2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-80px, 90px) scale(.9); } }
@keyframes float3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(60px, -70px) scale(1.15); } }

/* Звёздное поле */
.bg-stars { position: absolute; inset: 0; opacity: .55; }
[data-theme="light"] .bg-stars { opacity: .18; }
.bg-stars i {
  position: absolute;
  width: 2px; height: 2px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(255,255,255,.9);
  animation: twinkle 4s ease-in-out infinite;
}
@keyframes twinkle { 0%,100% { opacity: .15; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.3); } }

/* ============ Служебные классы ============ */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); }
.row { display: flex; align-items: center; gap: var(--sp-3); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.col { display: flex; flex-direction: column; }
.wrap-gap { flex-wrap: wrap; }
.grow { flex: 1; }
.center { display: flex; align-items: center; justify-content: center; }
.hidden { display: none !important; }
.t-soft { color: var(--text-soft); }
.t-dim  { color: var(--text-dim); }
.t-sm   { font-size: .875rem; }
.t-xs   { font-size: .78rem; }
.t-center { text-align: center; }
.t-bold { font-weight: 700; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }

.gradient-text {
  background: var(--grad-primary);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.gradient-text--gold { background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.gradient-text--aurora { background: var(--grad-aurora); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: auroraShift 9s linear infinite; }
@keyframes auroraShift { to { background-position: 220% center; } }

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

/* css/components.css */
/* ==================== КНОПКИ ==================== */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 22px;
  border-radius: var(--r-pill);
  font-weight: 650; font-size: .95rem; line-height: 1;
  white-space: nowrap; cursor: pointer;
  border: 1px solid transparent;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease),
              background var(--t) var(--ease), border-color var(--t) var(--ease), opacity var(--t) var(--ease);
  overflow: hidden;
}
.btn:active { transform: translateY(1px) scale(.985); }
.btn:disabled { opacity: .45; pointer-events: none; }
.btn svg { width: 18px; height: 18px; flex: none; }

.btn--primary {
  background: var(--grad-primary);
  color: #fff;
  box-shadow: 0 10px 28px rgba(79, 123, 255, .34);
}
.btn--primary::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.42) 48%, transparent 76%);
  transform: translateX(-130%);
  transition: transform .75s var(--ease);
}
.btn--primary:hover::after { transform: translateX(130%); }
.btn--primary:hover { box-shadow: 0 16px 40px rgba(79, 123, 255, .5); transform: translateY(-2px); }

.btn--gold { background: var(--grad-gold); color: #3A2703; box-shadow: 0 10px 26px rgba(245, 158, 11, .34); }
.btn--gold:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(245, 158, 11, .46); }

.btn--ghost { background: var(--surface); border-color: var(--stroke); color: var(--text); backdrop-filter: blur(12px); }
.btn--ghost:hover { background: var(--surface-hover); border-color: var(--stroke-strong); transform: translateY(-2px); }

.btn--outline { border-color: var(--stroke-strong); color: var(--text); }
.btn--outline:hover { background: var(--surface); border-color: var(--brand-violet); }

.btn--quiet { padding: 8px 14px; color: var(--text-soft); border-radius: var(--r-sm); }
.btn--quiet:hover { background: var(--surface); color: var(--text); }

.btn--danger { background: var(--danger-soft); color: var(--danger); border-color: rgba(251,113,133,.3); }
.btn--danger:hover { background: rgba(251,113,133,.22); }

.btn--lg { padding: 16px 32px; font-size: 1.04rem; }
.btn--sm { padding: 8px 15px; font-size: .84rem; gap: 6px; }
.btn--sm svg { width: 15px; height: 15px; }
.btn--block { width: 100%; }
.btn--icon { padding: 10px; border-radius: var(--r-sm); aspect-ratio: 1; }

/* ==================== КАРТОЧКИ ==================== */
.card {
  position: relative;
  background: var(--grad-surface);
  border: 1px solid var(--stroke);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.card--hover:hover { transform: translateY(-4px); border-color: var(--stroke-strong); box-shadow: var(--shadow-md); }
/* Плотная подложка: метрики должны читаться поверх ярких пятен фона */
.card--flat {
  background: color-mix(in srgb, var(--bg-1) 72%, transparent);
  backdrop-filter: blur(14px);
  box-shadow: none;
}
.card--pad-sm { padding: var(--sp-4); }
.card--glow::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
  background: var(--grad-primary);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity var(--t) var(--ease); pointer-events: none;
}
.card--glow:hover::before { opacity: 1; }

.card-title { display: flex; align-items: center; gap: 10px; font-size: 1.02rem; font-weight: 700; margin-bottom: var(--sp-4); }
.card-title svg { width: 19px; height: 19px; color: var(--brand-violet-2); }

/* ==================== ФОРМЫ ==================== */
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: var(--sp-4); }
.field > label { font-size: .84rem; font-weight: 600; color: var(--text-soft); }
.field-hint { font-size: .76rem; color: var(--text-dim); }
.field-error { font-size: .78rem; color: var(--danger); display: flex; align-items: center; gap: 5px; }

.input, .textarea, .select {
  width: 100%;
  padding: 12px 15px;
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--r-sm);
  color: var(--text);
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--text-dim); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--brand-violet);
  background: var(--surface-strong);
  box-shadow: 0 0 0 4px rgba(124, 92, 255, .16);
}
.input[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(251,113,133,.14); }
.textarea { resize: vertical; min-height: 96px; line-height: 1.55; }
.select {
  appearance: none; cursor: pointer;
  background-repeat: no-repeat; background-position: right 13px center; background-size: 17px;
  padding-right: 40px;
}
.select option { background: var(--bg-2); color: var(--text); }
.select-wrap { position: relative; }
.select-wrap::after {
  content: ""; position: absolute; right: 14px; top: 50%; width: 9px; height: 9px;
  border-right: 2px solid var(--text-dim); border-bottom: 2px solid var(--text-dim);
  transform: translateY(-70%) rotate(45deg); pointer-events: none; border-radius: 1px;
}

/* Выбор карточкой (роль, класс, цель) */
.choice-grid { display: grid; gap: var(--sp-3); }
.choice {
  position: relative; display: flex; gap: 14px; align-items: flex-start;
  padding: 18px; border: 1px solid var(--stroke); border-radius: var(--r-md);
  background: var(--surface); cursor: pointer; text-align: left;
  transition: all var(--t) var(--ease);
}
.choice:hover { border-color: var(--stroke-strong); background: var(--surface-hover); transform: translateY(-2px); }
.choice[aria-pressed="true"], .choice.is-active {
  border-color: var(--brand-violet);
  background: linear-gradient(135deg, rgba(124,92,255,.18), rgba(41,171,226,.10));
  box-shadow: 0 0 0 3px rgba(124,92,255,.14);
}
.choice-icon {
  width: 44px; height: 44px; flex: none; border-radius: 13px;
  display: grid; place-items: center; font-size: 1.35rem;
  background: var(--surface-strong); border: 1px solid var(--stroke);
}
.choice[aria-pressed="true"] .choice-icon { background: var(--grad-primary); border-color: transparent; }
/* Заголовок и описание — отдельными строками, иначе они сливаются в одну */
.choice > span:not(.choice-icon):not(.badge) { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.choice-title { display: block; font-weight: 700; }

/* Переключатель */
.switch { position: relative; width: 46px; height: 26px; flex: none; border-radius: 99px; background: var(--surface-strong); border: 1px solid var(--stroke); transition: all var(--t) var(--ease); cursor: pointer; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--text-dim); transition: all var(--t) var(--ease-out-back); }
.switch[aria-checked="true"] { background: var(--grad-primary); border-color: transparent; }
.switch[aria-checked="true"]::after { left: 22px; background: #fff; }

/* Сегментированный контрол */
.segmented { display: inline-flex; padding: 4px; gap: 3px; background: var(--surface); border: 1px solid var(--stroke); border-radius: var(--r-pill); }
.segmented button { padding: 7px 16px; border-radius: var(--r-pill); font-size: .85rem; font-weight: 600; color: var(--text-soft); transition: all var(--t) var(--ease); }
.segmented button:hover { color: var(--text); }
.segmented button.is-active { background: var(--surface-hover); color: var(--text); box-shadow: var(--shadow-sm); }

/* ==================== БЕЙДЖИ, ЧИПЫ ==================== */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: var(--r-pill);
  font-size: .74rem; font-weight: 700; letter-spacing: .012em;
  background: var(--surface-strong); border: 1px solid var(--stroke); color: var(--text-soft);
}
.badge svg { width: 13px; height: 13px; }
.badge--ok     { background: var(--ok-soft);     color: var(--ok);     border-color: rgba(52,211,153,.28); }
.badge--warn   { background: var(--warn-soft);   color: var(--warn);   border-color: rgba(251,191,36,.28); }
.badge--danger { background: var(--danger-soft); color: var(--danger); border-color: rgba(251,113,133,.28); }
.badge--violet { background: rgba(124,92,255,.16); color: var(--brand-violet-2); border-color: rgba(124,92,255,.3); }
.badge--gold   { background: rgba(255,197,61,.14); color: var(--brand-gold); border-color: rgba(255,197,61,.3); }
.badge--cyan   { background: rgba(41,171,226,.14); color: var(--brand-cyan-2); border-color: rgba(41,171,226,.3); }

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--stroke);
  font-size: .84rem; font-weight: 600; color: var(--text-soft);
  cursor: pointer; transition: all var(--t) var(--ease);
}
.chip:hover { background: var(--surface-hover); color: var(--text); border-color: var(--stroke-strong); }
.chip.is-active { background: rgba(124,92,255,.18); border-color: var(--brand-violet); color: var(--text); }

/* ==================== ПРОГРЕСС ==================== */
.bar { height: 9px; border-radius: 99px; background: var(--surface-strong); overflow: hidden; position: relative; }
.bar > i {
  display: block; height: 100%; border-radius: 99px;
  background: var(--grad-primary);
  transition: width .9s var(--ease);
  position: relative; overflow: hidden;
}
.bar > i::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  animation: barShine 2.4s ease-in-out infinite;
}
@keyframes barShine { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(200%); } }
.bar--sm { height: 6px; }
.bar--ok > i     { background: linear-gradient(90deg, #34D399, #6EE7B7); }
.bar--warn > i   { background: linear-gradient(90deg, #F59E0B, #FBBF24); }
.bar--danger > i { background: linear-gradient(90deg, #F43F5E, #FB7185); }

/* Кольцевой индикатор */
.ring { position: relative; display: grid; place-items: center; flex-shrink: 0; }
.ring svg { transform: rotate(-90deg); display: block; }
.ring circle { fill: none; stroke-linecap: round; }
.ring .ring-track { stroke: var(--surface-strong); }
.ring-label { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; text-align: center; overflow: hidden; }
.ring-caption { display: block; color: var(--text-dim, rgba(255,255,255,.6)); line-height: 1.15; margin-top: 2px; max-width: 100%; overflow-wrap: anywhere; }
.ring-value { font-weight: 800; font-size: 1.3rem; font-variant-numeric: tabular-nums; }

/* ==================== АВАТАР ==================== */
.avatar {
  width: 42px; height: 42px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 800; font-size: .95rem; color: #fff;
  background: var(--grad-primary);
  border: 2px solid var(--stroke);
  position: relative;
}
.avatar--lg { width: 68px; height: 68px; font-size: 1.5rem; }
.avatar--xl { width: 92px; height: 92px; font-size: 2rem; }
.avatar--sm { width: 32px; height: 32px; font-size: .78rem; }
.avatar[data-online="1"]::after {
  content: ""; position: absolute; right: -1px; bottom: -1px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--ok); border: 2px solid var(--bg-1);
}

/* ==================== ВКЛАДКИ ==================== */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--stroke); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  padding: 12px 16px; font-size: .92rem; font-weight: 600; color: var(--text-dim);
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
  transition: all var(--t) var(--ease);
}
.tabs button:hover { color: var(--text-soft); }
.tabs button.is-active { color: var(--text); border-bottom-color: var(--brand-violet); }

/* ==================== ТАБЛИЦА ==================== */
.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th {
  text-align: left; font-size: .74rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-dim); padding: 10px 12px;
  border-bottom: 1px solid var(--stroke);
}
.table td { padding: 13px 12px; border-bottom: 1px solid var(--stroke); vertical-align: middle; }
.table tbody tr { transition: background var(--t-fast) var(--ease); }
.table tbody tr:hover { background: var(--surface); }

/* ==================== МОДАЛЬНОЕ ОКНО ==================== */
.modal-root {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; padding: 20px;
  background: rgba(4, 7, 20, .68);
  backdrop-filter: blur(10px);
  animation: fadeIn var(--t) var(--ease);
}
.modal {
  width: min(560px, 100%);
  max-height: 88vh; overflow-y: auto;
  background: var(--bg-1);
  border: 1px solid var(--stroke-strong);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  box-shadow: var(--shadow-lg);
  animation: modalIn .38s var(--ease-out-back);
}
.modal--wide { width: min(880px, 100%); }
@keyframes modalIn { from { opacity: 0; transform: translateY(24px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ==================== ТОСТЫ ==================== */
.toast-root { position: fixed; top: 20px; right: 20px; z-index: 300; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 18px; min-width: 260px; max-width: 380px;
  background: var(--bg-2); border: 1px solid var(--stroke-strong);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  font-size: .9rem; font-weight: 550;
  animation: toastIn .42s var(--ease-out-back);
  pointer-events: auto;
}
.toast svg { width: 19px; height: 19px; flex: none; }
.toast--ok svg { color: var(--ok); }
.toast--err svg { color: var(--danger); }
.toast--info svg { color: var(--info); }
.toast.is-out { animation: toastOut .3s var(--ease) forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateX(110%); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateX(110%); } }

/* ==================== ПРОЧЕЕ ==================== */
.divider { height: 1px; background: var(--stroke); border: 0; margin: var(--sp-5) 0; }
.divider--text { display: flex; align-items: center; gap: 14px; color: var(--text-dim); font-size: .8rem; margin: var(--sp-5) 0; }
.divider--text::before, .divider--text::after { content: ""; flex: 1; height: 1px; background: var(--stroke); }

.empty { text-align: center; padding: var(--sp-8) var(--sp-4); color: var(--text-dim); }
.empty-icon { font-size: 2.6rem; margin-bottom: var(--sp-3); opacity: .6; }

/* Подсказки: отдельный слой поверх страницы, позиция подгоняется
   под край экрана (js/core.js → Tip), поэтому текст не обрезается */
.tip { position: relative; }
.floating-tip {
  position: fixed; z-index: 1000; max-width: min(280px, calc(100vw - 16px));
  padding: 7px 11px; border-radius: 9px; white-space: normal; text-align: center;
  background: var(--bg-2); border: 1px solid var(--stroke-strong);
  font-size: .78rem; font-weight: 600; line-height: 1.3; color: var(--text-soft);
  box-shadow: var(--shadow-md); pointer-events: none;
  opacity: 0; transform: translateY(4px); transition: opacity .15s ease, transform .15s ease;
}
.floating-tip.is-on { opacity: 1; transform: none; }

.skeleton {
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-hover) 50%, var(--surface) 75%);
  background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: var(--r-sm);
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* Телефон: окна выезжают снизу (как в приложениях) — до кнопок дотягивается большой палец */
@media (max-width: 640px) {
  .modal-root { place-items: end stretch; padding: 0; }
  .modal {
    width: 100%; max-height: 92vh; max-height: 92dvh;
    border-radius: var(--r-xl) var(--r-xl) 0 0; border-bottom: 0;
    padding: var(--sp-5) var(--sp-4) calc(var(--sp-5) + env(safe-area-inset-bottom));
    animation: sheetIn .32s var(--ease);
  }
  .modal--wide { width: 100%; }
  /* Поля в одну строку (класс + дата рождения) — друг под другом */
  .modal .row:has(> .field) { flex-direction: column; align-items: stretch !important; }
  .toast-root { top: 12px; left: 12px; right: 12px; align-items: stretch; }
  .toast { min-width: 0; max-width: none; }
}
@keyframes sheetIn { from { transform: translateY(100%); } to { transform: none; } }

/* css/logo.css */
/* ============================================================
   ИНТЕРАКТИВНЫЙ ЛОГОТИП
   Сова парит внутри вращающихся орбит, реагирует на курсор
   (3D-наклон), при клике — «взмах» и выброс искр знаний.
   ============================================================ */

.logo-orb {
  position: relative;
  /* Не даём орбите вылезти за пределы узкого экрана */
  width: min(var(--orb, 340px), 78vw);
  height: min(var(--orb, 340px), 78vw);
  display: grid;
  place-items: center;
  perspective: 1100px;
  cursor: pointer;
  user-select: none;
  -webkit-user-drag: none;
}

/* — Световое ядро за совой — */
.logo-orb__glow {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 92, 255, .55) 0%, rgba(41, 171, 226, .28) 42%, transparent 70%);
  filter: blur(34px);
  animation: orbPulse 5.5s ease-in-out infinite;
}
@keyframes orbPulse {
  0%, 100% { transform: scale(1);    opacity: .75; }
  50%      { transform: scale(1.14); opacity: 1; }
}

/* — Орбитальные кольца — */
.logo-orb__ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

/* Внешнее золотое кольцо — перекликается с кольцом на логотипе */
.logo-orb__ring--gold {
  inset: 0;
  border: 1.5px solid transparent;
  background:
    conic-gradient(from 0deg,
      transparent 0%, rgba(255, 197, 61, .05) 12%, rgba(255, 232, 163, .95) 25%,
      rgba(255, 197, 61, .35) 38%, transparent 52%,
      transparent 72%, rgba(255, 197, 61, .6) 84%, transparent 100%) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: spin 14s linear infinite;
}

/* Среднее фиолетово-аквовое кольцо, крутится в обратную сторону */
.logo-orb__ring--aurora {
  inset: 9%;
  border: 1px solid transparent;
  background:
    conic-gradient(from 180deg,
      transparent 0%, rgba(124, 92, 255, .9) 18%, transparent 34%,
      transparent 58%, rgba(41, 171, 226, .9) 76%, transparent 92%) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: spinReverse 9s linear infinite;
}

/* Пунктирное кольцо-«сканер» */
.logo-orb__ring--dashed {
  inset: 18%;
  border: 1px dashed rgba(255, 255, 255, .22);
  animation: spin 26s linear infinite;
}

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

/* — Орбитальные частицы («кванты знаний») — */
.logo-orb__orbit {
  position: absolute;
  inset: 0;
  animation: spin var(--dur, 12s) linear infinite;
  animation-direction: var(--dir, normal);
  pointer-events: none;
}
.logo-orb__particle {
  position: absolute;
  top: calc(50% - 4px);
  left: var(--px, -4px);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--pc, var(--brand-cyan-2));
  box-shadow: 0 0 14px 2px var(--pc, var(--brand-cyan-2));
}
.logo-orb__particle--sq {
  border-radius: 2px;
  transform: rotate(45deg);
}

/* — Сама сова — */
.logo-orb__owl {
  position: relative;
  z-index: 3;
  width: 78%;
  transform-style: preserve-3d;
  transform:
    rotateY(var(--ry, 0deg))
    rotateX(var(--rx, 0deg))
    translateZ(40px);
  transition: transform .35s var(--ease), filter var(--t) var(--ease);
  filter: drop-shadow(0 18px 34px rgba(8, 14, 40, .6));
  animation: owlFloat 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes owlFloat {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -14px; }
}
.logo-orb:hover .logo-orb__owl {
  filter: drop-shadow(0 22px 42px rgba(124, 92, 255, .6)) saturate(1.12) brightness(1.06);
}
.logo-orb:hover .logo-orb__ring--gold   { animation-duration: 5s; }
.logo-orb:hover .logo-orb__ring--aurora { animation-duration: 3.4s; }

/* Клик — «взмах крыльев» */
.logo-orb.is-flapping .logo-orb__owl { animation: owlFlap .72s var(--ease-out-back); }
@keyframes owlFlap {
  0%   { transform: scale(1)    rotate(0deg); }
  22%  { transform: scale(1.1)  rotate(-6deg); }
  48%  { transform: scale(.96)  rotate(5deg); }
  72%  { transform: scale(1.05) rotate(-2deg); }
  100% { transform: scale(1)    rotate(0deg); }
}

/* Искры знаний при клике */
.logo-spark {
  position: absolute;
  top: 50%; left: 50%;
  width: 7px; height: 7px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 4;
  animation: sparkFly .95s var(--ease) forwards;
}
@keyframes sparkFly {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.2); }
}

/* — Компактный логотип в шапке — */
.logo-mark {
  display: flex; align-items: center; gap: 11px;
  font-family: var(--font-display);
  font-weight: 800; font-size: 1.12rem; letter-spacing: -.02em;
}
.logo-mark__img {
  width: 42px; height: 42px;
  object-fit: contain;
  transition: transform .6s var(--ease-out-back), filter var(--t) var(--ease);
  filter: drop-shadow(0 3px 8px rgba(41, 171, 226, .42));
}
.logo-mark:hover .logo-mark__img {
  transform: rotateY(360deg) scale(1.1);
  filter: drop-shadow(0 4px 14px rgba(124, 92, 255, .7));
}
.logo-mark__text { display: flex; flex-direction: column; line-height: 1.05; }
.logo-mark__text b { font-weight: 800; }
.logo-mark__text span { font-size: .62rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim); }

/* — Логотип-загрузчик — */
.logo-loader { display: grid; place-items: center; gap: 18px; padding: var(--sp-9) 0; }
.logo-loader img { width: 74px; animation: loaderSpin 2.4s var(--ease) infinite; }
@keyframes loaderSpin {
  0%   { transform: rotateY(0)      scale(1); }
  50%  { transform: rotateY(180deg) scale(1.12); }
  100% { transform: rotateY(360deg) scale(1); }
}

/* css/landing.css */
/* ==================== ШАПКА ==================== */
.site-header {
  position: sticky; top: 0; z-index: 90;
  height: var(--header-h);
  display: flex; align-items: center;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease), backdrop-filter var(--t) var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
  background: color-mix(in srgb, var(--bg-0) 78%, transparent);
  backdrop-filter: blur(20px) saturate(1.4);
  border-bottom-color: var(--stroke);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }

.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  position: relative; padding: 9px 15px; border-radius: var(--r-pill);
  font-size: .91rem; font-weight: 600; color: var(--text-soft);
  transition: color var(--t) var(--ease), background var(--t) var(--ease);
}
.nav-links a:hover { color: var(--text); background: var(--surface); }

.header-actions { display: flex; align-items: center; gap: 10px; }

.theme-toggle {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--stroke); color: var(--text-soft);
  transition: all var(--t) var(--ease);
}
.theme-toggle:hover { background: var(--surface-hover); color: var(--text); transform: rotate(35deg) scale(1.08); }
.theme-toggle svg { width: 18px; height: 18px; }

.burger { display: none; width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--stroke); }
.burger span { display: block; width: 18px; height: 2px; margin: 3px auto; background: var(--text); border-radius: 2px; transition: all var(--t) var(--ease); }

/* ==================== HERO ==================== */
.hero { position: relative; padding: clamp(40px, 7vw, 90px) 0 clamp(60px, 9vw, 120px); }
.hero .wrap { display: grid; grid-template-columns: 1.06fr .94fr; gap: clamp(28px, 5vw, 64px); align-items: center; }

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 15px 7px 8px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--stroke);
  font-size: .81rem; font-weight: 650; color: var(--text-soft);
  margin-bottom: var(--sp-5);
  backdrop-filter: blur(10px);
}
.hero-eyebrow b {
  padding: 3px 9px; border-radius: var(--r-pill);
  background: var(--grad-primary); color: #fff; font-size: .7rem; letter-spacing: .04em;
}

.hero h1 { margin-bottom: var(--sp-4); }
.hero-sub { font-size: clamp(1rem, 1.5vw, 1.16rem); color: var(--text-soft); max-width: 55ch; margin-bottom: var(--sp-6); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 13px; margin-bottom: var(--sp-6); }

.hero-trust { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
.hero-trust > div { display: flex; flex-direction: column; }
.hero-trust b { font-size: 1.45rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.hero-trust span { font-size: .78rem; color: var(--text-dim); }

.hero-visual { position: relative; display: grid; place-items: center; min-height: 420px; }

/* Плавающие карточки вокруг совы */
.float-card {
  position: absolute;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 15px;
  background: color-mix(in srgb, var(--bg-2) 88%, transparent);
  border: 1px solid var(--stroke-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(16px);
  font-size: .82rem; font-weight: 600;
  z-index: 5;
  animation: cardFloat 7s ease-in-out infinite;
  white-space: nowrap;
}
.float-card i { font-style: normal; font-size: 1.15rem; }
.float-card small { display: block; font-size: .7rem; font-weight: 500; color: var(--text-dim); }
.float-card--1 { top: 6%;   left: -4%;  animation-delay: 0s; }
.float-card--2 { top: 34%;  right: -6%; animation-delay: 1.4s; }
.float-card--3 { bottom: 14%; left: -8%; animation-delay: 2.6s; }
.float-card--4 { bottom: 2%;  right: 2%; animation-delay: 3.6s; }
@keyframes cardFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-13px); }
}

/* ==================== СЕКЦИИ ==================== */
.section { padding: clamp(56px, 8vw, 110px) 0; position: relative; }
.section-head { max-width: 680px; margin: 0 auto clamp(32px, 5vw, 56px); text-align: center; }
.section-head.is-left { margin-inline: 0; text-align: left; }
.section-tag {
  display: inline-block; padding: 5px 13px; border-radius: var(--r-pill);
  background: rgba(124, 92, 255, .14); border: 1px solid rgba(124, 92, 255, .28);
  color: var(--brand-violet-2); font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; margin-bottom: var(--sp-4);
}
.section-head h2 { margin-bottom: var(--sp-3); }
.section-head p { color: var(--text-soft); font-size: 1.03rem; }

/* — Сетка возможностей — */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: var(--sp-4); }
.feature {
  position: relative; overflow: hidden;
  padding: var(--sp-6) var(--sp-5);
}
.feature::after {
  content: ""; position: absolute; top: -60px; right: -60px;
  width: 170px; height: 170px; border-radius: 50%;
  background: var(--fx, var(--brand-violet)); opacity: .12; filter: blur(46px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
.feature:hover::after { opacity: .28; transform: scale(1.35); }
.feature-icon {
  width: 52px; height: 52px; border-radius: 16px;
  display: grid; place-items: center; font-size: 1.5rem;
  background: var(--surface-strong); border: 1px solid var(--stroke);
  margin-bottom: var(--sp-4);
  transition: transform var(--t) var(--ease-out-back);
}
.feature:hover .feature-icon { transform: translateY(-4px) rotate(-7deg) scale(1.06); }
.feature h3 { font-size: 1.12rem; margin-bottom: 9px; }
.feature p { color: var(--text-soft); font-size: .92rem; }

/* — Как это работает — */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--sp-4); counter-reset: step; }
.step { position: relative; padding-top: var(--sp-6); }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: 0; left: 0;
  width: 44px; height: 44px; border-radius: 14px;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 1.15rem;
  background: var(--grad-primary); color: #fff;
  box-shadow: var(--glow-violet);
}
.step h3 { font-size: 1.05rem; margin: var(--sp-5) 0 8px; }
.step p { color: var(--text-soft); font-size: .9rem; }
.step-line {
  position: absolute; top: 21px; left: 56px; right: -16px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--stroke-strong) 0 7px, transparent 7px 15px);
}
.step:last-child .step-line { display: none; }

/* — Предметы — */
.subject-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: var(--sp-3); }
.subject-tile {
  display: flex; flex-direction: column; gap: 9px;
  padding: var(--sp-4);
  border-radius: var(--r-md);
  border: 1px solid var(--stroke);
  background: var(--surface);
  transition: all var(--t) var(--ease);
  cursor: default;
}
.subject-tile:hover { transform: translateY(-4px); border-color: var(--sc, var(--brand-violet)); background: var(--surface-hover); box-shadow: 0 12px 30px rgba(0,0,0,.2); }
.subject-tile__icon {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  font-size: 1.25rem;
  background: color-mix(in srgb, var(--sc, #7C5CFF) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--sc, #7C5CFF) 34%, transparent);
}
.subject-tile b { font-size: .95rem; font-weight: 700; }
.subject-tile small { font-size: .74rem; color: var(--text-dim); }

/* — Демонстрация родительского кабинета — */
.showcase { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(28px, 5vw, 60px); align-items: center; }
.showcase--flip { grid-template-columns: 1.08fr .92fr; }
.showcase--flip .showcase-text { order: 2; }
.showcase-list { display: flex; flex-direction: column; gap: 15px; margin-top: var(--sp-5); }
.showcase-list li { display: flex; gap: 12px; align-items: flex-start; }
.showcase-list .tick {
  width: 24px; height: 24px; flex: none; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--ok-soft); color: var(--ok);
  border: 1px solid rgba(52,211,153,.3);
}
.showcase-list .tick svg { width: 13px; height: 13px; }
.showcase-list b { display: block; font-size: .95rem; margin-bottom: 2px; }
.showcase-list span { font-size: .87rem; color: var(--text-soft); }

.mockup {
  position: relative;
  border-radius: var(--r-xl);
  border: 1px solid var(--stroke-strong);
  background: linear-gradient(165deg, var(--bg-2), var(--bg-1));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  padding: var(--sp-5);
}
.mockup::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(500px 240px at 80% -10%, rgba(124,92,255,.22), transparent 70%);
  pointer-events: none;
}
.mockup-bar { display: flex; gap: 6px; margin-bottom: var(--sp-4); }
.mockup-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--stroke-strong); }
.mockup-bar i:first-child { background: #FB7185; }
.mockup-bar i:nth-child(2) { background: #FBBF24; }
.mockup-bar i:nth-child(3) { background: #34D399; }

/* — Тарифы — */
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: var(--sp-4); align-items: stretch; }
.plan { display: flex; flex-direction: column; padding: var(--sp-6); }
.plan--featured {
  border-color: var(--brand-violet);
  background: linear-gradient(165deg, rgba(124,92,255,.16), rgba(41,171,226,.06));
  box-shadow: 0 0 0 1px rgba(124,92,255,.3), var(--shadow-md);
  transform: scale(1.02);
}
.plan-name { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--text-dim); margin-bottom: 12px; }
.plan-price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; }
.plan-price b { font-family: var(--font-display); font-size: 2.5rem; font-weight: 800; letter-spacing: -.03em; }
.plan-price span { color: var(--text-dim); font-size: .88rem; }
.plan-desc { font-size: .87rem; color: var(--text-soft); margin-bottom: var(--sp-5); }
.plan-features { display: flex; flex-direction: column; gap: 11px; margin-bottom: var(--sp-5); flex: 1; }
.plan-features li { display: flex; gap: 10px; align-items: flex-start; font-size: .89rem; color: var(--text-soft); }
.plan-features svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--ok); }

/* — FAQ — */
.faq { max-width: 760px; margin-inline: auto; display: flex; flex-direction: column; gap: 11px; }
.faq-item { border: 1px solid var(--stroke); border-radius: var(--r-md); background: var(--surface); overflow: hidden; transition: all var(--t) var(--ease); }
.faq-item:hover { border-color: var(--stroke-strong); }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 20px; text-align: left; font-weight: 650; font-size: .97rem; }
.faq-q .caret { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--surface-strong); transition: transform var(--t) var(--ease); }
.faq-item.is-open .caret { transform: rotate(180deg); background: var(--grad-primary); color: #fff; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); }
.faq-item.is-open .faq-a { max-height: 340px; }
.faq-a p { padding: 0 20px 19px; color: var(--text-soft); font-size: .92rem; }

/* — Финальный CTA — */
.cta-band {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid var(--stroke-strong);
  background: linear-gradient(135deg, rgba(124,92,255,.22), rgba(41,171,226,.14));
  padding: clamp(36px, 6vw, 68px);
  text-align: center;
}
.cta-band::before {
  content: ""; position: absolute; inset: -50%;
  background: conic-gradient(from 0deg, transparent, rgba(124,92,255,.28), transparent 30%);
  animation: spin 11s linear infinite;
}
.cta-band > * { position: relative; }

/* — Подвал — */
.site-footer { border-top: 1px solid var(--stroke); padding: var(--sp-7) 0 var(--sp-5); margin-top: var(--sp-7); }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: var(--sp-6); margin-bottom: var(--sp-6); }
.footer-col h4 { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-dim); margin-bottom: var(--sp-3); }
.footer-col a { display: block; padding: 5px 0; font-size: .89rem; color: var(--text-soft); transition: color var(--t) var(--ease); }
.footer-col a:hover { color: var(--brand-violet-2); }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: var(--sp-4); border-top: 1px solid var(--stroke); font-size: .82rem; color: var(--text-dim); }

/* ==================== АНИМАЦИЯ ПОЯВЛЕНИЯ ==================== */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .75s var(--ease), transform .75s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* ==================== АДАПТИВ ==================== */
@media (max-width: 1000px) {
  .hero .wrap { grid-template-columns: 1fr; text-align: center; }
  .hero-sub { margin-inline: auto; }
  .hero-cta, .hero-trust { justify-content: center; }
  /* Одна колонка: карточки прижимаем к краям, иначе они срезаются */
  .hero-visual { order: -1; min-height: 0; padding: 74px 0 58px; }
  .float-card { max-width: 42%; white-space: normal; }
  .float-card--1 { top: 0;    left: 0;  right: auto; }
  .float-card--2 { top: 0;    right: 0; left: auto; }
  .float-card--3 { bottom: 0; left: 0;  right: auto; }
  .float-card--4 { bottom: 0; right: 0; left: auto; }
  .showcase, .showcase--flip { grid-template-columns: 1fr; }
  .showcase--flip .showcase-text { order: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }

  /* Горизонтальное меню перестаёт помещаться — прячем в бургер */
  .nav-links { display: none; }
  .burger { display: block; }
  .nav-links.is-open {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; top: var(--header-h); left: 12px; right: 12px;
    padding: 12px; gap: 4px;
    background: var(--bg-2); border: 1px solid var(--stroke-strong);
    border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  }
}
@media (max-width: 780px) {
  .float-card { font-size: .72rem; padding: 8px 11px; max-width: 47%; }
  .float-card i { font-size: 1rem; }
  .float-card small { font-size: .64rem; }
  .plan--featured { transform: none; }
  .header-actions .btn--ghost { display: none; }
}
@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; }
  .hero-trust { gap: var(--sp-4); }
  .float-card--3, .float-card--4 { display: none; }
  .hero-visual { padding-bottom: 20px; }
  .hero-eyebrow { font-size: .74rem; }
}

/* Шапка с кнопкой «Консультант»: меню уходит в бургер раньше, чтобы ничего не наезжало */
@media (max-width: 1180px) {
  .nav-links { display: none; }
  .burger { display: block; }
  .nav-links.is-open {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; top: var(--header-h); left: 12px; right: 12px;
    padding: 12px; gap: 4px;
    background: var(--bg-2); border: 1px solid var(--stroke-strong);
    border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  }
}
/* Консультант доступен на любом экране — на узком только значком */
@media (max-width: 780px) {
  .header-actions .asst-btn { display: inline-flex; }
  .header-actions .asst-btn .asst-btn__t { display: none; }
}

/* ==================== ПОДГОТОВКА К ЭКЗАМЕНАМ ==================== */
.prep-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.prep-card { padding: var(--sp-5); border-radius: var(--r-lg); border: 1px solid var(--stroke); background: var(--grad-surface); border-top: 3px solid var(--pc); }
.prep-card__top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.prep-card__top > span { font-size: 1.8rem; }
.prep-card__top b { display: block; font-size: 1.15rem; }
.prep-card__top small, .prep-exam small { color: var(--text-dim); }
.prep-card p { color: var(--text-soft); font-size: .92rem; }
.prep { padding-top: 70px; }
.prep-hero h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin: 8px 0 12px; }
.prep-lead { color: var(--text-soft); max-width: 70ch; font-size: 1.05rem; }
.prep-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); margin-top: var(--sp-5); }
.prep-kpis div { padding: var(--sp-4); border-radius: var(--r-md); border: 1px solid var(--stroke); background: var(--surface); }
.prep-kpis b { display: block; font-size: 1.7rem; font-family: var(--font-display); }
.prep-kpis span { color: var(--text-dim); font-size: .82rem; }
.prep-h { font-size: clamp(1.35rem, 3vw, 1.9rem); margin-bottom: var(--sp-5); }
.prep .section { padding-top: var(--sp-6); padding-bottom: var(--sp-6); }
.prep-exams { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.prep-exam { padding: var(--sp-5); border-radius: var(--r-lg); border: 1px solid var(--stroke); background: var(--grad-surface); border-left: 3px solid var(--pc); }
.prep-exam header { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.prep-exam header > span { font-size: 1.8rem; }
.prep-exam p { color: var(--text-soft); font-size: .92rem; margin-bottom: 8px; }
.prep-exam details { margin-top: 8px; font-size: .86rem; }
.prep-exam summary { cursor: pointer; color: var(--brand-violet-2); font-weight: 600; }
.prep-exam li { margin: 6px 0 0 16px; color: var(--text-soft); }
.prep-steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); padding: 0; }
.prep-steps li { display: flex; gap: 12px; padding: var(--sp-4); border-radius: var(--r-md); border: 1px solid var(--stroke); background: var(--surface); }
.prep-steps__n { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-primary); color: #fff; font-weight: 800; }
.prep-steps p, .prep-approach p, .prep-sources p, .prep-plan p { color: var(--text-soft); font-size: .9rem; margin-top: 4px; }
.prep-plan { margin-top: var(--sp-5); padding: var(--sp-5); border-radius: var(--r-lg); border: 1px dashed var(--stroke-strong); }
.prep-plan__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); margin-top: var(--sp-3); }
.prep-approach, .prep-sources { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.prep-sources { grid-template-columns: repeat(2, 1fr); }
.prep-approach > div, .prep-sources > div { padding: var(--sp-4); border-radius: var(--r-md); border: 1px solid var(--stroke); background: var(--surface); }
.prep-table-wrap { overflow-x: auto; margin-bottom: var(--sp-3); }
.prep-table { min-width: 760px; font-size: .88rem; }
.prep-table th:first-child { text-align: left; }
.prep-table .is-us { background: rgba(124,92,255,.12); font-weight: 600; }
.prep-econ { display: flex; align-items: stretch; gap: var(--sp-4); flex-wrap: wrap; }
.prep-econ__col { flex: 1 1 240px; padding: var(--sp-5); border-radius: var(--r-lg); border: 1px solid var(--stroke); background: var(--surface); }
.prep-econ__col.is-us { border-color: var(--brand-violet); background: rgba(124,92,255,.12); }
.prep-econ__col small, .prep-econ__col span { display: block; color: var(--text-dim); font-size: .84rem; }
.prep-econ__col b { display: block; font-size: 2rem; margin: 6px 0; font-family: var(--font-display); }
.prep-econ__vs { align-self: center; color: var(--text-dim); font-weight: 800; }
.prep-list { margin: var(--sp-4) 0 var(--sp-3) 18px; color: var(--text-soft); }
.prep-list li { margin: 6px 0; }
.prep-honest { padding: var(--sp-5); border-radius: var(--r-lg); border: 1px solid rgba(251,191,36,.45); background: rgba(251,191,36,.08); }
.prep-honest p { color: var(--text-soft); margin-top: 8px; }
@media (max-width: 980px) { .prep-cards, .prep-exams, .prep-steps, .prep-approach { grid-template-columns: 1fr; } .prep-kpis, .prep-plan__grid { grid-template-columns: 1fr 1fr; } .prep-sources { grid-template-columns: 1fr; } }

/* ==================== ДОКУМЕНТЫ ==================== */
.legal { padding-top: 90px; }
.legal-wrap { display: grid; grid-template-columns: 250px 1fr; gap: var(--sp-6); align-items: start; }
.legal-nav { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 4px; }
.legal-nav a { padding: 8px 12px; border-radius: var(--r-sm); color: var(--text-soft); font-size: .9rem; }
.legal-nav a.is-active, .legal-nav a:hover { background: var(--surface-strong); color: var(--text); }
.legal-doc { max-width: 80ch; }
.legal-doc h1 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 6px; }
.legal-doc h2 { font-size: 1.1rem; margin: var(--sp-5) 0 8px; }
.legal-doc p, .legal-doc li { color: var(--text-soft); line-height: 1.6; margin-bottom: 8px; }
.legal-doc ul { margin-left: 20px; }
.legal-doc a { color: var(--brand-violet-2); }
.legal-na { color: var(--warn); font-weight: 600; }
.legal-req th { text-align: left; width: 45%; color: var(--text-dim); font-weight: 600; }
@media (max-width: 860px) { .legal-wrap { grid-template-columns: 1fr; } .legal-nav { position: static; flex-direction: row; flex-wrap: wrap; } }

/* ==================== ПОДВАЛ, COOKIE, СОГЛАСИЯ ==================== */
.footer-link { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.age-mark { display: inline-block; padding: 1px 7px; border: 1.5px solid currentColor; border-radius: 6px; font-size: .78rem; }
.cookie-bar { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 300; max-width: 720px; margin: 0 auto; display: flex; gap: 14px; align-items: center;
  padding: 14px 16px; border-radius: var(--r-lg); background: var(--bg-2); border: 1px solid var(--stroke-strong); box-shadow: var(--shadow-lg); }
.cookie-bar p { font-size: .84rem; color: var(--text-soft); margin: 0; }
.cookie-bar a { color: var(--brand-violet-2); }
body.has-tabbar .cookie-bar { bottom: 84px; }
@media (max-width: 560px) { .cookie-bar { flex-direction: column; align-items: stretch; } }
.consent-row { align-items: flex-start; gap: 10px; margin-bottom: 10px; cursor: pointer; }
.consent-row input { margin-top: 4px; accent-color: var(--brand-violet); width: 17px; height: 17px; flex: none; }
.consent-row a { color: var(--brand-violet-2); }

/* ==================== ШАПКА БЕЗ НАЛОЖЕНИЙ ==================== */
/* Логотип и пункты меню никогда не переносятся по словам; если места не хватает —
   меню автоматически уходит в «бургер» (класс is-compact ставит js/views/landing.js) */
.site-header .logo-mark { flex: none; white-space: nowrap; }
.logo-mark__text, .logo-mark__text b, .logo-mark__text span { white-space: nowrap; }
.nav-links { flex: none; }   /* не сжимается: если не влезает — уходит в бургер, а не наезжает на кнопки */
.nav-links a { white-space: nowrap; }
.header-actions { flex: none; }
.header-actions .btn { white-space: nowrap; }
.site-header.is-compact .nav-links:not(.is-open) { display: none; }
.site-header.is-compact .burger { display: block; }
.site-header.is-compact .nav-links.is-open {
  display: flex; flex-direction: column; align-items: stretch;
  position: absolute; top: var(--header-h); left: 12px; right: 12px;
  padding: 12px; gap: 4px;
  background: var(--bg-2); border: 1px solid var(--stroke-strong);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg);
}
@media (max-width: 1320px) {
  .nav-links { display: none; }
  .burger { display: block; }
  .nav-links.is-open {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; top: var(--header-h); left: 12px; right: 12px;
    padding: 12px; gap: 4px;
    background: var(--bg-2); border: 1px solid var(--stroke-strong);
    border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  }
}
/* Узкий телефон: вторая строка логотипа скрывается, чтобы кнопки поместились */
@media (max-width: 420px) {
  .site-header .logo-mark__text span { display: none; }
  .site-header .logo-mark__img { width: 36px; height: 36px; }
}
/* Телефон: в шапке остаётся сова-логотип и кнопки — текст логотипа скрывается, чтобы ничего не выходило за экран */
@media (max-width: 520px) {
  .site-header .logo-mark__text { display: none; }
  .site-header .wrap { gap: 8px; }
  .header-actions { gap: 6px; }
  .header-actions .btn--sm { padding-left: 11px; padding-right: 11px; }
}
@media (max-width: 360px) {
  .header-actions .theme-toggle { display: none; }
}

/* ==================== ТЕЛЕФОН: короткая главная ====================
   Длинные сетки карточек превращаются в горизонтальные ленты (листаются пальцем,
   следующая карточка выглядывает справа), декоративные блоки прячутся.
   Компьютерная версия не меняется. */
.footer-link svg { vertical-align: -2px; margin-right: 4px; }
.src-card > summary { list-style: none; cursor: pointer; margin: 0; }
.src-card > summary::-webkit-details-marker { display: none; }
.src-card > summary::after { content: "\25BE"; margin-left: auto; color: var(--text-dim); transition: transform var(--t); }
.src-card[open] > summary { margin-bottom: var(--sp-4); }
.src-card[open] > summary::after { transform: rotate(180deg); }
.src-card > summary.section-title { flex-direction: row; align-items: center; gap: 8px; }

@media (max-width: 640px) {
  .section { padding: 44px 0; }
  .section-head { margin-bottom: 22px; }
  .section-head p { font-size: .95rem; }

  /* Первый экран: сразу заголовок и кнопки, без декоративной совы */
  .hero { padding: 24px 0 36px; }
  .hero-visual { display: none; }
  .hero-trust { gap: var(--sp-4); justify-content: space-between; }
  .hero-trust b { font-size: 1.2rem; }

  /* Четыре шага — компактно, два в ряд */
  .steps { grid-template-columns: 1fr 1fr; gap: 14px 12px; }
  .step { padding-top: var(--sp-5); }
  .step h3 { font-size: .98rem; }
  .step p { font-size: .82rem; }

  /* Ленты вместо колонок: возможности, экзамены, доп. курсы, тарифы */
  .feature-grid, .prep-cards, #extras .xc-teaser, .pricing-cards.pricing-cards {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    gap: 12px; margin-inline: -16px; padding: 4px 16px 14px; scrollbar-width: thin;
  }
  .feature-grid > *, .prep-cards > *, .pricing-cards.pricing-cards > * { flex: 0 0 84%; scroll-snap-align: center; }
  #extras .xc-teaser > * { flex: 0 0 40%; scroll-snap-align: start; }
  .feature-grid .reveal { opacity: 1; transform: none; }
  .feature { padding: var(--sp-5) var(--sp-4); }
  .plan-card:hover { transform: none; }

  /* Предметы: плитки в два столбца, без значков экзаменов */
  .subject-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .subject-tile { padding: 10px 12px; gap: 4px; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .subject-tile__icon { width: 30px; height: 30px; font-size: 1rem; }
  .subject-tile b { font-size: .84rem; flex: 1; min-width: 0; }
  .subject-tile small { flex-basis: 100%; }
  .subject-tile .row { display: none; }

  /* Родителям: пункты без пояснений, без макета кабинета */
  .mockup { display: none; }
  .showcase-list { gap: 10px; }
  .showcase-list li > div > span { display: none; }

  .cta-band { padding: 28px 18px; }
  .site-footer { padding-top: var(--sp-5); margin-top: var(--sp-5); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
  .footer-grid > .footer-col:first-child { grid-column: 1 / -1; }
}

/* Кнопка «Показать все предметы» — только на телефоне */
.subject-more { display: none; margin-top: 10px; }
@media (max-width: 640px) {
  .subject-more { display: flex; }
  .subject-grid:not(.is-open) .subject-tile:nth-child(n+9) { display: none; }
}

/* Телефон: плотнее тарифы, вопросы и подвал */
@media (max-width: 640px) {
  .pricing-cards.pricing-cards { padding-top: 18px; }
  .pricing-cards.pricing-cards > * { flex-basis: 88%; }
  .pricing-cards .plan-card { padding: 22px 16px 16px; }
  .pricing-cards .plan-card__who { margin-bottom: var(--sp-3); }
  .pricing-cards .plan-card__features { gap: 6px; margin-bottom: var(--sp-3); }
  .pricing-cards .plan-card__features li { font-size: .82rem; line-height: 1.35; }
  .faq { gap: 8px; }
  .faq-q { padding: 13px 16px; font-size: .92rem; }
  .faq-a p { padding: 0 16px 14px; }
}
.footer-col .footer-link { display: block; padding: 5px 0; font-size: .89rem; color: var(--text-soft); }
.footer-col .footer-link:hover { color: var(--brand-violet-2); }
@media (max-width: 640px) {
  .footer-col a, .footer-col .footer-link { padding: 3px 0; font-size: .84rem; }
  .footer-grid { margin-bottom: var(--sp-4); }
}

/* Телефон: страница «Подготовка к экзаменам» — карточки лентами, как на главной */
@media (max-width: 640px) {
  .prep-exams, .prep-approach, .prep-sources {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    gap: 12px; margin-inline: -16px; padding: 4px 16px 14px; scrollbar-width: thin;
  }
  .prep-exams > *, .prep-approach > *, .prep-sources > * { flex: 0 0 84%; scroll-snap-align: center; }
}

/* ==================== ТЕЛЕФОН: шапка, меню и нижняя панель действий ==================== */
.nav-extra { display: none; }
.m-cta { display: none; }
@media (max-width: 1320px) {
  .nav-links.is-open .nav-extra { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--stroke); }
  .nav-links.is-open { max-height: calc(100vh - var(--header-h) - 16px); overflow-y: auto; }
}
@media (max-width: 780px) {
  /* «Войти» снова видна: вернувшемуся родителю не нужно искать вход в подвале */
  .header-actions .btn--ghost[href="#/login"] { display: inline-flex; }
}
@media (max-width: 640px) {
  .nav-links.is-open a:not(.btn) { padding: 12px 14px; font-size: 1rem; }
  #siteHeader .header-actions .theme-toggle { display: none; }
  .hero-cta__more { display: none; }
  .m-cta {
    display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--bg-1) 92%, transparent); backdrop-filter: blur(16px);
    border-top: 1px solid var(--stroke);
    transform: translateY(110%); transition: transform .25s var(--ease);
  }
  .m-cta.is-on { transform: none; }
  .m-cta .btn { flex: 1; justify-content: center; }
}
@media (max-width: 420px) {
  /* Узкий экран: регистрация — в меню и в нижней панели, в шапке остаются помощник, «Войти» и меню */
  #siteHeader .header-actions .btn--primary { display: none; }
}

/* css/app.css */
/* ============================================================
   ЛИЧНЫЙ КАБИНЕТ — оболочка, навигация, экраны
   ============================================================ */

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

/* ==================== БОКОВАЯ НАВИГАЦИЯ ==================== */
.rail {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-3);
  border-right: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--bg-1) 72%, transparent);
  backdrop-filter: blur(20px);
  z-index: 80;
}
.rail__brand { padding: 6px 10px var(--sp-3); }
.rail__nav { display: flex; flex-direction: column; gap: 3px; overflow-y: auto; flex: 1; }
.rail__group-title {
  padding: var(--sp-4) 12px 7px;
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
  color: var(--text-dim);
}
.rail__link {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--r-sm);
  font-size: .91rem; font-weight: 600; color: var(--text-soft);
  transition: all var(--t) var(--ease);
}
.rail__link svg { width: 19px; height: 19px; flex: none; }
.rail__link:hover { background: var(--surface); color: var(--text); }
.rail__link.is-active { background: var(--surface-strong); color: var(--text); }
.rail__link.is-active::before {
  content: ""; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 22px; border-radius: 0 3px 3px 0; background: var(--grad-primary);
  box-shadow: var(--glow-violet);
}
.rail__link .count {
  margin-left: auto; padding: 2px 8px; border-radius: 99px;
  background: var(--surface-strong); font-size: .7rem; font-weight: 700; color: var(--text-dim);
}
.rail__link.is-active .count { background: var(--grad-primary); color: #fff; }

.rail__footer { border-top: 1px solid var(--stroke); padding-top: var(--sp-3); }
.rail__user {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px; border-radius: var(--r-sm); width: 100%;
  transition: background var(--t) var(--ease);
}
.rail__user:hover { background: var(--surface); }
.rail__user > svg { width: 18px; height: 18px; flex: none; color: var(--text-dim); }
.rail__user:hover > svg { color: var(--danger); }
.rail__user-info { flex: 1; min-width: 0; text-align: left; }
.rail__user-info b { display: block; font-size: .87rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail__user-info span { font-size: .72rem; color: var(--text-dim); }

/* Мини-карточка прогресса в рейле */
.rail__xp { padding: 13px; border-radius: var(--r-md); background: linear-gradient(140deg, rgba(124,92,255,.2), rgba(41,171,226,.09)); border: 1px solid var(--stroke); }
.rail__xp-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; font-size: .78rem; }
.rail__xp-top b { font-weight: 800; }

/* ==================== ОСНОВНАЯ ОБЛАСТЬ ==================== */
.app-main { min-width: 0; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 70;
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) clamp(16px, 3vw, 32px);
  border-bottom: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--bg-0) 80%, transparent);
  backdrop-filter: blur(18px);
}
.topbar h1 { font-size: 1.32rem; letter-spacing: -.02em; }
.topbar__sub { font-size: .82rem; color: var(--text-dim); margin-top: 2px; }
.topbar__actions { margin-left: auto; display: flex; align-items: center; gap: 9px; }

.app-body { padding: clamp(18px, 3vw, 30px) clamp(16px, 3vw, 32px) var(--sp-8); flex: 1; }
.app-body > * + * { margin-top: var(--sp-5); }

.page-enter { animation: pageIn .42s var(--ease); }
@keyframes pageIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ==================== СЕТКИ ==================== */
.grid { display: grid; gap: var(--sp-4); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid-main { grid-template-columns: 1.65fr 1fr; align-items: start; }
@media (max-width: 1120px) { .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; } .grid-main { grid-template-columns: 1fr; } }
@media (max-width: 720px)  { .grid-2, .grid-3, .grid-4, .grid-main { grid-template-columns: 1fr; } }

/* ==================== ВИДЖЕТ-ПЛИТКА МЕТРИКИ ==================== */
.metric { display: flex; flex-direction: column; gap: 5px; padding: var(--sp-4); }
.metric__label { display: flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 600; color: var(--text-dim); }
.metric__label svg { width: 15px; height: 15px; }
.metric__value { font-family: var(--font-display); font-size: 1.85rem; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.metric__delta { display: inline-flex; align-items: center; gap: 4px; font-size: .77rem; font-weight: 700; }
.metric__delta--up   { color: var(--ok); }
.metric__delta--down { color: var(--danger); }
.metric__delta--flat { color: var(--text-dim); }

/* ==================== ПРИВЕТСТВЕННЫЙ БАННЕР ==================== */
.hello {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap;
  padding: var(--sp-6);
  border-radius: var(--r-xl);
  border: 1px solid var(--stroke-strong);
  background: linear-gradient(130deg, rgba(124,92,255,.24), rgba(41,171,226,.12) 60%, transparent);
}
.hello::after {
  content: ""; position: absolute; right: -80px; top: -80px;
  width: 280px; height: 280px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,197,61,.22), transparent 68%);
  filter: blur(20px);
}
.hello__text { flex: 1; min-width: 240px; position: relative; }
.hello__text h2 { font-size: clamp(1.4rem, 2.6vw, 1.95rem); margin-bottom: 7px; }
.hello__text p { color: var(--text-soft); font-size: .95rem; }
.hello__owl { width: 108px; position: relative; animation: owlFloat 6s ease-in-out infinite; filter: drop-shadow(0 12px 26px rgba(8,14,40,.5)); }

/* ==================== КАРТОЧКА ПРЕДМЕТА ==================== */
.subj-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-5); cursor: pointer;
  border-radius: var(--r-lg); border: 1px solid var(--stroke);
  background: var(--grad-surface);
  transition: all var(--t) var(--ease);
}
.subj-card::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--sc, var(--brand-violet));
}
.subj-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--sc, #7C5CFF) 50%, transparent); box-shadow: var(--shadow-md); }
.subj-card__top { display: flex; align-items: center; gap: 12px; }
.subj-card__icon {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 1.4rem;
  background: color-mix(in srgb, var(--sc, #7C5CFF) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--sc, #7C5CFF) 32%, transparent);
}
.subj-card__name { display: block; font-weight: 700; font-size: 1.02rem; }
.subj-card__meta { display: block; font-size: .76rem; color: var(--text-dim); }
.subj-card__stats { display: flex; flex-wrap: wrap; gap: 6px var(--sp-4); font-size: .78rem; color: var(--text-dim); }
.subj-card__stats > span { white-space: nowrap; }
.subj-card__top > span:nth-child(2) { min-width: 0; overflow-wrap: anywhere; }
.subj-card__top .badge, .subj-card__icon { flex-shrink: 0; }
.grid-2:has(> .subj-card) { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }
.subj-card__stats b { color: var(--text); font-weight: 700; }

/* ==================== КАРТА ТЕМ ==================== */
.module { border: 1px solid var(--stroke); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.module__head {
  width: 100%; display: flex; align-items: center; gap: 13px; padding: 15px 18px;
  transition: background var(--t) var(--ease); text-align: left;
}
.module__head:hover { background: var(--surface-hover); }
.module__head h4 { flex: 1; font-size: .98rem; }
.module__body { display: flex; flex-direction: column; gap: 2px; padding: 0 10px 10px; }

.topic {
  display: flex; align-items: center; gap: 13px;
  padding: 12px 14px; border-radius: var(--r-sm);
  transition: all var(--t) var(--ease); cursor: pointer; text-align: left; width: 100%;
}
.topic:hover { background: var(--surface-hover); }
.topic__dot {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-size: .7rem; font-weight: 800;
  border: 2px solid var(--stroke-strong); color: var(--text-dim);
}
.topic__dot[data-level="new"]     { border-style: dashed; }
.topic__dot[data-level="weak"]    { border-color: var(--danger); color: var(--danger); background: var(--danger-soft); }
.topic__dot[data-level="mid"]     { border-color: var(--warn);   color: var(--warn);   background: var(--warn-soft); }
.topic__dot[data-level="strong"]  { border-color: var(--ok);     color: var(--ok);     background: var(--ok-soft); }
.topic__dot[data-level="mastered"]{ border-color: transparent;   color: #0A0F22; background: var(--grad-gold); box-shadow: var(--glow-gold); }
.topic__name { flex: 1; min-width: 0; }
.topic__name b { display: block; font-size: .92rem; font-weight: 600; }
.topic__name span { font-size: .76rem; color: var(--text-dim); }
.topic__bar { width: 92px; flex: none; }
.topic .go { opacity: 0; transition: opacity var(--t) var(--ease); color: var(--brand-violet-2); }
.topic:hover .go { opacity: 1; }

/* ==================== СЕССИЯ С РЕПЕТИТОРОМ ==================== */
.session {
  display: grid; grid-template-columns: 1fr 340px; gap: var(--sp-4);
  height: calc(100vh - var(--header-h) - 60px); min-height: 560px;
}
@media (max-width: 1100px) { .session { grid-template-columns: 1fr; height: auto; } }

.chat {
  display: flex; flex-direction: column; min-height: 0;
  border: 1px solid var(--stroke); border-radius: var(--r-lg);
  background: var(--grad-surface); backdrop-filter: blur(18px); overflow: hidden;
}
.chat__head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--stroke);
  background: var(--surface);
}
.chat__head .owl { width: 38px; height: 38px; object-fit: contain; animation: owlFloat 5s ease-in-out infinite; }
.chat__head b { font-size: .95rem; }
.chat__head small { display: block; font-size: .72rem; color: var(--ok); }

.chat__log { flex: 1; overflow-y: auto; padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); scroll-behavior: smooth; }

.msg { display: flex; gap: 12px; max-width: 86%; animation: msgIn .4s var(--ease); }
@keyframes msgIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.msg--me { margin-left: auto; flex-direction: row-reverse; }
.msg__ava { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: var(--surface-strong); border: 1px solid var(--stroke); }
.msg__ava img { width: 100%; }
.msg--me .msg__ava { background: var(--grad-primary); color: #fff; font-weight: 800; font-size: .78rem; border-color: transparent; }
.msg__bubble {
  padding: 13px 17px; border-radius: 18px;
  background: var(--surface-strong); border: 1px solid var(--stroke);
  font-size: .94rem; line-height: 1.62;
}
.msg--ai .msg__bubble { border-bottom-left-radius: 5px; }
.msg--me .msg__bubble { border-bottom-right-radius: 5px; background: var(--grad-primary); color: #fff; border-color: transparent; }
.msg__bubble p + p { margin-top: 9px; }
.msg__bubble b, .msg__bubble strong { font-weight: 750; }
.msg__bubble code { font-family: var(--font-mono); font-size: .88em; padding: 2px 6px; border-radius: 5px; background: rgba(0,0,0,.25); }
.msg--me .msg__bubble code { background: rgba(255,255,255,.2); }
.msg__bubble ul { margin: 8px 0 0; padding-left: 4px; display: flex; flex-direction: column; gap: 6px; }
.msg__bubble li { display: flex; gap: 9px; }
.msg__bubble li::before { content: "▸"; color: var(--brand-violet-2); flex: none; }
.msg--me .msg__bubble li::before { color: rgba(255,255,255,.7); }
.msg__time { font-size: .68rem; color: var(--text-dim); margin-top: 5px; }

/* Индикатор «думает» */
.typing { display: flex; gap: 5px; padding: 15px 18px; }
.typing i { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-violet-2); animation: typingBounce 1.3s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: .18s; }
.typing i:nth-child(3) { animation-delay: .36s; }
@keyframes typingBounce { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-7px); opacity: 1; } }

/* Карточка задания внутри диалога */
.task-card {
  border: 1px solid var(--stroke-strong); border-radius: var(--r-md);
  background: color-mix(in srgb, var(--bg-2) 80%, transparent);
  overflow: hidden; margin-top: 10px;
}
.task-card__head {
  display: flex; align-items: center; gap: 9px; padding: 11px 15px;
  background: linear-gradient(90deg, rgba(124,92,255,.2), transparent);
  border-bottom: 1px solid var(--stroke);
  font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--brand-violet-2);
}
.task-card__body { padding: 15px; font-size: .95rem; line-height: 1.6; }
.task-card__opts { display: flex; flex-direction: column; gap: 8px; padding: 0 15px 15px; }
.opt {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 14px; border-radius: var(--r-sm);
  border: 1px solid var(--stroke); background: var(--surface);
  font-size: .9rem; text-align: left; transition: all var(--t) var(--ease);
}
.opt:hover:not(:disabled) { border-color: var(--brand-violet); background: var(--surface-hover); transform: translateX(3px); }
.opt__key {
  width: 25px; height: 25px; flex: none; border-radius: 7px; display: grid; place-items: center;
  background: var(--surface-strong); font-size: .74rem; font-weight: 800; color: var(--text-dim);
}
.opt.is-right { border-color: var(--ok); background: var(--ok-soft); }
.opt.is-right .opt__key { background: var(--ok); color: #05261A; }
.opt.is-wrong { border-color: var(--danger); background: var(--danger-soft); }
.opt.is-wrong .opt__key { background: var(--danger); color: #3A0713; }
.opt:disabled { cursor: default; }

/* Панель ввода ответа */
.chat__input { padding: 14px 16px; border-top: 1px solid var(--stroke); background: var(--surface); }
.chat__input-row { display: flex; gap: 10px; align-items: flex-end; }
.chat__input textarea {
  flex: 1; min-height: 48px; max-height: 160px;
  padding: 13px 16px; border-radius: var(--r-md);
  background: var(--bg-1); border: 1px solid var(--stroke); color: var(--text);
  resize: none; font-size: .93rem; line-height: 1.5;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.chat__input textarea:focus { outline: none; border-color: var(--brand-violet); box-shadow: 0 0 0 4px rgba(124,92,255,.14); }
.icon-btn {
  width: 46px; height: 46px; flex: none; border-radius: var(--r-md);
  display: grid; place-items: center;
  background: var(--surface-strong); border: 1px solid var(--stroke); color: var(--text-soft);
  transition: all var(--t) var(--ease);
}
.icon-btn:hover { background: var(--surface-hover); color: var(--text); transform: translateY(-2px); }
.icon-btn svg { width: 19px; height: 19px; }
.icon-btn--send { background: var(--grad-primary); color: #fff; border-color: transparent; box-shadow: 0 6px 18px rgba(79,123,255,.36); }
.icon-btn--send:hover { box-shadow: 0 10px 26px rgba(79,123,255,.5); }
@keyframes recPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(251,113,133,.6); } 50% { box-shadow: 0 0 0 11px rgba(251,113,133,0); } }
.chat__hints { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 11px; }

/* Боковая панель сессии */
.side-panel { display: flex; flex-direction: column; gap: var(--sp-4); overflow-y: auto; min-height: 0; padding-right: 2px; }
.side-panel .card { padding: var(--sp-4); }

.streak-dots { display: flex; gap: 5px; }
.streak-dots i {
  width: 100%; height: 30px; border-radius: 7px;
  background: var(--surface-strong); display: grid; place-items: center;
  font-size: .62rem; font-weight: 700; color: var(--text-dim); font-style: normal;
}
.streak-dots i.is-done { background: var(--grad-primary); color: #fff; }
.streak-dots i.is-today { outline: 2px solid var(--brand-gold); outline-offset: 1px; }

/* ==================== ДИАГРАММЫ (самописный SVG) ==================== */
.chart { width: 100%; }
.chart text { font-family: var(--font); font-size: 11px; fill: var(--text-dim); }
.chart .grid-line { stroke: var(--stroke); stroke-width: 1; }
.chart .area { opacity: .22; }
.chart .line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.chart .dot { stroke: var(--bg-1); stroke-width: 2; }
.chart .bar-rect { transition: opacity var(--t) var(--ease); }
.chart .bar-rect:hover { opacity: .8; }

.radar-poly { fill: rgba(124, 92, 255, .24); stroke: var(--brand-violet); stroke-width: 2; stroke-linejoin: round; }
.radar-web { stroke: var(--stroke); fill: none; }

/* Календарь активности */
.heatmap { display: grid; grid-template-columns: repeat(auto-fill, minmax(13px, 1fr)); gap: 4px; }
.heatmap i {
  aspect-ratio: 1; border-radius: 3px; background: var(--surface-strong);
  transition: transform var(--t-fast) var(--ease);
}
.heatmap i:hover { transform: scale(1.35); }
.heatmap i[data-v="1"] { background: rgba(124,92,255,.32); }
.heatmap i[data-v="2"] { background: rgba(124,92,255,.55); }
.heatmap i[data-v="3"] { background: rgba(124,92,255,.78); }
.heatmap i[data-v="4"] { background: #7C5CFF; box-shadow: 0 0 8px rgba(124,92,255,.6); }

/* ==================== РОДИТЕЛЬСКИЙ КАБИНЕТ ==================== */
.child-card {
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding: var(--sp-5); cursor: pointer;
}
.child-card__top { display: flex; align-items: center; gap: 14px; }
.child-card__name { font-weight: 700; font-size: 1.05rem; }
.child-card__meta { font-size: .78rem; color: var(--text-dim); }
.child-card__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.child-card__cell { text-align: center; padding: 11px 6px; border-radius: var(--r-sm); background: var(--surface); }
.child-card__cell b { display: block; font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.child-card__cell span { font-size: .68rem; color: var(--text-dim); }

.alert-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 15px; border-radius: var(--r-md);
  border: 1px solid var(--stroke); background: var(--surface);
}
.alert-row__icon { width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-items: center; font-size: 1rem; }
.alert-row--danger .alert-row__icon { background: var(--danger-soft); color: var(--danger); }
.alert-row--warn   .alert-row__icon { background: var(--warn-soft);   color: var(--warn); }
.alert-row--ok     .alert-row__icon { background: var(--ok-soft);     color: var(--ok); }
.alert-row--info   .alert-row__icon { background: rgba(56,189,248,.14); color: var(--info); }
.alert-row b { display: block; font-size: .9rem; margin-bottom: 2px; }
.alert-row span { font-size: .82rem; color: var(--text-soft); }

/* Лента событий */
.timeline { display: flex; flex-direction: column; }
.timeline__item { display: flex; gap: 15px; padding-bottom: var(--sp-4); position: relative; }
.timeline__item:not(:last-child)::before {
  content: ""; position: absolute; left: 15px; top: 34px; bottom: 0; width: 2px; background: var(--stroke);
}
.timeline__dot {
  width: 32px; height: 32px; flex: none; border-radius: 50%; z-index: 1;
  display: grid; place-items: center; font-size: .85rem;
  background: var(--bg-2); border: 1px solid var(--stroke-strong);
}
.timeline__body b { display: block; font-size: .91rem; }
.timeline__body span { font-size: .79rem; color: var(--text-dim); }

/* Достижения */
.badges-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--sp-3); }
.ach {
  display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center;
  padding: 15px 10px; border-radius: var(--r-md);
  border: 1px solid var(--stroke); background: var(--surface);
  transition: all var(--t) var(--ease);
}
.ach.is-locked { opacity: .35; filter: grayscale(1); }
.ach:not(.is-locked):hover { transform: translateY(-4px) scale(1.04); border-color: var(--brand-gold); box-shadow: var(--glow-gold); }
.ach__icon { font-size: 1.9rem; }
.ach b { font-size: .76rem; font-weight: 700; line-height: 1.25; }
.ach span { font-size: .66rem; color: var(--text-dim); }

/* ==================== АДАПТИВ КАБИНЕТА ==================== */
.rail-backdrop { display: none; }
@media (max-width: 980px) {
  .app-shell { grid-template-columns: 1fr; }
  .rail {
    position: fixed; inset: 0 auto 0 0; width: 280px;
    transform: translateX(-102%); transition: transform var(--t) var(--ease);
    background: var(--bg-1); box-shadow: var(--shadow-lg);
  }
  .rail.is-open { transform: none; }
  .rail-backdrop.is-on { display: block; position: fixed; inset: 0; z-index: 75; background: rgba(4,7,20,.6); backdrop-filter: blur(3px); }
  .topbar__menu { display: grid !important; }
}
.topbar__menu { display: none; }

/* ============================================================
   ЭКРАНЫ ВХОДА И РЕГИСТРАЦИИ
   ============================================================ */
.auth { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }

.auth__side {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(24px, 3.4vw, 46px);
  border-right: 1px solid var(--stroke);
  background:
    radial-gradient(760px 520px at 30% 20%, rgba(124, 92, 255, .30), transparent 64%),
    radial-gradient(620px 460px at 80% 82%, rgba(41, 171, 226, .24), transparent 62%),
    var(--bg-1);
}
.auth__orb { display: grid; place-items: center; flex: 1; padding: var(--sp-5) 0; }
.auth__pitch h2 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); margin-bottom: var(--sp-3); }
.auth__pitch p { max-width: 44ch; margin-bottom: var(--sp-5); }
.auth__list { display: flex; flex-direction: column; gap: 11px; }
.auth__list li { display: flex; align-items: center; gap: 11px; font-size: .9rem; color: var(--text-soft); }
.auth__list .tick {
  width: 22px; height: 22px; flex: none; border-radius: 7px; display: grid; place-items: center;
  background: var(--ok-soft); color: var(--ok); border: 1px solid rgba(52, 211, 153, .3);
}
.auth__list .tick svg { width: 12px; height: 12px; }

.auth__main { display: grid; place-items: center; padding: clamp(24px, 4vw, 48px) clamp(16px, 4vw, 40px); }
.auth__box { width: min(430px, 100%); }
.auth__head { margin-bottom: var(--sp-6); }
.auth__head h1 { font-size: clamp(1.7rem, 3vw, 2.15rem); margin-bottom: 9px; }

.auth__steps { display: flex; flex-direction: column; gap: 11px; counter-reset: s; }
.auth__steps li {
  position: relative; padding-left: 34px; font-size: .88rem; color: var(--text-soft); line-height: 1.5;
}
.auth__steps li::before {
  counter-increment: s; content: counter(s);
  position: absolute; left: 0; top: 0;
  width: 23px; height: 23px; border-radius: 7px; display: grid; place-items: center;
  background: var(--grad-primary); color: #fff; font-size: .72rem; font-weight: 800;
}

.link { color: var(--brand-violet-2); font-weight: 650; }
.link:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; }
  .auth__side { display: none; }
  .auth__main { padding-top: var(--sp-7); }
}

/* Заголовок раздела с подзаголовком: отступы без наложения строк */
.section-title { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--sp-4); }
h3.section-title { flex-direction: row; align-items: center; gap: 8px; }
h3.section-title svg { flex: none; }
.section-title h3 { margin: 0; line-height: 1.25; }
.section-title p { margin: 0; line-height: 1.45; }

/* ==================== ДИАГНОСТИКА ==================== */
.dg-wrap { display: flex; flex-direction: column; gap: var(--sp-5); max-width: 980px; margin: 0 auto; }
.dg-intro { display: flex; flex-wrap: wrap; gap: var(--sp-5); align-items: flex-end; justify-content: space-between; }
.dg-intro__text { flex: 1 1 420px; min-width: 0; }
.dg-intro__text h2 { margin: 8px 0 8px; }
.dg-intro__grade { display: flex; flex-direction: column; gap: 6px; }
.dg-steps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--sp-4); }
.dg-step { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--stroke); font-size: .82rem; color: var(--text-soft); }
.dg-step b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--brand-violet); color: #fff; font-size: .75rem; }
.dg-quiz .opts { display: flex; flex-direction: column; gap: 9px; margin-top: var(--sp-4); }
.dg-q { margin-top: var(--sp-4); line-height: 1.35; }
.dg-visual { margin-top: var(--sp-4); }
.dg-levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-top: var(--sp-5); }
.dg-level { display: flex; flex-direction: column; gap: 7px; }
.tile.is-locked { opacity: .55; filter: grayscale(.4); }

/* ==================== ЭКЗАМЕНЫ ==================== */
.exam-card { display: flex; flex-direction: column; text-align: left; cursor: pointer; border-top: 3px solid var(--sc, var(--brand-violet));
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease); }
.exam-card:hover { transform: translateY(-2px); }
.exam-card__name { display: block; line-height: 1.25; }
.exam-card p { margin: 0; }
.dg-level .row-between { gap: 10px; align-items: baseline; }
.dg-level .row-between b { white-space: nowrap; }

/* Учебники из федерального перечня */
.fpu-book {
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px 12px; border-radius: var(--r-sm); border: 1px solid var(--stroke);
  background: var(--surface);
  line-height: 1.35;
}
.fpu-book b { font-weight: 600; overflow-wrap: anywhere; }
.fpu-book span { font-size: .85rem; color: var(--text-dim); overflow-wrap: anywhere; }

/* Метка режима репетитора в шапке: на узком экране — только значок */
.mode-badge { white-space: nowrap; gap: 5px; }
@media (max-width: 560px) {
  .mode-badge__text { display: none; }
  .mode-badge { padding-left: 9px; padding-right: 9px; }
}

/* ==================== ИСТОЧНИКИ МАТЕРИАЛОВ ==================== */
.src-row { display: grid; grid-template-columns: 110px 1fr; gap: 10px; font-size: .86rem; line-height: 1.4; }
.src-row__l { color: var(--text-dim); font-weight: 600; }
.src-row__t { overflow-wrap: anywhere; }
@media (max-width: 560px) { .src-row { grid-template-columns: 1fr; gap: 2px; } }
.src-books { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.src-book { display: flex; gap: 12px; align-items: flex-start; padding: 10px; border: 1px solid var(--stroke); border-radius: var(--r-sm); background: var(--surface); }
.src-book__info { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: .84rem; line-height: 1.35; }
.src-book__info b { overflow-wrap: anywhere; }
.book-cover { flex: none; border-radius: 6px; box-shadow: var(--shadow-sm); }
.book-cover__t { color: #fff; font: 700 10px/1.25 var(--font, sans-serif); text-align: center; overflow: hidden; height: 62px; overflow-wrap: anywhere; }
.book-cover__g { fill: #fff; font: 700 10px var(--font, sans-serif); }
.book-cover__a { fill: rgba(255,255,255,.85); font: 500 8.5px var(--font, sans-serif); }
.src-note { display: flex; gap: 12px; align-items: center; margin-top: var(--sp-4); padding: 10px 12px; border: 1px dashed var(--stroke-strong); border-radius: var(--r-sm); font-size: .8rem; line-height: 1.4; }
.src-note__covers { display: flex; gap: 6px; flex: none; }
.src-note__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow-wrap: anywhere; }

/* ==================== КАБИНЕТ ВЛАДЕЛЬЦА ==================== */
.owner-bar { display: flex; flex-direction: column; gap: 14px; }
.owner-filters { display: flex; flex-wrap: wrap; gap: 12px; }
.owner-filter { display: flex; flex-direction: column; gap: 5px; min-width: 170px; flex: 1; font-size: .8rem; color: var(--text-dim); }
.owner-export { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.owner-tile .metric__value { font-size: 1.5rem; overflow-wrap: anywhere; }
.owner-bars, .owner-funnel { display: flex; flex-direction: column; gap: 8px; }
.owner-bars__row, .owner-funnel__row { display: grid; grid-template-columns: 56px 1fr 44px; gap: 10px; align-items: center; font-size: .84rem; }
.owner-funnel__row { grid-template-columns: minmax(120px, 44%) 1fr 44px; }
.owner-bars__row b, .owner-funnel__row b { text-align: right; }
.owner-list { display: flex; flex-direction: column; gap: 8px; }
.owner-list > div { display: flex; justify-content: space-between; gap: 12px; font-size: .88rem; padding-bottom: 7px; border-bottom: 1px solid var(--stroke); }
.owner-list > div span { min-width: 0; overflow-wrap: anywhere; }
.owner-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.owner-table th, .owner-table td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--stroke); vertical-align: top; overflow-wrap: anywhere; }
.owner-table th { color: var(--text-dim); font-weight: 600; }
.owner-ticket { padding: 12px; border: 1px solid var(--stroke); border-radius: var(--r-sm); background: var(--surface); }
.owner-ticket__head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin-bottom: 4px; }
.owner-ticket p { margin: 4px 0 10px; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .owner-funnel__row { grid-template-columns: 1fr 40px; }
  .owner-funnel__row .bar { grid-column: 1 / -1; grid-row: 2; }
  .owner-table { font-size: .76rem; }
}

/* ==================== КОНСУЛЬТАНТ ПЛАТФОРМЫ ==================== */
.asst-btn { gap: 6px; white-space: nowrap; }
/* Робот-помощник */
.robo { flex: none; overflow: visible; }
.btn .robo, .asst-btn .robo { width: 24px; height: 24px; margin: -4px 0; }
.asst__who .robo { width: 38px; height: 38px; }
.robo__head { fill: var(--brand-violet); }
.robo__ear, .robo__neck { fill: color-mix(in srgb, var(--brand-violet) 70%, #000); }
.robo__stick { stroke: var(--brand-violet); stroke-width: 2; stroke-linecap: round; }
.robo__bulb { fill: #FFC53D; transform-origin: 16px 3.5px; animation: robo-bulb 1.8s ease-in-out infinite; }
.robo__eye { fill: #fff; }
.robo__eyes { transform-origin: 16px 15.5px; animation: robo-blink 4s infinite; }
.robo__mouth { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; }
.robo__body { transform-origin: 16px 28px; animation: robo-bob 3s ease-in-out infinite; }
.asst-btn:hover .robo__body, .asst-btn:focus-visible .robo__body { animation: robo-wave .6s ease-in-out 2; }
@keyframes robo-blink { 0%, 44%, 50%, 100% { transform: scaleY(1); } 47% { transform: scaleY(.1); } }
@keyframes robo-bulb { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.75); } }
@keyframes robo-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-1px) rotate(-4deg); } }
@keyframes robo-wave { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-12deg); } 70% { transform: rotate(10deg); } }
@media (prefers-reduced-motion: reduce) { .robo__bulb, .robo__eyes, .robo__body { animation: none; } }
@media (max-width: 560px) { .asst-btn__t { display: none; } .asst-btn { padding-left: 9px; padding-right: 9px; } }
.asst-root { position: fixed; inset: 0; z-index: 210; }
.asst-backdrop { position: absolute; inset: 0; background: rgba(4, 7, 20, .55); backdrop-filter: blur(4px); }
.asst { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); display: flex; flex-direction: column;
  background: var(--bg-1); border-left: 1px solid var(--stroke-strong); box-shadow: var(--shadow-lg); }
.asst__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 16px; border-bottom: 1px solid var(--stroke); }
.asst__head b { display: flex; align-items: center; gap: 6px; }
.asst__head span { display: block; font-size: .8rem; color: var(--text-dim); margin-top: 3px; }
.asst__who { display: flex; align-items: center; gap: 12px; }
.asst-msg--assistant { position: relative; }
.asst__log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.asst-msg { max-width: 92%; padding: 10px 12px; border-radius: 14px; font-size: .9rem; line-height: 1.45; overflow-wrap: anywhere; }
.asst-msg--assistant { background: var(--surface-strong); border: 1px solid var(--stroke); align-self: flex-start; }
.asst-msg--user { background: var(--grad-primary); color: #fff; align-self: flex-end; }
.asst-msg .btn { margin-top: 8px; }
.asst__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 10px; }
.asst__chips .chip { font-size: .78rem; }
.asst__form { display: flex; gap: 8px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--stroke); }
.asst__form .input { flex: 1; min-width: 0; }

/* ==================== КОНТРАСТ (обе темы, особенно светлая) ==================== */
.hbar-val { font-weight: 700; color: var(--hc); }
[data-theme="light"] .hbar-val { color: color-mix(in srgb, var(--hc) 55%, #000); }
.logo-mark__text span { color: var(--text-soft); }
.rail__xp .t-dim, .rail__xp .t-xs, .ring-caption { color: var(--text-soft); }
[data-theme="light"] .save-chip { color: #fff; }
[data-theme="light"] .plan-card__badge { color: color-mix(in srgb, var(--pc) 55%, #000); }
[data-theme="light"] .plan-card--hit .plan-card__badge { color: #fff; }
[data-theme="light"] .badge--ok, [data-theme="light"] .plan-card__save { color: #03694C; }
[data-theme="light"] .course-block--warn .course-block__title, [data-theme="light"] .alert-row--warn .alert-row__icon { color: #7F4604; }
/* Очень мелкий приглушённый текст в светлой теме — на полтона темнее */
[data-theme="light"] .t-xs.t-dim, [data-theme="light"] .t-dim .t-xs { color: var(--text-soft); }

/* Колонки сетки кабинета сужаются под экран, а не растягиваются по содержимому */
.grid > * { min-width: 0; }

/* Главная школьника без подписки: что можно сделать бесплатно */
.access-banner { display: flex; flex-direction: column; gap: 12px; border-color: color-mix(in srgb, var(--brand-violet) 45%, var(--stroke)); }
.access-banner__text { display: flex; flex-direction: column; gap: 4px; }
.access-banner__text span { color: var(--text-soft); font-size: .9rem; }
@media (min-width: 720px) {
  .access-banner { flex-direction: row; align-items: center; justify-content: space-between; }
  .access-banner .btn--block { width: auto; }
}

/* Телефон: цифры-метрики — два в ряд, а не четыре карточки друг под другом */
@media (max-width: 720px) {
  .grid-4 { grid-template-columns: 1fr 1fr; gap: 10px; }
  .grid-4 > .metric { padding: 14px; }
  .grid-4 > .metric .metric__value { font-size: 1.5rem; }
  .grid-4 > .metric .metric__delta { font-size: .72rem; }
}

/* Телефон: приветствие в кабинете компактное — текст и кольцо уровня рядом, без большой совы */
@media (max-width: 640px) {
  .hello { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: var(--sp-4); }
  .hello__owl { display: none; }
  .hello__text { min-width: 0; }
  .hello__text h2 { font-size: 1.22rem; margin-bottom: 4px; }
  .hello__text p { font-size: .88rem; }
  .hello > .row .ring { transform: scale(.78); transform-origin: right center; margin: -10px -6px -10px -16px; }
  .hello > .row:has(.metric) { grid-column: 1 / -1; }
  .hello > .row:has(.metric) > .metric { flex: 1; min-width: 0 !important; padding: 10px; }
  .hello > .row:has(.metric) .metric__value { font-size: 1.5rem !important; }
}

/* Телефон: каталог предметов плотнее — без строки-описания, кнопки остаются крупными */
@media (max-width: 640px) {
  .lib-grid { gap: 10px; }
  .lib-grid > .card { padding: 14px; }
  .lib-grid > .card > .row:first-child { margin-bottom: 10px !important; }
  .lib-grid > .card > .row:first-child .t-xs { display: none; }
  .lib-grid > .card > .row.wrap-gap { margin-bottom: 10px !important; }
}

/* Кнопка «Яндекс ID» */
.ya-btn { background: #000; color: #fff; border: 0; gap: 10px; }
.ya-btn:hover { background: #1f1f1f; color: #fff; }
.ya-logo { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #FC3F1D; color: #fff; font-weight: 800; font-size: .95rem; line-height: 1; }
[data-theme="light"] .ya-btn { background: #000; }

/* css/course.css */
/* ============================================================
   КУРС ПО ТЕМЕ: теория → разбор → практика → итог
   Плюс игровой режим для 1–4 классов и нижняя навигация
   ============================================================ */

.course { max-width: 780px; margin-inline: auto; }

/* ==================== ШАГИ ==================== */
.stepper {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: var(--sp-5);
  overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
}
.stepper::-webkit-scrollbar { display: none; }
.stepper__item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 8px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--stroke);
  font-size: .82rem; font-weight: 600; color: var(--text-dim);
  white-space: nowrap; flex: none;
  transition: all var(--t) var(--ease);
}
.stepper__dot {
  width: 24px; height: 24px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-strong); font-size: .74rem; font-weight: 800;
}
.stepper__item.is-active { background: rgba(124,92,255,.16); border-color: var(--brand-violet); color: var(--text); }
.stepper__item.is-active .stepper__dot { background: var(--grad-primary); color: #fff; }
.stepper__item.is-done { color: var(--ok); border-color: rgba(52,211,153,.35); }
.stepper__item.is-done .stepper__dot { background: var(--ok-soft); color: var(--ok); }

/* ==================== КАРТОЧКА КУРСА ==================== */
.course-card {
  background: var(--grad-surface);
  border: 1px solid var(--stroke);
  border-radius: var(--r-xl);
  padding: clamp(18px, 3vw, 30px);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow-md);
}
.course-h { font-size: clamp(1.25rem, 2.4vw, 1.7rem); margin-bottom: var(--sp-5); }

.course-block {
  border: 1px solid var(--stroke);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-4);
}
.course-block__title {
  display: flex; align-items: center; gap: 8px;
  font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-dim); margin-bottom: 11px;
}
.course-block__title svg { width: 16px; height: 16px; color: var(--brand-violet-2); }
.course-block p { font-size: 1rem; line-height: 1.68; }
.course-block--main {
  background: linear-gradient(135deg, rgba(124,92,255,.14), rgba(41,171,226,.06));
  border-color: rgba(124,92,255,.28);
}
.course-block--warn { background: var(--warn-soft); border-color: rgba(251,191,36,.3); }
.course-block--warn .course-block__title { color: var(--warn); }
.course-block--warn .course-block__title svg { color: var(--warn); }
.course-block--ok { background: var(--ok-soft); border-color: rgba(52,211,153,.32); }
.course-block--ok .course-block__title { color: var(--ok); }
.course-block--ok .course-block__title svg { color: var(--ok); }
.course-block--task { background: var(--bg-2); border-color: var(--stroke-strong); }

.course-rules { display: flex; flex-direction: column; gap: 11px; }
.course-rules li { display: flex; gap: 11px; align-items: flex-start; font-size: .96rem; line-height: 1.6; }
.course-rules__mark {
  width: 8px; height: 8px; flex: none; margin-top: 8px; border-radius: 50%;
  background: var(--brand-violet); box-shadow: 0 0 0 3px rgba(124,92,255,.2);
}
.course-rules__mark--warn { background: var(--warn); box-shadow: 0 0 0 3px rgba(251,191,36,.2); }

.course-example-q { font-size: 1.05rem; font-weight: 600; line-height: 1.6; }

.course-nav { display: flex; gap: 11px; align-items: center; flex-wrap: wrap; margin-top: var(--sp-5); }
.course-nav [data-next], .course-nav [data-home] { margin-left: auto; }
.course-nav--end { justify-content: flex-end; }

/* ==================== ПРАКТИКА ==================== */
.course-opts { display: flex; flex-direction: column; gap: 10px; }
.opt--lg { padding: 15px 18px; font-size: 1rem; border-radius: var(--r-md); }
.opt--lg .opt__key { width: 30px; height: 30px; font-size: .82rem; }

.course-answer { display: flex; gap: 11px; align-items: stretch; }
.course-answer--col { flex-direction: column; }
.input--lg { font-size: 1.1rem; padding: 15px 18px; }

.course-dots { display: flex; gap: 6px; }
.course-dots i {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--surface-strong); border: 1px solid var(--stroke);
  transition: all var(--t) var(--ease);
}
.course-dots i.is-ok { background: var(--ok); border-color: transparent; }
.course-dots i.is-bad { background: var(--danger); border-color: transparent; }
.course-dots i.is-now { transform: scale(1.4); box-shadow: 0 0 0 3px rgba(124,92,255,.25); }

/* ==================== ОБРАТНАЯ СВЯЗЬ ==================== */
.feedback {
  margin-top: var(--sp-4);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--stroke);
}
.feedback--ok  { background: var(--ok-soft);     border-color: rgba(52,211,153,.35); }
.feedback--bad { background: var(--danger-soft); border-color: rgba(251,113,133,.32); }
.feedback__head { display: flex; align-items: center; gap: 9px; font-size: 1.05rem; margin-bottom: 9px; }
.feedback__head svg { width: 20px; height: 20px; }
.feedback--ok .feedback__head  { color: var(--ok); }
.feedback--bad .feedback__head { color: var(--danger); }
.feedback__head .badge { margin-left: auto; }
.feedback p { margin-bottom: 9px; }
.feedback__why {
  font-size: .93rem; line-height: 1.6; color: var(--text-soft);
  padding: 11px 14px; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--bg-1) 60%, transparent);
  margin-bottom: var(--sp-4) !important;
}

/* ==================== ИТОГ ==================== */
.course-card--result { text-align: center; }
.course-card--result .course-block { text-align: left; }
.result-stars { display: flex; justify-content: center; gap: 12px; margin-bottom: var(--sp-4); }
.result-stars span {
  font-size: 3.2rem; color: var(--surface-strong);
  transition: transform .4s var(--ease-out-back), color .4s var(--ease);
}
.result-stars span.is-on { color: var(--brand-gold); text-shadow: 0 0 22px rgba(255,197,61,.6); animation: starPop .55s var(--ease-out-back) backwards; }
.result-stars span.is-on:nth-child(2) { animation-delay: .14s; }
.result-stars span.is-on:nth-child(3) { animation-delay: .28s; }
@keyframes starPop { from { transform: scale(0) rotate(-40deg); } to { transform: scale(1) rotate(0); } }

/* ==================== ИГРОВОЙ РЕЖИМ 1–4 ==================== */
.course--kids .course-card { border-width: 2px; border-color: rgba(124,92,255,.32); }
.course--kids .course-h { font-size: clamp(1.4rem, 3vw, 2rem); }
.course--kids .course-block p,
.course--kids .course-rules li { font-size: 1.06rem; line-height: 1.75; }
.course--kids .course-block__title { font-size: .9rem; text-transform: none; letter-spacing: 0; color: var(--text); }
.course--kids .opt--lg { font-size: 1.1rem; padding: 17px 20px; }
.course--kids .btn--lg { font-size: 1.1rem; padding: 17px 30px; }
.course--kids .stepper__item { font-size: .88rem; padding: 9px 16px 9px 9px; }

.course-mascot {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 18px; margin-bottom: var(--sp-5);
  border-radius: var(--r-lg);
  background: linear-gradient(120deg, rgba(255,197,61,.18), rgba(124,92,255,.12));
  border: 1px solid rgba(255,197,61,.3);
}
.course-mascot img { width: 52px; animation: owlFloat 5s ease-in-out infinite; }
.course-mascot span { font-weight: 700; font-size: 1.02rem; }

/* ==================== НИЖНЯЯ НАВИГАЦИЯ (ТЕЛЕФОН) ==================== */
.tabbar { display: none; }
@media (max-width: 980px) {
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 85;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    padding: 8px max(8px, env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--bg-1) 94%, transparent);
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--stroke);
  }
  .tabbar a {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 7px 4px; border-radius: var(--r-sm);
    font-size: .68rem; font-weight: 650; color: var(--text-dim);
    transition: color var(--t) var(--ease), background var(--t) var(--ease);
  }
  .tabbar a svg { width: 21px; height: 21px; }
  .tabbar a.is-active { color: var(--brand-violet-2); background: rgba(124,92,255,.12); }
  .app-body { padding-bottom: 92px; }
  .topbar__menu { display: none !important; }
}

/* ==================== АВАТАРЫ ==================== */
.avatar--emoji {
  background: var(--surface-strong) !important;
  font-size: 1.25rem; line-height: 1;
}
.avatar--lg.avatar--emoji { font-size: 2rem; }
.avatar--xl.avatar--emoji { font-size: 2.7rem; }
.avatar--sm.avatar--emoji { font-size: 1rem; }

.avatar-picker { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.avatar-picker button {
  aspect-ratio: 1; border-radius: var(--r-md);
  display: grid; place-items: center; font-size: 1.7rem;
  background: var(--surface); border: 2px solid var(--stroke);
  transition: all var(--t) var(--ease);
}
.avatar-picker button:hover { transform: translateY(-3px) scale(1.06); border-color: var(--stroke-strong); }
.avatar-picker button.is-active {
  border-color: var(--brand-violet);
  background: rgba(124,92,255,.16);
  box-shadow: 0 0 0 3px rgba(124,92,255,.16);
}

/* ==================== БАЛЛЫ И ПОДПИСКА ==================== */
.wallet {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid rgba(255,197,61,.3);
  background: linear-gradient(135deg, rgba(255,197,61,.18), rgba(124,92,255,.12));
  padding: var(--sp-6);
}
.wallet::after {
  content: ""; position: absolute; right: -60px; top: -60px;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,197,61,.3), transparent 70%);
  filter: blur(18px);
}
.wallet__value {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.2rem, 6vw, 3.4rem); letter-spacing: -.03em;
  background: var(--grad-gold); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}
.wallet__row { display: flex; gap: var(--sp-5); flex-wrap: wrap; align-items: center; position: relative; }

.plan-row {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 18px; border-radius: var(--r-md);
  border: 1px solid var(--stroke); background: var(--surface);
  transition: all var(--t) var(--ease);
}
.plan-row.is-current { border-color: var(--brand-violet); background: rgba(124,92,255,.12); }
.plan-row__price { margin-left: auto; font-weight: 800; font-size: 1.15rem; white-space: nowrap; }

.ledger { display: flex; flex-direction: column; }
.ledger__item { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--stroke); }
.ledger__item:last-child { border-bottom: 0; }
.ledger__sum { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; }
.ledger__sum--plus { color: var(--ok); }
.ledger__sum--minus { color: var(--danger); }

/* ==================== БОЛЬШИЕ ПЛИТКИ ПРЕДМЕТОВ (1–4) ==================== */
.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--sp-4); }
.tile {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: var(--sp-5) var(--sp-4);
  border-radius: var(--r-xl);
  border: 2px solid var(--stroke);
  background: var(--grad-surface);
  text-align: center; cursor: pointer;
  transition: all var(--t) var(--ease-out-back);
}
.tile:hover { transform: translateY(-6px) scale(1.03); border-color: var(--tc, var(--brand-violet)); box-shadow: 0 16px 36px rgba(0,0,0,.24); }
.tile__icon {
  width: 68px; height: 68px; border-radius: 22px; display: grid; place-items: center;
  font-size: 2.1rem;
  background: color-mix(in srgb, var(--tc, #7C5CFF) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--tc, #7C5CFF) 36%, transparent);
}
.tile__name { font-weight: 800; font-size: 1.05rem; }
.tile__meta { font-size: .76rem; color: var(--text-dim); }
.tile .bar { width: 100%; }

/* ==================== НАГЛЯДНЫЕ СХЕМЫ (js/visuals.js) ==================== */
.vis { margin: 0; padding: 14px; border-radius: var(--r-md, 16px); border: 1px solid var(--stroke);
  background: linear-gradient(160deg, color-mix(in srgb, var(--vc) 10%, transparent), transparent 70%), var(--surface); }
.vis--compact { padding: 10px; max-width: 420px; }
.vis figcaption { margin-top: 8px; font-size: .75rem; color: var(--text-dim); text-align: center; }
.vis-svg { display: block; width: 100%; height: auto; max-height: 260px; overflow: visible; }
.vis--compact .vis-svg { max-height: 170px; }
.vis-svg text { font-family: inherit; }
.v-txt { fill: var(--text); font-size: 13px; font-weight: 600; }
.v-small { fill: var(--text-soft); font-size: 11.5px; }
.v-small-accent { fill: var(--vc); font-size: 11.5px; font-weight: 700; }
.v-big { fill: var(--text); font-size: 17px; font-weight: 800; }
.v-huge { fill: var(--text); font-size: 30px; font-weight: 800; }
.v-big-accent { fill: var(--vc); font-size: 17px; font-weight: 800; }
.v-big-accent2 { fill: #22D3EE; font-size: 17px; font-weight: 800; }
.v-big-on, .v-txt-on { fill: #fff; font-size: 13px; font-weight: 700; }
.v-big-on { font-size: 18px; }
.v-txt-accent { fill: var(--vc); font-size: 13px; font-weight: 700; }
.v-txt-accent2 { fill: #22D3EE; font-size: 13px; font-weight: 700; }
.v-mono, .v-mono-accent { font-family: ui-monospace, Consolas, monospace; font-size: 20px; font-weight: 700; fill: var(--text); letter-spacing: 2px; }
.v-mono-accent { fill: var(--vc); }
.v-line { fill: none; stroke: var(--text-dim); stroke-width: 1.5; }
.v-line-strong { fill: none; stroke: var(--text-soft); stroke-width: 2; }
.v-grid { fill: none; stroke: var(--stroke); stroke-width: 1; }
.v-dash { fill: none; stroke: var(--text-dim); stroke-width: 1.4; stroke-dasharray: 5 4; }
.v-accent { fill: none; stroke: var(--vc); stroke-width: 2.6; stroke-linecap: round; }
.v-accent2 { fill: none; stroke: #22D3EE; stroke-width: 2.6; stroke-linecap: round; }
.v-accent-dash { fill: none; stroke: var(--vc); stroke-width: 2; stroke-dasharray: 6 4; }
.v-accent2-dash { fill: none; stroke: #22D3EE; stroke-width: 2; stroke-dasharray: 6 4; }
.v-curve { fill: none; stroke: var(--vc); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.v-curve2 { fill: none; stroke: #22D3EE; stroke-width: 3; stroke-linecap: round; }
.v-fill { fill: color-mix(in srgb, var(--vc) 12%, var(--surface-strong)); stroke: var(--text-soft); stroke-width: 1.6; }
.v-fill-strong { fill: color-mix(in srgb, var(--vc) 28%, var(--surface-strong)); stroke: var(--text-soft); stroke-width: 1.4; }
.v-fill-accent { fill: var(--vc); stroke: color-mix(in srgb, var(--vc) 60%, #000); stroke-width: 1.4; }
.v-fill-accent2 { fill: #22D3EE; stroke: #0E7490; stroke-width: 1.4; }
.v-dot-accent { fill: var(--vc); stroke: none; }
.v-dot-accent2 { fill: #22D3EE; stroke: none; }
.v-arrowhead { fill: var(--text-soft); }
.course-visual { margin: var(--sp-4) 0; }
.course-block--life { border-left: 3px solid #34D399; background: color-mix(in srgb, #34D399 8%, var(--surface)); }

/* Подсказка в карточке задания */
.course-block--hint { border-left: 3px solid var(--brand-gold); background: color-mix(in srgb, #FFC53D 9%, var(--surface)); margin-bottom: var(--sp-4); }
.course-block--hint .course-block__title { color: var(--brand-gold); }

/* На телефоне шаги урока помещаются в строку: подпись остаётся только у текущего шага */
@media (max-width: 560px) {
  .stepper { gap: 4px; }
  .stepper__item { padding: 6px; }
  .stepper__item:not(.is-active) .stepper__name { display: none; }
  .stepper__item.is-active { padding-right: 12px; }
}

/* ==================== КАРТИНКА К ВОПРОСУ ==================== */
.vq { margin: 0 0 var(--sp-4); max-width: 440px; }
.vq-svg { display: block; width: 100%; height: auto; }
.vq-bg { fill: color-mix(in srgb, var(--vc, #7C5CFF) 12%, var(--bg-2)); stroke: color-mix(in srgb, var(--vc, #7C5CFF) 35%, transparent); stroke-width: 1.5; }
.vq-panel { fill: color-mix(in srgb, var(--vc, #7C5CFF) 18%, var(--bg-1)); }
.vq-emoji { font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }
.vq-chip { fill: var(--vc, #7C5CFF); opacity: .9; }
.vq-chip-t { fill: #fff; font: 700 12px var(--font, sans-serif); }
.vq-board { fill: #1f3b2e; stroke: #8b6a3e; stroke-width: 6; }
.vq-board-in { fill: #244536; }
.vq-board-t { fill: #f4f7ef; font-family: "Comic Sans MS", "Segoe Print", var(--font, sans-serif); font-weight: 700; }
.vq-card { fill: var(--surface-strong); stroke: var(--stroke-strong); }
.vq-card--main { fill: color-mix(in srgb, var(--vc, #7C5CFF) 30%, var(--bg-2)); }
.vq-card-t { fill: var(--text); font: 600 13px var(--font, sans-serif); }
.dg-visual .vq { margin-left: auto; margin-right: auto; }

/* ==================== ИГРОВОЙ РЕЖИМ 1–4 КЛАСС ==================== */
.kid-path { display: flex; align-items: center; gap: 0; margin: 0 0 var(--sp-4); padding: 10px 4px 4px; overflow-x: auto; }
.kid-path__stone { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-size: .95rem; background: var(--surface-strong); border: 2px solid var(--stroke-strong); color: var(--text-soft); }
.kid-path__stone b { font-size: .8rem; letter-spacing: -1px; }
.kid-path__stone--now { border-color: var(--brand-violet); box-shadow: 0 0 0 5px rgba(124,92,255,.22); color: var(--text); }
.kid-path__stone--ok { background: var(--grad-gold); border-color: #F59E0B; color: #3B2500; }
.kid-path__stone--tried { background: rgba(251,191,36,.16); border-color: var(--warn); }
.kid-path__stone--goal { background: var(--surface); font-size: 1.1rem; }
.kid-path__line { flex: 1 1 18px; min-width: 12px; height: 4px; border-radius: 4px; background: repeating-linear-gradient(90deg, var(--stroke-strong) 0 6px, transparent 6px 11px); }
.kid-path__hero { position: absolute; top: -22px; font-style: normal; font-size: 1.3rem; animation: kidHop 1.6s ease-in-out infinite; }
@keyframes kidHop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.feedback--soft { border: 1px solid rgba(251,191,36,.45); background: rgba(251,191,36,.10); border-radius: var(--r-md); padding: var(--sp-4); }
.feedback--soft .feedback__head b { color: var(--text); }
.kid-stars-got { margin-left: auto; color: var(--brand-gold); font-size: 1.3rem; letter-spacing: 2px; }
.opt.is-tried { opacity: .45; text-decoration: line-through; }
.kid-sticker { display: flex; align-items: center; gap: 14px; margin: var(--sp-4) auto 0; max-width: 420px; padding: 12px 16px; border-radius: var(--r-lg);
  background: linear-gradient(135deg, rgba(255,197,61,.18), rgba(124,92,255,.14)); border: 1px dashed rgba(255,197,61,.6); text-align: left; }
.kid-sticker > span { font-size: 2.6rem; animation: kidPop .7s cubic-bezier(.2,1.6,.4,1) both; }
.kid-sticker small { display: block; color: var(--text-dim); font-size: .78rem; margin-top: 2px; }
@keyframes kidPop { from { transform: scale(0) rotate(-30deg); } to { transform: none; } }
.kid-confetti { position: fixed; z-index: 400; width: 0; height: 0; pointer-events: none; }
.kid-confetti i { position: absolute; width: 8px; height: 12px; border-radius: 2px; opacity: 0; animation: kidBurst 1.2s ease-out forwards; }
@keyframes kidBurst { 0% { opacity: 1; transform: translate(0,0) rotate(0); } 100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 90px)) rotate(var(--rot)); } }
@media (prefers-reduced-motion: reduce) { .kid-path__hero, .kid-sticker > span { animation: none; } }

/* ==================== СХЕМА ТЕМЫ: карточки правил ==================== */
/* Текст всегда переносится внутри карточки и не выходит за её рамки */
.vis--scheme { padding: 16px; }
.vis__draw { max-width: 520px; margin: 0 auto 14px; padding: 8px; border-radius: 12px; background: color-mix(in srgb, var(--vc) 6%, transparent); }
.scheme__head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; margin-bottom: 12px;
  background: color-mix(in srgb, var(--vc) 20%, var(--surface-strong)); border: 1px solid color-mix(in srgb, var(--vc) 45%, transparent); }
.scheme__icon { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 1.4rem; background: color-mix(in srgb, var(--vc) 30%, transparent); }
.scheme__head small { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-soft); }
.scheme__head b { display: block; font-size: 1.02rem; line-height: 1.3; color: var(--text); overflow-wrap: anywhere; }
.scheme__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.scheme__item { position: relative; display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 12px; border-radius: 14px;
  background: var(--surface-strong); border: 1px solid var(--stroke-strong); border-top: 3px solid var(--vc); }
.scheme__n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 800; color: #fff;
  background: color-mix(in srgb, var(--vc) 80%, #000); }
.scheme__ico { flex: none; font-size: 1.25rem; line-height: 26px; }
.scheme__item p { margin: 0; min-width: 0; font-size: .92rem; line-height: 1.45; color: var(--text); overflow-wrap: anywhere; }
.scheme__item p b { color: var(--text); font-weight: 800; }
.scheme__chain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.scheme__chain span { padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--vc) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--vc) 40%, transparent); font-weight: 600; }
.scheme__chain i { font-style: normal; color: var(--text-soft); font-weight: 800; }
/* Пошаговая схема: один столбец, стрелки между шагами */
.scheme--flow .scheme__list { grid-template-columns: 1fr; gap: 24px; }
.scheme--flow .scheme__item:not(:last-child)::after { content: "↓"; position: absolute; left: 50%; bottom: -23px; transform: translateX(-50%);
  color: var(--text-soft); font-weight: 800; font-size: 1.05rem; line-height: 1; }
.course--kids .scheme__item p { font-size: 1.02rem; }
@media (max-width: 560px) { .scheme__list { grid-template-columns: 1fr; } .vis--scheme { padding: 12px; } }

/* ==================== РЕПЕТИТОР РЯДОМ С УРОКОМ ==================== */
.td-root { position: fixed; top: 0; right: 0; bottom: 0; z-index: 180; width: min(420px, 100vw); pointer-events: none; }
.td { pointer-events: auto; position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--bg-1);
  border-left: 1px solid var(--stroke-strong); box-shadow: var(--shadow-lg); animation: tdIn .22s ease-out; }
@keyframes tdIn { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.td__head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--stroke); }
.td__owl { width: 36px; height: 36px; flex: none; }
.td__who { flex: 1; min-width: 0; }
.td__who b { display: block; }
.td__who span { display: block; font-size: .78rem; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td__back { display: none; }
.td__log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.td-msg { max-width: 92%; padding: 10px 12px; border-radius: 14px; font-size: .92rem; line-height: 1.5; overflow-wrap: anywhere; }
.td-msg--ai { align-self: flex-start; background: var(--surface-strong); border: 1px solid var(--stroke); }
.td-msg--me { align-self: flex-end; background: var(--grad-primary); color: #fff; }
.td-msg ul { margin: 6px 0 0 16px; }
.td-msg--typing { display: flex; gap: 4px; }
.td-msg--typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-dim); animation: tdDot 1s infinite; }
.td-msg--typing i:nth-child(2) { animation-delay: .15s; } .td-msg--typing i:nth-child(3) { animation-delay: .3s; }
@keyframes tdDot { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.td__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; }
.td__form { display: flex; gap: 8px; padding: 10px 14px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--stroke); }
.td__form .textarea { flex: 1; min-height: 44px; resize: none; }
/* На широком экране урок сдвигается и остаётся виден рядом с репетитором */
@media (min-width: 1100px) { body.td-open .app-main { padding-right: 420px; } }
@media (max-width: 1099px) {
  .td-root { width: 100vw; }
  .td__back { display: inline-flex; }
  .td__x { display: none; }
}

/* ==================== СВЕТЛАЯ ТЕМА: рисунки и схемы ==================== */
[data-theme="light"] .v-big-accent2, [data-theme="light"] .v-txt-accent2 { fill: #0E7490; }
[data-theme="light"] .v-accent2, [data-theme="light"] .v-accent2-dash, [data-theme="light"] .v-curve2 { stroke: #0E7490; }
[data-theme="light"] .v-dot-accent2 { fill: #0891B2; }
[data-theme="light"] .v-big-accent, [data-theme="light"] .v-txt-accent, [data-theme="light"] .v-small-accent, [data-theme="light"] .v-mono-accent { fill: color-mix(in srgb, var(--vc) 75%, #000); }
[data-theme="light"] .scheme__item { background: #fff; }
[data-theme="light"] .feedback--soft .feedback__head b { color: var(--text); }
[data-theme="light"] .kid-path__stone--ok { color: #3B2500; }

/* ============================================================
   Развёрнутые уроки доп. курсов: разделы теории, код, шаги решения
   ============================================================ */
.course-sections { display: grid; gap: var(--sp-4); }
.course-section h3 { font-size: 1.02rem; margin: 0 0 6px; }
.course-section p { margin: 0 0 8px; line-height: 1.6; }
.course-section p:last-child { margin-bottom: 0; }
.course-code {
  margin: 8px 0 0; padding: 12px 14px; border-radius: var(--r-sm);
  background: var(--bg-2); border: 1px solid var(--stroke);
  font: 500 .88rem/1.55 var(--font-mono); color: var(--text);
  overflow-x: auto; white-space: pre; tab-size: 4; max-width: 100%;
}
.course-steps { margin: 0 0 10px; padding-left: 1.3em; display: grid; gap: 6px; }
.course-steps li { line-height: 1.5; }

/* ============================================================
   Доп. курсы: каталог, программа, витрина
   ============================================================ */
.xc-intro p { margin: 0 0 var(--sp-3); }
.xc-intro p:last-child { margin: 0; }
.xc-grid { align-items: stretch; }
.xc-card { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; border-top: 3px solid var(--sc, var(--brand-violet)); }
.xc-card h3, .xc-card h2 { margin: 0; }
.xc-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.xc-card__icon { font-size: 1.9rem; line-height: 1; }
.xc-card__meta { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: auto; font-size: .82rem; color: var(--text-soft); }
.xc-chip, .xc-state { display: inline-block; font-size: .74rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.xc-chip--mentor { background: rgba(255, 197, 61, .16); color: var(--brand-gold); }
.xc-chip--addon { background: rgba(45, 212, 191, .16); color: var(--brand-cyan-2); }
.xc-state--open { background: var(--ok-soft); color: var(--ok); }
.xc-state--lock { background: var(--surface-strong); color: var(--text-soft); }
.xc-bar { height: 6px; border-radius: 999px; background: var(--surface-strong); overflow: hidden; }
.xc-bar i { display: block; height: 100%; background: var(--sc, var(--brand-violet)); border-radius: inherit; }
.xc-head { border-top: 3px solid var(--sc, var(--brand-violet)); }
.xc-pass { margin-top: var(--sp-4); }
.xc-pass h4 { margin: var(--sp-4) 0 6px; font-size: .95rem; }
.xc-pass p { margin: 0; line-height: 1.6; }
.xc-pass__goal { font-size: 1.02rem; color: var(--text); }
.xc-pass__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-top: var(--sp-3); }
.xc-pass__facts div { padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--stroke); }
.xc-pass__facts b { display: block; font-size: .92rem; }
.xc-pass__facts span { font-size: .76rem; color: var(--text-dim); }
.xc-list { margin: 0; padding-left: 1.2em; display: grid; gap: 5px; line-height: 1.5; }
.xc-module h3 { margin: 0 0 var(--sp-3); }
.xc-lessons { margin: 0; padding-left: 1.6em; display: grid; gap: 4px; }
.xc-lesson {
  width: 100%; display: flex; align-items: center; gap: 10px; text-align: left;
  min-height: 44px; padding: 8px 10px; border-radius: var(--r-sm);
  background: transparent; border: 1px solid transparent; color: inherit; font: inherit; cursor: pointer;
}
.xc-lesson:hover, .xc-lesson:focus-visible { background: var(--surface); border-color: var(--stroke); }
.xc-lesson span:first-child { flex: 1; min-width: 0; }
.xc-done { color: var(--ok); font-size: .8rem; font-weight: 700; white-space: nowrap; }
.xc-mid { color: var(--warn); font-size: .8rem; font-weight: 700; }
.xc-lock { font-size: .9rem; opacity: .7; }
.xc-kids { display: grid; gap: 6px; margin-top: 4px; font-size: .86rem; }
.xc-kids div { display: flex; justify-content: space-between; gap: 8px; align-items: center; flex-wrap: wrap; }
.xc-card details summary { cursor: pointer; font-weight: 700; font-size: .88rem; padding: 6px 0; }
.xc-public { display: grid; gap: var(--sp-5); }
.xc-public .xc-card { padding: var(--sp-5); }
.xc-public h4 { margin: var(--sp-3) 0 6px; }
.xc-offer { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: var(--sp-5); max-width: 720px; }
.xc-offer div { padding: 14px 16px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--stroke); }
.xc-offer b { display: block; }
.xc-offer span { font-size: .88rem; color: var(--text-soft); }
.xc-teaser { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: var(--sp-5) 0; }
.xc-tile {
  display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--stroke); border-top: 3px solid var(--sc); color: inherit; text-decoration: none;
}
.xc-tile span { font-size: 1.6rem; }
.xc-tile b { font-size: .92rem; line-height: 1.3; }
.xc-tile small { color: var(--text-dim); font-size: .76rem; }
.xc-tile:hover { background: var(--surface-strong); }
@media (max-width: 600px) {
  .course-code { font-size: .8rem; padding: 10px; }
  .xc-teaser { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Телефон: кнопки под уроком и тестом — во всю ширину, главная кнопка сверху */
@media (max-width: 640px) {
  .course-nav { flex-direction: column-reverse; align-items: stretch; }
  .course-nav > .btn { width: 100%; margin-left: 0; justify-content: center; }
}
@media (max-width: 640px) {
  /* «Подсказка» и «Не понимаю» во время теста — рядом, половина ширины каждая */
  .course-nav:not(:has(.btn--primary)) { flex-direction: row; }
  .course-nav:not(:has(.btn--primary)) > .btn { flex: 1; width: auto; }
}

/* Паспорт доп. курса: «Подробнее о курсе» раскрывается */
.xc-more > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; margin-top: var(--sp-3); font-weight: 650; color: var(--brand-violet-2); }
.xc-more > summary::-webkit-details-marker { display: none; }
.xc-more > summary::after { content: "▾"; transition: transform var(--t); }
.xc-more[open] > summary::after { transform: rotate(180deg); }
@media (min-width: 641px) { .xc-more > summary { display: none; } }
@media (max-width: 640px) {
  /* Факты о курсе — в одну строку тремя плашками; цель курса короче */
  .xc-pass__facts { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .xc-pass__facts div { padding: 8px; }
  .xc-pass__facts b { font-size: .8rem; }
  .xc-pass__facts span { font-size: .68rem; }
  .xc-pass__goal { font-size: .92rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .xc-pass:has(.xc-more[open]) .xc-pass__goal { -webkit-line-clamp: unset; display: block; }
  .xc-public .xc-card { padding: var(--sp-4); }
}

/* Телефон, 1–4 класс: плитки предметов по две в ряд — крупные, но без длинной прокрутки */
@media (max-width: 640px) {
  .tile-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tile { padding: var(--sp-4) 10px; gap: 7px; }
  .tile__icon { width: 56px; height: 56px; border-radius: 18px; font-size: 1.8rem; }
  .tile__name { font-size: .98rem; }
  .tile:hover { transform: none; }
}

/* ==================== ГОЛОС: «Слушать», микрофон, ответы голосом ==================== */
.v-btn, .v-mic { display: none; }
.has-voice .v-btn {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 5px 11px; border-radius: 99px; border: 1px solid var(--stroke-strong);
  background: var(--surface); color: var(--text-soft); font: inherit; font-size: .8rem; font-weight: 650; cursor: pointer;
  transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.has-voice .v-btn:hover { color: var(--text); border-color: var(--brand-violet); }
.has-voice .v-btn.is-playing, .has-voice .v-btn.is-on { color: #fff; background: var(--grad-primary); border-color: transparent; }
.v-btn.is-loading svg, .v-mic.is-loading svg { animation: vSpin 1s linear infinite; }
@keyframes vSpin { to { transform: rotate(360deg); } }

/* «Слушать» у заголовка раздела урока */
.dl-sec__title .dl-listen { margin-left: auto; font-family: var(--font-body, inherit); letter-spacing: 0; }

/* Ответ репетитора: «Послушать» под текстом */
.td-say { margin-top: 8px; }
.td__voice { margin-left: auto; }
.td__voice + .td__back, .td__voice ~ .td__x { margin-left: 0; }

/* Микрофон: крупная круглая кнопка — удобно и младшим школьникам */
.has-mic .v-mic {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; flex: none;
  width: 64px; min-height: 56px; border-radius: 18px; border: 0; cursor: pointer;
  background: var(--grad-primary); color: #fff; font: inherit; font-size: .68rem; font-weight: 700;
  box-shadow: 0 6px 18px rgba(124, 92, 255, .35);
}
.v-mic.is-rec { background: var(--danger); animation: vPulse 1.2s ease-in-out infinite; }
@keyframes vPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .55); } 50% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); } }
@media (max-width: 640px) {
  .has-mic .v-mic { width: 58px; }
  .has-voice .td__voice .v-label { display: none; }
  .has-voice .dl-listen .v-label { display: none; }
  .has-voice .dl-listen { padding: 7px 10px; }
}

/* Выбор голоса репетитора: строка в настройках видна только при подключённом голосе */
.v-row { display: none; }
.has-voice .v-row { display: block; }
.has-voice .td__gender { padding: 4px 9px; font-size: 1.05rem; }
@media (max-width: 640px) { .has-voice .td__owl { display: none; } }

/* css/deep.css */
/* ==================== ЭТАЛОННЫЙ УРОК (content/*.md → js/deep-lessons.js) ==================== */
.dl { max-width: 860px; margin-inline: auto; }
.dl-head { margin-bottom: var(--sp-4); }
.dl-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.dl-toc {
  margin: var(--sp-4) 0 var(--sp-6); padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--stroke); border-radius: var(--r-md); background: var(--surface);
}
.dl-toc b { display: block; margin-bottom: 8px; font-size: .8rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; }
.dl-toc ol { columns: 2 240px; column-gap: var(--sp-6); padding-left: 1.3em; margin: 0; }
.dl-toc li { break-inside: avoid; padding: 3px 0; font-size: .95rem; }
.dl-toc a { color: var(--text-soft); text-decoration: none; }
.dl-toc a:hover { color: var(--brand-violet-2); text-decoration: underline; }
.dl-sec { padding: var(--sp-5) 0; border-top: 1px solid var(--stroke); scroll-margin-top: 84px; }
.dl-sec__title { display: flex; align-items: center; gap: 9px; font-size: clamp(1.12rem, 2vw, 1.35rem); margin: 0 0 var(--sp-3); }
.dl-sec__title svg { color: var(--brand-violet-2); flex: none; }
.dl-sec--why .dl-body { padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md); background: linear-gradient(135deg, rgba(124,92,255,.12), rgba(41,171,226,.08)); }
.dl-body { font-size: 1.02rem; line-height: 1.72; color: var(--text); overflow-wrap: anywhere; }
.dl-body p { margin: 0 0 .85em; }
.dl-body h3 { font-size: 1.08rem; margin: 1.3em 0 .5em; scroll-margin-top: 84px; }
.dl-body h4 { font-size: 1rem; margin: 1.1em 0 .4em; color: var(--text-soft); }
.dl-body code { font-family: var(--font-mono); font-size: .92em; padding: 1px 6px; border-radius: 6px; background: var(--surface-strong); }
.dl-body a { color: var(--brand-violet-2); }
.dl-list { margin: 0 0 1em; padding-left: 1.3em; display: grid; gap: 6px; }
.dl-list .dl-list { margin: 6px 0 0; }
.dl-note {
  margin: 0 0 1em; padding: var(--sp-3) var(--sp-4); border-left: 4px solid var(--brand-cyan);
  background: rgba(41,171,226,.08); border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.dl-note p:last-child { margin-bottom: 0; }
.dl-table { overflow-x: auto; margin: 0 0 1em; border: 1px solid var(--stroke); border-radius: var(--r-sm); }
.dl-table table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.dl-table th, .dl-table td { padding: 9px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--stroke); }
.dl-table th { background: var(--surface-strong); font-weight: 700; }
.dl-table tr:last-child td { border-bottom: 0; }
.dl-sec--mistakes .dl-body li::marker { color: var(--warn); }
.dl-sec--hacks .dl-body, .dl-sec--compare .dl-body { padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md); background: var(--warn-soft); }
.dl-flash { animation: dlFlash 1.6s var(--ease); }
@keyframes dlFlash { 0%, 40% { background: rgba(124,92,255,.14); } 100% { background: transparent; } }

/* Проверь себя, решения, разбор вариантов */
.dl-self { display: grid; gap: 10px; }
.dl-self__item, .dl-sol, .dl-why { border: 1px solid var(--stroke); border-radius: var(--r-sm); background: var(--surface); }
.dl-self__item > summary, .dl-sol > summary, .dl-why > summary {
  cursor: pointer; padding: 12px 14px; font-weight: 600; list-style: none; display: flex; gap: 10px; align-items: flex-start;
}
.dl-self__item > summary::-webkit-details-marker, .dl-sol > summary::-webkit-details-marker, .dl-why > summary::-webkit-details-marker { display: none; }
.dl-self__item > summary::after, .dl-sol > summary::after, .dl-why > summary::after { content: "\25BE"; margin-left: auto; color: var(--text-dim); transition: transform var(--t); }
.dl-self__item[open] > summary::after, .dl-sol[open] > summary::after, .dl-why[open] > summary::after { transform: rotate(180deg); }
.dl-self__n {
  flex: none; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center;
  background: rgba(124,92,255,.18); color: var(--brand-violet-2); font-size: .8rem; font-weight: 800;
}
.dl-self__a { padding: 0 14px 10px; }
.dl-sol > :not(summary), .dl-why > :not(summary) { margin-left: 14px; margin-right: 14px; }
.dl-sol { margin: 0 0 var(--sp-2); }
.dl-sol[open] { padding-bottom: 6px; }
.dl-ex { padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-4); border-radius: var(--r-md); border: 1px solid var(--stroke); }
.dl-ex h3 { margin-top: 0; display: flex; align-items: center; gap: 8px; }
.dl-ex h3::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--ok); }
.dl-ex--mid h3::before { background: var(--brand-cyan); }
.dl-ex--hard h3::before { background: var(--brand-magenta); }

/* Схемы и графики (SVG из блоков plot / array / jumps) */
.dl-fig { margin: 0 0 1em; padding: var(--sp-3); border: 1px solid var(--stroke); border-radius: var(--r-md); background: var(--bg-1); }
.dl-fig svg { display: block; width: 100%; height: auto; max-height: 360px; }
.dl-fig--small svg { max-width: 360px; margin-inline: auto; }
.dv-grid { stroke: var(--stroke); stroke-width: 1; }
.dv-axis { stroke: var(--text-dim); stroke-width: 1.6; }
.dv-tick { fill: var(--text-dim); font-size: 12px; font-family: var(--font); }
.dv-curve { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.dv-curve--1 { stroke: var(--brand-violet); }
.dv-curve--2 { stroke: var(--brand-cyan); }
.dv-curve--3 { stroke: var(--brand-magenta); }
.dv-pt { fill: var(--brand-gold); stroke: var(--bg-1); stroke-width: 2; }
.dv-pt-label { fill: var(--text); font-size: 13px; font-weight: 700; font-family: var(--font); }
.dv-row { fill: var(--surface); stroke: var(--stroke); }
.dv-dot { fill: var(--brand-violet); opacity: .85; }
.dv-jump { fill: none; stroke: var(--brand-cyan); stroke-width: 2.5; }
.dv-legend, .dv-cap { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 6px; font-size: .86rem; color: var(--text-soft); }
.dv-legend__item::before { content: ""; display: inline-block; width: 18px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; background: var(--brand-violet); }
.dv-legend__item--2::before { background: var(--brand-cyan); }
.dv-legend__item--3::before { background: var(--brand-magenta); }

/* Задания теста */
.dl-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--sp-3); }
.dl-lv--base { background: var(--ok-soft); color: var(--ok); }
.dl-lv--mid { background: rgba(41,171,226,.14); color: var(--brand-cyan-2); }
.dl-lv--hard { background: rgba(244,114,182,.14); color: var(--brand-magenta); }
.dl-q p { font-size: 1.04rem; line-height: 1.65; margin: 0 0 .6em; }
.dl-q > :last-child { margin-bottom: 0; }
.dl-hint { margin: 0 0 var(--sp-2); }
.opt--check .opt__box {
  width: 22px; height: 22px; flex: none; border-radius: 6px; border: 2px solid var(--stroke-strong);
  display: grid; place-items: center; transition: all var(--t-fast);
}
.opt--check.is-picked { border-color: var(--brand-violet); background: rgba(124,92,255,.10); }
.opt--check.is-picked .opt__box { background: var(--brand-violet); border-color: var(--brand-violet); }
.opt--check.is-picked .opt__box::after { content: "\2713"; color: #fff; font-size: 14px; font-weight: 800; line-height: 1; }
.opt.is-missed { border-color: var(--ok); border-style: dashed; }
.dl-match { display: grid; gap: 10px; }
.dl-match__row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 10px; align-items: center;
  padding: 10px 12px; border: 1px solid var(--stroke); border-radius: var(--r-sm); background: var(--surface);
}
.dl-match__row select { width: 100%; min-width: 0; }
.dl-match select.is-right { border-color: var(--ok); background: var(--ok-soft); }
.dl-match select.is-wrong { border-color: var(--danger); background: var(--danger-soft); }
@media (max-width: 560px) { .dl-match__row { grid-template-columns: 1fr; } }
.dl-why { margin: 10px 0; }
.dl-why li.is-ok b { color: var(--ok); }
.dl-why li.is-no b { color: var(--danger); }
.dl-why-text p { margin: 0 0 .6em; }
.dl-ref { margin: 10px 0; padding: 12px 14px; border-radius: var(--r-sm); background: var(--ok-soft); border: 1px solid rgba(52,211,153,.3); }
.dl-ref > b { display: block; margin-bottom: 6px; }
.dl-ref p { margin: 0 0 .5em; }
.dl-goto { margin: 4px 0 10px; }

/* Итог по уровням Блума и сложности */
.dl-res__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-5); margin-bottom: var(--sp-3); }
.dl-res h4 { margin: 0 0 8px; font-size: .9rem; color: var(--text-dim); }
.dl-res__row { display: grid; grid-template-columns: 104px 1fr 44px; gap: 10px; align-items: center; font-size: .9rem; margin-bottom: 7px; }
.dl-res__row b { text-align: right; }
.dl-resume { display: flex; margin: var(--sp-3) 0 0; }

/* Шаги темы кликабельны: вернуться к уроку можно всегда */
button.stepper__item { font: inherit; cursor: pointer; background: none; }
button.stepper__item:hover { border-color: var(--brand-violet); color: var(--text); }

/* Завершение урока: «Я изучил тему — перейти к тесту» */
.dl-done { margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md); background: rgba(124,92,255,.08); border: 1px solid rgba(124,92,255,.25); }
.dl-done > p { margin: 0 0 var(--sp-3); }
.dl-done .course-nav { margin-top: 0; }
.dl-head .dl-resume { margin-top: var(--sp-3); }

/* Чек-лист для самопроверки */
.dl-check { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.dl-check li { position: relative; padding-left: 30px; }
.dl-check li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 5px; border: 2px solid var(--brand-violet); }
.dl-sec--summary .dl-body { padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md); background: var(--ok-soft); }

/* Оглавление урока — раскрывающееся; плавающая кнопка «К тесту» на телефоне */
.dl-toc > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; }
.dl-toc > summary::-webkit-details-marker { display: none; }
.dl-toc > summary b { display: inline; margin: 0; }
.dl-toc > summary::after { content: "▾"; margin-left: auto; color: var(--text-dim); transition: transform var(--t); }
.dl-toc[open] > summary { margin-bottom: 8px; }
.dl-toc[open] > summary::after { transform: rotate(180deg); }
.dl-toc__n { font-size: .8rem; color: var(--text-dim); }
.dl-fab { display: none; }
@media (max-width: 980px) {
  .dl-fab {
    display: inline-flex; position: fixed; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 80;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .35); transition: opacity .2s, transform .2s;
  }
  .dl-fab.is-hidden { opacity: 0; transform: translateY(12px); pointer-events: none; }
}
@media (max-width: 640px) {
  .dl-toc { margin: var(--sp-3) 0 var(--sp-4); padding: 12px 16px; }
  .dl-body { font-size: 1rem; line-height: 1.65; }
}

/* css/nav.css */
/* ==================== НАВИГАЦИЯ: боковое меню, нижняя панель, «Ещё» ==================== */

/* Подвал бокового меню: карточка профиля и отдельная кнопка выхода */
.rail__footer { display: flex; align-items: center; gap: 6px; }
.rail__footer .rail__user { flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.rail__logout { flex: none; width: 40px; height: 40px; color: var(--text-dim); }
.rail__logout:hover { color: var(--danger); background: var(--danger-soft); }

/* Нижняя панель: четыре раздела и «Ещё» — одинаковые по размеру цели ≥ 44 px */
@media (max-width: 980px) {
  .tabbar a, .tabbar button {
    position: relative; min-height: 48px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    padding: 7px 4px; border-radius: var(--r-sm); border: 0; background: none;
    font: inherit; font-size: .68rem; font-weight: 650; color: var(--text-dim); cursor: pointer;
    transition: color var(--t) var(--ease), background var(--t) var(--ease);
  }
  .tabbar button svg { width: 21px; height: 21px; }
  .tabbar button.is-active { color: var(--brand-violet-2); background: rgba(124,92,255,.12); }
  .tabbar span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabbar__badge {
    position: absolute; top: 4px; left: calc(50% + 6px);
    min-width: 17px; height: 17px; padding: 0 5px; border-radius: 99px;
    background: var(--danger); color: #fff; font-size: .64rem; font-style: normal; font-weight: 800;
    display: grid; place-items: center;
  }
  /* Полное меню открывается поверх нижней панели */
  .rail { z-index: 120; }
  .rail-backdrop { z-index: 110; }
}

/* Уведомление о cookie не закрывает нижнюю панель навигации */
@media (max-width: 980px) {
  body:has(.tabbar) .cookie-bar { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 560px) {
  .cookie-bar { padding: 12px 14px; gap: 10px; }
  .cookie-bar p { font-size: .8rem; }
}

/* Всплывающие уведомления на телефоне — по центру сверху, не за краем экрана */
@media (max-width: 560px) {
  .toast-root { left: 12px; right: 12px; top: 12px; align-items: stretch; }
  .toast { max-width: none; }
}

/* Поиск на главной: кнопка не сжимается и не обрезает текст */
.quick-ask .input { flex: 1; min-width: 0; }
.quick-ask .btn { flex: none; white-space: nowrap; }

/* Маленькие кнопки на телефоне — не меньше 36 px, удобно попадать пальцем */
@media (max-width: 560px) { .btn--sm { min-height: 36px; } }

/* Главный заголовок страницы в стиле заголовка раздела (для поиска и экранного диктора — h1) */
.section-head .section-h1 { font-size: clamp(1.7rem, 3.6vw, 2.7rem); margin-bottom: var(--sp-3); }

/* Длинные кнопки на телефоне переносятся, а не обрезаются */
@media (max-width: 560px) { .btn { white-space: normal; line-height: 1.25; text-align: center; } .btn--icon, .theme-toggle { white-space: nowrap; } }
.dg-intro .dg-h1 { font-size: clamp(1.7rem, 3.6vw, 2.7rem); }

/* Кнопка в уведомлении о cookie не сжимается соседним текстом */
.cookie-bar .btn { flex: none; }
/* Длинные названия предметов в плитках переносятся по слогам, а не обрезаются */
.tile__name { max-width: 100%; overflow-wrap: anywhere; hyphens: auto; }

/* Подтверждение телефона при регистрации */
.phone-row { gap: 8px; flex-wrap: nowrap; }
.phone-row + .phone-row { margin-top: 8px; }
.phone-row .input { flex: 1; min-width: 0; }
.phone-row .btn { flex: none; }
.t-ok { color: var(--ok); }

/* Подписи нижней панели крупнее — их читают и младшие школьники */
@media (max-width: 980px) {
  .tabbar a, .tabbar button { font-size: .74rem; }
}

/* css/pricing.css */
/* ============================================================
   ТАРИФЫ: витрина, карточки, калькулятор подписки
   ============================================================ */

/* ==================== УПРАВЛЕНИЕ ВЫБОРОМ ==================== */
.pricing-ctl {
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding: var(--sp-5);
  border-radius: var(--r-xl);
  border: 1px solid var(--stroke);
  background: var(--grad-surface);
  backdrop-filter: blur(18px);
  margin-bottom: var(--sp-5);
}
.pricing-ctl__row {
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  justify-content: center;
}
.pricing-ctl__label { font-weight: 650; font-size: .95rem; }
.pricing-ctl__note {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  font-size: .84rem; color: var(--text-soft);
  padding-top: var(--sp-3); border-top: 1px solid var(--stroke);
}
.pricing-ctl__note svg { color: var(--brand-gold); flex: none; }

.segmented--lg button { padding: 10px 20px; font-size: .92rem; }
.save-chip {
  display: inline-block; margin-left: 5px; padding: 1px 6px;
  border-radius: 99px; font-size: .68rem; font-weight: 800;
  background: var(--ok); color: #05261A;
}

/* Счётчик детей */
.stepper {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 4px 4px 14px;
  background: var(--surface); border: 1px solid var(--stroke);
  border-radius: var(--r-pill);
}
.stepper__label { font-size: .85rem; font-weight: 600; color: var(--text-soft); margin-right: 6px; }
.stepper button {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-strong); border: 1px solid var(--stroke);
  font-size: 1.1rem; font-weight: 700; line-height: 1;
  transition: all var(--t) var(--ease);
}
.stepper button:hover { background: var(--brand-violet); color: #fff; border-color: transparent; }
.stepper__value { min-width: 26px; text-align: center; font-weight: 800; font-size: 1.05rem; }

/* ==================== КАРТОЧКИ ТАРИФОВ ==================== */
.pricing-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-4); align-items: stretch;
}

.plan-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  border-radius: var(--r-xl);
  border: 1px solid var(--stroke);
  background: var(--grad-surface);
  backdrop-filter: blur(18px);
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.plan-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--pc) 45%, transparent); }
.plan-card--hit {
  border-color: var(--brand-violet);
  background: linear-gradient(165deg, rgba(124, 92, 255, .16), rgba(41, 171, 226, .06));
  box-shadow: 0 0 0 1px rgba(124, 92, 255, .3), var(--shadow-md);
}

.plan-card__badge {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  padding: 4px 13px; border-radius: var(--r-pill); white-space: nowrap;
  font-size: .7rem; font-weight: 800; letter-spacing: .02em;
  background: color-mix(in srgb, var(--pc) 22%, var(--bg-1));
  border: 1px solid color-mix(in srgb, var(--pc) 45%, transparent);
  color: var(--pc);
}
.plan-card--hit .plan-card__badge { background: var(--grad-primary); border-color: transparent; color: #fff; }

.plan-card__name {
  font-family: var(--font-display); font-size: 1.35rem; font-weight: 800;
  margin-bottom: 5px;
}
.plan-card__who { font-size: .86rem; color: var(--text-soft); min-height: 2.6em; margin-bottom: var(--sp-4); }

.plan-card__price { display: flex; align-items: baseline; gap: 6px; }
.plan-card__price b {
  font-family: var(--font-display); font-size: 2.5rem; font-weight: 800; letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}
.plan-card__price span { color: var(--text-dim); font-size: .9rem; }
.plan-card__sub { font-size: .78rem; color: var(--text-dim); margin-top: 3px; }
.plan-card__sub s { opacity: .8; }

.plan-card__save {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  margin: var(--sp-4) 0;
  padding: 5px 12px; border-radius: var(--r-pill);
  background: var(--ok-soft); border: 1px solid rgba(52, 211, 153, .3);
  color: var(--ok); font-size: .78rem; font-weight: 700;
}
.plan-card__save--muted {
  background: var(--surface-strong); border-color: var(--stroke); color: var(--text-soft);
}

.plan-card__features { display: flex; flex-direction: column; gap: 10px; flex: 1; margin-bottom: var(--sp-4); }
.plan-card__features li { display: flex; gap: 9px; align-items: flex-start; font-size: .87rem; color: var(--text-soft); }
.plan-card__features svg { flex: none; margin-top: 2px; color: var(--ok); }

.plan-card__total {
  font-size: .78rem; color: var(--text-dim); text-align: center;
  padding: 10px 0; margin-bottom: var(--sp-3);
  border-top: 1px solid var(--stroke);
}
.plan-card__total b { color: var(--text); font-size: .95rem; }

.pricing-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-5);
}

.matrix td, .matrix th { font-size: .85rem; }
.matrix td:first-child { color: var(--text-soft); }
.matrix svg { color: var(--ok); }

/* ==================== КАЛЬКУЛЯТОР ==================== */
.calc { display: flex; flex-direction: column; gap: var(--sp-4); }
.calc__head { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }

.calc__kids { display: flex; flex-direction: column; gap: var(--sp-3); }
.calc__kid {
  border: 1px solid var(--stroke); border-radius: var(--r-lg);
  background: var(--surface); padding: var(--sp-4);
}
.calc__kid-top { display: flex; align-items: center; gap: 12px; margin-bottom: var(--sp-3); }
.calc__kid-price { text-align: right; white-space: nowrap; }
.calc__kid-price b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }

.calc__tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.calc__tier {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  padding: 11px 13px; border-radius: var(--r-sm);
  border: 1px solid var(--stroke); background: var(--bg-1);
  transition: all var(--t) var(--ease);
}
.calc__tier:hover { border-color: var(--stroke-strong); transform: translateY(-2px); }
.calc__tier.is-active {
  border-color: var(--brand-violet);
  background: rgba(124, 92, 255, .14);
  box-shadow: 0 0 0 2px rgba(124, 92, 255, .16);
}
.calc__tier-name { font-weight: 700; font-size: .9rem; }
.calc__tier-price { font-size: .82rem; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.calc__tier-limit { font-size: .68rem; color: var(--text-dim); }

.calc__summary {
  border: 1px solid var(--stroke-strong); border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--bg-1) 72%, transparent);
  backdrop-filter: blur(14px);
  padding: var(--sp-5);
  display: flex; flex-direction: column; gap: 11px;
}
.calc__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); font-size: .92rem; }
.calc__row span { color: var(--text-soft); }
.calc__row--save b { color: var(--ok); }
.calc__row--save svg { vertical-align: -2px; margin-right: 4px; }
.calc__row--points { padding: 11px 0; border-top: 1px solid var(--stroke); border-bottom: 1px solid var(--stroke); }

.calc__total {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-top: var(--sp-3); margin-top: 2px;
  border-top: 1px solid var(--stroke);
}
.calc__total span { font-weight: 700; }
.calc__total b {
  font-family: var(--font-display); font-size: 2rem; font-weight: 800;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.calc__pay-note { font-size: .76rem; color: var(--text-dim); text-align: center; }

/* ==================== СОСТОЯНИЕ ПОДПИСКИ ==================== */
.sub-state {
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  padding: var(--sp-5);
  border-radius: var(--r-xl);
  border: 1px solid var(--stroke-strong);
  background: linear-gradient(130deg, rgba(124, 92, 255, .2), rgba(41, 171, 226, .08));
}
.sub-state__icon {
  width: 52px; height: 52px; flex: none; border-radius: 16px;
  display: grid; place-items: center; font-size: 1.5rem;
  background: var(--surface-strong); border: 1px solid var(--stroke);
}
.sub-state--warn { background: linear-gradient(130deg, rgba(251, 191, 36, .18), transparent); border-color: rgba(251, 191, 36, .35); }
.sub-state--danger { background: linear-gradient(130deg, rgba(251, 113, 133, .18), transparent); border-color: rgba(251, 113, 133, .35); }

/* Расход лимитов */
.usage-row { display: flex; flex-direction: column; gap: 7px; }
.usage-row__top { display: flex; align-items: center; justify-content: space-between; font-size: .86rem; }
.usage-row__top b { font-variant-numeric: tabular-nums; }

/* ==================== АДАПТИВ ==================== */
@media (max-width: 720px) {
  .pricing-ctl__row { flex-direction: column; align-items: stretch; }
  .segmented--lg { width: 100%; }
  .segmented--lg button { flex: 1; padding: 10px 8px; font-size: .84rem; }
  .stepper { justify-content: space-between; }
  .calc__tiers { grid-template-columns: 1fr; }
  .pricing-foot { flex-direction: column; align-items: stretch; text-align: center; }
  .plan-card__who { min-height: 0; }
}

/* Доп. услуга в калькуляторе: курс «Изучение ИИ» */
.calc__addon {
  display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px;
  border: 1px dashed var(--stroke-strong); border-radius: var(--r-sm); cursor: pointer;
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.calc__addon:hover { background: var(--surface-hover); }
.calc__addon.is-on { border-style: solid; border-color: var(--brand-violet); background: rgba(124, 92, 255, .08); }
.calc__addon input { width: 18px; height: 18px; accent-color: var(--brand-violet); flex-shrink: 0; }
.calc__addon-text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.calc__addon-price { white-space: nowrap; color: var(--brand-gold); }
@media (max-width: 560px) {
  .calc__addon { flex-wrap: wrap; }
  /* Текст на всю ширину (иначе колонка в 70 px и карточка высотой в экран), цена — строкой ниже */
  .calc__addon-text { flex-basis: calc(100% - 30px); }
  .calc__addon-price { margin-left: 30px; }
}

/* Переключатель периода в калькуляторе на узком экране: помещается в ширину, подписи переносятся */
@media (max-width: 480px) {
  .calc__head .segmented { display: flex; width: 100%; }
  .calc__head .segmented button { flex: 1 1 0; min-width: 0; padding: 8px 6px; font-size: .8rem; white-space: normal; line-height: 1.2; }
  .calc__head .save-chip { display: block; margin: 2px auto 0; width: max-content; }
}