/* ==========================================================================
   tokens.css — визуальная система «стеклянные плитки» (T76, 25.10.2026).
   Все цвета, градиенты и радиусы — только отсюда; в вёрстке жёстких цветов нет.
   Темы: авто (по системе) / светлая / тёмная — атрибутом data-theme на <html>.
   Шрифт Onest (400–800) на всех уровнях; заголовки 600.
   Локально (D17): @fontsource/onest 5.3.1 + 800 из макета T76,
   лицензия SIL OFL 1.1 (fonts/OFL-onest.txt).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Шрифт Onest — 400/500/600/700, подмножества cyrillic + latin.
   -------------------------------------------------------------------------- */

/* Onest, cyrillic */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('../fonts/onest-cyrillic-400-normal.woff2') format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('../fonts/onest-cyrillic-500-normal.woff2') format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('../fonts/onest-cyrillic-600-normal.woff2') format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('../fonts/onest-cyrillic-700-normal.woff2') format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
/* 800 — из макета T76 (каталог assets/fonts: каталог fonts/ принадлежит
   веб-серверу и недоступен агенту на запись) */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url('../assets/fonts/onest-cyrillic-800-normal.woff2') format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* Onest, latin */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('../fonts/onest-latin-400-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;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('../fonts/onest-latin-500-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;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('../fonts/onest-latin-600-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;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('../fonts/onest-latin-700-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;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url('../assets/fonts/onest-latin-800-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;
}

/* --------------------------------------------------------------------------
   Токены: светлая тема (по умолчанию). Значения — из макета T76 (README.md):
   фон-градиент #E6ECEE→#D2DDE0→#B8C7CC + размытые пятна, стеклянные карточки.
   Старые имена переменных сохранены, чтобы все страницы перекрасились
   без правки вёрстки.
   -------------------------------------------------------------------------- */
:root {
  /* Фон: базовый цвет и слой пятен (body в base.css) */
  --bg: #E6ECEE;
  --bg-image:
    radial-gradient(900px 620px at 96% -8%, rgba(255,201,163,.85), transparent 62%),
    radial-gradient(720px 600px at -14% 18%, rgba(169,216,207,.80), transparent 64%),
    radial-gradient(820px 720px at 108% 52%, rgba(185,201,242,.72), transparent 64%),
    radial-gradient(720px 640px at -12% 84%, rgba(255,215,189,.68), transparent 64%),
    linear-gradient(170deg, #E6ECEE 0%, #D2DDE0 40%, #B8C7CC 100%);
  --header-glass: rgba(232,238,240,.72); /* шапка-стекло */
  --band: rgba(255,255,255,.20);        /* чередующиеся секции-полосы */
  --surface: rgba(255,255,255,.46);     /* карточки/виджеты: стекло */
  --ink: #15191B;                       /* основной текст */
  --muted: #485358;                     /* вторичный текст (D19: ≥4.5:1 на стекле и фоне) */
  --teal: #15191B;                      /* тёмный акцент (логотип, активный чип) */
  --teal-soft: rgba(255,255,255,.62);   /* светлая подложка значка */
  --teal-ink: #15191B;
  --coral: #EE6A12;                     /* главное действие */
  --coral-soft: rgba(255,139,61,.16);
  --coral-ink: #893A04;                 /* ссылки, текст-акцент (D19: ≥4.5:1) */
  --sand: rgba(255,201,163,.35);
  --sand-ink: #485358;
  --sand-icon: #893A04;
  --chip: rgba(255,255,255,.55);        /* нейтральные чипы-пилюли */
  --line: rgba(255,255,255,.65);        /* рамки стекла и разделители */
  --btn-ink: #FFFFFF;                   /* текст на главном действии */

  /* Старые роли (В1/C3) на новой палитре */
  --card: rgba(255,255,255,.46);        /* = surface */
  /* T76, этап 5: карточка внутри стеклянной панели .m-body — на полтона
     прозрачнее панели, чтобы список читался как стекло, а не как белый лист */
  --card-nested: rgba(255,255,255,.34);
  --card-nested-line: rgba(255,255,255,.55);
  --muted-strong: #3C464A;              /* усиленный вторичный текст */
  --accent: #EE6A12;                    /* = coral */
  --accent-ink: #893A04;
  --accent-soft: rgba(255,139,61,.16);
  --tint: rgba(255,255,255,.28);
  --hero: linear-gradient(150deg,#3C4A4F,#15191B 72%);
  --hero-ink: #FFFFFF;
  --pill: rgba(255,255,255,.55);
  --on-ink: #FFFFFF;                    /* текст на фоне --ink */
  --photo: linear-gradient(135deg,#C7D3D6,#8FA3A8);
  --ok: #1C7C43;
  --shadow: 0 10px 30px rgba(40,60,70,.10);

  /* Двухцветные значки (T76, этап 2): заливка и её непрозрачность */
  --duo: #FF8B3D;
  --duoo: .55;
  --icon-box-bg: rgba(255,255,255,.70);
  --icon-box-edge: rgba(255,255,255,.90);
  --icon-box-ink: #15191B;

  /* Главное действие: градиент #FF8B3D→#EE6A12. Текст тёмный (Q43, вариант A:
     D21 и контраст ≥ 4.5:1 в обеих темах; макет был с белым — отклонение
     согласовано владельцем 25.10.2026). */
  --orange-fill: linear-gradient(135deg, #FF8B3D 0%, #EE6A12 100%);
  --orange-ink: #16120E;
  --orange-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 8px 22px rgba(238,106,18,.28);
  --orange-shadow-press: inset 0 1px 0 rgba(255,255,255,.18), 0 4px 12px rgba(238,106,18,.20);
  --photo-shade: linear-gradient(to top, rgba(10,14,16,.55), transparent 58%);

  /* Крупная «404»: оранжевый градиент макета */
  --e404-fill: linear-gradient(135deg,#FF8B3D,#EE6A12);

  /* Плавающая нижняя панель (T17) */
  --shadow-float: 0 10px 30px rgba(40,60,70,.18);

  /* T85: нижняя панель телефона в светлой теме — светлое стекло.
     Фон почти белый (alpha .94 ≥ .92 по ТЗ), тень мягкая сверху.
     Неактивные иконки/подписи #3A3F45 — 10.3:1 к фону; активный пункт
     #B23A00 — 5.2:1 на оранжевой подложке (оба ≥ 4.5:1). Яркий оранжевый #EE6A12
     остаётся в полосе-индикаторе (не текст, 3.0:1 ≥ 3:1).
     В тёмной теме эти токены переопределены на прежние --hero/--hero-ink,
     поэтому панель там выглядит как до T85. */
  --tabbar-fill: rgba(255,255,255,.94);
  --tabbar-edge: rgba(255,255,255,.90);
  --tabbar-blur: blur(16px) saturate(1.08);
  --tabbar-ink: #3A3F45;
  --tabbar-active: #B23A00;
  --tabbar-active-bg: rgba(238,106,18,.12);
  --tabbar-indicator: #EE6A12;
  --tabbar-shadow: 0 -6px 22px rgba(40,60,70,.14);

  /* Формы: стеклянные поля */
  --field-bg: rgba(255,255,255,.55);
  /* T77 (В1): панель раскрытого списка непрозрачная — под ним не должно
     быть видно следующее поле формы. Светлая тема по ТЗ владельца #FFFFFF. */
  --menu-bg: #FFFFFF;
  --menu-hover: #F1F4F5;
  --menu-selected: rgba(238,106,18,.12);
  /* T77 (В2): информационная плашка «Безопасная сделка» */
  --safe-fill: linear-gradient(135deg,#E3F5EA,#F2FBF5);
  --safe-ink: #14532D;
  --safe-icon: #1C7C43;
  --safe-line: rgba(20,83,45,.14);
  --field-line: rgba(255,255,255,.80);
  --field-line-strong: rgba(21,25,27,.18);
  --sep: rgba(255,255,255,.50);
  --track: rgba(255,255,255,.40);
  --star-empty: rgba(21,25,27,.24);    /* T76: пустая звезда рейтинга видна на стекле */
  --switch-off: rgba(21,25,27,.25);
  --danger: #D93025;
  --danger-bg: rgba(217,48,37,.08);
  --danger-ink: #B3261E;
  --ok-bg: rgba(28,124,67,.10);

  --focus-ring: 0 0 0 4px rgba(238,106,18,.22);
  --seg-shadow: 0 1px 3px rgba(40,60,70,.12);
  --shadow-card-lg: 0 20px 50px rgba(40,60,70,.16);
  --scrim: rgba(10,14,16,.45);

  /* Радиусы: карточки 30, плитки 22, значки 15 (макет T76) */
  --r-tile: 22px;
  --r-card: 26px;
  --r-block: 26px;
  --r-wd: 30px;
  --r-pill: 999px;
  --r-icon-box: 15px;
  --r-icon-box-lg: 28px;

  /* T76, этап 6: непрозрачный вариант стекла для @supports not
     (backdrop-filter) и prefers-reduced-transparency: reduce */
  --header-solid: #E8EEF0;
  --surface-solid: #F7FAFB;
  --card-nested-solid: #F2F6F7;
  --tile-solid: #F3F7F8;

  /* Стеклянные плитки разделов */
  --tile-fill: rgba(255,255,255,.34);
  --tile-edge: rgba(255,255,255,.75);
  --tile-shadow: 0 6px 18px rgba(40,60,70,.06);
  --tile-icon-shadow: none;
  --tile-card-shadow: 0 10px 30px rgba(40,60,70,.10);
  --tile-card-shadow-hover: 0 14px 34px rgba(40,60,70,.16);
  --herotile-shadow: 0 10px 30px rgba(40,60,70,.14);
  --tile-ring: rgba(238,106,18,.18);

  /* T76, этап 4: быстрые действия «Объявлений». «Подать» — тёмная плитка
     в светлой теме и оранжевая в тёмной (как .tile.k макета). */
  --quick-key-bg: #15191B;
  --quick-key-ink: #FFFFFF;
  --quick-key-duo: #FF8B3D;
  --quick-key-duoo: .9;

  /* Заглушка главной новости без фото — градиент как в макете */
  --nwhero-fallback: radial-gradient(380px 240px at 88% 8%, rgba(255,139,61,.55), transparent 70%),
    linear-gradient(155deg, #5E7076, #2B3538 80%);
  --nwhero-deco: rgba(255,255,255,.30);

  /* «Войти»/«Регистрация» в шапке: стеклянные пилюли */
  --btn-login-from: rgba(255,255,255,.55);
  --btn-login-to: rgba(255,255,255,.55);
  --btn-login-ink: #15191B;
  --btn-login-border: rgba(255,255,255,.80);
  --btn-login-blink: inset 0 1px 0 rgba(255,255,255,.85);
  --btn-login-shadow: 0 4px 12px rgba(40,60,70,.08);
  --btn-login-shadow-hover: 0 6px 16px rgba(40,60,70,.12);
  --btn-login-shadow-active: 0 2px 8px rgba(40,60,70,.08);
  --btn-reg-from: rgba(255,255,255,.42);
  --btn-reg-to: rgba(255,255,255,.42);
  --btn-reg-ink: #15191B;
  --btn-reg-border: rgba(255,255,255,.75);
  --btn-reg-blink: inset 0 1px 0 rgba(255,255,255,.75);
  --btn-reg-shadow: 0 4px 12px rgba(40,60,70,.06);
  --btn-reg-shadow-hover: 0 6px 16px rgba(40,60,70,.10);
  --btn-reg-shadow-active: 0 2px 8px rgba(40,60,70,.06);
  --btn-add-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 8px 22px rgba(238,106,18,.28);

  /* Карточка фильтра доски: стекло */
  --filter-fill: rgba(255,255,255,.46);
  --filter-edge: rgba(255,255,255,.70);
  --filter-line: rgba(255,255,255,.65);
  --filter-field-bg: rgba(255,255,255,.55);

  /* Чипы категорий доски: мягкие пастельные стёкла, активный — тёмный */
  --chip-line: rgba(255,255,255,.60);
  --chip-title: #15191B;
  --chip-active-bg: #15191B;
  --chip-active-ink: #FFFFFF;
  --chip1-fill: rgba(185,201,242,.45);
  --chip1-ink: #2F4E8C;
  --chip1-soft: rgba(185,201,242,.28);
  --chip2-fill: rgba(255,201,163,.50);
  --chip2-ink: #9A4208;
  --chip2-soft: rgba(255,201,163,.30);
  --chip3-fill: rgba(169,216,207,.50);
  --chip3-ink: #1D6553;
  --chip3-soft: rgba(169,216,207,.30);
  --chip4-fill: rgba(221,211,245,.50);
  --chip4-ink: #52409B;
  --chip4-soft: rgba(221,211,245,.30);
  --chip5-fill: rgba(246,227,180,.55);
  --chip5-ink: #7A5A0C;
  --chip5-soft: rgba(246,227,180,.32);
  --chip6-fill: rgba(246,207,216,.55);
  --chip6-ink: #9B3550;
  --chip6-soft: rgba(246,207,216,.32);

  /* Слои общей карты /map (T59): тёмные заливки капли-пина, значок белый.
     Тайлы OSM светлые в обеих темах — в тёмной не переопределяются. */
  --m-map-realty: #2F5FA8;
  --m-map-auto: #B34109;
  --m-map-services: #1E7A55;
  --m-map-finds: #5B47B0;
  --m-map-board: #8A6A12;
  --m-map-problems: #B3261E;
  --m-map-catalog: #0F6E8C;
  --m-map-vacancy: #A61E63;
  --m-map-city: #4D6B1F;

  /* Шрифты: Onest везде, заголовки 600 */
  --font: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-head: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* --------------------------------------------------------------------------
   Токены: тёмная тема.
   - data-theme="dark"            — выбрана тёмная,
   - data-theme="auto"/отсутствует — по системной настройке.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121314;
    --bg-image:
      radial-gradient(1100px 620px at 84% -10%, rgba(255,122,31,.16), transparent 62%),
      radial-gradient(820px 620px at -12% 42%, rgba(255,122,31,.06), transparent 66%),
      radial-gradient(900px 700px at 110% 88%, rgba(255,122,31,.05), transparent 66%);
    --header-glass: rgba(18,19,20,.78);
    --band: #161719;
    --surface: #1C1D1F;
    --ink: #F3F3F1;
    --muted: #A0A3A9;
    --muted-strong: #C8CACD;
    --teal: #F3F3F1;
    --teal-soft: rgba(255,255,255,.08);
    --teal-ink: #F3F3F1;
    --coral: #FF7A1F;
    --coral-soft: #3A2617;
    --coral-ink: #FFB27A;
    --sand: #2A2018;
    --sand-ink: #F3F3F1;
    --sand-icon: #FF9A4A;
    --chip: rgba(255,255,255,.06);
    --line: rgba(255,255,255,.07);
    --btn-ink: #16120E;

    --card: #1C1D1F;
    --card-nested: rgba(255,255,255,.045);
    --card-nested-line: rgba(255,255,255,.07);
    --accent: #FF7A1F;
    --accent-ink: #FFB27A;
    --accent-soft: #3A2617;
    --tint: #17181A;
    --hero: linear-gradient(150deg,#2A1A0E,#1C1D1F 65%);
    --hero-ink: #F3F3F1;
    --pill: rgba(255,255,255,.06);
    --on-ink: #16120E;
    --photo: linear-gradient(135deg,#2A2B2D,#1C1D1F);
    --ok: #7BD99A;
    --shadow: 0 12px 30px rgba(0,0,0,.35);

    /* Двухцветные значки: оранжевая заливка ярче, квадраты — стекло */
    --duo: #FF7A1F;
    --duoo: .85;
    --icon-box-bg: rgba(255,255,255,.06);
    --icon-box-edge: rgba(255,255,255,.08);
    --icon-box-ink: #F3F3F1;

    --orange-fill: linear-gradient(135deg, #FF9A4A 0%, #FF7A1F 100%);
    --orange-ink: #16120E;
    --orange-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 8px 24px rgba(255,122,31,.25);
    --orange-shadow-press: inset 0 1px 0 rgba(255,255,255,.12), 0 4px 12px rgba(255,122,31,.18);
    --photo-shade: linear-gradient(to top, rgba(0,0,0,.60), transparent 58%);
    --shadow-float: 0 10px 30px rgba(0,0,0,.50);

    /* T85: в тёмной теме нижняя панель остаётся прежней (--hero).
       T88: активный пункт — фирменный оранжевый, как у кнопок и «+»
       (--accent #FF7A1F; 6.4:1 на самом светлом участке панели #2A1A0E). */
    --tabbar-fill: var(--hero);
    --tabbar-edge: transparent;
    --tabbar-blur: none;
    --tabbar-ink: var(--muted-strong);
    --tabbar-active: var(--accent);
    --tabbar-active-bg: transparent;
    --tabbar-indicator: var(--accent);
    --tabbar-shadow: var(--shadow-float);

    /* «404» (крупный текст AA) */
    --e404-fill: linear-gradient(135deg,#FF9A4A,#FF7A1F);

    /* Формы: тёмное стекло */
    --field-bg: rgba(255,255,255,.05);
    /* T77 (В1): панель списка непрозрачная (тёмная тема #1C1D1F) */
    --menu-bg: #1C1D1F;
    --menu-hover: #2A2B2D;
    --menu-selected: rgba(255,122,31,.16);
    /* T77 (В2): плашка «Безопасная сделка» */
    --safe-fill: linear-gradient(135deg,#16281D,#1B3224);
    --safe-ink: #BFEFD0;
    --safe-icon: #7BD99A;
    --safe-line: rgba(191,239,208,.16);
    --field-line: rgba(255,255,255,.10);
    --field-line-strong: rgba(255,255,255,.18);
    --sep: rgba(255,255,255,.06);
    --track: rgba(255,255,255,.06);
    --star-empty: rgba(255,255,255,.24);
    --switch-off: rgba(255,255,255,.20);
    --danger: #FF6B5E;
    --danger-bg: rgba(255,107,94,.12);
    --danger-ink: #FFB4AC;
    --ok-bg: rgba(123,217,154,.12);
    --focus-ring: 0 0 0 4px rgba(255,122,31,.24);
    --seg-shadow: 0 1px 3px rgba(0,0,0,.4);
    --shadow-card-lg: 0 20px 50px rgba(0,0,0,.55);
    --scrim: rgba(0,0,0,.60);

    /* T76, этап 6: непрозрачный вариант стекла (см. светлую тему) */
    --header-solid: #121314;
    --surface-solid: #1C1D1F;
    --card-nested-solid: #232426;
    --tile-solid: #222325;

    /* Стеклянные плитки: в тёмной теме без теней, тонкая рамка */
    --tile-fill: rgba(255,255,255,.045);
    --tile-edge: rgba(255,255,255,.08);
    --tile-shadow: none;
    --tile-icon-shadow: none;
    --tile-card-shadow: 0 10px 30px rgba(0,0,0,.28);
    --tile-card-shadow-hover: 0 14px 34px rgba(0,0,0,.38);
    --herotile-shadow: 0 10px 30px rgba(0,0,0,.35);
    --tile-ring: rgba(255,122,31,.18);

    /* T76, этап 4: «Подать» в быстрых действиях — оранжевая, тёмный значок */
    --quick-key-bg: #FF7A1F;
    --quick-key-ink: #16120E;
    --quick-key-duo: #16120E;
    --quick-key-duoo: .25;

    --nwhero-fallback: linear-gradient(150deg, #3A2414, #1C1D1F 70%);
    --nwhero-deco: rgba(255,122,31,.35);

    /* «Войти»/«Регистрация»: полупрозрачные пилюли */
    --btn-login-from: rgba(255,255,255,.08);
    --btn-login-to: rgba(255,255,255,.08);
    --btn-login-ink: #F3F3F1;
    --btn-login-border: rgba(255,255,255,.10);
    --btn-login-blink: inset 0 1px 0 rgba(255,255,255,.10);
    --btn-login-shadow: 0 4px 12px rgba(0,0,0,.25);
    --btn-login-shadow-hover: 0 6px 16px rgba(0,0,0,.35);
    --btn-login-shadow-active: 0 2px 8px rgba(0,0,0,.25);
    --btn-reg-from: rgba(255,255,255,.05);
    --btn-reg-to: rgba(255,255,255,.05);
    --btn-reg-ink: #F3F3F1;
    --btn-reg-border: rgba(255,255,255,.08);
    --btn-reg-blink: inset 0 1px 0 rgba(255,255,255,.08);
    --btn-reg-shadow: 0 4px 12px rgba(0,0,0,.20);
    --btn-reg-shadow-hover: 0 6px 16px rgba(0,0,0,.30);
    --btn-reg-shadow-active: 0 2px 8px rgba(0,0,0,.20);
    --btn-add-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 8px 24px rgba(255,122,31,.25);

    /* Карточка фильтра доски */
    --filter-fill: #1C1D1F;
    --filter-edge: rgba(255,255,255,.07);
    --filter-line: rgba(255,255,255,.07);
    --filter-field-bg: rgba(255,255,255,.05);

    /* Чипы категорий доски */
    --chip-line: rgba(255,255,255,.10);
    --chip-title: #F3F3F1;
    --chip-active-bg: #FF7A1F;
    --chip-active-ink: #16120E;
    --chip1-fill: rgba(185,201,242,.18);
    --chip1-ink: #9DB6EA;
    --chip1-soft: rgba(185,201,242,.10);
    --chip2-fill: rgba(255,201,163,.18);
    --chip2-ink: #FFB284;
    --chip2-soft: rgba(255,201,163,.10);
    --chip3-fill: rgba(169,216,207,.18);
    --chip3-ink: #86CFBD;
    --chip3-soft: rgba(169,216,207,.10);
    --chip4-fill: rgba(221,211,245,.18);
    --chip4-ink: #BFB2EC;
    --chip5-fill: rgba(246,227,180,.18);
    --chip5-ink: #E2CD83;
    --chip5-soft: rgba(246,227,180,.10);
    --chip6-fill: rgba(246,207,216,.18);
    --chip6-ink: #EFA3B3;
    --chip6-soft: rgba(246,207,216,.10);
  }
}

[data-theme="dark"] {
  --bg: #121314;
  --bg-image:
    radial-gradient(1100px 620px at 84% -10%, rgba(255,122,31,.16), transparent 62%),
    radial-gradient(820px 620px at -12% 42%, rgba(255,122,31,.06), transparent 66%),
    radial-gradient(900px 700px at 110% 88%, rgba(255,122,31,.05), transparent 66%);
  --header-glass: rgba(18,19,20,.78);
  --band: #161719;
  --surface: #1C1D1F;
  --ink: #F3F3F1;
  --muted: #A0A3A9;
  --muted-strong: #C8CACD;
  --teal: #F3F3F1;
  --teal-soft: rgba(255,255,255,.08);
  --teal-ink: #F3F3F1;
  --coral: #FF7A1F;
  --coral-soft: #3A2617;
  --coral-ink: #FFB27A;
  --sand: #2A2018;
  --sand-ink: #F3F3F1;
  --sand-icon: #FF9A4A;
  --chip: rgba(255,255,255,.06);
  --line: rgba(255,255,255,.07);
  --btn-ink: #16120E;

  --card: #1C1D1F;
  --card-nested: rgba(255,255,255,.045);
  --card-nested-line: rgba(255,255,255,.07);
  --accent: #FF7A1F;
  --accent-ink: #FFB27A;
  --accent-soft: #3A2617;
  --tint: #17181A;
  --hero: linear-gradient(150deg,#2A1A0E,#1C1D1F 65%);
  --hero-ink: #F3F3F1;
  --pill: rgba(255,255,255,.06);
  --on-ink: #16120E;
  --photo: linear-gradient(135deg,#2A2B2D,#1C1D1F);
  --ok: #7BD99A;
  --shadow: 0 12px 30px rgba(0,0,0,.35);

  /* Двухцветные значки: оранжевая заливка ярче, квадраты — стекло */
  --duo: #FF7A1F;
  --duoo: .85;
  --icon-box-bg: rgba(255,255,255,.06);
  --icon-box-edge: rgba(255,255,255,.08);
  --icon-box-ink: #F3F3F1;

  --orange-fill: linear-gradient(135deg, #FF9A4A 0%, #FF7A1F 100%);
  --orange-ink: #16120E;
  --orange-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 8px 24px rgba(255,122,31,.25);
  --orange-shadow-press: inset 0 1px 0 rgba(255,255,255,.12), 0 4px 12px rgba(255,122,31,.18);
  --photo-shade: linear-gradient(to top, rgba(0,0,0,.60), transparent 58%);
  --shadow-float: 0 10px 30px rgba(0,0,0,.50);

  /* T85: в тёмной теме нижняя панель остаётся прежней (--hero).
     T88: активный пункт — фирменный оранжевый, как у кнопок и «+»
     (--accent #FF7A1F; 6.4:1 на самом светлом участке панели #2A1A0E). */
  --tabbar-fill: var(--hero);
  --tabbar-edge: transparent;
  --tabbar-blur: none;
  --tabbar-ink: var(--muted-strong);
  --tabbar-active: var(--accent);
  --tabbar-active-bg: transparent;
  --tabbar-indicator: var(--accent);
  --tabbar-shadow: var(--shadow-float);

  --e404-fill: linear-gradient(135deg,#FF9A4A,#FF7A1F);

  --field-bg: rgba(255,255,255,.05);
  /* T77 (В1): панель списка непрозрачная (тёмная тема #1C1D1F) */
  --menu-bg: #1C1D1F;
  --menu-hover: #2A2B2D;
  --menu-selected: rgba(255,122,31,.16);
  /* T77 (В2): плашка «Безопасная сделка» */
  --safe-fill: linear-gradient(135deg,#16281D,#1B3224);
  --safe-ink: #BFEFD0;
  --safe-icon: #7BD99A;
  --safe-line: rgba(191,239,208,.16);
  --field-line: rgba(255,255,255,.10);
  --field-line-strong: rgba(255,255,255,.18);
  --sep: rgba(255,255,255,.06);
  --track: rgba(255,255,255,.06);
  --star-empty: rgba(255,255,255,.24);
  --switch-off: rgba(255,255,255,.20);
  --danger: #FF6B5E;
  --danger-bg: rgba(255,107,94,.12);
  --danger-ink: #FFB4AC;
  --ok-bg: rgba(123,217,154,.12);
  --focus-ring: 0 0 0 4px rgba(255,122,31,.24);
  --seg-shadow: 0 1px 3px rgba(0,0,0,.4);
  --shadow-card-lg: 0 20px 50px rgba(0,0,0,.55);
  --scrim: rgba(0,0,0,.60);

  --tile-fill: rgba(255,255,255,.045);
  --tile-edge: rgba(255,255,255,.08);
  --tile-shadow: none;
  --tile-icon-shadow: none;
  --tile-card-shadow: 0 10px 30px rgba(0,0,0,.28);
  --tile-card-shadow-hover: 0 14px 34px rgba(0,0,0,.38);
  --herotile-shadow: 0 10px 30px rgba(0,0,0,.35);
  --tile-ring: rgba(255,122,31,.18);

  /* T76, этап 6: непрозрачный вариант стекла (см. светлую тему) */
  --header-solid: #121314;
  --surface-solid: #1C1D1F;
  --card-nested-solid: #232426;
  --tile-solid: #222325;

  --quick-key-bg: #FF7A1F;
  --quick-key-ink: #16120E;
  --quick-key-duo: #16120E;
  --quick-key-duoo: .25;

  --nwhero-fallback: linear-gradient(150deg, #3A2414, #1C1D1F 70%);
  --nwhero-deco: rgba(255,122,31,.35);

  --btn-login-from: rgba(255,255,255,.08);
  --btn-login-to: rgba(255,255,255,.08);
  --btn-login-ink: #F3F3F1;
  --btn-login-border: rgba(255,255,255,.10);
  --btn-login-blink: inset 0 1px 0 rgba(255,255,255,.10);
  --btn-login-shadow: 0 4px 12px rgba(0,0,0,.25);
  --btn-login-shadow-hover: 0 6px 16px rgba(0,0,0,.35);
  --btn-login-shadow-active: 0 2px 8px rgba(0,0,0,.25);
  --btn-reg-from: rgba(255,255,255,.05);
  --btn-reg-to: rgba(255,255,255,.05);
  --btn-reg-ink: #F3F3F1;
  --btn-reg-border: rgba(255,255,255,.08);
  --btn-reg-blink: inset 0 1px 0 rgba(255,255,255,.08);
  --btn-reg-shadow: 0 4px 12px rgba(0,0,0,.20);
  --btn-reg-shadow-hover: 0 6px 16px rgba(0,0,0,.30);
  --btn-reg-shadow-active: 0 2px 8px rgba(0,0,0,.20);
  --btn-add-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 8px 24px rgba(255,122,31,.25);

  --filter-fill: #1C1D1F;
  --filter-edge: rgba(255,255,255,.07);
  --filter-line: rgba(255,255,255,.07);
  --filter-field-bg: rgba(255,255,255,.05);

  --chip-line: rgba(255,255,255,.10);
  --chip-title: #F3F3F1;
  --chip-active-bg: #FF7A1F;
  --chip-active-ink: #16120E;
  --chip1-fill: rgba(185,201,242,.18);
  --chip1-ink: #9DB6EA;
  --chip1-soft: rgba(185,201,242,.10);
  --chip2-fill: rgba(255,201,163,.18);
  --chip2-ink: #FFB284;
  --chip2-soft: rgba(255,201,163,.10);
  --chip3-fill: rgba(169,216,207,.18);
  --chip3-ink: #86CFBD;
  --chip3-soft: rgba(169,216,207,.10);
  --chip4-fill: rgba(221,211,245,.18);
  --chip4-ink: #BFB2EC;
  --chip4-soft: rgba(221,211,245,.10);
  --chip5-fill: rgba(246,227,180,.18);
  --chip5-ink: #E2CD83;
  --chip5-soft: rgba(246,227,180,.10);
  --chip6-fill: rgba(246,207,216,.18);
  --chip6-ink: #EFA3B3;
  --chip6-soft: rgba(246,207,216,.10);
}

/* --------------------------------------------------------------------------
   T76, Р8: на телефоне пятна фона должны быть видны уже за сеткой плиток
   первого экрана. В общем слое пятна заданы в процентах от высоты документа
   (функция Р1 — фон на всю длину), из-за чего на 360–390 px первый экран
   приходился на промежуток между пятнами. Здесь — те же цвета макета,
   но позиции в px от верха: персик/мята/голубой попадают в первый экран,
   остальные распределены по длине страницы.
   -------------------------------------------------------------------------- */
@media (max-width: 899.98px) {
  body {
    --bg-image:
      radial-gradient(340px 340px at calc(100% - 50px) 30px, rgba(255,201,163,.78) 45%, transparent 75%),
      radial-gradient(330px 330px at 30px 440px, rgba(169,216,207,.72) 45%, transparent 75%),
      radial-gradient(360px 360px at calc(100% - 60px) 800px, rgba(185,201,242,.60) 45%, transparent 75%),
      radial-gradient(330px 330px at -60px 1900px, rgba(255,215,189,.60) 45%, transparent 75%),
      radial-gradient(330px 330px at calc(100% - 40px) 2800px, rgba(169,216,207,.60) 45%, transparent 75%),
      linear-gradient(170deg, #E6ECEE 0%, #D2DDE0 40%, #B8C7CC 100%);
  }

  [data-theme="dark"] body {
    --bg-image:
      radial-gradient(380px 380px at calc(100% - 40px) 0px, rgba(255,122,31,.22) 40%, transparent 78%),
      radial-gradient(330px 330px at 0px 520px, rgba(255,122,31,.09) 40%, transparent 78%),
      linear-gradient(180deg, #121314 0%, #121314 100%);
  }
}

@media (max-width: 899.98px) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body {
    --bg-image:
      radial-gradient(380px 380px at calc(100% - 40px) 0px, rgba(255,122,31,.22) 40%, transparent 78%),
      radial-gradient(330px 330px at 0px 520px, rgba(255,122,31,.09) 40%, transparent 78%),
      linear-gradient(180deg, #121314 0%, #121314 100%);
  }
}