/* Cairo 5.3.0, licensed under OFL-1.1 and bundled locally. */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('./fonts/cairo-arabic-400-normal.woff2') format('woff2');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-089F,U+08A0-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('./fonts/cairo-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('./fonts/cairo-arabic-500-normal.woff2') format('woff2');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-089F,U+08A0-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('./fonts/cairo-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('./fonts/cairo-arabic-600-normal.woff2') format('woff2');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-089F,U+08A0-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('./fonts/cairo-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('./fonts/cairo-arabic-700-normal.woff2') format('woff2');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-089F,U+08A0-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('./fonts/cairo-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  color-scheme: dark;
  --bg: #121212;
  --surface: #1f1f1f;
  --surface-2: #292929;
  --surface-3: #303030;
  --text: #ffffff;
  --text-2: #d8d8d8;
  --muted: #a8a8a8;
  --border: #3a3a3a;
  --accent: #fca311;
  --accent-soft: rgba(252, 163, 17, 0.13);
  --danger: #ff716d;
  --success: #75c69c;
  --shadow: 0 14px 34px rgba(0, 0, 0, 0.16);
}

html[data-theme='light'] {
  color-scheme: light;
  --bg: #f7f3e8;
  --surface: #ffffff;
  --surface-2: #ebe9da;
  --surface-3: #f1efe6;
  --text: #1d2935;
  --text-2: #495765;
  --muted: #68737d;
  --border: #dcd8c9;
  --accent: #5a6d2f;
  --accent-soft: rgba(90, 109, 47, 0.12);
  --danger: #a93d3d;
  --success: #3d7254;
  --shadow: 0 12px 28px rgba(29, 41, 53, 0.08);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
html { overflow-x: hidden; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Cairo', ui-sans-serif, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  font-synthesis: none;
}
button, input, textarea, select { font: inherit; letter-spacing: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: var(--accent); text-decoration: none; }
bdi, input[type='number'], input[type='datetime-local'] { font-variant-numeric: tabular-nums; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 2px;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: 28px; line-height: 1.35; }
h2 { margin-bottom: 16px; font-size: 18px; line-height: 1.45; }
small { color: var(--muted); }
.icon { flex: 0 0 auto; }
.eyebrow { margin-bottom: 5px; color: var(--accent); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.muted, .page-subtitle { color: var(--muted); }
.page-subtitle { margin: 4px 0 0; }
.admin-layout { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 22px 14px;
  background: var(--surface);
  border-inline-end: 1px solid var(--border);
  z-index: 30;
}
.brand { display: flex; align-items: center; gap: 12px; padding: 0 10px 22px; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 19px; }
.brand small { color: var(--muted); font-size: 11px; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 16px;
}
.brand-mark.small { width: 42px; height: 42px; border-radius: 12px; }
.sidebar nav { display: grid; gap: 3px; overflow-y: auto; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  color: var(--text-2);
  background: transparent;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  text-align: start;
}
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.active { color: var(--accent); background: var(--accent-soft); font-weight: 700; }
.sidebar-footer { display: grid; gap: 8px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--border); }
.environment, .admin-account { display: flex; align-items: center; gap: 8px; padding: 4px 12px; color: var(--muted); font-size: 12px; overflow: hidden; }
.admin-account span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-dot { width: 8px; height: 8px; background: var(--success); border-radius: 50%; }
.logout { color: var(--muted); }
.main-column, .content, .content > * { min-width: 0; }
.topbar { display: flex; align-items: flex-start; gap: 16px; width: 100%; max-width: 1560px; margin-inline: auto; padding: 30px clamp(20px, 4vw, 52px) 20px; }
.topbar > div:not(.topbar-actions) { flex: 1; min-width: 0; }
.topbar-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; }
.language-control { display: block; }
.language-control select { width: auto; min-width: 112px; color: var(--text-2); background: var(--surface); }
.content { display: grid; gap: 20px; width: 100%; max-width: 1560px; margin-inline: auto; padding: 4px clamp(20px, 4vw, 52px) 52px; }
.icon-button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
}
.menu-button { display: none; }
.metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.metric-grid.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.metric-card, .card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.metric-card { display: flex; gap: 14px; min-height: 132px; padding: 20px; }
.metric-icon { display: grid; place-items: center; width: 40px; height: 40px; color: var(--accent); background: var(--accent-soft); border-radius: 12px; }
.metric-card p { margin-bottom: 5px; color: var(--muted); }
.metric-card strong { display: block; font-size: 27px; line-height: 1.3; }
.metric-card small { display: block; margin-top: 7px; }
.card { padding: 22px; }
/* Failure banner for an admin form submission that was rejected. Rendered at
   the top of the page the form lives on, so the browser stays in the Control
   Center instead of navigating to the API's JSON response. */
/* Compose delivery mode, inline field errors, and the Advanced disclosures
   that keep provider detail out of the normal workflow. */
