/* Тема «бюджетОк» (редизайн 2026-09-25 по макету владельца; 2026-09-27 — «всё на белом»: фон стал белым, карточки-острова растворились, разделение воздухом и тонкими линиями): шрифт Geologica, глубокий синий акцент, плоско, без теней. */ :root { --bg: #FFFFFF; --card: #ffffff; --panel: #EEF1F6; /* мягкие внутренние панели на белом */ --key: #F3F5F9; /* клавиши и нейтральные плитки */ --text: #111827; --muted: #4B5563; --faint: #9CA3AF; --accent: #2F4BC4; --accent-soft: #EEF2FF; --expense: #B42318; /* красный для текста */ --expense-bar: #E4574B; /* красный для полос и заливок */ --income: #15803D; /* зелёный для текста */ --income-bar: #1E9E62; /* зелёный для полос */ --warn: #F2A93B; --key-active: #E4E8F0; --link: #2F4BC4; --accent-dash: rgba(47, 75, 196, .35); --border: #D7DCE7; --input-bg: #ffffff; --danger-soft: #FDECEA; --warn-soft: #FFF1E6; --warn-ink: #5A2A08; --ok-soft: #ECFDF3; --ok-ink: #14532D; --overlay: rgba(17, 24, 39, .45); --radius: 20px; --radius-big: 26px; } /* Тёмная тема (по мотивам Дзен-мани): OLED-чёрный фон, тёмные карточки, красный акцент, синие ссылки. Включается переключателем в шторке «Аккаунт» (data-theme на ). */ :root[data-theme="dark"] { --bg: #000000; --card: #1C1C1E; --panel: #2A2A2C; --key: #2C2C2E; --key-active: #3A3A3C; --text: #FFFFFF; --muted: #A3A3AB; --faint: #71717A; --accent: #FF3B30; --accent-soft: rgba(255, 59, 48, .16); --accent-dash: rgba(255, 59, 48, .40); --link: #409CFF; --expense: #FF7A6E; --expense-bar: #FF5147; --income: #4ADE80; --income-bar: #32D74B; --warn: #FFD60A; --border: #3A3A3C; --input-bg: #2A2A2C; --danger-soft: rgba(255, 69, 58, .16); --warn-soft: rgba(255, 214, 10, .12); --warn-ink: #FFD60A; --ok-soft: rgba(50, 215, 75, .12); --ok-ink: #4ADE80; --overlay: rgba(0, 0, 0, .60); } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: "Geologica", system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--bg); color: var(--text); -webkit-tap-highlight-color: transparent; /* Отключаем зум по двойному тапу: быстрые повторные нажатия кнопок не должны увеличивать страницу */ touch-action: manipulation; } button, input, select { touch-action: manipulation; font-family: inherit; } .screen { max-width: 430px; margin: 0 auto; padding: 12px 16px 100px; /* снизу место под таббар */ } .hidden { display: none !important; } /* ---------- Шапка: имя приложения + кнопка аккаунта ---------- */ .app-header { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 10px; } .app-logo { font-size: 22px; font-weight: 700; letter-spacing: -0.3px; } .whoami { min-height: 44px; display: flex; align-items: center; } .whoami span { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 600; color: var(--text); background: var(--card); border: none; border-radius: 14px; cursor: pointer; } /* ---------- Синяя карточка «Свободно сейчас» ---------- */ .hero-card { background: var(--accent); color: #fff; border-radius: var(--radius-big); padding: 20px; display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; } .hero-label { font-size: 14px; color: #DCE3FF; } .hero-label.muted { color: var(--muted); } .hero-amount { font-size: 40px; font-weight: 700; letter-spacing: -1px; line-height: 1.05; } .hero-amount.negative { color: #FFC9C9; } .hero-tiles { display: flex; gap: 8px; margin-top: 10px; } .hero-tile { flex: 1; background: rgba(255, 255, 255, 0.14); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; cursor: pointer; } .hero-tile span { font-size: 12px; color: #DCE3FF; } .hero-tile b { font-size: 15px; font-weight: 600; } /* Итоги месяца внутри синей карточки — компактная строка из четырёх колонок под плитками, отделена тонкой полупрозрачной линией */ .hero-metrics { display: flex; border-top: 1px solid rgba(255, 255, 255, .22); margin-top: 10px; padding-top: 8px; } .hero-metric { flex: 1; display: flex; flex-direction: column; gap: 1px; } .hero-metric span { font-size: 11px; color: #DCE3FF; } .hero-metric b { font-size: 13px; font-weight: 600; color: #fff; } .hero-metric b.hm-income { color: #B9F6CA; } .hero-metric b.hm-expense { color: #FFC9C9; } :root[data-theme="dark"] .hero-metrics { border-top-color: var(--panel); } :root[data-theme="dark"] .hero-metric span { color: var(--muted); } /* ---------- Карточка ввода: переключатель, сумма, клавиатура ------- */ .entry-card { background: var(--card); border-radius: var(--radius-big); padding: 14px; margin-bottom: 12px; } .kind-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--panel); border-radius: 16px; padding: 4px; margin-bottom: 4px; } .kind-btn { height: 40px; border: none; background: transparent; font-size: 15px; font-weight: 600; color: var(--muted); border-radius: 12px; cursor: pointer; } .kind-btn.active { background: var(--card); color: var(--accent); } /* Сумма */ .amount-display { text-align: center; padding: 8px 0 10px; font-size: 52px; font-weight: 700; letter-spacing: -1.5px; min-height: 72px; } .currency { color: var(--faint); margin-left: 6px; font-size: 36px; font-weight: 500; } /* Режим «Доход»: зелёная подсветка суммы (не спутать с тратой) */ .income-mode .amount-display { color: var(--income); } .income-mode .kind-btn.active { color: var(--income); } .account-row.active-account { outline: 2px solid var(--accent); } .account-mark { font-size: 11px; color: var(--accent); font-weight: 700; } /* Клавиатура: плоские клавиши на белой карточке */ .keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .key { border: none; background: var(--key); border-radius: 16px; font-size: 22px; font-weight: 500; color: var(--text); height: 52px; cursor: pointer; } .key:active { background: var(--key-active); } .key-back { color: var(--accent); } .hint { text-align: center; color: var(--muted); font-size: 13px; margin-bottom: 10px; } /* Чипы даты операции */ .date-chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; position: relative; } .date-chip { border: none; background: var(--card); color: var(--muted); border-radius: 14px; padding: 0 14px; height: 44px; font-size: 13px; font-weight: 600; cursor: pointer; } .date-chip.selected { background: var(--accent); color: #fff; } /* Пять кнопок под клавиатурой (с «Чек») должны влезать в один ряд на телефоне шириной 375 */ .date-chips { gap: 4px; } .date-chips .date-chip { padding: 0 9px; } /* Длинное имя счёта («Наличные», «Вклад в Сбере») не ломает ряд */ #chip-account { max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Прозрачное поле даты лежит ПОВЕРХ кнопки «Дата»: тап попадает прямо в него, и телефон открывает родной календарь (иначе на мобильных программное открытие не срабатывает) */ .date-chip-wrap { position: relative; display: inline-flex; } .custom-date-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; } /* И3: окно камеры для QR-кода чека с рамкой-прицелом */ .qr-view { position: relative; width: 100%; aspect-ratio: 1 / 1; max-height: 55vh; background: #000; border-radius: 18px; overflow: hidden; } .qr-view video { width: 100%; height: 100%; object-fit: cover; } .qr-frame { position: absolute; inset: 20%; border: 3px solid #FFD166; border-radius: 18px; pointer-events: none; } /* Категории: белые карточки с цветной плиткой-иконкой */ /* Лента категорий на главной: один ряд, листается вбок; полная сетка — в шторке «Все категории» (решение владельца 2026-09-27: автоввод из СМС — главное, ручной ввод компактный) */ .categories { display: flex; gap: 2px; overflow-x: auto; margin-bottom: 16px; scrollbar-width: none; } .categories::-webkit-scrollbar { display: none; } .categories .category { background: transparent; width: 21.5%; /* ~4,6 плитки в ряду: обрезанная пятая намекает, что ленту можно листать вбок */ min-width: 21.5%; height: auto; padding: 4px 0 6px; gap: 4px; } /* Полная сетка в шторке */ .categories-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 10px 0; } .categories-grid .category { background: var(--key); } .category { border: none; background: var(--card); border-radius: var(--radius); height: 84px; padding: 0 4px; text-align: center; cursor: pointer; display: flex; flex-direction: column; gap: 6px; align-items: center; justify-content: center; } .category:active { background: var(--panel); } .category .icon { width: 36px; height: 36px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; } /* Плитки иконок: пары «фон + штрих» из макета, ротация по позиции */ .category:nth-child(6n+1) .icon { background: #EEF2FF; color: #2F4BC4; } .category:nth-child(6n+2) .icon { background: #FFF1E6; color: #B4480B; } .category:nth-child(6n+3) .icon { background: #ECFDF3; color: #15803D; } .category:nth-child(6n+4) .icon { background: #F5F3FF; color: #6D28D9; } .category:nth-child(6n+5) .icon { background: #FDF2F8; color: #BE185D; } .category:nth-child(6n+6) .icon { background: #F3F5F9; color: #4B5563; } /* Плитка «Все» в ленте: открывает шторку с полной сеткой */ .category.category-all .icon { background: var(--accent-soft); color: var(--accent); border: 2px dashed var(--accent-dash); } .category.category-all .name { color: var(--accent); } /* Заметка к операции */ /* Ссылка и список «Изменить категории» */ .cat-edit-link { border: none; background: transparent; color: var(--accent); font-size: 14px; font-weight: 500; cursor: pointer; display: block; margin: -8px auto 12px; padding: 8px; } .cat-edit-row { display: flex; align-items: center; gap: 10px; } .cat-edit-row .icon { font-size: 20px; } .cat-edit-row .name { flex: 1; font-size: 14px; font-weight: 600; } .cat-row-btn { border: none; background: var(--panel); color: var(--accent); border-radius: 10px; font-size: 15px; padding: 7px 12px; cursor: pointer; } /* Признак «обязательная/гибкая» в форме категории */ .essential-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .essential-row .date-chip { background: var(--panel); } .essential-row .date-chip.selected { background: var(--accent); color: #fff; } .essential-hint { font-size: 11px; color: var(--muted); flex-basis: 100%; } /* Плитка «добавить свою категорию» */ .category-add { background: transparent; border: 2px dashed var(--accent-dash); color: var(--accent); } .category-add .icon { font-size: 22px; color: var(--accent); background: transparent; } .category-add .name { color: var(--accent); } /* Последняя использованная категория — подсвечена (умный дефолт) */ .category .icon { font-size: 22px; } /* Штриховые SVG-иконки: наследуют цвет контейнера (currentColor) */ .icon-svg { width: 20px; height: 20px; vertical-align: -4px; flex-shrink: 0; } .tab-icon svg { width: 22px; height: 22px; } .save-offer-goal .icon-svg { vertical-align: -5px; } .advice-icon { width: 20px; height: 20px; margin-top: 1px; } .category .name { font-size: 12px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } /* Итоги месяца: сетка карточек 2×2 */ .month-totals { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; } .total { display: flex; flex-direction: column; gap: 4px; background: var(--card); border-radius: var(--radius); padding: 14px 16px; } .total-label { font-size: 13px; color: var(--muted); } .total-value { font-size: 20px; font-weight: 700; } .total-value.expense { color: var(--expense); } .total-value.income { color: var(--income); } .total-value.saved { color: var(--accent); } /* Оранжевая карточка «Сбережения» в отчёте */ .savings-tile { background: var(--warn-soft); } .savings-tile .total-label, .savings-tile .total-value { color: var(--warn-ink); } /* Блок месяца отделяем от категорий тонкой линией — на белом фоне границы карточек исчезли, разделяем воздухом и линиями */ .month { border-top: 1px solid var(--panel); padding-top: 8px; } /* «Входящие»: строка-счётчик черновиков СМС-автоввода */ .inbox-row { width: 100%; border: none; display: flex; justify-content: space-between; align-items: center; background: var(--accent-soft); color: var(--accent); border-radius: var(--radius); padding: 12px 16px; font-size: 15px; font-weight: 600; cursor: pointer; margin-bottom: 12px; font-family: inherit; } .inbox-item { padding: 10px 0; border-bottom: 1px solid var(--panel); display: flex; flex-direction: column; gap: 8px; list-style: none; } .inbox-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .inbox-line .inbox-cat { flex: 1; min-width: 0; } .inbox-merchant { font-weight: 600; font-size: 14px; } .inbox-ok, .inbox-no { border: none; border-radius: 12px; min-width: 44px; height: 40px; font-size: 16px; cursor: pointer; } .inbox-ok { background: var(--income-bar); color: #fff; } .inbox-no { background: var(--danger-soft); color: var(--expense); } /* Сворачиваемый заголовок списка операций */ .ops-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--card); border-radius: var(--radius) var(--radius) 0 0; cursor: pointer; font-size: 15px; font-weight: 600; } .ops-header .chevron { color: var(--accent); font-size: 16px; transition: transform .2s ease; } .ops-header.collapsed { border-radius: var(--radius); margin-bottom: 8px; } /* Список пуст и скрыт — заголовок скруглён со всех сторон */ .ops-header.solo { border-radius: var(--radius); margin-bottom: 8px; } .ops-header.collapsed .chevron { transform: rotate(-90deg); } /* Лента операций: один белый блок с разделителями */ .operations { list-style: none; background: var(--card); border-radius: 0 0 var(--radius) var(--radius); padding: 0 16px 6px; margin-bottom: 12px; } .operations.collapsed { display: none; } .operation { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--panel); background: var(--card); } .operation:first-child { border-top: none; } .operation .icon { width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; } .operation .info { flex: 1; min-width: 0; } .operation .cat { font-size: 15px; font-weight: 500; } .operation .date { font-size: 12px; color: var(--muted); } .operation .sum { font-weight: 600; font-size: 15px; } .operation .sum.expense { color: var(--expense); } .operation .sum.income { color: var(--income); } .operation .delete { border: none; background: transparent; color: var(--faint); font-size: 16px; cursor: pointer; padding: 4px 6px; } /* Переводы в ленте */ .transfer-op .icon { color: var(--accent); font-weight: 700; } .transfer-sum { color: var(--accent); } /* Операции, отвергнутые сервером */ .failed-op { outline: 1px solid rgba(228, 87, 75, .4); border-radius: 12px; } .failed-label { color: var(--expense); } .fix-btn { border: none; background: var(--accent-soft); color: var(--accent); border-radius: 10px; padding: 6px 10px; font-size: 12px; font-weight: 700; cursor: pointer; } /* Двухшаговое удаление операции: ✕ → «Точно?» */ .operation .delete.confirm { color: #fff; background: var(--expense-bar); border-radius: 10px; font-size: 12px; font-weight: 600; } /* ---------- Экран «Отчёт» ---------- */ .month-switch { display: flex; align-items: center; justify-content: space-between; background: var(--card); border-radius: 18px; padding: 4px; margin-bottom: 12px; } .month-arrow { border: none; background: transparent; font-size: 24px; color: var(--accent); cursor: pointer; width: 44px; height: 44px; border-radius: 14px; } .month-title { font-size: 17px; font-weight: 600; text-transform: capitalize; } /* Пончик и подпись-сравнение — одна карточка: у пончика скруглён только верх, у подписи — только низ, стык без шва */ .donut-wrap { position: relative; display: flex; justify-content: center; background: var(--card); border-radius: var(--radius-big) var(--radius-big) 0 0; padding: 20px 0 8px; } .donut-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; display: flex; flex-direction: column; } .donut-total { font-size: 26px; font-weight: 700; letter-spacing: -0.5px; } .donut-label { font-size: 13px; color: var(--muted); } .compare-line { text-align: center; font-size: 13px; color: var(--muted); background: var(--card); border-radius: 0 0 var(--radius-big) var(--radius-big); margin: 0 0 12px; padding: 0 16px 16px; min-height: 18px; } /* Столбики за полгода */ .history-card { background: var(--card); border-radius: var(--radius); padding: 16px 16px 12px; margin-bottom: 12px; } .history-legend { display: flex; justify-content: center; gap: 16px; font-size: 12px; color: var(--muted); margin-top: 4px; } .legend-item { display: flex; align-items: center; gap: 5px; } .legend-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; } .income-dot { background: var(--income-bar); } .expense-dot { background: var(--expense-bar); } .report-categories { list-style: none; } .report-cat { background: var(--card); border-radius: var(--radius); margin-bottom: 8px; overflow: hidden; padding-bottom: 12px; } .report-cat-row { display: flex; align-items: center; gap: 10px; padding: 12px 16px 8px; cursor: pointer; } .report-cat .swatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; } .report-cat .icon { font-size: 20px; } .report-cat .name { flex: 1; font-size: 15px; font-weight: 500; min-width: 0; } .report-cat .pct { font-size: 13px; color: var(--muted); margin-right: 6px; } .report-cat .sum { font-weight: 600; font-size: 15px; } /* Полоса доли категории в отчёте */ .cat-share { height: 6px; border-radius: 3px; background: var(--panel); margin: 0 16px; } .cat-share-fill { height: 6px; border-radius: 3px; } /* Раскрытый список трат категории (drill-down) */ .report-cat-ops { list-style: none; border-top: 1px solid var(--panel); margin-top: 10px; } .report-cat-ops li { display: flex; justify-content: space-between; gap: 8px; padding: 8px 16px 8px 44px; font-size: 13px; color: var(--text); } .report-cat-ops .op-date { color: var(--muted); flex-shrink: 0; } .report-cat-ops .op-note { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); } .report-empty { text-align: center; color: var(--muted); margin-top: 24px; } .report-empty .goal-add-btn { margin-top: 12px; } /* З1: подсказка пустого экрана — что сделать, чтобы здесь появилось */ .empty-hint { font-size: 14px; color: var(--muted); text-align: center; line-height: 1.4; margin: 4px 12px 14px; } /* З2: строка смысла под полем формы */ .field-hint { font-size: 13px; color: var(--muted); line-height: 1.4; margin: 2px 4px 10px; text-align: left; } /* З5: плашка «Это пример» над отчётом и планом новичка */ .demo-banner { position: relative; background: var(--accent-soft); border-radius: var(--radius); padding: 14px 40px 14px 16px; margin: 4px 0 14px; font-size: 14px; line-height: 1.4; color: var(--text); } .demo-banner p { margin: 6px 0 10px; } .demo-badge { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--accent); border: 1px solid var(--accent-dash); border-radius: 8px; padding: 2px 7px; } .demo-action { border: none; background: var(--accent); color: #fff; font: inherit; font-weight: 600; border-radius: 12px; padding: 9px 14px; cursor: pointer; } .demo-close { position: absolute; top: 8px; right: 8px; border: none; background: none; color: var(--muted); font-size: 16px; padding: 6px 8px; cursor: pointer; } /* ---------- Экран «План» ---------- */ .limits-header { font-size: 26px; font-weight: 700; letter-spacing: -0.5px; margin: 6px 0 2px; } .limits-sub { font-size: 13px; color: var(--muted); margin-bottom: 14px; line-height: 1.4; } /* «Свободно по плану»: карточка с полосой доходы/расходы */ .plan-hero { background: var(--card); border-radius: var(--radius-big); padding: 18px; display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .plan-free { font-size: 36px; font-weight: 700; letter-spacing: -1px; } .plan-ratio { height: 12px; border-radius: 6px; background: var(--panel); display: flex; overflow: hidden; margin: 4px 0; } .plan-ratio-expense { background: var(--expense-bar); transition: width .3s ease; } .plan-ratio-income { background: var(--income-bar); transition: width .3s ease; } .plan-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .plan-legend .total { padding: 0; background: transparent; border-radius: 0; } .plan-legend .total-label { display: flex; align-items: center; gap: 5px; font-size: 12px; } .plan-legend .total-value { font-size: 17px; font-weight: 600; } .limits-list { list-style: none; } /* Лимиты по расходам — сетка карточек в 2 колонки (новый дизайн) */ #plan-expense-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } #plan-expense-list .limit-item { margin-bottom: 0; } /* Форма суммы открыта — карточка на всю ширину, чтобы поместилась */ #plan-expense-list .limit-item.editing { grid-column: 1 / -1; } .limit-item { background: var(--card); border-radius: var(--radius); padding: 14px; margin-bottom: 10px; cursor: pointer; } .limit-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; } .limit-row .icon { font-size: 20px; } .limit-row .name { flex: 1; font-size: 14px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .limit-row .amounts { flex-basis: 100%; font-size: 13px; color: var(--muted); } .plan-amount { margin-left: auto; flex-shrink: 0; } .limit-row .amounts b { color: var(--text); font-size: 18px; font-weight: 700; } /* «Резервуар»: полоса заполнения тратами месяца */ .reservoir { height: 6px; background: var(--panel); border-radius: 3px; overflow: hidden; } .reservoir-fill { height: 100%; border-radius: 3px; background: var(--income-bar); transition: width .3s ease; } .reservoir-fill.warn { background: var(--warn); } /* от 75% */ .reservoir-fill.danger { background: var(--expense-bar); } /* от 90% */ .limit-hint { font-size: 12px; color: var(--muted); margin-top: 6px; } .limit-hint.over { color: var(--expense); font-weight: 600; } .limit-none { font-size: 13px; color: var(--muted); } /* Инлайн-форма задания лимита */ .limit-edit { display: flex; gap: 8px; margin-top: 10px; } .limit-edit input { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 12px; padding: 8px 10px; font-size: 15px; background: var(--input-bg); } .limit-edit button { border: none; border-radius: 12px; padding: 8px 14px; font-size: 14px; font-weight: 600; cursor: pointer; } .limit-save { background: var(--accent); color: #fff; } .limit-remove { background: var(--panel); color: var(--muted); } /* ---------- Экран «Копилка» ---------- */ .goals-list { list-style: none; } .goal-item { background: var(--card); border-radius: var(--radius); padding: 14px; margin-bottom: 10px; } .goal-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .goal-top .icon { font-size: 26px; } .goal-top .name { flex: 1; font-size: 15px; font-weight: 700; } .goal-top .delete { border: none; background: transparent; color: var(--faint); font-size: 15px; cursor: pointer; padding: 4px 6px; } .goal-top .delete.confirm { color: #fff; background: var(--expense-bar); border-radius: 10px; font-size: 12px; font-weight: 600; } .goal-amounts { font-size: 13px; color: var(--muted); margin-bottom: 6px; } .goal-amounts b { color: var(--text); font-size: 15px; } .goal-bar { height: 10px; background: var(--panel); border-radius: 999px; overflow: hidden; margin-bottom: 6px; } .goal-bar-fill { height: 100%; border-radius: 999px; background: var(--accent); transition: width .4s ease; } .goal-bar-fill.done { background: var(--income-bar); } .goal-forecast { font-size: 12px; color: var(--muted); margin-bottom: 8px; } .goal-done-label { color: var(--income); font-weight: 700; } /* Меню цели: убрать / перенести */ .goal-menu { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; border-top: 1px solid var(--panel); padding-top: 10px; } .goal-menu-btn { border: none; background: var(--panel); color: var(--text); border-radius: 12px; padding: 10px 12px; font-size: 13px; font-weight: 600; cursor: pointer; text-align: left; } .goal-menu-btn.danger { background: var(--danger-soft); color: var(--expense); } /* Онбординг */ .onb-body { display: flex; flex-direction: column; gap: 8px; } .onb-limit-row { display: flex; align-items: center; gap: 10px; } /* З3: варианты ответа «Зачем вам учёт?» — можно выбрать несколько */ .onb-why { border: 1.5px solid var(--accent-dash); background: transparent; color: var(--text); border-radius: var(--radius); padding: 13px 14px; font-size: 15px; text-align: left; cursor: pointer; } .onb-why.selected { background: var(--accent); border-color: var(--accent); color: #fff; } .onb-why.selected::before { content: "✓ "; } .onb-limit-row .name { flex: 1; font-size: 14px; font-weight: 600; } .onb-limit-row .onb-limit-input { width: 130px; } .goal-deposit-btn { border: none; background: var(--accent-soft); color: var(--accent); border-radius: 12px; padding: 8px 14px; font-size: 13px; font-weight: 700; cursor: pointer; } .goal-add-btn { width: 100%; border: 2px dashed var(--accent-dash); background: transparent; color: var(--accent); border-radius: var(--radius); padding: 14px; font-size: 15px; font-weight: 700; cursor: pointer; margin-bottom: 14px; } .goal-form { background: var(--card); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; } .goal-icons { display: flex; gap: 6px; flex-wrap: wrap; } .goal-icon-opt { border: none; background: var(--key); border-radius: 12px; font-size: 22px; padding: 8px 10px; cursor: pointer; } .goal-icon-opt.selected { outline: 2px solid var(--accent); background: var(--accent-soft); } .save-percent-box { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--card); border-radius: var(--radius); padding: 12px 14px; font-size: 13px; color: var(--muted); } .percent-options { display: flex; gap: 6px; } .percent-opt { border: none; background: var(--key); color: var(--muted); border-radius: 10px; padding: 7px 12px; font-size: 13px; font-weight: 700; cursor: pointer; } .percent-opt.selected { background: var(--accent); color: #fff; } /* Нижние шторки (аккаунт, счета, правки, предложения) */ .save-offer { position: fixed; inset: 0; background: var(--overlay); display: flex; align-items: flex-end; z-index: 20; } .save-offer-card { width: 100%; max-width: 430px; margin: 0 auto; background: var(--card); border-radius: 24px 24px 0 0; padding: 22px 18px calc(18px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; max-height: 85vh; overflow-y: auto; } /* Под открытой шторкой страница не прокручивается: body закрепляется на месте (app.js запоминает прокрутку и возвращает её), а сама шторка не передаёт прокрутку фону, когда доехала до края */ body.page-locked { position: fixed; left: 0; right: 0; } .save-offer, .save-offer-card { overscroll-behavior: contain; } /* Шторка уезжает вниз (app.js), затемнение за ней плавно гаснет */ .save-offer.closing { background: transparent; transition: background-color .25s ease-in; } .save-offer-title { font-size: 17px; font-weight: 700; text-align: center; } .save-offer-sub { font-size: 13px; color: var(--muted); text-align: center; } .save-offer-goals { display: flex; flex-direction: column; gap: 8px; } .save-offer-goal { border: none; background: var(--accent); color: #fff; border-radius: 14px; padding: 13px; font-size: 15px; font-weight: 600; cursor: pointer; } .save-offer-goal:active { opacity: .9; } /* ---------- Подсказки при первом входе ---------- Подсветка — рамка вокруг нужного места, а затемнение всего остального даёт её огромная тень; карточка с текстом ставится под или над ней */ .tour { position: fixed; inset: 0; z-index: 30; } .tour-spot { position: fixed; border-radius: 20px; box-shadow: 0 0 0 3px #FFD166, 0 0 0 9999px rgba(17, 24, 39, .6); transition: top .25s, left .25s, width .25s, height .25s; pointer-events: none; } :root[data-theme="dark"] .tour-spot { box-shadow: 0 0 0 3px #FFD166, 0 0 0 9999px rgba(0, 0, 0, .72); } .tour-tip { position: fixed; left: 16px; right: 16px; max-width: 398px; margin: 0 auto; background: var(--card); color: var(--text); border-radius: 18px; padding: 14px 16px; transition: top .25s; } .tour-step { font-size: 12px; color: var(--muted); } .tour-title { font-size: 17px; font-weight: 700; margin: 2px 0 4px; } .tour-text { font-size: 14px; color: var(--muted); line-height: 1.45; } .tour-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; } .tour-skip { border: none; background: none; color: var(--faint); font: inherit; font-size: 14px; padding: 8px 4px; cursor: pointer; } .tour-next { border: none; background: var(--accent); color: #fff; font: inherit; font-size: 15px; font-weight: 600; border-radius: 12px; padding: 10px 22px; cursor: pointer; } /* ---------- Шторка «Аккаунт»: сгруппированный список ---------- Подложка групп почти прозрачная — по выбору владельца «2 из 10»: группы угадываются, но не выделяются */ :root { --settings-fill: rgba(17, 24, 39, .008); --settings-line: rgba(17, 24, 39, .012); } :root[data-theme="dark"] { --settings-fill: rgba(255, 255, 255, .008); --settings-line: rgba(255, 255, 255, .012); } .settings-card { gap: 0; padding-top: 8px; } .sheet-grabber { flex: none; width: 36px; height: 4px; border-radius: 2px; background: var(--faint); opacity: .5; margin: 0 auto 12px; } .settings-page { display: flex; flex-direction: column; } .settings-head { display: flex; align-items: center; gap: 12px; } .settings-avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 600; } .settings-head-title { font-size: 17px; font-weight: 700; } .settings-head-sub { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; } .settings-cap { font-size: 12px; color: var(--muted); margin: 16px 0 6px 4px; } .settings-group { background: var(--settings-fill); border-radius: 16px; padding: 0 12px; } .settings-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 11px 0; border: none; border-bottom: 1px solid var(--settings-line); background: none; color: var(--text); font: inherit; font-size: 15px; text-align: left; text-decoration: none; cursor: pointer; } .settings-row:last-child { border-bottom: none; } .settings-row:active { opacity: .6; } .settings-icon { flex: none; display: flex; color: var(--accent); } .settings-icon svg { width: 22px; height: 22px; } .settings-label { flex: 1; } .settings-value { color: var(--muted); font-size: 14px; } /* Стрелка «открыть подэкран» и галочка выбранного варианта — CSS-уголки */ .settings-row.nav::after { content: ""; flex: none; width: 7px; height: 7px; margin-right: 4px; border-top: 1.8px solid var(--faint); border-right: 1.8px solid var(--faint); transform: rotate(45deg); } .settings-row.selected::after { content: ""; flex: none; width: 12px; height: 6px; margin: 0 4px 4px 0; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); } .settings-back { align-self: flex-start; display: flex; align-items: center; gap: 6px; border: none; background: none; color: var(--link); font: inherit; font-size: 15px; padding: 4px 0; margin-bottom: 8px; cursor: pointer; } .settings-back::before { content: ""; width: 8px; height: 8px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); } .settings-title { font-size: 20px; font-weight: 700; margin-bottom: 4px; } .settings-sub { font-size: 13px; color: var(--muted); line-height: 1.45; margin-bottom: 12px; } .settings-sub-gap { margin: 12px 0 8px; } .settings-primary, .settings-danger, .settings-logout { width: 100%; border: none; border-radius: 14px; padding: 13px; font: inherit; font-size: 15px; cursor: pointer; } .settings-primary { background: var(--accent); color: #fff; font-weight: 600; } .settings-danger, .settings-logout { background: var(--settings-fill); color: var(--expense); margin-top: 10px; } .settings-logout { margin-top: 18px; } /* Удаление аккаунта: ссылка нарочно тихая, чтобы не нажать случайно */ .settings-delete-link { align-self: center; border: none; background: none; color: var(--faint); font: inherit; font-size: 13px; padding: 12px 8px 2px; cursor: pointer; } .settings-secondary { width: 100%; border: 1px solid var(--border); border-radius: 14px; background: none; color: var(--link); font: inherit; font-size: 15px; padding: 12px; cursor: pointer; } .settings-field { margin-top: 12px; } .settings-destroy { width: 100%; border: none; border-radius: 14px; background: var(--expense); color: #fff; font: inherit; font-size: 15px; font-weight: 600; padding: 13px; margin-top: 4px; cursor: pointer; } .settings-destroy:disabled { opacity: .6; } /* И6: тумблеры и выбор времени в «Уведомлениях» */ .settings-switch { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 44px; height: 26px; border-radius: 13px; background: var(--border); cursor: pointer; transition: background .2s; } .settings-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s; } .settings-switch:checked { background: var(--accent); } .settings-switch:checked::after { transform: translateX(18px); } .settings-switch:disabled { opacity: .5; } .settings-select { border: 1px solid var(--border); border-radius: 10px; background: var(--input-bg); color: var(--text); font: inherit; font-size: 14px; padding: 4px 8px; } .settings-warn { color: var(--warn-ink); background: var(--warn-soft); border-radius: 12px; padding: 8px 10px; } .push-offer-list { font-size: 14px; line-height: 1.45; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; } .settings-primary:active, .settings-danger:active, .settings-logout:active { opacity: .7; } /* Советы системы в «Плане» */ .plan-section { font-size: 17px; font-weight: 600; margin: 14px 0 8px; } .plan-advice { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } .advice-card { display: flex; align-items: flex-start; gap: 10px; background: var(--card); border-radius: var(--radius); padding: 12px 14px; font-size: 13px; line-height: 1.45; } .advice-card .icon-img { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; } /* Совет-подсказка — на цветном фоне (новый дизайн) */ .advice-card.info { background: var(--accent); color: #fff; } .advice-card.warn { background: var(--warn-soft); color: var(--warn-ink); } .advice-card.ok { background: var(--ok-soft); color: var(--ok-ink); } .plan-avg { font-size: 12px; color: var(--muted); font-weight: 400; } .plan-amount { font-size: 14px; font-weight: 700; } .plan-amount.empty { color: var(--accent); font-weight: 500; } /* ---------- Экран входа ---------- */ .auth-screen { display: flex; align-items: center; min-height: 100vh; padding-bottom: 16px; } .auth-card { width: 100%; background: var(--card); border-radius: var(--radius-big); padding: 28px 22px; display: flex; flex-direction: column; gap: 10px; } .auth-title { font-size: 24px; font-weight: 700; text-align: center; letter-spacing: -0.3px; } .auth-sub { font-size: 13px; color: var(--muted); text-align: center; margin-bottom: 10px; line-height: 1.4; } .auth-input { border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; font-size: 16px; background: var(--input-bg); color: var(--text); } .auth-input:focus { outline: 2px solid var(--accent); border-color: transparent; } .auth-error { color: var(--expense); font-size: 13px; text-align: center; min-height: 16px; } .auth-btn { border: none; background: var(--accent); color: #fff; border-radius: 14px; padding: 13px; font-size: 16px; font-weight: 600; cursor: pointer; } .auth-btn:active { opacity: .9; } /* Согласие с политикой конфиденциальности — видно при регистрации (Ф2) */ .auth-privacy { font-size: 12px; color: var(--muted); text-align: center; margin-bottom: 8px; line-height: 1.4; } .auth-privacy a { color: var(--accent); font-weight: 500; } .auth-link { border: none; background: transparent; color: var(--accent); font-size: 14px; font-weight: 500; cursor: pointer; padding: 6px; } /* Блок аккаунта (в шторке) */ .account-box { display: flex; align-items: center; justify-content: space-between; margin-top: 22px; padding: 12px 14px; background: var(--card); border-radius: var(--radius); } .account-email { font-size: 13px; color: var(--muted); } .logout-btn { border: none; background: var(--panel); color: var(--muted); border-radius: 12px; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; } /* ---------- Нижняя навигация ---------- */ .tabbar { position: fixed; bottom: 0; left: 0; right: 0; display: flex; background: var(--card); padding: 8px 12px max(10px, env(safe-area-inset-bottom)); z-index: 10; } .tab { flex: 1; border: none; background: transparent; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; color: var(--muted); cursor: pointer; padding: 4px 0; } .tab.active { color: var(--accent); font-weight: 600; } .tab-icon { font-size: 20px; } /* Всплывающее уведомление */ .toast { position: fixed; left: 50%; bottom: 96px; /* над таббаром */ transform: translateX(-50%) translateY(80px); background: var(--text); color: #fff; padding: 10px 18px; border-radius: 999px; font-size: 14px; opacity: 0; transition: all .25s ease; pointer-events: none; white-space: nowrap; } .toast.show { transform: translateX(-50%) translateY(0); opacity: 1; } .toast.has-action { pointer-events: auto; } .toast-btn { border: none; background: rgba(255, 255, 255, .18); color: #C7D2FE; border-radius: 999px; padding: 5px 12px; margin-left: 10px; font-size: 13px; font-weight: 700; cursor: pointer; } /* Цвет штриховых иконок в остальных местах */ .limit-row .icon, .goal-top .icon, .cat-edit-row .icon, .report-cat .icon { color: var(--accent); } .goal-icon-opt { color: var(--muted); } .goal-icon-opt.selected { color: var(--accent); } .transfer-op .icon { background: var(--accent-soft); } /* Календарь трат по дням (G5) */ .calendar-title { font-weight: 600; font-size: 15px; margin: 0 0 8px; } .calendar-hint { font-weight: 400; font-size: 12px; color: var(--muted); } .spend-calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .spend-calendar-head { margin-bottom: 4px; text-align: center; font-size: 11px; color: var(--muted); } .cal-cell { border-radius: 10px; padding: 6px 1px 5px; text-align: center; background: var(--key); border: none; font-family: inherit; cursor: pointer; } .cal-cell.empty { background: transparent; cursor: default; } .cal-cell.today { outline: 2px solid var(--accent); } .cal-cell.selected { outline: 2px solid var(--expense-bar); } .cal-day-num { display: block; font-size: 12px; font-weight: 600; } .cal-sum { display: block; font-size: 9px; color: var(--muted); } .cal-cell.hot .cal-day-num, .cal-cell.hot .cal-sum { color: #fff; } /* Стартовая страница (до входа): что умеет бюджетОк */ .auth-screen { flex-direction: column; justify-content: center; gap: 14px; } .landing { width: 100%; } .landing-title { font-size: 17px; font-weight: 600; text-align: center; margin: 6px 0 10px; } .landing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .landing-card { background: var(--card); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted); line-height: 1.4; } .landing-card b { font-size: 13px; color: var(--text); } .landing-icon { width: 34px; height: 34px; border-radius: 11px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; } .landing-icon svg { width: 19px; height: 19px; } .landing-foot { text-align: center; font-size: 12px; color: var(--muted); margin: 12px 0 4px; line-height: 1.5; } .landing-foot a { color: var(--accent); font-weight: 500; } /* Страница инструкции /help */ .help-section { background: var(--card); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; font-size: 14px; line-height: 1.55; } .help-section h3 { font-size: 16px; margin-bottom: 8px; } .help-section p { margin-bottom: 8px; } .help-section p:last-child { margin-bottom: 0; } .help-section .hint-inline { color: var(--muted); font-size: 13px; } /* Предпросмотр импорта выписки (И1) */ .import-list { display: flex; flex-direction: column; max-height: 48vh; overflow-y: auto; border: 0.5px solid var(--panel); border-radius: 12px; } .import-row { display: grid; grid-template-columns: 24px 1fr 92px; gap: 8px; align-items: center; padding: 8px 10px; border-top: 1px solid var(--panel); font-size: 13px; } .import-row:first-child { border-top: none; } .import-row.skipped { opacity: .55; } /* Название — до двух строк, под ним дата и пометки: раньше всё стояло в одной строке и длинное описание уносило дату за край */ .import-row .imp-desc { min-width: 0; cursor: pointer; } .import-row .imp-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; line-height: 1.35; } .import-row .imp-meta { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); } .import-row .imp-full { grid-column: 2 / 4; background: var(--panel); border-radius: 8px; padding: 6px 8px; font-size: 11px; line-height: 1.4; color: var(--muted); overflow-wrap: anywhere; } .import-row .imp-sum { text-align: right; font-weight: 600; } .import-row .imp-sum.income { color: var(--income); } .import-row select { grid-column: 2 / 4; border: 1px solid var(--border); border-radius: 8px; padding: 4px 6px; font-size: 12px; background: var(--input-bg); } .imp-tag { display: inline-block; font-size: 10px; border-radius: 6px; padding: 1px 6px; margin-left: 6px; background: var(--panel); color: var(--muted); } /* Живая подсказка ввода (вариант Г, отзыв тестера): в покое — тихая строка, после ввода суммы — акцент + стрелка вниз, у новичков категории мягко пульсируют */ .entry-hint { text-align: center; font-size: 12px; color: var(--muted); min-height: 34px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; transition: color .2s; } .entry-hint.active { font-size: 13px; font-weight: 600; color: var(--accent); } .income-mode .entry-hint.active { color: var(--income); } .entry-hint .hint-arrow { width: 16px; height: 16px; animation: hint-bounce .9s ease-in-out infinite; } @keyframes hint-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } } .category.pulse { animation: cat-pulse 1.1s ease-in-out infinite; } .income-mode .category.pulse { animation-name: cat-pulse-income; } @keyframes cat-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(47, 75, 196, 0); } 50% { box-shadow: 0 0 0 5px rgba(47, 75, 196, .30); } } @keyframes cat-pulse-income { 0%, 100% { box-shadow: 0 0 0 0 rgba(30, 158, 98, 0); } 50% { box-shadow: 0 0 0 5px rgba(30, 158, 98, .30); } } /* «Откуда цифра» (П3): строки формулы дневного лимита */ .fla-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 2px; font-size: 14px; border-bottom: 1px solid var(--panel); } .fla-row span { color: var(--muted); } .fla-row.fla-strong { border-bottom: none; } .fla-row.fla-strong span, .fla-row.fla-strong b { color: var(--accent); } .fla-note { font-size: 12px; color: var(--muted); margin-top: 8px; line-height: 1.45; } /* ---------- Тёмная тема: точечные правки компонентов ---------- */ /* Герой-карточка: вместо цветной — чёрная карточка с крупной белой цифрой, как экран баланса у Дзен-мани */ :root[data-theme="dark"] .hero-card { background: var(--card); } :root[data-theme="dark"] .hero-label { color: var(--muted); } :root[data-theme="dark"] .hero-amount.negative { color: var(--expense); } :root[data-theme="dark"] .hero-tile { background: var(--panel); } :root[data-theme="dark"] .hero-tile span { color: var(--muted); } /* Текстовые ссылки-кнопки — синие (у Дзен-мани красный только на главных действиях, ссылки синие) */ :root[data-theme="dark"] .auth-link { color: var(--link); } /* Пастельные плитки категорий → тёмные тонированные, яркая иконка */ :root[data-theme="dark"] .category:nth-child(6n+1) .icon { background: rgba(64, 156, 255, .18); color: #7CB8FF; } :root[data-theme="dark"] .category:nth-child(6n+2) .icon { background: rgba(255, 159, 10, .18); color: #FFB340; } :root[data-theme="dark"] .category:nth-child(6n+3) .icon { background: rgba(50, 215, 75, .18); color: #4ADE80; } :root[data-theme="dark"] .category:nth-child(6n+4) .icon { background: rgba(191, 90, 242, .18); color: #D598F8; } :root[data-theme="dark"] .category:nth-child(6n+5) .icon { background: rgba(255, 55, 95, .18); color: #FF6B94; } :root[data-theme="dark"] .category:nth-child(6n+6) .icon { background: rgba(142, 142, 147, .20); color: #C7C7CC; } /* Таббар: тонкая граница сверху вместо слияния с фоном */ :root[data-theme="dark"] .tabbar { border-top: 1px solid var(--border); } /* Информационная карточка-совет: в тёмной теме красная заливка читается как ошибка — делаем спокойную тёмную панель */ :root[data-theme="dark"] .advice-card.info { background: var(--panel); color: var(--text); }