/* Hazem1 V13 — MOCCAE-aligned public-service interface */
:root {
  --font-latin: "Noto Sans", "Segoe UI", Arial, sans-serif;
  --font-arabic: "Noto Sans Arabic", Tahoma, Arial, sans-serif;
  --gold-display: #92722a;
  --gold-action: #86651f;
  --gold-action-hover: #745719;
  --gold-bright: #d2b560;
  --focus: #66b7ff;
  --danger: #b42318;
  --success: #147d4f;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.08), 0 8px 24px rgb(0 0 0 / 0.05);
  --shadow-lg: 0 24px 70px rgb(0 0 0 / 0.12);
  --transition: 160ms ease;
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
}

html[data-theme="light"] {
  color-scheme: light;
  --canvas: #ffffff;
  --canvas-subtle: #f7f6f2;
  --surface: #ffffff;
  --surface-raised: #fbfaf7;
  --surface-muted: #f1efe9;
  --text: #242424;
  --text-secondary: #4c4c4c;
  --text-muted: #68665f;
  --border: #d9d4c9;
  --border-strong: #b7ae9d;
  --gold: #86651f;
  --gold-hover: #745719;
  --gold-soft: #f5eedb;
  --gold-glow: rgb(134 101 31 / 0.22);
  --gold-glow-soft: rgb(134 101 31 / 0.08);
  --loading-track: #e7dfcb;
  --input-bg: #ffffff;
  --error-bg: #fff2f0;
  --success-bg: #edf8f2;
  --report-grid: rgb(134 101 31 / 0.055);
  --header-bg: #fbfaf7;
  --header-border: #d9d4c9;
  --header-text: #242424;
  --header-control-bg: #f1efe9;
  --header-control-border: #c8bea9;
  --header-control-hover: #e8e3d8;
  --header-accent: #80601b;
  --rating-bg: #ffffff;
  --rating-caption-bg: #f7f5ef;
  --rating-caption-text: #4c4c4c;
  --footer-bg: #f7f6f2;
  --footer-text: #4c4c4c;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #0c0d0c;
  --canvas-subtle: #11120f;
  --surface: #151613;
  --surface-raised: #1c1d19;
  --surface-muted: #23241f;
  --text: #f5f2e9;
  --text-secondary: #c6c0b2;
  --text-muted: #aaa496;
  --border: #38352d;
  --border-strong: #575143;
  --gold: #d2b560;
  --gold-hover: #e1c873;
  --gold-soft: #292318;
  --gold-glow: rgb(210 181 96 / 0.3);
  --gold-glow-soft: rgb(210 181 96 / 0.1);
  --loading-track: #332d21;
  --input-bg: #11120f;
  --error-bg: #2b1816;
  --success-bg: #11261d;
  --report-grid: rgb(210 181 96 / 0.045);
  --header-bg: #090a09;
  --header-border: #312a1c;
  --header-text: #f7f4eb;
  --header-control-bg: #141612;
  --header-control-border: #463a22;
  --header-control-hover: #1b1d18;
  --header-accent: #d2b560;
  --rating-bg: #151613;
  --rating-caption-bg: #1c1d19;
  --rating-caption-text: #c6c0b2;
  --footer-bg: #090a09;
  --footer-text: #c7c2b7;
}

* { box-sizing: border-box; }

html {
  min-width: 320px;
  scroll-behavior: smooth;
  background: var(--canvas);
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow-x: clip;
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font-latin);
  font-size: 16px;
  line-height: 1.55;
  transition: background-color var(--transition), color var(--transition);
}

html[lang="ar"] body { font-family: var(--font-arabic); }

button,
input,
select { font: inherit; }

button,
a,
input,
select { -webkit-tap-highlight-color: transparent; }

img { display: block; max-width: 100%; }

a { color: inherit; }

::selection { background: var(--gold); color: var(--canvas); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  inset-block-start: 10px;
  inset-inline-start: 10px;
  transform: translateY(-180%);
  border-radius: var(--radius-sm);
  background: #ffffff;
  color: #111111;
  padding: 10px 14px;
  font-weight: 700;
}

.skip-link:focus { transform: translateY(0); }

.brand-rail {
  height: 4px;
  background: var(--gold-display);
}

.site-header {
  position: relative;
  z-index: 20;
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
  transition: background-color var(--transition), border-color var(--transition);
}

