:root {
            --g1: #1B4332;
            --g2: #2D6A4F;
            --g3: #40916C;
            --g4: #74C69D;
            --gp: #D8F3DC;
            --gxp: #EBF7EE;
            --ink: #0F1A12;
            --ink2: #2C3E30;
            --mid: #5A6B5E;
            --lt: #8FA593;
            --bg: #FAFBF9;
            --bg2: #F3F5F1;
            --brd: #DDE2DA;
            --brd2: #CDD4C9;
            --white: #FFFFFF;
            --shadow-sm: 0 1px 3px rgba(27,67,50,.08);
            --shadow-md: 0 4px 16px rgba(27,67,50,.10);
            --r-md: 10px;
            --r-lg: 16px;
            --font-d: 'Lora', Georgia, serif;
            --font-ui: 'Cairo', sans-serif;
        }

        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        html { font-size: 16px; }
        body {
            font-family: var(--font-ui);
            background: var(--bg);
            color: var(--ink);
            min-height: 100vh;
            -webkit-font-smoothing: antialiased;
        }
        button, input, select, textarea { font-family: var(--font-ui); }
        button { cursor: pointer; }

        /* ── LOGIN LAYOUT ── */
        .login-screen {
            display: flex;
            min-height: 100vh;
            align-items: stretch;
        }

        /* ── LEFT PANEL ── */
        .login-left {
            flex: 1;
            background: var(--g1);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 60px 48px;
            position: relative;
            overflow: hidden;
        }
        .login-left::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(ellipse 60% 50% at 20% 80%, rgba(64,145,108,.35) 0%, transparent 60%),
                radial-gradient(ellipse 50% 60% at 80% 20%, rgba(116,198,157,.18) 0%, transparent 55%);
        }
        .login-geo { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
        .login-geo::before {
            content: '';
            position: absolute;
            width: 420px; height: 420px;
            border: 1px solid rgba(255,255,255,.07);
            border-radius: 50%;
            top: -80px; right: -120px;
        }
        .login-geo::after {
            content: '';
            position: absolute;
            width: 280px; height: 280px;
            border: 1px solid rgba(255,255,255,.06);
            border-radius: 50%;
            bottom: -60px; left: -80px;
        }

        .login-brand {
            position: relative;
            z-index: 1;
            text-align: center;
            animation: fadeUp .6s ease both;
        }
        .login-logo {
            width: 72px; height: 72px;
            border-radius: 20px;
            background: rgba(255,255,255,.12);
            border: 1px solid rgba(255,255,255,.2);
            display: flex; align-items: center; justify-content: center;
            margin: 0 auto 20px;
            font-size: 32px;
        }
        .login-brand h1 {
            font-family: var(--font-d);
            font-size: 28px;
            font-weight: 600;
            color: #fff;
            margin-bottom: 6px;
        }
        .login-brand p {
            font-size: 14px;
            color: rgba(255,255,255,.6);
            line-height: 1.6;
            max-width: 280px;
            margin: 0 auto;
        }

        .login-stats {
            position: relative;
            z-index: 1;
            display: flex;
            gap: 28px;
            margin-top: 56px;
            animation: fadeUp .6s .2s ease both;
        }
        .login-stat .num {
            font-family: var(--font-d);
            font-size: 26px;
            font-weight: 600;
            color: #fff;
            display: block;
        }
        .login-stat .lbl2 {
            font-size: 12px;
            color: rgba(255,255,255,.5);
            margin-top: 2px;
        }

        .login-quote {
            position: relative;
            z-index: 1;
            margin-top: 48px;
            max-width: 300px;
            text-align: center;
            animation: fadeUp .6s .35s ease both;
        }
        .login-quote blockquote {
            font-family: var(--font-d);
            font-size: 15px;
            font-style: italic;
            color: rgba(255,255,255,.7);
            line-height: 1.7;
            direction: rtl;
        }
        .login-quote cite {
            display: block;
            font-size: 12px;
            color: rgba(255,255,255,.4);
            margin-top: 10px;
            font-style: normal;
        }

        /* ── RIGHT PANEL ── */
        .login-right {
            width: 480px;
            flex-shrink: 0;
            background: var(--white);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 60px 56px;
        }
        .login-form-wrap {
            width: 100%;
            max-width: 340px;
            animation: fadeUp .5s .1s ease both;
        }
        .login-form-logo {
            width: 44px; height: 44px;
            border-radius: 12px;
            background: var(--gxp);
            border: 1px solid var(--gp);
            display: flex; align-items: center; justify-content: center;
            font-size: 20px;
            margin-bottom: 24px;
        }
        .login-form-wrap h2 {
            font-family: var(--font-d);
            font-size: 24px;
            font-weight: 600;
            color: var(--ink);
            margin-bottom: 6px;
        }
        .login-form-wrap .subtitle {
            font-size: 13px;
            color: var(--mid);
            margin-bottom: 32px;
        }

        /* ── FORM ELEMENTS ── */
        .form-group { margin-bottom: 18px; }
        .form-label {
            display: block;
            font-size: 12px;
            font-weight: 500;
            color: var(--ink2);
            margin-bottom: 6px;
        }
        .form-input {
            width: 100%;
            padding: 11px 14px;
            border: 1px solid var(--brd);
            border-radius: var(--r-md);
            font-size: 14px;
            background: var(--bg);
            color: var(--ink);
            outline: none;
            transition: .15s;
        }
        .form-input:focus {
            border-color: var(--g3);
            box-shadow: 0 0 0 3px rgba(64,145,108,.15);
            background: var(--white);
        }
        .form-input.is-invalid {
            border-color: #991B1B;
            box-shadow: 0 0 0 3px rgba(153,27,27,.12);
        }
        .invalid-feedback {
            font-size: 12px;
            color: #991B1B;
            margin-top: 5px;
        }

        .input-wrap { position: relative; }
        .input-wrap .form-input { padding-left: 38px; }
        .input-icon {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 14px;
            pointer-events: none;
        }
        .input-eye {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 14px;
            cursor: pointer;
            border: none;
            background: none;
            color: var(--lt);
        }

        .login-opts {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 24px;
        }
        .remember {
            display: flex;
            align-items: center;
            gap: 7px;
            font-size: 13px;
            color: var(--mid);
            cursor: pointer;
        }
        .remember input { accent-color: var(--g1); }
        .forgot { font-size: 13px; color: var(--g2); text-decoration: none; }
        .forgot:hover { text-decoration: underline; }

        .btn-login {
            width: 100%;
            padding: 13px;
            background: var(--g1);
            color: #fff;
            border: none;
            border-radius: var(--r-md);
            font-size: 14px;
            font-weight: 600;
            letter-spacing: .02em;
            transition: .15s;
            cursor: pointer;
            box-shadow: var(--shadow-sm);
        }
        .btn-login:hover { background: var(--g2); }

        /* ── ERROR ALERT ── */
        .alert-error {
            background: #FEE2E2;
            border: 1px solid #FECACA;
            border-radius: var(--r-md);
            padding: 12px 14px;
            font-size: 13px;
            color: #991B1B;
            margin-bottom: 20px;
        }

        .login-footer {
            margin-top: 40px;
            font-size: 11px;
            color: var(--lt);
            text-align: center;
        }

        /* ── ANIMATIONS ── */
        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(16px); }
            to   { opacity: 1; transform: none; }
        }

        /* ── RESPONSIVE ── */
        @media (max-width: 768px) {
            .login-screen { flex-direction: column; }
            .login-left { padding: 40px 24px; min-height: 200px; flex-shrink: 0; }
            .login-brand h1 { font-size: 20px; }
            .login-stats { gap: 20px; margin-top: 24px; }
            .login-stats .num { font-size: 20px; }
            .login-quote { display: none; }
            .login-right { width: 100%; padding: 32px 24px 40px; }
        }
        @media (max-width: 480px) {
            .login-stats { flex-direction: row; gap: 16px; }
        }