/* =====================================================================
   rofofi — Landing / marketing stylesheet
   ---------------------------------------------------------------------
   هوية الموقع العام: أزرق رفوفي (#4870d6) على أسطح فاتحة هادئة، حوافّ
   دائرية، وظلال ناعمة منخفضة التباين. الشريط العلوي كبسولة زرقاء عائمة،
   والبطل يعرض نافذة تطبيق مائلة مع بطاقتَي إحصاء طافيتين، ثم شريط ثقة
   يتراكب على حدّ القسم. المصدر التصميمي: `.dzin/rofofi-landing.html`.

   يشترك هذا الملف بين `index.html` و`signup.html`، لذا تبقى أسماء
   التوكنز القديمة (--brand/--bg/--title/…) موجودة كأسماء مرادفة تشير إلى
   التوكنز الجديدة، وتبقى `.btn` و`.wrap` و`.eyebrow-badge` مدعومة كي لا
   تنكسر أنماط صفحة التسجيل المضمّنة.
   ===================================================================== */

:root {
    /* --- الهوية الأساسية --- */
    --primary: #4870d6;
    --primary-hover: #3960c4;
    --primary-soft: #eaf0ff;
    --primary-faint: #f5f7ff;
    --cyan: #54b6e6;
    --cyan-soft: #e9f8fd;
    --success: #1fcbb0;
    --success-soft: #e9fbf7;
    --success-ink: #13846f;
    --amber: #eba02e;
    --amber-soft: #fff6e7;
    --amber-ink: #a1660f;
    --danger: #ec7d63;
    --danger-soft: #fff0ed;
    --danger-ink: #b54c35;

    /* --- النصوص والأسطح --- */
    --ink: #1e2a45;
    --text: #53647f;
    --muted: #7c8fac;
    --line: #e4eaf2;
    --line-strong: #d9e2ee;
    --surface: #ffffff;
    --surface-soft: #f7f9fc;
    --canvas: #f6f8fb;
    --night: #1e2a45;
    --night-deep: #172137;

    /* --- الظلال والحوافّ --- */
    --shadow-sm: 0 6px 14px -5px rgba(30, 42, 69, .13), 0 0 2px rgba(30, 42, 69, .08);
    --shadow-md: 0 18px 42px -18px rgba(30, 42, 69, .25), 0 0 2px rgba(30, 42, 69, .08);
    --shadow-lg: 0 30px 70px -28px rgba(30, 42, 69, .28), 0 0 2px rgba(30, 42, 69, .08);
    --radius: 16px;
    --radius-sm: 10px;
    --font: 'Vazirmatn', 'Plus Jakarta Sans', 'Cairo', 'Segoe UI', Tahoma, sans-serif;

    /* --- أسماء مرادفة للخلف (تستهلكها signup.html) --- */
    --bg: var(--canvas);
    --surface-2: var(--surface-soft);
    --title: var(--ink);
    --border: var(--line);
    --border-strong: var(--line-strong);
    --brand: var(--primary);
    --brand-dark: var(--primary-hover);
    --brand-soft: var(--primary-soft);
    --blue: var(--primary);
    --blue-soft: var(--primary-soft);
    --green: var(--success-ink);
    --green-soft: var(--success-soft);
    --shadow: var(--shadow-md);
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 108px;
}

