/* ---------- Тёмная тема: фон «Black» владельца и карточки в стиле Liquid Glass (7 октября 2026) ----------
   Стекло: полупрозрачная заливка, размытие того, что под ней, светлый блик по верхней кромке и тонкий ободок.
   Светлая тема остаётся плоской. */
:root[data-theme="dark"] {
  --page: #0b0b0a;
  --surface-1: rgb(255 255 255 / .06);
  --border: rgb(255 255 255 / .14);
  --grid: rgb(255 255 255 / .09);
  --glass-bg: linear-gradient(135deg, rgb(255 255 255 / .11), rgb(255 255 255 / .04) 55%, rgb(255 255 255 / .07)), rgb(14 14 12 / calc(1 - var(--glass-t) * .9));
  --glass-border: rgb(255 255 255 / .16);
  --glass-shine: inset 0 1px 0 rgb(255 255 255 / .22), inset 0 0 0 1px rgb(255 255 255 / .03);
  --glass-shadow: 0 12px 32px rgb(0 0 0 / .35);
  --glass-blur: blur(26px) saturate(160%);
  --info-bg: rgb(255 255 255 / .08);
  --accent-soft: rgb(59 130 246 / .18);
}
:root[data-theme="dark"] body::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: radial-gradient(1100px 640px at 8% -8%, rgb(37 99 235 / .32), transparent 62%),
              radial-gradient(900px 560px at 100% 104%, rgb(13 148 136 / .22), transparent 60%), #0b1220;
}
:root[data-theme="dark"] .card,
:root[data-theme="dark"] details.fold-card,
:root[data-theme="dark"] .tile,
:root[data-theme="dark"] .sidebar,
:root[data-theme="dark"] dialog,
:root[data-theme="dark"] .tooltip,
:root[data-theme="dark"] .install-guide {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shine), var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
:root[data-theme="dark"] .sidebar { border-width: 0 1px 0 0; border-radius: 0; box-shadow: var(--glass-shine); }
:root[data-theme="dark"] details.fold-card > .card { background: none; border: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; }
:root[data-theme="dark"] .tile:first-child {
  background: linear-gradient(135deg, rgb(59 130 246 / .22), rgb(59 130 246 / .06) 60%, rgb(255 255 255 / .05));
  border-color: rgb(59 130 246 / .35); color: var(--text-primary);
}
:root[data-theme="dark"] .tile:first-child .label, :root[data-theme="dark"] .tile:first-child .delta { color: var(--text-secondary); }
:root[data-theme="dark"] dialog::backdrop { background: rgb(0 0 0 / .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
:root[data-theme="dark"] .photo-dialog { background: #000; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Кнопки, поля и списки — тоже стеклянные, с бликом сверху. */
:root[data-theme="dark"] button:not(.primary):not(.theme):not(.menu button):not(.icon-btn):not(.close-btn):not(.note-btn):not(.link),
:root[data-theme="dark"] .button:not(.primary),
:root[data-theme="dark"] select, :root[data-theme="dark"] input[type="date"],
:root[data-theme="dark"] input[type="text"], :root[data-theme="dark"] input[type="password"],
:root[data-theme="dark"] input[type="search"], :root[data-theme="dark"] input[type="number"],
:root[data-theme="dark"] input.cost, :root[data-theme="dark"] .reply textarea, :root[data-theme="dark"] .stage {
  background: rgb(255 255 255 / .07); border-color: rgb(255 255 255 / .16);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .14);
}
:root[data-theme="dark"] button:not(.primary):not(.note-btn):not(.menu button):not(.link):hover, :root[data-theme="dark"] .button:not(.primary):hover {
  background: rgb(255 255 255 / .12); border-color: rgb(255 255 255 / .3); }
:root[data-theme="dark"] button.primary { box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 6px 18px rgb(59 130 246 / .25); }
:root[data-theme="dark"] .menu button:hover { background: rgb(255 255 255 / .08); }
:root[data-theme="dark"] .menu button[aria-selected="true"] { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent), inset 0 1px 0 rgb(255 255 255 / .1); }
:root[data-theme="dark"] .stage.done { background: rgb(25 158 112 / .25); }
:root[data-theme="dark"] .callout { background: rgb(255 255 255 / .07); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
:root[data-theme="dark"] .callout.warn { background: rgb(201 133 0 / .18); }
:root[data-theme="dark"] .callout.bad { background: rgb(230 103 103 / .18); }
:root[data-theme="dark"] .callout.good { background: rgb(25 158 112 / .18); }
:root[data-theme="dark"] code, :root[data-theme="dark"] .empty code { background: rgb(255 255 255 / .1); }
:root[data-theme="dark"] th { color: var(--text-secondary); }
/* Закреплённая первая колонка в расходах не должна просвечивать: под ней своя подложка со стеклом. */
:root[data-theme="dark"] table.expenses th:first-child, :root[data-theme="dark"] table.expenses td:first-child {
  background: rgb(24 24 22 / .92); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
:root[data-theme="dark"] .pull-bar, :root[data-theme="dark"] .thumb { background: rgb(255 255 255 / .1); }

/* ---------- Светлая тема: фон «White» владельца и то же стекло, только светлое ---------- */
:root[data-theme="light"] {
  --surface-1: rgb(255 255 255 / .62);
  --border: rgb(15 23 42 / .10);
  --grid: rgb(15 23 42 / .09);
  --glass-bg: linear-gradient(135deg, rgb(255 255 255 / calc(1 - var(--glass-t) * .34)), rgb(255 255 255 / calc(1 - var(--glass-t) * .74)) 55%, rgb(255 255 255 / calc(1 - var(--glass-t) * .52)));
  --glass-border: rgb(255 255 255 / .85);
  --glass-shine: inset 0 1px 0 rgb(255 255 255 / .95), inset 0 0 0 1px rgb(15 23 42 / .05);
  --glass-shadow: 0 12px 32px rgb(15 23 42 / .12);
  --glass-blur: blur(26px) saturate(150%);
  --info-bg: rgb(255 255 255 / .55);
}
:root[data-theme="light"] body::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: radial-gradient(1100px 640px at 0% 0%, rgb(191 219 254 / .9), transparent 62%),
              radial-gradient(900px 560px at 100% 100%, rgb(204 251 241 / .9), transparent 60%), #f4f6fb;
}
:root[data-theme="light"] .card,
:root[data-theme="light"] details.fold-card,
:root[data-theme="light"] .tile,
:root[data-theme="light"] .sidebar,
:root[data-theme="light"] dialog,
:root[data-theme="light"] .tooltip,
:root[data-theme="light"] .install-guide {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shine), var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
:root[data-theme="light"] .sidebar { border-width: 0 1px 0 0; border-right-color: rgb(15 23 42 / .08); border-radius: 0; box-shadow: var(--glass-shine); }
:root[data-theme="light"] details.fold-card > .card { background: none; border: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; }
:root[data-theme="light"] .tile:first-child {
  background: linear-gradient(135deg, rgb(15 23 42 / .94), rgb(15 23 42 / .86)); border-color: rgb(15 23 42 / .9); color: #fff;
}
:root[data-theme="light"] dialog::backdrop { background: rgb(15 23 42 / .35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
:root[data-theme="light"] .photo-dialog { background: #000; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
:root[data-theme="light"] button:not(.primary):not(.theme):not(.menu button):not(.icon-btn):not(.close-btn):not(.note-btn):not(.link),
:root[data-theme="light"] .button:not(.primary),
:root[data-theme="light"] select, :root[data-theme="light"] input[type="date"],
:root[data-theme="light"] input[type="text"], :root[data-theme="light"] input[type="password"],
:root[data-theme="light"] input[type="search"], :root[data-theme="light"] input[type="number"],
:root[data-theme="light"] input.cost, :root[data-theme="light"] .reply textarea, :root[data-theme="light"] .stage {
  background: rgb(255 255 255 / .7); border-color: rgb(15 23 42 / .14);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .9);
}
:root[data-theme="light"] button:not(.primary):not(.note-btn):not(.menu button):not(.link):hover, :root[data-theme="light"] .button:not(.primary):hover {
  background: rgb(255 255 255 / .92); border-color: rgb(15 23 42 / .3); }
:root[data-theme="light"] button.primary { box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), 0 6px 18px rgb(59 130 246 / .35); }
:root[data-theme="light"] .menu button:hover { background: rgb(255 255 255 / .55); }
:root[data-theme="light"] .menu button[aria-selected="true"] { background: rgb(219 234 254 / .9); }
:root[data-theme="light"] .callout { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
:root[data-theme="light"] .callout.warn { background: rgb(253 241 216 / .85); }
:root[data-theme="light"] .callout.bad { background: rgb(252 228 227 / .85); }
:root[data-theme="light"] .callout.good { background: rgb(223 243 234 / .85); }
:root[data-theme="light"] code, :root[data-theme="light"] .empty code { background: rgb(15 23 42 / .08); }
:root[data-theme="light"] table.expenses th:first-child, :root[data-theme="light"] table.expenses td:first-child {
  background: rgb(255 255 255 / .9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }

/* ---------- Стекло выключено: плоские карточки без картинок (переключатель под темой) ---------- */
:root[data-glass="off"] body::before { display: none; }
/* Мерцание светлой кромки (`--glass-shine`) при наведении на строки таблиц в Chromium/Яндекс Браузере на Mac: карточка
   с backdrop-filter перерисовывалась целиком. Свой слой композиции у карточек и плиток это убирает. */
:root[data-theme="dark"] .card, :root[data-theme="dark"] .tile, :root[data-theme="dark"] details.fold-card,
:root[data-theme="light"] .card, :root[data-theme="light"] .tile, :root[data-theme="light"] details.fold-card {
  -webkit-transform: translateZ(0); transform: translateZ(0); isolation: isolate; }
:root[data-theme="dark"] details.fold-card > .card, :root[data-theme="light"] details.fold-card > .card { transform: none; }
/* Тёмная полоса поперёк таблицы на «Товарах» (Яндекс Браузер на Mac, 16 октября 2026): при прокрутке длинной таблицы внутри
   стеклянной карточки её слой перерисовывался не весь. Таблицы — в своём слое, карточка под ними не трогается. */
:root[data-theme="dark"] .card .table-wrap, :root[data-theme="light"] .card .table-wrap {
  -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
:root[data-glass="off"][data-theme="dark"] { --surface-1: #141c2e; --border: #273247; --grid: #1f2937; --info-bg: #1a2234; --accent-soft: #1e3a8a; }
:root[data-glass="off"][data-theme="light"] { --surface-1: #ffffff; --border: #e4e3e0; --grid: #ececea; --info-bg: #f1f1ef; }
:root[data-glass="off"] .card, :root[data-glass="off"] details.fold-card, :root[data-glass="off"] .tile,
:root[data-glass="off"] .sidebar, :root[data-glass="off"] dialog, :root[data-glass="off"] .tooltip, :root[data-glass="off"] .install-guide,
:root[data-glass="off"] button, :root[data-glass="off"] .button, :root[data-glass="off"] select, :root[data-glass="off"] input,
:root[data-glass="off"] .reply textarea, :root[data-glass="off"] .stage, :root[data-glass="off"] .callout,
:root[data-glass="off"] table.expenses th:first-child, :root[data-glass="off"] table.expenses td:first-child {
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
:root[data-glass="off"] .card, :root[data-glass="off"] details.fold-card, :root[data-glass="off"] .tile,
:root[data-glass="off"] .sidebar, :root[data-glass="off"] dialog, :root[data-glass="off"] .tooltip, :root[data-glass="off"] .install-guide,
:root[data-glass="off"] button:not(.primary):not(.theme):not(.menu button):not(.icon-btn):not(.close-btn):not(.note-btn):not(.link),
:root[data-glass="off"] .button:not(.primary), :root[data-glass="off"] select, :root[data-glass="off"] input[type="date"],
:root[data-glass="off"] input[type="text"], :root[data-glass="off"] input[type="password"], :root[data-glass="off"] input.cost,
:root[data-glass="off"] input[type="search"], :root[data-glass="off"] input[type="number"],
:root[data-glass="off"] .products-toolbar input.search, :root[data-glass="off"] .reply textarea, :root[data-glass="off"] .stage,
:root[data-glass="off"] table.expenses th:first-child, :root[data-glass="off"] table.expenses td:first-child {
  background: var(--surface-1); border-color: var(--border); }
:root[data-glass="off"][data-theme="dark"] .tile:first-child, :root[data-glass="off"][data-theme="light"] .tile:first-child {
  background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
:root[data-glass="off"] .tile:first-child .label, :root[data-glass="off"] .tile:first-child .delta { color: #d9d8d2; }
:root[data-glass="off"] .tile:first-child .value { color: var(--brand-accent); }
:root[data-glass="off"] button.primary { background: var(--accent); }
:root[data-glass="off"] .stage.done { background: var(--good-bg); }
:root[data-glass="off"] .callout { background: var(--info-bg); }
:root[data-glass="off"] .callout.warn { background: var(--warn-bg); }
:root[data-glass="off"] .callout.bad { background: var(--bad-bg); }
:root[data-glass="off"] .callout.good { background: var(--good-bg); }
:root[data-glass="off"] dialog::backdrop { background: rgb(0 0 0 / .45); -webkit-backdrop-filter: none; backdrop-filter: none; }