/* zerno — мобайл-first. Стиль по дизайн-системе «Зерно» (артефакт PVXJ2d2yKvndZ38EFfU5FX,
   project/tokens.json + components/bundle.css; родственник Хаба — общие нейтральные роли).
   v059: тема «золото и чёрный» снята целиком. Правила, которые здесь держатся:
   - только роли из tokens.json, других цветов в правилах нет (исключение — печать);
   - суммы по умолчанию --ink; расход «−» тоже --ink; доход «+» — --income;
     --danger — только тревога (минус на дебетовом счёте, перерасход, прогноз ниже нуля);
   - засечек нет; цифры табличные везде (font-variant-numeric на body);
   - кегль не меньше 14px, кроме подписи таббара (12px) — сторож tests/test_design_rules.py;
   - теней две: --shadow-card (плитки) и --shadow-pop (лист, меню, «+»);
   - золото — заливка одной главной кнопки и «+»; золотой текст — --accent-ink.
   Светлая тема по умолчанию; тёмная — [data-theme=dark], переключатель во вкладке «Советник». */

:root {
  --bg: #ffffff;
  --sidebar: #f5f5f7;
  --surface-2: #f2f2f5;
  --surface-raised: #ffffff;
  --selection: #fbf3dc;
  --line: #e5e5ea;
  --mark: #8a8a90;
  --ink: #1d1d1f;
  --ink-2: #6e6e73;
  --accent: #e3b505;
  --on-accent: #1d1d1f;
  --accent-ink: #8a6500;
  --income: #1a7f45;
  --danger: #d92d3a;
  --danger-soft: #fde8e8;
  --danger-soft-ink: #b3261e;
  --firm: #2f6f8f;
  --firm-soft: #e6f1f6;
  --focus: var(--accent-ink);

  --shadow-card: 0 1px 2px rgba(0,0,0,.04), 0 6px 20px rgba(0,0,0,.06);
  --shadow-pop: 0 12px 40px rgba(0,0,0,.14);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 999px;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px;

  --row-min: 56px;
  --cat-icon: 36px;
  --sidebar-w: 248px;
  --list-max: 720px;
  --tabbar-h: 64px;

  --font-sans: -apple-system, "SF Pro Text", "PT Sans", system-ui, "Segoe UI", sans-serif;
  /* Значок категории: цвет семьи из category_icons.json, подмешанный к --ink. Палитра
     приглушённая и на --surface-2 даёт местами 1,9:1; подмес 25 % (светлая) / 35 % (тёмная)
     поднимает минимум до 4,1:1 и 3,2:1 — без правки данных, сам следует за темой. */
  --cat-mix: 25%;
  --cat: var(--mark);          /* цвет семьи категории; кружок получает свой через style */
}

:root[data-theme="dark"] {
  --bg: #1c1c1e;
  --sidebar: #252528;
  --surface-2: #2c2c2e;
  --surface-raised: #2c2c2e;
  --selection: #3a3220;
  --line: #38383a;
  --mark: #7c7c82;
  --ink: #f2f2f7;
  --ink-2: #a1a1a8;
  --accent: #f2c744;
  --on-accent: #1c1c1e;
  --accent-ink: #f2c744;
  --income: #4cd07d;
  --danger: #ff6b6b;
  --danger-soft: #3b1d20;
  --danger-soft-ink: #ff8a8a;
  --firm: #6fb3d2;
  --firm-soft: #1d3240;
  --shadow-card: 0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.35);
  --shadow-pop: 0 12px 40px rgba(0,0,0,.5);
  --cat-mix: 35%;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* иначе display:inline-flex у меток перебивает атрибут hidden */
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.45 var(--font-sans); font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  overflow-x: clip; }  /* v039: гасит 4px фантом fixed-таббара. v059: clip, а не hidden — hidden
     делает body контейнером прокрутки, и position:sticky у «Записать» перестаёт работать */
