/* ══════════════════════════════════════════════════════════════════════
   سماتنا — luxe-v5 · نظام التصميم المشترك (الطبقة الأخيرة)
   ──────────────────────────────────────────────────────────────────────
   يُحمَّل بعد كل ورقة أنماط أخرى (interface · sector · redesign-v1 ·
   editorial-v2 · fluid-v4) في: app.php · index.php · gate.php · tools.php …
   وهو وحده مصدر «اللغة البصرية»: طبقاتٌ متراكبة، زجاجٌ طافٍ، قصّاتٌ
   مائلة الزوايا، توهّجاتٌ لونية، حبيبات ورق، وأيقونات ثنائية اللون.

   ❗ الفصلُ بين المنصّتين لونيّاً يتمّ هنا وحدَه، بسمة data-sector على <html>:
       education → زمرّدي (emerald) + بنفسجي (violet)   «الفهم والنمو»
       work      → عنبري (amber) + كحليّ (navy)          «الأداء والقرار»
     والبوّابة (بلا قطاع) محايدةٌ: كحليّ + زمرّدي + بنفسجي، وبطاقتا القطاعين
     داخلها تحملان لونَيهما.
   ❗ لا لونَ حرفيّاً خارج هذا الملفّ و theme.php: كلُّ ما هنا متغيّرات --lx-*.
   ❗ الاتجاه: خصائصُ منطقية فقط (inline-start/end). لا left/right.
   ══════════════════════════════════════════════════════════════════════ */

/* ───────────── 0 · الرموز ───────────── */
:root{
  /* محايد (البوّابة) */
  --lx-ink:#0f172a;           /* slate-900 — الأساس */
  --lx-ink-2:#334155;
  --lx-mute:#5b6778;          /* تباين ≥ 4.5 على الورق */
  --lx-line:rgba(15,23,42,.10);
  --lx-paper:#fafaf7;
  --lx-paper-2:#f3f4ef;
  --lx-glass:rgba(255,255,255,.68);
  --lx-glass-brd:rgba(255,255,255,.82);

  /* لونا القطاع: a = الأساس · b = الإشارة الثانية */
  --lx-a:#10b981;   --lx-a-2:#059669;  --lx-a-ink:#047857;  --lx-a-soft:#ecfdf5;  --lx-a-line:#a7f3d0;  --lx-on-a:#022c22;
  --lx-b:#7c3aed;   --lx-b-2:#6d28d9;  --lx-b-ink:#5b21b6;  --lx-b-soft:#f5f3ff;  --lx-b-line:#ddd6fe;
  --lx-glow-a:rgba(16,185,129,.34);  --lx-glow-b:rgba(124,58,237,.28);  --lx-glow-c:rgba(52,211,153,.20);

  --lx-shadow:0 1px 2px rgba(15,23,42,.04),0 14px 34px -12px rgba(15,23,42,.14);
  --lx-shadow-lift:0 2px 4px rgba(15,23,42,.05),0 30px 60px -24px rgba(15,23,42,.30);
  --lx-ease:cubic-bezier(.22,1,.36,1);
  --lx-spring:cubic-bezier(.34,1.56,.64,1);
  --lx-cut:18px;                       /* عمق القصّة المائلة */
  --lx-font-ar:'Cairo','Tajawal','Segoe UI',system-ui,sans-serif;
  --lx-font-en:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --lx-font-en-display:'Poppins','Inter',system-ui,sans-serif;
  --lx-dir:1;
}
html[dir="rtl"]{--lx-dir:-1}

/* التعليم: زمرّدي + بنفسجي (هو الأصل — ولا يتغيّر) */
html[data-sector="education"]{
  --lx-paper:#fafaf7; --lx-paper-2:#f2f5f1;
}
/* الأعمال: عنبري + كحليّ — بعيدٌ عن الزمرّدي في الطيف فلا يلتبس القطاعان في لمحة */
html[data-sector="work"]{
  --lx-paper:#f8f9fb; --lx-paper-2:#eef1f6;
  --lx-a:#f59e0b;   --lx-a-2:#d97706;  --lx-a-ink:#92400e;  --lx-a-soft:#fef3c7;  --lx-a-line:#fcd34d;  --lx-on-a:#1f1300;
  --lx-b:#1e3a8a;   --lx-b-2:#1e40af;  --lx-b-ink:#172554;  --lx-b-soft:#e8edfb;  --lx-b-line:#bfd0f5;
  --lx-glow-a:rgba(245,158,11,.30);  --lx-glow-b:rgba(30,58,138,.26);  --lx-glow-c:rgba(251,191,36,.20);
  --lx-ink:#0b1b36; --lx-ink-2:#2a3b57;
}

