:root {
  color-scheme: light;
  --navy: #062b4a;
  --gold: #f4b83f;
  --ink: #17212b;
  --muted: #5f6b76;
  --line: #dfe5e9;
  --paper: #ffffff;
  --wash: #f5f8fa;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--wash); color: var(--ink); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.65; }
header { background: var(--navy); color: white; border-bottom: 5px solid var(--gold); }
.header-inner, main, footer { width: min(900px, calc(100% - 32px)); margin: 0 auto; }
.header-inner { padding: 32px 0 28px; }
.brand { color: var(--gold); font-weight: 900; letter-spacing: .08em; }
h1 { margin: 4px 0 0; font-size: clamp(1.8rem, 5vw, 2.7rem); line-height: 1.15; }
main { margin-top: 28px; margin-bottom: 28px; }
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: clamp(20px, 5vw, 38px); box-shadow: 0 10px 28px rgba(6, 43, 74, .08); }
h2 { color: var(--navy); margin-top: 1.8em; }
h2:first-child { margin-top: 0; }
a { color: #075d9a; font-weight: 650; }
.meta, footer { color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; }
.button { display: inline-block; border-radius: 12px; padding: 11px 16px; background: var(--navy); color: white; text-decoration: none; }
.button.secondary { background: white; color: var(--navy); border: 1px solid var(--navy); }
.language-switcher { display: inline-flex; gap: 6px; margin: 0 0 24px; padding: 5px; border: 1px solid var(--line); border-radius: 15px; background: var(--wash); }
.language-switcher button { min-width: 104px; border: 0; border-radius: 11px; padding: 9px 14px; background: transparent; color: var(--navy); font: inherit; font-weight: 800; cursor: pointer; }
.language-switcher button.selected { background: var(--navy); color: white; box-shadow: 0 3px 0 #031e36; }
[data-language-panel][hidden] { display: none; }
.arabic { direction: rtl; text-align: right; }
footer { padding: 0 0 32px; text-align: center; font-size: .92rem; }
@media (max-width: 520px) { .header-inner, main, footer { width: min(100% - 20px, 900px); } .panel { border-radius: 15px; } }