/* بلّغ صح – نظام التصميم
 * خط تجوال (Tajawal) مستضاف محليًا برخصة SIL OFL 1.1؛ لا خطوط أو موارد خارجية.
 * الفكرة: أسطح مسطحة هادئة، خط واحد بثلاثة أوزان، زوايا بنصف قطر موحّد، وألوان بمعنى محدد:
 *   كحلي = الهوية والنص الرئيسي | أخضر مزرق = الإجراءات والتوجيه | ذهبي خافت = التنبيه اللطيف والخط الفاصل | أحمر = الطوارئ فقط. */

@font-face { font-family: "Tajawal"; font-weight: 400; font-style: normal; font-display: swap; src: url("../assets/fonts/Tajawal-Regular.woff2") format("woff2"); }
@font-face { font-family: "Tajawal"; font-weight: 500; font-style: normal; font-display: swap; src: url("../assets/fonts/Tajawal-Medium.woff2") format("woff2"); }
@font-face { font-family: "Tajawal"; font-weight: 700; font-style: normal; font-display: swap; src: url("../assets/fonts/Tajawal-Bold.woff2") format("woff2"); }

:root {
  --navy: #0a2140;
  --navy-2: #16386a;
  --teal: #0d6b64;
  --teal-dark: #0a5650;
  --teal-50: #e6f1ef;
  --gold: #c39a3f;
  --gold-dark: #7a5a12;
  --gold-50: #f7f0dd;
  --paper: #f6f4ee;
  --surface: #ffffff;
  --ink: #17212f;
  --muted: #4a5561;
  --line: #dcd8cc;
  --line-soft: #ebe8df;
  --control: #8d9aa8;
  --danger: #b3261e;
  --danger-dark: #8c1d17;
  --danger-bg: #fbeceb;
  --warn-bg: #faf1d8;
  --warn-ink: #5f4508;
  --info-bg: #e9eff6;
  --ok: #1f6f4a;
  --ok-bg: #e4f2ea;
  --radius: 10px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(10, 33, 64, .06);
  --shadow-md: 0 8px 24px rgba(10, 33, 64, .10);
  --font: "Tajawal", "Segoe UI", Tahoma, "Geeza Pro", "Noto Sans Arabic", Arial, sans-serif;

  /* أيقونات التنبيه (تُلوَّن بلون النص عبر القناع) */
  --i-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 11v5.5M12 7.6h.01'/%3E%3C/svg%3E");
  --i-warn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 2 18a2 2 0 0 0 1.7 3h16.6a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0zM12 9.5v4M12 17.2h.01'/%3E%3C/svg%3E");
  --i-ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='m8 12.2 2.7 2.7L16 9.5'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: clamp(1.0625rem, 1.03rem + .14vw, 1.125rem);
  font-weight: 400;
  line-height: 1.75;
  color: var(--ink);
  background: var(--paper);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  text-rendering: optimizeLegibility;
}
main { flex: 1; padding-block: 1.5rem 3rem; }
.wrap { width: min(100% - 2rem, 62rem); margin-inline: auto; }
a { color: var(--teal-dark); text-underline-offset: .22em; }
a:hover { color: var(--navy); }

