/* ===========================================================================
   Servus Mini App — iOS / Apple Health стиль (HIG).
   Светлая тема по умолчанию, тёмная — авто по системной/Telegram теме.
   Имена переменных сохранены с прошлой темы (--gold=акцент, --red=danger),
   чтобы не переписывать все компоненты; значения — новая палитра.
   =========================================================================== */
:root {
  /* СВЕТЛАЯ ТЕМА */
  --bg:        #F2F2F6;   /* фон приложения */
  --surface:   #FFFFFF;   /* карточки / плитки */
  --surface-2: #F2F2F6;   /* поднятые/утопленные элементы */
  --line:      #E3E3E8;   /* разделители (hairline) */
  --text:      #101013;   /* основной текст */
  --text-dim:  #6E6E77;   /* вторичный текст */
  --text-3:    #A0A0A8;   /* третичный текст */

  /* Акцент = системный синий (бывший --gold), danger = красный (бывший --red) */
  --gold:      #3B7DF6;   /* accent */
  --gold-soft: #2f6fe0;
  --red:       #E5484D;   /* danger */
  --red-soft:  #cf3b40;

  /* Цвета категорий */
  --c-tasks:   #3B7DF6;
  --c-habits:  #34B37E;
  --c-cal:     #F5892E;
  --c-money:   #7A5CF0;
  --c-diary:   #E0568C;
  --c-shop:    #D9A80F;
  --c-mail:    #2BB0C7;
  --c-graphite: #59617A;   /* графит дневника, светлая тема (по макету) */
  --on-graphite: #F5F5F7;

  --radius:    18px;   /* карта */
  --radius-sm: 14px;   /* кнопка */
  --radius-lg: 24px;   /* лист-модалка */

  /* тень карточек и дорожки колец/баров (светлые пастельные) */
  --card-shadow: 0 1px 2px rgba(0,0,0,.05);
  --tr-tasks:  #E9F0FE;
  --tr-habits: #E6F6EE;
  --tr-cal:    #FDEEE1;

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
          Inter, "Segoe UI", Roboto, sans-serif;

  /* ---- Единая система анимаций (плавность как в iOS) ----
     Кривые: ease-out (появление/выход, «тормозящее»), spring (упругая, для нажатий),
     standard (симметричная для смены цвета/фона). Длительности — общие токены,
     чтобы весь интерфейс двигался в едином ритме, без разнобоя. */
  --ease-out:      cubic-bezier(.22, .61, .36, 1);   /* decelerate — для входа/выхода */
  --ease-spring:   cubic-bezier(.34, 1.56, .64, 1);  /* лёгкий overshoot — нажатия/чек */
  --ease-std:      cubic-bezier(.4, 0, .2, 1);       /* стандартная — цвет/ширина */
  --t-fast:   .14s;   /* нажатия (tap feedback) */
  --t-med:    .22s;   /* смена цвета/фона */
  --t-slow:   .34s;   /* появление экрана/листа */
  --t-bar:    .5s;    /* прогресс-бары/кольца */
}

/* Тёмные токены. Применяются: (1) авто — когда тема не задана вручную и система тёмная;
   (2) вручную — html[data-theme="dark"]. Ручной light (data-theme="light") оставляет :root. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]):not([data-theme="dark"]) { /* авто-тёмная */
    --bg:#000000; --surface:#1C1C1F; --surface-2:#2C2C30; --line:#2E2E33;
    --text:#F5F5F7; --text-dim:#98989F; --text-3:#6A6A70;
    --gold:#5E9CFF; --gold-soft:#4a8bf0; --red:#FF6B6F; --red-soft:#ef5a5e;
    --c-tasks:#5E9CFF; --c-habits:#45D19B; --c-cal:#FF9F45; --c-money:#9C82FF;
    --c-diary:#FF74A6; --c-shop:#F7C948; --c-mail:#48CBE0; --c-graphite:#9AA3BE; --on-graphite:#14161F;
    --card-shadow:none; --tr-tasks:#16283F; --tr-habits:#14301F; --tr-cal:#3A2612;
  }
}
html[data-theme="dark"] {
  --bg:#000000; --surface:#1C1C1F; --surface-2:#2C2C30; --line:#2E2E33;
  --text:#F5F5F7; --text-dim:#98989F; --text-3:#6A6A70;
  --gold:#5E9CFF; --gold-soft:#4a8bf0; --red:#FF6B6F; --red-soft:#ef5a5e;
  --c-tasks:#5E9CFF; --c-habits:#45D19B; --c-cal:#FF9F45; --c-money:#9C82FF;
  --c-diary:#FF74A6; --c-shop:#F7C948; --c-mail:#48CBE0; --c-graphite:#9AA3BE; --on-graphite:#14161F;
  --card-shadow:none; --tr-tasks:#16283F; --tr-habits:#14301F; --tr-cal:#3A2612;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

#app {
  max-width: 520px;
  margin: 0 auto;
  min-height: 100vh;
  padding: 0 16px calc(76px + env(safe-area-inset-bottom));   /* низ — под прижатый таб-бар */
}

.hidden { display: none !important; }

/* Пока открыт модальный лист (создание/карточка) — блокируем прокрутку фона,
   иначе при фокусе в поле iOS/Telegram скроллит документ и «экран улетает вниз».
   Лист сам поднимается над клавиатурой через margin-bottom: var(--kb). */
/* Блокируем прокрутку фона под модалкой БЕЗ position:fixed на body — иначе
   .overlay (fixed) начинает позиционироваться относительно сдвинутого body и уезжает.
   overflow:hidden + touch-action не двигают систему координат fixed-элементов. */
body.sheet-lock { overflow: hidden; touch-action: none; }

/* плавное появление экрана при переключении вкладок.
   Анимация навешивается КЛАССОМ .screen-anim (ставит JS playEnter при каждом показе),
   чтобы повторный показ того же экрана тоже проигрывал появление, а не впрыгивал резко. */
.screen.screen-anim { animation: screen-in var(--t-slow) var(--ease-out) both; will-change: opacity, transform; }
@keyframes screen-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- Крупный заголовок iOS ---------- */
.lg-head { padding: 18px 4px 14px; position: sticky; top: 0; background: var(--bg); z-index: 5; }
.lg-date { font-size: 13px; font-weight: 600; color: var(--text-3); margin-bottom: 2px; }
.lg-titlebar { display: flex; align-items: center; justify-content: space-between; }
.lg-title { font-size: 34px; font-weight: 800; letter-spacing: -.03em; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--gold); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px;
}
.theme-btn {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--surface-2); color: var(--text); border: none;
  font-size: 17px; cursor: pointer; flex: none;
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--t-fast) var(--ease-spring), background var(--t-med) var(--ease-std);
}
.theme-btn:active { transform: scale(.9); }

/* ---------- Карточка с тремя кольцами ---------- */
.rings-card {
  display: flex; align-items: center; gap: 20px;
  background: var(--surface); border-radius: 20px;
  padding: 18px; margin-bottom: 14px;
  box-shadow: var(--card-shadow);
}
.rings-wrap { flex: none; }
.rings-legend { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.rings-pct { font-size: 28px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.rings-pct small { font-size: 18px; font-weight: 700; color: var(--text-3); }
.rings-sub { font-size: 13px; font-weight: 600; color: var(--text-dim); margin-top: 3px; }
.rings-rows { display: flex; flex-direction: column; gap: 7px; }
.rlg { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-dim); }
.rlg i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }
.rlg b { color: var(--text); font-weight: 700; margin-left: auto; }

/* ---------- Крупные плитки категорий ---------- */
.cat-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.cat-tile {
  background: var(--surface); border-radius: 18px;
  padding: 14px; cursor: pointer;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: var(--card-shadow);
  transition: transform var(--t-fast) var(--ease-spring), background var(--t-med) var(--ease-std);
}
.cat-tile:active { transform: scale(.97); }
.cat-h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--cat); }
.cat-ic {
  width: 22px; height: 22px; border-radius: 7px; background: var(--cat); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex: none;
}
/* SVG-иконка внутри цветного квадратика раздела (напр. кольцо КБЖУ по макету) */
.cat-ic svg { width: 15px; height: 15px; display: block; }
.cat-tile.sm .cat-ic svg { width: 19px; height: 19px; }
.more-ico2 svg { width: 19px; height: 19px; display: block; }
.cat-big { font-size: 24px; font-weight: 800; color: var(--text); line-height: 1; letter-spacing: -.02em; }
.cat-big .mut { color: var(--text-3); }
.cat-big small { font-size: 13px; font-weight: 600; color: var(--text-3); }
.cat-note { font-size: 12px; font-weight: 600; color: var(--text-dim); }
.cat-bar { height: 6px; border-radius: 3px; background: var(--cat-track); overflow: hidden; }
.cat-fill { height: 100%; width: 0%; background: var(--cat); border-radius: 3px; transition: width var(--t-bar) var(--ease-std); }
.spark { display: block; }

/* ---------- Маленькие плитки (дневник/покупки/почта) ---------- */
.cat-tiles-sm { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0 22px; }
.cat-tile.sm { padding: 16px; gap: 10px; min-height: 92px; }
.cat-tile.sm .cat-ic { width: 30px; height: 30px; border-radius: 9px; font-size: 15px; }
.cat-tile.sm .sm-name { font-size: 15px; font-weight: 700; color: var(--text); }
.cat-tile.sm .sm-note { font-size: 13px; color: var(--text-3); }

