@keyframes orb1{0.0%{transform:translate(114.0px,0.0px)}4.17%{transform:translate(110.1px,11.4px)}8.33%{transform:translate(98.7px,22.0px)}12.5%{transform:translate(80.6px,31.1px)}16.67%{transform:translate(57.0px,38.1px)}20.83%{transform:translate(29.5px,42.5px)}25.0%{transform:translate(0.0px,44.0px)}29.17%{transform:translate(-29.5px,42.5px)}33.33%{transform:translate(-57.0px,38.1px)}37.5%{transform:translate(-80.6px,31.1px)}41.67%{transform:translate(-98.7px,22.0px)}45.83%{transform:translate(-110.1px,11.4px)}50.0%{transform:translate(-114.0px,0.0px)}54.17%{transform:translate(-110.1px,-11.4px)}58.33%{transform:translate(-98.7px,-22.0px)}62.5%{transform:translate(-80.6px,-31.1px)}66.67%{transform:translate(-57.0px,-38.1px)}70.83%{transform:translate(-29.5px,-42.5px)}75.0%{transform:translate(-0.0px,-44.0px)}79.17%{transform:translate(29.5px,-42.5px)}83.33%{transform:translate(57.0px,-38.1px)}87.5%{transform:translate(80.6px,-31.1px)}91.67%{transform:translate(98.7px,-22.0px)}95.83%{transform:translate(110.1px,-11.4px)}100.0%{transform:translate(114.0px,-0.0px)}}
@keyframes orb2{0.0%{transform:translate(-37.5px,56.4px)}4.17%{transform:translate(-57.4px,47.8px)}8.33%{transform:translate(-73.4px,35.9px)}12.5%{transform:translate(-84.4px,21.6px)}16.67%{transform:translate(-89.6px,5.8px)}20.83%{transform:translate(-88.7px,-10.3px)}25.0%{transform:translate(-81.8px,-25.8px)}29.17%{transform:translate(-69.4px,-39.5px)}33.33%{transform:translate(-52.1px,-50.5px)}37.5%{transform:translate(-31.4px,-58.1px)}41.67%{transform:translate(-8.5px,-61.7px)}45.83%{transform:translate(15.0px,-61.1px)}50.0%{transform:translate(37.5px,-56.4px)}54.17%{transform:translate(57.4px,-47.8px)}58.33%{transform:translate(73.4px,-35.9px)}62.5%{transform:translate(84.4px,-21.6px)}66.67%{transform:translate(89.6px,-5.8px)}70.83%{transform:translate(88.7px,10.3px)}75.0%{transform:translate(81.8px,25.8px)}79.17%{transform:translate(69.4px,39.5px)}83.33%{transform:translate(52.1px,50.5px)}87.5%{transform:translate(31.4px,58.1px)}91.67%{transform:translate(8.5px,61.7px)}95.83%{transform:translate(-15.0px,61.1px)}100.0%{transform:translate(-37.5px,56.4px)}}