body {
    font-family: var(--font);
    background: var(--surface);
    color: var(--ink);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.menu-open { overflow: hidden; }

a { color: inherit; text-decoration: none; }
a, button { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
:focus-visible { outline: 3px solid rgba(84, 182, 230, .45); outline-offset: 3px; }

.skip-link {
    position: fixed; z-index: 9999; top: 12px; right: 12px;
    padding: 10px 16px; border-radius: 999px;
    color: #fff; background: var(--ink);
    transform: translateY(-150%); transition: transform .16s ease;
}
.skip-link:focus { transform: translateY(0); }

.icon {
    width: 20px; height: 20px; flex: 0 0 auto;
    fill: none; stroke: currentColor;
    stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8;
}

/* غلاف عرض عام — تستهلكه صفحة التسجيل */
.wrap { width: min(1180px, 100%); margin: 0 auto; padding: 0 24px; }

/* =====================================================================
   الشريط العلوي — كبسولة زرقاء عائمة
   ===================================================================== */
.site-header {
    position: fixed; z-index: 100; top: 22px; right: 0; left: 0;
    padding: 0 24px;
    transition: top .26s ease, transform .26s ease;
}
.site-header.is-scrolled { top: 10px; }

.nav-shell {
    position: relative;
    display: flex; align-items: center; justify-content: space-between;
    width: min(1280px, 100%); min-height: 68px; margin: 0 auto;
    padding: 10px 12px 10px 18px;
    color: #fff; background: var(--primary);
    border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px;
    box-shadow: 0 16px 38px -18px rgba(39, 74, 153, .78);
}

.brand {
    display: inline-flex; align-items: center; gap: 11px;
    min-width: max-content; font-size: 20px; font-weight: 700;
}

/* شعار رُفوفي المعتمد (حرف R خطّي بخلفية شفافة) — حلّ محلّ علامة الرفوف
   الثلاثة (حُذفت `.brand-mark` من هنا: لم يبق لها مستهلك بعد تعميم العلامة
   على الهبوط والتسجيل معاً). نسختان: `-on-dark` بيضاء لكبسولة الترويسة
   الزرقاء وللتذييل الكحلي، و`-on-light` بلون --ink للأسطح الفاتحة.
   لا حوافّ دائرية ولا ظلّ هنا: العلامة شفافة، والظلّ المستطيل كان يرسم
   شبحاً حول مربّع غير مرئي. و40px بدل 38px لتكافؤ بصري — الحرف الخطّي
   يبدو أصغر من المربّع المصمت بنفس المقاس. */
.brand-logo {
    display: block; width: 40px; height: 40px; flex: 0 0 auto;
    object-fit: contain;
}

.desktop-nav { display: flex; align-items: center; gap: 4px; }

.nav-link {
    position: relative; padding: 10px 14px;
    color: rgba(255, 255, 255, .86); font-size: 14px; font-weight: 600;
    border-radius: 999px;
    transition: color .16s ease, background .16s ease;
}
.nav-link::after {
    position: absolute; right: 14px; bottom: 6px; left: 14px; height: 1px; content: '';
    background: rgba(255, 255, 255, .9);
    transform: scaleX(0); transform-origin: right;
    transition: transform .18s ease;
}
.nav-link:hover, .nav-link[aria-current='page'] { color: #fff; background: rgba(255, 255, 255, .09); }
.nav-link:hover::after, .nav-link[aria-current='page']::after { transform: scaleX(1); }

.menu-toggle {
    display: none; width: 44px; height: 44px; padding: 0;
    color: #fff; background: rgba(255, 255, 255, .11);
    border: 1px solid rgba(255, 255, 255, .16); border-radius: 50%; cursor: pointer;
}
.menu-toggle .close-icon { display: none; }
.menu-toggle[aria-expanded='true'] .menu-icon { display: none; }
.menu-toggle[aria-expanded='true'] .close-icon { display: block; }

/* =====================================================================
   الأزرار — `.button` الجديدة و`.btn` الموروثة تشتركان في الشكل
   ===================================================================== */
.nav-cta,
.button,
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 46px; padding: 0 20px;
    font-family: inherit; font-size: 14px; font-weight: 700;
    border: 0; border-radius: 999px; cursor: pointer; white-space: nowrap;
    transition: color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.nav-cta { min-height: 44px; margin-right: 6px; color: var(--primary); background: #fff; }
.nav-cta:hover, .button:hover, .btn:hover { transform: translateY(-2px); text-decoration: none; }
.nav-cta:hover { color: var(--primary-hover); box-shadow: 0 10px 22px -14px rgba(22, 36, 73, .8); }

.button-primary,
.btn-primary {
    color: #fff; background: var(--primary);
    box-shadow: 0 12px 28px -15px rgba(72, 112, 214, .9);
}
.button-primary:hover,
.btn-primary:hover { background: var(--primary-hover); box-shadow: 0 17px 32px -16px rgba(72, 112, 214, .9); }

.button-secondary,
.btn-ghost {
    color: var(--ink); background: #fff;
    border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.button-secondary:hover,
.btn-ghost:hover { border-color: rgba(72, 112, 214, .32); box-shadow: 0 13px 28px -18px rgba(30, 42, 69, .3); }

.btn-white { color: var(--primary); background: #fff; box-shadow: 0 15px 30px -20px rgba(19, 35, 76, .85); }
.btn-white:hover { background: var(--primary-faint); }
.btn-lg { min-height: 52px; padding: 0 26px; font-size: 15px; }
.btn-block { display: flex; width: 100%; }
.btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* =====================================================================
   البطل
   ===================================================================== */
.hero {
    position: relative; isolation: isolate; overflow: hidden;
    padding: 184px 24px 0;
    background:
        radial-gradient(circle at 50% 42%, rgba(84, 182, 230, .13), transparent 31%),
        linear-gradient(180deg, #fbfcff 0%, #fff 55%, #f7f9fc 100%);
}
.hero::before {
    position: absolute; z-index: -2; inset: 88px 0 auto; height: 540px; content: '';
    background: radial-gradient(ellipse at center, rgba(72, 112, 214, .09), transparent 67%);
    filter: blur(2px);
}
.hero::after {
    position: absolute; z-index: -3; top: 140px; right: 50%;
    width: 820px; height: 620px; content: '';
    border: 1px solid rgba(72, 112, 214, .06); border-radius: 50%;
    transform: translateX(50%); pointer-events: none;
}

.hero-copy { position: relative; z-index: 5; max-width: 920px; margin: 0 auto; text-align: center; }

.system-pill,
.eyebrow-badge {
    display: inline-flex; align-items: center; gap: 10px;
    min-height: 42px; padding: 5px 8px 5px 16px;
    color: var(--text); background: rgba(255, 255, 255, .88);
    border: 1px solid var(--line); border-radius: 999px;
    box-shadow: var(--shadow-sm); font-size: 13px; font-weight: 600;
    opacity: 0; animation: heroReveal .7s 80ms cubic-bezier(.16, 1, .3, 1) forwards;
}
.system-pill strong {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 11px; color: #fff; background: var(--primary);
    border-radius: 999px; font-size: 12px; font-weight: 700;
}
.system-pill strong::before {
    width: 7px; height: 7px; content: ''; background: #fff; border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .18);
}
.eyebrow-badge { padding: 5px 16px; }
.eyebrow-badge .dot {
    width: 8px; height: 8px; flex: 0 0 auto;
    background: var(--primary); border-radius: 50%;
    box-shadow: 0 0 0 4px var(--primary-soft);
}

.hero h1 {
    max-width: 900px; margin: 28px auto 20px;
    color: var(--ink); font-size: clamp(2.6rem, 5vw, 4.4rem); font-weight: 800;
    /* تباعد موجب صغير: ذيل الميم في Cairo عريض ويلامس الحرف المجاور بلا فاصل */
    letter-spacing: .012em; line-height: 1.2; text-wrap: balance;
    opacity: 0; animation: heroReveal .82s 150ms cubic-bezier(.16, 1, .3, 1) forwards;
}

.reveal-word {
    position: relative; display: inline-block;
    padding: 0 .16em .04em; color: var(--primary); white-space: nowrap;
}

/* دوّار كلمات العنوان (على نمط Rolling Text): عمود كلمات كامل ينزلق صفاً
   واحداً كل بضع ثوانٍ — حركة «لفّ» متصلة كعدّاد، لا ظهور/إخفاء.
   الارتفاع مقفول على سطر واحد فلا يهتزّ تخطيط العنوان عند التبديل. */
/* 1.55em ارتفاع الصف: يجب أن يتّسع لأطول حرف بنقاطه (ط · أ · ل)
   كي لا تُقصّ أطراف الكلمات العلوية عند نافذة القصّ */
.hero-rotor {
    display: inline-block; vertical-align: -0.3em;
    overflow: hidden; height: 1.55em; white-space: nowrap;
    color: var(--primary);
}
.hero-rotor-strip { display: block; transition: transform .7s ease-in-out; will-change: transform; }
.hero-rotor-strip b {
    display: flex; align-items: center; height: 1.55em; font-weight: 800;
}

.hero-lead {
    max-width: 680px; margin: 0 auto;
    color: var(--text); font-size: 17px; line-height: 1.9;
    opacity: 0; animation: heroReveal .76s 230ms cubic-bezier(.16, 1, .3, 1) forwards;
}

.hero-actions {
    display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 28px;
    opacity: 0; animation: heroReveal .72s 360ms cubic-bezier(.16, 1, .3, 1) forwards;
}

/* --- المسرح: نافذة التطبيق المائلة + بطاقتان طافيتان --- */
.hero-stage {
    position: relative; z-index: 2;
    width: min(1160px, 100%); height: 570px; margin: 30px auto 0;
    opacity: 0; animation: stageReveal 1.05s 470ms cubic-bezier(.16, 1, .3, 1) forwards;
}

.stage-halo {
    position: absolute; top: 72px; right: 50%;
    width: min(850px, 80vw); height: 430px;
    background: radial-gradient(ellipse, rgba(72, 112, 214, .15), rgba(84, 182, 230, .07) 38%, transparent 70%);
    border-radius: 50%; filter: blur(20px); transform: translateX(50%);
}

.app-window {
    position: absolute; top: 65px; right: 50%;
    width: 910px; height: 470px; overflow: hidden;
    background: #f8fafc; border: 1px solid rgba(149, 163, 182, .24); border-radius: 18px;
    box-shadow: var(--shadow-lg), 0 0 0 8px rgba(255, 255, 255, .74);
    transform: translateX(50%) perspective(1400px) rotateX(1.4deg) rotateY(-1.2deg);
    transform-origin: top center;
}

.app-topbar {
    display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 16px;
    color: var(--muted); background: #fff; border-bottom: 1px solid #e8edf4; font-size: 10px;
}
.window-dots { display: flex; gap: 6px; direction: ltr; }
.window-dots i { width: 8px; height: 8px; background: #d7deea; border-radius: 50%; }
.window-dots i:nth-child(1) { background: #f1a998; }
.window-dots i:nth-child(2) { background: #f2cc6c; }
.window-dots i:nth-child(3) { background: #74cfb8; }
.window-address {
    flex: 0 1 300px; margin: 0 auto; padding: 5px 12px;
    color: #8a98ad; background: #f6f8fb; border: 1px solid #edf1f6;
    border-radius: 999px; text-align: center;
}

.app-body { display: grid; grid-template-columns: 150px 1fr; height: calc(100% - 48px); }

.app-sidebar { position: relative; padding: 20px 14px; background: #fff; border-left: 1px solid #edf1f6; }
.app-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; color: var(--ink); font-size: 12px; font-weight: 800; }
.app-brand i { display: block; width: 22px; height: 22px; background: var(--primary); border-radius: 7px; }
.app-brand img { display: block; width: 22px; height: 22px; object-fit: contain; }
.app-nav { display: grid; gap: 7px; }
.app-nav span {
    display: flex; align-items: center; gap: 8px; height: 31px; padding: 0 9px;
    color: #8492a6; border-radius: 7px; font-size: 9px; font-weight: 600;
}
.app-nav i { width: 13px; height: 13px; border: 1.5px solid currentColor; border-radius: 4px; }
.app-nav span:first-child { color: #fff; background: var(--primary); }

.app-content { padding: 22px 24px; overflow: hidden; }
.demo-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 15px; }
.demo-heading h3 { margin: 0; color: var(--ink); font-size: 18px; letter-spacing: -.02em; }
.demo-heading p { margin: 3px 0 0; color: #8a98ad; font-size: 9px; }
.demo-date { padding: 6px 9px; color: #697991; background: #fff; border: 1px solid #e6ebf2; border-radius: 7px; font-size: 8px; }

.demo-kpis {
    display: grid; grid-template-columns: repeat(2, 1fr); overflow: hidden;
    background: #fff; border: 1px solid #edf1f6; border-radius: 10px; box-shadow: var(--shadow-sm);
}
.demo-kpi { min-width: 0; padding: 12px 13px; border-left: 1px solid #edf1f6; }
.demo-kpi:last-child { border-left: 0; }
.demo-kpi span { display: block; overflow: hidden; color: #8492a6; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.demo-kpi strong { display: block; margin-top: 3px; color: var(--ink); font-size: 20px; letter-spacing: -.02em; }
.demo-kpi.is-blue strong { color: var(--primary); }
.demo-kpi.is-green strong { color: var(--success-ink); }

.demo-card {
    min-width: 0; margin-top: 13px; padding: 14px;
    background: #fff; border: 1px solid #edf1f6; border-radius: 10px; box-shadow: var(--shadow-sm);
}
.demo-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.demo-card-head strong { color: var(--ink); font-size: 11px; }
.demo-card-head span { color: #8a98ad; font-size: 8px; }

.bar-chart { display: flex; align-items: flex-end; gap: 10px; height: 148px; }
.bar-chart .bar { flex: 1; height: var(--h); background: #dfe8fb; border-radius: 6px 6px 3px 3px; }
.bar-chart .bar:nth-last-child(-n + 3) { background: var(--primary); }

.floating-card {
    position: absolute; z-index: 4; width: 230px; padding: 17px;
    background: rgba(255, 255, 255, .96); border: 1px solid rgba(228, 234, 242, .92);
    border-radius: 15px; box-shadow: var(--shadow-md); backdrop-filter: blur(12px);
}
.floating-card.activity { top: 8px; right: 3px; transform: rotate(2.5deg); }
.floating-card.sales { top: 98px; left: -2px; transform: rotate(-3.2deg); }
.float-head { display: flex; align-items: center; justify-content: space-between; color: #66758d; font-size: 9px; }
.float-head strong { color: var(--ink); font-size: 11px; }

/* بطاقتا المحادثة: المساعد الذكي · التواصل مع الفريق */
.float-live { display: inline-flex; align-items: center; gap: 5px; color: var(--success-ink); font-size: 9px; font-weight: 700; }
.float-live::before {
    width: 6px; height: 6px; content: ''; background: var(--success); border-radius: 50%;
    box-shadow: 0 0 0 3px var(--success-soft);
}
.chat-bubble { margin: 10px 0 0; padding: 8px 11px; color: var(--ink); font-size: 10.5px; line-height: 1.6; border-radius: 11px; }
.chat-bubble.bot { background: var(--primary-faint); border: 1px solid var(--primary-soft); border-end-end-radius: 3px; }
.chat-bubble.user { color: #fff; background: var(--primary); border-end-start-radius: 3px; }
.floating-card.sales .chat-bubble.bot { background: var(--success-soft); border-color: transparent; }
.team-avatars { display: flex; margin-top: 13px; }
.team-avatars i { width: 26px; height: 26px; border: 2px solid #fff; border-radius: 50%; background: var(--primary-soft); }
.team-avatars i + i { margin-inline-start: -8px; }
.team-avatars i:nth-child(2) { background: var(--cyan-soft); }
.team-avatars i:nth-child(3) { background: var(--amber-soft); }
.typing { display: flex; gap: 4px; width: max-content; margin-top: 11px; padding: 9px 11px; background: var(--surface-soft); border-radius: 11px; }
.typing i { width: 5px; height: 5px; background: var(--muted); border-radius: 50%; animation: typingPulse 1.9s infinite; }
.typing i:nth-child(2) { animation-delay: .22s; }
.typing i:nth-child(3) { animation-delay: .44s; }
@keyframes typingPulse {
    0%, 60%, 100% { opacity: .35; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-2px); }
}

/* --- شريط الثقة المتراكب على حدّ البطل --- */
.capability-strip {
    position: relative; z-index: 6;
    display: grid; grid-template-columns: repeat(3, 1fr);
    width: min(900px, 100%); margin: -5px auto 0; overflow: hidden;
    background: #fff; border: 1px solid var(--line); border-radius: 14px 14px 0 0;
    box-shadow: var(--shadow-sm);
}
.capability {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 76px; padding: 12px 20px;
    color: var(--text); border-left: 1px solid var(--line); font-size: 13px; font-weight: 700;
}
.capability:last-child { border-left: 0; }
.capability-icon {
    display: grid; width: 32px; height: 32px; flex: 0 0 auto; place-items: center;
    color: var(--primary); background: var(--primary-soft); border-radius: 9px;
}
.capability:nth-child(2) .capability-icon { color: var(--amber-ink); background: var(--amber-soft); }
.capability:nth-child(3) .capability-icon { color: var(--success-ink); background: var(--success-soft); }

/* =====================================================================
   هيكل الأقسام
   ===================================================================== */
.section { padding: 112px 24px 116px; background: var(--surface); }
.section.on-canvas { background: var(--canvas); }

.section-shell { position: relative; width: min(1180px, 100%); margin: 0 auto; }

.section-heading { max-width: 720px; margin: 0 auto 52px; text-align: center; }
.section-heading .overline {
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 13px;
    color: var(--primary); font-size: 12px; font-weight: 800;
}
.section-heading .overline::before { width: 22px; height: 2px; content: ''; background: var(--cyan); border-radius: 999px; }
.section-heading h2 {
    margin: 0; color: var(--ink); font-size: clamp(2rem, 3.6vw, 3.1rem); font-weight: 800;
    letter-spacing: -.04em; line-height: 1.25; text-wrap: balance;
}
.section-heading p { max-width: 640px; margin: 18px auto 0; color: var(--text); font-size: 17px; line-height: 1.85; }

/* =====================================================================
   القطاعات — شريط داكن يكسر إيقاع الأسطح الفاتحة
   ===================================================================== */
.industries-band {
    position: relative; overflow: hidden;
    padding: 86px 24px 92px; background: var(--night);
}
.industries-band::before {
    position: absolute; top: -160px; right: 50%; width: 720px; height: 620px; content: '';
    background: radial-gradient(circle, rgba(84, 182, 230, .22), transparent 66%);
    transform: translateX(50%); pointer-events: none;
}
.industries-band .section-shell { z-index: 1; }
.industries-band .section-heading { margin-bottom: 38px; }
.industries-band .overline { color: var(--cyan); }
.industries-band h2 { color: #fff; font-size: clamp(1.75rem, 3vw, 2.5rem); }

.industries { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* كاتب القطاعات الآلي: اسم القطاع يُكتب حرفاً حرفاً بالتناوب —
   القائمة الكاملة متاحة لقارئ الشاشة عبر aria-label على الحاوية */
.industries-type { text-align: center; }
.industries-type .typeline {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 1.7em; color: #bcd0ff; font-size: clamp(1.25rem, 2.6vw, 1.9rem); font-weight: 800;
}
.type-caret {
    width: 3px; height: 1.15em; flex: 0 0 auto;
    background: var(--cyan, #7dd3fc); border-radius: 2px;
    animation: typeBlink 1s steps(2) infinite;
}
@keyframes typeBlink { 50% { opacity: 0; } }

.industry-chip {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 11px 18px 11px 20px;
    color: rgba(255, 255, 255, .88); background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px;
    font-size: 14px; font-weight: 700;
    box-shadow: 0 16px 30px -22px rgba(0, 0, 0, .75); backdrop-filter: blur(12px);
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.industry-chip:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .24); }
.industry-chip .em {
    display: grid; width: 32px; height: 32px; flex: 0 0 auto; place-items: center;
    background: rgba(255, 255, 255, .1); border-radius: 10px; font-size: 17px;
}

.ic-primary { background: var(--primary-soft); }
.ic-cyan    { background: var(--cyan-soft); }
.ic-amber   { background: var(--amber-soft); }
.ic-success { background: var(--success-soft); }
.ic-danger  { background: var(--danger-soft); }
.ic-ink     { background: #eef1f7; }

/* حبر كل خلفية ناعمة — تستهلكه أيقونات SVG داخل العقد */
.ic-primary { color: var(--primary); }
.ic-cyan    { color: #2d8fb8; }
.ic-amber   { color: var(--amber-ink); }
.ic-success { color: var(--success-ink); }
.ic-danger  { color: var(--danger-ink); }
.ic-ink     { color: var(--ink); }

/* =====================================================================
   تايم لاين رحلة الطلب — عمود فقري يمتلئ مع التمرير وبطاقات مائلة
   ثلاثية الأبعاد تتبع المؤشر. كل الخصائص منطقية (inset-inline-*)
   فيتنقل التخطيط تلقائياً بين RTL وLTR.
   ===================================================================== */
.journey { background: linear-gradient(180deg, var(--surface) 0%, var(--canvas) 100%); }

.timeline {
    --spine-x: 50%;       /* موضع العمود الفقري من بداية السطر */
    --node-gap: 72px;     /* المسافة بين العمود والبطاقة */
    position: relative;
    max-width: 940px; margin: 0 auto;
    display: grid; gap: 40px;
    padding-block: 12px;
}

.tl-spine {
    position: absolute; inset-block: 0; inset-inline-start: var(--spine-x);
    width: 2px; margin-inline-start: -1px; /* توسيط خط 2px على النقطة دون تحويل فيزيائي */
    background: var(--line-strong); border-radius: 999px;
}
.tl-progress {
    position: absolute; inset-inline: 0; top: 0; height: 0;
    width: 100%;
    background: linear-gradient(180deg, var(--primary), var(--cyan));
    border-radius: 999px;
    transition: height .18s linear;
}

.tl-item {
    position: relative;
    width: calc(50% - var(--node-gap) / 2);
    perspective: 950px;
    outline: none;
}
/* التوزيع المتناوب. العمود الفقري هو الابن الأول فتبدأ البطاقات من الابن الثاني:
   الزوجي (البطاقة ١) جهة البداية والفردي (البطاقة ٢) جهة النهاية. */
.tl-item:nth-child(even) { margin-inline-end: auto; text-align: start; }
.tl-item:nth-child(odd)  { margin-inline-start: auto; text-align: start; }

/* العقدة على العمود الفقري — الموضع الأفقي يُحسب من موضع البطاقة نفسها:
   بطاقة البداية تنتهي حافتها عند (المركز − نصف الفجوة)، فنضيف (١٠٠٪ + نصف الفجوة)
   لنصل إلى مركز التايم لاين، وبطاقة النهاية تبدأ عنده فنطرح نصف الفجوة فقط.
   التوسيط بهامش منطقي سالب (نصف العرض) لا بتحويل فيزيائي — inset يحدد الحافة
   لا المركز، والهامش المنطقي ينقلب مع الاتجاه كما يجب. */
.tl-node {
    position: absolute; top: 50%;
    display: grid; place-items: center;
    width: 54px; height: 54px; padding: 0;
    border: 2px solid var(--surface); border-radius: 50%;
    box-shadow: var(--shadow-sm);
    transform: translateY(-50%);
    margin-inline-start: -27px;
    transition: box-shadow .25s ease;
    z-index: 1;
}
.tl-ic { width: 24px; height: 24px; }
.tl-item:nth-child(even) .tl-node { inset-inline-start: calc(100% + var(--node-gap) / 2); }
.tl-item:nth-child(odd)  .tl-node { inset-inline-start: calc(var(--node-gap) / -2); }
.tl-item.is-passed .tl-node { box-shadow: 0 0 0 6px var(--primary-faint), var(--shadow-sm); }
.tl-item:focus-visible .tl-node { box-shadow: 0 0 0 3px var(--primary); }

/* البطاقة — الميلان ثلاثي الأبعاد يُدار بمتغيري --rx/--ry من JS */
.tl-card {
    --rx: 0deg; --ry: 0deg;
    position: relative;
    padding: 26px 26px 24px;
    background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transform: rotateX(var(--rx)) rotateY(var(--ry));
    transform-style: preserve-3d;
    transition: transform .22s cubic-bezier(.16, 1, .3, 1), box-shadow .22s ease, border-color .22s ease;
    opacity: 0; translate: 0 26px;
}
.tl-item.is-seen .tl-card {
    opacity: 1; translate: 0 0;
    transition: opacity .8s cubic-bezier(.16, 1, .3, 1), translate .8s cubic-bezier(.16, 1, .3, 1),
                transform .22s cubic-bezier(.16, 1, .3, 1), box-shadow .22s ease, border-color .22s ease;
}
.tl-card:hover, .tl-item:focus-visible .tl-card {
    border-color: rgba(72, 112, 214, .24); box-shadow: var(--shadow-md);
}
.tl-card h3 { margin: 0; color: var(--ink); font-size: 19px; font-weight: 800; letter-spacing: -.02em; line-height: 1.4; }
.tl-card p { margin: 8px 0 0; color: var(--text); font-size: 14px; line-height: 1.85; }
.tl-num {
    display: block; margin-bottom: 10px;
    color: rgba(72, 112, 214, .35);
    font-size: 26px; font-weight: 800; letter-spacing: .04em; line-height: 1;
    transform: translateZ(24px); /* يطفو فوق مستوى البطاقة عند الميلان */
}

/* رقم البطاقة يرث لون أيقونتها — بنفس درجات عقدة الأيقونة مع شفافية للخفوت */
.tl-item:has(.ic-primary) .tl-num { color: rgba(72, 112, 214, .35); }
.tl-item:has(.ic-cyan)    .tl-num { color: rgba(45, 143, 184, .40); }
.tl-item:has(.ic-amber)   .tl-num { color: var(--amber-ink); opacity: .55; }
.tl-item:has(.ic-success) .tl-num { color: var(--success-ink); opacity: .55; }
.tl-item:has(.ic-danger)  .tl-num { color: var(--danger-ink); opacity: .55; }
.tl-item:has(.ic-ink)     .tl-num { color: var(--ink); opacity: .30; }

/* شاشات ضيقة: العمود الفقري على حافة البداية والبطاقات منسدلة بعده */
@media (max-width: 860px) {
    .timeline { --spine-x: 26px; --node-gap: 30px; gap: 22px; }
    .tl-item,
    .tl-item:nth-child(odd),
    .tl-item:nth-child(even) { width: 100%; margin: 0; }
    .tl-node,
    .tl-item:nth-child(odd) .tl-node,
    .tl-item:nth-child(even) .tl-node {
        inset-inline-start: var(--spine-x); top: 50%;
        transform: translateY(-50%);
        margin-inline-start: -23px; /* نصف عرض العقدة 46px */
        width: 46px; height: 46px;
    }
    .tl-node .tl-ic { width: 20px; height: 20px; }
    .tl-card { margin-inline-start: calc(var(--spine-x) + var(--node-gap)); }
    .tl-num { font-size: 22px; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .tl-card, .tl-item.is-seen .tl-card, .tl-node, .tl-progress {
        transition: none !important; opacity: 1 !important; translate: none !important;
    }
}

/* =====================================================================
   الأسعار — البطاقات مرسومة من /api/portal/plans
   ===================================================================== */
/* فلتر دورة الفوترة (شهري · ٣ أشهر · سنوي) — يظهر فقط إذا فعّلت الإدارة
   أكثر من دورة؛ مصدر حالته /api/portal/plans → pricing.periods */
.billing-toggle {
    display: flex; gap: 4px; width: max-content; margin: 0 auto 28px; padding: 4px;
    border-radius: 999px; background: rgba(15, 23, 42, .06);
    border: 1px solid rgba(15, 23, 42, .08);
}
.billing-toggle button {
    appearance: none; border: 0; cursor: pointer; border-radius: 999px;
    padding: 8px 22px; font: inherit; font-size: .9rem; font-weight: 700;
    color: var(--muted); background: transparent; transition: all .18s ease;
}
.billing-toggle button.active {
    background: var(--ink, #0f172a); color: #fff;
    box-shadow: 0 8px 20px -10px rgba(15, 23, 42, .7);
}
/* بديل السعر في وضع «قريباً» (المرحلة التجريبية) وشارة الخطة القادمة */
.plan-price .soon-price { font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; opacity: .85; }
.plan-soon-badge {
    position: absolute; inset-inline-start: 18px; top: 18px; z-index: 2;
    padding: 4px 12px; border-radius: 999px; font-size: .72rem; font-weight: 800;
    background: rgba(245, 158, 11, .14); color: #b45309; border: 1px solid rgba(245, 158, 11, .35);
}
[dir="ltr"] .plan-soon-badge { left: auto; right: 18px; }
/* عدّاد الإطلاق وشارة «وفّر ٪» والعرض المحدود */
.plan-countdown { margin-top: 8px; font-size: .82rem; font-weight: 700; color: #b45309; }
.save-badge {
    display: inline-block; vertical-align: middle; margin-inline-start: 8px;
    padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 800;
    background: rgba(16, 185, 129, .12); color: #047857; border: 1px solid rgba(16, 185, 129, .35);
}
/* منتقي عملة العرض — قائمة منسدلة مخصَّصة بمستوى تصميم الصفحة. الكشف
   الجغرافي خادمي (/api/portal/currency) واختيار الزائر يُحفظ محلياً ويتقدّم عليه */
.currency-picker { position: relative; }
.currency-dd-btn {
    display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
    padding: 9px 18px; border-radius: 999px; font: inherit; font-size: .9rem;
    font-weight: 700; color: var(--ink, #0f172a);
    background: rgba(255, 255, 255, .75); backdrop-filter: blur(8px);
    border: 1px solid rgba(15, 23, 42, .12);
    box-shadow: 0 4px 14px -8px rgba(15, 23, 42, .25);
    transition: border-color .18s ease, box-shadow .18s ease;
}
.currency-dd-btn:hover { border-color: rgba(15, 23, 42, .28); box-shadow: 0 8px 22px -10px rgba(15, 23, 42, .35); }
.currency-dd-btn[aria-expanded="true"] .currency-dd-chev { transform: rotate(180deg); }
.currency-dd-chev { transition: transform .2s ease; color: var(--muted); }
.currency-dd-cur strong { letter-spacing: .04em; }
.currency-dd-cur .cur-sub { color: var(--muted); font-weight: 600; font-size: .82rem; }
/* البطاقة العائمة — تفتح بهدوء من الأعلى */
.currency-dd-list {
    position: absolute; top: calc(100% + 10px); inset-inline-start: 50%;
    transform: translateX(50%) translateY(-6px) scale(.98);
    min-width: 230px; max-height: 300px; overflow-y: auto;
    background: #fff; border-radius: 16px; padding: 6px;
    border: 1px solid rgba(15, 23, 42, .1);
    box-shadow: 0 24px 60px -18px rgba(15, 23, 42, .38), 0 4px 12px -6px rgba(15, 23, 42, .12);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
    z-index: 40;
}
[dir="ltr"] .currency-dd-list { transform: translateX(-50%) translateY(-6px) scale(.98); }
.currency-dd-list.open {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(50%) translateY(0) scale(1);
}
[dir="ltr"] .currency-dd-list.open { transform: translateX(-50%) translateY(0) scale(1); }
.currency-dd-item {
    display: flex; align-items: center; gap: 12px; width: 100%;
    appearance: none; border: 0; background: transparent; cursor: pointer;
    padding: 9px 12px; border-radius: 10px; font: inherit; font-size: .88rem;
    color: var(--ink, #0f172a); text-align: start; transition: background .12s ease;
}
.currency-dd-item:hover, .currency-dd-item:focus-visible { background: rgba(15, 23, 42, .05); outline: none; }
.currency-dd-item[data-on="1"] { background: rgba(72, 112, 214, .08); font-weight: 700; }
.currency-dd-item .cur-code {
    min-width: 44px; font-weight: 800; font-size: .78rem; letter-spacing: .05em;
    color: var(--ink, #0f172a);
    padding: 2px 8px; border-radius: 6px;
    background: rgba(15, 23, 42, .06); border: 1px solid rgba(15, 23, 42, .08);
}
.currency-dd-item[data-on="1"] .cur-code {
    background: rgba(72, 112, 214, .12); border-color: rgba(72, 112, 214, .3); color: #3350b8;
}
.currency-dd-item .cur-name { flex: 1; color: var(--muted); font-weight: 600; }
.currency-dd-item[data-on="1"] .cur-name { color: var(--ink, #0f172a); }
.currency-dd-item .cur-check { width: 15px; height: 15px; color: #3350b8; }
.pricing-controls { display: flex; justify-content: center; margin: 0 auto 10px; }
.currency-note {
    max-width: 720px; margin: 0 auto 18px; text-align: center;
    font-size: .78rem; color: var(--muted); opacity: .9;
}
.plans-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px; max-width: 1060px; margin: 0 auto; align-items: stretch;
}
.plan-card {
    position: relative; display: flex; flex-direction: column; padding: 34px 30px;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.plan-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.plan-card.featured { border-color: rgba(72, 112, 214, .45); box-shadow: 0 26px 56px -30px rgba(72, 112, 214, .85); }
.plan-card.featured::after {
    position: absolute; top: -13px; right: 50%; content: attr(data-badge);
    padding: 5px 15px; color: #fff; background: var(--primary); border-radius: 999px;
    font-size: .72rem; font-weight: 800; white-space: nowrap; transform: translateX(50%);
    box-shadow: 0 10px 22px -14px rgba(22, 36, 73, .8);
}
.plan-card .plan-name { color: var(--ink); font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; }
.plan-card .plan-tag { margin: 4px 0 16px; color: var(--muted); font-size: .85rem; }
.plan-card .plan-price { color: var(--ink); font-size: 2.6rem; font-weight: 800; letter-spacing: -.045em; line-height: 1; }
.plan-card .plan-price small { color: var(--muted); font-size: .88rem; font-weight: 700; letter-spacing: 0; }
.plan-card ul { flex: 1; margin: 22px 0; list-style: none; }
.plan-card li {
    position: relative; padding: 9px 26px 9px 0;
    color: var(--text); font-size: .92rem; border-bottom: 1px solid var(--line);
}
.plan-card li:last-child { border-bottom: 0; }
.plan-card li::before { position: absolute; right: 0; top: 9px; content: '✓'; color: var(--success-ink); font-weight: 800; }
.plan-card .btn { margin-top: 8px; }
.plans-grid .loading { padding: 40px; color: var(--muted); text-align: center; }

/* =====================================================================
   الأسئلة الشائعة
   ===================================================================== */
.faq-list { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.faq-item {
    overflow: hidden; background: #fff;
    border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-sm);
    transition: border-color .18s ease, box-shadow .18s ease;
}
.faq-item[open] { border-color: rgba(72, 112, 214, .3); box-shadow: var(--shadow-md); }
.faq-item summary {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 20px 24px; color: var(--ink); font-size: 15px; font-weight: 800;
    list-style: none; cursor: pointer;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .chev {
    display: grid; width: 30px; height: 30px; flex-shrink: 0; place-items: center;
    color: var(--primary); background: var(--primary-soft); border-radius: 50%;
    font-size: 1.1rem; font-weight: 700; transition: transform .2s ease;
}
.faq-item[open] summary .chev { transform: rotate(45deg); }
.faq-item .ans { padding: 0 24px 20px; color: var(--text); font-size: 14px; line-height: 1.9; }

/* =====================================================================
   نداء الإجراء / قائمة الانتظار
   ===================================================================== */
.cta-section { padding: 100px 24px 112px; background: var(--canvas); }
.cta-card {
    position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 44px;
    width: min(1180px, 100%); min-height: 330px; margin: 0 auto; padding: 62px 68px; overflow: hidden;
    color: #fff; background: var(--primary); border-radius: 24px;
    box-shadow: 0 34px 74px -34px rgba(52, 87, 170, .86);
}
.cta-card::before {
    position: absolute; top: -130px; left: -90px; width: 410px; height: 410px; content: '';
    background: radial-gradient(circle, rgba(84, 182, 230, .3), transparent 68%); border-radius: 50%;
}
.cta-card::after {
    position: absolute; right: -110px; bottom: -250px; width: 520px; height: 520px; content: '';
    border: 1px solid rgba(255, 255, 255, .12); border-radius: 50%;
    box-shadow: 0 0 0 58px rgba(255, 255, 255, .035), 0 0 0 116px rgba(255, 255, 255, .025);
}
.cta-content, .cta-action { position: relative; z-index: 2; }
.cta-content h2 { max-width: 660px; margin: 0; font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.2; }
.cta-content p { max-width: 620px; margin: 16px 0 0; color: rgba(255, 255, 255, .82); font-size: 15px; line-height: 1.85; }

.cta-action { display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 300px; }
.cta-form { display: flex; flex-direction: column; gap: 10px; }
.cta-form input {
    min-height: 50px; padding: 0 18px;
    color: var(--ink); background: rgba(255, 255, 255, .96);
    border: 1px solid rgba(255, 255, 255, .5); border-radius: 999px;
    font-family: inherit; font-size: 15px;
}
.cta-form input::placeholder { color: var(--muted); }
.cta-form input:focus { outline: 3px solid rgba(255, 255, 255, .45); outline-offset: 2px; }
#wl-status { min-height: 1.2em; margin: 0; color: rgba(255, 255, 255, .8); font-size: 12px; font-weight: 700; text-align: center; }

/* =====================================================================
   التذييل
   ===================================================================== */
.site-footer { padding: 56px 24px 32px; color: rgba(255, 255, 255, .72); background: var(--night-deep); }
.footer-shell { display: grid; grid-template-columns: 1.4fr repeat(2, .7fr); gap: 56px; width: min(1180px, 100%); margin: 0 auto; }
.footer-brand { display: inline-flex; align-items: center; gap: 11px; color: #fff; font-size: 20px; font-weight: 700; }
.footer-about p { max-width: 400px; margin: 18px 0 0; font-size: 13px; line-height: 1.9; }
.footer-column h3 { margin: 0 0 14px; color: #fff; font-size: 13px; }
.footer-column a { display: block; width: max-content; margin: 8px 0; font-size: 12px; transition: color .16s ease; }
.footer-column a:hover { color: #fff; text-decoration: none; }
.footer-bottom {
    display: flex; align-items: center; justify-content: space-between;
    width: min(1180px, 100%); margin: 44px auto 0; padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .09); font-size: 11px;
}
.footer-bottom nav { display: flex; gap: 18px; }
.footer-bottom a:hover { color: #fff; text-decoration: none; }

/* =====================================================================
   الحركات
   ===================================================================== */
@keyframes heroReveal {
    from { opacity: 0; transform: translateY(18px); filter: blur(7px); }
    to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes stageReveal {
    from { opacity: 0; transform: translateY(34px) scale(.97); filter: blur(10px); }
    to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* =====================================================================
   الاستجابة
   ===================================================================== */
@media (max-width: 1100px) {
    .floating-card.activity { right: -35px; }
    .floating-card.sales { left: -35px; }
}

@media (max-width: 960px) {
    .site-header { top: 14px; }
    .desktop-nav {
        position: fixed; top: 88px; right: 24px; left: 24px;
        display: grid; gap: 4px; padding: 14px;
        visibility: hidden; opacity: 0;
        background: var(--primary); border: 1px solid rgba(255, 255, 255, .16);
        border-radius: 20px; box-shadow: var(--shadow-md);
        transform: translateY(-10px) scale(.98);
        transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
    }
    .desktop-nav.is-open { visibility: visible; opacity: 1; transform: translateY(0) scale(1); }
    .nav-link { padding: 12px 14px; border-radius: 10px; }
    .nav-link::after { display: none; }
    .nav-cta { margin: 4px 0 0; }
    .menu-toggle { display: grid; place-items: center; }

    .hero { padding-top: 150px; }
    .floating-card { display: none; }

    .cta-card { grid-template-columns: 1fr; padding: 56px; }
    .cta-action { min-width: 0; }

    /* من 961px وما تحت: النافذة تتدفق بعرض الشاشة بدلاً من التصغير بـscale —
       التصغير كان يقصّ طرفي النافذة لأن صندوقها (910px) أعرض من الشاشة. */
    .hero-stage { height: auto; margin-top: 36px; }
    .stage-halo { top: 0; width: 100%; height: 300px; }
    .app-window {
        position: relative; top: auto; right: auto;
        width: 100%; max-width: 640px; height: auto;
        margin: 0 auto; transform: none;
    }
    .app-body { grid-template-columns: 1fr; height: auto; }
    .app-content { padding: 20px 20px 24px; }
    .demo-heading h3 { font-size: 16px; }
    .demo-kpi strong { font-size: 18px; }
    .demo-card-head strong { font-size: 12px; }
    .bar-chart { height: 130px; gap: 9px; }
}

@media (max-width: 760px) {
    html { scroll-padding-top: 86px; }
    .site-header { top: 10px; padding: 0 12px; }
    .site-header.is-scrolled { top: 6px; }
    .nav-shell { min-height: 62px; padding: 9px 10px 9px 14px; }
    .brand { font-size: 18px; }
    .brand-logo { width: 38px; height: 38px; }
    .desktop-nav { top: 78px; right: 12px; left: 12px; }

    .hero { padding: 124px 16px 0; }
    .hero::after { top: 92px; width: 580px; height: 500px; }
    .hero h1 { margin-top: 24px; font-size: clamp(2.1rem, 9.5vw, 3rem); line-height: 1.24; }
    .hero-lead { max-width: 520px; font-size: 15px; line-height: 1.85; }
    .hero-actions { flex-direction: column; width: 100%; max-width: 320px; margin-right: auto; margin-left: auto; }
    .hero-actions .button { width: 100%; }

    /* على الجوال: إخفاء الشريط الجانبي ومقاسات أكثر إحكاماً
       (التدفق السائل للنافذة موحّد في نقطة 960px أعلاه) */
    .app-sidebar { display: none; }
    .app-topbar { height: 42px; }
    .window-address { flex-basis: 180px; }
    .app-content { padding: 16px 16px 20px; }
    .demo-heading h3 { font-size: 15px; }
    .demo-date { font-size: 9px; }
    .demo-kpi { padding: 10px 12px; }
    .demo-kpi span { font-size: 10px; }
    .demo-kpi strong { font-size: 17px; }
    .demo-card { padding: 12px; }
    .bar-chart { height: 110px; gap: 8px; }

    .capability-strip { grid-template-columns: 1fr; margin-top: 0; }
    .capability { min-height: 62px; justify-content: flex-start; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); border-left: 0; }
    .capability:last-child { border-bottom: 0; }

    .section { padding: 84px 16px 88px; }
    .section-heading { margin-bottom: 34px; }
    .section-heading h2 { font-size: clamp(1.8rem, 8vw, 2.4rem); }
    .section-heading p { font-size: 15px; }

    .industries-band { padding: 72px 16px 76px; }
    .industry-chip { padding: 9px 14px 9px 16px; font-size: 13px; }
    .industry-chip .em { width: 28px; height: 28px; font-size: 15px; }


    .cta-section { padding: 76px 16px 84px; }
    .cta-card { gap: 30px; padding: 46px 28px; border-radius: 20px; }
    .cta-content h2 { font-size: clamp(1.9rem, 9vw, 2.6rem); }

    .footer-shell { grid-template-columns: 1fr 1fr; gap: 36px; }
    .footer-about { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
    .system-pill, .eyebrow-badge { font-size: 11px; }
    .system-pill { padding-left: 8px; }
    .system-pill strong { padding: 6px 8px; }
    .hero h1 { font-size: 2.1rem; }
    .bar-chart { height: 90px; }
    .plan-card { padding: 28px 24px; }
    .faq-item summary { padding: 16px 18px; font-size: 14px; }
    .faq-item .ans { padding: 0 18px 18px; }
    .footer-bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: 1ms !important; animation-delay: 0ms !important;
        animation-iteration-count: 1 !important; transition-duration: 1ms !important;
    }
    /* دوّار العنوان يحرّك strip بالتحويل — في وضع تقليل الحركة يبقى الصف الأول */
    .hero-rotor-strip { transform: none !important; transition: none !important; }
    .hero-rotor-strip b:not(:first-child) { display: none; }
}

/* منع زوم iOS عند التركيز: سفاري يكبّر أي حقل خطّه أقل من 16px
   حتى مع user-scalable=no، فنفرض 16px على الجوال. */
@media (max-width: 768px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* ===== تبديل اللغة (i18n) — بروح nav-link نفسها ===== */
.lang-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 14px; margin-inline-start: 4px; flex: 0 0 auto;
    color: rgba(255, 255, 255, .86); font: inherit; font-size: 14px; font-weight: 700;
    background: transparent; border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px; cursor: pointer;
    transition: color .16s ease, background .16s ease;
}
.lang-toggle:hover { color: #fff; background: rgba(255, 255, 255, .09); }

/* ===== تجاوز LTR أدنى (i18n) ===== */
html[dir="ltr"] .nav-cta { margin-right: 0; margin-left: 6px; }

/* ===== حساب التاجر بجلسة بوابة فعّالة (landing-auth.js) =====
   يظهر مكان «دخول التجار» وزرّ التجربة: زرّ أفاتار + اسم المتجر يفتح
   قائمة (صفحة البوابة · إدارة البرنامج · تسجيل الخروج). */
.nav-account { position: relative; margin-inline-start: 4px; flex: 0 0 auto; }

.nav-account-btn {
    display: inline-flex; align-items: center; gap: 9px;
    max-width: 220px; min-height: 44px; padding: 5px 16px;
    color: #fff; font: inherit; font-size: 14px; font-weight: 700;
    background: rgba(255, 255, 255, .11); border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px; cursor: pointer;
    transition: background .16s ease;
}
.nav-account-btn:hover { background: rgba(255, 255, 255, .09); }
.nav-account-btn .icon { width: 15px; height: 15px; flex: 0 0 auto; opacity: .8; transition: transform .16s ease; }
.nav-account.is-open .nav-account-btn .icon { transform: rotate(180deg); }

.nav-account-avatar {
    display: grid; place-items: center;
    width: 32px; height: 32px; flex: 0 0 auto;
    font-size: 14px; font-weight: 800;
    background: #fff; color: var(--primary); border-radius: 50%;
}

.nav-account-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.nav-account-menu {
    position: absolute; top: calc(100% + 10px); left: 0; z-index: 60;
    display: none; width: 272px; max-width: calc(100vw - 2rem); padding: 8px;
    background: #fff; border: 1px solid rgba(22, 36, 73, .14);
    border-radius: 16px; box-shadow: var(--shadow-md);
}
.nav-account.is-open .nav-account-menu { display: block; }

/* عنصر بروح .pam-item في البورتال: أيقونة + عمود (عنوان + وصف صغير) */
.nav-account-item {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 10px 12px; color: #16244a;
    font-size: 13.5px; font-weight: 700; text-align: start;
    border-radius: 10px; text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.nav-account-item:hover { background: rgba(72, 112, 214, .09); color: var(--primary); text-decoration: none; }
.nav-account-item-ic { display: inline-grid; place-items: center; flex: none; color: #667085; }
.nav-account-item-ic .icon { width: 17px; height: 17px; }
.nav-account-item:hover .nav-account-item-ic { color: var(--primary); }
.nav-account-item-main { min-width: 0; flex: 1; }
.nav-account-item-label { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-account-item-desc {
    display: block; margin-top: 1px; font-size: 11px; font-weight: 600; color: #667085;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-account-item.is-danger,
.nav-account-item.is-danger .nav-account-item-label { color: #c0392b; }
.nav-account-item.is-danger .nav-account-item-ic { color: #c0392b; }
.nav-account-item.is-danger:hover { background: rgba(192, 57, 43, .09); color: #c0392b; }

/* الموبايل: البطاقة نفسها (كما تظهر في البورتال) داخل الدرج بعرض كامل */
@media (max-width: 960px) {
    .nav-account { margin: 6px 0 0; border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 10px; }
    .nav-account-btn { width: 100%; justify-content: flex-start; min-height: 48px; border-radius: 10px; padding: 8px 14px; }
    /* سهم القائمة المنسدلة بلا معنى داخل الدرج (القائمة ظاهرة دائماً) */
    .nav-account-btn > .icon { display: none; }
    .nav-account-name { flex: 1; }
    .nav-account-menu {
        position: static; display: block; width: 100%; max-width: none;
        margin-top: 6px; padding: 8px;
    }
    .nav-account-item { min-height: 44px; }
}

/* =====================================================================
   المجسّم التفاعلي (#liveDemo) — منقول من html/interactive-demo-standalone.html
   كل القواعد محصورة تحت #liveDemo أو أصناف العرض (dt… و demo…) فلا تمسّ
   بقية صفحة الهبوط. التوكنز مُضمَرة من base.css بوضع نهائي داخل المجسّم.
   ===================================================================== */
/* ═══════════════ 1) التوكنز — من base.css (وضع نهاري، مضمرة) ═══════════════ */
#liveDemo{
  --primary:#4870D6; --primary-hover:#3960C4; --primary-soft:#93ABE5;
  --accent:#54B6E6; --mint:#1FCBB0; --warning:#EBA02E; --danger:#EC7D63;
  --surface-solid:#FFFFFF; --surface-main:#FFFFFF; --card-bg:#FFFFFF;
  --page-bg:#F4F6FB;
  --border-main:#EBF1F6;
  --border-light:#EBF1F6;
  --text-title:#2A3547; --text-main:#2A3547; --text-secondary:#5A6A85;
  /* --text-muted = color-mix(primary 35%, #7C8FAC) تقريباً */
  --text-muted:#6A84BB;
  --light-primary:color-mix(in srgb, var(--primary) 10%, #FFFFFF);
  --surface-hover:var(--light-primary);
  --nav-bg-hover:var(--light-primary);
  --nav-bg-active:color-mix(in srgb, var(--primary) 12%, transparent);
  /* حالات الطلب: --*-bg / --*-text حرفياً من base.css */
  --new-bg:#E0F4FF;        --new-text:#0078A8;
  --ready-bg:#D8F5E8;      --ready-text:#0F8C5A;
  --delivering-bg:#FFEED1; --delivering-text:#B66B0E;
  --pending-bg:#EFE5FF;    --pending-text:#5B3FBF;
  --completed-bg:#E8E5F5;  --completed-text:#4A4570;
  --collected-bg:#D8F5E8;  --collected-text:#0F8C5A;
  --review-bg:#FFEED1;     --review-text:#B66B0E;
  --cancelled-bg:#FBE3E8;  --cancelled-text:#B3304A;
  /* أنواع المنتجات — base.css */
  --simple-product-bg:#E0F4FF; --simple-product-text:#0078A8;
  --multi-product-bg:#D8F5E8;  --multi-product-text:#0F8C5A; --multi-product-border:#5BD0B5;
  /* الجداول — base.css */
  --table-header-bg:#FFFFFF; --table-header-border:#EBF1F6;
  --table-row-border:#EBF1F6; --table-row-alt-bg:#EAEFF4; --table-row-hover-bg:#F6F9FC;
  --wa-primary:#25D366;
  --pane-radius:7px; --control-radius:7px;
  /* ظلال Modernize */
  --shadow-sm: rgb(145 158 171 / 18%) 0px 0px 2px 0px, rgb(145 158 171 / 6%) 0px 6px 13px -4px;
  --shadow-md: rgb(145 158 171 / 18%) 0px 0px 2px 0px, rgb(145 158 171 / 10%) 0px 12px 24px -4px;
  --shadow-lg: rgb(145 158 171 / 18%) 0px 0px 2px 0px, rgb(145 158 171 / 13%) 0px 16px 32px -4px;
  --font:'Vazirmatn',-apple-system,'Segoe UI',sans-serif;
}
#liveDemo *{margin:0;padding:0;box-sizing:border-box}
#liveDemo{position:relative; background:var(--page-bg); color:var(--text-main);
  overflow:hidden; display:grid; grid-template-columns:234px 1fr; height:calc(100% - 48px);
  font-family:var(--font); font-size:13px; text-align:start; line-height:1.5}
/* سطح الزبون (تتبّع الطلب): لا شريط جانبي — الصفحة عامّة لا داخل لوحة التاجر */
#liveDemo.public{grid-template-columns:1fr}
#liveDemo.public .side{display:none}

/* الماوس الافتراضي */
#liveDemo #vCursor{position:absolute; z-index:60; width:26px; height:26px; pointer-events:none;
  left:0; top:0; will-change:transform; transition:opacity .3s; opacity:0;
  filter:drop-shadow(0 3px 6px rgb(10 16 40 / .45))}
/* قبل التشغيل المسرح ملصق ساكن: لا مؤشّر يسبح فوقه ولا بطاقة شرح */
#liveDemo.is-playing #vCursor{opacity:1}
#liveDemo #vCursor .ripple{position:absolute; inset:-9px; border-radius:50%; border:2.5px solid var(--primary);
  opacity:0; transform:scale(.4)}
#liveDemo #vCursor.click .ripple{animation:ripple .5s ease-out}
@keyframes ripple{0%{opacity:.9; transform:scale(.4)} 100%{opacity:0; transform:scale(1.5)}}
#liveDemo #vCursor.wheel svg{animation:wheelNudge .45s ease-in-out 2}
@keyframes wheelNudge{0%,100%{transform:translateY(0)} 50%{transform:translateY(5px)}}
#liveDemo #vCursor svg{display:block}

/* ═══════════════ 3) الشريط الجانبي — مرآة sidebar.html ═══════════════ */
#liveDemo .side{background:var(--surface-solid); border-inline-end:1px solid var(--border-main);
  padding:14px 10px 12px; display:flex; flex-direction:column; overflow:hidden}
#liveDemo .brand{display:flex; align-items:center; gap:9px; padding:2px 8px 14px}
#liveDemo .brand .logo{width:30px; height:30px; border-radius:8px; background:linear-gradient(135deg,var(--primary),var(--accent));
  display:grid; place-items:center; color:#fff; font-weight:800; font-size:14px}
#liveDemo .brand b{font-size:14.5px; color:var(--text-title)}
#liveDemo .brand small{display:block; color:var(--text-secondary); font-weight:400; font-size:10px}
#liveDemo .nav-group{display:flex; flex-direction:column; gap:1px}
#liveDemo .nav-group + .nav-group{margin-top:7px}
#liveDemo .nav-caption{display:flex; align-items:center; gap:6px; padding:5px 12px 4px;
  font-size:9.5px; font-weight:700; letter-spacing:.1em; color:var(--text-muted)}
#liveDemo .nav-caption svg{width:11px; height:11px; margin-inline-start:auto; opacity:.6}
#liveDemo .nav-item{display:flex; align-items:center; gap:9px; padding:7px 11px; border-radius:7px;
  color:var(--text-secondary); font-weight:500; border:none; background:none; font-family:var(--font);
  font-size:12.5px; width:100%; text-align:start; white-space:nowrap}
#liveDemo .nav-item svg.nav-ico{width:16px; height:16px; flex:none; stroke-width:2; color:#7C8FAC}
#liveDemo .nav-item.active{background:var(--nav-bg-active); color:var(--primary); font-weight:700}
#liveDemo .nav-item.active svg.nav-ico{color:var(--primary)}
#liveDemo .nav-item .badge{margin-inline-start:auto; background:var(--danger); color:#fff; font-size:10px; font-weight:700;
  border-radius:20px; padding:1px 7px}
#liveDemo .nav-item .lock{margin-inline-start:auto; color:var(--text-muted); display:flex}
#liveDemo .nav-item .lock svg{width:12px; height:12px}
#liveDemo .side-foot{margin-top:auto; padding-top:8px; border-top:1px solid var(--border-main); display:flex; flex-direction:column; gap:1px}
#liveDemo .side-trial{margin-top:8px; background:var(--nav-bg-active); border-radius:9px; padding:8px 11px;
  font-size:10.5px; color:var(--primary); font-weight:600}

/* ═══════════════ 4) الترويسة والمشاهد ═══════════════ */
#liveDemo .main{display:flex; flex-direction:column; overflow:hidden}
#liveDemo .topbar{background:var(--surface-solid); border-bottom:1px solid var(--border-main); padding:9px 18px;
  display:flex; align-items:center; gap:12px}
#liveDemo .crumbs{display:flex; align-items:center; gap:7px; font-size:12px; color:var(--text-secondary);
  background:var(--page-bg); border:1px solid var(--border-main); border-radius:20px; padding:4px 12px}
#liveDemo .crumbs svg{width:13px; height:13px}
#liveDemo .crumbs b{color:var(--text-title); font-weight:700}
#liveDemo .crumbs .sep{opacity:.5; display:flex}
#liveDemo .topbar .date-pill{margin-inline-start:auto; border:1px solid var(--border-main); background:var(--page-bg);
  border-radius:20px; padding:5px 12px; font-size:11px; color:var(--text-secondary);
  display:flex; gap:6px; align-items:center}
#liveDemo .add-circle{width:30px; height:30px; border-radius:50%; border:none; background:var(--primary); color:#fff;
  display:grid; place-items:center; flex:none}
#liveDemo .add-circle svg{width:15px; height:15px}
#liveDemo .content{flex:1; overflow:hidden; padding:16px 18px; position:relative}

/* المشاهد: سكرول داخلي برمجي فقط — pointer-events:none يبقيه شفافاً لعجلة الزائر */
#liveDemo .scene{position:absolute; inset:16px 18px; opacity:0; transform:translateY(10px); pointer-events:none;
  transition:opacity .45s cubic-bezier(.16,1,.3,1), transform .45s cubic-bezier(.16,1,.3,1);
  overflow:auto; scrollbar-width:none}
#liveDemo .scene::-webkit-scrollbar{width:0}
#liveDemo .scene.on{opacity:1; transform:none}

/* إبراز الهدف قبل النقر — position:relative إلزامي كي تلتصق الحلقة بالعنصر
   نفسه لا بأقرب سلف موضَّع (كانت الحلقة تهرب إلى .content/البطاقة). */
#liveDemo .hot{position:relative}
#liveDemo .hot::after{content:''; position:absolute; inset:-4px; border-radius:10px; pointer-events:none; z-index:3;
  box-shadow:0 0 0 2px var(--primary); animation:hotpulse 1.6s ease-in-out infinite}
@keyframes hotpulse{0%,100%{box-shadow:0 0 0 2px var(--primary)} 50%{box-shadow:0 0 0 6px rgb(72 112 214 / 12%)}}

/* بطاقة الشرح داخل المجسم */
#liveDemo .tip{position:absolute; z-index:45; width:250px; background:#1B2542; color:#E7ECFA;
  border-radius:11px; padding:11px 13px; box-shadow:0 18px 40px -12px rgb(6 10 26 / .7), 0 0 0 1px rgb(255 255 255 / .09);
  opacity:0; transform:translateY(6px) scale(.97); transition:opacity .3s, transform .3s; pointer-events:none}
#liveDemo .tip.on{opacity:1; transform:none}
#liveDemo .tip b{display:block; font-size:12px; font-weight:700; color:#fff; margin-bottom:4px}
#liveDemo .tip span{display:block; font-size:11.5px; line-height:1.75; color:#AEBBDD}
#liveDemo .tip::after{content:''; position:absolute; width:11px; height:11px; background:#1B2542; transform:rotate(45deg)}
#liveDemo .tip[data-dir='down']::after{top:-5px; inset-inline-start:26px}
#liveDemo .tip[data-dir='up']::after{bottom:-5px; inset-inline-start:26px}

/* ═══ ملصق العرض (الحالة الساكنة قبل التشغيل) ═══
   ليست شاشة تعتيم تنتظر نقرة: اللوحة تحتها تبقى مقروءة خلف زجاج خفيف (blur
   خفيف بدل 9px الذي كان يميّع كل شيء) فتصلح ديكوراً للقسم وحدها، وفوقها
   بطاقة تحكي ما سيراه الزائر قبل أن ينقر. كامل الغطاء مساحة نقر تبدأ من
   المحطة الأولى، وشرائح المحطات تقفز كلٌّ إلى محطتها. */
#liveDemo .play-overlay{position:absolute; inset:0; z-index:50; pointer-events:auto; overflow:hidden;
  background:
    radial-gradient(ellipse 52% 44% at 50% 52%, rgb(72 112 214 / .13), transparent 74%),
    radial-gradient(130% 115% at 50% 0%, rgb(255 255 255 / .18), rgb(255 255 255 / .38) 44%, rgb(232 238 248 / .62));
  backdrop-filter:blur(2px) saturate(1.1);
  display:grid; place-items:center; cursor:pointer;
  transition:opacity .45s, visibility .45s}
#liveDemo .play-overlay.off{opacity:0; visibility:hidden}

#liveDemo .po-card{position:relative; z-index:1; width:min(624px, 91%); padding:26px 34px 22px;
  text-align:center; border-radius:26px; border:1px solid rgb(255 255 255 / .92);
  background:linear-gradient(168deg, rgb(255 255 255 / .96), rgb(248 250 255 / .9));
  box-shadow:0 30px 64px -28px rgb(30 42 69 / .42), 0 1px 0 rgb(255 255 255 / .95) inset;
  backdrop-filter:blur(14px) saturate(1.2);
  animation:poRise .75s cubic-bezier(.2,.8,.25,1) both}
@keyframes poRise{from{opacity:0; transform:translateY(16px) scale(.985)} to{opacity:1; transform:none}}
/* خيط الهوية على الحافّة العليا — يفصل البطاقة عن اللوحة بلا إطار ثقيل */
#liveDemo .po-card::before{content:''; position:absolute; inset-inline:30%; top:0; height:2px; border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--primary), var(--accent), transparent); opacity:.85}
#liveDemo .play-overlay:hover .po-card{box-shadow:0 40px 80px -30px rgb(30 42 69 / .55), 0 1px 0 rgb(255 255 255 / .95) inset}

/* سطر مستقلّ: الشارة والزرّ كلاهما inline-flex، فبلا كتلة صريحة يصطفّان جنباً إلى جنب */
#liveDemo .po-badge{display:flex; width:max-content; margin:0 auto; align-items:center; gap:8px; padding:6px 14px; border-radius:999px;
  background:rgb(72 112 214 / .09); border:1px solid rgb(72 112 214 / .2); color:var(--primary-hover);
  font-size:11.5px; font-weight:700}
#liveDemo .po-badge i{width:7px; height:7px; border-radius:50%; background:var(--mint);
  box-shadow:0 0 0 0 rgb(31 203 176 / .55); animation:poDot 2.1s ease-out infinite}
@keyframes poDot{0%{box-shadow:0 0 0 0 rgb(31 203 176 / .55)} 70%,100%{box-shadow:0 0 0 7px rgb(31 203 176 / 0)}}

#liveDemo .play-btn{display:inline-flex; align-items:center; gap:13px; margin-top:22px;
  padding-block:8px; padding-inline-start:8px; padding-inline-end:22px;
  border:none; border-radius:999px; background:var(--primary); color:#fff; cursor:pointer;
  font-family:var(--font); text-align:start;
  box-shadow:0 14px 26px -14px rgb(72 112 214 / .8);
  transition:transform .24s, background-color .24s, box-shadow .24s}
#liveDemo .play-overlay:hover .play-btn{background:var(--primary-hover); transform:translateY(-2px);
  box-shadow:0 20px 34px -14px rgb(72 112 214 / .9)}
#liveDemo .play-btn .ring{width:46px; height:46px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center;
  background:rgb(255 255 255 / .18); border:1px solid rgb(255 255 255 / .38);
  box-shadow:0 0 0 0 rgb(255 255 255 / .5); animation:ringpulse 2.2s ease-out infinite}
#liveDemo .play-btn svg{width:20px; height:20px; margin-inline-start:-2px}
#liveDemo .play-btn .t1{display:block; font-size:15.5px; font-weight:800; line-height:1.4}
#liveDemo .play-btn .t2{display:block; font-size:11.5px; font-weight:500; color:rgb(255 255 255 / .82)}
@keyframes ringpulse{0%{box-shadow:0 0 0 0 rgb(255 255 255 / .5)} 100%{box-shadow:0 0 0 14px rgb(255 255 255 / 0%)}}

/* محطات الرحلة: ديكور يشرح ما في العرض، وكلٌّ منها مدخل مباشر إلى محطته */
#liveDemo .po-chapters{display:flex; flex-wrap:wrap; justify-content:center; gap:6px;
  margin-top:22px; padding-top:18px; border-top:1px solid var(--border-main)}
#liveDemo .po-chip{display:inline-flex; align-items:center; gap:6px; padding:7px 11px; white-space:nowrap;
  border:1px solid var(--border-main); border-radius:999px; background:rgb(255 255 255 / .82);
  color:var(--text-secondary); font-family:var(--font); font-size:11px; font-weight:600; cursor:pointer;
  transition:transform .18s, border-color .18s, color .18s, background-color .18s}
#liveDemo .po-chip svg{width:14px; height:14px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; color:var(--primary)}
#liveDemo .po-chip:hover{transform:translateY(-1px); border-color:var(--primary); background:#fff; color:var(--text-title)}
#liveDemo .po-chip--more{border-style:dashed; background:none; color:var(--text-muted); cursor:inherit}
#liveDemo .po-chip--more svg{color:var(--text-muted)}
#liveDemo .po-chip--more:hover{transform:none; border-color:var(--border-main); background:none; color:var(--text-muted)}

/* الشاشات الضيّقة: النافذة تصير عمودية وأقصر — الملصق يتقلّص معها بلا حذف محتوى */
@media (max-width:980px){
  #liveDemo .po-card{width:min(440px,92%); padding:22px 20px 20px; border-radius:22px}
  #liveDemo .play-btn{margin-top:18px; padding-inline-end:18px}
  #liveDemo .play-btn .ring{width:40px; height:40px}
  #liveDemo .play-btn svg{width:17px; height:17px}
  #liveDemo .play-btn .t1{font-size:14px}
  #liveDemo .po-chapters{margin-top:16px; padding-top:14px; gap:6px}
  #liveDemo .po-chip{padding:6px 10px; font-size:10.5px}
  #liveDemo .po-chip svg{width:12px; height:12px}
  #liveDemo .end-title{font-size:16.5px}
  #liveDemo .end-lead{font-size:11.5px; max-width:340px}
  #liveDemo .end-item{padding:7px 10px; font-size:10.5px}
  #liveDemo .end-item svg{width:12px; height:12px}
  #liveDemo .end-cta{padding:11px 18px; font-size:12.5px}
  #liveDemo .end-replay{padding:11px 16px; font-size:11.5px}
}

/* ═══════════════ 5) أشرطة الأدوات — xtabs من orders-cards.css (v2) ═══════════════ */
#liveDemo .xcontrols{display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-bottom:10px}
#liveDemo .xspacer{flex:1}
#liveDemo .xtabs{display:flex; flex-wrap:wrap; align-items:center; gap:4px; border:1px solid var(--border-main);
  background:var(--surface-main); border-radius:14px; padding:4px; box-shadow:var(--shadow-sm);
  width:fit-content; max-width:100%}
#liveDemo .xtabs-pill{border-radius:999px; padding:4px; margin-bottom:8px}
#liveDemo .xtab{position:relative; display:flex; align-items:center; gap:0; padding:6px; border:0; background:transparent;
  border-radius:999px; font-family:var(--font); font-size:12px; font-weight:500; color:var(--text-secondary);
  white-space:nowrap; transition:background-color .3s ease, color .3s ease, padding .45s cubic-bezier(.32,.72,0,1), box-shadow .3s ease}
#liveDemo .xtab svg{flex:none; width:15px; height:15px; stroke-width:1.7}
#liveDemo .xtab .xtab-label{display:inline-block; overflow:hidden; width:0; opacity:0;
  transition:width .5s cubic-bezier(.32,.72,0,1) .05s, opacity .3s ease .1s}
#liveDemo .xtab[aria-pressed='true']{background:var(--surface-hover); color:var(--primary); padding:6px 12px; gap:7px;
  font-weight:600; box-shadow:var(--shadow-sm)}
#liveDemo .xtab[aria-pressed='true'] .xtab-label{width:auto; opacity:1}
#liveDemo .xtab[data-status][aria-pressed='true']{background:var(--status-bg, var(--surface-hover)); color:var(--status-text, var(--primary))}
#liveDemo .xtab .xtab-count{display:none; align-items:center; justify-content:center; min-width:18px; height:18px;
  padding:0 5px; border-radius:999px; font-size:10.5px; font-weight:700;
  background:color-mix(in srgb, currentColor 14%, transparent)}
#liveDemo .xtab[aria-pressed='true'] .xtab-count{display:inline-flex}
#liveDemo .xsep{width:1.2px; height:20px; background:var(--border-main); margin:0 3px; flex:none}
#liveDemo .ot-search{display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:999px;
  color:var(--text-secondary); background:transparent}
#liveDemo .ot-search svg{width:15px; height:15px}
#liveDemo .ot-tool{display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:999px;
  color:var(--text-secondary); background:transparent; border:none}
#liveDemo .ot-tool svg{width:15px; height:15px; stroke-width:1.9}

/* تبويبات المخزون — stats-tabs بمظهر xtabs-pill (inventory.css) */
#liveDemo .stats-tabs{display:flex; gap:4px; flex-wrap:wrap; align-items:center; border:1px solid var(--border-main);
  background:var(--surface-main); border-radius:999px; padding:4px; margin-bottom:9px;
  box-shadow:var(--shadow-sm); width:fit-content; max-width:100%}
#liveDemo .stat-tab{display:inline-flex; align-items:center; gap:0; justify-content:center; padding:6px; border-radius:999px;
  border:0; background:transparent; color:var(--text-secondary); font-family:var(--font); font-size:12px;
  font-weight:500; white-space:nowrap; position:relative;
  transition:background-color .3s ease, color .3s ease, padding .45s cubic-bezier(.32,.72,0,1), box-shadow .3s ease}
#liveDemo .stat-tab svg{flex:none; width:15px; height:15px; stroke-width:1.7}
#liveDemo .stat-tab .stat-tab-label{display:inline-block; overflow:hidden; width:0; opacity:0;
  transition:width .5s cubic-bezier(.32,.72,0,1) .05s, opacity .3s ease .1s}
#liveDemo .stat-tab.active{background:var(--surface-hover); color:var(--primary); padding:6px 12px; gap:7px;
  font-weight:600; box-shadow:var(--shadow-sm)}
#liveDemo .stat-tab.active .stat-tab-label{width:auto; opacity:1}
#liveDemo .stat-tab .stat-count{background:var(--surface-hover); color:var(--text-secondary); padding:1px 6px;
  border-radius:999px; font-size:10px}
#liveDemo .stat-tab.active .stat-count{background:color-mix(in srgb, var(--primary) 14%, transparent); color:var(--primary)}

/* ═══════════════ 6) الداشبورد — طابق home.html ═══════════════ */
#liveDemo .kpi06{display:grid; grid-template-columns:repeat(4,1fr); background:var(--surface-solid);
  border-radius:10px; box-shadow:var(--shadow-sm); overflow:hidden}
#liveDemo .kpi06__tile{padding:14px 16px}
#liveDemo .kpi06__tile + .kpi06__tile{border-inline-start:1px solid var(--border-light)}
#liveDemo .kpi06__head{display:flex; align-items:center; justify-content:space-between; margin-bottom:9px}
#liveDemo .kpi06__title{font-size:11.5px; color:var(--text-secondary); font-weight:600}
#liveDemo .kpi06__icon{width:30px; height:30px; border-radius:50%; border:1px solid var(--border-light); display:grid; place-items:center}
#liveDemo .kpi06__icon svg{width:15px; height:15px}
#liveDemo .kpi06--orders .kpi06__icon{color:var(--primary); background:rgb(72 112 214 / 7%)}
#liveDemo .kpi06--sales .kpi06__icon{color:var(--ready-text); background:var(--ready-bg)}
#liveDemo .kpi06--fresh .kpi06__icon{color:var(--pending-text); background:var(--pending-bg)}
#liveDemo .kpi06--done .kpi06__icon{color:var(--completed-text); background:var(--completed-bg)}
#liveDemo .kpi06__value{font-size:23px; font-weight:800; color:var(--text-title); letter-spacing:-.02em}
#liveDemo .kpi06__foot{display:flex; align-items:center; gap:8px; margin-top:5px}
#liveDemo .kpi06__range{font-size:10px; color:var(--text-secondary)}
#liveDemo .trend{font-size:10px; font-weight:700; border-radius:14px; padding:1.5px 8px}
#liveDemo .trend-up{color:var(--ready-text); background:var(--ready-bg)}

#liveDemo .ap-card{background:var(--surface-solid); border-radius:10px; box-shadow:var(--shadow-sm); margin-top:14px}
#liveDemo .ap-head{padding:14px 18px 0}
#liveDemo .ap-title{font-size:14px; font-weight:800; color:var(--text-title)}
#liveDemo .ap-sub{font-size:11px; color:var(--text-secondary); margin-top:3px}
#liveDemo .ap-body{display:grid; grid-template-columns:1fr 1.2fr; padding:14px 18px 16px}
#liveDemo .ap-region-head{display:flex; align-items:center; margin-bottom:10px}
#liveDemo .ap-region-title{font-size:12px; font-weight:700; color:var(--text-title)}
#liveDemo .ap-region-count{margin-inline-start:auto; font-size:10.5px; color:var(--text-secondary)}
#liveDemo .ap-status{border-inline-end:1px solid var(--border-light); padding-inline-end:18px}
#liveDemo .ap-feed{padding-inline-start:18px}
#liveDemo .ap-donut{display:flex; justify-content:center; margin:2px 0 10px}
#liveDemo .donut-wrap{position:relative; width:130px; height:130px}
#liveDemo .donut-wrap svg{transform:rotate(-90deg)}
#liveDemo .donut-c{fill:none; stroke-width:15}
#liveDemo .donut-center{position:absolute; inset:0; display:grid; place-items:center; text-align:center}
#liveDemo .donut-center b{display:block; font-size:19px; color:var(--text-title)}
#liveDemo .donut-center span{font-size:9.5px; color:var(--text-secondary)}
#liveDemo .ap-breakdown{display:flex; flex-direction:column; gap:7px}
#liveDemo .bl-row{display:grid; grid-template-columns:76px 1fr 34px; align-items:center; gap:9px; font-size:11px}
#liveDemo .bl-row .nm{display:flex; align-items:center; gap:6px; color:var(--text-secondary)}
#liveDemo .bl-row .nm i{width:8px; height:8px; border-radius:3px; flex:none}
#liveDemo .bl-row .bar{height:6px; border-radius:6px; background:var(--border-main); overflow:hidden}
#liveDemo .bl-row .bar i{display:block; height:100%; border-radius:6px}
#liveDemo .bl-row .ct{font-weight:700; color:var(--text-title); text-align:end}
#liveDemo .feed-item{display:flex; gap:11px; padding:8px 10px; border-radius:7px}
#liveDemo .feed-item .ic{width:31px; height:31px; border-radius:50%; display:grid; place-items:center; font-size:14px; flex:none}
#liveDemo .feed-item .t1{font-size:12px; font-weight:600; color:var(--text-title)}
#liveDemo .feed-item .t1 .hl{color:var(--primary)}
#liveDemo .feed-item .t2{font-size:10.5px; color:var(--text-secondary); margin-top:2px}
#liveDemo .ap-show-all{display:inline-flex; align-items:center; gap:5px; margin:6px 10px 0; font-size:11.5px;
  font-weight:700; color:var(--primary); text-decoration:none}

#liveDemo .sc-card{background:var(--surface-solid); border-radius:10px; box-shadow:var(--shadow-sm);
  margin-top:14px; padding:14px 18px 12px}
#liveDemo .sc-head{display:flex; align-items:center}
#liveDemo .sc-head-tools{margin-inline-start:auto}
#liveDemo .sc-compare{display:flex; align-items:center; gap:8px; font-size:11px; color:var(--text-secondary)}
#liveDemo .sc-switch{width:34px; height:19px; border-radius:20px; background:var(--primary); border:none; position:relative}
#liveDemo .sc-switch .knob{position:absolute; top:2.5px; inset-inline-end:2.5px; width:14px; height:14px; border-radius:50%; background:#fff}
#liveDemo .sc-tabs{display:inline-flex; gap:5px; background:var(--page-bg); border-radius:8px; padding:3.5px; margin:10px 0 8px}
#liveDemo .sc-tab{border:none; background:none; font-family:var(--font); font-size:11.5px; font-weight:600;
  color:var(--text-secondary); border-radius:6px; padding:5px 16px}
#liveDemo .sc-tab.on{background:var(--surface-solid); color:var(--primary); font-weight:700; box-shadow:var(--shadow-sm)}
#liveDemo .sc-chart svg{width:100%; height:auto; display:block}
#liveDemo .sc-line{fill:none; stroke:var(--primary); stroke-width:2.5; stroke-linecap:round}
#liveDemo .sc-line.prev{stroke:var(--border-main); stroke-width:1.8; stroke-dasharray:5 5}
#liveDemo .sc-area{fill:url(#scGrad)}
#liveDemo .sc-dot{fill:#fff; stroke:var(--primary); stroke-width:2.5}
#liveDemo .axis-label{font-size:9px; fill:var(--text-secondary); font-family:var(--font)}

/* ═══════════════ 7) الطلبات — بطاقات: نقل حرفي من orders-cards.css ═══════════════ */
#liveDemo .view{display:none}
#liveDemo .view.on{display:block}
#liveDemo .oc-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}

#liveDemo .oc-card{position:relative; display:flex; flex-direction:column;
  background:var(--surface-solid); border:none;
  --oc-r-big:40px; --oc-r:16px;
  border-start-end-radius:var(--oc-r-big); border-start-start-radius:var(--oc-r);
  border-end-start-radius:var(--oc-r); border-end-end-radius:var(--oc-r);
  padding:16px; box-shadow:var(--shadow-md); overflow:hidden;
  transition:box-shadow .22s ease}
#liveDemo .oc-card.lift{box-shadow:var(--shadow-lg),
  0 0 0 1px color-mix(in srgb, var(--oc-band) 32%, transparent),
  0 18px 40px -14px color-mix(in srgb, var(--oc-band) 48%, transparent)}
/* نطاقات الحالة — كتل [data-st] كما في orders-cards.css */
#liveDemo .oc-card[data-st='new']{--oc-band:var(--new-text); --oc-band-bg:var(--new-bg); --oc-band-ink:var(--new-text)}
#liveDemo .oc-card[data-st='ready']{--oc-band:var(--ready-text); --oc-band-bg:var(--ready-bg); --oc-band-ink:var(--ready-text)}
#liveDemo .oc-card[data-st='delivering']{--oc-band:var(--delivering-text); --oc-band-bg:var(--delivering-bg); --oc-band-ink:var(--delivering-text)}
#liveDemo .oc-card[data-st='completed']{--oc-band:var(--completed-text); --oc-band-bg:var(--completed-bg); --oc-band-ink:var(--completed-text)}
#liveDemo .oc-card[data-st='collected']{--oc-band:var(--collected-text); --oc-band-bg:var(--collected-bg); --oc-band-ink:var(--collected-text)}
#liveDemo .oc-card[data-st='pending']{--oc-band:var(--pending-text); --oc-band-bg:var(--pending-bg); --oc-band-ink:var(--pending-text)}
#liveDemo .oc-card[data-st='review']{--oc-band:var(--review-text); --oc-band-bg:var(--review-bg); --oc-band-ink:var(--review-text)}
#liveDemo .oc-card[data-st='cancelled']{--oc-band:var(--cancelled-text); --oc-band-bg:var(--cancelled-bg); --oc-band-ink:var(--cancelled-text)}

#liveDemo .oc-top{display:flex; align-items:center; gap:8px; margin-bottom:10px; padding-inline-start:10px}
#liveDemo .oc-id{font-size:14.5px; font-weight:700; color:var(--text-title); letter-spacing:-.01em}
#liveDemo .oc-id-meta{font-size:11px; color:var(--text-secondary); font-weight:500}
/* الرقاقة: خلفيتها --oc-band-bg وحبرها --oc-band-ink ونقطة --oc-band — حرفياً */
#liveDemo .oc-chip{display:inline-flex; align-items:center; gap:6px; margin-inline-start:auto;
  padding:6px 12px; font-size:12px; font-weight:700; border-radius:999px;
  color:var(--oc-band-ink, var(--text-title));
  background:var(--oc-band-bg, var(--surface-solid));
  white-space:nowrap}
#liveDemo .oc-chip::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--oc-band, var(--primary))}
#liveDemo .oc-top .oc-chip{padding:4px 9px; font-size:11px; gap:5px}
#liveDemo .oc-top .oc-chip::before{width:5px; height:5px}
#liveDemo .oc-chip-btn{cursor:none; border:none; font-family:var(--font)}
#liveDemo .oc-chip.s-new{background:var(--new-bg); color:var(--new-text); --oc-band:var(--new-text)}
#liveDemo .oc-chip.s-ready{background:var(--ready-bg); color:var(--ready-text); --oc-band:var(--ready-text)}
#liveDemo .oc-chip.s-delivering{background:var(--delivering-bg); color:var(--delivering-text); --oc-band:var(--delivering-text)}
#liveDemo .oc-chip.s-completed{background:var(--completed-bg); color:var(--completed-text); --oc-band:var(--completed-text)}
#liveDemo .oc-chip.s-pending{background:var(--pending-bg); color:var(--pending-text); --oc-band:var(--pending-text)}
#liveDemo .oc-chip.s-cancelled{background:var(--cancelled-bg); color:var(--cancelled-text); --oc-band:var(--cancelled-text)}

#liveDemo .oc-name{display:flex; align-items:baseline; gap:6px; margin-bottom:10px; padding-inline-start:10px;
  font-size:14.5px; font-weight:700; color:var(--text-title); letter-spacing:-.01em}
#liveDemo .oc-rows{display:flex; flex-direction:column; gap:6px; margin-bottom:10px; padding-inline-start:10px}
#liveDemo .oc-row{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-main); min-width:0}
#liveDemo .oc-row .ico{width:14px; flex-shrink:0; color:var(--text-muted); display:flex; align-items:center; justify-content:center}
#liveDemo .oc-row .value{font-weight:500; min-width:0; overflow:hidden; text-overflow:ellipsis}
#liveDemo .oc-row .value.phone{direction:ltr; text-align:match-parent; letter-spacing:.01em; font-weight:600}
#liveDemo .oc-row .value.secondary{color:var(--text-secondary)}
#liveDemo .oc-row .cur{color:var(--text-muted); font-size:10px; margin-inline-start:1px}
#liveDemo .oc-sep{color:var(--text-muted); margin:0 1px; font-size:10px}

#liveDemo .oc-track{display:flex; align-items:center; gap:8px; margin:0 0 10px; padding-inline-start:10px}
#liveDemo .oc-track .ico{width:14px; flex-shrink:0; color:var(--text-muted); display:flex; align-items:center; justify-content:center}
#liveDemo .oc-track-text{flex:1; min-width:0; font-size:11.5px; font-weight:600; color:var(--text-title);
  letter-spacing:.02em; direction:ltr; text-align:match-parent; overflow:hidden; text-overflow:ellipsis}
