/* =========================================================
   Кукуха · Design System
   Единый источник правды для всех экранов приложения.
   Импортируй ОДИН раз в index.html, используй только классы.
   ========================================================= */

:root {
  /* ===== БАЗОВЫЕ ЦВЕТА ===== */
  --kc-bg:               #0f0f1a;                       /* основной фон приложения */
  --kc-bg-elevated:      #1a1b26;                       /* фон карточки/окна поверх bg */
  --kc-surface:          rgba(255,255,255,0.04);        /* стандартный полупрозрачный фон */
  --kc-surface-hover:    rgba(255,255,255,0.07);
  --kc-surface-active:   rgba(255,255,255,0.10);
  --kc-border:           rgba(255,255,255,0.08);        /* рамка по умолчанию */
  --kc-border-strong:    rgba(255,255,255,0.15);        /* рамка для интерактивных */

  /* ===== ТЕКСТ ===== */
  --kc-text:             rgba(255,255,255,0.92);        /* основной */
  --kc-text-dim:         rgba(255,255,255,0.6);         /* вторичный */
  --kc-text-soft:        rgba(255,255,255,0.4);         /* лейблы, подсказки */
  --kc-text-faint:       rgba(255,255,255,0.38);        /* приглушённое — мин. 3:1 на #0f0f1a */

  /* ===== БРЕНД ===== */
  --kc-accent:           #4dd0e1;                       /* основной цвет, действия */
  --kc-accent-soft:      rgba(77,208,225,0.15);
  --kc-accent-glow:      0 0 8px rgba(77,208,225,0.45);
  --kc-warn:             #FF6600;                       /* премиум / критический пропуск */
  --kc-warn-soft:        rgba(255,102,0,0.15);
  --kc-info:             #60a5fa;                       /* увернулся (legacy, не использовать) */
  --kc-positive-legacy:  #4ade80;                       /* legacy зелёный, не использовать */
  --kc-negative-legacy:  #ef4444;                       /* legacy красный, не использовать */

  /* Канонические семантические цвета для метрик игры:
     good — Поймал, mid — Уклон, bad — Задело. Использовать ВЕЗДЕ. */
  --kc-good:             #34d399;
  --kc-mid:              var(--kc-accent);
  --kc-bad:              var(--kc-warn);

  /* Премиум — насыщенный оранж как заливка кнопки «Мои мысли». */
  --kc-premium:          #FF6600;
  --kc-premium-glow:     0 0 18px rgba(255,102,0,0.40);

  /* ГипноФилин — фиолетовый AI-персонаж */
  --kc-gf:               #7c4dff;
  --kc-gf-soft:          rgba(124,77,255,0.10);
  --kc-gf-bd:            rgba(124,77,255,0.35);
  --kc-gf-glow:          0 0 18px rgba(124,77,255,0.45);
  --kc-gf-text:          #a78bfa;
  --kc-gf-grad-from:     #a78bfa;
  --kc-gf-grad-mid:      #7c3aed;
  --kc-gf-grad-to:       #4c1d95;

  /* ===== СЕМАНТИКА МЫСЛЕЙ ===== */
  /* Негативная мысль = красно-оранжевый (как сейчас в коде).            */
  /* Позитивная мысль = акцентный голубой.                                */
  --kc-thought-negative:      #FF6600;
  --kc-thought-negative-soft: rgba(255,102,0,0.10);
  --kc-thought-negative-bd:   rgba(255,102,0,0.30);

  --kc-thought-positive:      var(--kc-accent);
  --kc-thought-positive-soft: rgba(77,208,225,0.10);
  --kc-thought-positive-bd:   rgba(77,208,225,0.30);

  /* ===== ЦВЕТА СОСТОЯНИЙ ===== */
  /* Берутся из config.js каждого состояния. */
  /* Использовать через data-state="..." — см. ниже. */
  --kc-anxiety:          #888888;
  --kc-depression:       #7c3aed;
  --kc-poverty:          #5a4a42;
  --kc-shame:            #4A6B7C;
  --kc-loneliness:       #6B7B9C;
  --kc-resentment:       #8B3A4A;
  --kc-dissatisfaction:  #7A6A1A;
  --kc-envy:             #2D6B2A;
  --kc-selfesteem:       #6B6B78;
  --kc-guilt:            #5C2A2A;
  --kc-anger:            #CC2200;
  --kc-work:             #4A5568;
  --kc-overeating:       #C4855A;
  --kc-grief:            #2A4A7A;
  --kc-laziness:         #8B7D5A;
  --kc-sexuality:        #fb7185;

  /* ===== ПЛАТФОРМЫ ===== */
  --kc-platform-tg:      #29A9EB;                       /* Telegram brand blue */
  --kc-platform-vk:      #0077FF;                       /* VK brand blue */

  /* ===== РАДИУСЫ ===== */
  --kc-r-pill:           50px;                          /* кнопки, пилюли */
  --kc-r-card:           16px;                          /* все контейнеры: карточки, сегментированный, sparkline-блок */
  --kc-r-chip:           8px;                           /* мелкое интерактивное: ячейки календаря, теги внутри карточек */
  --kc-r-circle:         50%;                           /* иконочные кнопки, точки */

  /* ===== ОТСТУПЫ (4-base) ===== */
  --kc-s-1:              4px;
  --kc-s-2:              8px;
  --kc-s-3:              12px;
  --kc-s-4:              16px;
  --kc-s-5:              22px;                          /* стандартный padding карточки */
  --kc-s-6:              28px;
  --kc-s-7:              40px;
  --kc-s-8:              56px;

  /* ===== ШРИФТ И РАЗМЕРЫ ===== */
  --kc-font:             -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --kc-font-display:     "Montserrat Alternates", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --kc-font-mono:        ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --kc-t-xs:             10px;    /* uppercase лейблы */
  --kc-t-sm:             12px;    /* подсказки, метаданные */
  --kc-t-base:           14px;    /* основной текст */
  --kc-t-md:             15px;    /* кнопки, поля */
  --kc-t-lg:             18px;    /* счёт в игре, заметные числа */
  --kc-t-xl:             22px;    /* заголовки экранов */
  --kc-t-hero:           28px;    /* финальный счёт, акценты */
  --kc-t-mega:           80px;    /* hero-цифра (стрик дней) */

  /* ===== ТРЕКИНГ (letter-spacing) ===== */
  --kc-tr-tight:         -0.02em;                       /* большие числа */
  --kc-tr-normal:        0;
  --kc-tr-wide:          0.1em;                         /* кнопки, текст с пробелами */
  --kc-tr-wider:         0.18em;                        /* uppercase лейблы */
  --kc-tr-max:           0.25em;                        /* heroic uppercase */

  /* ===== ДВИЖЕНИЕ ===== */
  --kc-dur-fast:         0.15s;
  --kc-dur:              0.2s;
  --kc-dur-slow:         0.3s;
  --kc-ease:             cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ===== ВЫСОТЫ КАСАНИЯ ===== */
  --kc-tap-min:          44px;                          /* минимум для тапа на мобильнике */
  --kc-tap-icon:         44px;                          /* иконочная кнопка — WCAG 2.5.5 */

  /* ===== КНОПКА .kc-btn ===== */
  --kc-btn-h:            56px;                           /* высота основной кнопки */
  --kc-btn-px:           40px;                           /* горизонтальный padding */
  --kc-btn-size:         16px;                           /* размер шрифта в кнопке */

  /* ===== ШИРИНА ПРИЛОЖЕНИЯ ===== */
  --kc-app-max-w:        430px;                          /* макс. ширина контента, ориентир iPhone Pro Max */
}

