/* ============================================================
   دلاتو — ملف الأنماط الحاكم الوحيد · delato.style.css · v1.9.1
   القاعدة: لا يُبنى أي مكوّن في الموقع (زر، حقل، بطاقة، خلفية،
   خط، حجم، ظل، حركة) إلا برموز هذا الملف وأصنافه. القيم الحرفية
   في صفحات المزايا مخالفة تُرَدّ. الإضافة والتعديل عبر محادثة
   Delato Main حصرًا.
   السمتان: فاتحة (الافتراضية) وداكنة عبر [data-theme="dark"]
   أو تفضيل النظام. الاتجاه rtl افتراضًا.
   ============================================================ */

/* ---------- ١) الرموز (Design Tokens) ---------- */
:root{
  /* الهوية — v1.3 «فيروز على فحم» (اعتُمد من ستّ مساطر · ٢٠٢٦/٠٩/١٩) */
  --dl-accent:#0aa894;          /* v1.8 «فيروز كهربائيّ + مرجان» (قرار أحمد ٢٠٢٦/١٠/١٨) — فاتح */
  --dl-accent-ink:#ffffff;
  --dl-accent-soft:#d2f5f0;
  --dl-accent-2:#e2602c;        /* الثانويّ المرجانيّ: الكلفة والنداءات الدافئة */
  --dl-accent-2-ink:#ffffff;
  --dl-accent-2-soft:#fde8de;

  /* الأرضيات والنص — رماد بارد مائل للأزرق، لا كريمي */
  --dl-bg:#f2f4f5;
  --dl-panel:#ffffff;
  --dl-panel-2:#e8ecee;
  --dl-line:#d3d9dd;
  --dl-line-2:#b9c2c8;
  --dl-ink:#14191d;
  --dl-dim:#5d6b74;
  --dl-faint:#8a969e;

  /* الحالات الدلالية (منفصلة عن الهوية) — التحذير لم يعد يشارك لون الهوية */
  --dl-ok:#2e8b57;    --dl-ok-soft:#e4f3ea;
  --dl-warn:#c97a12;  --dl-warn-soft:#fbeed8;
  --dl-err:#c0392b;   --dl-err-soft:#f9e6e3;
  --dl-info:#2e6da4;  --dl-info-soft:#e5eef7;

  /* الخطوط */
  --dl-font:'IBM Plex Sans Arabic',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* العربية ليست في Plex Mono: تسقط إلى Plex Sans Arabic بدل التقطّع (عطب قاسته Studios) */
  --dl-mono:'IBM Plex Mono','IBM Plex Sans Arabic',ui-monospace,'Courier New',monospace;

  /* سلم الأحجام النصية */
  --dl-fs-xs:12px; --dl-fs-sm:13px; --dl-fs-md:15px;
  --dl-fs-lg:18px; --dl-fs-xl:22px; --dl-fs-2xl:28px; --dl-fs-3xl:36px;
  --dl-lh:1.7; --dl-lh-tight:1.35;

  /* المسافات (مضاعفات ٤) */
  --dl-s1:4px; --dl-s2:8px; --dl-s3:12px; --dl-s4:16px;
  --dl-s5:24px; --dl-s6:32px; --dl-s7:48px; --dl-s8:64px;

  /* الاستدارة والظل والحركة */
  --dl-r-sm:6px; --dl-r-md:10px; --dl-r-lg:16px; --dl-r-full:999px;
  --dl-shadow-1:0 1px 3px rgba(15,19,21,.08);
  --dl-shadow-2:0 6px 20px rgba(15,19,21,.12);
  --dl-shadow-3:0 16px 48px rgba(15,19,21,.18);
  --dl-t-fast:120ms ease; --dl-t-med:220ms ease;

  /* الطبقات */
  --dl-z-nav:100; --dl-z-drop:200; --dl-z-modal:300; --dl-z-toast:400;

  /* الحاوية */
  --dl-container:1120px; --dl-gutter:16px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --dl-accent:#19e6c9; --dl-accent-ink:#06201c; --dl-accent-soft:#0f3b36;
    --dl-accent-2:#ff7a45; --dl-accent-2-ink:#1a0c06; --dl-accent-2-soft:#3d2316;
    --dl-bg:#1a1f23; --dl-panel:#232a2f; --dl-panel-2:#2c343a;
    --dl-line:#39434a; --dl-line-2:#4a565e;
    --dl-ink:#e6ebed; --dl-dim:#97a5ad; --dl-faint:#67757d;
    --dl-ok:#5fbf85; --dl-ok-soft:#1b2f24;
    --dl-warn:#e39a3b; --dl-warn-soft:#3a2c18;
    --dl-err:#e07070; --dl-err-soft:#3a2222;
    --dl-info:#6aa5d8; --dl-info-soft:#1e2a38;
    --dl-shadow-1:0 1px 3px rgba(0,0,0,.4);
    --dl-shadow-2:0 6px 20px rgba(0,0,0,.45);
    --dl-shadow-3:0 16px 48px rgba(0,0,0,.55);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --dl-accent:#19e6c9; --dl-accent-ink:#06201c; --dl-accent-soft:#0f3b36;
  --dl-accent-2:#ff7a45; --dl-accent-2-ink:#1a0c06; --dl-accent-2-soft:#3d2316;
  --dl-bg:#1a1f23; --dl-panel:#232a2f; --dl-panel-2:#2c343a;
  --dl-line:#39434a; --dl-line-2:#4a565e;
  --dl-ink:#e6ebed; --dl-dim:#97a5ad; --dl-faint:#67757d;
  --dl-ok:#5fbf85; --dl-ok-soft:#1b2f24;
  --dl-warn:#e39a3b; --dl-warn-soft:#3a2c18;
  --dl-err:#e07070; --dl-err-soft:#3a2222;
  --dl-info:#6aa5d8; --dl-info-soft:#1e2a38;
  --dl-shadow-1:0 1px 3px rgba(0,0,0,.4);
  --dl-shadow-2:0 6px 20px rgba(0,0,0,.45);
  --dl-shadow-3:0 16px 48px rgba(0,0,0,.55);
  color-scheme:dark;
}

