/* =========================================================
   ПЕРЕМЕННЫЕ ТЕМЫ — всё оформление меняется здесь.
   Когда придёт финальный дизайн/название/лого — трогать
   нужно в первую очередь этот блок, разметку — по минимуму.
   ========================================================= */
:root {
  --color-bg: #f7f6fb;
  --color-surface: #ffffff;

  /* Бренд: фиолетовый — действие/интерактив (контраст на белом ~5.3:1, ок для текста и кнопок) */
  --color-primary: #963fd5;
  --color-primary-dark: #7a2eb3;

  /* Бренд: бирюзовый — знание/контент. Сырой брендовый тон — для крупных/декоративных элементов
     и лого (контраст на белом всего ~1.9:1, для мелкого текста и кнопок не годится) */
  --color-teal: #34d0ba;
  /* Тот же бирюзовый, но затемнённый до контраста ~4.8:1 — там, где бирюзовый нужен как читаемый текст/иконка */
  --color-teal-deep: #16806e;

  --color-accent: var(--color-teal);
  --color-success: var(--color-teal-deep);

  /* Текущий "случайный" акцент — один источник правды для всех кнопок и линии.
     Меняется из script.js при переходах между разделами, чтобы везде был один и тот же цвет. */
  --accent-current: var(--color-primary);
  --accent-current-text: #fff;
  --color-danger: #e0483e;
  --color-text: #201c2b;
  --color-text-muted: #6c6577;
  --color-border: #e8e2f0;

  /* Тона, которые светлая/тёмная тема переопределяют отдельно */
  --points-bg: #eafbf7;
  --points-border: #b9ece2;
  --tint-purple: #faf5ff;
  --tint-teal: #edfbf8;

  --font-main: 'Segoe UI', ui-sans-serif, system-ui, -apple-system, Roboto, Arial, sans-serif;
  --font-display: 'Baloo 2', var(--font-main);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --shadow-card: 0 4px 16px rgba(32, 28, 43, 0.08);
  --shadow-hover: 0 8px 24px rgba(32, 28, 43, 0.14);

  --header-height: 72px;
}

/* ===================== ТЁМНАЯ ТЕМА =====================
   Токены переопределяются дважды по одной и той же схеме:
   1) через prefers-color-scheme — "системный" режим, срабатывает
      только если пользователь не выбрал явную тему (нет [data-theme="light"]);
   2) через [data-theme="dark"] — явный выбор в настройках, всегда побеждает.
   Сама разметка/компоненты тёмную тему не знают, они просто читают
   переменные — поэтому переопределять нужно только этот блок. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #15111d;
    --color-surface: #201a2c;
    --color-teal-deep: #4fe0c9;
    --color-text: #f2eef8;
    --color-text-muted: #a99fb8;
    --color-border: #372d47;

    --points-bg: rgba(52, 208, 186, 0.14);
    --points-border: rgba(52, 208, 186, 0.35);
    --tint-purple: rgba(150, 63, 213, 0.2);
    --tint-teal: rgba(52, 208, 186, 0.2);

    --shadow-card: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-hover: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 8px 24px rgba(0, 0, 0, 0.5);
  }
}
:root[data-theme="dark"] {
  --color-bg: #15111d;
  --color-surface: #201a2c;
  --color-teal-deep: #4fe0c9;
  --color-text: #f2eef8;
  --color-text-muted: #a99fb8;
  --color-border: #372d47;

  --points-bg: rgba(255, 248, 0, 0.12);
  --points-border: rgba(255, 248, 0, 0.32);
  --tint-purple: rgba(150, 63, 213, 0.2);
  --tint-teal: rgba(52, 208, 186, 0.2);

  --shadow-card: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-hover: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 8px 24px rgba(0, 0, 0, 0.5);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-main);
  background: var(--color-bg);
  color: var(--color-text);
  transition: background .2s ease, color .2s ease;
}

/* ===================== СКРОЛЛБАР ===================== */
/* Иначе на месте него — системный (белый) скроллбар, который не подстраивается
   под тему сайта и особенно режет глаз в тёмной теме. */
html { scrollbar-width: thin; scrollbar-color: var(--color-border) transparent; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background-color: var(--color-border);
  background-clip: padding-box;
  border: 3px solid var(--color-bg);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--color-primary); }

