:root {
            --emerald-500: #10b981;
            --emerald-600: #059669;
            --emerald-700: #047857;
            --emerald-800: #065f46;
            --emerald-900: #064e3b;
            --gold-400: #fbbf24;
            --gold-500: #f59e0b;
            --font: 'Plus Jakarta Sans', sans-serif;
        }

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

        body {
            font-family: var(--font);
            min-height: 100svh;
            display: flex;
            background: #0a1628;
            overflow: hidden;
        }

        /* ── Left Panel ── */
        .left-panel {
            flex: 1;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            background: linear-gradient(160deg, #064e3b 0%, #065f46 40%, #0a1628 100%);
        }

        /* Geometric pattern */
        .left-panel::before {
            content: '';
            position: absolute; inset: 0;
            background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M40 0l8 8-8 8-8-8 8-8zm0 16l8 8-8 8-8-8 8-8zm16-16l8 8-8 8-8-8 8-8zm0 32l8 8-8 8-8-8 8-8zM8 16l8 8-8 8-8-8 8-8zm0 32l8 8-8 8-8-8 8-8zm32 0l8 8-8 8-8-8 8-8zm16-16l8 8-8 8-8-8 8-8z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        }

        /* Arc decorators */
        .arc {
            position: absolute;
            border-radius: 50%;
            border: 1px solid rgba(251,191,36,.15);
            pointer-events: none;
        }
        .arc-1 { width: 500px; height: 500px; top: -180px; right: -180px; }
        .arc-2 { width: 320px; height: 320px; top: -60px;  right: -60px;
                 border-color: rgba(251,191,36,.1); }
        .arc-3 { width: 150px; height: 150px; top: 60px;   right: 60px;
                 border-color: rgba(251,191,36,.2); }
        .arc-4 { width: 300px; height: 300px; bottom: -100px; left: -100px;
                 border-color: rgba(16,185,129,.15); }

        .left-content {
            position: relative; z-index: 10;
            padding: 3rem;
            max-width: 480px;
        }

        .left-logo {
            display: flex; align-items: center; gap: .75rem;
            margin-bottom: 3rem;
        }
        .left-logo-icon {
            width: 48px; height: 48px;
            background: linear-gradient(135deg, var(--emerald-600), var(--emerald-700));
            border-radius: 12px;
            display: flex; align-items: center; justify-content: center;
            color: white; font-size: 1.3rem;
            box-shadow: 0 8px 24px rgba(5,150,105,.4);
        }
        .left-logo-text .name {
            font-size: 1.2rem; font-weight: 800; color: white; display: block;
        }
        .left-logo-text .sub {
            font-size: .75rem; color: rgba(255,255,255,.4);
        }

        .left-headline {
            font-size: clamp(1.6rem, 3vw, 2.5rem);
            font-weight: 800; color: white;
            line-height: 1.2; margin-bottom: 1rem;
            letter-spacing: -.02em;
        }
        .left-headline span {
            background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .left-desc {
            font-size: .95rem;
            color: rgba(255,255,255,.55);
            line-height: 1.7;
            margin-bottom: 2.5rem;
        }

        /* Feature list */
        .feature-list {
            display: flex; flex-direction: column; gap: .75rem;
        }
        .feature-item {
            display: flex; align-items: center; gap: .75rem;
        }
        .feature-icon {
            width: 36px; height: 36px; flex-shrink: 0;
            background: rgba(255,255,255,.07);
            border: 1px solid rgba(255,255,255,.1);
            border-radius: 8px;
            display: flex; align-items: center; justify-content: center;
            font-size: .9rem; color: var(--emerald-400);
        }
        .feature-text {
            font-size: .875rem; color: rgba(255,255,255,.65);
        }

        /* Arabic quote bottom */
        .left-quote {
            position: absolute; bottom: 2rem; left: 3rem; right: 3rem;
            text-align: center;
            border-top: 1px solid rgba(255,255,255,.08);
            padding-top: 1.25rem;
        }
        .left-quote .arabic {
            font-family: 'Amiri', serif;
            font-size: 1.3rem; color: var(--gold-400);
            display: block; margin-bottom: .25rem;
        }
        .left-quote .latin {
            font-size: .75rem; color: rgba(255,255,255,.35);
        }

        /* ── Right Panel (Form) ── */
        .right-panel {
            width: 480px;
            flex-shrink: 0;
            background: #ffffff;
            display: flex;
            flex-direction: column;
            overflow-y: auto;
        }

        [data-theme="dark"] .right-panel {
            background: #0d1117;
        }

        .right-inner {
            flex: 1;
            padding: 3rem 2.5rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        /* Mobile header logo */
        .mobile-header {
            display: none;
            padding: 1.5rem 2.5rem 0;
            align-items: center; gap: .6rem;
        }
        .mobile-logo-icon {
            width: 36px; height: 36px;
            background: linear-gradient(135deg, var(--emerald-600), var(--emerald-700));
            border-radius: 8px;
            display: flex; align-items: center; justify-content: center;
            color: white; font-size: 1rem;
        }
        .mobile-logo-name {
            font-size: 1rem; font-weight: 800;
            color: #1f2937;
        }
        [data-theme="dark"] .mobile-logo-name { color: #f1f5f9; }

        .form-header { margin-bottom: 2rem; }
        .form-title {
            font-size: 1.6rem; font-weight: 800;
            color: #111827; margin-bottom: .4rem;
        }
        [data-theme="dark"] .form-title { color: #f1f5f9; }
        .form-subtitle {
            font-size: .875rem; color: #6b7280;
        }

        /* Input group */
        .input-group-custom {
            position: relative; margin-bottom: 1.1rem;
        }
        .input-label {
            display: block;
            font-size: .82rem; font-weight: 600;
            color: #374151; margin-bottom: .4rem;
        }
        [data-theme="dark"] .input-label { color: #d1d5db; }

        .input-wrap {
            position: relative;
        }
        .input-icon {
            position: absolute; left: .9rem; top: 50%;
            transform: translateY(-50%);
            color: #9ca3af; font-size: .95rem; z-index: 2;
            pointer-events: none;
        }
        .input-field {
            width: 100%;
            padding: .75rem .9rem .75rem 2.6rem;
            border: 1.5px solid #e5e7eb;
            border-radius: 10px;
            font-size: .9rem; font-family: var(--font);
            color: #111827; background: #f9fafb;
            outline: none; transition: all .2s;
        }
        [data-theme="dark"] .input-field {
            background: #161b22; border-color: #30363d;
            color: #e6edf3;
        }
        .input-field:focus {
            border-color: var(--emerald-500);
            background: white;
            box-shadow: 0 0 0 3px rgba(16,185,129,.12);
        }
        [data-theme="dark"] .input-field:focus {
            background: #0d1117;
        }
        .input-field.is-invalid {
            border-color: #ef4444;
            background: #fef2f2;
        }
        [data-theme="dark"] .input-field.is-invalid {
            background: rgba(239,68,68,.08);
        }
        .input-toggle {
            position: absolute; right: .9rem; top: 50%;
            transform: translateY(-50%);
            background: none; border: none; cursor: pointer;
            color: #9ca3af; font-size: .95rem;
            padding: 0; z-index: 2;
        }
        .input-toggle:hover { color: var(--emerald-600); }

        .error-msg {
            font-size: .775rem; color: #dc2626;
            margin-top: .35rem;
            display: flex; align-items: center; gap: .3rem;
        }

        /* Remember + Forgot */
        .form-footer-row {
            display: flex; align-items: center;
            justify-content: space-between;
            margin-bottom: 1.5rem;
        }
        .remember-label {
            display: flex; align-items: center; gap: .5rem;
            cursor: pointer; font-size: .835rem; color: #6b7280;
        }
        .remember-label input[type="checkbox"] {
            width: 15px; height: 15px;
            accent-color: var(--emerald-600); cursor: pointer;
        }
        .forgot-link {
            font-size: .835rem; font-weight: 600;
            color: var(--emerald-600); text-decoration: none;
        }
        .forgot-link:hover { text-decoration: underline; }

        /* Submit button */
        .btn-login {
            width: 100%; padding: .85rem;
            background: linear-gradient(135deg, var(--emerald-600), var(--emerald-700));
            color: white; border: none; border-radius: 10px;
            font-size: .95rem; font-weight: 700;
            font-family: var(--font); cursor: pointer;
            transition: all .25s;
            display: flex; align-items: center; justify-content: center; gap: .5rem;
            position: relative; overflow: hidden;
        }
        .btn-login::before {
            content: '';
            position: absolute; inset: 0;
            background: linear-gradient(135deg, rgba(255,255,255,.1), transparent);
            opacity: 0; transition: opacity .2s;
        }
        .btn-login:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 28px rgba(5,150,105,.4);
        }
        .btn-login:hover::before { opacity: 1; }
        .btn-login:active { transform: translateY(0); }
        .btn-login:disabled {
            opacity: .7; cursor: not-allowed; transform: none;
        }

        /* Divider */
        .divider {
            display: flex; align-items: center; gap: .75rem;
            margin: 1.5rem 0; color: #d1d5db;
            font-size: .8rem;
        }
        .divider::before, .divider::after {
            content: ''; flex: 1;
            height: 1px; background: #e5e7eb;
        }
        [data-theme="dark"] .divider::before,
        [data-theme="dark"] .divider::after { background: #30363d; }
        [data-theme="dark"] .divider { color: #4b5563; }

        /* Register link */
        .register-link {
            text-align: center;
            font-size: .875rem; color: #6b7280;
        }
        .register-link a {
            color: var(--emerald-600); font-weight: 700;
            text-decoration: none;
        }
        .register-link a:hover { text-decoration: underline; }

        /* Alert */
        .alert-form {
            padding: .75rem 1rem;
            border-radius: 8px;
            font-size: .85rem;
            display: flex; align-items: center; gap: .6rem;
            margin-bottom: 1.25rem;
        }
        .alert-error-form {
            background: #fef2f2; color: #991b1b;
            border: 1px solid #fecaca;
        }
        .alert-success-form {
            background: #f0fdf4; color: #065f46;
            border: 1px solid #bbf7d0;
        }

        /* Dark mode toggle */
        .theme-btn {
            position: absolute; top: 1.25rem; right: 1.25rem;
            width: 36px; height: 36px; border-radius: 8px;
            border: 1px solid #e5e7eb; background: #f9fafb;
            color: #6b7280; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            font-size: .9rem; transition: all .2s;
        }
        [data-theme="dark"] .theme-btn {
            border-color: #30363d; background: #161b22; color: #8b949e;
        }
        .theme-btn:hover {
            border-color: var(--emerald-500); color: var(--emerald-600);
        }

        /* Back to home */
        .back-home {
            display: inline-flex; align-items: center; gap: .4rem;
            font-size: .82rem; color: #6b7280; text-decoration: none;
            margin-bottom: 2rem; transition: color .2s;
        }
        .back-home:hover { color: var(--emerald-600); }

        /* Loading spinner */
        .spinner {
            width: 16px; height: 16px;
            border: 2px solid rgba(255,255,255,.3);
            border-top-color: white;
            border-radius: 50%;
            animation: spin .7s linear infinite;
            display: none;
        }
        @keyframes spin { to { transform: rotate(360deg); } }

        /* Responsive */
        @media (max-width: 768px) {
            .left-panel { display: none; }
            .right-panel { width: 100%; }
            .mobile-header { display: flex; }
            .right-inner { padding: 1.5rem 1.75rem 2rem; }
        }