a { color: var(--ink); text-decoration: none; }
main { padding: var(--space-4) var(--space-4) calc(var(--tabbar-h) + 32px + env(safe-area-inset-bottom));
  padding-top: calc(var(--space-4) + env(safe-area-inset-top));
  max-width: var(--list-max); margin: 0 auto; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- заголовок экрана и секции ---------- */
.page-title { display: flex; align-items: center; gap: 10px; font-size: 28px; line-height: 34px;
  font-weight: 700; letter-spacing: -.01em; margin: var(--space-4) 0 var(--space-4); }
h1 { font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -.01em; }
/* h2 — секция: обычный регистр, волосяная линия, итог справа (span.sum) */
h2 { font-size: 17px; line-height: 22px; font-weight: 700; color: var(--ink);
  margin: var(--space-6) 0 0; padding: 0 0 var(--space-2); border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
h2 .sum { font-size: 14px; font-weight: 600; color: var(--ink-2); }

/* метки состояния над контентом: очередь офлайн и просроченные планы — только когда не ноль */
.status-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.status-pills:empty, .status-pills:not(:has(> :not([hidden]))) { display: none; }
.status-pills .ic { width: 16px; height: 16px; }

/* ---------- метки (Tag) ---------- */
.tag, .badge { display: inline-flex; align-items: center; gap: var(--space-1); font-size: 14px;
  line-height: 18px; font-weight: 600; padding: 0 8px; border-radius: var(--radius-full);
  background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
.tag.firm, .badge.firm { background: var(--firm-soft); color: var(--firm); }
.tag.alarm, .badge.review-why, .badge.crit-badge { background: var(--danger-soft); color: var(--danger-soft-ink); }
a.tag { cursor: pointer; }
.ok-badge { background: var(--selection); color: var(--ink); }

/* ---------- карточки: только приподнятые плитки, без полос и кромок ---------- */
.card { background: var(--surface-raised); border-radius: var(--radius-md); box-shadow: var(--shadow-card);
  padding: var(--space-4); margin-bottom: var(--space-3); }
a.card, .card.link { display: block; cursor: pointer; }
a.card:hover, .card.link:hover { background: var(--surface-2); }
.chev { float: right; width: 20px; height: 20px; color: var(--mark); margin-top: 2px; }

/* строка счёта (как строка операции: без карточки, разделитель — line) */
.acc-item { display: flex; align-items: center; gap: var(--space-3); min-height: var(--row-min);
  padding: 8px; border-bottom: 1px solid var(--line); color: var(--ink); }
.acc-item:hover { background: var(--surface-2); }
.acc-item .chev { float: none; margin: 0; flex: none; }
.acc-item .acc-main { flex: 1; min-width: 0; }
.acc-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.acc-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.acc-name .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-bal { font-weight: 600; white-space: nowrap; }
/* экран счёта: имя — как заголовок экрана, остаток — amount-l */
.acc-title { font-size: 24px; line-height: 30px; font-weight: 700; }
.acc-big { font-size: 24px; line-height: 30px; font-weight: 700; margin: 8px 0; }
.acc-sub { color: var(--ink-2); font-size: 14px; line-height: 18px; margin-top: 2px; }
.lamp { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.lamp.green { background: var(--income); }
.lamp.red { background: var(--danger); }
.lamp.grey { background: var(--mark); opacity: .6; }
/* знак не красится: «−» у расхода и долга — обычное событие. Тревога — .alarm */
.neg { color: var(--ink); } .pos { color: var(--income); } .alarm { color: var(--danger); }

/* ---------- итоговые плитки ---------- */
.totals { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-bottom: var(--space-2); }
.totals.one { grid-template-columns: 1fr; }
.total-card { background: var(--surface-raised); border-radius: var(--radius-md);
  box-shadow: var(--shadow-card); padding: var(--space-4); }
.total-card .lbl { color: var(--ink-2); font-size: 14px; }
.total-card .val { font-size: 24px; line-height: 30px; font-weight: 700; }
.total-card.wide { grid-column: 1 / -1; }
.mini { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin: var(--space-3) 0; }

/* ---------- сегмент-переключатель (zr-seg): выбранный — surface-raised, не заливка ---------- */
.seg { display: flex; gap: 2px; background: var(--surface-2); border-radius: var(--radius-sm);
  padding: 3px; margin: var(--space-3) 0; }
.seg button { flex: 1; font: inherit; font-size: 15px; font-weight: 600; border: 0; background: transparent;
  color: var(--ink-2); padding: 8px 6px; border-radius: 6px; cursor: pointer; }
.seg button.on { background: var(--surface-raised); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.seg.firmmode button.on { color: var(--firm); }
.seg.kindseg { margin-top: calc(-1 * var(--space-1)); }
.seg.kindseg.income button.on { color: var(--income); }

/* период-селектор */
.period { display: flex; align-items: center; justify-content: center; gap: 10px; margin: var(--space-3) 0;
  color: var(--ink); font-weight: 600; }
.period button { background: var(--surface-2); border: 0; border-radius: var(--radius-sm);
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--ink); }
.period button .ic { width: 18px; height: 18px; }
.period .plabel { min-width: 190px; text-align: center; }
.period .prov { color: var(--accent-ink); }

/* ---------- формы ---------- */
input, select, textarea { width: 100%; font: inherit; font-size: 16px; background: var(--surface-2);
  color: var(--ink); border: 0; border-radius: var(--radius-sm); padding: 12px; }
input::placeholder, textarea::placeholder { color: var(--ink-2); }
/* в тёмной теме surface-2 совпадает с surface-raised: поле на плитке утопляем в bg */
:root[data-theme="dark"] .card :is(input, select, textarea) { background: var(--bg); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--focus); outline-offset: 0; }
input[type="checkbox"], input[type="radio"] { width: auto; }
label { display: block; font-size: 14px; line-height: 18px; color: var(--ink-2); margin: var(--space-4) 0 var(--space-1); }
/* поле суммы (zr-field): surface-2, radius 12, 40px */
.amount-input { font-size: 40px; line-height: 46px; font-weight: 700; letter-spacing: -.02em;
  text-align: center; padding: 20px 16px; border-radius: var(--radius-md); }
.calc-hint { text-align: center; color: var(--ink-2); font-size: 14px; min-height: 18px; margin-top: var(--space-1); }
.calc-hint b { color: var(--ink); }
/* компактный ряд операторов под полем суммы (только телефон) */
.calc-ops { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: var(--space-2); }
.calc-ops button { height: 40px; background: var(--surface-2); border: 0; border-radius: var(--radius-sm);
  color: var(--ink); font: inherit; font-size: 18px; font-weight: 600; cursor: pointer; }
.calc-ops button:active { background: var(--selection); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
/* кнопка в одной строке с полем — по его верху, без отступа главной кнопки */
.row2 > .btn, .row3 > .btn { margin-top: 0; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-2); }
.date-presets { display: flex; gap: 2px; margin-top: var(--space-2); background: var(--surface-2);
  border-radius: var(--radius-sm); padding: 3px; }
.date-presets button { flex: 1; background: transparent; border: 0; color: var(--ink-2); border-radius: 6px;
  padding: 7px 4px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.date-presets button.on { background: var(--surface-raised); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
details > summary { cursor: pointer; }

/* ---------- сетка объектов фирмы ---------- */
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); margin-top: var(--space-2); }
.grid button { background: var(--surface-2); border: 0; color: var(--ink); border-radius: var(--radius-sm);
  padding: 10px 4px; font: inherit; font-size: 14px; line-height: 18px; min-height: 56px; cursor: pointer; }
.grid button.on, .grid.firmgrid button.on { background: var(--selection); box-shadow: 0 0 0 2px var(--accent-ink) inset; }

/* ---------- кружки категорий: surface-2, значок цвета семьи (не заливка) ---------- */
.catgrp { font-size: 14px; line-height: 18px; font-weight: 600; color: var(--ink-2);
  margin: var(--space-4) 0 var(--space-2); }
.catgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
.catbtn { background: none; border: 0; padding: 4px 0; cursor: pointer; font: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 6px; border-radius: var(--radius-sm); }
.catbtn.on .cat-ic { background: var(--selection); box-shadow: 0 0 0 2px var(--accent-ink); }
.catbtn .cn { font-size: 14px; color: var(--ink); text-align: center; line-height: 17px;
  max-height: 34px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.catbtn .cn .muted { font-size: 14px; }
/* у кружка с подкатегориями — метка «проваливается» (§2.1) */
.catbtn.has-kids .cat-ic { position: relative; }
.catbtn.has-kids .cat-ic::after { content: ''; position: absolute; right: -1px; bottom: -1px;
  width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); }
.catback { width: auto; display: inline-block; margin: 10px 0 6px; padding: 8px 14px; font-size: 14px; }
/* long-press + drag reorder (§2.2) */
.catbtn.dragging { opacity: .9; transform: scale(1.1); touch-action: none; z-index: 5; position: relative; }
.catbtn.dragging .cat-ic { box-shadow: 0 0 0 2px var(--accent-ink), var(--shadow-pop); }
.catgrid.reordering .catbtn:not(.dragging) { opacity: .55; }
.catgrid.reordering { touch-action: none; }

.cat-ic { width: var(--cat-icon); height: var(--cat-icon); border-radius: var(--radius-full); flex: none;
  display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); }
.cat-ic .ic { width: 20px; height: 20px;
  color: color-mix(in srgb, var(--cat), var(--ink) var(--cat-mix)); }
.cat-ic.lg { width: 52px; height: 52px; } .cat-ic.lg .ic { width: 26px; height: 26px; }

/* ---------- кнопки ---------- */
/* главная кнопка экрана — единственная золотая заливка */
.btn { display: block; width: 100%; border: 0; border-radius: var(--radius-sm); padding: 14px 18px;
  font: inherit; font-size: 16px; font-weight: 600; text-align: center;
  background: var(--accent); color: var(--on-accent); margin-top: var(--space-4); cursor: pointer; }
.btn.firm { background: var(--accent); color: var(--on-accent); }
.btn.ghost { background: var(--surface-2); color: var(--ink); padding: 12px 18px; }
.btn.ghost:hover { background: var(--selection); }
.btn:disabled { opacity: .5; }
.btn.sm { width: auto; display: inline-block; margin: 0; padding: 6px 12px; font-size: 14px; }
/* «Записать» прижата к низу экрана: над таббаром на телефоне, у края окна на широком */
.btn.dock { position: sticky; bottom: calc(var(--tabbar-h) + var(--space-3) + env(safe-area-inset-bottom)); z-index: 10; }
.f-search { flex: 1 1 200px !important; min-width: 160px; }

.toast { position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + 24px + env(safe-area-inset-bottom));
  transform: translateX(-50%); background: var(--ink); color: var(--bg);
  padding: 12px 18px; border-radius: var(--radius-md); z-index: 50; font-size: 15px;
  box-shadow: var(--shadow-pop); max-width: 90vw; }

/* ---------- строка операции (TxRow) ---------- */
.tx { display: flex; justify-content: space-between; gap: var(--space-3); min-height: var(--row-min);
  padding: 10px 8px; border-bottom: 1px solid var(--line); align-items: center; cursor: pointer; }
.tx:hover { background: var(--surface-2); }
.tx .l { min-width: 0; display: flex; align-items: center; gap: var(--space-3); flex: 1; }
.tx .body { min-width: 0; flex: 1; }
.tx .t1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; line-height: 22px; }
.tx .t2 { color: var(--ink-2); font-size: 14px; line-height: 18px; margin-top: 2px;
  display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
/* причина очереди — одной строкой, полный текст в подсказке */
.tx .t2 .why { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx .amt, .amt { font-size: 16px; line-height: 22px; font-weight: 600; white-space: nowrap; color: var(--ink); }
.tx .amt.pos, .amt.pos { color: var(--income); }
.tx .amt.neg, .amt.neg { color: var(--ink); }
.tx .amt.mut, .amt.mut { color: var(--ink-2); }
.tx .amt.alarm, .amt.alarm { color: var(--danger); }
.date-head { font-size: 17px; line-height: 22px; font-weight: 700; color: var(--ink);
  margin: var(--space-6) 0 0; padding: 0 0 var(--space-2); border-bottom: 1px solid var(--line); }
.date-head:first-child { margin-top: var(--space-2); }
.filters { display: flex; gap: var(--space-2); overflow-x: auto; padding: var(--space-1) 0 var(--space-2); }
.filters > * { flex: none; width: auto; }
.filters select, .filters input { padding: 10px 12px; }
.chip { background: var(--surface-2); color: var(--ink-2); padding: 6px 12px; border-radius: var(--radius-full);
  font-size: 14px; border: 0; }
.chip.on { background: var(--selection); color: var(--ink); font-weight: 600; }

/* ---------- состав заказа (§4.2) ---------- */
.order-plate { display: inline-flex; align-items: center; gap: 4px; background: var(--surface-2);
  border: 0; color: var(--accent-ink); border-radius: var(--radius-full); padding: 4px 12px;
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; margin: 0 0 8px 56px; }
.order-plate .caret { width: 16px; height: 16px; transition: transform .12s; }
.order-plate.open .caret { transform: rotate(90deg); }
.order-body { margin: 0 0 12px 56px; background: var(--surface-raised); border-radius: var(--radius-md);
  box-shadow: var(--shadow-card); padding: var(--space-2) var(--space-4); }
.oi { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0;
  border-bottom: 1px solid var(--line); font-size: 14px; }
.oi:last-child { border-bottom: 0; }
.oi .oi-t { min-width: 0; } .oi .oi-sum { white-space: nowrap; color: var(--ink-2); }
.order-chip { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0; background: var(--surface-2);
  border-radius: var(--radius-full); padding: 6px 14px; font-size: 14px; color: var(--accent-ink); font-weight: 600; }
.order-chip .ic { width: 16px; height: 16px; }

/* ---------- таблицы отчётов ---------- */
table.rep { width: 100%; border-collapse: collapse; font-size: 14px; }
table.rep th { color: var(--ink-2); border-bottom: 1px solid var(--line);
  padding: 8px 6px; text-align: left; font-weight: 600; }
table.rep td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: left; }
table.rep td:last-child, table.rep th:last-child { text-align: right; }
table.rep tr[data-obj], table.rep tr[data-cid] { cursor: pointer; }
table.rep tr[data-obj]:hover td, table.rep tr[data-cid]:hover td { background: var(--surface-2); }
table.rep tr.total td { font-weight: 700; border-top: 1px solid var(--ink-2); border-bottom: 0; }

/* ---------- строки категорий + аккордеон (§5.1) ---------- */
.crow { display: flex; align-items: center; gap: var(--space-3); min-height: var(--row-min); padding: 8px;
  border-bottom: 1px solid var(--line); cursor: pointer; }
.crow:hover { background: var(--surface-2); }
.crow .cl { display: flex; align-items: center; gap: var(--space-3); min-width: 0; flex: 1; }
.crow .cnm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crow .cv { font-weight: 600; white-space: nowrap; }
.crow .caret { width: 18px; height: 18px; color: var(--mark); flex: none; transition: transform .12s; }
.crow.acc.open .caret { transform: rotate(90deg); }
.crow .gear { color: var(--mark); padding: 4px; margin-left: 4px; }
.crow .gear .ic { width: 18px; height: 18px; }
.crow.child { padding-left: 24px; }
.children .crow.child:last-child { border-bottom: 1px solid var(--line); }

/* ---------- обзор дня / планы (§8.4) ---------- */
.due-row { display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 10px 0; border-bottom: 1px solid var(--line); }
.due-row:last-of-type { border-bottom: 0; }
.due-row .l { min-width: 0; } .due-row .t1 { font-size: 16px; } .due-row .t2 { color: var(--ink-2); font-size: 14px; }
.due-row.overdue .t2 { color: var(--danger); }
.due-r { display: flex; align-items: center; gap: 8px; white-space: nowrap; }

/* ---------- бюджеты: прогресс (§6.2) ---------- */
.brow { display: flex; align-items: center; gap: var(--space-3); padding: 10px 8px; border-bottom: 1px solid var(--line); }
.brow .cl { flex: 1; display: flex; align-items: center; gap: var(--space-3); min-width: 0; cursor: pointer; }
.brow .body { flex: 1; min-width: 0; }
.brow .t1 { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brow .t2 { color: var(--ink-2); font-size: 14px; }
.pbar { height: 8px; border-radius: var(--radius-full); background: var(--line); overflow: hidden; margin: 6px 0; }
.pbar > i { display: block; height: 100%; border-radius: var(--radius-full); transition: width .2s; }
.pbar > i.ok { background: var(--mark); }
.pbar > i.warn { background: var(--accent); }
.pbar > i.over { background: var(--danger); }

/* ---------- нижний лист (§5.3) ---------- */
.sheet { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.35); display: flex; align-items: flex-end; }
.sheet-body { background: var(--bg); width: 100%; max-width: var(--list-max); margin: 0 auto;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow-pop);
  padding: var(--space-4) var(--space-4) calc(20px + env(safe-area-inset-bottom)); max-height: 82vh; overflow-y: auto; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.sheet-head b { font-size: 17px; font-weight: 700; }
.icon-pick { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.icon-pick .ipick { background: none; border: 0; padding: 2px; cursor: pointer; display: flex; justify-content: center; }
.icon-pick .ipick.on .cat-ic { background: var(--selection); box-shadow: 0 0 0 2px var(--accent-ink); }
.color-pick { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; }
.color-pick .cpick { height: 30px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.color-pick .cpick.on { border-color: var(--bg); box-shadow: 0 0 0 2px var(--ink); }
.row-check { display: flex; align-items: center; gap: 8px; margin: 14px 2px; color: var(--ink); font-size: 16px; }
.sp-part { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 6px; align-items: center; margin-bottom: 6px; }
.sp-part .sp-del { color: var(--mark); }

.muted { color: var(--ink-2); } .small { font-size: 14px; line-height: 18px; }
.center { text-align: center; } .mt { margin-top: var(--space-4); }
.empty { color: var(--ink-2); padding: var(--space-3) 0; }

.login-wrap { max-width: 340px; margin: 16vh auto 0; padding: 0 20px; text-align: center; }
.login-wrap .logo { color: var(--accent-ink); }
.login-wrap .logo .ic { width: 56px; height: 56px; }

canvas { max-width: 100%; }

/* ---------- иконка-кнопка ---------- */
.icon-btn { background: none; border: 0; color: var(--mark); cursor: pointer; padding: 4px;
  vertical-align: -3px; display: inline-flex; align-items: center; }
/* у .ic нет базового размера — его всегда задаёт правило родителя, иначе svg растянется
   на всю карточку (поймано скриншотом при приёмке v016) */
.icon-btn .ic { width: 20px; height: 20px; }
.icon-btn:hover { color: var(--accent-ink); }
.rename-inp { font: inherit; font-size: 20px; font-weight: 700; padding: 4px 8px; max-width: 260px;
  border-radius: var(--radius-sm); background: var(--surface-2); color: var(--ink); }

/* v021/v022: последние операции счёта на экране ввода. Колонки «Откуда/Куда» СТРОГО
   рядом на всех ширинах (требование Pavel — охватить обе взглядом). minmax(0,1fr) +
   min-width:0, чтобы компактные строки с ellipsis сжимались, а не распирали грид за
   экран. НЕ добавлять @media, схлопывающий .ops2 в одну колонку. */
.ops2 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--space-3); align-items: start; }
.ops2 > div { min-width: 0; }
.opscol-h { font-weight: 600; font-size: 14px; color: var(--ink-2); text-align: center;
  border-bottom: 1px solid var(--line); padding-bottom: 4px; margin: 4px 0; }
.opl-date { font-size: 14px; color: var(--ink-2); margin: 8px 0 2px; }
.opline { display: flex; justify-content: space-between; gap: 6px; font-size: 14px;
  padding: 4px 0; border-bottom: 1px solid var(--line); }
.opl-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.opl-a { white-space: nowrap; font-weight: 600; }
.opl-a.neg { color: var(--ink); } .opl-a.pos { color: var(--income); }

/* v023: переключатель счёта в шапке — узкий, виден только «знак» выбора */
.acc-switch { border: 0; background: var(--surface-2); color: var(--ink); border-radius: var(--radius-sm);
  padding: 2px 4px; font-size: 14px; max-width: 44px; vertical-align: -2px; cursor: pointer; }

/* v028: инлайн-редактор операции прямо в строке */
.tx-edit { padding: 10px 8px 12px; border-bottom: 1px solid var(--line); display: grid; gap: 8px;
  background: var(--surface-2); border-radius: var(--radius-md); }
.tx-edit .kindseg { margin: 0; }
.tx-edit .seg { background: var(--bg); }
.txe-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tx-edit input { padding: 10px; background: var(--bg); }
.tx-edit input:disabled { opacity: .5; }
.txe-actions { display: flex; gap: 8px; align-items: center; }
.txe-btn { border: 0; background: var(--bg); color: var(--ink); border-radius: var(--radius-sm);
  padding: 8px 12px; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.txe-btn.txe-ok { background: var(--accent); color: var(--on-accent); flex: none; }
.txe-btn.txe-danger { color: var(--danger); margin-left: auto; }
.txe-btn.txe-confirm { background: var(--danger); color: var(--bg); }

/* ---------- витрина главной (v038) ---------- */
.hl-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-3); }
/* на телефоне «Имущество» — третьей строкой во всю ширину: три крупных суммы в ряд
   на 390px не помещаются даже сокращёнными */
