body {
    font-family: 'Inter', Arial, sans-serif;
    background: linear-gradient(135deg,#f4f6fb 0%, #e9eef8 35%, #f8f8ff 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.login-wrapper {
    width: 100%;
    max-width: 480px;
    padding: 24px;
}

        .login-box {
            background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(250,250,255,0.96));
            padding: 28px;
            border-radius: 14px;
            box-shadow: 0 10px 30px rgba(28,40,80,0.08);
            width: 100%;
            border: 1px solid rgba(16,24,56,0.04);
        }

        .brand {
            display:flex;
            align-items:center;
            gap:14px;
            margin-bottom: 14px;
        }

        .logo{
            width:56px;
            height:56px;
            border-radius:12px;
            background:linear-gradient(135deg,#7b61ff,#3aa0ff);
            color:#fff;
            display:flex;
            align-items:center;
            justify-content:center;
            font-weight:700;
            font-size:20px;
            box-shadow:0 6px 18px rgba(59,160,255,0.16);
        }

        .brand-text h1{
            margin:0;
            font-size:18px;
            font-weight:600;
            color:#12263b;
        }

        .subtitle{margin:0; font-size:13px; color:#556a7a}

        .login-form input {
            width: 100%;
            padding: 12px 14px;
            margin: 12px 0;
            border: 1px solid rgba(16,24,56,0.08);
            border-radius: 10px;
            background: #fff;
            transition: box-shadow .15s ease, border-color .15s ease;
            font-size:14px;
            color:#12263b;
        }

        .login-form input:focus{
            outline: none;
            box-shadow: 0 6px 18px rgba(58,160,255,0.12);
            border-color: rgba(58,160,255,0.6);
        }

        .btn{
            width:100%;
            padding:12px 14px;
            border-radius: 10px;
            border: none;
            cursor: pointer;
            font-weight:600;
            font-size:15px;
            color:#fff;
            background: linear-gradient(90deg,#7b61ff,#3aa0ff);
            box-shadow: 0 8px 20px rgba(123,97,255,0.16);
            transition: transform .12s ease, box-shadow .12s ease;
        }

        .btn:active{ transform: translateY(1px); }

        .btn:hover{ box-shadow: 0 12px 26px rgba(58,160,255,0.14); }

        .form-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:6px }

        .remember{ font-size:13px; color:#4b6574 }

        .forgot{ font-size:13px; color:#366ef0; text-decoration:none }

        .forgot:hover{ text-decoration:underline }

        .login-footer{ margin-top:14px; text-align:center; font-size:13px; color:#52636e }

        .login-footer a{ color:#366ef0; text-decoration:none }

        .login-footer a:hover{ text-decoration:underline }

        @media (max-width:420px){
            .login-wrapper{ padding:12px }
            .logo{ width:48px; height:48px }
            .brand-text h1{ font-size:16px }
        }