/* ── Theme tokens — общий модуль для site, mini-app, landing.
   Дефолт — тема системы (prefers-color-scheme).
   Юзер может переключить через .theme-toggle, выбор хранится в localStorage. */
/* Базовые переменные (соответствуют существующему dark) */
:root {
  --bg-0:      #06060c;
  --bg-1:      #0c0a14;
  --bg-2:      #14101a;
  --bg-elev:   rgba(20,16,26,.92);
  --surface-1: rgba(255,255,255,.04);
  --surface-2: rgba(255,255,255,.07);
  --line:      rgba(255,255,255,.08);
  --line-strong: rgba(255,255,255,.12);
  --line-subtle: rgba(255,255,255,.04);
  --text:      #f4f4f7;
  --muted:     #9b9ba6;
  --muted-2:   #c4c4cc;
  --dim:       #6e6e7a;
  /* Акценты (не зависят от темы) */
  --accent:      #ff2d3a;
  --accent-2:    #ff7a3a;
  --accent-deep: #b8000c;
  --accent-glow: rgba(255,45,58,.35);

  /* ── Phase 1 tokens: elevation / shadows / gradients / glow ──
     На dark глубина строится contrast'ом (более тёмные surface),
     shadow почти не используется. На light — наоборот: сами surface
     почти равные (#fff/#fbfbfd), глубина — через shadow.
     Поэтому --shadow-* и --elev-* должны различаться сильнее всех. */

  /* Elevation — фоны слоёв: 0 = страница, 1 = card, 2 = nested card */
  --elev-0:    var(--bg-0);
  --elev-1:    var(--bg-1);
  --elev-2:    var(--bg-2);

  /* Shadows — почти нулевые на dark, иначе они «гасят» контент */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.40);
  --shadow-md: 0 4px 12px rgba(0,0,0,.50);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.60);
  --shadow-glow: 0 0 24px var(--accent-glow);

  /* Adaptive accent — на light будет затемнён, на dark = тот же brand */
  --accent-on-bg:    var(--accent);
  --accent-glow-soft: var(--accent-glow);

  /* Gradients — для hero/card/accent кнопок. Single source of truth. */
  --gradient-card:   linear-gradient(180deg, var(--bg-2), var(--bg-1));
  --gradient-hero:   linear-gradient(160deg, var(--bg-2) 0%, var(--bg-1) 100%);
  --gradient-accent: linear-gradient(135deg, var(--accent), var(--accent-deep));

  /* Logo / brand glow — drop-shadow на лого и pulse. Light = убираем кроваво. */
  --logo-glow:       drop-shadow(0 0 8px rgba(255,45,58,.85));
  --logo-glow-pulse-min: drop-shadow(0 0 6px rgba(255,45,58,.6));
  --logo-glow-pulse-max: drop-shadow(0 0 14px rgba(255,45,58,.9));

  /* Theme transition — общий ease для smooth swap при тоггле */
  --transition-theme: .4s cubic-bezier(.4, 0, .2, 1);

  /* ── Phase 2: Chrome tokens (topbar / tabbar / sidebar / splash / logo)
     Хром (шапка/футер/sidebar/splash) — самая видимая часть. Tokens
     вместо hardcoded rgba(7,7,8,...) во всех CSS-файлах. */
  --topbar-bg:       linear-gradient(180deg, rgba(7,7,8,.92) 60%, rgba(7,7,8,0));
  --topbar-border:   1px solid var(--line);
  --tabbar-bg:       rgba(7,7,8,.88);
  --tabbar-border:   1px solid var(--line);
  --sidebar-bg:      rgba(7,7,8,.6);
  --sidebar-border:  1px solid rgba(255,255,255,.06);
  --splash-bg:       #000;
  --logo-box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 0 22px var(--accent-glow);
  --site-btn-bg:     rgba(255,255,255,.05);
  --site-btn-border: rgba(255,255,255,.10);

  /* Tab states (sidebar и mobile) */
  --tab-active-fg:   #ff8b91;             /* light pink на тёмном sidebar */
  --tab-active-bg:   linear-gradient(135deg, rgba(255,45,58,.16), rgba(255,45,58,.06));
  --tab-hover-bg:    rgba(255,255,255,.04);

  /* Key-value (моноширинный конфиг внутри key-card) — на dark глубокий
     полупрозрачный чёрный, на light — светло-серый код-блок. */
  --key-value-bg:     rgba(0,0,0,.3);
  --key-value-border: transparent;

  /* ── Phase 4: forms / buttons tokens ────────────────────────
     Input focus-border: на dark — accent at .4, на light — full accent-on-bg
     (нужнее видимость, тонкий line-border слабо читается).
     Danger button foreground: на dark — светлый pink #ff8b91 (хорошо читаем),
     на light — насыщенный darker red #b8000c (на белом #ff8b91 невидим). */
  --input-focus-border: rgba(255,45,58,.4);
  --btn-danger-fg:      #ff8b91;
  --btn-danger-bg-hover:    rgba(255,45,58,.12);
  --btn-danger-border:      rgba(255,45,58,.30);
  --btn-danger-border-hover: rgba(255,45,58,.55);
  --link-action-color:  #ff8b91;
}
:root[data-theme="dark"] { color-scheme: dark; }
/* ── LIGHT THEME — переменные ───────────────────────────────
   Применяются: data-theme="light" (явно) ИЛИ системная светлая
   при отсутствии явного data-theme. */
