/* Extracted from Views/Account/Login.cshtml. */
/* -- Tokens - work for both dark (default) and light OS themes -- */
        :root {
            --lp-bg-a:       #0F2027;
            --lp-bg-b:       #203A43;
            --lp-bg-c:       #2C5364;
            --lp-surface:    rgba(255,255,255,0.07);
            --lp-border:     rgba(255,255,255,0.15);
            --lp-text:       #ffffff;
            --lp-text-sub:   rgba(255,255,255,0.70);
            --lp-text-muted: rgba(255,255,255,0.45);
            --lp-input-bg:   rgba(255,255,255,0.08);
            --lp-input-text: #ffffff;
            --lp-autofill-bg: #172f38;
            --lp-autofill-text: #ffffff;
            --lp-cyan:       #00d4ff;
            --lp-blue:       #0080ff;
            --lp-danger:     #ff6b6b;
            --lp-particle:   rgba(0,212,255,0.55);
        }

        /* Light mode - honour OS preference (page has no server-side theme) */
        @media (prefers-color-scheme: light) {
            :root {
                --lp-bg-a:       #e8f4f8;
                --lp-bg-b:       #d0e8f0;
                --lp-bg-c:       #b8dcec;
                --lp-surface:    rgba(255,255,255,0.75);
                --lp-border:     rgba(0,140,180,0.25);
                --lp-text:       #0d2b38;
                --lp-text-sub:   rgba(13,43,56,0.80);
                --lp-text-muted: rgba(13,43,56,0.50);
                --lp-input-bg:   rgba(255,255,255,0.90);
                --lp-input-text: #0d2b38;
                --lp-autofill-bg: #ffffff;
                --lp-autofill-text: #0d2b38;
                --lp-particle:   rgba(0,140,180,0.30);
            }
        }

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

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            min-height: 100vh;
            background: linear-gradient(135deg,
                var(--lp-bg-a) 0%, var(--lp-bg-b) 50%, var(--lp-bg-c) 100%);
            color-scheme: dark;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }
        @media (prefers-color-scheme: light) {
            body { color-scheme: light; }
        }

        /* -- Animated particles -- */
        .particles {
            position: absolute; width: 100%; height: 100%;
            overflow: hidden; z-index: 0;
        }
        .particle {
            position: absolute; width: 4px; height: 4px;
            background: var(--lp-particle);
            border-radius: 50%;
            animation: float 15s infinite;
        }
        @keyframes float {
            0%, 100% { transform: translateY(0) translateX(0); opacity: 0; }
            10% { opacity: 1; }
            90% { opacity: 1; }
            100% { transform: translateY(-100vh) translateX(100px); opacity: 0; }
        }

        /* -- Grid overlay -- */
        .grid-overlay {
            position: absolute; width: 100%; height: 100%;
            background-image:
                linear-gradient(rgba(0,212,255,0.05) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0,212,255,0.05) 1px, transparent 1px);
            background-size: 50px 50px; z-index: 1;
            animation: gridScroll 20s linear infinite;
        }
        @keyframes gridScroll { 100% { transform: translateY(50px); } }

        /* -- Login card -- */
        .login-container {
            position: relative; z-index: 10;
            width: 100%; max-width: 480px; padding: 20px;
        }
        .login-card {
            background: var(--lp-surface);
            backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
            border-radius: 24px;
            border: 1px solid var(--lp-border);
            box-shadow: 0 8px 32px rgba(0,0,0,0.3),
                        inset 0 1px 0 rgba(255,255,255,0.1);
            padding: 50px 40px;
            position: relative; overflow: hidden;
        }
        .login-card::before {
            content: '';
            position: absolute; top: -50%; left: -50%;
            width: 200%; height: 200%;
            background: conic-gradient(
                from 0deg, transparent, rgba(0,212,255,0.08), transparent 30%);
            animation: rotate 6s linear infinite;
            pointer-events: none;
        }
        @keyframes rotate { 100% { transform: rotate(360deg); } }

        /* -- Header -- */
        .login-header {
            text-align: center; margin-bottom: 40px;
            position: relative; z-index: 1;
        }
        .logo-container {
            width: 80px; height: 80px;
            margin: 0 auto 20px;
            background: linear-gradient(135deg, var(--lp-cyan), var(--lp-blue));
            border-radius: 20px;
            display: flex; align-items: center; justify-content: center;
            animation: glow 2s ease-in-out infinite;
        }
        @keyframes glow {
            0%, 100% { box-shadow: 0 0 20px rgba(0,212,255,0.5); }
            50%       { box-shadow: 0 0 40px rgba(0,212,255,0.8); }
        }
        .logo-container i { font-size: 40px; color: #fff; }
        .login-header h1 {
            color: var(--lp-text);
            font-size: 28px; font-weight: 700; margin-bottom: 8px;
            text-shadow: 0 2px 10px rgba(0,0,0,0.2);
        }
        .login-header p {
            color: var(--lp-text-sub);
            font-size: 14px; margin: 0;
        }

        /* -- Form -- */
        .form-group {
            margin-bottom: 24px; position: relative; z-index: 1;
        }
        label,
        .form-label {
            color: var(--lp-text) !important;
            font-size: 14px; font-weight: 600;
            margin-bottom: 8px; display: block;
        }
        .form-control {
            background: var(--lp-input-bg) !important;
            border: 1px solid var(--lp-border) !important;
            border-radius: 12px;
            color: var(--lp-input-text) !important;
            padding: 14px 48px 14px 18px;
            font-size: 15px;
            transition: all 0.3s ease;
            width: 100%;
        }
        .form-control:focus {
            background: var(--lp-input-bg) !important;
            border-color: var(--lp-cyan) !important;
            box-shadow: 0 0 0 3px rgba(0,212,255,0.12) !important;
            color: var(--lp-input-text) !important;
            outline: none;
        }
        .form-control::placeholder {
            color: var(--lp-text-muted);
            opacity: 1;
        }

        /* Prevent browser autofill from overriding colours */
        .form-control:autofill,
        .form-control:-webkit-autofill,
        .form-control:autofill:hover,
        .form-control:-webkit-autofill:hover,
        .form-control:autofill:focus,
        .form-control:-webkit-autofill:focus {
            background-color: var(--lp-autofill-bg) !important;
            background-clip: padding-box !important;
            border-color: var(--lp-cyan) !important;
            color: var(--lp-autofill-text) !important;
            -webkit-text-fill-color: var(--lp-autofill-text) !important;
            -webkit-box-shadow: 0 0 0 1000px var(--lp-autofill-bg) inset !important;
            box-shadow: 0 0 0 1000px var(--lp-autofill-bg) inset !important;
            caret-color: var(--lp-autofill-text);
            transition: background-color 9999s ease-out, color 9999s ease-out;
        }

        /* -- Input icon -- */
        .input-group { position: relative; }
        .input-icon {
            position: absolute; right: 18px; top: 50%;
            transform: translateY(-50%);
            color: var(--lp-text-muted); font-size: 18px;
            pointer-events: none;
        }

        /* -- Remember me -- */
        .form-check {
            margin-bottom: 24px; display: flex; align-items: center;
            position: relative; z-index: 1; gap: 10px;
        }
        .form-check-input {
            background: var(--lp-input-bg) !important;
            border: 2px solid var(--lp-border) !important;
            width: 20px; height: 20px; cursor: pointer;
            flex-shrink: 0; border-radius: 5px !important;
        }
        .form-check-input:checked {
            background-color: var(--lp-cyan) !important;
            border-color: var(--lp-cyan) !important;
        }
        .form-check-input:focus {
            box-shadow: 0 0 0 3px rgba(0,212,255,0.15) !important;
        }
        .form-check-label,
        .form-check label {
            color: var(--lp-text-sub) !important;
            font-size: 14px; cursor: pointer;
            margin-left: 0;
            user-select: none;
        }
        /* Helper text under Remember me */
        .remember-hint {
            font-size: .72rem;
            color: var(--lp-text-muted) !important;
            margin-top: -18px; margin-bottom: 20px;
            padding-left: 30px;
            position: relative; z-index: 1;
        }
        /* Validation error text */
        .text-danger, .field-validation-error {
            color: var(--lp-danger) !important;
        }
        /* Footer copyright always readable */
        .footer-text { color: var(--lp-text-muted) !important; }

        /* -- Sign in button -- */
        .btn-login {
            width: 100%; padding: 16px; border: none;
            border-radius: 12px;
            background: linear-gradient(135deg, var(--lp-cyan), var(--lp-blue));
            color: #fff; font-size: 16px; font-weight: 600;
            cursor: pointer; transition: all 0.3s ease;
            position: relative; overflow: hidden; z-index: 1;
        }
        .btn-login::before {
            content: ''; position: absolute;
            top: 0; left: -100%; width: 100%; height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
            transition: left .5s;
        }
        .btn-login:hover::before { left: 100%; }
        .btn-login:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(0,212,255,0.4);
        }
        .btn-login:active { transform: translateY(0); }

        /* -- Footer links -- */
        .forgot-password {
            text-align: center; margin-top: 20px;
            position: relative; z-index: 1;
        }
        .forgot-password a {
            color: var(--lp-cyan); text-decoration: none;
            font-size: 14px; font-weight: 500;
            transition: all 0.3s ease;
        }
        .forgot-password a:hover { text-shadow: 0 0 10px rgba(0,212,255,0.5); }

        /* -- Error alert -- */
        .alert {
            background: rgba(220,53,69,0.12);
            border: 1px solid rgba(220,53,69,0.35);
            border-radius: 12px;
            color: var(--lp-danger);
            padding: 14px 18px; margin-bottom: 24px;
            font-size: 14px; position: relative; z-index: 1;
        }

        .auth-info-alert {
            background: rgba(0,212,255,0.12);
            border-color: rgba(0,212,255,0.35);
            color: var(--lp-text-sub);
        }

        /* -- Footer copyright -- */
        .footer-text {
            text-align: center;
            color: var(--lp-text-muted);
            font-size: 12px; margin-top: 30px;
            position: relative; z-index: 1;
        }

        /* -- Mobile -- */
        @media (max-width: 576px) {
            .login-card { padding: 36px 24px; }
            .login-header h1 { font-size: 22px; }
        }