/* СДВГ Помощник — дизайн-система v1. Мобильный экран — основной сценарий. */

:root {
  /* нейтральные */
  --bg: #f4f2ee;
  --surface: #ffffff;
  --ink: oklch(24% 0.02 250);
  --muted: oklch(58% 0.02 250);
  --line: oklch(90% 0.01 240);

  /* акценты сущностей / разделов */
  --task:   oklch(58% 0.12 250);  /* Захват, задачи */
  --event:  oklch(58% 0.12 60);   /* Планировщик, события */
  --note:   oklch(58% 0.12 165);  /* Заметки */
  --state:  oklch(58% 0.12 350);  /* Календарь, состояния */
  --focus:  oklch(58% 0.12 290);  /* Фокус-сессии */
  --danger: oklch(58% 0.13 25);   /* запись голосом / ошибки / просрочено */

  /* группы полей на подтверждении разбора: одна светлота и насыщенность,
     отличается только hue — ни одна группа не перевешивает соседнюю.
     Светлота ниже акцентов сущностей: цвет тут идёт текстом по белому. */
  --hue-when: oklch(52% 0.10 215);  /* «Когда» — синий */
  --hue-type: oklch(52% 0.10 295);  /* «Тип» — фиолетовый */
  --hue-more: oklch(52% 0.10 65);   /* «Ещё» — янтарный */

  --important: oklch(58% 0.13 45); /* флаг важности (матрица приоритетов) */
  --goal: oklch(58% 0.12 120);        /* микро-цели */
  --achievement: oklch(62% 0.13 85);  /* микро-достижения */

  --accent: oklch(58% 0.12 240);
  --accent-2: oklch(62% 0.12 195);
  --accent-ink: #ffffff;

  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* фирменные градиенты разделов — на весь экран */
  --gradient-capture: linear-gradient(165deg, oklch(74% 0.10 230) 0%, oklch(82% 0.08 195) 45%, oklch(88% 0.07 110) 78%, oklch(90% 0.06 75) 100%);
  --gradient-diary:   linear-gradient(165deg, oklch(80% 0.08 150) 0%, oklch(85% 0.07 175) 45%, oklch(88% 0.06 210) 78%, oklch(89% 0.05 235) 100%);
  --gradient-planner: linear-gradient(165deg, oklch(83% 0.07 85) 0%, oklch(85% 0.06 60) 45%, oklch(86% 0.06 30) 78%, oklch(85% 0.07 340) 100%);
  --gradient-calendar: linear-gradient(165deg, oklch(82% 0.07 340) 0%, oklch(85% 0.06 300) 40%, oklch(88% 0.05 260) 75%, oklch(89% 0.05 220) 100%);
  --gradient-focus:   linear-gradient(165deg, oklch(78% 0.08 280) 0%, oklch(83% 0.07 250) 55%, oklch(88% 0.06 220) 100%);
  --gradient-auth:    linear-gradient(165deg, oklch(76% 0.09 230) 0%, oklch(84% 0.07 190) 55%, oklch(89% 0.06 110) 100%);
  --gradient-cta:     linear-gradient(135deg, oklch(58% 0.12 240), oklch(62% 0.12 195));

  /* возвышение — мягкие цветные тени, не серые */
  --shadow-1: 0 2px 8px oklch(40% 0.05 230 / 0.10);
  --shadow-2: 0 8px 24px oklch(40% 0.08 230 / 0.14);
  --shadow-3: 0 16px 40px oklch(35% 0.08 230 / 0.20);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.45;
}

h1, h2, h3, .heading {
  font-family: "Manrope", "Inter", sans-serif;
  font-weight: 800;
}

/* --- экран: полноэкранный градиент-фон раздела --- */
.screen {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.screen--captures       { background: var(--gradient-capture); }
.screen--entries        { background: var(--gradient-diary); }
.screen--planners       { background: var(--gradient-planner); }
.screen--calendars      { background: var(--gradient-calendar); }
.screen--focus_sessions { background: var(--gradient-focus); }
.screen--auth           { background: var(--gradient-auth); }
.screen--onboardings    { background: var(--gradient-auth); }

.container {
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
  padding: 24px 20px 116px;
  flex: 1;
}
.screen--auth .container { display: flex; flex-direction: column; justify-content: center; padding-top: 10vh; padding-bottom: 10vh; }

h1 { font-size: 22px; margin: 0 0 4px; color: oklch(20% 0.03 250); }
.hint { color: oklch(35% 0.03 250 / 0.75); margin: 0 0 18px; font-size: 13.5px; }

/* --- формы --- */
.input, .capture__input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 13px 14px;
  font-size: 15px;
  font-family: inherit;
  color: var(--ink);
  margin-bottom: 10px;
}
.capture__input { min-height: 150px; resize: vertical; font-size: 15px; box-shadow: var(--shadow-2); border: none; }
.input:focus, .capture__input:focus { outline: none; border: 2px solid var(--task); padding: 12px 13px; }
.capture__input:focus { border: 2px solid var(--task); }
.input::placeholder, .capture__input::placeholder { color: oklch(58% 0.02 250); }

