/* Dark, centred, mobile-first. System fonts only, no remote asset.
   Contrast bar (checked by tests/download-page.test.js): main text >= 7:1, secondary text >= 4.5:1, UI borders >= 3:1. */
:root {
  --bg: #0b1220;
  --surface: #141d31;
  --text: #f2f5fa;
  --text2: #b4c0d4;
  --border: #7585a3;
  --btn-main: #0b4fc4;
  --btn-main-border: #9bbcff;
  --btn-sub: #1b2a47;
  --notice-bg: #ffeb9c;
  --notice-text: #2e2400;
  --notice-border: #c99a00;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 17px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Naskh Arabic", Arial, sans-serif;
  padding: 16px 16px 40px; padding-top: calc(16px + env(safe-area-inset-top));
}
.page { max-width: 480px; margin: 0 auto; padding-top: 56px; }
.lang-ar { display: none; }
html[data-lang="ar"] .lang-fr { display: none; }
html[data-lang="ar"] .lang-ar { display: block; }

.switch { direction: ltr; position: absolute; top: 10px; z-index: 5; display: none; gap: 8px; right: 12px; }
html.js .switch { display: flex; }
.switch button {
  min-width: 56px; min-height: 48px; border-radius: 12px; border: 2px solid var(--border);
  background: var(--surface); color: var(--text); font: 700 16px system-ui, sans-serif; cursor: pointer;
}
.switch button[aria-pressed="true"] { background: var(--btn-main); border-color: var(--btn-main-border); }
.switch button:focus-visible, .btn:focus-visible, summary:focus-visible, .copy-field:focus-visible { outline: 3px solid var(--btn-main-border); outline-offset: 2px; }

.hero { text-align: center; padding: 8px 0 22px; }
.logo { border-radius: 22px; display: block; margin: 0 auto 14px; }
h1 { margin: 0; font-size: 34px; line-height: 1.15; }
.version { margin: 6px 0 20px; color: var(--text2); font-size: 18px; }
.size { margin: 10px 0 0; color: var(--text2); font-size: 15px; }

.btn {
  display: flex; align-items: center; justify-content: center; text-align: center; text-decoration: none;
  min-height: 56px; padding: 12px 20px; border-radius: 16px; font: 700 19px/1.25 system-ui, sans-serif;
  color: #fff; border: 2px solid transparent; cursor: pointer; width: 100%;
}
.btn-main { background: var(--btn-main); border-color: var(--btn-main-border); }
.btn-sub { background: var(--btn-sub); border-color: var(--border); min-height: 48px; font-size: 17px; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 18px; margin: 16px 0; }
.card h2 { margin: 0 0 10px; font-size: 21px; }
.card p { margin: 0 0 12px; }
.steps { margin: 0 0 16px; padding-inline-start: 24px; }
.steps li { margin: 0 0 10px; padding-inline-start: 4px; }
.notice { background: var(--notice-bg); color: var(--notice-text); border: 2px solid var(--notice-border); border-radius: 12px; padding: 12px 14px; margin: 0 !important; font-size: 16px; }
.tip p { color: var(--text); }
.copy-btn, .copy-field, .copy-msg { display: none; }
html.js .copy-btn { display: flex; }
.copy-msg { color: var(--text2); font-size: 15px; margin: 10px 0 0 !important; }
.copy-field { width: 100%; margin-top: 10px; min-height: 48px; padding: 8px 10px; border-radius: 10px; border: 2px solid var(--border); background: var(--bg); color: var(--text); font: 14px ui-monospace, Consolas, monospace; }
.copy-field.show { display: block; }
.copy-msg.show { display: block; }
html[data-lang="ar"] body { font-family: "Noto Naskh Arabic", "Segoe UI", system-ui, Tahoma, Arial, sans-serif; }
@media (prefers-reduced-motion: no-preference) { .btn { transition: filter .15s; } .btn:active { filter: brightness(1.15); } }