/*
 * Re:fresh — единая система оформления.
 *
 * Здесь всё, из чего собираются экраны: цвета, шрифт, скругления, тени, отступы
 * (токены --rf-*) и общие элементы (.rf-*). Экраны берут значения отсюда, а не
 * прописывают свои. Подключается после styles.css.
 *
 * Цвет бренда — одна группа переменных --rf-brand*. Осенью (html.season-autumn,
 * core/season.js) зелёный сменяется тыквенно-оранжевым во всём приложении сразу.
 */

/* ─── Токены ──────────────────────────────────────────────────────────────── */

:root {
    /* Поверхности и текст */
    --rf-ground: #f5f7f4;        /* фон всех экранов */
    --rf-surface: #ffffff;       /* карточки */
    --rf-ink: #17211c;           /* основной текст */
    --rf-muted: #5f6b64;         /* вторичный текст, подписи */
    --rf-line: #e3e8e4;          /* разделители, дорожки прогресса */
    --rf-photo: #dce5df;         /* подложка фото, пока картинка грузится */

    /* Бренд: заливка (белый текст поверх), текст и иконки, светлые подложки */
    --rf-brand: #1e7a55;
    --rf-brand-soft: #3e9b74;
    --rf-brand-ink: #1e7a55;
    --rf-brand-tint: #e6f2ec;
    --rf-brand-line: #c9e3d5;
    --rf-on-brand: #ffffff;

    --rf-pumpkin: #e8772e;       /* только сезонные знаки */

    /* Иконки разделов: разделы различаются цветом иконки, а не фоном экрана */
    --rf-sec-nutrition: var(--rf-brand-ink);
    --rf-sec-nutrition-bg: var(--rf-brand-tint);
    --rf-sec-activity: #7a4a9c;
    --rf-sec-activity-bg: #f1eaf7;
    --rf-sec-diagnostics: #2d5fb8;
    --rf-sec-diagnostics-bg: #e7eefa;
    --rf-sec-notes: #9a5b0b;
    --rf-sec-notes-bg: #faf0dc;

    /* Шрифт — только Nunito */
    --rf-font: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Формы: 12 — миниатюры и поля, 20 — карточки, 28 — крупные фото и панель */
    --rf-r-sm: 0.75rem;
    --rf-r-md: 1.25rem;
    --rf-r-lg: 1.75rem;
    --rf-shadow-1: 0 1px 2px rgba(23, 33, 28, 0.06), 0 1px 1px rgba(23, 33, 28, 0.04);
    --rf-shadow-2: 0 8px 24px rgba(23, 33, 28, 0.1);
    --rf-scrim: linear-gradient(180deg, rgba(12, 22, 17, 0) 30%, rgba(12, 22, 17, 0.66) 100%);

    /* Отступы: поля экрана, верх под вырез, низ под нижнюю панель */
    --rf-gutter: 1.25rem;
    --rf-top: calc(1.5rem + env(safe-area-inset-top, 0px));
    --rf-nav-gap: max(0.75rem, env(safe-area-inset-bottom, 0px));   /* панель над краем экрана */
    --rf-nav-clear: calc(6.75rem + var(--rf-nav-gap));               /* панель + кнопка камеры над ней */
}

html.season-autumn {
    --rf-ground: #f7f4f0;
    --rf-photo: #e8dfd6;
    --rf-brand: #c2570f;
    --rf-brand-soft: #e8772e;
    --rf-brand-ink: #b4500e;
    --rf-brand-tint: #fcebdd;
    --rf-brand-line: #f6d3b5;
}

html.theme-dark {
    --rf-ground: #0b1026;
    --rf-surface: rgba(20, 27, 55, 0.85);
    --rf-ink: rgba(255, 255, 255, 0.94);
    --rf-muted: rgba(200, 210, 230, 0.78);
    --rf-line: rgba(255, 255, 255, 0.1);
    --rf-photo: #1a2140;
    --rf-brand: #23855e;
    --rf-brand-soft: #3cc08f;
    --rf-brand-ink: #6ee0b0;
    --rf-brand-tint: rgba(60, 192, 143, 0.16);
    --rf-brand-line: rgba(60, 192, 143, 0.32);
    --rf-sec-activity: #c9a3e6;
    --rf-sec-activity-bg: rgba(201, 163, 230, 0.16);
    --rf-sec-diagnostics: #8fb2f0;
    --rf-sec-diagnostics-bg: rgba(143, 178, 240, 0.16);
    --rf-sec-notes: #f0c27a;
    --rf-sec-notes-bg: rgba(240, 194, 122, 0.16);
    --rf-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
    --rf-shadow-2: 0 8px 24px rgba(0, 0, 0, 0.4);
}

