/* ─────────────────────────────────────────────────────────────────────────────
   Тема iOS 26 «жидкое стекло» (17.10.2026, вторая редакция). Поверх прежних стилей Сейлса.
   • Стекло везде, где поверхность: карточки, окна, меню, кнопки, поля — полупрозрачный белый + размытие + светлый край
     и блик сверху. Насколько прозрачно — один переключатель (Настройки → Оформление: прозрачнее / как iOS / плотнее).
   • Обои — 10 вариантов (атрибут data-wall на <html>); у каждого свой фирменный оттенок кнопок.
   • Кнопки — «тонированное стекло», а не плоская заливка: так у Apple в iOS 26.
   • Движение — пружины без лишнего отскока; при «Уменьшить движение» или выключенных анимациях — без них.
   Шрифт — SF на устройствах Apple, Inter (OFL) на остальных; иконки — Lucide (ISC).
   ───────────────────────────────────────────────────────────────────────────── */

@font-face { font-family: "InterVariable"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/inter-cyrillic-wght-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "InterVariable"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/inter-latin-wght-normal.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; }

/* ─────────────────────────── обои и оттенки ─────────────────────────── */
:root, [data-wall="lavender"] {
  --w1: 186, 160, 255; --w2: 255, 176, 214; --w3: 160, 205, 255; --w4: 255, 213, 178;
  --wb1: #f4effc; --wb2: #f8eef6; --wb3: #eef1fb; --tint-rgb: 123, 92, 250; --tint: #7b5cfa; }
[data-wall="sakura"] { --w1: 255, 179, 207; --w2: 255, 209, 227; --w3: 231, 184, 255; --w4: 255, 194, 168;
  --wb1: #fff0f5; --wb2: #fde8f0; --wb3: #f7eefb; --tint-rgb: 226, 66, 136; --tint: #e24288; }
[data-wall="peach"] { --w1: 255, 181, 154; --w2: 255, 210, 154; --w3: 255, 159, 181; --w4: 247, 193, 255;
  --wb1: #fff3ec; --wb2: #fff0f0; --wb3: #fdf1fb; --tint-rgb: 232, 93, 58; --tint: #e85d3a; }
[data-wall="ocean"] { --w1: 143, 211, 255; --w2: 155, 231, 227; --w3: 178, 185, 255; --w4: 200, 241, 255;
  --wb1: #eef7ff; --wb2: #ecfbfb; --wb3: #f1f2ff; --tint-rgb: 10, 122, 255; --tint: #0a7aff; }
[data-wall="mint"] { --w1: 159, 232, 194; --w2: 201, 243, 168; --w3: 159, 217, 239; --w4: 224, 247, 192;
  --wb1: #effcf5; --wb2: #f3fbe9; --wb3: #eef8fb; --tint-rgb: 22, 150, 92; --tint: #16965c; }
[data-wall="champagne"] { --w1: 243, 217, 164; --w2: 247, 201, 176; --w3: 233, 216, 196; --w4: 251, 231, 200;
  --wb1: #fdf8ef; --wb2: #fbf3ec; --wb3: #f8f4ee; --tint-rgb: 168, 118, 40; --tint: #a87628; }
[data-wall="aurora"] { --w1: 158, 240, 208; --w2: 185, 166, 255; --w3: 143, 208, 255; --w4: 255, 196, 236;
  --wb1: #f0fbf7; --wb2: #f2f0ff; --wb3: #eef7ff; --tint-rgb: 13, 148, 136; --tint: #0d9488; }
[data-wall="berry"] { --w1: 224, 163, 255; --w2: 255, 158, 196; --w3: 180, 156, 255; --w4: 255, 184, 224;
  --wb1: #faeffd; --wb2: #fdeef5; --wb3: #f3effd; --tint-rgb: 168, 50, 212; --tint: #a832d4; }
[data-wall="lemon"] { --w1: 255, 240, 154; --w2: 200, 245, 160; --w3: 255, 210, 154; --w4: 184, 240, 220;
  --wb1: #fffbea; --wb2: #f6fdec; --wb3: #fdf7ec; --tint-rgb: 194, 110, 0; --tint: #c26e00; }
[data-wall="pearl"] { --w1: 214, 216, 232; --w2: 232, 222, 236; --w3: 210, 226, 240; --w4: 239, 233, 225;
  --wb1: #f6f6f9; --wb2: #f3f2f6; --wb3: #f1f3f6; --tint-rgb: 88, 86, 214; --tint: #5856d6; }

/* Насколько прозрачно стекло (Оформление): прозрачнее / как iOS / плотнее */
:root { --ga: .46; --ga-pop: .62; --gblur: 26px; }
:root[data-glass="clear"] { --ga: .30; --ga-pop: .50; --gblur: 22px; }
:root[data-glass="frosted"] { --ga: .66; --ga-pop: .80; --gblur: 32px; }

:root {
  --tint-soft: rgba(var(--tint-rgb), .12);
  --pink-ios: #ff4f9a; --green-ios: #34c759; --orange-ios: #ff9500; --red-ios: #ff3b30; --blue-ios: #0a84ff;
  --label: #1c1c1e; --label-2: rgba(60, 60, 67, .64); --fill: rgba(118, 118, 128, .12); --fill-2: rgba(118, 118, 128, .2); --sep: rgba(60, 60, 67, .13);
  --glass: rgba(255, 255, 255, var(--ga));
  --glass-pop: rgba(255, 255, 255, var(--ga-pop));
  --glass-edge: rgba(255, 255, 255, .72);
  --blur: saturate(180%) blur(var(--gblur));
  --hl: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 0 0 1px rgba(255, 255, 255, .35);
  --shadow: 0 1px 2px rgba(40, 20, 90, .04), 0 10px 32px rgba(50, 25, 120, .09);
  --shadow-l: 0 30px 70px rgba(40, 20, 110, .22), 0 2px 8px rgba(40, 20, 110, .06);
  /* прежние токены → тема (старые стили перекрашиваются сами) */
  --bg: transparent; --card: var(--glass); --card2: rgba(255, 255, 255, .42); --line: rgba(255, 255, 255, .6); --line2: rgba(60, 60, 67, .16);
  --text: var(--label); --muted: var(--label-2); --black: var(--tint); --lime2: #fff; --lime: rgba(var(--tint-rgb), .10);
  --lav: rgba(var(--tint-rgb), .12); --lav2: rgba(var(--tint-rgb), .45); --lav3: var(--tint);
  --pink: #ffe1ee; --pink2: #ff4f9a; --mint: #dff6e7; --mint2: #34c759; --maybe: #fff2d6; --maybe2: #ff9f0a; --pos: #22a447; --neg: #ff375f;
  --radius: 24px; --radius-s: 18px; --tab-h: 74px;
  --ease: cubic-bezier(.32, .72, 0, 1);
  --spring: linear(0, .009, .035 2.1%, .141 4.4%, .281 6.7%, .723 12.9%, .938 16.7%, 1.017 19.4%, 1.077, 1.121 24.8%, 1.149 28.5%,
    1.159 33.6%, 1.149 39%, 1.127 43.6%, 1.04 54.7%, 1.007 62.4%, .991 69.6%, .997 82.7%, 1);
  --spring-soft: linear(0, .042 1.6%, .163 3.4%, .521 8.4%, .705 11.4%, .855 14.6%, .958 18.2%, 1.017 22.2%, 1.04 26.5%, 1.04 31%,
    1.016 40.9%, 1.002 51.3%, .998 64.3%, 1);
  --page-max: 1400px; --page-pad: 32px;
  color-scheme: light;
}

html { background: var(--wb1); }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "InterVariable", "Segoe UI Variable Text", "Segoe UI", Roboto, sans-serif;
  font-size: 15px; letter-spacing: -.006em; color: var(--label); background: transparent; -webkit-tap-highlight-color: transparent;
}
body::before {
  content: ""; position: fixed; inset: -20vmax; z-index: -2; pointer-events: none;
  background:
    radial-gradient(38vmax 34vmax at 18% 22%, rgba(var(--w1), .72), transparent 62%),
    radial-gradient(34vmax 30vmax at 82% 16%, rgba(var(--w2), .66), transparent 60%),
    radial-gradient(40vmax 34vmax at 72% 80%, rgba(var(--w3), .6), transparent 62%),
    radial-gradient(36vmax 30vmax at 20% 88%, rgba(var(--w4), .58), transparent 60%),
    linear-gradient(160deg, var(--wb1) 0%, var(--wb2) 45%, var(--wb3) 100%);
}
/* Плавающие обои — только если включили в «Оформлении»: под стеклом с размытием каждый кадр анимации заставляет браузер
   заново размывать все стеклянные поверхности — 150% ядра процессора на пустой странице (замер 19.10.2026). */