/* ───────────── 1 · الخطوط ─────────────
   العربية: Cairo (عناوين ومتن). الإنجليزية: Inter للمتن و Poppins للعناوين.
   الخطّان يُطلبان من theme_font_url() — هنا فقط تُسنَد العائلات. */
html[lang="ar"] body,html[lang="ar"] .sm-app,html[lang="ar"] .sm-landing{font-family:var(--lx-font-ar)}
html[lang="en"] body{font-family:var(--lx-font-en)}
html[lang="en"] :is(h1,h2,h3,.display){font-family:var(--lx-font-en-display)}
html[lang="ar"] :is(h1,h2,h3){letter-spacing:0}
html[lang="en"] :is(h1,h2){letter-spacing:-.025em}

/* ───────────── 2 · الخلفية: توهّجاتٌ تنجرف + حبيبات ورق ─────────────
   بلا أيّ عنصر إضافيّ في الصفحة: ::before للتوهّج و ::after للحبيبات. */
body.sm-app,body.sm-landing,body.sm-gate,body.sm-catalog{background:var(--lx-paper);position:relative;isolation:isolate}
body.sm-app::before,body.sm-landing::before,body.sm-gate::before,body.sm-catalog::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(46vw 46vw at -8% -10%,var(--lx-glow-a),transparent 66%),
    radial-gradient(42vw 42vw at 108% 6%,var(--lx-glow-b),transparent 66%),
    radial-gradient(38vw 38vw at 34% 112%,var(--lx-glow-c),transparent 66%),
    radial-gradient(120% 80% at 50% -20%,#fff 0%,transparent 60%);
}
html[dir="rtl"] body.sm-app::before,html[dir="rtl"] body.sm-landing::before,html[dir="rtl"] body.sm-gate::before,html[dir="rtl"] body.sm-catalog::before{
  background:
    radial-gradient(46vw 46vw at 108% -10%,var(--lx-glow-a),transparent 66%),
    radial-gradient(42vw 42vw at -8% 6%,var(--lx-glow-b),transparent 66%),
    radial-gradient(38vw 38vw at 66% 112%,var(--lx-glow-c),transparent 66%),
    radial-gradient(120% 80% at 50% -20%,#fff 0%,transparent 60%);
}
body.sm-app::after,body.sm-landing::after,body.sm-gate::after,body.sm-catalog::after{
  content:"";position:fixed;inset:0;z-index:400;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media print{body::before,body::after{display:none!important}}
@media (prefers-reduced-motion:no-preference){
  body.sm-landing::before,body.sm-gate::before{animation:lx-drift 28s ease-in-out infinite alternate}
}
@keyframes lx-drift{to{transform:translate3d(2.2vw,1.6vh,0) scale(1.06)}}

/* ───────────── 3 · الأزرار ───────────── */
.lx-btn,.btn.lx{
  --lx-bg:var(--lx-ink);--lx-fg:#fff;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:.85em 1.5em;border:0;border-radius:999px;font:inherit;font-weight:700;font-size:.95rem;line-height:1.2;
  color:var(--lx-fg);background:var(--lx-bg);cursor:pointer;text-decoration:none;
  isolation:isolate;overflow:hidden;white-space:nowrap;
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 10px 24px -10px rgba(15,23,42,.55);
  transition:transform .35s var(--lx-ease),box-shadow .35s var(--lx-ease),background .25s;
}
.lx-btn::after,.btn.lx::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .7s var(--lx-ease)}
.lx-btn:hover,.btn.lx:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 16px 30px -12px rgba(15,23,42,.6)}
.lx-btn:hover::after,.btn.lx:hover::after{transform:translateX(120%)}
html[dir="rtl"] .lx-btn::after,html[dir="rtl"] .btn.lx::after{transform:translateX(120%)}
html[dir="rtl"] .lx-btn:hover::after,html[dir="rtl"] .btn.lx:hover::after{transform:translateX(-120%)}
.lx-btn:active{transform:translateY(0) scale(.98)}
.lx-btn[disabled],.lx-btn.is-disabled{opacity:.45;pointer-events:none}
.lx-btn--a{--lx-bg:linear-gradient(135deg,var(--lx-a),var(--lx-a-2));--lx-fg:var(--lx-on-a);
  box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 14px 30px -12px var(--lx-glow-a)}
