/* ============================================
   أكاديمية إدارة الحياة — الهوية البصرية
   ──────────────────────────────────────────
   هويةٌ مستقلّة متناسقة مع مشروع العمر، كما طلبت الوثيقة (بند ١).
   ألوانها مستخرجةٌ من الشعار المعتمد نفسه: كحليٌّ عميق وأزرقُ مخضرّ
   وأخضر. والأخضر قريبٌ من أخضر المنصّة الأمّ لكنه أعمق — فالهويتان
   تُعرفان أختين ولا تُخلطان.
   ============================================ */

.ac-body {
  --ac-navy: #102C4F;
  --ac-navy-deep: #0A1C33;
  --ac-teal: #19505E;
  --ac-teal-light: #2E7B91;
  --ac-green: #1BA153;
  --ac-green-light: #2DA74B;
  --ac-ink: #0E1A26;
  --ac-surface: #FFFFFF;
  --ac-surface-2: #F4F7F9;
  --ac-line: #DCE5EA;
  --ac-text: #16222E;
  --ac-text-2: #51636F;

  background: var(--ac-surface);
  color: var(--ac-text);
  padding-top: 0 !important;
}

/* الوضع الداكن يتبع تفضيل الجهاز — والشعار ملوّنٌ على شفافية فيصلح للاثنين */
@media (prefers-color-scheme: dark) {
  .ac-body:not([data-theme="light"]) {
    --ac-surface: #0A1420;
    --ac-surface-2: #0F1D2C;
    --ac-line: #1E3243;
    --ac-text: #EAF1F6;
    --ac-text-2: #9DB2C0;
  }
}

.ac-container { max-width: 1120px; margin: 0 auto; padding-inline: 1rem; }
.ac-narrow { max-width: 760px; }

/* ─── الرأس ─── */
.ac-header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--ac-surface) 88%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-block-end: 1px solid var(--ac-line);
  padding-top: env(safe-area-inset-top);
}
.ac-head-inner {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  max-width: 1120px; margin: 0 auto; padding: .6rem 1rem;
}
/* الرمز وحده في الرأس مع الاسم نصًّا: الشعار الكامل فيه سطران من النصّ
   الصغير لا يُقرآن في ارتفاع رأسٍ لاصق، فيصيران ضجيجًا لا هوية. */
.ac-logo { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px;
           text-decoration: none; color: var(--ac-text); }
.ac-logo img { block-size: 38px; inline-size: auto; }
.ac-logo span { font-weight: 800; font-size: .98rem; letter-spacing: -.01em; white-space: nowrap; }
@media (max-width: 420px) { .ac-logo span { font-size: .88rem; } }
.ac-head-actions { display: flex; align-items: center; gap: .4rem; }

/* ─── الأزرار ─── */
.ac-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 44px; padding: .6rem 1.1rem; border-radius: .7rem;
  font: inherit; font-weight: 700; font-size: .92rem; text-decoration: none;
  border: 1.5px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease, background .15s, color .15s;
}
.ac-btn-primary {
  background: linear-gradient(135deg, var(--ac-green), var(--ac-teal-light));
  color: #fff; box-shadow: 0 6px 18px rgba(27,161,83,.28);
}
.ac-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(27,161,83,.36); }
.ac-btn-outline { background: transparent; color: var(--ac-text); border-color: var(--ac-line); }
.ac-btn-outline:hover { border-color: var(--ac-green); color: var(--ac-green); }
/* على الخلفيات الداكنة (الواجهة والختام): الحدّ والنصّ أبيضان مهما كان
   وضع الجهاز — ac-btn-outline يتبع لون النصّ فيختفي هناك في الوضع الفاتح. */
