/* ========================================
   SERVER CARD
======================================== */

.server-card{
    --glint-duration:5.8s;
    --glint-delay:-2.4s;
    --glint-angle:-22deg;
    --glint-width:42%;
    --glint-blur:10px;

    position:relative;
    overflow:hidden;
    border-radius:1.5rem;

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    transition:
        transform .28s ease,
        box-shadow .28s ease;
}

.server-card:hover{
    transform:translateY(-5px) scale(1.02);
    box-shadow:
        0 30px 70px rgba(15,23,42,.35);
}

.server-card::before{
    content:"";
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(15,23,42,.05),
            rgba(15,23,42,.92)
        );

    z-index:0;
}

/* Premium moving sheen */

.server-card::after{
    content:"";
    position:absolute;

    top:-50%;
    bottom:-50%;
    left:-130%;

    width:var(--glint-width);

    background:
        linear-gradient(
            105deg,
            transparent 0%,
            rgba(255,255,255,.02) 18%,
            rgba(255,255,255,.15) 34%,
            rgba(255,255,255,.95) 50%,
            rgba(255,255,255,.18) 66%,
            rgba(255,255,255,.03) 82%,
            transparent 100%
        );

    filter:blur(var(--glint-blur));
    mix-blend-mode:screen;

    transform:skewX(var(--glint-angle));

    animation:
        cardGlint
        var(--glint-duration)
        cubic-bezier(.35,.05,.18,1)
        infinite;

    animation-delay:var(--glint-delay);

    pointer-events:none;
    z-index:1;
}

/* Glass reflection */

.server-card .glass-highlight{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:1;

    background:
        radial-gradient(
            ellipse at top,
            rgba(255,255,255,.22),
            transparent 72%
        ),
        linear-gradient(
            180deg,
            rgba(255,255,255,.08),
            transparent 45%
        );

    animation:
        highlightPulse 7s ease-in-out infinite;
}

/* Keep content above overlays */

.server-card>*{
    position:relative;
    z-index:2;
}

.server-status{
    position:absolute;
    top:0;
    right:0;
    z-index:50;
}

/* ========================================
   RANDOM VARIANTS
======================================== */

.server-card:nth-of-type(7n+1){
    --glint-duration:5.2s;
    --glint-delay:-1.1s;
    --glint-angle:-18deg;
}

.server-card:nth-of-type(7n+2){
    --glint-duration:6.7s;
    --glint-delay:-4.8s;
    --glint-width:48%;
}

.server-card:nth-of-type(7n+3){
    --glint-duration:4.9s;
    --glint-delay:-2.7s;
    --glint-angle:-27deg;
}

.server-card:nth-of-type(7n+4){
    --glint-duration:8.1s;
    --glint-delay:-6.5s;
    --glint-width:55%;
}

.server-card:nth-of-type(7n+5){
    --glint-duration:5.9s;
    --glint-delay:-.8s;
}

.server-card:nth-of-type(7n+6){
    --glint-duration:7.2s;
    --glint-delay:-5.4s;
    --glint-angle:-15deg;
}

.server-card:nth-of-type(7n){
    --glint-duration:6.3s;
    --glint-delay:-3.6s;
    --glint-angle:-30deg;
}


/* ========================================
   STATUS PILL
======================================== */
.server-ip{
    transition:.2s ease;
}

.server-ip:hover{
    background:rgba(255,255,255,.18);
}


/* Base badge pill */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;

    padding: .25rem .65rem;
    border-radius: 9999px;

    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;

    border: 1px solid transparent;

    /* optional decoration */
    /* box-shadow: 0 0 12px rgba(255,255,255,.08); */
}


/* =========================
   BADGE THEMES
========================= */


/* 🔄 Rotate */
.status-pill.rotate {
    background: rgba(245,158,11,.16) !important;
    color: #fde68a !important;
    border-color: rgba(245,158,11,.4) !important;
}


/* 🧪 Beta */
.status-pill.beta {
    background: rgba(168,85,247,.16) !important;
    color: #e9d5ff !important;
    border-color: rgba(168,85,247,.4) !important;
}


/* 🆕 New */
.status-pill.new {
    background: rgba(34,197,94,.16) !important;
    color: #bbf7d0 !important;
    border-color: rgba(34,197,94,.4) !important;
}