.delivery-choice { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 12px; }
.delivery-choice .choice { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.field-error { color: var(--danger, #d64545); font-size: 13px; margin-top: 6px; }
.advanced-details > summary { cursor: pointer; font-size: 13px; opacity: 0.75; }
.advanced-details .advanced-body { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; }
.device-select { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.result-details > summary { cursor: pointer; font-size: 13px; }
.result-grid { display: flex; flex-wrap: wrap; gap: 14px; margin: 10px 0 0; }
.result-grid div { display: flex; flex-direction: column; }
.result-grid dt { font-size: 11px; letter-spacing: 0.05em; opacity: 0.65; }
.result-grid dd { margin: 0; font-weight: 600; }
.result-reason { margin: 8px 0 0; font-size: 13px; opacity: 0.8; }
.result-diagnostics { margin: 6px 0 0; padding-left: 18px; font-size: 12px; opacity: 0.8; }
.result-diagnostics li { margin-bottom: 4px; }
.result-diagnostics small { display: block; opacity: 0.75; }
.form-error { display: flex; flex-direction: column; gap: 4px; margin-bottom: 18px; border-left: 3px solid var(--danger, #d64545); }
.form-error strong { color: var(--danger, #d64545); }
.form-error small { opacity: 0.72; letter-spacing: 0.04em; }
.card-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.card-heading h2, .card-heading p { margin-bottom: 0; }
.two-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.three-column { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.status-line { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 44px; border-top: 1px solid var(--border); }
.status-line:first-of-type { border-top: 0; }
.badge { display: inline-flex; align-items: center; min-height: 26px; padding: 2px 9px; border-radius: 8px; color: var(--muted); background: var(--surface-2); font-size: 12px; text-transform: capitalize; }
.badge.success { color: var(--success); background: color-mix(in srgb, var(--success) 13%, transparent); }
.badge.danger { color: var(--danger); background: color-mix(in srgb, var(--danger) 13%, transparent); }
.badge.warning { color: var(--accent); background: var(--accent-soft); }
.quick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.quick { min-height: 44px; padding: 12px; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; }
.quick:hover { color: var(--accent); border-color: var(--accent); }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 15px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
}
.button.primary { color: #19130a; background: var(--accent); border-color: var(--accent); }
html[data-theme='light'] .button.primary { color: #fff; }
.button.danger {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  border-color: color-mix(in srgb, var(--danger) 34%, transparent);
}
.button.danger:hover {
  background: color-mix(in srgb, var(--danger) 17%, transparent);
  border-color: color-mix(in srgb, var(--danger) 55%, transparent);
}
.button.subtle:hover { border-color: var(--accent); color: var(--accent); }
[data-admin-async-action] .button:disabled { cursor: wait; opacity: .68; }
[data-full-mushaf-action] .button:disabled { cursor: wait; opacity: .68; }
.inline-button { margin-top: 5px; }
.button-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.action-feedback {
  margin: 12px 0 0;
  padding: 10px 12px;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
}
.action-feedback[data-state='loading'] { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.action-feedback[data-state='success'] { color: var(--success); }
.action-feedback[data-state='error'] { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }
.page-result { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.page-result h3 { margin: 0 0 8px; font-size: 15px; }
.validation-progress {
  display: block;
  width: 100%;
  height: 8px;
  margin-top: 16px;
  accent-color: var(--accent);
}
.form-card { display: grid; gap: 17px; }
.form-card.narrow { max-width: 820px; }
.stack { display: grid; gap: 16px; margin-top: 24px; }
label { display: grid; gap: 7px; color: var(--text-2); font-size: 13px; font-weight: 700; }
input, textarea, select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  outline: none;
}
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.switch-list { border-top: 1px solid var(--border); }
.switch-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 68px; border-bottom: 1px solid var(--border); cursor: pointer; }
.switch-row span:first-child { display: grid; gap: 3px; }
.switch-row small { font-weight: 400; }
.switch-row input { position: absolute; opacity: 0; pointer-events: none; }
.switch { position: relative; width: 44px; height: 26px; background: var(--surface-3); border: 1px solid var(--border); border-radius: 13px; }
.switch::after { position: absolute; top: 3px; inset-inline-start: 3px; width: 18px; height: 18px; content: ''; background: var(--muted); border-radius: 50%; transition: transform 150ms ease; }
.switch-row input:checked + .switch { background: var(--accent-soft); border-color: var(--accent); }
.switch-row input:checked + .switch::after { background: var(--accent); transform: translateX(18px); }
html[dir='rtl'] .switch-row input:checked + .switch::after { transform: translateX(-18px); }
.feature-list { display: grid; }
.feature-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(470px, auto);
  align-items: center;
  gap: 24px;
  min-height: 96px;
  padding: 14px 22px;
  border-top: 1px solid var(--border);
}
.feature-copy { display: grid; gap: 4px; min-width: 0; }
.feature-copy strong, .feature-copy small { overflow-wrap: anywhere; }
.feature-row small { font-size: 12px; }
.feature-controls { display: grid; grid-template-columns: 132px 142px 92px 84px; align-items: end; gap: 12px; }
.feature-control, .feature-toggle { min-width: 0; }
.feature-control > span:first-child, .feature-toggle > span:first-child { min-height: 18px; color: var(--muted); font-size: 11px; font-weight: 700; }
.percent-field { position: relative; display: block; }
.percent-field input { padding-inline-end: 34px; }
.percent-field > span { position: absolute; inset-inline-end: 12px; top: 50%; color: var(--muted); transform: translateY(-50%); pointer-events: none; }
.feature-toggle { display: grid; gap: 7px; }
.switch-control { position: relative; display: flex; align-items: center; min-height: 44px; }
.switch-control input { position: absolute; width: 1px; height: 1px; min-height: 1px; opacity: 0; }
.switch-control input:focus-visible + .switch { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }
.switch-control input:checked + .switch { background: var(--accent-soft); border-color: var(--accent); }
.switch-control input:checked + .switch::after { background: var(--accent); transform: translateX(18px); }
html[dir='rtl'] .switch-control input:checked + .switch::after { transform: translateX(-18px); }
.feature-save { width: 84px; }
.section-toolbar { display: flex; justify-content: flex-end; }
.segmented { display: inline-flex; padding: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; }
.segmented-option { min-height: 36px; padding: 8px 13px; color: var(--muted); border-radius: 8px; }
.segmented-option.active { color: var(--text); background: var(--surface); }
.chart-card { min-height: 280px; }
.line-chart { width: 100%; height: 190px; overflow: visible; }
.chart-line { fill: none; stroke: var(--accent); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.chart-grid { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.bar-row { display: grid; grid-template-columns: 74px 1fr 38px; align-items: center; gap: 10px; min-height: 36px; }
.bar-track { height: 8px; overflow: hidden; background: var(--surface-2); border-radius: 4px; }
.bar-track i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.bar-row strong { text-align: end; }
.table-card { padding: 0; overflow: hidden; }
.table-card > .card-heading { padding: 22px 22px 8px; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 14px 18px; border-top: 1px solid var(--border); text-align: start; white-space: nowrap; }
th { color: var(--muted); font-size: 12px; text-transform: uppercase; }
td small { display: block; }
.notification-compose { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr); align-items: start; gap: 20px; }
.field-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.field-heading small { direction: ltr; unicode-bidi: isolate; }
.field-heading small[data-over-guidance='true'] { color: var(--danger); }
.form-span-2 { grid-column: 1 / -1; }
.preview-panel { min-width: 0; padding: 22px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); }
.preview-heading { display: grid; gap: 16px; }
.preview-heading h2, .preview-heading p { margin-bottom: 0; }
.preview-toolbar { display: grid; gap: 10px; }
.preview-tabs { display: grid; grid-template-columns: repeat(2, 1fr); padding: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; }
.preview-tab, .appearance-button { min-height: 38px; color: var(--muted); background: transparent; border: 0; border-radius: 8px; cursor: pointer; }
.preview-tab.active, .appearance-button.active { color: var(--text); background: var(--surface); font-weight: 700; }
.preview-appearance { display: grid; grid-template-columns: minmax(0, 1fr) 72px 72px; align-items: center; gap: 5px; color: var(--muted); font-size: 12px; }
.device-stage { display: grid; place-items: center; min-height: 420px; padding: 24px 8px; }
.device-frame { width: min(100%, 292px); aspect-ratio: 9 / 17.5; padding: 8px; background: #171717; border: 1px solid #424242; border-radius: 36px; }
.preview-panel[data-preview-device='samsung'] .device-frame { border-radius: 24px; }
.device-screen { position: relative; height: 100%; overflow: hidden; padding: 14px 10px; color: #1d2935; background: #f4f1e8; border-radius: 28px; }
.preview-panel[data-preview-device='samsung'] .device-screen { border-radius: 17px; }
.preview-panel[data-preview-theme='dark'] .device-screen { color: #fff; background: #202020; }
.device-status { display: flex; align-items: center; justify-content: space-between; padding: 0 6px 88px; font-size: 11px; font-weight: 700; }
.notification-preview { display: flex; gap: 10px; width: 100%; padding: 12px; color: #1d2935; background: rgba(255, 255, 255, .96); border: 1px solid rgba(29, 41, 53, .08); border-radius: 15px; box-shadow: 0 9px 24px rgba(0, 0, 0, .12); }
.preview-panel[data-preview-theme='dark'] .notification-preview { color: #fff; background: #303030; border-color: #444; }
.notification-copy { min-width: 0; text-align: start; }
.notification-copy strong, .notification-copy p, .notification-copy small { display: block; color: inherit; overflow-wrap: anywhere; }
.notification-copy p { margin: 3px 0 6px; font-size: 12px; line-height: 1.35; }
.notification-copy strong { line-height: 1.3; }
.notification-category { color: #66727e; font-size: 10px; }
.preview-panel[data-preview-theme='dark'] .notification-category { color: #bcbcbc; }
.preview-note { margin: 0; color: var(--muted); font-size: 12px; text-align: center; }
.app-dot { display: grid; place-items: center; width: 34px; height: 34px; color: #19130a; background: #fca311; border-radius: 9px; font-weight: 700; }
.campaign-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.campaign-actions form { display: flex; align-items: center; gap: 6px; }
.test-push-form { display: grid !important; grid-template-columns: minmax(160px, 1fr) 104px auto; min-width: min(100%, 430px); }
.test-push-status { grid-column: 1 / -1; max-width: 430px; white-space: normal; }
.token-input { min-width: 160px; min-height: 38px; padding: 8px 10px; }
.button:disabled, input:disabled, select:disabled { cursor: not-allowed; opacity: .52; }
.check-row { display: flex; align-items: center; gap: 9px; }
.check-row input { width: 20px; min-height: 20px; accent-color: var(--accent); }
.alert { padding: 11px 13px; border-radius: 8px; }
.alert.error { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); }
.empty { padding: 20px; color: var(--muted); text-align: center; }
/* ── Consistency pass: disclosure, section nav, table scanning, tones ─────── */

/* Quran in-page section navigation. */
.section-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.section-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 5px 13px;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.section-nav a:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }

/* Native disclosure for long technical detail. Summary stays scannable. */
.disclosure { margin-top: 14px; border-top: 1px solid var(--border); }
.disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  cursor: pointer;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 700;
  list-style: none;
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary .icon { color: var(--muted); transition: transform 150ms ease; }
.disclosure[open] > summary .icon { transform: rotate(180deg); }
.disclosure[open] > summary { color: var(--accent); }
.disclosure-body { padding: 2px 0 10px; }

/* Notifications campaigns: collapsed per-row test-push control. */
.test-push-details { margin-top: 4px; }
.test-push-details > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  list-style: none;
}
.test-push-details > summary::-webkit-details-marker { display: none; }
.test-push-details > summary::before {
  content: '';
  width: 0;
  height: 0;
  border-inline-start: 4px solid currentColor;
  border-block: 4px solid transparent;
}
.test-push-details[open] > summary { color: var(--accent); }

/* Feature rows: quieter controls, dimmed disabled state. */
.feature-row { align-items: center; min-height: 84px; padding: 12px 20px; }
.feature-row:not(:has(.switch-control input:checked)) .feature-copy strong,
.feature-row:not(:has(.switch-control input:checked)) .feature-copy small { opacity: .55; }

/* Analytics bars: long labels truncate instead of wrapping. */
.bar-row { grid-template-columns: minmax(0, 86px) 1fr 38px; }
.bar-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Audit log scanability. */
.time-cell bdi { display: block; font-variant-numeric: tabular-nums; }
.time-cell small { display: block; font-size: 11px; opacity: .75; }
.audit-action { font-weight: 600; text-transform: capitalize; }

/* Full Mushaf validation: live tone follows the monitor's data-status so a
   refreshed badge never reads as neutral while a run is active or failed. */
[data-full-mushaf-monitor][data-status='running'] [data-full-mushaf-field='status'],
[data-full-mushaf-monitor][data-status='queued'] [data-full-mushaf-field='status'] {
  color: var(--accent);
  background: var(--accent-soft);
}
[data-full-mushaf-monitor][data-status='failed'] [data-full-mushaf-field='status'] {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 13%, transparent);
}
[data-full-mushaf-monitor][data-status='interrupted'] [data-full-mushaf-field='status'] {
  color: var(--accent);
  background: var(--accent-soft);
}

@media (max-width: 760px) {
  .section-nav a { min-height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .disclosure > summary .icon { transition: none; }
}

/* ── Login ────────────────────────────────────────────────────────────────── */

.login-shell { display: grid; place-items: center; min-height: 100vh; padding: 24px; }
.login-frame {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 430px);
  width: min(100%, 960px);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow);
}
.login-brand {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 42px;
  padding: 36px;
  overflow: hidden;
  background: color-mix(in srgb, var(--surface-2) 52%, var(--surface));
  border-inline-end: 1px solid var(--border);
}
/* Restrained abstract decoration: two offset accent rings, no imagery. */
.login-brand::before,
.login-brand::after {
  content: '';
  position: absolute;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  border-radius: 50%;
}
.login-brand::before { inset-inline-end: -130px; bottom: -170px; width: 360px; height: 360px; }
.login-brand::after {
  inset-inline-end: -64px;
  bottom: -104px;
  width: 228px;
  height: 228px;
  border-color: color-mix(in srgb, var(--accent) 15%, transparent);
}
.login-brand-header { position: relative; z-index: 1; display: flex; align-items: center; gap: 13px; }
.login-brand-wordmark strong { display: block; font-size: 19px; line-height: 1.25; letter-spacing: .02em; }
.login-brand-wordmark small { display: block; color: var(--muted); font-size: 11px; }
.login-brand-copy { position: relative; z-index: 1; display: grid; gap: 7px; max-width: 380px; }
.login-brand-copy h1 { margin: 0; font-size: clamp(25px, 2.6vw, 31px); }
.login-brand-status { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; }
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 3px 11px;
  color: var(--text-2);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.status-chip .icon { color: var(--accent); }
.login-card { display: flex; flex-direction: column; padding: 34px 32px 22px; }
.login-card h2 { margin: 0 0 5px; font-size: 21px; }
.login-subtitle { margin: 0 0 20px; color: var(--muted); font-size: 13px; }
.login-card .alert.error { margin: 0 0 16px; }
.login-card .stack { gap: 14px; margin-top: 0; }
.login-card label { font-size: 13px; }
.login-card input {
  min-height: 47px;
  padding: 11px 13px;
  border-radius: 12px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.login-card input:hover:not(:focus):not(:disabled) { border-color: color-mix(in srgb, var(--accent) 32%, var(--border)); }
.login-card .button.primary {
  width: 100%;
  min-height: 47px;
  margin-top: 8px;
  border-radius: 12px;
  font-size: 15px;
  transition: background-color .15s ease, border-color .15s ease, transform .12s ease;
}
.login-card .button.primary:hover {
  background: color-mix(in srgb, var(--accent) 91%, #000);
  border-color: color-mix(in srgb, var(--accent) 91%, #000);
}
.login-card .button.primary:active { transform: translateY(1px); }
.login-panel-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 26px;
}
.login-footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
}
.login-utilities { display: flex; align-items: center; gap: 8px; }
.login-utilities .language-control select {
  min-width: 102px;
  min-height: 38px;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 13px;
}
.login-utilities .icon-button { width: 38px; height: 38px; border-radius: 11px; }

@media (max-width: 900px) {
  .login-shell { padding: 20px; }
  .login-frame { grid-template-columns: 1fr; width: min(100%, 470px); }
  .login-brand {
    gap: 18px;
    padding: 26px 26px 22px;
    border-inline-end: 0;
    border-bottom: 1px solid var(--border);
  }
  .login-brand::before,
  .login-brand::after { display: none; }
  .login-brand-copy h1 { font-size: 23px; }
  .login-card { padding: 26px 26px 20px; }
}

@media (max-width: 480px) {
  .login-shell { padding: 14px; }
  .login-frame { border-radius: 16px; }
  .login-brand { padding: 22px 20px 18px; }
  .login-brand-status { gap: 6px; }
  .login-card { padding: 22px 20px 18px; }
  .login-utilities .language-control select { min-width: 88px; }
}

@media (max-width: 1050px) {
  .admin-layout { grid-template-columns: 76px minmax(0, 1fr); }
  .sidebar { padding-inline: 10px; }
  .brand { justify-content: center; padding-inline: 0; }
  .brand > span:last-child, .nav-item span, .sidebar-footer .environment, .sidebar-footer .admin-account { display: none; }
  .nav-item { justify-content: center; padding: 0; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .three-column { grid-template-columns: 1fr; }
  .feature-row { grid-template-columns: 1fr; gap: 14px; }
  .feature-controls { grid-template-columns: minmax(120px, 1fr) minmax(130px, 1fr) 92px 84px; }
  .notification-compose { grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr); }
}

@media (max-width: 760px) {
  .admin-layout { display: block; }
  .sidebar { position: fixed; inset-inline-start: 0; width: min(82vw, 280px); padding: 20px 14px; transform: translateX(-105%); transition: transform 180ms ease; box-shadow: var(--shadow); }
  html[dir='rtl'] .sidebar { transform: translateX(105%); }
  body.menu-open .sidebar { transform: translateX(0); }
  .brand { justify-content: flex-start; padding-inline: 10px; }
  .brand > span:last-child, .nav-item span, .sidebar-footer .environment, .sidebar-footer .admin-account { display: flex; }
  .brand > span:last-child { display: block; }
  .nav-item { justify-content: flex-start; padding: 0 12px; }
  .menu-button { display: grid; }
  .topbar { align-items: center; padding: 20px 16px 16px; }
  .topbar h1 { font-size: 23px; }
  .topbar-actions { gap: 6px; }
  .topbar-actions .language-control select { min-width: 92px; max-width: 104px; padding-inline: 8px; }
  .content { padding: 2px 16px 36px; }
  .metric-grid, .metric-grid.compact, .two-column, .three-column, .notification-compose { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-span-2 { grid-column: auto; }
  .feature-row { grid-template-columns: 1fr; padding: 18px; }
  .feature-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-toggle { align-self: end; }
  .feature-save { align-self: end; width: 100%; }
  .preview-panel { padding: 18px; }
  .device-stage { min-height: 380px; padding-inline: 0; }
  .campaign-card .card-heading { align-items: flex-start; }
  .test-push-form { grid-template-columns: minmax(150px, 1fr) 96px; width: min(100%, 390px); }
  .test-push-form .button { grid-column: 1 / -1; }
  .card { padding: 18px; }
}

@media (max-width: 480px) {
  .topbar { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; }
  .topbar h1 { font-size: 21px; overflow-wrap: anywhere; }
  .topbar .page-subtitle { font-size: 13px; }
  .topbar-actions .language-control select { width: 88px; min-width: 88px; }
  .feature-controls { grid-template-columns: 1fr; }
  .feature-save { width: 100%; }
  .preview-appearance { grid-template-columns: 1fr 62px 62px; }
  .device-frame { width: min(100%, 270px); }
  .test-push-form { grid-template-columns: 1fr; min-width: 0; }
  .test-push-form .button, .test-push-status { grid-column: auto; }
  .campaign-actions { min-width: 290px; }
}

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

/* Sanitized Content Sync provider response, shown to authenticated operators
   so a real failure can be reported to Quran Foundation. Never contains
   tokens, credentials, or authorization headers. */
.diagnostic-body {
  margin: 8px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.08);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
  max-height: 240px;
}

/* ── Overview: charts, health ring, delivery donut, activity feed ─────────── */

.overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}
.overview-grid > .card { display: flex; flex-direction: column; }
.donut-card { justify-content: flex-start; }

/* Only reserve chart height when a chart is actually drawn, so an empty state
   never leaves a large void in the card. */
.chart-frame { margin-top: 4px; }
.chart-frame:has(svg) { flex: 1; min-height: 148px; }
.chart-frame .line-chart { width: 100%; height: 148px; }
.chart-frame .empty, .donut-card .empty { padding: 30px 4px; }
.single-point-chart {
  display: grid;
  place-content: center;
  justify-items: center;
  min-height: 148px;
  color: var(--text-2);
}
.single-point-chart strong { color: var(--text); font-size: 32px; line-height: 1; }
.single-point-chart span { margin-top: 5px; font-size: 13px; font-weight: 700; }
.single-point-chart small { margin-top: 5px; color: var(--muted); font-size: 11px; }
.chart-axis { display: flex; justify-content: space-between; margin-top: 8px; color: var(--muted); font-size: 11px; }
.chart-grid.soft { stroke: var(--border); stroke-width: .5; opacity: .45; }
.chart-area { fill: var(--accent-soft); stroke: none; }

.health-card, .donut-card { align-items: stretch; }

.health-ring, .donut { position: relative; display: grid; place-items: center; margin: 6px auto 14px; width: 132px; height: 132px; }
.health-ring svg, .donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-track, .donut-track { fill: none; stroke: var(--surface-3); stroke-width: 9; }
.ring-value, .donut-arc {
  fill: none;
  stroke-width: 9;
  stroke-linecap: round;
  transition: stroke-dasharray .5s ease;
}
.ring-value { stroke: var(--success); }
.health-ring.warning .ring-value { stroke: var(--accent); }
.health-ring.danger .ring-value { stroke: var(--danger); }
.donut-arc.success { stroke: var(--success); }
.donut-arc.danger { stroke: var(--danger); }
.donut-arc.neutral { stroke: var(--muted); }

.ring-label, .donut-center { position: absolute; display: grid; gap: 2px; justify-items: center; text-align: center; }
.ring-label strong, .donut-center strong { font-size: 24px; line-height: 1.2; }
.ring-label small, .donut-center small { color: var(--muted); font-size: 11px; }

.donut-legend { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.donut-legend li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 9px; color: var(--text-2); font-size: 13px; }
.donut-legend li span { width: 10px; height: 10px; border-radius: 3px; background: var(--muted); }
.donut-legend li.success span { background: var(--success); }
.donut-legend li.danger span { background: var(--danger); }

.health-list { display: grid; gap: 2px; margin-top: auto; }

/* Overview Core Health only: keep the existing card footprint while giving
   core services and integrations one compact, consistently aligned rhythm. */
.health-card .health-ring { margin: 0 auto var(--space-3); }
.health-card__sections { display: grid; gap: var(--space-3); margin-top: auto; }
.health-card .health-list { gap: 0; margin-top: 0; }
.health-card .status-line {
  min-height: 40px;
  padding-block: var(--space-2);
}
.health-card .status-line > span:first-child {
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}
.health-card .badge {
  justify-content: center;
  min-width: 84px;
  min-height: 24px;
  padding: 2px var(--space-2);
  line-height: 1.25;
}
.health-card__integrations {
  padding-top: var(--space-3);
  border-top: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
}
.health-card__integrations h3 {
  margin: 0 0 var(--space-1);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.activity-feed { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.activity-feed li {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 4px;
  border-bottom: 1px solid var(--border);
}
.activity-feed li:last-child { border-bottom: 0; }
.activity-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); opacity: .8; }
.activity-feed strong { display: block; font-size: 13px; font-weight: 600; text-transform: capitalize; }
.activity-feed small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.activity-feed time { color: var(--muted); font-size: 11px; white-space: nowrap; }

/* ── Notifications: delivery strip and grouped compose sections ───────────── */

.delivery-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.delivery-strip article {
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.delivery-strip p { margin: 0 0 6px; color: var(--muted); font-size: 12px; }
.delivery-strip strong { font-size: 22px; line-height: 1.2; }
.delivery-strip article.success strong { color: var(--success); }
.delivery-strip article.danger strong { color: var(--danger); }

.form-section { margin: 0 0 22px; padding: 0; border: 0; }
.form-section:last-of-type { margin-bottom: 0; }
.form-section legend {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
}
.section-index {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
}
.section-note { margin: -4px 0 12px; color: var(--muted); font-size: 12px; }

/* ── General polish: focus, hover, tables, empty states ───────────────────── */

.metric-card { transition: border-color .18s ease, transform .18s ease; }
.metric-card:hover { border-color: color-mix(in srgb, var(--accent) 42%, var(--border)); transform: translateY(-1px); }

.card-heading a { color: var(--muted); font-size: 12px; transition: color .16s ease; }
.card-heading a:hover { color: var(--accent); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 8px;
}

tbody tr { transition: background-color .16s ease; }
tbody tr:hover { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }

.empty { padding: 22px 4px; color: var(--muted); font-size: 13px; text-align: center; }

@media (max-width: 1180px) {
  .overview-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .overview-grid > .chart-card { grid-column: 1 / -1; }
  .delivery-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .overview-grid { grid-template-columns: 1fr; }
  .delivery-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .health-ring, .donut { width: 116px; height: 116px; }
  .activity-feed li { grid-template-columns: 8px minmax(0, 1fr); }
  .activity-feed time { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .metric-card, .ring-value, .donut-arc, tbody tr, .card-heading a { transition: none; }
  .metric-card:hover { transform: none; }
}

/* ── Notification preview: tighter, more realistic device mockup ──────────── */

/* Less dead space below the notification, closer to a real lock screen. */
.device-stage { min-height: 360px; padding: 18px 8px; }
.device-frame { aspect-ratio: 9 / 16.4; }
.device-status { padding-bottom: 58px; }

/* Dynamic-island pill on iPhone, speaker slot on Samsung. Drawn in CSS so the
   markup and preview script stay unchanged. */
.device-screen::before {
  content: '';
  position: absolute;
  top: 9px;
  left: 50%;
  width: 78px;
  height: 20px;
  background: #101010;
  border-radius: 12px;
  transform: translateX(-50%);
}
.preview-panel[data-preview-device='samsung'] .device-screen::before {
  top: 8px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

/* Home indicator. */
.device-screen::after {
  content: '';
  position: absolute;
  bottom: 8px;
  left: 50%;
  width: 84px;
  height: 4px;
  background: rgba(29, 41, 53, .28);
  border-radius: 999px;
  transform: translateX(-50%);
}
.preview-panel[data-preview-theme='dark'] .device-screen::after { background: rgba(255, 255, 255, .3); }

/* Keep the status row clear of the island. */
.device-status { position: relative; z-index: 1; padding-top: 2px; }

/* An empty chart state should not reserve the full chart height. The original
   min-height still applies whenever a chart is actually drawn. */
.chart-card:not(:has(svg)) { min-height: 0; }

/* ═══ Density, spacing and proportion pass ════════════════════════════════════
   One 4px rhythm and a small set of readable content measures, replacing the
   ad-hoc 3/5/7/9/11/13/15/17/22/26/36px values that had accumulated. Rules
   below intentionally restate earlier selectors at equal specificity so the
   normalised value wins, keeping the change presentation-only.
   ═════════════════════════════════════════════════════════════════════════ */

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* Readable content measures, chosen per content type rather than per page. */
  --measure-form: 640px;        /* single-column forms */
  --measure-form-wide: 960px;   /* settings-style forms with paired fields */
  --measure-split: 1200px;      /* two-column form layouts */

  --control-height: 44px;
}

/* ── Page rhythm ─────────────────────────────────────────────────────────── */
.content { gap: var(--space-5); padding-bottom: var(--space-8); }

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card { padding: var(--space-5); }
.card-heading { gap: var(--space-4); margin-bottom: var(--space-4); }
.metric-card { gap: var(--space-3); min-height: 116px; padding: var(--space-4) var(--space-5); }
.metric-card p { margin-bottom: var(--space-1); }
.metric-card small { margin-top: var(--space-1); }
.metric-grid { gap: var(--space-4); }
.two-column, .three-column { gap: var(--space-5); }

/* ── Form controls: one height, one rhythm ───────────────────────────────── */
input, textarea, select { min-height: var(--control-height); padding: 10px var(--space-3); }
textarea { min-height: 96px; padding-block: var(--space-3); }
.button { min-height: var(--control-height); padding: var(--space-2) var(--space-4); }
.button-row { gap: var(--space-3); margin-top: var(--space-5); }

label { gap: var(--space-2); }
.form-card { gap: var(--space-5); }
.form-grid { gap: var(--space-4); }
.stack { gap: var(--space-4); margin-top: var(--space-6); }

/* Section grouping: clear separation without vertical stretching. */
.form-section { margin-bottom: var(--space-6); }
.form-section legend { margin-bottom: var(--space-3); }
.form-section > * + * { margin-top: var(--space-4); }
.form-section .form-grid > * { margin-top: 0; }
/* The legend already carries its own bottom spacing; without this the first
   field inherits it a second time and the group looks stretched. */
.form-section > legend + * { margin-top: 0; }
.form-section > .section-note + * { margin-top: 0; }
.section-note { margin: calc(var(--space-1) * -1) 0 var(--space-3); }

/* ── Content measures: deliberate widths, not full-bleed forms ───────────── */
.content > .form-card { max-width: var(--measure-form-wide); }
.content > .form-card.narrow { max-width: var(--measure-form-wide); }
/* Forms that are a single column of simple fields stay genuinely narrow. */
.content > .form-card.compact { max-width: var(--measure-form); }

/* Two-column form layout: paired platform/environment groups sit side by side
   on desktop and the trailing group spans the full width beneath them. */
.content > .form-card.split { max-width: var(--measure-split); }
.form-card.split .form-section {
  padding: var(--space-5);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: 0;
}
@media (min-width: 961px) {
  .form-card.split { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .form-card.split > .card-heading,
  .form-card.split > .button,
  .form-card.split > .form-section:last-of-type { grid-column: 1 / -1; }
  /* Paired groups read better stacked internally at half width. */
  .form-card.split .form-section .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* A submit control keeps its natural size instead of stretching the row. */
  .form-card.split > .button { justify-self: start; }
  /* Standalone fields in a full-width group stay at a readable measure rather
     than stretching a select or textarea across the whole card. */
  .form-card.split .form-section > label { max-width: var(--measure-form); }
}

/* ── Switch rows: compact, consistently aligned ──────────────────────────── */
.switch-row { min-height: 56px; gap: var(--space-5); padding-block: var(--space-3); }
.switch-row span:first-child { gap: var(--space-1); }
.switch-list { border-top: 0; }
/* Inside a grouped section the list reads as rows, not as a bordered block. */
.form-section .switch-row:first-of-type { border-top: 1px solid var(--border); }

/* ── Feature rows and status lines share the switch rhythm ───────────────── */
.feature-row { min-height: 56px; padding-block: var(--space-3); gap: var(--space-4); }
.status-line { padding-block: var(--space-3); gap: var(--space-4); }

/* ── Tables ──────────────────────────────────────────────────────────────── */
th, td { padding: var(--space-3) var(--space-4); }
.table-card { padding: var(--space-5); }
.page-result { margin-top: var(--space-5); padding-top: var(--space-4); }
.page-result h3 { margin: 0 0 var(--space-2); }

/* ── Overview and notification blocks align to the same rhythm ───────────── */
.overview-grid { gap: var(--space-5); margin-bottom: var(--space-5); }
.delivery-strip { gap: var(--space-4); margin-bottom: var(--space-5); }
.delivery-strip article { padding: var(--space-4) var(--space-5); }
.notification-compose { gap: var(--space-5); }
.preview-panel { padding: var(--space-5); }
.quick-grid { gap: var(--space-3); }

/* ── Responsive: preserve density on smaller canvases ────────────────────── */
@media (max-width: 960px) {
  .content > .form-card,
  .content > .form-card.narrow,
  .content > .form-card.split,
  .content > .form-card.compact { max-width: 100%; }
}

@media (max-width: 760px) {
  .content { gap: var(--space-4); }
  .card, .table-card, .preview-panel { padding: var(--space-4); }
  .form-card.split .form-section { padding: var(--space-4); }
  .switch-row, .feature-row { min-height: 52px; }
  th, td { padding: var(--space-3); }
}

/* ── Final polish: proportions and action rhythm ─────────────────────────── */

:root {
  /* Settings-style forms that pair switches with a two-column field grid read
     better a little wider than the generic form measure. */
  --measure-settings: 1100px;
}

/* Remote Config is the only top-level form card; the narrow edit form keeps
   its own measure. */
.content > .form-card { max-width: var(--measure-settings); }
.content > .form-card.narrow { max-width: var(--measure-form-wide); }

/* Bring each switch next to the text it belongs to instead of pinning it to
   the far edge of a wide card. The row and its divider still span the card. */
.switch-row { justify-content: flex-start; gap: var(--space-6); }
.switch-row > span:first-child { flex: 1 1 auto; max-width: 720px; }

/* Quran connection controls: even columns instead of a ragged wrap. Scoped by
   :has() to the only action row built from forms, so submit rows elsewhere are
   untouched. */
.button-row:has(> form) {
  display: grid;
  /* Wide enough that the longest labels stay on one line when two
     columns appear; otherwise the row stays a single tidy column. */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: start;
}
.button-row:has(> form) > form { display: flex; }
.button-row:has(> form) > form > .button { width: 100%; }

/* The destructive action stays connected to the group but visually separated. */
.button-row:has(> form) > form:has(.button.danger) {
  grid-column: 1 / -1;
  margin-top: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
.button-row:has(> form) > form:has(.button.danger) > .button { width: auto; }

/* The inline test-push form keeps its own multi-control layout. */
.button-row:has(> form) > form.test-push-form { display: grid; }

@media (max-width: 760px) {
  .button-row:has(> form) { grid-template-columns: 1fr; }
  .switch-row > span:first-child { max-width: none; }
}

/* ═══ Notification preview: device mockup refinement ══════════════════════════
   Presentation-only polish of the iPhone/Samsung notification mockup. Reuses
   the existing preview bindings, the iPhone/Samsung and Light/Dark toggles,
   and the real NUR brand glyph (the MoonStar mark used in the sidebar and
   login). Communicates "approximately how this will feel on the selected
   platform," not a pixel-accurate OS reproduction — kept restrained, with no
   fake data or decorative clutter added.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Device silhouette: a touch more compact, closer to a modern phone's actual
   proportions, lifted off the panel with a soft ambient shadow instead of
   sitting flat against it. */
.device-frame {
  width: min(100%, 268px);
  aspect-ratio: 9 / 19.5;
  background: linear-gradient(165deg, #2c2c2c, #121212);
  border-color: #050505;
  border-radius: 46px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .04),
    0 26px 54px -22px rgba(0, 0, 0, .55),
    0 10px 22px -12px rgba(0, 0, 0, .4);
}
.preview-panel[data-preview-device='samsung'] .device-frame {
  background: #141414;
  border-radius: 30px;
}

/* Screen: a soft gradient backdrop instead of one flat tone, so the space
   below the notification reads as a wallpaper rather than dead space. Base
   hues stay the same warm-cream / near-black pairing already used. */
.device-screen {
  border-radius: 38px;
  background: radial-gradient(120% 85% at 50% -12%, #fbf3e2 0%, #f4f1e8 55%, #ece5d2 100%);
}
.preview-panel[data-preview-theme='dark'] .device-screen {
  background: radial-gradient(120% 85% at 50% -12%, #272727 0%, #1c1c1c 55%, #141414 100%);
}
.preview-panel[data-preview-device='samsung'] .device-screen { border-radius: 22px; }

/* Dynamic Island: a true stadium pill rather than a lightly-rounded rectangle. */
.device-screen::before {
  top: 12px;
  width: 92px;
  height: 24px;
  background: #0a0a0a;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}
/* Android punch-hole camera, refined to match the new screen scale. */
.preview-panel[data-preview-device='samsung'] .device-screen::before {
  top: 13px;
  width: 11px;
  height: 11px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.device-screen::after { width: 96px; }

/* Status row: cleared of the island with a deliberate margin instead of one
   large padding value standing in for both the island clearance and the gap
   above the notification card. */
.device-status {
  margin-top: 40px;
  padding: 0 6px;
  letter-spacing: .02em;
}
.preview-panel[data-preview-device='samsung'] .device-status { margin-top: 30px; }
.device-status span[aria-hidden='true'] { letter-spacing: 2px; opacity: .82; }

/* Notification card: iOS reads as a frosted, glass-like surface with a large
   radius; Android/Material reads as a flatter, more opaque tonal surface with
   a smaller radius. Both truncate long content gracefully. */
.notification-preview {
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-4);
  background: rgba(255, 255, 255, .74);
  border-color: rgba(29, 41, 53, .06);
  border-radius: 20px;
  box-shadow: 0 16px 30px -12px rgba(29, 41, 53, .22);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
}
.preview-panel[data-preview-theme='dark'] .notification-preview {
  background: rgba(48, 48, 48, .76);
  border-color: rgba(255, 255, 255, .08);
  box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .45);
}
.preview-panel[data-preview-device='samsung'] .notification-preview {
  background: #ffffff;
  border-color: rgba(29, 41, 53, .07);
  border-radius: 16px;
  box-shadow: 0 10px 20px -10px rgba(29, 41, 53, .18);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.preview-panel[data-preview-device='samsung'][data-preview-theme='dark'] .notification-preview {
  background: #2b2b2b;
  border-color: rgba(255, 255, 255, .07);
  box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .5);
}

/* App icon: the real NUR mark (already used in the sidebar and login), drawn
   as an iOS squircle or an Android circle depending on the selected device.
   Colors match the existing gold-on-dark brand pairing used for primary
   actions elsewhere in the Control Center. */
.app-dot {
  flex: none;
  width: 36px;
  height: 36px;
  color: #19130a;
  background: linear-gradient(155deg, #ffc247 0%, #fca311 65%);
  border-radius: 11px;
}
.app-dot .icon { width: 19px; height: 19px; }
.preview-panel[data-preview-device='samsung'] .app-dot { border-radius: 50%; }

/* Copy hierarchy: a small-caps header line, a bold title, a subordinate body
   (both clamped so unusually long content still previews gracefully instead
   of overflowing), and a clearly-subordinate category label. */
.notification-copy small {
  margin-bottom: var(--space-1);
  color: #667080;
  font-size: 11px;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.preview-panel[data-preview-theme='dark'] .notification-copy small { color: #a9a9a9; }
.notification-copy strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.28;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.notification-copy p {
  display: -webkit-box;
  overflow: hidden;
  margin: var(--space-1) 0 var(--space-2);
  font-size: 12.5px;
  line-height: 1.4;
  opacity: .88;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.notification-category {
  display: block;
  margin-top: var(--space-1);
  padding-top: var(--space-2);
  border-top: 1px solid rgba(29, 41, 53, .08);
  letter-spacing: .01em;
  text-transform: uppercase;
}
.preview-panel[data-preview-theme='dark'] .notification-category { border-top-color: rgba(255, 255, 255, .08); }

@media (max-width: 480px) {
  .device-status { margin-top: 36px; }
}

/* ═════════════════════════════════════════════════════════════════════════
   Privacy workspace.

   One screen: revisions on the left, the selected policy on the right. The
   left list means inspecting another revision is a click rather than a page,
   and language is a switch above the document rather than a stacking order.
   Surfaces are layered by depth instead of by border — the workspace sits on
   the page ground, the list is recessed, the document is raised — so the
   section reads as one workspace rather than a stack of cards.
   ═════════════════════════════════════════════════════════════════════════ */

.privacy-workspace {
  display: grid;
  grid-template-columns: minmax(0, 244px) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-5);
}

/* ── Revision list ───────────────────────────────────────────────────────── */
.privacy-revisions {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--surface) 62%, transparent);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.revision-group {
  margin: var(--space-2) 0 0;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.revision-group:first-child { margin-top: 0; }
.revision-list { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
.revision-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  padding: 8px 10px;
  border-radius: 10px;
  border-inline-start: 3px solid transparent;
  color: var(--text-2);
}
.revision-row:hover { background: var(--surface-2); }
.revision-row.is-selected { color: var(--text); background: var(--surface-2); }
/* State reads from the leading edge, so the list stays scannable without a
   badge on every row. */
.revision-row.is-published { border-inline-start-color: var(--success); }
.revision-row.is-draft { border-inline-start-color: var(--accent); }
.revision-row.is-previous { border-inline-start-color: var(--border); }
.revision-row__text { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.revision-row__text strong { font-size: 13px; overflow-wrap: anywhere; }
.revision-row__text small { color: var(--muted); font-size: 11px; }
.revision-row__state {
  margin-inline-start: auto;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.revision-row.is-published .revision-row__state { color: var(--success); }
.revision-row.is-draft .revision-row__state { color: var(--accent); }

/* ── Main pane ───────────────────────────────────────────────────────────── */
.privacy-main {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
  padding: var(--space-5) var(--space-6) var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.privacy-toolbar {
  display: grid;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}
.privacy-toolbar__id { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.privacy-toolbar__id h2 { margin: 0; font-size: 19px; overflow-wrap: anywhere; }
.privacy-toolbar__meta { display: flex; flex-wrap: wrap; gap: 6px; }
.privacy-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 10px;
  color: var(--muted);
  background: var(--surface-2);
  border-radius: 999px;
  font-size: 11.5px;
  overflow-wrap: anywhere;
}
.privacy-toolbar__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.privacy-toolbar__actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.privacy-toolbar__actions form { display: contents; }
.privacy-note { margin: 0; color: var(--muted); font-size: 12.5px; }

/* ── Language switch ─────────────────────────────────────────────────────── */
.lang-switch {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--surface-2);
  border-radius: 11px;
}
.lang-switch__item {
  min-height: 30px;
  padding: 4px 14px;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: 9px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 22px;
  white-space: nowrap;
  cursor: pointer;
}
.lang-switch__item:hover { color: var(--text); }
.lang-switch__item[aria-current='true'] { color: #19130a; background: var(--accent); }
html[data-theme='light'] .lang-switch__item[aria-current='true'] { color: #fff; }
.lang-switch__item.is-disabled { opacity: .45; cursor: not-allowed; }

/* ── The document ────────────────────────────────────────────────────────── */
.privacy-doc {
  min-width: 0;
  /* Wide enough to use the pane, capped so lines stay trackable. `ch` is the
     width of "0" and wider than the average lowercase letter, so this measures
     out at roughly 85 characters — measured, not assumed. */
  max-width: 64ch;
  color: var(--text-2);
  font-size: 15.5px;
  line-height: 1.75;
  /* `anywhere`, not `break-word`: only `anywhere` also collapses the block's
     min-content width, so a long unbroken token can never widen the pane. */
  overflow-wrap: anywhere;
}
.privacy-doc > :first-child { margin-top: 0; }
.privacy-doc > :last-child { margin-bottom: 0; }
.privacy-doc h3 {
  margin: 1.4em 0 .5em;
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
}
.privacy-doc p { margin: 0 0 .95em; }
.privacy-doc ul { margin: 0 0 .95em; padding-inline-start: 1.35em; }
.privacy-doc li { margin-bottom: .35em; }
.privacy-doc[dir='rtl'] { text-align: right; }

/* ── Inline draft editor ─────────────────────────────────────────────────── */
.privacy-editor { display: grid; gap: var(--space-4); min-width: 0; }
.privacy-editor__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  align-items: end;
  gap: var(--space-4);
}
.privacy-editor__pane { min-width: 0; }
.privacy-editor textarea {
  width: 100%;
  font-size: 14px;
  line-height: 1.65;
  resize: vertical;
}
/* Only once the switch is live. Without JavaScript both panes stay visible, so
   no in-progress edit can hide behind a control that never initialised. */
.privacy-editor[data-view='en'] [data-policy-pane='ar'],
.privacy-editor[data-view='ar'] [data-policy-pane='en'] { display: none; }

.privacy-empty { display: grid; gap: var(--space-3); justify-items: start; }
.policy-form__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
}

/* ── Narrower windows ────────────────────────────────────────────────────── */
@media (max-width: 1050px) {
  /* The list becomes a horizontal strip above the document rather than a
     second interaction model. */
  .privacy-workspace { grid-template-columns: minmax(0, 1fr); }
  .privacy-revisions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
  .revision-group { width: 100%; margin: 0; }
  .revision-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .revision-row { border-inline-start-width: 3px; }
}
@media (max-width: 760px) {
  .privacy-main { padding: var(--space-4); }
  .privacy-toolbar__controls { align-items: stretch; flex-direction: column; }
  .lang-switch { width: 100%; }
  .lang-switch__item { flex: 1; text-align: center; }
  .privacy-toolbar__actions .button { flex: 1 1 auto; }
}