.lx-btn--b{--lx-bg:linear-gradient(135deg,var(--lx-b),var(--lx-b-2));--lx-fg:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 14px 30px -12px var(--lx-glow-b)}
.lx-btn--ghost{--lx-bg:transparent;--lx-fg:var(--lx-ink);box-shadow:inset 0 0 0 1.5px rgba(15,23,42,.22)}
.lx-btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--lx-ink)}
.lx-btn--glass{--lx-bg:rgba(255,255,255,.14);--lx-fg:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);backdrop-filter:blur(8px)}
.lx-btn--sm{padding:.6em 1.1em;font-size:.84rem}
.lx-btn--lg{padding:1.05em 1.9em;font-size:1.02rem}

/* ───────────── 4 · الشارات والأقراص ───────────── */
.lx-chip{display:inline-flex;align-items:center;gap:.5em;padding:.38em .9em;border-radius:999px;font-size:.78rem;font-weight:700;
  background:rgba(255,255,255,.72);border:1px solid var(--lx-line);color:var(--lx-ink-2)}
.lx-chip--a{background:var(--lx-a-soft);border-color:var(--lx-a-line);color:var(--lx-a-ink)}
.lx-chip--b{background:var(--lx-b-soft);border-color:var(--lx-b-line);color:var(--lx-b-ink)}
.lx-chip--dark{background:var(--lx-ink);color:#fff;border-color:transparent}
.lx-eyebrow{display:inline-flex;align-items:center;gap:.7em;padding:.45em 1.1em .45em .5em;border-radius:999px;font-size:.8rem;font-weight:700;
  color:var(--lx-ink);background:var(--lx-glass);border:1px solid var(--lx-glass-brd);backdrop-filter:blur(12px);box-shadow:var(--lx-shadow)}
html[dir="rtl"] .lx-eyebrow{padding:.45em .5em .45em 1.1em}
.lx-eyebrow::before{content:"";width:1.7em;height:1.7em;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,var(--lx-a) 55%,var(--lx-a-2));box-shadow:0 0 0 4px var(--lx-a-soft)}

/* ───────────── 5 · الأسطح: زجاجٌ وقصّاتٌ مائلة ─────────────
   .lx-glass  سطحٌ زجاجيٌّ طافٍ
   .lx-notch  قصّةٌ مائلة في زاويتين متقابلتين، تنعكس تلقائياً مع الاتجاه
   .lx-card   زجاجٌ + قصّة + ظلّ ترتفع به عند المرور */
.lx-glass{background:var(--lx-glass);border:1px solid var(--lx-glass-brd);
  backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);box-shadow:var(--lx-shadow)}
.lx-notch{--lx-clip:polygon(var(--lx-cut) 0,100% 0,100% calc(100% - var(--lx-cut)),calc(100% - var(--lx-cut)) 100%,0 100%,0 var(--lx-cut));
  clip-path:var(--lx-clip)}
html[dir="rtl"] .lx-notch{--lx-clip:polygon(0 0,calc(100% - var(--lx-cut)) 0,100% var(--lx-cut),100% 100%,var(--lx-cut) 100%,0 calc(100% - var(--lx-cut)))}
.lx-card{position:relative;background:var(--lx-glass);border:1px solid var(--lx-glass-brd);border-radius:22px;
  backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);box-shadow:var(--lx-shadow);
  transition:transform .45s var(--lx-ease),box-shadow .45s var(--lx-ease)}
