/* Светлая тема VeoSuno — «серый холст»: серый фон, белые карточки (выбрана 17.10.2026).
   Логика как у тёмной: чем выше поверхность, тем светлее — bg < panel < card.
   Тема включается атрибутом data-theme на <html> или на любом блоке:
     "light" — светлая;
     "dark"  — тёмная (по умолчанию на сайте; блок нужен, чтобы показать тёмную внутри светлой страницы).
   Палитра переезжает в templates/h1.css через Влада, когда разделы переведены на токены.
   Новые токены (--tint-*, --sel, --glass, --backdrop, --shadow-*, *-soft, --on-media) заданы и для тёмной темы:
   разделы переводим на них, а не на rgba(255,255,255,…) и #fff. */

/* ── новые токены: тёмные значения ── */
:root, [data-theme="dark"] {
  --tint-1: rgba(255,255,255,.04);   /* наведение, самая тихая подложка */
  --tint-2: rgba(255,255,255,.08);   /* чипы, вложенные поля */
  --tint-3: rgba(255,255,255,.14);   /* нажатие, рамка на картинке */
  --tint-4: rgba(255,255,255,.22);   /* активная подложка */
  --sel: #FFFFFF;                    /* выбранный: рамка, фон чипа, галочка */
  --sel-ink: #101012;                /* текст на --sel */
  --glass: rgba(31,31,33,.95);       /* меню, тост, шторка поверх контента */
  --backdrop: rgba(0,0,0,.6);        /* затемнение под окном */
  --shadow-1: 0 2px 8px rgba(0,0,0,.35);
  --shadow-2: 0 16px 48px rgba(0,0,0,.55);
  --accent-soft: rgba(222,118,43,.14);
  --ok-soft: rgba(43,222,144,.14);
  --bad-soft: rgba(255,107,107,.14);
  --brand-soft: rgba(224,69,123,.14);
  --brand-text: #FF7FA8;             /* розовый текст: метка «Новое», «Новинка» */
  --sel-hover: #E9E9EA;              /* наведение на кнопку цвета --sel */
  --ok-ink: #101012;                 /* текст на заливке --ok */
  --ok-text: #7CF0BC;                /* светлый зелёный текст: подарок, бонус */
  --warn: #FFC46B;                   /* предупреждение: сбой генерации, нет фото людей */
  --sheet: #18181B;                  /* шторка, всплывающая панель, окно с картинкой */
  --media-bg: #0C0C0E;               /* подложка под картинкой, пока она грузится или не заполняет рамку */
  --checker-1: #2C2C30;              /* «шахматка» прозрачного фона */
  --checker-2: #1D1D20;
  --gen-a: #19191D;                  /* перелив карточки «рисуем…» */
  --gen-b: #262029;
  --gen-c: #2A2330;
  --gen-glow: rgba(229,66,112,.18);  /* розовое свечение снизу карточки «рисуем…» */
  --gen-glow-2: transparent;         /* фиолетовое свечение сверху — только в светлой */
  --gen-btn: rgba(16,16,18,.6);       /* крестик на карточке генерации */
  --gen-btn-hover: rgba(16,16,18,.9);
  --gen-fail: #19181A;               /* карточка «не получилось» / модерация */
  --gen-fail-glow: 8%;               /* сила оранжевого свечения на ней */
  --hover: #1F1F21;                  /* строка списка или меню при наведении */
  --hover-line: rgba(255,255,255,.14); /* рамка карточки, поля, кнопки настроек при наведении */
  --edge: transparent;               /* кромка поля или чипа на панели того же цвета — в светлой теме белое на белом */
  --seg-track: #1F1F21;              /* дорожка переключателя из 2–3 вариантов */
  --seg-soft: #333335;               /* выбранный вариант простого переключателя (.vsp-mode) */
  --seg-strong: #FFFFFF;             /* выбранный вариант переключателя с описанием (.vsp-vseg) */
  --seg-strong-ink: #101012;
  --seg-shadow: none;
  --hover-lift: none;                /* лёгкая тень при наведении — только в светлой */
  --tip-bg: #2A2A2E;                 /* короткая подсказка над кнопкой — тёмная в обеих темах */
  --tip-fg: #FFFFFF;
  --shade: #000000;                  /* цвет теней и затемнений: color-mix(in srgb, var(--shade) 40%, transparent) */
  --on-media: #FFFFFF;               /* текст и иконки поверх фото, видео и цветных заливок — в обеих темах */
  --media-scrim: rgba(0,0,0,.5);     /* затемнение под ними — в обеих темах */
}

