:root{
            --blue:#2563eb;
            --blue-dark:#1e40af;
            --dark:#020617;
            --panel:#ffffff;
            --muted:#64748b;
            --border:#e2e8f0;
        }

        body{
            margin:0;
            min-height:100vh;
            display:flex;
            align-items:center;
            justify-content:center;
            font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;
            background:radial-gradient(circle at top,#1e3a8a,#020617);
        }

        .login-wrapper{
            width:100%;
            max-width:420px;
            padding:20px;
        }

        .login-card{
            background:var(--panel);
            border-radius:20px;
            padding:40px 32px;
            box-shadow:0 30px 80px rgba(0,0,0,.35);
        }

        h1{
            margin-top:0;
            margin-bottom:8px;
            font-size:28px;
            text-align:center;
        }

        .subtitle{
            text-align:center;
            color:var(--muted);
            margin-bottom:30px;
        }

        label{
            font-weight:600;
            font-size:14px;
        }

        input{
    width:100%;
    padding:14px 16px;
    margin-top:6px;
    margin-bottom:22px;
    border-radius:12px;
    border:1px solid var(--border);
    font-size:15px;
    line-height:1.2;           /* 🔑 IMPORTANT */
    box-sizing:border-box;     /* 🔑 IMPORTANT */
}


        input:focus{
            outline:none;
            border-color:var(--blue);
            box-shadow:0 0 0 3px rgba(37,99,235,.15);
        }

        button{
            width:100%;
            padding:14px;
            border:none;
            border-radius:14px;
            background:linear-gradient(135deg,var(--blue),var(--blue-dark));
            color:white;
            font-weight:800;
            font-size:16px;
            cursor:pointer;
            box-shadow:0 12px 30px rgba(37,99,235,.45);
        }

        button:hover{
            transform:translateY(-1px);
        }

        .error{
            background:#fee2e2;
            color:#7f1d1d;
            padding:12px;
            border-radius:10px;
            margin-bottom:20px;
            font-size:14px;
            text-align:center;
        }

        .success{
            background:#dcfce7;
            color:#166534;
            padding:12px;
            border-radius:10px;
            margin-bottom:20px;
            font-size:14px;
            text-align:center;
        }

        .back-link{
            display:block;
            margin-top:22px;
            text-align:center;
            text-decoration:none;
            color:var(--muted);
            font-weight:600;
        }

        .back-link:hover{
            color:#fff;
        }

        .forgot-link{
            display:block;
            margin-top:14px;
            text-align:center;
            color:var(--muted);
            text-decoration:none;
            font-weight:700;
            font-size:14px;
        }

        .password-security-note{
            margin:-14px 0 18px;
            color:var(--muted);
            font-size:12px;
            line-height:1.45;
        }

        @media(max-width:480px){
            h1{font-size:24px;}
            .login-card{padding:32px 24px;}
        }