:root[data-theme="light"] {
  --bg-0:      #f3f4f8;
  --bg-1:      #ffffff;
  --bg-2:      #fbfbfd;
  --bg-elev:   rgba(255,255,255,.94);
  --surface-1: rgba(20,22,40,.04);
  --surface-2: rgba(20,22,40,.07);
  --line:      rgba(20,22,40,.18);
  --line-strong: rgba(20,22,40,.26);
  --line-subtle: rgba(20,22,40,.14);
  --text:      #14141a;
  --muted:     #4a4a52;
  --muted-2:   #2c2c33;
  --dim:       #6c6c75;

  /* Phase 1 — elevation/shadow/gradient в light: глубина — через shadow */
  --elev-0:    #f3f4f8;
  --elev-1:    #ffffff;
  --elev-2:    #fbfbfd;
  --shadow-sm: 0 1px 2px rgba(20,22,40,.04), 0 1px 0 rgba(20,22,40,.02);
  --shadow-md: 0 4px 12px rgba(20,22,40,.06), 0 2px 4px rgba(20,22,40,.04);
  --shadow-lg: 0 12px 32px rgba(20,22,40,.10), 0 4px 8px rgba(20,22,40,.05);
  --shadow-glow: 0 0 18px var(--accent-glow-soft);

  /* Accent на белом — слегка темнее красный, чтобы не «жёг» */
  --accent-on-bg:     #d92732;
  --accent-glow-soft: rgba(217,39,50,.16);
  /* Accent-glow на light: было оставлено .35 от dark — слишком ярко на белом
     (red halo вокруг кнопок при hover). Делаем .20 — в духе light. */
  --accent-glow:      rgba(217,39,50,.20);

  --gradient-card:   linear-gradient(180deg, #ffffff, #f8f9fc);
  --gradient-hero:   linear-gradient(135deg, #ffffff 0%, #fbfbfd 50%, #f0f1f7 100%);
  --gradient-accent: linear-gradient(135deg, var(--accent-on-bg), #a8131e);

  /* Logo — без яркого красного glow на белом (выглядит как кровь),
     заменяем на тонкую elevation-тень. */
  --logo-glow:           drop-shadow(0 2px 6px rgba(20,22,40,.08));
  --logo-glow-pulse-min: drop-shadow(0 1px 4px rgba(20,22,40,.06));
  --logo-glow-pulse-max: drop-shadow(0 3px 8px rgba(20,22,40,.10));

  /* Phase 2 chrome (light) — topbar/tabbar СОЛИДНЫ (без fade-to-transparent),
     иначе контент скроллится сквозь полупрозрачную шапку и читать тяжело */
  --topbar-bg:       rgba(255,255,255,.96);
  --topbar-border:   1px solid var(--line);
  --tabbar-bg:       rgba(255,255,255,.96);
  --tabbar-border:   1px solid var(--line);
  --sidebar-bg:      var(--elev-2);
  --sidebar-border:  1px solid var(--line);
  --splash-bg:       linear-gradient(180deg, #ffffff 0%, #f3f4f8 100%);
  --logo-box-shadow: 0 0 0 1px rgba(20,22,40,.06), var(--shadow-sm);
  --site-btn-bg:     rgba(20,22,40,.04);
  --site-btn-border: rgba(20,22,40,.12);

  --tab-active-fg:   var(--accent-on-bg);
  --tab-active-bg:   linear-gradient(135deg, rgba(217,39,50,.12), rgba(217,39,50,.04));
  --tab-hover-bg:    rgba(20,22,40,.05);

  --key-value-bg:     #f6f8fc;
  /* Border на key-value создавал «двойную рамку» в десктоп key-card:
     внешняя card-border + внутренняя key-value-border = два concentric
     прямоугольника с разными радиусами (10px vs r-md), визуально ломают
     композицию. Оставляем только bg-fill для визуального code-block'а. */
  --key-value-border: transparent;

  --yellow: #e8650a;

  /* Phase 4 (light): focus-border насыщенный (тонкий border плохо виден),
     danger fg — насыщенный darker red (#b8000c), который читаем на белом. */
  --input-focus-border: var(--accent-on-bg);
  --btn-danger-fg:      #b8000c;
  --btn-danger-bg-hover:    rgba(217,39,50,.08);
  --btn-danger-border:      rgba(217,39,50,.35);
  --btn-danger-border-hover: rgba(217,39,50,.55);
  --link-action-color:  var(--accent-on-bg);

  /* Alias-токены: miniapp-style.css объявляет --surf-1/--surf-2 c белыми
     полупрозрачными rgba (для тёмной темы). На light они должны
     соответствовать --surface-1/--surface-2 (dark-ink на белом). Без
     этого все btn-copy/icon-btn/key-tag etc. остаются «белый на белом». */
  --surf-1: var(--surface-1);
  --surf-2: var(--surface-2);

  color-scheme: light;
}
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) {
    --bg-0:      #f3f4f8;
    --bg-1:      #ffffff;
    --bg-2:      #fbfbfd;
    --bg-elev:   rgba(255,255,255,.94);
    --surface-1: rgba(20,22,40,.04);
    --surface-2: rgba(20,22,40,.07);
    --line:      rgba(20,22,40,.12);
    --line-strong: rgba(20,22,40,.20);
    --line-subtle: rgba(20,22,40,.10);
    --text:      #14141a;
    --muted:     #4a4a52;
    --muted-2:   #2c2c33;
    --dim:       #6c6c75;

    --elev-0: #f3f4f8; --elev-1: #ffffff; --elev-2: #fbfbfd;
    --shadow-sm: 0 1px 2px rgba(20,22,40,.04), 0 1px 0 rgba(20,22,40,.02);
    --shadow-md: 0 4px 12px rgba(20,22,40,.06), 0 2px 4px rgba(20,22,40,.04);
    --shadow-lg: 0 12px 32px rgba(20,22,40,.10), 0 4px 8px rgba(20,22,40,.05);
    --shadow-glow: 0 0 18px var(--accent-glow-soft);

    --accent-on-bg:     #d92732;
    --accent-glow-soft: rgba(217,39,50,.16);
    --accent-glow:      rgba(217,39,50,.20);

    --gradient-card:   linear-gradient(180deg, #ffffff, #f8f9fc);
    --gradient-hero:   linear-gradient(135deg, #ffffff 0%, #fbfbfd 50%, #f0f1f7 100%);
    --gradient-accent: linear-gradient(135deg, var(--accent-on-bg), #a8131e);

    --logo-glow:           drop-shadow(0 2px 6px rgba(20,22,40,.08));
    --logo-glow-pulse-min: drop-shadow(0 1px 4px rgba(20,22,40,.06));
    --logo-glow-pulse-max: drop-shadow(0 3px 8px rgba(20,22,40,.10));

    /* Phase 2 chrome (light, OS-default) — солидный topbar/tabbar */
    --topbar-bg:       rgba(255,255,255,.96);
    --topbar-border:   1px solid var(--line);
    --tabbar-bg:       rgba(255,255,255,.96);
    --tabbar-border:   1px solid var(--line);
    --sidebar-bg:      var(--elev-2);
    --sidebar-border:  1px solid var(--line);
    --splash-bg:       linear-gradient(180deg, #ffffff 0%, #f3f4f8 100%);
    --logo-box-shadow: 0 0 0 1px rgba(20,22,40,.06), var(--shadow-sm);
    --site-btn-bg:     rgba(20,22,40,.04);
    --site-btn-border: rgba(20,22,40,.12);

    --tab-active-fg:   var(--accent-on-bg);
    --tab-active-bg:   linear-gradient(135deg, rgba(217,39,50,.12), rgba(217,39,50,.04));
    --tab-hover-bg:    rgba(20,22,40,.05);

    --key-value-bg:     #f6f8fc;
    --key-value-border: transparent;

    --yellow: #e8650a;

    --input-focus-border: var(--accent-on-bg);
    --btn-danger-fg:      #b8000c;
    --btn-danger-bg-hover:    rgba(217,39,50,.08);
    --btn-danger-border:      rgba(217,39,50,.35);
    --btn-danger-border-hover: rgba(217,39,50,.55);
    --link-action-color:  var(--accent-on-bg);

    --surf-1: var(--surface-1);
    --surf-2: var(--surface-2);

    color-scheme: light;
  }
/* Явный data-theme="dark" имеет приоритет над OS-темой */
:root[data-theme="dark"] {
    --bg-0:      #06060c; --bg-1: #0c0a14; --bg-2: #14101a;
    --bg-elev:   rgba(20,16,26,.92);
    --surface-1: rgba(255,255,255,.04); --surface-2: rgba(255,255,255,.07);
    --line:      rgba(255,255,255,.08); --line-strong: rgba(255,255,255,.12);
    --line-subtle: rgba(255,255,255,.04);
    --text:      #f4f4f7; --muted: #9b9ba6; --muted-2: #c4c4cc; --dim: #6e6e7a;

    --elev-0: var(--bg-0); --elev-1: var(--bg-1); --elev-2: var(--bg-2);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.40);
    --shadow-md: 0 4px 12px rgba(0,0,0,.50);
    --shadow-lg: 0 12px 32px rgba(0,0,0,.60);
    --shadow-glow: 0 0 24px var(--accent-glow);

    --accent-on-bg:     var(--accent);
    --accent-glow-soft: var(--accent-glow);

    --gradient-card:   linear-gradient(180deg, var(--bg-2), var(--bg-1));
    --gradient-hero:   linear-gradient(160deg, var(--bg-2) 0%, var(--bg-1) 100%);
    --gradient-accent: linear-gradient(135deg, var(--accent), var(--accent-deep));

    --logo-glow:           drop-shadow(0 0 8px rgba(255,45,58,.85));
    --logo-glow-pulse-min: drop-shadow(0 0 6px rgba(255,45,58,.6));
    --logo-glow-pulse-max: drop-shadow(0 0 14px rgba(255,45,58,.9));

    /* Phase 2 chrome (dark, override over OS-light) */
    --topbar-bg:       linear-gradient(180deg, rgba(7,7,8,.92) 60%, rgba(7,7,8,0));
    --topbar-border:   1px solid var(--line);
    --tabbar-bg:       rgba(7,7,8,.88);
    --tabbar-border:   1px solid var(--line);
    --sidebar-bg:      rgba(7,7,8,.6);
    --sidebar-border:  1px solid rgba(255,255,255,.06);
    --splash-bg:       #000;
    --logo-box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 0 22px var(--accent-glow);
    --site-btn-bg:     rgba(255,255,255,.05);
    --site-btn-border: rgba(255,255,255,.10);

    --tab-active-fg:   #ff8b91;
    --tab-active-bg:   linear-gradient(135deg, rgba(255,45,58,.16), rgba(255,45,58,.06));
    --tab-hover-bg:    rgba(255,255,255,.04);

    --key-value-bg:     rgba(0,0,0,.3);
    --key-value-border: transparent;

    --input-focus-border: rgba(255,45,58,.4);
    --btn-danger-fg:      #ff8b91;
    --btn-danger-bg-hover:    rgba(255,45,58,.12);
    --btn-danger-border:      rgba(255,45,58,.30);
    --btn-danger-border-hover: rgba(255,45,58,.55);
    --link-action-color:  #ff8b91;

    color-scheme: dark;
  }
}
/* ── Phase 5: Tor-mode на light теме ─────────────────────────
   body.theme-tor (в miniapp-style.css) меняет --bg-0/1/2 на тёмно-фиолетовые.
   На light это форсит чёрный фон поверх белой темы. Здесь — лёгкая
   лавандовая палитра, --accent сдвинут к darker tor purple #7e2eb8
   (на белом #b833ff жёг бы глаза, и контраст низкий). */
:root[data-theme="light"] body.theme-tor {
  --bg-0:   #f7f4fb;
  --bg-1:   #ffffff;
  --bg-2:   #fcf9fe;
  --accent:      #7e2eb8;
  --accent-deep: #4a1e6e;
  --accent-soft: rgba(126,46,184,.10);
  --accent-glow: rgba(126,46,184,.20);
  --accent-on-bg:     #7e2eb8;
  --accent-glow-soft: rgba(126,46,184,.14);
  --orange:           #c64a8a;
  --violet:           #a83d9c;
  --gradient-accent:  linear-gradient(135deg, #7e2eb8, #4a1e6e);
  --gradient-hero:    linear-gradient(135deg, #ffffff 0%, #fcf9fe 50%, #f7f4fb 100%);
  --input-focus-border: #7e2eb8;
  --tab-active-fg:    #7e2eb8;
  --tab-active-bg:    linear-gradient(135deg, rgba(126,46,184,.12), rgba(126,46,184,.04));
  --link-action-color: #7e2eb8;
  --sidebar-bg:       #fcf9fe;
  --splash-bg:        linear-gradient(180deg, #ffffff, #f7f4fb);
}
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) body.theme-tor {
    --bg-0:   #f7f4fb;
    --bg-1:   #ffffff;
    --bg-2:   #fcf9fe;
    --accent:      #7e2eb8;
    --accent-deep: #4a1e6e;
    --accent-soft: rgba(126,46,184,.10);
    --accent-glow: rgba(126,46,184,.20);
    --accent-on-bg:     #7e2eb8;
    --accent-glow-soft: rgba(126,46,184,.14);
    --orange:           #c64a8a;
    --violet:           #a83d9c;
    --gradient-accent:  linear-gradient(135deg, #7e2eb8, #4a1e6e);
    --gradient-hero:    linear-gradient(135deg, #ffffff 0%, #fcf9fe 50%, #f7f4fb 100%);
    --input-focus-border: #7e2eb8;
    --tab-active-fg:    #7e2eb8;
    --tab-active-bg:    linear-gradient(135deg, rgba(126,46,184,.12), rgba(126,46,184,.04));
    --link-action-color: #7e2eb8;
    --sidebar-bg:       #fcf9fe;
    --splash-bg:        linear-gradient(180deg, #ffffff, #f7f4fb);
  }
}
/* ────────────────────────────────────────────────────────────
   LIGHT-THEME OVERRIDES — поверх существующих стилей.
   Соединяем оба контекста (data-theme=light, OS+no-explicit-dark)
   через .theme-light универсал-класс на html.
   ──────────────────────────────────────────────────────────── */
/* Body / global. Inline-стиль в account.html объявляет
   `html,body{background:#070708 !important}` — для light-режима
   нужно ОБЯЗАТЕЛЬНО специфичность выше + !important. */
:root[data-theme="light"] body,
:root[data-theme="light"] html { background: var(--bg-0) !important; color: var(--text); }
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) body,
  :root:not([data-theme="dark"]) html { background: var(--bg-0) !important; color: var(--text); }
}
/* Splash + Auth-gate + Forbidden — фуллскрин-блокеры с hardcoded #000
   фоном. В light-теме переопределяем — иначе после загрузки страницы
   видим чёрный экран вместо контента. */
:root[data-theme="light"] #__splash,
:root[data-theme="light"] .auth-gate,
:root[data-theme="light"] .adm-forbidden {
  background: linear-gradient(180deg, #f3f4f8, #ffffff) !important;
  color: var(--text) !important;
}
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) #__splash,
  :root:not([data-theme="dark"]) .auth-gate,
  :root:not([data-theme="dark"]) .adm-forbidden {
    background: linear-gradient(180deg, #f3f4f8, #ffffff) !important;
    color: var(--text) !important;
  }
}
/* ── Gradient text fix (.hl, .speedo-value) ──────────────────
   В dark-теме градиенты `#fff → red → orange` смотрятся отлично, в
   light-теме они частично невидимы (белый стартовый стоп исчезает на
   белом фоне). Самый надёжный приём: solid-color акцент вместо
   gradient-text. Хорошо рендерится во ВСЕХ браузерах, без артефактов
   background-clip:text. */
:root[data-theme="light"] .hl,
:root[data-theme="light"] .section-h2 .hl {
  background: linear-gradient(120deg, var(--text) 0%, var(--accent) 50%, var(--accent-2) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
/* Gradient text «#fff → accent» — на белом фоне белый стартовый стоп невидим.
   Делим:
   • Числа-данные (online count, ping ms) — solid var(--text) для max читаемости
   • Hero/brand display (sub-hero таймер «26 дн», acc-stat «87»/«42 мс») —
     solid var(--accent-on-bg) для бренд-feel как на dark (там был gradient).
   Сброс: background:none + background-clip:initial + text-fill-color override. */
:root[data-theme="light"] .speedo-value,
:root[data-theme="light"] .pm-success-h,
:root[data-theme="light"] .metric-value {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: var(--text) !important;
  color: var(--text) !important;
}
:root[data-theme="light"] .speedo-val-big {
  background: linear-gradient(120deg, var(--text) 30%, var(--accent) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
:root[data-theme="light"] .acc-stat-val,
:root[data-theme="light"] .sub-hero-time .big {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: var(--accent-on-bg) !important;
  color: var(--accent-on-bg) !important;
}
/* small inside speedo/stat-val — НЕ accent (мелкая едница), text-fill */
:root[data-theme="light"] .speedo-value small,
:root[data-theme="light"] .speedo-val-big small,
:root[data-theme="light"] .acc-stat-val small {
  -webkit-text-fill-color: var(--muted) !important;
  color: var(--muted) !important;
}
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) .hl,
  :root:not([data-theme="dark"]) .section-h2 .hl {
    background: linear-gradient(120deg, var(--text) 0%, var(--accent) 50%, var(--accent-2) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
  }
:root:not([data-theme="dark"]) .speedo-value,
  :root:not([data-theme="dark"]) .pm-success-h,
  :root:not([data-theme="dark"]) .metric-value {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: var(--text) !important;
    color: var(--text) !important;
  }
  :root:not([data-theme="dark"]) .speedo-val-big {
    background: linear-gradient(120deg, var(--text) 30%, var(--accent) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
  }
:root:not([data-theme="dark"]) .acc-stat-val,
  :root:not([data-theme="dark"]) .sub-hero-time .big {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: var(--accent-on-bg) !important;
    color: var(--accent-on-bg) !important;
  }
:root:not([data-theme="dark"]) .speedo-value small,
  :root:not([data-theme="dark"]) .speedo-val-big small,
  :root:not([data-theme="dark"]) .acc-stat-val small {
    -webkit-text-fill-color: var(--muted) !important;
    color: var(--muted) !important;
  }
}
/* Auth-title (login/register/reset) — тот же gradient-text паттерн */
:root[data-theme="light"] .auth-title {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: var(--text) !important;
  color: var(--text) !important;
}
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) .auth-title {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: var(--text) !important;
    color: var(--text) !important;
  }
}
/* Acc-stat tiles («Дней с нами» / «Ваш пинг») — на dark цветные tinted
   gradient cards (pink+cyan). На light те же tints выглядят как «грязные»
   полупрозрачные кляксы на белом → делаем чистые white-cards с цветным
   border (border несёт идентичность вместо грязного фона). */
:root[data-theme="light"] .acc-stat {
  background: #ffffff !important;
  border-color: rgba(217,39,50,.30) !important;
  box-shadow: var(--shadow-sm);
}
:root[data-theme="light"] .acc-stat:nth-child(2) {
  background: #ffffff !important;
  border-color: rgba(45,150,211,.30) !important;
}
:root[data-theme="light"] .acc-stat:nth-child(2):hover {
  border-color: rgba(45,150,211,.55) !important;
}
/* Иконки stat-tile: на dark яркий fill цвета акцента (rgba .16 + glow).
   На light это розовый/голубой квадрат, который смотрится «лишним» на
   уже цветно-обрамлённой white-карточке. Делаем выжимку: прозрачный
   фон + только цветная иконка. */
:root[data-theme="light"] .acc-stat-icon {
  background: transparent !important;
  box-shadow: none !important;
  color: var(--accent-on-bg) !important;
}
:root[data-theme="light"] .acc-stat:nth-child(2) .acc-stat-icon {
  background: transparent !important;
  box-shadow: none !important;
  color: #2196d3 !important;
}
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) .acc-stat-icon {
    background: transparent !important;
    box-shadow: none !important;
    color: var(--accent-on-bg) !important;
  }
:root:not([data-theme="dark"]) .acc-stat:nth-child(2) .acc-stat-icon {
    background: transparent !important;
    box-shadow: none !important;
    color: #2196d3 !important;
  }
}
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) .acc-stat {
    background: #ffffff !important;
    border-color: rgba(217,39,50,.30) !important;
    box-shadow: var(--shadow-sm);
  }
:root:not([data-theme="dark"]) .acc-stat:nth-child(2) {
    background: #ffffff !important;
    border-color: rgba(45,150,211,.30) !important;
  }
:root:not([data-theme="dark"]) .acc-stat:nth-child(2):hover {
    border-color: rgba(45,150,211,.55) !important;
  }
}
/* Support chat input — на light .sup-compose имеет solid white bg, а
   .sup-input использует var(--surface-1) (4% rgba) → почти не отличается
   от фона, юзер видит «белую полоску» вместо явного поля ввода. Заметный
   серый код-style fill + усиленный border. */
@media (prefers-color-scheme: light) {

}
/* Key-body (моноширинный блок с конфигом) и sub-link-card (Hiddify deeplink)
   на dark используют var(--bg-0)/var(--surf-1) — глубокий чёрный/тёмно-серый
   слой контраста с карточкой-родителем. На light это превращается в
   обтрусивный «серый квадрат» внутри белой карточки. Делаем светло-серый
   код-блок-стиль (как GitHub <code>) с явным усиленным бордером. */
:root[data-theme="light"] .key-body {
  background: #f6f8fc !important;
  border-color: var(--line-strong) !important;
}
:root[data-theme="light"] .sub-link-card {
  background: #ffffff !important;
  border-color: var(--line-strong) !important;
  box-shadow: var(--shadow-sm);
}
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) .key-body {
    background: #f6f8fc !important;
    border-color: var(--line-strong) !important;
  }
:root:not([data-theme="dark"]) .sub-link-card {
    background: #ffffff !important;
    border-color: var(--line-strong) !important;
    box-shadow: var(--shadow-sm);
  }
}
/* Sub-badge статус-чипы (Подписка: Активна / Trial / Не активна).
   На dark var(--green/yellow/accent) яркие. На light #2ecc71/#ffd24d почти
   сливаются с белым → text + bg darker для нормального контраста. */
:root[data-theme="light"] .sub-badge.active {
  background: rgba(46,204,113,.16) !important;
  color: #1a8c4a !important;
  border-color: rgba(46,204,113,.45) !important;
}
:root[data-theme="light"] .sub-badge.trial {
  background: rgba(232,101,10,.12) !important;
  color: #c84a05 !important;
  border-color: rgba(232,101,10,.45) !important;
}
:root[data-theme="light"] .sub-badge.none {
  background: rgba(217,39,50,.10) !important;
  color: var(--accent-on-bg) !important;
  border-color: rgba(217,39,50,.40) !important;
}
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) .sub-badge.active {
    background: rgba(46,204,113,.16) !important;
    color: #1a8c4a !important;
    border-color: rgba(46,204,113,.45) !important;
  }
:root:not([data-theme="dark"]) .sub-badge.trial {
    background: rgba(232,101,10,.12) !important;
    color: #c84a05 !important;
    border-color: rgba(232,101,10,.45) !important;
  }
:root:not([data-theme="dark"]) .sub-badge.none {
    background: rgba(217,39,50,.10) !important;
    color: var(--accent-on-bg) !important;
    border-color: rgba(217,39,50,.40) !important;
  }
}
/* Speedo SVG: hardcoded inline атрибуты на light = невидимы:
   • <path stroke="rgba(255,255,255,.08)"> (трек дуги)
   • <line id="speedo-needle-X" stroke="#fff"> внутри <g> в miniapp/site
   • <line id="big-needle-X" stroke="#fff"> на лендинге (id на line!)
   • <circle fill="#fff"> в центре (centered pin) на лендинге
   Все имеют общий <svg class="speedo-svg">. */
:root[data-theme="light"] .speedo-svg path[stroke^="rgba(255,255,255"] {
  stroke: rgba(20,22,40,.18) !important;
}
:root[data-theme="light"] .speedo-svg [id*="speedo-needle"] line,
:root[data-theme="light"] .speedo-svg line[id*="big-needle"] {
  stroke: var(--muted-2) !important;
}
:root[data-theme="light"] .speedo-svg circle[fill="#fff"] {
  fill: var(--muted-2) !important;
}
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) .speedo-svg path[stroke^="rgba(255,255,255"] {
    stroke: rgba(20,22,40,.18) !important;
  }