#liveDemo .oc-copy{flex-shrink:0; display:inline-flex; align-items:center; gap:3px; font-size:10.5px;
  font-weight:700; padding:3px 10px; border-radius:999px; background:var(--surface-solid);
  border:1px solid var(--border-light); color:var(--text-secondary)}

#liveDemo .oc-prod-head{display:flex; align-items:center; gap:8px; margin:2px 0 6px; padding-inline-start:10px;
  font-size:10px; font-weight:800; color:var(--text-muted); letter-spacing:.08em}
#liveDemo .oc-prod-head::after{content:''; flex:1; height:1px; background:var(--border-light)}
#liveDemo .oc-prod{display:flex; align-items:center; gap:10px; padding:7px 0 7px 10px}
#liveDemo .oc-prod-thumb{width:30px; height:30px; border-radius:14px; flex-shrink:0; display:flex;
  align-items:center; justify-content:center; font-weight:800; font-size:12px; color:#fff}
#liveDemo .oc-prod-thumb.g1{background:linear-gradient(135deg, var(--primary), var(--primary-soft))}
#liveDemo .oc-prod-name{flex:1; min-width:0; font-size:12.5px; font-weight:600; color:var(--text-title);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
#liveDemo .oc-prod-qty{font-size:10.5px; color:var(--text-secondary); margin-inline-start:6px}
#liveDemo .oc-prod-price{font-size:12.5px; font-weight:700; color:var(--text-title); white-space:nowrap}
#liveDemo .oc-prod-price .cur{font-size:10px; color:var(--text-muted); margin-inline-start:1px}