.hl-tile[data-comp="assets"] { order: 3; grid-column: 1 / -1; }
.hl-tile { min-width: 0; text-align: left; background: var(--surface-raised); border: 0;
  border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: var(--space-4); cursor: pointer;
  font: inherit; color: inherit; display: flex; flex-direction: column; }
.hl-tile.on { background: var(--selection); }
.hl-lbl { font-size: 14px; color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.hl-val { font-size: 24px; line-height: 30px; font-weight: 700; color: var(--ink);
  white-space: nowrap; margin: 4px 0; }
.spark { height: 32px; position: relative; }
.spark.tall { height: 64px; }
.spark canvas { width: 100% !important; height: 100% !important; }
.hl-foot { font-size: 14px; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 6px; }
.hl-delta { color: var(--ink-2); }
.hl-borrow { color: var(--ink-2); }

.hl-balance { margin-top: 0; }
.wb { display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: center; margin: 6px 0; }
.wb-lbl { font-size: 14px; color: var(--ink-2); }
.wb-track { min-width: 0; display: flex; height: 10px; background: var(--line);
  border-radius: var(--radius-full); overflow: hidden; }
.wb-seg { height: 100%; }
.wb-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 12px 0 4px; }
.wb-legend .chip { font-size: 14px; color: var(--ink-2); display: flex; align-items: center; gap: 6px;
  background: none; padding: 0; }