.header-inner,
.context-inner,
.shell {
  width: min(100% - 48px, 1280px);
  margin-inline: auto;
}

.header-inner {
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.ministry-brand {
  display: inline-flex;
  align-items: center;
  flex: 0 1 380px;
  min-width: 0;
  border-radius: 4px;
}

.ministry-brand img {
  width: min(100%, 380px);
  height: auto;
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  color: var(--header-text);
}

.environment-badge,
.utility-button {
  min-height: 44px;
  border: 1px solid var(--header-control-border);
  border-radius: 10px;
  background: var(--header-control-bg);
  color: var(--header-text);
}

.environment-badge {
  display: inline-flex;
  align-items: center;
  padding-inline: 15px;
  color: var(--header-accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.utility-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 13px;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 700;
  transition: border-color var(--transition), background-color var(--transition), transform var(--transition);
}

.utility-button:hover {
  border-color: var(--gold);
  background: var(--header-control-hover);
}

.utility-button:active { transform: translateY(1px); }
.utility-button:disabled { cursor: wait; opacity: 0.58; }

.language-button > span:first-child {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid var(--header-control-border);
  border-radius: 50%;
  color: var(--header-accent);
  font-family: var(--font-arabic);
  font-size: 0.72rem;
}

.theme-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

html[data-theme="dark"] .theme-icon-moon,
html[data-theme="light"] .theme-icon-sun { display: none; }

.context-bar {
  border-bottom: 1px solid var(--border);
  background: var(--canvas-subtle);
}

.context-inner {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}

.context-demo {
  display: none;
  margin-inline-start: auto;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--gold);
  padding: 4px 9px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.context-inner svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.8;
}

html[dir="rtl"] .context-inner svg { transform: scaleX(-1); }
.context-inner strong { color: var(--text); font-weight: 600; }

main { padding-block: 68px 88px; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  align-items: center;
  gap: clamp(42px, 7vw, 96px);
  padding-block-end: 64px;
  border-bottom: 1px solid var(--border);
}

.hero-copy { min-width: 0; }

.eyebrow,
.panel-kicker {
  margin: 0 0 12px;
  color: var(--gold);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

html[lang="ar"] .eyebrow,
html[lang="ar"] .panel-kicker { letter-spacing: 0; }

h1,
h2,
h3,
p { overflow-wrap: anywhere; }

h1 {
  max-width: 780px;
  margin: 0;
  color: var(--text);
  font-size: clamp(2.45rem, 5vw, 4.7rem);
  font-weight: 600;
  letter-spacing: -0.048em;
  line-height: 1.02;
  text-wrap: balance;
}

html[lang="ar"] h1 {
  letter-spacing: 0;
  line-height: 1.25;
}

.hero-lead {
  max-width: 700px;
  margin: 24px 0 0;
  color: var(--text-secondary);
  font-size: clamp(1rem, 1.7vw, 1.18rem);
  line-height: 1.75;
  text-wrap: pretty;
}

.service-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 40px 0 0;
  padding: 0;
  border-block: 1px solid var(--border);
  list-style: none;
}

.service-steps li {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 17px 18px;
  border-inline-end: 1px solid var(--border);
}

.service-steps li:last-child { border-inline-end: 0; }
.service-steps span { color: var(--gold); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; }
.service-steps strong { color: var(--text-secondary); font-size: 0.78rem; font-weight: 600; line-height: 1.35; }

.rating-card {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: 50% 50% var(--radius-lg) var(--radius-lg);
  background: var(--rating-bg);
  box-shadow: var(--shadow-lg);
  transition: background-color var(--transition), border-color var(--transition);
}

.rating-image-wrap {
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  padding: 12px;
  background: var(--rating-bg);
  transition: background-color var(--transition);
}

.rating-image-wrap img { width: 100%; height: 100%; object-fit: contain; }

.rating-card figcaption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 14px 18px 17px;
  border-top: 1px solid var(--border);
  background: var(--rating-caption-bg);
  color: var(--rating-caption-text);
  text-align: center;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

.rating-card figcaption span { font-size: 0.7rem; }
.rating-card figcaption strong { color: var(--gold); font-size: 0.8rem; font-weight: 700; }

.workspace {
  display: grid;
  grid-template-columns: minmax(320px, 400px) minmax(0, 1fr);
  align-items: start;
  gap: 24px;
  padding-block-start: 32px;
}

.form-panel,
.report-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: border-color 300ms var(--ease-premium), box-shadow 300ms var(--ease-premium), background-color var(--transition);
}