#liveDemo .oc-foot{display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; margin-top:auto; padding-top:12px; border-top:1px solid var(--border-main)}
#liveDemo .oc-foot-right{display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; flex-shrink:0}
#liveDemo .oc-actions{flex:0 0 auto; display:inline-flex; align-items:center; gap:6px}
/* .card-act من components.css: دائرة بحد شعرة، أيقونة 15px */
#liveDemo .card-act{display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px;
  min-width:32px; padding:0; border-radius:999px; border:1px solid var(--border-main);
  background:var(--surface-solid); color:var(--text-secondary)}
#liveDemo .card-act svg{width:14px; height:14px}
#liveDemo .oc-total-block{display:flex; flex-direction:column; gap:2px}
#liveDemo .oc-total-label{font-size:10.5px; color:var(--text-secondary); font-weight:600}
#liveDemo .oc-total-val{font-size:23px; font-weight:800; color:var(--text-title); letter-spacing:-.03em; line-height:1}
#liveDemo .oc-total-val .cur{font-size:11px; color:var(--text-secondary); font-weight:600; margin-inline-start:2px}

/* زر الواتساب المقسوم (whatsappSplitButton، iconOnly): جزء الإرسال + سهم المقدمة */
#liveDemo .oc-send{flex:0 0 auto; display:flex; justify-content:flex-end}
#liveDemo .wa-action-btn{height:30px; border-radius:999px; display:inline-flex; align-items:center; overflow:hidden;
  background:color-mix(in srgb, var(--wa-primary) 12%, var(--surface-main));
  color:var(--wa-primary);
  border:1px solid color-mix(in srgb, var(--wa-primary) 24%, var(--border-main))}