.wb-legend .chip i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.hl-capital { margin-top: var(--space-4); font-size: 14px; color: var(--ink-2);
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.hl-capital b { font-size: 24px; line-height: 30px; color: var(--ink); }
.hl-note { font-size: 14px; color: var(--ink-2); margin-top: 6px; }

.hl-fc, .hl-pace { margin-top: 0; display: block; }
.hl-fc-sub { font-size: 14px; color: var(--ink-2); margin-top: 6px; }
.pace-track { position: relative; height: 10px; background: var(--line);
  border-radius: var(--radius-full); overflow: hidden; margin: 10px 0; }
.pace-fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: var(--radius-full); }
.pace-risk { position: absolute; top: 0; width: 2px; height: 100%; background: var(--ink); }

.comp { margin: 0 0 var(--space-3); }
.comp-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0;
  border-bottom: 1px solid var(--line); font-size: 14px; }
.comp-row:last-child { border-bottom: 0; }
.comp-row.link { text-decoration: none; color: inherit; }
.comp-row.link:active { background: var(--surface-2); }

/* ---------- экран «Отчёт» (v039) ---------- */
.rep-nav { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.rep-nav-title { flex: 1; text-align: center; font-size: 15px; font-weight: 600; }
.rep-arrow { width: 40px; height: 36px; flex: none; font-size: 20px; line-height: 1;
  background: var(--surface-2); border: 0; border-radius: var(--radius-sm); color: var(--ink); cursor: pointer; }
.rep-arrow:disabled { opacity: .35; cursor: default; }
.rep-tiles { gap: var(--space-3); }
.total-card.rep-tile { cursor: pointer; font: inherit; color: inherit; text-align: left; width: 100%;
  position: relative; min-width: 0; border: 0; }
.rep-tile .chev { position: absolute; right: 10px; top: 12px; transition: transform .15s; }
.rep-tile[aria-expanded="true"] .chev { transform: rotate(90deg); }
.rep-tile.on { background: var(--selection); }
.rep-tile.dim { opacity: .7; }
.rep-panel { margin: 0 0 var(--space-3); }
.rep-head { font-size: 14px; color: var(--ink-2); padding-bottom: 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.rep-head b { color: var(--ink); }
.rep-warn { color: var(--danger); font-size: 14px; font-weight: 600; margin: 4px 0; }

/* v041: раскрытие «Деньги» в две колонки */
.comp-2col { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--space-4); }
.comp-col { min-width: 0; }
.comp-col-h { font-size: 14px; font-weight: 600; color: var(--ink-2);
  padding-bottom: 4px; margin-bottom: 2px; border-bottom: 1px solid var(--line); }
.comp-row .cn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comp-row .cv { white-space: nowrap; margin-left: 8px; }
.comp-2col .comp-row { gap: 6px; }

/* v043: «мои деньги» + карман */
.hl-mine { font-size: 14px; color: var(--ink-2); margin: 0 0 var(--space-3); }
.hl-mine b { color: var(--ink); }
.comp-karman { margin-top: var(--space-3); border-top: 1px solid var(--line); padding-top: 8px; }
.rec-warn { background: var(--danger-soft); border-radius: var(--radius-md); padding: 10px 12px;
  margin: 8px 0; font-size: 14px; color: var(--ink); }
.rec-warn .rw-h { font-weight: 700; color: var(--danger-soft-ink); }

/* ================= v049: выбор категории — недавние, поиск, «уточнить» ================= */
.catgrp-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.catsearch-btn { background: none; border: 0; cursor: pointer; padding: 4px; border-radius: var(--radius-sm);
  color: var(--mark); display: inline-flex; }
.catsearch-btn .ic { width: 20px; height: 20px; }
.catsearch-btn:hover { color: var(--accent-ink); background: var(--surface-2); }
/* подпись-разделитель между четвёрками «Недавних» — они разного происхождения */
.catsub { font-size: 14px; color: var(--ink-2); margin: 2px 0 6px; }
.cattree-toggle { width: 100%; margin-top: 8px; }

/* строка результата поиска */
.cathit { display: flex; align-items: center; gap: var(--space-3); width: 100%; text-align: left; font: inherit;
  background: var(--surface-2); border: 0; border-radius: var(--radius-md);
  padding: 8px 10px; margin-bottom: 6px; color: var(--ink); cursor: pointer; }
.cathit.on { background: var(--selection); }
.cathit-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cathit-t b { font-weight: 600; font-size: 16px; }
.cathit-t i { font-style: normal; font-size: 14px; color: var(--ink-2); }
.cathit-n { font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.cathit mark, .qr-opt mark { background: var(--selection); color: var(--ink); border-radius: 3px; padding: 0 1px; }

/* «уточнить» в компактной строке ввода — точка тревоги; в ленте вместо точки метка */
.dot-review { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--danger); margin-right: 6px; vertical-align: middle; }
/* подсветка только что внесённой строки (Р-1.6) — короткая, не мигающая */
@keyframes zc-fresh { from { background: var(--selection); } to { background: transparent; } }
.opline.fresh { animation: zc-fresh 1.6s ease-out 1; border-radius: var(--radius-sm); }
@media (prefers-reduced-motion: reduce) { .opline.fresh { animation: none; } }

.review-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  background: var(--danger-soft); color: var(--ink); border-radius: var(--radius-md);
  padding: 10px 12px; margin-bottom: 10px; font-size: 14px; }
