/* ==========================================================================
   ARTΞMIDA UI V205 — левая панель кабинета, мягкие переходы между страницами,
   новая «Ваш VPN», кнопка «Ускорить» в заявке API. Подключается последним.
   ========================================================================== */

/* ---------- Шрифты V205: Geologica (заголовки) + Onest (текст) ---------- */
@font-face{font-family:"Geologica UI";font-style:normal;font-display:swap;font-weight:100 900;src:url(/static/fonts/geologica-cyrillic-full-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Geologica UI";font-style:normal;font-display:swap;font-weight:100 900;src:url(/static/fonts/geologica-latin-full-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+20BD,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Onest UI";font-style:normal;font-display:swap;font-weight:100 900;src:url(/static/fonts/onest-cyrillic-wght-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest UI";font-style:normal;font-display:swap;font-weight:100 900;src:url(/static/fonts/onest-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+20BD,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --ui-font:"Onest UI",-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",Roboto,Arial,sans-serif;
  --ui-font-display:"Geologica UI","Onest UI",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}
html:not(#ui) body{font-family:var(--ui-font)!important}
html:not(#ui) body :where(h1,h2,h3,h4){font-family:var(--ui-font-display)!important}
html:not(#ui) body main :is(h1,h2),html:not(#ui) body .landing-main h1,html:not(#ui) body :is(.auth-panel-head,.modal-head) :is(h2,h3),html:not(#ui) body .handoff-card h1,html:not(#ui) body .ui-home h2{
  font-weight:700!important;letter-spacing:-.03em!important;font-variation-settings:"SHRP" 40}
html:not(#ui) body.landing-page .landing-hero h1 span{font-weight:800!important;letter-spacing:-.04em!important;font-variation-settings:"SHRP" 40}
html:not(#ui) body :is(.landing-buy,.ui-home .btn.primary,.hero-actions .btn.primary,.checkout-card .btn.primary){font-weight:700!important;letter-spacing:-.005em!important}

/* ---------- Левая панель кабинета ---------- */
:root{--dock-w:68px;--dock-open:258px;--dock-gap:16px;--dock-edge:12px}
html:not(#ui) body .ui-cabbar{display:none!important}
html:not(#ui) body .ui-dock{display:none}
@media (min-width:1025px){
  /* контент сдвигается ровно настолько, чтобы колонна не наезжала на него */
  html.ui-has-dock:not(#ui) body .app-content{padding-left:clamp(0px,calc(2 * (var(--dock-edge) + var(--dock-w) + var(--dock-gap)) - (100vw - var(--ui-wrap))),calc(var(--dock-w) + var(--dock-gap)))!important}
  html:not(#ui) body .ui-dock{
    position:fixed;z-index:160;top:calc(50% + 34px);left:var(--dock-edge);translate:0 -50%;
    display:flex;flex-direction:column;gap:4px;width:var(--dock-w);max-height:calc(100vh - 120px);padding:8px;border-radius:24px;overflow:hidden auto;scrollbar-width:none;
    background:var(--lg-fill),var(--lg-tint)!important;box-shadow:var(--lg-shadow)!important;
    -webkit-backdrop-filter:var(--lg-safari);backdrop-filter:var(--lg-safari);
    --lg-tint:rgb(12 10 16/.30);
    transition:width .5s cubic-bezier(.22,1,.36,1),box-shadow .4s ease;
    animation:ui-dock-in .7s cubic-bezier(.22,1,.36,1) .12s backwards;contain:layout style}
  html[data-theme="pearl"]:not(#ui) body .ui-dock{--lg-tint:rgb(255 255 255/.45)}
  html.ui-lens:not(#ui) body .ui-dock.ui-lensed.ui-lensed.ui-lensed{
    -webkit-backdrop-filter:blur(2px) var(--ui-lens) blur(8px) saturate(1.6) brightness(1.06)!important;
            backdrop-filter:blur(2px) var(--ui-lens) blur(8px) saturate(1.6) brightness(1.06)!important}
  /* пока панель меняет ширину, линза отключается (карта рассчитана на старый размер) */
  html.ui-lens:not(#ui) body .ui-dock.is-moving.ui-lensed.ui-lensed.ui-lensed{
    -webkit-backdrop-filter:blur(10px) saturate(1.6) brightness(1.06)!important;backdrop-filter:blur(10px) saturate(1.6) brightness(1.06)!important}
  html:not(#ui) body .ui-dock.is-open{width:var(--dock-open);--lg-tint:rgb(16 13 20/.86);
    box-shadow:var(--lg-shadow),0 30px 70px -20px rgb(0 0 0/.65)!important}
  html[data-theme="pearl"]:not(#ui) body .ui-dock.is-open{--lg-tint:rgb(255 255 255/.9)}
html:not(#ui) body .ui-dock-link[href="/developer-api"] .ui-icon{--icon:url("/static/vendor/lucide-pack/code-xml.svg")!important}
html:not(#ui) body .ui-dock-link[href="/admin"] .ui-icon{--icon:url("/static/vendor/lucide-pack/shield-check.svg")!important}
}
@keyframes ui-dock-in{from{opacity:0;transform:translate3d(-18px,0,0) scale(.97)}to{opacity:1;transform:none}}

html:not(#ui) body .ui-dock-list{position:relative;display:flex;flex-direction:column;gap:4px}
html:not(#ui) body .ui-dock :is(.ui-dock-link,.ui-dock-toggle,.ui-dock-status){
  position:relative;z-index:1;display:flex;align-items:center;gap:12px;width:100%;min-height:50px;padding:0;border:0;border-radius:16px;background:none;
  color:var(--ui-text-2);text-decoration:none;font:inherit;cursor:pointer;white-space:nowrap;transition:color .25s ease,background-color .25s ease}
html:not(#ui) body .ui-dock-ico,html:not(#ui) body .ui-dock-burger,html:not(#ui) body .ui-dock-status > i{flex:0 0 52px;height:50px;display:grid;place-items:center}
html:not(#ui) body .ui-dock-ico .ui-icon{width:20px!important;height:20px!important;transition:color .25s ease,transform .35s cubic-bezier(.3,1.4,.5,1)}
html:not(#ui) body .ui-dock-link:hover{color:var(--ui-text)}
html:not(#ui) body .ui-dock-link:hover .ui-icon{transform:none}
html:not(#ui) body .ui-dock-link.active{color:var(--ui-text)}
html:not(#ui) body .ui-dock-link.active .ui-icon{color:rgb(var(--ui-accent))}
html:not(#ui) body .ui-dock-link:focus-visible,html:not(#ui) body .ui-dock-toggle:focus-visible{outline:2px solid rgb(var(--ui-accent)/.7);outline-offset:-2px}
/* скользящая подсветка */
html:not(#ui) body .ui-dock-ind{position:absolute;z-index:0;left:0;right:0;top:0;height:50px;border-radius:16px;opacity:0;pointer-events:none;
  background:linear-gradient(135deg,rgb(255 255 255/.15),rgb(255 255 255/.04));
  box-shadow:inset 0 0 0 1px rgb(255 255 255/.13),inset 1px 1px 0 rgb(255 255 255/.38),0 8px 18px -8px rgb(0 0 0/.55);
  transition:transform .48s cubic-bezier(.3,1.25,.5,1),height .3s ease,opacity .2s ease}
html:not(#ui) body .ui-dock-ind::before{content:"";position:absolute;left:-8px;top:14px;bottom:14px;width:3px;border-radius:3px;background:rgb(var(--ui-accent));box-shadow:0 0 12px rgb(var(--ui-accent)/.8)}
html[data-theme="pearl"]:not(#ui) body .ui-dock-ind{background:#fff;box-shadow:0 3px 10px rgb(120 40 80/.16)}
/* подписи */
html:not(#ui) body .ui-dock-txt{display:flex;flex-direction:column;gap:1px;min-width:0;opacity:0;transform:translate3d(-8px,0,0);pointer-events:none;
  transition:opacity .18s ease,transform .3s cubic-bezier(.22,1,.36,1)}
html:not(#ui) body .ui-dock-txt b{font-size:14.5px;font-weight:700;letter-spacing:-.005em;color:inherit;line-height:1.2}
html:not(#ui) body .ui-dock-txt small{font-size:12px;font-weight:550;color:var(--ui-text-3);line-height:1.25}
html:not(#ui) body .ui-dock.is-open .ui-dock-txt{opacity:1;transform:none;transition:opacity .34s ease calc(.08s + var(--i,0) * 26ms),transform .5s cubic-bezier(.22,1,.36,1) calc(.06s + var(--i,0) * 26ms)}
/* кнопка-«бургер» */
html:not(#ui) body .ui-dock-toggle{min-height:44px;color:var(--ui-text-3)}
html:not(#ui) body .ui-dock-toggle .ui-dock-txt b{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ui-text-3)}
html:not(#ui) body .ui-dock-burger{height:44px;position:relative}
html:not(#ui) body .ui-dock-burger i{position:absolute;left:50%;width:16px;height:2px;margin-left:-8px;border-radius:2px;background:currentColor;transition:transform .45s cubic-bezier(.3,1.3,.5,1),width .3s ease}
html:not(#ui) body .ui-dock-burger i:first-child{top:18px}
html:not(#ui) body .ui-dock-burger i:last-child{top:24px;width:10px;margin-left:-8px}
html:not(#ui) body .ui-dock.is-open .ui-dock-burger i:first-child{transform:translate3d(0,3px,0) rotate(45deg)}
html:not(#ui) body .ui-dock.is-open .ui-dock-burger i:last-child{width:16px;transform:translate3d(0,-3px,0) rotate(-45deg)}
html:not(#ui) body .ui-dock-toggle:hover{color:var(--ui-text)}
html:not(#ui) body .ui-dock-sep{display:block;height:1px;margin:6px 10px;background:linear-gradient(90deg,transparent,var(--ui-stroke-2),transparent)}
html:not(#ui) body .ui-dock-status{margin-top:4px;min-height:40px;cursor:default}
html:not(#ui) body .ui-dock-status > i{height:40px;position:relative}
html:not(#ui) body .ui-dock-status > i::before{content:"";width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 0 rgb(74 222 128/.55);animation:ui-live 2.2s ease-out infinite}
html:not(#ui) body .ui-dock-status b{font-size:12.5px;color:var(--ui-text)}
html:not(#ui) body .ui-dock-status small{font-size:11.5px}
html.ui-soft:not(#ui) body .ui-dock{animation:none}

/* ---------- Мягкие переходы между страницами ---------- */
/* При переходе внутри сайта: шапка, панель и меню уже на месте — без повторного «въезда»,
   содержимое лишь мягко проявляется, без размытия и затемнения */
@keyframes ui-soft-in{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}}
html.ui-soft:not(#ui) body :is(.site-top-hub,.sidebar,.mobile-nav,.ui-dock,.legal-hub,.ui-foot,.ui-site-footer){animation:none!important}
html.ui-soft:not(#ui) body main h1{animation:ui-soft-in .42s cubic-bezier(.22,1,.36,1) backwards!important}
html.ui-soft:not(#ui) body main :is(.page-hero,.review-page-hero,.faq-hero,.legal-hero,.all-reviews-hero,.hero-card,.own-vpn-hero-copy,.ovx-hero-copy) :is(p,.eyebrow,.overline,.faq-kicker,.ov-badge){animation:ui-soft-in .42s cubic-bezier(.22,1,.36,1) .04s backwards!important}
html.ui-soft:not(#ui) body main :is(.page-hero-actions,.hero-actions,.own-vpn-hero-actions,.faq-search-main,.popular-queries,.ovx-actions){animation:ui-soft-in .42s cubic-bezier(.22,1,.36,1) .08s backwards!important}
html.ui-soft:not(#ui) body :is(main.page-wrap,main.review-page-main,main.all-reviews-main,main.own-vpn-main,.legal-shell > main,main.faq-public-main) > :not(script):not([hidden]){animation:ui-soft-in .45s cubic-bezier(.22,1,.36,1) backwards!important;animation-delay:0s!important}
html.ui-soft:not(#ui) body :is(main.page-wrap,main.review-page-main,main.all-reviews-main,main.own-vpn-main,.legal-shell > main,main.faq-public-main) > :nth-child(2){animation-delay:.04s!important}
html.ui-soft:not(#ui) body :is(main.page-wrap,main.review-page-main,main.all-reviews-main,main.own-vpn-main,.legal-shell > main,main.faq-public-main) > :nth-child(n+3){animation-delay:.08s!important}
html.ui-soft:not(#ui) body :is(.keys-grid,.period-grid,.purchase-list,.os-picker,.install-key-list,.device-preset-row) > *{animation:ui-soft-in .4s cubic-bezier(.22,1,.36,1) backwards!important;animation-delay:calc(.05s + var(--n,0) * 30ms)!important}
html.ui-soft:not(#ui) body .faq-list > .faq-item{animation:ui-soft-in .4s cubic-bezier(.22,1,.36,1) backwards!important;animation-delay:calc(.04s + var(--n,0) * 22ms)!important}
html.ui-soft:not(#ui) body .ui-hero-art{animation:ui-soft-in .5s cubic-bezier(.22,1,.36,1) .06s backwards!important}
/* Подвал не всплывает к шапке, пока данные страницы ещё грузятся */
html:not(#ui) body .app-content > main,html:not(#ui) body .app-content > .page-wrap{min-height:calc(100vh - 150px)}

/* ---------- Заявка на API: «Ускорить» ---------- */
html:not(#ui) body .developer-application-review:has(.dev-boost){display:flex;flex-direction:column;gap:6px}
html:not(#ui) body .dev-boost{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px;margin-top:14px;padding:18px 20px;border-radius:20px;overflow:hidden;
  background:linear-gradient(120deg,rgb(var(--ui-accent)/.16),rgb(var(--ui-accent-2)/.06) 55%,rgb(255 255 255/.03));box-shadow:inset 0 0 0 1px rgb(var(--ui-accent)/.24),inset 1px 1px 0 rgb(255 255 255/.18)}
html:not(#ui) body .dev-boost::before{content:"";position:absolute;inset:-40% auto -40% -30%;width:40%;background:linear-gradient(90deg,transparent,rgb(255 255 255/.10),transparent);transform:skewX(-18deg);animation:dev-boost-shine 4.5s ease-in-out 1.2s infinite;pointer-events:none}
@keyframes dev-boost-shine{0%,55%{left:-40%}100%{left:130%}}
html:not(#ui) body .dev-boost-copy{display:flex;flex-direction:column;gap:5px;min-width:0}
html:not(#ui) body .dev-boost-copy > b{font-size:15.5px;font-weight:800;color:var(--ui-text)}
html:not(#ui) body .dev-boost-copy > span:last-child{font-size:13.5px;line-height:1.5;color:var(--ui-text-2);max-width:62ch}
html:not(#ui) body .dev-boost-badge{display:inline-flex;align-items:center;gap:7px;width:max-content;padding:4px 10px;border-radius:99px;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgb(var(--ui-accent));background:rgb(var(--ui-accent)/.12)}
html:not(#ui) body .dev-boost-badge i{width:6px;height:6px;border-radius:50%;background:rgb(var(--ui-accent));animation:ui-live 2s ease-out infinite}
html:not(#ui) body .dev-boost-actions{position:relative;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
html:not(#ui) body .dev-boost-toggle{display:inline-flex;align-items:center;gap:9px;height:48px;padding:0 22px;border:0;border-radius:16px;cursor:pointer;font:inherit;font-size:15px;font-weight:800;
  color:var(--ui-on-accent);background:linear-gradient(135deg,var(--ui-btn-a),var(--ui-btn-b));
  box-shadow:inset 0 0 0 1px rgb(255 255 255/.35),inset 1.5px 1.5px 0 rgb(255 255 255/.7),0 12px 30px -10px rgb(var(--ui-accent-2)/.75);transition:transform .2s ease,box-shadow .3s ease}
html:not(#ui) body .dev-boost-toggle:hover{box-shadow:inset 0 0 0 1px rgb(255 255 255/.4),inset 1.5px 1.5px 0 rgb(255 255 255/.8),0 16px 38px -10px rgb(var(--ui-accent-2)/.9)}
html:not(#ui) body .dev-boost-toggle:active{transform:scale(.97)}
html:not(#ui) body :is(.dev-boost-bolt,.dev-boost-cp){width:18px;height:18px;background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
html:not(#ui) body .dev-boost-bolt{--m:url('/static/vendor/lucide-pack/zap.svg');animation:dev-bolt 2.4s ease-in-out infinite}
html:not(#ui) body .dev-boost-cp{--m:url('/static/vendor/lucide-pack/copy.svg');width:16px;height:16px}
@keyframes dev-bolt{0%,80%,100%{transform:none}86%{transform:rotate(-14deg) scale(1.15)}92%{transform:rotate(8deg)}}
html:not(#ui) body .dev-boost.is-open .dev-boost-bolt{animation:none}
html:not(#ui) body .dev-boost-panel{display:flex;flex-direction:column;gap:8px;min-width:280px;animation:dev-boost-in .38s cubic-bezier(.22,1,.36,1) backwards}
html:not(#ui) body .dev-boost-panel[hidden]{display:none}
@keyframes dev-boost-in{from{opacity:0;transform:translate3d(0,-6px,0) scale(.98)}}
html:not(#ui) body .dev-boost-link{display:flex;align-items:center;gap:12px;padding:10px 14px 10px 10px;border-radius:16px;text-decoration:none;color:var(--ui-text);
  background:linear-gradient(135deg,rgb(255 255 255/.10),rgb(255 255 255/.03));box-shadow:var(--lg-shadow-sm);transition:background .25s ease}
html:not(#ui) body .dev-boost-link:hover{background:linear-gradient(135deg,rgb(255 255 255/.16),rgb(255 255 255/.05))}
html:not(#ui) body .dev-boost-link > span:nth-child(2){display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
html:not(#ui) body .dev-boost-link b{font-size:14px;font-weight:800}
html:not(#ui) body .dev-boost-link small{font-size:12px;color:var(--ui-text-3)}
html:not(#ui) body .dev-boost-link > i{font-style:normal;color:var(--ui-text-3)}
html:not(#ui) body .dev-boost-ico{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;color:#fff;background:linear-gradient(135deg,#37aee2,#1e96c8);box-shadow:inset 0 1px 0 rgb(255 255 255/.4)}
html:not(#ui) body .dev-boost-ico svg{width:19px;height:19px}
html:not(#ui) body .dev-boost-copybtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;border:0;border-radius:13px;cursor:pointer;font:inherit;font-size:13px;font-weight:700;color:var(--ui-text-2);background:rgb(255 255 255/.05);box-shadow:inset 0 0 0 1px var(--ui-stroke)}
html:not(#ui) body .dev-boost-copybtn:hover{color:var(--ui-text);background:rgb(255 255 255/.09)}
html[data-theme="pearl"]:not(#ui) body .dev-boost-link{background:rgb(255 255 255/.75)}
@media (max-width:700px){
  html:not(#ui) body .dev-boost{grid-template-columns:1fr;padding:16px}
  html:not(#ui) body .dev-boost-actions{align-items:stretch}
  html:not(#ui) body .dev-boost-toggle{justify-content:center}
  html:not(#ui) body .dev-boost-panel{min-width:0}
}

/* ---------- Главная: стойка серверов — ровная и лёгкая ---------- */
/* Без постоянного наклона: подписи стоят ровно и чётко, 3D остаётся в «сборке» при прокрутке */
html:not(#ui) body .ui-rack3{transform:none!important}
html:not(#ui) body .ui-rack-sec.assembled .ui-u3{will-change:auto}
html:not(#ui) body .ui-u3{background:linear-gradient(135deg,rgb(255 255 255/.07),rgb(255 255 255/.02)),rgb(20 18 26/.72)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html[data-theme="pearl"]:not(#ui) body .ui-u3{background:linear-gradient(135deg,rgb(255 255 255/.85),rgb(255 255 255/.6))!important}
html:not(#ui) body .ui-u3 :is(.u-leds,.u-flag,.u-name,.u-tag){align-self:center}
html:not(#ui) body .ui-u3 .u-name{line-height:1.2}
html:not(#ui) body .ui-rack3-head{opacity:1!important;margin-bottom:14px!important}
/* пинг по «палочкам» — одна светлая полоса бежит поверх (без перерисовки каждой палочки) */
html:not(#ui) body .ui-u3 .u-sig{position:relative;overflow:hidden;border-radius:3px}
html:not(#ui) body .ui-rack-sec.assembled .ui-u3 .u-sig i{animation:none!important;box-shadow:none!important}
html:not(#ui) body .ui-u3 .u-sig::after{content:"";position:absolute;top:0;bottom:0;left:0;width:14px;opacity:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgb(220 255 230/.7),transparent);mix-blend-mode:screen;transform:translate3d(-20px,0,0)}
html:not(#ui) body .ui-rack-sec.assembled .ui-u3 .u-sig::after{opacity:1;animation:ui-ping-sweep 2.8s cubic-bezier(.4,0,.2,1) infinite;animation-delay:calc(var(--i) * .22s + 1.4s)}
@keyframes ui-ping-sweep{0%{transform:translate3d(-20px,0,0)}55%,100%{transform:translate3d(160px,0,0)}}
html:not(#ui) body .ui-u3.is-off .u-sig::after{display:none}
/* нагрузка — через scaleX, а не width */
html:not(#ui) body .ui-u3 .u-meter i{width:100%!important;transform-origin:left;transform:scaleX(0);transition:transform 1.2s var(--ui-ease)}
html:not(#ui) body .ui-rack-sec.assembled .ui-u3 .u-meter i{transform:scaleX(calc(var(--w-n,.6)));animation:ui-load3b 4s ease-in-out infinite alternate!important;animation-delay:calc(var(--i) * -.6s + 2s)!important}
@keyframes ui-load3b{from{transform:scaleX(calc(var(--w-n,.6) * .6))}to{transform:scaleX(var(--w-n,.6))}}
html:not(#ui) body .ui-rack-sec.assembled .ui-u3 .u-leds i:not(:first-child){animation-name:ui-led3b!important}
@keyframes ui-led3b{0%{opacity:1}100%{opacity:.3}}
html:not(#ui) body .ui-rack-sec .ui-u3 .u-leds i:not(:first-child){background:rgb(var(--ui-accent))}

/* ---------- Телефон: нижнее меню и кнопка-меню одной высоты и на одной линии ---------- */
@media (max-width:1024px){
  html:not(#ui) body:has(.mobile-nav) .legal-hub.ui-fab > summary{width:68px!important;height:68px!important;border-radius:22px!important}
  html:not(#ui) body:has(.mobile-nav) .legal-hub.ui-fab{bottom:8px!important;bottom:calc(8px + env(safe-area-inset-bottom,0px))!important}
  html:not(#ui) body:has(.mobile-nav) .mobile-nav{bottom:8px!important;bottom:calc(8px + env(safe-area-inset-bottom,0px))!important;left:10px!important;right:86px!important;width:auto!important;max-width:none!important;margin:0!important}
}

/* анимации вне экрана — на паузе */
html:not(#ui) body .ui-off,html:not(#ui) body .ui-off *,html:not(#ui) body .ui-off ::before,html:not(#ui) body .ui-off ::after{animation-play-state:paused!important}

/* ---------- Поддержка: аккуратный чат в шапке ---------- */
html:not(#ui) body .legal-hero.ui-has-art .ui-hero-scene:has(.sc-chat2){top:28px!important;height:250px!important;width:310px!important}
html:not(#ui) body .sc-chat2{inset:0!important;display:flex!important;flex-direction:column!important;gap:0!important;padding:14px!important;border-radius:26px!important}
html:not(#ui) body .sc-chat2 .sc-chat-head{padding:0 2px 10px!important}
html:not(#ui) body .sc-chat2 .sc-who2{display:flex;flex-direction:column;line-height:1.2}
html:not(#ui) body .sc-chat2 .sc-who2 b{font-size:13px}
html:not(#ui) body .sc-chat2 .sc-who2 small{font-size:10.5px;color:var(--ui-text-3)}
html:not(#ui) body .sc-chat2 .sc-thread{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:7px;padding:10px 0}
html:not(#ui) body .sc-chat2 .sc-slot{display:grid;align-self:flex-start;max-width:86%}
html:not(#ui) body .sc-chat2 .sc-slot > *{grid-area:1/1;align-self:end}
html:not(#ui) body .sc-chat2 .sc-msg{max-width:86%!important;font-size:12px!important;animation:none;opacity:0;transform:translate3d(0,8px,0) scale(.96)}
html:not(#ui) body .sc-chat2 .sc-slot .sc-msg{max-width:none!important}
html:not(#ui) body .sc-chat2 .sc-msg.me{display:flex;align-items:center;gap:6px}
html:not(#ui) body .sc-chat2 .sc-msg .sc-ico{width:14px;height:14px}
html:not(#ui) body .sc-chat2 .sc-typing{animation:none;opacity:0;height:auto!important;padding:9px 11px!important;justify-self:start}
html:not(#ui) body .sc-chat2.play .m1{animation:sc2-a 8s var(--ui-ease) infinite}
html:not(#ui) body .sc-chat2.play .sc-typing{animation:sc2-t 8s ease infinite}
html:not(#ui) body .sc-chat2.play .m2{animation:sc2-b 8s var(--ui-ease) infinite}
html:not(#ui) body .sc-chat2.play .m3{animation:sc2-c 8s var(--ui-ease) infinite}
@keyframes sc2-a{0%,4%{opacity:0;transform:translate3d(0,8px,0) scale(.96)}9%,92%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes sc2-t{0%,15%{opacity:0}19%,38%{opacity:1}42%,100%{opacity:0}}
@keyframes sc2-b{0%,40%{opacity:0;transform:translate3d(0,8px,0) scale(.96)}45%,92%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes sc2-c{0%,62%{opacity:0;transform:translate3d(0,8px,0) scale(.96)}67%,92%{opacity:1;transform:none}98%,100%{opacity:0}}
html:not(#ui) body .sc-chat2 .sc-input{display:flex;align-items:center;gap:8px;height:38px;padding:0 6px 0 14px;border-radius:14px;font-size:12px;color:var(--ui-text-3);background:rgb(255 255 255/.06);box-shadow:inset 0 0 0 1px var(--ui-stroke)}
html:not(#ui) body .sc-chat2 .sc-input span{flex:1}
html:not(#ui) body .sc-chat2 .sc-input i{display:grid;place-items:center;width:28px;height:28px;border-radius:10px;color:var(--ui-on-accent);background:linear-gradient(135deg,var(--ui-btn-a),var(--ui-btn-b))}
html:not(#ui) body .sc-chat2 .sc-input .sc-ico{width:14px;height:14px}
@media (prefers-reduced-motion:reduce){html:not(#ui) body .sc-chat2 :is(.m1,.m2,.m3){opacity:1;transform:none}}

/* Фоновые пятна больше не «плавают»: огромный размытый слой, который двигается, перерисовывал
   всё стекло на странице каждый кадр — отсюда подтормаживания */
html:not(#ui) body .background-glow,html:not(#ui) body .background-glow.glow-b{animation:none!important;will-change:auto!important}

/* ---------- Главная: строка цены под кнопками ---------- */
html:not(#ui) body .ui-hero-meta{margin:14px 0 0;text-align:center;font-size:14px;font-weight:550;color:var(--ui-text-3);letter-spacing:.01em}
html:not(#ui) body .ui-hero-meta b{font-family:var(--ui-font-display);font-weight:700;color:var(--ui-text)}

/* ---------- Главная: короткие вопросы (свёрнуты, не мешают) ---------- */
html:not(#ui) body .ui-seo-faq{width:min(var(--ui-wrap),calc(100% - 32px));margin:clamp(40px,6vw,72px) auto 0}
html:not(#ui) body .ui-seo-faq-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:16px}
html:not(#ui) body .ui-seo-faq-head small{font-size:11px;font-weight:800;letter-spacing:.16em;color:rgb(var(--ui-accent));width:100%}
html:not(#ui) body .ui-seo-faq-head h2{margin:0!important;font-size:clamp(1.25rem,1rem + .8vw,1.7rem)!important}
html:not(#ui) body .ui-seo-faq-head a{margin-left:auto;font-size:14px;font-weight:700;color:var(--ui-text-2);text-decoration:none}
html:not(#ui) body .ui-seo-faq-head a:hover{color:var(--ui-text)}
html:not(#ui) body .ui-seo-faq-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-items:start}
html:not(#ui) body .ui-seo-q{border-radius:18px;background:linear-gradient(135deg,rgb(255 255 255/.05),rgb(255 255 255/.015));box-shadow:inset 0 0 0 1px var(--ui-stroke)}
html[data-theme="pearl"]:not(#ui) body .ui-seo-q{background:rgb(255 255 255/.6)}
html:not(#ui) body .ui-seo-q summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 18px;cursor:pointer;list-style:none;font-size:14.5px;font-weight:700;color:var(--ui-text)}
html:not(#ui) body .ui-seo-q summary::-webkit-details-marker{display:none}
html:not(#ui) body .ui-seo-q summary i{position:relative;flex:0 0 22px;height:22px;border-radius:8px;background:rgb(255 255 255/.06)}
html:not(#ui) body .ui-seo-q summary i::before,html:not(#ui) body .ui-seo-q summary i::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:2px;margin:-1px 0 0 -4.5px;border-radius:2px;background:currentColor;transition:transform .35s cubic-bezier(.3,1.3,.5,1)}
html:not(#ui) body .ui-seo-q summary i::after{transform:rotate(90deg)}
html:not(#ui) body .ui-seo-q[open] summary i::after{transform:none}
html:not(#ui) body .ui-seo-q p{margin:0;padding:0 18px 16px;font-size:14px;line-height:1.6;color:var(--ui-text-2);animation:ui-soft-in .35s cubic-bezier(.22,1,.36,1) backwards}
@media (max-width:760px){html:not(#ui) body .ui-seo-faq-list{grid-template-columns:1fr}}
html:not(#ui) body .dev-boost-bolt2{width:18px;height:18px;flex:0 0 18px;color:var(--ui-on-accent);animation:dev-bolt 2.6s ease-in-out infinite}
html:not(#ui) body .dev-boost.is-open .dev-boost-bolt2{animation:none}

/* ---------- V208: стойка — флаги без рамки, пинг мягким пульсом ---------- */
html:not(#ui) body .ui-u3 .u-flag{box-shadow:0 1px 3px rgb(0 0 0/.35)!important;border-radius:4px!important;width:24px!important;height:18px!important;object-fit:cover}
html:not(#ui) body .ui-u3 .u-sig::after{display:none!important}
html:not(#ui) body .ui-rack-sec.assembled .ui-u3:not(.is-off) .u-sig{animation:ui-sig-pulse 2.8s ease-in-out infinite;animation-delay:calc(var(--i) * .25s + 1.4s)}
@keyframes ui-sig-pulse{0%,100%{opacity:1}50%{opacity:.72}}

/* ---------- V208: «Ваш VPN» — все локации зелёные, флаги без плашки ---------- */
html:not(#ui) body .vpn-server-card > i:last-child{background:#4ade80!important;box-shadow:0 0 0 3px rgb(74 222 128/.16)!important}
html:not(#ui) body .vpn-server-card .ui-loc-sig i{background:#4ade80!important;animation:ui-loc-sig2 3s ease-in-out infinite!important;animation-delay:calc(var(--r) * .12s + var(--s) * .1s)!important}
html:not(#ui) body .vpn-server-card[data-server-kind="bypass"] .ui-loc-sig i,html:not(#ui) body .vpn-server-card[data-server-kind="auto-bypass"] .ui-loc-sig i{background:#4ade80!important}
@keyframes ui-loc-sig2{0%,100%{opacity:1}50%{opacity:.55}}
html:not(#ui) body main.ovx .ovx-net-radar span,html:not(#ui) body.own-vpn-catalog-stale main.ovx .ovx-net-radar span{background:#4ade80!important;box-shadow:0 0 14px #4ade80!important}
html:not(#ui) body main.ovx .ovx-net-grid .own-vpn-country-flag{background:none!important;box-shadow:none!important;border:0!important}
html:not(#ui) body main.ovx .ovx-net-grid .own-vpn-country-flag img{width:28px!important;height:21px!important;object-fit:cover;border-radius:5px!important;border:0!important;outline:0!important;box-shadow:0 2px 6px rgb(0 0 0/.35)!important}

/* ---------- V208: сцены в шапке «Условий», «Конфиденциальности», «Отзывов» не прижаты к меню ---------- */
html:not(#ui) body :is(.legal-hero,.review-page-hero).ui-has-art .ui-hero-scene{top:32px!important}
html:not(#ui) body :is(.legal-hero,.review-page-hero).ui-has-art{min-height:320px}
html:not(#ui) body .legal-small{font-size:12.5px!important;line-height:1.5!important;color:var(--ui-text-3)!important;margin-top:8px!important}

/* ---------- V208: примеры запросов API — светлее, аккуратнее, с копированием ---------- */
html:not(#ui) body .developer-example{margin:10px 16px!important;border:0!important;border-radius:16px!important;overflow:hidden;
  background:linear-gradient(135deg,rgb(255 255 255/.045),rgb(255 255 255/.015))!important;box-shadow:inset 0 0 0 1px rgb(255 255 255/.07)!important}
html:not(#ui) body .developer-example:last-child{margin-bottom:16px!important}
html:not(#ui) body .developer-example > summary{min-height:40px!important;padding:10px 14px!important;background:none!important;font-size:11px!important;font-weight:800!important;letter-spacing:.06em!important;color:var(--ui-text-2)!important;text-transform:uppercase}
html:not(#ui) body .developer-example[open] > summary{border-bottom:1px solid rgb(255 255 255/.06)!important;color:var(--ui-text)!important}
html:not(#ui) body .developer-example pre{position:relative;min-height:0!important;max-height:420px!important;padding:14px 16px!important;margin:0!important;border:0!important;border-radius:0!important;
  background:rgb(14 12 18/.55)!important;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace!important;font-size:12.5px!important;line-height:1.65!important;color:#e9e4ec!important;white-space:pre-wrap!important;word-break:break-word;overflow:auto}
html[data-theme="pearl"]:not(#ui) body .developer-example pre{background:rgb(255 255 255/.75)!important;color:#2a1d26!important}
html:not(#ui) body .developer-example pre code{font:inherit!important;color:inherit!important;background:none!important}
html:not(#ui) body .developer-example .j-k{color:#ffb3cb}
html:not(#ui) body .developer-example .j-s{color:#a7f3d0}
html:not(#ui) body .developer-example .j-n{color:#fcd34d}
html:not(#ui) body .developer-example .j-b{color:#93c5fd}
html[data-theme="pearl"]:not(#ui) body .developer-example .j-k{color:#b0306a}
html[data-theme="pearl"]:not(#ui) body .developer-example .j-s{color:#0f7a4d}
html[data-theme="pearl"]:not(#ui) body .developer-example .j-n{color:#a15c00}
html[data-theme="pearl"]:not(#ui) body .developer-example .j-b{color:#1d4ed8}
html:not(#ui) body .ui-code-copy{position:absolute;top:8px;right:8px;height:28px;padding:0 10px;border:0;border-radius:9px;cursor:pointer;font:inherit;font-family:var(--ui-font)!important;font-size:11.5px;font-weight:700;
  color:var(--ui-text-2);background:rgb(255 255 255/.08);box-shadow:inset 0 0 0 1px rgb(255 255 255/.08);opacity:0;transition:opacity .2s ease,background .2s ease}
html:not(#ui) body .developer-example pre:hover .ui-code-copy,html:not(#ui) body .ui-code-copy:focus-visible{opacity:1}
@media (hover:none){html:not(#ui) body .ui-code-copy{opacity:1}}
html:not(#ui) body .ui-code-copy:hover{background:rgb(255 255 255/.14);color:var(--ui-text)}

/* ---------- V209: отзывы на главной — плавная лента ---------- */
html:not(#ui) body .featured-reviews-shell{width:min(var(--ui-wrap),calc(100% - 32px))!important;margin:clamp(48px,7vw,96px) auto 0!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important}
html:not(#ui) body .featured-reviews-head{display:flex!important;align-items:flex-end!important;justify-content:space-between!important;gap:16px!important;flex-wrap:wrap;margin:0 0 18px!important;padding:0!important}
html:not(#ui) body .featured-reviews-head small{display:block;font-size:11px!important;font-weight:800!important;letter-spacing:.16em!important;color:rgb(var(--ui-accent))!important;margin-bottom:8px}
html:not(#ui) body .featured-reviews-head b{font-family:var(--ui-font-display);font-size:clamp(1.4rem,1rem + 1.2vw,2.1rem)!important;font-weight:700!important;letter-spacing:-.03em;color:var(--ui-text)!important}
html:not(#ui) body .featured-reviews-actions{display:flex!important;gap:8px!important}
html:not(#ui) body .featured-reviews-actions a{display:inline-flex!important;align-items:center!important;gap:8px!important;height:42px!important;padding:0 16px!important;border-radius:14px!important;font-size:14px!important;font-weight:700!important;text-decoration:none!important;color:var(--ui-text)!important;
  background:linear-gradient(135deg,rgb(255 255 255/.09),rgb(255 255 255/.03))!important;box-shadow:var(--lg-shadow-sm)!important;border:0!important}
html:not(#ui) body .featured-reviews-actions a.primary{color:var(--ui-on-accent)!important;background:linear-gradient(135deg,var(--ui-btn-a),var(--ui-btn-b))!important}
html:not(#ui) body .ui-arr{width:16px;height:16px;flex:0 0 16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s cubic-bezier(.3,1.4,.5,1)}
html:not(#ui) body a:hover > .ui-arr{transform:translateX(2px)}
html:not(#ui) body :is(.btn,.featured-reviews-actions a) .ui-arr{vertical-align:-3px;margin-left:2px}
html:not(#ui) body .ui-rv{position:relative;margin:0 -8px}
html:not(#ui) body .ui-rv::before,html:not(#ui) body .ui-rv::after{content:"";position:absolute;top:0;bottom:0;width:28px;z-index:2;pointer-events:none}
html:not(#ui) body .ui-rv-track{display:flex;gap:16px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;
  scrollbar-width:none;padding:8px 8px 18px;scroll-padding-inline:8px;-webkit-mask:linear-gradient(90deg,transparent,#000 8px,#000 calc(100% - 8px),transparent);mask:linear-gradient(90deg,transparent,#000 8px,#000 calc(100% - 8px),transparent);cursor:grab}
html:not(#ui) body .ui-rv-track::-webkit-scrollbar{display:none}
html:not(#ui) body .ui-rv-track.is-drag{scroll-snap-type:none;scroll-behavior:auto;cursor:grabbing;user-select:none}
html:not(#ui) body .ui-rv-track:focus-visible{outline:2px solid rgb(var(--ui-accent)/.5);outline-offset:2px;border-radius:24px}
html:not(#ui) body .ui-rv-card{flex:0 0 calc((100% - 32px) / 3);scroll-snap-align:start;display:flex;flex-direction:column;gap:14px;min-height:250px;padding:22px;border-radius:24px;
  background:linear-gradient(135deg,rgb(255 255 255/.07),rgb(255 255 255/.02)),rgb(18 16 22/.55);box-shadow:var(--lg-shadow-sm);
  opacity:.55;transform:scale(.97);transition:opacity .6s ease,transform .7s cubic-bezier(.22,1,.36,1)}
html:not(#ui) body .ui-rv-card.is-in{opacity:1;transform:none}
html[data-theme="pearl"]:not(#ui) body .ui-rv-card{background:linear-gradient(135deg,rgb(255 255 255/.85),rgb(255 255 255/.6))}
html:not(#ui) body .ui-rv-top{display:flex;align-items:center;justify-content:space-between}
html:not(#ui) body .ui-rv-q{font-family:Georgia,serif;font-size:42px;line-height:.6;height:22px;color:rgb(var(--ui-accent))}
html:not(#ui) body .ui-rv-stars{display:flex;gap:3px}
html:not(#ui) body .ui-rv-stars i{width:14px;height:14px;background:#fbbf24;-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}
html:not(#ui) body .ui-rv-card p{flex:1;margin:0;font-size:15px;line-height:1.6;color:var(--ui-text);display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}
html:not(#ui) body .ui-rv-card footer{display:flex;align-items:center;gap:10px;padding-top:12px;border-top:1px solid var(--ui-stroke)}
html:not(#ui) body .ui-rv-av{display:grid;place-items:center;width:34px;height:34px;border-radius:12px;font-weight:800;font-size:14px;color:var(--ui-on-accent);background:linear-gradient(135deg,var(--ui-btn-a),var(--ui-btn-b))}
html:not(#ui) body .ui-rv-card footer b{font-size:14px;font-weight:700;color:var(--ui-text)}
html:not(#ui) body .ui-rv-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:6px}
html:not(#ui) body .ui-rv-nav[hidden]{display:none}
html:not(#ui) body .ui-rv-btn{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:13px;cursor:pointer;color:var(--ui-text);background:linear-gradient(135deg,rgb(255 255 255/.09),rgb(255 255 255/.03));box-shadow:var(--lg-shadow-sm);transition:background .25s ease}
html:not(#ui) body .ui-rv-btn:hover{background:linear-gradient(135deg,rgb(255 255 255/.16),rgb(255 255 255/.05))}
html:not(#ui) body .ui-rv-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
html:not(#ui) body .ui-rv-dots{display:flex;gap:6px}
html:not(#ui) body .ui-rv-dots button{width:8px;height:8px;padding:0;border:0;border-radius:99px;cursor:pointer;background:rgb(255 255 255/.2);transition:width .4s cubic-bezier(.22,1,.36,1),background .3s ease}
html:not(#ui) body .ui-rv-dots button.on{width:26px;background:rgb(var(--ui-accent))}
html[data-theme="pearl"]:not(#ui) body .ui-rv-dots button{background:rgb(22 19 26/.15)}
@media (max-width:980px){html:not(#ui) body .ui-rv-card{flex-basis:calc((100% - 16px) / 2)}}
@media (max-width:640px){html:not(#ui) body .ui-rv-card{flex-basis:86%;scroll-snap-align:center}html:not(#ui) body .ui-rv-track{scroll-padding-inline:7%}}
html:not(#ui) body .ui-cta-tail{width:min(var(--ui-wrap),calc(100% - 32px));margin:clamp(48px,7vw,96px) auto 0}

/* ---------- V209: телефон — живые сцены в шапке «Условий», «Конфиденциальности», «Поддержки», «Отзывов» ---------- */
@media (max-width:900px){
  html:not(#ui) body :is(.legal-hero,.review-page-hero).ui-has-art{min-height:0!important;display:flex!important;flex-direction:column!important}
  html:not(#ui) body :is(.legal-hero,.review-page-hero).ui-has-art .ui-hero-scene{display:block!important;position:relative!important;inset:auto!important;top:auto!important;right:auto!important;left:auto!important;
    order:9;margin:24px auto 8px!important;width:min(300px,100%)!important;height:250px!important;opacity:1!important;transform:none!important;animation:ui-soft-in .6s cubic-bezier(.22,1,.36,1) .15s backwards}
  html:not(#ui) body .legal-hero.ui-has-art .ui-hero-scene:has(.sc-chat2){height:250px!important}
  html:not(#ui) body :is(.legal-hero,.review-page-hero) p{font-size:15px!important;line-height:1.6!important}
}

html:not(#ui) body .ui-rv-stars i{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z'/%3E%3C/svg%3E") center/contain no-repeat!important;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z'/%3E%3C/svg%3E") center/contain no-repeat!important}
/* подвал главной на телефоне — компактнее */
@media (max-width:640px){
  html:not(#ui) body .ui-site-footer{padding-top:20px!important;gap:12px!important}
  html:not(#ui) body .ui-site-footer :is(small,.ui-site-footer-sub){display:none!important}
  html:not(#ui) body .ui-site-footer nav{display:flex!important;flex-wrap:wrap!important;gap:4px 14px!important}
  html:not(#ui) body .ui-site-footer nav a,html:not(#ui) body .ui-site-footer a{font-size:13px!important}
}
@media (max-width:640px){
  html:not(#ui) body .ui-site-footer{padding-bottom:calc(88px + env(safe-area-inset-bottom))!important}
  html:not(#ui) body .ui-site-footer .ui-footer-meta{display:flex!important;flex-wrap:wrap!important;gap:4px 12px!important}
  html:not(#ui) body .ui-site-footer .ui-footer-meta a{font-size:12px!important;color:var(--ui-text-3)!important}
}
@media (max-width:640px){html:not(#ui) body .legal-hero h1 br{display:none}}

/* V212: истёкший ключ (в т.ч. льгота) — заметный призыв продлить */
.key-expired-note{margin:14px 0 0;padding:10px 12px;border:1px solid rgba(255,154,170,.22);border-radius:12px;color:var(--red);background:rgba(255,154,170,.07);font-size:.72rem;line-height:1.45}

/* V217: статус сети — стеклянная плашка, живая точка и мягкий блик по тексту */
html:not(#ui) body .ui-rack-status{gap:9px;padding:7px 14px 7px 11px;border-radius:999px;font-size:12.5px;font-weight:700;letter-spacing:.01em;
  color:#86efac;background:linear-gradient(135deg,rgb(74 222 128/.10),rgb(74 222 128/.03));box-shadow:inset 0 0 0 1px rgb(74 222 128/.22),0 6px 22px -10px rgb(74 222 128/.45);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);animation:ui-status-in .7s cubic-bezier(.22,1,.36,1) both}
html:not(#ui) body .ui-rack-status i{position:relative;flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 10px rgb(74 222 128/.9);animation:ui-status-dot 2.4s ease-in-out infinite}
html:not(#ui) body .ui-rack-status i::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1.5px solid #4ade80;animation:ui-status-ring 2.4s cubic-bezier(.22,1,.36,1) infinite}
html:not(#ui) body .ui-rack-status::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgb(255 255 255/.22) 48%,transparent 66%) no-repeat;background-size:250% 100%;animation:ui-status-sheen 4.5s ease-in-out 1s infinite}
html:not(#ui) body .ui-rack-status{position:relative;overflow:hidden}
html:not(#ui) body .ui-rack-status.is-off{color:#fcd34d;background:linear-gradient(135deg,rgb(252 211 77/.12),rgb(252 211 77/.03));box-shadow:inset 0 0 0 1px rgb(252 211 77/.25)}
html:not(#ui) body .ui-rack-status.is-off i{background:#fcd34d;box-shadow:0 0 10px rgb(252 211 77/.8);animation:ui-status-dot 1.4s ease-in-out infinite}
html:not(#ui) body .ui-rack-status.is-off i::after{border-color:#fcd34d}
html:not(#ui) body .ui-rack-status.is-off::before{animation:none;opacity:0}
html[data-theme="pearl"]:not(#ui) body .ui-rack-status{color:#15803d}
html[data-theme="pearl"]:not(#ui) body .ui-rack-status.is-off{color:#a16207}
@keyframes ui-status-in{from{opacity:0;transform:translateY(-4px) scale(.96)}to{opacity:1;transform:none}}
@keyframes ui-status-dot{0%,100%{transform:scale(1)}50%{transform:scale(.78)}}
@keyframes ui-status-ring{0%{transform:scale(1);opacity:.8}80%,100%{transform:scale(2.8);opacity:0}}
@keyframes ui-status-sheen{0%{background-position:150% 0}55%,100%{background-position:-60% 0}}
@media (prefers-reduced-motion:reduce){html:not(#ui) body .ui-rack-status,html:not(#ui) body .ui-rack-status i,html:not(#ui) body .ui-rack-status i::after,html:not(#ui) body .ui-rack-status::before{animation:none!important}}