/* Saudi App Builders — GLASS.
 * نظام التصميم كامل. العقد هو ../DESIGN.md — كل قيمة هنا مأخوذة منه حرفيًا.
 * سطحان فقط: الأرض، ولوح زجاجي. ولا لوح داخل لوح أبدًا.
 */
@import url('./fonts.css');

/* ── 1 · الرموز ──────────────────────────────────────────── */
:root{
  /* ground & ink */
  --bg:            #F4F6FA;
  --ink:           #0E1420;
  --ink-80:        rgba(14,20,32,.80);
  --ink-72:        rgba(14,20,32,.72);
  --ink-60:        rgba(14,20,32,.60);
  --ink-45:        rgba(14,20,32,.45);
  --ink-38:        rgba(14,20,32,.38);
  --hairline:      rgba(14,20,32,.12);

  /* the one accent */
  --accent:        #2F6AE0;
  --accent-press:  #2757BC;
  --accent-tint:   rgba(47,106,224,.10);
  --accent-tint-2: rgba(47,106,224,.25);

  /* glass */
  --glass:         rgba(255,255,255,.58);
  --glass-quiet:   rgba(255,255,255,.40);
  --glass-bar:     rgba(255,255,255,.62);
  --glass-edge:    rgba(255,255,255,.90);
  --blur:          blur(30px) saturate(1.6);
  --blur-bar:      blur(22px) saturate(1.5);

  /* elevation */
  --shadow-panel:  0 24px 60px rgba(14,20,32,.10);
  --shadow-bar:    0 10px 30px rgba(14,20,32,.08);
  --shadow-accent: 0 14px 32px rgba(47,106,224,.32);

  /* radii */
  --r-panel: 28px;
  --r-sub:   20px;
  --r-pill:  999px;

  /* spacing */
  --s1:6px; --s2:10px; --s3:14px; --s4:18px; --s5:22px; --s6:26px; --s7:34px; --s8:44px;

  --font: 'Alexandria', system-ui, sans-serif;
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ── 2 · الأرض ───────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
html{ -webkit-text-size-adjust:100% }

body{
  font-family:var(--font);
  font-weight:300;
  font-size:13.5px;
  line-height:2.05;
  color:var(--ink-72);
  background:var(--bg);
  min-height:100vh;
}
/* الوهجان على طبقة مثبّتة مستقلة — background-attachment:fixed مع
   backdrop-filter يكسر الرسم في كروميوم بعد أول شاشة (الصفحة تطلع
   بيضاء عند التمرير)، عطل عشنا تشخيصه. الطبقة المثبّتة تعطي نفس
   الشكل بلا المسار المعطوب. */
body::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    radial-gradient(620px 340px at 88% -10%, rgba(47,106,224,.24), transparent 62%),
    radial-gradient(520px 300px at  6% 106%, rgba(47,106,224,.14), transparent 60%);
}
/* عائلات الصفحات تحرّك الوهج — نفس القاعدة، موضع مختلف */
body[data-bloom="qa"]::before{
  background-image:
    radial-gradient(620px 340px at 10% -10%, rgba(47,106,224,.24), transparent 62%),
    radial-gradient(520px 300px at 94% 106%, rgba(47,106,224,.14), transparent 60%);
}
body[data-bloom="card"]::before{
  background-image:
    radial-gradient(620px 340px at 20% -10%, rgba(47,106,224,.24), transparent 62%),
    radial-gradient(520px 300px at 86% 106%, rgba(47,106,224,.14), transparent 60%);
}

h1,h2,h3{ font-weight:500; color:var(--ink); margin:0 }
h1{ font-size:clamp(28px,3.2vw,38px); line-height:1.25 }
h2{ font-size:clamp(23px,2.4vw,29px); line-height:1.3 }
h3{ font-size:15.5px; line-height:1.5 }
p{ margin:0 0 var(--s3) }
p:last-child{ margin-bottom:0 }
a{ color:var(--accent); text-decoration:none }
b,strong{ font-weight:500; color:var(--ink) }

/* أي مقطع لاتيني داخل نص عربي يقف بنفسه ولا يعيد ترتيب الجملة */
.ltr{ direction:ltr; unicode-bidi:isolate; display:inline-block }

.eyebrow{
  /* بلا تتبّع: التتبّع على العربية يفكّ اتصال الحروف فيطلع النص مكسّرًا
     (عطله هو بنفسه لقاه). التتبّع لاتيني فقط — عبر .trk داخل .ltr. */
  font-size:11.5px; font-weight:500;
  color:var(--accent); line-height:1.6; margin:0 0 var(--s2);
}
.trk{ letter-spacing:.20em }   /* للمقاطع اللاتينية فقط، داخل .ltr */
.meta{ font-size:11.5px; color:var(--ink-45); line-height:1.7 }
.muted{ color:var(--ink-60) }
.rule-line{ color:var(--accent) }   /* آخر فقرة في الدرس = قاعدة المهمة */