.review-bar .btn { width: auto; margin: 0; padding: 6px 12px; font-size: 14px; background: var(--bg); }
.review-bar-btns { display: flex; gap: 6px; }

/* ---------- навигация: сайдбар и таббар (светлые, --sidebar) ---------- */
.sidebar { display: none; }
.sidebar[hidden] { display: none; }
.side-brand { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 700;
  padding: 4px 10px 14px; color: var(--ink); }
.side-brand .grain { width: 22px; height: 22px; color: var(--accent-ink); }
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-item { display: flex; align-items: center; border-radius: var(--radius-sm); }
.side-item:hover { background: var(--surface-2); }
.side-item.on { background: var(--selection); }
.side-item > a:first-child { flex: 1; display: flex; align-items: center; gap: 10px; min-height: 36px;
  padding: 0 10px; color: var(--ink); font-size: 16px; }
.side-item .ic { width: 20px; height: 20px; color: var(--mark); flex: none; }
.side-item.on .ic { color: var(--accent-ink); }
.side-item.on > a:first-child { font-weight: 600; }
/* счётчик «уточнить»: отдельная ссылка в ленту с фильтром (вложенная <a> невалидна) */
.side-cnt { margin-right: 8px; font-size: 14px; font-weight: 600; color: var(--danger-soft-ink);
  background: var(--danger-soft); border-radius: var(--radius-full); padding: 0 7px; line-height: 20px; }
