:root {
  --bg: #070411;
  --bg-2: #0d071c;
  --panel: rgba(15, 12, 34, 0.72);
  --panel-2: rgba(21, 14, 50, 0.78);
  --line: rgba(158, 92, 255, 0.34);
  --line-strong: rgba(75, 218, 255, 0.55);
  --text: #fbf8ff;
  --muted: #aaa4c4;
  --muted-2: #77708f;
  --purple: #a855f7;
  --violet: #7c3cff;
  --pink: #f02cff;
  --cyan: #45d8ff;
  --green: #5af0b9;
  --amber: #ffd166;
  --danger: #ff8aa8;
  --shadow: 0 28px 100px rgba(0, 0, 0, 0.46);
  --radius-xl: 34px;
  --radius-lg: 24px;
  --radius-md: 16px;
  --mx: 50vw;
  --my: 22vh;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 50% -10%, rgba(124, 60, 255, 0.24), transparent 34rem),
    radial-gradient(circle at 8% 18%, rgba(168, 85, 247, 0.18), transparent 28rem),
    radial-gradient(circle at 96% 12%, rgba(69, 216, 255, 0.12), transparent 30rem),
    linear-gradient(180deg, #090416 0%, #06030a 48%, #05040b 100%);
  font-family: "Aptos Display", "Segoe UI", "Trebuchet MS", sans-serif;
  overflow-x: hidden;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  content: "";
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, #000, transparent 72%);
}

body::after {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(168, 85, 247, 0.22), transparent 18rem),
    radial-gradient(circle at calc(var(--mx) + 7rem) calc(var(--my) + 3rem), rgba(69, 216, 255, 0.13), transparent 15rem);
  opacity: 0.82;
  transition: opacity 180ms ease;
}

body.modal-open {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
}

button {
  color: inherit;
  cursor: pointer;
}

img,
svg {
  display: block;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 24px;
  font-size: clamp(58px, 8vw, 118px);
  line-height: 0.88;
  letter-spacing: -0.085em;
}

h2 {
  margin-bottom: 18px;
  font-size: clamp(38px, 5.4vw, 82px);
  line-height: 0.92;
  letter-spacing: -0.075em;
}

h3 {
  margin-bottom: 12px;
  font-size: 26px;
  line-height: 1.05;
  letter-spacing: -0.045em;
}

.cursor-aurora {
  position: fixed;
  inset: auto auto 0 0;
  z-index: 200;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.site-shell {
  position: relative;
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
}

.site-header {
  position: sticky;
  top: 14px;
  z-index: 70;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: center;
  margin: 14px 0 0;
  padding: 12px 14px;
  border: 1px solid rgba(168, 85, 247, 0.22);
  border-radius: 999px;
  background: rgba(7, 4, 17, 0.72);
  box-shadow:
    0 18px 70px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(22px);
  isolation: isolate;
  overflow: hidden;
}

.site-header::before,
.site-header::after {
  position: absolute;
  pointer-events: none;
  content: "";
}

.site-header::before {
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 0% 50%, rgba(168, 85, 247, 0.26), transparent 22%),
    radial-gradient(circle at 100% 50%, rgba(69, 216, 255, 0.18), transparent 24%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035), transparent 26%, rgba(255, 255, 255, 0.045) 62%, transparent);
}

.site-header::after {
  top: -80px;
  left: -160px;
  z-index: -1;
  width: 260px;
  height: 170px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(69, 216, 255, 0.24), transparent 64%);
  filter: blur(12px);
  animation: header-comet 9s ease-in-out infinite;
}

.site-header > * {
  position: relative;
  z-index: 1;
}

.brand,
.profile-head {
  display: flex;
  gap: 14px;
  align-items: center;
}

.brand-mark,
.profile-avatar {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 1px solid rgba(168, 85, 247, 0.72);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 0%, rgba(240, 44, 255, 0.22), transparent 52%),
    #05020d;
  color: #d7a3ff;
  box-shadow:
    0 0 0 8px rgba(124, 60, 255, 0.12),
    0 0 24px rgba(168, 85, 247, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.brand-mark {
  animation: shield-breathe 4.8s ease-in-out infinite;
}

.brand-mark img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  transform: scale(1.04);
}

.brand b,
.brand small {
  display: block;
}

.brand b {
  color: #fff;
  font-size: 19px;
  font-weight: 950;
  letter-spacing: -0.035em;
  text-shadow: 0 0 20px rgba(168, 85, 247, 0.22);
}

.brand small {
  display: none;
}

.main-nav {
  justify-self: center;
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 5px;
  border: 1px solid rgba(168, 85, 247, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.025);
}

.main-nav a,
.main-nav button {
  position: relative;
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  border: 0;
  border-radius: 999px;
  padding: 0 14px;
  background: transparent;
  color: #d8d2ed;
  font: inherit;
  font-size: 14px;
  font-weight: 850;
  cursor: pointer;
  transition:
    background 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.main-nav a:hover,
.main-nav a:focus-visible,
.main-nav button:hover,
.main-nav button:focus-visible {
  background: rgba(168, 85, 247, 0.14);
  color: #fff;
  transform: translateY(-1px);
}

.main-nav a::after {
  position: absolute;
  right: 16px;
  bottom: 7px;
  left: 16px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  content: "";
  opacity: 0;
  transform: scaleX(0.4);
  transition: opacity 180ms ease, transform 180ms ease;
}

.main-nav a:hover::after,
.main-nav a:focus-visible::after {
  opacity: 1;
  transform: scaleX(1);
}

.header-actions,
.hero-actions,
.period-strip,
.checkout-actions,
.checkout-links,
.cookie-actions,
.proof-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.support-link,
.primary-link,
.cta,
.period,
.wide-button,
.checkout-actions button,
.checkout-links a,
.checkout-links button,
.cookie-actions a,
.cookie-actions button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0 18px;
  font-weight: 950;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease,
    color 180ms ease;
}

.support-link {
  border: 1px solid rgba(168, 85, 247, 0.28);
  background:
    radial-gradient(circle at 50% 0%, rgba(168, 85, 247, 0.10), transparent 58%),
    rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.primary-link,
.cta-main,
.wide-button,
.checkout-actions button,
.cookie-actions button {
  border: 0;
  background: linear-gradient(135deg, #b014ff 0%, #7c3cff 52%, #45d8ff 140%);
  color: #fff;
  box-shadow:
    0 16px 38px rgba(124, 60, 255, 0.34),
    0 0 42px rgba(168, 85, 247, 0.12);
}

.primary-link,
.support-link {
  position: relative;
  overflow: hidden;
}

.primary-link::before,
.support-link::before,
.footer-action::before {
  position: absolute;
  inset: -2px;
  pointer-events: none;
  content: "";
  background: linear-gradient(115deg, transparent 0 34%, rgba(255, 255, 255, 0.34), transparent 58% 100%);
  opacity: 0;
  transform: translateX(-120%);
  transition: opacity 220ms ease, transform 520ms ease;
}

.primary-link:hover,
.primary-link:focus-visible,
.support-link:hover,
.support-link:focus-visible {
  transform: translateY(-2px);
}

.primary-link:hover,
.primary-link:focus-visible {
  box-shadow:
    0 18px 44px rgba(124, 60, 255, 0.45),
    0 0 46px rgba(69, 216, 255, 0.18);
}

.support-link:hover,
.support-link:focus-visible {
  border-color: rgba(194, 78, 255, 0.86);
  box-shadow:
    0 0 0 1px rgba(194, 78, 255, 0.12),
    0 0 32px rgba(168, 85, 247, 0.25);
}

.primary-link:hover::before,
.primary-link:focus-visible::before,
.support-link:hover::before,
.support-link:focus-visible::before,
.footer-action:hover::before,
.footer-action:focus-visible::before {
  opacity: 1;
  transform: translateX(120%);
}

.menu-button {
  display: none;
}

.section-pad {
  padding: 90px 0;
}

.nova-hero {
  position: relative;
  min-height: 820px;
  padding: 116px 0 76px;
}

.sub-hero {
  position: relative;
  padding: 116px 0 24px;
}

.sub-hero h1 {
  max-width: 960px;
  background: linear-gradient(92deg, #fff 0%, #f4ebff 35%, #b86cff 66%, #45d8ff 100%);
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sub-hero [data-reveal],
.cabinet-section .section-heading[data-reveal] {
  opacity: 1;
  transform: none;
  filter: none;
}

.nova-hero::before {
  position: absolute;
  inset: 20px -130px auto auto;
  width: 680px;
  height: 680px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(124, 60, 255, 0.24), transparent 62%),
    conic-gradient(from 180deg, rgba(69, 216, 255, 0.18), transparent, rgba(240, 44, 255, 0.18), transparent);
  filter: blur(28px);
  content: "";
  animation: slow-turn 18s linear infinite;
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.96fr) minmax(390px, 0.86fr);
  gap: 54px;
  align-items: center;
}

.eyebrow,
.plan-kicker,
.checkout-kicker {
  display: inline-flex;
  margin: 0 0 20px;
  padding: 8px 12px;
  border: 1px solid rgba(168, 85, 247, 0.38);
  border-radius: 999px;
  background: rgba(168, 85, 247, 0.12);
  color: #e4c7ff;
  font-size: 13px;
  font-weight: 950;
}

.hero-copy h1 {
  max-width: 760px;
  text-wrap: balance;
}

.hero-copy[data-reveal] {
  opacity: 1;
  transform: none;
  filter: none;
}

.hero-copy h1::first-line,
.section-heading h2,
.tariff-intro h2,
.signal-panel h2,
.cabinet-section h2 {
  color: #fff;
}

.hero-copy h1 {
  background: linear-gradient(92deg, #fff 0%, #f4ebff 30%, #b86cff 58%, #45d8ff 100%);
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.lead,
.muted {
  color: var(--muted);
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.62;
}

.lead {
  max-width: 720px;
  margin-bottom: 34px;
}

.cta {
  position: relative;
  overflow: hidden;
  min-height: 58px;
  border: 0;
  padding: 0 28px;
  font-size: 16px;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}

.cta span {
  margin-left: 9px;
  transition: transform 180ms ease;
}

.cta:hover,
.cta:focus-visible,
.plan-card a:hover,
.wide-button:hover,
.checkout-actions button:hover {
  transform: translateY(-3px);
}

.cta-main:hover,
.cta-main:focus-visible {
  box-shadow:
    0 20px 48px rgba(124, 60, 255, 0.48),
    0 0 54px rgba(69, 216, 255, 0.20);
}

.cta:hover span {
  transform: translateX(4px);
}

.cta-main {
  min-height: 56px;
  border: 1px solid rgba(151, 106, 255, 0.48);
  padding: 0 24px;
  background:
    linear-gradient(180deg, rgba(24, 20, 47, 0.86), rgba(10, 6, 24, 0.92));
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.28),
    0 0 28px rgba(124, 60, 255, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.cta-main span {
  display: inline-block;
  margin-left: 10px;
  color: #9af2ff;
  background: none;
  box-shadow: none;
}

.cta-main:hover,
.cta-main:focus-visible {
  border-color: rgba(190, 130, 255, 0.70);
  background:
    linear-gradient(180deg, rgba(31, 26, 61, 0.90), rgba(12, 7, 28, 0.94));
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.32),
    0 0 34px rgba(124, 60, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.cta-soft,
.cta-ghost,
.period,
.checkout-links a,
.checkout-links button,
.cookie-actions a {
  border: 1px solid rgba(168, 85, 247, 0.42);
  background: rgba(255, 255, 255, 0.035);
  color: #fff;
}

.cta-ghost {
  border-color: rgba(69, 216, 255, 0.38);
}

.proof-row {
  margin-top: 28px;
}

.proof-row span {
  min-height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.035);
  color: #cdc7e3;
  font-size: 13px;
  font-weight: 850;
}

.hero-console,
.flow-card,
.signal-panel,
.plan-card,
.checkout-panel,
.profile-card,
.dash-card,
.modal-card,
.cookie-banner,
.site-footer {
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)),
    var(--panel);
  box-shadow:
    var(--shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
  backdrop-filter: blur(20px);
}

.hero-console {
  --rx: 0deg;
  --ry: 0deg;
  position: relative;
  min-height: 590px;
  overflow: hidden;
  border-radius: 32px;
  transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 220ms ease;
}

.hero-console::before {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(120deg, transparent 0 24%, rgba(69, 216, 255, 0.25) 31%, transparent 42% 100%);
  transform: translateX(-120%);
  animation: panel-sweep 6s ease-in-out infinite;
}

.console-top {
  display: flex;
  gap: 8px;
  align-items: center;
  height: 54px;
  padding: 0 18px;
  border-bottom: 1px solid rgba(168, 85, 247, 0.22);
  background: rgba(255, 255, 255, 0.035);
}

.console-top span {
  width: 11px;
  height: 11px;
  border-radius: 999px;
}

.console-top span:nth-child(1) {
  background: #ff4b66;
}

.console-top span:nth-child(2) {
  background: #ffd166;
}

.console-top span:nth-child(3) {
  background: #37d36f;
}

.console-top b {
  margin-left: auto;
  color: var(--muted);
  font-size: 13px;
}

.console-body {
  position: relative;
  min-height: 536px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 45%, rgba(168, 85, 247, 0.24), transparent 30%),
    radial-gradient(circle at 68% 58%, rgba(69, 216, 255, 0.13), transparent 26%);
}

.shield-core {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 168px;
  height: 168px;
  place-items: center;
  border-radius: 50%;
  background: rgba(7, 4, 17, 0.78);
  box-shadow:
    0 0 0 1px rgba(168, 85, 247, 0.18),
    0 0 60px rgba(168, 85, 247, 0.36),
    inset 0 0 34px rgba(69, 216, 255, 0.06);
  transform: translate(-50%, -50%);
  animation: float 7s ease-in-out infinite;
}

.shield-core svg {
  width: 54px;
  height: 54px;
  fill: none;
  stroke: #e4b6ff;
  stroke-linejoin: round;
  stroke-width: 1.8;
  filter: drop-shadow(0 0 18px rgba(168, 85, 247, 0.56));
}

.orbit {
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, var(--cyan), var(--purple), transparent 70%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 5px));
  animation: spin 7s linear infinite;
}

.orbit-b {
  inset: -27px;
  opacity: 0.45;
  animation-duration: 12s;
  animation-direction: reverse;
}

.signal-lines {
  position: absolute;
  inset: 0;
}

.signal-lines i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 310px;
  height: 1px;
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(69, 216, 255, 0.0), rgba(69, 216, 255, 0.46), transparent);
  opacity: 0.58;
}

.signal-lines i:nth-child(1) {
  transform: rotate(16deg);
}

.signal-lines i:nth-child(2) {
  transform: rotate(130deg);
}

.signal-lines i:nth-child(3) {
  transform: rotate(218deg);
}

.signal-lines i:nth-child(4) {
  transform: rotate(305deg);
}

.route-card {
  position: absolute;
  min-width: 150px;
  border: 1px solid rgba(69, 216, 255, 0.22);
  border-radius: 18px;
  padding: 14px;
  background: rgba(7, 4, 17, 0.62);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.32);
}

.route-card small {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
}

.route-card b {
  display: block;
  font-size: 14px;
}

.route-card em {
  display: block;
  margin-top: 6px;
  color: var(--cyan);
  font-size: 12px;
  font-style: normal;
}

.route-fi {
  top: 92px;
  left: 34px;
}

.route-de {
  top: 120px;
  right: 34px;
}

.route-ru {
  right: 54px;
  bottom: 118px;
}

.console-status {
  position: absolute;
  right: 28px;
  bottom: 28px;
  left: 28px;
  display: flex;
  gap: 13px;
  align-items: center;
  border: 1px solid rgba(168, 85, 247, 0.26);
  border-radius: 22px;
  padding: 16px;
  background: rgba(10, 6, 24, 0.72);
}

.status-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 24px rgba(90, 240, 185, 0.75);
}

.console-status b,
.console-status small {
  display: block;
}

.console-status small {
  margin-top: 4px;
  color: var(--muted);
}

.section-heading,
.tariff-intro {
  max-width: 860px;
  margin-bottom: 34px;
}

.flow-section {
  position: relative;
}

.flow-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.flow-card {
  --rx: 0deg;
  --ry: 0deg;
  min-height: 330px;
  border-radius: var(--radius-xl);
  padding: 24px;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition:
    transform 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease;
}

.flow-card:hover,
.plan-card:hover,
.dash-card:hover,
.profile-card:hover {
  border-color: var(--line-strong);
  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.38),
    0 0 48px rgba(124, 60, 255, 0.16);
}

.flow-card span,
.steps-dot {
  display: inline-grid;
  width: 48px;
  height: 48px;
  place-items: center;
  margin-bottom: 48px;
  border: 1px solid rgba(69, 216, 255, 0.38);
  border-radius: 999px;
  color: var(--green);
  font-weight: 950;
  box-shadow: 0 0 26px rgba(69, 216, 255, 0.16);
}

.flow-card p {
  min-height: 120px;
  color: var(--muted);
  line-height: 1.55;
}

.flow-card small {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 9px 12px;
  border: 1px solid rgba(69, 216, 255, 0.18);
  background: rgba(69, 216, 255, 0.055);
  color: #c9f5ff;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.35;
}

.route-lab {
  position: relative;
}

.route-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.route-map {
  --rx: 0deg;
  --ry: 0deg;
  min-height: 320px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 22px;
  background:
    radial-gradient(circle at 50% 0%, rgba(69, 216, 255, 0.10), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.014)),
    var(--panel);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.055);
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
  backdrop-filter: blur(20px);
}

.route-map:hover {
  border-color: var(--line-strong);
  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.38),
    0 0 48px rgba(69, 216, 255, 0.13);
}

.route-map-head {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 26px;
}

.route-map-head span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(69, 216, 255, 0.32);
  border-radius: 50%;
  color: var(--green);
  font-weight: 950;
}

.route-map-head h3 {
  margin: 0;
}

.map-chain {
  display: grid;
  gap: 10px;
  margin-bottom: 22px;
}

.map-chain i {
  display: block;
  width: 2px;
  height: 24px;
  margin-left: 22px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--cyan), var(--purple));
  box-shadow: 0 0 18px rgba(69, 216, 255, 0.28);
}

.map-node {
  display: inline-flex;
  width: fit-content;
  min-height: 44px;
  align-items: center;
  border: 1px solid rgba(168, 85, 247, 0.30);
  border-radius: 999px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.035);
  font-size: 14px;
}

.user-node {
  border-color: rgba(90, 240, 185, 0.30);
  color: var(--green);
}

.route-map p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.cascade-map {
  grid-column: span 2;
}

.cascade-map .map-chain {
  grid-template-columns: repeat(7, auto);
  align-items: center;
  gap: 8px;
}

.cascade-map .map-chain i {
  width: 30px;
  height: 2px;
  margin: 0;
}

.route-mini-stack {
  display: grid;
  gap: 12px;
  align-content: center;
  min-height: 280px;
}

.route-mini-stack span {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(168, 85, 247, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  font-weight: 950;
}

.route-mini-stack i {
  display: block;
  width: 2px;
  height: 26px;
  margin: 0 auto;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--cyan), var(--purple));
  box-shadow: 0 0 18px rgba(69, 216, 255, 0.28);
}

.signal-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(360px, 0.75fr);
  gap: 32px;
  align-items: center;
  overflow: hidden;
  border-radius: var(--radius-xl);
  padding: 36px;
}

.signal-orbs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.orb-card,
.social-orb {
  display: grid;
  place-items: center;
  align-content: center;
  border: 1px solid rgba(168, 85, 247, 0.30);
  border-radius: 28px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.025);
  text-align: center;
  transition:
    transform 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease;
}

.orb-card {
  min-height: 260px;
}

.orb-card span,
.social-orb span {
  display: grid;
  width: 132px;
  height: 132px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(168, 85, 247, 0.58);
  border-radius: 50%;
  background: #080411;
  box-shadow: 0 0 38px rgba(168, 85, 247, 0.18);
  transition:
    transform 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease;
}

.orb-card img,
.social-orb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.orb-card b,
.social-orb b {
  margin-top: 16px;
  font-size: 23px;
}

.orb-card small,
.social-orb small {
  margin-top: 6px;
  color: var(--muted);
}

.orb-card:hover,
.social-orb:hover,
.social-orb:focus-visible {
  transform: translateY(-6px);
  border-color: rgba(69, 216, 255, 0.66);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.34);
}

.orb-card:hover span,
.social-orb:hover span,
.social-orb:focus-visible span {
  transform: scale(1.04);
  border-color: rgba(69, 216, 255, 0.92);
  box-shadow:
    0 0 0 8px rgba(69, 216, 255, 0.08),
    0 0 50px rgba(240, 44, 255, 0.22);
}

.tariff-section {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.2fr);
  gap: 34px;
  align-items: start;
}

.period-strip {
  margin: 28px 0 18px;
}

.period {
  border-radius: 999px;
  padding: 0 15px;
  color: #d9d4ef;
}

.period.is-active {
  border-color: rgba(69, 216, 255, 0.62);
  background: linear-gradient(135deg, rgba(69, 216, 255, 0.20), rgba(168, 85, 247, 0.28));
  color: #fff;
}

.promo-box {
  border: 1px solid rgba(168, 85, 247, 0.24);
  border-radius: var(--radius-lg);
  padding: 18px;
  background: rgba(255, 255, 255, 0.025);
}

.promo-box label {
  display: block;
  margin-bottom: 10px;
  font-weight: 950;
}

.promo-box div {
  display: flex;
  gap: 8px;
}

.promo-box input {
  width: 100%;
  min-height: 50px;
  border: 1px solid rgba(168, 85, 247, 0.30);
  border-radius: 16px;
  padding: 0 14px;
  background: rgba(7, 4, 17, 0.72);
  color: #fff;
  outline: none;
}

.promo-box input:focus {
  border-color: rgba(69, 216, 255, 0.70);
  box-shadow: 0 0 0 4px rgba(69, 216, 255, 0.10);
}

.promo-box button {
  min-height: 50px;
  border: 0;
  border-radius: 16px;
  padding: 0 16px;
  background: linear-gradient(135deg, var(--cyan), var(--violet));
  color: #fff;
  font-weight: 950;
}

.promo-box p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.pricing-area {
  display: grid;
  gap: 18px;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.plan-card {
  --rx: 0deg;
  --ry: 0deg;
  position: relative;
  min-height: 470px;
  overflow: hidden;
  border-radius: var(--radius-xl);
  padding: 24px;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition:
    transform 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease;
}

.plan-card::before {
  position: absolute;
  inset: -90px -90px auto auto;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.24), transparent 62%);
  content: "";
}

.plan-featured {
  border-color: rgba(69, 216, 255, 0.62);
  background:
    radial-gradient(circle at 50% -10%, rgba(69, 216, 255, 0.20), transparent 44%),
    linear-gradient(180deg, rgba(31, 28, 72, 0.84), rgba(15, 12, 34, 0.88));
}

.plan-card h3,
.price,
.plan-card ul,
.plan-card a,
.plan-kicker {
  position: relative;
  z-index: 1;
}

.plan-kicker,
.checkout-kicker {
  color: #9af2ff;
}

.price {
  margin-bottom: 24px;
  font-size: 40px;
  font-weight: 950;
  letter-spacing: -0.06em;
}

.price small {
  color: var(--muted);
  font-size: 16px;
  letter-spacing: 0;
}

.plan-card ul {
  display: grid;
  gap: 12px;
  margin: 0 0 28px;
  padding: 0;
  color: var(--muted);
  line-height: 1.45;
  list-style: none;
}

.plan-card li {
  display: flex;
  gap: 10px;
}

.plan-card li::before {
  color: var(--green);
  content: "•";
}

.plan-card a {
  position: absolute;
  right: 24px;
  bottom: 24px;
  left: 24px;
  min-height: 52px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--purple), var(--violet));
  color: #fff;
  font-weight: 950;
  text-align: center;
  display: grid;
  place-items: center;
}

.plan-card.is-selected {
  outline: 2px solid rgba(69, 216, 255, 0.70);
  outline-offset: 4px;
}

.checkout-panel {
  display: grid;
  gap: 18px;
  border-radius: var(--radius-xl);
  padding: 24px;
}

.checkout-panel h3 {
  margin-bottom: 8px;
}

.checkout-panel p {
  color: var(--muted);
  line-height: 1.5;
}

.checkout-panel dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.checkout-panel dl div {
  min-height: 92px;
  border: 1px solid rgba(168, 85, 247, 0.22);
  border-radius: 18px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.025);
}

.checkout-panel dt {
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.checkout-panel dd {
  margin: 0;
  font-size: 18px;
  font-weight: 950;
}

.checkout-actions button,
.checkout-links a,
.checkout-links button {
  min-height: 50px;
}

.checkout-actions button:disabled {
  cursor: wait;
  opacity: 0.62;
}

.family-action {
  background: linear-gradient(135deg, var(--amber), var(--pink)) !important;
}

.checkout-links button {
  border: 1px solid rgba(168, 85, 247, 0.42);
}

.checkout-status {
  min-height: 24px;
  margin: 0;
  font-weight: 800;
}

.checkout-status[data-tone="ok"] {
  color: var(--green);
}

.checkout-status[data-tone="warn"],
.checkout-status[data-tone="info"] {
  color: var(--amber);
}

.checkout-status[data-tone="error"] {
  color: var(--danger);
}

.cabinet-layout {
  display: grid;
  grid-template-columns: 330px 1fr;
  gap: 18px;
}

.profile-card,
.dash-card {
  border-radius: var(--radius-xl);
  padding: 22px;
}

.profile-card {
  --rx: 0deg;
  --ry: 0deg;
  align-self: start;
  position: sticky;
  top: 112px;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.profile-head {
  margin-bottom: 22px;
}

.profile-avatar {
  color: var(--green);
  font-weight: 950;
  text-transform: uppercase;
}

.profile-head b,
.profile-head small {
  display: block;
}

.profile-head small {
  margin-top: 5px;
  color: var(--muted);
}

.status-pill {
  display: inline-flex;
  margin-bottom: 18px;
  padding: 10px 13px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 950;
}

.status-pill.good {
  border: 1px solid rgba(90, 240, 185, 0.24);
  background: rgba(90, 240, 185, 0.10);
  color: var(--green);
}

.wide-button {
  width: 100%;
  margin-top: 10px;
}

.muted-button {
  border: 1px solid rgba(168, 85, 247, 0.30);
  background: rgba(255, 255, 255, 0.035);
  box-shadow: none;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.dash-card {
  min-height: 170px;
  transition:
    border-color 220ms ease,
    box-shadow 220ms ease,
    transform 220ms ease;
}

.dash-card:hover {
  transform: translateY(-4px);
}

.dash-card span,
.dash-card small {
  display: block;
  color: var(--muted);
}

.dash-card span {
  margin-bottom: 18px;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dash-card b {
  display: block;
  margin-bottom: 8px;
  font-size: 26px;
  letter-spacing: -0.05em;
}

.meter {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan), var(--violet), var(--pink));
}

.device-list,
.connect-card {
  grid-column: span 2;
}

.device-list button,
.connect-card button,
.connect-card a {
  display: flex;
  width: 100%;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  border: 1px solid rgba(168, 85, 247, 0.28);
  border-radius: 16px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.035);
  font-weight: 850;
}

.connect-card button {
  border: 0;
  background: linear-gradient(135deg, var(--purple), var(--violet));
}

.connect-card.is-hot {
  animation: hot-pulse 1100ms ease-in-out 2;
}

.site-footer {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) repeat(3, minmax(0, 1fr));
  gap: 24px;
  overflow: hidden;
  margin: 40px 0 32px;
  border-radius: var(--radius-xl);
  padding: 30px;
}

.site-footer::after {
  position: absolute;
  right: -110px;
  bottom: -130px;
  width: 330px;
  height: 330px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.18), transparent 62%);
  content: "";
}

.footer-brand,
.footer-column {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  align-content: start;
}

.footer-brand b {
  font-size: 19px;
}

.footer-brand p,
.footer-note p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.footer-column h3 {
  margin: 0 0 8px;
  font-size: 16px;
}

.footer-column a,
.footer-column button:not(.footer-action),
.footer-bottom a {
  width: fit-content;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--muted);
  font-weight: 850;
}

.footer-column a:hover,
.footer-column button:not(.footer-action):hover,
.footer-bottom a:hover {
  color: #fff;
}

.footer-column .footer-action {
  position: relative;
  display: inline-flex;
  width: fit-content;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(194, 78, 255, 0.72);
  border-radius: 999px;
  padding: 0 20px;
  background:
    radial-gradient(circle at 50% 0%, rgba(168, 85, 247, 0.18), transparent 62%),
    rgba(255, 255, 255, 0.025);
  color: #fff;
  font-weight: 950;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.footer-column .footer-action:hover,
.footer-column .footer-action:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(69, 216, 255, 0.72);
  box-shadow:
    0 0 0 1px rgba(69, 216, 255, 0.10),
    0 0 34px rgba(168, 85, 247, 0.24);
}

.footer-bottom {
  position: relative;
  z-index: 1;
  display: flex;
  grid-column: 1 / -1;
  justify-content: space-between;
  gap: 16px;
  margin-top: 10px;
  padding-top: 20px;
  border-top: 1px solid rgba(168, 85, 247, 0.18);
  color: var(--muted);
}

.footer-bottom p {
  margin: 0;
}

.footer-bottom div {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 22px;
  background:
    radial-gradient(circle at 50% 18%, rgba(168, 85, 247, 0.26), transparent 38%),
    rgba(2, 2, 8, 0.76);
  backdrop-filter: blur(18px);
}

.modal-card {
  position: relative;
  width: min(680px, 100%);
  max-height: min(760px, calc(100vh - 44px));
  overflow: auto;
  border-radius: 30px;
  padding: 30px;
}

.modal-card h2 {
  margin-bottom: 12px;
  font-size: clamp(38px, 5vw, 62px);
}

.modal-lead {
  margin-bottom: 24px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.55;
}

.modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(168, 85, 247, 0.42);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.035);
}

.modal-close::before,
.modal-close::after {
  position: absolute;
  top: 20px;
  left: 11px;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: #fff;
  content: "";
}

.modal-close::before {
  transform: rotate(45deg);
}

.modal-close::after {
  transform: rotate(-45deg);
}

.register-modal-form,
.login-modal-form {
  display: grid;
  gap: 14px;
}

.register-modal-form label,
.login-modal-form label {
  display: grid;
  gap: 8px;
  font-weight: 900;
}

.register-modal-form input,
.login-modal-form input {
  width: 100%;
  min-height: 52px;
  border: 1px solid rgba(168, 85, 247, 0.34);
  border-radius: 16px;
  padding: 0 15px;
  background: rgba(7, 4, 17, 0.78);
  color: #fff;
  outline: none;
}

.register-modal-form input:focus,
.login-modal-form input:focus {
  border-color: rgba(69, 216, 255, 0.78);
  box-shadow: 0 0 0 4px rgba(69, 216, 255, 0.10);
}

.code-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

.code-row button,
.modal-submit {
  min-height: 52px;
  border: 0;
  border-radius: 16px;
  padding: 0 18px;
  background: linear-gradient(135deg, var(--cyan), var(--violet), var(--pink));
  color: #fff;
  font-weight: 950;
}

.code-row button:disabled,
.modal-submit:disabled {
  cursor: wait;
  opacity: 0.62;
}

.modal-status {
  min-height: 22px;
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.modal-status[data-tone="ok"] {
  color: var(--green);
}

.modal-status[data-tone="error"] {
  color: var(--danger);
}

.modal-extra {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

.modal-extra a,
.modal-extra button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(168, 85, 247, 0.34);
  border-radius: 999px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.025);
  color: #9af2ff;
  font-weight: 850;
}

.support-modal {
  width: min(760px, 100%);
  text-align: center;
}

.support-modal h2 {
  margin-bottom: 28px;
  padding: 0 48px;
}

.social-orbs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.social-orb {
  min-height: 260px;
}

.cookie-banner {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 90;
  display: grid;
  width: min(680px, calc(100% - 36px));
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  border-radius: 24px;
  padding: 18px;
}

.cookie-banner p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.cookie-actions button,
.cookie-actions a {
  min-height: 44px;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 130;
  transform: translateX(-50%);
  max-width: min(560px, calc(100% - 32px));
  overflow: hidden;
  border: 1px solid rgba(189, 99, 255, 0.34);
  border-radius: 999px;
  padding: 14px 20px;
  background:
    radial-gradient(circle at 22% 0%, rgba(189, 99, 255, 0.20), transparent 58%),
    radial-gradient(circle at 100% 50%, rgba(82, 116, 255, 0.12), transparent 48%),
    rgba(7, 4, 17, 0.92);
  color: #fff;
  font-size: 14px;
  font-weight: 850;
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(255, 255, 255, 0.025) inset,
    0 12px 34px rgba(139, 92, 255, 0.14);
  backdrop-filter: blur(18px);
}

.toast::after {
  content: "";
  position: absolute;
  right: 22px;
  bottom: 6px;
  left: 22px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #bd63ff 0%, #8b5cf6 52%, #d946ef 100%);
  box-shadow: 0 0 16px rgba(189, 99, 255, 0.32);
}

[hidden] {
  display: none !important;
}

[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(10px);
  transition:
    opacity 700ms ease,
    transform 700ms cubic-bezier(.2,.8,.2,1),
    filter 700ms ease;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.hero-console[data-reveal] {
  opacity: 1;
  filter: none;
  transform: perspective(1100px) translateY(26px) rotateX(var(--rx)) rotateY(var(--ry));
}

.hero-console[data-reveal].is-visible {
  transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry));
}

.flow-card[data-reveal],
.route-map[data-reveal],
.plan-card[data-reveal],
.profile-card[data-reveal] {
  transform: perspective(900px) translateY(26px) rotateX(var(--rx)) rotateY(var(--ry));
}

.flow-card[data-reveal].is-visible,
.route-map[data-reveal].is-visible,
.plan-card[data-reveal].is-visible,
.profile-card[data-reveal].is-visible {
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* CDNRELAY_INSTALL_UI_FIX27: no dropdown collision, shorter step cards, centered app icons. */
.cabinet-layout,
.dashboard-grid,
.connect-card-premium,
.install-panel-premium {
  overflow: visible !important;
}

.connect-card-premium {
  isolation: isolate !important;
}

.install-panel-premium .install-panel-head {
  position: relative !important;
  z-index: 80 !important;
  padding: 10px 12px !important;
}

.install-client-card {
  position: relative !important;
  z-index: 20 !important;
}

.install-os-picker-row {
  width: 202px !important;
  max-width: 202px !important;
}

.install-selected-device[data-install-os-select],
.install-selected-device[data-install-os-select].is-open {
  width: 202px !important;
  max-width: 202px !important;
  z-index: 220 !important;
}

.install-selected-device.is-open .install-os-menu,
.install-selected-device[data-install-os-select].is-open .install-os-menu {
  top: auto !important;
  bottom: calc(100% + 7px) !important;
  right: 0 !important;
  left: auto !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 5px !important;
  width: 300px !important;
  min-width: 300px !important;
  max-width: 300px !important;
  max-height: none !important;
  overflow: visible !important;
  overflow-y: visible !important;
  padding: 7px !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(15, 23, 39, 0.99), rgba(7, 11, 22, 0.99)) !important;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  z-index: 260 !important;
}

.install-selected-device.is-open .install-os-menu::-webkit-scrollbar,
.install-selected-device[data-install-os-select].is-open .install-os-menu::-webkit-scrollbar {
  display: none !important;
}

.install-os-option {
  grid-template-columns: 24px minmax(0, 1fr) !important;
  gap: 7px !important;
  min-height: 30px !important;
  padding: 5px 7px !important;
}

.install-os-option .install-pill-icon {
  width: 23px !important;
  height: 23px !important;
  min-width: 23px !important;
}

.install-os-option span:last-child {
  font-size: 10.5px !important;
  white-space: nowrap !important;
}

.install-panel-premium .install-steps {
  gap: 12px !important;
}

.install-panel-premium .install-step {
  grid-template-rows: minmax(46px, auto) 60px !important;
  min-height: 126px !important;
  height: 126px !important;
  padding: 12px !important;
  gap: 10px !important;
}

.install-panel-premium .install-step > div:first-of-type {
  align-content: start !important;
}

.install-panel-premium .install-step b {
  font-size: 15px !important;
  line-height: 1.1 !important;
}

.install-panel-premium .install-step small {
  font-size: 12px !important;
  line-height: 1.25 !important;
}

.install-download-actions,
.install-import-actions {
  height: 60px !important;
  min-height: 60px !important;
  max-height: 60px !important;
}

.install-download-actions [data-download-link],
.install-panel-premium .install-step .install-import-actions a[data-import-link],
.install-import-actions a[data-import-link] {
  height: 60px !important;
  min-height: 60px !important;
  max-height: 60px !important;
  padding: 0 16px !important;
}

.install-download-actions [data-download-link]::before,
.install-panel-premium .install-step .install-import-actions a[data-import-link]::before,
.install-import-actions a[data-import-link]::before {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  font-size: 13px !important;
}

.install-client-card .install-pill-app .install-app-icon,
.install-client-card .install-pill-support .install-app-icon,
.supported-client-card .install-app-icon {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 9px !important;
  background: rgba(8, 10, 24, 0.72) !important;
}

.install-client-card .install-pill-app .install-app-icon img,
.install-client-card .install-pill-support .install-app-icon img,
.supported-client-card .install-app-icon img {
  width: 112% !important;
  height: 112% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

.install-app-icon img[src*="incy.png"] {
  transform: scale(1.13) translateY(0) !important;
}

.install-app-icon img[src*="happ.png"] {
  transform: scale(1.08) translateY(0) !important;
}

.install-app-icon img[src*="v2raytun.png"],
.install-app-icon img[src*="hiddify.png"],
.install-app-icon img[src*="shadowrocket.png"] {
  transform: scale(1.10) translateY(0) !important;
}

@media (max-width: 760px) {
  .install-selected-device.is-open .install-os-menu,
  .install-selected-device[data-install-os-select].is-open .install-os-menu {
    bottom: auto !important;
    top: calc(100% + 6px) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .install-panel-premium .install-step {
    height: auto !important;
    min-height: 126px !important;
  }
}

@keyframes slow-turn {
  to {
    transform: rotate(360deg);
  }
}

@keyframes float {
  0%,
  100% {
    transform: translate(-50%, -50%) translateY(0);
  }

  50% {
    transform: translate(-50%, -50%) translateY(-12px);
  }
}

@keyframes panel-sweep {
  0%,
  42% {
    transform: translateX(-120%);
  }

  68%,
  100% {
    transform: translateX(120%);
  }
}

@keyframes hot-pulse {
  0%,
  100% {
    box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.055);
  }

  50% {
    border-color: rgba(69, 216, 255, 0.82);
    box-shadow:
      0 0 0 7px rgba(69, 216, 255, 0.10),
      0 0 56px rgba(168, 85, 247, 0.32);
  }
}

@keyframes header-comet {
  0%,
  100% {
    transform: translateX(0);
    opacity: 0.38;
  }

  50% {
    transform: translateX(1280px);
    opacity: 0.82;
  }
}

@keyframes shield-breathe {
  0%,
  100% {
    box-shadow:
      0 0 0 0 rgba(168, 85, 247, 0.10),
      0 0 28px rgba(168, 85, 247, 0.18);
  }

  50% {
    box-shadow:
      0 0 0 7px rgba(168, 85, 247, 0.06),
      0 0 36px rgba(69, 216, 255, 0.22);
  }
}

@media (max-width: 1120px) {
  .hero-grid,
  .tariff-section,
  .signal-panel,
  .cabinet-layout {
    grid-template-columns: 1fr;
  }

  .flow-rail,
  .route-grid,
  .pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-console {
    min-height: 520px;
  }

  .profile-card {
    position: static;
  }
}

@media (max-width: 820px) {
  .site-shell {
    width: min(100% - 24px, 1180px);
  }

  .site-header {
    grid-template-columns: 1fr auto;
    border-radius: 24px;
  }

  .menu-button {
    display: inline-grid;
    grid-template-columns: 18px auto;
    gap: 8px;
    align-items: center;
    min-height: 42px;
    border: 1px solid rgba(168, 85, 247, 0.32);
    border-radius: 999px;
    padding: 0 14px;
    background: rgba(255, 255, 255, 0.035);
    font-weight: 950;
  }

  .menu-button span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: #fff;
  }

  .menu-button span + span {
    margin-top: 3px;
  }

  .main-nav,
  .header-actions {
    display: none;
  }

  .site-header.is-open .main-nav,
  .site-header.is-open .header-actions {
    display: grid;
    grid-column: 1 / -1;
    justify-self: stretch;
  }

  .site-header.is-open .main-nav {
    grid-template-columns: 1fr;
    border-radius: 18px;
  }

  .site-header.is-open .header-actions {
    grid-template-columns: 1fr;
  }

  .primary-link,
  .support-link {
    width: 100%;
  }

  .nova-hero {
    min-height: 0;
    padding: 80px 0 44px;
  }

  h1 {
    font-size: clamp(50px, 15vw, 76px);
  }

  h2 {
    font-size: clamp(38px, 12vw, 58px);
  }

  .hero-actions,
  .promo-box div,
  .checkout-actions,
  .checkout-links,
  .cookie-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .cta,
  .promo-box button,
  .checkout-actions button,
  .checkout-links a,
  .checkout-links button {
    width: 100%;
  }

  .flow-rail,
  .route-grid,
  .pricing-grid,
  .dashboard-grid,
  .signal-orbs,
  .social-orbs {
    grid-template-columns: 1fr;
  }

  .cascade-map {
    grid-column: span 1;
  }

  .cascade-map .map-chain {
    grid-template-columns: 1fr;
  }

  .cascade-map .map-chain i {
    width: 2px;
    height: 24px;
    margin-left: 22px;
  }

  .device-list,
  .connect-card {
    grid-column: span 1;
  }

  .checkout-panel dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer {
    grid-template-columns: 1fr 1fr;
  }

  .footer-bottom {
    flex-direction: column;
  }

  .cookie-banner {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    grid-template-columns: auto 1fr;
    border-radius: 24px;
    transform: none;
  }

  .cookie-actions {
    grid-column: 1 / -1;
  }

  .cookie-actions button {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .section-pad {
    padding: 64px 0;
  }

  .hero-console {
    min-height: 430px;
    border-radius: 24px;
  }

  .shield-core {
    width: 132px;
    height: 132px;
  }

  .route-card {
    min-width: 128px;
    padding: 12px;
  }

  .route-fi {
    top: 78px;
    left: 16px;
  }

  .route-de {
    top: 112px;
    right: 14px;
  }

  .route-ru {
    right: 18px;
    bottom: 104px;
  }

  .console-status {
    right: 14px;
    bottom: 14px;
    left: 14px;
  }

  .checkout-panel dl,
  .site-footer {
    grid-template-columns: 1fr;
  }

  .code-row {
    grid-template-columns: 1fr;
  }
}

/* Access-style polish: calmer than the concept version, closer to production. */
:root {
  --access-panel: rgba(17, 18, 38, 0.78);
  --access-panel-soft: rgba(14, 14, 30, 0.68);
  --access-border: rgba(139, 92, 255, 0.30);
  --access-border-strong: rgba(56, 216, 255, 0.52);
  --access-text-soft: #c7c2dc;
}

body {
  background:
    radial-gradient(circle at 18% 0%, rgba(139, 92, 255, 0.18), transparent 34rem),
    radial-gradient(circle at 92% 10%, rgba(56, 216, 255, 0.09), transparent 28rem),
    linear-gradient(180deg, #090615 0%, #05040b 62%, #05040a 100%);
}

body::before {
  opacity: 0.48;
  background-size: 56px 56px;
}

body::after {
  opacity: 0.52;
}

.site-shell {
  width: min(1120px, calc(100% - 36px));
}

.site-header {
  grid-template-columns: auto 1fr;
  top: 12px;
  gap: 16px;
  margin-top: 12px;
  border-color: var(--access-border);
  border-radius: 28px;
  padding: 10px 12px;
  background: rgba(8, 7, 20, 0.78);
  box-shadow:
    0 18px 54px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.site-header::before {
  background:
    radial-gradient(circle at 8% 50%, rgba(139, 92, 255, 0.16), transparent 26%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035), transparent 36%, rgba(56, 216, 255, 0.04));
}

.site-header::after {
  display: none;
}

.brand {
  min-width: 190px;
}

.brand-mark {
  width: 48px;
  height: 48px;
  border-color: rgba(139, 92, 255, 0.42);
  background: #05020d;
  box-shadow:
    0 0 0 7px rgba(139, 92, 255, 0.10),
    0 0 18px rgba(139, 92, 255, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}

.brand b {
  font-size: 18px;
  letter-spacing: -0.03em;
}

.brand b span,
.footer-brand b span {
  color: #b86cff;
  text-shadow: 0 0 22px rgba(184, 108, 255, 0.34);
}

.main-nav {
  border-color: rgba(139, 92, 255, 0.18);
  background: rgba(255, 255, 255, 0.025);
}

.main-nav a,
.main-nav button {
  min-height: 36px;
  border: 0;
  background: transparent;
  color: #d9d3ec;
  font: inherit;
  cursor: pointer;
}

.main-nav a:hover,
.main-nav a:focus-visible,
.main-nav button:hover,
.main-nav button:focus-visible {
  background: rgba(139, 92, 255, 0.10);
}

.support-link,
.primary-link,
.cta-main,
.period,
.wide-button,
.plan-card a,
.checkout-actions button,
.checkout-links a,
.checkout-links button,
.cookie-actions a,
.cookie-actions button,
.promo-box button,
.modal-submit,
.code-row button,
.modal-extra a,
.modal-extra button,
.footer-column .footer-action {
  border: 1px solid rgba(139, 92, 255, 0.38);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.035);
  color: #f7f3ff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 10px 24px rgba(0, 0, 0, 0.18);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.primary-link,
.cta-main,
.wide-button,
.checkout-actions button,
.cookie-actions button,
.modal-submit,
.code-row button,
.promo-box button {
  background: rgba(18, 22, 48, 0.82);
}

.support-link::before,
.primary-link::before,
.footer-action::before {
  display: none;
}

.support-link:hover,
.support-link:focus-visible,
.primary-link:hover,
.primary-link:focus-visible,
.cta-main:hover,
.cta-main:focus-visible,
.period:hover,
.period:focus-visible,
.wide-button:hover,
.wide-button:focus-visible,
.plan-card a:hover,
.plan-card a:focus-visible,
.checkout-actions button:hover,
.checkout-actions button:focus-visible,
.checkout-links a:hover,
.checkout-links a:focus-visible,
.checkout-links button:hover,
.checkout-links button:focus-visible,
.cookie-actions a:hover,
.cookie-actions a:focus-visible,
.cookie-actions button:hover,
.cookie-actions button:focus-visible,
.promo-box button:hover,
.promo-box button:focus-visible,
.modal-submit:hover,
.modal-submit:focus-visible,
.code-row button:hover,
.code-row button:focus-visible,
.modal-extra a:hover,
.modal-extra a:focus-visible,
.modal-extra button:hover,
.modal-extra button:focus-visible,
.footer-column .footer-action:hover,
.footer-column .footer-action:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(56, 216, 255, 0.68);
  background: rgba(18, 22, 48, 0.92);
  box-shadow:
    0 0 0 1px rgba(56, 216, 255, 0.08),
    0 0 18px rgba(56, 216, 255, 0.14),
    0 0 30px rgba(139, 92, 255, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.cta-main {
  min-height: 56px;
  padding: 0 22px;
  font-size: 15px;
}

.cta-main span {
  color: #38d8ff;
  margin-left: 9px;
}

.cta:hover,
.cta:focus-visible,
.plan-card a:hover,
.wide-button:hover,
.checkout-actions button:hover {
  transform: translateY(-1px);
}

.section-pad {
  padding: 82px 0;
}

.nova-hero {
  min-height: 0;
  padding: 116px 0 86px;
}

.nova-hero::before {
  opacity: 0.52;
  filter: blur(34px);
}

.hero-grid {
  grid-template-columns: minmax(0, 1.03fr) minmax(360px, 0.82fr);
  gap: 48px;
}

.hero-copy h1 {
  max-width: 720px;
  margin-bottom: 24px;
  font-size: clamp(56px, 7.6vw, 108px);
  letter-spacing: -0.085em;
}

.lead,
.muted {
  color: var(--access-text-soft);
  font-size: clamp(17px, 1.75vw, 20px);
  line-height: 1.68;
}

.lead {
  max-width: 675px;
  margin-bottom: 30px;
}

.service-tags {
  display: flex;
  max-width: 680px;
  flex-wrap: wrap;
  gap: 10px;
  margin: -8px 0 30px;
}

.service-tags > span {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(139, 92, 255, 0.28);
  border-radius: 999px;
  padding: 5px 13px 5px 6px;
  background:
    radial-gradient(circle at 15% 0%, rgba(184, 108, 255, 0.20), transparent 54%),
    rgba(255, 255, 255, 0.026);
  color: #f4edff;
  font-size: 13px;
  font-weight: 950;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 18px rgba(139, 92, 255, 0.08);
}

.service-tags > span:nth-child(2n) {
  border-color: rgba(56, 216, 255, 0.28);
  color: #8ef7ff;
}

.service-tags i {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.15), transparent 36%),
    linear-gradient(135deg, rgba(139, 92, 255, 0.88), rgba(56, 216, 255, 0.56));
  color: #fff;
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  letter-spacing: -0.04em;
  box-shadow:
    0 0 18px rgba(139, 92, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.service-tags svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.service-tags b {
  font-size: 13px;
  font-weight: 950;
}

.tag-vk i {
  background: linear-gradient(135deg, #5a35ff, #30c7ff);
}

.tag-max i {
  background: linear-gradient(135deg, #1fddff, #7c3cff);
}

.tag-bank i {
  background: linear-gradient(135deg, #b86cff, #2f2447);
}

.tag-map i {
  background: linear-gradient(135deg, #27e0b2, #38d8ff);
}

.tag-car i {
  background: linear-gradient(135deg, #7c3cff, #f04cff);
}

.tag-android i {
  background: linear-gradient(135deg, #35f2b1, #7c3cff);
}

.hero-console,
.flow-card,
.signal-panel,
.plan-card,
.checkout-panel,
.profile-card,
.dash-card,
.modal-card,
.cookie-banner,
.site-footer {
  border-color: var(--access-border);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
    var(--access-panel);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.hero-console {
  min-height: 482px;
  border-radius: 26px;
}

.hero-console::before {
  opacity: 0.26;
}

.console-top {
  height: 50px;
  background: rgba(255, 255, 255, 0.025);
}

.console-top b {
  display: none;
}

.console-body {
  min-height: 432px;
  background:
    radial-gradient(circle at 50% 48%, rgba(139, 92, 255, 0.16), transparent 29%),
    radial-gradient(circle at 68% 58%, rgba(56, 216, 255, 0.07), transparent 24%);
}

.shield-core {
  width: 128px;
  height: 128px;
  box-shadow:
    0 0 0 1px rgba(139, 92, 255, 0.16),
    0 0 42px rgba(139, 92, 255, 0.28),
    inset 0 0 28px rgba(56, 216, 255, 0.05);
}

.signal-lines i {
  opacity: 0.32;
}

.route-card {
  border-color: rgba(56, 216, 255, 0.16);
  min-width: 132px;
  border-radius: 15px;
  padding: 12px;
  background: rgba(7, 4, 17, 0.54);
  box-shadow: none;
}

.route-card::after {
  position: absolute;
  inset: auto 14px -1px 14px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56, 216, 255, 0.54), transparent);
  content: "";
}

.route-card b {
  font-size: 13px;
}

.route-card strong {
  display: block;
  width: fit-content;
  margin-top: 10px;
  border: 1px solid rgba(56, 216, 255, 0.18);
  border-radius: 999px;
  padding: 6px 9px;
  background: rgba(2, 6, 23, 0.42);
  color: #8ef7ff;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: -0.02em;
}

.route-fi {
  top: 76px;
  left: 34px;
}

.route-de {
  top: 76px;
  right: 34px;
}

.route-ru {
  right: 34px;
  bottom: 132px;
}

.console-status {
  border-color: rgba(139, 92, 255, 0.22);
  right: 22px;
  bottom: 20px;
  left: 22px;
  border-radius: 17px;
  padding: 12px 14px;
  background: rgba(8, 7, 20, 0.72);
}

.console-status small {
  max-width: 390px;
  line-height: 1.45;
}

.cookie-banner {
  left: 50%;
  right: auto;
  bottom: 18px;
  width: min(620px, calc(100% - 32px));
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  border-radius: 999px;
  padding: 10px 10px 10px 12px;
  transform: translateX(-50%);
  background:
    radial-gradient(circle at 8% 50%, rgba(139, 92, 255, 0.18), transparent 31%),
    radial-gradient(circle at 94% 50%, rgba(56, 216, 255, 0.10), transparent 28%),
    #080714;
  box-shadow:
    0 18px 54px rgba(0, 0, 0, 0.40),
    0 0 0 1px rgba(139, 92, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: none;
  animation: cookie-rise 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.cookie-mark {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(139, 92, 255, 0.44);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.035);
  color: #b86cff;
  font-size: 14px;
  font-weight: 950;
  box-shadow:
    0 0 22px rgba(139, 92, 255, 0.22),
    inset 0 0 18px rgba(56, 216, 255, 0.06);
}

.cookie-banner b {
  display: block;
  color: #fff;
  font-size: 14px;
  letter-spacing: -0.02em;
}

.cookie-banner p {
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.35;
}

.cookie-actions {
  justify-content: flex-end;
}

.cookie-actions button {
  min-height: 40px;
  border-radius: 999px;
  padding: 0 18px;
}

@keyframes cookie-rise {
  from {
    opacity: 0;
    transform: translate(-50%, 18px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

.site-footer {
  width: min(560px, 100%);
  margin: 42px auto 24px;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 14px;
  border-radius: 26px;
  padding: 22px 24px;
  text-align: center;
}

.site-footer::after {
  right: 50%;
  bottom: -130px;
  transform: translateX(50%);
}

.footer-brand {
  justify-items: center;
  gap: 8px;
}

.footer-logo {
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  border: 1px solid rgba(139, 92, 255, 0.42);
  border-radius: 50%;
  background: #05020d;
  box-shadow:
    0 0 0 7px rgba(139, 92, 255, 0.10),
    0 0 24px rgba(139, 92, 255, 0.24),
    inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}

.footer-logo img {
  width: 78%;
  height: 78%;
  object-fit: contain;
}

.footer-brand b {
  font-size: 22px;
  letter-spacing: -0.04em;
}

.footer-offer {
  display: inline-flex;
  border: 1px solid rgba(139, 92, 255, 0.20);
  border-radius: 999px;
  padding: 5px;
  background: rgba(255, 255, 255, 0.024);
}

.footer-offer a {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0 20px;
  background:
    radial-gradient(circle at 50% 0%, rgba(139, 92, 255, 0.18), transparent 58%),
    rgba(255, 255, 255, 0.026);
  color: #f7f3ff;
  font-weight: 950;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    color 180ms ease;
}

.footer-offer a:hover,
.footer-offer a:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(56, 216, 255, 0.58);
  background: rgba(18, 22, 48, 0.88);
  color: #fff;
}

.footer-bottom {
  width: 100%;
  justify-content: center;
  border-top-color: rgba(139, 92, 255, 0.18);
  padding-top: 14px;
}

.footer-bottom p {
  color: #b86cff;
  font-weight: 950;
  text-shadow: 0 0 22px rgba(184, 108, 255, 0.28);
}

@media (max-width: 700px) {
  .cookie-banner {
    left: 12px;
    right: 12px;
    width: auto;
    grid-template-columns: auto 1fr;
    border-radius: 24px;
    transform: none;
    animation-name: cookie-rise-mobile;
  }

  .cookie-actions {
    grid-column: 1 / -1;
  }

  .cookie-actions button {
    width: 100%;
  }

  .site-footer {
    width: 100%;
    margin-top: 36px;
    padding: 24px 18px;
  }
}

@keyframes cookie-rise-mobile {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.tariff-section {
  grid-template-columns: minmax(0, 0.67fr) minmax(0, 1.2fr);
  gap: 30px;
}

.section-heading,
.tariff-intro {
  max-width: 820px;
}

.tariff-intro h1,
.tariff-intro h2,
.section-heading h2,
.sub-hero h1 {
  letter-spacing: -0.075em;
}

.promo-box {
  border-color: rgba(139, 92, 255, 0.24);
  background: rgba(255, 255, 255, 0.022);
}

.promo-box input,
.register-modal-form input,
.login-modal-form input {
  border-color: rgba(139, 92, 255, 0.26);
  background: rgba(7, 4, 17, 0.70);
}

.period.is-active {
  border-color: rgba(56, 216, 255, 0.52);
  background: rgba(18, 22, 48, 0.92);
}

.plan-card {
  min-height: 410px;
  border-radius: 24px;
  padding: 24px;
}

.plan-card::before {
  opacity: 0.44;
}

.plan-featured {
  border-color: rgba(56, 216, 255, 0.50);
  background:
    radial-gradient(circle at 50% -12%, rgba(56, 216, 255, 0.12), transparent 42%),
    linear-gradient(180deg, rgba(22, 24, 54, 0.84), rgba(17, 18, 38, 0.84));
}

.price {
  font-size: 36px;
}

.plan-card ul {
  color: var(--access-text-soft);
}

.plan-card a {
  min-height: 50px;
  border-radius: 16px;
  background: rgba(18, 22, 48, 0.82);
}

.checkout-panel,
.profile-card,
.dash-card {
  border-radius: 24px;
}

.checkout-panel dl div,
.dash-card,
.device-list button,
.connect-card button,
.connect-card a {
  border-color: rgba(139, 92, 255, 0.22);
  background: rgba(255, 255, 255, 0.024);
}

.connect-card button {
  border: 1px solid rgba(139, 92, 255, 0.38);
  background: rgba(18, 22, 48, 0.82);
}

.meter i {
  background: linear-gradient(90deg, #38d8ff, #8b5cff);
}

.status-pill.good {
  border-color: rgba(90, 240, 185, 0.20);
  background: rgba(90, 240, 185, 0.08);
}

.site-footer {
  border-radius: 26px;
  margin: 42px auto 24px;
  padding: 22px 24px;
}

.footer-brand p,
.footer-note p,
.checkout-panel p,
.modal-lead {
  color: var(--access-text-soft);
}

@media (max-width: 700px) {
  .site-footer {
    margin: 36px auto 24px;
    padding: 24px 18px;
  }
}

.modal-card {
  border-radius: 26px;
}

.modal-close {
  border-color: rgba(139, 92, 255, 0.34);
  background: rgba(255, 255, 255, 0.028);
}

.support-modal {
  width: min(720px, 100%);
}

.social-orb {
  min-height: 230px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.024);
}

.orb-card span,
.social-orb span {
  width: 118px;
  height: 118px;
}

.social-orb:hover,
.social-orb:focus-visible {
  transform: translateY(-3px);
}

.sub-hero {
  padding: 112px 0 34px;
}

.cabinet-layout {
  gap: 16px;
}

.dashboard-grid {
  gap: 12px;
}

.nova-hero {
  padding-bottom: 42px;
}

.tariff-section {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding-top: 44px;
}

.tariff-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(260px, 0.28fr);
  gap: 28px;
  align-items: end;
  max-width: none;
  margin-bottom: 0;
}

.tariff-intro h2 {
  margin-bottom: 0;
}

.tariff-intro .muted {
  margin: 0;
  font-size: 17px;
}

.payment-hub {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.82fr);
  gap: 16px;
  border: 1px solid var(--access-border);
  border-radius: 28px;
  padding: 16px;
  background:
    radial-gradient(circle at 0% 0%, rgba(139, 92, 255, 0.16), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.034), rgba(255, 255, 255, 0.012)),
    rgba(8, 7, 20, 0.72);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.payment-hub .checkout-panel {
  border: 0;
  border-radius: 20px;
  padding: 10px;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.payment-hub .checkout-panel h3 {
  font-size: 30px;
}

.payment-hub .checkout-panel p {
  max-width: 640px;
}

.payment-hub .checkout-panel dl {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.payment-hub .checkout-panel dl div {
  min-height: 84px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.022);
}

.payment-controls {
  display: grid;
  gap: 14px;
  align-content: start;
  border: 1px solid rgba(139, 92, 255, 0.18);
  border-radius: 22px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.018);
}

.payment-controls .period-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.payment-controls .period {
  min-height: 46px;
  width: 100%;
  border-radius: 14px;
  padding: 0 12px;
}

.payment-controls .promo-box {
  border-radius: 18px;
  padding: 16px;
}

.payment-controls .promo-box div {
  display: grid;
  grid-template-columns: 1fr auto;
}

.payment-controls .promo-box input,
.payment-controls .promo-box button {
  min-height: 46px;
}

.pricing-area {
  margin-top: 2px;
}

.pricing-grid {
  gap: 12px;
}

.tariff-section .plan-card {
  min-height: 330px;
  border-radius: 22px;
  padding: 22px;
}

.tariff-section .plan-card h3 {
  font-size: 24px;
}

.tariff-section .price {
  margin-bottom: 18px;
  font-size: 34px;
}

.tariff-section .plan-card ul {
  gap: 10px;
  margin-bottom: 70px;
}

@media (max-width: 820px) {
  .site-shell {
    width: min(100% - 24px, 1120px);
  }

  .brand {
    min-width: 0;
  }

  .hero-grid {
    gap: 34px;
  }

  .tariff-intro,
  .payment-hub {
    grid-template-columns: 1fr;
  }

  .payment-hub .checkout-panel dl,
  .payment-controls .period-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .payment-hub .checkout-panel dl,
  .payment-controls .period-strip,
  .payment-controls .promo-box div {
    grid-template-columns: 1fr;
  }
}

.site-header {
  grid-template-columns: auto minmax(0, 1fr);
  padding: 8px 12px;
}

.main-nav {
  justify-self: center;
  min-height: 56px;
  padding: 6px;
  gap: 7px;
}

.main-nav a,
.main-nav button {
  min-height: 44px;
  padding: 0 24px;
  border-radius: 999px;
  font-size: 15px;
  line-height: 1;
}

.main-nav a:hover,
.main-nav a:focus-visible,
.main-nav button:hover,
.main-nav button:focus-visible {
  background: rgba(255, 255, 255, 0.055);
  box-shadow:
    inset 0 0 0 1px rgba(184, 108, 255, 0.28),
    0 12px 34px rgba(139, 92, 255, 0.18);
}

.brand b span,
.footer-brand b span {
  color: #bd63ff;
}

.cta-main {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-width: 166px;
  min-height: 58px;
  justify-content: space-between;
  gap: 16px;
  padding: 0 14px 0 28px;
  border: 1px solid rgba(83, 130, 255, 0.58);
  border-radius: 18px;
  background:
    radial-gradient(circle at 20% 0%, rgba(139, 92, 255, 0.22), transparent 48%),
    rgba(13, 18, 44, 0.76);
  box-shadow:
    0 0 0 1px rgba(56, 216, 255, 0.04),
    0 20px 48px rgba(56, 216, 255, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.cta-main::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      105deg,
      transparent 0%,
      transparent 18%,
      rgba(42, 219, 255, 0.95) 40%,
      rgba(139, 92, 255, 0.95) 58%,
      rgba(94, 124, 255, 0.98) 75%,
      transparent 100%
    );
  transform: translateX(-112%);
  transition: transform 760ms cubic-bezier(.2, .8, .2, 1);
}

.cta-main::after {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: 0;
  background:
    radial-gradient(circle at 85% 50%, rgba(56, 216, 255, 0.34), transparent 38%),
    linear-gradient(90deg, rgba(139, 92, 255, 0.30), rgba(56, 216, 255, 0.20));
  opacity: 0.42;
  filter: blur(10px);
}

.cta-main > span {
  position: relative;
  z-index: 2;
}

.cta-main:hover,
.cta-main:focus-visible {
  border-color: rgba(56, 216, 255, 0.82);
  box-shadow:
    0 0 0 1px rgba(56, 216, 255, 0.12),
    0 22px 58px rgba(56, 216, 255, 0.24),
    0 8px 30px rgba(139, 92, 255, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.cta-main:hover::before,
.cta-main:focus-visible::before {
  transform: translateX(0);
  animation: cta-neon-flow 1.7s ease-in-out infinite alternate;
}

.cta-arrow {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  margin-right: -4px;
  border-left: 1px solid rgba(139, 92, 255, 0.50);
  color: #58e9ff;
  font-size: 19px;
  line-height: 1;
  text-shadow: 0 0 14px rgba(56, 216, 255, 0.78);
  transition:
    transform 220ms ease,
    color 220ms ease,
    border-color 220ms ease,
    text-shadow 220ms ease;
}

.cta-main:hover .cta-arrow,
.cta-main:focus-visible .cta-arrow {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.42);
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.92);
  transform: translateX(3px);
}

@keyframes cta-neon-flow {
  from {
    background-position: 0% 50%;
    filter: saturate(1.05);
  }
  to {
    background-position: 100% 50%;
    filter: saturate(1.35);
  }
}

.service-tags {
  gap: 12px;
}

.service-tags > span {
  min-height: 44px;
  gap: 10px;
  padding: 6px 16px 6px 7px;
  border-color: rgba(56, 216, 255, 0.23);
  background:
    linear-gradient(90deg, rgba(139, 92, 255, 0.18), rgba(56, 216, 255, 0.055)),
    rgba(255, 255, 255, 0.026);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 12px 34px rgba(0, 0, 0, 0.18);
}

.service-tags > span:hover {
  transform: translateY(-2px);
  border-color: rgba(56, 216, 255, 0.52);
  box-shadow:
    0 0 0 1px rgba(139, 92, 255, 0.18),
    0 18px 44px rgba(56, 216, 255, 0.13);
}

.service-tags i {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.28), transparent 30%),
    linear-gradient(135deg, #8b5cff 0%, #31d9ff 100%);
  box-shadow:
    0 0 22px rgba(139, 92, 255, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.service-tags i img {
  display: block;
  width: 17px;
  height: 17px;
}

.service-tags .tag-auto {
  padding-left: 8px;
}

.service-tags .tag-auto i + i {
  margin-left: -15px;
}

.service-tags .tag-auto b {
  margin-left: 2px;
}

.site-footer {
  width: 100%;
  max-width: none;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 18px;
  margin: 58px 0 0;
  padding: 28px 30px 24px;
  border-radius: 30px 30px 0 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(139, 92, 255, 0.16), transparent 42%),
    linear-gradient(180deg, rgba(19, 22, 46, 0.94), rgba(10, 9, 23, 0.94));
}

.footer-brand {
  display: grid;
  justify-items: center;
  gap: 9px;
  text-align: center;
}

.footer-logo {
  width: 54px;
  height: 54px;
  box-shadow:
    0 0 0 10px rgba(139, 92, 255, 0.12),
    0 18px 42px rgba(139, 92, 255, 0.20);
}

.footer-actions {
  display: flex;
  width: min(100%, 560px);
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px;
  border: 1px solid rgba(139, 92, 255, 0.30);
  border-radius: 999px;
  background: rgba(9, 8, 22, 0.58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.footer-actions a,
.footer-actions button {
  min-height: 44px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  appearance: none;
  background: transparent;
  color: var(--access-text);
  cursor: pointer;
  font: inherit;
  font-weight: 900;
  text-decoration: none;
  transition:
    background 220ms ease,
    box-shadow 220ms ease,
    color 220ms ease,
    transform 220ms ease;
}

.footer-actions a:hover,
.footer-actions a:focus-visible,
.footer-actions button:hover,
.footer-actions button:focus-visible {
  color: #ffffff;
  transform: translateY(-1px);
  background: linear-gradient(90deg, rgba(139, 92, 255, 0.42), rgba(56, 216, 255, 0.18));
  box-shadow: 0 14px 34px rgba(139, 92, 255, 0.20);
}

.footer-bottom {
  width: min(100%, 980px);
  justify-content: center;
  padding-top: 15px;
  border-top: 1px solid rgba(139, 92, 255, 0.18);
  text-align: center;
}

.footer-bottom p {
  color: #bd63ff;
  font-weight: 900;
  letter-spacing: 0.01em;
}

@media (max-width: 820px) {
  .site-header {
    grid-template-columns: 1fr auto;
  }

  .main-nav {
    justify-self: stretch;
  }

  .main-nav a,
  .main-nav button {
    min-height: 42px;
    padding: 0 18px;
  }

  .service-tags {
    gap: 10px;
  }

  .footer-actions {
    width: 100%;
    border-radius: 24px;
  }
}

@media (max-width: 560px) {
  .cta-main {
    width: 100%;
  }

  .footer-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
}

.site-header .brand-mark {
  position: relative;
  isolation: isolate;
  overflow: visible;
  animation: none;
  border-color: rgba(189, 99, 255, 0.72);
  box-shadow:
    0 0 0 8px rgba(124, 60, 255, 0.10),
    0 0 24px rgba(189, 99, 255, 0.24),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.site-header .brand-mark::before {
  content: "";
  position: absolute;
  inset: -8px;
  z-index: 1;
  border-radius: 999px;
  padding: 2px;
  background:
    conic-gradient(
      from 0deg,
      rgba(189, 99, 255, 0),
      rgba(189, 99, 255, 0.95),
      rgba(109, 92, 255, 0.92),
      rgba(0, 231, 247, 0.70),
      rgba(189, 99, 255, 0.95),
      rgba(189, 99, 255, 0)
    );
  pointer-events: none;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: header-logo-neon-ring 4.2s linear infinite;
}

.site-header .brand-mark::after {
  content: "";
  position: absolute;
  inset: -10px;
  z-index: 0;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(189, 99, 255, 0.24), transparent 64%);
  filter: blur(8px);
  opacity: 0.76;
  pointer-events: none;
}

.site-header .brand-mark img {
  position: relative;
  z-index: 2;
}

@keyframes header-logo-neon-ring {
  to {
    transform: rotate(1turn);
  }
}

.route-card strong {
  color: #f1e8ff;
  border-color: rgba(189, 99, 255, 0.42);
  background: rgba(111, 76, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 18px rgba(189, 99, 255, 0.16);
  text-shadow: none;
}

.service-tags > span {
  border-color: rgba(189, 99, 255, 0.28);
  background:
    linear-gradient(90deg, rgba(114, 76, 255, 0.20), rgba(189, 99, 255, 0.08)),
    rgba(255, 255, 255, 0.026);
}

.service-tags > span:hover {
  border-color: rgba(189, 99, 255, 0.58);
  box-shadow:
    0 0 0 1px rgba(189, 99, 255, 0.18),
    0 18px 44px rgba(139, 92, 255, 0.18);
}

.service-tags i {
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.24), transparent 30%),
    linear-gradient(135deg, #6f4cff 0%, #bd63ff 100%);
  box-shadow:
    0 0 20px rgba(189, 99, 255, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.20);
}

.service-tags b {
  color: #f8f2ff;
  text-shadow: 0 0 16px rgba(189, 99, 255, 0.18);
}

.cta-main {
  min-width: 178px;
  min-height: 58px;
  padding: 0 13px 0 28px;
  border: 0;
  border-radius: 7px;
  color: #070a12;
  background: #f5fbff;
  box-shadow:
    0 10px 15px -10px rgba(0, 231, 247, 0.50),
    0 0 0 1px rgba(255, 255, 255, 0.10);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.cta-main::before {
  inset: 0;
  z-index: 0;
  opacity: 0;
  transform: none;
  background-image:
    radial-gradient(circle at center, rgba(0, 231, 247, 1) 0%, rgba(0, 194, 241, 0.92) 48%, rgba(139, 92, 255, 0.95) 100%);
  transition: opacity 200ms ease-in-out;
  animation: none;
}

.cta-main::after {
  inset: -70% -40%;
  z-index: 1;
  width: auto;
  height: auto;
  opacity: 0;
  transform: translateX(-64%) rotate(17deg);
  background: linear-gradient(90deg, transparent 20%, rgba(255, 255, 255, 0.74) 50%, transparent 78%);
  filter: none;
  transition:
    opacity 180ms ease,
    transform 780ms cubic-bezier(.2, .8, .2, 1);
}

.cta-main:hover,
.cta-main:focus-visible {
  color: #ffffff;
  border-color: transparent;
  box-shadow:
    0 10px 40px -2px rgba(0, 255, 229, 0.30),
    0 0 0 1px rgba(255, 255, 255, 0.08);
}

.cta-main:hover::before,
.cta-main:focus-visible::before {
  opacity: 1;
  transform: none;
  animation: none;
}

.cta-main:hover::after,
.cta-main:focus-visible::after {
  opacity: 0.82;
  transform: translateX(64%) rotate(17deg);
}

.cta-arrow {
  color: #070a12;
  border-left: 1px solid rgba(7, 10, 18, 0.18);
  text-shadow: none;
}

.cta-main:hover .cta-arrow,
.cta-main:focus-visible .cta-arrow {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.34);
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.72);
}

.site-footer {
  width: 100%;
  max-width: none;
  min-height: 0;
  gap: 12px;
  margin: 54px 0 0;
  padding: 20px 28px 18px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 50% 0%, rgba(189, 99, 255, 0.12), transparent 40%),
    linear-gradient(180deg, rgba(18, 19, 42, 0.92), rgba(10, 9, 23, 0.94));
}

.footer-brand {
  display: block;
  text-align: center;
}

.footer-brand b {
  font-size: 22px;
  letter-spacing: -0.045em;
}

.footer-actions {
  width: min(100%, 460px);
  min-height: 56px;
  border-color: rgba(189, 99, 255, 0.30);
  background: rgba(8, 7, 20, 0.50);
}

.footer-bottom {
  width: min(100%, 980px);
  margin-top: 2px;
  padding-top: 12px;
  border-top: 1px solid rgba(189, 99, 255, 0.20);
}

.footer-bottom p {
  margin: 0;
  color: #bd63ff;
  text-shadow: 0 0 18px rgba(189, 99, 255, 0.28);
}

@media (max-width: 560px) {
  .footer-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    border-radius: 22px;
  }

  .site-footer {
    padding: 20px 16px 18px;
  }
}

/* Final visual reset for the test landing. Keep it after legacy experiments. */
.site-shell {
  width: min(100% - 48px, 1220px);
}

.site-header {
  display: grid;
  grid-template-columns: minmax(230px, 1fr) auto minmax(230px, 1fr);
  align-items: center;
  min-height: 76px;
  margin: 8px auto 0;
  padding: 0 22px;
  border-color: rgba(139, 92, 255, 0.34);
  border-radius: 26px;
  background:
    radial-gradient(circle at 0% 50%, rgba(139, 92, 255, 0.20), transparent 30%),
    linear-gradient(90deg, rgba(20, 18, 44, 0.94), rgba(8, 9, 21, 0.92));
  box-shadow:
    0 16px 54px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.site-header::before,
.site-header::after {
  opacity: 0.35;
}

.brand {
  grid-column: 1;
  justify-self: start;
  gap: 12px;
  min-width: 0;
  height: 58px;
  align-items: center;
}

.site-header .brand-mark {
  width: 48px;
  height: 48px;
  border-width: 1px;
  box-shadow:
    0 0 0 6px rgba(139, 92, 255, 0.10),
    0 0 22px rgba(189, 99, 255, 0.24),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.site-header .brand-mark::before {
  inset: -5px;
  padding: 2px;
  background:
    conic-gradient(
      from 0deg,
      transparent 0 18%,
      rgba(189, 99, 255, 0.98) 28%,
      rgba(96, 106, 255, 0.86) 45%,
      rgba(189, 99, 255, 0.98) 62%,
      transparent 78% 100%
    );
  animation-duration: 5.8s;
}

.site-header .brand-mark::after {
  inset: -7px;
  opacity: 0.42;
  filter: blur(7px);
}

.brand b {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 1px;
  font-size: 18px;
  line-height: 1;
  white-space: nowrap;
}

.main-nav {
  grid-column: 2;
  justify-self: center;
  height: 56px;
  min-height: 56px;
  padding: 5px;
  gap: 5px;
  border-color: rgba(139, 92, 255, 0.24);
  background: rgba(7, 7, 18, 0.52);
}

.main-nav a,
.main-nav button {
  min-width: 132px;
  min-height: 46px;
  justify-content: center;
  padding: 0 18px;
  border-radius: 999px;
  color: rgba(248, 242, 255, 0.86);
  font-size: 15px;
  font-weight: 760;
}

.main-nav a:hover,
.main-nav a:focus-visible,
.main-nav button:hover,
.main-nav button:focus-visible {
  color: #ffffff;
  background: rgba(139, 92, 255, 0.18);
  box-shadow:
    inset 0 0 0 1px rgba(189, 99, 255, 0.22),
    0 10px 26px rgba(139, 92, 255, 0.18);
}

.nova-hero {
  padding: 58px 0 46px;
}

.nova-hero::before {
  inset: -40px -160px auto auto;
  opacity: 0.7;
}

.hero-grid {
  gap: 58px;
  align-items: center;
}

.hero-copy h1 {
  margin-bottom: 22px;
  letter-spacing: -0.082em;
}

.lead {
  max-width: 650px;
  margin-bottom: 22px;
  color: rgba(231, 224, 246, 0.78);
  font-size: clamp(17px, 1.65vw, 20px);
  line-height: 1.58;
}

.service-tags {
  gap: 10px;
  margin-bottom: 28px;
}

.service-tags > span {
  min-height: 42px;
  padding: 5px 14px 5px 6px;
  border-color: rgba(139, 92, 255, 0.34);
  background:
    linear-gradient(90deg, rgba(139, 92, 255, 0.20), rgba(24, 21, 48, 0.70)),
    rgba(255, 255, 255, 0.018);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 10px 28px rgba(0, 0, 0, 0.16);
}

.service-tags i {
  width: 30px;
  height: 30px;
  background:
    radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.28), transparent 30%),
    linear-gradient(135deg, #7c3cff, #bd63ff);
  box-shadow:
    0 0 18px rgba(139, 92, 255, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.20);
}

.service-tags b {
  color: rgba(255, 255, 255, 0.94);
  font-size: 13px;
  text-shadow: none;
}

.service-tags .tag-auto i + i {
  margin-left: -12px;
}

.hero-actions {
  display: flex;
  align-items: center;
  margin-top: 4px;
}

.cta-main {
  display: inline-flex;
  position: relative;
  isolation: isolate;
  min-width: 176px;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 12px 0 26px;
  overflow: hidden;
  border: 1px solid rgba(189, 99, 255, 0.44);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(139, 92, 255, 0.95), rgba(95, 111, 255, 0.95));
  color: #ffffff;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  box-shadow:
    0 18px 44px rgba(139, 92, 255, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.07) inset,
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.cta-main::before,
.cta-main::after {
  pointer-events: none;
}

.cta-main::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 0;
  border-radius: inherit;
  opacity: 1;
  transform: none;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.18), transparent 34%),
    linear-gradient(100deg, #9b42ff 0%, #6f55ff 55%, #4d77ff 100%);
  transition:
    opacity 180ms ease,
    filter 180ms ease;
}

.cta-main::after {
  content: "";
  position: absolute;
  inset: -80% -45%;
  z-index: 1;
  width: auto;
  height: auto;
  opacity: 0;
  transform: translateX(-70%) rotate(18deg);
  background: linear-gradient(90deg, transparent 28%, rgba(255, 255, 255, 0.65) 50%, transparent 72%);
  filter: none;
  transition:
    opacity 160ms ease,
    transform 680ms cubic-bezier(.2, .8, .2, 1);
}

.cta-main > span {
  position: relative;
  z-index: 2;
}

.cta-label {
  margin: 0;
  color: #ffffff;
  font-weight: 950;
}

.cta-arrow {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  margin: 0 -4px 0 2px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.13);
  color: #ffffff;
  font-size: 18px;
  line-height: 1;
  text-shadow: none;
}

.cta-main:hover,
.cta-main:focus-visible {
  transform: translateY(-2px);
  color: #ffffff;
  border-color: rgba(220, 188, 255, 0.72);
  box-shadow:
    0 20px 54px rgba(139, 92, 255, 0.34),
    0 0 34px rgba(189, 99, 255, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.cta-main:hover::before,
.cta-main:focus-visible::before {
  opacity: 1;
  filter: saturate(1.18) brightness(1.06);
}

.cta-main:hover::after,
.cta-main:focus-visible::after {
  opacity: 0.9;
  transform: translateX(70%) rotate(18deg);
}

.cta-main:hover .cta-arrow,
.cta-main:focus-visible .cta-arrow {
  transform: translateX(3px);
  border: 0;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.20);
  text-shadow: none;
}

.cta-main:hover .cta-label,
.cta-main:focus-visible .cta-label {
  transform: none;
}

.route-card strong {
  color: rgba(247, 241, 255, 0.96);
  border-color: rgba(189, 99, 255, 0.46);
  background: rgba(92, 62, 190, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 16px rgba(139, 92, 255, 0.18);
}

.site-footer {
  width: min(100%, 1220px);
  max-width: none;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 10px;
  margin: 52px auto 0;
  padding: 18px 22px 0;
  overflow: hidden;
  border-color: rgba(139, 92, 255, 0.30);
  border-radius: 26px;
  background:
    radial-gradient(circle at 50% 0%, rgba(139, 92, 255, 0.12), transparent 36%),
    linear-gradient(180deg, rgba(19, 20, 43, 0.92), rgba(11, 10, 24, 0.94));
  box-shadow:
    0 18px 58px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.footer-brand {
  display: block;
  text-align: center;
}

.footer-brand b {
  display: inline-flex;
  gap: 5px;
  align-items: baseline;
  color: #ffffff;
  font-size: 20px;
  font-weight: 950;
  letter-spacing: -0.045em;
}

.footer-actions {
  display: flex;
  width: min(100%, 520px);
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px;
  border: 1px solid rgba(139, 92, 255, 0.28);
  border-radius: 999px;
  background: rgba(8, 7, 20, 0.54);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.footer-actions a,
.footer-actions button {
  min-width: 220px;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  appearance: none;
  background: transparent;
  color: rgba(248, 242, 255, 0.88);
  cursor: pointer;
  font: inherit;
  font-weight: 850;
  text-align: center;
  text-decoration: none;
}

.footer-actions a:hover,
.footer-actions a:focus-visible,
.footer-actions button:hover,
.footer-actions button:focus-visible {
  color: #ffffff;
  transform: none;
  background: rgba(139, 92, 255, 0.18);
  box-shadow: inset 0 0 0 1px rgba(189, 99, 255, 0.20);
}

.footer-bottom {
  width: calc(100% + 44px);
  display: flex;
  justify-content: center;
  margin: 8px -22px 0;
  padding: 13px 22px 15px;
  border-top: 1px solid rgba(139, 92, 255, 0.22);
  background:
    linear-gradient(90deg, transparent, rgba(139, 92, 255, 0.075), transparent);
  text-align: center;
}

.footer-bottom p {
  margin: 0;
  color: #bd63ff;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.01em;
  text-shadow: 0 0 18px rgba(189, 99, 255, 0.26);
}

@media (max-width: 900px) {
  .site-shell {
    width: min(100% - 28px, 1220px);
  }

  .site-header {
    grid-template-columns: 1fr auto;
    min-height: 70px;
    padding: 0 14px;
  }

  .brand {
    grid-column: 1;
  }

  .main-nav {
    grid-column: 1 / -1;
    width: 100%;
    height: auto;
    min-height: 0;
    margin-top: 10px;
    flex-wrap: wrap;
  }

  .main-nav a,
  .main-nav button {
    min-width: 0;
    flex: 1 1 auto;
  }

  .nova-hero {
    padding-top: 38px;
  }

  .footer-actions,
  .footer-actions a,
  .footer-actions button {
    min-width: 0;
  }
}

@media (max-width: 560px) {
  .site-shell {
    width: min(100% - 20px, 1220px);
  }

  .site-header {
    border-radius: 22px;
  }

  .main-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .footer-actions {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr;
    border-radius: 22px;
  }

  .footer-bottom {
    width: calc(100% + 32px);
    margin-right: -16px;
    margin-left: -16px;
  }
}

html,
body {
  min-height: 100%;
}

body {
  min-height: 100vh;
}

.site-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-shell > main {
  flex: 1 0 auto;
}

.main-nav a,
.main-nav button,
.footer-actions a,
.footer-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.main-nav a,
.main-nav button {
  background: transparent;
  box-shadow: none;
}

.main-nav a:focus:not(:focus-visible),
.main-nav button:focus:not(:focus-visible) {
  background: transparent;
  box-shadow: none;
}

.main-nav a:hover,
.main-nav a:focus-visible,
.main-nav button:hover,
.main-nav button:focus-visible,
.main-nav a:active,
.main-nav button:active {
  color: #ffffff;
  background:
    radial-gradient(circle at 50% 0%, rgba(189, 99, 255, 0.22), transparent 62%),
    rgba(139, 92, 255, 0.18);
  box-shadow:
    inset 0 0 0 1px rgba(189, 99, 255, 0.26),
    0 10px 26px rgba(139, 92, 255, 0.18);
}

.site-footer {
  flex: 0 0 auto;
  width: min(100%, 1220px);
  margin: 34px auto 0;
  padding: 12px 20px 0;
  gap: 7px;
  border-radius: 24px 24px 0 0;
}

.footer-brand b {
  font-size: 18px;
}

.footer-actions {
  width: min(100%, 520px);
  min-height: 46px;
  padding: 4px;
}

.footer-actions a,
.footer-actions button {
  min-height: 38px;
  min-width: 210px;
  padding: 0 16px;
  background: transparent;
  box-shadow: none;
}

.footer-actions a:hover,
.footer-actions a:focus-visible,
.footer-actions button:hover,
.footer-actions button:focus-visible,
.footer-actions a:active,
.footer-actions button:active {
  color: #ffffff;
  background:
    radial-gradient(circle at 50% 0%, rgba(189, 99, 255, 0.20), transparent 62%),
    rgba(139, 92, 255, 0.18);
  box-shadow: inset 0 0 0 1px rgba(189, 99, 255, 0.22);
}

.footer-bottom {
  width: calc(100% + 40px);
  margin: 6px -20px 0;
  padding: 10px 20px 11px;
}

.footer-bottom p {
  font-size: 14px;
}

@media (max-width: 560px) {
  .site-shell {
    min-height: 100vh;
  }

  .site-footer {
    padding: 12px 14px 0;
  }

  .footer-actions a,
  .footer-actions button {
    min-width: 0;
  }

  .footer-bottom {
    width: calc(100% + 28px);
    margin-right: -14px;
    margin-left: -14px;
  }
}

/* Compact footer + clean primary CTA */
.site-shell {
  min-height: auto;
  display: block;
}

.site-shell > main {
  flex: initial;
}

.nova-hero {
  padding-bottom: 32px;
}

.hero-actions .cta-main {
  min-width: 190px;
  min-height: 58px;
  gap: 12px;
  padding: 0 8px 0 30px;
  border: 1px solid rgba(231, 214, 255, 0.20);
  border-radius: 999px;
  background: linear-gradient(105deg, #a14cff 0%, #8155ff 48%, #5274ff 100%);
  color: #ffffff;
  box-shadow:
    0 18px 42px rgba(139, 92, 255, 0.34),
    0 0 34px rgba(139, 92, 255, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.20);
}

.hero-actions .cta-main::before {
  inset: 1px;
  opacity: 1;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.18), transparent 34%),
    linear-gradient(105deg, #a14cff 0%, #8155ff 48%, #5274ff 100%);
}

.hero-actions .cta-main::after {
  inset: -95% -45%;
  opacity: 0;
  transform: translateX(-68%) rotate(18deg);
  background: linear-gradient(90deg, transparent 30%, rgba(255, 255, 255, 0.58) 50%, transparent 70%);
}

.hero-actions .cta-main .cta-label {
  color: #ffffff !important;
  font-size: 15px;
  font-weight: 950;
  text-transform: none;
  text-shadow: 0 1px 14px rgba(255, 255, 255, 0.16);
}

.hero-actions .cta-main .cta-arrow {
  width: 42px;
  height: 42px;
  margin: 0 0 0 6px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.36), transparent 36%),
    rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-size: 18px;
}

.hero-actions .cta-main:hover,
.hero-actions .cta-main:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.34);
  box-shadow:
    0 20px 52px rgba(139, 92, 255, 0.42),
    0 0 42px rgba(82, 116, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.hero-actions .cta-main:hover::after,
.hero-actions .cta-main:focus-visible::after {
  opacity: 0.72;
  transform: translateX(68%) rotate(18deg);
}

.hero-actions .cta-main:hover .cta-arrow,
.hero-actions .cta-main:focus-visible .cta-arrow {
  transform: translateX(2px);
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.42), transparent 36%),
    rgba(255, 255, 255, 0.24);
}

.site-footer {
  width: min(100%, 1220px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin: 22px auto 18px;
  padding: 0 18px;
  min-height: 58px;
  overflow: visible;
  border: 1px solid rgba(139, 92, 255, 0.28);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 0%, rgba(139, 92, 255, 0.12), transparent 56%),
    rgba(12, 11, 27, 0.84);
  box-shadow:
    0 12px 34px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.footer-link {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  appearance: none;
  background: transparent;
  color: rgba(248, 242, 255, 0.86);
  cursor: pointer;
  font: inherit;
  font-weight: 850;
  text-decoration: none;
  transition:
    background 180ms ease,
    box-shadow 180ms ease,
    color 180ms ease;
}

.footer-offer-link {
  justify-self: start;
}

.footer-support-link {
  justify-self: end;
}

.footer-link:hover,
.footer-link:focus-visible,
.footer-link:active {
  color: #ffffff;
  background: rgba(139, 92, 255, 0.18);
  box-shadow: inset 0 0 0 1px rgba(189, 99, 255, 0.22);
}

.footer-copy {
  justify-self: center;
  margin: 0;
  color: rgba(248, 242, 255, 0.78);
  font-size: 14px;
  font-weight: 850;
  letter-spacing: 0.01em;
}

.footer-copy span {
  color: #bd63ff;
  font-weight: 950;
}

.footer-brand,
.footer-actions,
.footer-bottom {
  display: none;
}

@media (max-width: 700px) {
  .site-footer {
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 12px;
  }

  .footer-offer-link,
  .footer-support-link,
  .footer-copy {
    justify-self: center;
  }
}

/* Button lab: three selectable Начать variants */
.button-lab {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: 4px;
}

.button-choice {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  min-width: 170px;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 999px;
  appearance: none;
  color: #ffffff;
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  font-weight: 950;
  line-height: 1;
  text-decoration: none;
  transition:
    transform 240ms ease,
    box-shadow 240ms ease,
    border-color 240ms ease,
    color 240ms ease;
}

.button-choice span {
  position: relative;
  z-index: 2;
}

.button-choice--pulse {
  overflow: visible;
  padding: 0 28px;
  border: 1px solid rgba(219, 199, 255, 0.18);
  background: linear-gradient(90deg, #a646ff 0%, #7c55ff 52%, #5574ff 100%);
  box-shadow:
    0 16px 34px rgba(139, 92, 255, 0.34),
    0 0 32px rgba(82, 116, 255, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.button-choice--pulse::before {
  content: "";
  position: absolute;
  inset: -7px;
  z-index: 0;
  border: 2px solid rgba(189, 99, 255, 0.68);
  border-radius: inherit;
  opacity: 0;
  box-shadow:
    0 0 34px rgba(189, 99, 255, 0.38),
    0 0 54px rgba(82, 116, 255, 0.18);
  transition: opacity 240ms ease;
}

.button-choice--pulse::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: -1;
  width: 26px;
  height: 26px;
  border: 2px solid rgba(189, 99, 255, 0.42);
  border-radius: 999px;
  transform: translate(-50%, -50%);
  animation: button-ring-pulse 1.9s ease-out infinite;
}

.button-choice--pulse:hover,
.button-choice--pulse:focus-visible {
  transform: translateY(-4px);
  box-shadow:
    0 22px 48px rgba(139, 92, 255, 0.42),
    0 0 46px rgba(189, 99, 255, 0.20);
}

.button-choice--pulse:hover::before,
.button-choice--pulse:focus-visible::before {
  opacity: 1;
}

.button-choice--pulse:hover::after,
.button-choice--pulse:focus-visible::after {
  animation: none;
  opacity: 0;
}

@keyframes button-ring-pulse {
  0% {
    width: 26px;
    height: 26px;
    opacity: 0.85;
  }
  100% {
    width: 210px;
    height: 210px;
    opacity: 0;
  }
}

.button-choice--sweep {
  min-width: 178px;
  overflow: hidden;
  padding: 0 14px 0 26px;
  border: 1px solid rgba(146, 148, 248, 0.38);
  background: rgba(12, 11, 28, 0.66);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 14px 34px rgba(0, 0, 0, 0.22);
}

.button-choice--sweep::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 -115%;
  z-index: 1;
  width: 100%;
  background: linear-gradient(120deg, transparent, rgba(189, 99, 255, 0.42), rgba(82, 116, 255, 0.38), transparent);
  transition: left 650ms cubic-bezier(.2, .8, .2, 1);
}

.button-choice--sweep::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, rgba(139, 92, 255, 0.10), rgba(82, 116, 255, 0.08));
}

.button-choice--sweep:hover,
.button-choice--sweep:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(189, 99, 255, 0.64);
  box-shadow:
    0 0 30px rgba(146, 148, 248, 0.26),
    0 16px 40px rgba(0, 0, 0, 0.28);
}

.button-choice--sweep:hover::before,
.button-choice--sweep:focus-visible::before {
  left: 115%;
}

.button-choice-arrow {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.10);
}

.button-choice--grow {
  width: 178px;
  min-width: 178px;
  overflow: hidden;
  justify-content: flex-start;
  padding: 0;
  border: 1px solid rgba(189, 99, 255, 0.36);
  background: transparent;
  color: #f8f2ff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 14px 34px rgba(0, 0, 0, 0.20);
}

.grow-circle {
  position: relative;
  display: block;
  width: 52px;
  height: 52px;
  margin: 2px;
  border-radius: 999px;
  background: linear-gradient(135deg, #8b5cff, #5274ff);
  transition: width 460ms cubic-bezier(0.65, 0, 0.076, 1);
}

.grow-arrow {
  position: absolute;
  top: 50%;
  left: 18px;
  width: 16px;
  height: 2px;
  background: transparent;
  transform: translateY(-50%);
  transition:
    transform 460ms cubic-bezier(0.65, 0, 0.076, 1),
    background 460ms cubic-bezier(0.65, 0, 0.076, 1);
}

.grow-arrow::before {
  content: "";
  position: absolute;
  top: -4px;
  right: 0;
  width: 10px;
  height: 10px;
  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
  transform: rotate(45deg);
}

.grow-text {
  position: absolute !important;
  inset: 0 18px 0 56px;
  display: grid;
  place-items: center;
  color: #f8f2ff;
  transition:
    color 360ms ease,
    transform 460ms cubic-bezier(0.65, 0, 0.076, 1);
}

.button-choice--grow:hover,
.button-choice--grow:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(189, 99, 255, 0.58);
  box-shadow:
    0 18px 44px rgba(139, 92, 255, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.065);
}

.button-choice--grow:hover .grow-circle,
.button-choice--grow:focus-visible .grow-circle {
  width: calc(100% - 4px);
}

.button-choice--grow:hover .grow-arrow,
.button-choice--grow:focus-visible .grow-arrow {
  background: #ffffff;
  transform: translate(54px, -50%);
}

.button-choice--grow:hover .grow-text,
.button-choice--grow:focus-visible .grow-text {
  color: #ffffff;
  transform: translateX(4px);
}

@media (max-width: 700px) {
  .button-lab {
    align-items: stretch;
  }

  .button-choice,
  .button-choice--grow {
    width: 100%;
    min-width: 0;
  }
}

/* Final single CTA, aligned service icons, offer in header */
.main-nav {
  gap: 4px;
}

.main-nav a,
.main-nav button {
  min-width: 116px;
  border: 0;
  appearance: none;
  background: transparent;
  color: rgba(248, 242, 255, 0.86);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 820;
}

.main-nav a:hover,
.main-nav a:focus-visible,
.main-nav button:hover,
.main-nav button:focus-visible,
.main-nav a:active,
.main-nav button:active {
  color: #ffffff;
  background:
    radial-gradient(circle at 50% 0%, rgba(115, 124, 255, 0.26), transparent 62%),
    linear-gradient(90deg, rgba(139, 92, 255, 0.18), rgba(82, 116, 255, 0.16));
  box-shadow:
    inset 0 0 0 1px rgba(115, 124, 255, 0.28),
    0 10px 28px rgba(82, 116, 255, 0.14);
}

.service-tags {
  align-items: center;
}

.service-tags > span {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 9px;
}

.service-tags i {
  width: 30px !important;
  height: 30px !important;
  display: inline-grid;
  place-items: center;
  flex: 0 0 30px;
}

.service-tags i img {
  width: 16px !important;
  height: 16px !important;
  display: block;
  object-fit: contain;
}

.service-tags .tag-auto {
  gap: 8px;
}

.service-tags .tag-auto i + i {
  margin-left: -12px;
}

.service-tags b {
  line-height: 1;
}

.hero-actions {
  margin-top: 8px;
}

.start-button {
  position: relative;
  isolation: isolate;
  min-width: 190px;
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  padding: 0 34px;
  border: 1px solid rgba(189, 99, 255, 0.48);
  border-radius: 999px;
  appearance: none;
  background:
    linear-gradient(90deg, rgba(139, 92, 255, 0.16), rgba(82, 116, 255, 0.12)),
    rgba(12, 11, 28, 0.72);
  color: #ffffff;
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  font-weight: 950;
  line-height: 1;
  box-shadow:
    0 14px 30px rgba(139, 92, 255, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition:
    transform 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    filter 220ms ease;
}

.start-button::before {
  content: "";
  position: absolute;
  inset: -6px;
  z-index: -1;
  border: 2px solid rgba(189, 99, 255, 0.58);
  border-radius: inherit;
  opacity: 0.72;
  box-shadow:
    0 0 28px rgba(189, 99, 255, 0.30),
    0 0 44px rgba(82, 116, 255, 0.14);
  animation: start-button-ring 1.9s ease-out infinite;
  pointer-events: none;
}

.start-button::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 50%, rgba(139, 92, 255, 0.20), transparent 68%);
  filter: blur(12px);
  opacity: 0.72;
  pointer-events: none;
}

.start-button span {
  color: #ffffff;
  text-shadow: none;
}

.start-button:hover,
.start-button:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(189, 99, 255, 0.72);
  filter: saturate(1.05);
  box-shadow:
    0 18px 40px rgba(139, 92, 255, 0.22),
    0 0 34px rgba(82, 116, 255, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.start-button:hover::before,
.start-button:focus-visible::before {
  opacity: 1;
  animation: none;
}

@keyframes start-button-ring {
  0% {
    transform: scale(0.98);
    opacity: 0.72;
  }
  70% {
    transform: scale(1.18);
    opacity: 0;
  }
  100% {
    transform: scale(1.18);
    opacity: 0;
  }
}

.button-lab,
.button-choice,
.button-choice--pulse,
.button-choice--sweep,
.button-choice--grow {
  /* Old button lab stays unused; keep the selectors harmless for cached markup. */
}

.site-footer {
  width: min(100%, 1220px);
  display: flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  margin: 82px auto 18px;
  padding: 0 18px;
  border: 1px solid rgba(139, 92, 255, 0.22);
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 0%, rgba(139, 92, 255, 0.10), transparent 58%),
    rgba(12, 11, 27, 0.72);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.nova-hero {
  padding-bottom: 56px;
}

.footer-copy {
  margin: 0;
  color: rgba(248, 242, 255, 0.72);
  font-size: 14px;
  font-weight: 850;
}

.footer-copy span {
  color: #bd63ff;
  font-weight: 950;
}

.footer-link,
.footer-offer-link,
.footer-support-link,
.footer-brand,
.footer-actions,
.footer-bottom {
  display: none !important;
}

@media (max-width: 900px) {
  .main-nav a,
  .main-nav button {
    min-width: 0;
  }
}

@media (max-width: 700px) {
  .start-button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* Final cleanup: unified type, support underline, login CTA, no footer */
.brand b,
.main-nav a,
.main-nav button,
.start-button,
.service-tags b,
.modal-card button,
.modal-extra a {
  font-family: "Aptos Display", "Segoe UI", "Trebuchet MS", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.brand b {
  font-size: 18px;
  font-weight: 850;
  letter-spacing: -0.035em;
}

.main-nav a,
.main-nav button {
  position: relative;
  overflow: hidden;
  font-size: 14px;
  font-weight: 760;
  letter-spacing: -0.018em;
}

.main-nav a::after,
.main-nav button::after {
  content: "";
  position: absolute;
  right: 20px;
  bottom: 5px;
  left: 20px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #bd63ff 0%, #5274ff 48%, #45d8ff 100%);
  box-shadow: 0 0 14px rgba(69, 216, 255, 0.38);
  opacity: 0;
  transform: translateY(4px) scaleX(0.42);
  transition:
    opacity 220ms ease,
    transform 220ms ease;
}

.main-nav a:hover::after,
.main-nav a:focus-visible::after,
.main-nav button:hover::after,
.main-nav button:focus-visible::after {
  opacity: 1;
  transform: translateY(0) scaleX(1);
}

.nova-hero {
  min-height: auto;
  padding-top: 74px;
  padding-bottom: 76px;
}

.start-button {
  min-width: 174px;
  min-height: 58px;
  padding: 0 34px;
  text-decoration: none;
  border-color: rgba(189, 99, 255, 0.52);
  background:
    radial-gradient(circle at 18% 18%, rgba(189, 99, 255, 0.18), transparent 34%),
    rgba(12, 11, 28, 0.68);
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.018em;
  box-shadow:
    0 14px 30px rgba(139, 92, 255, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.start-button::before {
  inset: -7px;
  border-width: 1px;
  border-color: rgba(189, 99, 255, 0.62);
  box-shadow:
    0 0 28px rgba(189, 99, 255, 0.28),
    0 0 42px rgba(82, 116, 255, 0.14);
}

.start-button::after {
  background:
    radial-gradient(circle at 50% 50%, rgba(189, 99, 255, 0.18), transparent 66%),
    radial-gradient(circle at 78% 50%, rgba(82, 116, 255, 0.12), transparent 42%);
  filter: blur(13px);
}

.start-button span {
  color: #ffffff;
  font-weight: inherit;
  letter-spacing: inherit;
}

.home-start-button,
.home-start-button:hover,
.home-start-button:focus-visible {
  isolation: auto;
  overflow: hidden;
  border-color: rgba(189, 99, 255, 0.46);
  background:
    radial-gradient(circle at 28% 0%, rgba(189, 99, 255, 0.14), transparent 58%),
    rgba(12, 11, 28, 0.72);
  box-shadow:
    0 14px 32px rgba(139, 92, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.home-start-button::before,
.home-start-button::after {
  display: none !important;
}

.start-button:hover,
.start-button:focus-visible {
  border-color: rgba(69, 216, 255, 0.46);
  background:
    radial-gradient(circle at 24% 16%, rgba(189, 99, 255, 0.22), transparent 36%),
    rgba(12, 11, 28, 0.74);
  box-shadow:
    0 18px 42px rgba(139, 92, 255, 0.22),
    0 0 26px rgba(69, 216, 255, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.site-footer {
  display: none !important;
}

.login-modal {
  width: min(620px, 100%);
}

.login-modal-form[hidden],
.login-session-card[hidden],
.modal-extra[hidden] {
  display: none !important;
}

.login-session-card {
  display: grid;
  gap: 10px;
  margin: 22px 0 0;
  padding: 22px;
  border: 1px solid rgba(189, 99, 255, 0.32);
  border-radius: 24px;
  background:
    radial-gradient(circle at 12% 0%, rgba(189, 99, 255, 0.16), transparent 42%),
    rgba(9, 7, 24, 0.72);
  box-shadow:
    0 18px 52px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.login-session-card small {
  color: rgba(248, 242, 255, 0.58);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.login-session-email {
  display: inline-block;
  color: #ffffff;
  font-size: clamp(22px, 4vw, 34px);
  font-weight: 850;
  letter-spacing: -0.045em;
  overflow-wrap: anywhere;
  transition:
    color 180ms ease,
    text-shadow 180ms ease,
    transform 180ms ease;
}

.login-session-email:hover,
.login-session-email:focus-visible {
  color: #d9b4ff;
  text-shadow:
    0 0 18px rgba(189, 99, 255, 0.34),
    0 0 28px rgba(82, 116, 255, 0.16);
  transform: translateY(-1px);
}

.login-session-card p {
  margin: 0;
  color: rgba(248, 242, 255, 0.70);
  line-height: 1.55;
}

.login-session-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.login-session-actions a,
.login-session-actions button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(189, 99, 255, 0.38);
  border-radius: 999px;
  padding: 0 18px;
  background: rgba(255, 255, 255, 0.025);
  color: #ffffff;
  font-size: 14px;
  font-weight: 780;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.login-session-actions a:hover,
.login-session-actions a:focus-visible,
.login-session-actions button:hover,
.login-session-actions button:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(69, 216, 255, 0.50);
  box-shadow:
    0 12px 30px rgba(82, 116, 255, 0.14),
    inset 0 -2px 0 rgba(69, 216, 255, 0.36);
}

.header-account {
  grid-column: 3;
  justify-self: end;
  position: relative;
  max-width: min(250px, 23vw);
  min-width: 132px;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(248, 242, 255, 0.86);
  font-family: "Aptos Display", "Segoe UI", "Trebuchet MS", sans-serif;
  font-size: 15px;
  font-weight: 760;
  letter-spacing: -0.018em;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease;
}

.header-account::after {
  content: "";
  position: absolute;
  right: 20px;
  bottom: 5px;
  left: 20px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #bd63ff 0%, #5274ff 48%, #45d8ff 100%);
  box-shadow: 0 0 14px rgba(69, 216, 255, 0.38);
  opacity: 0;
  transform: translateY(4px) scaleX(0.42);
  transition:
    opacity 220ms ease,
    transform 220ms ease;
}

.header-account[hidden] {
  display: none !important;
}

.header-account:hover,
.header-account:focus-visible {
  transform: translateY(-1px);
  color: #ffffff;
  background:
    radial-gradient(circle at 50% 0%, rgba(115, 124, 255, 0.26), transparent 62%),
    linear-gradient(90deg, rgba(139, 92, 255, 0.18), rgba(82, 116, 255, 0.16));
  box-shadow:
    inset 0 0 0 1px rgba(115, 124, 255, 0.28),
    0 10px 28px rgba(82, 116, 255, 0.14);
}

.header-account:hover::after,
.header-account:focus-visible::after {
  opacity: 1;
  transform: translateY(0) scaleX(1);
}

@media (max-width: 900px) {
  .header-account {
    grid-column: 1 / -1;
    justify-self: stretch;
    max-width: none;
    width: 100%;
  }
}

.login-modal.is-session h2 {
  padding: 0 54px;
  text-align: center;
}

.modal-close {
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease,
    transform 180ms ease;
}

.modal-close:hover,
.modal-close:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(69, 216, 255, 0.62);
  background:
    radial-gradient(circle at 50% 0%, rgba(189, 99, 255, 0.18), transparent 58%),
    rgba(255, 255, 255, 0.06);
  box-shadow:
    0 0 0 4px rgba(69, 216, 255, 0.08),
    0 0 24px rgba(189, 99, 255, 0.24),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* Auth-aware nav and account controls */
.main-nav a.nav-auth-link {
  box-shadow:
    inset 0 0 0 1px rgba(90, 240, 185, 0.18),
    0 0 0 1px rgba(69, 216, 255, 0.05);
  background:
    radial-gradient(circle at 22% 0%, rgba(90, 240, 185, 0.10), transparent 54%),
    rgba(69, 216, 255, 0.035);
}

.main-nav a.nav-auth-link::after {
  background: linear-gradient(90deg, #5af0b9 0%, #45d8ff 52%, #bd63ff 100%);
  box-shadow: 0 0 16px rgba(90, 240, 185, 0.34);
}

.main-nav a.nav-auth-link:hover,
.main-nav a.nav-auth-link:focus-visible {
  background:
    radial-gradient(circle at 50% 0%, rgba(90, 240, 185, 0.20), transparent 62%),
    linear-gradient(90deg, rgba(69, 216, 255, 0.13), rgba(90, 240, 185, 0.10));
  box-shadow:
    inset 0 0 0 1px rgba(90, 240, 185, 0.34),
    0 10px 28px rgba(69, 216, 255, 0.13);
}

.header-account-group {
  grid-column: 3;
  justify-self: end;
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
}

.header-account-group[hidden] {
  display: none !important;
}

.header-account {
  grid-column: auto;
  justify-self: auto;
  max-width: min(250px, 19vw);
  min-width: 132px;
  min-height: 46px;
  border: 1px solid rgba(189, 99, 255, 0.36);
  background:
    radial-gradient(circle at 18% 0%, rgba(189, 99, 255, 0.16), transparent 52%),
    rgba(255, 255, 255, 0.025);
}

.header-account:hover,
.header-account:focus-visible {
  border-color: rgba(69, 216, 255, 0.50);
  background:
    radial-gradient(circle at 50% 0%, rgba(115, 124, 255, 0.26), transparent 62%),
    linear-gradient(90deg, rgba(139, 92, 255, 0.18), rgba(82, 116, 255, 0.16));
}

.header-logout {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(189, 99, 255, 0.26);
  border-radius: 999px;
  padding: 0 16px;
  background: transparent;
  color: rgba(248, 242, 255, 0.82);
  font-family: "Aptos Display", "Segoe UI", "Trebuchet MS", sans-serif;
  font-size: 15px;
  font-weight: 760;
  letter-spacing: -0.018em;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.header-logout:hover,
.header-logout:focus-visible {
  transform: translateY(-1px);
  color: #ffffff;
  border-color: rgba(255, 138, 168, 0.42);
  background: rgba(255, 138, 168, 0.075);
  box-shadow:
    inset 0 0 0 1px rgba(255, 138, 168, 0.14),
    0 10px 28px rgba(255, 138, 168, 0.08);
}

@media (max-width: 900px) {
  .header-account-group {
    grid-column: 1 / -1;
    justify-self: stretch;
    width: 100%;
  }

  .header-account {
    max-width: none;
    width: auto;
    flex: 1 1 auto;
  }
}

/* Offer, payment cleanup and subscription preview polish */
.nova-hero,
.pay-page,
.sub-hero,
.offer-page {
  padding-top: clamp(54px, 6vw, 74px) !important;
}

.pay-page {
  padding-bottom: 72px !important;
}

.sub-hero {
  padding-bottom: 18px !important;
}

.cabinet-section {
  padding-top: 28px !important;
}

.tariff-intro {
  grid-template-columns: minmax(0, 1fr) !important;
  max-width: 780px;
  margin-bottom: 30px;
}

.tariff-intro h1 {
  margin-bottom: 0;
}

.checkout-panel {
  align-self: stretch;
}

.checkout-panel h3 {
  margin-bottom: 18px;
}

.checkout-status:empty {
  display: none;
}

.plan-card h3 {
  margin-top: 0;
}

.offer-consent {
  display: block;
  margin-top: 6px;
  padding: 14px 16px;
  border: 1px solid rgba(168, 85, 247, 0.34);
  border-radius: 14px;
  background:
    radial-gradient(circle at 12% 0%, rgba(168, 85, 247, 0.14), transparent 42%),
    rgba(255, 255, 255, 0.025);
  color: rgba(248, 242, 255, 0.78);
  font-size: 14px;
  line-height: 1.45;
}

.offer-consent a {
  color: #d8a4ff;
  font-weight: 850;
  text-decoration: underline;
  text-decoration-color: rgba(69, 216, 255, 0.42);
  text-underline-offset: 4px;
}

.profile-card .profile-head {
  align-items: flex-start;
}

.profile-card .profile-head > div {
  min-width: 0;
}

.profile-card [data-profile-email] {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.profile-card [data-profile-note] {
  display: block;
  margin-top: 8px;
  color: rgba(248, 242, 255, 0.68);
  line-height: 1.45;
}

.pay-fallback {
  border: 1px solid rgba(69, 216, 255, 0.42);
  background:
    radial-gradient(circle at 22% 0%, rgba(69, 216, 255, 0.16), transparent 50%),
    rgba(69, 216, 255, 0.06);
  box-shadow:
    0 12px 32px rgba(69, 216, 255, 0.10),
    inset 0 0 0 1px rgba(255, 255, 255, 0.035);
}

.pay-fallback[hidden] {
  display: none !important;
}

.status-pill.warn {
  border-color: rgba(255, 138, 168, 0.32);
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 138, 168, 0.14), transparent 58%),
    rgba(255, 138, 168, 0.075);
  color: #ffd9e3;
}

.connect-card {
  gap: 12px !important;
}

.sub-link-preview {
  display: block;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid rgba(69, 216, 255, 0.30);
  border-radius: 16px;
  padding: 13px 14px;
  background:
    linear-gradient(90deg, rgba(69, 216, 255, 0.08), rgba(168, 85, 247, 0.08)),
    rgba(4, 3, 12, 0.54);
  color: rgba(248, 242, 255, 0.84);
  font-family: "Aptos Display", "Segoe UI", "Trebuchet MS", sans-serif;
  font-size: 13px;
  font-weight: 760;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.connect-card button,
.connect-card a {
  width: 100%;
}

.offer-page {
  padding-bottom: 72px !important;
}

.offer-hero {
  max-width: 940px;
}

.offer-hero h1 {
  max-width: 980px;
  background: linear-gradient(92deg, #fff 0%, #f4ebff 35%, #bd63ff 66%, #6e83ff 100%);
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.offer-document {
  display: grid;
  gap: 14px;
  margin-top: 34px;
}

.offer-document article {
  border: 1px solid rgba(168, 85, 247, 0.28);
  border-radius: 26px;
  padding: clamp(22px, 3vw, 32px);
  background:
    radial-gradient(circle at 8% 0%, rgba(168, 85, 247, 0.12), transparent 46%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
    rgba(15, 12, 34, 0.70);
  box-shadow:
    0 22px 70px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.offer-document h2 {
  margin-bottom: 12px;
  color: #fff;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.05;
  letter-spacing: -0.05em;
  -webkit-text-fill-color: currentColor;
}

.offer-document p {
  max-width: 980px;
  margin: 0;
  color: rgba(248, 242, 255, 0.72);
  font-size: clamp(16px, 1.45vw, 19px);
  line-height: 1.65;
}

.offer-document p + p {
  margin-top: 12px;
}

@media (max-width: 720px) {
  .offer-consent {
    padding: 13px 14px;
  }

  .offer-document article {
    border-radius: 22px;
  }
}

/* Header fit: wider than content, but still not full-bleed. */
.site-header {
  width: min(1280px, calc(100vw - 48px)) !important;
  max-width: calc(100vw - 24px);
  grid-template-columns: minmax(174px, auto) minmax(0, 1fr) auto !important;
  gap: clamp(8px, 1.1vw, 16px) !important;
  margin: 14px 50% 0 !important;
  padding: 10px 14px !important;
  transform: translateX(-50%);
}

.site-header .brand {
  min-width: 0;
  white-space: nowrap;
}

.main-nav {
  min-width: 0;
  max-width: 100%;
  justify-self: center;
  gap: 4px !important;
  padding: 4px !important;
  overflow: hidden;
}

.main-nav a,
.main-nav button {
  min-width: 0;
  min-height: 42px;
  flex: 0 1 auto;
  padding: 0 clamp(13px, 1.25vw, 20px) !important;
  white-space: nowrap;
}

.header-account-group {
  min-width: 0;
  flex-shrink: 0;
  gap: 8px !important;
}

.header-account {
  width: auto;
  min-width: 188px !important;
  max-width: min(230px, 18vw) !important;
  padding: 0 18px !important;
  flex: 0 1 auto;
}

.header-logout {
  min-width: 86px;
  flex: 0 0 auto;
}

@media (max-width: 1180px) {
  .site-header {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
  }

  .brand b {
    font-size: 16px;
  }

  .main-nav a,
  .main-nav button {
    min-height: 40px;
    padding: 0 12px !important;
    font-size: 13px;
  }

  .header-account {
    min-width: 156px !important;
    max-width: 170px !important;
    font-size: 13px;
  }

  .header-logout {
    min-width: 76px;
    padding: 0 13px;
    font-size: 13px;
  }
}

@media (max-width: 980px) {
  .site-header {
    width: min(760px, calc(100vw - 28px)) !important;
    grid-template-columns: 1fr auto !important;
    border-radius: 30px;
  }

  .main-nav,
  .header-account-group {
    grid-column: 1 / -1;
    justify-self: stretch;
  }

  .main-nav {
    flex-wrap: wrap;
    justify-content: center;
    overflow: visible;
  }

  .header-account-group {
    justify-content: center;
  }

  .header-account {
    max-width: min(100%, 320px) !important;
  }
}

/* Header rollback: keep all top buttons in one clean row. */
@media (min-width: 981px) {
  .site-header {
    display: flex !important;
    width: min(1280px, calc(100vw - 72px)) !important;
    align-items: center;
    justify-content: space-between;
    gap: 16px !important;
  }

  .site-header .brand {
    flex: 0 0 auto;
    min-width: 164px;
  }

  .main-nav {
    flex: 0 1 auto;
    width: auto !important;
    max-width: 680px;
    margin: 0 auto;
    justify-content: center;
    overflow: visible;
  }

  .main-nav a,
  .main-nav button {
    flex: 0 0 auto;
    min-height: 42px;
    padding: 0 17px !important;
  }

  .header-account-group {
    flex: 0 0 auto;
    min-width: 0;
    justify-self: auto;
  }

  .header-account {
    min-width: 190px !important;
    max-width: 210px !important;
  }

  .header-logout {
    min-width: 86px;
  }
}

@media (min-width: 981px) and (max-width: 1220px) {
  .site-header {
    width: min(1180px, calc(100vw - 36px)) !important;
    gap: 10px !important;
  }

  .site-header .brand {
    min-width: 150px;
  }

  .main-nav {
    max-width: 610px;
  }

  .main-nav a,
  .main-nav button {
    padding: 0 12px !important;
    font-size: 13px;
  }

  .header-account {
    min-width: 170px !important;
    max-width: 180px !important;
    font-size: 13px;
  }

  .header-logout {
    min-width: 76px;
  }
}

/* Unified secondary pages: payment and quick connect share one visual language. */
.main-nav a[aria-current="page"],
.main-nav button[aria-current="page"] {
  color: #ffffff;
  background:
    radial-gradient(circle at 32% 0%, rgba(90, 240, 185, 0.18), transparent 58%),
    linear-gradient(90deg, rgba(69, 216, 255, 0.10), rgba(90, 240, 185, 0.08));
  box-shadow:
    inset 0 0 0 1px rgba(90, 240, 185, 0.28),
    0 10px 28px rgba(69, 216, 255, 0.10);
}

.main-nav a[aria-current="page"]::after,
.main-nav button[aria-current="page"]::after {
  opacity: 1;
  transform: translateY(0) scaleX(1);
  background: linear-gradient(90deg, #5af0b9 0%, #45d8ff 52%, #bd63ff 100%);
  box-shadow: 0 0 16px rgba(90, 240, 185, 0.34);
}

.service-page {
  position: relative;
}

.service-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(20px, 4vw, 46px);
  align-items: end;
  margin-bottom: clamp(28px, 4vw, 44px);
  padding: clamp(24px, 3.4vw, 38px);
  border: 1px solid rgba(168, 85, 247, 0.30);
  border-radius: 34px;
  background:
    radial-gradient(circle at 10% 0%, rgba(168, 85, 247, 0.20), transparent 44%),
    radial-gradient(circle at 100% 18%, rgba(69, 216, 255, 0.12), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.048), rgba(255, 255, 255, 0.014)),
    rgba(13, 10, 31, 0.74);
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
  backdrop-filter: blur(20px);
}

.service-kicker {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  margin-bottom: 18px;
  border: 1px solid rgba(90, 240, 185, 0.26);
  border-radius: 999px;
  padding: 0 14px;
  background:
    radial-gradient(circle at 25% 0%, rgba(90, 240, 185, 0.12), transparent 60%),
    rgba(69, 216, 255, 0.045);
  color: rgba(248, 242, 255, 0.82);
  font-size: 13px;
  font-weight: 850;
  letter-spacing: -0.015em;
}

.service-hero h1 {
  max-width: 880px;
  margin-bottom: 18px;
  background: linear-gradient(92deg, #fff 0%, #f4ebff 35%, #bd63ff 66%, #6e83ff 100%);
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.service-hero h1,
.offer-hero h1 {
  background: linear-gradient(92deg, #ffffff 0%, #f1e8ff 31%, #bd63ff 64%, #6e83ff 100%) !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.service-hero .lead {
  max-width: 760px;
  margin: 0;
  color: rgba(248, 242, 255, 0.70);
}

.page-home-button {
  position: relative;
  min-width: 132px;
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(168, 85, 247, 0.38);
  border-radius: 999px;
  padding: 0 22px;
  background:
    radial-gradient(circle at 22% 0%, rgba(168, 85, 247, 0.18), transparent 58%),
    rgba(255, 255, 255, 0.025);
  color: #ffffff;
  font-size: 14px;
  font-weight: 850;
  letter-spacing: -0.015em;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    0 14px 34px rgba(139, 92, 255, 0.12);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.page-home-button::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: linear-gradient(115deg, transparent 0 34%, rgba(255, 255, 255, 0.26), transparent 58% 100%);
  opacity: 0;
  transform: translateX(-120%);
  transition: opacity 220ms ease, transform 520ms ease;
}

.page-home-button:hover,
.page-home-button:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(69, 216, 255, 0.46);
  background:
    radial-gradient(circle at 50% 0%, rgba(69, 216, 255, 0.13), transparent 60%),
    rgba(90, 240, 185, 0.045);
  box-shadow:
    0 18px 42px rgba(69, 216, 255, 0.10),
    inset 0 0 0 1px rgba(90, 240, 185, 0.12);
}

.page-home-button:hover::before,
.page-home-button:focus-visible::before {
  opacity: 1;
  transform: translateX(120%);
}

.pay-page .payment-hub,
.cabinet-layout {
  border: 1px solid rgba(168, 85, 247, 0.28);
  border-radius: 34px;
  padding: clamp(16px, 2.4vw, 26px);
  background:
    radial-gradient(circle at 7% 0%, rgba(168, 85, 247, 0.12), transparent 46%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.036), rgba(255, 255, 255, 0.012)),
    rgba(11, 8, 26, 0.54);
  box-shadow:
    0 20px 72px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.pay-page .pricing-area {
  margin-top: 28px;
}

@media (max-width: 760px) {
  .service-hero {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .page-home-button {
    width: 100%;
  }
}

/* Header auth links: keep payment and quick connect purple, not cyan/green. */
.main-nav a.nav-auth-link,
.main-nav a.nav-auth-link[aria-current="page"] {
  background:
    radial-gradient(circle at 30% 0%, rgba(189, 99, 255, 0.16), transparent 58%),
    rgba(168, 85, 247, 0.055) !important;
  box-shadow:
    inset 0 0 0 1px rgba(189, 99, 255, 0.24),
    0 10px 24px rgba(139, 92, 255, 0.08) !important;
}

.main-nav a.nav-auth-link::after,
.main-nav a.nav-auth-link[aria-current="page"]::after {
  background: linear-gradient(90deg, #bd63ff 0%, #8b5cf6 52%, #d946ef 100%) !important;
  box-shadow: 0 0 16px rgba(189, 99, 255, 0.32) !important;
}

.main-nav a.nav-auth-link:hover,
.main-nav a.nav-auth-link:focus-visible,
.main-nav a.nav-auth-link[aria-current="page"]:hover,
.main-nav a.nav-auth-link[aria-current="page"]:focus-visible {
  background:
    radial-gradient(circle at 50% 0%, rgba(189, 99, 255, 0.22), transparent 62%),
    rgba(168, 85, 247, 0.11) !important;
  box-shadow:
    inset 0 0 0 1px rgba(189, 99, 255, 0.34),
    0 12px 30px rgba(139, 92, 255, 0.14) !important;
}

/* One nav language: every header menu item uses the same purple capsule. */
.main-nav a,
.main-nav button,
.main-nav a.nav-auth-link,
.main-nav a[aria-current="page"],
.main-nav a.nav-auth-link[aria-current="page"] {
  min-height: 42px !important;
  border: 1px solid rgba(189, 99, 255, 0.26) !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 28% 0%, rgba(189, 99, 255, 0.15), transparent 58%),
    rgba(168, 85, 247, 0.052) !important;
  color: rgba(248, 242, 255, 0.88) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    0 10px 24px rgba(139, 92, 255, 0.07) !important;
}

.main-nav a::after,
.main-nav button::after,
.main-nav a.nav-auth-link::after,
.main-nav a[aria-current="page"]::after,
.main-nav a.nav-auth-link[aria-current="page"]::after {
  right: 18px !important;
  left: 18px !important;
  background: linear-gradient(90deg, #bd63ff 0%, #8b5cf6 52%, #d946ef 100%) !important;
  box-shadow: 0 0 16px rgba(189, 99, 255, 0.32) !important;
}

.main-nav a:hover,
.main-nav a:focus-visible,
.main-nav button:hover,
.main-nav button:focus-visible,
.main-nav a[aria-current="page"],
.main-nav a.nav-auth-link[aria-current="page"] {
  transform: translateY(-1px);
  color: #ffffff !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(189, 99, 255, 0.24), transparent 62%),
    rgba(168, 85, 247, 0.12) !important;
  border-color: rgba(189, 99, 255, 0.42) !important;
  box-shadow:
    inset 0 0 0 1px rgba(189, 99, 255, 0.12),
    0 12px 30px rgba(139, 92, 255, 0.14) !important;
}

.main-nav a:hover::after,
.main-nav a:focus-visible::after,
.main-nav button:hover::after,
.main-nav button:focus-visible::after,
.main-nav a[aria-current="page"]::after,
.main-nav a.nav-auth-link[aria-current="page"]::after {
  opacity: 1 !important;
  transform: translateY(0) scaleX(1) !important;
}

/* Calm pass: keep the glass capsules, remove the bright underline strips. */
.main-nav a::after,
.main-nav button::after,
.main-nav a.nav-auth-link::after,
.main-nav a[aria-current="page"]::after,
.main-nav a.nav-auth-link[aria-current="page"]::after,
.header-account::after,
.toast::after {
  display: none !important;
}

.main-nav a,
.main-nav button,
.main-nav a.nav-auth-link,
.main-nav a[aria-current="page"],
.main-nav a.nav-auth-link[aria-current="page"],
.header-account,
.header-logout {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.024),
    0 8px 20px rgba(139, 92, 255, 0.06) !important;
}

.clean-page-intro {
  display: block !important;
  max-width: 920px;
  margin: 0 0 clamp(28px, 4vw, 42px) !important;
}

.clean-page-intro h1 {
  margin: 0 0 22px !important;
  background: linear-gradient(92deg, #ffffff 0%, #f1e8ff 35%, #bd63ff 68%, #6e83ff 100%);
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.clean-page-intro .lead {
  max-width: 760px;
  margin: 0;
}

.plan-actions {
  position: absolute;
  right: 24px;
  bottom: 24px;
  left: 24px;
  z-index: 2;
  display: grid;
  gap: 10px;
}

.plan-actions a,
.plan-more {
  position: relative !important;
  inset: auto !important;
  display: inline-flex;
  min-height: 48px;
  width: 100%;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(189, 99, 255, 0.34);
  border-radius: 16px;
  padding: 0 18px;
  background:
    radial-gradient(circle at 30% 0%, rgba(189, 99, 255, 0.12), transparent 58%),
    rgba(255, 255, 255, 0.025);
  color: #ffffff;
  font-family: "Aptos Display", "Segoe UI", "Trebuchet MS", sans-serif;
  font-size: 15px;
  font-weight: 850;
  letter-spacing: -0.018em;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.plan-more {
  min-height: 42px;
  background:
    radial-gradient(circle at 30% 0%, rgba(168, 85, 247, 0.10), transparent 58%),
    rgba(255, 255, 255, 0.018);
  color: rgba(248, 242, 255, 0.78);
}

.plan-actions a:hover,
.plan-actions a:focus-visible,
.plan-more:hover,
.plan-more:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(189, 99, 255, 0.52);
  background:
    radial-gradient(circle at 50% 0%, rgba(189, 99, 255, 0.17), transparent 62%),
    rgba(168, 85, 247, 0.07);
  box-shadow:
    inset 0 0 0 1px rgba(189, 99, 255, 0.10),
    0 12px 28px rgba(139, 92, 255, 0.11);
}

.plan-card.is-selected {
  outline: 1px solid rgba(189, 99, 255, 0.58) !important;
  outline-offset: 4px;
  box-shadow:
    0 26px 82px rgba(0, 0, 0, 0.34),
    0 0 36px rgba(168, 85, 247, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.plan-modal {
  max-width: 720px;
}

.plan-modal-kicker {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  margin-bottom: 18px;
  border: 1px solid rgba(189, 99, 255, 0.34);
  border-radius: 999px;
  padding: 0 14px;
  background: rgba(168, 85, 247, 0.075);
  color: rgba(248, 242, 255, 0.82);
  font-size: 13px;
  font-weight: 850;
}

.plan-modal-list {
  display: grid;
  gap: 12px;
  margin: 22px 0 26px;
  padding: 0;
  list-style: none;
}

.plan-modal-list li {
  position: relative;
  border: 1px solid rgba(189, 99, 255, 0.22);
  border-radius: 18px;
  padding: 14px 16px 14px 42px;
  background: rgba(255, 255, 255, 0.025);
  color: rgba(248, 242, 255, 0.76);
  line-height: 1.5;
}

.plan-modal-list li::before {
  position: absolute;
  top: 18px;
  left: 18px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--purple);
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.35);
  content: "";
}

.plan-modal-actions {
  display: flex;
}

.plan-modal-actions .modal-submit {
  width: 100%;
}

.toast {
  min-width: min(420px, calc(100vw - 32px));
  min-height: 58px;
  padding: 16px 24px;
  border-color: rgba(189, 99, 255, 0.32);
  background:
    radial-gradient(circle at 18% 0%, rgba(189, 99, 255, 0.16), transparent 58%),
    rgba(9, 6, 23, 0.90);
  box-shadow:
    0 18px 54px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.header-logout:hover,
.header-logout:focus-visible {
  border-color: rgba(189, 99, 255, 0.38);
  background:
    radial-gradient(circle at 50% 0%, rgba(189, 99, 255, 0.12), transparent 62%),
    rgba(168, 85, 247, 0.055);
  box-shadow:
    inset 0 0 0 1px rgba(189, 99, 255, 0.08),
    0 10px 24px rgba(139, 92, 255, 0.08) !important;
}

/* Compact shared controls: no oversized cyan islands, just one calm glass style. */
[hidden] {
  display: none !important;
}

.wide-button,
.connect-card button,
.connect-card a,
.device-list button,
.checkout-actions button,
.checkout-links a,
.checkout-links button,
.modal-extra a,
.modal-extra button,
.plan-actions a,
.plan-more,
.period {
  min-height: 44px !important;
  border: 1px solid rgba(189, 99, 255, 0.34) !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 24% 0%, rgba(189, 99, 255, 0.13), transparent 58%),
    rgba(255, 255, 255, 0.026) !important;
  color: rgba(248, 242, 255, 0.90) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.024),
    0 10px 24px rgba(139, 92, 255, 0.07) !important;
  font-family: "Aptos Display", "Segoe UI", "Trebuchet MS", sans-serif !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  letter-spacing: -0.018em !important;
  text-transform: none !important;
}

.wide-button:hover,
.wide-button:focus-visible,
.connect-card button:hover,
.connect-card button:focus-visible,
.connect-card a:hover,
.connect-card a:focus-visible,
.device-list button:hover,
.device-list button:focus-visible,
.checkout-actions button:hover,
.checkout-actions button:focus-visible,
.checkout-links a:hover,
.checkout-links a:focus-visible,
.checkout-links button:hover,
.checkout-links button:focus-visible,
.modal-extra a:hover,
.modal-extra a:focus-visible,
.modal-extra button:hover,
.modal-extra button:focus-visible,
.plan-actions a:hover,
.plan-actions a:focus-visible,
.plan-more:hover,
.plan-more:focus-visible,
.period:hover,
.period:focus-visible,
.period.is-active {
  transform: translateY(-1px) !important;
  border-color: rgba(189, 99, 255, 0.52) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(189, 99, 255, 0.20), transparent 62%),
    rgba(168, 85, 247, 0.07) !important;
  box-shadow:
    inset 0 0 0 1px rgba(189, 99, 255, 0.10),
    0 12px 28px rgba(139, 92, 255, 0.10) !important;
}

.pay-fallback {
  border-color: rgba(189, 99, 255, 0.34) !important;
  background:
    radial-gradient(circle at 24% 0%, rgba(189, 99, 255, 0.13), transparent 58%),
    rgba(255, 255, 255, 0.026) !important;
}

.profile-card .wide-button {
  margin-top: 12px;
}

.connect-card .sub-link-preview {
  min-height: 56px;
  border-color: rgba(189, 99, 255, 0.24);
  background:
    radial-gradient(circle at 24% 0%, rgba(189, 99, 255, 0.10), transparent 58%),
    rgba(255, 255, 255, 0.022);
}

.toast {
  min-width: auto !important;
  min-height: 44px !important;
  max-width: min(420px, calc(100vw - 32px));
  padding: 11px 18px !important;
  border-color: rgba(189, 99, 255, 0.28) !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(189, 99, 255, 0.12), transparent 58%),
    rgba(9, 6, 23, 0.90) !important;
  color: rgba(248, 242, 255, 0.92) !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  box-shadow:
    0 14px 38px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

body.modal-open .toast {
  display: none !important;
}

.header-logout {
  min-width: 78px !important;
  min-height: 42px !important;
  border-color: rgba(189, 99, 255, 0.30) !important;
  background:
    radial-gradient(circle at 24% 0%, rgba(189, 99, 255, 0.11), transparent 58%),
    rgba(255, 255, 255, 0.022) !important;
}

.is-guest-session [data-profile-status] {
  display: none !important;
}

.is-guest-session .profile-card [data-profile-email] {
  color: #ffffff;
  font-size: 18px;
  letter-spacing: -0.02em;
}

.is-guest-session .profile-card [data-profile-note] {
  max-width: 230px;
}

.try-access {
  margin-top: 18px !important;
}

.is-guest-session .sub-link-preview {
  color: rgba(248, 242, 255, 0.64);
  font-size: 18px;
}

/* Final access-page pass: real device connect flow, cleaner status block, and one full-width connect card. */
.status-card,
.device-list {
  grid-column: span 1 !important;
}

.connect-card {
  grid-column: 1 / -1 !important;
}

.connect-note {
  margin: 14px 0 0;
  color: rgba(248, 242, 255, 0.70);
  line-height: 1.55;
}

.connect-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.install-panel {
  margin-top: 18px;
  border: 1px solid rgba(69, 216, 255, 0.32);
  border-radius: 28px;
  padding: 20px;
  background:
    radial-gradient(circle at 13% 0%, rgba(69, 216, 255, 0.20), transparent 48%),
    radial-gradient(circle at 90% 8%, rgba(189, 99, 255, 0.20), transparent 46%),
    linear-gradient(145deg, rgba(7, 30, 44, 0.78), rgba(25, 17, 48, 0.76));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 24px 70px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(189, 99, 255, 0.10);
}

.install-panel-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
}

.install-panel-head b,
.install-step b {
  display: block;
  margin-bottom: 6px;
  font-size: 18px;
  letter-spacing: -0.02em;
}

.install-panel-head small,
.install-step small {
  display: block;
  color: rgba(248, 242, 255, 0.64);
  line-height: 1.5;
}

.install-os-pills,
.install-app-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.install-app-pills {
  margin-top: 14px;
}

.install-pill {
  display: inline-flex;
  gap: 9px;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(189, 99, 255, 0.26);
  border-radius: 999px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.026);
  color: rgba(248, 242, 255, 0.82);
  font-size: 13px;
  font-weight: 850;
  letter-spacing: -0.015em;
}

.install-pill.is-active {
  border-color: rgba(90, 240, 185, 0.46);
  background:
    radial-gradient(circle at 32% 0%, rgba(90, 240, 185, 0.14), transparent 58%),
    rgba(69, 216, 255, 0.045);
  color: #fff;
  box-shadow:
    inset 0 0 0 1px rgba(90, 240, 185, 0.12),
    0 10px 24px rgba(69, 216, 255, 0.09);
}

.install-pill-app {
  min-height: 54px;
  padding: 6px 16px 6px 8px;
  border-radius: 18px;
}

.install-pill-icon,
.install-app-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
}

.install-pill-icon {
  width: 22px;
  height: 22px;
  color: var(--cyan, #38d8ff);
}

.install-pill-icon svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.7;
}

.install-app-icon {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(69, 216, 255, 0.28);
  border-radius: 14px;
  background:
    radial-gradient(circle at 30% 10%, rgba(69, 216, 255, 0.22), transparent 52%),
    rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.install-app-icon img {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  object-fit: cover;
}

.install-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.install-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
  border: 1px solid rgba(189, 99, 255, 0.18);
  border-radius: 20px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.022);
}

.install-step > span {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid rgba(69, 216, 255, 0.58);
  border-radius: 50%;
  color: var(--cyan, #38d8ff);
  font-size: 13px;
  font-weight: 950;
  background: rgba(6, 22, 34, 0.78);
  box-shadow:
    0 0 22px rgba(69, 216, 255, 0.20),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.install-step > span svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.install-step a,
.install-step button {
  grid-column: 1 / -1;
  margin-top: 2px;
}

.install-step-wide {
  grid-column: 1 / -1;
}

.status-card {
  text-align: center;
  align-content: center;
  justify-items: center;
}

.status-card [data-cabinet-status] {
  font-size: clamp(30px, 4.8vw, 54px);
  line-height: 0.95;
}

.is-guest-session .status-card {
  text-align: left;
  align-content: start;
  justify-items: start;
}

.is-guest-session .status-card [data-cabinet-status] {
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.raw-qr-modal {
  text-align: center;
}

.raw-qr-frame {
  display: grid;
  place-items: center;
  width: min(100%, 360px);
  margin: 18px auto;
  border: 1px solid rgba(69, 216, 255, 0.34);
  border-radius: 28px;
  padding: 16px;
  background:
    radial-gradient(circle at 20% 0%, rgba(69, 216, 255, 0.18), transparent 52%),
    rgba(5, 10, 22, 0.84);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.30);
}

.raw-qr-frame img {
  width: min(100%, 320px);
  height: auto;
  border-radius: 18px;
}

@media (max-width: 980px) {
  .connect-actions,
  .install-steps {
    grid-template-columns: 1fr;
  }

  .install-panel-head {
    grid-template-columns: 1fr;
  }
}

/* Final polish pass: stronger access CTA, shared footer, and service-page actions. */
.site-footer {
  width: min(100%, 1220px);
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin: 52px auto 18px;
  padding: 0 18px;
  min-height: 58px;
}

.service-hero-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 10px;
}

.service-hero-actions .page-home-button {
  min-width: 248px;
}

.cabinet-section .service-hero {
  margin-bottom: 28px;
}

.footer-copy {
  text-align: center;
}

@media (max-width: 760px) {
  .site-footer {
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 12px;
  }

  .footer-offer-link,
  .footer-support-link,
  .footer-copy {
    justify-self: center;
  }

  .hero-actions .start-button,
  .hero-actions .cta-main,
  .service-hero-actions,
  .service-hero-actions .page-home-button {
    width: 100%;
  }

  .service-hero-actions {
    align-items: stretch;
  }
}

/* Release polish: keep the shared footer visible and comfortable above the cookie notice. */
.site-shell {
  padding-bottom: max(32px, env(safe-area-inset-bottom));
}

.site-footer {
  position: relative;
  z-index: 4;
  margin-bottom: clamp(84px, 9vw, 118px);
  border: 1px solid rgba(90, 240, 185, 0.16);
  border-radius: 999px;
  background:
    radial-gradient(circle at 12% 0%, rgba(90, 240, 185, 0.16), transparent 46%),
    linear-gradient(135deg, rgba(10, 22, 28, 0.74), rgba(15, 18, 31, 0.66));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 54px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(18px);
}

.footer-link {
  min-height: 42px;
}

.footer-copy {
  margin: 0;
}

@media (max-width: 760px) {
  .site-footer {
    border-radius: 28px;
    margin-top: 34px;
    margin-bottom: 124px;
  }
}

/* Mobile containment: release pages must never leak outside the viewport. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.site-shell,
.site-shell > main,
.site-header,
.service-hero,
.cabinet-section,
.dash-card,
.connect-card,
.install-panel,
.cookie-banner,
.site-footer {
  max-width: 100%;
}

@media (max-width: 760px) {
  .site-shell {
    width: 100%;
    padding-inline: clamp(10px, 3.4vw, 14px);
    overflow-x: hidden;
  }

  .site-header {
    width: 100%;
    margin-inline: auto;
    padding: 12px;
    border-radius: 28px;
    overflow: hidden;
  }

  .site-header .brand {
    min-width: 0;
  }

  .site-header .brand b,
  .main-nav a,
  .main-nav button,
  .service-hero,
  .service-hero .lead,
  .dash-card,
  .connect-card,
  .sub-link-preview,
  .install-panel,
  .install-step,
  .footer-copy,
  .cookie-banner {
    overflow-wrap: anywhere;
  }

  .menu-button {
    max-width: 112px;
    justify-self: end;
  }

  .main-nav {
    width: 100%;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .main-nav a,
  .main-nav button {
    min-width: 0;
    padding-inline: 10px;
  }

  .service-hero {
    width: 100%;
    padding-inline: clamp(24px, 7vw, 32px);
  }

  .service-hero h1 {
    font-size: clamp(58px, 16vw, 76px);
    line-height: 0.94;
  }

  .cabinet-grid,
  .plan-grid,
  .checkout-grid,
  .install-steps {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .connect-card,
  .dash-card {
    min-width: 0;
  }

  .cookie-banner {
    left: 12px;
    right: 12px;
    width: auto;
    max-width: calc(100vw - 24px);
  }
}

/* Final release pass: no footer, calmer payment hero, fresh tariff cards. */
.site-footer {
  display: none !important;
}

.pay-page .service-hero {
  grid-template-columns: minmax(0, 1fr);
  min-height: auto;
  padding: clamp(28px, 4.4vw, 52px);
}

.pay-page .service-hero > div:first-child {
  max-width: 860px;
}

.pay-page .service-hero h1 {
  margin-bottom: 16px;
}

.pay-page .service-hero .lead {
  max-width: 780px;
}

.pay-page .pricing-area {
  margin-top: clamp(24px, 4vw, 38px);
}

.pay-page .pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: clamp(14px, 2vw, 22px);
  align-items: stretch;
}

.pay-page .plan-card {
  position: relative;
  display: flex;
  min-height: 0;
  overflow: hidden;
  flex-direction: column;
  border: 1px solid rgba(189, 99, 255, 0.24);
  border-radius: 30px;
  padding: clamp(22px, 2.5vw, 30px);
  background:
    radial-gradient(circle at 16% 0%, rgba(189, 99, 255, 0.20), transparent 48%),
    radial-gradient(circle at 96% 12%, rgba(69, 216, 255, 0.12), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.018)),
    rgba(9, 8, 24, 0.78);
  box-shadow:
    0 22px 70px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}

.pay-page .plan-card::before {
  inset: auto -54px -74px auto;
  width: 190px;
  height: 190px;
  background: radial-gradient(circle, rgba(189, 99, 255, 0.20), transparent 64%);
  pointer-events: none;
}

.pay-page .plan-card::after {
  position: relative;
  order: -1;
  align-self: flex-start;
  margin-bottom: 20px;
  border: 1px solid rgba(189, 99, 255, 0.28);
  border-radius: 999px;
  padding: 7px 11px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(248, 242, 255, 0.76);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  content: "Личный";
}

.pay-page .plan-card[data-plan-card="PLUS"]::after {
  color: #ffffff;
  content: "Рекомендуем";
}

.pay-page .plan-card[data-plan-card="ULTRA"]::after {
  content: "Полный";
}

.pay-page .plan-featured {
  border-color: rgba(90, 240, 185, 0.34);
  background:
    radial-gradient(circle at 18% 0%, rgba(90, 240, 185, 0.18), transparent 48%),
    radial-gradient(circle at 100% 6%, rgba(189, 99, 255, 0.20), transparent 44%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.066), rgba(255, 255, 255, 0.022)),
    rgba(9, 8, 24, 0.82);
  box-shadow:
    0 28px 86px rgba(0, 0, 0, 0.30),
    0 0 0 1px rgba(90, 240, 185, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.pay-page .plan-card h3 {
  margin: 0 0 8px;
  color: #ffffff;
  font-size: clamp(28px, 3.1vw, 40px);
  letter-spacing: -0.06em;
}

.pay-page .price {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin: 0 0 22px;
  color: #ffffff;
  font-size: clamp(36px, 3.7vw, 52px);
  line-height: 0.95;
}

.pay-page .price small {
  margin-bottom: 5px;
  color: rgba(248, 242, 255, 0.58);
  font-size: 15px;
  letter-spacing: -0.01em;
}

.pay-page .plan-card ul {
  display: grid;
  gap: 11px;
  margin: 0 0 24px;
  color: rgba(248, 242, 255, 0.72);
  line-height: 1.45;
}

.pay-page .plan-card li {
  align-items: flex-start;
}

.pay-page .plan-card li::before {
  color: #5af0b9;
  text-shadow: 0 0 16px rgba(90, 240, 185, 0.35);
}

.pay-page .plan-actions {
  position: relative !important;
  inset: auto !important;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 10px;
  margin-top: auto;
}

.pay-page .plan-actions a,
.pay-page .plan-more {
  min-height: 48px !important;
  border-radius: 16px !important;
  white-space: nowrap;
}

.pay-page .plan-actions a {
  background:
    radial-gradient(circle at 40% 0%, rgba(90, 240, 185, 0.18), transparent 62%),
    linear-gradient(135deg, rgba(90, 240, 185, 0.18), rgba(189, 99, 255, 0.15)) !important;
}

.pay-page .plan-more {
  color: rgba(248, 242, 255, 0.78) !important;
}

.plan-modal {
  max-width: min(760px, calc(100vw - 28px));
}

.plan-modal .modal-lead {
  max-width: 620px;
}

@media (max-width: 1040px) {
  .pay-page .pricing-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .pay-page .plan-card {
    min-height: 0;
  }
}

@media (max-width: 760px) {
  .pay-page .service-hero {
    padding: clamp(24px, 7vw, 32px);
  }

  .pay-page .plan-actions {
    grid-template-columns: 1fr;
  }

  .pay-page .plan-actions a,
  .pay-page .plan-more {
    white-space: normal;
  }
}

/* Premium checkout pass: tariffs first, checkout second, no cheap overlap. */
.pay-page {
  gap: clamp(20px, 3vw, 34px);
  padding-top: clamp(54px, 7vw, 86px);
}

.pay-page .service-hero {
  position: relative;
  overflow: hidden;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.42fr);
  gap: clamp(22px, 4vw, 54px);
  align-items: end;
  border-color: rgba(189, 99, 255, 0.22);
  border-radius: 38px;
  padding: clamp(32px, 5vw, 64px);
  background:
    radial-gradient(circle at 8% 0%, rgba(189, 99, 255, 0.24), transparent 42%),
    radial-gradient(circle at 100% 0%, rgba(69, 216, 255, 0.15), transparent 38%),
    linear-gradient(135deg, rgba(26, 17, 45, 0.92), rgba(8, 19, 30, 0.82));
}

.pay-page .service-hero::before {
  position: absolute;
  right: clamp(18px, 6vw, 78px);
  bottom: -120px;
  width: clamp(220px, 30vw, 390px);
  height: clamp(220px, 30vw, 390px);
  border: 1px solid rgba(90, 240, 185, 0.18);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(90, 240, 185, 0.10), transparent 58%),
    conic-gradient(from 120deg, transparent, rgba(189, 99, 255, 0.32), transparent, rgba(69, 216, 255, 0.22), transparent);
  filter: blur(0.2px);
  opacity: 0.76;
  content: "";
  animation: orbit-spin 18s linear infinite;
}

.pay-page .service-hero > * {
  position: relative;
  z-index: 1;
}

.pay-page .service-hero h1 {
  max-width: 760px;
  margin-bottom: 18px;
  font-size: clamp(56px, 8vw, 110px);
}

.pay-page .service-hero .lead {
  max-width: 760px;
  color: rgba(248, 242, 255, 0.72);
  font-size: clamp(17px, 1.7vw, 22px);
}

.pay-hero-proof {
  display: grid;
  gap: 10px;
}

.pay-ru-proof {
  align-self: stretch;
  align-content: center;
}

.pay-hero-proof span {
  display: grid;
  gap: 10px;
  min-height: 154px;
  border: 1px solid rgba(90, 240, 185, 0.24);
  border-radius: 26px;
  padding: clamp(18px, 2.4vw, 26px);
  background:
    radial-gradient(circle at 15% 0%, rgba(90, 240, 185, 0.18), transparent 54%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(69, 216, 255, 0.035)),
    rgba(255, 255, 255, 0.035);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 22px 52px rgba(0, 0, 0, 0.18);
}

.pay-hero-proof b {
  color: #ffffff;
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.pay-hero-proof small {
  max-width: 34ch;
  color: rgba(248, 242, 255, 0.70);
  font-size: 15px;
  line-height: 1.45;
}

.pricing-head {
  display: grid;
  grid-template-columns: minmax(160px, 0.24fr) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 34px);
  align-items: end;
  margin-bottom: clamp(18px, 3vw, 28px);
}

.pricing-head > span {
  display: inline-flex;
  width: fit-content;
  min-height: 38px;
  align-items: center;
  border: 1px solid rgba(90, 240, 185, 0.22);
  border-radius: 999px;
  padding: 0 14px;
  background: rgba(90, 240, 185, 0.052);
  color: rgba(248, 242, 255, 0.76);
  font-size: 13px;
  font-weight: 900;
}

.pricing-head h2 {
  max-width: 820px;
  margin-bottom: 12px;
  font-size: clamp(34px, 5.2vw, 72px);
}

.pricing-head p {
  max-width: 760px;
  margin: 0;
  color: rgba(248, 242, 255, 0.64);
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.55;
}

.pay-page .pricing-area {
  margin-top: 0;
}

.pay-page .pricing-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 20px);
}

.pay-page .plan-card {
  min-width: 0;
  min-height: 510px;
  border-radius: 34px;
  padding: clamp(22px, 2.3vw, 30px);
}

.pay-page .plan-card:not(.is-selected)::after {
  display: none;
}

.pay-page .plan-card.is-selected {
  overflow: visible;
  border-color: rgba(90, 240, 185, 0.92) !important;
  outline: 3px solid rgba(7, 5, 18, 0.98) !important;
  outline-offset: 4px !important;
  box-shadow:
    0 0 0 7px rgba(90, 240, 185, 0.72),
    0 0 0 10px rgba(189, 99, 255, 0.34),
    0 34px 92px rgba(0, 0, 0, 0.44),
    0 0 52px rgba(90, 240, 185, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.09) !important;
}

.pay-page .plan-card.is-selected::after {
  display: none !important;
}

.pay-page .plan-card.is-selected [data-plan-select] {
  border-color: rgba(90, 240, 185, 0.72);
  background:
    linear-gradient(135deg, rgba(90, 240, 185, 0.28), rgba(69, 216, 255, 0.16)),
    rgba(90, 240, 185, 0.08);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 14px 34px rgba(90, 240, 185, 0.14);
}

.plan-topline {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 22px;
}

.plan-topline span,
.plan-topline small {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  border-radius: 999px;
}

.plan-topline span {
  border: 1px solid rgba(90, 240, 185, 0.24);
  padding: 8px 11px;
  background: rgba(90, 240, 185, 0.06);
  color: #ffffff;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.plan-topline small {
  overflow: hidden;
  color: rgba(248, 242, 255, 0.54);
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pay-page .plan-featured .plan-topline span {
  border-color: rgba(255, 255, 255, 0.22);
  background:
    radial-gradient(circle at 30% 0%, rgba(90, 240, 185, 0.18), transparent 60%),
    rgba(90, 240, 185, 0.08);
  box-shadow: 0 0 26px rgba(90, 240, 185, 0.12);
}

.pay-page .plan-card h3,
.pay-page .price,
.plan-short,
.plan-specs,
.plan-features,
.pay-page .plan-actions {
  position: relative;
  z-index: 1;
}

.plan-short {
  min-height: 72px;
  margin: 0 0 18px;
  color: rgba(248, 242, 255, 0.62);
  font-size: 15px;
  line-height: 1.5;
}

.plan-specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 18px;
}

.plan-specs span {
  display: grid;
  min-height: 58px;
  place-items: center;
  border: 1px solid rgba(189, 99, 255, 0.18);
  border-radius: 18px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.026);
  color: rgba(248, 242, 255, 0.86);
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}

.pay-page .plan-card .plan-features {
  gap: 10px;
  margin-bottom: 24px;
  color: rgba(248, 242, 255, 0.68);
  font-size: 14px;
}

.pay-page .plan-actions {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
}

.pay-explain-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.pay-explain-grid article {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(189, 99, 255, 0.18);
  border-radius: 26px;
  padding: 22px;
  background:
    radial-gradient(circle at 8% 0%, rgba(189, 99, 255, 0.14), transparent 54%),
    rgba(255, 255, 255, 0.022);
}

.pay-explain-grid span {
  display: inline-flex;
  margin-bottom: 18px;
  color: rgba(90, 240, 185, 0.74);
  font-size: 13px;
  font-weight: 950;
}

.pay-explain-grid b {
  display: block;
  margin-bottom: 8px;
  color: #ffffff;
  font-size: 20px;
  letter-spacing: -0.035em;
}

.pay-explain-grid p {
  margin: 0;
  color: rgba(248, 242, 255, 0.62);
  line-height: 1.55;
}

.pay-page .payment-hub {
  margin-top: clamp(4px, 1vw, 12px);
}

@media (max-width: 980px) {
  .pay-page .service-hero,
  .pricing-head,
  .pay-explain-grid,
  .pay-page .payment-hub {
    grid-template-columns: minmax(0, 1fr);
  }

  .pay-hero-proof {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pay-page .pricing-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .pay-page .plan-card {
    min-height: 0;
  }

  .plan-short {
    min-height: 0;
  }
}

@media (max-width: 760px) {
  .site-shell {
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: 14px;
  }

  .site-header {
    width: 100% !important;
    max-width: 100% !important;
    margin: 14px auto 0 !important;
    transform: none !important;
  }

  .menu-button {
    max-width: 104px;
    padding-inline: 12px !important;
  }

  .pay-page {
    padding-top: 44px;
  }

  .pay-page .service-hero {
    border-radius: 30px;
    padding: 28px 22px;
  }

  .pay-page .service-hero h1 {
    font-size: clamp(46px, 14vw, 64px);
    letter-spacing: -0.08em;
  }

  .pay-page .service-hero .lead,
  .pricing-head p,
  .pay-explain-grid p {
    font-size: 15px;
  }

  .pay-hero-proof,
  .plan-specs,
  .pay-explain-grid,
  .payment-controls .period-strip,
  .payment-controls .promo-box div {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .pricing-head h2 {
    font-size: clamp(34px, 11vw, 48px);
  }

  .pay-page .plan-card {
    border-radius: 28px;
    padding: 22px;
  }

  .plan-topline {
    align-items: flex-start;
    flex-direction: column;
  }

  .plan-topline small {
    white-space: normal;
  }

  .pay-page .plan-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .pay-page .payment-hub {
    padding: 14px;
  }
}

/* 2026-05-17 polish: one responsive rhythm for the test site. */
h1,
h2,
h3,
.brand b,
.main-nav a,
.main-nav button,
.service-tags b,
.pay-hero-proof b,
.pay-page .plan-card h3,
.pay-page .price,
.pricing-head h2,
.pay-explain-grid b {
  letter-spacing: 0 !important;
}

h1,
.hero-copy h1 {
  font-size: 92px !important;
  line-height: 0.95 !important;
}

h2,
.service-hero h1,
.offer-hero h1 {
  font-size: 68px !important;
  line-height: 0.98 !important;
}

h3,
.pay-page .plan-card h3 {
  font-size: 36px !important;
  line-height: 1.04 !important;
}

.pay-page .price {
  font-size: 48px !important;
}

.main-nav {
  border-radius: 18px !important;
}

.main-nav a,
.main-nav button,
.page-home-button,
.wide-button,
.period,
.checkout-actions button,
.checkout-links a,
.checkout-links button,
.promo-box button,
.pay-page .plan-actions a,
.pay-page .plan-more,
.modal-submit {
  border-radius: 14px !important;
}

.site-header {
  border-radius: 24px !important;
}

.service-hero,
.hero-console,
.pay-page .plan-card,
.payment-hub,
.checkout-panel,
.profile-card,
.dash-card,
.connect-card,
.install-panel,
.modal-card,
.pay-hero-proof span {
  border-radius: 18px !important;
}

.plan-specs span,
.period,
.promo-box input,
.install-step,
.social-orb {
  border-radius: 12px !important;
}

.pay-page .plan-card.is-selected {
  outline: 0 !important;
  box-shadow:
    0 0 0 2px rgba(90, 240, 185, 0.70),
    0 20px 58px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.pay-page .plan-card.is-selected [data-plan-select] {
  background:
    linear-gradient(135deg, rgba(90, 240, 185, 0.26), rgba(69, 216, 255, 0.16)),
    rgba(90, 240, 185, 0.08) !important;
}

.plan-short {
  color: rgba(248, 242, 255, 0.72) !important;
}

/* Subscription cabinet cleanup: compact centered status and payment-only expired CTA. */
.profile-card .status-pill {
  display: flex !important;
  width: fit-content;
  max-width: 100%;
  justify-content: center;
  margin-right: auto !important;
  margin-left: auto !important;
  text-align: center;
}

.status-card {
  min-height: 142px !important;
  text-align: center !important;
  align-content: center !important;
  justify-items: center !important;
}

.status-card span {
  margin-bottom: 10px !important;
}

.status-card [data-cabinet-status] {
  max-width: 100%;
  margin-bottom: 6px !important;
  font-size: clamp(24px, 2.4vw, 32px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.025em !important;
  overflow-wrap: anywhere;
}

.status-card [data-cabinet-status-line] {
  max-width: 100%;
  margin-inline: auto;
}

.pay-page .plan-card .plan-features {
  color: rgba(248, 242, 255, 0.74) !important;
}

.cookie-banner {
  width: min(620px, calc(100vw - 24px)) !important;
  max-width: calc(100vw - 24px) !important;
  grid-template-columns: 34px minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
  border-radius: 18px !important;
  padding: 12px !important;
}

.cookie-mark {
  width: 34px !important;
  height: 34px !important;
}

.cookie-banner b {
  font-size: 14px !important;
}

.cookie-banner p {
  margin: 2px 0 0 !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}

.cookie-actions {
  grid-column: auto !important;
}

.cookie-actions button {
  min-height: 38px !important;
  width: auto !important;
  padding: 0 18px !important;
}

@media (max-width: 980px) {
  .site-header:not(.is-open) .main-nav,
  .site-header:not(.is-open) .header-account-group {
    display: none !important;
  }

  .site-header.is-open .main-nav {
    display: grid !important;
    grid-column: 1 / -1 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    justify-self: stretch !important;
  }

  .site-header.is-open .header-account-group {
    display: flex !important;
    grid-column: 1 / -1 !important;
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 30px !important;
  }

  .hero-copy,
  .hero-copy h1,
  .hero-copy .lead,
  .service-tags {
    width: auto !important;
    max-width: 100% !important;
  }

  .hero-console {
    width: 100% !important;
    transform: none !important;
  }

  h1,
  .hero-copy h1 {
    font-size: 68px !important;
  }

  h2,
  .service-hero h1,
  .offer-hero h1 {
    font-size: 54px !important;
  }
}

@media (max-width: 760px) {
  .site-shell {
    padding-inline: 14px !important;
  }

  .site-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 12px !important;
    padding: 10px !important;
  }

  .brand-mark {
    width: 44px !important;
    height: 44px !important;
  }

  .brand b {
    font-size: 15px !important;
  }

  .menu-button {
    display: grid !important;
    grid-template-columns: 18px auto !important;
    grid-template-rows: repeat(3, 2px) !important;
    column-gap: 8px !important;
    row-gap: 4px !important;
    align-content: center !important;
    min-height: 42px !important;
    max-width: none !important;
    padding: 0 12px !important;
  }

  .menu-button span {
    grid-column: 1 !important;
    width: 18px !important;
    height: 2px !important;
    margin: 0 !important;
  }

  .menu-button span:nth-child(1) { grid-row: 1 !important; }
  .menu-button span:nth-child(2) { grid-row: 2 !important; }
  .menu-button span:nth-child(3) { grid-row: 3 !important; }

  .menu-button b {
    grid-column: 2 !important;
    grid-row: 1 / 4 !important;
    align-self: center !important;
  }

  .site-header.is-open .main-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .main-nav a,
  .main-nav button {
    min-height: 40px !important;
    justify-content: center !important;
    padding: 0 8px !important;
    font-size: 12px !important;
    text-align: center !important;
    white-space: normal !important;
  }

  .nova-hero {
    padding: 36px 0 42px !important;
  }

  h1,
  .hero-copy h1 {
    font-size: 50px !important;
    line-height: 1.02 !important;
  }

  h2,
  .service-hero h1,
  .offer-hero h1 {
    font-size: 44px !important;
    line-height: 1.02 !important;
  }

  h3,
  .pay-page .plan-card h3 {
    font-size: 30px !important;
  }

  .lead {
    font-size: 16px !important;
    line-height: 1.48 !important;
  }

  .service-tags {
    gap: 8px !important;
    margin-bottom: 22px !important;
  }

  .service-tags > span {
    min-height: 38px !important;
    padding: 4px 10px 4px 5px !important;
  }

  .service-tags i {
    width: 28px !important;
    height: 28px !important;
  }

  .service-tags b {
    font-size: 12px !important;
  }

  .hero-console {
    min-height: 430px !important;
    margin-top: 4px !important;
  }

  .shield-core {
    width: 122px !important;
    height: 122px !important;
  }

  .route-card {
    min-width: 118px !important;
    max-width: 128px !important;
    padding: 10px !important;
  }

  .route-fi {
    top: 72px !important;
    left: 14px !important;
  }

  .route-de {
    top: 104px !important;
    right: 12px !important;
  }

  .route-ru {
    right: 14px !important;
    bottom: 112px !important;
  }

  .console-status {
    right: 12px !important;
    bottom: 12px !important;
    left: 12px !important;
  }

  .pay-page {
    padding-top: 32px !important;
  }

  .pay-page .service-hero {
    padding: 24px 18px !important;
  }

  .pay-hero-proof span {
    min-height: 0 !important;
  }

  .plan-topline {
    margin-bottom: 16px !important;
  }

  .plan-topline span {
    font-size: 11px !important;
  }

  .pay-page .price {
    font-size: 42px !important;
  }

  .cookie-banner {
    bottom: 10px !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    padding: 10px !important;
  }

  .cookie-mark {
    width: 30px !important;
    height: 30px !important;
  }

  .cookie-actions {
    grid-column: 2 !important;
  }

  .cookie-actions button {
    min-height: 34px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 380px) {
  .site-header.is-open .main-nav {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  h1,
  .hero-copy h1 {
    font-size: 44px !important;
  }
}

.nova-hero,
.hero-console,
.console-body {
  overflow: hidden !important;
}

[data-reveal] {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition:
    opacity 260ms ease,
    transform 260ms ease !important;
}

.service-hero[data-reveal],
.payment-controls[data-reveal],
.payment-hub [data-reveal],
.cabinet-section [data-reveal],
.offer-hero [data-reveal],
.offer-document [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
}

/* Test-site UX pass: account first, explicit trial activation, payment second. */
.trial-state {
  max-width: 620px;
  margin: 14px 0 0;
  color: rgba(248, 242, 255, 0.66);
  font-size: 15px;
  line-height: 1.55;
}

.trial-hero-button,
.trial-primary {
  border-color: rgba(90, 240, 185, 0.42) !important;
  background:
    radial-gradient(circle at 24% 0%, rgba(90, 240, 185, 0.18), transparent 58%),
    rgba(69, 216, 255, 0.055) !important;
}

[data-activate-trial]:disabled {
  cursor: default;
  opacity: 0.72;
  transform: none !important;
}

.onboarding-section {
  padding-top: 24px;
}

.onboarding-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.onboarding-grid article,
.trial-panel {
  border: 1px solid rgba(168, 85, 247, 0.24);
  border-radius: 18px;
  background:
    radial-gradient(circle at 10% 0%, rgba(189, 99, 255, 0.13), transparent 48%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.014)),
    rgba(13, 10, 31, 0.70);
  box-shadow:
    0 22px 62px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.onboarding-grid article {
  min-height: 230px;
  padding: 22px;
}

.onboarding-grid span,
.trial-panel span {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  border: 1px solid rgba(90, 240, 185, 0.24);
  border-radius: 999px;
  padding: 0 11px;
  color: #75f2c7;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.onboarding-grid b {
  display: block;
  margin: 28px 0 10px;
  color: #ffffff;
  font-size: 22px;
  line-height: 1.08;
}

.onboarding-grid p,
.trial-panel p {
  margin: 0;
  color: rgba(248, 242, 255, 0.66);
  line-height: 1.55;
}

.trial-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.42fr);
  gap: clamp(18px, 3vw, 34px);
  align-items: center;
  margin: 0 0 clamp(18px, 3vw, 28px);
  padding: clamp(22px, 3vw, 34px);
}

.trial-panel h2 {
  max-width: 720px;
  margin: 14px 0 12px;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.04;
}

.trial-panel-actions {
  display: grid;
  gap: 10px;
}

.trial-panel-actions .page-home-button {
  width: 100%;
}

.pay-page .trial-panel {
  grid-template-columns: minmax(0, 1fr) minmax(240px, 0.34fr);
  gap: clamp(14px, 2.4vw, 28px);
  margin-bottom: clamp(16px, 2vw, 22px);
  padding: clamp(18px, 2.3vw, 26px);
}

.pay-page .trial-panel span {
  min-height: 28px;
  font-size: 11px;
}

.pay-page .trial-panel h2 {
  max-width: 640px;
  margin: 10px 0 8px;
  font-size: clamp(28px, 2.8vw, 38px);
  line-height: 1.03;
}

.pay-page .trial-panel p {
  max-width: 720px;
  font-size: 15px;
  line-height: 1.46;
}

.pay-page .trial-panel-actions {
  gap: 8px;
}

.pay-page .trial-panel-actions .page-home-button {
  min-height: 50px;
  padding: 13px 16px;
  font-size: 14px;
}

.pay-page {
  padding-top: clamp(34px, 4.8vw, 56px);
}

.pay-page .service-hero {
  gap: clamp(18px, 3vw, 40px);
  margin-bottom: clamp(22px, 2.8vw, 32px);
  padding: clamp(26px, 3.8vw, 46px);
}

.pay-page .service-hero h1 {
  margin-bottom: 14px;
  font-size: clamp(52px, 6.8vw, 86px);
}

.pay-page .service-hero .lead {
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.46;
}

.pay-page .pay-hero-proof span {
  min-height: 132px;
  padding: clamp(16px, 2vw, 22px);
}

.pay-page .pay-hero-proof b {
  font-size: clamp(25px, 2.3vw, 32px);
  line-height: 1.02;
}

.pay-page .pay-hero-proof small {
  font-size: 14px;
  line-height: 1.45;
}

@media (max-width: 760px) {
  .modal-backdrop {
    padding: 12px !important;
  }

  .modal-card {
    max-height: calc(100vh - 24px) !important;
    border-radius: 18px !important;
    padding: 22px 18px !important;
  }

  .modal-card h2 {
    max-width: calc(100% - 48px);
    margin-bottom: 10px !important;
    font-size: 34px !important;
    line-height: 1.05 !important;
  }

  .modal-lead {
    margin-bottom: 16px !important;
    font-size: 15px !important;
    line-height: 1.48 !important;
  }

  .register-modal-form,
  .login-modal-form {
    gap: 10px !important;
  }

  .register-modal-form label,
  .login-modal-form label {
    gap: 6px !important;
  }

  .register-modal-form input,
  .login-modal-form input,
  .code-row button,
  .modal-submit {
    min-height: 46px !important;
    border-radius: 12px !important;
  }

  .code-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .offer-consent {
    padding: 12px !important;
    font-size: 13px !important;
  }

  .onboarding-section {
    padding-top: 12px;
  }

  .onboarding-grid,
  .trial-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .onboarding-grid article {
    min-height: 0;
    padding: 20px;
  }

  .onboarding-grid b {
    margin-top: 18px;
  }

  .trial-panel {
    padding: 22px 18px;
  }

  .trial-panel h2 {
    font-size: 34px;
  }

  .pay-page .service-hero {
    gap: 14px !important;
    padding: 22px 18px !important;
  }

  .pay-page .service-hero h1 {
    font-size: 38px !important;
    line-height: 1.04 !important;
  }

  .pay-page .service-hero .lead {
    font-size: 15px !important;
    line-height: 1.44 !important;
  }

  .pay-page .pay-hero-proof span {
    min-height: 0 !important;
    padding: 14px !important;
  }

  .pay-page .pay-hero-proof b {
    font-size: 20px !important;
    line-height: 1.08 !important;
  }

  .pay-page .pay-hero-proof small {
    display: none !important;
  }

  .pay-page .trial-panel {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px;
    padding: 18px !important;
  }

  .pay-page .trial-panel span {
    width: fit-content;
    max-width: 100%;
  }

  .pay-page .trial-panel h2 {
    margin: 10px 0 8px;
    max-width: 100%;
    font-size: 27px !important;
    line-height: 1.04;
  }

  .pay-page .trial-panel p {
    max-width: 100%;
    font-size: 14px;
    line-height: 1.42;
  }

  .hero-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
  }

  .hero-actions .page-home-button,
  .hero-actions .start-button {
    width: 100%;
  }

  .service-hero[data-reveal],
  .payment-controls[data-reveal],
  .payment-hub [data-reveal],
  .cabinet-section [data-reveal],
  .offer-hero [data-reveal],
  .offer-document [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  .offer-page,
  .offer-document,
  .offer-document article {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .offer-document article {
    padding: 18px !important;
  }

  .offer-document h2 {
    font-size: 22px !important;
    line-height: 1.16 !important;
  }

  .offer-document p {
    max-width: 100% !important;
    font-size: 15px !important;
    line-height: 1.58 !important;
    overflow-wrap: anywhere !important;
  }
}

/* Final mobile production pass: keep hero words intact while long URLs still wrap. */
@media (max-width: 760px) {
  .service-hero h1,
  .offer-hero h1,
  .hero-copy h1 {
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: manual !important;
    text-wrap: balance;
  }

  .cabinet-section .service-hero h1 {
    max-width: 100%;
    font-size: clamp(38px, 10.7vw, 43px) !important;
    line-height: 1.05 !important;
  }

  .cabinet-section .service-hero {
    padding: 26px 26px 30px !important;
  }

  .cabinet-section .service-hero .lead {
    overflow-wrap: normal !important;
  }

  .connect-card .sub-link-preview,
  .install-step small,
  .offer-document p {
    overflow-wrap: anywhere !important;
  }
}

@media (max-width: 380px) {
  .cabinet-section .service-hero h1 {
    font-size: 38px !important;
  }
}

/* CDN Relay quick-connect panel: cabinet pattern, test-site palette. */
.connect-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.connect-actions button,
.connect-actions a {
  position: relative;
  overflow: hidden;
  border-color: rgba(69, 216, 255, 0.34) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(69, 216, 255, 0.18), transparent 48%),
    linear-gradient(135deg, rgba(14, 44, 65, 0.82), rgba(49, 31, 92, 0.78)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 14px 34px rgba(0, 0, 0, 0.24) !important;
}

.connect-actions button::before,
.connect-actions a::before {
  content: "";
  width: 18px;
  height: 18px;
  margin-right: 9px;
  flex: 0 0 auto;
  background: currentColor;
  mask: var(--connect-icon);
  -webkit-mask: var(--connect-icon);
}

.connect-actions [data-copy-sub] {
  --connect-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 8h10v12H8zM5 4h10v3H7v9H5z'/%3E%3C/svg%3E");
}

.connect-actions [data-install-toggle] {
  --connect-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 3 4 14h7l-1 7 10-12h-7z'/%3E%3C/svg%3E");
  order: -1;
  grid-column: 1 / -1;
  min-height: 72px;
  justify-content: center;
  font-size: 18px;
  letter-spacing: 0;
  border-color: rgba(90, 240, 185, 0.48) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(90, 240, 185, 0.20), transparent 48%),
    linear-gradient(135deg, rgba(11, 55, 61, 0.92), rgba(63, 39, 118, 0.88)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 18px 42px rgba(69, 216, 255, 0.14),
    0 0 0 1px rgba(90, 240, 185, 0.10) !important;
}

.connect-primary-action {
  width: 100%;
}

.install-panel-actions {
  margin-top: 14px;
}

.connect-actions [data-raw-qr] {
  --connect-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM14 14h2v2h-2zM18 14h2v6h-6v-2h4zM14 18h2v2h-2z'/%3E%3C/svg%3E");
}

.connect-actions [data-connect-import-link] {
  --connect-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 3 4 14h7l-1 7 10-12h-7z'/%3E%3C/svg%3E");
}

.connect-qr-preview {
  display: grid;
  justify-items: center;
  gap: 10px;
  width: min(100%, 320px);
  margin: 18px auto 0;
  padding: 14px;
  border: 1px solid rgba(69, 216, 255, 0.28);
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 0%, rgba(69, 216, 255, 0.14), transparent 58%),
    rgba(255, 255, 255, 0.026);
  text-align: center;
}

.connect-qr-preview span {
  color: #fff;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.connect-qr-preview img {
  width: min(100%, 220px);
  height: auto;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

.connect-qr-preview small {
  max-width: 240px;
  color: rgba(248, 242, 255, 0.66);
  line-height: 1.45;
}

.install-panel-premium .connect-actions-cabinet {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px;
  margin: 18px 0 20px;
}

.install-panel-premium .connect-actions-cabinet button,
.install-panel-premium .connect-actions-cabinet a {
  min-height: 62px;
  justify-content: center;
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}

.install-panel-premium .connect-actions-cabinet [data-connect-import-link] {
  border-color: rgba(90, 240, 185, 0.54) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(90, 240, 185, 0.22), transparent 48%),
    linear-gradient(135deg, rgba(11, 55, 61, 0.94), rgba(74, 44, 136, 0.88)) !important;
}

@media (max-width: 980px) {
  .connect-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .install-panel-premium .connect-actions-cabinet {
    grid-template-columns: 1fr !important;
  }
}

.install-panel-head {
  grid-template-columns: minmax(0, 1fr) !important;
}

.install-os-pills,
.install-app-pills {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  width: 100% !important;
}

.install-app-pills {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.install-pill {
  justify-content: flex-start !important;
  text-align: left !important;
  min-width: 0 !important;
}

.install-pill span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.install-steps {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.install-step {
  min-width: 0 !important;
}

.password-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.password-generate {
  min-height: 42px;
  border: 1px solid rgba(69, 216, 255, 0.32);
  border-radius: 12px;
  padding: 0 12px;
  background: rgba(69, 216, 255, 0.08);
  color: #fff;
  font-weight: 900;
}

@media (max-width: 760px) {
  .install-os-pills,
  .install-app-pills,
  .install-steps,
  .password-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Premium quick-connect: one clear action, modal QR, and app-first setup flow. */
.connect-card-premium {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border-color: rgba(69, 216, 255, 0.38) !important;
  padding: clamp(18px, 2.6vw, 28px) !important;
  background:
    linear-gradient(115deg, rgba(8, 26, 42, 0.92) 0%, rgba(24, 18, 55, 0.88) 48%, rgba(13, 10, 30, 0.94) 100%),
    linear-gradient(90deg, rgba(90, 240, 185, 0.14), rgba(69, 216, 255, 0.12), rgba(240, 44, 255, 0.10));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    0 26px 90px rgba(0, 0, 0, 0.36);
}

.connect-card-premium::before {
  position: absolute;
  inset: 1px;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(90deg, transparent, rgba(69, 216, 255, 0.12), transparent),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 58px);
  opacity: 0.46;
  content: "";
}

.connect-card-premium > * {
  position: relative;
  z-index: 1;
}

.connect-card-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(112px, 18vw, 190px);
  gap: clamp(16px, 2.4vw, 28px);
  align-items: center;
}

.connect-copy > span {
  color: rgba(90, 240, 185, 0.88);
}

.connect-copy > b {
  max-width: 680px;
  margin: 0;
  font-size: clamp(30px, 4.2vw, 58px);
  line-height: 0.96;
  letter-spacing: -0.055em;
}

.connect-card-premium .connect-note {
  max-width: 700px;
  margin-top: 14px;
  color: rgba(248, 242, 255, 0.74);
  font-size: 15px;
}

.connect-signal {
  position: relative;
  display: grid;
  aspect-ratio: 1;
  min-height: 112px;
  place-items: center;
  border: 1px solid rgba(69, 216, 255, 0.28);
  border-radius: 26px;
  background:
    linear-gradient(145deg, rgba(69, 216, 255, 0.12), rgba(124, 60, 255, 0.16)),
    rgba(2, 10, 22, 0.36);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 20px 48px rgba(69, 216, 255, 0.10);
}

.connect-signal i {
  position: absolute;
  inset: 18%;
  border: 1px solid rgba(90, 240, 185, 0.34);
  border-radius: 22px;
  transform: rotate(45deg);
}

.connect-signal i:nth-child(2) {
  inset: 30%;
  border-color: rgba(69, 216, 255, 0.42);
}

.connect-signal i:nth-child(3) {
  inset: 42%;
  border-color: rgba(240, 44, 255, 0.38);
}

.connect-signal strong {
  position: relative;
  font-size: clamp(18px, 2vw, 26px);
  letter-spacing: 0;
  text-shadow: 0 0 22px rgba(69, 216, 255, 0.42);
}

.connect-link-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin-top: 18px;
  border: 1px solid rgba(168, 85, 247, 0.22);
  border-radius: 18px;
  padding: 12px 14px;
  background: rgba(5, 8, 20, 0.34);
}

.connect-link-row small {
  color: rgba(248, 242, 255, 0.58);
  font-weight: 850;
  text-transform: uppercase;
}

.connect-link-row .sub-link-preview {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: rgba(248, 242, 255, 0.88);
  font-size: clamp(14px, 1.5vw, 18px);
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.connect-card-premium .connect-primary-action {
  justify-content: center;
  gap: 12px;
  min-height: 64px;
  margin-top: 18px;
  border: 1px solid rgba(90, 240, 185, 0.38);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(19, 194, 159, 0.88), rgba(69, 216, 255, 0.78) 52%, rgba(124, 60, 255, 0.82));
  color: #fff;
  font-size: clamp(15px, 1.9vw, 19px);
  font-weight: 950;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 18px 44px rgba(69, 216, 255, 0.18);
}

.connect-card-premium .connect-primary-action:hover,
.connect-card-premium .connect-primary-action:focus-visible {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    0 24px 58px rgba(69, 216, 255, 0.24);
}

.connect-button-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.42);
  border-radius: 12px;
  background: rgba(2, 8, 20, 0.18);
  font-size: 24px;
  line-height: 1;
}

.install-panel-premium {
  margin-top: 22px;
  border-radius: 26px;
  padding: clamp(16px, 2.3vw, 24px);
  background:
    linear-gradient(145deg, rgba(4, 13, 27, 0.86), rgba(30, 21, 58, 0.84)),
    linear-gradient(90deg, rgba(90, 240, 185, 0.10), rgba(69, 216, 255, 0.12), rgba(168, 85, 247, 0.11));
}

.install-panel-premium .install-panel-head {
  grid-template-columns: minmax(0, 1fr) minmax(210px, 260px) !important;
  align-items: stretch;
}

.install-panel-title > span {
  display: block;
  margin-bottom: 8px;
  color: rgba(90, 240, 185, 0.86);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.install-panel-title > b {
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1;
}

.install-selected-device {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(69, 216, 255, 0.24);
  border-radius: 20px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.035);
}

.install-selected-device > span {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 15px;
  background: rgba(69, 216, 255, 0.12);
  color: var(--cyan);
}

.install-selected-device svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
  stroke: currentColor;
}

.install-selected-device small {
  display: block;
  margin-bottom: 2px;
  color: rgba(248, 242, 255, 0.58);
  font-weight: 850;
  text-transform: uppercase;
}

.install-selected-device b {
  margin: 0;
  font-size: 16px;
  letter-spacing: 0;
}

.install-panel-premium .install-os-pills {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  margin-top: 18px;
}

.install-panel-premium .install-pill {
  min-width: 0;
  min-height: 46px;
  border-radius: 16px;
  justify-content: flex-start;
  padding: 0 14px;
}

.install-panel-premium .install-app-pills {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  margin-top: 12px;
}

.install-panel-premium .install-pill-app {
  min-height: 68px;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.045), rgba(69,216,255,0.045)),
    rgba(255, 255, 255, 0.02);
}

.install-route-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  margin-top: 14px;
  border: 1px solid rgba(90, 240, 185, 0.22);
  border-radius: 22px;
  padding: 16px;
  background:
    linear-gradient(135deg, rgba(90, 240, 185, 0.08), rgba(69, 216, 255, 0.06)),
    rgba(3, 10, 22, 0.42);
}

.install-route-app .install-app-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
}

.install-route-app .install-app-icon img {
  width: 50px;
  height: 50px;
  border-radius: 16px;
}

.install-route-card small {
  color: rgba(90, 240, 185, 0.78);
  font-weight: 900;
  text-transform: uppercase;
}

.install-route-card b {
  margin: 2px 0 4px;
  font-size: 22px;
  letter-spacing: -0.02em;
}

.install-route-card p {
  margin: 0;
  color: rgba(248, 242, 255, 0.68);
}

.install-panel-premium .install-steps {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.install-panel-premium .install-step {
  min-height: 186px;
  border-color: rgba(168, 85, 247, 0.22);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.045), rgba(69,216,255,0.035)),
    rgba(255, 255, 255, 0.018);
}

.install-panel-premium .install-step a,
.install-panel-premium .install-step button {
  align-self: end;
  justify-content: center;
  border-color: rgba(69, 216, 255, 0.34);
  background: rgba(69, 216, 255, 0.08);
}

.install-panel-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.install-panel-actions button {
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  margin: 0;
  border: 1px solid rgba(69, 216, 255, 0.24) !important;
  border-radius: 18px;
  background: rgba(5, 13, 28, 0.48) !important;
  color: rgba(248, 242, 255, 0.92);
  box-shadow: none;
}

.install-panel-actions span {
  color: var(--cyan);
  font-size: 18px;
}

.raw-qr-modal {
  border-color: rgba(69, 216, 255, 0.34);
  background:
    linear-gradient(150deg, rgba(5, 16, 32, 0.94), rgba(29, 20, 56, 0.94));
}

.raw-qr-modal .modal-submit {
  justify-content: center;
}

@media (max-width: 980px) {
  .connect-card-top,
  .install-panel-premium .install-panel-head {
    grid-template-columns: 1fr !important;
  }

  .connect-signal {
    display: none;
  }

  .install-panel-premium .install-os-pills,
  .install-panel-premium .install-app-pills,
  .install-panel-premium .install-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 620px) {
  .connect-link-row,
  .install-route-card,
  .install-selected-device {
    grid-template-columns: 1fr;
  }

  .install-panel-premium .install-os-pills,
  .install-panel-premium .install-app-pills,
  .install-panel-premium .install-steps,
  .install-panel-actions {
    grid-template-columns: 1fr !important;
  }

  .connect-card-premium .connect-primary-action {
    min-height: 58px;
  }
}

/* Final quick-connect visual pass: app-first, secured URL, no cheap placeholder tile. */
.connect-card-premium {
  border-color: rgba(116, 226, 255, 0.34) !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(90, 240, 185, 0.18), transparent 34%),
    radial-gradient(circle at 86% 10%, rgba(168, 85, 247, 0.22), transparent 38%),
    linear-gradient(135deg, rgba(8, 17, 34, 0.96), rgba(18, 12, 42, 0.94) 48%, rgba(6, 8, 20, 0.98)) !important;
  box-shadow:
    0 28px 88px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.035) !important;
}

.connect-card-premium::before {
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.13), transparent 24%, transparent 72%, rgba(69, 216, 255, 0.10)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 72px) !important;
  opacity: 0.5 !important;
}

.connect-card-top {
  grid-template-columns: minmax(0, 1fr) minmax(220px, 292px) !important;
  gap: clamp(22px, 3vw, 38px) !important;
}

.connect-copy > span,
.install-panel-title > span {
  letter-spacing: 0.08em !important;
}

.connect-copy > b {
  max-width: 740px !important;
  font-size: clamp(34px, 4.6vw, 64px) !important;
  line-height: 0.92 !important;
}

.connect-card-premium .connect-note {
  max-width: 660px !important;
  color: rgba(248, 242, 255, 0.74) !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
}

.connect-assurance {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.connect-assurance i {
  display: inline-grid;
  min-height: 30px;
  place-items: center;
  border: 1px solid rgba(116, 226, 255, 0.22);
  border-radius: 999px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(248, 242, 255, 0.78);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.connect-app-stack {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-self: stretch;
  min-height: 206px;
  border: 1px solid rgba(116, 226, 255, 0.24);
  border-radius: 26px;
  padding: 18px;
  background:
    radial-gradient(circle at 50% 0%, rgba(69, 216, 255, 0.18), transparent 58%),
    rgba(2, 8, 20, 0.46);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 20px 52px rgba(69, 216, 255, 0.10);
}

.connect-app-stack::before {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 74px;
  height: 74px;
  border: 1px solid rgba(90, 240, 185, 0.26);
  border-radius: 22px;
  content: "";
  transform: translate(-50%, -50%) rotate(45deg);
}

.connect-app-stack span {
  position: relative;
  z-index: 1;
  display: grid;
  min-width: 0;
  min-height: 76px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 21px;
  background: rgba(255, 255, 255, 0.055);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.connect-app-stack img {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  object-fit: cover;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.26));
}

.connect-app-stack b {
  position: absolute;
  z-index: 2;
  inset: 50% auto auto 50%;
  display: grid;
  min-width: 128px;
  min-height: 38px;
  place-items: center;
  border: 1px solid rgba(90, 240, 185, 0.30);
  border-radius: 999px;
  background: rgba(7, 11, 25, 0.84);
  color: #fff;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 0;
  transform: translate(-50%, -50%);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28);
}

.connect-link-row {
  grid-template-columns: minmax(150px, auto) minmax(0, 1fr) !important;
  margin-top: 22px !important;
  border-color: rgba(116, 226, 255, 0.22) !important;
  border-radius: 20px !important;
  background: rgba(3, 8, 20, 0.48) !important;
}

.connect-link-row small {
  color: rgba(90, 240, 185, 0.82) !important;
}

.connect-card-premium .connect-primary-action {
  min-height: 66px !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.26), transparent 48%),
    linear-gradient(135deg, rgba(19, 194, 159, 0.94), rgba(87, 72, 232, 0.92)) !important;
  color: #fff !important;
}

.install-panel-premium {
  border: 1px solid rgba(116, 226, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

@media (max-width: 980px) {
  .connect-card-top {
    grid-template-columns: 1fr !important;
  }

  .connect-app-stack {
    min-height: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .connect-app-stack b,
  .connect-app-stack::before {
    display: none;
  }
}

@media (max-width: 620px) {
  .connect-copy > b {
    font-size: clamp(30px, 10vw, 44px) !important;
  }

  .connect-app-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 12px;
  }

  .connect-link-row {
    grid-template-columns: 1fr !important;
  }
}

.install-panel-premium .connect-actions-cabinet {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

@media (max-width: 720px) {
  .install-panel-premium .connect-actions-cabinet {
    grid-template-columns: 1fr !important;
  }
}

/* 2026-05-19 checkout and trial polish. */
.pay-page .trial-panel {
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.78fr) !important;
  align-items: stretch;
  border-color: rgba(139, 92, 255, 0.38) !important;
  padding: clamp(18px, 2.3vw, 28px) !important;
  background:
    linear-gradient(135deg, rgba(17, 13, 39, 0.92), rgba(7, 11, 26, 0.88)),
    rgba(8, 7, 20, 0.82) !important;
}

.trial-panel-copy {
  display: grid;
  align-content: center;
}

.pay-page .trial-panel h2 {
  max-width: 560px !important;
  font-size: clamp(31px, 3.6vw, 54px) !important;
  line-height: 1.02 !important;
}

.pay-page .trial-panel p {
  max-width: 590px !important;
  color: rgba(248, 242, 255, 0.76) !important;
  font-weight: 750;
}

.trial-panel-side {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
}

.trial-route-card {
  position: relative;
  overflow: hidden;
  min-height: 190px;
  border: 1px solid rgba(139, 92, 255, 0.30);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(28, 26, 56, 0.86), rgba(10, 10, 28, 0.80));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.trial-route-bar {
  display: flex;
  gap: 7px;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border-bottom: 1px solid rgba(139, 92, 255, 0.26);
}

.trial-route-bar i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.trial-route-bar i:nth-child(1) {
  background: #ff5f57;
}

.trial-route-bar i:nth-child(2) {
  background: #ffbd2e;
}

.trial-route-bar i:nth-child(3) {
  background: #28c840;
}

.trial-route-map {
  position: relative;
  min-height: 154px;
}

.trial-route-map::before,
.trial-route-map::after {
  position: absolute;
  inset: 18px 42px 18px 42px;
  border: 1px solid rgba(139, 92, 255, 0.20);
  border-radius: 50%;
  transform: rotate(-24deg);
  content: "";
}

.trial-route-map::after {
  inset: 34px 82px 30px 74px;
  border-color: rgba(69, 216, 255, 0.24);
  transform: rotate(28deg);
}

.trial-route-core {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 70px;
  height: 70px;
  border: 2px solid rgba(90, 240, 185, 0.55);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 50% 50%, rgba(90, 240, 185, 0.18), transparent 58%),
    rgba(7, 5, 18, 0.82);
  box-shadow:
    0 0 0 7px rgba(90, 240, 185, 0.06),
    0 0 28px rgba(69, 216, 255, 0.16);
}

.trial-route-core::before {
  position: absolute;
  inset: 19px 22px;
  border: 2px solid #f7f3ff;
  border-top-width: 3px;
  border-radius: 42% 42% 48% 48%;
  content: "";
}

.trial-node {
  position: absolute;
  z-index: 2;
  display: grid;
  gap: 4px;
  min-width: 104px;
  border: 1px solid rgba(69, 216, 255, 0.24);
  border-radius: 12px;
  padding: 10px;
  background: rgba(8, 7, 22, 0.82);
}

.trial-node b {
  color: #ffffff;
  font-size: 13px;
}

.trial-node small {
  color: rgba(248, 242, 255, 0.70);
  font-size: 11px;
  font-weight: 850;
}

.trial-node-fi {
  left: 18px;
  top: 26px;
}

.trial-node-de {
  right: 22px;
  top: 26px;
}

.trial-node-ru {
  right: 34px;
  bottom: 18px;
}

.pay-page .trial-panel-actions {
  grid-template-columns: 1fr 1fr;
}

.pay-page .trial-panel-actions .page-home-button {
  min-height: 46px !important;
}

.pay-page .payment-hub {
  grid-template-columns: minmax(320px, 0.86fr) minmax(320px, 0.74fr) !important;
  gap: clamp(14px, 2vw, 22px);
  align-items: stretch;
  border-color: rgba(139, 92, 255, 0.36) !important;
  padding: clamp(16px, 2vw, 24px) !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(139, 92, 255, 0.18), transparent 36%),
    linear-gradient(145deg, rgba(18, 14, 40, 0.86), rgba(9, 9, 26, 0.80)) !important;
}

.payment-hub .checkout-panel {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, auto) auto;
  gap: 14px !important;
  padding: clamp(18px, 2.1vw, 24px) !important;
  border: 1px solid rgba(139, 92, 255, 0.18) !important;
  background: rgba(255, 255, 255, 0.024) !important;
}

.checkout-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.checkout-head span {
  display: inline-grid;
  min-height: 30px;
  place-items: center;
  border: 1px solid rgba(90, 240, 185, 0.24);
  border-radius: 999px;
  padding: 0 12px;
  color: #75f2c7;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.payment-hub .checkout-panel h3 {
  margin: 0 !important;
  font-size: clamp(24px, 2.5vw, 34px) !important;
}

.checkout-total {
  display: grid;
  gap: 6px;
  border: 1px solid rgba(90, 240, 185, 0.26);
  border-radius: 16px;
  padding: clamp(16px, 2vw, 22px);
  background:
    radial-gradient(circle at 20% 0%, rgba(90, 240, 185, 0.14), transparent 48%),
    rgba(90, 240, 185, 0.045);
}

.checkout-total span {
  color: rgba(248, 242, 255, 0.66);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.checkout-total strong {
  color: #ffffff;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 0.96;
}

.payment-hub .checkout-meta {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.payment-hub .checkout-meta div {
  min-height: 78px !important;
  border-radius: 14px !important;
  padding: 13px !important;
}

.checkout-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.checkout-actions button {
  width: 100%;
  min-height: 52px !important;
  border: 1px solid rgba(90, 240, 185, 0.32) !important;
  background:
    linear-gradient(135deg, rgba(90, 240, 185, 0.22), rgba(69, 216, 255, 0.14)),
    rgba(90, 240, 185, 0.055) !important;
}

.payment-controls {
  align-content: stretch !important;
}

.payment-controls .period-strip {
  gap: 9px !important;
}

.payment-controls .period {
  border-color: rgba(139, 92, 255, 0.30) !important;
  background: rgba(255, 255, 255, 0.026) !important;
}

.payment-controls .period.is-active {
  border-color: rgba(90, 240, 185, 0.58) !important;
  background:
    linear-gradient(135deg, rgba(90, 240, 185, 0.16), rgba(139, 92, 255, 0.13)),
    rgba(90, 240, 185, 0.045) !important;
  box-shadow: 0 0 0 1px rgba(90, 240, 185, 0.12);
}

.pay-page .plan-card {
  isolation: isolate;
  overflow: hidden !important;
  border-color: rgba(139, 92, 255, 0.28) !important;
  background:
    linear-gradient(135deg, rgba(26, 24, 56, 0.88), rgba(10, 10, 30, 0.84)),
    rgba(8, 7, 20, 0.82) !important;
  transition:
    transform 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease !important;
}

.pay-page .plan-card::before {
  inset: -70px -70px auto auto !important;
  width: 180px !important;
  height: 180px !important;
  border: 1px solid rgba(139, 92, 255, 0.22);
  border-radius: 50%;
  background:
    conic-gradient(from 140deg, transparent, rgba(139, 92, 255, 0.26), transparent, rgba(69, 216, 255, 0.20), transparent) !important;
  opacity: 0.82;
}

.pay-page .plan-card::after {
  display: block !important;
  content: "";
  position: absolute !important;
  inset: 0 !important;
  z-index: 0;
  border-radius: inherit;
  background:
    linear-gradient(125deg, transparent 0 42%, rgba(255, 255, 255, 0.055) 48%, transparent 56%),
    radial-gradient(circle at 18% 0%, rgba(90, 240, 185, 0.08), transparent 44%);
  opacity: 0;
  transition: opacity 220ms ease;
  pointer-events: none;
}

.pay-page .plan-card:hover {
  transform: translateY(-4px) perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  border-color: rgba(90, 240, 185, 0.38) !important;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.34),
    0 0 34px rgba(139, 92, 255, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.pay-page .plan-card:hover::after,
.pay-page .plan-card.is-selected::after {
  opacity: 1;
}

.pay-page .plan-card.is-selected {
  border-color: rgba(90, 240, 185, 0.78) !important;
  box-shadow:
    0 0 0 2px rgba(90, 240, 185, 0.66),
    0 0 0 6px rgba(139, 92, 255, 0.18),
    0 28px 78px rgba(0, 0, 0, 0.40),
    0 0 42px rgba(90, 240, 185, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

@media (max-width: 980px) {
  .pay-page .trial-panel,
  .pay-page .payment-hub {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 760px) {
  .pay-page .trial-panel-actions,
  .payment-hub .checkout-meta {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .trial-route-card {
    min-height: 172px;
  }
}

/* 2026-05-19 payment summary v2 and restored tariff glow. */
.pay-page .payment-hub {
  grid-template-columns: minmax(330px, 0.82fr) minmax(330px, 0.78fr) !important;
  align-items: start !important;
  border-radius: 26px !important;
  background:
    linear-gradient(145deg, rgba(18, 14, 40, 0.92), rgba(7, 11, 26, 0.88)) !important;
}

.payment-hub .checkout-panel {
  position: relative;
  overflow: hidden;
  gap: 16px !important;
  border-color: rgba(116, 226, 255, 0.24) !important;
  border-radius: 22px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
    rgba(6, 8, 22, 0.76) !important;
  box-shadow:
    0 18px 54px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.payment-hub .checkout-panel::before {
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, #5af0b9, #45d8ff, #bd63ff, #ffcf5a);
  content: "";
}

.checkout-head {
  align-items: flex-start !important;
}

.checkout-head span {
  min-height: 28px !important;
  border-color: rgba(116, 226, 255, 0.32) !important;
  background: rgba(116, 226, 255, 0.07);
  color: #9af2ff !important;
}

.payment-hub .checkout-panel h3 {
  max-width: 260px;
  font-size: clamp(24px, 2.1vw, 31px) !important;
}

.checkout-total {
  display: flex !important;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px !important;
  border-color: rgba(90, 240, 185, 0.30) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(135deg, rgba(90, 240, 185, 0.13), rgba(69, 216, 255, 0.06)),
    rgba(5, 18, 22, 0.54) !important;
}

.checkout-total span {
  max-width: 90px;
  letter-spacing: 0 !important;
}

.checkout-total strong {
  text-align: right;
  white-space: nowrap;
}

.checkout-breakdown {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(139, 92, 255, 0.20);
  border-radius: 16px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.022);
}

.checkout-breakdown div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 30px;
}

.checkout-breakdown div + div {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding-top: 8px;
}

.checkout-breakdown span {
  color: rgba(248, 242, 255, 0.62);
  font-size: 13px;
  font-weight: 850;
}

.checkout-breakdown strong {
  color: rgba(248, 242, 255, 0.94);
  font-size: 14px;
  font-weight: 950;
  white-space: nowrap;
}

.payment-hub .checkout-meta {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.payment-hub .checkout-meta div {
  display: grid;
  align-content: start;
  min-height: 74px !important;
  border-color: rgba(116, 226, 255, 0.16) !important;
  background: rgba(255, 255, 255, 0.018) !important;
}

.payment-hub .checkout-meta dt {
  margin-bottom: 8px !important;
  letter-spacing: 0 !important;
}

.payment-hub .checkout-meta dd {
  font-size: clamp(15px, 1.2vw, 18px) !important;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.checkout-actions {
  margin-top: 2px;
}

.checkout-actions button {
  min-height: 54px !important;
  border-radius: 14px !important;
}

.checkout-actions [data-create-payment] {
  background:
    linear-gradient(135deg, rgba(90, 240, 185, 0.92), rgba(69, 216, 255, 0.82)),
    #5af0b9 !important;
  color: #061016 !important;
  box-shadow: 0 16px 34px rgba(90, 240, 185, 0.16) !important;
}

.payment-controls {
  border: 1px solid rgba(139, 92, 255, 0.22);
  border-radius: 22px;
  padding: clamp(14px, 1.7vw, 20px);
  background: rgba(255, 255, 255, 0.022);
}

.pay-page .plan-card {
  --plan-accent: #45d8ff;
  --plan-accent-2: #bd63ff;
  --plan-warm: #5af0b9;
  min-height: 500px !important;
  border: 1px solid transparent !important;
  border-radius: 28px !important;
  background:
    linear-gradient(145deg, rgba(15, 14, 35, 0.94), rgba(7, 9, 24, 0.90)) padding-box,
    linear-gradient(135deg, color-mix(in srgb, var(--plan-accent) 52%, transparent), color-mix(in srgb, var(--plan-accent-2) 46%, transparent), rgba(255, 255, 255, 0.08)) border-box !important;
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.pay-page .plan-card[data-plan-card="PERSONAL"] {
  --plan-accent: #45d8ff;
  --plan-accent-2: #7c3cff;
  --plan-warm: #9af2ff;
}

.pay-page .plan-card[data-plan-card="PLUS"] {
  --plan-accent: #5af0b9;
  --plan-accent-2: #45d8ff;
  --plan-warm: #ffcf5a;
}

.pay-page .plan-card[data-plan-card="ULTRA"] {
  --plan-accent: #bd63ff;
  --plan-accent-2: #ff5fb8;
  --plan-warm: #ffcf5a;
}

.pay-page .plan-card::before {
  position: absolute !important;
  inset: -34% -22% auto auto !important;
  width: 260px !important;
  height: 260px !important;
  border: 0 !important;
  border-radius: 50%;
  background:
    conic-gradient(from 160deg, transparent 0 22%, color-mix(in srgb, var(--plan-accent) 34%, transparent) 34%, transparent 48%, color-mix(in srgb, var(--plan-warm) 26%, transparent) 62%, transparent 78%) !important;
  filter: blur(2px);
  opacity: 0.72 !important;
  content: "" !important;
  pointer-events: none;
}

.pay-page .plan-card::after {
  display: block !important;
  position: absolute !important;
  inset: 1px !important;
  z-index: 0;
  border-radius: 27px;
  background:
    linear-gradient(115deg, transparent 0 34%, rgba(255, 255, 255, 0.08) 44%, transparent 54%),
    linear-gradient(180deg, color-mix(in srgb, var(--plan-accent) 10%, transparent), transparent 42%) !important;
  opacity: 0;
  transition: opacity 220ms ease, transform 220ms ease;
  content: "" !important;
  pointer-events: none;
}

.pay-page .plan-card:hover::after,
.pay-page .plan-card.is-selected::after {
  opacity: 1 !important;
}

.pay-page .plan-card:hover {
  transform: translateY(-6px) perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) !important;
  box-shadow:
    0 28px 76px rgba(0, 0, 0, 0.36),
    0 0 36px color-mix(in srgb, var(--plan-accent) 18%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

.pay-page .plan-card.is-selected {
  border-color: transparent !important;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--plan-accent) 78%, transparent),
    0 0 0 6px color-mix(in srgb, var(--plan-accent-2) 18%, transparent),
    0 30px 82px rgba(0, 0, 0, 0.42),
    0 0 42px color-mix(in srgb, var(--plan-accent) 18%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

.pay-page .plan-card .plan-topline {
  position: relative;
  z-index: 1;
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--plan-accent) 26%, transparent);
  border-radius: 14px;
  padding: 9px 10px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--plan-accent) 12%, transparent), rgba(255, 255, 255, 0.02));
}

.pay-page .plan-card .plan-topline span {
  color: #ffffff;
}

.pay-page .plan-card .plan-topline small {
  color: rgba(248, 242, 255, 0.64);
}

.pay-page .plan-card.is-selected .plan-topline {
  border-color: color-mix(in srgb, var(--plan-accent) 52%, transparent);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.pay-page .plan-card.is-selected [data-plan-select] {
  border-color: color-mix(in srgb, var(--plan-accent) 62%, transparent) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--plan-accent) 28%, transparent), color-mix(in srgb, var(--plan-accent-2) 18%, transparent)),
    rgba(255, 255, 255, 0.035) !important;
  color: #ffffff !important;
}

@media (max-width: 980px) {
  .pay-page .payment-hub {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 620px) {
  .checkout-total {
    align-items: flex-start;
    flex-direction: column;
  }

  .checkout-total strong {
    text-align: left;
  }

  .payment-hub .checkout-meta {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .pay-page .plan-card {
    min-height: 0 !important;
    border-radius: 22px !important;
  }
}

/* 2026-05-19 final checkout order summary and tariff effects. */
.pay-page .payment-hub {
  grid-template-columns: minmax(0, 1fr) minmax(330px, 420px) !important;
  align-items: start !important;
  gap: clamp(18px, 2.2vw, 30px) !important;
}

.pay-page .payment-controls {
  order: 1;
}

.payment-hub .checkout-panel {
  order: 2;
  position: sticky;
  top: 96px;
  border-color: rgba(90, 240, 185, 0.26) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
    radial-gradient(circle at 86% 0%, rgba(255, 207, 90, 0.10), transparent 36%),
    rgba(6, 9, 22, 0.88) !important;
}

.checkout-breakdown {
  gap: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border-color: rgba(255, 255, 255, 0.10) !important;
  background: rgba(3, 8, 20, 0.42) !important;
}

.checkout-breakdown-row,
.checkout-breakdown-total {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 58px !important;
  padding: 13px 14px;
}

.checkout-breakdown-row + .checkout-breakdown-row,
.checkout-breakdown-total {
  border-top: 1px solid rgba(255, 255, 255, 0.075);
}

.checkout-breakdown-row span {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: rgba(248, 242, 255, 0.66) !important;
}

.checkout-breakdown-row b,
.checkout-breakdown-total span {
  color: rgba(248, 242, 255, 0.88);
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 0;
}

.checkout-breakdown-row small {
  color: rgba(248, 242, 255, 0.52);
  font-size: 12px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.checkout-breakdown-row strong {
  font-size: 15px !important;
}

.checkout-breakdown-total {
  background:
    linear-gradient(135deg, rgba(90, 240, 185, 0.12), rgba(69, 216, 255, 0.06));
}

.checkout-breakdown-total strong {
  color: #ffffff;
  font-size: 18px;
  font-weight: 950;
  white-space: nowrap;
}

.checkout-breakdown [hidden] {
  display: none !important;
}

.payment-hub .checkout-meta {
  grid-template-columns: 1fr !important;
}

.payment-hub .checkout-meta div {
  min-height: 62px !important;
  grid-template-columns: minmax(90px, auto) minmax(0, 1fr) !important;
  align-items: center !important;
}

.payment-hub .checkout-meta dt {
  margin: 0 !important;
}

.payment-hub .checkout-meta dd {
  text-align: right;
}

.pay-page .plan-card {
  transform-style: preserve-3d;
}

.pay-page .plan-card::before {
  opacity: 0.92 !important;
  filter: blur(1px) saturate(1.12);
}

.pay-page .plan-card::after {
  background:
    linear-gradient(118deg, transparent 0 28%, rgba(255, 255, 255, 0.13) 41%, transparent 52%),
    radial-gradient(circle at 22% 4%, color-mix(in srgb, var(--plan-warm) 15%, transparent), transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--plan-accent) 12%, transparent), transparent 52%) !important;
  transform: translateX(-10%);
}

.pay-page .plan-card:hover::after,
.pay-page .plan-card.is-selected::after {
  transform: translateX(0);
}

.pay-page .plan-card.is-selected {
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--plan-accent) 86%, transparent),
    0 0 0 7px color-mix(in srgb, var(--plan-warm) 16%, transparent),
    0 34px 92px rgba(0, 0, 0, 0.44),
    0 0 56px color-mix(in srgb, var(--plan-accent) 24%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

@media (max-width: 980px) {
  .pay-page .payment-hub {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .payment-hub .checkout-panel {
    position: relative;
    top: auto;
  }
}

@media (max-width: 620px) {
  .payment-hub .checkout-meta div {
    grid-template-columns: 1fr !important;
  }

  .payment-hub .checkout-meta dd {
    text-align: left;
  }
}

/* 2026-05-20 production surface: centered header, modal auth, calmer pay colors. */
:root {
  --prod-bg: #050713;
  --prod-panel: rgba(11, 15, 31, 0.82);
  --prod-panel-2: rgba(16, 22, 42, 0.76);
  --prod-line: rgba(117, 242, 199, 0.22);
  --prod-line-violet: rgba(155, 121, 255, 0.26);
  --prod-cyan: #74e2ff;
  --prod-green: #75f2c7;
  --prod-violet: #9b79ff;
  --prod-rose: #ff6fae;
  --prod-amber: #ffd166;
}

body {
  background:
    radial-gradient(circle at 12% 8%, rgba(117, 242, 199, 0.10), transparent 28rem),
    radial-gradient(circle at 82% 4%, rgba(116, 226, 255, 0.11), transparent 30rem),
    radial-gradient(circle at 50% -12%, rgba(155, 121, 255, 0.16), transparent 34rem),
    linear-gradient(180deg, #060815 0%, #050713 42%, #04050d 100%) !important;
}

.site-header {
  min-height: 78px;
  border-color: rgba(116, 226, 255, 0.20) !important;
  border-radius: 24px !important;
  background:
    linear-gradient(90deg, rgba(117, 242, 199, 0.10), transparent 22%, rgba(155, 121, 255, 0.08) 74%, transparent),
    rgba(6, 9, 22, 0.74) !important;
}

.site-header::before {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.055), transparent 24%, rgba(116, 226, 255, 0.06) 55%, transparent),
    radial-gradient(circle at 4% 50%, rgba(155, 121, 255, 0.22), transparent 20%),
    radial-gradient(circle at 96% 50%, rgba(117, 242, 199, 0.12), transparent 22%) !important;
}

.main-nav {
  margin-inline: auto !important;
}

.main-nav a,
.main-nav button,
.header-auth-actions button,
.header-account,
.header-logout {
  border-color: rgba(155, 121, 255, 0.24) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.018)),
    rgba(9, 13, 28, 0.62) !important;
  color: rgba(248, 252, 255, 0.88) !important;
}

.main-nav a:hover,
.main-nav a:focus-visible,
.main-nav button:hover,
.main-nav button:focus-visible,
.main-nav a[aria-current="page"],
.header-auth-actions button:hover,
.header-auth-actions button:focus-visible,
.header-account:hover,
.header-account:focus-visible,
.header-logout:hover,
.header-logout:focus-visible {
  border-color: rgba(117, 242, 199, 0.42) !important;
  background:
    linear-gradient(135deg, rgba(117, 242, 199, 0.12), rgba(116, 226, 255, 0.08)),
    rgba(9, 17, 31, 0.84) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 12px 30px rgba(116, 226, 255, 0.08) !important;
}

.header-auth-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  align-items: center;
}

.header-auth-actions[hidden] {
  display: none !important;
}

.header-auth-actions button {
  min-height: 42px;
  border: 1px solid rgba(155, 121, 255, 0.26);
  border-radius: 999px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 900;
}

.header-auth-register {
  border-color: rgba(117, 242, 199, 0.34) !important;
  color: #ffffff !important;
}

.nova-hero {
  min-height: min(760px, calc(100vh - 32px)) !important;
  display: grid;
  align-items: center;
  padding: clamp(78px, 8vw, 108px) 0 clamp(34px, 5vw, 64px) !important;
}

.hero-grid {
  align-items: center !important;
}

.hero-copy h1 {
  letter-spacing: 0 !important;
  background: linear-gradient(92deg, #ffffff 0%, #e9f7ff 36%, #b78cff 62%, #74e2ff 100%) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
}

.service-tags span {
  border-color: rgba(117, 242, 199, 0.24) !important;
  background:
    linear-gradient(135deg, rgba(117, 242, 199, 0.10), rgba(155, 121, 255, 0.08)),
    rgba(9, 13, 28, 0.72) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 10px 24px rgba(0, 0, 0, 0.18) !important;
}

.page-home-button,
.hero-actions .start-button,
.trial-primary,
.modal-submit {
  border-radius: 16px !important;
}

.hero-actions {
  gap: 12px !important;
}

.hero-console {
  min-height: clamp(440px, 46vw, 590px) !important;
  border-color: rgba(116, 226, 255, 0.23) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.018)),
    rgba(9, 13, 31, 0.78) !important;
}

.hero-console::after {
  position: absolute;
  inset: 54px 0 0;
  pointer-events: none;
  content: "";
  background:
    radial-gradient(circle at 24% 28%, rgba(117, 242, 199, 0.20), transparent 7rem),
    radial-gradient(circle at 78% 34%, rgba(116, 226, 255, 0.18), transparent 7rem),
    radial-gradient(circle at 52% 70%, rgba(155, 121, 255, 0.16), transparent 8rem),
    linear-gradient(115deg, transparent 0 45%, rgba(255, 255, 255, 0.07) 50%, transparent 57%);
  opacity: 0.78;
  animation: glass-drift 9s ease-in-out infinite alternate;
}

.console-body {
  background:
    radial-gradient(circle at 50% 46%, rgba(117, 242, 199, 0.13), transparent 22%),
    radial-gradient(circle at 68% 58%, rgba(116, 226, 255, 0.14), transparent 28%),
    linear-gradient(135deg, rgba(9, 13, 31, 0.86), rgba(14, 10, 32, 0.72)) !important;
}

.shield-core {
  background:
    radial-gradient(circle at 50% 45%, rgba(116, 226, 255, 0.10), transparent 58%),
    rgba(5, 8, 18, 0.86) !important;
  box-shadow:
    0 0 0 1px rgba(117, 242, 199, 0.18),
    0 0 44px rgba(116, 226, 255, 0.26),
    0 0 86px rgba(155, 121, 255, 0.22),
    inset 0 0 36px rgba(117, 242, 199, 0.08) !important;
}

.route-card {
  border-color: rgba(116, 226, 255, 0.24) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.025)),
    rgba(6, 10, 24, 0.78) !important;
  backdrop-filter: blur(16px);
  animation: route-float 6.8s ease-in-out infinite;
}

.route-de {
  animation-delay: -1.6s;
}

.route-ru {
  animation-delay: -3.1s;
}

.route-card strong,
.trial-node small {
  border: 1px solid rgba(155, 121, 255, 0.38);
  border-radius: 999px;
  padding: 5px 8px;
  color: #eef7ff !important;
  background: rgba(155, 121, 255, 0.12);
}

.console-status {
  border-color: rgba(117, 242, 199, 0.22) !important;
  background:
    linear-gradient(135deg, rgba(117, 242, 199, 0.08), rgba(116, 226, 255, 0.04)),
    rgba(5, 9, 22, 0.76) !important;
}

.pay-page .trial-panel {
  align-items: center !important;
  border-color: rgba(116, 226, 255, 0.22) !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(117, 242, 199, 0.11), transparent 34%),
    linear-gradient(135deg, rgba(13, 18, 39, 0.92), rgba(7, 10, 24, 0.88)) !important;
}

.trial-panel-copy > span {
  width: auto !important;
  max-width: max-content;
  min-height: 34px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(117, 242, 199, 0.30) !important;
  border-radius: 999px !important;
  padding: 0 14px !important;
  background:
    linear-gradient(135deg, rgba(117, 242, 199, 0.13), rgba(116, 226, 255, 0.07)),
    rgba(5, 11, 22, 0.72) !important;
  color: #75f2c7 !important;
}

.trial-route-card {
  border-color: rgba(116, 226, 255, 0.28) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.018)),
    radial-gradient(circle at 24% 18%, rgba(117, 242, 199, 0.12), transparent 34%),
    rgba(8, 13, 28, 0.84) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 24px 70px rgba(0, 0, 0, 0.28),
    0 0 36px rgba(116, 226, 255, 0.08) !important;
}

.trial-route-map::before,
.trial-route-map::after {
  border-color: rgba(116, 226, 255, 0.26) !important;
}

.trial-route-core {
  background:
    radial-gradient(circle at 50% 48%, rgba(116, 226, 255, 0.16), transparent 58%),
    rgba(5, 8, 20, 0.88) !important;
  box-shadow:
    0 0 0 1px rgba(117, 242, 199, 0.18),
    0 0 34px rgba(116, 226, 255, 0.22),
    0 0 72px rgba(155, 121, 255, 0.18) !important;
}

.pay-page .pricing-grid {
  gap: clamp(18px, 2.2vw, 26px) !important;
}

.pay-page .plan-card {
  min-height: 520px !important;
  border-radius: 24px !important;
  background:
    linear-gradient(145deg, rgba(15, 20, 39, 0.94), rgba(7, 10, 24, 0.92)) padding-box,
    linear-gradient(135deg, color-mix(in srgb, var(--plan-accent) 44%, transparent), color-mix(in srgb, var(--plan-accent-2) 30%, transparent)) border-box !important;
}

.pay-page .plan-card[data-plan-card="PERSONAL"]::before {
  background:
    radial-gradient(circle at 72% 34%, color-mix(in srgb, var(--plan-accent) 22%, transparent) 0 12px, transparent 13px),
    conic-gradient(from 160deg, transparent 0 40%, color-mix(in srgb, var(--plan-accent) 28%, transparent), transparent 72%) !important;
}

.pay-page .plan-card[data-plan-card="PLUS"]::before {
  background:
    radial-gradient(circle at 34% 26%, color-mix(in srgb, var(--plan-warm) 26%, transparent) 0 10px, transparent 11px),
    radial-gradient(circle at 72% 42%, color-mix(in srgb, var(--plan-accent) 26%, transparent) 0 16px, transparent 17px),
    conic-gradient(from 140deg, transparent 0 24%, color-mix(in srgb, var(--plan-accent) 36%, transparent), transparent 54%, color-mix(in srgb, var(--plan-accent-2) 22%, transparent), transparent 86%) !important;
}

.pay-page .plan-card[data-plan-card="ULTRA"]::before {
  background:
    radial-gradient(circle at 28% 24%, color-mix(in srgb, var(--plan-warm) 30%, transparent) 0 10px, transparent 11px),
    radial-gradient(circle at 58% 18%, color-mix(in srgb, var(--plan-accent) 34%, transparent) 0 14px, transparent 15px),
    radial-gradient(circle at 78% 46%, color-mix(in srgb, var(--plan-accent-2) 30%, transparent) 0 18px, transparent 19px),
    conic-gradient(from 120deg, transparent 0 18%, color-mix(in srgb, var(--plan-accent) 40%, transparent), transparent 42%, color-mix(in srgb, var(--plan-warm) 26%, transparent), transparent 64%, color-mix(in srgb, var(--plan-accent-2) 30%, transparent), transparent 88%) !important;
}

.pay-page .plan-card .plan-topline {
  border-radius: 12px !important;
}

.pay-page .payment-hub {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 390px) !important;
  align-items: start !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.pay-page .payment-controls {
  min-height: 0 !important;
  align-self: start !important;
}

.pay-page .payment-controls,
.payment-hub .checkout-panel {
  border: 1px solid rgba(116, 226, 255, 0.18) !important;
  border-radius: 24px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.018)),
    rgba(8, 12, 27, 0.80) !important;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

.payment-hub .checkout-panel::before {
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(117, 242, 199, 0.86), rgba(116, 226, 255, 0.72), transparent) !important;
}

.checkout-total {
  border-color: rgba(117, 242, 199, 0.26) !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(117, 242, 199, 0.12), transparent 52%),
    rgba(117, 242, 199, 0.045) !important;
}

.checkout-breakdown,
.payment-hub .checkout-meta div,
.payment-controls .promo-box,
.payment-controls .period-strip {
  border-color: rgba(255, 255, 255, 0.09) !important;
  background: rgba(255, 255, 255, 0.024) !important;
}

.payment-controls .period,
.payment-controls .promo-box button,
.payment-controls .promo-box input {
  border-radius: 14px !important;
}

.payment-controls .period.is-active,
.payment-controls .period:hover,
.payment-controls .period:focus-visible {
  border-color: rgba(117, 242, 199, 0.46) !important;
  background:
    linear-gradient(135deg, rgba(117, 242, 199, 0.12), rgba(116, 226, 255, 0.08)),
    rgba(9, 17, 31, 0.72) !important;
}

.checkout-actions [data-create-payment] {
  border-color: rgba(117, 242, 199, 0.36) !important;
  background:
    linear-gradient(135deg, rgba(117, 242, 199, 0.96), rgba(116, 226, 255, 0.88)),
    #75f2c7 !important;
  color: #041116 !important;
}

.modal-backdrop {
  background:
    radial-gradient(circle at 50% 28%, rgba(116, 226, 255, 0.12), transparent 26rem),
    rgba(2, 4, 10, 0.70) !important;
  backdrop-filter: blur(18px) saturate(1.08);
}

.modal-card {
  border-color: rgba(116, 226, 255, 0.22) !important;
  border-radius: 22px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.020)),
    radial-gradient(circle at 92% 0%, rgba(117, 242, 199, 0.10), transparent 36%),
    rgba(8, 12, 27, 0.90) !important;
}

.modal-card h2 {
  letter-spacing: 0 !important;
}

.auth-modal-kicker {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  margin-bottom: 16px;
  border: 1px solid rgba(117, 242, 199, 0.30);
  border-radius: 999px;
  padding: 0 12px;
  color: #75f2c7;
  background: rgba(117, 242, 199, 0.065);
  font-size: 12px;
  font-weight: 950;
}

.register-modal-form input,
.login-modal-form input,
.forgot-modal-form input,
.reset-modal-form input {
  border-color: rgba(116, 226, 255, 0.28) !important;
  background: rgba(3, 7, 18, 0.74) !important;
}

.modal-extra {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px !important;
}

.register-modal .modal-extra,
.forgot-modal .modal-extra,
.reset-modal .modal-extra {
  grid-template-columns: minmax(0, 1fr);
}

.modal-extra a,
.modal-extra button {
  width: 100% !important;
  min-height: 46px !important;
  justify-content: center !important;
  border-radius: 14px !important;
}

.modal-status[data-tone="info"] {
  color: #bdefff !important;
}

.modal-status[data-tone="ok"] {
  color: #9ff5d5 !important;
}

.modal-status[data-tone="error"] {
  color: #ffbfd7 !important;
}

.register-modal {
  width: min(640px, 100%) !important;
  padding: clamp(20px, 2.5vw, 28px) !important;
}

.register-modal h2 {
  margin-bottom: 8px !important;
  font-size: clamp(40px, 4.6vw, 56px) !important;
  line-height: 0.98 !important;
}

.register-modal .modal-lead {
  margin-bottom: 16px !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
}

.register-modal-form {
  gap: 10px !important;
}

.register-modal-form label {
  gap: 6px !important;
}

.register-modal-form input,
.register-modal .code-row button,
.register-modal .modal-submit {
  min-height: 46px !important;
}

.register-modal .offer-consent {
  margin: 2px 0 0 !important;
  padding: 12px 14px !important;
  font-size: 13px !important;
}

.register-modal .modal-status {
  min-height: 14px !important;
  font-size: 13px !important;
}

.register-modal .modal-extra {
  margin-top: 10px !important;
}

.register-modal .modal-extra button {
  min-height: 42px !important;
}

.forgot-modal,
.reset-modal {
  width: min(680px, 100%) !important;
  padding: clamp(28px, 4vw, 42px) !important;
}

.forgot-modal .modal-lead,
.reset-modal .modal-lead {
  max-width: 56ch;
  margin-bottom: 22px !important;
}

.forgot-modal-form,
.reset-modal-form {
  display: grid !important;
  gap: 14px !important;
}

.forgot-modal-form label,
.reset-modal-form label {
  display: grid !important;
  gap: 8px !important;
  font-weight: 950 !important;
}

.forgot-modal-form input,
.reset-modal-form input {
  width: 100% !important;
  min-height: 52px !important;
  border-radius: 16px !important;
}

.forgot-modal .modal-submit,
.reset-modal .modal-submit {
  width: 100% !important;
}

.offer-page {
  max-width: 1080px;
  margin-inline: auto;
}

.offer-hero {
  max-width: none !important;
  border: 1px solid rgba(116, 226, 255, 0.18);
  border-radius: 28px;
  padding: clamp(26px, 4vw, 46px);
  background:
    radial-gradient(circle at 12% 0%, rgba(117, 242, 199, 0.11), transparent 36%),
    radial-gradient(circle at 94% 12%, rgba(155, 121, 255, 0.12), transparent 34%),
    linear-gradient(135deg, rgba(12, 18, 38, 0.86), rgba(6, 9, 22, 0.80));
  box-shadow:
    0 22px 70px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.offer-hero h1 {
  margin-bottom: 12px !important;
  letter-spacing: 0 !important;
  background: linear-gradient(92deg, #ffffff 0%, #effaff 36%, #75f2c7 64%, #9b79ff 100%) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
}

.offer-document {
  counter-reset: offer-section;
  gap: 12px !important;
}

.offer-document article {
  position: relative;
  counter-increment: offer-section;
  border-color: rgba(116, 226, 255, 0.16) !important;
  border-radius: 20px !important;
  padding-left: clamp(22px, 3vw, 36px) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.048), rgba(255, 255, 255, 0.014)),
    rgba(8, 12, 27, 0.72) !important;
}

.offer-document article::before {
  position: absolute;
  top: clamp(18px, 2.5vw, 28px);
  right: clamp(18px, 2.5vw, 28px);
  content: counter(offer-section, decimal-leading-zero);
  color: rgba(117, 242, 199, 0.34);
  font-size: clamp(28px, 4vw, 54px);
  font-weight: 950;
  line-height: 1;
}

.offer-document h2 {
  max-width: calc(100% - 76px);
  letter-spacing: 0 !important;
}

@keyframes glass-drift {
  from {
    transform: translate3d(-10px, 0, 0);
  }

  to {
    transform: translate3d(12px, -8px, 0);
  }
}

@keyframes route-float {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-7px);
  }
}

@media (max-width: 980px) {
  .header-auth-actions {
    grid-column: 1 / -1;
    justify-content: center;
  }

  .pay-page .payment-hub {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 760px) {
  .nova-hero {
    min-height: auto !important;
  }

  .hero-console {
    min-height: 390px !important;
  }

  .route-card {
    min-width: 132px !important;
  }

  .modal-extra {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .offer-document h2 {
    max-width: none;
  }

  .offer-document article::before {
    position: static;
    display: block;
    margin-bottom: 10px;
    font-size: 28px;
  }
}

/* 2026-05-20 header polish: green rotating logo ring and matched product nav buttons. */
.site-header .brand-mark {
  border-color: rgba(117, 242, 199, 0.70) !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(117, 242, 199, 0.11), transparent 58%),
    #050812 !important;
  box-shadow:
    0 0 0 8px rgba(117, 242, 199, 0.075),
    0 0 30px rgba(117, 242, 199, 0.30),
    0 0 54px rgba(41, 255, 184, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.09) !important;
}

.site-header .brand-mark::before {
  inset: -7px !important;
  padding: 2px !important;
  background:
    conic-gradient(
      from 0deg,
      rgba(117, 242, 199, 0),
      rgba(117, 242, 199, 0.18),
      rgba(117, 242, 199, 1),
      rgba(72, 255, 190, 0.72),
      rgba(116, 226, 255, 0.38),
      rgba(117, 242, 199, 1),
      rgba(117, 242, 199, 0)
    ) !important;
  filter:
    drop-shadow(0 0 8px rgba(117, 242, 199, 0.84))
    drop-shadow(0 0 18px rgba(72, 255, 190, 0.36));
  animation: header-logo-green-spin 2.7s linear infinite !important;
}

.site-header .brand-mark::after {
  inset: -15px !important;
  background:
    radial-gradient(circle, rgba(117, 242, 199, 0.34), transparent 62%) !important;
  filter: blur(10px) !important;
  opacity: 0.86 !important;
}

.main-nav a.nav-auth-link,
.main-nav a.nav-auth-link[aria-current="page"] {
  min-height: 42px !important;
  border-color: rgba(117, 242, 199, 0.34) !important;
  background:
    linear-gradient(135deg, rgba(117, 242, 199, 0.16), rgba(116, 226, 255, 0.075)),
    rgba(7, 15, 25, 0.86) !important;
  color: #f6fffb !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(117, 242, 199, 0.08),
    0 12px 30px rgba(117, 242, 199, 0.075) !important;
  text-shadow: 0 0 18px rgba(117, 242, 199, 0.18);
}

.main-nav a.nav-auth-link:hover,
.main-nav a.nav-auth-link:focus-visible,
.main-nav a.nav-auth-link[aria-current="page"]:hover,
.main-nav a.nav-auth-link[aria-current="page"]:focus-visible {
  border-color: rgba(117, 242, 199, 0.66) !important;
  background:
    linear-gradient(135deg, rgba(117, 242, 199, 0.25), rgba(116, 226, 255, 0.12)),
    rgba(8, 21, 31, 0.92) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    0 0 0 1px rgba(117, 242, 199, 0.14),
    0 14px 34px rgba(117, 242, 199, 0.13),
    0 0 24px rgba(117, 242, 199, 0.12) !important;
}

.main-nav a.nav-auth-link::after,
.main-nav a.nav-auth-link[aria-current="page"]::after {
  background: linear-gradient(90deg, transparent, rgba(117, 242, 199, 0.92), transparent) !important;
}

@keyframes header-logo-green-spin {
  to {
    transform: rotate(1turn);
  }
}

/* 2026-05-20 quick-connect rebuild: no toast popups, aligned stats, one-click app import. */
.toast {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.cabinet-layout {
  grid-template-columns: minmax(230px, 0.82fr) minmax(0, 2.5fr) !important;
  align-items: start !important;
}

.profile-card {
  position: relative !important;
  top: auto !important;
  min-height: 160px !important;
  display: grid !important;
  align-content: start !important;
  transform: none !important;
}

.dashboard-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 12px !important;
}

.dashboard-grid > .dash-card:not(.connect-card) {
  min-height: 160px !important;
  display: grid !important;
  grid-template-rows: 24px minmax(42px, auto) minmax(0, 1fr);
  align-content: start !important;
  padding: 20px !important;
}

.dashboard-grid > .device-list {
  grid-column: auto !important;
}

.dashboard-grid > .connect-card {
  grid-column: 1 / -1 !important;
}

.dashboard-grid > .dash-card:not(.connect-card) > span {
  margin: 0 !important;
  align-self: start !important;
}

.dashboard-grid > .dash-card:not(.connect-card) > b {
  margin: 0 !important;
  align-self: center !important;
  font-size: clamp(22px, 2vw, 30px) !important;
  line-height: 1.02 !important;
  letter-spacing: 0 !important;
  overflow-wrap: anywhere;
}

.dashboard-grid > .dash-card:not(.connect-card) > small,
.dashboard-grid > .dash-card:not(.connect-card) .meter {
  align-self: start !important;
  margin-top: 6px !important;
}

.connect-card-premium {
  overflow: hidden !important;
  padding: 0 !important;
  border-color: rgba(117, 242, 199, 0.28) !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(117, 242, 199, 0.15), transparent 32%),
    radial-gradient(circle at 95% 8%, rgba(116, 226, 255, 0.14), transparent 30%),
    linear-gradient(135deg, rgba(7, 13, 29, 0.98), rgba(9, 11, 26, 0.96)) !important;
}

.connect-card-premium::before {
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.11), transparent 22%, transparent 72%, rgba(117, 242, 199, 0.08)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 78px) !important;
  opacity: 0.48 !important;
}

.connect-card-top {
  grid-template-columns: minmax(0, 1fr) !important;
  padding: clamp(24px, 3.2vw, 38px) !important;
  border-bottom: 1px solid rgba(117, 242, 199, 0.13);
}

.connect-app-stack,
.connect-link-row,
.connect-card-premium .connect-primary-action,
.connect-card .connect-actions-cabinet,
.connect-card [data-raw-qr] {
  display: none !important;
}

.connect-copy > span,
.install-panel-title > span {
  width: fit-content;
  border: 1px solid rgba(117, 242, 199, 0.28);
  border-radius: 999px;
  padding: 7px 12px;
  background: rgba(117, 242, 199, 0.075);
  color: #75f2c7 !important;
  letter-spacing: 0.08em !important;
}

.connect-copy > b {
  max-width: 880px !important;
  margin-top: 16px !important;
  font-size: clamp(36px, 4.2vw, 58px) !important;
  line-height: 0.96 !important;
  letter-spacing: 0 !important;
}

.connect-card-premium .connect-note {
  max-width: 780px !important;
  margin-top: 14px !important;
  color: rgba(248, 252, 255, 0.76) !important;
}

.connect-assurance {
  display: none !important;
}

.install-panel-premium {
  display: grid !important;
  gap: 18px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: clamp(22px, 3vw, 34px) !important;
  background:
    radial-gradient(circle at 76% 10%, rgba(117, 242, 199, 0.12), transparent 28%),
    rgba(3, 8, 19, 0.58) !important;
  box-shadow: none !important;
}

.install-panel-premium[hidden] {
  display: none !important;
}

.install-panel-premium .install-panel-head {
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.7fr) !important;
  gap: 18px !important;
  align-items: stretch !important;
}

.install-panel-title {
  display: grid;
  gap: 12px;
  align-content: center;
}

.install-panel-title > b {
  margin: 0 !important;
  font-size: clamp(28px, 3vw, 44px) !important;
  line-height: 1.02 !important;
  letter-spacing: 0 !important;
}

.install-panel-title > small {
  max-width: 64ch;
  color: rgba(248, 252, 255, 0.70) !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
}

.install-selected-device {
  min-height: 150px !important;
  border-color: rgba(117, 242, 199, 0.22) !important;
  border-radius: 22px !important;
  padding: 18px !important;
  background:
    linear-gradient(135deg, rgba(117, 242, 199, 0.10), rgba(116, 226, 255, 0.055)),
    rgba(9, 16, 31, 0.72) !important;
}

.install-selected-device > span {
  width: 54px !important;
  height: 54px !important;
  color: #75f2c7 !important;
  background: rgba(117, 242, 199, 0.10) !important;
}

.install-panel-premium .install-os-pills,
.install-panel-premium .install-app-pills {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 0 !important;
}

.install-panel-premium .install-app-pills {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.install-panel-premium .install-pill {
  min-height: 48px !important;
  border-color: rgba(116, 226, 255, 0.14) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.032) !important;
  color: rgba(248, 252, 255, 0.78) !important;
}

.install-panel-premium .install-pill span:last-child {
  min-width: 0 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.08 !important;
}

.install-panel-premium .install-pill.is-active {
  border-color: rgba(117, 242, 199, 0.48) !important;
  background:
    linear-gradient(135deg, rgba(117, 242, 199, 0.16), rgba(116, 226, 255, 0.08)),
    rgba(8, 20, 30, 0.92) !important;
  color: #ffffff !important;
  box-shadow: 0 0 28px rgba(117, 242, 199, 0.08) !important;
}

.install-route-card {
  grid-template-columns: auto minmax(0, 1fr) !important;
  border-color: rgba(117, 242, 199, 0.18) !important;
  border-radius: 22px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(8, 13, 28, 0.80) !important;
}

.install-panel-premium .install-steps {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-top: 2px !important;
}

.install-panel-premium .install-step {
  min-height: 240px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 14px !important;
  border-color: rgba(116, 226, 255, 0.14) !important;
  border-radius: 20px !important;
  padding: 18px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.046), rgba(255, 255, 255, 0.018)),
    rgba(7, 12, 26, 0.76) !important;
}

.install-panel-premium .install-step > span {
  width: 42px !important;
  height: 42px !important;
  border-color: rgba(117, 242, 199, 0.26) !important;
  background: rgba(117, 242, 199, 0.10) !important;
  color: #75f2c7 !important;
}

.install-step b {
  font-size: 18px !important;
  letter-spacing: 0 !important;
}

.install-step small {
  color: rgba(248, 252, 255, 0.64) !important;
}

.install-download-actions {
  display: grid;
  width: 100%;
  gap: 8px;
  align-self: end;
  justify-self: stretch;
}

.install-download-actions a[hidden] {
  display: none !important;
}

.install-panel-premium .install-step a,
.install-panel-premium .install-step button {
  width: 100% !important;
  min-height: 48px !important;
  justify-content: center !important;
  border-radius: 14px !important;
  padding: 0 14px !important;
  text-align: center !important;
}

.install-panel-premium .install-step:nth-child(1) a {
  border-color: rgba(116, 226, 255, 0.25) !important;
  background:
    linear-gradient(135deg, rgba(116, 226, 255, 0.15), rgba(155, 121, 255, 0.10)),
    rgba(10, 16, 32, 0.80) !important;
}

.install-panel-premium .install-step:nth-child(2) a {
  border-color: rgba(117, 242, 199, 0.40) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.25), transparent 45%),
    linear-gradient(135deg, rgba(117, 242, 199, 0.95), rgba(116, 226, 255, 0.78)) !important;
  color: #041216 !important;
}

.install-panel-premium .install-step:nth-child(3)::after {
  content: "Готово";
  display: inline-flex;
  width: auto;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  align-self: end;
  justify-self: stretch;
  border: 1px solid rgba(117, 242, 199, 0.20);
  border-radius: 14px;
  background: rgba(117, 242, 199, 0.075);
  color: rgba(248, 252, 255, 0.82);
  font-weight: 950;
}

.install-panel-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.install-panel-actions [data-raw-qr] {
  display: none !important;
}

@media (max-width: 1120px) {
  .cabinet-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .profile-card {
    min-height: 0 !important;
  }
}

@media (max-width: 900px) {
  .dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .install-panel-premium .install-panel-head,
  .install-panel-premium .install-steps {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .install-panel-premium .install-os-pills,
  .install-panel-premium .install-app-pills,
  .install-panel-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  .dashboard-grid,
  .install-panel-premium .install-os-pills,
  .install-panel-premium .install-app-pills,
  .install-panel-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .connect-card-top,
  .install-panel-premium {
    padding: 20px !important;
  }
}

/* 2026-05-20 cabinet de-clutter: readable traffic, compact one-click connector. */
.dashboard-grid {
  grid-template-columns: repeat(4, minmax(132px, 1fr)) !important;
  gap: 10px !important;
}

.profile-card,
.dashboard-grid > .dash-card:not(.connect-card) {
  min-height: 132px !important;
}

.dashboard-grid > .dash-card:not(.connect-card) {
  grid-template-rows: 18px 36px minmax(18px, 1fr) !important;
  gap: 8px !important;
  padding: 16px !important;
}

.dashboard-grid > .dash-card:not(.connect-card) > span {
  font-size: 11px !important;
  line-height: 1 !important;
}

.dashboard-grid > .dash-card:not(.connect-card) > b {
  align-self: end !important;
  font-size: clamp(20px, 1.55vw, 26px) !important;
  line-height: 1 !important;
  white-space: normal !important;
}

.dashboard-grid > .dash-card:not(.connect-card) [data-cabinet-traffic] {
  font-size: clamp(18px, 1.35vw, 23px) !important;
  white-space: nowrap !important;
}

.dashboard-grid > .dash-card:not(.connect-card) .meter {
  width: 100% !important;
  height: 7px !important;
  align-self: start !important;
  margin: 2px 0 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.dashboard-grid > .dash-card:not(.connect-card) .meter i {
  border-radius: inherit !important;
  background: linear-gradient(90deg, #75f2c7, #74e2ff) !important;
}

.connect-card-premium {
  padding: clamp(16px, 2vw, 22px) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(117, 242, 199, 0.12), transparent 34%),
    linear-gradient(135deg, rgba(7, 14, 27, 0.98), rgba(5, 8, 19, 0.98)) !important;
}

.connect-card-premium .connect-card-top,
.connect-card-premium .connect-link-row,
.connect-card-premium .connect-primary-action,
.connect-card-premium .connect-actions-cabinet,
.connect-card-premium .install-route-card,
.connect-card-premium .install-panel-actions,
.connect-card-premium .install-step:nth-child(3) {
  display: none !important;
}

.install-panel-premium {
  display: grid !important;
  gap: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.install-panel-premium[hidden] {
  display: none !important;
}

.install-panel-premium .install-panel-head {
  grid-template-columns: minmax(0, 1fr) minmax(148px, auto) !important;
  gap: 14px !important;
  align-items: stretch !important;
  padding: 18px !important;
  border: 1px solid rgba(117, 242, 199, 0.18) !important;
  border-radius: 20px !important;
  background:
    linear-gradient(135deg, rgba(117, 242, 199, 0.09), rgba(116, 226, 255, 0.04)),
    rgba(7, 12, 25, 0.72) !important;
}

.install-panel-title {
  gap: 8px !important;
}

.install-panel-title > span {
  padding: 5px 9px !important;
  font-size: 10px !important;
  letter-spacing: 0.06em !important;
}

.install-panel-title > b {
  font-size: clamp(25px, 2.4vw, 34px) !important;
  line-height: 1.02 !important;
}

.install-panel-title > small {
  max-width: 62ch !important;
  font-size: 13px !important;
  line-height: 1.38 !important;
}

.install-selected-device {
  min-height: 0 !important;
  min-width: 148px !important;
  border-radius: 18px !important;
  padding: 14px !important;
  gap: 10px !important;
}

.install-selected-device > span {
  width: 38px !important;
  height: 38px !important;
}

.install-selected-device small {
  font-size: 9px !important;
}

.install-selected-device b {
  font-size: 13px !important;
}

.install-panel-premium .install-os-pills,
.install-panel-premium .install-app-pills {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)) !important;
  gap: 8px !important;
}

.install-panel-premium .install-app-pills {
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)) !important;
}

.install-panel-premium .install-pill {
  min-height: 38px !important;
  border-radius: 12px !important;
  padding: 0 12px !important;
  font-size: 11px !important;
}

.install-panel-premium .install-steps {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 2px 0 0 !important;
}

.install-panel-premium .install-step {
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  gap: 10px 12px !important;
  align-items: start !important;
  padding: 16px !important;
  border-radius: 18px !important;
}

.install-panel-premium .install-step > span {
  grid-row: 1 / 3 !important;
  width: 38px !important;
  height: 38px !important;
}

.install-step b {
  font-size: 16px !important;
  line-height: 1.1 !important;
}

.install-step small {
  font-size: 12px !important;
  line-height: 1.35 !important;
}

.install-download-actions,
.install-panel-premium .install-step > a {
  grid-column: 2 !important;
  align-self: end !important;
}

.install-panel-premium .install-step a,
.install-panel-premium .install-step button {
  min-height: 42px !important;
  border-radius: 13px !important;
}

@media (max-width: 900px) {
  .dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .install-panel-premium .install-panel-head,
  .install-panel-premium .install-steps {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .install-selected-device {
    width: 100% !important;
  }
}

@media (max-width: 560px) {
  .dashboard-grid,
  .install-panel-premium .install-os-pills,
  .install-panel-premium .install-app-pills {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* 2026-05-20 selected OS dropdown: the "Выбрано" card owns OS choice now. */
.install-panel-premium,
.install-panel-premium .install-panel-head {
  overflow: visible !important;
}

.install-panel-premium .install-os-pills {
  display: none !important;
}

.install-selected-device[data-install-os-select] {
  position: relative !important;
  z-index: 20 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
  min-width: 190px !important;
  min-height: 0 !important;
  align-content: start !important;
  padding: 10px !important;
  overflow: visible !important;
}

.install-os-current {
  display: grid !important;
  width: 100% !important;
  min-height: 72px !important;
  grid-template-columns: 42px minmax(0, 1fr) 12px !important;
  gap: 12px !important;
  align-items: center !important;
  border: 1px solid rgba(117, 242, 199, 0.22) !important;
  border-radius: 16px !important;
  padding: 10px 12px !important;
  background:
    linear-gradient(135deg, rgba(117, 242, 199, 0.10), rgba(116, 226, 255, 0.045)),
    rgba(6, 13, 25, 0.72) !important;
  color: #ffffff !important;
  text-align: left !important;
}

.install-os-current:hover,
.install-selected-device.is-open .install-os-current {
  border-color: rgba(117, 242, 199, 0.54) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 26px rgba(117, 242, 199, 0.12) !important;
}

.install-os-current [data-install-device-icon] {
  display: grid !important;
  width: 42px !important;
  height: 42px !important;
  place-items: center !important;
  border-radius: 14px !important;
  background: rgba(117, 242, 199, 0.11) !important;
  color: #75f2c7 !important;
}

.install-os-current [data-install-device-icon] svg {
  width: 23px !important;
  height: 23px !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

.install-os-current small,
.install-os-current b {
  display: block !important;
}

.install-os-current small {
  margin: 0 0 3px !important;
  color: rgba(248, 252, 255, 0.54) !important;
  font-size: 9px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

.install-os-current b {
  margin: 0 !important;
  color: #ffffff !important;
  font-size: 14px !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
}

.install-os-current i {
  display: block !important;
  width: 9px !important;
  height: 9px !important;
  border-right: 2px solid rgba(117, 242, 199, 0.82) !important;
  border-bottom: 2px solid rgba(117, 242, 199, 0.82) !important;
  transform: rotate(45deg) translateY(-2px) !important;
  transition: transform 160ms ease !important;
}

.install-selected-device.is-open .install-os-current i {
  transform: rotate(45deg) translateY(-2px) !important;
}

.install-os-menu[hidden] {
  display: none !important;
}

.install-os-menu {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 10px !important;
  left: 10px !important;
  z-index: 50 !important;
  display: grid !important;
  gap: 6px !important;
  border: 1px solid rgba(117, 242, 199, 0.28) !important;
  border-radius: 16px !important;
  padding: 8px !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(117, 242, 199, 0.12), transparent 46%),
    linear-gradient(180deg, rgba(9, 17, 32, 0.98), rgba(4, 8, 20, 0.98)) !important;
  box-shadow:
    0 20px 48px rgba(0, 0, 0, 0.42),
    0 0 24px rgba(117, 242, 199, 0.10) !important;
}

.install-os-option {
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) !important;
  gap: 9px !important;
  width: 100% !important;
  min-height: 40px !important;
  align-items: center !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  padding: 0 10px !important;
  background: rgba(255, 255, 255, 0.026) !important;
  color: rgba(248, 252, 255, 0.78) !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  text-align: left !important;
}

.install-os-option:hover,
.install-os-option.is-active {
  border-color: rgba(117, 242, 199, 0.44) !important;
  background:
    linear-gradient(135deg, rgba(117, 242, 199, 0.13), rgba(116, 226, 255, 0.06)),
    rgba(8, 20, 30, 0.90) !important;
  color: #ffffff !important;
}

.install-os-option .install-pill-icon {
  width: 28px !important;
  height: 28px !important;
  color: #75f2c7 !important;
}

.install-os-option .install-pill-icon svg {
  width: 19px !important;
  height: 19px !important;
}

.install-auto-os {
  display: inline-flex !important;
  width: 100% !important;
  min-height: 34px !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(116, 226, 255, 0.18) !important;
  border-radius: 12px !important;
  padding: 0 10px !important;
  background: rgba(116, 226, 255, 0.055) !important;
  color: rgba(199, 255, 238, 0.92) !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

.install-auto-os:hover {
  border-color: rgba(117, 242, 199, 0.44) !important;
  background: rgba(117, 242, 199, 0.11) !important;
  color: #ffffff !important;
}

@media (max-width: 900px) {
  .install-selected-device[data-install-os-select] {
    min-width: 0 !important;
  }
}

/* 2026-05-20 final cabinet polish: violet logo, one header button language, compact OS picker. */
.site-header {
  gap: 10px !important;
}

.site-header .brand-mark {
  border-color: rgba(189, 99, 255, 0.78) !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(189, 99, 255, 0.14), transparent 58%),
    #050812 !important;
  box-shadow:
    0 0 0 8px rgba(139, 92, 246, 0.085),
    0 0 30px rgba(189, 99, 255, 0.34),
    0 0 56px rgba(217, 70, 239, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.09) !important;
}

.site-header .brand-mark::before {
  background:
    conic-gradient(
      from 0deg,
      rgba(189, 99, 255, 0),
      rgba(189, 99, 255, 0.22),
      rgba(189, 99, 255, 1),
      rgba(139, 92, 246, 0.82),
      rgba(217, 70, 239, 0.58),
      rgba(189, 99, 255, 1),
      rgba(189, 99, 255, 0)
    ) !important;
  filter:
    drop-shadow(0 0 8px rgba(189, 99, 255, 0.90))
    drop-shadow(0 0 18px rgba(217, 70, 239, 0.38)) !important;
  animation: header-logo-violet-spin 2.7s linear infinite !important;
}

.site-header .brand-mark::after {
  background:
    radial-gradient(circle, rgba(189, 99, 255, 0.36), transparent 62%) !important;
  filter: blur(10px) !important;
  opacity: 0.88 !important;
}

@keyframes header-logo-violet-spin {
  to {
    transform: rotate(1turn);
  }
}

.main-nav {
  gap: 6px !important;
}

.main-nav a,
.main-nav button,
.main-nav a.nav-auth-link,
.main-nav a[aria-current="page"],
.main-nav a.nav-auth-link[aria-current="page"],
.header-auth-actions button,
.header-account,
.header-logout {
  min-height: 40px !important;
  height: 40px !important;
  border: 1px solid rgba(155, 121, 255, 0.34) !important;
  border-radius: 999px !important;
  padding: 0 clamp(12px, 1vw, 18px) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(11, 13, 30, 0.78) !important;
  color: rgba(248, 242, 255, 0.92) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 8px 20px rgba(139, 92, 255, 0.08) !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
  text-shadow: none !important;
}

.main-nav a:hover,
.main-nav a:focus-visible,
.main-nav button:hover,
.main-nav button:focus-visible,
.main-nav a[aria-current="page"],
.main-nav a.nav-auth-link[aria-current="page"],
.main-nav a.nav-auth-link:hover,
.main-nav a.nav-auth-link:focus-visible,
.header-auth-actions button:hover,
.header-auth-actions button:focus-visible,
.header-account:hover,
.header-account:focus-visible,
.header-logout:hover,
.header-logout:focus-visible {
  border-color: rgba(117, 242, 199, 0.50) !important;
  background:
    linear-gradient(135deg, rgba(117, 242, 199, 0.15), rgba(116, 226, 255, 0.08)),
    rgba(9, 17, 31, 0.88) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 28px rgba(116, 226, 255, 0.10) !important;
  transform: translateY(-1px);
}

.header-account-group {
  gap: 8px !important;
}

.header-account {
  max-width: 210px !important;
}

.install-panel-premium .install-panel-head {
  grid-template-columns: minmax(0, 1fr) minmax(160px, 178px) !important;
  gap: 12px !important;
}

.install-panel-title > b {
  font-size: clamp(22px, 2.1vw, 30px) !important;
}

.install-panel-title > small {
  font-size: 12px !important;
}

.install-selected-device[data-install-os-select] {
  min-width: 160px !important;
  padding: 8px !important;
  border-radius: 16px !important;
}

.install-os-current {
  min-height: 60px !important;
  grid-template-columns: 34px minmax(0, 1fr) 10px !important;
  gap: 9px !important;
  border-radius: 14px !important;
  padding: 8px 10px !important;
}

.install-os-current [data-install-device-icon] {
  width: 34px !important;
  height: 34px !important;
  border-radius: 11px !important;
}

.install-os-current [data-install-device-icon] svg {
  width: 22px !important;
  height: 22px !important;
}

.install-os-current small {
  font-size: 8px !important;
}

.install-os-current b {
  font-size: 12px !important;
  line-height: 1.05 !important;
}

.install-auto-os {
  min-height: 32px !important;
  border-color: rgba(155, 121, 255, 0.28) !important;
  border-radius: 12px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.018)),
    rgba(11, 13, 30, 0.80) !important;
  color: rgba(248, 242, 255, 0.88) !important;
  font-size: 9px !important;
  letter-spacing: 0 !important;
}

.install-auto-os:hover,
.install-auto-os:focus-visible {
  border-color: rgba(117, 242, 199, 0.48) !important;
  background:
    linear-gradient(135deg, rgba(117, 242, 199, 0.14), rgba(116, 226, 255, 0.08)),
    rgba(9, 17, 31, 0.88) !important;
  color: #ffffff !important;
}

.install-os-menu {
  right: 8px !important;
  left: 8px !important;
  top: calc(100% + 6px) !important;
  max-height: min(286px, calc(100vh - 210px)) !important;
  overflow-y: auto !important;
  gap: 5px !important;
  padding: 7px !important;
  border-radius: 14px !important;
}

.install-os-option {
  min-height: 34px !important;
  grid-template-columns: 24px minmax(0, 1fr) !important;
  gap: 7px !important;
  border-radius: 10px !important;
  padding: 0 8px !important;
  font-size: 10px !important;
  letter-spacing: 0 !important;
}

.install-os-option .install-pill-icon {
  width: 24px !important;
  height: 24px !important;
  border-radius: 8px !important;
}

.install-os-option .install-pill-icon svg {
  width: 17px !important;
  height: 17px !important;
}

.install-panel-premium .install-app-pills {
  grid-template-columns: repeat(auto-fit, minmax(138px, 1fr)) !important;
}

.install-panel-premium .install-pill-app {
  min-height: 48px !important;
  padding: 0 12px 0 8px !important;
}

.install-app-icon,
.install-pill-icon.install-app-icon {
  width: 36px !important;
  height: 36px !important;
  flex: 0 0 36px !important;
  padding: 0 !important;
  border: 1px solid rgba(116, 226, 255, 0.18) !important;
  border-radius: 12px !important;
  background: rgba(3, 6, 14, 0.88) !important;
  overflow: hidden !important;
  box-shadow: 0 0 16px rgba(139, 92, 255, 0.12) !important;
}

.install-app-icon img,
.install-pill-icon.install-app-icon img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transform: scale(1.04) !important;
}

.install-import-actions {
  grid-column: 2 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) 56px !important;
  gap: 8px !important;
  align-self: end !important;
}

.install-panel-premium .install-step .install-import-actions a,
.install-panel-premium .install-step .install-import-actions button {
  min-height: 42px !important;
  width: 100% !important;
  border-radius: 13px !important;
  padding: 0 12px !important;
  font-size: 13px !important;
}

.install-panel-premium .install-step .install-import-actions button {
  border: 1px solid rgba(155, 121, 255, 0.28) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.018)),
    rgba(11, 13, 30, 0.78) !important;
  color: rgba(248, 242, 255, 0.92) !important;
}

.install-panel-premium .install-step .install-import-actions button:hover,
.install-panel-premium .install-step .install-import-actions button:focus-visible {
  border-color: rgba(117, 242, 199, 0.48) !important;
  background:
    linear-gradient(135deg, rgba(117, 242, 199, 0.14), rgba(116, 226, 255, 0.08)),
    rgba(9, 17, 31, 0.88) !important;
  color: #ffffff !important;
}

.install-download-actions,
.install-panel-premium .install-step > a,
.install-panel-premium .install-step > button {
  grid-column: 2 !important;
}

@media (max-width: 1180px) {
  .main-nav a,
  .main-nav button,
  .main-nav a.nav-auth-link,
  .main-nav a[aria-current="page"],
  .main-nav a.nav-auth-link[aria-current="page"],
  .header-account,
  .header-logout {
    padding-inline: 12px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 900px) {
  .install-panel-premium .install-panel-head {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .install-selected-device[data-install-os-select] {
    width: min(100%, 220px) !important;
    justify-self: start !important;
  }

  .install-import-actions {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 56px !important;
  }
}

@media (max-width: 560px) {
  .install-import-actions {
    grid-column: 1 !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .install-panel-premium .install-step {
    grid-template-columns: 38px minmax(0, 1fr) !important;
  }
}

/* 2026-05-20 final pass: violet logo, one button language, tighter OS menu. */
.site-header {
  width: min(1260px, calc(100vw - 32px)) !important;
  gap: 10px !important;
}

.site-header .brand-mark {
  border-color: rgba(202, 112, 255, 0.88) !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(189, 99, 255, 0.18), transparent 58%),
    #050812 !important;
  box-shadow:
    0 0 0 8px rgba(139, 92, 246, 0.12),
    0 0 28px rgba(189, 99, 255, 0.50),
    0 0 62px rgba(217, 70, 239, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.10) !important;
}

.site-header .brand-mark::before {
  inset: -8px !important;
  padding: 2px !important;
  background:
    conic-gradient(
      from 0deg,
      rgba(189, 99, 255, 0),
      rgba(189, 99, 255, 0.30),
      rgba(202, 112, 255, 1),
      rgba(139, 92, 246, 0.95),
      rgba(217, 70, 239, 0.72),
      rgba(202, 112, 255, 1),
      rgba(189, 99, 255, 0)
    ) !important;
  filter:
    drop-shadow(0 0 9px rgba(202, 112, 255, 0.95))
    drop-shadow(0 0 22px rgba(217, 70, 239, 0.46)) !important;
  animation: header-logo-violet-spin 2.8s linear infinite !important;
}

.site-header .brand-mark::after {
  inset: -16px !important;
  background: radial-gradient(circle, rgba(189, 99, 255, 0.42), transparent 64%) !important;
  filter: blur(11px) !important;
  opacity: 0.92 !important;
}

.main-nav {
  gap: 5px !important;
}

.main-nav a,
.main-nav button,
.main-nav a.nav-auth-link,
.main-nav a[aria-current="page"],
.main-nav a.nav-auth-link[aria-current="page"],
.header-auth-actions button,
.header-account,
.header-logout {
  height: 38px !important;
  min-height: 38px !important;
  border: 1px solid rgba(155, 121, 255, 0.36) !important;
  border-radius: 999px !important;
  padding: 0 clamp(11px, 0.95vw, 16px) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(11, 13, 30, 0.78) !important;
  color: rgba(248, 242, 255, 0.92) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 8px 20px rgba(139, 92, 255, 0.08) !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}

.main-nav a:hover,
.main-nav a:focus-visible,
.main-nav button:hover,
.main-nav button:focus-visible,
.main-nav a[aria-current="page"],
.main-nav a.nav-auth-link[aria-current="page"],
.main-nav a.nav-auth-link:hover,
.main-nav a.nav-auth-link:focus-visible,
.header-auth-actions button:hover,
.header-auth-actions button:focus-visible,
.header-account:hover,
.header-account:focus-visible,
.header-logout:hover,
.header-logout:focus-visible {
  border-color: rgba(202, 112, 255, 0.62) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(202, 112, 255, 0.22), transparent 62%),
    linear-gradient(90deg, rgba(139, 92, 255, 0.18), rgba(82, 116, 255, 0.13)),
    rgba(11, 13, 30, 0.90) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(202, 112, 255, 0.12),
    0 12px 28px rgba(139, 92, 255, 0.16) !important;
  transform: translateY(-1px);
}

.header-account {
  min-width: 174px !important;
  max-width: 216px !important;
}

.header-logout {
  min-width: 76px !important;
}

.connect-card-premium,
.dash-card.connect-card {
  overflow: visible !important;
}

.install-panel-premium .install-panel-head {
  grid-template-columns: minmax(0, 1fr) minmax(176px, 196px) !important;
  gap: 12px !important;
  padding: 14px !important;
}

.install-panel-title > span {
  min-height: 26px !important;
  padding: 0 9px !important;
  align-items: center !important;
}

.install-panel-title > b {
  font-size: clamp(22px, 2vw, 28px) !important;
  line-height: 1.05 !important;
}

.install-panel-title > small {
  max-width: 58ch !important;
  font-size: 12px !important;
}

.install-selected-device[data-install-os-select] {
  width: 196px !important;
  min-width: 176px !important;
  justify-self: end !important;
  padding: 7px !important;
}

.install-os-current {
  min-height: 54px !important;
  grid-template-columns: 32px minmax(0, 1fr) 10px !important;
  gap: 8px !important;
  padding: 7px 9px !important;
}

.install-os-current [data-install-device-icon] {
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
}

.install-os-current [data-install-device-icon] svg,
.install-os-option .install-pill-icon svg,
.install-panel-premium .install-pill .install-pill-icon svg {
  fill: currentColor !important;
  stroke: none !important;
}

.install-os-current [data-install-device-icon] svg {
  width: 21px !important;
  height: 21px !important;
}

.install-os-current small {
  margin-bottom: 2px !important;
  font-size: 7px !important;
}

.install-os-current b {
  font-size: 11px !important;
  line-height: 1.08 !important;
  white-space: nowrap !important;
}

.install-auto-os {
  min-height: 28px !important;
  border-color: rgba(155, 121, 255, 0.32) !important;
  border-radius: 10px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.018)),
    rgba(11, 13, 30, 0.78) !important;
  color: rgba(248, 242, 255, 0.88) !important;
  font-size: 8px !important;
  letter-spacing: 0 !important;
}

.install-auto-os:hover,
.install-auto-os:focus-visible {
  border-color: rgba(202, 112, 255, 0.56) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(202, 112, 255, 0.18), transparent 62%),
    rgba(11, 13, 30, 0.90) !important;
}

.install-os-menu {
  top: calc(100% + 6px) !important;
  bottom: auto !important;
  left: auto !important;
  right: 0 !important;
  width: min(342px, calc(100vw - 36px)) !important;
  max-height: none !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
  padding: 7px !important;
  overflow: visible !important;
  border-color: rgba(155, 121, 255, 0.36) !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(189, 99, 255, 0.14), transparent 46%),
    linear-gradient(180deg, rgba(11, 13, 30, 0.98), rgba(5, 7, 18, 0.98)) !important;
  box-shadow:
    0 20px 48px rgba(0, 0, 0, 0.42),
    0 0 28px rgba(139, 92, 255, 0.16) !important;
}

.install-selected-device.is-drop-up .install-os-menu {
  top: calc(100% + 6px) !important;
  bottom: auto !important;
}

.connect-card .install-os-option,
.install-os-option {
  height: 32px !important;
  min-height: 32px !important;
  grid-template-columns: 22px minmax(0, 1fr) !important;
  gap: 7px !important;
  padding: 0 8px !important;
  border-color: rgba(155, 121, 255, 0.18) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
    rgba(11, 13, 30, 0.70) !important;
  font-size: 10px !important;
  letter-spacing: 0 !important;
}

.connect-card .install-os-option:hover,
.connect-card .install-os-option.is-active,
.install-os-option:hover,
.install-os-option.is-active {
  border-color: rgba(202, 112, 255, 0.52) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(202, 112, 255, 0.18), transparent 62%),
    rgba(11, 13, 30, 0.92) !important;
}

.connect-card .install-os-option .install-pill-icon,
.install-os-option .install-pill-icon {
  width: 22px !important;
  height: 22px !important;
  border-radius: 8px !important;
  color: #c978ff !important;
}

.connect-card .install-os-option .install-pill-icon svg,
.install-os-option .install-pill-icon svg {
  width: 16px !important;
  height: 16px !important;
}

.install-os-option span:last-child {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.install-panel-premium .install-app-pills {
  grid-template-columns: repeat(auto-fit, minmax(124px, 1fr)) !important;
  gap: 8px !important;
}

.install-panel-premium .install-pill-app {
  min-height: 44px !important;
  padding: 0 10px 0 6px !important;
}

.install-app-icon,
.install-pill-icon.install-app-icon {
  width: 34px !important;
  height: 34px !important;
  flex-basis: 34px !important;
  border-radius: 10px !important;
}

.install-app-icon img,
.install-pill-icon.install-app-icon img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transform: scale(1.32) !important;
  transform-origin: center !important;
}

.install-steps {
  gap: 10px !important;
}

.install-panel-premium .install-step {
  padding: 14px !important;
  grid-template-columns: 36px minmax(0, 1fr) !important;
  gap: 8px 10px !important;
}

.install-panel-premium .install-step > span {
  width: 32px !important;
  height: 32px !important;
}

.install-panel-premium .install-step a,
.install-panel-premium .install-step button,
.install-download-actions a,
.install-download-actions button,
.install-import-actions a,
.install-import-actions button {
  min-height: 38px !important;
  border: 1px solid rgba(155, 121, 255, 0.36) !important;
  border-radius: 12px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(11, 13, 30, 0.78) !important;
  color: rgba(248, 242, 255, 0.94) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 8px 20px rgba(139, 92, 255, 0.08) !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

.install-panel-premium .install-step a:hover,
.install-panel-premium .install-step a:focus-visible,
.install-panel-premium .install-step button:hover,
.install-panel-premium .install-step button:focus-visible,
.install-download-actions a:hover,
.install-download-actions a:focus-visible,
.install-download-actions button:hover,
.install-download-actions button:focus-visible,
.install-import-actions a:hover,
.install-import-actions a:focus-visible,
.install-import-actions button:hover,
.install-import-actions button:focus-visible {
  border-color: rgba(202, 112, 255, 0.58) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(202, 112, 255, 0.20), transparent 62%),
    linear-gradient(90deg, rgba(139, 92, 255, 0.16), rgba(82, 116, 255, 0.12)),
    rgba(11, 13, 30, 0.90) !important;
  color: #ffffff !important;
}

.install-import-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px !important;
  gap: 6px !important;
}

.install-import-actions a,
.install-import-actions button {
  grid-column: auto !important;
}

.connect-card .install-import-actions [data-raw-qr],
.install-import-actions [data-raw-qr] {
  display: inline-flex !important;
  min-width: 44px !important;
  padding-inline: 0 !important;
}

@media (max-width: 1220px) {
  .main-nav a,
  .main-nav button,
  .main-nav a.nav-auth-link,
  .main-nav a[aria-current="page"],
  .main-nav a.nav-auth-link[aria-current="page"],
  .header-account,
  .header-logout {
    height: 36px !important;
    min-height: 36px !important;
    padding-inline: 10px !important;
    font-size: 12px !important;
  }

  .header-account {
    min-width: 152px !important;
    max-width: 178px !important;
  }

  .header-logout {
    min-width: 68px !important;
  }
}

@media (max-width: 900px) {
  .install-panel-premium .install-panel-head {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .install-selected-device[data-install-os-select] {
    width: min(100%, 220px) !important;
    justify-self: start !important;
  }
}

@media (max-width: 560px) {
  .install-os-menu {
    width: min(232px, calc(100vw - 36px)) !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .install-import-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* 2026-05-20 finish pass: violet logo, account-style header buttons, compact OS picker. */
.site-header .brand-mark {
  border-color: rgba(202, 112, 255, 0.92) !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(202, 112, 255, 0.20), transparent 58%),
    #050812 !important;
  box-shadow:
    0 0 0 8px rgba(139, 92, 246, 0.13),
    0 0 30px rgba(202, 112, 255, 0.58),
    0 0 66px rgba(217, 70, 239, 0.32),
    inset 0 0 0 1px rgba(255, 255, 255, 0.10) !important;
}

.site-header .brand-mark::before {
  background:
    conic-gradient(
      from 0deg,
      rgba(202, 112, 255, 0),
      rgba(202, 112, 255, 0.38),
      rgba(202, 112, 255, 1),
      rgba(139, 92, 246, 0.96),
      rgba(236, 72, 153, 0.62),
      rgba(202, 112, 255, 1),
      rgba(202, 112, 255, 0)
    ) !important;
  filter:
    drop-shadow(0 0 10px rgba(202, 112, 255, 0.95))
    drop-shadow(0 0 24px rgba(217, 70, 239, 0.48)) !important;
  animation: header-logo-violet-spin 2.8s linear infinite !important;
}

.site-header .brand-mark::after {
  background: radial-gradient(circle, rgba(202, 112, 255, 0.42), transparent 64%) !important;
}

.main-nav a,
.main-nav button,
.main-nav a.nav-auth-link,
.main-nav a[aria-current="page"],
.main-nav a.nav-auth-link[aria-current="page"],
.header-auth-actions button,
.header-account,
.header-logout {
  height: 38px !important;
  min-height: 38px !important;
  border: 1px solid rgba(117, 242, 199, 0.34) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(135deg, rgba(117, 242, 199, 0.15), rgba(116, 226, 255, 0.075)),
    rgba(7, 15, 25, 0.86) !important;
  color: #f6fffb !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(117, 242, 199, 0.08),
    0 12px 30px rgba(117, 242, 199, 0.075) !important;
  text-shadow: 0 0 18px rgba(117, 242, 199, 0.18) !important;
}

.main-nav a:hover,
.main-nav a:focus-visible,
.main-nav button:hover,
.main-nav button:focus-visible,
.main-nav a[aria-current="page"],
.main-nav a.nav-auth-link[aria-current="page"],
.main-nav a.nav-auth-link:hover,
.main-nav a.nav-auth-link:focus-visible,
.header-auth-actions button:hover,
.header-auth-actions button:focus-visible,
.header-account:hover,
.header-account:focus-visible,
.header-logout:hover,
.header-logout:focus-visible {
  border-color: rgba(117, 242, 199, 0.66) !important;
  background:
    linear-gradient(135deg, rgba(117, 242, 199, 0.25), rgba(116, 226, 255, 0.12)),
    rgba(8, 21, 31, 0.92) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    0 0 0 1px rgba(117, 242, 199, 0.14),
    0 14px 34px rgba(117, 242, 199, 0.13),
    0 0 24px rgba(117, 242, 199, 0.12) !important;
}

.install-panel-premium .install-panel-head {
  grid-template-columns: minmax(0, 1fr) 184px !important;
}

.install-selected-device[data-install-os-select] {
  width: 184px !important;
  min-width: 0 !important;
  padding: 6px !important;
}

.install-os-current {
  min-height: 50px !important;
  grid-template-columns: 30px minmax(0, 1fr) 10px !important;
  gap: 7px !important;
  padding: 6px 8px !important;
}

.install-os-current:focus,
.install-os-current:focus-visible {
  outline: none !important;
  border-color: rgba(117, 242, 199, 0.64) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(117, 242, 199, 0.12),
    0 0 28px rgba(117, 242, 199, 0.16) !important;
}

.install-os-current [data-install-device-icon] {
  width: 30px !important;
  height: 30px !important;
}

.install-os-current [data-install-device-icon] svg {
  width: 20px !important;
  height: 20px !important;
}

.install-os-current small {
  font-size: 7px !important;
}

.install-os-current b {
  font-size: 10px !important;
}

.install-auto-os {
  min-height: 28px !important;
  font-size: 8px !important;
}

.install-os-menu {
  right: 0 !important;
  left: auto !important;
  width: min(328px, calc(100vw - 32px)) !important;
  max-height: min(222px, calc(100vh - 32px)) !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
  overflow-y: auto !important;
}

.connect-card .install-os-option,
.install-os-option {
  height: 30px !important;
  min-height: 30px !important;
  grid-template-columns: 21px minmax(0, 1fr) !important;
  gap: 6px !important;
  padding: 0 7px !important;
  font-size: 8.5px !important;
}

.connect-card .install-os-option .install-pill-icon,
.install-os-option .install-pill-icon {
  width: 21px !important;
  height: 21px !important;
}

.connect-card .install-os-option .install-pill-icon svg,
.install-os-option .install-pill-icon svg {
  width: 15px !important;
  height: 15px !important;
}

.connect-card .install-os-option span:last-child,
.install-os-option span:last-child {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  text-transform: none !important;
}

.install-panel-title > b[data-install-title] span:not(.install-title-os-icon),
.install-os-current b {
  text-transform: none !important;
}

.install-panel-title > b[data-install-title] > span:not(.install-title-os-icon) {
  font: inherit !important;
  font-size: inherit !important;
  font-weight: 950 !important;
  line-height: 1.02 !important;
  color: #ffffff !important;
  letter-spacing: 0 !important;
}

.install-app-icon,
.install-pill-icon.install-app-icon,
.install-route-app .install-app-icon {
  padding: 0 !important;
  overflow: hidden !important;
}

.install-app-icon img,
.install-pill-icon.install-app-icon img,
.install-route-app .install-app-icon img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transform: scale(1.46) !important;
  transform-origin: center !important;
}

.install-import-actions {
  grid-column: 2 !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px !important;
  align-items: stretch !important;
}

.install-panel-premium .install-step .install-import-actions a,
.install-panel-premium .install-step .install-import-actions button {
  font-size: 11px !important;
  line-height: 1.05 !important;
  text-align: center !important;
  white-space: normal !important;
}

.connect-card .install-import-actions [data-raw-qr],
.install-import-actions [data-raw-qr] {
  display: inline-flex !important;
  min-width: 44px !important;
  padding: 0 !important;
  justify-content: center !important;
}

@media (max-width: 900px) {
  .install-panel-premium .install-panel-head {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .install-selected-device[data-install-os-select] {
    width: min(100%, 184px) !important;
  }
}

@media (max-width: 560px) {
  .install-os-menu {
    width: min(224px, calc(100vw - 32px)) !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .install-import-actions {
    grid-column: 1 / -1 !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* 2026-05-20 payment trial combo: 24h test lives inside the tariff hero. */
.pay-page .pay-trial-hero {
  grid-template-columns: minmax(0, 0.96fr) minmax(360px, 0.78fr) !important;
  align-items: center !important;
  gap: clamp(22px, 3.6vw, 58px) !important;
  margin-bottom: clamp(24px, 3vw, 38px) !important;
  padding: clamp(30px, 4.8vw, 62px) !important;
}

.pay-trial-copy {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  align-content: center;
  text-align: center;
}

.trial-hero-kicker {
  width: fit-content;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(117, 242, 199, 0.30);
  border-radius: 999px;
  padding: 0 14px;
  background:
    linear-gradient(135deg, rgba(117, 242, 199, 0.13), rgba(116, 226, 255, 0.07)),
    rgba(5, 11, 22, 0.72);
  color: #75f2c7;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.pay-page .pay-trial-hero h1 {
  max-width: 760px !important;
  margin: 16px auto 14px !important;
  text-align: center !important;
}

.pay-page .pay-trial-hero .lead {
  max-width: 720px !important;
  margin: 0 auto !important;
  text-align: center !important;
  color: rgba(248, 242, 255, 0.76) !important;
  font-weight: 750;
}

.pay-trial-actions {
  width: min(100%, 560px);
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px !important;
  margin-top: 24px;
}

.pay-trial-actions .page-home-button {
  width: min(100%, 260px) !important;
  min-height: 48px !important;
}

.pay-trial-actions .trial-pay-button {
  border-color: rgba(202, 112, 255, 0.52) !important;
  background:
    radial-gradient(circle at 24% 0%, rgba(202, 112, 255, 0.20), transparent 58%),
    linear-gradient(135deg, rgba(139, 92, 255, 0.18), rgba(82, 116, 255, 0.11)),
    rgba(11, 13, 30, 0.90) !important;
}

.pay-trial-visual {
  position: relative;
  z-index: 2;
  min-height: clamp(270px, 28vw, 360px);
}

.trial-orbit-shell {
  position: relative;
  width: min(100%, 520px);
  min-height: clamp(270px, 28vw, 360px);
  margin-inline: auto;
}

.trial-orbit-shell::before {
  position: absolute;
  right: clamp(18px, 4vw, 52px);
  bottom: clamp(-20px, -2vw, 0px);
  width: clamp(240px, 24vw, 360px);
  height: clamp(240px, 24vw, 360px);
  border: 1px solid rgba(117, 242, 199, 0.22);
  border-radius: 50%;
  background:
    radial-gradient(circle at 48% 48%, rgba(117, 242, 199, 0.13), transparent 58%),
    conic-gradient(from 110deg, rgba(202, 112, 255, 0.30), rgba(116, 226, 255, 0.22), transparent, rgba(117, 242, 199, 0.18), rgba(202, 112, 255, 0.30));
  opacity: 0.82;
  content: "";
  animation: orbit-spin 18s linear infinite;
}

.trial-orbit-shell .trial-route-card {
  position: absolute;
  left: 0;
  bottom: 10px;
  z-index: 2;
  width: min(430px, 86%);
  min-height: 178px;
}

.trial-orbit-shell .pay-ru-proof {
  position: absolute;
  top: clamp(10px, 2.4vw, 34px);
  right: 0;
  z-index: 3;
  width: min(320px, 68%);
}

.trial-orbit-shell .pay-hero-proof span {
  min-height: 150px !important;
  backdrop-filter: blur(14px);
}

.trial-orbit-shell .pay-hero-proof b {
  letter-spacing: 0 !important;
}

.trial-orbit-shell .trial-route-map::before {
  inset: 16px 46px 18px 42px !important;
}

.trial-orbit-shell .trial-route-map::after {
  inset: 34px 78px 30px 70px !important;
}

@media (max-width: 980px) {
  .pay-page .pay-trial-hero {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .pay-trial-visual {
    order: -1;
    min-height: 300px;
  }

  .trial-orbit-shell {
    min-height: 300px;
  }
}

@media (max-width: 640px) {
  .pay-page .pay-trial-hero {
    padding: 22px 16px !important;
  }

  .pay-page .pay-trial-hero h1 {
    font-size: 38px !important;
    line-height: 1.04 !important;
  }

  .pay-trial-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
  }

  .pay-trial-actions .page-home-button {
    width: 100% !important;
  }

  .pay-trial-visual,
  .trial-orbit-shell {
    min-height: 360px;
  }

  .trial-orbit-shell .trial-route-card,
  .trial-orbit-shell .pay-ru-proof {
    position: relative;
    inset: auto;
    width: 100%;
  }

  .trial-orbit-shell {
    display: grid;
    gap: 12px;
  }

  .trial-orbit-shell::before {
    right: 50%;
    bottom: 78px;
    transform: translateX(50%);
  }
}

/* 2026-05-20 payment visual cleanup: server labels without cards. */
.pay-trial-hero .trial-node,
.trial-orbit-shell .trial-node {
  min-width: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.pay-trial-hero .trial-node b,
.trial-orbit-shell .trial-node b {
  display: inline-flex;
  width: fit-content;
  min-height: 22px;
  align-items: center;
  border: 0 !important;
  padding: 0 !important;
  color: #ffffff !important;
  font-size: 14px !important;
  line-height: 1;
  text-shadow: 0 0 16px rgba(117, 242, 199, 0.34);
}

.pay-trial-hero .trial-node small,
.trial-orbit-shell .trial-node small {
  width: fit-content;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-shadow: 0 0 14px rgba(155, 121, 255, 0.38);
}

/* 2026-05-20 artifact cleanup and premium OS picker. */
body {
  background:
    radial-gradient(1200px 760px at 86% -10%, rgba(48, 74, 116, 0.32), transparent 62%),
    radial-gradient(900px 620px at 8% 8%, rgba(117, 242, 199, 0.09), transparent 66%),
    radial-gradient(920px 720px at 52% -18%, rgba(155, 121, 255, 0.13), transparent 68%),
    linear-gradient(180deg, #070b18 0%, #050714 44%, #04050d 100%) !important;
}

body::before {
  opacity: 0.42 !important;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.72), transparent 68%) !important;
}

body::after {
  background:
    radial-gradient(760px 520px at 84% 10%, rgba(116, 226, 255, 0.10), transparent 68%),
    radial-gradient(620px 460px at 18% 8%, rgba(202, 112, 255, 0.09), transparent 72%),
    radial-gradient(700px 520px at var(--mx) var(--my), rgba(117, 242, 199, 0.055), transparent 72%) !important;
  opacity: 1 !important;
}

.nova-hero::before,
.site-header::after,
.hero-console::after,
.pay-page .service-hero::before {
  display: none !important;
}

.nova-hero {
  background:
    radial-gradient(900px 520px at 92% 0%, rgba(116, 226, 255, 0.09), transparent 74%),
    radial-gradient(760px 520px at 66% 42%, rgba(155, 121, 255, 0.06), transparent 76%) !important;
}

.site-header::before {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.052), transparent 24%, rgba(116, 226, 255, 0.055) 56%, transparent),
    radial-gradient(520px 120px at 0% 50%, rgba(202, 112, 255, 0.14), transparent 72%),
    radial-gradient(520px 120px at 100% 50%, rgba(117, 242, 199, 0.10), transparent 72%) !important;
}

.hero-console {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.050), rgba(255, 255, 255, 0.014)),
    radial-gradient(780px 520px at 80% 10%, rgba(116, 226, 255, 0.075), transparent 70%),
    rgba(8, 12, 28, 0.84) !important;
}

.console-body {
  background:
    radial-gradient(520px 380px at 50% 46%, rgba(117, 242, 199, 0.10), transparent 72%),
    radial-gradient(620px 420px at 70% 58%, rgba(116, 226, 255, 0.09), transparent 74%),
    linear-gradient(135deg, rgba(9, 13, 31, 0.88), rgba(12, 10, 29, 0.78)) !important;
}

.pay-page .pay-trial-hero .trial-node {
  display: none !important;
}

.pay-page .trial-orbit-shell::before {
  background:
    radial-gradient(circle at 48% 48%, rgba(117, 242, 199, 0.12), transparent 60%),
    radial-gradient(circle at 66% 22%, rgba(116, 226, 255, 0.10), transparent 58%),
    rgba(117, 242, 199, 0.035) !important;
  border-color: rgba(117, 242, 199, 0.18) !important;
  animation: none !important;
}

.install-panel-title > span[data-install-kicker],
.install-auto-os,
[data-install-auto-os] {
  display: none !important;
}

.install-panel-title {
  align-content: center !important;
  gap: 10px !important;
}

.install-panel-title > b[data-install-title] {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 44px !important;
}

.install-title-os-icon {
  flex: 0 0 44px;
  display: inline-grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(117, 242, 199, 0.28);
  border-radius: 15px;
  background:
    radial-gradient(circle at 35% 20%, rgba(255, 255, 255, 0.18), transparent 46%),
    linear-gradient(135deg, rgba(117, 242, 199, 0.22), rgba(155, 121, 255, 0.16)),
    rgba(8, 15, 29, 0.92);
  color: #75f2c7;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 14px 28px rgba(0, 0, 0, 0.22);
}

.install-title-os-icon svg {
  width: 25px;
  height: 25px;
  fill: currentColor;
  stroke: none;
}

.install-selected-device[data-install-os-select] {
  width: 228px !important;
  min-width: 216px !important;
  border-radius: 22px !important;
  padding: 10px !important;
  background:
    linear-gradient(145deg, rgba(117, 242, 199, 0.11), rgba(155, 121, 255, 0.08)),
    rgba(7, 12, 26, 0.82) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.075),
    0 18px 46px rgba(0, 0, 0, 0.24) !important;
}

.install-os-current {
  min-height: 64px !important;
  grid-template-columns: 38px minmax(0, 1fr) 14px !important;
  gap: 10px !important;
  border-radius: 17px !important;
  padding: 10px 12px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.018)),
    rgba(12, 16, 35, 0.92) !important;
}

.install-os-current [data-install-device-icon] {
  width: 38px !important;
  height: 38px !important;
  border-radius: 14px !important;
  color: #75f2c7 !important;
  background:
    radial-gradient(circle at 35% 20%, rgba(255, 255, 255, 0.20), transparent 44%),
    linear-gradient(135deg, rgba(117, 242, 199, 0.23), rgba(155, 121, 255, 0.16)) !important;
}

.install-os-current [data-install-device-icon] svg {
  width: 24px !important;
  height: 24px !important;
}

.install-os-current small {
  font-size: 8px !important;
  letter-spacing: 0.08em !important;
}

.install-os-current b {
  font-size: 13px !important;
  line-height: 1.08 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.install-os-menu {
  top: calc(100% + 10px) !important;
  right: 0 !important;
  left: auto !important;
  width: min(392px, calc(100vw - 36px)) !important;
  max-height: none !important;
  grid-template-columns: repeat(2, minmax(164px, 1fr)) !important;
  gap: 8px !important;
  padding: 10px !important;
  overflow: visible !important;
  border-radius: 22px !important;
  border-color: rgba(155, 121, 255, 0.36) !important;
  background:
    radial-gradient(360px 180px at 16% 0%, rgba(202, 112, 255, 0.18), transparent 72%),
    radial-gradient(320px 180px at 92% 18%, rgba(117, 242, 199, 0.12), transparent 72%),
    linear-gradient(180deg, rgba(11, 13, 30, 0.985), rgba(5, 7, 18, 0.985)) !important;
  box-shadow:
    0 26px 62px rgba(0, 0, 0, 0.48),
    0 0 34px rgba(139, 92, 255, 0.18) !important;
  backdrop-filter: blur(18px);
}

.install-selected-device.is-drop-up .install-os-menu {
  top: calc(100% + 10px) !important;
  bottom: auto !important;
}

.connect-card .install-os-option,
.install-os-option {
  min-height: 46px !important;
  height: 46px !important;
  grid-template-columns: 32px minmax(0, 1fr) !important;
  gap: 10px !important;
  border-radius: 15px !important;
  padding: 0 12px !important;
  border-color: rgba(155, 121, 255, 0.20) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.014)),
    rgba(11, 14, 31, 0.80) !important;
  color: rgba(248, 242, 255, 0.92) !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.connect-card .install-os-option:hover,
.connect-card .install-os-option.is-active,
.install-os-option:hover,
.install-os-option.is-active {
  border-color: rgba(117, 242, 199, 0.46) !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(117, 242, 199, 0.16), transparent 58%),
    linear-gradient(145deg, rgba(117, 242, 199, 0.12), rgba(155, 121, 255, 0.08)),
    rgba(9, 18, 31, 0.94) !important;
  color: #ffffff !important;
}

.connect-card .install-os-option .install-pill-icon,
.install-os-option .install-pill-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 12px !important;
  background:
    radial-gradient(circle at 35% 20%, rgba(255, 255, 255, 0.20), transparent 44%),
    rgba(117, 242, 199, 0.10) !important;
  color: #75f2c7 !important;
}

.install-os-option[data-install-os="ios"] .install-pill-icon,
.install-os-option[data-install-os="macos"] .install-pill-icon,
.install-os-option[data-install-os="appletv"] .install-pill-icon {
  color: #f4edff !important;
  background:
    radial-gradient(circle at 35% 20%, rgba(255, 255, 255, 0.22), transparent 44%),
    linear-gradient(135deg, rgba(202, 112, 255, 0.30), rgba(116, 226, 255, 0.10)) !important;
}

.install-os-option[data-install-os="windows"] .install-pill-icon {
  color: #74e2ff !important;
}

.install-os-option[data-install-os="android"] .install-pill-icon,
.install-os-option[data-install-os="androidtv"] .install-pill-icon {
  color: #75f2c7 !important;
}

.connect-card .install-os-option .install-pill-icon svg,
.install-os-option .install-pill-icon svg {
  width: 21px !important;
  height: 21px !important;
  fill: currentColor !important;
  stroke: none !important;
}

.connect-card .install-os-option span:last-child,
.install-os-option span:last-child {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

@media (max-width: 900px) {
  .install-selected-device[data-install-os-select] {
    width: min(100%, 228px) !important;
    min-width: 0 !important;
  }
}

@media (max-width: 560px) {
  .install-os-menu {
    width: min(248px, calc(100vw - 32px)) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    max-height: min(70vh, 340px) !important;
    overflow-y: auto !important;
  }

  .install-panel-title > b[data-install-title] {
    align-items: flex-start !important;
  }
}

/* 2026-05-20 premium connector correction: calmer OS menu, fixed icons, solid primary CTA. */
.install-panel-premium .install-panel-head {
  border-color: rgba(120, 137, 171, 0.18) !important;
  background:
    radial-gradient(520px 240px at 20% 0%, rgba(117, 242, 199, 0.075), transparent 68%),
    linear-gradient(145deg, rgba(12, 20, 34, 0.92), rgba(7, 11, 24, 0.92)) !important;
}

.install-title-os-icon {
  border-color: rgba(152, 164, 190, 0.26) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.035)),
    rgba(15, 22, 36, 0.96) !important;
  color: #dfe9ff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 12px 26px rgba(0, 0, 0, 0.20) !important;
}

.install-selected-device[data-install-os-select] {
  width: 222px !important;
  min-width: 222px !important;
  border: 1px solid rgba(120, 137, 171, 0.22) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.060), rgba(255, 255, 255, 0.024)),
    rgba(8, 13, 25, 0.92) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.075),
    0 18px 42px rgba(0, 0, 0, 0.22) !important;
}

.install-os-current {
  min-height: 60px !important;
  border: 1px solid rgba(139, 151, 184, 0.26) !important;
  border-radius: 16px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.070), rgba(255, 255, 255, 0.025)),
    rgba(14, 18, 35, 0.95) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.install-os-current:hover,
.install-selected-device.is-open .install-os-current,
.install-os-current:focus-visible {
  border-color: rgba(132, 232, 213, 0.50) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.030)),
    rgba(14, 20, 36, 0.98) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 0 0 3px rgba(132, 232, 213, 0.08) !important;
}

.install-os-current [data-install-device-icon],
.install-title-os-icon,
.connect-card .install-os-option .install-pill-icon,
.install-os-option .install-pill-icon {
  display: grid !important;
  place-items: center !important;
  color: #dfe9ff !important;
}

.install-os-current [data-install-device-icon] {
  width: 36px !important;
  height: 36px !important;
  border: 1px solid rgba(142, 154, 184, 0.26) !important;
  border-radius: 12px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.035)),
    rgba(18, 25, 40, 0.94) !important;
}

.install-os-current[data-current-os="windows"] [data-install-device-icon],
.install-title-os-icon:has(svg),
.install-os-option[data-install-os="windows"] .install-pill-icon {
  color: #8bd8ff !important;
}

.install-os-current[data-current-os="android"] [data-install-device-icon],
.install-os-current[data-current-os="androidtv"] [data-install-device-icon],
.install-os-option[data-install-os="android"] .install-pill-icon,
.install-os-option[data-install-os="androidtv"] .install-pill-icon {
  color: #89e7c9 !important;
}

.install-os-current[data-current-os="ios"] [data-install-device-icon],
.install-os-current[data-current-os="macos"] [data-install-device-icon],
.install-os-current[data-current-os="appletv"] [data-install-device-icon],
.install-os-option[data-install-os="ios"] .install-pill-icon,
.install-os-option[data-install-os="macos"] .install-pill-icon,
.install-os-option[data-install-os="appletv"] .install-pill-icon {
  color: #f4f1ff !important;
}

.install-os-current [data-install-device-icon] svg,
.install-title-os-icon svg,
.install-os-option .install-pill-icon svg {
  width: 19px !important;
  height: 19px !important;
  display: block !important;
  fill: currentColor !important;
  stroke: none !important;
}

.install-os-current small {
  color: rgba(210, 218, 238, 0.62) !important;
  font-size: 8px !important;
  letter-spacing: 0.09em !important;
}

.install-os-current b {
  color: #ffffff !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
}

.install-os-menu {
  width: 222px !important;
  max-height: none !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 4px !important;
  padding: 8px !important;
  border: 1px solid rgba(132, 143, 170, 0.24) !important;
  border-radius: 18px !important;
  overflow: visible !important;
  background:
    linear-gradient(180deg, rgba(16, 22, 37, 0.985), rgba(7, 10, 22, 0.985)) !important;
  box-shadow:
    0 22px 54px rgba(0, 0, 0, 0.50),
    inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
  backdrop-filter: blur(18px) !important;
}

.connect-card .install-os-option,
.install-os-option {
  min-height: 38px !important;
  height: 38px !important;
  grid-template-columns: 28px minmax(0, 1fr) !important;
  gap: 9px !important;
  border: 1px solid transparent !important;
  border-radius: 13px !important;
  margin: 0 !important;
  padding: 0 9px !important;
  background: transparent !important;
  color: rgba(235, 240, 252, 0.82) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.connect-card .install-os-option:hover,
.install-os-option:hover {
  border-color: rgba(132, 143, 170, 0.28) !important;
  background: rgba(255, 255, 255, 0.055) !important;
  color: #ffffff !important;
}

.connect-card .install-os-option.is-active,
.install-os-option.is-active {
  border-color: rgba(132, 232, 213, 0.42) !important;
  background:
    linear-gradient(135deg, rgba(132, 232, 213, 0.12), rgba(139, 216, 255, 0.055)),
    rgba(255, 255, 255, 0.035) !important;
  color: #ffffff !important;
}

.connect-card .install-os-option .install-pill-icon,
.install-os-option .install-pill-icon {
  width: 28px !important;
  height: 28px !important;
  border: 1px solid rgba(143, 154, 183, 0.18) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.055) !important;
  box-shadow: none !important;
}

.install-panel-premium .install-app-pills {
  gap: 10px !important;
}

.install-panel-premium .install-pill-app {
  min-height: 54px !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  border: 1px solid rgba(118, 132, 164, 0.22) !important;
  border-radius: 15px !important;
  padding: 7px 14px 7px 8px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.050), rgba(255, 255, 255, 0.014)),
    rgba(9, 14, 27, 0.86) !important;
  color: rgba(235, 240, 252, 0.78) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
}

.install-panel-premium .install-pill-app:hover,
.install-panel-premium .install-pill-app.is-active {
  border-color: rgba(132, 232, 213, 0.42) !important;
  background:
    linear-gradient(135deg, rgba(132, 232, 213, 0.10), rgba(139, 216, 255, 0.045)),
    rgba(11, 20, 34, 0.96) !important;
  color: #ffffff !important;
}

.install-panel-premium .install-pill-app span:last-child {
  color: inherit !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
}

.install-app-icon,
.install-pill-icon.install-app-icon,
.install-route-app .install-app-icon {
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  border: 1px solid rgba(150, 162, 190, 0.20) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.080), rgba(255, 255, 255, 0.025)),
    rgba(10, 14, 27, 0.94) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 8px 18px rgba(0, 0, 0, 0.20) !important;
}

.install-app-icon img,
.install-pill-icon.install-app-icon img,
.install-route-app .install-app-icon img {
  width: 30px !important;
  height: 30px !important;
  display: block !important;
  object-fit: contain !important;
  transform: none !important;
  border-radius: 8px !important;
}

.install-import-actions {
  grid-template-columns: minmax(184px, 1.15fr) minmax(150px, 0.9fr) 52px !important;
  gap: 8px !important;
}

.install-panel-premium .install-step .install-import-actions a[data-import-link],
.install-import-actions a[data-import-link] {
  min-height: 46px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  border: 0 !important;
  border-radius: 14px !important;
  padding: 0 18px !important;
  background:
    linear-gradient(135deg, #e7fff8 0%, #9ff0dd 46%, #86d9ff 100%) !important;
  color: #06151a !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 14px 30px rgba(118, 226, 206, 0.18) !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.install-panel-premium .install-step .install-import-actions a[data-import-link]::before,
.install-import-actions a[data-import-link]::before {
  content: "+";
  display: inline-grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 999px;
  background: rgba(4, 18, 23, 0.12);
  color: #06151a;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}

.install-panel-premium .install-step .install-import-actions button,
.install-import-actions button {
  min-height: 46px !important;
  border-color: rgba(132, 143, 170, 0.26) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.060), rgba(255, 255, 255, 0.020)),
    rgba(11, 14, 29, 0.88) !important;
  color: rgba(235, 240, 252, 0.88) !important;
}

.connect-card .install-import-actions [data-raw-qr],
.install-import-actions [data-raw-qr] {
  min-width: 52px !important;
  border-radius: 14px !important;
  font-size: 12px !important;
  white-space: nowrap !important;
}

@media (max-width: 900px) {
  .install-selected-device[data-install-os-select] {
    width: min(100%, 222px) !important;
    min-width: 0 !important;
  }
}

@media (max-width: 620px) {
  .install-os-menu {
    max-height: min(70vh, 340px) !important;
    overflow-y: auto !important;
  }

  .install-import-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .install-panel-premium .install-step .install-import-actions a[data-import-link],
  .install-import-actions a[data-import-link] {
    white-space: normal !important;
  }
}

/* 2026-05-20 quick-connect alignment: hide stray edge glow and center app/QR controls. */
html,
body {
  max-width: 100% !important;
  overflow-x: clip !important;
}

body {
  background:
    radial-gradient(980px 680px at 50% -18%, rgba(155, 121, 255, 0.15), transparent 66%),
    radial-gradient(860px 560px at 8% 6%, rgba(117, 242, 199, 0.075), transparent 66%),
    linear-gradient(180deg, #070b18 0%, #050714 44%, #04050d 100%) !important;
}

body::after {
  display: none !important;
}

.site-shell,
.site-header {
  max-width: calc(100vw - 32px) !important;
}

.site-shell {
  width: min(1220px, calc(100vw - 32px)) !important;
}

.site-header {
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  overflow: hidden !important;
}

.nova-hero,
.hero-console,
.service-hero,
.pay-page .pay-trial-hero {
  overflow: hidden !important;
}

.install-panel-premium .install-app-pills {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.install-panel-premium .install-pill-app {
  min-height: 72px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  padding: 9px 14px !important;
  text-align: center !important;
}

.install-panel-premium .install-pill-app span:last-child {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  text-align: center !important;
  font-size: 14px !important;
  line-height: 1.1 !important;
}

.install-app-icon,
.install-pill-icon.install-app-icon,
.install-route-app .install-app-icon {
  width: 56px !important;
  height: 56px !important;
  flex: 0 0 56px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 15px !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.install-route-app .install-app-icon {
  width: 62px !important;
  height: 62px !important;
  flex-basis: 62px !important;
}

.install-app-icon img,
.install-pill-icon.install-app-icon img,
.install-route-app .install-app-icon img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: inherit !important;
  transform: scale(1.58) !important;
  transform-origin: center center !important;
}

.install-route-card {
  align-items: center !important;
}

.install-route-card > div:last-child {
  min-width: 0 !important;
}

.install-import-actions {
  width: 100% !important;
  max-width: 100% !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 64px !important;
  gap: 8px !important;
  align-items: stretch !important;
  justify-items: stretch !important;
}

.install-panel-premium .install-step .install-import-actions a,
.install-panel-premium .install-step .install-import-actions button,
.install-import-actions a,
.install-import-actions button {
  min-width: 0 !important;
  min-height: 52px !important;
  height: 52px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.install-panel-premium .install-step .install-import-actions a[data-import-link],
.install-import-actions a[data-import-link] {
  white-space: normal !important;
}

.connect-card .install-import-actions [data-raw-qr],
.install-import-actions [data-raw-qr] {
  width: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
  padding: 0 !important;
  justify-self: center !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
}

@media (max-width: 760px) {
  .install-panel-premium .install-app-pills {
    grid-template-columns: 1fr !important;
  }

  .install-panel-premium .install-pill-app {
    justify-content: center !important;
  }

  .install-import-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .connect-card .install-import-actions [data-raw-qr],
  .install-import-actions [data-raw-qr] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

/* CDNRELAY_FIX_20260520_V186: clip edge glow and lock install controls inside cards. */
html,
body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

@supports (overflow: clip) {
  html,
  body {
    overflow-x: clip !important;
  }
}

body {
  background:
    radial-gradient(980px 680px at 50% -18%, rgba(155, 121, 255, 0.14), transparent 66%),
    radial-gradient(860px 560px at 8% 6%, rgba(117, 242, 199, 0.07), transparent 66%),
    linear-gradient(180deg, #070b18 0%, #050714 44%, #04050d 100%) !important;
}

body::after,
.cursor-aurora,
.site-header::after {
  display: none !important;
}

.site-shell,
.site-header {
  max-width: calc(100vw - 32px) !important;
}

.site-shell {
  width: min(1220px, calc(100vw - 32px)) !important;
}

.site-header {
  width: 100% !important;
  margin: 14px auto 0 !important;
  transform: none !important;
  overflow: hidden !important;
  contain: paint !important;
}

.nova-hero,
.hero-console,
.service-hero,
.connect-card-premium,
.install-panel-premium,
.pay-page .pay-trial-hero {
  overflow: hidden !important;
}

.nova-hero {
  background: transparent !important;
}

.install-panel-premium .install-app-pills {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
}

.install-panel-premium .install-pill-app {
  min-width: 0 !important;
  min-height: 88px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  padding: 9px 14px !important;
  text-align: center !important;
}

.install-panel-premium .install-pill-app span:last-child {
  min-width: 0 !important;
  flex: 0 1 auto !important;
  text-align: center !important;
  font-size: 14px !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
}

.install-app-icon,
.install-pill-icon.install-app-icon,
.install-route-app .install-app-icon {
  width: 62px !important;
  height: 62px !important;
  flex: 0 0 62px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 15px !important;
}

.install-route-app .install-app-icon {
  width: 64px !important;
  height: 64px !important;
  flex-basis: 64px !important;
}

.install-app-icon img,
.install-pill-icon.install-app-icon img,
.install-route-app .install-app-icon img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: inherit !important;
  transform: scale(1.58) !important;
  transform-origin: center center !important;
}

.install-route-card {
  grid-template-columns: 72px minmax(0, 1fr) !important;
  align-items: center !important;
}

.install-route-card > div:last-child,
.install-panel-premium .install-step,
.install-panel-premium .install-step > div {
  min-width: 0 !important;
}

.connect-actions-cabinet,
.install-import-actions {
  width: 100% !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 68px !important;
  gap: 8px !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  overflow: hidden !important;
}

.install-panel-premium .install-step .install-import-actions {
  grid-column: 1 / -1 !important;
}

.install-panel-premium .install-step .install-import-actions a,
.install-panel-premium .install-step .install-import-actions button,
.install-import-actions a,
.install-import-actions button,
.connect-actions-cabinet a,
.connect-actions-cabinet button {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 54px !important;
  height: 54px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.connect-card .install-import-actions [data-raw-qr],
.install-import-actions [data-raw-qr],
.connect-actions-cabinet [data-raw-qr] {
  width: 68px !important;
  min-width: 68px !important;
  max-width: 68px !important;
  padding: 0 !important;
  justify-self: stretch !important;
  white-space: nowrap !important;
  letter-spacing: 0 !important;
}

@media (max-width: 760px) {
  .install-panel-premium .install-app-pills,
  .connect-actions-cabinet,
  .install-import-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .install-panel-premium .install-pill-app {
    justify-content: center !important;
  }

  .connect-card .install-import-actions [data-raw-qr],
  .install-import-actions [data-raw-qr],
  .connect-actions-cabinet [data-raw-qr] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* CDNRELAY_CTA_FIX_20260520_V187: premium import button and RAW QR action. */
.install-panel-premium .install-step .install-import-actions,
.install-import-actions {
  grid-template-columns: minmax(190px, 1.45fr) minmax(146px, 0.92fr) 72px !important;
  gap: 10px !important;
  overflow: visible !important;
}

.install-panel-premium .install-step .install-import-actions a[data-import-link],
.install-import-actions a[data-import-link] {
  min-height: 62px !important;
  height: 62px !important;
  padding: 0 20px !important;
  gap: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.42) !important;
  border-radius: 19px !important;
  background:
    radial-gradient(110px 70px at 18% 10%, rgba(255, 255, 255, 0.72), transparent 58%),
    linear-gradient(135deg, #ecfff9 0%, #9ff2df 43%, #79dcff 100%) !important;
  color: #041318 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.76),
    inset 0 -1px 0 rgba(5, 26, 32, 0.10),
    0 14px 30px rgba(117, 242, 199, 0.20),
    0 0 0 1px rgba(117, 242, 199, 0.16) !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  white-space: nowrap !important;
  transform: translateZ(0);
}

.install-panel-premium .install-step .install-import-actions a[data-import-link]::before,
.install-import-actions a[data-import-link]::before {
  width: 26px !important;
  height: 26px !important;
  flex: 0 0 26px !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(4, 19, 24, 0.12), rgba(4, 19, 24, 0.20)) !important;
  color: #052027 !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  line-height: 24px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

.install-panel-premium .install-step .install-import-actions a[data-import-link]:hover,
.install-panel-premium .install-step .install-import-actions a[data-import-link]:focus-visible,
.install-import-actions a[data-import-link]:hover,
.install-import-actions a[data-import-link]:focus-visible {
  border-color: rgba(255, 255, 255, 0.58) !important;
  background:
    radial-gradient(120px 80px at 18% 10%, rgba(255, 255, 255, 0.82), transparent 58%),
    linear-gradient(135deg, #ffffff 0%, #a9ffe8 42%, #7ee5ff 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 16px 36px rgba(117, 242, 199, 0.26),
    0 0 0 2px rgba(117, 242, 199, 0.18) !important;
}

.install-panel-premium .install-step .install-import-actions button,
.install-import-actions button {
  min-height: 62px !important;
  height: 62px !important;
  border-radius: 17px !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

.install-import-actions [data-copy-sub] {
  border-color: rgba(155, 166, 196, 0.30) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.070), rgba(255, 255, 255, 0.020)),
    rgba(12, 15, 31, 0.92) !important;
  color: rgba(245, 249, 255, 0.92) !important;
}

.connect-card .install-import-actions [data-raw-qr],
.install-import-actions [data-raw-qr] {
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  border-color: rgba(155, 166, 196, 0.30) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.070), rgba(255, 255, 255, 0.020)),
    rgba(12, 15, 31, 0.92) !important;
  color: rgba(245, 249, 255, 0.92) !important;
}

@media (max-width: 760px) {
  .install-panel-premium .install-step .install-import-actions,
  .install-import-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .connect-card .install-import-actions [data-raw-qr],
  .install-import-actions [data-raw-qr] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* CDNRELAY_CTA_FIX_20260520_V188: make the import CTA a proper full-width primary action. */
.install-panel-premium .install-step .install-import-actions,
.install-import-actions {
  grid-template-columns: minmax(0, 1fr) 86px !important;
  gap: 10px !important;
  align-items: stretch !important;
  overflow: visible !important;
}

.install-panel-premium .install-step .install-import-actions a[data-import-link],
.install-import-actions a[data-import-link] {
  grid-column: 1 / -1 !important;
  min-height: 66px !important;
  height: 66px !important;
  justify-content: flex-start !important;
  gap: 13px !important;
  padding: 0 22px !important;
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.52) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.00) 36%),
    linear-gradient(135deg, #f3fff8 0%, #7cf2c9 44%, #4fd8ff 100%) !important;
  color: #03151a !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.84),
    inset 0 -1px 0 rgba(3, 21, 26, 0.14),
    0 18px 34px rgba(79, 216, 255, 0.18),
    0 12px 26px rgba(124, 242, 201, 0.18),
    0 0 0 1px rgba(124, 242, 201, 0.18) !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  white-space: nowrap !important;
}

.install-panel-premium .install-step .install-import-actions a[data-import-link]::before,
.install-import-actions a[data-import-link]::before {
  content: "+" !important;
  width: 30px !important;
  height: 30px !important;
  flex: 0 0 30px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: rgba(3, 21, 26, 0.13) !important;
  color: #03151a !important;
  font-size: 24px !important;
  font-weight: 950 !important;
  line-height: 28px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 1px 8px rgba(3, 21, 26, 0.08) !important;
}

.install-panel-premium .install-step .install-import-actions a[data-import-link]::after,
.install-import-actions a[data-import-link]::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background: linear-gradient(110deg, transparent 0 34%, rgba(255, 255, 255, 0.38) 45%, transparent 58% 100%) !important;
  transform: translateX(-100%) !important;
  transition: transform 420ms ease !important;
}

.install-panel-premium .install-step .install-import-actions a[data-import-link]:hover,
.install-panel-premium .install-step .install-import-actions a[data-import-link]:focus-visible,
.install-import-actions a[data-import-link]:hover,
.install-import-actions a[data-import-link]:focus-visible {
  border-color: rgba(255, 255, 255, 0.72) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.50), rgba(255, 255, 255, 0.00) 36%),
    linear-gradient(135deg, #ffffff 0%, #8effd7 44%, #65e4ff 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.90),
    0 22px 42px rgba(79, 216, 255, 0.24),
    0 14px 28px rgba(124, 242, 201, 0.22),
    0 0 0 2px rgba(124, 242, 201, 0.20) !important;
  transform: translateY(-1px) !important;
}

.install-panel-premium .install-step .install-import-actions a[data-import-link]:hover::after,
.install-panel-premium .install-step .install-import-actions a[data-import-link]:focus-visible::after,
.install-import-actions a[data-import-link]:hover::after,
.install-import-actions a[data-import-link]:focus-visible::after {
  transform: translateX(100%) !important;
}

.install-panel-premium .install-step .install-import-actions button,
.install-import-actions button {
  min-height: 50px !important;
  height: 50px !important;
  border-radius: 15px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

.install-import-actions [data-copy-sub] {
  grid-column: 1 / 2 !important;
}

.connect-card .install-import-actions [data-raw-qr],
.install-import-actions [data-raw-qr] {
  grid-column: 2 / 3 !important;
  width: 86px !important;
  min-width: 86px !important;
  max-width: 86px !important;
}

@media (max-width: 520px) {
  .install-panel-premium .install-step .install-import-actions,
  .install-import-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .install-import-actions [data-copy-sub],
  .connect-card .install-import-actions [data-raw-qr],
  .install-import-actions [data-raw-qr] {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* CDNRELAY_CTA_FIX_20260520_V189: dark CTA, aligned download/import rows, tall single .exe button. */
@keyframes cdnrelayCtaTextPulse {
  0%,
  100% {
    color: #f4fbff;
    text-shadow: 0 0 0 rgba(125, 232, 255, 0);
  }

  50% {
    color: #c7fff0;
    text-shadow: 0 0 12px rgba(117, 242, 199, 0.18);
  }
}

@keyframes cdnrelayCtaPlusTick {
  0%,
  100% {
    transform: scale(1) rotate(0deg);
  }

  50% {
    transform: scale(1.08) rotate(90deg);
  }
}

.install-panel-premium .install-step:nth-child(1),
.install-panel-premium .install-step:nth-child(2) {
  grid-template-columns: 42px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-content: start !important;
}

.install-panel-premium .install-step:nth-child(1) .install-download-actions,
.install-panel-premium .install-step:nth-child(2) .install-import-actions {
  grid-column: 1 / -1 !important;
  align-self: start !important;
  justify-self: stretch !important;
  margin-top: 18px !important;
}

.install-download-actions,
.install-import-actions {
  width: 100% !important;
  max-width: 100% !important;
  align-items: stretch !important;
  overflow: visible !important;
}

.install-download-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px !important;
}

.install-import-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 104px !important;
  gap: 10px !important;
}

.install-download-actions a,
.install-download-actions button {
  min-height: 52px !important;
  height: 52px !important;
  border-radius: 14px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

.install-download-actions:not(:has(a:not([hidden]) ~ a:not([hidden]))) a:not([hidden]),
.install-download-actions:not(:has(button:not([hidden]) ~ button:not([hidden]))) button:not([hidden]) {
  min-height: 114px !important;
  height: 114px !important;
  font-size: 14px !important;
}

.install-panel-premium .install-step .install-import-actions a[data-import-link],
.install-import-actions a[data-import-link] {
  grid-column: 1 / -1 !important;
  min-height: 66px !important;
  height: 66px !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  padding: 0 22px !important;
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid rgba(111, 227, 211, 0.36) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(31, 44, 62, 0.96), rgba(13, 19, 36, 0.98)),
    linear-gradient(135deg, rgba(61, 225, 199, 0.16), rgba(56, 152, 255, 0.08)) !important;
  color: #f4fbff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 14px 28px rgba(0, 0, 0, 0.26) !important;
  font-size: 16px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  white-space: nowrap !important;
  animation: cdnrelayCtaTextPulse 3.4s ease-in-out infinite !important;
}

.install-panel-premium .install-step .install-import-actions a[data-import-link]::before,
.install-import-actions a[data-import-link]::before {
  content: "+" !important;
  width: 31px !important;
  height: 31px !important;
  flex: 0 0 31px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: rgba(117, 242, 199, 0.13) !important;
  color: #b8fff0 !important;
  font-size: 23px !important;
  font-weight: 950 !important;
  line-height: 29px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  animation: cdnrelayCtaPlusTick 3.4s ease-in-out infinite !important;
}

.install-panel-premium .install-step .install-import-actions a[data-import-link]::after,
.install-import-actions a[data-import-link]::after {
  content: "" !important;
  position: absolute !important;
  inset: 1px !important;
  pointer-events: none !important;
  border-radius: 17px !important;
  background: linear-gradient(110deg, transparent 0 42%, rgba(125, 232, 255, 0.14) 48%, transparent 56% 100%) !important;
  transform: translateX(-120%) !important;
  transition: transform 520ms ease !important;
}

.install-panel-premium .install-step .install-import-actions a[data-import-link]:hover,
.install-panel-premium .install-step .install-import-actions a[data-import-link]:focus-visible,
.install-import-actions a[data-import-link]:hover,
.install-import-actions a[data-import-link]:focus-visible {
  border-color: rgba(117, 242, 199, 0.52) !important;
  background:
    linear-gradient(180deg, rgba(38, 54, 73, 0.98), rgba(15, 24, 42, 0.99)),
    linear-gradient(135deg, rgba(61, 225, 199, 0.20), rgba(56, 152, 255, 0.12)) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 16px 30px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(117, 242, 199, 0.06) !important;
  transform: translateY(-1px) !important;
}

.install-panel-premium .install-step .install-import-actions a[data-import-link]:hover::after,
.install-panel-premium .install-step .install-import-actions a[data-import-link]:focus-visible::after,
.install-import-actions a[data-import-link]:hover::after,
.install-import-actions a[data-import-link]:focus-visible::after {
  transform: translateX(120%) !important;
}

.install-panel-premium .install-step .install-import-actions button,
.install-import-actions button {
  min-height: 50px !important;
  height: 50px !important;
  border-radius: 15px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

.install-import-actions [data-copy-sub] {
  grid-column: 1 / 2 !important;
}

.connect-card .install-import-actions [data-raw-qr],
.install-import-actions [data-raw-qr] {
  grid-column: 2 / 3 !important;
  width: 104px !important;
  min-width: 104px !important;
  max-width: 104px !important;
}

@media (max-width: 620px) {
  .install-import-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .install-import-actions [data-copy-sub],
  .connect-card .install-import-actions [data-raw-qr],
  .install-import-actions [data-raw-qr] {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .install-download-actions:not(:has(a:not([hidden]) ~ a:not([hidden]))) a:not([hidden]),
  .install-download-actions:not(:has(button:not([hidden]) ~ button:not([hidden]))) button:not([hidden]) {
    min-height: 76px !important;
    height: 76px !important;
  }
}

/* CDNRELAY_CTA_FIX_20260520_V190: exact vertical alignment for download and import CTAs. */
.install-panel-premium .install-step:nth-child(1),
.install-panel-premium .install-step:nth-child(2) {
  grid-template-rows: 74px auto !important;
  row-gap: 10px !important;
}

.install-panel-premium .install-step:nth-child(1) > span,
.install-panel-premium .install-step:nth-child(2) > span {
  grid-row: 1 !important;
}

.install-panel-premium .install-step:nth-child(1) > div:first-of-type,
.install-panel-premium .install-step:nth-child(2) > div:first-of-type {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

.install-panel-premium .install-step:nth-child(1) .install-download-actions,
.install-panel-premium .install-step:nth-child(2) .install-import-actions {
  grid-row: 2 !important;
  margin-top: 0 !important;
}

@media (max-width: 620px) {
  .install-panel-premium .install-step:nth-child(1),
  .install-panel-premium .install-step:nth-child(2) {
    grid-template-rows: auto auto !important;
  }
}

/* CDNRELAY_INSTALL_COMPACT_20260520_V191: compact app picker, aligned OS menu, expired payment spacing. */
.install-panel-premium .install-panel-head {
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
}

.install-panel-premium .install-app-pills {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-items: stretch !important;
  margin: 8px 0 0 !important;
}

.install-panel-premium .install-pill-app {
  min-height: 58px !important;
  height: 58px !important;
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: center !important;
  justify-content: stretch !important;
  padding: 6px 12px 6px 8px !important;
  border-radius: 14px !important;
  text-align: left !important;
}

.install-panel-premium .install-pill-app span:last-child {
  min-width: 0 !important;
  text-align: left !important;
  font-size: 12px !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
}

.install-panel-premium .install-pill-app .install-app-icon,
.install-panel-premium .install-pill-app .install-pill-icon.install-app-icon {
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 44px !important;
  justify-self: center !important;
  border-radius: 12px !important;
  border: 1px solid rgba(150, 162, 190, 0.22) !important;
  background: rgba(255, 255, 255, 0.045) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.install-panel-premium .install-pill-app .install-app-icon img,
.install-panel-premium .install-pill-app .install-pill-icon.install-app-icon img {
  width: 38px !important;
  height: 38px !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
  border-radius: 10px !important;
}

.install-panel-premium .install-pill-app.is-active .install-app-icon,
.install-panel-premium .install-pill-app.is-active .install-pill-icon.install-app-icon {
  border-color: rgba(117, 242, 199, 0.92) !important;
  box-shadow:
    0 0 0 2px rgba(117, 242, 199, 0.16),
    0 0 18px rgba(117, 242, 199, 0.10) !important;
}

.install-selected-device[data-install-os-select] {
  width: 188px !important;
  min-width: 188px !important;
  max-width: 188px !important;
  padding: 6px !important;
  border-radius: 14px !important;
  align-self: start !important;
}

.install-os-current {
  min-height: 50px !important;
  height: 50px !important;
  grid-template-columns: 30px minmax(0, 1fr) 10px !important;
  gap: 8px !important;
  padding: 6px 9px !important;
  border-radius: 12px !important;
}

.install-os-current [data-install-device-icon] {
  width: 30px !important;
  height: 30px !important;
  border-radius: 10px !important;
}

.install-os-current [data-install-device-icon] svg {
  width: 16px !important;
  height: 16px !important;
}

.install-os-current small {
  margin-bottom: 2px !important;
  font-size: 7px !important;
  line-height: 1 !important;
}

.install-os-current b {
  font-size: 12px !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.install-os-current i {
  width: 8px !important;
  height: 8px !important;
}

.install-os-menu {
  left: 0 !important;
  right: 0 !important;
  top: calc(100% + 6px) !important;
  width: 100% !important;
  max-height: none !important;
  padding: 6px !important;
  gap: 5px !important;
  border-radius: 14px !important;
  box-sizing: border-box !important;
}

.connect-card .install-os-option,
.install-os-option {
  min-height: 34px !important;
  height: 34px !important;
  grid-template-columns: 26px minmax(0, 1fr) !important;
  gap: 8px !important;
  padding: 0 7px !important;
  border-radius: 10px !important;
  box-sizing: border-box !important;
}

.connect-card .install-os-option .install-pill-icon,
.install-os-option .install-pill-icon {
  width: 26px !important;
  height: 26px !important;
  border-radius: 9px !important;
  box-sizing: border-box !important;
}

.connect-card .install-os-option .install-pill-icon svg,
.install-os-option .install-pill-icon svg {
  width: 15px !important;
  height: 15px !important;
}

.connect-card .install-os-option span:last-child,
.install-os-option span:last-child {
  font-size: 11px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.profile-card [data-profile-note] {
  display: block !important;
  margin-top: 8px !important;
  line-height: 1.42 !important;
}

.profile-card .pay-fallback {
  margin-top: 14px !important;
}

@media (max-width: 900px) {
  .install-panel-premium .install-panel-head {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .install-selected-device[data-install-os-select] {
    width: min(188px, 100%) !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .install-panel-premium .install-app-pills {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* CDNRELAY_HEADER_FRAME_20260520_V192: integrated nav, violet header frame. */
.site-header {
  border-color: rgba(168, 85, 247, 0.48) !important;
  box-shadow:
    0 0 0 1px rgba(168, 85, 247, 0.16),
    0 18px 46px rgba(89, 47, 164, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
}

.site-header::before {
  background:
    linear-gradient(90deg, rgba(168, 85, 247, 0.11), rgba(99, 102, 241, 0.075), rgba(168, 85, 247, 0.08)) !important;
}

.site-header::after {
  border-color: rgba(168, 85, 247, 0.18) !important;
  box-shadow: inset 0 0 34px rgba(126, 34, 206, 0.12) !important;
}

.main-nav,
.site-header:not(.is-open) .main-nav {
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.main-nav::before,
.main-nav::after {
  display: none !important;
}

.main-nav a,
.main-nav button,
.main-nav a.nav-auth-link,
.main-nav a[aria-current="page"],
.main-nav a.nav-auth-link[aria-current="page"],
.header-auth-actions button,
.header-account,
.header-logout {
  border-color: rgba(168, 85, 247, 0.42) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.018)),
    rgba(13, 14, 30, 0.86) !important;
  color: rgba(250, 246, 255, 0.94) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 10px 26px rgba(88, 28, 135, 0.12) !important;
  text-shadow: none !important;
}

.main-nav a:hover,
.main-nav a:focus-visible,
.main-nav button:hover,
.main-nav button:focus-visible,
.main-nav a[aria-current="page"],
.main-nav a.nav-auth-link[aria-current="page"],
.main-nav a.nav-auth-link:hover,
.main-nav a.nav-auth-link:focus-visible,
.header-auth-actions button:hover,
.header-auth-actions button:focus-visible,
.header-account:hover,
.header-account:focus-visible,
.header-logout:hover,
.header-logout:focus-visible {
  border-color: rgba(196, 181, 253, 0.64) !important;
  background:
    linear-gradient(135deg, rgba(168, 85, 247, 0.24), rgba(79, 70, 229, 0.14)),
    rgba(18, 16, 38, 0.94) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 12px 30px rgba(126, 34, 206, 0.16),
    0 0 18px rgba(168, 85, 247, 0.11) !important;
}

/* CDNRELAY_PAY_OFFER_POLISH_20260520_V193: cleaner tariff titles, violet nav states, full-width offer. */
.pay-page .plan-topline {
  display: none !important;
}

.pay-page .plan-card h3 {
  display: flex !important;
  align-items: center !important;
  min-height: 1.08em !important;
  margin-top: 0 !important;
  margin-bottom: 8px !important;
  gap: 0.18em !important;
  letter-spacing: 0 !important;
}

body .site-header .main-nav a:hover,
body .site-header .main-nav a:focus-visible,
body .site-header .main-nav button:hover,
body .site-header .main-nav button:focus-visible,
body .site-header .main-nav a:active,
body .site-header .main-nav button:active,
body .site-header .main-nav a[aria-current="page"],
body .site-header .main-nav button[aria-current="page"],
body .site-header .main-nav a.nav-auth-link[aria-current="page"],
body .site-header .main-nav a.nav-auth-link:hover,
body .site-header .main-nav a.nav-auth-link:focus-visible {
  border-color: rgba(196, 181, 253, 0.72) !important;
  background:
    linear-gradient(135deg, rgba(168, 85, 247, 0.26), rgba(99, 102, 241, 0.16)),
    rgba(18, 16, 38, 0.94) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    0 12px 30px rgba(126, 34, 206, 0.18),
    0 0 18px rgba(168, 85, 247, 0.14) !important;
  text-shadow: none !important;
}

body .site-header .main-nav a::after,
body .site-header .main-nav button::after,
body .site-header .main-nav a.nav-auth-link::after,
body .site-header .main-nav a[aria-current="page"]::after,
body .site-header .main-nav a.nav-auth-link[aria-current="page"]::after {
  background: linear-gradient(90deg, rgba(168, 85, 247, 0), rgba(216, 180, 254, 0.82), rgba(168, 85, 247, 0)) !important;
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.26) !important;
}

.offer-page.section-pad {
  width: 100% !important;
  max-width: none !important;
  padding-inline: 0 !important;
}

.offer-hero,
.offer-document {
  width: 100% !important;
  max-width: none !important;
}

.offer-hero {
  border-color: rgba(168, 85, 247, 0.38) !important;
  border-radius: 22px !important;
  padding: clamp(30px, 4.2vw, 58px) clamp(28px, 4.8vw, 64px) !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(168, 85, 247, 0.18), transparent 36%),
    radial-gradient(circle at 92% 10%, rgba(99, 102, 241, 0.13), transparent 34%),
    linear-gradient(135deg, rgba(15, 16, 38, 0.90), rgba(7, 9, 24, 0.86)) !important;
  box-shadow:
    0 20px 58px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

.offer-hero h1 {
  max-width: 1180px !important;
  font-size: clamp(42px, 4.9vw, 64px) !important;
  line-height: 0.98 !important;
  background: linear-gradient(92deg, #ffffff 0%, #f4ebff 42%, #c084fc 70%, #a78bfa 100%) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.offer-document {
  gap: 12px !important;
}

.offer-document article {
  border-color: rgba(168, 85, 247, 0.30) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(168, 85, 247, 0.12), transparent 44%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.046), rgba(255, 255, 255, 0.014)),
    rgba(12, 11, 28, 0.76) !important;
}

.offer-document article::before {
  color: rgba(196, 181, 253, 0.36) !important;
}

.offer-document h2 {
  font-size: clamp(28px, 4vw, 52px) !important;
  letter-spacing: 0 !important;
}

.offer-document p {
  max-width: 1120px !important;
}

/* CDNRELAY_STATUS_HWID_TARIFFS_20260520_V194: centered quick stats, HWID reset flow, more distinct tariff mood. */
.dashboard-grid > .dash-card:not(.connect-card) {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 9px !important;
  min-height: 132px !important;
}

.dashboard-grid > .dash-card:not(.connect-card) > span,
.dashboard-grid > .dash-card:not(.connect-card) > b,
.dashboard-grid > .dash-card:not(.connect-card) > small {
  width: 100% !important;
  align-self: center !important;
  justify-self: center !important;
  text-align: center !important;
  margin: 0 !important;
}

.dashboard-grid > .dash-card:not(.connect-card) > b {
  display: block !important;
  min-height: 1.05em !important;
  font-size: clamp(23px, 1.75vw, 29px) !important;
}

.dashboard-grid > .dash-card:not(.connect-card) [data-cabinet-traffic],
.dashboard-grid > .dash-card.device-list [data-cabinet-devices],
.dashboard-grid > .dash-card [data-cabinet-tariff] {
  text-align: center !important;
  white-space: normal !important;
}

.dashboard-grid > .dash-card:not(.connect-card) .meter {
  width: min(100%, 210px) !important;
  margin: 2px auto 0 !important;
}

.dashboard-grid > .dash-card.device-list [data-cabinet-devices-note] {
  display: none !important;
}

.hwid-reset-mini {
  appearance: none;
  min-height: 30px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(196, 181, 253, 0.44) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(135deg, rgba(168, 85, 247, 0.17), rgba(99, 102, 241, 0.09)),
    rgba(15, 14, 32, 0.82) !important;
  color: rgba(250, 246, 255, 0.92) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 8px 20px rgba(88, 28, 135, 0.14) !important;
  cursor: pointer;
  font: inherit;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

.hwid-reset-mini:hover,
.hwid-reset-mini:focus-visible {
  border-color: rgba(216, 180, 254, 0.74) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    0 12px 24px rgba(126, 34, 206, 0.18) !important;
}

.hwid-reset-mini[hidden] {
  display: none !important;
}

.hwid-reset-modal {
  max-width: 520px !important;
  border-color: rgba(168, 85, 247, 0.44) !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(168, 85, 247, 0.20), transparent 38%),
    radial-gradient(circle at 88% 8%, rgba(99, 102, 241, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(18, 18, 42, 0.98), rgba(8, 9, 24, 0.98)) !important;
}

.hwid-reset-form {
  display: grid !important;
  gap: 16px !important;
}

.hwid-reset-form label {
  display: grid !important;
  gap: 8px !important;
  color: rgba(244, 238, 255, 0.74) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em !important;
}

.hwid-reset-form input {
  height: 54px !important;
  border: 1px solid rgba(196, 181, 253, 0.34) !important;
  border-radius: 16px !important;
  background: rgba(5, 8, 20, 0.72) !important;
  color: #ffffff !important;
  font-size: 24px !important;
  font-weight: 950 !important;
  letter-spacing: 0.16em !important;
  text-align: center !important;
}

.hwid-reset-modal .modal-extra {
  justify-content: center !important;
}

.pay-page .plan-card {
  isolation: isolate !important;
}

.pay-page .plan-card[data-plan-card="PERSONAL"] {
  border-color: rgba(88, 166, 255, 0.34) !important;
  background:
    radial-gradient(circle at 12% 6%, rgba(88, 166, 255, 0.13), transparent 34%),
    linear-gradient(180deg, rgba(12, 20, 38, 0.96), rgba(7, 10, 23, 0.98)) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24) !important;
}

.pay-page .plan-card[data-plan-card="PLUS"] {
  border-color: rgba(111, 227, 211, 0.46) !important;
  background:
    radial-gradient(circle at 80% 0%, rgba(111, 227, 211, 0.18), transparent 34%),
    linear-gradient(140deg, rgba(9, 30, 38, 0.94), rgba(10, 13, 30, 0.98) 58%, rgba(36, 18, 58, 0.90)) !important;
  box-shadow:
    0 22px 48px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(111, 227, 211, 0.05) !important;
}

.pay-page .plan-card[data-plan-card="ULTRA"] {
  border-color: rgba(192, 132, 252, 0.72) !important;
  background:
    radial-gradient(circle at 78% 0%, rgba(168, 85, 247, 0.34), transparent 34%),
    radial-gradient(circle at 8% 92%, rgba(236, 72, 153, 0.12), transparent 30%),
    linear-gradient(145deg, rgba(25, 18, 52, 0.98), rgba(8, 8, 24, 0.98) 56%, rgba(34, 20, 64, 0.96)) !important;
  box-shadow:
    0 28px 58px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(216, 180, 254, 0.12),
    0 0 34px rgba(168, 85, 247, 0.18) !important;
}

.pay-page .plan-card[data-plan-card="ULTRA"] h3 {
  text-shadow: 0 0 24px rgba(216, 180, 254, 0.20) !important;
}

.pay-page .plan-card[data-plan-card="ULTRA"] .plan-specs span {
  border-color: rgba(216, 180, 254, 0.30) !important;
  background: rgba(168, 85, 247, 0.10) !important;
}

/* CDNRELAY_UX_FINISH_20260520: payment form, auth modals, mobile hidden states. */
.site-header .header-account-group[hidden],
.site-header.is-open .header-account-group[hidden],
.site-header .header-auth-actions[hidden],
.site-header.is-open .header-auth-actions[hidden] {
  display: none !important;
}

@media (max-width: 980px) {
  .site-header.is-open .header-account-group:not([hidden]) {
    display: flex !important;
    grid-column: 1 / -1 !important;
    justify-content: center !important;
  }

  .site-header.is-open .header-auth-actions:not([hidden]) {
    display: grid !important;
    grid-column: 1 / -1 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 8px !important;
  }
}

.payment-controls-head span {
  display: none !important;
}

.payment-controls-head h3 {
  margin-bottom: 2px !important;
}

.payment-controls .promo-box {
  display: grid !important;
  gap: 10px !important;
}

.payment-controls .promo-box div {
  gap: 10px !important;
}

.payment-controls .promo-box button {
  min-width: 138px !important;
  border: 1px solid rgba(117, 242, 199, 0.42) !important;
  background:
    linear-gradient(135deg, rgba(117, 242, 199, 0.96), rgba(116, 226, 255, 0.86)),
    #75f2c7 !important;
  color: #041116 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 14px 28px rgba(117, 242, 199, 0.14) !important;
}

.payment-controls .promo-box button:hover,
.payment-controls .promo-box button:focus-visible {
  border-color: rgba(200, 255, 235, 0.70) !important;
  filter: brightness(1.04);
}

.payment-controls .promo-box p:empty {
  display: none !important;
}

.login-modal,
.forgot-modal,
.reset-modal,
.register-modal {
  border-radius: 20px !important;
}

.login-modal {
  width: min(600px, 100%) !important;
  padding: clamp(24px, 3vw, 34px) !important;
}

.login-modal h2,
.forgot-modal h2,
.reset-modal h2,
.register-modal h2 {
  max-width: calc(100% - 54px) !important;
  margin-bottom: 10px !important;
  font-size: clamp(38px, 4.6vw, 58px) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

.login-modal .modal-lead,
.forgot-modal .modal-lead,
.reset-modal .modal-lead,
.register-modal .modal-lead {
  max-width: 46ch !important;
  margin-bottom: 18px !important;
  color: rgba(237, 232, 255, 0.76) !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
}

.login-modal-form,
.forgot-modal-form,
.reset-modal-form,
.register-modal-form {
  gap: 12px !important;
}

.login-modal-form input,
.forgot-modal-form input,
.reset-modal-form input,
.register-modal-form input {
  min-height: 50px !important;
  border-radius: 14px !important;
}

.register-modal .password-row,
.register-modal .code-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(142px, 168px) !important;
  gap: 10px !important;
  align-items: stretch !important;
}

.register-modal .password-generate,
.register-modal .code-row button {
  width: 100% !important;
  min-height: 50px !important;
  border-radius: 14px !important;
  padding: 0 14px !important;
  white-space: normal !important;
  line-height: 1.08 !important;
}

.register-modal .password-generate {
  border-color: rgba(196, 181, 253, 0.42) !important;
  background:
    linear-gradient(135deg, rgba(168, 85, 247, 0.16), rgba(116, 226, 255, 0.07)),
    rgba(11, 14, 32, 0.92) !important;
  color: #ffffff !important;
}

.register-modal .code-row button,
.register-modal .modal-submit,
.forgot-modal .modal-submit,
.reset-modal .modal-submit,
.login-modal .modal-submit {
  border: 1px solid rgba(117, 242, 199, 0.38) !important;
  background:
    linear-gradient(135deg, rgba(117, 242, 199, 0.96), rgba(116, 226, 255, 0.86)),
    #75f2c7 !important;
  color: #041116 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 14px 30px rgba(117, 242, 199, 0.13) !important;
}

.register-modal .modal-extra {
  display: flex !important;
  justify-content: center !important;
  margin-top: 8px !important;
}

.register-modal .modal-extra button,
.forgot-modal .modal-extra button,
.reset-modal .modal-extra button {
  width: auto !important;
  min-width: 184px !important;
  border-color: rgba(196, 181, 253, 0.34) !important;
  background: rgba(14, 13, 30, 0.72) !important;
  color: rgba(250, 246, 255, 0.92) !important;
  box-shadow: none !important;
}

.auth-modal-kicker {
  margin-bottom: 12px !important;
}

.forgot-modal,
.reset-modal {
  width: min(560px, 100%) !important;
  padding: clamp(24px, 3.5vw, 36px) !important;
}

.forgot-modal .modal-extra,
.reset-modal .modal-extra {
  display: flex !important;
  justify-content: center !important;
}

.hwid-reset-mini {
  min-width: 154px !important;
  min-height: 34px !important;
}

@media (max-width: 640px) {
  .payment-controls .promo-box div,
  .register-modal .password-row,
  .register-modal .code-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .payment-controls .promo-box button,
  .register-modal .password-generate,
  .register-modal .code-row button {
    min-width: 0 !important;
  }

  .login-modal,
  .forgot-modal,
  .reset-modal,
  .register-modal {
    padding: 22px 16px !important;
  }
}

/* CDNRELAY_UX_FINISH_20260520_V2: shorter auth flows and clearer checkout controls. */
.modal-backdrop .login-modal,
.modal-backdrop .forgot-modal,
.modal-backdrop .reset-modal,
.modal-backdrop .register-modal {
  width: min(560px, calc(100vw - 32px)) !important;
  max-height: calc(100vh - 40px) !important;
  overflow: auto !important;
}

.modal-backdrop .login-modal h2,
.modal-backdrop .forgot-modal h2,
.modal-backdrop .reset-modal h2,
.modal-backdrop .register-modal h2 {
  font-size: clamp(34px, 4vw, 50px) !important;
}

.modal-backdrop .register-modal {
  width: min(600px, calc(100vw - 32px)) !important;
}

.modal-backdrop .register-modal .modal-lead {
  max-width: 40ch !important;
}

.modal-backdrop .register-modal .password-row,
.modal-backdrop .register-modal .code-row {
  grid-template-columns: minmax(0, 1fr) 154px !important;
}

.modal-backdrop .register-modal .password-generate,
.modal-backdrop .register-modal .code-row button {
  font-size: 13px !important;
  font-weight: 900 !important;
}

.modal-backdrop .register-modal .modal-submit,
.modal-backdrop .login-modal .modal-submit,
.modal-backdrop .forgot-modal .modal-submit,
.modal-backdrop .reset-modal .modal-submit,
.payment-controls .promo-box button,
.checkout-actions [data-create-payment] {
  background:
    linear-gradient(135deg, rgba(117, 242, 199, 0.98), rgba(116, 226, 255, 0.88)),
    #75f2c7 !important;
  color: #041116 !important;
  border-color: rgba(142, 255, 218, 0.52) !important;
}

.modal-backdrop .register-modal .modal-extra button,
.modal-backdrop .login-modal .modal-extra button,
.modal-backdrop .forgot-modal .modal-extra button,
.modal-backdrop .reset-modal .modal-extra button {
  min-height: 46px !important;
  border-radius: 14px !important;
}

.modal-backdrop .register-modal .modal-extra {
  margin-top: 6px !important;
}

.payment-controls .promo-box p {
  min-height: 0 !important;
  margin: 0 !important;
  color: rgba(237, 232, 255, 0.68) !important;
}

@media (max-width: 640px) {
  .modal-backdrop .login-modal,
  .modal-backdrop .forgot-modal,
  .modal-backdrop .reset-modal,
  .modal-backdrop .register-modal {
    width: calc(100vw - 20px) !important;
    max-height: calc(100vh - 20px) !important;
    padding: 20px 14px !important;
  }

  .modal-backdrop .login-modal h2,
  .modal-backdrop .forgot-modal h2,
  .modal-backdrop .reset-modal h2,
  .modal-backdrop .register-modal h2 {
    font-size: clamp(30px, 11vw, 42px) !important;
  }

  .modal-backdrop .register-modal .password-row,
  .modal-backdrop .register-modal .code-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* CDNRELAY_AUTH_PAY_CTA_ALIGN_20260520: align payment/auth actions with trial and quick-connect buttons. */
.modal-backdrop .login-modal .modal-submit,
.modal-backdrop .register-modal .modal-submit,
.modal-backdrop .forgot-modal .modal-submit,
.modal-backdrop .reset-modal .modal-submit,
.modal-backdrop .register-modal .password-generate,
.modal-backdrop .register-modal .code-row button,
.payment-controls .promo-box button,
.checkout-actions [data-create-payment],
.checkout-actions [data-family-redeem] {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  min-height: 50px !important;
  border: 1px solid rgba(90, 240, 185, 0.42) !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 24% 0%, rgba(90, 240, 185, 0.18), transparent 58%),
    rgba(69, 216, 255, 0.055) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    0 14px 34px rgba(90, 240, 185, 0.10) !important;
  text-shadow: none !important;
  filter: none !important;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease !important;
}

.modal-backdrop .login-modal .modal-submit::before,
.modal-backdrop .register-modal .modal-submit::before,
.modal-backdrop .forgot-modal .modal-submit::before,
.modal-backdrop .reset-modal .modal-submit::before,
.modal-backdrop .register-modal .password-generate::before,
.modal-backdrop .register-modal .code-row button::before,
.payment-controls .promo-box button::before,
.checkout-actions [data-create-payment]::before,
.checkout-actions [data-family-redeem]::before {
  position: absolute !important;
  inset: -2px !important;
  content: "" !important;
  pointer-events: none !important;
  background: linear-gradient(115deg, transparent 0 34%, rgba(255, 255, 255, 0.24), transparent 58% 100%) !important;
  opacity: 0 !important;
  transform: translateX(-120%) !important;
  transition: opacity 220ms ease, transform 520ms ease !important;
}

.modal-backdrop .login-modal .modal-submit:hover,
.modal-backdrop .login-modal .modal-submit:focus-visible,
.modal-backdrop .register-modal .modal-submit:hover,
.modal-backdrop .register-modal .modal-submit:focus-visible,
.modal-backdrop .forgot-modal .modal-submit:hover,
.modal-backdrop .forgot-modal .modal-submit:focus-visible,
.modal-backdrop .reset-modal .modal-submit:hover,
.modal-backdrop .reset-modal .modal-submit:focus-visible,
.modal-backdrop .register-modal .password-generate:hover,
.modal-backdrop .register-modal .password-generate:focus-visible,
.modal-backdrop .register-modal .code-row button:hover,
.modal-backdrop .register-modal .code-row button:focus-visible,
.payment-controls .promo-box button:hover,
.payment-controls .promo-box button:focus-visible,
.checkout-actions [data-create-payment]:hover,
.checkout-actions [data-create-payment]:focus-visible,
.checkout-actions [data-family-redeem]:hover,
.checkout-actions [data-family-redeem]:focus-visible {
  transform: translateY(-1px) !important;
  border-color: rgba(90, 240, 185, 0.70) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(69, 216, 255, 0.13), transparent 60%),
    rgba(90, 240, 185, 0.045) !important;
  box-shadow:
    0 18px 42px rgba(69, 216, 255, 0.10),
    inset 0 0 0 1px rgba(90, 240, 185, 0.12) !important;
  outline: none !important;
}

.modal-backdrop .login-modal .modal-submit:hover::before,
.modal-backdrop .login-modal .modal-submit:focus-visible::before,
.modal-backdrop .register-modal .modal-submit:hover::before,
.modal-backdrop .register-modal .modal-submit:focus-visible::before,
.modal-backdrop .forgot-modal .modal-submit:hover::before,
.modal-backdrop .forgot-modal .modal-submit:focus-visible::before,
.modal-backdrop .reset-modal .modal-submit:hover::before,
.modal-backdrop .reset-modal .modal-submit:focus-visible::before,
.modal-backdrop .register-modal .password-generate:hover::before,
.modal-backdrop .register-modal .password-generate:focus-visible::before,
.modal-backdrop .register-modal .code-row button:hover::before,
.modal-backdrop .register-modal .code-row button:focus-visible::before,
.payment-controls .promo-box button:hover::before,
.payment-controls .promo-box button:focus-visible::before,
.checkout-actions [data-create-payment]:hover::before,
.checkout-actions [data-create-payment]:focus-visible::before,
.checkout-actions [data-family-redeem]:hover::before,
.checkout-actions [data-family-redeem]:focus-visible::before {
  opacity: 1 !important;
  transform: translateX(120%) !important;
}

.modal-backdrop .login-modal .modal-extra,
.modal-backdrop .register-modal .modal-extra,
.modal-backdrop .forgot-modal .modal-extra,
.modal-backdrop .reset-modal .modal-extra {
  gap: 8px !important;
}

.modal-backdrop .login-modal .modal-extra {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.modal-backdrop .login-modal .modal-extra button,
.modal-backdrop .register-modal .modal-extra button,
.modal-backdrop .forgot-modal .modal-extra button,
.modal-backdrop .reset-modal .modal-extra button {
  min-height: 44px !important;
  border: 1px solid rgba(168, 85, 247, 0.38) !important;
  border-radius: 14px !important;
  background:
    radial-gradient(circle at 22% 0%, rgba(168, 85, 247, 0.18), transparent 58%),
    rgba(255, 255, 255, 0.025) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    0 14px 34px rgba(139, 92, 255, 0.10) !important;
  font-weight: 900 !important;
}

.modal-backdrop .login-modal .modal-extra button {
  width: 100% !important;
  min-width: 0 !important;
}

.modal-backdrop .forgot-modal .modal-extra button {
  width: min(100%, 260px) !important;
  min-width: 0 !important;
}

.modal-backdrop .login-modal .modal-extra button:hover,
.modal-backdrop .login-modal .modal-extra button:focus-visible,
.modal-backdrop .register-modal .modal-extra button:hover,
.modal-backdrop .register-modal .modal-extra button:focus-visible,
.modal-backdrop .forgot-modal .modal-extra button:hover,
.modal-backdrop .forgot-modal .modal-extra button:focus-visible,
.modal-backdrop .reset-modal .modal-extra button:hover,
.modal-backdrop .reset-modal .modal-extra button:focus-visible {
  border-color: rgba(196, 181, 253, 0.58) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(168, 85, 247, 0.17), transparent 60%),
    rgba(18, 16, 38, 0.76) !important;
  box-shadow:
    0 16px 34px rgba(139, 92, 255, 0.14),
    inset 0 0 0 1px rgba(196, 181, 253, 0.08) !important;
  outline: none !important;
}

.modal-backdrop .forgot-modal .auth-modal-kicker {
  display: none !important;
}

.modal-backdrop .register-modal .offer-consent {
  margin-top: 6px !important;
  padding: 10px 12px !important;
  border-color: rgba(116, 226, 255, 0.18) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.032), rgba(255, 255, 255, 0.012)),
    rgba(9, 13, 28, 0.56) !important;
  color: rgba(237, 232, 255, 0.68) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

.modal-backdrop .register-modal .offer-consent a {
  color: rgba(126, 240, 255, 0.84) !important;
  text-decoration-color: rgba(126, 240, 255, 0.32) !important;
}

@media (max-width: 520px) {
  .modal-backdrop .login-modal .modal-extra {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* CDNRELAY_HWID_RESET_MODAL_20260521: align device reset with auth modals. */
.modal-backdrop .hwid-reset-modal {
  width: min(560px, calc(100vw - 32px)) !important;
  max-width: none !important;
  max-height: calc(100vh - 40px) !important;
  overflow: auto !important;
  padding: clamp(24px, 3vw, 34px) !important;
  border: 1px solid rgba(168, 85, 247, 0.38) !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(168, 85, 247, 0.16), transparent 44%),
    radial-gradient(circle at 82% 4%, rgba(116, 226, 255, 0.10), transparent 36%),
    linear-gradient(180deg, rgba(13, 15, 34, 0.98), rgba(7, 9, 22, 0.98)) !important;
  box-shadow:
    0 26px 72px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
}

.modal-backdrop .hwid-reset-modal h2 {
  max-width: calc(100% - 54px) !important;
  margin-bottom: 10px !important;
  font-size: clamp(34px, 4vw, 50px) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

.modal-backdrop .hwid-reset-modal .modal-lead {
  max-width: 44ch !important;
  margin-bottom: 18px !important;
  color: rgba(237, 232, 255, 0.76) !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
}

.modal-backdrop .hwid-reset-form {
  display: grid !important;
  gap: 12px !important;
}

.modal-backdrop .hwid-reset-form label {
  display: grid !important;
  gap: 8px !important;
  color: rgba(244, 238, 255, 0.74) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

.modal-backdrop .hwid-reset-form input {
  width: 100% !important;
  min-height: 50px !important;
  border: 1px solid rgba(196, 181, 253, 0.32) !important;
  border-radius: 14px !important;
  background: rgba(5, 8, 20, 0.72) !important;
  color: #ffffff !important;
  font-size: 22px !important;
  font-weight: 950 !important;
  letter-spacing: 0.16em !important;
  text-align: center !important;
  outline: none !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025) !important;
}

.modal-backdrop .hwid-reset-form input:focus {
  border-color: rgba(116, 226, 255, 0.58) !important;
  box-shadow:
    0 0 0 3px rgba(116, 226, 255, 0.10),
    inset 0 0 0 1px rgba(116, 226, 255, 0.12) !important;
}

.modal-backdrop .hwid-reset-modal .modal-submit {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  min-height: 50px !important;
  border: 1px solid rgba(90, 240, 185, 0.42) !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 24% 0%, rgba(90, 240, 185, 0.18), transparent 58%),
    rgba(69, 216, 255, 0.055) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    0 14px 34px rgba(90, 240, 185, 0.10) !important;
  text-shadow: none !important;
  filter: none !important;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease !important;
}

.modal-backdrop .hwid-reset-modal .modal-submit::before {
  position: absolute !important;
  inset: -2px !important;
  content: "" !important;
  pointer-events: none !important;
  background: linear-gradient(115deg, transparent 0 34%, rgba(255, 255, 255, 0.24), transparent 58% 100%) !important;
  opacity: 0 !important;
  transform: translateX(-120%) !important;
  transition: opacity 220ms ease, transform 520ms ease !important;
}

.modal-backdrop .hwid-reset-modal .modal-submit:hover,
.modal-backdrop .hwid-reset-modal .modal-submit:focus-visible {
  transform: translateY(-1px) !important;
  border-color: rgba(90, 240, 185, 0.70) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(69, 216, 255, 0.13), transparent 60%),
    rgba(90, 240, 185, 0.045) !important;
  box-shadow:
    0 18px 42px rgba(69, 216, 255, 0.10),
    inset 0 0 0 1px rgba(90, 240, 185, 0.12) !important;
  outline: none !important;
}

.modal-backdrop .hwid-reset-modal .modal-submit:hover::before,
.modal-backdrop .hwid-reset-modal .modal-submit:focus-visible::before {
  opacity: 1 !important;
  transform: translateX(120%) !important;
}

.modal-backdrop .hwid-reset-modal .modal-extra {
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-top: 8px !important;
}

.modal-backdrop .hwid-reset-modal .modal-extra button {
  width: min(100%, 260px) !important;
  min-height: 44px !important;
  min-width: 0 !important;
  border: 1px solid rgba(168, 85, 247, 0.38) !important;
  border-radius: 14px !important;
  background:
    radial-gradient(circle at 22% 0%, rgba(168, 85, 247, 0.18), transparent 58%),
    rgba(255, 255, 255, 0.025) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    0 14px 34px rgba(139, 92, 255, 0.10) !important;
  font-weight: 900 !important;
}

.modal-backdrop .hwid-reset-modal .modal-extra button:hover,
.modal-backdrop .hwid-reset-modal .modal-extra button:focus-visible {
  border-color: rgba(196, 181, 253, 0.58) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(168, 85, 247, 0.17), transparent 60%),
    rgba(18, 16, 38, 0.76) !important;
  box-shadow:
    0 16px 34px rgba(139, 92, 255, 0.14),
    inset 0 0 0 1px rgba(196, 181, 253, 0.08) !important;
  outline: none !important;
}

@media (max-width: 640px) {
  .modal-backdrop .hwid-reset-modal {
    width: calc(100vw - 20px) !important;
    max-height: calc(100vh - 20px) !important;
    padding: 20px 14px !important;
  }

  .modal-backdrop .hwid-reset-modal h2 {
    font-size: clamp(30px, 11vw, 42px) !important;
  }
}

/* CDNRELAY_HWID_RESET_MODAL_20260521_V2: final override so reset dialog matches auth windows. */
body .modal-backdrop[data-modal="hwid-reset"] {
  z-index: 10000 !important;
  padding: 18px !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(117, 242, 199, 0.10), transparent 24rem),
    rgba(2, 4, 10, 0.88) !important;
  backdrop-filter: blur(20px) saturate(1.08) !important;
}

body .modal-backdrop[data-modal="hwid-reset"] .hwid-reset-modal {
  position: relative !important;
  isolation: isolate !important;
  display: grid !important;
  width: min(500px, calc(100vw - 32px)) !important;
  max-width: none !important;
  max-height: calc(100vh - 36px) !important;
  gap: 14px !important;
  overflow: auto !important;
  border: 1px solid rgba(116, 226, 255, 0.24) !important;
  border-radius: 20px !important;
  padding: 28px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(117, 242, 199, 0.10), transparent 34%),
    linear-gradient(180deg, #101225 0%, #080b18 100%) !important;
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.56),
    inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
  backdrop-filter: none !important;
}

body .modal-backdrop[data-modal="hwid-reset"] .hwid-reset-modal .auth-modal-kicker,
body .modal-backdrop[data-modal="hwid-reset"] .hwid-reset-modal > span:first-child {
  display: none !important;
}

body .modal-backdrop[data-modal="hwid-reset"] .modal-close {
  top: 18px !important;
  right: 18px !important;
  width: 44px !important;
  height: 44px !important;
  border-color: rgba(196, 181, 253, 0.30) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  box-shadow: none !important;
}

body .modal-backdrop[data-modal="hwid-reset"] .hwid-reset-modal h2 {
  max-width: calc(100% - 56px) !important;
  margin: 0 !important;
  color: #ffffff !important;
  font-size: clamp(30px, 4.2vw, 40px) !important;
  font-weight: 950 !important;
  line-height: 1.04 !important;
  letter-spacing: 0 !important;
}

body .modal-backdrop[data-modal="hwid-reset"] .hwid-reset-modal .modal-lead {
  max-width: 42ch !important;
  margin: 0 0 2px !important;
  color: rgba(237, 232, 255, 0.76) !important;
  font-size: 15px !important;
  line-height: 1.46 !important;
}

body .modal-backdrop[data-modal="hwid-reset"] .hwid-reset-form {
  display: grid !important;
  gap: 12px !important;
}

body .modal-backdrop[data-modal="hwid-reset"] .hwid-reset-form label {
  display: grid !important;
  gap: 8px !important;
  margin: 0 !important;
  color: rgba(244, 238, 255, 0.70) !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  line-height: 1.1 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

body .modal-backdrop[data-modal="hwid-reset"] .hwid-reset-form input {
  width: 100% !important;
  min-height: 52px !important;
  border: 1px solid rgba(196, 181, 253, 0.30) !important;
  border-radius: 14px !important;
  padding: 0 16px !important;
  background: #060817 !important;
  color: #ffffff !important;
  font-size: 22px !important;
  font-weight: 950 !important;
  letter-spacing: 0.14em !important;
  text-align: center !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

body .modal-backdrop[data-modal="hwid-reset"] .hwid-reset-modal .modal-submit {
  min-height: 52px !important;
  border: 1px solid rgba(117, 242, 199, 0.46) !important;
  border-radius: 14px !important;
  padding: 0 18px !important;
  background:
    linear-gradient(135deg, rgba(117, 242, 199, 0.98), rgba(116, 226, 255, 0.88)),
    #75f2c7 !important;
  color: #041116 !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  line-height: 1.1 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 16px 36px rgba(117, 242, 199, 0.14) !important;
  filter: none !important;
}

body .modal-backdrop[data-modal="hwid-reset"] .hwid-reset-modal .modal-status {
  min-height: 0 !important;
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.36 !important;
}

body .modal-backdrop[data-modal="hwid-reset"] .hwid-reset-modal .modal-extra {
  display: flex !important;
  justify-content: center !important;
  margin: 0 !important;
}

body .modal-backdrop[data-modal="hwid-reset"] .hwid-reset-modal .modal-extra button {
  width: auto !important;
  min-width: 210px !important;
  min-height: 46px !important;
  border: 1px solid rgba(196, 181, 253, 0.30) !important;
  border-radius: 14px !important;
  padding: 0 18px !important;
  background: rgba(255, 255, 255, 0.035) !important;
  color: rgba(250, 246, 255, 0.92) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  box-shadow: none !important;
}

@media (max-width: 520px) {
  body .modal-backdrop[data-modal="hwid-reset"] {
    padding: 10px !important;
  }

  body .modal-backdrop[data-modal="hwid-reset"] .hwid-reset-modal {
    width: calc(100vw - 20px) !important;
    max-height: calc(100vh - 20px) !important;
    padding: 22px 16px !important;
  }

  body .modal-backdrop[data-modal="hwid-reset"] .hwid-reset-modal h2 {
    max-width: calc(100% - 50px) !important;
    font-size: clamp(28px, 9vw, 34px) !important;
  }

  body .modal-backdrop[data-modal="hwid-reset"] .hwid-reset-modal .modal-extra button {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* CDNRELAY_HWID_RESET_MODAL_20260521_V3: calmer card and readable OTP placeholder. */
body .modal-backdrop[data-modal="hwid-reset"] {
  background:
    radial-gradient(circle at 50% 18%, rgba(116, 226, 255, 0.09), transparent 23rem),
    rgba(2, 5, 12, 0.90) !important;
}

body .modal-backdrop[data-modal="hwid-reset"] .hwid-reset-modal {
  width: min(480px, calc(100vw - 32px)) !important;
  gap: 13px !important;
  border-color: rgba(116, 226, 255, 0.28) !important;
  border-radius: 18px !important;
  padding: 28px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(116, 226, 255, 0.095), transparent 34%),
    linear-gradient(180deg, rgba(15, 18, 35, 0.99), rgba(7, 9, 20, 0.99)) !important;
  box-shadow:
    0 26px 76px rgba(0, 0, 0, 0.58),
    inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
}

body .modal-backdrop[data-modal="hwid-reset"] .modal-close {
  width: 42px !important;
  height: 42px !important;
  border-radius: 14px !important;
}

body .modal-backdrop[data-modal="hwid-reset"] .hwid-reset-modal h2 {
  max-width: calc(100% - 54px) !important;
  font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: clamp(29px, 4vw, 36px) !important;
  font-weight: 850 !important;
  line-height: 1.08 !important;
}

body .modal-backdrop[data-modal="hwid-reset"] .hwid-reset-modal .modal-lead {
  color: rgba(237, 232, 255, 0.72) !important;
  font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

body .modal-backdrop[data-modal="hwid-reset"] .hwid-reset-form label {
  color: rgba(237, 232, 255, 0.70) !important;
  font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 0.045em !important;
}

body .modal-backdrop[data-modal="hwid-reset"] .hwid-reset-form input {
  min-height: 50px !important;
  border-color: rgba(196, 181, 253, 0.28) !important;
  border-radius: 13px !important;
  background: rgba(5, 8, 19, 0.92) !important;
  font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
}

body .modal-backdrop[data-modal="hwid-reset"] .hwid-reset-form input::placeholder {
  color: rgba(237, 232, 255, 0.42) !important;
  font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 16px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  opacity: 1 !important;
}

body .modal-backdrop[data-modal="hwid-reset"] .hwid-reset-modal .modal-submit {
  min-height: 50px !important;
  border-radius: 13px !important;
  background:
    linear-gradient(135deg, #75e8cc, #72dff3),
    #75e8cc !important;
  color: #071218 !important;
  font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 12px 28px rgba(116, 226, 255, 0.12) !important;
}

body .modal-backdrop[data-modal="hwid-reset"] .hwid-reset-modal .modal-status {
  color: rgba(237, 232, 255, 0.68) !important;
  font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 13px !important;
  font-weight: 650 !important;
}

body .modal-backdrop[data-modal="hwid-reset"] .hwid-reset-modal .modal-extra button {
  min-height: 44px !important;
  border-radius: 13px !important;
  color: rgba(250, 246, 255, 0.88) !important;
  font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 13px !important;
  font-weight: 750 !important;
}

@media (max-width: 520px) {
  body .modal-backdrop[data-modal="hwid-reset"] .hwid-reset-modal {
    padding: 22px 16px !important;
  }

  body .modal-backdrop[data-modal="hwid-reset"] .hwid-reset-modal h2 {
    font-size: clamp(27px, 8.2vw, 32px) !important;
  }
}

/* CDNRELAY_AUTH_BUTTON_STACK_20260521: stacked modal actions, register-style colors. */
.modal-backdrop .login-modal .modal-submit,
.modal-backdrop .register-modal .modal-submit,
.modal-backdrop .forgot-modal .modal-submit,
.modal-backdrop .reset-modal .modal-submit,
body .modal-backdrop[data-modal="hwid-reset"] .hwid-reset-modal .modal-submit,
.modal-backdrop .register-modal .password-generate,
.modal-backdrop .register-modal .code-row button {
  width: 100% !important;
  min-height: 50px !important;
  border: 1px solid rgba(90, 240, 185, 0.46) !important;
  border-radius: 14px !important;
  padding: 0 18px !important;
  background:
    radial-gradient(circle at 24% 0%, rgba(90, 240, 185, 0.16), transparent 58%),
    linear-gradient(180deg, rgba(22, 48, 54, 0.72), rgba(13, 25, 39, 0.90)) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 0 0 1px rgba(90, 240, 185, 0.055),
    0 12px 28px rgba(45, 212, 191, 0.08) !important;
  filter: none !important;
  text-shadow: none !important;
  transform: none !important;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease !important;
}

.modal-backdrop .login-modal .modal-submit:hover,
.modal-backdrop .login-modal .modal-submit:focus-visible,
.modal-backdrop .register-modal .modal-submit:hover,
.modal-backdrop .register-modal .modal-submit:focus-visible,
.modal-backdrop .forgot-modal .modal-submit:hover,
.modal-backdrop .forgot-modal .modal-submit:focus-visible,
.modal-backdrop .reset-modal .modal-submit:hover,
.modal-backdrop .reset-modal .modal-submit:focus-visible,
body .modal-backdrop[data-modal="hwid-reset"] .hwid-reset-modal .modal-submit:hover,
body .modal-backdrop[data-modal="hwid-reset"] .hwid-reset-modal .modal-submit:focus-visible,
.modal-backdrop .register-modal .password-generate:hover,
.modal-backdrop .register-modal .password-generate:focus-visible,
.modal-backdrop .register-modal .code-row button:hover,
.modal-backdrop .register-modal .code-row button:focus-visible {
  transform: translateY(-1px) !important;
  border-color: rgba(117, 242, 199, 0.72) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(116, 226, 255, 0.15), transparent 60%),
    linear-gradient(180deg, rgba(25, 58, 62, 0.82), rgba(15, 29, 44, 0.96)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 0 0 1px rgba(90, 240, 185, 0.11),
    0 14px 34px rgba(69, 216, 255, 0.12) !important;
  outline: none !important;
}

.modal-backdrop .login-modal .modal-extra,
.modal-backdrop .register-modal .modal-extra,
.modal-backdrop .forgot-modal .modal-extra,
.modal-backdrop .reset-modal .modal-extra,
body .modal-backdrop[data-modal="hwid-reset"] .hwid-reset-modal .modal-extra {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 10px 0 0 !important;
  justify-content: stretch !important;
  justify-items: stretch !important;
}

.modal-backdrop .login-modal .modal-extra button,
.modal-backdrop .register-modal .modal-extra button,
.modal-backdrop .forgot-modal .modal-extra button,
.modal-backdrop .reset-modal .modal-extra button,
body .modal-backdrop[data-modal="hwid-reset"] .hwid-reset-modal .modal-extra button {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 46px !important;
  border: 1px solid rgba(168, 85, 247, 0.38) !important;
  border-radius: 14px !important;
  padding: 0 18px !important;
  background:
    radial-gradient(circle at 22% 0%, rgba(168, 85, 247, 0.16), transparent 58%),
    rgba(18, 16, 38, 0.78) !important;
  color: rgba(250, 246, 255, 0.94) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 10px 24px rgba(88, 28, 135, 0.12) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  text-align: center !important;
  transform: none !important;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease !important;
}

.modal-backdrop .login-modal .modal-extra button:hover,
.modal-backdrop .login-modal .modal-extra button:focus-visible,
.modal-backdrop .register-modal .modal-extra button:hover,
.modal-backdrop .register-modal .modal-extra button:focus-visible,
.modal-backdrop .forgot-modal .modal-extra button:hover,
.modal-backdrop .forgot-modal .modal-extra button:focus-visible,
.modal-backdrop .reset-modal .modal-extra button:hover,
.modal-backdrop .reset-modal .modal-extra button:focus-visible,
body .modal-backdrop[data-modal="hwid-reset"] .hwid-reset-modal .modal-extra button:hover,
body .modal-backdrop[data-modal="hwid-reset"] .hwid-reset-modal .modal-extra button:focus-visible {
  transform: translateY(-1px) !important;
  border-color: rgba(196, 181, 253, 0.64) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(168, 85, 247, 0.20), transparent 60%),
    rgba(22, 18, 46, 0.88) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.075),
    0 13px 30px rgba(126, 34, 206, 0.16) !important;
  outline: none !important;
}

.modal-backdrop .register-modal .modal-status,
.modal-backdrop .login-modal .modal-status,
.modal-backdrop .forgot-modal .modal-status,
.modal-backdrop .reset-modal .modal-status,
body .modal-backdrop[data-modal="hwid-reset"] .hwid-reset-modal .modal-status {
  margin: 0 !important;
  min-height: 0 !important;
}

/* CDNRELAY_AUTH_INPUT_READABILITY_20260521: keep typed/autofilled auth text visible on dark fields. */
.modal-backdrop .login-modal input,
.modal-backdrop .register-modal input,
.modal-backdrop .forgot-modal input,
.modal-backdrop .reset-modal input,
body .modal-backdrop[data-modal="hwid-reset"] .hwid-reset-form input {
  color: rgba(250, 252, 255, 0.96) !important;
  -webkit-text-fill-color: rgba(250, 252, 255, 0.96) !important;
  caret-color: #75e8cc !important;
  text-shadow: none !important;
}

.modal-backdrop .login-modal input::placeholder,
.modal-backdrop .register-modal input::placeholder,
.modal-backdrop .forgot-modal input::placeholder,
.modal-backdrop .reset-modal input::placeholder,
body .modal-backdrop[data-modal="hwid-reset"] .hwid-reset-form input::placeholder {
  color: rgba(237, 232, 255, 0.46) !important;
  -webkit-text-fill-color: rgba(237, 232, 255, 0.46) !important;
  opacity: 1 !important;
}

.modal-backdrop .login-modal input:-webkit-autofill,
.modal-backdrop .register-modal input:-webkit-autofill,
.modal-backdrop .forgot-modal input:-webkit-autofill,
.modal-backdrop .reset-modal input:-webkit-autofill {
  box-shadow: 0 0 0 1000px rgba(5, 8, 19, 0.96) inset !important;
  -webkit-box-shadow: 0 0 0 1000px rgba(5, 8, 19, 0.96) inset !important;
  -webkit-text-fill-color: rgba(250, 252, 255, 0.96) !important;
}

/* CDNRELAY_MOBILE_MENU_OVERLAY_20260522: compact sticky header, readable dropdown actions. */
@media (max-width: 980px) {
  .site-shell {
    width: min(100% - 20px, 1180px) !important;
    padding-inline: 0 !important;
  }

  .site-header {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px !important;
    align-items: center !important;
    min-height: 64px !important;
    margin-top: 10px !important;
    padding: 9px !important;
    border-radius: 18px !important;
    overflow: visible !important;
  }

  .site-header .brand {
    min-width: 0 !important;
  }

  .site-header .brand-mark {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
  }

  .site-header .brand b {
    overflow: hidden !important;
    font-size: 15px !important;
    letter-spacing: 0 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .menu-button {
    display: grid !important;
    position: relative !important;
    z-index: 20 !important;
    width: auto !important;
    min-width: 48px !important;
    min-height: 42px !important;
    grid-template-columns: 18px auto !important;
    grid-template-rows: repeat(3, 2px) !important;
    column-gap: 8px !important;
    row-gap: 4px !important;
    align-content: center !important;
    justify-content: center !important;
    padding: 0 12px !important;
    border-radius: 14px !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .menu-button span {
    grid-column: 1 !important;
    width: 18px !important;
    height: 2px !important;
    margin: 0 !important;
  }

  .menu-button span:nth-child(1) { grid-row: 1 !important; }
  .menu-button span:nth-child(2) { grid-row: 2 !important; }
  .menu-button span:nth-child(3) { grid-row: 3 !important; }

  .menu-button b {
    grid-column: 2 !important;
    grid-row: 1 / 4 !important;
    align-self: center !important;
    font-size: 13px !important;
    letter-spacing: 0 !important;
  }

  .site-header:not(.is-open) .main-nav,
  .site-header:not(.is-open) .header-account-group:not([hidden]),
  .site-header:not(.is-open) .header-auth-actions:not([hidden]) {
    display: none !important;
  }

  .site-header.is-open .main-nav {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: 0 !important;
    display: grid !important;
    grid-column: auto !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: auto !important;
    gap: 8px !important;
    padding: 10px !important;
    border: 1px solid rgba(168, 85, 247, 0.40) !important;
    border-radius: 18px !important;
    background:
      linear-gradient(180deg, rgba(12, 14, 30, 0.96), rgba(7, 8, 20, 0.96)),
      rgba(7, 8, 20, 0.96) !important;
    box-shadow:
      0 18px 44px rgba(0, 0, 0, 0.36),
      inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(18px) !important;
  }

  .site-header.is-open .main-nav a,
  .site-header.is-open .main-nav button {
    width: 100% !important;
    min-height: 44px !important;
    justify-content: flex-start !important;
    padding: 0 14px !important;
    border-radius: 13px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    text-align: left !important;
    white-space: nowrap !important;
  }

  .site-header.is-open .header-account-group:not([hidden]),
  .site-header.is-open .header-auth-actions:not([hidden]) {
    position: absolute !important;
    top: calc(100% + var(--cdnrelay-menu-height, 274px) + 28px) !important;
    right: 0 !important;
    left: 0 !important;
    display: grid !important;
    grid-column: auto !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: auto !important;
    gap: 8px !important;
    padding: 10px !important;
    border: 1px solid rgba(117, 242, 199, 0.28) !important;
    border-radius: 18px !important;
    background:
      linear-gradient(180deg, rgba(8, 24, 29, 0.96), rgba(7, 9, 20, 0.96)),
      rgba(7, 9, 20, 0.96) !important;
    box-shadow:
      0 18px 44px rgba(0, 0, 0, 0.34),
      inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(18px) !important;
  }

  .site-header.is-open .header-account,
  .site-header.is-open .header-logout,
  .site-header.is-open .header-auth-actions button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    justify-content: center !important;
    border-radius: 13px !important;
    padding: 0 14px !important;
    font-size: 14px !important;
    line-height: 1.15 !important;
    text-align: center !important;
    white-space: normal !important;
  }
}

@media (max-width: 360px) {
  .site-header .brand b {
    display: none !important;
  }

  .menu-button b {
    display: none !important;
  }

  .menu-button {
    width: 44px !important;
    padding: 0 !important;
  }
}

/* CDNRELAY_MOBILE_MENU_INLINE_20260522: iOS-safe mobile menu inside sticky header. */
@media (max-width: 980px) {
  .site-header.is-open {
    align-content: start !important;
    row-gap: 10px !important;
    padding-bottom: 10px !important;
  }

  .site-header .brand,
  .site-header .menu-button {
    z-index: 3 !important;
  }

  .site-header.is-open .main-nav {
    position: static !important;
    z-index: 2 !important;
    grid-column: 1 / -1 !important;
    display: grid !important;
    width: 100% !important;
    margin: 2px 0 0 !important;
    transform: none !important;
  }

  .site-header.is-open .header-account-group:not([hidden]),
  .site-header.is-open .header-auth-actions:not([hidden]) {
    position: static !important;
    z-index: 2 !important;
    grid-column: 1 / -1 !important;
    display: grid !important;
    width: 100% !important;
    margin: 0 !important;
    transform: none !important;
  }
}

/* CDNRELAY_OFFER_TOP_AND_ACCOUNT_WIDTH_20260522: offer scroll-top, equal mobile account buttons. */
.offer-top-button {
  position: fixed !important;
  right: max(18px, env(safe-area-inset-right)) !important;
  bottom: max(22px, env(safe-area-inset-bottom)) !important;
  z-index: 88 !important;
  display: inline-flex !important;
  min-width: 112px !important;
  min-height: 46px !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(117, 242, 199, 0.44) !important;
  border-radius: 999px !important;
  padding: 0 18px !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(117, 242, 199, 0.16), transparent 58%),
    linear-gradient(180deg, rgba(12, 24, 34, 0.92), rgba(7, 9, 20, 0.92)) !important;
  color: rgba(250, 255, 255, 0.94) !important;
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  backdrop-filter: blur(16px) !important;
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
}

.offer-top-button:hover,
.offer-top-button:focus-visible {
  border-color: rgba(116, 226, 255, 0.68) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(116, 226, 255, 0.16), transparent 60%),
    linear-gradient(180deg, rgba(17, 34, 44, 0.96), rgba(8, 12, 24, 0.96)) !important;
  color: #ffffff !important;
  outline: none !important;
  transform: translateY(-1px) !important;
}

@media (max-width: 980px) {
  .site-header.is-open .header-account-group:not([hidden]) {
    grid-template-columns: minmax(0, 1fr) !important;
    justify-content: stretch !important;
    justify-items: stretch !important;
    align-items: stretch !important;
  }

  .site-header.is-open .header-account,
  .site-header.is-open .header-logout {
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    justify-self: stretch !important;
  }

  .site-header.is-open .header-account {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .offer-top-button {
    right: max(12px, env(safe-area-inset-right)) !important;
    bottom: max(16px, env(safe-area-inset-bottom)) !important;
    min-width: 96px !important;
    min-height: 44px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
  }
}

/* CDNRELAY_LOCATION_COPY_202605221048: keep the Russian-services proof visible on mobile payment. */
.hero-console {
  min-height: 642px !important;
}

.console-body {
  min-height: 590px !important;
}

.shield-core {
  top: 44% !important;
  z-index: 2;
}

.signal-lines {
  z-index: 0;
}

.route-flow {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: visible;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.98;
}

.route-flow-path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.route-flow-halo {
  stroke: url(#home-route-flow-gradient);
  stroke-width: 8;
  opacity: 0.18;
  filter: url(#home-route-flow-glow-filter);
}

.route-flow-base {
  stroke: rgba(116, 226, 255, 0.24);
  stroke-width: 1.25;
  stroke-dasharray: 4 9;
  opacity: 0.78;
}

.route-flow-pulse {
  stroke: url(#home-route-flow-gradient);
  stroke-width: 2.7;
  stroke-dasharray: 12 88;
  stroke-dashoffset: 0;
  opacity: 0.98;
  filter: url(#home-route-flow-glow-filter);
  animation: route-current 2.9s linear infinite;
}

.route-flow-pulse-b {
  stroke-width: 1.35;
  stroke-dasharray: 5 95;
  opacity: 0.9;
  animation-duration: 1.85s;
  animation-delay: -0.72s;
}

.route-flow-node {
  fill: #75f2c7;
  stroke: rgba(255, 255, 255, 0.82);
  stroke-width: 1.1;
  filter: url(#home-route-flow-glow-filter);
  transform-box: fill-box;
  transform-origin: center;
  animation: route-node-pulse 2.4s ease-in-out infinite;
}

.route-flow-node:nth-child(2) {
  animation-delay: -0.34s;
}

.route-flow-node:nth-child(3) {
  animation-delay: -0.68s;
}

.route-flow-node:nth-child(4) {
  animation-delay: -1.02s;
}

.route-flow-node:nth-child(5) {
  animation-delay: -1.36s;
}

.route-card,
.console-status {
  z-index: 3;
}

.route-card {
  backdrop-filter: blur(18px);
}

.route-card strong {
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  letter-spacing: 0;
}

.route-fi {
  top: 70px !important;
  left: 34px !important;
}

.route-de {
  top: 70px !important;
  right: 34px !important;
}

.route-nl {
  top: 224px;
  left: 34px;
  animation-delay: -2.4s;
}

.route-pl {
  top: 224px;
  right: 34px;
  left: auto;
  animation-delay: -4.2s;
}

.route-ru {
  top: 350px !important;
  right: auto !important;
  left: calc(50% - 66px) !important;
  bottom: auto !important;
}

@media (max-width: 760px) {
  .hero-console {
    --route-console-h: clamp(520px, 142vw, 552px);
    min-height: var(--route-console-h) !important;
  }

  .console-body {
    min-height: calc(var(--route-console-h) - 50px) !important;
  }

  .shield-core {
    top: 184px !important;
    display: grid !important;
    width: 90px !important;
    height: 90px !important;
    opacity: 0.94;
  }

  .orbit {
    inset: -8px !important;
  }

  .orbit-b {
    inset: -16px !important;
    opacity: 0.38 !important;
  }

  .signal-lines {
    display: block !important;
    opacity: 0.12;
  }

  .route-flow {
    opacity: 1;
  }

  .route-flow-halo {
    stroke-width: 7;
    opacity: 0.22;
  }

  .route-flow-base {
    opacity: 0.62;
  }

  .route-flow-pulse {
    stroke-width: 2.35;
  }

  .route-card {
    min-width: 116px !important;
    border-radius: 15px !important;
    padding: 9px !important;
  }

  .route-card small {
    margin-bottom: 5px !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
  }

  .route-card b {
    font-size: 13px !important;
    line-height: 1.15 !important;
  }

  .route-card strong {
    min-height: 25px !important;
    margin-top: 7px !important;
    padding: 4px 7px !important;
    font-size: 11px !important;
    line-height: 1 !important;
  }

  .route-fi {
    top: 24px !important;
    left: 12px !important;
  }

  .route-de {
    top: 24px !important;
    right: 10px !important;
  }

  .route-nl {
    top: 210px !important;
    left: 12px !important;
  }

  .route-pl {
    top: 210px !important;
    right: 10px !important;
    left: auto !important;
  }

  .route-ru {
    top: 292px !important;
    right: auto !important;
    bottom: auto !important;
    left: calc(50% - 58px) !important;
  }

  .console-status {
    bottom: 10px !important;
    right: 12px !important;
    left: 12px !important;
    gap: 10px !important;
    align-items: flex-start !important;
    border-radius: 16px !important;
    padding: 11px 12px !important;
  }

  .console-status b {
    font-size: 15px !important;
    line-height: 1.15 !important;
  }

  .console-status small {
    display: -webkit-box !important;
    margin-top: 5px !important;
    overflow: hidden !important;
    font-size: 11.5px !important;
    line-height: 1.28 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  .status-dot {
    flex: 0 0 auto !important;
    margin-top: 5px !important;
  }

  .pay-page .pay-hero-proof small {
    display: block !important;
    max-width: none !important;
    font-size: 13px !important;
    line-height: 1.42 !important;
  }

  .pay-page .pay-hero-proof span {
    gap: 8px !important;
  }
}

@keyframes route-current {
  to {
    stroke-dashoffset: -100;
  }
}

@keyframes route-node-pulse {
  0%, 100% {
    opacity: 0.62;
    transform: scale(0.88);
  }

  45% {
    opacity: 1;
    transform: scale(1.22);
  }
}

@media (prefers-reduced-motion: reduce) {
  .route-flow-pulse,
  .route-flow-node {
    animation: none !important;
  }
}

/* CDNRELAY_INSTALL_OS_DROPDOWN_DOWN_20260604: platform menu always opens downward. */
.install-selected-device[data-install-os-select],
.install-selected-device[data-install-os-select].is-open,
.install-selected-device[data-install-os-select].is-drop-up {
  overflow: visible !important;
}

.install-selected-device[data-install-os-select].is-drop-up .install-os-menu,
.install-selected-device[data-install-os-select].is-open .install-os-menu,
.install-os-menu {
  top: calc(100% + 6px) !important;
  bottom: auto !important;
}

.install-selected-device.is-open .install-os-current i,
.install-selected-device.is-drop-up .install-os-current i,
.install-os-current i {
  transform: rotate(45deg) translateY(-2px) !important;
}

/* CDNRELAY_INCY_CLIENTS_20260604: five app tabs must wrap cleanly on small desktop. */
.install-panel-premium .install-app-pills,
.install-app-pills {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  min-width: 0 !important;
}

.connect-app-stack {
  max-width: 100% !important;
  grid-template-columns: repeat(5, minmax(30px, 42px)) !important;
  justify-content: end !important;
}

.connect-app-stack span {
  min-width: 0 !important;
}

@media (max-width: 980px) {
  .site-header.is-open {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px !important;
    align-items: center !important;
    overflow: visible !important;
  }

  .site-header.is-open .brand {
    grid-column: 1 / 2 !important;
    min-width: 0 !important;
  }

  .site-header.is-open .menu-button {
    grid-column: 2 / 3 !important;
  }

  .site-header.is-open .main-nav,
  .site-header.is-open .header-account-group:not([hidden]),
  .site-header.is-open .header-auth-actions:not([hidden]) {
    grid-column: 1 / -1 !important;
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }

  .site-header.is-open .main-nav {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    padding-top: 8px !important;
  }

  .site-header.is-open .main-nav a,
  .site-header.is-open .main-nav button,
  .site-header.is-open .header-account,
  .site-header.is-open .header-logout,
  .site-header.is-open .header-auth-actions button {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    justify-content: center !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .site-header.is-open .header-account-group:not([hidden]),
  .site-header.is-open .header-auth-actions:not([hidden]) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }
}

@media (max-width: 760px) {
  .install-panel-premium .install-app-pills,
  .install-app-pills {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .connect-app-stack {
    grid-template-columns: repeat(5, minmax(26px, 36px)) !important;
  }
}

@media (max-width: 460px) {
  .install-panel-premium .install-app-pills,
  .install-app-pills {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

.supported-clients-modal {
  width: min(760px, 100%);
}

.supported-client-list {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.supported-client-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(189, 99, 255, 0.24);
  border-radius: 18px;
  background:
    radial-gradient(circle at 0% 0%, rgba(69, 216, 255, 0.10), transparent 42%),
    rgba(255, 255, 255, 0.028);
}

.supported-client-card.is-primary {
  border-color: rgba(69, 216, 255, 0.42);
  background:
    radial-gradient(circle at 0% 0%, rgba(69, 216, 255, 0.15), transparent 44%),
    rgba(69, 216, 255, 0.045);
}

.supported-client-card .install-app-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
}

.supported-client-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.supported-client-head b {
  color: #fff;
  font-size: 16px;
  font-weight: 900;
}

.supported-client-head span {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(69, 216, 255, 0.34);
  border-radius: 999px;
  padding: 0 9px;
  color: #a7f3ff;
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.supported-client-card p,
.supported-client-disclaimer {
  margin: 6px 0 0;
  color: rgba(248, 242, 255, 0.72);
  font-size: 13px;
  line-height: 1.45;
}

.supported-client-disclaimer {
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.025);
}

/* CDNRELAY_CLIENTS_BUTTON_20260605: keep one clean action set and make Clients a full-width CTA. */
.install-panel-premium .connect-actions-cabinet {
  display: none !important;
}

.install-panel-premium .install-step:nth-child(3) {
  display: none !important;
}

.install-import-actions [data-supported-clients] {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 58px !important;
  height: 58px !important;
  border-color: rgba(155, 166, 196, 0.30) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.070), rgba(255, 255, 255, 0.020)),
    rgba(12, 15, 31, 0.92) !important;
  color: rgba(245, 249, 255, 0.94) !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

.install-import-actions [data-supported-clients]::before {
  content: "i";
  display: inline-grid;
  width: 26px;
  height: 26px;
  place-items: center;
  margin-right: 9px;
  border-radius: 999px;
  background: rgba(117, 242, 199, 0.13);
  color: #b8fff0;
  font-size: 13px;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
}

.install-panel-actions {
  display: none !important;
}

/* CDNRELAY_CLIENTS_ROW_20260605: Clients belongs to the client selector row, not to QR actions. */
.install-panel-premium .install-flow-steps,
.install-flow-steps {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 14px 0 12px !important;
}

.install-panel-premium .install-flow-steps span,
.install-flow-steps span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-height: 36px !important;
  padding: 7px 10px !important;
  border: 1px solid rgba(117, 242, 199, 0.20) !important;
  border-radius: 12px !important;
  background: rgba(8, 13, 28, 0.62) !important;
  color: rgba(245, 249, 255, 0.78) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

.install-panel-premium .install-flow-steps b,
.install-flow-steps b {
  display: inline-grid !important;
  place-items: center !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 999px !important;
  background: rgba(117, 242, 199, 0.16) !important;
  color: #75f2c7 !important;
  font-size: 11px !important;
  font-weight: 950 !important;
}

.install-panel-premium .install-app-pills,
.install-app-pills {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.install-panel-premium .install-pill-clients,
.install-pill-clients {
  border-color: rgba(155, 166, 196, 0.30) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.020)),
    rgba(12, 15, 31, 0.84) !important;
  color: rgba(245, 249, 255, 0.90) !important;
}

.install-panel-premium .install-pill-clients:hover,
.install-panel-premium .install-pill-clients:focus-visible,
.install-pill-clients:hover,
.install-pill-clients:focus-visible {
  border-color: rgba(117, 242, 199, 0.44) !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(117, 242, 199, 0.12), transparent 48%),
    rgba(15, 24, 44, 0.92) !important;
}

.install-client-info-icon {
  display: inline-grid !important;
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;
  place-items: center !important;
  border-radius: 12px !important;
  border: 1px solid rgba(117, 242, 199, 0.26) !important;
  background: rgba(117, 242, 199, 0.12) !important;
  color: #b8fff0 !important;
  font-size: 15px !important;
  font-style: normal !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

.install-import-actions [data-supported-clients] {
  display: none !important;
}

@media (max-width: 760px) {
  .install-panel-premium .install-flow-steps,
  .install-flow-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .install-panel-premium .install-app-pills,
  .install-app-pills {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* CDNRELAY_BUTTON_STEP_BADGES_20260605: show the setup step number directly on each action button. */
.install-os-current::before,
.install-panel-premium .install-pill-app::before,
.install-pill-app::before,
.install-download-actions [data-download-link]::before {
  display: inline-grid !important;
  width: 22px !important;
  height: 22px !important;
  flex: 0 0 22px !important;
  place-items: center !important;
  border: 1px solid rgba(117, 242, 199, 0.26) !important;
  border-radius: 999px !important;
  background: rgba(117, 242, 199, 0.18) !important;
  color: #b8fff0 !important;
  box-shadow:
    0 0 18px rgba(117, 242, 199, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

.install-os-current::before {
  content: "1" !important;
}

.install-panel-premium .install-pill-app::before,
.install-pill-app::before {
  content: "2" !important;
}

.install-download-actions [data-download-link]::before {
  content: "3" !important;
  margin-right: 10px !important;
}

.install-panel-premium .install-step .install-import-actions a[data-import-link]::before,
.install-import-actions a[data-import-link]::before {
  content: "4" !important;
  width: 31px !important;
  height: 31px !important;
  flex: 0 0 31px !important;
  color: #b8fff0 !important;
  background: rgba(117, 242, 199, 0.16) !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  transform: none !important;
  animation: none !important;
}

.install-download-actions [data-download-link],
.install-panel-premium .install-step .install-import-actions a[data-import-link],
.install-import-actions a[data-import-link] {
  align-items: center !important;
}

@media (max-width: 460px) {
  .install-os-current::before,
  .install-panel-premium .install-pill-app::before,
  .install-pill-app::before,
  .install-download-actions [data-download-link]::before {
    width: 20px !important;
    height: 20px !important;
    flex-basis: 20px !important;
    font-size: 11px !important;
  }
}

/* CDNRELAY_CLIENT_STEP_CARD_20260605: client selection is its own step card. */
.install-panel-premium .install-flow-steps,
.install-flow-steps {
  display: none !important;
}

.install-client-card {
  margin: 18px 0 16px !important;
  border: 1px solid rgba(117, 242, 199, 0.22) !important;
  border-radius: 20px !important;
  padding: 14px !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(117, 242, 199, 0.08), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
    rgba(8, 13, 28, 0.58) !important;
}

.install-client-head {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: center !important;
  margin-bottom: 12px !important;
}

.install-client-head b,
.install-client-head small {
  display: block !important;
  min-width: 0 !important;
}

.install-client-head b {
  color: #fff !important;
  font-size: 17px !important;
  font-weight: 950 !important;
  line-height: 1.1 !important;
}

.install-client-head small {
  margin-top: 4px !important;
  color: rgba(245, 249, 255, 0.62) !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  line-height: 1.35 !important;
}

.install-clients-help {
  display: inline-flex !important;
  min-width: 112px !important;
  min-height: 42px !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(155, 166, 196, 0.30) !important;
  border-radius: 14px !important;
  padding: 0 14px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.020)),
    rgba(12, 15, 31, 0.84) !important;
  color: rgba(245, 249, 255, 0.92) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.install-clients-help:hover,
.install-clients-help:focus-visible {
  border-color: rgba(117, 242, 199, 0.44) !important;
  outline: none !important;
}

.install-client-card .install-app-pills {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  margin: 0 !important;
}

.install-client-card .install-pill-app::before,
.install-panel-premium .install-client-card .install-pill-app::before {
  display: none !important;
  content: none !important;
}

.install-step-badge,
.install-os-current::before,
.install-download-actions [data-download-link]::before,
.install-panel-premium .install-step .install-import-actions a[data-import-link]::before,
.install-import-actions a[data-import-link]::before {
  display: inline-grid !important;
  width: 32px !important;
  height: 32px !important;
  flex: 0 0 32px !important;
  place-items: center !important;
  border: 1px solid rgba(117, 242, 199, 0.34) !important;
  border-radius: 999px !important;
  background: rgba(117, 242, 199, 0.14) !important;
  color: #b8fff0 !important;
  box-shadow:
    0 0 18px rgba(117, 242, 199, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
  font-size: 13px !important;
  font-style: normal !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

.install-os-current {
  position: relative !important;
  min-width: 260px !important;
  padding-left: 58px !important;
}

.install-os-current::before {
  position: absolute !important;
  top: 50% !important;
  left: 15px !important;
  content: "1" !important;
  transform: translateY(-50%) !important;
}

.install-download-actions [data-download-link]::before {
  content: "3" !important;
  margin-right: 10px !important;
}

.install-panel-premium .install-step .install-import-actions a[data-import-link]::before,
.install-import-actions a[data-import-link]::before {
  content: "4" !important;
  margin-right: 2px !important;
  transform: none !important;
  animation: none !important;
}

@media (max-width: 760px) {
  .install-client-head {
    grid-template-columns: auto minmax(0, 1fr) !important;
  }

  .install-clients-help {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  .install-client-card .install-app-pills {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .install-os-current {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* CDNRELAY_COMPACT_INSTALL_FLOW_20260605: compact, cleaner numbered setup flow. */
.install-panel-title-row {
  display: flex !important;
  min-width: 0 !important;
  align-items: center !important;
  gap: 12px !important;
}

.install-panel-title-row [data-install-title] {
  min-width: 0 !important;
}

.install-os-step-badge {
  margin: 0 !important;
}

.install-os-current {
  min-width: 210px !important;
  padding-left: 12px !important;
}

.install-os-current::before {
  display: none !important;
  content: none !important;
}

.install-client-card {
  margin: 12px 0 14px !important;
  padding: 12px !important;
  border-radius: 18px !important;
}

.install-client-head {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
}

.install-client-head b {
  font-size: 16px !important;
}

.install-client-head small {
  margin-top: 3px !important;
  font-size: 11.5px !important;
}

.install-clients-help {
  min-width: 0 !important;
  min-height: 40px !important;
  border-color: rgba(117, 242, 199, 0.28) !important;
  border-radius: 13px !important;
  padding: 0 13px !important;
  background:
    linear-gradient(180deg, rgba(117, 242, 199, 0.10), rgba(117, 242, 199, 0.03)),
    rgba(8, 13, 28, 0.78) !important;
  color: rgba(232, 255, 249, 0.92) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 10px 22px rgba(0, 0, 0, 0.18) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

.install-client-card .install-app-pills {
  gap: 9px !important;
}

.install-client-card .install-pill-app {
  min-height: 58px !important;
  padding: 8px 12px !important;
  border-radius: 15px !important;
}

.install-step-badge,
.install-download-actions [data-download-link]::before,
.install-panel-premium .install-step .install-import-actions a[data-import-link]::before,
.install-import-actions a[data-import-link]::before {
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;
  border-color: rgba(117, 242, 199, 0.38) !important;
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.14), transparent 34%),
    rgba(117, 242, 199, 0.15) !important;
  color: #c9fff5 !important;
  font-size: 14px !important;
  box-shadow:
    0 0 18px rgba(117, 242, 199, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

.install-download-actions [data-download-link] {
  min-height: 84px !important;
  height: 84px !important;
  justify-content: center !important;
  gap: 11px !important;
}

.install-download-actions [data-download-link]::before {
  content: "3" !important;
  margin-right: 0 !important;
}

.install-panel-premium .install-step .install-import-actions,
.install-import-actions {
  grid-template-columns: minmax(0, 1fr) !important;
}

.install-panel-premium .install-step .install-import-actions a[data-import-link],
.install-import-actions a[data-import-link] {
  min-height: 84px !important;
  height: 84px !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 0 18px !important;
}

.install-panel-premium .install-step .install-import-actions a[data-import-link]::before,
.install-import-actions a[data-import-link]::before {
  content: "4" !important;
  margin-right: 0 !important;
}

.install-secondary-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 104px !important;
  gap: 10px !important;
  margin-top: 12px !important;
}

.install-secondary-actions button {
  display: inline-flex !important;
  min-height: 48px !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(155, 166, 196, 0.24) !important;
  border-radius: 15px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.018)),
    rgba(12, 15, 31, 0.80) !important;
  color: rgba(245, 249, 255, 0.88) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

.install-secondary-actions button:hover,
.install-secondary-actions button:focus-visible {
  border-color: rgba(117, 242, 199, 0.38) !important;
  outline: none !important;
}

@media (max-width: 760px) {
  .install-panel-head {
    gap: 12px !important;
  }

  .install-os-current {
    width: 100% !important;
    min-width: 0 !important;
  }

  .install-client-head {
    grid-template-columns: auto minmax(0, 1fr) !important;
  }

  .install-clients-help {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  .install-secondary-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* CDNRELAY_CLEANER_INSTALL_FLOW_20260605: OS badge outside selector, support app as a normal pill, QR visible. */
.install-panel-head {
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 16px !important;
  align-items: center !important;
}

.install-panel-title-row {
  gap: 10px !important;
}

.install-os-picker-row {
  display: inline-grid !important;
  grid-template-columns: auto minmax(0, auto) !important;
  gap: 10px !important;
  align-items: center !important;
  justify-self: end !important;
  min-width: 0 !important;
}

.install-os-step-badge {
  position: static !important;
  margin: 0 !important;
}

.install-selected-device {
  min-width: 0 !important;
}

.install-os-current {
  width: 224px !important;
  min-width: 0 !important;
  padding: 9px 12px !important;
}

.install-os-current::before {
  display: none !important;
  content: none !important;
}

.install-client-head {
  grid-template-columns: auto minmax(0, 1fr) !important;
  margin-bottom: 10px !important;
}

.install-clients-help {
  display: none !important;
}

.install-client-card .install-app-pills {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 9px !important;
}

.install-client-card .install-pill-app,
.install-client-card .install-pill-support {
  min-height: 58px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  border-color: rgba(155, 166, 196, 0.24) !important;
  border-radius: 15px !important;
  padding: 8px 11px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.018)),
    rgba(12, 15, 31, 0.78) !important;
  color: rgba(245, 249, 255, 0.90) !important;
}

.install-client-card .install-pill-app.is-active {
  border-color: rgba(117, 242, 199, 0.48) !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(117, 242, 199, 0.13), transparent 46%),
    rgba(16, 39, 52, 0.78) !important;
}

.install-client-card .install-pill-support:hover,
.install-client-card .install-pill-support:focus-visible {
  border-color: rgba(117, 242, 199, 0.42) !important;
  outline: none !important;
}

.install-client-card .install-pill-support span:last-child {
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  font-size: 12px !important;
  line-height: 1.15 !important;
}

.install-support-icon {
  display: inline-grid !important;
  place-items: center !important;
  color: #b8fff0 !important;
  font-size: 15px !important;
  font-style: normal !important;
  font-weight: 950 !important;
}

.install-step-badge,
.install-download-actions [data-download-link]::before,
.install-panel-premium .install-step .install-import-actions a[data-import-link]::before,
.install-import-actions a[data-import-link]::before {
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;
}

.install-download-actions [data-download-link],
.install-panel-premium .install-step .install-import-actions a[data-import-link],
.install-import-actions a[data-import-link] {
  min-height: 84px !important;
  height: 84px !important;
}

.install-secondary-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 112px !important;
  gap: 10px !important;
  width: 100% !important;
  margin-top: 12px !important;
}

.install-secondary-actions button,
.install-secondary-actions [data-copy-sub],
.install-secondary-actions [data-raw-qr] {
  display: inline-flex !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 54px !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(155, 166, 196, 0.24) !important;
  border-radius: 15px !important;
  padding: 0 14px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.018)),
    rgba(12, 15, 31, 0.78) !important;
  color: rgba(245, 249, 255, 0.90) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 10px 24px rgba(0, 0, 0, 0.16) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.install-secondary-actions button:hover,
.install-secondary-actions button:focus-visible {
  border-color: rgba(117, 242, 199, 0.38) !important;
  outline: none !important;
}

.install-secondary-actions [data-raw-qr] {
  display: inline-flex !important;
}

@media (max-width: 920px) {
  .install-panel-head {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .install-os-picker-row {
    justify-self: stretch !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
  }

  .install-os-current {
    width: 100% !important;
  }
}

@media (max-width: 760px) {
  .install-client-card .install-app-pills {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .install-secondary-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* CDNRELAY_POLISHED_INSTALL_FLOW_20260605: final compact install UI polish. */
.install-panel-premium,
.install-panel-premium .install-panel-head,
.install-selected-device[data-install-os-select] {
  overflow: visible !important;
}

.install-panel-premium {
  position: relative !important;
}

.install-panel-premium::before,
.install-client-card::before,
.install-panel-premium .install-step::before,
.install-client-card .install-pill-app::before,
.install-os-current::after,
.install-secondary-actions button::before {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  background:
    radial-gradient(260px circle at var(--gx, 50%) var(--gy, 50%), rgba(117, 242, 199, 0.15), transparent 42%),
    radial-gradient(220px circle at var(--gx, 50%) var(--gy, 50%), rgba(116, 226, 255, 0.10), transparent 50%) !important;
  content: "" !important;
  opacity: 0 !important;
  transition: opacity 160ms ease !important;
}

.install-panel-premium:hover::before,
.install-client-card:hover::before,
.install-panel-premium .install-step:hover::before,
.install-client-card .install-pill-app:hover::before,
.install-os-current:hover::after,
.install-secondary-actions button:hover::before {
  opacity: 1 !important;
}

.install-panel-premium > * {
  position: relative !important;
  z-index: 1 !important;
}

.install-panel-premium .install-panel-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) max-content !important;
  gap: 18px !important;
  align-items: center !important;
  padding: 18px !important;
}

.install-panel-title {
  min-width: 0 !important;
}

.install-panel-title-row {
  align-items: center !important;
}

.install-os-picker-row {
  display: flex !important;
  width: max-content !important;
  max-width: 100% !important;
  align-items: center !important;
  gap: 10px !important;
  justify-self: end !important;
  overflow: visible !important;
}

.install-os-step-badge,
.install-step-badge {
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;
}

.install-selected-device[data-install-os-select] {
  position: relative !important;
  width: 222px !important;
  min-width: 222px !important;
  max-width: 222px !important;
  flex: 0 0 222px !important;
}

.install-os-current {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) 14px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 58px !important;
  align-items: center !important;
  gap: 10px !important;
  border-radius: 15px !important;
  padding: 8px 11px !important;
  overflow: hidden !important;
}

.install-os-current::before {
  display: none !important;
  content: none !important;
}

.install-os-current [data-install-device-icon] {
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;
}

.install-os-current > span:not([data-install-device-icon]) {
  min-width: 0 !important;
}

.install-os-current small,
.install-os-current b {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.install-os-menu {
  width: 100% !important;
  min-width: 222px !important;
  max-width: 222px !important;
}

.install-client-card {
  position: relative !important;
  padding: 12px !important;
  overflow: hidden !important;
  border-color: rgba(117, 242, 199, 0.30) !important;
}

.install-client-card > * {
  position: relative !important;
  z-index: 1 !important;
}

.install-client-card .install-app-pills {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.install-client-card .install-pill-app {
  position: relative !important;
  overflow: hidden !important;
}

.install-client-card .install-pill-support {
  border-color: rgba(117, 242, 199, 0.42) !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(117, 242, 199, 0.16), transparent 48%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.020)),
    rgba(12, 18, 34, 0.86) !important;
  box-shadow:
    0 0 0 1px rgba(117, 242, 199, 0.08),
    0 16px 34px rgba(0, 0, 0, 0.18) !important;
}

.install-client-card .install-pill-support .install-app-icon {
  box-shadow:
    0 0 0 1px rgba(117, 242, 199, 0.26),
    0 0 22px rgba(117, 242, 199, 0.16) !important;
}

.install-client-card .install-pill-support span:last-child {
  font-size: 12.5px !important;
  font-weight: 950 !important;
}

.install-panel-premium .install-steps {
  gap: 12px !important;
  margin-bottom: 0 !important;
}

.install-panel-premium .install-step:nth-child(1),
.install-panel-premium .install-step:nth-child(2) {
  position: relative !important;
  min-height: 208px !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  padding: 16px !important;
}

.install-download-actions,
.install-import-actions {
  margin-top: 16px !important;
}

.install-download-actions [data-download-link],
.install-panel-premium .install-step .install-import-actions a[data-import-link],
.install-import-actions a[data-import-link] {
  min-height: 82px !important;
  height: 82px !important;
  border-color: rgba(117, 242, 199, 0.36) !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(117, 242, 199, 0.12), transparent 42%),
    linear-gradient(180deg, rgba(31, 44, 62, 0.96), rgba(13, 19, 36, 0.98)) !important;
  color: #f4fbff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 14px 28px rgba(0, 0, 0, 0.22) !important;
}

.install-secondary-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 112px !important;
  gap: 10px !important;
  margin-top: 8px !important;
}

.install-secondary-actions button {
  position: relative !important;
  min-height: 52px !important;
  overflow: hidden !important;
  border-color: rgba(155, 166, 196, 0.28) !important;
  border-radius: 15px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.060), rgba(255, 255, 255, 0.018)),
    rgba(12, 15, 31, 0.84) !important;
  color: rgba(245, 249, 255, 0.92) !important;
}

.supported-clients-modal {
  width: min(700px, calc(100vw - 28px)) !important;
  max-height: min(82vh, 720px) !important;
  padding: 22px !important;
  overflow: auto !important;
  border-radius: 24px !important;
}

.supported-clients-modal h2 {
  margin: 0 46px 10px 0 !important;
  font-size: clamp(30px, 4.2vw, 44px) !important;
  line-height: 0.98 !important;
  letter-spacing: 0 !important;
}

.supported-clients-modal .modal-lead {
  max-width: 590px !important;
  margin-bottom: 14px !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

.supported-client-list {
  gap: 9px !important;
  margin-top: 12px !important;
}

.supported-client-card {
  grid-template-columns: 42px minmax(0, 1fr) !important;
  gap: 11px !important;
  padding: 10px !important;
  border-radius: 15px !important;
}

.supported-client-card .install-app-icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
}

.supported-client-head {
  gap: 6px !important;
}

.supported-client-head b {
  font-size: 15px !important;
}

.supported-client-head span {
  min-height: 20px !important;
  padding: 0 7px !important;
  font-size: 9.5px !important;
}

.supported-client-card p,
.supported-client-disclaimer {
  margin-top: 4px !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

.supported-client-disclaimer {
  margin-top: 10px !important;
  padding: 10px 12px !important;
  border-radius: 13px !important;
}

@media (max-width: 920px) {
  .install-panel-premium .install-panel-head {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .install-os-picker-row {
    width: 100% !important;
    justify-self: stretch !important;
  }

  .install-selected-device[data-install-os-select] {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex-basis: auto !important;
  }
}

@media (max-width: 760px) {
  .install-client-card .install-app-pills,
  .install-secondary-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .supported-clients-modal {
    padding: 18px !important;
  }
}

/* CDNRELAY_INSTALL_UI_HARD_FIX_20260605: final override after legacy install CSS. */
.install-panel-premium {
  position: relative !important;
  display: grid !important;
  gap: 12px !important;
  max-width: 100% !important;
  padding: 20px !important;
  overflow: visible !important;
  isolation: isolate !important;
}

.install-panel-premium::before,
.install-client-card::before,
.install-panel-premium .install-step::before,
.install-panel-premium .install-pill-app::after,
.install-os-current::after,
.install-secondary-actions button::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  opacity: 0 !important;
  background:
    radial-gradient(240px circle at var(--gx, 50%) var(--gy, 50%), rgba(117, 242, 199, 0.16), transparent 44%),
    radial-gradient(190px circle at var(--gx, 50%) var(--gy, 50%), rgba(156, 98, 255, 0.14), transparent 52%) !important;
  transition: opacity 160ms ease !important;
  z-index: 0 !important;
}

.install-panel-premium:hover::before,
.install-client-card:hover::before,
.install-panel-premium .install-step:hover::before,
.install-panel-premium .install-pill-app:hover::after,
.install-os-current:hover::after,
.install-secondary-actions button:hover::before {
  opacity: 1 !important;
}

.install-panel-premium > *,
.install-panel-premium .install-panel-head > *,
.install-client-card > *,
.install-panel-premium .install-step > *,
.install-panel-premium .install-pill-app > *,
.install-os-current > *,
.install-secondary-actions button > * {
  position: relative !important;
  z-index: 1 !important;
}

.install-panel-premium .install-panel-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 260px) !important;
  gap: 16px !important;
  align-items: center !important;
  min-width: 0 !important;
  padding: 16px 18px !important;
  overflow: visible !important;
}

.install-panel-title {
  min-width: 0 !important;
}

.install-panel-title-row {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
}

.install-panel-title-row [data-install-title] {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

.install-panel-title > small {
  max-width: 520px !important;
  margin-top: 10px !important;
  line-height: 1.45 !important;
}

.install-os-picker-row {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 206px) !important;
  gap: 10px !important;
  align-items: center !important;
  justify-content: end !important;
  justify-self: end !important;
  width: min(100%, 250px) !important;
  max-width: 100% !important;
  overflow: visible !important;
}

.install-os-step-badge,
.install-step-badge {
  display: inline-grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(117, 242, 199, 0.55) !important;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.22), transparent 42%),
    rgba(36, 104, 93, 0.78) !important;
  box-shadow:
    0 0 0 1px rgba(117, 242, 199, 0.08),
    0 0 24px rgba(117, 242, 199, 0.18) !important;
  color: #dffdf3 !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

.install-selected-device[data-install-os-select] {
  position: relative !important;
  width: 206px !important;
  min-width: 0 !important;
  max-width: 206px !important;
  overflow: visible !important;
}

.install-os-current {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 32px minmax(0, 1fr) 12px !important;
  gap: 9px !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 56px !important;
  padding: 8px 10px !important;
  overflow: hidden !important;
}

.install-os-current::before {
  display: none !important;
  content: none !important;
}

.install-os-current [data-install-device-icon] {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
}

.install-os-current small {
  font-size: 8px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

.install-os-current b {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 12px !important;
  line-height: 1.15 !important;
}

.install-os-current i {
  width: 9px !important;
  height: 9px !important;
  border-width: 0 2px 2px 0 !important;
}

.install-os-menu {
  top: calc(100% + 8px) !important;
  right: 0 !important;
  left: auto !important;
  width: 206px !important;
  min-width: 206px !important;
  max-width: 206px !important;
  z-index: 80 !important;
}

.install-client-card {
  position: relative !important;
  display: grid !important;
  gap: 12px !important;
  padding: 14px !important;
  overflow: hidden !important;
  border-color: rgba(117, 242, 199, 0.34) !important;
}

.install-client-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.install-client-head > div {
  min-width: 0 !important;
}

.install-panel-premium .install-app-pills {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.install-panel-premium .install-pill-app,
.install-client-card .install-pill-support {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  min-height: 60px !important;
  padding: 9px 12px !important;
  align-items: center !important;
  overflow: hidden !important;
  text-align: left !important;
}

.install-client-card .install-pill-support {
  border-color: rgba(178, 122, 255, 0.58) !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(117, 242, 199, 0.18), transparent 44%),
    radial-gradient(circle at 100% 20%, rgba(178, 122, 255, 0.22), transparent 50%),
    linear-gradient(180deg, rgba(38, 44, 70, 0.92), rgba(13, 17, 32, 0.94)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    0 0 0 1px rgba(117, 242, 199, 0.08),
    0 18px 34px rgba(0, 0, 0, 0.22) !important;
}

.install-panel-premium .install-pill-app .install-app-icon {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 11px !important;
}

.install-panel-premium .install-pill-app span:last-child {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  font-size: 13px !important;
  line-height: 1.15 !important;
}

.install-client-card .install-pill-support span:last-child {
  color: #f2fbff !important;
  font-size: 12px !important;
}

.install-panel-premium .install-steps {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 0 !important;
}

.install-panel-premium .install-step {
  position: relative !important;
  display: grid !important;
  grid-template-rows: auto 1fr !important;
  min-height: 178px !important;
  padding: 16px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}

.install-panel-premium .install-step > span {
  display: none !important;
}

.install-panel-premium .install-step > div:first-of-type {
  min-width: 0 !important;
}

.install-download-actions,
.install-import-actions {
  display: grid !important;
  align-items: stretch !important;
  width: 100% !important;
  margin: 14px 0 0 !important;
}

.install-download-actions [data-download-link],
.install-panel-premium .install-step .install-import-actions a[data-import-link],
.install-import-actions a[data-import-link] {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  width: 100% !important;
  min-height: 82px !important;
  height: 82px !important;
  padding: 0 18px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(117, 242, 199, 0.38) !important;
  background:
    radial-gradient(circle at 10% 10%, rgba(117, 242, 199, 0.14), transparent 44%),
    linear-gradient(135deg, rgba(26, 50, 69, 0.96), rgba(20, 22, 48, 0.98)) !important;
  color: #f7fbff !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  text-align: center !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    0 14px 30px rgba(0, 0, 0, 0.22) !important;
}

.install-download-actions [data-download-link]::before,
.install-panel-premium .install-step .install-import-actions a[data-import-link]::before,
.install-import-actions a[data-import-link]::before {
  position: static !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(117, 242, 199, 0.62) !important;
  background: rgba(39, 105, 94, 0.82) !important;
  color: #e7fff8 !important;
  box-shadow: 0 0 22px rgba(117, 242, 199, 0.18) !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  opacity: 1 !important;
  transform: none !important;
}

.install-download-actions [data-download-link]::before {
  content: "3" !important;
}

.install-panel-premium .install-step .install-import-actions a[data-import-link]::before,
.install-import-actions a[data-import-link]::before {
  content: "4" !important;
}

.install-secondary-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 112px !important;
  gap: 10px !important;
  margin: 0 !important;
}

.install-secondary-actions button {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 52px !important;
  height: 52px !important;
  padding: 0 18px !important;
  overflow: hidden !important;
  border-radius: 15px !important;
  border: 1px solid rgba(155, 166, 196, 0.30) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.070), rgba(255, 255, 255, 0.020)),
    rgba(13, 16, 32, 0.90) !important;
  color: rgba(245, 249, 255, 0.94) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

.install-secondary-actions [data-raw-qr] {
  min-width: 112px !important;
}

.supported-clients-modal {
  width: min(660px, calc(100vw - 28px)) !important;
  max-height: min(78vh, 660px) !important;
  padding: 20px !important;
  overflow: auto !important;
  border-radius: 22px !important;
}

.supported-clients-modal h2 {
  margin: 0 44px 8px 0 !important;
  font-size: clamp(28px, 4vw, 36px) !important;
  line-height: 1.02 !important;
  letter-spacing: 0 !important;
}

.supported-clients-modal .modal-lead {
  max-width: 560px !important;
  margin-bottom: 12px !important;
  font-size: 13px !important;
  line-height: 1.42 !important;
}

.supported-client-list {
  display: grid !important;
  gap: 8px !important;
  margin-top: 10px !important;
}

.supported-client-card {
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 9px 10px !important;
  border-radius: 14px !important;
}

.supported-client-card .install-app-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
}

.supported-client-head {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  align-items: center !important;
}

.supported-client-head b {
  font-size: 15px !important;
}

.supported-client-head span {
  min-height: 19px !important;
  padding: 0 7px !important;
  font-size: 9px !important;
}

.supported-client-card p,
.supported-client-disclaimer {
  margin-top: 3px !important;
  font-size: 12px !important;
  line-height: 1.32 !important;
}

.supported-client-disclaimer {
  margin-top: 10px !important;
  padding: 9px 11px !important;
  border-radius: 13px !important;
}

@media (max-width: 900px) {
  .install-panel-premium .install-panel-head {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .install-os-picker-row {
    justify-self: start !important;
    width: min(100%, 250px) !important;
  }
}

@media (max-width: 760px) {
  .install-panel-premium {
    padding: 14px !important;
  }

  .install-panel-premium .install-panel-head {
    padding: 14px !important;
  }

  .install-os-picker-row {
    grid-template-columns: 34px minmax(0, 1fr) !important;
    width: 100% !important;
  }

  .install-selected-device[data-install-os-select],
  .install-os-menu {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .install-panel-premium .install-app-pills,
  .install-panel-premium .install-steps,
  .install-secondary-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .install-panel-premium .install-pill-app {
    min-height: 58px !important;
  }
}

/* CDNRELAY_INSTALL_UI_COMPACT_FIX_20260605: tighten spacing and align CTAs. */
.install-panel-premium {
  gap: 10px !important;
  padding: 14px !important;
  border-radius: 18px !important;
}

.install-panel-premium .install-panel-head {
  grid-template-columns: minmax(0, 1fr) minmax(0, 246px) !important;
  gap: 12px !important;
  min-height: 0 !important;
  padding: 14px 16px !important;
  border-radius: 16px !important;
}

.install-panel-title-row [data-install-title] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  max-width: 100% !important;
}

.install-title-os-icon {
  display: inline-grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 10px !important;
}

.install-title-os-icon svg {
  width: 18px !important;
  height: 18px !important;
}

.install-panel-title > small {
  max-width: 520px !important;
  margin-top: 8px !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

.install-os-picker-row {
  grid-template-columns: 32px minmax(0, 198px) !important;
  gap: 8px !important;
  width: min(100%, 238px) !important;
  align-self: center !important;
}

.install-os-step-badge,
.install-step-badge {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  font-size: 13px !important;
}

.install-selected-device[data-install-os-select] {
  width: 198px !important;
  max-width: 198px !important;
}

.install-os-current {
  grid-template-columns: 30px minmax(0, 1fr) 11px !important;
  min-height: 52px !important;
  padding: 7px 9px !important;
  border-radius: 14px !important;
}

.install-os-current [data-install-device-icon] {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
}

.install-os-current small {
  font-size: 7.5px !important;
}

.install-os-current b {
  font-size: 11.5px !important;
}

.install-os-menu {
  width: 198px !important;
  min-width: 198px !important;
  max-width: 198px !important;
}

.install-client-card {
  gap: 10px !important;
  padding: 12px !important;
  border-radius: 16px !important;
}

.install-client-head {
  display: grid !important;
  grid-template-columns: 32px minmax(0, 1fr) !important;
  justify-content: start !important;
  justify-items: start !important;
  align-items: center !important;
  gap: 10px !important;
}

.install-client-head b {
  font-size: 15px !important;
  line-height: 1.1 !important;
}

.install-client-head small {
  margin-top: 4px !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
}

.install-panel-premium .install-app-pills {
  gap: 8px !important;
}

.install-panel-premium .install-pill-app,
.install-client-card .install-pill-support {
  grid-template-columns: 36px minmax(0, 1fr) !important;
  min-height: 54px !important;
  padding: 8px 10px !important;
  border-radius: 14px !important;
}

.install-panel-premium .install-pill-app .install-app-icon {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 10px !important;
}

.install-panel-premium .install-pill-app span:last-child,
.install-client-card .install-pill-support span:last-child {
  font-size: 12px !important;
  line-height: 1.1 !important;
}

.install-panel-premium .install-steps {
  gap: 10px !important;
}

.install-panel-premium .install-step {
  display: grid !important;
  grid-template-rows: auto 76px !important;
  gap: 12px !important;
  min-height: 156px !important;
  height: 156px !important;
  padding: 14px !important;
  border-radius: 16px !important;
}

.install-panel-premium .install-step > div:first-of-type {
  min-height: 50px !important;
}

.install-panel-premium .install-step b {
  font-size: 15px !important;
  line-height: 1.12 !important;
}

.install-panel-premium .install-step small {
  margin-top: 5px !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
}

.install-download-actions,
.install-import-actions {
  align-self: end !important;
  margin: 0 !important;
  height: 76px !important;
}

.install-download-actions [data-download-link],
.install-panel-premium .install-step .install-import-actions a[data-import-link],
.install-import-actions a[data-import-link] {
  min-height: 74px !important;
  height: 74px !important;
  padding: 0 16px !important;
  border-radius: 15px !important;
  font-size: 14px !important;
}

.install-download-actions [data-download-link]::before,
.install-panel-premium .install-step .install-import-actions a[data-import-link]::before,
.install-import-actions a[data-import-link]::before {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  font-size: 13px !important;
}

.install-secondary-actions {
  grid-template-columns: minmax(0, 1fr) 100px !important;
  gap: 8px !important;
  margin-top: 0 !important;
}

.install-secondary-actions button {
  height: 48px !important;
  min-height: 48px !important;
  border-radius: 14px !important;
  font-size: 12.5px !important;
}

.install-secondary-actions [data-raw-qr] {
  min-width: 100px !important;
}

@media (max-width: 900px) {
  .install-panel-premium .install-panel-head {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .install-os-picker-row {
    width: min(100%, 238px) !important;
    justify-self: start !important;
  }
}

@media (max-width: 760px) {
  .install-panel-premium {
    padding: 12px !important;
  }

  .install-panel-premium .install-panel-head,
  .install-client-card,
  .install-panel-premium .install-step {
    padding: 12px !important;
  }

  .install-os-picker-row {
    grid-template-columns: 32px minmax(0, 1fr) !important;
    width: 100% !important;
  }

  .install-selected-device[data-install-os-select],
  .install-os-menu {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .install-panel-premium .install-app-pills,
  .install-panel-premium .install-steps,
  .install-secondary-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .install-panel-premium .install-step {
    height: auto !important;
    min-height: 150px !important;
  }
}

/* CDNRELAY_INSTALL_UI_ALIGNMENT_FIX_20260605: no overlaps, equal buttons, clean client modal. */
.install-panel-premium {
  gap: 10px !important;
  padding: 14px !important;
}

.install-panel-premium .install-panel-head {
  align-items: start !important;
  overflow: visible !important;
}

.install-os-picker-row {
  align-items: start !important;
  overflow: visible !important;
  z-index: 20 !important;
}

.install-selected-device[data-install-os-select],
.install-selected-device[data-install-os-select].is-open {
  display: grid !important;
  gap: 8px !important;
  overflow: visible !important;
  z-index: 25 !important;
}

.install-os-menu[hidden] {
  display: none !important;
}

.install-selected-device.is-open .install-os-menu,
.install-selected-device[data-install-os-select].is-open .install-os-menu {
  position: static !important;
  inset: auto !important;
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 7px !important;
  transform: none !important;
  border-radius: 14px !important;
  background:
    linear-gradient(180deg, rgba(18, 25, 42, 0.98), rgba(9, 13, 26, 0.98)) !important;
  border: 1px solid rgba(117, 242, 199, 0.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 36px rgba(0, 0, 0, 0.30) !important;
}

.install-os-option {
  min-height: 38px !important;
  padding: 7px 9px !important;
  border-radius: 10px !important;
}

.install-os-option .install-pill-icon {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
}

.install-os-option span:last-child {
  font-size: 11.5px !important;
}

.install-app-icon,
.install-pill-icon,
.install-title-os-icon,
.install-os-current [data-install-device-icon],
.supported-client-card .install-app-icon {
  display: inline-grid !important;
  place-items: center !important;
  overflow: hidden !important;
  line-height: 1 !important;
}

.install-app-icon img,
.supported-client-card .install-app-icon img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.install-panel-premium .install-app-pills {
  align-items: stretch !important;
}

.install-panel-premium .install-pill-app,
.install-client-card .install-pill-support {
  align-items: center !important;
  gap: 10px !important;
}

.install-client-card .install-pill-support {
  border-color: rgba(117, 242, 199, 0.40) !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(117, 242, 199, 0.16), transparent 44%),
    linear-gradient(180deg, rgba(24, 37, 55, 0.94), rgba(12, 17, 31, 0.96)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 12px 28px rgba(0, 0, 0, 0.20) !important;
}

.install-panel-premium .install-steps {
  align-items: stretch !important;
}

.install-panel-premium .install-step {
  grid-template-rows: minmax(44px, auto) 72px !important;
  height: 148px !important;
  min-height: 148px !important;
  gap: 10px !important;
}

.install-download-actions,
.install-import-actions {
  display: grid !important;
  height: 72px !important;
  min-height: 72px !important;
  align-self: end !important;
  align-items: stretch !important;
}

.install-download-actions [data-download-link],
.install-panel-premium .install-step .install-import-actions a[data-import-link],
.install-import-actions a[data-import-link] {
  width: 100% !important;
  height: 72px !important;
  min-height: 72px !important;
  max-height: 72px !important;
  margin: 0 !important;
}

.install-secondary-actions {
  grid-template-columns: minmax(0, 1fr) 110px !important;
  align-items: stretch !important;
}

.install-secondary-actions button,
.install-secondary-actions [data-copy-sub],
.install-secondary-actions [data-raw-qr] {
  height: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;
  border-radius: 15px !important;
  border: 1px solid rgba(117, 242, 199, 0.34) !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(117, 242, 199, 0.12), transparent 44%),
    linear-gradient(135deg, rgba(24, 38, 56, 0.95), rgba(14, 18, 34, 0.98)) !important;
  color: #f4fbff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 12px 24px rgba(0, 0, 0, 0.18) !important;
}

.supported-clients-modal {
  width: min(680px, calc(100vw - 28px)) !important;
  max-height: min(76vh, 640px) !important;
  padding: 18px !important;
}

.supported-clients-modal h2 {
  font-size: clamp(26px, 3.6vw, 34px) !important;
  margin-bottom: 8px !important;
}

.supported-clients-modal .modal-lead {
  max-width: 560px !important;
  margin-bottom: 12px !important;
  color: rgba(235, 241, 255, 0.78) !important;
}

.supported-client-card {
  grid-template-columns: 44px minmax(0, 1fr) 104px !important;
  min-height: 62px !important;
  padding: 9px !important;
  align-items: center !important;
}

.supported-client-card .install-app-icon {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
}

.supported-client-head b {
  font-size: 15px !important;
  line-height: 1.1 !important;
}

.supported-client-head span {
  border-color: rgba(117, 242, 199, 0.36) !important;
  background: rgba(30, 95, 88, 0.36) !important;
  color: rgba(225, 255, 248, 0.95) !important;
}

.supported-client-card p {
  max-width: 100% !important;
  margin-top: 4px !important;
  color: rgba(235, 241, 255, 0.70) !important;
}

.supported-client-add {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 38px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(117, 242, 199, 0.38) !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(117, 242, 199, 0.14), transparent 44%),
    linear-gradient(135deg, rgba(24, 38, 56, 0.95), rgba(14, 18, 34, 0.98)) !important;
  color: #f4fbff !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09) !important;
}

.supported-client-disclaimer {
  color: rgba(235, 241, 255, 0.72) !important;
}

@media (max-width: 760px) {
  .supported-client-card {
    grid-template-columns: 42px minmax(0, 1fr) !important;
  }

  .supported-client-add {
    grid-column: 1 / -1 !important;
  }

  .install-panel-premium .install-step {
    height: auto !important;
    min-height: 146px !important;
  }
}

/* CDNRELAY_INSTALL_UI_FIX25: JSON imports, clean glow, absolute OS dropdown, aligned app icons. */
body::after,
.cursor-aurora {
  display: none !important;
  opacity: 0 !important;
  content: none !important;
}

.install-panel-premium::before,
.install-client-card::before,
.install-panel-premium .install-step::before,
.install-client-card .install-pill-app::before,
.install-panel-premium .install-pill-app::after,
.install-os-current::after,
.install-secondary-actions button::before {
  display: none !important;
  opacity: 0 !important;
  content: none !important;
  background: none !important;
}

.install-panel-premium,
.install-panel-premium .install-panel-head {
  overflow: visible !important;
}

.install-panel-title-row [data-install-title] {
  display: inline-grid !important;
  grid-template-columns: auto auto minmax(0, auto) !important;
  align-items: center !important;
  gap: 10px !important;
}

.install-title-step-badge {
  display: inline-grid !important;
  place-items: center !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(117, 242, 199, 0.56) !important;
  background: rgba(31, 105, 92, 0.82) !important;
  color: #eafff8 !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 10px 26px rgba(0, 0, 0, 0.22) !important;
}

.install-os-step-badge {
  display: none !important;
}

.install-os-picker-row {
  grid-template-columns: minmax(0, 224px) !important;
  width: min(100%, 224px) !important;
  overflow: visible !important;
  z-index: 80 !important;
}

.install-selected-device[data-install-os-select],
.install-selected-device[data-install-os-select].is-open {
  position: relative !important;
  display: block !important;
  width: 224px !important;
  max-width: 224px !important;
  overflow: visible !important;
  z-index: 90 !important;
}

.install-selected-device.is-open .install-os-menu,
.install-selected-device[data-install-os-select].is-open .install-os-menu {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  left: auto !important;
  display: grid !important;
  width: 224px !important;
  min-width: 224px !important;
  max-width: 224px !important;
  margin: 0 !important;
  padding: 8px !important;
  transform: none !important;
  z-index: 120 !important;
  border-radius: 16px !important;
  border: 1px solid rgba(117, 242, 199, 0.36) !important;
  background: linear-gradient(180deg, rgba(17, 25, 42, 0.99), rgba(8, 12, 24, 0.99)) !important;
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.install-os-option {
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: center !important;
  min-height: 38px !important;
  width: 100% !important;
  text-align: left !important;
}

.install-title-os-icon,
.install-os-current [data-install-device-icon],
.install-os-option .install-pill-icon,
.install-app-icon,
.supported-client-card .install-app-icon {
  display: inline-grid !important;
  place-items: center !important;
  overflow: hidden !important;
  flex: 0 0 auto !important;
  line-height: 0 !important;
}

.install-title-os-icon svg,
.install-os-current [data-install-device-icon] svg,
.install-os-option .install-pill-icon svg {
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
}

.install-app-icon img,
.supported-client-card .install-app-icon img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
}

.install-panel-premium .install-steps {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch !important;
}

.install-panel-premium .install-step {
  grid-template-rows: minmax(64px, auto) 72px !important;
  min-height: 152px !important;
  height: 152px !important;
}

.install-download-actions,
.install-import-actions {
  display: grid !important;
  height: 72px !important;
  min-height: 72px !important;
  align-self: end !important;
}

.install-download-actions [data-download-link],
.install-panel-premium .install-step .install-import-actions a[data-import-link],
.install-import-actions a[data-import-link] {
  display: inline-grid !important;
  grid-template-columns: auto auto !important;
  place-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  height: 72px !important;
  min-height: 72px !important;
  max-height: 72px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(117, 242, 199, 0.42) !important;
  background: linear-gradient(135deg, rgba(35, 77, 78, 0.92), rgba(17, 22, 43, 0.98)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 14px 28px rgba(0, 0, 0, 0.20) !important;
  color: #f6fffb !important;
  transform: translateY(0) !important;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease !important;
}

.install-download-actions [data-download-link]:hover,
.install-download-actions [data-download-link]:focus-visible,
.install-panel-premium .install-step .install-import-actions a[data-import-link]:hover,
.install-panel-premium .install-step .install-import-actions a[data-import-link]:focus-visible {
  border-color: rgba(117, 242, 199, 0.70) !important;
  background: linear-gradient(135deg, rgba(43, 99, 90, 0.98), rgba(22, 28, 55, 0.98)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 18px 34px rgba(0, 0, 0, 0.26) !important;
  outline: none !important;
  transform: translateY(-1px) !important;
}

.install-secondary-actions {
  grid-template-columns: minmax(0, 1fr) minmax(148px, 188px) !important;
  gap: 10px !important;
}

.install-secondary-actions button,
.install-secondary-actions [data-copy-sub],
.install-secondary-actions [data-raw-qr],
.supported-raw-actions button {
  display: inline-flex !important;
  min-height: 52px !important;
  height: 52px !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 14px !important;
  border: 1px solid rgba(117, 242, 199, 0.34) !important;
  background: linear-gradient(135deg, rgba(22, 43, 55, 0.94), rgba(12, 16, 31, 0.98)) !important;
  color: #f5fbff !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 24px rgba(0, 0, 0, 0.18) !important;
  transform: translateY(0) !important;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease !important;
}

.install-secondary-actions button:hover,
.install-secondary-actions button:focus-visible,
.supported-raw-actions button:hover,
.supported-raw-actions button:focus-visible {
  border-color: rgba(117, 242, 199, 0.62) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 16px 30px rgba(0, 0, 0, 0.24) !important;
  outline: none !important;
  transform: translateY(-1px) !important;
}

.supported-clients-modal {
  width: min(720px, calc(100vw - 28px)) !important;
  max-height: min(82vh, 720px) !important;
  padding: 22px !important;
}

.supported-client-list {
  gap: 10px !important;
}

.supported-client-card {
  position: relative !important;
  grid-template-columns: 46px minmax(0, 1fr) 112px !important;
  gap: 12px !important;
  min-height: 70px !important;
  padding: 11px !important;
  border-radius: 15px !important;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease !important;
}

.supported-client-card:hover {
  border-color: rgba(117, 242, 199, 0.46) !important;
  transform: translateY(-1px) !important;
}

.supported-client-add {
  height: 42px !important;
  min-height: 42px !important;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease !important;
}

.supported-client-add:hover,
.supported-client-add:focus-visible {
  border-color: rgba(117, 242, 199, 0.62) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 16px 28px rgba(0, 0, 0, 0.22) !important;
  outline: none !important;
  transform: translateY(-1px) !important;
}

.supported-raw-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(132px, 170px) !important;
  gap: 10px !important;
  margin-top: 14px !important;
}

.supported-client-disclaimer {
  margin-top: 10px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(155, 166, 196, 0.18) !important;
  border-radius: 12px !important;
  background: rgba(8, 12, 24, 0.56) !important;
}

@media (max-width: 760px) {
  .install-panel-premium .install-panel-head {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .install-os-picker-row,
  .install-selected-device[data-install-os-select],
  .install-selected-device[data-install-os-select].is-open,
  .install-selected-device.is-open .install-os-menu,
  .install-selected-device[data-install-os-select].is-open .install-os-menu {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .install-panel-premium .install-steps,
  .install-secondary-actions,
  .supported-raw-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .install-panel-premium .install-step {
    height: auto !important;
    min-height: 150px !important;
  }

  .supported-client-card {
    grid-template-columns: 44px minmax(0, 1fr) !important;
  }

  .supported-client-add {
    grid-column: 1 / -1 !important;
  }
}

/* CDNRELAY_INSTALL_UI_FIX26: tighter selector, even CTAs, neutral RAW labels. */
.install-panel-premium .install-panel-head {
  grid-template-columns: minmax(0, 1fr) minmax(0, 196px) !important;
  gap: 12px !important;
  align-items: center !important;
  min-height: 0 !important;
  padding: 12px 14px !important;
  border-radius: 15px !important;
}

.install-panel-title {
  display: grid !important;
  gap: 5px !important;
  min-width: 0 !important;
}

.install-panel-title-row {
  margin: 0 !important;
}

.install-panel-title-row [data-install-title] {
  display: inline-grid !important;
  grid-template-columns: 30px 28px minmax(0, auto) !important;
  gap: 8px !important;
  align-items: center !important;
}

.install-panel-title > small {
  margin: 0 !important;
  max-width: 540px !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
}

.install-title-step-badge {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
}

.install-title-os-icon {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border-radius: 9px !important;
}

.install-title-os-icon svg {
  width: 17px !important;
  height: 17px !important;
}

.install-os-picker-row {
  grid-template-columns: minmax(0, 196px) !important;
  width: 196px !important;
  justify-self: end !important;
}

.install-selected-device[data-install-os-select],
.install-selected-device[data-install-os-select].is-open {
  width: 196px !important;
  max-width: 196px !important;
}

.install-os-current {
  grid-template-columns: 28px minmax(0, 1fr) 10px !important;
  gap: 8px !important;
  min-height: 46px !important;
  padding: 7px 9px !important;
  border-radius: 13px !important;
}

.install-os-current [data-install-device-icon] {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border-radius: 9px !important;
}

.install-os-current [data-install-device-icon] svg {
  width: 17px !important;
  height: 17px !important;
}

.install-os-current small {
  font-size: 7px !important;
  line-height: 1 !important;
}

.install-os-current b {
  font-size: 11px !important;
  line-height: 1.1 !important;
}

.install-selected-device.is-open .install-os-menu,
.install-selected-device[data-install-os-select].is-open .install-os-menu {
  top: calc(100% + 5px) !important;
  width: 196px !important;
  min-width: 196px !important;
  max-width: 196px !important;
  max-height: 188px !important;
  overflow-y: auto !important;
  padding: 6px !important;
  border-radius: 14px !important;
  z-index: 180 !important;
}

.install-os-option {
  grid-template-columns: 26px minmax(0, 1fr) !important;
  gap: 8px !important;
  min-height: 30px !important;
  padding: 5px 7px !important;
  border-radius: 9px !important;
}

.install-os-option .install-pill-icon {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  border-radius: 8px !important;
}

.install-os-option .install-pill-icon svg {
  width: 15px !important;
  height: 15px !important;
}

.install-os-option span:last-child {
  font-size: 11px !important;
  line-height: 1.1 !important;
}

.install-client-card .install-app-pills {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.install-client-card .install-pill-app,
.install-client-card .install-pill-support {
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: center !important;
  min-height: 58px !important;
  padding: 9px 12px !important;
}

.install-client-card .install-pill-app .install-app-icon,
.install-client-card .install-pill-support .install-app-icon,
.supported-client-card .install-app-icon {
  align-self: center !important;
  justify-self: center !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  line-height: 0 !important;
}

.install-client-card .install-pill-app .install-app-icon img,
.install-client-card .install-pill-support .install-app-icon img,
.supported-client-card .install-app-icon img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
  transform: translate3d(0, 0, 0) !important;
}

.install-client-card .install-pill-app span:last-child,
.install-client-card .install-pill-support span:last-child {
  align-self: center !important;
  line-height: 1.1 !important;
}

.install-panel-premium .install-steps {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 12px !important;
}

.install-panel-premium .install-step {
  display: grid !important;
  grid-template-rows: minmax(64px, 1fr) 72px !important;
  min-height: 154px !important;
  height: 154px !important;
  padding: 14px !important;
  align-items: stretch !important;
}

.install-download-actions,
.install-import-actions {
  display: grid !important;
  height: 72px !important;
  min-height: 72px !important;
  max-height: 72px !important;
  align-self: end !important;
  align-items: stretch !important;
}

.install-download-actions [data-download-link],
.install-panel-premium .install-step .install-import-actions a[data-import-link],
.install-import-actions a[data-import-link] {
  width: 100% !important;
  height: 72px !important;
  min-height: 72px !important;
  max-height: 72px !important;
  padding: 0 18px !important;
  align-self: stretch !important;
}

.install-secondary-actions button,
.install-secondary-actions [data-copy-sub],
.install-secondary-actions [data-raw-qr],
.supported-raw-actions button {
  background: linear-gradient(135deg, rgba(35, 77, 78, 0.92), rgba(17, 22, 43, 0.98)) !important;
  border-color: rgba(117, 242, 199, 0.42) !important;
  color: #f6fffb !important;
}

.install-secondary-actions button:hover,
.install-secondary-actions button:focus-visible,
.supported-raw-actions button:hover,
.supported-raw-actions button:focus-visible {
  background: linear-gradient(135deg, rgba(43, 99, 90, 0.98), rgba(22, 28, 55, 0.98)) !important;
  border-color: rgba(117, 242, 199, 0.70) !important;
}

.supported-clients-modal {
  width: min(690px, calc(100vw - 28px)) !important;
  padding: 20px !important;
}

.supported-client-card {
  grid-template-columns: 42px minmax(0, 1fr) 112px !important;
  min-height: 66px !important;
  padding: 10px !important;
}

.supported-client-disclaimer {
  color: rgba(235, 241, 255, 0.80) !important;
  line-height: 1.35 !important;
}

@media (max-width: 760px) {
  .install-panel-premium .install-panel-head,
  .install-panel-premium .install-steps,
  .install-client-card .install-app-pills {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .install-os-picker-row,
  .install-selected-device[data-install-os-select],
  .install-selected-device[data-install-os-select].is-open,
  .install-selected-device.is-open .install-os-menu,
  .install-selected-device[data-install-os-select].is-open .install-os-menu {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }
}

/* CDNRELAY_INSTALL_UI_FIX27_FINAL: must stay last in file. */
.cabinet-layout,
.dashboard-grid,
.connect-card-premium,
.install-panel-premium {
  overflow: visible !important;
}

.connect-card-premium {
  isolation: isolate !important;
}

.install-panel-premium .install-panel-head {
  position: relative !important;
  z-index: 80 !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 202px) !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.install-panel-title {
  gap: 3px !important;
}

.install-panel-title-row [data-install-title] {
  grid-template-columns: 30px 28px minmax(0, auto) !important;
  gap: 8px !important;
}

.install-panel-title > small {
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}

.install-title-step-badge {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
}

.install-title-os-icon,
.install-os-current [data-install-device-icon] {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border-radius: 9px !important;
}

.install-title-os-icon svg,
.install-os-current [data-install-device-icon] svg {
  width: 17px !important;
  height: 17px !important;
}

.install-os-picker-row {
  width: 202px !important;
  max-width: 202px !important;
  grid-template-columns: minmax(0, 202px) !important;
  z-index: 220 !important;
}

.install-selected-device[data-install-os-select],
.install-selected-device[data-install-os-select].is-open {
  width: 202px !important;
  max-width: 202px !important;
  z-index: 240 !important;
}

.install-os-current {
  min-height: 46px !important;
  grid-template-columns: 28px minmax(0, 1fr) 10px !important;
  gap: 8px !important;
  padding: 7px 9px !important;
}

.install-os-current small {
  font-size: 7px !important;
}

.install-os-current b {
  font-size: 11px !important;
}

.install-selected-device.is-open .install-os-menu,
.install-selected-device[data-install-os-select].is-open .install-os-menu {
  top: auto !important;
  bottom: calc(100% + 7px) !important;
  right: 0 !important;
  left: auto !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 5px !important;
  width: 300px !important;
  min-width: 300px !important;
  max-width: 300px !important;
  max-height: none !important;
  overflow: visible !important;
  overflow-y: visible !important;
  padding: 7px !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(15, 23, 39, 0.99), rgba(7, 11, 22, 0.99)) !important;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  z-index: 300 !important;
}

.install-selected-device.is-open .install-os-menu::-webkit-scrollbar,
.install-selected-device[data-install-os-select].is-open .install-os-menu::-webkit-scrollbar {
  display: none !important;
}

.install-os-option {
  grid-template-columns: 24px minmax(0, 1fr) !important;
  gap: 7px !important;
  min-height: 30px !important;
  padding: 5px 7px !important;
  border-radius: 9px !important;
}

.install-os-option .install-pill-icon {
  width: 23px !important;
  height: 23px !important;
  min-width: 23px !important;
}

.install-os-option span:last-child {
  font-size: 10.5px !important;
  white-space: nowrap !important;
}

.install-panel-premium .install-steps {
  gap: 12px !important;
}

.install-panel-premium .install-step {
  grid-template-rows: minmax(46px, auto) 60px !important;
  min-height: 126px !important;
  height: 126px !important;
  padding: 12px !important;
  gap: 10px !important;
}

.install-panel-premium .install-step > div:first-of-type {
  align-content: start !important;
}

.install-panel-premium .install-step b {
  font-size: 15px !important;
  line-height: 1.1 !important;
}

.install-panel-premium .install-step small {
  font-size: 12px !important;
  line-height: 1.25 !important;
}

.install-download-actions,
.install-import-actions {
  height: 60px !important;
  min-height: 60px !important;
  max-height: 60px !important;
}

.install-download-actions [data-download-link],
.install-panel-premium .install-step .install-import-actions a[data-import-link],
.install-import-actions a[data-import-link] {
  height: 60px !important;
  min-height: 60px !important;
  max-height: 60px !important;
  padding: 0 16px !important;
}

.install-download-actions [data-download-link]::before,
.install-panel-premium .install-step .install-import-actions a[data-import-link]::before,
.install-import-actions a[data-import-link]::before {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  font-size: 13px !important;
}

.install-client-card .install-pill-app .install-app-icon,
.install-client-card .install-pill-support .install-app-icon,
.supported-client-card .install-app-icon {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 9px !important;
  background: rgba(8, 10, 24, 0.72) !important;
}

.install-client-card .install-pill-app .install-app-icon img,
.install-client-card .install-pill-support .install-app-icon img,
.supported-client-card .install-app-icon img {
  width: 112% !important;
  height: 112% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

.install-app-icon img[src*="incy.png"] {
  transform: scale(1.13) translateY(0) !important;
}

.install-app-icon img[src*="happ.png"] {
  transform: scale(1.08) translateY(0) !important;
}

.install-app-icon img[src*="v2raytun.png"],
.install-app-icon img[src*="hiddify.png"],
.install-app-icon img[src*="shadowrocket.png"] {
  transform: scale(1.10) translateY(0) !important;
}

@media (max-width: 760px) {
  .install-panel-premium .install-panel-head,
  .install-panel-premium .install-steps,
  .install-client-card .install-app-pills {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .install-os-picker-row,
  .install-selected-device[data-install-os-select],
  .install-selected-device[data-install-os-select].is-open {
    width: 100% !important;
    max-width: none !important;
  }

  .install-selected-device.is-open .install-os-menu,
  .install-selected-device[data-install-os-select].is-open .install-os-menu {
    top: calc(100% + 6px) !important;
    bottom: auto !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

/* CDNRELAY_INSTALL_UI_FIX28: polished OS menu. */
.install-selected-device.is-open .install-os-menu,
.install-selected-device[data-install-os-select].is-open .install-os-menu {
  width: 360px !important;
  min-width: 360px !important;
  max-width: 360px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  padding: 10px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(117, 242, 199, 0.34) !important;
  background:
    linear-gradient(180deg, rgba(22, 30, 50, 0.98), rgba(9, 13, 27, 0.99)) !important;
  box-shadow:
    0 24px 54px rgba(0, 0, 0, 0.54),
    inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

.install-os-option {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) 18px !important;
  gap: 9px !important;
  align-items: center !important;
  min-height: 54px !important;
  padding: 8px 9px !important;
  border-radius: 13px !important;
  border: 1px solid rgba(155, 166, 196, 0.18) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.018)),
    rgba(12, 16, 31, 0.82) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease !important;
}

.install-os-option:hover,
.install-os-option:focus-visible {
  border-color: rgba(117, 242, 199, 0.46) !important;
  background:
    linear-gradient(180deg, rgba(117, 242, 199, 0.095), rgba(255, 255, 255, 0.018)),
    rgba(14, 24, 38, 0.90) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 24px rgba(0, 0, 0, 0.18) !important;
  outline: none !important;
  transform: translateY(-1px) !important;
}

.install-os-option.is-active {
  border-color: rgba(117, 242, 199, 0.66) !important;
  background:
    linear-gradient(135deg, rgba(28, 81, 75, 0.88), rgba(17, 26, 47, 0.96)) !important;
}

.install-os-option .install-pill-icon {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 11px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02)),
    rgba(8, 12, 24, 0.82) !important;
  border: 1px solid rgba(117, 242, 199, 0.20) !important;
}

.install-os-option .install-pill-icon svg {
  width: 18px !important;
  height: 18px !important;
}

.install-os-option-copy {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
  line-height: 1 !important;
}

.install-os-option-copy b {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #f4fbff !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  line-height: 1.05 !important;
}

.install-os-option-copy small {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: rgba(218, 226, 246, 0.58) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
}

.install-os-option-check {
  display: inline-grid !important;
  place-items: center !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(155, 166, 196, 0.22) !important;
  background: rgba(8, 12, 24, 0.55) !important;
}

.install-os-option.is-active .install-os-option-check {
  border-color: rgba(117, 242, 199, 0.70) !important;
  background: rgba(37, 123, 103, 0.80) !important;
}

.install-os-option.is-active .install-os-option-check::before {
  width: 8px !important;
  height: 4px !important;
  border: solid #eafff8 !important;
  border-width: 0 0 2px 2px !important;
  content: "" !important;
  transform: rotate(-45deg) translateY(-1px) !important;
}

@media (max-width: 760px) {
  .install-selected-device.is-open .install-os-menu,
  .install-selected-device[data-install-os-select].is-open .install-os-menu {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

/* CDNRELAY_INSTALL_UI_FIX29: clean vector app marks, compact OS picker, equal CTA buttons. */
body::after,
.cursor-aurora {
  display: none !important;
  opacity: 0 !important;
  content: none !important;
}

.install-panel-premium {
  overflow: visible !important;
}

.install-panel-premium .install-panel-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 208px !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 78px !important;
  padding: 12px 14px !important;
  overflow: visible !important;
  border-radius: 16px !important;
  z-index: 160 !important;
}

.install-panel-title {
  display: grid !important;
  align-content: center !important;
  gap: 6px !important;
  min-width: 0 !important;
}

.install-panel-title-row {
  margin: 0 !important;
  min-width: 0 !important;
}

.install-panel-title-row [data-install-title] {
  display: grid !important;
  grid-template-columns: 30px 30px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  line-height: 1.08 !important;
}

.install-panel-title-row [data-install-title] > span:last-child {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.install-panel-title > small {
  margin: 0 !important;
  max-width: 100% !important;
  color: rgba(235, 242, 255, 0.78) !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}

.install-title-step-badge,
.install-step-badge {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  border-radius: 999px !important;
  display: inline-grid !important;
  place-items: center !important;
  background: linear-gradient(135deg, rgba(41, 128, 112, 0.98), rgba(28, 87, 95, 0.94)) !important;
  border: 1px solid rgba(117, 242, 199, 0.62) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 8px 18px rgba(0, 0, 0, 0.22) !important;
}

.install-title-os-icon,
.install-os-current [data-install-device-icon],
.install-os-option .install-pill-icon {
  display: inline-grid !important;
  place-items: center !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  border-radius: 10px !important;
  color: #bff8ff !important;
  background: linear-gradient(180deg, rgba(46, 68, 92, 0.92), rgba(12, 17, 31, 0.96)) !important;
  border: 1px solid rgba(130, 190, 220, 0.24) !important;
  overflow: hidden !important;
}

.install-title-os-icon svg,
.install-os-current [data-install-device-icon] svg,
.install-os-option .install-pill-icon svg {
  display: block !important;
  width: 17px !important;
  height: 17px !important;
  fill: currentColor !important;
}

.install-os-picker-row {
  justify-self: end !important;
  align-self: center !important;
  display: block !important;
  width: 208px !important;
  max-width: 208px !important;
  z-index: 500 !important;
}

.install-selected-device[data-install-os-select],
.install-selected-device[data-install-os-select].is-open {
  position: relative !important;
  width: 208px !important;
  max-width: 208px !important;
  min-width: 0 !important;
  overflow: visible !important;
  z-index: 510 !important;
}

.install-os-current {
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) 14px !important;
  gap: 9px !important;
  align-items: center !important;
  min-height: 52px !important;
  height: 52px !important;
  padding: 8px 10px !important;
  border-radius: 15px !important;
  border: 1px solid rgba(117, 242, 199, 0.42) !important;
  background: linear-gradient(135deg, rgba(25, 47, 59, 0.96), rgba(22, 21, 41, 0.98)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 12px 26px rgba(0, 0, 0, 0.22) !important;
}

.install-selected-device.is-open .install-os-current {
  border-color: rgba(117, 242, 199, 0.72) !important;
  background: linear-gradient(135deg, rgba(31, 70, 70, 0.98), rgba(26, 23, 48, 0.99)) !important;
}

.install-os-current small {
  display: block !important;
  margin: 0 0 2px !important;
  color: rgba(220, 230, 248, 0.62) !important;
  font-size: 7px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

.install-os-current b {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #f7fbff !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  line-height: 1.08 !important;
}

.install-os-current i {
  justify-self: end !important;
  width: 9px !important;
  height: 9px !important;
  border-color: #75f2c7 !important;
}

.install-selected-device.is-open .install-os-menu,
.install-selected-device[data-install-os-select].is-open .install-os-menu {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  bottom: auto !important;
  left: auto !important;
  display: block !important;
  width: 318px !important;
  min-width: 318px !important;
  max-width: 318px !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 10px !important;
  overflow: visible !important;
  border-radius: 18px !important;
  border: 1px solid rgba(117, 242, 199, 0.38) !important;
  background: linear-gradient(180deg, rgba(20, 27, 44, 0.985), rgba(8, 12, 24, 0.995)) !important;
  box-shadow: 0 24px 58px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.09) !important;
  transform: none !important;
  z-index: 900 !important;
}

.install-os-option-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.install-os-option {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) 16px !important;
  gap: 8px !important;
  align-items: center !important;
  min-height: 48px !important;
  width: 100% !important;
  padding: 7px 8px !important;
  border-radius: 13px !important;
  border: 1px solid rgba(148, 166, 198, 0.18) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.018)), rgba(12, 16, 31, 0.88) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease !important;
}

.install-os-option:hover,
.install-os-option:focus-visible {
  border-color: rgba(117, 242, 199, 0.56) !important;
  background: linear-gradient(180deg, rgba(117, 242, 199, 0.11), rgba(255, 255, 255, 0.020)), rgba(13, 24, 38, 0.94) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 24px rgba(0, 0, 0, 0.22) !important;
  outline: none !important;
  transform: translateY(-1px) !important;
}

.install-os-option.is-active {
  border-color: rgba(117, 242, 199, 0.74) !important;
  background: linear-gradient(135deg, rgba(31, 87, 78, 0.96), rgba(19, 27, 49, 0.98)) !important;
}

.install-os-option .install-pill-icon {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  border-radius: 10px !important;
}

.install-os-option-copy {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
}

.install-os-option-copy b {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #f6fbff !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  line-height: 1.05 !important;
  text-transform: none !important;
}

.install-os-option-copy small {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: rgba(220, 229, 247, 0.58) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
}

.install-os-option-check {
  display: inline-grid !important;
  place-items: center !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(148, 166, 198, 0.26) !important;
  background: rgba(8, 12, 24, 0.56) !important;
}

.install-os-option.is-active .install-os-option-check {
  border-color: rgba(117, 242, 199, 0.76) !important;
  background: rgba(38, 126, 105, 0.86) !important;
}

.install-os-option.is-active .install-os-option-check::before {
  width: 7px !important;
  height: 4px !important;
  border: solid #eafff8 !important;
  border-width: 0 0 2px 2px !important;
  content: "" !important;
  transform: rotate(-45deg) translateY(-1px) !important;
}

.install-client-card {
  gap: 12px !important;
  padding: 14px !important;
  border-radius: 16px !important;
  overflow: visible !important;
  z-index: 80 !important;
}

.install-client-head {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  justify-content: flex-start !important;
}

.install-client-head > div {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
}

.install-client-head b {
  color: #f7fbff !important;
  font-size: 15px !important;
  line-height: 1.1 !important;
}

.install-client-head small {
  color: rgba(224, 232, 248, 0.70) !important;
  font-size: 11.5px !important;
  line-height: 1.2 !important;
}

.install-client-card .install-app-pills {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.install-panel-premium .install-pill-app,
.install-client-card .install-pill-support {
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: center !important;
  min-height: 58px !important;
  padding: 9px 12px !important;
  border-radius: 15px !important;
  border: 1px solid rgba(148, 166, 198, 0.24) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.018)), rgba(14, 18, 34, 0.92) !important;
  text-align: left !important;
  overflow: hidden !important;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease !important;
}

.install-panel-premium .install-pill-app:hover,
.install-client-card .install-pill-support:hover,
.install-panel-premium .install-pill-app:focus-visible,
.install-client-card .install-pill-support:focus-visible {
  border-color: rgba(117, 242, 199, 0.52) !important;
  background: linear-gradient(180deg, rgba(117, 242, 199, 0.08), rgba(255, 255, 255, 0.018)), rgba(14, 24, 38, 0.94) !important;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  outline: none !important;
  transform: translateY(-1px) !important;
}

.install-panel-premium .install-pill-app.is-active {
  border-color: rgba(117, 242, 199, 0.72) !important;
  background: linear-gradient(135deg, rgba(24, 76, 75, 0.96), rgba(16, 29, 48, 0.98)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 12px 28px rgba(0, 0, 0, 0.22) !important;
}

.install-client-card .install-pill-support {
  border-color: rgba(117, 242, 199, 0.42) !important;
}

.install-panel-premium .install-pill-app span:last-child,
.install-client-card .install-pill-support span:last-child {
  min-width: 0 !important;
  overflow: hidden !important;
  color: #f8fbff !important;
  font-size: 12.5px !important;
  font-weight: 950 !important;
  line-height: 1.08 !important;
  text-overflow: ellipsis !important;
}

.install-client-card .install-pill-support span:last-child {
  white-space: normal !important;
}

.install-app-icon,
.supported-client-card .install-app-icon {
  position: relative !important;
  display: inline-grid !important;
  place-items: center !important;
  justify-self: center !important;
  align-self: center !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 11px !important;
  border: 1px solid rgba(117, 242, 199, 0.32) !important;
  color: #f6fbff !important;
  background: linear-gradient(145deg, rgba(25, 32, 58, 0.98), rgba(8, 10, 22, 0.98)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 8px 16px rgba(0, 0, 0, 0.22) !important;
  line-height: 1 !important;
}

.install-app-icon svg {
  display: block !important;
  width: 28px !important;
  height: 28px !important;
  fill: currentColor !important;
}

.install-app-icon svg path,
.install-app-icon svg rect {
  fill: currentColor !important;
}

.install-app-wordmark {
  display: inline-grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 100% !important;
  color: #fff !important;
  font-size: 9px !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  text-shadow: 0 0 10px rgba(226, 64, 255, 0.55) !important;
}

.install-app-icon-incy {
  color: #f4f8ff !important;
  border-color: rgba(120, 255, 230, 0.46) !important;
  background: linear-gradient(145deg, #1d0e4d 0%, #080a18 52%, #121735 100%) !important;
}

.install-app-icon-incy .install-app-wordmark {
  color: #f4e7ff !important;
}

.install-app-icon-happ {
  color: #c849ff !important;
  border-color: rgba(211, 83, 255, 0.50) !important;
  background: linear-gradient(145deg, #21105b 0%, #090b19 52%, #24113f 100%) !important;
}

.install-app-icon-happ svg {
  width: 31px !important;
  height: 31px !important;
  filter: drop-shadow(0 0 7px rgba(216, 75, 255, 0.55)) !important;
}

.install-app-icon-v2raytun {
  color: #f3eaff !important;
  border-color: rgba(174, 84, 255, 0.52) !important;
  background: linear-gradient(145deg, #34116a 0%, #090b18 58%, #151a37 100%) !important;
}

.install-app-icon-hiddify {
  color: #d935ff !important;
  border-color: rgba(184, 89, 255, 0.48) !important;
  background: linear-gradient(145deg, #1d1345 0%, #080a17 58%, #132241 100%) !important;
}

.install-app-icon-shadowrocket {
  color: #cf63ff !important;
  border-color: rgba(190, 92, 255, 0.50) !important;
  background: linear-gradient(145deg, #22145a 0%, #070917 58%, #17152f 100%) !important;
}

.install-panel-premium .install-steps {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: stretch !important;
}

.install-panel-premium .install-step {
  display: grid !important;
  grid-template-rows: minmax(48px, auto) 56px !important;
  gap: 10px !important;
  min-height: 130px !important;
  height: 130px !important;
  padding: 14px !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

.install-panel-premium .install-step > span {
  display: none !important;
}

.install-panel-premium .install-step > div:first-of-type {
  display: grid !important;
  align-content: start !important;
  gap: 4px !important;
  min-width: 0 !important;
}

.install-panel-premium .install-step b {
  color: #f8fbff !important;
  font-size: 15px !important;
  line-height: 1.08 !important;
}

.install-panel-premium .install-step small {
  color: rgba(224, 232, 248, 0.72) !important;
  font-size: 11.5px !important;
  line-height: 1.18 !important;
}

.install-download-actions,
.install-import-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  margin: 0 !important;
  align-self: end !important;
}

.install-download-actions:has(a:not([hidden]) + a:not([hidden])) {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.install-download-actions a[hidden],
.install-download-actions button[hidden],
.install-import-actions a[hidden],
.install-import-actions button[hidden] {
  display: none !important;
}

.install-download-actions a,
.install-download-actions button,
.install-panel-premium .install-step .install-import-actions a,
.install-panel-premium .install-step .install-import-actions button,
.install-import-actions a,
.install-import-actions button {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  padding: 0 16px !important;
  border-radius: 15px !important;
  border: 1px solid rgba(117, 242, 199, 0.46) !important;
  background: linear-gradient(135deg, rgba(32, 82, 76, 0.96), rgba(18, 24, 45, 0.98)) !important;
  color: #f8fffc !important;
  font-size: 13.5px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-align: center !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 12px 24px rgba(0, 0, 0, 0.22) !important;
  transform: translateY(0) !important;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease !important;
}

.install-download-actions a::after,
.install-download-actions button::after,
.install-panel-premium .install-step .install-import-actions a::after,
.install-panel-premium .install-step .install-import-actions button::after,
.install-import-actions a::after,
.install-import-actions button::after {
  display: none !important;
  content: none !important;
}

.install-download-actions [data-download-link]::before,
.install-panel-premium .install-step .install-import-actions a[data-import-link]::before,
.install-import-actions a[data-import-link]::before {
  position: static !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(117, 242, 199, 0.68) !important;
  background: rgba(43, 126, 106, 0.88) !important;
  color: #ecfff9 !important;
  box-shadow: none !important;
  font-size: 12.5px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  opacity: 1 !important;
  transform: none !important;
}

.install-download-actions [data-download-link]::before {
  content: "3" !important;
}

.install-panel-premium .install-step .install-import-actions a[data-import-link]::before,
.install-import-actions a[data-import-link]::before {
  content: "4" !important;
}

.install-download-actions a:hover,
.install-download-actions button:hover,
.install-panel-premium .install-step .install-import-actions a:hover,
.install-panel-premium .install-step .install-import-actions button:hover,
.install-download-actions a:focus-visible,
.install-download-actions button:focus-visible,
.install-panel-premium .install-step .install-import-actions a:focus-visible,
.install-panel-premium .install-step .install-import-actions button:focus-visible {
  border-color: rgba(117, 242, 199, 0.76) !important;
  background: linear-gradient(135deg, rgba(42, 103, 91, 0.99), rgba(22, 31, 58, 0.99)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 16px 30px rgba(0, 0, 0, 0.26) !important;
  outline: none !important;
  transform: translateY(-1px) !important;
}

.install-secondary-actions,
.supported-raw-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(128px, 188px) !important;
  gap: 10px !important;
}

.install-secondary-actions button,
.install-secondary-actions [data-copy-sub],
.install-secondary-actions [data-raw-qr],
.supported-raw-actions button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 52px !important;
  height: 52px !important;
  padding: 0 18px !important;
  border-radius: 15px !important;
  border: 1px solid rgba(117, 242, 199, 0.44) !important;
  background: linear-gradient(135deg, rgba(32, 82, 76, 0.94), rgba(18, 24, 45, 0.98)) !important;
  color: #f8fffc !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 12px 24px rgba(0, 0, 0, 0.20) !important;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease !important;
}

.install-secondary-actions button:hover,
.install-secondary-actions button:focus-visible,
.supported-raw-actions button:hover,
.supported-raw-actions button:focus-visible {
  border-color: rgba(117, 242, 199, 0.74) !important;
  background: linear-gradient(135deg, rgba(42, 103, 91, 0.99), rgba(22, 31, 58, 0.99)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13), 0 16px 30px rgba(0, 0, 0, 0.24) !important;
  outline: none !important;
  transform: translateY(-1px) !important;
}

.supported-clients-modal {
  width: min(700px, calc(100vw - 28px)) !important;
  padding: 20px !important;
  border-radius: 18px !important;
}

.supported-client-list {
  gap: 10px !important;
}

.supported-client-card {
  grid-template-columns: 44px minmax(0, 1fr) 112px !important;
  gap: 12px !important;
  min-height: 68px !important;
  padding: 10px !important;
  border-radius: 15px !important;
}

.supported-client-card .install-app-icon {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
}

.supported-client-head b {
  color: #f8fbff !important;
  font-size: 14px !important;
}

.supported-client-head span {
  border-color: rgba(117, 242, 199, 0.46) !important;
  background: rgba(41, 126, 107, 0.50) !important;
  color: #eafff8 !important;
}

.supported-client-card p,
.supported-client-disclaimer {
  color: rgba(225, 233, 248, 0.76) !important;
  line-height: 1.3 !important;
}

.supported-client-add {
  height: 42px !important;
  min-height: 42px !important;
  border-radius: 13px !important;
  border: 1px solid rgba(117, 242, 199, 0.42) !important;
  background: linear-gradient(135deg, rgba(32, 82, 76, 0.94), rgba(18, 24, 45, 0.98)) !important;
  color: #f8fffc !important;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease !important;
}

.supported-client-add:hover,
.supported-client-add:focus-visible {
  border-color: rgba(117, 242, 199, 0.74) !important;
  background: linear-gradient(135deg, rgba(42, 103, 91, 0.99), rgba(22, 31, 58, 0.99)) !important;
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  outline: none !important;
  transform: translateY(-1px) !important;
}

.supported-client-disclaimer {
  margin-top: 10px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(148, 166, 198, 0.20) !important;
  border-radius: 13px !important;
  background: rgba(8, 12, 24, 0.56) !important;
}

@media (max-width: 860px) {
  .install-panel-premium .install-panel-head,
  .install-client-card .install-app-pills,
  .install-panel-premium .install-steps {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .install-os-picker-row,
  .install-selected-device[data-install-os-select],
  .install-selected-device[data-install-os-select].is-open {
    justify-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
  }

  .install-selected-device.is-open .install-os-menu,
  .install-selected-device[data-install-os-select].is-open .install-os-menu {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .install-panel-premium .install-step {
    height: auto !important;
    min-height: 128px !important;
  }
}

@media (max-width: 560px) {
  .install-os-option-grid,
  .install-secondary-actions,
  .supported-raw-actions,
  .supported-client-card {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .supported-client-add {
    width: 100% !important;
  }
}

/* CDNRELAY_INSTALL_UI_FIX29_CTA_LOCK: beat older highly-specific CTA sizing. */
.install-panel-premium .install-step .install-download-actions a[data-download-link],
.install-panel-premium .install-step .install-download-actions a[data-alt-download-link],
.install-panel-premium .install-step .install-download-actions button,
.install-panel-premium .install-step .install-import-actions a[data-import-link],
.install-panel-premium .install-step .install-import-actions button,
.install-download-actions:not(:has(a:not([hidden]) ~ a:not([hidden]))) a[data-download-link]:not([hidden]),
.install-download-actions:not(:has(button:not([hidden]) ~ button:not([hidden]))) button:not([hidden]) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  padding: 0 16px !important;
  line-height: 1 !important;
}

.install-panel-premium .install-step .install-download-actions,
.install-panel-premium .install-step .install-import-actions {
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  align-self: end !important;
  overflow: hidden !important;
}

/* CDNRELAY_INSTALL_UI_FIX29_STEP_LOCK: remove old oversized download/import card boxes. */
.install-panel-premium .install-steps .install-step,
.install-panel-premium .install-steps .install-step:nth-child(1),
.install-panel-premium .install-steps .install-step:nth-child(2) {
  display: grid !important;
  grid-template-rows: minmax(48px, auto) 56px !important;
  gap: 10px !important;
  height: 132px !important;
  min-height: 132px !important;
  max-height: 132px !important;
  padding: 14px !important;
}

/* CDNRELAY_INSTALL_UI_FIX30: no duplicate step badge, cleaner OS menu, stable app marks, roomier CTA glass. */
.install-os-step-badge {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.install-selected-device.is-open .install-os-menu,
.install-selected-device[data-install-os-select].is-open .install-os-menu {
  width: 306px !important;
  min-width: 306px !important;
  max-width: 306px !important;
  padding: 9px !important;
  border-radius: 17px !important;
  border: 1px solid rgba(117, 242, 199, 0.34) !important;
  background:
    linear-gradient(180deg, rgba(18, 25, 41, 0.99), rgba(8, 12, 23, 0.995)) !important;
  box-shadow:
    0 22px 48px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.085) !important;
}

.install-os-option-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

.install-os-option {
  position: relative !important;
  grid-template-columns: 30px minmax(0, 1fr) !important;
  gap: 8px !important;
  min-height: 46px !important;
  padding: 7px 8px 7px 9px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(144, 164, 198, 0.16) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.016)),
    rgba(13, 17, 31, 0.88) !important;
}

.install-os-option::before {
  position: absolute !important;
  top: 9px !important;
  bottom: 9px !important;
  left: 0 !important;
  width: 3px !important;
  border-radius: 0 999px 999px 0 !important;
  background: #75f2c7 !important;
  content: "" !important;
  opacity: 0 !important;
}

.install-os-option:hover,
.install-os-option:focus-visible {
  border-color: rgba(117, 242, 199, 0.48) !important;
  background:
    linear-gradient(180deg, rgba(117, 242, 199, 0.085), rgba(255, 255, 255, 0.018)),
    rgba(13, 23, 37, 0.94) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 10px 22px rgba(0, 0, 0, 0.20) !important;
}

.install-os-option.is-active {
  border-color: rgba(117, 242, 199, 0.66) !important;
  background:
    linear-gradient(135deg, rgba(28, 78, 72, 0.90), rgba(18, 26, 47, 0.98)) !important;
}

.install-os-option.is-active::before {
  opacity: 1 !important;
}

.install-os-option .install-pill-icon {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  border-radius: 10px !important;
}

.install-os-option-copy b {
  font-size: 12px !important;
  line-height: 1.05 !important;
}

.install-os-option-copy small {
  font-size: 8.8px !important;
  line-height: 1.05 !important;
}

.install-os-option-check {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.install-client-card .install-pill-app .install-app-icon,
.install-client-card .install-pill-support .install-app-icon,
.install-panel-premium .install-pill-app .install-app-icon,
.supported-client-card .install-app-icon,
.install-app-icon {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(117, 242, 199, 0.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 7px 14px rgba(0, 0, 0, 0.22) !important;
}

.install-app-icon svg {
  width: 24px !important;
  height: 24px !important;
}

.install-app-icon svg text {
  fill: currentColor !important;
  font-family: "Arial Black", Arial, sans-serif !important;
  font-size: 10.6px !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

.install-app-icon-incy {
  color: #fff7ff !important;
  border-color: rgba(123, 255, 231, 0.48) !important;
  background:
    radial-gradient(circle at 28% 20%, rgba(238, 72, 255, 0.42), transparent 36%),
    linear-gradient(145deg, #261166 0%, #080817 54%, #151b37 100%) !important;
}

.install-app-icon-incy svg {
  width: 31px !important;
  height: 31px !important;
  filter: drop-shadow(0 0 8px rgba(232, 70, 255, 0.45)) !important;
}

.install-app-icon-happ {
  color: #cf4dff !important;
}

.install-app-icon-happ svg {
  width: 25px !important;
  height: 25px !important;
  filter: drop-shadow(0 0 7px rgba(216, 75, 255, 0.45)) !important;
}

.install-app-icon-shadowrocket svg,
.install-app-icon-hiddify svg,
.install-app-icon-supported svg {
  width: 24px !important;
  height: 24px !important;
}

.install-app-icon-supported {
  color: #d85cff !important;
  border-color: rgba(117, 242, 199, 0.46) !important;
  background:
    radial-gradient(circle at 70% 18%, rgba(117, 242, 199, 0.32), transparent 32%),
    linear-gradient(145deg, #20114f 0%, #080a18 58%, #13233f 100%) !important;
}

.supported-client-card .install-app-icon {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
}

.install-panel-premium .install-steps {
  gap: 14px !important;
}

.install-panel-premium .install-steps .install-step,
.install-panel-premium .install-steps .install-step:nth-child(1),
.install-panel-premium .install-steps .install-step:nth-child(2) {
  display: grid !important;
  grid-template-rows: minmax(60px, auto) 60px !important;
  gap: 14px !important;
  height: 166px !important;
  min-height: 166px !important;
  max-height: 166px !important;
  padding: 18px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(117, 242, 199, 0.22) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(11, 16, 30, 0.88) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 34px rgba(0, 0, 0, 0.20) !important;
}

.install-panel-premium .install-step > div:first-of-type {
  gap: 6px !important;
}

.install-panel-premium .install-step b {
  font-size: 16px !important;
  line-height: 1.1 !important;
}

.install-panel-premium .install-step small {
  font-size: 12px !important;
  line-height: 1.25 !important;
}

.install-panel-premium .install-step .install-download-actions,
.install-panel-premium .install-step .install-import-actions,
.install-download-actions,
.install-import-actions {
  height: 60px !important;
  min-height: 60px !important;
  max-height: 60px !important;
  margin: 0 !important;
  overflow: visible !important;
}

.install-panel-premium .install-step .install-download-actions a[data-download-link],
.install-panel-premium .install-step .install-download-actions a[data-alt-download-link],
.install-panel-premium .install-step .install-download-actions button,
.install-panel-premium .install-step .install-import-actions a[data-import-link],
.install-panel-premium .install-step .install-import-actions button,
.install-download-actions:not(:has(a:not([hidden]) ~ a:not([hidden]))) a[data-download-link]:not([hidden]),
.install-download-actions:not(:has(button:not([hidden]) ~ button:not([hidden]))) button:not([hidden]) {
  height: 60px !important;
  min-height: 60px !important;
  max-height: 60px !important;
  border-radius: 14px !important;
  border-color: rgba(117, 242, 199, 0.48) !important;
  background:
    linear-gradient(135deg, rgba(35, 90, 82, 0.96), rgba(19, 27, 49, 0.98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    0 12px 24px rgba(0, 0, 0, 0.22) !important;
}

@media (max-width: 860px) {
  .install-panel-premium .install-steps .install-step,
  .install-panel-premium .install-steps .install-step:nth-child(1),
  .install-panel-premium .install-steps .install-step:nth-child(2) {
    height: auto !important;
    max-height: none !important;
    min-height: 160px !important;
  }
}

/* CDNRELAY_INSTALL_UI_FIX35: shared white client icons and no CTA bleed from glass cards. */
.install-client-card .install-pill-app .install-app-icon,
.install-client-card .install-pill-support .install-app-icon,
.install-panel-premium .install-pill-app .install-app-icon,
.supported-client-card .install-app-icon,
.install-app-icon {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
  border-radius: 10px !important;
  border: 1px solid rgba(133, 240, 217, 0.36) !important;
  color: #ffffff !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.018)),
    linear-gradient(145deg, rgba(23, 33, 55, 0.98), rgba(8, 11, 24, 0.98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    0 8px 16px rgba(0, 0, 0, 0.22) !important;
  overflow: hidden !important;
}

.install-app-icon-incy,
.install-app-icon-happ,
.install-app-icon-v2raytun,
.install-app-icon-hiddify,
.install-app-icon-shadowrocket,
.install-app-icon-supported {
  color: #ffffff !important;
  border-color: rgba(133, 240, 217, 0.36) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.018)),
    linear-gradient(145deg, rgba(23, 33, 55, 0.98), rgba(8, 11, 24, 0.98)) !important;
  filter: none !important;
}

.install-app-icon svg,
.install-app-icon-happ svg,
.install-app-icon-incy svg,
.install-app-icon-shadowrocket svg,
.install-app-icon-hiddify svg,
.install-app-icon-supported svg {
  width: 22px !important;
  height: 22px !important;
  filter: none !important;
  transform: none !important;
}

.install-app-icon-v2raytun svg {
  width: 23px !important;
  height: 23px !important;
}

.install-app-icon svg,
.install-app-icon svg path,
.install-app-icon svg rect,
.install-app-icon svg circle {
  fill: currentColor !important;
  stroke: none !important;
}

.install-client-card .install-app-pills {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.install-client-card .install-pill-app,
.install-client-card .install-pill-support {
  grid-template-columns: 34px minmax(0, 1fr) !important;
  min-height: 58px !important;
  padding: 10px 14px !important;
  gap: 11px !important;
}

.install-panel-premium .install-steps {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch !important;
}

.install-panel-premium .install-steps .install-step,
.install-panel-premium .install-steps .install-step:nth-child(1),
.install-panel-premium .install-steps .install-step:nth-child(2) {
  display: grid !important;
  grid-template-rows: minmax(66px, 1fr) 58px !important;
  gap: 16px !important;
  height: 176px !important;
  min-height: 176px !important;
  max-height: 176px !important;
  padding: 18px !important;
  align-items: stretch !important;
  overflow: hidden !important;
}

.install-panel-premium .install-step > div:first-of-type {
  min-height: 0 !important;
  align-content: start !important;
}

.install-panel-premium .install-step .install-download-actions,
.install-panel-premium .install-step .install-import-actions,
.install-download-actions,
.install-import-actions {
  height: 58px !important;
  min-height: 58px !important;
  max-height: 58px !important;
  align-self: end !important;
  overflow: hidden !important;
}

.install-panel-premium .install-step .install-download-actions a[data-download-link],
.install-panel-premium .install-step .install-download-actions a[data-alt-download-link],
.install-panel-premium .install-step .install-download-actions button,
.install-panel-premium .install-step .install-import-actions a[data-import-link],
.install-panel-premium .install-step .install-import-actions button,
.install-download-actions:not(:has(a:not([hidden]) ~ a:not([hidden]))) a[data-download-link]:not([hidden]),
.install-download-actions:not(:has(button:not([hidden]) ~ button:not([hidden]))) button:not([hidden]) {
  height: 58px !important;
  min-height: 58px !important;
  max-height: 58px !important;
  margin: 0 !important;
  border-radius: 15px !important;
}

@media (max-width: 860px) {
  .install-client-card .install-app-pills,
  .install-panel-premium .install-steps {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .install-panel-premium .install-steps .install-step,
  .install-panel-premium .install-steps .install-step:nth-child(1),
  .install-panel-premium .install-steps .install-step:nth-child(2) {
    height: auto !important;
    max-height: none !important;
    min-height: 168px !important;
  }
}

/* CDNRELAY_INSTALL_UI_FIX36: supported apps modal fits desktop height without native white scrollbar. */
.supported-clients-modal {
  max-height: min(90vh, 680px) !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(117, 242, 199, 0.48) rgba(7, 11, 22, 0.36) !important;
}

.supported-clients-modal::-webkit-scrollbar {
  width: 8px !important;
}

.supported-clients-modal::-webkit-scrollbar-track {
  border-radius: 999px !important;
  background: rgba(7, 11, 22, 0.36) !important;
}

.supported-clients-modal::-webkit-scrollbar-thumb {
  border: 2px solid rgba(7, 11, 22, 0.36) !important;
  border-radius: 999px !important;
  background: rgba(117, 242, 199, 0.62) !important;
}

/* CDNRELAY_INSTALL_UI_FIX37: tuck the OS title text closer to the OS icon. */
.install-panel-title-row [data-install-title] {
  grid-template-columns: 30px 28px minmax(0, max-content) !important;
  column-gap: 5px !important;
  row-gap: 0 !important;
  align-items: center !important;
}

.install-panel-title-row [data-install-title] > span:last-child {
  margin-left: -3px !important;
  transform: translateY(-0.5px) !important;
}

/* CDNRELAY_INSTALL_UI_FIX39: CTA buttons match the Incy/Happ glass pills and sit closer together. */
.install-panel-premium {
  gap: 12px !important;
}

.install-panel-premium .install-steps {
  gap: 14px !important;
  margin-bottom: 0 !important;
}

.install-panel-premium .install-step {
  border-color: rgba(117, 242, 199, 0.26) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.018)),
    rgba(12, 16, 31, 0.82) !important;
}

.install-panel-premium .install-step .install-download-actions,
.install-panel-premium .install-step .install-import-actions,
.install-download-actions,
.install-import-actions {
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
}

.install-panel-premium .install-step .install-download-actions a[data-download-link],
.install-panel-premium .install-step .install-download-actions a[data-alt-download-link],
.install-panel-premium .install-step .install-download-actions button,
.install-panel-premium .install-step .install-import-actions a[data-import-link],
.install-panel-premium .install-step .install-import-actions button,
.install-download-actions:not(:has(a:not([hidden]) ~ a:not([hidden]))) a[data-download-link]:not([hidden]),
.install-download-actions:not(:has(button:not([hidden]) ~ button:not([hidden]))) button:not([hidden]),
.install-secondary-actions button,
.install-secondary-actions [data-copy-sub],
.install-secondary-actions [data-raw-qr],
.supported-raw-actions button {
  min-height: 50px !important;
  height: 50px !important;
  max-height: 56px !important;
  border-radius: 15px !important;
  border: 1px solid rgba(117, 242, 199, 0.44) !important;
  background:
    radial-gradient(circle at 0% 50%, rgba(117, 242, 199, 0.18), transparent 48%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.056), rgba(255, 255, 255, 0.018)),
    rgba(13, 18, 35, 0.94) !important;
  color: #f8fbff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 10px 22px rgba(0, 0, 0, 0.20) !important;
  transform: translateY(0) !important;
}

.install-panel-premium .install-step .install-download-actions a[data-download-link],
.install-panel-premium .install-step .install-download-actions a[data-alt-download-link],
.install-panel-premium .install-step .install-download-actions button,
.install-panel-premium .install-step .install-import-actions a[data-import-link],
.install-panel-premium .install-step .install-import-actions button,
.install-download-actions:not(:has(a:not([hidden]) ~ a:not([hidden]))) a[data-download-link]:not([hidden]),
.install-download-actions:not(:has(button:not([hidden]) ~ button:not([hidden]))) button:not([hidden]) {
  height: 56px !important;
  min-height: 56px !important;
}

.install-download-actions [data-download-link]::before,
.install-panel-premium .install-step .install-import-actions a[data-import-link]::before,
.install-import-actions a[data-import-link]::before {
  border-color: rgba(117, 242, 199, 0.62) !important;
  background: rgba(31, 87, 78, 0.88) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

.install-panel-premium .install-step .install-download-actions a:hover,
.install-panel-premium .install-step .install-download-actions a:focus-visible,
.install-panel-premium .install-step .install-import-actions a:hover,
.install-panel-premium .install-step .install-import-actions a:focus-visible,
.install-secondary-actions button:hover,
.install-secondary-actions button:focus-visible,
.supported-raw-actions button:hover,
.supported-raw-actions button:focus-visible {
  border-color: rgba(117, 242, 199, 0.70) !important;
  background:
    radial-gradient(circle at 0% 50%, rgba(117, 242, 199, 0.24), transparent 50%),
    linear-gradient(180deg, rgba(117, 242, 199, 0.075), rgba(255, 255, 255, 0.018)),
    rgba(14, 24, 38, 0.96) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 12px 24px rgba(0, 0, 0, 0.24) !important;
  outline: none !important;
  transform: translateY(-1px) !important;
}

.install-secondary-actions {
  grid-template-columns: minmax(0, 1fr) minmax(112px, 188px) !important;
  gap: 10px !important;
  margin-top: -4px !important;
  align-items: stretch !important;
}

.install-secondary-actions button,
.install-secondary-actions [data-copy-sub],
.install-secondary-actions [data-raw-qr] {
  font-size: 12.5px !important;
}

@media (max-width: 860px) {
  .install-secondary-actions {
    margin-top: 0 !important;
  }
}

/* CDNRELAY_INSTALL_UI_FIX40: clean step 1 header and stop CTA hover jumps/clipping. */
.install-panel-premium .install-panel-head {
  align-items: center !important;
  min-height: 72px !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.install-panel-title {
  justify-content: center !important;
  gap: 0 !important;
}

.install-panel-title > small[data-install-subtitle] {
  display: none !important;
}

.install-panel-title-row {
  align-items: center !important;
}

.install-panel-premium .install-step .install-download-actions a,
.install-panel-premium .install-step .install-download-actions button,
.install-panel-premium .install-step .install-import-actions a,
.install-panel-premium .install-step .install-import-actions button,
.install-download-actions a,
.install-download-actions button,
.install-import-actions a,
.install-import-actions button,
.install-secondary-actions button,
.supported-raw-actions button {
  transform: none !important;
}

.install-panel-premium .install-step .install-download-actions a:hover,
.install-panel-premium .install-step .install-download-actions a:focus-visible,
.install-panel-premium .install-step .install-download-actions button:hover,
.install-panel-premium .install-step .install-download-actions button:focus-visible,
.install-panel-premium .install-step .install-import-actions a:hover,
.install-panel-premium .install-step .install-import-actions a:focus-visible,
.install-panel-premium .install-step .install-import-actions button:hover,
.install-panel-premium .install-step .install-import-actions button:focus-visible,
.install-download-actions a:hover,
.install-download-actions a:focus-visible,
.install-download-actions button:hover,
.install-download-actions button:focus-visible,
.install-import-actions a:hover,
.install-import-actions a:focus-visible,
.install-import-actions button:hover,
.install-import-actions button:focus-visible,
.install-secondary-actions button:hover,
.install-secondary-actions button:focus-visible,
.supported-raw-actions button:hover,
.supported-raw-actions button:focus-visible {
  transform: none !important;
}

/* CDNRELAY_INSTALL_UI_FIX41: keep step 1 copy attached to its title and pin card descriptions near headings. */
.install-panel-premium .install-panel-head {
  grid-template-columns: minmax(0, 1fr) minmax(0, 202px) !important;
  align-items: center !important;
  min-height: 96px !important;
  padding: 14px 16px !important;
}

.install-panel-title {
  display: grid !important;
  align-content: center !important;
  justify-content: start !important;
  gap: 7px !important;
  min-width: 0 !important;
}

.install-panel-title-row {
  display: block !important;
  min-width: 0 !important;
}

.install-panel-title > small[data-install-subtitle] {
  display: block !important;
  max-width: 520px !important;
  margin: 0 0 0 0 !important;
  color: rgba(224, 232, 248, 0.76) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  line-height: 1.25 !important;
}

.install-panel-premium .install-steps .install-step,
.install-panel-premium .install-steps .install-step:nth-child(1),
.install-panel-premium .install-steps .install-step:nth-child(2) {
  grid-template-rows: minmax(54px, auto) 56px !important;
  gap: 14px !important;
  height: 164px !important;
  min-height: 164px !important;
  max-height: 164px !important;
}

.install-panel-premium .install-step > div:first-of-type {
  display: grid !important;
  align-content: start !important;
  gap: 7px !important;
  min-height: 0 !important;
}

.install-panel-premium .install-step small,
.install-panel-premium .install-step [data-import-note] {
  margin: 0 !important;
  align-self: start !important;
  line-height: 1.22 !important;
}

@media (max-width: 860px) {
  .install-panel-premium .install-panel-head {
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 0 !important;
  }

  .install-panel-title > small[data-install-subtitle] {
    max-width: none !important;
  }

  .install-panel-premium .install-steps .install-step,
  .install-panel-premium .install-steps .install-step:nth-child(1),
  .install-panel-premium .install-steps .install-step:nth-child(2) {
    height: auto !important;
    max-height: none !important;
    min-height: 154px !important;
  }
}

/* CDNRELAY_INSTALL_UI_FIX42: equal step cards and same non-jumping CTA animation. */
.install-panel-premium .install-steps .install-step,
.install-panel-premium .install-steps .install-step:nth-child(1),
.install-panel-premium .install-steps .install-step:nth-child(2) {
  grid-template-rows: 62px 56px !important;
  gap: 16px !important;
  height: 172px !important;
  min-height: 172px !important;
  max-height: 172px !important;
  padding: 18px !important;
}

.install-panel-premium .install-step > div:first-of-type {
  display: grid !important;
  grid-template-rows: 20px 34px !important;
  align-content: start !important;
  justify-items: center !important;
  gap: 8px !important;
  min-height: 62px !important;
  max-height: 62px !important;
}

.install-panel-premium .install-step b {
  display: block !important;
  width: 100% !important;
  height: 20px !important;
  min-height: 20px !important;
  margin: 0 !important;
  overflow: hidden !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.install-panel-premium .install-step small,
.install-panel-premium .install-step [data-import-note] {
  display: -webkit-box !important;
  width: 100% !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  margin: 0 !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  text-align: center !important;
  line-height: 17px !important;
}

.install-panel-premium .install-step .install-download-actions,
.install-panel-premium .install-step .install-import-actions {
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  align-self: end !important;
}

.install-panel-premium .install-step .install-download-actions a[data-download-link],
.install-panel-premium .install-step .install-download-actions a[data-alt-download-link],
.install-panel-premium .install-step .install-download-actions button,
.install-panel-premium .install-step .install-import-actions a[data-import-link],
.install-panel-premium .install-step .install-import-actions button {
  position: relative !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  overflow: hidden !important;
  transform: none !important;
}

.install-panel-premium .install-step .install-download-actions a[data-download-link]::after,
.install-panel-premium .install-step .install-download-actions a[data-alt-download-link]::after,
.install-panel-premium .install-step .install-download-actions button::after,
.install-panel-premium .install-step .install-import-actions a[data-import-link]::after,
.install-panel-premium .install-step .install-import-actions button::after,
.install-secondary-actions button::after,
.supported-raw-actions button::after {
  position: absolute !important;
  top: -40% !important;
  bottom: -40% !important;
  left: -42% !important;
  display: block !important;
  width: 34% !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent) !important;
  content: "" !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(-120%) skewX(-18deg) !important;
  transition: transform 520ms ease, opacity 160ms ease !important;
}

.install-panel-premium .install-step .install-download-actions a[data-download-link]:hover::after,
.install-panel-premium .install-step .install-download-actions a[data-alt-download-link]:hover::after,
.install-panel-premium .install-step .install-download-actions button:hover::after,
.install-panel-premium .install-step .install-import-actions a[data-import-link]:hover::after,
.install-panel-premium .install-step .install-import-actions button:hover::after,
.install-secondary-actions button:hover::after,
.supported-raw-actions button:hover::after {
  opacity: 1 !important;
  transform: translateX(470%) skewX(-18deg) !important;
}

.install-panel-premium .install-step .install-download-actions a[data-download-link]:hover,
.install-panel-premium .install-step .install-download-actions a[data-alt-download-link]:hover,
.install-panel-premium .install-step .install-download-actions button:hover,
.install-panel-premium .install-step .install-import-actions a[data-import-link]:hover,
.install-panel-premium .install-step .install-import-actions button:hover,
.install-panel-premium .install-step .install-download-actions a[data-download-link]:focus-visible,
.install-panel-premium .install-step .install-download-actions a[data-alt-download-link]:focus-visible,
.install-panel-premium .install-step .install-download-actions button:focus-visible,
.install-panel-premium .install-step .install-import-actions a[data-import-link]:focus-visible,
.install-panel-premium .install-step .install-import-actions button:focus-visible {
  transform: none !important;
}

@media (max-width: 860px) {
  .install-panel-premium .install-steps .install-step,
  .install-panel-premium .install-steps .install-step:nth-child(1),
  .install-panel-premium .install-steps .install-step:nth-child(2) {
    height: auto !important;
    max-height: none !important;
    min-height: 166px !important;
  }
}

/* CDNRELAY_INSTALL_UI_FIX43: make step CTAs animate identically without moving the button box. */
@keyframes cdnrelayCtaSheenFix43 {
  0% {
    opacity: 0;
    transform: translateX(-140%) skewX(-18deg);
  }
  22% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(500%) skewX(-18deg);
  }
}

.install-panel-premium .install-step .install-download-actions a[data-download-link],
.install-panel-premium .install-step .install-download-actions a[data-alt-download-link],
.install-panel-premium .install-step .install-download-actions button,
.install-panel-premium .install-step .install-import-actions a[data-import-link],
.install-panel-premium .install-step .install-import-actions button,
.install-secondary-actions button,
.supported-raw-actions button {
  transition: border-color 170ms ease, background 170ms ease, box-shadow 170ms ease, filter 170ms ease !important;
}

.install-panel-premium .install-step .install-download-actions a[data-download-link]::after,
.install-panel-premium .install-step .install-download-actions a[data-alt-download-link]::after,
.install-panel-premium .install-step .install-download-actions button::after,
.install-panel-premium .install-step .install-import-actions a[data-import-link]::after,
.install-panel-premium .install-step .install-import-actions button::after,
.install-secondary-actions button::after,
.supported-raw-actions button::after {
  animation: none !important;
}

.install-panel-premium .install-step .install-download-actions a[data-download-link]:hover,
.install-panel-premium .install-step .install-download-actions a[data-alt-download-link]:hover,
.install-panel-premium .install-step .install-download-actions button:hover,
.install-panel-premium .install-step .install-import-actions a[data-import-link]:hover,
.install-panel-premium .install-step .install-import-actions button:hover,
.install-panel-premium .install-step .install-download-actions a[data-download-link]:focus-visible,
.install-panel-premium .install-step .install-download-actions a[data-alt-download-link]:focus-visible,
.install-panel-premium .install-step .install-download-actions button:focus-visible,
.install-panel-premium .install-step .install-import-actions a[data-import-link]:focus-visible,
.install-panel-premium .install-step .install-import-actions button:focus-visible {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 12px 30px rgba(30, 214, 170, 0.14) !important;
  filter: saturate(1.06) !important;
  transform: none !important;
}

.install-panel-premium .install-step .install-download-actions a[data-download-link]:hover::after,
.install-panel-premium .install-step .install-download-actions a[data-alt-download-link]:hover::after,
.install-panel-premium .install-step .install-download-actions button:hover::after,
.install-panel-premium .install-step .install-import-actions a[data-import-link]:hover::after,
.install-panel-premium .install-step .install-import-actions button:hover::after,
.install-panel-premium .install-step .install-download-actions a[data-download-link]:focus-visible::after,
.install-panel-premium .install-step .install-download-actions a[data-alt-download-link]:focus-visible::after,
.install-panel-premium .install-step .install-download-actions button:focus-visible::after,
.install-panel-premium .install-step .install-import-actions a[data-import-link]:focus-visible::after,
.install-panel-premium .install-step .install-import-actions button:focus-visible::after,
.install-secondary-actions button:hover::after,
.install-secondary-actions button:focus-visible::after,
.supported-raw-actions button:hover::after,
.supported-raw-actions button:focus-visible::after {
  animation: cdnrelayCtaSheenFix43 680ms ease forwards !important;
}

/* CDNRELAY_INSTALL_UI_FIX44: pin step-1 title above copy and equalize the two CTA cards. */
@keyframes cdnrelayCtaSheenFix44 {
  0% {
    opacity: 0;
    transform: translateX(-145%) skewX(-18deg);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(520%) skewX(-18deg);
  }
}

.install-panel-premium .install-panel-head {
  grid-template-columns: minmax(0, 1fr) minmax(0, 202px) !important;
  align-items: center !important;
  min-height: 104px !important;
  padding: 16px !important;
}

.install-panel-title {
  display: grid !important;
  grid-template-rows: 32px 18px !important;
  align-content: center !important;
  justify-content: start !important;
  justify-items: start !important;
  gap: 7px !important;
  min-width: 0 !important;
}

.install-panel-title-row {
  display: flex !important;
  width: 100% !important;
  height: 32px !important;
  min-height: 32px !important;
  margin: 0 !important;
  align-items: center !important;
}

.install-panel-title-row [data-install-title] {
  display: inline-grid !important;
  grid-template-columns: 30px 28px minmax(0, max-content) !important;
  width: fit-content !important;
  max-width: 100% !important;
  min-height: 32px !important;
  align-items: center !important;
  column-gap: 5px !important;
  overflow: hidden !important;
}

.install-panel-title-row [data-install-title] > span:last-child {
  min-width: 0 !important;
  margin: 0 !important;
  transform: none !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.install-panel-title > small[data-install-subtitle] {
  display: block !important;
  grid-row: 2 !important;
  width: 100% !important;
  max-width: none !important;
  height: 18px !important;
  min-height: 18px !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: rgba(224, 232, 248, 0.78) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  line-height: 18px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.install-panel-premium .install-steps {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 14px !important;
}

.install-panel-premium .install-steps .install-step,
.install-panel-premium .install-steps .install-step:nth-child(1),
.install-panel-premium .install-steps .install-step:nth-child(2) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 54px 56px !important;
  gap: 14px !important;
  height: 160px !important;
  min-height: 160px !important;
  max-height: 160px !important;
  padding: 18px !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  overflow: hidden !important;
}

.install-panel-premium .install-step > span {
  display: none !important;
}

.install-panel-premium .install-step > div:first-of-type {
  display: grid !important;
  grid-template-rows: 22px 20px !important;
  width: 100% !important;
  min-height: 54px !important;
  max-height: 54px !important;
  align-content: start !important;
  justify-items: center !important;
  gap: 7px !important;
  text-align: center !important;
}

.install-panel-premium .install-step b {
  display: block !important;
  width: 100% !important;
  height: 22px !important;
  min-height: 22px !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: #f8fbff !important;
  font-size: 16px !important;
  font-weight: 950 !important;
  line-height: 22px !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.install-panel-premium .install-step small,
.install-panel-premium .install-step [data-import-note] {
  display: block !important;
  width: 100% !important;
  height: 20px !important;
  min-height: 20px !important;
  max-height: 20px !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: rgba(224, 232, 248, 0.74) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  line-height: 20px !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  -webkit-box-orient: initial !important;
  -webkit-line-clamp: unset !important;
}

.install-panel-premium .install-step .install-download-actions,
.install-panel-premium .install-step .install-import-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  margin: 0 !important;
  align-self: end !important;
}

.install-panel-premium .install-step .install-download-actions a[data-download-link],
.install-panel-premium .install-step .install-download-actions a[data-alt-download-link],
.install-panel-premium .install-step .install-download-actions button,
.install-panel-premium .install-step .install-import-actions a[data-import-link],
.install-panel-premium .install-step .install-import-actions button {
  position: relative !important;
  isolation: isolate !important;
  display: inline-flex !important;
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  padding: 0 22px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  overflow: hidden !important;
  border: 1px solid rgba(117, 242, 199, 0.54) !important;
  border-radius: 14px !important;
  background:
    radial-gradient(160px 84px at 8% 6%, rgba(117, 242, 199, 0.22), transparent 62%),
    linear-gradient(135deg, rgba(32, 91, 82, 0.90), rgba(20, 28, 55, 0.94)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  color: #f8fbff !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-decoration: none !important;
  transform: none !important;
  transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, filter 180ms ease !important;
}

.install-panel-premium .install-step .install-download-actions a[data-download-link]::before,
.install-panel-premium .install-step .install-download-actions a[data-alt-download-link]::before,
.install-panel-premium .install-step .install-download-actions button::before,
.install-panel-premium .install-step .install-import-actions a[data-import-link]::before,
.install-panel-premium .install-step .install-import-actions button::before {
  position: relative !important;
  z-index: 1 !important;
  display: inline-grid !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  margin: 0 !important;
  place-items: center !important;
  border: 1px solid rgba(117, 242, 199, 0.72) !important;
  border-radius: 999px !important;
  background: rgba(36, 148, 127, 0.68) !important;
  box-shadow: 0 8px 20px rgba(30, 214, 170, 0.16) !important;
  color: #f8fbff !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

.install-panel-premium .install-step .install-download-actions a[data-download-link]::after,
.install-panel-premium .install-step .install-download-actions a[data-alt-download-link]::after,
.install-panel-premium .install-step .install-download-actions button::after,
.install-panel-premium .install-step .install-import-actions a[data-import-link]::after,
.install-panel-premium .install-step .install-import-actions button::after {
  position: absolute !important;
  inset: -42% auto -42% -36% !important;
  z-index: 0 !important;
  display: block !important;
  width: 32% !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent) !important;
  content: "" !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(-145%) skewX(-18deg) !important;
}

.install-panel-premium .install-step:hover .install-download-actions a[data-download-link]:not([hidden]),
.install-panel-premium .install-step:hover .install-download-actions a[data-alt-download-link]:not([hidden]),
.install-panel-premium .install-step:hover .install-download-actions button:not([hidden]),
.install-panel-premium .install-step:hover .install-import-actions a[data-import-link]:not([hidden]),
.install-panel-premium .install-step:hover .install-import-actions button:not([hidden]),
.install-panel-premium .install-step .install-download-actions a[data-download-link]:hover,
.install-panel-premium .install-step .install-download-actions a[data-alt-download-link]:hover,
.install-panel-premium .install-step .install-download-actions button:hover,
.install-panel-premium .install-step .install-import-actions a[data-import-link]:hover,
.install-panel-premium .install-step .install-import-actions button:hover,
.install-panel-premium .install-step .install-download-actions a[data-download-link]:focus-visible,
.install-panel-premium .install-step .install-download-actions a[data-alt-download-link]:focus-visible,
.install-panel-premium .install-step .install-download-actions button:focus-visible,
.install-panel-premium .install-step .install-import-actions a[data-import-link]:focus-visible,
.install-panel-premium .install-step .install-import-actions button:focus-visible {
  border-color: rgba(117, 242, 199, 0.78) !important;
  background:
    radial-gradient(180px 90px at 10% 6%, rgba(117, 242, 199, 0.32), transparent 62%),
    linear-gradient(135deg, rgba(38, 116, 101, 0.95), rgba(22, 31, 58, 0.98)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13), 0 12px 30px rgba(30, 214, 170, 0.16) !important;
  filter: saturate(1.08) !important;
  transform: none !important;
}

.install-panel-premium .install-step:hover .install-download-actions a[data-download-link]:not([hidden])::after,
.install-panel-premium .install-step:hover .install-download-actions a[data-alt-download-link]:not([hidden])::after,
.install-panel-premium .install-step:hover .install-download-actions button:not([hidden])::after,
.install-panel-premium .install-step:hover .install-import-actions a[data-import-link]:not([hidden])::after,
.install-panel-premium .install-step:hover .install-import-actions button:not([hidden])::after,
.install-panel-premium .install-step .install-download-actions a[data-download-link]:hover::after,
.install-panel-premium .install-step .install-download-actions a[data-alt-download-link]:hover::after,
.install-panel-premium .install-step .install-download-actions button:hover::after,
.install-panel-premium .install-step .install-import-actions a[data-import-link]:hover::after,
.install-panel-premium .install-step .install-import-actions button:hover::after,
.install-panel-premium .install-step .install-download-actions a[data-download-link]:focus-visible::after,
.install-panel-premium .install-step .install-download-actions a[data-alt-download-link]:focus-visible::after,
.install-panel-premium .install-step .install-download-actions button:focus-visible::after,
.install-panel-premium .install-step .install-import-actions a[data-import-link]:focus-visible::after,
.install-panel-premium .install-step .install-import-actions button:focus-visible::after {
  animation: cdnrelayCtaSheenFix44 720ms ease forwards !important;
}

@media (max-width: 860px) {
  .install-panel-premium .install-panel-head {
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 0 !important;
  }

  .install-panel-title > small[data-install-subtitle] {
    height: auto !important;
    min-height: 18px !important;
    white-space: normal !important;
  }

  .install-panel-premium .install-steps {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .install-panel-premium .install-steps .install-step,
  .install-panel-premium .install-steps .install-step:nth-child(1),
  .install-panel-premium .install-steps .install-step:nth-child(2) {
    height: 158px !important;
    min-height: 158px !important;
    max-height: none !important;
  }

  .install-panel-premium .install-step small,
  .install-panel-premium .install-step [data-import-note] {
    font-size: 11.5px !important;
  }
}

/* CDNRELAY_INSTALL_UI_FIX45: override older high-specificity CTA rules that shrink links to text width. */
.install-panel-premium.install-panel-premium .install-panel-title-row b[data-install-title][data-install-title] {
  height: 32px !important;
  max-height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  align-items: center !important;
  line-height: 1 !important;
}

.install-panel-premium.install-panel-premium .install-panel-title-row .install-title-step-badge,
.install-panel-premium.install-panel-premium .install-panel-title-row .install-title-os-icon {
  position: static !important;
  margin: 0 !important;
  transform: none !important;
  flex: 0 0 auto !important;
}

.install-panel-premium.install-panel-premium .install-step.install-step .install-download-actions.install-download-actions,
.install-panel-premium.install-panel-premium .install-step.install-step .install-import-actions.install-import-actions {
  grid-column: 1 / -1 !important;
  justify-self: stretch !important;
  align-self: end !important;
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  grid-template-columns: minmax(0, 1fr) !important;
}

.install-panel-premium.install-panel-premium .install-step.install-step .install-download-actions.install-download-actions:not(:has(a:not([hidden]) ~ a:not([hidden]))) > a[data-download-link][data-download-link]:not([hidden]),
.install-panel-premium.install-panel-premium .install-step.install-step .install-download-actions.install-download-actions > a[data-download-link][data-download-link]:not([hidden]),
.install-panel-premium.install-panel-premium .install-step.install-step .install-download-actions.install-download-actions > a[data-alt-download-link][data-alt-download-link]:not([hidden]),
.install-panel-premium.install-panel-premium .install-step.install-step .install-download-actions.install-download-actions > button:not([hidden]),
.install-panel-premium.install-panel-premium .install-step.install-step .install-import-actions.install-import-actions > a[data-import-link][data-import-link]:not([hidden]),
.install-panel-premium.install-panel-premium .install-step.install-step .install-import-actions.install-import-actions > button:not([hidden]) {
  justify-self: stretch !important;
  display: inline-flex !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  padding: 0 22px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  border: 1px solid rgba(117, 242, 199, 0.54) !important;
  border-radius: 14px !important;
  background:
    radial-gradient(160px 84px at 8% 6%, rgba(117, 242, 199, 0.22), transparent 62%),
    linear-gradient(135deg, rgba(32, 91, 82, 0.90), rgba(20, 28, 55, 0.94)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  color: #f8fbff !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  overflow: hidden !important;
  text-align: center !important;
  transform: none !important;
}

.install-panel-premium.install-panel-premium .install-step.install-step:hover .install-download-actions.install-download-actions > a[data-download-link][data-download-link]:not([hidden]),
.install-panel-premium.install-panel-premium .install-step.install-step:hover .install-download-actions.install-download-actions > a[data-alt-download-link][data-alt-download-link]:not([hidden]),
.install-panel-premium.install-panel-premium .install-step.install-step:hover .install-download-actions.install-download-actions > button:not([hidden]),
.install-panel-premium.install-panel-premium .install-step.install-step:hover .install-import-actions.install-import-actions > a[data-import-link][data-import-link]:not([hidden]),
.install-panel-premium.install-panel-premium .install-step.install-step:hover .install-import-actions.install-import-actions > button:not([hidden]),
.install-panel-premium.install-panel-premium .install-step.install-step .install-download-actions.install-download-actions > a[data-download-link][data-download-link]:not([hidden]):hover,
.install-panel-premium.install-panel-premium .install-step.install-step .install-download-actions.install-download-actions > a[data-alt-download-link][data-alt-download-link]:not([hidden]):hover,
.install-panel-premium.install-panel-premium .install-step.install-step .install-download-actions.install-download-actions > button:not([hidden]):hover,
.install-panel-premium.install-panel-premium .install-step.install-step .install-import-actions.install-import-actions > a[data-import-link][data-import-link]:not([hidden]):hover,
.install-panel-premium.install-panel-premium .install-step.install-step .install-import-actions.install-import-actions > button:not([hidden]):hover {
  border-color: rgba(117, 242, 199, 0.78) !important;
  background:
    radial-gradient(180px 90px at 10% 6%, rgba(117, 242, 199, 0.34), transparent 62%),
    linear-gradient(135deg, rgba(38, 116, 101, 0.96), rgba(22, 31, 58, 0.98)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13), 0 12px 30px rgba(30, 214, 170, 0.16) !important;
  filter: saturate(1.08) !important;
  transform: none !important;
}

.install-panel-premium.install-panel-premium .install-step.install-step:hover .install-download-actions.install-download-actions > a[data-download-link][data-download-link]:not([hidden])::after,
.install-panel-premium.install-panel-premium .install-step.install-step:hover .install-download-actions.install-download-actions > a[data-alt-download-link][data-alt-download-link]:not([hidden])::after,
.install-panel-premium.install-panel-premium .install-step.install-step:hover .install-download-actions.install-download-actions > button:not([hidden])::after,
.install-panel-premium.install-panel-premium .install-step.install-step:hover .install-import-actions.install-import-actions > a[data-import-link][data-import-link]:not([hidden])::after,
.install-panel-premium.install-panel-premium .install-step.install-step:hover .install-import-actions.install-import-actions > button:not([hidden])::after,
.install-panel-premium.install-panel-premium .install-step.install-step .install-download-actions.install-download-actions > a[data-download-link][data-download-link]:not([hidden]):hover::after,
.install-panel-premium.install-panel-premium .install-step.install-step .install-download-actions.install-download-actions > a[data-alt-download-link][data-alt-download-link]:not([hidden]):hover::after,
.install-panel-premium.install-panel-premium .install-step.install-step .install-download-actions.install-download-actions > button:not([hidden]):hover::after,
.install-panel-premium.install-panel-premium .install-step.install-step .install-import-actions.install-import-actions > a[data-import-link][data-import-link]:not([hidden]):hover::after,
.install-panel-premium.install-panel-premium .install-step.install-step .install-import-actions.install-import-actions > button:not([hidden]):hover::after {
  animation: cdnrelayCtaSheenFix44 720ms ease forwards !important;
}

/* CDNRELAY_INSTALL_UI_FIX46: force step cards out of the legacy icon/text grid. */
.install-panel-premium.install-panel-premium .install-steps.install-steps > article.install-step.install-step,
.install-panel-premium.install-panel-premium .install-steps.install-steps > article.install-step.install-step:nth-child(1),
.install-panel-premium.install-panel-premium .install-steps.install-steps > article.install-step.install-step:nth-child(2) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 54px 56px !important;
  grid-auto-columns: auto !important;
  grid-auto-rows: auto !important;
  gap: 14px !important;
  height: 160px !important;
  min-height: 160px !important;
  max-height: 160px !important;
  padding: 18px !important;
  align-items: stretch !important;
  justify-items: stretch !important;
}

.install-panel-premium.install-panel-premium .install-steps.install-steps > article.install-step.install-step > span {
  display: none !important;
  grid-column: 1 / -1 !important;
}

.install-panel-premium.install-panel-premium .install-steps.install-steps > article.install-step.install-step > div:first-of-type,
.install-panel-premium.install-panel-premium .install-steps.install-steps > article.install-step.install-step > .install-download-actions.install-download-actions,
.install-panel-premium.install-panel-premium .install-steps.install-steps > article.install-step.install-step > .install-import-actions.install-import-actions {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  justify-self: stretch !important;
}

.install-panel-premium.install-panel-premium .install-steps.install-steps > article.install-step.install-step > .install-download-actions.install-download-actions,
.install-panel-premium.install-panel-premium .install-steps.install-steps > article.install-step.install-step > .install-import-actions.install-import-actions {
  grid-row: 2 !important;
}

.install-panel-premium.install-panel-premium .install-steps.install-steps > article.install-step.install-step > div:first-of-type {
  grid-row: 1 !important;
}

.install-panel-premium.install-panel-premium .install-steps.install-steps > article.install-step.install-step > .install-download-actions.install-download-actions > a[data-download-link][data-download-link]:not([hidden]),
.install-panel-premium.install-panel-premium .install-steps.install-steps > article.install-step.install-step > .install-download-actions.install-download-actions > a[data-alt-download-link][data-alt-download-link]:not([hidden]),
.install-panel-premium.install-panel-premium .install-steps.install-steps > article.install-step.install-step > .install-download-actions.install-download-actions > button:not([hidden]),
.install-panel-premium.install-panel-premium .install-steps.install-steps > article.install-step.install-step > .install-import-actions.install-import-actions > a[data-import-link][data-import-link]:not([hidden]),
.install-panel-premium.install-panel-premium .install-steps.install-steps > article.install-step.install-step > .install-import-actions.install-import-actions > button:not([hidden]) {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
}