/* Дневник — одиночная широкая строка на обзоре (как в макете) */
.diary-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  margin-top: 14px;
  background: var(--surface); border-radius: 16px; cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.diary-row .cat-ic { width: 30px; height: 30px; border-radius: 9px;
  background: var(--c-graphite, #2C2C33); color: var(--on-graphite, #fff); font-size: 15px; }
.diary-row .sm-name { flex: none; font-size: 17px; font-weight: 700; color: var(--text); }
.diary-row .sm-note { flex: 1; text-align: right; font-size: 15px; color: var(--text-3); }
.diary-row .more-chev { font-size: 17px; color: #C4C4CC; flex: none; }

/* назначение цвета категории плитке через data-cat */
.cat-tile[data-cat="tasks"]  { --cat: var(--c-tasks);  --cat-track: var(--tr-tasks); }
.cat-tile[data-cat="habits"] { --cat: var(--c-habits); --cat-track: var(--tr-habits); }
.cat-tile[data-cat="cal"]    { --cat: var(--c-cal);    --cat-track: var(--tr-cal); }
.cat-tile[data-cat="money"]  { --cat: var(--c-money); }
.cat-tile[data-cat="diary"]  { --cat: var(--c-graphite); }
.cat-tile[data-cat="diary"] .cat-ic { color: var(--on-graphite); }
.cat-tile[data-cat="shop"]   { --cat: var(--c-shop); }

/* ---------- Заголовки ---------- */
.page-title { font-size: 32px; font-weight: 800; letter-spacing: -.5px; margin: 10px 0 16px; }

/* ---------- Сегментный переключатель (iOS) ---------- */
.segmented {
  display: flex; gap: 2px; background: var(--surface-2);
  border-radius: 10px; padding: 2px; margin: 0 0 16px;
}
.segmented button {
  flex: 1; background: none; border: none; color: var(--text);
  padding: 8px 0; font-size: 13.5px; font-weight: 600; border-radius: 8px;
  cursor: pointer; transition: background var(--t-med) var(--ease-std), box-shadow var(--t-med) var(--ease-std);
}
.segmented button.on { background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.12); }

/* заголовок секции (uppercase, как iOS grouped list header) */
.sec-hd {
  font-size: 13px; color: var(--text-dim); font-weight: 600;
  text-transform: uppercase; letter-spacing: .3px;
  margin: 22px 4px 8px; display: flex; align-items: center; gap: 8px;
}
.sec-hd .cnt { color: var(--text-3); font-weight: 600; }
/* совместимость со старым именем */
.dash-section-title { font-size: 13px; color: var(--text-dim); font-weight: 600; text-transform: uppercase; margin: 22px 4px 8px; }

/* ---------- Привычки: недельный график (столбики, как в макете) ---------- */
.hweek-card { background: var(--surface); border-radius: 20px; padding: 16px; margin-bottom: 14px; box-shadow: var(--card-shadow); }
.hweek-hd { display: flex; align-items: baseline; justify-content: space-between; }
.hweek-hd span:first-child { font-size: 15px; font-weight: 700; color: var(--text); }
.hweek-cnt { font-size: 13px; color: var(--text-dim); }
.hweek-chart { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; height: 110px; margin-top: 14px; }
.hweek-chart .cw { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: calc(100% - 20px); }
.hweek-chart .cw-bar { width: 100%; border-radius: 6px; background: var(--c-habits); min-height: 4px; }
.hweek-chart .cw-bar.empty { background: var(--surface-2); }
.hweek-chart .cw-lbl { font-size: 11px; color: var(--text-3); }
.hweek-chart .cw-lbl.today { font-weight: 700; color: var(--c-habits); }
.hweek-chart .cw-lbl.future { color: var(--text-3); }

/* ---------- Привычки: карточки с кольцом стрика ---------- */
.hcard-list { display: flex; flex-direction: column; gap: 12px; }
.hcard {
  background: var(--surface); border-radius: 18px; padding: 14px 16px;
  display: flex; align-items: center; gap: 14px; box-shadow: var(--card-shadow);
  transition: transform var(--t-fast) var(--ease-spring);
}
.hcard:active { transform: scale(.985); }
.hcard.off { opacity: .5; }   /* выключенная привычка — приглушена */

/* Трекер воды */
.water-card {
  background: var(--surface); border-radius: 18px; padding: 14px 16px;
  display: flex; align-items: center; gap: 14px; box-shadow: var(--card-shadow);
  margin-bottom: 14px; position: relative;
}
.water-ring { position: relative; width: 52px; height: 52px; flex: none; }
.water-ring-c { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-size: 13px; font-weight: 700; color: var(--text); }
.water-body { flex: 1; min-width: 0; }
.water-title { font-size: 17px; font-weight: 600; color: var(--text); }
.water-sub { font-size: 13px; color: var(--text-3); margin-top: 3px; }
.water-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.water-btn {
  border: none; border-radius: 10px; padding: 7px 12px; font-size: 14px; font-weight: 600;
  background: var(--c-habits); color: #fff; cursor: pointer; transition: transform var(--t-fast) var(--ease-spring);
}
.water-btn:active { transform: scale(.94); }
.water-btn.minus { background: var(--surface-2); color: var(--text-dim); }
.water-btn.custom {
  background: transparent; color: var(--c-habits);
  box-shadow: inset 0 0 0 1.5px var(--c-habits);
}
.water-goal { position: absolute; top: 12px; right: 14px; border: none; background: none;
  font-size: 17px; cursor: pointer; opacity: .8; color: var(--text-3);
  padding: 0; line-height: 0; }
.water-goal svg { width: 20px; height: 20px; display: block; }

/* Список «Названия разделов» */
.sec-name-row { display: flex; align-items: center; gap: 12px; padding: 13px 16px; cursor: pointer;
  border-bottom: .5px solid var(--line); }
.sec-name-row:last-child { border-bottom: none; }
.sec-name-emoji { font-size: 18px; flex: none; display: flex; align-items: center; color: var(--text-dim); }
.sec-name-emoji svg { width: 20px; height: 20px; display: block; }
.sec-name-txt { flex: 1; font-size: 16px; color: var(--text); }
.sec-name-def { font-size: 12px; color: var(--text-3); }
.sec-name-row .more-chev { color: var(--text-3); }
.hcard-ring { position: relative; width: 52px; height: 52px; flex: none; cursor: pointer; }
.hcard-ring-c { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.hcard-body { flex: 1; min-width: 0; cursor: pointer; }
.hcard-name { font-size: 17px; font-weight: 600; color: var(--text); }
.hcard-sub { font-size: 13px; color: var(--text-dim); margin-top: 3px; }
.hcard-pill {
  font-size: 13px; font-weight: 700; color: var(--c-habits); background: var(--tr-habits);
  padding: 5px 10px; border-radius: 10px; flex: none;
}
.hcard-pill.zero { color: var(--text-3); background: var(--surface-2); }

/* свёрнутый блок «Выполнено» на вкладке привычек */
.done-toggle {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  margin: 18px 4px 8px; font-size: 13px; font-weight: 700;
  color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em;
}
.done-toggle .dt-cnt { color: var(--text-3); }
.done-toggle .dt-chev { margin-left: auto; color: var(--text-3); font-size: 17px; transition: transform var(--t-med) var(--ease-std); }
.done-toggle.open .dt-chev { transform: rotate(90deg); }
.done-box { display: flex; flex-direction: column; gap: 12px; }
.done-box.collapsed { display: none; }

/* П.1: плавный уход строки из «Предстоящего» при отметке «выполнено» на Обзоре */
.grouped .item.leaving {
  overflow: hidden; will-change: max-height, opacity, transform;
  animation: item-leave var(--t-slow) var(--ease-std) forwards;
}
@keyframes item-leave {
  0%   { opacity: 1; max-height: 80px; transform: translateX(0); }
  45%  { opacity: 0; transform: translateX(24px); max-height: 80px; }
  100% { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; margin: 0;
         transform: translateX(24px); }
}

/* просроченная задача/привычка: дата назначения красным под названием (как в TickTick) */
.item-overdue { font-size: 12.5px; color: var(--red); font-weight: 600; margin-top: 3px; }
.item.overdue .check { border-color: var(--red); }
/* заголовок «Просрочено» с кнопкой «Отметить все» */
.overdue-hd { justify-content: space-between; align-items: center; }
.overdue-all {
  border: none; background: none; color: var(--gold); cursor: pointer;
  font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; padding: 0;
}
.overdue-all:active { opacity: .6; }

/* ---------- Список записей ---------- */
.item-list { display: flex; flex-direction: column; gap: 10px; }
.item {
  display: flex; gap: 12px; align-items: center;
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  transition: opacity var(--t-med) var(--ease-std), transform var(--t-fast) var(--ease-spring), background var(--t-med) var(--ease-std);
}
/* Появление строк — ТОЛЬКО при первом рендере списка (контейнер помечен .enter),
   а не при каждом обновлении/отметке. Иначе весь список «выпрыгивает» на каждый тап. */
.enter > .item, .grouped.enter > .item, .enter > .hcard { animation: item-in var(--t-slow) var(--ease-out) both; }
@keyframes item-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.item:active { transform: scale(.985); background: var(--surface-2); }
.item.urgent { box-shadow: inset 3px 0 0 var(--red); }
.item.done { opacity: .5; }

/* grouped-inset: строки в ЕДИНОЙ карточке с hairline-разделителями (как iOS) */
.grouped {
  background: var(--surface); border-radius: 18px; overflow: hidden;
  box-shadow: var(--card-shadow);
}
.grouped .item { border-radius: 0; background: var(--surface); animation: none; padding: 13px 16px; }
/* разделитель 0.5px с отступом 50px слева — как в макете */
.grouped .item + .item::before {
  content: ""; position: absolute; left: 50px; right: 0; top: 0; height: .5px; background: var(--line);
}
.grouped .item { position: relative; }
.grouped .item:active { background: var(--surface-2); transform: none; }
.grouped:empty { display: none; }

.check {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--text-3);
  flex: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: transparent;
  transition: background var(--t-med) var(--ease-std), border-color var(--t-med) var(--ease-std), color var(--t-med) var(--ease-std), transform var(--t-med) var(--ease-spring);
  will-change: transform;
}
.check.p-gold { border-color: var(--gold); }
.check.p-red  { border-color: var(--red); }
.check:active { transform: scale(.85); }
.check.checked {
  background: var(--gold); border-color: var(--gold); color: #fff;
  animation: check-pop var(--t-slow) var(--ease-spring);
}
.check.p-red.checked { background: var(--red); border-color: var(--red); }
@keyframes check-pop { 0% { transform: scale(.7); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }

.item-body { flex: 1; min-width: 0; }
.item-text { font-size: 16px; }
.item.done .item-text { text-decoration: line-through; }
.item-meta {
  font-size: 12.5px; color: var(--text-dim); margin-top: 3px;
  display: flex; gap: 10px; flex-wrap: wrap;
}
.item-meta .m-red { color: var(--red); }
.item-meta .m-gold { color: var(--gold); }
/* Счётчик подзадач со значком «Ветка»: значок и число держатся вместе */
.item-meta .meta-sub { display: inline-flex; align-items: center; gap: 4px; }
.meta-ico { display: inline-flex; align-items: center; }
.meta-ico svg { width: 13px; height: 13px; display: block; }
.item-time { font-size: 15px; color: var(--text-dim); flex: none; }

/* ---------- Пусто ---------- */
.empty { text-align: center; color: var(--text-dim); padding: 40px 0; font-size: 15px; }

/* ---------- «Ещё» — grouped-список (как в макете) ---------- */
.more-list {
  background: var(--surface); border-radius: 18px; overflow: hidden;
  box-shadow: var(--card-shadow); margin-bottom: 6px;
}
.more-row {
  display: flex; align-items: center; gap: 12px; padding: 13px 16px;
  cursor: pointer; position: relative;
  transition: background var(--t-med) var(--ease-std);
}
.more-row:active { background: var(--surface-2); }
/* hairline-разделитель с отступом под иконку (58px), у настроек — 16px */
.more-row + .more-row::before {
  content: ""; position: absolute; left: 58px; right: 0; top: 0; height: .5px; background: var(--line);
}
.more-row.nolead + .more-row.nolead::before { left: 16px; }
.more-ico2 {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  background: var(--mc); color: #fff; font-size: 14px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.more-ico2.ico-graphite { color: var(--on-graphite); }
.more-name { flex: 1; font-size: 17px; color: var(--text); }
.more-val { font-size: 15px; color: var(--text-3); }
.more-chev { font-size: 17px; color: #C4C4CC; }
.more-badge {
  font-size: 13px; font-weight: 700; color: #fff; background: var(--red);
  padding: 2px 8px; border-radius: 10px;
}
.hint { font-size: 13px; color: var(--text-dim); line-height: 1.5; }

/* ---------- ИИ-чат ---------- */
.ai-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 0 12px;
  background: var(--bg);
}
.ai-title { font-size: 20px; font-weight: 700; flex: 1; text-align: center; }
.ai-back, .ai-reset {
  background: none; border: none; color: var(--gold);
  font-size: 14px; cursor: pointer; padding: 4px 2px;
}

/* ---------- Навбар полноэкранных разделов (1:1 с макетом Claude Design) ---------- */
/* Липкая шапка: слева ‹ + Servus, справа ••• (меню действий). Blur-фон, hairline снизу. */
.nav-bar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 18px 10px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: .5px solid var(--line);
}
.nav-left { display: flex; align-items: center; gap: 8px; background: none; border: none; cursor: pointer; padding: 0; }
.nav-chev { font-size: 20px; color: var(--gold); line-height: 1; }
.nav-brand { font-size: 16px; font-weight: 600; color: var(--text); }
.nav-dots {
  font-size: 20px; color: var(--text-dim); letter-spacing: 2px;
  background: none; border: none; cursor: pointer; padding: 4px 2px; line-height: 1;
}
.nav-dots:disabled { opacity: 0; pointer-events: none; }
/* Крупный заголовок раздела в теле (34px, как в макете) */
.sub-title {
  font-size: 34px; font-weight: 800; letter-spacing: -.02em;
  color: var(--text); padding: 8px 4px 14px;
}

.ai-log {
  display: flex; flex-direction: column; gap: 12px;
  /* нижний отступ, чтобы последние сообщения не уезжали под фикс. поле ввода */
  padding-bottom: 12px;
}
.ai-hello {
  color: var(--text-dim); font-size: 14px; text-align: center;
  padding: 20px 12px; line-height: 1.5;
}
/* Кнопка «Показать историю» — вторичная пилюля, появляется в пустом чате при наличии истории */
.ai-history {
  display: inline-flex; align-items: center; gap: 7px; align-self: center;
  margin: 0 auto 4px; padding: 8px 16px; border: none; cursor: pointer;
  background: var(--surface-2); color: var(--text-dim);
  border-radius: 16px; font-size: 13px; font-weight: 600;
  transition: transform var(--t-fast) var(--ease-spring);
}
.ai-history svg { width: 16px; height: 16px; }
.ai-history:active { transform: scale(.94); }
/* Шапка режима просмотра истории: заголовок + кнопка «Закрыть» (возврат к пустому чату) */
.ai-hist-bar {
  position: sticky; top: 0; z-index: 4;
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 4px 10px; margin-bottom: 6px;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.ai-hist-lbl { font-size: 13px; font-weight: 600; color: var(--text-dim); }
.ai-hist-close {
  display: inline-flex; align-items: center; gap: 5px; border: none; cursor: pointer;
  background: var(--surface-2); color: var(--text-dim);
  border-radius: 14px; padding: 6px 12px; font-size: 13px; font-weight: 600;
  transition: transform var(--t-fast) var(--ease-spring);
}
.ai-hist-close svg { width: 14px; height: 14px; }
.ai-hist-close:active { transform: scale(.94); }
.bubble {
  max-width: 86%; padding: 11px 15px;
  font-size: 16px; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word;
}
.bubble.me {
  align-self: flex-end; max-width: 80%;
  background: var(--gold); color: #fff;
  border-radius: 20px 20px 6px 20px;
}
/* в тёмной теме пузырь свой-светло-синий → текст тёмный (как в макете) */
html[data-theme="dark"] .bubble.me { color: #0B1524; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .bubble.me { color: #0B1524; }
}
.bubble.bot {
  align-self: flex-start;
  background: var(--surface); box-shadow: var(--card-shadow);
  border-radius: 20px 20px 20px 6px;
}
.bubble.typing { color: var(--text-dim); font-style: italic; }

/* быстрые подсказки под диалогом (как в макете: мягкий фон-акцент) */
.ai-suggests { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap;
  /* запас под фикс. поле ввода (аналог padding-bottom:120px у контента в макете) */
  margin-bottom: calc(64px + env(safe-area-inset-bottom)); }
.ai-sug {
  padding: 8px 14px; border-radius: 16px; background: var(--tr-tasks);
  color: var(--gold); font-size: 14px; font-weight: 600; cursor: pointer;
  border: none; transition: transform var(--t-fast) var(--ease-spring);
}
.ai-sug:active { transform: scale(.94); }

/* Поле ввода — точь-в-точь по макету: [инпут] [микрофон] [отправить] */
.ai-input {
  position: fixed; bottom: var(--kb, 0px); left: 0; right: 0;
  max-width: 520px; margin: 0 auto;
  display: flex; gap: 10px; align-items: center;
  /* низ: 10px + системный вырез (0 там, где выреза нет — напр. Telegram desktop) */
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%);
  border-top: .5px solid var(--line);
  transition: bottom var(--t-med) var(--ease-out); z-index: 4;
}
.ai-input input, .ai-input textarea {
  flex: 1; background: var(--surface-2); border: none;
  border-radius: 20px; padding: 11px 16px;
  color: var(--text); font-size: 16px; outline: none;
}
/* поле ИИ-чата — теперь textarea: растёт до ~5 строк, дальше внутренний скролл,
   переносы строк (новый абзац) сохраняются */
.ai-input textarea {
  resize: none; font-family: inherit; line-height: 1.35;
  max-height: 132px; overflow-y: auto;
}
.ai-input input::placeholder, .ai-input textarea::placeholder { color: var(--text-3); }
/* Отправить — синий круг 40×40 со стрелкой вверх */
.ai-send {
  width: 40px; height: 40px; border-radius: 50%; border: none;
  background: var(--gold); color: #fff;
  flex: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.ai-send:active { transform: scale(.92); }
.ai-send:disabled { opacity: .5; }
/* Микрофон — ПРОЗРАЧНЫЙ, только синяя контурная иконка (как в макете) */
.ai-mic {
  width: 40px; height: 40px; border-radius: 50%; border: none;
  background: transparent; color: var(--gold); flex: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--t-med) var(--ease-std), transform var(--t-fast) var(--ease-spring);
}
.ai-mic:active { transform: scale(.92); }
/* при записи — заливаем красным, иконка белая */
.ai-mic.rec { background: var(--red); color: #fff; animation: mic-pulse 1s infinite; }
@keyframes mic-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.ai-mic svg, .ai-send svg { width: 22px; height: 22px; display: block; }

/* панель записи голоса (перекрывает поле ввода) — по макету */
.ai-rec { position: absolute; inset: 8px 16px max(8px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 10px; }
.ai-rec.hidden { display: none; }
.ai-rec-pill { flex: 1; background: var(--surface-2); border-radius: 20px; padding: 11px 16px; display: flex; align-items: center; gap: 10px; }
.ai-rec-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--red); flex: none; animation: mic-pulse 1s infinite; }
.ai-rec-wave { flex: 1; display: flex; align-items: center; gap: 3px; height: 20px; overflow: hidden; }
.ai-rec-wave i { width: 3px; border-radius: 2px; background: var(--gold); display: block;
  animation: wave-bounce .9s ease-in-out infinite; transform-origin: center; }
@keyframes wave-bounce { 0%,100% { transform: scaleY(.5); opacity:.6; } 50% { transform: scaleY(1); opacity:1; } }
.ai-rec-time { font-size: 14px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; flex: none; }
.ai-rec-stop { width: 40px; height: 40px; border-radius: 50%; background: var(--gold); border: none; flex: none;
  display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ai-rec-square { width: 14px; height: 14px; border-radius: 3px; background: #fff; }
.ai-rec-hint { position: fixed; bottom: calc(var(--kb, 0px) + 62px); left: 0; right: 0; max-width: 520px; margin: 0 auto;
  text-align: center; font-size: 13px; color: var(--text-dim); padding: 0 16px; z-index: 20; }
.ai-rec-hint.hidden { display: none; }
/* .ai-input уже position:fixed → служит контекстом для абсолютной .ai-rec */
body.recording .ai-input input, body.recording .ai-mic, body.recording .ai-send { visibility: hidden; }

/* Брифинг (как в макете) */
.brief-intro { font-size: 14px; color: var(--text-dim); line-height: 1.45; padding: 0 4px 14px; }
.brief-row2 { display: flex; align-items: center; gap: 12px; padding: 13px 16px; position: relative; }
.brief-row2 + .brief-row2::before { content: ""; position: absolute; left: 16px; right: 0; top: 0; height: .5px; background: var(--line); }
.brief-row2 .lbl { flex: 1; font-size: 17px; color: var(--text); }
.brief-row2 .val { font-size: 17px; font-weight: 600; color: var(--gold); }
.brief-row2 .chev { font-size: 17px; color: #C4C4CC; }
.brief-row2.tap { cursor: pointer; }
.brief-row2.tap:active { background: var(--surface-2); }
/* switch iOS 51×31 (зелёный вкл) */
.switch { width: 51px; height: 31px; border-radius: 16px; background: var(--line); position: relative; cursor: pointer; flex: none; transition: background var(--t-med) var(--ease-std); }
.switch.on { background: var(--c-habits); }
.switch .knob { position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.2); transition: transform var(--t-med) var(--ease-spring); }
.switch.on .knob { transform: translateX(20px); }
/* карточка предпросмотра */
.brief-prevcard { background: var(--surface); border-radius: 18px; padding: 16px; box-shadow: var(--card-shadow); }
.brief-prev-inner { background: var(--surface-2); border-radius: 14px; padding: 14px; }
.brief-prev-title { font-size: 13px; font-weight: 700; color: var(--gold); }
.brief-prev-text { font-size: 15px; color: var(--text); line-height: 1.5; margin-top: 6px; white-space: pre-wrap; }
.brief-prev-btns { display: flex; gap: 10px; margin-top: 12px; }
.brief-show { flex: 1; padding: 14px 16px; border-radius: 14px; border: none; background: var(--gold); color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; }
.brief-show:active { background: var(--gold-soft); }
/* материалы (видео) */
.brief-mat { display: flex; align-items: center; gap: 12px; padding: 13px 16px; text-decoration: none; }
.brief-mat-ic { width: 30px; height: 30px; border-radius: 9px; background: var(--c-mail); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex: none; }
.brief-mat-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.brief-mat-name { font-size: 17px; color: var(--text); }
.brief-mat-sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.brief-mat .chev { font-size: 17px; color: #C4C4CC; }

/* Когда открыт ИИ-чат — таб-бар прячем (свой инпут снизу),
   а нижний отступ #app под таб-бар убираем (у чата свой фикс. инпут). */
body.ai-open .tabbar { display: none; }
/* Чат по макету: #app — колонка на всю высоту вьюпорта; экран и лог растут,
   композер прибит к низу (fixed), подсказки лежат над ним внутри контента. */
body.ai-open #app { padding-bottom: 0; display: flex; flex-direction: column; height: 100dvh; min-height: 0; }
/* min-height:0 обязателен, иначе flex-ребёнок не сжимается и внутренний скролл лога не включается */
#screen-ai { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
#screen-ai .ai-log {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;   /* ЛЕНТА СКРОЛЛИТСЯ (#2) */
  /* нижний отступ = высота фикс. композера + системный вырез, чтобы последние
     сообщения не прятались под полем ввода */
  padding-bottom: calc(64px + env(safe-area-inset-bottom));
}

/* ---------- Под-разделы (КБЖУ/дневник/покупки/финансы/почта) ---------- */
.sub-head {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
  padding: 14px 0 14px;
  background: var(--bg);
}
.sub-back { flex: none; justify-self: start; }
.sub-spacer { width: 20px; flex: none; }
/* большой левый заголовок как в макете (не центрированный) */
.sub-head .ai-title { font-size: 28px; font-weight: 800; letter-spacing: -.02em; text-align: left; flex: none; }

/* строка-контент с действиями (удалить/чекбокс) */
.item .row-del {
  background: none; border: none; color: var(--text-dim);
  font-size: 18px; cursor: pointer; flex: none; margin-top: -2px;
}
.item .amount { font-size: 16px; font-weight: 700; color: var(--c-money); flex: none; }
.item .cat-tag {
  font-size: 12px; color: var(--text-dim);
}

/* Поле добавления снизу (общий вид с ИИ-инпутом) */
.sub-add {
  position: fixed; bottom: var(--kb, 0px); left: 0; right: 0;
  max-width: 520px; margin: 0 auto;
  display: flex; gap: 8px; align-items: center;
  padding: 8px 16px max(8px, env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  transition: bottom var(--t-med) var(--ease-out);
}
.sub-add input {
  flex: 1; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 20px; padding: 11px 16px;
  color: var(--text); font-size: 15px; outline: none;
}
.sub-add button {
  width: 42px; height: 42px; border-radius: 50%; border: none;
  background: var(--gold); color: #fff; font-size: 17px; flex: none; cursor: pointer;
}
.sub-add button:disabled { opacity: .5; }
/* Когда открыт под-раздел с инпутом — таб-бар прячем, контенту даём отступ снизу
   чтобы последние элементы не прятались под фикс. полем ввода */
body.sub-open .tabbar { display: none; }
body.sub-open #app { padding-bottom: 76px; }
/* КБЖУ: последний блок (недельный график) не должен прятаться под фикс-инпутом */
body.sub-open #screen-kbju { padding-bottom: 8px; }

/* На КБЖУ / Финансы / Дневник панель снизу ОСТАЁТСЯ (у них нет фикс-инпута).
   Возвращаем таб-бар, даём контенту отступ под неё и поднимаем FAB над панелью. */
body.sub-open.keep-tabbar .tabbar { display: flex; }
body.sub-open.keep-tabbar #app { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
body.sub-open.keep-tabbar #screen-kbju { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
body.sub-open.keep-tabbar .fab { bottom: calc(76px + env(safe-area-inset-bottom)); }

/* КБЖУ — единая карточка: кольцо + макросы + футер (как в макете) */
.cal-card {
  background: var(--surface); border-radius: 20px; padding: 20px 18px; margin-bottom: 6px;
  box-shadow: var(--card-shadow);
}
.cal-card-top { display: flex; align-items: center; gap: 20px; }
.cal-ring-wrap { position: relative; width: 140px; height: 140px; flex: none; }
.cal-ring-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.cal-ring-num { font-size: 28px; font-weight: 800; letter-spacing: -.02em; color: var(--text); line-height: 1; }
.cal-ring-goal { font-size: 12px; color: var(--text-3); margin-top: 3px; }
#cal-ring { transform: rotate(-90deg); }

/* Б/Ж/У — 3 строки: label слева / X / Y г справа, бар под ними */
.cal-macros { display: flex; flex-direction: column; gap: 14px; flex: 1; min-width: 0; }
.macro-row {}
.macro-top { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 5px; }
.macro-top .ml { color: var(--text-dim); font-weight: 600; }
.macro-top .mv { color: var(--text); font-weight: 700; }
.macro-bar { height: 7px; border-radius: 4px; overflow: hidden; }
.macro-fill { height: 100%; border-radius: 4px; transition: width var(--t-bar) var(--ease-std); }

.cal-card-foot {
  margin-top: 18px; padding-top: 14px; border-top: .5px solid var(--line);
  display: flex; justify-content: space-between;
}
.cal-card-foot small { font-size: 12px; color: var(--text-3); display: block; }
.cal-card-foot b { font-size: 17px; font-weight: 700; color: var(--text); margin-top: 2px; display: block; }

/* ккал в строке приёма пищи */
.kcal-cell { flex: none; text-align: right; }
.kcal-cell b { font-size: 16px; font-weight: 700; color: var(--text); }
.kcal-cell small { display: block; font-size: 11px; color: var(--text-3); }
.kcal-cell.add { color: var(--c-cal); font-weight: 600; font-size: 15px; }

/* Недельный график калорий (7 столбиков) */
.cal-week-card { background: var(--surface); border-radius: 18px; padding: 16px; box-shadow: var(--card-shadow); }
.cal-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; height: 100px; }
.cal-week .cw { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: calc(100% - 20px); }
.cal-week .cw-bar { width: 100%; border-radius: 6px; background: var(--c-cal); min-height: 4px; }
.cal-week .cw-bar.empty { background: var(--surface-2); }
.cal-week .cw-lbl { font-size: 11px; color: var(--text-3); }
.cal-week .cw-lbl.today { font-weight: 700; color: var(--c-cal); }

/* Финансы сводка */
.money-summary {
  background: var(--surface); border-radius: 20px; padding: 18px; margin-top: 14px; margin-bottom: 8px;
  box-shadow: var(--card-shadow);
}
.money-sub { font-size: 13px; font-weight: 600; color: var(--text-dim); }
.money-total {
  font-size: 34px; font-weight: 800; letter-spacing: -.03em; color: var(--text);
  margin: 4px 0 2px; display: flex; align-items: baseline; gap: 10px;
}
.money-delta { font-size: 13px; font-weight: 700; }
.money-delta.down { color: var(--c-habits); }
.money-delta.up { color: var(--red); }
.money-budget-note { font-size: 13px; color: var(--text-3); margin-top: 2px; }
.money-budget-bar { height: 8px; border-radius: 4px; background: var(--tr-cal); overflow: hidden; margin-top: 12px; background: color-mix(in srgb, var(--c-money) 12%, var(--surface-2)); }
.money-budget-fill { height: 100%; background: var(--c-money); border-radius: 4px; transition: width var(--t-bar) var(--ease-std); }
.money-budget-fill.over { background: var(--red); }

/* мини-график: 12 столбиков (как в макете — height 72px, gap 5) */
.money-chart { display: grid; grid-template-columns: repeat(12, 1fr); gap: 5px; align-items: end; height: 72px; margin-top: 18px; }
.money-chart i { background: color-mix(in srgb, var(--c-money) 16%, var(--surface-2)); border-radius: 4px; min-height: 3px; }
.money-chart i.hot { background: var(--c-money); }

/* категории: иконка-квадрат + название/сумма + прогресс-бар доли (как в макете) */
.money-catlist { background: var(--surface); border-radius: 18px; overflow: hidden; box-shadow: var(--card-shadow); }
.money-crow { display: flex; align-items: center; gap: 12px; padding: 13px 16px; position: relative; }
.money-crow + .money-crow::before { content: ""; position: absolute; left: 58px; right: 0; top: 0; height: .5px; background: var(--line); }
.money-cico { width: 30px; height: 30px; border-radius: 9px; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 800; }
.money-cbody { flex: 1; min-width: 0; }
.money-cline { display: flex; justify-content: space-between; }
.money-cname { font-size: 16px; color: var(--text); }
.money-camt { font-size: 16px; font-weight: 700; color: var(--text); }
.money-cbar { height: 5px; border-radius: 3px; background: var(--surface-2); overflow: hidden; margin-top: 7px; }
.money-cbar-fill { height: 100%; border-radius: 3px; transition: width var(--t-bar) var(--ease-std); }
/* сумма трат в списке операций: доход зелёный, расход обычный */
.item .amount.income { color: var(--c-habits); }

.shop-count { font-size: 13px; color: var(--text-dim); margin: 0 4px 14px; }

/* Дневник — карточки записей (как в макете) */
/* Чипы-фильтры по тегам (1:1 макет: неактив = surface-2, актив = графит) */
.diary-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.diary-chip {
  padding: 8px 14px; border-radius: 16px; background: var(--surface-2); color: var(--text);
  font-size: 14px; font-weight: 500; cursor: pointer; transition: transform var(--t-fast) var(--ease-spring);
}
.diary-chip:active { transform: scale(.95); }
.diary-chip.on { background: var(--c-graphite); color: var(--on-graphite); font-weight: 600; }
.diary-chip.add { color: var(--text-dim); }
/* Строка «Записи · N» + «По тегам ⌄» справа (как в макете) */
.diary-count-row { display: flex; align-items: baseline; justify-content: space-between; padding: 22px 6px 8px; }
.diary-count { font-size: 13px; font-weight: 700; color: var(--text-dim); letter-spacing: .06em; text-transform: uppercase; }
.diary-sort { font-size: 14px; font-weight: 600; color: var(--c-graphite); cursor: pointer; }

.diary-cards { display: flex; flex-direction: column; gap: 12px; }
.diary-card {
  background: var(--surface); border-radius: 18px; padding: 16px; cursor: pointer;
  transition: transform var(--t-fast) var(--ease-spring), background var(--t-med) var(--ease-std);
}
.enter > .diary-card { animation: item-in var(--t-slow) var(--ease-out) both; }
.diary-card:active { transform: scale(.985); }
.diary-date { font-size: 13px; font-weight: 600; color: var(--text-dim); }
.diary-text { font-size: 16px; color: var(--text); line-height: 1.5; margin-top: 8px; }
.diary-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.diary-pill { padding: 5px 11px; border-radius: 12px; background: var(--surface-2); color: var(--c-graphite); font-size: 13px; font-weight: 600; }

/* ---------- Чек-лист покупок (карточка дневника с тегом #покупки) ---------- */
.diary-card.shop-card { cursor: default; }
.diary-card.shop-card:active { transform: none; }
.shop-items { margin-top: 12px; display: flex; flex-direction: column; }
.shop-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; position: relative; }
.shop-row + .shop-row::before { content: ""; position: absolute; left: 34px; right: 0; top: 0; height: .5px; background: var(--line); }
.shop-cb { width: 22px; height: 22px; border-radius: 50%; border: 1.8px solid var(--c-shop); flex: none;
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 800;
  cursor: pointer; transition: transform var(--t-fast) var(--ease-spring), background var(--t-med) var(--ease-std); }
.shop-cb:active { transform: scale(.85); }
.shop-cb.on { background: var(--c-shop); border-color: var(--c-shop); }
.shop-cb.plus { border-style: dashed; color: var(--c-shop); }
.shop-txt { flex: 1; font-size: 16px; color: var(--text); }
.shop-row.done .shop-txt { text-decoration: line-through; color: var(--text-3); }
.shop-add .shop-txt { color: var(--c-shop); font-weight: 500; }
.shop-row .row-del { opacity: .8; }

/* ---------- Нижняя навигация: плавающая панель (по макету Claude Design) ----------
   Плашка отделена от края экрана и лежит на тени: r30, поверхность surface,
   hairline-кромка, мягкая тень. Активный раздел — в капсуле surface-2. */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 12;
  max-width: 520px; margin: 0 auto;
  padding: 0 8px env(safe-area-inset-bottom);
  display: flex; align-items: flex-end;
  background: var(--surface);
  border-top: .5px solid var(--line);
}
.tab {
  background: none; border: none; color: var(--text-3);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 500; cursor: pointer;
  flex: 1; min-width: 0; padding: 12px 2px 14px;
  transition: color var(--t-med) var(--ease-std);
}
.tab > span:last-child { white-space: nowrap; }
.tab-ico {
  font-size: 21px; line-height: 1; display: flex; align-items: center; justify-content: center;
  height: 23px; padding: 5px 12px; border-radius: 13px; transition: background var(--t-med) var(--ease-std);
}
.tab-ico .tab-ring { width: 21px; height: 21px; display: block; }
.tab.active { color: var(--text); font-weight: 600; }
.tab.active .tab-ico { background: var(--surface-2); }
.tab:active .tab-ico { transform: scale(.9); }
/* Узкие экраны (iPhone SE и уже): при 7–8 кнопках даём подписям воздуха —
   ужимаем горизонтальный паддинг иконки и чуть шрифт, чтобы не липли. */
@media (max-width: 380px) {
  .tab { font-size: 9px; padding-left: 0; padding-right: 0; }
  .tab-ico { padding: 5px 8px; }
}

/* центральная кнопка-логотип (прижатая панель): солнце вровень с иконками */
.tabbar.has-logo { align-items: flex-end; }
.tab-logo { flex: 1; min-width: 0; padding: 12px 2px 14px; align-self: stretch;
  display: flex; align-items: center; justify-content: center; }
.tab-logo-wrap {
  padding: 0; border-radius: 50%;
  color: var(--text); display: block;
}
.tab-logo-svg { width: 30px; height: 30px; display: block; }
.tab-logo:active .tab-logo-wrap { transform: scale(.94); }
.tab-logo-spin { transform-origin: 50px 50px; }
.tab-logo-spin-a { animation: servus-plus-spin 46s linear infinite; }
.tab-logo-spin-b { animation: servus-plus-spin 30s linear infinite reverse; }
@keyframes servus-plus-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .tab-logo-spin-a, .tab-logo-spin-b { animation: none; }
}

/* профиль «+» по центру — круглая кнопка внутри панели (сохранён как альтернатива) */
.tabbar.has-plus { align-items: flex-end; }
.tab-plus { flex: 0 0 58px; padding: 0; align-self: flex-end; }
.tab-plus-btn {
  width: 48px; height: 48px; border-radius: 50%; background: var(--gold); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 300;
  line-height: 1; box-shadow: 0 6px 16px color-mix(in srgb, var(--gold) 40%, transparent);
  margin-top: -28px;
}
.tab-plus:active .tab-plus-btn { transform: scale(.92); }

/* знак валюты — бел. рубль как SVG (Б с горизонтальной чертой, утв. 02.02.2026) */
.cur-byn { width: 1em; height: 1em; display: inline-block; vertical-align: -0.12em; }
.tab-ico .cur-byn { width: 21px; height: 21px; }
.cur-byn-sm { width: .92em; height: .92em; vertical-align: -0.08em; }
/* в крупных суммах знак чуть меньше кегля и по нижней линии цифр */
.money-total .cur-byn { width: .74em; height: .74em; align-self: center; }
.exp-rub .cur-byn { width: 1em; height: 1em; vertical-align: -0.08em; }
.money-camt .cur-byn { width: .9em; height: .9em; }

/* ---------- Настройка панели: чек-лист кнопок + drag ---------- */
.nav-pick { padding: 0; }
.nav-pick-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; position: relative; background: var(--surface); }
.nav-pick-row + .nav-pick-row::before { content: ""; position: absolute; left: 44px; right: 0; top: 0; height: .5px; background: var(--line); }
.nav-pick-row.on { background: var(--surface); }
.nav-pick-row.dragging { opacity: .6; background: var(--surface-2); }
.nav-drag { width: 18px; text-align: center; color: var(--text-3); font-size: 18px; cursor: grab; flex: none; touch-action: none; }
.nav-pick-row:not(.on) .nav-drag { visibility: hidden; }
.nav-pick-ico { width: 24px; text-align: center; font-size: 19px; color: var(--text); flex: none; display: flex; align-items: center; justify-content: center; }
.nav-pick-ico .tab-ring { width: 20px; height: 20px; }
.nav-pick-name { flex: 1; font-size: 16px; color: var(--text); cursor: pointer; }
.nav-pick-row:not(.on) .nav-pick-name, .nav-pick-row:not(.on) .nav-pick-ico { color: var(--text-3); }
.nav-check { width: 22px; height: 22px; border-radius: 50%; border: 1.6px solid var(--line); flex: none;
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 800; cursor: pointer; }
.nav-check.on { background: var(--gold); border-color: var(--gold); }

/* #4: меню «Что создать?» (по «+» на Обзоре) — сгруппированный список */
.create-menu { padding: 0; overflow: hidden; border-radius: var(--radius); }
.create-menu-row { display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px 16px; background: var(--surface); border: 0; text-align: left;
  position: relative; cursor: pointer; color: var(--text); font: inherit; }
.create-menu-row + .create-menu-row::before { content: ""; position: absolute;
  left: 48px; right: 0; top: 0; height: .5px; background: var(--line); }
.create-menu-row:active { background: var(--surface-2); }
.cm-ico { width: 26px; text-align: center; font-size: 20px; color: var(--gold);
  flex: none; display: flex; align-items: center; justify-content: center; }
.cm-ico .tab-ring { width: 20px; height: 20px; }
.cm-name { flex: 1; font-size: 16px; }
.cm-arrow { color: var(--text-3); font-size: 20px; flex: none; }

/* живое превью панели */
.nav-preview { display: flex; justify-content: space-around; align-items: flex-end;
  background: var(--surface); border: .5px solid var(--line); border-radius: 18px; padding: 10px 6px 12px; margin-bottom: 14px; }
.nav-preview.has-plus { align-items: flex-end; }
.pv-tab { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1; color: var(--text-3); font-size: 10px; font-weight: 500; }
.pv-tab.active { color: var(--text); font-weight: 600; }
.pv-ico { font-size: 20px; height: 22px; display: flex; align-items: center; justify-content: center; }
.pv-ico .tab-ring { width: 20px; height: 20px; }
.pv-plus { flex: 1; }
.pv-plus-btn { width: 40px; height: 40px; border-radius: 50%; background: var(--gold); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 300; line-height: 1;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--gold) 40%, transparent); }
.pv-logo { flex: 1; }
.pv-logo-wrap { color: var(--text); display: flex; align-items: center; justify-content: center; }
.pv-logo-wrap .tab-logo-svg { width: 26px; height: 26px; display: block; }