.form-panel.is-busy {
  border-color: color-mix(in srgb, var(--gold) 62%, var(--border));
  box-shadow: 0 0 0 1px var(--gold-glow-soft), 0 18px 52px var(--gold-glow);
}

.form-panel.is-busy .panel-index {
  background: var(--gold-soft);
  box-shadow: 0 0 0 7px var(--gold-glow-soft);
  animation: gold-index-pulse 2.2s ease-in-out infinite;
}

.form-panel.is-busy input:disabled,
.form-panel.is-busy select:disabled {
  border-color: color-mix(in srgb, var(--gold) 34%, var(--border));
  cursor: progress;
  opacity: 0.72;
}

.form-panel {
  position: sticky;
  top: 20px;
  padding: 28px;
}

.panel-heading {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-block-end: 28px;
  padding-block-end: 23px;
  border-bottom: 1px solid var(--border);
}

.panel-index {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: var(--gold);
  font-size: 0.68rem;
  font-weight: 700;
}

.panel-heading .panel-kicker { margin-block-end: 4px; }
.panel-heading h2 { margin: 0; font-size: 1.45rem; font-weight: 600; letter-spacing: -0.025em; }
html[lang="ar"] .panel-heading h2 { letter-spacing: 0; }

.field { position: relative; margin-block-start: 22px; }
.field:first-of-type { margin-block-start: 0; }

label {
  display: inline-block;
  margin-block-end: 8px;
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 650;
}

.input-shell,
.select-shell { position: relative; }

.input-shell > svg {
  position: absolute;
  z-index: 1;
  inset-block-start: 50%;
  inset-inline-start: 14px;
  width: 19px;
  height: 19px;
  transform: translateY(-50%);
  fill: none;
  stroke: var(--text-muted);
  stroke-linecap: round;
  stroke-width: 1.7;
  pointer-events: none;
}

input,
select {
  width: 100%;
  min-height: 50px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  color: var(--text);
  font-size: 0.9rem;
  transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition);
}

input { padding: 12px 42px; }
select {
  appearance: none;
  padding: 12px 42px 12px 14px;
}

html[dir="rtl"] select { padding: 12px 14px 12px 42px; }

input::placeholder { color: var(--text-muted); opacity: 0.82; }
input:hover,
select:hover { border-color: var(--gold); }
input:focus,
select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent); outline: none; }
input[aria-invalid="true"],
select[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 16%, transparent); }

.select-shell > svg {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 14px;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  fill: none;
  stroke: var(--text-muted);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  pointer-events: none;
}

.field-spinner {
  position: absolute;
  inset-block-start: calc(50% - 9px);
  inset-inline-end: 14px;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}

.field-spinner:not(.is-active) { display: none; }

.field-help,
.form-note,
.source-note {
  margin: 8px 0 0;
  color: var(--text-muted);
  font-size: 0.74rem;
  line-height: 1.55;
}

.motion-setting {
  display: flex;
  justify-content: center;
  margin-block-start: 12px;
}

.motion-toggle {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--text-muted);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.motion-toggle svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

.motion-toggle:hover { border-color: var(--gold); color: var(--gold-light); }
.motion-toggle:focus-visible { outline: 3px solid color-mix(in srgb, var(--gold) 36%, transparent); outline-offset: 2px; }
.motion-toggle[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--gold) 70%, var(--border));
  background: var(--gold-soft);
  color: var(--gold-light);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--gold-glow) 50%, transparent);
}
.motion-toggle[aria-pressed="true"] svg { animation: gold-core-pulse 2.4s ease-in-out infinite; }

.suggestions {
  position: absolute;
  z-index: 30;
  inset-block-start: calc(100% - 26px);
  inset-inline: 0;
  max-height: 280px;
  overflow-y: auto;
  padding: 7px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  box-shadow: 0 18px 44px rgb(0 0 0 / 0.18);
}

.suggestion-option {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  padding: 10px 11px;
  cursor: pointer;
  text-align: start;
  direction: ltr;
}

.suggestion-option:hover,
.suggestion-option[aria-selected="true"] { background: var(--gold-soft); }
.suggestion-option em { font-family: Georgia, "Times New Roman", serif; font-size: 0.9rem; }
.suggestion-option small { flex: 0 0 auto; color: var(--gold); font-size: 0.68rem; font-weight: 700; }

