:root{
    --bg:#0b0d12;
    --card:#101522;
    --text:#e9eefb;
    --muted:#b7c0d6;
    --blue:#7aa6ff;
    --green:#69f0c3;
}

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

body{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;

    font-family:Inter,Arial,sans-serif;
    color:var(--text);

    background:
    radial-gradient(circle at 20% 20%, rgba(122,166,255,.25), transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(105,240,195,.15), transparent 40%),
    var(--bg);
}

.background-grid{
    position:fixed;
    inset:0;

    background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);

    background-size:40px 40px;

    opacity:.2;
}

.container{
    position:relative;
    z-index:10;

    width:min(700px,90%);
    padding:50px;

    border-radius:24px;

    background:rgba(16,21,34,.85);

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

    backdrop-filter:blur(15px);

    text-align:center;
}

.status-dot{
    width:16px;
    height:16px;

    margin:0 auto 25px;

    border-radius:50%;

    background:var(--green);

    animation:pulse 2s infinite;
}

h3{
    color:var(--green);
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:15px;
}

h1{
    font-size:clamp(2.5rem,6vw,4.5rem);
    margin-bottom:20px;
}

p{
    color:var(--muted);
    line-height:1.7;
}

.progress{
    width:100%;
    height:12px;

    margin-top:35px;

    border-radius:999px;

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

    overflow:hidden;
}

.progress-bar{
    height:100%;
    width:35%;

    background:linear-gradient(
        90deg,
        var(--blue),
        var(--green)
    );

    animation:loading 3s ease-in-out infinite alternate;
}

.date{
    margin-top:20px;
    color:var(--muted);
    font-size:.9rem;
}

@keyframes pulse{
    0%{
        box-shadow:0 0 0 0 rgba(105,240,195,.6);
    }

    70%{
        box-shadow:0 0 0 18px rgba(105,240,195,0);
    }

    100%{
        box-shadow:0 0 0 0 rgba(105,240,195,0);
    }
}

@keyframes loading{
    from{
        width:30%;
    }

    to{
        width:75%;
    }
}