/* letsave.org: тема и компоненты в стиле панели Vibe, акцент зелёный. Утилиты даёт Tailwind 4 (CDN), тема для него — в <style type="text/tailwindcss"> оболочки. */
@layer theme, base, components, utilities;

/* Montserrat Variable, SIL OFL 1.1 */
@font-face { font-family: 'Montserrat Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('/fonts/montserrat-cyrillic-ext-wght-normal.woff2') format('woff2-variations'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: 'Montserrat Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('/fonts/montserrat-cyrillic-wght-normal.woff2') format('woff2-variations'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Montserrat Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('/fonts/montserrat-latin-ext-wght-normal.woff2') format('woff2-variations'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Montserrat Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('/fonts/montserrat-latin-wght-normal.woff2') format('woff2-variations'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* Токены тёмной темы (основной): те же значения стоят в @theme для Tailwind, светлые — в блоке ниже. Серые строго нейтральные, цвет только в акценте. */
:root {
  --font-sans: "Montserrat Variable", "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-xs: 12px; --text-xs--line-height: 16px;
  --text-sm: 13px; --text-sm--line-height: 18px;
  --text-base: 15px; --text-base--line-height: 22px;
  --text-lg: 18px; --text-lg--line-height: 24px;
  --color-bg: #050505; --color-surface: #0f0f0f; --color-raised: #181818; --color-hover: #212121; --color-strong: #2c2c2c;
  --color-muted: #8a8a8a; --color-soft: #a8a8a8; --color-fg: #ededed;
  --color-accent: #22b14c; --color-accent-hover: #2fc45b; --color-accent-soft: rgb(34 177 76 / 0.16);
  --color-danger: #ff5a5f; --color-danger-soft: rgb(255 90 95 / 0.14);
  --color-success: #22b14c; --color-success-soft: rgb(34 177 76 / 0.14);
  --color-warning: #e2b23a; --color-warning-soft: rgb(226 178 58 / 0.14);
  --radius-xs: 8px; --radius-sm: 16px; --radius-btn: 999px; --radius-field: 20px; --radius-card: 28px; --radius-block: 36px;
  --container-page: 1200px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1); /* шторки на телефоне, как в iOS */
  /* Фоны, которые раньше были прописаны прямо в компонентах: меню и списки, шапка и нижнее меню со стеклом, затемнение. */
  --color-chip: #181818; --color-menu: #1a1a1a; --color-header: rgb(5 5 5 / 0.7); --color-tabbar: rgb(15 15 15 / 0.6); --color-scrim: rgb(0 0 0 / 0.6);
  /* Живые поверхности (кошелёк, графит, кармашки, герой главной): текст, затемнение, стекло, подложки под шейдером. */
  --fx-fg: #ffffff; --fx-shade: linear-gradient(160deg, rgb(0 0 0 / 0.05) 0%, rgb(0 0 0 / 0.45) 100%);
  --fx-glass: rgb(255 255 255 / 0.14); --fx-glass-hover: rgb(255 255 255 / 0.24); --fx-badge: rgb(255 255 255 / 0.16); --fx-inset: rgb(0 0 0 / 0.25); --fx-live: #7dffa6;
  --fx-metal: linear-gradient(118deg, #06140b 0%, #0f3f20 26%, #39c96a 44%, #0d3a1d 58%, #1f9a46 76%, #06140b 100%);
  --fx-metal-flat: linear-gradient(118deg, #07160d 0%, #134d27 30%, #2fae58 46%, #0f3a1e 60%, #1c8a40 80%, #07160d 100%);
  --fx-chrome: linear-gradient(118deg, #121212 0%, #2b2b2b 28%, #9b9b9b 46%, #262626 60%, #5a5a5a 80%, #121212 100%);
  --fx-mesh: radial-gradient(120% 90% at 0% 0%, #1f9a46 0%, transparent 55%), radial-gradient(90% 90% at 100% 100%, #0e5c2a 0%, transparent 60%), #0b0f0c;
  --fx-pocket-chrome: linear-gradient(118deg, #2a2a2a, #6f6f6f 48%, #2f2f2f); --fx-pocket-chrome-fg: #ffffff;
  --fx-pocket-soft: #1d3a26; --fx-pocket-soft-fg: #bff5cf; --fx-pocket-hover: brightness(1.22);
}

/* Светлая тема. Выбор — в настройках профиля (users.theme → data-theme у html): light, dark или system — как на
   устройстве. Меняются только токены — их берут и компоненты, и утилиты Tailwind (app.css грузится без слоя и
   перекрывает @theme). Серые нейтральные; акцент, ошибка и предупреждение темнее, чтобы текст ими читался на белом.
   Живые поверхности (.fx-card, .metal-css, кармашки) берут токены --fx-*: в светлой теме — светлые мятные переливы и
   серебро с тёмным текстом; палитры шейдеров для обеих тем — в js/core/fx.js.
   Светлые токены стоят дважды — для выбранной светлой и для system при светлой теме устройства: CSS не умеет
   объединить селектор и media-условие в одном правиле. Правите один набор — правьте и второй. */
:root[data-theme="light"] {
  color-scheme: light;
  --color-bg: #f2f2f2; --color-surface: #ffffff; --color-raised: #ececec; --color-hover: #e2e2e2; --color-strong: #d1d1d1;
  --color-muted: #737373; --color-soft: #525252; --color-fg: #141414;
  --color-accent: #22b14c; --color-accent-hover: #188a3a; --color-accent-soft: rgb(34 177 76 / 0.12);
  --color-danger: #dc3b40; --color-danger-soft: rgb(220 59 64 / 0.1);
  --color-success: #22b14c; --color-success-soft: rgb(34 177 76 / 0.12);
  --color-warning: #946b00; --color-warning-soft: rgb(226 178 58 / 0.18);
  --color-chip: #ffffff; --color-menu: #e8e8e8; --color-header: rgb(242 242 242 / 0.75); --color-tabbar: rgb(255 255 255 / 0.7); --color-scrim: rgb(0 0 0 / 0.35);
  --fx-fg: #10241a; --fx-shade: linear-gradient(160deg, rgb(255 255 255 / 0.1) 0%, rgb(255 255 255 / 0) 100%);
  --fx-glass: rgb(255 255 255 / 0.45); --fx-glass-hover: rgb(255 255 255 / 0.65); --fx-badge: rgb(255 255 255 / 0.55); --fx-inset: rgb(255 255 255 / 0.4); --fx-live: #22b14c;
  --fx-metal: linear-gradient(118deg, #b4e6c3 0%, #7fd49a 26%, #e4f7ea 44%, #9fdfb3 58%, #4cc274 76%, #b4e6c3 100%);
  --fx-metal-flat: linear-gradient(118deg, #b4e6c3 0%, #7fd49a 26%, #e4f7ea 44%, #9fdfb3 58%, #4cc274 76%, #b4e6c3 100%);
  --fx-chrome: linear-gradient(118deg, #d2d2d2 0%, #b4b4b4 28%, #eeeeee 46%, #bdbdbd 60%, #a0a0a0 80%, #d2d2d2 100%);
  --fx-mesh: radial-gradient(120% 90% at 0% 0%, #4cc274 0%, transparent 55%), radial-gradient(90% 90% at 100% 100%, #8ad6a2 0%, transparent 60%), #d8f2e0;
  --fx-pocket-chrome: linear-gradient(118deg, #c6c6c6, #e6e6e6 48%, #bfbfbf); --fx-pocket-chrome-fg: #141414;
  --fx-pocket-soft: #a9e2bb; --fx-pocket-soft-fg: #0d4520; --fx-pocket-hover: brightness(1.03);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"], [data-theme="light"]) {
    color-scheme: light;
    --color-bg: #f2f2f2; --color-surface: #ffffff; --color-raised: #ececec; --color-hover: #e2e2e2; --color-strong: #d1d1d1;
    --color-muted: #737373; --color-soft: #525252; --color-fg: #141414;
    --color-accent: #22b14c; --color-accent-hover: #188a3a; --color-accent-soft: rgb(34 177 76 / 0.12);
    --color-danger: #dc3b40; --color-danger-soft: rgb(220 59 64 / 0.1);
    --color-success: #22b14c; --color-success-soft: rgb(34 177 76 / 0.12);
    --color-warning: #946b00; --color-warning-soft: rgb(226 178 58 / 0.18);
    --color-chip: #ffffff; --color-menu: #e8e8e8; --color-header: rgb(242 242 242 / 0.75); --color-tabbar: rgb(255 255 255 / 0.7); --color-scrim: rgb(0 0 0 / 0.35);
    --fx-fg: #10241a; --fx-shade: linear-gradient(160deg, rgb(255 255 255 / 0.1) 0%, rgb(255 255 255 / 0) 100%);
    --fx-glass: rgb(255 255 255 / 0.45); --fx-glass-hover: rgb(255 255 255 / 0.65); --fx-badge: rgb(255 255 255 / 0.55); --fx-inset: rgb(255 255 255 / 0.4); --fx-live: #22b14c;
    --fx-metal: linear-gradient(118deg, #b4e6c3 0%, #7fd49a 26%, #e4f7ea 44%, #9fdfb3 58%, #4cc274 76%, #b4e6c3 100%);
    --fx-metal-flat: linear-gradient(118deg, #b4e6c3 0%, #7fd49a 26%, #e4f7ea 44%, #9fdfb3 58%, #4cc274 76%, #b4e6c3 100%);
    --fx-chrome: linear-gradient(118deg, #d2d2d2 0%, #b4b4b4 28%, #eeeeee 46%, #bdbdbd 60%, #a0a0a0 80%, #d2d2d2 100%);
    --fx-mesh: radial-gradient(120% 90% at 0% 0%, #4cc274 0%, transparent 55%), radial-gradient(90% 90% at 100% 100%, #8ad6a2 0%, transparent 60%), #d8f2e0;
    --fx-pocket-chrome: linear-gradient(118deg, #c6c6c6, #e6e6e6 48%, #bfbfbf); --fx-pocket-chrome-fg: #141414;
    --fx-pocket-soft: #a9e2bb; --fx-pocket-soft-fg: #0d4520; --fx-pocket-hover: brightness(1.03);
  }
}

@layer base {
  html { font-size: 15px; color-scheme: dark; background-color: var(--color-bg); -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scrollbar-width: none; touch-action: manipulation; }
  /* Полос прокрутки нет нигде: ни у страницы, ни у списков и модалок. Прокрутка колесом и пальцем остаётся. */
  *, *::before, *::after { scrollbar-width: none; }
  *::-webkit-scrollbar { width: 0; height: 0; display: none; }
  body { min-height: 100dvh; margin: 0; background-color: var(--color-bg); color: var(--color-fg); font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--text-base--line-height); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
  ::selection { background-color: var(--color-accent); color: #ffffff; }
  *:focus, *:focus-visible { outline: none; }
  [hidden] { display: none !important; }
  button, select, summary, [role="button"], input[type="checkbox"], input[type="radio"], input[type="file"] { cursor: pointer; }
  button:disabled, select:disabled, input:disabled { cursor: default; }
  button, input, select, textarea { font: inherit; color: inherit; border: 0; background: none; }
  /* Флажок в стиле сайта — любой input[type=checkbox], без классов: скруглённый квадрат 20 px без обводки, отмеченный —
     акцент с белой галочкой (она вырастает за 220 мс), «выбрано частично» — чёрточка, нажатие продавливает.
     Переключатель (.switch) прячет свой input и рисует дорожку сам. */
  input[type="checkbox"] { -webkit-appearance: none; appearance: none; flex: none; width: 20px; height: 20px; margin: 0; border-radius: var(--radius-xs); vertical-align: middle; background: var(--color-strong) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 0 no-repeat; }
  input[type="checkbox"]:checked, input[type="checkbox"]:indeterminate { background-color: var(--color-accent); background-size: 14px; }
  input[type="checkbox"]:indeterminate { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6.5 12h11'/%3E%3C/svg%3E"); }
  input[type="checkbox"]:active:not(:disabled) { transform: scale(0.9); }
  input[type="checkbox"]:disabled { opacity: 0.45; }
  @media (prefers-reduced-motion: no-preference) {
    input[type="checkbox"] { transition: background-color 0.15s, background-size 0.22s var(--ease), transform 0.14s var(--ease); }
  }
  a { color: inherit; text-decoration: none; }
  svg { display: inline-block; vertical-align: middle; }
}

@layer components {
  /* Сетка без явных колонок (телефонная раскладка) — одна колонка не шире контейнера. Иначе колонка auto растягивается
     под самое длинное содержимое без переносов, и на 320 px страница уезжает вбок. grid-cols-* из утилит это переопределяют. */
  .grid { grid-template-columns: minmax(0, 1fr); }
  .page { width: 100%; max-width: calc(var(--container-page) + 32px); margin-inline: auto; padding-inline: 16px; }
  @media (min-width: 48rem) { .page { max-width: calc(var(--container-page) + 48px); padding-inline: 24px; } }

  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding-inline: 16px; border-radius: var(--radius-btn); background: var(--color-raised); color: var(--color-fg); font-size: var(--text-sm); line-height: var(--text-sm--line-height); font-weight: 500; white-space: nowrap; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation; transition: transform 0.14s var(--ease), background-color 0.15s, color 0.15s, opacity 0.15s; }
  .btn:hover, .btn:focus-visible { background: var(--color-hover); }
  .btn:disabled, .btn.is-disabled { opacity: 0.45; pointer-events: none; }
  .btn-sm { height: 34px; padding-inline: 12px; font-size: var(--text-xs); }
  .btn-lg { height: 48px; padding-inline: 22px; font-size: var(--text-base); }
  .btn-icon { width: 40px; padding-inline: 0; }
  .btn-icon.btn-sm { width: 34px; }
  .btn-block { width: 100%; }
  .btn-primary { background: var(--color-accent); color: #ffffff; }
  .btn-primary:hover, .btn-primary:focus-visible { background: var(--color-accent-hover); }
  .btn-ghost { background: transparent; color: var(--color-soft); }
  .btn-ghost:hover, .btn-ghost:focus-visible, .btn-ghost.is-active { background: var(--color-raised); color: var(--color-fg); }
  /* Шапка лежит на фоне страницы: выделение в ней — плашкой --color-chip (в светлой теме белой), иначе оно сливается с фоном. */
  .header .btn-ghost:hover, .header .btn-ghost:focus-visible, .header .btn-ghost.is-active { background: var(--color-chip); }
  .btn-danger { background: var(--color-danger-soft); color: var(--color-danger); }
  .btn-danger:hover, .btn-danger:focus-visible { background: var(--color-danger); color: #ffffff; }
  .btn-soft { background: var(--color-accent-soft); color: var(--color-accent-hover); }
  .btn-soft:hover, .btn-soft:focus-visible { background: var(--color-accent); color: #ffffff; }

  .press { touch-action: manipulation; transition: transform 0.14s var(--ease), background-color 0.15s, color 0.15s; }
  .btn:active, .press:active, .segment:active, .tab:active,
  .btn.is-pressed, .press.is-pressed, .segment.is-pressed, .tab.is-pressed { transform: scale(0.95); }

  .card { background: var(--color-surface); border-radius: var(--radius-card); }
  .panel { background: var(--color-surface); border-radius: var(--radius-block); padding: 16px; }
  @media (min-width: 48rem) { .panel { padding: 22px; } }
  .title { font-size: var(--text-lg); line-height: var(--text-lg--line-height); font-weight: 700; letter-spacing: -0.01em; }
  .muted { color: var(--color-muted); }

  .field { display: flex; flex-direction: column; gap: 6px; }
  .field-label { font-size: var(--text-sm); line-height: var(--text-sm--line-height); font-weight: 500; color: var(--color-soft); }
  .field-hint { font-size: var(--text-xs); line-height: var(--text-xs--line-height); color: var(--color-muted); }
  .field-error { font-size: var(--text-sm); line-height: var(--text-sm--line-height); color: var(--color-danger); }
  .input { display: block; width: 100%; min-height: 40px; padding: 9px 14px; border-radius: var(--radius-field); background: var(--color-raised); color: var(--color-fg); font-size: var(--text-sm); line-height: var(--text-sm--line-height); transition: background-color 0.15s; -webkit-appearance: none; appearance: none; }
  .input:hover, .input:focus { background-color: var(--color-hover); }
  .input::placeholder { color: var(--color-muted); opacity: 1; }
  .input.is-invalid { background-color: var(--color-danger-soft); }
  textarea.input { min-height: 88px; resize: vertical; }
  input.input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
  input.input[type="number"]::-webkit-inner-spin-button, input.input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
  .input-icon { position: relative; }
  .input-icon > svg { position: absolute; left: 14px; top: 50%; translate: 0 -50%; color: var(--color-muted); pointer-events: none; }
  .input-icon > .input { padding-left: 40px; }
  .check { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--color-soft); cursor: pointer; }
  .check:hover, .check:has(input:focus-visible) { color: var(--color-fg); }

  /* Переключатель: дорожка hover, включённый — accent, кружок fg. */
  .switch { position: relative; display: inline-flex; flex: none; width: 40px; height: 24px; cursor: pointer; }
  .switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
  .switch-track { position: absolute; inset: 0; border-radius: 999px; background: var(--color-strong); transition: background-color 0.2s; }
  .switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--color-fg); transition: translate 0.2s var(--ease), transform 0.14s var(--ease); }
  .switch input:checked + .switch-track { background: var(--color-accent); }
  .switch input:checked + .switch-track::after { translate: 16px 0; }
  .switch:active .switch-track::after { transform: scale(0.9); }
  .switch input:disabled + .switch-track { opacity: 0.45; }
  .switch-row { display: flex; align-items: center; gap: 12px; }

  /* Выпадающий список (js/core/select.js): настоящий select скрыт, рядом кнопка и свой список. */
  select.input { padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 9l-7 6-7-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px 16px; text-overflow: ellipsis; white-space: nowrap; }
  .select { position: relative; display: block; width: 100%; }
  .select-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
  .select-button { display: flex; align-items: center; gap: 8px; text-align: left; cursor: pointer; }
  .select-button:disabled { opacity: 0.45; cursor: default; }
  .select-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .select-button::after { content: ""; flex: none; width: 16px; height: 16px; background-color: var(--color-muted); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 9l-7 6-7-6'/%3E%3C/svg%3E") center / 16px 16px no-repeat; }
  .select.is-open .select-button { background-color: var(--color-hover); }
  .select.is-open .select-button::after { rotate: 180deg; }
  .select-list { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 6px); max-height: 280px; overflow-y: auto; padding: 6px; border-radius: var(--radius-card); background: var(--color-menu); opacity: 0; transform: scale(0.95); transform-origin: top center; scrollbar-width: none; }
  .select-list::-webkit-scrollbar { width: 0; height: 0; }
  .select.is-up .select-list { top: auto; bottom: calc(100% + 6px); transform-origin: bottom center; }
  .select.is-open .select-list { opacity: 1; transform: scale(1); }
  .select-search { position: sticky; top: -6px; z-index: 1; display: block; width: calc(100% + 12px); height: 34px; margin: -6px -6px 6px; padding: 0 12px; border-radius: var(--radius-card) var(--radius-card) var(--radius-sm) var(--radius-sm); background: var(--color-menu); color: var(--color-fg); font-size: var(--text-sm); }
  .select-search::placeholder { color: var(--color-muted); }
  .select-option { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 8px 14px; border-radius: var(--radius-btn); color: var(--color-soft); font-size: var(--text-sm); line-height: var(--text-sm--line-height); font-weight: 500; cursor: pointer; user-select: none; -webkit-user-select: none; }
  .select-option:hover, .select-option:focus { background-color: var(--color-strong); color: var(--color-fg); }
  .select-option[aria-selected="true"] { color: var(--color-fg); }
  .select-option[aria-selected="true"]::after { content: ""; flex: none; width: 16px; height: 16px; margin-inline-start: auto; background-color: var(--color-accent-hover); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.6l4.9 4.9L20 6.5'/%3E%3C/svg%3E") center / 16px 16px no-repeat; }
  .select-option[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
  @media (prefers-reduced-motion: no-preference) {
    .select-list { transition: opacity 0.15s ease, transform 0.2s var(--ease); }
    .select-button::after { transition: rotate 0.2s var(--ease); }
    .select-option { transition: background-color 0.15s, color 0.15s; }
  }

  /* Меню-дропдаун (Preline hs-dropdown) раскрывается как списки vibe (.select-list): прозрачность и масштаб
     0.95 → 1 от угла, к которому меню привязано. Само .hs-dropdown-menu не анимируем: Preline ставит его
     на место через transform: translate3d, и чужой transform тащил бы меню из левого верхнего угла.
     Анимируется внутренняя .menu-panel; data-hs-dropdown-transition на ней — Preline ждёт её при закрытии. */
  .hs-dropdown-menu { z-index: 50; min-width: 200px; }
  .menu-panel { padding: 8px; border-radius: var(--radius-card); background: var(--color-menu); opacity: 0; transform: scale(0.95); transform-origin: top right; }
  .hs-dropdown.open > .hs-dropdown-menu > .menu-panel, .hs-dropdown-menu.open > .menu-panel { opacity: 1; transform: scale(1); }
  .hs-dropdown-menu[data-placement="bottom-start"] > .menu-panel { transform-origin: top left; }
  .hs-dropdown-menu[data-placement="bottom"] > .menu-panel { transform-origin: top center; }
  .hs-dropdown-menu[data-placement="top-end"] > .menu-panel { transform-origin: bottom right; }
  .hs-dropdown-menu[data-placement="top-start"] > .menu-panel { transform-origin: bottom left; }
  .hs-dropdown-menu[data-placement="top"] > .menu-panel { transform-origin: bottom center; }
  .menu-item { display: flex; width: 100%; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-btn); font-size: var(--text-sm); line-height: var(--text-sm--line-height); font-weight: 500; color: var(--color-fg); text-align: left; cursor: pointer; }
  .menu-item:hover, .menu-item:focus-visible { background: var(--color-strong); }
  .menu-item > svg { color: var(--color-muted); }
  .menu-item.is-danger { color: var(--color-danger); }
  .menu-item.is-danger:hover { background: var(--color-danger-soft); }
  @media (prefers-reduced-motion: no-preference) { .menu-panel { transition: opacity 0.15s ease, transform 0.2s var(--ease); } }

  .segmented { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-btn); background: var(--color-surface); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .segmented::-webkit-scrollbar { width: 0; height: 0; }
  .segment { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding-inline: 14px; border-radius: var(--radius-btn); color: var(--color-muted); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; touch-action: manipulation; cursor: pointer; transition: transform 0.14s var(--ease), background-color 0.15s, color 0.15s; }
  .segment:hover { color: var(--color-fg); }
  .segment.is-active, .segment:has(input:checked) { background: var(--color-hover); color: var(--color-fg); }
  /* На телефоне сегменты переносятся на вторую строку, а не уезжают за экран. */
  @media (max-width: 47.99rem) { .segmented { display: flex; flex-wrap: wrap; width: 100%; overflow: visible; } .segment { flex: 1 1 auto; } }

  .badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: var(--color-raised); color: var(--color-soft); font-size: var(--text-xs); line-height: var(--text-xs--line-height); font-weight: 600; white-space: nowrap; }
  .badge-accent { background: var(--color-accent-soft); color: var(--color-accent-hover); }
  .badge-success { background: var(--color-success-soft); color: var(--color-success); }
  .badge-danger { background: var(--color-danger-soft); color: var(--color-danger); }
  .badge-warning { background: var(--color-warning-soft); color: var(--color-warning); }

  .stat { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 25px; background: var(--color-raised); }
  .stat-label { font-size: var(--text-xs); line-height: var(--text-xs--line-height); color: var(--color-muted); }
  .stat-value { font-size: var(--text-lg); line-height: var(--text-lg--line-height); font-weight: 700; }

  /* Таблицы: на ПК обычная таблица, на телефоне каждая строка — карточка, подписи колонок из data-label. */
  .table-wrap { width: 100%; }
  .table { width: 100%; border-collapse: separate; border-spacing: 0 4px; font-size: var(--text-sm); line-height: var(--text-sm--line-height); }
  .table th { padding: 8px 12px; text-align: left; font-size: var(--text-xs); line-height: var(--text-xs--line-height); font-weight: 500; color: var(--color-muted); white-space: nowrap; }
  .table td { padding: 10px 12px; vertical-align: middle; background: var(--color-surface); }
  .table tbody tr td:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
  .table tbody tr td:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
  .table tbody tr { transition: background-color 0.15s; }
  .table tbody tr:hover td { background: var(--color-raised); }
  .table td.is-num, .table th.is-num { text-align: right; font-variant-numeric: tabular-nums; }
  @media (max-width: 47.99rem) {
    .table thead { display: none; }
    .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
    .table tbody tr { margin-bottom: 8px; padding: 6px 4px; border-radius: var(--radius-card); background: var(--color-surface); }
    .table tbody tr:hover td { background: transparent; }
    .table td { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 10px; background: transparent; text-align: right; }
    .table td.is-num { text-align: right; }
    .table td::before { content: attr(data-label); flex: none; color: var(--color-muted); font-size: var(--text-xs); font-weight: 500; text-align: left; }
    .table td.is-main { justify-content: flex-start; text-align: left; }
    .table td.is-main::before { display: none; }
    .table tbody tr td:first-child, .table tbody tr td:last-child { border-radius: 0; }
  }

  /* Модалки. ПК (от 768 px) — как раньше: по центру, появляются и закрываются прозрачностью и масштабом за 0,2 с.
     Телефон — шторки как в iOS (js/core/sheet.js): прижаты к низу, выезжают снизу и уезжают вниз за 300 мс кривой
     --ease-sheet, смахиваются пальцем вниз (исключение из правила 220 мс по просьбе владельца). Закрытие шторки ведёт
     sheet.js классом is-closing: шторка уезжает, затем dialog.close() — так анимация видна и в Safari.
     Модалка не выше экрана (max-height). Пока содержимое помещается — overflow: visible, выпадающий список раскрывается
     за пределы модалки. Не помещается — sheet.js ставит класс is-scroll: прокрутка внутри, без полосы.
     Высота следует за содержимым плавно (класс animate-height, js/core/height.js). */
  dialog.modal { overflow: visible; max-height: calc(100dvh - 2rem); margin: auto; width: calc(100% - 2rem); max-width: 28rem; padding: 0; border: 0; border-radius: var(--radius-block); background: var(--color-surface); color: var(--color-fg); opacity: 0; transform: scale(0.95); }
  dialog.modal[open] { opacity: 1; transform: scale(1); }
  dialog.modal.is-scroll { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
  dialog.modal.is-scroll::-webkit-scrollbar { width: 0; height: 0; }
  dialog.modal::backdrop { background: rgb(0 0 0 / 0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); }
  dialog.modal[open]::backdrop { background: var(--color-scrim); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
  @media (min-width: 48rem) and (prefers-reduced-motion: no-preference) {
    dialog.modal { transition: opacity 0.2s ease, transform 0.2s var(--ease), overlay 0.2s allow-discrete, display 0.2s allow-discrete; }
    dialog.modal::backdrop { transition: background-color 0.2s ease, backdrop-filter 0.2s ease, overlay 0.2s allow-discrete, display 0.2s allow-discrete; }
    @starting-style {
      dialog.modal[open] { opacity: 0; transform: scale(0.95); }
      dialog.modal[open]::backdrop { background: rgb(0 0 0 / 0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); }
    }
  }
  @media (max-width: 47.99rem) {
    dialog.modal { position: fixed; inset: auto 0 0; width: 100%; max-width: none; margin: 0; padding: 0 0 env(safe-area-inset-bottom); border-radius: var(--radius-block) var(--radius-block) 0 0; touch-action: none; max-height: calc(100dvh - 3rem - env(safe-area-inset-top)); }
    dialog.modal[open] { transform: translateY(0); }
    /* Длинная шторка прокручивается пальцем; смахнуть её можно от начала содержимого (touch-события в sheet.js). */
    dialog.modal.is-scroll { touch-action: pan-y; }
    /* Крестика в шторке нет: её смахивают вниз, закрывают нажатием на затемнение сверху или Esc. На ПК крестик есть. */
    dialog.modal .btn-icon[data-sheet-close] { display: none; }
    /* Полоска сверху, как у шторок iOS: за неё тянут вниз. */
    dialog.modal::before { content: ''; position: absolute; top: 8px; left: 50%; width: 36px; height: 5px; margin-left: -18px; border-radius: 999px; background: var(--color-strong); }
    dialog.modal.is-closing { transform: translateY(100%); }
    dialog.modal.is-closing::backdrop { background: rgb(0 0 0 / 0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); }
    /* Пока шторка открыта, страница под ней не прокручивается. */
    html:has(dialog.modal[open]) { overflow: hidden; }
  }
  @media (max-width: 47.99rem) and (prefers-reduced-motion: no-preference) {
    dialog.modal { transition: transform 0.3s var(--ease-sheet); }
    dialog.modal.is-dragging { transition: none; }
    dialog.modal::backdrop { transition: background-color 0.3s var(--ease-sheet), backdrop-filter 0.3s var(--ease-sheet); }
    @starting-style {
      dialog.modal[open] { transform: translateY(100%); }
      dialog.modal[open]::backdrop { background: rgb(0 0 0 / 0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); }
    }
  }

  /* Модалка по центру и на телефоне (класс modal-center, полный отзыв): не шторка — без полоски и смахивания, с крестиком,
     появляется и закрывается как на ПК. */
  @media (max-width: 47.99rem) {
    dialog.modal.modal-center { inset: 0; margin: auto; width: calc(100% - 2rem); max-width: 28rem; max-height: calc(100dvh - 2rem); padding: 0; border-radius: var(--radius-block); touch-action: auto; opacity: 0; transform: scale(0.95); }
    dialog.modal.modal-center[open] { opacity: 1; transform: scale(1); }
    dialog.modal.modal-center::before { content: none; }
    dialog.modal.modal-center .btn-icon[data-sheet-close] { display: inline-flex; }
  }
  @media (max-width: 47.99rem) and (prefers-reduced-motion: no-preference) {
    dialog.modal.modal-center { transition: opacity 0.2s ease, transform 0.2s var(--ease), overlay 0.2s allow-discrete, display 0.2s allow-discrete; }
    @starting-style { dialog.modal.modal-center[open] { opacity: 0; transform: scale(0.95); } }
  }

  /* Аккордеон: <details class="accordion">, высоту анимирует js/core/accordion.js. */
  details.accordion > summary { list-style: none; display: flex; align-items: center; gap: 10px; cursor: pointer; }
  details.accordion > summary::-webkit-details-marker { display: none; }
  .accordion-chevron { margin-left: auto; color: var(--color-muted); flex: none; }
  details.accordion[open]:not(.is-closing) > summary .accordion-chevron { transform: rotate(180deg); }
  @media (prefers-reduced-motion: no-preference) { .accordion-chevron { transition: transform 0.22s var(--ease); } }

  .flash-out { opacity: 0; transform: translateY(-4px); transition: opacity 0.3s ease, transform 0.3s ease; }

  /* Подсказка графика: цифры столбца при наведении, фокусе или касании. */
  .chart-col { position: relative; min-width: 0; cursor: default; }
  .chart-tip { position: absolute; z-index: 20; bottom: calc(100% + 8px); left: 50%; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--color-hover); color: var(--color-fg); font-size: var(--text-xs); line-height: var(--text-xs--line-height); white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, 4px); }
  .chart-tip-start { left: 0; transform: translate(0, 4px); }
  .chart-tip-end { left: auto; right: 0; transform: translate(0, 4px); }
  .chart-col:hover .chart-tip, .chart-col:focus .chart-tip { opacity: 1; transform: translate(-50%, 0); }
  .chart-col:hover .chart-tip-start, .chart-col:focus .chart-tip-start, .chart-col:hover .chart-tip-end, .chart-col:focus .chart-tip-end { transform: translate(0, 0); }
  .chart-col:hover .chart-bar.bg-accent, .chart-col:focus .chart-bar.bg-accent { background-color: var(--color-accent-hover); }
  .chart-col:hover .chart-bar.bg-soft, .chart-col:focus .chart-bar.bg-soft { background-color: var(--color-fg); }
  @media (prefers-reduced-motion: no-preference) { .chart-tip { transition: opacity 0.15s ease, transform 0.15s var(--ease); } .chart-bar { transition: background-color 0.15s; } }

  /* Шапка и нижнее меню телефона: полупрозрачные с размытием. */
  .header { position: sticky; top: 0; z-index: 40; background: var(--color-header); padding-top: env(safe-area-inset-top); -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); }
  .tabbar { position: fixed; inset-inline: 0; bottom: 0; z-index: 40; border-radius: var(--radius-block) var(--radius-block) 0 0; background: var(--color-tabbar); padding-bottom: env(safe-area-inset-bottom); -webkit-backdrop-filter: blur(40px) saturate(1.5); backdrop-filter: blur(40px) saturate(1.5); }
  .tab { display: flex; height: 58px; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: var(--radius-btn); color: var(--color-muted); font-size: 10px; line-height: 12px; font-weight: 500; }
  .tab.is-active { color: var(--color-accent-hover); }
  .tab > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-inline: 2px; }

  .rich { overflow-wrap: anywhere; white-space: pre-line; }
  .link { color: var(--color-accent-hover); font-weight: 600; }
  .link:hover { color: var(--color-fg); }
  .divider { height: 1px; background: var(--color-hover); }
  .avatar { display: inline-grid; place-items: center; flex: none; border-radius: 50%; background: var(--color-accent-soft); color: var(--color-accent-hover); font-weight: 700; text-transform: uppercase; user-select: none; }

  /* Шаги сделки. */
  .steps { display: flex; gap: 6px; }
  .step { flex: 1; height: 4px; border-radius: 999px; background: var(--color-hover); }
  .step.is-done { background: var(--color-accent); }
  .step.is-danger { background: var(--color-danger); }

  .copy-field { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 6px 0 14px; border-radius: var(--radius-field); background: var(--color-raised); font-size: var(--text-sm); }
  .copy-field > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-soft); }
}

/* SPA: полоска загрузки, смена страниц и скелетоны (js/core/router.js, js/core/skeleton.js). */
@layer components {
  .nav-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 80; height: 2px; background: var(--color-accent); transform: scaleX(0); transform-origin: left; opacity: 0; pointer-events: none; }
  .nav-progress.is-loading { opacity: 1; transform: scaleX(0.75); transition: transform 6s cubic-bezier(0.1, 0.8, 0.2, 1); }
  .nav-progress.is-done { opacity: 0; transform: scaleX(1); transition: transform 0.2s ease, opacity 0.3s ease 0.15s; }

  /* Старый контент гаснет, новый проявляется: только прозрачность, без сдвига. */
  @media (prefers-reduced-motion: no-preference) {
    [data-region="main"] { transition: opacity 0.18s ease; }
    [data-region="main"].is-leaving { opacity: 0; transition-duration: 0.14s; }
    [data-region="main"].is-entering { opacity: 0; transition: none; }
  }

  /* Скелетон: заглушки цвета raised на блоках surface, как настоящие карточки. Пульсирует прозрачностью, без свечения. */
  .skeleton { display: flex; flex-direction: column; gap: 16px; pointer-events: none; user-select: none; -webkit-user-select: none; }
  @media (min-width: 48rem) { .skeleton { gap: 24px; } }
  .sk-block { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 16px; border-radius: var(--radius-block); background: var(--color-surface); }
  @media (min-width: 48rem) { .sk-block { padding: 22px; } }
  .sk-card { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 12px; border-radius: var(--radius-card); background: var(--color-surface); }
  .sk-mini { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 14px; border-radius: var(--radius-card); background: var(--color-raised); }
  .sk-mini .sk-bar { background: var(--color-hover); }
  .sk-bar { display: block; flex: none; max-width: 100%; height: 12px; border-radius: var(--radius-xs); background: var(--color-raised); }
  .sk-heading { height: 18px; }
  .sk-icon { display: block; flex: none; border-radius: var(--radius-field); background: var(--color-raised); }
  .sk-field { display: block; width: 100%; border-radius: var(--radius-field); background: var(--color-raised); }
  .sk-btn { display: block; flex: none; max-width: 100%; height: 36px; border-radius: var(--radius-btn); background: var(--color-raised); }
  .sk-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
  .sk-col { display: flex; flex: 1; flex-direction: column; gap: 8px; min-width: 0; }
  .sk-stack { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
  .sk-split .sk-stack { gap: 16px; }
  .sk-between { justify-content: space-between; }
  .sk-end { justify-content: flex-end; }
  .sk-toolbar { flex-direction: column; align-items: stretch; }
  .sk-toolbar .sk-field { max-width: 384px; }
  .sk-segments { width: 340px; }
  @media (min-width: 40rem) { .sk-toolbar { flex-direction: row; align-items: center; justify-content: space-between; } }
  .sk-grid { display: grid; gap: 12px; grid-template-columns: repeat(var(--sm), minmax(0, 1fr)); }
  @media (min-width: 48rem) { .sk-grid { gap: 16px; grid-template-columns: repeat(var(--md), minmax(0, 1fr)); } }
  @media (min-width: 80rem) { .sk-grid { grid-template-columns: repeat(var(--xl), minmax(0, 1fr)); } }
  @media (min-width: 48rem) { .sk-dash { grid-template-columns: minmax(0, 1.3fr) minmax(0, 2fr); } .sk-span-2 { grid-column: span 2; } }
  .sk-split { display: grid; gap: 16px; }
  @media (min-width: 64rem) { .sk-split { grid-template-columns: minmax(0, 1fr) 340px; } }
  .sk-narrow { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 42rem; margin-inline: auto; }
  .sk-chart { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); align-items: end; gap: 4px; height: 176px; }
  @media (min-width: 48rem) { .sk-chart { gap: 8px; } }
  .sk-chart > span { display: block; border-radius: var(--radius-xs) var(--radius-xs) 0 0; background: var(--color-raised); }
  @media (prefers-reduced-motion: no-preference) { .skeleton { animation: sk-pulse 1.4s ease-in-out infinite; } }
}

@keyframes sk-pulse {
  50% { opacity: 0.5; }
}

/* Заставка полной загрузки (#boot в layout.php, js/core/boot.js): закрывает страницу, пока Tailwind с CDN собирает утилиты,
   и гаснет за 220 мс. Кольцо проявляется, только если загрузка дольше 0,3 с: при быстром заходе видно лишь проявление
   страницы. Если скрипты не загрузились, через 6 с заставку убирает boot-out, чтобы страница не осталась закрытой. */
@layer components {
  .boot { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--color-bg); animation: boot-out 0.22s var(--ease) 6s forwards; }
  .boot.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
  .boot.is-done .boot-ring { animation-play-state: paused; }
  .boot-ring { opacity: 0; animation: boot-in 0.22s var(--ease) 0.3s forwards; }
  .boot-ring circle { fill: none; stroke-width: 3; }
  .boot-track { stroke: var(--color-raised); }
  .boot-arc { stroke: var(--color-accent); stroke-linecap: round; stroke-dasharray: 25 100; }
  @media (prefers-reduced-motion: no-preference) {
    .boot.is-done { transition: opacity 0.22s var(--ease), visibility 0s linear 0.22s; }
    .boot-ring { animation: boot-in 0.22s var(--ease) 0.3s forwards, boot-spin 0.8s linear infinite; }
  }
}

@keyframes boot-out { to { opacity: 0; visibility: hidden; } }
@keyframes boot-in { to { opacity: 1; } }
@keyframes boot-spin { to { transform: rotate(360deg); } }

/* Выразительные поверхности (js/core/fx.js). Исключение из «только цвета темы» и шкалы 12/13/15/18 по просьбе владельца:
   металлические и градиентные карточки, крупные суммы. Без теней и свечения. Цвета — токены --fx-* (тёмные в :root,
   светлые в блоках светлой темы). */
@layer components {
  /* Карточка с живым фоном: шейдер Paper Shaders в [data-shader], поверх затемнение .fx-shade, контент сверху. */
  .fx-card { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--radius-block); color: var(--fx-fg); }
  /* Фон шире карточки и размыт: перелив мягкий, а размытые края уходят за скругление. */
  .fx-card > [data-shader] { position: absolute; inset: -40px; z-index: -2; filter: blur(22px); pointer-events: none; }

  .fx-card > [data-shader] canvas { display: block; width: 100% !important; height: 100% !important; }
  .fx-shade { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--fx-shade); }
  /* Пока шейдер грузится или если WebGL нет: металл на CSS-градиенте того же тона. */
  [data-shader="metal"] { background: var(--fx-metal); }
  [data-shader="chrome"] { background: var(--fx-chrome); }
  [data-shader="mesh"] { background: var(--fx-mesh); }

  /* Металл на чистом CSS: там, где WebGL не нужен (меню баланса). */
  .metal-css { position: relative; overflow: hidden; color: var(--fx-fg); background: var(--fx-metal-flat); }

  /* Крупная сумма: копейки приглушены. data-display — исключение из шкалы шрифтов. */
  .amount-display { font-size: 34px; line-height: 40px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
  @media (min-width: 48rem) { .amount-display { font-size: 40px; line-height: 46px; } }
  .amount-display .cents { opacity: 0.5; }
  .amount-md { font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .amount-md .cents { opacity: 0.5; }
  .currency-sign { opacity: 0.75; }

  /* Стеклянная кнопка на живом фоне. */
  .btn-glass { background: var(--fx-glass); color: var(--fx-fg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  .btn-glass:hover, .btn-glass:focus-visible { background: var(--fx-glass-hover); }
  .badge-glass { background: var(--fx-badge); color: var(--fx-fg); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .badge-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--fx-live); }
  /* Подложка внутри живой карточки (строки итога в новой сделке). */
  .fx-inset { background: var(--fx-inset); }

  /* Кошелёк: кармашки выглядывают над основной карточкой (как карты в бумажнике). */
  /* Кармашки — полноценные карточки, которые уходят за основную (видна полоска 40 px сверху). Задние чуть уже,
     как карты в бумажнике. Наведение приподнимает карточку и делает светлее; translate не мешает scale нажатия. */
  .wallet { display: flex; flex-direction: column; }
  .pocket { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; height: 96px; margin-bottom: -56px; padding: 11px 22px 0; border-radius: var(--radius-block); font-size: var(--text-sm); font-weight: 600; transition: transform 0.14s var(--ease), translate 0.22s var(--ease), filter 0.2s; }
  .pocket:nth-child(1) { margin-inline: 16px; }
  .pocket:nth-child(2) { margin-inline: 8px; }
  .pocket:hover, .pocket:focus-visible { translate: 0 -8px; filter: var(--fx-pocket-hover); }
  .pocket-chrome { background: var(--fx-pocket-chrome); color: var(--fx-pocket-chrome-fg); }
  .pocket-soft { background: var(--fx-pocket-soft); color: var(--fx-pocket-soft-fg); }
  .pocket .pocket-sum { font-variant-numeric: tabular-nums; }

  /* Плитка-выбор (роль, категория): радио внутри, выбранная подсвечена, кружок с галочкой. */
  .tile { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px; border-radius: var(--radius-card); background: var(--color-raised); cursor: pointer; user-select: none; -webkit-user-select: none; transition: background-color 0.15s, transform 0.14s var(--ease); }
  .tile:hover { background: var(--color-hover); }
  .tile:active { transform: scale(0.97); }
  .tile > input { position: absolute; opacity: 0; pointer-events: none; }
  .tile-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-field); background: var(--color-hover); color: var(--color-soft); transition: background-color 0.15s, color 0.15s; }
  .tile-check { position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; border-radius: 50%; background: var(--color-strong); transition: background-color 0.15s, transform 0.2s var(--ease); }
  .tile:has(input:checked) { background: var(--color-accent-soft); }
  .tile:has(input:checked) .tile-icon { background: var(--color-accent); color: #ffffff; }
  .tile:has(input:checked) .tile-check { background: var(--color-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 14px no-repeat; transform: scale(1.08); }
  .tile:has(input:focus-visible) { background: var(--color-hover); }

  /* Крупный ввод суммы по центру. Шрифт крупнее 16 px — iOS заодно не приближает поле. */
  .amount-input { display: block; width: 100%; min-width: 0; padding: 0; background: transparent; color: var(--color-fg); text-align: center; font-size: 44px; line-height: 52px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; caret-color: var(--color-accent); }
  .amount-input::placeholder { color: var(--color-strong); opacity: 1; }
  .chip { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--color-raised); color: var(--color-soft); font-size: var(--text-sm); font-weight: 500; cursor: pointer; transition: background-color 0.15s, color 0.15s, transform 0.14s var(--ease); }
  .chip:hover { background: var(--color-hover); color: var(--color-fg); }

  /* Появление блоков лесенкой при загрузке страницы: --i — порядковый номер. */
  @media (prefers-reduced-motion: no-preference) {
    /* backwards, а не both: после окончания анимация отпускает transform, и нажатие (.press) снова идёт плавно. */
    .fx-rise { animation: fx-rise 0.5s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 60ms); }
  }
}

@keyframes fx-rise { from { opacity: 0; transform: translateY(10px); } }

/* status-icons:start — иконки значков статуса, собирает /opt/letsave-tools/build_sprite.py (Solar Icons, CC BY 4.0), руками не править */
:root {
  --status-icon-medal: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22currentColor%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M12%2016C15.866%2016%2019%2012.866%2019%209C19%205.13401%2015.866%202%2012%202C8.13401%202%205%205.13401%205%209C5%2012.866%208.13401%2016%2012%2016ZM12%206C11.7159%206%2011.5259%206.34084%2011.1459%207.02251L11.0476%207.19887C10.9397%207.39258%2010.8857%207.48944%2010.8015%207.55334C10.7173%207.61725%2010.6125%207.64097%2010.4028%207.68841L10.2119%207.73161C9.47396%207.89857%209.10501%207.98205%209.01723%208.26432C8.92945%208.54659%209.18097%208.84072%209.68403%209.42898L9.81418%209.58117C9.95713%209.74833%2010.0286%209.83191%2010.0608%209.93531C10.0929%2010.0387%2010.0821%2010.1502%2010.0605%2010.3733L10.0408%2010.5763C9.96476%2011.3612%209.92674%2011.7536%2010.1565%2011.9281C10.3864%2012.1025%2010.7318%2011.9435%2011.4227%2011.6254L11.6014%2011.5431C11.7978%2011.4527%2011.8959%2011.4075%2012%2011.4075C12.1041%2011.4075%2012.2022%2011.4527%2012.3986%2011.5431L12.5773%2011.6254C13.2682%2011.9435%2013.6136%2012.1025%2013.8435%2011.9281C14.0733%2011.7536%2014.0352%2011.3612%2013.9592%2010.5763L13.9395%2010.3733C13.9179%2010.1502%2013.9071%2010.0387%2013.9392%209.93531C13.9714%209.83191%2014.0429%209.74833%2014.1858%209.58118L14.316%209.42898C14.819%208.84072%2015.0706%208.54659%2014.9828%208.26432C14.895%207.98205%2014.526%207.89857%2013.7881%207.73161L13.5972%207.68841C13.3875%207.64097%2013.2827%207.61725%2013.1985%207.55334C13.1143%207.48944%2013.0603%207.39258%2012.9524%207.19887L12.8541%207.02251C12.4741%206.34084%2012.2841%206%2012%206Z%22%20clip-rule%3D%22evenodd%22%2F%3E%3Cpath%20d%3D%22M7.09301%2015.9414L6.71424%2017.323C6.0859%2019.6148%205.77173%2020.7607%206.19097%2021.3881C6.3379%2021.6079%206.535%2021.7844%206.76372%2021.9008C7.41634%2022.2331%208.424%2021.7081%2010.4393%2020.658C11.1099%2020.3086%2011.4452%2020.1339%2011.8014%2020.0959C11.9335%2020.0818%2012.0665%2020.0818%2012.1986%2020.0959C12.5548%2020.1339%2012.8901%2020.3086%2013.5607%2020.658C15.576%2021.7081%2016.5837%2022.2331%2017.2363%2021.9008C17.465%2021.7844%2017.6621%2021.6079%2017.809%2021.3881C18.2283%2020.7607%2017.9141%2019.6148%2017.2858%2017.323L16.907%2015.9414C15.5208%2016.9231%2013.8278%2017.5%2012%2017.5C10.1722%2017.5%208.47915%2016.9231%207.09301%2015.9414Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --status-icon-verified: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%20d%3D%22M9.5924%203.20027C9.34888%203.4078%209.22711%203.51158%209.09706%203.59874C8.79896%203.79854%208.46417%203.93721%208.1121%204.00672C7.95851%204.03705%207.79903%204.04977%207.48008%204.07522C6.6787%204.13918%206.278%204.17115%205.94371%204.28923C5.17051%204.56233%204.56233%205.17051%204.28923%205.94371C4.17115%206.278%204.13918%206.6787%204.07522%207.48008C4.04977%207.79903%204.03705%207.95851%204.00672%208.1121C3.93721%208.46417%203.79854%208.79896%203.59874%209.09706C3.51158%209.22711%203.40781%209.34887%203.20027%209.5924C2.67883%2010.2043%202.4181%2010.5102%202.26522%2010.8301C1.91159%2011.57%201.91159%2012.43%202.26522%2013.1699C2.41811%2013.4898%202.67883%2013.7957%203.20027%2014.4076C3.40778%2014.6511%203.51158%2014.7729%203.59874%2014.9029C3.79854%2015.201%203.93721%2015.5358%204.00672%2015.8879C4.03705%2016.0415%204.04977%2016.201%204.07522%2016.5199C4.13918%2017.3213%204.17115%2017.722%204.28923%2018.0563C4.56233%2018.8295%205.17051%2019.4377%205.94371%2019.7108C6.278%2019.8288%206.6787%2019.8608%207.48008%2019.9248C7.79903%2019.9502%207.95851%2019.963%208.1121%2019.9933C8.46417%2020.0628%208.79896%2020.2015%209.09706%2020.4013C9.22711%2020.4884%209.34887%2020.5922%209.5924%2020.7997C10.2043%2021.3212%2010.5102%2021.5819%2010.8301%2021.7348C11.57%2022.0884%2012.43%2022.0884%2013.1699%2021.7348C13.4898%2021.5819%2013.7957%2021.3212%2014.4076%2020.7997C14.6511%2020.5922%2014.7729%2020.4884%2014.9029%2020.4013C15.201%2020.2015%2015.5358%2020.0628%2015.8879%2019.9933C16.0415%2019.963%2016.201%2019.9502%2016.5199%2019.9248C17.3213%2019.8608%2017.722%2019.8288%2018.0563%2019.7108C18.8295%2019.4377%2019.4377%2018.8295%2019.7108%2018.0563C19.8288%2017.722%2019.8608%2017.3213%2019.9248%2016.5199C19.9502%2016.201%2019.963%2016.0415%2019.9933%2015.8879C20.0628%2015.5358%2020.2015%2015.201%2020.4013%2014.9029C20.4884%2014.7729%2020.5922%2014.6511%2020.7997%2014.4076C21.3212%2013.7957%2021.5819%2013.4898%2021.7348%2013.1699C22.0884%2012.43%2022.0884%2011.57%2021.7348%2010.8301C21.5819%2010.5102%2021.3212%2010.2043%2020.7997%209.5924C20.5922%209.34887%2020.4884%209.22711%2020.4013%209.09706C20.2015%208.79896%2020.0628%208.46417%2019.9933%208.1121C19.963%207.95851%2019.9502%207.79903%2019.9248%207.48008C19.8608%206.6787%2019.8288%206.278%2019.7108%205.94371C19.4377%205.17051%2018.8295%204.56233%2018.0563%204.28923C17.722%204.17115%2017.3213%204.13918%2016.5199%204.07522C16.201%204.04977%2016.0415%204.03705%2015.8879%204.00672C15.5358%203.93721%2015.201%203.79854%2014.9029%203.59874C14.7729%203.51158%2014.6511%203.40781%2014.4076%203.20027C13.7957%202.67883%2013.4898%202.41811%2013.1699%202.26522C12.43%201.91159%2011.57%201.91159%2010.8301%202.26522C10.5102%202.4181%2010.2043%202.67883%209.5924%203.20027ZM16.3735%209.86314C16.6913%209.5453%2016.6913%209.03%2016.3735%208.71216C16.0557%208.39433%2015.5403%208.39433%2015.2225%208.71216L10.3723%2013.5624L8.77746%2011.9676C8.45963%2011.6498%207.94432%2011.6498%207.62649%2011.9676C7.30866%2012.2854%207.30866%2012.8007%207.62649%2013.1186L9.79678%2015.2889C10.1146%2015.6067%2010.6299%2015.6067%2010.9478%2015.2889L16.3735%209.86314Z%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E");
  --status-icon-warning: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%20d%3D%22M5.31171%2010.7615C8.23007%205.58716%209.68925%203%2012%203C14.3107%203%2015.7699%205.58716%2018.6883%2010.7615L19.0519%2011.4063C21.4771%2015.7061%2022.6897%2017.856%2021.5937%2019.428C20.4978%2021%2017.7864%2021%2012.3637%2021H11.6363C6.21356%2021%203.50217%2021%202.40626%2019.428C1.31034%2017.856%202.52291%2015.7061%204.94805%2011.4063L5.31171%2010.7615ZM12%207.25C12.4142%207.25%2012.75%207.58579%2012.75%208V13C12.75%2013.4142%2012.4142%2013.75%2012%2013.75C11.5858%2013.75%2011.25%2013.4142%2011.25%2013V8C11.25%207.58579%2011.5858%207.25%2012%207.25ZM12%2017C12.5523%2017%2013%2016.5523%2013%2016C13%2015.4477%2012.5523%2015%2012%2015C11.4477%2015%2011%2015.4477%2011%2016C11%2016.5523%2011.4477%2017%2012%2017Z%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E");
}
/* status-icons:end */

/* Статусы участников (src/status.php): значки у логина и карточки тарифов. Металл — исключение из правила «только цвета
   темы» по просьбе владельца. Уровень и тариф различаются формой: уровень — медаль (градиент через mask), тариф —
   плашка с надписью. Галочка верификации — акцент темы, «Осторожно» — цвет ошибки. Подсказка — js/core/status.js.
   Тёмный текст и кнопка на металле заданы прямо: металл светлый в обеих темах, токены темы тут не годятся. */
:root {
  --metal-bronze: linear-gradient(135deg, #f1c9a2 0%, #cd7f32 38%, #a8621f 68%, #6e3b12 100%);
  --metal-silver: linear-gradient(135deg, #d9d9d9 0%, #a8a8a8 38%, #7d7d7d 68%, #555555 100%);
  --metal-gold: linear-gradient(135deg, #ffe8a3 0%, #f3c24f 38%, #d39a2a 68%, #8a5a12 100%);
  --metal-platinum: linear-gradient(135deg, #f7fbff 0%, #d5dee6 38%, #a3b1bd 68%, #74828f 100%);
}
@layer components {
  .status-marks { display: inline-flex; flex: none; align-items: center; gap: 4px; vertical-align: middle; }
  .status-mark { display: inline-block; flex: none; width: var(--status-size, 16px); height: var(--status-size, 16px); background: var(--status-fill); -webkit-mask: var(--status-icon) center / contain no-repeat; mask: var(--status-icon) center / contain no-repeat; }
  .status-mark[data-status-label], .status-plan[data-status-label] { cursor: pointer; touch-action: manipulation; }
  .status-mark[data-status="novice"] { --status-icon: var(--status-icon-medal); --status-fill: var(--color-muted); }
  .status-mark[data-status="bronze"] { --status-icon: var(--status-icon-medal); --status-fill: var(--metal-bronze); }
  .status-mark[data-status="silver"] { --status-icon: var(--status-icon-medal); --status-fill: var(--metal-silver); }
  .status-mark[data-status="gold"] { --status-icon: var(--status-icon-medal); --status-fill: var(--metal-gold); }
  .status-mark[data-status="verified"] { --status-icon: var(--status-icon-verified); --status-fill: var(--color-accent-hover); }
  .status-mark[data-status="warning"] { --status-icon: var(--status-icon-warning); --status-fill: var(--color-danger); }

  .status-plan { display: inline-flex; flex: none; align-items: center; height: 18px; padding-inline: 8px; border-radius: 999px; background: var(--status-fill); color: #1a1a1a; font-size: var(--text-xs); line-height: 1; font-weight: 700; white-space: nowrap; vertical-align: middle; }
  .status-plan[data-status="premium"], .plan-card[data-status="premium"] { --status-fill: var(--metal-gold); }
  .status-plan[data-status="platinum"], .plan-card[data-status="platinum"] { --status-fill: var(--metal-platinum); }
  /* Карточка тарифа в настройках профиля. */
  .plan-card { display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: var(--radius-card); background: var(--status-fill); color: #1a1a1a; }
  .plan-card .btn { background: #1a1a1a; color: #ededed; }
  .plan-card .btn:hover, .plan-card .btn:focus-visible { background: #2a2a2a; }

  /* Подсказка: один элемент на страницу, его создаёт и ставит над значком js/core/status.js. */
  .status-tip { position: fixed; top: 0; left: 0; z-index: 90; width: max-content; max-width: min(260px, calc(100vw - 16px)); padding: 6px 10px; border-radius: var(--radius-sm); background: var(--color-strong); color: var(--color-fg); font-size: var(--text-xs); line-height: var(--text-xs--line-height); font-weight: 500; pointer-events: none; opacity: 0; visibility: hidden; transform: translateY(4px) scale(0.96); }
  .status-tip[data-side="bottom"] { transform: translateY(-4px) scale(0.96); }
  .status-tip.is-open { opacity: 1; visibility: visible; transform: none; }
  @media (prefers-reduced-motion: no-preference) {
    .status-tip { transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s; }
  }
}

/* Главная (views/home.php). Крупные заголовки — исключение из шкалы 12/13/15/18, разрешено владельцем 04.10.2026:
   ставятся вместе с data-display, как крупные суммы. */
@layer components {
  .headline { font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
  .headline-sm { font-size: 20px; line-height: 26px; font-weight: 700; letter-spacing: -0.01em; }
  @media (min-width: 48rem) { .headline { font-size: 34px; line-height: 40px; } .headline-sm { font-size: 24px; line-height: 30px; } }

  /* «Рулетка» суммы (js/core/roll.js): окно высотой в строку, прежняя сумма уезжает вверх, новая выезжает снизу. */
  .roll { display: inline-block; height: 1.34em; height: 1lh; overflow: hidden; vertical-align: top; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .roll-line { display: block; }
}