, и на */
height:8px;width:100%;
border-radius:var(--r-full);
background:var(--bg-sunken);
overflow:hidden;
}
.progress--lg{height:12px}
.progress__fill{
display:block;height:100%;
width:clamp(0%,calc(var(--p) * 1%),100%);
min-width:0;
border-radius:inherit;
background:var(--accent);
transition:width var(--dur-roll) var(--ease-out),background-color var(--dur-base) var(--ease-out);
}
.progress[data-status="warning"] .progress__fill,
.progress[data-status="serious"] .progress__fill{background:var(--heat-mid)}
.progress[data-status="critical"] .progress__fill,
.progress.is-over .progress__fill{
width:100%;
background-color:var(--expense);
background-image:var(--hatch);
background-size:auto;
}
/* Риска темпа. Элемент рендерится ТОЛЬКО когда темп осмыслен (см. контракт вверху). */
.progress__pace{
position:absolute;top:-2px;bottom:-2px;
left:clamp(0%,calc(var(--pace) * 1%),100%);
width:2px;margin-left:-1px;
background:var(--fg-faint);
border-radius:var(--r-full);
opacity:.85;
transition:left var(--dur-roll) var(--ease-out);
}
/* ── 10. СЧЕТА (обзор) ─────────────────────────────────────────────────── */
#accounts-rail{
display:flex;gap:var(--sp-3);
overflow-x:auto;overflow-y:hidden;
scroll-snap-type:x proximity;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
padding:var(--sp-1) var(--pad-x) var(--sp-3);
margin-inline:calc(var(--pad-x) * -1);
}
#accounts-rail::-webkit-scrollbar{display:none}
.acct-card{
--tc:var(--c,var(--cat-color,var(--cat-tech)));
position:relative;flex:0 0 auto;
width:162px;min-height:104px;
display:flex;flex-direction:column;justify-content:space-between;gap:var(--sp-3);
padding:var(--sp-4);
border-radius:var(--r-lg);
background:var(--bg-surface);
box-shadow:var(--shadow-1);
scroll-snap-align:start;
overflow:hidden;
text-align:start;
transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);
}
.acct-card::before{
content:"";position:absolute;inset:0 auto 0 0;width:3px;
background:var(--tc);opacity:.9;
}
.acct-card::after{
content:"";position:absolute;right:-34px;top:-34px;width:88px;height:88px;border-radius:50%;
background:radial-gradient(closest-side,color-mix(in oklab,var(--tc) 20%,transparent),transparent 72%);
pointer-events:none;
}
.acct-card:active{transform:scale(.98)}
.acct-card svg{width:19px;height:19px;color:var(--tc)}
.acct-card b{
display:block;font-size:var(--fs-sm);font-weight:600;color:var(--fg-muted);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.acct-card .num{font-size:var(--fs-num-lg);letter-spacing:-.025em}
.acct-card small{font-size:var(--fs-xs);color:var(--fg-faint);font-weight:500}
.acct-card--add{
background:transparent;
box-shadow:none;
outline:1.5px dashed var(--stroke-strong);outline-offset:-1.5px;
border-radius:var(--r-lg);
align-items:center;justify-content:center;
color:var(--fg-faint);
gap:var(--sp-2);
}
.acct-card--add::before,.acct-card--add::after{display:none}
.acct-card--add svg{width:22px;height:22px;color:var(--fg-faint)}
.acct-card--add:hover{outline-color:var(--accent);color:var(--accent)}
/* ── 11. КАРТОЧКИ ОБЗОРА ───────────────────────────────────────────────── */
#card-balance{
position:relative;
padding:var(--sp-6) var(--sp-5) var(--sp-5);
border-radius:var(--r-xl);
box-shadow:var(--shadow-2);
display:flex;flex-direction:column;gap:var(--sp-3);
}
#card-balance::before{
content:"";position:absolute;top:-90px;right:-60px;
width:260px;height:260px;border-radius:50%;
background:radial-gradient(closest-side,var(--accent-soft),transparent 70%);
pointer-events:none;
}
#card-balance > *{position:relative}
#hero-amount{
position:relative;align-self:flex-start;
font-family:var(--font-num);font-weight:500;
font-size:var(--fs-hero);line-height:var(--lh-hero);letter-spacing:var(--ls-hero);
color:var(--fg-strong);
padding-bottom:8px;
cursor:pointer;user-select:none;-webkit-user-select:none;
transition:opacity var(--dur-fast) linear;
}
#hero-amount::after{
content:"";position:absolute;left:0;bottom:0;
width:100%;height:3px;border-radius:var(--r-full);
background:var(--accent-grad);
opacity:.95;
}
#spark-balance{height:36px;width:100%}
#card-daily{
padding:var(--sp-5);
display:flex;flex-direction:column;gap:var(--sp-3);
}
#card-daily .num{font-size:var(--fs-num-xl);letter-spacing:-.03em}
#budgets-preview{display:flex;flex-direction:column}
#recent-ops{display:flex;flex-direction:column}
#card-top-cats{padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-4)}
#donut-overview,#donut-report{width:100%;min-height:200px}
#bars-report{width:100%;min-height:220px}
/* ── 12. ОПЕРАЦИИ ──────────────────────────────────────────────────────── */
#ops-filters{
position:sticky;top:calc(var(--h-header) + var(--safe-t));z-index:var(--z-sticky);
display:flex;flex-direction:column;gap:var(--sp-3);
padding:var(--sp-2) 0 var(--sp-3);
background:var(--bg-app);
}
#ops-filters .u-scroll-x,#ops-filters > div:last-child{
display:flex;gap:var(--sp-2);
overflow-x:auto;scrollbar-width:none;
padding-inline:var(--pad-x);margin-inline:calc(var(--pad-x) * -1);
}
#ops-filters ::-webkit-scrollbar{display:none}
#ops-search{
width:100%;
padding-inline-start:var(--sp-7);
background:var(--bg-surface);
box-shadow:var(--shadow-1);
}
#ops-summary{
display:grid;grid-template-columns:repeat(3,1fr);
padding:var(--sp-4) var(--sp-3);
text-align:center;
}
#ops-summary > *{display:flex;flex-direction:column;gap:2px;min-width:0}
#ops-summary .num{font-size:var(--fs-num-md)}
#ops-summary > * + *{box-shadow:inset 1px 0 0 var(--stroke)}
#ops-list{display:flex;flex-direction:column;gap:0}
#ops-sentinel{height:1px;width:100%}
.day-head{
position:sticky;top:calc(var(--h-header) + var(--safe-t) + var(--stick-extra,0px));
z-index:calc(var(--z-sticky) - 1);
display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);
padding:var(--sp-3) var(--sp-4) var(--sp-2);
background:var(--bg-app);
font-size:var(--fs-xs);font-weight:700;letter-spacing:.03em;text-transform:uppercase;
color:var(--fg-faint);
transition:box-shadow var(--dur-fast) var(--ease-out),background-color var(--dur-fast) linear;
}
.day-head .num{font-size:var(--fs-num-sm);font-weight:500;color:var(--fg-muted);letter-spacing:0}
/* Внутри карточки заголовок дня подхватывает цвет карточки, а не фон приложения */
#recent-ops .day-head{background:var(--bg-surface)}
/* В «Операциях» над лентой висит панель фильтров — заголовок дня встаёт под неё.
Точную высоту панели screens.js может уточнить через --stick-extra на #ops-list. */
#ops-list .day-head{top:calc(var(--h-header) + var(--safe-t) + var(--stick-extra,58px))}
.day-head.is-stuck{
background:var(--bg-header);
backdrop-filter:var(--blur-bar);-webkit-backdrop-filter:var(--blur-bar);
box-shadow:0 8px 16px -16px rgba(0,0,0,.6),inset 0 -1px 0 var(--stroke);
}
/* Свайп-контейнер строки */
.op-swipe{
position:relative;
overflow:hidden;
background:var(--bg-surface);
border-radius:var(--r-md);
touch-action:pan-y;
}
.op-act--edit,.op-act--del{
position:absolute;top:0;bottom:0;
width:88px;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
font-size:var(--fs-xs);font-weight:700;letter-spacing:.02em;
}
.op-act--edit{left:0;background:var(--accent-soft);color:var(--accent)}
.op-act--del{right:0;background:var(--expense-soft);color:var(--expense)}
.op-act--edit svg,.op-act--del svg{width:20px;height:20px}
/* Строка операции: grid 40px | 1fr | auto, высота --h-row */
.op-row{
position:relative;
display:grid;grid-template-columns:40px 1fr auto;align-items:center;
gap:var(--sp-3);
width:100%;min-height:var(--h-row);
padding:var(--sp-2) var(--pad-x);
background:var(--bg-surface);
text-align:start;
transition:transform var(--dur-base) var(--ease-out),background-color var(--dur-fast) linear;
will-change:transform;
}
.op-row::after{
content:"";position:absolute;left:var(--sep-left);right:0;bottom:0;height:1px;
background:var(--stroke);
}
.op-row:last-child::after{display:none}
.op-row:active{background:var(--bg-surface-2)}
.op-row > *{min-width:0}
.op-row > *:nth-child(2){display:flex;flex-direction:column;gap:2px}
.op-ic,.op-row .ic{
--tc:var(--c,var(--cat-color,var(--cat-other)));
width:40px;height:40px;border-radius:var(--r-full);
display:grid;place-items:center;
color:var(--tc);
background:color-mix(in oklab,var(--tc) var(--tint-mix),transparent);
}
.op-ic svg,.op-row svg{width:21px;height:21px}
.op-row b{
display:block;
font-size:var(--fs-body);font-weight:600;line-height:1.25;color:var(--fg-strong);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.op-row small{
display:block;
font-size:var(--fs-sm);line-height:1.3;color:var(--fg-muted);font-weight:500;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.op-row .num{font-size:var(--fs-num-md);text-align:end}
/* Гасим СОДЕРЖИМОЕ, а не саму строку: opacity на .op-row делала её полупрозрачной,
и сквозь неё просвечивали кнопки свайпа (.op-act--del) из .op-swipe под ней. */
.op-row--pending > *{opacity:.72}
.op-row--pending::before{
content:"";position:absolute;left:6px;top:calc(50% - 3px);
width:6px;height:6px;border-radius:50%;
background:var(--heat-mid);
animation:pulse-dot 1.6s var(--ease-inout) infinite;
}
/* ── 13. БЮДЖЕТЫ (R3, зелёного нет) ───────────────────────────────────── */
#budget-summary{padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-4)}
#budget-summary .num{font-size:var(--fs-num-xl);letter-spacing:-.03em}
#budget-list{display:flex;flex-direction:column;gap:var(--sp-3)}
.budget-card{
display:flex;flex-direction:column;gap:var(--sp-3);
padding:var(--sp-4) var(--sp-5);
border-radius:var(--r-lg);
background:var(--bg-surface);
box-shadow:var(--shadow-1);
text-align:start;width:100%;
transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);
}
.budget-card:active{transform:scale(.99)}
.budget-card.is-over{
box-shadow:var(--shadow-1),inset 0 0 0 1.5px color-mix(in oklab,var(--expense) 42%,transparent);
background:color-mix(in oklab,var(--expense) 4%,var(--bg-surface));
}
.budget-card .num{font-size:var(--fs-num-md)}
.budget-card b{font-size:var(--fs-h3);font-weight:600;color:var(--fg-strong)}
.budget-row{
display:grid;grid-template-columns:40px 1fr auto;align-items:center;
gap:var(--sp-3);
width:100%;min-height:var(--tap);
padding:var(--sp-3) var(--sp-5);
text-align:start;
transition:background-color var(--dur-fast) linear;
}
.budget-row:active{background:var(--bg-surface-2)}
.budget-row > *{min-width:0}
.budget-row > *:nth-child(2){display:flex;flex-direction:column;gap:5px}
.budget-row b{font-size:var(--fs-body);font-weight:600;color:var(--fg-strong);display:block}
.budget-row small{font-size:var(--fs-sm);color:var(--fg-muted);display:block}
.budget-add{
display:flex;align-items:center;justify-content:center;gap:var(--sp-2);
width:100%;min-height:56px;
border-radius:var(--r-lg);
outline:1.5px dashed var(--stroke-strong);outline-offset:-1.5px;
color:var(--fg-muted);font-size:var(--fs-sm);font-weight:600;
background:transparent;
transition:color var(--dur-fast) linear,outline-color var(--dur-fast) linear,background-color var(--dur-fast) linear;
}
.budget-add svg{width:19px;height:19px}
.budget-add:hover{color:var(--accent);outline-color:var(--accent);background:var(--accent-soft)}
/* ── 14. ОТЧЁТЫ ───────────────────────────────────────────────────────── */
#period-seg{width:100%}
#report-tabs{
display:flex;gap:var(--sp-2);
overflow-x:auto;scrollbar-width:none;
padding-inline:var(--pad-x);margin-inline:calc(var(--pad-x) * -1);
}
#report-tabs::-webkit-scrollbar{display:none}
#cat-table{overflow-x:auto;padding:var(--sp-2) 0}
#cat-table table{min-width:340px;font-size:var(--fs-sm)}
#cat-table th{
text-align:start;font-size:var(--fs-xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase;
color:var(--fg-faint);padding:var(--sp-2) var(--sp-4);white-space:nowrap;
}
#cat-table td{
padding:10px var(--sp-4);color:var(--fg);
box-shadow:inset 0 1px 0 var(--stroke);
white-space:nowrap;
}
#cat-table td:first-child{white-space:normal;color:var(--fg-strong);font-weight:500}
#cat-table td:last-child,#cat-table th:last-child{text-align:end}
/* ── 15. «ЕЩЁ» — НАСТРОЙКИ ────────────────────────────────────────────── */
#screen-more section{display:flex;flex-direction:column}
.set-row{
display:grid;grid-template-columns:34px 1fr auto;align-items:center;
gap:var(--sp-3);
width:100%;min-height:56px;
padding:var(--sp-3) var(--sp-5);
text-align:start;
color:var(--fg-strong);
transition:background-color var(--dur-fast) linear;
}
.set-row + .set-row{box-shadow:inset 0 1px 0 var(--stroke)}
.set-row:active{background:var(--bg-surface-2)}
.set-row svg{width:20px;height:20px;color:var(--fg-muted)}
.set-row b{font-size:var(--fs-body);font-weight:500;display:block}
.set-row small{font-size:var(--fs-sm);color:var(--fg-muted);display:block;line-height:1.35}
.set-row--danger{color:var(--expense)}
.set-row--danger svg{color:var(--expense)}
/* ── 16. ПУСТЫЕ СОСТОЯНИЯ ─────────────────────────────────────────────── */
.empty{
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-3);
padding:var(--sp-8) var(--sp-5);
text-align:center;
color:var(--fg-muted);
}
.empty svg{width:28px;height:28px;color:var(--fg-faint)}
.empty > :first-child{
width:64px;height:64px;border-radius:var(--r-full);
display:grid;place-items:center;
background:var(--bg-sunken);
}
.empty b{font-size:var(--fs-h3);font-weight:600;color:var(--fg-strong);letter-spacing:var(--ls-h3)}
.empty p,.empty small{font-size:var(--fs-sm);color:var(--fg-muted);max-width:30ch;line-height:1.45}
/* ── 17. ШТОРКИ СНИЗУ ─────────────────────────────────────────────────── */
#sheet-root{
position:fixed;inset:0;z-index:var(--z-sheet);
display:flex;align-items:flex-end;justify-content:center;
background:var(--bg-scrim);
backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
opacity:0;visibility:hidden;pointer-events:none;
transition:opacity var(--dur-base) var(--ease-out),visibility 0s linear var(--dur-base);
}
#sheet-root:not(:empty),#sheet-root.is-open{
opacity:1;visibility:visible;pointer-events:auto;
transition-delay:0s;
}
.sheet{
position:relative;
width:100%;max-width:var(--w-app);
max-height:min(92dvh,860px);
display:flex;flex-direction:column;
padding:0 var(--pad-x) calc(var(--safe-b) + var(--sp-5));
border-radius:var(--r-xl) var(--r-xl) 0 0;
background:var(--bg-elevated);
box-shadow:var(--shadow-3);
overflow-y:auto;overflow-x:hidden;
-webkit-overflow-scrolling:touch;
overscroll-behavior:contain;
animation:sheet-in var(--dur-base) var(--ease-out) both;
}
.sheet.is-closing{animation:sheet-out var(--dur-fast) var(--ease-inout) both}
.sheet > *{flex:0 0 auto}
.sheet__handle{
position:sticky;top:0;z-index:2;
flex:0 0 auto;
align-self:center;
width:100%;
padding:10px 0 var(--sp-3);
display:flex;justify-content:center;
background:linear-gradient(var(--bg-elevated) 70%,transparent);
cursor:grab;
}
.sheet__handle::before{
content:"";width:40px;height:4px;border-radius:var(--r-full);
background:var(--stroke-strong);
}
.sheet header,.sheet > .u-between:first-of-type{
display:flex;align-items:center;gap:var(--sp-3);
padding-bottom:var(--sp-4);
}
.sheet h2,.sheet h3{
font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2);
font-weight:600;color:var(--fg-strong);
}
.sheet--tall{min-height:70dvh}
/* 17.1 Шит быстрого добавления */
#sheet-add{display:flex;flex-direction:column;gap:var(--sp-4)}
#add-type{--n:3}
#add-amount{
display:flex;align-items:baseline;justify-content:flex-end;gap:4px;
min-height:64px;padding:var(--sp-2) var(--sp-3);
border-radius:var(--r-lg);
background:var(--bg-surface-2);
font-family:var(--font-num);font-weight:500;
font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:var(--ls-display);
color:var(--fg-strong);
overflow-x:auto;white-space:nowrap;scrollbar-width:none;
user-select:none;-webkit-user-select:none;
transition:box-shadow var(--dur-fast) var(--ease-out),color var(--dur-fast) linear;
}
#add-amount::-webkit-scrollbar{display:none}
#add-amount:focus-visible{box-shadow:inset 0 0 0 1.5px var(--accent)}
#add-amount[data-empty="1"]{color:var(--fg-faint)}
#add-amount::after{
content:"";width:2px;height:1em;border-radius:1px;
background:var(--accent);
animation:caret 1.05s steps(1,end) infinite;
}
#add-context{
display:flex;gap:var(--sp-2);
overflow-x:auto;scrollbar-width:none;
padding-inline:var(--pad-x);margin-inline:calc(var(--pad-x) * -1);
}
#add-context::-webkit-scrollbar{display:none}
#add-cats{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:var(--sp-4) var(--sp-2);
padding:var(--sp-1) 0;
}
#add-pad{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:var(--sp-2);
}
#add-pad button{
min-height:54px;
border-radius:var(--r-md);
background:var(--bg-surface-2);
box-shadow:var(--shadow-1);
font-family:var(--font-num);font-size:20px;font-weight:500;
color:var(--fg-strong);
display:grid;place-items:center;
transition:transform var(--dur-tap) var(--ease-out),background-color var(--dur-tap) linear;
}
#add-pad button:active{transform:scale(.95);background:var(--bg-sunken)}
#add-pad button[data-key="del"],#add-pad button[data-op]{
background:var(--bg-sunken);color:var(--fg-muted);box-shadow:none;
}
#add-pad button[data-key="eq"]{background:var(--accent-soft);color:var(--accent)}
#add-pad svg{width:22px;height:22px}
#add-submit{
width:100%;min-height:52px;
border-radius:var(--r-lg);
background:var(--accent-grad);color:var(--fg-on-accent);
box-shadow:var(--shadow-2);
font-size:var(--fs-h3);font-weight:700;letter-spacing:-.01em;
display:flex;align-items:center;justify-content:center;gap:var(--sp-2);
transition:transform var(--dur-tap) var(--ease-out),opacity var(--dur-fast) linear;
}
#add-submit:active{transform:scale(.98)}
#sheet-cats-all{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4) var(--sp-2)}
/* 17.2 Шит одной операции */
#sheet-op{display:flex;flex-direction:column;gap:var(--sp-4)}
#sheet-op .num{font-size:var(--fs-num-xl);letter-spacing:-.03em}
/* SVG-спрайт не занимает места и не влияет на поток */
#icon-sprite{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
/* ── 18. ТОСТЫ ────────────────────────────────────────────────────────── */
#toast-root{
position:fixed;left:0;right:0;
bottom:calc(var(--h-nav) + var(--safe-b) + var(--sp-3));
z-index:var(--z-toast);
display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);
padding-inline:var(--pad-x);
pointer-events:none;
}
.toast{
pointer-events:auto;
width:100%;max-width:calc(var(--w-app) - var(--pad-x) * 2);
display:flex;align-items:center;gap:var(--sp-3);
min-height:var(--tap);
padding:6px var(--sp-2) 6px var(--sp-4);
border-radius:var(--r-md);
background:var(--bg-elevated);
box-shadow:var(--shadow-3);
font-size:var(--fs-sm);font-weight:500;color:var(--fg-strong);
animation:toast-in var(--dur-base) var(--ease-spring) both;
}
.toast.is-hiding{animation:toast-out var(--dur-fast) var(--ease-inout) both}
.toast svg{width:18px;height:18px;color:var(--fg-muted);flex:0 0 auto}
.toast span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.toast button{
flex:0 0 auto;
min-height:var(--tap);padding:0 var(--sp-4);
border-radius:var(--r-full);
background:var(--accent-soft);color:var(--accent);
font-size:var(--fs-sm);font-weight:700;
}
.toast--error{box-shadow:var(--shadow-3),inset 0 0 0 1.5px color-mix(in oklab,var(--expense) 40%,transparent)}
.toast--error svg{color:var(--expense)}
/* ── 19. СКЕЛЕТОНЫ ───────────────────────────────────────────────────── */
.skel{
position:relative;
border-radius:var(--r-sm);
background:var(--bg-sunken);
overflow:hidden;
}
.skel::after{
content:"";position:absolute;inset:0;
transform:translateX(-100%);
background:linear-gradient(90deg,transparent,var(--skeleton-shine),transparent);
animation:skel-shine 1.35s var(--ease-inout) infinite;
}
.skel-hero{
height:150px;border-radius:var(--r-xl);
background:var(--bg-sunken);position:relative;overflow:hidden;
}
.skel-acct{
flex:0 0 auto;width:162px;height:104px;border-radius:var(--r-lg);
background:var(--bg-sunken);position:relative;overflow:hidden;
}
.skel-op-row{
height:var(--h-row);border-radius:var(--r-md);
background:var(--bg-sunken);position:relative;overflow:hidden;
}
.skel-budget{
height:86px;border-radius:var(--r-lg);
background:var(--bg-sunken);position:relative;overflow:hidden;
}
.skel-chart{
height:208px;border-radius:var(--r-lg);
background:var(--bg-sunken);position:relative;overflow:hidden;
}
.skel-hero::after,.skel-acct::after,.skel-op-row::after,.skel-budget::after,.skel-chart::after{
content:"";position:absolute;inset:0;
transform:translateX(-100%);
background:linear-gradient(90deg,transparent,var(--skeleton-shine),transparent);
animation:skel-shine 1.35s var(--ease-inout) infinite;
}
/* ── 20. РЕЖИМЫ И СОСТОЯНИЯ ──────────────────────────────────────────── */
/* Приватный режим: суммы скрыты, но верстка не прыгает */
.is-private .num,.is-private #hero-amount,.is-private [data-private]{
filter:blur(9px);
user-select:none;-webkit-user-select:none;
transition:filter var(--dur-base) var(--ease-out);
}
.is-private #spark-balance,.is-private .progress__fill{filter:blur(4px)}
/* Плавная перекраска при ручной смене темы */
.theme-anim,.theme-anim *,.theme-anim *::before,.theme-anim *::after{
transition:background-color var(--dur-base) var(--ease-out),
color var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out),
outline-color var(--dur-base) var(--ease-out),
fill var(--dur-base) var(--ease-out),
stroke var(--dur-base) var(--ease-out) !important;
}
/* Данные перезагружаются: карточка держит прежний рендер, просто тускнеет */
.is-loading{opacity:.55;transition:opacity var(--dur-fast) linear;pointer-events:none}
/* ── 21. АНИМАЦИИ ────────────────────────────────────────────────────── */
@keyframes screen-in{
from{opacity:0;transform:translateY(8px)}
to{opacity:1;transform:none}
}
@keyframes slide-down{
from{opacity:0;transform:translateY(-100%)}
to{opacity:1;transform:none}
}
@keyframes sheet-in{
from{opacity:.4;transform:translateY(24px) scale(.99)}
to{opacity:1;transform:none}
}
@keyframes sheet-out{
from{opacity:1;transform:none}
to{opacity:0;transform:translateY(100%)}
}
@keyframes toast-in{
from{opacity:0;transform:translateY(16px) scale(.96)}
to{opacity:1;transform:none}
}
@keyframes toast-out{
from{opacity:1;transform:none}
to{opacity:0;transform:translateY(10px) scale(.97)}
}
@keyframes fab-in{
from{opacity:0;transform:scale(.6)}
to{opacity:1;transform:none}
}
@keyframes skel-shine{
0%{transform:translateX(-100%)}
60%,100%{transform:translateX(100%)}
}
@keyframes pulse-dot{
0%,100%{opacity:1;transform:scale(1)}
50%{opacity:.35;transform:scale(.75)}
}
@keyframes caret{
0%,45%{opacity:1}
50%,100%{opacity:0}
}
@keyframes spin{to{transform:rotate(360deg)}}
.is-spinning,[data-state="syncing"] .i-refresh{animation:spin 900ms linear infinite}
/* ── 22. АДАПТИВ ─────────────────────────────────────────────────────── */
/* Узкие телефоны (≤360px) — ужимаем горизонтальные отступы */
@media (max-width:360px){
:root{--pad-x:12px}
.cat-tile > :first-child{width:48px;height:48px}
#add-pad button{min-height:50px;font-size:19px}
.acct-card{width:150px}
}
/* Планшет/десктоп: колонка по центру, «плавающая» навигация */
@media (min-width:640px){
body{background:var(--bg-app)}
#view{padding-top:var(--sp-5)}
#tabbar{
left:50%;transform:translateX(-50%);
bottom:var(--sp-4);
width:min(calc(var(--w-app) - var(--sp-6)),calc(100vw - var(--sp-8)));
height:var(--h-nav);
padding-bottom:0;
border-radius:var(--r-xl);
box-shadow:var(--shadow-3);
}
#tab-indicator{border-radius:var(--r-full)}
#fab{bottom:calc(var(--h-nav) + var(--sp-4) + var(--sp-4))}
#btn-top{bottom:calc(var(--h-nav) + var(--sp-4) + var(--sp-4) + 58px + var(--sp-3))}
#toast-root{bottom:calc(var(--h-nav) + var(--sp-4) + var(--sp-3))}
#view{padding-bottom:calc(var(--h-nav) + var(--sp-9) + var(--sp-6))}
.sheet{
border-radius:var(--r-xl);
margin-bottom:var(--sp-6);
max-height:min(86dvh,860px);
}
#sheet-root{align-items:center}
}
/* Мышь есть — включаем hover-эффекты только там (на тач не «залипает») */
@media (hover:hover) and (pointer:fine){
.chip:hover{color:var(--fg-strong);box-shadow:var(--shadow-2)}
.chip.is-active:hover{color:var(--fg-on-accent);background:var(--accent-hover)}
.btn:hover{box-shadow:var(--shadow-2)}
.btn--quiet:hover{background:var(--bg-surface-2)}
.op-row:hover{background:var(--bg-surface-2)}
.set-row:hover{background:var(--bg-surface-2)}
.acct-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.budget-card:hover{box-shadow:var(--shadow-2)}
.cat-tile:hover > :first-child{transform:scale(1.05)}
#month-pill:hover{box-shadow:var(--shadow-2)}
#btn-search:hover{background:var(--bg-sunken);color:var(--fg-strong)}
.tab:hover{color:var(--fg)}
.tab[aria-selected="true"]:hover{color:var(--accent-hover)}
}
/* Печать: только содержимое */
@media print{
#topbar,#tabbar,#fab,#btn-top,#sheet-root,#toast-root,#net-banner{display:none!important}
#view{max-width:none;padding:0}
body{background:#fff;color:#000}
}