/* Extracted from Account/Login.cshtml. */
:root { --primary: #4f46e5; --primary-dark: #3730a3; --ink: #172554; --muted: #64748b; }
        * { box-sizing: border-box; }
        html, body { min-height: 100%; margin: 0; }
        body {
            display: flex; align-items: center; justify-content: center; padding: 28px 16px; min-height: 100vh;
            font-family: 'Segoe UI', Arial, sans-serif; color: var(--ink);
            background: linear-gradient(135deg, #eef2ff 0%, #dbeafe 48%, #f5f3ff 100%);
            position: relative; overflow-x: hidden;
        }
        body::before, body::after { content: ''; position: fixed; border-radius: 50%; filter: blur(2px); z-index: -1; }
        body::before { width: 360px; height: 360px; background: rgba(129, 140, 248, .25); top: -130px; left: -100px; }
        body::after { width: 420px; height: 420px; background: rgba(96, 165, 250, .22); right: -150px; bottom: -170px; }
        .login-card {
            width: min(100%, 440px); background: rgba(255,255,255,.94); border: 1px solid rgba(255,255,255,.8);
            border-radius: 24px; padding: 38px 40px 32px; box-shadow: 0 24px 70px rgba(30, 64, 175, .18);
            animation: rise .55s ease-out;
        }
        .brand { text-align: center; margin-bottom: 20px; }
        h1 { margin: 0; font-size: 27px; font-weight: 750; letter-spacing: -.5px; }
        .subtitle { text-align: center; color: var(--muted); margin: 0 0 28px; font-size: 14px; }
        .field { margin-bottom: 18px; }
        .field label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 700; }
        .input-wrap { position: relative; }
        .input-wrap span { position: absolute; left: 15px; top: 13px; color: #94a3b8; font-size: 17px; pointer-events: none; }
        .input-wrap input { width: 100%; height: 48px; padding: 0 15px 0 44px; border: 1px solid #dbe3f0; border-radius: 12px; outline: none; color: #1e293b; background: #f8fafc; transition: .2s; }
        .input-wrap input:focus { background: white; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(79,70,229,.12); }
        .error { min-height: 20px; margin-bottom: 12px; color: #dc2626; font-size: 13px; font-weight: 600; }
        .forgot-panel { display: none; padding: 16px; margin: -4px 0 20px; border: 1px solid #dbeafe; border-radius: 14px; background: #eff6ff; }
        .forgot-panel.open { display: block; animation: rise .25s ease-out; }
        .forgot-panel p { margin: 0 0 12px; color: var(--muted); font-size: 13px; }
        .forgot-panel .input-wrap input { height: 44px; background: white; }
        .forgot-submit { width: 100%; height: 42px; margin-top: 10px; border: 0; border-radius: 10px; color: white; background: var(--primary); font-weight: 700; cursor: pointer; }
        .options { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 24px; font-size: 13px; color: var(--muted); }
        .remember { display: flex; align-items: center; gap: 7px; font-weight: 600; }
        .remember input { width: 16px; height: 16px; accent-color: var(--primary); }
        a { color: var(--primary); text-decoration: none; font-weight: 700; } a:hover { text-decoration: underline; }
        .actions { display: flex; gap: 10px; }
        .actions input { height: 48px; border: 0; border-radius: 12px; font-weight: 700; cursor: pointer; transition: transform .2s, box-shadow .2s; }
        .submit { flex: 1; color: white; background: linear-gradient(135deg, var(--primary), #2563eb); box-shadow: 0 8px 18px rgba(79,70,229,.25); }
        .cancel, .home { width: 92px; color: #475569; background: #e2e8f0; text-align: center; line-height: 48px; }
        .home { width: 104px; color: #1d4ed8; background: #dbeafe; }
        .actions input:hover { transform: translateY(-2px); } .submit:hover { box-shadow: 0 12px 24px rgba(79,70,229,.35); }
        .footer { text-align: center; color: #94a3b8; font-size: 12px; margin-top: 25px; }
        @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
        @media (max-width: 480px) { .login-card { padding: 30px 22px 25px; border-radius: 20px; } h1 { font-size: 24px; } }