/* ---------- ٢) الأساس ---------- */
.dl-root,body.dl-root{
  margin:0;background:var(--dl-bg);color:var(--dl-ink);
  font:var(--dl-fs-md)/var(--dl-lh) var(--dl-font);
  direction:rtl;-webkit-font-smoothing:antialiased;
}
.dl-container{max-width:var(--dl-container);margin-inline:auto;padding-inline:var(--dl-gutter)}
.dl-mono{font-family:var(--dl-mono)}
.dl-dim{color:var(--dl-dim)} .dl-faint{color:var(--dl-faint)}
h1.dl,.dl-h1{font-size:var(--dl-fs-3xl);line-height:var(--dl-lh-tight);font-weight:700;margin:0 0 var(--dl-s4)}
h2.dl,.dl-h2{font-size:var(--dl-fs-2xl);line-height:var(--dl-lh-tight);font-weight:700;margin:0 0 var(--dl-s3)}
h3.dl,.dl-h3{font-size:var(--dl-fs-xl);line-height:var(--dl-lh-tight);font-weight:700;margin:0 0 var(--dl-s2)}
h4.dl,.dl-h4{font-size:var(--dl-fs-lg);font-weight:500;margin:0 0 var(--dl-s2)}
.dl-label{font-size:var(--dl-fs-xs);color:var(--dl-dim);letter-spacing:.4px}
a.dl,.dl-link{color:var(--dl-accent);text-decoration:none;border-bottom:1px solid transparent;transition:border-color var(--dl-t-fast)}
a.dl:hover,.dl-link:hover{border-bottom-color:var(--dl-accent)}
:is(.dl-btn,.dl-input,.dl-select,.dl-check input,.dl-link,a.dl):focus-visible{
  outline:2px solid var(--dl-accent);outline-offset:2px;border-radius:var(--dl-r-sm);
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ---------- ٣) الأزرار ---------- */
.dl-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--dl-s2);
  font:inherit;font-size:var(--dl-fs-sm);font-weight:500;cursor:pointer;
  border-radius:var(--dl-r-sm);border:1px solid var(--dl-line);
  background:var(--dl-panel);color:var(--dl-ink);
  padding:8px 18px;min-height:38px;
  transition:background var(--dl-t-fast),border-color var(--dl-t-fast),transform var(--dl-t-fast);
  user-select:none;text-decoration:none;
}
.dl-btn:hover{border-color:var(--dl-line-2);background:var(--dl-panel-2)}
.dl-btn:active{transform:translateY(1px)}
.dl-btn:disabled,.dl-btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}
.dl-btn--primary{background:var(--dl-accent);border-color:var(--dl-accent);color:var(--dl-accent-ink);font-weight:700}
.dl-nav a.dl-btn--primary,.dl-nav a.dl-btn--primary:hover{color:var(--dl-accent-ink)} /* v1.5.1: رابط زرّ أساسي داخل الشريط كان يرث لون روابط الشريط (رمادي على فيروزي) */
.dl-btn--primary:hover{filter:brightness(1.06);background:var(--dl-accent);border-color:var(--dl-accent)}
.dl-btn--ghost{background:transparent;border-color:transparent;color:var(--dl-dim)}
.dl-btn--ghost:hover{background:var(--dl-panel-2);color:var(--dl-ink)}
.dl-btn--danger{background:transparent;border-color:var(--dl-err);color:var(--dl-err)}
.dl-btn--danger:hover{background:var(--dl-err);color:#fff}
.dl-btn--sm{padding:4px 12px;min-height:30px;font-size:var(--dl-fs-xs)}
.dl-btn--lg{padding:12px 28px;min-height:48px;font-size:var(--dl-fs-md)}
.dl-btn--block{display:flex;width:100%}

/* ---------- ٤) الحقول ---------- */
.dl-field{display:flex;flex-direction:column;gap:var(--dl-s1);margin-bottom:var(--dl-s4)}
.dl-field>label{font-size:var(--dl-fs-sm);color:var(--dl-dim)}
.dl-input,.dl-select,textarea.dl-input{
  font:inherit;font-size:var(--dl-fs-sm);color:var(--dl-ink);
  background:var(--dl-panel);border:1px solid var(--dl-line);border-radius:var(--dl-r-sm);
  padding:8px 12px;min-height:38px;transition:border-color var(--dl-t-fast);width:100%;box-sizing:border-box;
}
.dl-input:hover,.dl-select:hover{border-color:var(--dl-line-2)}
.dl-input::placeholder{color:var(--dl-faint)}
.dl-input[aria-invalid="true"],.dl-input.dl--err{border-color:var(--dl-err)}
.dl-field .dl-err-msg{font-size:var(--dl-fs-xs);color:var(--dl-err)}
.dl-input--num{font-family:var(--dl-mono);direction:ltr;text-align:center}
.dl-check{display:inline-flex;align-items:center;gap:var(--dl-s2);cursor:pointer;font-size:var(--dl-fs-sm)}
.dl-check input{accent-color:var(--dl-accent);width:16px;height:16px}

/* ---------- ٥) الأسطح ---------- */
.dl-card{background:var(--dl-panel);border:1px solid var(--dl-line);border-radius:var(--dl-r-md);padding:var(--dl-s5)}
.dl-card--raised{box-shadow:var(--dl-shadow-2);border:none}
.dl-panel{background:var(--dl-panel-2);border:1px solid var(--dl-line);border-radius:var(--dl-r-md);padding:var(--dl-s4)}
.dl-divider{border:none;border-top:1px solid var(--dl-line);margin:var(--dl-s5) 0}

/* ---------- ٦) الشارات والحالات ---------- */
.dl-badge{display:inline-block;padding:1px 10px;border-radius:var(--dl-r-full);font-size:var(--dl-fs-xs);font-weight:500;white-space:nowrap}
.dl-badge--ok{background:var(--dl-ok-soft);color:var(--dl-ok)}
.dl-badge--warn{background:var(--dl-warn-soft);color:var(--dl-warn)}
.dl-badge--err{background:var(--dl-err-soft);color:var(--dl-err)}
.dl-badge--info{background:var(--dl-info-soft);color:var(--dl-info)}
.dl-badge--accent{background:var(--dl-accent-soft);color:var(--dl-accent)}

/* ---------- ٧) الجداول ---------- */
.dl-table-wrap{overflow-x:auto;background:var(--dl-panel);border:1px solid var(--dl-line);border-radius:var(--dl-r-md)}
.dl-table{width:100%;border-collapse:collapse;font-size:var(--dl-fs-sm)}
.dl-table th,.dl-table td{padding:10px 14px;border-bottom:1px solid var(--dl-line);text-align:start;vertical-align:top}
.dl-table th{font-size:var(--dl-fs-xs);font-weight:500;color:var(--dl-dim)}
.dl-table tr:last-child td{border-bottom:none}
.dl-table--nums td{font-variant-numeric:tabular-nums}

/* ---------- ٨) التنبيهات العائمة ---------- */
.dl-toasts{position:fixed;top:var(--dl-s4);left:50%;transform:translateX(-50%);z-index:var(--dl-z-toast);display:flex;flex-direction:column;gap:var(--dl-s2);align-items:center}
.dl-toast{background:var(--dl-panel);border:1px solid var(--dl-line-2);border-radius:var(--dl-r-md);padding:10px 18px;box-shadow:var(--dl-shadow-2);max-width:min(560px,86vw);font-size:var(--dl-fs-sm)}
.dl-toast--ok{border-color:var(--dl-ok);color:var(--dl-ok)}
.dl-toast--err{border-color:var(--dl-err);color:var(--dl-err)}

/* ---------- ٩) الحوارات ---------- */
.dl-overlay{position:fixed;inset:0;background:rgba(10,11,14,.55);z-index:var(--dl-z-modal);display:flex;align-items:center;justify-content:center;padding:var(--dl-gutter)}
.dl-modal{background:var(--dl-panel);border:1px solid var(--dl-line-2);border-radius:var(--dl-r-lg);box-shadow:var(--dl-shadow-3);padding:var(--dl-s5);min-width:min(340px,92vw);max-width:min(640px,92vw);max-height:86vh;overflow:auto}
.dl-modal>h3{margin-top:0}
.dl-modal-foot{display:flex;gap:var(--dl-s2);margin-top:var(--dl-s5)}

/* ---------- ١٠) التنقل ---------- */
.dl-nav{position:sticky;top:0;z-index:var(--dl-z-nav);display:flex;align-items:center;gap:var(--dl-s4);background:var(--dl-panel);border-bottom:1px solid var(--dl-line);padding:var(--dl-s3) var(--dl-s5)}
.dl-nav .dl-brand{font-weight:700;font-size:var(--dl-fs-lg);color:var(--dl-accent)}
.dl-nav a{color:var(--dl-dim);text-decoration:none;font-size:var(--dl-fs-sm);padding:4px 10px;border-radius:var(--dl-r-sm)}
.dl-nav a:hover{color:var(--dl-ink);background:var(--dl-panel-2)}
.dl-nav a[aria-current="page"]{color:var(--dl-accent);font-weight:500}

/* ---------- ١١) مساعدات تخطيط ---------- */
.dl-row{display:flex;gap:var(--dl-s3);align-items:center;flex-wrap:wrap}
.dl-col{display:flex;flex-direction:column;gap:var(--dl-s3)}
.dl-grow{flex:1}
.dl-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--dl-s4)}
.dl-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--dl-s4)}
@media (max-width:720px){.dl-grid-2,.dl-grid-3{grid-template-columns:1fr}}

/* ============================================================
   ١٢) طبقة الواجهة العامة — القشرة والصفحات التسويقية
   تملكها محادثة Delato Main. كل مكوّن هنا مبنيّ على رموز القسم ١
   فقط؛ لا قيمة لونية أو خطّية حرفية جديدة.
   ============================================================ */
:root{
  --dl-fs-4xl:46px; --dl-fs-5xl:64px;
  --dl-s9:96px; --dl-s10:128px;
  --dl-nav-h:60px;
  --dl-glow:radial-gradient(58% 58% at 50% 0%,
            color-mix(in srgb,var(--dl-accent) 20%,transparent) 0%, transparent 72%);
}