.side-accounts { display: flex; flex-direction: column; gap: 1px; margin-top: 6px; }
.side-lbl { font-size: 14px; font-weight: 600; color: var(--ink-2); margin: 16px 10px 4px; }
.side-acc { display: flex; justify-content: space-between; gap: 8px; align-items: baseline;
  padding: 5px 10px; border-radius: var(--radius-sm); color: var(--ink); font-size: 14px; }
.side-acc:hover { background: var(--surface-2); }
.side-acc b { font-weight: 600; white-space: nowrap; }
.side-acc span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-keys { margin-top: auto; font-size: 14px; color: var(--ink-2); padding: 8px 10px; line-height: 1.6; }
.side-keys b { font-weight: 600; color: var(--ink); }

/* Таббар: пять мест (решение Pavel-а 01.10.2026). Подпись — единственное место мельче 14px */
.tabbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: var(--sidebar); border-top: 1px solid var(--line); }
.tabbar .tab { flex: 1; min-width: 0; position: relative; display: flex; justify-content: center; }
.tabbar .tab > a:first-child { display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 12px; line-height: 14px; font-weight: 600; color: var(--ink-2); padding: 6px 0; }
.tabbar .tab .ic { width: 24px; height: 24px; color: var(--mark); }
.tabbar .tab.on > a:first-child, .tabbar .tab.on .ic { color: var(--accent-ink); }
/* центральная «+»: круг 44px, золотая заливка, без подписи (подпись — в aria-label) */
.tabbar .tab-plus > a:first-child { padding: 0; }
.tabbar .tab-plus .plus { width: 44px; height: 44px; border-radius: var(--radius-full); background: var(--accent);
  display: grid; place-items: center; box-shadow: var(--shadow-pop); }
