/* STAR BODY — темы клиента (пасхалка: тап по логотипу в шапке листает темы).
Палитры перенесены из админки: '' тёмная (дефолт), day дневная,
mono монохром, paper бумага. Тема = data-theme на ,
хранится в localStorage('sb-theme'), применяется до первой отрисовки. */
html[data-theme="day"] {
--bg-body: #E9EEEB;
--surface-card: #FFFFFF;
--surface-field: #F2F6F4;
--brand-green: #3D7A58;
--brand-accent: #3D7A58;
--brand-dark: #DCE8E1;
--text-main: #20302A;
--text-sub: #5E7267;
--border-soft: #CBD9D0;
}
html[data-theme="mono"] {
--bg-body: #ECECEC;
--surface-card: #FFFFFF;
--surface-field: #F4F4F4;
--brand-green: #222222;
--brand-accent: #222222;
--brand-dark: #E4E4E4;
--text-main: #1E1E1E;
--text-sub: #5F5F5F;
--border-soft: #CFCFCF;
}
html[data-theme="paper"] {
--bg-body: #F1ECE2;
--surface-card: #FFFCF6;
--surface-field: #F7F2E8;
--brand-green: #557D63;
--brand-accent: #557D63;
--brand-dark: #EBE2D2;
--text-main: #2C2620;
--text-sub: #7A6F5E;
--border-soft: #DDD2BF;
}
/* тёмные варианты — только токены: базовые css уже тёмные.
forest «лесной графит» — тёплее и ровнее основной тёмной;
graphite «холодный графит» — серо-стальная, без зелёного подтона. */
html[data-theme="forest"] {
--bg-body: #131a16;
--surface-card: #1c2921;
--surface-field: #24352c;
--brand-green: #8fbc9f;
--brand-accent: #4E8765;
--brand-dark: #1b382b;
--text-main: #f0fdf4;
--text-sub: #a7d3bc;
--border-soft: #2c4436;
}
html[data-theme="graphite"] {
--bg-body: #14171b;
--surface-card: #1d232a;
--surface-field: #2b3744;
--brand-green: #6bae8d;
--brand-accent: #4E8765;
--brand-dark: #1f2e29;
--text-main: #eef2f6;
--text-sub: #a8b8c8;
--border-soft: #36424f;
}
/* ===== переопределения литеральных цветов (тёмная база не тронута) ===== */
/* шапка и нижнее меню — тёмные панели → карточная поверхность темы.
Зона статус-бара — в цвет фона темы (фон, на котором висят окна),
не чёрной полосой: значки времени/Wi-Fi сознательно жертвуем. */
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .main-header {
background: linear-gradient(to bottom,
var(--bg-body) 0,
var(--bg-body) max(env(safe-area-inset-top, 0px), var(--sa-top, 0px)),
var(--surface-card) max(env(safe-area-inset-top, 0px), var(--sa-top, 0px)));
}
/* линия на границе статус-бар/шапка — зеркало нижней линии шапки */
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .main-header::before {
content: ''; position: absolute; left: 0; right: 0;
top: max(env(safe-area-inset-top, 0px), var(--sa-top, 0px));
height: 1px; background: var(--border-soft); pointer-events: none;
}
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .nav-bar { background: var(--surface-card); border-top-color: var(--border-soft); }
/* нижняя кромка за пределами viewport (зона индикатора «домой»):
туда не доходит ни один элемент — рисуется ТОЛЬКО фон body
(webview-bottom-edge.mdc). Поэтому фон двухслойный: сама страница —
в цвете темы, зона ниже её края — в цвет меню: бар у кромки + полоса
под ним читаются единой конструкцией до низа экрана (iPhone и Android). */
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) body {
background-color: var(--surface-card);
background-image: linear-gradient(var(--bg-body), var(--bg-body));
background-repeat: no-repeat;
background-size: 100% 100%;
}
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .nav-item.active { color: var(--surface-card); }
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .nav-item.active span { background: var(--text-sub); }
/* логотип и имя вкладки — светлые PNG → затемняем под светлый фон */
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .header-logo img,
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .header-tab-img { filter: brightness(0.26); }
/* заставка: логотип перекрашивается в цвет темы (маска поверх HD-альфы) */
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) #loadingScreen {
background: radial-gradient(110% 80% at 50% 40%, var(--surface-card) 0%, var(--bg-body) 46%, var(--bg-body) 100%);
}
/* у светлой заставки виньетка-врезка по краям даёт грязную полосу
у нижней кромки — выключаем, фон ровный до самого низа */
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) #loadingScreen::after {
box-shadow: none;
}
/* тёмное пятно за лого — графит, зеркало светлого спотлайта тёмной заставки */
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) #loadingScreen .load-halo {
background: radial-gradient(circle,
rgba(42,42,48,0.38) 0%,
rgba(70,70,78,0.20) 42%,
transparent 78%);
}
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) #loadingScreen .load-logo {
background: var(--text-main);
filter: drop-shadow(0 22px 42px rgba(92,74,50,.38))
drop-shadow(0 4px 9px rgba(92,74,50,.24))
drop-shadow(0 1px 0 rgba(255,255,255,.70));
}
/* фраза в шапке: в светлых — в цвет затемнённого фильтром лого-подписи (#8eb0a0 × 0.26) */
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .header-phrase { color: #242d29; }
/* основной текст (был #fff/#ffffff на тёмном) */
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .home-date-line,
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .home-hero,
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .home-week-row,
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .home-news,
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .intake-q,
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .home-train input,
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .page-title,
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .photo-caption,
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .option-card,
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .freq-line,
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .subhead,
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .train-row,
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .train-row input,
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .stats,
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .win-text,
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .chat-msg,
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .chat-input,
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .method-line,
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .care-k,
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .care-warn,
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .week-label,
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .monday-confirm label,
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .slot-title,
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .section-title,
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .field-label,
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .question-label,
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .photo-fold-head,
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .compare-viewer-cap,
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .metric-name,
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .week-title,
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .plan-label,
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .status-banner,
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .input-text,
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .select-box,
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) textarea { color: var(--text-main); }
/* плейсхолдеры */
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .input-text::placeholder,
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) textarea::placeholder,
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .cyc-dateface.empty { color: var(--text-sub); }
/* тёмные подложки → поверхность темы */
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .item-container.freq-group,
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .option-card,
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .sub-group-hidden,
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .consent-box,
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .monday-confirm,
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .video-ph,
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .week-btn,
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .day-box,
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) #homeNewsCard.is-read .home-read-btn { background: var(--surface-field); }
/* locked-анкета: в тёмной теме выбранные пункты — чистый текст
(home.css: .locked-form { background: transparent }). Темное правило
выше по специфичности — возвращало серые подложки на светлых темах
и строки выглядели «пустыми полями». Возвращаем прозрачность. */
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .locked-form .option-card,
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .locked-form .sub-group-hidden { background: transparent; }
/* цикл — тёмные ячейки/селекты */
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .cycle-container input[type="date"].input-text,
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .cyc-select-face,
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .cyc-dateface,
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .cyc-cell,
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .cyc-chip { background: var(--surface-field); color: var(--text-main); }
/* чат */
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .chat-box { background: var(--surface-field); }
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .chat-msg-in { background: var(--surface-card); border: 1px solid var(--border-soft); }
/* шапка голосового зашита под тёмный пузырь (#cfe3d7) — на светлом пузыре тёмный текст */
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .chat-voice-head,
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .chat-voice-ctx { color: var(--text-sub); }
/* плашка-название на фото слота остаётся тёмной в любой теме — текст белый */
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .slot-filled .slot-title { color: #fff; }
/* акцентные кнопки (была тёмно-зелёная заливка + белый текст) */
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .btn-submit,
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .chat-send,
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .home-msg-btn.primary,
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .reg-modal-btn.is-primary {
background: var(--brand-green); color: #fff; border-color: var(--brand-accent);
}
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .btn-submit.is-off { background: var(--surface-field); color: var(--text-sub); border-color: var(--border-soft); }
/* активная вкладка-пилюля (была заливка text-sub + тёмный текст) */
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .tab-btn.active { background: var(--brand-green); color: #fff; border-color: var(--brand-green); }
/* баннер ожидания — тонированный зелёный */
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .status-banner { color: var(--text-main); }
/* цикл — семантика */
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .cycle-tab-name,
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .cyc-opt.sel,
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .cyc-tip,
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .cyc-saved { color: var(--brand-green); }
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .cyc-cell.c-today { box-shadow: inset 0 0 0 2px var(--brand-green); }
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .cyc-cell.c-log::after { background: var(--brand-green); }
/* семантика ячеек календаря на светлых темах — ПАСТЕЛЬНЫЕ заливки
(образец из референса основателя: различимы с первого взгляда).
Прогноз = та же «розовая» семья, что и месячные, но светлее + рамка —
без тонкого пунктира (не читается на телефоне). */
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .cyc-cell.c-period { background: #F4D2CE; color: #8C3A34; font-weight: 700; }
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .cyc-cell.c-pred { background: #FAE7E4; color: #B0524A; border: 2px solid #D98880; }
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .cyc-cell.c-fert { background: #D8EBD8; color: #3E6B45; }
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .cyc-cell.c-pms { background: #F3E4C6; color: #8A6527; }
/* геройская карточка прогноза на светлых темах — пастельная розовая */
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .cyc-hero { background: #FAE7E4; border-color: #D98880; }
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .stat-btn { background: #FAE7E4; border-color: #D98880; color: #B0524A; }
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .cyc-hero-big { color: #B0524A; }
/* легенда в тон ячеек */
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .cyc-legend .lg-period::before { background: #F4D2CE; border: 1px solid #D98880; }
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .cyc-legend .lg-pred::before { background: #FAE7E4; border: 2px solid #D98880; }
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .cyc-legend .lg-fert::before { background: #D8EBD8; border: 1px solid #A8CCA6; }
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .cyc-legend .lg-ovul::before { background: radial-gradient(circle, #3E6B45 2.5px, #D8EBD8 3.5px); border: 1px solid #A8CCA6; }
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .cyc-legend .lg-pms::before { background: #F3E4C6; border: 1px solid #D9BC85; }
/* плашки статистики — те же пастельные тона, что и ячейки календаря */
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .st-per { background: #F4D2CE; color: #8C3A34; }
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .st-ov { background: #D8EBD8; color: #3E6B45; }
/* лента цикла на светлых — спокойный = поле темы, фазы = пастель ячеек */
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .st-range { --st-fert: #D8EBD8; --st-per: #F4D2CE; color: var(--text-main); text-shadow: none; }
/* выбранный чип дневника — зелёная заливка в цвет темы */
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .cyc-chip.sel { background: var(--brand-green); color: #fff; border-color: var(--brand-green); }
/* сила симптома беременности на светлых темах — яркая заливка, тёмный текст */
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .cyc-chip.sel.sev1 { background: rgba(196, 158, 22, 0.32); border-color: #a8860e; color: #6e5608; }
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .cyc-chip.sel.sev2 { background: rgba(206, 106, 16, 0.3); border-color: #b0610a; color: #7e4408; }
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .cyc-chip.sel.sev3 { background: rgba(196, 50, 38, 0.26); border-color: #b03224; color: #8e2418; }
/* кнопки сообщений на Главной — белый текст на светлом поле невидим */
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .home-msg-btn { color: var(--text-main); }
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .home-msg-btn.primary { color: #fff; }
/* стакан воды — ободок на светлом, заметный (SVG stroke) */
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .home-glass .glass-rim { stroke: var(--text-sub); }
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .home-glass .glass-shine { stroke: rgba(0, 0, 0, 0.18); }
/* бегунки самооценки — на светлом центр светлый, окантовка фирменная */
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) #m-turgor::-webkit-slider-thumb,
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) #m-edema::-webkit-slider-thumb { background-color: var(--surface-card); border-color: var(--brand-green); }
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) #m-turgor::-moz-range-thumb,
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) #m-edema::-moz-range-thumb { background-color: var(--surface-card); border-color: var(--brand-green); }
/* сравнение фото — полупрозрачная подложка */
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .compare-viewer { background: rgba(0, 0, 0, 0.25); }
/* рамки миниатюр/плейсхолдеров фото — сплошные, цвет как в админке по темам */
html[data-theme="day"] .photo-slot,
html[data-theme="day"] .video-ph { border-color: #7E9A8B; }
html[data-theme="mono"] .photo-slot,
html[data-theme="mono"] .video-ph { border-color: #8A8A8A; }
html[data-theme="paper"] .photo-slot,
html[data-theme="paper"] .video-ph { border-color: #A89B84; }
/* желаемое поле — зелёная рамка */
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .input-desired { border-color: var(--brand-green); }
/* кастомные чекбоксы «тренировка» (Главная/Вода): тёмная галочка на тёмном
акценте невидима в mono — на светлых темах галочка белая, рамка у пустого */
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .home-train input:checked,
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .train-row input:checked {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M3.2 8.4 L6.6 11.6 L12.8 4.4'/%3E%3C/svg%3E");
}
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .home-train input,
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .train-row input { border: 1px solid var(--border-soft); }
/* круглый бейдж-галочка в Отчёте: был чёрный значок на зелёном → белый */
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .check-badge { color: #fff; }
/* стрелка нативного селекта в Цикле — приглушённая мята → тон темы */
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .cyc-select-face {
background-image: url("data:image/svg+xml;utf8,");
}
html[data-theme="mono"] .cyc-select-face {
background-image: url("data:image/svg+xml;utf8,");
}
html[data-theme="paper"] .cyc-select-face {
background-image: url("data:image/svg+xml;utf8,");
}
/* ===== плавный переход палитры ===== */
/* между светлыми темами — 1с */
html.theme-xfade,
html.theme-xfade * { transition: background-color 1s ease, color 1s ease,
border-color 1s ease, box-shadow 1s ease, filter 1s ease !important; }
/* из тёмной в светлую и обратно — медленнее, 2с: большой скачок яркости */
html.theme-xfade-slow,
html.theme-xfade-slow * { transition: background-color 2s ease, color 2s ease,
border-color 2s ease, box-shadow 2s ease, filter 2s ease !important; }
/* баннер «анкета на анализе» — общий стиль для вкладок без home.css
(на Главной свой #waitingBanner с тем же классом — правила совпадают) */
.status-banner { position: fixed; top: calc(72px + max(env(safe-area-inset-top, 0px), var(--sa-top, 0px))); left: 16px; right: 16px; background: rgba(46, 204, 113, 0.15); border: 1px solid rgba(46, 204, 113, 0.3); backdrop-filter: blur(8px); border-radius: 12px; padding: 12px 16px; text-align: center; font-size: 13px; color: #fff; z-index: 90; display: none; box-sizing: border-box; }
.status-banner.active { display: block; }
html:is([data-theme="day"],[data-theme="mono"],[data-theme="paper"]) .status-banner { color: var(--text-main); background: rgba(61, 122, 88, 0.12); border-color: rgba(61, 122, 88, 0.3); }
/* ===== graphite: старые зелёные хардкоды тёмной базы → графит ===== */
html[data-theme="graphite"] .main-header { background: var(--bg-body); }
html[data-theme="graphite"] .header-phrase { color: #8eb0a0; }
html[data-theme="graphite"] .nav-bar { background: #12161b; }
html[data-theme="graphite"] .nav-item.active { color: #14171b; }
html[data-theme="graphite"] .option-card,
html[data-theme="graphite"] .item-container.freq-group,
html[data-theme="graphite"] .sub-group-hidden,
html[data-theme="graphite"] .consent-box,
html[data-theme="graphite"] .monday-confirm { background: var(--surface-field); }
html[data-theme="graphite"] .locked-form .option-card,
html[data-theme="graphite"] .locked-form .sub-group-hidden { background: transparent; }
html[data-theme="graphite"] .video-ph,
html[data-theme="graphite"] .week-btn,
html[data-theme="graphite"] .day-box { background: #12161b; }
html[data-theme="graphite"] .week-btn:disabled { border-color: var(--brand-accent); color: var(--brand-accent); }
html[data-theme="graphite"] .chat-box { background: #12161b; }
html[data-theme="graphite"] .chat-msg-in { background: #262d36; }
html[data-theme="graphite"] .btn-submit,
html[data-theme="graphite"] .chat-send,
html[data-theme="graphite"] .compare-viewer-cap {
background: var(--surface-field); color: #dfe8f0; border-color: #3a4756;
}
html[data-theme="graphite"] .home-msg-btn.primary {
background: var(--surface-field); border-color: var(--brand-green); color: #9fd4ae;
}
html[data-theme="graphite"] .compare-viewer-cap { border-color: var(--brand-green); }
html[data-theme="graphite"] .input-text::placeholder,
html[data-theme="graphite"] textarea::placeholder,
html[data-theme="graphite"] .cyc-dateface.empty,
html[data-theme="graphite"] .preg-disclaimer { color: #6a7885; }
html[data-theme="graphite"] .cyc-cell.c-fert,
html[data-theme="graphite"] .st-ov { background: var(--brand-accent); color: #eef2f6; }
html[data-theme="graphite"] .cyc-legend .lg-fert::before { background: var(--brand-accent); }
html[data-theme="graphite"] .cyc-legend .lg-ovul::before {
background: radial-gradient(circle, #fff 2.5px, var(--brand-accent) 3.5px);
border-color: var(--brand-accent);
}
html[data-theme="graphite"] .st-range { --st-fert: #4E8765; }
html[data-theme="graphite"] .tab-btn.active,
html[data-theme="graphite"] #homeNewsCard.is-read .home-read-btn { color: #14171b; }
html[data-theme="graphite"] .slot-filled { background: var(--bg-body); }
html[data-theme="graphite"] .status-banner { background: rgba(107,174,141,0.15); border-color: rgba(107,174,141,0.3); }
html[data-theme="graphite"] .measure-note.is-ok { border-color: rgba(107,174,141,0.35); }
@media (hover: hover) { html[data-theme="graphite"] .slot:hover { background: rgba(107,174,141,0.05); } }
html[data-theme="graphite"] .day-box.on { background: rgba(107,174,141,0.08); }
html[data-theme="graphite"] .input-desired { border-color: rgba(107,174,141,0.55); }
html[data-theme="graphite"] .tag-pill { background: rgba(107,174,141,0.1); border-color: rgba(107,174,141,0.3); }
html[data-theme="graphite"] .home-glass .glass-rim { stroke: #eef2f6; }
html[data-theme="graphite"] .cyc-select-face {
background-image: url("data:image/svg+xml;utf8,");
}