/* ١٢.١ شريط تنبيه علوي */
.dl-banner{background:var(--dl-warn-soft);color:var(--dl-warn);text-align:center;
  font-size:var(--dl-fs-xs);padding:6px var(--dl-s4);border-bottom:1px solid var(--dl-line)}

/* ١٢.٢ تنقل زجاجي لاصق */
.dl-nav--glass{
  background:color-mix(in srgb,var(--dl-bg) 76%,transparent);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  min-height:var(--dl-nav-h);padding:0 var(--dl-s5);
}
.dl-nav-links{display:flex;align-items:center;gap:var(--dl-s1)}
/* v1.8.1: ثمانية روابط في الشريط ⇒ نقطة الكسر ١١٢٠ (كانت ٨٨٠) */
@media (max-width:1120px){.dl-nav-links{display:none}}
.dl-nav .dl-brand-mark{display:inline-flex;align-items:center;gap:var(--dl-s2);text-decoration:none}
.dl-brand-dot{width:10px;height:10px;border-radius:var(--dl-r-full);
  background:var(--dl-accent);box-shadow:0 0 0 4px var(--dl-accent-soft)}

/* ١٢.٣ الواجهة البطلة */
.dl-hero{position:relative;overflow:hidden;padding:var(--dl-s9) 0 var(--dl-s8);text-align:center}
.dl-hero::before{content:"";position:absolute;inset:-160px -10% auto;height:620px;
  background:var(--dl-glow);pointer-events:none}
.dl-hero>*{position:relative}
.dl-eyebrow{display:inline-flex;align-items:center;gap:var(--dl-s2);padding:4px 14px;
  border:1px solid var(--dl-line);border-radius:var(--dl-r-full);background:var(--dl-panel);
  font-size:var(--dl-fs-xs);color:var(--dl-dim)}
.dl-hero-title{font-size:clamp(var(--dl-fs-2xl),6.2vw,var(--dl-fs-5xl));line-height:1.14;
  font-weight:700;letter-spacing:-.4px;margin:var(--dl-s5) auto var(--dl-s4);max-width:18ch}
.dl-hero-title em{font-style:normal;color:var(--dl-accent)}
.dl-hero-sub{max-width:60ch;margin:0 auto var(--dl-s6);color:var(--dl-dim);
  font-size:var(--dl-fs-lg);line-height:var(--dl-lh)}
.dl-hero-cta{display:flex;gap:var(--dl-s3);justify-content:center;flex-wrap:wrap}

/* ١٢.٤ الأقسام */
.dl-section{padding:var(--dl-s8) 0}
.dl-section-head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--dl-s4);flex-wrap:wrap;margin-bottom:var(--dl-s5)}
.dl-section-head p{margin:var(--dl-s1) 0 0;color:var(--dl-dim);font-size:var(--dl-fs-sm)}
.dl-grid-auto{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:var(--dl-s4)}

/* ١٢.٥ بلاطة خدمة */
.dl-tile{display:flex;flex-direction:column;background:var(--dl-panel);
  border:1px solid var(--dl-line);border-radius:var(--dl-r-lg);overflow:hidden;
  text-decoration:none;color:inherit;
  transition:border-color var(--dl-t-med),transform var(--dl-t-med),box-shadow var(--dl-t-med)}
.dl-tile:hover{border-color:var(--dl-accent);transform:translateY(-3px);box-shadow:var(--dl-shadow-2)}
.dl-tile[aria-disabled="true"]{opacity:.6;pointer-events:none}
.dl-tile[aria-pressed="true"]{border-color:var(--dl-accent);box-shadow:0 0 0 2px var(--dl-accent-soft),var(--dl-shadow-2)}
.dl-tile[aria-pressed="true"] .dl-tile-title{color:var(--dl-accent)}
.dl-tile-media{position:relative;aspect-ratio:16/10;border-bottom:1px solid var(--dl-line);overflow:hidden}
.dl-tile-body{display:flex;flex-direction:column;gap:var(--dl-s2);flex:1;
  padding:var(--dl-s4) var(--dl-s5) var(--dl-s5)}
.dl-tile-head{display:flex;align-items:center;justify-content:space-between;gap:var(--dl-s2)}
.dl-tile-title{font-size:var(--dl-fs-lg);font-weight:700;margin:0}
.dl-tile-desc{margin:0;flex:1;color:var(--dl-dim);font-size:var(--dl-fs-sm)}
.dl-tile-foot{display:flex;align-items:center;gap:var(--dl-s2);
  color:var(--dl-accent);font-size:var(--dl-fs-sm);font-weight:500}

/* ١٢.٦ أسطح بديلة للوسائط — مجسّم موسوم لونيًا (هوية المنتج) */
.dl-mesh{position:absolute;inset:0;background-color:var(--dl-panel-2)}
.dl-mesh::after{content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(to left,color-mix(in srgb,var(--dl-line-2) 70%,transparent) 1px,transparent 1px),
    linear-gradient(to top,color-mix(in srgb,var(--dl-line-2) 70%,transparent) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(to top,#000,transparent);
  mask-image:linear-gradient(to top,#000,transparent)}
.dl-mesh--a{background-image:
  linear-gradient(145deg,color-mix(in srgb,var(--dl-accent) 42%,transparent),transparent 62%),
  radial-gradient(72% 90% at 18% 92%,color-mix(in srgb,var(--dl-info) 42%,transparent),transparent)}
.dl-mesh--b{background-image:
  linear-gradient(200deg,color-mix(in srgb,var(--dl-info) 40%,transparent),transparent 58%),
  radial-gradient(80% 70% at 82% 20%,color-mix(in srgb,var(--dl-ok) 36%,transparent),transparent)}
.dl-mesh--c{background-image:
  linear-gradient(120deg,color-mix(in srgb,var(--dl-err) 34%,transparent),transparent 60%),
  radial-gradient(70% 80% at 30% 15%,color-mix(in srgb,var(--dl-accent) 40%,transparent),transparent)}
.dl-mesh--d{background-image:
  linear-gradient(165deg,color-mix(in srgb,var(--dl-ok) 36%,transparent),transparent 62%),
  radial-gradient(75% 85% at 75% 85%,color-mix(in srgb,var(--dl-info) 38%,transparent),transparent)}

/* ١٢.٧ الأرقام المقيسة */
.dl-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--dl-s4)}
.dl-stat{background:var(--dl-panel);border:1px solid var(--dl-line);
  border-radius:var(--dl-r-md);padding:var(--dl-s5);text-align:center}
.dl-stat-num{font-size:var(--dl-fs-3xl);font-weight:700;color:var(--dl-accent);
  line-height:1.1;font-variant-numeric:tabular-nums}
.dl-stat-cap{margin-top:var(--dl-s2);color:var(--dl-ink);font-size:var(--dl-fs-sm)}
.dl-stat-src{margin-top:var(--dl-s1);color:var(--dl-faint);font-size:var(--dl-fs-xs)}

/* ١٢.٨ الخطوات */
.dl-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--dl-s4)}
.dl-step{background:var(--dl-panel);border:1px solid var(--dl-line);
  border-radius:var(--dl-r-md);padding:var(--dl-s5)}
.dl-step-num{width:32px;height:32px;border-radius:var(--dl-r-full);
  background:var(--dl-accent-soft);color:var(--dl-accent);font-weight:700;
  display:flex;align-items:center;justify-content:center;margin-bottom:var(--dl-s3)}
.dl-step h4{margin:0 0 var(--dl-s1)}
.dl-step p{margin:0;color:var(--dl-dim);font-size:var(--dl-fs-sm)}

/* ١٢.٩ الذيل */
.dl-footer{border-top:1px solid var(--dl-line);margin-top:var(--dl-s8);
  padding:var(--dl-s7) 0 var(--dl-s6);color:var(--dl-dim);font-size:var(--dl-fs-sm)}
