/* Styles moved from Views/Account/Login.cshtml */

:root {
            --brand: #0d6efd;
            --navy: #0f2f7a;
            --bg1: #f3f6fb;
            --bg2: #d9e3f7;
            --radius: 18px;
            --shadow: 0 16px 40px rgba(16,24,40,.14);
            --border: rgba(15,47,122,.12);
        }

        /* Page */
        body {
            font-family: "Inter", "Poppins", "Segoe UI", sans-serif;
            background: radial-gradient(1100px 700px at 15% 10%, #ffffff 0%, var(--bg1) 45%, var(--bg2) 100%);
            min-height: 100vh;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 18px;
            color: #1b2b4a;
        }

        /* Wrapper */
        .login-shell {
            width: 100%;
            max-width: 980px;
            display: grid;
            grid-template-columns: 1.05fr .95fr;
            gap: 18px;
            align-items: stretch;
            animation: fadeIn .7s ease;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(16px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Left Panel */
        .panel-left {
            position: relative;
            border-radius: var(--radius);
            border: 1px solid var(--border);
            background: linear-gradient(135deg, rgba(13,110,253,.10), rgba(15,47,122,.07));
            box-shadow: var(--shadow);
            overflow: hidden;
            padding: 26px;
        }

            .panel-left::before {
                content: "";
                position: absolute;
                inset: -120px -160px auto auto;
                width: 380px;
                height: 380px;
                background: radial-gradient(circle at 30% 30%, rgba(13,110,253,.25), transparent 70%);
                transform: rotate(15deg);
            }

            .panel-left::after {
                content: "";
                position: absolute;
                inset: auto auto -140px -140px;
                width: 420px;
                height: 420px;
                background: radial-gradient(circle at 50% 50%, rgba(15,47,122,.22), transparent 70%);
            }

        .brand-top {
            position: relative;
            z-index: 2;
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 18px;
        }

        .brand-badge {
            width: 44px;
            height: 44px;
            border-radius: 14px;
            background: #fff;
            border: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 10px 25px rgba(13,110,253,.12);
            color: var(--navy);
            font-weight: 900;
        }

        .brand-title {
            font-weight: 900;
            letter-spacing: .2px;
            font-size: 18px;
            margin: 0;
        }

        .brand-sub {
            margin: 0;
            color: #6b7a90;
            font-size: 13px;
        }

        .hero {
            position: relative;
            z-index: 2;
            margin-top: 18px;
        }

            .hero h1 {
                font-weight: 900;
                font-size: 30px;
                margin: 0 0 10px 0;
                color: #16294a;
                letter-spacing: .2px;
            }

            .hero p {
                margin: 0;
                color: #4d5f7a;
                font-size: 14px;
                line-height: 1.65;
                max-width: 420px;
            }

        .hero-list {
            position: relative;
            z-index: 2;
            margin-top: 18px;
            display: grid;
            gap: 10px;
        }

        .hero-item {
            display: flex;
            gap: 10px;
            align-items: flex-start;
            padding: 10px 12px;
            border-radius: 14px;
            background: rgba(255,255,255,.7);
            border: 1px solid rgba(15,47,122,.10);
        }

            .hero-item i {
                color: var(--brand);
                font-size: 18px;
                margin-top: 1px;
            }

            .hero-item b {
                display: block;
                font-weight: 800;
                font-size: 13px;
                color: #243a63;
            }

            .hero-item span {
                display: block;
                font-size: 12px;
                color: #6b7a90;
                margin-top: 2px;
            }

        /* Right Card */
        .panel-right {
            border-radius: var(--radius);
            border: 1px solid var(--border);
            background: rgba(255,255,255,.92);
            box-shadow: var(--shadow);
            padding: 26px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .logo-wrap {
            display: flex;
            justify-content: center;
            margin-bottom: 10px;
        }

            .logo-wrap img {
                width: 190px;
                border-radius: 16px;
                background: #fff;
                padding: 8px 12px;
                border: 1px solid rgba(15,47,122,.10);
                box-shadow: 0 10px 24px rgba(13,110,253,.12);
                animation: floatLogo 3.5s ease-in-out infinite;
            }

        @keyframes floatLogo {
            0%, 100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-6px);
            }
        }

        .login-title {
            text-align: center;
            font-weight: 900;
            color: var(--navy);
            margin: 10px 0 2px;
            font-size: 18px;
            letter-spacing: .2px;
        }

        .login-sub {
            text-align: center;
            color: #6b7a90;
            font-size: 13px;
            margin: 0 0 18px;
        }

        /* Inputs */
        .form-label {
            font-weight: 800;
            font-size: 12px;
            color: #2b3f63;
            letter-spacing: .3px;
            text-transform: uppercase;
        }

        .form-control {
            border-radius: 14px;
            border: 1px solid rgba(15,47,122,.14);
            background: #f9fbff;
            padding: 11px 12px;
            transition: all .2s ease;
        }

            .form-control:focus {
                background: #fff;
                border-color: rgba(13,110,253,.55);
                box-shadow: 0 0 0 0.18rem rgba(13,110,253,.18);
            }

        .input-group .btn {
            border-radius: 14px;
            border: 1px solid rgba(15,47,122,.14);
            background: #fff;
        }

            .input-group .btn:hover {
                border-color: rgba(13,110,253,.45);
                box-shadow: 0 10px 20px rgba(13,110,253,.08);
            }

        /* Button */
        .btn-primary {
            border-radius: 14px;
            padding: 11px 12px;
            font-weight: 800;
            letter-spacing: .2px;
        }

        /* Alerts */
        .alert {
            border-radius: 14px;
            font-size: 13px;
            padding: 10px 12px;
        }

        /* Footer */
        .footer-text {
            text-align: center;
            margin-top: 14px;
            color: #7a889d;
            font-size: 12px;
        }

        /* Responsive */
        @media (max-width: 992px) {
            .login-shell {
                grid-template-columns: 1fr;
                max-width: 520px;
            }

            .panel-left {
                display: none;
            }
        }