*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        body { font-family: 'Inter', sans-serif; min-height: 100vh; background: var(--text-primary); overflow-x: hidden; }

        /* ── Layout ─────────────────────────────────────────── */
        .login-wrapper { display: flex; min-height: 100vh; }

        /* ── Brand Panel ─────────────────────────────────────── */
        .brand-panel {
            flex: 0 0 62%;
            background: url("../images/solar_bg.jpg") center center / cover no-repeat;
            color: #fff;
            padding: 3rem 4rem;
            display: flex;
            flex-direction: column;
            position: relative;
            overflow: hidden;
        }

        /* Dark overlay so text stays readable */
        .brand-panel::before {
            content: '';
            position: absolute; inset: 0;
            background: linear-gradient(135deg, rgba(5,15,30,0.78) 0%, rgba(8,22,44,0.65) 100%);
            z-index: 0;
        }

        /* Glow orbs */
        .bg-glow {
            position: absolute; border-radius: 50%;
            filter: blur(90px); opacity: 0.13; z-index: 0;
            animation: drift 14s infinite ease-in-out alternate;
        }
        .bg-glow.g1 { width: 520px; height: 520px; background: radial-gradient(circle, var(--brand-green), transparent); top: -160px; left: -120px; }
        .bg-glow.g2 { width: 420px; height: 420px; background: radial-gradient(circle, #133b5c, transparent); bottom: -100px; right: -60px; animation-delay: -7s; }
        .bg-glow.g3 { width: 280px; height: 280px; background: radial-gradient(circle, var(--brand-green-hover), transparent); top: 45%; right: 80px; opacity: 0.07; animation-delay: -3s; }

        @keyframes drift {
            0%   { transform: translate(0, 0) scale(1); }
            100% { transform: translate(22px, 32px) scale(1.06); }
        }

        /* Solar orbit SVG decoration */
        .solar-orbit {
            position: absolute; top: -60px; right: -60px;
            width: 380px; height: 380px; z-index: 0; opacity: 0.1;
            pointer-events: none;
        }
        .orbit-ring { fill: none; stroke: var(--brand-green-hover); stroke-width: 1; }
        .orbit-g1 { transform-origin: 190px 190px; animation: spin 22s linear infinite; }
        .orbit-g2 { transform-origin: 190px 190px; animation: spin 14s linear infinite reverse; }
        .orbit-g3 { transform-origin: 190px 190px; animation: spin 35s linear infinite; }
        @keyframes spin { to { transform: rotate(360deg); } }

        /* Brand Content */
        .brand-content { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; }

        .brand-header { display: flex; align-items: center; gap: 16px; margin-bottom: 2.5rem; }

        .brand-logo-box {
            width: 52px; height: 52px;
            background: linear-gradient(135deg, rgba(45,122,39,0.2), rgba(62,163,54,0.08));
            border: 1px solid rgba(45,122,39,0.45);
            border-radius: 14px;
            display: flex; align-items: center; justify-content: center;
            box-shadow: 0 0 24px rgba(45,122,39,0.18), inset 0 1px 0 rgba(255,255,255,0.1);
            flex-shrink: 0;
        }
        .brand-logo-box img { max-width: 32px; max-height: 32px; object-fit: contain; }

        .brand-title   { font-size: 26px; font-weight: 800; color: #fff; line-height: 1; margin-bottom: 4px; }
        .brand-subtitle { font-size: 11px; font-weight: 700; color: var(--brand-green-hover); letter-spacing: 0.09em; text-transform: uppercase; }

        /* Intro */
        .intro-section { margin-bottom: 2rem; max-width: 88%; }
        .eyebrow {
            display: inline-flex; align-items: center; gap: 7px;
            font-size: 11px; font-weight: 700; color: var(--brand-green-hover);
            letter-spacing: 0.11em; text-transform: uppercase;
            background: rgba(45,122,39,0.1);
            border: 1px solid rgba(45,122,39,0.25);
            padding: 4px 12px; border-radius: 20px;
            margin-bottom: 1rem;
        }
        .intro-section h2 { font-size: 29px; font-weight: 300; line-height: 1.35; margin-bottom: 0.75rem; }
        .intro-section h2 strong { font-weight: 800; color: var(--brand-green-hover); }
        .intro-section p { font-size: 13.5px; color: rgba(255,255,255,0.58); line-height: 1.7; }

        /* Stats Strip */
        .stats-strip {
            display: flex;
            margin-bottom: 2.25rem;
            background: rgba(255,255,255,0.028);
            border: 1px solid rgba(255,255,255,0.07);
            border-radius: 14px;
            overflow: hidden;
        }
        .stat-item { flex: 1; text-align: center; padding: 1.15rem 0.5rem; position: relative; }
        .stat-item:not(:last-child)::after {
            content: ''; position: absolute; right: 0; top: 22%; bottom: 22%;
            width: 1px; background: rgba(255,255,255,0.07);
        }
        .stat-num {
            font-size: 24px; font-weight: 800; line-height: 1; margin-bottom: 5px;
            background: linear-gradient(135deg, var(--brand-green-hover) 30%, #a0f797);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .stat-label { font-size: 10px; color: rgba(255,255,255,0.42); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }

        /* Info Grid */
        .info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 2rem; }

        .glass-panel {
            background: rgba(255,255,255,0.025);
            border: 1px solid rgba(255,255,255,0.07);
            border-radius: 14px; padding: 1.25rem;
            backdrop-filter: blur(8px);
            transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
        }
        .glass-panel:hover { transform: translateY(-3px); border-color: rgba(62,163,54,0.35); background: rgba(255,255,255,0.04); }

        .panel-title {
            font-size: 11px; font-weight: 700; color: var(--brand-green-hover);
            letter-spacing: 0.1em; text-transform: uppercase;
            margin-bottom: 1rem;
            display: flex; align-items: center; gap: 7px;
        }
        .capabilities-list, .values-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; }
        .capabilities-list { grid-template-columns: 1fr 1fr; }
        .list-item { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: rgba(255,255,255,0.8); }
        .list-item i { color: var(--brand-green-hover); font-size: 11px; flex-shrink: 0; }

        /* Brand Footer */
        .brand-footer {
            margin-top: auto;
            display: flex; justify-content: space-between; align-items: center;
            padding-top: 1.5rem;
            border-top: 1px solid rgba(255,255,255,0.07);
        }
        .powered-by { font-size: 11px; color: rgba(255,255,255,0.32); line-height: 1.8; }
        .website-link {
            color: var(--brand-green-hover); text-decoration: none; font-size: 13px; font-weight: 600;
            display: flex; align-items: center; gap: 6px; transition: color 0.2s;
        }
        .website-link:hover { color: #62d459; }

        /* ── Form Panel ──────────────────────────────────────── */
        .form-panel {
            flex: 0 0 38%;
            background: #ffffff;
            display: flex; flex-direction: column;
            overflow-y: auto; position: relative; z-index: 10;
        }

        /* Green accent bar */
        .form-panel::before {
            content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
            background: linear-gradient(90deg, var(--brand-green), var(--brand-green-hover), #7fff6e, var(--brand-green-hover));
            background-size: 200% 100%;
            animation: shimmer 4s linear infinite;
        }
        @keyframes shimmer { 0% { background-position: 0% 0%; } 100% { background-position: 200% 0%; } }

        .form-inner {
            flex: 1; display: flex; flex-direction: column; justify-content: center;
            padding: 3rem 2.75rem;
            max-width: 420px; margin: 0 auto; width: 100%;
            animation: slideUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
        }
        @keyframes slideUp {
            from { opacity: 0; transform: translateY(20px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        /* Headings */
        .f-eyebrow {
            display: inline-flex; align-items: center; gap: 6px;
            font-size: 11px; font-weight: 700; color: var(--brand-green);
            letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.75rem;
        }
        .f-heading    { font-size: 30px; font-weight: 800; color: var(--text-primary); margin-bottom: 6px; line-height: 1.1; }
        .f-subheading { font-size: 14px; color: #64748B; margin-bottom: 2rem; }

        /* Input groups */
        .input-group-wrap { margin-bottom: 1.2rem; }
        .f-label { display: block; font-size: 12px; font-weight: 700; color: #334155; margin-bottom: 7px; letter-spacing: 0.02em; }

        .input-icon-wrap { position: relative; }
        .icon-left {
            position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
            color: #CBD5E1; font-size: 15px; pointer-events: none;
            transition: color 0.2s;
        }
        .input-icon-wrap:focus-within .icon-left { color: var(--brand-green); }

        .f-input {
            width: 100%;
            border: 1.5px solid #E2E8F0; border-radius: 11px;
            padding: 0.82rem 1rem 0.82rem 2.7rem;
            font-size: 14px; color: #0F172A;
            font-family: 'Inter', sans-serif;
            background: #F8FAFC;
            transition: all 0.2s; outline: none;
        }
        .f-input::placeholder { color: #CBD5E1; }
        .f-input:focus {
            background: #fff; border-color: var(--brand-green);
            box-shadow: 0 0 0 4px rgba(45,122,39,0.1);
        }

        /* Password field */
        .pw-wrap { position: relative; }
        .pw-wrap .f-input { padding-right: 44px; }
        .pw-eye {
            position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
            background: none; border: none; color: #CBD5E1; cursor: pointer;
            padding: 5px; font-size: 16px; line-height: 1;
            border-radius: 7px; transition: color 0.2s, background 0.2s;
        }
        .pw-eye:hover { color: #475569; background: #F1F5F9; }

        /* Checkbox + Forgot */
        .form-check-input:checked { background-color: var(--brand-green); border-color: var(--brand-green); }
        .form-check-input:focus   { box-shadow: 0 0 0 3px rgba(45,122,39,0.15); border-color: var(--brand-green); }
        .form-check-label { font-size: 13px; color: #64748B; }
        .forgot-link { font-size: 13px; color: var(--brand-green); text-decoration: none; font-weight: 600; }
        .forgot-link:hover { color: var(--brand-green-hover); text-decoration: underline; }

        /* Submit button */
        .btn-signin {
            width: 100%;
            background: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-green-hover) 100%);
            color: #fff; border: none; border-radius: 11px;
            padding: 0.9rem 1rem;
            font-size: 15px; font-weight: 700;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            display: flex; align-items: center; justify-content: center; gap: 9px;
            transition: all 0.2s; margin-top: 1.5rem;
            position: relative; overflow: hidden;
            box-shadow: 0 4px 18px rgba(45,122,39,0.32);
            letter-spacing: 0.02em;
        }
        .btn-signin::after {
            content: ''; position: absolute; inset: 0;
            background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, transparent 55%);
            pointer-events: none;
        }
        .btn-signin:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(45,122,39,0.42); background: linear-gradient(135deg, #358f2e 0%, #4ac440 100%); }
        .btn-signin:active { transform: translateY(0); box-shadow: 0 3px 10px rgba(45,122,39,0.25); }

        /* Security badge */
        .v-badge {
            display: inline-flex; align-items: center; gap: 7px;
            background: #F8FAFC; color: #64748B;
            font-size: 11px; font-weight: 600;
            padding: 7px 16px; border-radius: 20px;
            margin-top: 1.75rem;
            border: 1px solid #E2E8F0;
        }
        .v-badge i { color: var(--brand-green); }

        /* Error alert */
        .err-alert {
            background: #FEF2F2; color: #B91C1C;
            border: 1px solid #FECACA;
            border-radius: 10px; padding: 0.75rem 1rem;
            font-size: 13px; font-weight: 500;
            display: flex; align-items: center; gap: 8px;
            margin-bottom: 1.5rem;
        }

        /* ── Dark mode ────────────────────────────────────────── */
        /* Removed dark mode media query as we are now forcing a dark theme */

        /* ── Responsive ───────────────────────────────────────── */
        @media (max-width: 1024px) {
            .brand-panel { flex: 0 0 55%; padding: 2.5rem 3rem; }
            .form-panel  { flex: 0 0 45%; }
        }
        @media (max-width: 767.98px) {
            .login-wrapper { flex-direction: column; }
            .brand-panel   { flex: none; width: 100%; padding: 2rem 1.75rem; min-height: 0; }
            .form-panel    { flex: none; width: 100%; }
            .form-inner    { padding: 2.5rem 1.75rem; }
            .info-grid     { grid-template-columns: 1fr; }
            .solar-orbit   { display: none; }
            .bg-glow.g3    { display: none; }
        }