/* =====================================================
   AUTH VARIABLES
===================================================== */

:root{

    --bg:#f5f7fb;
    --card:#ffffff;

    --text:#111827;
    --soft:#6b7280;

    --border:#dbe2ea;

    --primary:#2563eb;
    --primary-dark:#1d4ed8;

    --danger:#dc2626;
    --success:#16a34a;

    --shadow:
    0 20px 50px rgba(0,0,0,.08);
}

/* =====================================================
   DARK MODE
===================================================== */

html.dark{

    --bg:#08090c;
    --card:#111318;

    --text:#f3f4f6;
    --soft:#9ca3af;

    --border:#23262d;

    --shadow:
    0 20px 50px rgba(0,0,0,.45);
}

/* =====================================================
   BODY
===================================================== */

body{

    margin:0;

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:30px;

    font-family:'Inter',sans-serif;

    background:
    linear-gradient(
        135deg,
        rgba(37,99,235,.08),
        rgba(124,58,237,.08)
    ),
    var(--bg);

    color:var(--text);
}

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

.auth-card{

    width:100%;

    max-width:460px;

    background:var(--card);

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

    border-radius:28px;

    padding:40px;

    box-shadow:var(--shadow);

    backdrop-filter:blur(14px);
}

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

.auth-title{

    font-size:38px;

    font-weight:800;

    text-align:center;

    margin-bottom:10px;
}

.auth-subtitle{

    text-align:center;

    color:var(--soft);

    line-height:1.7;

    margin-bottom:34px;
}

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

form{

    display:flex;

    flex-direction:column;

    gap:20px;
}

.form-group{

    display:flex;

    flex-direction:column;

    gap:8px;
}

.form-group label{

    font-size:14px;

    font-weight:700;
}

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

input{

  

    height:56px;

    border-radius:16px;

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

    background:transparent;

    color:var(--text);

    padding:0 18px;

    font-size:15px;

    outline:none;

    transition:.25s;
}

input::placeholder{

    color:var(--soft);
}

input:focus{

    border-color:var(--primary);

    box-shadow:
    0 0 0 4px rgba(37,99,235,.15);
}

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

.btn-primary{

    height:56px;

    border:none;

    border-radius:16px;

    background:
    linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );

    color:#ffffff;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

    margin-top:6px;
}

.btn-primary:hover{

    transform:translateY(-2px);

    box-shadow:
    0 14px 30px rgba(37,99,235,.25);
}

/* =====================================================
   ALERT
===================================================== */

.alert{

    padding:16px;

    border-radius:16px;

    margin-bottom:20px;

    font-size:14px;

    line-height:1.6;
}

.alert.error{

    background:rgba(220,38,38,.10);

    color:var(--danger);

    border:1px solid rgba(220,38,38,.20);
}

.alert.success{

    background:rgba(22,163,74,.10);

    color:var(--success);

    border:1px solid rgba(22,163,74,.20);
}

/* =====================================================
   LINKS
===================================================== */

.auth-links{

    margin-top:24px;

    display:flex;

    flex-direction:column;

    gap:14px;

    text-align:center;
}

.auth-links a{

    color:var(--primary);

    text-decoration:none;

    font-weight:600;

    transition:.25s;
}

.auth-links a:hover{

    opacity:.8;
}

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

@media(max-width:600px){

    body{

        padding:18px;
    }

    .auth-card{

        padding:28px;
    }

    .auth-title{

        font-size:30px;
    }
}