/* ============================================================
   KHW-UNI-2 — هوية Drones Hub على صفحات الأدوات الموحّدة

   هذا ليس تقريباً للتصميم: هو ملف الهوية نفسه المستخدم في
   hub.dronesuae.com (logo-theme)، منقولاً حرفياً ومحصوراً تحت
   السمة data-uni حتى لا تتأثر بقية صفحات الموقع الرئيسي.

   النتيجة: الزائر القادم من hub لا يشعر أنه غادر منصة الدرون.

   ⚠️ ملاحظة: هذه الهوية تعرّف ألوان الحالة بدرجات ترابية
   (أحمر #a83930 · كهرماني #7d5324 · أخضر #306c4c) بدل الدرجات
   الصارخة. هذه قيم hub نفسها المعمول بها اليوم، وكلها داكنة على
   خلفية فاتحة فيبقى التمييز والتباين قائماً.
   ============================================================ */

:root[data-uni] {
 color-scheme: light;
 --bg:#f9f7f2; --bg-soft:#f0ece4; --panel:#fffdf9; --panel2:#eee9e0;
 --surface:rgba(255,253,249,.91); --surface-strong:rgba(255,253,249,.97);
 --line:#d9d0c2; --line-strong:#b9a98f;
 --ink:#302f2c; --text:#302f2c; --mut:#605b53; --muted:#605b53;
 --amber:#7d5324; --cyan:#7d5324; --cyan-soft:#805b2e;
 --orange:#7d5324; --orange-soft:#805b2e; --slate:#605b53;
 --green:#306c4c; --red:#a83930; --danger:#a83930;
 --shadow:0 22px 64px rgba(75,65,51,.10);
 --brand-gold:#c0975b; --brand-silver:#aaa69f;
}
:root[data-uni], :root[data-uni] body {background-color:var(--bg);color:var(--ink)}
:root[data-uni] body {background-image:radial-gradient(ellipse at 18% 14%,rgba(192,151,91,.10),transparent 32rem),linear-gradient(180deg,#f9f7f2,#f0ece4 60%,#f9f7f2)}
:root[data-uni] body::after, :root[data-uni] .vignette {background:radial-gradient(circle,transparent 45%,rgba(227,220,207,.16) 100%)}
:root[data-uni] .atmosphere, :root[data-uni] .duae-unified-layer {mix-blend-mode:multiply;opacity:.45}
:root[data-uni] .noise {opacity:.025}
:root[data-uni] .site-header, :root[data-uni] .duae-site-header, :root[data-uni] .duae-site-header::before {background:linear-gradient(120deg,#fffdf9,#f0ece4);color:var(--ink)}
:root[data-uni] .mobile-menu, :root[data-uni] .duae-mobile-menu, :root[data-uni] .mega-menu, :root[data-uni] .navsub, :root[data-uni] .sitemenu, :root[data-uni] .sitepanel, :root[data-uni] .sresults {background:#fffdf9;color:var(--ink)}
:root[data-uni] .gradient-text {background-image:linear-gradient(110deg,#35332f,#805b2e 40%,#7d5324 75%,#35332f);text-shadow:none}
:root[data-uni] .button--primary, :root[data-uni] .btn:not(.ghost), :root[data-uni] button[type="submit"], :root[data-uni] nav a.on, :root[data-uni] nav button.on, :root[data-uni] .pnbtn.on, :root[data-uni] .duae-unified-home {
 color:#30291f;background:linear-gradient(120deg,#ead4b0,#d8b682);border-color:#b18c54;box-shadow:0 8px 24px rgba(133,100,51,.13)
}
:root[data-uni] .button--primary:hover, :root[data-uni] .btn:not(.ghost):hover, :root[data-uni] button[type="submit"]:hover {background:linear-gradient(120deg,#e3c696,#cca56d);border-color:#8b6938}
:root[data-uni] .button--secondary, :root[data-uni] .btn.ghost {color:#544b3e;background:#fffdf9;border-color:#c7bba9}
:root[data-uni] .button--secondary:hover, :root[data-uni] .btn.ghost:hover {background:#eee5d5;border-color:#b18c54}
:root[data-uni] .eyebrow, :root[data-uni] .eyebrow::before, :root[data-uni] .section-kicker, :root[data-uni] .tag.c, :root[data-uni] .tag.a {color:#7d5324}
:root[data-uni] .duae-status-pill, :root[data-uni] .status-pill {color:#4f593f;background:#efefe6;border-color:#c6c9b5}
:root[data-uni] .duae-status-pill::before, :root[data-uni] .status-pill::before {background:#697354;box-shadow:0 0 8px rgba(105,115,84,.15)}
:root[data-uni] .duae-panel, :root[data-uni] .hero-panel, :root[data-uni] .mission-card, :root[data-uni] .card, :root[data-uni] .tl-panel, :root[data-uni] details, :root[data-uni] .vidcard, :root[data-uni] .chatpanel {border-color:var(--line)}
:root[data-uni] .duae-panel, :root[data-uni] .hero, :root[data-uni] .content-card, :root[data-uni] .hero-panel, :root[data-uni] .mission-card, :root[data-uni] .card, :root[data-uni] .tl-panel, :root[data-uni] details, :root[data-uni] .vidcard, :root[data-uni] .chatpanel {background:linear-gradient(145deg,rgba(255,253,249,.94),rgba(243,239,231,.92))}
:root[data-uni] .loader {background:#f9f7f2}
:root[data-uni] input, :root[data-uni] select, :root[data-uni] textarea {color:#302f2c;background:#fffdf9;border-color:#c6bba9;color-scheme:light}
:root[data-uni] input::placeholder, :root[data-uni] textarea::placeholder {color:#71695d;opacity:1}
:root[data-uni] option {color:#302f2c;background:#fffdf9}
:root[data-uni] a:focus-visible, :root[data-uni] button:focus-visible, :root[data-uni] input:focus-visible, :root[data-uni] select:focus-visible, :root[data-uni] textarea:focus-visible, :root[data-uni] summary:focus-visible {outline:3px solid #876130;outline-offset:4px}
:root[data-uni] ::selection {background:#e7cea7;color:#30291f}
:root[data-uni] .hero-title, :root[data-uni] .section-title, :root[data-uni] h1, :root[data-uni] h2 {color:#302f2c}
:root[data-uni] .hero-title .gradient-text, :root[data-uni] .section-title .gradient-text {color:transparent}
:root[data-uni] .scroll-hint, :root[data-uni] .scene-caption, :root[data-uni] .hero-caption {color:#605b53}
:root[data-uni] footer, :root[data-uni] .site-footer {background:linear-gradient(135deg,#f0ece4,#e7e1d6);color:#605b53;border-color:#d2c7b6}
:root[data-uni] button:disabled, :root[data-uni] input:disabled, :root[data-uni] select:disabled {opacity:.6;cursor:not-allowed;box-shadow:none}
:root[data-uni] {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
:root[data-uni] body {
  max-width: 100%;
  overflow-x: clip;
}
:root[data-uni] img, :root[data-uni] svg, :root[data-uni] video, :root[data-uni] canvas, :root[data-uni] iframe {
  max-width: 100%;
}
:root[data-uni] input, :root[data-uni] select, :root[data-uni] textarea, :root[data-uni] button {
  max-width: 100%;
}
:root[data-uni] body.duae-unified-page main, :root[data-uni] main {
  padding-inline: clamp(14px, 3vw, 36px);
}
:root[data-uni] body.duae-unified-page .duae-page-intro {
  min-height: min(48svh, 520px);
  width: min(100%, 1040px);
}
:root[data-uni] body.duae-unified-page .duae-page-intro h1, :root[data-uni] body.duae-unified-page .duae-page-intro h2, :root[data-uni] body.duae-unified-page .hero h1 {
  max-width: min(100%, 900px);
  font-size: clamp(1.65rem, min(3.25vw, 5.6vh), 3.15rem);
  line-height: 1.18;
  overflow-wrap: anywhere;
}
:root[data-uni] body.duae-unified-page .duae-panel, :root[data-uni] body.duae-unified-page .hero, :root[data-uni] body.duae-unified-page .card {
  max-width: 100%;
}
:root[data-uni] body.duae-unified-page .duae-panel {
  padding: clamp(16px, 2.2vw, 28px);
  border-radius: clamp(16px, 1.8vw, 24px);
}
:root[data-uni] #hero.panel, :root[data-uni] .panel {
  min-height: min(88svh, 760px);
}
:root[data-uni] #hero .panel__inner, :root[data-uni] .panel__inner {
  width: min(100%, 1280px);
  gap: clamp(24px, 4.5vw, 68px);
}
:root[data-uni] #hero .content-card {
  width: min(100%, 360px);
  max-width: 360px;
  padding: clamp(15px, 1.55vw, 23px);
}
:root[data-uni] .hero-title {
  font-size: clamp(1.5rem, min(2.35vw, 4.8vh), 2.55rem) !important;
  line-height: 1.16 !important;
}
:root[data-uni] .section-title {
  font-size: clamp(1.8rem, min(3.5vw, 5.8vh), 3.5rem) !important;
  line-height: 1.16 !important;
}
:root[data-uni] #hero .lead {
  font-size: clamp(.82rem, .82vw, .94rem) !important;
  line-height: 1.7 !important;
}
:root[data-uni] #hero .cta-row {
  margin-block-start: 14px !important;
}
:root[data-uni] #hero .button {
  min-height: 40px !important;
  padding: 8px 13px !important;
  font-size: .76rem !important;
}
:root[data-uni] .site-header, :root[data-uni] .duae-site-header {
  max-width: calc(100vw - clamp(16px, 3vw, 48px));
}
@media (max-height: 820px) and (min-width: 861px) {
:root[data-uni] #hero.panel, :root[data-uni] .panel {
    min-height: min(84svh, 680px);
    padding-block-start: calc(var(--header-h, 72px) + 30px);
    padding-block-end: 28px;
  }
:root[data-uni] body.duae-unified-page .duae-page-intro {
    min-height: min(42svh, 430px);
  }
:root[data-uni] body.duae-unified-page .duae-page-intro h1, :root[data-uni] body.duae-unified-page .duae-page-intro h2, :root[data-uni] body.duae-unified-page .hero h1 {
    font-size: clamp(1.55rem, min(3vw, 5vh), 2.75rem);
  }
:root[data-uni] .hero-title {
    font-size: clamp(1.45rem, min(2.1vw, 4.3vh), 2.25rem) !important;
  }
:root[data-uni] .section-title {
    font-size: clamp(1.7rem, min(3.1vw, 5.2vh), 3rem) !important;
  }
:root[data-uni] .content-card {
    padding: clamp(18px, 2.1vw, 30px);
  }


}
@media (max-width: 860px) {
:root[data-uni] body.duae-unified-page main, :root[data-uni] main {
    padding-inline: clamp(12px, 3.5vw, 24px);
  }
:root[data-uni] body.duae-unified-page .duae-page-intro {
    min-height: auto;
    width: 100%;
    padding-block: clamp(22px, 6vh, 46px);
  }
:root[data-uni] body.duae-unified-page .duae-page-intro h1, :root[data-uni] body.duae-unified-page .duae-page-intro h2, :root[data-uni] body.duae-unified-page .hero h1 {
    font-size: clamp(1.55rem, 6vw, 2.45rem);
  }
:root[data-uni] #hero.panel, :root[data-uni] .panel {
    min-height: auto;
    padding-block-start: calc(var(--header-h, 68px) + 104px);
    padding-block-end: 28px;
  }
:root[data-uni] #hero .panel__inner, :root[data-uni] .panel__inner {
    width: 100%;
  }
:root[data-uni] #hero .content-card, :root[data-uni] .content-card {
    width: min(100%, 560px);
    max-width: 100%;
    margin-inline: auto;
    padding: clamp(16px, 3.8vw, 22px);
  }
:root[data-uni] .hero-title {
    font-size: clamp(1.45rem, 6vw, 2.05rem) !important;
  }
:root[data-uni] .section-title {
    font-size: clamp(1.7rem, 7.4vw, 2.6rem) !important;
  }
:root[data-uni] .lead {
    font-size: clamp(.82rem, 2.8vw, .94rem) !important;
    line-height: 1.72 !important;
  }


}
@media (max-width: 540px) {
:root[data-uni] body.duae-unified-page main, :root[data-uni] main {
    padding-inline: 12px;
  }
:root[data-uni] .site-header, :root[data-uni] .duae-site-header {
    max-width: calc(100vw - 16px);
  }
:root[data-uni] body.duae-unified-page .duae-page-intro {
    padding-block: 18px 24px;
  }
:root[data-uni] body.duae-unified-page .duae-page-intro h1, :root[data-uni] body.duae-unified-page .duae-page-intro h2, :root[data-uni] body.duae-unified-page .hero h1 {
    font-size: clamp(1.4rem, 7.6vw, 2rem);
    line-height: 1.2;
  }
:root[data-uni] #hero.panel, :root[data-uni] .panel {
    padding-inline: 12px;
    padding-block-start: calc(var(--header-h, 66px) + 92px);
  }
:root[data-uni] #hero .content-card, :root[data-uni] .content-card, :root[data-uni] body.duae-unified-page .duae-panel, :root[data-uni] body.duae-unified-page .hero {
    width: 100%;
    max-width: 100%;
    border-radius: 18px;
  }
:root[data-uni] .hero-title {
    font-size: clamp(1.35rem, 7.3vw, 1.85rem) !important;
  }
:root[data-uni] .section-title {
    font-size: clamp(1.55rem, 8.2vw, 2.15rem) !important;
  }
:root[data-uni] #hero .button, :root[data-uni] .button, :root[data-uni] .btn {
    min-height: 42px;
  }
:root[data-uni] table {
    font-size: .8rem;
  }


}


/* ---------- الخط: Cairo كما في hub ---------- */
:root[data-uni] body,
:root[data-uni] button,
:root[data-uni] input,
:root[data-uni] select,
:root[data-uni] textarea {
  font-family: "Cairo", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---------- شريط العودة بهوية hub ---------- */
:root[data-uni] .duae-hubbar {
  background: var(--panel, #fffdf9);
  color: var(--ink, #302f2c);
  border-bottom: 1px solid var(--line, #d9d0c2);
}
:root[data-uni] .duae-hubbar a {
  background: var(--brand-gold, #c0975b);
  color: #2a1e0b;
}
:root[data-uni] .duae-hubbar a:hover,
:root[data-uni] .duae-hubbar a:focus-visible {
  background: var(--cyan, #7d5324);
  color: #FFFFFF;
  outline: 2px solid var(--brand-gold, #c0975b);
  outline-offset: 2px;
}
:root[data-uni] .duae-hubbar button { color: var(--mut, #605b53); }
:root[data-uni] .duae-hubbar button:hover {
  background: var(--panel2, #eee9e0);
  color: var(--ink, #302f2c);
}


/* ---------- الخلفية: نفس خلفية الصفحة الرئيسية في كل الصفحات ---------- */
/* اللون الأساس: قيمة الموقع الرئيسي نفسها، حتى لا يبقى أي فرق بين
   أرضية الصفحة الرئيسية وأرضية صفحات الأدوات. سطر واحد للتراجع. */
:root[data-uni] { --bg: #F8F8F9; }

/* الموقع كله يرسم شبكة 44px على body (styles.css). هوية hub كانت
   تستبدل background-image بتدرّج عمودي، فتضيع الشبكة وتصير الصفحة
   مسطّحة. هنا نعيد الشبكة نفسها حرفاً بحرف، ونبقي لون الأساس من
   رموز التصميم حتى تنسجم مع البطاقات. */
:root[data-uni] body {
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(15,110,122,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,110,122,.04) 1px, transparent 1px);
  background-size: 44px 44px;
  background-repeat: repeat;
  background-position: 0 0;
}

/* صفحة تنسيق المجال مستقلة بأنماطها ولا ترث شبكة الموقع، فتأخذها هنا */
:root[data-uni] html { background-color: var(--bg); }

@media print { .duae-hubbar { display: none; } }