/* Шрифты лежат локально и НЕ грузятся с fonts.googleapis.com: внешний CDN в РФ
   регулярно подрезают, на этом уже был белый экран (история с jsdelivr, из-за
   которой supabase-js переехал в /vendor/). Файлы — ровно то, что отдаёт Google.
   Onest вариативный: один файл на веса 400–700, поэтому четыре файла (по одному
   на подмножество), а не шестнадцать. Все четыре в PRECACHE в sw.js. */
@font-face{font-family:'Onest';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/onest-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Onest';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/onest-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Onest';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/onest-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Onest';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/onest-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Caveat';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/caveat-700.woff2') format('woff2')}
*{margin:0;padding:0;box-sizing:border-box}
/* Размеры и шрифт. Цвета отсюда уехали в семантическую палитру ниже. */
:root{--nh:66px;--ff:'Onest',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif}

/* ═══ Семантическая палитра ═══════════════════════════════════════════════
   Имена — по РОЛИ, а не по цвету: при вводе тёмной темы меняется значение,
   а места использования остаются. Одинаковые значения с разной ролью
   НАМЕРЕННО не схлопнуты в одну переменную — иначе они разъедутся.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  /* ── Токены макета. Всё остальное в этом блоке выводится отсюда ────────── */
  --color-tint: #F1E7F8;              /* мягкая лиловая подложка */
  --color-surface-2: #EAE4F0;         /* сегментированные контролы, чипы */
  --color-accent-hover: #5C1888;
  --color-text-muted-2: #A79FB2;      /* третичный текст, плейсхолдеры */
  --gradient-header: linear-gradient(160deg,#8B2ECB 0%,#7A25B3 46%,#651A99 100%);
  --shadow-card: 0 1px 2px rgba(26,21,32,.05);

  /* Радиусы. Числа из макета: карточка 22–24, контрол 14–16, чип 20,
     иконка-квадрат 12–16. Круги (50%) и мелкие детали 2–5px не токенизируем. */
  --radius-card: 22px;
  --radius-control: 15px;
  --radius-chip: 20px;
  --radius-icon: 14px;
  --radius-badge: 8px;      /* мелкие подписи-бейджи: чип категории, счётчики */
  --radius-sheet: 22px;

  /* Десктопная раскладка. Значения растут на широких экранах — см. media ниже. */
  --dnav-w: 240px;   /* ширина сайдбара */
  --dpad: 26px;      /* поле страницы */
  --dgap: 20px;      /* шаг между блоками */
  --dmax: 920px;     /* предел ширины контента, чтобы строки не растягивались */
  --drail-w: 320px;  /* правая колонка «Сегодня» + легенда */

  /* Поверхности и фоны */
  --color-bg: #F7F4FA;                /* холст приложения под карточками */
  --color-surface: #fff;
  --color-surface-hover: #FAF8F5;
  --color-surface-sunken: #FBF9FC;
  --color-surface-muted: var(--color-surface-2);
  --color-surface-neutral: var(--color-surface-2);
  --color-surface-cancel: var(--color-surface-2);
  --color-surface-disabled: #DCD5E2;
  --color-track: var(--color-surface-2);
  --color-toast-surface: #2A2136;
  --color-code-surface: #1d1526;
  --color-code-text: #eee;

  /* Текст */
  --color-text: #1A1520;
  --color-text-muted: #8B8296;        /* вторичный текст: подписи, счётчики */
  --color-text-strong: #1A1520;
  --color-text-faint: var(--color-text-muted-2);
  --color-text-placeholder: var(--color-text-muted-2);
  --color-text-disabled: var(--color-text-muted-2);
  --color-text-icon-muted: var(--color-text-muted-2);

  /* Текст поверх акцентного фона */
  --color-text-on-accent: #fff;
  --color-text-on-accent-strong: rgba(255,255,255,.9);
  --color-text-on-accent-muted: rgba(255,255,255,.7);

  /* Границы */
  /* Макет разводит две роли, которые в --bd были склеены: тонкий разделитель
     строк (--bd, #F0ECF4) и чуть более заметная рамка поля ввода. */
  --color-border: #F0ECF4;            /* разделитель строк в карточке */
  --color-border-input: var(--color-surface-2);
  --color-checkbox-border: #D6CEDE;
  --color-border-neutral-strong: var(--color-surface-2);
  --color-border-subtle: rgba(26,21,32,.08);
  --color-border-on-accent: #fff;
  --color-border-on-accent-soft: rgba(255,255,255,.3);
  --color-status-none-border: var(--color-text-muted-2);

  /* Акцент (фиолетовый).
     Одиннадцать почти неотличимых лиловых подложек макет сводит к двум —
     tint и surface-2. Имена оставлены, чтобы не трогать 200+ мест
     употребления; если где-то потеряется иерархия, развести обратно можно
     в срезе того раздела. */
  --color-accent: #7A25B3;
  --color-accent-light: #9B4DD6;
  --color-accent-text: #7A25B3;
  --color-accent-surface: var(--color-tint);
  --color-accent-surface-hover: var(--color-tint);
  --color-accent-surface-hover-strong: var(--color-surface-2);
  --color-accent-surface-info: var(--color-tint);
  --color-accent-surface-icon: var(--color-tint);
  --color-accent-surface-tag: var(--color-tint);
  --color-accent-surface-badge: var(--color-tint);
  --color-accent-surface-badge-strong: var(--color-surface-2);
  --color-accent-surface-action: var(--color-tint);
  --color-accent-surface-status: var(--color-tint);
  --color-accent-border-soft: var(--color-surface-2);
  --color-accent-border-info: var(--color-surface-2);
  --color-accent-border-action: var(--color-surface-2);
  --color-accent-shadow: rgba(122,37,179,.08);
  --color-accent-surface-ghost: rgba(122,37,179,.12);

  /* Состояние: успех. Пара из макета — ok bg/fg #EFF5F1 / #2E7D5B */
  --color-success-text: #2E7D5B;
  --color-success-strong: #2E7D5B;
  --color-success-border: #2E7D5B;
  --color-success-border-soft: #CDE3D8;
  --color-success-surface: #EFF5F1;
  --color-success-strong-action: #2E7D5B;
  --color-success-border-note: #CDE3D8;
  --color-success-text-note: #2E7D5B;
  /* Кратковременная подсветка поля после успешного действия */
  --color-success-surface-flash: #EFF5F1;
  --color-success-border-flash: #CDE3D8;
  --color-success-text-flash: #2E7D5B;
  --color-online-dot: #6FBF95;
  --color-offline-dot: #E08E7A;

  /* Состояние: предупреждение и «скоро». Пара из макета — warn bg/fg #F7EFD8 / #8A6A12 */
  --color-warning-text: #8A6A12;
  --color-warning-text-alt: #8A6A12;
  --color-warning-text-dark: #8A6A12;
  --color-warning-strong: #C98A16;
  --color-warning-border: #C98A16;
  --color-warning-border-soft: #EADFC0;
  --color-warning-border-strong: #C98A16;
  --color-warning-border-alt: #C98A16;
  --color-warning-badge: #C98A16;
  --color-warning-surface: #F7EFD8;
  --color-warning-surface-soft: #F7EFD8;
  --color-warning-surface-hover: #F2E7CB;
  --color-warning-surface-status: #F7EFD8;
  --color-soon-surface: #F7EFD8;
  --color-soon-border: #C98A16;
  --color-warning-text-soon: #8A6A12;
  /* Информационные плашки «раздел в разработке» и детский календарь.
     Пара note из макета — bg/fg #F4EFE4 / #6B5F3E */
  --color-warning-surface-note: #F4EFE4;
  --color-warning-surface-child: #F4EFE4;
  --color-warning-border-note: #E2D9C4;
  --color-warning-text-note: #6B5F3E;

  /* Состояние: ошибка и просрочено. Пара из макета — bad bg/fg #FBEDEA / #A8402B */
  --color-danger-text: #A8402B;
  --color-danger-text-strong: #A8402B;
  --color-danger-text-dark: #A8402B;
  --color-danger-strong: #A8402B;
  --color-danger-border: #A8402B;
  --color-danger-border-light: #EFCFC7;
  --color-danger-border-soft: #EFCFC7;
  --color-danger-border-warn: #EFCFC7;
  --color-danger-border-chip: #EFCFC7;
  --color-danger-surface: #FBEDEA;
  --color-danger-surface-soft: #FBEDEA;
  --color-danger-surface-light: #FBEDEA;
  --color-danger-overlay: rgba(168,64,43,.9);
  /* Разрушительное действие: удалить семью, исключить участника, отвязать.
     Ярче, чем danger-text: это не статус записи, а предупреждение о кнопке. */
  --color-destructive: #e53935;

  /* Бейджи и счётчики */
  --color-badge-count: #A8402B;
  --color-badge-alert: #A8402B;
  --color-badge-overlay: rgba(26,21,32,.12);

  /* Режим «только просмотр» */
  --color-readonly-surface: #fff3d6;
  --color-readonly-surface-end: #ffe9b3;
  --color-readonly-border: #f0d496;
  --color-readonly-text: #7a5403;

  /* Календарь */
  --color-calendar-today-surface: var(--color-tint);
  --color-calendar-event-surface: var(--color-surface-2);
  --color-calendar-range-surface: var(--color-tint);
  --color-calendar-range-surface-soft: rgba(122,37,179,.06);
  --color-calendar-range-border-soft: rgba(122,37,179,.4);
  --color-calendar-range-edge: var(--color-surface-2);
  --color-holiday-surface: #F7EAE7;
  --color-weekend-surface: #F7EAE7;
  /* Число субботы, воскресенья и праздника. Совпадает по значению с
     --color-destructive, но роль другая: выходной — не ошибка. */
  --color-weekend-text: #e53935;
  /* Событие без категории или с удалённой категорией */
  --color-category-fallback: #aaa;

  /* Дни рождения */
  --color-birthday-surface: #F6E7EF;
  --color-birthday-text: #A8386F;
  --color-birthday-dot: #A8386F;
  --color-birthday-glow: rgba(168,56,111,.5);

  /* Карточки записей: задача, еда, справка */
  --color-meal-surface: #fefce8;
  --color-info-surface: var(--color-tint);
  /* Плашка «пара слов о медданных». В макете она на note-подложке, не на синей */
  --color-info-surface-note: #F4EFE4;
  --color-info-text-note: #6B5F3E;

  /* Раздел «Еда» */
  --color-food-gap-surface: #fbe0e0;
  --color-food-gap-border: #f0b8b8;
  --color-food-cook-surface: #fff5e6;
  --color-food-cook-border: #f0dcc0;
  --color-food-cook-text: #8a5a00;
  --color-food-soup-surface: #cfe4f7;
  --color-food-soup-text: #1a5680;
  /* Подложки компонентов в плане готовки: перебираются по кругу (F_COL) */
  --color-food-comp-1: #e0dcf7;
  --color-food-comp-2: #c8ecdd;
  --color-food-comp-3: #fbd9c8;
  --color-food-comp-4: #cfe4f7;
  --color-food-comp-5: #f7d4e0;
  --color-food-comp-6: #dcedc8;

  /* Категории покупок: чип автокатегоризации, пара «текст / подложка».
     Порядок и ключи — как в SC (см. ниже по файлу). В БД хранится ключ
     категории, а не цвет, поэтому смена значений здесь ничего не ломает. */
  --color-cat-dairy-fg: #2C5F8F;      --color-cat-dairy-bg: #E8EFF6;
  --color-cat-cheese-fg: #8A6A12;     --color-cat-cheese-bg: #F4EFE0;
  --color-cat-meat-fg: #A8402B;       --color-cat-meat-bg: #F6E9E6;
  --color-cat-fish-fg: #1F6E6E;       --color-cat-fish-bg: #E4F0EF;
  --color-cat-fruits-fg: #A83A55;     --color-cat-fruits-bg: #F6E8EC;
  --color-cat-vegs-fg: #2E7D5B;       --color-cat-vegs-bg: #E6F1EB;
  --color-cat-bakery-fg: #8A5A2B;     --color-cat-bakery-bg: #F4EBE3;
  --color-cat-semi-fg: #6B3FA0;       --color-cat-semi-bg: #EEE8F6;
  --color-cat-grains-fg: #6E6A22;     --color-cat-grains-bg: #F0EFE1;
  --color-cat-drinks-fg: #2A6591;     --color-cat-drinks-bg: #E6EFF6;
  --color-cat-sweets-fg: #A8386F;     --color-cat-sweets-bg: #F6E7EF;
  --color-cat-snacks-fg: #85601A;     --color-cat-snacks-bg: #F3EDE0;
  --color-cat-eggs-fg: #8A5F22;       --color-cat-eggs-bg: #F4ECE1;
  --color-cat-frozen-fg: #2C6E8F;     --color-cat-frozen-bg: #E5F0F5;
  --color-cat-house-fg: #4F6357;      --color-cat-house-bg: #EAEFEB;
  --color-cat-hygiene-fg: #6B4FA0;    --color-cat-hygiene-bg: #EEE9F6;
  --color-cat-pharmacy-fg: #7A25B3;   --color-cat-pharmacy-bg: var(--color-tint);
  --color-cat-other-fg: #6E6579;      --color-cat-other-bg: var(--color-surface-2);

  /* Раздел Wildberries */
  --color-wb: #cb11ab;                /* фирменный цвет площадки */
  --color-wb-surface: #fdf0fb;
  --color-wb-surface-item: #fdf8fe;
  --color-wb-surface-new: #fef5fd;
  --color-wb-alert-surface: #fff0f0;
  --color-wb-border: #f0b8e8;
  --color-wb-code-surface: rgba(203,17,171,.1);

  /* Затемнения, тени, полупрозрачные слои */
  --color-overlay-light: rgba(255,255,255,.2);
  --color-overlay-lighter: rgba(255,255,255,.15);
  --color-overlay-light-badge: rgba(255,255,255,.25);
  --color-backdrop: rgba(26,21,32,.45);
  --color-lightbox-backdrop: rgba(26,21,32,.92);
  --color-backdrop-light: rgba(26,21,32,.2);
  --color-backdrop-strong: rgba(26,21,32,.4);
  --color-shadow: rgba(26,21,32,.18);
  /* Кнопки, у которых заливка задумывалась, но переменная не была объявлена —
     28 мест молча рендерились прозрачными (баг из бэклога, найден 09.08). */
  --bg2: var(--color-surface-2);
}
body{font-family:var(--ff);background:var(--color-bg);color:var(--color-text);max-width:480px;margin:0 auto;padding-bottom:var(--nh)}
.page{display:none}.page.active{display:block}