html.theme-dark.season-autumn {
    --rf-brand: #c2570f;
    --rf-brand-soft: #f08a3c;
    --rf-brand-ink: #fdba74;
    --rf-brand-tint: rgba(240, 138, 60, 0.16);
    --rf-brand-line: rgba(240, 138, 60, 0.32);
}

/* ─── Основа ─────────────────────────────────────────────────────────────── */

body {
    font-family: var(--rf-font);
    color: var(--rf-ink);
}

/* Один фон у всех экранов; разделы больше не красят страницу в свой цвет */
html:not(.theme-dark),
html:not(.theme-dark) body,
html.theme-workout:not(.theme-dark),
html.theme-analysis:not(.theme-dark) {
    background-color: var(--rf-ground);
}
html:not(.theme-dark) .mesh-bg,
#orb-1,
#orb-2,
#orb-3 {
    display: none;
}

/* ─── Текст ──────────────────────────────────────────────────────────────── */

.rf-title {
    margin: 0;
    font-size: 1.875rem;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--rf-ink);
}
.rf-subtitle {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.45;
    font-weight: 500;
    color: var(--rf-muted);
}
.rf-h2 {
    margin: 0;
    font-size: 1.375rem;
    line-height: 1.27;
    font-weight: 800;
    color: var(--rf-ink);
}
.rf-card-title {
    font-size: 1.0625rem;
    line-height: 1.3;
    font-weight: 700;
    color: var(--rf-ink);
}
.rf-text {
    font-size: 0.9375rem;
    line-height: 1.45;
    font-weight: 500;
}
.rf-caption {
    font-size: 0.8125rem;
    line-height: 1.38;
    font-weight: 600;
    color: var(--rf-muted);
}
.rf-label {
    font-size: 0.6875rem;
    line-height: 1.45;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rf-muted);
}

/* ─── Экран ──────────────────────────────────────────────────────────────── */

/* Обычный экран: поля 20, сверху место под вырез, снизу — под нижнюю панель */
.rf-screen {
    box-sizing: border-box;
    min-height: 100%;
    padding: var(--rf-top) var(--rf-gutter) var(--rf-nav-clear);
    background: var(--rf-ground);
    color: var(--rf-ink);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
html.theme-dark .rf-screen {
    background: transparent;
}

/* Верхняя строка: «назад» слева, действие справа */
.rf-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 2.75rem;
}
.rf-header {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.rf-section {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.rf-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

/* ─── Кнопки ─────────────────────────────────────────────────────────────── */

/* Круглая кнопка-иконка: «назад», настройки, уведомления */
.rf-icon-btn {
    position: relative;
    width: 2.75rem;
    height: 2.75rem;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--rf-surface);
    color: var(--rf-ink);
    box-shadow: var(--rf-shadow-1);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s ease;
}
.rf-icon-btn:active {
    transform: scale(0.92);
}
.rf-icon-btn svg {
    width: 1.375rem;
    height: 1.375rem;
}
/* Включённая кнопка-иконка (фильтры открыты) */
.rf-icon-btn.is-on {
    background: var(--rf-brand);
    color: var(--rf-on-brand);
}
/* Счётчик на кнопке-иконке */
.rf-count {
    position: absolute;
    top: -0.125rem;
    right: -0.125rem;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--rf-ink);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 800;
    box-shadow: 0 0 0 2px var(--rf-ground);
}
/* Кнопки «−»/«+» (порции) */
.rf-stepper {
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--rf-brand-tint);
    color: var(--rf-brand-ink);
    font-family: inherit;
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.rf-stepper:active {
    transform: scale(0.92);
}

