/* ============================================================
   dna.css — الطبقة المشتركة للهوية البصرية (Design DNA)
   يُحمَّل في كل الصفحات: index / admin / print
   المصدر: design-dna.md + tokens.css
   ============================================================ */

@font-face{font-family:"Thmanyah Sans";src:url("../../assets/fonts/ThmanyahSans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Thmanyah Sans";src:url("../../assets/fonts/ThmanyahSans-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Thmanyah Sans";src:url("../../assets/fonts/ThmanyahSans-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Thmanyah Sans";src:url("../../assets/fonts/ThmanyahSans-900.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}

:root{
  /* الألوان */
  --coral:#FF4D42; --cyan:#54EAFD; --ice:#DDF7FF; --ink:#020208; --paper:#F6F4F2; --white:#FFFFFF;
  --muted:rgba(2,2,8,.55);
  --muted-2:rgba(2,2,8,.40);
  --glass:rgba(255,255,255,.55);
  --glass-2:rgba(255,255,255,.62);
  --glass-brd:rgba(255,255,255,.75);
  --hairline:rgba(2,2,8,.08);
  --hairline-2:rgba(2,2,8,.07);
  --on-dark-muted:rgba(255,255,255,.72);
  --on-dark-brd:rgba(255,255,255,.10);

  /* الخط */
  --font:"Thmanyah Sans","Tajawal","Segoe UI",system-ui,-apple-system,sans-serif;
  --fs-hero:clamp(46px,9vw,104px);
  --fs-h2:clamp(21px,3vw,27px);
  --fs-card-h:19px;
  --fs-body:clamp(16px,2.2vw,20px);
  --fs-detail:14.5px;
  --fs-num-lg:30px;
  --fs-label:12.5px;

  /* الاستدارات */
  --r-card:32px; --r-inner:26px; --r-chip:22px; --r-icon:14px; --r-pill:999px;

  /* الظلال */
  --sh-rest:0 14px 40px rgba(2,2,8,.07);
  --sh-hover:0 22px 50px rgba(2,2,8,.11);
  --sh-dark:0 18px 44px rgba(2,2,8,.22);
  --sh-coral:0 12px 30px rgba(255,77,66,.40);
  --sh-cyan:0 6px 16px rgba(84,234,253,.50);

  /* الحركة */
  --lift:translateY(-4px);
  --ease:.25s ease;

  /* الإيقاع */
  --container:1060px;
  --container-wide:1320px;
  --pad-x:clamp(16px,4vw,48px);
  --gap-section:clamp(40px,6vw,72px);
  --gap-card:16px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--paper)}
body{font-family:var(--font);color:var(--ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;direction:rtl;font-variant-numeric:tabular-nums}
img,video{max-width:100%;display:block}
a{color:inherit}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}

/* أرضية التدرج الشبكي المميز */
.dna-background{
  background:
    radial-gradient(900px 700px at 108% 12%, rgba(255,77,66,.50), transparent 62%),
    radial-gradient(700px 620px at  96% 78%, rgba(255,77,66,.28), transparent 60%),
    radial-gradient(850px 700px at  -8% 18%, rgba(84,234,253,.55), transparent 60%),
    radial-gradient(600px 520px at   6% 90%, rgba(84,234,253,.30), transparent 60%),
    radial-gradient(500px 420px at  50% 45%, rgba(221,247,255,.55), transparent 70%),
    var(--paper);
}

/* الوصفة الزجاجية */
.dna-glass{
  background:var(--glass);
  border:1px solid var(--glass-brd);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-radius:var(--r-card);
  box-shadow:var(--sh-rest);
}
.dna-glass-inner{
  background:var(--glass-2);
  border:1.5px solid var(--hairline-2);
  border-radius:var(--r-inner);
}

/* البطاقة الداكنة المميزة — عنصر واحد في كل شاشة */
.dna-featured{
  position:relative;overflow:hidden;
  background:var(--ink);color:var(--white);
  border:1px solid var(--on-dark-brd);
  border-radius:var(--r-card);
  box-shadow:var(--sh-dark);
}
.dna-featured::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(340px 240px at 12% -20%, rgba(84,234,253,.28), transparent 70%),
    radial-gradient(360px 260px at 95% 120%, rgba(255,77,66,.34), transparent 70%);
}
.dna-featured>*{position:relative}

/* زر CTA — واحد رئيسي في الصفحة */
.dna-btn{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--coral);color:var(--white);
  font-weight:900;font-size:17px;line-height:1;
  border:none;border-radius:var(--r-pill);
  padding:15px 38px;
  box-shadow:var(--sh-coral);
  transition:transform .2s ease;cursor:pointer;text-decoration:none;
}
.dna-btn:hover{transform:translateY(-3px)}
.dna-btn-ghost{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--glass);border:1px solid var(--glass-brd);
  font-weight:700;font-size:15px;line-height:1;
  border-radius:var(--r-pill);padding:13px 24px;
  box-shadow:0 8px 30px rgba(2,2,8,.06);cursor:pointer;text-decoration:none;
  transition:transform .2s ease;
}
.dna-btn-ghost:hover{transform:translateY(-3px)}

/* الشارات والكبسولات */
.dna-badge{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--fs-label);font-weight:700;line-height:1.4;
  background:rgba(255,255,255,.65);border:1px solid var(--hairline);
  border-radius:var(--r-pill);padding:4px 12px;white-space:nowrap;
}
.dna-ribbon{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--cyan);color:var(--ink);
  font-size:12px;font-weight:900;line-height:1.4;
  border-radius:var(--r-pill);padding:5px 13px;
  box-shadow:var(--sh-cyan);white-space:nowrap;
}
.dna-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--glass);border:1px solid var(--glass-brd);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-radius:var(--r-pill);padding:9px 18px;
  font-size:14px;font-weight:700;line-height:1.4;
  box-shadow:0 8px 30px rgba(2,2,8,.06);
}
.dna-eyebrow .spark{color:var(--coral)}