/* 👑 Featured */
.status-pill.featured {
    background: linear-gradient(
        135deg,
        rgba(250,204,21,.25),
        rgba(245,158,11,.12)
    ) !important;

    color: #fef08a !important;

    border-color: rgba(250,204,21,.55) !important;

    /*
    Optional crown decoration

    box-shadow:
        0 0 15px rgba(250,204,21,.25);
    */

    /* 
    Uncomment for crown style:
    
    ::before {
        content:"👑";
    }
    */
}


/* 🔧 Maintenance */
.status-pill.maintenance {
    background: rgba(239,68,68,.16) !important;
    color: #fecaca !important;
    border-color: rgba(239,68,68,.4) !important;
}


/* ♻ Reset */
.status-pill.reset {
    background: rgba(14,165,233,.16) !important;
    color: #bae6fd !important;
    border-color: rgba(14,165,233,.4) !important;
}


/* ✏ Updated */
.status-pill.updated {
    background: rgba(59,130,246,.16) !important;
    color: #bfdbfe !important;
    border-color: rgba(59,130,246,.4) !important;
}


/* 🧰 Test */
.status-pill.test {
    background: rgba(107,114,128,.2) !important;
    color: #e5e7eb !important;
    border-color: rgba(156,163,175,.4) !important;
}









.status-pill{
    --pill-duration:6.2s;
    --pill-delay:-3s;

    position:relative;
    overflow:hidden;
    isolation:isolate;

    display:inline-flex;
    align-items:center;

    padding:.45rem 1rem;

    border-radius:9999px;
    border:1px solid rgba(255,255,255,.18);

    backdrop-filter:blur(12px);

    text-transform:uppercase;
    font-size:.7rem;
    font-weight:700;
    letter-spacing:.12em;
}

.status-pill::before{
    content:"";
    position:absolute;

    top:-60%;
    bottom:-60%;
    left:-120%;

    width:42%;

    background:
        linear-gradient(
            105deg,
            transparent,
            rgba(255,255,255,.02),
            rgba(255,255,255,.12),
            rgba(255,255,255,.9),
            rgba(255,255,255,.15),
            rgba(255,255,255,.03),
            transparent
        );

    filter:blur(7px);

    mix-blend-mode:screen;

    animation:
        pillGlint
        var(--pill-duration)
        ease-in-out
        infinite;

    animation-delay:var(--pill-delay);

    pointer-events:none;
}

.status-pill::after{
    content:"";
    position:absolute;
    inset:0;

    background:
        radial-gradient(
            ellipse at top,
            rgba(255,255,255,.28),
            transparent 75%
        );

    opacity:.45;
    pointer-events:none;
}

.status-pill.online{
    background:rgba(16,185,129,.16);
    color:#a7f3d0;
    border-color:rgba(16,185,129,.4);
}

.status-pill.offline{
    background:rgba(239,68,68,.16);
    color:#fecaca;
    border-color:rgba(239,68,68,.4);
}
    .status-pill.rotate {
        background: rgba(245, 158, 11, .16)     !important;
        color: #fde68a  !important;
        border-color: rgba(245, 158, 11, .4) !important;
    }

    .status-pill.reset {
        background: rgba(59, 130, 246, .16)!important;
        color: #bfdbfe!important;
        border-color: rgba(59, 130, 246, .4)!important;
    }

    .status-pill.new {
        background: rgba(16, 185, 129, .16)!important;
        color: #a7f3d0  !important;
        border-color: rgba(16, 185, 129, .4) !important;
    }

    .status-pill.updated {
        background: rgba(168, 85, 247, .16)     !important;
        color: #ddd6fe !important;
        border-color: rgba(168, 85, 247, .4) !important;   
    }

    .status-pill.maintenance {
        background: rgba(239, 68, 68, .16) !important; 
        color: #fecaca  !important;
        border-color: rgba(239, 68, 68, .4) !important;
    }
/* ========================================
   ANIMATIONS
======================================== */

@keyframes cardGlint{

    0%{
        left:-140%;
        opacity:0;
        transform:
            skewX(var(--glint-angle))
            rotate(-2deg)
            scaleX(.9);
    }

    10%{opacity:.15;}
    18%{opacity:.9;}
    28%{opacity:.45;}

    38%{
        left:150%;
        opacity:0;
        transform:
            skewX(calc(var(--glint-angle) + 4deg))
            rotate(1deg)
            scaleX(1.05);
    }

    100%{
        left:150%;
        opacity:0;
    }
}