:root:not([data-theme="dark"]) .speedo-svg [id*="speedo-needle"] line,
  :root:not([data-theme="dark"]) .speedo-svg line[id*="big-needle"] {
    stroke: var(--muted-2) !important;
  }
:root:not([data-theme="dark"]) .speedo-svg circle[fill="#fff"] {
    fill: var(--muted-2) !important;
  }
}
/* ── Landing-specific overrides ───────────────────────────── */
:root[data-theme="light"] .bg,
:root[data-theme="light"] body { background: linear-gradient(180deg, #f6f6fa 0%, #eef0f6 50%, #f6f6fa 100%) !important; }
:root[data-theme="light"] .bg-aurora {
  background: radial-gradient(circle at 30% 0%, rgba(255,45,58,.10) 0%, transparent 55%),
              radial-gradient(circle at 80% 30%, rgba(107,70,193,.08) 0%, transparent 50%),
              radial-gradient(circle at 50% 100%, rgba(45,211,255,.08) 0%, transparent 60%) !important;
}
/* Phase 5 — bg-blob/grain: на dark глубокие плазменные пятна, на light те же
   радиалки выглядят как «разлитая краска» (тёмно-красный/фиолет на белом).
   Уменьшаем opacity и mix-blend для мягкого тонкого hint. */
:root[data-theme="light"] .bg-blob {
  opacity: .22 !important;
  mix-blend-mode: multiply;
}
:root[data-theme="light"] .bg-grain {
  opacity: .04 !important;
}
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) .bg-blob {
    opacity: .22 !important;
    mix-blend-mode: multiply;
  }
:root:not([data-theme="dark"]) .bg-grain {
    opacity: .04 !important;
  }
}
:root[data-theme="light"] .bg-grain {
  background-image: radial-gradient(rgba(20,22,40,.025) 1px, transparent 1px) !important;
}
:root[data-theme="light"] .topnav {
  background: rgba(255,255,255,.85) !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: 0 1px 0 rgba(20,22,40,.03);
}
:root[data-theme="light"] .topnav-links a { color: var(--muted-2); }
:root[data-theme="light"] .topnav-links a:hover { color: var(--accent); }
:root[data-theme="light"] .glass-card,
:root[data-theme="light"] .feature-card,
:root[data-theme="light"] .step-card {
  background: linear-gradient(180deg, #ffffff, #f8f8fb) !important;
  border-color: var(--line) !important;
  color: var(--text);
  box-shadow: 0 6px 18px rgba(20,22,40,.05), 0 1px 0 rgba(255,255,255,.6) inset;
}
:root[data-theme="light"] .feature-card .feature-text,
:root[data-theme="light"] .step-card .step-text { color: var(--muted-2); }
:root[data-theme="light"] .section-h2,
:root[data-theme="light"] .hero-h1,
:root[data-theme="light"] .feature-h3,
:root[data-theme="light"] .step-h3,
:root[data-theme="light"] h1,
:root[data-theme="light"] h2,
:root[data-theme="light"] h3 { color: var(--text); }
:root[data-theme="light"] .hero-sub,
:root[data-theme="light"] .section-sub { color: var(--muted-2); }
:root[data-theme="light"] .hero-tag {
  background: rgba(255,45,58,.06) !important;
  border-color: rgba(255,45,58,.20) !important;
  color: var(--accent) !important;
}
:root[data-theme="light"] .hero-glass-wrap { /* hero pulse-блок */ }
:root[data-theme="light"] .hero-pulse {
  background: radial-gradient(circle at center, rgba(255,45,58,.22) 0%, rgba(140,50,180,.12) 40%, transparent 70%) !important;
}
/* Tor-section: тёмный gradient на тёмном фоне — в light переделаем в светлый
   с пурпурным акцентом */
/* DELETED: .tor-section bg-gradient — это просто grid-контейнер без
   карточного оформления в dark, на light давал ненужную peach-pink
   плашку вокруг всего блока. */
:root[data-theme="light"] .tor-tag {
  background: rgba(107,70,193,.10) !important;
  color: #6b46c1 !important;
  border-color: rgba(107,70,193,.25) !important;
}
:root[data-theme="light"] .tor-h2 { color: var(--text); }
:root[data-theme="light"] .tor-sub { color: var(--muted-2); }
/* Pricing */
:root[data-theme="light"] .pricing-section {
  background: radial-gradient(ellipse 80% 80% at 50% 0%, rgba(255,45,58,.10), transparent 70%),
              linear-gradient(180deg, #fcfcff, #f5f6fa) !important;
}
:root[data-theme="light"] .price-card,
:root[data-theme="light"] .price-card-best,
:root[data-theme="light"] .price-card.price-hot {
  background: linear-gradient(180deg, #ffffff, #f8f9fc) !important;
  border-color: var(--line) !important;
  color: var(--text);
  box-shadow: 0 8px 24px rgba(20,22,40,.06);
}
:root[data-theme="light"] .price-card-best,
:root[data-theme="light"] .price-card.price-hot {
  background: linear-gradient(180deg, #fff, #fff7f8) !important;
  border-color: rgba(255,45,58,.30) !important;
  box-shadow: 0 12px 32px rgba(255,45,58,.10);
}
/* Apps + start-card — тёмные градиенты на белом фоне выглядят инопланетно.
   Делаем чистыми белыми с лёгкой тенью. */
:root[data-theme="light"] .app-card,
:root[data-theme="light"] .start-card {
  background: linear-gradient(180deg, #ffffff, #f8f9fc) !important;
  border-color: var(--line) !important;
  color: var(--text);
  box-shadow: 0 8px 24px rgba(20,22,40,.06) !important;
}
:root[data-theme="light"] .start-card {
  background: radial-gradient(ellipse 80% 80% at 50% 0%, rgba(255,45,58,.08), transparent 70%),
              linear-gradient(180deg, #fff, #fbfbfd) !important;
  border-color: rgba(255,45,58,.20) !important;
}
:root[data-theme="light"] .start-card h2 { color: var(--text); }
:root[data-theme="light"] .start-card p  { color: var(--muted-2); }
:root[data-theme="light"] .price-badge {
  background: linear-gradient(135deg, var(--accent), var(--accent-deep)) !important;
  color: #fff !important;
  border-color: transparent !important;
}
:root[data-theme="light"] .price-pill {
  background: rgba(20,22,40,.05) !important;
  color: var(--muted-2) !important;
}
:root[data-theme="light"] .price-period,
:root[data-theme="light"] .price-stars-line { color: var(--muted-2); }
/* Secondary price-btn (тарифы 30/180 дней) — subtle ghost button.
   Исключаем primary (.price-btn-primary, .checkout-btn, .price-card-best
   .price-btn) — у них brand red gradient, hover вносит только shadow. */
:root[data-theme="light"] .price-btn:not(.price-btn-primary):not(.checkout-btn) {
  background: var(--surface-1) !important;
  color: var(--text) !important;
  border-color: var(--line-strong) !important;
}
:root[data-theme="light"] .price-card:not(.price-card-best) .price-btn:hover {
  background: var(--surface-2) !important;
  border-color: var(--input-focus-border) !important;
  color: var(--accent-on-bg) !important;
}
:root[data-theme="light"] .price-card-best .price-btn,
:root[data-theme="light"] .price-btn-primary,
:root[data-theme="light"] .checkout-btn {
  background: var(--gradient-accent) !important;
  color: #fff !important; border: none !important;
  box-shadow: 0 6px 20px var(--accent-glow);
}
:root[data-theme="light"] .price-card-best .price-btn:hover,
:root[data-theme="light"] .price-btn-primary:hover,
:root[data-theme="light"] .checkout-btn:hover {
  background: var(--gradient-accent) !important;
  color: #fff !important;
  box-shadow: 0 10px 28px var(--accent-glow) !important;
  transform: translateY(-1px);
}
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) .price-btn:not(.price-btn-primary):not(.checkout-btn) {
    background: var(--surface-1) !important;
    color: var(--text) !important;
    border-color: var(--line-strong) !important;
  }
:root:not([data-theme="dark"]) .price-card:not(.price-card-best) .price-btn:hover {
    background: var(--surface-2) !important;
    border-color: var(--input-focus-border) !important;
    color: var(--accent-on-bg) !important;
  }
:root:not([data-theme="dark"]) .price-card-best .price-btn,
  :root:not([data-theme="dark"]) .price-btn-primary,
  :root:not([data-theme="dark"]) .checkout-btn {
    background: var(--gradient-accent) !important;
    color: #fff !important; border: none !important;
    box-shadow: 0 6px 20px var(--accent-glow);
  }
:root:not([data-theme="dark"]) .price-card-best .price-btn:hover,
  :root:not([data-theme="dark"]) .price-btn-primary:hover,
  :root:not([data-theme="dark"]) .checkout-btn:hover {
    background: var(--gradient-accent) !important;
    color: #fff !important;
    box-shadow: 0 10px 28px var(--accent-glow) !important;
    transform: translateY(-1px);
  }
}
/* DELETED duplicate :root[data-theme="light"] .price-badge — был идентичен
   правилу на 785 (с extra border-color:transparent). */
/* Footer */
:root[data-theme="light"] .footer {
  background: linear-gradient(180deg, #fff, #f3f4f8) !important;
  border-top: 1px solid var(--line) !important;
  color: var(--muted-2);
}
:root[data-theme="light"] .footer a { color: var(--muted-2); }
:root[data-theme="light"] .footer a:hover { color: var(--accent); }
/* Иконки фич — оставляем цветные тинты, но менее ярко */
:root[data-theme="light"] .icon-tunnel,
:root[data-theme="light"] .icon-shield,
:root[data-theme="light"] .icon-zap {
  /* их градиенты с rgba уже контрастируют — не трогаем background, но смягчаем тени */
  box-shadow: 0 6px 16px rgba(20,22,40,.06) !important;
}
/* Speedometers */
:root[data-theme="light"] .speedo-card,
:root[data-theme="light"] .speedo-card-big {
  background: linear-gradient(180deg, #ffffff, #f7f8fc) !important;
  border-color: var(--line) !important;
}
:root[data-theme="light"] .speedo-label,
:root[data-theme="light"] .speedo-foot { color: var(--muted-2) !important; }
/* DELETED: дубликат правила .speedo-value с background:linear-gradient !important
   перебивал основной override выше (Gradient text fix block) → текст
   рендерился на тёмно-красной плашке. Источник истины — единый блок выше. */
/* CTA-buttons (брендовые градиенты) — оставляем красным в обеих темах */
:root[data-theme="light"] .cta { color: #fff !important; }
/* ── Mini-app surfaces ─────────────────────────────────────── */
:root[data-theme="light"] .topbar {
  background: rgba(255,255,255,.94) !important;
  border-bottom: 1px solid var(--line) !important;
}
:root[data-theme="light"] .brand h1 { color: var(--text); }
/* Brand "VPN" — на dark gradient text красный→оранжевый, на light gradient невидим
   из-за wb (webkit-text-fill-color: transparent + background-clip: text). Делаем
   solid accent + явный text-fill-color, иначе transparent-fill срабатывает первым. */
:root[data-theme="light"] .brand h1 span {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: var(--accent-on-bg) !important;
  -webkit-text-fill-color: var(--accent-on-bg) !important;
}
:root[data-theme="light"] .brand em { color: var(--accent-on-bg); }
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) .brand h1 { color: var(--text); }
:root:not([data-theme="dark"]) .brand h1 span {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    color: var(--accent-on-bg) !important;
    -webkit-text-fill-color: var(--accent-on-bg) !important;
  }
:root:not([data-theme="dark"]) .brand em { color: var(--accent-on-bg); }
}
/* Status-pill в топбаре (● «подписка активна» / «trial» / «не активна»).
   Default + модификаторы. Без отдельных правил для .ok/.warn/.err мой
   light override `.status { color: muted-2 }` (specificity 0,1,1,1)
   перебивал `.status.ok` (0,0,2,0) → пилюля рисовалась чёрной вместо
   зелёной. Цвета подобраны для контраста на белом фоне. */
:root[data-theme="light"] .status:not(.ok):not(.warn):not(.err) { color: var(--muted-2); }
:root[data-theme="light"] .status.ok   { color: #1a8c4a; }
:root[data-theme="light"] .status.warn { color: #c84a05; }
:root[data-theme="light"] .status.err  { color: var(--accent-on-bg); }
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) .status:not(.ok):not(.warn):not(.err) { color: var(--muted-2); }
:root:not([data-theme="dark"]) .status.ok   { color: #1a8c4a; }
:root:not([data-theme="dark"]) .status.warn { color: #c84a05; }
:root:not([data-theme="dark"]) .status.err  { color: var(--accent-on-bg); }
}
:root[data-theme="light"] .icon-btn {
  background: var(--surface-1) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}
:root[data-theme="light"] .tabbar {
  background: rgba(255,255,255,.94) !important;
  border-top: 1px solid var(--line) !important;
}
:root[data-theme="light"] .tab { color: var(--muted-2); }
:root[data-theme="light"] .tab.active { color: var(--accent); }
:root[data-theme="light"] .acc-box,
:root[data-theme="light"] .sub-hero,
:root[data-theme="light"] .acc-summary-box {
  background: linear-gradient(180deg, #ffffff, #f8f9fc) !important;
  border-color: var(--line) !important;
  box-shadow: 0 4px 12px rgba(20,22,40,.04);
}
:root[data-theme="light"] .acc-uname { color: var(--text); }
:root[data-theme="light"] .acc-uemail,
:root[data-theme="light"] .acc-section-h,
:root[data-theme="light"] .acc-stat-lbl { color: var(--muted-2) !important; }
/* DELETED legacy overrides (Phase 0):
   • .acc-stat { background: rgba(20,22,40,.025) } — конфликтовал с
     более новым white+colored-border тиле (Phase 5) → серая плашка
   • .acc-stat-val { background: linear-gradient(...text → accent) } —
     re-применял тёмно-красный gradient ПОВЕРХ моего sane override →
     чёрно-красный прямоугольник за «1 дн./167 мс».
   Источник истины — единый Gradient text fix block выше. */
:root[data-theme="light"] .acc-input {
  background: var(--surface-1) !important;
  border-color: var(--line-strong) !important;
  color: var(--text) !important;
}
:root[data-theme="light"] .acc-input:focus { border-color: var(--accent) !important; }
:root[data-theme="light"] .acc-input::placeholder { color: var(--dim) !important; }
:root[data-theme="light"] .acc-btn {
  background: var(--surface-1) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}
:root[data-theme="light"] .acc-btn:hover {
  background: var(--surface-2) !important;
  border-color: var(--line-strong) !important;
}
:root[data-theme="light"] .acc-btn.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-deep)) !important;
  border-color: transparent !important; color: #fff !important;
}
:root[data-theme="light"] .acc-btn.danger {
  color: var(--accent-deep) !important;
  border-color: rgba(255,45,58,.30) !important;
}
:root[data-theme="light"] .acc-section .acc-row,
:root[data-theme="light"] .acc-section .acc-row:first-of-type { border-top-color: var(--line) !important; }
:root[data-theme="light"] .acc-anon-info {
  background: linear-gradient(135deg, rgba(150,100,220,.08), rgba(255,255,255,.6)) !important;
  border-color: rgba(150,100,220,.30) !important;
}
:root[data-theme="light"] .acc-anon-info .acc-section-h { color: #6b46c1 !important; }
/* Sub-hero (гл. карточка подписки) — в свете светлый c красным glow */
:root[data-theme="light"] .sub-hero {
  background: linear-gradient(135deg, #fff, #fff7f8) !important;
}
:root[data-theme="light"] .sub-badge {
  background: rgba(46,204,113,.12) !important;
  color: #1a8c4a !important;
}
:root[data-theme="light"] .sub-progress { background: rgba(20,22,40,.06) !important; }
/* Server / proto cards в /perf */
:root[data-theme="light"] .srv-card,
:root[data-theme="light"] .proto-card,
:root[data-theme="light"] .speedo-card {
  background: linear-gradient(180deg, #ffffff, #f8f9fc) !important;
  border-color: var(--line) !important;
}
/* Pay modal на /account.html */
/* Support chat */
:root[data-theme="light"] #screen-support {
  background: linear-gradient(180deg, #f6f7fb, #ffffff) !important;
}
/* Toast / notifications */
:root[data-theme="light"] #toast,
:root[data-theme="light"] #__site_toast {
  background: rgba(20,22,40,.92) !important;
  color: #fff !important;
}
/* Admin mini-app */
:root[data-theme="light"] .adm-card,
:root[data-theme="light"] .adm-srv,
:root[data-theme="light"] .adm-thread {
  background: linear-gradient(180deg, #ffffff, #f8f9fc) !important;
  border-color: var(--line) !important;
}
:root[data-theme="light"] .adm-thread:hover {
  background: linear-gradient(180deg, #fafbff, #f3f4f9) !important;
  border-color: var(--line-strong) !important;
}
:root[data-theme="light"] .adm-card-lbl,
:root[data-theme="light"] .adm-srv-meta,
:root[data-theme="light"] .adm-thread-preview,
:root[data-theme="light"] .adm-thread-time,
:root[data-theme="light"] .adm-note { color: var(--muted-2) !important; }
:root[data-theme="light"] .adm-card-val,
:root[data-theme="light"] .adm-srv-name,
:root[data-theme="light"] .adm-thread-name { color: var(--text) !important; }
:root[data-theme="light"] .adm-srv-tag {
  background: var(--surface-2) !important;
  color: var(--muted-2) !important;
}
/* Login / forbidden screens */
:root[data-theme="light"] .adm-forbidden h2 { color: var(--text) !important; }
:root[data-theme="light"] .adm-forbidden p  { color: var(--muted-2) !important; }
:root[data-theme="light"] #adm-login-err   { color: #c5424a !important; }
/* ── Topnav: theme-toggle + login сгруппированы справа ──────
   Оригинальный layout space-between (brand слева, links по центру,
   actions-блок справа). Раньше я воткнул theme-toggle отдельным flex-
   item'ом → 4 элемента распределились криво. Сейчас .topnav-actions
   обнимает theme + login и они стоят впритык через gap. */
.topnav-actions {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}
/* ── Theme toggle button — общие стили ─────────────────────── */
.theme-toggle {
  appearance: none; cursor: pointer;
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  color: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s, color .15s, transform .15s;
  flex-shrink: 0;
}
.theme-toggle:hover {
  background: var(--surface-2);
  border-color: var(--line-strong);
  transform: translateY(-1px);
}
.theme-toggle:active { transform: translateY(0); }
.theme-toggle .ic-sun, .theme-toggle .ic-moon { display: none; }
:root[data-theme="dark"]  .theme-toggle .ic-sun  { display: block; }
:root[data-theme="light"] .theme-toggle .ic-moon { display: block; }
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) .theme-toggle .ic-moon { display: block; }
:root:not([data-theme="dark"]) .theme-toggle .ic-sun  { display: none; }
:root[data-theme="dark"]       .theme-toggle .ic-sun  { display: block; }
:root[data-theme="dark"]       .theme-toggle .ic-moon { display: none; }
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .theme-toggle .ic-sun  { display: block; }
:root:not([data-theme="light"]) .theme-toggle .ic-moon { display: none; }
}
/* ─────────────────────────────────────────────────────────
   AUTO-GENERATED @media variant из всех :root[data-theme="light"]
   правил выше. Срабатывает в system-mode + OS=light, когда
   юзер не выбирал тему явно. До этого ~134 selectorа были
   only-explicit-light → system-mode видел dark стили.
   ───────────────────────────────────────────────────────── */
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) {  
    --bg-0:      #f3f4f8;
    --bg-1:      #ffffff;
    --bg-2:      #fbfbfd;
    --bg-elev:   rgba(255,255,255,.94);
    --surface-1: rgba(20,22,40,.04);
    --surface-2: rgba(20,22,40,.07);
    --line:      rgba(20,22,40,.12);
    --line-strong: rgba(20,22,40,.20);
    --line-subtle: rgba(20,22,40,.10);
    --text:      #14141a;
    --muted:     #4a4a52;
    --muted-2:   #2c2c33;
    --dim:       #6c6c75;
  
    /* Phase 1 — elevation/shadow/gradient в light: глубина — через shadow */
    --elev-0:    #f3f4f8;
    --elev-1:    #ffffff;
    --elev-2:    #fbfbfd;
    --shadow-sm: 0 1px 2px rgba(20,22,40,.04), 0 1px 0 rgba(20,22,40,.02);
    --shadow-md: 0 4px 12px rgba(20,22,40,.06), 0 2px 4px rgba(20,22,40,.04);
    --shadow-lg: 0 12px 32px rgba(20,22,40,.10), 0 4px 8px rgba(20,22,40,.05);
    --shadow-glow: 0 0 18px var(--accent-glow-soft);
  
    /* Accent на белом — слегка темнее красный, чтобы не «жёг» */
    --accent-on-bg:     #d92732;
    --accent-glow-soft: rgba(217,39,50,.16);
  
    --gradient-card:   linear-gradient(180deg, #ffffff, #f8f9fc);
    --gradient-hero:   linear-gradient(135deg, #ffffff 0%, #fbfbfd 50%, #f0f1f7 100%);
    --gradient-accent: linear-gradient(135deg, var(--accent-on-bg), #a8131e);
  
    /* Logo — без яркого красного glow на белом (выглядит как кровь),
       заменяем на тонкую elevation-тень. */
    --logo-glow:           drop-shadow(0 2px 6px rgba(20,22,40,.08));
    --logo-glow-pulse-min: drop-shadow(0 1px 4px rgba(20,22,40,.06));
    --logo-glow-pulse-max: drop-shadow(0 3px 8px rgba(20,22,40,.10));
  
    /* Phase 2 chrome (light) — topbar/tabbar СОЛИДНЫ (без fade-to-transparent),
       иначе контент скроллится сквозь полупрозрачную шапку и читать тяжело */
    --topbar-bg:       rgba(255,255,255,.96);
    --topbar-border:   1px solid var(--line);
    --tabbar-bg:       rgba(255,255,255,.96);
    --tabbar-border:   1px solid var(--line);
    --sidebar-bg:      var(--elev-2);
    --sidebar-border:  1px solid var(--line);
    --splash-bg:       linear-gradient(180deg, #ffffff 0%, #f3f4f8 100%);
    --logo-box-shadow: 0 0 0 1px rgba(20,22,40,.06), var(--shadow-sm);
    --site-btn-bg:     rgba(20,22,40,.04);
    --site-btn-border: rgba(20,22,40,.12);
  
    --tab-active-fg:   var(--accent-on-bg);
    --tab-active-bg:   linear-gradient(135deg, rgba(217,39,50,.12), rgba(217,39,50,.04));
    --tab-hover-bg:    rgba(20,22,40,.05);
  
    --key-value-bg:     #f6f8fc;
    /* Border на key-value создавал «двойную рамку» в десктоп key-card:
       внешняя card-border + внутренняя key-value-border = два concentric
       прямоугольника с разными радиусами (10px vs r-md), визуально ломают
       композицию. Оставляем только bg-fill для визуального code-block'а. */
    --key-value-border: transparent;
  
    --yellow: #e8650a;
  
    /* Phase 4 (light): focus-border насыщенный (тонкий border плохо виден),
       danger fg — насыщенный darker red (#b8000c), который читаем на белом. */
    --input-focus-border: var(--accent-on-bg);
    --btn-danger-fg:      #b8000c;
    --btn-danger-bg-hover:    rgba(217,39,50,.08);
    --btn-danger-border:      rgba(217,39,50,.35);
    --btn-danger-border-hover: rgba(217,39,50,.55);
    --link-action-color:  var(--accent-on-bg);
  
    /* Alias-токены: miniapp-style.css объявляет --surf-1/--surf-2 c белыми
       полупрозрачными rgba (для тёмной темы). На light они должны
       соответствовать --surface-1/--surface-2 (dark-ink на белом). Без
       этого все btn-copy/icon-btn/key-tag etc. остаются «белый на белом». */
    --surf-1: var(--surface-1);
    --surf-2: var(--surface-2);
  
    color-scheme: light;
  
  }
:root:not([data-theme="dark"]) body.theme-tor {  
    --bg-0:   #f7f4fb;
    --bg-1:   #ffffff;
    --bg-2:   #fcf9fe;
    --accent:      #7e2eb8;
    --accent-deep: #4a1e6e;
    --accent-soft: rgba(126,46,184,.10);
    --accent-glow: rgba(126,46,184,.20);
    --accent-on-bg:     #7e2eb8;
    --accent-glow-soft: rgba(126,46,184,.14);
    --orange:           #c64a8a;
    --violet:           #a83d9c;
    --gradient-accent:  linear-gradient(135deg, #7e2eb8, #4a1e6e);
    --gradient-hero:    linear-gradient(135deg, #ffffff 0%, #fcf9fe 50%, #f7f4fb 100%);
    --input-focus-border: #7e2eb8;
    --tab-active-fg:    #7e2eb8;
    --tab-active-bg:    linear-gradient(135deg, rgba(126,46,184,.12), rgba(126,46,184,.04));
    --link-action-color: #7e2eb8;
    --sidebar-bg:       #fcf9fe;
    --splash-bg:        linear-gradient(180deg, #ffffff, #f7f4fb);
  
  }
:root:not([data-theme="dark"]) body,
:root:not([data-theme="dark"]) html {   background: var(--bg-0) !important; color: var(--text); 
  }
:root:not([data-theme="dark"]) #__splash,
:root:not([data-theme="dark"]) .auth-gate,
:root:not([data-theme="dark"]) .adm-forbidden {  
    background: linear-gradient(180deg, #f3f4f8, #ffffff) !important;
    color: var(--text) !important;
  
  }
:root:not([data-theme="dark"]) .hl,
:root:not([data-theme="dark"]) .section-h2 .hl {
    background: linear-gradient(120deg, var(--text) 0%, var(--accent) 50%, var(--accent-2) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;

  }
:root:not([data-theme="dark"]) .speedo-value,
:root:not([data-theme="dark"]) .pm-success-h,
:root:not([data-theme="dark"]) .metric-value {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: var(--text) !important;
    color: var(--text) !important;

  }
:root:not([data-theme="dark"]) .speedo-val-big {
    background: linear-gradient(120deg, var(--text) 30%, var(--accent) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;

  }
:root:not([data-theme="dark"]) .acc-stat-val,
:root:not([data-theme="dark"]) .sub-hero-time .big {  
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: var(--accent-on-bg) !important;
    color: var(--accent-on-bg) !important;
  
  }
:root:not([data-theme="dark"]) .speedo-value small,
:root:not([data-theme="dark"]) .speedo-val-big small,
:root:not([data-theme="dark"]) .acc-stat-val small {  
    -webkit-text-fill-color: var(--muted) !important;
    color: var(--muted) !important;
  
  }
:root:not([data-theme="dark"]) .auth-title {  
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: var(--text) !important;
    color: var(--text) !important;
  
  }
:root:not([data-theme="dark"]) .acc-stat {  
    background: #ffffff !important;
    border-color: rgba(217,39,50,.30) !important;
    box-shadow: var(--shadow-sm);
  
  }
:root:not([data-theme="dark"]) .acc-stat:nth-child(2) {  
    background: #ffffff !important;
    border-color: rgba(45,150,211,.30) !important;
  
  }
:root:not([data-theme="dark"]) .acc-stat:nth-child(2):hover {  
    border-color: rgba(45,150,211,.55) !important;
  
  }
:root:not([data-theme="dark"]) .acc-stat-icon {  
    background: transparent !important;
    box-shadow: none !important;
    color: var(--accent-on-bg) !important;
  
  }
:root:not([data-theme="dark"]) .acc-stat:nth-child(2) .acc-stat-icon {  
    background: transparent !important;
    box-shadow: none !important;
    color: #2196d3 !important;
  
  }
:root:not([data-theme="dark"]) .key-body {  
    background: #f6f8fc !important;
    border-color: var(--line-strong) !important;
  
  }
:root:not([data-theme="dark"]) .sub-link-card {  
    background: #ffffff !important;
    border-color: var(--line-strong) !important;
    box-shadow: var(--shadow-sm);
  
  }
:root:not([data-theme="dark"]) .sub-badge.active {  
    background: rgba(46,204,113,.16) !important;
    color: #1a8c4a !important;
    border-color: rgba(46,204,113,.45) !important;
  
  }
:root:not([data-theme="dark"]) .sub-badge.trial {  
    background: rgba(232,101,10,.12) !important;
    color: #c84a05 !important;
    border-color: rgba(232,101,10,.45) !important;
  
  }
:root:not([data-theme="dark"]) .sub-badge.none {  
    background: rgba(217,39,50,.10) !important;
    color: var(--accent-on-bg) !important;
    border-color: rgba(217,39,50,.40) !important;
  
  }
:root:not([data-theme="dark"]) .speedo-svg path[stroke^="rgba(255,255,255"] {  
    stroke: rgba(20,22,40,.18) !important;
  
  }
:root:not([data-theme="dark"]) .speedo-svg [id*="speedo-needle"] line,
:root:not([data-theme="dark"]) .speedo-svg line[id*="big-needle"] {  
    stroke: var(--muted-2) !important;
  
  }
:root:not([data-theme="dark"]) .speedo-svg circle[fill="#fff"] {  
    fill: var(--muted-2) !important;
  
  }
:root:not([data-theme="dark"]) .bg,
:root:not([data-theme="dark"]) body {   background: linear-gradient(180deg, #f6f6fa 0%, #eef0f6 50%, #f6f6fa 100%) !important; 
  }
:root:not([data-theme="dark"]) .bg-aurora {  
    background: radial-gradient(circle at 30% 0%, rgba(255,45,58,.10) 0%, transparent 55%),
                radial-gradient(circle at 80% 30%, rgba(107,70,193,.08) 0%, transparent 50%),
                radial-gradient(circle at 50% 100%, rgba(45,211,255,.08) 0%, transparent 60%) !important;
  
  }
:root:not([data-theme="dark"]) .bg-blob {  
    opacity: .22 !important;
    mix-blend-mode: multiply;
  
  }
:root:not([data-theme="dark"]) .bg-grain {  
    opacity: .04 !important;
  
  }
:root:not([data-theme="dark"]) .bg-grain {  
    background-image: radial-gradient(rgba(20,22,40,.025) 1px, transparent 1px) !important;
  
  }
:root:not([data-theme="dark"]) .topnav {  
    background: rgba(255,255,255,.85) !important;
    border-bottom: 1px solid var(--line) !important;
    box-shadow: 0 1px 0 rgba(20,22,40,.03);
  
  }
:root:not([data-theme="dark"]) .topnav-links a {   color: var(--muted-2); 
  }
:root:not([data-theme="dark"]) .topnav-links a:hover {   color: var(--accent); 
  }
:root:not([data-theme="dark"]) .glass-card,
:root:not([data-theme="dark"]) .feature-card,
:root:not([data-theme="dark"]) .step-card {  
    background: linear-gradient(180deg, #ffffff, #f8f8fb) !important;
    border-color: var(--line) !important;
    color: var(--text);
    box-shadow: 0 6px 18px rgba(20,22,40,.05), 0 1px 0 rgba(255,255,255,.6) inset;
  
  }
:root:not([data-theme="dark"]) .feature-card .feature-text,
:root:not([data-theme="dark"]) .step-card .step-text {   color: var(--muted-2); 
  }
:root:not([data-theme="dark"]) .section-h2,
:root:not([data-theme="dark"]) .hero-h1,
:root:not([data-theme="dark"]) .feature-h3,
:root:not([data-theme="dark"]) .step-h3,
:root:not([data-theme="dark"]) h1,
:root:not([data-theme="dark"]) h2,
:root:not([data-theme="dark"]) h3 {   color: var(--text); 
  }
:root:not([data-theme="dark"]) .hero-sub,
:root:not([data-theme="dark"]) .section-sub {   color: var(--muted-2); 
  }
:root:not([data-theme="dark"]) .hero-tag {  
    background: rgba(255,45,58,.06) !important;
    border-color: rgba(255,45,58,.20) !important;
    color: var(--accent) !important;
  
  }
:root:not([data-theme="dark"]) .hero-glass-wrap {   /* hero pulse-блок */ 
  }
:root:not([data-theme="dark"]) .hero-pulse {  
    background: radial-gradient(circle at center, rgba(255,45,58,.22) 0%, rgba(140,50,180,.12) 40%, transparent 70%) !important;
  
  }
:root:not([data-theme="dark"]) .tor-tag {  
    background: rgba(107,70,193,.10) !important;
    color: #6b46c1 !important;
    border-color: rgba(107,70,193,.25) !important;
  
  }
:root:not([data-theme="dark"]) .tor-h2 {   color: var(--text); 
  }
:root:not([data-theme="dark"]) .tor-sub {   color: var(--muted-2); 
  }
:root:not([data-theme="dark"]) .pricing-section {  
    background: radial-gradient(ellipse 80% 80% at 50% 0%, rgba(255,45,58,.10), transparent 70%),
                linear-gradient(180deg, #fcfcff, #f5f6fa) !important;
  
  }
:root:not([data-theme="dark"]) .price-card,
:root:not([data-theme="dark"]) .price-card-best,
:root:not([data-theme="dark"]) .price-card.price-hot {  
    background: linear-gradient(180deg, #ffffff, #f8f9fc) !important;
    border-color: var(--line) !important;
    color: var(--text);
    box-shadow: 0 8px 24px rgba(20,22,40,.06);
  
  }
:root:not([data-theme="dark"]) .price-card-best,
:root:not([data-theme="dark"]) .price-card.price-hot {  
    background: linear-gradient(180deg, #fff, #fff7f8) !important;
    border-color: rgba(255,45,58,.30) !important;
    box-shadow: 0 12px 32px rgba(255,45,58,.10);
  
  }
:root:not([data-theme="dark"]) .app-card,
:root:not([data-theme="dark"]) .start-card {  
    background: linear-gradient(180deg, #ffffff, #f8f9fc) !important;
    border-color: var(--line) !important;
    color: var(--text);
    box-shadow: 0 8px 24px rgba(20,22,40,.06) !important;
  
  }
:root:not([data-theme="dark"]) .start-card {  
    background: radial-gradient(ellipse 80% 80% at 50% 0%, rgba(255,45,58,.08), transparent 70%),
                linear-gradient(180deg, #fff, #fbfbfd) !important;
    border-color: rgba(255,45,58,.20) !important;
  
  }
:root:not([data-theme="dark"]) .start-card h2 {   color: var(--text); 
  }
:root:not([data-theme="dark"]) .start-card p {   color: var(--muted-2); 
  }
:root:not([data-theme="dark"]) .price-badge {  
    background: linear-gradient(135deg, var(--accent), var(--accent-deep)) !important;
    color: #fff !important;
    border-color: transparent !important;
  
  }
:root:not([data-theme="dark"]) .price-pill {  
    background: rgba(20,22,40,.05) !important;
    color: var(--muted-2) !important;
  
  }
:root:not([data-theme="dark"]) .price-period,
:root:not([data-theme="dark"]) .price-stars-line {   color: var(--muted-2); 
  }
:root:not([data-theme="dark"]) .price-btn:not(.price-btn-primary):not(.checkout-btn) {  
    background: var(--surface-1) !important;
    color: var(--text) !important;
    border-color: var(--line-strong) !important;
  
  }
:root:not([data-theme="dark"]) .price-card:not(.price-card-best) .price-btn:hover {  
    background: var(--surface-2) !important;
    border-color: var(--input-focus-border) !important;
    color: var(--accent-on-bg) !important;
  
  }
:root:not([data-theme="dark"]) .price-card-best .price-btn,
:root:not([data-theme="dark"]) .price-btn-primary,
:root:not([data-theme="dark"]) .checkout-btn {  
    background: var(--gradient-accent) !important;
    color: #fff !important; border: none !important;
    box-shadow: 0 6px 20px var(--accent-glow);
  
  }
:root:not([data-theme="dark"]) .price-card-best .price-btn:hover,
:root:not([data-theme="dark"]) .price-btn-primary:hover,
:root:not([data-theme="dark"]) .checkout-btn:hover {  
    background: var(--gradient-accent) !important;
    color: #fff !important;
    box-shadow: 0 10px 28px var(--accent-glow) !important;
    transform: translateY(-1px);
  
  }
:root:not([data-theme="dark"]) .price-badge {  
    background: linear-gradient(135deg, var(--accent), var(--accent-deep)) !important;
    color: #fff !important;
  
  }
:root:not([data-theme="dark"]) .footer {  
    background: linear-gradient(180deg, #fff, #f3f4f8) !important;
    border-top: 1px solid var(--line) !important;
    color: var(--muted-2);
  
  }
:root:not([data-theme="dark"]) .footer a {   color: var(--muted-2); 
  }
:root:not([data-theme="dark"]) .footer a:hover {   color: var(--accent); 
  }
:root:not([data-theme="dark"]) .icon-tunnel,
:root:not([data-theme="dark"]) .icon-shield,
:root:not([data-theme="dark"]) .icon-zap {  
    /* их градиенты с rgba уже контрастируют — не трогаем background, но смягчаем тени */
    box-shadow: 0 6px 16px rgba(20,22,40,.06) !important;
  
  }
:root:not([data-theme="dark"]) .speedo-card,
:root:not([data-theme="dark"]) .speedo-card-big {  
    background: linear-gradient(180deg, #ffffff, #f7f8fc) !important;
    border-color: var(--line) !important;
  
  }
:root:not([data-theme="dark"]) .speedo-label,
:root:not([data-theme="dark"]) .speedo-foot {   color: var(--muted-2) !important; 
  }
:root:not([data-theme="dark"]) .cta {   color: #fff !important; 
  }
:root:not([data-theme="dark"]) .topbar {  
    background: rgba(255,255,255,.94) !important;
    border-bottom: 1px solid var(--line) !important;
  
  }
:root:not([data-theme="dark"]) .brand h1 {   color: var(--text); 
  }
:root:not([data-theme="dark"]) .brand h1 span {  
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    color: var(--accent-on-bg) !important;
    -webkit-text-fill-color: var(--accent-on-bg) !important;
  
  }
:root:not([data-theme="dark"]) .brand em {   color: var(--accent-on-bg); 
  }
:root:not([data-theme="dark"]) .status:not(.ok):not(.warn):not(.err) {   color: var(--muted-2); 
  }
:root:not([data-theme="dark"]) .status.ok {   color: #1a8c4a; 
  }
:root:not([data-theme="dark"]) .status.warn {   color: #c84a05; 
  }
:root:not([data-theme="dark"]) .status.err {   color: var(--accent-on-bg); 
  }
:root:not([data-theme="dark"]) .icon-btn {  
    background: var(--surface-1) !important;
    border-color: var(--line) !important;
    color: var(--text) !important;
  
  }
:root:not([data-theme="dark"]) .tabbar {  
    background: rgba(255,255,255,.94) !important;
    border-top: 1px solid var(--line) !important;
  
  }
:root:not([data-theme="dark"]) .tab {   color: var(--muted-2); 
  }
:root:not([data-theme="dark"]) .tab.active {   color: var(--accent); 
  }
:root:not([data-theme="dark"]) .acc-box,
:root:not([data-theme="dark"]) .sub-hero,
:root:not([data-theme="dark"]) .acc-summary-box {  
    background: linear-gradient(180deg, #ffffff, #f8f9fc) !important;
    border-color: var(--line) !important;
    box-shadow: 0 4px 12px rgba(20,22,40,.04);
  
  }
:root:not([data-theme="dark"]) .acc-uname {   color: var(--text); 
  }
:root:not([data-theme="dark"]) .acc-uemail,
:root:not([data-theme="dark"]) .acc-section-h,
:root:not([data-theme="dark"]) .acc-stat-lbl {   color: var(--muted-2) !important; 
  }
:root:not([data-theme="dark"]) .acc-input {  
    background: var(--surface-1) !important;
    border-color: var(--line-strong) !important;
    color: var(--text) !important;
  
  }
:root:not([data-theme="dark"]) .acc-input:focus {   border-color: var(--accent) !important; 
  }
:root:not([data-theme="dark"]) .acc-input::placeholder {   color: var(--dim) !important; 
  }
:root:not([data-theme="dark"]) .acc-btn {  
    background: var(--surface-1) !important;
    border-color: var(--line) !important;
    color: var(--text) !important;
  
  }
:root:not([data-theme="dark"]) .acc-btn:hover {  
    background: var(--surface-2) !important;
    border-color: var(--line-strong) !important;
  
  }
:root:not([data-theme="dark"]) .acc-btn.primary {  
    background: linear-gradient(135deg, var(--accent), var(--accent-deep)) !important;
    border-color: transparent !important; color: #fff !important;
  
  }
:root:not([data-theme="dark"]) .acc-btn.danger {  
    color: var(--accent-deep) !important;
    border-color: rgba(255,45,58,.30) !important;
  
  }
:root:not([data-theme="dark"]) .acc-section .acc-row,
:root:not([data-theme="dark"]) .acc-section .acc-row:first-of-type {   border-top-color: var(--line) !important; 
  }
:root:not([data-theme="dark"]) .acc-anon-info {  
    background: linear-gradient(135deg, rgba(150,100,220,.08), rgba(255,255,255,.6)) !important;
    border-color: rgba(150,100,220,.30) !important;
  
  }
:root:not([data-theme="dark"]) .acc-anon-info .acc-section-h {   color: #6b46c1 !important; 
  }
:root:not([data-theme="dark"]) .sub-hero {  
    background: linear-gradient(135deg, #fff, #fff7f8) !important;
  
  }
:root:not([data-theme="dark"]) .sub-badge {  
    background: rgba(46,204,113,.12) !important;
    color: #1a8c4a !important;
  
  }
:root:not([data-theme="dark"]) .sub-progress {   background: rgba(20,22,40,.06) !important; 
  }
:root:not([data-theme="dark"]) .srv-card,
:root:not([data-theme="dark"]) .proto-card,
:root:not([data-theme="dark"]) .speedo-card {  
    background: linear-gradient(180deg, #ffffff, #f8f9fc) !important;
    border-color: var(--line) !important;
  
  }
:root:not([data-theme="dark"]) #screen-support {  
    background: linear-gradient(180deg, #f6f7fb, #ffffff) !important;
  
  }
:root:not([data-theme="dark"]) #toast,
:root:not([data-theme="dark"]) #__site_toast {  
    background: rgba(20,22,40,.92) !important;
    color: #fff !important;
  
  }
:root:not([data-theme="dark"]) .adm-card,
:root:not([data-theme="dark"]) .adm-srv,
:root:not([data-theme="dark"]) .adm-thread {  
    background: linear-gradient(180deg, #ffffff, #f8f9fc) !important;
    border-color: var(--line) !important;
  
  }
:root:not([data-theme="dark"]) .adm-thread:hover {  
    background: linear-gradient(180deg, #fafbff, #f3f4f9) !important;
    border-color: var(--line-strong) !important;
  
  }
:root:not([data-theme="dark"]) .adm-card-lbl,
:root:not([data-theme="dark"]) .adm-srv-meta,
:root:not([data-theme="dark"]) .adm-thread-preview,
:root:not([data-theme="dark"]) .adm-thread-time,
:root:not([data-theme="dark"]) .adm-note {   color: var(--muted-2) !important; 
  }
:root:not([data-theme="dark"]) .adm-card-val,
:root:not([data-theme="dark"]) .adm-srv-name,
:root:not([data-theme="dark"]) .adm-thread-name {   color: var(--text) !important; 
  }
:root:not([data-theme="dark"]) .adm-srv-tag {  
    background: var(--surface-2) !important;
    color: var(--muted-2) !important;
  
  }
:root:not([data-theme="dark"]) .adm-forbidden h2 {   color: var(--text) !important; 
  }
:root:not([data-theme="dark"]) .adm-forbidden p {   color: var(--muted-2) !important; 
  }
:root:not([data-theme="dark"]) #adm-login-err {   color: #c5424a !important; 
  }
:root:not([data-theme="dark"]) .theme-toggle .ic-moon {   display: block; 
  }
}