/* الكلمة المميزة في العنوان + الخط السماوي السفلي */
.dna-hl{position:relative;display:inline-block;color:var(--coral)}
.dna-hl svg{position:absolute;right:0;left:0;bottom:-.16em;width:100%;height:.3em;pointer-events:none}

/* رأس القسم */
.dna-sec-head{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.dna-sec-head .num{
  width:38px;height:38px;border-radius:var(--r-icon);flex:none;display:grid;place-items:center;
  font-size:16px;font-weight:900;
  background:var(--glass);border:1px solid var(--glass-brd);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 6px 20px rgba(2,2,8,.07);
}
.dna-sec-head h2{font-size:var(--fs-h2);font-weight:900;margin:0}
.dna-sec-head .line{flex:1;height:1px;background:linear-gradient(to left,rgba(2,2,8,.16),transparent)}

/* الدائرة اللونية (أيقونة البطاقة) */
.dna-dot{
  width:52px;height:52px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:24px;
  box-shadow:inset 0 -4px 10px rgba(2,2,8,.10),0 8px 20px rgba(2,2,8,.10);
}
.dna-dot.coral{background:var(--coral)} .dna-dot.cyan{background:var(--cyan)} .dna-dot.ice{background:var(--ice)}

/* رقاقة القيمة (الأرقام الكبيرة) */
.dna-chip{
  text-align:center;background:var(--ink);color:var(--white);
  border-radius:var(--r-chip);padding:14px 20px;min-width:104px;
}
.dna-chip .num{font-size:var(--fs-num-lg);font-weight:900;line-height:1;font-variant-numeric:tabular-nums}
.dna-chip .cur{font-size:12.5px;font-weight:500;opacity:.75;margin-top:6px}
.dna-featured .dna-chip{background:var(--coral)}

/* نقطة الشعار */
.dna-brand{display:inline-flex;align-items:center;gap:10px;font-weight:900;font-size:20px}
.dna-brand-dot{width:14px;height:14px;border-radius:50%;background:conic-gradient(from 40deg,var(--coral),var(--cyan),var(--coral))}

/* نصوص */
.dna-muted{color:var(--muted)}
.dna-lead{font-size:var(--fs-body);font-weight:500;line-height:1.9;color:var(--muted);max-width:34em}
.dna-detail{font-size:var(--fs-detail);font-weight:500;line-height:1.8}

/* الحاوية */
.dna-container{max-width:var(--container);margin:0 auto;padding-inline:var(--pad-x)}
.dna-container-wide{max-width:var(--container-wide);margin:0 auto;padding-inline:var(--pad-x)}

/* إمكانية الوصول */
.dna-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;border-radius:8px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

/* فاصل "·" بين العناصر القصيرة — بهامش واضح حتى لا يُقرأ كصفر (٠) بجوار الأرقام المشرقية */
.sep{margin-inline:.22em;opacity:.65}