/* ===================================================================== Льюис — «Мягкий минимализм», лайм Все цвета, шрифты, отступы и радиусы — только через переменные ниже. Тема — атрибут data-theme на : его ставит скрипт в до первой отрисовки (ручной выбор → тема Telegram → системная тема), дальше — app.js. Блок @media ниже — запасной, если скрипт не выполнился. Размеры шрифтов — в rem, чтобы текст рос вместе с настройками чтения. ===================================================================== */ :root { color-scheme: light; /* Поверхности */ --bg: #F4F5F2; --bg-fade: rgba(244, 245, 242, 0); --surface: #FFFFFF; --surface-2: #F0F2EC; /* вложенные подложки: бейджи дат, значки строк */ --line: #E7EAE3; --track: #ECEFE7; /* дорожки полос и прогресса на белом */ /* Текст */ --text: #20221E; /* 16:1 на белом */ --text-2: #62685C; /* 5.7:1 на белом, 5.2:1 на фоне */ /* Лайм */ --hero: #DCF3A5; /* акцентная карточка */ --on-hero: #20221E; /* 13.3:1 на лайме */ --on-hero-2: #4A5A3C; /* подписи на лайме, 6.1:1 */ --hero-btn: rgba(255, 255, 255, 0.62); --ring-track: rgba(255, 255, 255, 0.72); --lime: #AFD451; /* активный сегмент, выбранный день */ --on-lime: #20221E; /* 9.4:1 */ --soft: #EDF7DA; /* мягкое выделение: вторичные кнопки, отметки */ --on-soft: #304326; /* 9.6:1 на мягком */ --progress: #66901F; /* кольца, чекбоксы, текущий столбик: 3.1:1 на лайме, 3.6:1 на белом */ --on-progress: #FFFFFF; --bar: #AFD451; /* столбики и полосы (значения всегда подписаны текстом) */ --bar-current: #66901F; --bar-muted: #D5DAD0; /* дни другого периода, неактивные категории */ /* Кнопки и элементы управления */ --btn: #252A24; --on-btn: #FFFFFF; /* 14.6:1 */ --control-border: #8A9083; /* граница чекбоксов, 3.3:1 на белом */ --link: #3F6B12; /* текстовые кнопки, 6.3:1 на белом */ /* Смысловые цвета */ --danger: #B3261E; /* 6.5:1 на белом, 5.4:1 на лайме */ --danger-soft: #FCE8E6; --warning: #8A5A00; --warning-soft: #FFF1CC; --success: #3F6B12; --success-soft: #EDF7DA; --star: #B07600; /* 3.9:1 на белом */ --focus: #304326; --disabled-bg: #E3E6DF; --disabled-text: #7C8277; /* Панели и тени */ --nav-bg: rgba(255, 255, 255, 0.9); --nav-active: #DCF3A5; --on-nav-active: #20221E; --backdrop: rgba(20, 23, 19, 0.38); --shadow: 0 1px 2px rgba(32, 34, 30, 0.04), 0 4px 14px rgba(32, 34, 30, 0.045); --shadow-float: 0 6px 24px rgba(32, 34, 30, 0.1); --shadow-sheet: 0 -8px 30px rgba(32, 34, 30, 0.12); /* Типографика */ --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --fs-title: 1.75rem; /* 28px — заголовок раздела */ --fs-num-xl: 2.125rem; /* 34px — главное число */ --fs-num: 1.1875rem; /* 19px — значения в маленьких карточках */ --fs-h2: 1.0625rem; /* 17px — заголовки карточек и форм */ --fs-body: 1rem; /* 16px */ --fs-sub: 0.875rem; /* 14px */ --fs-caption: 0.8125rem; /* 13px */ --fs-tiny: 0.6875rem; /* 11px — подписи навигации и графиков */ --lh: 1.45; /* Интервалы: 4 · 8 · 12 · 16 · 20 · 24 · 32 */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --gutter: 16px; --content-max: 600px; /* Радиусы и размеры */ --r-card: 22px; --r-hero: 24px; --r-field: 14px; --r-sm: 12px; --r-pill: 999px; --r-nav: 30px; --tap: 44px; --btn-h: 52px; --field-h: 48px; --nav-h: 66px; --nav-gap: 10px; --safe-bottom: env(safe-area-inset-bottom, 0px); /* Движение */ --dur: 180ms; --ease: cubic-bezier(0.2, 0.7, 0.3, 1); } /* Тёмная тема — «ночь» из макета */ :root[data-theme="dark"] { color-scheme: dark; --bg: #141713; --bg-fade: rgba(20, 23, 19, 0); --surface: #22271F; --surface-2: #2B3127; --line: #374030; --track: #394332; --text: #F5F7F0; /* 14.1:1 на карточке */ --text-2: #B8C1AF; /* 8.2:1 на карточке */ --hero: #33412A; --on-hero: #F5F7F0; /* 10:1 */ --on-hero-2: #CAD4BE; /* 7.1:1 */ --hero-btn: rgba(255, 255, 255, 0.09); --ring-track: rgba(255, 255, 255, 0.1); --lime: #C8E795; --on-lime: #202819; /* 11.1:1 */ --soft: #2E3826; --on-soft: #DCEFBF; /* 10:1 */ --progress: #C8E795; --on-progress: #202819; --bar: #86A45B; /* 5.4:1 на карточке */ --bar-current: #C8E795; --bar-muted: #4A5540; --btn: #C8E795; --on-btn: #202819; --control-border: #7F8A76; /* 4.2:1 на карточке */ --link: #C8E795; --danger: #FF8A80; /* 6.7:1 на карточке */ --danger-soft: #3D2320; --warning: #F2C66D; --warning-soft: #3A3120; --success: #C8E795; --success-soft: #2E3826; --star: #F2C66D; --focus: #C8E795; --disabled-bg: #30362B; --disabled-text: #8E978A; --nav-bg: rgba(34, 39, 31, 0.92); --nav-active: #C8E795; --on-nav-active: #202819; --backdrop: rgba(0, 0, 0, 0.55); --shadow: 0 1px 2px rgba(0, 0, 0, 0.25); --shadow-float: 0 8px 28px rgba(0, 0, 0, 0.45); --shadow-sheet: 0 -8px 30px rgba(0, 0, 0, 0.45); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --bg: #141713; --bg-fade: rgba(20, 23, 19, 0); --surface: #22271F; --surface-2: #2B3127; --line: #374030; --track: #394332; --text: #F5F7F0; --text-2: #B8C1AF; --hero: #33412A; --on-hero: #F5F7F0; --on-hero-2: #CAD4BE; --hero-btn: rgba(255, 255, 255, 0.09); --ring-track: rgba(255, 255, 255, 0.1); --lime: #C8E795; --on-lime: #202819; --soft: #2E3826; --on-soft: #DCEFBF; --progress: #C8E795; --on-progress: #202819; --bar: #86A45B; --bar-current: #C8E795; --bar-muted: #4A5540; --btn: #C8E795; --on-btn: #202819; --control-border: #7F8A76; --link: #C8E795; --danger: #FF8A80; --danger-soft: #3D2320; --warning: #F2C66D; --warning-soft: #3A3120; --success: #C8E795; --success-soft: #2E3826; --star: #F2C66D; --focus: #C8E795; --disabled-bg: #30362B; --disabled-text: #8E978A; --nav-bg: rgba(34, 39, 31, 0.92); --nav-active: #C8E795; --on-nav-active: #202819; --backdrop: rgba(0, 0, 0, 0.55); --shadow: 0 1px 2px rgba(0, 0, 0, 0.25); --shadow-float: 0 8px 28px rgba(0, 0, 0, 0.45); --shadow-sheet: 0 -8px 30px rgba(0, 0, 0, 0.45); } } /* ============================ Основа ============================ */ *, *::before, *::after { box-sizing: border-box; } /* touch-action: без увеличения двойным касанием (вместе с user-scalable=no в ) */ html { background: var(--bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; touch-action: manipulation; } body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; /* место под нижнюю панель: навигация + главная кнопка + воздух */ padding-bottom: calc(var(--nav-h) + var(--nav-gap) + var(--btn-h) + var(--sp-3) + var(--sp-5) + var(--safe-bottom)); } body.no-action { padding-bottom: calc(var(--nav-h) + var(--nav-gap) + var(--sp-6) + var(--safe-bottom)); } body.gated { padding-bottom: var(--sp-8); } body.sheet-open { overflow: hidden; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } button:disabled { cursor: default; } [hidden] { display: none !important; } h1, h2, h3, p { margin: 0; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .icon { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .num { font-variant-numeric: tabular-nums; } /* ============================ Шапка ============================ */ .app-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); max-width: var(--content-max); margin: 0 auto; padding: calc(var(--sp-3) + env(safe-area-inset-top, 0px)) var(--gutter) 0; } .hello { display: flex; align-items: center; gap: 10px; min-width: 0; } .avatar { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--hero); color: var(--on-hero); font-size: var(--fs-body); font-weight: 700; } .hello-text { min-width: 0; } .app-name { font-size: var(--fs-h2); font-weight: 700; line-height: 1.2; } .hello-sub { margin-top: 1px; font-size: var(--fs-caption); color: var(--text-2); overflow-wrap: anywhere; line-height: 1.3; } .header-actions { display: flex; align-items: flex-start; gap: var(--sp-2); flex: none; } .round-action { display: flex; flex-direction: column; align-items: center; gap: 3px; } .round-btn { width: var(--tap); height: var(--tap); border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--text); box-shadow: var(--shadow); transition: background var(--dur) var(--ease), transform var(--dur) var(--ease); } .round-btn:active { transform: scale(0.95); } .round-caption { font-size: var(--fs-tiny); color: var(--text-2); line-height: 1.1; } /* ============================ Разделы ============================ */ main { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter); } .section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: var(--tap); margin: var(--sp-5) 0 var(--sp-3); } .title { font-size: var(--fs-title); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; overflow-wrap: anywhere; min-width: 0; } .tab { animation: fade-in var(--dur) var(--ease); } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } /* ============================ Карточки ============================ */ .card { background: var(--surface); border-radius: var(--r-card); padding: var(--sp-4); box-shadow: var(--shadow); margin-bottom: var(--sp-3); } .card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-3); } .card-heading { min-width: 0; } .card-title { font-size: var(--fs-h2); font-weight: 650; line-height: 1.3; } .card-sub { margin-top: 2px; font-size: var(--fs-caption); color: var(--text-2); } .card-unit { flex: none; font-size: var(--fs-caption); color: var(--text-2); padding-top: 2px; } .card-foot { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--line); font-size: var(--fs-caption); color: var(--text-2); } .card-foot b { color: var(--text); font-weight: 650; font-variant-numeric: tabular-nums; } /* Лаймовая карточка: главное число раздела и кольцо */ .hero { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); background: var(--hero); color: var(--on-hero); border-radius: var(--r-hero); padding: var(--sp-5) var(--sp-4) var(--sp-5) var(--sp-5); margin-bottom: var(--sp-3); } button.hero { width: 100%; border: 0; text-align: left; font: inherit; transition: transform var(--dur) var(--ease); } button.hero:active { transform: scale(0.99); } button.hero .hero-num, button.hero .hero-sub { display: block; } /* внутри кнопки — span вместо p */ /* без min-width: 0 — если число не помещается рядом с кольцом, кольцо уходит на следующую строку */ .hero-main { flex: 1 1 150px; max-width: 100%; } .hero-label { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sub); font-weight: 600; color: var(--on-hero-2); } .hero-label .icon { width: 18px; height: 18px; } .hero-num { margin-top: var(--sp-2); font-size: var(--fs-num-xl); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; } .hero-num.is-long { font-size: 1.75rem; } .hero-num.is-xlong { font-size: 1.5rem; } .hero-num.is-text { font-size: 1.5rem; letter-spacing: -0.01em; white-space: normal; overflow-wrap: anywhere; } .hero-sub { margin-top: var(--sp-1); font-size: var(--fs-sub); color: var(--on-hero-2); overflow-wrap: anywhere; } .hero-sub b { color: var(--on-hero); font-weight: 650; } .hero-note { display: flex; align-items: flex-start; gap: 6px; margin-top: var(--sp-2); font-size: var(--fs-caption); font-weight: 650; color: var(--danger); } .hero-note .icon { width: 16px; height: 16px; stroke-width: 2; margin-top: 1px; } .hero-actions { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-1); } .hero-actions .btn-primary { flex: 1 1 100%; } .hero-actions .btn-hero { flex: 1 1 auto; } .hero-main > .btn { margin-top: var(--sp-3); } /* Бейдж «через N дней» справа в карточке праздника */ .hero-days { flex: none; width: 76px; height: 76px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: var(--hero-btn); line-height: 1.1; } .hero-days b { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; } .hero-days span { font-size: var(--fs-caption); color: var(--on-hero-2); } .hero-days .icon { width: 30px; height: 30px; } /* Кольцо прогресса (SVG) */ .ring { position: relative; flex: none; width: 88px; height: 88px; } .ring svg { display: block; width: 100%; height: 100%; } .ring-track { stroke: var(--ring-track); } .ring-bar { stroke: var(--progress); transition: stroke-dasharray 300ms var(--ease); } .ring-bar.is-over { stroke: var(--danger); } .ring-center { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; line-height: 1.1; } .ring-pct { font-size: var(--fs-h2); font-weight: 700; font-variant-numeric: tabular-nums; } .ring-cap { font-size: var(--fs-tiny); color: var(--on-hero-2); } .ring-badge { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--text); box-shadow: var(--shadow); } .ring-badge .icon { width: 20px; height: 20px; stroke-width: 2.2; } /* Маленькие карточки-показатели по две в ряд; при нехватке места встают друг под друга */ .tiles { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: var(--sp-3); } .tile { flex: 1 1 130px; display: flex; align-items: center; gap: 10px; padding: var(--sp-3) var(--sp-4); background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow); } .tile > .icon { width: 24px; height: 24px; color: var(--text); } .tile-text { display: flex; flex-direction: column; min-width: 0; } .tile-label { font-size: var(--fs-caption); color: var(--text-2); line-height: 1.3; } .tile-value { font-size: var(--fs-num); font-weight: 650; line-height: 1.25; font-variant-numeric: tabular-nums; white-space: nowrap; } .tile.is-danger { background: var(--danger-soft); box-shadow: none; } .tile.is-danger > .icon, .tile.is-danger .tile-value { color: var(--danger); } /* Подпись над группой: «В списке 4», «Операции» */ .group-label { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: var(--tap); margin: var(--sp-4) var(--sp-1) var(--sp-1); } .group-title { font-size: var(--fs-body); font-weight: 650; } .meta { font-size: var(--fs-sub); color: var(--text-2); font-variant-numeric: tabular-nums; } /* ============================ Списки ============================ */ .list { list-style: none; margin: 0 0 var(--sp-3); padding: 0; background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow); overflow: hidden; } .row { display: flex; align-items: center; gap: var(--sp-3); min-height: 56px; padding: var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-4); position: relative; } .row + .row::before { content: ""; position: absolute; top: 0; right: var(--sp-4); left: var(--sp-4); border-top: 1px solid var(--line); } .row-main { flex: 1; min-width: 0; padding: var(--sp-1) 0; } .row-title { display: block; font-size: var(--fs-body); line-height: 1.35; overflow-wrap: anywhere; } .row-title .qty { color: var(--text-2); } .row-sub { display: block; margin-top: 2px; font-size: var(--fs-caption); color: var(--text-2); overflow-wrap: anywhere; } .row-sub .price { color: var(--text); font-weight: 650; font-variant-numeric: tabular-nums; } .row-end { flex: none; text-align: right; font-size: var(--fs-sub); color: var(--text-2); font-variant-numeric: tabular-nums; padding-right: var(--sp-2); } .row-end.strong { font-size: var(--fs-body); font-weight: 650; color: var(--text); } .row-end.is-income { color: var(--success); } /* Строка целиком — кнопка «открыть» */ .row.is-tappable { padding: 0; } .row-button { display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: 56px; padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4); border: 0; background: none; text-align: left; color: inherit; transition: background var(--dur) var(--ease); } .row-button:active { background: var(--soft); } .row-button > .icon, .row-chevron { color: var(--text-2); width: 18px; height: 18px; } /* Основная часть строки — кнопка, а справа отдельные действия */ .row-main-btn { display: block; border: 0; background: none; color: inherit; text-align: left; font: inherit; padding: var(--sp-1) 0; min-height: var(--tap); border-radius: 10px; } .row-main-btn:active { background: var(--soft); } .row-icon { width: 40px; height: 40px; flex: none; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--surface-2); color: var(--text); font-size: 1.25rem; } .row-icon .icon { width: 20px; height: 20px; } .row-icon.is-accent { background: var(--hero); color: var(--on-hero); } .row-emoji { flex: none; width: 40px; height: 40px; border-radius: var(--r-sm); display: grid; place-items: center; font-size: 1.25rem; background: var(--surface-2); } .tag { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: var(--r-pill); font-size: var(--fs-tiny); font-weight: 700; letter-spacing: 0.01em; background: var(--soft); color: var(--on-soft); vertical-align: 2px; white-space: nowrap; } .tag .icon { width: 12px; height: 12px; stroke-width: 2.2; } .tag.is-muted { background: var(--surface-2); color: var(--text-2); } .day-head { display: flex; justify-content: space-between; gap: var(--sp-2); margin: var(--sp-4) var(--sp-1) var(--sp-2); font-size: var(--fs-caption); color: var(--text-2); font-variant-numeric: tabular-nums; } .day-head b { color: var(--text); font-weight: 650; } .footnote { margin: var(--sp-2) var(--sp-4) var(--sp-4); text-align: center; font-size: var(--fs-caption); color: var(--text-2); } /* ============================ Кнопки ============================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: var(--tap); padding: 0 var(--sp-5); border: 0; border-radius: var(--r-pill); font-size: var(--fs-body); font-weight: 650; line-height: 1.2; text-align: center; transition: background var(--dur) var(--ease), transform var(--dur) var(--ease); } .btn:active:not(:disabled) { transform: scale(0.98); } .btn .icon { width: 20px; height: 20px; stroke-width: 2; } .btn-primary { min-height: var(--btn-h); background: var(--btn); color: var(--on-btn); } .btn-secondary { background: var(--soft); color: var(--on-soft); } .btn-hero { background: var(--hero-btn); color: var(--on-hero); } .btn-ghost { background: none; color: var(--link); padding: 0 var(--sp-2); } .btn-ghost-danger { background: none; color: var(--danger); min-height: var(--btn-h); padding: 0 var(--sp-3); } .btn-block { width: 100%; } .btn-grow { flex: 1; } .btn-small { min-height: 36px; padding: 0 var(--sp-3); font-size: var(--fs-caption); position: relative; } .btn-small::after { content: ""; position: absolute; inset: -4px 0; } /* зона нажатия 44px */ .btn:disabled { background: var(--disabled-bg); color: var(--disabled-text); } .btn-ghost:disabled, .btn-ghost-danger:disabled { background: none; } .icon-btn { width: var(--tap); height: var(--tap); flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--text-2); transition: background var(--dur) var(--ease); } .icon-btn:active:not(:disabled) { background: var(--soft); } .icon-btn:disabled { color: var(--disabled-text); } .row > .icon-btn .icon { width: 20px; height: 20px; } .section-head .icon-btn { background: var(--surface); box-shadow: var(--shadow); color: var(--text); } .icon-btn.on-hero { background: var(--hero-btn); color: var(--on-hero); } /* ============================ Переключатели ============================ */ .segmented { display: flex; gap: 4px; padding: 4px; background: var(--surface); border-radius: var(--r-pill); box-shadow: var(--shadow); margin-bottom: var(--sp-3); } .segmented button { flex: 1; min-width: 0; min-height: 40px; position: relative; border: 0; border-radius: var(--r-pill); background: none; padding: 0 var(--sp-2); color: var(--text-2); font-size: var(--fs-sub); font-weight: 600; line-height: 1.2; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .segmented button::after { content: ""; position: absolute; inset: -4px 0; } /* 48px по высоте */ .segmented button[aria-checked="true"] { background: var(--lime); color: var(--on-lime); font-weight: 700; } .sheet .segmented { box-shadow: none; border: 1px solid var(--line); } /* Переключатель месяца */ .period { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-3); } .period .icon-btn { background: var(--surface); box-shadow: var(--shadow); color: var(--text); } .period .icon-btn .icon { width: 20px; height: 20px; } .period .icon-btn:disabled { background: none; box-shadow: none; color: var(--disabled-text); } .period-label { font-weight: 650; text-align: center; font-variant-numeric: tabular-nums; } /* Чипы: списки, категории, фильтры */ .chips { display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)) var(--sp-3); padding: 2px var(--gutter) 4px; } .chips::-webkit-scrollbar { display: none; } .chips.wrap { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; } /* В формах чипы переносятся строками; длинное название переносится внутри чипа, а не вылезает за экран */ .chips.wrap .chip { flex: 0 1 auto; max-width: 100%; white-space: normal; text-align: left; line-height: 1.25; padding-top: 6px; padding-bottom: 6px; } .chip { flex: none; display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); padding: 0 var(--sp-4); border: 1.5px solid transparent; border-radius: var(--r-pill); background: var(--surface); color: var(--text); box-shadow: var(--shadow); font-size: var(--fs-sub); font-weight: 550; white-space: nowrap; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); } .chip .icon { width: 20px; height: 20px; } .chip .count { color: var(--text-2); font-variant-numeric: tabular-nums; font-weight: 600; } .chip[aria-pressed="true"], .chip[aria-checked="true"] { background: var(--hero); border-color: var(--lime); color: var(--on-hero); font-weight: 700; box-shadow: none; } .chip[aria-pressed="true"] .count, .chip[aria-checked="true"] .count { color: var(--on-hero-2); } .chip.dashed { border: 1.5px dashed var(--control-border); background: none; box-shadow: none; color: var(--text-2); } .chip.chip-small { min-height: 36px; padding: 0 var(--sp-3); font-size: var(--fs-caption); position: relative; } .chip.chip-small::after { content: ""; position: absolute; inset: -4px 0; } .sheet .chip { box-shadow: none; border-color: var(--line); } .sheet .chip[aria-checked="true"], .sheet .chip[aria-pressed="true"] { border-color: var(--lime); } /* ============================ Чекбоксы ============================ */ /* Вся строка покупки — один чекбокс с подписью; справа отдельная кнопка «изменить» */ .check-row { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--sp-3); min-height: 56px; padding: var(--sp-2) 0; border: 0; background: none; text-align: left; color: inherit; } .check { width: var(--tap); height: var(--tap); flex: none; margin-left: calc(-1 * var(--sp-3)); margin-right: calc(-1 * var(--sp-2)); display: grid; place-items: center; border: 0; background: none; padding: 0; } .check-box { width: 24px; height: 24px; flex: none; border-radius: 7px; border: 1.5px solid var(--control-border); display: grid; place-items: center; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); } .check-box .icon { width: 16px; height: 16px; stroke-width: 2.6; opacity: 0; color: var(--on-progress); } [aria-checked="true"] > .check-box { background: var(--progress); border-color: var(--progress); } [aria-checked="true"] > .check-box .icon { opacity: 1; } .row.is-done .row-title { color: var(--text-2); text-decoration: line-through; text-decoration-thickness: 1px; } /* Сворачиваемая группа «Куплено» */ .done-group { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow); margin-bottom: var(--sp-3); overflow: hidden; } .done-summary { display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: 60px; padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-4); border: 0; background: none; text-align: left; color: inherit; } .done-summary:active { background: var(--soft); } .done-badge { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--progress); color: var(--on-progress); } .done-badge .icon { width: 16px; height: 16px; stroke-width: 2.6; } .done-text { flex: 1; min-width: 0; } .done-title { display: block; font-weight: 600; } .done-preview { display: block; font-size: var(--fs-caption); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .done-summary .row-chevron { transition: transform var(--dur) var(--ease); } .done-summary[aria-expanded="true"] .row-chevron { transform: rotate(90deg); } .done-body { border-top: 1px solid var(--line); } .done-body .list { box-shadow: none; border-radius: 0; margin: 0; } .done-actions { display: flex; justify-content: flex-end; padding: 0 var(--sp-2) var(--sp-2); } /* ============================ Графики ============================ */ /* Столбики: неделя по дням, месяцы. Подпись значения — прямо над столбиком */ .cols { display: grid; grid-template-columns: repeat(var(--n, 7), minmax(0, 1fr)); gap: 6px; height: 156px; } .col { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; min-width: 0; padding: 0; border: 0; background: none; color: var(--text-2); border-radius: 10px; } .col-plot { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; font-size: var(--fs-tiny); } .col-val { color: var(--text); font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.2; } .col-bar { width: 64%; max-width: 30px; height: calc((100% - 1.8em) * var(--r, 0)); min-height: 4px; border-radius: 8px; background: var(--bar); } .col-bar.is-empty { min-height: 3px; height: 3px; background: var(--track); } .col-label { font-size: var(--fs-caption); line-height: 1.2; } .col.is-current .col-bar { background: var(--bar-current); } .col.is-current .col-label { color: var(--text); font-weight: 700; } .col.is-muted .col-bar:not(.is-empty) { background: var(--bar-muted); } .col.is-muted .col-val { color: var(--text-2); font-weight: 500; } .col.is-future .col-label { opacity: 0.6; } .col[aria-pressed="true"] .col-label { color: var(--text); font-weight: 700; text-decoration: underline 2px var(--progress); text-underline-offset: 4px; } .chart-detail { display: flex; justify-content: space-between; gap: var(--sp-2); margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--line); font-size: var(--fs-sub); min-height: 1.45em; } .chart-detail b { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; } .chart-note { margin-top: var(--sp-2); font-size: var(--fs-caption); color: var(--text-2); } /* Полосы категорий: название · полоса · сумма, общий масштаб */ .cat-rows { display: flex; flex-direction: column; } .cat-row { display: grid; grid-template-columns: minmax(0, 38%) minmax(40px, 1fr) auto; align-items: center; column-gap: var(--sp-3); row-gap: 6px; width: 100%; padding: 10px 0; border: 0; background: none; text-align: left; color: inherit; } .cat-row + .cat-row { border-top: 1px solid var(--line); } button.cat-row { padding: 10px var(--sp-2); margin: 0 calc(-1 * var(--sp-2)); width: calc(100% + 2 * var(--sp-2)); border-radius: var(--r-sm); } button.cat-row:active, .cat-row[aria-pressed="true"] { background: var(--soft); } .cat-row[aria-pressed="true"] + .cat-row, .cat-row + .cat-row[aria-pressed="true"] { border-top-color: transparent; } .cat-name { font-size: var(--fs-sub); line-height: 1.3; overflow-wrap: anywhere; } .cat-bar { position: relative; height: 8px; border-radius: var(--r-pill); background: var(--track); } .cat-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--r-pill); background: var(--bar); } .cat-plan { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--text); opacity: 0.55; } .cat-row.is-over .cat-fill { background: var(--danger); } .cat-rows.has-filter .cat-row:not([aria-pressed="true"]) .cat-fill { background: var(--bar-muted); } .cat-amount { text-align: right; line-height: 1.25; white-space: nowrap; font-variant-numeric: tabular-nums; } .cat-amount b { display: block; font-size: var(--fs-sub); font-weight: 650; } .cat-amount small { display: block; font-size: var(--fs-caption); color: var(--text-2); } .cat-over { grid-column: 1 / -1; display: flex; align-items: center; gap: 4px; font-size: var(--fs-caption); font-weight: 650; color: var(--danger); } .cat-over .icon { width: 14px; height: 14px; stroke-width: 2; } .cat-more { margin-top: var(--sp-1); } /* ============================ Поля ============================ */ .field-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .label { font-size: var(--fs-caption); font-weight: 650; color: var(--text); } .field { width: 100%; min-height: var(--field-h); padding: var(--sp-3) 14px; border: 1px solid var(--line); border-radius: var(--r-field); background: var(--surface); color: var(--text); font-size: var(--fs-body); /* 16px и больше: iOS не увеличивает страницу при фокусе */ transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .field::placeholder { color: var(--text-2); opacity: 0.9; } .field:focus { outline: none; border-color: var(--progress); box-shadow: 0 0 0 3px var(--soft); } .field[aria-invalid="true"] { border-color: var(--danger); } .field[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--danger-soft); } select.field { appearance: none; -webkit-appearance: none; padding-right: 36px; height: max(var(--field-h), calc(1.3em + 2 * var(--sp-3) + 2px)); line-height: normal; /* растёт с крупным текстом */ background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; } textarea.field { resize: vertical; line-height: var(--lh); } /* Дата и время: системные поля iOS/Android выравниваем как остальные */ input[type="date"].field, input[type="time"].field { -webkit-appearance: none; appearance: none; display: block; min-width: 0; max-width: 100%; height: max(var(--field-h), calc(1.3em + 2 * var(--sp-3) + 2px)); line-height: normal; text-align: left; } .field::-webkit-date-and-time-value { text-align: left; margin: 0; min-height: 1.3em; } .field::-webkit-datetime-edit { padding: 0; } .field::-webkit-calendar-picker-indicator { margin: 0 0 0 var(--sp-1); opacity: 0.6; } input[type="number"].field { -moz-appearance: textfield; } input[type="number"].field::-webkit-inner-spin-button, input[type="number"].field::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .field-amount { font-size: 1.75rem; font-weight: 700; font-variant-numeric: tabular-nums; } .field-hint { font-size: var(--fs-caption); color: var(--text-2); } .field-error { display: flex; align-items: center; gap: 6px; font-size: var(--fs-caption); color: var(--danger); font-weight: 600; } .field-error .icon { width: 16px; height: 16px; stroke-width: 2; } .field-row { display: flex; gap: var(--sp-2); } .field-grow { flex: 1 1 0; min-width: 0; } .field-day { width: 76px; flex: none; } .field-year { width: 92px; flex: none; } .inline-form { display: flex; gap: var(--sp-2); } .inline-form .field { flex: 1; min-width: 0; } .search { position: relative; margin-bottom: var(--sp-3); } .search .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-2); pointer-events: none; } .search .field { padding-left: 44px; border-color: transparent; box-shadow: var(--shadow); } .search .field:focus { border-color: var(--progress); box-shadow: 0 0 0 3px var(--soft); } /* Переключатель «Очень хочу» */ .toggle-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); width: 100%; padding: var(--sp-3) var(--sp-4); min-height: 56px; border: 1px solid var(--line); border-radius: var(--r-field); background: var(--surface); color: var(--text); text-align: left; } .toggle-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .toggle-text span { font-size: var(--fs-caption); color: var(--text-2); } .toggle { flex: none; width: 48px; height: 28px; border-radius: 14px; position: relative; background: var(--track); box-shadow: inset 0 0 0 1px var(--control-border); transition: background var(--dur) var(--ease); } .toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform var(--dur) var(--ease); } .toggle-row[aria-checked="true"] .toggle { background: var(--progress); box-shadow: none; } .toggle-row[aria-checked="true"] .toggle::after { transform: translateX(20px); } /* ============================ Состояния ============================ */ .state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-2); padding: var(--sp-8) var(--sp-5); background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow); margin-bottom: var(--sp-3); } .state-icon { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; margin-bottom: var(--sp-1); background: var(--hero); color: var(--on-hero); } .state-icon .icon { width: 28px; height: 28px; } .state.is-error .state-icon { background: var(--danger-soft); color: var(--danger); } .state h2 { font-size: var(--fs-h2); font-weight: 650; } .state p { color: var(--text-2); font-size: var(--fs-sub); max-width: 32ch; } .state .btn { margin-top: var(--sp-2); } .state.compact { padding: var(--sp-5); } .gate { padding-top: var(--sp-6); } /* Загрузка: спокойные «плашки» вместо спиннера */ .skeleton { display: flex; flex-direction: column; gap: var(--sp-3); } .skeleton-block { height: 60px; border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow); position: relative; overflow: hidden; } .skeleton-block.tall { height: 132px; background: var(--hero); box-shadow: none; } .skeleton-block::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--track), transparent); transform: translateX(-100%); animation: shimmer 1.4s infinite; opacity: 0.6; } @keyframes shimmer { to { transform: translateX(100%); } } /* ============================ Траты, бюджет, доход ============================ */ .pay-end { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-1); } .pay-end b { color: var(--text); font-size: var(--fs-body); font-weight: 650; } .sheet-foot.sheet-foot-total { flex-direction: column; align-items: stretch; } .budget-total { display: flex; justify-content: space-between; margin: 0 var(--sp-1); font-size: var(--fs-sub); color: var(--text-2); } .budget-total b { color: var(--text); font-size: var(--fs-body); } .limits-list { display: flex; flex-direction: column; gap: var(--sp-2); } .limit-row { display: flex; align-items: center; gap: var(--sp-3); } .limit-row label { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: var(--fs-sub); } .limit-row .field { width: 128px; flex: none; text-align: right; font-variant-numeric: tabular-nums; } .period-setting { display: flex; flex-direction: column; gap: 6px; padding-bottom: var(--sp-4); border-bottom: 1px solid var(--line); } .period-setting-row { display: flex; align-items: center; gap: var(--sp-3); } .period-setting-row .field { width: 88px; flex: none; text-align: center; font-variant-numeric: tabular-nums; } #inc-presets { margin-top: var(--sp-1); } /* Категории: название и смайлик */ .cats-list { margin: 0; } .emoji-pick { display: flex; align-items: center; gap: var(--sp-4); } .emoji-field-wrap { flex: none; } .emoji-field { width: 76px; height: 76px; padding: 0; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); text-align: center; font-size: 2.625rem; line-height: 76px; caret-color: transparent; } .emoji-field:focus { outline: none; border-color: var(--progress); box-shadow: 0 0 0 3px var(--soft); } .emoji-pick .field-hint { flex: 1; min-width: 0; } .emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 4px; } .emoji-btn { height: 44px; border: 0; border-radius: var(--r-sm); background: none; font-size: 1.5rem; line-height: 1; display: grid; place-items: center; } .emoji-btn:active { background: var(--soft); } .emoji-btn[aria-pressed="true"] { background: var(--soft); box-shadow: inset 0 0 0 2px var(--progress); } /* ============================ Дни рождения ============================ */ .date-badge { width: 46px; flex: none; padding: 6px 0; border-radius: 14px; background: var(--surface-2); color: var(--text); text-align: center; line-height: 1.1; } .date-badge b { display: block; font-size: 1.0625rem; font-variant-numeric: tabular-nums; } .date-badge span { font-size: var(--fs-tiny); color: var(--text-2); } .date-badge.soon { background: var(--hero); color: var(--on-hero); } .date-badge.soon span { color: var(--on-hero-2); } /* ============================ Календарь ============================ */ .cal-card { padding: var(--sp-3) var(--sp-2); } .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 2px; } .cal-wd { text-align: center; font-size: var(--fs-tiny); font-weight: 650; color: var(--text-2); padding: var(--sp-1) 0 var(--sp-2); text-transform: uppercase; letter-spacing: 0.04em; } .cal-day { min-height: 50px; border: 0; background: none; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: var(--r-sm); color: var(--text); } .cal-num { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 0.9375rem; font-variant-numeric: tabular-nums; transition: background var(--dur) var(--ease); } .cal-day.past .cal-num { color: var(--text-2); } /* Сегодня — тёмное кольцо, выбранный день — лаймовый круг; оба сразу — круг с кольцом */ .cal-day[aria-current="date"] .cal-num { box-shadow: inset 0 0 0 2px var(--text); font-weight: 700; color: var(--text); } .cal-day[aria-pressed="true"] .cal-num { background: var(--lime); color: var(--on-lime); font-weight: 700; box-shadow: none; } .cal-day[aria-pressed="true"][aria-current="date"] .cal-num { box-shadow: inset 0 0 0 2px var(--on-lime); } .cal-dots { display: flex; gap: 3px; height: 6px; } .cal-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--progress); } .cal-dot.is-payment { background: none; box-shadow: inset 0 0 0 1.5px var(--progress); } .cal-dot.is-birthday { border-radius: 1.5px; transform: rotate(45deg) scale(0.9); } /* ============================ Заметки ============================ */ .notes-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: var(--sp-3); } .note-card { display: flex; flex-direction: column; gap: 6px; width: 100%; text-align: left; border: 0; background: var(--surface); color: var(--text); border-radius: var(--r-card); padding: var(--sp-4); box-shadow: var(--shadow); transition: transform var(--dur) var(--ease); } .note-card:active { transform: scale(0.99); } .note-card .tag { align-self: flex-start; } .note-title { font-size: var(--fs-body); font-weight: 650; overflow-wrap: anywhere; } .note-preview { font-size: var(--fs-sub); color: var(--text-2); white-space: pre-line; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .note-meta { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-caption); color: var(--text-2); } .field-title { font-size: 1.25rem; font-weight: 650; border-color: transparent; background: none; padding-left: var(--sp-1); } .field-title:focus { box-shadow: none; border-color: transparent; } .field-note { flex: 1; min-height: 220px; } #note-pin[aria-pressed="true"] { background: var(--hero); color: var(--on-hero); } /* ============================ Хотим: хотелки и места ============================ */ .row-title .star { display: inline-flex; vertical-align: -2px; margin-right: 4px; color: var(--star); } .row-title .star .icon { width: 16px; height: 16px; fill: currentColor; } .row.is-done .row-sub .price { color: inherit; font-weight: 500; } .place-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; } .place-actions .btn { flex: 1 1 auto; white-space: nowrap; } .plan-place { font-size: var(--fs-h2); font-weight: 650; overflow-wrap: anywhere; } .stars { display: flex; justify-content: center; gap: var(--sp-1); } .star-btn { width: 52px; height: 52px; display: grid; place-items: center; border: 0; background: none; color: var(--control-border); border-radius: 50%; } .star-btn .icon { width: 36px; height: 36px; } .star-btn.is-on { color: var(--star); } .star-btn.is-on .icon { fill: currentColor; } /* ============================ Нижняя панель ============================ */ .dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; padding: var(--sp-5) var(--gutter) calc(var(--nav-gap) + var(--safe-bottom)); background: linear-gradient(to bottom, var(--bg-fade), var(--bg) 42%); pointer-events: none; } .dock > * { pointer-events: auto; max-width: calc(var(--content-max) - 2 * var(--gutter)); margin-left: auto; margin-right: auto; } .bottom-action { margin-bottom: var(--sp-3); } .bottom-action .btn { box-shadow: var(--shadow-float); } .tabbar { display: flex; height: var(--nav-h); padding: 6px; border-radius: var(--r-nav); background: var(--surface); box-shadow: var(--shadow-float); } @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .tabbar { background: var(--nav-bg); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); } } .tabbar button { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 0; background: none; padding: 0; border-radius: 24px; color: var(--text-2); } .tab-icon { width: 46px; height: 30px; border-radius: var(--r-pill); display: grid; place-items: center; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .tab-label { max-width: 100%; font-size: var(--fs-tiny); line-height: 1.15; text-align: center; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tabbar button[aria-current="page"] { color: var(--text); } .tabbar button[aria-current="page"] .tab-icon { background: var(--nav-active); color: var(--on-nav-active); } .tabbar button[aria-current="page"] .tab-label { font-weight: 700; } /* Пока набирают текст в поле на странице, нижняя панель не закрывает поле и клавиатуру */ body.typing .dock { display: none; } /* ============================ Диалоги ============================ */ .sheet-backdrop { position: fixed; inset: 0; z-index: 20; background: var(--backdrop); display: flex; align-items: flex-end; justify-content: center; animation: backdrop-in var(--dur) var(--ease); } @keyframes backdrop-in { from { opacity: 0; } } .sheet { width: 100%; max-width: var(--content-max); max-height: calc(var(--vh, 100dvh) - 24px); display: flex; flex-direction: column; background: var(--bg); border-radius: 28px 28px 0 0; box-shadow: var(--shadow-sheet); animation: sheet-in 200ms var(--ease); } @keyframes sheet-in { from { transform: translateY(24px); opacity: 0.6; } } .sheet:focus { outline: none; } .sheet-tall { height: calc(var(--vh, 100dvh) - 24px); } .sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-4) var(--sp-3) 0 var(--gutter); } .sheet-head h2 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; overflow-wrap: anywhere; } .sheet-head .icon-btn { background: var(--surface); color: var(--text); } .sheet-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-4) var(--gutter); } /* Содержимое формы не сжимается под высоту окна — иначе карточка со списком (overflow: hidden) обрезалась бы, а прокручивать было бы нечего. Длинная форма прокручивается целиком. */ .sheet-body > * { flex-shrink: 0; } .sheet-foot { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; /* при крупном тексте кнопки встают во вторую строку */ padding: var(--sp-3) var(--gutter) calc(var(--sp-3) + var(--safe-bottom)); border-top: 1px solid var(--line); background: var(--bg); } .sheet-foot .btn { min-height: var(--btn-h); } .payment-only { display: none !important; } .is-payment .payment-only { display: flex !important; } .is-payment p.payment-only[hidden] { display: none !important; } /* ============================ Знакомство ============================ */ .guide-body { gap: 0; min-height: min(440px, calc(var(--vh, 100dvh) - 200px)); } .guide-step { display: flex; flex-direction: column; gap: var(--sp-3); animation: guide-in 180ms var(--ease); } @keyframes guide-in { from { opacity: 0; transform: translateX(12px); } } .guide-icon { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; } .guide-icon .icon { width: 28px; height: 28px; } .guide-icon.tone-accent { background: var(--hero); color: var(--on-hero); } .guide-icon.tone-plain { background: var(--surface); color: var(--text); box-shadow: var(--shadow); } .guide-title { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; overflow-wrap: anywhere; } .guide-lead { color: var(--text-2); } .guide-points { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); } .guide-points li { position: relative; padding: var(--sp-3) var(--sp-3) var(--sp-3) calc(var(--sp-3) + 16px); background: var(--surface); border-radius: 16px; box-shadow: var(--shadow); font-size: var(--fs-sub); line-height: 1.4; } .guide-points li::before { content: ""; position: absolute; left: var(--sp-3); top: calc(var(--sp-3) + 0.45em); width: 7px; height: 7px; border-radius: 50%; background: var(--progress); } .guide-chat-label { margin: var(--sp-1) 0 var(--sp-2); font-size: var(--fs-caption); color: var(--text-2); } .guide-chat-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .guide-chat-list code { padding: 6px 12px; border-radius: var(--r-pill); background: var(--soft); color: var(--on-soft); font-family: inherit; font-size: var(--fs-sub); overflow-wrap: anywhere; } .guide-note { font-size: var(--fs-caption); color: var(--text-2); } .guide-foot { flex-wrap: wrap; } .guide-dots { display: flex; gap: 6px; flex: 1 0 100%; justify-content: center; padding-bottom: var(--sp-1); } .guide-dots span { width: 7px; height: 7px; border-radius: 4px; background: var(--bar-muted); transition: width var(--dur) var(--ease); } .guide-dots span.is-active { width: 20px; background: var(--progress); } .guide-next { flex: 1; } /* ============================ Узкие экраны ============================ */ @media (max-width: 359px) { :root { --fs-title: 1.625rem; --fs-num-xl: 1.875rem; } .hero { padding: var(--sp-4); } .ring { width: 80px; height: 80px; } .tile { padding: var(--sp-3); gap: var(--sp-2); } .tile > .icon { width: 20px; height: 20px; } .tab-label { font-size: 0.65625rem; letter-spacing: -0.01em; } .tab-icon { width: 40px; } .field-day { width: 64px; } .field-year { width: 80px; } .limit-row .field { width: 108px; } /* категории — в две строки: название и сумма, под ними полоса */ .cat-row { grid-template-columns: minmax(0, 1fr) auto; } .cat-bar { grid-column: 1 / -1; grid-row: 2; } } /* ============================ Спокойное движение ============================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }