*{
    box-sizing:border-box;
}


body{

    margin:0;

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

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

    background:
    linear-gradient(
        135deg,
        #111827,
        #1e293b
    );

}



.login-container{


    width:100%;

    max-width:420px;

    padding:20px;


}



.login-card{


    background:white;

    border-radius:18px;

    padding:40px;

    box-shadow:
    0 20px 50px rgba(0,0,0,.25);


}



.logo{


    text-align:center;

    margin-bottom:30px;


}


.logo h1{


    margin:0;

    font-size:32px;

    font-weight:700;

    color:#111827;


}


.logo span{


    color:#2563eb;

}



.logo p{


    margin-top:8px;

    color:#64748b;

    font-size:14px;


}




.form-group{


    margin-bottom:18px;


}



.form-group label{


    display:block;

    margin-bottom:7px;

    font-size:14px;

    font-weight:600;

    color:#334155;


}



.form-control{


    width:100%;

    padding:13px 15px;

    border:

    1px solid #cbd5e1;

    border-radius:10px;

    outline:none;

    font-size:14px;


}



.form-control:focus{


    border-color:#2563eb;


}



.btn-login{


    width:100%;

    padding:14px;

    border:none;

    border-radius:10px;

    background:#2563eb;

    color:white;

    font-weight:600;

    cursor:pointer;

    transition:.2s;


}



.btn-login:hover{


    background:#1d4ed8;


}



.footer-login{


    text-align:center;

    margin-top:25px;

    color:#94a3b8;

    font-size:12px;


}


.theme-toggle {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dbe3ee;
    border-radius: 13px;
    background: #ffffff;
    color: #172033;
    cursor: pointer;
    font-size: 20px;
    box-shadow: 0 10px 28px rgba(0,0,0,.18);
    transition: .2s ease;
}

.theme-toggle:hover {
    transform: translateY(-2px);
}

.theme-toggle-floating {
    position: fixed;
    top: 22px;
    right: 22px;
    z-index: 50;
}

.theme-toggle .icon-moon { display: none; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: inline; }

html[data-theme="dark"] {
    color-scheme: dark;
}

html[data-theme="dark"] body {
    background:
        radial-gradient(circle at 16% 18%, rgba(37,99,235,.25), transparent 34%),
        linear-gradient(135deg, #050912, #0b1220);
}

html[data-theme="dark"] .login-card {
    background: #111827;
    border: 1px solid #273247;
    box-shadow: 0 25px 65px rgba(0,0,0,.48);
}

html[data-theme="dark"] .logo h1,
html[data-theme="dark"] .form-group label {
    color: #e8eef9;
}

html[data-theme="dark"] .logo p,
html[data-theme="dark"] .footer-login {
    color: #94a3b8;
}

html[data-theme="dark"] .form-control {
    background: #0b1220;
    color: #e8eef9;
    border-color: #334155;
}

html[data-theme="dark"] .form-control::placeholder {
    color: #64748b;
}

html[data-theme="dark"] .theme-toggle {
    background: #111827;
    border-color: #334155;
    color: #f8fafc;
}