/* =========================================================
   Сброс и базовые правила для приложения
   ========================================================= */
.kc-app {
  font-family: var(--kc-font);
  color: var(--kc-text);
  background: var(--kc-bg);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
.kc-app *, .kc-app *::before, .kc-app *::after { box-sizing: border-box; }
/* Все form-элементы наследуют font от .kc-app — никаких системных fallback'ов. */
.kc-app input,
.kc-app button,
.kc-app select,
.kc-app textarea {
  font-family: inherit;
  font-size: inherit;
}

/* =========================================================
   ТИПОГРАФИКА — утилитарные классы
   ========================================================= */
.kc-t-xs    { font-size: var(--kc-t-xs);   line-height: 1.4; }
.kc-t-sm    { font-size: var(--kc-t-sm);   line-height: 1.5; }
.kc-t-base  { font-size: var(--kc-t-base); line-height: 1.5; }
.kc-t-md    { font-size: var(--kc-t-md);   line-height: 1.4; }
.kc-t-lg    { font-size: var(--kc-t-lg);   line-height: 1.3; }
.kc-t-xl    { font-family: var(--kc-font-display); font-size: var(--kc-t-xl);   line-height: 1.2; letter-spacing: var(--kc-tr-wide); text-transform: uppercase; font-weight: 600; }
.kc-t-hero  { font-size: var(--kc-t-hero); line-height: 1.1; font-weight: 500; letter-spacing: var(--kc-tr-tight); }

.kc-label   { font-size: var(--kc-t-xs); letter-spacing: var(--kc-tr-wider); text-transform: uppercase; color: var(--kc-text-soft); font-weight: 500; }
.kc-dim     { color: var(--kc-text-dim); }
.kc-soft    { color: var(--kc-text-soft); }
.kc-t-danger { color: #e06464; }

.kc-num     { font-variant-numeric: tabular-nums; letter-spacing: var(--kc-tr-tight); }
.kc-mono    { font-family: var(--kc-font-mono); font-variant-numeric: tabular-nums; }

/* =========================================================
   КНОПКИ
   .kc-btn (по умолчанию = secondary)
   модификаторы: --primary, --warn, --ghost, --sm, --block
   ========================================================= */
.kc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--kc-s-2);
  min-height: var(--kc-btn-h);
  padding: 0 var(--kc-btn-px);
  background: var(--kc-surface);
  border: 1px solid var(--kc-border-strong);
  border-radius: var(--kc-r-pill);
  color: var(--kc-text);
  font-family: var(--kc-font);
  font-size: var(--kc-btn-size);
  font-weight: 400;
  letter-spacing: var(--kc-tr-wide);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: transform var(--kc-dur) var(--kc-ease),
              background var(--kc-dur),
              border-color var(--kc-dur);
}
.kc-btn:hover    { background: var(--kc-surface-hover); }
.kc-btn:active   { transform: scale(0.97); background: var(--kc-surface-active); }
.kc-btn:disabled,
.kc-btn.is-disabled { opacity: 0.35; pointer-events: none; }