h1, h2, h3 { margin: 0 0 12px; font-family: var(--font-display); font-weight: 700; text-wrap: balance; }

.hidden { display: none !important; }

/* ===================== ФОНОВЫЕ ПЯТНА (интерактив, следуют за курсором) ===================== */

.bg-decor {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
}
.bg-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(55px);
  will-change: top, left, transform, opacity;
  transition: top 8s ease-in-out, left 8s ease-in-out, translate 1.1s cubic-bezier(.16,1,.3,1);
}

.bg-blob--purple-1 { width: 420px; height: 420px; top: -10%; left: -8%; background: var(--color-primary); animation: breathe-a 9s ease-in-out infinite; }
.bg-blob--teal-1   { width: 360px; height: 360px; bottom: -12%; right: -8%; background: var(--color-teal); animation: breathe-b 11s ease-in-out infinite; }
.bg-blob--purple-3 { width: 220px; height: 220px; top: 34%; right: 10%; background: var(--color-primary); animation: breathe-c 7s ease-in-out infinite; }
.bg-blob--purple-2 { width: 200px; height: 200px; bottom: 8%; left: 6%; background: var(--color-primary); animation: breathe-c 12s ease-in-out infinite; }
.bg-blob--teal-2   { width: 260px; height: 260px; top: 8%; right: 30%; background: var(--color-teal); animation: breathe-a 10s ease-in-out infinite; }
.bg-blob--teal-3   { width: 160px; height: 160px; bottom: 22%; right: 22%; background: var(--color-teal); animation: breathe-b 8s ease-in-out infinite; }

@keyframes breathe-a { 0%, 100% { opacity: .55; } 50% { opacity: .25; } }
@keyframes breathe-b { 0%, 100% { opacity: .50; } 50% { opacity: .22; } }
@keyframes breathe-c { 0%, 100% { opacity: .40; } 50% { opacity: .18; } }

@media (prefers-reduced-motion: reduce) {
  .bg-blob { animation: none !important; transition: none; opacity: .3; }
}

/* ===================== HEADER / NAV ===================== */

.site-header {
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  background: var(--color-surface);
  position: sticky;
  top: 0;
  z-index: 50;
}
.header-divider {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 8px;
  background: var(--accent-current);
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--color-text);
  white-space: nowrap;
  cursor: pointer;
}
.logo .brand-truth { color: var(--color-teal); }
.logo-icon { flex-shrink: 0; object-fit: contain; width: 44px; height: 44px; }

.main-nav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.nav-link {
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-muted);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.nav-link:hover { background: var(--color-bg); color: var(--color-text); }
.nav-link.active { background: var(--accent-current); color: var(--accent-current-text); }

.points-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--points-bg);
  border: 1px solid var(--points-border);
  padding: 8px 14px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  white-space: nowrap;
}

.account-btn {
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text);
  font-family: inherit;
  font-weight: 700;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s, color .15s;
}
.account-btn:hover { border-color: var(--accent-current); color: var(--accent-current); }

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

main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

.page { display: none; }
.page.active { display: block; }

@media (prefers-reduced-motion: no-preference) {
  .page.active { animation: page-in .4s cubic-bezier(.16,1,.3,1); }
}

@keyframes page-in {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.section-title { font-size: 26px; }
.section-sub { color: var(--color-text-muted); margin-bottom: 32px; max-width: 640px; }

/* ===================== HOME ===================== */

.hero {
  text-align: center;
  max-width: 720px;
  margin: 20px auto 48px;
}
.hero h1 { font-size: 34px; line-height: 1.25; }
.hero-sub { color: var(--color-text-muted); font-size: 16px; margin: 16px 0 28px; }

.cta-button {
  background: var(--accent-current);
  color: var(--accent-current-text);
  border: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  padding: 14px 32px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: transform .15s, box-shadow .15s, filter .15s;
}
.cta-button:hover { filter: brightness(.88); transform: translateY(-2px); box-shadow: var(--shadow-hover); }

.hero-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.mini-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 24px;
  box-shadow: var(--shadow-card);
  text-align: center;
}
.mini-card-icon { font-size: 28px; margin-bottom: 8px; }
.mini-card-title { font-family: var(--font-display); font-weight: 700; margin-bottom: 6px; }
.mini-card-text { color: var(--color-text-muted); font-size: 14px; }