/* ── 3 · الحاوية الوحيدة: اللوح الزجاجي ─────────────────── */
.panel{
  background:var(--glass);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border:1px solid var(--glass-edge);
  border-radius:var(--r-panel);
  padding:var(--s6) var(--s7);
  box-shadow:var(--shadow-panel);
  animation:panel-in .24s var(--ease) both;
}
.panel--quiet{ background:var(--glass-quiet); border-color:rgba(255,255,255,.70); box-shadow:none }
.panel--current{ border-color:rgba(47,106,224,.35); box-shadow:0 18px 44px rgba(47,106,224,.14) }
.panel--pass{ border-color:var(--accent) }
@supports not (backdrop-filter: blur(1px)){ .panel{ background:rgba(255,255,255,.86) } }

/* الفصل داخل اللوح: خط شعري وحشو — لا صندوق داخل صندوق */
.hr{ border:0; border-top:1px solid var(--hairline); margin:var(--s4) 0 }
.sep{ border-top:1px solid var(--hairline); padding-top:var(--s4); margin-top:var(--s4) }

.stack{ display:flex; flex-direction:column; gap:var(--s4) }
.row{ display:flex; align-items:center; gap:var(--s3) }
.row--between{ justify-content:space-between }
.push{ margin-inline-start:auto }

/* ── 4 · الشريط العلوي: حبّتان عائمتان ───────────────────── */
.bar{
  display:flex; align-items:center; gap:var(--s3);
  flex-wrap:wrap; margin-bottom:var(--s5);
}
.pill{
  background:var(--glass-bar);
  backdrop-filter:var(--blur-bar); -webkit-backdrop-filter:var(--blur-bar);
  border:1px solid var(--glass-edge);
  border-radius:var(--r-pill);
  box-shadow:var(--shadow-bar);
}
.pill--brand{ display:flex; align-items:center; gap:var(--s3); padding:10px 20px }
.brand{ font-size:12.5px; font-weight:600; letter-spacing:.14em; color:var(--ink) }
.brand-div{ width:1px; height:16px; background:var(--hairline) }
.slogan{ font-size:12px; font-weight:300; color:var(--ink-60) }
.nav{ display:flex; padding:5px; gap:2px }
.nav a{
  padding:7px 16px; border-radius:var(--r-pill); font-size:12.5px;
  color:var(--ink-60); transition:background .16s var(--ease), color .16s var(--ease);
}
.nav a[aria-current="page"]{ background:var(--ink); color:var(--bg) }
.bar-progress{ font-size:12px; color:var(--ink-60) }
.avatar{
  width:30px; height:30px; border-radius:var(--r-pill); background:var(--accent);
  color:#fff; display:grid; place-items:center; font-size:11px; font-weight:500;
}

/* ── 5 · الأزرار ────────────────────────────────────────── */
.btn{
  font-family:var(--font); font-size:13px; font-weight:500; white-space:nowrap;
  border-radius:var(--r-pill); border:0; cursor:pointer; padding:15px 34px;
  background:var(--accent); color:#fff; box-shadow:var(--shadow-accent);
  transition:filter .16s var(--ease), background .16s var(--ease), transform .16s var(--ease);
}
.btn:hover{ filter:brightness(1.06) }
.btn:active{ background:var(--accent-press); transform:translateY(1px) }
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.btn[disabled]{ opacity:.45; box-shadow:none; cursor:not-allowed; filter:none; transform:none }
.btn--compact{ padding:9px 22px; font-size:12.5px }
.btn--wide{ width:100%; }
.btn--secondary{ background:transparent; color:var(--ink); border:1px solid rgba(14,20,32,.16); box-shadow:none }
.btn--secondary:active{ background:transparent }
.btn--quiet{
  background:none; box-shadow:none; color:var(--accent); font-weight:400;
  /* هدف اللمس ٤٤px على الجوال (DESIGN.md §5). الحشو الرأسي وحده يكفي:
     الرابط يبقى يقرأ كرابط، والمساحة القابلة للنقر تكبر. */
  padding:6px 2px; min-height:32px; display:inline-flex; align-items:center;
}
.btn--quiet:active{ background:none; transform:none }

/* ── 6 · الشرائح ────────────────────────────────────────── */
.chips{ display:inline-flex; padding:5px; gap:2px; flex-wrap:wrap }
/* الخيار لازم يبيّن إنه ينضغط: بلا حد ولا أرضية كان يُقرأ نصًّا عاديًا
   (عطله هو بنفسه — «ما يبان clickable»). الحد الرفيع والأرضية البيضاء
   يقولان «أنا زر» قبل ما يلمسه. */
.chip{
  font-family:var(--font); font-size:12.5px; padding:9px 18px; cursor:pointer;
  border-radius:var(--r-pill); color:var(--ink-72);
  background:rgba(255,255,255,.62); border:1px solid var(--hairline);
  transition:background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}