.lx-card:hover{transform:translateY(-3px);box-shadow:var(--lx-shadow-lift)}
.lx-card--dark{background:linear-gradient(160deg,var(--lx-ink),color-mix(in srgb,var(--lx-ink) 78%,var(--lx-b)));color:#fff;border-color:rgba(255,255,255,.08)}
.lx-ring{position:relative}
.lx-ring::before{content:"";position:absolute;inset:-1.5px;border-radius:inherit;padding:1.5px;z-index:-1;
  background:conic-gradient(from var(--lx-ang,0deg),var(--lx-a),var(--lx-b),var(--lx-a));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:lx-spin 9s linear infinite}
@property --lx-ang{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes lx-spin{to{--lx-ang:360deg}}
@media (prefers-reduced-motion:reduce){.lx-ring::before{animation:none}}

/* ───────────── 6 · الأيقونات ثنائية اللون ─────────────
   كلُّ أيقونةٍ طبقتان: خطٌّ بلون الحبر + بقعةٌ بلون القطاع. */
.lx-ico{--ic-a:var(--lx-ink);--ic-b:var(--lx-a);--ic-blob:var(--lx-a-soft);width:46px;height:46px;flex:none;display:inline-block}
.lx-ico--b{--ic-b:var(--lx-b);--ic-blob:var(--lx-b-soft)}
.lx-ico--dark{--ic-a:#fff;--ic-blob:rgba(255,255,255,.10)}
.lx-ico--sm{width:34px;height:34px}.lx-ico--lg{width:60px;height:60px}
.lx-flip{display:inline-block}html[dir="rtl"] .lx-flip{transform:scaleX(-1)}

/* ───────────── 7 · الحقول ───────────── */
.lx-field,.sm-app :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea){
  background:rgba(255,255,255,.82);border:1.5px solid rgba(15,23,42,.14);border-radius:14px;color:var(--lx-ink);
  transition:border-color .2s,box-shadow .2s,background .2s}
.lx-field:focus,.sm-app :is(input,select,textarea):focus{border-color:var(--lx-a);background:#fff;
  box-shadow:0 0 0 4px var(--lx-a-soft);outline:0}
::selection{background:var(--lx-b-line);color:var(--lx-ink)}
:focus-visible{outline:2.5px solid var(--lx-b);outline-offset:3px}

/* ───────────── 8 · قراءةٌ وصلاحيّةٌ لا تُكسر ───────────── */
.lx-num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.lx-grad-text{background:linear-gradient(120deg,var(--lx-a-2),var(--lx-b) 80%);-webkit-background-clip:text;background-clip:text;color:transparent}
@media (prefers-reduced-motion:reduce){
  body::before,body::after,.lx-btn,.lx-card{animation:none!important;transition:none!important}
}
@media (forced-colors:active){.lx-btn,.lx-card,.lx-chip{border:1px solid CanvasText}}

/* ═ luxe · stream: gate ═══════════════════════════════════════════════
   لوحتا القطاعين كفئتين يُحمَّلان على عنصرٍ واحد (بطاقة في البوّابة) دون
   تغيير <html>: تنسخان رموزَ html[data-sector=…] أعلاه حرفياً.
   ❗ لا تُحرَّر هنا من غير تعديل الأصل أعلاه معهما. */
.lx-pal-edu{
  --lx-a:#10b981;--lx-a-2:#059669;--lx-a-ink:#047857;--lx-a-soft:#ecfdf5;--lx-a-line:#a7f3d0;--lx-on-a:#022c22;
  --lx-b:#7c3aed;--lx-b-2:#6d28d9;--lx-b-ink:#5b21b6;--lx-b-soft:#f5f3ff;--lx-b-line:#ddd6fe;
  --lx-glow-a:rgba(16,185,129,.34);--lx-glow-b:rgba(124,58,237,.28);--lx-glow-c:rgba(52,211,153,.20);
}
.lx-pal-work{
  --lx-a:#f59e0b;--lx-a-2:#d97706;--lx-a-ink:#92400e;--lx-a-soft:#fef3c7;--lx-a-line:#fcd34d;--lx-on-a:#1f1300;
  --lx-b:#1e3a8a;--lx-b-2:#1e40af;--lx-b-ink:#172554;--lx-b-soft:#e8edfb;--lx-b-line:#bfd0f5;
  --lx-glow-a:rgba(245,158,11,.30);--lx-glow-b:rgba(30,58,138,.26);--lx-glow-c:rgba(251,191,36,.20);
  --lx-ink:#0b1b36;--lx-ink-2:#2a3b57;
}
/* ═ /luxe · stream: gate ═ */