/* ===================== AUTH ===================== */

.auth-form {
  max-width: 380px;
  margin: 0 auto;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.auth-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: var(--color-text-muted); }
.auth-field input {
  font-family: inherit;
  font-size: 15px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
}
.auth-field input:focus { outline: 2px solid var(--accent-current); outline-offset: 1px; }
.auth-error {
  color: var(--color-danger);
  font-size: 13px;
  font-weight: 600;
  margin: -6px 0 0;
}
.auth-switch { text-align: center; margin-top: 16px; color: var(--color-text-muted); font-size: 14px; }
.link-button {
  background: none;
  border: none;
  color: var(--accent-current);
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  text-decoration: underline;
  padding: 0 0 0 4px;
}

/* ===================== МАСКОТ ===================== */

.mascot {
  position: fixed;
  z-index: 5;
  left: 60px;
  top: 140px;
  pointer-events: none;
  transition: left 1.1s cubic-bezier(.65,0,.35,1), top 1.1s cubic-bezier(.65,0,.35,1);
}
.mascot.hidden { display: none; }

.mascot-eye { display: block; filter: drop-shadow(0 6px 14px rgba(32,28,43,.18)); overflow: visible; }

/* Два отдельных века — залитые "лепестки" (не обводка): тоньше у кончиков,
   толще ближе к центру, с наружной стороны. Друг друга не касаются. */
.mascot-lid { fill: var(--color-primary); stroke: none; }

/* Один и тот же круг фиксированного радиуса на все состояния — эмоция это
   ПОЛОЖЕНИЕ круга (куда смотрит) или его обрезка ровно пополам, никогда
   не изменение размера/формы. Зрачок того же цвета, что и веки, и никогда
   их не касается. */
.mascot-pupil {
  fill: var(--color-primary);
  transition: cx .5s ease, cy .5s ease;
}

.mascot[data-emotion="sad"] .mascot-lid,
.mascot[data-emotion="alert"] .mascot-lid { fill: var(--color-teal-deep); }
.mascot[data-emotion="sad"] .mascot-pupil,
.mascot[data-emotion="alert"] .mascot-pupil { fill: var(--color-teal); }

.mascot[data-emotion="neutral"] .mascot-pupil { cx: 50; cy: 30; clip-path: none; }
.mascot[data-emotion="neutral"][data-gaze="right"] .mascot-pupil { cx: 57; }
.mascot[data-emotion="neutral"][data-gaze="left"] .mascot-pupil { cx: 43; }
.mascot[data-emotion="thinking"] .mascot-pupil { cx: 56; cy: 28; clip-path: none; }
.mascot[data-emotion="alert"] .mascot-pupil { cx: 50; cy: 22; clip-path: none; }

/* Радость/грусть: та же окружность, обрезанная строго пополам —
   верхняя половина видна (радость) или нижняя (грусть). Никакого
   сжатия/растяжения/изменения радиуса. */
.mascot[data-emotion="happy"] .mascot-pupil {
  cx: 50; cy: 30;
  clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
}
.mascot[data-emotion="sad"] .mascot-pupil {
  cx: 50; cy: 30;
  clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
}

@media (prefers-reduced-motion: no-preference) {
  .mascot-eye { animation: mascot-bob 3.4s ease-in-out infinite; }
  .mascot[data-glance="1"] .mascot-pupil { animation: mascot-glance 4.5s ease-in-out; }
}
@keyframes mascot-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
/* Оглядывание: смотрит в одну сторону, задерживает взгляд, смотрит в другую,
   снова задерживает, и только потом плавно возвращается. transform — не
   абсолютный cx, поэтому корректно возвращается туда, где сейчас "живёт"
   взгляд (в т.ч. с учётом data-gaze). */
@keyframes mascot-glance {
  0%   { transform: translateX(0); }
  13%  { transform: translateX(-9px); }
  38%  { transform: translateX(-9px); }
  51%  { transform: translateX(9px); }
  76%  { transform: translateX(9px); }
  100% { transform: translateX(0); }
}