.dl-footer-grid{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:var(--dl-s5)}
@media (max-width:760px){.dl-footer-grid{grid-template-columns:1fr 1fr}}
.dl-footer h5{margin:0 0 var(--dl-s2);color:var(--dl-ink);font-size:var(--dl-fs-sm);font-weight:500}
.dl-footer a{display:block;padding:3px 0;color:var(--dl-dim);text-decoration:none}
.dl-footer a:hover{color:var(--dl-accent)}
.dl-footer-bar{margin-top:var(--dl-s6);padding-top:var(--dl-s4);
  border-top:1px solid var(--dl-line);display:flex;justify-content:space-between;
  gap:var(--dl-s3);flex-wrap:wrap;font-size:var(--dl-fs-xs);color:var(--dl-faint)}

/* ١٢.١٠ الاتجاه — العربية أساس، والإنجليزية تقلب الاتجاه بسمة dir وحدها */
/* الخصوصية (0,2,0) تغلب body.dl-root (0,1,1) — كانت :where تخسر (عطب قاسته Studios) */
.dl-root[dir="ltr"],[dir="ltr"] .dl-root{direction:ltr}
:where([dir="ltr"]) .dl-input--num{direction:ltr}

/* ============================================================
   ١٣) طبقة الاستوديو — واجهات التوليد
   تملكها Delato Main. تستعملها الاستوديوهات الثلاثة وأي واجهة
   توليد لاحقة. كلّها مبنيّة على رموز القسم ١ — بلا قيمة حرفية.
   ============================================================ */
:root{ --dl-rail:320px; --dl-composer-h:auto; }

/* ١٣.١ تخطيط الاستوديو: نتائج + لوح إعدادات */
.dl-studio{display:grid;grid-template-columns:1fr var(--dl-rail);
  gap:var(--dl-s5);align-items:start;min-height:calc(100vh - var(--dl-nav-h))}
.dl-studio-main{display:flex;flex-direction:column;gap:var(--dl-s4);min-width:0}
.dl-studio-rail{position:sticky;top:calc(var(--dl-nav-h) + var(--dl-s4));
  display:flex;flex-direction:column;gap:var(--dl-s4);
  background:var(--dl-panel);border:1px solid var(--dl-line);
  border-radius:var(--dl-r-lg);padding:var(--dl-s5);
  max-height:calc(100vh - var(--dl-nav-h) - var(--dl-s6));overflow:auto}
@media (max-width:980px){
  .dl-studio{grid-template-columns:1fr}
  .dl-studio-rail{position:static;max-height:none}
}

/* ١٣.٢ مؤلّف الموجّه */
.dl-prompt{background:var(--dl-panel);border:1px solid var(--dl-line);
  border-radius:var(--dl-r-lg);padding:var(--dl-s3);
  transition:border-color var(--dl-t-fast),box-shadow var(--dl-t-fast)}
.dl-prompt:focus-within{border-color:var(--dl-accent);box-shadow:var(--dl-shadow-1)}
.dl-prompt-box{width:100%;box-sizing:border-box;border:none;background:transparent;
  color:var(--dl-ink);font:inherit;font-size:var(--dl-fs-md);line-height:var(--dl-lh);
  resize:vertical;min-height:84px;padding:var(--dl-s2)}
.dl-prompt-box:focus{outline:none}
.dl-prompt-box::placeholder{color:var(--dl-faint)}
.dl-prompt-foot{display:flex;align-items:center;gap:var(--dl-s2);
  flex-wrap:wrap;padding-top:var(--dl-s2);border-top:1px solid var(--dl-line)}

/* ١٣.٣ منتقي النموذج */
.dl-modelpick{display:flex;flex-direction:column;gap:var(--dl-s1)}
.dl-modelpick-item{display:flex;align-items:center;gap:var(--dl-s3);width:100%;
  text-align:start;font:inherit;cursor:pointer;
  background:transparent;border:1px solid transparent;border-radius:var(--dl-r-md);
  padding:var(--dl-s2) var(--dl-s3);transition:background var(--dl-t-fast),border-color var(--dl-t-fast)}
.dl-modelpick-item:hover{background:var(--dl-panel-2)}
.dl-modelpick-item[aria-selected="true"]{border-color:var(--dl-accent);background:var(--dl-accent-soft)}
.dl-modelpick-item[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.dl-model-name{font-weight:500;font-size:var(--dl-fs-sm)}
.dl-model-meta{display:flex;gap:var(--dl-s2);margin-inline-start:auto;
  font-size:var(--dl-fs-xs);color:var(--dl-dim);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ١٣.٤ مجموعة مجزّأة (وضع/جودة/صيغة) */
.dl-seg{display:inline-flex;background:var(--dl-panel-2);border:1px solid var(--dl-line);
  border-radius:var(--dl-r-sm);padding:2px;gap:2px}
.dl-seg-item{font:inherit;font-size:var(--dl-fs-xs);cursor:pointer;
  background:transparent;border:none;color:var(--dl-dim);
  padding:5px 12px;border-radius:calc(var(--dl-r-sm) - 2px);
  transition:background var(--dl-t-fast),color var(--dl-t-fast)}
.dl-seg-item:hover{color:var(--dl-ink)}
.dl-seg-item[aria-pressed="true"]{background:var(--dl-panel);color:var(--dl-ink);font-weight:500;
  box-shadow:var(--dl-shadow-1)}

/* ١٣.٥ رقاقات الأنماط والقوالب */
.dl-chips{display:flex;flex-wrap:wrap;gap:var(--dl-s2)}
.dl-chip{display:inline-flex;align-items:center;gap:var(--dl-s1);font:inherit;
  font-size:var(--dl-fs-xs);cursor:pointer;
  background:var(--dl-panel-2);color:var(--dl-dim);
  border:1px solid var(--dl-line);border-radius:var(--dl-r-full);
  padding:4px 12px;transition:all var(--dl-t-fast)}
.dl-chip:hover{border-color:var(--dl-line-2);color:var(--dl-ink)}
.dl-chip[aria-pressed="true"]{background:var(--dl-accent-soft);
  border-color:var(--dl-accent);color:var(--dl-accent);font-weight:500}

/* ١٣.٦ منتقي النسبة — تمثيل بصري */
.dl-ratios{display:flex;flex-wrap:wrap;gap:var(--dl-s2);align-items:flex-end}
.dl-ratio{display:flex;flex-direction:column;align-items:center;gap:var(--dl-s1);
  font:inherit;cursor:pointer;background:none;border:none;padding:0;color:var(--dl-dim)}
.dl-ratio-box{width:34px;height:34px;display:grid;place-items:center}
.dl-ratio-box i{display:block;border:1.5px solid currentColor;border-radius:3px}
.dl-ratio-lab{font-size:var(--dl-fs-xs);font-variant-numeric:tabular-nums}
.dl-ratio:hover{color:var(--dl-ink)}
.dl-ratio[aria-pressed="true"]{color:var(--dl-accent)}

/* ١٣.٧ منزلق بقيمة */
.dl-range{display:flex;flex-direction:column;gap:var(--dl-s1)}
.dl-range-head{display:flex;justify-content:space-between;align-items:baseline;
  font-size:var(--dl-fs-xs);color:var(--dl-dim)}
.dl-range-val{font-family:var(--dl-mono);color:var(--dl-ink);font-variant-numeric:tabular-nums}
.dl-range input[type="range"]{width:100%;accent-color:var(--dl-accent);margin:0}

/* ١٣.٨ الإعدادات المتقدّمة */
.dl-adv{border-top:1px solid var(--dl-line);padding-top:var(--dl-s3)}
.dl-adv>summary{cursor:pointer;list-style:none;display:flex;align-items:center;
  gap:var(--dl-s2);font-size:var(--dl-fs-sm);color:var(--dl-dim);user-select:none}
.dl-adv>summary::-webkit-details-marker{display:none}
.dl-adv>summary::after{content:"+";margin-inline-start:auto;font-family:var(--dl-mono)}
.dl-adv[open]>summary::after{content:"−"}
.dl-adv>summary:hover{color:var(--dl-ink)}
.dl-adv-body{display:flex;flex-direction:column;gap:var(--dl-s4);padding-top:var(--dl-s4)}

/* ١٣.٩ شريط الكلفة — يُعرض قبل الضغط */
.dl-cost{display:flex;align-items:center;gap:var(--dl-s2);flex-wrap:wrap;
  background:var(--dl-panel-2);border:1px solid var(--dl-line);
  border-radius:var(--dl-r-md);padding:var(--dl-s3);font-size:var(--dl-fs-sm)}
.dl-cost-num{font-family:var(--dl-mono);font-weight:700;color:var(--dl-accent-2);
  font-variant-numeric:tabular-nums}
.dl-cost--over{border-color:var(--dl-err);background:var(--dl-err-soft)}
.dl-cost--over .dl-cost-num{color:var(--dl-err)}

/* ١٣.١٠ منطقة إسقاط المراجع */
.dl-drop{display:grid;place-items:center;gap:var(--dl-s2);text-align:center;
  border:1.5px dashed var(--dl-line-2);border-radius:var(--dl-r-md);
  padding:var(--dl-s5) var(--dl-s3);color:var(--dl-dim);font-size:var(--dl-fs-xs);
  transition:border-color var(--dl-t-fast),background var(--dl-t-fast)}
.dl-drop:hover,.dl-drop[data-over="true"]{border-color:var(--dl-accent);background:var(--dl-accent-soft)}
.dl-refs{display:flex;gap:var(--dl-s2);flex-wrap:wrap}
.dl-ref{position:relative;width:60px;height:60px;border-radius:var(--dl-r-sm);
  overflow:hidden;border:1px solid var(--dl-line);background:var(--dl-panel-2)}
.dl-ref img{width:100%;height:100%;object-fit:cover;display:block}
.dl-ref-x{position:absolute;inset-block-start:2px;inset-inline-end:2px;
  width:18px;height:18px;border-radius:var(--dl-r-full);border:none;cursor:pointer;
  background:var(--dl-ink);color:var(--dl-bg);font-size:var(--dl-fs-xs);line-height:1}

/* ١٣.١١ شبكة النتائج */
.dl-results{display:flex;flex-direction:column;gap:var(--dl-s5)}
.dl-result-row{display:flex;flex-direction:column;gap:var(--dl-s2)}
.dl-result-head{display:flex;align-items:center;gap:var(--dl-s2);flex-wrap:wrap;
  font-size:var(--dl-fs-xs);color:var(--dl-dim)}
.dl-result-head .dl-row-actions{margin-inline-start:auto;display:flex;gap:var(--dl-s1);opacity:0;
  transition:opacity var(--dl-t-fast)}
.dl-result-row:hover .dl-row-actions,.dl-result-row:focus-within .dl-row-actions{opacity:1}
.dl-result-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--dl-s3)}
.dl-result{position:relative;aspect-ratio:1;border-radius:var(--dl-r-md);overflow:hidden;
  background:var(--dl-panel-2);border:1px solid var(--dl-line)}