/* الهرمية الطباعية: عرض ← عنوان الصفحة ← عنوان القسم ← عنوان فرعي ← نص ← ملاحظة */
h1, h2, h3 { margin: 0 0 .6rem; color: var(--navy); font-weight: 700; line-height: 1.4; }
h1 { font-size: clamp(1.75rem, 4vw, 2.25rem); }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.125rem; }
p { margin: 0 0 .85rem; }
strong { font-weight: 700; }
.lead { font-size: 1.15rem; color: var(--muted); max-width: 44rem; line-height: 1.8; }
.hint, .step-intro, .score-note, .coach-note, .prep-note { max-width: 46rem; }
.muted { color: var(--muted); }
.small { font-size: .92rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[dir="ltr"] { unicode-bidi: isolate; }
.num { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* أيقونات خطية موحّدة: شبكة 24، سماكة 1.75، أطراف مستديرة */
.ico { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.24em; }

:focus-visible { outline: 3px solid #1b8c83; outline-offset: 2px; }
h1:focus { outline: none; }
.skip { position: absolute; inset-inline-start: 1rem; top: -4rem; z-index: 50; background: var(--gold); color: #1a1200; padding: .6rem 1rem; border-radius: var(--radius-sm); font-weight: 700; }
.skip:focus { top: .5rem; }

.screen > h1 { margin-bottom: 1rem; }

/* ---------- شريط الجهة المنظِّمة (منفصل بصريًا عن هوية بلّغ صح) ---------- */
.org-strip { background: var(--surface); border-bottom: 1px solid var(--line); }
.org-in { display: flex; align-items: center; gap: .8rem; padding-block: .5rem; }
.org-logo { flex: none; width: 44px; height: 44px; object-fit: contain; }
.org-text { margin: 0; display: flex; flex-direction: column; line-height: 1.4; }
.org-text strong { font-size: .95rem; color: var(--ink); }
.org-text span { font-size: .85rem; color: var(--muted); }

/* ---------- ترويسة بلّغ صح ---------- */
.site-header { background: var(--navy); border-bottom: 3px solid var(--gold); position: sticky; top: 0; z-index: 20; }
.header-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1rem; padding-block: .55rem; }
.brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; color: #fff; }
.brand-mark { width: 2.5rem; height: 2.5rem; flex: none; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.brand-text { font-size: 1.65rem; font-weight: 700; line-height: 1.1; display: flex; flex-direction: column; }
.brand-text small { font-size: .7rem; font-weight: 500; color: rgba(255, 255, 255, .72); direction: ltr; text-align: start; letter-spacing: .22em; margin-top: .1rem; }
.main-nav { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; }
.nav-more { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; }
.nav-link.nav-toggle { display: none; }
.nav-exit { color: #ffe1a6; }
.nav-link {
  font: inherit; font-size: .975rem; font-weight: 500; color: rgba(255, 255, 255, .92); text-decoration: none; cursor: pointer;
  background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  padding: .3rem .8rem; min-height: 44px; display: inline-flex; align-items: center; gap: .4rem;
}
.nav-link:hover { color: #fff; border-bottom-color: rgba(255, 255, 255, .45); }
.nav-link[aria-current="page"] { color: #fff; border-bottom-color: var(--gold); }
.nav-emerg { background: var(--danger); border: 0; border-radius: var(--radius-sm); font-weight: 700; padding-inline: .9rem; }
.nav-emerg:hover { background: var(--danger-dark); border-bottom-color: transparent; }
.nav-emerg[aria-current="page"] { background: var(--danger-dark); border-bottom-color: transparent; box-shadow: 0 0 0 2px #fff inset; }
.count { background: var(--gold); color: var(--navy); border-radius: 999px; padding: 0 .5rem; font-weight: 700; font-size: .85rem; line-height: 1.5; }

/* شريط العرض التجريبي */
.demo-banner { background: var(--warn-bg); border-bottom: 1px solid #d7bd73; color: var(--warn-ink); }
.demo-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding-block: .55rem; }
.demo-in p { margin: 0; font-size: .95rem; flex: 1 1 22rem; line-height: 1.7; }

/* ---------- الأزرار ---------- */
.btn {
  font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; line-height: 1.4;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .5rem 1.3rem; border-radius: var(--radius-sm); border: 1.5px solid transparent;
  transition: background-color .15s, border-color .15s;
}
.btn:active { transform: translateY(1px); }
.btn-big { min-height: 54px; padding-inline: 1.9rem; font-size: 1.075rem; }
.btn-small { min-height: 40px; padding: .25rem .95rem; font-size: .95rem; }
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-2); color: #fff; }
.btn-teal { background: var(--teal); color: #fff; }
.btn-teal:hover { background: var(--teal-dark); color: #fff; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: var(--danger-dark); color: #fff; }
.btn-ghost { background: var(--surface); color: var(--navy); border-color: var(--control); }
.btn-ghost:hover { background: var(--teal-50); border-color: var(--teal); color: var(--navy); }
.btn-quiet { background: transparent; color: var(--teal-dark); text-decoration: underline; text-underline-offset: .25em; padding-inline: .8rem; }
.btn-quiet:hover { color: var(--navy); }
.btn-light { background: #fff; color: var(--warn-ink); border-color: #b99a44; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: .7rem; margin-block: 1.5rem 0; align-items: center; }
.link-btn { font: inherit; background: none; border: 0; padding: 0; color: var(--teal-dark); text-decoration: underline; cursor: pointer; }

/* ---------- الشاشة التمهيدية (تخطيط تحريري) ---------- */
.hero { display: grid; gap: 2.2rem; padding-block: .5rem 0; align-items: center; }
.eyebrow { display: flex; align-items: center; gap: .6rem; margin: 0 0 .6rem; color: var(--teal-dark); font-weight: 700; font-size: 1rem; }
.eyebrow::before { content: ""; width: 1.75rem; height: 3px; border-radius: 2px; background: var(--gold); }
.hero h1 { font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.35; margin: 0 0 1rem; letter-spacing: 0; text-wrap: balance; }
.hero-en { direction: ltr; text-align: right; letter-spacing: .3em; color: var(--muted); font-size: .95rem; font-weight: 500; margin: .1rem 0 1.2rem; }
.hero-lead { text-wrap: pretty; max-width: 34rem; margin: 0 0 1.5rem; font-size: 1.15rem; font-weight: 500; line-height: 1.85; color: var(--ink); }
.hero .btn-row { margin: 0; }
.hero-actions { gap: .5rem 1rem; }
.hero-links { margin: .9rem 0 0; display: flex; flex-wrap: wrap; gap: .3rem .7rem; }
.hero-figure { margin: 0; }
.hero-figure img { display: block; width: 100%; max-width: 25rem; height: auto; margin-inline: auto; border-radius: 14px; box-shadow: var(--shadow-md); }
@media (min-width: 56rem) {
  .hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 3.5rem; padding-block: 1.5rem 0; }
}

.trust-strip { list-style: none; padding: 0; margin: 2.75rem 0 1.5rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); border-block: 1px solid var(--line); }
.trust-strip li { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.1rem; font-weight: 700; color: var(--navy); }
.trust-strip li + li { border-inline-start: 1px solid var(--line); }
.trust-strip .ico { width: 1.6rem; height: 1.6rem; color: var(--teal); }
@media (max-width: 47.99rem) {
  .trust-strip li + li { border-inline-start: 0; border-top: 1px solid var(--line); }
}

/* ---------- التنبيهات ---------- */
.notice { position: relative; border-radius: var(--radius-sm); padding: .85rem 1.1rem; padding-inline-start: 3rem; margin-block: .9rem; border-inline-start: 4px solid; line-height: 1.8; }
.notice::before { content: ""; position: absolute; inset-inline-start: .9rem; top: .95rem; width: 1.4rem; height: 1.4rem; background: currentColor; -webkit-mask: var(--i-info) center / contain no-repeat; mask: var(--i-info) center / contain no-repeat; }
.notice-info { background: var(--info-bg); border-color: var(--navy-2); color: var(--ink); }
.notice-info::before { color: var(--navy-2); }
.notice-danger { background: var(--danger-bg); border-color: var(--danger); color: var(--ink); }
.notice-danger::before { color: var(--danger); -webkit-mask-image: var(--i-warn); mask-image: var(--i-warn); }
.notice-warn { background: var(--warn-bg); border-color: #b99a44; color: var(--warn-ink); }
.notice-warn::before { -webkit-mask-image: var(--i-warn); mask-image: var(--i-warn); }
.notice-ok { background: var(--ok-bg); border-color: var(--ok); color: var(--ink); }
.notice-ok::before { color: var(--ok); -webkit-mask-image: var(--i-ok); mask-image: var(--i-ok); }

/* ---------- الأهداف ---------- */
.goal-list { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.goal-list li { display: flex; gap: 1.1rem; align-items: flex-start; padding: 1.1rem .25rem; border-bottom: 1px solid var(--line); }
.goal-list h2 { font-size: 1.15rem; margin-bottom: .1rem; }
.goal-list p { margin: 0; color: var(--muted); }
.goal-num { flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--navy); color: #e3c274; display: grid; place-items: center; font-weight: 700; font-size: 1.15rem; line-height: 1; }
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.25rem; margin-block: 1.75rem; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem 1.4rem; }
.panel-title { font-size: 1.125rem; color: var(--teal-dark); padding-bottom: .5rem; margin-bottom: .8rem; border-bottom: 1px solid var(--line-soft); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.4rem; margin-block: 1.1rem; }
.card-title { font-size: 1.125rem; color: var(--teal-dark); }
.check-list, .cross-list { list-style: none; padding: 0; margin: 0; }
.check-list li, .cross-list li { padding-inline-start: 2rem; position: relative; margin-bottom: .5rem; }
.check-list li::before, .cross-list li::before { position: absolute; inset-inline-start: 0; top: .35em; width: 1.3rem; height: 1.3rem; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; font-weight: 700; line-height: 1; }
.check-list li::before { content: "✓"; color: var(--ok); background: var(--ok-bg); }
.cross-list li::before { content: "✕"; color: var(--danger); background: var(--danger-bg); }

/* ---------- التصنيفات ---------- */
.emerg-gate { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.2rem; background: var(--surface); border: 1px solid var(--line); border-inline-start: 5px solid var(--danger); border-radius: var(--radius); padding: 1.1rem 1.3rem; margin-block: 1.1rem 1.6rem; }
.emerg-gate p { margin: 0 0 .15rem; }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.cat-card {
  font: inherit; text-align: start; cursor: pointer; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem;
  display: flex; flex-direction: column; gap: .3rem; min-height: 11rem;
  transition: border-color .15s, box-shadow .15s;
}
.cat-card:hover { border-color: var(--teal); box-shadow: var(--shadow-md); }
.cat-card .cat-icon { color: var(--teal); margin-bottom: .3rem; display: block; }
.cat-card .cat-icon .ico { width: 2rem; height: 2rem; }
.cat-card .cat-name { font-weight: 700; font-size: 1.15rem; color: var(--navy); line-height: 1.5; }
.cat-card .cat-desc { color: var(--muted); font-size: .95rem; line-height: 1.75; }
.cat-card .cat-route { margin-top: auto; padding-top: .6rem; border-top: 1px solid var(--line-soft); font-size: .875rem; font-weight: 500; color: var(--teal-dark); line-height: 1.6; }
.cat-card.is-emerg { border-inline-start: 5px solid var(--danger); }
.cat-card.is-emerg:hover { border-color: var(--danger); }
.cat-card.is-emerg .cat-icon { color: var(--danger); }
.cat-card.is-emerg .cat-route { color: var(--danger-dark); }

/* ---------- الطوارئ: حالة تحذير جادّة؛ الأحمر للمعلومة العاجلة والأرقام فقط ---------- */
.em-head { display: flex; gap: 1rem; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-inline-start: 6px solid var(--danger); border-radius: var(--radius); padding: 1.25rem 1.4rem; margin-bottom: 1.5rem; }
.em-head-ico { flex: none; width: 2.9rem; height: 2.9rem; border-radius: 50%; display: grid; place-items: center; background: var(--danger); color: #fff; }
.em-head-ico .ico { width: 1.5rem; height: 1.5rem; }
.em-head h1 { margin-bottom: .2rem; }
.em-head p { margin: 0; font-size: 1.1rem; }
.em-head strong { color: var(--danger-dark); }
.section-title { margin-top: 2rem; }
.hazard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .7rem; }
.hazard-btn { font: inherit; text-align: start; cursor: pointer; min-height: 56px; padding: .55rem 1rem; display: flex; align-items: center; gap: .75rem; background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); font-weight: 500; line-height: 1.6; }
.hazard-btn .ico { width: 1.5rem; height: 1.5rem; color: var(--navy); }
.hazard-btn:hover { border-color: var(--navy); }
.hazard-btn[aria-pressed="true"] { border-color: var(--danger); background: var(--danger-bg); color: var(--ink); font-weight: 700; }
.hazard-btn[aria-pressed="true"] .ico { color: var(--danger); }
.hazard-result { margin-top: 1rem; }
.call-now { background: var(--surface); border: 2px solid var(--danger); border-radius: var(--radius); padding: 1.15rem 1.4rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; }
.call-now p { margin: 0; font-size: 1.2rem; font-weight: 700; color: var(--ink); }
.call-now .btn { background: var(--danger); color: #fff; font-size: 1.6rem; min-height: 58px; padding-inline: 1.6rem; }
.call-now .btn:hover { background: var(--danger-dark); color: #fff; }
.em-grid { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .8rem; }
.em-grid a { display: flex; flex-direction: column; align-items: center; gap: .1rem; text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem .5rem; color: var(--navy); min-height: 8rem; justify-content: center; }
.em-grid a:hover { border-color: var(--danger); }
.em-grid a.is-match { border: 2px solid var(--danger); background: var(--danger-bg); }
.em-grid .em-ico { color: var(--navy); margin-bottom: .1rem; }
.em-grid .em-ico .ico { width: 1.75rem; height: 1.75rem; }
.em-grid .em-name { font-weight: 500; line-height: 1.5; }
.em-grid .em-num { font-size: 1.85rem; font-weight: 700; color: var(--danger-dark); line-height: 1.3; }
.em-inline { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.em-inline li { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: .1rem .95rem; font-weight: 500; }
.em-inline .num { color: var(--danger-dark); font-weight: 700; }

/* ---------- المعالج: خدمة حقيقية، مهمة واحدة في كل خطوة ---------- */
.stepper { list-style: none; padding: 0; margin: 1.25rem 0 1.5rem; display: grid; grid-template-columns: repeat(4, 1fr); }
.stepper li { position: relative; text-align: center; font-size: .9rem; line-height: 1.5; color: var(--muted); padding-inline: .25rem; }
.stepper li:not(:last-child)::after { content: ""; position: absolute; top: 1.1rem; inset-inline-start: calc(50% + 1.5rem); width: calc(100% - 3rem); height: 2px; background: var(--line); }
.stepper li.done:not(:last-child)::after { background: var(--teal); }
.stepper .s-num { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; margin: 0 auto .35rem; border-radius: 50%; background: var(--surface); border: 2px solid var(--line); color: var(--muted); font-weight: 700; position: relative; z-index: 1; }
.stepper li.done { color: var(--teal-dark); }
.stepper li.done .s-num { background: var(--teal); border-color: var(--teal); color: #fff; }
.stepper li.current { color: var(--navy); font-weight: 700; }
.stepper li.current .s-num { background: var(--navy); border-color: var(--navy); color: #fff; }

.score-mini { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem 1.1rem .5rem; margin-bottom: 1.1rem; }
.score-head { display: flex; align-items: baseline; gap: .4rem 1rem; }
.score-mini .score-head strong { font-size: .95rem; }
.score-mini .score-band { font-size: .9rem; }
.score-mini .score-num { margin-inline-start: auto; }
.score-mini .score-note { margin: 0; }
.score-mini details.breakdown { margin-top: .1rem; }
.score-num { font-size: 1.35rem; font-weight: 700; color: var(--navy); }
.bar { height: 10px; background: var(--line-soft); border-radius: 999px; overflow: hidden; margin-block: .35rem; }
.bar > span { display: block; height: 100%; width: 0; background: var(--teal); transition: width .3s; border-radius: 999px; }
.score-band { font-weight: 700; margin: 0; }
.band-low { --c: #b3261e; }
.band-fair { --c: #8a5a00; }
.band-good { --c: #0a5650; }
.band-full { --c: #1f6f4a; }
.score-band[class*="band-"] { color: var(--c); }
.score-note { font-size: .875rem; color: var(--muted); margin: .25rem 0 0; }
details.breakdown { margin-top: .5rem; }
details.breakdown summary { cursor: pointer; color: var(--teal-dark); font-weight: 700; min-height: 32px; }
.item-list { list-style: none; padding: 0; margin: .5rem 0 0; }
.item-list li { display: flex; align-items: center; gap: .6rem; padding: .4rem 0; border-bottom: 1px solid var(--line-soft); }
.item-list .mark { flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .85rem; }
.item-list .yes .mark { background: var(--ok-bg); color: var(--ok); }
.item-list .no .mark { background: var(--danger-bg); color: var(--danger); }
.item-list .pts { margin-inline-start: auto; font-weight: 500; direction: ltr; unicode-bidi: isolate; color: var(--muted); white-space: nowrap; }

.form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem 1.7rem; }
.step-kicker { margin: 0 0 .1rem; color: var(--teal-dark); font-weight: 700; font-size: .95rem; }
.form-card h2 { font-size: 1.6rem; margin-bottom: .2rem; }
.step-intro { color: var(--muted); font-size: 1.05rem; margin-bottom: .8rem; }
.step-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; padding-bottom: 1rem; margin-bottom: .4rem; border-bottom: 1px solid var(--line-soft); font-size: .95rem; }
.req-note { margin-inline-start: auto; color: var(--muted); font-size: .875rem; }
.chip { display: inline-flex; align-items: center; gap: .4rem; background: var(--teal-50); border-radius: var(--radius-sm); padding: .05rem .8rem; font-weight: 700; color: var(--teal-dark); }
.field { margin-block: 1.15rem; }
.field input, .field select, .field textarea, .field fieldset, .field.help-q, fieldset.field { scroll-margin-top: 6.5rem; }
@media (max-width: 47.99rem) { .field input, .field select, .field textarea, fieldset.field { scroll-margin-top: 1rem; } }
.field label, .field legend { display: block; font-weight: 700; font-size: 1.05rem; margin-bottom: .2rem; padding: 0; color: var(--navy); }
.field .req { color: var(--danger); }
.field .opt { color: var(--muted); font-weight: 400; font-size: .9rem; }
.hint { color: var(--muted); font-size: .92rem; margin-bottom: .4rem; line-height: 1.7; }
input[type="text"], input[type="date"], input[type="time"], select, textarea {
  font: inherit; width: 100%; min-height: 52px; padding: .6rem .9rem; color: var(--ink);
  background: #fff; border: 1.5px solid var(--control); border-radius: var(--radius-sm);
  transition: border-color .15s;
}
textarea { resize: vertical; line-height: 1.85; }
input:focus, select:focus, textarea:focus { border-color: var(--teal); outline: 3px solid rgba(13, 107, 100, .25); outline-offset: 0; }
[aria-invalid="true"] { border: 2px solid var(--danger) !important; background: #fffafa; }
fieldset.field { border: 0; padding: 0; margin-inline: 0; min-width: 0; }
.field .choice { display: flex; align-items: flex-start; gap: .65rem; font-size: 1rem; font-weight: 500; color: var(--ink); min-height: 52px; padding: .6rem .9rem; border: 1.5px solid var(--line); border-radius: var(--radius-sm); margin-bottom: .5rem; cursor: pointer; background: #fff; }
.field .choice:hover { border-color: var(--teal); }
.field .choice:has(input:checked) { border-color: var(--teal); background: var(--teal-50); }
.field .choice input { width: 1.3rem; height: 1.3rem; margin: .32rem 0 0; flex: none; accent-color: var(--teal); }
.error { position: relative; color: var(--danger-dark); font-weight: 700; margin: .4rem 0 0; font-size: .95rem; padding-inline-start: 1.6rem; }
.error::before { content: ""; position: absolute; inset-inline-start: 0; top: .3rem; width: 1.15rem; height: 1.15rem; background: var(--danger); -webkit-mask: var(--i-warn) center / contain no-repeat; mask: var(--i-warn) center / contain no-repeat; }
.warn { display: flex; gap: .5rem; align-items: flex-start; color: var(--warn-ink); background: var(--warn-bg); border-radius: var(--radius-sm); padding: .45rem .75rem; margin: .45rem 0 0; font-size: .92rem; line-height: 1.7; }
.warn .ico { margin-top: .2rem; }
.err-summary { background: var(--danger-bg); border: 1.5px solid var(--danger); border-radius: var(--radius-sm); padding: .8rem 1.1rem; margin-bottom: 1rem; }
.err-summary ul { margin: .3rem 0 0; padding-inline-start: 1.2rem; }
.summary-list { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.1rem; margin: 0; }
.summary-list dt { font-weight: 500; color: var(--muted); }
.summary-list dd { margin: 0; overflow-wrap: anywhere; font-weight: 500; }
.form-card .card { background: var(--paper); border-color: var(--line-soft); }
.form-nav { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--line-soft); align-items: center; }
.form-nav .spacer { flex: 1; }

/* ---------- النتيجة: 1) الاكتمال 2) نص الشكوى 3) القناة الرسمية 4) الخطوة التالية ---------- */
.score-box { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1.2rem 1.6rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.5rem; margin-bottom: 1.75rem; }
.score-ring { --p: 0; --c: var(--teal); position: relative; flex: none; width: 6.75rem; height: 6.75rem; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--line-soft) 0); }
.score-ring::before { content: ""; position: absolute; inset: .6rem; border-radius: 50%; background: var(--surface); }
.ring-num { position: relative; font-size: 1.65rem; font-weight: 700; color: var(--navy); direction: ltr; }
.score-main { flex: 1 1 16rem; min-width: 0; }
.score-title { font-size: 1.2rem; margin-bottom: .1rem; }
.score-main .score-band { font-size: 1.05rem; }
.missing { margin-top: .8rem; padding: .7rem 1rem .4rem; background: var(--warn-bg); border-radius: var(--radius-sm); color: var(--warn-ink); }
.missing-title { font-weight: 700; margin-bottom: .1rem; }
.missing .item-list { margin-top: 0; }
.missing .item-list li:last-child { border-bottom: 0; }

.result-grid { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 60rem) {
  .result-grid { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 2rem; }
}
/* عمود القناة الرسمية أصبح أطول (يتضمن سبب الاقتراح والمؤقت)، فلا يُثبَّت إلا في الشاشات الطويلة حتى لا يُحجب أسفله */
@media (min-width: 60rem) and (min-height: 62rem) {
  .result-side { position: sticky; top: 6.5rem; }
}
/* نص الشكوى هو أثقل عنصر بصريًا في الشاشة */
.draft { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-md); overflow: hidden; }
.draft-head { padding: 1.25rem 1.6rem .75rem; }
.draft-head h2 { font-size: 1.5rem; margin-bottom: .1rem; }
.draft-head p { margin: 0; }
.letter { background: #fffdf8; border-block: 1px solid var(--line); padding: 1.75rem 2rem; white-space: pre-wrap; line-height: 2.1; overflow-wrap: anywhere; font-size: 1.1rem; }
.action-bar { display: flex; flex-wrap: wrap; gap: .6rem; padding: 1rem 1.6rem 1.25rem; align-items: center; }
#save-info { margin-top: 1rem; }
.mine-text .letter { border: 1px solid var(--line); border-radius: var(--radius-sm); }

/* القناة الرسمية: أخف وزنًا من المسودة، والخطوة التالية بارزة داخلها */
.route-card { background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--teal); border-radius: var(--radius); padding: 1.3rem 1.4rem; }
.route-head { display: flex; gap: .9rem; align-items: flex-start; margin-bottom: .9rem; }
.route-head p { margin: 0; }
.route-ico { flex: none; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--teal-50); color: var(--teal-dark); }
.route-ico .ico { width: 1.5rem; height: 1.5rem; }
.route-kicker { font-size: .85rem; font-weight: 700; color: var(--teal-dark); }
.route-card h2 { font-size: 1.2rem; margin-bottom: .1rem; }
.next-action { background: var(--gold-50); border-inline-start: 4px solid var(--gold); border-radius: var(--radius-sm); padding: .8rem 1.1rem; margin-bottom: 1rem; }
.next-kicker { margin: 0; font-size: .85rem; font-weight: 700; color: var(--gold-dark); }
.next-text { margin: 0; font-weight: 700; color: var(--ink); line-height: 1.75; }
.route-contact { display: flex; flex-wrap: wrap; gap: .6rem; margin-block: .8rem; }
.route-url { word-break: break-all; }
.route-steps { margin: .4rem 0 .8rem; padding-inline-start: 1.4rem; font-size: .975rem; }
.route-steps li { margin-bottom: .4rem; padding-inline-start: .2rem; }
.route-steps li::marker { color: var(--teal-dark); font-weight: 700; }
.route-note { font-size: .95rem; }
.route-esc { background: var(--paper); border: 1px dashed var(--control); border-radius: var(--radius-sm); padding: .9rem 1.1rem .4rem; margin-block: 1rem; }
.route-esc .sub-title { margin-top: 0; }
.route-reminder { margin: 1rem 0 0; padding-top: .8rem; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: .9rem; }
.ref-badge { display: inline-block; direction: ltr; unicode-bidi: isolate; background: var(--line-soft); padding: .05rem .7rem; border-radius: 6px; font-weight: 700; letter-spacing: .04em; }
.badge-demo { background: var(--warn-bg); color: var(--warn-ink); border: 1px solid #b99a44; border-radius: 999px; padding: 0 .65rem; font-size: .85rem; font-weight: 700; }

/* ---------- شكاواي ---------- */
.mine-list { display: grid; gap: 1rem; }
.mine-card { background: var(--surface); border: 1px solid var(--line); border-inline-start: 4px solid var(--teal); border-radius: var(--radius); padding: 1.15rem 1.35rem; }
.mine-top { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; }
.mine-top h2 { margin: 0; }
.mine-meta { color: var(--muted); font-size: .92rem; margin: .3rem 0; line-height: 1.8; }
.mine-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .8rem 1.2rem; margin-block: .6rem; }
.mine-fields .field { margin: 0; }
.mine-text { margin-top: .6rem; }
.mine-text summary { cursor: pointer; font-weight: 700; color: var(--teal-dark); min-height: 32px; }
.empty { text-align: center; background: var(--surface); border: 1.5px dashed var(--control); border-radius: var(--radius); padding: 2.75rem 1.2rem; }
.empty-ico { margin: 0 auto .8rem; color: var(--teal); display: block; }
.empty-ico .ico { width: 3rem; height: 3rem; }
.empty h2 { margin-bottom: .3rem; }
.empty p { color: var(--muted); max-width: 30rem; margin-inline: auto; margin-bottom: 1.1rem; }

/* ---------- عن التطبيق: أقسام مرقّمة بفواصل رفيعة ---------- */
.about-sec { padding-block: 1.6rem; border-top: 1px solid var(--line); }
.about-sec h2 { display: flex; align-items: center; gap: .7rem; margin-bottom: .8rem; }
.sec-num { flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: var(--navy); color: #e3c274; display: grid; place-items: center; font-size: 1rem; font-weight: 700; line-height: 1; }
.about-sec p, .about-sec ul, .about-sec ol { max-width: 46rem; }
.how-list { padding-inline-start: 1.4rem; margin: 0; }
.how-list li { margin-bottom: .45rem; padding-inline-start: .25rem; }
.how-list li::marker { color: var(--teal-dark); font-weight: 700; }
.tech-list { list-style: none; padding: 0; margin: 0; }
.tech-list li { position: relative; padding-inline-start: 1.5rem; margin-bottom: .4rem; }
.tech-list li::before { content: ""; position: absolute; inset-inline-start: .25rem; top: .8em; width: .45rem; height: .45rem; background: var(--gold); transform: rotate(45deg); }
.org-card { display: flex; align-items: center; gap: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1.2rem; max-width: 46rem; margin-bottom: 1rem; }
.org-card .org-logo { width: 56px; height: 56px; }
.org-card .org-text strong { font-size: 1.05rem; }
.org-disclaimer { max-width: 46rem; margin: 0; background: var(--gold-50); border-inline-start: 4px solid var(--gold); border-radius: var(--radius-sm); padding: .9rem 1.2rem; font-weight: 500; font-size: 1.05rem; color: var(--ink); }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
table { border-collapse: collapse; width: 100%; min-width: 30rem; }
th, td { padding: .65rem .9rem; border-bottom: 1px solid var(--line-soft); text-align: start; }
tbody tr:last-child > * { border-bottom: 0; }
thead th { background: var(--navy); color: #fff; font-weight: 700; }
tbody th { color: var(--navy); font-weight: 700; }
.sub-title { margin-top: 1.2rem; font-size: 1.05rem; }
.review-date { margin: .3rem 0 0; font-size: .8rem; color: var(--muted); }

/* ---------- تذييل وتنبيه وحوار ---------- */
.site-footer { background: var(--navy); color: rgba(255, 255, 255, .88); padding-block: 1.2rem; font-size: .925rem; text-align: center; border-top: 3px solid var(--gold); }
.site-footer p { margin: 0; }
.toast { position: fixed; inset-inline: 1rem; bottom: 1.2rem; margin-inline: auto; max-width: 26rem; background: var(--navy); color: #fff; padding: .8rem 1.2rem; border-radius: var(--radius-sm); text-align: center; box-shadow: var(--shadow-md); z-index: 60; border-bottom: 3px solid var(--gold); transition: opacity .2s; }
.toast:not(.show) { opacity: 0; pointer-events: none; }
dialog { border: 0; border-radius: var(--radius); padding: 1.5rem; max-width: min(92vw, 28rem); box-shadow: 0 10px 40px rgba(0, 0, 0, .35); font-family: var(--font); color: var(--ink); border-top: 4px solid var(--gold); }
dialog::backdrop { background: rgba(10, 33, 64, .6); }
dialog h2 { margin-bottom: .5rem; }

@media (max-width: 560px) {
  main { padding-block: 1rem 2.25rem; }
  .site-header { position: static; }
  .nav-link { padding: .2rem .6rem; font-size: .95rem; }
  body { font-size: 1.0625rem; }
  .brand-text { font-size: 1.35rem; }
  .org-logo { width: 34px; height: 34px; }
  .org-in { padding-block: .3rem; }
  .stepper li { font-size: .8rem; }
  .stepper li:not(:last-child)::after { inset-inline-start: calc(50% + 1.3rem); width: calc(100% - 2.6rem); }
  .stepper .s-num { width: 2rem; height: 2rem; }
  .stepper li:not(:last-child)::after { top: 1rem; }
  .summary-list { grid-template-columns: 1fr; }
  .summary-list dd { margin-bottom: .4rem; }
  .btn-row .btn, .form-nav .btn { flex: 1 1 auto; }
  .form-card { padding: 1.15rem 1rem; }
  .req-note { margin-inline-start: 0; flex-basis: 100%; }
  .route-card, .panel, .card { padding-inline: 1rem; }
  .score-box { padding: 1.1rem 1rem; }
  .draft-head { padding-inline: 1rem; }
  .letter { padding: 1.2rem 1rem; }
  .action-bar { padding-inline: 1rem; }
  .action-bar .btn { flex: 1 1 auto; }
  .hero h1 { font-size: 1.85rem; }
  .hero-lead { font-size: 1.08rem; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- ماذا أجهز قبل التقديم؟ ---------- */
.prep { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.15rem 1.4rem .9rem; margin-top: 1.25rem; }
.prep-title { display: flex; align-items: center; gap: .5rem; font-size: 1.2rem; margin-bottom: .1rem; }
.prep-title .ico { color: var(--teal-dark); }
.prep-intro { color: var(--muted); margin-bottom: .2rem; }
.prep-list { list-style: none; padding: 0; margin: 0; }
.prep-list li { display: flex; align-items: center; gap: .6rem; padding: .35rem 0; border-bottom: 1px solid var(--line-soft); }
.prep-list .mark { flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .85rem; border: 1.5px solid var(--control); color: var(--muted); background: var(--surface); }
.prep-yes .mark { background: var(--ok-bg); color: var(--ok); border-color: var(--ok); }
.prep-attn .mark { background: var(--warn-bg); color: var(--warn-ink); border-color: #b99a44; }
.prep-label { flex: 1 1 auto; min-width: 0; font-weight: 500; }
.prep-state { flex: none; margin-inline-start: auto; font-size: .85rem; color: var(--muted); text-align: end; max-width: 46%; line-height: 1.5; }
.prep-yes .prep-state { color: var(--ok); font-weight: 700; }
.prep-attn .prep-state { color: var(--warn-ink); }
.prep-note { margin: .6rem 0 0; }

/* ---------- مصدر المعلومة الرسمي (داخل بطاقة التوجيه) ---------- */
.source-ev { margin-top: 1rem; padding: .75rem 1rem; background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); }
.source-kicker { display: flex; align-items: center; gap: .4rem; margin: 0; font-size: .85rem; font-weight: 700; color: var(--teal-dark); }
.source-name { margin: .1rem 0 .4rem; font-weight: 500; }
.source-row { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem; margin-bottom: .3rem; }
.source-disc { margin: 0; }

/* ---------- الخط الزمني لحالة الشكوى (شكاواي) ---------- */
.timeline { --dot: 1.75rem; list-style: none; margin: .8rem 0 .4rem; padding: 0; display: flex; }
.timeline li { flex: 1 1 0; min-width: 0; position: relative; display: flex; flex-direction: column; align-items: center; gap: .35rem; text-align: center; }
.tl-dot { position: relative; z-index: 1; width: var(--dot); height: var(--dot); border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--control); background: var(--surface); color: var(--muted); font-size: .85rem; font-weight: 700; }
.tl-done .tl-dot { background: var(--teal); border-color: var(--teal); color: #fff; }
.tl-current .tl-dot { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: 0 0 0 3px var(--gold-50), 0 0 0 4px var(--gold); }
.tl-text { display: flex; flex-direction: column; align-items: center; gap: .1rem; line-height: 1.5; }
.tl-label { font-size: .92rem; font-weight: 500; color: var(--muted); }
.tl-done .tl-label { color: var(--ink); }
.tl-current .tl-label { font-weight: 700; color: var(--navy); }
.tl-tag { font-size: .78rem; font-weight: 700; color: var(--gold-dark); background: var(--gold-50); border-radius: 999px; padding: 0 .6rem; }
.timeline li:not(:last-child)::after { content: ""; position: absolute; top: calc(var(--dot) / 2 - 1px); height: 2px; background: var(--line); inset-inline-start: calc(50% + var(--dot) / 2 + 4px); inset-inline-end: calc(-50% + var(--dot) / 2 + 4px); }
.timeline li.tl-done:not(:last-child)::after { background: var(--teal); }
@media (max-width: 560px) {
  .timeline { flex-direction: column; }
  .timeline li { flex-direction: row; align-items: flex-start; gap: .7rem; text-align: start; min-height: 2.6rem; }
  .tl-text { align-items: flex-start; flex-direction: row; flex-wrap: wrap; gap: .1rem .6rem; padding-top: .15rem; }
  .timeline li:not(:last-child)::after { top: calc(var(--dot) + 3px); bottom: -3px; height: auto; width: 2px; inset-inline-start: calc(var(--dot) / 2 - 1px); inset-inline-end: auto; }
}

/* ==========================================================================
   تحسينات المرحلة الأخيرة (تندمج في الهوية الحالية: بطاقات وحدود وألوان كما هي)
   ========================================================================== */
.pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0 1rem; }
.pair .field { margin-block: .5rem; }

/* ---------- مؤقت الـ48 ساعة (خطوة المعالج + النتيجة) ---------- */
.when-box { background: var(--paper); border: 1px solid var(--line-soft) !important; border-radius: var(--radius); padding: .9rem 1.1rem 1rem !important; }
.when-box legend { padding-inline: .3rem; }
.timer-card { background: var(--surface); border: 1px solid var(--line); border-inline-start: 4px solid var(--teal); border-radius: var(--radius-sm); padding: .8rem 1rem .7rem; margin-top: .6rem; }
.timer-card.is-done { border-inline-start-color: var(--gold); background: var(--gold-50); }
.timer-row { display: flex; gap: .8rem; align-items: flex-start; }
.timer-ico { flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--teal-50); color: var(--teal-dark); }
.timer-card.is-done .timer-ico { background: var(--surface); color: var(--gold-dark); }
.timer-ico .ico { width: 1.35rem; height: 1.35rem; }
.timer-text { min-width: 0; }
.timer-main { margin: 0; font-weight: 700; color: var(--navy); line-height: 1.6; }
.timer-sub { margin: 0; font-size: .95rem; line-height: 1.7; }
.timer-card .bar { margin-block: .55rem .35rem; }
.timer-card.is-done .bar > span { background: var(--gold-dark); }
.timer-note { margin: 0; }
.timer-card.is-compact { margin-top: .3rem; padding-block: .65rem .55rem; }

/* ---------- جاهزية ملف الشكوى: الأبعاد الخمسة ---------- */
.dim-list { list-style: none; padding: 0; margin: .7rem 0 .5rem; }
.dim-list li { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; padding: .55rem 0; border-bottom: 1px solid var(--line-soft); }
.dim-mark { flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .9rem; border: 1.5px solid var(--control); color: var(--muted); background: var(--surface); }
.dim-done .dim-mark { background: var(--ok-bg); color: var(--ok); border-color: var(--ok); }
.dim-todo .dim-mark { background: var(--warn-bg); color: var(--warn-ink); border-color: #b99a44; }
.dim-body { flex: 1 1 11rem; min-width: 0; }
.dim-label { margin: 0; font-weight: 700; color: var(--navy); line-height: 1.6; }
.dim-sub { margin: 0; font-size: .875rem; color: var(--muted); line-height: 1.6; }
.dim-state { flex: none; font-size: .85rem; font-weight: 700; border-radius: 999px; padding: 0 .7rem; line-height: 1.7; background: var(--line-soft); color: var(--muted); }
.dim-done .dim-state { background: var(--ok-bg); color: var(--ok); }
.dim-todo .dim-state { background: var(--warn-bg); color: var(--warn-ink); }
.dim-pts { flex: none; min-width: 3.2rem; text-align: end; color: var(--muted); font-weight: 500; font-size: .9rem; unicode-bidi: isolate; }
.dim-fix { font-size: .9rem; }
.item-list .na .mark { background: var(--line-soft); color: var(--muted); }
.item-list .na { color: var(--muted); }

/* ---------- كيف تجعل شكواك أوضح؟ ---------- */
.coach { margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid var(--line-soft); }
.coach-title { font-size: 1.05rem; margin-bottom: .3rem; color: var(--teal-dark); }
.coach-list { list-style: none; padding: 0; margin: 0 0 .4rem; }
.coach-list li { position: relative; padding-inline-start: 1.5rem; margin-bottom: .25rem; line-height: 1.75; }
.coach-list li::before { content: ""; position: absolute; inset-inline-start: .25rem; top: .7em; width: .55rem; height: .55rem; border-radius: 50%; background: var(--gold); }
.coach-none { margin: 0 0 .4rem; color: var(--muted); }
.coach-note { margin: 0; }

/* ---------- لماذا تم اقتراح هذه الجهة؟ ---------- */
.why { background: var(--paper); border: 1px solid var(--line-soft); border-inline-start: 4px solid var(--gold); border-radius: var(--radius-sm); padding: .8rem 1.1rem .5rem; margin-block: 0 1rem; }
.why-title { display: flex; align-items: center; gap: .5rem; font-size: 1.05rem; margin-bottom: .3rem; }
.why-title .ico { color: var(--teal-dark); }
.why-text { margin: 0 0 .6rem; line-height: 1.85; }
.why-note { margin: .6rem 0 .2rem; }
#em-why { margin-top: 1.25rem; }
#em-why:empty { display: none; }

/* ---------- النسخة المختصرة ---------- */
.short { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.4rem .9rem; margin-top: 1.25rem; }
.short-title { display: flex; align-items: center; gap: .5rem; font-size: 1.2rem; margin-bottom: .1rem; }
.short-title .ico { color: var(--teal-dark); }
.short-text { background: #fffdf8; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .9rem 1.1rem; margin-block: .6rem; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 2; }
.short-bar { padding: 0 0 .3rem; }
.pg-inline { display: flex; gap: .5rem; align-items: flex-start; margin: 0; padding: 0 1.6rem 1.1rem; line-height: 1.7; }
.pg-inline .ico { margin-top: .2rem; color: var(--gold-dark); }

/* ---------- حارس الخصوصية (حوار التنبيه) ---------- */
.pg-dlg { max-width: min(92vw, 32rem); }
.pg-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .4rem; }
.pg-head h2 { margin: 0; }
.pg-ico { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--gold-50); color: var(--gold-dark); border: 1px solid var(--gold); }
.pg-ico .ico { width: 1.4rem; height: 1.4rem; }
.pg-list { margin: .3rem 0 .6rem; padding-inline-start: 1.3rem; font-size: .95rem; }
.pg-list li { margin-bottom: .3rem; }
.pg-local { margin-bottom: .2rem; }
.pg-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .9rem; }
@media (max-width: 560px) { .pg-actions .btn { flex: 1 1 100%; } }

/* ---------- سجل المتابعة الشخصي (شكاواي) ---------- */
.flog { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line-soft); }
.flog-title { font-size: 1.05rem; margin-bottom: .1rem; color: var(--teal-dark); }
.flog > p { margin-bottom: .5rem; }
.flog-list { list-style: none; padding: 0; margin: .6rem 0 .8rem; }
.flog-list li { position: relative; display: flex; gap: .6rem; align-items: flex-start; padding: 0 0 .85rem; padding-inline-start: 1.6rem; }
.flog-list li::before { content: ""; position: absolute; inset-inline-start: calc(.45rem - 1px); top: 1.15rem; bottom: -.15rem; width: 2px; background: var(--line); }
.flog-list li:last-child::before { display: none; }
.flog-dot { position: absolute; inset-inline-start: 0; top: .5rem; width: .9rem; height: .9rem; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--teal); }
.flog-body { flex: 1; min-width: 0; }
.flog-when { margin: 0; font-size: .85rem; color: var(--muted); font-weight: 500; }
.flog-text { margin: 0; overflow-wrap: anywhere; }
.flog-del { flex: none; font-size: .9rem; min-height: 32px; color: var(--danger-dark); }
.flog-empty { margin: .3rem 0 .8rem; }
.flog-form { background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: .3rem 1rem 1rem; }
.flog-form .field { margin-block: .7rem .3rem; }
.flog-form .error { margin-bottom: .5rem; }

/* ---------- مؤشر الثقة (التذييل) ---------- */
.foot-trust { margin-top: .5rem; font-size: .85rem; line-height: 1.8; color: rgba(255, 255, 255, .82); }
.foot-trust .ico { width: 1.05em; height: 1.05em; margin-inline-end: .3rem; color: #e3c274; }
.foot-trust strong { color: #fff; }

/* ---------- مركز إمكانية الوصول (مدمج وغير بارز) ---------- */
.header-in { position: relative; }
.a11y-btn { font-size: .875rem; color: rgba(255, 255, 255, .82); }
.a11y-btn .ico { width: 1.1em; height: 1.1em; }
.a11y-btn[aria-expanded="true"] { color: #fff; border-bottom-color: var(--gold); }
.a11y-panel { position: absolute; top: calc(100% + .3rem); inset-inline-end: 0; z-index: 40; width: min(19rem, 100%); background: #fff; color: var(--ink); border: 1px solid var(--line); border-top: 3px solid var(--gold); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: .8rem 1rem .9rem; }
.a11y-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .3rem; }
.a11y-head h2 { font-size: 1.05rem; margin: 0; }
.a11y-set { border: 0; padding: 0; margin: 0 0 .4rem; min-width: 0; }
.a11y-set legend { font-weight: 700; font-size: .95rem; color: var(--navy); padding: 0; margin-bottom: .3rem; }
.a11y-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; }
.a11y-seg label { position: relative; display: block; }
.a11y-seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.a11y-seg span { display: grid; place-items: center; min-height: 44px; border: 1.5px solid var(--control); border-radius: var(--radius-sm); font-weight: 500; background: #fff; }
.a11y-seg input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 700; }
.a11y-seg input:focus-visible + span { outline: 3px solid #1b8c83; outline-offset: 2px; }
.a11y-toggle { display: flex; align-items: center; gap: .65rem; min-height: 44px; font-weight: 500; cursor: pointer; }
.a11y-toggle input { width: 1.3rem; height: 1.3rem; margin: 0; accent-color: var(--teal); flex: none; }
.a11y-note { margin: .3rem 0 0; font-size: .8rem; color: var(--muted); }
@media (max-width: 560px) { .a11y-panel { top: 100%; } }

/* حجم النص (يتبع rem كل التخطيط) */
html[data-fs="large"] { font-size: 112.5%; }
html[data-fs="xlarge"] { font-size: 125%; }
/* تقليل الحركة (يُفعَّل تلقائيًا إن طلبه النظام، أو يدويًا من مركز إمكانية الوصول) */
html[data-motion="reduce"] *, html[data-motion="reduce"] *::before, html[data-motion="reduce"] *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
/* تباين مرتفع: ألوان أغمق وحدود أوضح مع الحفاظ على الهوية */
html[data-contrast="high"] {
  --paper: #ffffff; --ink: #000000; --muted: #1a1a1a; --line: #2b2b2b; --line-soft: #6a6a6a; --control: #1a1a1a;
  --navy: #051429; --navy-2: #0a2140; --teal: #004a45; --teal-dark: #003a36; --teal-50: #e3f1ef;
  --gold-dark: #4a3505; --warn-ink: #3b2a00; --info-bg: #eef3f9; --danger: #8f1a13; --danger-dark: #6e1310; --ok: #114d31;
}
html[data-contrast="high"] a { text-decoration: underline; text-decoration-thickness: 2px; }
html[data-contrast="high"] .nav-link, html[data-contrast="high"] .btn, html[data-contrast="high"] .brand { text-decoration: none; }
html[data-contrast="high"] .card, html[data-contrast="high"] .panel, html[data-contrast="high"] .form-card, html[data-contrast="high"] .score-box,
html[data-contrast="high"] .draft, html[data-contrast="high"] .route-card, html[data-contrast="high"] .prep, html[data-contrast="high"] .short,
html[data-contrast="high"] .mine-card, html[data-contrast="high"] .cat-card, html[data-contrast="high"] .score-mini, html[data-contrast="high"] .timer-card,
html[data-contrast="high"] .why, html[data-contrast="high"] .a11y-panel { border-color: #000; border-width: 2px; }
html[data-contrast="high"] .org-text span, html[data-contrast="high"] .hint, html[data-contrast="high"] .muted { color: #1a1a1a; }
html[data-contrast="high"] input, html[data-contrast="high"] select, html[data-contrast="high"] textarea { border-color: #000; border-width: 2px; }
html[data-contrast="high"] :focus-visible { outline: 4px solid #000; outline-offset: 3px; box-shadow: 0 0 0 7px #fff; }
html[data-contrast="high"] .site-header :focus-visible, html[data-contrast="high"] .site-footer :focus-visible, html[data-contrast="high"] .demo-banner :focus-visible { outline-color: #fff; box-shadow: 0 0 0 7px #000; }
html[data-contrast="high"] .brand-text small, html[data-contrast="high"] .foot-trust, html[data-contrast="high"] .a11y-btn { color: #fff; }

/* ---------- الطباعة: «ملف الشكوى» مستند A4 عربي نظيف (بلا أزرار أو تنقل أو خلفيات، مناسب للطباعة بالأبيض والأسود) ---------- */
#print-area { display: none; }
@media print {
  @page { size: A4; margin: 16mm 18mm; }
  html, body { background: #fff !important; display: block; color: #000; min-height: 0; }
  body > *:not(#print-area) { display: none !important; }
  #print-area { display: block !important; font-family: var(--font); font-size: 12pt; line-height: 1.8; color: #000; }
  #print-area p { margin: 0 0 3pt; }
  #print-area .p-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12pt; border-bottom: 2pt solid #000; padding-bottom: 8pt; margin-bottom: 8pt; }
  #print-area .p-brand { margin: 0; font-size: 12pt; font-weight: 700; line-height: 1.4; }
  #print-area h1 { margin: 0; font-size: 22pt; line-height: 1.3; color: #000; }
  #print-area .p-date { margin: 0; font-size: 10.5pt; white-space: nowrap; }
  #print-area .p-sec { margin-top: 12pt; break-inside: avoid; }
  #print-area .p-letter-sec { break-inside: auto; }
  #print-area h2 { margin: 0 0 4pt; font-size: 13pt; font-weight: 700; color: #000; border-bottom: .75pt solid #000; padding-bottom: 2pt; break-after: avoid; }
  #print-area .p-dl { display: grid; grid-template-columns: max-content 1fr; gap: 2pt 14pt; margin: 0; }
  #print-area .p-dl dt { font-weight: 700; }
  #print-area .p-dl dd { margin: 0; overflow-wrap: anywhere; }
  #print-area .p-dl dd.p-ltr { text-align: end; justify-self: start; unicode-bidi: isolate; }
  #print-area .p-score { font-size: 20pt; font-weight: 700; line-height: 1.4; }
  #print-area .p-small { font-size: 10.5pt; line-height: 1.7; }
  #print-area .p-letter { white-space: pre-wrap; font-size: 12pt; line-height: 1.95; }
  #print-area .p-checks { list-style: none; margin: 4pt 0 0; padding: 0; }
  #print-area .p-checks li { display: flex; align-items: baseline; gap: 8pt; padding: 1.5pt 0; break-inside: avoid; }
  #print-area .p-box { flex: none; display: inline-block; width: 11pt; height: 11pt; border: 1pt solid #000; line-height: 9.5pt; text-align: center; font-size: 9.5pt; font-weight: 700; }
  #print-area .p-check-label { flex: 1 1 auto; }
  #print-area .p-check-state { flex: none; font-size: 10pt; }
  #print-area .p-step-title { margin-top: 5pt; font-weight: 700; }
  #print-area .p-dims { list-style: none; margin: 2pt 0 4pt; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1pt 18pt; font-size: 10.5pt; line-height: 1.6; }
  #print-area .p-dims li { display: flex; justify-content: space-between; gap: 8pt; break-inside: avoid; }
  #print-area .p-dim-state { flex: none; font-weight: 700; }
  #print-area .p-foot { margin-top: 16pt; padding-top: 6pt; border-top: .75pt solid #000; font-size: 10pt; line-height: 1.7; break-inside: avoid; }
}

/* ==========================================================================
   النسخة 2: قائمة الموبايل، الصفحة الرئيسية، حالة الحفظ، النتيجة، شكاواي، التصدير، التحديث
   ========================================================================== */

/* ---------- قائمة الترويسة على الموبايل: الطوارئ ظاهرة دائمًا، والباقي داخل «القائمة» ---------- */
@media (max-width: 47.99rem) {
  .header-in { gap: .3rem .6rem; }
  .brand-text small { display: none; }
  .js .nav-link.nav-toggle { display: inline-flex; border: 1.5px solid rgba(255, 255, 255, .5); border-radius: var(--radius-sm); }
  .js .nav-link.nav-toggle[aria-expanded="true"] { background: rgba(255, 255, 255, .14); border-color: #fff; }
  .js .nav-more { display: none; position: absolute; top: 100%; inset-inline: -1rem; flex-direction: column; align-items: stretch; flex-wrap: nowrap;
    background: var(--navy); border-top: 1px solid rgba(255, 255, 255, .2); border-bottom: 3px solid var(--gold); padding: .3rem 1rem .6rem; z-index: 35; box-shadow: var(--shadow-md); gap: 0; }
  .js .nav-more.is-open { display: flex; }
  .js .nav-more .nav-link { justify-content: flex-start; min-height: 48px; border-bottom: 1px solid rgba(255, 255, 255, .12); font-size: 1rem; }
  .js .nav-more .nav-link:last-child { border-bottom: 0; }
  .a11y-panel { top: 100%; inset-inline: 0; width: auto; }
}
@media (max-width: 23rem) { .brand-text { font-size: 1.2rem; } .nav-link { padding-inline: .45rem; } }

/* ---------- بطاقة المسودة (الرئيسية) ---------- */
.draft-card { background: var(--surface); border: 1px solid var(--line); border-inline-start: 5px solid var(--gold); border-radius: var(--radius); padding: 1rem 1.3rem .4rem; margin-top: 1.75rem; box-shadow: var(--shadow-sm); }
.draft-card.is-demo { border-inline-start-color: #b99a44; background: var(--warn-bg); }
.dc-kicker { margin: 0; font-size: .875rem; font-weight: 700; color: var(--gold-dark); }
.draft-card h2 { font-size: 1.2rem; margin: .1rem 0 .3rem; }
.dc-meta { margin: 0 0 .3rem; color: var(--muted); font-size: .95rem; }
.draft-card .btn-row { margin-block: .6rem .8rem; }

/* ---------- حالة الحفظ ولوحة الخصوصية ---------- */
.save-status { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; background: var(--surface); border: 1px solid var(--line); border-inline-start: 4px solid var(--control); border-radius: var(--radius-sm); padding: .45rem .9rem; margin-bottom: .8rem; font-size: .93rem; line-height: 1.6; color: var(--ink); }
.save-status .ico { width: 1.2em; height: 1.2em; flex: none; }
.save-status.is-ok { border-inline-start-color: var(--teal); }
.save-status.is-ok .ico { color: var(--teal); }
.save-status.is-shared, .save-status.is-demo { border-inline-start-color: #b99a44; background: var(--warn-bg); color: var(--warn-ink); }
.save-status.is-fail { border-inline-start-color: var(--danger); background: var(--danger-bg); font-weight: 700; }
.save-status.is-fail .ico { color: var(--danger); }
.save-text { flex: 1 1 14rem; }
.save-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.privacy-panel { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: .4rem .9rem .5rem; margin-bottom: .9rem; }
.privacy-panel .hint { margin: 0 0 .3rem; }
.privacy-panel .a11y-toggle { min-height: 44px; font-weight: 700; color: var(--navy); }
.stored-note { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; background: var(--gold-50); border-radius: var(--radius-sm); padding: .4rem .7rem; margin-block: .3rem; font-size: .93rem; }
#cat-privacy { margin-top: 1.25rem; }
#cat-privacy .privacy-panel { max-width: 46rem; }
.help-link { margin: 1.25rem 0 0; }
.mode-badge { display: inline-flex; align-items: center; gap: .3rem; border-radius: 999px; padding: 0 .7rem; margin-inline-start: .4rem; font-size: .85rem; font-weight: 700; border: 1px solid var(--control); background: var(--surface); color: var(--navy); }
.mode-badge.is-edit { background: var(--teal-50); border-color: var(--teal); color: var(--teal-dark); }
.mode-badge .ref-badge { font-size: .8rem; padding-inline: .4rem; }
.legacy-note { font-size: .95rem; }
.legacy-note summary { cursor: pointer; font-weight: 700; }
.legacy-note .letter { margin-top: .6rem; border: 1px solid var(--line); border-radius: var(--radius-sm); max-height: 14rem; overflow: auto; font-size: 1rem; padding: 1rem; }
.plan-list { margin: .3rem 0 .6rem; padding-inline-start: 1.2rem; }
.plan-clear li::marker { color: var(--danger); content: "✕  "; }
.plan-keep li::marker { color: var(--ok); content: "✓  "; }
.dlg-body p { margin: 0 0 .6rem; }
.dlg-actions { margin-top: 1rem; }
.dlg-actions .btn { flex: 1 1 auto; }

/* ---------- وسوم مطلوب/اختياري (لا تعتمد على اللون وحده) ---------- */
.req-tag { display: inline-block; border-radius: 6px; padding: 0 .45rem; font-size: .78rem; font-weight: 700; line-height: 1.6; vertical-align: .05em; }
.req-tag.is-req { border: 1.5px solid var(--navy); color: var(--navy); }
.req-tag.is-opt { border: 1.5px dashed var(--control); color: var(--muted); }
.item-text { flex: 1 1 auto; min-width: 0; }

/* ---------- اقتراحات الاستكمال ---------- */
.sugg-h { font-size: .98rem; margin: .7rem 0 .2rem; color: var(--navy); }
.sugg-list { list-style: none; padding: 0; margin: 0 0 .4rem; }
.sugg-list li { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; padding: .35rem 0; border-bottom: 1px solid var(--line-soft); }
.sugg-text { flex: 1 1 14rem; }
.sugg-go { min-height: 40px; }

/* ---------- مش عارف أشتكي لمين؟ ---------- */
.help-q { background: var(--surface); border: 1px solid var(--line) !important; border-radius: var(--radius); padding: 1rem 1.2rem .6rem !important; margin-block: 1rem; }
.help-q legend { display: flex; align-items: flex-start; gap: .6rem; float: none; width: auto; padding-inline: .3rem; font-size: 1.1rem; }
.help-n { flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--navy); color: #e3c274; display: grid; place-items: center; font-weight: 700; font-size: 1rem; }
.help-result { background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--teal); border-radius: var(--radius); padding: 1.2rem 1.4rem .6rem; margin-block: 1.25rem; }
.help-result:focus { outline: 3px solid #1b8c83; outline-offset: 2px; }
.help-result h2 { margin-bottom: .4rem; }
.help-result.is-emerg { border-top-color: var(--danger); background: var(--danger-bg); }

/* ---------- ساعدني أوصف اللي حصل ---------- */
.assist { background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: .3rem 1rem .6rem; margin-block: 1rem; }
.assist > summary { cursor: pointer; font-weight: 700; color: var(--teal-dark); min-height: 40px; display: flex; align-items: center; gap: .4rem; }
.assist .field { margin-block: .7rem; }
.assist textarea { min-height: 4.2rem; }
.assist-btns { margin-block: .6rem 0; }

/* ---------- النتيجة: 1) الجهة والخطوة التالية 2) النص 3) الجاهزية 4) الباقي ---------- */
#result-root { display: grid; gap: 1.1rem; max-width: 52rem; margin-inline: auto; }
#result-root > * { margin: 0; min-width: 0; }
.route-top { background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--teal); border-radius: var(--radius); padding: 1.1rem 1.4rem 1rem; }
.route-top .route-head { margin-bottom: .7rem; }
.route-top .next-action { margin-bottom: .7rem; }
.route-top .route-contact { margin-block: .5rem; }
.route-top .route-reminder { margin: .7rem 0 0; padding-top: .6rem; }
.draft { box-shadow: var(--shadow-sm); }
.review-check { margin: 0; padding: .5rem 1.6rem .3rem; border-bottom: 1px solid var(--line-soft); background: var(--surface); }
.review-check > summary { cursor: pointer; font-weight: 700; color: var(--teal-dark); min-height: 40px; display: flex; align-items: center; gap: .4rem; }
.review-list { list-style: none; padding: 0; margin: .2rem 0 .5rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .3rem .8rem; }
.review-list .choice { margin: 0; min-height: 44px; display: flex; align-items: center; gap: .6rem; cursor: pointer; }
.review-list input { width: 1.25rem; height: 1.25rem; accent-color: var(--teal); }
.print-hint { padding: 0 1.6rem; margin: 0 0 .5rem; max-width: 46rem; }
.ready-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.4rem .8rem; }
.ready-head { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.3rem; }
.ready-card .score-ring { width: 5rem; height: 5rem; }
.ready-card .score-ring::before { inset: .45rem; }
.ready-card .ring-num { font-size: 1.2rem; }
.ready-main { flex: 1 1 15rem; min-width: 0; }
.ready-main .score-title { font-size: 1.15rem; margin-bottom: 0; }
.ready-main p { margin-bottom: .2rem; }
.ready-count { font-weight: 500; }
.ready-details { margin-top: .6rem; border-top: 1px solid var(--line-soft); padding-top: .4rem; }
.ready-details > summary { min-height: 44px; display: flex; align-items: center; }
.ready-details .breakdown { margin-top: .4rem; }
.short, .prep { margin-top: 0; }
.route-more { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .3rem 1.4rem .8rem; }
.route-more > summary { cursor: pointer; font-weight: 700; color: var(--teal-dark); min-height: 44px; display: flex; align-items: center; }
.route-more .why { margin-top: .5rem; }

/* ---------- شكاواي ---------- */
.mine-toolbar { margin-block: .8rem; }
.mine-filters { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: .2rem 1rem; margin-top: 1rem; }
.mine-filters .field { margin-block: .3rem; }
@media (max-width: 47.99rem) { .mine-filters { grid-template-columns: 1fr; } }
input[type="search"] { font: inherit; width: 100%; min-height: 52px; padding: .6rem .9rem; color: var(--ink); background: #fff; border: 1.5px solid var(--control); border-radius: var(--radius-sm); }
input[type="search"]:focus { border-color: var(--teal); outline: 3px solid rgba(13, 107, 100, .25); outline-offset: 0; }
.mine-count { margin: .3rem 0 .6rem; color: var(--muted); font-size: .93rem; }
.mine-card h2 { font-size: 1.2rem; line-height: 1.5; overflow-wrap: anywhere; }
.mine-card.is-demo { border-inline-start-color: #b99a44; background: #fffdf3; }
.status-chip { display: inline-flex; align-items: center; gap: .35rem; border-radius: 999px; padding: 0 .7rem; font-weight: 700; font-size: .88rem; background: var(--line-soft); color: var(--navy); border: 1px solid var(--control); }
.status-chip::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; }
.status-chip.st-submitted, .status-chip.st-following { background: var(--info-bg); border-color: var(--navy-2); }
.status-chip.st-resolved { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
.next-step { background: var(--gold-50); border-inline-start: 4px solid var(--gold); border-radius: var(--radius-sm); padding: .6rem 1rem; margin-block: .5rem; }
.next-step p { margin: 0; }
.next-title { font-weight: 700; color: var(--ink); }
.next-text-sm { font-size: .95rem; color: var(--ink); line-height: 1.7; }
.mine-actions { padding: .3rem 0 .4rem; }
.mine-more { margin-top: .4rem; border-top: 1px solid var(--line-soft); padding-top: .3rem; }
.mine-more > summary { cursor: pointer; font-weight: 700; color: var(--teal-dark); min-height: 44px; display: flex; align-items: center; }
.mine-more .action-bar { padding-inline: 0; }
.reminder { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line-soft); }
.reminder .flog-title { display: flex; align-items: center; gap: .4rem; }
.demo-section { margin-top: 2rem; padding-top: 1rem; border-top: 2px dashed #b99a44; }
.danger-zone { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line); }

/* ---------- نسخة احتياطية واستعادة ---------- */
.backup-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .3rem 1.2rem .8rem; margin-block: .6rem 1rem; }
.backup-panel > summary { cursor: pointer; font-weight: 700; color: var(--teal-dark); min-height: 48px; display: flex; align-items: center; gap: .5rem; }
.backup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1rem 2rem; }
.backup-sec h3 { font-size: 1.05rem; margin-top: .4rem; }
.imp-summary { background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: .6rem 1rem; margin-block: .6rem; }
.imp-summary h4 { margin: 0 0 .3rem; }
.imp-counts { list-style: none; padding: 0; margin: 0 0 .4rem; }
.imp-counts li { padding: .1rem 0; }
.imp-list { margin: .2rem 0 .4rem; padding-inline-start: 1.2rem; font-size: .95rem; }
input[type="file"] { font: inherit; max-width: 100%; }

/* ---------- شريط تحديث النسخة (هادئ) ---------- */
.update-bar { position: fixed; inset-inline: 0; bottom: 0; z-index: 55; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1rem; background: var(--navy); color: #fff; padding: .6rem 1rem; border-top: 3px solid var(--gold); box-shadow: 0 -6px 20px rgba(10, 33, 64, .25); }
.update-bar p { margin: 0; flex: 1 1 16rem; font-size: .95rem; }
.update-actions { display: flex; gap: .5rem; }
.btn-quiet-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
.btn-quiet-light:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.offline-status { font-weight: 500; }
.foot-links { margin: .5rem 0 0; }
.foot-links a { color: #fff; }
.site-footer { padding-bottom: 1.6rem; }

/* تباين مرتفع للمكونات الجديدة */
html[data-contrast="high"] .save-status, html[data-contrast="high"] .privacy-panel, html[data-contrast="high"] .route-top,
html[data-contrast="high"] .ready-card, html[data-contrast="high"] .route-more, html[data-contrast="high"] .help-q, html[data-contrast="high"] .help-result,
html[data-contrast="high"] .draft-card, html[data-contrast="high"] .backup-panel, html[data-contrast="high"] .assist { border-color: #000; border-width: 2px; }

/* تفاصيل لوحة الخصوصية (مطوية افتراضيًا في المعالج لتقليل الارتفاع) */
.privacy-more { margin-block: .1rem .2rem; }
.privacy-more > summary { cursor: pointer; color: var(--teal-dark); font-weight: 500; font-size: .93rem; min-height: 36px; display: flex; align-items: center; }
.privacy-more .hint { margin-top: .2rem; }