.kc-btn--primary {
  background: var(--kc-accent-soft);
  border-color: rgba(77,208,225,0.3);
  color: var(--kc-accent);
}
.kc-btn--primary:hover  { background: rgba(77,208,225,0.22); }

.kc-btn--warn {
  background: var(--kc-warn-soft);
  border-color: rgba(255,102,0,0.3);
  color: var(--kc-warn);
}
.kc-btn--warn:hover     { background: rgba(255,102,0,0.22); }

.kc-btn--ghost {
  background: transparent;
  border-color: var(--kc-border);
  color: var(--kc-text-dim);
}
.kc-btn--ghost:hover    { background: var(--kc-surface); color: var(--kc-text); }

/* Премиум — насыщенный заливочный оранж. Только для CTA «Мои мысли» / «Премиум». */
.kc-btn--premium {
  background: var(--kc-premium);
  border-color: var(--kc-premium);
  color: #fff;
  font-weight: 500;
  box-shadow: var(--kc-premium-glow);
}
.kc-btn--premium:hover  { background: #FF7720; border-color: #FF7720; }

/* ГипноФилин — фиолетовая заливка + glow. Для CTA «ГипноФилин» / «Магия». */
.kc-btn--gf {
  background: var(--kc-gf);
  border-color: var(--kc-gf);
  color: #fff;
  font-weight: 500;
  box-shadow: var(--kc-gf-glow);
}
.kc-btn--gf:hover  { background: #8f60ff; border-color: #8f60ff; }

.kc-btn--block          { width: 100%; }

.kc-btn--danger {
  background: transparent;
  border-color: rgba(220, 80, 80, 0.5);
  color: #e06464;
  margin-top: 12px;
}
.kc-btn--danger:hover   { background: rgba(220, 80, 80, 0.12); border-color: #e06464; }

.kc-btn--sm {
  min-height: 36px;
  padding: 0 18px;
  font-size: var(--kc-t-sm);
}

/* =========================================================
   КОЛОНКА КНОПОК — единая ширина стопки кнопок ВО ВСЁМ приложении.
   .kc-stack — оборачивает любую вертикальную группу кнопок.
   Везде одинаковая ширина → ни одна кнопка в проекте не отличается.
   ========================================================= */
.kc-stack {
  width: 280px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--kc-s-3);
}

/* =========================================================
   КРУГЛАЯ КНОПКА — для выбора длительности и подобного.
   Диаметр = высоте обычной .kc-btn (--kc-btn-h). Идеальная сетка с pill.
   ========================================================= */
.kc-circle-btn {
  width: var(--kc-btn-h);
  height: var(--kc-btn-h);
  border-radius: 50%;
  background: var(--kc-surface);
  border: 1px solid var(--kc-border-strong);
  color: var(--kc-text-dim);
  font-family: var(--kc-font);
  font-size: 17px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background var(--kc-dur), color var(--kc-dur), transform var(--kc-dur) var(--kc-ease);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.kc-circle-btn:hover  { background: var(--kc-surface-hover); color: var(--kc-text); }
.kc-circle-btn:active { transform: scale(0.94); }
.kc-circle-btn.is-active {
  background: var(--kc-accent-soft);
  border-color: rgba(77,208,225,0.4);
  color: var(--kc-accent);
}
/* Ряд круглых кнопок — равномерно по ширине .kc-stack.
   5 кружков диаметром --kc-btn-h ровно заполняют 280px стопки. */
.kc-circle-row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 0;
}

/* Кнопка, окрашенная под цвет состояния. Пример:
   <button class="kc-btn" data-state="loneliness">Одиночество</button>
   В сочетании с правилами ниже автоматически берёт цвет.            */
.kc-btn[data-state] {
  color: var(--kc-state-fg, var(--kc-text));
  background: color-mix(in srgb, var(--kc-state-color, white) 10%, transparent);
  border-color: color-mix(in srgb, var(--kc-state-color, white) 35%, transparent);
}
.kc-btn[data-state]:hover {
  background: color-mix(in srgb, var(--kc-state-color, white) 16%, transparent);
}

/* Заблокированное состояние (нет премиума) — серый, без цвета тинта, но кликабельное */
.kc-btn[data-state]:disabled,
.kc-btn[data-state].disabled {
  --kc-state-color: transparent;
  background: var(--kc-surface);
  border-color: var(--kc-border);
  color: var(--kc-text-soft);
  opacity: 0.45;
  pointer-events: auto;
  cursor: pointer;
}

/* =========================================================
   ИКОНОЧНАЯ КНОПКА — единственный способ закрыть/вернуться
   .kc-icon-btn (по умолчанию)
   модификаторы: --close (×), --back (←), --plus (+), --more (⋯)
   Размер 36×36, круг, фон полупрозрачный. ВЕЗДЕ одинаково.
   ========================================================= */
.kc-icon-btn {
  width: var(--kc-tap-icon);
  height: var(--kc-tap-icon);
  border-radius: var(--kc-r-circle);
  background: var(--kc-surface-hover);
  border: none;
  color: var(--kc-text-dim);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--kc-dur), transform var(--kc-dur) var(--kc-ease), color var(--kc-dur);
}
.kc-icon-btn:hover   { background: var(--kc-surface-active); color: var(--kc-text); }
.kc-icon-btn:active  { transform: scale(0.93); }
.kc-icon-btn svg     { width: 14px; height: 14px; }
.kc-icon-btn .kc-i   { width: 14px; height: 14px; }
.kc-icon-btn--danger { color: #e06464; border: 1px solid rgba(220, 80, 80, 0.35); }
.kc-icon-btn--danger:hover { background: rgba(220, 80, 80, 0.10); color: #e06464; }

/* =========================================================
   КАРТОЧКА / КОНТЕЙНЕР
   .kc-card — стандартный контейнер с фоном и рамкой
   модификаторы: --inset (без рамки, для вложенных), --flat (без фона)
   ========================================================= */
.kc-card {
  background: var(--kc-surface);
  border: 1px solid var(--kc-border);
  border-radius: var(--kc-r-card);
  padding: var(--kc-s-5);
}
/* Только два варианта плотности. Никаких inline-override. */
.kc-card--tight { padding: var(--kc-s-4); }
.kc-card--inset { background: var(--kc-bg-elevated); }
.kc-card--flat  { background: transparent; border: none; padding: 0; }

/* Шапка карточки (заголовок + меньшая подпись) */
.kc-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--kc-s-3);
}
.kc-card-title  { font-size: var(--kc-t-xs); letter-spacing: var(--kc-tr-wider); text-transform: uppercase; color: var(--kc-text-soft); font-weight: 500; }
.kc-card-meta   { font-size: var(--kc-t-sm); color: var(--kc-text-dim); }

/* =========================================================
   ШАПКА ЭКРАНА
   3 слота: слева (back/close/nothing), центр (title), справа (action/nothing)
   Использовать на каждом экране/оверлее ОДИНАКОВО.
   ========================================================= */
.kc-screen-header {
  display: grid;
  grid-template-columns: var(--kc-tap-icon) 1fr var(--kc-tap-icon);
  align-items: center;
  gap: var(--kc-s-3);
  padding: var(--kc-s-4) var(--kc-s-5);
}
.kc-screen-header .kc-screen-title {
  text-align: center;
  font-family: var(--kc-font-display);
  font-size: var(--kc-t-xl);
  font-weight: 600;
  letter-spacing: var(--kc-tr-wide);
  text-transform: uppercase;
  color: var(--kc-text);
}
.kc-screen-header .kc-slot-empty { visibility: hidden; }

/* =========================================================
   СЕГМЕНТИРОВАННЫЙ ПЕРЕКЛЮЧАТЕЛЬ (Д/Н/М/Г, и т.п.)
   ========================================================= */
.kc-segmented {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--kc-surface);
  border: 1px solid var(--kc-border);
  border-radius: var(--kc-r-card);
}
.kc-segmented button {
  flex: 1;
  min-height: 36px;
  background: transparent;
  border: none;
  color: var(--kc-text-dim);
  font-family: var(--kc-font);
  font-size: var(--kc-t-sm);
  font-weight: 500;
  letter-spacing: var(--kc-tr-wide);
  cursor: pointer;
  border-radius: calc(var(--kc-r-card) - 4px);
  transition: background var(--kc-dur), color var(--kc-dur);
}
.kc-segmented button:hover  { color: var(--kc-text); }
.kc-segmented button.is-active,
.kc-segmented button[aria-selected="true"] {
  background: var(--kc-accent-soft);
  color: var(--kc-accent);
}