.chip:hover{ border-color:var(--accent-tint-2); color:var(--ink) }
.chip[aria-pressed="true"]{ background:var(--accent); color:#fff; border-color:var(--accent) }
/* خيار كبير (منصة، نعم/لا): مساحة لمس أوسع وسطر شرح تحته */
.opt{
  display:block; text-align:start; width:100%; cursor:pointer;
  border-radius:18px; padding:var(--s4) var(--s5);
  background:rgba(255,255,255,.62); border:1px solid var(--hairline);
  font-family:var(--font); color:var(--ink-72);
  transition:border-color .16s var(--ease), background .16s var(--ease);
}
.opt:hover{ border-color:var(--accent-tint-2) }
.opt[aria-pressed="true"]{ background:var(--accent-tint); border-color:var(--accent) }
.opt__t{ display:block; font-size:13.5px; color:var(--ink); font-weight:500 }
.opt[aria-pressed="true"] .opt__t{ color:var(--accent) }
.opt__d{ display:block; font-size:12px; color:var(--ink-60); margin-top:2px }
.opts{ display:grid; gap:10px }
@media (min-width:721px){ .opts--2{ grid-template-columns:1fr 1fr } }
.chip:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }

/* ── 7 · المدخلات — بلا صندوق مملوء داخل اللوح ──────────── */
.field{
  display:block; width:100%; border:0; border-top:1px solid var(--hairline);
  padding:14px 0 0; min-height:96px; resize:vertical; background:transparent;
  font-family:var(--font); font-size:12.5px; font-weight:300; line-height:2;
  color:var(--ink);
}
.field::placeholder{ color:var(--ink-38) }
.field:focus{ outline:0; border-top-color:var(--accent) }
.field--single{ min-height:0; padding-bottom:6px }
.field--code{ direction:ltr; text-align:left; font-variant-ligatures:none }
.panel:focus-within{ border-color:var(--accent-tint-2) }
label.lbl{ display:block; font-size:12px; color:var(--ink-60); margin-bottom:2px }

.check{ display:flex; align-items:flex-start; gap:var(--s2); cursor:pointer; font-size:12.5px; color:var(--ink-72) }
.check input{ margin:6px 0 0; accent-color:var(--accent); width:16px; height:16px; flex:none }

/* ── 8 · بلوك البرومبت ──────────────────────────────────── */
.prompt-head{ display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s3) }
.prompt-body{
  direction:ltr; text-align:left; font-size:12px; font-weight:300; line-height:2;
  color:var(--ink-72); white-space:pre-wrap; word-break:break-word;
  max-height:340px; overflow-y:auto; border-top:1px solid var(--hairline); padding-top:var(--s3);
}
.prompt-body[dir="rtl"]{ direction:rtl; text-align:start }

/* ── 9 · بوابة الإثبات ──────────────────────────────────── */
.gate-note{ font-size:12px; color:var(--ink-45); margin-top:var(--s2) }
.gate-fail{ color:var(--ink); font-weight:500 }
.gate-pass{ color:var(--accent); font-weight:500 }

/* ── 10 · بئر الوسائط ───────────────────────────────────── */
.well{
  border-radius:var(--r-sub); background:var(--accent-tint); height:236px;
  display:grid; place-items:center; cursor:pointer;
}
.well__play{
  width:54px; height:54px; border-radius:var(--r-pill); background:#fff;
  box-shadow:0 10px 24px rgba(14,20,32,.14); display:grid; place-items:center;
}
.well__play::after{
  content:''; width:0; height:0;
  /* استثناء مقصود من قاعدة الخصائص المنطقية: أزرار التشغيل ما تُعكس في
     الواجهات العربية (نفس سلوك يوتيوب ونتفلكس وأبل) — المثلث يشير يمينًا
     دائمًا. `border-inline-start` كان يقلبه فيصير سهم «رجوع». */
  margin-left:3px;
  border-block:8px solid transparent; border-left:13px solid var(--accent);
}
.well-caption{ font-size:12px; color:var(--ink-60); margin-top:var(--s2) }

/* ── 11 · التقدّم ───────────────────────────────────────── */
.ring{
  width:150px; height:150px; border-radius:50%; display:grid; place-items:center;
  background:conic-gradient(var(--accent) 0 var(--p,0%), rgba(14,20,32,.09) var(--p,0%));
  margin-inline:auto;
}
.ring__disc{
  width:120px; height:120px; border-radius:50%; background:var(--bg);
  display:grid; place-items:center; text-align:center; line-height:1.3;
}
.ring--sm{ width:44px; height:44px }
.ring--sm .ring__disc{ width:34px; height:34px; font-size:10px }
.track{ height:8px; border-radius:var(--r-pill); background:rgba(14,20,32,.09); overflow:hidden }
.track__fill{ height:100%; border-radius:var(--r-pill); background:var(--accent); transition:width .32s var(--ease) }

/* ── 12 · الأسئلة والأجوبة ──────────────────────────────── */
.answer{ display:flex; gap:12px }
.answer__rule{ width:2px; background:var(--accent); border-radius:2px; flex:none }
.sign{ color:var(--accent) }

