/* ===== base: tokens derived from the theme variables (never hard-coded colours) ===== */
:root {
  --r: var(--radius, 16px);
  --r-sm: calc(var(--radius, 16px) * .6);
  --r-lg: calc(var(--radius, 16px) * 1.4);
  --border: color-mix(in srgb, var(--text) 11%, transparent);
  --border-2: color-mix(in srgb, var(--text) 22%, transparent);
  --glass: color-mix(in srgb, var(--surface) 66%, transparent);
  --field: color-mix(in srgb, var(--surface-2) 70%, transparent);
  --hover: color-mix(in srgb, var(--text) 7%, transparent);
  --grad: linear-gradient(135deg, var(--primary), var(--accent));
  --grad-soft: linear-gradient(135deg, color-mix(in srgb, var(--primary) 22%, transparent), color-mix(in srgb, var(--accent) 16%, transparent));
  --glow: color-mix(in srgb, var(--primary) 50%, transparent);
  --glow-2: color-mix(in srgb, var(--accent) 45%, transparent);
  --on-primary: var(--text);
  --stage: radial-gradient(120% 85% at 50% 0%, color-mix(in srgb, var(--primary) 14%, #05060a), #05060a 72%); /* خلفية داكنة ثابتة لصور الكروت في كل الثيمات (الصور نفسها خلفيتها سودا) */
  --shadow-1: 0 8px 24px color-mix(in srgb, #000 30%, transparent);
  --shadow-2: 0 22px 60px color-mix(in srgb, #000 45%, transparent);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --t: .22s var(--ease);
  --header-h: 64px;
  --bottom-h: 0px;
  --gutter: 16px;
  --card-bg: var(--glass);
  --card-border: var(--border);
  --card-blur: blur(14px) saturate(140%);
  --warn: #e0a100; /* لون «بيتحدّث/تنبيه» للنقاط (الثيمات مابتحدّدوش) */
  --ok-bg: color-mix(in srgb, var(--success) 16%, transparent);
  --bad-bg: color-mix(in srgb, var(--danger) 16%, transparent);
  --info-bg: color-mix(in srgb, var(--accent) 16%, transparent);
  --pri-bg: color-mix(in srgb, var(--primary) 20%, transparent);
}
html[data-scheme="light"] {
  --shadow-1: 0 6px 20px color-mix(in srgb, var(--text) 10%, transparent);
  --shadow-2: 0 20px 50px color-mix(in srgb, var(--text) 16%, transparent);
  --glass: color-mix(in srgb, var(--surface) 78%, transparent);
  --border: color-mix(in srgb, var(--text) 12%, transparent);
  --field: color-mix(in srgb, var(--surface-2) 85%, var(--surface));
}
html[data-card-style="solid"] { --card-bg: var(--surface); --card-blur: none; }
html[data-card-style="outline"] { --card-bg: transparent; --card-border: var(--border-2); --card-blur: none; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  background: var(--bg); color: var(--text);
  font-family: var(--font, system-ui, sans-serif); font-size: 15px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
/* static ambient glow (not an animated background) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(900px 480px at 85% -8%, color-mix(in srgb, var(--primary) 20%, transparent), transparent 70%),
    radial-gradient(760px 420px at 5% 6%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%);
}
html[data-scheme="light"] body::before {
  background:
    radial-gradient(900px 480px at 85% -8%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 70%),
    radial-gradient(760px 420px at 5% 6%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%);
}
html.dlg-open { overflow: hidden; }

h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { line-height: 1.25; font-weight: 700; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg, canvas { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled, [aria-disabled="true"] { cursor: not-allowed; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: color-mix(in srgb, var(--primary) 45%, transparent); }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
:focus:not(:focus-visible) { outline: none; }

/* thin scrollbars that follow the theme */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text) 25%, transparent) transparent; }

.skip-link {
  position: fixed; inset-block-start: -60px; inset-inline-start: 12px; z-index: 3000;
  background: var(--primary); color: var(--on-primary); padding: 8px 14px; border-radius: var(--r-sm); font-weight: 600;
}
.skip-link:focus { inset-block-start: 10px; text-decoration: none; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }

.noscript-notice {
  position: fixed; inset: 0; z-index: 5000; display: grid; place-content: center; text-align: center; gap: 8px;
  background: var(--bg); color: var(--text); padding: 24px; font-size: 18px;
}

/* numbers, ids, keys, addresses stay left-to-right inside RTL text */
.num { direction: ltr; unicode-bidi: isolate; display: inline-block; font-variant-numeric: tabular-nums; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; direction: ltr; unicode-bidi: isolate; }
.muted { color: var(--muted); }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.ic { flex: none; vertical-align: middle; }
[dir="rtl"] .ic-flip { transform: scaleX(-1); }
.clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.bidi-auto { unicode-bidi: plaintext; text-align: start; }