/* Generated from style.css by server/scripts/sync-cell-print-base.mjs. */
/* Inter — свой, а не с чужих доменов (AUDIT-024). Раньше шрифт тянулся с
   fonts.googleapis.com и fonts.gstatic.com: четыре запроса и около 153 КБ с
   двух сторонних доменов, причём таблица стилей блокировала первую отрисовку.
   Теперь файлы лежат рядом с сайтом, попадают под правило долгого кэширования
   для assets/* и не требуют ни отдельных рукопожатий, ни разрешений в CSP.

   Ось веса 400..800 (переменный шрифт), а не отдельные начертания: в стилях
   используются промежуточные значения 550, 650 и 750 — см. AUDIT-022.
   Подмножества и их диапазоны символов взяты ровно те, что отдавал Google
   Fonts, поэтому браузер по-прежнему скачивает только нужные: для русской
   страницы это latin и cyrillic.

   Путь от корня (/assets/...), а не относительный: при раскладке
   prepare-static.py копирует style.css в /assets/releases/<хеш>/, и
   относительная ссылка указывала бы внутрь каталога релиза, где шрифтов нет.
   Проверено на собранном релизе, а не только на исходном каталоге.

   Лицензия — SIL Open Font License 1.1, текст лежит в assets/fonts/OFL.txt. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  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;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  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: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/inter-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/inter-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* ================================================================
   WB Code Generator · Apple-редизайн v2 (2026-08)
   Дизайн-токены → база → компоненты → модалки → мобильные → print.
   Важно: классы согласованы с app.js — не переименовывать без правки JS.
   ================================================================ */

/* ---------- 1. Токены ---------- */
:root {
  color-scheme: light;
  --bg: #f5f5f7;
  --surface: #ffffff;
  --surface-2: #fbfbfd;
  --fill: #f2f2f7;
  --fill-2: #e8e8ed;
  --line: rgba(60, 60, 67, .10);
  --hairline: rgba(60, 60, 67, .16);
  --text: #1d1d1f;
  --text-2: #6e6e73;
  --text-3: #66666e;
  --accent: #cb11ab;
  --accent-press: #ad0d92;
  --accent-tint: rgba(203, 17, 171, .10);
  --grad-flow: linear-gradient(90deg, #cb11ab, #e83a9c, #ff5e8a, #ff8a3d, #cb11ab);
  --danger: #cc0000;
  --danger-bg: #feecec;
  --success: #117a3d;
  --success-bg: #e8f8ee;
  --warn: #c25a00;
  --warn-bg: #fff3e0;
  --balance-medium: #d2b600;
  --mat-nav: rgba(251, 251, 253, .78);
  /* Более прозрачная подложка для уведомлений с сильным стеклом. */
  --mat-thick: rgba(251, 251, 253, .62);
  --r-s: 10px; --r-m: 14px; --r-l: 20px; --r-xl: 28px; --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 16px rgba(0, 0, 0, .05);
  --sh-2: 0 2px 6px rgba(0, 0, 0, .05), 0 12px 36px rgba(0, 0, 0, .09);
  --sh-float: 0 8px 20px rgba(0, 0, 0, .10), 0 24px 70px rgba(0, 0, 0, .16);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.25, .1, .25, 1);
  --spring: cubic-bezier(.32, .72, .24, 1);
  --emph: cubic-bezier(.2, .9, .25, 1);
  --t-fast: .18s; --t-med: .32s; --t-slow: .65s;
  --topbar-h: 64px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #000000;
    --surface: #1c1c1e;
    --surface-2: #242426;
    --fill: #2c2c2e;
    --fill-2: #3a3a3c;
    --line: rgba(84, 84, 88, .42);
    --hairline: rgba(84, 84, 88, .62);
    --text: #f5f5f7;
    --text-2: #a1a1a6;
    --text-3: #b4b4be;
    --accent: #e93cc9;
    --accent-press: #f55cd3;
    --accent-tint: rgba(233, 60, 201, .16);
    --danger: #ff453a; --danger-bg: rgba(255, 69, 58, .14);
    --success: #30d158; --success-bg: rgba(48, 209, 88, .14);
    --warn: #ff9f0a; --warn-bg: rgba(255, 159, 10, .14);
    --balance-medium: #ffd60a;
    --mat-nav: rgba(18, 18, 20, .72);
    --mat-thick: rgba(18, 18, 20, .58);
    --sh-1: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 20px rgba(0, 0, 0, .4);
    --sh-2: 0 2px 8px rgba(0, 0, 0, .5), 0 16px 44px rgba(0, 0, 0, .5);
    --sh-float: 0 10px 26px rgba(0, 0, 0, .6), 0 30px 80px rgba(0, 0, 0, .65);
  }
}
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000;
  --surface: #1c1c1e;
  --surface-2: #242426;
  --fill: #2c2c2e;
  --fill-2: #3a3a3c;
  --line: rgba(84, 84, 88, .42);
  --hairline: rgba(84, 84, 88, .62);
  --text: #f5f5f7;
  --text-2: #a1a1a6;
  --text-3: #b4b4be;
  --accent: #e93cc9;
  --accent-press: #f55cd3;
  --accent-tint: rgba(233, 60, 201, .16);
  --danger: #ff453a; --danger-bg: rgba(255, 69, 58, .14);
  --success: #30d158; --success-bg: rgba(48, 209, 88, .14);
  --warn: #ff9f0a; --warn-bg: rgba(255, 159, 10, .14);
  --balance-medium: #ffd60a;
  --mat-nav: rgba(18, 18, 20, .72);
  --mat-thick: rgba(18, 18, 20, .58);
  --sh-1: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 20px rgba(0, 0, 0, .4);
  --sh-2: 0 2px 8px rgba(0, 0, 0, .5), 0 16px 44px rgba(0, 0, 0, .5);
  --sh-float: 0 10px 26px rgba(0, 0, 0, .6), 0 30px 80px rgba(0, 0, 0, .65);
}

