/*
 * Тема: "деньги / успех / мастермайнд" — почти-чёрный фон + лаймовый акцент.
 * Визуальный язык портирован из abundance-v1-dashboard.jsx (референс дизайна,
 * НЕ код-зависимость — React/framer-motion/lucide туда не идут, см. описание
 * задачи): палитра, форма карточек (rounded-3xl), motion feel.
 * Никакого teak wood (см. MINI_APP.md).
 *
 * Переменные --tg-* переопределяются в рантайме из Telegram.WebApp.themeParams
 * (app.js) — это единственный механизм адаптации под тему клиента, он не
 * тронут этим редизайном. Значения ниже — дефолт/фолбэк для запуска вне
 * Telegram и для полей темы, которые Telegram не прислал.
 * --color-lime/--color-green — фиксированный бренд-акцент референса, НЕ
 * переопределяется темой Telegram (orbs, аватары персонажей, прогресс-бар —
 * не входят в понятие "тема клиента" у Telegram, поэтому остаются константой
 * бренда, как и в самом референсе).
 */
:root {
  --tg-bg-color: #0a0a0a;
  --tg-secondary-bg-color: #1f1f1f;
  --tg-text-color: #f5f5f5;
  --tg-hint-color: #9ca3af;
  --tg-link-color: #c4f24c;
  --tg-button-color: #c4f24c;
  --tg-button-text-color: #0a0a0a;

  --color-lime: #c4f24c;
  --color-green: #4ade80;
  --color-card-2: #262626;
  --color-danger: #f87171;
  --color-success: #4ade80;
  --color-border: rgba(255, 255, 255, 0.07);

  --radius-3xl: 24px;
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-full: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* Общая "фирменная" кривая плавности — тот же easing, что и стаггер-энтранс
     в референсе (framer-motion easing [0.22,1,0.36,1]). */
  --ease-brand: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* Плавное затухание без отскока — Robert Penner's easeOutExpo. Для действий,
     которые не являются событием-подтверждением (в отличие от чекбоксов и
     вспышки стрика, где spring/bounce намеренно оставлен как сигнал "что-то
     произошло"). */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--tg-bg-color);
  color: var(--tg-text-color);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* --- Иконки: геометрия задаётся в <symbol>, цвет/обводка — здесь через
   currentColor (наследуется от родителя). --- */
.icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--fill {
  fill: currentColor;
  stroke: none;
}

/* --- Фоновые размытые "orbs" — декоративный слой, за контентом, не мешает кликам. --- */
.ambient-glow {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.ambient-glow__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.22;
}

.ambient-glow__orb--lime-1 {
  width: 260px;
  height: 260px;
  top: -60px;
  left: -80px;
  background: var(--color-lime);
}

.ambient-glow__orb--green {
  width: 300px;
  height: 300px;
  top: 30%;
  right: -100px;
  background: var(--color-green);
  opacity: 0.18;
}

.ambient-glow__orb--lime-2 {
  width: 240px;
  height: 240px;
  bottom: -40px;
  left: 20px;
  background: var(--color-lime);
  opacity: 0.16;
}

/* Всё содержимое поверх orbs */
.telegram-warning,
.app-header,
.tab-content,
.tab-bar {
  position: relative;
  z-index: 1;
}

.telegram-warning {
  background: rgba(196, 242, 76, 0.1);
  color: var(--color-lime);
  font-size: 13px;
  padding: var(--space-2) var(--space-4);
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}

.app-header {
  padding: var(--space-5) var(--space-4) var(--space-3);
}

.app-header__eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tg-hint-color);
  margin-bottom: 2px;
}

.app-header__title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--tg-text-color);
}

.tab-content {
  padding: 0 var(--space-4) var(--space-6);
}

.tab-panel[hidden] {
  display: none;
}

/* Состояния загрузки / ошибки — общие для всех табов */
.panel-state {
  color: var(--tg-hint-color);
  padding: var(--space-6) 0;
  text-align: center;
  font-size: 14px;
}