.dl-result img,.dl-result video{width:100%;height:100%;object-fit:cover;display:block}
.dl-result-actions{position:absolute;inset-block-end:0;inset-inline:0;
  display:flex;gap:var(--dl-s1);padding:var(--dl-s2);
  background:linear-gradient(to top,rgba(10,11,14,.72),transparent);
  opacity:0;transition:opacity var(--dl-t-fast)}
.dl-result:hover .dl-result-actions,.dl-result:focus-within .dl-result-actions{opacity:1}
.dl-result[data-state="pending"]{display:grid;place-items:center}
.dl-result[data-selected="true"]{outline:2px solid var(--dl-accent);outline-offset:-2px}

/* ١٣.١٢ التقدّم */
.dl-progress{height:4px;background:var(--dl-panel-2);border-radius:var(--dl-r-full);overflow:hidden}
.dl-progress-bar{height:100%;background:var(--dl-accent);transition:width var(--dl-t-med)}
.dl-progress--idle .dl-progress-bar{background:var(--dl-line-2)}

/* ١٣.١٣ فراغ ومفاتيح */
.dl-empty{display:grid;place-items:center;gap:var(--dl-s3);text-align:center;
  padding:var(--dl-s8) var(--dl-s4);color:var(--dl-dim);
  border:1px dashed var(--dl-line);border-radius:var(--dl-r-lg)}
.dl-kbd{font-family:var(--dl-mono);font-size:var(--dl-fs-xs);
  background:var(--dl-panel-2);border:1px solid var(--dl-line);
  border-block-end-width:2px;border-radius:var(--dl-r-sm);padding:1px 6px;color:var(--dl-dim)}

/* ---------- v1.4 · القشرة (٢٠٢٦/٠٩/٢٠) — رأس بقائمة جوّال، بطل مقسوم بمعاينة، بطاقات محطّات، بطاقات نقاط ---------- */
.dl-page{min-height:calc(100vh - var(--dl-nav-h))}
.dl-nav-drawer{position:relative;display:none}
@media (max-width:1120px){.dl-nav-drawer{display:block}}
.dl-nav-drawer>summary{list-style:none}
.dl-nav-drawer>summary::-webkit-details-marker{display:none}
.dl-nav-drawer-panel{position:absolute;inset-inline-end:0;top:calc(100% + var(--dl-s2));min-width:200px;
  background:var(--dl-panel);border:1px solid var(--dl-line);border-radius:var(--dl-r-md);box-shadow:var(--dl-shadow-2);
  padding:var(--dl-s2);display:flex;flex-direction:column;z-index:var(--dl-z-drop)}
.dl-nav-drawer-panel a{display:block;padding:var(--dl-s2) var(--dl-s3)}
/* v1.8.1: الشريط بالمزايا الثماني — رابط أضيق، وعنصر «قريبًا» معطَّل، وقائمة جوّال باسم ووصف */
.dl-nav-links a{padding:4px 8px;white-space:nowrap}
.dl-nav-soon{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;font-size:var(--dl-fs-sm);color:var(--dl-faint);white-space:nowrap;cursor:default}
.dl-nav-soon small{font-size:var(--dl-fs-xs);padding:1px 6px;border-radius:999px;border:1px solid var(--dl-line);color:var(--dl-dim)}
.dl-nav-drawer-panel{min-width:300px;max-width:min(92vw,360px)}
.dl-nav-drawer-panel a,.dl-nav-drawer-panel .dl-nav-soon{display:flex;flex-direction:column;align-items:flex-start;gap:2px;white-space:normal}
.dl-nav-drawer-panel b{font-weight:600;color:var(--dl-ink)}
.dl-nav-drawer-panel a[aria-current="page"] b{color:var(--dl-accent)}
.dl-nav-drawer-panel small{font-size:var(--dl-fs-xs);color:var(--dl-dim);line-height:1.5}
.dl-nav-drawer-panel .dl-nav-soon small{border:0;padding:0}
/* v1.9.1: صفّ فرعيّ تحت الشريط الموحَّد لتبويبات الميزة (Studios: الأساسيّ/السينمائيّ/التسويقيّ) */
.dl-subnav{display:flex;align-items:center;gap:var(--dl-s1);padding:var(--dl-s1) var(--dl-s5);background:var(--dl-panel);border-bottom:1px solid var(--dl-line);overflow-x:auto}
.dl-subnav a{color:var(--dl-dim);text-decoration:none;font-size:var(--dl-fs-sm);padding:4px 10px;border-radius:var(--dl-r-sm);white-space:nowrap}
.dl-subnav a:hover{color:var(--dl-ink);background:var(--dl-panel-2)}
.dl-subnav a[aria-current="page"]{color:var(--dl-accent);font-weight:500;background:var(--dl-accent-soft)}

.dl-hero--split{text-align:start}
.dl-hero-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:var(--dl-s7);align-items:center}
@media (max-width:880px){.dl-hero-grid{grid-template-columns:1fr;gap:var(--dl-s6)}}
.dl-hero--split .dl-hero-sub{margin-inline:0}
.dl-hero--split .dl-hero-cta{justify-content:flex-start}
.dl-hero--split .dl-eyebrow{justify-content:flex-start}

.dl-preview{background:var(--dl-panel);border:1px solid var(--dl-line);border-radius:var(--dl-r-lg);
  box-shadow:var(--dl-shadow-3);overflow:hidden}
.dl-preview-bar{display:flex;align-items:center;gap:var(--dl-s2);padding:var(--dl-s2) var(--dl-s3);
  border-bottom:1px solid var(--dl-line);background:var(--dl-panel-2);font-size:var(--dl-fs-xs);color:var(--dl-dim)}