/* ---------- 2. База ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; touch-action: manipulation; }
html { overflow-x: clip; }
@supports not (overflow: clip) { html { overflow-x: hidden; } }
/* ВАЖНО: overflow-x на body НЕ ставим - он ломает position:sticky шапки
 * на мобильных (прыжки при скролле). Горизонтальный орб клипается на .hero. */
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background .35s var(--ease), color .35s var(--ease);
  /* Горизонтальный клип только на body (clip, в отличие от hidden, не ломает
   * position:sticky шапки). Орбы плавно уходят за край вьюпорта без панорамы. */
  overflow-x: clip;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; -webkit-appearance: none; appearance: none; }
input, textarea { font: inherit; }
input[type="text"], input[type="tel"], input[type="email"], input[type="password"], textarea { -webkit-appearance: none; appearance: none; }
/* U-LOW-08: number-поля не глушим — спиннеры нужны в админке на десктопе. */

/* U-LOW-08: единый Apple-стиль нативных select (админка + фильтры) */
select {
  --field-bg: var(--fill);
  --field-ring: 0 0 0 0 transparent;
  -webkit-appearance: none; appearance: none;
  height: 40px; padding: 0 34px 0 12px;
  border: .5px solid var(--hairline); border-radius: var(--r-s);
  background-color: var(--field-bg); color: var(--text);
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6"><path d="M1 1l4 4 4-4" stroke="%2398989d" stroke-width="1.6" fill="none" stroke-linecap="round"/></svg>');
  background-repeat: no-repeat; background-position: right 12px center;
}
select:focus { --field-bg: var(--surface); --field-ring: 0 0 0 4px var(--accent-tint); outline: none; background-color: var(--field-bg); border-color: var(--accent); box-shadow: var(--field-ring); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { display: block; }
svg.ico { width: 18px; height: 18px; flex: none; }
::selection { background: var(--accent-tint); }
:focus-visible { --field-ring: 0 0 0 4px var(--accent-tint), 0 0 0 1.5px var(--accent); outline: none; box-shadow: var(--field-ring); border-radius: var(--r-s); }
.hidden { display: none !important; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--surface); color: var(--text);
  padding: 10px 16px; border-radius: var(--r-s); box-shadow: var(--sh-2);
}
.skip-link:focus { left: 12px; top: 12px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* U-LOW-07: полностью замороженный спиннер выглядит как зависание —
   * дискретные шаги вращения остаются читаемыми и не являются плавным движением. */
  .spinner { animation: spin 1.6s steps(10) infinite !important; }
}

.brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.brand-logo { display: block; flex: 0 1 auto; width: 214px; min-width: 0; }
.brand-mark { display: block; width: 100%; height: auto; object-fit: contain; }
.brand-on-dark { display: none; }
[data-theme="dark"] .brand-on-light { display: none; }
[data-theme="dark"] .brand-on-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-on-light { display: none; }
  :root:not([data-theme="light"]) .brand-on-dark { display: block; }
}
.icon-button {
  position: relative;
  width: 34px; height: 34px; min-width: 34px; min-height: 34px;
  display: grid; place-items: center;
  border-radius: 50%; background: var(--fill); color: var(--text-2);
  font-size: 20px; line-height: 1;
  transition: background .18s var(--ease), transform .3s var(--spring), color .18s var(--ease);
}
/* U-LOW-01: расширяем хит-зону до ~44px, не увеличивая визуальный размер. */
.icon-button::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; }
@media (hover: hover) { .icon-button:hover { background: var(--fill-2); color: var(--text); } }
.icon-button:active { transform: scale(.9); }
.icon-button svg { width: 17px; height: 17px; }
/* Переключатель темы: JS вешает .is-dark на кнопку; показываем иконку
 * ЦЕЛЕВОЙ темы (в светлой — луна «включить тёмную», и наоборот).
 * Смена иконки — с пружинным поворотом (микроанимация иконок). */
.theme-toggle .ico-sun { display: none; }
.theme-toggle .ico-moon, .theme-toggle .ico-sun { transform-origin: center; }
.theme-toggle.is-dark .ico-sun { display: block; animation: iconIn .5s var(--spring) both; }
.theme-toggle.is-dark .ico-moon { display: none; }
.theme-toggle:not(.is-dark) .ico-moon { display: block; animation: iconIn .5s var(--spring) both; }
@keyframes iconIn {
  from { transform: rotate(-120deg) scale(.3); opacity: 0; }
  to { transform: none; opacity: 1; }
}