.form-alert {
  margin-block-start: 20px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--danger) 55%, var(--border));
  border-inline-start-width: 4px;
  border-radius: var(--radius-sm);
  background: var(--error-bg);
  color: var(--text);
  font-size: 0.82rem;
}

.primary-button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-block-start: 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--gold-action);
  color: #ffffff;
  padding: 13px 18px;
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 700;
  transition: background-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

html[data-theme="dark"] .primary-button { background: #b18b34; color: #10110f; }
.primary-button:hover { background: var(--gold-action-hover); box-shadow: 0 8px 22px rgb(134 101 31 / 0.24); }
html[data-theme="dark"] .primary-button:hover { background: #d2b560; }
.primary-button:active { transform: translateY(1px); }
.primary-button:disabled { cursor: wait; opacity: 0.72; }
.primary-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
html[dir="rtl"] .primary-button svg { transform: scaleX(-1); }
.primary-button > span,
.primary-button > svg { position: relative; z-index: 1; }

.primary-button.is-busy:disabled {
  background: linear-gradient(110deg, #6f5217 0%, #a47d25 38%, #d2b560 52%, #8b681e 72%, #6f5217 100%);
  background-size: 240% 100%;
  box-shadow: 0 10px 28px var(--gold-glow), inset 0 1px 0 rgb(255 255 255 / 0.24);
  color: #ffffff;
  opacity: 1;
  animation: busy-gold-flow 2.8s ease-in-out infinite;
}

html[data-theme="dark"] .primary-button.is-busy:disabled {
  background: linear-gradient(110deg, #80601b 0%, #c19b43 38%, #f0d784 52%, #a47a20 72%, #80601b 100%);
  background-size: 240% 100%;
  color: #11120f;
}

.primary-button.is-busy::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset-block: -40%;
  inset-inline-start: -55%;
  width: 42%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.32), transparent);
  animation: button-gold-sweep 2.2s ease-in-out infinite;
}

.primary-button.is-busy::after {
  content: "";
  position: relative;
  z-index: 1;
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  border: 2px solid currentColor;
  border-inline-start-color: transparent;
  border-radius: 50%;
  animation: spin 760ms linear infinite;
}

.primary-button.is-busy svg { display: none; }
.form-note { text-align: center; }

.report-panel {
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: 680px;
  overflow: hidden;
  background-color: var(--surface);
  background-image: linear-gradient(var(--report-grid) 1px, transparent 1px), linear-gradient(90deg, var(--report-grid) 1px, transparent 1px);
  background-size: 34px 34px;
}

.empty-state {
  display: grid;
  place-items: center;
  padding: 48px;
  text-align: center;
}

.empty-content { max-width: 470px; }

.empty-icon {
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  margin: 0 auto 24px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface-raised);
  box-shadow: inset 0 0 0 8px var(--surface-muted);
}

.empty-icon img { width: 46px; height: 46px; object-fit: contain; border-radius: 10px; }
.empty-content h2 { margin: 0; font-size: clamp(1.7rem, 3vw, 2.35rem); font-weight: 550; letter-spacing: -0.035em; }
html[lang="ar"] .empty-content h2 { letter-spacing: 0; }
.empty-content > p:not(.panel-kicker):not(.source-note) { margin: 16px 0 0; color: var(--text-secondary); line-height: 1.8; }
.empty-rule { position: relative; height: 1px; margin: 30px auto 20px; background: var(--border); }
.empty-rule span { position: absolute; inset-block-start: -5px; inset-inline-start: calc(50% - 5px); width: 10px; height: 10px; transform: rotate(45deg); background: var(--gold); }
.source-note { margin-inline: auto; }