/* ── 13 · التخطيط ───────────────────────────────────────── */
.app{ max-width:1180px; margin-inline:auto; padding:var(--s6) var(--s7) 96px }
.grid{ display:grid; gap:20px }
.grid--mission{ grid-template-columns:1.15fr 1fr; align-items:start }
.grid--split{ grid-template-columns:1fr 1fr; align-items:start }
.grid--card{ grid-template-columns:432px 1fr; align-items:start }
.grid--hero{ grid-template-columns:1fr 216px; align-items:stretch }
.col{ display:flex; flex-direction:column; gap:20px }
.col--fill > .panel:last-child{ flex:1 }
.narrow{ max-width:660px; margin-inline:auto }

/* ── 14 · خريطة المهام ──────────────────────────────────── */
.phase{ display:flex; align-items:flex-start; gap:var(--s4) }
.phase__name{ width:110px; flex:none }
.phase__chips{ display:flex; flex-wrap:wrap; gap:8px; flex:1 }
.mchip{
  border-radius:14px; padding:10px 12px; min-width:104px; cursor:pointer;
  border:1px solid transparent; background:transparent; text-align:start;
  font-family:var(--font); transition:transform .16s var(--ease), background .32s var(--ease);
  display:block;
}
.mchip__id{ font-size:11px; color:var(--accent); line-height:1.6 }
.mchip__title{ font-size:12.5px; color:var(--ink); line-height:1.5 }
.mchip--done{ background:var(--accent-tint); border-color:var(--accent-tint-2) }
/* الشطب المرضي (طلبه بنفسه): خط يمرّ على اسم المهمة المكتملة، يُرسم
   بحركة قصيرة عند دخول الشاشة — إنجاز يبان، مو نص مضروب. */
.mchip--done .mchip__title{ position:relative; color:var(--ink-60) }
.mchip--done .mchip__title::after{
  content:''; position:absolute; inset-inline-start:0; top:52%;
  height:1.5px; background:var(--accent); border-radius:1px;
  width:100%; transform-origin:var(--edge-start, right) center;
  animation:strike .32s var(--ease) both;
}
@keyframes strike{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }
.mchip--current{ background:var(--accent); box-shadow:0 10px 24px rgba(47,106,224,.35) }
.mchip--current .mchip__id{ color:rgba(255,255,255,.75) }
.mchip--current .mchip__title{ color:#fff }
.mchip--locked{ border-color:var(--hairline); cursor:not-allowed }
.mchip--locked .mchip__id, .mchip--locked .mchip__title{ color:var(--ink-45) }
.mchip:not(.mchip--locked):hover{ transform:translateY(-1px) }
.mchip:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }

/* ── 15 · بطاقة المشاركة ────────────────────────────────── */
.share{
  width:432px; height:548px; border-radius:32px; padding:var(--s7);
  background:var(--glass); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border:1px solid var(--glass-edge); box-shadow:0 34px 80px rgba(14,20,32,.16);
  display:flex; flex-direction:column; gap:var(--s4);
}
.share__idea{ font-size:33px; font-weight:400; line-height:1.55; color:var(--ink) }
.facts{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
/* الاستثناء الوحيد المسموح: كتلة صبغة مسطّحة — بلا حد وبلا ظل، فليست بطاقة */
.fact{ background:var(--accent-tint); border-radius:16px; padding:var(--s3) var(--s4) }
.fact__k{ font-size:11px; font-weight:500; color:var(--accent) }
.fact__v{ font-size:12.5px; color:var(--ink); line-height:1.7 }

/* ── 16 · التسجيل الصوتي ────────────────────────────────── */
.mic{ display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap }
.mic__btn{
  width:54px; height:54px; border-radius:var(--r-pill); border:0; cursor:pointer; flex:none;
  background:var(--accent); box-shadow:var(--shadow-accent); display:grid; place-items:center;
}
.mic__btn[data-rec="1"]{ background:var(--accent-press) }
.mic__btn:focus-visible{ outline:2px solid var(--accent); outline-offset:3px }
.level{ display:flex; align-items:flex-end; gap:3px; height:26px }
.level i{ width:3px; background:var(--accent-tint-2); border-radius:2px; height:6px; display:block }
.mic[data-rec="1"] .level i{ animation:lvl .9s var(--ease) infinite alternate }
.mic[data-rec="1"] .level i:nth-child(2){ animation-delay:.1s }
.mic[data-rec="1"] .level i:nth-child(3){ animation-delay:.2s }
.mic[data-rec="1"] .level i:nth-child(4){ animation-delay:.3s }
.mic[data-rec="1"] .level i:nth-child(5){ animation-delay:.15s }
.mic[data-rec="1"] .level i:nth-child(6){ animation-delay:.25s }
@keyframes lvl{ to{ height:24px; background:var(--accent) } }

/* صفّ الأزرار في أسفل اللوح — يستعمله ١٢ شاشة، فمكانه هنا لا في ملف مجموعة */
.actions{ display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; margin-top:var(--s5) }
.actions .push{ margin-inline-start:auto }

/* ── 17 · الحركة ────────────────────────────────────────── */
@keyframes panel-in{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }

/* ── 18 · الجوال ────────────────────────────────────────── */
.bottom-nav{ display:none }
@media (max-width:720px){
  /* شريطان عائمان أسفل الشاشة (التنقّل ولوحة العرض) — الحشو يفوقهما
     عشان ما يختفي آخر لوح تحتهما. */
  .app{ padding:var(--s4) var(--s4) 150px }
  .panel{ padding:var(--s5) var(--s5); border-radius:25px }
  .grid--mission,.grid--split,.grid--card,.grid--hero{ grid-template-columns:1fr }
  /* صف واحد على الجوال: حبة الهوية تتمدّد والصورة الرمزية بجانبها.
     بدون هذا تنزل الصورة سطرًا لحالها ويصير فوق الشاشة ثلاثة صفوف. */
  .bar{ flex-wrap:nowrap; gap:var(--s2) }
  .bar .nav, .bar .bar-progress{ display:none }
  .pill--brand{ flex:1; min-width:0; padding:10px 16px; overflow:hidden }
  .brand{ font-size:11.5px; white-space:nowrap }
  .slogan{ white-space:nowrap }
  .avatar{ flex:none }
  .phase{ flex-direction:column; gap:var(--s2) }
  .phase__name{ width:auto }
  .phase__chips{ flex-direction:column }
  .mchip{ width:100% }
  .btn{ width:100%; padding:15px 24px }
  .btn--compact{ width:auto }
  .btn--quiet{ width:auto; min-height:44px }   /* هدف اللمس على الجوال */
  .actions .btn{ width:100% }
  .actions{ flex-direction:column; align-items:stretch }
  .actions .push{ margin-inline-start:0 }
  .share{ width:100%; height:auto; aspect-ratio:432/548 }
  .share__idea{ font-size:26px }
  .well{ height:190px }
  .bottom-nav{
    display:flex; position:fixed; inset-inline:18px; bottom:18px; z-index:40;
    padding:5px; justify-content:space-around;
  }
  .bottom-nav a{ flex:1; text-align:center }
}

/* ── 19 · الوصول ────────────────────────────────────────── */
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:0ms !important; transition-duration:0ms !important }
}