.tabbar .tab-plus .ic, .tabbar .tab-plus.on .ic { color: var(--on-accent); width: 24px; height: 24px; }
.tabbar .tab-cnt { position: absolute; top: 2px; left: calc(50% + 6px); font-size: 12px; line-height: 16px;
  font-weight: 600; min-width: 18px; padding: 0 5px; text-align: center; border-radius: var(--radius-full);
  background: var(--danger-soft); color: var(--danger-soft-ink); }

/* ============ v050 Р-2.1: десктопная раскладка. Порог 1000px (решение Pavel 24.08 п. 3) ============
   Ниже порога НИ ОДНО правило отсюда не действует. Механика повторяет Хаб: сайдбар фиксирован. */
@media (min-width: 1000px) {
  body.wide .sidebar {
    display: flex; flex-direction: column; gap: 2px;
    position: fixed; left: 0; top: 0; bottom: 0; width: var(--sidebar-w); z-index: 15;
    padding: var(--space-4) var(--space-3); overflow-y: auto; background: var(--sidebar);
  }
  body.wide .tabbar { display: none; }
  /* колонка шире list-max: строка ввода широкого экрана (шесть полей) в 720px не встаёт */
  body.wide main { margin-left: var(--sidebar-w); max-width: 1120px;
    padding: var(--space-12) var(--space-8) var(--space-8); }
  body.wide .page-title { margin-top: 0; }
  body.wide .btn.dock { bottom: var(--space-4); }
  body.wide .calc-ops { display: none; }
  body.wide .quickrow-host { display: block; margin: 0 0 var(--space-4); }
  /* Р-2.4: сетка плиток на широком — 8 в ряд, та же разметка, что на телефоне */
  body.wide .catgrid { grid-template-columns: repeat(8, 1fr); }
  body.wide .hl-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.wide .hl-tile[data-comp="assets"] { order: 0; grid-column: auto; }
  body.wide .adv-grid2 { grid-template-columns: 1fr 1fr; }
}

/* ============ v050 Р-2.2…Р-2.6: строка ввода широкого экрана ============ */
.quickrow-host { display: none; }                  /* на телефоне её нет вовсе */
.qrow { display: grid; gap: 8px; align-items: center;
  grid-template-columns: 120px minmax(200px, 1.2fr) 180px minmax(160px, 1fr) 150px 120px;
  background: var(--surface-2); border-radius: var(--radius-md); padding: 10px; }
.qrow input, .qrow select { margin: 0; background: var(--bg); }
.qr-amt { font-size: 18px; font-weight: 600; text-align: right; }
.qr-cat { position: relative; }
.qr-cat input { width: 100%; }
.qr-go { width: auto; margin: 0; padding: 12px 14px; }
/* выпадающий список категорий (Р-2.3) */
.qr-drop, .bulk-drop { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--surface-raised); border-radius: var(--radius-md); box-shadow: var(--shadow-pop);
  max-height: 340px; overflow-y: auto; padding: 4px; }
.qr-drop[hidden], .bulk-drop[hidden] { display: none; }
.qr-opt { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit;
  background: none; border: 0; border-radius: var(--radius-sm); padding: 8px; cursor: pointer;
  color: var(--ink); font-size: 15px; }
.qr-opt i { font-style: normal; font-size: 14px; color: var(--ink-2); margin-left: auto; }
/* мышь и клавиатура разведены: выбор ↑/↓ здесь основной способ */
.qr-opt:hover { background: var(--surface-2); }
.qr-opt.hi { background: var(--selection); }
.qr-empty { padding: 10px; font-size: 14px; color: var(--ink-2); }
.qr-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.qr-chip { background: var(--surface-2); border: 0; border-radius: var(--radius-full); font: inherit;
  padding: 4px 12px; font-size: 14px; color: var(--ink); cursor: pointer; }
.qr-chip:hover { background: var(--selection); }
.qr-chip.on { background: var(--selection); font-weight: 600; }
/* v052 Р-3.1: чип-подсказка по сумме. Выделен, но не выбран — решение за человеком */
.qr-chip.qr-hint { box-shadow: 0 0 0 1px var(--accent-ink) inset; display: inline-flex; gap: 6px; align-items: baseline; }
.qr-chip.qr-hint i { font-style: normal; font-size: 14px; color: var(--ink-2); }
/* тост с отменой живёт 10 с (Р-2.6) */
.toast-undo { display: flex; align-items: center; gap: 12px; }
.toast-undo button { background: none; border: 1px solid var(--mark); color: inherit;
  border-radius: var(--radius-sm); padding: 3px 10px; font: inherit; font-size: 14px; cursor: pointer; }

/* v052 Р-3.2: разбор пачкой */
.bulk-box { margin-top: 6px; }
.bulk-row { display: grid; gap: 8px; align-items: center; padding: 8px; border-bottom: 1px solid var(--line);
  grid-template-columns: 90px minmax(0, 1fr) 110px minmax(160px, 1fr); }
.bulk-row.done { opacity: .5; }
.bulk-d { font-size: 14px; color: var(--ink-2); }
.bulk-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.bulk-a { text-align: right; font-weight: 600; white-space: nowrap; }
.bulk-c { position: relative; }
.bulk-c input { width: 100%; margin: 0; }
/* на телефоне четыре колонки не влезают — строка складывается в две */
@media (max-width: 640px) {
  .bulk-row { grid-template-columns: 90px 1fr 100px; }
  .bulk-c { grid-column: 1 / -1; }
}