.report-content { padding: clamp(24px, 4vw, 44px); background: var(--surface); }
.report-content > :first-child { margin-block-start: 0; }
.report-content h2,
.report-content h3 { color: var(--gold); font-weight: 600; letter-spacing: -0.02em; }
.report-content h2 { margin: 34px 0 14px; font-size: clamp(1.4rem, 3vw, 2rem); }
.report-content h3 { margin: 26px 0 10px; font-size: 1.12rem; }
.report-content p,
.report-content li { color: var(--text-secondary); line-height: 1.75; }
.report-content a { color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.report-content table { width: 100%; display: block; overflow-x: auto; border-collapse: collapse; }
.report-content th,
.report-content td { min-width: 130px; padding: 11px 12px; border: 1px solid var(--border); text-align: start; vertical-align: top; }
.report-content th { background: var(--surface-muted); color: var(--text); }

.report-panel.is-generating {
  border-color: color-mix(in srgb, var(--gold) 58%, var(--border));
  box-shadow: 0 0 0 1px var(--gold-glow-soft), 0 26px 80px var(--gold-glow);
}

.report-panel.is-generating::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 40%, var(--gold-glow-soft) 0%, transparent 54%);
  animation: loading-gold-breathe 3.6s ease-in-out infinite;
}

.report-panel.is-generating::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--gold) 30%, var(--gold-bright) 50%, var(--gold) 70%, transparent 100%);
  background-size: 52% 100%;
  background-repeat: no-repeat;
  animation: loading-top-scan 2.8s ease-in-out infinite;
}

.loading-state {
  min-height: 680px;
  display: grid;
  place-items: center;
  padding: 42px;
  text-align: center;
}

.loading-inner {
  width: min(100%, 660px);
}

.loading-visual {
  position: relative;
  width: 132px;
  height: 132px;
  margin: 0 auto 25px;
}

.loading-orbit {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.loading-orbit-outer {
  inset: 0;
  border: 1px solid color-mix(in srgb, var(--gold) 24%, transparent);
  border-block-start: 2px solid var(--gold);
  border-inline-end-color: color-mix(in srgb, var(--gold-bright) 78%, transparent);
  animation: loading-orbit 1.8s linear infinite;
}

.loading-orbit-inner {
  inset: 15px;
  border: 1px dashed color-mix(in srgb, var(--gold) 58%, transparent);
  animation: loading-orbit-reverse 2.8s linear infinite;
}

.loading-comet {
  position: absolute;
  inset: -3px;
  z-index: 2;
  border-radius: 50%;
  pointer-events: none;
  animation: loading-comet-orbit 1.35s linear infinite;
}

.loading-comet::before {
  content: "";
  position: absolute;
  inset-block-start: -5px;
  inset-inline-start: 50%;
  width: 14px;
  height: 14px;
  border: 2px solid color-mix(in srgb, var(--gold-bright) 72%, white);
  border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle at 35% 30%, #fff8d5 0 12%, var(--gold-bright) 34%, var(--gold) 72%);
  box-shadow: 0 0 0 5px var(--gold-glow-soft), 0 0 20px 7px var(--gold-glow);
}

.loading-comet::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: calc(50% + 5px);
  width: 36px;
  height: 5px;
  border-radius: 999px;
  transform: rotate(10deg);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, color-mix(in srgb, var(--gold-bright) 78%, transparent), transparent);
  filter: blur(0.4px);
}

.loading-core {
  position: absolute;
  inset: 31px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--gold) 74%, var(--border));
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--gold-bright) 22%, var(--surface-raised)), var(--gold-soft));
  box-shadow: 0 0 0 9px var(--gold-glow-soft), 0 10px 36px var(--gold-glow), inset 0 1px 0 rgb(255 255 255 / 0.2);
  color: var(--gold);
  animation: loading-core-pulse 2.4s ease-in-out infinite;
}

