/* Zeus VPN guide premium skin. Visual-only layer. */
:root {
  --guide-bg: #050713;
  --guide-panel: rgba(13, 17, 29, .76);
  --guide-panel-strong: rgba(18, 22, 38, .88);
  --guide-line: rgba(255, 220, 105, .20);
  --guide-line-strong: rgba(255, 220, 105, .46);
  --guide-text: #f8fbff;
  --guide-muted: #aab5c9;
  --guide-blue: #67d6ff;
  --guide-green: #2fe0a1;
  --guide-yellow: #ffdb62;
  --guide-red: #ff5570;
  --guide-shadow: 0 22px 70px rgba(0, 0, 0, .42);
}

html,
body {
  background: var(--guide-bg) !important;
}

body {
  background:
    linear-gradient(180deg, rgba(5, 7, 19, .20), rgba(5, 7, 19, .74) 58%, rgba(5, 7, 19, .97)),
    url("../assets/vpn-hero-bg.png") center top / cover fixed no-repeat,
    var(--guide-bg) !important;
}

.animated-bg {
  background: transparent !important;
}

.grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, .038) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .032) 1px, transparent 1px) !important;
  background-size: 68px 68px !important;
  opacity: .26;
}

.aurora {
  filter: blur(82px) !important;
  opacity: .18 !important;
}

.aurora-a { background: #6575ff !important; }
.aurora-b { background: #ffdb62 !important; }

.signal {
  opacity: .34;
  border-color: rgba(255, 220, 105, .12) !important;
}

.guide-shell {
  width: min(100% - 28px, 820px) !important;
  padding-top: 18px !important;
  padding-bottom: 34px !important;
}

.guide-shell::before,
.guide-shell::after {
  content: "";
  position: fixed;
  pointer-events: none;
  z-index: -1;
  border-radius: 999px;
  filter: blur(.2px);
}

.guide-shell::before {
  width: 360px;
  height: 360px;
  right: min(-130px, -6vw);
  top: 80px;
  border: 1px solid rgba(103, 214, 255, .10);
  background: radial-gradient(circle, rgba(103, 214, 255, .10), transparent 68%);
  animation: guideOrb 16s ease-in-out infinite;
}

.guide-shell::after {
  width: 420px;
  height: 420px;
  left: min(-170px, -8vw);
  bottom: 130px;
  border: 1px solid rgba(255, 220, 105, .10);
  background: radial-gradient(circle, rgba(255, 220, 105, .09), transparent 70%);
  animation: guideOrb 18s ease-in-out infinite reverse;
}

.topbar {
  min-height: 58px !important;
  padding: 0 14px !important;
  margin-bottom: 22px !important;
  border: 1px solid rgba(255, 220, 105, .16);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018)),
    rgba(8, 11, 20, .58);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255, 255, 255, .08);
  backdrop-filter: blur(16px) saturate(145%);
}

.brand img,
.icon-button,
.status-check,
.step-icon,
.system-icon,
.site-menu-icon {
  background:
    linear-gradient(145deg, rgba(255, 220, 105, .16), rgba(103, 214, 255, .14)),
    rgba(18, 19, 31, .72) !important;
  border-color: rgba(255, 220, 105, .26) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 12px 30px rgba(0, 0, 0, .25) !important;
}

.status-panel,
.install-panel,
.site-system-panel,
.step-card,
.help-card,
.device-item,
.device-empty,
.renew-plan,
.device-summary,
.video-card {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .064), rgba(255, 255, 255, .020)),
    linear-gradient(120deg, rgba(103, 214, 255, .11), rgba(255, 220, 105, .055)),
    rgba(12, 15, 27, .76) !important;
  border-color: var(--guide-line) !important;
  box-shadow: var(--guide-shadow), inset 0 1px 0 rgba(255, 255, 255, .075) !important;
  backdrop-filter: blur(18px) saturate(145%);
}

.status-panel,
.install-panel,
.site-system-panel {
  position: relative;
  overflow: hidden;
}

.status-panel::after,
.install-panel::after,
.site-system-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 0 24%, rgba(255, 255, 255, .12) 38%, transparent 52% 100%);
  transform: translateX(-130%);
  opacity: .32;
  animation: guideSheen 8s ease-in-out infinite;
}

.status-panel > *,
.install-panel > *,
.site-system-panel > * {
  position: relative;
  z-index: 1;
}

.status-panel {
  border-radius: 24px !important;
}

.site-menu {
  padding: 5px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .050), rgba(255, 255, 255, .018)),
    rgba(8, 10, 18, .70) !important;
  border: 1px solid rgba(255, 220, 105, .16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 14px 40px rgba(0,0,0,.24);
}

.site-menu-button,
.download-link,
.primary-action,
.secondary-action,
.renew-submit {
  border-color: rgba(255, 220, 105, .20) !important;
  box-shadow: 0 16px 42px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.site-menu-button.is-active,
.site-menu-button:hover,
.renew-plan.is-active,
.renew-plan:hover {
  border-color: var(--guide-line-strong) !important;
  background:
    linear-gradient(135deg, rgba(255, 220, 105, .14), rgba(103, 214, 255, .08)),
    rgba(14, 17, 29, .78) !important;
}

.primary-action,
.renew-submit,
.download-link {
  background:
    linear-gradient(135deg, #fffaf0 0%, #eff5ff 55%, #ffe9a3 100%) !important;
  color: #070913 !important;
}

.secondary-action {
  background: rgba(255, 220, 105, .12) !important;
  color: var(--guide-yellow) !important;
}

.brand,
.brand-name,
h1,
h2 {
  text-shadow: 0 0 24px rgba(103, 214, 255, .14), 0 2px 20px rgba(0, 0, 0, .38);
}

.stat strong,
.renew-plan strong,
.device-summary strong,
.accent,
.device-title,
.plan-price {
  color: var(--guide-yellow) !important;
}

.toast {
  border-color: rgba(255, 220, 105, .24) !important;
  background: rgba(9, 11, 20, .92) !important;
}

button,
a,
.site-menu-button,
.renew-plan,
.device-item,
.step-card {
  transition:
    transform .20s ease,
    border-color .20s ease,
    background .20s ease,
    box-shadow .20s ease,
    opacity .20s ease !important;
}

button:active,
a:active,
.site-menu-button:active,
.renew-plan:active {
  transform: translateY(1px) scale(.985) !important;
}

@keyframes guideSheen {
  0%, 56% { transform: translateX(-130%); }
  84%, 100% { transform: translateX(130%); }
}

@keyframes guideOrb {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .82; }
  50% { transform: translate3d(18px, -16px, 0) scale(1.04); opacity: 1; }
}

@media (max-width: 640px) {
  body {
    background:
      linear-gradient(180deg, rgba(5, 7, 19, .24), rgba(5, 7, 19, .82) 54%, rgba(5, 7, 19, .98)),
      url("../assets/vpn-mobile-bg.png") center top / cover fixed no-repeat,
      var(--guide-bg) !important;
  }

  .guide-shell {
    width: min(100% - 20px, 820px) !important;
    padding-top: 12px !important;
  }

  .topbar {
    min-height: 54px !important;
    margin-bottom: 16px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .status-panel::after,
  .install-panel::after,
  .site-system-panel::after,
  .guide-shell::before,
  .guide-shell::after {
    animation: none !important;
  }
}