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

body {
    font-family: "Segoe UI", Arial, sans-serif;
    background: linear-gradient(135deg, #111827, #1f2937);
    color: #ffffff;
    min-height: 100vh;

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

.auth-container {

    width: 100%;
    max-width: 440px;

    padding: 40px;

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

    backdrop-filter: blur(16px);

    border-radius: 20px;

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

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

.logo {

    text-align:center;

    font-size:34px;

    font-weight:700;

    color:#10b981;

    margin-bottom:10px;

    letter-spacing:2px;
}

.subtitle{

    text-align:center;

    color:#9ca3af;

    margin-bottom:35px;
}

h1{

    font-size:28px;

    margin-bottom:25px;

    text-align:center;
}

.form-group{

    margin-bottom:20px;
}

label{

    display:block;

    margin-bottom:8px;

    font-weight:600;
}

.form-control{

    width:100%;

    padding:14px;

    border-radius:12px;

    border:1px solid #374151;

    background:#1f2937;

    color:white;

    font-size:15px;

    transition:.25s;
}

.form-control:focus{

    outline:none;

    border-color:#10b981;

    box-shadow:0 0 0 3px rgba(16,185,129,.25);
}

.btn{

    width:100%;

    padding:15px;

    background:#10b981;

    color:white;

    border:none;

    border-radius:12px;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:.2s;
}

.btn:hover{

    background:#059669;

    transform:translateY(-2px);
}

.auth-link{

    margin-top:25px;

    text-align:center;
}

.auth-link a{

    color:#10b981;

    text-decoration:none;

    font-weight:600;
}

.flash{

    padding:14px;

    border-radius:10px;

    margin-bottom:20px;

    text-align:center;

    font-weight:600;
}

.flash.success{

    background:#065f46;
}

.flash.danger{

    background:#991b1b;
}