.loading-core svg {
  width: 39px;
  height: 39px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.loading-spark {
  position: absolute;
  width: 7px;
  height: 7px;
  border: 1px solid var(--gold-bright);
  transform: rotate(45deg);
  background: var(--gold);
  box-shadow: 0 0 12px var(--gold-glow);
  animation: loading-spark 2.4s ease-in-out infinite;
}

.loading-spark-1 { inset-block-start: 12px; inset-inline-start: 23px; }
.loading-spark-2 { inset-block-start: 28px; inset-inline-end: 7px; animation-delay: 800ms; }
.loading-spark-3 { inset-block-end: 12px; inset-inline-end: 30px; animation-delay: 1.6s; }

.loading-kicker {
  margin: 0 0 8px;
  color: var(--gold);
}

.loading-state h2 {
  max-width: 580px;
  margin: 0 auto;
  color: var(--text);
  font-size: clamp(1.42rem, 2.5vw, 1.9rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.25;
}

html[lang="ar"] .loading-state h2 { letter-spacing: 0; line-height: 1.55; }

.loading-phase {
  min-height: 2.5em;
  display: grid;
  place-items: center;
}

.loading-phase.is-entering { animation: loading-phase-enter 420ms var(--ease-premium) both; }

.loading-state .loading-detail {
  max-width: 490px;
  margin: 13px auto 0;
  color: var(--text-muted);
  line-height: 1.7;
}

.loading-progress {
  position: relative;
  width: min(100%, 520px);
  height: 8px;
  overflow: hidden;
  margin: 29px auto 0;
  border: 1px solid color-mix(in srgb, var(--gold) 32%, var(--border));
  border-radius: 999px;
  background: var(--loading-track);
  box-shadow: inset 0 1px 4px rgb(0 0 0 / 0.12), 0 0 18px var(--gold-glow-soft);
}

.loading-progress-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent 0%, transparent 23%, var(--gold) 38%, var(--gold-bright) 50%, var(--gold) 62%, transparent 77%, transparent 100%);
  background-size: 46% 100%;
  background-repeat: no-repeat;
  animation: loading-gold-progress 2.1s ease-in-out infinite;
}

html[dir="rtl"] .loading-progress-fill { animation-direction: reverse; }

.loading-steps {
  width: min(100%, 640px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 24px auto 0;
  padding: 20px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--gold) 22%, var(--border));
  list-style: none;
}

.loading-steps li {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  padding-inline: 14px;
  color: var(--text-muted);
  font-size: 0.72rem;
  line-height: 1.5;
  text-align: start;
  opacity: 0.48;
  transform: translateY(0);
  transition: color 260ms ease, opacity 260ms ease, transform 260ms ease;
}

.loading-steps li + li { border-inline-start: 1px solid var(--border); }

.loading-steps li.is-active {
  color: var(--text);
  opacity: 1;
  transform: translateY(-2px);
}

.loading-steps li.is-complete {
  color: var(--text-secondary);
  opacity: 0.78;
}

.loading-step-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  margin-block-start: 5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px var(--gold-glow-soft);
}

.loading-steps li.is-active .loading-step-dot {
  background: var(--gold-bright);
  box-shadow: 0 0 0 5px var(--gold-glow-soft), 0 0 14px var(--gold-glow);
  animation: loading-active-step 900ms ease-in-out infinite;
}

.loading-steps li.is-complete .loading-step-dot { opacity: 0.62; }

.report-panel.is-complete {
  border-color: color-mix(in srgb, var(--gold) 42%, var(--border));
  box-shadow: 0 18px 54px var(--gold-glow-soft);
}

.report-panel.is-complete::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  transform-origin: center;
  background: linear-gradient(90deg, transparent, var(--gold), var(--gold-bright), var(--gold), transparent);
  animation: report-success-sweep 760ms var(--ease-premium) both;
}

.report-reveal { animation: report-reveal 620ms var(--ease-premium) both; }

.report-panel.is-error {
  border-color: color-mix(in srgb, var(--danger) 54%, var(--border));
}

.image-section { margin-block-start: 34px; padding-block-start: 26px; border-top: 1px solid var(--border); }
.image-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.image-card { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--text); text-decoration: none; }
.image-card img { width: 100%; height: 170px; object-fit: cover; background: var(--surface-muted); }
.image-card span { display: block; padding: 11px 12px; color: var(--text-secondary); font-size: 0.76rem; }
.report-notice { margin-block-start: 18px; padding: 13px 15px; border: 1px solid var(--border); border-inline-start: 4px solid var(--gold); border-radius: var(--radius-sm); background: var(--gold-soft); color: var(--text-secondary); font-size: 0.8rem; }

.important-links {
  padding-block: 72px 78px;
  border-top: 1px solid var(--border);
  background: var(--canvas-subtle);
}

.important-links-heading { text-align: center; }
.important-links-heading .panel-kicker { margin-block-end: 5px; }

.important-links-heading h2 {
  margin: 0;
  color: var(--gold);
  font-size: clamp(2.2rem, 5vw, 4.4rem);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 1.1;
}

html[lang="ar"] .important-links-heading h2 { letter-spacing: 0; line-height: 1.3; }

.important-links-rule {
  position: relative;
  height: 1px;
  margin-block: 28px 34px;
  background: var(--gold);
}

