/* ===== PAGE ===== */

body {
    margin:0;
    height:100vh;

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

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    background:#0f172a;
    color:white;
}


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

.auth-card {

    width:380px;
    padding:40px;

    background:#1e293b;

    border-radius:14px;

    box-shadow:
    0 10px 30px rgba(0,0,0,0.6);

}


/* ===== TITLE ===== */

.auth-title {

    font-size:26px;
    font-weight:600;

    text-align:center;

    margin-bottom:25px;
}


/* ===== FORM ===== */

.auth-form {

    display:flex;
    flex-direction:column;
    gap:16px;

}


/* ===== INPUT ===== */

.auth-input {

    padding:14px;

    border-radius:8px;

    border:1px solid #334155;

    background:#0f172a;

    color:white;

    font-size:15px;

    outline:none;

    transition:0.2s;
}


.auth-input:focus {

    border-color:#3b82f6;

    box-shadow:0 0 0 2px rgba(59,130,246,0.2);

}


/* ===== BUTTON ===== */

.auth-button {

    padding:14px;

    border:none;

    border-radius:8px;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    background:#3b82f6;

    color:white;

    transition:0.2s;
}


.auth-button:hover {

    background:#2563eb;

}


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

.auth-footer {

    text-align:center;

    margin-top:18px;

    font-size:14px;

    color:#94a3b8;

}


.auth-footer a {

    color:#3b82f6;

    text-decoration:none;

}


.auth-footer a:hover {

    text-decoration:underline;

}


/* ===== ERROR ===== */

.auth-error {

    background:#7f1d1d;

    padding:10px;

    border-radius:6px;

    font-size:14px;

    text-align:center;

}