.mascot-mark {
  position: absolute;
  top: -6px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  color: var(--color-teal-deep);
  opacity: 0;
  transition: opacity .3s ease;
}
.mascot-mark--a { left: -20px; }
.mascot-mark--b { left: -2px; top: 2px; font-size: 17px; }
.mascot-mark--q { right: -20px; color: var(--color-primary-dark); }
.mascot[data-emotion="alert"] .mascot-mark--a,
.mascot[data-emotion="alert"] .mascot-mark--b { opacity: 1; }
.mascot[data-emotion="thinking"] .mascot-mark--q { opacity: 1; }

.mascot-banner-eye .mascot-lid { stroke: var(--color-teal-deep); }
.mascot-banner-eye .mascot-pupil { fill: var(--color-teal); }

.mascot-banner {
  position: fixed;
  z-index: 20;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  max-width: min(520px, calc(100vw - 40px));
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hover);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.mascot-banner.hidden { display: none; }
.mascot-banner-eye { flex-shrink: 0; }
.mascot-banner p { margin: 0; font-size: 14px; flex: 1; }
.mascot-banner .ghost-button { margin: 0; flex-shrink: 0; white-space: nowrap; }

/* ===================== TRAINING (continuous session) ===================== */

#training-intro {
  text-align: center;
  padding: 40px 0;
}

.session-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 20px;
}
.session-sep { opacity: .5; }

.training-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 36px;
  max-width: 480px;
  margin: 0 auto;
  box-shadow: var(--shadow-card);
}

.ghost-button {
  display: block;
  margin: 20px auto 0;
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-family: inherit;
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
}

.step-label {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 10px;
}

.case-box {
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  padding: 18px;
  margin: 12px 0 20px;
  font-style: italic;
}

.answer-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.answer-btn, .modal-next {
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-border);
  background: var(--color-surface);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.answer-btn[data-answer="manipulation"]:hover { border-color: var(--color-primary); border-left-color: var(--color-primary); background: var(--tint-purple); }
.answer-btn[data-answer="reliable"]:hover { border-color: var(--color-teal-deep); border-left-color: var(--color-teal); background: var(--tint-teal); }

.modal-next {
  background: var(--accent-current);
  color: var(--accent-current-text);
  border: none;
  margin-top: 20px;
  width: 100%;
}
.modal-next:hover { filter: brightness(.88); }

#feedback-label-inline.correct { color: var(--color-success); }
#feedback-label-inline.wrong { color: var(--color-danger); }

.ai-loading {
  max-width: 480px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 600;
}
.ai-loading.hidden { display: none; }
.ai-loading-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-current);
  display: inline-block;
}
@media (prefers-reduced-motion: no-preference) {
  .ai-loading-dot { animation: ai-loading-bounce 1s ease-in-out infinite; }
  .ai-loading-dot:nth-child(2) { animation-delay: .15s; }
  .ai-loading-dot:nth-child(3) { animation-delay: .3s; }
}
@keyframes ai-loading-bounce {
  0%, 100% { transform: translateY(0); opacity: .5; }
  50% { transform: translateY(-5px); opacity: 1; }
}

#theory-blocks { min-height: 40px; }
.theory-block { display: none; }
.theory-block.active { display: block; }
.theory-block-title { font-family: var(--font-display); font-weight: 700; font-size: 17px; margin-bottom: 6px; }
.theory-block-text { line-height: 1.5; }
@media (prefers-reduced-motion: no-preference) {
  .theory-block.active { animation: theory-in .4s ease; }
}
@keyframes theory-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.case-prompt { font-weight: 700; margin: 0 0 12px; }

.mc-choices { display: flex; flex-direction: column; gap: 10px; }
.mc-choice {
  display: flex;
  gap: 10px;
  text-align: left;
  font-family: inherit;
  font-size: 15px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.mc-choice:hover { border-color: var(--accent-current); background: var(--color-bg); }
.mc-choice.selected { border-color: var(--accent-current); background: var(--color-bg); font-weight: 700; }
.mc-choice-key { font-weight: 800; color: var(--accent-current); }

.free-answer-input {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  resize: vertical;
  min-height: 70px;
  box-sizing: border-box;
}
.free-answer-input:focus { outline: 2px solid var(--accent-current); outline-offset: 1px; }

.ai-disclaimer {
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 10px 0 0;
}
.ai-disclaimer.hidden { display: none; }

#round-decision .step-label.success { color: var(--color-success); }
#round-decision .step-label.remedial { color: var(--color-teal-deep); }

/* ===================== GLOSSARY ===================== */

.glossary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
.glossary-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: var(--shadow-card);
}
.glossary-card h3 { font-family: var(--font-display); font-size: 17px; color: var(--color-teal-deep); }
.glossary-card p { color: var(--color-text-muted); font-size: 14px; margin: 0; }
.placeholder-card { opacity: .6; border: 1px dashed var(--color-border); box-shadow: none; }

