/* ============================================================
disbit — дизайн-система v0.4 «deep glass»
Синяя стеклянная тема по референсу + 8 сменных тем через
[data-theme]. Семантические токены, glassmorphism, 4/8px ритм.
============================================================ */
/* Атрибут hidden обязан побеждать display из классов. Без этого правила
любой блок, у которого в CSS задан display (например .stake-money или
.count-fields — там flex), НЕ скрывается через el.hidden = true:
селектор класса перебивает браузерное [hidden] { display: none }.
Из-за этого при выборе «Блокировки» продолжало висеть поле «₽ за пропуск». */
[hidden] { display: none !important; }
:root {
/* ТЕМА ПО УМОЛЧАНИЮ: BLUE (референс, вариант 2) */
--tint: 91, 141, 255; /* rgb основного цвета для стекла */
--primary: #5B8DFF;
--primary-hi: #4A7BF0;
--on-primary: #0C1422;
--bg: #0C1422;
--glow: rgba(91, 141, 255, 0.16);
--text: #EAF2FF;
--text-2: #9DB4E6;
--text-3: #7A8BA8;
/* стекло (интерактивные/выбранные поверхности — тонированы акцентом) */
--surface: rgba(var(--tint), 0.07);
--surface-2: rgba(var(--tint), 0.12);
--elev: rgba(var(--tint), 0.18);
--line: rgba(var(--tint), 0.16);
/* нейтральные поверхности (пассивный каркас: разделители, невыбранные
состояния) — без акцентного оттенка, чтобы tint не терялся в фоне */
--neutral: rgba(255, 255, 255, 0.045);
--neutral-2: rgba(255, 255, 255, 0.08);
--neutral-line: rgba(255, 255, 255, 0.09);
/* смысловые (общие для тем) */
--good: #4ADE80;
--bad: #F87171;
--lock: #A78BFA;
--gold: #FBBF24;
/* сетка отступов, кратная 8 (4 — половинный шаг для мелких деталей) */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 16px;
--sp-4: 24px;
--sp-5: 32px;
--sp-6: 40px;
--r-lg: 20px;
--r-md: 14px;
--r-sm: 10px;
--r-full: 999px;
--ease: cubic-bezier(0.16, 1, 0.3, 1);
--t-fast: 150ms;
--t-med: 250ms;
/* объёмные тени */
--shadow-1: 0 1px 2px rgba(0, 0, 0, 0.25), 0 4px 14px rgba(0, 0, 0, 0.22);
--shadow-2: 0 2px 6px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.35);
--shadow-glow: 0 8px 30px rgba(var(--tint), 0.22);
--sheet-bg: #0A111D;
color-scheme: dark;
}
/* ---------- ТЕМЫ ПРИЛОЖЕНИЯ ---------- */
[data-theme="red"] {
--tint: 224, 96, 96;
--primary: #E06060; --primary-hi: #D25A5A; --on-primary: #170D0E;
--bg: #170D0E; --glow: rgba(224, 96, 96, 0.14);
--text: #FDEFEF; --text-2: #D6A3A6; --text-3: #987577;
--sheet-bg: #120A0B;
}
[data-theme="black"] {
--tint: 190, 195, 205;
--primary: #C9CED8; --primary-hi: #A8AEBB; --on-primary: #101216;
--bg: #0A0B0D; --glow: rgba(190, 195, 205, 0.08);
--text: #F2F3F5; --text-2: #A2A7B2; --text-3: #7A7D85;
--sheet-bg: #0D0E11;
}
[data-theme="white"] {
--tint: 55, 70, 105;
--primary: #3557E8; --primary-hi: #2F4FCC; --on-primary: #FFFFFF;
--bg: #ECEFF4; --glow: rgba(53, 87, 232, 0.10);
--text: #1B2437; --text-2: #4C5A75; --text-3: #636B79;
--surface: rgba(var(--tint), 0.06);
--surface-2: rgba(var(--tint), 0.10);
--elev: rgba(var(--tint), 0.14);
--line: rgba(var(--tint), 0.14);
--neutral: rgba(27, 36, 55, 0.05);
--neutral-2: rgba(27, 36, 55, 0.09);
--neutral-line: rgba(27, 36, 55, 0.10);
--sheet-bg: #F5F7FA;
color-scheme: light;
}
[data-theme="yellow"] {
--tint: 212, 165, 40;
--primary: #D4A528; --primary-hi: #B8880F; --on-primary: #1C1503;
--bg: #14100A; --glow: rgba(212, 165, 40, 0.13);
--text: #FBF4E4; --text-2: #CDB98A; --text-3: #8C7C5C;
--sheet-bg: #100D07;
}
[data-theme="orange"] {
--tint: 232, 122, 60;
--primary: #E87A3C; --primary-hi: #D2601F; --on-primary: #150E09;
--bg: #150E09; --glow: rgba(232, 122, 60, 0.14);
--text: #FCF1EA; --text-2: #D8AC90; --text-3: #947762;
--sheet-bg: #110B07;
}
[data-theme="green"] {
--tint: 62, 190, 125;
--primary: #3EBE7D; --primary-hi: #27A365; --on-primary: #05130C;
--bg: #0A1410; --glow: rgba(62, 190, 125, 0.13);
--text: #EAF7F0; --text-2: #99C7AE; --text-3: #628773;
--sheet-bg: #08100C;
}
[data-theme="purple"] {
--tint: 157, 123, 250;
--primary: #9D7BFA; --primary-hi: #8B66F5; --on-primary: #100C1C;
--bg: #100C1C; --glow: rgba(157, 123, 250, 0.15);
--text: #F2EEFD; --text-2: #B9A8E4; --text-3: #8276A3;
--sheet-bg: #0C0916;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scrollbar-color: var(--neutral-2) transparent; }
body {
background-color: var(--bg);
/* глубокий градиент + свечение сверху, как в референсе */
background-image:
radial-gradient(640px 340px at 50% -100px, var(--glow), transparent 72%),
linear-gradient(180deg, rgba(var(--tint), 0.05), transparent 420px);
background-repeat: no-repeat;
color: var(--text);
font-family: 'Onest', 'Segoe UI', system-ui, -apple-system, sans-serif;
font-size: 16px;
line-height: 1.5;
min-height: 100dvh;
-webkit-tap-highlight-color: transparent;
transition: background-color var(--t-med);
}
/* ---------- АУРА: размытые пятна света ---------- */
.aura {
position: fixed;
inset: 0;
z-index: -1;
overflow: hidden;
pointer-events: none;
}
.aura .blob {
position: absolute;
border-radius: 50%;
filter: blur(90px);
opacity: 0.5;
will-change: transform;
}
.aura .b1 {
width: 420px; height: 420px;
left: -120px; top: -140px;
background: rgba(var(--tint), 0.30);
animation: drift1 26s ease-in-out infinite alternate;
}
.aura .b2 {
width: 360px; height: 360px;
right: -140px; top: 22%;
background: rgba(var(--tint), 0.20);
animation: drift2 32s ease-in-out infinite alternate;
}
.aura .b3 {
width: 460px; height: 460px;
left: 22%; bottom: -220px;
background: rgba(var(--tint), 0.14);
animation: drift3 38s ease-in-out infinite alternate;
}
@keyframes drift1 { to { transform: translate(70px, 50px) scale(1.12); } }
@keyframes drift2 { to { transform: translate(-60px, 60px) scale(1.08); } }
@keyframes drift3 { to { transform: translate(50px, -60px) scale(1.15); } }
button {
font-family: inherit;
color: inherit;
touch-action: manipulation;
cursor: pointer;
}
button:disabled { cursor: default; }
:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
border-radius: 4px;
}
.ic {
width: 24px; height: 24px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
flex-shrink: 0;
}
.ic-s { width: 18px; height: 18px; }
.ic-xl { width: 44px; height: 44px; }
.app {
margin: 0 auto;
padding: var(--sp-4) var(--sp-3) calc(122px + env(safe-area-inset-bottom));
max-width: 460px;
}
/* ---------- ЭКРАНЫ ---------- */
.screen { display: none; }
.screen.active { display: block; animation: fadeUp var(--t-med) var(--ease); }
@keyframes fadeUp {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* ---------- ЗАГОЛОВОК ЭКРАНА (Large Title) ---------- */
.screen-title {
font-family: 'Unbounded', sans-serif;
font-size: 28px;
font-weight: 800;
letter-spacing: -0.3px;
line-height: 1.2;
margin-bottom: var(--sp-4);
}
/* ---------- ВТОРОСТЕПЕННАЯ КАРТОЧКА (базовый класс) ----------
Спокойная поверхность: тон + граница + мягкая тень, без лишних
слоёв — полный «глянец» (диагональный блик, glow) зарезервирован
за героем экрана (.progress-card), чтобы декор не спорил с контентом. */
.card, .habit, .stat-card, .profile-hero {
background: var(--surface);
border: 1px solid var(--line);
backdrop-filter: blur(10px) saturate(120%);
-webkit-backdrop-filter: blur(10px) saturate(120%);
box-shadow: var(--shadow-1);
transition: transform var(--t-med) var(--ease), box-shadow var(--t-med);
}
.habit:hover, .card:hover {
transform: translateY(-2px);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), var(--shadow-2);
}
/* ---------- ГЕРОЙ ЭКРАНА: карточка прогресса ----------
Единственное место с полным набором эффектов «deep glass» —
намеренный фокус внимания, а не фон по умолчанию. */
.progress-card {
background:
linear-gradient(160deg, rgba(var(--tint), 0.05), transparent 55%),
var(--surface);
border: 1px solid var(--line);
backdrop-filter: blur(14px) saturate(135%);
-webkit-backdrop-filter: blur(14px) saturate(135%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), var(--shadow-1), var(--shadow-glow);
transition: transform var(--t-med) var(--ease), box-shadow var(--t-med);
border-radius: var(--r-lg);
padding: var(--sp-4);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-3);
margin-bottom: var(--sp-4);
}
/* поочерёдное появление карточек в списках */
.habit-list .habit {
animation: fadeUp var(--t-med) var(--ease) backwards;
}
.habit-list .habit:nth-child(1) { animation-delay: 0ms; }
.habit-list .habit:nth-child(2) { animation-delay: 40ms; }
.habit-list .habit:nth-child(3) { animation-delay: 80ms; }
.habit-list .habit:nth-child(4) { animation-delay: 120ms; }
.habit-list .habit:nth-child(5) { animation-delay: 160ms; }
.habit-list .habit:nth-child(n+6) { animation-delay: 200ms; }
/* ---------- ШАПКА ---------- */
.header { display: flex; align-items: center; margin-bottom: var(--sp-4); }
.logo {
font-family: 'Unbounded', 'Manrope', sans-serif;
font-size: 22px;
font-weight: 800;
letter-spacing: -0.5px;
}
.logo span {
background: linear-gradient(90deg, var(--primary), var(--primary-hi));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.header-date {
font-size: 13px;
color: var(--text-2);
margin-top: 2px;
text-transform: capitalize;
}
.icon-btn {
margin-left: auto;
width: 44px; height: 44px;
border-radius: var(--r-full);
border: 1px solid var(--line);
background: var(--surface);
color: var(--text-2);
display: inline-flex;
align-items: center;
justify-content: center;
transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn:active { transform: scale(0.94); }
/* ---------- ТОСТ ПОХВАЛЫ ---------- */
.toast {
position: fixed;
top: 14px; left: 50%;
transform: translateX(-50%);
max-width: 92vw;
background: var(--elev);
border: 1px solid var(--line);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
color: var(--text);
font-size: 14px; font-weight: 700;
padding: 12px 18px;
border-radius: var(--r-full);
z-index: 300;
animation: toastIn var(--t-med) var(--ease);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
@keyframes toastIn {
from { opacity: 0; transform: translate(-50%, -12px); }
to { opacity: 1; transform: translate(-50%, 0); }
}
.toast.hide { opacity: 0; transition: opacity var(--t-med); }
/* ---------- БАННЕР НАГРАДЫ ---------- */
.reward-banner {
display: flex;
align-items: center;
gap: var(--sp-3);
background: linear-gradient(120deg, rgba(var(--tint), 0.16), rgba(var(--tint), 0.06));
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: var(--sp-3);
margin-bottom: var(--sp-3);
}
.reward-banner .ic { color: var(--gold); width: 26px; height: 26px; }
.reward-banner .rb-main { flex: 1; min-width: 0; }
.reward-banner .rb-title { font-size: 14px; font-weight: 800; }
.reward-banner .rb-sub { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.reward-banner button {
border: none;
background: var(--primary);
color: var(--on-primary);
font-size: 12px; font-weight: 800;
padding: 9px 14px;
min-height: 38px;
border-radius: var(--r-full);
transition: filter var(--t-fast), transform var(--t-fast);
}
.reward-banner button:active { transform: scale(0.95); }
/* ---------- ПОЛОСКА НЕДЕЛИ ---------- */
.week-strip { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.day {
flex: 1;
min-height: 70px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 6px;
padding: 6px 0;
border: none;
background: transparent;
color: var(--text-3);
font-size: 12px;
font-weight: 600;
}
.day .dname { font-size: 11px; }
.day .dnum { font-size: 12px; font-weight: 700; color: var(--text-3); }
.day.today .dnum { color: var(--text-2); }
.day.today .dname { color: var(--primary); font-weight: 800; }
/* кружок-индикатор дня: пустой → выполнено (заливка+галочка+свечение) → сегодня (кольцо) */
.ddot {
position: relative;
width: 30px; height: 30px;
border-radius: var(--r-full);
background: var(--neutral);
border: 1px solid var(--neutral-line);
transition: background var(--t-med), box-shadow var(--t-med);
}
/* галочка внутри — рисуем бордюром, без иконки */
.ddot.full::after, .ddot.half::after {
content: '';
position: absolute; left: 50%; top: 46%;
width: 7px; height: 12px;
border: solid #08110A; border-width: 0 2.5px 2.5px 0;
transform: translate(-50%, -50%) rotate(45deg);
}
.ddot.full {
background: var(--primary); border-color: transparent;
box-shadow: 0 0 14px rgba(var(--tint), 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.ddot.half {
background: var(--gold); border-color: transparent;
box-shadow: 0 0 12px rgba(251, 191, 36, 0.55);
}
.ddot.half::after { border-color: #1C1503; }
.ddot.miss { background: rgba(240, 102, 106, 0.18); border-color: rgba(240, 102, 106, 0.4); }
/* сегодня без выполнения — светящееся кольцо (в процессе) */
.day.today .ddot:not(.full):not(.half):not(.miss) {
background: transparent;
border: 2.5px solid var(--primary);
box-shadow: 0 0 12px rgba(var(--tint), 0.5);
}
.day:disabled { opacity: 0.5; } /* будущие дни тусклее */
/* ---------- КАРТОЧКА ПРОГРЕССА (layout — см. свойства декора выше) ---------- */
.progress-title {
font-family: 'Unbounded', 'Manrope', sans-serif;
font-size: 18px;
font-weight: 700;
}
.progress-sub { color: var(--text-2); font-size: 14px; margin-top: 6px; }
.progress-sub span { font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.at-risk {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 12px;
padding: 6px 10px;
border-radius: var(--r-full);
background: rgba(248, 113, 113, 0.10);
color: var(--bad);
font-size: 12px;
font-weight: 700;
}
.at-risk[hidden] { display: none; }
.ring { position: relative; width: 88px; height: 88px; flex-shrink: 0; }
.ring svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.ring circle { fill: none; stroke-width: 9; }
.ring-bg { stroke: var(--neutral-2); }
.ring-fg {
stroke: var(--primary);
stroke-linecap: round;
stroke-dasharray: 327;
stroke-dashoffset: 327;
transition: stroke-dashoffset 0.5s var(--ease);
filter: drop-shadow(0 0 6px rgba(var(--tint), 0.5));
}
.ring-label {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
font-family: 'Unbounded', 'Manrope', sans-serif;
font-size: 16px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
/* ---------- СПИСОК ОБЕЩАНИЙ ---------- */
.section-title {
font-size: 14px;
color: var(--text-2);
font-weight: 700;
letter-spacing: 0.2px;
margin-bottom: var(--sp-3);
}
.section-title.dim { margin-top: var(--sp-4); color: var(--text-3); }
.habit-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.habit {
border-radius: var(--r-lg);
padding: var(--sp-3);
display: flex;
align-items: center;
gap: var(--sp-3);
transition: border-color var(--t-med), background var(--t-med);
}
.habit.done { border-color: rgba(var(--tint), 0.5); background: var(--surface-2); }
.habit.off { opacity: 0.55; }
.habit-icon {
width: 48px; height: 48px;
border-radius: var(--r-md);
background: var(--neutral-2);
display: flex; align-items: center; justify-content: center;
font-size: 22px;
flex-shrink: 0;
}
.habit-main { flex: 1; min-width: 0; cursor: pointer; }
.habit-name { font-size: 16px; font-weight: 700; }
.habit-meta {
display: flex; gap: 8px; align-items: center;
margin-top: 5px; flex-wrap: wrap;
}
.goal-text { color: var(--text-2); font-size: 12px; font-variant-numeric: tabular-nums; }
.streak {
display: inline-flex; align-items: center; gap: 3px;
font-size: 12px; font-weight: 800;
color: #FF7A2F; /* тёплый оранжевый огонёк, как на референсе */
font-variant-numeric: tabular-nums;
}
/* свечение пламени, когда серия горит */
.streak .ic { width: 15px; height: 15px; color: #FF6A1F;
filter: drop-shadow(0 0 5px rgba(255, 106, 31, 0.75)); }
.streak.zero { color: var(--text-3); }
.streak.zero .ic { filter: none; color: var(--text-3); }
.stake-badge {
display: inline-flex; align-items: center; gap: 4px;
font-size: 11px; font-weight: 700;
padding: 3px 8px;
border-radius: var(--r-sm);
font-variant-numeric: tabular-nums;
}
.stake-badge .ic { width: 13px; height: 13px; }
.stake-badge.money { color: var(--gold); background: rgba(251, 191, 36, 0.12); }
.stake-badge.lock { color: var(--lock); background: rgba(167, 139, 250, 0.12); }
/* бейдж и кнопка «минимум» — козырь идеи, поэтому заметный золотой пилюль,
а не бледный пунктир. Пусть люди видят: нет сил на полное — сделай минимум. */
.min-btn {
display: inline-flex; align-items: center; gap: 5px;
border: 1px solid rgba(251, 191, 36, 0.45);
background: rgba(251, 191, 36, 0.14);
color: var(--gold);
font-size: 12px; font-weight: 800;
padding: 8px 14px;
min-height: 44px;
border-radius: var(--r-full);
transition: background var(--t-fast), transform var(--t-fast);
}
.min-btn .ic { width: 14px; height: 14px; }
.min-btn:hover { background: rgba(251, 191, 36, 0.22); }
.min-btn:active { transform: scale(0.94); }
.min-badge {
display: inline-flex; align-items: center; gap: 3px;
font-size: 11px; font-weight: 700;
padding: 3px 8px;
border-radius: var(--r-full);
color: var(--gold);
background: rgba(251, 191, 36, 0.12);
}
.habit-check {
width: 46px; height: 46px;
border-radius: var(--r-full);
border: 2px solid var(--surface-2);
background: transparent;
color: var(--text);
font-size: 13px; font-weight: 800;
flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
font-variant-numeric: tabular-nums;
}
.habit-check .ic { width: 20px; height: 20px; }
.habit-check:hover { border-color: var(--primary); }
.habit-check:active { transform: scale(0.92); }
.habit.done .habit-check {
background: var(--primary);
border-color: var(--primary);
color: var(--on-primary);
animation: pop var(--t-med) var(--ease);
}
@keyframes pop {
0% { transform: scale(0.7); }
60% { transform: scale(1.12); }
100% { transform: scale(1); }
}
/* ---------- ЗАКРЕПЛЕНИЕ (порт PinnedList) ----------
Кнопка-булавка вместо прежнего крестика: удаление уехало в меню внутри
карточки, а наверх вынесено то, чем пользуются часто. */
.habit-pin {
width: 44px; height: 44px; flex: none; /* тач-таргет */
border: none;
border-radius: var(--r-full);
background: rgba(var(--tint), 0.10);
color: var(--text-3);
display: flex; align-items: center; justify-content: center;
transition: color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.habit-pin .ic { width: 17px; height: 17px; transition: transform 200ms var(--ease); }
.habit-pin:hover { color: var(--text-2); background: rgba(var(--tint), 0.18); }
.habit-pin:active { transform: scale(0.9); }
/* закреплена: кнопка залита акцентом, булавка наклонена — как в оригинале */
.habit-pin.on { background: var(--primary); color: var(--on-primary); }
.habit-pin.on .ic { transform: rotate(-45deg); }
/* сама карточка в закреплённом состоянии — чуть подсвечена */
.habit.pinned { border-color: rgba(var(--tint), 0.38); background: var(--surface-2); }
/* ---------- ПУСТОЕ СОСТОЯНИЕ ---------- */
.empty { text-align: center; color: var(--text-2); padding: var(--sp-5) var(--sp-3); }
.empty-art {
width: 84px; height: 84px;
margin: 0 auto 16px;
border-radius: var(--r-lg);
background: var(--surface-2);
color: var(--primary);
display: flex; align-items: center; justify-content: center;
}
.empty-cta { margin-top: 18px; padding: 13px 22px; }
.day-summary-btn {
width: 100%;
margin-top: var(--sp-4);
padding: var(--sp-3);
border-radius: var(--r-lg);
border: 1px dashed var(--line);
background: transparent;
color: var(--text-2);
font-size: 15px; font-weight: 700;
transition: background var(--t-fast), color var(--t-fast);
}
.day-summary-btn:hover { background: var(--surface); color: var(--text); }
/* ============================================================
КАЛЕНДАРЬ
============================================================ */
.cal-head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.cal-head .icon-btn { margin-left: 0; }
.cal-title-box {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
min-height: 44px;
justify-content: center;
}
.cal-title {
font-family: 'Unbounded', 'Manrope', sans-serif;
font-size: 16px;
font-weight: 700;
text-transform: capitalize;
}
.cal-today-chip {
border: none;
background: var(--surface-2);
color: var(--primary);
font-size: 11px; font-weight: 800;
padding: 6px 12px;
min-height: 36px;
border-radius: var(--r-full);
transition: background var(--t-fast);
}
.cal-today-chip:hover { background: var(--elev); }
.cal-weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: var(--sp-2);
margin-bottom: var(--sp-2);
}
.cal-weekdays span {
text-align: center;
font-size: 11px;
font-weight: 700;
color: var(--text-3);
}
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--sp-2); }
.cal-cell {
aspect-ratio: 1;
min-height: 44px;
border: 1px solid transparent;
border-radius: var(--r-md);
background: var(--neutral);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.cal-cell:not(:disabled):hover { background: var(--surface-2); }
.cal-cell:not(:disabled):active { transform: scale(0.94); }
.cal-cell .cnum {
font-size: 14px;
font-weight: 700;
color: var(--text-2);
font-variant-numeric: tabular-nums;
}
.cal-cell.ghost { background: transparent; border: none; pointer-events: none; }
.cal-cell.future { opacity: 0.35; }
.cal-cell.off .cnum { color: var(--text-3); }
.cal-cell.done { background: var(--primary); border-color: var(--primary); }
.cal-cell.done .cnum { color: var(--on-primary); }
.cal-cell.part { border-color: rgba(var(--tint), 0.55); background: var(--surface-2); }
.cal-cell.part .cnum { color: var(--text); }
.cal-cell.fail { background: rgba(248, 113, 113, 0.10); }
.cal-cell.fail .cnum { color: var(--bad); }
.cal-cell.today { box-shadow: inset 0 0 0 2px var(--primary); }
.cal-cell.today.done { box-shadow: inset 0 0 0 2px var(--text); }
.cal-legend {
display: flex;
justify-content: center;
gap: var(--sp-3);
margin: var(--sp-3) 0 var(--sp-3);
font-size: 11px;
color: var(--text-3);
flex-wrap: wrap;
}
.cal-legend span { display: inline-flex; align-items: center; gap: 5px; }
.lg-dot { width: 8px; height: 8px; border-radius: var(--r-full); display: inline-block; }
.lg-dot.done { background: var(--primary); }
.lg-dot.part { background: rgba(var(--tint), 0.55); }
.lg-dot.fail { background: var(--bad); }
.cal-stats-row { display: flex; justify-content: space-around; text-align: center; gap: 8px; }
.cal-stat b {
display: block;
font-family: 'Unbounded', 'Manrope', sans-serif;
font-size: 18px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.cal-stat span { font-size: 11px; color: var(--text-2); }
.cal-stat.good b { color: var(--good); }
.cal-stat.bad b { color: var(--bad); }
.cal-stat.gold b { color: var(--gold); }
.day-habit-row {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-2) 0;
border-bottom: 1px solid var(--neutral-line);
}
.day-habit-row:last-child { border-bottom: none; }
.stepper { display: flex; align-items: center; gap: 6px; }
.stepper button {
width: 44px; height: 44px;
border-radius: var(--r-sm);
border: 1px solid var(--line);
background: var(--surface-2);
color: var(--text);
display: flex; align-items: center; justify-content: center;
transition: background var(--t-fast), transform var(--t-fast);
}
.stepper button:hover { background: var(--elev); }
.stepper button:active { transform: scale(0.92); }
.stepper .stp-val {
min-width: 46px;
text-align: center;
font-size: 13px;
font-weight: 800;
font-variant-numeric: tabular-nums;
color: var(--text-2);
}
.stepper .stp-val.ok { color: var(--good); }
/* закрытый день: тот же размер, что у кнопки отметки, но это не кнопка */
.day-mark {
width: 42px; height: 42px;
display: flex; align-items: center; justify-content: center;
color: var(--text-3);
flex-shrink: 0;
}
.day-mark.ok { color: var(--good); }
/* ============================================================
СТАТИСТИКА
============================================================ */
/* недельная диаграмма (как в референсе) */
.week-chart-head { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.wc-pct {
font-family: 'Unbounded', 'Manrope', sans-serif;
font-size: 32px;
font-weight: 800;
font-variant-numeric: tabular-nums;
}
.wc-delta { font-size: 12px; font-weight: 700; }
.wc-delta.up { color: var(--good); }
.wc-delta.downish { color: var(--text-3); }
.wc-label { width: 100%; font-size: 12px; color: var(--text-2); margin-top: -4px; }
.week-chart { width: 100%; height: auto; margin-top: 12px; display: block; }
.week-chart .bar-bg { fill: var(--neutral-2); }
.week-chart .bar-fill { fill: var(--primary); }
.week-chart .bar-fill.muted { fill: rgba(var(--tint), 0.45); }
.week-chart .bar-lbl {
fill: var(--text-3);
font-size: 9px;
font-weight: 700;
font-family: 'Manrope', sans-serif;
text-anchor: middle;
}
.week-chart .bar-lbl.today { fill: var(--primary); }
.stats-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-3);
margin-bottom: var(--sp-3);
}
.stat-card { border-radius: var(--r-lg); padding: var(--sp-3); text-align: center; }
.stat-ic { width: 22px; height: 22px; margin-bottom: 8px; }
.stat-ic.flame { color: var(--gold); }
.stat-ic.gold { color: var(--gold); }
.stat-ic.good { color: var(--good); }
.stat-ic.bad { color: var(--bad); }
.stat-value {
font-family: 'Unbounded', 'Manrope', sans-serif;
font-size: 22px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.stat-value.flame { color: var(--gold); }
.stat-value.good { color: var(--good); }
.stat-value.bad { color: var(--bad); }
.stat-label { font-size: 12px; color: var(--text-2); margin-top: 4px; }
.card { border-radius: var(--r-lg); padding: var(--sp-3); margin-bottom: var(--sp-3); }
.card-title { font-size: 15px; font-weight: 800; margin-bottom: var(--sp-3); }
.card-title span { color: var(--text-3); font-weight: 600; font-size: 12px; }
.chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.chip {
border: 1px solid var(--neutral-line);
background: var(--neutral);
color: var(--text-2);
border-radius: var(--r-full);
padding: 8px 12px;
min-height: 36px;
font-size: 12px; font-weight: 700;
transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.chip:hover { border-color: rgba(var(--tint), 0.45); }
.chip.active {
background: var(--primary);
border-color: var(--primary);
color: var(--on-primary);
}
.heatmap-wrap { display: flex; gap: 6px; }
.hm-daynames {
display: flex; flex-direction: column; justify-content: space-between;
padding: 1px 0;
font-size: 9px; color: var(--text-3);
}
.heatmap { display: flex; gap: 3px; flex: 1; overflow-x: auto; }
.hm-col { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.hm-cell {
width: 100%; aspect-ratio: 1;
min-width: 12px;
border-radius: 4px;
background: var(--neutral-2);
display: inline-block;
}
.hm-cell.off { background: rgba(var(--tint), 0.04); }
.hm-cell.future { background: transparent; }
.hm-cell.l0 { background: var(--neutral-2); }
.hm-cell.fail { background: rgba(248, 113, 113, 0.4); }
.hm-cell.l1 { background: rgba(var(--tint), 0.3); }
.hm-cell.l2 { background: rgba(var(--tint), 0.6); }
.hm-cell.l3 { background: var(--primary); }
.hm-legend {
display: flex; align-items: center; gap: 4px;
justify-content: flex-end;
margin-top: var(--sp-2);
font-size: 10px; color: var(--text-3);
}
.hm-legend .hm-cell { width: 12px; min-width: 12px; }
.ledger-row {
display: flex; align-items: center; gap: var(--sp-3);
padding: var(--sp-2) 0;
border-bottom: 1px solid var(--neutral-line);
}
.ledger-row:last-child { border-bottom: none; }
.ledger-icon {
width: 40px; height: 40px;
border-radius: var(--r-sm);
background: var(--neutral-2);
display: flex; align-items: center; justify-content: center;
font-size: 18px;
flex-shrink: 0;
}
.ledger-main { flex: 1; min-width: 0; }
.ledger-name { font-size: 14px; font-weight: 700; }
.ledger-day { font-size: 12px; color: var(--text-3); margin-top: 2px; text-transform: capitalize; }
.ledger-amount {
display: inline-flex; align-items: center; gap: 4px;
font-size: 13px; font-weight: 800;
color: var(--bad);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.ledger-amount .ic { width: 14px; height: 14px; }
.streak-big {
display: inline-flex; align-items: center; gap: 4px;
font-size: 15px; font-weight: 800;
color: var(--gold);
font-variant-numeric: tabular-nums;
}
.streak-big .ic { width: 16px; height: 16px; }
.streak-big.zero { color: var(--text-3); }
/* ============================================================
ПРОФИЛЬ
============================================================ */
.profile-hero {
border-radius: var(--r-lg);
padding: var(--sp-3);
display: flex;
align-items: center;
gap: var(--sp-3);
margin-bottom: var(--sp-3);
}
.avatar {
width: 64px; height: 64px;
border-radius: var(--r-full);
background: var(--primary);
color: #fff;
display: flex; align-items: center; justify-content: center;
font-family: 'Unbounded', 'Manrope', sans-serif;
font-size: 24px;
font-weight: 800;
flex-shrink: 0;
text-transform: uppercase;
overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
/* Знак — не фотография, а рисунок 160×160 с собственным свечением по краям.
При cover оно срезается и знак смотрится сдвинутым; contain вписывает его
целиком, отступ не даёт упереться в границу круга. */
.avatar img.mark, .friend-ava img.mark {
object-fit: contain;
padding: 6%;
}
.avatar.emoji { font-size: 32px; background: var(--surface-2); }
.profile-name-box { flex: 1; min-width: 0; }
.profile-name { font-size: 18px; font-weight: 800; overflow-wrap: anywhere; }
.profile-since { font-size: 12px; color: var(--text-3); margin-top: 3px; }
.profile-hero .icon-btn { margin-left: 0; }
/* мотивация */
.motivation-level {
display: flex;
align-items: center;
gap: var(--sp-3);
margin-bottom: var(--sp-2);
}
.motivation-level output {
font-family: 'Unbounded', 'Manrope', sans-serif;
font-size: 18px; font-weight: 700;
color: var(--primary);
min-width: 52px;
text-align: right;
font-variant-numeric: tabular-nums;
}
/* ---------- СЛАЙДЕР (тот же язык, что у переключателя AppleSwitch) ----------
Стеклянный трек, белая «капля» с глубокой тенью, заполнение до значения.
При перетаскивании капля растягивается — как у переключателя.
Заполнение рисуем фоном по переменной --val, её задаёт JS. */
input[type="range"].slider {
flex: 1;
appearance: none;
-webkit-appearance: none;
height: 30px;
background: transparent; /* фон живёт на треке */
outline-offset: 4px;
cursor: pointer;
touch-action: pan-y;
--val: 50%;
}
input[type="range"].slider::-webkit-slider-runnable-track {
box-sizing: border-box;
height: 30px;
border-radius: var(--r-full);
border: 1px solid rgba(255, 255, 255, 0.16);
background:
linear-gradient(var(--primary), var(--primary)) 0 / var(--val) 100% no-repeat,
var(--neutral-2);
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.18), inset 0 -1px 2px rgba(0, 0, 0, 0.12);
}
input[type="range"].slider::-moz-range-track {
box-sizing: border-box;
height: 30px;
border-radius: var(--r-full);
border: 1px solid rgba(255, 255, 255, 0.16);
background:
linear-gradient(var(--primary), var(--primary)) 0 / var(--val) 100% no-repeat,
var(--neutral-2);
}
input[type="range"].slider::-webkit-slider-thumb {
appearance: none;
-webkit-appearance: none;
width: 32px; height: 24px;
margin-top: 2px; /* центр в треке 30px с учётом рамки */
border-radius: var(--r-full);
background: #fff;
border: none;
box-shadow:
0 3px 11px rgba(0, 0, 0, 0.24),
0 1px 1px rgba(0, 0, 0, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.78);
transition: width 200ms var(--ease);
}
input[type="range"].slider::-moz-range-thumb {
width: 32px; height: 24px;
border-radius: var(--r-full);
background: #fff;
border: none;
box-shadow: 0 3px 11px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.78);
transition: width 200ms var(--ease);
}
/* тянут — капля растягивается */
input[type="range"].slider.grabbing::-webkit-slider-thumb { width: 42px; }
input[type="range"].slider.grabbing::-moz-range-thumb { width: 42px; }
@media (prefers-reduced-motion: reduce) {
input[type="range"].slider::-webkit-slider-thumb { transition-duration: 1ms; }
input[type="range"].slider::-moz-range-thumb { transition-duration: 1ms; }
}
/* мотивация зафиксирована — это обещание себе, поэтому читается ЯРКО:
акцентная рамка, подсветка фона и крупный светлый текст, а не блёклая заметка */
.field-textarea.locked {
background:
linear-gradient(160deg, rgba(var(--tint), 0.14), rgba(var(--tint), 0.05));
border: 1px solid rgba(var(--tint), 0.35);
border-left: 3px solid var(--primary);
border-radius: var(--r-md);
padding: 14px 16px;
color: var(--text);
font-size: 15px;
font-weight: 600;
line-height: 1.55;
cursor: default;
resize: none;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
input[type="range"].slider:disabled { opacity: 0.55; cursor: default; }
.field-textarea {
width: 100%;
min-height: 76px;
background: var(--neutral);
border: 1px solid var(--neutral-line);
border-radius: var(--r-md);
padding: 12px 14px;
color: var(--text);
font-size: 15px;
font-family: inherit;
line-height: 1.5;
resize: vertical;
outline: none;
transition: border-color var(--t-fast);
}
.field-textarea:focus { border-color: var(--primary); }
/* большие цели */
.goal-row { padding: var(--sp-3) 0; border-bottom: 1px solid var(--neutral-line); }
.goal-row:last-of-type { border-bottom: none; }
.goal-top { display: flex; align-items: center; gap: var(--sp-2); }
.goal-top .g-icon { font-size: 20px; }
.goal-top .g-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; }
.goal-top .g-deadline { font-size: 11px; color: var(--text-3); white-space: nowrap; }
.goal-bar {
height: 8px;
border-radius: var(--r-full);
background: var(--neutral-2);
margin-top: var(--sp-2);
overflow: hidden;
}
.goal-fill {
height: 100%;
border-radius: var(--r-full);
background: linear-gradient(90deg, var(--primary), var(--primary-hi));
transition: width var(--t-med) var(--ease);
}
.goal-controls {
display: flex;
align-items: center;
gap: 8px;
margin-top: 8px;
}
.goal-controls .g-pct {
font-size: 12px; font-weight: 800;
color: var(--primary);
min-width: 42px;
font-variant-numeric: tabular-nums;
}
.mini-btn {
border: 1px solid var(--line);
background: var(--surface);
color: var(--text-2);
font-size: 12px; font-weight: 700;
padding: 8px 12px;
min-height: 36px;
border-radius: var(--r-full);
transition: background var(--t-fast), color var(--t-fast);
}
.mini-btn:hover { background: var(--surface-2); color: var(--text); }
.mini-btn.danger:hover { color: var(--bad); }
/* друзья */
.friend-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--neutral-line); }
.friend-row:last-of-type { border-bottom: none; }
.friend-ava {
width: 40px; height: 40px;
border-radius: var(--r-full);
background: var(--surface-2);
display: flex; align-items: center; justify-content: center;
font-size: 20px;
flex-shrink: 0;
overflow: hidden;
}
/* В доске соревнования своя строка берёт аватар из avatarHtml(), а он может
вернуть ![]()
(фото или знак). Без этих размеров картинка выводилась в
натуральную величину — 160px наезжали на имена и на соседние строки. */
.friend-ava img { width: 100%; height: 100%; object-fit: cover; }
.friend-name { flex: 1; font-size: 14px; font-weight: 700; }
/* темы */
.theme-grid { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.theme-swatch {
width: 44px; height: 44px;
border-radius: var(--r-full);
border: 2px solid var(--neutral-line);
position: relative;
transition: transform var(--t-fast), border-color var(--t-fast);
}
.theme-swatch:active { transform: scale(0.9); }
.theme-swatch.active { border-color: var(--text); }
.theme-swatch.active::after {
content: '';
position: absolute;
inset: -6px;
border: 2px solid var(--primary);
border-radius: var(--r-full);
}
/* ---------- BIT: баланс и замки на косметике ----------
Баланс — чип в заголовке витрины, цена — прямо на закрытом свотче/сцене.
Без этого копилка не читается: пользователь видел «+1 бит» в тосте, но
нигде не мог посмотреть, сколько накопил и сколько стоит закрытое. */
.bit-chip, .card-title .bit-chip {
float: right;
font-size: 11px; font-weight: 800;
color: var(--primary);
background: rgba(var(--tint), 0.12);
padding: 2px 10px;
border-radius: var(--r-full);
}
.bit-chip::before { content: '◆'; margin-right: 4px; opacity: 0.75; }
/* закрытая тема: гасим цвет и затемняем, иначе белая цена на светлом свотче
(жёлтый, белый) не читается */
.theme-swatch.locked { opacity: 0.75; }
.theme-swatch.locked::before {
content: '';
position: absolute; inset: 0;
border-radius: var(--r-full);
background: rgba(0, 0, 0, 0.5);
}
.theme-swatch .lock-price {
position: absolute; inset: 0;
display: grid; place-items: center;
font-size: 11px; font-weight: 800; color: #FFF;
}
.scene-pick { position: relative; } /* якорь для ценника */
.scene-pick.locked .sp-art { opacity: 0.3; }
.scene-pick.locked .sp-name { color: var(--text-3); }
.scene-pick .lock-price {
position: absolute; top: 6px; right: 6px;
display: inline-flex; align-items: center; gap: 3px;
padding: 2px 7px; border-radius: var(--r-full);
font-size: 10px; font-weight: 800; color: #FFF;
background: rgba(0, 0, 0, 0.55);
}
.scene-pick .lock-price::before { content: '◆'; opacity: 0.8; }
/* ---------- ЭКРАН «АВАТАР» ---------- */
.bit-hero {
display: flex; align-items: center; justify-content: space-between;
gap: var(--sp-3);
}
.bh-value { font-size: 40px; font-weight: 900; line-height: 1; color: var(--primary); }
.bh-sub { margin-top: 4px; font-size: 13px; color: var(--text-2); font-weight: 700; }
.bh-ic { width: 40px; height: 40px; color: var(--primary); opacity: 0.35; }
.bit-hint { margin: -4px 0 var(--sp-4); }
/* снаряжение путника */
.gear-picker { display: flex; flex-wrap: wrap; gap: 10px; }
.gear-pick {
position: relative;
width: 84px; padding: 6px 0 7px;
background: var(--neutral);
border: 2px solid transparent; border-radius: var(--r-md);
transition: border-color var(--t-fast), transform var(--t-fast);
}
.gear-pick:active { transform: scale(0.95); }
.gear-pick.selected { border-color: var(--primary); background: var(--surface-2); }
.gp-art { display: block; height: 46px; }
.gp-svg { display: block; width: 100%; height: 100%; }
.gp-art * { animation: none !important; transition: none !important; } /* превью — стоп-кадр */
.gp-name { display: block; font-size: 11px; font-weight: 700; color: var(--text-2); }
.gear-pick.selected .gp-name { color: var(--primary); }
.gear-pick.locked .gp-art { opacity: 0.25; }
.gear-pick.locked .gp-name { color: var(--text-3); }
.gear-pick .lock-price {
position: absolute; top: 4px; right: 4px;
display: inline-flex; align-items: center; gap: 3px;
padding: 2px 7px; border-radius: var(--r-full);
font-size: 10px; font-weight: 800; color: #FFF;
background: rgba(0, 0, 0, 0.55);
}
.gear-pick .lock-price::before { content: '◆'; opacity: 0.8; }
/* иконки обещаний */
.icon-shop { display: flex; flex-wrap: wrap; gap: 10px; }
.icon-buy {
position: relative;
width: 52px; height: 52px;
display: grid; place-items: center;
background: var(--neutral);
border: 1px solid var(--neutral-line);
border-radius: var(--r-md);
color: var(--text);
transition: transform var(--t-fast), border-color var(--t-fast);
}
.icon-buy:active { transform: scale(0.92); }
.icon-buy.locked { color: var(--text-3); }
.icon-buy.owned { border-color: rgba(var(--tint), 0.4); color: var(--primary); }
.icon-buy .lock-price {
position: absolute; right: -2px; bottom: -4px;
padding: 1px 6px; border-radius: var(--r-full);
font-size: 10px; font-weight: 800;
color: var(--on-primary); background: var(--primary);
}
.ib-owned { position: absolute; right: -3px; bottom: -3px; color: var(--primary); }
.ib-owned .ic { width: 14px; height: 14px; stroke-width: 3; }
/* знаки-аватары (шторка профиля) */
.mark-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.mark-pick {
position: relative;
width: 72px; padding: 0 0 5px;
background: none;
border: 2px solid transparent; border-radius: var(--r-md);
transition: border-color var(--t-fast), transform var(--t-fast);
}
.mark-pick:active { transform: scale(0.94); }
.mark-pick img {
display: block;
width: 68px; height: 68px;
border-radius: var(--r-full); /* в интерфейсе аватар круглый — превью тоже */
object-fit: cover;
}
.mark-pick.selected { border-color: var(--primary); }
.mark-pick.selected .mp-name { color: var(--primary); }
.mark-pick.locked img { opacity: 0.35; }
.mp-name { display: block; margin-top: 4px; font-size: 11px; font-weight: 700; color: var(--text-2); }
.mark-pick.locked .mp-name { color: var(--text-3); }
.mark-pick .lock-price {
position: absolute; top: 2px; right: 2px;
padding: 2px 7px; border-radius: var(--r-full);
font-size: 10px; font-weight: 800; color: #FFF;
background: rgba(0, 0, 0, 0.6);
}
.mark-pick .lock-price::before { content: '◆'; opacity: 0.8; margin-right: 3px; }
/* грэйс-дни */
.grace-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.grace-left { font-size: 30px; font-weight: 900; line-height: 1; }
.grace-sub { margin-top: 4px; font-size: 12px; color: var(--text-3); font-weight: 700; }
.grace-row .btn-primary:disabled { opacity: 0.45; }
/* аватар-шторка: каталог эмодзи */
.emoji-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.emoji-grid .pick { font-size: 22px; }
.avatar-preview { display: flex; justify-content: center; margin: 4px 0 8px; }
.avatar-preview .avatar { width: 84px; height: 84px; font-size: 32px; }
.avatar-preview .avatar.emoji { font-size: 44px; }
.setting-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-3);
padding: var(--sp-2) 0;
min-height: 48px;
border-bottom: 1px solid var(--neutral-line);
font-size: 14px;
font-weight: 600;
cursor: pointer;
}
.setting-row:last-of-type { border-bottom: none; }
/* время напоминания: тач-таргет ≥44px, как у остальных полей */
.time-inp {
background: var(--surface-2);
border: 1px solid var(--neutral-line);
border-radius: var(--r-md);
color: var(--text);
font: inherit;
font-variant-numeric: tabular-nums;
padding: 10px 12px;
min-height: 44px;
cursor: pointer;
}
.time-inp:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.setting-row.notif-sub { padding-left: var(--sp-3); color: var(--text-2); }
/* ---------- БАННЕР ПРУФА (живое фото/видео) ---------- */
.proof-overlay {
position: fixed; inset: 0; z-index: 210;
background: rgba(6, 10, 18, 0.96);
display: flex; align-items: center; justify-content: center;
padding: calc(24px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom));
}
.proof-overlay[hidden] { display: none; }
.proof-inner { width: 100%; max-width: 380px; text-align: center; }
.proof-title { font-family: 'Unbounded', sans-serif; font-size: 20px; margin: 0 0 2px; }
.proof-habit { font-size: 16px; font-weight: 800; color: var(--primary); margin: 0 0 4px; }
.proof-sub { font-size: 13px; color: var(--text-2); margin: 0 0 18px; }
/* сцена-кружок, как видео-сообщение */
.proof-stage {
position: relative;
width: min(280px, 74vw); height: min(280px, 74vw);
margin: 0 auto 14px;
border-radius: var(--r-full);
overflow: hidden;
background: #000;
border: 2px solid rgba(var(--tint), 0.35);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.proof-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.proof-cam.mirror { transform: scaleX(-1); } /* зеркалим только фронталку; результат совпадёт с превью */
.proof-rec {
position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
background: rgba(240, 102, 106, 0.9); color: #fff;
font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: var(--r-full);
display: flex; align-items: center; gap: 4px;
}
.proof-rec b { animation: proofBlink 1s steps(1) infinite; }
@keyframes proofBlink { 50% { opacity: 0.35; } }
.proof-cam-err { font-size: 13px; color: #F0A0A0; margin: 0 0 14px; line-height: 1.5; }
.proof-controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 16px; }
/* большая круглая кнопка спуска */
.proof-shoot {
width: 68px; height: 68px; flex: none;
border-radius: var(--r-full);
background: #fff; border: 4px solid rgba(255, 255, 255, 0.4);
cursor: pointer; transition: transform var(--t-fast);
}
.proof-shoot:active { transform: scale(0.92); }
.proof-flip, .proof-vidbtn {
border: 1px solid var(--neutral-line); background: rgba(255, 255, 255, 0.06);
color: var(--text); border-radius: var(--r-full);
min-height: 44px; padding: 0 16px; font-weight: 700; font-size: 14px; cursor: pointer;
}
.proof-flip { width: 48px; padding: 0; font-size: 20px; }
.proof-confirm .btn-primary, .proof-confirm .btn-ghost { flex: 1; }
.proof-skip {
width: 100%; min-height: 48px;
background: none; border: none; color: var(--text-3);
font-size: 14px; font-weight: 700; cursor: pointer;
}
.proof-skip b { color: var(--text-2); }
.proof-skip:disabled { opacity: 0.4; }
/* ---------- «НАЧАЛО»: интро-воронка (фон как у приложения) ---------- */
.intro {
position: fixed; inset: 0; z-index: 250;
overflow-y: auto; overflow-x: hidden;
display: flex; align-items: center; justify-content: center;
background: var(--bg); /* тот же фон, что и у приложения */
padding: calc(40px + env(safe-area-inset-top)) 24px calc(28px + env(safe-area-inset-bottom));
}
.intro[hidden] { display: none; }
.intro .aura { position: absolute; inset: 0; z-index: 0; } /* стеклянные пятна как в приложении */
/* тонкий прогресс воронки сверху */
.intro-progress {
position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: var(--neutral); z-index: 2;
}
.intro-progress-fill { display: block; height: 100%; width: 0;
background: var(--primary); transition: width var(--t-med) var(--ease); }
.intro-inner { position: relative; z-index: 1; width: 100%; max-width: 420px; text-align: center; }
.intro-step { display: flex; flex-direction: column; align-items: center; gap: 8px;
animation: introIn var(--t-med) var(--ease); }
.intro-step[hidden] { display: none; }
.intro-step-wide { max-width: 100%; }
@keyframes introIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.intro-kicker { font-size: 14px; font-weight: 700; color: var(--text-2); letter-spacing: 0.3px; margin: 0; text-transform: uppercase; }
.intro-q { font-family: 'Unbounded', sans-serif; font-size: 23px; line-height: 1.25; margin: 6px 0 8px; }
.intro-hint { font-size: 13px; color: var(--text-3); margin: 0 0 18px; }
/* чипы выбора */
.intro-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 24px; }
.intro-chip {
border: 1px solid var(--neutral-line);
background: var(--neutral);
color: var(--text-2);
font-size: 14px; font-weight: 700;
padding: 10px 16px; min-height: 44px;
border-radius: var(--r-full);
transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.intro-chip:active { transform: scale(0.95); }
.intro-chip.on {
background: rgba(var(--tint), 0.16);
border-color: rgba(var(--tint), 0.55);
color: var(--text);
}
/* список главных плюсов */
.intro-perks { list-style: none; padding: 0; margin: 0 0 22px; text-align: left; display: flex; flex-direction: column; gap: 12px; }
.intro-perks li { display: flex; gap: 12px; align-items: flex-start; }
.intro-perks .ip-ic {
flex: none; width: 40px; height: 40px; border-radius: var(--r-md);
background: var(--neutral); display: grid; place-items: center; font-size: 20px;
}
.intro-perks b { display: block; font-size: 14px; font-weight: 800; margin-bottom: 2px; }
.intro-perks span { font-size: 13px; color: var(--text-3); line-height: 1.45; }
/* отпечаток-обещание */
.fp {
position: relative;
width: 148px; height: 148px; margin: 8px 0 6px;
border-radius: var(--r-full);
border: 1px solid rgba(var(--tint), 0.28);
background: var(--neutral);
color: var(--text-3);
overflow: hidden;
transition: transform var(--t-fast);
}
.fp:active { transform: scale(0.97); }
.fp .fp-svg { position: relative; z-index: 1; width: 84px; height: 84px; }
/* заливка снизу вверх, пока держишь палец */
.fp-fill {
position: absolute; left: 0; right: 0; bottom: 0; height: 0;
background: linear-gradient(0deg, var(--primary), var(--primary-hi));
z-index: 0;
}
.fp.holding .fp-fill { height: 100%; transition: height 1.6s linear; }
.fp.holding { color: #fff; box-shadow: 0 0 30px rgba(var(--tint), 0.5); }
.fp.done { color: #fff; border-color: var(--primary); }
.fp.done .fp-fill { height: 100%; }
.intro-hours { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.intro-hours b { font-family: 'Unbounded', sans-serif; font-size: 52px; color: var(--primary); font-variant-numeric: tabular-nums; }
.intro-hours span { font-size: 15px; color: var(--text-3); }
.intro-slider { width: 100%; max-width: 300px; margin-bottom: 24px; }
/* огромное число драмы */
.intro-big {
font-family: 'Unbounded', sans-serif; font-weight: 800;
font-size: clamp(64px, 22vw, 104px); line-height: 1;
color: #F0666A; /* «сколько теряешь» — тревожный красный */
font-variant-numeric: tabular-nums;
text-shadow: 0 6px 30px rgba(240,102,106,0.4);
margin-bottom: 4px;
}
.intro-big::after { content: ' лет'; font-size: 0.34em; color: var(--text-2); font-weight: 700; }
.intro-gain { color: #3EBE7D; text-shadow: 0 6px 30px rgba(62,190,125,0.4); } /* «возврат» — зелёный */
.intro-big-sub { font-size: 16px; color: var(--text); line-height: 1.5; margin: 0 0 28px; max-width: 320px; }
.intro-cta { width: 100%; max-width: 320px; min-height: 52px; }
/* ---------- ОНБОРДИНГ (3 экрана первого запуска) ---------- */
.onboard {
position: fixed; inset: 0; z-index: 200;
background: var(--bg);
display: flex; flex-direction: column;
padding: calc(32px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom));
}
.onboard[hidden] { display: none; }
.ob-slides {
flex: 1;
display: flex;
transition: transform var(--t-med) var(--ease);
}
.ob-slide {
flex: 0 0 100%;
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center; gap: 8px;
padding: 0 8px;
}
.ob-art {
width: 116px; height: 116px;
border-radius: var(--r-full);
display: grid; place-items: center;
margin-bottom: 20px;
border: 1px solid rgba(var(--tint), 0.28);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 12px 40px rgba(0,0,0,0.3);
}
.ob-art .ic { width: 52px; height: 52px; color: var(--primary); }
.ob-art-1 { background: linear-gradient(160deg, rgba(251,191,36,0.22), rgba(var(--tint),0.06)); }
.ob-art-1 .ic { color: #FBBF24; }
.ob-art-2 { background: linear-gradient(160deg, rgba(232,114,42,0.22), rgba(var(--tint),0.06)); }
.ob-art-2 .ic { color: #E8722A; }
.ob-art-3 { background: linear-gradient(160deg, rgba(var(--tint),0.22), rgba(var(--tint),0.05)); }
.ob-title { font-family: 'Unbounded', sans-serif; font-size: 24px; line-height: 1.2; margin: 0; }
.ob-text { font-size: 15px; color: var(--text-2); line-height: 1.6; max-width: 360px; margin: 4px auto 0; }
.ob-dots { display: flex; gap: 8px; justify-content: center; margin: 24px 0; }
.ob-dot {
width: 8px; height: 8px; border-radius: var(--r-full);
background: var(--neutral-2); transition: width var(--t-med) var(--ease), background var(--t-med);
}
.ob-dot.on { width: 22px; background: var(--primary); }
.ob-actions { display: flex; gap: 12px; }
.ob-actions .btn-ghost { flex: none; }
.ob-actions .btn-primary { flex: 1; }
/* ---------- ПЕРЕКЛЮЧАТЕЛЬ (порт AppleSwitch) ----------
Ползунок можно не только нажать, но и ПОТЯНУТЬ пальцем: на отпускании
доводится в ближайшее положение. При нажатии «капля» растягивается.
Пружину motion/react заменяет доводчик на cubic-bezier с лёгким перелётом.
Метрики оригинала (размер md): трек 62×30, ползунок 32×24, отступ 4 → ход 22. */
.aswitch {
position: relative;
flex: none;
width: 62px; height: 30px;
padding: 0;
border-radius: var(--r-full);
border: 1px solid rgba(255, 255, 255, 0.16);
background: rgba(255, 255, 255, 0.06);
cursor: pointer;
touch-action: pan-y; /* вертикальный скролл страницы не ломаем */
--as-x: 0px; /* положение ползунка, задаёт JS */
--as-extra: 0px; /* растяжение «капли» при нажатии */
}
.aswitch:disabled { opacity: 0.45; cursor: not-allowed; }
.aswitch:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.as-track { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
.as-track::before {
content: '';
position: absolute; inset: 0;
background: var(--neutral-2);
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.18), inset 0 -1px 2px rgba(0, 0, 0, 0.12);
}
.as-fill {
position: absolute; inset: 0;
background: var(--primary);
opacity: 0;
transition: opacity var(--t-med) var(--ease);
}
.aswitch[aria-checked="true"] .as-fill { opacity: 1; }
/* свечение под треком во включённом состоянии */
.as-glow {
position: absolute; inset: -4px;
border-radius: inherit;
background: rgba(var(--tint), 0.5);
filter: blur(8px);
opacity: 0; transform: scale(0.85);
pointer-events: none;
transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.aswitch[aria-checked="true"] .as-glow { opacity: 0.45; transform: scale(1); }
.as-thumb {
position: absolute; top: 50%; left: 4px;
width: calc(32px + var(--as-extra));
height: calc(24px + var(--as-extra) * 0.3);
border-radius: var(--r-full);
background: #fff;
box-shadow:
0 3px 11px rgba(0, 0, 0, 0.24),
0 1px 1px rgba(0, 0, 0, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.78);
/* растягивается в обе стороны от центра, поэтому сдвиг на половину прибавки */
transform: translate(calc(var(--as-x) - var(--as-extra) / 2), -50%);
transition:
transform 340ms cubic-bezier(0.34, 1.4, 0.5, 1),
width 200ms var(--ease), height 200ms var(--ease);
}
/* пока тянут пальцем — ползунок идёт ровно за пальцем, без доводчика */
.aswitch.dragging .as-thumb { transition: width 200ms var(--ease), height 200ms var(--ease); }
.aswitch.grabbing { --as-extra: 10px; }
@media (prefers-reduced-motion: reduce) {
.as-thumb, .as-fill, .as-glow { transition-duration: 1ms; }
}
.row-btn {
width: 100%;
display: flex;
align-items: center;
gap: 12px;
padding: 13px 10px;
min-height: 48px;
border: none;
background: transparent;
border-radius: var(--r-md);
font-size: 14px;
font-weight: 700;
color: var(--text);
transition: background var(--t-fast);
}
.row-btn .ic { width: 20px; height: 20px; color: var(--text-2); }
.row-btn:hover { background: var(--surface-2); }
.row-btn.danger { color: var(--bad); }
.row-btn.danger .ic { color: var(--bad); }
.about-note {
text-align: center;
font-size: 12px;
color: var(--text-3);
line-height: 1.6;
margin: 20px 0 8px;
}
/* ---------- НИЖНЕЕ МЕНЮ ---------- */
/* ============================================================
ПУТНИК — сцена прогресса большой цели
1 выполненное обещание = 1 шаг. Ходьба играет только в момент
шага, дальше фигурка «дышит» стоя. Всё на CSS-трансформах —
дёшево для WebView на слабом Android.
============================================================ */
/* Иерархия (сверху вниз): 01 заголовок цели — максимальный приоритет,
02 сцена — главный контент, во всю ширину и без рамок вокруг,
03 цифры — второстепенные, тише по контрасту.
Отступы кратны 8. Цвет экономно: акцент — только заливка прогресса
и живой огонёк, всё остальное нейтральное и не спорит со сценой. */
.walker-card {
border-radius: var(--r-lg);
/* обрамление тише контента: рамка нейтральная, тень мягкая — по референсу
«контент важнее оформления». Карточка не должна конкурировать со сценой */
border: 1px solid var(--neutral-line);
background: var(--surface);
box-shadow: var(--shadow-1);
overflow: hidden;
margin-bottom: 24px; /* 24 — отступ между секциями (8-сетка) */
}
/* 01 — заголовок: максимальный приоритет, крупный и контрастный */
.w-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 16px 16px 12px;
}
.w-goal {
font-size: 20px;
font-weight: 800;
letter-spacing: -0.2px;
color: var(--text);
margin: 0;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 02 — главный контент: сцена во всю ширину, максимум пространства.
Это визуальное «фото» экрана — ему отдаётся высота, вокруг ничего лишнего */
.w-scene { display: block; width: 100%; height: 168px; }
/* 03 — цифры под сценой: прогресс (единственный акцент) и тихие подписи */
.w-foot { padding: 16px; }
.w-bar {
height: 6px;
border-radius: var(--r-full);
background: var(--neutral);
overflow: hidden;
}
.w-fill {
height: 100%;
width: 0;
border-radius: inherit;
background: var(--primary);
transition: width var(--t-med) var(--ease);
}
.w-sub {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-top: 8px;
}
.w-steps {
font-size: 13px; font-weight: 700; color: var(--text-2);
font-variant-numeric: tabular-nums;
}
.w-left { font-size: 13px; color: var(--text-3); }
.walker-card.finished .w-steps,
.walker-card.finished .w-left { color: var(--primary); font-weight: 700; }
/* сцена: солнце дышит, фигурка шагает */
.w-sun { opacity: 0.85; transform-box: fill-box; transform-origin: 50% 50%;
animation: wSun 14s ease-in-out infinite alternate; }
@keyframes wSun { from { transform: translateY(0); } to { transform: translateY(-4px); } }
.w-walker { transition: transform 1100ms cubic-bezier(0.34, 0.05, 0.28, 1); }
/* путник «живёт» только когда на него смотрят: вне экрана все анимации на паузе
(класс .w-onscreen ставит IntersectionObserver). Экономит батарею и точно
выполняет «двигается только когда смотрит пользователь». */
.walker-card:not(.w-onscreen) * { animation-play-state: paused !important; }
.w-man path, .w-man circle {
fill: none;
stroke: var(--w-ink, #F3EDE4); /* цвет фигурки задаёт сцена: светлый на тёмном фоне, тёмный на снегу */
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.w-man .w-pack { fill: var(--w-ink, #F3EDE4); fill-opacity: 0.22; stroke: none; }
/* оси вращения — точно в плечо и бедро (левый/правый верх bbox) */
.w-leg, .w-arm { transform-box: fill-box; }
.w-leg-f, .w-arm-f { transform-origin: 0% 0%; }
.w-leg-b, .w-arm-b { transform-origin: 100% 0%; }
.w-body { transform-box: fill-box; transform-origin: 50% 100%;
animation: wBreathe 3.6s ease-in-out infinite; }
@keyframes wBreathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.6px); } }
/* --- у каждой позы своя механика; активная фаза играет, пока висит .walking --- */
/* ИДЁТ (пустыня/Луна/джунгли) */
.pose-walk.walking .w-leg-f, .pose-walk.walking .w-arm-b { animation: wSwingA 0.5s ease-in-out infinite alternate; }
.pose-walk.walking .w-leg-b, .pose-walk.walking .w-arm-f { animation: wSwingB 0.5s ease-in-out infinite alternate; }
.pose-walk.walking .w-body { animation: wBob 0.25s ease-in-out infinite alternate; }
@keyframes wSwingA { from { transform: rotate(-15deg); } to { transform: rotate(15deg); } }
@keyframes wSwingB { from { transform: rotate(15deg); } to { transform: rotate(-15deg); } }
@keyframes wBob { from { transform: translateY(0); } to { transform: translateY(-1px); } }
/* БРЕДЁТ (Антарктида): тот же шаг, но медленнее и тяжелее; тело всё время
качает встречным ветром (наклон вперёд уже вшит в геометрию trudgeFigure) */
.pose-trudge .w-body { animation: wTrudgeSway 2.4s ease-in-out infinite; }
.pose-trudge.walking .w-leg-f, .pose-trudge.walking .w-arm-b { animation: wSwingA 0.85s ease-in-out infinite alternate; }
.pose-trudge.walking .w-leg-b, .pose-trudge.walking .w-arm-f { animation: wSwingB 0.85s ease-in-out infinite alternate; }
@keyframes wTrudgeSway { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(2.5deg); } }
/* ПЛЫВЁТ (океан): в воде гребёт и бьёт ногами ПОСТОЯННО — иначе выглядит,
будто он просто лежит на воде; тело качается на волне */
.pose-swim .w-body { animation: wFloat 2.6s ease-in-out infinite; }
.pose-swim .w-arm-f { animation: wStrokeF 0.9s ease-in-out infinite; }
.pose-swim .w-arm-b { animation: wStrokeB 0.9s ease-in-out infinite; }
.pose-swim .w-leg-f { animation: wKick 0.42s ease-in-out infinite alternate; }
.pose-swim .w-leg-b { animation: wKick 0.42s ease-in-out infinite alternate-reverse; }
/* гребёт быстрее в момент шага */
.pose-swim.walking .w-arm-f, .pose-swim.walking .w-arm-b { animation-duration: 0.55s; }
.pose-swim.walking .w-leg-f, .pose-swim.walking .w-leg-b { animation-duration: 0.26s; }
/* дошёл до берега — пловец выходит из воды: сам пловец гаснет,
на песке поднимается стоящая фигурка */
.w-arrived { opacity: 0; transform: translateY(8px);
transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease); }
.finished .w-arrived { opacity: 1; transform: translateY(0); }
.w-swimmer { transition: opacity var(--t-med) var(--ease); }
.finished .w-swimmer { opacity: 0; }
@keyframes wFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1px); } }
@keyframes wStrokeF { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-38deg); } }
@keyframes wStrokeB { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(38deg); } }
@keyframes wKick { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
/* ЛЕЗЕТ (Эверест): цепляется за стену всегда, попеременно тянется в движении */
.pose-climb .w-body { animation: wCling 1.9s ease-in-out infinite; }
.pose-climb.walking .w-arm-f, .pose-climb.walking .w-leg-b { animation: wReachA 0.7s ease-in-out infinite alternate; }
.pose-climb.walking .w-arm-b, .pose-climb.walking .w-leg-f { animation: wReachB 0.7s ease-in-out infinite alternate; }
@keyframes wCling { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(0.6px); } }
@keyframes wReachA { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
@keyframes wReachB { from { transform: rotate(9deg); } to { transform: rotate(-9deg); } }
/* финиш сцены — нейтральные метки берут цвет «чернил» сцены, акцент — красная лента */
.w-post, .w-flagline { stroke: var(--w-ink, rgba(255,255,255,0.7)); stroke-width: 1.6; fill: none; stroke-linecap: round; }
.w-ribbon { stroke: #F0666A; stroke-width: 1.8; fill: none; stroke-linecap: round;
transition: opacity var(--t-med); }
.w-flag { fill: #F0666A; stroke: none; }
.w-podium { fill: rgba(255, 255, 255, 0.75); }
/* экипировка фигурки (внутри .w-man наследует обводку кости, поэтому
заливки задаём явно) */
.w-man .w-gear { fill: none; } /* шляпа/очки — штрихом кости */
.w-man .w-gear-fill { fill: var(--w-ink, #F3EDE4); stroke: none; } /* шапка/капюшон — заливкой */
.w-man .w-helmet { fill: var(--w-ink, #F3EDE4); fill-opacity: 0.16; stroke: var(--w-ink, #F3EDE4); stroke-width: 1.4; }
.w-man .w-visor { stroke: #9CC2FF; stroke-width: 1.6; fill: none; }
.w-man .w-cane { stroke: var(--w-ink, #F3EDE4); }
.w-man .w-axe { stroke: var(--w-ink, #F3EDE4); stroke-width: 1.5; fill: none; stroke-linecap: round; }
/* флаг-финиш: полотнище свёрнуто, разворачивается при .finished (водружение) */
.w-pole { stroke: var(--w-ink, rgba(255,255,255,0.8)); stroke-width: 1.6; fill: none; stroke-linecap: round; }
.w-cloth { fill: #F0666A; stroke: none; transform-box: fill-box; transform-origin: 0% 50%;
transform: scaleX(0); transition: transform var(--t-med) var(--ease); }
.finished .w-cloth { transform: scaleX(1); animation: wFlagWave 1.4s ease-in-out 0.4s infinite; }
@keyframes wFlagWave { 0%, 100% { transform: scaleX(1) skewY(0); } 50% { transform: scaleX(1) skewY(-5deg); } }
/* декор сцен — дёшево, без blur */
.w-waves path { stroke: rgba(255, 255, 255, 0.28); stroke-width: 1; fill: none;
animation: wWave 3.2s ease-in-out infinite; }
@keyframes wWave { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
.w-stars circle { animation: wTwinkle 3s ease-in-out infinite; }
.w-stars circle:nth-child(2n) { animation-delay: 0.8s; }
.w-stars circle:nth-child(3n) { animation-delay: 1.6s; }
@keyframes wTwinkle { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
.w-snow circle { transform-box: fill-box; animation: wSnow 4s linear infinite; }
.w-snow circle:nth-child(2n) { animation-duration: 5.2s; }
.w-snow circle:nth-child(3n) { animation-duration: 3.4s; }
@keyframes wSnow { 0% { transform: translate(0, -4px); opacity: 0; } 15% { opacity: 0.8; }
100% { transform: translate(-8px, 120px); opacity: 0; } }
/* метель Антарктиды: снег летит быстро и сильно вбок + штрихи ветра */
.w-blizz circle { transform-box: fill-box; animation: wBlizz 1.7s linear infinite; }
.w-blizz circle:nth-child(2n) { animation-duration: 2.2s; }
.w-blizz circle:nth-child(3n) { animation-duration: 1.3s; }
@keyframes wBlizz { 0% { transform: translate(6px, -6px); opacity: 0; } 12% { opacity: 0.9; }
100% { transform: translate(-46px, 118px); opacity: 0; } }
/* пелена пурги поверх фигуры: человека еле видно, плюс ближний снег крупнее */
.w-haze { animation: wHaze 5s ease-in-out infinite; }
@keyframes wHaze { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }
.w-blizz-front circle { animation-duration: 1.1s; }
.w-blizz-front circle:nth-child(2n) { animation-duration: 1.5s; }
.w-blizz-front circle:nth-child(3n) { animation-duration: 0.9s; }
.w-blizz-wind path { opacity: 0; animation: wWindStreak 1.5s linear infinite; }
.w-blizz-wind path:nth-child(2n) { animation-duration: 2s; animation-delay: 0.4s; }
.w-blizz-wind path:nth-child(3n) { animation-delay: 0.8s; }
@keyframes wWindStreak { 0% { opacity: 0; transform: translateX(24px); } 30% { opacity: 0.5; }
100% { opacity: 0; transform: translateX(-64px); } }
/* лианы джунглей чуть качаются */
.w-lianas path { transform-box: fill-box; transform-origin: 50% 0%; animation: wSway 4.5s ease-in-out infinite; }
.w-lianas path:nth-child(2n) { animation-duration: 5.5s; }
@keyframes wSway { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }
/* дошёл: лента порвана, отдышивается и радуется. Руки вверх — только у ходячих
поз (у пловца/альпиниста своя геометрия рук, чтобы не выворачивало) */
.finished .w-ribbon { opacity: 0.25; }
.pose-walk.finished .w-arm-f, .pose-trudge.finished .w-arm-f { transform: rotate(-125deg); }
.pose-walk.finished .w-arm-b, .pose-trudge.finished .w-arm-b { transform: rotate(125deg); }
.pose-swim.finished .w-arm-f, .pose-climb.finished .w-arm-f { transform: rotate(-45deg); }
.finished .w-body { animation: wBreathe 1.1s ease-in-out infinite; } /* дышит часто — устал */
.w-confetti circle { fill: var(--primary); opacity: 0; transform-box: fill-box; }
/* салют играет несколько раз при появлении финиша и затихает — не жжём батарею
бесконечной анимацией, пока дошедшая карточка висит на экране */
.finished .w-confetti circle { animation: wConfetti 2.6s ease-out 4; }
.finished .w-confetti circle:nth-child(2) { animation-delay: 0.4s; fill: #FBBF24; }
.finished .w-confetti circle:nth-child(3) { animation-delay: 0.8s; fill: #4ADE80; }
.finished .w-confetti circle:nth-child(4) { animation-delay: 1.2s; fill: #F472B6; }
@keyframes wConfetti {
0% { opacity: 0; transform: translateY(0); }
18% { opacity: 1; }
100% { opacity: 0; transform: translateY(30px); }
}
/* воздух между списком обещаний и блоком больших целей — это разные смысловые
секции, граница должна читаться сразу (шаг сетки 8).
У .habit-list нижнего margin нет (flex + gap), поэтому весь зазор задаётся здесь. */
#goals-card { margin-top: 40px; }
/* воздух между секцией обещаний (в т.ч. «Не сегодня») и марафоном — чтобы
карточки не липли друг к другу */
#walker { display: block; margin-top: 28px; }
/* пикер сцен в шторке цели */
.scene-picker { display: flex; flex-wrap: wrap; gap: 10px; }
.scene-pick {
width: 92px; padding: 0; background: none;
border: 2px solid transparent; border-radius: var(--r-md);
transition: border-color var(--t-fast), transform var(--t-fast);
}
.scene-pick:active { transform: scale(0.95); }
/* .sp-art остаётся span-обёрткой: галочка выбора живёт на ::before/::after,
а у