.dl-preview-body{padding:var(--dl-s4);display:grid;gap:var(--dl-s3)}
.dl-preview-frame{aspect-ratio:16/9;border-radius:var(--dl-r-md);border:1px solid var(--dl-line);position:relative;overflow:hidden}
.dl-preview-row{display:flex;align-items:center;justify-content:space-between;gap:var(--dl-s3);font-size:var(--dl-fs-sm)}

.dl-stations{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--dl-s4)}
.dl-station{display:flex;gap:var(--dl-s3);align-items:flex-start;background:var(--dl-panel);border:1px solid var(--dl-line);
  border-radius:var(--dl-r-lg);padding:var(--dl-s4);text-decoration:none;color:inherit;
  transition:border-color var(--dl-t-fast),transform var(--dl-t-fast),box-shadow var(--dl-t-fast)}
a.dl-station:hover{border-color:var(--dl-accent);transform:translateY(-2px);box-shadow:var(--dl-shadow-2)}
.dl-station[aria-disabled="true"]{opacity:.6}
.dl-station-ico{flex:none;width:44px;height:44px;border-radius:var(--dl-r-md);display:grid;place-items:center;
  background:var(--dl-accent-soft);color:var(--dl-accent)}
.dl-station-ico svg{width:22px;height:22px}
.dl-station-body{display:flex;flex-direction:column;gap:var(--dl-s1);min-width:0}
.dl-station-title{font-weight:700;font-size:var(--dl-fs-md);display:flex;gap:var(--dl-s2);align-items:center;flex-wrap:wrap}
.dl-station-desc{color:var(--dl-dim);font-size:var(--dl-fs-sm)}

.dl-credits{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--dl-s4)}
.dl-credit{background:var(--dl-panel);border:1px solid var(--dl-line);border-radius:var(--dl-r-lg);padding:var(--dl-s5);
  text-decoration:none;color:inherit}
.dl-credit-num{font-family:var(--dl-mono);font-size:var(--dl-fs-2xl);font-weight:700;color:var(--dl-accent);line-height:var(--dl-lh-tight)}
a.dl-credit--link:hover{border-color:var(--dl-accent)}
.dl-footer-tagline{max-width:34ch}
/* علامة الاسم خارج الرأس (التذييل والمعاينة) — كانت مقصورة على .dl-nav فتراكبت النقطة مع الحرف */
.dl-brand-mark{display:inline-flex;align-items:center;gap:var(--dl-s2);text-decoration:none;color:inherit}
.dl-footer .dl-brand{font-weight:700;font-size:var(--dl-fs-lg);color:var(--dl-accent)}

/* ============================================================
   ١٦) الأزرار المضغوطة والأيقونات — v1.6.0 (٢٠٢٦/١٠/٠٧) · بقرار أحمد
   الأسلوب من «رَسْم» (Delato 3D): أزرار بارتفاع 32، حواف 8، خلفية لوح ثانٍ،
   وأيقونات خطّية بسيطة (icons.js). القاعدة:
   ١) ما اعتاد الناس رؤيته أيقونةً (تشغيل، إيقاف، تراجع، إغلاق، حذف، إضافة، بحث،
      إعدادات، مساعدة، تنزيل، مشاركة، ملء الشاشة، إظهار/إخفاء، قفل، تكبير) ⇒ زرّ أيقونة
      وحدها `.dl-ibtn` مع aria-label وtitle بالعربية.
   ٢) ما يحتاج كلمة فعلًا (توليد، تصدير، اعتماد، مكوّن…) ⇒ `.dl-tbtn` بكلمة واحدة،
      وأيقونة قبلها إن وُجدت لها أيقونة معروفة.
   ٣) العرض صفحة ويب: لا مساحة مهدرة — أشرطة أدوات مضغوطة تلتفّ، ولا أزرار كبيرة
      في مساحة العمل. الأحجام الكبيرة `.dl-btn--lg` للصفحات التعريفية فقط.
   ============================================================ */
:root{
  --dl-ctl-h:32px;          /* ارتفاع زرّ شريط الأدوات */
  --dl-ctl-h-sm:26px;       /* شريط الخطّ الزمني والقوائم الفرعية */
  --dl-ctl-r:8px;
  --dl-ctl-gap:6px;
  --dl-ico:18px;            /* حجم الأيقونة داخل الزرّ */
}
.dl-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:var(--dl-ctl-gap);row-gap:var(--dl-ctl-gap);min-width:0}
.dl-toolbar--bar{padding:6px 8px;background:var(--dl-panel);border-bottom:1px solid var(--dl-line)}
.dl-sep{width:1px;height:22px;background:var(--dl-line);flex:0 0 auto}
.dl-grow{flex:1 1 auto}

.dl-tbtn,.dl-ibtn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:var(--dl-ctl-h);padding:0 8px;flex:0 0 auto;
  background:var(--dl-panel-2);color:var(--dl-ink);
  border:1px solid var(--dl-line);border-radius:var(--dl-ctl-r);
  font:inherit;font-size:var(--dl-fs-sm);line-height:1;white-space:nowrap;cursor:pointer;
}
.dl-ibtn{width:var(--dl-ctl-h);padding:0}
.dl-tbtn:hover,.dl-ibtn:hover{border-color:var(--dl-line-2)}
.dl-tbtn:focus-visible,.dl-ibtn:focus-visible{outline:2px solid var(--dl-accent);outline-offset:1px}
.dl-tbtn:disabled,.dl-ibtn:disabled{opacity:.4;cursor:default}
.dl-tbtn.is-on,.dl-ibtn.is-on,.dl-tbtn[aria-pressed="true"],.dl-ibtn[aria-pressed="true"]{
  background:var(--dl-accent-soft);border-color:var(--dl-accent);color:var(--dl-ink)}
.dl-tbtn--primary{background:var(--dl-accent);border-color:var(--dl-accent);color:var(--dl-accent-ink);font-weight:700}
.dl-tbtn--primary:hover{filter:brightness(1.06);border-color:var(--dl-accent)}
.dl-tbtn--sm,.dl-ibtn--sm{height:var(--dl-ctl-h-sm);font-size:var(--dl-fs-xs);border-radius:6px}
.dl-ibtn--sm{width:var(--dl-ctl-h-sm)}
.dl-ibtn--ghost{background:transparent;border-color:transparent;color:var(--dl-dim)}
.dl-ibtn--ghost:hover{background:var(--dl-line);color:var(--dl-ink);border-color:transparent}
.dl-ibtn--ghost.is-off{opacity:.35}
.dl-tbtn .dl-svg,.dl-ibtn .dl-svg{width:var(--dl-ico);height:var(--dl-ico);flex:0 0 auto}
.dl-ibtn--sm .dl-svg,.dl-tbtn--sm .dl-svg{width:16px;height:16px}

/* أداة في لوح الأدوات (رسم، تحديد…): أيقونة وحرف الاختصار في الزاوية */
.dl-tool{position:relative;display:grid;place-items:center;width:46px;height:40px;padding:0;
  background:var(--dl-panel-2);border:1px solid var(--dl-line);border-radius:var(--dl-ctl-r);color:var(--dl-ink);cursor:pointer}
.dl-tool:hover{border-color:var(--dl-line-2)}
.dl-tool.is-on{background:var(--dl-accent-soft);border-color:var(--dl-accent)}
.dl-tool .dl-svg{width:22px;height:22px}
.dl-tool .k{position:absolute;inset-inline-start:4px;bottom:2px;font-size:9px;color:var(--dl-dim);font-family:var(--dl-mono)}

/* الأيقونات الاتّجاهية تنقلب في RTL (السهمان الجانبيان فقط؛ أزرار الوسائط تبقى كما اعتادها الناس) */
[dir="rtl"] .dl-flip .dl-svg,[dir="rtl"] .dl-svg.dl-flip{transform:scaleX(-1)}

/* اللمس: أهداف ≥ 40 بكسل على الشاشات اللمسية دون تكبير الواجهة على الحاسوب */
@media (pointer:coarse){
  .dl-tbtn,.dl-ibtn{height:40px}
  .dl-ibtn{width:40px}
  .dl-tbtn--sm,.dl-ibtn--sm{height:36px}
  .dl-ibtn--sm{width:36px}
}