/* --- кнопки --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: var(--radius-pill);
  padding: 13px 22px;
  font-size: 14.5px;
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  cursor: pointer;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  text-decoration: none;
}
.btn--primary { background: var(--gradient-cta); color: var(--accent-ink); border: none; box-shadow: var(--shadow-2); }
.btn:disabled { opacity: 0.45; cursor: default; box-shadow: none; }
.btn--big { width: 100%; padding: 15px; font-size: 15px; }
.btn--ghost { background: transparent; border: none; color: oklch(40% 0.03 250 / 0.8); box-shadow: none; }
.btn--voice { background: var(--surface); border: none; box-shadow: var(--shadow-1); }
.btn.is-recording { background: var(--danger); color: #fff; box-shadow: 0 8px 20px oklch(45% 0.13 25 / 0.35); animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity: .7; } }

.btn__icon { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; display: inline-block; flex: none; }
.is-recording .btn__icon { border-radius: 3px; background: currentColor; }

.icon { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.capture__actions { display: flex; flex-direction: column; gap: 10px; }
.capture__prompt { font-size: 19px; margin: 0 0 4px; }
.capture__greeting { font-size: 12px; color: oklch(30% 0.03 250 / 0.7); margin: 0 0 4px; }

/* --- карточки сущностей --- */
.cards { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; }
.card {
  background: var(--surface);
  border-left: 4px solid var(--muted);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow-1);
}
.card--task  { border-left-color: var(--task); }
.card--event { border-left-color: var(--event); }
.card--note  { border-left-color: var(--note); }
.card--state { border-left-color: var(--state); }
.card--goal  { border-left-color: var(--goal); }
.card--achievement { border-left-color: var(--achievement); }
.card--done .card__title { text-decoration: line-through; opacity: .55; }

.card__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.card__title { margin: 6px 0 2px; font-size: 15px; font-weight: 600; }
.card__body { margin: 4px 0 0; color: var(--muted); font-size: 13.5px; white-space: pre-line; }
.card__time { color: var(--muted); font-size: 12px; }

/* Редактируемый текст разобранной сущности: выглядит как обычный заголовок,
   рамка появляется только при наведении и фокусе — «правь прямо здесь». */