#liveDemo .wa-action-btn .wa-main{display:flex; align-items:center; justify-content:center; padding:0 9px;
  background:none; border:none; color:inherit; height:100%}
#liveDemo .wa-action-btn .wa-caret{display:flex; align-items:center; justify-content:center; padding:0 6px;
  background:none; border:none; color:inherit; height:100%; font-size:9px;
  border-inline-start:1px solid color-mix(in srgb, var(--wa-primary) 26%, transparent)}
#liveDemo .wa-action-btn svg{width:14px; height:14px}
#liveDemo .wa-action-btn.hot-f, #liveDemo .wa-action-btn:hover{background:var(--wa-primary); color:#fff; border-color:var(--wa-primary)}
/* قائمة مقدمة الدولة (showWhatsAppCountryMenu) */
#liveDemo .wa-cc-menu{position:absolute; z-index:22; background:var(--surface-solid); border:1px solid var(--border-main);
  border-radius:var(--pane-radius); box-shadow:var(--shadow-md); padding:6px; display:flex; flex-direction:column;
  gap:2px; min-width:150px; opacity:0; transform:translateY(-5px); transition:all .22s cubic-bezier(.16,1,.3,1)}
#liveDemo .wa-cc-menu.on{opacity:1; transform:none}
#liveDemo .wa-cc-menu i{display:flex; align-items:center; gap:8px; font-style:normal; font-size:12px;
  color:var(--text-title); padding:7px 12px; border-radius:var(--control-radius); direction:ltr; justify-content:flex-end}