/* ── тёмная тема для блока внутри светлой страницы (копия :root из h1.css) ── */
[data-theme="dark"] {
  --bg: #101012; --panel: #151517; --card: #1F1F21; --line: #333335; --line2: #49494A;
  --fg: #FFFFFF; --fg2: #C9C9CB; --muted: #8D8D8F;
  --accent: #DE762B; --accent-ink: #101012; --ok: #2BDE90; --bad: #FF6B6B; --ref: #8FA3FF; --fade: #22D3EE;
  color-scheme: dark;
}

/* ── светлая тема: общее для обоих вариантов ── */
[data-theme="light"] {
  --fg: #141416;      /* 18:1 на белом */
  --fg2: #46464E;     /* 9:1 */
  --muted: #686872;   /* 5,5:1 на белом, 4,8:1 на фоне — мелкий текст читается */
  --accent: #D2621A;  /* оранжевый темнее тёмной темы: на белом 3,8:1, на фоне 3,4:1 — для иконок, рамок, заливок */
  --accent-ink: #FFFFFF;
  --ok: #0A7A44;      /* зелёный тёмной темы на белом не читается (1,8:1), здесь 4,8:1 на фоне */
  --bad: #C93030;     /* 4,7:1 на фоне */
  --ref: #4A5FD9;
  --fade: #08728C;
  /* --grad и градиент .cf-create не меняются: белый текст на них читается так же, как в тёмной */

  --tint-1: rgba(20,20,30,.03);
  --tint-2: rgba(20,20,30,.06);
  --tint-3: rgba(20,20,30,.10);
  --tint-4: rgba(20,20,30,.16);
  --sel: #2B2B31;     /* графит, а не чёрный: кнопка «Скачать», выбранный чип */
  --sel-ink: #FFFFFF;
  --glass: rgba(255,255,255,.96);
  --backdrop: rgba(20,20,30,.42);   /* было .32 — страница под окном почти не темнела (аудит С-Н003) */
  --shadow-1: 0 1px 2px rgba(20,20,30,.06), 0 2px 8px rgba(20,20,30,.06);
  --shadow-2: 0 2px 6px rgba(20,20,30,.06), 0 18px 48px rgba(20,20,30,.16);
  --accent-soft: rgba(210,98,26,.10);
  --ok-soft: rgba(10,122,68,.09);
  --bad-soft: rgba(201,48,48,.08);
  --brand-soft: rgba(224,69,123,.09);
  --brand-text: #C62F64;
  --sel-hover: #3E3E46;
  --ok-ink: #FFFFFF;
  --ok-text: #0A7A44;
  --warn: #9A5B00;
  --sheet: #FFFFFF;
  --media-bg: #E4E4E8;
  --checker-1: #E2E2E7;
  --checker-2: #FFFFFF;
  --gen-a: #FCF8FB;
  --gen-b: #F5DAE9;
  --gen-c: #E6DBFA;
  --gen-glow: rgba(229,66,112,.30);
  --gen-glow-2: rgba(162,59,245,.16);
  --gen-btn: rgba(20,20,30,.07);
  --gen-btn-hover: rgba(20,20,30,.13);
  --gen-fail: #FFFFFF;
  --gen-fail-glow: 14%;
  --hover: rgba(20,20,30,.075);     /* было .06 — наведение не читалось (С-Н012) */
  --hover-line: rgba(20,20,30,.24);
  --edge: #E3E3E8;
  --seg-track: #E9E9EE;              /* в светлой — серая дорожка и белый выбранный вариант с тенью, как в iOS */
  --seg-soft: #FFFFFF;
  --seg-strong: #FFFFFF;
  --seg-strong-ink: #141416;
  --seg-shadow: 0 1px 2px rgba(20,20,30,.08), 0 2px 8px rgba(20,20,30,.08);
  --hover-lift: 0 2px 8px rgba(20,20,30,.08);
  --shade: rgba(20,20,30,.45);       /* тени в светлой теме заметно мягче */

  --bg: #F0F0F3;
  --panel: #FAFAFC;
  --card: #FFFFFF;
  --line: #DCDCE2;    /* было #E3E3E8: обводки и подложки выбранного 1,1:1 — плоско (С-Н013) */
  --line2: #C3C3CC;   /* было #CDCDD5 */
  --ph: #85858F;      /* подсказка в пустом поле: светлее введённого текста, но читается (3,7:1) */
  color-scheme: light;
}

/* ══ ПЕРЕКЛЮЧАТЕЛЬ ТЕМЫ (VSTheme.control из theme.js) — строка «Тема» с тремя вариантами ══
   В меню профиля — над «Выйти». До переноса в h1.css через Влада. */
