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

body{
    margin:0;
    min-height:100vh;
    background:radial-gradient(circle at 20% 20%, rgba(0,90,255,0.10), transparent 25%),
                         radial-gradient(circle at 80% 20%, rgba(94,234,212,0.12), transparent 22%),
                         linear-gradient(180deg,#071126 0%, #071322 100%);
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color:#e6eef8;
    padding:1.5rem 1rem;
    overflow-x:hidden;
    overflow-y:auto;
}

.background{
    position:absolute;
    inset:0;
    pointer-events:none;
}
.background .shape{
    position:absolute;
    width:240px;
    height:240px;
    border-radius:50%;
    filter:blur(18px);
    opacity:0.55;
}
.background .shape:first-child{background:linear-gradient(145deg,#1845ad,#23a2f6);left:-60px;top:-60px}
.background .shape:last-child{background:linear-gradient(145deg,#ff7a59,#ffc14f);right:-80px;bottom:-120px}

.auth-page{position:relative;z-index:1;padding:1.5rem;width:100%;display:flex;justify-content:center}

.auth-card{
    width:min(440px, 92vw);
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:16px;
    backdrop-filter:blur(14px);
    box-shadow:0 22px 70px rgba(0,0,0,0.45);
    padding:1.8rem 1.5rem 1.6rem;
}

.auth-brand a{display:inline-flex;align-items:center;gap:.7rem;color:inherit;text-decoration:none;font-weight:700;font-size:1rem}
.brand-logo{height:42px;width:auto;border-radius:10px;object-fit:contain;background:rgba(255,255,255,0.06);padding:.3rem}
.brand-name{letter-spacing:0.2px}

.auth-header{margin-top:1rem;margin-bottom:1.2rem}
.auth-kicker{margin:0;font-size:.9rem;color:#8fb3ff;text-transform:uppercase;letter-spacing:1px;font-weight:700}
.auth-header h1{margin:.35rem 0;font-size:1.8rem;letter-spacing:0.4px}
.auth-subtitle{margin:0;color:#c6d8ff;font-size:0.98rem}

.auth-form{display:flex;flex-direction:column;gap:.75rem;margin-top:.2rem}
.auth-form label{font-weight:600;font-size:0.95rem;color:#eaf2ff}
.auth-form input{
    height:50px;
    padding:0.8rem 0.85rem;
    border-radius:10px;
    border:1px solid rgba(255,255,255,0.16);
    background:rgba(4,10,25,0.65);
    color:#fff;
    font-size:0.98rem;
}
.auth-form input:focus{outline:2px solid rgba(0,90,255,0.55);box-shadow:0 0 0 2px rgba(0,90,255,0.25)}
.auth-form input::placeholder{color:rgba(230,230,230,0.65)}

.form-actions{margin-top:.4rem}
.btn-primary{
    width:100%;
    padding:0.9rem 1rem;
    border-radius:12px;
    border:0;
    background:linear-gradient(90deg,#0059ff,#33e6c9);
    color:#071126;
    font-weight:700;
    font-size:1rem;
    cursor:pointer;
    box-shadow:0 12px 30px rgba(0,89,255,0.28);
}
.btn-primary:hover{filter:brightness(1.02)}

.social-login{margin-top:1.2rem;display:flex;flex-direction:column;gap:.75rem}
.divider{display:flex;align-items:center;gap:.6rem;color:rgba(230,238,248,0.7);font-weight:600;font-size:0.9rem;text-transform:uppercase;letter-spacing:0.5px}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:linear-gradient(90deg, rgba(255,255,255,0.18), rgba(255,255,255,0.04))}

.btn-google{
    width:100%;
    padding:0.85rem 1rem;
    border-radius:12px;
    border:1px solid rgba(255,255,255,0.14);
    background:rgba(255,255,255,0.06);
    color:#e6eef8;
    font-weight:600;
    font-size:0.98rem;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.65rem;
    transition:background .18s ease, transform .12s ease;
}
.btn-google:hover{background:rgba(255,255,255,0.1);transform:translateY(-1px)}
.btn-google img{display:block;width:20px;height:20px}

.auth-links{margin-top:1rem;text-align:center}
.auth-links a{color:#cfe2ff;text-decoration:none;font-weight:600}
.auth-links a:hover{text-decoration:underline}

.auth-status{margin-top:.4rem;padding:.65rem .8rem;border-radius:10px;font-weight:600;font-size:0.95rem;border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.04);color:#e6eef8}
.auth-status.success{border-color:rgba(52,211,153,0.5);background:rgba(16,185,129,0.12);color:#d1fae5}
.auth-status.error{border-color:rgba(248,113,113,0.4);background:rgba(248,113,113,0.12);color:#fee2e2}
.auth-status.info{border-color:rgba(255,255,255,0.12);color:#dbeafe}

@media (max-width:520px){
    body{align-items:flex-start;padding:1.1rem 0.9rem}
    .auth-page{padding:0.6rem 0}
    .auth-card{padding:1.35rem 1.1rem;width:100%}
    .brand-logo{height:36px}
    .auth-header h1{font-size:1.55rem}
}