/* Стрелки и дата в переключателе дня (дневник) */
.rf-daynav {
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--rf-muted);
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.rf-daynav:disabled {
    opacity: 0.3;
    cursor: default;
}
.rf-daynav svg {
    width: 1.125rem;
    height: 1.125rem;
}

/* «Назад» поверх экрана, у которого нет своей верхней строки */
.rf-back-floating {
    position: absolute;
    top: calc(0.75rem + env(safe-area-inset-top, 0px));
    left: var(--rf-gutter);
    z-index: 60;
}

.rf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 3rem;
    padding: 0 1.5rem;
    border: 0;
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s ease, filter 0.15s ease;
}
.rf-btn:active {
    transform: scale(0.97);
}
.rf-btn:disabled {
    opacity: 0.5;
    cursor: default;
}
.rf-btn svg {
    width: 1.125rem;
    height: 1.125rem;
}
.rf-btn--primary {
    background: var(--rf-brand);
    color: var(--rf-on-brand);
}
.rf-btn--secondary {
    background: var(--rf-brand-tint);
    color: var(--rf-brand-ink);
}
/* Нейтральная: «Выйти из аккаунта» */
.rf-btn--plain {
    background: var(--rf-surface);
    color: var(--rf-ink);
    box-shadow: var(--rf-shadow-1);
}
/* Тихая: «Очистить кэш» */
.rf-btn--ghost {
    background: transparent;
    color: var(--rf-muted);
}
.rf-btn--sm {
    height: 2.75rem;
    padding: 0 1rem;
}

/* Сегмент выбора: «Русский | Deutsch» */
.rf-seg {
    height: 2rem;
    padding: 0 0.75rem;
    border: 0;
    border-radius: 999px;
    background: var(--rf-ground);
    color: var(--rf-muted);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.rf-seg.is-on {
    background: var(--rf-brand);
    color: var(--rf-on-brand);
}

/* Переключатель (тёмная тема) — в цвет бренда */
.theme-toggle-track.active {
    background: var(--rf-brand);
}
.rf-btn--block {
    width: 100%;
}
/* Ссылка-действие: «Дневник ›» */
.rf-link {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    min-height: 2.75rem;
    padding: 0 0.375rem;
    border: 0;
    background: transparent;
    color: var(--rf-brand-ink);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 800;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.rf-link svg {
    width: 1.125rem;
    height: 1.125rem;
}

/* Метка: «Скоро», «Бета», «Участник клуба» */
.rf-pill {
    display: inline-flex;
    align-items: center;
    height: 1.5rem;
    padding: 0 0.625rem;
    border-radius: 999px;
    background: var(--rf-surface);
    color: var(--rf-ink);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}
.rf-pill--brand {
    background: var(--rf-brand-tint);
    color: var(--rf-brand-ink);
}

/* Поле ввода и поиск */
.rf-input {
    width: 100%;
    height: 3rem;
    padding: 0 1rem;
    border: 1px solid transparent;
    border-radius: var(--rf-r-md);
    background: var(--rf-surface);
    box-shadow: var(--rf-shadow-1);
    color: var(--rf-ink);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 500;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.rf-input::placeholder {
    color: var(--rf-muted);
}
.rf-input:focus {
    border-color: var(--rf-brand);
    box-shadow: 0 0 0 3px var(--rf-brand-tint);
}
.rf-search {
    position: relative;
}
.rf-search > svg,
.rf-search > i {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    width: 1.125rem;
    height: 1.125rem;
    transform: translateY(-50%);
    color: var(--rf-muted);
    pointer-events: none;
}
.rf-search .rf-input {
    padding-left: 2.625rem;
}

/* ─── Карточки ───────────────────────────────────────────────────────────── */

.rf-card {
    background: var(--rf-surface);
    border-radius: var(--rf-r-md);
    box-shadow: var(--rf-shadow-1);
}

/* Фото-карточка раздела: фото, затемнение снизу, белый заголовок */
.rf-photo-card {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    isolation: isolate;
    padding: 0;
    border: 0;
    border-radius: var(--rf-r-md);
    background: var(--rf-photo);
    color: #fff;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.2s ease;
}
.rf-photo-card:active {
    transform: scale(0.98);
}
.rf-photo-card--lg {
    border-radius: var(--rf-r-lg);
}
.rf-photo-card__img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.rf-photo-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--rf-scrim);
}
.rf-photo-card__badge {
    position: absolute;
    left: 0.875rem;
    top: 0.875rem;
}
.rf-photo-card__body {
    position: absolute;
    left: 1.125rem;
    right: 1rem;
    bottom: 0.875rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
}
.rf-photo-card__text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}
.rf-photo-card__title {
    font-size: 1.375rem;
    line-height: 1.27;
    font-weight: 800;
    color: #fff;
}
.rf-photo-card--sm .rf-photo-card__title {
    font-size: 1.0625rem;
}
.rf-photo-card__sub {
    font-size: 0.8125rem;
    line-height: 1.38;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
}
.rf-photo-card__chev {
    width: 2rem;
    height: 2rem;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.24);
    color: #fff;
}
.rf-photo-card__chev svg {
    width: 1.125rem;
    height: 1.125rem;
}
.rf-photo-card.is-locked .rf-photo-card__img {
    filter: grayscale(0.55);
}
/* Кнопка в правом верхнем углу фото: отчёт, замок */
.rf-photo-card__corner {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.24);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    cursor: pointer;
}
.rf-photo-card__corner svg {
    width: 1.125rem;
    height: 1.125rem;
}
/* Кнопка поверх фото: белая */
.rf-btn--on-photo {
    background: #fff;
    color: var(--rf-ink);
}