/* ---------- FAB «+» ---------- */
.fab {
  position: fixed; right: 18px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 15;
  width: 56px; height: 56px; border-radius: 50%; border: none;
  background: var(--gold); color: #fff; font-size: 30px; font-weight: 300; line-height: 1;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--gold) 42%, transparent); cursor: pointer;
}
.fab { transition: background var(--t-med) var(--ease-std), transform var(--t-fast) var(--ease-spring); }
.fab:active { background: var(--gold-soft); transform: scale(.9); }
/* на вкладке привычек FAB зелёный (цвет раздела) */
.fab.green { background: var(--c-habits); box-shadow: 0 8px 22px color-mix(in srgb, var(--c-habits) 42%, transparent); }
.fab.green:active { background: var(--c-habits); }
/* в финансах FAB фиолетовый (цвет раздела) */
.fab.money { background: var(--c-money); box-shadow: 0 8px 22px color-mix(in srgb, var(--c-money) 42%, transparent); }
.fab.money:active { background: var(--c-money); }
/* в дневнике FAB графитовый серо-голубой (по макету, НЕ розовый) */
.fab.diary { background: var(--c-graphite); color: var(--on-graphite); box-shadow: 0 8px 22px color-mix(in srgb, var(--c-graphite) 42%, transparent); }
.fab.diary:active { background: var(--c-graphite); }

