[class^="ri-"],[class*=" ri-"]{font-weight:400}
:root{color-scheme:light dark;--font-sans:'IBM Plex Sans Arabic',sans-serif;--font-num:var(--font-sans);--primary:#1F75FE;--primary-dim:#1558c9;--primary-ghost:rgba(31,117,254,.10);--accent:#02AA94;--warn:#F59E0B;--danger:#EF4444;--success:#10B981;--bg:#F1F5F9;--surface:#FFFFFF;--surface2:#F8FAFC;--border:#E2E8F0;--border2:#CBD5E1;--text:#1E293B;--text2:#475569;--text3:#64748B;--sidebar-w:268px;--topbar-h:64px;--bottom-h:64px;--radius:0px;--space-page:16px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--shadow-xs:0 1px 2px rgba(15,23,42,.06);--shadow-sm:0 1px 3px rgba(15,23,42,.1),0 1px 2px rgba(15,23,42,.06);--shadow-md:0 4px 6px rgba(15,23,42,.07),0 2px 4px rgba(15,23,42,.06);--shadow-lg:0 10px 15px -3px rgba(15,23,42,.08),0 4px 6px -4px rgba(15,23,42,.06);--shadow-xl:0 20px 25px -5px rgba(15,23,42,.1),0 8px 10px -6px rgba(15,23,42,.06);--z-sticky:100;--z-overlay:999;--z-sidebar:1000;--z-modal:1100;--color-primary:var(--primary);--color-primary-hover:var(--primary-dim);--color-primary-subtle:var(--primary-ghost);--color-text-on-primary:#fff;--color-danger-hover:#a31f00;--color-success-hover:#059669;--color-warning-hover:#b45309;--chart-series-1:var(--primary);--chart-series-2:var(--accent);--chart-series-3:var(--success);--chart-series-4:#7C3AED;--chart-series-5:var(--warn);--color-bg:var(--bg);--color-surface:var(--surface);--color-surface-2:var(--surface2);--color-border:var(--border);--color-border-strong:var(--border2);--color-text:var(--text);--color-text-subtle:var(--text2);--color-text-muted:var(--text3);--text-secondary:var(--text2);--color-success:var(--success);--color-success-subtle:#D1FAE5;--color-warning:var(--warn);--color-warning-subtle:#FEF3C7;--color-danger:var(--danger);--color-danger-subtle:#FEE2E2;--color-success-border:#abf5d1;--color-warning-border:#f8d97e;--color-danger-border:#ffbdad;--color-primary-border:#adccff;--color-sidebar-bg:var(--surface);--color-sidebar-text:var(--text2);--color-sidebar-active:var(--primary);--color-sidebar-hover-bg:var(--primary-ghost);--color-scrim:rgba(15,23,42,.85);--color-scrim-strong:rgba(15,23,42,.95);--radius-xs:0px;--radius-sm:0px;--radius-md:0px;--radius-lg:0px;--radius-full:9999px;--color-primary-rgb:31,117,254;--color-bg-dark:#0F172A;--color-bg-dark-2:#1e293b;--color-primary-dark:#1558c9;--sidebar-width:var(--sidebar-w);--topbar-height:var(--topbar-h);font-family:var(--font-sans);font-size:var(--text-base);--text-xs:clamp(0.75rem,0.72rem+0.15vw,0.8125rem);--text-sm:clamp(0.8125rem,0.78rem+0.15vw,0.875rem);--text-base:clamp(0.875rem,0.85rem+0.18vw,1rem);--text-lg:clamp(1rem,0.95rem+0.25vw,1.125rem);--text-xl:clamp(1.125rem,1.08rem+0.3vw,1.25rem);--text-2xl:clamp(1.25rem,1.18rem+0.5vw,1.5rem);--text-3xl:clamp(1.5rem,1.35rem+1vw,2rem);--text-4xl:clamp(2rem,1.7rem+2vw,2.75rem);--text-5xl:clamp(2.5rem,2rem+4vw,3.5rem);--text-6xl:clamp(3rem,2.2rem+5vw,4.5rem);--font-weight-regular:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--leading-tight:1.25;--leading-snug:1.375;--leading-normal:1.6;--leading-relaxed:1.75;--avatar-color-1:#1F75FE;--avatar-color-2:#02AA94;--avatar-color-3:#F59E0B;--avatar-color-4:#EF4444;--avatar-color-5:#8B5CF6;--avatar-color-6:#EC4899;--avatar-color-7:#0EA5E9;--avatar-color-8:#65A30D;--control-h:40px;--control-radius:var(--radius-sm,0);--control-padding-x:14px;--control-font-size:var(--text-sm,14px);--bp-xs:480px;--bp-sm:640px;--bp-md:768px;--bp-lg:1024px;--bp-xl:1280px;--content-max-w:1600px;--video-radius:20px;--video-shadow:0 20px 40px rgba(0,0,0,.15);--video-shadow-hover:0 25px 50px rgba(0,0,0,.22);--video-play-size:80px;--video-play-border:4px;--video-play-shadow:0 10px 30px rgba(0,0,0,.3);--video-play-hover-shadow:0 15px 40px rgba(0,0,0,.4);--video-play-scale:1.1;--video-float-distance:-8px;--video-float-duration:4s;--video-pulse-duration:2.5s;}
@media(max-width:768px){:root{--space-page:14px}}
@media(max-width:480px){:root{--space-page:12px}}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;--bg:#0F172A;--surface:#1E293B;--surface2:#334155;--border:#334155;--border2:#475569;--text:#F8FAFC;--text2:#CBD5E1;--text3:#94A3B8;--color-bg:#0F172A;--color-surface:#1E293B;--color-surface-2:#334155;--color-border:#334155;--color-border-strong:#475569;--color-text:#F8FAFC;--color-text-subtle:#CBD5E1;--color-text-muted:#94A3B8;--text-secondary:#CBD5E1;--color-sidebar-bg:#1E293B;--color-sidebar-text:#CBD5E1;--color-sidebar-hover-bg:rgba(31,117,254,.18);--color-topbar-bg:#1E293B;--primary-ghost:rgba(31,117,254,.18);--color-success-subtle:rgba(16,185,129,.18);--color-warning-subtle:rgba(245,158,11,.18);--color-danger-subtle:rgba(239,68,68,.18);--color-success-border:rgba(16,185,129,.4);--color-warning-border:rgba(245,158,11,.4);--color-danger-border:rgba(239,68,68,.4);--color-primary-border:rgba(31,117,254,.4);--color-success:#34D399;--color-warning:#FBBF24;--color-danger:#F87171;--color-primary:#60A5FA;--accent:#14D3B5;--color-primary-hover:#3b82f6;--color-danger-hover:#dc2626;--color-success-hover:#10b981;--color-warning-hover:#d97706;--color-text-on-primary:#0F172A;--chart-series-4:#a78bfa}}
[data-theme="dark"]{color-scheme:dark;--bg:#0F172A;--surface:#1E293B;--surface2:#334155;--border:#334155;--border2:#475569;--text:#F8FAFC;--text2:#CBD5E1;--text3:#94A3B8;--color-bg:#0F172A;--color-surface:#1E293B;--color-surface-2:#334155;--color-border:#334155;--color-border-strong:#475569;--color-text:#F8FAFC;--color-text-subtle:#CBD5E1;--color-text-muted:#94A3B8;--text-secondary:#CBD5E1;--color-sidebar-bg:#1E293B;--color-sidebar-text:#CBD5E1;--color-sidebar-hover-bg:rgba(31,117,254,.18);--color-topbar-bg:#1E293B;--primary-ghost:rgba(31,117,254,.18);--color-success-subtle:rgba(16,185,129,.18);--color-warning-subtle:rgba(245,158,11,.18);--color-danger-subtle:rgba(239,68,68,.18);--color-success-border:rgba(16,185,129,.4);--color-warning-border:rgba(245,158,11,.4);--color-danger-border:rgba(239,68,68,.4);--color-primary-border:rgba(31,117,254,.4);--color-success:#34D399;--color-warning:#FBBF24;--color-danger:#F87171;--color-primary:#60A5FA;--accent:#14D3B5;--color-primary-hover:#3b82f6;--color-danger-hover:#dc2626;--color-success-hover:#10b981;--color-warning-hover:#d97706;--color-text-on-primary:#0F172A;--chart-series-4:#a78bfa}

/* Dark Theme Comprehensive Layout & Card Overrides */
html[data-theme="dark"],
[data-theme="dark"] body,
[data-theme="dark"] .admin-layout,
[data-theme="dark"] .dashboard-shell,
[data-theme="dark"] .shell,
[data-theme="dark"] .main,
[data-theme="dark"] .admin-main,
[data-theme="dark"] .content,
[data-theme="dark"] .admin-content {
  background-color: var(--bg, #0F172A) !important;
  color: var(--text, #F8FAFC) !important;
}

[data-theme="dark"] .sidebar,
[data-theme="dark"] .topbar,
[data-theme="dark"] .filter-drawer,
[data-theme="dark"] .gw-card,
[data-theme="dark"] .c-panel,
[data-theme="dark"] .panel,
[data-theme="dark"] .form-panel,
[data-theme="dark"] .form-card,
[data-theme="dark"] .hero-card,
[data-theme="dark"] .kpi-card,
[data-theme="dark"] .welcome,
[data-theme="dark"] .table-wrap,
[data-theme="dark"] .table-card,
[data-theme="dark"] .modal-panel,
[data-theme="dark"] .modal-confirm-box,
[data-theme="dark"] .colors-group-card,
[data-theme="dark"] .gw-secrets-section,
[data-theme="dark"] .email-preview-panel {
  background-color: var(--surface, #1E293B) !important;
  border-color: var(--border, #334155) !important;
  color: var(--text, #F8FAFC) !important;
}

[data-theme="dark"] .sidebar__header,
[data-theme="dark"] .sidebar .nav a,
[data-theme="dark"] .sidebar .brand,
[data-theme="dark"] .topbar-brand,
[data-theme="dark"] .filter-drawer__header,
[data-theme="dark"] .gw-title h2,
[data-theme="dark"] .panel-head h2,
[data-theme="dark"] .section-header h3,
[data-theme="dark"] .section-header h2,
[data-theme="dark"] label,
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
  color: var(--text, #F8FAFC) !important;
}

[data-theme="dark"] p,
[data-theme="dark"] .hint,
[data-theme="dark"] .field-hint,
[data-theme="dark"] .text-body-secondary,
[data-theme="dark"] .text-caption {
  color: var(--text2, #CBD5E1) !important;
}

[data-theme="dark"] .sidebar .nav a:hover,
[data-theme="dark"] .sidebar .nav a.active {
  background-color: var(--nav-accent-bg, rgba(31, 117, 254, 0.18)) !important;
  color: var(--nav-accent, var(--primary, #3b82f6)) !important;
}

[data-theme="dark"] .gw-stats,
[data-theme="dark"] .gw-secrets-list .key-row,
[data-theme="dark"] .gw-logo,
[data-theme="dark"] .key-status-grid,
[data-theme="dark"] .filter-pill,
[data-theme="dark"] .topbar-search,
[data-theme="dark"] .badge-id,
[data-theme="dark"] .key-row {
  background-color: var(--surface2, #334155) !important;
  border-color: var(--border, #334155) !important;
  color: var(--text, #F8FAFC) !important;
}

/* Dark Theme Explicit Overrides for Components & Controls */
[data-theme="dark"] .table-action-btn--secondary,
[data-theme="dark"] .media-card-actions .button-secondary { background: var(--surface2) !important; color: var(--text) !important; border-color: var(--border2) !important; }

[data-theme="dark"] .table-action-btn--secondary:hover,
[data-theme="dark"] .media-card-actions .button-secondary:hover { background: var(--border2) !important; color: #ffffff !important; border-color: var(--text3) !important; }

[data-theme="dark"] .table-wrap, [data-theme="dark"] .table-card { background: var(--surface); border-color: var(--border); }

[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] .field-control,
[data-theme="dark"] .form-control { background: var(--surface2) !important; color: var(--text) !important; border-color: var(--border2) !important; }

[data-theme="dark"] select option { background: var(--surface) !important; color: var(--text) !important; }
[data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--text3) !important; }

[data-theme="dark"] .badge.active, [data-theme="dark"] .badge--success { background: rgba(16,185,129,0.18) !important; color: #34d399 !important; border: 1px solid rgba(16,185,129,0.35) !important; }
[data-theme="dark"] .badge.suspended, [data-theme="dark"] .badge.rejected, [data-theme="dark"] .badge--danger { background: rgba(239,68,68,0.18) !important; color: #f87171 !important; border: 1px solid rgba(239,68,68,0.35) !important; }
[data-theme="dark"] .badge.draft, [data-theme="dark"] .badge.pending, [data-theme="dark"] .badge--warning { background: rgba(245,158,11,0.18) !important; color: #fbbf24 !important; border: 1px solid rgba(245,158,11,0.35) !important; }

[data-theme="dark"] .c-panel, [data-theme="dark"] .panel, [data-theme="dark"] .form-card, [data-theme="dark"] .hero-card, [data-theme="dark"] .kpi-card, [data-theme="dark"] .welcome { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; }

/* suspended-page-card dark mode: موحّد داخل banner--page dark mode أعلاه */

[data-theme="dark"] .badge-id { background: var(--surface2) !important; color: var(--text2) !important; border-color: var(--border) !important; }
[data-theme="dark"] .details-link, [data-theme="dark"] p a:not(.button):not(.primary-button):not(.nav-link) { color: var(--primary, #3b82f6) !important; }

[data-theme="dark"] .topbar-search { background: var(--surface2) !important; border-color: var(--border) !important; }
[data-theme="dark"] .topbar-search__kbd { background: var(--surface) !important; border-color: var(--border) !important; }

[data-theme="dark"] .action-toolbar { background: var(--surface) !important; border-top-color: var(--border) !important; }
[data-theme="dark"] .pagination-wrapper { background: var(--surface) !important; border-color: var(--border) !important; }
[data-theme="dark"] .pagination-buttons a.secondary { background: var(--surface2) !important; color: var(--text) !important; border-color: var(--border2) !important; }
[data-theme="dark"] .pagination-buttons a.secondary:hover { background: var(--border2) !important; color: #ffffff !important; }


/* ── Dark Mode Toggle & Topbar Icon Buttons (Shared across Auth, Landing & Control Panel) ── */
#theme-toggle-btn, .notif-bell-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  color: var(--text2);
  cursor: pointer;
  border-radius: var(--radius-sm,0);
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  font-size: 20px;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

#theme-toggle-btn,
#theme-toggle-btn:hover,
#theme-toggle-btn:focus-visible,
.notif-bell-btn,
.notif-bell-btn:hover,
.notif-bell-btn:focus-visible,
[data-theme="dark"] #theme-toggle-btn,
[data-theme="dark"] #theme-toggle-btn:hover,
[data-theme="dark"] .notif-bell-btn,
[data-theme="dark"] .notif-bell-btn:hover {
  border: none !important;
  box-shadow: none !important;
}

#theme-toggle-btn:hover, .notif-bell-btn:hover, .notif-bell-btn[aria-expanded="true"] {
  background: transparent !important;
  color: var(--primary, #1F75FE) !important;
}

#theme-toggle-btn:focus-visible, .notif-bell-btn:focus-visible {
  outline: 2px solid var(--primary, #1F75FE) !important;
  outline-offset: 2px !important;
}

#theme-toggle-btn i, .notif-bell-btn i {
  font-size: 20px;
  line-height: 1;
}

[data-theme="dark"] #theme-toggle-btn, [data-theme="dark"] .notif-bell-btn {
  background: transparent !important;
  color: var(--text);
}

[data-theme="dark"] #theme-toggle-btn:hover, [data-theme="dark"] .notif-bell-btn:hover {
  background: transparent !important;
  color: var(--primary, #1F75FE) !important;
}


/* Auth, Showcase, Landing & Consumer Account Dark Mode Overrides */
[data-theme="dark"] .auth-shell { background: var(--bg) !important; }
[data-theme="dark"] .auth-panel { background: var(--surface) !important; color: var(--text) !important; }
[data-theme="dark"] .auth-card h1, [data-theme="dark"] .auth-card h2 { color: var(--text) !important; }
[data-theme="dark"] .auth-card > p { color: var(--text2) !important; }
[data-theme="dark"] .auth-form .field-control,
[data-theme="dark"] .auth-form input,
[data-theme="dark"] .auth-field-input { background: var(--surface2) !important; color: var(--text) !important; border-color: var(--border2) !important; }
[data-theme="dark"] .auth-form .field-control::placeholder,
[data-theme="dark"] .auth-field-input::placeholder { color: var(--text3) !important; }
[data-theme="dark"] .auth-field-label { color: var(--text) !important; }
[data-theme="dark"] .auth-field-icon { color: var(--text3) !important; }
[data-theme="dark"] .auth-password-toggle { color: var(--text3) !important; }
[data-theme="dark"] .auth-password-toggle:hover { color: var(--text) !important; }
[data-theme="dark"] .auth-link { color: var(--text2) !important; }
[data-theme="dark"] .auth-link a { color: var(--primary) !important; }
[data-theme="dark"] .auth-brand.mobile-only { color: var(--text) !important; }
[data-theme="dark"] .auth-strength-bar { background: var(--border2) !important; }
[data-theme="dark"] .otp-slot { background: var(--surface2) !important; color: var(--text) !important; border-color: var(--border2) !important; }
[data-theme="dark"] .otp-slot--filled { border-color: var(--primary) !important; background: var(--surface) !important; }

[data-theme="dark"] .showcase-hero { background: var(--bg) !important; color: var(--text) !important; }

[data-theme="dark"] .showcase-card,
[data-theme="dark"] .product-card,
[data-theme="dark"] .rawabti-hero-widget,
[data-theme="dark"] .topcar-filter-card,
[data-theme="dark"] .topcar-details-card,
[data-theme="dark"] .topcar-seller-card,
[data-theme="dark"] .tc-cat-card,
[data-theme="dark"] .tc-stat,
[data-theme="dark"] .tc-service-card,
[data-theme="dark"] .tc-step,
[data-theme="dark"] .tc-about,
[data-theme="dark"] .tc-faq-item,
[data-theme="dark"] .tc-onboarding-card,
[data-theme="dark"] .tc-cat-box,
[data-theme="dark"] .tc-adtype-card,
[data-theme="dark"] .tc-upload-zone,
[data-theme="dark"] .tc-step-item,
[data-theme="dark"] .topcar-empty-card,
[data-theme="dark"] .tc-join-card,
[data-theme="dark"] .pricing-card-v2 { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; }

[data-theme="dark"] .rawabti-result-box { background: rgba(31, 117, 254, 0.15) !important; border-color: var(--color-primary-border, rgba(31, 117, 254, 0.4)) !important; color: var(--text) !important; }

/* ── Rawabti hero widget — نموذج تقصير الروابط العام (heroWidgetHtml) ── */
.rawabti-hero-widget{max-width:640px;margin:28px auto 0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg,12px);padding:24px;box-shadow:var(--shadow-lg);text-align:start;color:var(--text)}
.rawabti-shorten{display:flex;flex-direction:column;gap:12px}
.rawabti-shorten__label{font-weight:600;font-size:var(--text-sm);color:var(--text)}
.rawabti-shorten__row{display:flex;gap:8px;flex-wrap:wrap}
.rawabti-shorten__input{flex:1;min-width:240px;height:44px;padding:0 14px}
.rawabti-shorten__btn{height:44px;padding:0 20px;font-weight:700}
.rawabti-result{margin-top:20px;padding-top:16px;border-top:1px solid var(--border)}
.rawabti-result-box__hint{font-size:var(--text-xs);color:var(--text2,var(--text-secondary));font-weight:600}
.rawabti-result-box__row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.rawabti-result-box__link{font-weight:700;font-size:var(--text-lg);color:var(--primary);text-decoration:none;word-break:break-all}
.rawabti-result-box__qr{display:flex;align-items:center;gap:16px;margin-top:8px;padding-top:12px;border-top:1px dashed var(--border)}
.rawabti-result-box__qr-img{width:80px;height:80px;border-radius:var(--radius-sm);border:1px solid var(--border);background:#fff}
.rawabti-result-box__qr-title{font-weight:700;font-size:var(--text-sm);color:var(--text);margin-bottom:4px}
.rawabti-result-box__qr-btn{text-decoration:none;font-size:12px}

[data-theme="dark"] .showcase-card h3,
[data-theme="dark"] .product-card__body h3 { color: var(--text) !important; }

[data-theme="dark"] .showcase-card p,
[data-theme="dark"] .product-card__body p { color: var(--text2) !important; }

[data-theme="dark"] .account-shell,
[data-theme="dark"] .account-panel,
[data-theme="dark"] .account-card,
[data-theme="dark"] .order-card { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; }

/* ── Unified Table Action Buttons (مرجع media-card-actions الرسمي) ── */
.table-actions, .media-card-actions { display: inline-flex; align-items: center; gap: 8px !important; flex-wrap: nowrap; }
.media-card-actions { gap: 8px !important; padding: 10px 12px !important; }
.media-card-actions > div, .media-card-actions .media-card-actions__group { display: flex !important; align-items: center !important; gap: 6px !important; }
.table-action-btn, .media-card-actions .button { font-size: var(--text-xs, 12px) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; border-radius: var(--radius-sm,0) !important; cursor: pointer !important; text-decoration: none !important; border: 1px solid transparent !important; font-weight: 600 !important; line-height: 1 !important; white-space: nowrap !important; box-sizing: border-box !important; -webkit-tap-highlight-color: transparent; margin: 0 !important; }
/* أزرار الجداول: مربعة 1:1 (أيقونة فقط) */
.table-action-btn { width:40px !important; height:40px !important; min-width:40px !important; min-height:40px !important; padding:0 !important; }
/* أزرار بطاقات الوسائط: مستطيلة (أيقونة + نص) */
.media-card-actions .button { height:40px !important; min-height:40px !important; padding:0 10px !important; }
@media(max-width:640px) {
  .table-actions, .media-card-actions { gap: 6px !important; }
  .media-card-actions { padding: 8px 10px !important; }
  .media-card-actions > div, .media-card-actions .media-card-actions__group { gap: 4px !important; }
  .table-action-btn { width:40px !important; height:40px !important; min-width:40px !important; min-height:40px !important; }
  .media-card-actions .button { height:40px !important; min-height:40px !important; padding:0 8px !important; gap:4px !important; }
}
.table-action-btn i, .table-action-btn svg, .media-card-actions .button svg { font-size: 15px; flex-shrink: 0; line-height: 1; }
.table-action-btn--secondary, .media-card-actions .button-secondary { background: var(--surface2, var(--color-surface-2, #f8fafc)); color: var(--text2, var(--color-text-subtle, #475569)); border-color: var(--border, var(--color-border, #e2e8f0)); }
.table-action-btn--secondary:hover, .media-card-actions .button-secondary:hover { background: var(--border, var(--color-border, #cbd5e1)); color: var(--text, var(--color-text, #0f172a)); border-color: var(--border2, var(--color-border-strong, #94a3b8)); }
.table-action-btn--primary { background: var(--primary, var(--color-primary, #1F75FE)) !important; color: #ffffff !important; border-color: var(--primary, var(--color-primary, #1F75FE)) !important; }
.table-action-btn--primary:hover { background: var(--primary-dim, var(--color-primary-hover, #1558c9)) !important; border-color: var(--primary-dim, var(--color-primary-hover, #1558c9)) !important; }
.table-action-btn--danger, .media-card-actions .button-danger { background: var(--danger, var(--color-danger, #ef4444)) !important; color: #ffffff !important; border-color: var(--danger, var(--color-danger, #ef4444)) !important; }
.table-action-btn--danger:hover, .media-card-actions .button-danger:hover { background: var(--color-danger-hover, #dc2626) !important; border-color: var(--color-danger-hover, #dc2626) !important; }
.table-action-btn--success, .media-card-actions .button-success { background: var(--success, var(--color-success, #10b981)) !important; color: #ffffff !important; border-color: var(--success, var(--color-success, #10b981)) !important; }
.table-action-btn--success:hover, .media-card-actions .button-success:hover { background: var(--color-success-hover, #059669) !important; border-color: var(--color-success-hover, #059669) !important; }
.table-action-btn--warning { background: var(--warn, var(--color-warning, #f59e0b)) !important; color: #ffffff !important; border-color: var(--warn, var(--color-warning, #f59e0b)) !important; }
.table-action-btn--warning:hover { background: var(--color-warning-hover, #d97706) !important; border-color: var(--color-warning-hover, #d97706) !important; }
.table-action-btn:focus-visible, .media-card-actions .button:focus-visible { outline: 2px solid var(--color-primary, #1F75FE) !important; outline-offset: 1px !important; }
.table-action-btn:disabled, .table-action-btn[aria-disabled="true"], .media-card-actions .button:disabled { opacity: 0.55 !important; cursor: not-allowed !important; pointer-events: none !important; }
.table-action-btn.is-loading i { animation: spin 1s infinite linear; }

/* ── Typography System ───────────────────────────────────── */
.text-page-title { font-size: var(--text-2xl); font-weight: var(--font-weight-bold); line-height: var(--leading-tight); color: var(--color-text); }
.text-section-title { font-size: var(--text-xl); font-weight: var(--font-weight-semibold); line-height: var(--leading-tight); color: var(--color-text); }
.text-card-title { font-size: var(--text-lg); font-weight: var(--font-weight-semibold); line-height: var(--leading-snug); color: var(--color-text); }
.text-body { font-size: var(--text-base); font-weight: var(--font-weight-regular); line-height: var(--leading-normal); color: var(--color-text); }
.text-body-secondary { font-size: var(--text-sm); font-weight: var(--font-weight-regular); line-height: var(--leading-normal); color: var(--color-text-subtle); }
.text-caption { font-size: var(--text-xs); font-weight: var(--font-weight-medium); line-height: var(--leading-normal); color: var(--color-text-muted); }
.text-muted { color: var(--text3, var(--color-text-muted, #94a3b8)); font-size: var(--text-sm, 13px); }
*{box-sizing:border-box;touch-action:manipulation}[hidden]{display:none !important}body{margin:0;background:var(--color-bg);color:var(--color-text);overflow-x:hidden;overflow-x:clip;font-family:var(--font-sans);touch-action:manipulation}button,input,select,textarea,option,optgroup,a{font:inherit;font-family:inherit;touch-action:manipulation}select{line-height:normal;padding-top:0;padding-bottom:0;vertical-align:middle}
@media(max-width:768px){input:not([type="checkbox"]):not([type="radio"]),select,textarea{font-size:16px !important}}
@keyframes spin { 100% { transform: rotate(360deg); } }

/* ── OTP Component Styles ── */
.otp-container{display:flex;flex-direction:column;gap:12px;width:100%;align-items:center;margin:12px 0}
.otp-slots-wrap{display:flex;gap:8px;justify-content:center;width:100%;max-width:380px;direction:ltr}
.otp-slot{width:46px;height:54px;border:2px solid var(--border, var(--color-border, #cbd5e1));border-radius:var(--radius-md,0);background:var(--surface, var(--color-surface, #fff));color:var(--text, var(--color-text, #0f172a));font-size:24px;font-weight:700;text-align:center;line-height:50px;cursor:pointer;transition:all 0.15s ease;user-select:none}
.otp-slot--active{border-color:var(--primary, var(--color-primary, #1F75FE));box-shadow:0 0 0 3px rgba(31,117,254,0.15);transform:translateY(-2px)}
.otp-slot--filled{border-color:var(--primary, var(--color-primary, #1F75FE));background:var(--surface2, var(--color-surface-2, #f8fafc))}
.otp-slot--error{border-color:var(--danger, var(--color-danger, #ef4444));background:var(--color-danger-subtle,#fff5f5);color:var(--danger, var(--color-danger, #ef4444))}
.otp-input-hidden{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.otp-status-msg{font-size:var(--text-xs, 12px);color:var(--text-secondary, #64748b);text-align:center;margin-top:4px}
.otp-status-msg--error{color:var(--danger, #ef4444);font-weight:600}

.sidebar-edge-toggle{position:absolute;bottom:calc(var(--bottom-h,64px) - 12px);top:auto;transform:none;inset-inline-end:-12.5px;z-index:calc(var(--z-sidebar) + 1);flex-shrink:0;width:25px;height:25px;border:1px solid var(--border,var(--color-border,#e2e8f0));background:var(--primary,var(--color-primary,#1F75FE));color:var(--color-primary-contrast,#ffffff);cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:50%;box-shadow:var(--shadow-sm,0 1px 3px rgba(0,0,0,0.1));font-size:16px;line-height:1;transition:background 0.15s,color 0.15s,border-color 0.15s,box-shadow 0.15s}
.sidebar-edge-toggle:hover{background:var(--primary-dim,var(--color-primary-hover,var(--primary,var(--color-primary,#1F75FE))));color:var(--color-primary-contrast,#ffffff);border-color:var(--primary-dim,var(--color-primary-hover,var(--primary,var(--color-primary,#1F75FE))))}
.sidebar-edge-toggle:focus{outline:2px solid var(--primary,var(--color-primary,#1F75FE));outline-offset:2px}
.sidebar-edge-toggle:focus-visible{outline:2px solid var(--primary,var(--color-primary,#1F75FE));outline-offset:2px}
.sidebar-edge-toggle:active{background:var(--primary,var(--color-primary,#1F75FE));color:var(--color-primary-contrast,#ffffff);border-color:var(--primary,var(--color-primary,#1F75FE));box-shadow:var(--shadow-sm,0 1px 3px rgba(0,0,0,0.1))}
.sidebar-edge-toggle i,.sidebar-edge-toggle svg{transition:transform 0.25s cubic-bezier(0.4,0,0.2,1);display:inline-block;line-height:1;pointer-events:none}
.sidebar-collapsed .sidebar-edge-toggle i,.sidebar-collapsed .sidebar-edge-toggle svg{transform:rotate(180deg)}

/* ── Collapsed filter drawer ─────────────────────────────── */
.filter-collapsed{--filter-drawer-w:56px}
@media(min-width:1024px){.filter-collapsed .shell.has-filter-aside{grid-template-columns:var(--sidebar-w) 1fr 56px}.sidebar-collapsed.filter-collapsed .shell.has-filter-aside{grid-template-columns:56px 1fr 56px}}
.filter-collapsed .filter-drawer__header span,.filter-collapsed .filter-drawer__body,.filter-collapsed .filter-drawer__bottom{display:none}
.filter-collapsed .filter-drawer__header{justify-content:center;padding:0}
.filter-collapsed .filter-drawer-edge-toggle i,.filter-collapsed .filter-drawer-edge-toggle svg{transform:rotate(180deg)}

/* ── ContentPanel — مكوّن الحاوية الموحّد ────────────────── */
.c-panel,.panel{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden}
.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden}
.form-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:20px}
.c-panel--form,.form-panel{padding:20px;display:grid;align-content:start;gap:16px}
.c-panel--form h2,.form-panel h2{margin:0 0 4px;font-size:var(--text-base);font-weight:600}
.c-panel__head,.panel-head,.card-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--color-border)}
.card-header h2,.card-title,.panel-head h2{margin:0;font-size:var(--text-base);font-weight:600}
.c-panel__section,.section-header{border-bottom:1px solid var(--color-border);padding-bottom:14px;margin-bottom:6px}
.c-panel__section h3,.section-header h3{margin:0;font-size:var(--text-lg);color:var(--primary);font-weight:600}
.c-panel__sub{padding:12px 20px;background:var(--color-surface-2);border-bottom:1px solid var(--color-border);font-size:var(--text-sm);color:var(--color-text-subtle)}
.c-panel__form-body{padding:16px 20px;display:flex;flex-direction:column;gap:16px}
.c-panel__section .hint,.section-header .hint{margin:4px 0 0;font-size:var(--text-xs);color:var(--text3)}
.c-panel--form label:not(.button):not(.button-primary):not(.primary-button):not(.btn),.form-panel label:not(.button):not(.button-primary):not(.primary-button):not(.btn){display:grid;gap:6px;font-weight:500;font-size:var(--text-sm);color:var(--color-text-subtle)}
.c-panel--form input,.c-panel--form select,.form-panel input,.form-panel select,.field-control,.form-control,.field input,.field select{width:100%;height:var(--control-h);padding:0 var(--control-padding-x);border:1px solid var(--color-border-strong);border-radius:var(--control-radius);background:var(--color-surface);color:var(--color-text);font-size:var(--control-font-size);font-family:inherit;line-height:normal;box-sizing:border-box;outline:none}
.c-panel--form textarea,.form-panel textarea,.field textarea,.field-control--textarea{width:100%;height:auto;min-height:calc(var(--control-h) * 2.5);padding:10px var(--control-padding-x);border:1px solid var(--color-border-strong);border-radius:var(--control-radius);background:var(--color-surface);color:var(--color-text);font-size:var(--control-font-size);font-family:inherit;line-height:1.5;box-sizing:border-box;outline:none;resize:vertical}
.c-panel--form input:focus,.c-panel--form select:focus,.c-panel--form textarea:focus,.form-panel input:focus,.form-panel select:focus,.form-panel textarea:focus,.field-control:focus,.form-control:focus,.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary-subtle)}
.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:20px}
.c-panel--compact{padding:12px;gap:12px}
.c-panel--full{max-width:none;width:100%}

/* ── Party Picker — مكوّن اختيار طرف بالبحث (app-party-picker.js) ── */
.party-picker{position:relative}
.party-picker__input--selected{padding-inline-end:32px}
.party-picker__clear{position:absolute;inset-inline-end:6px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:none;background:transparent;color:var(--color-text-muted);cursor:pointer;border-radius:var(--radius-sm);font-size:14px}
.party-picker__clear:hover{color:var(--color-danger);background:var(--color-danger-subtle)}
.party-picker__results{position:absolute;top:100%;inset-inline:0;margin-top:4px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);z-index:var(--z-sticky);max-height:280px;overflow-y:auto}
.party-picker__option{display:flex;flex-direction:column;gap:2px;width:100%;padding:10px 14px;border:none;background:transparent;text-align:start;cursor:pointer;font-family:inherit;font-size:var(--text-sm);color:var(--color-text)}
.party-picker__option:hover,.party-picker__option:focus-visible{background:var(--color-primary-subtle);outline:none}
.party-picker__option-name{font-weight:600}
.party-picker__option-id{font-size:var(--text-xs);color:var(--color-text-muted);font-family:monospace}
.party-picker__option-sub{font-size:var(--text-xs);color:var(--color-text-muted)}
.party-picker__empty{padding:14px;text-align:center;font-size:var(--text-sm);color:var(--color-text-muted)}

/* ── Party Detail (CRM 360°) — كلاسات مركزية لصفحة الطرف ── */
.party-header{display:flex;align-items:center;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.party-avatar{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--color-primary-subtle),var(--surface-2));display:flex;align-items:center;justify-content:center;flex-shrink:0;border:2px solid var(--color-border);overflow:hidden;position:relative}
.party-avatar--sm{width:36px;height:36px;border-width:1px;background:var(--surface-2)}
.party-avatar--widget{width:56px;height:56px}
.party-avatar--editable{padding:0;cursor:pointer;font:inherit;color:inherit;transition:border-color .15s,box-shadow .15s}
.party-avatar--editable:hover,.party-avatar--editable:focus-visible{border-color:var(--primary);box-shadow:0 0 0 3px var(--color-primary-subtle);outline:none}
.party-avatar__img{width:100%;height:100%;object-fit:cover}
.party-avatar__icon{font-size:30px;color:var(--primary)}
.party-avatar--sm .party-avatar__icon{font-size:16px;color:var(--color-text-muted)}
.party-avatar--widget .party-avatar__icon{font-size:24px}
.party-avatar__cam{position:absolute;inset-inline-end:1px;bottom:1px;width:22px;height:22px;border-radius:50%;background:var(--primary);color:var(--color-surface);display:flex;align-items:center;justify-content:center;font-size:12px;border:2px solid var(--color-surface);box-shadow:var(--shadow-sm)}
.party-avatar-widget{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.party-avatar-widget__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.party-avatar-widget__actions .party-field-hint{width:100%;margin:0}
.party-header__body{flex:1;min-width:200px}
.party-title-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.party-title{margin:0;font-size:22px;font-weight:700}
.party-legal{margin:4px 0 0;font-size:var(--text-sm);color:var(--color-text-muted)}
.party-meta{margin-top:8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.party-kind{font-size:var(--text-xs);color:var(--color-text-muted)}
.badge--inline{display:inline-flex;align-items:center;gap:4px}

/* sections & panels */
.party-panel{padding:20px;margin-bottom:24px}
.party-panel--card{padding:20px;margin-bottom:0}
.party-panel__head{display:flex;align-items:center;gap:8px;margin-bottom:20px}
.party-panel__head--sm{margin-bottom:16px}
.party-panel__action{margin-inline-start:auto}
.party-panel__icon{font-size:18px;color:var(--primary)}
.party-panel__title{margin:0;font-size:15px;font-weight:600}
.party-fieldset{border:0;margin:0;padding:0;min-width:0}
.party-field-hint{margin:6px 0 0;font-size:var(--text-xs);color:var(--color-text-muted)}
.party-grid{display:grid;gap:16px}
.party-grid--2{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.party-grid--3{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.party-grid--contacts{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.party-crm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px}

/* list rows (contacts/addresses/notes/refs) */
.party-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--color-border)}
.party-row:last-child{border-bottom:none}
.party-row--start{align-items:flex-start}
.party-row--compact{gap:10px;padding:10px 0}
.party-row__icon{width:32px;height:32px;border-radius:var(--radius-sm);background:var(--surface-2);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px;color:var(--color-text-muted)}
.party-row__icon--sm{width:28px;height:28px;font-size:14px}
.party-row__body{flex:1;min-width:0}
.party-row__value{font-size:var(--text-sm)}
.party-row__meta{font-size:11px;color:var(--color-text-muted);margin-top:2px}
.party-row__actions{display:flex;flex-direction:column;gap:4px;flex-shrink:0}
.party-empty{color:var(--color-text-muted);font-size:var(--text-sm);padding:16px 0;text-align:center;margin:0}
.party-subsection-title{font-size:var(--text-sm);font-weight:600;margin:var(--space-4) 0 var(--space-2)}

/* inline add-forms */
.party-add-form{margin-top:16px;display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end}
.party-add-form--stack{flex-direction:column;align-items:stretch}
.party-add-form__row{display:flex;gap:8px;flex-wrap:wrap}
.party-add-form__row--end{align-items:center}
.party-field--flex{flex:1;min-width:120px}
.party-field--auto{flex:0 0 auto}
.party-input--sm{height:34px;font-size:var(--text-xs)}
.party-input--grow{flex:1;min-width:80px}
.party-input--w100{width:100px}
.party-input--w120{width:120px}
.party-btn--sm{height:34px;padding:0 12px;font-size:var(--text-xs)}
.party-check{display:flex;align-items:center;gap:6px;font-size:var(--text-xs);color:var(--color-text);height:34px;white-space:nowrap;cursor:pointer}
.party-check input[type="checkbox"]{width:16px;height:16px;margin:0;accent-color:var(--primary);cursor:pointer}
.party-roles-box{padding:12px 0;min-height:48px;display:flex;flex-wrap:wrap;align-items:center}
.party-chip{display:inline-flex;align-items:center;gap:4px;margin-inline-end:6px;margin-block-end:4px}
.party-chip--tight{gap:2px;margin-inline-end:4px}
.party-chip__del{padding:2px 6px;font-size:10px;line-height:1}
.party-chip__del--xs{padding:1px 4px;font-size:9px}
.party-tag-form{display:inline-flex;gap:4px;align-items:center;margin-block-start:6px}
.party-tag-form .form-control{height:28px;font-size:11px;max-width:120px}
.party-tag-form .button{height:28px;padding:0 8px;font-size:11px}
.party-note{padding:14px 0;border-bottom:1px solid var(--color-border)}
.party-note:last-child{border-bottom:none}
.party-note__body{margin:0;font-size:var(--text-sm);line-height:1.7;color:var(--color-text)}
.party-note__meta{margin:6px 0 0;font-size:11px;color:var(--color-text-muted)}
.party-textarea{width:100%;min-height:64px;resize:vertical;font-size:var(--text-sm);line-height:1.6;padding:10px 12px}
.party-merge-hint{font-size:var(--text-xs);color:var(--color-text-muted);margin:0 0 12px}

/* table cells */
.party-cell{display:flex;align-items:center;gap:10px}
.party-cell__link{color:var(--color-text)}
.party-cell__sub{font-size:11px;color:var(--color-text-muted)}
.party-cell--sm{font-size:var(--text-xs)}
.party-cell--end{text-align:end}
.party-cell__muted{color:var(--color-text-muted)}
.party-link-plain{color:inherit;text-decoration:none}
.party-link-tel{color:var(--primary);text-decoration:none;font-weight:600}
.party-empty-cell{padding:60px 24px;text-align:center;color:var(--color-text-muted)}
.party-empty-cell__icon{font-size:44px;display:block;margin-bottom:10px;opacity:.4}
.party-empty-cell__text{margin:0;font-size:15px}
.party-th--check{width:32px}
.account-actions{display:flex;gap:4px;flex-wrap:wrap}
.dir-ltr{direction:ltr;text-align:start}
@media(max-width:1023px){.c-panel--form,.form-panel{padding:16px}.c-panel--form input,.c-panel--form select,.c-panel--form textarea,.form-panel input,.form-panel select,.form-panel textarea{padding:11px 14px;min-height:44px}}

/* ── Unified Form System (نظام موحّد لكل forms لوحات التحكم) ────────────── */
/* ممنوع inline styles في الـforms — كل التنسيق من هنا. */
/* Classes: .form-section > .form-grid > .form-field > .form-label + .form-control */
.form-section{padding:20px;display:flex;flex-direction:column;gap:16px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md)}
.form-section--bare{padding:0;border:none;background:transparent}
.form-section--compact{padding:16px;gap:12px}
.form-grid{display:grid;gap:16px}
.form-grid--2{grid-template-columns:1fr 1fr}
.form-grid--3{grid-template-columns:repeat(3,1fr)}
.form-grid--auto{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.form-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.form-field--inline{flex-direction:row;align-items:center;gap:8px}
.form-label{font-size:var(--text-sm,13px);font-weight:600;color:var(--color-text-subtle,#475569);display:block}
.field-label{font-size:var(--text-sm,13px);font-weight:600;color:var(--color-text-subtle,#475569);display:block;margin-bottom:4px}
.form-label--required::after{content:"*";color:var(--color-danger,#EF4444);margin-inline-start:2px;display:inline;white-space:nowrap}
.form-label--hint{font-size:var(--text-xs,11px);font-weight:400;color:var(--text3,#94a3b8)}
.form-hint{font-size:var(--text-xs,11px);color:var(--text3,#94a3b8);margin-top:4px;display:block}
.form-control,.form-section .form-control{width:100%;height:var(--control-h,38px);padding:0 var(--control-padding-x,12px);border:1px solid var(--color-border-strong,#CBD5E1);border-radius:var(--control-radius,var(--radius-sm,6px));background:var(--color-surface,#fff);color:var(--color-text,#1E293B);font-size:var(--control-font-size,var(--text-sm,14px));font-family:inherit;line-height:normal;box-sizing:border-box;outline:none;transition:border-color .15s,box-shadow .15s}
.form-control:focus,.form-section .form-control:focus{border-color:var(--color-primary,#1F75FE);box-shadow:0 0 0 2px var(--color-primary-subtle,rgba(31,117,254,.15))}
.form-field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(.form-control):not(.swatch-input),.form-field select:not(.form-control),.form-field textarea:not(.form-control){width:100%;height:var(--control-h,38px);padding:0 var(--control-padding-x,12px);border:1px solid var(--color-border-strong,#CBD5E1);border-radius:var(--control-radius,var(--radius-sm,6px));background:var(--color-surface,#fff);color:var(--color-text,#1E293B);font-size:var(--control-font-size,var(--text-sm,14px));font-family:inherit;line-height:normal;box-sizing:border-box;outline:none;transition:border-color .15s,box-shadow .15s}
input.input,select.input,textarea.input{width:100%;height:var(--control-h,38px);padding:0 var(--control-padding-x,12px);border:1px solid var(--color-border-strong,#CBD5E1);border-radius:var(--control-radius,var(--radius-sm,6px));background:var(--color-surface,#fff);color:var(--color-text,#1E293B);font-size:var(--control-font-size,var(--text-sm,14px));font-family:inherit;line-height:normal;box-sizing:border-box;outline:none;transition:border-color .15s,box-shadow .15s}
input.input:focus,select.input:focus,textarea.input:focus{border-color:var(--color-primary,#1F75FE);box-shadow:0 0 0 2px var(--color-primary-subtle,rgba(31,117,254,.15))}
.form-control--static{display:flex;flex-direction:column;align-items:flex-start;padding:8px var(--control-padding-x,12px);background:var(--color-surface-2,#F8FAFC);color:var(--color-text-subtle,#475569);font-size:var(--control-font-size,var(--text-sm,14px));border:1px solid var(--color-border,#E2E8F0);border-radius:var(--control-radius,var(--radius-sm,6px));min-height:var(--control-h,38px);box-sizing:border-box}
/* ── select-create — زر «+» بجانب select كيانات: يفتح مودال إنشاء مُكدّساً
   فوق النموذج (data-create-select + entity:{id,name} في app-bulk.js) ── */
.select-create{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.select-create>.form-control,.select-create>select{flex:1;min-width:0}
.select-create__btn{flex:0 0 auto;width:var(--control-h,38px);height:var(--control-h,38px);display:inline-flex;align-items:center;justify-content:center;padding:0;border:1px solid var(--color-border-strong,#CBD5E1);border-radius:var(--control-radius,var(--radius-sm,6px));background:var(--color-surface,#fff);color:var(--color-primary,#1F75FE);font-size:18px;cursor:pointer;transition:border-color .15s,background-color .15s}
.select-create__btn:hover{border-color:var(--color-primary,#1F75FE);background:var(--color-primary-subtle,rgba(31,117,254,.1))}
.form-section__title{font-size:var(--text-base);font-weight:600;color:var(--text);margin:0 0 4px}
/* ── Homepage section cards (admin /home_pages edit) — accordion (FAQ style) ── */
.hp-section-card{background:var(--color-surface,#fff);border:1px solid color-mix(in srgb,var(--color-border,#E2E8F0) 80%,transparent);border-radius:var(--radius-md,12px);overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.03);transition:border-color 0.2s ease,box-shadow 0.2s ease}
.hp-section-card:hover{border-color:var(--color-primary,#1F75FE);box-shadow:0 4px 16px color-mix(in srgb,var(--color-primary,#1F75FE) 10%,transparent)}
.hp-section-card[open]{border-color:var(--color-primary,#1F75FE);box-shadow:0 6px 20px color-mix(in srgb,var(--color-primary,#1F75FE) 14%,transparent)}
.hp-sections-grid{display:flex;flex-direction:column;gap:12px}
.hp-section-card__header{display:flex;align-items:center;gap:12px;padding:18px 22px;cursor:pointer;list-style:none;user-select:none;touch-action:manipulation;font-weight:700;font-size:clamp(0.95rem,1.3vw,1.05rem);color:var(--color-text,#0f172a);transition:color 0.15s ease,background 0.2s ease}
.hp-section-card__header::-webkit-details-marker,.hp-section-card__header::marker{display:none}
.hp-section-card__header:hover{color:var(--color-primary,#1F75FE)}
.hp-section-card[open]>.hp-section-card__header{border-bottom:1px solid color-mix(in srgb,var(--color-border,#E2E8F0) 60%,transparent);background:color-mix(in srgb,var(--color-primary,#1F75FE) 4%,transparent)}
.hp-section-card__icon{flex-shrink:0;width:40px;height:40px;border-radius:var(--radius-sm,8px);background:var(--color-primary-subtle,rgba(31,117,254,.08));color:var(--color-primary,#1F75FE);display:flex;align-items:center;justify-content:center;font-size:20px}
.hp-section-card__heading{flex:1;min-width:0}
.hp-section-card__title{margin:0;font-size:inherit;font-weight:inherit;color:inherit}
.hp-section-card__desc{margin:4px 0 0;font-size:var(--text-xs,12px);color:var(--color-text-subtle,#64748b);line-height:1.5;font-weight:400}
.hp-section-card__actions{flex-shrink:0;display:flex;align-items:center;gap:6px}
.hp-section-card__action-btn{flex-shrink:0;width:30px;height:30px;padding:0;border:1px solid var(--color-border,#E2E8F0);background:var(--color-surface,#fff);color:var(--color-text-subtle,#64748b);font-size:16px;cursor:pointer;border-radius:var(--radius-sm,6px);display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s,color .15s}
.hp-section-card__action-btn:hover{background:var(--color-primary-subtle,rgba(31,117,254,.08));border-color:var(--color-primary,#1F75FE);color:var(--color-primary,#1F75FE)}
.hp-section-card__action-btn:active{transform:scale(.92)}
.hp-section-card__action-btn--danger:hover{background:rgba(239,68,68,.1);border-color:#ef4444;color:#ef4444}
.hp-section-card__chevron{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:color-mix(in srgb,var(--color-primary,#1F75FE) 10%,transparent);color:var(--color-primary,#1F75FE);font-size:20px;transition:transform .3s cubic-bezier(0.4,0,0.2,1),background .25s ease,color .25s ease}
.hp-section-card[open]>.hp-section-card__header .hp-section-card__chevron{transform:rotate(180deg);background:var(--color-primary,#1F75FE);color:#fff}
[data-theme="dark"] .hp-section-card{background:var(--color-surface,#0F172A);border-color:color-mix(in srgb,var(--color-border,#334155) 80%,transparent);box-shadow:0 2px 8px rgba(0,0,0,0.3)}
[data-theme="dark"] .hp-section-card:hover{border-color:var(--color-primary,#1F75FE);box-shadow:0 4px 16px color-mix(in srgb,var(--color-primary,#1F75FE) 20%,transparent)}
[data-theme="dark"] .hp-section-card[open]{border-color:var(--color-primary,#1F75FE);box-shadow:0 6px 20px color-mix(in srgb,var(--color-primary,#1F75FE) 25%,transparent)}
[data-theme="dark"] .hp-section-card__header{color:var(--color-text,#f8fafc)}
[data-theme="dark"] .hp-section-card[open]>.hp-section-card__header{background:color-mix(in srgb,var(--color-primary,#1F75FE) 6%,transparent);border-bottom-color:color-mix(in srgb,var(--color-border,#334155) 70%,transparent)}
[data-theme="dark"] .hp-section-card__desc{color:var(--color-text-subtle,#94a3b8)}
[data-theme="dark"] .hp-section-card__action-btn{background:#1E293B;border-color:#334155;color:#94a3b8}
[data-theme="dark"] .hp-section-card__action-btn:hover{background:color-mix(in srgb,var(--color-primary,#1F75FE) 10%,#1E293B);border-color:var(--color-primary,#1F75FE);color:var(--color-primary,#1F75FE)}
.hp-section-card[data-hidden="1"]{opacity:.55}
.hp-section-card[data-hidden="1"] .hp-section-card__body{pointer-events:none}
.hp-section-card__body{padding:20px 24px;display:grid;gap:14px}
.hp-add-section-bar{display:flex;justify-content:center;padding:16px 0 4px}
.hp-add-section-btn{display:inline-flex;align-items:center;gap:6px;border:1px dashed var(--color-border,#E2E8F0);border-radius:var(--radius-md,10px);padding:10px 20px;background:transparent;color:var(--color-text-subtle,#64748b);font-size:var(--text-sm,14px);cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.hp-add-section-btn:hover{border-color:var(--color-primary,#1F75FE);color:var(--color-primary,#1F75FE);background:var(--color-primary-subtle,rgba(31,117,254,.05))}
.hp-section-card__body .form-hint{margin:0}
/* repeater cards داخل الـsection cards */
.hp-repeater__list{display:flex;flex-direction:column;gap:12px}
.hp-repeater__card{padding:16px;background:var(--color-surface-2,#F8FAFC);border:1px solid var(--color-border,#E2E8F0);border-radius:var(--radius-md,10px);position:relative}
.hp-repeater__card-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.hp-repeater__card-index{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--color-primary,#1F75FE);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.hp-repeater__card-fields{display:grid;gap:10px}
.hp-repeater__card-fields .form-field{margin:0}
.hp-repeater__card-fields .form-field .form-label{font-size:var(--text-xs,12px);font-weight:600;margin-bottom:4px}
.hp-repeater__card-fields .form-field .form-control{font-size:var(--text-sm,14px)}
.hp-repeater__card-remove{flex-shrink:0;width:30px;height:30px;padding:0;border:1px solid var(--color-border,#E2E8F0);background:#fff;color:var(--color-danger,#EF4444);font-size:16px;cursor:pointer;border-radius:var(--radius-sm,6px);display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s}
.hp-repeater__card-remove:hover{background:var(--color-danger-subtle,rgba(239,68,68,.1));border-color:var(--color-danger,#EF4444)}
.hp-repeater__add-btn{margin-top:12px;display:inline-flex;align-items:center;gap:6px;font-weight:600}
.hp-repeater__empty{padding:20px;text-align:center;color:var(--color-text-subtle,#64748b);font-size:var(--text-sm,14px);background:var(--color-surface-2,#F8FAFC);border:1px dashed var(--color-border,#E2E8F0);border-radius:var(--radius-md,10px)}
@media(max-width:1023px){.hp-section-card__header{padding:14px 16px}.hp-section-card__body{padding:14px 16px}}
textarea.form-control,.form-control--textarea{height:auto;min-height:calc(var(--control-h,38px) * 2.5);padding:10px var(--control-padding-x,12px);line-height:1.5;resize:vertical}
.form-control--textarea{width:100%;border:1px solid var(--color-border-strong,#CBD5E1);border-radius:var(--control-radius,var(--radius-sm,6px));background:var(--color-surface,#fff);color:var(--color-text,#1E293B);font-size:var(--control-font-size,var(--text-sm,14px));font-family:inherit;box-sizing:border-box;outline:none;transition:border-color .15s,box-shadow .15s}
.form-control--textarea:focus{border-color:var(--color-primary,#1F75FE);box-shadow:0 0 0 2px var(--color-primary-subtle,rgba(31,117,254,.15))}
select.form-control{line-height:normal;padding-block:0}
.form-checkbox{display:flex;align-items:center;gap:8px;cursor:pointer}
.form-checkbox input[type="checkbox"],.form-checkbox input[type="radio"]{width:16px;height:16px;margin:0;accent-color:var(--primary);cursor:pointer;flex-shrink:0}
.form-checkbox-label{font-size:var(--text-sm,14px);font-weight:600;color:var(--color-text,#1E293B)}
.form-info-box{padding:14px;background:var(--color-surface-2,#F8FAFC);border-radius:var(--radius-md,8px);display:flex;justify-content:space-between;align-items:center;gap:12px}
.form-info-box__label{font-size:var(--text-sm,13px);color:var(--color-text-subtle,#475569)}
.form-info-box__value{font-size:var(--text-lg,18px);font-weight:700}
.form-divider{border:none;border-top:1px solid var(--color-border,#E2E8F0);margin:4px 0}
.form-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
/* متجاوب: grid--2 و grid--3 تتحول لعمود واحد على الموبايل */
@media(max-width:1023px){
  .form-section{padding:16px}
  .form-grid--2,.form-grid--3{grid-template-columns:1fr}
  .form-control{min-height:44px;padding:11px 14px}
}
@media(max-width:480px){
  .form-section{padding:14px;gap:12px}
  .form-grid{gap:12px}
}

/* ── User Menu ────────────────────────────────────────────── */
.user-menu{position:relative;flex-shrink:0}
.user-menu__trigger{display:flex;align-items:center;gap:8px;height:36px;padding:0 10px;border:none;background:transparent;cursor:pointer;color:var(--text);font-size:var(--text-sm);font-weight:500;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.user-menu__trigger:hover{background:transparent}
.user-avatar{display:grid;place-items:center;width:26px;height:26px;background:var(--primary);color:#fff;font-size:var(--text-xs);font-weight:700;flex-shrink:0}
.user-menu__dropdown{position:absolute;top:calc(100% + 4px);inset-inline-end:0;min-width:200px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-md);z-index:calc(var(--z-overlay) + 10);padding:4px}
.user-menu__info{padding:10px 12px}
.user-menu__info strong{display:block;font-size:var(--text-sm);color:var(--text);margin-bottom:2px}
.user-menu__info span{font-size:var(--text-xs);color:var(--text3)}
.user-menu__divider{border:none;border-top:1px solid var(--border);margin:4px 0}
.user-menu__item{display:flex;align-items:center;width:100%;padding:8px 12px;border:none;background:none;color:var(--text);font-size:var(--text-sm);text-decoration:none;cursor:pointer;text-align:start;font-family:inherit}
.user-menu__item:hover{background:transparent}
.user-menu__item--danger{color:var(--danger)}
.user-menu__item--danger:hover{background:var(--color-danger-subtle)}
.user-menu__form{margin:0}

/* ── Settings Layout (shared: admin + tenant + site-identity settings) ── */
.settings-split-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;align-items:start;width:100%;box-sizing:border-box}
/* ── بطاقة رقم العميل (TNT-XXXXXXX) في صفحة الإعدادات ── */
.account-number-card{display:flex;align-items:center;gap:14px;padding:16px 18px;background:var(--color-primary-subtle,rgba(31,117,254,.08));border:1px solid var(--color-primary-subtle,rgba(31,117,254,.18));border-radius:var(--radius-md,0)}
.account-number-card__icon{font-size:28px;color:var(--primary,var(--color-primary,#1F75FE));flex-shrink:0}
.account-number-card__body{display:flex;flex-direction:column;gap:2px;min-width:0}
.account-number-card__label{font-size:var(--text-xs,12px);font-weight:500;color:var(--text2,var(--color-text-subtle,#475569))}
.account-number-card__value{font-size:var(--text-xl,20px);font-weight:700;color:var(--primary,var(--color-primary,#1F75FE));font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.03em;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.settings-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;align-items:start}
.span-full{grid-column:1/-1}
@media(max-width:1023px){.settings-split-grid{grid-template-columns:1fr !important;gap:16px !important}.settings-split-grid > *{grid-column:1/-1 !important;width:100% !important;min-width:0 !important}.settings-grid{grid-template-columns:1fr !important;gap:12px !important}}
@media(max-width:640px){.settings-split-grid{grid-template-columns:1fr !important}
  /* بطاقة رقم العميل: أصغر على الشاشات الضيقة */
  .account-number-card{padding:12px 14px;gap:10px}
  .account-number-card__icon{font-size:22px}
  .account-number-card__value{font-size:var(--text-lg,18px)}
}
.settings-toolbar-slot{display:contents}
.settings-toolbar-slot.hidden{display:none}
.settings-panel{display:none;animation:settingsFadeIn 0.12s ease}
.settings-panel.active{display:block}
@keyframes settingsFadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

/* ── Auth Pages ───────────────────────────────────────────── */
.auth-shell{display:flex;flex-direction:row;min-height:100vh;background:var(--color-bg);touch-action:manipulation}
.auth-visual{flex:1;background:var(--theme-primary, var(--color-primary, #1f75fe));color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(40px, 8vw, 80px);position:relative;overflow:hidden;text-align:center;}
.auth-visual::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 25% 15%, rgba(255,255,255,0.14) 0%, transparent 50%), linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(0,0,0,0.18) 100%);pointer-events:none;}
.auth-visual::after{content:"";position:absolute;width:340px;height:340px;border-radius:50%;background:rgba(255,255,255,0.10);filter:blur(100px);top:8%;inset-inline-end:8%;pointer-events:none;opacity:0.55;}
.auth-visual-header{display:flex;flex-direction:column;align-items:center;gap:16px;z-index:2}
.auth-visual-header a{display:flex;flex-direction:column;align-items:center;gap:16px;text-decoration:none;color:inherit;transition:transform 0.2s ease;}
.auth-visual-header a:hover{transform:scale(1.02);}
.auth-visual-header .brand-logo{height:70px;width:auto;background:transparent;padding:0;flex-shrink:0;}
.auth-visual-header .brand-mark{font-size:42px;width:70px;height:70px;display:flex;align-items:center;justify-content:center;background:var(--color-surface);color:var(--theme-primary, var(--color-primary));border-radius:var(--radius-md);box-shadow:var(--shadow-md);font-weight:700;}
.auth-visual-header .auth-brand-initial{width:70px;height:70px;font-size:2rem;border-radius:var(--radius-md);}
.auth-visual-header h2{font-size:clamp(2rem,1.7rem+1.5vw,2.75rem);margin:0;margin-top:36px;font-weight:700;letter-spacing:-0.02em;line-height:1.2;text-align:center;max-width:420px;word-wrap:break-word}
.auth-logo-badge{display:inline-flex;align-items:center;justify-content:center;width:120px;height:120px;padding:8px;border-radius:50%;background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,0.7),0 8px 32px rgba(0,0,0,0.12),inset 0 1px 0 rgba(255,255,255,0.9);border:none;line-height:0;animation:auth-logo-pulse 2.4s ease-in-out infinite;}
.auth-logo-badge .brand-logo{height:88px;width:88px;object-fit:contain;border-radius:0;}
.auth-logo-badge .brand-mark,.auth-logo-badge .auth-brand-initial{width:88px;height:88px;font-size:2.2rem;box-shadow:none;border-radius:50%;}
@keyframes auth-logo-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0.6),0 8px 32px rgba(0,0,0,0.12),inset 0 1px 0 rgba(255,255,255,0.9);}50%{box-shadow:0 0 0 14px rgba(255,255,255,0),0 8px 32px rgba(0,0,0,0.12),inset 0 1px 0 rgba(255,255,255,0.9);}}
@media(prefers-reduced-motion:reduce){.auth-logo-badge{animation:none;}}
.auth-visual-footer{font-size:var(--text-sm);opacity:0.9;z-index:2;font-weight:500;position:absolute;bottom:40px;left:0;right:0;}
.auth-panel{flex:1;display:flex;flex-direction:column;padding:clamp(28px,6vw,80px);background:var(--color-surface);z-index:10;position:relative;justify-content:center;align-items:center;}
.auth-brand.mobile-only{display:none;}
.auth-footer.mobile-only{display:none;}
.auth-card{max-width:440px;width:100%;margin:auto;}
.auth-card h1{font-size:var(--text-3xl);margin:0 0 8px;color:var(--color-text);font-weight:700;line-height:1.3}
.auth-card>p{color:var(--color-text-subtle);line-height:1.7;margin:0 0 24px;font-size:var(--text-base)}
.auth-form{display:grid;gap:14px;margin-bottom:24px}
.auth-form .field-control::placeholder{color:var(--color-text-muted)}

/* ── Google Sign-In (0443) ── رابط عادي لـ/auth/google/start (redirect OAuth — بلا GIS/iframe/popup) */
.auth-google{display:flex;justify-content:center;margin:0 0 14px;min-height:var(--control-h,40px)}
.auth-google-custom{width:100%;height:var(--control-h,40px);display:flex;align-items:center;justify-content:center;gap:10px;background:var(--primary,var(--color-primary,#1F75FE));color:var(--color-text-on-primary,#fff);border:0;border-radius:var(--control-radius,0);font-family:inherit;font-weight:500;font-size:14px;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.05);text-decoration:none}
.auth-google:hover .auth-google-custom,.auth-google-custom:hover{background:var(--primary-dim,var(--color-primary-hover,#1558c9))}
.auth-google:focus-within .auth-google-custom{box-shadow:0 0 0 3px var(--primary-ghost,rgba(31,117,254,.35))}
.auth-google-logo{width:20px;height:20px;flex-shrink:0;background:#fff;border-radius:var(--control-radius,0);padding:1px}
.auth-divider{display:flex;align-items:center;gap:12px;margin:2px 0 18px;color:var(--color-text-muted);font-size:var(--text-sm);line-height:1}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--color-border,#e2e8f0)}

/* ── Auth Fields (موحد: label + icon + input) ─────────────────── */
.auth-field{display:flex;flex-direction:column;gap:6px}
.auth-field-label{font-size:var(--text-sm);font-weight:600;color:var(--color-text);line-height:1.4}
.auth-field-required{color:var(--color-danger,#ef4444);font-weight:700}
.auth-field-control{position:relative;display:flex;align-items:stretch;gap:0}
.auth-field--has-icon .auth-field-control{position:relative}
.auth-field-icon{position:absolute;inset-inline-start:14px;top:50%;transform:translateY(-50%);font-size:18px;color:var(--color-text-muted);pointer-events:none;z-index:1;transition:color 0.15s}
.auth-field-input{width:100%}
.auth-field--has-icon .auth-field-input{padding-inline-start:44px !important}
.auth-field-input:focus + .auth-field-icon,
.auth-field-control:focus-within .auth-field-icon{color:var(--theme-primary,var(--color-primary,#1F75FE))}
.auth-field-affix{flex-shrink:0;white-space:nowrap}
.auth-field-select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 14px center;padding-inline-start:44px !important;padding-inline-end:36px}
.auth-field--select .auth-field-icon{z-index:1}

/* ── Password Toggle Button ───────────────────────────────────── */
.auth-password-toggle{position:absolute;inset-inline-end:8px;top:50%;transform:translateY(-50%);background:transparent;border:none;color:var(--color-text-muted);cursor:pointer;padding:8px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:18px;z-index:2;transition:color 0.15s}
.auth-password-toggle:hover{color:var(--color-text)}
.auth-password-toggle:active{color:var(--theme-primary,var(--color-primary,#1F75FE))}
.auth-field--password .auth-field-input{padding-inline-end:44px !important}

/* ── Password Strength Meter ──────────────────────────────────── */
.auth-strength{display:flex;align-items:center;gap:8px;margin-top:4px}
.auth-strength-bar{flex:1;height:4px;background:var(--color-border,#e2e8f0);border-radius:2px;overflow:hidden}
.auth-strength-fill{height:100%;width:0;border-radius:2px;transition:width 0.3s ease,background 0.3s ease}
.auth-strength-label{font-size:var(--text-xs);font-weight:600;white-space:nowrap;min-width:60px;text-align:end}
.auth-strength--weak .auth-strength-fill{width:25%;background:var(--color-danger,#ef4444)}
.auth-strength--weak .auth-strength-label{color:var(--color-danger,#ef4444)}
.auth-strength--fair .auth-strength-fill{width:45%;background:#f59e0b}
.auth-strength--fair .auth-strength-label{color:#f59e0b}
.auth-strength--good .auth-strength-fill{width:65%;background:#eab308}
.auth-strength--good .auth-strength-label{color:#eab308}
.auth-strength--strong .auth-strength-fill{width:85%;background:var(--color-success,#16a34a)}
.auth-strength--strong .auth-strength-label{color:var(--color-success,#16a34a)}
.auth-strength--very-strong .auth-strength-fill{width:100%;background:var(--color-success,#16a34a)}
.auth-strength--very-strong .auth-strength-label{color:var(--color-success,#16a34a)}

/* ── Auth Submit Button ───────────────────────────────────────── */
.auth-submit-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:600;margin-top:4px}

/* ── Auth Checkout (payment method cards + summary — داخل auth-card) ── */
.auth-method{display:block;border:2px solid var(--border, var(--color-border, #e5e7eb));border-radius:var(--radius-md, 12px);padding:14px 16px;cursor:pointer;transition:border-color .15s,background .15s;position:relative}
.auth-method--active{border-color:var(--theme-primary, var(--color-primary, #1F75FE));background:rgba(31,117,254,0.04)}
.auth-method--disabled{cursor:default;opacity:.7}
.auth-method__radio{position:absolute;top:14px;inset-inline-end:14px;width:20px;height:20px;accent-color:var(--theme-primary, var(--color-primary, #1F75FE))}
.auth-method__head{display:flex;align-items:center;gap:8px;padding-inline-end:28px;font-weight:700;font-size:var(--text-sm);color:var(--text, var(--color-text, #111))}
.auth-method__head i{font-size:20px;color:var(--theme-primary, var(--color-primary, #1F75FE))}
.auth-method__desc{font-size:var(--text-xs);color:var(--text2, var(--color-text-subtle, #6b7280));margin-top:4px;padding-inline-end:28px}
.auth-method__body{display:none;margin-top:14px;padding-top:14px;border-top:1px dashed var(--border, var(--color-border, #e5e7eb))}
.auth-method--active .auth-method__body{display:grid;gap:14px}
.auth-methods{display:flex;flex-direction:column;gap:12px}
.auth-checkout-summary{margin-bottom:16px;padding:12px 0;border-top:1px solid var(--border, var(--color-border, #e5e7eb));border-bottom:1px solid var(--border, var(--color-border, #e5e7eb))}
.auth-checkout-summary__row{display:flex;justify-content:space-between;padding:6px 0;font-size:var(--text-sm)}
.auth-checkout-summary__row--total{font-weight:700;font-size:var(--text-base);padding-top:10px;border-top:1px solid var(--border, var(--color-border, #e5e7eb));margin-top:4px}

/* ── Auth Guest Register: قسم بيانات الزائر أعلى صفحة checkout ── */
/* display:grid + gap:14px — نفس إيقاع المسافات في .auth-form (صفحة /register). */
.auth-guest-register{display:grid;gap:14px;padding:16px;margin-bottom:16px;background:var(--surface-2, rgba(0,0,0,0.02));border:1px solid var(--border, var(--color-border, #e5e7eb));border-radius:var(--radius-md, 12px)}
.auth-guest-register__title{margin:0;font-size:var(--text-base);font-weight:600;color:var(--text, var(--color-text, #111))}
.auth-guest-register__desc{margin:0;font-size:var(--text-sm);color:var(--text2, var(--color-text-subtle, #6b7280))}
.auth-guest-register__login-link{margin:0}

/* ── Auth Checkout: course cover as brand mark (بدل لوجو الاكاديمية) ── */
/* الصورة بحجمها الطبيعي ونسبتها الأصلية — تتقلص فقط عند الحاجة (متجاوبة). */
.auth-logo-badge--cover{width:auto;height:auto;max-width:min(340px,78vw);max-height:200px;padding:0;border-radius:var(--radius-md,12px);object-fit:contain;display:block;background:transparent;box-shadow:0 8px 32px rgba(0,0,0,0.14);animation:none;line-height:0}
.auth-logo-badge--initial{width:56px;height:56px;border-radius:var(--radius-md,12px);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;color:#fff;background:var(--theme-primary, var(--color-primary, #1F75FE))}

/* ── Receipt upload zone (وصل الدفع — رفع ملف من جهاز الطالب) ── */
.receipt-upload-zone{position:relative;border:2px dashed var(--border, var(--color-border, #d1d5db));border-radius:var(--radius-md,12px);padding:20px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s;min-height:80px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px}
.receipt-upload-zone:hover{border-color:var(--theme-primary, var(--color-primary, #1F75FE));background:rgba(31,117,254,0.03)}
.receipt-upload-zone--drag{border-color:var(--theme-primary, var(--color-primary, #1F75FE));background:rgba(31,117,254,0.06)}
.receipt-upload-zone--loading{opacity:.6;pointer-events:none}
.receipt-upload-zone__prompt{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--text2, var(--color-text-subtle, #6b7280))}
.receipt-upload-zone__prompt i{font-size:32px;color:var(--theme-primary, var(--color-primary, #1F75FE))}
.receipt-upload-zone__prompt span{font-size:var(--text-sm);font-weight:600}
.receipt-upload-zone__prompt small{font-size:var(--text-xs);opacity:.8}
.receipt-upload-zone__preview{position:relative;display:inline-block;max-width:100%}
.receipt-upload-zone__preview img{max-width:100%;max-height:160px;border-radius:var(--radius-sm, 8px);object-fit:contain}
.receipt-upload-zone__remove{position:absolute;top:-8px;inset-inline-end:-8px;width:28px;height:28px;border-radius:50%;border:0;background:var(--color-danger, #dc2626);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;padding:0}
.receipt-upload-zone__remove:hover{opacity:.85}

/* ── Manual payment details (تفاصيل طرق الدفع اليدوي في checkout) ── */
.manual-payment-details{display:flex;flex-direction:column;gap:12px;margin-bottom:0}
.manual-payment-detail{border:1px solid var(--border, var(--color-border, #e5e7eb));border-radius:var(--radius-md, 12px);padding:14px;background:var(--surface-2, rgba(0,0,0,0.02))}
.manual-payment-detail__head{display:flex;align-items:center;gap:8px;font-size:var(--text-sm);margin-bottom:6px}
.manual-payment-detail__head i{font-size:20px;color:var(--theme-primary, var(--color-primary, #1F75FE))}
.manual-payment-detail__intro{font-size:var(--text-sm);color:var(--text2, var(--color-text-subtle, #6b7280));margin:0 0 8px}
.manual-payment-detail__steps{margin:0 0 8px;padding-inline-start:20px;font-size:var(--text-sm);color:var(--text2, var(--color-text-subtle, #6b7280))}
.manual-payment-detail__steps li{margin-bottom:4px}
.manual-payment-detail__fields{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0 0 8px;font-size:var(--text-sm)}
.manual-payment-detail__fields dt{color:var(--text2, var(--color-text-subtle, #6b7280));font-weight:600}
.manual-payment-detail__fields dd{margin:0;font-family:monospace;word-break:break-all}
.manual-payment-detail__note{font-size:var(--text-xs);color:var(--text2, var(--color-text-subtle, #6b7280));margin:0;padding:8px;background:var(--warning-bg, #fff8e1);border-radius:var(--radius-sm, 8px)}

/* ── Auth OTP Field wrapper ───────────────────────────────────── */
.auth-field--otp{align-items:center;text-align:center}
.auth-field--otp .auth-field-label{text-align:center}
.auth-field--otp .otp-container{margin:8px 0 0}
.auth-field-input--otp{text-align:center;letter-spacing:0.3em;font-size:var(--text-xl);font-weight:700}

/* ── Auth Footer Text (legacy compat) ─────────────────────────── */
.auth-footer-text{margin-top:20px;text-align:center;font-size:var(--text-sm);color:var(--color-text-subtle)}
.auth-footer-text a{color:var(--color-primary);font-weight:500;text-decoration:none}

/* ── Avatar (مركزي) ───────────────────────────────────────── */
.avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;background:var(--color-surface-2);color:#fff;font-weight:700;line-height:1;user-select:none;vertical-align:middle}
.avatar--circle{border-radius:50%}
.avatar--square{border-radius:var(--radius-sm)}
.avatar--xs{width:20px;height:20px;font-size:9px}
.avatar--sm{width:28px;height:28px;font-size:var(--text-xs)}
.avatar--md{width:40px;height:40px;font-size:var(--text-sm)}
.avatar--lg{width:56px;height:56px;font-size:var(--text-lg)}
.avatar--xl{width:80px;height:80px;font-size:var(--text-2xl)}
.avatar__img{width:100%;height:100%;object-fit:cover;display:block}
.avatar__fallback{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.avatar__fallback--icon svg{width:55%;height:55%}
.avatar--c1{background:var(--avatar-color-1)}
.avatar--c2{background:var(--avatar-color-2)}
.avatar--c3{background:var(--avatar-color-3)}
.avatar--c4{background:var(--avatar-color-4)}
.avatar--c5{background:var(--avatar-color-5)}
.avatar--c6{background:var(--avatar-color-6)}
.avatar--c7{background:var(--avatar-color-7)}
.avatar--c8{background:var(--avatar-color-8)}
.avatar-row{display:inline-flex;align-items:center;gap:12px;min-width:0}
.avatar-row>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-inline-start:0}
.avatar-row>img,.avatar-row>.avatar{flex-shrink:0}

/* ── KPI Cards (central design system — admin/tenant/consumer) ─────────── */
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));gap:14px;margin-bottom:20px}
/* تخطيط موحّد على كل المقاسات — صف علوي [أيقونة│تسمية] ثم القيمة بعرض
   كامل ثم الفوتر (flex-wrap + order يلتقط البطاقات اليدوية المختلفة
   الترتيب أيضاً). بلا hover — البطاقات عرض فقط غير قابلة للنقر. */
.kpi-card{background:var(--surface);border:1px solid var(--border);padding:16px 18px;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;align-content:flex-start;gap:6px 10px;position:relative;overflow:hidden;border-radius:var(--radius-md);min-width:0;height:100%}
.kpi-card::after{content:'';position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;background:var(--primary)}
.kpi-card--accent::after{background:var(--accent)}
.kpi-card--warn::after{background:var(--warn)}
.kpi-card--danger::after{background:var(--danger)}
.kpi-card--success::after{background:var(--success)}
.kpi-card--muted::after{background:var(--border2)}
.kpi-icon{order:1;flex-shrink:0;font-size:20px;color:var(--primary);width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);background:color-mix(in srgb,var(--primary) 12%,transparent)}
.kpi-card--accent .kpi-icon{color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.kpi-card--warn .kpi-icon{color:var(--warn);background:color-mix(in srgb,var(--warn) 12%,transparent)}
.kpi-card--danger .kpi-icon{color:var(--danger);background:color-mix(in srgb,var(--danger) 12%,transparent)}
.kpi-card--success .kpi-icon{color:var(--success);background:color-mix(in srgb,var(--success) 12%,transparent)}
.kpi-card--muted .kpi-icon{color:var(--text3);background:var(--surface2)}
.kpi-label{order:2;flex:1;font-size:var(--text-xs);color:var(--text3);font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kpi-value{order:3;flex-basis:100%;font-size:var(--text-3xl);font-weight:700;color:var(--text);font-family:var(--font-num);line-height:1.15;letter-spacing:-.02em;min-width:0;overflow-wrap:break-word}
/* رمز العملة/الوحدة — أصغر وأهدأ من الرقم ليبقى الرقم هو البطل */
.kpi-value__cur{font-size:.55em;font-weight:600;color:var(--text3);font-family:var(--font-sans);letter-spacing:0}
/* القيمة السالبة — رقم ورمز بدرجة الخطر */
.kpi-value.is-neg{color:var(--danger)}
.kpi-value.is-neg .kpi-value__cur{color:var(--danger)}
.kpi-card__footer{order:4;flex-basis:100%;display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-height:18px}
.kpi-delta{font-size:.78rem;color:var(--text3);font-weight:600;display:inline-flex;align-items:center;gap:4px}
.kpi-delta i{font-size:14px}
.kpi-delta.up{color:var(--success)}
.kpi-delta.down{color:var(--danger)}
.kpi-spark{margin-top:4px;height:28px;width:100%}
.kpi-spark-svg{display:block;width:100%;height:28px;overflow:visible}

/* ── KPI card link wrapper — بلا hover: البطاقات عرض فقط لا روابط ────── */
.kpi-card-link{display:block;height:100%;text-decoration:none;color:inherit;border-radius:var(--radius-md)}

/* ── Gateway settings cards (product-sales checkout gateways) ────────────── */
.gw-card{margin-bottom:16px;overflow:hidden}
.gw-card-header{display:flex;align-items:center;gap:16px;padding:16px 20px;border-bottom:1px dashed var(--border);background:var(--surface)}
.gw-card-icon{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--primary-ghost);color:var(--primary);border-radius:10px;flex-shrink:0}
.gw-card-icon i{font-size:1.3rem}
.gw-card-title{flex:1;min-width:0}
.gw-card-name{font-size:1.1rem;font-weight:800;color:var(--text)}
.gw-card-desc{font-size:.8rem;color:var(--text3)}
.gw-card-badges{display:flex;align-items:center;gap:8px;flex-shrink:0}
.gw-card-body{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:20px}
.gw-card-col--info{min-width:0}
.gw-card-col--settings{min-width:0}
.gw-secrets-section{margin-bottom:12px}
.gw-secrets-title{font-weight:600;margin-bottom:8px}
.gw-secrets-list{display:grid;gap:6px}
.gw-webhook-label{font-weight:600;font-size:.85rem;color:var(--text3)}
.gw-webhook-row{display:flex;gap:8px;align-items:center;margin-top:4px}
.gw-webhook-url{flex:1;padding:8px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.82rem;overflow-x:auto;direction:ltr}
.gw-card .toggle-row{display:flex;align-items:center;gap:12px;margin-bottom:16px;padding:12px;background:var(--surface2);border-radius:var(--radius-sm)}
.gw-card .toggle-row-label{font-weight:600;font-size:.85rem;color:var(--text3)}
.gw-card .toggle-wrap{display:flex;gap:6px;flex-wrap:wrap}
@media(max-width:768px){
  .gw-card-body{grid-template-columns:1fr;gap:16px}
  .gw-card-header{flex-wrap:wrap;gap:10px}
}

/* ── Content wrapper (inside .content — no padding to avoid doubling .content's 24px) ── */
.content-wrapper{min-width:0}
.content-wrapper--narrow{max-width:900px;margin:0 auto}
.content-wrapper--narrow2{max-width:760px;margin:0 auto}

/* ── Product-sales settings panels ── */
.ps-panel{padding:20px;margin-bottom:20px}
.ps-panel .panel-head{margin-bottom:12px}
.ps-hint{margin-bottom:16px;color:var(--text3);font-size:.85rem}

/* ── Form section divider (product form) ── */
.form-divider{border-top:1px dashed var(--border);margin:16px 0;padding-top:16px}
.form-divider-label{font-size:.75rem;font-weight:900;color:var(--text3);text-transform:uppercase;letter-spacing:.1em}
.form-divider-label i{color:var(--primary);opacity:.6}
.field-icon{opacity:.5;font-size:.8rem}
.field-icon--price{color:#22c55e}
.field-icon--bump{color:#f59e0b}
.price-suffix{position:absolute;top:50%;inset-inline-end:14px;transform:translateY(-50%);font-weight:900;font-size:1rem;pointer-events:none}
.price-suffix--usd{color:#22c55e}
.price-suffix--bump{color:#f59e0b}
.field-hint{color:var(--text3);font-size:.78rem}
.checkout-url-box{margin-top:20px;padding:16px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-md)}
.checkout-url-box strong{font-size:.85rem;display:block;margin-bottom:10px}
.checkout-url-row{display:flex;gap:8px;align-items:center}
.checkout-url-code{flex:1;padding:10px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.85rem;overflow-x:auto;direction:ltr}
.checkout-url-hint{color:var(--text3);font-size:.78rem;display:block;margin-top:8px}
.event-code{font-size:.78rem;direction:ltr}

/* ── Gateway choices grid (product form — gateway checkboxes) ───────────── */
.gateway-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:5px}
@media(max-width:480px){
  .gateway-choices{grid-template-columns:1fr}
}
.gw-choice{display:flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid var(--border);cursor:pointer;transition:.2s;border-radius:var(--radius-sm)}
.gw-choice input[type="checkbox"]{width:16px;height:16px;accent-color:var(--primary)}
.gw-choice i{font-size:1.1rem}
.gw-choice span{font-weight:700;font-size:.85rem}

/* ── Onboarding checklist (dashboard) ──────────────────────────────────── */
.onboarding-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;margin-bottom:24px;box-shadow:0 2px 12px rgba(0,0,0,.04)}
.onboarding-card__header{margin-bottom:20px}
.onboarding-card__title-row{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.onboarding-card__icon{font-size:28px;color:var(--primary);flex-shrink:0}
.onboarding-card__title{font-size:var(--text-xl);font-weight:700;margin:0}
.onboarding-card__subtitle{font-size:var(--text-sm);color:var(--text3);margin:2px 0 0}
.onboarding-card__progress{height:8px;background:var(--surface2);border-radius:var(--radius);overflow:hidden}
.onboarding-card__progress-bar{height:100%;background:linear-gradient(90deg,var(--primary),var(--accent));border-radius:var(--radius);transition:width .4s ease}
.onboarding-card__steps{display:flex;flex-direction:column;gap:8px}
.onboarding-step{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--border);border-radius:var(--radius-md);text-decoration:none;color:inherit;transition:all .15s;position:relative}
.onboarding-step:hover{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 4%,transparent)}
.onboarding-step.is-done{opacity:.65}
.onboarding-step.is-done .onboarding-step__title{text-decoration:line-through;color:var(--text3)}
.onboarding-step__check{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;flex-shrink:0;background:var(--surface2);color:var(--text3)}
.onboarding-step:not(.is-done) .onboarding-step__check{background:var(--primary);color:#fff}
.onboarding-step.is-done .onboarding-step__check{background:var(--success);color:#fff}
.onboarding-step__num{font-size:14px}
.onboarding-step__body{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.onboarding-step__title{font-size:var(--text-sm);font-weight:700;color:var(--text)}
.onboarding-step__desc{font-size:var(--text-xs);color:var(--text3)}
.onboarding-step__arrow{font-size:18px;color:var(--text3);flex-shrink:0}

/* ── Generic progress bar ──────────────────────────────────────────────── */
.progress{height:8px;background:var(--color-surface-2);border-radius:var(--radius);overflow:hidden}
.progress__fill{display:block;height:100%;width:0;background:var(--color-primary);transition:width .4s ease}
.progress__fill--warn{background:var(--color-warning)}
.progress__fill--success{background:var(--color-success)}
.progress__fill--danger{background:var(--color-danger)}

/* ── Onboarding ready banner ───────────────────────────────────────────── */
.onboarding-ready{background:linear-gradient(135deg,color-mix(in srgb,var(--success) 12%,transparent),color-mix(in srgb,var(--primary) 8%,transparent));border:1px solid color-mix(in srgb,var(--success) 30%,transparent);border-radius:var(--radius-lg);padding:20px 24px;margin-bottom:24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.onboarding-ready__content{display:flex;align-items:center;gap:14px;min-width:0}
.onboarding-ready__icon{font-size:32px;color:var(--success);flex-shrink:0}
.onboarding-ready__title{font-size:var(--text-lg);font-weight:700;margin:0}
.onboarding-ready__desc{font-size:var(--text-sm);color:var(--text3);margin:4px 0 0}
.onboarding-ready__link{color:var(--primary);font-weight:600;text-decoration:none}
.onboarding-ready__link:hover{text-decoration:underline}

/* ── Dashboard quick actions ───────────────────────────────────────────── */
.dash-quick-actions{margin-bottom:24px}
.dash-quick-actions__title{font-size:var(--text-base);font-weight:700;margin:0 0 12px}
.dash-quick-actions__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.dash-quick-action{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 12px;border:1px solid var(--border);border-radius:var(--radius-md);text-decoration:none;color:inherit;text-align:center;transition:all .15s}
.dash-quick-action:hover{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 4%,transparent);transform:translateY(-2px)}
.dash-quick-action__icon{font-size:24px;color:var(--primary)}
.dash-quick-action__label{font-size:var(--text-sm);font-weight:600;color:var(--text)}

/* ── Store URL card (dashboard) ────────────────────────────────────────── */
.store-url-card{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:16px 20px;margin-bottom:24px}
.store-url-card__content{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.store-url-card__icon{font-size:24px;color:var(--primary);flex-shrink:0}
.store-url-card__body{display:flex;flex-direction:column;gap:2px;min-width:0}
.store-url-card__label{font-size:var(--text-xs);color:var(--text3);font-weight:600}
.store-url-card__url{font-size:var(--text-sm);color:var(--primary);font-weight:600;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.store-url-card__url:hover{text-decoration:underline}
.store-url-card__actions{display:flex;gap:8px;flex-shrink:0}

/* ── Onboarding + quick actions mobile responsive ──────────────────────── */
@media(max-width:640px){
  .onboarding-card{padding:16px}
  .onboarding-card__title-row{flex-direction:column;align-items:flex-start;gap:8px}
  .onboarding-card__icon{font-size:24px}
  .onboarding-card__title{font-size:var(--text-base)}
  .onboarding-step{padding:10px 12px;gap:10px}
  .onboarding-step__check{width:28px;height:28px;font-size:14px}
  .onboarding-step__title{font-size:var(--text-xs)}
  .onboarding-step__desc{font-size:var(--text-xs)}
  .onboarding-ready{flex-direction:column;align-items:flex-start;gap:12px;padding:16px}
  .onboarding-ready__icon{font-size:24px}
  .dash-quick-actions__grid{grid-template-columns:repeat(3,1fr);gap:8px}
  .dash-quick-action{padding:12px 8px;gap:6px}
  .dash-quick-action__icon{font-size:20px}
  .dash-quick-action__label{font-size:var(--text-xs)}
  .store-url-card{flex-direction:column;align-items:flex-start;gap:12px}
  .store-url-card__actions{width:100%;justify-content:flex-end}
}

/* ── Chart panels (smooth wave line charts) ────────────────────────────── */
.chart-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr));gap:16px;margin-bottom:24px}
.chart-panel{min-width:0}
.chart-body{padding:16px;min-height:220px;display:grid;align-items:center}
.smooth-line-chart{display:block;width:100%;height:200px;overflow:visible}
.smooth-line-chart line.chart-grid{stroke:var(--border2);stroke-width:.4}
.smooth-line-chart line.chart-grid--base{stroke-width:.6}
.chart-point{opacity:0;transition:opacity .12s,stroke-width .12s;cursor:pointer;stroke-width:2.2;vector-effect:non-scaling-stroke;stroke-linecap:round}
.smooth-line-chart:hover .chart-point,.chart-point:hover{opacity:1}
.chart-point:hover{stroke-width:3.4}
.line-chart{display:flex;align-items:stretch;gap:10px;min-width:0}
.line-chart__plot{flex:1;min-width:0;display:flex;flex-direction:column}
.line-chart__x{display:flex;justify-content:space-between;padding-top:4px;font-size:.66rem;color:var(--text3);font-family:var(--font-num);white-space:nowrap;user-select:none}
.line-chart__y{display:flex;flex-direction:column;justify-content:space-between;padding:20px 0 12px;font-size:.66rem;color:var(--text3);font-family:var(--font-num);text-align:end;white-space:nowrap;user-select:none}
.line-chart__y span{line-height:1.2}
.empty.compact{padding:18px;color:var(--text3);font-size:.85rem;text-align:center}
.chart-footer{display:flex;flex-wrap:wrap;gap:10px;padding:0 16px 16px;color:var(--text2);font-size:.8rem}
.chart-footer span{display:inline-flex;align-items:center;gap:6px}
.chart-footer i{width:10px;height:10px;display:inline-block;border-radius:2px}

/* ── Dashboard widgets (لوحات التطبيقات المالية) ──────────────────────── */
.dash-widgets{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:16px;margin-top:20px}
.dash-panel-body{padding:16px 20px}
.dash-alert-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border)}
.dash-alert-row:first-child{padding-top:0}
.dash-alert-row:last-child{border-bottom:none;padding-bottom:0}
@media(max-width:640px){.dash-widgets{grid-template-columns:1fr;gap:14px;margin-top:16px}}

/* ── Bar breakdowns (replaces tables for categorical data) ─────────────── */
.analytics-bars{display:grid;gap:10px;align-self:stretch}
.analytics-bar-row{display:grid;grid-template-columns:minmax(90px,1fr) minmax(120px,2fr) auto;align-items:center;gap:10px;min-width:0}
.analytics-bar-row span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text2);font-size:.82rem}
.analytics-bar-row div{height:9px;background:var(--surface2);border:1px solid var(--border);overflow:hidden;border-radius:4px}
.analytics-bar-row b{display:block;height:100%;background:var(--primary);border-radius:3px;transition:width .3s}
.analytics-bar-row strong{font-family:var(--font-num);font-size:.82rem;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}

/* ── Central Charts System (donut/radial/vbars + tooltip + states) ─────── */
.chart{position:relative;min-width:0}
.chart-card__head h2{margin:0}
.chart-card__icon{color:var(--primary);margin-inline-end:6px}
.chart-card__desc{margin:2px 0 0;font-size:.78rem;color:var(--text3)}
.chart-card__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* Donut — شرائح بـpathLength=360 وCSS vars للتحكم/الأنيميشن */
.chart-donut{display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap;min-width:0}
.chart-donut__svg{position:relative;flex:none;max-width:100%}
.chart-donut__svg svg{display:block;width:100%;height:auto;overflow:visible}
.chart-donut__track{stroke:var(--surface2);stroke-width:10}
.chart-donut__slice{stroke-width:10;stroke-linecap:butt;stroke-dasharray:var(--seg) var(--gap);stroke-dashoffset:var(--off);transform:rotate(-90deg);transform-origin:center;cursor:pointer;transition:stroke-width .18s ease,opacity .18s ease}
.chart-donut:hover .chart-donut__slice:not(:hover):not(.is-active){opacity:.45}
.chart-donut__slice:hover,.chart-donut__slice:focus-visible,.chart-donut__slice.is-active{stroke-width:13;outline:none}
.chart-donut__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none;gap:2px;padding:0 14%}
.chart-donut__value{font-size:1.3rem;font-weight:800;font-family:var(--font-num);color:var(--text);line-height:1.1;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.chart-donut__label{font-size:.72rem;color:var(--text3)}

/* Legend — عمودي بجانب الرسم، يتحول لسطور على الضيق */
.chart-legend{display:flex;flex-direction:column;gap:6px;min-width:130px;max-height:220px;overflow-y:auto;overscroll-behavior:contain}
.chart-legend__item{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--text2);background:none;border:0;padding:5px 8px;border-radius:var(--radius);cursor:pointer;text-align:start;font-family:inherit;transition:background .15s}
.chart-legend__item:hover,.chart-legend__item.is-active{background:var(--surface2)}
.chart-legend__item i{width:10px;height:10px;border-radius:3px;flex:none}
.chart-legend__item span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chart-legend__item strong{font-family:var(--font-num);font-size:.76rem;color:var(--text)}

/* Vertical bars — HTML flex (ترتيب RTL تلقائي) */
.chart-vbars{display:flex;align-items:stretch;gap:12px;height:200px;min-width:0}
.chart-vbars__col{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:8px}
.chart-vbars__track{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center}
.chart-vbars__bar{display:block;width:min(100%,44px);height:var(--h);border-radius:0;transform-origin:bottom;transition:transform .6s cubic-bezier(.2,.7,.3,1),opacity .15s;transition-delay:calc(var(--i,0)*45ms)}
.chart-vbars__bar:hover,.chart-vbars__bar:focus-visible{opacity:.82;outline:none}
.chart-vbars__label{font-size:.72rem;color:var(--text3);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Grouped column chart — سلاسل زمنية متعددة (بديل lineChart في بطاقات الإحصاءات) */
.chart-vbars--grouped{gap:2px;height:190px}
.chart-vbars--grouped .chart-vbars__col{gap:0}
.chart-vbars__track--group{gap:2px}
.chart-vbars__track--group .chart-vbars__bar{flex:1;width:auto;min-width:1px;max-width:22px;border-radius:0}

/* Radial progress ring */
.chart-radial{position:relative;margin-inline:auto;max-width:100%}
.chart-radial svg{display:block;width:100%;height:auto}
.chart-radial__track{stroke:var(--surface2);stroke-width:9}
.chart-radial__bar{stroke-width:9;stroke-linecap:round;stroke-dasharray:100 100;stroke-dashoffset:calc(100 - var(--p,0));transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset .9s cubic-bezier(.2,.7,.3,1)}
.chart-radial__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none;gap:2px}
.chart-radial__center strong{font-size:1.5rem;font-weight:800;font-family:var(--font-num);color:var(--text)}
.chart-radial__center span{font-size:.75rem;color:var(--text2)}
.chart-radial__center small{font-size:.68rem;color:var(--text3)}

/* Tooltip موحّد (singleton على body) */
.chart-tip{position:fixed;z-index:1200;pointer-events:none;display:flex;flex-direction:column;gap:2px;padding:8px 12px;background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius);box-shadow:0 8px 24px rgba(0,0,0,.12);font-size:.76rem;color:var(--text);max-width:min(280px,80vw)}
.chart-tip b{font-weight:700}
.chart-tip span{color:var(--text2);font-family:var(--font-num)}

/* Loading skeleton */
.chart-skeleton{display:flex;align-items:flex-end;gap:12px;height:200px;padding:8px 4px}
.chart-skeleton span{flex:1;height:var(--h,40%);background:var(--surface2);border-radius:8px 8px 2px 2px;animation:chart-pulse 1.4s ease-in-out infinite}
@keyframes chart-pulse{0%,100%{opacity:.55}50%{opacity:1}}

/* Empty / error states — يحافظان على حجم البطاقة */
.chart-empty,.chart-error{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:180px;padding:24px;text-align:center}
.chart-empty i,.chart-error i{font-size:30px;color:var(--text3)}
.chart-empty p,.chart-error p{margin:0;font-size:.86rem;font-weight:600;color:var(--text2)}
.chart-empty span,.chart-error span{font-size:.74rem;color:var(--text3)}
.chart-error i{color:var(--danger)}
.chart-error .button{margin-top:8px}

/* أنيميشن الدخول — JS يضيف .chart-anim ثم .is-mounted عند الظهور (IO).
   بدون JS تبقى الرسوم بحالتها النهائية (SSR-safe). */
.chart-anim .chart-donut__slice{stroke-dasharray:0 360}
.chart-anim.is-mounted .chart-donut__slice{stroke-dasharray:var(--seg) var(--gap);transition:stroke-dasharray .8s cubic-bezier(.2,.7,.3,1);transition-delay:calc(var(--i,0)*70ms)}
.chart-anim .chart-radial__bar{stroke-dashoffset:100}
.chart-anim.is-mounted .chart-radial__bar{stroke-dashoffset:calc(100 - var(--p,0))}
.chart-anim .chart-vbars__bar{transform:scaleY(0)}
.chart-anim.is-mounted .chart-vbars__bar{transform:scaleY(1)}
.chart-anim .chart-series-line{stroke-dasharray:100;stroke-dashoffset:100}
.chart-anim.is-mounted .chart-series-line{stroke-dashoffset:0;transition:stroke-dashoffset .9s ease}
.chart-anim .chart-series-area{opacity:0}
.chart-anim.is-mounted .chart-series-area{opacity:1;transition:opacity .7s ease .2s}

/* تكيّف مع الضيق — ResizeObserver يضيف .chart--sm + media query احتياطي */
.chart--sm .chart-donut{flex-direction:column;gap:16px}
.chart--sm .chart-legend{width:100%;max-height:150px}
@media(max-width:640px){
  .chart-donut{flex-direction:column}
  .chart-legend{width:100%;max-height:150px}
  .chart-vbars{gap:8px}
  .chart-vbars__label{font-size:.66rem}
}
@media(prefers-reduced-motion:reduce){
  .chart *{transition:none!important;animation:none!important}
}

/* ── Analytics section (dashboard — central, no inline styles) ─────────── */
.analytics-section{display:grid;gap:var(--space-4);margin-top:var(--space-6)}
.analytics-section__title{font-size:var(--text-md);font-weight:700;display:flex;align-items:center;gap:8px;margin:0}
.analytics-section__title i{color:var(--primary)}
.analytics-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.analytics-bar-label{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-sm);font-weight:600;color:var(--text);white-space:nowrap}
.analytics-bar-label i{color:var(--primary)}
.analytics-bar-track{height:8px;border-radius:var(--radius);background:var(--surface2);overflow:hidden}
.analytics-bar-fill{height:100%;border-radius:var(--radius);background:linear-gradient(90deg,var(--primary),color-mix(in srgb,var(--primary) 70%,#a855f7));transition:width .6s ease}
.analytics-bar-value{text-align:end;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.analytics-publish-rate{display:flex;align-items:center;gap:10px;margin-top:16px;padding-top:16px;border-top:1px solid var(--border);flex-wrap:wrap}
.analytics-rate-bar{flex:1;min-width:100px;height:8px;border-radius:var(--radius);background:var(--surface2);overflow:hidden}
.analytics-rate-fill{height:100%;border-radius:var(--radius);background:var(--success)}
.analytics-top-list{display:flex;flex-direction:column;gap:8px}

/* ── Top Viewed Card Grid (mobile-first — image + name + views) ────────── */
.top-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.top-card{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;text-decoration:none;color:inherit;transition:border-color .2s,box-shadow .2s,transform .2s}
.top-card:hover{border-color:var(--primary);box-shadow:0 4px 16px rgba(0,0,0,.08);transform:translateY(-2px)}
.top-card__rank{position:absolute;inset-block-start:8px;inset-inline-start:8px;z-index:2;display:flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 6px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;font-weight:800;font-size:var(--text-xs);font-family:var(--font-num);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.top-card__img{display:block;width:100%;aspect-ratio:1;object-fit:cover;background:var(--surface2);border-bottom:1px solid var(--border)}
.top-card__img--placeholder{display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:2rem}
.top-card__body{display:flex;flex-direction:column;gap:4px;padding:10px 12px 12px;min-width:0}
.top-card__name{font-size:var(--text-sm);font-weight:600;color:var(--text);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em;word-break:break-word}
.top-card__views{display:inline-flex;align-items:center;gap:4px;font-size:var(--text-xs);font-weight:600;color:var(--text3);font-variant-numeric:tabular-nums}
.top-card__views i{font-size:14px;color:var(--primary)}

/* ── Top Viewed Thumbnail List (compact — small image + name + views) ──── */
.top-thumb-grid{display:flex;flex-direction:column;gap:8px}
.top-thumb{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);text-decoration:none;color:inherit;transition:border-color .15s,background .15s}
.top-thumb:hover{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 3%,transparent)}
.top-thumb__img{width:40px;height:40px;flex-shrink:0;object-fit:cover;border-radius:var(--radius-sm);background:var(--surface2);border:1px solid var(--border)}
.top-thumb__img--placeholder{display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:18px}
.top-thumb__body{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;position:relative}
.top-thumb__rank{font-size:var(--text-xs);font-weight:800;color:var(--primary);font-family:var(--font-num)}
.top-thumb__name{font-size:var(--text-sm);font-weight:600;color:var(--text);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top-thumb__views{display:inline-flex;align-items:center;gap:4px;font-size:var(--text-xs);color:var(--text3);font-variant-numeric:tabular-nums}
.top-thumb__views i{font-size:12px;color:var(--primary)}

/* ── Progress Bars without rounded corners (sharp edges) ───────────────── */
.analytics-rate-bar--sharp{border-radius:0!important}
.analytics-rate-fill--sharp{border-radius:0!important}
.analytics-bar-row--sharp div{border-radius:0!important}
.analytics-bar-row--sharp b{border-radius:0!important}
@media(min-width:481px){.top-card-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}}
@media(min-width:769px){.top-card-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}}
@media(min-width:1024px){.top-card-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}}
@media(min-width:1280px){.top-card-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}}
@media(max-width:768px){
  .analytics-grid{grid-template-columns:1fr}
  .analytics-bar-row{grid-template-columns:110px 1fr 32px;gap:8px}
}

/* ── Color picker system (shared: admin /sites/site + tenant /app/branding) ── */
.colors-section-layout{display:grid;grid-template-columns:1.2fr 0.8fr;gap:24px;align-items:start}
.colors-inputs-column{display:flex;flex-direction:column;gap:16px}
.colors-group-card{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:16px}
.colors-group-title{font-size:var(--text-xs);font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;margin:0 0 12px;border-bottom:1px solid var(--border);padding-bottom:6px}
.colors-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.color-field{display:flex;flex-direction:column;gap:4px}
.color-field label{font-size:var(--text-xs)!important;font-weight:500;color:var(--text2);margin-bottom:2px}
.color-picker-input{width:100%;height:44px;padding:0;margin:0;border:1px solid var(--border);border-radius:0;cursor:pointer;flex-shrink:0;background:transparent;-webkit-appearance:none;appearance:none}
.color-picker-input::-webkit-color-swatch-wrapper{padding:0;margin:0;border:none}
.color-picker-input::-webkit-color-swatch{border:none;border-radius:0;width:100%;height:100%}
.color-picker-input::-moz-color-swatch{border:none;border-radius:0;width:100%;height:100%}
.color-picker-input::-moz-focus-inner{border:none;padding:0}
.color-text-input{width:100%;height:32px!important;padding:0 10px!important;font-size:var(--text-xs)!important;font-family:'Courier New',monospace;font-weight:600;letter-spacing:.5px;border:1px solid var(--border)!important;border-top:none!important;border-radius:0!important;background:var(--surface)!important;box-shadow:none!important;text-align:center;text-transform:uppercase;color:var(--text)!important;outline:none;cursor:copy;transition:border-color .15s,background .15s}
.color-text-input:focus{border-color:var(--primary)!important}
.color-text-input.copied{background:var(--success)!important;color:#fff!important}
.color-field__reset{position:absolute;inset-inline-end:4px;top:4px;background:var(--surface);border:1px solid var(--border);border-radius:4px;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text3);font-size:12px;padding:0;transition:color .15s,border-color .15s}
.color-field__reset:hover{color:var(--danger);border-color:var(--danger)}
.color-field{position:relative}

/* Live preview panel (shared) */
.live-preview-panel{position:sticky;top:24px;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:16px;box-shadow:var(--shadow-sm)}

/* Visual assets row (logo/favicon/font — shared) */
.visual-assets-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.visual-asset-card{display:flex;flex-direction:column;gap:8px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:16px}
.visual-asset-card h4{margin:0;font-size:var(--text-sm);font-weight:600;color:var(--text)}
.visual-asset-card .hint{margin:0 0 4px;font-size:var(--text-xs);color:var(--text3)}

/* Branding badges (tenant inheritance status) */
.branding-badge{font-size:11px;padding:2px 8px;border-radius:6px;font-weight:600;display:inline-flex;align-items:center;gap:4px}
.branding-badge--inherit{background:color-mix(in srgb,var(--primary) 10%,transparent);color:var(--primary)}
.branding-badge--custom{background:color-mix(in srgb,var(--success) 12%,transparent);color:var(--success)}
@media(max-width:1023px){
  .colors-section-layout{grid-template-columns:1fr}
  .visual-assets-row{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .visual-assets-row{grid-template-columns:1fr}
}

/* ── Google services subheadings (admin /sites/site) ──────────────────── */
.google-service-group{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:16px}
.google-service-title{font-size:var(--text-sm);font-weight:600;color:var(--text);margin:0 0 10px;display:flex;align-items:center;gap:6px}

/* ── Email preview styling (admin /sites/site) ────────────────────────── */
.site-settings-form .email-preview-panel{background:var(--bg)}
.site-settings-form .email-preview-toolbar{background:var(--surface);border-bottom:1px solid var(--border);padding:12px 16px}
.site-settings-form .email-preview-toolbar button{background:var(--surface2);border:1px solid var(--border);color:var(--text2);border-radius:6px;font-weight:500}
.site-settings-form .email-preview-toolbar button.active,
.site-settings-form .email-preview-toolbar button:hover{background:var(--primary);color:#fff;border-color:var(--primary)}

/* ── List panel (compact list replaces data tables) ────────────────────── */
.list-panel__body{display:flex;flex-direction:column}
.list-panel__row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border);min-width:0}
.list-panel__row:last-child{border-bottom:0}
.list-panel__icon{font-size:20px;color:var(--primary);flex-shrink:0;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);background:color-mix(in srgb,var(--primary) 10%,transparent)}
.list-panel__content{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.list-panel__title{font-size:var(--text-sm);font-weight:600;color:var(--text);text-decoration:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list-panel__title:hover{color:var(--primary)}
.list-panel__sub{font-size:var(--text-xs);color:var(--text3);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media(max-width:640px){
  .kpi-row{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .chart-grid{grid-template-columns:1fr!important;gap:12px!important}
  .chart-body{min-height:180px;padding:12px}
}

/* ── Amount display ───────────────────────────────────────── */
.amount{font-family:var(--font-num);font-weight:600;font-variant-numeric:tabular-nums}

/* ── Read-Only Mode (is-disabled-readonly يُضاف client-side عبر app.js) ── */
.is-disabled-readonly{opacity:0.6!important;cursor:not-allowed!important;pointer-events:auto!important}

/* ── Banner System (النظام الموحّد الوحيد لكل التنبيهات/البطاقات) ── */
/* المصدر: packages/ui/src/views/banners.view.js — لا inline styles في أي مكان آخر */
/* banner هو الكلاس الموحّد الوحيد — notice aliases للتوافق الخلفي (محتوى قديم مخزّن) */
.banner,.notice{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);margin-bottom:16px;flex-wrap:wrap;font-size:var(--text-sm);line-height:1.6}
.banner--info,.notice--info,.notice.info{background:var(--color-primary-subtle,rgba(31,117,254,.08));border-color:var(--color-primary-border,rgba(31,117,254,.3));color:var(--color-primary,var(--primary))}
.banner--success,.notice--success,.notice.success{background:var(--color-success-subtle,#e6f9ee);border-color:var(--color-success-border,#abf5d1);color:var(--color-success,var(--success))}
.banner--warning,.notice--warning,.notice.warning{background:var(--color-warning-subtle,#fffbeb);border-color:var(--color-warning-border,#fde68a);color:var(--color-warning,var(--warn))}
.banner--danger,.notice--danger,.notice--error,.notice.error{background:var(--color-danger-subtle,#fef2f2);border-color:var(--color-danger-border,#ffbdad);color:var(--color-danger,var(--danger))}
.banner__icon{flex-shrink:0;font-size:22px;display:flex;align-items:center;justify-content:center}
.banner__content{flex:1;min-width:0}
.banner__title{font-weight:700;font-size:var(--text-sm);margin:0 0 4px;display:block}
.banner__desc{font-size:var(--text-xs);margin:0;line-height:1.5;opacity:.9}
.banner__actions{display:flex;gap:8px;flex-shrink:0;flex-wrap:wrap;align-items:center}
.banner__btn{flex-shrink:0;white-space:nowrap;text-decoration:none!important}
/* variant aliases — notice بدون modifier = success (توافق خلفي) */
.notice:not(.notice--info):not(.notice--success):not(.notice--warning):not(.notice--danger):not(.notice--error):not(.notice--flush):not(.notice--lg):not(.notice--wide):not(.info):not(.success):not(.error){background:var(--color-success-subtle,#e6f9ee);border-color:var(--color-success-border,#abf5d1);color:var(--color-success,var(--success))}
/* spacing modifiers — notice--* aliases محفوظة للتوافق الخلفي */
.banner--flush,.notice--flush{margin-bottom:0}
.banner--lg,.notice--lg{margin-bottom:24px}
.banner--wide,.notice--wide{margin:0 auto 24px}
.banner--spaced{margin-top:16px}
/* بانر شامل (full-width في أعلى الصفحة) */
.banner--full{margin:0 0 24px 0;border-radius:0;border-inline:0;border-top:0}
/* صفحة كاملة (full-page مثل suspended-page) */
.banner--page{max-width:680px;margin:48px auto;text-align:center;flex-direction:column;align-items:center;padding:44px 32px;box-shadow:0 10px 30px rgba(0,0,0,.05)}
.banner--page .banner__icon{width:72px;height:72px;border-radius:50%;background:var(--color-danger-subtle,rgba(220,38,38,.1));font-size:36px}
.banner--page .banner__title{font-size:22px;font-weight:800;margin:0 0 12px}
.banner--page .banner__desc{font-size:15px;line-height:1.6;max-width:520px;margin-inline:auto}
.banner--page .banner__actions{justify-content:center}
/* Dark mode — ظلال أغمق + box-shadow أقوى */
[data-theme="dark"] .banner--page,[data-theme="dark"] .banner--full{box-shadow:0 10px 30px rgba(0,0,0,.5)}
[data-theme="dark"] .banner--page .banner__icon{background:rgba(239,68,68,.18)}
/* Responsive — mobile optimizations */
@media(max-width:640px){.banner,.notice{flex-direction:column;align-items:stretch;padding:10px 14px;gap:10px}.banner__actions{width:100%}.banner__btn{width:100%;text-align:center}.banner--page{margin:24px auto;padding:32px 20px}.banner--page .banner__icon{width:56px;height:56px;font-size:28px}.banner--page .banner__title{font-size:18px}.banner--page .banner__desc{font-size:14px}}
@media(max-width:480px){.banner,.notice{padding:8px 12px;font-size:var(--text-xs)}.banner--page{padding:24px 16px;margin:16px auto}}

/* ── PWA Install Modal (نافذة منبثقة مركزية — ستايل مركزي موحّد) ── */
/* تُفعّل client-side فقط من app-pwa.js عند توفر beforeinstallprompt أو iOS.
   تستخدم نفس CSS variables المركزية — لا ألوان hardcoded.
   تُفتح كـmodal فوق backdrop مع focus trap + escape + click outside. */
.pwa-install-modal{position:fixed;inset:0;z-index:var(--z-modal,1100);display:none;align-items:center;justify-content:center;padding:24px}
.pwa-install-modal[hidden]{display:none}
.pwa-install-modal:not([hidden]){display:flex}
.pwa-install-modal__backdrop{position:absolute;inset:0;background:rgba(15,23,42,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:pwa-modal-fade .2s ease-out}
.pwa-install-modal__panel{position:relative;display:flex;flex-direction:column;width:min(440px,100%);max-height:min(90vh,100%);background:var(--surface,#fff);border:1px solid var(--border,#e2e8f0);border-radius:var(--radius-lg,16px);box-shadow:var(--shadow-xl,0 20px 25px -5px rgba(15,23,42,.1));overflow:hidden;animation:pwa-modal-pop .25s cubic-bezier(0.16,1,0.3,1);padding:32px 28px 24px;text-align:center}
.pwa-install-modal__close{position:absolute;inset-block-start:12px;inset-inline-end:12px;display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:1px solid var(--border,#e2e8f0);background:var(--surface2,#f8fafc);color:var(--text2,#475569);cursor:pointer;border-radius:var(--radius-sm,8px);transition:background .15s,color .15s,border-color .15s;font-size:18px;font-weight:600;line-height:1}
.pwa-install-modal__close:hover{background:var(--color-danger-subtle,#fee2e2);color:var(--danger,#ef4444);border-color:var(--color-danger-border,#ffbdad)}
.pwa-install-modal__close:focus-visible{outline:2px solid var(--primary,#1F75FE);outline-offset:2px}
.pwa-install-modal__icon{flex-shrink:0;width:64px;height:64px;border-radius:var(--radius-full,9999px);background:var(--primary-ghost,rgba(31,117,254,.10));color:var(--primary,var(--color-primary));display:flex;align-items:center;justify-content:center;font-size:32px;margin:0 auto 16px}
.pwa-install-modal__content{flex:1;min-width:0;margin-bottom:20px}
.pwa-install-modal__title{display:block;font-weight:700;font-size:var(--text-lg,18px);color:var(--text,#1e293b);margin:0 0 8px}
.pwa-install-modal__desc{display:block;font-size:var(--text-sm,14px);color:var(--text2,#475569);margin:0;line-height:1.6}
.pwa-install-modal__actions{display:flex;gap:10px;flex-shrink:0;align-items:center;justify-content:center}
.pwa-install-modal__btn{white-space:nowrap}
@keyframes pwa-modal-fade{from{opacity:0}to{opacity:1}}
@keyframes pwa-modal-pop{from{opacity:0;transform:scale(0.96) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}
/* Mobile — panel يأخذ عرض كامل من الأسفل (bottom-sheet style) */
@media(max-width:640px){.pwa-install-modal{align-items:flex-end;padding:0}.pwa-install-modal__panel{width:100%!important;max-height:92vh!important;border-radius:var(--radius-lg,16px) var(--radius-lg,16px) 0 0!important;animation:pwa-modal-slide-up .25s cubic-bezier(0.16,1,0.3,1);padding:24px 20px 20px}}
@keyframes pwa-modal-slide-up{from{transform:translateY(100%)}to{transform:translateY(0)}}
/* Dark mode — ظل أغمق */
[data-theme="dark"] .pwa-install-modal__panel,[data-theme="dark"]:not([data-theme="light"]) .pwa-install-modal__panel{background:var(--surface,#1e293b);border-color:var(--border,#334155);box-shadow:0 20px 25px -5px rgba(0,0,0,.5)}
[data-theme="dark"] .pwa-install-modal__close,[data-theme="dark"]:not([data-theme="light"]) .pwa-install-modal__close{background:var(--surface2,#1e293b);border-color:var(--border,#334155);color:var(--text2,#94a3b8)}
[data-theme="dark"] .pwa-install-modal__close:hover,[data-theme="dark"]:not([data-theme="light"]) .pwa-install-modal__close:hover{background:var(--color-danger-subtle,#7f1d1d);color:var(--danger,#f87171);border-color:var(--color-danger-border,#b91c1c)}

/* ── Billing Hero Card (بطاقة حالة الاشتراك المدمجة — شريط أفقي ملوّن حسب الحالة) ── */
/* البطاقة تتميز بصرياً حسب حالة الاشتراك: أخضر=فعّال، كهرماني=تجريبي، أحمر=متأخر/معلّق، أزرق=محيطي */
.billing-hero-card{background:var(--surface);border:1px solid var(--border);border-left-width:3px;border-radius:var(--radius-lg);padding:12px 16px;margin-bottom:20px;box-shadow:var(--shadow-sm);transition:background .2s,border-color .2s}
.billing-hero-card--success{background:var(--color-success-subtle);border-color:var(--color-success-border,#abf5d1);border-left-color:var(--color-success)}
.billing-hero-card--warn{background:var(--color-warning-subtle);border-color:var(--color-warning-border,#f8d97e);border-left-color:var(--color-warning)}
.billing-hero-card--danger{background:var(--color-danger-subtle);border-color:var(--color-danger-border,#ffbdad);border-left-color:var(--color-danger)}
.billing-hero-card--info{background:var(--primary-ghost);border-color:var(--color-primary-border,#adccff);border-left-color:var(--color-primary)}
.billing-hero__bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.billing-hero__info{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.billing-hero__badge{font-size:var(--text-xs);padding:3px 10px;font-weight:700;white-space:nowrap;background:var(--surface);border:1px solid var(--border)}
.billing-hero-card--success .billing-hero__badge{color:var(--color-success);border-color:var(--color-success-border,#abf5d1)}
.billing-hero-card--warn .billing-hero__badge{color:var(--color-warning);border-color:var(--color-warning-border,#f8d97e)}
.billing-hero-card--danger .billing-hero__badge{color:var(--color-danger);border-color:var(--color-danger-border,#ffbdad)}
.billing-hero-card--info .billing-hero__badge{color:var(--color-primary);border-color:var(--color-primary-border,#adccff)}
.billing-hero__plan{font-size:var(--text-sm);color:var(--text);font-weight:700;white-space:nowrap}
.billing-hero__chip{display:inline-flex;align-items:center;gap:4px;font-size:var(--text-xs);color:var(--text2);white-space:nowrap}
.billing-hero__chip i{font-size:14px}
.billing-hero__action{text-decoration:none;font-size:var(--text-xs);display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:var(--radius-sm);background:var(--surface);color:var(--text);border:1px solid var(--border);font-weight:600;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.billing-hero__action:hover{background:var(--primary,var(--color-primary));color:var(--color-text-on-primary,#fff);border-color:var(--primary,var(--color-primary))}
.billing-hero__cancel-notice{margin-top:8px;font-size:var(--text-xs);color:var(--warn,var(--color-warning));font-weight:600;display:flex;align-items:center;gap:4px}
.billing-hero__cancel-notice i{font-size:14px}

/* ── Suspended Page Card: موحّد داخل banner--page أعلاه (dead code removed) ── */

/* ── Data Table Form Controls — توحيد ستايل الحقول داخل الجداول ── */
/* يطبق نفس ستايل form-control على أي input/select/textarea داخل .data-table
   حتى لو لم يحمل class="form-control" صراحةً (defensive fallback).
   أنماط الجداول الأساسية في table.styles.js — هنا فقط الـrefinements الإضافية. */
.data-table input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.data-table select,
.data-table textarea{
  height:var(--control-h);
  padding:0 var(--control-padding-x);
  border-radius:var(--control-radius);
  font-size:var(--control-font-size);
  line-height:normal;
}
.data-table textarea{
  height:auto;
  min-height:calc(var(--control-h) * 2.5);
  padding:10px var(--control-padding-x);
  line-height:1.5;
  resize:vertical;
}
.data-table input:focus,
.data-table select:focus,
.data-table textarea:focus{
  border-color:var(--color-primary);
  box-shadow:0 0 0 2px var(--color-primary-subtle);
}

/* ── Form Field — ستايل مركزي للحقول داخل .form-field ────────── */
/* يطبق نفس ستايل form-control على input/select/textarea داخل .form-field
   حتى لو لم يحمل class="form-control" صراحةً. */
.form-field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.form-field > .label{font-size:var(--text-sm);font-weight:600;color:var(--color-text-subtle);user-select:none}
.form-field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.form-field select,
.form-field textarea{
  width:100%;
  height:var(--control-h);
  padding:0 var(--control-padding-x);
  border:1px solid var(--color-border-strong);
  border-radius:var(--control-radius);
  background:var(--color-surface);
  color:var(--color-text);
  font-size:var(--control-font-size);
  font-family:inherit;
  line-height:normal;
  box-sizing:border-box;
  outline:none;
  transition:border-color 0.2s ease,box-shadow 0.2s ease;
}
.form-field textarea{
  height:auto;
  min-height:calc(var(--control-h) * 2.5);
  padding:10px var(--control-padding-x);
  line-height:1.5;
  resize:vertical;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  border-color:var(--color-primary);
  box-shadow:0 0 0 2px var(--color-primary-subtle);
}
.form-field input::placeholder,
.form-field textarea::placeholder{color:var(--color-text-muted)}
[data-theme="dark"] .form-field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
[data-theme="dark"] .form-field select,
[data-theme="dark"] .form-field textarea{
  background:var(--surface2);
  color:var(--text);
  border-color:var(--border2);
}

/* ── Unified Page Container System ────────────────────────── */
.ui-page{
  max-width:var(--page-width,1200px);
  margin:0 auto;
  padding:0 var(--space-page);
  width:100%;
  box-sizing:border-box;
}
.ui-page--narrow{--page-width:var(--hp-cards-max,1100px)}
.ui-page--medium{--page-width:var(--hp-cards-max,1100px)}
.ui-page--padded{padding:var(--space-page,20px) 0}
.ui-page--wide{--page-width:var(--hp-cards-max,1100px)}
.ui-page--prose{--page-width:var(--hp-cards-max,1100px)}

/* ── Prose (legal/text pages) ── */
.ui-prose{font-size:var(--text-md,1rem);line-height:1.9;color:var(--color-text,var(--text,#1e293b))}
.ui-prose h1{font-size:clamp(1.5rem,4vw,2rem);font-weight:800;margin:0 0 var(--space-5,20px);color:var(--color-text,var(--text));line-height:1.3}
.ui-prose h2{font-size:var(--text-lg,1.125rem);font-weight:700;margin:var(--space-6,24px) 0 var(--space-3,12px);color:var(--color-text,var(--text));padding-bottom:8px;border-bottom:1px solid var(--color-border,var(--border,#e2e8f0))}
.ui-prose h3{font-size:var(--text-md,1rem);font-weight:700;margin:var(--space-5,20px) 0 var(--space-2,8px);color:var(--color-text,var(--text))}
.ui-prose p{margin:0 0 var(--space-4,16px);line-height:1.85}
.ui-prose a{color:var(--color-primary,var(--primary,#1f75fe));text-decoration:underline}
.ui-prose a:hover{text-decoration:none;opacity:0.8}
.ui-prose ul,.ui-prose ol{margin:0 0 var(--space-4,16px);padding-inline-start:var(--space-5,20px)}
.ui-prose li{margin-bottom:var(--space-2,8px);line-height:1.8}
.ui-prose strong{font-weight:700;color:var(--color-text,var(--text))}




/* ── Dashboard Shell ──────────────────────────────────────── */
@media(min-width:1024px){.dashboard-shell,.shell{display:grid;grid-template-columns:var(--sidebar-w) 1fr;grid-template-rows:1fr;min-height:100vh}.dashboard-shell.has-filter-aside,.shell.has-filter-aside{grid-template-columns:var(--sidebar-w) 1fr var(--filter-drawer-w,288px)}}@media(min-width:769px) and (max-width:1023px){.dashboard-shell,.shell{display:grid;grid-template-columns:var(--sidebar-w) 1fr;grid-template-rows:1fr;min-height:100vh}}@media(max-width:768px){.dashboard-shell,.shell{min-height:100vh}}
.sidebar{position:fixed;inset-inline-start:0;top:0;bottom:0;width:var(--sidebar-w);background:var(--surface);border-inline-end:1px solid var(--border);display:flex;flex-direction:column;overflow:visible;z-index:var(--z-sidebar)}
.nav{overflow-y:auto}
.sidebar__header{height:64px;padding:0 8px;border-bottom:1px solid var(--border,var(--color-border,#e2e8f0));display:flex;align-items:center;flex-shrink:0;box-sizing:border-box}
.brand{display:flex;align-items:center;gap:10px;width:100%;padding:6px !important;box-sizing:border-box}

.brand-mark{display:grid;width:28px;height:28px;place-items:center;background:var(--primary,var(--color-primary,#1F75FE));color:#fff;font-weight:700;font-size:var(--text-xs,12px);border-radius:var(--radius-sm,0);flex-shrink:0;box-sizing:border-box}
.brand-logo{width:28px;height:28px;object-fit:contain;border-radius:var(--radius-sm,0);flex-shrink:0;display:block}
.brand-logo--default{width:28px;height:28px}
.brand-logo--svg{background:transparent;padding:0;box-sizing:border-box}
[data-theme="dark"] .brand-logo--svg{background:transparent}
.brand-name{color:var(--text);font-weight:600;font-size:var(--text-base);transition:opacity 0.15s}
.nav{padding:8px;display:flex;flex-direction:column;gap:2px;flex:1;overflow-y:auto}
/* السايدبار: إخفاء السكرول بار عمودياً وأفقياً في كل عناصره مع بقاء التمرير */
.sidebar,.sidebar *{scrollbar-width:none;-ms-overflow-style:none}
.sidebar::-webkit-scrollbar,.sidebar *::-webkit-scrollbar{display:none;width:0;height:0}
.nav a{display:flex;align-items:center;gap:10px;min-height:38px;padding:0 12px;color:var(--text2);text-decoration:none;font-size:var(--text-sm);border-radius:var(--radius-sm,0);position:relative}
.nav a:hover{background:var(--nav-accent-bg,var(--primary-ghost));color:var(--nav-accent,var(--primary))}
.nav a[aria-current="page"]{background:var(--nav-accent-bg,var(--primary-ghost));color:var(--nav-accent,var(--primary));font-weight:600}

.nav-label{flex:1}
.nav-icon{font-size:16px;flex-shrink:0;opacity:.75;display:inline-flex;align-items:center;vertical-align:middle;color:var(--nav-accent,var(--primary,var(--color-primary,#1F75FE)));font-weight:400}
.nav a:hover .nav-icon,.nav a[aria-current="page"] .nav-icon{opacity:.75}

/* ── Nav Accordion Groups (قوائم قابلة للطي) ──────────────────────────────── */
.nav-group{display:flex;flex-direction:column;flex-shrink:0}
.nav-group-header{display:flex;align-items:center;gap:10px;width:100%;min-height:38px;padding:0 12px;border:0;background:transparent;color:var(--text2);font:inherit;font-size:var(--text-sm);font-weight:600;text-align:start;cursor:pointer;border-radius:var(--radius-sm,0);transition:background .15s,color .15s;position:relative}
.nav-group-header:hover{background:var(--surface2);color:var(--text)}
.nav-group-header .nav-icon{font-size:16px;opacity:.7}
.nav-group-header:hover .nav-icon{opacity:.85}
.nav-group-caret{font-size:18px;flex-shrink:0;margin-inline-start:auto;color:var(--text3);transition:transform .2s ease;opacity:.6}
.nav-group[aria-expanded="true"] .nav-group-caret{transform:rotate(180deg)}
.nav-group-items{display:flex;flex-direction:column;gap:1px;overflow:hidden;max-height:0;transition:max-height .25s ease;padding-top:0;padding-bottom:0}
.nav-group[aria-expanded="true"] .nav-group-items{max-height:600px;padding-top:2px;padding-bottom:2px}
.nav-group-items .nav-link{display:flex;align-items:center;gap:10px;min-height:36px;padding:0 12px 0 32px;color:var(--text2);text-decoration:none;font-size:var(--text-sm);border-radius:var(--radius-sm,0);position:relative;transition:background .15s,color .15s}
.nav-group-items .nav-link:hover{background:var(--nav-accent-bg,var(--primary-ghost));color:var(--nav-accent,var(--primary))}
.nav-group-items .nav-link[aria-current="page"]{background:var(--nav-accent-bg,var(--primary-ghost));color:var(--nav-accent,var(--primary));font-weight:600}
.nav-group-items .nav-link .nav-icon{font-size:15px;opacity:.65}
.nav-group-items .nav-link:hover .nav-icon,.nav-group-items .nav-link[aria-current="page"] .nav-icon{opacity:.85}
/* الموبايل: عناصر الـaccordion أكبر للمس */
@media(max-width:768px){
  .nav-group-header{min-height:48px;padding-inline:16px;font-size:var(--text-base,14px)}
  .nav-group-items .nav-link{min-height:44px;padding-inline-start:40px;font-size:var(--text-base,14px)}
}
.nav a.nav-item--trash,.nav--trash a{color:var(--danger,var(--color-danger));}
.nav a.nav-item--trash:hover,.nav a.nav-item--trash:focus,.nav--trash a:hover,.nav--trash a:focus{background:var(--color-danger-subtle,rgba(239,68,68,.12))!important;color:var(--danger,var(--color-danger))}
.nav a.nav-item--trash[aria-current="page"],.nav--trash a[aria-current="page"]{background:var(--color-danger-subtle,rgba(239,68,68,.12))!important;color:var(--danger,var(--color-danger));font-weight:600}

/* ── "معاينة المعرض" nav link — opens public store in new tab ── */
.nav a.nav-item--preview{color:var(--success,#10b981);font-weight:600}
.nav a.nav-item--preview:hover{background:color-mix(in srgb,var(--success,#10b981) 10%,transparent)!important;color:var(--success,#10b981)}
.nav a.nav-item--preview .nav-icon{color:var(--success,#10b981);opacity:.9}

@media(min-width:769px){.main{margin-inline-start:0;grid-column:2;grid-row:1;min-width:0;display:flex;flex-direction:column;min-height:100vh;transition:none}}@media(max-width:768px){.main{margin-inline-start:0;min-width:0;display:flex;flex-direction:column;min-height:100vh}}

/* ── Topbar ───────────────────────────────────────────────── */
.topbar{position:sticky;top:0;z-index:calc(var(--z-sidebar) - 1);height:var(--topbar-h);display:flex;align-items:center;gap:12px;padding:0 24px;background:var(--surface);border-bottom:1px solid var(--border);flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.topbar::-webkit-scrollbar{height:4px}
.topbar::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.topbar::-webkit-scrollbar-track{background:transparent}
.topbar__end{margin-inline-start:auto;display:flex;align-items:center;gap:8px}
.topbar-center{display:none}
.topbar-actions{display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:thin}
.topbar-actions--tool{flex:1 1 auto;justify-content:flex-start}
.topbar-actions .toolbar-btn{flex:0 0 auto;white-space:nowrap}
.topbar-actions .ui-tool-badge-value{flex:0 0 auto}
.topbar-actions .ui-pr-toolbar-sep{flex:0 0 auto;width:1px;height:24px;background:var(--color-border);margin:0 2px}
@media(max-width:768px){
  .topbar-actions{justify-content:flex-start;gap:6px}
  .topbar-actions .toolbar-btn span{display:none}
  .topbar-actions .ui-pr-toolbar-sep{display:none}
  /* الزر الأساسي للأداة يحتفظ بنصه في التوبار (زر واحد فقط = مساحة كافية) */
  .topbar-actions--tool>.ui-tool-actions>.primary-button span{display:inline}
}
.topbar-brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--color-text)}
.topbar-brand .brand-name{font-weight:600;font-size:var(--text-base)}
.topbar-brand .brand-mark{width:24px;height:24px;font-size:var(--text-xs)}
.topbar-brand img.brand-logo{height:26px}
.topbar-brand--mobile{display:none}
.topbar-search{position:relative;flex:1;display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;height:36px;max-width:480px}
.topbar-search--trigger{cursor:pointer;text-align:start;font:inherit;user-select:none;-webkit-user-select:none;color:inherit;transition:border-color .15s,background-color .15s}
.topbar-search--trigger:hover{border-color:var(--primary);background:var(--surface2,var(--bg))}
.topbar-search--trigger:focus-visible{outline:2px solid var(--primary);outline-offset:1px}
.topbar-search__icon{color:var(--text3);flex-shrink:0}
.topbar-search__placeholder{flex:1;color:var(--text3);font-size:var(--text-sm,13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-search__kbd{font-size:10px;color:var(--text3);background:var(--surface,#fff);border:1px solid var(--border);padding:2px 6px;border-radius:var(--radius-xs,4px);flex-shrink:0;font-family:inherit;line-height:1}
@media(max-width:640px){.topbar-search__kbd{display:none}}
/* Toggle دورة الفوترة — مركزي فوق شبكة الخطط، بطاقة واحدة لكل خطة */
/* الستايل المركزي: بدون حواف دائرية (radius-full → radius-md)، نفس شكل أزرار الـUI */
.billing-cycle-toggle{display:inline-flex;gap:4px;padding:5px;margin:0 auto 28px;background:var(--surface2,var(--color-surface-2,#f8fafc));border:1px solid var(--border);border-radius:var(--radius-md,10px);box-shadow:inset 0 1px 2px rgba(0,0,0,0.04)}
.billing-cycle-toggle__btn{min-width:104px;height:40px;padding:0 22px;border:0;border-radius:var(--radius-md,8px);background:transparent;color:var(--text2);font:inherit;font-size:var(--text-sm);font-weight:600;cursor:pointer;transition:background .18s,color .18s,box-shadow .18s}
.billing-cycle-toggle__btn:hover{color:var(--text)}
.billing-cycle-toggle__btn.is-active{background:var(--primary);color:#fff;box-shadow:0 4px 12px color-mix(in srgb,var(--primary) 30%,transparent)}
.billing-cycle-toggle__btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
/* ── Filter Drawer ─────────────────────────────────────── */
@media(min-width:1024px){.filter-drawer{position:fixed;top:0;bottom:0;inset-inline-start:auto;inset-inline-end:0;height:100vh;height:100dvh;z-index:999;transform:none;width:var(--filter-drawer-w,288px);overflow:visible;background:var(--surface);border-inline-start:1px solid var(--border);flex-shrink:0;display:flex;flex-direction:column;transition:width 0.28s cubic-bezier(0.4,0,0.2,1);box-sizing:border-box}.filter-drawer__close{display:none}.filter-drawer-backdrop{display:none!important}}@media(min-width:769px) and (max-width:1023px){.filter-drawer{position:fixed;top:0;bottom:0;inset-inline-start:auto;inset-inline-end:0;z-index:499;width:288px;min-width:0;overflow:visible;background:var(--surface);border-inline-start:1px solid var(--border);transform:translateX(-100%);visibility:hidden;transition:transform 0.28s cubic-bezier(0.4,0,0.2,1),visibility 0.28s;flex-shrink:0;display:flex;flex-direction:column}.filter-drawer.is-open{transform:translateX(0);visibility:visible}}@media(max-width:768px){.filter-drawer{position:fixed;top:0;bottom:0;inset-inline-start:auto;inset-inline-end:0;z-index:499;width:288px;min-width:0;overflow:visible;background:var(--surface);border-inline-start:1px solid var(--border);transform:translateX(-100%);visibility:hidden;transition:transform 0.28s cubic-bezier(0.4,0,0.2,1),visibility 0.28s;flex-shrink:0;display:flex;flex-direction:column}.filter-drawer.is-open{transform:translateX(0);visibility:visible}}
.filter-drawer__header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 20px;height:var(--topbar-h,64px);border-bottom:1px solid var(--border);font-weight:600;font-size:var(--text-sm);color:var(--text);flex-shrink:0;white-space:nowrap;background:var(--surface);min-width:0;overflow:hidden;text-overflow:ellipsis}
.filter-drawer__header-end{display:flex;align-items:center;gap:8px;flex-shrink:0}
.filter-drawer__close{display:none}
/* الجسم يتمرر وحده؛ التذييل يبقى ملتصقاً بحافة الصفحة السفلى */
.filter-drawer__body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:20px}
@media(min-width:769px){.filter-drawer,.filter-drawer__body,.topbar-filters-wrapper,.topbar-filters{scrollbar-width:none!important;-ms-overflow-style:none!important}.filter-drawer::-webkit-scrollbar,.filter-drawer__body::-webkit-scrollbar,.topbar-filters-wrapper::-webkit-scrollbar,.topbar-filters::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}}
/* التذييل السفلي الأيسر — نفس هندسة .sidebar-account (أسفل اليمين) و .action-toolbar تماماً:
   64px، حد علوي، flex-shrink:0، ملتصق بأسفل عمود الدرج ويلتقي مع شريط الإجراءات.
   min-height يحسب الـsafe-area بدل height الثابتة — وإلا ابتلعتها padding-bottom
   داخل الـ64px في الـPWA فانكمش صندوق المحتوى (~29px) وخُرجت الأزرار خارج حواف
   الشريط — نفس علة action-toolbar المحلولة سابقاً. */
.filter-drawer__bottom{position:relative;margin-top:auto;flex-shrink:0;border-top:1px solid var(--border,var(--color-border,#e2e8f0));min-height:calc(var(--bottom-h,64px) + env(safe-area-inset-bottom,0));padding:0 12px;display:flex;align-items:center;gap:8px;box-sizing:border-box;background:var(--surface);z-index:2;padding-bottom:env(safe-area-inset-bottom,0)}
.filter-drawer__bottom>*{flex:1 1 50%;height:38px;display:inline-flex;align-items:center;justify-content:center;text-align:center;margin:0;font-size:var(--text-sm);font-weight:500;white-space:nowrap;box-sizing:border-box}
/* Filter pill base styles */
.topbar-filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0}
.filter-pill{display:flex;align-items:center;gap:6px;background:var(--color-surface-2);border:1px solid var(--color-border);padding:0 12px;border-radius:var(--radius-sm);font-size:var(--text-xs);color:var(--color-text);transition:0.2s;white-space:nowrap;margin:0;height:32px;box-sizing:border-box;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.filter-pill:hover,.filter-pill:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 1px var(--color-primary);background:var(--color-surface)}
.filter-pill select,.filter-pill input{border:none;background:transparent;outline:none;font-size:inherit;font-family:inherit!important;color:inherit;cursor:pointer;padding:0;height:100%;min-width:60px;max-width:120px}
.filter-pill select option, select option{font-family:inherit!important;background:var(--surface);color:var(--text)}
.filter-pill input[type="search"],.filter-pill input[type="text"],.filter-pill input[type="date"]{min-width:130px}
.filter-pill span.label,.filter-pill__label{color:var(--color-text-muted);font-weight:500;user-select:none}
.filter-control{display:flex;align-items:center;gap:6px;background:var(--color-surface-2);border:1px solid var(--color-border);padding:0 12px;border-radius:var(--radius-sm);font-size:var(--text-xs);color:var(--color-text);height:32px;box-sizing:border-box}
.filter-select{border:1px solid var(--color-border-strong,#CBD5E1);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text);font-size:var(--text-sm);font-family:inherit;padding:0 var(--control-padding-x,12px);height:var(--control-h,38px);outline:none;cursor:pointer}
.filter-select:focus{border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary-subtle,rgba(31,117,254,.15))}
.filter-select.is-invalid{border-color:var(--color-danger,#EF4444);background:var(--color-danger-subtle,rgba(239,68,68,.08))}
.filter-select.is-invalid:focus{border-color:var(--color-danger,#EF4444);box-shadow:0 0 0 2px var(--color-danger-subtle,rgba(239,68,68,.2))}
.filter-pill--search{flex:1;min-width:200px;max-width:100%}
.filter-pill--search input{min-width:unset;max-width:100%;width:100%}
.filter-clear-btn{display:inline-flex;align-items:center;gap:4px;padding:0 12px;height:32px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text-subtle);font-size:var(--text-xs);font-weight:600;cursor:pointer;text-decoration:none;transition:0.15s}
.filter-clear-btn:hover{background:var(--color-surface-2);color:var(--color-text);border-color:var(--color-border-strong)}
.filter-clear-btn.is-disabled{opacity:.5;pointer-events:none}
.filter-drawer__body .topbar-filters{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:14px;width:100%;box-sizing:border-box}
.filter-drawer__body .filter-pill{width:100%;flex-direction:column;align-items:stretch;height:auto;padding:12px;gap:6px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);white-space:normal;box-sizing:border-box;min-width:0}
.filter-drawer__body .filter-pill span.label{font-size:var(--text-xs);font-weight:600;color:var(--text2);display:block;margin-bottom:2px}
.filter-drawer__body .filter-pill select, .filter-drawer__body .filter-pill input{border:1px solid var(--border2, var(--color-border-strong, #cbd5e1))!important;background:var(--surface2, var(--color-surface-2, #f8fafc))!important;color:var(--text, var(--color-text, #0f172a))!important;outline:none!important;font-size:var(--text-sm)!important;padding:0 10px!important;height:36px!important;min-width:0!important;max-width:100%!important;width:100%!important;border-radius:var(--radius-sm,0)!important;box-sizing:border-box!important}
.filter-drawer__body .filter-pill:has(input[type="search"]){grid-column:1 / -1}
/* رقائق الفترة الجاهزة (اليوم/هذا الأسبوع/هذا الشهر) داخل drawer الفلاتر */
/* ── Central Filter Chips (.fchip) — نفس أبعاد/لغة نظام التحكم المركزي ─── */
/* الارتفاع/الحشو/الخط/النصف قطر من --control-* نفسها — لا مقاسات خاصة.    */
.fchips{display:flex;align-items:center;gap:var(--space-2,8px);flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;min-width:0;max-width:100%}
.fchips::-webkit-scrollbar{display:none}
.fchips--wrap{flex-wrap:wrap;overflow-x:visible}
.fchips__label{color:var(--color-text-muted);font-size:var(--text-xs);font-weight:600;user-select:none;flex:none}
.fchip{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:none;height:var(--control-h);min-height:var(--control-h);padding:0 var(--control-padding-x);border:1px solid var(--color-border);border-radius:var(--control-radius);background:var(--color-surface);color:var(--color-text-subtle);font-size:var(--control-font-size);font-weight:var(--font-weight-medium,500);font-family:inherit;line-height:1;white-space:nowrap;cursor:pointer;text-decoration:none;user-select:none;box-sizing:border-box;transition:background .15s,border-color .15s,color .15s,box-shadow .15s;-webkit-tap-highlight-color:transparent}
.fchip:hover{border-color:var(--color-border-strong);color:var(--color-text);background:var(--color-surface-2)}
.fchip:focus-visible,.fchip:focus-within{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary-subtle)}
.fchip--active,.fchip:has(input:checked){font-weight:700;border-color:var(--color-primary);background:var(--color-primary-subtle);color:var(--color-primary)}
.fchip[aria-disabled="true"],.fchip:disabled,.fchip.is-disabled{opacity:.5;pointer-events:none;cursor:not-allowed}
.fchip__check{display:none;font-size:14px}
.fchip--active .fchip__check,.fchip:has(input:checked) .fchip__check{display:inline-flex}
.fchip input[type="radio"],.fchip input[type="checkbox"]{position:absolute;inset:0;margin:0;opacity:0;pointer-events:none}
.fchip--sm{height:32px;min-height:32px;padding:0 12px;font-size:var(--text-xs);font-weight:600}
/* مؤشر حافة التمرير — نفس نمط data-scroll-end في ui-fbar */
.fchips[data-scroll-end]{mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent);-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent)}
[dir="rtl"] .fchips[data-scroll-end]{mask-image:linear-gradient(to left,#000 calc(100% - 44px),transparent);-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 44px),transparent)}
/* رقاقة قابلة للإزالة (فلتر نشط) — أيقونة ✕ خافتة توضح أن الكبسة تزيل */
.fchip__remove{color:var(--color-text-subtle);font-size:14px;margin-inline-start:2px}
.fchip--removable:hover .fchip__remove{color:var(--danger)}

/* ── Filter Section — بطاقة قسم خفيفة داخل جسم الدرج (label+hint+control) ── */
.filter-section{display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);min-width:0;box-sizing:border-box}
.filter-section__label{font-size:var(--text-xs);font-weight:600;color:var(--text2);display:block;margin-bottom:2px;user-select:none}
.filter-section__hint{margin:0;font-size:var(--text-xs);color:var(--text3);line-height:1.5}
.filter-section .filter-select,.filter-section .form-control{width:100%;box-sizing:border-box}
.filter-section__dates{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-2,8px);min-width:0}
.filter-section__dates>*{min-width:0;max-width:100%}
.filter-section__dates-sep{display:flex;align-items:center;justify-content:center;gap:8px;font-size:var(--text-xs);color:var(--text3);line-height:1;user-select:none}
.filter-section__dates-sep::before,.filter-section__dates-sep::after{content:"";flex:1;height:1px;background:var(--border);opacity:.6}
.filter-drawer__body>*{min-width:0;max-width:100%;box-sizing:border-box}
.filter-section>*{min-width:0;max-width:100%}
.filter-drawer__empty{text-align:center;color:var(--text3);padding:20px 0;font-size:var(--text-sm)}
/* شريط الرقائق في منطقة المحتوى يحتاج فاصلاً سفلياً؛ داخل الدرج/الأقسام تعتمد على gap الحاوية */
.fchips{margin-bottom:var(--space-3,12px)}
.topbar-filters .fchips,.filter-section .fchips{margin-bottom:0}
/* داخل الدرج: الرقائق تلفّ كصفوف ضمن عرض القسم — ممنوع تمريراً أفقياً أو خروجاً */
.filter-drawer__body .fchips{flex-wrap:wrap;overflow-x:visible;overscroll-behavior-x:auto}
.filter-drawer__body .fchips[data-scroll-end]{mask-image:none;-webkit-mask-image:none}
.filter-drawer-edge-toggle{inset-inline-start:-12.5px;inset-inline-end:auto}
.filter-icon{pointer-events:none;font-size:20px}
.topbar-filters-spacer{flex:1}
.filter-drawer-backdrop{display:none;position:fixed;inset:0;background:transparent;z-index:498;pointer-events:none;transition:background 0.3s}
.filter-drawer-backdrop.is-visible{pointer-events:auto}
/* Filter toggle button */
.topbar-filter-toggle{display:flex;align-items:center;justify-content:center;gap:6px;width:auto;height:36px;padding:0 12px;border:1px solid var(--border);background:var(--bg);border-radius:var(--radius-sm);color:var(--text2);cursor:pointer;flex-shrink:0;white-space:nowrap;font-size:var(--text-sm);transition:background 0.15s,color 0.15s,border-color 0.15s}
.topbar-filter-toggle:hover{background:transparent;color:var(--text)}
.topbar-filter-toggle.is-active{background:var(--primary);color:#fff;border-color:var(--primary)}
@media(min-width:1024px){.topbar-filter-toggle{display:none!important}}
/* ── Scope Filters (.scopebar + .scopesheet) — شريط مضغوط + مودال فلاتر ─────
   بديل الدرج الجانبي (filterMode:'scope'): صف بحث + زر فلاتر بشارة + مسح شرطي
   + صف رقائق. الدرج يبقى في DOM مخفياً ([hidden]) لأجل PJAX. محتوى المودال
   (.scopesheet) أقسام .filter-section قياسية — المودال يتحول bottom-sheet
   على الموبايل عبر قواعد #modal-root/.modal-panel العامة. */
.filter-drawer[hidden]{display:none!important}
/* الإطار بلغة nav-tabs-bar: شريط strip بـborder-bottom فقط داخل عرض المحتوى —
   لا بطاقة محاطة بحدود. الصفوف الداخلية تحمل فواصل border-top الخاصة بها. */
.scopebar{display:flex;flex-direction:column;align-items:stretch;gap:0;background:var(--surface);border:none;border-block-end:1px solid var(--border);margin:0 0 20px;padding:0;box-shadow:0 1px 3px rgba(15,23,42,.04)}
/* داخل الشريط: الرقاقة النشطة تلبس لغة nav-tab--active (solid primary + ظل)
   فيصير صف الرقائق امتداداً بصرياً لـnav-tabs-bar — نفس الدلالة، نفس الشكل. */
.scopebar .fchip--active{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 2px 8px rgba(31,117,254,.25)}
.scopebar .fchip--active .fchip__check{color:#fff}
.scopebar .fchip--active:hover{background:var(--primary-dim);border-color:var(--primary-dim);color:#fff}
.scopebar__row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;min-width:0}
/* قاعدة الاحتواء: ممنوع خروج أي عنصر من الشريط أفقياً — الأبناء تنكمش لا تفيض */
.scopebar__row>:not(.scopebar__search){min-width:0}
/* صف الرقائق = حاوية التمرير نفسها (وصفة nav-tabs-scroll): يُسحب يميناً/شمالاً
   باللمس، لا يلتف ولا يرفع ارتفاع الشريط. العقد على الصف لا على .fchips
   الداخلية فيعمل مع أي محتوى (رقائق فترة + رقائق فلاتر نشطة). */
.scopebar__row--chips{border-top:1px solid var(--border);background:var(--surface2);flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.scopebar__row--chips::-webkit-scrollbar{display:none}
.scopebar__row--chips>*{flex:none}
.scopebar__row--chips .fchips{overflow-x:visible;overscroll-behavior-x:auto;max-width:none}
/* صف التبويبات الحصرية داخل الشريط (--tabs) — نفس وصفة تمرير صف الرقائق */
.scopebar__row--tabs{border-top:1px solid var(--border);background:var(--surface2);flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:0 12px}
.scopebar__row--tabs::-webkit-scrollbar{display:none}
.scopebar__row--tabs>*{flex:none}
/* nav-tabs-inline: لغة nav-tab المرئية داخل الشريط بلا إطار .nav-tabs-bar
   (لا border/sticky) — التبويب الحصري في scopebar */
.nav-tabs-inline{display:flex;gap:4px;align-items:center;flex:none}
.scopebar__row--chips[data-scroll-end]{mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent);-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent)}
[dir="rtl"] .scopebar__row--chips[data-scroll-end]{mask-image:linear-gradient(to left,#000 calc(100% - 44px),transparent);-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 44px),transparent)}
.scopebar__row--tabs[data-scroll-end]{mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent);-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent)}
[dir="rtl"] .scopebar__row--tabs[data-scroll-end]{mask-image:linear-gradient(to left,#000 calc(100% - 44px),transparent);-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 44px),transparent)}
/* نفس تلميح الحافة على فوتر الأزرار — يوضح أن الشريط قابل للسحب */
.action-toolbar__inner[data-scroll-end],.action-toolbar__default[data-scroll-end]{mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent);-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent)}
[dir="rtl"] .action-toolbar__inner[data-scroll-end],[dir="rtl"] .action-toolbar__default[data-scroll-end]{mask-image:linear-gradient(to left,#000 calc(100% - 40px),transparent);-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 40px),transparent)}
.scopebar .filter-pill{height:var(--control-h)}
.scopebar__search{flex:1 1 220px;min-width:160px;max-width:480px}
.scopebar__search-icon{color:var(--text3);flex-shrink:0}
.scopebar__filters{display:inline-flex;align-items:center;gap:6px;height:var(--control-h);padding:0 var(--control-padding-x,12px);border:1px solid var(--primary);border-radius:var(--radius-sm);background:var(--primary);color:#fff;font-size:var(--text-sm);font-weight:600;text-decoration:none;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:border-color .15s,background .15s,color .15s}
.scopebar__filters:hover{background:var(--color-primary-hover,var(--primary-dim));border-color:var(--color-primary-hover,var(--primary-dim));color:#fff}
.scopebar__filters:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.scopebar__filters .scopebar__count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#fff;color:var(--primary);font-size:var(--text-xs);font-weight:700;line-height:1}
.scopebar__filters:has(.scopebar__count){background:var(--color-primary-hover,var(--primary-dim));border-color:var(--color-primary-hover,var(--primary-dim))}
.scopebar__clear{display:inline-flex;align-items:center;gap:4px;height:var(--control-h);padding:0 10px;border:none;background:transparent;color:var(--danger);font-size:var(--text-sm);font-weight:600;text-decoration:none;cursor:pointer;white-space:nowrap;flex-shrink:0;border-radius:var(--radius-sm);transition:background .15s}
.scopebar__clear:hover{background:var(--color-danger-subtle,#fee2e2);color:var(--danger)}
.scopebar__clear:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.scopebar .fchips{margin-bottom:0}
/* توحيد الارتفاع داخل الشريط: كل رقاقة بارتفاع زر «الفلاتر» (--control-h) —
   fchip--sm مقاس لسياقات الدرج المكتظة لا لهذا الصف. */
.scopebar .fchip{height:var(--control-h);min-height:var(--control-h)}
/* احتواء الفورم: محتوى scopebar-form لا يخرج عن عرض قسمه — الصفوف تنكمش
   (min-width:0) وصف الرقائق يسكرول أفقياً داخل الحدود لا خارجها. */
.scopebar>*{min-width:0;max-width:100%;box-sizing:border-box}
/* ── scopesheet — نموذج الفلاتر داخل المودال/الصفحة المستقلة ─────────────── */
.scopesheet{display:flex;flex-direction:column;align-items:stretch;gap:16px}
.scopesheet .filter-section{margin-bottom:0}
.scopesheet__dates{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.scopesheet__field{display:flex;flex-direction:column;gap:4px;min-width:0}
.scopesheet__field-label{font-size:var(--text-xs);font-weight:600;color:var(--text2)}
.scopesheet__dates .filter-select{width:100%;min-width:150px;box-sizing:border-box}
/* رقائق الشيت (renderFilterChips) بارتفاع نظام التحكم — fchip--sm مخصصة للدرج */
.scopesheet .fchip{height:var(--control-h);min-height:var(--control-h)}
.scopesheet__dates-sep{color:var(--text3);font-size:var(--text-xs);white-space:nowrap;align-self:center}
/* أسهم select مخصصة — سهم المتصفح الافتراضي غير متسق مع نظام التحكم المركزي */
.scopebar select.filter-select,.scopesheet select.filter-select,.scopesheet select.form-control{appearance:none;-webkit-appearance:none;padding-inline-end:32px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 10px center;background-size:16px}
[data-theme="dark"] .scopebar select.filter-select,[data-theme="dark"] .scopesheet select.filter-select,[data-theme="dark"] .scopesheet select.form-control{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
@media(max-width:768px){
  .scopebar__search{flex:1 1 100%;max-width:100%;min-width:0}
  .scopebar__filters{flex:1;justify-content:center}
  .scopebar__clear{padding:0 6px}
}
/* Mobile: Sidebar Style (Left) */
@media(max-width:1023px){
  .filter-drawer{position:fixed;top:0;bottom:0;inset-inline-start:auto;inset-inline-end:0;width:min(90vw,340px)!important;height:100vh;max-height:100vh;border:none;border-inline-end:1px solid var(--border);border-radius:0;transform:translateX(-100%);visibility:hidden;transition:transform 0.3s ease,visibility 0.3s ease;z-index:calc(var(--z-sidebar) + 1);box-shadow:none}
  .filter-drawer.is-open{width:min(86vw,320px)!important;transform:translateX(0);visibility:visible;box-shadow:var(--shadow-xl,0 20px 25px -5px rgba(0,0,0,0.1))}
  .filter-drawer__header::before{display:none}
  .filter-drawer__header{position:relative;display:flex}
  .filter-drawer-backdrop{display:block;position:fixed;inset:0;background:transparent;z-index:var(--z-sidebar);transition:background 0.3s;pointer-events:none}
  .filter-drawer-backdrop.is-visible{background:rgba(0,0,0,0.45);pointer-events:auto}
  .topbar-filter-toggle span{display:none}
  .topbar-filter-toggle{width:36px;padding:0;justify-content:center}
}
/* الزر الآن متموضع داخل الشريط الجانبي (sidebar) عند الأسفل تماماً على الحافة الفاصلة،
   ومتوسط عمودياً مع ارتفاع الشريط السفلي (64px) */
.logout-form{margin:0}


/* ── Page Header Bar ──────────────────────────────────────── */
.page-header-bar{padding:16px 24px 0;border-bottom:1px solid var(--color-border);background:var(--color-surface)}
.page-header-title{margin:0 0 16px;font-size:var(--text-xl);font-weight:600;color:var(--color-text)}

/* ── Content ──────────────────────────────────────────────── */
.content{padding:24px;flex:1;background:var(--color-bg);min-width:0}
/* سقف عرض المحتوى على الشاشات الكبيرة (2xl) — يمنع تمدّد الـ4K؛ الـtopbar
   يبقى full-width لأنه chrome لا محتوى. */
@media(min-width:1536px){.content{max-width:var(--content-max-w,1600px);width:100%;margin-inline:auto}}

/* ── Hero Card ────────────────────────────────────────────── */
.hero-card{padding:18px 20px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);border-inline-start:3px solid var(--color-primary)}
.hero-card h1{margin:4px 0 8px;font-size:var(--text-lg);font-weight:600}
.hero-card p{color:var(--color-text-subtle);line-height:1.7;margin:0}
.hero-card--success{background:var(--color-success-subtle);border-color:var(--color-success-border,#abf5d1);border-inline-start-color:var(--color-success)}
.hero-card--warning{background:var(--color-warning-subtle);border-color:var(--color-warning-border,#f8d97e);border-inline-start-color:var(--color-warning)}
.hero-card--danger{background:var(--color-danger-subtle);border-color:var(--color-danger-border,#ffbdad);border-inline-start-color:var(--color-danger)}
.eyebrow{margin:0;color:var(--color-primary);font-weight:700}

/* ── Bookmarks Library (مكتبة الروابط) ───────────────────── */
/* Desktop: جدول كامل؛ Mobile (≤768px): بطاقات مدمجة بدل الجدول */
.bookmarks-cards-mobile{display:none}
.bookmark-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.bookmark-card__header{display:flex;align-items:center;gap:10px}
.bookmark-card__name{color:var(--color-text);text-decoration:none;font-size:var(--text-sm);min-width:0;overflow-wrap:anywhere}
.bookmark-card__name:hover{color:var(--color-primary)}
.bookmark-card__url{min-width:0}
.bookmark-card__url .badge-id{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bookmark-card__category{display:flex;gap:6px;flex-wrap:wrap}
.bookmark-card__contact{display:flex;flex-direction:column;gap:4px;font-size:var(--text-xs)}
.bookmark-card__notes{font-size:var(--text-xs);color:var(--color-text-subtle);line-height:1.6}
.bookmark-card__meta{font-size:var(--text-xs)}
.bookmark-card__actions{margin-top:4px;border-top:1px solid var(--color-border);padding-top:10px}
@media(max-width:768px){
  .bookmarks-table-desktop{display:none}
  .bookmarks-cards-mobile{display:flex;flex-direction:column;gap:12px}
}

/* ── Stats & Settings Cards ───────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:20px}
.settings-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:20px}
.stat{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:16px 20px;display:flex;flex-direction:column;gap:4px}
.stat span{font-size:var(--text-xs);color:var(--color-text-muted);font-weight:500}
.stat strong{font-size:var(--text-2xl);font-weight:700;color:var(--text);font-family:var(--font-num)}
/* Settings cards vary in field count (password vs. profile vs. avatar), which
   left their submit buttons at different heights once the grid stretched the
   cards to equal height. Making the form itself a column flexbox lets the
   button anchor to the bottom of every card at the same line. */
.settings-cards .auth-form{display:flex;flex-direction:column;gap:12px}
.settings-cards .auth-form .primary-button{margin-top:auto}



/* ── Fields ───────────────────────────────────────────────── */
.field{display:grid;gap:6px}
.field span,.field label{font-size:var(--text-sm);font-weight:500;color:var(--color-text-subtle)}
.field input,.field select,.field textarea,.field-control{width:100%;padding:8px 12px;border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text);font-size:var(--text-sm);font-family:inherit;transition:border-color 0.2s ease,box-shadow 0.2s ease,transform 0.1s;outline:none}
.field input:focus,.field select:focus,.field textarea:focus,.field-control:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-subtle)}
.field-control--textarea{resize:vertical}
.field-control--locked-affix,.form-control--locked-affix{width:auto;flex:0 0 auto;display:flex;align-items:center;justify-content:flex-end;text-align:right;background-color:color-mix(in srgb,var(--color-text) 7%,var(--color-surface-2));background-image:repeating-linear-gradient(135deg,transparent 0 6px,color-mix(in srgb,var(--color-text) 5%,transparent) 6px 8px);color:var(--color-text-subtle);font-weight:600;white-space:nowrap;user-select:none;-webkit-user-select:none;cursor:not-allowed;caret-color:transparent;max-width:50%;min-width:0;overflow:hidden;text-overflow:ellipsis}

/* ── Upload zones (auto-upload, no confirm button) ─────────── */
.media-preview{position:relative;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;padding:12px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);margin-top:10px;min-height:72px;z-index:3}
.media-preview img{max-width:160px;max-height:96px;object-fit:contain;border-radius:var(--radius-sm);display:block}
.media-preview.empty{color:var(--color-text-muted);font-size:var(--text-sm)}
.media-preview-item{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:72px;min-height:72px;padding:6px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface-2)}
.media-preview-item img{max-width:150px;max-height:96px}
.media-preview-item--file{flex-direction:column;gap:4px;min-width:140px;max-width:200px;padding:10px;text-align:center}
.media-preview-item--file .media-preview-item__file-icon{font-size:1.8rem;color:var(--color-primary)}
.media-preview-item--file .media-preview-item__file-name{font-size:var(--text-xs);color:var(--color-text-subtle);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;display:block}
.media-preview--files{flex-direction:column;align-items:stretch;gap:8px}
.media-preview__font{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:var(--text-xs);font-weight:600;color:var(--color-text-subtle);padding:14px}
.media-preview__font i{font-size:1.8rem;color:var(--color-primary)}
.media-preview-file{font-size:var(--text-xs);font-weight:700;color:var(--color-text-subtle);padding:14px}
.media-preview-remove{position:absolute;top:4px;inset-inline-end:4px;z-index:4;width:24px;height:24px;border:0;border-radius:50%;background:rgba(15,23,42,.78);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;line-height:1;padding:0}
.media-preview-remove:hover{background:var(--color-danger)}
.upload-zone{position:relative;border:2px dashed var(--color-border-strong);background:var(--color-surface-2);padding:18px;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s;margin-top:12px;display:grid;gap:12px}
.upload-zone:hover,.upload-zone.drag-over{border-color:var(--color-primary);background:var(--color-primary-subtle);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 12%,transparent)}
.upload-zone__input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:2}
.upload-zone__label{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;pointer-events:none}
.upload-zone__label strong{font-size:var(--text-base);color:var(--color-text)}
.upload-zone__label span{font-size:var(--text-xs);color:var(--color-text-muted)}
.upload-zone__actions{position:relative;z-index:3;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.upload-zone__actions .button{margin:0;min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.upload-zone__separator{color:var(--color-text-muted);font-size:var(--text-xs);font-weight:700}
.upload-zone__clear{color:var(--color-danger)!important;border-color:var(--color-danger)!important;background:var(--color-surface)!important}
.upload-zone__clear:hover{background:var(--color-danger-subtle)!important}
.upload-zone__status{margin-top:10px;padding:8px 12px;font-size:var(--text-sm);border-radius:var(--radius-sm);display:flex;align-items:center;gap:8px}
.upload-zone__status.uploading{background:var(--color-primary-subtle);color:var(--color-primary)}
.upload-zone__status.success{background:var(--color-success-subtle);color:var(--color-success)}
.upload-zone__status.error{background:var(--color-danger-subtle);color:var(--color-danger)}
.upload-zone__progress-bar{width:100%;height:4px;background:var(--color-border);border-radius:0;overflow:hidden;margin-top:8px;display:none}
.upload-zone__progress-bar-fill{width:0%;height:100%;background:var(--color-primary);transition:width .2s}
/* ── Progress bar احترافي لوضع toolbar (صفحة الوسائط) ── */
.upload-zone__progress-bar--toolbar{position:absolute;bottom:calc(100% + 38px);inset-inline-end:0;left:auto;right:auto;width:280px;min-width:200px;max-width:90vw;height:10px;border-radius:var(--radius);margin:0;background:var(--color-surface-2,var(--surface2,#f1f5f9));box-shadow:inset 0 1px 2px rgba(0,0,0,.08),0 2px 8px rgba(0,0,0,.12);z-index:25;display:none}
.upload-zone__progress-bar--toolbar .upload-zone__progress-bar-fill{border-radius:var(--radius);background:linear-gradient(90deg,var(--color-primary,var(--primary,#1f75fe)) 0%,var(--color-primary-hover,var(--primary-dim,#1558c9)) 100%);box-shadow:0 0 8px var(--primary-ghost,rgba(31,117,254,.4));position:relative;overflow:hidden}
.upload-zone__progress-bar--toolbar .upload-zone__progress-bar-fill::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%);animation:uploadProgressShine 1.5s ease-in-out infinite}
@keyframes uploadProgressShine{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.upload-zone__progress-percent{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:10px;font-weight:700;color:var(--color-text);background:var(--color-surface);padding:1px 6px;border-radius:var(--radius);box-shadow:0 1px 3px rgba(0,0,0,.15);font-variant-numeric:tabular-nums;pointer-events:none;opacity:0;transition:opacity .2s;white-space:nowrap}
.upload-zone__progress-bar--toolbar[style*="display: flex"] .upload-zone__progress-percent{opacity:1}
.upload-zone__status--toolbar{position:absolute;bottom:calc(100% + 8px);inset-inline-end:0;margin:0;min-width:280px;box-shadow:var(--shadow-md);z-index:20;border-radius:var(--radius-md);padding:10px 14px;font-weight:500;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.upload-zone__status--toolbar.uploading{background:rgba(31,117,254,.95);color:#fff}
.upload-zone__status--toolbar.success{background:rgba(16,185,129,.95);color:#fff}
.upload-zone__status--toolbar.error{background:rgba(239,68,68,.95);color:#fff}
.avatar-upload-zone{border:none;background:transparent;padding:0;width:100px;height:100px;margin:0 auto 24px;position:relative;overflow:visible;display:block}
.avatar-upload-zone .avatar,.avatar-upload-zone .avatar-preview{width:100%;height:100%;margin:0;border:none;border-radius:50%;overflow:hidden}
.avatar-upload-zone .avatar-overlay{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:rgba(0,0,0,0.5);color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;opacity:0;transition:opacity 0.2s;pointer-events:none;gap:4px}
.avatar-upload-zone .avatar-overlay svg{color:#fff}
.avatar-upload-zone .avatar-overlay span{color:#fff;font-size:var(--text-xs);font-weight:500}
.avatar-upload-zone:hover .avatar-overlay{opacity:1}
.avatar-upload-zone .upload-zone__status{position:absolute;bottom:-18px;left:0;right:0;margin:0;padding:2px;font-size:var(--text-xs);text-align:center;border-radius:var(--radius-xs,0)}
.avatar-upload-zone__clear{position:absolute;top:-4px;inset-inline-end:-4px;z-index:10;width:28px;height:28px;min-height:0;border:2px solid var(--surface,#ffffff)!important;border-radius:50%!important;background:var(--surface,#ffffff)!important;color:var(--danger,#ef4444)!important;padding:0;font-size:16px;font-weight:700;line-height:1;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,0.18)!important;cursor:pointer;transition:transform 0.18s ease,background 0.18s ease,color 0.18s ease,box-shadow 0.18s ease}
.avatar-upload-zone__clear:hover{background:var(--danger,#ef4444)!important;color:#ffffff!important;transform:scale(1.12);box-shadow:0 4px 12px rgba(239,68,68,0.35)!important}
[data-theme="dark"] .avatar-upload-zone__clear{background:var(--surface,#1e293b)!important;border-color:var(--border,#334155)!important;color:#f87171!important}
[data-theme="dark"] .avatar-upload-zone__clear:hover{background:var(--danger,#ef4444)!important;color:#ffffff!important}

/* Compact variant: same upload-zone (drag&drop + click-to-browse) styled as a toolbar button */
.upload-zone--toolbar{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--primary,var(--color-primary,#1F75FE));border-radius:var(--control-radius,0);background:var(--primary,var(--color-primary,#1F75FE));color:#fff!important;padding:0 16px;height:var(--control-h,40px);font-weight:500;font-size:var(--text-sm);margin:0;min-width:100px;text-align:center;white-space:nowrap;box-sizing:border-box}
.upload-zone--toolbar:hover,.upload-zone--toolbar.drag-over{background:var(--primary-dim,var(--color-primary-hover,#1558c9));border-color:var(--primary-dim,var(--color-primary-hover,#1558c9))}
.upload-zone--toolbar .upload-zone__label{flex-direction:row;gap:6px;color:#fff;pointer-events:none}
.upload-zone--toolbar .upload-zone__label strong{color:#fff;font-size:var(--text-sm);font-weight:500}
.upload-zone--toolbar .upload-zone__label>span:last-child{display:none}
.upload-zone--toolbar .upload-zone__actions{display:none}
.avatar-preview{display:flex;align-items:center;justify-content:center;width:80px;height:80px;border:1px solid var(--color-border-strong);border-radius:50%;overflow:hidden;background:var(--color-surface-2);margin:0 auto 12px}
.avatar-preview img{width:100%;height:100%;object-fit:cover}
.avatar-preview.empty{background:var(--primary,var(--color-primary,#1F75FE));color:#fff;font-size:var(--text-2xl);font-weight:700}


/* ── Unified Buttons Architecture ───────────────────────────── */
.button, .button-primary, .primary-button, .button.primary, .button.secondary, .button-secondary, .btn, .btn-primary, .btn-secondary, .secondary-button, .upload-zone--toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: var(--control-radius, 6px);
  padding: 0 var(--control-padding-x, 14px);
  height: var(--control-h, 40px);
  font-weight: 500;
  font-size: var(--text-sm, 13px);
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  outline: none;
  box-sizing: border-box;
}
.button:not(.secondary):not(.button-secondary):not(.btn-secondary):not(.secondary-button):not(.button--secondary):not(.danger):not(.button-danger), 
.button-primary, .primary-button, .button.primary, .btn-primary, label.button.primary, label.primary-button, .upload-zone--toolbar {
  background: var(--primary,var(--color-primary,#1F75FE));
  border-color: var(--primary,var(--color-primary,#1F75FE));
  color: #ffffff !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.button:not(.secondary):not(.button-secondary):not(.btn-secondary):not(.secondary-button):not(.button--secondary):not(.danger):not(.button-danger):hover:not(:disabled), 
.button.primary:hover:not(:disabled), .button-primary:hover:not(:disabled), .primary-button:hover:not(:disabled), .btn-primary:hover:not(:disabled), label.button.primary:hover, label.primary-button:hover, .upload-zone--toolbar:hover, .upload-zone--toolbar.drag-over {
  background: var(--primary-dim,var(--color-primary-hover,#1558c9));
  border-color: var(--primary-dim,var(--color-primary-hover,#1558c9));
  color: #ffffff !important;
  box-shadow: 0 2px 6px var(--primary-ghost, rgba(31, 117, 254, 0.25));
}
.button:active:not(:disabled), .button.primary:active:not(:disabled), .button-primary:active:not(:disabled), .primary-button:active:not(:disabled), .btn:active:not(:disabled), .btn-primary:active:not(:disabled) {
  transform: scale(0.98);
}
.button:disabled, .button.primary:disabled, .button-primary:disabled, .primary-button:disabled, .btn:disabled, .btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.button.secondary, .button-secondary, .btn-secondary, .secondary-button, .button--secondary, a.button.secondary, a.button-secondary, button.button.secondary {
  background: var(--secondary, var(--color-secondary, var(--primary-dim, #1558c9))) !important;
  color: #ffffff !important;
  border: 1px solid var(--secondary, var(--color-secondary, var(--primary-dim, #1558c9))) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}
.button.secondary:hover:not(:disabled), .button-secondary:hover:not(:disabled), .btn-secondary:hover:not(:disabled), .secondary-button:hover:not(:disabled), .button--secondary:hover:not(:disabled), a.button.secondary:hover:not(:disabled), a.button-secondary:hover:not(:disabled) {
  filter: brightness(0.9);
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}

.button.danger, .button-danger, .btn-danger, .danger-button {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: #fff;
}
.button.danger:hover:not(:disabled), .button-danger:hover:not(:disabled), .btn-danger:hover:not(:disabled), .danger-button:hover:not(:disabled) {
  background: var(--color-danger-hover);
  border-color: var(--color-danger-hover);
  color: #fff;
  box-shadow: 0 2px 4px var(--color-danger-subtle);
}

/* ── Delete Buttons Enforcement ─────────────────────────────
   كل زر وظيفته الحذف/الإزالة في لوحات التحكم يجب أن تكون خلفيته حمراء
   إجبارياً — يشمل أزرار الحذف المرمّزة بـsecondary/ghost وأزرار الإزالة
   الصغيرة (×) وأزرار submit داخل نماذج الحذف. */
:is(button, a, .button, .btn, [type="submit"], [role="button"]):is(
  .danger, .delete, .button-danger, .danger-button, .btn-danger, .btn--danger,
  .table-action-btn--danger, .modal-btn--danger,
  .pm-del-step, .pm-del-field, .pm-del-method, .pg-channel-remove,
  .ui-variant-remove-opt, .hp-repeater__card-remove,
  .hp-section-card__action-btn--danger, .section-item__btn--danger,
  .list-item__remove, .media-delete-btn, .media-preview-remove,
  .io-file-card__remove, .receipt-upload-zone__remove, .aie-file__x,
  .pg-an-history__del, .pos-cart-item__remove, .wd-size-del-btn,
  .adati-time-del, .cd-action-btn--danger, .pdf-row-btn--danger,
  .sim-mgr-row-btn--danger, .ts-cmd-btn--danger, .wd-cmd-btn--danger,
  .ui-fav-card__remove, .ui-compare__remove, .party-chip__del,
  .bl-remove-link-btn, .et-delete-item-btn,
  [data-delete-entity], [data-delete-id], [data-delete-confirm],
  [data-trash-hard-delete], [data-section-delete], [data-repeater-remove],
  [data-item-remove], [data-pb-remove-item], [data-remove],
  [data-remove-channel], [data-remove-coldef], [data-remove-step],
  [data-remove-field], [data-remove-method], [data-receipt-remove],
  [data-time-del], [data-del],
  [data-booking-delete-service], [data-booking-remove-range], [data-booking-delete-exception],
  [data-action="delete"], [data-action="remove"], [data-quote-action="remove"],
  [data-media-action="section-delete"], [data-aie-action="remove-file"],
  [data-io-action="remove-file"], [data-pa-action="del-saved"],
  [data-pdf-action="remove-merge"], [data-shiply-action="delete-draft"],
  [data-shiply-action="delete-key"], [data-sim-action="purge"],
  [data-sim-action="delete"], [data-sim-action="delete-selected"],
  [data-sim-action="empty-trash"], [data-pos-action="remove-from-cart"],
  [data-confirm*="حذف"], [data-confirm*="إزالة"], [data-confirm*="تفريغ"],
  [title*="حذف"], [aria-label*="حذف"], [href*="/delete"]
),
form:is([action*="delete"], [data-tenant-delete], [data-confirm*="حذف"], [data-confirm*="إزالة"], [data-confirm*="تفريغ"]) :is(button[type="submit"], .button, .btn) {
  background: var(--color-danger, #ef4444) !important;
  border-color: var(--color-danger, #ef4444) !important;
  color: #ffffff !important;
}
:is(button, a, .button, .btn, [type="submit"], [role="button"]):is(
  .danger, .delete, .button-danger, .danger-button, .btn-danger, .btn--danger,
  .table-action-btn--danger, .modal-btn--danger,
  .pm-del-step, .pm-del-field, .pm-del-method, .pg-channel-remove,
  .ui-variant-remove-opt, .hp-repeater__card-remove,
  .hp-section-card__action-btn--danger, .section-item__btn--danger,
  .list-item__remove, .media-delete-btn, .media-preview-remove,
  .io-file-card__remove, .receipt-upload-zone__remove, .aie-file__x,
  .pg-an-history__del, .pos-cart-item__remove, .wd-size-del-btn,
  .adati-time-del, .cd-action-btn--danger, .pdf-row-btn--danger,
  .sim-mgr-row-btn--danger, .ts-cmd-btn--danger, .wd-cmd-btn--danger,
  .ui-fav-card__remove, .ui-compare__remove, .party-chip__del,
  .bl-remove-link-btn, .et-delete-item-btn,
  [data-delete-entity], [data-delete-id], [data-delete-confirm],
  [data-trash-hard-delete], [data-section-delete], [data-repeater-remove],
  [data-item-remove], [data-pb-remove-item], [data-remove],
  [data-remove-channel], [data-remove-coldef], [data-remove-step],
  [data-remove-field], [data-remove-method], [data-receipt-remove],
  [data-time-del], [data-del],
  [data-booking-delete-service], [data-booking-remove-range], [data-booking-delete-exception],
  [data-action="delete"], [data-action="remove"], [data-quote-action="remove"],
  [data-media-action="section-delete"], [data-aie-action="remove-file"],
  [data-io-action="remove-file"], [data-pa-action="del-saved"],
  [data-pdf-action="remove-merge"], [data-shiply-action="delete-draft"],
  [data-shiply-action="delete-key"], [data-sim-action="purge"],
  [data-sim-action="delete"], [data-sim-action="delete-selected"],
  [data-sim-action="empty-trash"], [data-pos-action="remove-from-cart"],
  [data-confirm*="حذف"], [data-confirm*="إزالة"], [data-confirm*="تفريغ"],
  [title*="حذف"], [aria-label*="حذف"], [href*="/delete"]
):hover:not(:disabled),
form:is([action*="delete"], [data-tenant-delete], [data-confirm*="حذف"], [data-confirm*="إزالة"], [data-confirm*="تفريغ"]) :is(button[type="submit"], .button, .btn):hover:not(:disabled) {
  background: var(--color-danger-hover, #dc2626) !important;
  border-color: var(--color-danger-hover, #dc2626) !important;
  color: #ffffff !important;
}

.button.success, .button-success, .btn-success {
  background: var(--color-success);
  border-color: var(--color-success);
  color: #fff;
}
.button.success:hover:not(:disabled), .button-success:hover:not(:disabled), .btn-success:hover:not(:disabled) {
  background: var(--color-success-hover);
  border-color: var(--color-success-hover);
  color: #fff;
  box-shadow: 0 2px 4px var(--color-success-subtle);
}

.button.warning, .button-warning, .btn-warning {
  background: var(--color-warning);
  border-color: var(--color-warning);
  color: #fff;
}
.button.warning:hover:not(:disabled), .button-warning:hover:not(:disabled), .btn-warning:hover:not(:disabled) {
  background: var(--color-warning-hover);
  border-color: var(--color-warning-hover);
  color: #fff;
  box-shadow: 0 2px 4px var(--color-warning-subtle);
}

.button.ghost, .button-ghost, .btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--color-text-subtle);
  box-shadow: none;
}
.button.ghost:hover:not(:disabled), .button-ghost:hover:not(:disabled), .btn-ghost:hover:not(:disabled) {
  background: var(--color-surface-2);
  color: var(--color-text);
}
.button-link{text-decoration:none}.button-block{width:100%}.button-compact{padding:5px 10px;font-size:var(--text-xs)}.button-grow{flex:1}.button-center{text-align:center}
/* Small button variant — used by btn-sm, button-sm, button--sm */
.btn-sm,.button-sm,.button--sm,.btn--sm{height:32px;padding:0 12px;font-size:var(--text-xs);font-weight:600}
/* BEM-style button variants (btn--*) */
.btn--danger{background:var(--color-danger);border-color:var(--color-danger);color:#fff}
.btn--danger:hover:not(:disabled){background:var(--color-danger-hover);border-color:var(--color-danger-hover)}
.btn--outline{background:transparent;border:1px solid var(--color-border-strong,#CBD5E1);color:var(--color-text)}
.btn--outline:hover:not(:disabled){background:var(--color-surface-2);border-color:var(--color-primary);color:var(--color-primary)}
/* Icon Button — same 36px hit-target and hover/active/disabled states as the
   text buttons above, for icon-only actions (view/copy/download/archive). */
.btn-icon,.button-icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text-subtle);cursor:pointer;text-decoration:none;flex-shrink:0}
.btn-icon:hover:not(:disabled),.button-icon:hover:not(:disabled){background:transparent;color:var(--color-text);box-shadow:var(--shadow-sm)}
.btn-icon:active:not(:disabled),.button-icon:active:not(:disabled){transform:scale(0.96)}
.btn-icon:disabled,.button-icon:disabled{opacity:0.5;cursor:not-allowed}
.btn-icon svg,.button-icon svg{width:16px;height:16px}
.btn-icon-sm{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:1px solid var(--border);background:var(--surface2);color:var(--text2)}

/* ── Auth links / errors ──────────────────────────────────── */
.auth-link{margin-top:28px;text-align:center;font-size:var(--text-sm)}
.auth-link + .auth-link{margin-top:12px}
.auth-link a{color:var(--color-primary);font-weight:500;text-decoration:none}
.auth-link a:hover{text-decoration:underline}
/* form-error + success-message حُذفتا — كانتا aliases ميتة (لم تعد تُولَّد من أي view) */



/* ── Error Page (Unified 404 / 403 / 500) ─────────────────── */
.error-page{display:grid;min-height:100vh;place-content:center;text-align:center;padding:24px;background:var(--bg)}
.error-page__card{max-width:560px;display:flex;flex-direction:column;align-items:center;gap:16px}
.error-page__icon{width:96px;height:96px;display:grid;place-content:center;border-radius:50%;background:var(--primary-ghost);color:var(--primary);font-size:44px;line-height:1;animation:errorPulse 2s ease-in-out infinite}
.error-page__code{font-size:clamp(56px,12vw,88px);font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--primary);text-shadow:0 2px 8px rgba(31,117,254,.12)}
.error-page__title{font-size:clamp(20px,4vw,28px);font-weight:700;color:var(--text);margin:0}
.error-page__desc{font-size:var(--text-sm);color:var(--text2);line-height:1.7;max-width:420px;margin:0}
.error-page__actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.error-page__btn{display:inline-flex;align-items:center;gap:6px;text-decoration:none;padding:10px 22px;font-size:var(--text-sm);font-weight:600}
@keyframes errorPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.06);opacity:.85}}
@media(max-width:640px){.error-page__icon{width:72px;height:72px;font-size:34px}.error-page__actions{flex-direction:column;width:100%}.error-page__btn{width:100%;justify-content:center}}

/* ── Error Hero — "digit [SVG-face] digit" composition (Dribbble-inspired) ── */
.error-page__hero{display:flex;align-items:center;justify-content:center;gap:clamp(8px,3vw,24px);margin-bottom:4px}
.error-page__digit{font-size:clamp(72px,18vw,128px);font-weight:800;line-height:1;letter-spacing:-.04em;color:var(--primary);text-shadow:0 4px 24px rgba(31,117,254,.15);user-select:none}
.error-page__face{position:relative;width:clamp(64px,12vw,92px);height:clamp(64px,12vw,92px);border-radius:50%;background:radial-gradient(circle at 35% 30%,hsl(var(--primary-h,217),97%,66%),var(--primary));flex-shrink:0;box-shadow:0 0 0 clamp(8px,2vw,16px) rgba(31,117,254,.08),0 0 0 clamp(16px,4vw,32px) rgba(31,117,254,.04),0 0 0 clamp(24px,6vw,48px) rgba(31,117,254,.02),inset 0 -4px 12px rgba(0,0,0,.12);animation:errorFaceFloat 3s ease-in-out infinite}
.error-page__face svg{width:100%;height:100%;display:block}
@keyframes errorFaceFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media(max-width:640px){.error-page__digit{font-size:64px}.error-page__face{width:56px;height:56px}}

/* ── Badges ───────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:var(--radius-xs);font-size:var(--text-xs);font-weight:600;border:1px solid transparent}

/* ── Alerts (inline notification banners) ─────────────────── */

/* ── Nav Tabs (horizontal tab bar) ────────────────────────── */
.nav-tabs-bar{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:16px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.nav-tabs-bar::-webkit-scrollbar{display:none}
.nav-tabs-scroll{display:flex;gap:4px;min-width:100%}
.nav-tab{display:inline-flex;align-items:center;gap:6px;padding:10px 16px;font-size:var(--text-sm);font-weight:600;color:var(--text2);text-decoration:none;border-bottom:2px solid transparent;transition:color .15s,border-color .15s;white-space:nowrap;cursor:pointer}
.nav-tab:hover{color:var(--text);border-color:var(--border2)}
.nav-tab--active,.nav-tab.active{color:var(--primary);border-color:var(--primary)}
.nav-tab-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--surface2);color:var(--text3);font-size:var(--text-xs);font-weight:700;line-height:1}
.nav-tab--active .nav-tab-count,.nav-tab.active .nav-tab-count{background:var(--primary-ghost);color:var(--primary)}
.badge-success{background:var(--color-success-subtle);color:var(--color-success);border-color:var(--color-success-border,#abf5d1)}
.badge-warning,.badge-warn{background:var(--color-warning-subtle);color:var(--color-warning);border-color:var(--color-warning-border,#f8d97e)}
.badge-danger{background:var(--color-danger-subtle);color:var(--color-danger);border-color:var(--color-danger-border,#ffbdad)}
.badge-info{background:var(--primary-ghost);color:var(--primary);border-color:var(--color-primary-border,#adccff)}
.badge-muted{background:var(--surface2);color:var(--text3);border-color:var(--border)}
.badge-primary{background:var(--primary-ghost);color:var(--primary);border-color:var(--color-primary-border,#adccff)}
.badge-secondary{background:var(--surface2);color:var(--text2);border-color:var(--border)}
/* BEM-style badge variants (badge--tone) */
.badge--info{background:var(--primary-ghost);color:var(--primary);border-color:var(--color-primary-border,#adccff)}
.badge--success{background:var(--color-success-subtle);color:var(--color-success);border-color:var(--color-success-border,#abf5d1)}
.badge--warning,.badge--warn{background:var(--color-warning-subtle);color:var(--color-warning);border-color:var(--color-warning-border,#f8d97e)}
.badge--danger{background:var(--color-danger-subtle);color:var(--color-danger);border-color:var(--color-danger-border,#ffbdad)}
.badge--muted,.badge--neutral{background:var(--surface2);color:var(--text3);border-color:var(--border)}
.badges-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
/* Prefix ID badge shown in table rows (e.g. CUS-12345678) */
.badge-id{display:inline-block;font-family:inherit;font-size:11px;font-weight:600;color:var(--text3);background:var(--surface2);border:1px solid var(--border);border-radius:0;padding:1px 6px;letter-spacing:.02em;user-select:all;direction:ltr;unicode-bidi:isolate}

/* ── خيط محادثة تذاكر الدعم الفني (مشترك بين الأدمن والتينانت) ── */
.ticket-thread{display:flex;flex-direction:column;gap:14px;margin-bottom:20px}
.ticket-message{max-width:min(78%,560px);padding:12px 16px;border-radius:var(--radius-md);border:1px solid var(--border);background:var(--surface)}
.ticket-message__meta{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:var(--text-xs);color:var(--text3)}
.ticket-message__body{font-size:var(--text-sm);color:var(--text);line-height:1.6;white-space:pre-wrap;word-break:break-word;margin:0}
.ticket-message--tenant,.ticket-message--guest{align-self:flex-start;background:var(--surface)}
.ticket-message--admin{align-self:flex-end;background:var(--primary-ghost);border-color:var(--primary-border,var(--border))}
@media(max-width:640px){.ticket-message{max-width:92%}}

/* ── صندوق وارد الرسائل الموحد (مشترك بين المعلن والمشتري) ── */
.msg-inbox-list{border:1px solid var(--border);border-radius:var(--radius-md,0);overflow:hidden}
.msg-inbox-row{display:flex;align-items:center;gap:14px;padding:14px 16px;border-bottom:1px solid var(--border);text-decoration:none;color:inherit;transition:background 0.15s}
.msg-inbox-row:last-child{border-bottom:none}
.msg-inbox-row:hover{background:var(--surface2)}
.msg-inbox-row__avatar{width:44px;height:44px;border-radius:50%;background:var(--surface2);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.msg-inbox-row__avatar i{font-size:20px;color:var(--text3)}
.msg-inbox-row__body{flex:1;min-width:0}
.msg-inbox-row__top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.msg-inbox-row__title{font-size:var(--text-sm);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg-inbox-row__time{font-size:11px;color:var(--text3);flex-shrink:0}
.msg-inbox-row__sub{font-size:var(--text-xs);color:var(--text3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg-inbox-row__badge{margin-inline-start:auto;font-weight:700;border-radius:0;padding:2px 6px;flex-shrink:0}

/* ── صفحة تذكرة الزائر (guest ticket page) ── */
.guest-ticket-card{max-width:720px;margin:0 auto;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,0.06)}
.guest-ticket-card__header{padding:20px 24px;border-bottom:1px solid var(--color-border);background:var(--color-surface-2)}
.guest-ticket-card__back{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-sm);color:var(--primary);text-decoration:none;font-weight:500;padding:6px 14px;border-radius:var(--radius-sm);border:1px solid var(--color-primary-border,transparent);background:var(--color-primary-subtle);transition:background 0.2s,color 0.2s}
.guest-ticket-card__back:hover{background:var(--primary);color:#fff}
.guest-ticket-card__title{margin:12px 0 6px;font-size:var(--text-xl);font-weight:700;color:var(--color-text);line-height:1.4}
.guest-ticket-card__meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.guest-ticket-card__meta-id{font-size:var(--text-sm);color:var(--color-text-muted)}
.guest-ticket-card__meta-id strong{font-weight:600}
.guest-ticket-card__auto-refresh{font-size:var(--text-xs);color:var(--color-text-muted);opacity:0.6;margin-inline-start:auto}
.guest-ticket-card__body{padding:20px 24px}
.guest-ticket-card__notice{margin-bottom:16px}
.guest-ticket-card__reply{display:flex;flex-direction:column;gap:12px;margin-top:24px}
.guest-ticket-card__reply textarea{display:block;width:100%;padding:10px;resize:vertical}
.guest-ticket-card__reply button{align-self:flex-start}
.guest-ticket-card__closed{margin-top:24px;padding:14px 16px;border-radius:var(--radius-md);background:var(--color-surface-2);color:var(--color-text-muted);font-size:var(--text-sm)}
.guest-ticket-card__closed a{color:var(--primary);font-weight:500}
[data-theme="dark"] .guest-ticket-card{background:var(--surface);border-color:var(--border)}
[data-theme="dark"] .guest-ticket-card__header{background:var(--surface2);border-bottom-color:var(--border)}
[data-theme="dark"] .guest-ticket-card__back{background:rgba(59,130,246,0.12);border-color:rgba(59,130,246,0.25)}
[data-theme="dark"] .guest-ticket-card__title{color:var(--text)}
[data-theme="dark"] .guest-ticket-card__closed{background:var(--surface2);color:var(--text2)}

/* ── Tables: نظام مركزي موحّد في table.styles.js (يُستهلك من @saas/ui) ── */
.table-container{width:100%;overflow-x:auto;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);-webkit-overflow-scrolling:touch}
.table-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden}
.table-responsive{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
/* أنماط .data-table موحّدة في packages/ui/src/styles/table.styles.js — تُستهلك عبر tableStyles */

/* ── Actions Bar ──────────────────────────────────────────── */
.actions-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.actions-bar form{display:flex;gap:8px;flex:1;max-width:400px}
.actions-bar input{padding:7px 12px;border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);outline:none;width:100%;font-size:var(--text-sm);background:var(--color-surface)}
.actions-bar input:focus{border-color:var(--color-primary)}
.text-danger{color:var(--color-danger)}
.btn-link{background:none;border:none;color:var(--color-primary);cursor:pointer;padding:0;font-weight:500;text-decoration:underline;font-size:var(--text-sm)}
.btn-link-danger{color:var(--color-danger)}

/* ── Brand Logo ───────────────────────────────────────────── */
.brand-logo{height:36px;width:auto;object-fit:contain;flex-shrink:0}.brand-logo--compact{height:28px;flex-shrink:0}

/* ── Page Header (content-level) ─────────────────────────── */
.page-head,.page-header,.page-header-bar,.actions-bar,.actions-bar--offset,.page-heading,.page-subtitle{display:none!important}
.page-narrow{width:100%}.page-narrow--center{text-align:center}.back-link{color:var(--color-text-subtle);text-decoration:none;font-size:var(--text-sm)}
.back-link:hover{color:var(--color-primary)}

/* ── Form Card ────────────────────────────────────────────── */
.form-actions{display:flex;gap:12px;margin-top:16px}
.settings-layout{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:769px){.settings-layout{grid-template-columns:200px 1fr}}
.settings-nav,.settings-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md)}
.settings-nav{display:grid;align-content:start;padding:8px}
.settings-panel{padding:20px}
.form-row{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:641px){.form-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.form-control{width:100%;padding:8px 12px;border:1px solid var(--border2);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font:inherit}
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.toggle{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--border2);border-radius:var(--radius-sm);background:var(--surface);cursor:pointer}

/* ── Toggle Switch (مكوّن مركزي موحّد لكل حالة تفعيل/تعطيل ثنائية، renderToggle) ── */
.toggle-switch{position:relative;display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none;line-height:1}
.toggle-switch input{position:absolute;opacity:0;width:1px;height:1px;margin:0;padding:0}
.toggle-switch__track{position:relative;display:inline-block;width:40px;height:22px;border-radius:0;background:var(--color-border-strong,var(--border2));transition:background .15s ease;flex-shrink:0}
.toggle-switch__thumb{position:absolute;top:2px;inset-inline-start:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:inset-inline-start .15s ease}
.toggle-switch input:checked+.toggle-switch__track{background:var(--color-primary,var(--primary))}
.toggle-switch input:checked+.toggle-switch__track .toggle-switch__thumb{inset-inline-start:20px}
.toggle-switch input:focus-visible+.toggle-switch__track{outline:2px solid var(--color-primary,var(--primary));outline-offset:2px}
.toggle-switch__label{font-size:var(--text-sm);color:var(--color-text,var(--text))}
.toggle-switch--sm .toggle-switch__track{width:32px;height:18px}
.toggle-switch--sm .toggle-switch__thumb{width:14px;height:14px}
.toggle-switch--sm input:checked+.toggle-switch__track .toggle-switch__thumb{inset-inline-start:16px}
.toggle-switch--disabled,.toggle-switch input:disabled+.toggle-switch__track{opacity:.5;cursor:not-allowed;pointer-events:none}
.toggle-switch-form{display:inline-flex;margin:0}

/* ── Gateway choice cards (product form) ── */
.gw-choice:hover{border-color:var(--primary)!important;background:var(--primary-ghost)}
.gw-choice:has(input:checked){border-color:var(--primary);background:var(--primary-ghost)}
.gw-choice:has(input:checked) span{color:var(--primary)}

/* ── Notice / Alert: موحّد داخل banner system أعلاه (aliases) ── */
.table-action-form{display:inline}

/* ── Bottom Bar (Action Toolbar) ──────────────────────────── */
.action-toolbar,.bottom-bar{position:sticky;bottom:0;z-index:var(--z-sticky);height:auto;min-height:calc(var(--bottom-h,64px) + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 24px;gap:16px;flex-shrink:0}
.action-toolbar__inner{display:flex;gap:8px;align-items:center;flex:1;min-width:0;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain}
.action-toolbar__end{display:flex;gap:12px;align-items:center;flex-shrink:0;flex-wrap:nowrap}
.action-toolbar__spacer{flex:1}
.action-toolbar__label{color:var(--text3);font-size:var(--text-sm)}
.toolbar-btn{min-width:100px;text-align:center}
/* Tool actions في الفوتر — صف واحد يتمرر أفقياً مع تعدد الأزرار */
.action-toolbar__end .ui-tool-actions{flex-wrap:nowrap;justify-content:flex-end;gap:var(--space-2)}
.action-toolbar__end .ui-tool-actions .toolbar-btn{min-width:auto}
.action-toolbar__end .ui-tool-actions .ui-pr-toolbar-sep{margin:0 2px}
/* ── Pagination inside bottom bar ─────────────────────────── */
.bottom-pagination{display:flex;gap:4px;align-items:center}
.bottom-pagination-info{font-size:var(--text-xs);color:var(--text3);font-weight:600;font-family:var(--font-num);white-space:nowrap}
.pg-btn{width:40px;height:40px;border:1px solid var(--border);background:var(--surface2);color:var(--text2);font-size:var(--text-xs);font-weight:700;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-family:var(--font-num);cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.pg-btn:hover{border-color:var(--primary);color:var(--primary)}
.pg-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.pg-btn:disabled,.pg-btn.disabled{opacity:.35;cursor:not-allowed;pointer-events:none}

.empty-state{text-align:center;padding:48px 24px;margin-top:16px}.empty-state__icon{font-size:var(--text-3xl);margin:0 0 12px}
.table-empty{text-align:center;padding:32px 16px;color:var(--text3);font-size:var(--text-sm)}
.select-all-checkbox,.row-select-checkbox{width:16px;height:16px;cursor:pointer;accent-color:var(--primary)}

/* ── Centralized Empty State Card (renderEmptyState) ─────────────────────── */
.empty-state-card{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:clamp(40px,6vw,64px) 24px;margin:16px 0;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg,16px);
  box-shadow:0 1px 3px rgba(0,0,0,0.04);
}
.empty-state-card__halo{
  width:clamp(72px,10vw,96px);height:clamp(72px,10vw,96px);border-radius:50%;
  display:flex;align-items:center;justify-content:center;margin-bottom:20px;
  background:linear-gradient(135deg,rgba(31,117,254,0.10),rgba(31,117,254,0.04));
  position:relative;
}
.empty-state-card__halo::before{
  content:'';position:absolute;inset:-2px;border-radius:50%;
  background:linear-gradient(135deg,var(--primary,#1F75FE),transparent);
  opacity:0.15;filter:blur(8px);
}
.empty-state-card__icon{
  font-size:clamp(2rem,4vw,2.5rem);color:var(--primary,#1F75FE);position:relative;z-index:1;
}
.empty-state-card__title{
  font-size:clamp(1.1rem,2vw,1.35rem);font-weight:800;color:var(--text);
  margin:0 0 8px;line-height:1.4;
}
.empty-state-card .empty-state__hint{
  font-size:var(--text-sm);color:var(--text2);line-height:1.7;max-width:420px;margin:0 auto 24px;
}
.empty-state-card__actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:12px}
.empty-state-card__reset{
  font-size:var(--text-xs);color:var(--text3);text-decoration:none;
  display:inline-flex;align-items:center;gap:4px;padding:6px 12px;border-radius:var(--radius-sm);
  transition:color .2s,background .2s;
}
.empty-state-card__reset:hover{color:var(--primary);background:var(--surface2)}
/* Tone variants — halo color */
.empty-state-card--success .empty-state-card__halo{background:linear-gradient(135deg,rgba(34,197,94,0.10),rgba(34,197,94,0.04))}
.empty-state-card--success .empty-state-card__halo::before{background:linear-gradient(135deg,var(--color-success,#22c55e),transparent)}
.empty-state-card--success .empty-state-card__icon{color:var(--color-success,#22c55e)}
.empty-state-card--warn .empty-state-card__halo{background:linear-gradient(135deg,rgba(245,158,11,0.10),rgba(245,158,11,0.04))}
.empty-state-card--warn .empty-state-card__halo::before{background:linear-gradient(135deg,var(--color-warning,#f59e0b),transparent)}
.empty-state-card--warn .empty-state-card__icon{color:var(--color-warning,#f59e0b)}
.empty-state-card--danger .empty-state-card__halo{background:linear-gradient(135deg,rgba(239,68,68,0.10),rgba(239,68,68,0.04))}
.empty-state-card--danger .empty-state-card__halo::before{background:linear-gradient(135deg,var(--color-danger,#ef4444),transparent)}
.empty-state-card--danger .empty-state-card__icon{color:var(--color-danger,#ef4444)}
.empty-state-card--accent .empty-state-card__halo{background:linear-gradient(135deg,rgba(168,85,247,0.10),rgba(168,85,247,0.04))}
.empty-state-card--accent .empty-state-card__halo::before{background:linear-gradient(135deg,var(--color-accent,#a855f7),transparent)}
.empty-state-card--accent .empty-state-card__icon{color:var(--color-accent,#a855f7)}
@media(max-width:640px){
  .empty-state-card{padding:32px 16px}
  .empty-state-card__actions{flex-direction:column;width:100%}
  .empty-state-card__actions .primary-button,.empty-state-card__actions .button-secondary{width:100%;justify-content:center}
}
.metric-card{background:var(--surface1);border:1px solid var(--border2);border-radius:0;padding:16px 20px;transition:border-color .2s}
.metric-card:hover{border-color:var(--primary-dim)}
.metric-card--warn{border-color:var(--color-warning)}
.metric-card__label{font-size:var(--text-xs);color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.metric-card__value{font-size:var(--text-2xl);font-weight:700;line-height:1.2}
.metric-card__sub{font-size:var(--text-xs);color:var(--text3);margin-top:6px}
.text-success{color:var(--color-success)}.text-error{color:var(--color-danger)}
.error-text{color:var(--color-danger);font-size:var(--text-xs)}
.danger-card{border-color:var(--color-danger)!important;border-inline-start-color:var(--color-danger)!important;padding:40px 24px}.danger-card__icon{font-size:var(--text-3xl);margin:0}.danger-card__title{color:var(--color-danger);margin-top:12px}.danger-card__note{color:var(--color-text-subtle);font-size:var(--text-sm)}.danger-card__actions{margin-top:24px;display:flex;gap:12px;justify-content:center}

/* ── Utilities ────────────────────────────────────────────── */
.actions-bar--offset{margin-top:12px}.filter-form--wide{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.filter-form--wide>*{min-width:0}.filter-input--grow{flex:2}.muted{color:var(--color-text-muted)}
.topbar-title,.topbar>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.otp-input{text-align:center;letter-spacing:0;font-size:var(--text-xl);font-weight:700}
.account-action-footer{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.text-action-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:10px 16px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:transparent;color:var(--color-primary);font-size:var(--text-sm);font-weight:500;cursor:pointer;font-family:inherit;transition:background .15s,border-color .15s;text-decoration:none;white-space:nowrap}
.text-action-button:hover:not(:disabled){background:var(--color-primary-subtle);border-color:var(--color-primary)}
.text-action-button:disabled{opacity:.5;cursor:not-allowed}
.text-action-button--muted{color:var(--color-text-subtle);border-color:transparent;background:transparent}
.text-action-button--muted:hover:not(:disabled){background:var(--color-surface-2);border-color:var(--color-border);color:var(--color-text)}
.text-action-button--danger{color:var(--color-danger,#ef4444);border-color:transparent;background:transparent}
.text-action-button--danger:hover:not(:disabled){background:rgba(239,68,68,.08);border-color:var(--color-danger,#ef4444);color:var(--color-danger,#ef4444)}

/* ── Landing Page ─────────────────────────────────────────── */
.landing-primary-link{text-decoration:none;padding:7px 16px}.landing-pricing-link{text-decoration:none;display:block;text-align:center;padding:10px}.landing-footer__links{margin-bottom:12px}.landing-footer__separator{margin:0 8px}

/* ── Unified Landing Scrollbar (professional, dynamic platform color) ── */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--color-primary,#1F75FE) 55%,transparent);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--color-primary,#1F75FE) 80%,transparent);background-clip:padding-box}
::-webkit-scrollbar-corner{background:transparent}
html{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--color-primary,#1F75FE) 55%,transparent) transparent;overflow-x:clip}
/* Hide webkit scrollbar on elements with inline scrollbar-width:none (table containers, toolbars) */
[style*="scrollbar-width:none"]::-webkit-scrollbar{display:none;width:0;height:0}

/* ── Landing Nav (عائم شفاف فوق الهيرو، مركزي 1100px، scroll hide/show) ── */
.landing-nav-wrapper{position:sticky;top:0;left:0;right:0;width:100%;z-index:1000;box-sizing:border-box;padding:0;background:color-mix(in srgb,var(--surface,var(--color-surface,#ffffff)) 85%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid color-mix(in srgb,var(--border,var(--color-border,#e2e8f0)) 60%,transparent);transition:transform 0.35s cubic-bezier(0.16,1,0.3,1),opacity 0.3s ease,background 0.3s ease,border-color 0.3s ease,box-shadow 0.3s ease;will-change:transform,opacity}
.landing-nav-wrapper.is-hidden{transform:translateY(-110%);opacity:0;pointer-events:none}
.landing-nav-wrapper.is-scrolled{background:color-mix(in srgb,var(--surface,var(--color-surface,#ffffff)) 95%,transparent);border-bottom-color:var(--border,var(--color-border,#e2e8f0));box-shadow:0 4px 20px rgba(0,0,0,0.06)}
[data-theme="dark"] .landing-nav-wrapper{background:color-mix(in srgb,#0F172A 85%,transparent);border-bottom-color:color-mix(in srgb,var(--border,#334155) 60%,transparent)}
[data-theme="dark"] .landing-nav-wrapper.is-scrolled{background:color-mix(in srgb,#0F172A 95%,transparent);border-bottom-color:var(--border,#334155);box-shadow:0 4px 24px rgba(0,0,0,0.4)}
@media(prefers-color-scheme:dark){
  .landing-nav-wrapper:not([data-theme="light"]){background:color-mix(in srgb,#0F172A 85%,transparent);border-bottom-color:color-mix(in srgb,var(--border,#334155) 60%,transparent)}
  .landing-nav-wrapper:not([data-theme="light"]).is-scrolled{background:color-mix(in srgb,#0F172A 95%,transparent);border-bottom-color:var(--border,#334155);box-shadow:0 4px 24px rgba(0,0,0,0.4)}
}
.landing-nav{width:100%;max-width:100%;padding:0 clamp(16px,3vw,40px);background:transparent;border:none;border-radius:0;box-shadow:none;margin:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;box-sizing:border-box;height:var(--topbar-h,64px)}

.landing-nav-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--color-text);flex-shrink:0;justify-self:start}
.landing-nav-brand strong{font-size:1.2rem;font-weight:900;color:var(--color-text)}
.landing-nav-brand .brand-logo{max-height:34px;width:auto;object-fit:contain;flex-shrink:0}
.landing-nav-center{display:flex;align-items:center;gap:clamp(6px,1.2vw,20px);justify-content:center}
.landing-nav-center .btn-outline{border:none!important;background:transparent!important;padding:8px 16px!important;color:var(--text,var(--color-text,#0f172a));font-weight:600;transition:color 0.15s ease}
.landing-nav-center .btn-outline:hover{color:var(--primary)!important}
.landing-nav-left{display:flex;align-items:center;gap:10px;flex-shrink:0;justify-self:end}
.nav-account-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-sm,0);color:var(--text,var(--color-text,#0f172a));text-decoration:none;transition:background 0.2s ease,color 0.2s ease;-webkit-tap-highlight-color:transparent;flex-shrink:0}
.nav-account-btn:hover{background:transparent;color:var(--primary)}
[data-theme="dark"] .nav-account-btn:hover{background:transparent}
.nav-account-btn i{font-size:24px;line-height:1}
.landing-primary-link{background:var(--primary)!important;color:var(--color-text-on-primary,#fff)!important;border:1px solid transparent!important;border-radius:var(--control-radius,var(--radius-sm,0))!important;min-height:var(--control-h,40px)!important;height:var(--control-h,40px)!important;padding:0 var(--control-padding-x,18px)!important;font-size:var(--control-font-size,var(--text-sm,14px))!important;font-weight:var(--font-weight-semibold,600)!important;font-family:inherit!important;line-height:1!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;text-decoration:none!important;cursor:pointer!important;box-sizing:border-box!important;white-space:nowrap!important;user-select:none!important;-webkit-tap-highlight-color:transparent!important;touch-action:manipulation!important;transition:background-color 0.15s ease,border-color 0.15s ease,box-shadow 0.15s ease,transform 0.1s ease!important}
.landing-primary-link:hover{background:var(--primary-dim,#1558c9)!important;color:var(--color-text-on-primary,#fff)!important;border-color:transparent!important}
.landing-primary-link:active{transform:translateY(1px)!important}
.landing-primary-link:focus-visible{outline:2px solid var(--primary)!important;outline-offset:2px!important}
.landing-nav-hamburger{display:none;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:40px;height:40px;background:transparent;border:none;cursor:pointer;padding:0;z-index:1001;flex-shrink:0;-webkit-tap-highlight-color:transparent;touch-action:manipulation;border-radius:var(--radius-sm,0);transition:background 0.2s,color 0.2s,transform 0.15s;color:var(--text,var(--color-text,#0f172a))}
.landing-nav-hamburger span{display:block;width:20px;height:2px;background:var(--color-text);border-radius:0;transition:0.3s cubic-bezier(0.16,1,0.3,1);margin:0 auto;pointer-events:none}
.landing-nav-hamburger:hover{background:transparent;color:var(--primary,#1F75FE)}
.landing-nav-hamburger:hover span{background:var(--primary,#1F75FE)}
[data-theme="dark"] .landing-nav-hamburger:hover{background:transparent}
.landing-nav-hamburger.active span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.landing-nav-hamburger.active span:nth-child(2){opacity:0}
.landing-nav-hamburger.active span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.landing-mobile-menu{display:flex;flex-direction:column;position:fixed;top:0;left:0;width:min(86vw,300px);height:100vh;height:100dvh;background:var(--surface,var(--color-surface,#fff));border-inline-end:1px solid var(--border,#e2e8f0);box-shadow:10px 0 40px rgba(0,0,0,0.25);padding:0;z-index:1002;transition:transform 0.3s cubic-bezier(0.16,1,0.3,1),visibility 0.3s ease;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;box-sizing:border-box;visibility:hidden;pointer-events:none;transform:translateX(-100%);will-change:transform;touch-action:manipulation}
[data-theme="dark"] .landing-mobile-menu{background:var(--surface,#1E293B);border-inline-end-color:var(--border,#334155);box-shadow:10px 0 40px rgba(0,0,0,0.5)}
.landing-mobile-menu[data-drawer]:not(.is-open),.landing-mobile-menu:not(.is-open){transform:translateX(-100%)!important;visibility:hidden!important;pointer-events:none!important}
.landing-mobile-menu[data-drawer].is-open,.landing-mobile-menu.is-open{transform:translateX(0)!important;visibility:visible!important;pointer-events:auto!important}
.landing-mobile-menu__links{display:flex;flex-direction:column;gap:2px;padding:12px 8px;flex:1 1 auto}
.landing-mobile-menu__link,.landing-mobile-menu a:not(.landing-primary-link):not(.landing-nav-brand):not(.landing-mobile-menu__social){min-height:48px;height:48px;display:flex;align-items:center;gap:12px;padding-inline:16px;color:var(--color-sidebar-text,var(--text2,#475569));text-decoration:none;font-size:var(--text-base,14px);font-weight:500;border-radius:var(--radius-sm,0);border-inline-start:3px solid transparent;box-sizing:border-box;transition:background 0.15s ease,color 0.15s ease,border-color 0.15s ease;touch-action:manipulation}
.landing-mobile-menu__link:hover,.landing-mobile-menu a:not(.landing-primary-link):not(.landing-nav-brand):not(.landing-mobile-menu__social):hover{background:var(--primary-ghost,rgba(31,117,254,.10));color:var(--primary,#1F75FE);border-inline-start-color:var(--primary,#1F75FE)}
.landing-mobile-menu__link.is-active,.landing-mobile-menu a:not(.landing-primary-link):not(.landing-nav-brand):not(.landing-mobile-menu__social).active{background:var(--primary-ghost,rgba(31,117,254,.14));color:var(--primary,#1F75FE);font-weight:700;border-inline-start-color:var(--primary,#1F75FE)}
[data-theme="dark"] .landing-mobile-menu__link,[data-theme="dark"] .landing-mobile-menu a:not(.landing-primary-link):not(.landing-nav-brand):not(.landing-mobile-menu__social){color:var(--text2,#CBD5E1)}
[data-theme="dark"] .landing-mobile-menu__link:hover,[data-theme="dark"] .landing-mobile-menu a:not(.landing-primary-link):not(.landing-nav-brand):not(.landing-mobile-menu__social):hover{background:var(--primary-ghost,rgba(31,117,254,.18));color:var(--primary,#60A5FA);border-inline-start-color:var(--primary,#60A5FA)}
.landing-mobile-menu__icon{font-size:18px;width:20px;text-align:center;color:currentColor;flex-shrink:0;line-height:1}
.landing-mobile-menu .landing-primary-link{width:100%!important;min-height:44px!important;height:44px!important;margin:0!important;font-size:var(--text-base,14px)!important;justify-content:center!important}
.landing-mobile-menu .mobile-account-link{display:flex;align-items:center;gap:8px;padding:12px 16px;margin:0 16px;border:1px solid var(--color-border);border-radius:var(--radius-md,0);color:var(--color-text);font-weight:600;text-decoration:none;transition:background 0.15s ease,border-color 0.15s ease;touch-action:manipulation}
.landing-mobile-menu .mobile-account-link:hover{background:var(--color-primary-subtle,rgba(31,117,254,0.08));border-color:var(--primary)}
.landing-mobile-menu .mobile-account-link img,.landing-mobile-menu .mobile-account-link .avatar-fallback{width:28px;height:28px;border-radius:50%;object-fit:cover;flex-shrink:0}
.landing-mobile-menu .mobile-account-icon{font-size:20px;vertical-align:middle;margin-inline-end:6px}
.landing-mobile-menu__brand{display:flex;align-items:center;justify-content:space-between;gap:12px;height:var(--topbar-h,64px);padding:0 16px;padding-top:env(safe-area-inset-top,0);border-bottom:1px solid var(--color-border);flex-shrink:0;position:sticky;top:0;background:color-mix(in srgb,var(--surface,var(--color-surface,#fff)) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:2}
.landing-mobile-menu__brand .landing-nav-brand{order:1;flex:1;font-weight:700;font-size:1.05rem;color:var(--color-text);text-decoration:none;display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden;justify-content:flex-start}
.landing-mobile-menu__brand .landing-nav-brand strong{font-size:1.05rem!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}
.landing-mobile-menu__brand .landing-nav-brand .brand-logo{max-height:28px!important;width:auto!important;object-fit:contain;flex-shrink:0}
.landing-mobile-menu__close{order:2;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex-shrink:0;border:none;background:transparent;color:var(--text,var(--color-text,#0f172a));border-radius:var(--radius-sm,0);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background 0.2s,color 0.2s,transform 0.15s;margin-inline-start:auto}
.landing-mobile-menu__close:hover{background:transparent;color:var(--primary,var(--color-primary,#1F75FE))}
.landing-mobile-menu__close:active{transform:scale(0.95)}
.landing-mobile-menu__close:focus-visible{outline:2px solid var(--primary,var(--color-primary,#1F75FE));outline-offset:2px}
.landing-mobile-menu__close i{font-size:24px;line-height:1}
[data-theme="dark"] .landing-mobile-menu__brand{border-bottom-color:var(--border)}
[data-theme="dark"] .landing-mobile-menu__close{color:var(--text)}
[data-theme="dark"] .landing-mobile-menu__close:hover{background:transparent;color:var(--primary)}
.landing-mobile-menu-backdrop{display:block;visibility:hidden;pointer-events:none;position:fixed;top:0;left:0;width:100%;height:100vh;height:100dvh;background:rgba(0,0,0,0.45);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:1001;opacity:0;transition:opacity 0.25s ease,visibility 0.25s ease;will-change:opacity;touch-action:manipulation}
.landing-mobile-menu-backdrop.active,.landing-mobile-menu-backdrop.is-active{visibility:visible;pointer-events:auto;opacity:1}
.landing-mobile-menu__footer{margin-top:auto;padding:16px;border-top:1px solid var(--color-border,#e2e8f0);background:var(--surface);flex-shrink:0}
.landing-mobile-menu__socials{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-bottom:16px}
.landing-mobile-menu__social{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--color-surface-2,#f1f5f9);color:var(--color-text);text-decoration:none;font-size:18px;transition:background 0.15s ease,color 0.15s ease,transform 0.15s ease}
.landing-mobile-menu__social:hover{background:var(--primary);color:#fff;transform:translateY(-2px)}
.landing-mobile-menu__social:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.landing-mobile-menu__copyright{text-align:center;font-size:var(--text-xs,12px);color:var(--color-text-muted,#64748b);line-height:1.5}
[data-theme="dark"] .landing-mobile-menu__social{background:rgba(255,255,255,0.08);color:var(--color-text)}
[data-theme="dark"] .landing-mobile-menu__social:hover{background:var(--primary);color:#fff}
[data-theme="dark"] .landing-mobile-menu__footer{border-top-color:var(--border,#334155)}
@media(min-width:1024px){.landing-mobile-menu,.landing-mobile-menu-backdrop{display:none!important}}
@media(max-width:1023px){
  html:has(.landing-nav-wrapper){scroll-padding-top:calc(var(--topbar-h,64px) + 18px)}
  .landing-nav{padding:0 16px!important;max-width:100%!important;border-radius:0!important;gap:8px!important;grid-template-columns:1fr auto auto!important;height:var(--topbar-h,64px)!important}
  .landing-nav-hamburger{order:3;display:flex!important;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--radius-sm,0);background:transparent;border:none;transition:background 0.2s,color 0.2s,transform 0.15s;flex-shrink:0;margin-inline-start:-4px}
  [data-theme="dark"] .landing-nav-hamburger{background:transparent}
  .landing-nav-hamburger:active{transform:scale(0.95)}
  .landing-nav-brand{order:1;flex:1;min-width:0;gap:6px!important;justify-self:start;overflow:hidden}
  .landing-nav-brand strong{font-size:1.05rem!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
  .landing-nav-brand .brand-logo{max-height:28px!important;width:auto!important;object-fit:contain;flex-shrink:0}
  .landing-nav-center{display:none!important}
  .landing-nav-left{order:2;display:flex!important;align-items:center!important;gap:4px!important;flex-shrink:0;justify-self:end}
  .landing-nav-left > :not(.landing-nav-icon-btn):not(.landing-nav-search-trigger){display:none!important}
  /* درج الموبايل — safe area للأسفل (home indicator) */
  .landing-mobile-menu{padding-top:env(safe-area-inset-top,0);padding-bottom:env(safe-area-inset-bottom,0)}
}

/* ── Landing Nav — Search trigger (icon button, opens modal) ── */
.landing-nav-search-trigger{display:inline-flex}

/* ui-search-modal CSS moved to public-shell-styles.js (improved centering + animations) */


/* ── Landing Nav — Icon buttons (theme/favorites/account) ── */
.landing-nav-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-sm,0);color:var(--text,var(--color-text-subtle,#475569));text-decoration:none;transition:background .15s ease,color .15s ease;-webkit-tap-highlight-color:transparent;flex-shrink:0;position:relative;background:transparent;border:none;cursor:pointer;font-family:inherit}
.landing-nav-icon-btn:hover{background:var(--color-surface-2,var(--color-bg));color:var(--color-text)}
.landing-nav-icon-btn i{font-size:1.25rem}
.landing-nav-icon-badge{position:absolute;top:2px;inset-inline-end:2px;background:var(--color-danger,#ef4444);color:#fff;font-size:9px;font-weight:700;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 4px}

/* ── Landing Bottom Nav (mobile — للمتاجر) ── */
.landing-bottom-nav{position:fixed;bottom:0;inset-inline:0;height:var(--bottomnav-h,56px);background:var(--surface,var(--color-surface,#fff));border-top:1px solid var(--color-border);display:flex;align-items:center;justify-content:space-around;z-index:var(--z-bottomnav,50);padding-bottom:env(safe-area-inset-bottom,0)}
[data-theme="dark"] .landing-bottom-nav{background:var(--surface,var(--color-surface,#0f172a));border-top-color:var(--color-border)}
.landing-bottom-nav__item{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10px;font-weight:600;color:var(--color-text-muted);padding:var(--space-1,4px) var(--space-3,12px);transition:color .15s ease;text-decoration:none}
.landing-bottom-nav__item.is-active{color:var(--color-primary)}
.landing-bottom-nav__item i{font-size:1.25rem}
@media(min-width:769px){.landing-bottom-nav{display:none}}

html{scroll-behavior:smooth;scroll-padding-top:calc(var(--topbar-h,64px) + 20px)}
.ui-home-section, .ui-main, .ui-faq-section{scroll-margin-top:calc(var(--topbar-h,64px) + 20px)}

.btn-outline{border:1px solid var(--color-primary);border-radius:var(--radius-sm);color:var(--color-primary);padding:0 var(--control-padding-x, 14px);height:var(--control-h, 40px);box-sizing:border-box;justify-content:center;line-height:1;font-weight:600;text-decoration:none;background:transparent;cursor:pointer;font-size:var(--text-sm);display:inline-flex;align-items:center;transition:background 0.2s,color 0.2s}
.btn-outline:hover{background:var(--color-primary-subtle)}
/* ── Directory section (متاجرنا) ── */
.directory-card{display:flex;align-items:center;gap:14px;padding:16px 18px;background:var(--color-surface);border:1px solid color-mix(in srgb,var(--color-border) 80%,transparent);border-radius:var(--radius-lg,16px);text-decoration:none;color:var(--color-text);box-sizing:border-box;transition:transform 0.2s ease,box-shadow 0.2s ease,border-color 0.2s ease}
.directory-card:hover{transform:translateY(-3px);border-color:var(--color-primary);box-shadow:0 10px 24px color-mix(in srgb,var(--color-primary) 12%,transparent)}
.directory-card__logo{width:52px;height:52px;border-radius:12px;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--color-primary) 8%,transparent);font-size:22px;font-weight:700;color:var(--color-primary)}
.directory-card__logo img{width:100%;height:100%;object-fit:cover}
.directory-card__body{flex:1;min-width:0}
.directory-card__name{margin:0;font-size:clamp(0.95rem,1.2vw,1.05rem);font-weight:700;color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.directory-card__link{display:block;font-size:0.82rem;color:var(--color-text-subtle);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.directory-card__arrow{font-size:20px;color:var(--color-text-subtle);flex-shrink:0;transition:transform 0.2s ease,color 0.2s ease}
.directory-card:hover .directory-card__arrow{transform:translateX(-4px);color:var(--color-primary)}
[data-theme="dark"] .directory-card{background:#0F172A;border-color:color-mix(in srgb,var(--color-border,#334155) 80%,transparent)}
[data-theme="dark"] .directory-card:hover{border-color:var(--color-primary);box-shadow:0 10px 24px color-mix(in srgb,var(--color-primary) 20%,transparent)}
/* ── Flat Billing & Pricing System (V2) ───────────────────────── */
.pricing-plans-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;align-items:stretch;margin-top:24px}
.pricing-card-v2{display:flex;flex-direction:column;background:var(--surface,var(--color-surface,#fff));border:1px solid var(--border,var(--color-border,#e2e8f0));border-radius:var(--radius-lg,0);padding:28px 24px;position:relative;text-align:center;transition:transform 0.2s ease,border-color 0.2s ease,box-shadow 0.2s ease;box-shadow:var(--shadow-sm,0 1px 3px rgba(0,0,0,0.05))}
.pricing-card-v2:hover{transform:translateY(-4px);border-color:var(--primary,var(--color-primary,#1F75FE));box-shadow:0 16px 36px color-mix(in srgb,var(--primary,var(--color-primary,#1F75FE)) 12%,transparent)}
.pricing-card-v2--active{border:2px solid var(--primary,var(--color-primary,#1F75FE));background:var(--surface2,var(--color-surface-2,#f8fafc))}
.pricing-card-v2--popular{border:2px solid var(--primary,var(--color-primary,#1F75FE));box-shadow:0 8px 32px color-mix(in srgb,var(--primary,var(--color-primary,#1F75FE)) 12%,transparent)}
.pricing-card-v2__badge{position:absolute;top:-12px;inset-inline-start:50%;transform:translateX(-50%);background:var(--primary,var(--color-primary,#1F75FE));color:#fff;font-size:11px;font-weight:700;padding:5px 16px;border-radius:var(--radius-full,999px);text-transform:uppercase;letter-spacing:0.05em;white-space:nowrap}
[dir="rtl"] .pricing-card-v2__badge{transform:translateX(50%)}
.pricing-card-v2__name{font-size:var(--text-lg,18px);font-weight:700;color:var(--text,var(--color-text,#0f172a));margin:0 0 6px}
.pricing-card-v2__desc{font-size:var(--text-xs,13px);color:var(--text-secondary,var(--color-text-subtle,#475569));margin:0 0 18px;line-height:1.5;min-height:36px}
.pricing-card-v2__price-box{display:flex;align-items:baseline;justify-content:center;gap:4px;margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--border,var(--color-border,#e2e8f0))}
.pricing-card-v2__amount{font-size:38px;font-weight:800;color:var(--primary,var(--color-primary,#1F75FE));line-height:1;letter-spacing:-0.02em}
.pricing-card-v2__period{font-size:var(--text-xs,13px);color:var(--text-secondary,var(--color-text-subtle,#475569));font-weight:500}
.pricing-card-v2__features{flex:1;margin-bottom:24px}
.pricing-card-v2__features ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column}
.pricing-card-v2__features li{display:flex;align-items:center;gap:10px;padding:11px 0;font-size:var(--text-sm,13px);color:var(--text,var(--color-text,#0f172a));border-bottom:1px solid color-mix(in srgb,var(--border,var(--color-border,#e2e8f0)) 55%,transparent)}
.pricing-card-v2__features li:last-child{border-bottom:none}
.pricing-card-v2__features .check-icon{width:18px;height:18px;color:var(--primary,var(--color-primary,#1F75FE));flex-shrink:0}
.pricing-card-v2__actions{margin-top:auto;display:flex;flex-direction:column;gap:8px}
.pricing-card-v2__actions form{width:100%}
.pricing-card-v2__actions .button,.pricing-card-v2__actions .primary-button,.pricing-card-v2__actions .secondary-button{width:100%;text-align:center;justify-content:center}
.showcase-hero{padding:clamp(40px,8vw,72px) clamp(20px,5vw,80px) clamp(24px,5vw,40px);text-align:center;background:var(--color-surface)}
.showcase-hero h1{font-size:var(--text-3xl);margin:0 0 8px;line-height:1.2;color:var(--color-text)}
.showcase-hero p{color:var(--color-text-subtle);margin:0;font-size:var(--text-base)}
.showcase-empty{padding:clamp(60px,10vw,100px) 20px;text-align:center;color:var(--color-text-muted);font-size:var(--text-base)}
.showcase-section{padding:0 clamp(20px,5vw,80px) clamp(32px,6vw,56px);max-width:1200px;margin:0 auto}
.showcase-section h2{font-size:var(--text-xl);margin:0 0 4px;color:var(--color-text)}
.showcase-section__desc{color:var(--color-text-subtle);margin:0 0 20px;font-size:var(--text-sm)}
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}
@media(max-width:768px){
  .product-grid{grid-template-columns:repeat(2,1fr)!important;gap:12px!important}
  .product-card-v2 .product-card__image,
  .product-card-v2 .product-card__image--placeholder,
  .product-card-v2 img.product-card__image {
    height: auto !important;
    aspect-ratio: 1/1 !important;
  }
}
.product-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;transition:box-shadow 0.15s}
.product-card:hover{box-shadow:var(--shadow-md)}
.product-card__image{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:var(--color-bg)}
.product-card__image--placeholder{display:flex;align-items:center;justify-content:center;font-size:2.5rem;color:var(--color-text-muted)}
.product-card__body{padding:14px}
.product-card__body h3{margin:0 0 6px;font-size:var(--text-base);font-weight:600;color:var(--color-text)}
.product-card__body p{margin:0 0 10px;font-size:var(--text-sm);color:var(--color-text-subtle);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.product-card__price{font-weight:700;color:var(--color-primary);font-size:var(--text-base)}
.pricing-features li{display:flex;align-items:center;gap:8px;color:var(--color-text);font-size:var(--text-sm)}
.pricing-features li::before{content:"✓";color:var(--color-success);font-weight:700;flex-shrink:0}
/* public shell wrapper: ضيّق للمحتوى العام، يتوسع تلقائياً عبر الـ Container الخاص */
.public-body-wrap{max-width:1200px;margin:0 auto;width:100%;box-sizing:border-box}
/* ═══ Legacy landing-* compat shim ═══
/* كلاسات قديمة قد تظهر داخل customHtml مخزّن في DB — تعيد توجيهها لمكافئات hp-*.
   تُحذف بعد تنقية المحتوى المخزّن. */
.landing-section-white,.landing-section-gray,.landing-features,.landing-pricing,.landing-bottom-cta{padding:var(--hp-section-pad,clamp(48px,4vw + 24px,88px)) var(--space-page,16px);scroll-margin-top:calc(var(--topbar-h,64px) + 20px)}
.landing-section-label{text-align:center;margin-bottom:var(--space-8,32px)}
.landing-section-label h2{font-size:var(--hp-h2,clamp(1.5rem,3vw,2.1rem));font-weight:800;color:var(--color-text,var(--text));margin:0 0 var(--space-3,12px);line-height:1.2}
.landing-section-label p{font-size:var(--hp-sub,1.05rem);color:var(--color-text-subtle,var(--text2));margin:0 auto;line-height:1.6;max-width:640px}
.landing-grid-2,.landing-grid-3,.landing-features-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--hp-cards-gap,24px);max-width:var(--hp-cards-max,1100px);margin:0 auto}
.landing-grid-2>*,.landing-grid-3>*,.landing-features-grid>*{flex:1 1 min(280px,100%);max-width:var(--hp-card-max,360px)}
.landing-card,.landing-testimonial,.landing-faq-item{background:var(--color-surface,var(--surface));border:1px solid var(--color-border,var(--border));border-radius:var(--hp-card-radius,16px);padding:var(--space-6,24px);box-shadow:var(--hp-card-shadow,0 1px 3px rgba(0,0,0,.06))}
.landing-badge{display:inline-block;padding:6px 14px;background:var(--color-primary-subtle,var(--primary-ghost));color:var(--color-primary,var(--primary));font-weight:700;font-size:var(--text-sm,.85rem);border-radius:var(--radius-full,999px);margin-bottom:var(--space-3,12px)}
.landing-stat{font-size:var(--hp-stat-num,clamp(1.9rem,4vw,2.6rem));font-weight:900;color:var(--color-primary,var(--primary));line-height:1;margin-bottom:8px}
.landing-icon-box{width:56px;height:56px;background:var(--color-primary-subtle,var(--primary-ghost));color:var(--color-primary,var(--primary));display:flex;align-items:center;justify-content:center;border-radius:var(--radius-lg,16px);margin-bottom:var(--space-4,16px);font-size:24px}
.landing-step-num{font-size:2.5rem;font-weight:900;color:var(--color-primary-subtle,var(--primary-ghost));margin-bottom:var(--space-3,12px);line-height:1}
.landing-trust-bar{padding:clamp(18px,3vw,28px) var(--space-page,16px)}
.landing-trust-bar__inner{max-width:1100px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(16px,3vw,32px)}
.landing-video-wrapper,.landing-video-player{max-width:900px;margin:0 auto;border-radius:var(--radius-lg,16px);overflow:hidden}
.feature-card{background:var(--color-surface,var(--surface));border:1px solid var(--color-border,var(--border));border-radius:var(--hp-card-radius,16px);padding:var(--space-6,24px);text-align:start}
.feature-card-icon{width:48px;height:48px;border-radius:12px;background:var(--color-primary-subtle,var(--primary-ghost));color:var(--color-primary,var(--primary));display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:4px}
.feature-card h3{margin:0;font-size:var(--hp-card-title,1.15rem);font-weight:700;color:var(--color-text,var(--text))}
.feature-card p{color:var(--color-text-subtle,var(--text2));margin:0;line-height:1.6;font-size:var(--hp-desc,.95rem)}
/* ═══ TopCar Unified Design System ═══ */
.topcar-showcase-container { width:100%; max-width:1200px; margin:0 auto; box-sizing:border-box; }
.tc-search-box { display:grid; grid-template-columns:1fr 1fr 1fr 1fr auto; gap:12px; background:rgba(15,23,42,.75); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); padding:20px; border-radius:var(--radius-md,0); border:1px solid rgba(255,255,255,.15); box-shadow:var(--shadow-md, 0 10px 30px rgba(0,0,0,.25)); text-align:start; align-items:end; }
@media(max-width:1023px){ .tc-search-box { grid-template-columns:1fr 1fr; gap:10px; padding:14px; } .tc-search-box .tc-search-btn { grid-column:1/-1; } }
@media(max-width:480px){ .tc-search-box { grid-template-columns:1fr; gap:8px; padding:12px; } }
.tc-search-box label { display:block; font-size:12px; font-weight:700; color:#cbd5e1; margin-bottom:6px; }
.tc-search-input { width:100%; height:44px; background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.18); border-radius:var(--radius-sm,0); padding:0 14px; font-size:13.5px; font-family:inherit; box-sizing:border-box; outline:none; transition:border-color .2s,box-shadow .2s,background .2s; }
.tc-search-input:focus { border-color:var(--primary, #1F75FE); background:rgba(255,255,255,.14); box-shadow:0 0 0 3px rgba(31,117,254,.3); }
.tc-search-input option { background:#0f172a; color:#fff; }
.tc-search-btn { height:40px; background:linear-gradient(135deg,var(--primary, #1F75FE) 0%,#1558c9 100%); color:#fff; font-weight:700; border-radius:var(--radius-sm,0); font-size:var(--text-sm,14px); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:0 24px; white-space:nowrap; transition:transform .15s,box-shadow .2s; box-shadow:0 4px 14px rgba(31,117,254,.4); border:none; }
.tc-search-btn:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(31,117,254,.5); }

.tc-home-content { max-width:1200px; margin:0 auto; padding:0 0 48px; width:100%; box-sizing:border-box; }
.tc-cats { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-bottom:36px; }
@media(max-width:640px){ .tc-cats { grid-template-columns:repeat(3,1fr); gap:10px; } }
@media(max-width:480px){ .tc-cats { grid-template-columns:repeat(2,1fr); } }

.tc-stats { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:36px; }
.tc-stat { flex:1; min-width:140px; background:var(--surface); border:1px solid var(--border); padding:18px 20px; border-radius:var(--radius-md,0); display:flex; align-items:center; gap:14px; box-shadow:var(--shadow-xs); }
.tc-stat-icon { width:46px; height:46px; border-radius:var(--radius-sm,0); display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; }
.tc-stat__value { font-size:22px; font-weight:800; color:var(--text); line-height:1 }
.tc-stat__label { font-size:var(--text-xs); color:var(--text-secondary); margin-top:2px }
@media(max-width:480px){ .tc-stat { min-width:100px; padding:14px 16px; gap:10px } .tc-stat-icon { width:38px; height:38px; font-size:18px } .tc-stat__value { font-size:18px } }

/* ── Category quick-link cards (classifieds home) ── */
.tc-cat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:var(--space-4); margin-bottom:var(--space-8) }
.tc-cat-card { text-align:center; padding:var(--space-5) var(--space-3); text-decoration:none; color:var(--color-text) }
.tc-cat-card__icon { font-size:2rem; margin-bottom:var(--space-2) }
.tc-cat-card__label { font-weight:700; font-size:var(--text-sm) }

.tc-listings-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:36px; }
@media(max-width:1023px){ .tc-listings-grid { grid-template-columns:repeat(3,1fr); } }
@media(max-width:768px){ .tc-listings-grid { grid-template-columns:repeat(2,1fr); gap:12px; } }
@media(max-width:480px){ .tc-listings-grid { grid-template-columns:repeat(2,1fr); } }

.tc-section-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:20px; padding-bottom:14px; border-bottom:2px solid var(--border); }
.tc-section-title { margin:0; font-size:1.25rem; font-weight:900; color:var(--text); display:flex; align-items:center; gap:8px; }
.tc-view-all { display:inline-flex; align-items:center; gap:6px; padding:7px 18px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm,0); color:var(--text); text-decoration:none; font-size:13px; font-weight:700; transition:all .15s; }
.tc-view-all:hover { border-color:var(--primary); color:var(--primary); transform:translateX(-2px); }

.tc-services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:36px; }
@media(max-width:768px){ .tc-services-grid { grid-template-columns:repeat(2,1fr); gap:12px; } }
@media(max-width:480px){ .tc-services-grid { grid-template-columns:1fr; } }
.tc-service-card { display:flex; flex-direction:column; gap:12px; background:var(--surface); border:1px solid var(--border); padding:26px 22px; border-radius:var(--radius-md,0); text-decoration:none; color:var(--text); transition:transform .2s,box-shadow .2s; border-top:4px solid var(--primary); box-shadow:var(--shadow-xs); }
.tc-service-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.tc-service-icon { font-size:2.2rem; line-height:1; }
.tc-service-card h3 { margin:0; font-size:1.05rem; font-weight:800; color:var(--text); }
.tc-service-card p { margin:0; font-size:.88rem; color:var(--text-secondary); line-height:1.7; }

.tc-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:36px; }
@media(max-width:768px){ .tc-steps { grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px){ .tc-steps { grid-template-columns:1fr; gap:16px; } }
.tc-step { text-align:center; padding:26px 18px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md,0); box-shadow:var(--shadow-xs); }
.tc-step-num { display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:var(--radius-full,0); background:rgba(31,117,254,.12); color:var(--primary); font-size:1.35rem; font-weight:900; margin-bottom:16px; }
.tc-step h3 { margin:0 0 8px; font-size:1rem; font-weight:800; color:var(--text); }
.tc-step p { margin:0; font-size:.85rem; color:var(--text-secondary); line-height:1.7; }

.tc-about { display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:center; margin-bottom:36px; background:var(--surface); border:1px solid var(--border); padding:32px; border-radius:var(--radius-md,0); box-shadow:var(--shadow-xs); }
@media(max-width:768px){ .tc-about { grid-template-columns:1fr; gap:24px; padding:20px; } }
.tc-about-text h2 { margin:0 0 16px; font-size:1.5rem; font-weight:900; color:var(--text); }
.tc-about-text p { margin:0 0 16px; font-size:.93rem; color:var(--text-secondary); line-height:1.8; }
.tc-about-stats { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:20px; }
.tc-about-stat { background:var(--surface2, #f8fafc); border:1px solid var(--border); padding:16px; border-radius:var(--radius-sm,0); text-align:center; }
.tc-about-stat-val { font-size:1.65rem; font-weight:900; color:var(--primary); }
.tc-about-stat-lbl { font-size:.8rem; color:var(--text-secondary); margin-top:4px; }
.tc-about-visual { display:flex; align-items:center; justify-content:center; aspect-ratio:1/1; background:linear-gradient(135deg,rgba(31,117,254,.08) 0%,var(--surface2) 100%); border:1px solid var(--border); border-radius:var(--radius-md,0); font-size:5rem; }
.tc-about-logo { max-width:60%; max-height:60%; object-fit:contain }
.tc-about-cta { margin-top:20px }

/* ── Service teaser cards (classifieds home) ────────────── */
.tc-service-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:var(--space-3)}
@media(max-width:480px){.tc-service-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-2)}}
@media(max-width:480px){.tc-service-grid{grid-template-columns:1fr;gap:var(--space-2)}}
.tc-service-card{display:flex;flex-direction:column;text-decoration:none;color:var(--color-text);padding:var(--space-5)}
.tc-service-card__icon{font-size:2rem;margin-bottom:var(--space-3)}
.tc-service-card__title{font-size:var(--text-md);font-weight:700;margin:0 0 var(--space-2)}
.tc-service-card__text{font-size:var(--text-sm);color:var(--color-text-muted);margin:0;line-height:1.5}

/* ── Join section cards (classifieds home) ──────────────── */
.tc-join-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-bottom:32px}
@media(max-width:640px){.tc-join-grid{grid-template-columns:1fr}}
.tc-join-card{background:var(--surface);border:2px solid var(--border);border-top:3px solid var(--primary);border-radius:var(--radius-md,0);padding:32px 28px;display:flex;flex-direction:column;gap:20px;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s;position:relative;overflow:hidden}
.tc-join-card--featured{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dim) 100%);border:0;color:#fff;box-shadow:0 10px 32px -10px rgba(var(--color-primary-rgb,31,117,254),.45)}
.tc-join-card__deco{position:absolute;top:-20px;right:-20px;width:120px;height:120px;background:var(--primary-ghost);pointer-events:none}
.tc-join-card--featured .tc-join-card__deco{background:rgba(255,255,255,.10)}
.tc-join-card__deco--bottom{position:absolute;bottom:-30px;left:-20px;width:160px;height:160px;background:rgba(255,255,255,.06);pointer-events:none}
.tc-join-card__head{display:flex;align-items:center;gap:16px;position:relative;z-index:1}
.tc-join-card__avatar{width:64px;height:64px;background:var(--primary-ghost);border-radius:var(--radius-sm,0);display:flex;align-items:center;justify-content:center;font-size:2rem;flex-shrink:0}
.tc-join-card--featured .tc-join-card__avatar{background:rgba(255,255,255,.18)}
.tc-join-card__title{margin:0 0 4px;font-size:1.2rem;font-weight:800;color:var(--text)}
.tc-join-card--featured .tc-join-card__title{color:#fff}
.tc-join-card__badge{font-size:var(--text-xs);background:var(--color-success-subtle);color:var(--success);padding:3px 10px;border-radius:0;font-weight:700}
.tc-join-card--featured .tc-join-card__badge{background:rgba(255,255,255,.20);color:#fff}
.tc-join-card__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;position:relative;z-index:1}
.tc-join-card__list-item{display:flex;align-items:center;gap:10px;font-size:var(--text-sm);color:var(--text)}
.tc-join-card--featured .tc-join-card__list-item{color:rgba(255,255,255,.92)}
.tc-join-card__check{width:22px;height:22px;background:var(--color-success-subtle);color:var(--success);border-radius:0;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex-shrink:0}
.tc-join-card--featured .tc-join-card__check{background:rgba(255,255,255,.20);color:#fff}
.tc-join-card__actions{display:flex;flex-direction:column;gap:10px;margin-top:auto;position:relative;z-index:1}
.tc-join-card__btn{height:40px;font-weight:700;font-size:var(--text-sm)}
.tc-join-card__btn--alt{height:40px;font-weight:600;font-size:var(--text-xs)}
.tc-join-card__note{margin:0;font-size:var(--text-xs);color:rgba(255,255,255,.70);text-align:center}
@media(max-width:768px){.tc-join-grid{grid-template-columns:1fr;gap:16px}.tc-join-card{padding:24px 20px}}

/* ── CTA banner grid (classifieds home) ─────────────────── */
.tc-cta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin:40px 0}
.tc-cta-banner{position:relative;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dim) 100%);color:#fff;padding:32px 28px;overflow:hidden;display:flex;flex-direction:column;gap:18px;border-radius:var(--radius-md,0);box-shadow:0 10px 32px -10px rgba(var(--color-primary-rgb,31,117,254),.45)}
.tc-cta-banner--alt{background:linear-gradient(135deg,var(--primary-dim) 0%,var(--primary) 100%)}
.tc-cta-banner__deco{position:absolute;top:-30px;left:-30px;width:160px;height:160px;background:rgba(255,255,255,.08);pointer-events:none}
.tc-cta-banner__icon{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;background:rgba(255,255,255,.18);font-size:1.8rem;border-radius:var(--radius-sm,0)}
.tc-cta-banner__title{font-size:1.3rem;font-weight:800;margin:0 0 10px;color:#fff}
.tc-cta-banner__text{margin:0;opacity:.92;font-size:var(--text-sm);line-height:1.7}
.tc-cta-banner__btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#fff;color:var(--primary-dim);font-weight:700;height:40px;text-decoration:none;font-size:var(--text-sm);align-self:flex-start;padding:0 24px;border-radius:var(--radius-sm,0);transition:transform .15s}
.tc-cta-banner__btn:hover{transform:translateY(-2px)}
@media(max-width:768px){.tc-cta-grid{grid-template-columns:1fr;gap:16px}.tc-cta-banner{padding:24px 20px}}

/* ── Blog cards & article prose ───────────────────────── */
.blog-page{max-width:1200px;margin:0 auto;padding:var(--space-8,var(--space-8,32px)) var(--space-page,16px)}
.blog-page__header{text-align:center;max-width:680px;margin:0 auto var(--space-10,40px)}
.blog-page__badge{display:inline-flex;align-items:center;gap:6px;background:var(--color-primary-subtle,var(--primary-ghost,rgba(31,117,254,0.1)));color:var(--color-primary,var(--primary,#1f75fe));font-size:var(--text-xs,12px);font-weight:700;padding:6px 14px;border-radius:var(--radius-sm,0);margin-bottom:14px}
.blog-page__title{font-size:clamp(1.5rem,4vw,2.25rem);font-weight:800;letter-spacing:-0.02em;margin:0 0 12px;color:var(--color-text,var(--text,#111827))}
.blog-page__subtitle{font-size:clamp(0.95rem,2.5vw,1.0625rem);color:var(--color-text-subtle,var(--text2,#4b5563));line-height:1.6;margin:0}
.blog-empty{flex:1 1 100%;text-align:center;padding:80px 24px;background:var(--color-surface,var(--surface,#fff));border:1px dashed var(--color-border,var(--border,#e5e7eb));border-radius:var(--radius-md,0);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:320px}
.blog-empty i{font-size:4rem;color:var(--color-text-subtle,var(--text2));display:block;margin:0;opacity:.6}
.blog-empty h3{margin:0;color:var(--color-text,var(--text));font-size:var(--text-xl,1.25rem);font-weight:700}
.blog-empty p{color:var(--color-text-subtle,var(--text2));margin:0;font-size:var(--text-sm,0.875rem);max-width:480px;line-height:1.6}

.blog-card{display:flex;flex-direction:column;background:var(--color-surface,var(--surface,#fff));border:1px solid var(--color-border,var(--border,#e2e8f0));border-radius:var(--radius-md,0);text-decoration:none;color:inherit;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.blog-card:hover{transform:translateY(-4px);box-shadow:0 12px 30px -8px rgba(0,0,0,.12);border-color:var(--color-primary,var(--primary,#1f75fe))}
.blog-card__image-wrap{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--color-surface-2,var(--surface2,#f3f4f6))}
.blog-card__image{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.blog-card:hover .blog-card__image{transform:scale(1.05)}
.blog-card:hover .blog-card__title{color:var(--color-primary,var(--primary,#1f75fe))}
.blog-card__body{padding:20px;display:flex;flex-direction:column;flex:1;gap:10px}
.blog-card__meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:var(--text-xs,12px);color:var(--color-text-subtle,var(--text2,#6b7280));margin:0}
.blog-card__meta-item{display:inline-flex;align-items:center;gap:4px}
.blog-card__meta-dot{opacity:0.4}
.blog-card__image-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(31,117,254,0.08),var(--color-surface-2,#f3f4f6));color:var(--color-primary,var(--primary,#1f75fe))}
.blog-card__image-fallback>i{font-size:2.5rem;opacity:0.6}
.blog-card__image-wrap--empty{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(31,117,254,0.08),var(--color-surface-2,#f3f4f6));color:var(--color-primary,var(--primary,#1f75fe))}
.blog-card__image-wrap--empty>i{font-size:2.5rem;opacity:0.6}
.article-thumb{width:44px;height:32px;object-fit:cover;border-radius:var(--radius-xs,4px);vertical-align:middle;margin-inline-end:8px}
.cell-end{text-align:end}
.article-cover-box{margin-top:16px;padding:16px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden}
.article-cover-box__title{font-size:var(--text-xs);display:block;margin-bottom:12px}
.article-cover-preview__img{max-height:180px;border-radius:8px}
#quill-editor{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);min-height:400px;margin-top:8px}
.blog-card__title{margin:0;font-size:var(--text-lg,1.125rem);font-weight:700;line-height:1.4;color:var(--color-text,var(--text,#111827));transition:color .2s ease;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.blog-card__excerpt{color:var(--color-text-subtle,var(--text2,#4b5563));font-size:var(--text-sm,0.875rem);line-height:1.6;margin:0;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.blog-card__cta{display:flex;align-items:center;font-size:var(--text-sm,0.875rem);font-weight:600;color:var(--color-primary,var(--primary,#1f75fe));gap:6px;margin-top:auto}
.blog-card:hover .blog-card__cta i{transform:translateX(-4px)}

/* ── Article page (centralized — works in ALL shells: landingContentPage + publicShell) ── */
.article-page{
  background:var(--color-surface,var(--surface,#fff));
  border:1px solid var(--color-border,var(--border,#e5e7eb));
  border-radius:0; /* لا حواف دائرية — موحّد مركزي */
  padding:clamp(24px,4vw,48px);
  box-shadow:0 1px 3px rgba(15,23,42,0.04),0 8px 24px -12px rgba(15,23,42,0.08);
  margin:0 auto;
  max-width:1100px;
}
.article-page__header{
  margin-bottom:clamp(20px,3vw,32px);
  padding-bottom:clamp(20px,3vw,28px);
  border-bottom:1px solid var(--color-border,var(--border,#e5e7eb));
}
.article-page__meta-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:18px;
  padding:10px 18px;
  border-radius:var(--radius-md,8px);
  background:color-mix(in srgb,var(--color-primary,var(--primary,#1f75fe)) 8%,var(--color-surface,var(--surface,#ffffff)));
  border:1px solid color-mix(in srgb,var(--color-primary,var(--primary,#1f75fe)) 18%,transparent);
}
.article-page__meta-item{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--text-sm,13px);color:var(--color-text-subtle,var(--text2,#64748b));
  font-weight:600;white-space:nowrap;
}
.article-page__meta-item i{font-size:1rem;color:var(--color-primary,var(--primary,#1f75fe))}
.article-page__meta-item--date{margin-inline-end:auto}
.article-page__meta-item--read{margin-inline-start:auto}
.article-page__excerpt{
  font-size:clamp(1rem,2vw,1.125rem);
  line-height:1.7;color:var(--color-text-subtle,var(--text2,#4b5563));
  margin:0 0 20px;text-wrap:pretty;
}
.article-hero-cover{position:relative;width:100%;aspect-ratio:16/9;max-height:420px;overflow:hidden;border-radius:0;margin:24px 0 32px;box-shadow:0 12px 32px -8px rgba(0,0,0,0.12);background:var(--color-surface-2,var(--surface2,#f3f4f6))}
.article-hero-cover img{width:100%;height:100%;object-fit:cover;display:block}
.article-content{font-size:clamp(1rem,2.5vw,1.0625rem);line-height:1.9;color:var(--color-text,var(--text,#1f2937))}
.article-content p{margin-bottom:1.4em}
.article-content h2,.article-content h3{font-weight:700;margin-top:1.8em;margin-bottom:.8em;color:var(--color-text,var(--text,#111827))}
.article-content img{max-width:100%;height:auto;border-radius:0;margin:1.5em 0;box-shadow:0 4px 16px rgba(0,0,0,.08)}
.article-content blockquote{border-inline-start:4px solid var(--color-primary,var(--primary,#1f75fe));padding:12px 20px;margin:1.5em 0;background:var(--color-surface-2,var(--surface2,#f9fafb));border-radius:0;font-style:italic}
.article-content ul,.article-content ol{margin:1.2em 0;padding-inline-start:1.5em}
.article-content li{margin-bottom:0.5em}
.article-content a{color:var(--color-primary,var(--primary,#1f75fe));text-decoration:underline}

@media(max-width:768px){
  .blog-page{padding:var(--space-6,24px) var(--space-page,12px)}
  .blog-card__body{padding:16px}
  .article-page{padding:20px}
  .article-page__header{margin-bottom:20px;padding-bottom:20px}
  .article-page__meta-row{gap:8px;margin-bottom:14px;flex-direction:column;align-items:stretch}
  .article-page__meta-item--date{margin-inline-end:0}
  .article-page__meta-item--read{margin-inline-start:0}
  .article-hero-cover{aspect-ratio:4/3;max-height:280px;margin:16px 0 24px}
  .article-content{line-height:1.85}
}
@media(max-width:480px){
  .blog-card__meta{font-size:11px;gap:6px}
}

[data-theme="dark"] .blog-card{box-shadow:0 2px 8px rgba(0,0,0,.2)}
[data-theme="dark"] .blog-card:hover{box-shadow:0 12px 30px -8px rgba(0,0,0,.4)}
[data-theme="dark"] .article-page{
  background:var(--surface,#1e293b);
  border-color:var(--border,#334155);
  box-shadow:0 1px 3px rgba(0,0,0,0.2),0 8px 24px -12px rgba(0,0,0,0.4);
}
[data-theme="dark"] .article-page__excerpt{color:var(--text3,#94a3b8)}
[data-theme="dark"] .article-page__meta-row{background:color-mix(in srgb,var(--color-primary,var(--primary,#1f75fe)) 12%,var(--surface,#1e293b));border-color:color-mix(in srgb,var(--color-primary,var(--primary,#1f75fe)) 22%,transparent)}
[data-theme="dark"] .article-page__meta-item{color:var(--text3,#94a3b8)}
[data-theme="dark"] .article-page__meta-item i{color:var(--text3,#64748b)}
[data-theme="dark"] .article-content{color:var(--text2,#e2e8f0)}
[data-theme="dark"] .article-content h2,[data-theme="dark"] .article-content h3{color:var(--text,#f8fafc)}
[data-theme="dark"] .article-content blockquote{background:var(--surface2,#1e293b)}
.landing-footer{background:#0F172A;color:#b6c2cf;padding:0;margin-top:clamp(2.5rem,6vw,4rem);position:relative;overflow:visible}
.landing-footer a{color:#b6c2cf;text-decoration:none;transition:color 0.2s}
.landing-footer a:hover{color:#fff}
.landing-footer__inner{max-width:1200px;margin:0 auto;padding:3.5rem clamp(20px,5vw,80px) 0;position:relative}
/* CTA: position:absolute + top:0 + translateY(-50%) — مركز الـCTA دائماً على حافة الفوتر العليا */
/* بغض النظر عن ارتفاع الـCTA أو المحتوى — التوسيط متسق عبر كل الصفحات */
.landing-footer__cta{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:2.5rem 3rem;border-radius:var(--radius-lg,16px);width:100%;max-width:100%;position:absolute;top:0;left:0;right:0;transform:translateY(-50%);background:var(--primary,#1F75FE);border:none;flex-wrap:wrap;z-index:2;box-shadow:0 8px 32px rgba(0,0,0,0.18)}
@media(max-width:768px){.landing-footer__cta{width:80%;max-width:960px;margin:0 auto;left:0;right:0}}
@media(max-width:480px){.landing-footer__cta{width:90%}}
.landing-footer__cta-text h2{color:#fff;font-size:clamp(1.4rem,2.5vw,1.9rem);font-weight:800;margin:0;letter-spacing:-0.01em}
/* CTA button: compound selector .landing-footer__cta-btn.primary-button — specificity (0,2,0)
   يتفوق على .primary-button (0,1,0) التي تضع background:var(--primary) = نفس لون الـCTA.
   خلفية بيضاء !important + نص بلون المنصة الأساسي — ديناميكي + واضح في لايت و دارك مود. */
.landing-footer__cta-btn.primary-button{background:#fff !important;color:var(--primary,#1F75FE) !important;border-color:#fff !important;padding:0.9rem 2.2rem !important;border-radius:var(--radius-md,12px) !important;font-weight:800;height:auto;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;transition:transform 0.2s ease,background 0.2s ease,color 0.2s ease,box-shadow 0.2s ease;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;box-shadow:0 4px 14px rgba(0,0,0,0.18)}
.landing-footer__cta-btn.primary-button:hover{transform:translateY(-2px);color:var(--primary-dim,var(--color-primary-hover,#1558c9)) !important;background:#f8fafc !important;border-color:#f8fafc !important;box-shadow:0 8px 24px rgba(0,0,0,0.22)}
.landing-footer__cta-btn.primary-button:active{transform:translateY(0)}
/* دارك مود: نفس النمط — أبيض + نص بلون المنصة (يتكيف تلقائياً مع --primary في دارك مود) */
[data-theme="dark"] .landing-footer__cta-btn.primary-button{background:#fff !important;color:var(--primary,#60A5FA) !important;border-color:#fff !important;box-shadow:0 4px 14px rgba(0,0,0,0.5)}
[data-theme="dark"] .landing-footer__cta-btn.primary-button:hover{color:var(--primary-dim,var(--color-primary-hover,#3b82f6)) !important;background:#f1f5f9 !important;border-color:#f1f5f9 !important;box-shadow:0 8px 24px rgba(0,0,0,0.6)}
.landing-footer__brand{text-align:center;padding:clamp(2.5rem,6vw,4rem) clamp(1rem,4vw,2rem);border-bottom:1px solid rgba(255,255,255,0.08);margin-bottom:clamp(2.5rem,6vw,4rem)}
.landing-footer__logo{display:inline-flex;flex-direction:column;align-items:center;gap:clamp(14px,2vw,20px);font-size:clamp(1.25rem,1rem+0.8vw,1.6rem);font-weight:800;color:#fff !important;text-decoration:none;letter-spacing:-0.01em;transition:transform 0.2s ease}
.landing-footer__logo:hover{transform:scale(1.02)}
.landing-footer__logo strong{color:#fff;line-height:1.2;text-align:center;max-width:420px;word-wrap:break-word;overflow-wrap:anywhere}
.landing-footer__logo-badge{display:inline-flex;align-items:center;justify-content:center;width:120px;height:120px;padding:8px;border-radius:50%;background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,0.7),0 8px 32px rgba(0,0,0,0.12),inset 0 1px 0 rgba(255,255,255,0.9);border:none;line-height:0;animation:auth-logo-pulse 2.4s ease-in-out infinite;flex-shrink:0}
.landing-footer__logo-badge .brand-logo{height:88px;width:88px;object-fit:contain;border-radius:0}
.landing-footer__logo-badge .brand-mark,.landing-footer__logo-badge .auth-brand-initial{width:88px;height:88px;font-size:2.2rem;box-shadow:none;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--color-surface,#fff);color:var(--theme-primary,var(--primary,#1F75FE));font-weight:700}
@media(prefers-reduced-motion:reduce){.landing-footer__logo-badge{animation:none}}
.landing-footer__socials{display:flex;justify-content:center;gap:1rem;margin-bottom:3rem}
.landing-footer__social{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,0.06);color:#fff !important;font-size:1.1rem;transition:background 0.2s,opacity 0.2s}
.landing-footer__social:hover{opacity:0.85}
.landing-footer__social--facebook{background:#1877F2}
.landing-footer__social--instagram{background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%)}
.landing-footer__social--twitter{background:#000000}
.landing-footer__social--whatsapp{background:#25D366}
.landing-footer__social--tiktok{background:#000000}
.landing-footer__social--youtube{background:#FF0000}
.landing-footer__social--linkedin{background:#0A66C2}
.landing-footer__social--telegram{background:#26A5E4}
.landing-footer__social--snapchat{background:#FFFC00;color:#000 !important}
.landing-footer__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem;padding-bottom:3rem;border-bottom:1px solid rgba(255,255,255,0.08);text-align:center}
.landing-footer__col h5{color:#fff;font-size:1.1rem;font-weight:800;margin:0 0 1.5rem}
.landing-footer__col ul{list-style:none;padding:0;margin:0}
.landing-footer__col ul li{margin-bottom:0.8rem}
.landing-footer__col ul li a{font-size:var(--text-sm,0.9rem);color:#b6c2cf !important}
.landing-footer__col ul li a:hover{color:#fff !important}
.landing-footer__bottom{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:2rem 0;flex-wrap:wrap}
.landing-footer__copyright{font-size:var(--text-sm,0.85rem);color:#8895a6}
.landing-footer__copyright strong{color:#fff}
.landing-footer__copyright a{text-decoration:none;color:#8895a6 !important;transition:color 0.2s}
.landing-footer__copyright a:hover{color:#fff !important}
.landing-footer__copyright a strong{color:inherit}
.landing-footer__bottom-links{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.landing-footer__legal{display:flex;gap:1.5rem}
.landing-footer__legal a{font-size:var(--text-sm,0.85rem);color:#8895a6 !important}
.landing-footer__legal a:hover{color:#fff !important}
@media(max-width:768px){
  .landing-footer__cta{flex-direction:column;text-align:center;padding:2rem 1.5rem;gap:1.25rem;width:85%}
  .landing-footer__cta-btn{width:100%;justify-content:center}
  .landing-footer__brand{padding:2rem 1rem;margin-top:2.5rem;margin-bottom:2rem}
  .landing-footer__logo{gap:14px}
  .landing-footer__logo-badge{width:96px;height:96px;padding:6px}
  .landing-footer__logo-badge .brand-logo{height:72px;width:72px}
  .landing-footer__logo-badge .brand-mark,.landing-footer__logo-badge .auth-brand-initial{width:72px;height:72px;font-size:1.8rem}
  .landing-footer__grid{grid-template-columns:repeat(2,1fr);gap:2rem 1.5rem}
  .landing-footer__bottom{flex-direction:column;text-align:center;gap:1rem}
  .landing-footer__bottom-links{flex-direction:column;gap:1rem}
}
@media(max-width:480px){
  .landing-footer__brand{padding:1.5rem 1rem;margin-top:2rem;margin-bottom:1.5rem}
  .landing-footer__logo{gap:12px;font-size:1.2rem}
  .landing-footer__logo-badge{width:84px;height:84px;padding:5px}
  .landing-footer__logo-badge .brand-logo{height:64px;width:64px}
  .landing-footer__logo-badge .brand-mark,.landing-footer__logo-badge .auth-brand-initial{width:64px;height:64px;font-size:1.6rem}
  .landing-footer__grid{grid-template-columns:repeat(2,1fr);gap:1.5rem 1rem}
  .landing-footer__cta{padding:1.5rem 1.25rem;width:90%}
  .landing-footer__cta-text h2{font-size:1.3rem}
  .landing-footer__cta-btn{padding:0.8rem 1.5rem;font-size:0.95rem}
  .landing-footer__social{width:38px;height:38px;font-size:1rem}
}

/* ── Hide scrollbar on desktop dashboards ─────────────────── */
@media(min-width:769px){html:has(.dashboard-shell){scrollbar-width:none}html:has(.dashboard-shell)::-webkit-scrollbar{display:none}}

/* ── Collapsed sidebar ────────────────────────────────────── */
.sidebar-collapsed{--sidebar-w:56px}
/* Removed .sidebar-collapsed .main margin to fix layout gap */
@media(min-width:1024px){.sidebar-collapsed .dashboard-shell,.sidebar-collapsed .shell{grid-template-columns:56px 1fr}.sidebar-collapsed .dashboard-shell.has-filter-aside,.sidebar-collapsed .shell.has-filter-aside{grid-template-columns:56px 1fr var(--filter-drawer-w,288px)}}@media(min-width:769px) and (max-width:1023px){.sidebar-collapsed .dashboard-shell,.sidebar-collapsed .shell{grid-template-columns:56px 1fr}}
.sidebar-collapsed .brand-name,.sidebar-collapsed .nav-label{display:none}
.sidebar-collapsed .nav a{justify-content:center;padding:10px}
.sidebar-collapsed .nav-group-caret{display:none}
.sidebar-collapsed .nav-group-header{justify-content:center;padding:10px}
.sidebar-collapsed .nav-group-items{display:none}
.sidebar-collapsed .nav-group[aria-expanded="true"] .nav-group-items{display:none}
.sidebar-collapsed .sidebar__header{padding:12px 8px}
/* ── Mobile / Responsive ──────────────────────────────────── */
@media(max-width:1023px){
  .auth-shell{flex-direction:column;}
  .auth-visual{display:none}
  .auth-panel{padding:24px 20px;justify-content:flex-start;align-items:center;padding-top:calc(72px + env(safe-area-inset-top,0));min-height:100vh;overflow-x:hidden;overflow-y:auto;}
  /* ── منع خروج الحقول خارج شاشة الهاتف ── */
  .auth-shell{overflow-x:hidden}
  .auth-card,.auth-form,.auth-field,.auth-field-control{min-width:0}
  /* الحقول الملتصقة (slug+دومين، مفتاح+هاتف) عناصر flex بلا قيد — بلا
     flex:1+min-width:0 تتمدد بمحتواها وتخرج خارج البطاقة */
  .auth-field-control > .auth-input-joined{flex:1 1 0;min-width:0;width:100%}
  .auth-input-joined .auth-field-input{min-width:0}
  /* نص الأزرار الطويل يلتف بدل أن يفيض خارج الزر على الشاشات الضيقة */
  .auth-submit-btn,.auth-google-custom{white-space:normal;line-height:1.3}
  .auth-brand.mobile-only{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0 auto 28px;font-size:var(--text-xl);gap:10px;text-align:center;}
  .auth-brand.mobile-only .brand-logo{height:50px;width:auto;max-height:50px;}
  .auth-brand.mobile-only .brand-mark{font-size:26px;width:50px;height:50px;display:flex;align-items:center;justify-content:center;background:var(--theme-primary, var(--color-primary));color:#fff;border-radius:var(--radius-md);font-weight:700;}
  .auth-brand.mobile-only .auth-brand-initial{width:50px;height:50px;font-size:1.5rem;}
  .auth-footer.mobile-only{display:block;margin-top:auto;padding-top:24px;text-align:center;font-size:var(--text-sm);color:var(--color-text-subtle);}
  /* ── Auth mobile optimizations — تجاوب صفحات تسجيل الدخول/الإنشاء ── */
  .auth-card{max-width:100%;padding:0 4px;margin:0 auto;}
  .auth-card h1{font-size:var(--text-2xl);line-height:1.25}
  .auth-card > p{font-size:var(--text-sm);margin-bottom:20px}
  .auth-form{gap:10px}
  .auth-form .field-control,.auth-form .form-control{font-size:16px !important;min-height:var(--control-h,40px);padding:10px 14px}
  .auth-form .primary-button{min-height:var(--control-h,40px);height:auto;font-size:var(--text-base);padding:10px 20px}
  .auth-input-joined{flex-wrap:nowrap;gap:0}
  .auth-input-joined .field-control--locked-affix,.auth-input-joined .form-control--locked-affix{font-size:var(--text-xs);padding:12px 10px;white-space:nowrap;flex-shrink:0;max-width:45%}
  .auth-input-joined--ltr-phone .field-control--locked-affix,.auth-input-joined--ltr-phone .form-control--locked-affix{font-size:var(--text-sm);max-width:80px}
  .auth-input-feedback{font-size:var(--text-xs)}
  .auth-link{margin-top:20px}
  .auth-theme-toggle{top:calc(16px + env(safe-area-inset-top,0));inset-inline-end:calc(16px + env(safe-area-inset-right,0))}
  .auth-theme-toggle .notif-bell-btn{width:40px;height:40px}
  .auth-brand.mobile-only{margin-bottom:20px}
  .auth-brand.mobile-only .brand-logo{height:50px;max-height:50px}
  .auth-brand.mobile-only .brand-mark{font-size:26px;width:50px;height:50px}
  .auth-mfa-help{font-size:var(--text-xs)}
  /* ── Auth field mobile optimizations ── */
  .auth-field{gap:5px}
  .auth-field-label{font-size:var(--text-xs)}
  .auth-field-icon{font-size:17px;inset-inline-start:12px}
  .auth-field--has-icon .auth-field-input{padding-inline-start:40px !important}
  .auth-field-input{font-size:16px !important;min-height:var(--control-h,40px)}
  .auth-password-toggle{inset-inline-end:6px;padding:6px;font-size:17px}
  .auth-field--password .auth-field-input{padding-inline-end:40px !important}
  .auth-submit-btn{min-height:var(--control-h,40px);height:auto;font-size:var(--text-base);padding:10px 20px}
  /* زر جوجل: مطابقة تامة لارتفاع زر الدخول/الإنشاء على الموبايل */
  .auth-google{min-height:var(--control-h,40px)}
  .auth-google-custom{min-height:var(--control-h,40px);height:auto;font-size:var(--text-base);padding:10px 20px}
  .auth-field-select{padding-inline-start:40px !important}
  .auth-strength{gap:6px}
  .auth-strength-label{min-width:50px;font-size:10px}
  .dashboard-shell{display:block;position:relative}
  .dashboard-shell::after{content:"";position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(9,30,66,0.5);z-index:998;opacity:0;pointer-events:none;transition:opacity 0.2s}
  .sidebar{position:fixed;top:0;right:0;bottom:0;width:260px;z-index:1000;transform:translateX(100%);visibility:hidden;box-shadow:-4px 0 20px rgba(9,30,66,0.2);transition:transform 0.2s,visibility 0.2s}
  .dashboard-shell.sidebar-open .sidebar{transform:translateX(0);visibility:visible}
  .dashboard-shell.sidebar-open::after{opacity:1;pointer-events:auto}
  .brand-name,.nav-label{display:inline!important}
  .main{width:100%;min-height:100vh;margin-inline-start:0}
  /* ── Topbar على الموبايل: تقليل الازدحام ── */
  .topbar{padding:0 12px;gap:8px}
  .sidebar-edge-toggle{display:none}
  .topbar-brand--mobile{display:flex;min-width:0;overflow:hidden;flex-shrink:1}
  .topbar-brand--mobile .brand-name{display:inline-block!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
  /* زر الثيم يبقى ظاهراً على الموبايل (حجم 40px عبر قاعدة .notif-bell-btn أدناه) — 
     أزيل الإخفاء لأن صفحات الأدوات المستقلة ليس لها بديل في الإعدادات */
  /* البحث: يأخذ المساحة المتاحة */
  .topbar-search{display:flex;flex:1;max-width:none;height:36px}
  .topbar-filters-spacer{display:none}
  /* topbar-center: يظهر فقط على الموبايل (مخفي على الديسكتوب) */
  .topbar-center{display:flex;flex:1;align-items:center;min-width:0;height:36px}
  /* على صفحة POS: إخفاء البحث العادي لإفساح المجال لـ pos-product-search */
  .shell:has(.pos-page) .topbar-search{display:none!important}
  /* أزرار الأيقونات أصغر قليلاً على الموبايل */
  .notif-bell-btn{width:40px;height:40px;font-size:18px}
  .notif-bell-btn i{font-size:18px}
  .content{padding:16px}
  .page-header-bar{padding:12px 16px 0}
  .stats,.kpi-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .action-toolbar{padding:8px 16px;flex-wrap:nowrap;height:auto;min-height:calc(var(--bottom-h,64px) + env(safe-area-inset-bottom,0px));gap:8px}
  .toast{padding:8px 16px!important;height:auto!important;min-height:var(--bottom-h)!important}
  .action-toolbar__spacer{display:none}
  .action-toolbar__label{display:none}
  .action-toolbar__inner{justify-content:flex-start;flex:1;min-width:0;flex-wrap:nowrap;overflow-x:auto}
  .action-toolbar__end{width:auto;justify-content:flex-end}
  .toolbar-btn{flex:0 0 auto}
  /* أزرار الأداة في الفوتر: تتمرر أفقياً بدلاً من الانضغاط عند كثرة الأزرار (photo-resizer/wall-designer) */
  .action-toolbar__end .ui-tool-actions{flex-wrap:nowrap;justify-content:flex-end;gap:6px}
  .action-toolbar__end .ui-tool-actions .toolbar-btn{flex:0 0 auto;min-width:72px}
  .action-toolbar__end .ui-tool-actions .ui-pr-toolbar-sep{display:none}
  /* 16px صريحة (لا --text-base ≈14px) — عتبة iOS لمنع auto-zoom عند التركيز */
  input,select,textarea{font-size:16px !important}
  .field input,.field select,.field textarea,.primary-button{padding:11px 14px;min-height:44px}
  /* ── تقليل padding للبطاقات الكبيرة على الموبايل ── */
  .hero-card{padding:14px 16px}
  .billing-hero-card{padding:10px 12px;margin-bottom:16px}
  .kpi-card{padding:14px 16px}
  /* الـsection-header: تقليل الهامش السفلي */
  .section-header{padding-bottom:10px;margin-bottom:4px}
  /* الـcontent padding أصغر قليلاً للمساحات الضيقة */
  .content{padding:14px}
}

@media(max-width:640px){
  .stats,.kpi-row,.analytics-kpis,.metrics-grid,.stats-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .kpi-card,.analytics-kpi{padding:10px 12px!important;min-height:auto!important;gap:4px!important}
  .kpi-value,.analytics-kpi strong{font-size:1.35rem!important;line-height:1.2!important}
  .kpi-label,.analytics-kpi span{font-size:0.75rem!important;line-height:1.2!important}
}

@media(max-width:480px){
  .settings-layout,.form-row{grid-template-columns:1fr}
  .content{padding:16px}
}

/* ── PWA standalone فقط: فوتر متمركز بارتفاع ≈ التوبار ──
   الـsafe-area-inset-bottom = 0 خارج standalone (متصفح الجوال/الديسكتوب)،
   لكن القاعدة مغلّفة بـdisplay-mode صراحةً فلا تلمس أي بيئة أخرى.
   بدل min-height:64+inset (شريط ~98px على iOS والأزرار متمركزة فوق منطقة
   الإيماءات) صار الشريط «شريط قابل للاستخدام» 56px فوق الـinset:
   padding-top:6px + محتوى 44px + 6px قبل منطقة الإيماءات الميتة،
   والـinset نفسه padding-bottom — فالأزرار متمركزة رأسياً داخل الجزء
   القابل للنقر والارتفاع الكلي = max(64px, 56+inset): مساوٍ للتوبار على
   أندرويد 3-أزرار، ~72–80px على إيماءاته، ~90px على iOS (زر 44px + هوامش
   + inset 34px يستحيل رياضياً الوصول لـ64 دون تداخل الأزرار مع شريط
   الإيماءات). سطرا الـenv() العاديان fallback لمتصفحات بلا max(). */
@media(display-mode:standalone),(display-mode:minimal-ui){
  .action-toolbar,.bottom-bar{min-height:calc(56px + env(safe-area-inset-bottom,0px));min-height:max(var(--topbar-h,64px),calc(56px + env(safe-area-inset-bottom,0px)));padding-top:6px;padding-bottom:calc(6px + env(safe-area-inset-bottom,0px))}
}

/* ── Auth mobile — تحسينات إضافية للهاتف الصغير ── */
@media(max-width:640px){
  .auth-panel{padding:20px 16px;padding-top:calc(72px + env(safe-area-inset-top,0))}
  .auth-card{max-width:100%}
  .auth-card h1{font-size:var(--text-xl)}
  .auth-card > p{font-size:var(--text-sm);margin-bottom:16px}
  .auth-form{gap:8px}
  .auth-form .field-control,.auth-form .form-control{min-height:var(--control-h,40px);padding:10px 12px;font-size:16px !important}
  .auth-form .primary-button{min-height:var(--control-h,40px);height:auto;font-size:var(--text-base);padding:10px 18px}
  .auth-input-joined .field-control--locked-affix,.auth-input-joined .form-control--locked-affix{font-size:var(--text-xs);padding:12px 8px;max-width:42%}
  .auth-input-joined--ltr-phone .field-control--locked-affix,.auth-input-joined--ltr-phone .form-control--locked-affix{max-width:70px;min-width:55px}
  .auth-link{margin-top:16px;font-size:var(--text-xs)}
  .auth-brand.mobile-only{margin-bottom:16px}
  .auth-theme-toggle{top:calc(12px + env(safe-area-inset-top,0));inset-inline-end:calc(12px + env(safe-area-inset-right,0))}
  .auth-footer.mobile-only{margin-top:16px}
  .auth-field-input{min-height:var(--control-h,40px);padding:10px 12px}
  .auth-field--has-icon .auth-field-input{padding-inline-start:38px !important}
  .auth-password-toggle{padding:5px;font-size:16px}
  .auth-field--password .auth-field-input{padding-inline-end:38px !important}
  .auth-submit-btn{min-height:var(--control-h,40px);height:auto;padding:10px 18px}
  .auth-google{min-height:var(--control-h,40px)}
  .auth-google-custom{min-height:var(--control-h,40px);height:auto;padding:10px 18px}
}

@media(max-width:480px){
  .auth-panel{padding:16px 12px;padding-top:calc(68px + env(safe-area-inset-top,0))}
  .auth-card h1{font-size:var(--text-lg)}
  .auth-card > p{font-size:var(--text-xs);margin-bottom:12px}
  .auth-form{gap:8px}
  .auth-form .field-control,.auth-form .form-control{min-height:var(--control-h,40px);padding:8px 10px;font-size:16px !important}
  .auth-form .primary-button{min-height:var(--control-h,40px);height:auto;padding:8px 16px}
  .auth-input-joined .field-control--locked-affix,.auth-input-joined .form-control--locked-affix{font-size:10px;max-width:38%}
  .auth-input-joined--ltr-phone .field-control--locked-affix,.auth-input-joined--ltr-phone .form-control--locked-affix{max-width:60px;min-width:48px}
  .auth-brand.mobile-only .brand-logo{height:50px;max-height:50px}
  .auth-brand.mobile-only .brand-mark{font-size:26px;width:50px;height:50px}
  .auth-field-input{min-height:var(--control-h,40px);padding:8px 10px}
  .auth-field--has-icon .auth-field-input{padding-inline-start:36px !important}
  .auth-field-icon{font-size:16px;inset-inline-start:10px}
  .auth-password-toggle{inset-inline-end:4px;padding:4px;font-size:16px}
  .auth-field--password .auth-field-input{padding-inline-end:36px !important}
  .auth-submit-btn{min-height:var(--control-h,40px);height:auto;padding:8px 16px}
  .auth-google{min-height:var(--control-h,40px)}
  .auth-google-custom{min-height:var(--control-h,40px);height:auto;padding:8px 16px}
  .otp-slot{width:38px;height:46px;font-size:20px;line-height:42px}
  .auth-theme-toggle .notif-bell-btn{width:40px;height:40px}
  .auth-link{font-size:11px}
}




/* ── Runtime template styles ──────────────────────────────── */
.plan-card-checkout{display:flex;flex-direction:column}.plan-card-checkout--active{border-color:var(--color-primary);box-shadow:0 0 0 1px var(--color-primary)}
.payment-popup{display:flex;align-items:center;justify-content:center;height:100vh;margin:0;background:var(--color-bg);color:var(--color-text-muted);text-align:center;direction:rtl}.payment-popup__message{font-size:var(--text-base)}
.payment-status--processing{background:var(--primary-ghost);color:var(--primary);border-color:var(--primary)}
.platform-ui__style-01{margin:6px 0 12px;}
.platform-ui__style-02{display:flex;gap:12px;margin-top:16px;}
.platform-ui__style-03{text-decoration:none;}
.platform-ui__style-04{text-decoration:none;background:var(--color-text-subtle);}
.platform-ui__style-05{color:var(--color-success);}
.platform-ui__style-06{color:var(--color-warning);}
.platform-ui__style-17{text-align:center;padding:12px;background:var(--color-primary-subtle);border:1px solid var(--color-primary);border-radius:var(--radius-sm);color:var(--color-primary);font-weight:600;}
.platform-ui__style-18{flex-grow:1;margin-bottom:16px;}
.platform-ui__style-19{font-size:var(--text-base);}

/* ── Pagination ───────────────────────────────────────────── */
.pagination-wrapper,.pagination{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding:10px 16px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);gap:16px;flex-wrap:wrap}
.pagination-info{font-size:var(--text-xs);color:var(--color-text-muted)}
.pagination-buttons{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.pagination-buttons a,.pagination-buttons span{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 10px;font-size:var(--text-xs);font-weight:500;border-radius:var(--radius-sm);text-decoration:none}
.pagination-buttons a.secondary{border:1px solid var(--color-border-strong);background:var(--color-surface);color:var(--color-text)}
.pagination-buttons a.secondary:hover{background:var(--color-surface-2)}
.pagination-buttons a.active{background:var(--color-primary)!important;color:#fff!important;border:1px solid var(--color-primary)!important}
.pagination-buttons span.disabled{color:var(--color-text-muted);border:1px solid var(--color-border);background:var(--color-surface-2);cursor:not-allowed}
.filter-form--wide select{padding:7px 10px;border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);background:var(--color-surface);font-family:inherit;font-size:var(--text-sm);color:var(--color-text)}

/* ── Modal System (centered with margins + backdrop blur, 2026 SaaS standard) ── */
#modal-root{position:fixed;inset:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(15,23,42,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#modal-root[hidden],#modal-root [hidden]{display:none!important}
.modal-panel{position:relative;display:flex;flex-direction:column;width:min(640px,100%);max-height:min(85vh,100%);background:var(--surface);overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-xl);animation:modalPop .2s cubic-bezier(0.16,1,0.3,1)}
@keyframes modalPop{from{opacity:0;transform:scale(0.96) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}
.modal-header{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;background:var(--surface);border-bottom:1px solid var(--border)}
.modal-header__start{display:flex;align-items:center;gap:10px;min-width:0;flex:1;overflow:hidden}
.modal-header__title-wrap{min-width:0;flex:1}
.modal-header__end{display:flex;align-items:center;gap:8px;flex-shrink:0}
.modal-title{margin:0;font-size:var(--text-base);font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.modal-subtitle{margin:2px 0 0;font-size:var(--text-xs);color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.modal-close-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:1px solid var(--border2);background:var(--surface2);color:var(--text2);font-size:18px;font-weight:600;line-height:1;cursor:pointer;flex-shrink:0;transition:background .15s,color .15s,border-color .15s;border-radius:var(--radius-sm)}
.modal-close-btn:hover{background:var(--color-danger-subtle);color:var(--danger);border-color:var(--color-danger-border)}
.modal-close-btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.modal-body{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;position:relative;display:flex;flex-direction:column}
.modal-alert{padding:10px 16px;font-size:var(--text-sm);border-bottom:1px solid;flex-shrink:0}
.modal-alert--error{background:var(--color-danger-subtle);color:var(--danger);border-color:var(--color-danger-border,#ffbdad)}
.modal-alert--success{background:var(--color-success-subtle);color:var(--success);border-color:var(--color-success-border,#abf5d1)}
.modal-content{padding:20px;flex:1}
.modal-footer{flex-shrink:0;display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:12px 20px;padding-bottom:max(12px,env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--border)}
.modal-footer__start{display:flex;gap:8px;align-items:center;margin-inline-end:auto}
.modal-footer__end{display:flex;gap:8px;align-items:center}
/* [data-modal-footer-*] فتحة نقل محتوى لـfooter المودال — على الصفحة الكاملة
   تبقى داخل النموذج فتُخفى كلياً (زرها يكرر زر Action Toolbar). داخل المودال
   لا تتأثر لأن JS ينقل innerHTML لـ#modal-footer-* قبل إزالتها. */
[data-modal-footer-start],[data-modal-footer-end]{display:none}
.modal-loading-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.85);z-index:10}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .modal-loading-overlay{background:rgba(15,23,42,.85)}}
[data-theme="dark"] .modal-loading-overlay{background:rgba(15,23,42,.85)}
.modal-spinner{width:28px;height:28px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:_mspin .7s linear infinite}
@keyframes _mspin{to{transform:rotate(360deg)}}
#modal-root[data-confirm-only="true"]{background:rgba(15,23,42,.45)!important;backdrop-filter:blur(6px)!important;pointer-events:auto!important}
#modal-root[data-confirm-only="true"] .modal-panel{background:transparent!important;box-shadow:none!important;border:none!important;pointer-events:none!important}
#modal-root[data-confirm-only="true"] .modal-header,
#modal-root[data-confirm-only="true"] .modal-body > *:not(.modal-confirm-wrap),
#modal-root[data-confirm-only="true"] .modal-footer{display:none!important}
.modal-confirm-wrap{position:fixed!important;inset:0!important;display:flex!important;align-items:center!important;justify-content:center!important;background:transparent!important;pointer-events:none!important;z-index:calc(var(--z-modal) + 10)!important;padding:24px}
.modal-confirm-box{position:relative!important;pointer-events:auto!important;background:var(--surface)!important;border:1px solid var(--border)!important;padding:24px!important;width:min(420px,100%)!important;box-shadow:var(--shadow-xl)!important;animation:modalConfirmPop 0.2s cubic-bezier(0.16, 1, 0.3, 1)!important}
@keyframes modalConfirmPop{from{opacity:0;transform:scale(0.92)}to{opacity:1;transform:scale(1)}}
.modal-confirm-box p{margin:0 0 20px;font-size:var(--text-base);color:var(--text);line-height:1.6;font-weight:500}
.modal-confirm-actions{display:flex;gap:10px;justify-content:flex-end}
.modal-confirm-input{width:100%;padding:9px 12px;margin:0 0 20px;border:1px solid var(--border2);border-radius:8px;background:var(--surface2);color:var(--text);font-size:var(--text-sm);font-family:var(--font-num,monospace);box-sizing:border-box}
.modal-confirm-input:focus{outline:none;border-color:var(--danger)}
.modal-confirm-input[hidden]{display:none}
.modal-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid transparent;background:var(--primary);color:#fff;padding:8px 18px;font-weight:500;font-size:var(--text-sm);cursor:pointer;transition:background .15s;font-family:inherit;white-space:nowrap}
.modal-btn:hover:not(:disabled){background:var(--primary-dim)}
.modal-btn:disabled{opacity:.6;cursor:not-allowed}
.modal-btn--secondary{background:var(--surface);color:var(--text);border-color:var(--border2)}
.modal-btn--secondary:hover:not(:disabled){background:var(--surface2)}
.modal-btn--danger{background:var(--danger);border-color:var(--danger)}
.modal-btn--danger:hover:not(:disabled){background:var(--color-danger-hover)}
.modal-btn--primary{background:var(--primary);border-color:var(--primary);color:#fff}
.modal-btn--primary:hover:not(:disabled){background:var(--primary-dim);border-color:var(--primary-dim)}
/* Mobile + Tablet: bottom sheet (يصعد من الأسفل) — حتى حد الجوال ≤768px */
@media(max-width:768px){
  #modal-root{align-items:flex-end;padding:0}
  .modal-panel{width:100%!important;max-height:92vh!important;border-radius:var(--radius-lg) var(--radius-lg) 0 0!important;animation:modalSlideUp .25s cubic-bezier(0.16,1,0.3,1)}
  @keyframes modalSlideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
  .modal-header{padding:14px 16px}
  .modal-content{padding:16px}
  .modal-footer{flex-wrap:wrap;padding:12px 16px}
  .modal-footer__end{flex:1;flex-wrap:wrap}
  .modal-footer__end .modal-btn{flex:1;min-width:80px;justify-content:center}
}
/* ── Toast System (موحَّد: أسفل-منتصف الشاشة، ارتفاع 64px مطابق للفوتر) ── */
.toast-root{position:fixed!important;top:auto!important;bottom:0!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important;z-index:calc(var(--z-modal) + 100)!important;display:flex!important;flex-direction:column!important;gap:0!important;pointer-events:none!important;width:max-content!important;max-width:min(420px,calc(100vw - 48px))!important;align-items:stretch!important}
@media(max-width:640px) { .toast-root{top:auto!important;bottom:0!important;left:0!important;right:0!important;transform:none!important;width:auto!important;max-width:none!important;align-items:stretch!important} }
.toast{position:relative!important;display:flex!important;align-items:center!important;gap:12px!important;min-height:var(--bottom-h,64px)!important;height:calc(var(--bottom-h,64px) + env(safe-area-inset-bottom,0px))!important;padding:0 24px!important;padding-bottom:env(safe-area-inset-bottom,0px)!important;background:var(--surface)!important;color:var(--text)!important;border-radius:0!important;box-shadow:0 -4px 20px -4px rgba(0,0,0,0.18)!important;border:none!important;border-top:1px solid var(--border)!important;pointer-events:auto!important;transform:translateY(100%)!important;opacity:0!important;transition:transform 0.25s cubic-bezier(0.16,1,0.3,1),opacity 0.25s cubic-bezier(0.16,1,0.3,1)!important;overflow:hidden!important;width:100%!important;box-sizing:border-box!important}
.toast.toast--show{transform:translateY(0)!important;opacity:1!important}
.toast.toast--hide{transform:translateY(100%)!important;opacity:0!important}
.toast__icon{flex-shrink:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center}
.toast__content{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.toast__title{font-weight:600;font-size:var(--text-sm);margin:0;color:inherit}
.toast__desc{font-size:var(--text-xs);margin:0;line-height:1.4;word-break:break-word;color:inherit;opacity:.92}
.toast__close{flex-shrink:0;background:none;border:none;color:inherit;opacity:.85;cursor:pointer;padding:4px;margin:-4px;border-radius:0;display:flex;align-items:center;justify-content:center;transition:opacity 0.2s, background 0.2s}
.toast__close:hover{opacity:1;background:transparent}
/* الحالات الأربع: خلفية معبَّأة كاملة + نص أبيض بدل شريط جانبي رفيع */
.toast--success{background:var(--success,#10b981)!important;border-color:var(--success,#10b981)!important;color:#fff!important}
.toast--error{background:var(--danger,#ef4444)!important;border-color:var(--danger,#ef4444)!important;color:#fff!important}
.toast--warning{background:var(--warn,#f59e0b)!important;border-color:var(--warn,#f59e0b)!important;color:#fff!important}
.toast--info{background:var(--primary,#6366f1)!important;border-color:var(--primary,#6366f1)!important;color:#fff!important}
.toast--success .toast__close:hover,.toast--error .toast__close:hover,.toast--warning .toast__close:hover,.toast--info .toast__close:hover{background:transparent!important}
.toast--loading .toast__icon{animation:_mspin .7s linear infinite;border:2px solid var(--border);border-top-color:var(--primary);border-radius:50%;width:20px;height:20px;margin:2px}
/* ── Back-to-Top Button (responsive overrides for inline-styled button) ── */
@media(max-width:640px){.back-to-top-btn{bottom:16px!important;inset-inline-end:16px!important;width:42px!important;height:42px!important}}
@media(max-width:480px){.back-to-top-btn{bottom:12px!important;inset-inline-end:12px!important;width:38px!important;height:38px!important}}
@media(prefers-reduced-motion:reduce){.back-to-top-btn{transition:opacity .15s ease!important;transform:none!important}}
/* ── Contact Float Button (responsive overrides — مطابق لـback-to-top) ── */
@media(max-width:640px){.contact-float-btn{bottom:16px!important;inset-inline-start:16px!important;width:42px!important;height:42px!important}}
@media(max-width:480px){.contact-float-btn{bottom:12px!important;inset-inline-start:12px!important;width:38px!important;height:38px!important}}
@media(prefers-reduced-motion:reduce){.contact-float-btn{transition:opacity .15s ease!important;transform:none!important}}
/* ── Support Ticket Thread Styles ── */
.support-thread{display:flex;flex-direction:column;gap:16px;margin-bottom:24px}
.support-msg{display:flex;flex-direction:column;max-width:80%;padding:14px 18px;border-radius:var(--radius-lg,0);font-size:var(--text-sm,14px);line-height:1.6}
.support-msg--tenant{align-self:flex-start;background:var(--surface2,#f1f5f9);color:var(--text,#0f172a);border:1px solid var(--border,#e2e8f0);border-top-right-radius:2px}
.support-msg--admin{align-self:flex-end;background:var(--primary-ghost,rgba(31,117,254,0.08));color:var(--text,#0f172a);border:1px solid var(--primary-dim,#93c5fd);border-top-left-radius:2px}
.support-msg__meta{display:flex;justify-content:space-between;gap:12px;font-size:11px;color:var(--text-secondary,#64748b);margin-bottom:6px;font-weight:600}
.support-msg__body{white-space:pre-wrap;word-break:break-word}


/* ── SaaS Pricing Redesign ─────────────────────────────────────────── */
.pricing-plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 2rem; align-items: stretch; }
/* Bulk Actions — مدمجة داخل action-toolbar (لا شريط منفصل) */
.action-toolbar__bulk {
  flex: 1;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.action-toolbar__bulk[hidden] {
  display: none !important;
}
.action-toolbar__bulk-info {
  font-weight: 600;
  color: var(--text);
  font-size: var(--text-sm);
  white-space: nowrap;
  flex-shrink: 0;
}
.action-toolbar__bulk-actions {
  display: flex;
  gap: 8px;
  margin-inline-start: auto;
  flex-wrap: nowrap;
  flex-shrink: 0;
}
/* توافق: selectors قديمة قد تُستخدم في views */
.bulk-count {
  font-size: var(--text-sm);
  color: var(--color-text);
}
.col-check {
  width: 40px;
  text-align: center;
}
.col-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--color-primary, #6366f1);
}
.button-danger {
  background: var(--danger, #ef4444);
  color: #fff;
  border-color: var(--danger, #ef4444);
}
.button-danger:hover {
  filter: brightness(0.92);
}
.button-success {
  background: var(--color-success, #10b981);
  color: #fff;
  border-color: var(--color-success, #10b981);
}
.button-success:hover {
  filter: brightness(0.92);
}
.sidebar-trash-badge {
  background: var(--danger);
  color: #fff;
  border-radius:0;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  text-align: center;
}
.sidebar-trash-badge[hidden], .sidebar-trash-badge:empty {
  display: none !important;
}
.nav-badge {
  margin-inline-start: auto;
  font-weight: 700;
  border-radius: 0;
  padding: 2px 6px;
}
.avatar-field { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.avatar-preview {
  width: 64px; height: 64px; border-radius: var(--radius-sm, 0);
  background: var(--surface2); display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.avatar-preview__placeholder { font-size: 28px; opacity: 0.3; }
.avatar-field__actions { display: flex; flex-direction: column; gap: 8px; }
.avatar-field__actions .button { white-space: nowrap; }
th input[type="checkbox"], td input[type="checkbox"] {
  cursor: pointer;
  margin: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
}

/* ── Vertical Centering & Descender Alignment for Form Controls ── */
.field-control:not(textarea),
.form-control:not(textarea),
.c-panel--form input:not([type="checkbox"]):not([type="radio"]),
.c-panel--form select,
.form-panel input:not([type="checkbox"]):not([type="radio"]),
.form-panel select,
.field input:not([type="checkbox"]):not([type="radio"]),
.field select,
.auth-form input:not([type="checkbox"]):not([type="radio"]),
.auth-form select,
.tc-search-input {
  line-height: normal !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
}

/* WebKit / Chromium select baseline fix for Arabic text descenders */
select.field-control,
select.form-control,
select.tc-search-input,
.field select,
.form-panel select,
.c-panel--form select {
  line-height: normal !important;
  padding-block: 0 !important;
}

/* Google Adsense Overflow and Mobile Navbar Overlay Fix */
iframe[id^="google_ads_iframe"],
.adsbygoogle,
.google-auto-placed {
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
/* Prevent Adsense from injecting auto ads inside navbar & mobile menu */
.landing-nav-wrapper google-cast-launcher,
.landing-nav-wrapper .adsbygoogle,
.landing-nav-wrapper ins,
.landing-nav-wrapper .google-auto-placed,
.landing-mobile-menu .adsbygoogle,
.landing-mobile-menu ins,
.landing-mobile-menu .google-auto-placed {
  display: none !important;
  height: 0 !important;
  width: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
@media(max-width:1023px) {
  .landing-nav-wrapper {
    z-index: calc(var(--z-sidebar) + 10) !important;
  }
  .landing-mobile-menu {
    z-index: calc(var(--z-sidebar) + 20) !important;
  }
  .landing-mobile-menu-backdrop {
    z-index: calc(var(--z-sidebar) + 15) !important;
  }
}

/* Center Google Adsense ad slots correctly on all screens */
.ad-slot-container {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin-block: clamp(12px, 3vw, 24px) !important;
  box-sizing: border-box !important;
}
.ad-slot-body {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
ins.adsbygoogle {
  margin-inline: auto !important;
  display: block !important;
  text-align: center !important;
}
div.google-auto-placed {
  text-align: center !important;
  margin-inline: auto !important;
}

/* filter_drawer_empty ad location removed — لا إعلانات داخل لوحات التحكم */

/* ── Article inline ad (inside blog article content) ──────────────────── */
.article-inline-ad {
  margin-block: clamp(16px, 4vw, 28px);
  clear: both;
}
.article-inline-ad .ad-slot-container {
  margin-block: 0 !important;
}
.article-inline-ad:empty {
  display: none !important;
  margin: 0 !important;
}

/* ── Public Ad Wrappers (hero-bottom + footer) — PJAX-aware transitions ── */
/* width:100% إلزامي: داخل .tool-page (flex column) الـauto margins تُلغي  */
/* stretch فينكمش الـwrap لـfit-content (=0) → AdSense يقيس <ins> بعرض 0   */
/* ولا يملأه. بعرض محدد تتمركز الـauto margins بشكل صحيح.                 */
.ui-hero-bottom-ad-wrap,
.ui-footer-ad-wrap {
  animation: ad-fade-in 0.35s ease-out;
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  text-align: center;
  box-sizing: border-box;
}
.ui-hero-bottom-ad-wrap {
  margin-block: 16px;
  padding: 0 16px;
}
/* footer ad: مسافة كافية للـCTA الذي يبرز فوق الفوتر بـtranslateY(-50%) */
.ui-footer-ad-wrap {
  margin-top: 16px !important;
  margin-bottom: clamp(2.5rem, 6vw, 4rem) !important;
  padding: 0 clamp(16px, 4vw, 32px);
  padding-bottom: 0 !important;
}
.ui-footer-ad-wrap .ad-slot-container {
  margin-block: 0 !important;
}
/* الفوتر يحتفظ بـmargin-top دائماً — يوفر مساحة للـCTA فوقه */
@keyframes ad-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* PJAX loading state — fade content while fetching */
[data-pjax-content].pjax-loading {
  opacity: 0.6;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
[data-pjax-content] {
  transition: opacity 0.2s ease;
  /* هامش سفلي يفصل حافة المحتوى عن حافة الفوتر — يمنع التضارب */
  margin-bottom: clamp(80px, 10vw, 150px);
}

/* ── PJAX loading state ── */
/* View Transitions API removed — it added 180ms animation delay to every
   navigation, making PJAX feel slower than full page loads. Direct swap
   is instant. The pjax-loading class provides a subtle opacity dim. */
[data-pjax-content].pjax-loading { opacity: 0.6; transition: opacity 0.1s ease; }
[data-pjax-content][aria-busy="true"] { opacity: 0.6; transition: opacity 0.1s ease; }

/* Account Views Refactored CSS */
.page-header { margin-bottom: 24px; }
.page-header--flex { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.icon-24 { font-size: 24px; }
/* Auth View Utilities */
.auth-input-wrapper { margin-bottom: var(--space-md); text-align: start; }
.auth-input-joined { display: flex; align-items: center; margin-bottom: var(--space-md); }
.auth-input-wrapper .auth-input-joined { margin-bottom: 0; }
.auth-input-joined[dir="ltr"] { direction: ltr; }
.auth-input-joined .field-control:not(.field-control--locked-affix),.auth-input-joined .form-control:not(.form-control--locked-affix) { flex: 1 1 auto; min-width: 0; width: auto; }
.auth-input-joined .field-control:first-child,.auth-input-joined .form-control:first-child { border-end-end-radius: 0; border-start-end-radius: 0; }
.auth-input-joined .field-control:last-child,.auth-input-joined .form-control:last-child { border-end-start-radius: 0; border-start-start-radius: 0; border-inline-start: 0; }
.auth-input-joined--ltr-phone .field-control:first-child,.auth-input-joined--ltr-phone .form-control:first-child { border-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.auth-input-joined--ltr-phone .field-control:last-child,.auth-input-joined--ltr-phone .form-control:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-bottom: 0; }
.auth-input-feedback { display: block; margin-top: 4px; font-size: var(--text-xs); color: var(--color-text-subtle); text-align: end; }
.auth-input-feedback.error { color: var(--color-danger); }
.auth-input-feedback.success { color: var(--color-success); }
.auth-mfa-help { font-size: var(--text-sm); color: var(--color-text-subtle); margin-top: var(--space-xs); }
.auth-theme-toggle { position: absolute; top: calc(24px + env(safe-area-inset-top, 0px)); inset-inline-end: calc(24px + env(safe-area-inset-right, 0px)); z-index: 20; display: inline-flex; align-items: center; justify-content: center; }
.auth-theme-toggle #theme-toggle-btn { display: inline-flex !important; margin: 0 !important; }
.auth-theme-toggle .notif-bell-btn { margin: 0 !important; width: 40px; height: 40px; border-radius: 50%; background: var(--color-surface-2, var(--surface2, #f1f5f9)); border: 1px solid var(--color-border, var(--border, #e2e8f0)); color: var(--color-text, var(--text, #0f172a)); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.05); transition: all 0.2s ease; touch-action: manipulation; }
.auth-theme-toggle .notif-bell-btn:hover { background: var(--color-primary-subtle, rgba(31,117,254,0.1)); color: var(--color-primary, #1f75fe); border-color: var(--color-primary, #1f75fe); transform: scale(1.06); }
[data-theme="dark"] .auth-theme-toggle .notif-bell-btn { background: var(--color-surface-2, #1e293b); border-color: var(--color-border, #334155); color: var(--color-text, #f8fafc); box-shadow: 0 1px 4px rgba(0,0,0,0.4); }
[data-theme="dark"] .auth-theme-toggle .notif-bell-btn:hover { background: var(--color-primary-subtle, rgba(31,117,254,0.15)); color: var(--color-primary, #60a5fa); border-color: var(--color-primary, #60a5fa); }
.auth-brand-mobile-link { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; color: inherit; }
.auth-brand-initial { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: var(--color-primary); color: var(--color-surface); font-size: 1.5rem; font-weight: 700; }
.auth-fallback-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }

/* ═══ Page Hero & Breadcrumbs (Centralized Inner Page Header) ═══ */
/* المصدر المركزي الموحّد — نفس الـhero على كل الصفحات (main domain + tenant subdomain + admin) */
.ui-page-hero{
  position:relative;
  padding-block:50px;
  margin-block-end:clamp(2.5rem,6vw,4rem);
  background:color-mix(in srgb,var(--primary,var(--color-primary,#1f75fe)) 4%,var(--surface,var(--color-surface,#ffffff)));
  border-block-end:1px solid var(--border,var(--color-border,#e2e8f0));
  text-align:center;
  overflow:hidden;
}
.ui-page-hero__inner{
  position:relative;
  z-index:1;
  width:100%;
  max-width:var(--container-max,1100px);
  margin:0 auto;
  padding-inline:clamp(16px,3vw,32px);
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:14px;
}
.ui-page-hero__header{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:16px;width:100%}
.ui-page-hero__main{width:100%;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.ui-page-hero__badge{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:6px 16px;
  border-radius:var(--radius-full,9999px);
  background:color-mix(in srgb,var(--primary,var(--color-primary,#1f75fe)) 10%,transparent);
  color:var(--primary,var(--color-primary,#1f75fe));
  font-size:11px;font-weight:700;
  border:1px solid color-mix(in srgb,var(--primary,var(--color-primary,#1f75fe)) 18%,transparent);
}
.ui-page-hero__title{
  margin:0;
  font-size:clamp(1.5rem,3.5vw,2.25rem);
  font-weight:700;
  line-height:1.32;
  color:var(--text,var(--color-text,#0f172a));
  text-align:center;
  text-wrap:balance;
}
.ui-page-hero__subtitle{
  margin:0;
  font-size:clamp(0.92rem,1.35vw,1.08rem);
  color:var(--text-secondary,var(--color-text-subtle,#64748b));
  line-height:1.75;
  max-width:680px;
  text-align:center;
  text-wrap:pretty;
}
.ui-page-hero__meta{
  display:flex;align-items:center;justify-content:center;gap:12px;
  flex-wrap:wrap;padding-block-start:8px;
  font-size:0.85rem;color:var(--text-secondary,var(--color-text-subtle,#64748b));
}
[data-theme="dark"] .ui-page-hero{
  background:color-mix(in srgb,var(--primary,var(--color-primary,#1f75fe)) 7%,var(--surface,var(--color-surface,#0F172A)));
  border-block-end-color:var(--border,var(--color-border,#1e293b));
}
[data-theme="dark"] .ui-page-hero__title{color:var(--text,var(--color-text,#f8fafc))}
[data-theme="dark"] .ui-page-hero__subtitle{color:var(--text-secondary,var(--color-text-subtle,#94a3b8))}
@media(max-width:768px){
  .ui-page-hero{padding-block:25px}
  .ui-page-hero__main{gap:12px}
  .ui-page-hero__header{gap:14px}
}
@media(max-width:640px){
  .ui-page-hero{padding-block:25px}
  .ui-page-hero__title{font-size:clamp(1.25rem,4.8vw,1.55rem);line-height:1.3}
  .ui-page-hero__subtitle{font-size:clamp(0.85rem,2.6vw,0.96rem);line-height:1.65}
  .ui-page-hero__badge{font-size:10px;padding:5px 13px}
  .ui-page-hero__meta{font-size:0.8rem;gap:10px}
}
@media(max-width:480px){
  .ui-page-hero{padding-block:25px}
  .ui-page-hero__title{font-size:1.2rem}
  .ui-page-hero__subtitle{font-size:0.85rem}
}

.ui-breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:var(--space-2) 0;font-size:var(--text-xs,12px)}
.ui-breadcrumb a{color:var(--color-text-subtle,#64748b);text-decoration:none;transition:color .15s}
.ui-breadcrumb a:hover{color:var(--primary,var(--color-primary,#1f75fe))}
.ui-breadcrumb__sep{color:var(--color-text-muted,#94a3b8);font-size:12px;line-height:1}
.ui-breadcrumb__current{color:var(--color-text,#0f172a);font-weight:600}
[data-theme="dark"] .ui-breadcrumb__current{color:var(--color-text,#f8fafc)}

/* ═══ FAQ Accordion (Centralized Dynamic + / -) ═══ */
.ui-faq-section{padding:clamp(32px,5vw,64px) 0;box-sizing:border-box}
.ui-faq-list{max-width:var(--hp-cards-max,1100px);margin:0 auto;display:flex;flex-direction:column;gap:12px;box-sizing:border-box}
.ui-faq-item{background:var(--surface,var(--color-surface,#ffffff));border:1px solid color-mix(in srgb,var(--border,var(--color-border,#e2e8f0)) 80%,transparent);border-radius:var(--radius-md,12px);overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.03);transition:border-color 0.2s ease,box-shadow 0.2s ease}
.ui-faq-item:hover{border-color:var(--primary,var(--color-primary,#1f75fe));box-shadow:0 4px 16px color-mix(in srgb,var(--primary,var(--color-primary,#1f75fe)) 10%,transparent)}
.ui-faq-item[open]{border-color:var(--primary,var(--color-primary,#1f75fe));box-shadow:0 6px 20px color-mix(in srgb,var(--primary,var(--color-primary,#1f75fe)) 14%,transparent)}
.ui-faq-summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;cursor:pointer;list-style:none;user-select:none;font-weight:700;font-size:clamp(0.95rem,1.3vw,1.05rem);color:var(--text,var(--color-text,#0f172a));touch-action:manipulation;transition:color 0.15s ease,background 0.2s ease}
.ui-faq-summary::-webkit-details-marker,.ui-faq-summary::marker{display:none}
.ui-faq-summary:hover{color:var(--primary,var(--color-primary,#1f75fe))}
.ui-faq-question{flex:1;min-width:0;line-height:1.4}
.ui-faq-badge{margin-inline-start:8px;font-size:0.75rem;font-weight:600;vertical-align:middle}
.ui-faq-actions{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;cursor:default}
.ui-faq-icon{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:color-mix(in srgb,var(--primary,var(--color-primary,#1f75fe)) 10%,transparent);color:var(--primary,var(--color-primary,#1f75fe));flex-shrink:0;font-size:20px;line-height:1;transition:background 0.25s ease,color 0.25s ease,transform 0.3s cubic-bezier(0.4,0,0.2,1)}
.ui-faq-item[open] .ui-faq-summary{border-bottom:1px solid color-mix(in srgb,var(--border,var(--color-border,#e2e8f0)) 60%,transparent);background:color-mix(in srgb,var(--primary,var(--color-primary,#1f75fe)) 4%,transparent)}
.ui-faq-item[open] .ui-faq-icon{background:var(--primary,var(--color-primary,#1f75fe));color:#ffffff;transform:rotate(180deg)}
.ui-faq-footer{text-align:center;margin-top:28px}
.ui-faq-footer .hp-btn-outline{display:inline-flex}
.ui-faq-content{padding:20px 24px;color:var(--text-secondary,var(--color-text-subtle,#475569));font-size:clamp(0.88rem,1.1vw,0.96rem);line-height:1.8;background:color-mix(in srgb,var(--surface,var(--color-surface,#ffffff)) 96%,var(--surface-2,var(--color-surface-2,#f8fafc)) 4%)}
.ui-faq-body p{margin:0 0 10px}
.ui-faq-body p:last-child{margin-bottom:0}
[data-theme="dark"] .ui-faq-item{background:var(--surface,#0F172A);border-color:color-mix(in srgb,var(--border,#334155) 80%,transparent);box-shadow:0 2px 8px rgba(0,0,0,0.3)}
[data-theme="dark"] .ui-faq-item:hover{border-color:var(--primary,var(--color-primary,#1f75fe));box-shadow:0 4px 16px color-mix(in srgb,var(--primary,var(--color-primary,#1f75fe)) 20%,transparent)}
[data-theme="dark"] .ui-faq-item[open]{border-color:var(--primary,var(--color-primary,#1f75fe));box-shadow:0 6px 20px color-mix(in srgb,var(--primary,var(--color-primary,#1f75fe)) 25%,transparent)}
[data-theme="dark"] .ui-faq-item[open] .ui-faq-summary{background:color-mix(in srgb,var(--primary,var(--color-primary,#1f75fe)) 6%,transparent);border-bottom-color:color-mix(in srgb,var(--border,#334155) 70%,transparent)}
[data-theme="dark"] .ui-faq-summary{color:var(--text,var(--color-text,#f8fafc))}
[data-theme="dark"] .ui-faq-content{background:color-mix(in srgb,#0F172A 92%,#1E293B 8%);color:var(--text-secondary,var(--color-text-subtle,#94a3b8))}

/* ═══ About Page (Centralized Modern UI/UX) ═══ */
.ui-about-wrap{width:100%;max-width:var(--hp-cards-max,1100px);margin:0 auto;padding:0 clamp(16px,3vw,32px) clamp(40px,6vw,80px);box-sizing:border-box;display:flex;flex-direction:column;gap:clamp(32px,5vw,56px)}

.ui-contact-wrap{width:100%;max-width:var(--hp-cards-max,1100px);margin:0 auto;padding:0 clamp(16px,3vw,32px) clamp(40px,6vw,80px);box-sizing:border-box;display:flex;flex-direction:column;gap:32px}
/* عناصر صفحتي about/contact تملأ عرض الحاوية كاملاً — داخل flex-column الـmargin-inline:auto
   يجعل العنصر shrink-to-fit (النموذج كان 466px والبطاقات 604px من أصل 1016px متاحة) */
.ui-contact-wrap > *, .ui-about-wrap > *{width:100%}
.ui-contact-wrap .pb-contact-form{max-width:none}
.ui-contact-wrap .hp-cards > *, .ui-about-wrap .hp-cards > *{max-width:none}
/* ═══ Legal Pages (Centralized Modern UI/UX) ═══ */
.ui-legal-wrap{width:100%;max-width:var(--hp-cards-max,1100px);margin:0 auto;padding:0 clamp(16px,3vw,32px) clamp(40px,6vw,80px);box-sizing:border-box}
.ui-legal-header{text-align:start;margin-bottom:28px;padding-bottom:24px;border-bottom:1px solid color-mix(in srgb,var(--border,var(--color-border,#e2e8f0)) 80%,transparent)}
.ui-legal-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:20px;background:color-mix(in srgb,var(--primary,var(--color-primary,#1f75fe)) 10%,transparent);color:var(--primary,var(--color-primary,#1f75fe));font-weight:700;font-size:0.85rem;margin-bottom:14px}
.ui-legal-title{font-size:clamp(1.6rem,3vw,2.3rem);font-weight:800;margin:0 0 14px;color:var(--text,var(--color-text,#0f172a));line-height:1.25}
.ui-legal-meta{display:flex;align-items:center;gap:clamp(12px,2vw,24px);flex-wrap:wrap;font-size:0.85rem;color:var(--text-secondary,var(--color-text-subtle,#64748b))}
.ui-legal-meta span{display:inline-flex;align-items:center;gap:6px}
.ui-legal-print-btn{background:var(--surface,var(--color-surface,#ffffff));border:1px solid color-mix(in srgb,var(--border,var(--color-border,#e2e8f0)) 80%,transparent);border-radius:8px;padding:5px 14px;color:var(--text,var(--color-text,#0f172a));font-size:0.82rem;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:background 0.2s,border-color 0.2s;font-family:inherit;margin-inline-start:auto}
.ui-legal-print-btn:hover{background:var(--surface-2,var(--color-surface-2,#f8fafc));border-color:var(--primary,var(--color-primary,#1f75fe))}

.ui-legal-quicknav{display:flex;gap:10px;overflow-x:auto;padding:6px 2px 14px;margin-bottom:28px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ui-legal-quicknav::-webkit-scrollbar{display:none}
.ui-legal-quicknav a{padding:8px 16px;border-radius:20px;background:var(--surface,var(--color-surface,#ffffff));border:1px solid color-mix(in srgb,var(--border,var(--color-border,#e2e8f0)) 80%,transparent);color:var(--text,var(--color-text,#0f172a));font-size:0.84rem;font-weight:600;text-decoration:none;white-space:nowrap;transition:all 0.2s ease}
.ui-legal-quicknav a:hover{border-color:var(--primary,var(--color-primary,#1f75fe));color:var(--primary,var(--color-primary,#1f75fe));background:color-mix(in srgb,var(--primary,var(--color-primary,#1f75fe)) 6%,transparent)}

.ui-legal-section{background:var(--surface,var(--color-surface,#ffffff));border:1px solid color-mix(in srgb,var(--border,var(--color-border,#e2e8f0)) 80%,transparent);border-radius:var(--radius-lg,16px);padding:clamp(22px,3.5vw,34px);margin-bottom:20px;box-shadow:0 2px 8px rgba(0,0,0,0.02);text-align:start;scroll-margin-top:80px}
.ui-legal-section__head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.ui-legal-section__num{width:36px;height:36px;border-radius:10px;background:var(--primary,var(--color-primary,#1f75fe));color:#ffffff;font-weight:800;font-size:0.95rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ui-legal-section__title{margin:0;font-size:clamp(1.1rem,1.8vw,1.3rem);font-weight:700;color:var(--text,var(--color-text,#0f172a))}
.ui-legal-section__body{color:var(--text,var(--color-text,#0f172a));font-size:0.95rem;line-height:1.85}
.ui-legal-section__body p{margin:0 0 14px}
.ui-legal-section__body p:last-child{margin-bottom:0}
.ui-legal-section__body ul,.ui-legal-section__body ol{margin:12px 0 16px;padding-inline-start:22px;display:grid;gap:8px}
.ui-legal-section__body li{color:var(--text,var(--color-text,#0f172a));line-height:1.75}

.ui-legal-callout{background:color-mix(in srgb,var(--primary,var(--color-primary,#1f75fe)) 6%,var(--surface,var(--color-surface,#ffffff)));border-inline-start:4px solid var(--primary,var(--color-primary,#1f75fe));border-radius:0 var(--radius-md,10px) var(--radius-md,10px) 0;padding:16px 20px;margin:16px 0;display:flex;gap:12px;align-items:flex-start}
[dir="ltr"] .ui-legal-callout{border-radius:var(--radius-md,10px) 0 0 var(--radius-md,10px)}
.ui-legal-callout__icon{color:var(--primary,var(--color-primary,#1f75fe));font-size:1.3rem;flex-shrink:0;margin-top:2px}
.ui-legal-callout__content{font-size:0.92rem;color:var(--text,var(--color-text,#0f172a));line-height:1.7}
.ui-legal-callout__content p{margin:0}
.ui-legal-callout__content strong{color:var(--primary,var(--color-primary,#1f75fe));display:block;margin-bottom:4px}
.ui-legal-callout__content a{color:var(--primary,var(--color-primary,#1f75fe));font-weight:700}

.ui-legal-content{background:var(--surface,var(--color-surface,#ffffff));border:1px solid color-mix(in srgb,var(--border,var(--color-border,#e2e8f0)) 80%,transparent);border-radius:var(--radius-lg,16px);padding:clamp(24px,4vw,40px);margin-bottom:24px;box-shadow:0 2px 8px rgba(0,0,0,0.02);color:var(--text,var(--color-text,#0f172a));font-size:1.05rem;line-height:1.85;text-align:start;overflow-wrap:break-word}
.ui-legal-content>*:first-child{margin-top:0}
.ui-legal-content>*:last-child{margin-bottom:0}
.ui-legal-content h1,.ui-legal-content h2,.ui-legal-content h3,.ui-legal-content h4{color:var(--text,var(--color-text,#0f172a));font-weight:800;margin-top:1.5em;margin-bottom:0.8em;line-height:1.4}
.ui-legal-content h1{font-size:1.75rem}
.ui-legal-content h2{font-size:1.5rem;padding-bottom:12px;border-bottom:1px solid color-mix(in srgb,var(--border,var(--color-border,#e2e8f0)) 60%,transparent)}
.ui-legal-content h3{font-size:1.3rem}
.ui-legal-content p{margin-bottom:1.2em}
.ui-legal-content ul,.ui-legal-content ol{margin-bottom:1.2em;padding-inline-start:24px;display:grid;gap:8px}
.ui-legal-content li{margin-bottom:6px}
.ui-legal-content a{color:var(--primary,var(--color-primary,#1f75fe));font-weight:700;text-decoration:none;border-bottom:1px solid transparent;transition:border-color 0.2s}
.ui-legal-content a:hover{border-color:var(--primary,var(--color-primary,#1f75fe))}
.ui-legal-content blockquote{border-inline-start:4px solid var(--primary,var(--color-primary,#1f75fe));margin:1.5em 0;padding:12px 20px;background:color-mix(in srgb,var(--primary,var(--color-primary,#1f75fe)) 4%,transparent);border-radius:0 var(--radius-md,8px) var(--radius-md,8px) 0}
[dir="ltr"] .ui-legal-content blockquote{border-radius:var(--radius-md,8px) 0 0 var(--radius-md,8px)}

.ui-legal-contact-box{background:var(--surface-2,var(--color-surface-2,#f8fafc));border:1px dashed color-mix(in srgb,var(--border,var(--color-border,#e2e8f0)) 90%,transparent);border-radius:var(--radius-lg,16px);padding:28px;text-align:center;margin-top:32px;display:flex;flex-direction:column;align-items:center;gap:12px}
.ui-legal-contact-box__icon{font-size:2.2rem;color:var(--primary,var(--color-primary))}
.ui-legal-contact-box h3{margin:0;font-size:1.2rem;font-weight:700;color:var(--text,var(--color-text,#0f172a))}
.ui-legal-contact-box p{margin:0;font-size:0.92rem;color:var(--text-secondary,var(--color-text-subtle,#64748b));max-width:550px;line-height:1.6}
.ui-legal-contact-box__actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:6px}

[data-theme="dark"] .ui-legal-header{border-color:color-mix(in srgb,var(--border,#334155) 80%,transparent)}
[data-theme="dark"] .ui-legal-print-btn{background:#0F172A;border-color:var(--border,#334155);color:#f8fafc}
[data-theme="dark"] .ui-legal-print-btn:hover{background:#1E293B}
[data-theme="dark"] .ui-legal-quicknav a{background:#0F172A;border-color:var(--border,#334155);color:#f8fafc}
[data-theme="dark"] .ui-legal-section{background:#0F172A;border-color:color-mix(in srgb,var(--border,#334155) 80%,transparent);box-shadow:0 4px 16px rgba(0,0,0,0.3)}
[data-theme="dark"] .ui-legal-content{background:#0F172A;border-color:color-mix(in srgb,var(--border,#334155) 80%,transparent);box-shadow:0 4px 16px rgba(0,0,0,0.3)}
[data-theme="dark"] .ui-legal-content h2{border-color:color-mix(in srgb,var(--border,#334155) 60%,transparent)}
[data-theme="dark"] .ui-legal-callout{background:color-mix(in srgb,var(--primary,#1f75fe) 12%,#0F172A)}
[data-theme="dark"] .ui-legal-contact-box{background:#0F172A;border-color:var(--border,#334155)}

/* ═══════════════════════════════════════════════════════════
   UI VIDEO PLAYER — Custom controls shared across pages
   Design inspired by landing page: large rounded corners, soft shadow,
   big circular play button with white border, gentle float on hover.
   ═══════════════════════════════════════════════════════════ */
/* الصندوق يتبع نسبة الفيديو الفعلية دائماً (JS يضبط aspect-ratio + --video-ar).
   التقييد بالعرض لا بالارتفاع: عندما يتجاوز الارتفاع الطبيعي 80vh يُقصّ العرض
   بنفس النسبة فيبقى الصندوق مطابقاً للفيديو — ملء كامل بلا أشرطة سوداء ولا قصّ. */
.ui-video-player{position:relative;width:100%;aspect-ratio:16/9;max-width:min(100%,calc(80vh * var(--video-ar,1.7778)));margin-inline:auto;overflow:hidden;background:#000;outline:none;box-shadow:var(--video-shadow);transition:box-shadow .3s ease,transform .3s ease}
.ui-video-player:hover{box-shadow:var(--video-shadow-hover)}
.ui-video-player:focus{box-shadow:0 0 0 3px var(--color-primary,var(--primary)),var(--video-shadow)}
/* خيار الـfloat اللطيف (يُضاف عبر class ui-video-player--float) */
.ui-video-player--float{animation:uiVideoGentleFloat var(--video-float-duration) ease-in-out infinite}
@keyframes uiVideoGentleFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(var(--video-float-distance))}}
@media(prefers-reduced-motion:reduce){.ui-video-player--float{animation:none}}
.ui-video-player__video{display:block;width:100%;height:100%;object-fit:contain;background:#000;cursor:pointer}
/* ── Portrait/vertical video (reels/shorts) — constrain max-width, center ── */
/* JS sets aspect-ratio + --video-ar dynamically; العرض يُقيَّد بحيث لا يتجاوز الارتفاع 90vh */
.ui-video-player--portrait{max-width:min(420px,90vw,calc(90vh * var(--video-ar,0.5625)));margin-inline:auto}
.ui-video-player--portrait .ui-video-player__video{object-fit:contain}
/* Native vertical video (not embed) — ensure 9:16 aspect ratio + constrained width */
.ui-video-player--vertical:not(.ui-video-player--embed){aspect-ratio:9/16;max-width:min(420px,90vw,calc(90vh * var(--video-ar,0.5625)));margin-inline:auto}
.ui-video-player--vertical:not(.ui-video-player--embed) .ui-video-player__video{object-fit:contain}
/* ── Ultra-wide (cinematic 21:9+) — constrain width so height stays ≤60vh ── */
.ui-video-player--ultrawide{max-width:min(100%,calc(60vh * var(--video-ar,2.3333)));margin-inline:auto}
/* poster-img: overlay صورة فوق الفيديو قبل التشغيل — لا تُجبر الفيديو على نسبة أبعادها */
.ui-video-player__poster-img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;display:block}
.ui-video-player--started .ui-video-player__poster-img{opacity:0;pointer-events:none;transition:opacity .3s ease}
/* ── زر التشغيل الكبير (مستوحى من landing page) ── */
.ui-video-player__poster-play{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:rgba(15,23,42,.45);border:none;color:#fff;font-size:3.5rem;cursor:pointer;transition:background .2s,opacity .2s;opacity:1}
.ui-video-player__poster-play:hover{background:rgba(15,23,42,.35)}
/* poster مخصص من المستخدم → لا أوفرلاي (الصورة تظهر كما هي) */
.ui-video-player:not(.ui-video-player--auto-poster) .ui-video-player__poster-play{background:transparent}
.ui-video-player:not(.ui-video-player--auto-poster) .ui-video-player__poster-play:hover{background:rgba(15,23,42,.2)}
/* poster افتراضي (إطار من الفيديو) → أوفرلاي غامق لإبراز زر التشغيل */
.ui-video-player--auto-poster .ui-video-player__poster-play{background:rgba(15,23,42,.55)}
.ui-video-player--auto-poster .ui-video-player__poster-play:hover{background:rgba(15,23,42,.45)}
/* الزر الدائري الكبير: 80px، إطار أبيض 4px، ظل قوي، pulse لطيف */
.ui-video-player__poster-play i{font-size:2.8rem;width:var(--video-play-size);height:var(--video-play-size);border-radius:50%;background:var(--color-primary,var(--primary,#1f75fe));border:var(--video-play-border) solid #fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--video-play-shadow);transition:transform .3s ease,box-shadow .3s ease;animation:uiVideoPulse var(--video-pulse-duration) ease-in-out infinite}
.ui-video-player__poster-play:hover i{transform:scale(var(--video-play-scale));box-shadow:var(--video-play-hover-shadow)}
.ui-video-player__poster-play:active i{transform:scale(.95)}
@keyframes uiVideoPulse{0%,100%{box-shadow:var(--video-play-shadow),0 0 0 0 var(--primary-ghost,rgba(31,117,254,.5))}50%{box-shadow:var(--video-play-shadow),0 0 0 16px var(--primary-ghost,rgba(31,117,254,0))}}
@media(prefers-reduced-motion:reduce){.ui-video-player__poster-play i{animation:none}}
.ui-video-player__poster-play[hidden]{opacity:0;pointer-events:none}
/* بعد التشغيل الأول: إخفاء poster-play دائماً (بدلاً منه تظهر الـcontrols) */
.ui-video-player--started .ui-video-player__poster-play{opacity:0;pointer-events:none}
.ui-video-player__overlay{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:transparent;border:none;cursor:pointer;opacity:0;transition:opacity .2s}
.ui-video-player__overlay[hidden]{opacity:0;pointer-events:none}
.ui-video-player__overlay::after{content:'';display:block;width:var(--video-play-size);height:var(--video-play-size);border-radius:50%;background:var(--color-primary,var(--primary));color:#fff;font-size:3.5rem;box-shadow:var(--video-play-shadow);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:calc(var(--video-play-size) * .5)}
.ui-video-player__loading{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.5);color:#fff;font-size:2.5rem;pointer-events:none}
.ui-video-player__loading[hidden]{display:none}
.ui-video-player__loading i{animation:uiVideoSpin 1s linear infinite}
@keyframes uiVideoSpin{to{transform:rotate(360deg)}}
/* ── Video Controls — تصميم احترافي مخصص LTR ── */
.ui-video-player__controls{position:absolute;inset-inline:0;bottom:0;z-index:6;display:flex;align-items:center;gap:10px;padding:10px 14px;background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.4) 60%,transparent 100%);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
/* الحالة الابتدائية (قبل التشغيل الأول): إخفاء الـcontrols — فقط poster-play */
.ui-video-player:not(.ui-video-player--started):not(.ui-video-player--error) .ui-video-player__controls{opacity:0;visibility:hidden}
/* بعد التشغيل: الـcontrols تظهر عند hover/focus أو --controls-visible (من JS) */
.ui-video-player--started:not(.ui-video-player--error):hover .ui-video-player__controls,
.ui-video-player--started:not(.ui-video-player--error):focus-within .ui-video-player__controls,
.ui-video-player--started:not(.ui-video-player--error).ui-video-player--controls-visible .ui-video-player__controls{opacity:1;visibility:visible}
.ui-video-player__controls-left,.ui-video-player__controls-right{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.ui-video-player__controls-right{margin-inline-start:auto}
.ui-video-player__play,.ui-video-player__mute,.ui-video-player__fullscreen,.ui-video-player__speed,.ui-video-player__pip{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;background:transparent;border:none;color:#fff;font-size:1.05rem;cursor:pointer;border-radius:var(--radius-sm,6px);transition:background .15s,color .15s,transform .1s}
.ui-video-player__play:hover,.ui-video-player__mute:hover,.ui-video-player__fullscreen:hover,.ui-video-player__speed:hover,.ui-video-player__pip:hover{background:rgba(255,255,255,.18);color:var(--color-primary,var(--primary,#1f75fe))}
.ui-video-player__play:active,.ui-video-player__mute:active,.ui-video-player__fullscreen:active,.ui-video-player__speed:active,.ui-video-player__pip:active{transform:scale(.92)}
.ui-video-player__play{background:var(--color-primary,var(--primary,#1f75fe));color:#fff;width:36px;height:36px;border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.ui-video-player__play:hover{background:var(--color-primary-hover,var(--primary-dim,#1558c9));color:#fff;transform:scale(1.06)}
.ui-video-player__speed{font-size:.78rem;font-weight:700;font-variant-numeric:tabular-nums;width:auto;min-width:34px;padding:0 8px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15)}
.ui-video-player__speed:hover{background:rgba(255,255,255,.2);color:#fff}
.ui-video-player__time{flex:0 0 auto;color:rgba(255,255,255,.9);font-size:.78rem;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:.02em}
.ui-video-player__seek{flex:1;min-width:40px;-webkit-appearance:none;appearance:none;height:5px;background:rgba(255,255,255,.2);border-radius:3px;cursor:pointer;transition:height .15s}
.ui-video-player__seek:hover{height:7px}
.ui-video-player__seek::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--color-primary,var(--primary,#1f75fe));box-shadow:0 2px 8px rgba(0,0,0,.4),0 0 0 0 var(--primary-ghost,rgba(31,117,254,.4));margin-top:-4.5px;transition:box-shadow .15s,transform .15s}
.ui-video-player__seek:hover::-webkit-slider-thumb{transform:scale(1.2);box-shadow:0 2px 8px rgba(0,0,0,.4),0 0 0 5px var(--primary-ghost,rgba(31,117,254,.25))}
.ui-video-player__seek::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--color-primary,var(--primary,#1f75fe));border:none;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.ui-video-player__volume{width:60px;max-width:25%;-webkit-appearance:none;appearance:none;height:4px;background:rgba(255,255,255,.2);border-radius:3px;cursor:pointer;transition:width .2s,height .15s}
.ui-video-player__volume:hover{height:5px}
.ui-video-player__volume::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;border-radius:50%;background:#fff;margin-top:-3.5px;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.ui-video-player__volume::-moz-range-thumb{width:11px;height:11px;border-radius:50%;background:#fff;border:none;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.ui-video-player__error{position:absolute;inset:0;z-index:7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:rgba(0,0,0,.85);color:#fff;text-align:center;padding:20px}
.ui-video-player__error[hidden]{display:none}
.ui-video-player__error i{font-size:2.5rem;color:var(--color-danger,#ef4444)}
.ui-video-player__error p{margin:0;font-size:.95rem;color:rgba(255,255,255,.85)}
.ui-video-player__retry{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;background:var(--color-primary,var(--primary));color:#fff;border:none;border-radius:var(--radius-sm,6px);font-size:.85rem;font-weight:600;cursor:pointer;transition:opacity .15s}
.ui-video-player__retry:hover{opacity:.85}
.ui-video-player--error .ui-video-player__controls{display:none}


/* ── Embed Facade: مشغل موحد لفيديوهات YouTube/Facebook/TikTok/... ── */
/* نفس شكل المشغل الأصلي: poster + زر دائري، وعند النقر يُستبدل بـiframe */
.ui-video-player--embed{position:relative;width:100%;background:#000;overflow:hidden;cursor:pointer;aspect-ratio:16/9}
.ui-video-player--embed.ui-video-player--vertical{aspect-ratio:9/16;max-width:380px;margin:0 auto}
.ui-video-player--embed .ui-video-player__poster-img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;display:block}
.ui-video-player--embed .ui-video-player__poster-play{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:rgba(15,23,42,.45);border:none;color:#fff;font-size:3.5rem;cursor:pointer;transition:background .2s,opacity .2s;opacity:1}
.ui-video-player--embed .ui-video-player__poster-play:hover{background:rgba(15,23,42,.35)}
.ui-video-player--embed:not(.ui-video-player--auto-poster) .ui-video-player__poster-play{background:transparent}
.ui-video-player--embed:not(.ui-video-player--auto-poster) .ui-video-player__poster-play:hover{background:rgba(15,23,42,.2)}
.ui-video-player--embed.ui-video-player--auto-poster .ui-video-player__poster-play{background:rgba(15,23,42,.55)}
.ui-video-player--embed.ui-video-player--auto-poster .ui-video-player__poster-play:hover{background:rgba(15,23,42,.45)}
.ui-video-player--embed .ui-video-player__poster-play i{font-size:2.8rem;width:var(--video-play-size);height:var(--video-play-size);border-radius:50%;background:var(--color-primary,var(--primary,#1f75fe));border:var(--video-play-border) solid #fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--video-play-shadow);transition:transform .3s ease,box-shadow .3s ease;animation:uiVideoPulse var(--video-pulse-duration) ease-in-out infinite}
.ui-video-player--embed .ui-video-player__poster-play:hover i{transform:scale(var(--video-play-scale));box-shadow:var(--video-play-hover-shadow)}
.ui-video-player--embed .ui-video-player__poster-play:active i{transform:scale(.95)}
@media(prefers-reduced-motion:reduce){.ui-video-player--embed .ui-video-player__poster-play i{animation:none}}
/* بعد النقر: استبدال الـfacade بـiframe — الحفاظ على aspect-ratio لمنع انهيار الارتفاع */
.ui-video-player--embed--loaded{cursor:default}
.ui-video-player--embed--loaded .ui-video-player__poster-img,
.ui-video-player--embed--loaded .ui-video-player__poster-play{display:none}
.ui-video-player--embed--loaded iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* Ensure fallback still works */
.ui-item__video-fallback{display:flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-4);background:var(--color-surface-2);border:1px dashed var(--color-border);border-radius:var(--radius-md)}

/* ═══════════════════════════════════════════════════════════════════════════
/* ── Page Builder (admin /pages editor) ─────────────────────────── */
.page-builder-wrapper{padding:24px;display:flex;flex-direction:column;gap:16px}
.page-builder-form{display:flex;flex-direction:column;gap:16px}
.page-builder-form label:not(.button):not(.btn):not(.checkbox-label):not(.toggle-switch):not(.toggle-switch__label),#page-form label:not(.button):not(.btn):not(.checkbox-label):not(.toggle-switch):not(.toggle-switch__label){display:grid;gap:6px;font-weight:500;font-size:var(--text-sm);color:var(--text2,var(--color-text-subtle,#6b7280));margin-bottom:0}
.page-builder-form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),.page-builder-form select,.page-builder-form textarea,#page-form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),#page-form select,#page-form textarea{width:100%;height:var(--control-h,38px);padding:0 var(--control-padding-x,10px);border:1px solid var(--border2,var(--color-border-strong,#cbd5e1));border-radius:var(--control-radius,0);background:var(--surface,var(--color-surface,#fff));color:var(--text,var(--color-text,#0f172a));font-size:var(--control-font-size,var(--text-sm));font-family:inherit;line-height:normal;box-sizing:border-box;outline:none;transition:border-color .15s,box-shadow .15s}
.page-builder-form textarea,#page-form textarea{height:auto;min-height:calc(var(--control-h,38px) * 2.5);padding:10px var(--control-padding-x,10px);resize:vertical}
.page-builder-form input:focus,.page-builder-form select:focus,.page-builder-form textarea:focus,#page-form input:focus,#page-form select:focus,#page-form textarea:focus{border-color:var(--primary,var(--color-primary,#1f75fe));box-shadow:0 0 0 2px color-mix(in srgb,var(--primary,var(--color-primary,#1f75fe)) 20%,transparent)}
.page-builder-form .two-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-panel .two-fields,.form-section .two-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.page-builder-form .checkbox-label{display:flex;align-items:center;gap:8px;cursor:pointer;padding-top:24px;font-size:var(--text-sm);color:var(--text,var(--color-text,#0f172a))}
.page-builder-form .checkbox-label input[type="checkbox"]{width:auto;margin:0}
.page-builder-form .code-textarea{font-family:var(--font-num,monospace);font-size:var(--text-xs,0.75rem);direction:ltr;text-align:left}
.page-builder-form .form-hint{margin-top:4px}
.page-builder-section{margin-top:24px;border-top:1px solid var(--border,var(--color-border,#e5e7eb));padding-top:20px}
.page-builder-section__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.page-builder-section__title{font-size:var(--text-sm);font-weight:700;display:block;margin-bottom:12px}

/* ── PB Card Design (UI/UX v2) ────────────────────────────────────── */
.pb-card{background:var(--surface,var(--color-surface,#fff));border:1px solid var(--border,var(--color-border,#e5e7eb));border-radius:var(--radius-md,12px);overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,0.04)}
.pb-card__header{display:flex;align-items:flex-start;gap:12px;padding:16px 20px;border-bottom:1px solid var(--border,var(--color-border,#e5e7eb));background:var(--surface2,var(--color-surface-2,#f8fafc))}
.pb-card__header--summary{cursor:pointer;list-style:none;user-select:none;transition:background .15s}
.pb-card__header--summary:hover{background:color-mix(in srgb,var(--surface2,var(--color-surface-2,#f8fafc)) 50%,var(--primary,var(--color-primary,#1f75fe)) 4%)}
.pb-card__header--summary::-webkit-details-marker{display:none}
.pb-card__chevron{margin-inline-start:auto;color:var(--text3,var(--color-text-subtle,#9ca3af));font-size:20px;transition:transform .2s}
.pb-card--collapsible[open] .pb-card__chevron{transform:rotate(180deg)}
.pb-card__icon{font-size:24px;line-height:1;flex-shrink:0}
.pb-card__title{font-size:var(--text-sm,0.875rem);font-weight:700;color:var(--text,var(--color-text,#0f172a));margin:0}
.pb-card__desc{font-size:var(--text-xs,0.75rem);color:var(--text3,var(--color-text-subtle,#9ca3af));margin:2px 0 0}
.pb-card__body{padding:20px;display:flex;flex-direction:column;gap:16px}
.pb-badge{display:inline-flex;align-items:center;padding:2px 10px;border-radius:var(--radius-full,9999px);background:color-mix(in srgb,var(--primary,var(--color-primary,#1f75fe)) 10%,transparent);color:var(--primary,var(--color-primary,#1f75fe));font-size:var(--text-xs,0.75rem);font-weight:600;margin-inline-start:auto}
.pb-toggle-field{justify-content:flex-start}
.pb-toggle-row{display:flex;align-items:center;gap:12px;padding-top:4px}
.pb-toggle-row__text{display:flex;flex-direction:column;gap:2px}
.pb-toggle-row__label{font-size:var(--text-sm,0.875rem);font-weight:600;color:var(--text,var(--color-text,#0f172a))}
/* RTL: الكانفاس على اليمين، البلوكات على اليسار البصري = inline-start */
/* grid-template-columns: [palette] [canvas] — palette أولاً (inline-start في RTL = يمين) */
.page-builder-grid{display:grid;grid-template-columns:300px 1fr;gap:20px}
/* PB-U13 fix: min-width:0 على أعمدة الـgrid يمنع المحتوى (CodeMirror، URLs طويلة)
   من توسيع العمود خارج حدوده → يمنع الخروج البصري للصفحة عن حدود الكتلة */
.page-builder-grid > *{min-width:0}
.block-palette{display:flex;flex-direction:column;gap:6px;padding-inline-end:4px}
.block-palette__search{position:sticky;top:0;background:var(--surface,var(--color-surface,#fff));padding:6px 0;z-index:1;border-bottom:1px solid var(--border,var(--color-border,#e5e7eb));margin-bottom:4px}
.block-palette__search input{width:100%;height:32px;padding:0 10px;border:1px solid var(--border,var(--color-border,#e5e7eb));border-radius:var(--control-radius,0);font-size:var(--text-xs,0.75rem);background:var(--surface,var(--color-surface,#fff));color:var(--text,var(--color-text,#0f172a));box-sizing:border-box;outline:none}
.block-palette__search input:focus{border-color:var(--primary,var(--color-primary,#1f75fe))}
.block-palette-item{display:flex;align-items:center;gap:8px;padding:9px 11px;border:1px solid var(--border,var(--color-border,#e5e7eb));border-radius:var(--radius-sm,0);background:var(--surface,var(--color-surface,#fff));cursor:grab;font-size:var(--text-sm,0.875rem);transition:all .15s;user-select:none}
.block-palette-item__icon{font-size:17px;flex-shrink:0}
.block-palette-item__info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.block-palette-item__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm,0.875rem);font-weight:500}
.block-palette-item__desc{font-size:var(--text-xs,0.7rem);color:var(--text3,var(--color-text-subtle,#9ca3af));line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.block-palette-item__add{color:var(--primary,var(--color-primary,#1f75fe));font-size:16px;font-weight:700;flex-shrink:0}
.palette-group{margin-bottom:8px}
.palette-group__summary{padding:12px 14px !important;font-size:var(--text-sm,0.875rem) !important;text-transform:none !important;letter-spacing:normal !important;gap:8px !important}
.palette-group__icon{font-size:16px;flex-shrink:0}
.palette-group__label{flex:1;min-width:0;font-weight:700;font-size:var(--text-sm,0.875rem)}
.palette-group__count{background:color-mix(in srgb,var(--primary,var(--color-primary,#1f75fe)) 10%,transparent);color:var(--primary,var(--color-primary,#1f75fe));font-size:var(--text-xs,0.7rem);padding:1px 8px;border-radius:var(--radius-full,9999px);font-weight:600;flex-shrink:0}
.palette-group__items{display:flex;flex-direction:column;gap:5px;padding:10px 14px}
.palette-group .ui-faq-icon{width:24px !important;height:24px !important;font-size:16px !important}
.version-row{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-bottom:1px solid var(--border,var(--color-border,#e5e7eb));font-size:var(--text-sm,0.875rem)}
.version-row:last-child{border-bottom:0}
.version-row__info{display:flex;flex-direction:column;gap:2px}
.version-row__num{font-weight:600;color:var(--text,var(--color-text,#0f172a))}
.version-row__date{font-size:var(--text-xs,0.75rem);color:var(--text2,var(--color-text-subtle,#6b7280))}
.version-row__meta{font-size:var(--text-xs,0.75rem);color:var(--text3,var(--color-text-subtle,#9ca3af))}
.sections-canvas{min-height:200px;border:2px dashed var(--border,var(--color-border,#e5e7eb));border-radius:var(--radius-sm,0);transition:all .2s}
@media(max-width:1023px){.form-panel .two-fields,.form-section .two-fields{grid-template-columns:1fr}.page-builder-form .two-fields{grid-template-columns:1fr}.page-builder-grid{grid-template-columns:1fr !important}}
.block-palette-item:hover{border-color:var(--primary,var(--color-primary,#1f75fe));background:var(--surface2,var(--color-surface-2,#f8fafc));transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,0.08)}
.block-palette-item:active{cursor:grabbing;transform:translateY(0)}
.block-palette-item.hidden-by-search{display:none !important}
.palette-group summary::-webkit-details-marker{display:none}
.palette-group[open] .palette-group__summary{margin-bottom:0}
.palette-group__summary:hover{color:var(--primary,var(--color-primary,#1f75fe))}
.section-item{border:1px solid var(--border,var(--color-border,#e5e7eb));border-radius:var(--radius-md,0);background:var(--surface,var(--color-surface,#fff));margin-bottom:8px;transition:border-color .15s,box-shadow .15s;min-width:0}
.section-item:hover{box-shadow:0 2px 8px rgba(0,0,0,0.08)}
.section-item.dragging{opacity:0.5;border:2px dashed var(--primary,var(--color-primary,#1f75fe)) !important}
.section-item.drag-over{border-top:3px solid var(--primary,var(--color-primary,#1f75fe)) !important}
.section-item.expanded{border-color:var(--primary,var(--color-primary,#1f75fe)) !important;box-shadow:0 4px 16px rgba(31,117,254,0.12) !important}
.section-item.selected{border-color:var(--primary,var(--color-primary,#1f75fe)) !important;box-shadow:0 0 0 2px color-mix(in srgb,var(--primary,var(--color-primary,#1f75fe)) 25%,transparent) !important}
.section-item.hidden-section{opacity:0.55;background:var(--surface2,var(--color-surface-2,#f8fafc))}
.section-item.hidden-section .section-item__title{text-decoration:line-through;color:var(--text3,var(--color-text-subtle,#9ca3af))}
.section-item__row{display:flex;align-items:center;gap:8px;padding:10px 12px;min-width:0}
.section-item__handle{cursor:grab;flex-shrink:0;color:var(--text3,var(--color-text-subtle,#9ca3af));font-size:16px;padding:2px;user-select:none;line-height:1}
.section-item__handle:active{cursor:grabbing}
.section-item__icon{font-size:18px;flex-shrink:0}
.section-item__title{flex:1;min-width:0;font-size:var(--text-sm,0.875rem);font-weight:600;color:var(--text,var(--color-text,#0f172a));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.section-item__type{font-size:var(--text-xs,0.75rem);color:var(--text3,var(--color-text-subtle,#9ca3af));font-family:var(--font-num,monospace);flex-shrink:0}
.section-item__actions{display:flex;align-items:center;gap:4px;flex-shrink:0}
/* section-item__btn: يتطابق مع .button المركزي في الارتفاع والحجم والـradius */
.section-item__btn{width:var(--control-h,32px);height:var(--control-h,32px);display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border,var(--color-border,#e5e7eb));border-radius:var(--control-radius,0);background:var(--surface,var(--color-surface,#fff));color:var(--text2,var(--color-text-subtle,#6b7280));cursor:pointer;font-size:14px;padding:0;transition:all .15s;line-height:1;font-family:inherit;outline:none;box-sizing:border-box}
.section-item__btn:hover{border-color:var(--primary,var(--color-primary,#1f75fe));color:var(--primary,var(--color-primary,#1f75fe))}
.section-item__btn:disabled{opacity:0.4;cursor:not-allowed;border-color:var(--border,var(--color-border,#e5e7eb)) !important;color:var(--text3,var(--color-text-subtle,#9ca3af)) !important}
.section-item__btn--danger:hover{border-color:var(--danger,#ef4444);color:var(--danger,#ef4444)}
.section-item__btn--toggle.is-on{color:var(--success,#10b981);border-color:var(--success,#10b981)}
.section-item__btn--toggle.is-off{color:var(--text3,var(--color-text-subtle,#9ca3af))}
.section-item__body{padding:0 12px 12px;display:none;overflow-x:auto}
.section-item.expanded .section-item__body{display:block}
.section-item__badge{font-size:var(--text-xs,0.75rem);padding:1px 6px;border-radius:var(--radius-full,9999px);font-weight:600;flex-shrink:0}
.section-item__badge--hidden{background:var(--surface2,var(--color-surface-2,#f1f5f9));color:var(--text3,var(--color-text-subtle,#9ca3af))}
.section-item__badge--visible{background:color-mix(in srgb,var(--success,#10b981) 12%,transparent);color:var(--success,#10b981)}
.section-item__drop-indicator{height:3px;background:var(--primary,var(--color-primary,#1f75fe));border-radius:var(--radius-full,9999px);margin:-1px 0}
.section-empty{min-height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--text3,var(--color-text-subtle,#9ca3af));padding:24px}
.section-empty__icon{font-size:40px;opacity:0.3}
.section-empty__title{font-size:var(--text-sm,0.875rem);font-weight:600;color:var(--text,var(--color-text,#0f172a))}
.section-empty__hint{font-size:var(--text-xs,0.75rem)}
.config-form{display:grid;gap:8px;min-width:0}
.config-form .form-group{margin:0}
.config-form .form-group label{font-size:var(--text-xs,0.75rem);font-weight:600;color:var(--text2,var(--color-text-subtle,#6b7280))}
.config-form .list-item{border:1px solid var(--border,var(--color-border,#e5e7eb));border-radius:var(--radius-sm,0);padding:8px;margin-bottom:6px;position:relative}
.config-form .list-item__remove{position:absolute;top:4px;inset-inline-start:4px;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--danger,#ef4444);border-radius:var(--control-radius,0);background:var(--surface,var(--color-surface,#fff));color:var(--danger,#ef4444);font-size:11px;cursor:pointer;padding:0;line-height:1}
.json-advanced{margin-top:8px}
.json-advanced summary{font-size:var(--text-xs,0.75rem);color:var(--text3,var(--color-text-subtle,#9ca3af));cursor:pointer}
.json-advanced textarea{width:100%;height:120px;font-family:var(--font-num,monospace);font-size:var(--text-xs,0.75rem);direction:ltr;text-align:left;margin-top:4px}
.sections-canvas.drag-active{border-color:var(--primary,var(--color-primary,#1f75fe)) !important;background:color-mix(in srgb,var(--primary,var(--color-primary,#1f75fe)) 5%,transparent) !important}
.sections-canvas.drag-over-empty{border-color:var(--primary,var(--color-primary,#1f75fe)) !important;background:color-mix(in srgb,var(--primary,var(--color-primary,#1f75fe)) 8%,transparent) !important;border-width:3px !important}
#pb-unsaved-bar{position:sticky;top:0;z-index:50;background:var(--warn,#f59e0b);color:#fff;padding:8px 16px;font-size:var(--text-xs,0.75rem);font-weight:700;display:none;align-items:center;justify-content:center;gap:8px;border-radius:var(--control-radius,0);margin-bottom:12px}
#pb-unsaved-bar.show{display:flex}
.config-form .form-group label{font-size:var(--text-xs,0.75rem);font-weight:600;color:var(--text2,var(--color-text-subtle,#6b7280))}
.config-form .checkbox-label{display:flex;align-items:center;gap:6px;cursor:pointer}
.config-form .checkbox-label input[type="checkbox"]{width:auto;margin:0}
.config-form .media-input-row{display:flex;gap:4px}
.config-form .media-input-row input{flex:1}
.config-form .media-input-row .button{font-size:var(--text-xs,0.75rem);padding:4px 8px}
.config-form .media-preview{margin-top:4px}
.config-form .media-preview img{max-width:100%;max-height:80px;border-radius:var(--radius-sm,0)}
.config-form .media-preview img.media-preview__img{object-fit:cover}
.config-form .media-preview--video{font-size:var(--text-xs,0.75rem);color:var(--text3,var(--color-text-subtle,#6b7280))}
.config-form .list-label{font-weight:600}
.config-form .list-add-btn{font-size:var(--text-xs,0.75rem);padding:4px 10px;margin-top:4px}
.config-form .no-config{font-size:var(--text-xs,0.75rem);color:var(--text3,var(--color-text-subtle,#9ca3af))}
.json-advanced__actions{display:flex;gap:6px;margin-top:4px}
.json-advanced__actions .button{font-size:var(--text-xs,0.75rem);padding:4px 10px}
.media-modal-footer{display:flex;gap:8px;align-items:center}
.media-modal-footer .button-secondary{cursor:pointer;font-size:var(--text-sm,0.875rem);margin:0}
.media-modal-footer .file-input-hidden{display:none}
.media-modal-footer .upload-label{cursor:pointer;font-size:var(--text-sm,0.875rem);margin:0}
.media-upload-loading{font-size:var(--text-sm,0.875rem)}
.config-form .ltr-input{direction:ltr;text-align:left}
/* ── OG image input (page builder SEO section) ── */
.og-media-input{display:flex;gap:4px;align-items:flex-start}
.og-media-input__btn{flex-shrink:0}
.og-media-preview{margin-top:4px}
.og-media-preview img{max-width:100%;max-height:80px;object-fit:cover}

/* ── CodeMirror 6 (page builder code editors) ── */
.cm-hidden-textarea{display:none !important}
.cm-editor{font-family:var(--font-num,monospace);font-size:var(--text-xs,0.75rem);border:1px solid var(--border2,var(--color-border-strong,#cbd5e1));border-radius:var(--control-radius,0);background:var(--surface,var(--color-surface,#fff));color:var(--text,var(--color-text,#0f172a));direction:ltr;text-align:left}
.cm-editor.cm-focused{border-color:var(--primary,var(--color-primary,#1f75fe));box-shadow:0 0 0 2px color-mix(in srgb,var(--primary,var(--color-primary,#1f75fe)) 20%,transparent)}
.cm-editor .cm-scroller{font-family:var(--font-num,monospace);line-height:1.5;direction:ltr}
.cm-editor .cm-gutters{background:var(--surface2,var(--color-surface-2,#f8fafc));border-inline-end:1px solid var(--border,var(--color-border,#e5e7eb));color:var(--text3,var(--color-text-muted,#94a3b8));direction:ltr}
.cm-editor .cm-activeLineGutter{background:var(--surface2,var(--color-surface-2,#f1f5f9));color:var(--text2,var(--color-text-subtle,#475569))}
.cm-editor .cm-activeLine{background:color-mix(in srgb,var(--primary,var(--color-primary,#1f75fe)) 4%,transparent)}
.cm-editor .cm-selectionBackground{background:color-mix(in srgb,var(--primary,var(--color-primary,#1f75fe)) 20%,transparent) !important}
.cm-editor .cm-cursor{border-inline-start-color:var(--primary,var(--color-primary,#1f75fe))}
.cm-editor .cm-content{caret-color:var(--primary,var(--color-primary,#1f75fe));direction:ltr;text-align:left}
/* textareas المؤقتة قبل تهيئة CodeMirror — LTR إجباري */
textarea[data-cm-language]{direction:ltr !important;text-align:left !important}
/* تلوين الصيغة — يتطابق مع ألوان الثيم */
.cm-editor .tok-keyword{color:var(--primary,var(--color-primary,#1f75fe))}
.cm-editor .tok-string{color:var(--success,#10b981)}
.cm-editor .tok-number{color:var(--warn,#f59e0b)}
.cm-editor .tok-bool{color:var(--danger,#ef4444)}
.cm-editor .tok-comment{color:var(--text3,var(--color-text-muted,#94a3b8));font-style:italic}
.cm-editor .tok-propertyName{color:var(--text,var(--color-text,#0f172a));font-weight:600}
.cm-editor .tok-variableName{color:var(--primary,var(--color-primary,#1f75fe))}
.cm-editor .tok-punctuation{color:var(--text2,var(--color-text-subtle,#475569))}
.upload-icon{margin-inline-end:4px;vertical-align:middle}
.section-item:focus-visible{outline:2px solid var(--primary,var(--color-primary,#1f75fe));outline-offset:2px}
.slug-feedback--error{color:var(--danger,#dc2626)}
.slug-feedback--hint{color:var(--text2,var(--color-text-subtle,#6b7280))}
.palette-group.hidden-by-search{display:none}

/* ── Tools Workspace (toolsati / rawabti) — نظام مركزي لصفحات الأدوات ────────
   كل أداة تستخدم هذه الـclasses حصراً بدل inline styles. المساحة تملأ .content
   بالكامل (بدون max-width)، والحواف تتبع --radius-* (flat)، والألوان من الثيم. */
.ui-tool-workspace{width:100%;min-height:calc(100vh - var(--topbar-h) - var(--bottom-h) - 48px);display:flex;flex-direction:column;gap:var(--space-4)}
.ui-tool-workspace--row{flex-direction:row;align-items:stretch;flex-wrap:wrap}
.ui-tool-stage{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:0}
.ui-tool-stage--start{justify-content:flex-start;align-items:stretch}
.ui-tool-stage[hidden]{display:none}
.ui-tool-hidden{display:none !important}
.ui-tool-fill{flex:1 1 auto;min-height:0;min-width:0}
.ui-tool-scroll{overflow:auto;min-height:0}

/* Dropzone — منطقة الإفلات تملأ العرض */
.ui-tool-dropzone{width:100%;border:2px dashed var(--color-border-strong);border-radius:var(--radius-md);padding:var(--space-12) var(--space-6);text-align:center;cursor:pointer;background:var(--color-surface);transition:border-color .15s,background .15s,box-shadow .15s;display:flex;flex-direction:column;align-items:center;gap:var(--space-3)}
.ui-tool-dropzone:hover,.ui-tool-dropzone:focus-visible,.ui-tool-dropzone.drag-over,.ui-tool-dropzone.dragover{border-color:var(--color-primary);background:var(--color-primary-subtle);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 12%,transparent)}
.ui-tool-dropzone--compact{padding:var(--space-6)}
.ui-tool-dropzone__icon{width:72px;height:72px;border-radius:var(--radius-md);background:var(--color-primary-subtle);color:var(--color-primary);display:inline-flex;align-items:center;justify-content:center;font-size:var(--text-3xl)}
.ui-tool-dropzone__title{font-size:var(--text-2xl);font-weight:800;color:var(--color-text);margin:0}
.ui-tool-dropzone__hint{font-size:var(--text-base);color:var(--color-text-subtle);margin:0;line-height:1.6;max-width:60ch}
.ui-tool-dropzone .primary-button,.ui-tool-dropzone .button-secondary{pointer-events:none}

/* Header row — عنوان + badge + إجراء */
.ui-tool-header{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);flex-wrap:wrap;padding-bottom:var(--space-3);border-bottom:1px solid var(--color-border)}
.ui-tool-header__start,.ui-tool-header__end{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;min-width:0}
.ui-tool-header__title{margin:0;font-size:var(--text-lg);font-weight:800;color:var(--color-text)}
.ui-tool-header__sub{margin:0;font-size:var(--text-sm);color:var(--color-text-subtle)}
.ui-tool-title{margin:0;font-size:var(--text-xl);font-weight:800;color:var(--color-text)}
.ui-tool-subtitle{margin:0;font-size:var(--text-sm);color:var(--color-text-subtle);line-height:1.6}
.ui-tool-text-muted{color:var(--color-text-muted);font-size:var(--text-xs)}
.ui-tool-text-primary{color:var(--color-primary)}
.ui-tool-text-success{color:var(--color-success)}
.ui-tool-text-danger{color:var(--color-danger)}
.ui-tool-text-center{text-align:center}
.ui-tool-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums}

/* Grids */
.ui-tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--space-4);align-content:start;width:100%}
.ui-tool-grid--sm{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.ui-tool-grid--lg{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.ui-tool-grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.ui-tool-grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.ui-tool-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-4);width:100%;align-items:start}
.ui-tool-split--aside{grid-template-columns:minmax(0,2fr) minmax(280px,1fr)}
@media(max-width:1023px){.ui-tool-split,.ui-tool-split--aside{grid-template-columns:1fr}}

/* Cards */
.ui-tool-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);display:flex;flex-direction:column;overflow:hidden;min-width:0;position:relative}
.ui-tool-card--pad{padding:var(--space-4)}
.ui-tool-card--center{align-items:center;text-align:center}
.ui-tool-card__thumb{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--color-surface-2);display:block}
.ui-tool-card__thumb--wide{aspect-ratio:4/3}
.ui-tool-card__body{padding:var(--space-3);display:flex;flex-direction:column;gap:var(--space-1);min-width:0}
.ui-tool-card__title{font-size:var(--text-sm);font-weight:700;color:var(--color-text);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-tool-card__meta{font-size:var(--text-xs);color:var(--color-text-muted);margin:0}
.ui-tool-card__actions{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap;padding:var(--space-2) var(--space-3);border-top:1px solid var(--color-border)}
.ui-tool-card__remove{position:absolute;top:var(--space-2);inset-inline-end:var(--space-2);width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-danger);cursor:pointer;z-index:2}
.ui-tool-card__remove:hover{background:var(--color-danger-subtle)}
.ui-tool-card--dashed{border-style:dashed;border-color:var(--color-border-strong);align-items:center;justify-content:center;cursor:pointer;color:var(--color-text-subtle);min-height:120px;gap:var(--space-2)}
.ui-tool-card--dashed:hover{border-color:var(--color-primary);color:var(--color-primary);background:var(--color-primary-subtle)}
.ui-tool-card--active{border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary-subtle)}

/* Settings blocks داخل الدرج (filter drawer) */
.ui-tool-drawer{padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-4)}
.ui-tool-setting{display:flex;flex-direction:column;gap:var(--space-2);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-3)}
.ui-tool-setting--row{flex-direction:row;justify-content:space-between;align-items:center}
.ui-tool-setting__label{display:flex;align-items:center;gap:var(--space-2);font-weight:700;font-size:var(--text-sm);color:var(--color-text);margin:0}
.ui-tool-setting__label i{color:var(--color-primary)}
.ui-tool-setting__row{display:flex;justify-content:space-between;align-items:center;gap:var(--space-2)}
.ui-tool-setting__hint{font-size:var(--text-xs);color:var(--color-text-muted);line-height:1.5}
.ui-tool-setting__scale{display:flex;justify-content:space-between;font-size:var(--text-xs);color:var(--color-text-muted)}
.ui-tool-setting .form-control,.ui-tool-setting select,.ui-tool-setting input[type="text"],.ui-tool-setting input[type="number"],.ui-tool-setting textarea{width:100%}
.ui-tool-range{width:100%;accent-color:var(--color-primary);cursor:pointer;margin:0}
.ui-tool-color{width:100%;height:var(--control-h);padding:2px;border:1px solid var(--color-border-strong);border-radius:var(--control-radius);background:var(--color-surface);cursor:pointer}
.ui-tool-badge-value{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;background:var(--color-primary-subtle);color:var(--color-primary);border-radius:var(--radius-sm);padding:2px 8px;font-size:var(--text-xs)}

/* Switch (checkbox) */
.ui-tool-switch{position:relative;display:inline-block;width:44px;height:24px;cursor:pointer;flex-shrink:0}
.ui-tool-switch input{opacity:0;width:0;height:0;position:absolute}
.ui-tool-switch__track{position:absolute;inset:0;background:var(--color-border-strong);border-radius:var(--radius-full);transition:background .2s}
.ui-tool-switch__track::after{content:'';position:absolute;top:2px;inset-inline-start:2px;width:20px;height:20px;background:var(--color-surface);border-radius:var(--radius-full);transition:transform .2s;box-shadow:var(--shadow-xs)}
.ui-tool-switch input:checked+.ui-tool-switch__track{background:var(--color-primary)}
.ui-tool-switch input:checked+.ui-tool-switch__track::after{transform:translateX(-20px)}
[dir="ltr"] .ui-tool-switch input:checked+.ui-tool-switch__track::after{transform:translateX(20px)}
.ui-tool-switch input:focus-visible+.ui-tool-switch__track{box-shadow:0 0 0 3px var(--color-primary-subtle)}

/* Notes / alerts خفيفة داخل الأداة */
.ui-tool-note{display:flex;align-items:flex-start;gap:var(--space-2);padding:var(--space-3);border-radius:var(--radius-md);background:var(--color-surface-2);border:1px solid var(--color-border);font-size:var(--text-xs);color:var(--color-text-subtle);line-height:1.5}
.ui-tool-note i{font-size:var(--text-base);flex-shrink:0}
.ui-tool-note--success{background:var(--color-success-subtle);border-color:var(--color-success-border);color:var(--color-text-subtle)}
.ui-tool-note--success i{color:var(--color-success)}
.ui-tool-note--info{background:var(--color-primary-subtle);border-color:var(--color-primary-border)}
.ui-tool-note--info i{color:var(--color-primary)}
.ui-tool-note--warn{background:var(--color-warning-subtle);border-color:var(--color-warning-border)}
.ui-tool-note--warn i{color:var(--color-warning)}
.ui-tool-note--danger{background:var(--color-danger-subtle);border-color:var(--color-danger-border)}
.ui-tool-note--danger i{color:var(--color-danger)}

/* ── بطاقة إعدادات الأداة (.tool-settings — in-flow <details>, mobile-first) ──
   مشتركة بين standaloneToolShell (أدوات تولزاتي) وdashboardShell (أدوات روابطي
   /tools/*) — تعيش هنا في app.css كي تصل لكل الشلات. renderToolSettings يعيد
   تسمية غلاف الدرج الوارد في جسد الأدوات إلى tool-settings__body/__footer —
   القواعد أدناه تحمل التخطيط كاملاً ولا ترث شيئاً من filter-drawer. */
.tool-settings{background:var(--surface,var(--color-surface,#fff));border:1px solid var(--border,var(--color-border,#e2e8f0));border-radius:14px;overflow:hidden}
.tool-settings__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px;cursor:pointer;list-style:none;font-weight:700;font-size:var(--text-sm,14px);color:var(--text,var(--color-text,#0f172a));user-select:none}
.tool-settings__head::-webkit-details-marker{display:none}
.tool-settings__title{display:flex;align-items:center;gap:8px}
.tool-settings__title i{color:var(--primary,var(--color-primary,#1F75FE));font-size:18px}
.tool-settings__chevron{transition:transform .2s ease;color:var(--text3,var(--color-text-muted,#94a3b8));font-size:18px}
.tool-settings[open] .tool-settings__chevron{transform:rotate(180deg)}
.tool-settings__content{padding:0 16px 16px;border-top:1px solid var(--border,var(--color-border,#e2e8f0))}
.tool-settings .tool-settings__body{padding:16px 0 0;min-width:0}
.tool-settings .tool-settings__body>*{min-width:0;max-width:100%;box-sizing:border-box}
.tool-settings .tool-settings__footer{display:flex;align-items:center;gap:8px;margin-top:12px;padding:12px 0 0;border-top:1px solid var(--border,var(--color-border,#e2e8f0));box-sizing:border-box}
.tool-settings .tool-settings__footer>*{flex:1 1 auto;height:auto;min-height:38px;display:inline-flex;align-items:center;justify-content:center;text-align:center;margin:0;font-size:var(--text-sm,14px);font-weight:500;white-space:nowrap;box-sizing:border-box}
/* شبكة حقول متجاوبة — عمود واحد على الهاتف، يتوسع تلقائياً على الشاشات الأوسع */
.tool-settings .ui-tool-drawer{display:grid;grid-template-columns:1fr;gap:var(--space-3,12px);align-items:start}
@media(min-width:641px){.tool-settings .ui-tool-drawer{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.tool-settings .ui-tool-drawer{grid-template-columns:repeat(3,1fr)}}
.tool-settings .ui-tool-drawer .ui-tool-note{grid-column:1/-1}
@media print{.tool-settings{display:none!important}}

/* Actions (toolbar / inline rows) */
.ui-tool-actions{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}
.ui-tool-actions--end{justify-content:flex-end}
.ui-tool-actions--between{justify-content:space-between}
.ui-tool-actions--center{justify-content:center}
.ui-tool-actions--stack{flex-direction:column;align-items:stretch}
.ui-tool-actions>.primary-button,.ui-tool-actions>.button-secondary,.ui-tool-actions>.button-danger{margin:0}
.ui-tool-btn-block{width:100%;justify-content:center}
.primary-button.ui-tool-btn--success{background:var(--color-success);border-color:var(--color-success);color:#fff}
.primary-button.ui-tool-btn--success:hover{background:var(--color-success-hover);border-color:var(--color-success-hover)}

/* Stats / KPI */
.ui-tool-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--space-3);width:100%}
.ui-tool-stat{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);display:flex;flex-direction:column;gap:2px;min-width:0}
.ui-tool-stat__label{font-size:var(--text-xs);color:var(--color-text-muted)}
.ui-tool-stat__value{font-size:var(--text-xl);font-weight:800;color:var(--color-text);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis}
.ui-tool-stat--primary .ui-tool-stat__value{color:var(--color-primary)}
.ui-tool-stat--success .ui-tool-stat__value{color:var(--color-success)}
.ui-tool-stat--danger .ui-tool-stat__value{color:var(--color-danger)}

/* Preview / canvas areas */
.ui-tool-preview{flex:1 1 auto;min-height:320px;display:flex;align-items:center;justify-content:center;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:auto;position:relative;width:100%}
.ui-tool-preview--checker{background-color:var(--color-surface-2);background-image:linear-gradient(45deg,var(--color-border) 25%,transparent 25%),linear-gradient(-45deg,var(--color-border) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-border) 75%),linear-gradient(-45deg,transparent 75%,var(--color-border) 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}
.ui-tool-preview canvas,.ui-tool-preview img,.ui-tool-preview iframe{max-width:100%;max-height:100%;display:block}
.ui-tool-preview--paper canvas,.ui-tool-preview--paper img{box-shadow:var(--shadow-lg);background:#fff}
.ui-tool-preview__overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--color-surface) 70%,transparent);color:var(--color-text-subtle);font-size:var(--text-sm);gap:var(--space-2);z-index:2}

/* Progress */
.ui-tool-progress{width:100%;height:6px;background:var(--color-border);border-radius:var(--radius);overflow:hidden}
.ui-tool-progress__fill{height:100%;width:0;background:var(--color-primary);transition:width .2s}

/* Lists (rows) */
.ui-tool-list{display:flex;flex-direction:column;gap:var(--space-2);width:100%;margin:0;padding:0;list-style:none}
.ui-tool-row{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);min-width:0}
.ui-tool-row__icon{width:40px;height:40px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background:var(--color-primary-subtle);color:var(--color-primary);border-radius:var(--radius-sm);font-size:var(--text-xl)}
.ui-tool-row__body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.ui-tool-row__title{font-size:var(--text-sm);font-weight:700;color:var(--color-text);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-tool-row__meta{font-size:var(--text-xs);color:var(--color-text-muted);margin:0}
.ui-tool-row__end{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0}
.ui-tool-row--draggable{cursor:grab}
.ui-tool-row--dragging{opacity:.5}
.ui-tool-row--danger{border-color:var(--color-danger-border);background:var(--color-danger-subtle)}
.ui-tool-row--warn{border-color:var(--color-warning-border);background:var(--color-warning-subtle)}
.ui-tool-row--success{border-color:var(--color-success-border);background:var(--color-success-subtle)}

/* Sections داخل المحتوى */
.ui-tool-section{display:flex;flex-direction:column;gap:var(--space-3);width:100%}
.ui-tool-section__title{margin:0;font-size:var(--text-base);font-weight:700;color:var(--color-text);display:flex;align-items:center;gap:var(--space-2)}
.ui-tool-section__title i{color:var(--color-primary)}
.ui-tool-inline{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}
.ui-tool-divider{border:0;border-top:1px solid var(--color-border);margin:var(--space-2) 0;width:100%}

/* Chips / tabs-like segmented (اختيار قيمة، ليس تبويبات صفحات) */
.ui-tool-chips{display:flex;gap:var(--space-2);flex-wrap:wrap}
.ui-tool-chip{display:inline-flex;align-items:center;gap:var(--space-1);padding:0 var(--space-3);height:32px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text-subtle);font-size:var(--text-xs);font-weight:600;cursor:pointer;transition:.15s}
.ui-tool-chip:hover{border-color:var(--color-primary);color:var(--color-primary)}
.ui-tool-chip--active,.ui-tool-chip[aria-pressed="true"]{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-text-on-primary)}

/* Result / output box */
.ui-tool-output{width:100%;padding:var(--space-4);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);display:flex;flex-direction:column;gap:var(--space-3)}
.ui-tool-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--text-xs);background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--space-3);overflow:auto;white-space:pre-wrap;word-break:break-all;color:var(--color-text);margin:0;direction:ltr;text-align:left}

/* ─── Link Analytics: chart, breakdown, geo, info rows ─── */
.ui-tool-chart{display:flex;align-items:flex-end;gap:2px;height:180px;padding:var(--space-4) 0;overflow-x:auto;border-bottom:1px solid var(--color-border)}
.ui-tool-chart__bar{flex:1 0 24px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:24px;position:relative}
.ui-tool-chart__bar-fill{width:100%;background:var(--color-primary);border-radius:var(--radius-xs) var(--radius-xs) 0 0;min-height:2px;transition:height .3s ease;opacity:.85}
.ui-tool-chart__bar-fill:hover{opacity:1}
.ui-tool-chart__bar-label{font-size:9px;color:var(--color-text-secondary);margin-top:2px;white-space:nowrap}
.ui-tool-breakdown__row{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-2)}
.ui-tool-breakdown__label{flex:0 0 100px;font-size:var(--text-xs);color:var(--color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-tool-breakdown__bar{flex:1;height:8px;background:var(--color-surface-2);border-radius:var(--radius);overflow:hidden}
.ui-tool-breakdown__fill{height:100%;background:var(--color-primary);border-radius:var(--radius);transition:width .3s ease}
.ui-tool-breakdown__count{flex:0 0 40px;font-size:var(--text-xs);font-weight:700;color:var(--color-text);text-align:start}
.ui-tool-geo__row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-2) 0;border-bottom:1px solid var(--color-border)}
.ui-tool-geo__row:last-child{border-bottom:0}
.ui-tool-geo__info{display:flex;flex-direction:column;gap:2px}
.ui-tool-geo__location{font-size:var(--text-sm);font-weight:600;color:var(--color-text)}
.ui-tool-geo__meta{font-size:var(--text-xs);color:var(--color-text-secondary)}
.ui-tool-info-row{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) 0;border-bottom:1px solid var(--color-border)}
.ui-tool-info-row:last-child{border-bottom:0}
.ui-tool-info-row__label{flex:0 0 120px;font-size:var(--text-xs);color:var(--color-text-secondary);font-weight:600}
.ui-tool-info-row__value{flex:1;font-size:var(--text-sm);color:var(--color-text);display:flex;align-items:center;gap:var(--space-2)}
.ui-tool-link-truncate{color:var(--color-primary);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.ui-tool-link-truncate:hover{text-decoration:underline}
.ui-tool-qr-preview{display:flex;justify-content:center;align-items:center;padding:var(--space-4);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);margin-bottom:var(--space-3)}
.ui-tool-qr-preview svg{max-width:200px;max-height:200px;width:auto;height:auto}
.ui-tool-empty{padding:var(--space-6);text-align:center;color:var(--color-text-secondary);font-size:var(--text-sm)}
.ui-tool-empty i{font-size:var(--text-4xl);color:var(--color-border-strong);margin-bottom:var(--space-3)}
.ui-tool-empty h3{font-size:var(--text-lg);font-weight:700;color:var(--color-text-subtle);margin:0 0 var(--space-1)}
.ui-tool-empty p{font-size:var(--text-sm);color:var(--color-text-muted);margin:0}

/* ─── Tools: tabs, pagination, form, cost, cache, doc-link, drawer-section ─── */
.ui-tool-tabs{display:flex;gap:var(--space-1);border-bottom:1px solid var(--color-border);margin-bottom:var(--space-3)}
.ui-tool-tab{padding:var(--space-2) var(--space-4);border:none;background:transparent;color:var(--color-text-subtle);font-weight:600;font-size:var(--text-sm);cursor:pointer;border-bottom:2px solid transparent;transition:color .15s,border-color .15s;font-family:inherit;display:inline-flex;align-items:center;gap:var(--space-1)}
.ui-tool-tab:hover{color:var(--color-primary)}
.ui-tool-tab.active{color:var(--color-primary);border-bottom-color:var(--color-primary)}
.ui-tool-pagination{display:flex;align-items:center;justify-content:center;gap:var(--space-3);padding:var(--space-3) 0}
.ui-tool-doc-link{display:inline-flex;align-items:center;gap:6px;color:var(--color-primary);font-size:var(--text-sm);font-weight:600;text-decoration:none}
.ui-tool-doc-link:hover{text-decoration:underline}
.ui-tool-cache-indicator{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-xs);color:var(--color-text-muted)}
.ui-tool-cache-dot{width:8px;height:8px;border-radius:50%;background:var(--color-text-muted)}
.ui-tool-cache-dot--fresh{background:var(--color-success);animation:ui-tool-pulse 2s infinite}
.ui-tool-cache-dot--stale{background:var(--color-warning)}
.ui-tool-cache-dot--old{background:var(--color-danger)}
.ui-tool-cache-dot--sync{background:var(--color-primary);animation:ui-tool-pulse 1s infinite}
@keyframes ui-tool-pulse{0%,100%{opacity:1}50%{opacity:.4}}
.ui-tool-progress__info{display:flex;justify-content:space-between;font-size:var(--text-xs);color:var(--color-text-subtle);margin-bottom:var(--space-1)}
.ui-tool-progress__bar{height:6px;background:var(--color-surface-2);border-radius:var(--radius);overflow:hidden}
.ui-tool-progress__fill{height:100%;background:var(--color-primary);border-radius:var(--radius);transition:width .3s ease}
.ui-tool-drawer-section{display:flex;flex-direction:column;gap:var(--space-3)}
.ui-tool-draft-layout{display:grid;grid-template-columns:minmax(320px,1fr) minmax(0,2fr);gap:var(--space-4);align-items:start}
@media(max-width:1023px){.ui-tool-draft-layout{grid-template-columns:1fr}}
.ui-tool-draft-form{display:flex;flex-direction:column;gap:var(--space-3)}
.ui-tool-form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
@media(max-width:640px){.ui-tool-form-row{grid-template-columns:1fr}}
.ui-tool-form-group{display:flex;flex-direction:column;gap:4px}
.ui-tool-form-group label{font-size:var(--text-sm);font-weight:600;color:var(--color-text)}
.ui-tool-form-group .form-control{width:100%}
.ui-tool-cost-summary{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--space-3);display:flex;flex-direction:column;gap:var(--space-1)}
.ui-tool-cost-row{display:flex;justify-content:space-between;align-items:center;font-size:var(--text-sm)}
.ui-tool-cost-row--total{font-weight:800;font-size:var(--text-base);border-top:1px solid var(--color-border);padding-top:var(--space-2);margin-top:var(--space-1)}
.ui-tool-cost-row--total .ui-tool-cost-value{color:var(--color-success)}

/* ─── Short Links: edit popover, toggle button ─── */
.sl-edit-popover{position:relative;display:inline-block}
.sl-edit-popover__body{position:absolute;top:100%;left:0;z-index:100;min-width:320px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-4);box-shadow:var(--shadow-lg);margin-top:4px}
.sl-edit-popover[open] .sl-edit-popover__body{display:block}
.sl-edit-popover:not([open]) .sl-edit-popover__body{display:none}
.sl-edit-popover summary{list-style:none;cursor:pointer}
.sl-edit-popover summary::-webkit-details-marker{display:none}

@media(max-width:768px){
  .ui-tool-workspace{min-height:auto;gap:var(--space-3)}
  .ui-tool-dropzone{padding:var(--space-8) var(--space-4)}
  .ui-tool-dropzone__title{font-size:var(--text-xl)}
  .ui-tool-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--space-3)}
  .ui-tool-preview{min-height:220px}
  .ui-tool-actions>.primary-button,.ui-tool-actions>.button-secondary,.ui-tool-actions>.button-danger{flex:1 1 auto;justify-content:center}
  .ui-tool-info-row{flex-direction:column;align-items:flex-start;gap:var(--space-1)}
  .ui-tool-info-row__label{flex:none}
  .ui-tool-breakdown__label{flex:0 0 70px}
  .ui-tool-geo__row{flex-direction:column;align-items:flex-start;gap:var(--space-2)}
}

/* ─── Booking System (الحجوزات والمواعيد) ─── */
.ui-stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--space-3);margin-bottom:var(--space-4)}
.ui-stat-card{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md)}
.ui-stat-card i{font-size:1.5rem;opacity:0.8}
.ui-stat-card .ui-stat-value{font-size:var(--text-xl);font-weight:800;line-height:1}
.ui-stat-card .ui-stat-label{font-size:var(--text-xs);color:var(--color-text-secondary);margin-top:2px}
.ui-stat--info{border-inline-start:3px solid #0ea5e9}.ui-stat--info i{color:#0ea5e9}
.ui-stat--success{border-inline-start:3px solid #22c55e}.ui-stat--success i{color:#22c55e}
.ui-stat--warning{border-inline-start:3px solid #f59e0b}.ui-stat--warning i{color:#f59e0b}
.ui-stat--danger{border-inline-start:3px solid #ef4444}.ui-stat--danger i{color:#ef4444}
.ui-form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--space-3);margin-bottom:var(--space-4)}
.ui-form-field{display:flex;flex-direction:column;gap:var(--space-1)}
.ui-form-label{font-size:var(--text-sm);font-weight:600;color:var(--color-text-secondary)}
.ui-input{padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-family:inherit;font-size:var(--text-sm);background:var(--color-surface);color:var(--color-text)}
.ui-input:focus{outline:none;border-color:var(--color-primary)}
.ui-input-group{display:flex;align-items:stretch}
.ui-input-prefix{padding:var(--space-2) var(--space-3);background:var(--color-bg);border:1px solid var(--color-border);border-inline-end:none;border-radius:var(--radius-sm) 0 0 var(--radius-sm);font-size:var(--text-sm);color:var(--color-text-secondary);display:flex;align-items:center}
.ui-input-group .ui-input{border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.ui-input--time{max-width:100px}
.ui-toggle{position:relative;display:inline-block;width:44px;height:24px;cursor:pointer}
.ui-toggle input{opacity:0;width:0;height:0}
.ui-toggle-slider{position:absolute;inset:0;background:var(--color-border);border-radius:12px;transition:0.2s}
.ui-toggle-slider::before{content:"";position:absolute;height:18px;width:18px;inset-inline-start:3px;top:3px;background:#fff;border-radius:50%;transition:0.2s}
.ui-toggle input:checked+.ui-toggle-slider{background:var(--color-primary)}
.ui-toggle input:checked+.ui-toggle-slider::before{transform:translateX(20px)}
.ui-dialog{border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-5);max-width:500px;width:90%;background:var(--color-surface);box-shadow:var(--shadow-lg)}
.ui-dialog::backdrop{background:rgba(0,0,0,0.5)}
.ui-dialog-title{font-size:var(--text-lg);font-weight:700;margin-bottom:var(--space-3)}
.ui-dialog-actions{display:flex;gap:var(--space-2);justify-content:flex-end;margin-top:var(--space-4)}
.ui-table--compact{font-size:var(--text-xs)}
.ui-table--compact td,.ui-table--compact th{padding:var(--space-1) var(--space-2)}
.ui-filter-bar{display:flex;gap:var(--space-2);flex-wrap:wrap;align-items:flex-end}
.ui-filter-bar .ui-input{max-width:180px}
.ui-form-inline{display:flex;gap:var(--space-2);flex-wrap:wrap;align-items:flex-end;margin-bottom:var(--space-3)}
.ui-avail-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-3)}
.ui-avail-day{padding:var(--space-3);background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-sm)}
.ui-avail-day-header{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-2);cursor:pointer}
.ui-avail-day-header strong{font-size:var(--text-sm)}
.ui-avail-ranges{display:flex;flex-direction:column;gap:var(--space-1);margin-bottom:var(--space-2)}
.ui-time-range{display:flex;align-items:center;gap:var(--space-1)}
.ui-time-range .ui-input--time{max-width:90px}
.btn-sm{padding:var(--space-1) var(--space-2);font-size:var(--text-xs);min-height:auto}
.badge{display:inline-block;padding:2px 8px;border-radius:var(--radius-sm);font-size:var(--text-xs);font-weight:600}
.badge--success{background:rgba(34,197,94,0.15);color:#16a34a}
.badge--warning{background:rgba(245,158,11,0.15);color:#d97706}
.badge--danger{background:rgba(239,68,68,0.15);color:#dc2626}
.badge--info{background:rgba(14,165,233,0.15);color:#0284c7}
.badge--neutral{background:var(--color-bg);color:var(--color-text-secondary)}
.ui-table-actions{white-space:nowrap;text-align:end}
.ui-tool-muted{color:var(--color-text-secondary);font-size:var(--text-xs)}
@media(max-width:768px){
  .ui-stat-grid{grid-template-columns:repeat(2,1fr)}
  .ui-form-grid{grid-template-columns:1fr}
  .ui-avail-grid{grid-template-columns:1fr}
  .ui-filter-bar{flex-direction:column}
  .ui-filter-bar .ui-input{max-width:100%}
}

/* ─── Tools Hub Grid (صفحة /tools — شبكة بطاقات الأدوات) ─── */
/* أقسام الفهرس المصنفة (toolsati /tools) — عناوين أقسام واضحة بهوامش متّسقة */
.tools-index__section{margin-bottom:3rem}
.tools-index__section:last-child{margin-bottom:0}
.tools-index__cat-title{display:flex;align-items:center;gap:12px;font-size:1.3rem;font-weight:800;margin:0 0 20px;padding-bottom:14px;border-bottom:1px solid var(--border,var(--color-border,#e2e8f0));color:var(--text,var(--color-text,#0f172a))}
.tools-index__cat-title i{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex:none;border-radius:12px;background:var(--primary-ghost,rgba(31,117,254,.1));color:var(--primary,var(--color-primary,#1F75FE));font-size:20px}
.tools-index__cat-count{margin-inline-start:auto;font-size:.78rem;font-weight:600;line-height:1.6;color:var(--text3,var(--color-text-muted,#94a3b8));background:var(--surface2,var(--color-surface-2,#f1f5f9));padding:2px 12px;border-radius:var(--radius-full,999px)}
@media(max-width:640px){.tools-index__section{margin-bottom:2.25rem}.tools-index__cat-title{font-size:1.12rem;gap:10px;margin-bottom:16px;padding-bottom:12px}.tools-index__cat-title i{width:34px;height:34px;font-size:17px}}
.tools-hub__intro{text-align:center;margin-bottom:2.5rem}
.tools-hub__title{font-size:1.75rem;font-weight:800;margin:0 0 0.5rem}
.tools-hub__subtitle{font-size:1rem;color:var(--text2);max-width:700px;margin:0 auto}
.tools-hub__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;padding:8px 0}
.tools-hub__card{display:flex;flex-direction:column;text-decoration:none;color:inherit;padding:24px;border:1px solid var(--border,var(--color-border,#e2e8f0));border-radius:var(--radius-lg,16px);background:var(--surface,var(--color-surface,#fff));transition:all .2s ease;cursor:pointer}
.tools-hub__card:hover{border-color:var(--primary,var(--color-primary,#1F75FE));box-shadow:0 8px 24px rgba(31,117,254,.08);transform:translateY(-2px)}
.tools-hub__card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.tools-hub__card-icon{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:var(--radius-md,12px);background:var(--primary-ghost,rgba(31,117,254,.08));color:var(--primary,var(--color-primary,#1F75FE));font-size:24px;flex-shrink:0}
.tools-hub__card-badge{font-size:11px;font-weight:600;color:var(--text3,var(--color-text-muted,#94a3b8));padding:4px 10px;border-radius:var(--radius-full,999px);background:var(--surface2,var(--color-surface-2,#f1f5f9));white-space:nowrap}
.tools-hub__card-title{font-size:var(--text-lg,16px);font-weight:700;margin:0 0 8px 0;color:var(--text,var(--color-text,#0f172a))}
.tools-hub__card-desc{font-size:var(--text-sm,13px);color:var(--text2,var(--color-text-subtle,#475569));line-height:1.6;margin:0 0 16px 0;flex:1}
.tools-hub__card-cta{display:flex;align-items:center;gap:6px;color:var(--primary,var(--color-primary,#1F75FE));font-weight:600;font-size:var(--text-sm,13px)}
.tools-hub__card-cta i{font-size:18px;transition:transform .18s ease}
.tools-hub__card:hover .tools-hub__card-cta i{transform:translateX(-4px)}
@media(max-width:768px){.tools-hub__grid{grid-template-columns:1fr;gap:12px}}
}

/* ─── Dalelify (دليلفاي) — Public Directory Pages ─── */
/* صفحة الدليل + صفحة الإدراج المنفرد (الصفحة الرئيسية أصبحت مركزية عبر renderHomepage) */

/* Form controls (used by dalelify search/filters) */
.form-input{height:var(--control-h,40px);padding:0 14px;border:1px solid var(--color-border);border-radius:var(--radius-sm,8px);font-family:inherit;font-size:var(--text-sm);background:var(--color-surface);color:var(--color-text);outline:none;transition:border-color .15s,box-shadow .15s;box-sizing:border-box}
.form-input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-subtle,rgba(31,117,254,.12))}
.form-input::placeholder{color:var(--color-text-muted)}
.form-select{height:var(--control-h,40px);padding:0 28px 0 12px;border:1px solid var(--color-border);border-radius:var(--radius-sm,8px);font-family:inherit;font-size:var(--text-sm);background:var(--color-surface);color:var(--color-text);outline:none;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 10px center;box-sizing:border-box}
.form-select:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-subtle,rgba(31,117,254,.12))}

/* WhatsApp Button */
.btn-whatsapp{background:#25D366;border-color:#25D366;color:#fff}
.btn-whatsapp:hover:not(:disabled){background:#1eb858;border-color:#1eb858;color:#fff}

/* Listing Grid (used in directory page) */
.dalelify-listing-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}

/* Listing Card */
.dalelify-card{display:flex;flex-direction:column;border:1px solid var(--color-border);border-radius:var(--radius-md,12px);background:var(--color-surface);overflow:hidden;transition:all .2s ease}
.dalelify-card:hover{border-color:var(--color-primary);box-shadow:0 8px 24px rgba(0,0,0,.08);transform:translateY(-2px)}
.dalelify-card-avatar{width:100%;height:180px;object-fit:cover;background:var(--color-surface-2,var(--color-bg));display:block}
.dalelify-card-body{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1}
.dalelify-card-body h3{font-size:var(--text-base);font-weight:700;margin:0;line-height:1.3}
.dalelify-card-body h3 a{color:var(--color-text);text-decoration:none}
.dalelify-card-body h3 a:hover{color:var(--color-primary)}
.dalelify-card-meta{font-size:var(--text-xs);color:var(--color-text-muted);margin:0}
.dalelify-card-bio{font-size:var(--text-xs);color:var(--color-text-subtle);line-height:1.6;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.dalelify-card-body .btn{align-self:flex-start;margin-top:auto}

/* Verified Badge */
.dalelify-verified{display:inline-flex;align-items:center;gap:2px;font-size:var(--text-xs);font-weight:600;color:#1d9bf0;background:rgba(29,155,240,.12);padding:2px 8px;border-radius:var(--radius-full,999px);vertical-align:middle}

/* Directory Page */
.dalelify-directory{padding:clamp(20px,3vw,32px) clamp(16px,4vw,48px)}
.dalelify-directory h1{font-size:var(--text-2xl);font-weight:800;color:var(--color-text);margin:0 0 24px}
.dalelify-filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:20px;padding:16px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md,12px)}
.dalelify-filters .form-input{flex:1;min-width:180px}
.dalelify-filters .form-select{min-width:130px}
.dalelify-results-count{font-size:var(--text-sm);color:var(--color-text-muted);margin:0 0 16px;font-weight:600}
.dalelify-empty{text-align:center;padding:48px 20px;color:var(--color-text-muted);font-size:var(--text-base)}

/* Profile Page (single listing) */
.dalelify-profile{padding:clamp(20px,3vw,40px) clamp(16px,4vw,48px);max-width:800px;margin:0 auto}
.dalelify-profile-header{display:flex;gap:20px;align-items:flex-start;margin-bottom:24px;flex-wrap:wrap}
.dalelify-avatar{width:120px;height:120px;border-radius:var(--radius-md,12px);object-fit:cover;border:2px solid var(--color-border);flex-shrink:0;background:var(--color-surface-2,var(--color-bg))}
.dalelify-profile-info{flex:1;min-width:200px}
.dalelify-profile-info h1{font-size:var(--text-2xl);font-weight:800;color:var(--color-text);margin:0 0 8px;line-height:1.3}
.dalelify-meta{font-size:var(--text-sm);color:var(--color-text-muted);margin:0 0 12px}
.dalelify-bio{font-size:var(--text-base);color:var(--color-text-subtle);line-height:1.8;margin:0}

/* Contact Buttons */
.dalelify-contact{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px}
.dalelify-contact .btn{min-width:140px}

/* Location Section */
.dalelify-location{padding:16px 20px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md,12px);margin-bottom:24px}
.dalelify-location h3{font-size:var(--text-sm);font-weight:700;color:var(--color-text);margin:0 0 12px}
.dalelify-location p{font-size:var(--text-sm);color:var(--color-text-subtle);margin:0 0 12px}
.dalelify-location .btn{margin-inline-end:8px}

/* Socials */
.dalelify-socials{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px;padding:16px 20px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md,12px)}
.dalelify-socials a{display:inline-flex;align-items:center;padding:8px 16px;border:1px solid var(--color-border);border-radius:var(--radius-sm,8px);font-size:var(--text-sm);font-weight:600;color:var(--color-text);text-decoration:none;transition:all .15s}
.dalelify-socials a:hover{border-color:var(--color-primary);color:var(--color-primary);background:var(--color-primary-subtle,rgba(31,117,254,.06))}

/* Stats */
.dalelify-stats{display:flex;gap:20px;flex-wrap:wrap;padding:16px 20px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md,12px)}
.dalelify-stat{font-size:var(--text-sm);color:var(--color-text-muted);font-weight:600}

/* QR Dialog */
.qr-dialog{border:none;border-radius:var(--radius-lg,16px);padding:0;max-width:320px;width:90%;background:var(--color-surface);box-shadow:var(--shadow-lg,0 20px 40px rgba(0,0,0,.15))}
.qr-dialog::backdrop{background:rgba(0,0,0,.5)}
.qr-dialog-content{display:flex;flex-direction:column;align-items:center;gap:16px;padding:32px 24px;text-align:center}
.qr-dialog-content img{border-radius:var(--radius-md,12px);border:1px solid var(--color-border)}
.qr-dialog-content p{font-size:var(--text-sm);color:var(--color-text-muted);margin:0}

/* Mobile adjustments */
@media(max-width:640px){
  .dalelify-profile-header{flex-direction:column;align-items:center;text-align:center}
  .dalelify-avatar{width:100px;height:100px}
  .dalelify-contact{flex-direction:column}
  .dalelify-contact .btn{width:100%}
  .dalelify-listing-grid{grid-template-columns:1fr}
  .dalelify-filters{flex-direction:column;align-items:stretch}
  .dalelify-filters .form-input,.dalelify-filters .form-select,.dalelify-filters .btn{width:100%}
}

/* ─── Icon Picker Field (منتقي الأيقونات المركزي) ─────────────────────────── */
/* المودال نفسه يحقن أنماطه من app-icon-picker.js حتى يبقى مستقلاً. */
.icon-picker-field{display:flex;gap:8px;align-items:center}
.icon-picker-field__preview{width:40px;height:40px;border:1px solid var(--color-border);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--color-primary);background:var(--color-bg);flex-shrink:0;overflow:hidden}
.icon-picker-field__preview i{font-size:20px}
.icon-picker-field__input{flex:1;min-width:0;direction:ltr;text-align:left}
.icon-picker-field__input[readonly]{cursor:pointer}
.icon-picker-field__btn,.icon-picker-field__clear{flex-shrink:0;display:inline-flex;align-items:center;gap:4px}
.icon-picker-field--compact .icon-picker-field__preview{width:32px;height:32px;font-size:16px}
.icon-picker-field--compact .icon-picker-field__preview i{font-size:16px}
.icon-picker-field--compact .icon-picker-field__btn span{display:none}


/* ─── Tenant catalog admin (app-admin-catalog.js) ────────────────────────────
   styles المُصدَّرة من storefront-catalog.view.js (صفحات /app/items + محرر
   الهومبيج + الهوية البصرية). المُنشِئات تستخدم كلاسات بدل cssText. */

/* Item-form builders (variants / tiers / specs / features / faq) */
#ui-variant-builder,#ui-tier-builder,#ui-spec-builder,#ui-features-builder,#ui-faq-builder{border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px;background:var(--surface)}
#ui-variant-groups,#ui-faq-list{display:flex;flex-direction:column;gap:10px}
#ui-tier-list,#ui-spec-list,#ui-features-list{display:flex;flex-direction:column;gap:8px}
#ui-variant-builder .ui-variant-row,#ui-faq-list .ui-faq-row{border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px;background:var(--surface)}
#ui-variant-builder .ui-variant-row__head{display:flex;gap:8px;align-items:center;margin-bottom:8px}
#ui-variant-builder .ui-variant-opts-container{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
#ui-variant-builder .ui-variant-opt-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);font-size:var(--text-sm)}
#ui-variant-builder .ui-variant-opt-input{border:none;background:transparent;outline:none;width:80px;min-width:60px;font-size:var(--text-sm)}
#ui-variant-builder .ui-variant-remove-opt{border:none;background:none;color:var(--danger);cursor:pointer;padding:0;font-size:16px;line-height:1}
#ui-tier-list .ui-tier-row,#ui-spec-list .ui-spec-row,#ui-features-list .ui-feature-row{display:flex;gap:8px;align-items:center}
.ui-builder-grow{flex:1;min-width:100px}
.ui-builder-noshrink{flex-shrink:0}
.ui-builder-add{margin-top:10px}
.ui-builder-label{font-size:var(--text-xs);color:var(--text2);min-width:40px}
.ui-builder-label--qty{min-width:60px}
.ui-builder-w-qty{width:90px}
.ui-builder-w-price{width:110px}
.ui-builder-mb{margin-bottom:6px}
.ui-builder-mt{margin-top:6px}
.hint--block{display:block;margin-bottom:8px}
.form-field[hidden],.field[hidden]{display:none}
.form-grid-fit{display:grid;gap:12px}
.form-grid-fit--lg{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.form-grid-fit--sm{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
.form-grid-location{display:grid;grid-template-columns:1fr 120px 120px;gap:8px}
.form-field--flush{margin:0}
.field-row-inline{display:flex;gap:8px}
.field-row-inline input{flex:1}
.field-row-inline i{margin-inline-end:4px}
.form-hint--spaced{margin-top:6px;display:block}

/* Item import — CSV/JSON tabs + preview */
.import-tabs{display:flex;gap:8px;margin-bottom:16px;border-bottom:2px solid var(--border)}
.import-tab-btn{padding:10px 18px;border:none;background:none;cursor:pointer;font-weight:600;color:var(--text2);border-bottom:2px solid transparent;margin-bottom:-2px;font-family:inherit;font-size:var(--text-sm)}
.import-tab-btn.is-active{color:var(--primary);border-bottom-color:var(--primary)}
.import-panel__actions{display:flex;justify-content:flex-end;margin-bottom:8px;gap:8px;flex-wrap:wrap}
.import-file-input{padding:8px}
.import-preview{margin-top:12px}
.import-preview__more{color:var(--text2);font-size:var(--text-xs);margin-top:4px}

/* Featured items picker (homepage editor) */
.ui-featured-picker__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;font-size:13px;color:var(--color-text-subtle)}
.ui-featured-picker__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.ui-featured-item{position:relative;display:flex;align-items:center;gap:10px;padding:8px;border:2px solid var(--color-border);background:var(--color-surface);cursor:pointer;transition:all 0.15s;overflow:hidden}
.ui-featured-item:hover{border-color:var(--color-primary)}
.ui-featured-item.is-selected{border-color:var(--color-primary);background:color-mix(in srgb,var(--color-primary) 5%,transparent)}
.ui-featured-item input{position:absolute;opacity:0;width:0;height:0}
.ui-featured-item__img{width:48px;height:48px;flex-shrink:0;background-image:var(--ui-bg-img,none);background-size:cover;background-position:center;background-color:var(--color-surface-2)}
.ui-featured-item__img--placeholder{display:flex;align-items:center;justify-content:center}
.ui-featured-item__img--placeholder i{font-size:1.5rem;color:var(--color-text-muted);opacity:0.4}
.ui-featured-item__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ui-featured-item__name{font-size:13px;font-weight:600;color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui-featured-item__price{font-size:11px;color:var(--color-primary);font-weight:700}
.ui-featured-item__check{position:absolute;top:6px;inset-inline-end:6px;width:22px;height:22px;background:var(--color-primary);color:#fff;display:none;align-items:center;justify-content:center;font-size:14px}
.ui-featured-item.is-selected .ui-featured-item__check{display:flex}

/* Homepage editor panels + shared form primitives */
.ui-editor-panel{display:grid;gap:var(--space-4)}
.ui-editor-panel[hidden]{display:none}
.c-panel__head strong{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);font-weight:600;color:var(--color-text)}
.c-panel__head strong i{font-size:18px;color:var(--color-primary)}
.c-panel__head-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.field-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.check-list{display:flex;flex-direction:column;gap:var(--space-2)}
.check-item{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--color-border);background:var(--color-surface);cursor:pointer;font-size:var(--text-sm);font-weight:500;color:var(--color-text);transition:border-color 0.15s,background 0.15s}
.check-item:hover{border-color:var(--color-primary);background:var(--color-primary-subtle,rgba(31,117,254,0.04))}
.check-item input{width:18px;height:18px;accent-color:var(--color-primary);cursor:pointer;flex-shrink:0}
.check-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.check-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.hint{font-size:var(--text-xs);color:var(--color-text-subtle);margin:0;line-height:1.6}
@media(max-width:640px){
  .field-grid-2{grid-template-columns:1fr}
  .c-panel__form-body{padding:16px}
  .c-panel__head{padding:14px 16px}
}

/* Branding — inherited badge داخل حقل اللون + المعاينة الحية */
.color-field .branding-badge{position:absolute;inset-inline-end:6px;bottom:6px}
.live-preview-panel__title{margin:0 0 12px;color:var(--text);font-weight:600;font-size:var(--text-sm)}
.section-header--row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.section-header__subtitle{font-size:var(--text-sm)}
.field--row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.field--row-label{display:flex;align-items:center;gap:8px}
.field--row-label i{color:var(--primary)}
.onboarding-card--spaced{margin-bottom:20px}
.onboarding-card__tip{margin:0;color:var(--text3);font-size:var(--text-sm)}
.onboarding-card__steps--tight{gap:6px}
.onboarding-step--static{cursor:default;pointer-events:none}
.badge--subtle{font-size:10px;margin-inline-end:6px;background:var(--surface2);color:var(--text2)}
.link-strong{font-weight:700;text-decoration:underline;color:inherit}
.primary-button--start{display:inline-flex;align-items:center;gap:8px;align-self:flex-start}
.media-preview__img--logo{max-height:80px;object-fit:contain}
.media-preview__img--favicon{max-width:48px;max-height:48px;object-fit:contain}
.branding-preview{border:1px solid var(--pv-border);border-radius:6px;overflow:hidden;display:flex;flex-direction:column;background:var(--pv-bg);color:var(--pv-text)}
.branding-preview__topbar{height:48px;border-bottom:1px solid var(--pv-border);display:flex;align-items:center;padding:0 16px;justify-content:space-between;background:var(--pv-header);transition:.2s}
.branding-preview__logo{color:var(--pv-text);font-size:13px}
.branding-preview__logo img{height:24px;max-width:100px;object-fit:contain}
.branding-preview__nav{display:flex;gap:8px}
.branding-preview__nav-item{padding:4px 12px;color:var(--pv-text2);font-size:11px}
.branding-preview__nav-item--active{background:var(--pv-primary);color:#fff;border-radius:4px;font-weight:600}
.branding-preview__layout{display:flex;flex:1;min-height:240px}
.branding-preview__sidebar{width:120px;border-inline-end:1px solid var(--pv-border);padding:12px;display:flex;flex-direction:column;gap:6px;font-size:11px;background:var(--pv-sidebar);transition:.2s}
.branding-preview__side-item{height:24px;border-radius:4px;display:flex;align-items:center;padding:0 8px;color:var(--pv-sidebar-text);transition:.2s}
.branding-preview__side-item--active{font-weight:600;color:var(--pv-primary);background:color-mix(in srgb,var(--pv-primary) 10%,transparent)}
.branding-preview__main{flex:1;padding:16px;font-size:11px;background:var(--pv-bg);transition:.2s}
.branding-preview__title{margin:0 0 10px;font-size:13px;font-weight:600;color:var(--pv-text)}
.branding-preview__card{border:1px solid var(--pv-border);border-radius:6px;padding:10px;margin-bottom:12px;background:var(--pv-surface);transition:.2s}
.branding-preview__card-title{margin:0 0 4px;font-size:11px;font-weight:600;color:var(--pv-text)}
.branding-preview__card-text{margin:0;font-size:10px;line-height:1.4;color:var(--pv-text2)}
.branding-preview__btn{border:none;border-radius:4px;padding:0 12px;height:28px;font-weight:600;cursor:pointer;font-size:10px;background:var(--pv-action);color:#fff;font-family:inherit}


body.drawer-open{overflow:hidden}
body.dialog-open{overflow:hidden}

[data-drawer-backdrop]{display:block;visibility:hidden;pointer-events:none;position:fixed;inset:0;z-index:9990;background:rgba(0,0,0,0.45);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;transition:opacity 0.25s ease,visibility 0.25s ease;will-change:opacity;touch-action:manipulation}
[data-drawer-backdrop].is-active{visibility:visible;pointer-events:auto;opacity:1}

[data-drawer]:not(.ui-filter-drawer):not(.landing-mobile-menu):not(.content-aside){transition:transform 0.28s cubic-bezier(0.16,1,0.3,1),visibility 0.28s ease;padding-top:env(safe-area-inset-top,0);padding-bottom:env(safe-area-inset-bottom,0);will-change:transform;touch-action:manipulation}
[dir="rtl"] [data-drawer]:not(.ui-filter-drawer):not(.landing-mobile-menu):not(.content-aside):not(.is-open){transform:translateX(100%);visibility:hidden;pointer-events:none}
[dir="ltr"] [data-drawer]:not(.ui-filter-drawer):not(.landing-mobile-menu):not(.content-aside):not(.is-open){transform:translateX(-100%);visibility:hidden;pointer-events:none}
[data-drawer]:not(.ui-filter-drawer):not(.landing-mobile-menu):not(.content-aside).is-open{transform:translateX(0);visibility:visible;pointer-events:auto}

@media(min-width:1024px){
  [data-drawer-backdrop]{display:none!important}
}

/* ─── INBOX-006: مرفقات رسائل التذاكر ── */
.ticket-message__attachments{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.ticket-attachment{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface-muted,var(--surface));font-size:.82rem;color:var(--text);text-decoration:none;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ticket-attachment:hover{border-color:var(--primary)}
.ticket-attachment--image{padding:0;border-radius:var(--radius-md);overflow:hidden}
.ticket-attachment__img{display:block;max-width:180px;max-height:120px;object-fit:cover}

/* ═══ النظام المتجاوب الموحّد v2 — إتاحة + PWA + طباعة ═══════════════════
   docs/PLAN-responsive-ui.md مراحل 5/7/8/9 — بلوك أخير يملك:
   حلقة focus موحّدة، kill-switch عالمي للحركة، وضع PWA المثبّت،
   وطباعة مركزية لكل لوحات التحكم. */

/* حلقة تركيز موحّدة — لون البراند بإزاحة 2px (القواعد المكوّنية الأدق تكسب
   لأنها أعلى تخصيصاً؛ هذه شبكة أمان لأي عنصر بلا قاعدة خاصة) */
:focus-visible{outline:2px solid var(--primary,var(--color-primary,#1F75FE));outline-offset:2px}
/* أهداف القفز داخل المحتوى لا تختبئ تحت التوبار الثابت */
.content [id]{scroll-margin-top:calc(var(--topbar-h,64px) + 12px)}

/* kill-switch عالمي — prefers-reduced-motion يجمّد كل الأنيميشن/الترانزيشن
   (القواعد المكوّنية القليلة التي تُبقي transition مثل back-to-top أعلى
   تخصيصاً وتبقى تعمل) */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto!important}
}

/* وضع التطبيق المثبّت (PWA standalone) — لا دعوات تثبيت داخل التطبيق،
   ولا pull-to-refresh يلخبط السكرول */
@media(display-mode:standalone){
  [data-pwa-chooser-open],.pwa-install-modal{display:none!important}
  /* overscroll-behavior لا ينتشر من body للـviewport — لازم على html صراحة
     حتى تنقفل rubber-band أفقياً وعمودياً في PWA standalone */
  html,body{overscroll-behavior:none}
}

/* داخل لوحات التحكم «secondary» = إجراء هادئ محايد، لا لون البراند الثانوي —
   themeJson.secondaryColor مخصص لأزرار البراند في الصفحات العامة. بدون هذا القيد
   كانت أزرار الإلغاء/الفلاتر/العرض تُصبغ بألوان صارخة متفاوتة بين التطبيقات
   (أزرق #0aadff في مصاريفي مقابل رمادي هادئ #64748b في مبيعاتي) فتبدو لوحة
   «أفضل» من أختها بلا سبب تصميمي. body[data-app-kind] يغطي الشل والمودالات
   والتوست (كلها siblings تحت body). */
body[data-app-kind] :is(.button.secondary,.button-secondary,.btn-secondary,.secondary-button,.button--secondary,a.button.secondary,a.button-secondary){
  background:var(--surface2,var(--color-surface-2,#f8fafc))!important;
  color:var(--text,var(--color-text,#1e293b))!important;
  border:1px solid var(--border,var(--color-border,#e2e8f0))!important;
  box-shadow:none!important;
}
body[data-app-kind] :is(.button.secondary,.button-secondary,.btn-secondary,.secondary-button,.button--secondary,a.button.secondary,a.button-secondary):hover:not(:disabled){
  background:var(--border,var(--color-border,#e2e8f0))!important;
  color:var(--text,var(--color-text,#1e293b))!important;
  border-color:var(--border2,var(--color-border-strong,#cbd5e1))!important;
  filter:none!important;
  box-shadow:none!important;
}

/* طباعة موحّدة لكل لوحات التحكم — تخفي الـchrome وتوسّع المحتوى.
   صفحات الطباعة المخصصة تستخدم renderPrintDocument (نظامها الخاص) —
   هذا البلوك يغطي «اطبع الصفحة الحالية» من المتصفح. */
@media print{
  .sidebar,.topbar,.filter-drawer,.filter-drawer-backdrop,.toast-root,
  .content-aside,.content-aside__backdrop,.content-aside-toggle,
  .back-to-top-btn,.mobile-nav-toggle,.topbar-filter-toggle,#modal-root,
  .pwa-install-modal,[data-pwa-chooser-open],.scopebar,.action-toolbar,.toolbar{display:none!important}
  .dashboard-shell,.shell,.admin-layout{display:block!important;min-height:auto!important}
  .main,.admin-main{margin:0!important;padding:0!important;width:100%!important;min-height:auto!important}
  .content,.admin-content{max-width:none!important;width:100%!important;padding:0 12px!important}
  .table-container,.table-wrap{overflow:visible!important;border:none!important}
  .data-table{min-width:0!important}
  .data-table thead{display:table-header-group}
  .data-table tr,.kpi-card,.panel,.form-card,.c-panel{page-break-inside:avoid}
  .data-table [data-col-priority]{display:table-cell!important}
  a[href]{text-decoration:none}
}



.content-aside-layout{display:grid;grid-template-columns:minmax(0,1fr) var(--content-aside-w,320px);gap:var(--space-6,24px);align-items:start}
.content-aside-layout--start{grid-template-columns:var(--content-aside-w,320px) minmax(0,1fr)}
.content-aside-layout>*{min-width:0;min-height:0}

.content-aside{display:flex;flex-direction:column;min-width:0;box-sizing:border-box;background:var(--surface,var(--color-surface,#fff))}
.content-aside__header{display:flex;align-items:center;gap:10px;padding:0 var(--space-4,16px);min-height:52px;border-bottom:1px solid var(--border,var(--color-border,#e2e8f0));flex-shrink:0}
.content-aside__heading{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
.content-aside__icon{color:var(--primary,var(--color-primary,#1F75FE));font-size:18px;flex-shrink:0}
.content-aside__title{margin:0;font-size:var(--text-sm,14px);font-weight:700;color:var(--text,var(--color-text,#1e293b));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.content-aside__close{display:none;border:none;background:none;cursor:pointer;color:var(--text2,var(--color-text-subtle,#475569));width:36px;height:36px;border-radius:var(--radius-sm,6px);font-size:18px;line-height:1;align-items:center;justify-content:center;flex-shrink:0;padding:0;transition:background .15s,color .15s}
.content-aside__close:hover{background:var(--surface2,var(--color-surface-2,#f8fafc));color:var(--text,var(--color-text,#1e293b))}
.content-aside__close--floating{position:absolute;top:8px;inset-inline-end:8px;z-index:2}
.content-aside__body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:var(--space-4,16px);overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.content-aside__footer{flex-shrink:0;border-top:1px solid var(--border,var(--color-border,#e2e8f0));padding:10px var(--space-4,16px);display:flex;align-items:center;gap:8px}
.content-aside__footer>*{flex:1 1 50%;min-width:0}
.content-aside-toggle{display:none}

/* Desktop: عمود sticky — تحت الـtopbar اللاصق وبحد أقصى يترك مجالاً للـtoolbar */
@media(min-width:1024px){
  .content-aside{position:sticky;top:calc(var(--topbar-h,64px) + var(--space-4,16px));max-height:calc(100vh - var(--topbar-h,64px) - var(--bottom-h,64px) - var(--space-8,32px));max-height:calc(100dvh - var(--topbar-h,64px) - var(--bottom-h,64px) - var(--space-8,32px));border:1px solid var(--border,var(--color-border,#e2e8f0));border-radius:var(--radius-md,8px);box-shadow:var(--shadow-xs);overflow:hidden}
  .content-aside__backdrop{display:none!important}
  .content-aside[data-drawer]{transform:none!important;visibility:visible!important;pointer-events:auto!important}
}
@media(min-width:769px){
  .content-aside__body{scrollbar-width:thin}
}

/* Mobile + Tablet: side-sheet عبر نظام [data-drawer] (سلوك JS في app-drawer.js) */
@media(max-width:1023px){
  .content-aside-layout{display:block}
  .content-aside{position:fixed;top:0;bottom:0;inset-inline-start:0;inset-inline-end:auto;width:min(88vw,360px);max-width:100vw;height:100vh;height:100dvh;max-height:none;border:none;border-inline-end:1px solid var(--border,var(--color-border,#e2e8f0));border-radius:0;box-shadow:none;z-index:calc(var(--z-sidebar,1000) + 1);padding-top:env(safe-area-inset-top,0);padding-bottom:env(safe-area-inset-bottom,0);visibility:hidden;transform:translateX(-100%);transition:transform .28s cubic-bezier(.16,1,.3,1),visibility .28s ease;will-change:transform;touch-action:manipulation}
  [dir="rtl"] .content-aside:not(.is-open){transform:translateX(100%)}
  [dir="ltr"] .content-aside:not(.is-open){transform:translateX(-100%)}
  .content-aside.is-open{transform:translateX(0);visibility:visible;box-shadow:var(--shadow-xl,0 20px 25px -5px rgba(0,0,0,.1))}
  .content-aside__backdrop[data-drawer-backdrop]{z-index:var(--z-sidebar,1000)}
  .content-aside__close{display:inline-flex}
  .content-aside-toggle{display:inline-flex}
}


/* ═══════════════════════════════════════════════════════════
   VISITOR HERO (VH Hero) — Unified Hero for All Visitor-Facing Pages
   ═══════════════════════════════════════════════════════════ */

/* ─── Tokens ─── */
.vh-hero{
  --vh-accent:var(--color-primary,#1F75FE);
  --vh-accent-2:color-mix(in srgb,var(--color-primary,#1F75FE) 70%,#fff);
  --vh-bg:var(--color-bg,#F1F5F9);
  --vh-bg-2:var(--color-surface,#fff);
  --vh-text:var(--color-text,#1e293b);
  --vh-muted:var(--color-text-subtle,#475569);
  --vh-muted-2:var(--color-text-muted,#94a3b8);
  --vh-border:var(--color-border,#e2e8f0);
  --vh-radius:var(--radius-lg,16px);
  --vh-max-width:1280px;
}

/* ─── Root ─── */
.vh-hero{
  position:relative;
  width:100%;
  min-height:100vh;
  min-height:100svh;
  min-height:100dvh;
  overflow:hidden;
  isolation:isolate;
  display:flex;
  align-items:center;
  padding:
    calc(var(--topbar-h,64px) + env(safe-area-inset-top,0px) + 24px)
    var(--space-page,16px)
    env(safe-area-inset-bottom,0px);
  direction:rtl;
  text-align:right;
  background:var(--vh-bg);
}

/* ─── Background ─── */
.vh-hero__background{
  position:absolute;
  inset:0;
  z-index:-3;
  pointer-events:none;
  overflow:hidden;
}

/* خلفية صورة مخصصة — الرابط يصل كـ --vh-hero-bg من الـconfig (لا inline styles) */
.vh-hero--bg{
  background:linear-gradient(135deg,rgba(0,0,0,.4) 0%,rgba(0,0,0,.6) 100%),var(--vh-hero-bg);
  background-size:cover;
  background-position:center;
}

/* glow spots متحركة */
.vh-hero__background::before{
  content:"";
  position:absolute;
  width:650px;
  height:650px;
  top:-300px;
  right:-150px;
  border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--vh-accent) 15%,transparent),transparent 68%);
  filter:blur(20px);
  animation:vhHeroGlowOne 12s ease-in-out infinite alternate;
}

.vh-hero__background::after{
  content:"";
  position:absolute;
  width:520px;
  height:520px;
  bottom:-300px;
  left:-120px;
  border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--vh-accent-2) 10%,transparent),transparent 70%);
  filter:blur(25px);
  animation:vhHeroGlowTwo 15s ease-in-out infinite alternate;
}

/* ─── Flat Decorative Shapes ─── */
.vh-hero__shape{
  position:absolute;
  pointer-events:none;
  opacity:.5;
}

.vh-hero__shape--one{
  width:170px;
  height:170px;
  right:7%;
  bottom:12%;
  border:1px solid color-mix(in srgb,var(--vh-accent) 25%,transparent);
  border-radius:50%;
  animation:vhHeroShapeOne 14s ease-in-out infinite;
}

.vh-hero__shape--two{
  width:90px;
  height:90px;
  left:11%;
  top:18%;
  border:1px solid color-mix(in srgb,var(--vh-border) 60%,transparent);
  transform:rotate(45deg);
  animation:vhHeroShapeTwo 12s ease-in-out infinite;
}

.vh-hero__shape--three{
  width:7px;
  height:7px;
  right:28%;
  top:18%;
  border-radius:50%;
  background:var(--vh-accent);
  box-shadow:0 0 20px color-mix(in srgb,var(--vh-accent) 70%,transparent);
  animation:vhHeroDot 5s ease-in-out infinite;
}

.vh-hero__shape--four{
  width:5px;
  height:5px;
  left:30%;
  bottom:20%;
  border-radius:50%;
  background:var(--vh-muted-2);
  animation:vhHeroDot 7s ease-in-out infinite reverse;
}

/* ─── Subtle Grid ─── */
.vh-hero__grid{
  position:absolute;
  inset:0;
  z-index:-2;
  opacity:.06;
  pointer-events:none;
  background-image:
    linear-gradient(var(--vh-border) 1px,transparent 1px),
    linear-gradient(90deg,var(--vh-border) 1px,transparent 1px);
  background-size:70px 70px;
  -webkit-mask-image:linear-gradient(to bottom,black,transparent 90%);
  mask-image:linear-gradient(to bottom,black,transparent 90%);
}

/* ─── Container ─── */
.vh-hero__container{
  position:relative;
  width:100%;
  max-width:var(--vh-max-width);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(320px,0.95fr);
  align-items:center;
  gap:80px;
}

/* ─── Content ─── */
.vh-hero__content{
  max-width:760px;
  animation:vhHeroContent .9s cubic-bezier(.2,.8,.2,1) both;
}

/* ─── Badge ─── */
.vh-hero__badge{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-bottom:24px;
  padding:8px 15px;
  border-radius:999px;
  background:var(--color-primary-subtle,var(--primary-ghost));
  color:var(--vh-accent);
  font-size:14px;
  font-weight:700;
  border:1px solid color-mix(in srgb,var(--vh-accent) 22%,transparent);
}

.vh-hero__badge-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--vh-accent);
  box-shadow:0 0 12px var(--vh-accent);
  animation:vhHeroPulse 2.5s ease-in-out infinite;
  flex-shrink:0;
}

/* ─── Title ─── */
.vh-hero__title{
  margin:0;
  color:var(--vh-text);
  font-size:clamp(40px,5vw,72px);
  font-weight:900;
  line-height:1.18;
  letter-spacing:-1.5px;
  text-wrap:balance;
}

.vh-hero__title-accent{
  display:inline;
  color:var(--vh-accent);
  position:relative;
}

.vh-hero__title-accent::after{
  content:"";
  position:absolute;
  right:0;
  bottom:-5px;
  width:65%;
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--vh-accent),transparent);
  opacity:.7;
}

/* ─── Description ─── */
.vh-hero__description{
  max-width:680px;
  margin:28px 0 0;
  color:var(--vh-muted);
  font-size:clamp(18px,2vw,21px);
  font-weight:400;
  line-height:1.9;
  text-wrap:pretty;
}

/* ─── Actions ─── */
.vh-hero__actions{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:34px;
  flex-wrap:wrap;
}

/* الأزرار تستخدم .primary-button / .btn-outline الموجودة في المشروع */
.vh-hero__actions .primary-button,
.vh-hero__actions .btn-outline{
  min-height:54px;
  padding:0 27px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-size:17px;
  font-weight:800;
  text-decoration:none;
  border-radius:var(--radius-md,12px);
  transition:transform .3s ease,box-shadow .3s ease,background .3s ease;
}

.vh-hero__actions .primary-button{
  background:linear-gradient(135deg,var(--vh-accent-2),var(--vh-accent));
  color:var(--color-text-on-primary,#fff);
  box-shadow:0 12px 30px color-mix(in srgb,var(--vh-accent) 18%,transparent);
}

.vh-hero__actions .primary-button:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 38px color-mix(in srgb,var(--vh-accent) 25%,transparent);
}

.vh-hero__actions .btn-outline{
  color:var(--vh-text);
  background:transparent;
  border:1px solid color-mix(in srgb,var(--vh-border) 80%,transparent);
}

.vh-hero__actions .btn-outline:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--vh-accent) 40%,transparent);
}

/* focus-visible على كل الأزرار (WCAG 2.4.7) */
.vh-hero__actions .primary-button:focus-visible,
.vh-hero__actions .btn-outline:focus-visible{
  outline:2px solid var(--vh-accent);
  outline-offset:3px;
}

/* ─── Trust / Meta ─── */
.vh-hero__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:22px;
  margin-top:30px;
  color:var(--vh-muted-2);
  font-size:14px;
}

.vh-hero__meta-item{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.vh-hero__meta-icon{
  color:var(--vh-accent);
  font-size:16px;
}

/* ─── Visual Side ─── */
.vh-hero__visual{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:430px;
  animation:vhHeroVisual 1s .15s cubic-bezier(.2,.8,.2,1) both;
}

/* Main visual panel */
.vh-hero__visual-main{
  position:relative;
  width:min(100%,480px);
  aspect-ratio:1/1;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:var(--vh-radius);
  background:linear-gradient(145deg,color-mix(in srgb,var(--vh-accent) 8%,transparent),color-mix(in srgb,var(--vh-border) 30%,transparent));
  border:1px solid color-mix(in srgb,var(--vh-border) 50%,transparent);
}

/* Decorative flat ring */
.vh-hero__visual-main::before{
  content:"";
  position:absolute;
  width:70%;
  height:70%;
  border-radius:50%;
  border:1px solid color-mix(in srgb,var(--vh-accent) 30%,transparent);
  animation:vhHeroRing 10s linear infinite;
}

.vh-hero__visual-main::after{
  content:"";
  position:absolute;
  width:40%;
  height:40%;
  border-radius:50%;
  background:color-mix(in srgb,var(--vh-accent) 8%,transparent);
  animation:vhHeroCore 6s ease-in-out infinite alternate;
}

/* Image mode */
.vh-hero__image{
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:var(--radius-md,12px);
  transition:transform .5s ease;
}

.vh-hero__visual-main:hover .vh-hero__image{
  transform:scale(1.035) translateY(-5px);
}

/* Video mode */
.vh-hero__visual--video .vh-hero__visual-main{
  aspect-ratio:16/9;
  background:var(--vh-bg);
  padding:0;
}

.vh-hero__visual--video .vh-hero__visual-main::before,
.vh-hero__visual--video .vh-hero__visual-main::after{
  display:none;
}

.vh-hero__visual--video .vh-hero__visual-main .ui-video-player,
.vh-hero__visual--video .vh-hero__visual-main .ui-item__video{
  width:100%;
  height:100%;
  border-radius:var(--vh-radius);
  overflow:hidden;
}

.vh-hero__visual--video .vh-hero__visual-main .ui-item__video-frame{
  aspect-ratio:16/9;
}

/* Avatar mode (tenant/classifieds) */
.vh-hero__visual--avatar .vh-hero__visual-main::before,
.vh-hero__visual--avatar .vh-hero__visual-main::after{
  display:none;
}

.vh-hero__avatar{
  position:relative;
  z-index:2;
  width:50%;
  aspect-ratio:1/1;
  border-radius:50%;
  background:linear-gradient(135deg,var(--vh-accent),var(--vh-accent-2));
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:clamp(48px,8vw,96px);
  font-weight:900;
  box-shadow:0 12px 40px color-mix(in srgb,var(--vh-accent) 30%,transparent);
}

/* Site hero badge (heroWidgetHtml — regintl badge, etc.) — glassmorphism فوق الـhero */
.vh-hero-badge{
  display:inline-block;
  padding:10px 25px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);
  margin-bottom:2.5rem;
  font-weight:700;
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}

/* Widget mode (heroWidgetHtml — rawabti, regintl, etc.) */
.vh-hero__visual--widget .vh-hero__visual-main{
  aspect-ratio:auto;
  min-height:200px;
  padding:24px;
  background:var(--vh-bg);
  border:1px solid var(--vh-border);
  box-shadow:var(--shadow-lg,0 10px 15px -3px rgba(15,23,42,.08));
}

.vh-hero__visual--widget .vh-hero__visual-main::before,
.vh-hero__visual--widget .vh-hero__visual-main::after{
  display:none;
}

/* ─── Floating Labels ─── */
.vh-hero__label{
  position:absolute;
  z-index:5;
  padding:11px 15px;
  background:var(--vh-bg);
  border:1px solid var(--vh-border);
  border-radius:10px;
  color:var(--vh-text);
  font-size:14px;
  font-weight:700;
  box-shadow:var(--shadow-md,0 4px 6px rgba(15,23,42,.07));
  animation:vhHeroLabel 5s ease-in-out infinite;
}

.vh-hero__label--one{
  top:12%;
  right:0;
}

.vh-hero__label--two{
  bottom:18%;
  left:0;
  animation-delay:-2s;
}

/* ─── Animations ─── */
@keyframes vhHeroContent{
  from{opacity:0;transform:translateX(35px)}
  to{opacity:1;transform:translateX(0)}
}

@keyframes vhHeroVisual{
  from{opacity:0;transform:translateX(-30px) scale(.96)}
  to{opacity:1;transform:translateX(0) scale(1)}
}

@keyframes vhHeroGlowOne{
  from{transform:translate(0,0) scale(1)}
  to{transform:translate(-70px,60px) scale(1.15)}
}

@keyframes vhHeroGlowTwo{
  from{transform:translate(0,0) scale(1)}
  to{transform:translate(60px,-40px) scale(1.12)}
}

@keyframes vhHeroShapeOne{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-30px,-25px) scale(1.08)}
}

@keyframes vhHeroShapeTwo{
  0%,100%{transform:rotate(45deg) translate(0,0)}
  50%{transform:rotate(90deg) translate(15px,-20px)}
}

@keyframes vhHeroDot{
  0%,100%{transform:translateY(0);opacity:.35}
  50%{transform:translateY(-18px);opacity:1}
}

@keyframes vhHeroPulse{
  0%,100%{transform:scale(1);opacity:.7}
  50%{transform:scale(1.35);opacity:1}
}

@keyframes vhHeroRing{
  from{transform:rotate(0deg) scale(1)}
  to{transform:rotate(360deg) scale(1)}
}

@keyframes vhHeroCore{
  from{transform:scale(.9);opacity:.5}
  to{transform:scale(1.12);opacity:1}
}

@keyframes vhHeroLabel{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-7px)}
}

/* ─── Dark Mode Tweaks ─── */
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .vh-hero{
    --vh-accent-2:color-mix(in srgb,var(--color-primary,#60A5FA) 80%,#fff);
  }
  :root:not([data-theme="light"]) .vh-hero__grid{opacity:.08}
  :root:not([data-theme="light"]) .vh-hero__shape--two{
    border-color:color-mix(in srgb,var(--vh-border) 40%,transparent);
  }
}

[data-theme="dark"] .vh-hero{
  --vh-accent-2:color-mix(in srgb,var(--color-primary,#60A5FA) 80%,#fff);
}
[data-theme="dark"] .vh-hero__grid{opacity:.08}
[data-theme="dark"] .vh-hero__shape--two{
  border-color:color-mix(in srgb,var(--vh-border) 40%,transparent);
}

/* ─── Tablet (≤900px) ─── */
@media(max-width:1023px){
  .vh-hero{
    padding:
      calc(var(--topbar-h,64px) + env(safe-area-inset-top,0px) + 16px)
      var(--space-page,16px)
      calc(env(safe-area-inset-bottom,0px) + 40px);
  }

  .vh-hero__container{
    grid-template-columns:1fr;
    gap:55px;
    text-align:center;
  }

  .vh-hero__content{
    margin:0 auto;
    display:flex;
    flex-direction:column;
    align-items:center;
  }

  .vh-hero__description{
    margin-left:auto;
    margin-right:auto;
  }

  .vh-hero__actions{
    justify-content:center;
  }

  .vh-hero__meta{
    justify-content:center;
  }

  /* صورة بالوسط على الموبايل */
  .vh-hero__visual{
    min-height:400px;
    order:-1;
  }
}

/* ─── Mobile (≤600px) ─── */
@media(max-width:640px){
  .vh-hero{
    padding:
      calc(var(--topbar-h,64px) + env(safe-area-inset-top,0px) + 12px)
      var(--space-page,12px)
      calc(env(safe-area-inset-bottom,0px) + 32px);
  }

  .vh-hero__container{
    gap:42px;
  }

  .vh-hero__badge{
    font-size:13px;
    padding:7px 12px;
  }

  .vh-hero__title{
    font-size:36px;
    line-height:1.3;
    letter-spacing:-.6px;
  }

  .vh-hero__description{
    font-size:17px;
    line-height:1.85;
  }

  .vh-hero__actions{
    width:100%;
    flex-direction:column;
    gap:10px;
  }

  .vh-hero__actions .primary-button,
  .vh-hero__actions .btn-outline{
    width:100%;
  }

  .vh-hero__meta{
    gap:13px;
    font-size:13px;
  }

  .vh-hero__visual{
    min-height:330px;
  }

  .vh-hero__visual-main{
    width:100%;
    border-radius:22px;
  }

  .vh-hero__label{
    font-size:12px;
    padding:9px 11px;
  }

  .vh-hero__label--one{right:-4px}
  .vh-hero__label--two{left:-4px}

  .vh-hero__shape--one{width:100px;height:100px}
  .vh-hero__shape--two{width:60px;height:60px}
}

/* ─── Accessibility: Reduced Motion ─── */
@media(prefers-reduced-motion:reduce){
  .vh-hero *,
  .vh-hero::before,
  .vh-hero::after{
    animation:none !important;
    transition:none !important;
  }
}

/* ─── scroll-margin للـanchor links ─── */
.vh-hero{scroll-margin-top:calc(var(--topbar-h,64px) + 20px)}


/* ═══ Homepage System — Unified Styles ═══ */
/* كل الألوان من var() — التلوين تلقائي من site.themeJson عبر generateThemeStyle() */

:root{
  --hp-card-shadow: var(--shadow-md);
  --hp-card-radius: var(--radius-lg, 16px);
  --hp-cta-gradient: linear-gradient(135deg, var(--color-primary, #1F75FE) 0%, var(--primary-dim, #1558c9) 100%);
  --hp-section-gap: var(--space-16, 64px);

  /* ── Type scale موحّد — مصدر واحد للتناسق بين كل الأقسام ── */
  --hp-h2:          clamp(1.5rem, 1.15rem + 1.6vw, 2.4rem);   /* كل عناوين الأقسام */
  --hp-sub:         clamp(1rem, 0.95rem + 0.3vw, 1.2rem);     /* أوصاف الأقسام */
  --hp-card-title:  clamp(1.05rem, 1rem + 0.3vw, 1.25rem);    /* كل عناوين البطاقات */
  --hp-desc:        clamp(0.875rem, 0.85rem + 0.2vw, 1rem);   /* كل أوصاف البطاقات */
  --hp-stat-num:    clamp(2.2rem, 1.6rem + 2.5vw, 3.4rem);    /* أرقام الإحصائيات */
  --hp-price-num:   clamp(2.4rem, 2rem + 1.5vw, 3.2rem);      /* أرقام الأسعار */
  --hp-section-pad: clamp(48px, 4vw + 24px, 88px);            /* حشو القسم الرأسي */

  /* ── الشبكة الموحّدة ── */
  --hp-cards-gap:   var(--space-6, 24px);
  --hp-card-min:    280px;
  --hp-card-max:    360px;
  --hp-cards-max:   1100px;

  /* ── الخلفية الديناميكية ── */
  --hp-tint:        color-mix(in srgb, var(--color-primary, var(--primary)) 5%, var(--color-surface, var(--surface)));
}

@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --hp-card-shadow: 0 4px 6px rgba(0,0,0,.2),0 2px 4px rgba(0,0,0,.15);
    --hp-cta-gradient: linear-gradient(135deg, var(--color-primary, #60A5FA) 0%, var(--primary-dim, #3b82f6) 100%);
    --hp-tint: color-mix(in srgb, var(--color-primary, var(--primary)) 9%, var(--color-surface, var(--surface)));
  }
}
[data-theme="dark"]{
  --hp-card-shadow: 0 4px 6px rgba(0,0,0,.2),0 2px 4px rgba(0,0,0,.15);
  --hp-cta-gradient: linear-gradient(135deg, var(--color-primary, #60A5FA) 0%, var(--primary-dim, #3b82f6) 100%);
  --hp-tint: color-mix(in srgb, var(--color-primary, var(--primary)) 9%, var(--color-surface, var(--surface)));
}

/* ═══ Section Rhythm — حشو موحّد لكل الأقسام ═══ */
.hp-stats,.hp-features,.hp-video,.hp-steps,.hp-value-prop,.hp-testimonials,
.hp-pricing,.hp-faq,.hp-articles,.hp-cta,.hp-services,.hp-portfolio,
.hp-dynamic,.hp-custom-html,.hp-not-configured,.hp-directory{
  padding:var(--hp-section-pad) var(--space-page, 16px);
  scroll-margin-top:calc(var(--topbar-h,64px) + 20px);
}

/* ═══ Section backgrounds — تناوب ثلاثي: شفاف / tinted / surface ═══ */
.hp-section--surface{ background:var(--color-surface, var(--surface)); }
.hp-section--tinted{
  position:relative;
  background:var(--hp-tint);
}
.hp-section--tinted::before{
  content:''; position:absolute; inset-inline-start:0; inset-inline-end:0; top:0; height:200px;
  background:radial-gradient(ellipse 60% 100% at 50% 0%, color-mix(in srgb,var(--color-primary,var(--primary)) 7%,transparent), transparent);
  pointer-events:none;
}
.hp-section--tinted > *{ position:relative; }

/* ═══ .hp-cards — الشبكة الموحّدة: تتوسط أي عدد بطاقات على أي شاشة ═══ */
.hp-cards{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:var(--hp-cards-gap);
  max-width:var(--hp-cards-max);
  margin-inline:auto;
}
.hp-cards > *{
  flex:1 1 min(var(--hp-card-min), 100%);
  max-width:var(--hp-card-max);
  min-width:0;
}
/* variants: بطاقات أصغر (stats/تصنيفات) أو أعرض (أسعار/مقالات) */
.hp-cards--compact{ --hp-card-min:160px; --hp-card-max:240px; --hp-cards-gap:var(--space-5,20px); }
.hp-cards--wide{ --hp-card-min:300px; --hp-card-max:420px; }
.hp-cards--fill > *{ max-width:none; }

/* ═══ Section Label — عنوان القسم الموحّد ═══ */
.hp-section-label{ text-align:center; margin-bottom:var(--space-8,32px); }
.hp-section-label h2{ font-size:var(--hp-h2); font-weight:800; color:var(--color-text, var(--text)); margin:0 0 var(--space-3,12px); line-height:1.2; }
.hp-section-label p{ font-size:var(--hp-sub); color:var(--color-text-subtle, var(--text2)); margin:0; line-height:1.6; max-width:640px; margin-inline:auto; }
.hp-badge{ display:inline-block; padding:6px 16px; border-radius:999px; background:var(--color-primary-subtle, var(--primary-ghost)); color:var(--color-primary, var(--primary)); font-size:clamp(var(--text-sm,.875rem),0.83rem+0.15vw,var(--text-base,1rem)); font-weight:600; margin-bottom:var(--space-3,12px); }

/* --start: عنوان بمحاذاة اليمين (RTL start) مع accent bar عمودي */
.hp-section-label--start{ text-align:start; max-width:var(--hp-cards-max); margin-inline:auto; }
.hp-section-label--start p{ margin-inline:0; }
.hp-section-label--start h2{
  position:relative;
  padding-inline-start:var(--space-4,16px);
}
.hp-section-label--start h2::before{
  content:''; position:absolute; inset-inline-start:0; top:0.1em; bottom:0.1em;
  width:5px; border-radius:999px;
  background:linear-gradient(180deg, var(--color-primary, var(--primary)), color-mix(in srgb, var(--color-primary, var(--primary)) 45%, transparent));
}

/* ═══ Buttons ═══ */
.hp-btn-primary{ display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:12px 24px; border-radius:var(--radius-md, 10px); background:var(--color-primary, var(--primary)); color:var(--color-text-on-primary, #fff); font-weight:700; text-decoration:none; font-size:var(--text-base, 1rem); transition:opacity .15s; border:none; cursor:pointer; font-family:inherit; }
.hp-btn-primary:hover{ opacity:.9; }
.hp-btn-outline{ display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:12px 24px; border-radius:var(--radius-md, 10px); background:transparent; color:var(--color-text, var(--text)); border:1px solid var(--color-border, var(--border)); font-weight:600; text-decoration:none; font-size:var(--text-base, 1rem); transition:background .15s; cursor:pointer; font-family:inherit; }
.hp-btn-outline:hover{ background:var(--color-surface-2, var(--surface2)); }
.hp-btn-lg{ padding:14px 32px; font-size:1.05rem; }

/* ═══ بطاقة القيمة/الميزة المشتركة — feature/value/service ═══ */
.hp-card{
  background:var(--color-surface, var(--surface));
  border:1px solid var(--color-border, var(--border));
  border-radius:var(--hp-card-radius);
  padding:var(--space-6,24px);
  box-shadow:var(--hp-card-shadow);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.hp-card:hover{ transform:translateY(-3px); border-color:color-mix(in srgb,var(--color-primary,var(--primary)) 45%,transparent); box-shadow:0 12px 28px color-mix(in srgb,var(--color-primary,var(--primary)) 10%,transparent); }
a.hp-card{ display:block; text-decoration:none; color:inherit; }
.hp-card--highlight{ position:relative; border:2px solid var(--color-primary, var(--primary)); }
.hp-card__badge{
  position:absolute; top:12px; inset-inline-end:12px;
  background:var(--color-primary, var(--primary)); color:var(--color-text-on-primary, #fff);
  padding:4px 12px; font-size:.75rem; font-weight:800; border-radius:4px;
}

/* ═══ Icon containers (مشترك — Remix Icon + emoji) ═══ */
/* حاوية الأيقونة: مربع ملوّن متناغم مع الثيم — تعمل مع <i class="ri-*"> وemoji */
.hp-feature-card__icon,.hp-value-card__icon,.hp-service-card__icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:var(--radius-lg,16px);
  background:var(--color-primary-subtle,var(--primary-ghost));
  color:var(--color-primary,var(--primary));
  margin-bottom:var(--space-4,16px);
}
/* Remix Icon inside containers: حجم متناسق + لون الثيم */
.hp-feature-card__icon i,.hp-value-card__icon i,.hp-service-card__icon i{ font-size:1.75rem;line-height:1; }
/* Emoji inside containers: حجم متناسق */
.hp-feature-card__icon:not(:has(i)),.hp-value-card__icon:not(:has(i)),.hp-service-card__icon:not(:has(i)){ font-size:1.75rem; }

/* Dynamic category + tool icons: نفس المعالجة لكن أصغر */
.hp-dyn-cat-card__icon,.hp-dyn-tool-card__icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:var(--radius-md,12px);
  background:var(--color-primary-subtle,var(--primary-ghost));
  color:var(--color-primary,var(--primary));
}
.hp-dyn-cat-card__icon i,.hp-dyn-tool-card__icon i{ font-size:1.5rem;line-height:1; }
.hp-dyn-tool-card__icon{ margin:var(--space-4,16px) var(--space-4,16px) 0; }

/* ═══ Stats — شريط أرقام مميز (بدون بطاقات) ═══ */
.hp-stats__inner{ max-width:var(--hp-cards-max); margin:0 auto; display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-6,24px) var(--space-10,40px); text-align:center; }
.hp-stat{ flex:1 1 min(180px,45%); max-width:260px; }
.hp-stat__value{
  font-size:var(--hp-stat-num); font-weight:800; line-height:1.1;
  color:var(--color-primary, var(--primary));
  font-variant-numeric:tabular-nums;
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hp-stat__value{
    background:linear-gradient(135deg, var(--color-primary,var(--primary)), color-mix(in srgb,var(--color-primary,var(--primary)) 55%,var(--color-text,var(--text))));
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
  }
}
/* فاصل accent قصير تحت الرقم */
.hp-stat__value::after{
  content:''; display:block; width:44px; height:3px; border-radius:999px;
  margin:var(--space-2,8px) auto 0;
  background:linear-gradient(90deg, var(--color-primary,var(--primary)), color-mix(in srgb,var(--color-primary,var(--primary)) 40%,transparent));
}
.hp-stat__label{ font-size:clamp(var(--text-sm,.875rem),0.83rem+0.2vw,var(--text-base,1rem)); color:var(--color-text-subtle, var(--text2)); margin-top:var(--space-3,12px); font-weight:600; }

/* ═══ Features — .hp-feature-card تُرسم مع .hp-card الأساسية ═══ */
.hp-feature-card__title{ font-size:var(--hp-card-title); font-weight:700; color:var(--color-text, var(--text)); margin:0 0 var(--space-2,8px); }
.hp-feature-card__desc{ font-size:var(--hp-desc); color:var(--color-text-subtle, var(--text2)); margin:0; line-height:1.6; }

/* ═══ Video ═══ */
.hp-video__inner{ max-width:var(--hp-cards-max); margin:0 auto; text-align:center; }
/* متنسق مع مشغل الفيديو المركزي — لا حواف دائرية على الحاوية الخارجية */
.hp-video__player{ overflow:hidden; background:#000; border-radius:var(--hp-card-radius); box-shadow:0 20px 50px rgba(0,0,0,0.18); }
/* الـembed الداخلي (.ui-item__video) يحدد aspect-ratio بنفسه — لا نفرضه من الـparent */
.hp-video__player .ui-item__video{ width:100%; max-width:100%; border:none; border-radius:0; background:#000 }
.hp-video__player .ui-item__video .ui-item__video-frame{ border-radius:0 }
.hp-video__player .ui-item__video video{ object-fit:contain }
/* مشغل الفيديو المركزي (ui-video-player) داخل الحاوية */
.hp-video__player .ui-video-player{ border-radius:0; box-shadow:none }
.hp-video__player:hover .ui-video-player{ box-shadow:none }
/* vertical: نضيق الحاوية + نغيّر aspect-ratio للمشغل المركزي إلى 9/16 */
.hp-video__player--vertical{ max-width:380px; margin:0 auto }
.hp-video__player--vertical .ui-video-player{ aspect-ratio:9/16 }
/* placeholder: نحتاج aspect-ratio لأن لا يوجد child يحدده */
.hp-video__player--placeholder{ display:flex; align-items:center; justify-content:center; border:2px dashed var(--color-border, var(--border)); aspect-ratio:16/9; background:var(--color-surface-2, var(--surface2)); box-shadow:none; }
.hp-video__player--placeholder:hover{ box-shadow:none }
.hp-video__not-configured{ text-align:center; padding:var(--space-6,24px); }
.hp-video__not-configured-icon{ font-size:3rem; color:var(--color-text-muted, var(--text3)); }
.hp-video__not-configured-hint{ font-size:var(--text-sm, .85rem); color:var(--color-text-muted, var(--text3)); margin-top:var(--space-2,8px); }
.hp-video__cta{ margin-top:var(--space-5,20px); }

/* ═══ Steps — بطاقات + خط ربط accent على الديسكتوب ═══ */
.hp-steps__grid{ max-width:var(--hp-cards-max); margin:0 auto; display:flex; flex-wrap:wrap; justify-content:center; gap:var(--hp-cards-gap); }
.hp-step-card{
  position:relative; flex:1 1 min(240px,100%); max-width:var(--hp-card-max);
  background:var(--color-surface, var(--surface)); border:1px solid var(--color-border,var(--border));
  border-radius:var(--hp-card-radius); padding:var(--space-6,24px); text-align:start;
  box-shadow:var(--hp-card-shadow);
}
.hp-step-card__num{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:52px; height:52px; padding:0 10px; border-radius:var(--radius-lg,16px);
  font-size:1.5rem; font-weight:800; color:var(--color-text-on-primary,#fff);
  background:linear-gradient(135deg, var(--color-primary,var(--primary)), color-mix(in srgb,var(--color-primary,var(--primary)) 60%,var(--color-text,var(--text))));
  margin-bottom:var(--space-4,16px);
  font-variant-numeric:tabular-nums;
}
/* خط ربط يصل كل بطاقة بالتي تليها (ديسكتوب فقط — يختفي على wrap/موبايل) */
@media(min-width:1024px){
  .hp-step-card:not(:last-child)::after{
    content:''; position:absolute; top:calc(var(--space-6,24px) + 26px);
    inset-inline-end:calc(-1 * var(--hp-cards-gap));
    width:var(--hp-cards-gap); height:2px;
    background:linear-gradient(90deg, color-mix(in srgb,var(--color-primary,var(--primary)) 40%,transparent), transparent);
  }
}
.hp-step-card__title{ font-size:var(--hp-card-title); font-weight:700; color:var(--color-text, var(--text)); margin:0 0 var(--space-2,8px); }
.hp-step-card__desc{ font-size:var(--hp-desc); color:var(--color-text-subtle, var(--text2)); margin:0; line-height:1.6; }

/* ═══ Value Prop — بطاقات حقيقية متمركزة (تُرسم مع .hp-card) ═══ */
.hp-value-card{
  text-align:center;
  display:flex; flex-direction:column; align-items:center;
  padding-block-start:var(--space-7,28px);
}
.hp-value-card__title{ font-size:var(--hp-card-title); font-weight:700; color:var(--color-text, var(--text)); margin:0 0 var(--space-2,8px); }
.hp-value-card__desc{ font-size:var(--hp-desc); color:var(--color-text-subtle, var(--text2)); margin:0; line-height:1.6; }

/* ═══ Testimonials — تصميم احترافي: quote + avatar أحرف/صورة + rating ═══ */
.hp-testimonial-card{
  background:var(--color-surface, var(--surface));
  border:1px solid var(--color-border, var(--border));
  border-radius:var(--hp-card-radius);
  padding:var(--space-7,28px) var(--space-6,24px);
  text-align:start;
  display:flex; flex-direction:column;
  box-shadow:var(--hp-card-shadow);
  position:relative;
}
.hp-testimonial-card__quote{
  font-size:2.4rem; line-height:1; color:var(--color-primary,var(--primary));
  opacity:.25; margin-bottom:var(--space-3,12px);
}
.hp-testimonial-card__rating{ display:flex; gap:2px; margin-bottom:var(--space-3,12px); color:var(--color-warning,#f59e0b); font-size:1rem; }
.hp-testimonial-card__text{ font-size:clamp(var(--text-base,1rem),0.95rem+0.25vw,var(--text-lg,1.125rem)); font-style:italic; color:var(--color-text-subtle, var(--text2)); margin:0 0 var(--space-5,20px); line-height:1.7; flex:1; }
.hp-testimonial-card__author{ display:flex; align-items:center; gap:var(--space-3,12px); }
.hp-testimonial-card__avatar{
  position:relative; width:52px; height:52px; border-radius:50%; flex-shrink:0;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--color-primary,var(--primary)) 30%,transparent);
  overflow:hidden;
}
.hp-testimonial-card__avatar img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:var(--color-surface,var(--surface)); }
/* avatar أحرف أولى — gradient الثيم خلف الصورة (يظهر عند غيابها أو فشل تحميلها) */
.hp-testimonial-card__initials{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%;
  background:linear-gradient(135deg, var(--color-primary,var(--primary)), color-mix(in srgb,var(--color-primary,var(--primary)) 60%,var(--color-text,var(--text))));
  color:var(--color-text-on-primary,#fff);
  font-size:1.3rem; font-weight:800;
}
.hp-testimonial-card__name{ font-size:var(--text-base,1rem); font-weight:700; color:var(--color-text, var(--text)); }
.hp-testimonial-card__role{ font-size:clamp(var(--text-sm,.875rem),0.83rem+0.15vw,var(--text-base,1rem)); color:var(--color-text-subtle, var(--text2)); }

/* ═══ Pricing ═══ */
.hp-pricing{ text-align:center; }
.hp-pricing__card{ position:relative; display:flex; flex-direction:column; background:var(--color-surface, var(--surface)); border:1px solid var(--color-border, var(--border)); border-radius:var(--hp-card-radius); padding:var(--space-8,32px) var(--space-6,24px); box-shadow:var(--hp-card-shadow); text-align:center; transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; width:100%; max-width:380px; }
.hp-pricing__card:hover{ transform:translateY(-4px); border-color:var(--color-primary, var(--primary)); box-shadow:0 16px 36px color-mix(in srgb,var(--color-primary, var(--primary)) 12%,transparent); }
.hp-pricing__name{ font-size:var(--hp-card-title); font-weight:700; color:var(--color-text, var(--text)); margin:0 0 var(--space-2,8px); }
.hp-pricing__price{ display:flex; align-items:baseline; justify-content:center; gap:4px; margin:0 0 var(--space-3,12px); padding-bottom:var(--space-4,16px); border-bottom:1px solid var(--color-border, var(--border)); font-size:var(--hp-price-num); font-weight:800; line-height:1; color:var(--color-primary, var(--primary)); }
.hp-pricing__price[hidden]{ display:none !important }
.hp-pricing__period{ font-size:clamp(1rem,0.95rem+0.2vw,1.125rem); font-weight:500; color:var(--color-text-subtle, var(--text2)); }
.hp-pricing__desc{ font-size:var(--hp-desc); color:var(--color-text-subtle, var(--text2)); margin:0 0 var(--space-5,20px); }
/* المميزات: نصوص بالمنتصف (text-align:center بدل text-align:start) */
.hp-pricing__features{ list-style:none; padding:0; margin:0 0 var(--space-6,24px); text-align:center; display:flex; flex-direction:column; }
.hp-pricing__features li{ display:flex; align-items:center; justify-content:center; gap:10px; padding:12px 0; color:var(--color-text, var(--text)); font-size:var(--hp-desc); border-bottom:1px solid color-mix(in srgb,var(--color-border, var(--border)) 60%,transparent); }
.hp-pricing__features li:last-child{ border-bottom:none; }
.hp-pricing__features i{ color:var(--color-primary, var(--primary)); flex-shrink:0; font-size:clamp(1.1rem,1.05rem+0.15vw,1.25rem); }
.hp-pricing .hp-btn-primary{ margin-top:auto; }
.hp-pricing__trial-note{ margin:var(--space-5,20px) auto 0; font-size:var(--hp-desc); color:var(--color-text-subtle,var(--text2)); }

/* ═══ FAQ (يستخدم الأكورديون المركزي .ui-faq-* من base.styles.js) ═══ */
.hp-faq .ui-faq-list{ margin-inline:auto; }

/* ═══ Articles (يستخدم بطاقات المقالات المركزية .blog-card من base.styles.js) ═══ */

/* ═══ Services (corporate) ═══ */
.hp-service-card h3{ font-size:var(--hp-card-title); font-weight:700; color:var(--color-text, var(--text)); margin:0 0 var(--space-2,8px); }
.hp-service-card p{ font-size:var(--hp-desc); color:var(--color-text-subtle, var(--text2)); margin:0; line-height:1.6; }

/* ═══ Portfolio (corporate) ═══ */
.hp-portfolio-card{ display:block; border-radius:var(--hp-card-radius); overflow:hidden; text-decoration:none; box-shadow:var(--hp-card-shadow); background:var(--color-surface,var(--surface)); border:1px solid var(--color-border,var(--border)); transition:transform .2s ease,box-shadow .2s ease; }
.hp-portfolio-card:hover{ transform:translateY(-3px); box-shadow:0 12px 28px color-mix(in srgb,var(--color-primary,var(--primary)) 10%,transparent); }
.hp-portfolio-card img{ width:100%; height:220px; object-fit:cover; display:block; }
.hp-portfolio-card h3{ font-size:var(--hp-card-title); font-weight:700; color:var(--color-text, var(--text)); margin:var(--space-3,12px) var(--space-4,16px) var(--space-4,16px); }

/* ═══ Final CTA ═══ */
.hp-cta__inner{ position:relative; max-width:var(--hp-cards-max); margin:0 auto; text-align:center; background:var(--hp-cta-gradient); border-radius:var(--hp-card-radius); padding:var(--space-12, 48px) var(--space-8,32px); overflow:hidden; color:var(--color-text-on-primary, #fff); }
.hp-cta__glow{ position:absolute; top:-50%; left:-50%; width:200%; height:200%; background:radial-gradient(circle, rgba(255,255,255,.1) 0%, transparent 60%); pointer-events:none; }
.hp-cta__inner h2{ font-size:var(--hp-h2); font-weight:800; margin:0 0 var(--space-4,16px); position:relative; line-height:1.2; }
.hp-cta__inner p{ font-size:var(--hp-sub); margin:0 0 var(--space-6,24px); line-height:1.6; opacity:.9; position:relative; }
.hp-cta__actions{ display:flex; gap:var(--space-3,12px); justify-content:center; flex-wrap:wrap; margin-bottom:var(--space-6,24px); position:relative; }
.hp-cta__actions:last-child{ margin-bottom:0; }
.hp-cta__inner:not(.hp-cta__inner--surface) .hp-btn-primary{ background:#fff; color:var(--color-primary, var(--primary)); }
.hp-cta__inner:not(.hp-cta__inner--surface) .hp-btn-outline{ background:transparent; color:#fff; border-color:rgba(255,255,255,.4); }
.hp-cta__inner:not(.hp-cta__inner--surface) .hp-btn-outline:hover{ background:rgba(255,255,255,.1); }
.hp-cta__badges{ display:flex; gap:var(--space-4,16px); justify-content:center; flex-wrap:wrap; position:relative; }
.hp-cta__badges span{ display:flex; align-items:center; gap:4px; font-size:var(--text-sm, .85rem); opacity:.85; }
.hp-cta__badges i{ font-size:1.1rem; }
/* variant: بطاقة سطح عادية بدل gradient (لبلوكات CTA bg=light) */
.hp-cta__inner--surface{ background:var(--color-surface,var(--surface)); color:var(--color-text,var(--text)); border:1px solid var(--color-border,var(--border)); box-shadow:var(--hp-card-shadow); }
.hp-cta__inner--surface p{ opacity:1; color:var(--color-text-subtle,var(--text2)); }
.hp-cta__inner--surface .hp-cta__badges{ color:var(--color-text-subtle,var(--text2)); }
.hp-cta__inner--dark{ background:linear-gradient(135deg, color-mix(in srgb,var(--color-primary,var(--primary)) 18%,#0B1120), #0B1120); border:1px solid color-mix(in srgb,var(--color-primary,var(--primary)) 30%,transparent); }
.hp-cta__inner--dark .hp-cta__badges{ color:var(--color-text-on-primary,#fff); }

/* ═══ Dynamic Section ═══ */
.hp-dyn-subtitle{ text-align:center; font-size:clamp(var(--text-xl,1.25rem),1.15rem+0.5vw,var(--text-2xl,1.5rem)); font-weight:700; color:var(--color-text, var(--text)); margin:var(--space-8,32px) 0 var(--space-6,24px); }
.hp-dyn-cat-grid{ max-width:var(--hp-cards-max); margin:0 auto; display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-4,16px); }
.hp-dyn-cat-card{ flex:1 1 min(150px,100%); max-width:200px; display:flex; flex-direction:column; align-items:center; gap:var(--space-2,8px); padding:var(--space-5,20px); background:var(--color-surface, var(--surface)); border:1px solid var(--color-border,var(--border)); border-radius:var(--hp-card-radius); text-decoration:none; transition:box-shadow .15s,border-color .15s; }
.hp-dyn-cat-card:hover{ box-shadow:var(--shadow-md); border-color:color-mix(in srgb,var(--color-primary,var(--primary)) 45%,transparent); }
.hp-dyn-cat-card__name{ font-size:var(--text-sm, .85rem); font-weight:600; color:var(--color-text, var(--text)); }
.hp-dyn-listing-grid,.hp-dyn-tools-grid,.hp-dyn-courses-grid{ max-width:var(--hp-cards-max); margin:0 auto; display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-5,20px); }
.hp-dyn-listing-card,.hp-dyn-tool-card,.hp-dyn-course-card{ flex:1 1 min(240px,100%); max-width:340px; display:block; background:var(--color-surface, var(--surface)); border:1px solid var(--color-border,var(--border)); border-radius:var(--hp-card-radius); overflow:hidden; text-decoration:none; box-shadow:var(--hp-card-shadow); transition:box-shadow .15s,border-color .15s; }
.hp-dyn-listing-card:hover,.hp-dyn-tool-card:hover,.hp-dyn-course-card:hover{ box-shadow:var(--shadow-lg); border-color:color-mix(in srgb,var(--color-primary,var(--primary)) 45%,transparent); }
.hp-dyn-listing-card img,.hp-dyn-course-card img{ width:100%; height:160px; object-fit:cover; display:block; }
.hp-dyn-listing-card h4,.hp-dyn-tool-card h4,.hp-dyn-course-card h4{ font-size:clamp(1rem,0.95rem+0.2vw,1.125rem); font-weight:700; color:var(--color-text, var(--text)); margin:var(--space-3,12px) var(--space-4,16px) var(--space-1,4px); }
.hp-dyn-listing-card p,.hp-dyn-tool-card p,.hp-dyn-course-card p{ font-size:clamp(var(--text-sm,.875rem),0.83rem+0.15vw,var(--text-base,1rem)); color:var(--color-text-subtle, var(--text2)); margin:0 var(--space-4,16px) var(--space-3,12px); }
.hp-dyn-listing-card__price{ display:block; font-weight:700; color:var(--color-primary, var(--primary)); margin:0 var(--space-4,16px) var(--space-3,12px); }

/* ═══ Not Configured ═══ */
.hp-not-configured{ text-align:center; }
.hp-not-configured__inner{ max-width:600px; margin:0 auto; }
.hp-not-configured h1{ font-size:var(--hp-h2); color:var(--color-text, var(--text)); margin-bottom:var(--space-4,16px); }
.hp-not-configured p{ color:var(--color-text-subtle, var(--text2)); margin-bottom:var(--space-2,8px); }
.hp-not-configured__hint{ font-size:var(--text-sm, .85rem); color:var(--color-text-muted, var(--text3)); }

/* ═══ hp-reveal — fade-up عند التمرير (يُسلَّح من app.js عبر data-hp-reveal) ═══ */
.hp-reveal{ opacity:0; transform:translateY(24px); transition:opacity .55s ease, transform .55s ease; }
.hp-reveal.is-visible{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){
  .hp-reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ═══ Responsive ═══ */
@media(max-width:768px){
  .hp-cta__inner{ padding:var(--space-8,32px) var(--space-5,20px); }
  .hp-cta__actions{ flex-direction:column; }
  .hp-cta__actions .hp-btn-primary,.hp-cta__actions .hp-btn-outline{ width:100%; }
  .hp-pricing__card{ max-width:420px; }
  .billing-cycle-toggle{ margin-inline:auto; }
}
@media(max-width:480px){
  .hp-stat{ flex-basis:min(140px,45%); }
}


/* ═══ Page Builder Blocks — pb-* ═══ */

/* قاعدة القسم — نفس إيقاع الـhomepage */
.pb-block{
  padding:var(--hp-section-pad, clamp(48px,4vw+24px,88px)) var(--space-page, 16px);
  scroll-margin-top:calc(var(--topbar-h,64px) + 20px);
}
.pb-block--surface{ background:var(--color-surface, var(--surface)); }
.pb-block--tinted{ position:relative; background:var(--hp-tint, var(--color-surface, var(--surface))); }
.pb-block--tinted::before{
  content:''; position:absolute; inset-inline-start:0; inset-inline-end:0; top:0; height:200px;
  background:radial-gradient(ellipse 60% 100% at 50% 0%, color-mix(in srgb,var(--color-primary,var(--primary)) 7%,transparent), transparent);
  pointer-events:none;
}
.pb-block--tinted > *{ position:relative; }
.pb-inner{ max-width:var(--hp-cards-max, 1100px); margin:0 auto; }
.pb-inner--narrow{ max-width:760px; }

/* ═══ نص ═══ */
.pb-text--center{ text-align:center; }
.pb-text--start{ text-align:start; }
.pb-text--end{ text-align:end; }
.pb-text__title{ font-size:var(--hp-h2); font-weight:800; color:var(--color-text, var(--text)); margin:0 0 var(--space-4,16px); line-height:1.2; }
.pb-text__body{ font-size:var(--hp-desc); line-height:1.9; color:var(--color-text-subtle, var(--text2)); max-width:720px; margin:0 auto; }
.pb-text--start .pb-text__body{ margin-inline:0; }
.pb-text__body p{ margin:0 0 var(--space-3,12px); }
.pb-text__body p:last-child{ margin-bottom:0; }
.pb-text__body a{ color:var(--color-primary, var(--primary)); }

/* ═══ صورة ═══ */
.pb-image figure{ margin:0; }
.pb-image img{ display:block; width:100%; border-radius:var(--hp-card-radius, 16px); box-shadow:var(--hp-card-shadow, var(--shadow-md)); }
.pb-image--wide .pb-inner{ max-width:1400px; }
.pb-image--normal .pb-inner{ max-width:800px; }
.pb-image__caption{ text-align:center; font-size:var(--text-sm, .85rem); color:var(--color-text-subtle, var(--text2)); margin-top:var(--space-3,12px); }

/* ═══ معرض صور ═══ */
.pb-gallery{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-4,16px); max-width:var(--hp-cards-max,1100px); margin:0 auto; }
.pb-gallery__item{ flex:1 1 min(240px,100%); max-width:var(--hp-card-max,360px); margin:0; border-radius:var(--hp-card-radius,16px); overflow:hidden; box-shadow:var(--hp-card-shadow, var(--shadow-md)); }
.pb-gallery__item img{ display:block; width:100%; border-radius:inherit; }
.pb-gallery--square img{ aspect-ratio:1/1; object-fit:cover; }
.pb-gallery--portrait img{ aspect-ratio:3/4; object-fit:cover; }
.pb-gallery--landscape img{ aspect-ratio:4/3; object-fit:cover; }
.pb-gallery--wide img{ aspect-ratio:16/9; object-fit:cover; }

/* ═══ بطاقة رابط (cards block) — تُرسم مع .hp-card ═══ */
.pb-card-link{ text-align:start; text-decoration:none; color:inherit; display:block; }
.pb-card-link__icon{ font-size:2rem; margin-bottom:var(--space-3,12px); color:var(--color-primary,var(--primary)); }
.pb-card-link__title{ font-size:var(--hp-card-title); font-weight:700; color:var(--color-text,var(--text)); margin:0 0 var(--space-2,8px); }
.pb-card-link__desc{ font-size:var(--hp-desc); color:var(--color-text-subtle,var(--text2)); margin:0; line-height:1.6; }

/* ═══ قنوات تواصل (contact block + /contact) ═══ */
.pb-channel{
  display:flex; flex-direction:column; align-items:center; gap:var(--space-2,8px);
  padding:var(--space-5,20px); text-align:center;
  background:var(--color-surface, var(--surface));
  border:1px solid var(--color-border, var(--border));
  border-radius:var(--hp-card-radius,16px);
  box-shadow:var(--hp-card-shadow, var(--shadow-md));
  text-decoration:none; color:inherit;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
a.pb-channel:hover{ transform:translateY(-2px); border-color:var(--color-primary,var(--primary)); box-shadow:0 6px 20px color-mix(in srgb,var(--color-primary,var(--primary)) 12%,transparent); }
.pb-channel__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:var(--radius-md,12px);
  background:var(--color-primary-subtle, var(--primary-ghost));
  color:var(--color-primary, var(--primary));
  font-size:1.5rem;
}
.pb-channel__label{ font-size:var(--text-sm,.85rem); font-weight:600; color:var(--color-text-subtle,var(--text2)); }
.pb-channel__value{ font-weight:600; color:var(--color-text,var(--text)); word-break:break-word; }

/* ═══ نماذج (form block) ═══ */
.pb-form{
  max-width:560px; margin:0 auto; padding:var(--space-8,32px);
  background:var(--color-surface, var(--surface));
  border:1px solid var(--color-border, var(--border));
  border-radius:var(--hp-card-radius,16px);
  box-shadow:var(--hp-card-shadow, var(--shadow-md));
}
.pb-form__field{ margin-bottom:var(--space-4,16px); }
.pb-form__label{ display:block; font-size:var(--text-sm,.85rem); font-weight:600; margin-bottom:6px; color:var(--color-text,var(--text)); }
.pb-form__input{
  width:100%; padding:10px 14px; box-sizing:border-box;
  border:1px solid var(--color-border, var(--border));
  border-radius:var(--radius-sm,8px);
  font-size:var(--text-base,1rem); font-family:inherit;
  background:var(--color-surface,var(--surface)); color:var(--color-text,var(--text));
}
.pb-form__input:focus{ outline:none; border-color:var(--color-primary,var(--primary)); box-shadow:0 0 0 3px var(--color-primary-subtle,var(--primary-ghost)); }
.pb-form__submit{ width:100%; justify-content:center; padding:14px; }

/* ═══ زر lead-form (يفتح مودال — الـdata-attrs يتعامل معها app.js) ═══ */
.pb-lead-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 32px; border-radius:var(--radius-md,12px); border:none;
  font-size:1rem; font-weight:700; text-decoration:none; cursor:pointer; font-family:inherit;
  background:var(--color-primary,var(--primary)); color:var(--color-text-on-primary,#fff);
  box-shadow:0 4px 14px color-mix(in srgb,var(--color-primary,var(--primary)) 30%,transparent);
  transition:transform .2s,opacity .2s;
}
.pb-lead-btn:hover{ transform:translateY(-1px); opacity:.95; }
.pb-lead-btn--outline{ background:transparent; color:var(--color-primary,var(--primary)); border:2px solid var(--color-primary,var(--primary)); box-shadow:none; }
.pb-lead-btn--light{ background:#fff; color:var(--color-primary,var(--primary)); box-shadow:0 4px 14px rgba(0,0,0,.12); }
.pb-lead-wrap{ text-align:center; }

/* ═══ شعارات العملاء ═══ */
.pb-logos{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:32px; max-width:var(--hp-cards-max,1100px); margin:0 auto; }
.pb-logos__title{ text-align:center; font-size:var(--text-sm,.85rem); color:var(--color-text-subtle,var(--text2)); text-transform:uppercase; letter-spacing:1px; margin:0 0 var(--space-6,24px); }
.pb-logo{ display:inline-flex; align-items:center; }
.pb-logo img{ max-height:48px; max-width:160px; opacity:.6; filter:grayscale(1); transition:opacity .15s, filter .15s; }
.pb-logo:hover img{ opacity:1; filter:none; }

/* ═══ محتوى خام (customHtml / ad) ═══ */
.pb-raw{ padding:clamp(24px,4vw,48px) var(--space-page,16px); }
.pb-raw > .pb-inner{ max-width:var(--hp-cards-max,1100px); margin:0 auto; }

/* ═══ عدّاد تنازلي (urgency — يُشغَّل من app.js عبر data-countdown) ═══ */
.pb-countdown{ text-align:center; }
.pb-countdown__title{ font-size:var(--hp-card-title); font-weight:900; color:var(--color-text,var(--text)); margin:0 0 var(--space-5,20px); }
.pb-countdown__discount{ font-size:var(--hp-desc); font-weight:800; color:var(--color-primary,var(--primary)); margin-bottom:var(--space-6,24px); }
.pb-countdown__timer{ display:inline-flex; align-items:flex-start; gap:12px; justify-content:center; flex-wrap:wrap; }
.pb-countdown__unit{ text-align:center; min-width:72px; }
.pb-countdown__num{
  font-size:clamp(1.8rem,5vw,2.6rem); font-weight:900;
  color:var(--color-danger,#ef4444); font-variant-numeric:tabular-nums;
  background:var(--color-surface,var(--surface));
  border:2px solid var(--color-border,var(--border));
  border-radius:var(--radius-md,12px);
  padding:14px 10px; min-width:72px; display:inline-block;
  letter-spacing:3px; box-shadow:0 4px 20px color-mix(in srgb,var(--color-danger,#ef4444) 12%,transparent);
}
.pb-countdown__label{ font-size:.7rem; font-weight:800; color:var(--color-text-subtle,var(--text2)); margin-top:8px; letter-spacing:.12em; }
.pb-countdown__sep{ font-size:clamp(1.6rem,4vw,2.2rem); font-weight:900; color:var(--color-danger,#ef4444); padding-bottom:34px; align-self:flex-end; opacity:.6; }

/* ═══ مقارنة قبل/بعد ═══ */
.pb-compare{ display:flex; flex-wrap:wrap; gap:var(--hp-cards-gap,24px); max-width:1000px; margin:0 auto; }
.pb-compare__col{
  flex:1 1 350px; position:relative; overflow:hidden;
  background:var(--color-surface,var(--surface));
  border:1px solid var(--color-border,var(--border));
  border-radius:var(--hp-card-radius,16px);
  padding:var(--space-8,32px);
  box-shadow:var(--hp-card-shadow,var(--shadow-md));
}
.pb-compare__col::before{ content:''; position:absolute; top:0; inset-inline:0; height:6px; }
.pb-compare__col--bad::before{ background:var(--color-danger,#ef4444); }
.pb-compare__col--good::before{ background:var(--color-success,#22c55e); }
.pb-compare__head{ display:flex; align-items:center; gap:12px; font-size:1.3rem; font-weight:800; margin:0 0 var(--space-6,24px); }
.pb-compare__col--bad .pb-compare__head{ color:var(--color-danger,#ef4444); }
.pb-compare__col--good .pb-compare__head{ color:var(--color-success,#22c55e); }
.pb-compare__head-icon{
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:1.3rem;
}
.pb-compare__col--bad .pb-compare__head-icon{ background:color-mix(in srgb,var(--color-danger,#ef4444) 10%,transparent); }
.pb-compare__col--good .pb-compare__head-icon{ background:color-mix(in srgb,var(--color-success,#22c55e) 10%,transparent); }
.pb-compare__list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; }
.pb-compare__item{
  display:flex; align-items:flex-start; gap:12px;
  font-size:var(--hp-desc); line-height:1.6; color:var(--color-text,var(--text));
  padding:14px; background:var(--color-surface-2,var(--surface2));
  border-radius:var(--radius-md,12px); border:1px solid var(--color-border,var(--border));
}
.pb-compare__item i{ margin-top:4px; flex-shrink:0; }
.pb-compare__col--bad .pb-compare__item i{ color:var(--color-danger,#ef4444); }
.pb-compare__col--good .pb-compare__item i{ color:var(--color-success,#22c55e); }

/* ═══ ضمان / هدية / حزمة ═══ */
.pb-guarantee,.pb-bonus{
  max-width:760px; margin:0 auto; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:var(--space-5,20px);
  background:var(--color-surface,var(--surface));
  border-radius:var(--hp-card-radius,16px);
  padding:var(--space-10,40px);
}
.pb-guarantee{ border:2px dashed var(--color-primary,var(--primary)); }
.pb-bonus{ border:1px dashed var(--color-primary,var(--primary)); max-width:800px; }
.pb-guarantee__icon{
  width:80px; height:80px; border-radius:50%;
  background:var(--color-primary-subtle,var(--primary-ghost));
  display:flex; align-items:center; justify-content:center;
  font-size:2.5rem; color:var(--color-primary,var(--primary));
}
.pb-badge-pill{
  background:var(--color-primary,var(--primary)); color:var(--color-text-on-primary,#fff);
  padding:6px 20px; border-radius:999px; font-weight:900; font-size:.9rem; letter-spacing:1px;
}
.pb-guarantee__title,.pb-bonus__title{ font-size:var(--hp-card-title); font-weight:900; color:var(--color-text,var(--text)); margin:0; }
.pb-guarantee__text,.pb-bonus__text{ font-size:var(--hp-desc); color:var(--color-text-subtle,var(--text2)); margin:0; max-width:500px; line-height:1.7; }
.pb-bonus__img{ max-width:200px; border-radius:var(--radius-md,12px); box-shadow:var(--shadow-lg); }
.pb-bonus__value{ font-size:1.1rem; font-weight:900; color:var(--color-danger,#ef4444); background:color-mix(in srgb,var(--color-danger,#ef4444) 10%,transparent); padding:8px 20px; border-radius:var(--radius-sm,8px); }

.pb-bundle{
  max-width:800px; margin:0 auto;
  background:var(--color-surface,var(--surface));
  border:2px solid var(--color-primary,var(--primary));
  border-radius:var(--hp-card-radius,16px);
  padding:var(--space-10,40px);
  box-shadow:var(--hp-card-shadow,var(--shadow-lg));
}
.pb-bundle__head{ text-align:center; margin-bottom:var(--space-8,32px); }
.pb-bundle__title{ font-size:var(--hp-h2); font-weight:900; color:var(--color-text,var(--text)); margin:0 0 12px; }
.pb-bundle__title i{ color:var(--color-primary,var(--primary)); margin-inline-end:8px; }
.pb-bundle__desc{ font-size:var(--hp-sub); color:var(--color-text-subtle,var(--text2)); margin:0; }
.pb-bundle__items{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; }
.pb-bundle__item{
  display:flex; align-items:flex-start; gap:12px; padding:16px;
  background:var(--color-surface-2,var(--surface2));
  border-radius:var(--radius-md,12px); border:1px solid var(--color-border,var(--border));
}
.pb-bundle__item i{ color:var(--color-primary,var(--primary)); margin-top:4px; flex-shrink:0; }
.pb-bundle__item span{ font-size:var(--hp-desc); font-weight:700; color:var(--color-text,var(--text)); }

/* ═══ بطاقة المؤلف ═══ */
.pb-author{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-10,40px);
  max-width:900px; margin:0 auto;
  background:var(--color-surface,var(--surface));
  border:1px solid var(--color-border,var(--border));
  border-radius:var(--hp-card-radius,16px);
  padding:var(--space-10,40px);
  box-shadow:var(--hp-card-shadow,var(--shadow-md));
}
.pb-author__media{ flex:1 1 280px; }
.pb-author__avatar{
  width:100%; max-width:280px; aspect-ratio:1/1; margin:0 auto;
  border-radius:50%; overflow:hidden;
  border:6px solid var(--color-surface-2,var(--surface2));
  box-shadow:var(--shadow-lg);
}
.pb-author__avatar img{ width:100%; height:100%; object-fit:cover; }
.pb-author__initials{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--color-primary,var(--primary)), color-mix(in srgb,var(--color-primary,var(--primary)) 60%,var(--color-text,var(--text))));
  color:var(--color-text-on-primary,#fff); font-size:4rem; font-weight:900;
}
.pb-author__body{ flex:2 1 400px; text-align:start; }
.pb-author__name{
  font-size:clamp(1.4rem,3vw,2rem); font-weight:900; color:var(--color-text,var(--text));
  margin:0 0 16px; position:relative; padding-bottom:16px;
}
.pb-author__name::after{
  content:''; position:absolute; bottom:0; inset-inline-start:0;
  width:60px; height:4px; border-radius:2px;
  background:linear-gradient(90deg, var(--color-primary,var(--primary)), color-mix(in srgb,var(--color-primary,var(--primary)) 40%,transparent));
}
.pb-author__text{ font-size:var(--hp-desc); line-height:1.8; color:var(--color-text,var(--text)); margin:0 0 20px; }
.pb-author__sig{ max-height:60px; margin-top:16px; opacity:.8; }

/* ═══ منهج كورس ═══ */
.pb-curriculum{ max-width:780px; margin:0 auto; }
.pb-curriculum__meta{ display:flex; gap:24px; flex-wrap:wrap; margin-bottom:var(--space-6,24px); }
.pb-curriculum__meta span{ font-size:var(--text-sm,.82rem); color:var(--color-text-subtle,var(--text2)); display:flex; align-items:center; gap:7px; }
.pb-curriculum__meta i{ color:var(--color-primary,var(--primary)); }
.pb-curriculum__module{
  border:1px solid var(--color-border,var(--border));
  border-radius:var(--radius-md,12px); margin-bottom:8px; overflow:hidden;
  background:var(--color-surface,var(--surface));
}
.pb-curriculum__module summary{
  list-style:none; cursor:pointer; padding:16px 18px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  user-select:none;
}
.pb-curriculum__module summary::-webkit-details-marker{ display:none; }
.pb-curriculum__module-head{ display:flex; align-items:center; gap:12px; min-width:0; }
.pb-curriculum__num{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:var(--radius-sm,8px); flex-shrink:0;
  background:var(--color-primary-subtle,var(--primary-ghost));
  color:var(--color-primary,var(--primary));
  font-size:.78rem; font-weight:900;
}
.pb-curriculum__module-title{ font-size:.95rem; font-weight:700; color:var(--color-text,var(--text)); }
.pb-curriculum__module-side{ display:flex; align-items:center; gap:10px; flex-shrink:0; font-size:.72rem; color:var(--color-text-subtle,var(--text2)); }
.pb-curriculum__module[open] summary .pb-curriculum__chevron{ transform:rotate(180deg); }
.pb-curriculum__chevron{ color:var(--color-text-subtle,var(--text2)); font-size:1.1rem; transition:transform .2s; }
.pb-curriculum__lesson{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 18px; border-top:1px solid var(--color-border,var(--border));
}
.pb-curriculum__lesson-name{ display:flex; align-items:center; gap:10px; font-size:.88rem; color:var(--color-text,var(--text)); }
.pb-curriculum__lesson-name i{ color:var(--color-primary,var(--primary)); flex-shrink:0; }
.pb-curriculum__lesson-dur{ font-size:.72rem; color:var(--color-text-subtle,var(--text2)); white-space:nowrap; font-variant-numeric:tabular-nums; }
.pb-curriculum__empty{ padding:14px 18px; font-size:.85rem; color:var(--color-text-subtle,var(--text2)); }

/* ═══ قائمة قيمة / جمهور ═══ */
.pb-list{ max-width:700px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.pb-list__item{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:16px 24px;
  background:var(--color-surface,var(--surface));
  border-radius:var(--radius-md,12px); border:1px solid var(--color-border,var(--border));
}
.pb-list__item-main{ display:flex; align-items:center; gap:12px; min-width:0; }
.pb-list__icon{ color:var(--color-primary,var(--primary)); font-size:1.1rem; flex-shrink:0; }
.pb-list__text{ font-size:var(--hp-desc); font-weight:700; color:var(--color-text,var(--text)); }
.pb-list__price{ font-size:var(--hp-desc); font-weight:900; color:var(--color-text-subtle,var(--text2)); text-decoration:line-through; flex-shrink:0; }
.pb-list__icon-wrap{
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  background:var(--color-primary-subtle,var(--primary-ghost));
  display:flex; align-items:center; justify-content:center;
  color:var(--color-primary,var(--primary)); font-size:1.2rem;
}

/* ═══ شريط شراء ثابت (يُفعّل من app.js عبر data-sticky-bar) ═══ */
.pb-sticky-bar{
  position:fixed; bottom:0; inset-inline:0; z-index:9998;
  background:var(--color-surface,var(--surface));
  border-top:2px solid var(--color-border,var(--border));
  padding:12px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  box-shadow:0 -8px 32px rgba(0,0,0,.15);
  transform:translateY(100%);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.pb-sticky-bar.is-visible{ transform:translateY(0); }
.pb-sticky-bar__info{ display:flex; align-items:center; gap:16px; min-width:0; }
.pb-sticky-bar__name{ font-size:.9rem; font-weight:700; color:var(--color-text,var(--text)); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:240px; }
.pb-sticky-bar__price{ font-size:1.1rem; font-weight:900; color:var(--color-text,var(--text)); font-variant-numeric:tabular-nums; }
.pb-sticky-bar__price-old{ text-decoration:line-through; opacity:.5; font-size:.85rem; margin-inline-end:8px; font-variant-numeric:tabular-nums; }
.pb-sticky-bar__cta{
  display:inline-flex; align-items:center; gap:6px; flex-shrink:0;
  background:var(--color-primary,var(--primary)); color:var(--color-text-on-primary,#fff);
  padding:11px 32px; border-radius:var(--radius-sm,10px);
  font-size:.92rem; font-weight:800; text-decoration:none;
  box-shadow:0 4px 16px color-mix(in srgb,var(--color-primary,var(--primary)) 40%,transparent);
  transition:transform .15s, opacity .15s;
}
.pb-sticky-bar__cta:hover{ transform:scale(1.03); }

/* ═══ زر شراء منتج ═══ */
.pb-buy{ text-align:center; }
.pb-buy--start{ text-align:start; }
.pb-buy--end{ text-align:end; }
.pb-buy__inner{ max-width:500px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:8px; }
.pb-buy--start .pb-buy__inner{ align-items:flex-start; margin-inline:0; }
.pb-buy--end .pb-buy__inner{ align-items:flex-end; margin-inline:auto 0; }
.pb-buy__price{ margin-bottom:16px; font-variant-numeric:tabular-nums; }
.pb-buy__price-old{ text-decoration:line-through; opacity:.5; font-size:1rem; margin-inline-end:12px; }
.pb-buy__price-now{ font-size:var(--hp-price-num,clamp(1.8rem,4vw,2.4rem)); font-weight:900; color:var(--color-primary,var(--primary)); }
.pb-buy__btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:16px 48px; border-radius:var(--radius-sm,10px); border:none;
  font-size:clamp(1.1rem,2.5vw,1.4rem); font-weight:800;
  text-decoration:none; cursor:pointer; font-family:inherit;
  background:var(--color-primary,var(--primary)); color:var(--color-text-on-primary,#fff);
  box-shadow:0 4px 16px color-mix(in srgb,var(--color-primary,var(--primary)) 40%,transparent);
  transition:transform .15s, opacity .15s;
}
.pb-buy__btn:hover{ transform:scale(1.03); opacity:.95; }
.pb-buy__btn--danger{ background:var(--color-danger,#ef4444); box-shadow:0 4px 16px color-mix(in srgb,var(--color-danger,#ef4444) 30%,transparent); }
.pb-buy__btn--success{ background:var(--color-success,#22c55e); box-shadow:0 4px 16px color-mix(in srgb,var(--color-success,#22c55e) 30%,transparent); }
.pb-buy__btn--outline{ background:transparent; color:var(--color-primary,var(--primary)); border:2px solid var(--color-primary,var(--primary)); box-shadow:none; }
.pb-buy__subtitle{ font-size:.85rem; color:var(--color-text-subtle,var(--text2)); margin-top:12px; }
.pb-buy__notice{
  max-width:500px; margin:0 auto; padding:24px 32px;
  background:var(--color-surface,var(--surface));
  border:1px solid var(--color-border,var(--border));
  border-radius:var(--radius-md,12px);
  color:var(--color-text-subtle,var(--text2)); font-size:1rem; text-align:center;
}
.pb-buy__notice i{ font-size:1.4rem; vertical-align:middle; margin-inline-end:8px; opacity:.6; }

/* order-confirmation block — بطاقة حالة الطلب في صفحات الشكر (data-order-confirm → app-landing.js) */
.pb-confirm{ text-align:center; }
.pb-confirm__card{
  max-width:520px; margin:0 auto; padding:32px 24px;
  background:var(--color-surface,var(--surface));
  border:1px solid var(--color-border,var(--border));
  border-radius:var(--radius-lg,16px);
  box-shadow:0 12px 40px rgba(15,23,42,.08);
}
.pb-confirm--preview .pb-confirm__card{ border-style:dashed; box-shadow:none; }
.pb-confirm__icon{ width:64px; height:64px; margin:0 auto 16px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:30px; }
.pb-confirm__icon--success{ background:#ecfdf5; color:#059669; }
.pb-confirm__icon--pending{ background:#eff6ff; color:#2563eb; }
.pb-confirm__icon--error{ background:#fef2f2; color:#dc2626; }
.pb-confirm__spinner{ width:32px; height:32px; border:3px solid var(--color-border,#e2e8f0); border-top-color:var(--color-primary,var(--primary)); border-radius:50%; animation:pb-confirm-spin .8s linear infinite; }
@keyframes pb-confirm-spin{ to{ transform:rotate(360deg); } }
.pb-confirm__title{ font-size:1.3rem; font-weight:900; margin-bottom:6px; color:var(--color-text,#0f172a); }
.pb-confirm__msg{ color:var(--color-text-subtle,var(--text2)); font-size:.95rem; margin-bottom:18px; line-height:1.6; }
.pb-confirm__ref{ display:inline-flex; gap:8px; align-items:center; background:var(--color-surface-2,#f8fafc); padding:8px 16px; border-radius:8px; font-size:.85rem; color:var(--color-text-subtle,var(--text2)); }
.pb-confirm__ref strong{ color:var(--color-primary,var(--primary)); }
.pb-confirm__amount{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 16px; background:var(--color-surface-2,#f8fafc); border-radius:10px; margin-top:12px; }
.pb-confirm__amount span{ font-size:.9rem; color:var(--color-text-subtle,var(--text2)); font-weight:700; }
.pb-confirm__amount strong{ font-size:1.15rem; font-weight:900; color:var(--color-text,#0f172a); font-variant-numeric:tabular-nums; }

/* ═══ إضافات على كلاسات hp المشتركة (blocks تستخدمها) ═══ */

/* خطة مميزة داخل شبكة الأسعار */
.hp-pricing__card--highlighted{ border-color:var(--color-primary,var(--primary)); box-shadow:0 12px 32px color-mix(in srgb,var(--color-primary,var(--primary)) 15%,transparent); }
.hp-pricing__card-badge{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:var(--color-primary,var(--primary)); color:var(--color-text-on-primary,#fff);
  padding:5px 18px; border-radius:999px; font-size:.78rem; font-weight:800;
  box-shadow:0 4px 12px color-mix(in srgb,var(--color-primary,var(--primary)) 30%,transparent);
  white-space:nowrap;
}

/* أيقونة اختيارية فوق رقم الإحصائية */
.hp-stat__icon{ font-size:1.6rem; color:var(--color-primary,var(--primary)); margin-bottom:var(--space-2,8px); }

/* حدّ علوي ملوّن اختياري للبطاقة (مثلاً بطاقات خدمات مصنّفة) */
.hp-card--top{ border-top:4px solid var(--hp-card-accent, var(--color-primary,var(--primary))); }
.hp-card--top-warn{ --hp-card-accent:var(--warn,var(--color-warning,#F59E0B)); }
.hp-card--top-success{ --hp-card-accent:var(--success,var(--color-success,#10B981)); }
.hp-card--top-danger{ --hp-card-accent:var(--danger,var(--color-danger,#EF4444)); }
.hp-card--top-accent{ --hp-card-accent:var(--accent,var(--color-primary,var(--primary))); }

/* CTA تحت مشغل الفيديو */
.hp-video__cta{ margin-top:var(--space-5,20px); }

/* ═══ صفحات المحتوى الثابت — /about + /contact (تستخدم نفس النظام) ═══ */

/* بطاقة قصة "من نحن": صورة جانبية + نص */
.pb-story{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-6,24px);
  padding:var(--space-6,24px); margin-bottom:var(--space-6,24px);
}
.pb-story__media{ flex:1 1 240px; min-width:0; }
.pb-story__media img{ display:block; width:100%; border-radius:calc(var(--hp-card-radius,16px) - 6px); }
.pb-story__body{ flex:2 1 300px; min-width:0; }
.pb-story__text{ white-space:pre-wrap; }

/* نموذج تواصل داخل بطاقة */
.pb-contact-form{ max-width:760px; margin:0 auto var(--space-6,24px); padding:clamp(20px,4vw,36px); }
.pb-contact-form__header{ margin-bottom:var(--space-6,24px); }
.pb-contact-form__title{ font-size:var(--hp-card-title); font-weight:800; color:var(--color-text,var(--text)); margin:0 0 8px; }
.pb-contact-form__subtitle{ font-size:var(--hp-desc); color:var(--color-text-subtle,var(--text2)); margin:0; line-height:1.7; }
.pb-contact-form__row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:0 var(--space-4,16px); }
.pb-contact-form__trust{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:var(--space-5,20px); font-size:var(--text-sm,.85rem);
  color:var(--color-text-subtle,var(--text2));
}
.pb-contact-form__trust i{ font-size:18px; color:var(--color-primary,var(--primary)); }

/* pb-form داخل بطاقة: بدون خلفية/إطار خاص */
.pb-form--bare{ background:none; border:0; box-shadow:none; padding:0; }
.pb-form__req{ color:var(--color-danger,#ef4444); }
.pb-form__counter{ text-align:end; font-size:.75rem; color:var(--color-text-subtle,var(--text2)); margin-top:4px; font-variant-numeric:tabular-nums; }
.pb-form__hp{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* خريطة التواصل */
.pb-map{
  background:var(--color-surface,var(--surface));
  border:1px solid color-mix(in srgb,var(--color-border,var(--border)) 80%,transparent);
  border-radius:var(--hp-card-radius,16px); overflow:hidden;
  margin-top:var(--space-6,24px);
  box-shadow:0 2px 8px rgba(0,0,0,.02);
}
.pb-map__frame{ border:none; display:block; }
.pb-map__placeholder{ padding:28px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:12px; }
.pb-map__placeholder > i{ font-size:2.5rem; color:var(--color-primary,var(--primary)); }
.pb-map__placeholder h4{ margin:0; font-size:1.1rem; color:var(--color-text,var(--text)); }

/* تذكرة الضيف — badge نوع التذكرة + مؤشر التحديث التلقائي */
.guest-ticket-card__badge{ background:var(--surface2); color:var(--text2); font-size:11px; padding:4px 10px; border-radius:999px; font-weight:700; }
.guest-ticket-card__auto-refresh.is-new{ opacity:1; font-weight:700; color:var(--color-primary,var(--primary)); }

/* ═══ صفحة الهبوط العارية (landing bare shell) ═══ */
body[data-landing-bare]{ margin:0; padding:0; }
.landing-bare-page{ width:100%; min-height:100vh; box-sizing:border-box; }

/* ═══ مودالات الصفحات العارية (lead + checkout) — السلوك مفوَّض في app.js ═══ */
.pb-lead-dialog{
  border:none; border-radius:16px; padding:0;
  max-width:480px; width:calc(100vw - 32px);
  background:var(--color-surface,#fff);
  box-shadow:0 20px 60px rgba(0,0,0,.15);
}
.pb-dialog__header{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 24px; border-bottom:1px solid var(--color-border,#e5e7eb);
}
.pb-dialog__title{ margin:0; font-size:18px; font-weight:700; color:var(--color-text); }
.pb-dialog__close{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; padding:0;
  border:1px solid var(--color-border,#e5e7eb); border-radius:var(--radius-sm,8px);
  background:var(--color-surface-2,#f8fafc); color:var(--color-text-subtle);
  font-size:18px; font-weight:600; line-height:1; cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
}
.pb-dialog__close:hover{background:var(--color-danger-subtle,#fee2e2);color:var(--color-danger,#ef4444);border-color:var(--color-danger-border,#fecaca)}
.pb-dialog__close:focus-visible{outline:2px solid var(--color-primary,#1F75FE);outline-offset:2px}
.pb-lead-form{ padding:24px; display:flex; flex-direction:column; gap:14px; }
.pb-lead-label{ display:block; font-size:13px; font-weight:600; color:var(--color-text); margin-bottom:4px; }
.pb-lead-req{ color:var(--color-danger,#ef4444); }
.pb-lead-input{
  width:100%; height:44px; padding:0 12px; box-sizing:border-box;
  border:1px solid var(--color-border,#e5e7eb); border-radius:8px;
  font-size:14px; font-family:inherit;
  background:var(--color-surface,#fff); color:var(--color-text);
}
textarea.pb-lead-input{ height:auto; padding:10px 12px; resize:vertical; }
.pb-lead-input:focus{ outline:none; border-color:var(--color-primary,#1F75FE); box-shadow:0 0 0 3px var(--color-primary-subtle,rgba(31,117,254,.12)); }
.pb-lead-submit{
  height:40px; border:none; border-radius:10px;
  background:var(--color-primary,#1F75FE); color:#fff;
  font-size:15px; font-weight:600; cursor:pointer; font-family:inherit;
  transition:opacity .15s;
}
.pb-lead-submit:disabled{ opacity:.7; }
/* honeypot anti-bot — مخفي بصرياً وتقنياً */
.pb-hp{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* checkout-dialog: عريض على الديسكتوب لاستيعاب layout الثنائي، يملأ الشاشة على الموبايل */
.checkout-dialog{
  border:none; border-radius:16px; padding:0; margin:auto;
  max-width:min(560px,calc(100vw - 32px)); width:100%; max-height:90vh;
  background:var(--color-surface,#fff);
  box-shadow:0 20px 60px rgba(0,0,0,.15);
  overflow:hidden;
}
.checkout-dialog::backdrop{ background:rgba(0,0,0,.5); backdrop-filter:blur(2px); }
.checkout-dialog__header{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 20px; border-bottom:1px solid var(--color-border,#e5e7eb); flex-shrink:0;
}
.checkout-dialog__title{ margin:0; font-size:15px; font-weight:700; color:var(--color-text); }
.checkout-dialog__close{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; padding:0;
  border:1px solid var(--color-border,#e5e7eb); border-radius:var(--radius-sm,8px);
  background:var(--color-surface-2,#f8fafc); color:var(--color-text-subtle);
  font-size:18px; font-weight:600; line-height:1; cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
}
.checkout-dialog__close:hover{background:var(--color-danger-subtle,#fee2e2);color:var(--color-danger,#ef4444);border-color:var(--color-danger-border,#fecaca)}
.checkout-dialog__close:focus-visible{outline:2px solid var(--color-primary,#1F75FE);outline-offset:2px}
.checkout-dialog__body{ padding:0; flex:1; overflow:hidden; display:flex; }
.checkout-dialog__iframe{ width:100%; height:100%; border:none; min-height:600px; }
@media(max-width:1023px){
  .checkout-dialog{ max-width:calc(100vw - 24px); max-height:92vh; }
  .checkout-dialog__body{ min-height:calc(92vh - 48px); }
}
@media(max-width:640px){
  .checkout-dialog{ max-width:100vw; width:100vw; max-height:100vh; height:100vh; border-radius:0; }
  .checkout-dialog__body{ min-height:calc(100vh - 48px); }
}


/* ════════════════════════════════════════════════════════════════
   نظام الجداول المركزي الموحّد (data-table v2)
   مصدر وحيد: packages/ui/src/styles/table.styles.js
   يُستهلك من: adminStyles (apps/admin) + baseStyles (tenant/consumer)
   ════════════════════════════════════════════════════════════════ */

/* ── Wrappers ─────────────────────────────────────────────── */
.table-wrap,
.table-container,
.table-responsive{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--border,var(--color-border,#e2e8f0)) transparent}
.table-wrap::-webkit-scrollbar,
.table-container::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar{height:6px}
.table-wrap::-webkit-scrollbar-thumb,
.table-container::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb{background:var(--border,var(--color-border,#e2e8f0));border-radius:3px}
.table-card{background:var(--surface,var(--color-surface,#fff));border:1px solid var(--border,var(--color-border,#e2e8f0));border-radius:var(--radius-md,0);overflow:hidden}

/* ── Table base (لا يُطبق على table عام — فقط .data-table) ── */
.data-table{width:100%;border-collapse:collapse;text-align:right;min-width:600px;font-size:var(--text-sm,0.875rem);font-family:inherit}

/* ── Header cells (th) ────────────────────────────────────── */
.data-table th{padding:10px 16px;background:var(--surface2,var(--color-surface-2,#f8fafc));color:var(--text2,var(--color-text-muted,#64748b));font-weight:600;font-size:var(--text-xs,0.75rem);text-transform:uppercase;letter-spacing:0.04em;border-bottom:1px solid var(--border,var(--color-border,#e2e8f0));white-space:nowrap;position:sticky;top:0;z-index:2}
.data-table thead tr:last-child th{border-bottom:2px solid var(--border,var(--color-border,#e2e8f0))}

/* ── Body cells (td) ──────────────────────────────────────── */
.data-table td{padding:11px 16px;border-bottom:1px solid var(--border,var(--color-border,#e2e8f0));color:var(--text,var(--color-text,#0f172a));vertical-align:middle;font-size:var(--text-sm,0.875rem);white-space:nowrap;max-width:340px;overflow:hidden;text-overflow:ellipsis;line-height:1.5}

/* ── Cell content variants ────────────────────────────────── */
.data-table td strong{font-weight:600;color:var(--text,var(--color-text,#0f172a));white-space:nowrap;max-width:280px;overflow:hidden;text-overflow:ellipsis;display:inline-block;vertical-align:middle;font-size:var(--text-sm,0.875rem)}
.data-table td a{color:var(--primary,var(--color-primary,#1F75FE));text-decoration:none;font-size:var(--text-sm,0.875rem);white-space:nowrap;max-width:280px;overflow:hidden;text-overflow:ellipsis;display:inline-block;vertical-align:middle}
.data-table td a:hover{text-decoration:underline}
.data-table td small{display:block;margin-top:2px;color:var(--text3,var(--color-text-muted,#94a3b8));font-size:var(--text-xs,0.75rem);font-weight:400;white-space:nowrap;max-width:280px;overflow:hidden;text-overflow:ellipsis}
.data-table td code{direction:ltr;font-size:var(--text-sm,0.875rem);font-family:var(--font-num,monospace);background:var(--surface2,var(--color-surface-2,#f8fafc));padding:2px 6px;border-radius:var(--radius-xs,3px);border:1px solid var(--border,var(--color-border,#e2e8f0));color:var(--text,var(--color-text,#0f172a));white-space:nowrap}
.data-table td .badge{font-size:var(--text-xs,0.75rem);white-space:nowrap}
.data-table td .hint{color:var(--text3,var(--color-text-muted,#94a3b8));font-size:var(--text-xs,0.75rem);white-space:nowrap}

/* ─ـ خلية avatar-row: صورة + نص مع هامش واضح ── */
.data-table .avatar-row{display:inline-flex;align-items:center;gap:12px;min-width:0;max-width:340px}
.data-table .avatar-row > :first-child{flex-shrink:0}
.data-table .avatar-row > :last-child,
.data-table .avatar-row > span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-inline-start:0}

/* ── Row states ───────────────────────────────────────────── */
.data-table tbody tr{transition:background 0.15s ease}
.data-table tbody tr:hover td{background:var(--surface2,var(--color-surface-2,#f8fafc))}
.data-table tbody tr:last-child td{border-bottom:0}

/* ── Sticky header (اختياري — يُفعّل بإضافة class="data-table--sticky") ── */
.data-table--sticky thead th{position:sticky;top:0;z-index:3;box-shadow:0 1px 0 var(--border,var(--color-border,#e2e8f0))}

/* ── Zebra (اختياري — يُفعّل بإضافة class="data-table--zebra") ── */
.data-table--zebra tbody tr:nth-child(even) td{background:var(--surface1,var(--color-surface-1,#fafafa))}
.data-table--zebra tbody tr:nth-child(even):hover td{background:var(--surface2,var(--color-surface-2,#f1f5f9))}

/* ── Compact (اختياري — جداول كثيفة الصفوف) ── */
.data-table--compact td{padding:7px 12px}
.data-table--compact th{padding:8px 12px}

/* ── Comfortable (اختياري — جداول واسعة الخلايا) ── */
.data-table--comfortable td{padding:16px 20px}
.data-table--comfortable th{padding:14px 20px}

/* ── Empty state row ──────────────────────────────────────── */
.data-table .empty-row td{padding:48px 24px;text-align:center;color:var(--text3,var(--color-text-muted,#94a3b8));font-size:var(--text-sm,0.875rem)}
.data-table .empty-row td .empty-state{padding:0;margin:0}

/* ── Action cell (أزرار إجراءات) ──────────────────────────── */
.data-table .action-cell,
.data-table .table-actions{white-space:nowrap;text-align:center;vertical-align:middle}
.data-table .action-cell .button,
.data-table .table-actions .button{margin:0 2px}

/* ── Copyable cells ───────────────────────────────────────── */
.data-table [data-copy]{cursor:pointer;transition:color 0.15s ease}
.data-table [data-copy]:hover{color:var(--primary,var(--color-primary,#1F75FE))}

/* ── Inputs inside table (forms in tables — google/ads pages) ── */
.data-table input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.data-table select,
.data-table textarea{width:100%;min-width:120px;padding:6px 10px;border:1px solid var(--border2,var(--color-border-strong,#cbd5e1));border-radius:var(--radius-sm,4px);background:var(--surface,var(--color-surface,#fff));color:var(--text,var(--color-text,#0f172a));font:inherit;font-size:var(--text-sm,0.875rem);outline:none;transition:border-color 0.15s ease,box-shadow 0.15s ease}
.data-table input[pattern]{font-family:var(--font-num,monospace);direction:ltr}
.data-table input:focus,
.data-table select:focus,
.data-table textarea:focus{border-color:var(--primary,var(--color-primary,#1F75FE));box-shadow:0 0 0 2px color-mix(in srgb,var(--primary,var(--color-primary,#1F75FE)) 20%,transparent)}
.data-table input::placeholder,
.data-table textarea::placeholder{color:var(--text3,var(--color-text-muted,#94a3b8))}
.data-table abbr[title]{text-decoration:underline dotted;cursor:help;border-bottom:0}

/* ── Dark mode ────────────────────────────────────────────── */
[data-theme="dark"] .data-table th{background:var(--surface2,#1e293b) !important;color:var(--text2,#94a3b8) !important;border-bottom-color:var(--border,#334155) !important}
[data-theme="dark"] .data-table td{color:var(--text,#e2e8f0) !important;border-bottom-color:var(--border,#334155) !important}
[data-theme="dark"] .data-table tbody tr:hover td{background:rgba(255,255,255,0.03) !important}
[data-theme="dark"] .data-table td strong{color:var(--text,#e2e8f0) !important}
[data-theme="dark"] .data-table td small{color:var(--text3,#64748b) !important}
[data-theme="dark"] .data-table td code{background:var(--surface2,#1e293b) !important;border-color:var(--border,#334155) !important;color:var(--text,#e2e8f0) !important}
[data-theme="dark"] .data-table--zebra tbody tr:nth-child(even) td{background:rgba(255,255,255,0.02) !important}
[data-theme="dark"] .data-table input,
[data-theme="dark"] .data-table select,
[data-theme="dark"] .data-table textarea{background:var(--surface2,#1e293b) !important;border-color:var(--border,#334155) !important;color:var(--text,#e2e8f0) !important}

/* ── Responsive ───────────────────────────────────────────── */
@media(max-width:768px){
  .data-table{min-width:500px}
  .data-table th{padding:9px 12px;font-size:var(--text-xs,0.7rem)}
  .data-table td{padding:10px 12px;font-size:var(--text-sm,0.8125rem);max-width:200px}
  .data-table td strong,
  .data-table td a{max-width:180px}
  .data-table td small{max-width:180px}
  .data-table .avatar-row{gap:10px;max-width:220px}
}
@media(max-width:480px){
  .data-table{min-width:400px}
  .data-table th{padding:8px 10px}
  .data-table td{padding:9px 10px;max-width:160px}
  .data-table td strong,
  .data-table td a{max-width:140px}
  .data-table .avatar-row{gap:8px;max-width:180px}
}

/* ─── نظام الجداول المتجاوب (docs/PLAN-responsive-ui.md §4.3) ──────────────
   آليتان مصرّحتان يختار كل جدول واحدة حسب نوعه:

   أ) أولوية الأعمدة — للجداول المعرفية: th[data-col-priority="secondary"]
      يُخفي العمود عند ≤768px و"tertiary" عند ≤1023px. السكربت
      app-responsive-tables.js يمرّر السمة لخلايا العمود ويضيف
      .data-table--responsive الذي يلغي min-width الإجبارية (بعد إخفاء
      الأعمدة لا داعي لسكرول أفقي).

   ب) بطاقات — للجداول التشغيلية (ديون/فواتير/مبيعات): [data-table-cards]
      عند ≤768px يحوّل كل صف لبطاقة (label:value مكدّسة). كل البيانات تبقى
      ظاهرة — الأفضل من إخفاء أعمدة حين كلها مهمة. السكربت يعبّئ
      td[data-label] تلقائياً من نصوص الـth. */

/* ── (أ) أولوية الأعمدة ── */
@media(max-width:1023px){
  .data-table th[data-col-priority="tertiary"],
  .data-table td[data-col-priority="tertiary"]{display:none}
}
@media(max-width:768px){
  .data-table--responsive{min-width:0}
  .data-table th[data-col-priority="secondary"],
  .data-table td[data-col-priority="secondary"],
  .data-table th[data-col-priority="tertiary"],
  .data-table td[data-col-priority="tertiary"]{display:none}
}

/* ── (ب) بطاقات الموبايل ── */
@media(max-width:768px){
  [data-table-cards]{overflow-x:visible}
  [data-table-cards] .data-table{display:block;min-width:0;border:0}
  [data-table-cards] .data-table thead{display:none}
  [data-table-cards] .data-table tbody{display:block}
  [data-table-cards] .data-table tbody tr{display:block;background:var(--surface,var(--color-surface,#fff));border:1px solid var(--border,var(--color-border,#e2e8f0));border-radius:var(--radius-md,8px);padding:6px 14px;margin-bottom:12px}
  [data-table-cards] .data-table tbody tr:last-child{margin-bottom:0}
  [data-table-cards] .data-table tbody tr:hover td{background:transparent}
  [data-table-cards] .data-table td{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--border,var(--color-border,#e2e8f0));max-width:none;white-space:normal;text-align:start}
  [data-table-cards] .data-table td:last-child{border-bottom:0}
  [data-table-cards] .data-table td::before{content:attr(data-label);flex-shrink:0;font-size:var(--text-xs,0.8125rem);font-weight:600;color:var(--text3,var(--color-text-muted,#94a3b8));text-align:start}
  [data-table-cards] .data-table td strong,
  [data-table-cards] .data-table td a{max-width:none;white-space:normal}
  /* بطاقة تُظهر كل الأعمدة — الأولوية لا تخفي شيئاً داخل البطاقات */
  [data-table-cards] .data-table td[data-col-priority]{display:flex}
  [data-table-cards] .data-table td:empty{display:none}
  /* خلية إجراءات: صف أفقي بلا عنوان مُلصق */
  [data-table-cards] .data-table td[data-actions]{justify-content:flex-end}
  [data-table-cards] .data-table td[data-actions]::before{display:none}
}

/* ── عمود إجراءات مثبّت (اختياري — .table-wrap--sticky-actions) ──────────────
   آخر عمود يلتصق بطرف inline-end عند السكرول الأفقي — الأزرار لا تضيع
   في الجداول العريضة على الديسكتوب والتابلت. */
.table-wrap--sticky-actions{overflow-x:auto}
.table-wrap--sticky-actions .data-table th:last-child,
.table-wrap--sticky-actions .data-table td:last-child{position:sticky;inset-inline-end:0;background:var(--surface,var(--color-surface,#fff));border-inline-start:1px solid var(--border,var(--color-border,#e2e8f0));z-index:1}
.table-wrap--sticky-actions .data-table th:last-child{background:var(--surface2,var(--color-surface-2,#f8fafc));z-index:3}


.trash-panel{min-height:280px}
.trash-table-wrap{overflow:auto}
.trash-table{min-width:920px}
.trash-table th,.trash-table td{vertical-align:middle}
.trash-table__select{width:44px;text-align:center}
.trash-table__name{min-width:180px;max-width:320px}
.trash-table__name strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trash-item__reason{display:block;color:var(--text3,var(--color-text-muted));font-size:var(--text-xs,.8rem);margin-top:3px}
.trash-table__actor,.trash-table__date{color:var(--text2,var(--color-text-muted));font-size:var(--text-sm,.875rem)}
.trash-table__actions{display:flex;gap:6px;flex-wrap:wrap;min-width:180px}
.trash-type-badge{background:var(--surface2,var(--color-surface-2));color:var(--text2,var(--color-text))}
.trash-retention{display:inline-flex;align-items:center;height:24px;padding:0 8px;border-radius:0;background:var(--surface2,var(--color-surface-2));font-size:var(--text-xs,.8rem);font-weight:700;color:var(--text2,var(--color-text))}
.trash-retention--warn{background:var(--color-warning-subtle,#fff7ed);color:var(--color-warning,#b45309)}
.trash-retention--danger{background:var(--color-danger-subtle,#fee2e2);color:var(--danger,var(--color-danger,#b91c1c))}
tr[data-trash-row]{transition:opacity .25s}
tr[data-trash-row].selected{background:var(--color-primary-subtle,rgba(31,117,254,.08))}
.trash-toolbar{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.trash-toolbar .action-toolbar__spacer{flex:1}
.trash-toolbar__count{color:var(--text3,var(--color-text-muted));font-size:var(--text-sm,.875rem);white-space:nowrap}
.trash-toolbar button:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:768px){.trash-toolbar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}.trash-toolbar::-webkit-scrollbar{display:none}.trash-toolbar button{flex:0 0 auto;white-space:nowrap}.trash-toolbar__count{flex:0 0 auto}}


  /* ── Media library ── */
  #modal-root:has(.media-library-container) .modal-content,
  #modal-root:has(.media-picker-body-layout) .modal-content {
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
  }
  #modal-root:has(.media-library-container) .modal-body,
  #modal-root:has(.media-picker-body-layout) .modal-body {
    padding: 0 !important;
  }
  .media-library-container[data-select-mode="true"] {
    padding: 0 16px 16px 16px;
    width: 100%;
    box-sizing: border-box;
  }
  .media-card:hover {
    border-color: var(--primary) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  }
  .media-card.selected, .media-row.selected {
    border-color: var(--primary) !important;
    background: var(--primary-ghost) !important;
  }
  .media-card.select-disabled, .media-row.select-disabled {
    opacity: 0.4;
    cursor: not-allowed !important;
  }
  .media-card.select-disabled .media-card__thumb, .media-row.select-disabled td {
    cursor: not-allowed !important;
    pointer-events: none;
  }
  .media-library-inline-toolbar .topbar-filters { flex: 1; }

  /* ── Media card grid (1:1 square thumbnails) ── */
  .media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    margin-top: 16px;
  }
  .media-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 8px);
    background: var(--surface);
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    cursor: default;
  }
  .media-card__thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--surface2);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .media-card__thumb[data-media-preview]:hover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.25);
  }
  .media-card__thumb[data-media-preview]:hover .media-card__play,
  .media-card__thumb[data-media-preview]:hover .media-card__icon {
    transform: scale(1.15);
  }
  /* A11Y-001: مؤشر تركيز مرئي للعناصر التفاعلية غير الزرية (thumb/file-name) */
  .media-card__thumb:focus-visible,
  .media-file-name:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
  }
  .media-file-name:focus-visible {
    outline-offset: 2px;
    border-radius: 2px;
  }
  .media-card__icon {
    font-size: 2.5rem;
    color: var(--text3);
    transition: transform 0.15s ease;
  }
  .media-card__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 2rem;
    background: rgba(0,0,0,0.3);
    transition: transform 0.15s ease;
  }
  .media-card__dur {
    position: absolute;
    bottom: 4px;
    inset-inline-end: 4px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 3px;
    font-family: monospace;
  }
  .media-card__body {
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
  }
  .media-card__head {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .media-card__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  }
  .media-card-actions {
    padding: 8px 10px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    justify-content: center;
    overflow-x: auto;
    scrollbar-width: thin;
  }
  .media-picker-upload-bar {
    padding: 8px 0 4px;
  }
  .media-picker-upload-bar--footer {
    padding: 0;
    flex: 1;
    min-width: 0;
  }
  .media-picker-upload-bar--footer .upload-zone {
    margin: 0;
    min-height: 40px;
    padding: 6px 12px;
  }
  .media-picker-upload-bar--footer .upload-zone__label {
    padding: 0;
  }
  @media(max-width:480px) {
    .media-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
    .media-card-actions { gap: 4px; padding: 6px 8px; }
  }

  /* Media actions central styles */
  .media-card-actions .button {
    flex: 0 0 auto;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    border-radius: var(--radius-sm) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    border: 1px solid transparent !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
  }
  .media-card-actions .button svg,
  .media-card-actions .button i {
    flex-shrink: 0;
  }

  /* ── Media sections management ── */
  .section-icon-picker { display:grid; grid-template-columns:repeat(8,1fr); gap:6px; max-height:160px; overflow-y:auto; padding:8px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); }
  .section-icon-picker button { display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:1; border:1px solid transparent; border-radius:var(--radius-sm); background:var(--surface2); cursor:pointer; font-size:18px; color:var(--text2); transition:all .15s; }
  .section-icon-picker button:hover { border-color:var(--primary); color:var(--primary); }
  .section-icon-picker button.selected { border-color:var(--primary); background:var(--primary-ghost); color:var(--primary); }
  .section-form-field { margin-bottom:16px; }
  .section-form-field label { display:block; font-size:13px; font-weight:600; color:var(--text2); margin-bottom:6px; }
  .section-form-field input, .section-form-field select { width:100%; padding:8px 12px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); font-size:14px; }
  .section-form-field .hint { font-size:11px; color:var(--text3); margin-top:4px; }
  .section-slug-preview { font-size:11px; color:var(--text3); margin-top:4px; font-family:monospace; }
  .section-slug-preview code { background:var(--surface2); padding:2px 6px; border-radius:3px; }