.important-links-rule span {
  position: absolute;
  inset-block-start: -10px;
  inset-inline-start: calc(50% - 13px);
  width: 0;
  height: 0;
  border-inline: 13px solid transparent;
  border-block-end: 11px solid var(--gold);
}

.official-link-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block: 1px solid var(--border);
}

.official-link-grid a {
  min-width: 0;
  min-height: 132px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 17px;
  padding: 24px;
  border-inline-end: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  transition: background-color var(--transition), color var(--transition);
}

.official-link-grid a:last-child { border-inline-end: 0; }
.official-link-grid a:hover { background: var(--surface); }

.link-number {
  align-self: start;
  color: var(--gold);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.link-copy { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.link-copy strong { font-size: 1rem; font-weight: 600; line-height: 1.35; }
.link-copy small { color: var(--text-muted); font-size: 0.75rem; line-height: 1.55; }
.official-link-grid svg { width: 21px; height: 21px; fill: none; stroke: var(--gold); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; transition: transform var(--transition); }
.official-link-grid a:hover svg { transform: translateX(4px); }
html[dir="rtl"] .official-link-grid svg { transform: scaleX(-1); }
html[dir="rtl"] .official-link-grid a:hover svg { transform: scaleX(-1) translateX(4px); }

.site-footer { border-top: 1px solid var(--border); background: var(--footer-bg); color: var(--footer-text); transition: background-color var(--transition), color var(--transition), border-color var(--transition); }
.footer-inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; padding-block: 34px; }
.footer-inner p { margin: 0; max-width: 680px; font-size: 0.76rem; line-height: 1.65; }
.footer-brand { margin-block-end: 4px !important; color: var(--gold); font-weight: 700; }
.footer-meta { display: flex; align-items: center; gap: 8px; white-space: nowrap; }

.hidden { display: none !important; }

@keyframes spin { to { transform: rotate(360deg); } }

@keyframes gold-index-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 7px var(--gold-glow-soft); }
  50% { transform: scale(1.04); box-shadow: 0 0 0 10px transparent; }
}

@keyframes busy-gold-flow {
  0%, 100% { background-position: 100% 50%; }
  50% { background-position: 0% 50%; }
}

@keyframes button-gold-sweep {
  0%, 18% { inset-inline-start: -55%; opacity: 0; }
  34% { opacity: 1; }
  62%, 100% { inset-inline-start: 125%; opacity: 0; }
}

@keyframes loading-orbit { to { transform: rotate(360deg); } }
@keyframes loading-orbit-reverse { to { transform: rotate(-360deg); } }
@keyframes loading-comet-orbit { to { transform: rotate(360deg); } }

@keyframes loading-core-pulse {
  0%, 100% { transform: scale(0.98); box-shadow: 0 0 0 8px var(--gold-glow-soft), 0 8px 28px var(--gold-glow); }
  50% { transform: scale(1.04); box-shadow: 0 0 0 12px transparent, 0 14px 42px var(--gold-glow); }
}

@keyframes loading-spark {
  0%, 100% { opacity: 0.28; transform: rotate(45deg) scale(0.72); }
  50% { opacity: 1; transform: rotate(45deg) scale(1.08); }
}

@keyframes loading-gold-progress {
  0% { background-position: -85% 0; }
  100% { background-position: 185% 0; }
}

@keyframes loading-gold-breathe {
  0%, 100% { opacity: 0.55; transform: scale(0.96); }
  50% { opacity: 1; transform: scale(1.04); }
}

@keyframes loading-top-scan {
  0% { background-position: -110% 0; opacity: 0.38; }
  50% { opacity: 1; }
  100% { background-position: 220% 0; opacity: 0.38; }
}