.panel-state[hidden] {
  display: none;
}

.panel-state--error {
  color: var(--color-danger);
}

/* --- Базовая карточка: rounded-3xl, тёмная поверхность --- */
.card {
  background: var(--tg-secondary-bg-color);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-3xl);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.card__title {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tg-hint-color);
  margin: 0 0 var(--space-3);
}

.card__hint {
  color: var(--tg-hint-color);
  font-size: 13px;
  margin: 0 0 var(--space-3);
}

.section-title {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tg-hint-color);
  margin: var(--space-5) 0 var(--space-3);
}

/* --- Прогресс: hero-карточка цели (Definite Chief Aim) --- */
.card--hero {
  padding: var(--space-5);
}

.goal-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.goal-card__badge {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-lime);
}

.goal-card__icon {
  color: var(--color-lime);
}

.goal-card__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.goal-card__edit {
  background: none;
  border: none;
  padding: 4px;
  display: inline-flex;
  color: var(--tg-hint-color);
  cursor: pointer;
}

.goal-card__edit:active {
  color: var(--color-lime);
}

.goal-card__edit .icon {
  width: 17px;
  height: 17px;
}

.goal-title {
  font-size: 19px;
  font-weight: 700;
  margin: 0 0 var(--space-3);
  color: var(--tg-text-color);
}

.goal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.goal-meta__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.goal-meta__label {
  font-size: 12px;
  color: var(--tg-hint-color);
}

.goal-meta__value {
  font-size: 19px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--tg-text-color);
}

.goal-empty {
  color: var(--tg-hint-color);
  font-size: 14px;
  margin: 0;
}

/* Прогресс-бар по сроку (честная метрика — доля времени до дедлайна, а не
   выдуманный % выполнения суммы, которую API не отдаёт). */
.progress-bar {
  width: 100%;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--tg-bg-color);
  overflow: hidden;
}

.progress-bar__fill {
  /* Ширина = сама метрика (задаётся один раз через inline style в app.js,
     не анимируется — анимируется reveal через transform: scaleX ниже, это
     не триггерит layout, в отличие от анимации width). */
  height: 100%;
  width: 100%;
  border-radius: var(--radius-full);
  background: var(--color-lime);
  transform: scaleX(0);
  transform-origin: left;
}

.progress-bar__caption {
  font-size: 12px;
  color: var(--tg-hint-color);
  margin: var(--space-2) 0 0;
}

/* --- Прогресс: стрики --- */
.streak-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.streak-card {
  background: var(--tg-secondary-bg-color);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-3xl);
  padding: var(--space-4);
}

.streak-card--broken {
  border-color: rgba(248, 113, 113, 0.35);
}

/* План намеренно НЕ получает этот класс (см. renderStreaks в app.js) — его
   карточка визуально идентична остальным, просто без курсора/обработчика
   клика (осознанное ограничение батча, план откладывается на отдельный
   батч из-за ownership-guard миграции для plan_items). */
.streak-card--clickable {
  cursor: pointer;
}

.streak-card--clickable:active {
  border-color: var(--color-lime);
}

.streak-card__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--tg-hint-color);
  margin-bottom: var(--space-3);
}

.streak-card__label .icon {
  width: 16px;
  height: 16px;
  color: var(--color-lime);
}

.streak-card__current {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 28px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--tg-text-color);
}

.streak-card__current.is-broken {
  color: var(--color-danger);
}

.streak-card__flame {
  display: inline-flex;
  color: var(--color-lime);
}

.streak-card__current.is-broken .streak-card__flame {
  color: var(--color-danger);
}

.streak-card__flame .icon {
  width: 18px;
  height: 18px;
}

.streak-card__best {
  font-size: 12px;
  color: var(--tg-hint-color);
  margin-top: var(--space-2);
  font-variant-numeric: tabular-nums;
}

.streak-card__broken-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--color-danger);
  margin-top: var(--space-1);
}

