/* Тема сайта. Токены темной темы живут в ui-*.css, здесь светлая тема с
   палитрой морозного стекла приложения (body.frost в app/web/ui.css) и
   кнопка переключения в шапке. Атрибут data-theme ставит theme.js до первой
   отрисовки, поэтому светлая страница не мигает темной. */

/* ---- кнопка в шапке: капсула как у ЭКО, солнце и луна меняются местами ---- */
.nx-theme{position:relative;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:100px;
  border:1px solid rgba(167,139,250,.2);background:rgba(109,40,217,.06);color:var(--dim);cursor:pointer;padding:0;flex:none;
  transition:border-color .3s,color .3s,background .3s,box-shadow .3s,transform .3s}
.nx-theme:hover{border-color:rgba(167,139,250,.4);color:var(--text);box-shadow:0 0 16px rgba(167,139,250,.1);transform:translateY(-1px)}
.nx-theme svg{position:absolute;inset:0;margin:auto;width:14px;height:14px;display:block;transition:opacity .35s,transform .55s cubic-bezier(.16,1,.3,1)}
.nx-theme .sun{opacity:0;transform:rotate(-50deg) scale(.5)}
html[data-theme="light"] .nx-theme .sun{opacity:1;transform:none}
html[data-theme="light"] .nx-theme .moon{opacity:0;transform:rotate(50deg) scale(.5)}

