/* Money Lab в оформлении HomeHub (home.pervomay.org, версия 24.10.2026):
   бумага цвета слоновой кости, карточки — кремовый картон с сепией, текст — «чернила»,
   выделение — тёплая сепия, плавающая панель закладок, освещение по времени суток.
   Значения взяты из итоговых слоёв HomeHub (css/app.css, body.home-wall). Тёмной темы нет —
   как и в HomeHub, страница всегда «бумажная». */
:root {
  /* бумага и чернила */
  --paper: #f1e9d6;
  --ink: #2b241c;
  --ink-soft: rgba(43, 36, 28, .62);
  --ink-faint: rgba(43, 36, 28, .42);
  /* картон */
  --card: rgba(252, 248, 238, .82);
  --card-2: rgba(255, 252, 246, .95);
  --sepia: rgba(90, 70, 40, .18);
  --sepia-2: rgba(90, 70, 40, .3);
  --card-shadow: 0 10px 26px -12px rgba(70, 50, 20, .28), 0 1px 0 rgba(255, 255, 255, .7) inset;
  /* акценты */
  --accent: #2f4d8f;
  --select: #8a5a34;
  --select-fg: #fbf6ea;
  --ok: #3f7d4e;
  --bad: #a93a2a;
  --warn: #b7772a;
  --blue: #3f6e8c;
  --orange: #b8622f;
  --purple: #7d2f4e;
  --pink: #b04a6e;
  --indigo: #4a5a9c;
  --radius: 16px;
  --display: "Manrope", "SF Pro Display", -apple-system, system-ui, sans-serif;
  --body: "Golos Text", "SF Pro Text", -apple-system, system-ui, sans-serif;
  --tabbar-h: 60px;
  /* серии графиков — те же «сургучные» цвета */
  --c1: #2f4d8f; --c2: #b8622f; --c3: #3f7d4e; --c4: #7d2f4e; --c5: #b7772a; --c6: #b04a6e; --c7: #3f6e8c; --c8: #8a7a66;
  color-scheme: light;
}
/* освещение по времени суток (js/app.js → applyLight) */
body.light-morning { --paper: #f3eee0; --select: #8a7a3a; --card: rgba(253, 251, 244, .84); --card-2: rgba(255, 254, 249, .96); }
body.light-evening { --paper: #efe2cc; --select: #a4522c; --card: rgba(252, 245, 232, .84); --card-2: rgba(255, 250, 240, .96); }
body.light-night {
  --paper: #c3b69b; --select: #5a3d22; --ink: #261f17; --ink-soft: rgba(38, 31, 23, .7); --ink-faint: rgba(38, 31, 23, .5);
  --card: rgba(228, 219, 198, .88); --card-2: rgba(238, 230, 212, .97); --sepia: rgba(60, 44, 24, .24); --sepia-2: rgba(60, 44, 24, .38);
}
html { background: var(--paper); touch-action: pan-x pan-y; }
html:has(body.light-morning) { background: #f3eee0; }
html:has(body.light-evening) { background: #efe2cc; }
html:has(body.light-night) { background: #c3b69b; }

/* Политика жестов должна доходить до вложенных областей прокрутки и диалогов. */
* { box-sizing: border-box; touch-action: inherit; }
html, body { min-height: 100%; }
body {
  margin: 0; background: transparent; color: var(--ink);
  font: 15px/1.45 var(--body); -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased;
}
.wallpaper, .card, .tabbar, .btn, .iconbtn { transition: background-color 2s ease, border-color 2s ease; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
/* Без тёмной подсветки касания iOS — у списков, полей и строк она выглядит как чёрная рамка */
html { -webkit-tap-highlight-color: transparent; }
button, select { cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--display); letter-spacing: -0.01em; margin: 0; color: var(--ink); }
h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
h4 { font-size: 14px; font-weight: 700; margin: 10px 0 6px; }
:focus-visible { outline: 2px solid color-mix(in srgb, var(--select) 60%, transparent); outline-offset: 2px; }
code { background: rgba(90, 70, 40, .09); padding: 1px 5px; border-radius: 5px; font-size: 13px; }

/* ── обои: бумага с волокнами ─────────────────────────── */
.wallpaper { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--paper); }
.wallpaper::before, .wallpaper::after { content: ""; position: absolute; border-radius: 50%; filter: blur(70px); transition: opacity 2s ease; }
.wallpaper::before { /* светлое пятно, как засвет листа */
  width: 120vmax; height: 60vmax; left: -20vmax; top: -22vmax; background: radial-gradient(closest-side, rgba(255, 255, 255, .75), transparent);
}
.wallpaper::after { /* тёплое затемнение к краю */
  width: 90vmax; height: 50vmax; right: -30vmax; bottom: -10vmax; background: radial-gradient(closest-side, rgba(214, 186, 130, .45), transparent);
}
.wallpaper i.grain { /* волокна бумаги: мелкий шум + редкие горизонтальные прожилки */
  position: absolute; inset: 0; display: block;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .26 0 0 0 0 .2 0 0 0 0 .12 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .09' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .22 0 0 0 0 .1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}
body.light-morning .wallpaper::after { opacity: .5; }
body.light-night .wallpaper::before { opacity: .25; }

/* WebKit определяет цвет системных областей по fixed-элементам у края.
   Пустой слой с background-clip:text задаёт цвет для этого механизма,
   но сам ничего не рисует и не меняет раскладку или обработку касаний.
   Это обход поведения WebKit; проверять нужно в установленном iOS PWA. */
.system-edge { display: none; }
@supports (-webkit-touch-callout: none) {
  @media (display-mode: standalone) {
    .system-edge {
      display: block; position: fixed; left: 0; right: 0; height: 11px;
      z-index: 2147483647; pointer-events: none;
      -webkit-background-clip: text; background-clip: text;
    }
    .system-edge-top { top: 0; background-color: var(--system-top, #eae4d7); }
    .system-edge-bottom { bottom: 0; background-color: var(--system-bottom, #e3d8be); }
    /* Небо заставки имеет другой цвет; учитываем также её бумажный шум.
       При уходе заставки возвращаем цвета основного экрана за те же .7s. */
    body:has(#splash:not([hidden]):not(.out)) .system-edge-top {
      background-color: color-mix(in srgb, var(--sky-top) 96%, #42331f);
    }
    body:has(#splash:not([hidden]):not(.out)) .system-edge-bottom {
      background-color: color-mix(in srgb, var(--sky-bot) 96%, #42331f);
    }
    body:has(#splash.out:not([hidden])) .system-edge { transition: background-color .7s ease; }
  }
}

/* ── шапка: крупный заголовок слева, при прокрутке — в центр ── */
.topbar { position: sticky; top: 0; z-index: 20; padding-top: env(safe-area-inset-top, 0px); }
.topbar::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: -30px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(241, 233, 214, .96) 0%, rgba(241, 233, 214, .8) 60%, rgba(241, 233, 214, 0) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%);
  -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent); mask-image: linear-gradient(180deg, #000 58%, transparent);
  opacity: 0; transition: opacity .4s ease;
}
.topbar.scrolled::before { opacity: 1; }
.topbar.instant::before, .topbar.instant .title-wrap, .topbar.instant .title, .topbar.instant .profile-name, .topbar.instant .profile-select { transition: none; }
body.light-morning .topbar::before { background: linear-gradient(180deg, rgba(243, 238, 224, .96) 0%, rgba(243, 238, 224, .8) 60%, rgba(243, 238, 224, 0) 100%); }
body.light-evening .topbar::before { background: linear-gradient(180deg, rgba(239, 226, 204, .96) 0%, rgba(239, 226, 204, .8) 60%, rgba(239, 226, 204, 0) 100%); }
body.light-night .topbar::before { background: linear-gradient(180deg, rgba(195, 182, 155, .96) 0%, rgba(195, 182, 155, .8) 60%, rgba(195, 182, 155, 0) 100%); }
.topbar-in {
  position: relative; max-width: 720px; margin: 0 auto; display: flex; align-items: center; gap: 8px; min-height: 64px;
  padding: 4px max(16px, env(safe-area-inset-right, 0px)) 4px max(16px, env(safe-area-inset-left, 0px));
}
.title-wrap {
  position: absolute; left: max(16px, env(safe-area-inset-left, 0px)); right: 110px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: flex-start;
  transition: left .42s cubic-bezier(.2, .7, .2, 1), right .42s cubic-bezier(.2, .7, .2, 1);
}
.title {
  font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: var(--ink);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: font-size .42s cubic-bezier(.2, .7, .2, 1);
}
.profile-name, .profile-select { font-size: 12.5px; color: var(--ink-soft); transition: opacity .3s; }
.topbar.scrolled .title-wrap { left: 64px; right: 64px; align-items: center; }
.topbar.scrolled .title { font-size: 17px; font-weight: 700; }
.topbar.scrolled .profile-name, .topbar.scrolled .profile-select { opacity: 0; pointer-events: none; height: 0; }
.profile-select {
  -webkit-appearance: none; appearance: none; border: 0; padding: 0 14px 0 0; width: max-content; max-width: 100%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='14' viewBox='0 0 10 14'%3E%3Cpath d='M2 5l3-3 3 3M2 9l3 3 3-3' fill='none' stroke='%237a6a55' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right center / 8px 12px;
}
.actions { position: relative; z-index: 1; margin-left: auto; display: flex; gap: 8px; align-items: center; }
/* Обёртки частей шапки, которые обновляются по отдельности, не участвуют в раскладке */
.profile-slot, .sync-slot, .plus-slot, .head-slot { display: contents; }
/* Своя шапка вкладки («Сегодня»): вместо заголовка — крупная дата, «+» крупнее, черта снизу. */
.topbar.custom-head .title-wrap { display: none; }
.topbar.custom-head .sync.ok { display: none; } /* точка остаётся, только когда нет связи */
.topbar.custom-head .topbar-in { min-height: 84px; border-bottom: 1px solid var(--sepia-2); }
.topbar.custom-head .plus-slot .iconbtn { width: 50px; height: 50px; background: transparent; border: 1.5px solid var(--ink); }
.topbar.custom-head .plus-slot .iconbtn svg { width: 26px; height: 26px; }
.iconbtn {
  width: 38px; height: 38px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center;
  background: var(--card-2); color: var(--ink); border: 1px solid var(--sepia);
}
.iconbtn:active { background: rgba(90, 70, 40, .08); }
.iconbtn svg { width: 20px; height: 20px; }
.sync { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); margin-right: 4px; }
.sync.err { background: var(--bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 25%, transparent); }
.offline-status { padding:6px 16px; color:var(--ink-soft); background:var(--paper); border-bottom:1px solid var(--sepia); font-size:12px; text-align:center; }
[data-offline-disabled] { opacity:.45; cursor:default; }
.readonly-note { white-space:pre-wrap; overflow-wrap:anywhere; }

/* Как в Money Pro: шапка стоит на месте, прокручивается и пружинит только то, что под ней.
   Страница не прокручивается; .view — своя область прокрутки от низа шапки до низа экрана
   (панель закладок плавает над ней). Высоту шапки --head-h ставит js/app.js. */
html:has(main.view), html:has(main.view) body { height: 100%; overflow: hidden; overscroll-behavior: none; }
.view {
  position: fixed; top: var(--head-h, 72px); bottom: 0; left: 0; right: 0;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: none; scrollbar-gutter: stable; -webkit-overflow-scrolling: touch;
  padding: 8px max(16px, env(safe-area-inset-right, 0px), calc(50% - 344px)) calc(var(--tabbar-h) + 36px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px), calc(50% - 344px));
}

/* ── плавающая панель закладок: картон, активная — сепиевая печать ── */
.tabbar {
  position: fixed; z-index: 20; left: 50%; transform: translateX(-50%);
  width: min(calc(100% - 2 * max(16px, env(safe-area-inset-left, 0px))), 688px);
  bottom: calc(env(safe-area-inset-bottom, 0px) * .4 + 8px);
  border-radius: 22px; background: rgba(252, 248, 238, .9); border: 1px solid var(--sepia);
  box-shadow: var(--card-shadow), 0 14px 30px -12px rgba(70, 50, 20, .35);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
body.light-night .tabbar { background: rgba(232, 223, 203, .94); }
.tabbar-in { display: grid; grid-template-columns: repeat(5, 1fr); height: var(--tabbar-h); }
.tab {
  position: relative; z-index: 0; border: 0; background: transparent; color: var(--ink-soft);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 10.5px; font-weight: 500;
}
.tab svg { width: 22px; height: 22px; }
.tab[aria-current="page"] { color: var(--select); }
.tab[aria-current="page"]::before {
  content: ""; position: absolute; inset: 6px 4px; border-radius: 16px; z-index: -1;
  background: color-mix(in srgb, var(--select) 14%, transparent);
}

/* ── общие элементы ───────────────────────────────────── */
.section { margin-top: 18px; }
.section-title {
  font-family: var(--display); font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--ink);
  margin: 22px 6px 10px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px;
}
.section > .section-title { margin-top: 0; }
.section-title .n { white-space: nowrap; margin-left: auto; font-family: var(--body); font-size: 13.5px; font-weight: 600; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.card {
  background: var(--card); color: var(--ink); border: 1px solid var(--sepia); border-radius: var(--radius); box-shadow: var(--card-shadow);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  padding: 14px 16px; margin-bottom: 12px; min-width: 0;
}
.card.list { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.card.pad { padding: 14px 16px; }
.empty-card { padding: 22px 16px; text-align: center; }
.empty-card p { margin: 0; color: var(--ink-soft); }
.empty { padding: 40px 16px; text-align: center; color: var(--ink-soft); }
.empty h3 { font-size: 18px; margin-bottom: 6px; }

/* Строка списка (.row в HomeHub) */
.entry {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px; width: 100%; text-align: left;
  border: 0; background: transparent; color: var(--ink); border-top: 1px solid var(--sepia);
}
.entry:first-child { border-top: 0; }
.entry:active { background: rgba(90, 70, 40, .07); }
.entry .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.entry-icon { flex: none; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-soft); }
.entry-icon svg { width: 32px; height: 32px; stroke-width: 1.5; }
/* Все списки — с контурными значками и мягкими тенями. */
.card.list { box-shadow: 0 2px 8px -6px rgba(70, 50, 20, .16); }
.tx-list .entry { min-height: 64px; padding: 12px 14px; }
.entry .name.tx-heading { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.4; }
.tx-description { color: var(--ink-soft); font-weight: 400; }
.entry .name { font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; color: var(--ink); }
.entry .meta { font-size: 12.5px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entry .aside { flex: none; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.entry .aside b { font-family: var(--display); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }
.entry .aside small { font-size: 11.5px; color: var(--ink-faint); white-space: nowrap; }
/* Стрелка «›» нарисована рамкой, а не картинкой: в длинных списках это сотни лишних элементов */
.entry .chev { flex: none; color: var(--ink-faint); width: 16px; height: 16px; position: relative; }
.entry .chev::before {
  content: ""; position: absolute; left: 3.5px; top: 5.25px; width: 5.5px; height: 5.5px;
  border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; border-radius: 1px; transform: rotate(45deg);
}
.is-hidden { opacity: .55; }

.pill { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: rgba(90, 70, 40, .09); color: var(--ink); vertical-align: 1px; }
.tag { font-size: 11.5px; padding: 1px 7px; border-radius: 6px; background: rgba(90, 70, 40, .09); color: var(--ink); margin-left: 4px; }
.btn {
  border-radius: 12px; padding: 12px 14px; font-weight: 600; font-size: 15px; display: flex; align-items: center;
  justify-content: center; gap: 8px; width: 100%;
  background: var(--card-2); color: var(--ink); border: 1px solid var(--sepia); box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset;
}
.btn.primary { background: var(--select); color: var(--select-fg); border-color: var(--select); }
.btn.small { width: auto; padding: 9px 14px; font-size: 14px; }
/* Кнопка-подпись для выбора файла (<label class="button"><input type="file" hidden>) */
label.button {
  flex-direction: row; align-items: center; justify-content: center; width: 100%; cursor: pointer;
  border-radius: 12px; padding: 9px 14px; font-size: 14px; font-weight: 500; color: var(--ink);
  background: var(--card-2); border: 1px solid var(--sepia); box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset;
}
.btn:active { opacity: .85; }
.link { border: 0; background: transparent; color: var(--accent); font-size: 15px; padding: 4px 2px; }
.link.strong { font-weight: 700; }
.link:disabled { color: var(--ink-faint); }
.hint { font-size: 12.5px; color: var(--ink-soft); margin: 6px 4px 0; }
.stack { display: flex; flex-direction: column; gap: 8px; }

/* Простые кнопки внутри карточек и листов (категории, «Ещё»). Специфичность нулевая (:where),
   чтобы стили компонентов — дни календаря, строки, чипы — всегда были сильнее. */
:where(.card, .sheet-form) :where(button:not(.entry, .chip, .link, .btn, .icon, .iconbtn, .tab)) {
  border: 1px solid var(--sepia); border-radius: 10px; background: var(--card-2); color: var(--ink); padding: 6px 12px; font-size: 14px; font-weight: 500;
}
:where(.card, .sheet-form) :where(button.small:not(.btn, .link)) { padding: 4px 10px; font-size: 13px; }
/* Главная кнопка сильнее и общего правила выше, и базового button { color: inherit } */
button.primary:not(.btn) { background: var(--select); border-color: var(--select); color: var(--select-fg); }
button.danger { color: var(--bad); }
button.icon { border: 0; background: transparent; color: var(--ink-faint); font-size: 16px; padding: 4px 6px; }

/* Раскладка */
.row { display: flex; gap: 10px; align-items: flex-end; }
.row > label { flex: 1; }
.row.between { justify-content: space-between; align-items: center; }
.row.end { justify-content: flex-end; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.spacer { flex: 1; }
.grid { display: grid; gap: 12px; }
.grid.two { grid-template-columns: 1fr; }
.muted { color: var(--ink-soft); }
.small { font-size: 13px; }
.pos { color: var(--ok); }
.neg { color: var(--bad); }
.entry .aside b.pos, .kv .v b.pos { color: var(--ok); }
.entry .aside b.neg, .kv .v b.neg { color: var(--bad); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.center { text-align: center; padding: 40px; }
.cap { display: inline-block; }
.cap::first-letter { text-transform: uppercase; }
.errors { color: var(--bad); padding-left: 18px; margin: 4px 0; font-size: 14px; }
.errors:empty { display: none; }

/* ── Сегодня: календарь как «Смены» в HomeHub ─────────── */
.month-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 2px; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--sepia-2); }
.month-grid .wd { text-align: center; font-size: 12px; font-weight: 500; color: var(--ink-soft); padding: 4px 0 8px; }
.month-grid .weekend { color: var(--blue); }
.mday { border: 0; background: transparent; color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 46px; margin: 0 3px; border-radius: 8px; font-size: 16px; font-variant-numeric: tabular-nums; }
.mday b { font-weight: 500; }
.mday.weekend { color: var(--blue); }
.mday.other { opacity: .45; }
.mday.today { box-shadow: inset 0 0 0 1.5px var(--ink); }
.mday:active { background: rgba(90, 70, 40, .08); }
.mday .mark { display: block; width: 6px; height: 6px; border-radius: 50%; }
.mday .mark.on { background: var(--ok); }
.cal-back { border: 0; background: transparent; color: var(--ink); display: inline-flex; align-items: center; gap: 4px; padding: 6px 4px 6px 0; font-size: 17px; flex: none; }
.cal-back svg { width: 20px; height: 20px; }
.cal-title { flex: 1; text-align: center; font-family: var(--display); font-size: 17px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.cal-search { border: 0; background: transparent; color: var(--ink); width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.cal-search svg { width: 22px; height: 22px; }
.cal-search.on { color: var(--select); }
.today-q { margin-bottom: 10px; }
/* Выбранная дата — заливка; фактическое сегодня — независимая обводка. */
.mday.selected { background: color-mix(in srgb, var(--select) 16%, transparent); color: var(--ink); font-weight: 600; }
.mday.selected.other { opacity: 1; }
.calendar-nav { display: flex; align-items: center; justify-content: center; gap: 2px; padding: 8px 0 12px; }
.cal-nav, .cal-now { border: 1px solid var(--sepia); background: var(--card-2); color: var(--ink); min-height: 40px; border-radius: 9px; }
.cal-nav { width: 40px; display: flex; align-items: center; justify-content: center; }
.cal-nav svg { width: 19px; height: 19px; }
.cal-now { padding: 6px 20px; font-weight: 600; }
.today-calendar { display: none; }
.day-caption { display: none; font-size: 18px; font-weight: 600; margin: 4px 6px 18px; }
.today-layout .day-swipe { min-height: 0; }
@media (max-width: 899px) {
  /* Пустой день тоже должен иметь область для свайпа. */
  .today-layout:not(.calendar-open) .today-content { min-height: calc(100dvh - var(--head-h, 84px) - var(--tabbar-h) - 60px - env(safe-area-inset-bottom, 0px)); }
}
.today-layout .to-today { margin: 4px auto 10px; }
.today-layout.calendar-open { position: absolute; inset: 8px max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; }
.view:has(.today-layout.calendar-open) { overflow: hidden; }
.calendar-open .today-calendar { display: block; flex: none; max-height: calc(100% - 90px); overflow-y: auto; }
.calendar-open .today-content { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 0 calc(var(--tabbar-h) + 36px + env(safe-area-inset-bottom, 0px)); overscroll-behavior: contain; }
.calendar-open .day-caption { display: block; }
.topbar:has(.today-month-title) .plus-slot .iconbtn { border: 0; background: transparent; width: 40px; height: 40px; }
.today-search-view { position: absolute; inset: 8px max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; max-width: 960px; margin: 0 auto; }
.view:has(.today-search-view) { overflow: hidden; }
.today-search-field { flex: none; }
.today-search-results { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: calc(var(--tabbar-h) + 36px + env(safe-area-inset-bottom, 0px)); overscroll-behavior: contain; }
.search-summary { margin: 8px 6px; font-size: 12.5px; }
.search-more { margin: 12px auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (min-width: 900px) {
  .topbar:has(.today-month-title) .topbar-in { max-width: 1280px; }
  .today-month-title { text-align: left; font-size: 26px; font-weight: 600; }
  .view:has(.today-layout) { padding: 20px max(24px, env(safe-area-inset-right, 0px)) calc(var(--tabbar-h) + 36px + env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px)); overflow: hidden; }
  .today-layout, .today-layout.calendar-open { position: static; height: 100%; max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: minmax(300px, .8fr) minmax(0, 1.2fr); gap: 32px; }
  .today-layout .today-calendar { display: block; align-self: start; max-height: 100%; overflow-y: auto; padding-right: 4px; }
  .today-layout .today-content { min-width: 0; height: 100%; overflow-y: auto; padding: 0 4px 16px; overscroll-behavior: contain; }
  .today-layout .mday { min-height: 52px; }
  .today-layout .day-caption { display: block; }
}
@media (max-width: 380px) {
  .topbar.custom-head .day-big { gap: 8px; min-width: 0; }
  .topbar.custom-head .day-big > b { font-size: 44px; padding-right: 8px; }
  .topbar.custom-head .day-big > span { font-size: 14px; gap: 4px; }
  .topbar.custom-head .plus-slot .iconbtn { width: 40px; height: 40px; }
  .cal-search { width: 32px; }
  .cal-title { font-size: 15px; }
}
@media (max-height: 700px) and (max-width: 899px) {
  .calendar-open .mday { min-height: 36px; }
}
.to-today { display: block; margin: 4px auto 0; color: var(--select); }
.day-big { display: flex; align-items: center; gap: 12px; border: 0; background: transparent; color: var(--ink); padding: 4px 0; text-align: left; }
.day-big > b { font-family: var(--display); font-size: 56px; font-weight: 600; line-height: 1; letter-spacing: -.03em; padding-right: 12px; border-right: 1.5px solid var(--ink-soft); }
.day-big > span { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-size: 17px; font-weight: 500; }
.day-swipe { min-height: calc(100dvh - 220px); padding-top: 4px; }
.day-swipe > .to-today { margin: 0 auto 10px; }
.mp-title { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); margin: 0 6px 6px; }
.entry.mp .meta { font-size: 11.5px; }
.amt-pill { flex: none; padding: 5px 10px; border-radius: 8px; font-family: var(--display); font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; color: #fbf6ea; background: var(--indigo); }
.amt-pill.in { background: var(--ok); }
.amt-pill.neutral { background: rgba(90, 70, 40, .14); color: var(--ink); }
.mp-totals { text-align: right; margin: -4px 8px 14px; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); line-height: 1.7; }
.mp-totals b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* ── Баланс ───────────────────────────────────────────── */
.hero-card { display: flex; flex-direction: column; gap: 2px; padding: 16px; }
.hero-card .muted { font-size: 13px; }
.hero-card .big { font-family: var(--display); font-size: 32px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.twin { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13px; color: var(--ink-soft); margin-top: 4px; }
.twin b { font-family: var(--display); font-variant-numeric: tabular-nums; margin-left: 4px; }
.show-hidden { display: block; margin: 4px auto 0; }
.kv { padding: 0; }
.kv .r { display: flex; justify-content: space-between; gap: 14px; padding: 11px 14px; border-top: 1px solid var(--sepia); font-size: 15px; }
.kv .r:first-child { border-top: 0; }
.kv .r .k { color: var(--ink); }
.kv .r .v { color: var(--ink-soft); text-align: right; font-variant-numeric: tabular-nums; }
.kv .r .v b { font-family: var(--display); }

/* ── переключатели и фильтры ─────────────────────────── */
.segmented {
  display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-radius: 12px; padding: 3px; gap: 2px;
  background: var(--card-2); border: 1px solid var(--sepia); box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset;
}
.segmented button { border: 0; border-radius: 9px; background: transparent; padding: 7px 12px; font-size: 13.5px; font-weight: 500; color: var(--ink-soft); }
.segmented button.on { background: var(--select); color: var(--select-fg); font-weight: 600; }
.segmented.big { display: grid; width: 100%; margin-bottom: 12px; }
.segmented.big button { padding: 8px 4px; }
/* Подписи разной длины: ширина по тексту, остаток делится поровну — всё в одну строку без прокрутки */
.segmented.fit { grid-auto-columns: auto; }
.segmented.fit button { white-space: nowrap; padding: 8px 6px; }
@media (max-width: 360px) { .segmented.fit button { padding: 8px 3px; font-size: 12.5px; } }
/* Фильтры отчёта — ровная сетка: у всех полей одна высота и одни углы, по два в ряд;
   переключатели, даты и поиск — на всю ширину. Шрифт 16px: с меньшим iPhone увеличивает страницу при выборе. */
.filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 4px; }
.filters select, .filters input { height: 42px; padding: 0 12px; font-size: 16px; font-weight: 500; }
.filters input[type="search"], .filters .segmented, .filters .dates { grid-column: 1 / -1; }
/* Непарный последний список — на всю ширину. При своём периоде список периодов занимает строку над датами,
   и пары остальных списков сдвигаются на один. */
.filters:not(:has(.dates)) > select:nth-of-type(odd):last-of-type,
.filters:has(.dates) > select:nth-of-type(even):last-of-type,
.filters > select:has(+ .dates) { grid-column: 1 / -1; }
.filters .dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.filters .segmented { display: grid; width: 100%; height: 42px; }
.filters .segmented button { padding: 0 8px; }
.back-link { display: block; margin: 0 0 8px; }
.summary { margin: 0 6px 8px; color: var(--ink-soft); font-size: 14px; }
.summary b { color: var(--ink); }
.export { margin-top: 14px; justify-content: center; }
.export .btn svg { width: 18px; height: 18px; stroke-width: 1.5; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.kpi {
  background: var(--card); border: 1px solid var(--sepia); box-shadow: var(--card-shadow); border-radius: 14px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.kpi .k { font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.kpi .v { font-family: var(--display); font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* ── таблицы ──────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 12px; color: var(--ink-faint); font-weight: 600; padding: 8px; border-bottom: 1px solid var(--sepia); }
td { padding: 9px 8px; border-bottom: 1px solid var(--sepia); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
td.actions { width: 1%; white-space: nowrap; }
.actions .small { margin-left: 4px; }

/* ── графики ──────────────────────────────────────────── */
/* Карточка с графиком никогда не прокручивается вбок: график вписан в её ширину. */
.chart-card { overflow: hidden; }
.chart-card svg { display: block; max-width: 100%; }
.entry.total { background: rgba(90, 70, 40, .05); }
.entry.total .name { font-weight: 700; }
div.entry:active { background: transparent; }
div.entry.total:active { background: rgba(90, 70, 40, .05); }
.chart { width: 100%; height: auto; display: block; }
.chart .axis { font-size: 11px; fill: var(--ink-soft); }
.chart .baseline { stroke: var(--sepia-2); }
.chart .baseline.danger { stroke: var(--bad); stroke-dasharray: 4 4; }
.legend { list-style: none; padding: 0; margin: 0; }
.legend li { display: flex; gap: 8px; align-items: center; padding: 3px 0; font-size: 14px; }
.legend li b { margin-left: auto; font-variant-numeric: tabular-nums; }
.legend.inline { display: flex; gap: 16px; justify-content: center; margin-top: 6px; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.donut { display: grid; grid-template-columns: minmax(160px, 220px) 1fr; gap: 20px; align-items: center; }
.donut.solo { grid-template-columns: minmax(160px, 220px); justify-content: center; margin-bottom: 6px; }
.donut-label { font-size: 11px; fill: var(--ink-soft); }
.donut-total { font-family: var(--display); font-size: 15px; font-weight: 800; fill: var(--ink); }

/* ── Категории ───────────────────────────────────────── */
.category-grid { display:grid; list-style:none; margin:0; padding:0 0 12px; }
.category-cell { position: relative; min-width: 0; }
.category-tile { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; min-width: 0; padding: 8px 2px; border: 0; background: transparent; color: var(--ink); }
.category-ring { display: flex; align-items: center; justify-content: center; width: min(66px, calc(100% - 4px)); aspect-ratio: 1; border: 2px solid var(--sepia-2); border-radius: 50%; background: rgba(255, 252, 246, .18); color: var(--ink-soft); }
.category-ring svg { width:36px; height:36px; stroke-width:1.5; }
.category-name { max-width:100%; overflow:hidden; white-space:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; text-overflow:ellipsis; font-size:12px; font-weight:500; line-height:1.25; min-height:30px; overflow-wrap:anywhere; }
.category-tile:active .category-ring { border-color: var(--select); background: rgba(138, 90, 52, .08); }
.category-hidden { font-size: 10px; color: var(--ink-faint); margin-top: -6px; }
.category-tile.is-hidden { opacity: .5; }
.category-remove { position: absolute; left: max(0px, calc(50% - 48px)); top: -5px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--ink-soft); padding: 0; }
.category-remove span { display: flex; width:18px; height:18px; align-items: center; justify-content: center; background: var(--paper); border: 1px solid var(--sepia-2); border-radius: 50%; }
.category-remove svg { width:12px; height:12px; stroke-width:1.5; }
.category-remove:active { color: var(--bad); }
.category-level { display: flex; align-items: center; gap:8px; margin:0 0 12px; }
.category-back { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1.5px solid var(--select); border-radius: 50%; background: transparent; color: var(--select); }
.category-back svg { width: 24px; height: 24px; }
.category-parent { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height:52px; padding:8px 0; border:0; border-bottom: 1px solid var(--sepia-2); background: transparent; color: var(--ink); text-align: left; }
.category-parent-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow:ellipsis; font-size:16px; font-weight:500; }
.category-chevron { display: flex; flex: none; align-items: center; }
.category-chevron svg { width: 20px; height: 20px; }

.report-category-icon { position: relative; }
.report-color { position: absolute; right: -2px; bottom: -2px; width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--card-2); }
.icon-picker { border: 1px solid var(--sepia); border-radius: 12px; background: var(--card-2); }
.icon-picker summary { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 10px 12px; min-height: 60px; list-style: none; }
.icon-picker summary::-webkit-details-marker { display: none; }
.icon-caption { flex: 1; min-width: 0; font-size: 14px; }
.icon-caption small { display: block; color: var(--ink-soft); font-size: 12px; margin-top: 2px; }
.icon-picker summary::after { content: ''; width: 7px; height: 7px; border-top: 1.5px solid var(--ink-soft); border-right: 1.5px solid var(--ink-soft); transform: rotate(45deg); margin-right: 4px; }
.icon-picker[open] summary::after { transform: rotate(135deg); }
.icon-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; border-top: 1px solid var(--sepia); padding: 10px; }
.icon-options button { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; min-height: 66px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--ink-soft); font-size: 10px; padding: 6px 2px; gap: 4px; }
.icon-options button[aria-pressed="true"] { border-color: var(--select); background: rgba(138, 90, 52, .08); color: var(--select); }
.icon-options button[aria-pressed="true"] .entry-icon { color: var(--select); }
.icon-options button > span:last-child { max-width: 100%; overflow-wrap: anywhere; text-align: center; }
.card > .row.between h3 { margin: 0; }
.card .list { list-style: none; margin: 8px -16px -14px; padding: 0; }
.card .list li { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 10px 16px; border-top: 1px solid var(--sepia); flex-wrap: wrap; }
.card .list li > span:first-child { flex: 1; min-width: 140px; display: flex; flex-direction: column; align-items: flex-start; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 500;
  background: var(--card-2); color: var(--ink); border: 1px solid var(--sepia); box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset;
}

/* ── Ещё ─────────────────────────────────────────────── */
/* Списки в «Ещё» (люди, устройства, копии): сверху название, ниже действия с переносом строк */
.rec-list { margin: 8px -16px 10px; }
.rec { padding: 10px 16px; border-top: 1px solid var(--sepia); }
.rec:first-child { border-top: 0; }
.rec-main { overflow-wrap: anywhere; }
.rec-card { padding: 0; }
.rec select { margin-top: 6px; }
.rec-meta { font-size: 13px; color: var(--ink-soft); margin-top: 2px; }
.rec-actions { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px; }
.rec-actions .link, .cur-actions .link { padding: 2px 0; font-size: 13.5px; }

/* Валюты: строка — код и курс, ниже действия; ничего не шире карточки */
.cur-list { margin: 10px -16px 12px; }
.cur-row { padding: 10px 16px; border-top: 1px solid var(--sepia); }
.cur-row:first-child { border-top: 0; }
.cur-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.cur-head b { font-family: var(--display); font-size: 16px; }
.cur-head .tag { margin-left: 0; }
.cur-rate { margin-left: auto; flex-direction: row; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-soft); white-space: nowrap; }
/* селектор сильнее общего правила полей (width: 100%) */
.cur-list .cur-rate input.rate:not([type="checkbox"]) { width: 96px; padding: 7px 10px; font-size: 15px; text-align: right; }
.cur-actions { display: flex; gap: 14px; margin-top: 2px; }
.cur-actions .link { padding: 2px 0; font-size: 13.5px; }

/* ── лист (форма) — лист кремовой бумаги ─────────────── */
dialog#modal {
  border: 1px solid var(--sepia); padding: 0; background: #f7f1e3; color: var(--ink);
  width: 100%; max-width: 720px; max-height: 92dvh; margin: auto auto 0; border-radius: 20px 20px 0 0;
  overflow: hidden; animation: up .22s ease-out;
}
dialog#modal[open] { display: flex; flex-direction: column; }
dialog#modal > form { display: flex; flex-direction: column; min-height: 0; max-height: 92dvh; }
dialog::backdrop { background: rgba(40, 30, 18, .45); }
/* Пока открыт лист, страница под ним не прокручивается и не пружинит: прокрутка формы
   не передаётся фону, даже когда форма дошла до края. */
html:has(dialog#modal[open]), html:has(dialog#modal[open]) body { overflow: hidden; overscroll-behavior: none; }
.sheet-form, .quick-body { overscroll-behavior: contain; }
@keyframes up { from { transform: translateY(30px); opacity: 0 } to { transform: none; opacity: 1 } }
@media (prefers-reduced-motion: reduce) { dialog#modal { animation: none; } }
.sheet-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--sepia); background: transparent; flex: none; }
.sheet-head .link:first-child { justify-self: start; }
.sheet-head .link:last-child { justify-self: end; }
.sheet-head b:focus { outline: none; }
.sheet-head b { font-family: var(--display); font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; color: var(--ink); }
.sheet-form { overflow-y: auto; padding: 14px 16px calc(24px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 12px; }
.sheet-form > * { flex-shrink: 0; }
.sheet-form .card { margin-bottom: 0; box-shadow: none; background: var(--card-2); }
.sheet-extra { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.sheet-extra button { border-radius: 12px !important; padding: 12px !important; font-weight: 600; }
.sheet-form p { margin: 0; }

/* ── быстрый ввод операции (js/quick.js): сетка категорий, короткая форма, калькулятор ── */
dialog#modal.quick-sheet { height: 92dvh; }
.quick { display: flex; flex-direction: column; height: 100%; min-height: 0; outline: none; }
.quick .chev { flex: none; color: var(--ink-faint); width: 16px; height: 16px; position: relative; }
.quick .chev::before {
  content: ""; position: absolute; left: 3.5px; top: 5.25px; width: 5.5px; height: 5.5px;
  border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; border-radius: 1px; transform: rotate(45deg);
}
.type-pick { position: relative; display: inline-flex; flex-direction: row; align-items: center; gap: 4px; justify-self: center; font-size: 16px; color: var(--ink); min-width: 0; max-width: 100%; }
.type-pick b { min-width: 0; }
.type-pick:focus-within { outline: 2px solid var(--select); outline-offset: 4px; border-radius: 4px; }
.type-pick .chev { transform: rotate(90deg) scale(.85); }
#modal .type-pick select { position: absolute; inset: 0; opacity: 0; width: 100%; font-size: 16px; cursor: pointer; }
.quick-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 20px calc(20px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 0; }
.quick-body > * { flex-shrink: 0; }
.quick .sheet-head { grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr); padding: 8px 16px; }
.quick .sheet-head .link { min-height: 44px; padding: 6px 0; font-size: 14px; }
.quick .sheet-head .type-pick { max-width: clamp(80px, calc(100vw - 220px), 150px); min-height: 44px; }
.q-selecting .quick-body { padding-top: 16px; }
.quick:not(.kp-off) .quick-body { padding-bottom: 18px; }
.quick .empty { padding: 30px 10px; }

.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 14px 6px; padding: 4px 0 8px; }
.cat-tile { border: 0; background: transparent; color: var(--ink); padding: 2px; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.cat-tile .ring {
  width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 25px;
  background: transparent; border: 1px solid transparent; transition: transform .12s;
}
.cat-tile .ring svg { width: 36px; height: 36px; stroke-width: 1.5; color: var(--ink-soft); }
.cat-tile:active .ring { transform: scale(.94); }
.cat-tile.on .ring { border-color: var(--select); background: rgba(138, 90, 52, .08); }
.cat-tile .nm { font-size: 12px; line-height: 1.2; text-align: center; hyphens: auto; overflow-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.q-back { display: flex; align-items: center; gap: 10px; padding: 0 0 12px; margin-bottom: 10px; border-bottom: 1px solid var(--sepia); }
.q-back .iconbtn { width: 44px; height: 44px; }
.q-back .iconbtn svg { width: 15px; height: 15px; }
.q-back b { font-family: var(--display); font-size: 15px; }
.q-group { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); margin: 8px 4px 6px; }
.quick .card.list { margin-bottom: 8px; box-shadow: none; background: var(--card-2); }

.q-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 64px; padding: 10px 0; border: 0; border-bottom: 1px solid var(--sepia); background: transparent; color: var(--ink); text-align: left; font-size: 15px; }
button.q-row:active, .q-cat:active { background: rgba(90, 70, 40, .06); }
.q-split { justify-content: space-between; }
.q-ico { flex: none; width: 28px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--ink-soft); }
.q-ico svg { width: 25px; height: 25px; stroke-width: 1.5; }
.q-balance { flex: none; max-width: 43%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.q-main { flex: 1; min-width: 0; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-main small { display: block; margin-bottom: 3px; }
.q-main small { font-size: 11.5px; color: var(--ink-faint); }
.q-cat { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--ink); padding: 6px 0; min-height: 44px; text-align: left; font-size: 15px; }
.q-amt { flex: none; max-width: 62%; min-height: 44px; border: 0; background: transparent; color: var(--ink); padding: 6px 2px 6px 10px; text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.q-amt > span { font-family: var(--display); font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.q-amt small { font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.q-amt.on > span { color: var(--select); }
.q-amt .caret { display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--select); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.q-date { justify-content: space-between; gap: 8px; }
.q-datetime { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; column-gap: 8px; }
.q-datefield { position: relative; display: flex; justify-content: center; min-height: 44px; padding: 4px 0; font-size: 14px; font-weight: 600; color: var(--ink); }
.q-datefield:focus-within { outline: 2px solid var(--select); outline-offset: 2px; border-radius: 4px; }
.q-datefield span { pointer-events: none; }
.q-timefield { min-width: 44px; color: var(--ink-soft); }
#modal .q-date input[type="date"], #modal .q-date input[type="time"] { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; opacity: 0; cursor: pointer; }
.q-date .q-cleared { margin-left: auto; }
.q-cleared { flex: none; border: 0; background: transparent; padding: 6px 0; min-height: 44px; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-faint); }
.q-cleared .tick { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; }
.q-cleared .tick svg { width: 24px; height: 24px; }
.q-cleared:not(.on) .tick { border: 1.5px solid currentColor; border-radius: 50%; }
.q-cleared:not(.on) .tick svg { visibility: hidden; }
.q-cleared.on { color: var(--ok); }
.q-extras { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 16px 0 10px; }
.q-extras button { border: 0; background: transparent; color: var(--ink-faint); padding: 2px 0; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 10px; font-weight: 500; min-width: 0; }
.q-extras .sign { width: 40px; height: 36px; display: flex; align-items: center; justify-content: center; color: var(--ink-soft); }
.q-extras .sign svg { width: 26px; height: 26px; stroke-width: 1.5; }
.q-extras button.on { color: var(--ink); }
.q-extras button.on .sign { color: var(--select); }
.q-owner { display: flex; align-items: center; gap: 10px; padding: 16px 0; margin-top: 6px; border-bottom: 1px solid var(--sepia); color: var(--ink-soft); font-size: 14px; }
.q-meta { margin: 14px 2px 0; }
.q-delete { margin-top: 10px; border: 1px solid var(--sepia); border-radius: 12px; background: var(--card-2); color: var(--bad); padding: 12px; font-weight: 600; }
.q-text { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; font-size: 12.5px; color: var(--ink-soft); }
.quick .q-text select, .operation-sheet select, .native-sheet select {
  -webkit-appearance: none; appearance: none; min-height: 44px; padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%237d7467' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 4.5 3 3 3-3'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 12px 12px;
}
.quick .errors { margin-top: 10px; }
.operation-sheet .tx-fields { display: flex; flex-direction: column; gap: 14px; }
.tx-requisites, .tx-explanation { border-top: 1px solid var(--sepia); padding-top: 14px; }
.tx-requisites summary, .tx-explanation summary { cursor: pointer; font-size: 13px; color: var(--ink-soft); min-height: 30px; }
.tx-requisites[open] > label, .tx-requisites[open] > .row { margin-top: 10px; }
.operation-sheet .tx-paid { flex-direction: row; align-items: center; gap: 8px; min-height: 44px; align-self: flex-end; }
.operation-sheet .tx-paid input { width: 20px; height: 20px; accent-color: var(--ok); }
.q-errors:empty { display: none; }
.q-keyboard { flex: none; }
.q-keyboard-head { display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-top: 1px solid var(--sepia); font-size: 11px; color: var(--ink-faint); }
.q-keyboard-head button { display: flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; border: 0; background: transparent; color: var(--ink-soft); }
.q-keyboard-head svg { width: 24px; height: 24px; }
.quick.kp-off .q-keyboard { display: none; }

.keypad {
  flex: none; display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: 54px; gap: 1px;
  background: var(--sepia); border-top: 1px solid var(--sepia); padding-bottom: env(safe-area-inset-bottom, 0px);
}
.keypad button { border: 0; border-radius: 0; background: var(--card-2); color: var(--ink); font-family: var(--display); font-size: 22px; font-weight: 600; padding: 0; user-select: none; -webkit-user-select: none; }
.keypad button:active { background: rgba(90, 70, 40, .14); }
.keypad .op { background: rgba(138, 90, 52, .14); color: var(--select); font-size: 24px; }
.keypad .fn { background: rgba(90, 70, 40, .07); font-size: 17px; }
.keypad .fn[data-key="="] { font-size: 24px; }
.keypad .wide { grid-column: span 2; font-size: 22px; }

/* Поля форм */
label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--ink-faint); font-weight: 500; }
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea {
  width: 100%; min-width: 0; border-radius: 12px; padding: 10px 12px; font-size: 16px;
  background: var(--card-2); color: var(--ink); border: 1px solid var(--sepia); color-scheme: light;
}
input::placeholder, textarea::placeholder { color: var(--ink-faint); }
/* Дата на iPhone по умолчанию шире поля и с текстом по центру — выравниваем как остальные поля. */
.sheet-form input[type="date"], .filters input[type="date"] { -webkit-appearance: none; appearance: none; min-height: 44px; text-align: left; }
.sheet-form input[type="date"]::-webkit-date-and-time-value { text-align: left; }
textarea.grow { resize: none; overflow: hidden; min-height: 44px; line-height: 1.4; overflow-wrap: anywhere; }
/* Фокус поля — мягкая подсветка в цветах оформления; iPhone показывает её при каждом касании списка */
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none; border-color: var(--select); box-shadow: 0 0 0 3px color-mix(in srgb, var(--select) 16%, transparent);
}
label.check { flex-direction: row; align-items: center; gap: 10px; color: var(--ink); font-size: 15px; font-weight: 400; }
label.check input { width: 20px; height: 20px; accent-color: var(--select); }
fieldset { border: 1px solid var(--sepia); background: var(--card-2); border-radius: 12px; padding: 10px 14px; margin: 0; display: flex; flex-direction: column; gap: 8px; }
fieldset.plain { border: 0; background: transparent; padding: 0; gap: 12px; }
fieldset.plain > .tx-fields { display: flex; flex-direction: column; gap: 12px; }
legend { font-size: 12.5px; color: var(--ink-faint); font-weight: 600; padding: 0; margin-bottom: 4px; }
.explain { background: rgba(90, 70, 40, .07); border: 1px solid var(--sepia); border-radius: 12px; padding: 12px 14px; font-size: 14px; }
.explain ul { margin: 4px 0; padding-left: 18px; }
.explain h4 { margin: 0 0 4px; }
.explain p { margin: 4px 0 0 !important; }
.splits { border-left: 3px solid var(--sepia-2); padding-left: 10px; display: flex; flex-direction: column; gap: 6px; }
.items { border-left: 3px solid var(--ok); padding-left: 10px; display: flex; flex-direction: column; gap: 6px; }
.item-row { display: grid; grid-template-columns: 2fr 1.6fr 0.7fr 1fr 0.9fr auto; gap: 6px; align-items: center; }
.item-row.head { font-size: 11.5px; color: var(--ink-faint); }
.item-row input, .item-row select { padding: 8px 10px; font-size: 14px; }
/* Поля мельче 16px заставляют Safari на iPhone приближать всю страницу при фокусе. */
@media (pointer: coarse) {
  .profile-select, .cur-list .cur-rate input.rate:not([type="checkbox"]), .item-row input, .item-row select { font-size: 16px; }
}

/* ── вход — как экран входа HomeHub ───────────────────── */
.welcome {
  position: relative; width: calc(100% - 32px); max-width: 380px; margin: 12vh auto; padding: 28px 22px;
  display: flex; flex-direction: column; gap: 12px;
  background: var(--card); border: 1px solid var(--sepia); border-radius: 22px; box-shadow: var(--card-shadow); color: var(--ink);
}
.welcome h1 { font-size: 22px; font-weight: 800; text-align: center; }
.welcome p { margin: 0; color: var(--ink-soft); font-size: 14px; text-align: center; }
.welcome .btn.primary { margin-top: 4px; }
.lock-mark {
  width: 48px; height: 48px; margin: 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--select); color: var(--select-fg); box-shadow: 0 3px 8px -2px rgba(138, 90, 52, .6), inset 0 0 0 2px rgba(255, 255, 255, .35);
}
.lock-mark svg { width: 24px; height: 24px; }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + 22px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 10px);
  background: rgba(52, 40, 28, .95); color: #fbf6ea; padding: 10px 16px; border-radius: 10px; font-size: 14px; z-index: 50; max-width: 90vw;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { background: var(--bad); color: #fbf6ea; }

@media (min-width: 600px) {
  dialog#modal { margin: auto; border-radius: 20px; max-width: 560px; max-height: 86dvh; }
  dialog#modal.wide { max-width: 720px; }
  dialog#modal > form { max-height: 86dvh; }
  dialog#modal.quick-sheet { max-width: 480px; height: min(780px, 86dvh); }
  dialog#modal.quick-sheet:has(.quick.kp-off):not(.q-selecting) { height: auto; }
  dialog#modal.quick-sheet:has(.quick.kp-off):not(.q-selecting) .quick { max-height: 86dvh; }
  dialog#modal.quick-sheet:has(.quick.kp-off):not(.q-selecting) .quick-body { flex: 0 1 auto; }
}
@media (max-width: 560px) {
  .row:not(.between):not(.end) { flex-direction: column; align-items: stretch; }
  .item-row { grid-template-columns: 1fr 1fr; }
  .item-row.head { display: none; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .kpis .kpi:last-child { grid-column: span 2; }
  .donut { grid-template-columns: 1fr; }
}

/* ── приветствие при входе: бумага, чернила, небо по времени суток (как на home.pervomay.org) ── */
.splash {
  position: fixed; inset: 0; z-index: 90; display: flex; justify-content: center; align-items: flex-end; /* небо сверху, слова внизу */
  padding: 24px max(24px, env(safe-area-inset-left, 0px)) max(16vh, calc(10vh + env(safe-area-inset-bottom, 0px)));
  overflow: hidden; min-height: 100lvh; cursor: pointer;
  background: var(--paper); color: var(--ink); transition: opacity .7s ease, visibility .7s;
  --sky-top: #efe6d0; --sky-bot: #f1e9d6; --sun: #d9a441; --line: rgba(90, 70, 40, .35);
}
body:has(#splash.p-morning:not([hidden])), .splash.p-morning { --sky-top: #f3e2c2; --sky-bot: #f1e9d6; --sun: #e0a94a; }
body:has(#splash.p-day:not([hidden])), .splash.p-day { --sky-top: #e9e4cf; --sky-bot: #f1e9d6; --sun: #d99b2f; }
body:has(#splash.p-evening:not([hidden])), .splash.p-evening { --sky-top: #e3c7ad; --sky-bot: #f0e4cf; --sun: #c9793b; }
body:has(#splash.p-night:not([hidden])), .splash.p-night { --sky-top: #c9c2b0; --sky-bot: #e4dcc8; --line: rgba(60, 48, 30, .45); }
.splash.out { opacity: 0; visibility: hidden; transition-duration:.18s; pointer-events:none; }
.splash .scene { position: absolute; inset: 0; pointer-events: none; }
.splash .scene::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--sky-top), var(--sky-bot) 62%); }
.splash .scene::after { content: ""; position: absolute; inset: 0; opacity: .9;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .26 0 0 0 0 .2 0 0 0 0 .12 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.splash .scene i { position: absolute; display: block; }
/* горизонт — тонкий чернильный штрих */
.splash .horizon { left: 8%; right: 8%; top: 46%; height: 1px; background: var(--line); opacity: 0; animation: spFade 1.2s ease .3s forwards; }
/* солнце всходит из-за горизонта, лучи медленно вращаются */
.splash .sun { left: 50%; top: 46%; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%;
  background: var(--sun); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35), 0 10px 30px -8px var(--sun);
  transform: translateY(70px) scale(.85); opacity: 0; animation: sunRise 2.2s cubic-bezier(.2, .7, .2, 1) .2s forwards; }
.splash.p-day .sun { animation-name: sunHigh; }
.splash.p-evening .sun { animation-name: sunSet; }
.splash .sun b { position: absolute; inset: -22px; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, var(--sun) 0 4deg, transparent 4deg 22.5deg); opacity: .35;
  -webkit-mask: radial-gradient(circle, transparent 54%, #000 56%); mask: radial-gradient(circle, transparent 54%, #000 56%);
  animation: spin 40s linear infinite; }
@keyframes sunRise { to { transform: translateY(-40px) scale(1); opacity: 1; } }
@keyframes sunHigh { to { transform: translateY(-100px) scale(1.05); opacity: 1; } }
@keyframes sunSet { from { transform: translateY(-30px); opacity: 1; } to { transform: translateY(22px) scale(.95); opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
/* луна и звёзды */
.splash .moon { left: 58%; top: 18%; width: 72px; height: 72px; border-radius: 50%; background: #f6efdd;
  box-shadow: inset -14px -8px 0 0 var(--sky-top), 0 8px 26px -10px rgba(60, 48, 30, .5); opacity: 0; transform: translateY(16px);
  animation: spRiseIn 1.6s ease .3s forwards; }
.splash .star { width: 4px; height: 4px; border-radius: 50%; background: #fff8e8; box-shadow: 0 0 6px 1px rgba(255, 248, 232, .8);
  left: calc(6% + var(--i) * 6.4%); top: calc(8% + (var(--r) * 1 + 1) * 18%); opacity: 0;
  animation: twinkle 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * .19s); }
@keyframes twinkle { 0%, 100% { opacity: .15; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.2); } }
@keyframes spFade { to { opacity: 1; } }
@keyframes spRiseIn { to { opacity: 1; transform: none; } }
/* слова появляются по одному, имя — цветом выделения */
.splash-line { position: relative; margin: 0; font-family: var(--display); font-size: clamp(28px, 8vw, 40px); font-weight: 800; text-align: center; letter-spacing: -.02em; text-wrap: balance; color: var(--ink); }
.splash-line .w { display: inline-block; opacity: 0; transform: translateY(14px) scale(.98); filter: blur(6px);
  animation: wordIn .7s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: calc(var(--i) * 120ms + 350ms); }
.splash-line .w.name { color: var(--select); }
@keyframes wordIn { to { opacity: 1; transform: none; filter: none; } }
.splash-line .sub { display: block; margin-top: 12px; font-family: var(--body); font-size: 15px; font-weight: 500; color: var(--ink-soft); opacity: 0; animation: spFade .8s ease 1.1s forwards; }
@media (prefers-reduced-motion: reduce) { .splash-line .w, .splash-line .sub { animation: none; opacity: 1; transform: none; filter: none; } .splash .scene i { animation: none !important; opacity: 1; transform: none; } }
/* пока заставка видна, фон под страницей (полоски у краёв на iOS) совпадает с низом её неба, а приложение под ней скрыто.
   Красим только html: фон body лёг бы поверх обоев на высоту содержимого, и после заставки ниже осталась бы полоса. */
html:has(.splash:not([hidden])) { background: #e9e1ce; }
html:has(.splash:not([hidden]).p-evening) { background: #e8dcc7; }
html:has(.splash:not([hidden]).p-night) { background: #dad3c1; }
html:has(.splash:not([hidden]).out) { background: var(--paper); }
body.splashing #app { visibility: hidden; }

/* iPhone Money Pro: общий каркас страниц и переходов; палитра Money Lab. */
.compact-head .topbar-in { min-height: 52px !important; border-bottom: 1px solid var(--sepia); gap: 8px; }
.compact-head .actions { margin-left: 0; }
.compact-head .sync { display: none; }
.nav-title { position: absolute; left: 88px; right: 88px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; font-size: 16px; font-weight: 600; color: var(--ink); }
.nav-back { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: transparent; color: var(--ink-soft); }
.nav-back svg { width: 22px; height: 22px; }
.nav-left, .nav-right { min-height: 44px; font-size: 14px; }
.nav-right { margin-left: auto; }
.nav-search { margin-left: auto; }
.month-pick { border: 0; background: transparent; }
.month-pick span { margin-left: 5px; }
.category-nav { flex:1; min-width:0; display:grid; grid-template-columns:minmax(44px,1fr) minmax(0,max-content) minmax(max-content,1fr); align-items:center; gap:8px; }
.category-nav .nav-back { justify-self:start; }
.category-nav .nav-right { justify-self:end; margin-left:0; white-space:nowrap; }
.category-kind-pick { min-width:0; max-width:100%; justify-self:center; color:var(--ink); }
#app .category-kind-pick select { appearance:none; width:auto; max-width:100%; min-width:0; border:0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='m2 4 4 4 4-4' fill='none' stroke='%237a6a55' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right center / 12px 12px; padding:8px 20px 8px 0; text-align:center; text-overflow:ellipsis; font-size:16px; font-weight:600; min-height:44px; }
.topbar-in:has(.category-nav) .actions { display:none; }
.category-grid, .cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 8px; }
.category-back { width: 36px; height: 36px; }
.cat-grid { padding-top: 10px; }
.q-category-cell { position: relative; min-width: 0; }
.cat-tile { gap: 8px; }
.cat-tile .ring { width: 62px; max-width: 100%; height: auto; aspect-ratio: 1; border: 2px solid var(--sepia-2); background: rgba(255,252,246,.18); }
.cat-tile .ring svg { width: 34px; height: 34px; }
.cat-tile .nm { font-size: 11.5px; min-height: 29px; line-height: 1.25; overflow-wrap: anywhere; }
.q-parent { display: flex; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--ink); min-width: 0; text-align: left; }
.q-parent b { text-align: left; overflow: hidden; text-overflow: ellipsis; }
.motion-ghost { contain: layout paint; }
.motion-hero { display: flex; align-items: center; justify-content: center; }
.motion-hero svg { width: 65%; height: 65%; }
.balance-summary { padding: 0 0 8px; }
.balance-strip { position: relative; isolation: isolate; height: 30px; padding: 5px 10px; margin: 4px 0; font-size: 14px; font-weight: 600; }
.balance-strip::before { content:''; position:absolute; inset:0 auto 0 0; width:max(2px,var(--size)); z-index:-1; }
.balance-strip.assets::before { background:rgba(63,125,78,.24); }
.balance-strip.debts::before { background:rgba(74,90,156,.24); }
.wallet-section { margin: 10px 0 16px; }
.wallet-section-head, .budget-section-head { display:flex; justify-content:space-between; gap:8px; padding:6px 4px; margin:0; font-size:12px; font-weight:500; text-transform:uppercase; color:var(--ink-soft); background:var(--sepia); }
.wallet-section-head span { white-space: nowrap; }
.wallet-list { border-bottom: 1px solid var(--sepia); }
.wallet-line { display:flex; align-items:center; border-top:1px solid var(--sepia); }
.wallet-line .entry { flex:1; min-width:0; border:0; padding:8px 4px; min-height:58px; }
.wallet-amount { font-size:14px; font-variant-numeric:tabular-nums; }
.wallet-remove { flex:none; border:0; border-radius:50%; width:24px; height:24px; background:var(--bad); color:var(--card-2); margin-right:8px; }
.wallet-order { flex:none; border:0; background:transparent; color:var(--ink-faint); width:44px; height:44px; font-size:20px; }
.wallet-tools { display:flex; flex-wrap:wrap; gap:18px; padding-top:24px; }
.wallet-tools .link { min-height:44px; }
.report-menu { display:flex; flex-direction:column; }
.report-menu button { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:54px; padding:10px 4px; border:0; border-bottom:1px solid var(--sepia); background:transparent; color:var(--ink); text-align:left; }
.report-menu svg { width:18px; height:18px; color:var(--ink-soft); }
.report-dates { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) 40px; gap:1px; margin-bottom:14px; background:var(--sepia); }
.report-dates button { text-align:left; border:0; padding:8px 10px; background:var(--card); color:var(--ink); min-width:0; min-height:44px; font-size:12px; }
.report-dates small { display:block; color:var(--ink-soft); font-size:10px; }
.report-dates svg { width:20px; height:20px; }
.report-controls { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 14px; }
.report-controls > * { min-width:0; flex:1; }
.report-chart { padding:20px 4px; }
.report-chart.tall { min-height:65dvh; display:flex; align-items:stretch; }
.report-chart.tall svg { width:100%; min-height:50dvh; }
.budget-history { display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); gap:5px; height:88px; margin-bottom:10px; }
.budget-history button { display:flex; flex-direction:column; justify-content:flex-end; gap:4px; border:0; padding:4px 0; background:transparent; min-width:0; color:var(--ink-soft); }
.budget-history small { font-size:9px; }
.budget-history .on { border-bottom:2px solid var(--select); }
.budget-bar { width:100%; height:48px; background:linear-gradient(to top,rgba(74,90,156,.5) var(--actual),rgba(90,70,40,.09) var(--actual)); }
.budget-section { margin:0 0 18px; }
.budget-section-head { margin-bottom:10px; }
.budget-section-head span { font-size:11px; white-space:nowrap; }
.budget-values { display:flex; flex-direction:column; align-items:center; color:var(--ink-soft); font-size:10px; line-height:1.25; margin-top:-6px; }
.budget-values b { font-weight:500; color:var(--indigo); }
.budget-grid .category-ring { background:conic-gradient(rgba(74,90,156,.25) var(--progress),transparent var(--progress)); }
.budget-editor-icon svg { width:56px; height:56px; color:var(--ink-soft); }
.directory-link { margin:12px 0; }
@media (min-width:760px) {
 .category-ring { width:100px; }
 .category-ring svg { width:46px; height:46px; }
 .category-name { font-size:14px; min-height:35px; }
 .category-grid { gap:22px 16px; }
 .category-remove { left:max(0px,calc(50% - 66px)); }
}
@media (max-width:759px) {
 dialog#modal.native-sheet { width:100%; max-width:none; height:100dvh; max-height:100dvh; margin:0; border:0; border-radius:0; background:var(--paper); animation:none; }
 dialog#modal.native-sheet > form { flex:1; max-height:100dvh; }
 .native-sheet .sheet-head { padding-top:max(8px,env(safe-area-inset-top,0px)); min-height:54px; }
 .native-sheet .sheet-form { padding-bottom:calc(24px + env(safe-area-inset-bottom,0px)); }
 .native-sheet .sheet-head .link { min-height:44px; }
 .native-sheet .quick { height:100%; }
 .native-sheet .quick-body { padding-left:12px; padding-right:12px; }
 .native-sheet .keypad { grid-auto-rows:52px; }
 .native-sheet .cat-grid { gap:16px 8px; }
}
@media (prefers-reduced-motion:reduce) {
 .category-ring, .category-tile, .cat-tile { transition:none; }
}
.entity-heading { position:relative; display:grid; grid-template-columns:64px minmax(0,1fr); gap:12px; align-items:center; margin:6px 0 12px; }
.entity-heading .icon-picker { position:static; border:0; background:transparent; }
.entity-heading .icon-picker summary { width:64px; height:64px; padding:0; border:1px solid var(--sepia-2); border-radius:50%; justify-content:center; background:var(--sepia); }
.entity-heading .icon-caption,.entity-heading .icon-picker summary::after { display:none; }
.entity-heading .icon-options { position:absolute; left:0; top:76px; width:100%; max-height:55dvh; overflow-y:auto; z-index:3; background:var(--card-2); border:1px solid var(--sepia); border-radius:12px; }
.entity-heading input[name="name"] { font-size:20px; font-weight:500; min-height:64px; }
.report-overview { min-height:32dvh; display:flex; align-items:center; justify-content:center; }
.report-overview .donut { width:230px; }
.empty-donut { border:2px solid var(--sepia-2); border-radius:50%; width:150px; height:150px; display:flex; align-items:center; justify-content:center; flex-direction:column; color:var(--ink-soft); gap:6px; }
.report-overview-list button { display:flex; align-items:center; gap:10px; min-height:48px; width:100%; border:0; border-bottom:1px solid var(--sepia); background:transparent; color:var(--ink); padding:8px 4px; }
.report-overview-list button b { margin-left:auto; }
.report-table-head { display:grid; grid-template-columns:68px minmax(0,1fr) 100px; background:var(--sepia); padding:6px 4px; gap:6px; font-size:12px; }
.report-table-head span:last-child { text-align:right; }
.report-tx-row.entry { display:grid; grid-template-columns:68px minmax(0,1fr) auto; align-items:center; gap:6px; padding:8px 4px; }
.report-tx-date { font-size:10px; color:var(--ink-soft); overflow-wrap:anywhere; }
.report-tx-body { display:flex; align-items:center; gap:6px; min-width:0; }
.report-tx-body .entry-icon { width:20px; height:20px; }
.report-tx-body .entry-icon svg { width:18px; height:18px; }
.report-tx-row .tx-heading { font-size:12px; }
.report-tx-row .meta { font-size:10px; }
.report-tx-row .aside b { font-size:11px; font-weight:500; }
.report-tx-row:nth-child(odd) { background:rgba(90,70,40,.05); }
.report-table-total { text-align:right; font-size:12px; padding:12px 4px; color:var(--ink-soft); }
.motion-symbol { display:block; }
.nav-filter { margin-left:auto; }
.compact-head .iconbtn { border:0; background:transparent; }
.native-value { display:flex; justify-content:space-between; gap:12px; border-bottom:1px solid var(--sepia); padding:12px 2px; }
.native-value span { color:var(--ink-soft); }
.native-value b { font-weight:500; }
.native-advanced { border-top:1px solid var(--sepia); padding-top:10px; }
.native-advanced summary { min-height:44px; color:var(--ink-soft); cursor:pointer; }
.native-advanced[open] { display:flex; flex-direction:column; gap:12px; }

/* Выбор уведомлений и состояние подключения показаны отдельно. */
.push-toggle { display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; text-align:left; }
.push-switch { position:relative; flex:none; width:42px; height:26px; border-radius:20px; background:var(--line, #c6c0b3); }
.push-switch::after { content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fffaf0; transition:transform .15s; }
.push-toggle[aria-checked="true"] .push-switch { background:var(--select, #925333); }
.push-toggle[aria-checked="true"] .push-switch::after { transform:translateX(16px); }
@media (prefers-reduced-motion:reduce) { .push-switch::after { transition:none; } }

/* Личное оформление владельца: настройки изолированы по аккаунту и профилю. */
body[data-palette="tiffany"] {
  --paper:var(--scheme-paper,#d9f0ec); --select:#087f79; --select-fg:#fff;
  --ink:#203b38; --ink-soft:rgba(32,59,56,.75); --ink-faint:rgba(32,59,56,.62);
  --card:rgba(231,248,243,.92); --card-2:#edf8f4; --sepia:rgba(32,59,56,.18); --sepia-2:rgba(32,59,56,.3);
}
body[data-palette="tiffany"] .tabbar { background:var(--card); }
body[data-palette="tiffany"] .topbar::before { background:linear-gradient(var(--paper),transparent); }
body.custom-wallpaper .wallpaper { background:var(--personal-wallpaper) center / cover no-repeat; }
body.custom-wallpaper .wallpaper::before,body.custom-wallpaper .wallpaper::after,body.custom-wallpaper .wallpaper .grain { display:none; }
body.custom-wallpaper { --personal-glass:transparent; --personal-bar:transparent; }
body.custom-wallpaper .view :is(.card,.balance-summary,.budget-history,.category-level,.wallet-list,.budget-grid,.category-grid,.report-overview,.report-overview-list,.report-menu,.today-calendar),
body.custom-wallpaper .topbar,body.custom-wallpaper .tabbar {
  background:var(--personal-glass); color:var(--ink);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-color:rgba(255,255,255,.4); box-shadow:0 8px 24px -14px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.3);
  transition:border-color .2s; --ink:#14201e; --ink-soft:#1c2927; --ink-faint:#24312f;
}
body.custom-wallpaper .view :is(.balance-summary,.budget-history,.category-level,.wallet-list,.budget-grid,.category-grid,.report-overview,.report-overview-list,.report-menu,.today-calendar) { border-radius:16px; padding:12px; }
body.custom-wallpaper .topbar::before { display:none; }
body.custom-wallpaper .tabbar { background:var(--personal-bar); }
body.custom-wallpaper [data-wallpaper-ink] { color:var(--wall-text,var(--ink)); }
body.custom-wallpaper .view :is(.mp-title,.day-caption,.mp-totals,.wallet-section-head,.budget-section-head,.empty,.wallet-tools,.report-table-total),
body.custom-wallpaper .view > :is(h2,p) { color:var(--wall-text,var(--ink)); text-shadow:var(--wall-shadow,none); }
body.custom-wallpaper [data-wallpaper-ink="light"] :is(.title,.nav-title,.name,.meta,.muted,.tab,.day-big,.cal-title,.day-number,h3) { text-shadow:0 1px 2px rgba(0,0,0,.45); }
/* Поля и кнопки с собственной светлой заливкой сохраняют тёмные чернила. */
body.custom-wallpaper :is(.card,.topbar,.today-calendar) :is(input,textarea,select,.btn,button.small,.segmented,.iconbtn) {
  --ink:#20302c; --ink-soft:#374d46; --ink-faint:#4a5f57; --select:#684126; --select-fg:#fff; --accent:#23416e; --bad:#7b231b;
  color:var(--ink); text-shadow:none;
}
body.custom-wallpaper[data-palette="tiffany"] :is(.card,.topbar,.today-calendar) :is(input,textarea,select,.btn,button.small,.segmented,.iconbtn) { --select:#0c655f; }
body.custom-wallpaper .topbar.custom-head .plus-slot .iconbtn { color:var(--wall-text,var(--ink)); border-color:currentColor; }
body.custom-wallpaper .amt-pill:not(.neutral) { color:var(--select-fg); text-shadow:none; }
.palette-picker,.wallpaper-picker { min-width:0; border:0; padding:0; margin:12px 0; }
.palette-picker legend,.wallpaper-picker legend { margin-bottom:10px; font-weight:700; }
.palette-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.palette-options button { display:flex; align-items:center; gap:10px; min-height:48px; }
.palette-options button[aria-pressed="true"] { outline:2px solid var(--select); outline-offset:-2px; }
.palette-options i { width:24px; height:24px; border:1px solid var(--sepia-2); border-radius:50%; }
.wallpaper-picker { display:grid; gap:10px; }
.wallpaper-picker .hint { margin:0; }
.wallpaper-preview { position:relative; height:140px; border-radius:14px; overflow:hidden; background:var(--paper); }
.wallpaper-preview img { width:100%; height:100%; object-fit:cover; }
.wallpaper-preview span { position:absolute; left:10px; bottom:10px; padding:5px 9px; border-radius:8px; background:rgba(10,20,30,.65); color:#fff; font-size:12px; }

body.custom-wallpaper .card :is(.btn.primary,button.primary) { color:var(--select-fg); }
body.custom-wallpaper .card button.danger { color:var(--bad); }
body.custom-wallpaper .card .link { color:var(--accent); }