/* SNSPING neon theme for the cabinet — same look as the subscription page (aurora, Russo One, neon buttons).
   Overlay on top of style.css/app.css/index.css/cabinet.css; changes colours via the site's own design tokens.
   Compatibility-first: no backdrop-filter, no mask-image, no 3D transforms; animations use transform/background-position only. */

@font-face{font-family:"SNS Russo";font-display:swap;src:url(/_neon/fonts/RussoOne-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"SNS Russo";font-display:swap;src:url(/_neon/fonts/RussoOne-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root, .dark {
    --n-font: "SNS Russo","Russo One",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

/* ---------- DARK ---------- */
.dark {
    --bg:#0d0221; --bg-tint:#14033a;
    --surface:rgba(24,6,54,.86); --surface-2:rgba(124,58,237,.22); --surface-3:rgba(168,85,247,.3);
    --hairline:rgba(255,46,151,.3); --hairline-strong:rgba(255,46,151,.55);
    --text:#ffffff; --text-2:rgba(255,255,255,.8); --text-3:rgba(226,194,251,.78); --text-4:rgba(226,194,251,.55);
    --accent:#ff2e97; --accent-fg:#ffffff;
    --shadow-sm:0 2px 8px rgba(0,0,0,.35); --shadow-md:0 10px 28px rgba(0,0,0,.4), 0 0 22px rgba(255,46,151,.18); --shadow-lg:0 22px 56px rgba(0,0,0,.5), 0 0 30px rgba(255,46,151,.22);
    --glass:rgba(24,6,54,.82); --glass-border:rgba(255,46,151,.5);
    --modal-surface:#1a0a3a; --modal-surface-2:#26104f; --modal-border:rgba(255,46,151,.45); --modal-scrim:rgba(8,2,20,.72);
    --n-sky:linear-gradient(180deg,#0d0221 0%,#1c0644 30%,#4a0e72 58%,#b01c80 82%,#ff5a7a 94%,#ff9a3c 100%);
    --n-blob1:#ff2e97; --n-blob2:#7c3aed; --n-blobop:.85;
    --n-mint:#2df6c9; --n-link:#ff9bd6;
}
/* ---------- LIGHT ---------- */
:root:not(.dark) {
    --bg:#fff4ec; --bg-tint:#ffeaf4;
    --surface:rgba(255,255,255,.92); --surface-2:rgba(255,46,151,.08); --surface-3:rgba(124,58,237,.14);
    --hairline:rgba(230,25,127,.24); --hairline-strong:rgba(230,25,127,.45);
    --text:#2a1245; --text-2:rgba(42,18,69,.8); --text-3:rgba(42,18,69,.62); --text-4:rgba(42,18,69,.45);
    --accent:#e6197f; --accent-fg:#ffffff;
    --shadow-sm:0 2px 8px rgba(120,40,120,.12); --shadow-md:0 10px 28px rgba(120,40,120,.16), 0 0 20px rgba(230,25,127,.12); --shadow-lg:0 22px 56px rgba(120,40,120,.2), 0 0 28px rgba(230,25,127,.16);
    --glass:rgba(255,255,255,.88); --glass-border:rgba(230,25,127,.38);
    --modal-surface:#fff8fb; --modal-surface-2:#ffeaf4; --modal-border:rgba(230,25,127,.35); --modal-scrim:rgba(60,20,80,.45);
    --n-sky:linear-gradient(180deg,#fff8f1 0%,#ffe6f2 38%,#f0e3ff 72%,#ffd9bd 100%);
    --n-blob1:#ff6aa6; --n-blob2:#a78bfa; --n-blobop:.55;
    --n-mint:#0aa88a; --n-link:#c4146b;
}

/* ---------- scene: sky + two aurora blobs on fixed layers BEHIND the page ---------- */
html { background: var(--bg) !important; }
body, .bg-canvas { background: transparent !important; }
html::before {
    content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: var(--n-sky);
}
html::after {
    content: ""; position: fixed; z-index: -1; pointer-events: none; border-radius: 50%;
    width: 640px; height: 640px; left: -220px; top: -90px;
    background: radial-gradient(circle, var(--n-blob1) 0, transparent 68%);
    opacity: var(--n-blobop); animation: snsA 12s ease-in-out infinite alternate;
}
body::before {
    content: ""; position: fixed; z-index: -1; pointer-events: none; border-radius: 50%;
    width: 660px; height: 660px; right: -250px; bottom: 40px;
    background: radial-gradient(circle, var(--n-blob2) 0, transparent 68%);
    opacity: var(--n-blobop); animation: snsB 15s ease-in-out infinite alternate;
}
@keyframes snsA { to { transform: translate(160px, 360px) scale(1.2); } }
@keyframes snsB { to { transform: translate(-180px, -300px) scale(1.25); } }
/* the landing hero paints its own backgrounds: let the shared scene show through */
main section > div[aria-hidden="true"], .phone-glow { display: none !important; }

/* ---------- display font ---------- */
h1, h2, h3, .btn-primary, .app-header-pill a:first-child { font-family: var(--n-font) !important; font-weight: 400 !important; letter-spacing: .01em; }

/* ---------- header pill, cards ---------- */
.glass-pill, .app-header-pill { background: var(--glass) !important; border: 1px solid var(--glass-border) !important; box-shadow: var(--shadow-md) !important; }

/* ---------- buttons ---------- */
.btn-primary {
    position: relative; overflow: hidden; isolation: isolate; color: #fff !important; border: 0 !important;
    background: linear-gradient(135deg, #ff2e97 0%, #c026d3 55%, #6d28d9 100%) !important;
    box-shadow: 0 0 20px rgba(255,46,151,.5), 0 6px 18px rgba(109,40,217,.35) !important;
    text-shadow: 0 0 10px rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: .03em;
    transition: transform .12s, filter .15s;
}
.btn-primary::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-20deg);
    animation: snsSweep 4s ease-in-out infinite; z-index: 1; pointer-events: none;
}
@keyframes snsSweep { 0%, 60% { left: -60%; } 100% { left: 130%; } }
.btn-primary:hover { filter: brightness(1.1); }
.btn-primary:active { transform: scale(.97); }

/* ---------- links / accents that were blue-indigo ---------- */
a:not(.btn):not([class*="text-"]) { color: var(--n-link); }
.text-indigo-400, .text-indigo-500, .text-violet-400, .text-blue-400, .text-blue-500 { color: var(--n-link) !important; }
.bg-emerald-500 { background-color: var(--n-mint) !important; }
.text-emerald-400, .text-emerald-300, .text-green-400 { color: var(--n-mint) !important; }
::selection { background: rgba(255,46,151,.6); color: #fff; }

/* ---------- performance / compatibility ---------- */
*, *::before, *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
@media (prefers-reduced-motion: reduce) {
    html::after, body::before, .btn-primary::after { animation: none !important; }
}

/* ---------- hero rotating word (JS sets an indigo inline gradient) ---------- */
#hero-word { background-image: linear-gradient(90deg, #ffffff 0%, #ff9bd6 45%, #ffd36b 100%) !important; }
:root:not(.dark) #hero-word { background-image: linear-gradient(90deg, #c4146b 0%, #e6197f 50%, #8b3df0 100%) !important; }
.dark { --n-blobop: .7; }

/* ---------- readability polish ---------- */
.dark ::placeholder { color: rgba(255,255,255,.62) !important; }
:root:not(.dark) ::placeholder { color: rgba(42,18,69,.5) !important; }
.dark footer, .dark footer a { color: #fff !important; text-shadow: 0 1px 6px rgba(0,0,0,.45); }

/* ======== cabinet inner pages: recolour green/brand parts to the neon palette ======== */
:root, .dark {
    --color-brand-300:#ff86c2; --color-brand-400:#ff55a9; --color-brand-500:#ff2e97; --color-brand-600:#e6197f; --color-brand-700:#b30f63;
}
.cabinet-tabs-wrap { background-image: none !important; }
.cabinet-mobile-tab { font-family: var(--n-font); font-weight: 400; color: var(--text-3) !important; }
.cabinet-mobile-tab:hover { background: var(--surface-2) !important; color: var(--text) !important; }
.cabinet-mobile-tab.active, .dark .cabinet-mobile-tab.active {
    background: linear-gradient(135deg, #ff2e97, #c026d3 60%, #6d28d9) !important; color: #fff !important;
    box-shadow: 0 0 18px rgba(255,46,151,.5) !important;
}
/* active selections: green -> pink */
.app-client-card.active, .app-platform-card.active, .dark .app-client-card.active, .dark .app-platform-card.active {
    background: var(--surface-2) !important; border-color: var(--accent) !important; box-shadow: 0 0 18px rgba(255,46,151,.4) !important;
}
.app-client-card.active .app-client-icon-wrap, .app-platform-card.active .app-platform-icon-wrap,
.dark .app-platform-card.active .app-platform-icon-wrap { background: rgba(255,46,151,.2) !important; box-shadow: 0 0 0 5px rgba(255,46,151,.08) !important; }
.app-platform-card.active:after { color: var(--n-link) !important; }
.app-dl-btn:hover, .dark .app-dl-btn:hover { background: var(--surface-2) !important; border-color: var(--accent) !important; }
.tariff-pick.is-selected, .dark .tariff-pick.is-selected { border-color: var(--accent) !important; background: var(--surface-2) !important; box-shadow: 0 0 16px rgba(255,46,151,.3) !important; }
.add-device-button, .dark .add-device-button { background: var(--surface-2) !important; border-color: var(--hairline-strong) !important; box-shadow: 0 8px 22px rgba(255,46,151,.12) !important; }
.add-device-button > span:first-child > span:first-child, .dark .add-device-button > span:first-child > span:first-child { background: rgba(255,46,151,.2) !important; color: var(--n-link) !important; }
.cab-pass, .dark .cab-pass { border-color: var(--hairline-strong) !important; background: var(--surface) !important; }
.cab-pass-status, .dark .cab-pass-status { color: var(--n-mint) !important; background: color-mix(in srgb, var(--n-mint) 16%, transparent) !important; border-color: transparent !important; }
.cab-invite.is-partner, .dark .cab-invite.is-partner { background: var(--surface-2) !important; border-color: var(--hairline-strong) !important; box-shadow: 0 10px 26px rgba(255,46,151,.2) !important; }
#cab-tab-connect.active, .dark #cab-tab-connect.active { background: linear-gradient(135deg, #ff2e97, #c026d3 60%, #6d28d9) !important; color: #fff !important; box-shadow: 0 0 18px rgba(255,46,151,.5) !important; }
#cab-tab-connect:not(.active), .dark #cab-tab-connect:not(.active) { background: rgba(255,46,151,.14) !important; color: var(--n-link) !important; box-shadow: inset 0 0 0 1px rgba(255,46,151,.35) !important; }
.lim-conn-badge.ok { background: color-mix(in srgb, var(--n-mint) 14%, transparent) !important; color: var(--n-mint) !important; }
.traffic-bar-green { background: linear-gradient(90deg, #2df6c9, #d946ef 55%, #ff2e97) !important; box-shadow: 0 0 12px rgba(255,46,151,.5); }

/* the big "auto-add" button: same chunky running-light style as on the subscription page */
.btn-autoadd, .dark .btn-autoadd {
    position: relative !important; overflow: hidden !important; isolation: isolate;
    font-family: var(--n-font) !important; font-weight: 400 !important; text-transform: uppercase; letter-spacing: .03em;
    color: #fff !important; background: transparent !important; border: 0 !important; border-radius: 18px !important;
    text-shadow: 0 0 14px rgba(255,255,255,.65), 0 2px 0 rgba(0,0,0,.5);
    box-shadow: 0 7px 0 #7a0f55, 0 12px 26px rgba(255,46,151,.45) !important; margin-bottom: 8px;
    transition: transform .08s, box-shadow .08s;
}
.btn-autoadd::before { content: ""; position: absolute; left: 50%; top: 50%; width: 300%; aspect-ratio: 1; margin: -150% 0 0 -150%;
    background: conic-gradient(from 0deg, #ff2e97 0 12%, #ffd36b 22%, #2df6c9 34%, #a855f7 48%, #ff2e97 62%, transparent 63% 100%);
    animation: snsSpin 2.6s linear infinite; z-index: -2; }
.btn-autoadd::after { content: ""; position: absolute; inset: 4px; border-radius: 14px; background: radial-gradient(120% 140% at 50% 0%, #3a0b6e, #14032e); z-index: -1; }
.btn-autoadd:active { transform: translateY(6px); box-shadow: 0 1px 0 #7a0f55, 0 4px 12px rgba(255,46,151,.4) !important; }
@keyframes snsSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn-autoadd::before { animation: none !important; } }

/* leftovers of emerald tailwind utilities (blocks, borders, icons) */
[class*="bg-emerald-500/"], [class*="bg-emerald-400/"], [class*="bg-emerald-950/"] { background-color: rgba(255,46,151,.12) !important; }
[class*="border-emerald-"] { border-color: var(--hairline-strong) !important; }
[class*="text-emerald-"] { color: var(--n-link) !important; }
.cabinet-mobile-tab svg { color: var(--n-link) !important; stroke: currentColor; }
.cabinet-mobile-tab.active svg, .dark .cabinet-mobile-tab.active svg { color: #fff !important; }
[class*="from-emerald"], [class*="to-emerald"] { --tw-gradient-from: rgba(255,46,151,.2) !important; --tw-gradient-to: rgba(124,58,237,.15) !important; }

/* "extend device limit" action (was emerald) */
.cab-pay-action-up, .dark .cab-pay-action-up { background: rgba(255,46,151,.12) !important; border-color: var(--hairline-strong) !important; }
.cab-pay-action-up:hover, .dark .cab-pay-action-up:hover { background: rgba(255,46,151,.2) !important; border-color: var(--accent) !important; }
.cab-pay-action-up .cab-pay-action-ico, .dark .cab-pay-action-up .cab-pay-action-ico { color: var(--n-link) !important; background: rgba(255,46,151,.2) !important; border-color: var(--hairline-strong) !important; }
.cab-pay-action-up .cab-pay-action-chevron, .dark .cab-pay-action-up .cab-pay-action-chevron { color: var(--n-link) !important; }

/* ---------- logo (same round SNSPING mark as on the subscription page) ---------- */
#app-nav nav > a[href="/"] { display: inline-flex; align-items: center; gap: 8px; }
#app-nav nav > a[href="/"]::before {
    content: ""; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
    background: url(/_neon/img/logo-96.webp?v=3) center / cover no-repeat;
    box-shadow: 0 0 0 1.5px var(--accent), 0 0 12px rgba(255,46,151,.55);
}
#main-content > section:first-of-type h1::before {
    content: ""; display: block; width: 112px; height: 112px; border-radius: 50%; margin: 0 0 22px;
    background: url(/_neon/img/logo-256.webp?v=3) center / cover no-repeat;
    box-shadow: 0 0 0 2px var(--accent), 0 0 28px rgba(255,46,151,.55), 0 0 60px rgba(124,58,237,.35);
    animation: snsFloatLogo 5s ease-in-out infinite;
}
@keyframes snsFloatLogo { 50% { transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) { #main-content > section:first-of-type h1::before { animation: none; } }
/* sns-logo-left: on wide screens the hero text is left-aligned, so is the logo */
@media (min-width: 640px) { #main-content > section:first-of-type h1::before { margin-left: 0; } }

/* sns-404: black/white pill buttons and the big 404 on error pages -> neon */
#main-content a[class*="bg-black"][class*="rounded-full"]:not([class*="hover:bg-black"]), #main-content button[class*="bg-black"][class*="rounded-full"]:not([class*="hover:bg-black"]) {
    background: linear-gradient(135deg, #ff2e97 0%, #c026d3 55%, #6d28d9 100%) !important; color: #fff !important;
    border: 1px solid rgba(255,255,255,.28); font-family: var(--n-font); font-weight: 400 !important; text-transform: uppercase; letter-spacing: .03em;
    box-shadow: 0 0 20px rgba(255,46,151,.5), 0 5px 0 #7a0f55; opacity: 1 !important;
}
#main-content a[class*="bg-black"][class*="rounded-full"]:active { transform: translateY(4px); box-shadow: 0 0 12px rgba(255,46,151,.4), 0 1px 0 #7a0f55; }
#main-content p[class*="text-[88px]"] {
    color: transparent !important; background: linear-gradient(90deg, #ffffff, #ff9bd6 50%, #ff2e97); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; opacity: .35; filter: drop-shadow(0 0 18px rgba(255,46,151,.5)); font-family: var(--n-font);
}
#main-content button[class*="border"][class*="rounded-full"] { border-color: var(--hairline-strong) !important; color: var(--text) !important; }
#main-content button[class*="hover:bg-black"] { background: transparent !important; color: var(--text) !important; border: 1px solid var(--hairline-strong) !important; box-shadow: none; text-transform: none; }