/* ================= visual polish ================= */
:root{--glow:rgba(176,190,220,.16);--glass:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02))}
html{scrollbar-color:#2a3050 #050818;scrollbar-width:thin}
::selection{background:rgba(176,190,220,.35);color:#fff}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:#262c4a;border-radius:99px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:#3a4268;background-clip:content-box;border:2px solid transparent}

/* ---- backdrop ---- */
body.dashboard{
  background:
    radial-gradient(900px 500px at 85% -5%,rgba(176,190,220,.10),transparent 60%),
    radial-gradient(700px 500px at 5% 40%,rgba(88,101,242,.07),transparent 60%),
    linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px) 0 0/48px 48px,
    linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px) 0 0/48px 48px,
    #02061a;
  background-attachment:fixed}

/* ---- nav ---- */
nav{background:rgba(3,7,22,.72);backdrop-filter:blur(16px) saturate(1.4);border-bottom:1px solid transparent;border-image:linear-gradient(90deg,transparent,rgba(176,190,220,.35),transparent) 1}
.brand{letter-spacing:-.01em}
.brand svg{filter:drop-shadow(0 0 10px rgba(176,190,220,.35))}
.nbtn{border-radius:12px;transition:.2s}
.nbtn:hover{transform:translateY(-1px);border-color:rgba(176,190,220,.4)}
.nbtn.prem-btn{box-shadow:0 6px 24px rgba(176,190,220,.28);position:relative;overflow:hidden}
.nbtn.prem-btn::after,.btn-gold::after,.manage:not(.invite)::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);transition:left .6s}
.nbtn.prem-btn:hover::after,.btn-gold:hover::after,.manage:not(.invite):hover::after{left:130%}
.btn-gold,.manage{position:relative;overflow:hidden}

