/* SNSPING cabinet "neo" retrowave skin v1 (2026-10-28) — loaded AFTER /_neon/neon.css, same palette as the sub page neo skin.
   Compatibility rules as in neon.css: no backdrop-filter, no mask-image; animations use transform/opacity only.
   Rollback = stop injecting the <link> (nginx map $cabinet_neo). */

:root, .dark { --x-mag:#f003b3; --x-vio:#4b13f9; --x-cyan:#01a9f9; --x-blue:#192ff1; --x-sun:#fca14f; }
.dark {
    --bg:#07021a; --bg-tint:#0d0430;
    --surface:rgba(12,5,36,.86); --surface-2:rgba(75,19,249,.18); --surface-3:rgba(240,3,179,.22);
    --hairline:rgba(240,3,179,.30); --hairline-strong:rgba(240,3,179,.60);
    --text-3:rgba(201,182,242,.85); --text-4:rgba(201,182,242,.6);
    --accent:#f003b3;
    --glass:rgba(12,5,36,.86); --glass-border:rgba(240,3,179,.55);
    --modal-surface:#100632; --modal-surface-2:#1a0a48; --modal-border:rgba(1,169,249,.45);
    --n-sky:linear-gradient(180deg,#05010f 0%,#0b0426 34%,#1d0750 60%,#5a0b6e 80%,#b0127a 92%,#fc6a4f 100%);
    --n-blob1:#f003b3; --n-blob2:#4b13f9; --n-blobop:.45;
    --n-link:#6fd3ff; --x-label:#45c8ff; --x-scene-op:.9;
    --shadow-md:0 10px 28px rgba(0,0,0,.4),0 0 24px rgba(240,3,179,.22),inset 0 1px 0 rgba(1,169,249,.35);
    --shadow-lg:0 22px 56px rgba(0,0,0,.5),0 0 34px rgba(240,3,179,.26),0 0 60px rgba(75,19,249,.16);
    --color-brand-300:#7fdcff; --color-brand-400:#ff4fcf; --color-brand-500:#f003b3; --color-brand-600:#d6009e; --color-brand-700:#9e0a8a;
}
:root:not(.dark) {
    --bg:#fff3f9; --surface:rgba(255,255,255,.93); --surface-2:rgba(75,19,249,.06); --surface-3:rgba(240,3,179,.10);
    --hairline:rgba(240,3,179,.22); --hairline-strong:rgba(240,3,179,.42);
    --accent:#d6009e; --glass-border:rgba(240,3,179,.34);
    --n-sky:linear-gradient(180deg,#fff7fb 0%,#fbe6ff 40%,#e7e4ff 70%,#ffd6c4 100%);
    --n-link:#0b7fc4; --x-label:#0b7fc4; --x-scene-op:.35;
    --color-brand-500:#d6009e; --color-brand-600:#b8008a;
}

/* ---------- scene: synth sun, city, palms, grid (fixed, behind everything) ---------- */
body::after {
    content:""; position:fixed; left:0; right:0; bottom:0; height:60vh; min-height:320px; z-index:-1; pointer-events:none;
    background:url(/_neon/neo/scene.svg?v=1) center bottom / auto 100% no-repeat; opacity:var(--x-scene-op);
}
@media (max-width:640px){ body::after{ height:44vh; min-height:260px; } }

/* ---------- glass cards with a neon edge ---------- */
.card, .cab-pass, .cab-invite, .glass-pill, .app-header-pill {
    background-image:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0) 40%) !important;
}
.dark .card, .dark .cab-pass, .dark .cab-invite {
    border:1px solid var(--hairline-strong) !important;
    box-shadow:inset 0 1px 0 rgba(1,169,249,.42),0 0 0 1px rgba(75,19,249,.10),0 0 26px rgba(240,3,179,.20),0 16px 36px rgba(0,0,0,.3) !important;
}
.dark .glass-pill, .dark .app-header-pill { box-shadow:inset 0 1px 0 rgba(1,169,249,.4),0 0 22px rgba(240,3,179,.3) !important; }

/* headings: white -> magenta -> cyan */
h1, h2 { background:linear-gradient(90deg,var(--text) 0%,var(--text) 35%,var(--x-mag) 75%,var(--x-cyan) 100%);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
#hero-word { background-image:linear-gradient(90deg,#ffffff 0%,var(--x-mag) 55%,var(--x-sun) 100%) !important; }
:root:not(.dark) #hero-word { background-image:linear-gradient(90deg,#b8008a 0%,var(--x-mag) 50%,var(--x-vio) 100%) !important; }
.uppercase.tracking-widest { color:var(--x-label) !important; }
.dark .uppercase.tracking-widest { text-shadow:0 0 10px rgba(1,169,249,.45); }

/* ---------- logo: our rocket with a spinning neon ring (landing hero) ---------- */
#main-content > section:first-of-type h1::before {
    box-shadow:0 0 0 3px var(--bg),0 0 0 6px var(--x-mag),0 0 0 8px var(--x-cyan),0 0 34px rgba(240,3,179,.6),0 0 70px rgba(75,19,249,.4) !important;
}
#app-nav nav > a[href="/"]::before { box-shadow:0 0 0 1.5px var(--x-mag),0 0 0 3px rgba(1,169,249,.6),0 0 12px rgba(240,3,179,.6) !important; }

/* ---------- buttons ---------- */
.btn-primary { background:linear-gradient(135deg,var(--x-mag) 0%,#a10bd6 55%,var(--x-vio) 100%) !important;
    box-shadow:0 0 22px rgba(240,3,179,.5),0 6px 18px rgba(75,19,249,.4) !important; }
.btn-autoadd::before { background:conic-gradient(from 0deg,var(--x-mag) 0 12%,var(--x-sun) 22%,var(--x-cyan) 34%,var(--x-vio) 48%,var(--x-mag) 62%,transparent 63% 100%) !important; }
.btn-autoadd::after { background:radial-gradient(120% 140% at 50% 0%,#2a0d6e,#0b0326) !important; }
a[href*="oauth.telegram"], a[href="/auth/telegram"] { box-shadow:0 0 22px rgba(1,169,249,.45) !important; }

/* ---------- cabinet tabs, picks, bars ---------- */
.cabinet-mobile-tab.active, .dark .cabinet-mobile-tab.active, #cab-tab-connect.active, .dark #cab-tab-connect.active {
    background:linear-gradient(135deg,var(--x-mag),#a10bd6 60%,var(--x-vio)) !important; box-shadow:0 0 18px rgba(240,3,179,.5),inset 0 1px 0 rgba(255,255,255,.25) !important; }
.cabinet-mobile-tab svg, #cab-tab-connect:not(.active) { color:var(--x-cyan) !important; }
.tariff-pick.is-selected, .dark .tariff-pick.is-selected { border-color:var(--x-mag) !important; box-shadow:0 0 0 1px var(--x-mag),0 0 18px rgba(240,3,179,.4) !important; }
.tariff-pick { transition:transform .15s, box-shadow .2s; }
.tariff-pick:active { transform:scale(.98); }
.app-client-card.active, .app-platform-card.active, .dark .app-client-card.active, .dark .app-platform-card.active {
    border-color:var(--x-mag) !important; box-shadow:0 0 0 1px var(--x-mag),0 0 18px rgba(240,3,179,.45),inset 0 0 18px rgba(240,3,179,.16) !important; }
.app-dl-btn:hover, .dark .app-dl-btn:hover { border-color:var(--x-cyan) !important; box-shadow:0 0 16px rgba(1,169,249,.35) !important; }
.traffic-bar-green { background:linear-gradient(90deg,var(--x-cyan),var(--x-vio) 50%,var(--x-mag)) !important; box-shadow:0 0 12px rgba(1,169,249,.55),0 0 18px rgba(240,3,179,.4) !important; }
.lim-conn-badge.ok, .cab-pass-status { box-shadow:0 0 12px rgba(45,246,201,.25); }
input[type="email"], input[type="text"], input[type="tel"] { border-color:var(--hairline-strong) !important; }
input:focus { border-color:var(--x-cyan) !important; box-shadow:0 0 0 3px rgba(1,169,249,.25) !important; }

@media (prefers-reduced-motion: reduce){ body::after{ animation:none !important; } }