/* =========================================================
SLATE — Family Budget PWA
2026-05-13 · полный rewrite по концепции C1 SLATE.
Midnight indigo (#1b1a31, тёплый undertone) + ECG teal brand
(#1fbfa0). Собственная айдентика, уход от generic-лайма.
Layout — POCKET BANK: hero с двумя числами (расход+остаток),
3 inline-KPI, top-3 pills, 2px progress bars в категориях,
underline-сверху индикатор активного таба.
========================================================= */
/* =========================================================
0. TOKENS
========================================================= */
:root {
/* MIDNIGHT INDIGO — полночный фиолет-индиго, тёплый undertone */
--bg: #1b1a31;
--bg-soft: #201e3a;
--surface: #232244;
--surface-2: #2d2b52;
--surface-3: #3a3766;
/* hairlines */
--rule: #2d2b52;
--rule-2: #3a3766;
--rule-3: #494680;
/* ink — подняли контраст (текст был блеклым, #8.4): основной ближе к белому,
вторичный/третичный заметно ярче. */
--ink: #f3f6fa;
--ink-2: #c3ccd6;
--ink-3: #aeb7c2;
--ink-4: #545c66;
/* BRAND — ECG teal (эмеральд-бирюза, «линия пульса») */
--brand: #1fbfa0;
--brand-2: #4fdcc0;
--brand-deep: #0c8f78;
--brand-on: #041613;
--brand-tint: rgba(31, 191, 160, 0.14);
--brand-edge: rgba(31, 191, 160, 0.34);
--on-accent: #ffffff;
/* PRO — акцент платных/премиум-разделов (фиолетовый, отдельный от бренда и
семантики, чтобы PRO-плашки не сливались с обычным лаймовым акцентом). */
--pro: #c084fc;
--pro-2: #d4a8fd;
--pro-tint: rgba(192, 132, 252, 0.13);
--pro-edge: rgba(192, 132, 252, 0.36);
--pro-on: #0d1117;
/* semantic — финтех-приглушённые */
--income: #3fb950;
--income-2: #56d364;
--income-tint: rgba(63, 185, 80, 0.13);
--expense: #f85149;
--expense-2: #ff6b63;
--expense-tint: rgba(248, 81, 73, 0.13);
--warn: #d29922;
--warn-tint: rgba(210, 153, 34, 0.14);
--info: #58a6ff;
--danger: #f85149;
--danger-deep: #b62324;
/* category palette — GitHub-ish accent colors */
--c-food: #a3e635;
--c-trans: #58a6ff;
--c-cafe: #d29922;
--c-health: #bc8cff;
--c-cloth: #79c0ff;
--c-home: #ff7b72;
--c-fun: #ffa657;
--c-other: #8b949e;
/* type — Onest на всё приложение. Токены --font-display / --font-ui /
--font-numeric разделены семантически (заголовки / интерфейс / числовые
данные с tabular-nums), но намеренно используют одну гарнитуру: для
плотного финтех-UI один выверенный гротеск цельнее дисплейной пары.
Моно-шрифты (JetBrains Mono) отвергнуты — нуль с точкой внутри. */
--font-display: 'Onest', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-ui: 'Onest', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-numeric: 'Onest', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
/* spacing 4pt */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
--sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;
--page-px: 16px;
--page-px-lg: 24px;
--content-max: 460px;
/* radii */
--r-xs: 4px; --r-sm: 8px; --r-md: 10px;
--r-lg: 14px; --r-xl: 18px; --r-2xl: 22px;
--r-pill: 999px;
/* shadows — inner refraction only */
--sh-edge: inset 0 1px 0 rgba(255,255,255,0.04);
--sh-edge-2: inset 0 1px 0 rgba(255,255,255,0.07);
/* motion */
--ease: cubic-bezier(0.32, 0.72, 0, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--ease-press: cubic-bezier(0.4, 0, 0.2, 1);
--dur-1: 100ms; --dur-2: 180ms; --dur-3: 280ms; --dur-4: 380ms;
/* Движение — выровнено с Flutter Motion */
--mo-fast: 120ms; /* нажатие, чекбокс, chevron */
--mo-base: 220ms; /* смена состояния, sliding-индикатор, switcher */
--mo-layout: 320ms; /* аккордеон, bar-fill, staggered reveal */
--mo-hero: 520ms; /* count-up сумм */
--mo-ease: cubic-bezier(0.33, 1, 0.68, 1); /* easeOutCubic */
--mo-decisive: cubic-bezier(0.22, 1, 0.36, 1); /* sliding-индикатор */
--nav-h: 62px;
--nav-pb: calc(var(--nav-h) + env(safe-area-inset-bottom, 0) + 28px);
--safe-top: env(safe-area-inset-top, 0);
--safe-bottom: env(safe-area-inset-bottom, 0);
}
/* =========================================================
1. RESET + GLOBALS
========================================================= */
*, *::before, *::after {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); }
html { color-scheme: dark; }
body {
font-family: var(--font-ui);
font-size: 16px;
line-height: 1.45;
letter-spacing: -0.005em;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
min-height: 100dvh;
overscroll-behavior-y: none;
}
[hidden] { display: none !important; }
.sr-only {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* =========================================================
2. TYPE
========================================================= */
h1, h2, h3, h4 {
margin: 0;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--ink);
text-wrap: balance;
}
h1 {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(20px, 5vw, 26px);
letter-spacing: -0.02em;
line-height: 1.1;
}
h2 { font-size: 16px; font-weight: 600; }
h3 {
font-size: 11px; font-weight: 700;
color: var(--ink-2);
text-transform: uppercase;
letter-spacing: 0.12em;
}
p { margin: 0; }
.muted { color: var(--ink-2); }
.dim { color: var(--ink-3); }
/* =========================================================
3. BUTTONS + INPUTS
========================================================= */
button {
background: var(--surface-2);
color: var(--ink);
border: 1px solid var(--rule);
border-radius: var(--r-md);
padding: 10px 14px;
font: inherit;
cursor: pointer;
touch-action: manipulation;
transition: background var(--dur-2) var(--ease-press),
transform var(--dur-1) var(--ease-press),
border-color var(--dur-2) var(--ease-press);
}
/* :where() — нулевая специфичность: не перекрывает фон кнопок со
своим цветом (свотчи палитры, лаймовая «Добавить операцию» и т.п.) */
button:where(:hover) { background: var(--surface-3); border-color: var(--rule-2); }
button:active { transform: scale(0.97); }
button.primary {
background: var(--brand);
border: 1px solid color-mix(in srgb, var(--brand-deep) 70%, transparent);
color: var(--brand-on);
font-weight: 700;
letter-spacing: -0.005em;
padding: 12px 16px;
box-shadow: var(--sh-edge-2);
}
button.primary:hover { filter: brightness(1.06); }
button.primary:active { filter: brightness(0.94); }
.form-actions .primary[disabled],
button.primary[disabled] {
background: var(--surface-2);
border-color: var(--rule-2);
color: var(--ink-4);
box-shadow: none;
cursor: not-allowed;
filter: none;
}
.form-actions .primary[disabled]:hover,
button.primary[disabled]:hover {
background: var(--surface-2);
border-color: var(--rule-2);
filter: none;
}
button.ghost {
background: transparent;
border-color: transparent;
color: var(--ink-2);
}
button.ghost:hover { color: var(--ink); background: var(--surface-2); }
button.primary.danger {
background: var(--danger);
color: var(--on-accent);
border-color: var(--danger-deep);
}
button:focus-visible {
outline: 2px solid var(--brand);
outline-offset: 2px;
}
input, select, textarea {
width: 100%;
min-height: 44px;
background: var(--surface);
color: var(--ink);
border: 1px solid var(--rule-2);
border-radius: var(--r-md);
padding: 12px 14px;
font: inherit;
/* 16px — иначе iOS Safari зумит страницу при фокусе на инпут */
font-size: 16px;
outline: none;
transition: border-color var(--dur-2) var(--ease),
background var(--dur-2) var(--ease);
}
input:focus, select:focus, textarea:focus,
input:focus-visible, select:focus-visible, textarea:focus-visible {
border-color: var(--brand);
background: var(--surface-2);
box-shadow: 0 0 0 3px var(--brand-tint);
}
input::placeholder, textarea::placeholder { color: var(--ink-3); }
select {
appearance: none;
background-image:
linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
background-size: 5px 5px;
background-repeat: no-repeat;
padding-right: 32px;
}
/* =========================================================
3b. SLIDING SEGMENTS
========================================================= */
.seg {
position: relative;
display: flex;
background: var(--surface);
border: 1px solid var(--rule);
border-radius: var(--r-md);
padding: 3px;
isolation: isolate;
}
.seg--surface2 { background: var(--surface-2); }
.seg-ind {
position: absolute;
top: 3px; left: 3px; bottom: 3px;
width: calc((100% - 6px) / var(--seg-n, 2));
border-radius: var(--r-sm);
background: var(--brand-tint);
transform: translateX(calc(var(--seg-i, 0) * 100%));
transition: transform var(--mo-base) var(--mo-decisive);
z-index: 0;
}
.seg-btn {
flex: 1 1 0;
z-index: 1;
border: 0;
background: transparent;
cursor: pointer;
padding: var(--seg-vpad, 7px) 4px;
font: inherit;
font-size: var(--seg-fs, 13px);
font-weight: 600;
color: var(--ink-3);
transition: color var(--mo-base) var(--mo-ease);
}
.seg-btn[aria-selected="true"] { color: var(--brand-2); }
.seg-btn:disabled { color: var(--ink-4); cursor: default; }
@media (prefers-reduced-motion: reduce) {
.seg-ind { transition: none; }
}
/* Переключатель разделов вкладки «Планы»: Планы / Цели / Регулярные */
.plan-sections {
display: flex;
gap: 2px;
background: var(--surface);
border: 1px solid var(--rule);
border-radius: var(--r-md);
padding: 3px;
margin: 8px 0 4px;
}
.plan-sec-btn {
/* base=auto (по контенту): длинный лейбл «Регулярные» не ужимается ниже своей
ширины и не режется многоточием; grow=1 растягивает сегменты, заполняя
плашку. Было flex:1 1 0 — равная нулевая база, из-за неё «Регулярные»
получал столько же, сколько «Цели», и обрезался. */
flex: 1 1 auto;
min-width: 0;
border: 0;
background: transparent;
cursor: pointer;
padding: 7px 6px;
font: inherit;
/* overflow:hidden+ellipsis — последняя страховка на сверхузких экранах. */
font-size: 11px;
font-weight: 600;
letter-spacing: -0.3px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
color: var(--ink-3);
border-radius: var(--r-sm);
transition: color var(--mo-base) var(--mo-ease),
background var(--mo-base) var(--mo-ease);
}
.plan-sec-btn.active { color: var(--brand-2); background: var(--brand-tint); }
/* Заголовок группы внутри секции (Долги: Мне должны / Я должен). */
.plan-group-title {
font-size: 11px; font-weight: 700; letter-spacing: 0.6px;
text-transform: uppercase; color: var(--ink-3);
margin: var(--sp-4) 4px var(--sp-2);
}
#plan-section-debts .plan-group-title:first-of-type { margin-top: 4px; }
/* =========================================================
4. MODAL + SHEET
========================================================= */
.modal-scrim {
position: fixed; inset: 0;
background: rgba(1, 4, 9, 0.65);
z-index: 50;
display: flex;
align-items: flex-end;
transition: opacity var(--dur-3) var(--ease),
background-color var(--dur-3) var(--ease);
}
@starting-style {
.modal-scrim { opacity: 0; background: rgba(1,4,9,0); }
}
.sheet {
width: 100%;
max-width: 560px;
max-height: 92dvh;
overflow-y: auto;
margin: 0 auto;
background: var(--surface);
border-top-left-radius: var(--r-2xl);
border-top-right-radius: var(--r-2xl);
border-top: 1px solid var(--rule-2);
padding: 14px 18px calc(20px + var(--safe-bottom));
transform: translateY(0);
transition: transform var(--dur-4) var(--ease);
}
@starting-style {
.sheet { transform: translateY(110%); }
}
.sheet .grabber {
width: 36px; height: 4px;
background: var(--rule-3);
border-radius: var(--r-pill);
margin: 0 auto 12px;
}
.sheet h2 { font-size: 18px; margin-bottom: 14px; font-weight: 600; }
.sheet-sm { max-width: 420px; }
.sheet-full {
max-width: none;
max-height: 100dvh;
height: 100dvh;
border-radius: 0;
border-top: none;
padding-top: calc(14px + var(--safe-top));
}
.form-actions {
display: flex; gap: 8px;
margin-top: var(--sp-5);
}
.form-actions .ghost { flex: 1; min-height: 48px; }
.form-actions .primary { flex: 2; min-height: 48px; }
.form-actions .danger-ghost {
flex: 0 0 auto;
background: transparent;
border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent);
color: var(--expense-2);
font-weight: 600;
padding: 10px 14px;
border-radius: var(--r-md);
}
.form-actions .danger-ghost:hover {
background: var(--expense-tint);
border-color: color-mix(in srgb, var(--danger) 60%, transparent);
}
/* Кнопки листа операции: «Сохранить» во всю ширину + «Удалить» аутлайном
снизу (паритет с Flutter). */
.op-actions { flex-direction: column; gap: 10px; }
/* Кнопки сохранения липнут к низу листа — всегда видны, даже когда контент
(Перевод) выше экрана и лист скроллится. Фон перекрывает прокручиваемое. */
.sheet-op .op-actions {
position: sticky;
bottom: 0;
z-index: 1;
background: var(--surface);
padding-top: 12px;
margin-top: 8px;
}
.op-actions .op-save,
.op-actions .op-delete {
flex: none; width: 100%;
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
min-height: 50px;
}
.op-actions .op-save .op-save-check { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.6; }
.op-actions .op-delete svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }
/* «Повторить сегодня» — зелёная контурная кнопка (без заливки, как «Удалить»). */
.op-actions .op-repeat {
flex: none; width: 100%;
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
min-height: 50px;
background: transparent;
color: var(--brand);
border: 1px solid color-mix(in srgb, var(--brand) 45%, transparent);
border-radius: var(--r-md);
font-weight: 600;
cursor: pointer;
transition: background var(--dur-2) var(--ease);
}
.op-actions .op-repeat:hover { background: color-mix(in srgb, var(--brand) 12%, transparent); }
.op-actions .op-repeat svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }
/* Верхние листы (докаются к верху экрана) — у #rename-sheet это критично:
снизу его перекрывала экранная клавиатура при вводе названия бюджета. */
#add-sheet, #settings-sheet, #rename-sheet, #adjust-sheet, #prog-sheet { align-items: flex-start; }
#add-sheet .sheet, #settings-sheet .sheet, #rename-sheet .sheet, #adjust-sheet .sheet, #prog-sheet .sheet {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: var(--r-2xl);
border-bottom-right-radius: var(--r-2xl);
border-top: none;
border-bottom: 1px solid var(--rule-2);
padding-top: calc(16px + var(--safe-top));
}
/* Верхний лист — грабер (ручка нижнего листа) убираем, иначе висит у верх. края. */
#prog-sheet .grabber { display: none; }
@starting-style {
#add-sheet .sheet, #settings-sheet .sheet, #rename-sheet .sheet, #adjust-sheet .sheet, #prog-sheet .sheet { transform: translateY(-110%); }
}
/* DB-005 · Корректировка баланса — содержимое модалки */
.adjust-body { display: flex; flex-direction: column; }
.adjust-sub { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; margin: 2px 0 16px; }
.adjust-calc {
display: flex; align-items: center; justify-content: space-between;
background: var(--bg-soft); border: 1px solid var(--rule);
border-radius: var(--r-lg, 14px); padding: 11px 13px; margin-bottom: 12px;
}
.adjust-calc-l { font-size: 12.5px; color: var(--ink-2); }
.adjust-calc-v { font-size: 15px; font-weight: 800; color: var(--ink); }
.adjust-field { display: block; margin-bottom: 12px; }
.adjust-field-label {
display: block; font-size: 11px; color: var(--ink-3);
text-transform: uppercase; letter-spacing: .04em; font-weight: 700; margin-bottom: 6px;
}
.adjust-input-wrap { position: relative; display: block; }
.adjust-input {
width: 100%; box-sizing: border-box;
background: var(--bg-soft); border: 1.5px solid var(--brand);
border-radius: var(--r-lg, 14px); padding: 13px 38px 13px 52px;
font-size: 20px; font-weight: 800; color: var(--ink); outline: none;
}
/* ± переключатель знака фактического остатка (минуса на цифр. клаве нет) — #4. */
.adjust-sign {
position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
z-index: 1; width: 34px; height: 34px; border-radius: 8px; padding: 0;
border: 1px solid color-mix(in srgb, var(--income) 50%, transparent);
background: transparent; color: var(--income-2);
font-size: 20px; font-weight: 800; line-height: 1; cursor: pointer;
}
.adjust-sign.is-neg {
color: var(--expense-2);
border-color: color-mix(in srgb, var(--expense) 50%, transparent);
}
.adjust-cur-sym {
position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
font-size: 16px; font-weight: 700; color: var(--ink-3); pointer-events: none;
}
.adjust-preview {
display: flex; align-items: center; gap: 9px;
border-radius: var(--r-lg, 14px); padding: 11px 13px; margin-bottom: 18px;
}
.adjust-preview-ic { width: 18px; height: 18px; flex: 0 0 18px; }
.adjust-preview-ic svg { width: 18px; height: 18px; }
.adjust-preview-tx { font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.adjust-preview-tx small { display: block; font-weight: 500; font-size: 11px; color: var(--ink-2); }
.adjust-preview.is-expense {
background: var(--expense-tint); border: 1px solid color-mix(in srgb, var(--expense) 30%, transparent);
}
.adjust-preview.is-expense .adjust-preview-ic, .adjust-preview.is-expense .adjust-preview-tx { color: var(--expense-2); }
.adjust-preview.is-income {
background: var(--income-tint); border: 1px solid color-mix(in srgb, var(--income) 30%, transparent);
}
.adjust-preview.is-income .adjust-preview-ic, .adjust-preview.is-income .adjust-preview-tx { color: var(--income-2); }
.adjust-preview.is-zero {
background: var(--bg-soft); border: 1px solid var(--rule);
}
.adjust-preview.is-zero .adjust-preview-tx { color: var(--ink-2); }
.adjust-actions { display: flex; gap: 10px; }
.adjust-btn {
flex: 1; font: inherit; font-size: 15px; font-weight: 800;
padding: 13px; border-radius: var(--r-lg, 14px); cursor: pointer; border: none;
}
.adjust-cancel { background: transparent; border: 1px solid var(--rule-3); color: var(--ink-2); }
.adjust-save { background: var(--brand); color: var(--brand-on, #102b06); }
.adjust-save:disabled { opacity: .45; cursor: default; }
#add-sheet .sheet > .grabber,
#settings-sheet .sheet > .grabber,
#rename-sheet .sheet > .grabber { order: 99; margin: 14px auto 0; }
#add-sheet .sheet { display: flex; flex-direction: column;
/* Длинная форма (особенно «Перевод») должна скроллиться внутри листа, иначе
низ (Сохранить/комментарий) обрывается. */
overflow-y: auto; overscroll-behavior: contain;
padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
/* =========================================================
5. LOGIN
========================================================= */
#login {
min-height: 100dvh;
display: grid;
place-items: center;
padding: calc(20px + var(--safe-top)) 20px calc(20px + var(--safe-bottom));
}
.login-card {
width: min(380px, 100%);
background: var(--surface);
border: 1px solid var(--rule-2);
border-radius: var(--r-2xl);
padding: 28px;
box-shadow: var(--sh-edge);
position: relative;
overflow: hidden;
}
/* Шапка центрирована (паритет с Flutter-экраном входа). */
.login-mark {
width: 64px; height: 64px;
margin: 0 auto 14px;
}
.login-mark img { width: 100%; height: 100%; display: block; }
.login-card h1 { text-align: center; font-size: 26px; font-weight: 800; letter-spacing: -0.01em; }
.login-card .sub { text-align: center; color: var(--ink-2); margin-top: 6px; font-size: 14px; }
.login-card form { display: grid; gap: 10px; margin-top: 18px; }
.error { color: var(--expense-2); font-size: 13px; }
/* Поле входа с ведущей иконкой (паритет с Flutter prefixIcon). */
.lf { position: relative; }
.lf-ic {
position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
width: 20px; height: 20px;
stroke: currentColor; fill: none; stroke-width: 1.8;
color: var(--ink-3); pointer-events: none;
transition: color var(--dur-2) var(--ease);
}
.lf:focus-within .lf-ic { color: var(--brand); }
.lf input { padding-left: 44px; }
.lf.has-eye input { padding-right: 46px; }
/* Кнопка показать/скрыть пароль. */
.lf-eye {
position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
width: 36px; height: 36px; min-height: 0;
display: grid; place-items: center;
background: transparent; border: none; padding: 0;
color: var(--ink-3); cursor: pointer; border-radius: var(--r-sm);
}
.lf-eye:hover { color: var(--ink); }
.lf-eye svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.lf-help { color: var(--ink-3); font-size: 12px; margin-top: -4px; }
.login-demo { margin-top: 16px; display: grid; gap: 12px; }
/* Разделитель «или» с линиями по бокам (паритет с Flutter Divider). */
.login-or {
display: flex; align-items: center; gap: 12px;
color: var(--ink-3); font-size: 12px; letter-spacing: 0.05em;
}
.login-or::before, .login-or::after {
content: ""; flex: 1; height: 1px; background: var(--rule-2);
}
/* Демо — обведённая кнопка с иконкой play (паритет с Flutter OutlinedButton). */
.demo-btn {
width: 100%; min-height: 48px;
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
background: transparent;
border: 1px solid var(--rule-2);
border-radius: var(--r-md);
color: var(--ink); font-size: 14px; font-weight: 600;
}
.demo-btn:hover { background: var(--surface-2); border-color: var(--brand-edge); }
.demo-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; color: var(--brand); }
.login-demo-hint { text-align: center; color: var(--ink-3); font-size: 12px; }
/* =========================================================
6. APP SHELL
========================================================= */
#app {
min-height: 100dvh;
display: grid;
grid-template-rows: auto 1fr;
padding-bottom: var(--nav-pb);
}
.demo-ribbon {
display: none;
text-align: center;
font-size: 11px;
background: color-mix(in srgb, var(--brand) 10%, var(--bg-soft));
border-bottom: 1px solid color-mix(in srgb, var(--brand) 22%, var(--rule));
color: var(--brand-2);
padding: calc(4px + var(--safe-top)) 12px 4px;
font-weight: 600;
letter-spacing: 0.02em;
}
body.is-demo .demo-ribbon { display: block; }
.demo-ribbon b { font-weight: 800; }
.demo-ribbon[hidden] { display: none !important; }
/* DB-001 · Sync banner — неблокирующая полоса статуса синхронизации.
Геометрия по образцу .demo-ribbon (full-width, учитывает --safe-top). */
.sync-banner {
display: flex;
align-items: center;
gap: 8px;
padding: calc(8px + var(--safe-top)) 14px 8px;
font-size: 12.5px;
font-weight: 600;
line-height: 1.25;
}
.sync-banner[hidden] { display: none !important; }
.sync-banner .sync-banner-ic { flex: 0 0 18px; width: 18px; height: 18px; display: grid; place-items: center; }
.sync-banner .sync-banner-ic svg { width: 18px; height: 18px; }
.sync-banner .sync-banner-txt { flex: 1; min-width: 0; }
.sync-banner .sync-banner-txt small { display: block; font-weight: 500; font-size: 11px; opacity: .82; }
.sync-banner .sync-banner-btn {
flex: 0 0 auto;
font: inherit;
font-size: 11.5px;
font-weight: 800;
padding: 5px 11px;
border-radius: 9px;
background: transparent;
cursor: pointer;
white-space: nowrap;
}
/* Ошибка синка (нет сети / сервер) — danger-tint */
.sync-banner.is-error {
background: var(--expense-tint);
border-bottom: 1px solid color-mix(in srgb, var(--danger) 30%, var(--rule));
color: #ff8079;
}
.sync-banner.is-error .sync-banner-ic { color: var(--danger); }
.sync-banner.is-error .sync-banner-btn {
color: var(--danger);
border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
}
/* Не синхронизировалось >48ч — предупреждение (warn-tint) */
.sync-banner.is-warn {
background: var(--warn-tint);
border-bottom: 1px solid color-mix(in srgb, var(--warn) 30%, var(--rule));
color: #e8b94a;
}
.sync-banner.is-warn .sync-banner-ic { color: var(--warn); }
.sync-banner.is-warn .sync-banner-btn {
color: var(--warn);
border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent);
}
main.tab {
padding: 0 var(--page-px) 36px;
max-width: var(--content-max);
margin: 0 auto;
width: 100%;
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-auto-rows: max-content;
gap: 20px;
/* Таб никогда не скроллится по горизонтали. overflow-x: clip — без
скролл-контейнера, не ломает position:sticky внутри (в отличие от
overflow:hidden). */
overflow-x: clip;
/* Таб = высота контента. Без этого 1fr-строка #app растягивает таб
на весь экран, и растяжение каскадом раздувает вложенные гриды. */
align-self: start;
}
/* Карточки/секции таба не раздуваются по min-content (длинный nowrap-текст
внутри вложенного грида) — на iOS Safari это давало «Анализ шире экрана». */
main.tab > * { min-width: 0; }
/* =========================================================
7. PAGE HEAD + PERIOD PICKER
========================================================= */
.page-head {
padding: calc(14px + var(--safe-top)) 0 4px;
display: grid;
gap: 12px;
position: relative;
}
.ph-title {
/* 3 колонки 1fr·auto·1fr — версия строго по центру ВСЕЙ шапки
(не «в остатке места»), заголовок слева, кнопки справа. */
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 12px;
}
.ph-title-text { display: grid; gap: 2px; min-width: 0; justify-self: start; }
.ph-actions {
display: flex;
align-items: center;
gap: 8px;
justify-self: end;
flex: 0 0 auto;
/* Всегда в последней колонке (справа). Без этого в шапках без центрального
блока (Платежи/История) кнопки уезжали во 2-ю колонку — «по центру». */
grid-column: 3;
}
.ph-actions .icon-btn { color: var(--ink-3); }
.ph-actions .icon-btn:hover { color: var(--ink); }
.ph-actions .icon-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.ph-actions .js-hide-amounts.is-hidden { color: var(--brand); }
.ph-actions .icon-btn.spinning svg { animation: ph-spin 0.7s linear infinite; }
@keyframes ph-spin { to { transform: rotate(360deg); } }
.ph-h1 {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(20px, 5vw, 26px);
letter-spacing: -0.02em;
line-height: 1;
color: var(--ink);
}
.ph-sub {
font-family: var(--font-numeric);
color: var(--ink-3);
font-size: 11px;
letter-spacing: 0.04em;
font-variant-numeric: tabular-nums;
}
.ph-nav { display: grid; gap: 16px; }
/* ---- Чип версии (Настройки) ---- */
.version-chip {
flex: 0 0 auto;
align-self: center;
display: inline-flex;
align-items: center;
padding: 5px 12px;
border-radius: var(--r-pill);
background: var(--surface-2);
border: 1px solid var(--rule);
color: var(--ink-2);
font-family: var(--font-numeric);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.01em;
font-variant-numeric: tabular-nums;
white-space: nowrap;
cursor: pointer;
transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.version-chip:hover { color: var(--ink); background: var(--surface-3); }
/* ---- Блок версии по центру шапки Обзора ---- */
.version-dash {
min-width: 0;
align-self: center;
justify-self: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 1px;
padding: 2px 6px;
background: transparent;
border: none;
cursor: pointer;
text-align: center;
font-family: var(--font-numeric);
line-height: 1.15;
}
.version-dash-v {
font-size: 12px;
font-weight: 600;
color: var(--ink-2);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.version-dash-upd {
font-size: 10px;
font-weight: 500;
color: var(--ink-3);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.version-dash:hover .version-dash-v { color: var(--ink); }
/* На узких экранах не даём блоку теснить заголовок/кнопки — прячем «Обновлено». */
@media (max-width: 380px) {
.version-dash-upd { display: none; }
}
/* ---- Модалка «Что нового» — полноэкранная ---- */
.version-modal {
display: flex;
flex-direction: column;
/* Тело прокручивается само (.version-body), сам лист не скроллим. */
overflow: hidden;
padding-left: 0;
padding-right: 0;
padding-bottom: 0;
}
.version-modal-head {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 0 16px 12px;
border-bottom: 1px solid var(--rule);
}
.version-modal-head h2 {
margin: 0;
font-family: var(--font-display);
font-weight: 700;
font-size: 20px;
letter-spacing: -0.01em;
color: var(--ink);
}
.version-subhead {
flex: 0 0 auto;
position: sticky;
top: 0;
z-index: 1;
background: var(--surface);
padding: 12px 16px 12px;
border-bottom: 1px solid var(--rule);
}
.version-nav { margin: 0; }
.version-nav .period-name { min-width: 140px; }
.version-date {
text-align: center;
font-family: var(--font-numeric);
font-size: 12px;
color: var(--ink-3);
margin: 6px 0 0;
font-variant-numeric: tabular-nums;
}
/* Прокручиваемое тело версии */
.version-body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 18px 16px calc(28px + var(--safe-bottom));
display: flex;
flex-direction: column;
gap: 26px;
}
/* Блок (Новые фичи / Исправления) */
.version-group { display: flex; flex-direction: column; gap: 16px; }
.version-group-title {
display: flex;
align-items: center;
gap: 10px;
margin: 0;
font-family: var(--font-display);
font-weight: 700;
font-size: 15px;
letter-spacing: -0.005em;
color: var(--brand-2);
}
.version-group-title::before {
content: "";
width: 4px;
height: 16px;
border-radius: var(--r-pill);
background: var(--brand);
}
.version-group.fixes .version-group-title { color: var(--ink); }
.version-group.fixes .version-group-title::before { background: var(--ink-3); }
/* Раздел внутри блока */
.version-sec { display: flex; flex-direction: column; gap: 8px; }
.version-sec-label {
margin: 0;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
}
.version-items {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 9px;
}
.version-item {
position: relative;
padding-left: 18px;
color: var(--ink);
font-size: 14px;
line-height: 1.45;
}
.version-item::before {
content: "";
position: absolute;
left: 3px;
top: 8px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--brand);
}
.version-group.fixes .version-item::before { background: var(--ink-4); }
.range-segment {
display: grid;
grid-template-columns: repeat(5, 1fr);
background: var(--surface);
border: 1px solid var(--rule);
padding: 3px;
border-radius: var(--r-md);
gap: 0;
position: relative;
isolation: isolate;
--seg-n: 5;
}
/* Скользящая лаймовая «таблетка» под активной кнопкой */
.range-segment::before {
content: "";
position: absolute;
top: 3px; left: 3px; bottom: 3px;
width: calc((100% - 6px) / var(--seg-n, 5));
border-radius: var(--r-sm);
background: var(--brand-tint);
transform: translateX(calc(var(--seg-i, 0) * 100%));
transition: transform var(--mo-base) var(--mo-decisive);
z-index: 0;
pointer-events: none;
}
.range-segment button {
background: transparent;
border: none;
padding: 11px 4px;
min-height: 44px;
border-radius: var(--r-sm);
color: var(--ink-3);
font-size: 12px;
font-weight: 500;
white-space: nowrap;
position: relative;
z-index: 1;
transition: color var(--dur-2) var(--ease),
background var(--dur-2) var(--ease);
}
.range-segment button:hover { color: var(--ink-2); }
/* П4: контрастный фокус на кнопках переключателя периода */
.range-segment button:focus-visible {
outline: 3px solid var(--brand);
outline-offset: 1px;
z-index: 1;
}
.range-segment button.active {
color: var(--brand-2);
font-weight: 600;
}
@media (prefers-reduced-motion: reduce) {
.range-segment::before { transition: none; }
}
/* Переключатель «Расходы/Доходы» — два таба вместо пяти. Размеры кнопок
приведены к сегменту Сводка/Статистика (.seg-btn), чтобы оба сегмента были
одинаковыми: 7px паддинг (без min-height 44px периодного пикера), 13px/600. */
.cat-kind-segment {
grid-template-columns: repeat(2, 1fr);
margin-bottom: 12px;
--seg-n: 2;
}
.cat-kind-segment button {
padding: 7px 4px;
min-height: 0;
font-size: 13px;
font-weight: 600;
}
.period-nav {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
}
.period-nav .period-name {
font-family: var(--font-display);
font-weight: 800;
font-size: 22px;
letter-spacing: -0.02em;
min-width: 150px;
text-align: center;
color: var(--ink);
}
/* Стрелки периода — заметные круглые кнопки (раньше были «слабыми»). */
.period-nav .icon-btn {
width: 40px; height: 40px; flex: 0 0 auto;
display: flex; align-items: center; justify-content: center;
background: var(--surface-2); border: 1px solid var(--rule-2);
border-radius: 50%; transition: filter var(--dur-2) var(--ease),
background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.period-nav .icon-btn svg { width: 20px; height: 20px; stroke: var(--ink); fill: none; stroke-width: 2.2; }
.period-nav .icon-btn:hover { background: var(--surface-3); border-color: var(--rule-3); }
.period-nav .icon-btn:active { filter: brightness(0.92); }
.period-nav .icon-btn[disabled] { opacity: 0.35; }
.icon-btn {
width: 44px; height: 44px;
display: grid; place-items: center;
border-radius: var(--r-pill);
background: var(--surface);
border: 1px solid var(--rule);
color: var(--ink-2);
padding: 0;
touch-action: manipulation;
}
.icon-btn:hover { color: var(--ink); background: var(--surface-2); }
.icon-btn svg { width: 18px; height: 18px; stroke: currentColor; }
.icon-btn[disabled] { opacity: 0.35; cursor: not-allowed; }
/* Активный вид «календарь» в Истории */
#hist-view-toggle[aria-pressed="true"] {
background: color-mix(in srgb, var(--brand) 16%, transparent);
}
#hist-view-toggle[aria-pressed="true"] svg { stroke: var(--brand); }
.period-picker { display: grid; gap: 8px; }
.period-custom {
display: grid;
grid-template-columns: 1fr auto 1fr auto;
align-items: center;
gap: 8px;
}
.period-custom input[type="date"] {
background: var(--surface-2);
border: 1px solid var(--rule);
border-radius: var(--r-md);
padding: 8px 10px;
color: var(--ink);
font-family: var(--font-numeric);
font-variant-numeric: tabular-nums;
color-scheme: dark;
min-width: 0; width: 100%;
}
.period-custom .apply-period { padding: 8px 14px; font-size: 13px; }
.period-custom .apply-period[disabled] { opacity: 0.45; cursor: not-allowed; }
.period-custom-field { display: contents; }
@media (max-width: 460px) {
.period-custom { grid-template-columns: 1fr 1fr; }
.period-custom .dim { display: none; }
.period-custom .apply-period { grid-column: 1 / -1; }
}
/* =========================================================
8. HERO — single big number (расход за период)
POCKET BANK-influence: ".pace" → "Осталось 18 200 ₽" pseudo-row
========================================================= */
.hero {
background: var(--surface);
border: 1px solid var(--rule);
border-radius: var(--r-xl);
padding: 20px;
}
.hero-lbl-row {
display: flex; align-items: center; justify-content: space-between;
}
.hero-lbl {
font-size: 12px;
color: var(--ink-3);
}
.hero-amount {
margin-top: 4px;
display: flex; align-items: baseline; gap: 4px;
}
.hero-amount .num {
font-size: 30px;
font-weight: 700;
color: var(--ink);
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
.hero-amount .cur {
font-size: 18px;
color: var(--ink-2);
}
.hero-kpi {
margin-top: 16px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.hero-kpi-tile {
background: var(--bg-soft);
border-radius: var(--r-md);
padding: 12px 10px;
display: flex; flex-direction: column; gap: 3px;
min-width: 0;
}
.hero-kpi-tile .lbl {
font-size: 11px;
color: var(--ink-3);
}
/* Округлённое значение без копеек (как FittedBox+formatRounded во Flutter) —
крупнее; JS досжимает шрифт для экстремальных сумм; ellipsis — страховка. */
.hero-kpi-tile .val {
font-size: clamp(13px, 3.8vw, 15px);
font-weight: 700;
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* delta-pill в hero */
.delta-badge {
display: inline-flex; align-items: center; gap: 3px;
padding: 2px 8px;
border-radius: var(--r-pill);
font-size: 11px; font-weight: 700;
}
.delta-badge svg { width: 12px; height: 12px; }
/* cls «up» = рост значения; для расходов (hero, invert=true) это плохо → красный. */
.delta-badge.up { background: rgba(248,81,73,.14); color: var(--expense-2); }
.delta-badge.down { background: rgba(86,211,100,.14); color: var(--income-2); }
.delta-badge.flat { background: rgba(160,170,182,.14); color: var(--ink-2); }
/* === MOVERS (что изменилось) ===================================== */
/* Норма сбережений */
#ana-savings { margin-bottom: var(--sp-5); }
#ana-savings .h-section {
font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
color: var(--ink-3); margin: 0 0 2px;
}
#ana-savings .sav-hint { display: block; font-size: 11px; margin: 0 0 8px; }
.sav-card { border: 1px solid var(--rule); border-radius: var(--r-xl); padding: var(--sp-4);
background: var(--bg-soft, rgba(255,255,255,0.02)); }
.sav-top { display: flex; align-items: baseline; justify-content: space-between; }
.sav-pct { font-size: 30px; font-weight: 700; line-height: 1; }
.sav-note { font-size: 13px; }
.sav-track { height: 8px; border-radius: 999px; background: var(--surface-2, rgba(255,255,255,0.06));
overflow: hidden; margin: 12px 0 8px; }
.sav-fill { height: 100%; border-radius: 999px; }
.sav-sub { font-size: 11px; }
.movers-card { margin-top: var(--sp-5); margin-bottom: var(--sp-5); }
/* Личная инфляция: плашка-заголовок с общей цифрой + суммы справа. */
.infl-hero {
display: flex; align-items: center; justify-content: space-between;
border: 1px solid var(--rule); border-radius: var(--r-xl);
padding: 12px 16px; margin-bottom: var(--sp-2);
}
.infl-hero .infl-pct { font-size: 26px; font-weight: 700; line-height: 1.1; }
.infl-hero .infl-cap { font-size: 12px; margin-top: 2px; }
.infl-hero .infl-sums { text-align: right; font-size: 13px; }
.infl-hero .infl-sums .muted { font-size: 11px; }
/* Заголовок «ЧТО ИЗМЕНИЛОСЬ» сверху + подзаголовок снизу (как Flutter
_WhatChanged), а не в одну строку space-between. */
.movers-card .head { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-bottom: var(--sp-2); }
.movers-card .head .h-section {
font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--ink-3); margin: 0;
}
.movers-card .head .muted { font-size: 11px; color: var(--ink-3); }
.movers-list { display: flex; flex-direction: column; }
/* Flex-строка (не grid): сумма и чип-дельта сжаты по содержимому, БЕЗ общей
auto-колонки, которая резервировала ширину самого длинного чипа (+499.9%) и
растягивала короткие. Размер чипа ДИНАМИЧЕСКИЙ, кластер сумма+чип прижат
вправо (паритет с APK). */
.mover {
display: flex; align-items: center; gap: 12px;
padding: 8px 0; border-bottom: 1px solid var(--rule);
}
.mover .cat-icon { flex: 0 0 auto; }
.mover .mover-mid { flex: 1 1 auto; min-width: 0; }
.mover .cur, .mover .delta-badge { flex: 0 0 auto; }
.mover:last-child { border-bottom: 0; }
.mover .mover-mid { min-width: 0; }
.mover .name { font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mover .was { font-size: 11px; color: var(--ink-3); }
.mover .cur { font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; }
.delta-badge.new { background: rgba(88,166,255,.16); color: var(--info); }
/* delta-badges (inline, в списках/анализе) */
.delta {
display: inline-flex; align-items: center; gap: 4px;
font-size: 11px; font-weight: 700;
font-family: var(--font-numeric);
padding: 3px 8px;
border-radius: var(--r-pill);
background: var(--surface-2);
border: 1px solid var(--rule-2);
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
.delta.up {
color: var(--expense-2);
background: color-mix(in srgb, var(--expense) 20%, transparent);
border-color: color-mix(in srgb, var(--expense) 50%, transparent);
}
.delta.down {
color: var(--income-2);
background: color-mix(in srgb, var(--income) 20%, transparent);
border-color: color-mix(in srgb, var(--income) 50%, transparent);
}
.delta.flat { color: var(--ink-2); }
.delta svg { width: 10px; height: 10px; stroke: currentColor; stroke-width: 2.6; }
/* =========================================================
9. KPI — 3 inline rows под hero (не 3 карточки, не grid)
========================================================= */
.kpi-grid {
background: var(--surface);
border: 1px solid color-mix(in srgb, var(--rule-2) 70%, transparent);
border-radius: var(--r-xl);
padding: 6px 16px;
display: grid;
gap: 0;
}
.kpi {
background: transparent;
padding: 12px 0;
border: none;
border-bottom: 1px solid var(--rule);
display: grid;
grid-template-columns: 1fr auto;
align-items: baseline;
gap: 12px;
}
.kpi:last-child { border-bottom: none; }
.kpi .lbl {
color: var(--ink-2);
font-size: 13px;
font-weight: 600;
letter-spacing: -0.005em;
text-transform: none;
}
.kpi .val {
font-family: var(--font-numeric);
font-size: 16px;
font-weight: 600;
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
color: var(--ink);
}
.kpi.income .val { color: var(--income-2); }
.kpi.expense .val { color: var(--expense-2); }
.kpi.net.positive .val { color: var(--income-2); }
.kpi.net.negative .val { color: var(--expense-2); }
.kpi.net .val { font-weight: 700; font-size: 16px; }
.kpi.lg { grid-column: 1 / -1; }
/* =========================================================
10. SPARK CARD (по периодам)
========================================================= */
.spark-card {
/* Отступ сверху отделяет «По периодам» от блока выше (KPI/Сводка) — в #ov-stats
нет grid-gap, поэтому секции расставляются собственными margin. */
margin-top: var(--sp-5);
background: var(--surface);
border: 1px solid color-mix(in srgb, var(--rule-2) 70%, transparent);
border-radius: var(--r-xl);
padding: var(--sp-4);
}
.spark-head {
display: flex; justify-content: space-between; align-items: baseline;
margin-bottom: var(--sp-2); gap: 10px;
}
.spark-head .ttl {
font-size: 13px;
font-weight: 600;
color: var(--ink-2);
letter-spacing: -0.01em;
}
.spark-head .sub {
color: var(--ink-3);
font-size: 11px;
font-family: var(--font-numeric);
font-variant-numeric: tabular-nums;
}
.spark-toggle {
display: inline-flex;
background: var(--bg-soft);
border-radius: var(--r-pill);
padding: 3px;
gap: 2px;
border: 1px solid var(--rule);
}
.spark-toggle button {
background: transparent; border: none; color: var(--ink-3);
padding: 4px 10px; font-size: 11px;
border-radius: var(--r-pill);
}
.spark-toggle button.active { background: var(--surface-3); color: var(--ink); }
.spark { display: grid; gap: 8px; }
.spark-row {
display: grid;
grid-template-columns: 84px 1fr auto;
align-items: center;
gap: 12px;
font-size: 12px;
padding: 4px 0;
}
.spark-row .lbl {
color: var(--ink-2);
font-family: var(--font-numeric);
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
font-size: 11px;
}
.spark-row .stack { display: grid; gap: 4px; }
.spark-row .track {
height: 6px;
background: var(--surface-2);
border-radius: var(--r-pill);
overflow: hidden;
}
.spark-row .track.prev { height: 4px; }
.spark-row .fill {
height: 100%;
background: var(--brand);
border-radius: var(--r-pill);
transition: width 500ms var(--ease);
}
.spark-row .fill.prev { background: var(--ink-3); }
.spark-row .val-col { display: grid; gap: 1px; justify-items: end; }
.spark-row .val {
font-family: var(--font-numeric);
font-weight: 600;
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
font-size: 12px;
color: var(--ink);
}
.spark-row .delta { font-size: 10px; padding: 1px 6px; }
.spark-legend {
display: flex; gap: 14px;
font-size: 10px;
color: var(--ink-3);
margin-top: 6px;
text-transform: uppercase;
letter-spacing: 0.10em;
}
.spark-legend i {
display: inline-block; width: 8px; height: 8px;
border-radius: var(--r-pill);
margin-right: 6px; vertical-align: 1px;
}
.spark-legend .now i { background: var(--brand); }
.spark-legend .past i { background: var(--ink-3); }
/* =========================================================
11. SECTION HEADER — "─── КАТЕГОРИИ ─── 8/16"
========================================================= */
/* minmax(0,1fr) — колонка не раздувается под длинный непереносимый контент
(имя категории), иначе центрированный донат выше уезжает вбок. */
.section { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.section > .head {
display: flex; align-items: center; gap: 10px;
margin-top: 4px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-2);
}
.section > .head .h-section,
.section > .head h2 {
margin: 0;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.14em;
color: var(--ink-3);
text-transform: uppercase;
white-space: nowrap;
}
/* Декоративная линия после заголовка убрана — выглядела как лишняя «черта»
после количества категорий (фидбэк). */
.section > .head a,
.section > .head .muted {
color: var(--ink-3);
font-size: 11px;
font-family: var(--font-numeric);
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
}
.h-section {
font-size: 10px;
font-weight: 700;
color: var(--ink-3);
text-transform: uppercase;
letter-spacing: 0.14em;
margin: 0;
}
/* =========================================================
12. CAT LIST — inline 2px progress bar
========================================================= */
.cat-list { display: grid; grid-template-columns: minmax(0, 1fr); }
.cat-list-toggle {
width: 100%;
margin-top: 6px;
padding: 13px;
background: transparent;
border: none;
border-radius: var(--r-md);
color: var(--ink-2);
font: inherit;
font-size: 13px;
font-weight: 600;
cursor: pointer;
touch-action: manipulation;
}
.cat-list-toggle:hover { background: var(--surface); color: var(--ink); }
.cat-item {
display: grid;
grid-template-columns: 36px 1fr auto;
gap: 12px;
align-items: center;
padding: var(--sp-3) 0;
background: transparent;
border: none;
border-bottom: 1px solid var(--rule);
border-radius: 0;
width: 100%;
text-align: left;
font: inherit;
color: inherit;
cursor: pointer;
position: relative;
transition: background var(--dur-2) var(--ease);
touch-action: manipulation;
}
.cat-item:hover { background: color-mix(in srgb, var(--surface) 50%, transparent); }
.cat-item:focus-visible {
outline: 2px solid var(--brand);
outline-offset: -2px;
background: var(--surface);
}
.cat-item .dot {
width: 10px; height: 10px;
border-radius: var(--r-pill);
align-self: center;
background: var(--cat-color, var(--brand));
}
.cat-item .name {
font-size: 16px;
font-weight: 500;
letter-spacing: -0.005em;
color: var(--ink);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
min-width: 0;
}
.cat-item .num {
font-family: var(--font-numeric);
font-weight: 600;
font-size: 14px;
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
color: var(--ink);
}
.cat-item .meta {
grid-column: 2 / -1;
min-width: 0;
margin-top: 2px;
color: var(--ink-3);
font-size: 11px;
display: flex; gap: 8px; align-items: center;
font-family: var(--font-numeric);
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
}
.cat-item .delta { font-size: 10px; padding: 1px 6px; max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* inline progress bar — на ::after, на самой строке */
.cat-item::after {
content: "";
position: absolute;
bottom: 1px; left: 0;
height: 2px;
width: var(--share, 0%);
background: var(--cat-color, var(--brand));
border-radius: 2px;
transition: width 600ms var(--ease);
pointer-events: none;
opacity: 0.85;
}
/* === CATEGORY ACCORDION — уплотнённые карточки V2 ================= */
/* Каждая категория — карточка. Шеврон+squircle-иконка центрированы по
вертикали слева, контент (имя/сумма/чип, бар-доля, доля%/N оп.) — справа.
Раскрытые операции рендерятся ВНУТРИ карточки. */
.cat-acc {
background: var(--surface);
border: 1px solid var(--rule);
border-radius: 10px;
margin-bottom: 5px;
padding: 0 10px;
}
.cat-acc-head {
display: flex; align-items: center; gap: 10px;
width: 100%; border: 0; background: transparent; cursor: pointer;
padding: 9px 0; color: var(--ink); text-align: left;
}
.cat-lead { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.cat-acc-head .chev { width: 13px; height: 13px; color: var(--ink-3); flex: 0 0 auto;
stroke: currentColor; fill: none; stroke-width: 2;
transition: transform var(--mo-fast) var(--mo-ease); }
.cat-acc-head[aria-expanded="true"] .chev { transform: rotate(90deg); }
.cat-content { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.cat-top { display: flex; align-items: center; gap: 8px; }
.cat-top .name {
flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px;
font-size: 14px; font-weight: 600;
}
/* Текст имени ужимается с многоточием; бейдж-иконка (.over-badge) рядом не клиппится. */
.cat-top .name-text {
flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cat-right { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.cat-acc-head .sum { font-size: 12px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.cat-acc.cat-over .sum { color: var(--expense-2); }
.lim-chip { font-size: 10px; font-weight: 700; padding: 1px 7px;
border-radius: var(--r-pill); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lim-chip.lim-ok { background: var(--income-tint); color: var(--income-2); }
.lim-chip.lim-warn { background: var(--warn-tint); color: var(--warn); }
.lim-chip.lim-over { background: var(--expense-tint); color: var(--expense-2); }
/* Компактный значок «превышение» (красный кружок со стрелкой вверх) — не клиппится
на длинном имени, в отличие от прежнего текстового бейджа «Превышение». */
.over-badge { flex: 0 0 auto; display: grid; place-items: center;
width: 16px; height: 16px; border-radius: var(--r-pill);
background: var(--expense-tint); color: var(--expense-2); }
.over-badge svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2.4; }
.cat-acc-bar { display: block; height: 3px; margin-top: 7px; border-radius: var(--r-pill);
background: var(--surface-3); overflow: hidden; }
.cat-acc-bar > i { display: block; height: 100%; width: 0; border-radius: inherit; transition: width var(--mo-layout) var(--mo-ease); }
.cat-acc-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 5px; font-size: 11px; color: var(--ink-3); }
.cat-acc-meta .cat-share { color: var(--brand-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.cat-acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--mo-base) var(--mo-ease); }
.cat-acc-head[aria-expanded="true"] ~ .cat-acc-body { grid-template-rows: 1fr; }
.cat-acc-body > div { overflow: hidden; min-height: 0; }
/* Операции развёрнутой категории — список внутри карточки (как Flutter). */
.cat-acc-ops {
list-style: none; margin: 0; padding: 1px 10px;
background: var(--bg);
border: 1px solid var(--rule-2);
border-radius: var(--r-lg);
}
.cat-acc-head[aria-expanded="true"] ~ .cat-acc-body > div { padding-bottom: 9px; }
.cat-acc-ops .tx-item.cat-op:last-child { border-bottom: none; }
@media (prefers-reduced-motion: reduce) {
.cat-acc-head .chev, .cat-acc-bar > i, .cat-acc-body { transition: none; }
}
/* category icon */
.cat-icon {
display: inline-grid;
place-items: center;
border-radius: var(--r-pill);
background: var(--cat-color, var(--brand-tint));
color: var(--cat-on, var(--brand-on));
flex: 0 0 auto;
position: relative;
flex-shrink: 0;
}
/* Маска-иконка рисуется ТОЛЬКО когда задана иконка (applyCatIcon ставит
data-icon). Без гейта ::before без mask-url заливал всю плитку сплошным
--cat-on → чёрный квадрат в превью новой категории (баг #2). */
.cat-icon[data-icon]::before {
content: "";
position: absolute; inset: 0;
background: var(--cat-on, currentColor);
-webkit-mask: var(--cat-icon-url) no-repeat center / 65%;
mask: var(--cat-icon-url) no-repeat center / 65%;
}
.cat-icon-sm { width: 24px; height: 24px; }
.cat-icon-md { width: 32px; height: 32px; }
/* Squircle (скруглённый квадрат) — для карточек категорий V2. */
.cat-icon-sq { border-radius: 9px; }
.cat-icon-lg { width: 48px; height: 48px; }
.cat-icon-xl { width: 56px; height: 56px; }
.cat-icon-empty {
background: var(--surface-2);
border: 1px dashed var(--rule-2);
}
.cat-icon-empty::before { display: none; }
/* Бейдж счёта B1 (Task 5): цветной квадрат + мини-иконка типа в углу иконки
категории. Кольцо цвета фона строки — визуально «вырезано» из иконки. */
.acc-badge {
position: absolute; right: -4px; bottom: -4px;
width: 20px; height: 20px; border-radius: 8px;
border: 2px solid var(--bg);
display: flex; align-items: center; justify-content: center;
pointer-events: none;
}
.acc-badge svg { width: 11px; height: 11px; stroke: #11151b; fill: none; stroke-width: 2; }
.acc-badge::before { content: none; }
.cat-picker-tile .cat-icon:not([style*="--cat-icon-url"]) {
background: var(--surface-2);
border: 1px dashed var(--rule-2);
}
.cat-picker-tile .cat-icon:not([style*="--cat-icon-url"])::before {
display: none;
}
/* =========================================================
13. ADD-CTA — на странице "Обзор" над категориями
========================================================= */
.add-cta {
width: 100%;
display: grid;
grid-template-columns: 40px 1fr auto;
align-items: center;
gap: 14px;
padding: 10px 14px 10px 10px;
background: var(--surface);
color: var(--ink);
border: 1px solid var(--rule-2);
border-radius: var(--r-xl);
cursor: pointer;
text-align: left;
font: inherit;
transition: background var(--dur-2) var(--ease),
border-color var(--dur-2) var(--ease),
transform var(--dur-1) var(--ease-press);
touch-action: manipulation;
}
.add-cta:hover {
background: var(--surface-2);
border-color: var(--brand-edge);
}
.add-cta:active { transform: scale(0.985); }
.add-cta-icon {
width: 38px; height: 38px;
border-radius: var(--r-md);
display: grid; place-items: center;
background: var(--brand);
color: var(--brand-on);
flex: 0 0 auto;
box-shadow: var(--sh-edge-2);
}
.add-cta-icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2.4; }
.add-cta-text { display: grid; gap: 2px; min-width: 0; }
.add-cta-title {
font-family: var(--font-display);
font-weight: 600;
font-size: 16px;
letter-spacing: -0.005em;
color: var(--ink);
}
.add-cta-sub { font-size: 12px; color: var(--ink-3); }
.add-cta-chev { width: 18px; height: 18px; stroke: var(--ink-3); fill: none; stroke-width: 2; }
/* =========================================================
14. TX LIST
========================================================= */
/* Поиск по операциям (История). */
.hist-search {
position: relative;
margin: 0 0 12px;
}
.hist-search-ic {
position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
width: 18px; height: 18px;
stroke: currentColor; fill: none; stroke-width: 1.8;
color: var(--ink-3); pointer-events: none;
}
.hist-search input {
width: 100%;
padding-left: 42px; padding-right: 42px;
}
/* Прячем нативный крестик type=search — используем свою кнопку очистки. */
.hist-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.hist-search-clear {
position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
width: 34px; height: 34px; min-height: 0;
display: grid; place-items: center;
background: transparent; border: none; padding: 0;
color: var(--ink-3); cursor: pointer; border-radius: var(--r-sm);
}
.hist-search-clear:hover { color: var(--ink); }
.hist-search-clear svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
.hist-empty {
text-align: center; color: var(--ink-3); font-size: 14px;
padding: 32px 16px;
}
/* Одноразовая подсказка про переключатель вида Истории */
.coach-tip {
position: fixed; z-index: 60; max-width: 172px;
background: var(--brand); color: var(--brand-on);
font-size: 13px; font-weight: 600; line-height: 1.25;
padding: 8px 11px; border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
opacity: 0; transform: translateY(-6px);
transition: opacity .2s ease, transform .2s ease;
pointer-events: none;
}
.coach-tip.show { opacity: 1; transform: translateY(0); }
.coach-tip::before {
content: ""; position: absolute; top: -5px; right: 16px;
width: 11px; height: 11px; background: var(--brand);
border-radius: 2px; transform: rotate(45deg);
}
/* Календарь месяца в Истории (Task 4) */
.hist-cal { margin: 0 0 var(--sp-3); }
.hc-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: var(--sp-1); }
.hc-weekdays span { font-size: 11px; color: var(--ink-3); text-align: center; text-transform: uppercase; letter-spacing: .4px; }
.hc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.hc-day {
display: flex; flex-direction: column; align-items: center; gap: 2px;
min-height: 52px; padding: 5px 1px; border-radius: 10px;
background: var(--surface-2); border: 1px solid transparent; cursor: pointer;
}
.hc-day .hc-n { font-size: 14px; font-weight: 500; color: var(--ink-2); line-height: 1.15; }
.hc-day.today .hc-n { color: var(--brand); font-weight: 700; }
.hc-day.sel {
background: color-mix(in srgb, var(--brand) 14%, transparent);
border-color: var(--brand);
}
.hc-exp, .hc-inc {
font-size: 10px; font-weight: 700; line-height: 1.15;
white-space: nowrap; max-width: 100%; overflow: hidden;
}
.hc-exp { color: var(--expense); }
.hc-inc { color: var(--income); }
.tx-list {
list-style: none; padding: 0; margin: 0;
display: grid;
gap: 0;
}
.tx-day {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
padding: 0 0 var(--sp-2);
margin: var(--sp-5) 0 var(--sp-2);
border-bottom: 1px solid var(--rule);
font-family: var(--font-numeric);
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;
}
.tx-day-label {
letter-spacing: 0.14em;
min-width: 0;
}
.tx-day-sums {
display: inline-flex;
align-items: baseline;
gap: 10px;
flex: none;
}
.tx-day-sum {
font-size: 11px;
font-weight: 700;
letter-spacing: 0;
text-transform: none;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
white-space: nowrap;
}
.tx-day-sum.income { color: var(--income); }
.tx-day-sum.expense { color: var(--expense); }
/* Индикатор «день скрыт» — приглушённый перечёркнутый глаз рядом с датой. */
.tx-day-eye {
width: 13px;
height: 13px;
flex: none;
stroke: currentColor;
fill: none;
stroke-width: 1.8;
color: var(--ink-3);
opacity: 0.6;
}
.tx-day-eye[hidden] { display: none; }
.tx-day:first-child { margin-top: 2px; }
.tx-day-wrap { text-align: left; }
/* Блок периода и hero — не выделять текст при тапах. */
.hero, .ph-nav, .period-picker, .period-nav, .range-segment,
.ov-seg, .ov-kind-segment, .cat-kind-segment {
-webkit-user-select: none;
user-select: none;
}
.tx-item {
display: grid;
grid-template-columns: 48px minmax(0, 1fr) minmax(64px, auto);
gap: 12px;
align-items: center;
padding: var(--sp-3) 0;
background: transparent;
border: none;
border-bottom: 1px solid var(--rule);
border-radius: 0;
width: 100%;
text-align: left;
font: inherit;
color: inherit;
/* Не выделять текст при тапах/long-press (мешало жесту скрытия и просто
выделялось при обычных тапах). */
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;
cursor: pointer;
position: relative;
transition: background var(--dur-2) var(--ease);
touch-action: pan-y;
}
.tx-item:hover { background: color-mix(in srgb, var(--surface) 50%, transparent); }
.tx-item:focus-visible {
outline: 2px solid var(--brand);
outline-offset: -2px;
background: var(--surface);
}
.tx-item.swiping { transition: none; }
.tx-item .avatar {
width: 10px; height: 10px;
border-radius: var(--r-pill);
background: var(--cat-color, var(--ink-4));
align-self: center;
}
.tx-item .meta-col { display: grid; gap: 1px; min-width: 0; }
.tx-item .name {
font-size: 16px; font-weight: 500;
letter-spacing: -0.005em;
color: var(--ink);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tx-item .sub {
color: var(--ink-3); font-size: 11px;
font-family: var(--font-numeric);
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
/* Длинный комментарий переносим на 2-ю строку (не режем в одну). */
white-space: normal; overflow: hidden;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
line-height: 1.3;
}
.tx-item .amt {
font-family: var(--font-numeric);
font-weight: 600;
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
font-size: 14px;
color: var(--ink);
text-align: right;
white-space: nowrap;
}
.tx-item.expense .amt { color: var(--expense-2); }
.tx-item.income .amt { color: var(--income-2); }
/* Приблизительный рублёвый эквивалент валютной операции — под суммой. */
.amt-approx { display: block; margin-top: 1px; font-size: 10px; font-weight: 500;
color: var(--ink-3); letter-spacing: 0; }
/* При открытом свайп-трее сумма ужимается по шрифту, чтобы влезть рядом с
кнопками (overflow:hidden на .tx-surface — страховка на очень длинных). */
#history-list .tx-item .amt,
#account-page-ops .tx-item .amt { transition: font-size 180ms cubic-bezier(0.22, 1, 0.36, 1); }
#history-list .tx-item.swipe-open .amt,
#account-page-ops .tx-item.swipe-open .amt { font-size: 11.5px; }
/* История: ряд — flex-контейнер. Контент .tx-surface занимает всё место и
СЖИМАЕТСЯ при свайпе, .tx-actions выезжает справа (ширина 0 → трей). Сумма
подъезжает к названию, вся строка влево НЕ уезжает (нет рывка к центру). */
#history-list .tx-item {
display: flex;
align-items: stretch;
position: relative;
overflow: hidden;
padding: 0;
background: transparent;
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;
touch-action: pan-y;
cursor: default;
}
#history-list .tx-item:hover { background: transparent; }
#history-list .tx-surface {
order: 0;
flex: 1 1 auto;
min-width: 0;
display: grid;
grid-template-columns: 48px minmax(0, 1fr) minmax(64px, auto);
gap: 12px;
align-items: center;
padding: var(--sp-3) 0;
/* При свайпе surface сжимается — контент (в т.ч. длинная сумма) клипается по
своему краю, а не наезжает на кнопки трея. */
overflow: hidden;
}
#history-list .tx-actions {
order: 1; /* DOM: actions раньше surface, но визуально — справа */
flex: 0 0 auto;
width: 0;
overflow: hidden;
display: flex;
align-items: stretch;
/* Плавный доезд после отпускания (во время драга снимается классом .swiping). */
transition: width 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
#history-list .tx-item.swipe-open .tx-actions { width: 168px; } /* 3 × 64px */
#history-list .tx-item.tx-2acts.swipe-open .tx-actions { width: 112px; } /* DB-005: корректировка — 2 кнопки */
#history-list .tx-item.swiping .tx-actions { transition: none; }
.tx-act {
width: 56px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
border: none;
background: transparent;
font: inherit;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.tx-act-ic {
width: 36px; height: 36px;
border-radius: var(--r-md);
display: flex;
align-items: center;
justify-content: center;
transition: filter var(--dur-2) var(--ease);
}
.tx-act:active .tx-act-ic { filter: brightness(1.15); }
.tx-act-ic svg {
width: 20px; height: 20px;
fill: none;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.tx-act-lbl {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.01em;
}
.tx-act.edit .tx-act-ic { background: var(--surface-3); }
.tx-act.edit .tx-act-ic svg { stroke: var(--ink-2); }
.tx-act.edit .tx-act-lbl { color: var(--ink-2); }
.tx-act.repeat .tx-act-ic { background: var(--brand-tint); }
.tx-act.repeat .tx-act-ic svg { stroke: var(--brand); }
.tx-act.repeat .tx-act-lbl { color: var(--brand); }
.tx-act.del .tx-act-ic { background: var(--expense-tint); }
.tx-act.del .tx-act-ic svg { stroke: var(--expense); }
.tx-act.del .tx-act-lbl { color: var(--expense); }
.tx-act:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; border-radius: 8px; }
/* Десктоп (мышь): без свайпа — трей раскрывается при наведении на ряд
(та же flex-механика: контент сжимается, действия выезжают справа). */
@media (hover: hover) and (pointer: fine) {
#history-list .tx-item:hover .tx-actions { width: 192px; }
#history-list .tx-item.tx-2acts:hover .tx-actions { width: 128px; }
}
#history-more {
width: 100%; margin-top: 14px;
background: transparent;
color: var(--ink-2);
border: 1px dashed var(--rule-2);
min-height: 44px;
}
/* =========================================================
15. BOTTOM NAV — underline-top indicator on active
========================================================= */
.side-nav { display: none; }
.bottom-nav {
position: fixed;
left: 0; right: 0;
bottom: 0;
display: grid;
grid-template-columns: 1fr 1fr 84px 1fr 1fr;
background: var(--surface);
border-top: 1px solid var(--rule);
padding: 6px 4px calc(6px + var(--safe-bottom));
z-index: 20;
}
.bottom-nav-slot { flex: 0 0 84px; }
.fab {
position: fixed;
left: 50%;
/* centerDocked как во Flutter: центр круга на верхней кромке бара (бар ~67px,
радиус 29) → половина круга утоплена в бар, половина над ним. */
bottom: calc(env(safe-area-inset-bottom, 0px) + 38px);
transform: translateX(-50%);
width: 58px; height: 58px;
border: 0; border-radius: 999px;
background: var(--brand);
box-shadow: 0 3px 8px rgba(0,0,0,.32), 0 1px 4px rgba(31,191,160,.12);
color: var(--brand-on);
display: grid; place-items: center;
cursor: pointer;
z-index: 30; /* над навбаром (20), но под модалками (scrim 50) */
transition: transform var(--mo-fast) var(--mo-ease);
}
.fab svg { width: 30px; height: 30px; stroke: currentColor; }
.fab:active { transform: translateX(-50%) scale(.92); }
@media (min-width: 1024px) { .fab { display: none; } }
.bottom-nav button {
background: transparent;
border: none;
border-radius: var(--r-md);
padding: 7px 2px 7px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.02em;
color: var(--ink-3);
min-height: 54px;
position: relative;
touch-action: manipulation;
}
.bottom-nav button > span {
font-size: 10px;
line-height: 1;
}
.bottom-nav button svg {
width: 22px; height: 22px;
stroke: currentColor;
flex: 0 0 auto;
stroke-width: 1.7;
fill: none;
}
/* Как во Flutter: активна только ИКОНКА (brand), подпись остаётся светлой (ink). */
.bottom-nav button.active {
color: var(--brand);
font-weight: 600;
}
.bottom-nav button.active > span {
color: var(--ink);
}
.bottom-nav button:hover { background: transparent; border-color: transparent; }
.bottom-nav button:hover:not(.active) { color: var(--ink-2); }
.bottom-nav button:focus-visible {
outline: 2px solid var(--brand);
outline-offset: -2px;
}
/* =========================================================
16. ADD-SHEET form
========================================================= */
/* Лист операции — паритет с Flutter add_transaction_sheet. */
.sheet-op-title { text-align: center; }
/* Шапка полноэкранной модалки операции: заголовок строго по центру, кнопка
выхода — в правом верхнем углу (задача #6). */
.op-head { position: relative; display: flex; align-items: center;
justify-content: center; margin-bottom: 14px; min-height: 32px; }
.op-head .sheet-op-title { margin: 0; }
/* Выразительная кнопка выхода: круглый фон + крупная яркая стрелка (#1). */
.op-close-btn { position: absolute; left: 0; top: 50%; transform: translateY(-50%);
width: 40px; height: 40px; border-radius: 50%; background: var(--surface-2);
border: 1px solid var(--rule-2); display: inline-flex; align-items: center; justify-content: center; }
.op-close-btn:hover { background: var(--surface-3); }
.op-close-btn svg { width: 24px; height: 24px; stroke: var(--ink); stroke-width: 2.6; }
/* В режиме перевода зазоры между Откуда/Сумма/Куда задаёт только стрелка —
убираем margin-bottom поля суммы, иначе снизу больше, чем сверху (задача #5). */
.field.op-field:has(+ #transfer-extra:not([hidden])) { margin-bottom: 0; }
/* Поле курса не задано — подсветка, что без него перевод не сохранится (#3). */
.transfer-fx.needs-rate { border-color: var(--warn); }
.transfer-fx.needs-rate .transfer-fx-label { color: var(--warn); }
/* Превью зачисляемой суммы в валюте получателя (#2). */
.transfer-conv { font-size: 12px; color: var(--ink-2); margin: 6px 2px 0;
font-variant-numeric: tabular-nums; }
/* Комментарий — многострочный (2 строки по умолчанию, растёт по содержимому). */
.op-input-wrap:has(textarea) { align-items: start; }
.op-input-wrap textarea {
border: none; background: transparent; padding: 0;
width: 100%; color: var(--ink); font: inherit; font-size: 16px;
resize: none; overflow: hidden; line-height: 1.4; min-height: 2.8em;
}
.op-input-wrap textarea:focus { box-shadow: none; background: transparent; }
/* Запас снизу под кнопку «Сохранить». Высокий потолок (98dvh) — у Перевода
блоков больше, чем у Расхода/Дохода, поэтому окну операции даём почти весь
экран, чтобы не резалось снизу. */
.sheet-op { padding-bottom: calc(24px + var(--safe-bottom)); max-height: 98dvh; }
/* При открытой модалке нижний навбар и FAB не должны просвечивать снизу. */
body.modal-open .bottom-nav,
body.modal-open .fab { display: none; }
/* Плавающие лейблы на рамке поля (Material outline, как Flutter). */
.sheet-op .op-field { position: relative; }
.sheet-op .op-field > label {
position: absolute;
top: 0; left: 12px;
transform: translateY(-50%);
z-index: 1;
padding: 0 5px;
background: var(--surface);
text-transform: none; letter-spacing: 0;
font-size: 12px; color: var(--ink-3); font-weight: 500;
pointer-events: none;
}
.sheet-op .op-field:focus-within > label { color: var(--brand-2); }
.kind-toggle {
display: grid;
grid-template-columns: 1fr 1fr;
background: var(--bg-soft);
border: 1px solid var(--rule);
border-radius: var(--r-md);
padding: 3px;
gap: 2px;
margin-bottom: 16px;
}
.kind-toggle button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border: none;
background: transparent;
border-radius: var(--r-sm);
padding: 11px 0;
font-size: 14px;
color: var(--ink-2);
font-weight: 600;
}
.kind-toggle .kind-check { display: none; width: 15px; height: 15px; stroke: var(--income-2); fill: none; stroke-width: 2.6; }
/* Активный сегмент — зелёный акцент + галочка (как Flutter, независимо от вида). */
.kind-toggle button.active {
background: color-mix(in srgb, var(--income-2) 14%, var(--surface-3));
color: var(--income-2);
box-shadow: var(--sh-edge);
}
.kind-toggle button.active .kind-check { display: inline-block; }
/* Поля листа: прозрачный outline-бокс + иконка слева + инпут (как Flutter). */
.op-input-wrap {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 12px;
background: transparent;
border: 1px solid var(--rule);
border-radius: 14px;
padding: 12px 13px;
min-height: 58px;
}
.op-input-wrap:focus-within { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
/* Категория-триггер в листе — тоже прозрачный outline. */
.sheet-op .cat-trigger { background: transparent; }
.sheet-op .cat-trigger:hover { background: transparent; border-color: var(--rule-2); }
.op-input-icon { width: 22px; height: 22px; stroke: var(--ink-3); fill: none; stroke-width: 1.7; }
.op-input-wrap input {
border: none; background: transparent; padding: 0;
min-height: auto; width: 100%;
color: var(--ink);
font-size: 16px;
}
.op-input-wrap input:focus { box-shadow: none; background: transparent; }
#amount {
font-family: var(--font-numeric);
font-size: 22px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
/* Умные суммы-чипы под полем «Сумма»: частые/последние суммы пользователя.
Горизонтальный ряд с прокруткой, тап задаёт сумму. */
.amount-chips {
display: flex;
gap: 8px;
margin-top: 10px;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
padding-bottom: 2px;
}
.amount-chips::-webkit-scrollbar { display: none; }
.amount-chips[hidden] { display: none; }
.amount-chip {
flex: 0 0 auto;
padding: 7px 13px;
border: 1px solid var(--rule-2, var(--rule));
border-radius: var(--r-pill);
background: var(--surface-2);
color: var(--ink-2);
font-family: var(--font-numeric);
font-variant-numeric: tabular-nums;
font-size: 13px;
font-weight: 600;
white-space: nowrap;
cursor: pointer;
transition: background var(--dur-2) var(--ease),
color var(--dur-2) var(--ease),
border-color var(--dur-2) var(--ease);
}
.amount-chip:hover {
background: var(--brand-tint);
border-color: color-mix(in srgb, var(--brand) 40%, transparent);
color: var(--brand);
}
.amount-chip:active { transform: scale(0.96); }
.amount-chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* Дата — безрамочная строка-триггер (как Flutter): иконка + дата + шеврон. */
/* .field.op-date-field — выше специфичность, чем у `.field{display:grid}`
(иначе дата и время встают в стопку). Дата слева, время рядом — как во Flutter. */
/* .field.op-date-field — выше специфичность, чем у `.field{display:grid}`
(иначе дата и время встают в стопку). Дата + время компактно в строку,
иконка вплотную к тексту — как во Flutter. */
.field.op-date-field { position: relative; display: flex; align-items: center; gap: 22px; }
.op-date-field .date-trigger-chev { display: none; }
.date-trigger {
display: inline-flex;
align-items: center;
gap: 12px;
flex: 0 1 auto;
min-width: 0;
background: transparent;
border: none;
border-radius: var(--r-md);
padding: 10px 2px;
min-height: 44px;
color: var(--ink);
text-align: left;
font: inherit;
touch-action: manipulation;
}
.date-trigger:hover { background: transparent; }
.date-trigger-cal { width: 22px; height: 22px; stroke: var(--ink-3); fill: none; stroke-width: 1.7; flex: 0 0 auto; }
.date-trigger-text { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.date-trigger-chev { width: 16px; height: 16px; stroke: var(--ink-3); fill: none; stroke-width: 2; }
.time-trigger {
display: inline-flex;
align-items: center;
gap: 8px;
flex: 0 0 auto;
background: transparent;
border: none;
border-radius: var(--r-md);
padding: 10px 4px;
min-height: 44px;
color: var(--ink);
font: inherit;
touch-action: manipulation;
}
.date-native {
position: absolute; left: 14px; bottom: 8px;
width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
/* П6: маркер обязательного поля — красная звёздочка */
.req-mark { color: var(--expense-2); margin-left: 2px; }
/* =========================================================
Material-пикеры даты/времени (паритет с Flutter)
========================================================= */
.picker-scrim {
position: fixed; inset: 0; z-index: 120;
background: rgba(1,4,9,.6);
display: flex; align-items: center; justify-content: center;
padding: 20px;
opacity: 0; transition: opacity .16s var(--ease, ease);
}
.picker-scrim.open { opacity: 1; }
/* Открытый лист-модалка, над которым показан пикер даты — прячем, чтобы он не
просвечивал сквозь полупрозрачный скрим пикера (пикер сам затемняет фон). */
.modal-scrim.under-picker { visibility: hidden; }
.picker-card {
width: 100%; max-width: 360px;
background: var(--surface-2);
border: 1px solid var(--rule);
border-radius: 24px;
padding: 18px 18px 12px;
box-shadow: 0 18px 50px rgba(0,0,0,.5);
transform: translateY(8px) scale(.98);
transition: transform .16s var(--ease, ease);
}
.picker-scrim.open .picker-card { transform: none; }
.picker-head-label { font-size: 13px; color: var(--ink-3); margin-bottom: 8px; }
.picker-actions {
display: flex; align-items: center; gap: 6px;
margin-top: 14px; justify-content: flex-end;
}
.picker-btn {
background: transparent; border: none; cursor: pointer;
color: var(--brand); font: inherit; font-weight: 600; font-size: 15px;
padding: 8px 14px; border-radius: var(--r-md);
}
.picker-btn:hover { background: var(--surface-3); }
.picker-icon-btn {
display: grid; place-items: center; width: 40px; height: 40px;
background: transparent; border: none; cursor: pointer; color: var(--ink-2);
border-radius: var(--r-md);
}
.picker-icon-btn:hover { background: var(--surface-3); }
.picker-icon-btn svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.tp-spacer { flex: 1; }
/* ---- DatePicker ---- */
.dp-head { border-bottom: 1px solid var(--rule); padding-bottom: 14px; margin-bottom: 10px; }
.dp-head-date { font-size: 30px; font-weight: 500; color: var(--ink); letter-spacing: -.5px; }
.dp-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.dp-month-btn {
display: inline-flex; align-items: center; gap: 4px;
background: transparent; border: none; cursor: pointer; color: var(--ink-2);
font: inherit; font-size: 14px; padding: 8px 4px; border-radius: var(--r-md);
}
.dp-month-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
.dp-arrows { display: flex; gap: 2px; }
.dp-arrows button {
display: grid; place-items: center; width: 38px; height: 38px;
background: transparent; border: none; cursor: pointer; color: var(--ink-2); border-radius: 999px;
}
.dp-arrows button:hover { background: var(--surface-3); }
.dp-arrows svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
.dp-weekdays, .dp-grid {
display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
}
.dp-weekdays span {
text-align: center; font-size: 12px; color: var(--ink-3); padding: 6px 0;
}
.dp-day {
aspect-ratio: 1; display: grid; place-items: center;
/* min-width:0 — иначе aspect-ratio у грид-элемента раздувает ширину сверх
1fr-колонки, и числа уезжают за правый край / не встают под дни недели. */
min-width: 0; width: 100%;
background: transparent; border: none; cursor: pointer;
color: var(--ink); font: inherit; font-size: 14px; border-radius: 999px;
}
.dp-day:hover { background: var(--surface-3); }
.dp-day.today { box-shadow: inset 0 0 0 1.5px var(--brand); color: var(--brand); }
.dp-day.selected { background: var(--brand); color: var(--brand-on); font-weight: 700; }
.dp-years { max-height: 280px; overflow-y: auto; display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; }
.dp-year {
padding: 12px 0; text-align: center; background: transparent; border: none; cursor: pointer;
color: var(--ink); font: inherit; font-size: 15px; border-radius: 999px;
}
.dp-year:hover { background: var(--surface-3); }
.dp-year.selected { background: var(--brand); color: var(--brand-on); font-weight: 700; }
/* ---- TimePicker ---- */
.tp-readout { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 4px 0 2px; }
.tp-seg {
min-width: 96px; padding: 8px 10px; border: none; cursor: pointer;
background: var(--surface-3); border-radius: var(--r-lg);
font: inherit; font-size: 44px; font-weight: 500; color: var(--ink);
font-variant-numeric: tabular-nums; line-height: 1.1;
}
.tp-seg.active { background: var(--brand-tint); color: var(--brand); }
.tp-colon { font-size: 40px; color: var(--ink-2); font-weight: 500; }
.tp-labels { display: flex; justify-content: center; gap: 96px; font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.tp-clock { width: 256px; max-width: 100%; margin: 14px auto 4px; touch-action: none; }
.tp-clock svg { width: 100%; height: auto; display: block; }
#tp-svg { background: var(--surface-3); border-radius: 999px; }
.tp-num { font-size: 15px; fill: var(--ink); font-family: inherit; }
.tp-num.sel { fill: var(--brand-on); font-weight: 700; }
#tp-hand { stroke: var(--brand); stroke-width: 2; }
#tp-hub { fill: var(--brand); }
#tp-knob { fill: var(--brand); }
.tp-actions { margin-top: 8px; }
.field { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.field label {
color: var(--ink-2);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.10em;
font-weight: 700;
}
.cat-trigger {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 12px;
width: 100%;
background: var(--surface-2);
border: 1px solid var(--rule);
border-radius: var(--r-md);
padding: 12px 14px;
color: var(--ink);
text-align: left;
font: inherit;
min-height: 48px;
touch-action: manipulation;
}
.cat-trigger:hover { background: var(--surface-3); }
.cat-trigger-text { font-size: 14px; }
.cat-trigger-chev { width: 16px; height: 16px; stroke: var(--ink-3); fill: none; stroke-width: 2; }
.chips {
display: flex; flex-wrap: wrap; gap: 6px;
margin-top: 4px;
}
.chip {
background: var(--surface-2);
border: 1px solid var(--rule);
color: var(--ink);
padding: 10px 14px;
min-height: 44px;
border-radius: var(--r-pill);
font-size: 13px;
cursor: pointer;
transition: background var(--dur-2) var(--ease),
border-color var(--dur-2) var(--ease),
color var(--dur-2) var(--ease);
touch-action: manipulation;
}
.chip:hover { background: var(--surface-3); }
.chip.active {
background: var(--brand-tint);
border-color: var(--brand);
color: var(--brand-2);
font-weight: 600;
}
.quick-dates { display: flex; gap: 6px; margin-top: 4px; }
.quick-dates button {
flex: 1;
background: var(--surface-2);
border: 1px solid var(--rule);
padding: 10px 8px;
font-size: 13px;
color: var(--ink-2);
border-radius: var(--r-md);
min-height: 40px;
touch-action: manipulation;
}
.quick-dates button:hover { color: var(--ink); }
.flash {
background: var(--income-tint);
color: var(--income-2);
padding: 10px 14px;
border-radius: var(--r-md);
border: 1px solid color-mix(in srgb, var(--income) 35%, transparent);
font-weight: 500;
font-size: 13px;
margin-top: 10px;
display: flex;
align-items: center;
gap: 10px;
}
.flash::before {
content: "";
width: 7px; height: 7px;
border-radius: 50%;
background: var(--income);
flex: 0 0 auto;
}
.flash.error {
background: var(--expense-tint);
color: var(--expense-2);
border-color: color-mix(in srgb, var(--expense) 35%, transparent);
}
.flash.error::before { background: var(--expense); }
/* Инлайн-валидация полей формы операции: красная подсветка САМОЙ ячейки поля +
подсказка прямо под ней. Заменяет нижний тост — тот уезжал под фиксированную
кнопку «Сохранить» и был не виден. */
.op-input-wrap.is-invalid,
.cat-trigger.is-invalid,
.acc-flow-card.is-invalid,
.transfer-fx.is-invalid {
border-color: var(--expense);
box-shadow: 0 0 0 1px var(--expense);
background: var(--expense-tint);
}
.field-err {
color: var(--expense-2);
font-size: 12.5px;
font-weight: 500;
margin-top: 6px;
display: flex;
align-items: center;
gap: 6px;
}
.field-err::before {
content: "";
width: 6px; height: 6px;
border-radius: 50%;
background: var(--expense);
flex: 0 0 auto;
}
/* =========================================================
17. TOAST
========================================================= */
.toast-host {
position: fixed;
left: 50%;
/* Выше навбара и FAB (+) — тост не должен перекрываться кнопкой добавления. */
bottom: calc(var(--nav-h) + var(--safe-bottom) + 88px);
transform: translateX(-50%);
z-index: 60;
pointer-events: none;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.toast {
pointer-events: auto;
display: inline-flex;
align-items: center;
gap: 12px;
max-width: min(92vw, 420px);
background: var(--surface-2);
color: var(--ink);
border: 1px solid var(--rule-3);
border-radius: var(--r-pill);
padding: 8px 8px 8px 10px;
font-size: 14px;
position: relative;
overflow: hidden;
box-shadow: 0 10px 30px rgba(1, 4, 9, 0.5);
}
/* Иконка-кружок успеха слева (premium-акцент). */
.toast .toast-ic {
flex: 0 0 auto;
width: 30px; height: 30px;
border-radius: var(--r-pill);
background: var(--brand-tint);
display: flex; align-items: center; justify-content: center;
}
.toast .toast-ic svg {
width: 17px; height: 17px;
fill: none; stroke: var(--brand);
stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}
/* Текст тоста — одной строкой (тексты короткие), без переноса в столбик. */
.toast .toast-text, .toast > span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 500;
}
/* Инфо-тост без иконки/кнопки — текст по центру, симметричные поля, до 2 строк
(не рвётся криво влево, #8). */
.toast.toast-info {
padding: 12px 18px;
justify-content: center;
}
.toast.toast-info .toast-text {
white-space: normal;
text-align: center;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-overflow: clip;
}
/* «Отменить» — компактная brand-ссылка в pill, не кричащая заливка. */
.toast .toast-btn, .toast button {
flex: 0 0 auto;
background: transparent;
color: var(--brand);
border: none;
border-radius: var(--r-pill);
padding: 8px 12px;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: background var(--dur-2) var(--ease);
}
.toast .toast-btn:hover, .toast button:hover { background: var(--brand-tint); }
.toast .progress {
position: absolute;
inset: auto 14px 3px 50px;
height: 2px;
background: color-mix(in srgb, var(--brand) 55%, transparent);
border-radius: var(--r-pill);
transform-origin: left;
animation: shrink 5s linear forwards;
}
@keyframes shrink { from { transform: scaleX(1); } to { transform: scaleX(0); } }
/* Тост ошибки — заметная красная обводка. */
.toast.toast-error {
background: var(--expense-tint);
color: var(--expense-2);
border-color: color-mix(in srgb, var(--expense) 40%, transparent);
padding: 10px 18px;
}
/* =========================================================
18. CAT SHEET
========================================================= */
.cat-sheet-head {
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
margin-bottom: var(--sp-4);
}
.cat-sheet-title-wrap {
display: flex; align-items: center; gap: 12px;
min-width: 0;
}
.cat-sheet-dot {
width: 12px; height: 12px;
border-radius: var(--r-pill);
background: var(--cat-color, var(--brand));
flex-shrink: 0;
}
.cat-sheet-head .cat-icon {
width: 32px;
height: 32px;
}
.cat-sheet-head h2 {
font-family: var(--font-display);
font-weight: 700;
font-size: 20px;
letter-spacing: -0.02em;
margin: 0;
line-height: 1.1;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cat-sheet-meta {
display: grid; gap: 6px;
padding: 16px;
background: var(--surface-2);
border: 1px solid var(--rule);
border-radius: var(--r-md);
margin-bottom: var(--sp-4);
}
.cat-sheet-num {
display: flex; align-items: baseline; gap: 6px;
font-family: var(--font-display);
font-weight: 700;
font-size: 28px;
letter-spacing: -0.03em;
line-height: 1;
font-variant-numeric: tabular-nums;
color: var(--ink);
}
.cat-sheet-num .cur {
font-family: var(--font-display);
font-weight: 600;
font-size: 18px;
color: var(--ink-3);
}
.cat-sheet-sub {
color: var(--ink-2);
font-size: 12px;
font-family: var(--font-numeric);
font-variant-numeric: tabular-nums;
display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline;
letter-spacing: 0.02em;
}
.cat-sheet-sub .dot-sep { color: var(--ink-4); }
.cat-sheet-list { gap: 0; }
.cat-sheet-list .tx-item {
grid-template-columns: 1fr auto;
gap: 10px;
padding: 12px 4px;
min-height: 44px;
}
.cat-sheet-list .tx-item .meta-col .name { font-size: 13px; }
.cat-sheet-list .tx-item .meta-col .sub { font-size: 11px; }
.cat-sheet-list .tx-item .amt { font-size: 13px; }
.cat-sheet-add {
width: 100%;
margin-top: 12px;
padding: 12px 14px;
display: flex; align-items: center; justify-content: center; gap: 8px;
background: transparent;
border: 1px dashed var(--rule-2);
color: var(--ink-2);
border-radius: var(--r-md);
font: inherit; font-size: 14px;
cursor: pointer;
min-height: 44px;
}
.cat-sheet-add:hover {
background: var(--surface-2); color: var(--ink);
border-color: var(--brand);
}
.cat-sheet-add svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.cat-sheet-list .tx-day { margin: 16px 4px 6px; }
/* =========================================================
19. CAT PICKER
========================================================= */
.cat-picker-scrim .sheet.sheet-full {
background: var(--bg);
display: grid;
grid-template-rows: auto 1fr auto;
}
.cat-picker-head {
display: grid;
grid-template-columns: 44px 1fr auto;
align-items: center;
gap: 12px;
padding: 0 0 12px;
border-bottom: 1px solid var(--rule);
margin-bottom: 14px;
}
.cat-picker-head h2 {
font-family: var(--font-display);
font-weight: 700;
font-size: 18px;
letter-spacing: -0.01em;
text-align: center;
margin: 0;
}
.cat-picker-kind {
font-size: 10px;
background: var(--expense-tint);
color: var(--expense-2);
border: 1px solid color-mix(in srgb, var(--expense) 35%, transparent);
padding: 2px 8px;
border-radius: var(--r-pill);
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 700;
}
/* Доход — зелёный чип (#6). */
.cat-picker-kind.income {
background: var(--income-tint);
color: var(--income-2);
border-color: color-mix(in srgb, var(--income) 35%, transparent);
}
/* Невидимый спейсер в шапке (баланс flex напротив кнопки закрытия) — чтобы
заголовок был по центру, без паразитной красной плашки cat-picker-kind. */
.cat-picker-spacer { width: 40px; flex: 0 0 auto; }
.cat-picker-body { overflow-y: auto; padding: 0 2px; }
/* Выбор категории — как в менеджере (#6/#7): сетка 4 в ряд, имя под иконкой. */
.cat-picker-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
padding-bottom: 8px;
}
@media (min-width: 640px) {
.cat-picker-grid { grid-template-columns: repeat(6, 1fr); }
}
/* Плитка категории в пикере: колонка «иконка сверху + имя снизу». */
.cat-picker-grid .cat-chip {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
min-width: 0;
width: 100%;
padding: 12px 6px;
min-height: 96px;
background: var(--surface);
border: 1px solid var(--rule);
border-radius: var(--r-md);
}
.cat-picker-grid .cat-chip:hover { background: var(--surface-2); border-color: var(--rule-2); }
.cat-picker-grid .cat-chip.selected { background: var(--brand-tint); border-color: var(--brand); }
.cat-picker-grid .cat-chip .cat-chip-name {
font-size: 11px;
line-height: 1.25;
text-align: center;
color: var(--ink-2);
letter-spacing: 0;
width: 100%;
overflow-wrap: normal;
word-break: normal;
hyphens: none;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.cat-picker-tile {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
padding: 12px 14px;
background: var(--surface);
border: 1px solid var(--rule);
border-radius: var(--r-md);
cursor: pointer;
height: auto;
min-height: 60px;
font: inherit;
color: var(--ink);
text-align: left;
touch-action: manipulation;
transition: background var(--dur-2) var(--ease),
border-color var(--dur-2) var(--ease),
transform var(--dur-1) var(--ease-press);
}
.cat-picker-tile:hover { background: var(--surface-2); border-color: var(--rule-2); }
.cat-picker-tile:active { transform: scale(0.97); }
.cat-picker-tile.selected {
background: var(--brand-tint);
border-color: var(--brand);
}
.cat-picker-tile .cat-icon {
background: var(--cat-color, var(--surface-2));
flex: 0 0 auto;
}
.cat-picker-tile .name {
font-size: 13px;
color: var(--ink-2);
line-height: 1.3;
letter-spacing: -0.005em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
flex: 1;
min-width: 0;
}
.cat-picker-tile.selected .name { color: var(--ink); font-weight: 600; }
.cat-picker-empty {
color: var(--ink-3);
font-size: 13px;
text-align: center;
padding: 24px 14px;
}
.cat-picker-foot {
display: grid;
grid-template-columns: 1fr 44px;
gap: 8px;
padding: 12px 0 0;
border-top: 1px solid var(--rule);
}
.cat-picker-foot input { min-height: 44px; }
.cat-picker-foot .primary {
padding: 0;
display: grid; place-items: center;
min-height: 44px;
border-radius: var(--r-md);
}
.cat-picker-foot .primary svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.4; }
.cat-picker-foot .primary[disabled] { opacity: 0.45; cursor: not-allowed; }
.cat-picker-hint {
grid-column: 1 / -1;
margin: 4px 0 0;
font-size: 11px;
color: var(--warn);
}
/* =========================================================
20. CATS-MGR + CAT EDIT
========================================================= */
.cats-mgr-head, .cat-edit-head {
display: grid;
grid-template-columns: 44px 1fr 44px;
}
/* Шапка менеджера категорий: кнопки и заголовок в одну линию + отступ до
вкладок Расходы/Доходы (image #5). */
.cats-mgr-head {
align-items: center;
gap: 12px;
padding: 0 0 12px;
margin-bottom: var(--sp-4);
border-bottom: 1px solid var(--rule);
}
/* В редактировании категории справа кнопка «Сохранить» — ей нужна своя ширина
(иначе при 44px её режет). Заголовок остаётся по центру за счёт 1fr. */
.cat-edit-head {
grid-template-columns: 44px 1fr auto;
align-items: center;
gap: 12px;
padding: 0 0 12px;
border-bottom: 1px solid var(--rule);
margin-bottom: var(--sp-4);
position: relative; /* якорь для абсолютно-центрированного заголовка (#4) */
}
/* Заголовок вынесен из потока (absolute), поэтому grid авто-размещает кнопки
не по своим колонкам (правая кнопка сползала в 1fr и растягивалась). Явно
закрепляем: назад/закрыть → колонка 1, действия/сохранить → колонка 3. */
.cat-edit-head > #cat-edit-back,
.cat-edit-head > #cat-create-close { grid-column: 1; justify-self: start; }
.cat-edit-head > .cat-edit-head-actions,
.cat-edit-head > .cat-edit-save { grid-column: 3; justify-self: end; }
/* Кластер действий справа: корзина + «Сохранить» (#5). */
.cat-edit-head-actions {
display: flex;
align-items: center;
gap: 8px;
}
/* Корзина в шапке (#5): всегда красная, справа. */
.cat-edit-trash svg { stroke: var(--expense-2, #f87171); }
.cat-edit-trash:hover { background: color-mix(in srgb, var(--expense-2, #f87171) 14%, transparent); }
/* «+» в шапке менеджера категорий (#1). */
.cats-mgr-add { justify-self: end; }
.cats-mgr-add svg { stroke: var(--brand); }
.cats-mgr-head h2, .cat-edit-head h2 {
font-family: var(--font-display);
font-weight: 700;
font-size: 18px;
letter-spacing: -0.01em;
text-align: center;
margin: 0;
overflow: hidden; text-overflow: ellipsis;
}
.cats-mgr-tabs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px;
padding: 3px;
background: var(--bg-soft);
border: 1px solid var(--rule);
border-radius: var(--r-md);
margin-bottom: var(--sp-4);
}
.cats-mgr-tabs button {
border: none;
background: transparent;
border-radius: var(--r-sm);
padding: 9px 0;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-3);
min-height: 38px;
}
.cats-mgr-tabs button.active {
background: var(--surface-3);
color: var(--brand);
font-weight: 700;
}
.cats-mgr-list {
list-style: none;
padding: 4px 2px 8px;
margin: 0;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 6px;
}
/* На узком телефоне 5 колонок рвут русские слова посреди («Путешест-вия»);
4 колонки — длинные слова влезают одной строкой. /critique P2. */
@media (max-width: 479px) {
.cats-mgr-list { grid-template-columns: repeat(4, 1fr); }
}
.cats-mgr-list > li { display: contents; }
.cats-mgr-list .cat-chip {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
margin: 0;
width: 100%;
/* без min-width:0 грид-плитка не сжимается ниже длины слова в имени —
при 5 колонках на телефоне это ломало сетку вправо за экран */
min-width: 0;
padding: 12px 6px;
min-height: 96px;
background: var(--surface);
border: 1px solid var(--rule);
border-radius: var(--r-md);
}
.cats-mgr-list .cat-chip:hover {
background: var(--surface-2);
border-color: var(--rule-2);
}
.cats-mgr-list .cat-chip .cat-chip-name {
font-size: 11px;
line-height: 1.25;
text-align: center;
color: var(--ink-2);
letter-spacing: 0;
width: 100%;
/* Перенос ТОЛЬКО по границам слов — без разрыва слова посреди
(«Корректир-овка»). fitCatChipNames() ужимает шрифт, пока длинное слово
не влезет в одну строку и всё имя — в ≤2 строки (#6). */
overflow-wrap: normal;
word-break: normal;
hyphens: none;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.cat-chip {
width: 100%;
display: grid;
grid-template-columns: 40px 1fr auto;
align-items: center;
gap: 12px;
padding: 10px 8px;
min-height: 56px;
background: transparent;
border: none;
border-radius: 0;
cursor: pointer;
font: inherit;
color: var(--ink);
text-align: left;
touch-action: manipulation;
}
.cat-chip:hover { background: var(--surface); }
.cat-chip .name,
.cat-chip .cat-chip-name { font-size: 16px; letter-spacing: -0.005em; }
.cat-chip .sub {
font-size: 11px; color: var(--ink-3);
font-family: var(--font-numeric);
letter-spacing: 0.02em;
}
.cat-chip svg.cat-chip-chev {
width: 16px; height: 16px;
stroke: var(--ink-3);
fill: none; stroke-width: 2;
}
/* Заголовок абсолютно центрирован по ширине экрана — не зависит от разной
ширины боковых кластеров (назад слева vs корзина+Сохранить справа), из-за
которой в grid 1fr он уезжал влево (#4). Вертикаль — по строке кнопок
(top:0…bottom:12px = высота ряда без padding-bottom). Клики проходят к
кнопкам под ним (pointer-events:none). */
.cat-edit-title-wrap {
position: absolute;
left: 0; right: 0; top: 0; bottom: 12px;
display: flex; flex-direction: column;
justify-content: center; align-items: center;
gap: 2px;
padding: 0 100px;
pointer-events: none;
z-index: 0;
}
.cat-edit-title-wrap h2 {
font-size: 17px;
max-width: 100%;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cat-edit-kind {
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--brand);
font-weight: 700;
/* h2 в шапке выровнен по центру — бейдж типа под ним тоже */
text-align: center;
}
/* Чип «Тип» в теле (фиксированный, цветной): расход красный / доход зелёный.
Заменил заголовок+тип в шапке — убрал наезд «Сохранить» и обрезание имени. */
.cat-kind-chip {
display: inline-block;
align-self: flex-start;
/* Секция — grid, поэтому без justify-self:start чип растягивался на всю
ширину. Ужимаем до содержимого — «РАСХОД» одной строкой. */
justify-self: start;
width: fit-content;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 5px 12px;
border-radius: var(--r-pill);
background: var(--expense-tint);
color: var(--expense-2);
border: 1px solid color-mix(in srgb, var(--expense) 35%, transparent);
}
.cat-kind-chip.income {
background: var(--income-tint);
color: var(--income-2);
border-color: color-mix(in srgb, var(--income) 35%, transparent);
}
.cat-edit-save { padding: 10px 16px; font-size: 13px; min-height: 40px; }
/* Нет изменений → кнопку «Сохранить» прячем (место сохраняем), появляется при правке. */
.cat-edit-save[disabled] { visibility: hidden; }
.cat-edit-preview { display: grid; place-items: center; padding: var(--sp-5) 0 var(--sp-6); }
.cat-edit-section {
display: grid;
gap: var(--sp-3);
padding-bottom: var(--sp-5);
border-bottom: 1px solid var(--rule);
margin-bottom: var(--sp-5);
}
.cat-edit-section:last-child { border-bottom: none; margin-bottom: 0; }
/* Тип/Название/Лимит — лейбл и поле в ОДНУ строку (лейбл слева, поле справа). */
.cat-edit-row {
grid-template-columns: auto 1fr;
align-items: center;
column-gap: 14px;
row-gap: 6px;
}
.cat-edit-row > .cat-edit-h { margin: 0; white-space: nowrap; }
.cat-edit-row > .cat-kind-chip,
.cat-edit-row > .limit-field { justify-self: end; }
.cat-edit-row > .cat-create-name { margin: 0; }
/* Подсказка валидности — на всю ширину под полем, не в строке лейбла. */
.cat-edit-row > .cat-picker-hint { grid-column: 1 / -1; margin: 0; }
.cat-edit-h {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--ink-2);
font-weight: 700;
margin: 0;
}
.cat-edit-palette {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 8px;
}
.cat-color-swatch {
width: 100%; aspect-ratio: 1 / 1;
background: var(--swatch-color, var(--brand));
border-radius: var(--r-md);
cursor: pointer;
position: relative;
border: 2px solid var(--rule-2);
padding: 0;
display: grid; place-items: center;
transition: transform var(--dur-1) var(--ease-press),
border-color var(--dur-2) var(--ease);
touch-action: manipulation;
}
.cat-color-swatch:hover { transform: scale(1.07); }
.cat-color-swatch:active { transform: scale(0.94); }
.cat-color-swatch.selected {
border-color: var(--ink);
box-shadow: 0 0 0 2px var(--bg);
}
.cat-color-swatch svg {
width: 18px; height: 18px;
stroke: var(--on-accent);
stroke-width: 2.4;
fill: none;
opacity: 0;
transition: opacity var(--dur-2) var(--ease);
}
.cat-color-swatch.selected svg { opacity: 1; }
.cat-edit-shades-btn {
width: 100%;
display: grid;
grid-template-columns: 18px 1fr 16px;
gap: 10px;
align-items: center;
padding: 12px 14px;
min-height: 44px;
background: var(--surface-2);
border: 1px solid var(--rule);
border-radius: var(--r-md);
color: var(--ink-2);
font: inherit;
font-size: 13px;
cursor: pointer;
}
.cat-edit-shades-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.cat-edit-shades-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.cat-edit-shades-btn svg.chev {
width: 14px; height: 14px;
transition: transform var(--dur-2) var(--ease);
}
.cat-edit-shades-btn[aria-expanded="true"] svg.chev { transform: rotate(90deg); }
.cat-edit-shades-btn[aria-expanded="true"] {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.cat-edit-icons {
display: block;
}
.cat-icon-tile {
width: 100%; aspect-ratio: 1 / 1;
background: var(--surface);
border: 1px solid var(--rule);
border-radius: var(--r-md);
cursor: pointer;
position: relative;
overflow: hidden;
display: grid; place-items: center;
transition: background var(--dur-2) var(--ease),
border-color var(--dur-2) var(--ease),
transform var(--dur-1) var(--ease-press);
touch-action: manipulation;
}
.cat-icon-tile::before {
content: "";
position: absolute; inset: 0;
background: var(--ink-2);
-webkit-mask: var(--cat-icon-url) no-repeat center / 60%;
mask: var(--cat-icon-url) no-repeat center / 60%;
}
.cat-icon-tile:hover { border-color: var(--rule-2); }
.cat-icon-tile:active { transform: scale(0.94); }
.cat-icon-tile.selected {
background: var(--cat-color, var(--brand));
border-color: var(--cat-color, var(--brand));
}
.cat-icon-tile.selected::before { background: var(--bg); }
/* П16: усиленный фокус на иконках категорий — 3px + box-shadow для контраста */
.cat-icon-tile:focus-visible {
outline: 3px solid var(--brand);
outline-offset: 2px;
box-shadow: 0 0 0 5px var(--brand-tint);
}
/* Создание категории: имя, палитра, иконки по группам */
.cat-create-name {
width: 100%;
background: var(--surface);
border: 1px solid var(--rule);
border-radius: var(--r-md);
color: var(--ink);
padding: 10px 12px;
font-size: 15px;
}
.cat-create-name:focus { outline: none; border-color: var(--brand); }
.cat-create-hint-inline { font-weight: 400; color: var(--ink-3); font-size: 12px; }
.cat-create-palette { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-pal-swatch {
width: 34px; height: 34px;
border-radius: 50%;
border: 2px solid var(--rule-2);
cursor: pointer;
padding: 0;
touch-action: manipulation;
}
.cat-pal-swatch.selected {
border-color: var(--ink);
box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ink);
}
.cat-create-group-title {
font-size: 12px;
color: var(--ink-3);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
margin: var(--sp-4) 0 var(--sp-2);
}
.cat-create-group-title:first-child { margin-top: 0; }
.cat-create-icons-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 8px;
}
/* --- Двухуровневый пикер иконок (#3): группы → иконки группы + назад --- */
.cat-icon-picker { display: block; }
.cat-icon-groups {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
/* Плитка группы: превью-иконка + название темы (как карточка категории). */
.cat-icon-group {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
min-width: 0;
padding: 12px 6px;
min-height: 96px;
background: var(--surface);
border: 1px solid var(--rule);
border-radius: var(--r-md);
cursor: pointer;
color: var(--ink);
font: inherit;
touch-action: manipulation;
transition: background var(--dur-2) var(--ease),
border-color var(--dur-2) var(--ease),
transform var(--dur-1) var(--ease-press);
}
.cat-icon-group:hover { background: var(--surface-2); border-color: var(--rule-2); }
.cat-icon-group:active { transform: scale(0.97); }
.cat-icon-group.selected { background: var(--brand-tint); border-color: var(--brand); }
.cat-icon-group-name {
font-size: 11px;
line-height: 1.25;
text-align: center;
color: var(--ink-2);
width: 100%;
overflow-wrap: normal;
word-break: normal;
hyphens: none;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Кнопка возврата к списку групп — строка «‹ Название темы». */
.cat-icon-group-back {
width: 100%;
display: flex;
align-items: center;
gap: 8px;
padding: 10px 6px 12px;
margin-bottom: 4px;
background: transparent;
border: none;
border-bottom: 1px solid var(--rule);
color: var(--ink);
font: inherit;
font-weight: 700;
font-size: 14px;
cursor: pointer;
touch-action: manipulation;
}
.cat-icon-group-back svg {
width: 20px; height: 20px;
stroke: var(--brand); fill: none; stroke-width: 2;
flex: 0 0 auto;
}
.cat-icon-group-back:hover span { color: var(--brand); }
.cat-icon-group-view { display: block; }
.cat-edit-empty {
text-align: center; color: var(--ink-3); padding: 24px 14px; font-size: 13px;
}
.cat-edit-delete-section {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.cat-edit-delete-btn {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 48px;
padding: 12px 16px;
background: transparent;
border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent);
border-radius: var(--r-md);
color: var(--danger);
font: inherit;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background var(--dur-2) var(--ease),
border-color var(--dur-2) var(--ease);
}
.cat-edit-delete-btn svg {
width: 18px; height: 18px;
stroke: currentColor; fill: none; stroke-width: 1.8;
flex-shrink: 0;
}
.cat-edit-delete-btn:hover {
background: var(--expense-tint, color-mix(in srgb, var(--danger) 10%, transparent));
border-color: color-mix(in srgb, var(--danger) 60%, transparent);
}
.cat-edit-delete-btn:active { filter: brightness(0.94); }
/* Confirm sheet — operations list */
/* Премиум-confirm — паритет с Flutter showDangerConfirm:
круг-иконка expense-tint, центрированные заголовок/текст, кнопки в ряд. */
.confirm-card { text-align: center; }
.confirm-icon {
display: flex;
align-items: center;
justify-content: center;
width: 56px; height: 56px;
margin: 4px auto 16px;
border-radius: var(--r-pill);
background: var(--expense-tint);
}
.confirm-icon svg {
width: 26px; height: 26px;
fill: none;
stroke: var(--expense-2, var(--expense));
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.confirm-card h2 {
font-size: 18px;
font-weight: 700;
margin: 0 0 6px;
color: var(--ink);
}
.confirm-text {
font-size: 13px;
line-height: 1.5;
color: var(--ink-3);
margin: 0 0 20px;
white-space: pre-line; /* многострочная сводка операции (дата/время/коммент) */
}
/* Первая строка сводки (категория · сумма) — акцентнее остального. */
.confirm-text { font-weight: 500; }
.confirm-text:empty { display: none; }
.confirm-actions {
display: flex;
gap: 12px;
margin-top: 4px;
}
.confirm-btn {
flex: 1;
padding: 14px 0;
border: none;
border-radius: var(--r-md);
font: inherit;
font-weight: 600;
cursor: pointer;
transition: filter var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.confirm-btn.cancel { background: var(--surface-2); color: var(--ink-2); }
.confirm-btn.cancel:hover { background: var(--surface-3); }
.confirm-btn.danger { background: var(--expense); color: #fff; font-weight: 700; }
.confirm-btn.danger:hover { filter: brightness(1.06); }
.confirm-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* Когда показан список операций (удаление категории) — текст слева, не центр. */
.confirm-card .confirm-list { text-align: left; }
.confirm-list {
list-style: none;
margin: 0 0 16px;
padding: 0;
max-height: 220px;
overflow-y: auto;
border: 1px solid var(--rule);
border-radius: var(--r-md);
background: var(--surface-2);
}
.confirm-list-item {
display: flex;
gap: 8px;
align-items: baseline;
padding: 8px 12px;
font-size: 13px;
border-bottom: 1px solid var(--rule);
}
.confirm-list-item:last-child { border-bottom: none; }
.confirm-list-item .cli-date {
color: var(--ink-3);
white-space: nowrap;
flex-shrink: 0;
font-size: 12px;
}
.confirm-list-item .cli-amt {
color: var(--expense, var(--danger));
white-space: nowrap;
flex-shrink: 0;
font-weight: 600;
}
.confirm-list-item .cli-comment {
color: var(--ink-2);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
/* Shades — инлайн-панель внутри секции «Цвет» редактора категории */
.shades-fam {
font-family: var(--font-ui);
font-size: 11px;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--ink-3);
font-weight: 600;
margin-left: 8px;
}
.shades-panel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows var(--dur-3) var(--ease);
}
.shades-panel[hidden] { display: grid; }
.shades-panel.open { grid-template-rows: 1fr; }
.shades-panel-inner {
overflow: hidden;
min-height: 0;
}
.shades-grid-49 {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
padding: 12px;
background: var(--surface-2);
border: 1px solid var(--rule);
border-top: none;
border-radius: 0 0 var(--r-md) var(--r-md);
}
.shades-grid-49 .cat-color-swatch { aspect-ratio: 1 / 1; }
@media (prefers-reduced-motion: reduce) {
.shades-panel { transition: none; }
}
/* =========================================================
21. CAT SUGGEST
========================================================= */
.cat-input-wrap { position: relative; }
.cat-suggest {
position: absolute;
top: calc(100% + 4px);
left: 0; right: 0;
z-index: 5;
margin: 0; padding: 4px;
list-style: none;
background: var(--surface);
border: 1px solid var(--rule-2);
border-radius: var(--r-md);
max-height: 220px;
overflow-y: auto;
box-shadow: var(--sh-edge-2);
}
.cat-suggest li {
padding: 10px 12px;
border-radius: var(--r-sm);
font-size: 14px;
cursor: pointer;
color: var(--ink);
display: flex; align-items: center; gap: 8px;
min-height: 44px;
}
.cat-suggest li mark {
background: transparent;
color: var(--brand);
font-weight: 700;
padding: 0;
}
.cat-suggest li:hover,
.cat-suggest li[aria-selected="true"] {
background: var(--surface-2);
}
/* =========================================================
22. ANALYSIS TAB
========================================================= */
.ana-hero {
display: grid;
gap: var(--sp-4);
padding: 4px 0;
}
.ana-hero-headline {
background: var(--surface);
border: 1px solid var(--rule);
border-radius: var(--r-xl);
padding: 16px;
display: grid;
gap: 6px;
}
.ana-hero-headline .hero-amount { margin: 4px 0 0; }
.ana-hero-headline .hero-amount .num { font-size: clamp(30px, 8vw, 42px); }
.ana-hero-headline .hero-lbl { color: var(--ink-2); }
.hero-meta {
display: flex; gap: 14px;
flex-wrap: wrap;
font-size: 12px;
color: var(--ink-2);
margin-top: 4px;
padding-top: 10px;
border-top: 1px solid var(--rule);
font-family: var(--font-numeric);
}
.hero-meta b {
color: var(--ink);
font-weight: 600;
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
.hero-meta .sep { color: var(--ink-4); }
.hero-meta .dim { color: var(--ink-3); }
/* KPI-сетка «Анализа» — двухуровневая иерархия, в отличие от плоского
inline-ряда «Обзора»: 2 ключевые метрики крупно, 4 — компактной плиткой. */
.ana-hero-kpis {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.ana-kpi {
background: var(--surface);
border: 1px solid var(--rule);
border-radius: var(--r-md);
padding: 12px 14px;
display: grid;
gap: 4px;
}
.ana-kpi .lbl {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--ink-2);
font-weight: 700;
}
.ana-kpi .val {
font-family: var(--font-numeric);
font-weight: 700;
font-size: clamp(18px, 5.2vw, 23px);
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
color: var(--ink);
}
.ana-kpi .sub {
font-size: 11px;
color: var(--ink-3);
font-family: var(--font-numeric);
letter-spacing: 0.02em;
}
/* Акцентная плашка «Средний» — зелёная подложка (как ключевая метрика Flutter).
Все 4 плашки вертикальные в сетке 2×2 (паритет с Flutter _KpiGrid). */
.ana-kpi.is-accent {
background:
linear-gradient(180deg, var(--brand-tint), transparent 80%),
var(--surface);
border-color: color-mix(in srgb, var(--brand-edge) 60%, var(--rule-2));
box-shadow: var(--sh-edge);
}
.ana-kpi.is-accent .lbl { color: var(--brand-2); }
/* PRO-вариант плашки — фиолетовый акцент (платный набор «Статистика периода»). */
.ana-kpi.is-pro {
background:
linear-gradient(180deg, var(--pro-tint), transparent 80%),
var(--surface);
border-color: var(--pro-edge);
box-shadow: var(--sh-edge);
}
.ana-kpi.is-pro .lbl { color: var(--pro-2); }
/* Заголовок набора «Статистика периода» с PRO-бейджем + отступ от блока выше. */
.ana-stats-kpis { margin-top: var(--sp-5); }
.ana-stats-kpis .ana-stats-head {
display: flex; align-items: center; gap: 8px; margin: 0;
}
.pro-badge {
display: inline-block;
font-size: 9px;
font-weight: 800;
letter-spacing: 0.06em;
padding: 2px 7px;
border-radius: 999px;
background: var(--pro);
color: var(--pro-on);
vertical-align: middle;
}
.ana-hero-trend {
padding: 12px 14px;
background: var(--surface);
border: 1px solid var(--rule);
border-radius: var(--r-md);
}
.ana-hero-trend-head {
display: flex; justify-content: space-between; align-items: baseline;
margin-bottom: 6px;
}
.ana-trend-line { color: var(--ink-2); font-size: 13px; line-height: 1.5; }
.ana-card {
background: var(--surface);
border: 1px solid color-mix(in srgb, var(--rule-2) 70%, transparent);
border-radius: var(--r-xl);
padding: var(--sp-4);
}
.ana-card.scrollable {
max-height: none;
display: grid;
grid-template-rows: auto minmax(0, 1fr);
overflow: hidden;
padding: 0;
}
.ana-card.scrollable .ana-card-head {
padding: 14px 16px 10px;
border-bottom: 1px solid var(--rule);
margin: 0;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
.ana-card.scrollable .ana-scroll-body {
overflow-y: visible;
padding: 12px 16px 14px;
}
@media (min-width: 1024px) {
.ana-card.scrollable {
max-height: clamp(380px, 62vh, 720px);
}
.ana-card.scrollable .ana-scroll-body {
overflow-y: auto;
}
}
.ana-card-head h2 {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--ink-2);
font-weight: 700;
margin: 0;
}
.ana-bars { display: grid; gap: 10px; }
.ana-bar-row {
display: grid;
gap: 4px;
}
.ana-bar-head {
display: grid;
grid-template-columns: 32px 1fr auto;
gap: 10px;
align-items: center;
font-size: 13px;
}
.ana-bar-head .cat-icon { flex: 0 0 auto; }
.ana-bar-head .name {
font-size: 14px;
font-weight: 500;
color: var(--ink);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
min-width: 0;
}
.ana-bar-head .amt {
font-family: var(--font-numeric);
font-weight: 600;
font-variant-numeric: tabular-nums;
font-size: 13px;
color: var(--ink);
letter-spacing: -0.01em;
white-space: nowrap;
}
.ana-bar-track {
height: 4px;
background: var(--surface-2);
border-radius: var(--r-pill);
overflow: hidden;
margin-left: 42px;
}
.ana-bar-fill {
height: 100%;
border-radius: var(--r-pill);
transition: width 500ms var(--ease);
}
.ana-bar-meta {
display: flex;
gap: 10px;
margin-left: 42px;
font-size: 11px;
color: var(--ink-3);
font-family: var(--font-numeric);
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
margin-top: 2px;
}
.ana-bar-meta b {
color: var(--ink-2);
font-weight: 600;
}
.ana-bar {
display: grid;
grid-template-columns: 32px 1fr auto;
gap: 12px;
align-items: center;
font-size: 13px;
padding: 4px 0;
}
.ana-bar .cat-icon { background: var(--cat-color, var(--brand)); }
.ana-bar .body {
display: grid;
gap: 4px;
min-width: 0;
}
.ana-bar .name {
display: flex;
justify-content: space-between;
align-items: baseline;
font-size: 14px;
color: var(--ink);
font-weight: 500;
overflow: hidden;
min-width: 0;
}
.ana-bar .track {
height: 4px;
background: var(--surface-2);
border-radius: var(--r-pill);
overflow: hidden;
}
.ana-bar .fill {
height: 100%;
background: var(--cat-color, var(--brand));
border-radius: var(--r-pill);
transition: width 500ms var(--ease);
}
.ana-bar .num {
font-family: var(--font-numeric);
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--ink);
}
.ana-top-list {
list-style: none;
padding: 0; margin: 0;
display: grid; gap: 0;
}
/* Тот же паттерн, что у «Топ категорий»: иконка+имя+сумма — центрированный
верхний ряд, описание уходит строкой ниже под именем. Иконка центрируется
относительно имени, а не относительно стопки имя+описание. */
.ana-top-list li {
padding: 12px 0;
border-bottom: 1px solid var(--rule);
display: grid;
grid-template-columns: 40px 1fr auto;
grid-template-areas:
"icon name amt"
". sub .";
column-gap: 10px;
row-gap: 2px;
align-items: center;
min-height: 44px;
}
.ana-top-list li > .cat-icon { grid-area: icon; }
.ana-top-list li > .name { grid-area: name; }
.ana-top-list li > .amt { grid-area: amt; }
.ana-top-list li > .sub { grid-area: sub; }
.ana-top-list li:last-child { border-bottom: none; }
/* П5: фокус-индикатор для фокусируемых строк топ-расходов */
.ana-top-list li:focus-visible {
outline: 2px solid var(--brand);
outline-offset: -2px;
border-radius: var(--r-sm);
background: var(--brand-tint);
}
.ana-top-list .rank {
font-family: var(--font-numeric);
font-size: 11px;
color: var(--ink-4);
font-weight: 700;
text-align: right;
}
.ana-top-list .name {
font-size: 14px;
font-weight: 500;
color: var(--ink);
min-width: 0;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ana-top-list .sub {
font-size: 11px; color: var(--ink-3);
font-family: var(--font-numeric);
font-variant-numeric: tabular-nums;
min-width: 0;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ana-top-list .amt {
font-family: var(--font-numeric);
font-weight: 600;
font-variant-numeric: tabular-nums;
font-size: 13px;
color: var(--expense-2);
white-space: nowrap;
text-align: right;
}
.ana-top-list .num {
font-family: var(--font-numeric);
font-weight: 600;
font-variant-numeric: tabular-nums;
font-size: 13px;
color: var(--expense-2);
}
.ana-yoy { display: grid; gap: 10px; }
.ana-yoy-legend {
font-size: 11px;
line-height: 1.4;
margin: 0 0 4px;
}
.ana-yoy-totals {
display: grid;
gap: 6px;
margin: 0 0 8px;
padding-bottom: 10px;
border-bottom: 1px solid var(--rule);
}
.ana-yoy-totals > div {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
font-family: var(--font-numeric);
font-size: 13px;
font-variant-numeric: tabular-nums;
}
.ana-yoy-totals > div .dim { font-size: 12px; }
.ana-yoy-totals > div b { font-weight: 700; color: var(--ink); }
.ana-yoy-totals .d {
justify-content: flex-start;
margin-top: 2px;
}
.ana-yoy .row {
display: grid;
grid-template-columns: 1fr;
gap: 6px;
padding: 10px 0;
border-bottom: 1px solid var(--rule);
}
.ana-yoy .row:last-child { border-bottom: none; }
.ana-yoy .name { font-size: 13px; color: var(--ink); }
.ana-yoy .pair {
display: grid;
grid-template-columns: 1fr auto auto;
align-items: center;
gap: 8px;
font-size: 12px;
font-family: var(--font-numeric);
}
.ana-yoy .vals { color: var(--ink-2); }
.ana-yoy .delta { font-size: 11px; }
/* Dynamic yoy rows (JS-rendered: ana-yoy-row) */
.ana-yoy-row {
display: grid;
grid-template-columns: 32px 1fr auto auto;
gap: 10px;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid var(--rule);
min-height: 44px;
}
.ana-yoy-row:last-child { border-bottom: none; }
.ana-yoy-name {
font-size: 14px;
font-weight: 500;
color: var(--ink);
min-width: 0;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ana-yoy-vals {
display: grid;
gap: 1px;
text-align: right;
font-family: var(--font-numeric);
font-size: 12px;
font-variant-numeric: tabular-nums;
}
.ana-yoy-vals .cur {
font-weight: 600;
color: var(--ink);
letter-spacing: -0.01em;
}
.ana-yoy-vals .dim { color: var(--ink-3); }
.ana-yoy-d .ana-pill {
display: inline-flex;
align-items: center;
padding: 2px 7px;
border-radius: var(--r-pill);
font-size: 11px;
font-weight: 700;
font-family: var(--font-numeric);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.ana-pill.up {
background: color-mix(in srgb, var(--expense) 18%, transparent);
color: var(--expense-2);
}
.ana-pill.down {
background: color-mix(in srgb, var(--income) 18%, transparent);
color: var(--income-2);
}
.ana-pill.flat {
background: var(--surface-2);
color: var(--ink-3);
}
.yoy-picker {
display: flex; align-items: center; gap: 8px;
}
.yoy-label {
font-size: 11px;
color: var(--ink-2);
font-family: var(--font-numeric);
letter-spacing: 0.02em;
min-width: 110px;
text-align: center;
}
.yoy-picker .icon-btn { width: 36px; height: 36px; }
/* На desktop карточки Анализа стоят в 2–3 колонки и заметно уже —
имена категорий и подписи переносим, а не обрезаем многоточием. */
@media (min-width: 1024px) {
/* Строки «Год к году» центрируют иконку относительно текста — как
«Топ категорий»; раньше align-items: start уводил имя выше центра. */
.ana-yoy-name {
white-space: normal;
overflow: visible;
text-overflow: clip;
line-height: 1.25;
}
.ana-top-list .sub {
white-space: normal;
overflow: visible;
text-overflow: clip;
line-height: 1.35;
}
}
/* =========================================================
23. PLANNING TAB
========================================================= */
/* KPI-сводка: 3 отдельные карточки в ряд (паритет с Flutter). */
.plan-summary {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.plan-sum-kpi {
background: var(--surface);
border: 1px solid var(--rule);
border-radius: var(--r-lg);
padding: 12px 14px;
display: grid;
grid-template-columns: 1fr;
align-content: start;
gap: 3px;
min-width: 0;
}
.plan-sum-kpi .lbl {
font-size: 12px;
color: var(--ink-2);
font-weight: 500;
}
.plan-sum-kpi .val {
font-family: var(--font-numeric);
font-weight: 700;
font-size: clamp(14px, 4.2vw, 17px);
font-variant-numeric: tabular-nums;
color: var(--ink);
letter-spacing: -0.02em;
white-space: nowrap;
}
.plan-sum-kpi .val.val-long { font-size: clamp(10px, 3vw, 13px); }
.plan-sum-kpi.closed .val { color: var(--income-2); }
.plan-sum-kpi.remaining .val { color: var(--brand); }
/* Долги: «Мне должны» зелёным (как доход), «Я должен» красным (как расход).
После .remaining — перебивает brand у «Я должен» по порядку (равная специфичность). */
.plan-sum-kpi .val.income { color: var(--income-2); }
.plan-sum-kpi .val.expense { color: var(--expense-2); }
.plan-sum-kpi .sub {
font-size: 11px;
color: var(--ink-3);
font-family: var(--font-numeric);
/* Резервируем строку подписи всегда (даже пустую) — чтобы плашки в ряду были
одинаковой высоты, когда у части нет подписи (напр. «Осталось»/«Оплачено»). */
min-height: 14px;
}
/* Пустую подпись скрываем — не оставляет «воздух» под значением. */
.plan-sum-kpi .sub:empty { display: none; min-height: 0; }
/* Платежи: сводка из 2 KPI + группы (Разовые / Подписки) */
.pay-summary { grid-template-columns: repeat(2, 1fr); }
/* «Регулярные»: крупнее значение, меньше пустоты снизу (фидбэк #13). */
.pay-summary .plan-sum-kpi .val { font-size: clamp(16px, 4.6vw, 20px); }
.pay-group { display: grid; gap: 10px; }
.pay-group + .pay-group { margin-top: var(--sp-5); }
/* Отступ между KPI-плашками и заголовком группы / следующей сводкой,
чтобы «РАЗОВЫЕ»/«ПОДПИСКИ» не липли к плашкам. */
.pay-summary + .pay-group { margin-top: var(--sp-5); }
.pay-group + .pay-summary { margin-top: var(--sp-5); }
.pay-group-head {
display: flex;
align-items: baseline;
gap: 8px;
padding: 0 2px;
}
.pay-group-title {
font-size: 13px;
font-weight: 700;
color: var(--ink-2);
text-transform: uppercase;
letter-spacing: 0.04em;
margin: 0;
}
.pay-group-sub {
font-size: 12px;
color: var(--ink-3);
font-family: var(--font-numeric);
}
/* KPI-плашки Платежей (Разовые/Регулярные) — как в Планах/Целях: данные слева
(без центрирования), такой же отступ до карточки ниже (см. grid gap:20px). */
/* Кастомные триггеры мета-строки Платежей (дата/категория/период) — кнопки
в стиле формы операции вместо нативных /