#liveDemo .wa-cc-menu i.hot-f{background:var(--surface-hover)}

/* شارة «أصبح جاهزاً» */
#liveDemo .ready-flash{position:absolute; bottom:14px; inset-inline-start:14px; background:var(--ready-text);
  color:#fff; font-size:11.5px; font-weight:700; border-radius:999px; padding:8px 15px;
  box-shadow:0 14px 30px -12px rgb(15 140 90 / 55%);
  opacity:0; transform:translateY(8px); transition:all .35s; z-index:28}
#liveDemo .ready-flash.on{opacity:1; transform:none}
#liveDemo .dim-card{opacity:.75}

/* قائمة الحالات (ocOpenStatusMenu) — تنسدل تحت الشريحة نفسها، بنودها تحت بعضها */
#liveDemo .oc-status-menu{position:absolute; top:42px; inset-inline-end:14px; z-index:25;
  display:flex; flex-direction:column; gap:1px;
  background:color-mix(in srgb, var(--surface-solid) 92%, transparent);
  border:1px solid color-mix(in srgb, var(--border-main) 70%, transparent);
  border-radius:var(--pane-radius); box-shadow:var(--shadow-lg);
  backdrop-filter:blur(14px) saturate(140%); padding:6px; min-width:186px;
  opacity:0; transform:scale(.96); transform-origin:top center;
  transition:opacity .16s ease, transform .16s ease}
#liveDemo .oc-status-menu.on{opacity:1; transform:none}
#liveDemo .oc-menu-item{display:flex; align-items:center; gap:9px; width:100%; text-align:start; padding:7px 11px;
  border:none; background:transparent; border-radius:9px; font-family:var(--font); font-size:12.5px;
  font-weight:600; color:var(--text-main); transition:background-color .12s ease}
#liveDemo .oc-menu-item.hot-f, #liveDemo .oc-menu-item:hover{background:var(--nav-bg-active)}
#liveDemo .oc-menu-item.is-current{color:var(--text-muted)}
#liveDemo .oc-menu-dot{width:8px; height:8px; border-radius:50%; flex-shrink:0}
#liveDemo .oc-menu-cur{margin-inline-start:auto; color:var(--primary); font-weight:800}

/* ═══════════════ 8) الطلبات — عرض القائمة (جدول design-3) ═══════════════ */
#liveDemo .orders-list{border-radius:var(--pane-radius); box-shadow:var(--shadow-sm); background:var(--surface-solid); overflow:hidden}
#liveDemo .orders-list table{table-layout:fixed; width:100%; border-collapse:collapse}
#liveDemo .orders-list thead th{font-size:12px; font-weight:600; color:var(--text-title); background:var(--table-header-bg);
  padding:10px 9px; border-bottom:1px solid var(--table-header-border); text-align:start; white-space:nowrap}
#liveDemo .orders-list tbody td{padding:9px 9px; font-size:12.5px; border-bottom:1px solid var(--table-row-border);
  color:var(--text-main); vertical-align:middle; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
#liveDemo .orders-list tbody tr:nth-child(even){background:var(--table-row-alt-bg)}
#liveDemo .orders-list tbody tr.hot-f{background:var(--table-row-hover-bg)}
#liveDemo .orders-list .ot-toggle{display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px;
  border-radius:50%; border:1px solid var(--border-main); background:var(--surface-solid); color:var(--text-secondary)}
#liveDemo .orders-list .ot-toggle svg{width:12px; height:12px}
#liveDemo .orders-list .order-id-cell{font-weight:700; color:var(--text-title); padding-inline-start:14px}
#liveDemo .oc-id-wrap{display:inline-flex; align-items:center; gap:8px}
#liveDemo .oc-band{display:inline-block; width:4px; height:18px; border-radius:2px; flex-shrink:0; background:var(--primary)}
#liveDemo .oc-band.s-new{background:var(--new-text)} #liveDemo .oc-band.s-ready{background:var(--ready-text)}
#liveDemo .oc-band.s-delivering{background:var(--delivering-text)} #liveDemo .oc-band.s-completed{background:var(--completed-text)}
#liveDemo .oc-band.s-pending{background:var(--pending-text)} #liveDemo .oc-band.s-cancelled{background:var(--cancelled-text)}
#liveDemo .ot-cust{display:flex; align-items:center; gap:8px; min-width:0}
#liveDemo .ot-avatar{width:27px; height:27px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  color:#fff; font-size:10.5px; font-weight:700; flex-shrink:0; box-shadow:0 0 0 2px var(--surface-solid)}
#liveDemo .ot-cust-name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#liveDemo .ot-note-dot{width:6px; height:6px; border-radius:50%; background:var(--delivering-text); flex-shrink:0}
#liveDemo .orders-list .price-cell{font-weight:700; color:var(--text-title)}
#liveDemo .orders-list td.col-status .oc-chip{margin:0}
#liveDemo .ot-source{display:inline-flex; align-items:center; font-size:11px; padding:2px 9px; border-radius:999px;
  background:var(--table-row-alt-bg); color:var(--text-secondary)}

/* ═══════════════ 9) المودالات: تفاصيل الطلب + شاشة واتساب ═══════════════ */
#liveDemo .modal-veil{position:absolute; inset:0; background:rgb(30 42 69 / 42%); backdrop-filter:blur(2px);
  z-index:30; display:grid; place-items:center; opacity:0; pointer-events:none;
  transition:opacity .3s; border-radius:10px}
#liveDemo .modal-veil.on{opacity:1}
#liveDemo .modal{width:min(470px,92%); max-height:88%; background:var(--surface-solid); border-radius:12px;
  box-shadow:var(--shadow-lg); transform:translateY(14px) scale(.98);
  transition:transform .35s cubic-bezier(.16,1,.3,1); overflow:hidden}
#liveDemo .modal-veil.on .modal{transform:none}
#liveDemo .odd-modal{padding:0}
#liveDemo .odd-hero{display:flex; align-items:flex-start; gap:10px; padding:16px 18px;
  background:var(--ready-bg); color:var(--ready-text)}
#liveDemo .odd-id{font-size:16px; font-weight:800}
#liveDemo .odd-cust{font-size:13px; font-weight:600; margin:2px 0 7px}
#liveDemo .odd-status-chip{background:rgb(255 255 255 / 65%); border-radius:999px; padding:3px 11px;
  font-size:11px; font-weight:700}
#liveDemo .odd-close{margin-inline-start:auto; border:none; width:28px; height:28px; border-radius:50%;
  background:rgb(255 255 255 / 55%); color:inherit; font-family:var(--font)}
#liveDemo .odd-body{padding:14px 16px; max-height:370px; overflow:auto; scrollbar-width:none}
#liveDemo .odd-body::-webkit-scrollbar{width:0}
#liveDemo .odd-contact-row{display:flex; gap:8px; margin-bottom:12px}
#liveDemo .odd-contact{flex:1; text-align:center; font-size:11.5px; font-weight:700; border-radius:8px;
  padding:8px 4px; border:1px solid var(--border-main); color:var(--text-main)}
#liveDemo .odd-contact.wa{background:color-mix(in srgb, var(--wa-primary) 12%, #fff); color:#1FA353;
  border-color:color-mix(in srgb, var(--wa-primary) 30%, transparent)}
#liveDemo .odd-card{border:1px solid var(--border-light); border-radius:10px; padding:12px; margin-bottom:10px}
#liveDemo .odd-sec-title{font-size:11.5px; font-weight:800; color:var(--text-title); margin-bottom:8px}
#liveDemo .odd-addr{font-size:12.5px; color:var(--text-main)}
#liveDemo .odd-total{display:flex; justify-content:space-between; border-top:1px dashed var(--border-main);
  margin-top:8px; padding-top:8px; font-size:13px; font-weight:800; color:var(--text-title)}

#liveDemo .timeline{margin-top:4px}
#liveDemo .tl-step{display:flex; gap:11px; padding:5px 0}
#liveDemo .tl-step .pt{width:11px; height:11px; border-radius:50%; border:2.5px solid var(--border-main);
  background:#fff; flex:none; margin-top:3px}
#liveDemo .tl-step.hit .pt{border-color:var(--primary); background:var(--primary)}
#liveDemo .tl-step .t1{font-size:12px; font-weight:600; color:var(--text-title)}
#liveDemo .tl-step .t2{font-size:10.5px; color:var(--text-secondary)}
#liveDemo .tl-step.dim .t1{color:var(--text-secondary); font-weight:500}

/* شاشة واتساب: نافذة wa.me تُفتح بالرسالة مكتوبة سلفاً (openWhatsApp) */
#liveDemo .wa-win{width:min(430px,92%)}
#liveDemo .wa-url{display:flex; align-items:center; gap:8px; background:#20293F; color:#AEBBDD; padding:7px 12px;
  font-size:10.5px}
#liveDemo .wa-url .u{direction:ltr; background:rgb(255 255 255 / .08); border-radius:20px; padding:2px 10px; flex:1}
#liveDemo .wa-head{display:flex; align-items:center; gap:10px; background:#075E54; color:#fff; padding:11px 14px}
#liveDemo .wa-head .wa-av{width:33px; height:33px; border-radius:50%; background:rgb(255 255 255 / .2);
  display:grid; place-items:center; font-size:11px; font-weight:700}
#liveDemo .wa-head b{font-size:13px; display:block}
#liveDemo .wa-head small{font-size:10px; opacity:.8; direction:ltr; display:block}
#liveDemo .wa-brand{margin-inline-start:auto; font-size:10px; background:rgb(255 255 255 / 15%);
  border-radius:14px; padding:3px 10px}
#liveDemo .wa-chat{background:#ECE5DD; padding:14px 13px; min-height:168px; display:flex; flex-direction:column; justify-content:flex-end}
#liveDemo .wa-bubble{background:#DCF8C6; border-radius:10px 2px 10px 10px; padding:9px 12px; font-size:12.5px;
  line-height:1.85; align-self:flex-start; margin-inline-start:auto; max-width:90%;
  box-shadow:0 1px 1px rgb(0 0 0 / 12%); opacity:0; transform:translateY(8px) scale(.96);
  transition:all .4s cubic-bezier(.16,1,.3,1); color:#102A1E}
#liveDemo .wa-bubble.on{opacity:1; transform:none}
#liveDemo .wa-link{color:#075E54; text-decoration:underline; font-size:11.5px}
#liveDemo .wa-meta{display:flex; gap:4px; justify-content:flex-end; font-size:9.5px; color:#7A8B7F; margin-top:4px}
#liveDemo .wa-ticks{color:#4FC3F7; letter-spacing:-2px}
#liveDemo .wa-compose{display:flex; align-items:flex-end; gap:8px; background:#F0F0F0; padding:9px 11px}
#liveDemo .wa-input{flex:1; background:#fff; border-radius:16px; padding:8px 12px; font-size:12px; line-height:1.8;
  color:#102A1E; box-shadow:0 1px 1px rgb(0 0 0 / 10%); max-height:112px; overflow:hidden}
#liveDemo .wa-input .ph{color:#8C9AA0}
#liveDemo .wa-send{width:34px; height:34px; border-radius:50%; background:var(--wa-primary); color:#fff; flex:none;
  display:grid; place-items:center; position:relative}
#liveDemo .wa-send svg{width:16px; height:16px}
#liveDemo .wa-note{padding:9px 13px; font-size:10.5px; color:var(--text-secondary); text-align:center;
  background:var(--surface-solid); opacity:0; transition:opacity .45s}
#liveDemo .wa-note.on{opacity:1}
#liveDemo .wa-note b{color:var(--text-title)}

/* ═══════════════ 10) المخزون — بطاقات inv-card من inventory.css ═══════════════ */
#liveDemo .inv-cards{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
#liveDemo .inv-card{position:relative; display:flex; flex-direction:column; background:var(--surface-solid); border:none;
  --inv-r-big:40px; --inv-r:16px;
  border-start-end-radius:var(--inv-r-big); border-start-start-radius:var(--inv-r);
  border-end-start-radius:var(--inv-r); border-end-end-radius:var(--inv-r);
  padding:14px; box-shadow:var(--shadow-md); overflow:hidden}
#liveDemo .inv-card[data-type='single']{--inv-band:var(--simple-product-text); --inv-band-bg:var(--simple-product-bg)}
#liveDemo .inv-card[data-type='multi']{--inv-band:var(--multi-product-text); --inv-band-bg:var(--multi-product-bg)}
#liveDemo .inv-card[data-stock='low']{--inv-band:#e08a1f; --inv-band-bg:#fff1dd}
#liveDemo .inv-card[data-stock='out']{--inv-band:var(--danger); --inv-band-bg:var(--cancelled-bg)}
#liveDemo .inv-card[data-mtype]{--inv-band:var(--delivering-text); --inv-band-bg:var(--delivering-bg)}
#liveDemo .inv-top{display:flex; align-items:center; gap:10px; margin-bottom:11px}
#liveDemo .inv-thumb-ph{width:48px; height:48px; border-radius:12px; flex-shrink:0; background:var(--inv-band-bg);
  color:var(--inv-band); display:flex; align-items:center; justify-content:center; font-size:21px}
