:root{
    --primary:#0ea5e9;
    --primary-soft:#38bdf8;
    --dark:#0f172a;
    --dark-soft:#1e293b;
    --light:#f1f5f9;
    --card:#ffffff;
    --text:#0f172a;
    --muted:#64748b;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family: system-ui, -apple-system, sans-serif;
}

body{
    background: linear-gradient(135deg, var(--dark), var(--dark-soft));
    color: var(--light);
    height:100vh;
}

.container{
    text-align:center;
    padding:40px 20px;
    max-width:600px;
    width:100%;
    margin: 0 auto;
}

.card{
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(20px);
    border-radius:20px;
    padding:40px 30px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    border:1px solid rgba(255,255,255,0.08);
}

h1{
    font-size:42px;
    margin-bottom:10px;
    background: linear-gradient(90deg, var(--primary), var(--primary-soft));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

p{
    color: var(--muted);
    font-size:16px;
    margin-bottom:30px;
}

.status{
    display:inline-block;
    padding:10px 18px;
    border-radius:50px;
    background: rgba(14,165,233,0.1);
    color: var(--primary-soft);
    font-size:14px;
    margin-bottom:25px;
}

.loader{
    margin:20px auto;
    width:60px;
    height:60px;
    border:4px solid rgba(255,255,255,0.1);
    border-top:4px solid var(--primary);
    border-radius:50%;
    animation: spin 1s linear infinite;
}

@keyframes spin{
    to{ transform: rotate(360deg); }
}

.footerc{
    margin-top:30px;
    font-size:13px;
    color: var(--muted);
}

/* Responsive */
@media(max-width:600px){
    h1{
    font-size:30px;
    }

    .card{
    padding:30px 20px;
    }
    .container {
        padding: 40px 20px 40px 55px;
    }
}