:root {
      --color-primary: #0a0e18;
      --color-primary-soft: #111827;
      --color-accent-gold: #c9a227;
      --color-accent-gold-soft: #e8d48a;
      --color-accent-gold-glow: rgba(201, 162, 39, 0.22);
      --color-accent-emerald: #1c8a57;
      /* مودرن وعصري مع الحفاظ على الفخامة — أزرق داكن + ذهبي */
      --color-accent-slate: #0f172a;
      --color-accent-blue: #1e3a5f;
      --color-accent-blue-soft: rgba(30, 58, 95, 0.35);
      --color-accent-white: #f8fafc;
      --color-accent-silver: rgba(255, 255, 255, 0.1);

      --color-bg: #050810;
      --color-surface: #0c111b;
      --color-surface-elevated: #131a28;
      --color-border-subtle: rgba(255, 255, 255, 0.08);
      --color-glass: rgba(255, 255, 255, 0.04);

      --color-text-main: #f1f5f9;
      --color-text-muted: #94a3b8;

      --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

      --space-2: 0.5rem;
      --space-3: 0.75rem;
      --space-4: 1rem;
      --space-5: 1.25rem;
      --space-6: 1.5rem;
      --space-8: 2rem;
      --space-10: 2.5rem;
      --space-12: 3rem;
      --space-16: 4rem;
      --space-20: 5rem;
      --radius-sm: 10px;
      --radius-md: 16px;
      --radius-lg: 20px;
      --radius-xl: 28px;
      --radius-full: 9999px;
      --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.04);
      --shadow-card-hover: 0 20px 48px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.06);
      --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

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

    /* أوزن الصفحات: الهيدر لا يغطي المحتوى — قيمة كافية حتى مع تكرار الهيدر على سطرين */
    :root {
      --header-height: 9rem;
      --service-back-bar-height: 4rem;
    }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: var(--header-height);
    }

    [id],
    .section,
    section[id],
    main [id] {
      scroll-margin-top: var(--header-height);
    }

    main#main-content {
      padding-top: 0.5rem;
    }

    .skip-link {
      position: absolute;
      top: -3rem;
      left: var(--space-4);
      z-index: 100;
      padding: 0.6rem 1rem;
      background: var(--color-accent-gold);
      color: #1b1b1b;
      font-weight: 600;
      text-decoration: none;
      border-radius: var(--radius-sm);
      transition: top 0.2s ease;
    }

    .skip-link:focus {
      top: var(--space-4);
      outline: 2px solid var(--color-accent-gold-soft);
      outline-offset: 2px;
    }

    body {
      margin: 0;
      min-height: 100vh;
      font-family: var(--font-sans);
      background: #03060c;
      background-image:
        radial-gradient(ellipse 120% 80% at 50% -20%, var(--color-accent-blue-soft), transparent 50%),
        radial-gradient(ellipse 80% 50% at 90% 70%, rgba(201, 162, 39, 0.05), transparent 45%),
        radial-gradient(ellipse 70% 60% at 10% 90%, rgba(15, 42, 78, 0.2), transparent 40%),
        linear-gradient(180deg, #050810 0%, var(--color-accent-slate) 35%, #080c14 60%, #050810 100%);
      color: var(--color-text-main);
      -webkit-font-smoothing: antialiased;
      font-feature-settings: "ss01", "ss02";
      position: relative;
    }

    /* شعار الصندوق خلفية لجميع الصفحات */
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      background: url('assets/emblem.png') center center no-repeat;
      background-size: min(70vw, 520px) auto;
      opacity: 0.06;
      pointer-events: none;
      z-index: 0;
    }

    p {
      margin: 0 0 var(--space-4);
      font-size: 0.98rem;
      line-height: 1.7;
      color: var(--color-text-muted);
    }

    h1,
    h2,
    h3,
    h4 {
      margin: 0 0 var(--space-3);
      font-weight: 650;
      letter-spacing: 0.02em;
      color: var(--color-text-main);
    }

    main {
      max-width: 1200px;
      margin: 0 auto;
      padding: var(--space-12) var(--space-4) var(--space-16);
      position: relative;
      z-index: 1;
    }

    /* أزرار بارزة — هيئة أزرار فعلية */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.65rem 1.35rem;
      border-radius: var(--radius-md);
      font-size: 0.9rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      border: 2px solid transparent;
      cursor: pointer;
      text-decoration: none;
      transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition), color var(--transition);
      box-sizing: border-box;
    }

    .btn--primary {
      background: linear-gradient(180deg, #e0c04a 0%, var(--color-accent-gold) 50%, #a8841a 100%);
      color: #0d0d0d;
      border-color: #8b6914;
      box-shadow:
        0 4px 0 rgba(0, 0, 0, 0.25),
        0 6px 16px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    }

    .btn--primary:hover {
      transform: translateY(-1px);
      box-shadow:
        0 5px 0 rgba(0, 0, 0, 0.2),
        0 8px 24px var(--color-accent-gold-glow),
        0 0 20px rgba(201, 162, 39, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    }

    .btn--primary:active {
      transform: translateY(2px);
      box-shadow:
        0 2px 0 rgba(0, 0, 0, 0.3),
        0 2px 8px rgba(0, 0, 0, 0.2),
        inset 0 2px 4px rgba(0, 0, 0, 0.15);
    }

    .btn--ghost {
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%);
      color: var(--color-text-main);
      border-color: rgba(255, 255, 255, 0.25);
      box-shadow:
        0 3px 0 rgba(0, 0, 0, 0.2),
        0 4px 12px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }

    .btn--ghost:hover {
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 100%);
      border-color: rgba(255, 255, 255, 0.35);
      box-shadow:
        0 4px 0 rgba(0, 0, 0, 0.15),
        0 6px 16px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    }

    .btn--ghost:active {
      transform: translateY(1px);
      box-shadow:
        0 1px 0 rgba(0, 0, 0, 0.25),
        inset 0 2px 6px rgba(0, 0, 0, 0.15);
    }

    .btn.btn-sm,
    .btn.btn--sm {
      padding: 0.45rem 0.95rem;
      font-size: 0.85rem;
      border-width: 2px;
      border-radius: var(--radius-sm);
    }

    .btn.btn-sm.btn--primary:active,
    .btn.btn--sm.btn--primary:active {
      transform: translateY(2px);
    }

    .btn.btn-sm.btn--ghost:active,
    .btn.btn--sm.btn--ghost:active {
      transform: translateY(1px);
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 40;
      backdrop-filter: blur(24px) saturate(1.2);
      -webkit-backdrop-filter: blur(24px) saturate(1.2);
      background: linear-gradient(to bottom, rgba(3, 6, 12, 0.92) 0%, rgba(3, 6, 12, 0.75) 100%);
      border-bottom: 1px solid var(--color-border-subtle);
      transition: box-shadow var(--transition);
    }

    .site-header::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -1px;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--color-accent-gold-glow), var(--color-accent-silver), var(--color-accent-gold-glow), transparent);
      opacity: 0.8;
      pointer-events: none;
    }

    .site-header__inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0.4rem var(--space-4);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-6);
      flex-wrap: wrap;
    }

    .site-header__tickers {
      width: 100%;
    }

    .site-logo {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      text-decoration: none;
      color: inherit;
    }

    .site-logo__emblem {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      height: 56px;
      width: 56px;
      filter: drop-shadow(0 4px 20px var(--color-accent-gold-glow));
      transition: transform var(--transition);
    }

    .site-logo:hover .site-logo__emblem {
      transform: scale(1.03);
    }

    .site-logo__emblem svg,
    .site-logo__emblem .site-logo__img {
      height: 100%;
      width: 100%;
      display: block;
      object-fit: contain;
    }

    .site-logo__text {
      display: flex;
      flex-direction: column;
    }

    .site-logo__title {
      font-size: 1.05rem;
      font-weight: 650;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--color-text-main);
    }

    .site-logo__subtitle {
      font-size: 0.78rem;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      color: var(--color-text-muted);
    }

    .site-header__brand {
      display: flex;
      align-items: center;
      gap: var(--space-4);
      flex-wrap: wrap;
    }

    .site-header__clock-lang {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      gap: var(--space-4);
      flex-shrink: 0;
    }

    .site-header__brand .site-clock--in-brand {
      align-items: flex-start;
      margin-inline-start: 0;
      padding-inline-start: var(--space-4);
      border-inline-start: 1px solid rgba(201, 162, 39, 0.25);
    }

    .site-header__clock-lang .lang-picker-wrap {
      margin: 0;
    }

    .site-header__auth-btns {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2);
      align-items: center;
      flex-shrink: 0;
    }

    .site-header__auth-btns--top {
      margin-inline-end: var(--space-2);
      padding-inline-end: var(--space-2);
      border-inline-end: 1px solid var(--color-border-subtle);
    }

    .site-header__auth-btns.is-hidden {
      display: none !important;
    }

    .site-header__auth-btn {
      padding: 0.22rem 0.75rem;
      font-size: 0.8rem;
      border-radius: var(--radius-md);
      font-size: 0.875rem;
      font-weight: 600;
      cursor: pointer;
      border: 2px solid;
      transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition), color var(--transition);
      box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

    .site-header__auth-btn:active {
      transform: translateY(1px);
      box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
    }

    .site-header__auth-btn--login {
      border-color: var(--color-accent-gold);
      background: rgba(201, 162, 39, 0.12);
      color: var(--color-accent-gold);
    }

    .site-header__auth-btn--login:hover {
      background: rgba(212, 174, 42, 0.22);
      color: var(--color-accent-gold-soft);
      border-color: var(--color-accent-gold-soft);
      box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15), 0 4px 12px var(--color-accent-gold-glow), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    }

    .site-header__auth-btn--register {
      background: linear-gradient(180deg, #e0c04a 0%, var(--color-accent-gold) 50%, #a8841a 100%);
      color: #111;
      border-color: #8b6914;
      box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    }

    .site-header__auth-btn--register:hover {
      background: linear-gradient(180deg, #e8c850 0%, #d4ae2a 50%, #b8921c 100%);
      box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2), 0 6px 16px var(--color-accent-gold-glow), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    }

    .header-user-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-2);
      padding: var(--space-2) var(--space-3);
      padding-inline-start: var(--space-4);
      margin-inline-start: 0;
      background: var(--color-surface-elevated);
      border-radius: var(--radius-md);
      border: 1px solid var(--color-border-subtle);
      border-inline-start: 1px solid rgba(201, 162, 39, 0.25);
      text-align: center;
    }

    .header-user-card:not(.is-visible) .header-user-card__info {
      display: none;
    }

    .header-user-card.is-visible .header-user-card__info {
      display: flex;
    }

    .site-header__clock-lang .header-user-card {
      flex-shrink: 0;
    }

    /* بطاقة العضو في الهيدر */
    .header-user-card {
      margin: 0 0.5rem;
      padding: 0.25rem 0.75rem;
      background: rgba(201, 162, 39, 0.1);
      border: 1px solid rgba(201, 162, 39, 0.3);
      border-radius: 25px;
      transition: all 0.3s ease;
    }

    .header-user-card:hover {
      background: rgba(201, 162, 39, 0.2);
      border-color: rgba(201, 162, 39, 0.5);
      box-shadow: 0 2px 8px rgba(201, 162, 39, 0.2);
    }

    .header-user-info {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .header-user-avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 2px solid var(--color-accent-gold);
      object-fit: cover;
      transition: transform 0.3s ease;
    }

    .header-user-avatar:hover {
      transform: scale(1.1);
    }

    .header-user-details {
      display: flex;
      flex-direction: column;
      min-width: 0;
    }

    .header-user-name {
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--color-text-main);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 120px;
    }

    .header-user-title {
      font-size: 0.75rem;
      color: var(--color-text-muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 120px;
    }

    @media (max-width: 768px) {
      .header-user-card {
        margin: 0 0.25rem;
        padding: 0.2rem 0.5rem;
      }

      .header-user-avatar {
        width: 28px;
        height: 28px;
      }

      .header-user-name {
        font-size: 0.8rem;
        max-width: 100px;
      }

      .header-user-title {
        font-size: 0.7rem;
        max-width: 100px;
      }
    }

    .header-user-card__photo-wrap {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      overflow: hidden;
      background: var(--color-surface);
      flex-shrink: 0;
    }

    .header-user-card__photo {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .header-user-card__info {
      display: flex;
      flex-direction: column;
      gap: 0.15rem;
      min-width: 0;
      width: 100%;
      align-items: center;
    }

    .header-user-card__name {
      font-size: 0.9rem;
      font-weight: 700;
      color: var(--color-text-main);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }

    .header-user-card__meta {
      font-size: 0.75rem;
      color: var(--color-text-muted);
    }

    .site-nav {
      display: flex;
      align-items: center;
      gap: 0.35rem;
      font-size: 0.8rem;
      flex-wrap: wrap;
    }

    .site-nav a {
      color: var(--color-text-muted);
      text-decoration: none;
      padding: 0.22rem 0.7rem;
      border-radius: var(--radius-md);
      border: 2px solid rgba(255, 255, 255, 0.12);
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
      box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.04);
      transition: color var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition);
      font-weight: 600;
      line-height: 1.25;
    }

    .site-nav a:hover {
      color: var(--color-accent-gold-soft);
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
      border-color: rgba(201, 162, 39, 0.35);
      box-shadow: 0 3px 0 rgba(0, 0, 0, 0.12), 0 4px 12px rgba(201, 162, 39, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }

    .site-nav a:active {
      transform: translateY(1px);
      box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
    }

    .site-nav .btn {
      padding: 0.26rem 0.9rem;
      font-size: 0.8rem;
      line-height: 1.25;
    }

    /* خدماتنا — قائمة منسدلة حتى يتوسّع الهيدر */
    .site-nav__services-wrap {
      position: relative;
      display: inline-block;
    }

    .site-nav__services-trigger {
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
      color: var(--color-text-muted);
      text-decoration: none;
      padding: 0.22rem 0.7rem;
      border-radius: var(--radius-md);
      border: 2px solid rgba(255, 255, 255, 0.12);
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
      box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.04);
      font-size: 0.8rem;
      font-weight: 600;
      line-height: 1.25;
      cursor: pointer;
      font-family: inherit;
      transition: color var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition);
    }

    .site-nav__services-trigger:hover,
    .site-nav__services-trigger:focus {
      color: var(--color-accent-gold);
      outline: none;
    }

    .site-nav__dropdown {
      position: absolute;
      top: 100%;
      left: 0;
      min-width: 220px;
      background: var(--color-surface-elevated);
      border: 1px solid var(--color-border-subtle);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-card);
      padding: var(--space-3) 0;
      margin-top: var(--space-2);
      z-index: 1000;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-8px);
      transition: all 0.2s ease;
    }

    .site-nav__dropdown[aria-hidden="false"] {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    .site-nav__dropdown a,
    .site-nav__dropdown button {
      display: block;
      width: 100%;
      padding: var(--space-3) var(--space-5);
      text-decoration: none;
      color: var(--color-text-main);
      font-size: 0.9rem;
      transition: background-color var(--transition), color var(--transition);
      border: none;
      background: none;
      text-align: left;
      cursor: pointer;
    }

    .site-nav__dropdown a:hover,
    .site-nav__dropdown a:focus,
    .site-nav__dropdown button:hover,
    .site-nav__dropdown button:focus {
      background: var(--color-glass);
      color: var(--color-accent-gold);
      outline: none;
    }

    /* من نحن — قائمة منسدلة */
    .site-nav__about-wrap {
      position: relative;
      display: inline-block;
    }

    .site-nav__about-trigger {
      background: none;
      border: none;
      color: var(--color-text-main);
      cursor: pointer;
      padding: 0;
      font-size: inherit;
      font-family: inherit;
      text-decoration: none;
      transition: color var(--transition);
    }

    .site-nav__about-trigger:hover,
    .site-nav__about-trigger:focus {
      color: var(--color-accent-gold);
      outline: none;
    }

    .site-nav__dropdown .lang-ar {
      display: inline;
    }

    /* كن ممثلاً لنا — وميض مستمر بلون لطيف فاخر */
    .nav-link--rep-glow {
      animation: rep-glow-pulse 2.2s ease-in-out infinite;
    }

    .nav-link--rep-glow:hover {
      animation-duration: 1.5s;
    }

    @keyframes rep-glow-pulse {

      0%,
      100% {
        box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15), 0 0 12px rgba(201, 162, 39, 0.25), 0 0 24px rgba(232, 212, 138, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.04);
        border-color: rgba(201, 162, 39, 0.4);
        color: var(--color-accent-gold-soft);
      }

      50% {
        box-shadow: 0 3px 0 rgba(0, 0, 0, 0.12), 0 0 20px rgba(201, 162, 39, 0.45), 0 0 40px rgba(232, 212, 138, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
        border-color: rgba(232, 212, 138, 0.6);
        color: #f0e6c8;
      }
    }

    .hero {
      display: grid;
      grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
      gap: var(--space-12);
      align-items: center;
      padding: var(--space-20) 0 var(--space-16);
    }

    .hero__eyebrow {
      text-transform: uppercase;
      letter-spacing: 0.2em;
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--color-accent-gold);
      margin-bottom: var(--space-4);
      opacity: 0.95;
    }

    .hero__actions {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-3);
      margin-bottom: var(--space-6);
    }

    .hero__stats {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-6);
    }

    .hero-stat__value {
      display: block;
      font-size: 1.4rem;
      font-weight: 700;
      color: var(--color-accent-gold);
      letter-spacing: -0.02em;
      animation: countUp 2s ease-out;
    }

    @keyframes countUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }

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

    .hero-stat__label {
      font-size: 0.8rem;
      font-weight: 500;
      color: var(--color-text-muted);
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    .hero__visual {
      border-radius: var(--radius-xl);
      border: 1px solid rgba(201, 162, 39, 0.18);
      background: radial-gradient(ellipse 80% 80% at 50% 50%, rgba(201, 162, 39, 0.08) 0%, transparent 60%), var(--color-surface);
      transform: translateZ(0);
      will-change: transform;
      transition: transform 0.3s ease;
      min-height: 320px;
      box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.04);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: var(--space-8);
      transition: box-shadow var(--transition), border-color var(--transition);
    }

    .hero__visual:hover {
      border-color: rgba(201, 162, 39, 0.28);
      box-shadow: var(--shadow-card-hover), inset 0 1px 0 rgba(255, 255, 255, 0.05);
      transform: scale(1.02) translateZ(0);
    }

    /* GPU acceleration for better performance */
    .hero,
    .btn,
    .card {
      transform: translateZ(0);
      will-change: transform;
    }

    .hero__visual .hero-emblem {
      width: 200px;
      height: 240px;
      flex-shrink: 0;
      filter: drop-shadow(0 8px 32px var(--color-accent-gold-glow));
    }

    .hero__visual .hero-emblem svg,
    .hero__visual .hero-emblem__img {
      width: 100%;
      height: 100%;
      max-width: 280px;
      max-height: 340px;
      display: block;
      object-fit: contain;
      margin: 0 auto;
    }

    .hero h1 {
      font-size: clamp(1.85rem, 4vw, 2.6rem);
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: -0.03em;
      margin-bottom: var(--space-5);
      color: var(--color-text-main);
    }

    .hero p {
      font-size: 1rem;
      line-height: 1.75;
      max-width: 52ch;
      margin-bottom: var(--space-6);
    }

    .section {
      padding: var(--space-16) 0;
      border-top: 1px solid var(--color-border-subtle);
    }

    .section:first-of-type {
      border-top: none;
    }

    .section__title {
      margin-bottom: var(--space-10);
      font-size: clamp(1.6rem, 2.5vw, 2rem);
      font-weight: 700;
      color: var(--color-text-main);
      letter-spacing: -0.02em;
      line-height: 1.2;
      position: relative;
      padding-left: var(--space-5);
    }

    .section__title::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0.15em;
      bottom: 0.15em;
      width: 4px;
      border-radius: 2px;
      background: linear-gradient(180deg, var(--color-accent-gold), var(--color-accent-gold-soft));
    }

    [dir="rtl"] .section__title {
      padding-left: 0;
      padding-right: var(--space-5);
    }

    [dir="rtl"] .section__title::before {
      left: auto;
      right: 0;
    }

    .grid-2 {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-6);
    }

    .grid-3 {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--space-6);
    }

    .card {
      background: linear-gradient(165deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);
      border-radius: var(--radius-lg);
      border: 1px solid var(--color-border-subtle);
      padding: var(--space-6);
      box-shadow: var(--shadow-card);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    }

    .card:hover {
      box-shadow: var(--shadow-card-hover);
      border-color: rgba(255, 255, 255, 0.08);
    }

    .card h3 {
      margin-bottom: var(--space-3);
      font-weight: 600;
    }

    .card h4 {
      font-size: 1rem;
      font-weight: 600;
      margin-bottom: var(--space-2);
    }

    /* من نحن — فريقنا (ديناميكي) */
    .about-team {
      margin-top: var(--space-12);
    }

    .about-team__title {
      font-size: 1.25rem;
      margin-bottom: var(--space-6);
      color: var(--color-text-main);
    }

    .about-team-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
      gap: var(--space-8);
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .about-team-card {
      background: linear-gradient(165deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
      border-radius: var(--radius-lg);
      border: 1px solid var(--color-border-subtle);
      overflow: hidden;
      box-shadow: var(--shadow-card);
      transition: box-shadow var(--transition);
    }

    .about-team-card:hover {
      box-shadow: var(--shadow-card-hover);
    }

    .about-team-card__photo-wrap {
      width: 100%;
      aspect-ratio: 3/4;
      background: var(--color-surface-elevated);
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .about-team-card__photo {
      width: 100%;
      height: 100%;
      max-width: 260px;
      max-height: 100%;
      object-fit: contain;
      object-position: center center;
      display: block;
    }

    .about-team-card__body {
      padding: var(--space-5);
    }

    .about-team-card__role-above {
      font-size: 0.9rem;
      color: var(--color-accent-gold-soft);
      margin-bottom: 0.2rem;
      font-weight: 600;
      text-align: justify;
      text-justify: inter-character;
      width: 100%;
    }

    .about-team-card__name {
      font-size: 1rem;
      font-weight: 700;
      margin-bottom: 0.25rem;
      color: var(--color-text-main);
      max-width: 100%;
      word-wrap: break-word;
      line-height: 1.3;
    }

    .about-team-card__title {
      font-size: 0.85rem;
      color: var(--color-accent-gold-soft);
      margin-bottom: var(--space-3);
      font-weight: 600;
      text-align: justify;
      text-justify: inter-character;
      width: 100%;
    }

    .about-team-card__bio {
      font-size: 0.9rem;
      line-height: 1.65;
      color: var(--color-text-muted);
      margin: 0;
    }

    /* صفحة الأعضاء — عرض الأعضاء مع الصورة والنبذة وكيو آر العضوية */
    .members-section {
      margin-top: var(--space-12);
    }

    .members-section__intro {
      font-size: 0.95rem;
      color: var(--color-text-muted);
      margin-bottom: var(--space-6);
    }

    .members-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: var(--space-6);
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .members-card {
      background: linear-gradient(165deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
      border-radius: var(--radius-lg);
      border: 1px solid var(--color-border-subtle);
      overflow: hidden;
      box-shadow: var(--shadow-card);
      transition: box-shadow var(--transition);
      padding: var(--space-5);
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .members-card:hover {
      box-shadow: var(--shadow-card-hover);
    }

    .members-card__photo-wrap {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      overflow: hidden;
      background: var(--color-surface-elevated);
      flex-shrink: 0;
      margin-bottom: var(--space-4);
    }

    .members-card__photo {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .members-card__name {
      font-size: 1.1rem;
      font-weight: 700;
      margin-bottom: 0.15rem;
      color: var(--color-text-main);
    }

    .members-card__tier {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.35rem;
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--color-accent-gold-soft);
      margin-bottom: var(--space-2);
    }

    .members-card__tier-emblem {
      width: 20px;
      height: 20px;
      background: url('assets/emblem.png') center/contain no-repeat;
      opacity: 0.9;
      flex-shrink: 0;
    }

    .members-card__bio {
      font-size: 0.9rem;
      line-height: 1.6;
      color: var(--color-text-muted);
      margin: var(--space-3) 0;
    }

    .members-card__qr-wrap {
      margin-top: auto;
      padding-top: var(--space-4);
    }

    .members-card__qr-wrap canvas {
      display: block;
      margin: 0 auto;
      border-radius: 4px;
    }

    .members-card__qr-label {
      font-size: 0.75rem;
      color: var(--color-accent-gold-soft);
      margin-top: 0.35rem;
    }

    #dashboard-fund-members-list li {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: var(--space-3);
    }

    #dashboard-fund-members-list li .content {
      flex: 1;
      min-width: 0;
    }

    .members-dash-qr {
      flex-shrink: 0;
    }

    .members-dash-qr canvas {
      display: block;
      border-radius: 4px;
    }

    .members-card__link-page {
      display: inline-block;
      margin-top: var(--space-3);
      font-size: 0.9rem;
      color: var(--color-accent-gold-soft);
    }

    .members-card__link-page:hover {
      text-decoration: underline;
    }

    /* صفحة العضو الداخلية */
    .member-page-wrap {
      display: none;
      max-width: 820px;
      margin: 0 auto;
      padding: var(--space-6);
    }

    .member-page-wrap.is-visible {
      display: block;
    }

    .member-page__back {
      margin-bottom: var(--space-6);
    }

    .member-page__header {
      text-align: center;
      margin-bottom: var(--space-8);
    }

    .member-page__photo-wrap {
      width: 160px;
      height: 160px;
      border-radius: 50%;
      overflow: hidden;
      margin: 0 auto var(--space-4);
      background: var(--color-surface-elevated);
    }

    .member-page__photo {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .member-page__name {
      font-size: 1.5rem;
      font-weight: 700;
      margin-bottom: 0.25rem;
      color: var(--color-text-main);
    }

    .member-page__tier {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      font-size: 1rem;
      font-weight: 600;
      color: var(--color-accent-gold-soft);
      margin-bottom: var(--space-4);
      text-align: center;
    }

    .member-page__tier::before {
      content: '';
      width: 28px;
      height: 28px;
      background: url('assets/emblem.png') center/contain no-repeat;
      opacity: 0.9;
      flex-shrink: 0;
    }

    .member-page__bio {
      font-size: 1rem;
      line-height: 1.7;
      color: var(--color-text-muted);
      margin-bottom: var(--space-6);
    }

    .member-page__tools {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-3);
      align-items: center;
      margin-bottom: var(--space-6);
      padding: var(--space-4);
      background: rgba(255, 255, 255, 0.04);
      border-radius: var(--radius-md);
    }

    .member-page__works {
      font-size: 1.05rem;
      line-height: 1.8;
      color: var(--color-text-main);
      white-space: pre-wrap;
    }

    .member-page-translate-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.6);
      z-index: 9999;
      align-items: center;
      justify-content: center;
      padding: var(--space-4);
    }

    .member-page-translate-overlay.is-open {
      display: flex;
    }

    .member-page-translate-modal {
      background: var(--color-surface);
      border: 1px solid var(--color-border-subtle);
      border-radius: var(--radius-md);
      max-width: 560px;
      width: 100%;
      max-height: 85vh;
      overflow: auto;
      padding: var(--space-6);
    }

    .steps {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .steps li {
      display: flex;
      gap: var(--space-4);
      margin-bottom: var(--space-6);
      padding-bottom: var(--space-6);
      border-bottom: 1px solid var(--color-border-subtle);
    }

    .steps li:last-child {
      margin-bottom: 0;
      padding-bottom: 0;
      border-bottom: none;
    }

    .steps__num {
      flex-shrink: 0;
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--color-accent-gold), var(--color-accent-gold-soft));
      color: #0d0d0d;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 0.9rem;
      box-shadow: 0 2px 12px var(--color-accent-gold-glow);
    }

    .tiers {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--space-6);
    }

    .tier {
      border: 1px solid var(--color-border-subtle);
      border-radius: var(--radius-lg);
      padding: var(--space-8);
      text-align: center;
      background: linear-gradient(180deg, var(--color-surface-elevated) 0%, var(--color-surface) 100%);
      transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    }

    .tier:hover {
      border-color: rgba(255, 255, 255, 0.1);
      box-shadow: var(--shadow-card-hover);
    }

    .tier--featured {
      border-color: rgba(201, 162, 39, 0.5);
      box-shadow: 0 0 0 1px var(--color-accent-gold-glow), var(--shadow-card);
    }

    .tier__name {
      font-size: 1.1rem;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--color-accent-gold);
      margin-bottom: var(--space-4);
    }

    .tier ul {
      text-align: left;
      padding-left: 1.25rem;
      margin: 0 0 var(--space-4);
      color: var(--color-text-muted);
      font-size: 0.9rem;
      line-height: 1.6;
    }

    .partners-grid {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-4);
      justify-content: center;
    }

    .partner-tag {
      padding: 0.5rem 1rem;
      border-radius: var(--radius-full);
      background: var(--color-glass);
      border: 1px solid var(--color-border-subtle);
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--color-text-muted);
      transition: color var(--transition), border-color var(--transition), background var(--transition);
    }

    .partner-tag:hover {
      color: var(--color-text-main);
      border-color: rgba(255, 255, 255, 0.12);
      background: rgba(255, 255, 255, 0.06);
    }

    .join-us-card .join-us-contact {
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--color-text-muted);
      margin: var(--space-4) 0 var(--space-2);
    }

    .join-us-card .join-us-emails {
      margin: 0;
      font-size: 1rem;
    }

    .join-us-card .join-us-emails a {
      color: var(--color-accent-gold-soft);
      text-decoration: none;
    }

    .join-us-card .join-us-emails a:hover {
      text-decoration: underline;
    }

    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-10);
      align-items: start;
    }

    .contact-info p {
      margin-bottom: var(--space-2);
    }

    /* Auth modal (Login / Register) — متوافق مع الكمبيوتر واللاب توب والموبايل والتابلت والأجهزة القديمة والجديدة */
    .auth-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.75);
      z-index: 100;
      align-items: center;
      justify-content: center;
      padding: var(--space-4);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-y;
    }

    .auth-overlay.is-open {
      display: flex;
    }

    .auth-overlay {
      padding: var(--space-4);
      padding-top: max(var(--space-4), env(safe-area-inset-top));
      padding-bottom: max(var(--space-4), env(safe-area-inset-bottom));
      padding-left: max(var(--space-4), env(safe-area-inset-left));
      padding-right: max(var(--space-4), env(safe-area-inset-right));
    }

    .video-call-overlay {
      position: fixed;
      inset: 0;
      z-index: 10002;
      background: rgba(0, 0, 0, 0.85);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: var(--space-4);
    }

    .video-call-overlay.is-open {
      display: flex !important;
    }

    .video-call-modal {
      width: 100%;
      max-width: 960px;
      height: 85vh;
      max-height: 720px;
      background: var(--color-surface);
      border: 1px solid var(--color-border-subtle);
      border-radius: var(--radius-lg);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    }

    .video-call-modal__head {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: var(--space-2);
      padding: var(--space-3) var(--space-4);
      border-bottom: 1px solid var(--color-border-subtle);
      background: rgba(0, 0, 0, 0.2);
    }

    .video-call-modal__brand {
      flex-shrink: 0;
    }

    .video-call-modal__logo {
      display: block;
      width: 36px;
      height: 36px;
      object-fit: contain;
      filter: drop-shadow(0 2px 6px rgba(201, 162, 39, 0.3));
    }

    .video-call-modal__titles {
      flex: 1;
      min-width: 0;
    }

    .video-call-modal__title {
      margin: 0;
      font-size: 1rem;
      font-weight: 600;
      color: var(--color-text-main);
    }

    .video-call-modal__link {
      font-size: 0.85rem;
      color: var(--color-accent-gold-soft);
      margin-inline-start: auto;
    }

    .video-call-modal__link:hover {
      text-decoration: underline;
    }

    .video-call-modal__body {
      flex: 1;
      min-height: 0;
    }

    .video-call-modal__body iframe {
      width: 100%;
      height: 100%;
      border: none;
      display: block;
    }

    .auth-modal {
      background: #fff;
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: var(--radius-lg);
      max-width: 440px;
      width: 100%;
      max-height: 90vh;
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
      color: #111;
      margin: auto;
    }

    @media (max-width: 480px),
    (max-height: 420px) {
      .auth-overlay {
        padding: 0.5rem;
        padding-top: max(0.5rem, env(safe-area-inset-top));
        padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
        padding-left: max(0.5rem, env(safe-area-inset-left));
        padding-right: max(0.5rem, env(safe-area-inset-right));
        align-items: flex-start;
      }

      .auth-modal {
        max-height: 95vh;
        border-radius: var(--radius-md);
      }

      .auth-modal .form-group input,
      .auth-modal .form-group select,
      .auth-modal .auth-password-input-wrap input {
        font-size: 16px !important;
        min-height: 44px;
      }

      .auth-modal .auth-password-toggle,
      .auth-modal .auth-password-input-wrap .auth-password-toggle {
        min-width: 44px;
        min-height: 44px;
        padding: 0.5rem;
      }

      .ticker-item .ticker-logo {
        width: 12px;
        height: 12px;
        margin-left: 0.25rem;
        border-radius: 1px;
      }

      .ticker-item span {
        font-size: 0.7rem;
        margin-left: 0.25rem;
      }
    }

    .auth-modal__head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--space-6) var(--space-6) 0;
    }

    .auth-modal__title {
      margin: 0;
      font-size: 1.25rem;
      color: #111;
    }

    .auth-modal__close {
      background: none;
      border: none;
      color: #333;
      cursor: pointer;
      padding: 0.5rem;
      min-width: 44px;
      min-height: 44px;
      font-size: 1.5rem;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .auth-modal__close:hover {
      color: #111;
    }

    .auth-modal__close:focus {
      outline: 2px solid var(--color-accent-gold);
      outline-offset: 2px;
    }

    .auth-tabs {
      display: flex;
      padding: 0 var(--space-6);
      margin-top: var(--space-4);
      gap: 0;
      border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    }

    .auth-tabs button {
      padding: var(--space-3) var(--space-4);
      min-height: 44px;
      background: none;
      border: none;
      border-bottom: 2px solid transparent;
      color: #444;
      cursor: pointer;
      font-size: 0.9rem;
      font-weight: 600;
      margin-bottom: -1px;
    }

    .auth-tabs button:hover {
      color: #111;
    }

    .auth-tabs button:focus {
      outline: none;
    }

    .auth-tabs button:focus-visible {
      outline: 2px solid var(--color-accent-gold);
      outline-offset: 2px;
    }

    .auth-tabs button.is-active {
      color: var(--color-accent-gold);
      border-bottom-color: var(--color-accent-gold);
    }

    .auth-welcome {
      padding: var(--space-8) var(--space-6);
      text-align: center;
    }

    .auth-welcome__text {
      font-size: 1.15rem;
      color: var(--color-accent-gold);
      font-weight: 600;
      margin: 0 0 var(--space-4);
      line-height: 1.5;
    }

    .auth-welcome[hidden] {
      display: none !important;
    }

    .auth-panel {
      display: none;
      padding: var(--space-6);
    }

    .auth-panel.is-active {
      display: block;
    }

    .auth-modal.show-welcome .auth-tabs,
    .auth-modal.show-welcome .auth-panel {
      display: none !important;
    }

    .auth-modal.show-welcome .auth-welcome {
      display: block !important;
    }

    /* داخل نافذة التسجيل/الدخول: تسميات وحقول سوداء */
    .auth-modal .form-group label {
      color: #111;
    }

    .auth-modal .form-group input,
    .auth-modal .form-group select {
      background: #f8f8f8;
      border-color: rgba(0, 0, 0, 0.15);
      color: #111;
      -webkit-appearance: none;
      appearance: none;
    }

    .auth-modal .form-group select option {
      background: #fff;
      color: #111;
    }

    .auth-modal .phone-with-code input {
      color: #111;
    }

    .form-group {
      margin-bottom: var(--space-4);
    }

    .form-group label {
      display: block;
      margin-bottom: var(--space-2);
      font-size: 0.9rem;
      color: var(--color-text-muted);
    }

    .form-group input,
    .form-group select {
      width: 100%;
      padding: 0.6rem 0.8rem;
      border-radius: var(--radius-sm);
      border: 1px solid var(--color-border-subtle);
      background: rgba(255, 255, 255, 0.04);
      color: var(--color-text-main);
      font-family: inherit;
      font-size: 0.95rem;
      transition: border-color var(--transition), box-shadow var(--transition);
    }

    .form-group input:focus,
    .form-group select:focus {
      outline: none;
      border-color: rgba(201, 162, 39, 0.5);
      box-shadow: 0 0 0 3px var(--color-accent-gold-glow);
    }

    /* إلزامي واختياري وملاحظة خطأ — نجمة حمراء وتعطيل الإرسال */
    .field-required-star {
      color: #dc2626;
      font-weight: 700;
      margin-inline-start: 0.15rem;
    }

    /* User Dashboard Styles */
    .user-dashboard-container {
      padding: var(--space-4);
    }

    .user-profile-info {
      display: grid;
      grid-template-columns: 200px 1fr;
      gap: var(--space-6);
      align-items: start;
    }

    .profile-photo-section {
      text-align: center;
    }

    .profile-photo {
      width: 150px;
      height: 150px;
      border-radius: 50%;
      background: var(--color-glass);
      border: 3px solid var(--color-border-subtle);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto var(--space-4);
      overflow: hidden;
      position: relative;
    }

    .placeholder-avatar {
      font-size: 4rem;
      opacity: 0.5;
    }

    .profile-details {
      display: grid;
      gap: var(--space-4);
    }

    .privacy-settings {
      background: var(--color-glass);
      padding: var(--space-4);
      border-radius: var(--radius-md);
      border: 1px solid var(--color-border-subtle);
    }

    .checkbox-group {
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
      margin-top: var(--space-2);
    }

    .checkbox-label {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      cursor: pointer;
      font-weight: 400;
    }

    .checkbox-label input[type="checkbox"] {
      margin: 0;
      width: auto;
    }

    .form-actions {
      display: flex;
      gap: var(--space-3);
      justify-content: flex-end;
      margin-top: var(--space-6);
      padding-top: var(--space-4);
      border-top: 1px solid var(--color-border-subtle);
    }

    @media (max-width: 768px) {
      .user-profile-info {
        grid-template-columns: 1fr;
        gap: var(--space-4);
      }

      .profile-photo {
        width: 120px;
        height: 120px;
      }

      .placeholder-avatar {
        font-size: 3rem;
      }

      .form-actions {
        flex-direction: column;
      }

      .form-actions .btn {
        width: 100%;
      }
    }

    .field-valid-check {
      color: #16a34a;
      font-weight: 700;
      margin-inline-start: 0.25rem;
    }

    .form-group.has-error input,
    .form-group.has-error select,
    .form-group.has-error textarea,
    p.has-error input,
    p.has-error select,
    p.has-error textarea {
      border-color: #dc2626;
      background: rgba(220, 38, 38, 0.06);
    }

    .form-group.has-error .field-required-star,
    p.has-error .field-required-star {
      color: #dc2626;
    }

    .form-group.has-error .field-error-msg,
    p.has-error .field-error-msg {
      font-size: 0.8rem;
      color: #dc2626;
      margin-top: 0.25rem;
    }

    form.form-validate .btn[type="submit"]:disabled {
      opacity: 0.7;
      cursor: not-allowed;
    }

    .form-group select option {
      background: #fff;
      color: #111;
    }

    .phone-with-code {
      display: flex;
      align-items: center;
      border: 1px solid var(--color-border-subtle);
      border-radius: var(--radius-sm);
      background: rgba(255, 255, 255, 0.04);
    }

    .phone-with-code input {
      flex: 1;
      min-width: 0;
      border: none;
      background: transparent;
      padding: 0.6rem 0.8rem;
      color: var(--color-text-main);
      font-family: inherit;
      font-size: 0.95rem;
    }

    .phone-with-code input:focus {
      outline: none;
    }

    .phone-with-code select {
      padding: 0.6rem 0.5rem;
      border: none;
      background: rgba(255, 255, 255, 0.06);
      color: var(--color-text-main);
      font-size: 0.9rem;
      min-width: 5rem;
      max-width: 8rem;
      border-right: 1px solid var(--color-border-subtle);
      cursor: pointer;
      font-family: inherit;
    }

    .auth-modal .phone-with-code select {
      background: #f0f0f0;
      color: #111;
    }

    .auth-modal .btn {
      width: 100%;
      margin-top: var(--space-2);
      min-height: 44px;
      touch-action: manipulation;
    }

    .auth-modal .btn:focus {
      outline: none;
    }

    .auth-modal .btn:focus-visible {
      outline: 2px solid var(--color-accent-gold);
      outline-offset: 2px;
    }

    .auth-modal .auth-password-hint {
      color: #555 !important;
    }

    .auth-password-input-wrap:focus-within {
      outline: 2px solid var(--color-primary, #c9a227);
      outline-offset: 1px;
      border-radius: var(--radius);
    }

    .auth-password-strength--match {
      color: #080;
    }

    .auth-password-strength--mismatch {
      color: #c00;
    }

    .auth-providers {
      margin-bottom: var(--space-4);
    }

    .auth-providers__title {
      font-size: 0.85rem;
      color: #555;
      margin: 0 0 var(--space-2);
      text-align: center;
    }

    .auth-providers__list {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2);
      justify-content: center;
    }

    .auth-provider-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.35rem;
      padding: var(--space-3) var(--space-4);
      min-height: 44px;
      border-radius: var(--radius);
      touch-action: manipulation;
      border: 1px solid rgba(0, 0, 0, 0.15);
      background: #f8f8f8;
      color: #111;
      font-size: 0.85rem;
      font-weight: 500;
      cursor: pointer;
      min-width: 120px;
    }

    .auth-provider-btn:hover {
      background: #eee;
      border-color: rgba(0, 0, 0, 0.25);
    }

    .auth-provider-btn:focus {
      outline: none;
    }

    .auth-provider-btn:focus-visible {
      outline: 2px solid var(--color-accent-gold);
      outline-offset: 2px;
    }

    @media (hover: none) {
      .auth-provider-btn:hover {
        background: #f8f8f8;
      }

      .auth-modal .btn:hover {
        background: inherit;
      }
    }

    .auth-provider-btn {
      -webkit-tap-highlight-color: transparent;
    }

    .auth-modal .btn {
      -webkit-tap-highlight-color: transparent;
    }

    .auth-password-toggle {
      cursor: pointer;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
      pointer-events: auto;
    }

    .auth-provider-btn--google {
      border-color: #dadce0;
    }

    .auth-provider-btn--google:hover {
      background: #f1f3f4;
    }

    .auth-provider-btn--facebook {
      border-color: #1877f2;
      color: #1877f2;
    }

    .auth-provider-btn--facebook:hover {
      background: #e7f0fe;
    }

    .auth-provider-btn--email {
      border-color: #0d9488;
      color: #0d9488;
    }

    .auth-provider-btn--email:hover {
      background: #ccfbf1;
    }

    .auth-provider-btn--device {
      border-color: #7c3aed;
      color: #7c3aed;
    }

    .auth-provider-btn--device:hover {
      background: #ede9fe;
    }

    .auth-provider-btn--biometric {
      border-color: #059669;
      color: #059669;
    }

    .auth-provider-btn--biometric:hover {
      background: #d1fae5;
    }

    .auth-divider {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      margin: var(--space-4) 0;
      color: #666;
      font-size: 0.8rem;
    }

    .auth-divider::before,
    .auth-divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: rgba(0, 0, 0, 0.15);
    }

    .auth-email-verify-panel,
    .auth-device-panel {
      display: none;
      margin-top: var(--space-3);
      padding: var(--space-3);
      background: #f5f5f5;
      border-radius: var(--radius);
    }

    .auth-email-verify-panel.is-active,
    .auth-device-panel.is-active {
      display: block;
    }

    .auth-email-verify-panel .form-group {
      margin-bottom: var(--space-2);
    }

    .auth-device-panel p {
      margin: 0 0 var(--space-2);
      font-size: 0.9rem;
      color: #333;
    }

    .auth-checkbox-label {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      cursor: pointer;
      font-size: 0.9rem;
      color: #333;
    }

    .auth-checkbox-label input {
      width: auto;
    }

    /* Membership required modal (EN/AR) */
    .membership-required-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 10000;
      background: rgba(0, 0, 0, 0.6);
      align-items: center;
      justify-content: center;
      padding: var(--space-4);
    }

    .membership-required-overlay.is-open {
      display: flex;
    }

    .membership-required-modal {
      background: #fff;
      color: #111;
      border-radius: var(--radius-md);
      max-width: 520px;
      width: 100%;
      max-height: 90vh;
      overflow: auto;
      padding: var(--space-6);
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    }

    .membership-required-modal h3 {
      margin: 0 0 var(--space-4);
      font-size: 1.2rem;
    }

    .membership-required-modal p {
      margin: 0 0 var(--space-3);
      line-height: 1.6;
      font-size: 0.95rem;
    }

    .membership-required-modal .btn {
      margin-top: var(--space-4);
    }

    /* شهادة عضوية فاخرة */
    .certificate-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 10001;
      background: linear-gradient(145deg, #0a0e18 0%, #131a28 100%);
      align-items: center;
      justify-content: center;
      padding: var(--space-6);
      overflow: auto;
    }

    .certificate-overlay.is-open {
      display: flex;
    }

    .certificate-card {
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
      border: 2px solid var(--color-accent-gold);
      border-radius: var(--radius-lg);
      max-width: 560px;
      width: 100%;
      padding: var(--space-10);
      box-shadow: 0 0 0 1px rgba(201, 162, 39, 0.2), 0 24px 48px rgba(0, 0, 0, 0.4);
      position: relative;
    }

    .certificate-card::before {
      content: '';
      position: absolute;
      inset: 8px;
      border: 1px solid rgba(201, 162, 39, 0.25);
      border-radius: calc(var(--radius-lg) - 4px);
      pointer-events: none;
    }

    .certificate-card .cert-emblem {
      width: 64px;
      height: 64px;
      margin: 0 auto var(--space-6);
      display: block;
      opacity: 0.95;
    }

    .certificate-card .cert-title {
      font-size: 1.5rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--color-accent-gold);
      margin-bottom: var(--space-2);
      text-align: center;
    }

    .certificate-card .cert-subtitle {
      font-size: 0.9rem;
      color: var(--color-text-muted);
      margin-bottom: var(--space-8);
      text-align: center;
    }

    .certificate-card .cert-name {
      font-size: 1.4rem;
      font-weight: 700;
      color: var(--color-text-main);
      margin-bottom: var(--space-2);
      text-align: center;
    }

    .certificate-card .cert-definition {
      font-size: 1rem;
      color: var(--color-accent-gold-soft);
      margin-bottom: var(--space-2);
      text-align: center;
      font-style: italic;
      max-width: 100%;
      word-wrap: break-word;
    }

    .cert-definition-block {
      width: 100%;
      max-width: 100%;
    }

    .cert-definition-block .cert-definition-hint {
      font-size: 0.85rem;
      color: var(--color-accent-gold-soft);
      margin-top: var(--space-1);
      margin-bottom: var(--space-2);
      opacity: 0.95;
    }

    .cert-definition-block input[type="text"],
    .cert-definition-block textarea {
      width: 100%;
      min-height: 2.75rem;
      max-width: 100%;
      box-sizing: border-box;
    }

    .cert-definition-block textarea {
      resize: vertical;
      min-height: 3.5rem;
    }

    .certificate-card .cert-tier {
      font-size: 1.05rem;
      color: var(--color-accent-gold-soft);
      margin-bottom: var(--space-2);
      text-align: center;
      font-weight: 600;
    }

    .certificate-card.cert-tier--cooperating .cert-emblem {
      width: 56px;
      height: 56px;
      opacity: 0.9;
    }

    .certificate-card.cert-tier--shared .cert-emblem {
      width: 62px;
      height: 62px;
      opacity: 0.92;
    }

    .certificate-card.cert-tier--shared .cert-tier {
      font-size: 1.1rem;
      color: var(--color-accent-gold-soft);
    }

    .certificate-card.cert-tier--premium_2143 .cert-emblem {
      width: 72px;
      height: 72px;
      opacity: 0.95;
      filter: drop-shadow(0 2px 8px rgba(201, 162, 39, 0.35));
    }

    .certificate-card.cert-tier--premium_2143 .cert-tier {
      font-size: 1.15rem;
      color: var(--color-accent-gold);
      letter-spacing: 0.06em;
    }

    .certificate-card.cert-tier--premium_3143 .cert-emblem {
      width: 88px;
      height: 88px;
      opacity: 1;
      filter: drop-shadow(0 4px 16px rgba(201, 162, 39, 0.45));
    }

    .certificate-card.cert-tier--premium_3143 .cert-tier {
      font-size: 1.25rem;
      color: var(--color-accent-gold);
      letter-spacing: 0.08em;
      text-shadow: 0 0 20px rgba(201, 162, 39, 0.3);
    }

    .certificate-card.cert-tier--premium_4143 .cert-emblem {
      width: 104px;
      height: 104px;
      opacity: 1;
      filter: drop-shadow(0 6px 24px rgba(201, 162, 39, 0.5));
    }

    .certificate-card.cert-tier--premium_4143 .cert-tier {
      font-size: 1.35rem;
      color: #e8d48a;
      letter-spacing: 0.1em;
      font-weight: 700;
      text-shadow: 0 0 24px rgba(201, 162, 39, 0.4);
    }

    .certificate-card .cert-date {
      font-size: 0.9rem;
      color: var(--color-text-muted);
      margin-bottom: var(--space-8);
      text-align: center;
    }

    .certificate-card .cert-qr-wrap {
      text-align: center;
      margin: var(--space-6) 0;
    }

    .certificate-card .cert-qr-wrap canvas {
      display: block;
      margin: 0 auto;
      border-radius: 8px;
      background: #fff;
      padding: 8px;
    }

    .certificate-card .cert-qr-label {
      font-size: 0.75rem;
      color: var(--color-accent-gold-soft);
      margin-top: var(--space-2);
    }

    .certificate-card .cert-member-images img {
      object-fit: contain;
      border-radius: 6px;
    }

    .certificate-card .cert-member-images .cert-mem-photo {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      object-fit: cover;
    }

    .certificate-card .cert-member-images .cert-mem-logo {
      width: 72px;
      height: 72px;
      object-fit: contain;
    }

    .certificate-card .cert-member-images .cert-mem-flag {
      height: 48px;
      width: auto;
      max-width: 80px;
      object-fit: contain;
    }

    .certificate-card .cert-verify-badge {
      margin-top: var(--space-4);
      padding: var(--space-3);
      background: rgba(28, 138, 87, 0.15);
      border: 1px solid rgba(28, 138, 87, 0.4);
      border-radius: var(--radius-sm);
      font-size: 0.9rem;
      color: var(--color-accent-emerald);
      text-align: center;
    }

    /* نافذة الاتصال المرئي والمسموع — Jitsi Meet مضمّن (يمكن استبدال الرابط بسيرفركم لاحقاً) */
    .video-call-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 10002;
      background: rgba(0, 0, 0, 0.9);
      align-items: center;
      justify-content: center;
      padding: var(--space-4);
      box-sizing: border-box;
    }

    .video-call-overlay.is-open {
      display: flex;
      flex-direction: column;
    }

    .video-call-modal {
      width: 100%;
      max-width: 1200px;
      height: 90vh;
      max-height: 900px;
      background: var(--color-surface);
      border: 1px solid var(--color-border-subtle);
      border-radius: var(--radius-lg);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
    }

    .video-call-modal__head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--space-3) var(--space-4);
      background: rgba(0, 0, 0, 0.3);
      border-bottom: 1px solid var(--color-border-subtle);
      flex-shrink: 0;
    }

    .video-call-modal__head h3 {
      margin: 0;
      font-size: 1.1rem;
      color: var(--color-text-main);
    }

    .video-call-modal__head .btn {
      flex-shrink: 0;
    }

    .video-call-iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: none;
    }

    /* Image adjust overlay (certificate uploads) */
    .img-adjust-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 10002;
      background: rgba(0, 0, 0, 0.72);
      align-items: center;
      justify-content: center;
      padding: var(--space-4);
    }

    .img-adjust-overlay.is-open {
      display: flex;
    }

    .img-adjust-modal {
      background: #0c1220;
      color: var(--color-text-main);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: var(--radius-lg);
      width: 100%;
      max-width: 720px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
      padding: var(--space-6);
    }

    .img-adjust-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: var(--space-3);
      margin-bottom: var(--space-4);
    }

    .img-adjust-head h3 {
      margin: 0;
      font-size: 1.05rem;
    }

    .img-adjust-sub {
      margin: 0.25rem 0 0;
      color: var(--color-text-muted);
      font-size: 0.85rem;
      line-height: 1.5;
    }

    .img-adjust-grid {
      display: grid;
      grid-template-columns: 1fr 240px;
      gap: var(--space-5);
      align-items: start;
    }

    .img-adjust-stage {
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: var(--radius-md);
      padding: var(--space-4);
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 320px;
      position: relative;
      overflow: hidden;
    }

    .img-adjust-stage.is-circle::after {
      content: '';
      position: absolute;
      inset: 18px;
      border-radius: 999px;
      box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.38);
      border: 1px solid rgba(201, 162, 39, 0.55);
      pointer-events: none;
    }

    .img-adjust-stage:not(.is-circle)::after {
      content: '';
      position: absolute;
      inset: 18px;
      border-radius: 14px;
      box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.38);
      border: 1px solid rgba(201, 162, 39, 0.55);
      pointer-events: none;
    }

    .img-adjust-canvas {
      width: 100%;
      height: auto;
      max-width: 420px;
      border-radius: 12px;
    }

    .img-adjust-controls label {
      display: block;
      font-size: 0.85rem;
      color: var(--color-text-muted);
      margin-bottom: 0.35rem;
    }

    .img-adjust-controls input[type="range"] {
      width: 100%;
    }

    .img-adjust-controls .row {
      margin-bottom: var(--space-4);
    }

    .img-adjust-actions {
      display: flex;
      gap: var(--space-2);
      justify-content: flex-end;
      flex-wrap: wrap;
      margin-top: var(--space-4);
    }

    .cert-img-actions {
      display: flex;
      gap: var(--space-2);
      flex-wrap: wrap;
      margin-top: var(--space-2);
    }

    .cert-img-actions .btn {
      padding: 0.35rem 0.6rem;
    }

    /* Camera capture overlay (certificate uploads) */
    .cam-capture-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 10003;
      background: rgba(0, 0, 0, 0.72);
      align-items: center;
      justify-content: center;
      padding: var(--space-4);
    }

    .cam-capture-overlay.is-open {
      display: flex;
    }

    .cam-capture-modal {
      background: #0c1220;
      color: var(--color-text-main);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: var(--radius-lg);
      width: 100%;
      max-width: 720px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
      padding: var(--space-6);
    }

    .cam-capture-video {
      width: 100%;
      max-height: 380px;
      background: #000;
      border-radius: var(--radius-md);
    }

    .cam-capture-actions {
      display: flex;
      gap: var(--space-2);
      justify-content: flex-end;
      flex-wrap: wrap;
      margin-top: var(--space-4);
    }

    /* تقرير تحليل الدولة — نافذة منبثقة */
    .dashboard-report-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.75);
      z-index: 100;
      align-items: center;
      justify-content: center;
      padding: var(--space-4);
    }

    .dashboard-report-overlay:not([style*="display: none"]) {
      display: flex;
    }

    .dashboard-report-modal {
      background: #fff;
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: var(--radius-lg);
      max-width: 720px;
      width: 100%;
      max-height: 90vh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
      color: #111;
    }

    .dashboard-report-modal__head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--space-4) var(--space-6);
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

    .dashboard-report-modal__head h3 {
      margin: 0;
      font-size: 1.2rem;
      color: #111;
    }

    .dashboard-report-modal__loading {
      padding: var(--space-8) var(--space-6);
      text-align: center;
      color: #444;
    }

    .dashboard-report-modal__body {
      overflow-y: auto;
      padding: var(--space-6);
    }

    .dashboard-report-modal__body h4 {
      margin: var(--space-4) 0 var(--space-2);
      font-size: 1rem;
      color: #222;
    }

    .dashboard-report-modal__body p,
    .dashboard-report-modal__body ul {
      margin: 0 0 var(--space-3);
      font-size: 0.9rem;
      line-height: 1.6;
    }

    .dashboard-report-modal__body ul {
      padding-left: 1.25rem;
    }

    .dashboard-report-modal__body .report-meta {
      font-size: 0.8rem;
      color: #666;
      margin-top: var(--space-4);
    }

    /* Membership request form (standalone section) */
    .membership-request {
      margin-top: var(--space-12);
      padding: var(--space-8);
      background: linear-gradient(145deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0));
      border: 1px solid var(--color-border-subtle);
      border-radius: var(--radius-lg);
    }

    .membership-request h3 {
      margin-bottom: var(--space-4);
      font-size: 1.2rem;
    }

    .membership-request .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-4);
    }

    @media (max-width: 600px) {
      .membership-request .form-row {
        grid-template-columns: 1fr;
      }
    }

    /* Financing request (طالب التمويل) */
    .financing-request {
      margin-top: 0;
      padding: var(--space-8);
      background: linear-gradient(145deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0));
      border: 1px solid var(--color-border-subtle);
      border-radius: var(--radius-lg);
    }

    .financing-request h3 {
      margin-bottom: var(--space-4);
      font-size: 1.2rem;
    }

    .financing-request .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-4);
    }

    @media (max-width: 600px) {
      .financing-request .form-row {
        grid-template-columns: 1fr;
      }
    }

    /* بوابة دراسة الجدوى — رسالة ترحيبية لغير الأعضاء */
    .feasibility-gate {
      padding: var(--space-8);
      background: linear-gradient(145deg, rgba(201, 162, 39, 0.08), rgba(255, 255, 255, 0.02));
      border: 1px solid rgba(201, 162, 39, 0.3);
      border-radius: var(--radius-lg);
      text-align: center;
      max-width: 560px;
      margin: 0 auto var(--space-6);
    }

    .feasibility-gate h3 {
      font-size: 1.2rem;
      margin-bottom: var(--space-3);
    }

    .feasibility-gate p {
      margin-bottom: var(--space-4);
      color: var(--color-text-muted);
      line-height: 1.6;
    }

    .feasibility-gate .btn {
      margin-top: var(--space-2);
    }

    /* Feasibility Study (دراسة الجدوى) */
    .feasibility-study-box {
      padding: var(--space-8);
      background: linear-gradient(145deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0));
      border: 1px solid var(--color-border-subtle);
      border-radius: var(--radius-lg);
    }

    .feasibility-study-box h3 {
      margin-bottom: var(--space-4);
      font-size: 1.15rem;
    }

    .feasibility-study-box .form-group {
      margin-bottom: var(--space-5);
    }

    .feasibility-study-box .form-group label {
      display: block;
      margin-bottom: var(--space-2);
      font-size: 0.9rem;
      color: var(--color-text-muted);
    }

    .feasibility-study-box textarea {
      width: 100%;
      min-height: 180px;
      padding: 0.8rem 1rem;
      border-radius: var(--radius-sm);
      border: 1px solid var(--color-border-subtle);
      background: rgba(255, 255, 255, 0.04);
      color: var(--color-text-main);
      font-family: inherit;
      font-size: 0.95rem;
      line-height: 1.6;
      resize: vertical;
    }

    .feasibility-study-box .upload-zone {
      margin-top: var(--space-4);
    }

    /* Investor registration (استقطاب المستثمرين) — راقية */
    .investor-registration {
      margin-top: var(--space-12);
      padding: var(--space-10);
      background: linear-gradient(165deg, rgba(201, 162, 39, 0.06) 0%, var(--color-surface) 50%);
      border: 1px solid rgba(201, 162, 39, 0.35);
      border-radius: var(--radius-lg);
      box-shadow: 0 0 0 1px var(--color-accent-gold-glow), var(--shadow-card);
    }

    .investor-registration__badge {
      display: inline-block;
      padding: 0.35rem 0.9rem;
      margin-bottom: var(--space-4);
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--color-accent-gold);
      border: 1px solid var(--color-accent-gold);
      border-radius: 999px;
    }

    .investor-registration h3 {
      margin-bottom: var(--space-2);
      font-size: 1.35rem;
      color: var(--color-text-main);
    }

    .investor-registration .intro {
      margin-bottom: var(--space-6);
      font-size: 0.95rem;
      color: var(--color-text-muted);
      line-height: 1.6;
    }

    .investor-registration .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-4);
    }

    @media (max-width: 600px) {
      .investor-registration .form-row {
        grid-template-columns: 1fr;
      }
    }

    footer {
      border-top: 1px solid var(--color-border-subtle);
      padding: var(--space-10) var(--space-4);
      text-align: center;
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--color-text-muted);
      background: linear-gradient(180deg, var(--color-bg) 0%, #020408 100%);
    }

    .lang-ar, [data-i18n] {
      display: none !important;
    }

    [data-lang="ar"] .lang-en {
      display: none !important;
    }

    [data-lang="ar"] .lang-ar {
      display: block !important;
    }

    /* Language picker (50+ languages) — خلفية فاتحة وكتابة سوداء */
    .lang-picker-wrap {
      position: relative;
      margin-left: var(--space-2);
      display: flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.35rem 0.5rem;
      background: #f5f5f5;
      border-radius: var(--radius-sm);
      border: 1px solid rgba(0, 0, 0, 0.1);
    }

    .lang-picker-label {
      font-size: 0.85rem;
      color: #111;
      white-space: nowrap;
    }

    .lang-picker-wrap select {
      padding: 0.35rem 1.8rem 0.35rem 0.6rem;
      border-radius: var(--radius-sm);
      border: 1px solid rgba(0, 0, 0, 0.15);
      background: #fff;
      color: #111;
      font-size: 0.85rem;
      cursor: pointer;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23111' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 0.5rem center;
    }

    .lang-picker-wrap select:hover {
      border-color: var(--color-accent-gold);
    }

    .lang-picker-wrap select:focus {
      outline: none;
      border-color: var(--color-accent-gold);
    }

    .lang-picker-wrap select option {
      background: #fff;
      color: #111 !important;
      padding: 0.5rem;
      font-size: 0.95rem;
    }

    /* Search in header */
    .header-search {
      display: flex;
      align-items: center;
      position: relative;
      margin-left: var(--space-2);
    }

    .header-search input {
      width: 160px;
      padding: 0.2rem 0.5rem 0.2rem 1.75rem;
      border-radius: 999px;
      border: 1px solid var(--color-border-subtle);
      background: rgba(255, 255, 255, 0.06);
      color: var(--color-text-main);
      font-size: 0.8rem;
      transition: width 0.2s;
    }

    .header-search input::placeholder {
      color: var(--color-text-muted);
    }

    .header-search input:focus {
      outline: none;
      border-color: var(--color-accent-gold);
      width: 200px;
    }

    .header-search::before {
      content: '';
      position: absolute;
      left: 0.65rem;
      width: 14px;
      height: 14px;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23a6b0c2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E") center/contain no-repeat;
    }

    /* ساعة رقمية — إضاءة لطيفة فاخرة */
    .site-clock {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      padding: 0.5rem var(--space-4);
      margin-inline-end: var(--space-2);
      border-inline-end: 1px solid rgba(201, 162, 39, 0.2);
      min-width: 7rem;
      background: linear-gradient(135deg, rgba(201, 162, 39, 0.06) 0%, rgba(201, 162, 39, 0.02) 50%, transparent 100%);
      border-radius: var(--radius-sm);
      box-shadow: 0 0 24px rgba(201, 162, 39, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }

    .site-clock__time {
      font-variant-numeric: tabular-nums;
      font-size: 1.2rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      color: #f0e6c8;
      text-shadow:
        0 0 20px rgba(232, 212, 138, 0.6),
        0 0 40px rgba(201, 162, 39, 0.25),
        0 1px 2px rgba(0, 0, 0, 0.3);
      line-height: 1.2;
      filter: drop-shadow(0 0 8px rgba(201, 162, 39, 0.2));
    }

    .site-clock__tz {
      font-size: 0.72rem;
      font-weight: 600;
      color: #e8d48a;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-top: 0.25rem;
      text-shadow:
        0 0 14px rgba(232, 212, 138, 0.5),
        0 0 28px rgba(201, 162, 39, 0.2);
      filter: drop-shadow(0 0 6px rgba(201, 162, 39, 0.15));
    }

    .site-clock__date {
      font-size: 0.78rem;
      font-weight: 600;
      color: #e8d48a;
      margin-top: 0.3rem;
      letter-spacing: 0.04em;
      text-shadow:
        0 0 14px rgba(232, 212, 138, 0.5),
        0 0 28px rgba(201, 162, 39, 0.2);
      filter: drop-shadow(0 0 6px rgba(201, 162, 39, 0.15));
    }

    #iif-search-wrap {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      margin-top: 0.25rem;
      background: var(--color-surface);
      border: 1px solid var(--color-border-subtle);
      border-radius: var(--radius-sm);
      max-height: 240px;
      overflow-y: auto;
      display: none;
      z-index: 50;
    }

    /* Upload & project description section */
    .upload-submit-box {
      padding: var(--space-8);
      background: linear-gradient(145deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0));
      border: 1px solid var(--color-border-subtle);
      border-radius: var(--radius-lg);
    }

    .upload-submit-box h3 {
      margin-bottom: var(--space-4);
      font-size: 1.2rem;
    }

    .upload-zone {
      border: 2px dashed var(--color-border-subtle);
      border-radius: var(--radius-md);
      padding: var(--space-8);
      text-align: center;
      margin-bottom: var(--space-6);
      background: rgba(255, 255, 255, 0.02);
      transition: border-color 0.2s, background 0.2s;
    }

    .upload-zone:hover,
    .upload-zone.dragover {
      border-color: var(--color-accent-gold);
      background: rgba(214, 175, 79, 0.06);
    }

    .upload-zone input[type="file"] {
      display: block;
      margin: 0 auto var(--space-3);
      font-size: 0.9rem;
      color: var(--color-text-muted);
    }

    .upload-zone p {
      margin: 0;
      font-size: 0.9rem;
      color: var(--color-text-muted);
    }

    .upload-types {
      margin-top: var(--space-2);
      font-size: 0.85rem;
      color: var(--color-accent-gold);
    }

    .upload-grid-four {
      display: flex;
      flex-direction: column;
      gap: var(--space-6);
      margin-bottom: var(--space-6);
    }

    .upload-grid-four .upload-type-card {
      width: 100%;
      max-width: 100%;
    }

    .upload-type-card {
      padding: var(--space-5);
    }

    .upload-type-card h3 {
      font-size: 1.05rem;
      margin-bottom: 0.25rem;
    }

    .upload-type-card .upload-zone {
      padding: var(--space-4);
      margin-bottom: var(--space-3);
    }

    .upload-form .btn-sm {
      margin-top: 0;
    }

    .upload-zone--docs {
      border-color: rgba(30, 58, 95, 0.5);
    }

    .upload-zone--images {
      border-color: rgba(28, 138, 87, 0.4);
    }

    .upload-zone--video {
      border-color: rgba(201, 162, 39, 0.4);
    }

    .live-capture-wrap {
      margin-top: var(--space-3);
    }

    .live-capture-preview {
      width: 100%;
      min-height: 180px;
      background: var(--color-surface-elevated);
      border-radius: var(--radius-md);
      border: 1px solid var(--color-border-subtle);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: var(--space-3);
      position: relative;
      overflow: hidden;
    }

    .live-capture-placeholder {
      margin: 0;
      color: var(--color-text-muted);
      font-size: 0.9rem;
    }

    .live-capture-btns {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2);
    }

    .btn-sm {
      padding: 0.5rem 1rem;
      font-size: 0.85rem;
    }

    /* نتائج محمية — منع النسخ للزوار؛ الإدارة لها صلاحية النسخ واللصق */
    .protected-results {
      user-select: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      pointer-events: auto;
    }

    body.is-admin .protected-results {
      user-select: text;
      -webkit-user-select: text;
      -moz-user-select: text;
      -ms-user-select: text;
    }

    /* صلاحية النسخ واللصق للموظفين — في صفحة الخطابات فقط */
    body.is-staff .letters-area,
    body.is-admin .letters-area {
      user-select: text;
      -webkit-user-select: text;
      -moz-user-select: text;
      -ms-user-select: text;
    }

    .protected-results .no-permission {
      color: var(--color-text-muted);
      font-size: 0.95rem;
      padding: var(--space-6);
      text-align: center;
      border: 1px dashed var(--color-border-subtle);
      border-radius: var(--radius-md);
    }

    .budget-analysis-box,
    .feasibility-analysis-box {
      padding: var(--space-6);
      background: linear-gradient(145deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0));
      border: 1px solid var(--color-border-subtle);
      border-radius: var(--radius-lg);
      margin-top: var(--space-4);
    }

    .budget-analysis-box h3,
    .feasibility-analysis-box h3 {
      font-size: 1.1rem;
      margin-bottom: var(--space-4);
    }

    .budget-upload-zone {
      padding: var(--space-6);
      border: 2px dashed var(--color-border-subtle);
      border-radius: var(--radius-md);
      margin-bottom: var(--space-4);
      text-align: center;
      background: rgba(255, 255, 255, 0.02);
    }

    .budget-upload-zone.has-file {
      border-color: var(--color-accent-gold);
      background: rgba(201, 162, 39, 0.08);
    }

    .budget-upload-zone input[type="file"] {
      margin: var(--space-2) 0;
    }

    .budget-report-lang {
      margin: var(--space-3) 0;
      display: flex;
      align-items: center;
      gap: var(--space-2);
      flex-wrap: wrap;
    }

    .budget-report-lang label {
      margin: 0;
      font-size: 0.9rem;
    }

    .budget-report-lang select {
      padding: 0.4rem 0.75rem;
      border-radius: var(--radius-sm);
      border: 1px solid var(--color-border-subtle);
      background: var(--color-surface);
      color: var(--color-text-main);
    }

    /* صفحة التحليل — ممتدة لاستيعاب كامل التحليل، تنسيق تقرير اقتصادي */
    #budget-results-wrap.budget-results-inline {
      width: 100%;
      max-width: 100%;
      min-height: 200px;
      padding: var(--space-5) 0;
      overflow: visible;
    }

    #budget-results {
      width: 100%;
      max-width: 100%;
      overflow: visible;
    }

    .budget-analysis-report {
      width: 100%;
      max-width: 100%;
      margin: 0;
      padding: var(--space-6) var(--space-5);
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.02) 100%);
      border-radius: var(--radius-lg);
      border: 1px solid var(--color-border-subtle);
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: var(--space-5);
      align-content: start;
    }

    .budget-analysis-report h4 {
      grid-column: 1 / -1;
      font-size: 1.2rem;
      margin: 0 0 var(--space-4);
      padding-bottom: var(--space-3);
      color: var(--color-accent-gold-soft);
      border-bottom: 2px solid var(--color-accent-gold);
      letter-spacing: 0.02em;
    }

    .budget-analysis-report .report-section {
      margin: 0;
      padding: var(--space-4);
      background: rgba(255, 255, 255, 0.03);
      border-radius: var(--radius-md);
      border: 1px solid rgba(255, 255, 255, 0.06);
      min-height: 0;
    }

    .budget-analysis-report .report-section.report-header {
      grid-column: 1 / -1;
      padding: var(--space-5);
      background: rgba(201, 162, 39, 0.06);
      border-color: rgba(201, 162, 39, 0.2);
    }

    .budget-analysis-report .report-section h5 {
      font-size: 0.9rem;
      font-weight: 600;
      margin: 0 0 var(--space-2);
      color: var(--color-accent-gold-soft);
      letter-spacing: 0.03em;
      text-transform: uppercase;
    }

    .budget-analysis-report .report-section p {
      margin: 0.35rem 0;
      line-height: 1.65;
      font-size: 0.95rem;
      font-variant-numeric: tabular-nums;
    }

    .budget-analysis-report .report-section p:first-of-type {
      margin-top: 0;
    }

    .budget-analysis-report .report-header {
      border-bottom: none;
      padding-bottom: 0;
    }

    .analysis-result-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.9rem;
      margin-top: var(--space-3);
      font-variant-numeric: tabular-nums;
    }

    .analysis-result-table th,
    .analysis-result-table td {
      padding: 0.5rem 0.75rem;
      border-bottom: 1px solid var(--color-border-subtle);
    }

    .analysis-result-table th {
      text-align: left;
      color: var(--color-text-muted);
      font-weight: 600;
      background: rgba(0, 0, 0, 0.15);
    }

    .analysis-result-table td:last-child,
    .analysis-result-table th:last-child {
      text-align: right;
    }

    .analysis-result-table .result-total {
      font-weight: 700;
      color: var(--color-accent-gold-soft);
    }

    .project-description-wrap {
      margin-top: 0;
      margin-bottom: var(--space-6);
    }

    .project-description-wrap label {
      display: block;
      margin-bottom: var(--space-2);
      font-size: 0.9rem;
      color: var(--color-text-muted);
    }

    .project-description-wrap textarea {
      width: 100%;
      min-height: 180px;
      max-height: 320px;
      padding: 0.8rem 1rem;
      border-radius: var(--radius-md);
      border: 2px solid var(--color-border-subtle);
      background: rgba(255, 255, 255, 0.04);
      color: var(--color-text-main);
      font-family: inherit;
      font-size: 0.95rem;
      line-height: 1.6;
      resize: vertical;
    }

    .project-description-wrap textarea:focus {
      outline: none;
      border-color: var(--color-accent-gold);
    }

    .char-counter {
      margin-top: var(--space-2);
      font-size: 0.85rem;
      color: var(--color-text-muted);
    }

    .char-counter.min-not-met {
      color: #c94a4a;
    }

    .char-counter.min-met {
      color: var(--color-accent-emerald);
    }

    /* Translation services (free, login required) */
    .translation-notice {
      padding: var(--space-4) var(--space-5);
      margin-bottom: var(--space-8);
      background: rgba(201, 162, 39, 0.1);
      border: 1px solid rgba(201, 162, 39, 0.25);
      border-radius: var(--radius-md);
      font-size: 0.95rem;
      color: var(--color-text-main);
    }

    .translation-notice strong {
      color: var(--color-accent-gold-soft);
    }

    .translation-google-style {
      width: 100%;
    }

    .translation-box-row {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: var(--space-4);
      margin-bottom: var(--space-4);
      align-items: stretch;
    }

    .translation-swap-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: var(--space-2);
      padding: 0 var(--space-2);
    }

    .translation-swap-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 48px;
      padding: 0;
      border: 2px solid rgba(201, 162, 39, 0.5);
      border-radius: var(--radius-md);
      background: rgba(201, 162, 39, 0.1);
      color: var(--color-accent-gold);
      cursor: pointer;
      transition: background var(--transition), border-color var(--transition), transform var(--transition);
      font-size: 1.4rem;
      line-height: 1;
    }

    .translation-swap-btn:hover {
      background: rgba(201, 162, 39, 0.2);
      border-color: var(--color-accent-gold);
    }

    .translation-swap-btn:active {
      transform: scale(0.96);
    }

    .translation-lang-options-box {
      padding: var(--space-3);
      border: 1px solid var(--color-border-subtle);
      border-radius: var(--radius-sm);
      background: rgba(255, 255, 255, 0.03);
      margin-bottom: var(--space-2);
    }

    .translation-lang-options-box .translation-box-label {
      margin-bottom: var(--space-1);
    }

    @media (max-width: 768px) {
      .translation-box-row {
        grid-template-columns: 1fr;
      }

      .translation-swap-wrap {
        order: 0;
        padding: var(--space-2) 0;
        flex-direction: row;
      }
    }

    .translation-box-wrap {
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
    }

    .translation-box-label {
      font-size: 0.9rem;
      color: var(--color-text-muted);
      font-weight: 500;
    }

    .translation-lang-select {
      width: 100%;
      max-width: 220px;
      padding: 0.5rem 0.75rem;
      border-radius: var(--radius-sm);
      border: 1px solid var(--color-border-subtle);
      background: rgba(255, 255, 255, 0.06);
      color: var(--color-text-main);
      font-size: 0.95rem;
    }

    .translation-text-box {
      min-height: 220px;
      width: 100%;
      padding: var(--space-4);
      border-radius: var(--radius-md);
      border: 1px solid var(--color-border-subtle);
      background: rgba(255, 255, 255, 0.04);
      color: var(--color-text-main);
      font-size: 1rem;
      line-height: 1.6;
      resize: vertical;
    }

    .translation-text-box::placeholder {
      color: var(--color-text-muted);
    }

    .translation-input-options,
    .translation-result-options {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--space-2);
      margin-top: var(--space-2);
    }

    .translation-input-hint,
    .translation-result-hint {
      font-size: 0.85rem;
      color: var(--color-text-muted);
    }

    .translation-voice-icon,
    .translation-listen-icon {
      margin-right: 0.25rem;
    }

    .translation-counters {
      font-size: 0.85rem;
      color: var(--color-text-muted);
    }

    .translation-actions {
      margin-top: var(--space-3);
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-3);
      align-items: center;
    }

    .checkbox-label {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      cursor: pointer;
      font-size: 0.95rem;
    }

    .checkbox-label input {
      margin: 0;
    }

    @media (max-width: 768px) {
      .translation-box-row {
        grid-template-columns: 1fr;
      }

      .translation-swap-wrap {
        order: 0;
      }
    }

    .translation-result {
      margin-top: var(--space-4);
      padding: var(--space-4);
      min-height: 80px;
      background: rgba(0, 0, 0, 0.25);
      border-radius: var(--radius-sm);
      border: 1px solid var(--color-border-subtle);
      font-size: 0.95rem;
      line-height: 1.6;
      color: var(--color-text-muted);
      white-space: pre-wrap;
      word-break: break-word;
    }

    .translation-result.has-result {
      color: var(--color-text-main);
    }

    [dir="rtl"] .compliance-legal-notice {
      border-left: none;
      border-right: 4px solid var(--color-accent-gold);
    }

    @media (max-width: 768px) {

      .ticker-item .ticker-logo {
        width: 14px;
        height: 14px;
        margin-left: 0.3rem;
        border-radius: 2px;
      }

      .ticker-item span {
        font-size: 0.75rem;
        margin-left: 0.3rem;
      }
    }

    /* News & markets ticker */
    .ticker-wrap {
      position: relative;
      overflow: hidden;
      border-bottom: 1px solid var(--color-border-subtle);
      background: linear-gradient(90deg, var(--color-surface) 0%, transparent 100%);
      padding: 0.5rem 0 0.5rem 6rem;
      backdrop-filter: blur(8px);
      min-height: 2.5rem;
    }

    .ticker-wrap .ticker-label {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      z-index: 2;
      padding: 0 1rem 0 1rem;
      display: flex;
      align-items: center;
      background: linear-gradient(90deg, var(--color-bg) 70%, transparent);
      font-size: 0.8rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--color-accent-gold);
    }

    .ticker-track {
      display: flex;
      width: max-content;
      animation: ticker-scroll-rtl 120s linear infinite;
      animation-iteration-count: infinite;
      will-change: transform;
    }

    [dir="ltr"] .ticker-track {
      animation-name: ticker-scroll-ltr;
    }

    .ticker-track:hover {
      animation-play-state: paused;
    }

    .ticker-track__copy {
      display: flex;
      align-items: center;
      flex-shrink: 0;
    }

    .ticker-item {
      display: inline-flex;
      align-items: center;
      flex-shrink: 0;
      padding: 0 1rem;
      text-decoration: none;
      color: var(--color-text-main);
      font-size: 0.9rem;
      white-space: nowrap;
      transition: color 0.2s;
    }

    .ticker-item:hover {
      color: var(--color-accent-gold-soft);
    }

    .ticker-item .ticker-logo {
      width: 16px;
      height: 16px;
      margin-left: 0.4rem;
      border-radius: 2px;
      object-fit: cover;
      flex-shrink: 0;
      vertical-align: middle;
    }

    .ticker-item span {
      margin-left: 0.35rem;
      opacity: 0.8;
      font-size: 0.8rem;
      vertical-align: middle;
    }

    .ticker-item .lang-ar {
      font-size: inherit;
      opacity: 1;
      margin-left: 0;
    }

    /* حركة مستمرة: عند الانتهاء تُكرر من جديد (حلقة لا نهائية) */
    @keyframes ticker-scroll-rtl {
      0% {
        transform: translateX(0);
      }

      100% {
        transform: translateX(-50%);
      }
    }

    @keyframes ticker-scroll-ltr {
      0% {
        transform: translateX(0);
      }

      100% {
        transform: translateX(50%);
      }
    }

    [dir="rtl"] .ticker-wrap {
      padding: 0.5rem 6rem 0.5rem 0;
    }

    [dir="rtl"] .ticker-wrap .ticker-label {
      left: auto;
      right: 0;
      background: linear-gradient(270deg, var(--color-bg) 70%, transparent);
    }

    /* Headlines widget (from RSS via Netlify function) */

    /* Dashboard overlay - ملء الشاشة */
    .dashboard-overlay {
      position: fixed;
      inset: 0;
      z-index: 50;
      display: none;
      background: var(--color-bg);
      overflow-y: auto;
      padding: 0;
    }

    .dashboard-overlay.is-open {
      display: block;
    }

    .dashboard-modal {
      width: 100%;
      max-width: none;
      max-height: none;
      margin: 0;
      background: var(--color-bg);
      border: none;
      border-radius: 0;
      box-shadow: none;
      padding: var(--space-4);
    }

    .dashboard-modal h2 {
      margin-bottom: var(--space-6);
      font-size: 1.25rem;
    }

    .dashboard-form {
      margin-bottom: var(--space-8);
      padding-bottom: var(--space-6);
      border-bottom: 1px solid var(--color-border-subtle);
    }

    .dashboard-form .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-4);
    }

    @media (max-width: 600px) {
      .dashboard-form .form-row {
        grid-template-columns: 1fr;
      }
    }

    .dashboard-form textarea {
      width: 100%;
      padding: 0.6rem 0.8rem;
      border-radius: var(--radius-sm);
      border: 1px solid var(--color-border-subtle);
      background: rgba(255, 255, 255, 0.04);
      color: var(--color-text-main);
      font-family: inherit;
      font-size: 0.95rem;
      min-height: 80px;
      resize: vertical;
    }

    .dashboard-list {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .dashboard-list li {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: var(--space-4);
      padding: var(--space-4);
      margin-bottom: var(--space-3);
      background: var(--color-surface-elevated);
      border-radius: var(--radius-sm);
      border: 1px solid var(--color-border-subtle);
    }

    .dashboard-list li .content {
      flex: 1;
      min-width: 0;
    }

    .dashboard-list li .content strong {
      display: block;
      margin-bottom: 0.25rem;
    }

    .dashboard-list li .content small {
      color: var(--color-text-muted);
      font-size: 0.85rem;
    }

    .dashboard-list li .actions {
      display: flex;
      gap: var(--space-2);
      flex-shrink: 0;
    }

    .dashboard-list li .actions button {
      padding: 0.4rem 0.75rem;
      font-size: 0.8rem;
      border-radius: 999px;
      border: 1px solid var(--color-border-subtle);
      background: rgba(255, 255, 255, 0.06);
      color: var(--color-text-muted);
      cursor: pointer;
      transition: background 0.2s, color 0.2s;
    }

    .dashboard-list li .actions button:hover {
      background: rgba(255, 255, 255, 0.1);
      color: var(--color-text-main);
    }

    .dashboard-list li .actions button.btn-delete:hover {
      background: rgba(200, 80, 80, 0.3);
      color: #e8a0a0;
    }

    .dashboard-visitor-counter {
      margin-bottom: var(--space-6);
      padding: var(--space-3) var(--space-4);
      background: rgba(0, 0, 0, 0.25);
      border: 1px dashed var(--color-border-subtle);
      border-radius: var(--radius-sm);
      font-size: 0.9rem;
    }

    .visitor-counter-label {
      display: block;
      color: var(--color-text-muted);
      font-size: 0.8rem;
      margin-bottom: 0.25rem;
    }

    .visitor-counter-value {
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--color-accent-gold);
    }

    .visitor-counter-note {
      font-size: 0.75rem;
      color: var(--color-text-muted);
      margin: 0.25rem 0 0;
    }

    .nav-dashboard-link {
      display: none;
    }

    .nav-dashboard-link.is-visible {
      display: inline-flex;
    }

    .nav-logout-link {
      display: none;
    }

    .nav-logout-link.is-visible {
      display: inline-flex;
    }

    .dashboard-letters {
      margin-top: var(--space-10);
      padding-top: var(--space-6);
      border-top: 1px solid var(--color-border-subtle);
    }

    .dashboard-uploads-tabs {
      display: flex;
      gap: var(--space-2);
      margin-bottom: var(--space-4);
      flex-wrap: wrap;
    }

    .dashboard-gov-tabs {
      display: flex;
      gap: var(--space-2);
      margin-bottom: var(--space-4);
      flex-wrap: wrap;
    }

    .dashboard-gov-tab {
      padding: 0.5rem 1rem;
      border-radius: var(--radius-sm);
      border: 1px solid var(--color-border-subtle);
      background: transparent;
      color: var(--color-text-muted);
      font-size: 0.9rem;
      cursor: pointer;
      transition: color 0.2s, border-color 0.2s, background 0.2s;
    }

    .dashboard-gov-tab:hover {
      color: var(--color-accent-gold-soft);
      border-color: rgba(201, 162, 39, 0.4);
    }

    .dashboard-gov-tab.is-active {
      color: var(--color-accent-gold-soft);
      border-color: var(--color-accent-gold);
      background: var(--color-glass);
    }

    .dashboard-gov-panels {
      margin-top: var(--space-4);
    }

    .dashboard-gov-panel {
      display: none;
    }

    .dashboard-gov-panel.is-active {
      display: block;
    }

    .gov-dir-fetch-status {
      font-size: 0.85rem;
      margin-left: 0.5rem;
    }

    .dashboard-upload-tab {
      padding: 0.4rem 0.8rem;
      font-size: 0.85rem;
      border-radius: var(--radius-sm);
      border: 1px solid var(--color-border-subtle);
      background: rgba(255, 255, 255, 0.04);
      color: var(--color-text-muted);
      cursor: pointer;
    }

    .dashboard-upload-tab.is-active {
      border-color: var(--color-accent-gold);
      color: var(--color-accent-gold-soft);
      background: rgba(201, 162, 39, 0.1);
    }

    .dashboard-letters__title {
      font-size: 1.1rem;
      margin-bottom: var(--space-2);
    }

    .dashboard-letters__intro {
      font-size: 0.9rem;
      color: var(--color-text-muted);
      margin-bottom: var(--space-6);
    }

    .letter-editor .letter-meta {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: var(--space-4);
      margin-bottom: var(--space-4);
    }

    .letter-editor .form-group {
      margin-bottom: 0;
    }

    .letter-editor .form-group label {
      display: block;
      font-size: 0.85rem;
      color: var(--color-text-muted);
      margin-bottom: 0.25rem;
    }

    .letter-editor .form-group input {
      width: 100%;
      padding: 0.6rem 0.75rem;
      border-radius: 3px;
      border: 1px solid rgba(30, 58, 95, 0.2);
      background: #fefefe;
      color: #111;
      font-family: Georgia, 'Times New Roman', serif;
      font-size: 1.05rem;
    }

    .letter-pages {
      margin-bottom: var(--space-4);
    }

    .letter-page-wrap {
      margin-bottom: var(--space-4);
    }

    .letter-page-label {
      display: block;
      font-size: 0.9rem;
      color: var(--color-text-muted);
      margin-bottom: var(--space-2);
    }

    .letter-body {
      width: 100%;
      min-height: 120px;
      padding: 0.75rem 1rem;
      border-radius: var(--radius-sm);
      border: 1px solid var(--color-border-subtle);
      background: rgba(255, 255, 255, 0.04);
      color: var(--color-text-main);
      font-family: inherit;
      font-size: 0.95rem;
      resize: vertical;
    }

    .letter-qr-block {
      margin: var(--space-6) 0;
      padding: var(--space-4);
      background: rgba(0, 0, 0, 0.2);
      border-radius: var(--radius-sm);
    }

    .letter-qr-display {
      margin: var(--space-3) 0;
      min-height: 100px;
    }

    .letter-qr-display canvas,
    .letter-qr-display img {
      display: block;
    }

    .letter-qr-hint {
      font-size: 0.8rem;
      color: var(--color-text-muted);
      margin: 0.25rem 0 0;
    }

    /* صفحة هيدر ليتر — حسب النموذج: هيدر (شعار + خط أزرق + تواصل)، جسم، فوتر (كيو آر + تواصل + لوجوهات محيطة + SIRET) */
    .letterhead-sheet {
      width: 210mm;
      height: 297mm;
      margin: var(--space-6) 0;
      padding: 0;
      background: white;
      border: 1px solid #ddd;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      border-radius: var(--radius-sm);
      overflow: hidden;
      position: relative;
    }

    @media print {
      .letterhead-sheet {
        width: 210mm;
        height: 297mm;
        margin: 0;
        border: none;
        box-shadow: none;
        border-radius: 0;
        page-break-after: always;
      }

      body {
        margin: 0;
        padding: 0;
      }
    }

    .letterhead-sheet::before {
      content: '';
      position: absolute;
      right: 10%;
      bottom: 15%;
      width: 180px;
      height: 180px;
      background: url('assets/emblem.png') center center no-repeat;
      background-size: contain;
      opacity: 0.07;
      pointer-events: none;
    }

    .letterhead-sheet__head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: var(--space-4);
      padding: var(--space-4) var(--space-6);
      border-bottom: 2px solid #1e3a5f;
      position: relative;
      z-index: 1;
    }

    .letterhead-sheet__head-left {
      flex-shrink: 0;
    }

    .letterhead-sheet__head .letterhead-logo {
      max-width: 90px;
      height: auto;
      display: block;
      object-fit: contain;
    }


    .letterhead-sheet__head-right {
      text-align: right;
      flex-shrink: 0;
    }

    .letterhead-sheet__head-right .letterhead-website {
      font-size: 0.95rem;
      color: #1e3a5f;
      font-weight: 600;
      display: block;
      margin-bottom: 0.15rem;
    }

    .letterhead-sheet__head-right .letterhead-email {
      font-size: 0.9rem;
      color: #333;
    }

    .letterhead-sheet__meta {
      display: grid;
      grid-template-columns: 1fr auto auto;
      gap: var(--space-4);
      padding: 0 var(--space-6) var(--space-3);
      position: relative;
      z-index: 1;
      align-items: center;
      flex-wrap: wrap;
    }

    .letterhead-meta-row {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
    }

    .letterhead-meta-label {
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: #1e3a5f;
    }

    .letterhead-sheet__body {
      min-height: 400px;
      padding: var(--space-6) var(--space-6);
      position: relative;
      z-index: 1;
    }

    .letterhead-sheet__body textarea {
      width: 100%;
      min-height: 360px;
      border: none;
      resize: vertical;
      font-family: Georgia, 'Times New Roman', serif;
      font-size: 1.15rem;
      line-height: 1.85;
      color: #111;
      background: transparent;
      padding: 0;
    }

    .letterhead-sheet__body textarea::placeholder {
      color: #999;
    }

    .letterhead-sheet__footer {
      border-top: 2px solid #1e3a5f;
      padding: var(--space-4) var(--space-6);
      position: relative;
      z-index: 1;
      background: #fafafa;
    }

    .letterhead-sheet__footer-logos {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-4);
      flex-wrap: wrap;
      margin-top: var(--space-3);
      padding-top: var(--space-2);
    }

    .letterhead-sheet__footer-logos .footer-logo-item {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
    }

    .letterhead-sheet__footer-logos .logo-svg {
      width: 44px;
      height: 44px;
      display: block;
      border-radius: 4px;
    }

    .letterhead-input-luxury,
    .letterhead-sheet__body textarea,
    .letter-editor .letter-body {
      font-family: Georgia, 'Times New Roman', serif !important;
      font-size: 1.1rem !important;
      line-height: 1.8 !important;
      color: #111 !important;
      padding: 0.6rem 0.75rem !important;
      border: 1px solid rgba(30, 58, 95, 0.15) !important;
      border-radius: 3px !important;
      background: #fefefe !important;
    }

    .letterhead-input-luxury::placeholder,
    .letterhead-sheet__body textarea::placeholder {
      color: #888;
    }

    .letterhead-send-channels {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-4);
      margin-top: var(--space-4);
    }

    .inbox-outbox-tab.is-active {
      background: rgba(201, 162, 39, 0.2);
      color: var(--color-accent-gold-soft);
      border-color: var(--color-accent-gold);
    }

    .suggestions-tab.is-active {
      background: rgba(201, 162, 39, 0.2);
      color: var(--color-accent-gold-soft);
      border-color: var(--color-accent-gold);
    }

    .letter-box-panel {
      margin-top: var(--space-2);
    }

    .archive-date-label {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      font-size: 0.85rem;
      color: var(--color-text-muted);
    }

    .archive-date-label input {
      margin: 0;
    }

    @media (max-width: 700px) {
      .letterhead-send-channels {
        grid-template-columns: 1fr;
      }
    }

    .letterhead-send-channel {
      padding: var(--space-4);
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(201, 162, 39, 0.25);
      border-radius: var(--radius-md);
    }

    .letterhead-send-channel h5 {
      font-size: 0.95rem;
      margin: 0 0 var(--space-3);
      color: var(--color-accent-gold-soft);
    }

    .letterhead-send-channel .channel-list {
      list-style: none;
      margin: 0 0 var(--space-2);
      padding: 0;
      max-height: 100px;
      overflow-y: auto;
      font-size: 0.85rem;
    }

    .letterhead-send-channel .channel-list li {
      padding: 0.2rem 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 0.5rem;
    }

    .letterhead-send-channel .channel-list li .remove-addr {
      font-size: 0.75rem;
      opacity: 0.8;
    }

    .letterhead-sheet-actions {
      margin-top: var(--space-4);
      padding: 0 var(--space-6);
      position: relative;
      z-index: 1;
    }

    .letterhead-qr-section {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-6);
      margin: var(--space-6) 0;
      align-items: start;
    }

    @media (max-width: 600px) {
      .letterhead-qr-section {
        grid-template-columns: 1fr;
      }
    }

    .letterhead-qr-card {
      padding: var(--space-4);
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid var(--color-border-subtle);
      border-radius: var(--radius-md);
      text-align: center;
    }

    .letterhead-qr-card h4 {
      font-size: 0.95rem;
      margin: 0 0 var(--space-3);
      color: var(--color-accent-gold-soft);
    }

    .letterhead-qr-card .qr-wrap {
      position: relative;
      display: inline-block;
      margin: 0 auto;
    }

    .letterhead-qr-card .qr-wrap canvas {
      display: block;
      border-radius: 6px;
    }

    .letterhead-qr-card .qr-wrap .qr-logo-overlay {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 28%;
      height: 28%;
      max-width: 44px;
      max-height: 44px;
      background: #fff;
      border-radius: 4px;
      padding: 3px;
      box-sizing: border-box;
      object-fit: contain;
    }

    .letterhead-send-verify {
      margin-top: var(--space-4);
      padding: var(--space-4);
      background: rgba(201, 162, 39, 0.08);
      border: 1px solid rgba(201, 162, 39, 0.3);
      border-radius: var(--radius-md);
    }

    .letterhead-send-verify h4 {
      font-size: 0.95rem;
      margin: 0 0 var(--space-3);
    }

    .letterhead-pending-list {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .letterhead-pending-list li {
      padding: var(--space-3);
      margin-bottom: var(--space-2);
      background: rgba(255, 255, 255, 0.04);
      border-radius: var(--radius-sm);
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: var(--space-2);
    }

    .letterhead-pending-list li .assign-row {
      display: flex;
      gap: var(--space-2);
      align-items: center;
      flex-wrap: wrap;
    }

    .staff-permissions-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: var(--space-2);
      margin: var(--space-3) 0;
    }

    .staff-permissions-grid label {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-weight: normal;
      font-size: 0.9rem;
      cursor: pointer;
    }

    .staff-permissions-grid input[type="checkbox"] {
      margin: 0;
    }

    .staff-custom-perm-list li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.35rem 0;
      font-size: 0.9rem;
    }

    .staff-custom-perm-list li .remove-custom-perm {
      font-size: 0.8rem;
      opacity: 0.9;
    }

    .staff-list-photo-wrap {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;
      background: var(--color-surface-elevated);
    }

    .staff-list-photo {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .staff-list-body {
      flex: 1;
      min-width: 0;
    }

    .staff-list-bio {
      font-size: 0.8rem;
      color: var(--color-text-muted);
      margin: 0.35rem 0 0;
      line-height: 1.4;
    }

    #dashboard-staff-roles-list li .content {
      display: flex;
      align-items: flex-start;
      gap: var(--space-3);
    }

    .staff-eval-form-wrap {
      padding: var(--space-4);
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid var(--color-border-subtle);
      border-radius: var(--radius-md);
      margin-bottom: var(--space-6);
    }

    .staff-eval-criteria {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: var(--space-3);
      margin: var(--space-4) 0;
    }

    .staff-eval-criteria .criterion-row {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
    }

    .staff-eval-criteria .criterion-row label {
      font-size: 0.85rem;
      color: var(--color-text-muted);
    }

    .staff-eval-criteria .criterion-row select {
      padding: 0.4rem 0.5rem;
      border-radius: var(--radius-sm);
      border: 1px solid var(--color-border-subtle);
      background: var(--color-surface);
      color: var(--color-text-main);
    }

    .staff-eval-inbox {
      margin-top: var(--space-4);
    }

    .staff-eval-list-item {
      padding: var(--space-3);
      margin-bottom: var(--space-2);
      background: rgba(255, 255, 255, 0.04);
      border-radius: var(--radius-sm);
      border-left: 3px solid var(--color-accent-gold);
    }

    [dir="rtl"] .staff-eval-list-item {
      border-left: none;
      border-right: 3px solid var(--color-accent-gold);
    }

    .staff-eval-list-item .eval-summary {
      font-size: 0.9rem;
    }

    .staff-eval-list-item .eval-detail {
      font-size: 0.8rem;
      color: var(--color-text-muted);
      margin-top: 0.35rem;
    }

    @media print {
      body * {
        visibility: hidden;
      }

      .letter-print-area,
      .letter-print-area * {
        visibility: visible;
      }

      .letter-print-area {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        max-width: 100%;
        padding: 1.5rem;
        background: #fff;
        color: #111;
      }

      .letter-print-area .letterhead-title {
        font-size: 1.25rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
      }

      .letter-print-area .letter-meta-print {
        font-size: 0.9rem;
        margin-bottom: 1rem;
      }

      .letter-print-area .letter-body-print {
        white-space: pre-wrap;
        line-height: 1.6;
        margin-bottom: 1.5rem;
      }

      .letter-print-area .letter-qr-print {
        margin-top: 1rem;
      }
    }

    .consultation-card {
      position: relative;
    }

    .consultation-badge {
      display: inline-block;
      padding: 0.25rem 0.6rem;
      font-size: 0.75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      background: var(--color-accent-gold);
      color: #1b1b1b;
      border-radius: 999px;
      margin-bottom: var(--space-3);
    }

    .consultation-card--urgent {
      border-color: rgba(214, 175, 79, 0.4);
      box-shadow: 0 0 0 1px rgba(214, 175, 79, 0.2);
    }

    .urgent-online-section {
      background: linear-gradient(180deg, rgba(8, 27, 51, 0.4) 0%, transparent 100%);
    }

    .urgent-online-features {
      margin-bottom: var(--space-12);
    }

    .urgent-feature-card {
      text-align: center;
    }

    .urgent-feature-icon {
      font-size: 2rem;
      margin-bottom: var(--space-3);
    }

    .urgent-online-form-wrap {
      max-width: 560px;
      padding: var(--space-8);
      background: var(--color-surface-elevated);
      border: 1px solid var(--color-border-subtle);
      border-radius: var(--radius-md);
    }

    .urgent-online-form .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-4);
    }

    @media (max-width: 600px) {
      .urgent-online-form .form-row {
        grid-template-columns: 1fr;
      }
    }

    .urgent-online-form .form-group {
      margin-bottom: var(--space-4);
    }

    .urgent-online-form label {
      display: block;
      margin-bottom: var(--space-2);
      font-size: 0.9rem;
      color: var(--color-text-muted);
    }

    .urgent-online-form input,
    .urgent-online-form select,
    .urgent-online-form textarea {
      width: 100%;
      padding: 0.6rem 0.8rem;
      border-radius: var(--radius-sm);
      border: 1px solid var(--color-border-subtle);
      background: rgba(255, 255, 255, 0.04);
      color: var(--color-text-main);
      font-family: inherit;
      font-size: 0.95rem;
    }

    .urgent-online-form textarea {
      min-height: 80px;
      resize: vertical;
    }

    .urgent-online-form-note {
      font-size: 0.85rem;
      color: var(--color-text-muted);
      margin-top: var(--space-4);
    }

    .urgent-online-success {
      margin-top: var(--space-6);
      padding: var(--space-4);
      background: rgba(28, 138, 87, 0.15);
      border: 1px solid rgba(28, 138, 87, 0.4);
      border-radius: var(--radius-sm);
      color: var(--color-accent-emerald);
    }

    .payment-method-box {
      max-width: 560px;
      margin-bottom: var(--space-10);
      padding: var(--space-6);
      background: var(--color-surface-elevated);
      border: 1px solid var(--color-border-subtle);
      border-radius: var(--radius-md);
      position: relative;
      border-left: 4px solid var(--color-accent-gold);
    }

    [dir="rtl"] .payment-method-box {
      border-left: none;
      border-right: 4px solid var(--color-accent-gold);
    }

    .payment-method-box .payment-secure-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      font-size: 0.8rem;
      font-weight: 600;
      color: var(--color-accent-emerald);
      margin-bottom: var(--space-3);
    }

    .payment-method-box .payment-secure-badge::before {
      content: '';
      width: 14px;
      height: 14px;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c8a57' stroke-width='2'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E") center/contain no-repeat;
    }

    .payment-method-box .payment-regulatory {
      font-size: 0.85rem;
      color: var(--color-text-muted);
      margin-top: var(--space-3);
      padding-top: var(--space-3);
      border-top: 1px solid var(--color-border-subtle);
    }

    .payment-method-dl {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 0.25rem 1.5rem;
      margin: 0;
      font-size: 0.95rem;
    }

    .payment-method-dl dt {
      color: var(--color-text-muted);
    }

    .payment-method-dl dd {
      margin: 0;
      font-weight: 600;
      color: var(--color-accent-gold);
      word-break: break-all;
    }

    .urgent-feature-card .btn {
      margin-top: var(--space-4);
    }

    .investor-payment-box {
      margin-top: var(--space-6);
      margin-bottom: var(--space-8);
    }

    .payment-remember-wrap {
      margin-top: var(--space-4);
      padding-top: var(--space-3);
      border-top: 1px solid var(--color-border-subtle);
    }

    .payment-remember-label {
      font-size: 0.9rem;
      color: var(--color-text-muted);
      display: flex;
      align-items: center;
      gap: var(--space-2);
      cursor: pointer;
    }

    .payment-remember-label input {
      accent-color: var(--color-accent-gold);
    }

    .payment-saved-hint {
      font-size: 0.85rem;
      color: var(--color-accent-emerald);
      margin-top: var(--space-2);
      margin-bottom: 0;
    }

    .terms-section .terms-content {
      max-width: 800px;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
      padding: var(--space-8);
      border-radius: var(--radius-lg);
    }

    .terms-list {
      margin: var(--space-4) 0;
      padding-left: 1.5rem;
      color: var(--color-text-muted);
      font-size: 0.95rem;
      line-height: 1.6;
    }

    .terms-footer {
      font-size: 0.85rem;
      color: var(--color-text-muted);
      margin-top: var(--space-6);
    }

    .terms-accept-wrap {
      margin-top: var(--space-4);
    }

    .terms-accept-label {
      display: block;
      font-size: 0.9rem;
      color: var(--color-text-muted);
    }

    .terms-accept-label input {
      margin-inline-end: 0.5rem;
      accent-color: var(--color-accent-gold);
    }

    .terms-accept-label a {
      color: var(--color-accent-gold-soft);
      text-decoration: underline;
    }

    .location-verify-note {
      font-size: 0.8rem;
      color: var(--color-text-muted);
      margin-top: var(--space-2);
    }

    .careers-box {
      max-width: 640px;
      padding: var(--space-8);
      background: var(--color-surface-elevated);
      border: 1px solid var(--color-border-subtle);
      border-radius: var(--radius-md);
    }

    .careers-box h3 {
      font-size: 1.1rem;
      margin-bottom: var(--space-6);
    }

    .careers-form .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-4);
      margin-bottom: var(--space-4);
    }

    @media (max-width: 600px) {
      .careers-form .form-row {
        grid-template-columns: 1fr;
      }
    }

    .careers-form .form-group {
      margin-bottom: var(--space-4);
    }

    .careers-form .form-group label {
      display: block;
      margin-bottom: 0.25rem;
      font-size: 0.9rem;
      color: var(--color-text-muted);
    }

    .careers-form input,
    .careers-form textarea {
      width: 100%;
      padding: 0.6rem 0.8rem;
      border-radius: var(--radius-sm);
      border: 1px solid var(--color-border-subtle);
      background: rgba(255, 255, 255, 0.04);
      color: var(--color-text-main);
      font-family: inherit;
      font-size: 0.95rem;
    }

    .careers-form textarea {
      min-height: 100px;
      resize: vertical;
    }

    .careers-note {
      font-size: 0.9rem;
      color: var(--color-text-muted);
      margin: var(--space-4) 0;
    }

    .careers-note a {
      color: var(--color-accent-gold-soft);
    }

    .careers-success {
      margin-top: var(--space-6);
      padding: var(--space-4);
      background: rgba(28, 138, 87, 0.15);
      border: 1px solid rgba(28, 138, 87, 0.4);
      border-radius: var(--radius-sm);
      color: var(--color-accent-emerald);
    }

    .kyc-block {
      margin: var(--space-8) 0;
      padding: var(--space-6);
      background: rgba(8, 27, 51, 0.4);
      border: 1px solid rgba(214, 175, 79, 0.25);
      border-radius: var(--radius-md);
    }

    .kyc-block__title {
      font-size: 1rem;
      margin-bottom: var(--space-2);
      color: var(--color-accent-gold-soft);
    }

    .kyc-block__intro {
      font-size: 0.9rem;
      color: var(--color-text-muted);
      margin-bottom: var(--space-4);
    }

    .kyc-block .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-4);
      margin-bottom: var(--space-4);
    }

    @media (max-width: 600px) {
      .kyc-block .form-row {
        grid-template-columns: 1fr;
      }
    }

    .kyc-block .form-group {
      margin-bottom: var(--space-4);
    }

    .kyc-block .form-group label {
      display: block;
      margin-bottom: 0.25rem;
      font-size: 0.9rem;
      color: var(--color-text-muted);
    }

    .kyc-block input,
    .kyc-block select,
    .kyc-block textarea {
      width: 100%;
      padding: 0.6rem 0.8rem;
      border-radius: var(--radius-sm);
      border: 1px solid var(--color-border-subtle);
      background: rgba(255, 255, 255, 0.04);
      color: var(--color-text-main);
      font-size: 0.95rem;
    }

    .kyc-block textarea {
      min-height: 80px;
      resize: vertical;
      font-family: inherit;
    }

    .direct-contact-box {
      max-width: 480px;
      margin-bottom: var(--space-10);
      padding: var(--space-6);
      background: var(--color-surface-elevated);
      border: 1px solid var(--color-border-subtle);
      border-radius: var(--radius-md);
      border-left: 4px solid var(--color-accent-gold);
    }

    [dir="rtl"] .direct-contact-box {
      border-left: none;
      border-right: 4px solid var(--color-accent-gold);
    }

    .direct-contact-dl {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 0.25rem 1.5rem;
      margin: 0;
      font-size: 1rem;
    }

    .direct-contact-dl dt {
      color: var(--color-text-muted);
    }

    .direct-contact-dl dd {
      margin: 0;
    }

    .direct-contact-dl a {
      color: var(--color-accent-gold);
      text-decoration: none;
    }

    .direct-contact-dl a:hover {
      text-decoration: underline;
    }

    .cx-tool-card {
      position: relative;
    }

    .suggested-for-you {
      margin-top: var(--space-4);
      padding: var(--space-3);
      background: rgba(214, 175, 79, 0.08);
      border-radius: var(--radius-sm);
      font-size: 0.9rem;
      color: var(--color-text-muted);
    }

    .suggested-for-you strong {
      color: var(--color-accent-gold);
      font-size: 0.85rem;
    }

    .notification-prefs {
      margin-top: var(--space-4);
    }

    .notif-toggle {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      cursor: pointer;
      font-size: 0.9rem;
      color: var(--color-text-muted);
    }

    .notif-toggle input {
      accent-color: var(--color-accent-gold);
    }

    .notif-note {
      color: var(--color-text-muted);
      font-size: 0.85rem;
      margin: 0;
    }

    .crm-contact-dl {
      margin: var(--space-4) 0 0;
      padding: 0;
      font-size: 0.95rem;
    }

    .crm-contact-dl dt {
      color: var(--color-text-muted);
      margin-bottom: 0.25rem;
    }

    .crm-contact-dl dd {
      margin: 0 0 0.5rem;
    }

    .crm-contact-dl a {
      color: var(--color-accent-gold);
      text-decoration: none;
    }

    .crm-contact-dl a:hover {
      text-decoration: underline;
    }

    .verification-tool-card {
      position: relative;
    }

    .verification-note {
      font-size: 0.85rem;
      color: var(--color-text-muted);
      margin: var(--space-3) 0 0;
    }

    .verification-tool-card a {
      color: var(--color-accent-gold);
      text-decoration: none;
    }

    .verification-tool-card a:hover {
      text-decoration: underline;
    }

    .ip-check-box {
      margin-top: var(--space-4);
      padding: var(--space-3);
      background: rgba(214, 175, 79, 0.06);
      border: 1px solid var(--color-border-subtle);
      border-radius: var(--radius-sm);
      font-size: 0.9rem;
      color: var(--color-text-muted);
    }

    .ip-check-box strong {
      color: var(--color-accent-gold);
    }

    .section--collapsible .section-collapse-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-4);
      flex-wrap: wrap;
    }

    .section--collapsible .section__title {
      margin-bottom: 0;
    }

    .section-collapse-content[hidden] {
      display: none !important;
    }

    .btn--sm {
      padding: 0.45rem 0.9rem;
      font-size: 0.82rem;
      border-width: 2px;
    }

    .send-summary-wrap {
      margin-top: var(--space-10);
      padding: var(--space-8);
      background: var(--color-surface-elevated);
      border: 1px solid var(--color-border-subtle);
      border-radius: var(--radius-md);
      max-width: 640px;
    }

    .send-summary-wrap .form-group {
      margin-bottom: var(--space-4);
    }

    .send-summary-wrap label {
      display: block;
      margin-bottom: var(--space-2);
      font-size: 0.9rem;
      color: var(--color-text-muted);
    }

    .summary-preview {
      margin-top: var(--space-6);
      padding: var(--space-4);
      background: rgba(28, 138, 87, 0.1);
      border: 1px solid rgba(28, 138, 87, 0.3);
      border-radius: var(--radius-sm);
      font-size: 0.9rem;
      color: var(--color-text-muted);
      white-space: pre-wrap;
      word-break: break-word;
    }

    .summary-preview[hidden] {
      display: none !important;
    }

    .calc-wrap {
      max-width: 320px;
      padding: var(--space-6);
      background: var(--color-surface-elevated);
      border: 1px solid var(--color-border-subtle);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-card);
    }

    .calc-display {
      width: 100%;
      padding: var(--space-4) var(--space-3);
      margin-bottom: var(--space-4);
      font-size: 1.75rem;
      font-weight: 600;
      text-align: right;
      background: rgba(0, 0, 0, 0.3);
      border: 1px solid var(--color-border-subtle);
      border-radius: var(--radius-sm);
      color: var(--color-accent-gold-soft);
      font-variant-numeric: tabular-nums;
      min-height: 2.5rem;
      word-break: break-all;
    }

    .calc-btns {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--space-2);
    }

    .calc-btn {
      padding: var(--space-4);
      font-size: 1.1rem;
      font-weight: 600;
      border: 1px solid var(--color-border-subtle);
      border-radius: var(--radius-sm);
      background: rgba(255, 255, 255, 0.06);
      color: var(--color-text-main);
      cursor: pointer;
      transition: background 0.2s, border-color 0.2s;
    }

    .calc-btn:hover {
      background: rgba(255, 255, 255, 0.1);
      border-color: rgba(214, 175, 79, 0.3);
    }

    .calc-btn--op {
      color: var(--color-accent-gold-soft);
    }

    .calc-btn--eq {
      background: linear-gradient(135deg, var(--color-accent-gold), var(--color-accent-gold-soft));
      color: #1b1b1b;
    }

    .calc-overlay {
      position: fixed;
      inset: 0;
      z-index: 100;
      background: rgba(0, 0, 0, 0.75);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: var(--space-4);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.2s ease, visibility 0.2s ease;
    }

    .calc-overlay.is-open {
      opacity: 1;
      visibility: visible;
    }

    .calc-overlay .calc-modal {
      background: var(--color-surface-elevated);
      border: 1px solid var(--color-border-subtle);
      border-radius: var(--radius-md);
      padding: var(--space-8);
      max-width: 360px;
      width: 100%;
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    }

    @media (max-width: 900px) {
      .site-header__inner {
        flex-direction: column;
        align-items: flex-start;
      }

      .site-nav {
        flex-wrap: wrap;
        gap: 0.35rem;
      }

      main {
        padding-inline: var(--space-4);
      }

      .hero {
        grid-template-columns: 1fr;
      }

      .hero__visual {
        order: -1;
      }

      .grid-2,
      .grid-3 {
        grid-template-columns: 1fr;
      }

      .tiers {
        grid-template-columns: 1fr;
      }

      .contact-grid {
        grid-template-columns: 1fr;
      }
    }

    /* صفحة الخدمة — صفحة كاملة مستقلة: إخفاء الهيدر وشريط الحساب، فقط شريط الرجوع + المحتوى */

    .service-page-back-bar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 9999;
      height: var(--service-back-bar-height);
      min-height: var(--service-back-bar-height);
      display: flex;
      align-items: center;
      padding: 0 var(--space-4);
      background: rgba(3, 6, 12, 0.98);
      border-bottom: 1px solid var(--color-border-subtle);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
      box-sizing: border-box;
    }

    .service-page-back-bar .btn-back {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      padding: 0.5rem 1rem;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.06) 100%);
      border: 2px solid rgba(255, 255, 255, 0.25);
      border-radius: var(--radius-md);
      color: var(--color-text-main);
      font-size: 0.9rem;
      font-weight: 600;
      cursor: pointer;
      text-decoration: none;
      box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
      transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
    }

    .service-page-back-bar .btn-back:hover {
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
      box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    }

    .service-page-back-bar .btn-back:active {
      transform: translateY(2px);
      box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
    }