*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}

body{
    min-height:100vh;

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

    transition:.3s ease;

    background:#0f0f0f;
    color:white;
}

body.light-mode{
    background:#f5f5f5;
    color:#111;
}

/* TOGGLE */

.theme-toggle{
    position:absolute;

    top:30px;
    right:30px;

    width:52px;
    height:52px;

    border-radius:50%;

    border:none;

    cursor:pointer;

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

    font-size:1.5rem;

    background:#1f1f1f;
    color:white;

    transition:.3s;
}

body.light-mode .theme-toggle{
    background:white;
    color:#111;

    border:1px solid #ddd;
}

/* LOGIN BOX */

.login-container{
    width:100%;
    max-width:430px;

    padding:45px;

    border-radius:28px;

    backdrop-filter:blur(20px);

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    box-shadow:0 10px 40px rgba(0,0,0,.25);
}

body.light-mode .login-container{
    background:white;

    border:1px solid #e5e5e5;
}

/* LOGO */

.logo-wrapper{
    display:flex;
    justify-content:center;

    margin-bottom:25px;
}

.logo{
    width:180px;

    transition:.3s;
}

/* TEXT */

h1{
    text-align:center;

    font-size:2rem;

    margin-bottom:10px;
}

.subtitle{
    text-align:center;

    opacity:.7;

    margin-bottom:35px;

    line-height:1.5;
}

/* INPUTS */

.input-group{
    margin-bottom:20px;
}

.input-group label{
    display:block;

    margin-bottom:8px;

    font-size:.95rem;
}

.input-group input{
    width:100%;

    padding:16px;

    border-radius:14px;

    border:none;

    outline:none;

    font-size:1rem;

    background:rgba(255,255,255,.08);

    color:white;
}

body.light-mode .input-group input{
    background:#f1f1f1;

    color:#111;
}

/* PASSWORD */

.password-wrapper{
    position:relative;
}

.password-wrapper input{
    padding-right:55px;
}

.toggle-password{
    position:absolute;

    top:50%;
    right:18px;

    transform:translateY(-50%);

    cursor:pointer;

    font-size:1.2rem;

    opacity:.8;

    color:rgb(21, 6, 6);
}

body.light-mode .toggle-password{
    color:#111;
}

/* REMEMBER */

.remember{
    display:flex;
    align-items:center;
    gap:10px;

    margin-bottom:25px;
}

/* BUTTON */

.login-btn{
    width:100%;

    padding:16px;

    border:none;

    border-radius:14px;

    cursor:pointer;

    font-size:1rem;

    font-weight:bold;

    background:white;
    color:#111;

    transition:.3s;
}

body.light-mode .login-btn{
    background:#111;
    color:white;
}

.login-btn:hover{
    transform:translateY(-2px);
}

/* ERRORS */

.errors{
    margin-bottom:20px;

    color:#ff6b6b;

    text-align:center;
}