#liveDemo .inv-name-block{display:flex; flex-direction:column; min-width:0; flex:1}
#liveDemo .inv-name{font-size:13.5px; font-weight:700; color:var(--text-title); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
#liveDemo .inv-sub{font-size:10.5px; color:var(--text-secondary); margin-top:2px}
#liveDemo .inv-date{font-size:10.5px; color:var(--text-secondary); margin-top:2px}
#liveDemo .inv-chip{display:inline-flex; align-items:center; gap:5px; margin-inline-start:auto; align-self:flex-start;
  margin-top:2px; padding:4px 9px; font-size:11px; font-weight:700; border-radius:999px; color:var(--text-title);
  background:color-mix(in srgb, var(--inv-band, var(--primary)) 24%, var(--surface-solid)); white-space:nowrap; flex-shrink:0}
#liveDemo .inv-chip::before{content:''; width:5px; height:5px; border-radius:50%; background:var(--inv-band, var(--primary))}
#liveDemo .inv-rows{display:flex; flex-direction:column; gap:6px; margin-bottom:9px}
#liveDemo .inv-row{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-main)}
#liveDemo .inv-row .ico{width:14px; color:var(--text-muted); flex-shrink:0; display:flex; align-items:center; justify-content:center}
#liveDemo .inv-row .value{font-weight:600}
#liveDemo .inv-row .price-now{font-size:19px; font-weight:800; letter-spacing:-.02em; line-height:1; color:var(--text-title)}
#liveDemo .inv-row .price-now .cur{font-size:11px; font-weight:600; color:var(--text-muted); margin-inline-end:4px}
#liveDemo .inv-row .price-was{font-size:11px; font-weight:500; color:var(--text-muted); text-decoration:line-through; margin-inline-start:6px}
#liveDemo .inv-row .price-off{font-size:10.5px; font-weight:700; color:var(--danger); margin-inline-start:6px}
#liveDemo .inv-colors{display:flex; flex-wrap:wrap; gap:5px; margin-bottom:6px}
#liveDemo .inv-color{display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:999px;
  font-size:10.5px; font-weight:600; background:var(--multi-product-bg); color:var(--multi-product-text);
  border:1px solid var(--multi-product-border)}
#liveDemo .inv-color.is-out{background:var(--cancelled-bg); color:var(--cancelled-text); border-color:var(--danger)}
#liveDemo .inv-color-more{font-size:10.5px; color:var(--text-secondary); align-self:center; padding:0 2px}
#liveDemo .inv-reason{display:flex; align-items:flex-start; gap:7px; font-size:11px; color:var(--text-secondary); margin-bottom:8px}
#liveDemo .inv-reason .dot{width:6px; height:6px; border-radius:50%; background:var(--inv-band); margin-top:5px; flex:none}
#liveDemo .inv-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  margin-top:auto; padding-top:11px; border-top:1px solid var(--border-main)}
#liveDemo .inv-foot-meta{display:inline-flex; align-items:center; gap:14px}
#liveDemo .inv-stat{display:flex; flex-direction:column; align-items:flex-start; gap:1px}
#liveDemo .inv-stat-label{font-size:10px; color:var(--text-secondary); font-weight:600; letter-spacing:.4px}
#liveDemo .inv-stat-value{font-size:15px; font-weight:800; color:var(--text-title); direction:ltr}
#liveDemo .inv-stat-value.is-low{color:#c97315}
#liveDemo .inv-stat-value.is-zero{color:var(--danger)}
#liveDemo .inv-actions{flex:0 0 auto; display:inline-flex; align-items:center; gap:6px}
#liveDemo .inv-alert{display:flex; align-items:center; gap:9px; background:#fff1dd; border:1px solid #f0d3a4;
  color:#96540a; border-radius:9px; padding:9px 12px; font-size:11.5px; font-weight:600; margin-bottom:10px}
#liveDemo .inv-alert svg{width:15px; height:15px; flex:none}

/* ═══════════════ 11) بقية الصفحات — بطاقات بنفس توقيع oc-card ═══════════════ */
#liveDemo .grid2{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
#liveDemo .grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
#liveDemo .pcard{position:relative; display:flex; flex-direction:column; background:var(--surface-solid); border:none;
  border-start-end-radius:40px; border-start-start-radius:16px; border-end-start-radius:16px; border-end-end-radius:16px;
  padding:14px; box-shadow:var(--shadow-md)}
#liveDemo .pcard-top{display:flex; align-items:center; gap:8px; margin-bottom:9px; padding-inline-start:8px}
#liveDemo .pcard-title{font-size:13.5px; font-weight:700; color:var(--text-title)}
#liveDemo .pcard-meta{font-size:10.5px; color:var(--text-secondary)}
#liveDemo .pcard-chip{display:inline-flex; align-items:center; gap:5px; margin-inline-start:auto; padding:4px 9px;
  font-size:11px; font-weight:700; border-radius:999px; color:var(--pc-ink, var(--text-title));
  background:var(--pc-bg, var(--surface-hover)); white-space:nowrap}
#liveDemo .pcard-chip::before{content:''; width:5px; height:5px; border-radius:50%; background:var(--pc-ink, var(--primary))}
#liveDemo .pcard-rows{display:flex; flex-direction:column; gap:6px; margin-bottom:9px; padding-inline-start:8px}
#liveDemo .pcard-row{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-main)}
#liveDemo .pcard-row .ico{width:14px; color:var(--text-muted); display:flex; flex:none}
#liveDemo .pcard-row .lbl{color:var(--text-secondary)}
#liveDemo .pcard-row .val{margin-inline-start:auto; font-weight:700; color:var(--text-title)}
#liveDemo .pcard-body{display:flex; gap:8px; font-size:11.5px; color:var(--text-secondary); line-height:1.7;
  margin-bottom:9px; padding-inline-start:8px}
#liveDemo .pcard-body .dot{width:6px; height:6px; border-radius:50%; background:var(--pc-ink, var(--primary)); margin-top:6px; flex:none}
#liveDemo .pcard-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto;
  padding-top:11px; border-top:1px solid var(--border-main)}
#liveDemo .pcard-total-label{font-size:10.5px; color:var(--text-secondary); font-weight:600; display:block}
#liveDemo .pcard-total-val{font-size:21px; font-weight:800; color:var(--text-title); letter-spacing:-.03em; line-height:1.1}
#liveDemo .pcard-total-val .cur{font-size:11px; color:var(--text-secondary); font-weight:600; margin-inline-start:2px}
#liveDemo .pcard-total-val.good{color:var(--ready-text)} #liveDemo .pcard-total-val.bad{color:var(--cancelled-text)}
#liveDemo .tagline{display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700; border-radius:999px;
  padding:3px 9px; background:var(--ready-bg); color:var(--ready-text)}
#liveDemo .tagline.bad{background:var(--cancelled-bg); color:var(--cancelled-text)}
#liveDemo .page-note{font-size:11.5px; color:var(--text-secondary); margin:2px 0 10px; line-height:1.8}

/* التقارير — rp-tabs + شبكة بطاقات */
#liveDemo .rp-tabs{display:flex; gap:4px; flex-wrap:wrap; align-items:center; border:1px solid var(--border-main);
  background:var(--surface-main); border-radius:999px; padding:4px; margin-bottom:10px;
  box-shadow:var(--shadow-sm); width:fit-content}
#liveDemo .rp-tab{border:none; background:none; font-family:var(--font); font-size:12px; font-weight:600;
  color:var(--text-secondary); border-radius:999px; padding:6px 12px}
#liveDemo .rp-tab.active{background:var(--surface-hover); color:var(--primary); box-shadow:var(--shadow-sm)}
#liveDemo .rp-kpi{background:var(--surface-solid); border-radius:10px; box-shadow:var(--shadow-sm); padding:13px 15px}
#liveDemo .rp-kpi span{font-size:11px; color:var(--text-secondary); font-weight:600}
#liveDemo .rp-kpi b{display:block; font-size:20px; font-weight:800; color:var(--text-title); margin-top:6px; letter-spacing:-.02em}
#liveDemo .rp-kpi i{font-style:normal; font-size:10px; font-weight:700; border-radius:14px; padding:1.5px 8px;
  background:var(--ready-bg); color:var(--ready-text)}
#liveDemo .rp-bars{display:flex; align-items:flex-end; gap:10px; height:120px; padding:6px 4px 0}
#liveDemo .rp-bars i{flex:1; border-radius:6px 6px 3px 3px; background:linear-gradient(180deg,var(--primary),var(--primary-soft));
  display:block}
#liveDemo .card{background:var(--surface-solid); border-radius:10px; box-shadow:var(--shadow-sm); padding:15px}
#liveDemo .card-head{display:flex; align-items:center; margin-bottom:10px}
#liveDemo .card-head h4{font-size:13px; font-weight:800; color:var(--text-title)}
#liveDemo .card-head .more{margin-inline-start:auto; font-size:10.5px; color:var(--text-secondary)}

/* دردشة الفريق + المساعد الذكي */
#liveDemo .chat{display:flex; flex-direction:column; height:100%}
#liveDemo .msgs{flex:1; display:flex; flex-direction:column; gap:10px; padding:4px 2px}
#liveDemo .msg{max-width:78%; display:flex; gap:9px; align-items:flex-end}
#liveDemo .av{width:28px; height:28px; border-radius:50%; background:rgb(72 112 214 / 12%); color:var(--primary);
  display:grid; place-items:center; font-size:10.5px; font-weight:700; flex:none}
#liveDemo .msg .who{font-size:10px; color:var(--text-secondary); margin-bottom:3px}
#liveDemo .bubble{background:var(--surface-solid); border-radius:12px 12px 12px 4px; padding:9px 13px;
  font-size:12.5px; box-shadow:var(--shadow-sm); line-height:1.6}
#liveDemo .msg.me{align-self:flex-start; flex-direction:row-reverse}
#liveDemo .msg.me .bubble{background:var(--primary); color:#fff; border-radius:12px 12px 4px 12px}
#liveDemo .typing{display:inline-flex; gap:4px; padding:11px 15px}
#liveDemo .typing i{width:6px; height:6px; border-radius:50%; background:var(--text-secondary); animation:ty 1.2s infinite}
#liveDemo .typing i:nth-child(2){animation-delay:.18s} #liveDemo .typing i:nth-child(3){animation-delay:.36s}
@keyframes ty{0%,60%,100%{opacity:.35; transform:none} 30%{opacity:1; transform:translateY(-3px)}}

#liveDemo .ai-wrap{display:grid; grid-template-columns:1fr 250px; gap:14px; height:100%}
#liveDemo .ai-msg{max-width:88%; padding:11px 15px; border-radius:14px; font-size:12.5px; line-height:1.75}
#liveDemo .ai-msg.bot{background:var(--surface-solid); box-shadow:var(--shadow-sm); border-radius:14px 14px 14px 4px}
#liveDemo .ai-msg.user{background:var(--primary); color:#fff; margin-inline-start:auto; border-radius:14px 14px 4px 14px}
#liveDemo .ai-msg b{color:var(--primary)}
#liveDemo .ai-insight{border:1px dashed rgb(72 112 214 / 40%); background:rgb(72 112 214 / 5%);
  border-radius:7px; padding:11px; margin-top:8px; font-size:12px}
#liveDemo .ai-side .card{margin-bottom:12px}
#liveDemo .ai-side h4{font-size:12px; font-weight:700; color:var(--text-title); margin-bottom:9px}
#liveDemo .tag-ai{display:inline-flex; align-items:center; gap:5px; background:linear-gradient(135deg,var(--primary),var(--accent));
  color:#fff; font-size:10px; font-weight:700; border-radius:16px; padding:3px 10px}
#liveDemo .eq{display:inline-flex; gap:2.5px; align-items:flex-end; height:12px}
#liveDemo .eq i{width:3px; background:#fff; border-radius:2px; animation:eq 1.4s ease-in-out infinite}
#liveDemo .eq i:nth-child(1){height:5px} #liveDemo .eq i:nth-child(2){height:11px; animation-delay:.15s}
#liveDemo .eq i:nth-child(3){height:8px; animation-delay:.3s} #liveDemo .eq i:nth-child(4){height:12px; animation-delay:.45s}
@keyframes eq{0%,100%{transform:scaleY(.5)} 50%{transform:scaleY(1)}}

/* ═══ الغطاء الختامي «والمزيد» — يقف عنده العرض نهائياً: نفس لغة ملصق
   البداية (زجاج خفيف فوق اللوحة + بطاقة)، مع ما لم يُعرض في الجولة،
   وزرّي «ابدأ التجربة» و«إعادة العرض» — الإعادة هنا يدوية فقط ═══ */
#liveDemo .end-overlay{position:absolute; inset:0; z-index:50; pointer-events:auto; overflow:hidden;
  background:
    radial-gradient(ellipse 52% 44% at 50% 52%, rgb(72 112 214 / .13), transparent 74%),
    radial-gradient(130% 115% at 50% 0%, rgb(255 255 255 / .18), rgb(255 255 255 / .38) 44%, rgb(232 238 248 / .62));
  backdrop-filter:blur(6px) saturate(1.1);
  display:grid; place-items:center;
  opacity:0; visibility:hidden; transition:opacity .45s, visibility .45s}
#liveDemo .end-overlay:not(.off){opacity:1; visibility:visible}
#liveDemo .end-overlay .po-card{cursor:default; animation:none; opacity:0; transform:translateY(16px) scale(.985);
  transition:opacity .5s cubic-bezier(.2,.8,.25,1), transform .5s cubic-bezier(.2,.8,.25,1)}
#liveDemo .end-overlay:not(.off) .po-card{opacity:1; transform:none}

#liveDemo .end-title{margin:12px 0 0; font-size:19px; font-weight:800; color:var(--ink)}
#liveDemo .end-lead{margin:7px auto 0; max-width:440px; font-size:12.5px; line-height:1.8; color:var(--text-secondary)}
/* ما لم يُعرض: شبكة عبارات بنفس لغة شرائح المحطات */
#liveDemo .end-grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:7px; margin-top:18px}
#liveDemo .end-item{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; text-align:start;
  border:1px solid var(--border-main); border-radius:999px; background:rgb(255 255 255 / .82);
  color:var(--text-secondary); font-size:11.5px; font-weight:600}
#liveDemo .end-item svg{width:14px; height:14px; flex:0 0 auto; fill:none; stroke:var(--primary);
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
/* سطر «والكثير الكثير من المزيد»: بستايل متقطّع كي يفهم الزائر أن القائمة لا تنحصر بالستّة */
#liveDemo .end-item--more{grid-column:1 / -1; justify-content:center; border-style:dashed;
  background:none; color:var(--text-muted)}
/* زرّا الختام: التجربة (أساسي) + إعادة العرض (ثانوي) */
#liveDemo .end-actions{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; margin-top:20px}
#liveDemo .end-cta{display:inline-flex; align-items:center; gap:9px; padding:12px 24px; text-decoration:none;
  border-radius:999px; background:var(--primary); color:#fff; font-size:13.5px; font-weight:800;
  box-shadow:0 14px 26px -14px rgb(72 112 214 / .8);
  transition:transform .24s, background-color .24s, box-shadow .24s}
#liveDemo .end-cta:hover{background:var(--primary-hover); transform:translateY(-2px);
  box-shadow:0 20px 34px -14px rgb(72 112 214 / .9)}
#liveDemo .end-cta .t2{display:block; font-size:10.5px; font-weight:500; color:rgb(255 255 255 / .82)}
#liveDemo .end-replay{display:inline-flex; align-items:center; gap:7px; padding:12px 20px; cursor:pointer;
  border:1px solid var(--border-main); border-radius:999px; background:rgb(255 255 255 / .85);
  color:var(--text-secondary); font-family:var(--font); font-size:12.5px; font-weight:700;
  transition:transform .18s, border-color .18s, color .18s}
#liveDemo .end-replay:hover{transform:translateY(-1px); border-color:var(--primary); color:var(--text-title)}
#liveDemo .end-replay svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round}
/* ملاحظة الختام تحت الزرّين: البرنامج يتطوّر باستمرار */
#liveDemo .end-note{display:flex; align-items:flex-start; justify-content:center; gap:7px;
  max-width:460px; margin:16px auto 0; padding-top:14px; border-top:1px solid var(--border-main);
  font-size:11px; line-height:1.8; color:var(--text-secondary); text-align:start}
#liveDemo .end-note svg{width:14px; height:14px; flex:0 0 auto; margin-top:2px; fill:var(--amber, #F59E0B);
  stroke:none}

#liveDemo .page-head{display:flex; align-items:center; gap:10px; margin-bottom:11px}
#liveDemo .page-head h3{font-size:15px; font-weight:800; color:var(--text-title)}
#liveDemo .st-pill{display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700;
  border-radius:20px; padding:3px 11px}
#liveDemo .st-pill i{width:6px; height:6px; border-radius:50%; background:currentColor}
#liveDemo .st-new{background:var(--new-bg); color:var(--new-text)}
#liveDemo .st-ready{background:var(--ready-bg); color:var(--ready-text)}
#liveDemo .st-delivering{background:var(--delivering-bg); color:var(--delivering-text)}