/* ================= v051: вкладка «Советник» (П6) ================= */
.adv-grid2 { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
.adv-card { background: var(--surface-raised); border-radius: var(--radius-md); box-shadow: var(--shadow-card);
  padding: var(--space-4); }
.adv-lbl { font-size: 14px; color: var(--ink-2); }
.adv-num { font-size: 24px; line-height: 30px; font-weight: 700; margin-top: 4px; }
.adv-unit { font-size: 14px; font-weight: 400; color: var(--ink-2); }
.adv-sub { font-size: 14px; color: var(--ink-2); margin-top: 2px; }
/* Р-2: модельный лимит выше живых денег — число приглушается, рядом встаёт правда */
.adv-dim .adv-num { opacity: .55; }
.adv-warn { margin-top: 6px; font-size: 14px; color: var(--accent-ink); }
.adv-pair { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 14px; color: var(--ink-2); }
.adv-pair span { display: flex; flex-direction: column; }
.adv-pair b { color: var(--ink); font-size: 16px; }
.adv-lamps { display: inline-block; margin: 10px 0 4px; font-size: 14px; color: var(--ink-2); }
.adv-lamps b.ok { color: var(--income); }
.adv-lamps b.bad { color: var(--danger); }
.adv-lamps b.mut { color: var(--ink-2); }
.adv-flags { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.adv-stale { display: block; background: var(--selection); border-radius: var(--radius-sm);
  padding: 8px 12px; font-size: 14px; }
.adv-meta { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; font-size: 14px; color: var(--ink-2); }
.adv-meta .btn { width: auto; margin: 0; padding: 4px 12px; font-size: 14px; }
.adv-row { border-bottom: 1px solid var(--line); padding: 10px 0; }
.adv-row.crit .adv-what { font-weight: 600; }
.adv-row.done { opacity: .6; }
.adv-row-h { display: flex; gap: 10px; align-items: baseline; }
.adv-date { font-size: 14px; color: var(--ink-2); flex: none; width: 90px; }
.adv-what { flex: 1; min-width: 0; }
.adv-amt { font-weight: 600; white-space: nowrap; }
.adv-row-b { display: flex; gap: 8px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.adv-row-b .btn { width: auto; margin: 0; padding: 4px 12px; font-size: 14px; }
.adv-penalty { font-size: 14px; color: var(--ink-2); margin: 6px 0 0; line-height: 1.5; }
/* просроченное отделено рамкой, а не только порядком */
.adv-overdue { box-shadow: 0 0 0 1px var(--danger) inset; border-radius: var(--radius-md); padding: 4px 12px; }
.adv-facts { display: flex; flex-wrap: wrap; gap: 16px; font-size: 14px; color: var(--ink-2); margin-top: var(--space-2); }
.adv-facts span { display: flex; flex-direction: column; }
.adv-facts b { color: var(--ink); font-size: 16px; }
.adv-queue { margin: 8px 0 0 18px; font-size: 15px; line-height: 1.7; }
.adv-note { font-size: 14px; color: var(--ink-2); margin: 6px 0; }
.adv-err { background: var(--danger-soft); border-radius: var(--radius-md); padding: 14px; margin-top: 12px; }
.adv-err p { font-size: 14px; color: var(--ink); margin: 6px 0 0; line-height: 1.6; }
.adv-assum { margin-top: 8px; font-size: 14px; color: var(--ink-2); }
.adv-assum ul { margin: 6px 0 0 18px; line-height: 1.6; }
/* v059: оформление и «ещё» — бывшие значки шапки */
.adv-more { display: flex; flex-direction: column; }
.adv-more a { display: flex; align-items: center; gap: var(--space-3); min-height: 48px; padding: 0 8px;
  border-bottom: 1px solid var(--line); }
.adv-more a:hover { background: var(--surface-2); }
.adv-more .ic { width: 20px; height: 20px; color: var(--mark); }
.adv-more .chev { margin-left: auto; float: none; }

/* v058: карточка «Личный карман» (блок pocket контракта 5). Только вёрстка */
.adv-pocket { margin-top: 6px; }
.adv-pk-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; }
.adv-pk-pos { color: var(--income); }
.adv-pk-neg { color: var(--danger); }
.adv-pk-unex { font-size: 14px; color: var(--ink-2); }
/* |необъяснено| выше порога: не «мелочь округления», а забытые операции */
.adv-pk-unex.loud { color: var(--accent-ink); font-weight: 600; }
/* карман не сверялся больше 35 дней — карточка гасится целиком */
.adv-pk-old { opacity: .55; }
.adv-pk-stale { font-size: 14px; color: var(--accent-ink); margin-top: 4px; }
.adv-pk-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 12px; }
/* §3.4 ТЗ: на телефоне колонки одна под другой */
@media (max-width: 640px) { .adv-pk-cols { grid-template-columns: 1fr; } }
.adv-pk-col { min-width: 0; }   /* длинная статья не должна распирать сетку */
.adv-pk-total { font-size: 20px; line-height: 26px; font-weight: 700; margin-top: 2px; }
.adv-pk-items, .adv-pk-cand { margin-top: 8px; font-size: 14px; color: var(--ink-2); }
.adv-pk-items ul, .adv-pk-cand ul { list-style: none; margin: 6px 0 0; padding: 0; }
.adv-pk-items li, .adv-pk-cand li { display: flex; justify-content: space-between;
  gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.adv-pk-items b, .adv-pk-cand b { color: var(--ink); white-space: nowrap; }
.adv-pk-cov { margin-top: 12px; font-size: 14px; color: var(--ink-2); line-height: 1.6; }
.adv-pk-hist { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.adv-pk-hist span { display: flex; flex-direction: column; background: var(--surface-2);
  border-radius: var(--radius-md); padding: 8px 12px; }
.adv-pk-hist i { font-style: normal; font-size: 14px; color: var(--ink-2); }
.adv-pk-hist b { font-size: 16px; }
.adv-pk-hist u { text-decoration: none; font-size: 14px; color: var(--ink-2); }

@media print {
  .tabbar, .sidebar, .status-pills, .filters, .btn, .seg, .period, #rSeg, .rep-arrow, nav, .chev { display: none !important; }
  html, body { background: #fff; color: #000; }
  .card, .total-card, .hl-tile, .adv-card { background: #fff; box-shadow: none; border: 1px solid #999; }
  main { padding: 0; max-width: none; margin: 0; }
  .rep-tile.dim { opacity: 1 !important; }
  .rep-panel, #panelFlow, #panelBal { display: block !important; }
  .card { break-inside: avoid; }
}