/* ---- светлая палитра ---- */
html[data-theme="light"]{
  /* один в один с body.frost приложения (app/web/ui.css): фон, чернила, линии, стекло, зелень */
  --bg:#e4e1ee;--panel:#f1eef8;--panel-2:#faf9fd;--raise:#ffffff;
  --line:rgba(64,40,140,.13);--line-2:rgba(64,40,140,.17);
  --text:#232135;--dim:#6b6880;--dimmer:#9b98ac;
  --green:#2fa876;--amber:#b7791f;--red:#d64545;
  --violet:#8b5cf6;--violet-2:#7c3aed;--violet-d:#6d28d9;--fuchsia:#d946ef;--fuchsia-2:#c026d3;
  --g1:linear-gradient(120deg,#8b5cf6,#7c3aed);
  --g2:linear-gradient(120deg,#8b5cf6,#d946ef);
  --g-text:linear-gradient(116deg,#2b2740 6%,#7c3aed 46%,#d946ef 98%);
  color-scheme:light;
}
html[data-theme="light"] ::selection{background:rgba(139,92,246,.25);color:var(--text)}

/* ---- окружение: дымка пастелью вместо грозы, сетка чуть темнее ----
   Прежние градиенты (центры за краями экрана, прозрачность к 70%) шли под
   filter:blur(50px); размытие посчитано заранее, как для темной темы в ui.css.
   Нули у центров не ошибка: эти места всегда за краем экрана. */
/* Фон вместо сетки: мягкий цветной mesh-градиент, статичный (живёт и в ЭКО).
   Пять пятен палитры перетекают по герою; в полном режиме orbfx добавляет
   медленный дрейф поверх. Все стопы с явной нулевой альфой того же цвета,
   чтобы у краёв не появлялось серого ореола (transparent = чёрный ноль). */
html[data-theme="light"] .mesh{opacity:1;inset:0;animation:none;
  background:
    radial-gradient(40% 44% at 8% 4%, rgba(124,58,237,.17) 0, rgba(124,58,237,.05) 42%, rgba(124,58,237,0) 66%),
    radial-gradient(36% 40% at 101% 2%, rgba(217,70,239,.11) 0, rgba(217,70,239,.03) 42%, rgba(217,70,239,0) 64%),
    radial-gradient(48% 52% at -8% 56%, rgba(120,140,200,.20) 0, rgba(120,140,200,.06) 44%, rgba(120,140,200,0) 66%),
    radial-gradient(52% 48% at 98% 60%, rgba(139,92,246,.13) 0, rgba(139,92,246,.04) 44%, rgba(139,92,246,0) 66%),
    radial-gradient(62% 54% at 46% 118%, rgba(167,139,250,.19) 0, rgba(167,139,250,.05) 46%, rgba(167,139,250,0) 68%)}
@media (max-width:600px){html[data-theme="light"] .mesh{background:
    radial-gradient(58% 48% at 6% 2%, rgba(124,58,237,.15) 0, rgba(124,58,237,.05) 44%, rgba(124,58,237,0) 68%),
    radial-gradient(54% 44% at 104% 6%, rgba(217,70,239,.1) 0, rgba(217,70,239,.03) 44%, rgba(217,70,239,0) 66%),
    radial-gradient(70% 56% at 50% 116%, rgba(167,139,250,.18) 0, rgba(167,139,250,.05) 48%, rgba(167,139,250,0) 70%)}}
/* Сетка убрана на всех страницах обеих тем: её заменяет цветной mesh-фон
   (.mesh выше для светлой, базовый .mesh в ui.css для тёмной). Сам элемент
   .bg-grid остаётся в разметке, но не рисуется. */
.bg-grid{display:none!important}

/* Кнопка «ЭКО» на светлой теме во включённом состоянии: правило светлой темы
   той же силы перекрашивало активную пилюлю в белое, и она пропадала. Более
   точный селектор (свет + nx-lite) возвращает фирменный градиент. */
html[data-theme="light"].nx-lite .nxlt{background:var(--g2);border-color:var(--violet-2);color:#fff;box-shadow:0 10px 24px -12px rgba(124,58,237,.55)}
html[data-theme="light"].nx-lite .nxlt .nxlt-i{color:#fff;opacity:1}
html[data-theme="light"].nx-lite .nxlt .nxlt-s{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.18)}
html[data-theme="light"].nx-lite .nxlt .nxlt-s::after{background:#fff}
html[data-theme="light"] header{background:linear-gradient(180deg,rgba(228,225,238,.88),transparent)}
html[data-theme="light"] header.scrolled{background:rgba(236,233,244,.88)}
/* капсула шапки: белое стекло вместо темного */
html[data-theme="light"] .hd{background:rgba(255,255,255,.58)!important;border-color:rgba(64,40,140,.14)!important;box-shadow:0 18px 44px -28px rgba(64,40,140,.28)!important}
html[data-theme="light"] header.scrolled .hd{background:rgba(255,255,255,.8)!important}
html[data-theme="light"] #load{background:#e4e1ee}
html[data-theme="light"] .nx-theme,html[data-theme="light"] .nxlt{border-color:rgba(64,40,140,.16);background:rgba(255,255,255,.55)}
html[data-theme="light"] .nx-theme:hover,html[data-theme="light"] .nxlt:hover{border-color:rgba(109,40,217,.4);box-shadow:0 8px 20px -12px rgba(64,40,140,.35)}

/* ---- поверхности: темная подложка карточек становится белым стеклом ---- */
html[data-theme="light"] :is(.band,.post,.card,.c-key,.c-sec,.c-mach,.c-buy,.c-hero,.claim,.step,.bento .cell,.tgcard,.price,.picker,.hcell,.panel,.auth-card,.lk-load,.gift,.ptile[aria-pressed="true"],.term,.hv-win,.bcell,.stp,.ucard,.ust .s,.cgrid .c,.urel a,.frow){
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.55))!important}
html[data-theme="light"] :is(.price.key,.c-hero){background:linear-gradient(180deg,rgba(139,92,246,.1),rgba(255,255,255,.72) 60%)!important}
html[data-theme="light"] :is(.authnote,.nf .path,.nf-links a,.keyline,.qr-grid,.way,.ptile,.terms,.gift-row,.sso .sbtn,.devask dl,.trio .t,.art .note,.art .cmd,.chk-note,.chk-foot,.marq,.bench,.int,.doc .toc a,.doc .note,.ptoggle,.pay .p,.unote,.pnode,.chip,.code,.tbody,.rlbody){
  background:rgba(255,255,255,.66)!important}
html[data-theme="light"] .keyline:hover{background:rgba(255,255,255,.9)!important}
html[data-theme="light"] input:not([type=range]):not([type=checkbox]):not([type=radio]),html[data-theme="light"] textarea,html[data-theme="light"] select{background:rgba(255,255,255,.8)!important;color:var(--text)}
html[data-theme="light"] .plate{
  background:linear-gradient(rgba(64,40,140,calc(var(--dm)*.45)),rgba(64,40,140,calc(var(--dm)*.45))),linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.78))!important;
  border-color:rgba(64,40,140,.16)}
/* шаги на главной в темной теме прозрачные, такими и остаются */
html[data-theme="light"] .stack-how .step{background:transparent!important;box-shadow:none!important}
html[data-theme="light"] .stack-how .step:hover .n{background:var(--violet-2)!important;color:#fff!important}
html[data-theme="light"] .stack-how .step:hover p{color:var(--text)!important}

/* ---- тени: черные под темную тему, фиолетовые на свету ---- */
html[data-theme="light"] :is(.term,.hv-win,.plate,.card,.c-hero,.gift,.lk-load,.panel,.panel.nim,.dvcore,.auth-card,.chip,.post,.tgcard){
  box-shadow:0 18px 50px -18px rgba(64,40,140,.15),inset 0 1px 0 rgba(255,255,255,.95)!important}
html[data-theme="light"] :is(.card,.tgcard,.hcell,.bcell,.stp,.ust .s,.urel a,.ucard,.cgrid .c):hover{
  box-shadow:0 30px 60px -36px rgba(64,40,140,.36),0 0 30px -18px rgba(139,92,246,.35)!important}
html[data-theme="light"] .picker input[type=range]::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(217,70,239,.2),0 4px 12px rgba(64,40,140,.25)}

/* подсказка про режим производительности всплывает поверх страницы */
html[data-theme="light"] .nx-lite-offer{background:rgba(255,255,255,.92)!important;color:var(--text)!important;border:1px solid rgba(64,40,140,.16)!important;box-shadow:0 26px 60px -30px rgba(64,40,140,.4)!important}
html[data-theme="light"] .nx-lite-offer .x{color:var(--dim)!important}

/* ---- белый текст, который на свету должен стать чернильным ---- */
html[data-theme="light"] :is(.art p b,.doc p b,.frow:hover .v,.rl .v.hl,.price.pick .v){color:var(--text)!important}
html[data-theme="light"] .price.pick .v{text-shadow:none!important}
html[data-theme="light"] :is(.lead code,.tbody .ok){background:rgba(31,154,99,.1)}
html[data-theme="light"] .btn.primary{box-shadow:0 12px 32px -14px rgba(139,92,246,.55),inset 0 1px 0 rgba(255,255,255,.35)}

/* ---- шапка на узких экранах ----
   На 320 точках логотип вплотную упирался в кнопку темы, а длинная кнопка
   загрузки (Herunterladen, Télécharger) уходила за край экрана и резалась;
   на 1024 точках немецкая кнопка сжималась и обрезала свою подпись. Кнопка
   загрузки не сжимается никогда, на узком экране уступают поля и промежутки,
   а на самых узких (до 340) уступает слово логотипа, знак остается. */
.btn.dl{white-space:nowrap;flex:none}
@media (max-width:400px){
  .hd{padding:0 6px 0 12px}
  .logo{gap:8px}
  nav.top{gap:6px}
  .btn.dl{padding:9px 12px}
}
@media (max-width:340px){
  .hd .logo > span{display:none}
}
@media (max-width:370px){
  html:is([lang|="de"],[lang|="fr"]) .hd .logo > span{display:none}
}
/* От 901 до 1040 точек полное меню не помещается ни на одном длинном языке
   (de, fr, es, pt, vi, и даже ru): ссылки упирались в логотип и сжимали ЭКО и
   язык. До 1040 точек уходят ссылки разделов, а вход и регистрация остаются. */
@media (max-width:1040px){
  nav.top > a:not(.btn):not([href^="auth"]),nav.top > .sep{display:none}
}