@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800&display=swap');
    * { margin: 0; padding: 0; box-sizing: border-box; }
    :root {
      --primary: #2D8653; --primary-dk: #1F6B3E;
      --dark: #1E1F21; --gray: #6B6F76; --light: #F5F5F5;
      --error: #C0392B; --error-bg: #FDECEA;
      --success: #1D7A4A; --success-bg: #E8F5EE;
    }
    body { font-family: 'Tajawal', sans-serif; min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
    .left-panel { background: var(--dark); padding: 48px; display: flex; flex-direction: column; justify-content: center; position: relative; }
    .left-logo { position: absolute; top: 32px; right: 48px; display: flex; align-items: center; gap: 8px; }
    .left-logo-icon { width: 36px; height: 36px; background: var(--primary); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; font-size: 16px; font-weight: 800; }
    .left-logo-text { font-size: 18px; font-weight: 800; color: white; }
    .left-content { margin-top: 40px; }
    .left-content h2 { font-size: 42px; font-weight: 800; color: white; line-height: 1.3; margin-bottom: 16px; }
    .left-content h2 span { color: var(--primary); }
    .left-content p { font-size: 15px; color: #888; margin-bottom: 40px; line-height: 1.7; }
    .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .stat-box { background: #2C2E30; border-radius: 14px; padding: 20px; }
    .stat-box .num { font-size: 28px; font-weight: 800; color: var(--primary); margin-bottom: 4px; }
    .stat-box .lbl { font-size: 12px; color: #888; }
    .right-panel { background: white; padding: 48px; display: flex; flex-direction: column; justify-content: center; }
    .right-logo { display: flex; align-items: center; gap: 8px; margin-bottom: 40px; }
    .right-logo-icon { width: 36px; height: 36px; background: var(--primary); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; font-size: 16px; font-weight: 800; }
    .right-logo-text { font-size: 20px; font-weight: 800; color: var(--dark); }
    .right-panel h1 { font-size: 30px; font-weight: 800; color: var(--dark); margin-bottom: 8px; }
    .subtitle { font-size: 14px; color: var(--gray); margin-bottom: 36px; }
    .form-group { margin-bottom: 20px; }
    .form-group label { display: block; font-size: 13px; font-weight: 600; color: var(--dark); margin-bottom: 7px; }
    .form-group input { width: 100%; padding: 13px 16px; border: 1.5px solid #E8E8E8; border-radius: 10px; font-size: 14px; font-family: 'Tajawal', sans-serif; outline: none; transition: border 0.2s; background: var(--light); }
    .form-group input:focus { border-color: var(--primary); background: white; }
    .btn-submit { width: 100%; padding: 14px; background: var(--primary); color: white; border: none; border-radius: 12px; font-size: 16px; font-weight: 700; cursor: pointer; font-family: 'Tajawal', sans-serif; transition: background 0.2s; margin-top: 8px; }
    .btn-submit:hover { background: var(--primary-dk); }
    .btn-submit:disabled { background: var(--gray); cursor: not-allowed; }
    .error-msg { background: var(--error-bg); color: var(--error); padding: 12px 16px; border-radius: 10px; font-size: 13px; margin-bottom: 20px; display: none; border-right: 3px solid var(--error); }
    .success-msg { background: var(--success-bg); color: var(--success); padding: 12px 16px; border-radius: 10px; font-size: 13px; margin-bottom: 20px; display: none; border-right: 3px solid var(--success); line-height: 1.6; }
    .footer-link { text-align: center; margin-top: 24px; font-size: 13px; color: var(--gray); }
    .footer-link a { color: var(--primary); font-weight: 600; text-decoration: none; }
    .footer-link a:hover { text-decoration: underline; }
    .loading { text-align: center; color: var(--gray); font-size: 13px; margin-top: 12px; display: none; }
    .bottom-btns { position: fixed; bottom: 24px; left: 24px; display: flex; gap: 8px; align-items: center; z-index: 999; }
    .lang-btn { background: white; border: 1.5px solid #E8E8E8; border-radius: 10px; padding: 8px 16px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: 'Tajawal', sans-serif; color: var(--dark); box-shadow: 0 2px 8px rgba(0,0,0,0.08); transition: all 0.2s; }
    .lang-btn:hover { border-color: var(--primary); color: var(--primary); }
    .support-btn { background: var(--primary); color: white; border: none; border-radius: 50px; padding: 10px 18px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: 'Tajawal', sans-serif; box-shadow: 0 4px 14px rgba(45,134,83,0.35); transition: all 0.2s; display: flex; align-items: center; gap: 6px; text-decoration: none; }
    .support-btn:hover { background: var(--primary-dk); transform: translateY(-2px); }