@keyframes pillGlint{

    0%{
        left:-140%;
        opacity:0;
    }

    14%{
        opacity:.95;
    }

    30%{
        left:150%;
        opacity:0;
    }

    100%{
        left:150%;
        opacity:0;
    }
}
.server-modal{
    position:fixed;
    inset:0;
    z-index:9999;
    display:none;
    background: rgba(9,9,11,.88);
    backdrop-filter:blur(16px);

    overflow-y:auto;
    -webkit-overflow-scrolling: touch;
}

.server-modal.active{
    display:flex;
    align-items:flex-start;
    justify-content:center;
}

.server-modal-box{
    position:absolute;
    inset:2rem;
    border-radius:1.5rem;
    overflow-y:auto;
    max-height: calc(100vh - 2rem);

    background:
        linear-gradient(
            180deg,
            rgba(15,23,42,.95),
            rgba(9,9,11,.98)
        );

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
        }


    .server-modal-box {
        scrollbar-width: thin;
        scrollbar-color: rgba(99,102,241,.45) rgba(255,255,255,.04);
    }

    .server-modal-box::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    .server-modal-box::-webkit-scrollbar-track {
        background: rgba(255,255,255,.04);
        border-radius: 999px;
    }

    .server-modal-box::-webkit-scrollbar-thumb {
        background: rgba(99,102,241,.45);
        border: 2px solid rgba(255,255,255,.04);
        border-radius: 999px;
    }

    .server-modal-box::-webkit-scrollbar-thumb:hover {
        background: rgba(99,102,241,.65);
    }

    .server-modal-box::-webkit-scrollbar-thumb:active {
        background: rgba(99,102,241,.85);
    }

    .server-modal-box::-webkit-scrollbar-corner {
        background: transparent;
    }


.server-modal-box::before{

    content:"";

    position:absolute;
    inset:0;

    background:
        radial-gradient(
            ellipse at top,
            rgba(255,255,255,.15),
            transparent 55%
        );

    pointer-events:none;
}


.server-modal-header{

    position:relative;
    z-index:2;

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:1.5rem 2rem;

    border-bottom:
        1px solid rgba(255,255,255,.1);
}


.server-modal-close{

    cursor:pointer;

    width:42px;
    height:42px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:9999px;

    background:
        rgba(255,255,255,.08);

    border:
        1px solid rgba(255,255,255,.12);

    color:white;

    transition:.2s;
}

.server-modal-close:hover{

    background:
        rgba(255,255,255,.18);

    transform:scale(1.08);
}


.server-panel{

    position:relative;

    overflow:hidden;

    border-radius:1.5rem;

    background:
        rgba(15,23,42,.65);

    border:
        1px solid rgba(255,255,255,.12);

    padding:1.5rem;
}
.server-panel-ng{

    position:relative;

    overflow:hidden;

    border-radius:1.5rem;

    background:
        rgba(15,23,42,.65);

    border:
        1px solid rgba(255,255,255,.12);

    padding:1.5rem;
}

.server-panel::after{

    content:"";

    position:absolute;

    top:-50%;
    bottom:-50%;
    left:-120%;

    width:40%;

    background:
        linear-gradient(
            105deg,
            transparent,
            rgba(255,255,255,.15),
            rgba(255,255,255,.7),
            transparent
        );

    filter:blur(10px);

    animation:
        cardGlint 6s infinite;

    pointer-events:none;
}
@keyframes highlightPulse{

    0%,100%{
        opacity:.28;
    }

    35%{
        opacity:.45;
    }

    65%{
        opacity:.18;
    }
}


    /* Firefox */
    * {
        scrollbar-width: thin;
        scrollbar-color: rgba(99,102,241,.45) rgba(255,255,255,.04);
    }

    /* Chrome, Edge, Safari */
    ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    ::-webkit-scrollbar-track {
        background: rgba(255,255,255,.04);
        border-radius: 999px;
    }

    ::-webkit-scrollbar-thumb {
        background: rgba(99,102,241,.45);
        border: 2px solid rgba(255,255,255,.04);
        border-radius: 999px;
        transition: background .2s ease;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: rgba(99,102,241,.65);
    }

    ::-webkit-scrollbar-thumb:active {
        background: rgba(99,102,241,.85);
    }

    ::-webkit-scrollbar-corner {
        background: transparent;
    }




.mobile-instruction {
    display:none;
}

.desktop-instruction {
    display:block;
}

@media (max-width: 640px) {

    .desktop-instruction {
        display:none;
    }

    .mobile-instruction {
        display:block;
    }

}