@media (prefers-reduced-motion: reduce){ #liveDemo *{animation:none !important; transition:none !important} }
@media (max-width:980px){
  /* الجدول على الشاشات الضيّقة: نُسقط المدينة والتاريخ وواتساب، ونُبطل عروض
     colgroup ونعود إلى قياس تلقائي بحسب المحتوى — عرض ثابت لثمانية أعمدة
     يفيض عن 430px ويُقصّ. */
  #liveDemo .orders-list table{table-layout:auto; min-width:0}
  #liveDemo .orders-list col{width:auto !important}
  #liveDemo .orders-list th:nth-child(4), #liveDemo .orders-list td:nth-child(4),
  #liveDemo .orders-list th:nth-child(6), #liveDemo .orders-list td:nth-child(6),
  #liveDemo .orders-list th:nth-child(8), #liveDemo .orders-list td:nth-child(8){display:none}
  #liveDemo .orders-list .ot-avatar{display:none}
  #liveDemo .orders-list thead th{padding:9px 7px; font-size:11.5px}
  #liveDemo .orders-list tbody td{padding:9px 7px; font-size:12px}
  #liveDemo{grid-template-columns:1fr}
  /* التلفون/التابلت: القائمة درج منزلق من جهة البداية يقوده المؤشّر الافتراضي
     عبر زر الهامبرغر — لا يُخفى كاملاً كي يبقى التنقّل بين الصفحات مرئياً. */
  #liveDemo .side{position:absolute; inset-block:0; inset-inline-start:0; width:236px; z-index:34;
    box-shadow:var(--shadow-lg); transform:translateX(-100%); transition:transform .28s cubic-bezier(.16,1,.3,1)}
  /* النسخة المفتوحة بخصوصية أعلى من قاعدة الإخفاء الاتجاهية كي لا تبقى
     مخفية خارج الشاشة في RTL (خطأ specificity: قاعدة rtl كانت تغلب .open) */
  html[dir="rtl"] #liveDemo .side{transform:translateX(100%)}
  html[dir="rtl"] #liveDemo .side.open, #liveDemo .side.open{transform:none}
  /* تعتيم المشهد النشط وحده: قاعدة أعمّ كانت توقظ المشاهد المخفية (opacity:0)
     فتتراكب الصفحات كلها خلف الدرج بشفافية غريبة */
  #liveDemo.drawer-open .scene.on{opacity:.45; transition:opacity .25s}
  #liveDemo .kpi06{grid-template-columns:repeat(2,1fr)}
  #liveDemo .kpi06__tile:nth-child(3){border-inline-start:none; border-top:1px solid var(--border-light)}
  #liveDemo .kpi06__tile:nth-child(4){border-top:1px solid var(--border-light)}
  #liveDemo .ap-body{grid-template-columns:1fr}
  #liveDemo .ap-status{border-inline-end:none; border-bottom:1px solid var(--border-light); padding:0 0 14px; margin-bottom:10px}
  #liveDemo .ap-feed{padding-inline-start:0}
  #liveDemo .oc-grid, #liveDemo .inv-cards, #liveDemo .grid2{grid-template-columns:1fr}
  #liveDemo .grid3{grid-template-columns:repeat(2,1fr)}
  #liveDemo .rp-tabs{flex-wrap:nowrap; overflow:hidden}
  #liveDemo .ai-wrap{grid-template-columns:1fr} #liveDemo .ai-side{display:none}
  #liveDemo .end-grid{grid-template-columns:1fr}
  /* التلفون/التابلت: بطاقة الشرح تبقى ظاهرة (كانت تُخفى فلا يقرأ الزائر شرح
     «فلترة بنقرة» ولا «عرض كل الطلبات») — عرضها يتكيّف مع ضيق الشاشة،
     وتطبيق showTip يحصر إحداثياتها داخل إطار المسرح أصلاً */
  #liveDemo .tip{width:min(250px, calc(100vw - 48px)); max-width:calc(100% - 20px)}
  #liveDemo #vCursor{display:none}
}

/* ═══════════════ 12) صفحة تتبّع الطلب — سطح الزبون (app/track-order.html) ═══════════════ */
#liveDemo .public-bar{display:flex; align-items:center; gap:9px; background:var(--surface-solid);
  border-bottom:1px solid var(--border-main); padding:9px 18px; font-size:11.5px; color:var(--text-secondary)}
#liveDemo .public-bar .pb-logo{width:22px; height:22px; border-radius:6px; background:linear-gradient(135deg,var(--primary),var(--accent));
  display:grid; place-items:center; color:#fff; font-weight:800; font-size:11px}
#liveDemo .public-bar b{color:var(--text-title); font-size:12.5px}
#liveDemo .public-bar .pb-tag{margin-inline-start:auto; background:var(--page-bg); border:1px solid var(--border-main);
  border-radius:20px; padding:3px 10px; font-size:10.5px}
#liveDemo .trk{max-width:620px; margin:0 auto}
#liveDemo .trk-head{text-align:center; margin-bottom:14px}
#liveDemo .trk-head h1{font-size:19px; font-weight:800; color:var(--text-title)}
#liveDemo .trk-head p{font-size:11.5px; color:var(--text-secondary); margin-top:5px}
#liveDemo .trk-search{background:var(--surface-solid); border-radius:12px; box-shadow:var(--shadow-sm); padding:15px}
#liveDemo .trk-label{font-size:11.5px; font-weight:700; color:var(--text-title); margin-bottom:7px; display:block}
#liveDemo .trk-input{display:flex; align-items:center; gap:8px; border:1px solid var(--border-main); border-radius:10px;
  padding:10px 12px; background:var(--page-bg); font-size:12.5px; color:var(--text-title);
  direction:ltr; justify-content:flex-start; letter-spacing:.02em; min-height:40px}
#liveDemo .trk-input.focus{border-color:var(--primary); background:var(--surface-solid);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent)}
#liveDemo .trk-input .ph{color:var(--text-muted)}
#liveDemo .trk-caret{display:inline-block; width:1.5px; height:15px; background:var(--primary); animation:trkblink 1s steps(1) infinite}
@keyframes trkblink{50%{opacity:0}}
#liveDemo .track-btn{width:100%; margin-top:10px; border:none; border-radius:10px; padding:11px; font-family:var(--font);
  font-size:13px; font-weight:700; color:#fff; background:var(--primary);
  box-shadow:0 12px 28px -15px color-mix(in srgb, var(--primary) 90%, transparent);
  display:inline-flex; align-items:center; justify-content:center; gap:8px}
#liveDemo .track-btn svg{width:15px; height:15px}
#liveDemo .trk-msg{margin-top:11px; border-radius:10px; padding:11px 13px; font-size:12px; line-height:1.85;
  background:var(--ready-bg); color:var(--ready-text); font-weight:600;
  opacity:0; transform:translateY(6px); transition:all .4s cubic-bezier(.16,1,.3,1)}
#liveDemo .trk-msg.on{opacity:1; transform:none}
#liveDemo .trk-result{margin-top:12px; opacity:0; transform:translateY(8px); transition:all .45s cubic-bezier(.16,1,.3,1)}
#liveDemo .trk-result.on{opacity:1; transform:none}
#liveDemo .order-card{background:var(--surface-main); border:1px solid var(--border-main); border-radius:var(--pane-radius);
  padding:16px; box-shadow:var(--shadow-sm); margin-bottom:12px}
#liveDemo .order-header{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:14px;
  padding-bottom:11px; border-bottom:1px solid var(--border-main)}
#liveDemo .order-id{font-size:17px; font-weight:700; color:var(--text-title); direction:ltr; letter-spacing:-.01em}
#liveDemo .order-sub{font-size:11px; color:var(--text-secondary); margin-top:3px; direction:ltr}
#liveDemo .status-badge{display:inline-flex; align-items:center; justify-content:center; padding:5px 13px;
  border-radius:999px; font-size:11px; font-weight:700; white-space:nowrap}
#liveDemo .status-ready{background:var(--ready-bg); color:var(--ready-text)}
#liveDemo .status-delivering{background:var(--delivering-bg); color:var(--delivering-text)}
#liveDemo .trk-verify{text-align:center; padding:6px 4px 2px}
#liveDemo .trk-verify h3{font-size:14px; color:var(--text-title); margin-bottom:6px}
#liveDemo .trk-verify p{font-size:11.5px; color:var(--text-secondary); margin-bottom:11px}
#liveDemo .trk-pin{display:flex; gap:8px; justify-content:center; margin-bottom:11px; direction:ltr}
#liveDemo .trk-pin i{width:38px; height:44px; border-radius:9px; border:1px solid var(--border-main); background:var(--page-bg);
  display:grid; place-items:center; font-style:normal; font-size:17px; font-weight:800; color:var(--text-title)}
#liveDemo .trk-pin i.filled{border-color:var(--primary); background:var(--surface-solid)}
#liveDemo .trk-grid{display:grid; grid-template-columns:1fr 196px; gap:14px}
#liveDemo .journey{position:relative; padding-inline-start:30px; margin:4px 0 8px}
#liveDemo .journey::before{content:''; position:absolute; inset-inline-start:9px; top:10px; bottom:12px;
  width:2px; background:var(--border-main); border-radius:2px}
#liveDemo .journey .j-fill{position:absolute; inset-inline-start:9px; top:10px; width:2px; background:var(--primary);
  border-radius:2px; transform-origin:top; transition:height .9s cubic-bezier(.16,1,.3,1)}
#liveDemo .j-stop{position:relative; padding-bottom:16px}
#liveDemo .j-stop:last-child{padding-bottom:2px}
#liveDemo .j-node{position:absolute; inset-inline-start:-30px; top:2px; width:20px; height:20px; border-radius:50%;
  background:var(--surface-main); border:2px solid var(--border-main); display:grid; place-items:center}
#liveDemo .j-stop.done .j-node{border-color:var(--primary); background:var(--primary)}
#liveDemo .j-stop.done .j-node::after{content:''; width:6px; height:6px; border-radius:50%; background:#fff}
#liveDemo .j-stop.current .j-node{border-color:var(--primary); background:var(--surface-main)}
#liveDemo .j-stop.current .j-node::after{content:''; width:8px; height:8px; border-radius:50%; background:var(--primary);
  animation:jpulse 2.2s ease-in-out infinite}
@keyframes jpulse{50%{opacity:.3}}
#liveDemo .j-when{font-size:10px; color:var(--text-secondary); direction:ltr; letter-spacing:.04em}
#liveDemo .j-label{font-size:13px; font-weight:700; color:var(--text-title); margin:1px 0}
#liveDemo .j-stop:not(.done) .j-label{color:var(--text-secondary); font-weight:600}
#liveDemo .aside-title{font-size:10px; font-weight:700; color:var(--text-secondary); letter-spacing:.12em; margin-bottom:8px}
#liveDemo .oi-row{display:flex; align-items:center; gap:9px; padding:7px 0; border-bottom:1px solid var(--border-main); font-size:11.5px}
#liveDemo .oi-row:last-of-type{border-bottom:none}
#liveDemo .oi-name{flex:1; color:var(--text-title); font-weight:600}
#liveDemo .oi-name small{display:block; color:var(--text-secondary); font-weight:500; font-size:10px; margin-top:1px}
#liveDemo .oi-total{font-weight:700; color:var(--text-title); white-space:nowrap}
#liveDemo .s-row{display:flex; justify-content:space-between; font-size:11.5px; color:var(--text-secondary); padding:4px 0}
#liveDemo .s-row strong{color:var(--text-title)}
#liveDemo .s-total{display:flex; justify-content:space-between; align-items:baseline; border-top:1px dashed var(--border-main);
  margin-top:6px; padding-top:8px}
#liveDemo .s-total .lbl{font-size:11px; color:var(--text-secondary); font-weight:600}
#liveDemo .s-total .num{font-size:15px; font-weight:800; color:var(--text-title)}
#liveDemo .info-grid{display:flex; flex-wrap:wrap; gap:8px 16px; font-size:11.5px; color:var(--text-main); margin-bottom:10px}
#liveDemo .info-item{display:flex; align-items:center; gap:6px}
#liveDemo .info-item svg{width:13px; height:13px; color:var(--text-muted); flex:none}

/* تجاوب صفحة التتبّع — بعد قواعدها كي تغلبها (لا قبلها) */
#liveDemo .demo-nav-btn{display:none; position:absolute; top:10px; inset-inline-start:12px; z-index:36;
  width:32px; height:32px; border:1px solid var(--border-main); border-radius:8px; cursor:pointer;
  background:var(--surface-solid); color:var(--text-secondary); box-shadow:var(--shadow-sm);
  align-items:center; justify-content:center}
#liveDemo.public .demo-nav-btn, #liveDemo .demo-nav-btn{display:none}
@media (max-width:980px){
  #liveDemo:not(.public) .demo-nav-btn{display:flex}
  /* إزاحة بسيطة كي لا يطغى الهامبرغر على عنوان الصفحة في الترويسة */
  #liveDemo .topbar{padding-inline-start:54px}
  #liveDemo .trk-grid{grid-template-columns:1fr}
  #liveDemo .trk-pin i{width:34px; height:40px; font-size:16px}
}

/* ════════════ خارج المجسّم: المسرح الحيّ + شريط الخطوات ════════════
   المسرح نفسه (hero-stage/app-window) يبقى مجسّم صفحة الهبوط كما هو —
   هذه القواعد تكبّر النافذة قليلاً وتلغي الميل ثلاثي الأبعاد وحده، لأن
   مؤشّراً يتحرّك داخل سطح مائل يفقد دقّة موضعه ويصعب تتبّعه بالعين. */
.hero-stage.is-live{height:700px}
.hero-stage.is-live .floating-card{display:none}
.app-window--live{width:min(1000px,100%); height:600px; background:#F4F6FB;
  transform:translateX(50%); transform-origin:top center}
.app-window--live .app-topbar{position:relative; z-index:2}

/* شريط الخطوات تحت النافذة في مساحة صفحة الهبوط — مخفي حتى يبدأ العرض */
.demo-tour{position:relative; z-index:5; width:min(1000px,100%); margin:22px auto 0;
  text-align:center; display:none}
.demo-tour.on{display:block; margin-bottom:30px} /* مسافة بين خطوات العرض وشريط الثقة تحته — هامش الشريط السالب كان يلصقه بالخطوات */
.dt-caption{min-height:52px; margin:0 auto 14px; max-width:720px; color:var(--text);
  font-size:15px; line-height:1.85}
.dt-caption b{color:var(--ink); font-weight:700}
.dt-bar{display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:center}
.dt-chip{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line);
  background:rgba(255,255,255,.9); color:var(--text); border-radius:999px; padding:8px 15px;
  font-family:var(--font); font-size:13px; font-weight:600; cursor:pointer;
  box-shadow:var(--shadow-sm); transition:background-color .2s ease, color .2s ease, border-color .2s ease}
.dt-chip .n{width:19px; height:19px; border-radius:50%; background:var(--canvas); color:var(--muted);
  display:grid; place-items:center; font-size:10.5px; font-weight:700}

.dt-chip:hover{border-color:var(--primary); color:var(--ink)}
.dt-chip.active{background:var(--primary); border-color:var(--primary); color:#fff}
.dt-chip.active .n{background:rgba(255,255,255,.22); color:#fff}
.dt-chip.done .n{background:var(--success); color:#04352d}
.dt-replay{border:1px dashed var(--line-strong); background:none; color:var(--muted);
  border-radius:999px; padding:8px 15px; font-family:var(--font); font-size:13px; cursor:pointer}
.dt-replay:hover{color:var(--ink); border-color:var(--primary)}


@media (max-width:1060px){
  .hero-stage.is-live{height:auto; margin-top:32px}
  .app-window--live{position:relative; top:auto; right:auto; width:100%; max-width:680px;
    height:560px; margin:0 auto; transform:none}
}
@media (max-width:560px){
  .app-window--live{height:640px}
  #liveDemo{font-size:13.5px}
  .dt-chip{font-size:12px; padding:7px 12px}
}

/* حالة انتظار المساعد قبل أول سؤال */
#liveDemo .ai-empty{display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:22px 14px; border:1.5px dashed var(--border-main); border-radius:12px;
  color:var(--text-secondary); font-size:12px; text-align:center; line-height:1.8}
#liveDemo .ai-empty .eq{margin-bottom:2px}
/* أعمدة المعادل بيضاء أصلاً (داخل شارة زرقاء) — هنا على سطح فاتح فتلون بالأزرق */
#liveDemo .ai-empty .eq i{background:var(--primary)}
#liveDemo .ai-empty b{color:var(--text-title); font-size:13.5px}

/* حقل إرسال الدردشة/المساعد: يكتب فيه المؤشّر الافتراضي حرفاً حرفاً */
#liveDemo .chat-input{display:flex; gap:8px; align-items:center; margin-top:12px}
#liveDemo .chat-field{flex:1; display:flex; align-items:center; gap:3px; min-height:36px;
  padding:7px 12px; border:1px solid var(--border-main); border-radius:11px;
  background:var(--page-bg); color:var(--text-main); font-size:12px; overflow:hidden}
#liveDemo .chat-field.focus{border-color:var(--primary); background:var(--surface-solid)}
#liveDemo .chat-field .ph{color:var(--text-muted); white-space:nowrap}
#liveDemo .chat-field .typed{white-space:nowrap; font-weight:500}
#liveDemo .chat-caret{width:1.5px; height:14px; flex:none; background:var(--primary); animation:chatBlink .8s steps(1) infinite}
@keyframes chatBlink{50%{opacity:0}}
#liveDemo .chat-send{width:36px; height:36px; flex:none; border:none; border-radius:11px;
  background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer}
#liveDemo .chat-send:hover{background:var(--primary-hover)}
#liveDemo .chat-send.hot-f{outline:2px solid var(--primary); outline-offset:2px}

/* سطح الزبون: ترويسة التاجر تختفي وشريط المتجر العام يحلّ محلّها */
#liveDemo .public-bar{display:none}
#liveDemo.public .public-bar{display:flex}
#liveDemo.public .topbar{display:none}