/* =========================================================
   ПОЛЕ ВВОДА / СЕЛЕКТ
   ========================================================= */
.kc-input,
.kc-select {
  width: 100%;
  min-height: var(--kc-tap-min);
  padding: 0 22px;
  background: var(--kc-surface);
  border: 1px solid var(--kc-border-strong);
  border-radius: var(--kc-r-pill);
  color: var(--kc-text);
  font-family: var(--kc-font);
  font-size: var(--kc-t-md);
  letter-spacing: var(--kc-tr-wide);
  outline: none;
  transition: border-color var(--kc-dur);
}
.kc-input::placeholder { color: var(--kc-text-soft); }
.kc-input:focus,
.kc-select:focus { border-color: rgba(77,208,225,0.5); }

.kc-select {
  appearance: none; -webkit-appearance: none;
  text-align: center; text-align-last: center;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='rgba(255,255,255,0.5)' d='M1 1l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 20px center;
  cursor: pointer;
}

/* =========================================================
   СТРОКА СПИСКА (внутри .kc-card)
   ========================================================= */
.kc-list-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--kc-s-2) 0;
  border-bottom: 1px solid var(--kc-border);
  font-size: var(--kc-t-base);
}
.kc-list-row:last-child { border-bottom: none; }
.kc-list-row .kc-list-label  { color: var(--kc-text-dim); }
.kc-list-row .kc-list-value  { color: var(--kc-text); font-variant-numeric: tabular-nums; }