.ac-btn-onDark { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.4); }
.ac-btn-onDark:hover { background: rgba(255,255,255,.16); border-color: #fff; color: #fff; }
.ac-btn-ghost { background: transparent; color: var(--ac-text-2); padding-inline: .7rem; font-size: .85rem; }
.ac-btn-ghost:hover { color: var(--ac-green); }
.ac-btn-lg { min-height: 52px; padding: .9rem 1.6rem; font-size: 1.02rem; }
.ac-hide-sm { display: none; }
@media (min-width: 560px) { .ac-hide-sm { display: inline-flex; } }

/* ─── الواجهة ─── */
.ac-hero {
  position: relative; overflow: hidden;
  padding: 3rem 0 3.25rem;
  background:
    radial-gradient(760px 420px at 50% -10%, rgba(27,161,83,.16), transparent 62%),
    linear-gradient(170deg, var(--ac-navy), var(--ac-navy-deep) 68%);
  color: #fff; text-align: center;
}
.ac-hero .ac-lead, .ac-hero .ac-note { color: rgba(255,255,255,.82); }
.ac-eyebrow {
  display: inline-block; padding: .35rem .85rem; border-radius: 999px;
  background: rgba(27,161,83,.16); color: #5FD38C;
  font-size: .76rem; font-weight: 700; letter-spacing: .03em; margin-block-end: .9rem;
}
.ac-h1 {
  font-size: clamp(1.9rem, 7.5vw, 3.4rem); line-height: 1.18; font-weight: 800;
  margin: 0 0 1rem; letter-spacing: -.01em;
}
.ac-accent { color: #35D07F; }
.ac-dots { color: #35D07F; letter-spacing: .12em; }
.ac-lead {
  font-size: clamp(.98rem, 3vw, 1.15rem); line-height: 1.85; color: var(--ac-text-2);
  margin: 0 auto 1.4rem; max-width: 62ch;
}
.ac-lead-sm { font-size: clamp(.92rem, 2.6vw, 1.02rem); }
.ac-cta-row { display: flex; flex-direction: column; gap: .65rem; align-items: stretch; }
.ac-cta-row .ac-btn { inline-size: 100%; }
@media (min-width: 560px) {
  .ac-cta-row { flex-direction: row; justify-content: center; flex-wrap: wrap; }
  .ac-cta-row .ac-btn { inline-size: auto; }
}
.ac-note {
  margin-block-start: 1.5rem; font-size: .88rem; line-height: 1.8;
  color: var(--ac-text-2); max-width: 54ch; margin-inline: auto;
}
.ac-note strong { color: #fff; }

/* ─── الأقسام ─── */
.ac-section { padding: 3rem 0; }
.ac-section-alt { background: var(--ac-surface-2); }
.ac-sec-head { text-align: center; margin-block-end: 2.2rem; }
.ac-h2 {
  font-size: clamp(1.45rem, 5vw, 2.1rem); line-height: 1.3; font-weight: 800;
  margin: 0 0 .7rem; color: var(--ac-text);
}

/* ─── بطاقات المسارات ─── */
.ac-paths { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 620px) { .ac-paths { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .ac-paths { grid-template-columns: repeat(3, 1fr); } }

.ac-path {
  position: relative; display: flex; flex-direction: column; gap: .6rem;
  padding: 1.5rem 1.35rem; border-radius: 1rem;
  background: var(--ac-surface); border: 1px solid var(--ac-line);
  text-decoration: none; color: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  /* الشريط العلويّ متدرّجٌ بألوان الشعار — يربط البطاقة بالهوية بلا ضجيج */
  overflow: hidden;
}
.ac-path::before {
  content: ''; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 4px;
  background: linear-gradient(90deg, var(--ac-navy), var(--ac-teal-light), var(--ac-green));
}
.ac-path:hover { transform: translateY(-3px); border-color: var(--ac-green); box-shadow: 0 14px 34px rgba(16,44,79,.12); }
.ac-path-ico {
  inline-size: 48px; block-size: 48px; border-radius: .8rem;
  display: grid; place-items: center; font-size: 1.45rem;
  background: linear-gradient(135deg, rgba(16,44,79,.08), rgba(27,161,83,.14));
  border: 1px solid var(--ac-line);
}
.ac-path h3 { margin: 0; font-size: 1.1rem; font-weight: 800; color: var(--ac-text); }
.ac-path p { margin: 0; font-size: .9rem; line-height: 1.8; color: var(--ac-text-2); }
.ac-path-meta {
  margin-block-start: auto; padding-block-start: .85rem; border-block-start: 1px solid var(--ac-line);
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  font-size: .8rem; color: var(--ac-text-2); font-variant-numeric: tabular-nums;
}
.ac-chip {
  padding: .22rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 700;
  background: rgba(46,123,145,.12); color: var(--ac-teal-light);
}
.ac-chip--soon { background: rgba(224,168,0,.14); color: #B98900; }
.ac-chip--live { background: rgba(27,161,83,.14); color: var(--ac-green); }

/* ─── الخطوات ─── */
.ac-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: 1fr; counter-reset: s; }
@media (min-width: 620px) { .ac-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .ac-steps { grid-template-columns: repeat(4, 1fr); } }
.ac-steps li {
  padding: 1.4rem 1.25rem; border-radius: 1rem;
  background: var(--ac-surface); border: 1px solid var(--ac-line);
}
.ac-step-n {
  display: grid; place-items: center; inline-size: 38px; block-size: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--ac-navy), var(--ac-teal));
  color: #fff; font-weight: 800; font-size: 1.05rem; margin-block-end: .75rem;
}
.ac-steps h3 { margin: 0 0 .4rem; font-size: 1rem; font-weight: 800; color: var(--ac-text); }
.ac-steps p { margin: 0; font-size: .88rem; line-height: 1.8; color: var(--ac-text-2); }

/* ─── الختام ─── */
.ac-final {
  padding: 3.5rem 0; text-align: center; color: #fff;
  background: linear-gradient(160deg, var(--ac-teal), var(--ac-navy) 72%);
}
.ac-final .ac-h2 { color: #fff; }
.ac-final .ac-lead { color: rgba(255,255,255,.84); }
.ac-cta-center { justify-content: center; }

/* ─── تنويه المحتوى المؤقّت ─── */
.ac-disclaimer {
  margin-block-start: 1.5rem; padding: .85rem 1.1rem; border-radius: .7rem;
  background: rgba(224,168,0,.1); border: 1px solid rgba(224,168,0,.3);
  color: var(--ac-text-2); font-size: .85rem; line-height: 1.8; text-align: center;
}

@media (min-width: 900px) {
  .ac-hero { padding: 4.5rem 0 4.25rem; }
  .ac-section { padding: 4rem 0; }
}

/* --------------------------------------------------------------------------
   شاشة التقييم القبلي/البعدي
   -------------------------------------------------------------------------- */
.qz { max-width: 760px; margin: 0 auto; }
.qz-loading { text-align: center; color: var(--ac-text-2); padding: 3rem 0; }
.qz-panel {
  background: var(--ac-surface); border: 1px solid var(--ac-line);
  border-radius: 1rem; padding: 1.75rem 1.5rem;
}
.qz-title { font-size: clamp(1.3rem, 4.5vw, 1.8rem); font-weight: 800; margin: 0 0 .9rem; color: var(--ac-text); }
.qz-lead { font-size: 1rem; line-height: 1.9; color: var(--ac-text-2); margin: 0 0 .9rem; }
.qz-hint { font-size: .88rem; line-height: 1.85; color: var(--ac-text-2); margin: .9rem 0 0; }
.qz-progress { margin: 1.25rem 0 0; font-size: .88rem; color: var(--ac-text-2); font-variant-numeric: tabular-nums; }

.qz-form { display: flex; flex-direction: column; gap: 1rem; margin-block-start: 1.5rem; }
.qz-q {
  border: 1px solid var(--ac-line); border-radius: .85rem;
  padding: 1.1rem 1.1rem .9rem; margin: 0; background: var(--ac-surface-2);
  transition: border-color .15s;
}
.qz-q.is-answered { border-color: rgba(27,161,83,.45); }
/* المتروك يُعلَّم قبل التسليم لا بعده: غير المُجاب يُحسب خطأً */
.qz-q.is-missing { border-color: #E0A800; background: rgba(224,168,0,.07); }
.qz-q legend {
  font-weight: 700; font-size: 1rem; line-height: 1.8; color: var(--ac-text);
  padding: 0; margin-block-end: .75rem; display: flex; gap: .6rem; align-items: baseline;
}
.qz-n {
  flex: 0 0 auto; display: inline-grid; place-items: center;
  inline-size: 26px; block-size: 26px; border-radius: 50%;
  background: linear-gradient(135deg, var(--ac-navy), var(--ac-teal));
  color: #fff; font-size: .82rem; font-weight: 800;
}
.qz-opt {
  display: flex; align-items: flex-start; gap: .65rem;
  padding: .6rem .7rem; border-radius: .6rem; cursor: pointer;
  font-size: .95rem; line-height: 1.75; color: var(--ac-text);
  transition: background .13s;
}
.qz-opt:hover { background: color-mix(in srgb, var(--ac-green) 10%, transparent); }
.qz-opt input { margin-block-start: .35rem; accent-color: var(--ac-green); inline-size: 18px; block-size: 18px; flex: 0 0 auto; }
.qz-opt:has(input:checked) { background: color-mix(in srgb, var(--ac-green) 14%, transparent); font-weight: 600; }

.qz-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-block-start: 1.6rem; }
.qz-actions .ac-btn { flex: 1 1 auto; }

/* ─── النتيجة والمقارنة ─── */
.qz-bar { margin-block-end: 1rem; }
.qz-bar-head { display: flex; justify-content: space-between; align-items: baseline;
               font-size: .92rem; color: var(--ac-text-2); margin-block-end: .4rem; }
.qz-bar-head strong { font-size: 1.15rem; color: var(--ac-text); font-variant-numeric: tabular-nums; }
.qz-bar-track { block-size: 12px; border-radius: 999px; background: var(--ac-surface-2);
                border: 1px solid var(--ac-line); overflow: hidden; }
.qz-bar-track i { display: block; block-size: 100%; border-radius: 999px; transition: width .6s ease; }
.qz-bar-track i.is-pre  { background: linear-gradient(90deg, var(--ac-navy), var(--ac-teal-light)); }
.qz-bar-track i.is-post { background: linear-gradient(90deg, var(--ac-teal-light), var(--ac-green)); }
.qz-delta {
  margin-block-start: 1.25rem; padding: 1rem 1.2rem; border-radius: .8rem;
  font-size: 1.3rem; font-weight: 800; display: flex; flex-direction: column; gap: .25rem;
}
.qz-delta small { font-size: .85rem; font-weight: 500; opacity: .85; }
.qz-delta.is-up   { background: rgba(27,161,83,.12); color: var(--ac-green); border: 1px solid rgba(27,161,83,.3); }
.qz-delta.is-down { background: rgba(224,168,0,.1); color: #B98900; border: 1px solid rgba(224,168,0,.3); }

/* شهادةٌ صدرت بتسليم البعديّ — تُميَّز عن بقيّة التلميحات */
.qz-cert {
  margin-block-start: .9rem;
  padding: .7rem .9rem;
  border: 1px solid color-mix(in oklab, var(--ac-green) 45%, transparent);
  border-radius: .65rem;
  background: color-mix(in oklab, var(--ac-green) 10%, transparent);
  color: var(--ac-text);
}