/* Светлая тема — как главная (web/home.css): разбор продолжает сайт, а не выглядит другим продуктом. */
html.light {
  color-scheme: light;
  --bg: #f4f5f4; --surface: #ffffff; --surface2: #eef0ef; --border: #e3e7e6;
  --text: #0b1112; --sec: #3d4748; --muted: #6b7677; --dim: #9aa3a2;
  --accent: #0e6b60; --accent-ink: #ffffff; --live: #0e8a7a; --brand: #0e6b60;
  --plus: #138a4f; --minus: #d43d3d; --warn: #b8690e; --grid: #e6eaea;
}
html.light body { background: radial-gradient(1200px 700px at 50% 0, #ffffff, var(--bg) 70%); }
html.light .site-nav a { color: #2a3334; }
html.light .site-nav a:hover, html.light .site-nav a[aria-current=page] { background: #e8ebea; color: var(--text); }
.panel, .kpi, .tabs button, .bar-truth, .bar-files, .files-dlg, dialog { box-shadow: 0 1px 2px #0b11120a; }

/* `hidden` сильнее любого `display` в правилах ниже: «Показать ещё» на конце списка не должна оставаться. */
[hidden] { display: none !important; }
/* Разбор выписок — дизайн v4 (research/web-razbor/README.md): герой с капибарой, плитки сводки,
   бублик категорий рядом с таблицей, модалки с операциями. Общие цвета и шапка — site.css.
   Кегль — не меньше 13px (тест web/test/pageText.test.ts). */

/* Пример на выдуманных данных */
.demo-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin: 4px 0 14px; padding: 14px 18px; border-radius: 18px; background: #fbf5e8; border: 1px solid #d9a44177; color: var(--sec); font-size: 15px; }
.demo-bar b { color: var(--text); }

/* Герой */
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; align-items: center; min-height: 440px; margin-top: 8px; padding: 48px 48px 40px; border-radius: 40px; overflow: hidden;
  background: radial-gradient(900px 500px at 85% 20%, #0e6b6066, transparent 60%), linear-gradient(120deg, var(--living-base), #0a2826 60%, #0c3b36); }
.hero h1 { font-size: 54px; line-height: 1.04; letter-spacing: -2.2px; margin: 14px 0 16px; font-weight: 800; }
.hero h1 em { font-style: normal; color: var(--live); }
.hero-sub { font-size: 18px; color: var(--sec); margin: 0 0 28px; max-width: 600px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-art { position: relative; height: 100%; min-height: 340px; }
.halo { position: absolute; inset: 10% 5% 0; border-radius: 50%; background: radial-gradient(closest-side, #ffffff2e, transparent); }
.mascot { position: absolute; right: 0; bottom: -14%; width: 84%; max-width: 440px; height: auto; filter: drop-shadow(0 30px 40px #00000066); }
.bubble { position: absolute; display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 16px; border-radius: 18px; border: 1px solid #0b11121a; background: #071a19d9; backdrop-filter: blur(8px); font-size: 15px; font-weight: 700; color: var(--text); max-width: 300px; }
.bubble small { display: block; font-size: 13px; font-weight: 500; color: var(--sec); margin-top: 2px; }
button.bubble { cursor: pointer; }
button.bubble:hover { border-color: var(--accent); }
.bubble-top { top: 0; right: 0; }
.bubble-bottom { bottom: 8%; left: -6%; }
.bubble-icon { flex: none; width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-weight: 800; }
.ring { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-weight: 800;
  background: radial-gradient(closest-side, #071a19 76%, transparent 78%), conic-gradient(var(--ring, var(--live)) calc(var(--p) * 1%), #0b11121a 0); }
.ring > span { white-space: nowrap; font-size: 13px; letter-spacing: -0.4px; }

/* Пустая страница: загрузка */
.drop { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 26px 28px; border-radius: 22px; border: 2px dashed #0e8a7a66; background: #ffffffcc; cursor: pointer; max-width: 560px; transition: border-color .15s, background .15s; }
.drop:hover, body.dragging .drop { border-color: var(--live); background: #dcefea; }
.drop-title { font-weight: 800; font-size: 20px; }
.drop-title::before { content: '＋ '; color: var(--live); }
.drop-sub { color: var(--sec); font-size: 15px; }
.drop-banks { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 14px; font-size: 15px; font-weight: 600; }
.drop-banks > span:first-child { color: var(--muted); font-weight: 500; }
.drop-banks { gap: 8px; }
.drop-bank .bb { width: 30px; height: 30px; border-radius: 9px; }
.drop:focus-within, .btn:focus-within { outline: 2px solid var(--live); outline-offset: 3px; }
.private { margin: 16px 0 0; color: var(--sec); font-size: 14px; max-width: 560px; }
body.dragging::after { content: 'Отпустите — разберём выписку'; position: fixed; inset: 12px; z-index: 30; display: grid; place-items: center; border: 2px dashed var(--live); border-radius: 28px; background: #031416e6; color: var(--live); font-size: 24px; font-weight: 800; pointer-events: none; }
.howto { margin-top: 40px; }
.howto h2, .promise b { letter-spacing: -0.4px; }
.howto-banks { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.howto-bank { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); font-size: 14px; color: var(--sec); min-width: 220px; }
.howto-bank .bank { font-size: 16px; color: var(--text); font-weight: 700; }
.promise { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px; }
.promise div { padding: 22px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); }
.promise b { display: block; font-size: 18px; margin-bottom: 6px; }
.promise span { color: var(--sec); font-size: 15px; }

/* Шапка отчёта: разделы, сколько понятно, выписки и «добавить». Прилипает к верху при прокрутке —
   тогда в ней появляется логотип, а фон отделяет её от отчёта. */
.bar-mark { height: 0; }
.bar { position: sticky; top: 0; z-index: 20; margin: 0 0 18px; padding: 10px 0; }
/* Фон прилипшей шапки — во всю ширину окна, а не колонки страницы. */
.bar::before { content: ''; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); background: #f4f5f4eb; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--border), 0 12px 30px #0006; opacity: 0; transition: opacity .2s; pointer-events: none; }
.bar.stuck::before { opacity: 1; }
.bar-in { display: flex; align-items: center; gap: 12px; }
.bar-logo { flex: none; width: 0; opacity: 0; overflow: hidden; transition: width .2s, opacity .2s; }
.bar-logo img { display: block; width: 32px; height: 32px; border-radius: 9px; }
.bar.stuck .bar-logo { width: 32px; opacity: 1; }
.bar-side { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.bar-truth, .bar-files { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px 0 8px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 14px; white-space: nowrap; }
.bar-truth:hover, .bar-files:hover { border-color: #c9d1d0; }
.bar-truth > span:last-child { display: grid; line-height: 1.15; text-align: left; color: var(--sec); }
.bar-truth b { color: var(--text); }
.bar-truth small { font-size: 13px; color: var(--muted); }
.bar-truth.done { cursor: default; }
.ring.sm { width: 28px; height: 28px; --ring: var(--accent); background: radial-gradient(closest-side, var(--surface) 68%, transparent 71%), conic-gradient(var(--ring) calc(var(--p) * 1%), #0b11121a 0); }
.bar-files { padding-left: 10px; font-weight: 700; }
.stack { display: inline-flex; }
.stack .bank + .bank { margin-left: -6px; }
.stack .bb { width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--surface); box-sizing: content-box; }
.bar-add { height: 44px; padding: 0 18px; border-radius: 14px; font-size: 15px; gap: 6px; }
.bar-add > span:first-of-type { font-size: 18px; line-height: 1; }
.bar-add:focus-within { outline: 2px solid var(--live); outline-offset: 3px; }

/* Выписки: строкой — банк, счёт, период и остаток; клик — операции, ✕ — убрать. */
.files { list-style: none; margin: 0; padding: 0; display: grid; }
.files li { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid #edf0ef; }
.file-hit { flex: 1; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 8px; margin-left: -8px; border-radius: 12px; cursor: pointer; outline: none; }
.file-hit:hover, .file-hit:focus-visible { background: #0b11120a; }
.file-hit.empty { cursor: default; }
.file-hit.empty:hover { background: none; }
.file-t { display: grid; min-width: 0; }
.file-t b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-t b span { font-weight: 500; color: var(--sec); }
.file-t small { color: var(--muted); font-size: 13px; }
.file-hit strong { font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.files .x { flex: none; width: 32px; height: 32px; border-radius: 10px; border: 0; background: transparent; color: var(--muted); font-size: 13px; opacity: .55; }
.files li:hover .x, .files .x:focus-visible { opacity: 1; }
.files .x:hover { color: var(--text); background: var(--surface2); }
.file-add { position: relative; display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 14px; border-radius: 16px; border: 1.5px dashed #0e8a7a55; background: #eef7f4; cursor: pointer; transition: border-color .15s, background .15s; }
.file-add:hover, body.dragging .file-add { border-color: var(--live); background: #dcefea; }
.file-add:focus-within { outline: 2px solid var(--live); outline-offset: 3px; }
.file-add-i { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--live); color: #fff; font-size: 18px; font-weight: 800; }
.file-add b { display: block; font-size: 15px; }
.file-add small { display: block; color: var(--muted); font-size: 13px; }
.files-dlg { width: min(560px, calc(100vw - 32px)); }
.files-body { padding: 8px 24px 22px; }
.notes { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.notes li { padding: 12px 16px; border-radius: 14px; background: #fdf1e7; border: 1px solid #f0d2b8; color: var(--sec); font-size: 15px; }
.notes b { color: var(--text); }
.notes .notes-x { background: none; border: 0; padding: 0 4px; }
.busy { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 40; padding: 12px 20px; border-radius: 14px; background: var(--surface2); border: 1px solid var(--border); font-weight: 700; box-shadow: 0 10px 30px #0008; }

/* Вкладки — в шапке отчёта */
.tabs { display: flex; gap: 6px; }
.tabs button { border: 1px solid var(--border); background: var(--surface); color: var(--sec); border-radius: 14px; height: 44px; padding: 0 18px; font-weight: 700; font-size: 15px; white-space: nowrap; }
.tabs button:hover { color: var(--text); }
.tabs button.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.tabs small { font-size: 13px; opacity: .7; margin-left: 4px; }
.tab > .hero:first-child { margin-top: 0; }
.tab > .hero + .kpis, .tab > .kpis { margin-top: 20px; }

/* Плитки сводки */
.kpis { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 14px; }
.kpis.n3 { grid-template-columns: 1.3fr 1fr 1fr; }
.kpis.n2 { grid-template-columns: 1.3fr 1fr; }
.kpi { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 22px; border-radius: 22px; border: 1px solid var(--border); background: var(--surface); transition: border-color .15s, transform .15s; }
.kpi:hover { border-color: #c9d1d0; transform: translateY(-1px); }
.kpi-main { background: linear-gradient(135deg, #0a2a27, #0e6b60); border-color: #1d5c55; }
.kpi .l { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; color: var(--sec); font-weight: 600; }
.kpi .l i { font-style: normal; color: var(--accent); }
.kpi .v { font-size: 34px; font-weight: 800; letter-spacing: -1.4px; line-height: 1.1; }
.kpi .h { font-size: 14px; color: var(--muted); }
/* «Доходы ждут ответа»: число неуверенное — приглушено, с подписью, плитка ведёт к вопросам. */
.kpi-ask { border-color: #d9a44155; cursor: pointer; }
.kpi-ask .v { color: var(--sec); }
.kpi .v small { display: inline-block; margin-left: 8px; font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--accent); vertical-align: middle; }
.kpi-main .h { color: var(--sec); }
.kpi-main .h b { color: var(--text); }
.kpi-hit { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.spark { display: flex; align-items: stretch; height: 44px; margin-top: 8px; }
/* Месяц ловит курсор по всей высоте и без щелей: низкий столбик тоже легко навести. */
.spark > span { flex: 1; min-width: 3px; display: flex; align-items: flex-end; padding: 0 1.5px; cursor: pointer; }
.spark i { display: block; width: 100%; border-radius: 3px 3px 1px 1px; background: #0e8a7a55; transition: background .15s; }
.spark > span.top i { background: var(--accent); }
.spark > span:hover i, .spark > span:focus-visible i { background: var(--live); }
.spark > span:focus-visible { outline: none; }
.spark.income i { background: #0e8a7a40; }
.spark.income > span.top i { background: var(--live); }
.growth { margin-top: 20px; }
.growth .section-head { align-items: center; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 0; }
.growth .section-head h2 { flex: 1 1 auto; margin: 36px 0 12px; }
.growth .section-head h2 small { white-space: nowrap; }
.growth .section-head .bank-chips { flex: none; margin-top: 24px; }
/* Категория места: своя кнопка и своё меню (#menu), а не системный select. */
.chip.pick { flex: none; }
.chip.pick i { font-style: normal; color: var(--muted); margin-left: 4px; }
.chip.pick:hover, .chip.pick[aria-expanded="true"] { border-color: var(--live); }
.pick-dlg { width: min(440px, calc(100vw - 32px)); }
.pick-body { padding: 14px 16px 16px; }
#pick-q { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface2); font-size: 16px; }
#pick-q:focus { outline: none; border-color: var(--live); }
#pick-l { display: grid; gap: 2px; max-height: min(420px, 50vh); overflow-y: auto; margin-top: 10px; }
#pick-l button { text-align: left; border: 0; background: none; color: var(--text); font-size: 15px; font-weight: 600; padding: 10px 12px; border-radius: 10px; }
#pick-l button:hover, #pick-l button.sel { background: var(--surface2); color: var(--live); }
#pick-l p { margin: 10px 12px; font-size: 14px; }
/* Банк на графиках обзора. */
.bank-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.bank-chip { padding: 5px 12px 5px 6px; }
.bank-chip .bb { width: 20px; height: 20px; border-radius: 6px; }
.bank-chip .bank { gap: 7px; }
.chip.on .bank { color: #fff; }
.check { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 14px; color: var(--sec); cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--live); margin: 0; }
.nocat-app { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-top: 16px; padding: 14px 16px; border-radius: 16px; background: var(--surface2); }
.nocat-app p { margin: 0; font-size: 15px; color: var(--sec); max-width: 720px; }
.nocat-app b { color: var(--text); }
/* «Что выросло и что упало»: линии категорий, подложкой — сравниваемые кварталы. */
.growth-chart { min-height: 220px; margin-bottom: 12px; }
.span-before { fill: #0b11120a; }
.span-after { fill: #d9a44118; }
.growth-chart circle { pointer-events: none; }
.growth-chart .gband { fill: transparent; cursor: pointer; outline: none; }
.growth-chart .gband:hover, .growth-chart .gband:focus-visible { fill: #0b11120a; }
.growth-chart path, .growth-chart circle { transition: opacity .12s, stroke-width .12s; }
.growth-chart.dim :is(path, circle):not(.hot) { opacity: .15; }
.growth-chart.dim .hot { opacity: 1; stroke-width: 4; }
.sparkline { display: block; }
.growth-table .num small { display: block; font-size: 13px; }

/* Одна выписка → «добавьте ещё» */
.nudge { max-width: 620px; padding: 18px 20px; border-radius: 20px; border: 1px solid #d9a44166; background: #ffffff; }
.nudge p { margin: 0 0 14px; font-size: 16px; font-weight: 600; color: var(--text); }
.nudge-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.nudge-banks { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; }
.nudge-banks > span { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.nudge-banks small { color: var(--muted); font-weight: 500; font-size: 13px; }

/* Панели и таблицы */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.panel.pad { padding: 26px; }
h2 { font-size: 24px; letter-spacing: -0.6px; margin: 36px 0 12px; }
h2 small { font-size: 15px; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-left: 8px; }
.panel h2 { margin: 0; }
.section-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.section-head p { margin: 4px 0 0; color: var(--muted); font-size: 15px; }
.section-head.big h2 { font-size: 28px; margin-top: 0; }
.tag { flex: none; font-size: 13px; color: var(--sec); padding: 5px 10px; border-radius: 999px; background: var(--surface2); }
.grid-chart { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 16px; margin-top: 20px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.tw { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th { text-align: left; font-weight: 600; font-size: 13px; color: var(--muted); padding: 14px 18px; border-bottom: 1px solid var(--border); white-space: nowrap; }
td { padding: 13px 18px; border-bottom: 1px solid #edf0ef; vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.sub { font-size: 13px; color: var(--muted); margin-top: 2px; }
.sub .bank { gap: 6px; vertical-align: -4px; color: var(--sec); }
.sub .bb { width: 18px; height: 18px; border-radius: 5px; }
/* Приход — зелёным, уход — красным (те же цвета сумм, что в приложении: amountPlus / amountMinus). */
.plus { color: var(--plus); }
.minus { color: var(--minus); }
.warn { color: var(--warn); }
tr.click { cursor: pointer; }
tr.click:hover td { background: #0b111208; }
.chev { width: 28px; color: var(--dim); text-align: right; }
tr.click:hover .chev { color: var(--accent); }
.cell-note { white-space: normal; font-size: 14px; line-height: 1.45; }
.nm { display: inline-flex; align-items: center; gap: 10px; }
.dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.pill { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.pill.warn { background: #b8690e1a; color: var(--warn); }
.pill.ok { background: #0e8a7a14; color: var(--live); }
.pill.dim { background: var(--surface2); color: var(--muted); }
.bank { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.bb { flex: none; width: 26px; height: 26px; border-radius: 8px; display: inline-grid; place-items: center; font-size: 13px; font-weight: 800; }
.bb-logo { overflow: hidden; }
.bb-logo img { width: 100%; height: 100%; display: block; object-fit: cover; }

/* График */
.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; color: var(--sec); margin-bottom: 8px; }
.legend-banks { display: inline-flex; flex-wrap: wrap; gap: 6px 12px; }
.legend-banks > span i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; margin-right: 6px; vertical-align: -1px; }
.month:hover .bar-bank, .month:focus-visible .bar-bank { filter: brightness(1.15); }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 6px; vertical-align: -1px; }
.sw-spent, .bar-spent { background: var(--accent); fill: var(--accent); }
.sw-income, .bar-income { background: var(--live); fill: var(--live); }
.bar-pending { fill: url(#hatch); }
.sw-pending { background: repeating-linear-gradient(45deg, #e9eded 0 3px, #b9c2c1 3px 5px); }
/* Панель графика тянется до соседней «Счета из выписок»; график занимает всё, что ей дали. */
.grid-chart > .panel.pad { display: flex; flex-direction: column; }
.chart { flex: 1; min-height: 280px; }
.chart-svg { width: 100%; height: auto; display: block; }
.gridline { stroke: var(--grid); stroke-dasharray: 3 5; }
.axis { font-size: 13px; fill: var(--muted); font-family: var(--f); }
.month { cursor: pointer; outline: none; }
.month .hit { fill: transparent; }
.month:hover .hit, .month:focus-visible .hit { fill: #0b11120a; }
.month:hover .bar-spent, .month:focus-visible .bar-spent { filter: brightness(1.15); }

.accounts-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; font-size: 15px; color: var(--sec); }
.accounts-total b { color: var(--text); font-size: 20px; }

/* Это ваши счета? */
.ask { margin-top: 20px; border-color: #0e8a7a33; }
.ask-list { list-style: none; margin: 0; padding: 0; }
.ask-list > li { padding: 12px 0; border-top: 1px solid var(--border); }
.ask-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ask-list b { display: block; }
.ask-list small { color: var(--muted); font-size: 14px; }
.ask-done { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; font-size: 15px; color: var(--sec); }
.ask-done li { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.ask-buttons { display: flex; gap: 8px; flex: none; }
.chip { border: 1px solid var(--border); background: var(--surface2); border-radius: 999px; padding: 8px 16px; font-weight: 700; font-size: 14px; }
.chip.on { background: var(--live); color: #fff; border-color: var(--live); }
/* Уход со счетов по смыслу: свои / траты / в долг / ждут ответа. */
.split { max-width: 580px; margin: 4px 0 18px; }
.split-bar { display: flex; height: 16px; border-radius: 999px; overflow: hidden; gap: 2px; background: var(--surface2); }
.split-bar { height: 22px; }
.split-bar i { display: flex; align-items: center; justify-content: center; height: 100%; overflow: hidden; }
.split-bar i span { font-size: 13px; font-weight: 800; color: #fff; }
.split-bar i.sp-ask span { color: var(--text); }
.sp-own { background: #3fa796; }
.sp-spent { background: var(--accent); }
.sp-debt { background: #8fb8e8; }
.sp-ask { background: repeating-linear-gradient(135deg, #d5dcdb 0 6px, #e9eded 6px 12px); }
.split-rows { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 2px; }
.sp-row { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 10px; margin: 0 -10px; border-radius: 12px; }
.sp-row[data-go] { cursor: pointer; }
.sp-row[data-go]:hover, .sp-row[data-go]:focus-visible { background: #0b11120d; outline: none; }
.sp-row .sw { width: 14px; height: 14px; border-radius: 4px; }
.sp-row b { display: block; font-size: 16px; }
.sp-row small { display: block; color: var(--muted); font-size: 13px; }
.sp-row strong { font-size: 20px; font-weight: 800; letter-spacing: -0.4px; white-space: nowrap; text-align: right; }
.sp-row strong small { display: block; font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: 0; }
/* Отчёт: справа — понятность, вопросы и находки, без капибары: первый экран — про деньги. */
.hero.report { align-items: start; }
.hero-side { display: grid; gap: 12px; align-content: start; }
.hero-side .bubble { position: static; max-width: none; }
.truth2 { display: grid !important; gap: 10px; }
.truth2 > div { display: flex; align-items: center; gap: 12px; }
.truth2 p { margin: 0; font-size: 13px; color: var(--muted); }
/* Списания — латунью, поступления — бирюзой: два кольца не путаются. */
.truth2 .ring { --ring: var(--accent); }
.truth2 .ring.in { --ring: var(--live); }
.hero-side .hero-ask, .hero-side .hero-done { margin: 0; max-width: none; }
.hero-side .hero-q > li { flex-direction: column; align-items: stretch; gap: 8px; }
.hero-side .hero-q .ask-who .pill { margin-left: 0; }
.hero-side .hero-q .ask-buttons { flex-wrap: wrap; }
.hero-ask { max-width: 580px; margin: 0 0 20px; padding: 16px 18px; border-radius: 20px; border: 1px solid #0e8a7a33; background: #ffffff; }
.hero-ask-lead { margin: 0 0 6px; font-size: 15px; color: var(--sec); }
.hero-ask-lead b { color: var(--text); }
.hero-q { list-style: none; margin: 0 0 6px; padding: 0; }
.hero-q > li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.hero-q > li:first-child { border-top: 0; }
.hero-q small { color: var(--muted); font-size: 13px; }
.hero-done { max-width: 560px; margin: 0 0 18px; color: var(--sec); }
/* Насколько бюджет понятен: «точно» латунью, «ждут ответа» — пустая часть полосы. */
.truth { max-width: 620px; margin: 6px 0 18px; }
.truth-bar { height: 14px; border-radius: 999px; background: repeating-linear-gradient(135deg, var(--surface2) 0 8px, #eef1f0 8px 16px); overflow: hidden; border: 1px solid var(--border); }
.truth-bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.truth-legend { display: flex; gap: 8px 18px; flex-wrap: wrap; font-size: 14px; color: var(--sec); margin: 10px 0 8px; }
.truth-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 6px; vertical-align: -1px; }
.sw-sure { background: var(--accent); }
.sw-ask { background: repeating-linear-gradient(135deg, var(--surface2) 0 3px, #d5dcdb 3px 6px); border: 1px solid var(--border); }
.truth p { margin: 0 0 12px; color: var(--sec); font-size: 15px; }
.ask-who { cursor: pointer; min-width: 0; }
.ask-who b { display: inline; margin-right: 8px; }
.ask-who .pill { margin-right: 6px; vertical-align: 1px; }
.ask-who small { display: block; margin-top: 2px; }
.dlg-bank { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dlg-bank .bank { display: inline-flex; align-items: center; gap: 6px; }
.dlg-bank .bb { width: 18px; height: 18px; border-radius: 5px; font-size: 13px; }
.dlg-bank .arrow { font-style: normal; color: var(--muted); margin: 0 2px; }
.ask-who .open { color: var(--muted); font-weight: 500; font-size: 13px; }
.peer-stats { display: grid; gap: 2px; margin-top: 6px; }
/* Отправили / получили: подпись, сумма, сколько раз, доля — колонками, чтобы две строки читались как таблица. */
.ps-row { display: grid; grid-template-columns: 76px 96px auto 1fr; gap: 4px 12px; align-items: baseline; font-size: 13px; color: var(--muted); }
.ps-row .ps-l { color: var(--sec); }
.ps-row .ps-pc { white-space: nowrap; }
.ps-row b { font-size: 14px; font-weight: 800; white-space: nowrap; text-align: right; }
.ask-who:hover b, .ask-who:focus-visible b { text-decoration: underline; text-underline-offset: 3px; }
.ask-more > summary { cursor: pointer; padding: 12px 0; border-top: 1px solid var(--border); color: var(--sec); font-weight: 700; }
.chip[data-ans]:hover { border-color: var(--live); }
.chip.small { padding: 6px 12px; font-size: 13px; }
.warn-text { color: var(--warn) !important; }
/* Таблица адресатов: кто · ушло · пришло · ответ. */
.ask-table th:first-child, .ask-table td:first-child { padding-left: 0; }
.ask-table th:last-child, .ask-table td:last-child { padding-right: 0; }
.ask-table td { vertical-align: top; }
.ask-table .num b { display: block; font-size: 15px; }
.ask-table .num small { display: block; color: var(--muted); font-size: 13px; white-space: nowrap; }
.ask-table .ask-cell { width: 1%; }
.ask-table .ask-head .ask-buttons { flex-wrap: wrap; justify-content: flex-end; }
.ask-table .ask-buttons .chip { white-space: nowrap; }
.ask-table .ask-who b { display: inline; }
.ask-table .ask-who .pill { display: inline-block; margin: 4px 6px 0 0; white-space: normal; }
.ask-table .ask-who .warn-text { display: block; margin-top: 4px; }
/* Наличные: строка-шапка и операции под ней с отступом. */
.ask-sub td:first-child { padding-left: 18px; }
.ask-sub .ask-who b { font-weight: 600; }
.ask-sub .ask-who small { display: block; color: var(--muted); font-size: 13px; }
.ask-sub .num b { font-size: 15px; }
.ask-table .ask-who .link.small { display: block; margin-top: 6px; font-size: 14px; font-weight: 700; }
.dlg-ans { margin-top: 8px; }
.ask-more .ask-table { margin-top: 4px; }
.ask-ops > summary { cursor: pointer; margin-top: 0; color: var(--sec); font-size: 14px; font-weight: 700; width: fit-content; }
.ask-ops ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.ask-ops li { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; font-size: 14px; }
.ask-ops li .num { min-width: 110px; text-align: right; }
.closable-list small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.closable { margin-top: 20px; border-color: #d9a44155; }
.closable-list { list-style: none; margin: 0 0 16px; padding: 0; }
.closable-list li { padding: 14px 0; border-top: 1px solid var(--border); }
.closable-row { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; }
.closable-row .ask-who { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; }
.closable-row .ask-who > .bank { font-weight: 600; color: var(--sec); }
.closable-row .ask-who b { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; }
.closable-ask { margin: 6px 0 10px; color: var(--sec); font-size: 15px; max-width: 760px; }
.closable-ans { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
.closable-row .btn.ghost { padding: 10px 18px; font-size: 15px; }

/* Категории */
.panel + .panel, .grid-chart + .panel, .kpis + .panel { margin-top: 20px; }
.grid-chart > .panel + .panel { margin-top: 0; }
.category-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: center; }
.donut { position: relative; width: 240px; height: 240px; margin: 0 auto; }
.donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.seg { cursor: pointer; transition: stroke-width .15s; outline: none; }
.seg:hover, .seg:focus-visible { stroke-width: 28; }
.donut-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.donut-center small { font-size: 13px; color: var(--muted); }
.donut-center strong { font-size: 24px; letter-spacing: -0.8px; }
.donut-center span { font-size: 13px; color: var(--muted); }
.share { display: inline-flex; align-items: center; gap: 8px; color: var(--sec); font-size: 14px; }
.share i { height: 8px; border-radius: 4px; display: inline-block; }

/* Операции */
.opsgrid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 20px; align-items: start; }
.side { position: sticky; top: 76px; display: grid; gap: 18px; }
.side h4 { margin: 0 0 8px; font-size: 13px; color: var(--muted); font-weight: 600; }
.search input { width: 100%; padding: 13px 16px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); font-size: 16px; }
.search input:focus { outline: none; border-color: var(--live); }
.search small { display: block; margin-top: 6px; font-size: 13px; color: var(--muted); }
.opts { display: grid; gap: 4px; }
.opts.cats { max-height: 420px; overflow-y: auto; }
.filters { display: grid; gap: 18px; }
.filters > summary { display: none; }
.filters[open] { display: grid; gap: 18px; }
.f-active { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.f-active:empty { display: none; }
.opt { display: flex; justify-content: space-between; gap: 8px; width: 100%; text-align: left; border: 0; background: transparent; padding: 9px 12px; border-radius: 10px; font-size: 15px; color: var(--sec); }
.opt .cnt { color: var(--muted); font-size: 13px; }
.opt:hover { background: var(--surface); }
.opt.on { background: var(--surface2); color: var(--text); font-weight: 700; }
.feed-col { min-width: 0; }
.dayrow td { background: #f6f7f7; font-size: 14px; font-weight: 700; color: var(--sec); padding: 10px 18px; }
.show-sm, .show-sm-inline { display: none; }
.who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.av { flex: none; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: 15px; color: #fff; }
.t { display: grid; min-width: 0; }
.n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 380px; }
.k { font-size: 13px; color: var(--muted); }
.more { display: block; margin: 14px auto 0; border: 1px solid var(--border); background: var(--surface); border-radius: 14px; padding: 12px 24px; font-weight: 700; }
.export { color: var(--muted); font-size: 14px; margin-top: 18px; }

/* Приложение */
.app { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 40px; margin-top: 44px; padding: 36px; border-radius: 30px; background: linear-gradient(120deg, #0c302c, #131a1b); border: 1px solid #1d5c55; }
.app h3 { margin: 0 0 10px; font-size: 32px; letter-spacing: -1px; }
.app p { color: var(--sec); margin: 0 0 22px; }
.app ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.app li { border-top: 1px solid #0b11121a; padding-top: 14px; }
.app li b { display: block; font-size: 17px; margin-bottom: 2px; }
.app li span { color: var(--sec); font-size: 15px; }

/* Модалка и подсказка */
dialog { width: min(860px, calc(100vw - 32px)); max-height: 82vh; padding: 0; border-radius: 24px; border: 1px solid var(--border); background: var(--surface); color: var(--text); }
dialog::backdrop { background: #000a; backdrop-filter: blur(3px); }
.dh { position: sticky; top: 0; display: flex; justify-content: space-between; gap: 12px; padding: 22px 24px 16px; background: var(--surface); border-bottom: 1px solid var(--border); }
.dh h3 { margin: 0; font-size: 22px; }
.ds { color: var(--muted); font-size: 14px; margin-top: 4px; }
#dlg-x, #pick-x, #files-x { flex: none; align-self: flex-start; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface2); font-size: 16px; }
.src { color: var(--muted); font-size: 13px; margin-top: 4px; word-break: break-word; }
.src summary { display: inline-block; cursor: pointer; color: var(--muted); list-style: none; border-radius: 6px; }
.src summary::-webkit-details-marker { display: none; }
.src summary::after { content: ' ⌄'; }
.src[open] summary::after { content: ' ⌃'; }
.src summary:hover { color: var(--text); }
.src summary:focus:not(:focus-visible) { outline: none; }
/* Окно операций: колонки не прыгают, когда раскрыли «как написал банк»; дата и сумма — по верху строки. */
#dlg table { table-layout: fixed; }
#dlg th:first-child { width: 110px; }
#dlg th:last-child { width: 140px; }
#dlg td { vertical-align: top; }
.tip { position: fixed; z-index: 50; pointer-events: none; max-width: 280px; padding: 10px 14px; border-radius: 12px; background: #0b1112; color: #fff; font-size: 14px; line-height: 1.45; font-weight: 600; white-space: pre-line; box-shadow: 0 10px 30px #0009; }
.tip::first-line { font-weight: 800; }


/* ── Светлая тема: зелёные карточки как на главной (герой, плитка трат, приложение) ── */
.hero, .r-hero, .kpi-main, .app { background: radial-gradient(800px 500px at 15% 10%, #179383, transparent 60%), linear-gradient(135deg, #0e6b60, #073f39); color: #fff; border: 0; }
.hero h1, .r-hero h1, .app h3 { color: #fff; }
.hero h1 em, .r-hero h1 em { color: #ecd29c; font-style: normal; }
.hero .eyebrow { color: #ecd29c; }
.hero-sub, .hero .drop-sub, .hero .private, .hero .drop-banks > span:first-child { color: #d8efe9; }
.hero .drop { background: #ffffff14; border-color: #ffffff59; }
.hero .drop:hover, body.dragging .hero .drop { background: #ffffff24; border-color: #fff; }
.hero .drop-title::before { color: #ecd29c; }

/* Герой отчёта */
.r-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: center; padding: 56px; border-radius: 40px; }
.r-eyebrow { margin: 0; color: #ecd29c; font-weight: 700; font-size: 14px; }
.r-hero h1 { font-size: 60px; line-height: 1.02; letter-spacing: -2.6px; margin: 14px 0 18px; font-weight: 800; }
.r-sub { margin: 0; color: #d8efe9; font-size: 18px; line-height: 1.5; max-width: 520px; }
.r-note { margin: 10px 0 0; color: #a9d3ca; font-size: 14px; }
.r-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.store { display: inline-flex; align-items: center; padding: 14px 22px; border-radius: 16px; border: 0; background: #fff; color: #0b1112; font-weight: 800; font-size: 17px; }
.store:hover { background: #f0f3f2; }
.hero-hint { display: grid; text-align: left; padding: 10px 18px; border-radius: 16px; border: 0; background: transparent; box-shadow: inset 0 0 0 1.5px #ffffff59; color: #d8efe9; font-size: 14px; }
.hero-hint b { color: #fff; font-size: 15px; }
.hero-hint:hover { box-shadow: inset 0 0 0 1.5px #fff; }
.r-hero .split { max-width: none; margin: 0; padding: 26px 26px 18px; border-radius: 28px; background: #ffffff14; box-shadow: inset 0 0 0 1px #ffffff26; }
.r-hero .split-bar { height: 14px; background: #ffffff1f; gap: 3px; }
.r-hero .sp-own { background: #7fe0cf; }
.r-hero .sp-spent { background: #ecd29c; }
.r-hero .sp-debt { background: #9cc2f0; }
.r-hero .sp-ask { background: repeating-linear-gradient(135deg, #ffffff66 0 5px, #ffffff26 5px 10px); }
.r-hero .split-rows { margin-top: 14px; }
.r-hero .sp-row { padding: 12px 10px; }
.r-hero .sp-row + .sp-row { box-shadow: 0 -1px 0 #ffffff1f; }
.r-hero .sp-row b { color: #fff; font-size: 17px; }
.r-hero .sp-row small { color: #cfe8e2; font-size: 14px; }
.r-hero .sp-row strong { color: #fff; font-size: 24px; }
.r-hero .sp-row strong small { color: #cfe8e2; font-size: 13px; }
.r-hero .sp-row[data-go]:hover, .r-hero .sp-row[data-go]:focus-visible { background: #ffffff14; }

/* Вопросы под героем: заголовок по центру и карточки адресатов, как bento на главной. */
.q-sec { margin-top: 72px; }
.q-head { max-width: 860px; margin: 0 auto 28px; text-align: center; }
.eyebrow-c { margin: 0; color: var(--muted); font-size: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.q-head h2 { margin: 10px 0 12px; font-size: 40px; line-height: 1.1; letter-spacing: -1.4px; }
.q-head p { margin: 0 auto; max-width: 680px; color: var(--muted); font-size: 17px; }
.q-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.q-cards.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; margin: 0 auto; }
.q-cards.n1 { grid-template-columns: minmax(0, 1fr); max-width: 440px; margin: 0 auto; }
.q-card { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: 28px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 1px 2px #0b11120a, 0 12px 30px #0b111208; }
.q-who { display: grid; justify-items: start; gap: 8px; }
.q-who b { font-size: 18px; line-height: 1.3; }
.q-tag { padding: 3px 10px; border-radius: 999px; background: var(--surface2); color: var(--muted); font-size: 13px; font-weight: 700; }
.q-tag.ok { background: #0e8a7a1a; color: var(--live); }
.q-sums { display: flex; gap: 28px; }
.q-sums strong { display: block; font-size: 24px; letter-spacing: -1px; line-height: 1.1; }
.q-sums small { color: var(--muted); font-size: 13px; }
.q-ans { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.q-upload { position: relative; display: block; margin-top: -6px; padding-top: 10px; border-top: 1px dashed var(--border); color: var(--live); font-size: 14px; font-weight: 700; cursor: pointer; }
.q-upload:hover span { text-decoration: underline; text-underline-offset: 3px; }
.q-ans .chip { flex: 1 1 auto; padding: 8px 12px; }
.q-more { text-align: center; margin: 20px 0 0; }
.q-tab-head { margin: 8px auto 28px; }
.q-count { opacity: 1; padding: 1px 7px; border-radius: 999px; background: #d9a441; color: #fff; font-weight: 800; }
.q-done { display: grid; gap: 4px; max-width: 760px; margin: 0 auto; padding: 22px 26px; border-radius: 24px; background: var(--surface); border: 1px solid var(--border); text-align: center; color: var(--sec); }
.q-done b { color: var(--text); font-size: 20px; }
.nudge { max-width: none; margin-top: 16px; padding: 24px 28px; border-radius: 28px; background: var(--surface); border: 1px solid var(--border); }

/* Плитка трат и блок приложения — зелёные, текст светлый. */
.kpi-main .l, .kpi-main .h { color: #d8efe9; }
.kpi-main .h b, .kpi-main .v { color: #fff; }
.kpi-main .l i { color: #ecd29c; }
.kpi-main .spark i { background: #ffffff4d; }
.kpi-main .spark > span.top i { background: #ecd29c; }
.kpi-main .spark > span:hover i { background: #fff; }
.app p, .app li span { color: #d8efe9; }
.app li { border-top-color: #ffffff26; }
.app .store { display: inline-flex; align-items: center; gap: 12px; padding: 12px 22px; border-radius: 16px; background: #fff; color: #0b1112; text-decoration: none; font-weight: 700; font-size: 21px; line-height: 1.1; }
.app .store small { display: block; font-size: 13px; font-weight: 500; }
.app .store svg { width: 30px; height: 30px; }

/* ── «Обзор» — разделы с навигацией в шапке ── */
.secnav { display: flex; gap: 4px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; }
.secnav a { flex: none; padding: 7px 14px; border-radius: 999px; color: var(--sec); font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.secnav a:hover { color: var(--text); background: #0b11120a; }
.secnav a.on { color: var(--text); background: #0b111212; }
.secnav small { font-size: 13px; color: var(--muted); }
.secnav .q-count { color: #fff; }
.bar.on-ops .secnav { display: none; }
.sec { margin-top: 72px; scroll-margin-top: 130px; }
.sec:first-child { margin-top: 0; }
#places, #all-q { scroll-margin-top: 130px; }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 22px; }
.sec-head h2 { margin: 8px 0 0; font-size: 36px; line-height: 1.1; letter-spacing: -1.2px; }
.sec-head p:not(.eyebrow-c) { margin: 10px 0 0; max-width: 760px; color: var(--muted); font-size: 16px; }

/* Герой: слева «куда ушли» и из чего, справа — графики. */
.r-hero { align-items: stretch; }
.r-hero .split { padding: 0; margin: 26px 0 0; background: none; box-shadow: none; }
.r-hero .sp-row { margin: 0 -10px; }
.h-charts { display: grid; gap: 26px; align-content: start; padding: 26px; border-radius: 28px; background: #ffffff14; box-shadow: inset 0 0 0 1px #ffffff26; }
.h-t { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.h-t span { color: #cfe8e2; font-size: 14px; font-weight: 700; }
.h-t b { color: #fff; font-size: 15px; }
.h-link { border: 0; background: none; padding: 0; color: #ecd29c; font-size: 14px; font-weight: 700; }
.h-bars { display: flex; gap: 4px; height: 120px; margin-bottom: 22px; }
.h-bars > span { position: relative; flex: 1; min-width: 0; display: flex; align-items: flex-end; justify-content: center; cursor: pointer; outline: none; }
.h-bars i { display: flex; flex-direction: column-reverse; width: 100%; max-width: 28px; border-radius: 6px 6px 2px 2px; overflow: hidden; transition: filter .15s; }
.h-bars u { display: block; min-height: 1px; }
.h-bars > span:hover i, .h-bars > span:focus-visible i { filter: brightness(1.2); box-shadow: 0 0 0 2px #fff; }
.h-bars em { position: absolute; bottom: -22px; font-style: normal; font-size: 13px; color: #a9d3ca; }
.h-cats { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.h-cats li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; cursor: pointer; outline: none; }
.h-cats li span { color: #fff; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-cats li b { color: #fff; font-size: 15px; }
.h-cats li small { color: #a9d3ca; font-weight: 500; }
.h-cats li i { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: #ecd29c; }
.h-cats li.rest i { background: #ffffff8c; }
.h-cats li.nocat i { background: repeating-linear-gradient(135deg, #ffffff99 0 4px, #ffffff33 4px 8px); }
.h-cats li.rest span, .h-cats li.nocat span { color: #cfe8e2; }
.h-cats li em { font-style: normal; color: #ecd29c; font-weight: 700; margin-left: 6px; }
.h-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 12px; font-size: 13px; color: #cfe8e2; }
.h-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.h-cats li:hover span, .h-cats li:focus-visible span { text-decoration: underline; text-underline-offset: 3px; }

/* «Уточнить»: карточки вопросов и «загрузите выписку» в один ряд, весь список — раскрывается. */
.q-cards.with-load.n2 { max-width: none; }
.q-cards.with-load.n1 { grid-template-columns: minmax(0, 1fr); max-width: none; margin: 0; }
/* «Или загрузите выписку» — широкой строкой под карточками вопросов. */
.q-load { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 16px; padding: 18px 22px; border: 1.5px dashed #0e8a7a66; background: #eef7f4; box-shadow: none; }
.q-load .bb { width: 40px; height: 40px; border-radius: 12px; }
.q-load > div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.q-load b { font-size: 16px; line-height: 1.35; }
.q-load small { color: var(--muted); font-size: 14px; }
.q-load .btn { flex: none; padding: 11px 20px; font-size: 15px; }
.all-q { margin-top: 18px; }
.all-q > summary { display: flex; align-items: center; gap: 10px; padding: 16px 22px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); font-weight: 700; cursor: pointer; list-style: none; }
.all-q > summary::-webkit-details-marker { display: none; }
.all-q > summary::after { content: '▾'; margin-left: auto; color: var(--muted); }
.all-q[open] > summary::after { content: '▴'; }
.all-q > .panel { margin-top: 16px; }
.app-line { display: flex; align-items: center; gap: 14px; margin-top: 20px; padding: 12px 18px 12px 12px; border-radius: 20px; background: #e8f4f1; border: 1px solid #0e8a7a2e; color: var(--sec); font-size: 15px; text-decoration: none; }
.app-line img { flex: none; width: 36px; height: 36px; border-radius: 10px; }
.app-line b { margin-left: auto; color: var(--brand); white-space: nowrap; }
.app-line:hover { border-color: #0e8a7a66; }

/* «Похоже, у вас есть ещё счёт» — под героем: какую выписку загрузить и что это даст. */
.docs-more { margin-top: 28px; }
.nw { white-space: nowrap; }
.more-head { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; margin: 0 4px 14px; }
.more-head b { font-size: 20px; letter-spacing: -0.4px; }
.more-head span { color: var(--muted); font-size: 15px; }
.more-rows { list-style: none; margin: 0; padding: 4px 22px; display: grid; border-radius: 24px; background: var(--surface); border: 1px solid var(--border); }
.more-row { display: grid; grid-template-columns: auto minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: center; gap: 12px 16px; padding: 12px 0; }
.more-row + .more-row { border-top: 1px solid var(--border); }
.more-row > .bank .bb { width: 36px; height: 36px; border-radius: 10px; }
.more-t, .more-doc { display: grid; gap: 1px; min-width: 0; }
.more-t b, .more-doc b { font-size: 15px; line-height: 1.35; }
.more-t small, .more-doc small { color: var(--muted); font-size: 13px; }
.more-row .btn { padding: 10px 16px; font-size: 14px; }
/* (i) — подсказка по наведению или касанию */
.info { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 4px; border-radius: 50%; background: var(--surface2); color: var(--muted); font: italic 700 13px/1 Georgia, serif; cursor: help; vertical-align: 1px; }
.info:hover, .info:focus-visible { background: var(--live); color: #fff; }

/* Таблица «по месяцам»: восемь категорий, остальные — по кнопке. */
.growth-table tr.extra { display: none; }
.show-all .growth-table tr.extra { display: table-row; }
.trend-more { display: block; margin: 12px 0 0; font-weight: 700; }
.secnav-truth { display: none !important; }

@media (max-width: 1100px) {
  .hero { padding: 36px; }
  .hero h1 { font-size: 44px; letter-spacing: -1.6px; }
  .kpis, .kpis.n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-chart { grid-template-columns: 1fr; }
  .category-layout { grid-template-columns: 220px minmax(0, 1fr); }
  .donut { width: 210px; height: 210px; }
  .hide-md { display: none; }
}
@media (max-width: 860px) {
  .more-row { grid-template-columns: auto minmax(0, 1fr); }
  .more-doc, .more-row .btn { grid-column: 2; }
  .more-row .btn { justify-self: start; }
  .r-hero { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 32px 24px; border-radius: 30px; }
  .q-cards, .q-cards.n2 { grid-template-columns: minmax(0, 1fr); }
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 28px 24px 0; border-radius: 30px; }
  .hero-art { min-height: 300px; height: 300px; }
  .mascot { width: auto; height: 120%; right: 50%; transform: translateX(50%); bottom: -16%; }
  .bubble-top { top: 4px; right: 0; }
  .bubble-bottom { bottom: 16px; }
  .grid2, .app, .promise, .category-layout, .opsgrid { grid-template-columns: minmax(0, 1fr); }
  .side { position: static; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .filters > summary { display: flex; justify-content: space-between; list-style: none; cursor: pointer; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); font-weight: 700; }
  .filters > summary::after { content: '▾'; color: var(--muted); }
  .filters[open] > summary::after { content: '▴'; }
  .filters:not([open]) { display: block; }
  .nudge-actions { flex-direction: column; }
  .nudge-actions .btn { width: 100%; }
}
@media (max-width: 600px) {
  .sec { margin-top: 48px; scroll-margin-top: 150px; }
  .sec-head h2 { font-size: 26px; letter-spacing: -0.6px; }
  .secnav { margin: 6px -16px 0; padding: 0 16px; }
  .h-charts { padding: 18px; }
  .h-bars > span:nth-child(even) em { display: none; }
  /* Прилипшая шапка на телефоне — одна строка: процент и разделы. Вкладки и выписки — вверху страницы. */
  .bar.stuck:not(.on-ops) .bar-in { display: none; }
  .bar.stuck .secnav { margin-top: 0; }
  .bar.stuck .secnav-truth { display: inline-flex !important; align-items: center; gap: 6px; color: var(--text); background: #0b11120d; }
  .secnav-truth .ring.sm { width: 20px; height: 20px; }
  .q-load { flex-wrap: wrap; }
  .q-load .btn { width: 100%; }
  .app-line { flex-wrap: wrap; }
  .app-line b { margin-left: 50px; }
  .r-hero h1 { font-size: 38px; letter-spacing: -1.4px; }
  .r-sub { font-size: 16px; }
  .r-hero .split { padding: 18px 16px 10px; }
  .r-hero .sp-row strong { font-size: 19px; }
  .q-sec { margin-top: 48px; }
  .q-head h2 { font-size: 28px; letter-spacing: -0.8px; }
  .q-head p { font-size: 15px; }
  .hero h1 { font-size: 34px; letter-spacing: -1px; }
  .hero-sub { font-size: 16px; }
  .bubble { max-width: 230px; font-size: 14px; padding: 10px 12px; }
  .kpis { gap: 10px; }
  .kpi { padding: 16px; }
  /* Телефон: траты со столбиками — во всю ширину, три остальные плитки — без дыры в последнем ряду. */
  .kpis > .kpi-main, .kpis > .kpi:last-child { grid-column: 1 / -1; }
  .kpi .v { font-size: 24px; letter-spacing: -0.8px; }
  .panel.pad { padding: 18px; }
  .app { padding: 24px; }
  .app h3 { font-size: 26px; }
  th, td { padding: 12px; }
  .hide-sm { display: none; }
  .show-sm { display: table-cell; }
  .show-sm-inline { display: block; }
  .findings td .sub .bank { margin-right: 4px; }
  .side { grid-template-columns: 1fr; }
  .n { max-width: 180px; }
  .pill { white-space: normal; }
  .ask-row, .hero-q > li { flex-direction: column; align-items: stretch; }
  /* Телефон: таблица адресатов — карточками: имя, две суммы в строку, кнопки снизу. */
  .ask-table thead { display: none; }
  .ask-table, .ask-table tbody, .ask-table tr, .ask-table td { display: block; }
  .ask-table tr.ask-tr { padding: 12px 0; border-top: 1px solid var(--border); }
  .ask-table td { padding: 0; border: 0; }
  .ask-table td.num { display: inline-block; text-align: left; margin: 6px 20px 0 0; }
  .ask-table td.num.muted { display: none; }
  .ask-sub td:first-child { padding-left: 12px; }
  .ask-table .num small { white-space: normal; }
  .ask-table .ask-cell { width: auto; margin-top: 10px; }
  .bank-chips { justify-content: flex-start; }
  /* Узкий экран: отправили/получили переносятся, а не распирают шапку шире экрана. */
  .ps-row { display: flex; flex-wrap: wrap; gap: 2px 10px; }
  .ps-row .ps-pc { white-space: normal; }
  /* Телефон: шапка — две строки: разделы во всю ширину, под ними понятно / выписки / добавить. */
  .bar { margin: 0 0 14px; padding: 8px 0; }
  .bar-in { flex-wrap: wrap; gap: 8px; }
  .bar-logo { display: none; }
  .tabs { flex: 1 1 100%; order: 2; }
  .tabs button { flex: 1; height: 40px; padding: 0 4px; font-size: 14px; }
  .tabs small:not(.q-count) { display: none; }
  .bar-side { flex: 1 1 100%; order: 1; margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; }
  .bar-truth, .bar-files, .bar-add { height: 40px; }
  .bar-truth small { display: none; }
  .bar-files { min-width: 0; }
  .bar-side > .bar-files:first-child { grid-column: 1 / 3; }
  .bar-files > span:last-child { overflow: hidden; text-overflow: ellipsis; }
  .bar-add-t { display: none; }
  .bar-truth { padding-right: 10px; }
  .stack .bank:nth-child(n+3) { display: none; }
  .bar-truth, .bar-files { gap: 7px; padding-left: 7px; }
  .bar-add { padding: 0 14px; }
  .bar.stuck .tabs button, .bar.stuck :is(.bar-truth, .bar-files, .bar-add) { height: 36px; }
  .files-body { padding: 4px 16px 18px; }
  .file-t b { white-space: normal; }
  .kpis.n3, .kpis.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-row strong { font-size: 17px; }
  .ask-buttons { flex-wrap: wrap; }
  .ask-buttons .chip { flex: 1 1 auto; white-space: nowrap; }
  .truth .btn { width: 100%; }
  /* Телефон: в отчёте капибара уступает место цифрам, пузыри — строками под кнопками. */
  .hero.report { padding-bottom: 24px; }
  .report .hero-art { min-height: 0; height: auto; display: grid; gap: 10px; }
  .report .mascot, .report .halo { display: none; }
  .report .bubble { position: static; max-width: none; }
  .hero:not(.report) .hero-art { min-height: 220px; height: 220px; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; }
}

/* Светлая тема: контурные кнопки и белые значки банков на белом — с тонкой рамкой. */
html.light .btn.ghost { color: var(--text); box-shadow: inset 0 0 0 1.5px #0b111226; }
html.light .btn.ghost:hover { background: #0b11120a; }
html.light .bb { box-shadow: inset 0 0 0 1px #0b111217; }
html.light .stack .bb { border-color: var(--surface); }

/* Вкладки — сегментом, как переключатель в iOS; разделы — подчёркиванием под текущим. */
.tabs { gap: 2px; padding: 4px; border-radius: 16px; background: #0b11120d; }
.tabs button { height: 38px; padding: 0 18px; border: 0; border-radius: 12px; background: transparent; color: var(--sec); box-shadow: none; }
.tabs button:hover { color: var(--text); }
.tabs button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px #0b111226, 0 0 0 0.5px #0b11120f; }
.tabs small { color: var(--muted); }
.secnav { gap: 22px; margin-top: 12px; border-bottom: 1px solid #0b111214; }
.secnav a { position: relative; padding: 6px 0 10px; border-radius: 0; background: none !important; color: var(--muted); }
.secnav a:hover { color: var(--text); }
.secnav a.on { color: var(--text); }
.secnav a.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--brand); }
.secnav .q-count { margin-left: 2px; padding: 1px 7px; font-size: 13px; }
.secnav small:not(.q-count) { margin-left: 2px; padding: 1px 7px; border-radius: 999px; background: #0b11120d; font-size: 13px; color: var(--sec); }
.bar.stuck .secnav { border-bottom: 0; }
@media (max-width: 600px) {
  .tabs { padding: 3px; }
  .tabs button { height: 36px; }
  .secnav { gap: 18px; }
  .bar.stuck .secnav-truth { padding: 4px 10px; border-radius: 999px; background: #0b11120d !important; }
  .bar.stuck .secnav-truth::after { display: none; }
}
@media (max-width: 600px) {
  .h-cats li span { white-space: normal; }
  .h-cats li em { display: block; margin: 2px 0 0; }
}

/* Ответ прямо в ленте операций */
.feed-ans { margin-top: 8px; flex-wrap: wrap; }
.feed .who { align-items: flex-start; }

/* «Посмотреть пример» под загрузкой: выдуманные выписки (razbor.html#demo) — ценность без своего файла. */
.demo-link { display: inline-block; margin-top: 14px; color: #d8efe9; font-size: 15px; text-decoration: none; }
.demo-link b { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.demo-link:hover b { color: #ecd29c; }