/* =========================================================
   ПРОГРЕСС-БАР (тонкий)
   ========================================================= */
.kc-bar {
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}
.kc-bar > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--kc-accent);
}

/* =========================================================
   ТЕГ / ЧИП
   ========================================================= */
.kc-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--kc-s-2);
  padding: 4px 10px;
  background: var(--kc-surface);
  border: 1px solid var(--kc-border);
  border-radius: var(--kc-r-pill);
  font-size: var(--kc-t-xs);
  letter-spacing: var(--kc-tr-wide);
  color: var(--kc-text-dim);
}
.kc-chip .kc-chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--kc-accent);
}

/* =========================================================
   HERO ЦИФРА (большой стрик-счётчик)
   ========================================================= */
.kc-hero {
  text-align: center;
  padding: var(--kc-s-5) 0;
}
.kc-hero-num {
  font-family: var(--kc-font-display);
  font-size: var(--kc-t-mega);
  font-weight: 200;
  line-height: 1;
  letter-spacing: var(--kc-tr-tight);
  color: var(--kc-text);
}
.kc-hero-label {
  display: block;
  margin-top: var(--kc-s-2);
  font-size: var(--kc-t-xs);
  letter-spacing: var(--kc-tr-max);
  text-transform: uppercase;
  color: var(--kc-text-soft);
}