/* ── 20 · لوحة العرض التجريبي (للتطوير فقط — تُحذف مع mock.js) ── */
.demo{
  position:fixed; inset-block-end:14px; inset-inline-start:14px; z-index:60;
  display:flex; gap:6px; padding:6px; align-items:center; font-size:11px;
}
.demo select{
  font-family:var(--font); font-size:11px; border:0; background:transparent;
  color:var(--ink); padding:4px 6px; border-radius:var(--r-pill);
}
@media (max-width:720px){ .demo{ inset-block-end:78px } }

/* ═══ v2 — قشرة تطبيق حقيقي (حكمه 2026-08-21: «make it look a real app») ═══ */

/* ── 21 · القشرة: شريط جانبي (سطح المكتب) وشريط تبويبات (الجوال) ── */
.shell{ display:flex; gap:24px; max-width:1280px; margin-inline:auto; padding:var(--s6) var(--s7); min-height:100vh }
.side{
  width:224px; flex:none; position:sticky; top:var(--s6);
  align-self:flex-start; display:flex; flex-direction:column; gap:var(--s5);
  max-height:calc(100vh - 52px);
}
.side__brand{ padding:var(--s4) var(--s5); border-radius:24px }
/* حبة عمودية بنصف قطر كامل تطلع كبسولة غريبة — زواياها تُضبط يدويًا */
.side__nav{ display:flex; flex-direction:column; gap:2px; padding:8px; border-radius:24px }
.side__nav a{
  display:flex; align-items:center; gap:var(--s3);
  padding:11px 14px; border-radius:16px; font-size:13px; color:var(--ink-60);
  transition:background .16s var(--ease), color .16s var(--ease);
}
.side__nav a:hover{ background:rgba(255,255,255,.55); color:var(--ink) }
.side__nav a[aria-current="page"]{ background:var(--accent); color:#fff; box-shadow:var(--shadow-accent) }
.side__nav a[aria-current="page"] svg{ stroke:#fff }
.side__nav svg{ flex:none; stroke:var(--ink-45); transition:stroke .16s var(--ease) }
.side__foot{ margin-top:auto; padding:var(--s4) var(--s5); display:flex; align-items:center; gap:var(--s3); border-radius:24px }
.shell__main{ flex:1; min-width:0; padding-bottom:64px }

/* شريط التبويبات السفلي — أيقونات SVG، بلا إيموجي (طلبه بنفسه) */
.tabbar{
  display:none; position:fixed; inset-inline:14px; bottom:14px; z-index:40;
  padding:6px; justify-content:space-around; gap:2px;
}
.tabbar a{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:7px 4px 6px; border-radius:16px; font-size:10.5px; color:var(--ink-60);
}
.tabbar a svg{ stroke:var(--ink-45) }
.tabbar a[aria-current="page"]{ background:var(--accent); color:#fff }
.tabbar a[aria-current="page"] svg{ stroke:#fff }

/* رأس الصفحة داخل القشرة: رجوع + مسار واضح (حكمه: back buttons everywhere) */
.pagehead{ display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s4); flex-wrap:wrap }
.back{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; color:var(--ink-60); padding:8px 14px;
  border-radius:var(--r-pill); border:1px solid var(--hairline);
  background:transparent; cursor:pointer; font-family:var(--font);
}
.back:hover{ color:var(--ink); border-color:rgba(14,20,32,.25) }
.back svg{ stroke:currentColor }
.crumb{ font-size:11.5px; color:var(--ink-45) }
.crumb b{ color:var(--ink-60); font-weight:400 }

/* ── 22 · شارة الأداة — كل مهمة تقول وش أداتها (حكمه) ── */
.tool-badge{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 14px; border-radius:var(--r-pill);
  background:var(--accent-tint); border:1px solid var(--accent-tint-2);
  font-size:11.5px; color:var(--ink); white-space:nowrap;
}
.tool-badge svg{ stroke:var(--accent); flex:none }

/* ── 23 · جداول (المصطلحات، الموديلات): صفوف بخطوط شعرية — لا صناديق ── */
.tbl{ display:flex; flex-direction:column }
.tbl__row{ display:flex; gap:var(--s4); padding:var(--s3) 0; border-top:1px solid var(--hairline); align-items:baseline }
.tbl__row:first-child{ border-top:0 }
.tbl__k{ width:132px; flex:none; font-size:12.5px; font-weight:500; color:var(--ink) }
.tbl__v{ font-size:12.5px; color:var(--ink-72) }
.tbl--models .tbl__k{ width:96px }

/* ── 24 · خطوات مرقّمة (م1) — الأمر له بلوك نسخ خاص ── */
.steps{ display:flex; flex-direction:column }
.step{ display:flex; gap:var(--s4); padding:var(--s4) 0; border-top:1px solid var(--hairline) }
.step:first-child{ border-top:0 }
.step__n{
  flex:none; width:30px; height:30px; border-radius:var(--r-pill);
  background:var(--accent-tint); color:var(--accent);
  display:grid; place-items:center; font-size:12px; font-weight:500;
}
.step__t{ font-size:13.5px; font-weight:500; color:var(--ink); margin-bottom:2px }
.step__cmd{
  margin-top:var(--s2); display:flex; align-items:center; gap:var(--s2);
  background:rgba(14,20,32,.05); border-radius:12px; padding:9px 14px;
}
.step__cmd code{
  direction:ltr; text-align:left; font-size:12px; color:var(--ink);
  font-family:var(--font); overflow-x:auto; white-space:nowrap; flex:1;
  font-variant-ligatures:none;
}

/* ── 25 · الواجهة الترحيبية (الهبوط) ── */
.hero{ text-align:center; padding:clamp(40px,9vh,96px) 0 var(--s7) }
.hero__slogan{
  font-size:clamp(44px,7vw,76px); font-weight:600; color:var(--ink);
  line-height:1.2; margin:0 0 var(--s3);
}
.hero__sub{ font-size:clamp(14px,1.6vw,17px); color:var(--ink-60); max-width:560px; margin-inline:auto }
.hero .btn{ margin-top:var(--s6); padding:17px 44px; font-size:14.5px }
.beats{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:var(--s7) }
@media (max-width:720px){
  .shell{ flex-direction:column; padding:var(--s4) var(--s4) 150px }
  .side{ display:none }
  .tabbar{ display:flex }
  .beats{ grid-template-columns:1fr }
  .hero{ padding-top:48px }
}

/* ── 26 · شريط القمع: أربع محطات مفهومة ── */
.bar--funnel{ justify-content:space-between }
.fsteps{ display:flex; align-items:center; gap:8px; padding:9px 18px; font-size:11px }
/* على الجوال: الحبتان ما تسعان بجانب بعض — الهوية تنكمش والمحطات تحتها */
@media (max-width:720px){
  /* الاسم اللاتيني + ثلاث محطات ما يسعون في ٣٩٠px — على الجوال يظهر
     الشعار العربي وحده (أقصر وأوضح) والمحطات جنبه. */
  .bar--funnel{ flex-wrap:nowrap; gap:var(--s2) }
  .bar--funnel .pill--brand{ flex:none; padding:9px 14px }
  .bar--funnel .brand, .bar--funnel .brand-div{ display:none }
  .bar--funnel .slogan{ display:inline; font-size:12px; font-weight:500; color:var(--ink) }
  .fsteps{ flex:1; min-width:0; justify-content:flex-end; padding:7px 12px; font-size:10px; overflow:hidden }
  .fstep{ white-space:nowrap }
}
.fstep{ color:var(--ink-38); white-space:nowrap }
.fstep--done{ color:var(--ink-60) }
.fstep--at{ color:var(--accent); font-weight:500 }
.fstep-sep{ width:12px; height:1px; background:var(--hairline) }

/* ── 27 · بطاقة الاستئناف في الشريط الجانبي ── */
.side__resume{
  display:flex; flex-direction:column; gap:2px;
  background:var(--accent); color:#fff; border-radius:20px;
  padding:var(--s4) var(--s5); box-shadow:var(--shadow-accent);
}
.side__resume-k{ font-size:10.5px; opacity:.75 }
.side__resume-t{ font-size:14px; font-weight:500 }
.side__resume-go{ font-size:11.5px; margin-top:6px; opacity:.9 }
.side__resume:hover{ filter:brightness(1.05) }

/* ── 28 · الهبوط: التفريغ هو الواجهة ── */
.land-hero{ max-width:780px; margin-inline:auto; text-align:center; padding:clamp(30px,6vh,64px) 0 var(--s5) }
/* العنوان جملة كاملة الحين، فحجمه أهدأ عشان يقع في سطرين لا ثلاثة */
.land-hero h1{ font-size:clamp(28px,4.2vw,46px); font-weight:600; line-height:1.32; margin-bottom:var(--s3) }
.land-hero .sub{ font-size:clamp(13.5px,1.5vw,15.5px); color:var(--ink-60); max-width:600px; margin-inline:auto }
.land-dump{ max-width:640px; margin-inline:auto; text-align:start }
.outcomes{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:840px; margin:var(--s8) auto 0 }
.faq-q{ font-size:13.5px; font-weight:500; color:var(--ink) }
@media (max-width:720px){ .outcomes{ grid-template-columns:1fr } }

/* ── 29 · النتيجة: الحكم، النسخة الأولى/بعدين، المقارنة ── */
.verdict{ font-size:clamp(24px,3vw,32px); font-weight:500; color:var(--ink); line-height:1.35 }
.split{ display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:1px solid var(--hairline) }
.split > div{ padding:var(--s4) 0 }
.split > div:first-child{ border-inline-end:1px solid var(--hairline); padding-inline-end:var(--s5) }
.split > div:last-child{ padding-inline-start:var(--s5) }
.split h3{ font-size:12.5px; color:var(--accent); margin-bottom:var(--s2) }
.split li{ font-size:12.5px; color:var(--ink-72); line-height:2 }
.split ul{ margin:0; padding-inline-start:18px }
@media (max-width:720px){
  .split{ grid-template-columns:1fr }
  .split > div:first-child{ border-inline-end:0; border-bottom:1px solid var(--hairline); padding-inline-end:0 }
  .split > div:last-child{ padding-inline-start:0 }
}
.big-range{ font-size:clamp(34px,4.4vw,52px); font-weight:300; color:var(--accent); line-height:1.2 }

/* ── 30 · ورقة الدخول (sheet) فوق الجلسة — الدخول ما يقطع السياق ── */
.sheet-wrap{ position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:18px }
.sheet-wrap::before{ content:''; position:absolute; inset:0; background:rgba(14,20,32,.28); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px) }
.sheet{ position:relative; width:min(440px,100%); max-height:88vh; overflow-y:auto }
@media (max-width:720px){
  .sheet-wrap{ align-items:flex-end; padding:0 }
  .sheet{ width:100%; border-end-start-radius:0; border-end-end-radius:0 }
}

/* ── 31 · «غير موجودة» ── */
.lost{ text-align:center; padding:80px 0 }
.lost .ltr{ color:var(--ink-38); font-size:12px }

/* ═══ 32 · إيقاع النص — علاجًا لـ«يشبه عرض بوربوينت غير مرتّب» ═══
   المشكلة كانت المسافات: عناوين تلتصق بنصّها ومجموعات تتباعد بلا سبب.
   القاعدة الآن وحدة: العنوان قريب من نصّه، والمجموعات بينها مسافة واحدة. */

.panel > .eyebrow{ margin-bottom:6px }
.panel > h1, .panel > h2{ margin-bottom:10px }
.panel > h1 + .meta, .panel > h2 + .meta,
.panel > h1 + p, .panel > h2 + p{ margin-top:0 }

.sep{ margin-top:var(--s5); padding-top:var(--s5) }
.sep > h3:first-child, .sep > .eyebrow:first-child{ margin-top:0; margin-bottom:6px }
h3 + .meta{ margin-top:0; margin-bottom:var(--s3) }

.panel p + p{ margin-top:var(--s3) }
.panel p:last-child{ margin-bottom:0 }

/* التشديد للمصطلح فقط لا للجُمل — كثرة الغامق تلغي معناه */
.panel b, .panel strong{ font-weight:500 }

/* ═══ 33 · بصريات تبني الثقة: بطاقات وحركة هادئة ═══ */

/* دخول متدرّج — الصفحة تتركّب أمام عينه بدل ما تظهر دفعة وحدة */
.stack > .panel:nth-child(2){ animation-delay:.04s }
.stack > .panel:nth-child(3){ animation-delay:.08s }
.stack > .panel:nth-child(4){ animation-delay:.12s }
.stack > .panel:nth-child(5){ animation-delay:.16s }
.stack > .panel:nth-child(6){ animation-delay:.20s }

.lift{ transition:transform .16s var(--ease), box-shadow .16s var(--ease) }
.lift:hover{ transform:translateY(-2px); box-shadow:0 28px 66px rgba(14,20,32,.13) }

@keyframes num-in{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }
.num{ animation:num-in .34s var(--ease) both }
.num:nth-child(2){ animation-delay:.06s }
.num:nth-child(3){ animation-delay:.12s }
.num:nth-child(4){ animation-delay:.18s }

/* جدول المقارنة: «معنا» له وزن بصري أعلى — الفرق يُرى قبل ما يُقرأ */
.vs{ display:grid; grid-template-columns:1.05fr 1fr 1fr; gap:0; margin-top:var(--s4) }
.vs__h{ padding:var(--s3) var(--s4); font-size:12px; font-weight:500 }
.vs__h--us{ color:var(--accent) }
.vs__c{ padding:var(--s3) var(--s4); font-size:12.5px; border-top:1px solid var(--hairline); line-height:1.85 }
.vs__c--k{ color:var(--ink); font-weight:500 }
.vs__c--alone{ color:var(--ink-60) }
.vs__h--us, .vs__c--us{ background:var(--accent-tint); color:var(--ink) }
.vs__h--us{ border-start-start-radius:16px; border-start-end-radius:16px }
.vs__row:last-child .vs__c--us{ border-end-start-radius:16px; border-end-end-radius:16px }
@media (max-width:720px){
  .vs{ grid-template-columns:1fr }
  .vs__h{ display:none }
  .vs__c{ border-top:0; padding:3px var(--s3) }
  .vs__c--k{ border-top:1px solid var(--hairline); padding-top:var(--s3); margin-top:var(--s2) }
  .vs__c--alone::before{ content:'وحدك: '; color:var(--ink-45) }
  .vs__c--us::before{ content:'معنا: '; color:var(--accent) }
  .vs__c--us{ border-radius:12px; margin-bottom:var(--s2) }
}

/* بطاقة الزمن: رقمان متقابلان */
.tvs{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--s4); text-align:center }
.tvs__v{ font-size:clamp(22px,3vw,30px); font-weight:500; line-height:1.3 }
.tvs__v--us{ color:var(--accent) }
.tvs__k{ font-size:11.5px; color:var(--ink-60); margin-top:2px }
.tvs__sep{ color:var(--ink-38); font-size:12px }

/* صف سؤال داخل قائمة المتطلبات — يبيّن إنه ناقص وينتظر قراره */
.need-ask{ background:rgba(47,106,224,.05); border-radius:14px; padding:var(--s3) var(--s4); margin:var(--s2) 0 }
.need-ask__q{ font-size:13px; font-weight:500; color:var(--ink) }
.need-ask__w{ font-size:11.5px; color:var(--ink-60); margin-bottom:var(--s2) }

/* ═══ 34 · إحساس تطبيق على الجوال، مو موقع مصغّر (حكمه 2026-08-21) ═══
   الفروق اللي تصنع الإحساس: حواف أقل، عرض كامل للبطاقات، عناوين أهدأ،
   مساحات لمس أكبر، وشريط علوي ثابت زي شريط التطبيق. */
@media (max-width:720px){
  html{ -webkit-tap-highlight-color:transparent }
  body{ font-size:14px }

  /* البطاقات تاخذ عرض الشاشة كامل تقريبًا — الهوامش الجانبية تصغر */
  .app, .shell{ padding-inline:12px }
  .panel{ padding:var(--s5) var(--s4); border-radius:20px }
  .narrow, .stack{ max-width:100% }

  /* العناوين أصغر: مقاسات الديسكتوب تطلع صارخة على ٣٧٥px */
  h1{ font-size:26px; line-height:1.35 }
  h2{ font-size:21px }
  .verdict{ font-size:22px }
  .land-hero h1{ font-size:26px }

  /* الشريط العلوي يلتصق فوق زي شريط التطبيق */
  .bar{ position:sticky; top:0; z-index:30; padding-block:8px;
        background:linear-gradient(var(--bg) 72%, transparent) }

  /* مساحات لمس: كل زر ٤٤px على الأقل */
  .btn{ min-height:46px }
  .chip{ min-height:38px; padding-inline:16px }
  .opt{ padding:var(--s4) }

  /* الحقول ١٦px عشان iOS ما يكبّر الشاشة عند التركيز — عطل شائع */
  .field, input, textarea, select{ font-size:16px }

  /* الجداول تنقلب قوائم — الأعمدة ما تنقرأ على شاشة ضيقة */
  .tbl__row{ flex-direction:column; align-items:flex-start; gap:2px }
  .tbl__k{ width:auto; font-size:12px; color:var(--ink-60) }
  .idea-need-edit{ margin-inline-start:0; margin-top:6px }
  .split{ grid-template-columns:1fr }

  /* صفوف الميزة: الأزرار سطر كامل تحت النص بدل ما تنضغط جنبه */
  .idea-row{ flex-direction:column; align-items:stretch; gap:var(--s2) }
  .idea-row .chips{ width:100%; justify-content:flex-start }
  .idea-row .chip{ flex:1 }

  /* بطاقة الطرفية تنكمش بدل ما تمدّ الصفحة أفقيًا */
  .ccard__body{ font-size:11px; padding:var(--s3) var(--s4); overflow-x:auto }

  /* الأرقام صفّان مريحان */
  .nums{ gap:10px }
  .num__v{ font-size:24px }
}

/* شاشات ضيقة جدًا */
@media (max-width:380px){
  .nums{ grid-template-columns:1fr }
  .side__price{ font-size:26px }
}