/* ============================================================
   ١٤) الواجهة الرئيسيّة v2 — شريط العرض، المعرض المنتقى، بطاقات النماذج (v1.7.0 · ٢٠٢٦/١٠/١٧)
   قرار أحمد بعد تصفّح المنافسين: بطل سينمائيّ بعرض الشاشة، معرض قليل منتقى
   يحمل الكلفة، وبطاقات نماذج برقائق قدرات. لا قيم حرفيّة خارج هذا الملفّ.
   ============================================================ */

/* شريط العرض: فيديو صامت متكرّر يملأ العرض، والنصّ فوقه */
.dl-reel{position:relative;isolation:isolate;min-height:min(78vh,760px);display:grid;align-items:end;
  background:var(--dl-panel-2);overflow:hidden}
.dl-reel-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  filter:saturate(1.05) contrast(1.02)}
.dl-reel::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,var(--dl-bg) 0%,color-mix(in oklab,var(--dl-bg) 72%,transparent) 38%,transparent 70%),
             linear-gradient(to right,color-mix(in oklab,var(--dl-bg) 55%,transparent),transparent 55%)}
[dir="rtl"] .dl-reel::after{background:linear-gradient(to top,var(--dl-bg) 0%,color-mix(in oklab,var(--dl-bg) 72%,transparent) 38%,transparent 70%),
             linear-gradient(to left,color-mix(in oklab,var(--dl-bg) 55%,transparent),transparent 55%)}
.dl-reel-body{padding:var(--dl-s9) 0 var(--dl-s7);max-width:62ch}
.dl-reel .dl-hero-title{text-align:start;margin-bottom:var(--dl-s4);text-wrap:balance;
  text-shadow:0 2px 24px color-mix(in oklab,var(--dl-bg) 80%,transparent)}
.dl-reel .dl-hero-sub{margin-inline:0;text-align:start}
.dl-reel .dl-hero-cta{justify-content:flex-start}
/* إسناد اللقطة الجارية: النموذج والكلفة — صغير في الزاوية السفلى */
.dl-reel-credit{position:absolute;inset-inline-end:var(--dl-s4);bottom:var(--dl-s4);display:flex;gap:var(--dl-s2);
  align-items:center;padding:6px 10px;border-radius:999px;background:color-mix(in oklab,var(--dl-bg) 70%,transparent);
  border:1px solid var(--dl-line);font-size:var(--dl-fs-xs);color:var(--dl-dim);backdrop-filter:blur(8px)}
.dl-reel-credit b{color:var(--dl-ink);font-weight:600}
@media (prefers-reduced-motion:reduce){.dl-reel-video{display:none}.dl-reel{background:var(--dl-panel)}}

/* المعرض المنتقى: ٦–٩ بطاقات، كلّ بطاقة تحمل النموذج والمدّة والكلفة */
.dl-showcase{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--dl-s4)}
.dl-showcase-card{display:flex;flex-direction:column;background:var(--dl-panel);border:1px solid var(--dl-line);
  border-radius:var(--dl-r-lg);overflow:hidden;color:inherit;text-decoration:none;
  transition:border-color var(--dl-t-med),transform var(--dl-t-med),box-shadow var(--dl-t-med)}
.dl-showcase-card:hover{border-color:var(--dl-accent);transform:translateY(-3px);box-shadow:var(--dl-shadow-2)}
.dl-showcase-card--wide{grid-column:span 2}
@media (max-width:640px){.dl-showcase-card--wide{grid-column:span 1}}
.dl-showcase-media{position:relative;aspect-ratio:16/9;background:var(--dl-panel-2);overflow:hidden}
.dl-showcase-card--tall .dl-showcase-media{aspect-ratio:9/16}
.dl-showcase-media>video,.dl-showcase-media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.dl-showcase-kind{position:absolute;top:var(--dl-s2);inset-inline-start:var(--dl-s2)}
.dl-showcase-body{display:flex;flex-direction:column;gap:var(--dl-s2);padding:var(--dl-s3) var(--dl-s4) var(--dl-s4)}
.dl-showcase-title{margin:0;font-size:var(--dl-fs-md);font-weight:700;line-height:1.3}
.dl-showcase-meta{display:flex;flex-wrap:wrap;gap:var(--dl-s2) var(--dl-s3);align-items:center;
  font-size:var(--dl-fs-xs);color:var(--dl-dim)}
.dl-showcase-meta .dl-cost-num{font-size:var(--dl-fs-sm)}
.dl-showcase-empty{grid-column:1/-1;padding:var(--dl-s7);text-align:center;color:var(--dl-dim);
  border:1px dashed var(--dl-line-2);border-radius:var(--dl-r-lg)}

/* صفحة اللقطة */
.dl-shot{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:var(--dl-s5);align-items:start}
@media (max-width:900px){.dl-shot{grid-template-columns:1fr}}
.dl-shot-media{position:relative;background:var(--dl-panel-2);border:1px solid var(--dl-line);border-radius:var(--dl-r-lg);overflow:hidden}
.dl-shot-media>video{display:block;width:100%;height:auto;max-height:78vh;background:#000}
.dl-shot-prompt{white-space:pre-wrap;font-size:var(--dl-fs-sm);line-height:1.7;margin:0}

/* بطاقات النماذج: الحقائق المقيسة فقط — قدرات وكلفة. لا عدّادات سرعة/جودة بلا قياس */
.dl-models{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--dl-s3)}
.dl-model-card{display:flex;flex-direction:column;gap:var(--dl-s2);padding:var(--dl-s4);
  background:var(--dl-panel);border:1px solid var(--dl-line);border-radius:var(--dl-r-lg);color:inherit;text-decoration:none;
  transition:border-color var(--dl-t-med),transform var(--dl-t-med)}
.dl-model-card:hover{border-color:var(--dl-accent);transform:translateY(-2px)}
.dl-model-card[aria-disabled="true"]{opacity:.55}
.dl-model-head{display:flex;align-items:center;justify-content:space-between;gap:var(--dl-s2)}
.dl-model-name{margin:0;font-size:var(--dl-fs-md);font-weight:700}
.dl-model-provider{font-size:var(--dl-fs-xs);color:var(--dl-faint);font-family:var(--dl-mono)}
.dl-caps{display:flex;flex-wrap:wrap;gap:6px}
.dl-cap{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;
  font-size:var(--dl-fs-xs);background:var(--dl-panel-2);border:1px solid var(--dl-line);color:var(--dl-dim);white-space:nowrap}
.dl-cap--on{color:var(--dl-ink);border-color:var(--dl-line-2)}
.dl-model-cost{display:flex;align-items:baseline;justify-content:space-between;gap:var(--dl-s2);
  margin-top:auto;padding-top:var(--dl-s2);border-top:1px solid var(--dl-line);font-size:var(--dl-fs-xs);color:var(--dl-dim)}


/* ============================================================
   ١٥) اللوحة العقديّة — Delato Flow (v1.9.0 · ٢٠٢٦/١٠/١٨)
   نُقلت حرفيًّا من مسودة محادثة Flow (`styles/flow-15.draft.css`، وثيقة ٣٠٠ §٤) بعد المراجعة:
   رموز `--dl-*` وحدها؛ رموز React Flow (`--xy-*`) تُربط برموزنا فتتبع السمتين.
   ألوان المنافذ (قرار Main): نصّ = info · صورة = accent · فيديو = warn · صوت = ok.
   ============================================================ */
/* ١٥.١ الإطار: شريط علوي نحيف + مسرح يأخذ الباقي + شريط حالة (نمط «رَسْم») */
/* v1.9.1: اللوحة تحت الشريط الموحَّد (MOUNT §١٠) — الارتفاع ناقص ارتفاع الشريط */
.dl-flow{display:flex;flex-direction:column;height:calc(100dvh - var(--dl-nav-h));min-height:0;background:var(--dl-bg);color:var(--dl-ink)}
.dl-flow-stage{position:relative;flex:1 1 auto;min-height:0}
.dl-flow-status{display:flex;align-items:center;gap:var(--dl-s3);padding:var(--dl-s1) var(--dl-s3);
  font-size:var(--dl-fs-xs);color:var(--dl-dim);background:var(--dl-panel);border-top:thin solid var(--dl-line);min-height:var(--dl-ctl-h-sm)}