/* ---- headings ---- */
.main h1,.dash-page h1{background:linear-gradient(90deg,#fff 30%,var(--gold-l));-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-.02em}
.sub{line-height:1.6}

/* ---- sidebar ---- */
.side{background:linear-gradient(180deg,rgba(6,12,38,.95),rgba(3,7,24,.98));box-shadow:inset -1px 0 0 rgba(255,255,255,.05),20px 0 60px rgba(0,0,0,.35)}
.srv-btn{background:var(--glass);border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.srv-btn:hover{box-shadow:0 8px 28px rgba(176,190,220,.15)}
.snav a{border-radius:12px;transition:background .18s,color .18s,transform .18s}
.snav a:hover{transform:translateX(3px)}
.snav a.active{background:linear-gradient(90deg,rgba(176,190,220,.2),rgba(176,190,220,.05));box-shadow:inset 0 0 0 1px rgba(176,190,220,.22),0 0 24px rgba(176,190,220,.08)}
.snav a.active::before{box-shadow:0 0 12px var(--gold)}
.snav a.active svg:first-child{filter:drop-shadow(0 0 6px rgba(176,190,220,.6))}
.grp{text-transform:uppercase;letter-spacing:.1em;font-size:11px}

/* ---- cards ---- */
.card,.cmd-card,.rule,.scard,.pane,.cat,.tcmd,.paywall,.hero2{box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 40px rgba(0,0,0,.28)}
.card{background:linear-gradient(180deg,rgba(14,19,46,.88),rgba(8,12,32,.92));border-color:rgba(255,255,255,.075);transition:border-color .25s,box-shadow .25s}
.card:hover{border-color:rgba(176,190,220,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 14px 50px rgba(0,0,0,.35),0 0 0 1px rgba(176,190,220,.05)}
.card-ic{box-shadow:0 0 22px rgba(176,190,220,.14);transition:.25s}
.card:hover .card-ic{box-shadow:0 0 28px rgba(176,190,220,.28);transform:scale(1.05)}
.cmd-card,.rule{background:linear-gradient(180deg,rgba(14,19,46,.85),rgba(8,12,32,.9));transition:transform .2s,border-color .2s,box-shadow .2s}
.cmd-card:hover,.rule:hover{transform:translateY(-2px);border-color:rgba(176,190,220,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 14px 36px rgba(0,0,0,.4),0 0 24px rgba(176,190,220,.08)}
.field.row{transition:border-color .2s,background .2s}
.field.row:hover{border-color:rgba(176,190,220,.22);background:rgba(255,255,255,.035)}

/* ---- inputs ---- */
.inp{background:rgba(18,15,51,.85);transition:border-color .2s,box-shadow .2s,background .2s}
.inp:hover{border-color:rgba(255,255,255,.2)}
.inp:focus{background:rgba(24,20,66,.95);border-color:var(--gold);box-shadow:0 0 0 4px rgba(176,190,220,.14)}
.multi-btn:hover{border-color:rgba(255,255,255,.2)}
.multi-panel,.srv-list,.menu,.addmenu{backdrop-filter:blur(14px);animation:pop .16s ease}
@keyframes pop{from{opacity:0;transform:translateY(-6px) scale(.98)}}

/* ---- toggles ---- */
.sw span{background:#2a3050;box-shadow:inset 0 1px 3px rgba(0,0,0,.4);transition:background .25s}
.sw span::after{box-shadow:0 2px 6px rgba(0,0,0,.45);transition:transform .25s cubic-bezier(.3,1.4,.5,1)}
.sw input:checked+span{background:linear-gradient(90deg,#8c99b8,#e4eaf7);box-shadow:0 0 16px rgba(176,190,220,.4),inset 0 1px 2px rgba(255,255,255,.3)}

/* ---- buttons ---- */
.btn{border-radius:12px}
.btn-gold{box-shadow:0 8px 26px rgba(176,190,220,.22)}
.btn-gold:hover{box-shadow:0 12px 34px rgba(176,190,220,.4)}
.btn-blurple{box-shadow:0 8px 24px rgba(88,101,242,.3)}
.btn-blurple:hover{box-shadow:0 12px 32px rgba(88,101,242,.5);transform:translateY(-1px)}
.btn-ghost{backdrop-filter:blur(6px)}
.iconbtn{transition:.2s}
.iconbtn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(99,102,241,.35)}
.dashed{transition:.2s}
.dashed:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(99,102,241,.2)}

/* ---- servers page ---- */
.scard{background:linear-gradient(180deg,rgba(16,21,52,.92),rgba(9,13,34,.95))}
.scard:hover{transform:translateY(-6px);box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 40px rgba(176,190,220,.12)}
.scard.botin:hover{box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 40px rgba(34,197,94,.14)}
.scard .gav{transition:transform .3s}
.scard:hover .gav{transform:scale(1.06)}
.chip{transition:.2s;backdrop-filter:blur(6px)}
.chip:hover{transform:translateY(-1px)}

/* ---- toast / save bar / modal ---- */
.savebar{background:rgba(14,19,46,.88);backdrop-filter:blur(18px);box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 0 1px rgba(176,190,220,.25),0 0 40px rgba(176,190,220,.1);animation:rise .3s cubic-bezier(.2,1.2,.4,1)}
@keyframes rise{from{opacity:0;transform:translate(-50%,20px)}}
@media(min-width:901px){.savebar{animation-name:rise2}@keyframes rise2{from{opacity:0;transform:translate(calc(-50% + 150px),20px)}}}
.modal{animation:mscale .22s cubic-bezier(.2,1.1,.4,1);background:linear-gradient(180deg,#10163a,#090d22)}
@keyframes mscale{from{opacity:0;transform:translateY(16px) scale(.97)}}
.toast{backdrop-filter:blur(10px);box-shadow:0 14px 40px rgba(0,0,0,.5)}

/* ---- page enter animation ---- */
@keyframes fup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.main>.phead,.main>h1,.main>.sub,.pbody>*{animation:fup .5s cubic-bezier(.2,.8,.2,1) both}
.pbody>*:nth-child(2){animation-delay:.05s}.pbody>*:nth-child(3){animation-delay:.1s}.pbody>*:nth-child(4){animation-delay:.15s}
.pbody>*:nth-child(5){animation-delay:.2s}.pbody>*:nth-child(n+6){animation-delay:.25s}
.cgrid>*,.servers>*,.rows>*{animation:fup .45s cubic-bezier(.2,.8,.2,1) both}
.cgrid>*:nth-child(3n+2),.servers>*:nth-child(4n+2){animation-delay:.05s}
.cgrid>*:nth-child(3n),.servers>*:nth-child(4n+3){animation-delay:.1s}
.servers>*:nth-child(4n){animation-delay:.15s}

/* ---- paywall / hero glow ---- */
.paywall::before,.hero2::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(600px 260px at 50% 0,rgba(176,190,220,.1),transparent 70%)}
.paywall,.hero2{position:relative;overflow:hidden}
.pw-ic{animation:float 4s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-6px)}}
.crownc{animation:pulse 3.4s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 100px rgba(176,190,220,.5)}}
.ring{animation:spin 40s linear infinite}
.ring.r2{animation-direction:reverse;animation-duration:55s}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- landing page ---- */
.hero h1{background:linear-gradient(180deg,#fff 40%,#e8eefb);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 30px rgba(176,190,220,.18))}
.hero .btn-gold{box-shadow:0 10px 40px rgba(176,190,220,.3)}
.hero .btn-ghost{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14)}
.hero .btn-ghost:hover{border-color:rgba(176,190,220,.5)}
.hero::before{background:radial-gradient(ellipse at 50% 120%,rgba(176,190,220,.28),transparent 60%),radial-gradient(ellipse at 50% 0,rgba(88,101,242,.1),transparent 55%),radial-gradient(ellipse at center,transparent 55%,rgba(2,6,20,.75) 100%)}
.mock{box-shadow:0 30px 80px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.07);transition:transform .35s}
.feat:hover .mock{transform:translateY(-4px)}
.stat{transition:.25s}
.stat:hover{transform:translateX(6px);border-color:rgba(176,190,220,.3)}
.pc{transition:.25s}
.pc:hover{transform:translateY(-3px);border-color:rgba(176,190,220,.3);background:rgba(255,255,255,.05)}
.tab{transition:.2s}
.tab:hover{color:#fff;border-color:rgba(176,190,220,.35)}
footer a{transition:color .2s}

@media(prefers-reduced-motion:reduce){.pw-ic,.crownc,.ring{animation:none!important}}