.fab.kbju { background: var(--c-cal); box-shadow: 0 8px 22px color-mix(in srgb, var(--c-cal) 42%, transparent); }
.fab.kbju:active { background: var(--c-cal); }

.fab.shop { background: var(--c-shop); box-shadow: 0 8px 22px color-mix(in srgb, var(--c-shop) 42%, transparent); }
.fab.shop:active { background: var(--c-shop); }

/* ---------- Модальный слой ---------- */
.overlay {
  position: fixed; top: 0; left: 0; right: 0;
  /* низ оверлея поднимается над клавиатурой → лист (flex-end) садится над ней,
     а не улетает за клавиатуру. --kb ставит keyboardFix из visualViewport. */
  bottom: var(--kb, 0px); z-index: 30;
  background: rgba(0,0,0,.6);
  display: flex; align-items: flex-end; justify-content: center;
  animation: fade-in var(--t-med) var(--ease-out);
  transition: bottom var(--t-med) var(--ease-out);
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.sheet {
  width: 100%; max-width: 520px;
  background: var(--bg); border-top-left-radius: 20px; border-top-right-radius: 20px;
  border-top: 1px solid var(--line);
  padding: 20px 18px max(20px, env(safe-area-inset-bottom));
  max-height: 88vh; overflow-y: auto;
  animation: sheet-up var(--t-slow) var(--ease-out); will-change: transform;
  /* Подъём над клавиатурой делает .overlay (bottom: var(--kb)); тут margin не нужен. */
}
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
/* overlay выравнивает лист по низу; при клавиатуре — по низу видимой области */
body.kb-open .overlay { align-items: flex-end; }
.sheet-btn { transition: background var(--t-med) var(--ease-std), transform var(--t-fast) var(--ease-spring); }
.sheet-btn:active { transform: scale(.98); }
.chip { transition: background var(--t-med) var(--ease-std), border-color var(--t-med) var(--ease-std), transform var(--t-fast) var(--ease-spring); }
.chip:active { transform: scale(.94); }

/* грабер-ручка сверху листа (как в макете) */
.sheet-grabber { width: 40px; height: 5px; border-radius: 3px; background: #C4C4CC; margin: -6px auto 14px; }

/* iOS action-sheet: заголовок + карточка центр-выровненных действий + Отмена */
.card-head { padding: 0 6px 16px; }
.card-title { font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.card-sub { font-size: 14px; color: var(--text-dim); margin-top: 6px; }
.card-diary-text { font-size: 16px; color: var(--text); line-height: 1.5; white-space: pre-wrap; }
.action-list {
  background: var(--surface); border-radius: 18px; overflow: hidden; margin-bottom: 12px;
  box-shadow: var(--card-shadow);
}
.action-row {
  display: block; width: 100%; border: none; background: var(--surface);
  padding: 15px 16px; font-size: 17px; text-align: center; cursor: pointer;
  color: var(--text); text-decoration: none;
}
.action-row + .action-row { border-top: .5px solid var(--line); }
.action-row:active { background: var(--surface-2); }
.action-row.accent { color: var(--gold); }
.action-row.ok { color: var(--c-habits); font-weight: 600; }
.action-row.danger { color: var(--red); }
/* строка фазы со своим SVG-чекбоксом (без эмодзи) */
.action-row.has-check { display: flex; align-items: center; gap: 10px; text-align: left; }
.action-row.has-check .row-check { flex: none; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; }
.action-row.has-check .row-check .ic { width: 22px; height: 22px; }
.action-row.has-check .row-check.on { color: var(--gold); }   /* выполненная фаза — синяя галочка (всё синее) */
.action-row.has-check .row-label { flex: 1; }
.action-cancel {
  display: block; width: 100%; border: none;
  background: var(--surface); border-radius: 18px; box-shadow: var(--card-shadow);
  padding: 15px 16px; font-size: 17px; font-weight: 600; color: var(--gold);
  text-align: center; cursor: pointer;
}
.action-cancel:active { background: var(--surface-2); }

/* карточка «Операция» — по макету */
.op-head { text-align: center; padding: 0 6px 16px; }
.op-amount { font-size: 34px; font-weight: 800; letter-spacing: -.03em; color: var(--text); }
.op-sub { font-size: 14px; color: var(--text-dim); margin-top: 6px; }
.op-info { background: var(--surface); border-radius: 18px; overflow: hidden; margin-bottom: 12px; box-shadow: var(--card-shadow); }
.op-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.op-div { height: .5px; background: var(--line); margin-left: 16px; }
.op-ic { width: 30px; height: 30px; border-radius: 9px; color: #fff; flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; }
.op-lbl { flex: 1; font-size: 17px; color: var(--text); }
.op-val { font-size: 17px; color: var(--text-3); }
/* в карточке операции акцент действий — фиолетовый (финансы) */
.op-info + .action-list .action-row.accent { color: var(--c-money); }

.sheet-title { font-size: 20px; font-weight: 700; margin-bottom: 4px; word-wrap: break-word; }
.sheet-sub { font-size: 14px; color: var(--text-dim); margin-bottom: 16px; }
.sheet-sub .m-gold { color: var(--gold); }
.sheet-sub .m-red { color: var(--red); }

/* заголовок подтверждения/ввода (по центру для подтверждения, слева для ввода) */
.dlg-head { text-align: center; padding: 0 12px 16px; }
.dlg-head.left { text-align: left; padding: 0 4px 14px; }
.dlg-title { font-size: 19px; font-weight: 700; color: var(--text); }
.dlg-sub { font-size: 14px; color: var(--text-dim); margin-top: 6px; line-height: 1.45; }

.sheet-btn {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 13px 14px; margin-bottom: 8px;
  color: var(--text); font-size: 15px; text-align: left; cursor: pointer;
}
.sheet-btn:active { background: var(--surface-2); }
.sheet-btn.danger { color: var(--red); }
.sheet-btn.primary { background: var(--gold); color: #fff; border-color: var(--gold); font-weight: 600; justify-content: center; padding: 15px 16px; font-size: 17px; border-radius: 16px; }
/* деструктивная заливка + серый Отмена (как в макете) */
.sheet-btn.danger-fill { background: var(--red); color: #fff; border-color: var(--red); font-weight: 600; justify-content: center; padding: 15px 16px; font-size: 17px; border-radius: 16px; }
.sheet-btn.cancel { background: var(--surface-2); color: var(--c-tasks); border: none; font-weight: 600; justify-content: center; padding: 15px 16px; font-size: 17px; border-radius: 16px; }
.sheet-btn.ghost { background: none; justify-content: center; color: var(--text-dim); }

.sheet-input {
  width: 100%; background: var(--surface-2); border: 1.5px solid var(--line);
  border-radius: 14px; padding: 14px 16px; margin-bottom: 14px;
  color: var(--text); font-size: 17px; outline: none;
  transition: border-color var(--t-med) var(--ease-std);
}
.sheet-input:focus { border-color: var(--gold); }
.sheet-row { display: flex; gap: 8px; margin-bottom: 12px; }
.sheet-row .sheet-btn { margin-bottom: 0; }

/* заголовок формы (крупный) + секция-лейбл (uppercase серый) */
.form-title { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 14px; }
.form-label { font-size: 12px; font-weight: 700; color: var(--text-dim); letter-spacing: .06em; text-transform: uppercase; padding: 0 6px 8px; }

/* карточка-поле с лейблом (Что напомнить?) */
.form-field { background: var(--surface); border-radius: 18px; padding: 14px 16px; margin-bottom: 14px; box-shadow: var(--card-shadow); }
.form-flabel { font-size: 12px; font-weight: 600; color: var(--text-3); letter-spacing: .04em; text-transform: uppercase; }
.form-finput { width: 100%; border: none; background: none; outline: none; color: var(--text); font-size: 17px; margin-top: 6px; }

/* grouped: строки Время/Дата со значением справа */
.form-group { background: var(--surface); border-radius: 18px; overflow: hidden; margin-bottom: 14px; box-shadow: var(--card-shadow); }
.form-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; position: relative; }
.form-row + .form-row::before { content: ""; position: absolute; left: 16px; right: 0; top: 0; height: .5px; background: var(--line); }
.form-row:active { background: var(--surface-2); }
.fr-label { flex: 1; font-size: 17px; color: var(--text); }
.fr-value { font-size: 17px; font-weight: 600; color: var(--gold); }
.fr-chev { font-size: 17px; color: #C4C4CC; }

/* форма привычки — зелёный акцент раздела (переопределяем --gold локально) */
.sheet.habit-form { --gold: var(--c-habits); --gold-soft: var(--c-habits); }
/* акцент раздела для форм (кнопки .primary внутри листа красятся в цвет раздела, как в макете):
   финансы — фиолетовый, дневник — графит, еда — оранжевый. Задачи синие = дефолт (--gold). */
.sheet.money-form  { --gold: var(--c-money);    --gold-soft: var(--c-money); }
.sheet.diary-form  { --gold: var(--c-graphite); --gold-soft: var(--c-graphite); }
.sheet.food-form   { --gold: var(--c-cal);      --gold-soft: var(--c-cal); }
/* где акцент раздела НЕ синий (зелёный и т.п.) — «Отмена» белая, чтобы не выбиваться синим */
.sheet.habit-form .sheet-btn.cancel,
.sheet.habit-form .action-cancel,
.sheet.money-form .sheet-btn.cancel,
.sheet.money-form .action-cancel,
.sheet.diary-form .sheet-btn.cancel,
.sheet.diary-form .action-cancel,
.sheet.food-form .sheet-btn.cancel,
.sheet.food-form .action-cancel { color: var(--text); }

/* подпись под заголовком формы (дата) */
.form-subtitle { font-size: 14px; color: var(--text-dim); margin: -8px 0 16px; }
/* многострочный текст записи дневника */
.form-ftext { resize: none; min-height: 96px; line-height: 1.5; font-family: inherit; }

/* чипы тегов в форме записи — графитовый акцент как в макете */
.tag-chips { margin-bottom: 16px; }
.tag-chips .chip.on { background: var(--c-graphite, #59617A); color: var(--on-graphite, #fff); border-color: transparent; font-weight: 600; }
.chip-add { color: var(--text-dim); }
/* кнопка «Сохранить» записи — графит как в макете */
.diary-save { background: var(--c-graphite, #59617A); border-color: var(--c-graphite, #59617A); color: var(--on-graphite, #fff); }

/* iOS-переключатель (Закрепить / Составная привычка) */
.toggle-row { cursor: pointer; display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; }
.toggle-row .tr-body { flex: 1; }
.toggle-row .tr-title { font-size: 16px; font-weight: 600; color: var(--text); }
.toggle-row .tr-sub { font-size: 13px; color: var(--text-3); margin-top: 2px; }

/* Список фаз составной привычки в форме */
.phase-list { display: flex; flex-direction: column; gap: 8px; margin: 6px 0; }
.phase-item { display: flex; align-items: center; gap: 10px; background: var(--surface);
  border-radius: 12px; padding: 12px 14px; box-shadow: var(--card-shadow); }
.phase-item .phase-name { flex: 1; font-size: 15px; font-weight: 600; color: var(--text); }
.phase-item .phase-meta { font-size: 13px; color: var(--text-3); }
.phase-item .phase-del { border: none; background: none; color: var(--red, #FF3B30);
  padding: 0; line-height: 0; cursor: pointer; }
.phase-item .phase-del svg { width: 18px; height: 18px; }
.action-row.muted { color: var(--text-3); font-weight: 600; pointer-events: none; }
.ios-switch { width: 51px; height: 31px; border-radius: 16px; background: var(--line); padding: 2px;
  display: flex; flex: none; transition: background var(--t-med) var(--ease-std); }
.ios-switch.on { background: var(--c-habits, #34C759); justify-content: flex-end; }
.ios-knob { width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.2); transition: transform var(--t-med) var(--ease-spring); }

/* ---------- Форма «Новая трата» ---------- */
.exp-amount-card { background: var(--surface); border-radius: 18px; padding: 20px 16px; margin-bottom: 14px;
  box-shadow: var(--card-shadow); text-align: center; cursor: pointer; }
.exp-amount-lbl { font-size: 12px; font-weight: 600; color: var(--text-3); letter-spacing: .04em; text-transform: uppercase; }
.exp-amount-row { display: flex; align-items: center; justify-content: center; gap: 3px; margin-top: 8px; }
.exp-amount { font-size: 40px; font-weight: 800; letter-spacing: -.03em; color: var(--text); }
.exp-caret { width: 2px; height: 34px; background: var(--c-money, #7A5CF0); animation: caret-blink 1.1s step-end infinite; }
@keyframes caret-blink { 50% { opacity: 0; } }
.exp-rub { font-size: 28px; font-weight: 700; color: var(--text-3); margin-left: 4px; }

.exp-kind { display: flex; gap: 8px; margin-bottom: 16px; }
.exp-kind-btn { flex: 1; text-align: center; padding: 9px 0; border-radius: 16px; background: var(--surface);
  color: var(--text); font-size: 14px; font-weight: 500; cursor: pointer; box-shadow: var(--card-shadow); }
.exp-kind-btn.on { background: var(--c-money, #7A5CF0); color: #fff; font-weight: 600; box-shadow: none; }

.exp-cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.exp-cat { background: var(--surface); border-radius: 16px; padding: 12px 14px; display: flex; align-items: center; gap: 10px;
  cursor: pointer; box-shadow: var(--card-shadow); }
.exp-cat.on { background: var(--c-money, #7A5CF0); }
.exp-cat.on .exp-cat-name { color: #fff; font-weight: 600; }
.exp-cat.on .exp-cat-ic { background: rgba(255,255,255,.24) !important; }
.exp-cat-name { font-size: 15px; color: var(--text); }
.exp-cat-ic { width: 26px; height: 26px; border-radius: 8px; color: #fff; flex: none;
  display: flex; align-items: center; justify-content: center; }
.exp-cat-ic[data-dim] { background: var(--surface-2); color: var(--text-dim); }
.exp-ic-svg { width: 62%; height: 62%; display: block; }
/* SVG-иконка категории (напр. «Кафе») на цветной плитке — тот же размер, что глифы */
.cat-ic-svg { width: 60%; height: 60%; display: block; }
/* Микрофон-пометка голосовой записи в дневнике (вместо эмодзи 🎙) */
.diary-mic { display: inline-flex; vertical-align: -2px; margin-right: 4px; color: var(--text-dim); }
.diary-mic .ic-mic { width: 14px; height: 14px; }
.money-save { background: var(--c-money, #7A5CF0); border-color: var(--c-money, #7A5CF0); }

/* плашка-пиллы дней недели (7 равных) */
.day-pills { display: flex; gap: 6px; margin-bottom: 14px; }
.day-pill {
  flex: 1; text-align: center; padding: 9px 0; border-radius: 12px;
  background: var(--surface-2); color: var(--text-dim); font-size: 14px; font-weight: 500; cursor: pointer;
  transition: background var(--t-med) var(--ease-std), color var(--t-med) var(--ease-std);
}
.day-pill.on { background: var(--gold); color: #fff; font-weight: 700; }

/* чипы выбора (тип задачи, дни недели, числа) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chip {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; padding: 8px 14px; font-size: 14px; cursor: pointer; color: var(--text);
}
.chip.on { background: var(--gold); color: #fff; border-color: var(--gold); }
.chips.days .chip { min-width: 42px; text-align: center; padding: 8px 6px; }

/* календарь (белая карточка, круглые дни — как в макете) */
.cal-card2 { background: var(--surface); border-radius: 18px; padding: 16px; box-shadow: var(--card-shadow); margin-bottom: 14px; width: 100%; }
.cal-head { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 14px; }
.cal-head button {
  width: 34px; height: 34px; border-radius: 50%; background: var(--surface-2);
  border: none; color: var(--gold); font-size: 17px; cursor: pointer; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.cal-title { font-size: 17px; font-weight: 700; color: var(--text); }

/* ---------- Колесо «Выберите время» (макет Claude Design) ---------- */
.time-wheel {
  position: relative; background: var(--surface); border-radius: 18px;
  padding: 8px 16px; margin-bottom: 14px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 4px; height: 220px;
}
.time-wheel .tw-band {
  position: absolute; left: 12px; right: 12px; top: 50%; transform: translateY(-50%);
  height: 44px; border-radius: 12px; background: var(--surface-2); pointer-events: none;
}
.tw-col {
  position: relative; z-index: 1; width: 84px; height: 220px; overflow-y: scroll;
  scroll-snap-type: y mandatory; scrollbar-width: none;
  /* верх/низ отступ = (220-44)/2 = 88px, чтобы первая/последняя строка вставали в центр */
  padding: 88px 0;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}
.tw-col::-webkit-scrollbar { display: none; }
.tw-item {
  height: 44px; line-height: 44px; text-align: center; scroll-snap-align: center;
  font-size: 20px; color: var(--text-3); transition: color var(--t-fast) var(--ease-std), font-size var(--t-fast) var(--ease-std);
}
.tw-item.on { color: var(--text); font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.tw-colon { z-index: 1; font-size: 24px; font-weight: 700; color: var(--text); padding-bottom: 2px; }
.time-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.time-chip {
  padding: 8px 14px; border-radius: 16px; background: var(--surface);
  color: var(--gold); font-size: 14px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--line);
}
.time-chip:active { transform: scale(.95); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; width: 100%; }
.cal-dow { text-align: center; font-size: 12px; font-weight: 700; color: var(--text-3); padding-bottom: 6px; }
.cal-day {
  height: 40px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 16px; cursor: pointer; color: var(--text); margin: 0 auto; width: 40px; max-width: 100%;
}
.cal-day.empty { cursor: default; }
.cal-day.today { background: var(--tr-tasks); color: var(--gold); font-weight: 700; }
.cal-day:active { background: var(--surface-2); }

/* подзадачи — grouped-карточка (как в макете) */
.sub-card { background: var(--surface); border-radius: 18px; overflow: hidden; box-shadow: var(--card-shadow); margin-bottom: 14px; }
.sub-row { display: flex; align-items: center; gap: 12px; padding: 13px 16px; position: relative; }
.sub-row + .sub-row::before { content: ""; position: absolute; left: 50px; right: 0; top: 0; height: .5px; background: var(--line); }
.sub-box {
  width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid #C4C4CC; flex: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: transparent;
}
.sub-box.on { background: var(--gold); border-color: var(--gold); color: #fff; }
.sub-box.dashed { border-style: dashed; color: var(--gold); }
.sub-txt { flex: 1; font-size: 16px; color: var(--text); cursor: pointer; }
.sub-txt.add { color: var(--gold); }
.sub-row.done .sub-txt { text-decoration: line-through; color: var(--text-3); }
.sub-acts { display: flex; gap: 14px; flex: none; }
.sub-edit, .sub-del { background: none; border: none; cursor: pointer; font-size: 16px; padding: 0; }
.sub-edit { color: var(--gold); }
.sub-del { color: var(--red); }

/* Отрисованные SVG-иконки (карандаш/корзина) — единый размер, наследуют цвет кнопки */
.ic { width: 18px; height: 18px; display: block; }
.sub-edit .ic, .sub-del .ic, .tag-act .ic { width: 19px; height: 19px; }
.row-del { color: var(--red); }        /* корзина в строках — красная как в макете */
.row-del .ic { width: 18px; height: 18px; }
.tag-act[data-act="rename"] { color: var(--gold); }
.tag-act[data-act="del"] { color: var(--red); }

/* строку списка можно тапнуть, чтобы открыть карточку */
.item-body { cursor: pointer; }

/* ---------- Toast (тёмная пилюля со статус-точкой, как в макете) ---------- */
.toast {
  position: fixed; bottom: 84px; left: 50%; transform: translateX(-50%);
  background: rgba(28,28,31,.92);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  color: #fff; padding: 11px 18px; border-radius: 20px;
  font-size: 15px; font-weight: 600; z-index: 40;
  display: flex; align-items: center; gap: 9px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25); max-width: 90vw;
}
.toast-dot {
  width: 18px; height: 18px; border-radius: 50%; flex: none; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800;
}
.toast-dot.ok { background: var(--c-habits); }
.toast-dot.err { background: var(--red); }

/* ===== Экран «История привычки» (лист) ===== */
.hh-stats { display: flex; align-items: center; background: var(--surface); border-radius: 18px;
  box-shadow: var(--card-shadow); padding: 16px; margin: 4px 0 4px; }
.hh-stat { flex: 1; text-align: center; }
.hh-stat b { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.hh-stat small { display: block; font-size: 12px; color: var(--text-dim); margin-top: 3px; }
.hh-div { width: .5px; align-self: stretch; background: var(--line); }
.hh-grid { background: var(--surface); border-radius: 18px; box-shadow: var(--card-shadow);
  padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.hh-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
/* П.2: шапка дней недели над сеткой */
.hh-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
  padding: 0 14px; margin-top: 6px; }
.hh-dow span { text-align: center; font-size: 11px; font-weight: 700;
  color: var(--text-3); text-transform: uppercase; letter-spacing: .03em; }
/* П.2: ячейка-день с числом; тап-ячейки кликабельны */
.hh-cell { aspect-ratio: 1; border-radius: 8px; position: relative;
  display: flex; align-items: center; justify-content: center; }
.hh-num { font-size: 11px; font-weight: 600; color: var(--text-3); line-height: 1; }
.hh-cell.hh-done { background: var(--c-habits); }
.hh-cell.hh-done .hh-num { color: #fff; }
.hh-cell.hh-skip { background: var(--tr-habits); }
.hh-cell.hh-skip .hh-num { color: var(--text-dim); }
.hh-cell.hh-off  { background: var(--surface-2); }
.hh-cell.hh-future { background: transparent; border: 1.5px dashed var(--line); }
.hh-cell.hh-future .hh-num { color: var(--text-3); opacity: .5; }
.hh-cell.hh-tap { cursor: pointer; transition: transform var(--t-fast) var(--ease-spring), box-shadow var(--t-med) var(--ease-std); }
.hh-cell.hh-tap:active { transform: scale(.9); }
.hh-cell.hh-tap.hh-skip:active,
.hh-cell.hh-tap.hh-off:active { box-shadow: inset 0 0 0 1.5px var(--c-habits); }
.hh-legend { display: flex; gap: 16px; padding: 12px 4px 2px; font-size: 12px; color: var(--text-dim); }
.hh-legend span { display: flex; align-items: center; gap: 6px; }
.hh-lg { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.hh-lg.hh-done { background: var(--c-habits); }
.hh-lg.hh-skip { background: var(--tr-habits); }
.hh-lg.hh-off  { background: var(--surface-2); }
.hh-days { background: var(--surface); border-radius: 18px; box-shadow: var(--card-shadow); overflow: hidden; }
.hh-day { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: .5px solid var(--line); }
.hh-day:last-child { border-bottom: none; }
.hh-day-ic { width: 22px; height: 22px; border-radius: 50%; background: var(--c-habits); flex: none;
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 800; }
.hh-day-txt { font-size: 15px; }
/* П.2: строка отмеченного дня — тап снимает отметку */
.hh-day.hh-tap { cursor: pointer; }
.hh-day.hh-tap:active { background: var(--surface-2); }
.hh-day-x { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--text-3); }

/* ===== Экран «Запись» (деталь дневника) ===== */
.dd-date { font-size: 13px; color: var(--text-dim); margin: 2px 2px 10px; }
.dd-text { font-size: 16px; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; margin: 0 2px 12px; }
.dd-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 2px 4px; }
.dd-nav { display: flex; gap: 8px; margin-top: 8px; }
.dd-nav-btn { flex: 1; padding: 12px; border: none; border-radius: 14px; background: var(--surface-2);
  color: var(--text); font-size: 15px; font-weight: 600; cursor: pointer; }
.dd-nav-btn:disabled { opacity: .4; }
.dd-nav-btn:active:not(:disabled) { transform: scale(.97); }

/* ===== Настройки / Теги / Бюджеты / Списки / Поиск ===== */
.settings-ver { text-align: center; font-size: 13px; color: var(--text-dim); padding: 24px 0 8px; }
.more-val.over { color: var(--red); }
.wide-btn { width: 100%; margin: 12px 0 4px; padding: 14px; border: none; border-radius: 14px;
  background: var(--surface); box-shadow: var(--card-shadow); color: var(--gold); font-size: 15px;
  font-weight: 600; cursor: pointer; }
.wide-btn:active { transform: scale(.98); }
.tag-row { display: flex; align-items: center; }
.tag-act { border: none; background: transparent; font-size: 16px; padding: 4px 6px; cursor: pointer;
  color: var(--text-dim); flex: none; }
.tag-act:active { transform: scale(.9); }

.bud-total-card { background: var(--surface); border-radius: 20px; box-shadow: var(--card-shadow);
  padding: 18px; margin-bottom: 4px; cursor: pointer; }
.bud-total-label { font-size: 13px; color: var(--text-dim); }
.bud-total-num { font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin: 4px 0 12px; }
.bud-bar { height: 8px; border-radius: 5px; background: color-mix(in srgb, var(--c-money) 14%, transparent); overflow: hidden; }
.bud-fill { height: 100%; background: var(--c-money); border-radius: 5px; }
.bud-sub { font-size: 13px; color: var(--text-dim); margin-top: 8px; }

.search-bar { margin: 4px 0 12px; }
.search-bar input { width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 14px;
  border: none; background: var(--surface); box-shadow: var(--card-shadow); color: var(--text);
  font-size: 16px; outline: none; }

/* ===== Экран «Категория трат» ===== */
.cat-head-card { background: var(--surface); border-radius: 20px; box-shadow: var(--card-shadow); padding: 18px; margin-bottom: 4px; }
.cat-sum { font-size: 32px; font-weight: 800; letter-spacing: -.02em; }
.cat-delta { font-size: 14px; font-weight: 600; margin-left: 6px; }
.cat-delta.up { color: var(--red); }
.cat-delta.down { color: var(--c-habits); }
.cat-limit { font-size: 13px; color: var(--text-dim); margin-top: 6px; }
.cat-limit.over { color: var(--red); }
.cat-chart { display: flex; align-items: flex-end; gap: 8px; height: 90px; background: var(--surface);
  border-radius: 18px; box-shadow: var(--card-shadow); padding: 14px; margin: 10px 0 4px; }
.cat-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.cat-bar { width: 100%; border-radius: 6px; background: color-mix(in srgb, var(--c-money) 35%, transparent); min-height: 4px; }
.cat-bar.hot { background: var(--c-money); }
.cat-col-lbl { font-size: 11px; color: var(--text-dim); margin-top: 6px; }
.cat-op-sum { font-size: 15px; font-weight: 600; color: var(--red); flex: none; align-self: center; }

/* ===== Экран «Добавить еду» ===== */
.food-actions { display: flex; gap: 8px; margin-bottom: 4px; }
.food-act { flex: 1; padding: 12px; border: none; border-radius: 14px; background: var(--surface);
  box-shadow: var(--card-shadow); color: var(--c-cal); font-size: 14px; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px; }
.food-act:active { transform: scale(.97); }
.food-act.scan { color: var(--c-habits); }
.food-act .ic { width: 18px; height: 18px; flex: none; }
/* карандаш «редактировать» в строке переименования раздела */
.sec-name-edit .ic { width: 16px; height: 16px; display: block; }

/* П.4: полноэкранный оверлей сканера штрихкода */
#scan-overlay {
  position: fixed; inset: 0; z-index: 100; background: #000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
#scan-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scan-frame {
  position: relative; z-index: 1; width: 76%; max-width: 340px; height: 180px;
  border: 2.5px solid rgba(255,255,255,.9); border-radius: 18px;
  box-shadow: 0 0 0 100vmax rgba(0,0,0,.45); overflow: hidden;
}
.scan-line {
  position: absolute; left: 6%; right: 6%; height: 2px; top: 0;
  background: var(--c-habits); box-shadow: 0 0 8px var(--c-habits);
  animation: scan-move 1.8s ease-in-out infinite;
}
@keyframes scan-move { 0%,100% { top: 8%; } 50% { top: 92%; } }
.scan-hint {
  position: relative; z-index: 1; margin-top: 22px; color: #fff; font-size: 15px;
  font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,.6); text-align: center; padding: 0 24px;
}
.scan-actions {
  position: absolute; z-index: 2; bottom: 34px; left: 0; right: 0;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.scan-manual, .scan-close {
  border: none; border-radius: 14px; padding: 12px 26px; font-size: 15px; font-weight: 700;
  cursor: pointer;
}
.scan-manual { background: rgba(255,255,255,.16); color: #fff; }
.scan-close { background: #fff; color: #111; }
.portion-chips { display: flex; gap: 8px; margin-bottom: 10px; }
.portion-chip { flex: 1; padding: 10px; border: none; border-radius: 12px; background: var(--surface-2);
  color: var(--text); font-size: 14px; font-weight: 600; cursor: pointer; }
.portion-chip.on { background: var(--c-cal); color: #fff; }
.portion-vals { text-align: center; margin: 12px 0; }
.pv-kcal { font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.pv-macros { display: flex; justify-content: center; gap: 16px; font-size: 14px; color: var(--text-dim); margin-top: 4px; }

/* ===== Цели КБЖУ (пресеты + макросы) ===== */
.goal-presets { display: flex; gap: 8px; margin-bottom: 12px; }
.goal-preset { flex: 1; padding: 10px; border: none; border-radius: 12px; background: var(--surface-2);
  color: var(--text); font-size: 14px; font-weight: 600; cursor: pointer; }
.goal-preset:active { transform: scale(.96); background: var(--tr-cal); }
.goal-macros { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.goal-macro { display: flex; align-items: center; gap: 10px; }
.goal-macro-lbl { flex: 1; font-size: 15px; }
.goal-macro-pct { font-size: 13px; color: var(--c-cal); font-weight: 600; min-width: 40px; text-align: right; }
.goal-macro-inp { width: 80px; flex: none; margin: 0; }
.goal-switch-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 2px; }
.goal-switch-row .lbl { font-size: 15px; }
.diary-pin { margin-right: 4px; }

/* ===== Карточка-результат в ИИ-ответе ===== */
.ai-card { align-self: flex-start; max-width: 86%; display: flex; align-items: center; gap: 12px;
  background: var(--surface); border-radius: 18px; box-shadow: var(--card-shadow); padding: 12px 14px;
  margin: 2px 0; }
.ai-card-ic { width: 26px; height: 26px; border-radius: 8px; flex: none; display: flex;
  align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 800; }
/* значок-плашка карточки теперь SVG — задаём размер и белый цвет поверх .ic/.tab-ring */
.ai-card-ic svg { width: 16px; height: 16px; display: block; color: #fff; }
.ai-card-title { font-size: 15px; font-weight: 600; }
.ai-card-sub { font-size: 12px; color: var(--text-dim); margin-top: 1px; }
.ai-card-tasks  .ai-card-ic { background: var(--c-tasks); }
.ai-card-habits .ai-card-ic { background: var(--c-habits); }
.ai-card-money  .ai-card-ic { background: var(--c-money); }
.ai-card-shop   .ai-card-ic { background: var(--c-shop); }
.ai-card-diary  .ai-card-ic { background: var(--c-graphite); }
.ai-card-cal    .ai-card-ic { background: var(--c-cal); }
.ai-card-water  .ai-card-ic { background: var(--c-mail); }

/* ---------- Настройка «Уменьшить движение» ----------
   ВАЖНО: НЕ гасим все анимации целиком (иначе интерфейс кажется «рваным» —
   всё резко впрыгивает без плавности). Гасим только бесконечные крутилки/пульсации,
   которые при этой настройке реально мешают. Плавные короткие переходы оставляем —
   они не вызывают дискомфорта и делают навигацию мягкой. */
@media (prefers-reduced-motion: reduce) {
  .tab-logo-spin-a, .tab-logo-spin-b,
  .ai-mic.rec, .ai-rec-dot, .ai-rec-wave i, .exp-caret, .scan-line {
    animation: none !important;
  }
}