.dl-flow-status [data-tone="err"]{color:var(--dl-err)}
.dl-flow-status [data-tone="ok"]{color:var(--dl-ok)}
.dl-flow-status [data-tone="warn"]{color:var(--dl-warn)}
.dl-flow-title{inline-size:calc(var(--dl-rail) * .6);height:var(--dl-ctl-h-sm)}

/* ١٥.٢ رموز React Flow تُربط برموزنا — فتتبع السمتين تلقائيًّا */
.dl-flow-canvas{
  --xy-background-color:var(--dl-bg);
  --xy-background-pattern-color:var(--dl-line);
  --xy-edge-stroke:var(--dl-line-2);
  --xy-edge-stroke-selected:var(--dl-accent);
  --xy-edge-stroke-width:2;
  --xy-connectionline-stroke:var(--dl-accent);
  --xy-node-background-color:var(--dl-panel);
  --xy-node-border:thin solid var(--dl-line);
  --xy-node-color:var(--dl-ink);
  --xy-node-boxshadow-selected:var(--dl-glow);
  --xy-selection-background-color:var(--dl-accent-soft);
  --xy-selection-border:thin dashed var(--dl-accent);
  --xy-minimap-background-color:var(--dl-panel);
  --xy-minimap-mask-background-color:var(--dl-accent-soft);
  --xy-minimap-node-background-color:var(--dl-line-2);
  --xy-controls-button-background-color:var(--dl-panel);
  --xy-controls-button-color:var(--dl-ink);
  --xy-controls-button-border-color:var(--dl-line);
  --xy-attribution-background-color:transparent;
  inline-size:100%;block-size:100%}
.dl-flow-canvas .react-flow__minimap{border:thin solid var(--dl-line);border-radius:var(--dl-r-md);overflow:hidden}

/* ١٥.٣ العقدة */
.dl-node{inline-size:calc(var(--dl-rail) * .75);background:var(--dl-panel);border:thin solid var(--dl-line);
  border-radius:var(--dl-r-md);box-shadow:var(--dl-shadow-1);font-size:var(--dl-fs-sm);color:var(--dl-ink)}
.dl-node--wide{inline-size:var(--dl-rail)}
.selected>.dl-node,.dl-node[data-selected="true"]{border-color:var(--dl-accent);box-shadow:var(--dl-glow)}
.dl-node-head{display:flex;align-items:center;gap:var(--dl-s2);padding:var(--dl-s1) var(--dl-s2) var(--dl-s1) var(--dl-s3);
  border-bottom:thin solid var(--dl-line);color:var(--dl-dim);font-size:var(--dl-fs-xs);font-weight:600;min-height:var(--dl-ctl-h)}
.dl-node-head .dl-svg{inline-size:var(--dl-fs-sm);block-size:var(--dl-fs-sm)}
.dl-node-body{display:grid;gap:var(--dl-s2);padding:var(--dl-s3)}
.dl-node-body textarea{resize:vertical;min-block-size:calc(var(--dl-s10) * .6);font-size:var(--dl-fs-sm)}
.dl-node-media{display:block;inline-size:100%;max-block-size:calc(var(--dl-rail) * .7);object-fit:contain;
  border-radius:var(--dl-r-sm);background:var(--dl-panel-2)}
.dl-node-drop{display:grid;place-items:center;gap:var(--dl-s1);inline-size:100%;min-block-size:calc(var(--dl-s10) * .75);padding:var(--dl-s3);background:transparent;font:inherit;
  border:thin dashed var(--dl-line-2);border-radius:var(--dl-r-sm);color:var(--dl-faint);font-size:var(--dl-fs-xs);text-align:center;cursor:pointer}
.dl-node-drop:hover,.dl-node-drop[data-over="true"]{border-color:var(--dl-accent);color:var(--dl-accent)}
.dl-node--note{background:var(--dl-warn-soft);border-color:var(--dl-warn-soft)}
.dl-node--comment{background:var(--dl-info-soft);border-color:var(--dl-info-soft);border-inline-start:medium solid var(--dl-info)}
.dl-node-meta{font-size:var(--dl-fs-xs);color:var(--dl-faint)}
.dl-node-err{font-size:var(--dl-fs-xs);color:var(--dl-err)}

/* ١٥.٤ المنافذ — صفّ لكلّ منفذ، والمقبض على حافّة العقدة بلون نوعه */
.dl-node-ports{display:grid;gap:var(--dl-s1);padding:var(--dl-s2) 0}
.dl-port-row{position:relative;display:flex;align-items:center;gap:var(--dl-s1);padding:0 var(--dl-s3);
  font-size:var(--dl-fs-xs);color:var(--dl-dim);min-block-size:var(--dl-ctl-h-sm)}
.dl-port-row--out{justify-content:flex-end}
.dl-port-row [data-req="true"]::after{content:" *";color:var(--dl-err)}
.dl-flow-canvas .react-flow__handle.dl-port{inline-size:var(--dl-s3);block-size:var(--dl-s3);border:medium solid var(--dl-panel);
  border-radius:var(--dl-r-full);background:var(--dl-line-2)}
.dl-flow-canvas .react-flow__handle.dl-port--text{background:var(--dl-info)}
.dl-flow-canvas .react-flow__handle.dl-port--image{background:var(--dl-accent)}
.dl-flow-canvas .react-flow__handle.dl-port--video{background:var(--dl-warn)}
.dl-flow-canvas .react-flow__handle.dl-port--audio{background:var(--dl-ok)}
.dl-flow-canvas .react-flow__handle.dl-port.connectingto{box-shadow:var(--dl-glow)}

/* ١٥.٥ الوصلة بلون نوعها */
.dl-flow-canvas .react-flow__edge.dl-edge--text path.react-flow__edge-path{stroke:var(--dl-info)}
.dl-flow-canvas .react-flow__edge.dl-edge--image path.react-flow__edge-path{stroke:var(--dl-accent)}
.dl-flow-canvas .react-flow__edge.dl-edge--video path.react-flow__edge-path{stroke:var(--dl-warn)}
.dl-flow-canvas .react-flow__edge.dl-edge--audio path.react-flow__edge-path{stroke:var(--dl-ok)}
.dl-flow-canvas .react-flow__edge.selected path.react-flow__edge-path{stroke-width:3;filter:drop-shadow(var(--dl-glow))}

/* ١٥.٦ قوائم عائمة: منتقي العقدة بنقرتين، وقائمة اللوحات */
.dl-flow-pop{position:absolute;z-index:var(--dl-z-drop);display:grid;gap:var(--dl-s1);padding:var(--dl-s2);
  background:var(--dl-panel);border:thin solid var(--dl-line);border-radius:var(--dl-r-md);box-shadow:var(--dl-shadow-2)}
.dl-flow-pop--row{grid-auto-flow:column}
.dl-flow-list{inset-block-start:var(--dl-s2);inset-inline-start:var(--dl-s2);inline-size:var(--dl-rail);max-block-size:70%;overflow:auto}
.dl-flow-list button{display:flex;justify-content:space-between;gap:var(--dl-s2);inline-size:100%;padding:var(--dl-s2);text-align:start;
  background:transparent;border:0;border-radius:var(--dl-r-sm);color:var(--dl-ink);font:inherit;cursor:pointer}
.dl-flow-list button:hover{background:var(--dl-line)}
.dl-flow-empty{position:absolute;inset:0;display:grid;place-content:center;gap:var(--dl-s1);text-align:center;pointer-events:none;color:var(--dl-faint)}

/* ١٥.٧ اللوحة المضمَّنة في صفحة التعريف (عرض حيّ) */
.dl-flow-embed{position:relative;block-size:calc(var(--dl-s10) * 4);border:thin solid var(--dl-line);border-radius:var(--dl-r-lg);
  overflow:hidden;background:var(--dl-bg);box-shadow:var(--dl-shadow-2);text-align:start}
.dl-flow-embed--sm{block-size:calc(var(--dl-s10) * 2.25)}
.dl-flow-embed .dl-flow{block-size:100%}