/* Карточка-строка: миниатюра, метка, название, подпись */
.rf-row-card {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    width: 100%;
    padding: 0.75rem 0.875rem 0.75rem 0.75rem;
    border: 0;
    border-radius: var(--rf-r-md);
    background: var(--rf-surface);
    box-shadow: var(--rf-shadow-1);
    color: var(--rf-ink);
    text-align: left;
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.rf-row-card__thumb {
    width: 4rem;
    height: 4rem;
    flex: none;
    border-radius: var(--rf-r-sm);
    object-fit: cover;
    background: var(--rf-photo);
}
.rf-row-card__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}
.rf-row-card__chev {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--rf-muted);
}

/* Блюдо дня: карточка-строка, раскрывается в рецепт (handlers/cardToggles.js) */
.rf-meal {
    position: relative;
    overflow: hidden;
    border-radius: var(--rf-r-md);
    background: var(--rf-surface);
    box-shadow: var(--rf-shadow-1);
    cursor: pointer;
    transition: box-shadow 0.3s ease;
}
.rf-meal.meal-expanded {
    z-index: 10;
    box-shadow: var(--rf-shadow-2);
}
.rf-meal__head {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.75rem 0.5rem 0.75rem 0.75rem;
}
.rf-meal .meal-thumb {
    position: relative;
    width: 4rem;
    height: 4rem;
    flex: none;
    overflow: hidden;
    border-radius: var(--rf-r-sm);
    background: var(--rf-photo);
    transition: width 0.4s cubic-bezier(0.32, 0.72, 0, 1), height 0.4s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.3s ease, margin 0.4s ease;
}
.rf-meal .meal-chevron {
    flex: none;
    display: flex;
    color: var(--rf-muted);
    transition: transform 0.4s ease;
}
.rf-meal__fav {
    width: 2.75rem;
    height: 2.75rem;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: -0.375rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--rf-muted);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.rf-meal__fav.is-on {
    color: #e11d48;
}
.rf-meal__fav.is-on svg {
    fill: currentColor;
}

/* Крупное фото (обложка дня, урока) */
.rf-cover {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--rf-r-lg);
    background: var(--rf-photo);
}

/* Маркер списка */
.rf-dot {
    width: 0.375rem;
    height: 0.375rem;
    flex: none;
    margin-top: 0.5rem;
    border-radius: 999px;
    background: var(--rf-brand);
}