.streak-card__broken-badge .icon {
  width: 13px;
  height: 13px;
}

/* --- Дневник --- */
.journal-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.journal-entry {
  background: var(--tg-secondary-bg-color);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-3xl);
  padding: var(--space-4);
}

.journal-entry__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.journal-entry__type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: rgba(196, 242, 76, 0.14);
  color: var(--color-lime);
}

.journal-entry__type .icon {
  width: 14px;
  height: 14px;
}

.journal-entry__type--reflection {
  background: rgba(74, 222, 128, 0.14);
  color: var(--color-green);
}

.journal-entry__date {
  font-size: 12px;
  color: var(--tg-hint-color);
}

.journal-entry__items {
  margin: 0;
  padding-left: 18px;
}

.journal-entry__items li {
  margin-bottom: var(--space-1);
  word-wrap: break-word;
}

.journal-entry__field {
  margin: 0 0 var(--space-2);
  word-wrap: break-word;
}

.journal-entry__field:last-child {
  margin-bottom: 0;
}

.journal-entry__field-label {
  font-size: 12px;
  color: var(--tg-hint-color);
  display: block;
  margin-bottom: 2px;
}

.journal-empty {
  color: var(--tg-hint-color);
  text-align: center;
  padding: var(--space-5) 0;
}

.journal-entry__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.journal-entry__delete {
  background: none;
  border: none;
  padding: 4px;
  display: inline-flex;
  color: var(--tg-hint-color);
  cursor: pointer;
  border-radius: var(--radius-md);
}

.journal-entry__delete .icon {
  width: 16px;
  height: 16px;
}

.journal-entry__delete:active {
  color: var(--color-danger);
}

.journal-load-more {
  display: block;
  width: 100%;
  margin-top: var(--space-2);
}

.journal-load-more[hidden] {
  display: none;
}

.btn--secondary {
  background: var(--color-card-2);
  color: var(--tg-text-color);
}

.btn--secondary:active {
  opacity: 0.85;
}

.textarea {
  display: block;
  width: 100%;
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
  margin-bottom: var(--space-3);
}

/* --- Дневник: floating action button --- */
.fab {
  position: fixed;
  right: var(--space-4);
  bottom: calc(76px + env(safe-area-inset-bottom) + var(--space-4));
  z-index: 15;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-full);
  background: var(--color-lime);
  color: #0a0a0a;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(196, 242, 76, 0.35);
  cursor: pointer;
}

.fab:active {
  opacity: 0.85;
}

.fab .icon {
  width: 24px;
  height: 24px;
}

/* --- Дневник: модалка добавления записи --- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(0, 0, 0, 0.6);
}

.modal-backdrop[hidden] {
  display: none;
}

.modal-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 31;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--tg-secondary-bg-color);
  border: 1px solid var(--color-border);
  border-bottom: none;
  border-top-left-radius: var(--radius-3xl);
  border-top-right-radius: var(--radius-3xl);
  padding: var(--space-5) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom));
}

.modal-sheet[hidden] {
  display: none;
}

.modal-sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.modal-sheet__title {
  font-size: 17px;
  font-weight: 700;
  margin: 0;
}

.modal-sheet__close {
  background: none;
  border: none;
  color: var(--tg-hint-color);
  cursor: pointer;
  display: inline-flex;
  padding: 4px;
}

.journal-modal-picker {
  display: flex;
  gap: var(--space-3);
}

.journal-modal-picker[hidden] {
  display: none;
}

.journal-modal-picker__option {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-card-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-2);
  color: var(--tg-text-color);
  font-size: 13px;
  cursor: pointer;
}

.journal-modal-picker__icon {
  color: var(--color-lime);
}

.journal-modal-picker__icon .icon {
  width: 22px;
  height: 22px;
}

.journal-modal-form[hidden] {
  display: none;
}

/* Реюзается и модалкой цели (goal-form) — общий межстрочный ритм формы
   внутри modal-sheet, не завязан конкретно на тип поля (textarea уже несёт
   свой margin-bottom через .textarea, но <input> — нет, а goal-form состоит
   именно из <input>). */
