html[data-theme] { --v3-glass:color-mix(in srgb,var(--panel) 58%,transparent); }


html[data-theme][data-appearance] body :is(.access-hub,.panel,.profile-list,.menu-list,.quick-connect) {
  background:var(--v3-glass); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
  --muted:#615b56;
}
html[data-theme][data-appearance="dark"] body :is(.access-hub,.panel,.profile-list,.menu-list,.quick-connect) { --muted:#d2c5ae; }
html[data-theme] body .shell { isolation:isolate; position:relative; }
.connect-flow > .stack > .menu-list:empty { display:none; }
.shell { min-height:100dvh; }
html[data-telegram-fullscreen="true"] body .shell,
html[data-telegram-fullscreen="pending"] body .shell { padding-top:var(--babylon-tg-top,140px); }
.app-backdrop { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; z-index:0; pointer-events:none; opacity:.82; transition:filter .35s,opacity .35s; }
@media(max-width:700px) {
  .app-backdrop { position:fixed; width:100vw; height:100dvh; }
  .shell:has(.rewards-rules) { padding-bottom:100px; }
}


html[data-theme] .app-backdrop {
  -webkit-mask-image:radial-gradient(ellipse 145px 46px at 120px calc(30px + env(safe-area-inset-top,0px)),rgba(0,0,0,.62) 0%,rgba(0,0,0,.62) 60%,#000 100%);
  mask-image:radial-gradient(ellipse 145px 46px at 120px calc(30px + env(safe-area-inset-top,0px)),rgba(0,0,0,.62) 0%,rgba(0,0,0,.62) 60%,#000 100%);
}
html[data-appearance="dark"] .app-backdrop { filter:brightness(.3) saturate(.55) contrast(1.08); opacity:.85; }
html[data-theme] body .topbar { position:relative; z-index:2; height:64px; background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; }
html[data-theme] body .topbar :is(.brand,.brand-mark,.wordmark) { background:transparent; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; }
html[data-theme] body .topbar .brand-mark,html[data-theme] body .topbar .brand-mark img { width:36px; height:36px; flex-basis:36px; }
html[data-theme] body .topbar .brand .wordmark { width:164px; height:27px; }
html[data-theme] body .topbar .brand { gap:9px; }
html[data-theme] body #main { position:relative; z-index:1; }
html[data-theme] .quiet-home { gap:14px; position:relative; }
html[data-theme] .quiet-home > .product-tabs { width:100%; margin:0; }
html[data-theme] .access-hub { padding:20px; border-radius:22px; background:var(--v3-glass); backdrop-filter:blur(12px); text-align:left; box-shadow:0 8px 20px #39322609; border-top:1px solid color-mix(in srgb,var(--gold) 28%,var(--line)); }
html[data-theme] .access-top { flex-direction:row; justify-content:space-between; margin-bottom:16px; }
html[data-theme] .access-top > span:first-child { display:inline; font-size:12px; color:var(--muted); }
html[data-theme] .access-number { justify-content:flex-start; gap:12px; }
html[data-theme] .access-number > strong { font-size:64px; letter-spacing:-4px; color:var(--ink); font-weight:450; }
html[data-theme] .access-number > span { max-width:none; font-size:14px; color:var(--muted); }

html[data-theme] .access-number.unknown > span { font-size:22px; color:var(--ink); line-height:1.3; }
html[data-theme] .access-detail { margin:10px 0 20px; color:var(--muted); line-height:1.6; }
html[data-theme] .hub-stats { padding:16px 0; border-color:var(--line); }
html[data-theme] .hub-stats > * { align-items:flex-start; padding:0 14px; }
html[data-theme] .hub-stats > :first-child { padding-left:0; }
html[data-theme] .hub-stats strong { font-size:25px; color:var(--ink); }
html[data-theme] .hub-stats span { color:var(--muted); }
html[data-theme] .access-actions { gap:6px; margin-top:18px; }
html[data-theme] .access-note { margin:8px 0 0; text-align:center; color:var(--muted); }
.quick-connect { display:grid; background:var(--v3-glass); border:1px solid var(--line); border-radius:24px; overflow:hidden; backdrop-filter:blur(18px); }
.quick-connect a { display:flex; align-items:center; gap:12px; padding:13px 16px; min-height:68px; color:var(--ink); transition:background .2s,transform .2s; }
.quick-connect a+a { border-top:1px solid var(--line); }
.quick-connect a:active { transform:scale(.98); background:var(--accent); }
.quick-connect strong { display:block; font-size:14px; font-weight:550; }
.quick-connect small { display:block; margin-top:5px; font-size:11px; color:var(--muted); }
.quick-icon { display:grid; place-items:center; width:38px; height:38px; border-radius:12px; background:color-mix(in srgb,var(--gold) 18%,var(--panel)); color:var(--gold); flex-shrink:0; }
.quick-icon svg { width:20px; height:20px; }
html[data-theme] :is(.panel,.profile-list,.menu-list) { background:var(--v3-glass); backdrop-filter:blur(18px); border-color:var(--line); }
html[data-theme] .plan-builder { padding:22px 18px; }
html[data-theme] .builder-head { margin:12px 2px 22px; }
html[data-theme] .builder-head h1 { font-size:28px; }
html[data-theme] .subscription-status { padding:18px; }
html[data-theme] .subscription-status .usage-bars { margin-top:14px; gap:13px; }
html[data-theme] .period-grid { gap:6px; }
html[data-theme] .period-card { min-height:104px; padding:11px 5px; align-items:center; justify-content:center; gap:7px; text-align:center; border-radius:17px; }
html[data-theme] .period-discount { display:block; font-size:10px; line-height:1.4; color:var(--gold); white-space:nowrap; }
html[data-theme] .period-duration { flex-direction:row; align-items:baseline; gap:3px; font-size:10px; }
html[data-theme] .period-duration strong { font-size:26px; letter-spacing:-1px; }
html[data-theme] .period-price { display:block; font-size:10px; font-weight:500; letter-spacing:-.2px; white-space:nowrap; color:var(--muted); }
html[data-theme] .period-card[aria-pressed="true"] { transform:translateY(-2px); box-shadow:0 7px 14px color-mix(in srgb,var(--gold) 13%,transparent); }
html[data-theme] .device-stepper { border:1px solid var(--line); border-radius:16px; padding:2px; }
html[data-theme] .device-stage .device-stepper output { font-size:27px; min-width:34px; }
html[data-theme] .quote-total { min-height:64px; align-items:center; }
html[data-theme] .quote-total .price { font-size:42px; font-weight:500; letter-spacing:-1.8px; color:var(--ink); white-space:nowrap; }
.price-digit { display:inline-grid; overflow:hidden; vertical-align:bottom; line-height:1.2; font-variant-numeric:tabular-nums; }
.price-digit-current,.price-digit-previous { grid-area:1/1; display:block; }
.price-symbol { display:inline-block; white-space:pre; }
.device-cards { display:grid; gap:12px; margin-top:20px; }
.device-card { padding:17px; border:1px solid color-mix(in srgb,var(--line) 78%,var(--gold)); border-radius:20px; background:color-mix(in srgb,var(--panel) 72%,transparent); box-shadow:0 14px 32px color-mix(in srgb,var(--ink) 7%,transparent); transition:transform .18s,border-color .2s,box-shadow .2s; }
.device-card-heading { display:flex; align-items:center; gap:12px; }
.device-card-identity { flex:1; min-width:0; }
.device-card-identity strong,.device-card-identity h3 { display:block; overflow-wrap:anywhere; font-size:14px; margin:0; }
.device-card-identity p { margin:4px 0 0; overflow-wrap:anywhere; }
.device-card-identity small,.device-card-status { display:block; font-size:11px; color:var(--muted); line-height:1.6; }
.device-card-status { display:flex; align-items:center; gap:7px; width:max-content; margin:13px 0; padding:4px 8px; border-radius:999px; background:color-mix(in srgb,var(--green) 10%,transparent); color:var(--green); line-height:1.2; }
.device-card-status > span { width:5px; height:5px; border-radius:50%; background:currentColor; box-shadow:0 0 8px currentColor; }
.device-card-status.is-suspended { background:color-mix(in srgb,#cf6b68 11%,transparent); color:#cf6b68; }
.device-card-menu {
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  min-width:46px;
  padding:0;
  border:1px solid color-mix(in srgb,var(--accent) 20%,var(--line));
  border-radius:50%;
  color:var(--ink);
  background:linear-gradient(145deg,color-mix(in srgb,var(--panel) 92%,white 8%),color-mix(in srgb,var(--accent) 8%,var(--panel)));
  box-shadow:0 9px 24px color-mix(in srgb,var(--ink) 8%,transparent),inset 0 1px 0 color-mix(in srgb,white 62%,transparent);
  -webkit-tap-highlight-color:transparent;
  transition:transform 180ms cubic-bezier(.2,.8,.2,1),box-shadow 180ms ease,border-color 180ms ease,background 180ms ease;
}
.device-card-menu:hover,.device-card-menu:focus-visible {
  border-color:color-mix(in srgb,var(--accent) 44%,var(--line));
  background:linear-gradient(145deg,color-mix(in srgb,var(--panel) 86%,white 14%),color-mix(in srgb,var(--accent) 15%,var(--panel)));
  box-shadow:0 12px 28px color-mix(in srgb,var(--accent) 16%,transparent),inset 0 1px 0 color-mix(in srgb,white 72%,transparent);
  outline:none;
  transform:translateY(-1px);
}
.device-card-menu:active { transform:scale(.94); box-shadow:0 4px 14px color-mix(in srgb,var(--ink) 10%,transparent); }
.device-menu-dots { display:flex; align-items:center; justify-content:center; gap:4px; }
.device-menu-dots > span { width:4px; height:4px; border-radius:50%; background:currentColor; opacity:.72; box-shadow:0 0 0 1px color-mix(in srgb,currentColor 8%,transparent); }
.device-card-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.device-card-actions.single { grid-template-columns:1fr; }
html[data-theme] .device-card-actions .btn { min-height:44px; font-size:12px; padding:8px; }
.device-management-actions { display:grid; gap:9px; }
.promo-saved { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 14px; border:1px solid color-mix(in srgb,var(--green) 30%,var(--line)); border-radius:14px; background:color-mix(in srgb,var(--green) 7%,transparent); }
.promo-saved strong { color:var(--green); font-size:12px; }
.promo-saved span { color:var(--muted); font-size:11px; text-align:right; }
html[data-theme] .btn.danger-outline { color:#a64b49; border-color:color-mix(in srgb,#a64b49 36%,var(--line)); background:color-mix(in srgb,#a64b49 5%,transparent); }
html[data-theme] .btn.danger-outline:hover { background:color-mix(in srgb,#a64b49 10%,transparent); box-shadow:none; }
html[data-theme] .btn.danger { color:#fff; border-color:#a64b49; background:#a64b49; }
html[data-theme] .btn.danger:hover { background:#913f3d; box-shadow:0 8px 24px color-mix(in srgb,#a64b49 24%,transparent); }
.devices-panel { overflow:hidden; }
.devices-panel > .device-cards { margin-inline:-11px; }
.devices-panel > .spaced { margin-bottom:1px; }
.setup-panel .step > div { min-width:0; width:100%; }
.setup-actions { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:8px; margin-top:12px; }
.setup-panel .setup-actions .btn { width:100%; margin-top:0; min-width:0; padding-inline:9px; }
@media (hover:hover) { .device-card:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--gold) 42%,var(--line)); box-shadow:0 17px 38px color-mix(in srgb,var(--ink) 10%,transparent); } }
.connection-link-panel { margin-top:16px; }
.connection-link-panel h2 { font-size:16px; }
.connection-link-panel p { font-size:12px; line-height:1.65; }
.connection-link-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:16px; }
html[data-theme] .connection-link-actions .btn { min-width:0; padding:10px 8px; font-size:12px; overflow-wrap:anywhere; }
.connection-link-actions > :last-child { grid-column:1 / -1; }
@media(min-width:480px) { .connection-link-actions { grid-template-columns:repeat(3,minmax(0,1fr)); } .connection-link-actions > :last-child { grid-column:auto; } }
.connection-link-device { font-size:12px; color:var(--muted); }
[hidden] { display:none !important; }
.quote-pending { opacity:.5; }
#quote-caption,#quote-benefit { color:var(--muted); font-size:12px; line-height:1.6; }
#quote-benefit { min-height:20px; color:var(--green); }
#quote-error:empty { display:none; }
html[data-theme] .navigation { backdrop-filter:blur(28px) saturate(1.25); -webkit-backdrop-filter:blur(28px) saturate(1.25); }
html[data-theme] body .navigation { padding:5px; border-radius:22px; }
html[data-theme] body .navigation a { min-height:46px; gap:3px; font-size:10px; border-radius:17px; }
html[data-theme] body .navigation svg { width:19px; height:19px; }
html[data-theme] body .nav-highlight { left:5px; top:5px; bottom:5px; width:calc((100% - 10px)/4); border-radius:17px; }
html[data-theme] .btn { border-radius:16px; min-height:50px; }
html[data-theme] .home-router { text-align:center; }
html[data-theme] .home-router .hub-stats > * { align-items:center; }
@media(max-width:350px) { html[data-theme] .access-hub { padding:20px; } html[data-theme] .plan-builder { padding:18px 12px; } html[data-theme] .period-price { font-size:9px; } html[data-theme] .quote-total .price { font-size:36px; } }
@media(max-width:700px) { html[data-theme] .devices-panel { padding-inline:17px; } .devices-panel > .device-cards { margin-inline:-11px; } }
@media(max-width:360px) { .setup-actions { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) { html[data-theme] .period-card,.quick-connect a { transition:none; } }

html[data-theme] body .page-head { margin:8px 0 18px; }
html[data-theme] body .back { min-height:44px; margin:0; padding:6px 0; }
html[data-theme] body .back + .page-head { margin:0 0 16px; }
html[data-theme] body .order-history { padding:0; overflow:hidden; }
html[data-theme] body .order-row { display:grid; grid-template-columns:20px minmax(0,1fr) auto; gap:10px; min-height:68px; padding:12px 14px; }
.order-copy { min-width:0; overflow-wrap:anywhere; }
html[data-theme] .order-row small { margin-top:4px; line-height:1.45; }
.history-amount { font-size:13px; font-weight:550; font-variant-numeric:tabular-nums; white-space:nowrap; }
.motion-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-top:16px; }
.motion-options button { min-height:48px; border:1px solid var(--line); border-radius:12px; background:transparent; color:var(--muted); font-size:11px; padding:8px 5px; transition:background .2s,border-color .2s,transform .15s; }
.motion-options button[aria-pressed="true"] { background:var(--accent); border-color:var(--gold); color:var(--accent-ink); }
.motion-options button:active { transform:scale(.97); }
.vpn-preferences .summary-row { align-items:center; margin-top:10px; }
.vpn-preferences .summary-row strong { font-size:11px; font-weight:500; text-align:right; }
.vpn-preferences details { padding:12px 0 0; }
.vpn-preferences summary { min-height:44px; display:flex; align-items:center; font-size:12px; }
.vpn-preferences details p { margin-top:12px; }
.usage-heading { flex-wrap:wrap; row-gap:3px; }
.usage-heading strong { margin-left:auto; }

@media (max-width:700px) {
  html[data-theme] body :is(input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),select,textarea) { font-size:16px; }
}