/* =========================================================
   МЕТРИКИ 3-В-РЯД (Поймал / Уклон / Задело)
   .kc-metrics — контейнер-grid
   .kc-metric — карточка
   .kc-metric--good / --mid / --bad — цветовая семантика
   ========================================================= */
.kc-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--kc-s-2);
}
.kc-metric {
  padding: 14px 12px;
  background: var(--kc-surface);
  border: 1px solid var(--kc-border);
  border-radius: var(--kc-r-card);
  text-align: center;
}
.kc-metric .kc-metric-num {
  font-size: var(--kc-t-xl);
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--kc-tr-tight);
  margin: var(--kc-s-2) 0 0;
  font-variant-numeric: tabular-nums;
  color: var(--kc-text);
}
.kc-metric--good .kc-metric-num { color: var(--kc-good); }
.kc-metric--mid  .kc-metric-num { color: var(--kc-mid); }
.kc-metric--bad  .kc-metric-num { color: var(--kc-bad); }

/* =========================================================
   КАРТОЧКА МЫСЛИ (для экрана «Мои мысли»)
   .kc-thought-card[data-type="negative" | "positive"]
   Цвет рамки и точки слева подсвечивает тип.
   ========================================================= */
.kc-thought-card {
  display: flex;
  align-items: center;
  gap: var(--kc-s-3);
  min-height: var(--kc-tap-min);
  padding: 7px 10px 7px 16px;
  background: color-mix(in srgb, var(--kc-thought-color, white) 5%, var(--kc-surface));
  border: 1px solid color-mix(in srgb, var(--kc-thought-color, white) 14%, var(--kc-border));
  border-radius: var(--kc-r-card);
  position: relative;
}
.kc-thought-card[data-type="negative"] { --kc-thought-color: var(--kc-thought-negative); }
.kc-thought-card[data-type="positive"] { --kc-thought-color: var(--kc-thought-positive); }
.kc-thought-card .kc-thought-text {
  flex: 1;
  font-family: var(--kc-font);
  font-size: var(--kc-t-base);
  font-weight: 400;
  color: var(--kc-text);
  line-height: 1.4;
  word-break: break-word;
}
.kc-thought-card .kc-thought-x {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: transparent;
  border: none;
  padding: 0;
  color: var(--kc-text-soft);
  cursor: pointer;
  transition: background var(--kc-dur), color var(--kc-dur);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.kc-thought-card .kc-thought-x:hover { background: var(--kc-surface-active); color: var(--kc-text); }
.kc-thought-card .kc-thought-x {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--kc-text-soft);
  cursor: pointer;
  transition: background var(--kc-dur), color var(--kc-dur);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.kc-thought-card .kc-thought-x:hover { background: var(--kc-surface-active); color: var(--kc-text); }
.kc-thought-card .kc-thought-x svg { width: 12px; height: 12px; }

/* Сегментированный переключатель с цветной семантикой типа мысли */
.kc-segmented--thoughts button[data-type="negative"].is-active {
  background: var(--kc-thought-negative-soft);
  color: var(--kc-thought-negative);
}
.kc-segmented--thoughts button[data-type="positive"].is-active {
  background: var(--kc-thought-positive-soft);
  color: var(--kc-thought-positive);
}

/* =========================================================
   ПОЛНОЭКРАННЫЙ ОВЕРЛЕЙ (.kc-overlay)
   Один контейнер для Статистики, Мыслей, Премиума, Об игре.
   Заполняет всё доступное окно TG mini app.
   Header — sticky сверху, body — скроллится, footer — sticky снизу.
   ========================================================= */
.kc-overlay {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--kc-app-max-w);
  margin-inline: auto;
  height: 100%;
  min-height: 100vh;
  background: var(--kc-bg);
}
.kc-overlay-header {
  flex-shrink: 0;
  background: var(--kc-bg);
  position: sticky;
  top: 0;
  z-index: 5;
}
.kc-overlay-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: var(--kc-s-5);
}
.kc-overlay-body::-webkit-scrollbar { width: 0; }
.kc-overlay-footer {
  flex-shrink: 0;
  background: var(--kc-bg);
  padding: var(--kc-s-3) var(--kc-s-5) var(--kc-s-5);
}