.journal-modal-form input,
.journal-modal-form textarea {
  margin-bottom: var(--space-3);
}

.journal-modal-form__label {
  display: block;
  font-size: 13px;
  color: var(--tg-hint-color);
  margin-bottom: var(--space-1);
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes modalBackdropIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes modalSheetIn {
    from {
      opacity: 0;
      transform: translateY(100%);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes modalSheetOut {
    from {
      opacity: 1;
      transform: translateY(0);
    }
    to {
      opacity: 0;
      transform: translateY(100%);
    }
  }

  .modal-backdrop.is-visible {
    animation: modalBackdropIn 0.25s var(--ease-out-expo);
  }

  .modal-sheet.is-visible {
    animation: modalSheetIn 0.4s var(--ease-spring);
  }

  /* Закрытие — без bounce (ease-out-expo, не --ease-spring): spring здесь
     зарезервирован за "что-то произошло" (открытие, подтверждение), как и
     везде в проекте (см. .switch.is-bouncing) — закрытие модалки не
     событие-подтверждение, а обычное затухающее движение. Длительность
     (0.3s) совпадает с setTimeout в closeJournalModal (app.js) — hidden
     выставляется JS'ом ровно после того, как эта анимация успевает
     доиграть, иначе [hidden] (display:none) оборвал бы её на первом кадре. */
  .modal-backdrop.is-closing {
    animation: modalBackdropIn 0.3s var(--ease-out-expo) reverse;
  }

  .modal-sheet.is-closing {
    animation: modalSheetOut 0.3s var(--ease-out-expo);
  }
}

/* --- Мастермайнд --- */
/* Живая переписка текущей group-сессии (см. app.js loadMastermindTab) — не
   список карточек по сессиям, как раньше: спека батча 4 говорит о "чате"
   в единственном числе, поэтому вкладка показывает ОДИН текущий диалог, а
   не браузер всех прошлых group/solo-сессий (тот функционал GET
   /api/mastermind-history технически сохраняет, просто эта вкладка теперь
   рендерит только самую свежую group-сессию из его ответа). */
.mastermind-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  /* Клиренс под fixed .mastermind-composer снизу — тот же принцип, что
     body's padding-bottom под таб-бар. */
  padding-bottom: 190px;
}

.mastermind-message {
  display: flex;
  gap: var(--space-2);
}

.mastermind-message--user {
  flex-direction: row-reverse;
}

/* Аватар реплики: персонажи совета — лайм-кружок с тёмной иконкой (язык
   референса: тёмная иконка на лайм-плашке), секретарь — инверсия (тёмный
   кружок, лайм-иконка), пользователь — нейтральный. */
.mastermind-message__avatar {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mastermind-message__avatar--persona {
  background: var(--color-lime);
  color: #0a0a0a;
}

.mastermind-message__avatar--moderator {
  background: #0a0a0a;
  color: var(--color-lime);
  border: 1px solid var(--color-border);
}

.mastermind-message__avatar--user {
  background: var(--color-card-2);
  color: var(--tg-hint-color);
}

.mastermind-message__avatar .icon {
  width: 15px;
  height: 15px;
}

.mastermind-message__body {
  min-width: 0;
  max-width: 78%;
  display: flex;
  flex-direction: column;
}

.mastermind-message--user .mastermind-message__body {
  align-items: flex-end;
}

.mastermind-message__speaker {
  font-size: 12px;
  font-weight: 600;
  color: var(--tg-hint-color);
  margin-bottom: 3px;
}

.mastermind-message__bubble {
  display: inline-block;
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--tg-secondary-bg-color);
  border: 1px solid var(--color-border);
  font-size: 14px;
  word-wrap: break-word;
}

.mastermind-message--user .mastermind-message__bubble {
  background: var(--color-lime);
  color: #0a0a0a;
  border-color: transparent;
}

/* Секретарь — итог раунда, не рядовая реплика: акцентная рамка + бейдж
   вместо нейтральной карточки, чтобы взгляд сразу находил вывод, а не читал
   всю переписку заново в поисках синтеза. */
.mastermind-message--moderator .mastermind-message__bubble {
  background: rgba(196, 242, 76, 0.1);
  border-color: var(--color-lime);
}

.mastermind-message__badge {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-lime);
  margin-bottom: 4px;
}

