/* 507 MENU — ELECTRIC MONOCHROME DESIGN / CSS-only motion */
:root{--electric:#f6f7ff;--electric-muted:#b8bdcb;--glass:#08090df0}
body{background-color:#020204!important;background-image:radial-gradient(ellipse 75% 50% at 50% -10%,#4b4f6530,transparent 65%),radial-gradient(circle at 90% 70%,#ffffff09,transparent 38%)!important}
body:after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 74px,#ffffff05 75px 76px),repeating-linear-gradient(90deg,transparent 0 74px,#ffffff05 75px 76px);mask-image:linear-gradient(180deg,#0007,transparent 75%)}
.top,.dash-top,body>header{border-bottom:1px solid #ffffff32!important;box-shadow:0 5px 42px #ffffff09}
.brand,.side-logo{filter:drop-shadow(0 0 9px #ffffff30)}
.button,.new,button{transition:transform .22s ease,box-shadow .25s ease,border-color .25s ease,background .25s ease}
.button:hover,.new:hover{transform:translateY(-3px);box-shadow:0 0 27px #ffffff55,0 8px 30px #000!important}
.products{position:relative;isolation:isolate}
.products:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 35%,#ffffff0c,transparent 62%)}
.cards{gap:22px!important}
.plan{position:relative!important;isolation:isolate;overflow:hidden!important;border:1px solid #727786!important;border-radius:18px!important;background:linear-gradient(150deg,#1c1e27 0%,#09090c 48%,#020203 100%)!important;box-shadow:0 12px 32px #000a,inset 0 1px #ffffff1b!important;transform:translateY(0);transition:transform .32s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s!important}
.plan:before{content:"";position:absolute;inset:-1px;z-index:-1;opacity:.48;background:linear-gradient(110deg,transparent 10%,#ffffff04 35%,#ffffff2b 50%,#ffffff04 65%,transparent 90%);transform:translateX(-115%);animation:electricSweep 9s ease-in-out infinite}
.plan:nth-child(2):before{animation-delay:1s}.plan:nth-child(3):before{animation-delay:2s}.plan:nth-child(4):before{animation-delay:3s}.plan:nth-child(5):before{animation-delay:4s}.plan:nth-child(6):before{animation-delay:5s}
.plan:after{content:"";position:absolute;top:-50px;right:18px;width:2px;height:190px;pointer-events:none;opacity:.4;transform:rotate(28deg);background:linear-gradient(transparent,#fff 45%,transparent);filter:drop-shadow(0 0 8px #fff);animation:cardSpark 8s infinite}
.plan:hover{transform:translateY(-9px) scale(1.012)!important;border-color:#f4f5ff!important;box-shadow:0 0 2px #fff,0 0 32px #ffffff3c,0 20px 55px #000,inset 0 1px #ffffff50!important}
.plan .topline{position:relative;z-index:1}
.plan .pill{border:1px solid #ffffff55!important;background:#ffffff13!important;color:#fff!important;letter-spacing:.13em}
.plan h3{letter-spacing:.04em;text-shadow:0 0 20px #ffffff20}
.plan .price{color:#fff!important;text-shadow:0 0 18px #ffffff38,0 0 45px #ffffff1b;font-weight:900!important}
.plan .price span{color:#aeb0b9!important;text-shadow:none}
.plan .detail{color:#aeb1bb!important}
.plan .button{position:relative;z-index:2;width:100%;justify-content:space-between;border-color:#ffffff8a!important;background:linear-gradient(95deg,#fff,#cfd0d8)!important;color:#070709!important;box-shadow:0 0 15px #ffffff18}
.plan .button:hover{background:#fff!important;box-shadow:0 0 25px #ffffff88!important}
.plan:nth-child(6){border-color:#e8e8f1!important;box-shadow:0 0 23px #ffffff1d,inset 0 1px #ffffff55!important}
.plan:nth-child(6) .pill{background:#fff!important;color:#080808!important}
.plan:nth-child(6):hover{box-shadow:0 0 45px #ffffff4d!important}
@keyframes electricSweep{0%,22%{transform:translateX(-115%)}43%,100%{transform:translateX(115%)}}
@keyframes cardSpark{0%,83%,89%,100%{opacity:0}84%,86%,88%{opacity:.7}}
.storm-overlay{opacity:.65!important}.storm-flash{animation-duration:10s!important}.bolt-a{animation-duration:7s!important}.bolt-b{animation-duration:9s!important}.bolt-c{animation-duration:11s!important}
.hero h1{animation:heroElectric 5.7s ease-in-out infinite!important}
.animated-logo,.side-logo img,.brand img{filter:drop-shadow(0 0 13px #ffffff8f)!important}
.dash-sidebar,.side,.listpane,.chatpane{box-shadow:inset 0 1px #ffffff1b,0 12px 45px #0008!important}
@media(prefers-reduced-motion:reduce){.plan:before,.plan:after,.hero h1{animation:none!important}.plan:hover{transform:none!important}}
@media(max-width:700px){.cards{gap:15px!important}.plan{border-radius:13px!important}}