.card__text-form { margin: 6px 0 0; display: flex; flex-direction: column; gap: 4px; }
.card__title-input, .card__body-input {
  width: 100%; font-family: inherit; color: inherit;
  background: transparent; border: 1px solid transparent;
  border-radius: var(--radius); padding: 3px 6px; margin: 0 0 0 -6px;
}
.card__title-input { font-size: 15px; font-weight: 600; }
.card__body-input { font-size: 13.5px; color: var(--muted); resize: vertical; }
.card__title-input:hover, .card__body-input:hover { border-color: var(--line); }
.card__title-input:focus, .card__body-input:focus {
  border-color: var(--task); background: var(--bg); outline: none;
}
.card__scales { margin: 8px 0 0; font-size: 12.5px; display: flex; gap: 14px; color: var(--muted); }
/* Некрупная пометка привязки задачи к цели. */
.card__goal-tag {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--goal);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.card__goal-tag::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--goal);
}
/* Привязка задачи к цели на карточке подтверждения захвата. */
.card__goal-attach { margin: 8px 0 0; display: flex; align-items: center; gap: 8px; }
.card__goal-attach-label { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.card__goal-attach .input { margin: 0; flex: 1; }
.card__reject {
  background: none; border: none; color: var(--muted);
  font-size: 15px; cursor: pointer; padding: 2px 6px; line-height: 1;
}
.card__types, .card__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

.badge {
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  padding: 3px 10px; border-radius: var(--radius-pill); color: #fff; background: var(--muted);
  text-transform: uppercase;
}
.badge--task  { background: var(--task); }
.badge--event { background: var(--event); }
.badge--note  { background: var(--note); }
.badge--state { background: var(--state); }
.badge--important { background: var(--important); text-transform: none; }
.badge--goal { background: var(--goal); }
.badge--achievement { background: var(--achievement); }

.diary__streak { margin: 0 0 10px; font-size: 13px; color: var(--muted); font-weight: 600; }
.diary__goals-today { margin: 0 0 10px; }
/* Цели в общей ленте раздела («Всё»): блок целей перед записями. */
.diary__goals { margin-bottom: 14px; }

.chip {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius-pill);
  padding: 6px 13px;
  font-size: 12.5px;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink);
}
.chip--done { background: var(--note); color: #fff; border: none; }
.chip--add { background: var(--gradient-cta); color: #fff; border: none; }
.chip--muted { color: var(--muted); }
.chip--important { background: var(--important); color: #fff; border: none; }

/* --- перегруз дня (v0.10) --- */
.planner__overload {
  background: var(--surface);
  border: 1px solid var(--important);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin: 12px 0;
  box-shadow: var(--shadow-1);
}
.planner__overload-text { margin: 0 0 8px; font-size: 13.5px; }

.entry-form__flag { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 14px; }

/* --- разбор захвата --- */
.parsing { text-align: center; padding: 96px 0; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.parsing__spinner {
  width: 48px; height: 48px; margin: 0 auto 18px;
  border: 4px solid oklch(100% 0 0 / 0.55); border-top-color: var(--task);
  border-radius: 50%; animation: spin 0.9s linear infinite;
  box-shadow: var(--shadow-2);
}
@keyframes spin { to { transform: rotate(360deg); } }
.parsing__text { color: oklch(30% 0.03 250 / 0.8); font-weight: 600; font-size: 14.5px; }


/* --- дневник --- */
.diary__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.diary__header h1 { margin: 0; }
.diary__header-actions { display: flex; align-items: center; gap: 6px; }

/* --- управление сущностью (изменить / удалить) --- */
.card__manage { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.card__edit {
  color: var(--muted); text-decoration: none; font-size: 14px; line-height: 1;
  padding: 2px 4px;
}
.card__edit:hover { color: var(--ink); }

/* --- исправленный текст захвата --- */
.review__corrected {
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-1);
  padding: 12px 16px; margin-bottom: 14px; font-size: 13.5px;
}
.review__corrected-label {
  font-size: 11.5px; font-weight: 700; color: var(--muted); margin-bottom: 4px;
}

/* --- брифинг --- */
.briefing__counter { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.briefing__counter strong { color: var(--ink); }
.briefing__candidate { display: block; cursor: pointer; }
.briefing__candidate-row { display: flex; align-items: center; gap: 10px; }
.briefing__candidate-row .card__time { margin-left: auto; }
.briefing__checkbox { width: 18px; height: 18px; accent-color: var(--task); flex-shrink: 0; }
.briefing__checkbox:disabled + .card__title { color: var(--muted); }
.briefing__postpone { margin: -6px 0 4px; }
.briefing__skip { margin-top: 10px; }

/* --- рефлексия --- */
.reflection__choices { display: flex; gap: 8px; margin: 8px 0; }
.reflection__choice { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.reflection__choice input { accent-color: var(--task); }
.reflection__note { margin-top: 4px; }
.return-banner--evening { background: oklch(58% 0.12 290 / 0.14); }

/* --- статистика внимания --- */
.stats__periods { margin-bottom: 0; padding-bottom: 0; }
.stats__tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-bottom: 24px; }
.stats__tile {
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-1);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 2px;
}
.stats__tile--score { border-left: 4px solid var(--focus); }
.stats__value { font-family: Manrope, Inter, sans-serif; font-weight: 800; font-size: 22px; }
.stats__label { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.stats__days { display: flex; flex-direction: column; gap: 6px; }
.stats__day { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.stats__day-label { width: 52px; flex-shrink: 0; color: var(--muted); font-weight: 600; }
.stats__day-bar-track { flex: 1; background: var(--surface); border-radius: var(--radius-pill); height: 10px; box-shadow: var(--shadow-1); overflow: hidden; }
.stats__day-bar { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--focus); min-width: 0; }
.stats__day-value { width: 110px; flex-shrink: 0; color: var(--muted); }
.stats__baseline { margin-top: 24px; }

/* --- цели: чек-лист + прогресс-бар --- */
.plan__header-actions { display: flex; gap: 8px; align-items: center; }
.card--goal { display: block; text-decoration: none; color: inherit; }
.goal__description { color: var(--muted); font-size: 14px; margin: 0 0 14px; }
.goal-progress { display: flex; align-items: center; gap: 10px; margin: 4px 0 8px; }
.goal-progress__track {
  flex: 1; height: 10px; background: var(--bg); border-radius: var(--radius-pill);
  overflow: hidden; box-shadow: inset 0 0 0 1px var(--line);
}
.goal-progress__bar {
  display: block; height: 100%; border-radius: var(--radius-pill);
  background: var(--focus); min-width: 0; transition: width 0.3s ease;
}
.goal-progress__label { font-size: 12.5px; font-weight: 600; color: var(--muted); flex-shrink: 0; }
.goal__done-banner {
  background: oklch(85% 0.11 150 / 0.35); border-radius: var(--radius);
  padding: 10px 14px; font-size: 13.5px; font-weight: 600; margin: 12px 0;
}
.goal__add-task { display: flex; gap: 8px; margin: 16px 0; }
.goal__add-task .input { flex: 1; }
.goal__footer { margin-top: 24px; }

/* --- дайджест начала дня + рекомендация --- */
.digest {
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-1);
  padding: 16px; margin-bottom: 18px;
}
.digest__advice { border-radius: var(--radius-sm); padding: 11px 14px; margin-bottom: 14px; }
.digest__advice-text { margin: 0; font-size: 14px; font-weight: 600; }
.digest__advice--keep { background: oklch(58% 0.12 250 / 0.12); }
.digest__advice--improve { background: oklch(80% 0.13 85 / 0.28); }
.digest__advice--rest { background: oklch(70% 0.11 25 / 0.20); }
.digest__cols { display: flex; gap: 14px; flex-wrap: wrap; }
.digest__col { flex: 1; min-width: 130px; }
.digest__col-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 0 0 6px; }
.digest__line { margin: 2px 0; font-size: 13px; color: var(--ink); }
.digest__capacity-all { margin: 14px 0 0; font-size: 13px; font-weight: 600; color: var(--focus); }

/* --- калибровка и качество --- */
.focus__calibration {
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-2);
  padding: 16px; margin-bottom: 18px;
}
.focus__calibration-title { font-weight: 700; margin-bottom: 4px; }
.focus__quality { font-size: 13.5px; font-weight: 600; color: var(--focus); margin: 10px 0; }

.focus__header-links { display: flex; gap: 6px; align-items: center; }

/* --- Умный «Фокус»: подсказка по остатку дня --- */
.focus__remainder {
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 18px;
  background: var(--surface); box-shadow: var(--shadow-2);
  border-left: 4px solid var(--focus);
}
.focus__remainder--overload { border-left-color: var(--important); }
.focus__remainder--tight    { border-left-color: var(--event); }
.focus__remainder--relaxed  { border-left-color: var(--note); }
.focus__remainder-tip { margin: 0; font-weight: 700; font-size: 14.5px; line-height: 1.4; }
.focus__remainder-facts { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }

/* --- Оценка длительности задачи: чипы-переключатели (чистый CSS, без JS) --- */
.estimate-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.estimate-chips__opt { cursor: pointer; }
.estimate-chips__opt input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.estimate-chips__opt .chip { cursor: pointer; }
.estimate-chips__opt input:checked + .chip { background: var(--important); color: #fff; border-color: transparent; }
.estimate-chips__opt input:focus-visible + .chip { outline: 2px solid var(--focus); outline-offset: 2px; }

/* --- Настройки --- */
.settings__card {
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-2);
  padding: 16px; margin-top: 12px;
}
.work-day-form__row { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0 14px; }
.work-day-form__field { flex: 1 1 120px; }

/* --- Telegram --- */
.telegram__code {
  font-size: 18px; font-weight: 700; margin: 10px 0;
  background: var(--bg); border-radius: var(--radius-sm); padding: 10px 14px;
  user-select: all;
}

/* --- форма сущности --- */
.entry-form { display: flex; flex-direction: column; gap: 10px; }
.entry-form__scales { display: flex; flex-direction: column; gap: 10px; }
.entry-form__actions { display: flex; gap: 8px; margin-top: 6px; }
.tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 14px; }
.tab {
  white-space: nowrap; text-decoration: none; color: oklch(40% 0.02 250);
  background: var(--surface); box-shadow: var(--shadow-1);
  border-radius: var(--radius-pill); padding: 7px 15px; font-size: 12.5px; font-weight: 600;
}
.tab.is-active { background: oklch(22% 0.02 250); color: #fff; }
.diary__empty { color: oklch(35% 0.03 250 / 0.7); text-align: center; padding: 64px 20px; font-size: 13.5px; }
.diary__search { margin-bottom: 10px; }
.diary__empty-icon {
  width: 56px; height: 56px; border-radius: 50%; background: var(--surface);
  box-shadow: var(--shadow-2); margin: 0 auto 14px;
}
.diary__empty-title { font-weight: 700; color: oklch(30% 0.03 250 / 0.85); margin-bottom: 6px; }

/* --- навигация --- */
.bottom-nav {
  position: fixed; bottom: 18px; left: 16px; right: 16px;
  display: flex; justify-content: space-around; align-items: stretch;
  background: var(--surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  padding: 8px max(4px, env(safe-area-inset-left)) max(8px, env(safe-area-inset-bottom));
  max-width: 480px; margin: 0 auto;
}
.bottom-nav__item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 10.5px; font-weight: 700; color: var(--muted); text-decoration: none;
  background: none; border: none; font-family: inherit; cursor: pointer;
  flex: 1; padding: 4px 2px;
}
.bottom-nav__item .icon { width: 19px; height: 19px; }
.bottom-nav__item.is-active--task  { color: var(--task); }
.bottom-nav__item.is-active--event { color: var(--event); }
.bottom-nav__item.is-active--note  { color: var(--note); }
.bottom-nav__item.is-active--state { color: var(--state); }
.bottom-nav__item.is-active--focus { color: var(--focus); }
.bottom-nav form { display: contents; }

/* Фокус — центральный пункт навигации, выделен круглой обводкой */
.bottom-nav__focus-ring {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-top: -20px;
  border: 2px solid var(--focus); border-radius: 50%;
  background: var(--surface); box-shadow: var(--shadow-1);
}
.bottom-nav__item--focus { color: var(--focus); }
.bottom-nav__item--focus .icon { width: 21px; height: 21px; }

/* --- прочее --- */
.flash {
  border-radius: var(--radius); padding: 11px 15px; margin-bottom: 14px; font-size: 13.5px;
  box-shadow: var(--shadow-1);
}
.flash--notice { background: #fff; color: oklch(40% 0.10 165); }
.flash--alert { background: #fff; color: oklch(45% 0.13 25); }

.auth { width: 100%; }
.auth__card {
  background: var(--surface); border-radius: var(--radius);
  box-shadow: var(--shadow-2); padding: 20px; display: flex; flex-direction: column; gap: 10px;
}
.auth__form { display: flex; flex-direction: column; }
.auth__link { margin-top: 18px; font-size: 13px; text-align: center; color: oklch(32% 0.03 250 / 0.8); }
.auth__link a { color: oklch(24% 0.03 250); font-weight: 700; }

/* Версия сборки в подвале экранов входа: служебная пометка, поэтому мельче
   и тише всего остального на экране. */
.app-version { margin: 0 0 14px; text-align: center; font-size: 11px; color: var(--muted); }
.auth__label { font-size: 11.5px; font-weight: 700; color: var(--muted); margin: 4px 0 -2px; }
.auth__remember {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--muted); margin: 8px 0 4px;
}
.auth__remember input { accent-color: var(--accent); width: 16px; height: 16px; }

/* --- план дня --- */
.return-banner {
  display: block;
  background: var(--gradient-cta);
  color: #fff;
  text-decoration: none;
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}
.plan__subtitle { font-size: 15px; font-weight: 700; margin: 22px 0 8px; }
.plan__candidate .card__title { font-size: 14px; }
.plan__thinking { color: var(--muted); font-style: italic; }
.plan__add {
  border: 1.5px dashed oklch(55% 0.04 60 / 0.5); border-radius: var(--radius);
  padding: 12px 14px; text-align: center; font-size: 12.5px; color: oklch(35% 0.04 60 / 0.7);
  background: transparent;
}

/* --- календарь планировщика --- */
.date-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.date-chips__current { font-size: 12.5px; color: var(--ink); }
.date-chips__ask { font-size: 12.5px; color: var(--event); font-weight: 700; }
.date-chips__form { display: flex; gap: 6px; }
.date-chips__input {
  border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 5px 9px;
  font-size: 11.5px; font-family: inherit; background: var(--bg); color: var(--muted);
  width: 130px;
}
/* Время рядом с датой — уже, чем дата: часы и минуты. */
.date-chips__input--time { width: 84px; }
.planner__overdue { color: oklch(50% 0.13 25); }
/* Просрочено в Плане — визуально отдельно от фокусов дня (v0.9). */
.planner__overdue-block {
  margin-top: 28px;
  padding: 4px 14px 14px;
  border: 1px solid oklch(58% 0.13 25 / 0.35);
  border-radius: var(--radius);
  background: oklch(58% 0.13 25 / 0.05);
}
.planner__overdue-block .plan__subtitle { margin-top: 14px; }
.planner__horizon { margin-top: 24px; }

/* --- фокус-сессии --- */
.focus__session { text-align: center; padding: 12px 0; }
.focus__timer {
  font-size: 4.2rem; font-family: "Manrope", sans-serif; font-weight: 800; font-variant-numeric: tabular-nums;
  margin: 12px 0 20px; letter-spacing: .02em; color: oklch(20% 0.03 250);
}
.focus--overtime .focus__timer { color: oklch(50% 0.13 25); }
.focus--rest .focus__timer { color: var(--note); }
.focus__red-button {
  width: 100%; max-width: 300px; padding: 26px 20px;
  border: none; border-radius: 50%; aspect-ratio: 1;
  background: radial-gradient(circle at 35% 30%, oklch(65% 0.15 25), oklch(48% 0.14 25));
  color: #fff; font-size: 15px; font-weight: 700; font-family: "Manrope", sans-serif;
  cursor: pointer; box-shadow: 0 10px 26px oklch(45% 0.13 25 / 0.35);
  margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  transition: transform .1s;
}
.focus__red-button:active, .focus__red-button.is-caught { transform: scale(.94); }
.focus__red-icon { width: 30px; height: 30px; stroke: #fff; }
.focus__counter { color: oklch(35% 0.03 250 / 0.75); margin: 16px 0 0; font-size: 13.5px; }
.focus__counter strong { color: var(--ink); font-size: 1.2rem; font-family: "Manrope", sans-serif; }
.focus__actions { display: flex; justify-content: center; gap: 10px; margin-top: 22px; }
.focus__starts { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
.focus__rest-offer {
  background: var(--surface); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 16px;
  box-shadow: var(--shadow-1);
}
.focus__stat-line { color: oklch(35% 0.03 250 / 0.75); font-size: 13.5px; display: flex; gap: 10px; flex-wrap: wrap; }
.focus__stat-line span:not(:last-child)::after { content: "·"; margin-left: 10px; color: var(--line); }
/* Фокус = время + задача */
.focus__start-form { margin: 14px 0; }
.focus__task-label { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.focus__task-select {
  width: 100%; padding: 11px 13px; font-size: 15px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}
.focus__task-current { font-size: 14px; color: var(--muted); margin: 4px 0 8px; }
.focus__task-current strong { color: var(--ink); }
.focus__task-done-offer {
  background: var(--surface); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 16px;
  box-shadow: var(--shadow-1);
}
.focus__task-done-offer p { margin: 0 0 10px; font-size: 14px; }

/* --- выбор задачи в фокус (экран «Фокус») --- */
.focus__pick { margin-top: 24px; }
.card__meta { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; }

/* --- календарь: месячная сетка --- */
.calendar__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.calendar__month-name { font-size: 17px; margin: 0; text-transform: capitalize; }
.calendar__nav {
  text-decoration: none; color: oklch(30% 0.03 250 / 0.7); font-size: 20px;
  padding: 4px 14px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-1);
}
.calendar__grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
  background: var(--surface);
  border-radius: var(--radius); padding: 10px; box-shadow: var(--shadow-2);
}
.calendar__weekday { text-align: center; font-size: 11px; color: var(--muted); padding: 2px 0; font-weight: 600; }
.calendar__day {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-height: 42px; padding: 4px 0; border-radius: var(--radius-sm);
  text-decoration: none; color: var(--ink); font-size: 13px;
}
.calendar__day--other { color: var(--line); }
.calendar__day--today .calendar__day-num { font-weight: 700; color: var(--state); }
.calendar__day--selected { background: var(--state); }
.calendar__day--selected .calendar__day-num,
.calendar__day--selected .calendar__dot { color: #fff; }
.calendar__dot {
  font-size: 10px; font-weight: 700; color: var(--task);
  background: oklch(58% 0.12 250 / 0.12); border-radius: var(--radius-pill); padding: 0 6px;
}
.calendar__day--selected .calendar__dot { background: oklch(100% 0 0 / 0.25); }
.calendar__dot--done { color: var(--note); background: oklch(58% 0.12 165 / 0.12); }
/* Блоки дня («Сегодня»/выбранная дата) и «На потом» на экране «Календарь» — обводка
   и явный заголовок, в один визуальный ряд с «Просрочено» в Плане (v0.9). */
.calendar__section {
  margin-top: 22px;
  padding: 4px 14px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.calendar__section .plan__subtitle { margin-top: 14px; }
.calendar__show-more { margin-top: 12px; }

.calendar__feed { margin-top: 22px; }
.calendar__feed-url {
  display: block; word-break: break-all; font-size: 11.5px;
  background: var(--surface); border-radius: var(--radius);
  padding: 10px 12px; user-select: all; box-shadow: var(--shadow-1);
}

/* ================================================================
   Шаги задачи: предложение разбора, редактор чек-листа, чек-лист в
   Плане/Фокусе (раздел 7.3 роадмапа).
   ================================================================ */

/* Предложение — одна компактная строка, не перетягивает внимание с карточки. */
.steps-offer { display: flex; align-items: center; gap: 4px; margin-top: 10px; }
.steps-offer__button {
  border: 1px dashed var(--task);
  background: transparent;
  color: var(--task);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.steps-offer__dismiss {
  background: none; border: none; color: var(--muted);
  font-size: 13px; line-height: 1; cursor: pointer; padding: 4px 6px;
}

/* Редактор: развёрнутое предложение прямо в карточке задачи. */
.steps { margin-top: 12px; }
.steps__head {
  margin: 0 0 6px; font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em; color: var(--muted);
}
.steps__list { list-style: none; counter-reset: step; margin: 0; padding: 0; }
.steps__item { display: flex; align-items: flex-start; gap: 4px; margin-bottom: 2px; }
.steps__item::before {
  counter-increment: step;
  content: counter(step);
  flex: 0 0 auto;
  margin-top: 6px;
  width: 18px; height: 18px; border-radius: 50%;
  background: oklch(58% 0.12 250 / 0.12); color: var(--task);
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.steps__form { flex: 1; min-width: 0; }
.steps__input {
  width: 100%; font-family: inherit; font-size: 13.5px; line-height: 1.35; color: inherit;
  background: transparent; border: 1px solid transparent;
  border-radius: var(--radius-sm); padding: 5px 6px;
  /* Поле растёт под текст шага: длинная формулировка не обрезается. */
  field-sizing: content; resize: none; overflow: hidden;
}
.steps__input:hover { border-color: var(--line); }
.steps__input:focus { border-color: var(--task); background: var(--bg); outline: none; }
.steps__remove {
  background: none; border: none; color: var(--muted);
  font-size: 13px; line-height: 1; cursor: pointer; padding: 4px 6px;
}
.steps__add { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.steps__add .steps__input { border-color: var(--line); border-style: dashed; }
.steps__limit { margin: 6px 0 0; }

/* Чек-лист в Плане и Фокусе: отметил шаг — он исчез. */
.checklist { margin: 8px 0 0; }
.checklist__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.checklist__item { display: flex; align-items: center; gap: 8px; }
.checklist__check {
  flex: 0 0 auto;
  width: 22px; height: 22px; padding: 0;
  border: 1.5px solid var(--line); border-radius: 50%;
  background: var(--surface); color: transparent;
  font-size: 12px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.checklist__check:hover { border-color: var(--note); color: var(--note); }
.checklist__text { font-size: 13.5px; line-height: 1.35; overflow-wrap: anywhere; }
.checklist__all-done { margin: 0; font-size: 13px; color: var(--note); font-weight: 600; }
.checklist__progress { margin: 6px 0 0; font-size: 11.5px; color: var(--muted); }

/* Чек-лист внутри активной фокус-сессии — на цветном фоне, крупнее. */
.focus__session .checklist { margin: 4px 0 12px; text-align: left; }
.focus__session .checklist__text { font-size: 14px; }

/* Своё время в «Фокусе»: раскрывашка под пресетами. Пресеты остаются
   главным путём, поэтому блок нейтральный и не перетягивает внимание. */
.focus__custom { margin-top: 12px; text-align: left; }
.focus__custom > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 13.5px/1 "Manrope", sans-serif; color: var(--focus);
  padding: 8px 0;
}
.focus__custom > summary::-webkit-details-marker { display: none; }
.focus__custom-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.focus__custom-input {
  width: 72px; text-align: center;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink);
  padding: 10px 8px; font: 500 15px/1 inherit;
}
.focus__custom-input:focus { outline: none; border-color: var(--focus); }
.focus__custom-sep { font-size: 13.5px; color: var(--muted); }
.focus__custom-hint { margin: 8px 0 0; }

/* Редактор шагов на экране правки задачи — отдельная карточка под формой. */
.entry-form-steps { margin-top: 14px; }

/* ================================================================
   Подтверждение разбора захвата: строки слева, инспектор справа.
   Строка отвечает на «что получилось» (заголовок + сводка словами),
   инспектор — на «поправь». Правится всегда одна выбранная строка:
   на широком экране инспектор стоит колонкой во всю высоту, на телефоне
   раскрывается прямо под своей строкой (та же разметка, без дублей).
   Цвет группы повторяется трижды — в подписи, в выбранном чипе и в слове
   сводки, — поэтому «сегодня» в сводке связывается с блоком «Когда» без
   чтения. Цвет никогда не единственный признак: рядом всегда подпись
   группы и рамка выбранного.
   ================================================================ */

.review__panes { display: flex; flex-direction: column; gap: 12px; }
.review__main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.review__head { display: flex; flex-direction: column; }
.review__head .hint { margin-bottom: 0; }

/* --- строка разбора --- */
.review-row {
  position: relative;
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--surface); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--shadow-1);
}
.review-row__spine {
  flex: none; width: 9px; height: 32px; border-radius: 5px; display: block;
  background: linear-gradient(180deg, var(--muted), var(--hue-when));
}
.review-row__spine--task  { background: linear-gradient(180deg, var(--task), var(--hue-when)); }
.review-row__spine--event { background: linear-gradient(180deg, var(--event), var(--hue-when)); }
.review-row__spine--note  { background: linear-gradient(180deg, var(--note), var(--hue-when)); }
.review-row__spine--state { background: linear-gradient(180deg, var(--state), var(--hue-when)); }
.review-row__text { flex: 1; min-width: 0; }
/* Поля лежат выше накрывающей строку ссылки — текст остаётся правимым. */
.review-row__text .card__text-form { position: relative; z-index: 1; margin-top: 0; }
.review-row__reject { position: relative; z-index: 1; }

/* Сводка — она же цель клика по всей строке. */
.review-row__summary {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin: 4px 0 0 -6px;
  font-size: 13px; font-weight: 500;
  text-decoration: none; color: inherit;
}
.review-row__summary::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.review-row__dot { color: oklch(24% 0.02 250 / 0.3); }
.review-row__word--when { color: var(--hue-when); }
.review-row__word--type { color: var(--hue-type); }
.review-row__word--more { color: var(--hue-more); }
/* Нерешённое «Когда?» — единственное место, где сводка кричит. */
.review-row__word--ask { color: var(--danger); font-weight: 700; }

.review-row--on { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--hue-when) 55%, transparent), var(--shadow-2); }
.review-row--undecided { box-shadow: 0 0 0 1.5px oklch(58% 0.13 25 / 0.5), var(--shadow-1); }
.review-row--undecided.review-row--on { box-shadow: 0 0 0 1.5px oklch(58% 0.13 25 / 0.65), var(--shadow-2); }

/* --- инспектор выбранной строки --- */
.review-details {
  display: flex; flex-direction: column; gap: 14px;
  background: var(--surface); border-radius: var(--radius);
  padding: 16px; box-shadow: var(--shadow-1);
}
.review-details__label {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .10em; color: var(--muted);
}

.group--when { --group: var(--hue-when); }
.group--type { --group: var(--hue-type); }
.group--more { --group: var(--hue-more); }
.group__label {
  margin: 0 0 8px;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .10em;
  color: var(--group);
}
.group__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.group__chips .chip { min-height: 40px; padding: 8px 15px; font-size: 13px; }
/* Выбранное читается и без цвета — по рамке и заливке. */
.group__chips .chip--on {
  border-color: var(--group);
  background: color-mix(in srgb, var(--group) 13%, var(--surface));
  color: var(--group);
  font-weight: 600;
}
.group__note { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.group__dismiss {
  background: none; border: none; color: var(--muted);
  font-size: 13px; line-height: 1; cursor: pointer; padding: 4px 6px;
}

/* «Другая дата» — чип-раскрывашка: поля даты и времени с первого уровня
   убраны и приходят только когда их действительно спросили.
   display самого <details> не трогаем: любой не-block ломает скрытие
   закрытого содержимого, и поля остаются в раскладке распахнутыми. */
.group__pick[open] { flex-basis: 100%; }
.group__pick > summary {
  list-style: none;
  display: inline-flex; align-items: center;
}
.group__pick > summary::-webkit-details-marker { display: none; }
.group__fields { display: flex; gap: 8px; width: 100%; margin-top: 8px; }
.group__input {
  flex: 1; min-width: 0;
  border: 1px solid color-mix(in srgb, var(--group) 35%, transparent);
  border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink);
  padding: 10px 12px; font-size: 14px; font-family: inherit;
}
.group__input--time { flex: 0 0 108px; }
.group__input:focus { outline: none; border-color: var(--group); }

/* Шаги и привязка к цели — не группы разбора: отделяем волоском, иначе
   чек-лист читается как продолжение группы «Ещё». */
.review-details .steps, .review-details__goal {
  padding-top: 14px; border-top: 1px solid var(--line);
}
.review-details .steps { margin-top: 0; }
/* В узкой колонке инспектора подпись и селект встают друг под другом:
   в строку они не влезают и режут длинное название цели. */
.review-details__goal .card__goal-attach {
  margin: 0; flex-direction: column; align-items: stretch; gap: 6px;
}
.review-details__goal .input { min-width: 0; }

/* --- футер экрана --- */
.review__actions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.review__actions form { width: 100%; }
.review__actions .btn { width: 100%; }
/* Клавиатуры на телефоне нет — подсказки про неё тоже. */
.review__keys { display: none; }

.review__original { margin-top: 16px; color: oklch(35% 0.03 250 / 0.75); font-size: 13px; }
.review__original summary { cursor: pointer; }

/* --- широкий экран: две колонки (веб-раскладка) --- */
@media (min-width: 900px) {
  .container--wide { max-width: 1040px; }

  /* Инспектор — колонка справа. stretch тянет обе колонки до высоты большей
     из них, поэтому длинный чек-лист шагов не обрезается, а короткая левая
     колонка не оставляет панель висеть в воздухе. */
  .review__panes { flex-direction: row; align-items: stretch; gap: 0; }
  .review__main { flex: 1; padding-right: 26px; }
  .review-details {
    flex: none; width: 330px;
    border-radius: 0;
    border-left: 1px solid rgba(10, 40, 50, .09);
    background: rgba(255, 255, 255, .72);
    box-shadow: none;
    padding: 22px 24px;
    gap: 20px;
    /* Панель дотягивается до края колонки контента, как в вебе референса. */
    margin: -24px -20px -24px 0;
  }

  .review-row { cursor: pointer; }
  .review-row:hover { box-shadow: var(--shadow-2); }
  .review-row--on:hover { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--hue-when) 55%, transparent), var(--shadow-2); }

  .review__actions {
    flex-direction: row; align-items: center; gap: 12px;
    margin-top: 22px; padding-top: 18px;
    border-top: 1px solid rgba(10, 40, 50, .09);
  }
  .review__actions form { width: auto; }
  .review__actions .btn { width: auto; }
  .review__actions .btn--big { padding: 14px 26px; }
  /* В вебе первичное действие — крайнее справа, отмена слева от него. */
  .review__discard { order: 1; }
  .review__confirm { order: 2; }
  /* Подсказка обещает ровно то, что делает review_keys_controller.js. */
  .review__keys {
    display: block; margin-right: auto;
    font-size: 12.5px; color: oklch(35% 0.03 250 / 0.7);
  }
}

/* ================================================================
   Мобильная доводка (адаптив). Основной сценарий — телефон 320–430px.
   Брейкпоинты дизайн-системы: 360px (узкий телефон), 480px (граница колонки).
   ================================================================ */

/* Страница не скроллится вбок ни при каких переполнениях контента. */
html, body { max-width: 100%; overflow-x: hidden; }

/* Пользовательский текст (заголовки/тела записей, коды, ссылки) может быть
   без пробелов — переносим по любому месту, чтобы он не рвал колонку. */
.card__title, .card__body, .plan__candidate .card__title,
.telegram__code, .calendar__feed-url, .diary__empty-title,
.flash, .auth__link { overflow-wrap: anywhere; }

/* Медиа не вылезают за колонку. */
img, svg, video { max-width: 100%; }

/* Боковые safe-area (ландшафт с «чёлкой»): не режем контент об вырез. */
.container {
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
}

/* Календарные дни — комфортный тап на всех экранах. */
.calendar__day { min-height: 44px; }

/* Тач-устройства. */
@media (pointer: coarse) {
  /* Поля ввода ≥16px — иначе iOS Safari зумит страницу при фокусе.
     Только для coarse-указателя: на десктопе остаётся типографика ДС (15px). */
  .input, .capture__input, input, select, textarea { font-size: 16px; }
  .date-chips__input { font-size: 16px; width: auto; min-width: 128px; }
  .date-chips__input--time { min-width: 96px; }

  /* Тап-таргеты ≥40px для мелких иконочных кнопок управления записью. */
  /* Чипы разбора — полноценная цель попадания (44px) на телефоне. */
  .group__chips .chip, .group__pick > summary { min-height: 44px; }
  .group__input { font-size: 16px; }

  .card__edit, .card__reject, .steps__remove, .steps-offer__dismiss, .group__dismiss {
    min-width: 40px; min-height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  /* Отметка шага решённым — палец попадает без промаха. */
  .checklist__check { width: 32px; height: 32px; font-size: 14px; }
  .calendar__nav { padding: 8px 16px; }
}

/* --- Онбординг первой сессии: велком-экран + контекстные подсказки --- */
.onboarding { padding-top: 6vh; }
.onboarding__eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 6px;
}
.onboarding__title { margin: 0 0 20px; }
.onboarding__blocks { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.onboarding__block {
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-1);
  padding: 14px 16px;
}
.onboarding__block-title { font-size: 14.5px; font-weight: 700; margin: 0 0 4px; }
.onboarding__block-body { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.onboarding__cta { width: 100%; }

.onboarding-tip {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-2);
  border-left: 4px solid var(--accent);
  padding: 12px 14px; margin-bottom: 16px;
}
.onboarding-tip__text { flex: 1; margin: 0; font-size: 13.5px; line-height: 1.45; }
.onboarding__aside { margin: 14px 0 0; text-align: center; font-size: 13px; color: var(--muted); }
.onboarding__aside a { color: var(--accent); font-weight: 600; }

/* --- гостевой (демо) режим: полоса сверху и окно регистрации --- */
.guest-bar {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 10px;
  background: oklch(28% 0.03 250 / 0.82); color: #fff;
  padding: 9px 16px; font-size: 12px; font-weight: 600;
}
.guest-bar__text { opacity: 0.85; }
.guest-bar__cta {
  color: #fff; text-decoration: none; white-space: nowrap;
  background: var(--gradient-cta); border-radius: var(--radius-pill); padding: 5px 12px;
  box-shadow: var(--shadow-1);
}

.gate {
  border: none; padding: 0; background: transparent;
  width: min(400px, calc(100vw - 32px));
  margin: auto;
}
.gate::backdrop { background: oklch(24% 0.02 250 / 0.55); backdrop-filter: blur(2px); }
.gate__body {
  background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-3);
  padding: 22px 20px; display: flex; flex-direction: column; gap: 10px; text-align: center;
}
.gate__title { margin: 0; font-size: 19px; }
.gate__text { margin: 0 0 6px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.gate .btn { justify-content: center; }

/* Очень узкие экраны (≤360px): ужимаем отступы, чтобы ничего не резалось. */
@media (max-width: 360px) {
  .container { padding-left: 14px; padding-right: 14px; }
  .calendar__grid { padding: 6px; gap: 2px; }
  .calendar__day { font-size: 12px; }
  .calendar__dot { padding: 0 4px; font-size: 9px; }
  .stats__day-value { width: 84px; }
  .focus__timer { font-size: 3.4rem; }
  h1 { font-size: 20px; }
}