.glossary-locked { text-align: center; color: var(--color-text-muted); padding: 8px 0; }
.lock-icon { font-size: 26px; margin-bottom: 8px; }
.glossary-locked p { font-size: 13px; }

@keyframes unlock-flash {
  0% { box-shadow: 0 0 0 4px rgba(150, 63, 213, 0.35); }
  100% { box-shadow: var(--shadow-card); }
}
.glossary-card.just-unlocked { animation: unlock-flash 1s ease; }

/* Разблокированная карточка — теперь просто кликабельное название, без стены текста. */
.glossary-unlocked {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.glossary-unlocked h3 { margin: 0; }
.glossary-open-arrow {
  font-size: 18px;
  color: var(--color-primary);
  transition: transform .15s ease;
  flex-shrink: 0;
}
.glossary-unlocked:hover .glossary-open-arrow { transform: translateX(4px); }

/* ===================== СПРАВОЧНИК: СТРАНИЦА ТЕМЫ ===================== */

.back-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  margin-bottom: 20px;
}
.back-button:hover { color: var(--accent-current); }

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.detail-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 22px;
  box-shadow: var(--shadow-card);
}
.detail-card h3 { font-family: var(--font-display); font-size: 16px; margin: 0 0 8px; }
.detail-card p { color: var(--color-text-muted); font-size: 14px; line-height: 1.5; margin: 0; }

/* ===================== CIVIC / COMING SOON ===================== */

.coming-soon {
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: 48px;
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
}
.coming-soon-icon { font-size: 40px; margin-bottom: 12px; }
.coming-soon p { color: var(--color-text-muted); }

/* ===================== PROFILE ===================== */

.profile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}
.profile-stat {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 28px;
  text-align: center;
  box-shadow: var(--shadow-card);
}
.profile-stat-value { font-family: var(--font-display); font-size: 32px; font-weight: 700; color: var(--color-primary); }
.profile-stat-label { color: var(--color-text-muted); font-size: 14px; margin-top: 4px; }

/* ===================== SETTINGS ===================== */

.settings-block {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 24px;
  box-shadow: var(--shadow-card);
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.settings-row:not(:last-child) {
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-border);
}
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.settings-label { font-weight: 700; margin-bottom: 4px; }
.settings-hint { color: var(--color-text-muted); font-size: 13px; max-width: 320px; }

.lang-toggle, .theme-toggle, .accent-mode-toggle, .accent-color-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  background: var(--color-bg);
  padding: 4px;
  border-radius: 999px;
}
.theme-toggle, .accent-mode-toggle, .accent-color-toggle { max-width: 260px; }
.lang-toggle { max-width: 100%; }
.lang-btn, .theme-btn, .accent-mode-btn, .accent-color-btn {
  border: none;
  background: transparent;
  font-family: inherit;
  font-weight: 700;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.lang-btn.active, .theme-btn.active, .accent-mode-btn.active, .accent-color-btn.active {
  background: var(--accent-current);
  color: var(--accent-current-text);
}

/* ===================== ABOUT ===================== */

.about-text { max-width: 680px; color: var(--color-text-muted); line-height: 1.6; }

/* ===================== RESPONSIVE ===================== */

@media (max-width: 720px) {
  .site-header { flex-wrap: wrap; height: auto; padding: 12px 16px; gap: 8px; }
  .main-nav { order: 3; width: 100%; justify-content: center; }
  .hero-cards { grid-template-columns: 1fr; }
  .profile-grid { grid-template-columns: 1fr; }
  .training-card { padding: 24px; }
  .settings-row { align-items: flex-start; }
}