@keyframes loading-phase-enter {
  from { opacity: 0; transform: translateY(8px); filter: blur(2px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes loading-active-step {
  0%, 100% { transform: scale(0.88); }
  50% { transform: scale(1.14); }
}

@keyframes report-success-sweep {
  from { opacity: 0; transform: scaleX(0); }
  to { opacity: 1; transform: scaleX(1); }
}

@keyframes report-reveal {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 980px) {
  .header-inner { min-height: 86px; }
  .ministry-brand { flex-basis: 310px; }
  .environment-badge { display: none; }
  .hero { grid-template-columns: minmax(0, 1fr) 245px; gap: 40px; }
  .workspace { grid-template-columns: 350px minmax(0, 1fr); }
  .form-panel { padding: 24px; }
}

@media (max-width: 820px) {
  .header-inner,
  .context-inner,
  .shell { width: min(100% - 32px, 1280px); }
  .header-inner { padding-block: 12px; }
  .ministry-brand { flex-basis: 280px; }
  .utility-button { width: 44px; padding-inline: 0; }
  .utility-button > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  main { padding-block: 48px 68px; }
  .hero { grid-template-columns: 1fr; padding-block-end: 48px; }
  .rating-card { width: min(280px, 80vw); justify-self: start; }
  html[dir="rtl"] .rating-card { justify-self: start; }
  .workspace { grid-template-columns: 1fr; }
  .form-panel { position: static; }
  .report-panel,
  .loading-state { min-height: 540px; }
  .official-link-grid { grid-template-columns: 1fr; }
  .official-link-grid a { min-height: 106px; border-inline-end: 0; border-block-end: 1px solid var(--border); }
  .official-link-grid a:last-child { border-block-end: 0; }
}

@media (max-width: 560px) {
  .header-inner,
  .context-inner,
  .shell { width: min(100% - 24px, 1280px); }
  .header-inner { min-height: 78px; gap: 12px; }
  .ministry-brand { flex: 1 1 auto; max-width: 215px; }
  .header-actions { flex: 0 0 auto; gap: 7px; }
  .utility-button { width: 44px; min-height: 44px; }
  .environment-badge { display: none; }
  .context-inner { min-height: 44px; font-size: 0.69rem; }
  .context-demo { display: inline-flex; align-items: center; }
  input,
  select { font-size: 16px; }
  main { padding-block: 38px 54px; }
  h1 { font-size: clamp(2.25rem, 12vw, 3.15rem); }
  .hero-lead { margin-block-start: 18px; }
  .service-steps { grid-template-columns: 1fr; margin-block-start: 30px; }
  .service-steps li { border-inline-end: 0; border-block-end: 1px solid var(--border); }
  .service-steps li:last-child { border-block-end: 0; }
  .rating-card { width: min(255px, 78vw); }
  .workspace { padding-block-start: 22px; gap: 16px; }
  .form-panel { padding: 21px 18px; border-radius: var(--radius-md); }
  .panel-heading { margin-block-end: 24px; }
  .report-panel { min-height: 500px; border-radius: var(--radius-md); }
  .empty-state { padding: 36px 20px; }
  .empty-content h2 { font-size: 1.65rem; }
  .loading-state { min-height: 540px; padding: 34px 18px; }
  .loading-visual { width: 114px; height: 114px; margin-block-end: 22px; }
  .loading-core { inset: 27px; }
  .loading-core svg { width: 34px; height: 34px; }
  .loading-progress { margin-block-start: 24px; }
  .loading-steps { grid-template-columns: 1fr; gap: 11px; padding-block-start: 17px; }
  .loading-steps li { justify-content: flex-start; padding-inline: 5px; font-size: 0.74rem; }
  .loading-steps li + li { border-inline-start: 0; }
  .footer-inner { flex-direction: column; padding-block: 28px; }
  .footer-meta { white-space: normal; }
  .important-links { padding-block: 52px 58px; }
  .important-links-heading h2 { font-size: 2.4rem; }
  .official-link-grid a { padding: 20px 14px; gap: 13px; }
}

html[data-motion="reduced"] *,
html[data-motion="reduced"] *::before,
html[data-motion="reduced"] *::after {
  scroll-behavior: auto !important;
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

html[data-motion="reduced"] .loading-orbit,
html[data-motion="reduced"] .loading-comet,
html[data-motion="reduced"] .loading-core,
html[data-motion="reduced"] .loading-spark,
html[data-motion="reduced"] .loading-steps li,
html[data-motion="reduced"] .form-panel.is-busy .panel-index { transform: none !important; }

html[data-motion="reduced"] .loading-progress-fill {
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-bright) 50%, var(--gold) 100%);
  opacity: 0.82;
}

html[data-motion="reduced"] .primary-button.is-busy::before { display: none; }
html[data-motion="reduced"] .report-reveal { opacity: 1; transform: none !important; }

@media print {
  .site-header,
  .context-bar,
  .form-panel,
  .site-footer,
  .skip-link { display: none !important; }
  main { padding: 0; }
  .workspace { display: block; }
  .report-panel { border: 0; box-shadow: none; }
}