.mastermind-empty {
  color: var(--tg-hint-color);
  text-align: center;
  padding: var(--space-5) 0;
}

/* Индикатор "X думает..." — заменяет собой общий спиннер на весь раунд (см.
   app.js: один персонаж за раз, следующий появляется после ответа/скипа
   предыдущего). Визуально это обычная mastermind-message, просто с
   курсивным placeholder-содержимым вместо реального текста. */
.mastermind-thinking .mastermind-message__bubble {
  color: var(--tg-hint-color);
  font-style: italic;
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes thinkingDot {
    0%,
    100% {
      opacity: 0.3;
    }
    50% {
      opacity: 1;
    }
  }

  .mastermind-thinking__dots span {
    animation: thinkingDot 1.2s ease-in-out infinite;
  }

  .mastermind-thinking__dots span:nth-child(2) {
    animation-delay: 0.2s;
  }

  .mastermind-thinking__dots span:nth-child(3) {
    animation-delay: 0.4s;
  }
}

/* --- Мастермайнд: композер (чипы + инпут + отправка) --- */
.mastermind-composer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(76px + env(safe-area-inset-bottom));
  z-index: 12;
  background: var(--tg-bg-color);
  border-top: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-4);
}

.mastermind-composer__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.persona-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-card-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 6px 12px;
  font-size: 12px;
  color: var(--tg-hint-color);
  cursor: pointer;
}

.persona-chip .icon {
  width: 14px;
  height: 14px;
}

.persona-chip.is-selected {
  background: rgba(196, 242, 76, 0.14);
  border-color: var(--color-lime);
  color: var(--color-lime);
}

.persona-chip:disabled {
  opacity: 0.5;
  cursor: default;
}

.mastermind-composer__row {
  display: flex;
  gap: var(--space-2);
}

.mastermind-composer__send {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
}

.mastermind-composer__send .icon {
  width: 18px;
  height: 18px;
}

/* --- Настройки --- */
.settings-form {
  display: flex;
  gap: var(--space-2);
}

.text-input {
  flex: 1;
  background: var(--tg-bg-color);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--tg-text-color);
  padding: var(--space-3);
  font-size: 15px;
}

.text-input:focus {
  outline: none;
  border-color: var(--color-lime);
}

.btn {
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.btn--primary {
  background: var(--tg-button-color);
  color: var(--tg-button-text-color);
}

.btn--primary:active {
  opacity: 0.85;
}

.btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-border);
}

.toggle-row:first-of-type {
  border-top: none;
}

.toggle-row__label {
  font-size: 14px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 26px;
  flex-shrink: 0;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch__track {
  position: absolute;
  inset: 0;
  background: var(--color-card-2);
  border-radius: var(--radius-full);
  transition: background-color 0.15s ease;
}

.switch__track::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  left: 3px;
  top: 3px;
  background: var(--tg-text-color);
  border-radius: 50%;
  transition: transform 0.15s ease;
}

.switch input:checked + .switch__track {
  background: rgba(196, 242, 76, 0.3);
}

.switch input:checked + .switch__track::before {
  transform: translateX(18px);
  background: var(--color-lime);
}

.switch input:disabled + .switch__track {
  opacity: 0.5;
}

.settings-feedback {
  font-size: 13px;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  margin-top: var(--space-2);
}

.settings-feedback[hidden] {
  display: none;
}

.settings-feedback--ok {
  background: rgba(74, 222, 128, 0.14);
  color: var(--color-success);
}

.settings-feedback--error {
  background: rgba(248, 113, 113, 0.14);
  color: var(--color-danger);
}