/* Чип выбора: урок курса, категория рецептов */
.rf-lesson-chip {
    flex: none;
    min-width: 5.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.625rem 0.875rem;
    border: 0;
    border-radius: var(--rf-r-md);
    background: var(--rf-surface);
    color: var(--rf-muted);
    box-shadow: var(--rf-shadow-1);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    scroll-snap-align: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.rf-lesson-chip:active {
    transform: scale(0.95);
}
.rf-lesson-chip svg {
    width: 1.25rem;
    height: 1.25rem;
}
.rf-lesson-chip.is-current {
    background: var(--rf-brand);
    color: var(--rf-on-brand);
    font-weight: 800;
}

/* Квадратик с иконкой раздела */
.rf-tile-icon {
    width: 2.25rem;
    height: 2.25rem;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--rf-r-sm);
    background: var(--rf-brand-tint);
    color: var(--rf-brand-ink);
}
.rf-tile-icon svg {
    width: 1.125rem;
    height: 1.125rem;
}

/* Полоса прогресса */
.rf-progress {
    height: 0.5rem;
    border-radius: 999px;
    background: var(--rf-line);
    overflow: hidden;
}
.rf-progress > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--rf-brand);
}

/* ─── Выбор дня ──────────────────────────────────────────────────────────── */
/* Сегодня — заливка бренда, обычные дни — белые, дни поста — светлая подложка бренда,
   закрытые — без фона с замком. Классы выдаёт utils/carousel.js (getFmdDayStyles и др.). */

.rf-daybar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: var(--rf-top) 0 0.75rem var(--rf-gutter);
    flex-shrink: 0;
    position: relative;
    z-index: 50;
}
/* Содержимое дня под строкой выбора дня (components/ui.js DAY_PANEL_CLASS) */
.rf-day-panel {
    padding: 0.5rem var(--rf-gutter) var(--rf-nav-clear);
}
.rf-daybar__days {
    position: relative;
    flex: 1;
    min-width: 0;
}
.rf-daybar__fade {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 10;
    width: 1.5rem;
    pointer-events: none;
}
.rf-daybar__fade--l {
    left: 0;
    background: linear-gradient(to right, var(--rf-ground), transparent);
}
.rf-daybar__fade--r {
    right: 0;
    background: linear-gradient(to left, var(--rf-ground), transparent);
}
html.theme-dark .rf-daybar__fade {
    display: none;
}
.rf-day-chip {
    position: relative;
    z-index: 20;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
    padding: 0;
    border: 0;
    border-radius: var(--rf-r-md);
    background: var(--rf-surface);
    color: var(--rf-ink);
    box-shadow: var(--rf-shadow-1);
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.rf-day-chip:active {
    transform: scale(0.95);
}
.rf-day-chip__label {
    font-size: 0.5625rem;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rf-muted);
}
.rf-day-chip__label:empty {
    display: none;
}
.rf-day-chip__num {
    font-size: 1.0625rem;
    line-height: 1.1;
    font-weight: 800;
}
.rf-day-chip__num--word {
    font-size: 0.8125rem;
}
.rf-day-chip.is-fmd {
    background: var(--rf-brand-tint);
    color: var(--rf-brand-ink);
    box-shadow: none;
}
.rf-day-chip.is-fmd .rf-day-chip__label {
    color: var(--rf-brand-ink);
}
.rf-day-chip.is-current {
    background: var(--rf-brand);
    color: var(--rf-on-brand);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--rf-brand) 28%, transparent);
}
.rf-day-chip.is-current .rf-day-chip__label {
    color: color-mix(in srgb, var(--rf-on-brand) 80%, transparent);
}
.rf-day-chip.is-locked {
    background: transparent;
    color: var(--rf-muted);
    box-shadow: none;
    opacity: 0.6;
    cursor: not-allowed;
}
.rf-day-chip__icon {
    width: 1rem;
    height: 1rem;
}
.rf-day-chip svg.rf-day-chip__icon,
.rf-day-chip .rf-day-chip__icon svg {
    width: 1rem;
    height: 1rem;
}
.rf-day-chip.is-current .rf-day-chip__label {
    font-size: 0.5625rem;
}
.rf-day-chip__lock {
    position: absolute;
    top: 0.25rem;
    right: 0.3125rem;
    width: 0.625rem;
    height: 0.625rem;
    color: var(--rf-muted);
}

/* ─── Нижняя панель ──────────────────────────────────────────────────────── */
/* Всегда «Главная», камера, «Профиль». Единственное место, где есть стекло. */