.vs-theme { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 6px 0 10px; color: var(--fg2); font-size: 13.5px; }
.vs-theme > svg { flex: none; }
.vs-theme-l { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.vs-theme-l small { font-size: 12px; color: var(--muted); }
.vs-theme-seg { flex: none; display: inline-flex; gap: 2px; padding: 3px; border-radius: 100px; background: var(--seg-track); }
.vmenu .vs-theme-seg { background: var(--bg); } /* в меню: дорожка темнее фона меню (тёмная), серая на белом (светлая) */
.vs-theme-seg button { display: grid; place-items: center; width: 34px; height: 28px; padding: 0; border: 0; border-radius: 100px; background: none; color: var(--muted); cursor: pointer; transition: background-color .15s, color .15s, box-shadow .15s; }
.vs-theme-seg button:hover { color: var(--fg); }
.vs-theme-seg button[aria-checked="true"] { background: var(--seg-soft); color: var(--fg); box-shadow: var(--seg-shadow); }
.vs-theme-seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { .vs-theme-seg button { transition: none; } }
/* TODO(влад): на телефоне меню профиля (.vmenu, z-index 85) открывается ПОД выезжающим меню (.nav.sidenav, z-index 110) и не видно —
   ни «Тема», ни «Выйти» недоступны. Поднимаем меню над ним; в h1.css — тем же правилом или z-index у .vmenu выше 110 */
.nav-open .vmenu { z-index: 120; }
/* TODO(влад): значок пополнения в свёрнутом меню серый в обеих темах — .nav span (h1.css) перебивает .sn-promo-ic { color: #fff }.
   На градиенте значок должен быть белым */
.nav .sn-promo-ic { color: var(--on-media); }

/* ══ КАРКАС В СВЕТЛОЙ ТЕМЕ — ВРЕМЕННАЯ ЗАПЛАТКА, до переноса в h1.css / unknow.css / окно входа (Владу) ══
   В этих файлах цвета заданы числами (#fff, #1F1F21, rgba(255,255,255,…)); в светлой теме они нечитаемы.
   Каждое правило ниже — светлая версия исходного объявления; :where() не добавляет специфичности, поэтому
   правило перекрывает ровно исходное (файл подключается после каркаса) и не спорит с правилами разделов.
   Тёмную тему блок не трогает. Когда каркас переведут на токены (числа заменить на значения отсюда), блок удаляем.
   Собрано скриптом по h1.css, unknow.css и стилям authorization/index.html (18.10.2026). */
/* ── h1.css — каркас: меню, профиль, плеер, пополнение, телефон, окна ── */
:where([data-theme="light"]) .siteplayer { background: color-mix(in srgb, var(--sheet) 94%, transparent); }
:where([data-theme="light"]) .protobar { background: color-mix(in srgb, var(--sheet) 95%, transparent); box-shadow: 0 8px 24px color-mix(in srgb, var(--shade) 50%, transparent); }
:where([data-theme="light"]) .pill { border: 1px solid var(--line2); color: var(--fg); }
:where([data-theme="light"]) .iconbtn { border: 1px solid var(--line2); }
:where([data-theme="light"]) .smodal { background: color-mix(in srgb, var(--shade) 60%, transparent); }
:where([data-theme="light"]) .stoast { box-shadow: 0 8px 24px color-mix(in srgb, var(--shade) 50%, transparent); }
:where([data-theme="light"]) .sn-fold:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 9%, transparent); }
:where([data-theme="light"]) .sn-i:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 9%, transparent); }
:where([data-theme="light"]) .sn-i.on { background: color-mix(in srgb, var(--accent) 13%, transparent); }
:where([data-theme="light"]) .sn-prof { color: var(--fg); }
@media (max-width: 900px) { :where([data-theme="light"]) .nav-open .nav.sidenav { box-shadow: 20px 0 60px color-mix(in srgb, var(--shade) 60%, transparent); } }
@media (max-width: 900px) { :where([data-theme="light"]) .nav-scrim { background: color-mix(in srgb, var(--shade) 55%, transparent); } }
:where([data-theme="light"]) .sn-i:hover .i { color: var(--fg); }
:where([data-theme="light"]) .sn-i.on:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }
:where([data-theme="light"]) .sn-small .sn-i:hover { color: var(--fg); }
:where([data-theme="light"]) .sn-prof:hover { background: var(--hover); border-color: var(--line2); }
:where([data-theme="light"]) .sn-acc .sn-prof:hover { background: color-mix(in srgb, var(--fg) 6%, transparent); }
:where([data-theme="light"]) .sn-promo.low, :where([data-theme="light"]) .sn-promo.empty { background: var(--card); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
:where([data-theme="light"]) .sn-promo.empty { border-color: color-mix(in srgb, var(--bad) 35%, transparent); }
:where([data-theme="light"]) .sn-promo.low:hover, :where([data-theme="light"]) .sn-promo.empty:hover { box-shadow: 0 8px 24px color-mix(in srgb, var(--shade) 40%, transparent); }
:where([data-theme="light"]) .tl-empty b { color: var(--fg); }
:where([data-theme="light"]) .tr-ic:hover, :where([data-theme="light"]) .tr-ic[aria-expanded=true] { color: var(--fg); }
:where([data-theme="light"]) .vmenu { background: var(--sheet); box-shadow: var(--shadow-2); }
:where([data-theme="light"]) .vm-i:hover, :where([data-theme="light"]) .vm-i:focus-visible, :where([data-theme="light"]) .vm-i.open { color: var(--fg); }
:where([data-theme="light"]) .vm-i.danger:hover { background: color-mix(in srgb, var(--bad) 12%, transparent); }
:where([data-theme="light"]) .vm-sub { background: var(--sheet); box-shadow: var(--shadow-2); }
:where([data-theme="light"]) .pl-ic:hover { color: var(--fg); }
:where([data-theme="light"]) .pl-play { background: var(--grad); } /* как кнопки воспроизведения в разделе музыки; графитовый круг на белом — слишком тяжёлый */
:where([data-theme="light"]) #plVol { background: linear-gradient(90deg, color-mix(in srgb, var(--fg) 45%, transparent) var(--v, 90%), var(--line) var(--v, 90%)); }
:where([data-theme="light"]) #plVol::-webkit-slider-thumb { background: var(--card); box-shadow: 0 0 0 1px var(--line2), 0 1px 3px color-mix(in srgb, var(--shade) 50%, transparent); }
:where([data-theme="light"]) #plVol::-moz-range-thumb { background: var(--card); box-shadow: 0 0 0 1px var(--line2), 0 1px 3px color-mix(in srgb, var(--shade) 50%, transparent); }
@media (max-width: 900px) { :where([data-theme="light"]) .mtop { background: color-mix(in srgb, var(--bg) 92%, transparent); } }
@media (max-width: 900px) { :where([data-theme="light"]) .mtop-bal { color: var(--fg); } }
:where([data-theme="light"]) .pill:hover:not(:disabled) { background: color-mix(in srgb, var(--fg) 5%, var(--card)); border-color: color-mix(in srgb, var(--fg) 32%, transparent); color: var(--fg); }
:where([data-theme="light"]) .smodal.confirm .ssheet { box-shadow: 0 30px 80px color-mix(in srgb, var(--shade) 60%, transparent); }
:where([data-theme="light"]) .pl-meta:hover b { text-decoration-color: color-mix(in srgb, var(--fg) 35%, transparent); }
:where([data-theme="light"]) .pl-ic.on.pl-q, :where([data-theme="light"]) #plQueue.on { background: color-mix(in srgb, var(--accent) 12%, transparent); }
:where([data-theme="light"]) .pl-queue { background: var(--sheet); box-shadow: 0 24px 60px color-mix(in srgb, var(--shade) 60%, transparent); }
:where([data-theme="light"]) .q-clear:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
:where([data-theme="light"]) .q-i:hover { background: color-mix(in srgb, var(--fg) 6%, transparent); }
:where([data-theme="light"]) .tp-step { background: color-mix(in srgb, var(--fg) 4%, transparent); color: var(--fg); }
:where([data-theme="light"]) .tp-step:hover { background: color-mix(in srgb, var(--fg) 10%, transparent); border-color: color-mix(in srgb, var(--fg) 30%, transparent); }
:where([data-theme="light"]) .tp-amount input { color: var(--fg); }
:where([data-theme="light"]) .tp-quick button { color: var(--fg); }
:where([data-theme="light"]) .tp-quick button i { color: var(--on-media); } /* С-Н015: ярлык «Рекомендуем» — как у СБП: белый на градиенте */
:where([data-theme="light"]) .tp-quick button:hover { border-color: color-mix(in srgb, var(--fg) 30%, transparent); background: color-mix(in srgb, var(--fg) 4%, transparent); }
:where([data-theme="light"]) .tp-gift { background: color-mix(in srgb, var(--ok) 8%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 22%, transparent); }
:where([data-theme="light"]) .tp-gift-ic { background: color-mix(in srgb, var(--ok) 16%, transparent); }
:where([data-theme="light"]) .tp-up { border-bottom: 1px dashed color-mix(in srgb, var(--fg) 30%, transparent); }
:where([data-theme="light"]) .tp-up:hover { color: var(--fg); border-bottom-color: var(--fg); }
:where([data-theme="light"]) .tp-proto button:hover { color: var(--fg); }
:where([data-theme="light"]) .tp-qr-link { border-bottom: 1px dashed color-mix(in srgb, var(--fg) 30%, transparent); }
:where([data-theme="light"]) .tp-qr-link:hover { color: var(--fg); border-bottom-color: var(--fg); }
:where([data-theme="light"]) .tp-qr-spin { border: 2px solid color-mix(in srgb, var(--fg) 25%, transparent); border-top-color: var(--fg); }
@media (max-width: 900px) { :where([data-theme="light"]) .mtabs { background: color-mix(in srgb, var(--bg) 96%, transparent); } }
@media (max-width: 900px) { :where([data-theme="light"]) .mtabs button[aria-current=page] { color: var(--fg); } }
@media (max-width: 900px) { :where([data-theme="light"]) .siteplayer { background: color-mix(in srgb, var(--sheet) 94%, transparent); } }
:where([data-theme="light"]) .bl-empty { color: var(--bad); }
:where([data-theme="light"]) [data-bal=empty] .mtop-bal .balance { color: var(--bad); }
:where([data-theme="light"]) .pstrip { background: linear-gradient(90deg, rgba(162, 59, 245, .10), rgba(224, 69, 123, .08) 50%, rgba(222, 118, 43, .10)), var(--panel); border-bottom: 1px solid color-mix(in srgb, var(--fg) 7%, transparent); }
:where([data-theme="light"]) .ps-t { color: var(--fg); }
:where([data-theme="light"]) .ps-t span { background: none; color: var(--fg); } /* в каркасе градиент текста отключён (h1.css, второе правило .ps-t span) — текст обычный */
:where([data-theme="light"]) .ps-sp { color: #C98200; }
:where([data-theme="light"]) .ps-sp:nth-child(2) { color: #E0457B; }
:where([data-theme="light"]) .ps-sp:nth-child(3) { color: #8B3FE0; }
:where([data-theme="light"]) .ps-t:hover span { text-decoration-color: color-mix(in srgb, var(--fg) 40%, transparent); }
:where([data-theme="light"]) .ps-go:hover, :where([data-theme="light"]) .ps-x:hover { background: color-mix(in srgb, var(--fg) 8%, transparent); color: var(--fg); }
:where([data-theme="light"]) .vm-card { background: var(--bg); }
:where([data-theme="light"]) .bal-fx.minus { color: var(--bad); }
:where([data-theme="light"]) .tp-done-ic { background: color-mix(in srgb, var(--ok) 12%, transparent); box-shadow: 0 0 0 8px color-mix(in srgb, var(--ok) 5%, transparent); }
:where([data-theme="light"]) .tp-done-b { background: color-mix(in srgb, var(--ok) 12%, transparent); }
:where([data-theme="light"]) .vs-guest .sn-login { color: var(--fg); }
:where([data-theme="light"]) .vs-guest .sn-login:hover { border-color: var(--line2); background: var(--hover); }
:where([data-theme="light"]) .sn-login .sn-login-ic { color: var(--fg); }
:where([data-theme="light"]) .sn-login .sn-pdata b { color: var(--fg); }

/* ── unknow.css — общие детали разделов ── */
:where([data-theme="light"]) .cover-menu label:hover { color: var(--fg); }
:where([data-theme="light"]) .ssheet .field { color: var(--fg); }
:where([data-theme="light"]) .live-sw { box-shadow: 0 4px 14px color-mix(in srgb, var(--shade) 45%, transparent); }
:where([data-theme="light"]) .live-sw button[aria-pressed=true] { color: var(--fg); }
:where([data-theme="light"]) .cf-num { color: var(--fg); }
:where([data-theme="light"]) .cf-num:focus { border-color: var(--accent); }
:where([data-theme="light"]) .cf-editor { background: color-mix(in srgb, var(--shade) 65%, transparent); }
:where([data-theme="light"]) .cf-ed-tags button:hover { color: var(--fg); }
:where([data-theme="light"]) .cf-ed textarea { color: var(--fg); }
:where([data-theme="light"]) .trow.creating .th { background: linear-gradient(90deg, var(--line) 0%, var(--line2) 50%, var(--line) 100%) 0 0 / 200% 100%; }
:where([data-theme="light"]) .cf-tag:hover { color: var(--fg); }
:where([data-theme="light"]) .cf-tag[aria-pressed=true] { color: var(--fg); }
:where([data-theme="light"]) .cf-ed-aibtn[aria-pressed=true] { color: var(--fg); }
:where([data-theme="light"]) .cf-ai-msg.me { background: color-mix(in srgb, var(--accent) 16%, transparent); }
:where([data-theme="light"]) .cf-ai-res { color: var(--fg); }
:where([data-theme="light"]) .cf-ai-in textarea { color: var(--fg); }
:where([data-theme="light"]) .cf-ai-send { color: var(--fg); }
@media (max-width: 900px) { :where([data-theme="light"]) .cf-ai { box-shadow: -12px 0 30px color-mix(in srgb, var(--shade) 50%, transparent); } }
:where([data-theme="light"]) .cf-tag.more:hover { color: var(--fg); }
:where([data-theme="light"]) .cf-preview .pv-plus { color: var(--accent); }
:where([data-theme="light"]) .cf-lib-ren:hover { color: var(--fg); }
:where([data-theme="light"]) .cf-lib-in { color: var(--fg); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent); }
:where([data-theme="light"]) .cf-lib-i [data-libdel]:hover { color: var(--bad); background: color-mix(in srgb, var(--bad) 14%, transparent); }
:where([data-theme="light"]) .cf-pick.on .cf-pickb { color: var(--fg); }
:where([data-theme="light"]) .pk-x:hover { color: var(--fg); }
:where([data-theme="light"]) .cf-pickm { box-shadow: 0 14px 34px color-mix(in srgb, var(--shade) 60%, transparent); }
:where([data-theme="light"]) .cf-pickm button:hover, :where([data-theme="light"]) .cf-pickm button[aria-selected=true] { color: var(--fg); }
:where([data-theme="light"]) .cf-pickm .ck { color: var(--accent); }
:where([data-theme="light"]) .au-info b { color: var(--fg); }
:where([data-theme="light"]) .au-persona input, :where([data-theme="light"]) .vw-in { color: var(--fg); }
:where([data-theme="light"]) .au-persona input:focus, :where([data-theme="light"]) .vw-in:focus { border-color: color-mix(in srgb, var(--fg) 30%, transparent); }
:where([data-theme="light"]) .ph-add:hover { color: var(--fg); border-color: color-mix(in srgb, var(--fg) 30%, transparent); }
:where([data-theme="light"]) .vlib-jump { color: var(--fg); }
:where([data-theme="light"]) .vlib-i.on { color: var(--fg); }
:where([data-theme="light"]) .vlib-i.on .vlib-ck { color: var(--fg); }
:where([data-theme="light"]) .vw-steps li.on { color: var(--fg); }
:where([data-theme="light"]) .vw-choice button { color: var(--fg); }
:where([data-theme="light"]) .vw-choice button:hover { border-color: color-mix(in srgb, var(--fg) 30%, transparent); }
:where([data-theme="light"]) .tg-pub, :where([data-theme="light"]) .tg-sep { background: color-mix(in srgb, var(--ok) 14%, transparent); }
:where([data-theme="light"]) .tg-err { background: color-mix(in srgb, var(--bad) 15%, transparent); }
:where([data-theme="light"]) .tr-err { background: color-mix(in srgb, var(--bad) 5%, transparent); }
:where([data-theme="light"]) .tr-err.is-mod { background: color-mix(in srgb, var(--accent) 6%, transparent); }
:where([data-theme="light"]) .err-cov { background: color-mix(in srgb, var(--bad) 12%, transparent); }
:where([data-theme="light"]) .is-mod .err-cov { background: color-mix(in srgb, var(--accent) 14%, transparent); }
:where([data-theme="light"]) .is-mod .tg-err { background: color-mix(in srgb, var(--accent) 16%, transparent); }
:where([data-theme="light"]) .feat-price { background: color-mix(in srgb, var(--accent) 18%, transparent); }
:where([data-theme="light"]) .feat summary { color: var(--fg); }
@media (max-width: 900px) { :where([data-theme="light"]) .mtop-b { color: var(--fg); } }
:where([data-theme="light"]) .cm-ic { background: color-mix(in srgb, var(--accent) 14%, transparent); }
:where([data-theme="light"]) .cm-ic.danger { background: color-mix(in srgb, var(--bad) 14%, transparent); }
:where([data-theme="light"]) .rp-i:hover { background: color-mix(in srgb, var(--fg) 4%, transparent); color: var(--fg); }
:where([data-theme="light"]) .rp-i:has(input:checked) { background: linear-gradient(var(--card), var(--card)) padding-box, var(--grad) border-box; color: var(--fg); }
:where([data-theme="light"]) .pd-rules { background: color-mix(in srgb, var(--fg) 4%, transparent); }
:where([data-theme="light"]) .tg-wait { background: color-mix(in srgb, var(--accent) 16%, transparent); }
:where([data-theme="light"]) .tg-top { color: var(--fg); }
:where([data-theme="light"]) .hm-box { background: color-mix(in srgb, var(--shade) 22%, transparent); border: 1px dashed color-mix(in srgb, var(--fg) 14%, transparent); }
:where([data-theme="light"]) .hm-box.err { border-color: color-mix(in srgb, var(--bad) 35%, transparent); }
:where([data-theme="light"]) .hm-time b { color: var(--fg); }
:where([data-theme="light"]) .hm-wave { background: color-mix(in srgb, var(--shade) 28%, transparent); }
:where([data-theme="light"]) .lt-chip { color: var(--fg); background: var(--card); }
:where([data-theme="light"]) .lt-chip button { background: color-mix(in srgb, var(--fg) 12%, transparent); color: var(--fg); }
:where([data-theme="light"]) .lt-all:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 6%, transparent); }
:where([data-theme="light"]) .tp-need { background: color-mix(in srgb, var(--bad) 10%, transparent); border: 1px solid color-mix(in srgb, var(--bad) 30%, transparent); color: var(--bad); }
:where([data-theme="light"]) .ai-bal { background: color-mix(in srgb, var(--fg) 6%, transparent); color: var(--fg); }
:where([data-theme="light"]) .ai-bal.low { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
:where([data-theme="light"]) .ai-bal.empty { background: color-mix(in srgb, var(--bad) 16%, transparent); color: var(--bad); }
:where([data-theme="light"]) .ai-bal button { color: var(--fg); }
:where([data-theme="light"]) .nb { color: var(--fg); }
:where([data-theme="light"]) .next-hint { background: var(--sheet); box-shadow: 0 16px 40px color-mix(in srgb, var(--shade) 55%, transparent); }
:where([data-theme="light"]) .next-hint::before { background: var(--sheet); }
:where([data-theme="light"]) .tg-mv { color: var(--brand-text); }
:where([data-theme="light"]) .au-t { color: var(--fg); }
:where([data-theme="light"]) .au-t:hover { border-color: color-mix(in srgb, var(--fg) 30%, transparent); }

/* ── authorization/index.html — окно входа ── */
:where([data-theme="light"]) .vs-auth-module .vs-auth-b { color: var(--fg); }
:where([data-theme="light"]) .vs-auth-module .vs-auth-b.ya:hover, :where([data-theme="light"]) .vs-auth-module .vs-auth-b.tg:hover { background: var(--hover); border-color: color-mix(in srgb, var(--fg) 30%, transparent); }
:where([data-theme="light"]) .vs-auth-module .vs-auth-b.soc:hover { background: var(--hover); color: var(--fg); }
:where([data-theme="light"]) .VkIdSdk_oauth_item { color: var(--fg); }
:where([data-theme="light"]) .VkIdSdk_oauth_item:hover { background: var(--hover) !important; color: var(--fg) !important; }
:where([data-theme="light"]) .vs-auth-module .vs-auth-cap { color: var(--fg); }
:where([data-theme="light"]) .vs-auth-module .vs-auth-mi, :where([data-theme="light"]) .vs-auth-module .vs-auth-side .soc { border: 1px solid var(--line); background: var(--card); color: var(--fg); }
:where([data-theme="light"]) .vs-auth-module .vs-auth-mi:hover, :where([data-theme="light"]) .vs-auth-module .vs-auth-side .soc:hover { background: var(--hover); color: var(--fg); }
:where([data-theme="light"]) .vs-auth-module .vs-auth-dialog { color: var(--fg); box-shadow: 0 30px 80px color-mix(in srgb, var(--shade) 55%, transparent); }
:where([data-theme="light"]) .vs-auth-module .vs-auth-close:hover { color: var(--fg); background: var(--hover); }
:where([data-theme="light"]) .vs-auth-module input { color: var(--fg); }
:where([data-theme="light"]) .vs-auth-module .vs-auth-code-to b { color: var(--fg); }
:where([data-theme="light"]) .vs-auth-module .vs-auth-main [data-last] { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
:where([data-theme="light"]) .vs-auth-module .vs-auth-main .vs-auth-b[data-last]:not(.soc)::after { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
:where([data-theme="light"]) .vs-auth-module .vs-auth-side [data-last] { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
:where([data-theme="light"]) .vs-auth-module .vs-auth-side [data-last]:hover { border-color: color-mix(in srgb, var(--accent) 80%, transparent); background: color-mix(in srgb, var(--accent) 13%, transparent); }
:where([data-theme="light"]) .vs-auth-module .vs-auth-email-form[data-last]::before { color: var(--accent); }
:where([data-theme="light"]) .vs-auth-module .vs-auth-openmail { color: var(--fg); }
:where([data-theme="light"]) .vs-auth-module .vs-auth-openmail:hover { background: var(--hover); }
:where([data-theme="light"]) .vs-auth-module .is-loading::after, :where([data-theme="light"]) .vs-auth-module .vs-auth-side .soc.is-loading::after { border: 2px solid color-mix(in srgb, var(--fg) 25%, transparent) !important; border-top-color: var(--fg) !important; }
:where([data-theme="light"]) .vs-auth-module .vs-auth-link:hover { color: var(--fg); }
:where([data-theme="light"]) .vs-auth-module .vs-auth-message[data-error=true] { background: color-mix(in srgb, var(--bad) 10%, transparent); color: var(--bad); }
:where([data-theme="light"]) .vs-auth-module .vs-auth-message[data-ok=true] { background: color-mix(in srgb, var(--ok) 10%, transparent); color: var(--ok); }


/* ── дополнения вручную: то, что в каркасе задано токенами, но в светлой теме читается плохо ── */
:where([data-theme="light"]) .pill { background: var(--card); }
:where([data-theme="light"]) .vmenu, :where([data-theme="light"]) .vm-sub { border-color: var(--line); }
:where([data-theme="light"]) .vm-i:hover, :where([data-theme="light"]) .vm-i:focus-visible, :where([data-theme="light"]) .vm-i.open { background: var(--hover); }
:where([data-theme="light"]) .vm-i.danger:hover { background: var(--bad-soft); color: var(--bad); }
:where([data-theme="light"]) .pl-play { color: var(--on-media); }


/* ══ аудит светлой темы 18.10.26: каркас (unknow.css / h1.css) — перенести через Влада ══ */
/* М-Н002: подсказки первого визита — белый текст был невидим на светлом */
:where([data-theme="light"]) .onb-svg { filter: none; }
:where([data-theme="light"]) .onb-a, :where([data-theme="light"]) .onb-h { stroke: rgba(224,69,123,.55); }
:where([data-theme="light"]) .onb-g.on .onb-a, :where([data-theme="light"]) .onb-g.on .onb-h { stroke: #E0457B; }
:where([data-theme="light"]) .onb-l { color: var(--fg); }
:where([data-theme="light"]) .onb-l i { color: var(--brand-text); background: var(--card); border-color: rgba(224,69,123,.55); }
:where([data-theme="light"]) .onb-l:not(.on) { opacity: .6; }
:where([data-theme="light"]) .onb-x:hover { color: var(--fg); }
/* М-Н004: переключатель «Начинающий / Профи» — серая дорожка, выбранный вариант белый с тенью, как остальные сегменты */
:where([data-theme="light"]) .mini-seg { background: var(--seg-track); border-color: transparent; }
:where([data-theme="light"]) .mini-seg button[aria-pressed=true] { background: var(--seg-soft); box-shadow: var(--seg-shadow); }
:where([data-theme="light"]) .mini-seg button:not([aria-pressed=true]):hover { color: var(--fg); }
/* С-Н007: «+» в пилюле баланса на телефоне — белый на градиенте (наследовал тёмный текст пилюли) */
:where([data-theme="light"]) .mtop-bal b { color: var(--on-media); }
/* М-Н014: нижний плеер на компьютере — отделён тенью, а не сливается со страницей */
@media (min-width: 901px) { :where([data-theme="light"]) .siteplayer { box-shadow: 0 -6px 24px rgba(20,20,30,.08); } }
/* М-Н012: редактор, «ИИ-помощник» включён — белый текст на градиенте; пузырь ответа отделён тенью */
:where([data-theme="light"]) .pill.cf-ed-aibtn[aria-pressed=true] { color: var(--on-media); }
:where([data-theme="light"]) .cf-ai-msg.bot { box-shadow: var(--shadow-1); }
/* С-Н005: «Тема» в меню профиля — дорожка темнее, выбранный вариант заметнее; на телефоне цели крупнее */
:where([data-theme="light"]) .vmenu .vs-theme-seg { background: var(--line); }
@media (pointer: coarse) { .vs-theme-seg button { width: 44px; height: 34px; } }
.tp-quick button i { font-size: 10px; } /* С-Н015: оба ярлыка «Рекомендуем» одного размера (TODO влад: в h1.css) */
/* С-Н014: активный пункт левого меню — текст тёмный и полужирный (оранжевый 14 px на оранжевой подложке был 3:1), значок остаётся оранжевым */
:where([data-theme="light"]) .sn-i.on { color: var(--fg); font-weight: 600; }
:where([data-theme="light"]) .sn-i.on svg { color: var(--accent); }