/* ==========================================================================
   ARTΞMIDA UI V200 — единый дизайн-слой
   Подключается последним на всех страницах. Задаёт одну систему:
   шрифт, размеры, радиусы, стекло, кнопки, шапку, навигацию, анимации.
   Логику и разметку, которые строит app.js, не меняет — только внешний вид.
   ========================================================================== */

@font-face{font-family:"Inter UI";font-style:normal;font-display:swap;font-weight:100 900;src:url(/static/fonts/inter-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:"Inter UI";font-style:normal;font-display:swap;font-weight:100 900;src:url(/static/fonts/inter-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+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@view-transition{navigation:auto}

/* ---------- 1. Токены ---------- */
:root{
  --ui-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter UI",Inter,"Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ui-font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter UI",Inter,"Segoe UI Variable Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ui-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;

  --ui-accent:var(--theme-rgb,255 159 188);
  --ui-accent-2:var(--theme-rgb-2,220 90 137);
  --ui-on-accent:#2a0d19;
  --ui-btn-a:#ffc9d8;
  --ui-btn-b:#ef7aa4;

  --ui-text:#f4f2f3;
  --ui-text-2:rgb(244 242 243/.68);
  --ui-text-3:rgb(244 242 243/.46);
  --ui-fill:rgb(255 255 255/.052);
  --ui-fill-2:rgb(255 255 255/.04);
  --ui-fill-3:rgb(255 255 255/.075);
  --ui-fill-hover:rgb(255 255 255/.085);
  --ui-stroke:rgb(255 255 255/.085);
  --ui-stroke-2:rgb(255 255 255/.13);
  --ui-hl:rgb(255 255 255/.10);
  --ui-panel:rgb(18 18 22/.46);
  --ui-panel-solid:rgb(20 20 24/.94);
  --ui-shadow:0 1px 0 rgb(255 255 255/.04) inset,0 18px 48px -18px rgb(0 0 0/.55);
  --ui-shadow-pop:0 24px 70px -12px rgb(0 0 0/.6),0 2px 8px rgb(0 0 0/.25);
  --ui-blur:blur(16px) saturate(165%);
  --ui-blur-strong:blur(22px) saturate(180%);

  --ui-r-xl:28px;--ui-r-lg:22px;--ui-r-md:16px;--ui-r-sm:12px;--ui-r-xs:9px;
  --ui-h:46px;--ui-h-sm:38px;
  --ui-wrap:1180px;
  --ui-ease:cubic-bezier(.2,.8,.2,1);
  --ui-spring:cubic-bezier(.34,1.36,.5,1);
  --ui-fast:160ms;--ui-med:260ms;
}
html[data-theme="midnight"]{--ui-on-accent:#06122b;--ui-btn-a:#c3d5ff;--ui-btn-b:#7d9cf0}
html[data-theme="aurora"]{--ui-on-accent:#042019;--ui-btn-a:#b3f5ea;--ui-btn-b:#5fd3c1}
html[data-theme="obsidian"]{--ui-on-accent:#0b0d12;--ui-btn-a:#f1f4fa;--ui-btn-b:#b9c3d6}
html[data-theme="pearl"]{
  --ui-on-accent:#fff;--ui-btn-a:#e2558b;--ui-btn-b:#b83a6c;
  --ui-text:#16131a;
  --ui-text-2:rgb(22 19 26/.66);
  --ui-text-3:rgb(22 19 26/.46);
  --ui-fill:rgb(255 255 255/.62);
  --ui-fill-2:rgb(255 255 255/.5);
  --ui-fill-3:rgb(22 19 26/.045);
  --ui-fill-hover:rgb(22 19 26/.06);
  --ui-stroke:rgb(22 19 26/.08);
  --ui-stroke-2:rgb(22 19 26/.13);
  --ui-hl:rgb(255 255 255/.85);
  --ui-panel:rgb(255 255 255/.62);
  --ui-panel-solid:rgb(255 255 255/.96);
  --ui-shadow:0 1px 0 rgb(255 255 255/.9) inset,0 16px 40px -20px rgb(60 20 45/.22);
  --ui-shadow-pop:0 24px 60px -16px rgb(60 20 45/.28),0 2px 8px rgb(60 20 45/.08);
}

/* ---------- 2. База и типографика ---------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
html:not(#ui) body{font-family:var(--ui-font)!important;font-size:15px;line-height:1.5;letter-spacing:-.006em;color:var(--ui-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"cv11","ss03"}
html:not(#ui) body :where(button,input,select,textarea){font-family:inherit!important;letter-spacing:inherit}
html:not(#ui) body :where(h1,h2,h3,h4){font-family:var(--ui-font-display)!important;text-wrap:balance}
html:not(#ui) body :where(p,li){text-wrap:pretty}
html:not(#ui) body code,html:not(#ui) body kbd,html:not(#ui) body pre,html:not(#ui) body samp{font-family:var(--ui-mono)!important}

/* Заголовки: сплошной чистый цвет вместо «металлического» градиента, мягкий трекинг */
html:not(#ui) body main h1,html:not(#ui) body .landing-main h1,html:not(#ui) body .handoff-card h1,html:not(#ui) body .maintenance-shell h1{
  font-weight:700!important;letter-spacing:-.032em!important;line-height:1.04!important;
  color:var(--ui-text)!important;-webkit-text-fill-color:currentColor!important;background:none!important;
  text-shadow:none!important;filter:none!important}
html:not(#ui) body main h1 :is(em,span,b,i,strong),html:not(#ui) body main h2 :is(em,b,i){-webkit-text-fill-color:initial}
html:not(#ui) body main h1 em,html:not(#ui) body main h2 em,html:not(#ui) body main h1 .accent{
  font-style:normal;color:transparent!important;-webkit-text-fill-color:transparent!important;
  background:linear-gradient(100deg,rgb(var(--ui-accent)) 0%,color-mix(in srgb,rgb(var(--ui-accent)),rgb(var(--ui-accent-2)) 55%) 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important}
html:not(#ui) body main h2{font-weight:680!important;letter-spacing:-.024em!important;line-height:1.12!important;color:var(--ui-text)!important;-webkit-text-fill-color:currentColor!important;background:none!important;text-shadow:none!important}
html:not(#ui) body main h3{font-weight:640!important;letter-spacing:-.014em!important;line-height:1.25!important;color:var(--ui-text)}
html:not(#ui) body main :is(.page-hero,.section-title,.review-page-hero,.faq-hero,.all-reviews-hero,.legal-hero) p{color:var(--ui-text-2)!important}

html:not(#ui) body main .page-hero h1,html:not(#ui) body main .review-page-hero h1,html:not(#ui) body main .faq-hero h1,html:not(#ui) body main .all-reviews-hero h1,html:not(#ui) body main .legal-hero h1,html:not(#ui) body main .own-vpn-hero-copy h1,html:not(#ui) body main .support-hero h1,html:not(#ui) body main .install-hero h1,html:not(#ui) body main .sub-hero h1,html:not(#ui) body main h1{font-size:clamp(2.05rem,1.35rem + 2.6vw,3.55rem)!important}
html:not(#ui) body main .section-title h2,html:not(#ui) body main .section-head h2,html:not(#ui) body main .own-vpn-section-head h2,html:not(#ui) body main h2{font-size:clamp(1.45rem,1.1rem + 1.2vw,2.15rem)!important}
html:not(#ui) body main :is(.page-hero,.section-title) p,html:not(#ui) body main .ov-lead{font-size:clamp(.95rem,.9rem + .2vw,1.05rem)!important;line-height:1.55!important}

/* Надписи-подзаголовки: один стиль на всём сайте (без моноширинного шрифта) */
html:not(#ui) body :is(.overline,.eyebrow,.faq-kicker,.ov-badge,.legal-kicker,.section-kicker,.kicker,.purchase-auto-copy small,.own-vpn-float-copy small){
  font-family:var(--ui-font)!important;font-size:11.5px!important;font-weight:650!important;letter-spacing:.075em!important;
  text-transform:uppercase!important;line-height:1.3!important;color:rgb(var(--ui-accent))!important}
html[data-theme="pearl"]:not(#ui) body :is(.overline,.eyebrow,.faq-kicker,.ov-badge,.legal-kicker){color:rgb(var(--ui-accent-2))!important}
html:not(#ui) body :is(.eyebrow,.ov-badge){display:inline-flex!important;align-items:center;gap:8px;height:30px;padding:0 13px!important;border-radius:999px!important;border:1px solid var(--ui-stroke)!important;background:var(--ui-fill-2)!important;box-shadow:none!important;color:var(--ui-text-2)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html:not(#ui) body :is(.eyebrow,.ov-badge) i{width:6px!important;height:6px!important;border-radius:50%!important;background:rgb(var(--ui-accent))!important;box-shadow:0 0 0 4px rgb(var(--ui-accent)/.16)!important;animation:ui-pulse 2.6s ease-in-out infinite}
@keyframes ui-pulse{50%{box-shadow:0 0 0 7px rgb(var(--ui-accent)/0)}}

html:not(#ui) body ::selection{background:rgb(var(--ui-accent)/.3);color:var(--ui-text)}

/* Фокус для клавиатуры — заметный, но аккуратный */
html:not(#ui) body :focus{outline:none}
html:not(#ui) body :focus-visible{outline:2px solid rgb(var(--ui-accent)/.85)!important;outline-offset:2px!important}

/* ---------- 3. Стекло ---------- */
/* Главные поверхности — настоящее стекло. Вложенные — лёгкая заливка без размытия (быстро). */
html:not(#ui) body :is(.glass-panel,.glass-card){
  background:linear-gradient(180deg,rgb(255 255 255/.06),rgb(255 255 255/.02)) ,var(--ui-panel)!important;
  border:1px solid var(--ui-stroke)!important;
  box-shadow:var(--ui-shadow)!important;
  -webkit-backdrop-filter:var(--ui-blur)!important;backdrop-filter:var(--ui-blur)!important}
html[data-theme="pearl"]:not(#ui) body :is(.glass-panel,.glass-card){background:linear-gradient(180deg,rgb(255 255 255/.78),rgb(255 255 255/.56))!important}
html:not(#ui) body :is(.glass-panel,.glass-card) :is(.glass-panel,.glass-card),
html:not(#ui) body :is(.glass-panel,.glass-card) .glass-mini{
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  background:var(--ui-fill-2)!important;box-shadow:inset 0 1px 0 var(--ui-hl)!important}
html:not(#ui) body .glass-mini{
  background:var(--ui-fill)!important;border:1px solid var(--ui-stroke)!important;
  box-shadow:inset 0 1px 0 var(--ui-hl)!important;
  -webkit-backdrop-filter:var(--ui-blur)!important;backdrop-filter:var(--ui-blur)!important}

/* SVG-«линзы» отключены: они перерисовывались при каждом изменении размера и давали мерцание */
html:not(#ui) body .lg-optics,html:not(#ui) body .lg-real-optics .lg-optics{--lg-filter:none!important}
html:not(#ui) body .lg-specular-layer{display:none!important}
html:not(#ui) body [data-liquid-glass]::before,html:not(#ui) body [data-liquid-glass]::after{filter:none}

/* Фон: убираем сетку и тяжёлые «пятна»; цвет даёт фон-шейдер */
html:not(#ui) body::before,html:not(#ui) body::after{opacity:0!important;background:none!important}
html:not(#ui) body .landing-grid{display:none!important}
html:not(#ui) body .background-glow{opacity:.07!important;filter:blur(110px)!important;animation:none!important;will-change:auto!important}
html:not(#ui) body .theme-wash{display:none!important}

/* ---------- 4. Кнопки ---------- */
html:not(#ui) body :is(.btn,.landing-buy,.landing-telegram-bot,.own-vpn-register,.soft-action){
  font-family:var(--ui-font)!important;font-size:15px!important;font-weight:620!important;letter-spacing:-.01em!important;
  text-transform:none!important;line-height:1!important;
  min-height:var(--ui-h)!important;height:auto;padding:0 20px!important;gap:8px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  border-radius:999px!important;white-space:nowrap;
  transition:transform var(--ui-fast) var(--ui-ease),background-color var(--ui-fast) ease,box-shadow var(--ui-med) ease,filter var(--ui-fast) ease,opacity var(--ui-fast) ease!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  -webkit-tap-highlight-color:transparent;cursor:pointer;user-select:none}
html:not(#ui) body :is(.btn,.landing-buy,.landing-telegram-bot,.own-vpn-register,.soft-action)::before,
html:not(#ui) body :is(.btn,.landing-buy,.landing-telegram-bot)::after{display:none!important}
html:not(#ui) body :is(.btn,.landing-buy,.landing-telegram-bot,.own-vpn-register,.soft-action):active{transform:scale(.97)!important}
html:not(#ui) body .btn > span:last-child:not(:only-child){font-size:1em!important;opacity:.85;transition:transform var(--ui-fast) var(--ui-ease)}


/* Основная — сплошной акцент, тёмный текст: контраст > 7:1 */
html:not(#ui) body :is(.btn.primary,.landing-buy,.btn-primary){
  color:var(--ui-on-accent)!important;-webkit-text-fill-color:var(--ui-on-accent)!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--ui-btn-a),#fff 10%),color-mix(in srgb,var(--ui-btn-a),var(--ui-btn-b) 55%))!important;
  border:0!important;
  box-shadow:inset 0 1px 0 rgb(255 255 255/.5),inset 0 -1px 0 rgb(0 0 0/.08),0 8px 24px -8px rgb(var(--ui-accent-2)/.55)!important}
html:not(#ui) body :is(.btn.primary,.landing-buy,.btn-primary):hover{filter:brightness(1.05) saturate(1.05);box-shadow:inset 0 1px 0 rgb(255 255 255/.55),0 12px 30px -8px rgb(var(--ui-accent-2)/.65)!important}
html[data-theme="pearl"]:not(#ui) body :is(.btn.primary,.landing-buy,.btn-primary){
  color:#fff!important;-webkit-text-fill-color:#fff!important;
  background:linear-gradient(180deg,rgb(var(--ui-accent-2)),color-mix(in srgb,rgb(var(--ui-accent-2)),#000 14%))!important}

/* Вторичная — стеклянная капсула */
html:not(#ui) body :is(.btn.secondary,.btn.ghost,.landing-telegram-bot,.btn:not(.primary):not(.danger):not(.link)){
  color:var(--ui-text)!important;-webkit-text-fill-color:var(--ui-text)!important;
  background:var(--ui-fill)!important;border:1px solid var(--ui-stroke-2)!important;
  box-shadow:inset 0 1px 0 var(--ui-hl)!important}
html:not(#ui) body :is(.btn.secondary,.btn.ghost,.landing-telegram-bot):hover{background:var(--ui-fill-hover)!important}
html:not(#ui) body .btn.danger{color:#ffb4bf!important;background:rgb(255 90 110/.12)!important;border:1px solid rgb(255 120 140/.28)!important;box-shadow:none!important}
html[data-theme="pearl"]:not(#ui) body .btn.danger{color:#b4233c!important}
html:not(#ui) body .btn[disabled],html:not(#ui) body .btn.disabled,html:not(#ui) body .btn[aria-disabled="true"]{opacity:.5!important;filter:saturate(.6);cursor:not-allowed;transform:none!important}
html:not(#ui) body .btn.wide{width:100%}
html:not(#ui) body .btn.small,html:not(#ui) body .btn.sm{min-height:var(--ui-h-sm)!important;font-size:14px!important;padding:0 15px!important}

/* ---------- 5. Поля ввода ---------- */
html:not(#ui) body :is(input[type="text"],input[type="password"],input[type="search"],input[type="email"],input[type="number"],input[type="tel"],input[type="url"],textarea,select):not(.sr-only){
  font-size:16px!important;color:var(--ui-text)!important;
  border-radius:var(--ui-r-md)!important;border:1px solid var(--ui-stroke-2)!important;
  background:var(--ui-fill-2)!important;box-shadow:inset 0 1px 2px rgb(0 0 0/.12)!important;
  transition:border-color var(--ui-fast) ease,box-shadow var(--ui-fast) ease,background-color var(--ui-fast) ease!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html:not(#ui) body :is(input,textarea)::placeholder{color:var(--ui-text-3)!important;opacity:1}
html:not(#ui) body :is(input[type="text"],input[type="password"],input[type="search"],input[type="email"],input[type="number"],input[type="tel"],textarea,select):focus{
  border-color:rgb(var(--ui-accent)/.6)!important;box-shadow:0 0 0 4px rgb(var(--ui-accent)/.14)!important;outline:none!important}
html:not(#ui) body :is(input,textarea,select):focus-visible{outline:none!important}

/* ---------- 6. Шапка: одна для всех страниц ---------- */
html:not(#ui) body .site-top-hub{
  position:relative;z-index:190!important;
  width:min(var(--ui-wrap),calc(100% - 32px))!important;max-width:var(--ui-wrap)!important;
  min-height:62px!important;height:auto!important;
  margin:14px auto 0!important;padding:8px 8px 8px 14px!important;
  display:grid!important;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;align-items:center!important;gap:16px!important;
  border-radius:20px!important;
  background:linear-gradient(180deg,rgb(255 255 255/.065),rgb(255 255 255/.02)),var(--ui-panel)!important;
  border:1px solid var(--ui-stroke)!important;box-shadow:var(--ui-shadow)!important;
  -webkit-backdrop-filter:var(--ui-blur-strong)!important;backdrop-filter:var(--ui-blur-strong)!important;
  transform:none!important;top:auto}
html[data-theme="pearl"]:not(#ui) body .site-top-hub{background:rgb(255 255 255/.72)!important}
html:not(#ui) body .site-top-hub > .page-identity{display:none!important}
html:not(#ui) body .site-top-hub :is(.landing-logo,.legal-home,.mobile-brand){
  grid-column:1!important;justify-self:start;display:inline-flex!important;align-items:center!important;gap:10px!important;
  min-width:0;color:var(--ui-text)!important;text-decoration:none;padding:0!important;background:none!important;border:0!important;box-shadow:none!important}
html:not(#ui) body .site-top-hub :is(.landing-logo,.legal-home,.mobile-brand) .brand-mark{width:34px!important;height:34px!important;flex:0 0 34px;border-radius:11px!important}
html:not(#ui) body .site-top-hub :is(.landing-logo,.legal-home,.mobile-brand) :is(b,span:not(.brand-mark):not(.artemida-brand-glyph)){
  display:inline-flex!important;align-items:baseline;gap:5px;font-size:15px!important;font-weight:700!important;letter-spacing:.04em!important;white-space:nowrap;color:var(--ui-text)!important}
html:not(#ui) body .site-top-hub :is(.landing-logo,.legal-home,.mobile-brand) small{font-size:11px!important;font-weight:650!important;letter-spacing:.14em!important;color:rgb(var(--ui-accent))!important;opacity:1!important}
html:not(#ui) body .site-top-hub .mobile-brand > span:not(.brand-mark){flex-direction:row}
html:not(#ui) body .site-top-hub .mobile-brand b{display:inline!important}

html:not(#ui) body .site-top-hub > nav,html:not(#ui) body .site-top-hub .hub-center-nav,html:not(#ui) body .site-top-hub .faq-hub-nav{
  grid-column:2!important;display:flex!important;align-items:center!important;gap:2px!important;
  padding:4px!important;border-radius:14px!important;background:var(--ui-fill-2)!important;border:1px solid var(--ui-stroke)!important;
  position:static!important;transform:none!important;width:auto!important;margin:0!important;box-shadow:none!important}
html:not(#ui) body .site-top-hub > nav a,html:not(#ui) body .site-top-hub .hub-center-nav a,html:not(#ui) body .site-top-hub .faq-hub-nav a{
  position:relative;display:inline-flex!important;align-items:center!important;justify-content:center;
  height:34px!important;min-height:0!important;padding:0 14px!important;border-radius:10px!important;
  font-size:14px!important;font-weight:560!important;letter-spacing:-.01em!important;text-transform:none!important;
  color:var(--ui-text-2)!important;background:transparent!important;border:0!important;box-shadow:none!important;
  transition:color var(--ui-fast) ease,background-color var(--ui-fast) ease!important;white-space:nowrap}
html:not(#ui) body .site-top-hub > nav a:hover,html:not(#ui) body .site-top-hub .hub-center-nav a:hover,html:not(#ui) body .site-top-hub .faq-hub-nav a:hover{color:var(--ui-text)!important;background:var(--ui-fill-hover)!important}
html:not(#ui) body .site-top-hub nav a:is(.active,[aria-current="page"]){
  color:var(--ui-text)!important;background:var(--ui-fill-3)!important;
  box-shadow:inset 0 1px 0 var(--ui-hl),0 1px 3px rgb(0 0 0/.18)!important}
html[data-theme="pearl"]:not(#ui) body .site-top-hub nav a:is(.active,[aria-current="page"]){background:#fff!important;box-shadow:0 1px 3px rgb(60 20 45/.12)!important}
html:not(#ui) body .site-top-hub nav a:is(.active,[aria-current="page"])::after{display:none!important}

html:not(#ui) body .site-top-hub :is(.landing-nav-actions,.topbar-actions){
  grid-column:3!important;justify-self:end;display:flex!important;align-items:center!important;gap:6px!important;
  margin:0!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important;position:static!important}
html:not(#ui) body .site-top-hub > .legal-account-button{grid-column:3!important;justify-self:end}

/* Кнопки в шапке: тема, меню, вход — одинаковые 42px */
html:not(#ui) body .site-top-hub :is(.theme-trigger,.ui-hub-trigger){
  width:42px!important;height:42px!important;min-width:42px!important;padding:0!important;display:grid!important;place-items:center!important;
  border-radius:13px!important;color:var(--ui-text-2)!important;cursor:pointer;
  background:var(--ui-fill-2)!important;border:1px solid var(--ui-stroke)!important;box-shadow:inset 0 1px 0 var(--ui-hl)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  transition:background-color var(--ui-fast) ease,color var(--ui-fast) ease,transform var(--ui-fast) var(--ui-ease)!important}
html:not(#ui) body .site-top-hub :is(.theme-trigger,.ui-hub-trigger):hover{color:var(--ui-text)!important;background:var(--ui-fill-hover)!important}
html:not(#ui) body .site-top-hub :is(.theme-trigger,.ui-hub-trigger):active{transform:scale(.94)!important}
html:not(#ui) body .theme-trigger svg,html:not(#ui) body .ui-hub-trigger svg{width:19px!important;height:19px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;stroke-linecap:round;stroke-linejoin:round}
html:not(#ui) body .theme-trigger .theme-trigger-core{display:grid!important;place-items:center;width:auto!important;height:auto!important;background:none!important;border:0!important;box-shadow:none!important}
html:not(#ui) body .theme-trigger .ui-theme-dot{position:absolute;right:8px;bottom:8px;width:7px;height:7px;border-radius:50%;background:rgb(var(--ui-accent));box-shadow:0 0 0 2px var(--ui-panel-solid)}
html:not(#ui) body .theme-trigger{position:relative}

html:not(#ui) body .site-login-button{
  height:42px!important;min-height:42px!important;min-width:0!important;width:auto!important;
  padding:0 14px 0 5px!important;gap:9px!important;display:inline-flex!important;align-items:center!important;
  border-radius:13px!important;color:var(--ui-text)!important;cursor:pointer;
  background:var(--ui-fill-2)!important;border:1px solid var(--ui-stroke)!important;box-shadow:inset 0 1px 0 var(--ui-hl)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  transition:background-color var(--ui-fast) ease,transform var(--ui-fast) var(--ui-ease)!important}
html:not(#ui) body .site-login-button:hover{background:var(--ui-fill-hover)!important}
html:not(#ui) body .site-login-button:active{transform:scale(.97)!important}
html:not(#ui) body .site-login-button .site-login-label{font-size:14px!important;font-weight:620!important;letter-spacing:-.01em!important;text-transform:none!important;color:var(--ui-text)!important;white-space:nowrap;max-width:140px;overflow:hidden;text-overflow:ellipsis}
html:not(#ui) body .site-login-avatar{
  width:32px!important;height:32px!important;min-width:32px!important;flex:0 0 32px!important;border-radius:10px!important;
  display:grid!important;place-items:center!important;overflow:hidden;font-size:13px!important;font-weight:700!important;
  color:var(--ui-on-accent)!important;
  background:linear-gradient(160deg,color-mix(in srgb,var(--ui-btn-a),#fff 8%),color-mix(in srgb,var(--ui-btn-a),var(--ui-btn-b) 60%))!important;
  box-shadow:inset 0 1px 0 rgb(255 255 255/.45)!important}
/* Гость: понятная иконка человека вместо пустого квадрата */
html:not(#ui) body .site-login-avatar.guest-logo::before{
  content:""!important;position:static!important;inset:auto!important;transform:none!important;display:block!important;
  width:17px!important;height:17px!important;background:currentColor!important;opacity:.9;filter:none!important;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 20.5c1.2-3.6 4.1-5.5 7.5-5.5s6.3 1.9 7.5 5.5'/%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' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 20.5c1.2-3.6 4.1-5.5 7.5-5.5s6.3 1.9 7.5 5.5'/%3E%3C/svg%3E") center/contain no-repeat!important}
html:not(#ui) body .site-login-avatar.guest-logo::after{display:none!important}
html:not(#ui) body .site-login-avatar.has-photo{background:var(--ui-fill-3)!important}
html:not(#ui) body .site-login-avatar.has-photo::before{display:none!important}
html:not(#ui) body .site-login-avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit}

/* ---------- 7. Меню «Ещё» (бывшая плавающая кнопка) ---------- */
html:not(#ui) body .legal-hub{position:fixed;z-index:150}
html:not(#ui) body .legal-hub.ui-in-header{position:relative!important;inset:auto!important;right:auto!important;bottom:auto!important;left:auto!important;top:auto!important;width:auto!important;height:auto!important;margin:0!important;z-index:5;display:block!important}
html:not(#ui) body .legal-hub.ui-in-header > summary{
  transform:none!important;animation:none!important;
  width:42px!important;height:42px!important;min-width:42px!important;padding:0!important;display:grid!important;place-items:center!important;list-style:none;
  border-radius:13px!important;color:var(--ui-text-2)!important;cursor:pointer;
  background:var(--ui-fill-2)!important;border:1px solid var(--ui-stroke)!important;box-shadow:inset 0 1px 0 var(--ui-hl)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;position:relative!important;inset:auto!important;
  transition:background-color var(--ui-fast) ease,color var(--ui-fast) ease,transform var(--ui-fast) var(--ui-ease)!important}
html:not(#ui) body .legal-hub.ui-in-header > summary::-webkit-details-marker{display:none}
html:not(#ui) body .legal-hub.ui-in-header > summary::before,html:not(#ui) body .legal-hub.ui-in-header > summary::after{display:none!important}
html:not(#ui) body .legal-hub.ui-in-header > summary:hover{color:var(--ui-text)!important;background:var(--ui-fill-hover)!important}
html:not(#ui) body .legal-hub.ui-in-header > summary:active{transform:scale(.94)!important}
html:not(#ui) body .legal-hub.ui-in-header > summary svg{width:19px!important;height:19px!important;stroke:currentColor!important;stroke-width:1.9!important;fill:none!important;stroke-linecap:round}
html:not(#ui) body .legal-hub.ui-in-header[open] > summary{color:var(--ui-text)!important;background:var(--ui-fill-3)!important}
html:not(#ui) body .legal-hub.ui-in-header > nav{
  position:absolute!important;top:calc(100% + 10px)!important;right:0!important;left:auto!important;bottom:auto!important;
  width:min(300px,calc(100vw - 24px))!important;max-height:none!important;padding:6px!important;margin:0!important;
  display:flex!important;flex-direction:column!important;gap:2px!important;
  border-radius:20px!important;border:1px solid var(--ui-stroke-2)!important;
  background:var(--ui-panel-solid)!important;box-shadow:var(--ui-shadow-pop)!important;
  -webkit-backdrop-filter:var(--ui-blur-strong)!important;backdrop-filter:var(--ui-blur-strong)!important;
  transform-origin:top right;animation:ui-pop var(--ui-med) var(--ui-spring) backwards;transform:none;opacity:1;visibility:visible}
@keyframes ui-pop{from{opacity:0;transform:translateY(-6px) scale(.96)}to{opacity:1;transform:none}}
html:not(#ui) body .legal-hub.ui-in-header > nav a{
  display:flex!important;align-items:center!important;gap:12px!important;padding:9px 10px!important;border-radius:14px!important;
  color:var(--ui-text)!important;background:transparent!important;border:0!important;box-shadow:none!important;transition:background-color var(--ui-fast) ease!important;text-decoration:none}
html:not(#ui) body .legal-hub.ui-in-header > nav a:hover{background:var(--ui-fill-hover)!important}
html:not(#ui) body .legal-hub.ui-in-header > nav a b{display:block;font-size:14px!important;font-weight:600!important;color:var(--ui-text)!important;letter-spacing:-.01em}
html:not(#ui) body .legal-hub.ui-in-header > nav a small{display:block;font-size:12px!important;color:var(--ui-text-3)!important;line-height:1.35}
html:not(#ui) body .legal-hub.ui-in-header .hub-link-icon{
  width:34px!important;height:34px!important;flex:0 0 34px!important;display:grid!important;place-items:center!important;border-radius:10px!important;
  background:rgb(var(--ui-accent)/.12)!important;color:rgb(var(--ui-accent))!important;border:0!important;box-shadow:none!important}
html[data-theme="pearl"]:not(#ui) body .legal-hub.ui-in-header .hub-link-icon{color:rgb(var(--ui-accent-2))!important}
html:not(#ui) body .legal-hub.ui-in-header .hub-link-icon :is(.ui-icon,.vicon){width:17px!important;height:17px!important}

/* ---------- 8. Боковая панель кабинета (десктоп) ---------- */
@media (min-width:1025px){
  html:not(#ui) body .sidebar{
    position:fixed!important;left:16px!important;top:50%!important;bottom:auto!important;transform:translateY(-50%)!important;
    width:64px!important;height:auto!important;max-height:calc(100vh - 32px);padding:8px!important;gap:6px!important;
    border-radius:22px!important;border:1px solid var(--ui-stroke)!important;
    background:linear-gradient(180deg,rgb(255 255 255/.06),rgb(255 255 255/.02)),var(--ui-panel)!important;box-shadow:var(--ui-shadow)!important;
    -webkit-backdrop-filter:var(--ui-blur-strong)!important;backdrop-filter:var(--ui-blur-strong)!important;
    transition:width var(--ui-med) var(--ui-ease),box-shadow var(--ui-med) ease!important;overflow:hidden}
  html[data-theme="pearl"]:not(#ui) body .sidebar{background:rgb(255 255 255/.75)!important}
  html:not(#ui) body .sidebar .side-link,html:not(#ui) body .sidebar .side-brand{
    width:46px!important;height:46px!important;min-height:46px!important;padding:0!important;display:grid!important;place-items:center!important;
    border-radius:14px!important;border:1px solid transparent!important;background:transparent!important;box-shadow:none!important;color:var(--ui-text-2)!important;
    transition:background-color var(--ui-fast) ease,color var(--ui-fast) ease!important;position:relative}
  html:not(#ui) body .sidebar .side-link:hover{background:var(--ui-fill-hover)!important;color:var(--ui-text)!important}
  html:not(#ui) body .sidebar .side-link.active{background:rgb(var(--ui-accent)/.14)!important;border-color:rgb(var(--ui-accent)/.22)!important;color:rgb(var(--ui-accent))!important}
  html:not(#ui) body .sidebar .side-link .side-icon{width:auto!important;height:auto!important;background:none!important;border:0!important;box-shadow:none!important;display:grid;place-items:center;color:inherit!important}
  html:not(#ui) body .sidebar .side-link .ui-icon{width:20px!important;height:20px!important}
  html:not(#ui) body .sidebar .side-copy{display:none!important}
  /* Подсказка при наведении */
  html:not(#ui) body .sidebar .side-link[aria-label]:hover::after{
    content:attr(aria-label);position:fixed;left:94px;transform:translateY(0);padding:6px 10px;border-radius:9px;white-space:nowrap;pointer-events:none;
    font-size:13px;font-weight:560;color:var(--ui-text);background:var(--ui-panel-solid);border:1px solid var(--ui-stroke-2);box-shadow:var(--ui-shadow-pop);z-index:300;
    animation:ui-fade var(--ui-fast) ease backwards}
  html:not(#ui) body .sidebar .side-foot{display:flex!important;flex-direction:column!important;align-items:center!important;gap:6px!important;padding:6px 0 0!important;margin:0!important;border-top:1px solid var(--ui-stroke)!important}
  html:not(#ui) body .sidebar .side-status{display:grid!important;place-items:center;width:46px;height:18px;padding:0!important;background:none!important;border:0!important}
  html:not(#ui) body .sidebar .side-status i{width:7px!important;height:7px!important;border-radius:50%!important;background:#5fe0a6!important;box-shadow:0 0 0 3px rgb(95 224 166/.18)!important}
  html:not(#ui) body .sidebar .side-nav{display:flex!important;flex-direction:column!important;gap:6px!important;padding:6px 0!important;margin:0!important;border-top:1px solid var(--ui-stroke)!important}
  html:not(#ui) body .sidebar .side-brand .brand-mark{width:30px!important;height:30px!important}
  /* Контент и шапка центрированы по экрану — одинаково на всех страницах */
  html:not(#ui) body .app-content{margin-left:0!important;padding-left:0!important;width:auto!important;max-width:none!important}
  html:not(#ui) body .app-content > .page-wrap,html:not(#ui) body .app-content > main{width:min(var(--ui-wrap),calc(100% - 32px))!important;max-width:var(--ui-wrap)!important;margin-left:auto!important;margin-right:auto!important;padding-left:0!important;padding-right:0!important}
}
@media (min-width:1025px) and (max-width:1340px){
  html:not(#ui) body .app-content{padding-left:88px!important;padding-right:8px!important}
}
@keyframes ui-fade{from{opacity:0}to{opacity:1}}

/* ---------- 9. Общая сетка страниц ---------- */
html:not(#ui) body :is(.landing-shell,.legal-shell,.app-content){overflow:visible}
html:not(#ui) body main:is(.page-wrap,.review-page-main,.all-reviews-main,.own-vpn-main,.legal-main,.faq-public-main,.support-main){
  width:min(var(--ui-wrap),calc(100% - 32px))!important;max-width:var(--ui-wrap)!important;margin-left:auto!important;margin-right:auto!important;
  padding-left:0!important;padding-right:0!important;padding-top:clamp(24px,4vw,44px)!important}
html:not(#ui) body :is(.page-footer,.legal-footer,.faq-footer,.site-footer){
  width:min(var(--ui-wrap),calc(100% - 32px));margin:40px auto 0!important;padding:22px 0 30px!important;
  border-top:1px solid var(--ui-stroke)!important;font-size:13px!important;color:var(--ui-text-3)!important;background:none!important}
html:not(#ui) body :is(.page-footer,.legal-footer,.faq-footer) a{color:var(--ui-text-2)!important;transition:color var(--ui-fast) ease}
html:not(#ui) body :is(.page-footer,.legal-footer,.faq-footer) a:hover{color:var(--ui-text)!important}

/* Карточки: один радиус и отступы */
html:not(#ui) body main :is(.glass-card,.hero-card,.cabinet-card,.configurator,.checkout-card,.key-card,.empty-card,.referral-card,.referral-rules,.diagnostic-card,.legal-card,.support-step,.support-strip,.install-config,.install-guide,.profile-summary,.review-page-card,.faq-hero,.all-reviews-hero,.own-vpn-hero-copy,.own-vpn-visual,.own-vpn-cta){border-radius:var(--ui-r-xl)!important}
html:not(#ui) body main :is(.glass-card,.glass-panel) :is(.glass-card,.glass-panel){border-radius:var(--ui-r-lg)!important}

/* Пустое состояние */
html:not(#ui) body .empty-card{padding:clamp(28px,4vw,44px) 24px!important;text-align:center}
html:not(#ui) body .empty-card .empty-icon{width:56px!important;height:56px!important;margin:0 auto 16px!important;border-radius:18px!important;display:grid!important;place-items:center!important;background:rgb(var(--ui-accent)/.12)!important;color:rgb(var(--ui-accent))!important;border:1px solid rgb(var(--ui-accent)/.2)!important;box-shadow:none!important}
html:not(#ui) body .empty-card h3{font-size:20px!important;margin-bottom:6px!important}
html:not(#ui) body .empty-card p{color:var(--ui-text-2)!important;max-width:440px;margin-left:auto;margin-right:auto}
html:not(#ui) body .empty-card .btn{margin-top:14px}

/* Плашка поддержки внизу страниц */
html:not(#ui) body .support-strip{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;align-items:center!important;gap:18px!important;padding:22px 24px!important}
html:not(#ui) body .support-strip .support-icon{width:48px!important;height:48px!important;border-radius:15px!important;display:grid!important;place-items:center!important;background:rgb(var(--ui-accent)/.12)!important;color:rgb(var(--ui-accent))!important;border:1px solid rgb(var(--ui-accent)/.2)!important;box-shadow:none!important}
html:not(#ui) body .support-strip h3{font-size:18px!important;margin:4px 0 2px!important}
html:not(#ui) body .support-strip p{margin:0!important;color:var(--ui-text-2)!important;font-size:14px!important}
@media (max-width:700px){html:not(#ui) body .support-strip{grid-template-columns:auto minmax(0,1fr)!important}html:not(#ui) body .support-strip .btn{grid-column:1/-1!important;width:100%}}

/* Иконки: всегда видимые, цвет от текста */
html:not(#ui) body :is(.ui-icon,.vicon){flex:0 0 auto}

/* ---------- 10. Мобильная шапка и нижняя панель ---------- */
@media (max-width:1024px){
  html:not(#ui) body .sidebar{display:none!important}
  html:not(#ui) body .app-content{margin-left:0!important;padding-left:0!important}
}
@media (max-width:820px){
  html:not(#ui) body .site-top-hub{
    grid-template-columns:minmax(0,1fr) auto!important;grid-template-rows:auto auto;gap:10px 8px!important;
    width:calc(100% - 20px)!important;margin:max(10px,env(safe-area-inset-top)) auto 0!important;padding:8px!important;border-radius:20px!important}
  html:not(#ui) body .site-top-hub :is(.landing-logo,.legal-home,.mobile-brand){grid-column:1!important;grid-row:1!important;padding-left:4px!important}
  html:not(#ui) body .site-top-hub :is(.landing-nav-actions,.topbar-actions),html:not(#ui) body .site-top-hub > .legal-account-button{grid-column:2!important;grid-row:1!important}
  html:not(#ui) body .site-top-hub > nav,html:not(#ui) body .site-top-hub .hub-center-nav,html:not(#ui) body .site-top-hub .faq-hub-nav{
    grid-column:1/-1!important;grid-row:2!important;display:grid!important;grid-auto-flow:column;grid-auto-columns:1fr;width:100%!important;border-radius:13px!important;padding:3px!important}
  html:not(#ui) body .site-top-hub > nav a,html:not(#ui) body .site-top-hub .hub-center-nav a,html:not(#ui) body .site-top-hub .faq-hub-nav a{height:34px!important;padding:0 6px!important;font-size:13.5px!important;border-radius:10px!important}
  html:not(#ui) body .site-login-button{padding:0 5px!important}
  html:not(#ui) body .site-login-button .site-login-label{display:none!important}
  html:not(#ui) body .site-top-hub :is(.theme-trigger,.ui-hub-trigger),html:not(#ui) body .legal-hub.ui-in-header > summary{width:42px!important;height:42px!important}
}
@media (max-width:360px){
  html:not(#ui) body .site-top-hub :is(.landing-logo,.legal-home,.mobile-brand) small{display:none!important}
}

/* Нижняя панель кабинета: 5 пунктов, без прокрутки, как таб-бар iOS */
@media (max-width:1024px){
  html:not(#ui) body .mobile-nav{
    position:fixed!important;z-index:180!important;display:grid!important;grid-auto-flow:column!important;grid-auto-columns:1fr!important;
    left:10px!important;right:10px!important;bottom:calc(8px + env(safe-area-inset-bottom))!important;top:auto!important;
    width:auto!important;max-width:560px;margin:0 auto!important;height:62px!important;padding:5px!important;gap:2px!important;
    overflow:hidden!important;border-radius:22px!important;border:1px solid var(--ui-stroke-2)!important;
    background:linear-gradient(180deg,rgb(255 255 255/.07),rgb(255 255 255/.02)),rgb(16 16 20/.7)!important;
    box-shadow:var(--ui-shadow-pop)!important;
    -webkit-backdrop-filter:var(--ui-blur-strong)!important;backdrop-filter:var(--ui-blur-strong)!important;transform:none!important}
  html[data-theme="pearl"]:not(#ui) body .mobile-nav{background:rgb(255 255 255/.8)!important}
  html:not(#ui) body .mobile-nav .mobile-link{
    min-width:0!important;width:auto!important;height:100%!important;padding:0!important;margin:0!important;
    display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:3px!important;
    border-radius:17px!important;border:0!important;background:transparent!important;box-shadow:none!important;color:var(--ui-text-3)!important;
    transition:color var(--ui-fast) ease,background-color var(--ui-fast) ease!important;scroll-snap-align:none}
  html:not(#ui) body .mobile-nav .mobile-link b{font-size:10.5px!important;font-weight:600!important;letter-spacing:0!important;line-height:1.1!important;color:inherit!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  html:not(#ui) body .mobile-nav .mobile-link :is(.ui-icon,.vicon){width:21px!important;height:21px!important}
  html:not(#ui) body .mobile-nav .mobile-link .mobile-nav-logo{width:22px!important;height:22px!important;border-radius:7px!important}
  html:not(#ui) body .mobile-nav .mobile-link.active{color:rgb(var(--ui-accent))!important;background:rgb(var(--ui-accent)/.12)!important}
  html[data-theme="pearl"]:not(#ui) body .mobile-nav .mobile-link.active{color:rgb(var(--ui-accent-2))!important}
  /* Связь и FAQ есть в шапке и меню — внизу их не дублируем */
  html:not(#ui) body .mobile-nav .mobile-link[data-support],html:not(#ui) body .mobile-nav .mobile-link[href="/faq"]{display:none!important}
  html:not(#ui) body:has(.mobile-nav) main{padding-bottom:calc(92px + env(safe-area-inset-bottom))!important}
  html:not(#ui) body:has(.mobile-nav) :is(.page-footer){margin-bottom:calc(80px + env(safe-area-inset-bottom))!important}
}

/* ---------- 11. Попап выбора темы ---------- */
html:not(#ui) body .theme-popover{
  position:fixed!important;z-index:400!important;left:var(--appearance-left,auto)!important;top:var(--appearance-top,auto)!important;right:auto!important;bottom:auto!important;
  width:min(360px,var(--appearance-max-width,92vw))!important;max-height:var(--appearance-max-height,80vh)!important;overflow:auto!important;
  padding:14px!important;border-radius:24px!important;border:1px solid var(--ui-stroke-2)!important;
  background:var(--ui-panel-solid)!important;box-shadow:var(--ui-shadow-pop)!important;
  -webkit-backdrop-filter:var(--ui-blur-strong)!important;backdrop-filter:var(--ui-blur-strong)!important;
  opacity:0;transform:translateY(-6px) scale(.97);transform-origin:top right;
  transition:opacity var(--ui-fast) ease,transform var(--ui-med) var(--ui-spring)!important;overscroll-behavior:contain}
html:not(#ui) body .theme-popover.shown{opacity:1!important;transform:none!important}
html:not(#ui) body .theme-popover-backdrop{position:fixed!important;inset:0!important;z-index:390!important;background:transparent!important;border:0!important;padding:0!important;margin:0!important;cursor:default}
@media (max-width:640px){
  html:not(#ui) body .theme-popover{left:10px!important;right:10px!important;top:auto!important;bottom:calc(10px + env(safe-area-inset-bottom))!important;width:auto!important;
    border-radius:28px!important;transform:translateY(24px);transform-origin:bottom center}
  html:not(#ui) body .theme-popover-backdrop.shown{background:rgb(0 0 0/.35)!important;transition:background-color var(--ui-med) ease}
}

/* ---------- 12. Плавность ---------- */
/* Переходы между страницами — нативные (View Transitions), без искусственной задержки */
::view-transition-old(root),::view-transition-new(root){animation-duration:.22s;animation-timing-function:var(--ui-ease)}
html:not(#ui) body.page-leaving{opacity:1!important;transform:none!important;filter:none!important}
html:not(#ui) body .site-top-hub{view-transition-name:ui-header}
::view-transition-group(ui-header){animation-duration:0s}
/* Появление блоков при прокрутке — короче и мягче */
html:not(#ui) body [data-reveal]{transition:opacity .45s var(--ui-ease),transform .45s var(--ui-ease)!important}
html:not(#ui) body [data-reveal]:not(.is-in){transform:translate3d(0,10px,0)}

@media (prefers-reduced-motion:reduce){
  html:not(#ui) body *,html:not(#ui) body *::before,html:not(#ui) body *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* Скроллбар */
html{scrollbar-width:thin;scrollbar-color:rgb(var(--ui-accent)/.25) transparent}
html:not(#ui) body ::-webkit-scrollbar{width:10px;height:8px}
html:not(#ui) body ::-webkit-scrollbar-track{background:transparent}
html:not(#ui) body ::-webkit-scrollbar-thumb{background:rgb(var(--ui-accent)/.22);border:3px solid transparent;background-clip:padding-box;border-radius:99px}

/* ---------- 13. Попап «Оформление» ---------- */
html:not(#ui) body .ui-appearance{padding:16px!important}
html:not(#ui) body .ui-appearance-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 0 14px}
html:not(#ui) body .ui-appearance-head b{display:block;font-size:17px;font-weight:680;letter-spacing:-.02em;color:var(--ui-text)}
html:not(#ui) body .ui-appearance-head small{display:block;font-size:13px;color:var(--ui-text-3);margin-top:1px}
html:not(#ui) body .ui-appearance-close{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;border:0;padding:0;cursor:pointer;color:var(--ui-text-2);background:var(--ui-fill-3);transition:background-color var(--ui-fast) ease,color var(--ui-fast) ease}
html:not(#ui) body .ui-appearance-close:hover{color:var(--ui-text);background:var(--ui-fill-hover)}
html:not(#ui) body .ui-appearance-close svg{width:16px;height:16px}
html:not(#ui) body .ui-appearance-label{font-size:12px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--ui-text-3);margin:2px 2px 8px}
html:not(#ui) body .ui-theme-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-bottom:16px}
html:not(#ui) body .ui-theme-choice{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 2px 7px;border:0;border-radius:14px;background:transparent;color:var(--ui-text-2);cursor:pointer;transition:background-color var(--ui-fast) ease,color var(--ui-fast) ease}
html:not(#ui) body .ui-theme-choice:hover{background:var(--ui-fill-hover);color:var(--ui-text)}
html:not(#ui) body .ui-theme-choice b{font-size:12px;font-weight:620;letter-spacing:-.01em;line-height:1.1;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html:not(#ui) body .ui-theme-choice small{display:none}
html:not(#ui) body .ui-theme-swatch{position:relative;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--sw-bg) 0 49%,transparent 50%),radial-gradient(circle at 70% 70%,var(--sw-a),var(--sw-b) 90%);
  box-shadow:0 0 0 1px rgb(255 255 255/.12) inset,0 6px 16px -6px var(--sw-b);
  transition:transform var(--ui-med) var(--ui-spring),box-shadow var(--ui-fast) ease}
html:not(#ui) body .ui-theme-swatch i{position:absolute;inset:auto 6px 6px auto;width:14px;height:14px;border-radius:50%;background:var(--sw-bg);box-shadow:0 0 0 2px rgb(255 255 255/.55)}
html:not(#ui) body .ui-theme-swatch em{opacity:0;transform:scale(.6);color:#fff;display:grid;place-items:center;transition:opacity var(--ui-fast) ease,transform var(--ui-med) var(--ui-spring);filter:drop-shadow(0 1px 2px rgb(0 0 0/.35))}
html:not(#ui) body .ui-theme-swatch em svg{width:20px;height:20px}
html:not(#ui) body .ui-theme-choice:hover .ui-theme-swatch{transform:scale(1.06)}
html:not(#ui) body .ui-theme-choice:active .ui-theme-swatch{transform:scale(.94)}
html:not(#ui) body .ui-theme-choice.active{color:var(--ui-text)}
html:not(#ui) body .ui-theme-choice.active .ui-theme-swatch{box-shadow:0 0 0 2px var(--ui-panel-solid),0 0 0 4px var(--sw-a),0 8px 20px -6px var(--sw-b)}
html:not(#ui) body .ui-theme-choice.active .ui-theme-swatch em{opacity:1;transform:none}
html:not(#ui) body .ui-bg-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 14px}
html:not(#ui) body .ui-bg-choice{display:flex;flex-direction:column;gap:6px;padding:5px 5px 8px;border-radius:16px;border:1px solid var(--ui-stroke);background:var(--ui-fill-2);color:var(--ui-text-2);cursor:pointer;text-align:left;transition:border-color var(--ui-fast) ease,background-color var(--ui-fast) ease,transform var(--ui-fast) var(--ui-ease)}
html:not(#ui) body .ui-bg-choice:hover{background:var(--ui-fill-hover);color:var(--ui-text)}
html:not(#ui) body .ui-bg-choice:active{transform:scale(.97)}
html:not(#ui) body .ui-bg-choice b{font-size:12.5px;font-weight:620;padding:0 4px;letter-spacing:-.01em}
html:not(#ui) body .ui-bg-preview{display:block;height:46px;border-radius:11px;box-shadow:inset 0 0 0 1px rgb(255 255 255/.06)}
html:not(#ui) body .ui-bg-choice.active{border-color:rgb(var(--ui-accent)/.65);background:rgb(var(--ui-accent)/.1);color:var(--ui-text)}
html:not(#ui) body .ui-bg-intensity{display:grid!important;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:var(--ui-fill-2);border:1px solid var(--ui-stroke)}
html:not(#ui) body .ui-bg-intensity[hidden]{display:none!important}
html:not(#ui) body .ui-bg-intensity span{font-size:13px;font-weight:560;color:var(--ui-text-2)}
html:not(#ui) body .ui-bg-intensity output{font-size:13px;font-variant-numeric:tabular-nums;color:var(--ui-text-2);min-width:36px;text-align:right}
html:not(#ui) body .ui-bg-intensity input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:6px;padding:0!important;border:0!important;border-radius:99px!important;box-shadow:none!important;
  background:linear-gradient(90deg,rgb(var(--ui-accent)) var(--ui-range,60%),var(--ui-fill-3) var(--ui-range,60%))!important;cursor:pointer}
html:not(#ui) body .ui-bg-intensity input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgb(0 0 0/.3),0 0 0 .5px rgb(0 0 0/.1)}
html:not(#ui) body .ui-bg-intensity input[type="range"]::-moz-range-thumb{width:22px;height:22px;border:0;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgb(0 0 0/.3)}
@media (max-width:380px){html:not(#ui) body .ui-theme-swatch{width:40px;height:40px}}

/* Смена темы: круговое раскрытие (View Transitions) или мягкая смена цвета */
html.ui-theme-vt::view-transition-old(root),html.ui-theme-vt::view-transition-new(root){animation:none;mix-blend-mode:normal}
html.ui-theme-vt::view-transition-group(ui-header){animation:none}
html.ui-theme-fade body,html.ui-theme-fade body *{transition:background-color .3s ease,color .3s ease,border-color .3s ease,fill .3s ease!important}

/* ---------- 14. Фон-шейдер ---------- */
html:not(#ui) body .shader-background-canvas{display:none!important}
html:not(#ui) body .ui-bg-canvas{position:fixed;inset:0;width:100vw;height:100vh;height:100lvh;z-index:-5;pointer-events:none;display:block;
  animation:ui-fade .7s ease backwards}
html:not(#ui) body .ui-bg-canvas.is-2d{z-index:-1;opacity:.95}
html:not(#ui) body{background-attachment:fixed}
html:not(#ui) body.ui-bg-fallback{background:radial-gradient(70% 60% at 20% 15%,rgb(var(--ui-accent)/.16),transparent 70%),radial-gradient(60% 60% at 85% 80%,rgb(var(--ui-accent-2)/.14),transparent 70%),var(--theme-base,#08090b)!important}
html:not(#ui) body[data-bg="liquid"] .background-glow,html:not(#ui) body[data-bg="aurora"] .background-glow,html:not(#ui) body[data-bg="silk"] .background-glow{display:none!important}

/* ---------- 15. Иконки: единый набор линейных иконок (Lucide) ---------- */
html:not(#ui) body .ui-icon{background:currentColor!important;background-image:none!important;box-shadow:none!important;-webkit-mask:var(--icon) center/contain no-repeat!important;mask:var(--icon) center/contain no-repeat!important}
html:not(#ui) body .vicon{display:inline-block;width:18px;height:18px;flex:0 0 auto;background:currentColor!important;background-image:none!important;-webkit-mask:var(--vicon) center/contain no-repeat!important;mask:var(--vicon) center/contain no-repeat!important}
html:not(#ui) body .i-account{--icon:url('/static/vendor/lucide-pack/circle-user-round.svg')}html:not(#ui) body .i-auto-account{--icon:url('/static/vendor/lucide-pack/user-round-plus.svg')}html:not(#ui) body .i-bypass-route{--icon:url('/static/vendor/lucide-pack/route.svg')}html:not(#ui) body .i-card{--icon:url('/static/vendor/lucide-pack/credit-card.svg')}html:not(#ui) body .i-chevron{--icon:url('/static/vendor/lucide-pack/chevron-down.svg')}html:not(#ui) body .i-copy{--icon:url('/static/vendor/lucide-pack/copy.svg')}html:not(#ui) body .i-device{--icon:url('/static/vendor/lucide-pack/smartphone.svg')}html:not(#ui) body .i-dot{--icon:url('/static/vendor/lucide-pack/circle-dot.svg')}html:not(#ui) body .i-exit{--icon:url('/static/vendor/lucide-pack/log-in.svg')}html:not(#ui) body .i-external{--icon:url('/static/vendor/lucide-pack/arrow-up-right.svg')}html:not(#ui) body .i-eye-off{--icon:url('/static/vendor/lucide-pack/eye-off.svg')}html:not(#ui) body .i-eye{--icon:url('/static/vendor/lucide-pack/eye.svg')}html:not(#ui) body .i-faq-search{--icon:url('/static/vendor/lucide-pack/search.svg')}html:not(#ui) body .i-globe-orbit{--icon:url('/static/vendor/lucide-pack/globe.svg')}html:not(#ui) body .i-headset{--icon:url('/static/vendor/lucide-pack/headphones.svg')}html:not(#ui) body .i-help{--icon:url('/static/vendor/lucide-pack/circle-help.svg')}html:not(#ui) body .i-key{--icon:url('/static/vendor/lucide-pack/key-round.svg')}html:not(#ui) body .i-link{--icon:url('/static/vendor/lucide-pack/link.svg')}html:not(#ui) body .i-logout-door{--icon:url('/static/vendor/lucide-pack/log-out.svg')}html:not(#ui) body .i-password-key{--icon:url('/static/vendor/lucide-pack/lock-keyhole.svg')}html:not(#ui) body .i-photo-refresh{--icon:url('/static/vendor/lucide-pack/refresh-cw.svg')}html:not(#ui) body .i-privacy-lock{--icon:url('/static/vendor/lucide-pack/lock.svg')}html:not(#ui) body .i-purchases{--icon:url('/static/vendor/lucide-pack/receipt-text.svg')}html:not(#ui) body .i-security-lock{--icon:url('/static/vendor/lucide-pack/shield-check.svg')}html:not(#ui) body .i-service-compass{--icon:url('/static/vendor/lucide-pack/compass.svg')}html:not(#ui) body .i-shield{--icon:url('/static/vendor/lucide-pack/shield.svg')}html:not(#ui) body .i-support-spark{--icon:url('/static/vendor/lucide-pack/message-circle.svg')}html:not(#ui) body .i-sync{--icon:url('/static/vendor/lucide-pack/refresh-cw.svg')}html:not(#ui) body .i-telegram-plane{--icon:url('/static/vendor/lucide-pack/send.svg')}html:not(#ui) body .i-terms-scroll{--icon:url('/static/vendor/lucide-pack/scroll-text.svg')}html:not(#ui) body .i-users{--icon:url('/static/vendor/lucide-pack/users.svg')}
html:not(#ui) body .ico-arrow-right{--vicon:url('/static/vendor/lucide-pack/arrow-right.svg')}html:not(#ui) body .ico-badge{--vicon:url('/static/vendor/lucide-pack/badge-check.svg')}html:not(#ui) body .ico-bot{--vicon:url('/static/vendor/lucide-pack/bot.svg')}html:not(#ui) body .ico-card{--vicon:url('/static/vendor/lucide-pack/credit-card.svg')}html:not(#ui) body .ico-check{--vicon:url('/static/vendor/lucide-pack/circle-check.svg')}html:not(#ui) body .ico-chevron{--vicon:url('/static/vendor/lucide-pack/chevron-down.svg')}html:not(#ui) body .ico-code{--vicon:url('/static/vendor/lucide-pack/code-xml.svg')}html:not(#ui) body .ico-crypto{--vicon:url('/static/vendor/lucide-pack/bitcoin.svg')}html:not(#ui) body .ico-external{--vicon:url('/static/vendor/lucide-pack/arrow-up-right.svg')}html:not(#ui) body .ico-flask{--vicon:url('/static/vendor/lucide-pack/flask-conical.svg')}html:not(#ui) body .ico-globe{--vicon:url('/static/vendor/lucide-pack/globe.svg')}html:not(#ui) body .ico-grip{--vicon:url('/static/vendor/lucide-pack/grip.svg')}html:not(#ui) body .ico-headset{--vicon:url('/static/vendor/lucide-pack/headset.svg')}html:not(#ui) body .ico-key{--vicon:url('/static/vendor/lucide-pack/key-round.svg')}html:not(#ui) body .ico-layers{--vicon:url('/static/vendor/lucide-pack/layers.svg')}html:not(#ui) body .ico-link{--vicon:url('/static/vendor/lucide-pack/link.svg')}html:not(#ui) body .ico-login{--vicon:url('/static/vendor/lucide-pack/log-in.svg')}html:not(#ui) body .ico-map{--vicon:url('/static/vendor/lucide-pack/map.svg')}html:not(#ui) body .ico-message{--vicon:url('/static/vendor/lucide-pack/message-circle.svg')}html:not(#ui) body .ico-monitor{--vicon:url('/static/vendor/lucide-pack/monitor.svg')}html:not(#ui) body .ico-network{--vicon:url('/static/vendor/lucide-pack/network.svg')}html:not(#ui) body .ico-package{--vicon:url('/static/vendor/lucide-pack/package.svg')}html:not(#ui) body .ico-phone{--vicon:url('/static/vendor/lucide-pack/smartphone.svg')}html:not(#ui) body .ico-pin{--vicon:url('/static/vendor/lucide-pack/map-pin.svg')}html:not(#ui) body .ico-refresh{--vicon:url('/static/vendor/lucide-pack/refresh-cw.svg')}html:not(#ui) body .ico-route{--vicon:url('/static/vendor/lucide-pack/route.svg')}html:not(#ui) body .ico-sbp{--vicon:url('/static/vendor/lucide-pack/qr-code.svg')}html:not(#ui) body .ico-send{--vicon:url('/static/vendor/lucide-pack/send.svg')}html:not(#ui) body .ico-server{--vicon:url('/static/vendor/lucide-pack/server.svg')}html:not(#ui) body .ico-shield{--vicon:url('/static/vendor/lucide-pack/shield-check.svg')}html:not(#ui) body .ico-store{--vicon:url('/static/vendor/lucide-pack/store.svg')}html:not(#ui) body .ico-users{--vicon:url('/static/vendor/lucide-pack/users.svg')}html:not(#ui) body .ico-wallet{--vicon:url('/static/vendor/lucide-pack/wallet-cards.svg')}html:not(#ui) body .ico-x{--vicon:url('/static/vendor/lucide-pack/x.svg')}html:not(#ui) body .ico-zap{--vicon:url('/static/vendor/lucide-pack/zap.svg')}
@media (max-width:1024px){
  html:not(#ui) body .mobile-nav::before,html:not(#ui) body .mobile-nav::after,html:not(#ui) body .mobile-nav .mobile-link::before,html:not(#ui) body .mobile-nav .mobile-link::after{display:none!important}
  html:not(#ui) body .mobile-nav .mobile-link .ui-icon{background:currentColor!important}
}

html:not(#ui) body .theme-trigger::before,html:not(#ui) body .theme-trigger::after{display:none!important}
/* Кнопки в шапке страниц: переносятся, а не обрезаются */
html:not(#ui) body .page-hero-actions{display:flex!important;flex-wrap:wrap!important;gap:10px!important}
@media (max-width:700px){html:not(#ui) body .page-hero-actions > :is(.btn,a,button){flex:1 1 150px!important;min-width:0!important}}
html:not(#ui) body .empty-card p{font-size:15px!important;line-height:1.5!important}
/* Ключи: второй заголовок дублировал первый */
html:not(#ui) body[data-page="keys"] .section-block.flush > .section-title{display:none!important}

/* ---------- 16. Главная ---------- */
html{background:var(--theme-base,#08090b)}
html:not(#ui) body.landing-page .landing-shell{min-height:100svh;height:auto!important;display:flex;flex-direction:column}
html:not(#ui) body.landing-page .landing-main{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;
  width:min(var(--ui-wrap),calc(100% - 32px))!important;margin:0 auto!important;padding:clamp(28px,7vh,72px) 0 48px!important;min-height:0!important;height:auto!important;gap:0!important}
html:not(#ui) body.landing-page .landing-hero{display:flex!important;flex-direction:column!important;align-items:center!important;width:100%!important;height:auto!important;min-height:0!important;gap:0!important}
html:not(#ui) body.landing-page .landing-brand-stage{min-height:0!important;height:auto!important;gap:14px!important;display:flex!important;flex-direction:column!important;align-items:center!important}
html:not(#ui) body.landing-page .artemida-emblem{width:clamp(170px,22vw,236px)!important;height:clamp(170px,22vw,236px)!important;margin:0 0 10px!important}
html:not(#ui) body.landing-page .landing-hero h1{margin:0!important;height:auto!important}
html:not(#ui) body.landing-page .ui-hero-tagline{margin:6px 0 0;max-width:460px;text-align:center;font-size:clamp(15px,1.4vw,17px);line-height:1.5;color:var(--ui-text-2);letter-spacing:-.01em}
html:not(#ui) body.landing-page .landing-hero-actions{margin:28px auto 0!important;width:auto!important;display:flex!important;flex-wrap:wrap;justify-content:center!important;gap:10px!important}
html:not(#ui) body.landing-page .landing-hero-actions .btn{min-width:170px;min-height:50px!important;font-size:16px!important}
html:not(#ui) body.landing-page .own-vpn-float:not([hidden]){
  width:min(680px,100%)!important;margin:40px auto 0!important;padding:14px 14px 14px 16px!important;border-radius:22px!important;
  background:linear-gradient(180deg,rgb(255 255 255/.06),rgb(255 255 255/.02)),var(--ui-panel)!important;border:1px solid var(--ui-stroke)!important;box-shadow:var(--ui-shadow)!important;
  -webkit-backdrop-filter:var(--ui-blur)!important;backdrop-filter:var(--ui-blur)!important;gap:4px 14px!important}
html[data-theme="pearl"]:not(#ui) body.landing-page .own-vpn-float:not([hidden]){background:rgb(255 255 255/.7)!important}
html:not(#ui) body.landing-page .own-vpn-float::after{display:none!important}
html:not(#ui) body .own-vpn-float-copy b{font-size:15px!important;font-weight:650!important;color:var(--ui-text)!important;letter-spacing:-.01em}
html:not(#ui) body .own-vpn-float p{font-size:13px!important;color:var(--ui-text-2)!important;line-height:1.45!important}
html:not(#ui) body .own-vpn-float-actions a{min-height:36px!important;padding:0 13px!important;gap:7px!important;display:inline-flex!important;align-items:center!important;border-radius:999px!important;font-size:13.5px!important;font-weight:600!important;
  color:var(--ui-text)!important;background:var(--ui-fill-2)!important;border:1px solid var(--ui-stroke-2)!important;box-shadow:none!important;transition:background-color var(--ui-fast) ease!important}
html:not(#ui) body .own-vpn-float-actions a:hover{background:var(--ui-fill-hover)!important}
html:not(#ui) body .own-vpn-float-actions a.primary{color:var(--ui-on-accent)!important;background:linear-gradient(180deg,color-mix(in srgb,var(--ui-btn-a),#fff 10%),color-mix(in srgb,var(--ui-btn-a),var(--ui-btn-b) 55%))!important;border-color:transparent!important}
html:not(#ui) body .own-vpn-float-actions :is(.vicon,.ui-icon){width:15px!important;height:15px!important;color:inherit!important}
html:not(#ui) body .own-vpn-float-handle{display:none!important}
html:not(#ui) body .own-vpn-float-close{width:30px!important;height:30px!important;border-radius:50%!important;display:grid!important;place-items:center!important;background:var(--ui-fill-3)!important;color:var(--ui-text-2)!important;border:0!important}
html:not(#ui) body .own-vpn-float-close .vicon{width:15px!important;height:15px!important;color:inherit!important}
html:not(#ui) body.landing-page .network-floats{width:min(680px,100%)!important;margin:12px auto 0!important;gap:12px!important}
html:not(#ui) body.landing-page .own-vpn-float[hidden]+.network-floats{margin-top:40px!important}
html:not(#ui) body .network-float{border-radius:20px!important}
html:not(#ui) body .network-summary{min-height:64px!important;padding:10px 12px!important;gap:12px!important;border-radius:20px!important}
html:not(#ui) body .network-summary small{font-size:11.5px!important;font-weight:650!important;letter-spacing:.07em!important;color:var(--ui-text-3)!important}
html:not(#ui) body .network-summary b{font-size:14.5px!important;font-weight:620!important;color:var(--ui-text)!important}
html:not(#ui) body .network-custom-icon{width:40px!important;height:40px!important;border-radius:13px!important;display:grid!important;place-items:center!important;background:rgb(var(--ui-accent)/.12)!important;color:rgb(var(--ui-accent))!important;border:1px solid rgb(var(--ui-accent)/.18)!important;box-shadow:none!important}
html:not(#ui) body .network-custom-icon svg{width:20px!important;height:20px!important;stroke:currentColor!important;fill:none!important;stroke-width:1.8!important}
html:not(#ui) body .network-chevron{width:32px!important;height:32px!important;border-radius:50%!important;display:grid!important;place-items:center!important;background:var(--ui-fill-3)!important;border:0!important;color:var(--ui-text-2)!important}
html:not(#ui) body .network-chevron .ui-icon{width:16px!important;height:16px!important;transition:transform var(--ui-med) var(--ui-ease)!important}
html:not(#ui) body .network-float.is-open .network-chevron .ui-icon,html:not(#ui) body .network-summary[aria-expanded="true"] .network-chevron .ui-icon{transform:rotate(180deg)}
@media (max-width:700px){
  html:not(#ui) body.landing-page .landing-main{padding-top:26px!important}
  html:not(#ui) body.landing-page .artemida-emblem{width:150px!important;height:150px!important;margin-bottom:4px!important}
  html:not(#ui) body.landing-page .landing-hero-actions{width:100%!important;display:grid!important;grid-template-columns:1fr 1fr}
  html:not(#ui) body.landing-page .landing-hero-actions .btn{min-width:0}
  html:not(#ui) body.landing-page .own-vpn-float:not([hidden]){margin-top:28px!important}
  html:not(#ui) body.landing-page .network-floats{grid-template-columns:1fr!important}
}
html:not(#ui) body.landing-page .own-vpn-float:not([hidden]){display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;grid-template-areas:"head head" "text actions"!important;align-items:center!important}
html:not(#ui) body .own-vpn-float-head{grid-area:head;display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:start!important;gap:10px!important;width:100%!important}
html:not(#ui) body .own-vpn-float-copy{display:flex!important;flex-direction:column!important;gap:2px!important;min-width:0!important;grid-column:1!important}
html:not(#ui) body .own-vpn-float-close{grid-column:2!important;position:static!important}
html:not(#ui) body .own-vpn-float > p{grid-area:text;margin:0!important}
html:not(#ui) body .own-vpn-float-actions{grid-area:actions;display:flex!important;flex-wrap:wrap;gap:6px!important;justify-content:flex-end}
@media (max-width:700px){
  html:not(#ui) body.landing-page .own-vpn-float:not([hidden]){grid-template-columns:1fr!important;grid-template-areas:"head" "text" "actions"!important;gap:8px!important}
  html:not(#ui) body .own-vpn-float > p{display:block!important}
  html:not(#ui) body .own-vpn-float-actions{justify-content:flex-start;display:grid!important;grid-template-columns:1.4fr 1fr 1fr}
  html:not(#ui) body .own-vpn-float-actions a{justify-content:center}
}
html:not(#ui) body.landing-page .own-vpn-float > .own-vpn-float-head{grid-area:head!important}
html:not(#ui) body.landing-page .own-vpn-float > p{grid-area:text!important}
html:not(#ui) body.landing-page .own-vpn-float > .own-vpn-float-actions{grid-area:actions!important}
@media (min-width:701px){html:not(#ui) body.landing-page .own-vpn-float > .own-vpn-float-actions{display:flex!important}}

/* ---------- 17. Уведомление «Первая покупка» — аккуратный тост, не перекрывает заголовок ---------- */
html:not(#ui) body .purchase-auto-note:not([hidden]){
  position:fixed!important;z-index:160!important;
  width:min(360px,calc(100vw - 20px))!important;min-height:0!important;padding:14px 44px 14px 14px!important;
  display:block!important;
  border-radius:20px!important;border:1px solid var(--ui-stroke-2)!important;background:var(--ui-panel-solid)!important;box-shadow:var(--ui-shadow-pop)!important;
  -webkit-backdrop-filter:var(--ui-blur-strong)!important;backdrop-filter:var(--ui-blur-strong)!important;
  user-select:none;transform:none;animation:ui-toast .45s var(--ui-spring) backwards!important}
@keyframes ui-toast{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
html:not(#ui) body .purchase-auto-handle{display:none!important}
html:not(#ui) body .purchase-auto-close{position:absolute!important;top:10px!important;right:10px!important;left:auto!important;width:28px!important;height:28px!important;border-radius:50%!important;display:grid!important;place-items:center!important;background:var(--ui-fill-3)!important;color:var(--ui-text-2)!important;border:0!important;box-shadow:none!important;padding:0!important}
html:not(#ui) body .purchase-auto-note .lg-specular-layer{display:none!important}
html:not(#ui) body .purchase-auto-note:not(.ui-placed){opacity:0!important;animation:none!important}
html:not(#ui) body .purchase-auto-note{cursor:grab!important}
html:not(#ui) body .purchase-auto-note.is-dragging{cursor:grabbing!important}
html:not(#ui) body .purchase-auto-row{display:grid!important;grid-template-columns:40px minmax(0,1fr)!important;gap:12px!important;align-items:start!important}
html:not(#ui) body .purchase-auto-icon{width:40px!important;height:40px!important;border-radius:13px!important;display:grid!important;place-items:center!important;background:rgb(var(--ui-accent)/.12)!important;color:rgb(var(--ui-accent))!important;border:0!important;box-shadow:none!important}
html:not(#ui) body .purchase-auto-icon .ui-icon{width:19px!important;height:19px!important}
html:not(#ui) body .purchase-auto-copy{display:flex!important;flex-direction:column!important;gap:3px!important}
html:not(#ui) body .purchase-auto-copy b{font-size:15px!important;font-weight:650!important;color:var(--ui-text)!important}
html:not(#ui) body .purchase-auto-copy > span{font-size:13px!important;line-height:1.45!important;color:var(--ui-text-2)!important}

@media (min-width:821px){
  html:not(#ui) body .site-top-hub{grid-template-areas:none!important;grid-template-rows:auto!important}
  html:not(#ui) body .site-top-hub > *{grid-row:1!important}
}
@media (min-width:821px) and (max-width:960px){
  html:not(#ui) body .site-top-hub > nav a,html:not(#ui) body .site-top-hub .hub-center-nav a,html:not(#ui) body .site-top-hub .faq-hub-nav a{padding:0 10px!important}
  html:not(#ui) body .site-login-button .site-login-label{display:none!important}
  html:not(#ui) body .site-login-button{padding:0 5px!important}
}

/* ---------- 18. Читаемость: ни одного текста мельче 12px ---------- */
html:not(#ui) body .period-topline em.popular{font-size:12px!important;line-height:1.4}
html:not(#ui) body .device-jump small{font-size:12px!important;line-height:1.4}
html:not(#ui) body .proxy-tab b{font-size:12px!important;line-height:1.4}
html:not(#ui) body .device-counter-stage small{font-size:12px!important;line-height:1.4}
html:not(#ui) body .proxy-vpn-cta span{font-size:12px!important;line-height:1.4}
html:not(#ui) body .own-vpn-price-card small{font-size:12px!important;line-height:1.4}
html:not(#ui) body .device-config-actions span.device-discount-badge{font-size:12px!important;line-height:1.4}
html:not(#ui) body .period-monthly span.period-monthly-savings{font-size:12px!important;line-height:1.4}
html:not(#ui) body .proxy-tab span{font-size:12px!important;line-height:1.4}
html:not(#ui) body .proxy-list-meta small{font-size:12px!important;line-height:1.4}
html:not(#ui) body .proxy-bottomline p.proxy-disclaimer{font-size:13.5px!important;line-height:1.4}
html:not(#ui) body .own-vpn-price-card span{font-size:12px!important;line-height:1.4}
html:not(#ui) body .device-custom-toggle span{font-size:12px!important;line-height:1.4}
html:not(#ui) body .device-custom-panel small{font-size:12px!important;line-height:1.4}
html:not(#ui) body .guide-top span.guide-badge{font-size:12px!important;line-height:1.4}
html:not(#ui) body .proxy-vpn-cta b{font-size:12px!important;line-height:1.4}
html:not(#ui) body .period-card span.period-days{font-size:12px!important;line-height:1.4}
html:not(#ui) body .install-section-head span{font-size:12px!important;line-height:1.4}
html:not(#ui) body .legal-shell p.legal-updated{font-size:13.5px!important;line-height:1.4}
html:not(#ui) body .ov-node span.ov-node-tag{font-size:12px!important;line-height:1.4}
html:not(#ui) body .device-preset-row button.is-active{font-size:12px!important;line-height:1.4}
html:not(#ui) body .device-preset-row button{font-size:12px!important;line-height:1.4}
html:not(#ui) body .privacy-note b{font-size:12px!important;line-height:1.4}
html:not(#ui) body .card-head span.live{font-size:12px!important;line-height:1.4}
html:not(#ui) body .install-key-empty span{font-size:12px!important;line-height:1.4}
html:not(#ui) body .proxy-list-meta span{font-size:12px!important;line-height:1.4}
html:not(#ui) body .my-reviews-title small{font-size:12px!important;line-height:1.4}
html:not(#ui) body .own-vpn-network-meta span.is-stale{font-size:12px!important;line-height:1.4}
html:not(#ui) body .own-vpn-network-meta span.own-vpn-scroll-hint{font-size:12px!important;line-height:1.4}
html:not(#ui) body .own-vpn-feature p{font-size:13.5px!important;line-height:1.4}
html:not(#ui) body .device-custom-panel label{font-size:12px!important;line-height:1.4}
html:not(#ui) body .period-card span.period-selected{font-size:12px!important;line-height:1.4}
html:not(#ui) body .period-monthly span.period-monthly-value{font-size:12px!important;line-height:1.4}
html:not(#ui) body .section-title span.purchase-history-note{font-size:12px!important;line-height:1.4}
html:not(#ui) body .proxy-list div.proxy-empty{font-size:12px!important;line-height:1.4}
html:not(#ui) body .accent-stat span{font-size:12px!important;line-height:1.4}
html:not(#ui) body .own-vpn-trust span{font-size:12px!important;line-height:1.4}
html:not(#ui) body .own-vpn-server-copy small{font-size:12px!important;line-height:1.4}
html:not(#ui) body .install-key-empty button{font-size:12px!important;line-height:1.4}
html:not(#ui) body .glass-card div.legal-note{font-size:13.5px!important;line-height:1.4}
html:not(#ui) body .field small.review-counter{font-size:12px!important;line-height:1.4}
html:not(#ui) body .glass-card a.handoff-back{font-size:12px!important;line-height:1.4}
html:not(#ui) body .own-vpn-network-preview-head small{font-size:12px!important;line-height:1.4}
html:not(#ui) body .device-jump b{font-size:12px!important;line-height:1.4}
html:not(#ui) body .glass-card p.handoff-note{font-size:13.5px!important;line-height:1.4}
html:not(#ui) body .config-label span{font-size:12px!important;line-height:1.4}
html:not(#ui) body .review-reward-note p{font-size:13.5px!important;line-height:1.4}
html:not(#ui) body .diagnostic-progress span{font-size:12px!important;line-height:1.4}
html:not(#ui) body .review-intro span{font-size:12px!important;line-height:1.4}
html:not(#ui) body .all-reviews-stats span{font-size:12px!important;line-height:1.4}
html:not(#ui) body .purchase-history-empty span.purchase-history-orbit{font-size:12px!important;line-height:1.4}
html:not(#ui) body .review-intro p{font-size:13.5px!important;line-height:1.4}
html:not(#ui) body .ov-node small{font-size:12px!important;line-height:1.4}
html:not(#ui) body .own-vpn-section-head p{font-size:13.5px!important;line-height:1.4}
html:not(#ui) body .ref-link-row div.ref-link{font-size:12.5px!important;line-height:1.4}
html:not(#ui) body .period-topline small.period-name{font-size:12.5px!important;line-height:1.4}
html:not(#ui) body .install-key-empty b{font-size:12.5px!important;line-height:1.4}
html:not(#ui) body .review-kind-field legend{font-size:12.5px!important;line-height:1.4}
html:not(#ui) body .ov-flow p.ov-flow-note{font-size:13.5px!important;line-height:1.4}
html:not(#ui) body .ov-flow-note b{font-size:12.5px!important;line-height:1.4}
html:not(#ui) body .ov-channel p{font-size:13.5px!important;line-height:1.4}
html:not(#ui) body .own-vpn-inline-actions span{font-size:12.5px!important;line-height:1.4}
html:not(#ui) body .own-vpn-feature h3{font-size:12.5px!important;line-height:1.4}
html:not(#ui) body .own-vpn-payment-method b{font-size:12.5px!important;line-height:1.4}

/* ---------- 19. Подписка / тарифы ---------- */
html:not(#ui) body .hero-layout{width:100%!important;max-width:none!important;margin-left:0!important;margin-right:0!important}
html:not(#ui) body .hero-card{padding:clamp(24px,4vw,44px)!important}
html:not(#ui) body .hero-card .glass-highlight{display:none!important}
html:not(#ui) body .hero-card h1 span{color:rgb(var(--ui-accent))!important;-webkit-text-fill-color:rgb(var(--ui-accent))!important;background:none!important}
html[data-theme="pearl"]:not(#ui) body .hero-card h1 span{color:rgb(var(--ui-accent-2))!important;-webkit-text-fill-color:rgb(var(--ui-accent-2))!important}
html:not(#ui) body .hero-actions{display:flex!important;flex-wrap:wrap!important;gap:10px!important;margin-top:22px!important}
@media (max-width:700px){html:not(#ui) body .hero-actions > *{flex:1 1 100%!important}}

html:not(#ui) body :is(.config-label,.install-section-head) > span:first-child{
  font-family:var(--ui-font)!important;font-size:12.5px!important;font-weight:700!important;letter-spacing:0!important;
  width:34px!important;height:34px!important;min-width:34px!important;display:grid!important;place-items:center!important;border-radius:11px!important;
  color:rgb(var(--ui-accent))!important;background:rgb(var(--ui-accent)/.12)!important;border:1px solid rgb(var(--ui-accent)/.2)!important;box-shadow:none!important}
html[data-theme="pearl"]:not(#ui) body :is(.config-label,.install-section-head) > span:first-child{color:rgb(var(--ui-accent-2))!important}
html:not(#ui) body .config-label b{font-size:16px!important;font-weight:650!important;letter-spacing:-.015em}
html:not(#ui) body .config-label small{font-size:13px!important;color:var(--ui-text-3)!important}
html:not(#ui) body .device-discount-badge{font-size:12px!important;font-weight:620!important;padding:5px 10px!important;border-radius:999px!important;color:rgb(var(--ui-accent))!important;background:rgb(var(--ui-accent)/.1)!important;border:1px solid rgb(var(--ui-accent)/.22)!important}
html:not(#ui) body .device-preset-row button{min-height:42px!important;font-size:14.5px!important;font-weight:620!important;border-radius:13px!important;
  background:var(--ui-fill-2)!important;border:1px solid var(--ui-stroke)!important;color:var(--ui-text-2)!important;box-shadow:none!important;transition:background-color var(--ui-fast) ease,border-color var(--ui-fast) ease,color var(--ui-fast) ease,transform var(--ui-fast) var(--ui-ease)!important}
html:not(#ui) body .device-preset-row button:hover{background:var(--ui-fill-hover)!important;color:var(--ui-text)!important}
html:not(#ui) body .device-preset-row button:active{transform:scale(.96)}
html:not(#ui) body .device-preset-row button:is(.is-active,.active,[aria-pressed="true"]){color:var(--ui-text)!important;background:rgb(var(--ui-accent)/.14)!important;border-color:rgb(var(--ui-accent)/.45)!important}
html:not(#ui) body .device-custom-toggle span{font-size:13px!important}
html:not(#ui) body .device-nudge{width:46px!important;height:46px!important;border-radius:14px!important;font-size:22px!important;background:var(--ui-fill-2)!important;border:1px solid var(--ui-stroke)!important;color:var(--ui-text)!important;box-shadow:none!important}
html:not(#ui) body .device-jump{border-radius:14px!important;background:var(--ui-fill-2)!important;border:1px solid var(--ui-stroke)!important;box-shadow:none!important}
html:not(#ui) body .device-jump b{font-size:15px!important;color:var(--ui-text)!important}
html:not(#ui) body .device-jump small{font-size:11.5px!important;color:var(--ui-text-3)!important}
html:not(#ui) body .device-jump:disabled{opacity:.4!important}
html:not(#ui) body .device-counter-stage strong{font-family:var(--ui-font-display)!important;font-size:38px!important;font-weight:700!important;letter-spacing:-.03em!important;font-variant-numeric:tabular-nums}
html:not(#ui) body .device-counter-stage small{font-size:12px!important;color:var(--ui-text-3)!important}

html:not(#ui) body .period-grid{gap:10px!important}
html:not(#ui) body .period-card{
  padding:16px!important;border-radius:18px!important;text-align:left;min-height:118px!important;
  background:var(--ui-fill-2)!important;border:1px solid var(--ui-stroke)!important;box-shadow:none!important;
  transition:border-color var(--ui-fast) ease,background-color var(--ui-fast) ease,transform var(--ui-fast) var(--ui-ease),box-shadow var(--ui-med) ease!important}
html:not(#ui) body .period-card:hover{background:var(--ui-fill-hover)!important;transform:translateY(-1px)}
html:not(#ui) body .period-card:active{transform:scale(.98)}
html:not(#ui) body .period-card.active{background:rgb(var(--ui-accent)/.1)!important;border-color:rgb(var(--ui-accent)/.55)!important;box-shadow:0 0 0 3px rgb(var(--ui-accent)/.12)!important}
html:not(#ui) body .period-card .period-name{font-size:15px!important;font-weight:650!important;color:var(--ui-text)!important;letter-spacing:-.01em}
html:not(#ui) body .period-card .period-days{font-size:12.5px!important;font-weight:500!important;color:var(--ui-text-3)!important}
html:not(#ui) body .period-card .period-price{font-family:var(--ui-font-display)!important;font-size:23px!important;font-weight:700!important;letter-spacing:-.02em!important;color:var(--ui-text)!important}
html:not(#ui) body .period-card .period-monthly-value{font-size:12.5px!important;color:var(--ui-text-2)!important;font-weight:560!important}
html:not(#ui) body .period-card .period-monthly-savings{font-size:12px!important;color:rgb(var(--ui-accent))!important;font-weight:620!important}
html:not(#ui) body .period-card em.popular{font-size:10.5px!important;font-weight:700!important;letter-spacing:.04em!important;padding:4px 8px!important;border-radius:999px!important;color:var(--ui-on-accent)!important;background:linear-gradient(180deg,var(--ui-btn-a),var(--ui-btn-b))!important;font-style:normal}
html:not(#ui) body .period-card .period-selected{width:22px!important;height:22px!important;font-size:12px!important;border-radius:50%!important}
html:not(#ui) body .period-card.active .period-selected{color:var(--ui-on-accent)!important;background:rgb(var(--ui-accent))!important;border-color:transparent!important}

html:not(#ui) body .checkout-card{padding:24px!important}
html:not(#ui) body .checkout-card :is(#mainPrice,.main-price,.checkout-price strong){font-family:var(--ui-font-display)!important;letter-spacing:-.04em!important}
html:not(#ui) body .checkout-details{border-radius:16px!important;overflow:hidden;border:1px solid var(--ui-stroke)!important;background:var(--ui-fill-2)!important}
html:not(#ui) body .checkout-details > div{font-size:13.5px!important;background:transparent!important;border:0!important;border-bottom:1px solid var(--ui-stroke)!important;border-radius:0!important;box-shadow:none!important;padding:12px 14px!important}
html:not(#ui) body .checkout-details > div:last-child{border-bottom:0!important}
html:not(#ui) body .checkout-card .btn.primary{min-height:52px!important;font-size:16px!important}

html:not(#ui) body .period-card .period-topline{display:flex!important;flex-wrap:wrap!important;align-items:flex-start!important;gap:4px 8px!important}
html:not(#ui) body .period-card .period-topline em.popular{margin-left:auto}
html:not(#ui) body .reveal-item p{font-size:13.5px!important;line-height:1.5}

/* ---------- 20. Один шрифт интерфейса (моноширинный — только для ссылок, кодов и ключей) ---------- */
html:not(#ui) body .admin-api-access b,html:not(#ui) body .appearance-divider,html:not(#ui) body .brand-copy small,html:not(#ui) body .config-label>span,html:not(#ui) body .developer-hero-status b,html:not(#ui) body .device-custom-panel input,html:not(#ui) body .diagnostic-progress>span,html:not(#ui) body .faq-question .tag,html:not(#ui) body .faq-start-grid article>i,html:not(#ui) body .guide-badge,html:not(#ui) body .guide-steps li>span,html:not(#ui) body .install-hero-mark span,html:not(#ui) body .install-section-head>span,html:not(#ui) body .landing-benefits article>span,html:not(#ui) body .landing-hero h1 em,html:not(#ui) body .landing-kicker,html:not(#ui) body .live,html:not(#ui) body .mini-feature>span,html:not(#ui) body .own-vpn-country-details li small,html:not(#ui) body .own-vpn-map-head>.own-vpn-map-live,html:not(#ui) body .own-vpn-map-marker small,html:not(#ui) body .own-vpn-preview-badge,html:not(#ui) body .own-vpn-step::before,html:not(#ui) body .payment-notice-head small,html:not(#ui) body .payment-notice-icon,html:not(#ui) body .privacy-note b,html:not(#ui) body .public-review-num,html:not(#ui) body .purchase-history-orbit,html:not(#ui) body .purchase-item-icon,html:not(#ui) body .range-marker small,html:not(#ui) body .side-status,html:not(#ui) body .status-pill{font-family:var(--ui-font)!important;letter-spacing:.01em!important}
html:not(#ui) body .auth-code,html:not(#ui) body details.developer-doc-card>summary code,html:not(#ui) body .proxy-address,html:not(#ui) body .vpn-api-terminal,html:not(#ui) body .ref-link,html:not(#ui) body .developer-errors pre,html:not(#ui) body .vpn-api-strip,html:not(#ui) body .subscription-selected code,html:not(#ui) body .credential-row strong,html:not(#ui) body .developer-doc-card pre{font-family:var(--ui-mono)!important;letter-spacing:0!important}
html:not(#ui) body .guide-steps li > span{font-size:12.5px!important;font-weight:700!important;color:rgb(var(--ui-accent))!important;background:rgb(var(--ui-accent)/.12)!important;border:1px solid rgb(var(--ui-accent)/.2)!important;border-radius:11px!important;box-shadow:none!important}
html:not(#ui) body .guide-badge{font-size:12px!important;font-weight:620!important;padding:5px 10px!important;border-radius:999px!important}
html:not(#ui) body .guide-steps li{font-size:14.5px!important;line-height:1.5!important;color:var(--ui-text-2)!important}
html:not(#ui) body :is(.guide-actions,.install-actions,.download-actions) .btn{min-height:42px!important;font-size:14.5px!important;padding:0 16px!important}
html:not(#ui) body :is(.os-picker button,.app-option){border-radius:16px!important;transition:background-color var(--ui-fast) ease,border-color var(--ui-fast) ease,transform var(--ui-fast) var(--ui-ease)!important}
html:not(#ui) body :is(.os-picker button,.app-option):active{transform:scale(.98)}
html:not(#ui) body :is(.os-picker button,.app-option) b,html:not(#ui) body .os-picker button{font-size:14px!important}
html:not(#ui) body :is(.os-picker button,.app-option):is(.active,[aria-pressed="true"],[aria-checked="true"]){background:rgb(var(--ui-accent)/.1)!important;border-color:rgb(var(--ui-accent)/.5)!important}

/* ---------- 21. Логотип в шапке одинаковый везде; поиск FAQ ---------- */
html:not(#ui) body .site-top-hub .brand-mark{position:relative;display:grid!important;place-items:center;background:var(--ui-fill-2)!important;border:1px solid var(--ui-stroke)!important;box-shadow:inset 0 1px 0 var(--ui-hl)!important;overflow:hidden}
html:not(#ui) body .site-top-hub .brand-mark::before{inset:5px!important}
html:not(#ui) body .faq-search-main{display:flex!important;align-items:center!important;gap:10px!important;height:54px!important;padding:0 8px 0 16px!important;border-radius:16px!important;
  background:var(--ui-fill-2)!important;border:1px solid var(--ui-stroke-2)!important;box-shadow:inset 0 1px 2px rgb(0 0 0/.12)!important;transition:border-color var(--ui-fast) ease,box-shadow var(--ui-fast) ease!important}
html:not(#ui) body .faq-search-main:focus-within{border-color:rgb(var(--ui-accent)/.6)!important;box-shadow:0 0 0 4px rgb(var(--ui-accent)/.14)!important}
html:not(#ui) body .faq-search-main input{flex:1;height:100%!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;font-size:16px!important}
html:not(#ui) body .faq-search-main input:focus{box-shadow:none!important;border:0!important}
html:not(#ui) body .faq-search-icon{color:var(--ui-text-3)!important}
html:not(#ui) body .popular-queries button,html:not(#ui) body .chips button{min-height:34px!important;padding:0 13px!important;border-radius:999px!important;font-size:13.5px!important;font-weight:560!important;
  color:var(--ui-text)!important;background:var(--ui-fill-2)!important;border:1px solid var(--ui-stroke)!important;box-shadow:none!important;transition:background-color var(--ui-fast) ease!important}
html:not(#ui) body .popular-queries button:hover,html:not(#ui) body .chips button:hover{background:var(--ui-fill-hover)!important}
html:not(#ui) body .faq-item{border-radius:20px!important;background:var(--ui-fill)!important;border:1px solid var(--ui-stroke)!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;transition:background-color var(--ui-fast) ease,border-color var(--ui-fast) ease!important}
html:not(#ui) body .faq-item:hover{background:var(--ui-fill-hover)!important}
html:not(#ui) body .faq-item.open,html:not(#ui) body .faq-item[open],html:not(#ui) body .faq-item.is-open{border-color:rgb(var(--ui-accent)/.35)!important}
html:not(#ui) body .faq-question{font-size:16px!important;font-weight:620!important;letter-spacing:-.012em}
html:not(#ui) body .handoff-mark.brand-mark{width:64px!important;height:64px!important;border-radius:20px!important;background:var(--ui-fill-2)!important;border:1px solid var(--ui-stroke-2)!important;box-shadow:inset 0 1px 0 var(--ui-hl),0 14px 34px -14px rgb(var(--ui-accent-2)/.6)!important;position:relative}
html:not(#ui) body .handoff-mark.brand-mark::before{inset:10px!important}
html:not(#ui) body .handoff-mark:not(.brand-mark){width:64px!important;height:64px!important;border-radius:50%!important;font-size:28px!important;font-weight:700!important;color:var(--ui-on-accent)!important;background:linear-gradient(180deg,var(--ui-btn-a),var(--ui-btn-b))!important;border:0!important;box-shadow:0 14px 34px -12px rgb(var(--ui-accent-2)/.7)!important;animation:ui-pop .5s var(--ui-spring) backwards}
html:not(#ui) body .handoff-card{padding:clamp(28px,5vw,44px) clamp(20px,4vw,40px)!important;max-width:520px!important}
html:not(#ui) body .handoff-card h1{font-size:clamp(1.8rem,1.3rem + 2vw,2.4rem)!important}
html:not(#ui) body .credential-row{border-radius:14px!important;background:var(--ui-fill-2)!important;border:1px solid var(--ui-stroke)!important}
@media (max-width:700px){html:not(#ui) body .own-vpn-float-actions{display:flex!important;flex-wrap:wrap!important}html:not(#ui) body .own-vpn-float-actions a{flex:1 1 auto;white-space:nowrap}}
html:not(#ui) body .legal-hub.ui-in-header > summary svg,html:not(#ui) body .legal-hub.ui-in-header[open] > summary svg{transform:none!important}
html:not(#ui) body .legal-hub.ui-in-header > summary svg path{transform:none!important;transition:none!important}
html:not(#ui) body .period-grid{grid-auto-rows:auto!important;align-items:stretch!important}
html:not(#ui) body .period-card{height:auto!important;max-height:none!important;overflow:visible!important;position:relative!important}
html:not(#ui) body .period-card .period-topline em.popular{position:absolute!important;top:12px!important;right:12px!important;margin:0!important}
html:not(#ui) body .period-card .period-topline em.popular{top:-10px!important;right:12px!important;box-shadow:0 4px 12px -4px rgb(var(--ui-accent-2)/.6)!important}
/* Резерв места под список подписок на странице подключения — без прыжка при загрузке */
html:not(#ui) body .install-key-list{min-height:101px}
@media (min-width:901px){html:not(#ui) body .guide-steps{min-height:264px}}
html:not(#ui) body .install-loading{min-height:88px;display:grid;place-items:center;border-radius:16px;border:1px dashed var(--ui-stroke-2);color:var(--ui-text-3);font-size:13.5px;
  background:linear-gradient(100deg,transparent 30%,rgb(255 255 255/.04) 50%,transparent 70%) 0 0/200% 100%;animation:ui-shimmer 1.4s linear infinite}
@keyframes ui-shimmer{to{background-position:-200% 0}}
html:not(#ui) body .all-reviews-more{min-height:50px}

/* ---------- 22. Плитки статистики, поля ссылок — одинаково во всех темах ---------- */
html:not(#ui) body :is(.quick-stats > div,.key-metrics > div,.ref-stats > div,.subscription-link-box,.ref-link,.ref-rules li,.referral-rules li,.card-head .live,.ref-icon){
  background:var(--ui-fill-2)!important;border:1px solid var(--ui-stroke)!important;box-shadow:none!important;color:var(--ui-text)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html:not(#ui) body :is(.quick-stats > div,.key-metrics > div,.ref-stats > div){border-radius:14px!important;padding:10px 12px!important}
html:not(#ui) body :is(.quick-stats > div,.key-metrics > div,.ref-stats > div) :is(span,small){font-size:12px!important;color:var(--ui-text-3)!important;letter-spacing:0!important}
html:not(#ui) body :is(.quick-stats > div,.key-metrics > div,.ref-stats > div) :is(b,strong){font-size:15px!important;font-weight:650!important;color:var(--ui-text)!important}
html:not(#ui) body :is(.subscription-link-box,.ref-link){border-radius:14px!important}
html:not(#ui) body .ref-icon{color:rgb(var(--ui-accent))!important;background:rgb(var(--ui-accent)/.12)!important;border-color:rgb(var(--ui-accent)/.2)!important}
html:not(#ui) body .card-head .live{color:#3fbf86!important;background:rgb(63 191 134/.12)!important;border-color:rgb(63 191 134/.25)!important;border-radius:999px!important}
html:not(#ui) body .copy-btn{min-height:44px!important;padding:0 16px!important;border-radius:14px!important;font-size:14px!important;font-weight:620!important;color:var(--ui-text)!important;background:var(--ui-fill-3)!important;border:1px solid var(--ui-stroke-2)!important;box-shadow:none!important;transition:background-color var(--ui-fast) ease,transform var(--ui-fast) var(--ui-ease)!important}
html:not(#ui) body .copy-btn:hover{background:var(--ui-fill-hover)!important}
html:not(#ui) body .copy-btn:active{transform:scale(.97)}
html[data-theme="pearl"]:not(#ui) body .emblem-shield-depth{opacity:.25}
/* Техподдержка: вкладки прокси без обрезки текста */
html:not(#ui) body .proxy-tabs{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;padding:4px!important;border-radius:14px!important;background:var(--ui-fill-2)!important;border:1px solid var(--ui-stroke)!important}
html:not(#ui) body .proxy-tab{min-height:38px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;padding:0 12px!important;border-radius:10px!important;background:transparent!important;border:0!important;box-shadow:none!important;color:var(--ui-text-2)!important;transition:background-color var(--ui-fast) ease,color var(--ui-fast) ease!important}
html:not(#ui) body .proxy-tab span{font-size:13.5px!important;font-weight:600!important;white-space:nowrap}
html:not(#ui) body .proxy-tab b{min-width:22px;height:22px;display:grid;place-items:center;border-radius:999px;font-size:12px!important;background:var(--ui-fill-3)!important;color:var(--ui-text-2)!important}
html:not(#ui) body .proxy-tab:hover{background:var(--ui-fill-hover)!important;color:var(--ui-text)!important}
html:not(#ui) body .proxy-tab.is-active{background:var(--ui-fill-3)!important;color:var(--ui-text)!important;box-shadow:inset 0 1px 0 var(--ui-hl),0 1px 3px rgb(0 0 0/.18)!important}
html[data-theme="pearl"]:not(#ui) body .proxy-tab.is-active{background:#fff!important}

/* Одинаковая ширина шапки и контента на всех страницах */
html:not(#ui) body :is(.legal-shell,.faq-public-shell,.review-page-shell,.all-reviews-shell,.own-vpn-shell,.landing-shell){width:100%!important;max-width:none!important;padding-left:0!important;padding-right:0!important;margin-left:0!important;margin-right:0!important}
html:not(#ui) body .legal-shell > main{width:min(var(--ui-wrap),calc(100% - 32px))!important;max-width:var(--ui-wrap)!important;margin-left:auto!important;margin-right:auto!important;padding-left:0!important;padding-right:0!important}
html:not(#ui) body .legal-shell :is(.legal-card,.glass-card) :is(p,li){font-size:14.5px!important;line-height:1.65!important;color:var(--ui-text-2)!important}
html:not(#ui) body .legal-shell :is(.legal-card,.glass-card) :is(p,li) b{color:var(--ui-text)!important}

/* ---------- 23. Окна входа / модальные окна — один вид на всех страницах ---------- */
html:not(#ui) body :is(.landing-auth-layer,.modal-layer).open{
  position:fixed!important;inset:0!important;z-index:500!important;display:grid!important;place-items:center!important;padding:16px!important;
  background:rgb(0 0 0/.5)!important;-webkit-backdrop-filter:blur(10px) saturate(120%)!important;backdrop-filter:blur(10px) saturate(120%)!important;animation:ui-fade .22s ease backwards}
html[data-theme="pearl"]:not(#ui) body :is(.landing-auth-layer,.modal-layer).open{background:rgb(40 20 35/.25)!important}
html:not(#ui) body :is(.landing-auth-panel,.modal){
  position:relative!important;inset:auto!important;transform:none;margin:0!important;
  width:min(440px,100%)!important;max-width:440px!important;max-height:calc(100dvh - 32px)!important;overflow:auto!important;
  padding:24px!important;border-radius:28px!important;
  background:var(--ui-panel-solid)!important;border:1px solid var(--ui-stroke-2)!important;box-shadow:var(--ui-shadow-pop)!important;
  -webkit-backdrop-filter:var(--ui-blur-strong)!important;backdrop-filter:var(--ui-blur-strong)!important;
  animation:ui-modal .34s var(--ui-spring) backwards!important}
html:not(#ui) body .modal.wide,html:not(#ui) body .modal.large{width:min(620px,100%)!important;max-width:620px!important}
@keyframes ui-modal{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
html:not(#ui) body :is(.auth-panel-head,.modal-head){display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:12px!important;margin:0 0 18px!important}
html:not(#ui) body :is(.auth-panel-head,.modal-head) :is(h2,h3){font-size:22px!important;font-weight:680!important;letter-spacing:-.022em!important;margin:4px 0 0!important;line-height:1.2!important;color:var(--ui-text)!important}
html:not(#ui) body .close-btn{width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;padding:0!important;border-radius:50%!important;display:grid!important;place-items:center!important;
  font-size:20px!important;line-height:1!important;color:var(--ui-text-2)!important;background:var(--ui-fill-3)!important;border:0!important;box-shadow:none!important;cursor:pointer;transition:background-color var(--ui-fast) ease,color var(--ui-fast) ease!important}
html:not(#ui) body .close-btn:hover{color:var(--ui-text)!important;background:var(--ui-fill-hover)!important}
/* Переключатель «Вход / Регистрация» — сегментированный контрол iOS */
html:not(#ui) body .auth-tabs{display:grid!important;grid-auto-flow:column!important;grid-auto-columns:1fr!important;gap:2px!important;padding:3px!important;margin:0 0 18px!important;border-radius:13px!important;background:var(--ui-fill-3)!important;border:0!important;box-shadow:none!important}
html:not(#ui) body .auth-tabs button{height:36px!important;border-radius:10px!important;font-size:14px!important;font-weight:600!important;color:var(--ui-text-2)!important;background:transparent!important;border:0!important;box-shadow:none!important;cursor:pointer;transition:background-color var(--ui-med) var(--ui-ease),color var(--ui-fast) ease!important}
html:not(#ui) body .auth-tabs button.active{color:var(--ui-text)!important;background:rgb(255 255 255/.12)!important;box-shadow:0 1px 3px rgb(0 0 0/.25),inset 0 1px 0 rgb(255 255 255/.08)!important}
html[data-theme="pearl"]:not(#ui) body .auth-tabs button.active{background:#fff!important;box-shadow:0 1px 3px rgb(60 20 45/.15)!important}
html:not(#ui) body .field{display:flex!important;flex-direction:column!important;gap:7px!important;margin:0 0 14px!important}
html:not(#ui) body .field > span{font-size:13px!important;font-weight:560!important;color:var(--ui-text-2)!important;letter-spacing:0!important;text-transform:none!important}
html:not(#ui) body .field input:not([type="checkbox"]):not([type="radio"]){height:50px!important;padding:0 15px!important}
html:not(#ui) body .password-field{position:relative!important}
html:not(#ui) body .password-field input{padding-right:48px!important;width:100%}
html:not(#ui) body .password-visibility{position:absolute!important;right:6px!important;top:50%!important;transform:translateY(-50%)!important;width:38px!important;height:38px!important;border-radius:11px!important;display:grid!important;place-items:center!important;background:transparent!important;border:0!important;color:var(--ui-text-3)!important;box-shadow:none!important;cursor:pointer}
html:not(#ui) body .password-visibility:hover{color:var(--ui-text)!important;background:var(--ui-fill-hover)!important}
html:not(#ui) body .password-visibility .ui-icon{width:18px!important;height:18px!important}
html:not(#ui) body :is(.landing-auth-form,#cabinetAuthForm) .btn.primary{min-height:52px!important;font-size:16px!important;margin-top:4px}
html:not(#ui) body .modal-actions{margin:0!important;padding:0!important;border:0!important;background:none!important}
html:not(#ui) body .auth-divider{display:flex!important;align-items:center!important;gap:12px!important;margin:16px 0!important;font-size:12.5px!important;color:var(--ui-text-3)!important}
html:not(#ui) body .auth-divider::before,html:not(#ui) body .auth-divider::after{content:""!important;flex:1;height:1px;background:var(--ui-stroke-2)!important;display:block!important}
html:not(#ui) body .telegram-auth{width:100%!important;display:flex!important;align-items:center!important;gap:12px!important;padding:10px 12px!important;border-radius:16px!important;text-align:left;
  background:var(--ui-fill-2)!important;border:1px solid var(--ui-stroke-2)!important;box-shadow:none!important;color:var(--ui-text)!important;cursor:pointer;transition:background-color var(--ui-fast) ease!important}
html:not(#ui) body .telegram-auth:not(:disabled):hover{background:var(--ui-fill-hover)!important}
html:not(#ui) body .telegram-auth:disabled{opacity:.6!important;cursor:not-allowed}
html:not(#ui) body .telegram-auth > span:first-child{width:38px!important;height:38px!important;flex:0 0 38px!important;border-radius:12px!important;display:grid!important;place-items:center!important;font-size:0!important;color:#fff!important;
  background:linear-gradient(180deg,#37aee2,#1e96c8)!important;box-shadow:none!important;position:relative}
html:not(#ui) body .telegram-auth > span:first-child > *{display:none!important}
html:not(#ui) body .telegram-auth > span:first-child::before{content:"";width:18px;height:18px;background:#fff;-webkit-mask:url('/static/vendor/lucide-pack/send.svg') center/contain no-repeat;mask:url('/static/vendor/lucide-pack/send.svg') center/contain no-repeat;transform:translateX(-1px)}
html:not(#ui) body .telegram-auth b{display:block;font-size:14.5px!important;font-weight:620!important;color:var(--ui-text)!important}
html:not(#ui) body .telegram-auth small{display:block;font-size:12.5px!important;color:var(--ui-text-3)!important}
html:not(#ui) body .auth-privacy{font-size:12.5px!important;line-height:1.5!important;color:var(--ui-text-3)!important;margin:14px 2px 0!important}
@media (max-width:640px){
  html:not(#ui) body :is(.landing-auth-layer,.modal-layer).open{place-items:end center!important;padding:8px!important;padding-bottom:max(8px,env(safe-area-inset-bottom))!important}
  html:not(#ui) body :is(.landing-auth-panel,.modal){width:100%!important;max-width:none!important;border-radius:28px!important;padding:20px!important;animation:ui-sheet .38s var(--ui-spring) backwards!important}
  @keyframes ui-sheet{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
}
html.ui-theme-vt:not(#ui) body .site-top-hub{view-transition-name:none!important}

/* ---------- 24. Логотип никогда не стоит на розовом: тёмная плитка + акцентный знак ---------- */
html:not(#ui) body :is(.profile-brand-avatar,.profile-avatar:not(.has-photo),.radar-core){
  background:linear-gradient(160deg,#1d1b22,#0d0c10)!important;border:1px solid rgb(var(--ui-accent)/.28)!important;
  box-shadow:inset 0 1px 0 rgb(255 255 255/.08),0 10px 24px -12px rgb(var(--ui-accent-2)/.6)!important;color:rgb(var(--ui-accent))!important}
html:not(#ui) body :is(.profile-brand-avatar,.profile-avatar,.radar-core) .artemida-brand-glyph{
  background:linear-gradient(150deg,color-mix(in srgb,rgb(var(--ui-accent)),#fff 25%),rgb(var(--ui-accent)) 55%,rgb(var(--ui-accent-2)))!important;inset:18%!important}
html[data-theme="pearl"]:not(#ui) body :is(.profile-brand-avatar,.profile-avatar:not(.has-photo),.radar-core){background:linear-gradient(160deg,#fff,#f6eef3)!important;border-color:rgb(var(--ui-accent-2)/.25)!important}

/* ---------- 25. Движение: одна спокойная система анимаций ----------
   Раньше: одни элементы подпрыгивали на 1–4 px, другие увеличивались, иконки крутились.
   Теперь: наведение = мягкая смена цвета/подсветки, нажатие = лёгкое «вдавливание»,
   иконки никогда не прыгают и не меняют размер. */
html:not(#ui) body :is(.btn,.side-link,.period-card,.copy-btn,.tiny-btn,.popular-queries button,.chips button,.diagnostic-checks label,.faq-more,
  .landing-account-icon,.landing-round-login,.theme-grid>button,.key-copy-icon,.subscription-copy-icon,.theme-trigger,.site-login-button,.network-chip,
  .legal-hub nav a,.legal-hub summary,.choice,.soft-action,.os-picker button,.app-option,.install-key-option,.profile-setting-card,.profile-action,.profile-logout,
  .landing-buy,.landing-logo,.legal-home,.mobile-brand,.faq-home-identity,#buyButton,.purchase-item,.proxy-refresh,.proxy-copy,.proxy-tab,.device-custom-toggle,
  .proxy-vpn-cta,.device-jump,.device-nudge,.device-preset-row button,.review-kind-card,.review-kind-option,.featured-reviews-head a,.featured-reviews-actions a,
  .own-vpn-trust>span,.ov-node,.ov-channel,.own-vpn-step,.own-vpn-feature,.own-vpn-price-card,.own-vpn-payment-method,.admin-api-gear,[data-liquid-glass],
  .glass-card,.glass-panel,.faq-item,.network-float,.key-card,.mobile-link,.site-top-hub,.ui-bg-choice,.ui-theme-choice,.telegram-auth,.own-vpn-float-actions a,
  .faq-topic,.faq-topics button,.auth-tabs button,.close-btn,.password-visibility,.ui-appearance-close):hover{transform:none!important;scale:none!important;translate:none!important;rotate:none!important}

/* Иконки и логотипы — стабильны: без увеличения, сдвигов и вращения при наведении */
html:not(#ui) body :is(.ui-icon,.vicon,.side-icon,.hub-link-icon,.empty-icon,.os-icon,.network-custom-icon,.support-icon,.purchase-auto-icon,.theme-trigger-core,.theme-moon,.hub-menu-icon,.artemida-brand-glyph,.side-copy){
  transform:none!important;scale:none!important;translate:none!important;rotate:none!important;animation:none!important;transition:color var(--ui-fast) ease,background-color var(--ui-fast) ease,opacity var(--ui-fast) ease!important}
html:not(#ui) body .brand-mark::before,html:not(#ui) body .brand-mark::after{transform:none!important;animation:none!important;transition:none!important}
html:not(#ui) body .btn :is(.ui-icon,.vicon){width:17px!important;height:17px!important}
html:not(#ui) body .btn svg{width:17px;height:17px;flex:0 0 auto}
/* Шеврон раскрытия — единственная иконка, которая поворачивается (по состоянию, не по наведению) */
html:not(#ui) body :is(.network-float.is-open,.network-float.is-expanded,[aria-expanded="true"]) > :is(.network-chevron,.toggle) :is(.ui-icon,svg),
html:not(#ui) body [aria-expanded="true"] .network-chevron .ui-icon{transform:rotate(180deg)!important;transition:transform var(--ui-med) var(--ui-ease)!important}
html:not(#ui) body .network-chevron .ui-icon{transition:transform var(--ui-med) var(--ui-ease)!important}

/* Нажатие: одинаковое «вдавливание» у всех кнопок и плиток */
html:not(#ui) body :is(.btn,.landing-buy,.copy-btn,.tiny-btn,.popular-queries button,.chips button,.choice,.soft-action,.os-picker button,.app-option,.install-key-option,
  .profile-action,.profile-setting-card,.proxy-tab,.proxy-copy,.proxy-refresh,.device-jump,.device-nudge,.device-preset-row button,.period-card,.site-login-button,
  .theme-trigger,.legal-hub summary,.mobile-link,.side-link,.telegram-auth,.ui-bg-choice,.own-vpn-float-actions a,.close-btn,.network-summary,.faq-question,.review-kind-card):active{
  transform:scale(.97)!important;transition-duration:.08s!important}
html:not(#ui) body :is(.btn,.landing-buy,.copy-btn,.choice,.os-picker button,.app-option,.install-key-option,.profile-action,.profile-setting-card,.proxy-tab,.device-jump,
  .device-nudge,.device-preset-row button,.period-card,.site-login-button,.theme-trigger,.mobile-link,.side-link,.telegram-auth,.network-summary,.faq-question,.review-kind-card,.key-card,.faq-item,.purchase-item){
  transition:transform .22s var(--ui-ease),background-color var(--ui-fast) ease,border-color var(--ui-fast) ease,box-shadow var(--ui-med) ease,color var(--ui-fast) ease,opacity var(--ui-fast) ease!important}

/* Наведение на карточки: тонкая подсветка рамки вместо подпрыгивания */
@media (hover:hover){
  html:not(#ui) body :is(.key-card,.purchase-item,.ov-channel,.own-vpn-step,.own-vpn-feature,.own-vpn-price-card,.ov-node,.os-picker button,.app-option,.install-key-option,.profile-setting-card,.review-kind-card):hover{
    border-color:var(--ui-stroke-2)!important;background-color:var(--ui-fill-hover)}
}

/* Появление страницы: спокойное, один раз, без сдвига макета */
@keyframes ui-enter{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}
html: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]),
html:not(#ui) body.landing-page .landing-main > *{animation:ui-enter .5s var(--ui-ease) backwards}
html: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,.landing-main) > :nth-child(2){animation-delay:.06s}
html: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,.landing-main) > :nth-child(3){animation-delay:.12s}
html: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,.landing-main) > :nth-child(n+4){animation-delay:.18s}
html:not(#ui) body .site-top-hub{animation:ui-fade .4s ease backwards}
html:not(#ui) body .sidebar{animation:ui-fade .5s ease .1s backwards}
html:not(#ui) body .mobile-nav{animation:ui-rise .5s var(--ui-ease) .1s backwards}
@keyframes ui-rise{from{opacity:0;transform:translate3d(0,16px,0)}to{opacity:1;transform:none}}

/* Плавное появление карточек при прокрутке (класс ставит ui-v200.js только тем, что ниже экрана) */
html:not(#ui) body .ui-scroll-hidden{opacity:0;transform:translate3d(0,14px,0)}
html:not(#ui) body .ui-scroll-in{opacity:1;transform:none;transition:opacity .55s var(--ui-ease),transform .55s var(--ui-ease)!important}

/* Меню «Ещё»: пункты появляются лесенкой */
html:not(#ui) body .legal-hub.ui-in-header[open] > nav a{animation:ui-enter .32s var(--ui-ease) backwards}
html:not(#ui) body .legal-hub.ui-in-header[open] > nav a:nth-child(2){animation-delay:.03s}
html:not(#ui) body .legal-hub.ui-in-header[open] > nav a:nth-child(3){animation-delay:.06s}
html:not(#ui) body .legal-hub.ui-in-header[open] > nav a:nth-child(4){animation-delay:.09s}
html:not(#ui) body .legal-hub.ui-in-header[open] > nav a:nth-child(n+5){animation-delay:.12s}
/* Попап оформления: образцы появляются лесенкой */
html:not(#ui) body .theme-popover.shown :is(.ui-theme-choice,.ui-bg-choice){animation:ui-enter .34s var(--ui-ease) backwards}
html:not(#ui) body .theme-popover.shown .ui-theme-choice:nth-child(2),html:not(#ui) body .theme-popover.shown .ui-bg-choice:nth-child(2){animation-delay:.025s}
html:not(#ui) body .theme-popover.shown .ui-theme-choice:nth-child(3),html:not(#ui) body .theme-popover.shown .ui-bg-choice:nth-child(3){animation-delay:.05s}
html:not(#ui) body .theme-popover.shown .ui-theme-choice:nth-child(4),html:not(#ui) body .theme-popover.shown .ui-bg-choice:nth-child(4){animation-delay:.075s}
html:not(#ui) body .theme-popover.shown .ui-theme-choice:nth-child(5),html:not(#ui) body .theme-popover.shown .ui-bg-choice:nth-child(5){animation-delay:.1s}
html:not(#ui) body .theme-popover.shown .ui-bg-choice:nth-child(6){animation-delay:.125s}
/* Активный пункт нижнего меню: мягкий «пульс» иконки только в момент выбора */
html:not(#ui) body .mobile-nav .mobile-link.active b{transition:color var(--ui-fast) ease}
/* Копирование: короткий отклик */
html:not(#ui) body :is(.copy-btn,.key-copy-icon,.subscription-copy-icon,.proxy-copy).ui-copied{background:rgb(63 191 134/.16)!important;border-color:rgb(63 191 134/.4)!important;color:#5fd6a0!important}

@media (prefers-reduced-motion:reduce){
  html:not(#ui) body .ui-scroll-hidden{opacity:1!important;transform:none!important}
}
@media print{html:not(#ui) body .ui-scroll-hidden{opacity:1!important;transform:none!important}}

/* ---------- 26. Подвал главной ---------- */
html:not(#ui) body .ui-site-footer{width:min(var(--ui-wrap),calc(100% - 32px));margin:24px auto 0;padding:26px 0 calc(30px + env(safe-area-inset-bottom));border-top:1px solid var(--ui-stroke);
  display:grid;grid-template-columns:auto 1fr;gap:16px 32px;align-items:center;font-size:13.5px;color:var(--ui-text-3)}
html:not(#ui) body .ui-footer-brand{display:flex;align-items:center;gap:12px}
html:not(#ui) body .ui-footer-brand .brand-mark{width:34px;height:34px;border-radius:11px;position:relative;display:block;background:var(--ui-fill-2)!important;border:1px solid var(--ui-stroke)!important}
html:not(#ui) body .ui-footer-brand .brand-mark::before{inset:6px!important}
html:not(#ui) body .ui-footer-brand b{display:block;font-size:14px;font-weight:700;letter-spacing:.03em;color:var(--ui-text)}
html:not(#ui) body .ui-footer-brand small{display:block;font-size:12px;color:var(--ui-text-3)}
html:not(#ui) body :is(.ui-footer-links,.ui-footer-meta){display:flex;flex-wrap:wrap;gap:4px 18px;justify-content:flex-end}
html:not(#ui) body .ui-footer-meta{grid-column:1/-1;justify-content:flex-start;padding-top:12px;border-top:1px solid var(--ui-stroke);font-size:12.5px}
html:not(#ui) body :is(.ui-footer-links,.ui-footer-meta) a{color:var(--ui-text-2);transition:color var(--ui-fast) ease;padding:4px 0}
html:not(#ui) body :is(.ui-footer-links,.ui-footer-meta) a:hover{color:var(--ui-text)}
@media (max-width:700px){html:not(#ui) body .ui-site-footer{grid-template-columns:1fr}html:not(#ui) body .ui-footer-links{justify-content:flex-start}}
html:not(#ui) body.landing-page .landing-hero h1 em{letter-spacing:.42em!important;margin-right:-.42em;font-size:clamp(13px,1.3vw,16px)!important;font-weight:700!important}
@media (min-width:1025px){
  html:not(#ui) body .sidebar :is(.side-link,.side-brand),html:not(#ui) body .sidebar:hover :is(.side-link,.side-brand),html:not(#ui) body .sidebar :is(.side-link,.side-brand):hover{
    display:flex!important;justify-content:center!important;align-items:center!important;grid-template-columns:none!important;gap:0!important}
  html:not(#ui) body .sidebar .side-icon,html:not(#ui) body .sidebar:hover .side-icon,html:not(#ui) body .sidebar .side-link:hover .side-icon{margin:0!important;width:24px!important;height:24px!important;flex:0 0 24px!important;justify-self:auto!important}
}
/* Очень узкие экраны (iPhone SE 1-го поколения и т.п.) */
@media (max-width:359px){
  html:not(#ui) body.landing-page .landing-hero-actions{grid-template-columns:1fr!important}
  html:not(#ui) body .mobile-nav .mobile-link b{font-size:9.5px!important;letter-spacing:-.01em!important}
  html:not(#ui) body .mobile-nav{left:6px!important;right:6px!important;padding:4px!important}
  html:not(#ui) body .proxy-tab{padding:0 8px!important}
  html:not(#ui) body .proxy-tab span{font-size:12.5px!important}
  html:not(#ui) body .site-top-hub :is(.theme-trigger,.ui-hub-trigger),html:not(#ui) body .legal-hub.ui-in-header > summary,html:not(#ui) body .site-login-button{width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important}
  html:not(#ui) body .site-login-avatar{width:28px!important;height:28px!important;min-width:28px!important;flex-basis:28px!important}
}

/* ---------- 27. Большие экраны и телефон в альбомной ориентации ---------- */
html:not(#ui) body.landing-page .own-vpn-float:not([hidden]){position:relative!important;inset:auto!important;left:auto!important;top:auto!important;right:auto!important;bottom:auto!important;transform:none!important}
@media (min-width:1700px){:root{--ui-wrap:1320px}html:not(#ui) body{font-size:16px}}
@media (min-width:2200px){:root{--ui-wrap:1480px}
  html:not(#ui) body main h1{font-size:clamp(3rem,2.2rem + 1.6vw,4.4rem)!important}
  html:not(#ui) body.landing-page .artemida-emblem{width:280px!important;height:280px!important}}
@media (max-height:500px) and (orientation:landscape) and (max-width:1024px){
  html:not(#ui) body .mobile-nav{height:50px!important;max-width:460px}
  html:not(#ui) body .mobile-nav .mobile-link b{display:none!important}
  html:not(#ui) body .site-top-hub{grid-template-columns:auto 1fr auto!important;grid-template-rows:auto!important}
  html:not(#ui) body .site-top-hub > *{grid-row:1!important}
  html:not(#ui) body .site-top-hub :is(.landing-logo,.legal-home,.mobile-brand){grid-column:1!important}
  html:not(#ui) body .site-top-hub > nav,html:not(#ui) body .site-top-hub .hub-center-nav,html:not(#ui) body .site-top-hub .faq-hub-nav{grid-column:2!important;justify-self:center;width:auto!important}
  html:not(#ui) body .site-top-hub :is(.landing-nav-actions,.topbar-actions),html:not(#ui) body .site-top-hub > .legal-account-button{grid-column:3!important}
  html:not(#ui) body:has(.mobile-nav) main{padding-bottom:76px!important}
}
@media (max-height:500px) and (orientation:landscape) and (max-width:1024px){html:not(#ui) body .site-top-hub > nav,html:not(#ui) body .site-top-hub .hub-center-nav,html:not(#ui) body .site-top-hub .faq-hub-nav{display:flex!important}}