/* ==========================================================================
   RESET
   ========================================================================== */

*,
*::before,
*::after{
    box-sizing:border-box;
    margin:0;
    padding:0;
}

:root{

    --bg:#09111f;
    --bg2:#0f1b31;

    --card:rgba(20,31,53,.88);

    --border:rgba(255,255,255,.06);

    --text:#eef3fb;
    --muted:#95a6c4;

    --green:#3ddc97;
    --red:#ff7272;
    --yellow:#ffc857;
    --blue:#59b7ff;

    --shadow:
        0 15px 60px rgba(0,0,0,.45);

}

html{

    font-size:16px;

}

body{

    min-height:100vh;

    color:var(--text);

    background:linear-gradient(
        180deg,
        var(--bg),
        #111d34
    );

    font-family:

        Inter,

        "SF Pro Display",

        "SF Pro Text",

        ui-sans-serif,

        system-ui,

        -apple-system,

        BlinkMacSystemFont,

        "Segoe UI",

        Helvetica,

        Arial,

        sans-serif;

    overflow-x:hidden;

}

/* ==========================================================================
   BACKGROUND
   ========================================================================== */

.background{

    position:fixed;

    inset:0;

    z-index:-2;

    overflow:hidden;

}

.bg-gradient{

    position:absolute;

    width:900px;
    height:900px;

    left:-200px;
    top:-200px;

    background:

    radial-gradient(

        circle,

        rgba(50,130,255,.18),

        transparent 70%

    );

    animation:floatOne 16s ease-in-out infinite;

}

.bg-grid{

    position:absolute;

    inset:0;

    opacity:.06;

    background-image:

        linear-gradient(
            rgba(255,255,255,.12) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.12) 1px,
            transparent 1px
        );

    background-size:42px 42px;

}

/* ==========================================================================
   WRAPPER
   ========================================================================== */

.wrapper{

    width:min(900px,92vw);

    margin:70px auto;

}

/* ==========================================================================
   HERO
   ========================================================================== */

.hero{

    text-align:center;

    margin-bottom:45px;

}

.hero-icon{

    width:86px;
    height:86px;

    margin:0 auto 24px;

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

    border-radius:50%;

    color:var(--red);

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

    border:1px solid var(--border);

    backdrop-filter:blur(14px);

    box-shadow:var(--shadow);

}

.hero h1{

    font-size:46px;

    font-weight:700;

    letter-spacing:-1px;

}

.subtitle{

    max-width:620px;

    margin:18px auto 0;

    color:var(--muted);

    line-height:1.8;

    font-size:17px;

}

/* ==========================================================================
   PANELS
   ========================================================================== */

.panel{

    background:var(--card);

    backdrop-filter:blur(18px);

    border:1px solid var(--border);

    border-radius:20px;

    margin-bottom:22px;

    padding:28px;

    box-shadow:var(--shadow);

}

.panel-title{

    font-size:14px;

    text-transform:uppercase;

    letter-spacing:2px;

    color:var(--blue);

    margin-bottom:24px;

}

/* ==========================================================================
   CURRENT POP
   ========================================================================== */

.current-pop{

    font-size:28px;

    line-height:1.8;

    font-weight:600;

}

/* ==========================================================================
   TABLE
   ========================================================================== */

.info-table{

    display:grid;

    gap:16px;

}

.row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding-bottom:12px;

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

}

.row:last-child{

    border:none;

    padding-bottom:0;

}

.row span:first-child{

    color:var(--muted);

}

.offline-text{

    color:var(--red);

    font-weight:600;

}

/* ==========================================================================
   REQUEST ID
   ========================================================================== */

.request-id{

    font-family:

        ui-monospace,

        SFMono-Regular,

        Consolas,

        monospace;

    color:var(--green);

    font-size:15px;

    word-break:break-all;

    line-height:1.8;

}

/* ==========================================================================
   TIMER
   ========================================================================== */

.timer{

    text-align:center;

}

#countdown{

    font-size:58px;

    font-weight:700;

    letter-spacing:2px;

}

.timer-label{

    margin-top:8px;

    color:var(--muted);

}

/* ==========================================================================
   NODE LIST
   ========================================================================== */

.node{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 0;

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

}

.node:last-child{

    border:none;

}

.node-title{

    font-weight:600;

}

.node-sub{

    margin-top:6px;

    color:var(--muted);

    font-size:13px;

}

.badge{

    border-radius:999px;

    padding:8px 14px;

    font-size:13px;

    font-weight:600;

}

.offline{

    background:rgba(255,70,70,.14);

    color:var(--red);

}

.testing{

    background:rgba(255,190,50,.14);

    color:var(--yellow);

}

.online{

    background:rgba(60,220,150,.14);

    color:var(--green);

}

/* ==========================================================================
   PROGRESS
   ========================================================================== */

.progress{

    margin-top:24px;

    height:7px;

    border-radius:999px;

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

    overflow:hidden;

}

#progress{

    width:0;

    height:100%;

    background:linear-gradient(
        90deg,
        #2ac5ff,
        #4ef0a6
    );

    transition:width .6s ease;

}

/* ==========================================================================
   NOTICE
   ========================================================================== */

.notice{

    display:flex;

    gap:18px;

    align-items:flex-start;

    color:var(--muted);

    line-height:1.8;

}

.notice svg{

    flex:none;

    color:var(--yellow);

}

/* ==========================================================================
   FOOTER
   ========================================================================== */

footer{

    margin-top:35px;

    text-align:center;

}

#network-status{

    color:var(--green);

    font-weight:600;

}

.footer-small{

    margin-top:10px;

    color:var(--muted);

    font-size:14px;

}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */

@keyframes floatOne{

    0%{

        transform:translate(0,0);

    }

    50%{

        transform:translate(100px,60px);

    }

    100%{

        transform:translate(0,0);

    }

}

/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width:700px){

.hero h1{

    font-size:34px;

}

.current-pop{

    font-size:22px;

}

#countdown{

    font-size:44px;

}

.row{

    flex-direction:column;

    align-items:flex-start;

    gap:8px;

}

.notice{

    flex-direction:column;

}

.panel{

    padding:22px;

}

}