/* --- Toast: транзиентное уведомление об успехе, общее для всех табов
   (первый вызывающий — Настройки, см. app.js showToast) --- */
.toast {
  position: fixed;
  left: var(--space-4);
  right: var(--space-4);
  bottom: calc(76px + env(safe-area-inset-bottom) + var(--space-3));
  z-index: 20;
  background: var(--tg-secondary-bg-color);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  font-size: 14px;
  text-align: center;
  color: var(--color-success);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.toast[hidden] {
  display: none;
}

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

@media (prefers-reduced-motion: no-preference) {
  @keyframes toastIn {
    from {
      opacity: 0;
      transform: translateY(12px) scale(0.96);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  .toast.is-visible {
    animation: toastIn 0.4s var(--ease-spring);
  }
}

/* --- Нижний таб-бар со скользящим индикатором активного таба --- */
.tab-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  background: var(--tg-secondary-bg-color);
  border-top: 1px solid var(--color-border);
  padding: 6px var(--space-2) calc(6px + env(safe-area-inset-bottom));
  z-index: 10;
}

/* Плашка позади активного таба — translateX вместо width/padding, чтобы не
   триггерить layout (см. описание задачи). Ширина = 1/4 таб-бара всегда. */
.tab-bar__indicator {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: var(--space-2);
  width: calc((100% - 2 * var(--space-2)) / 4);
  background: var(--color-lime);
  border-radius: var(--radius-lg);
  transform: translateX(0);
  z-index: 0;
}

.tab-bar__item {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: none;
  border: none;
  color: var(--tg-hint-color);
  padding: var(--space-2) 0;
  font-size: 11px;
  cursor: pointer;
  transition: color 0.2s ease;
}

.tab-bar__icon {
  display: flex;
}

.tab-bar__item.is-active {
  color: #0a0a0a;
}

/* --- Motion: entrance-стаггер, анимации по требованию задачи ---
   Базовое (unconditional) состояние — полностью видимо, без transform:
   безопасный дефолт для prefers-reduced-motion и для браузеров без
   поддержки анимации. Сама анимация включается только внутри медиа-запроса
   no-preference ниже. */
.stagger-item {
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes fadeSlideUp {
    from {
      opacity: 0;
      transform: translateY(16px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes pulseLive {
    0%,
    100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.08);
    }
  }

  /* Без промежуточного оверщута (был scale(1.1) на 65%) — сам по себе
     overshoot в кейфрейме даёт "прыжок" независимо от timing-function
     анимации, которой он проигрывается. Монотонный рост 0.55→1 + ease-out-expo
     ниже — это и есть "без bounce" по факту, а не просто смена подписи
     easing-функции. */
  @keyframes trackPop {
    0% {
      transform: scale(0.55);
      opacity: 0.45;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

  .stagger-item {
    opacity: 0;
    transform: translateY(16px);
    animation: fadeSlideUp 0.45s var(--ease-brand) forwards;
    animation-delay: var(--stagger-delay, 0ms);
  }

  .progress-bar__fill {
    transition: transform 0.8s var(--ease-brand);
  }

  .tab-bar__indicator {
    transition: transform 0.35s var(--ease-brand);
  }

  /* Пульсирует только флейм-иконка того стрика, который сейчас "горячее"
     всех остальных (см. комментарий у determineLiveStreak в app.js) —
     аналог пульсирующей кнопки Play в референсе, только это read-only
     индикатор, а не элемент управления. */
  .streak-card__flame.is-live .icon {
    animation: pulseLive 1.8s ease-in-out infinite;
  }

  .switch.is-bouncing .switch__track {
    /* Toggle — частое механическое действие, а не событие-подтверждение,
       поэтому здесь плавное затухание, а не spring/bounce (см. --ease-spring
       в :root — там же поясняется, почему прыжок сохранён на других
       элементах). */
    animation: trackPop 0.4s var(--ease-out-expo);
  }
}