/* =========================================================
   ПОДЛОЖКА ДЛЯ ОВЕРЛЕЕВ (.kc-backdrop)
   Использовать на любом модальном/паузном экране — фон затемняется
   и слегка размывается. ОДИН класс на все оверлеи.
   ========================================================= */
.kc-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15,15,26,0.85);
  /* perf: тяжёлый blur отключён
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  */
  z-index: 999;
}

/* =========================================================
   ИКОНКИ (.kc-i + .kc-i--<name>)
   Размер по умолчанию 16×16, цвет = currentColor.
   Реализованы через CSS mask — никакого SVG-копипаста в разметке.
   Использовать: <span class="kc-i kc-i--close"></span>
   ========================================================= */
.kc-i {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--kc-i-svg) no-repeat center / contain;
          mask: var(--kc-i-svg) no-repeat center / contain;
  flex-shrink: 0;
}
.kc-i--sm { width: 12px; height: 12px; }
.kc-i--lg { width: 20px; height: 20px; }

.kc-i--close { --kc-i-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'><path d='M4 4l8 8M12 4l-8 8'/></svg>"); }
.kc-i--back  { --kc-i-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M10 12L6 8l4-4'/></svg>"); }
.kc-i--fwd   { --kc-i-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M6 4l4 4-4 4'/></svg>"); }
.kc-i--reset { --kc-i-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8a5 5 0 0 1 9-3l1 1M13 3v3h-3'/><path d='M13 8a5 5 0 0 1-9 3l-1-1M3 13v-3h3'/></svg>"); }
.kc-i--plus  { --kc-i-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'><path d='M8 3v10M3 8h10'/></svg>"); }
.kc-i--check { --kc-i-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 8l3 3 5-6'/></svg>"); }
.kc-i--pause { --kc-i-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><rect x='4' y='3' width='3' height='10' rx='1'/><rect x='9' y='3' width='3' height='10' rx='1'/></svg>"); }
.kc-i--info  { --kc-i-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6'><circle cx='8' cy='8' r='6'/><path d='M8 7v4M8 5v.01'/></svg>"); }
.kc-i--lock  { --kc-i-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='7' width='8' height='6' rx='1.2'/><path d='M6 7V5a2 2 0 0 1 4 0v2'/></svg>"); }
.kc-i--more  { --kc-i-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><circle cx='3' cy='8' r='1.3'/><circle cx='8' cy='8' r='1.3'/><circle cx='13' cy='8' r='1.3'/></svg>"); }

/* =========================================================
   ЦВЕТА СОСТОЯНИЙ — data-state="..." 
   Любой элемент с data-state получает переменные:
     --kc-state-color (основной цвет)
     --kc-state-fg    (текст, чуть светлее)
   ========================================================= */
[data-state="anxiety"]        { --kc-state-color: var(--kc-anxiety);        --kc-state-fg: #c5c5c5; }
[data-state="depression"]     { --kc-state-color: var(--kc-depression);     --kc-state-fg: #a78bfa; }
[data-state="poverty"]        { --kc-state-color: var(--kc-poverty);        --kc-state-fg: #b8a89a; }
[data-state="shame"]          { --kc-state-color: var(--kc-shame);          --kc-state-fg: #94b3c4; }
[data-state="loneliness"]     { --kc-state-color: var(--kc-loneliness);     --kc-state-fg: #9eb0d3; }
[data-state="resentment"]     { --kc-state-color: var(--kc-resentment);     --kc-state-fg: #d68795; }
[data-state="dissatisfaction"]{ --kc-state-color: var(--kc-dissatisfaction);--kc-state-fg: #d4c478; }
[data-state="envy"]           { --kc-state-color: var(--kc-envy);           --kc-state-fg: #7dc479; }
[data-state="selfesteem"]     { --kc-state-color: var(--kc-selfesteem);     --kc-state-fg: #b3b3bf; }
[data-state="guilt"]          { --kc-state-color: var(--kc-guilt);          --kc-state-fg: #d68f8f; }
[data-state="anger"]          { --kc-state-color: var(--kc-anger);          --kc-state-fg: #ff7a5c; }
[data-state="work"]           { --kc-state-color: var(--kc-work);           --kc-state-fg: #9fb0c6; }
[data-state="overeating"]     { --kc-state-color: var(--kc-overeating);     --kc-state-fg: #e2b78f; }
[data-state="grief"]          { --kc-state-color: var(--kc-grief);          --kc-state-fg: #8aa6d4; }
[data-state="laziness"]       { --kc-state-color: var(--kc-laziness);       --kc-state-fg: #ccbf95; }
[data-state="sexuality"]      { --kc-state-color: var(--kc-sexuality);      --kc-state-fg: #fda4af; }
[data-state="custom"]         { --kc-state-color: var(--kc-anxiety);        --kc-state-fg: #c5c5c5; }

/* =========================================================
   TOAST-УВЕДОМЛЕНИЯ
   ========================================================= */
.kc-toast-container {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 56px);
  left: 0; right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--kc-s-2);
  padding: var(--kc-s-3);
  z-index: 10000;
  pointer-events: none;
}
.kc-toast {
  max-width: 360px;
  width: 100%;
  padding: var(--kc-s-3) var(--kc-s-4);
  border-radius: var(--kc-r-card);
  font-size: var(--kc-t-base);
  line-height: 1.4;
  color: #fff;
  pointer-events: auto;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity .25s, transform .25s;
  /* perf: тяжёлый blur отключён
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  */
}
.kc-toast--visible { opacity: 1; transform: translateY(0); }
.kc-toast--success { background: rgba(77,208,225,0.88); color: var(--kc-bg); }
.kc-toast--error   { background: rgba(255,102,0,0.92); }
.kc-toast--info    { background: rgba(77,208,225,0.88); color: var(--kc-bg); }
.kc-toast--gf {
  background: linear-gradient(135deg, rgba(30,20,50,0.94), rgba(60,30,100,0.94));
  border: 1px solid var(--kc-gf-bd);
  color: #fff;
}
.kc-toast--gf .kc-toast-title { color: var(--kc-gf-text); font-weight: 500; }

/* =========================================================
   ACTION BAR — выезжающая панель действий снизу
   Появляется по тапу на карточку мысли или диалог.
   ========================================================= */
.kc-action-bar-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 9000;
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
}
.kc-action-bar-scrim.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.kc-action-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 9001;
  background: var(--kc-bg-elevated);
  border-top: 1px solid var(--kc-border-strong);
  border-radius: var(--kc-r-card) var(--kc-r-card) 0 0;
  padding: var(--kc-s-4) var(--kc-s-3) calc(var(--kc-s-4) + env(safe-area-inset-bottom, 0));
  display: flex;
  justify-content: center;
  gap: var(--kc-s-5);
  transform: translateY(100%);
  transition: transform .25s var(--kc-ease);
}
.kc-action-bar.is-visible {
  transform: translateY(0);
}
.kc-action-bar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--kc-text);
  -webkit-tap-highlight-color: transparent;
}
.kc-action-bar-icon {
  width: var(--kc-tap-min);
  height: var(--kc-tap-min);
  border-radius: 50%;
  background: var(--kc-surface);
  border: 1px solid var(--kc-border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, border-color .15s;
}
.kc-action-bar-icon svg { width: 20px; height: 20px; }
.kc-action-bar-item:active .kc-action-bar-icon {
  background: var(--kc-surface-active);
  border-color: var(--kc-border-strong);
}
.kc-action-bar-item--danger:active .kc-action-bar-icon {
  background: rgba(239,68,68,0.2);
  border-color: rgba(239,68,68,0.4);
}
.kc-action-bar-item--danger { color: #ef4444; }
.kc-action-bar-item.is-disabled {
  color: var(--kc-text-faint);
  pointer-events: none;
}
.kc-action-bar-item.is-disabled .kc-action-bar-icon {
  opacity: 0.4;
}
.kc-action-bar-label {
  font-size: 11px;
  color: var(--kc-text-dim);
  white-space: nowrap;
}
.kc-action-bar-item--danger .kc-action-bar-label { color: #ef4444; }
.kc-action-bar-item.is-disabled .kc-action-bar-label { color: var(--kc-text-faint); }

/* =========================================================
   Z-INDEX — семантическая шкала
   Не использовать магические числа напрямую.
   ========================================================= */
:root {
  --kc-z-base:         1;
  --kc-z-sticky:       10;
  --kc-z-dropdown:     30;
  --kc-z-modal-bg:     100;
  --kc-z-modal:        200;
  --kc-z-toast:        300;
  --kc-z-onboard:      400;
}

/* =========================================================
   REDUCED MOTION — глобальный сброс анимаций
   Уважаем системную настройку «Уменьшить движение».
   Игровая механика (Canvas) не затрагивается.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .kc-app *,
  .kc-app *::before,
  .kc-app *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}