/* ===== UnVPN · Cosmos layer (loads after design.css) ===== */
:root{--bg:#05060d;--surface:#0d1126;--surface-raised:#151a36;--text:#f3f5ff;--muted:#aeb4d0;--accent:#9db8ff;--accent-ink:#070b24;--line:#9db8ff1f;--green:#7ff0d6;--amber:#ffd48a;--aurora:linear-gradient(105deg,#8fb0ff,#b99bff 35%,#7ff0d6 70%,#8fb0ff)}
html{background:#05060d}
body,body[data-page]{background:transparent!important}
body::before{background:radial-gradient(ellipse at 50% -10%,#5b6cff14,transparent 60%)}
body[data-page] .container{background:transparent!important;border-color:#ffffff0a}
::selection{background:#9db8ff44}
:focus-visible{outline-color:#9db8ff}
#space-sky{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1}
.space-nebula{position:fixed;inset:-20%;z-index:-2;pointer-events:none;background:
 radial-gradient(40% 32% at 22% 24%,#5a43ff30,transparent 70%),
 radial-gradient(36% 30% at 80% 18%,#00c2d426,transparent 70%),
 radial-gradient(46% 36% at 70% 82%,#a23dff26,transparent 70%),
 radial-gradient(30% 26% at 14% 78%,#2b6bff22,transparent 70%);animation:nebula 60s ease-in-out infinite alternate;will-change:transform}
@keyframes nebula{from{transform:translate3d(-2%,-1%,0) scale(1) rotate(0)}to{transform:translate3d(3%,2%,0) scale(1.1) rotate(4deg)}}
.init-splash{background:radial-gradient(circle at 50% 45%,#10163a,#05060d 70%)}

/* glass = porthole */
.glass{background:linear-gradient(160deg,#1c2250a6,#0b0e24a0);border-color:#9db8ff26;backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%);box-shadow:inset 0 1px 0 #ffffff12,0 10px 40px #02031066}
.glass.trial-card{background:linear-gradient(125deg,#2a2370b8,#0c1230a8 72%);border-color:#b99bff40}
.glass.trial-card::before{content:'';position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;background:radial-gradient(#b99bff40,transparent 65%);animation:breathe 7s ease-in-out infinite;pointer-events:none}
.glass-active,.period-picker .glass-active{background:linear-gradient(150deg,#2b3a8a8c,#161b4a8c);border-color:#9db8ffa0;color:#eaf0ff;box-shadow:0 0 28px #6f8cff2e,inset 0 1px 0 #ffffff1c}
.period-picker{background:#0b0e2490;border-color:#9db8ff1f}
.modal-overlay{background:#03040bb8}
.user-chip{background:#9db8ff10;border-color:#9db8ff30}
.user-chip .dot-online{color:#7ff0d6;box-shadow:0 0 10px #7ff0d6aa;animation:shimmer 2.4s ease-in-out infinite}
.logo-icon{color:#9db8ff;filter:drop-shadow(0 0 8px #6f8cff80)}

/* hero */
.hero>*{animation:rise .65s var(--ease) both}
.hero>.eyebrow{animation-delay:.02s}.hero>.orbit-art{animation-delay:.08s}.hero>h1{animation-delay:.2s}.hero>.hero-description{animation-delay:.34s}
@keyframes rise{from{opacity:0;transform:translateY(14px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
.hero h1 em{background:var(--aurora);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:aurora 9s linear infinite}
@keyframes aurora{to{background-position:300% 0}}
.eyebrow,.plan-badge{color:#8fa8ff}

/* planet + orbits */
.orbit-art::before{background:radial-gradient(ellipse,#6f8cff30,#8f5bff10 45%,transparent 70%);animation:shimmer 6s ease-in-out infinite}
.orbit-ring{border-color:#9db8ff59;box-shadow:0 0 14px #6f8cff1f}
.orbit-ring.second{border-color:#b99bff40}.orbit-ring.third{border-color:#9db8ff1c}
.orbit-ring::after{content:'';position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px;border-radius:50%;background:#fff;box-shadow:0 0 12px 3px #9db8ffcc;animation:orb1 14s linear infinite}
.orbit-ring.second::after{background:#ffd48a;box-shadow:0 0 12px 3px #ffd48a99;animation:orb2 9s linear infinite reverse}
.orbit-ring.third::after{display:none}
.orbit-core{overflow:hidden;background:radial-gradient(circle at 32% 26%,#e4f1ff 0,#8fb0ff 24%,#5a50d0 54%,#1b1856 84%,#0a0b26);box-shadow:inset -16px -18px 28px #02031099,inset 2px 2px 3px #ffffffaa,0 0 38px #6f8cff66,0 0 90px #7a5cff3a}
.orbit-core::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(105deg,transparent 0 12px,#ffffff16 12px 19px,transparent 19px 38px);background-size:76px 100%;animation:bands 16s linear infinite}
.orbit-core svg{position:relative;color:#0a0d34;opacity:.75}
.orbit-letter{color:#0b1038}
/* The planet is decorative; there are no tap, swell or explosion handlers. */
.orbit-core{pointer-events:none;user-select:none;-webkit-user-select:none}
.orbit-ring,.orbit-dot,.orbit-star,.orbit-letter,.orbit-core svg{pointer-events:none}
@keyframes bands{to{background-position:76px 0}}
.orbit-dot{background:#fff;box-shadow:0 0 14px 2px #9db8ffaa}
.orbit-star{color:#cfdcffcc;animation:twinkle 3s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.35;transform:scale(.8) rotate(0)}50%{opacity:1;transform:scale(1.25) rotate(25deg)}}
body:has(.expiry-pill.danger) .profile-hero .orbit-core{box-shadow:inset -16px -18px 28px #02031099,inset 2px 2px 3px #ffffffaa,0 0 44px #ff7a8a77}
body:has(.expiry-pill.warning) .profile-hero .orbit-core{box-shadow:inset -16px -18px 28px #02031099,inset 2px 2px 3px #ffffffaa,0 0 44px #ffd48a66}

/* buttons */
.btn-primary,.toast-btn,.btn{position:relative;overflow:hidden;background:var(--aurora);background-size:260% 100%;color:#070b24;border-color:#ffffff30;animation:aurora-btn 8s linear infinite;box-shadow:0 8px 30px #6f8cff30}
.btn-primary:hover,.toast-btn:hover,.btn:hover{background:var(--aurora);background-size:260% 100%;box-shadow:0 10px 38px #8f7cff55}
@keyframes aurora-btn{to{background-position:260% 0}}
.btn-primary.is-loading{animation-duration:1.6s}
.btn-secondary{background:#9db8ff0d;border-color:#9db8ff2e;color:#dfe7ff}
.ripple{position:absolute;border-radius:50%;pointer-events:none;background:#ffffff66;width:12px;height:12px;margin:-6px;animation:ripple .65s ease-out forwards}
@keyframes ripple{to{transform:scale(28);opacity:0}}
.btn-secondary,.plan-card{overflow:hidden}.plan-card .ripple{background:#9db8ff44}

/* tariffs */
[data-page] .tariff-card.glass-active{background:linear-gradient(150deg,#2b3a8a99,#161b4a99);border-color:#9db8ff33;box-shadow:0 0 34px #6f8cff30}
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
.tariff-card.glass-active::before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;background:conic-gradient(from var(--ang),transparent 0 62%,#8fb0ff 80%,#fff 92%,transparent);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:ang 3.6s linear infinite}
@keyframes ang{to{--ang:360deg}}
.tariff-card:not(.glass-active){opacity:.86}
.tariff-symbol svg{transition:transform .5s var(--ease),filter .5s}
#t-300 .tariff-symbol svg{animation:breathe 6s ease-in-out infinite}
#t-1000 .tariff-symbol svg{animation:breathe 7s ease-in-out infinite reverse}
#t-2000 .tariff-symbol svg{animation:pulse-star 3s ease-in-out infinite}
.glass-active .tariff-symbol svg{filter:drop-shadow(0 0 8px #8fb0ffcc)}
#t-2000.glass-active .tariff-symbol svg{filter:drop-shadow(0 0 9px #ffd48acc)}
@keyframes pulse-star{0%,100%{transform:scale(.92) rotate(0)}50%{transform:scale(1.12) rotate(18deg)}}
.badge-popular{background:linear-gradient(100deg,#ffd48a,#ffb36b);color:#2a1700;box-shadow:0 0 14px #ffd48a55}
.discount-label{color:#7ff0d6!important;text-shadow:0 0 10px #7ff0d655}
.summary-box{background:#0b0e2480;border-color:#9db8ff24}
.price-flash{animation:flash .7s ease-out}
@keyframes flash{0%{text-shadow:0 0 0 #8fb0ff}30%{text-shadow:0 0 18px #8fb0ffcc;color:#fff}100%{text-shadow:0 0 0 #8fb0ff}}

/* bottom nav */
.bottom-nav{background:#0b0f2ad9;border-color:#9db8ff26;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.nav-item{position:relative;z-index:1}
.nav-item[aria-current=page]{background:transparent;color:#eaf0ff}
.nav-orb{position:absolute;top:4px;bottom:4px;left:0;width:var(--w,0);transform:translateX(var(--x,0));border-radius:14px;z-index:0;pointer-events:none;background:radial-gradient(120% 140% at 50% 0,#6f8cff40,#7a5cff14);box-shadow:inset 0 0 0 1px #9db8ff40,0 0 22px #6f8cff40;transition:transform .55s var(--ease),width .55s var(--ease)}
.nav-orb::after{content:'';position:absolute;left:50%;bottom:3px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#fff;box-shadow:0 0 10px 2px #9db8ff}

/* profile: fuel gauge */
.progress-track{background:#0a0d2a;border:1px solid #9db8ff1f;overflow:visible}
.progress-fill{position:relative;background:linear-gradient(90deg,#4b6bff,#7ff0d6);background-size:200% 100%;animation:plasma 3s linear infinite;box-shadow:0 0 14px #5a8cff88}
.progress-fill::after{content:'';position:absolute;right:-5px;top:50%;width:11px;height:11px;margin-top:-5.5px;border-radius:50%;background:#fff;box-shadow:0 0 12px 4px #9db8ffcc;animation:shimmer 1.4s ease-in-out infinite}
.progress-fill.warning{background:linear-gradient(90deg,#ffb36b,#ffd48a);background-size:200% 100%;box-shadow:0 0 14px #ffd48a77}
.progress-fill.danger{background:linear-gradient(90deg,#ff6b88,#ffa0a0);background-size:200% 100%;box-shadow:0 0 14px #ff6b8877}
@keyframes plasma{to{background-position:200% 0}}
.expiry-pill.danger{animation:pulse-pill 1.8s ease-in-out infinite}
@keyframes pulse-pill{50%{box-shadow:0 0 0 6px #ff6b8820}}
.btn-claim-trial{position:relative;background:linear-gradient(110deg,#ffd48a22,#b99bff22);border:1px solid #ffd48a55;color:#ffe4b0;animation:glow-gift 3s ease-in-out infinite}
@keyframes glow-gift{50%{box-shadow:0 0 26px #ffd48a44}}

/* wizard: flight route */
.setup-progress li{--step-inset:10px;position:relative;min-width:0;padding:14px var(--step-inset) 10px;border-top:0;border-radius:12px}
.setup-progress li::after{content:'';position:absolute;top:0;left:var(--step-inset);right:var(--step-inset);height:3px;border-radius:3px;background:#9db8ff1c}
.setup-progress li[aria-current=step]{color:#cfdcff;background:linear-gradient(180deg,#9db8ff13,#9db8ff05);box-shadow:inset 0 0 0 1px #9db8ff16}
.setup-progress li[aria-current=step]::after{background:#8fb0ff;box-shadow:0 0 10px #8fb0ff66}
.setup-progress li[aria-current=step]::before{content:'';position:absolute;z-index:1;top:-3px;left:var(--step-inset);width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 12px 3px #9db8ff;animation:ship 1.8s ease-in-out infinite alternate}
.setup-progress li.completed::after{background:#7ff0d6;box-shadow:0 0 8px #7ff0d633}
@keyframes ship{to{left:calc(100% - var(--step-inset) - 9px)}}
@media(max-width:360px){.setup-progress li{--step-inset:6px;font-size:10px}}
[data-setup-step]:not(.hidden){animation:step-in .5s var(--ease)}
@keyframes step-in{from{opacity:0;transform:translateX(18px);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
.app-item-active{border-color:#9db8ff80}
.app-check{filter:drop-shadow(0 0 6px #9db8ff)}
.setup-ready{position:relative;color:#7ff0d6;background:#7ff0d610;border-color:#7ff0d640}
.setup-ready::after{content:'';position:absolute;inset:-2px;border-radius:inherit;border:2px solid #7ff0d6;animation:ping 2.2s ease-out infinite}
@keyframes ping{from{transform:scale(1);opacity:.6}to{transform:scale(1.18);opacity:0}}

/* loader = hyperspace jump */
#loader-modal{background:radial-gradient(circle,#05060d40,#05060d99);backdrop-filter:none;-webkit-backdrop-filter:none}
.loader-spinner,.spinner{border-color:#9db8ff22;border-top-color:#9db8ff;border-right-color:#b99bff;box-shadow:0 0 22px #6f8cff66}
.toast-card.is-error,.toast-card:has(.toast-icon:is([data-err])){animation:shake .45s}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.route-loading::after{background:var(--aurora)}

/* open.html: docking */
.open-page .orbit-art{transform:scale(1.2);margin-bottom:28px}
.open-page .orbit-dot{animation:dock 2.4s ease-in-out infinite alternate}
@keyframes dock{from{transform:translate(0,0)}to{transform:translate(62px,-42px)}}

/* admin */
.stat-card{position:relative;overflow:hidden}
.stat-card::before{content:'';position:absolute;left:0;top:0;height:2px;width:100%;background:var(--aurora);opacity:.7}
.stat-value{background:var(--aurora);-webkit-background-clip:text;background-clip:text;color:transparent}
.danger-card{border-color:#ff6b8833}
.btn-danger{box-shadow:0 0 20px #ff6b8833}

@media (prefers-reduced-motion:reduce){.space-nebula{animation:none}.hero>*{filter:none}}

/* Preserve the artwork; avoid permanent repainting of gradients and shadows. */
.space-nebula{inset:0;animation:none;will-change:auto}
.hero h1 em,.btn-primary,.toast-btn,.btn,.orbit-core::before,
.tariff-card.glass-active::before,.progress-fill,.expiry-pill.danger,.btn-claim-trial{animation:none}
.btn-claim-trial{box-shadow:0 0 20px #ffd48a22}
.tariff-card.glass-active::before{--ang:35deg}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes step-in{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.orbit-art{contain:layout style}
@media(pointer:coarse){
 .glass{backdrop-filter:none;-webkit-backdrop-filter:none}
 .bottom-nav{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
 .modal-overlay{backdrop-filter:none;-webkit-backdrop-filter:none}
}
.is-guest .dot-online{display:none}
.auth-layout{max-width:480px;margin:32px auto}
.auth-card,.referral-card{padding:24px}
.auth-card h1{font-size:28px;margin-bottom:12px}
.auth-card p,.referral-card p{color:var(--muted);line-height:1.6;margin:12px 0}
.auth-card label{display:block;margin:18px 0 8px}
.auth-card input{width:100%;padding:14px;background:#080c20;color:var(--text);border:1px solid var(--line);border-radius:12px;font:inherit;font-size:16px;box-sizing:border-box}
.auth-card form .btn-primary{margin-top:14px}
.auth-card [role=status]{min-height:48px}
.referral-card{margin-top:20px}
.referral-card h2{font-size:20px}
.referral-card button,.referral-card a{margin-top:12px}
.account-exit{margin:16px 0}
[hidden]{display:none!important}
.profile-hero h1{overflow-wrap:anywhere}
.tariff-card{grid-template-columns:38px minmax(0,1fr) auto}
@media(max-width:360px){.tariff-card{grid-template-columns:30px minmax(0,1fr) auto}}
@media(max-width:320px){.tariff-card{grid-template-columns:25px minmax(0,1fr) auto}}
.account-email{color:var(--muted);font-size:14px;overflow-wrap:anywhere;margin:8px 0 0}

/* Match older selectors with IDs to the current palette as well. */
#renew-card .glass-active{border-color:#9db8ff80;background:#9db8ff14;box-shadow:0 4px 16px #8fb0ff0b}
#claim-trial-box .btn-claim-trial{border-color:#ffd48a55;background:linear-gradient(110deg,#ffd48a18,#9db8ff12);color:#ffe4b0}
#claim-trial-box .btn-claim-trial svg{color:#ffd48a}
#claim-trial-box .btn-claim-trial:hover{background:#ffd48a20;border-color:#ffd48a88}
.btn-back,.setup-profile-link{border-color:#9db8ff2b;background:#9db8ff08;color:var(--muted)}
.btn-back:hover,.setup-profile-link:hover{background:#9db8ff15;border-color:#9db8ff4d;color:var(--accent)}
.trial-gift{border-color:#9db8ff26;background:#9db8ff08;color:var(--accent)}
.profile-id-button:hover{background:#9db8ff0b;border-color:#9db8ff26}
.status-card{background:linear-gradient(140deg,#182042,#0b1027);border-color:#9db8ff26}
.expiry-pill{background:#9db8ff09;border-color:#9db8ff26;color:#cfdcff}
.tariff-warning{background:#9db8ff09;border-color:#9db8ff26;color:#dfe7ff}
#toast-modal .toast-card{border-color:#9db8ff33}

/* ---- Текст не выделяется (кроме полей ввода и окна «скопируйте вручную») ---- */
html,body,body *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,[contenteditable="true"]{-webkit-user-select:text;user-select:text}

/* ---- «Пригласи друга»: сворачиваемая карточка с акцентной рамкой ---- */
details.referral-card{margin-top:10px;padding:0;position:relative;overflow:hidden;border:1px solid transparent;
  background:linear-gradient(135deg,#2a2370e6,#0c1230e6) padding-box,linear-gradient(120deg,#9db8ff,#c1b0f5,#9cdbbe) border-box;
  box-shadow:0 0 34px #8f7cff38,inset 0 1px 0 #ffffff1c}
details.referral-card::before{content:'';position:absolute;right:-50px;top:-50px;width:170px;height:170px;border-radius:50%;
  background:radial-gradient(#b99bff44,transparent 65%);pointer-events:none}
.referral-card summary{list-style:none;display:flex;align-items:center;gap:14px;padding:16px 18px;cursor:pointer;position:relative}
.referral-card summary::-webkit-details-marker{display:none}
.ref-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;flex-shrink:0;color:#070b24;
  background:linear-gradient(135deg,#9db8ff,#c1b0f5);box-shadow:0 6px 20px #8f7cff55}
.ref-head{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.ref-head strong{font-size:17px;white-space:nowrap}
.ref-head small{color:var(--green);font-size:13px}
.ref-badge{font-size:12px;font-weight:700;color:#070b24;background:var(--green);border-radius:999px;padding:3px 9px;white-space:nowrap}
.ref-chev{color:var(--muted);transition:transform .25s var(--ease)}
details[open].referral-card .ref-chev{transform:rotate(180deg)}
.ref-body{padding:0 18px 18px;position:relative}
.ref-body p{margin:0 0 12px}
@media (prefers-reduced-motion:reduce){.ref-chev{transition:none}}