.rf-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    pointer-events: none;
}
.rf-nav__wrap {
    max-width: 430px;
    margin: 0 auto;
    padding: 0 var(--rf-gutter) var(--rf-nav-gap);
}
.rf-nav__bar {
    position: relative;
    height: 4rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    pointer-events: auto;
    border-radius: var(--rf-r-lg);
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid rgba(23, 33, 28, 0.06);
    box-shadow: var(--rf-shadow-2);
}
html.theme-dark .rf-nav__bar {
    background: rgba(15, 20, 45, 0.85);
    border-color: rgba(100, 130, 200, 0.15);
}
.rf-nav__item {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--rf-muted);
    font-family: inherit;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s ease, color 0.2s ease;
}
.rf-nav__item:active {
    transform: scale(0.92);
}
.rf-nav__item.is-active {
    color: var(--rf-brand-ink);
    font-weight: 800;
}
.rf-nav__icon {
    position: relative;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rf-nav__icon svg {
    width: 1.5rem;
    height: 1.5rem;
}
.rf-nav__item.is-active [data-nav-icon='home'] svg:not(.season-pumpkin-svg) {
    fill: color-mix(in srgb, currentColor 14%, transparent);
}
/* Осенью на «Главной» — цветная тыква (core/season.js); на неактивной вкладке приглушена */
.rf-nav__icon .season-pumpkin-svg {
    width: 1.75rem;
    height: 1.75rem;
    transition: filter 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}
.rf-nav__item:not(.is-active) .rf-nav__icon .season-pumpkin-svg {
    filter: grayscale(1);
    opacity: 0.55;
}
.rf-nav__item.is-active .rf-nav__icon .season-pumpkin-svg {
    transform: scale(1.06);
}
.rf-nav__center {
    display: flex;
    justify-content: center;
}
.rf-nav__fab {
    position: relative;
    width: 3.75rem;
    height: 3.75rem;
    margin-top: -1.875rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid var(--rf-ground);
    border-radius: 999px;
    background: var(--rf-brand);
    color: var(--rf-on-brand);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--rf-brand) 30%, transparent);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s ease;
}
.rf-nav__fab:active {
    transform: scale(0.92);
}
.rf-nav__fab svg {
    width: 1.625rem;
    height: 1.625rem;
}

/* ─── Старые зелёные классы → цвет бренда ────────────────────────────────── */
/* Тот же набор классов, что в скомпилированном Tailwind (styles.css), но с цветом
   из токенов, чтобы экраны, ещё не переведённые на систему, тоже меняли цвет бренда
   вместе с сезоном. Оттенки 50–100 → --rf-brand-tint, 200–300 → --rf-brand-line,
   400 → --rf-brand-soft, 500–600 → --rf-brand (текст — --rf-brand-ink),
   700 и темнее → --rf-brand-ink. */

