/* ==============================
   RESET
============================== */

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

:root {

    --primary: #E30613;
    --primary-hover: #c80410;

    --dark: #151515;

    --bg: #f4f5f7;

    --card: #ffffff;

    --border: #e5e7eb;

    --text: #1f2937;

    --muted: #6b7280;

    --radius: 14px;

    --shadow:
        0 10px 35px rgba(0,0,0,.08);

    --transition: .25s ease;

}

html {

    scroll-behavior: smooth;

}

body {

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

    background: var(--bg);

    color: var(--text);

    min-height: 100vh;

}



.auth-logo{

    text-align:center;

    margin-bottom:30px;

}

.auth-logo img{

    width:140px;

}

.auth-title{

    font-size:28px;

    font-weight:700;

    text-align:center;

}

.auth-subtitle{

    text-align:center;

    color:var(--muted);

    margin-top:8px;

    margin-bottom:35px;

}

.auth-footer{

    margin-top:30px;

    text-align:center;

    color:#888;

    font-size:13px;

}



.auth-logo-small{

    flex-shrink:1;

    min-width:0;

}

.auth-logo-small img{

    max-width:100%;

    height:42px;

}

.auth-options{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

    gap:20px;

}

.password-strength{

    margin-top:5px;

}

.strength-bar{

    width:100%;

    height:8px;

    background:#e5e7eb;

    border-radius:20px;

    overflow:hidden;

    margin-bottom:10px;

}

.strength-fill{

    width:0;

    height:100%;

    background:#dc2626;

    transition:.3s;

}

.strength-text{

    font-size:13px;

    font-weight:600;

    margin-bottom:10px;

}

.password-rules{

    list-style:none;

    padding:0;

    margin:0;

}

.password-rules li{

    display:flex;

    align-items:center;

    gap:8px;

    color:#9ca3af;
    
    font-size:10px;

    transition:.25s;

}

.password-rules li.valid{

    color:#16a34a;

    font-weight:500;

}