/* ==========================================================================
   ARTΞMIDA UI V204 — жидкое стекло по рецепту линзы, вкладки кабинета,
   FAQ-аккордеон, подвал, мини-сцены. Подключается последним.
   ========================================================================== */

/* ---------- Жидкое стекло ---------- */
:root{
  --lg-fill:linear-gradient(135deg,rgb(255 255 255/.075) 0%,rgb(255 255 255/.02) 40%,rgb(255 255 255/.01) 65%,rgb(255 255 255/.05) 100%);
  --lg-tint:rgb(12 10 16/.16);
  --lg-shadow:inset 0 0 0 1px rgb(255 255 255/.15),inset 1.5px 1.5px 0 rgb(255 255 255/.5),inset 0 0 12px rgb(255 255 255/.2),0 8px 32px rgb(0 0 0/.22);
  --lg-shadow-sm:inset 0 0 0 1px rgb(255 255 255/.14),inset 1px 1px 0 rgb(255 255 255/.45),inset 0 0 8px rgb(255 255 255/.14),0 4px 14px rgb(0 0 0/.18);
  --lg-safari:blur(8px) saturate(1.8) brightness(1.15) contrast(1.05);
}
html[data-theme="pearl"]{
  --lg-fill:linear-gradient(135deg,rgb(255 255 255/.62) 0%,rgb(255 255 255/.34) 45%,rgb(255 255 255/.5) 100%);
  --lg-tint:rgb(255 255 255/.10);
  --lg-shadow:inset 0 0 0 1px rgb(255 255 255/.7),inset 1.5px 1.5px 0 #fff,inset 0 0 12px rgb(255 255 255/.6),0 10px 32px rgb(120 40 80/.14);
  --lg-shadow-sm:inset 0 0 0 1px rgb(255 255 255/.7),inset 1px 1px 0 #fff,0 4px 14px rgb(120 40 80/.12);
}
/* Убираем прежнюю кромку-градиент: её роль играет свет по рецепту */
html:not(#ui) body :is(.glass-card,.glass-panel,.ui-glass)::after{display:none!important}

html:not(#ui) body :is(.glass-panel,.glass-card,.ui-glass,.site-top-hub,.mobile-nav,.legal-hub.ui-fab > summary,.legal-hub.ui-fab > nav,.theme-popover,.landing-auth-panel,.modal,.purchase-auto-note,.ui-cabbar){
  border:0!important;box-shadow:var(--lg-shadow)!important;
  -webkit-backdrop-filter:var(--lg-safari)!important;backdrop-filter:var(--lg-safari)!important}
/* Chrome / Edge: настоящая линза */
html.ui-lens:not(#ui) body .ui-lensed.ui-lensed.ui-lensed{
  -webkit-backdrop-filter:blur(2px) var(--ui-lens) blur(5px) saturate(1.6) brightness(1.08)!important;
          backdrop-filter:blur(2px) var(--ui-lens) blur(5px) saturate(1.6) brightness(1.08)!important}
/* Навигация и кнопки — прозрачнее, как в образце */
html.ui-lens:not(#ui) body :is(.site-top-hub,.mobile-nav,.legal-hub.ui-fab > summary,.ui-cabbar,.btn.secondary,.site-login-button,.theme-trigger).ui-lensed.ui-lensed.ui-lensed{
  -webkit-backdrop-filter:blur(1px) var(--ui-lens) blur(2px) saturate(1.5) brightness(1.1)!important;
          backdrop-filter:blur(1px) var(--ui-lens) blur(2px) saturate(1.5) brightness(1.1)!important}
html:not(#ui) body :is(.site-top-hub,.mobile-nav,.legal-hub.ui-fab > summary,.ui-cabbar){--lg-tint:rgb(10 9 14/.06);--lg-fill:linear-gradient(135deg,rgb(255 255 255/.06),rgb(255 255 255/.015) 50%,rgb(255 255 255/.04))}
html:not(#ui) body .site-top-hub.ui-scrolled{--lg-tint:rgb(10 9 14/.22)}
html[data-theme="pearl"]:not(#ui) body :is(.site-top-hub,.mobile-nav,.legal-hub.ui-fab > summary,.ui-cabbar){--lg-tint:rgb(255 255 255/.25);--lg-fill:linear-gradient(135deg,rgb(255 255 255/.5),rgb(255 255 255/.25))}
/* Стеклянные кнопки */
html:not(#ui) body :is(.btn.secondary,.landing-telegram-bot,.site-login-button,.theme-trigger){
  background:linear-gradient(135deg,rgb(255 255 255/.08),rgb(255 255 255/.02))!important;border:0!important;box-shadow:var(--lg-shadow-sm)!important}
html:not(#ui) body :is(.btn.secondary,.landing-telegram-bot,.site-login-button,.theme-trigger):hover{background:linear-gradient(135deg,rgb(255 255 255/.14),rgb(255 255 255/.04))!important}
html[data-theme="pearl"]:not(#ui) body :is(.btn.secondary,.landing-telegram-bot,.site-login-button,.theme-trigger){background:linear-gradient(135deg,rgb(255 255 255/.75),rgb(255 255 255/.4))!important}
/* Главная кнопка тоже «стеклянная»: блик сверху и внутренний свет */
html:not(#ui) body :is(.btn.primary,.landing-buy){box-shadow:inset 0 0 0 1px rgb(255 255 255/.35),inset 1.5px 1.5px 0 rgb(255 255 255/.7),inset 0 -6px 14px rgb(0 0 0/.08),0 10px 28px -8px rgb(var(--ui-accent-2)/.6)!important}
/* Окна и меню плотнее, чтобы текст читался */
html:not(#ui) body :is(.theme-popover,.landing-auth-panel,.modal,.legal-hub.ui-fab > nav,.purchase-auto-note){--lg-tint:rgb(14 12 18/.62)}
html[data-theme="pearl"]:not(#ui) body :is(.theme-popover,.landing-auth-panel,.modal,.legal-hub.ui-fab > nav,.purchase-auto-note){--lg-tint:rgb(255 255 255/.7)}
/* Свет позади стекла — чтобы было что преломлять */
html:not(#ui) body .background-glow{display:block!important;opacity:.34!important;filter:blur(70px)!important}
html:not(#ui) body .background-glow.glow-b{opacity:.28!important}
html[data-theme="pearl"]:not(#ui) body .background-glow{opacity:.2!important}
html:not(#ui) body::before{opacity:1!important;background:radial-gradient(circle,rgb(var(--ui-accent-2)/.22),transparent 62%)!important}
/* Важно: анимации появления не должны «держать» своё последнее состояние —
   иначе блок становится отдельным слоем, и стекло внутри него перестаёт видеть фон. */
html:not(#ui) body *{animation-fill-mode:backwards!important}
html:not(#ui) body :is(.ui-globe-label.show,.ui-bump){animation-fill-mode:backwards!important}

/* ---------- Серверная стойка 3D: собирается при прокрутке ---------- */
html:not(#ui) body .ui-rack3d{perspective:1100px!important;padding:10px 0 34px;position:relative}
html:not(#ui) body .ui-rack3-head{display:flex;justify-content:flex-end;margin:0 6px 10px;opacity:calc(var(--p) * 1.4 - .3)}
html:not(#ui) body .ui-rack3{display:flex;flex-direction:column;gap:12px;transform:rotateX(9deg) rotateY(-13deg);transform-style:preserve-3d}
html:not(#ui) body .ui-u3{--pe:clamp(0,calc(var(--p) * 1.8 - var(--i) * .13),1);
  position:relative;height:58px;border-radius:16px;display:grid;grid-template-columns:auto 22px minmax(64px,1fr) auto 70px auto;align-items:center;gap:14px;padding:0 18px;
  background:var(--lg-fill),rgb(20 18 26/.5);box-shadow:var(--lg-shadow-sm);
  opacity:var(--pe);transform:translate3d(calc((1 - var(--pe)) * var(--dir) * 190px),calc((1 - var(--pe)) * 46px),calc((1 - var(--pe)) * -130px)) rotateY(calc((1 - var(--pe)) * var(--dir) * -40deg));
  will-change:transform,opacity}
html[data-theme="pearl"]:not(#ui) body .ui-u3{background:var(--lg-fill)}
html:not(#ui) body .ui-u3 .u-leds{display:flex;gap:6px}
html:not(#ui) body .ui-u3 .u-leds i{width:7px;height:7px;border-radius:50%;background:rgb(var(--ui-accent)/.3);transition:background-color .4s ease,box-shadow .4s ease}
html:not(#ui) body .ui-u3 .u-flag{width:22px;height:16px;border-radius:4px;object-fit:cover;box-shadow:0 0 0 1px rgb(255 255 255/.14)}
html:not(#ui) body .ui-u3 .u-name{font-size:14px;font-weight:800;color:var(--ui-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* «Палочки» — заполняются зелёным, потом по ним бежит пинг */
html:not(#ui) body .ui-u3 .u-sig{display:flex;align-items:center;gap:3px;height:24px}
html:not(#ui) body .ui-u3 .u-sig i{width:3px;height:22px;border-radius:2px;background:rgb(255 255 255/.12);transition:background-color .3s ease,box-shadow .3s ease,transform .3s ease;transform-origin:bottom;transform:scaleY(.55)}
html[data-theme="pearl"]:not(#ui) body .ui-u3 .u-sig i{background:rgb(60 20 45/.14)}
html:not(#ui) body .ui-u3 .u-meter{height:6px;border-radius:99px;background:var(--ui-fill-3);overflow:hidden}
html:not(#ui) body .ui-u3 .u-meter i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,rgb(var(--ui-accent)),rgb(var(--ui-accent-2)));transition:width 1.2s var(--ui-ease)}
html:not(#ui) body .ui-u3 .u-tag{font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--ui-text-3);white-space:nowrap}
html:not(#ui) body .ui-rack-sec.assembled .ui-u3 .u-leds i:first-child{background:#4ade80;box-shadow:0 0 10px #4ade80;transition-delay:calc(var(--i) * 110ms + .1s)}
html:not(#ui) body .ui-rack-sec.assembled .ui-u3 .u-leds i:not(:first-child){animation:ui-led3 1.4s steps(2,jump-none) infinite;animation-delay:calc(var(--i) * 170ms + .6s)}
html:not(#ui) body .ui-rack-sec.assembled .ui-u3 .u-leds i:nth-child(3){animation-duration:.9s}
@keyframes ui-led3{0%{background:rgb(var(--ui-accent));box-shadow:0 0 8px rgb(var(--ui-accent))}100%{background:rgb(var(--ui-accent)/.25);box-shadow:none}}
html:not(#ui) body .ui-rack-sec.assembled .ui-u3 .u-sig i{background:#22c55e;box-shadow:0 0 5px rgb(74 222 128/.4);transform:scaleY(calc(.45 + var(--s) * .025));
  transition-delay:calc(var(--i) * 110ms + var(--s) * 38ms + .2s);animation:ui-ping3 2.6s ease-in-out infinite;animation-delay:calc(var(--i) * 140ms + var(--s) * 55ms + 1.6s)}
@keyframes ui-ping3{0%,72%,100%{background:#22c55e}80%{background:#bbf7d0;box-shadow:0 0 10px rgb(187 247 208/.9)}}
html:not(#ui) body .ui-rack-sec.assembled .ui-u3 .u-meter i{width:var(--w);transition-delay:calc(var(--i) * 110ms + .5s);animation:ui-load3 4s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -.6s + 2s)}
@keyframes ui-load3{from{width:calc(var(--w) * .6)}to{width:var(--w)}}
html:not(#ui) body .ui-u3.is-off .u-sig i{background:rgb(255 204 77/.6)!important;animation:none!important}
html:not(#ui) body .ui-u3.is-off .u-leds i:first-child{background:#ffcc4d!important;box-shadow:none!important}
html:not(#ui) body .ui-rack3d .ui-rack-status{margin:0}
html:not(#ui) body .ui-rack3d .ui-rack-floor{position:absolute;left:8%;right:8%;bottom:0;height:40px;border-radius:50%;background:radial-gradient(ellipse,rgb(var(--ui-accent)/.35),transparent 70%);filter:blur(14px);opacity:calc(var(--p) * .9)}
@media (max-width:600px){
  html:not(#ui) body .ui-u3{grid-template-columns:auto 20px minmax(0,1fr) auto;gap:10px;padding:0 12px;height:50px}
  html:not(#ui) body .ui-u3 :is(.u-meter,.u-tag){display:none}
  html:not(#ui) body .ui-u3 .u-sig i:nth-child(n+13){display:none}
  html:not(#ui) body .ui-rack3{transform:rotateX(7deg) rotateY(-7deg)}
}
@media (prefers-reduced-motion:reduce){html:not(#ui) body .ui-u3{opacity:1!important;transform:none!important}}

/* ---------- Вкладки кабинета (вместо меню слева) ---------- */
@media (min-width:1025px){
  html:not(#ui) body .sidebar{display:none!important}
  html:not(#ui) body .app-content{padding-left:0!important;padding-right:0!important}
}
html:not(#ui) body .ui-cabbar{position:relative;display:flex;align-items:center;gap:2px;width:max-content;max-width:100%;margin:0 0 clamp(18px,3vw,30px);padding:5px;border-radius:18px;
  background:var(--lg-fill),var(--lg-tint)!important;overflow-x:auto;scrollbar-width:none;animation:ui-rise-in .6s var(--ui-ease) backwards}
html:not(#ui) body .ui-cabbar::-webkit-scrollbar{display:none}
html:not(#ui) body .ui-cab-link{position:relative;z-index:1;display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 16px;border-radius:13px;white-space:nowrap;
  font-size:14px;font-weight:700;color:var(--ui-text-2);text-decoration:none;transition:color .25s ease}
html:not(#ui) body .ui-cab-link .ui-icon{width:17px;height:17px;transition:color .25s ease}
html:not(#ui) body .ui-cab-link:hover{color:var(--ui-text)}
html:not(#ui) body .ui-cab-link.active{color:var(--ui-text)}
html:not(#ui) body .ui-cab-link.active .ui-icon{color:rgb(var(--ui-accent))}
html:not(#ui) body .ui-cabbar-ind{position:absolute;z-index:0;left:0;top:5px;bottom:5px;width:0;border-radius:13px;opacity:0;pointer-events:none;
  background:linear-gradient(135deg,rgb(255 255 255/.16),rgb(255 255 255/.05));box-shadow:inset 0 0 0 1px rgb(255 255 255/.14),inset 1px 1px 0 rgb(255 255 255/.4),0 6px 16px -6px rgb(0 0 0/.5);
  transition:transform .45s cubic-bezier(.3,1.3,.5,1),width .45s cubic-bezier(.3,1.3,.5,1),opacity .2s ease}
html[data-theme="pearl"]:not(#ui) body .ui-cabbar-ind{background:#fff;box-shadow:0 2px 8px rgb(120 40 80/.16)}
@media (max-width:1024px){html:not(#ui) body .ui-cabbar{display:none!important}}

/* ---------- Нижнее меню телефона: все разделы, листается ---------- */
@media (max-width:1024px){
  html:not(#ui) body .mobile-nav.ui-tabs-scroll{display:flex!important;grid-auto-flow:unset!important;overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;touch-action:pan-x pan-y;scrollbar-width:none;gap:2px!important;justify-content:flex-start!important}
  html:not(#ui) body .mobile-nav.ui-tabs-scroll::-webkit-scrollbar{display:none}
  html:not(#ui) body .mobile-nav.ui-tabs-scroll .mobile-link{display:flex!important;flex:0 0 auto!important;min-width:64px!important;padding:0 6px!important;scroll-snap-align:center}
  html:not(#ui) body .mobile-nav.ui-tabs-scroll .mobile-link b{display:block!important;font-size:10px!important}
  html:not(#ui) body .mobile-nav.ui-tabs-scroll{-webkit-mask:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent);mask:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent)}
  html:not(#ui) body .mobile-nav.ui-tabs-scroll.at-start{-webkit-mask:linear-gradient(90deg,#000 calc(100% - 18px),transparent);mask:linear-gradient(90deg,#000 calc(100% - 18px),transparent)}
  html:not(#ui) body .mobile-nav.ui-tabs-scroll.at-end{-webkit-mask:linear-gradient(90deg,transparent,#000 18px);mask:linear-gradient(90deg,transparent,#000 18px)}
  html:not(#ui) body .mobile-nav.ui-tabs-scroll.at-start.at-end{-webkit-mask:none;mask:none}
  html:not(#ui) body .mobile-nav .mobile-link:active{transform:scale(.94)!important}
}
html:not(#ui) body .ui-cab-link[href="/developer-api"] .ui-icon{--icon:url("/static/vendor/lucide-pack/code-xml.svg")!important}

/* ---------- FAQ: плавное раскрытие и закрытие ---------- */
html:not(#ui) body .faq-item .faq-answer,html:not(#ui) body.faq-public-page .faq-item .faq-answer{
  display:grid!important;grid-template-rows:0fr!important;opacity:0;visibility:hidden;height:auto!important;max-height:none!important;
  transition:grid-template-rows .5s cubic-bezier(.2,.8,.2,1),opacity .3s ease,visibility 0s linear .5s!important}
html:not(#ui) body .faq-item.open .faq-answer,html:not(#ui) body.faq-public-page .faq-item.open .faq-answer{
  grid-template-rows:1fr!important;opacity:1;visibility:visible;transition:grid-template-rows .5s cubic-bezier(.2,.8,.2,1),opacity .4s ease .05s,visibility 0s!important}
html:not(#ui) body .faq-item .faq-answer > div{overflow:hidden!important;min-height:0!important}
html:not(#ui) body .faq-item .faq-answer .answer{transform:translate3d(0,-8px,0);filter:blur(3px);transition:transform .5s var(--ui-ease),filter .4s ease}
html:not(#ui) body .faq-item.open .faq-answer .answer{transform:none;filter:none}
html:not(#ui) body .faq-item{transition:background-color .3s ease,box-shadow .35s ease!important}
html:not(#ui) body .faq-item.open{box-shadow:inset 0 0 0 1px rgb(var(--ui-accent)/.35),inset 1px 1px 0 rgb(255 255 255/.25),0 12px 34px -16px rgb(var(--ui-accent-2)/.55)!important}
html:not(#ui) body .faq-question .toggle{transition:transform .45s cubic-bezier(.3,1.4,.5,1),background-color .3s ease!important}
html:not(#ui) body .faq-item.open .faq-question .toggle{background:rgb(var(--ui-accent)/.2)!important}

/* ---------- Подвал: один компактный вид на всех страницах ---------- */
html:not(#ui) body :is(.page-footer,.faq-public-footer,.legal-footer){display:none!important}
html:not(#ui) body .ui-foot{width:min(var(--ui-wrap),calc(100% - 32px));margin:clamp(36px,6vw,64px) auto 0;padding:20px 0 calc(28px + env(safe-area-inset-bottom));
  border-top:1px solid var(--ui-stroke);display:flex;align-items:center;justify-content:space-between;gap:14px 28px;flex-wrap:wrap;font-size:13px;color:var(--ui-text-3)}
html:not(#ui) body .ui-foot-brand{display:inline-flex;align-items:center;gap:10px;color:var(--ui-text);font-weight:800;letter-spacing:.04em;text-decoration:none;font-size:13.5px}
html:not(#ui) body .ui-foot-brand b{color:rgb(var(--ui-accent));font-weight:800}
html:not(#ui) body .ui-foot-brand .brand-mark{position:relative;width:30px;height:30px;border-radius:10px;display:block;background:var(--ui-fill-2)!important;box-shadow:var(--lg-shadow-sm)}
html:not(#ui) body .ui-foot-brand .brand-mark::before{inset:6px!important}
html:not(#ui) body .ui-foot nav{display:flex;flex-wrap:wrap;gap:4px 18px}
html:not(#ui) body .ui-foot nav a{color:var(--ui-text-2);text-decoration:none;padding:4px 0;transition:color .2s ease}
html:not(#ui) body .ui-foot nav a:hover{color:var(--ui-text)}
@media (max-width:1024px){html:not(#ui) body:has(.mobile-nav) .ui-foot{padding-bottom:calc(100px + env(safe-area-inset-bottom))}}
@media (max-width:700px){html:not(#ui) body .ui-foot{padding-bottom:calc(90px + env(safe-area-inset-bottom))}html:not(#ui) body .ui-foot nav{gap:2px 14px}}

/* ---------- Блок поддержки — компактный ---------- */
html:not(#ui) body .support-strip{padding:14px 16px 14px 14px!important;gap:14px!important;border-radius:22px!important;max-width:880px;margin-left:auto!important;margin-right:auto!important}
html:not(#ui) body .support-strip .support-icon{width:40px!important;height:40px!important;border-radius:13px!important}
html:not(#ui) body .support-strip .support-icon .ui-icon{width:18px!important;height:18px!important}
html:not(#ui) body .support-strip .overline{display:none!important}
html:not(#ui) body .support-strip h3{font-size:15.5px!important;margin:0 0 2px!important}
html:not(#ui) body .support-strip p{font-size:13px!important;line-height:1.45!important}
html:not(#ui) body .support-strip .btn{min-height:40px!important;padding:0 16px!important;font-size:14px!important}
html:not(#ui) body .faq-more{min-height:46px!important;border-radius:16px!important;border:0!important;background:linear-gradient(135deg,rgb(255 255 255/.07),rgb(255 255 255/.02))!important;box-shadow:var(--lg-shadow-sm)!important;color:var(--ui-text)!important;font-weight:700!important;transition:background-color .2s ease!important}
html:not(#ui) body .faq-more:hover{background:linear-gradient(135deg,rgb(255 255 255/.12),rgb(255 255 255/.04))!important}

/* ---------- Окно «Оформление»: анимация управляется скриптом, без CSS-переходов ---------- */
html:not(#ui) body .theme-popover,html:not(#ui) body .theme-popover.shown{transition:none!important;opacity:1!important;transform:none!important;view-transition-name:ui-theme-pop}
html:not(#ui) body .theme-popover-backdrop{transition:none!important}
html:not(#ui) body .theme-popover-backdrop.shown{background:transparent!important}
@media (max-width:640px){html:not(#ui) body .theme-popover-backdrop.shown{background:rgb(0 0 0/.4)!important}}
::view-transition-group(ui-theme-pop){animation-duration:.35s}
html.ui-theme-vt::view-transition-old(ui-theme-pop){animation:none;opacity:0}
html.ui-theme-vt::view-transition-new(ui-theme-pop){animation:none}

/* ==========================================================================
   Мини-сцены в шапке страниц
   ========================================================================== */
html:not(#ui) body .ui-hero-scene{--sz:300px;width:300px!important;height:230px!important}
html:not(#ui) body :is(.legal-hero,.review-page-hero).ui-has-art .ui-hero-scene{top:0;transform:translate3d(calc(var(--mx) * 14px),calc(var(--my) * 10px),0)}
html:not(#ui) body .page-hero.ui-has-art .ui-hero-scene{right:4%}
html:not(#ui) body .faq-hero.ui-has-art .ui-hero-scene{width:300px!important;height:150px!important;top:22px;right:30px}
html:not(#ui) body .ui-scene{position:absolute;inset:0;font-family:var(--ui-font);color:var(--ui-text)}
html:not(#ui) body .ui-scene :is(.ui-glass){position:absolute}
html:not(#ui) body .sc-ico{display:inline-block;width:16px;height:16px;flex:0 0 auto;background:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
html:not(#ui) body .sc-ico.acc{color:rgb(var(--ui-accent))}
html:not(#ui) body .sc-sig{display:inline-flex;align-items:flex-end;gap:2px;height:12px;margin-left:auto}
html:not(#ui) body .sc-sig i{width:3px;border-radius:1px;height:calc(4px + var(--s) * 2.6px);background:rgb(255 255 255/.18)}
html:not(#ui) body .ui-scene:not(.play) *{animation-play-state:paused!important}

/* --- Подключение: ссылка «влетает» в телефон, появляются серверы, включается VPN --- */
html:not(#ui) body .sc-install .sc-phone{left:110px;top:0;width:150px;height:226px;border-radius:30px!important;padding:26px 10px 10px;display:flex;flex-direction:column;gap:6px}
html:not(#ui) body .sc-install .sc-notch{position:absolute;top:8px;left:50%;width:46px;height:10px;margin-left:-23px;border-radius:9px;background:rgb(0 0 0/.55)}
html:not(#ui) body .sc-install .sc-app{display:flex;align-items:center;gap:6px;font-size:12px;padding:2px 2px 6px;border-bottom:1px solid var(--ui-stroke)}
html:not(#ui) body .sc-install .sc-toggle{margin-left:auto;width:30px;height:18px;border-radius:99px;background:rgb(255 255 255/.15);position:relative;animation:sc-tg 8s infinite}
html:not(#ui) body .sc-install .sc-toggle i{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgb(0 0 0/.3);animation:sc-knob 8s infinite}
@keyframes sc-tg{0%,48%{background:rgb(255 255 255/.15)}54%,92%{background:#22c55e}100%{background:rgb(255 255 255/.15)}}
@keyframes sc-knob{0%,48%{transform:none}54%,92%{transform:translateX(12px)}100%{transform:none}}
html:not(#ui) body .sc-install .sc-row{display:flex;align-items:center;gap:6px;height:24px;padding:0 7px;border-radius:9px;background:rgb(255 255 255/.06);font-size:10.5px;opacity:0;transform:translateY(6px);animation:sc-row 8s infinite;animation-delay:calc(var(--k) * .28s)}
html:not(#ui) body .sc-install .sc-row b{font-weight:700;white-space:nowrap}
html:not(#ui) body .sc-install .sc-row img{width:16px;height:12px;border-radius:2px}
@keyframes sc-row{0%,20%{opacity:0;transform:translateY(6px)}26%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(-4px)}}
html:not(#ui) body .sc-install .sc-row .sc-sig i{animation:sc-sig 8s infinite;animation-delay:calc(var(--s) * .08s)}
@keyframes sc-sig{0%,52%{background:rgb(255 255 255/.18)}58%,92%{background:#4ade80}100%{background:rgb(255 255 255/.18)}}
html:not(#ui) body .sc-install .sc-status{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:6px;height:28px;border-radius:12px;font-size:11px;font-weight:800;color:#4ade80;background:rgb(74 222 128/.12);opacity:0;animation:sc-st 8s infinite}
html:not(#ui) body .sc-install .sc-status i{width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 8px #4ade80}
@keyframes sc-st{0%,55%{opacity:0;transform:scale(.9)}60%,92%{opacity:1;transform:none}100%{opacity:0}}
html:not(#ui) body .sc-install .sc-link{position:absolute;left:0;top:96px;display:flex;align-items:center;gap:7px;height:32px;padding:0 12px;border-radius:99px;font-size:11.5px;font-weight:700;white-space:nowrap;
  background:linear-gradient(135deg,var(--ui-btn-a),var(--ui-btn-b));color:var(--ui-on-accent);box-shadow:0 8px 22px -8px rgb(var(--ui-accent-2)/.7);animation:sc-link 8s infinite}
@keyframes sc-link{0%{opacity:0;transform:translateX(-30px)}6%{opacity:1;transform:none}14%{opacity:1;transform:translateX(70px) scale(.9)}19%,100%{opacity:0;transform:translateX(120px) scale(.5)}}

/* --- Рефералы: друзья соединяются с вами, дни «текут» к центру --- */
html:not(#ui) body .sc-ref .sc-ref-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
html:not(#ui) body .sc-ref line{stroke:rgb(var(--ui-accent)/.45);stroke-width:1.2;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;animation:sc-draw 6s infinite;animation-delay:calc(var(--k) * .3s)}
@keyframes sc-draw{0%,8%{stroke-dashoffset:1}22%,88%{stroke-dashoffset:0}100%{stroke-dashoffset:-1}}
html:not(#ui) body .sc-ref .sc-friend{position:absolute;left:var(--x);top:var(--y);width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;display:grid;place-items:center;color:var(--ui-text-2);
  background:var(--lg-fill),rgb(20 18 26/.5);box-shadow:var(--lg-shadow-sm);animation:sc-pop 6s infinite;animation-delay:calc(var(--k) * .3s)}
@keyframes sc-pop{0%{opacity:0;transform:scale(.4)}8%,90%{opacity:1;transform:none}100%{opacity:0;transform:scale(.6)}}
html:not(#ui) body .sc-ref .sc-chip{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);font-size:10.5px;font-weight:800;color:var(--ui-on-accent);padding:3px 7px;border-radius:99px;background:linear-gradient(135deg,var(--ui-btn-a),var(--ui-btn-b));opacity:0;
  animation:sc-chip 6s infinite;animation-delay:calc(var(--k) * .3s + 1.2s)}
@keyframes sc-chip{0%{opacity:0;left:var(--x);top:var(--y)}6%{opacity:1}26%{opacity:1;left:50%;top:52%}30%,100%{opacity:0;left:50%;top:52%}}
html:not(#ui) body .sc-ref .sc-me{left:50%;top:52%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:24px!important;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:12px;animation:sc-glow 6s infinite}
html:not(#ui) body .sc-ref .sc-me .sc-ico{width:22px;height:22px}
@keyframes sc-glow{0%,30%{box-shadow:var(--lg-shadow)}40%{box-shadow:var(--lg-shadow),0 0 0 6px rgb(var(--ui-accent)/.25),0 0 30px rgb(var(--ui-accent)/.6)}60%,100%{box-shadow:var(--lg-shadow)}}

/* --- FAQ: вопрос печатается, ответ появляется --- */
html:not(#ui) body .sc-faq .sc-q{left:0;right:0;top:0;height:44px;border-radius:15px!important;display:flex;align-items:center;gap:9px;padding:0 14px;font-size:13px;font-weight:700;color:var(--ui-text-2)}
html:not(#ui) body .sc-faq .sc-caret{width:2px;height:16px;background:rgb(var(--ui-accent));animation:sc-blink 1s steps(2) infinite}
@keyframes sc-blink{50%{opacity:0}}
html:not(#ui) body .sc-faq .sc-a{left:26px;right:0;top:56px;height:84px;border-radius:15px!important;padding:16px 14px 12px 48px;display:flex;flex-direction:column;gap:9px;opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .5s var(--ui-ease)}
html:not(#ui) body .sc-faq.answered .sc-a{opacity:1;transform:none}
html:not(#ui) body .sc-faq .sc-a i{display:block;height:7px;border-radius:4px;width:0;background:linear-gradient(90deg,rgb(255 255 255/.28),rgb(255 255 255/.1));transition:width .6s var(--ui-ease)}
html:not(#ui) body .sc-faq.answered .sc-a i{width:var(--w)}
html:not(#ui) body .sc-faq.answered .sc-a i:nth-of-type(2){transition-delay:.12s}html:not(#ui) body .sc-faq.answered .sc-a i:nth-of-type(3){transition-delay:.24s}
html:not(#ui) body .sc-faq .sc-ok{position:absolute;left:12px;top:14px;width:26px;height:26px;border-radius:9px;display:grid;place-items:center;color:#4ade80;background:rgb(74 222 128/.14)}

/* --- Поддержка: переписка в реальном времени --- */
html:not(#ui) body .sc-chat{inset:0!important;border-radius:24px!important;padding:14px;display:flex;flex-direction:column;gap:8px}
html:not(#ui) body .sc-chat-head{display:flex;align-items:center;gap:9px;font-size:13px;padding-bottom:8px;border-bottom:1px solid var(--ui-stroke)}
html:not(#ui) body .sc-chat-head em{margin-left:auto;font-style:normal;font-size:11px;font-weight:700;color:#4ade80;display:flex;align-items:center;gap:5px}
html:not(#ui) body .sc-chat-head em i{width:6px;height:6px;border-radius:50%;background:#4ade80;animation:ui-live 2s infinite}
html:not(#ui) body .sc-av{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgb(var(--ui-accent)/.15)}
html:not(#ui) body .sc-msg{max-width:78%;padding:8px 11px;border-radius:14px;font-size:11.5px;line-height:1.35;font-weight:600;opacity:0;transform:translateY(8px) scale(.96)}
html:not(#ui) body .sc-msg.me{align-self:flex-end;border-bottom-right-radius:5px;background:linear-gradient(135deg,var(--ui-btn-a),var(--ui-btn-b));color:var(--ui-on-accent);animation:sc-m1 7s infinite}
html:not(#ui) body .sc-msg.them{align-self:flex-start;border-bottom-left-radius:5px;background:rgb(255 255 255/.09);animation:sc-m2 7s infinite}
html:not(#ui) body .sc-typing{display:flex;gap:4px;padding:9px 11px;border-radius:14px;background:rgb(255 255 255/.07);width:max-content;opacity:0;animation:sc-ty 7s infinite}
html:not(#ui) body .sc-typing i{width:6px;height:6px;border-radius:50%;background:var(--ui-text-2);animation:sc-dot 1s ease-in-out infinite}
html:not(#ui) body .sc-typing i:nth-child(2){animation-delay:.15s}html:not(#ui) body .sc-typing i:nth-child(3){animation-delay:.3s}
@keyframes sc-dot{0%,100%{transform:none;opacity:.5}50%{transform:translateY(-3px);opacity:1}}
@keyframes sc-m1{0%,6%{opacity:0;transform:translateY(8px) scale(.96)}12%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes sc-ty{0%,18%{opacity:0;height:0;padding:0 11px}22%,44%{opacity:1;height:24px;padding:9px 11px}48%,100%{opacity:0;height:0;padding:0 11px}}
@keyframes sc-m2{0%,46%{opacity:0;transform:translateY(8px) scale(.96)}52%,92%{opacity:1;transform:none}100%{opacity:0}}

/* --- Условия: документ сканируется, ставится печать --- */
html:not(#ui) body .sc-doc .sc-paper,html:not(#ui) body .sc-priv .sc-paper{left:30px;top:0;width:200px;height:226px;border-radius:22px!important;padding:22px 18px;display:flex;flex-direction:column;gap:12px;overflow:hidden}
html:not(#ui) body .sc-doc .sc-paper b{display:block;width:55%;height:11px;border-radius:5px;background:rgb(var(--ui-accent)/.5);margin-bottom:4px}
html:not(#ui) body .sc-doc .sc-paper i{display:block;height:7px;width:var(--w);border-radius:4px;background:rgb(255 255 255/.14);animation:sc-hl 4s infinite;animation-delay:calc(var(--k) * .28s)}
@keyframes sc-hl{0%,100%{background:rgb(255 255 255/.14)}8%{background:rgb(var(--ui-accent)/.55)}18%{background:rgb(255 255 255/.22)}}
html:not(#ui) body .sc-doc .sc-beam{position:absolute;left:0;right:0;top:0;height:46px;background:linear-gradient(180deg,transparent,rgb(var(--ui-accent)/.22),transparent);animation:sc-beam 4s ease-in-out infinite}
@keyframes sc-beam{0%{transform:translateY(-50px)}70%,100%{transform:translateY(240px)}}
html:not(#ui) body .sc-doc .sc-stamp,html:not(#ui) body .sc-priv .sc-lock{right:20px;bottom:20px;width:64px;height:64px;border-radius:20px!important;display:grid;place-items:center;animation:sc-stamp 4s infinite}
html:not(#ui) body .sc-doc .sc-stamp .sc-ico,html:not(#ui) body .sc-priv .sc-lock .sc-ico{width:28px;height:28px}
@keyframes sc-stamp{0%,62%{transform:scale(1)}68%{transform:scale(1.14) rotate(-6deg);box-shadow:var(--lg-shadow),0 0 0 8px rgb(var(--ui-accent)/.18)}76%,100%{transform:scale(1)}}

/* --- Конфиденциальность: данные «шифруются» --- */
html:not(#ui) body .sc-priv .sc-paper{gap:10px;padding:20px 16px}
html:not(#ui) body .sc-priv .sc-field{position:relative;display:flex;flex-direction:column;gap:3px;padding:7px 10px;border-radius:11px;background:rgb(255 255 255/.06);font-size:10.5px}
html:not(#ui) body .sc-priv .sc-field span{color:var(--ui-text-3);font-weight:700}
html:not(#ui) body .sc-priv .sc-field b{font-size:12px;animation:sc-hide 6s infinite;animation-delay:calc(var(--k) * .35s)}
html:not(#ui) body .sc-priv .sc-field em{position:absolute;left:10px;bottom:7px;font-style:normal;font-size:12px;letter-spacing:.1em;color:rgb(var(--ui-accent));opacity:0;animation:sc-show 6s infinite;animation-delay:calc(var(--k) * .35s)}
@keyframes sc-hide{0%,30%{opacity:1;filter:none}40%,88%{opacity:0;filter:blur(4px)}100%{opacity:1}}
@keyframes sc-show{0%,32%{opacity:0}42%,88%{opacity:1}100%{opacity:0}}

/* --- Отзывы: звёзды загораются, сердечки всплывают --- */
html:not(#ui) body .sc-rev .sc-card{left:40px;top:30px;width:220px;height:150px;border-radius:22px!important;padding:16px;display:flex;flex-direction:column;gap:10px;animation:sc-float 6s ease-in-out infinite}
html:not(#ui) body .sc-rev .sc-card.back{left:70px;top:10px;opacity:.5;transform:rotate(6deg);animation:none}
@keyframes sc-float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-6px) rotate(-2deg)}}
html:not(#ui) body .sc-rev .sc-who{display:flex;align-items:center;gap:9px;font-size:13px}
html:not(#ui) body .sc-rev .sc-stars{display:flex;gap:4px}
html:not(#ui) body .sc-rev .sc-stars i{width:18px;height:18px;background:rgb(255 255 255/.18);-webkit-mask:url('/static/vendor/lucide-pack/star.svg') center/contain no-repeat;mask:url('/static/vendor/lucide-pack/star.svg') center/contain no-repeat;animation:sc-star 5s infinite}
html:not(#ui) body .sc-rev .sc-stars i:nth-child(2){animation-delay:.15s}html:not(#ui) body .sc-rev .sc-stars i:nth-child(3){animation-delay:.3s}html:not(#ui) body .sc-rev .sc-stars i:nth-child(4){animation-delay:.45s}html:not(#ui) body .sc-rev .sc-stars i:nth-child(5){animation-delay:.6s}
@keyframes sc-star{0%,10%{background:rgb(255 255 255/.18);transform:scale(.8)}16%{background:#fbbf24;transform:scale(1.25)}22%,88%{background:#fbbf24;transform:none}100%{background:rgb(255 255 255/.18)}}
html:not(#ui) body .sc-rev .sc-line{display:block;height:7px;width:var(--w);border-radius:4px;background:rgb(255 255 255/.14)}
html:not(#ui) body .sc-rev .sc-heart{position:absolute;left:calc(200px + var(--k) * 26px);top:150px;opacity:0;animation:sc-heart 5s infinite;animation-delay:calc(var(--k) * .7s + 1s)}
html:not(#ui) body .sc-rev .sc-heart .sc-ico{width:18px;height:18px}
@keyframes sc-heart{0%{opacity:0;transform:translateY(0) scale(.6)}15%{opacity:1}60%,100%{opacity:0;transform:translateY(-110px) scale(1.1) rotate(12deg)}}

@media (max-width:1180px){html:not(#ui) body :is(.legal-hero,.review-page-hero).ui-has-art .ui-hero-scene{left:auto;right:0;opacity:.55}}
@media (max-width:900px){html:not(#ui) body .ui-hero-scene{display:none!important}}
@media (prefers-reduced-motion:reduce){html:not(#ui) body .ui-scene *{animation:none!important;opacity:1!important}}

/* ---------- «Ваш VPN»: живые локации ---------- */
html:not(#ui) body .vpn-server-stack{position:relative}
html:not(#ui) body .vpn-server-card{position:relative;transition:background-color .25s ease!important}
html:not(#ui) body .vpn-server-card.ui-loc-hidden{opacity:0;transform:translate3d(18px,0,0);filter:blur(4px)}
html:not(#ui) body .vpn-server-card.ui-loc-in{opacity:1;transform:none;filter:none;transition:opacity .5s var(--ui-ease),transform .55s var(--ui-ease),filter .45s ease!important}
html:not(#ui) body .vpn-server-card:hover{background:rgb(255 255 255/.06)!important}
html:not(#ui) body .vpn-server-card .ui-loc-sig{display:inline-flex;align-items:flex-end;gap:2px;height:14px;margin-left:auto;margin-right:12px}
html:not(#ui) body .vpn-server-card .ui-loc-sig i{position:static!important;width:3px!important;height:calc(5px + var(--s) * 2.4px)!important;border-radius:1px!important;background:rgb(255 255 255/.16)!important;box-shadow:none!important;
  animation:ui-loc-sig 3.2s ease-in-out infinite!important;animation-delay:calc(var(--r) * .12s + var(--s) * .09s)!important}
@keyframes ui-loc-sig{0%,30%{background:rgb(255 255 255/.16)}40%,85%{background:#4ade80}100%{background:rgb(255 255 255/.16)}}
html:not(#ui) body .vpn-server-card[data-server-kind="bypass"] .ui-loc-sig i{animation-name:ui-loc-sig-b!important}
@keyframes ui-loc-sig-b{0%,30%{background:rgb(255 255 255/.16)}40%,85%{background:rgb(var(--ui-accent))}100%{background:rgb(255 255 255/.16)}}
html:not(#ui) body .vpn-server-card > i:last-child{animation:ui-loc-dot 2.4s ease-out infinite;animation-delay:calc(var(--r) * .2s)}
@keyframes ui-loc-dot{0%{box-shadow:0 0 0 0 currentColor}70%,100%{box-shadow:0 0 0 7px transparent}}
html:not(#ui) body .vpn-server-stack .ui-loc-scan{position:sticky;display:block;top:0;left:0;right:0;height:0;pointer-events:none;z-index:2}
html:not(#ui) body .vpn-server-stack .ui-loc-scan::before{content:"";position:absolute;left:0;right:0;top:0;height:60px;background:linear-gradient(180deg,transparent,rgb(var(--ui-accent)/.12),transparent);animation:ui-loc-scan 5s ease-in-out infinite}
@keyframes ui-loc-scan{0%{transform:translateY(-60px)}60%,100%{transform:translateY(420px)}}
html:not(#ui) body .own-vpn-network-preview-head small{font-variant-numeric:tabular-nums}
html:not(#ui) body .vpn-server-card{display:flex!important;align-items:center!important;gap:12px!important}
html:not(#ui) body .vpn-server-card .own-vpn-server-copy{flex:1 1 auto;min-width:0}
html:not(#ui) body .vpn-server-card .ui-loc-sig{margin:0!important}
html:not(#ui) body .vpn-server-card > i:last-child{position:static!important;flex:0 0 auto;margin:0 4px 0 0!important;transform:none!important}
html:not(#ui) body .sc-priv .sc-paper{gap:7px;padding:16px 14px}
html:not(#ui) body .sc-priv .sc-field{padding:6px 10px}
/* Подсветка фона — статичный CSS-слой вместо перерисовки на холсте каждый кадр */
html:not(#ui) body .ui-bg-wash{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:calc(.55 + var(--ui-wash,.6) * .7);
  background:radial-gradient(34vmax 34vmax at 16% 18%,rgb(var(--ui-accent)/.16),transparent 70%),radial-gradient(26vmax 26vmax at 74% 26%,rgb(var(--ui-accent-2)/.11),transparent 70%),radial-gradient(30vmax 30vmax at 84% 72%,rgb(var(--ui-accent)/.15),transparent 70%)}
/* Резерв места под данные, которые грузятся скриптом — подвал не прыгает */
html:not(#ui) body #reviewPageBody{min-height:680px}
@media (max-width:700px){html:not(#ui) body #reviewPageBody{min-height:900px}}
html:not(#ui) body .all-reviews-main{min-height:calc(100vh - 260px)}