.border-emerald-100{border-color:var(--rf-brand-tint)}
.border-emerald-200{border-color:var(--rf-brand-line)}
.border-emerald-300{border-color:var(--rf-brand-line)}
.border-emerald-400{border-color:var(--rf-brand-soft)}
.border-emerald-50{border-color:var(--rf-brand-tint)}
.border-emerald-500{border-color:var(--rf-brand)}
.border-green-200{border-color:var(--rf-brand-line)}
.bg-\[\#f0fdf4\]{background-color:var(--rf-brand-tint)}
.bg-emerald-100{background-color:var(--rf-brand-tint)}
.bg-emerald-200\/20{background-color:color-mix(in srgb,var(--rf-brand-line) 20%,transparent)}
.bg-emerald-300\/20{background-color:color-mix(in srgb,var(--rf-brand-line) 20%,transparent)}
.bg-emerald-400{background-color:var(--rf-brand-soft)}
.bg-emerald-50{background-color:var(--rf-brand-tint)}
.bg-emerald-50\/50{background-color:color-mix(in srgb,var(--rf-brand-tint) 50%,transparent)}
.bg-emerald-500{background-color:var(--rf-brand)}
.bg-emerald-500\/20{background-color:color-mix(in srgb,var(--rf-brand) 20%,transparent)}
.bg-green-100{background-color:var(--rf-brand-tint)}
.bg-green-400{background-color:var(--rf-brand-soft)}
.bg-green-50{background-color:var(--rf-brand-tint)}
.bg-green-500{background-color:var(--rf-brand)}
.bg-teal-400{background-color:var(--rf-brand-soft)}
.bg-teal-50{background-color:var(--rf-brand-tint)}
.from-\[\#f0fdf4\]{--tw-gradient-from:var(--rf-brand-tint) var(--tw-gradient-from-position);--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-emerald-400{--tw-gradient-from:var(--rf-brand-soft) var(--tw-gradient-from-position);--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-emerald-50{--tw-gradient-from:var(--rf-brand-tint) var(--tw-gradient-from-position);--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-emerald-500{--tw-gradient-from:var(--rf-brand) var(--tw-gradient-from-position);--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.to-emerald-900\/20{--tw-gradient-to:color-mix(in srgb,var(--rf-brand-ink) 20%,transparent) var(--tw-gradient-to-position)}
.to-green-50{--tw-gradient-to:var(--rf-brand-tint) var(--tw-gradient-to-position)}
.to-green-600{--tw-gradient-to:var(--rf-brand) var(--tw-gradient-to-position)}
.to-teal-50{--tw-gradient-to:var(--rf-brand-tint) var(--tw-gradient-to-position)}
.to-teal-600{--tw-gradient-to:var(--rf-brand) var(--tw-gradient-to-position)}
.fill-green-600{fill:var(--rf-brand-ink)}
.text-emerald-200\/90{color:color-mix(in srgb,var(--rf-brand-line) 90%,transparent)}
.text-emerald-400{color:var(--rf-brand-soft)}
.text-emerald-500{color:var(--rf-brand-ink)}
.text-emerald-600{color:var(--rf-brand-ink)}
.text-emerald-700{color:var(--rf-brand-ink)}
.text-emerald-800{color:var(--rf-brand-ink)}
.text-emerald-900{color:var(--rf-brand-ink)}
.text-green-600{color:var(--rf-brand-ink)}
.text-green-700{color:var(--rf-brand-ink)}
.text-green-800{color:var(--rf-brand-ink)}
.text-teal-900{color:var(--rf-brand-ink)}
.shadow-emerald-500\/10{--tw-shadow-color:color-mix(in srgb,var(--rf-brand) 10%,transparent);--tw-shadow:var(--tw-shadow-colored)}
.shadow-emerald-500\/20{--tw-shadow-color:color-mix(in srgb,var(--rf-brand) 20%,transparent);--tw-shadow:var(--tw-shadow-colored)}
.shadow-emerald-500\/30{--tw-shadow-color:color-mix(in srgb,var(--rf-brand) 30%,transparent);--tw-shadow:var(--tw-shadow-colored)}
.shadow-emerald-900\/10{--tw-shadow-color:color-mix(in srgb,var(--rf-brand-ink) 10%,transparent);--tw-shadow:var(--tw-shadow-colored)}
.shadow-emerald-900\/20{--tw-shadow-color:color-mix(in srgb,var(--rf-brand-ink) 20%,transparent);--tw-shadow:var(--tw-shadow-colored)}
.shadow-emerald-900\/5{--tw-shadow-color:color-mix(in srgb,var(--rf-brand-ink) 5%,transparent);--tw-shadow:var(--tw-shadow-colored)}
.ring-emerald-100{--tw-ring-color:var(--rf-brand-tint)}
.hover\:border-emerald-200:hover{border-color:var(--rf-brand-line)}
.hover\:border-green-300:hover{border-color:var(--rf-brand-line)}
.hover\:bg-emerald-400:hover{background-color:var(--rf-brand-soft)}
.hover\:from-emerald-400:hover{--tw-gradient-from:var(--rf-brand-soft) var(--tw-gradient-from-position);--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.hover\:to-green-500:hover{--tw-gradient-to:var(--rf-brand) var(--tw-gradient-to-position)}
.focus\:border-green-500:focus{border-color:var(--rf-brand)}
.focus\:ring-emerald-500:focus{--tw-ring-color:var(--rf-brand)}
.focus\:ring-green-200:focus{--tw-ring-color:var(--rf-brand-line)}
.group:hover .group-hover\:bg-emerald-500{background-color:var(--rf-brand)}
.group:hover .group-hover\:text-emerald-600{color:var(--rf-brand-ink)}