:root {
  color-scheme: light;
  --ink: #172033;
  --muted: #667085;
  --line: #d9e0ea;
  --blue: #2563eb;
  --bg: #eef2f8;
  --card: #ffffff;
  --err: #b42318;
  --err-bg: #fde8e7;
}
@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; --ink: #e6e9ef; --muted: #a3acbb; --line: #2c3444; --bg: #0f1420; --card: #171e2c; --err: #ff8a80; --err-bg: #3a1d1b; }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.login { width: 100%; max-width: 400px; }
.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.brand .mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--blue); color: #fff; font-weight: 800; font-size: 1.2rem; }
.brand strong { display: block; font-size: 1.1rem; }
.brand small { color: var(--muted); }
form { display: grid; gap: 8px; padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); box-shadow: 0 20px 60px #0b142b1f; }
h1 { margin: 0; font-size: 1.35rem; }
.lead { margin: 0 0 8px; color: var(--muted); font-size: 0.9rem; }
label { margin-top: 6px; font-size: 0.82rem; font-weight: 650; }
input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: inherit; font: inherit; }
input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px #2563eb33; }
.password { position: relative; }
.password input { padding-right: 88px; }
.password button { position: absolute; top: 6px; right: 6px; height: 32px; padding: 0 10px; border: 0; border-radius: 8px; background: #2563eb1a; color: var(--blue); font: inherit; font-size: 0.8rem; font-weight: 650; cursor: pointer; }
.primary { margin-top: 12px; min-height: 46px; border: 0; border-radius: 10px; background: var(--blue); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.primary:disabled { opacity: 0.6; cursor: progress; }
.error { margin: 6px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--err-bg); color: var(--err); font-size: 0.88rem; font-weight: 600; }
.hint { margin: 8px 0 0; color: var(--muted); font-size: 0.78rem; }

/* Langues */
.lang-select { display: block; margin: 0 0 14px auto; min-height: 32px; padding: 4px 8px; font-size: 0.85rem; border-radius: 8px; }
html[dir="rtl"] .lang-select { margin: 0 auto 14px 0; }
html[dir="rtl"] body { font-family: "Segoe UI", Tahoma, "Noto Sans Arabic", "Geeza Pro", Arial, sans-serif; }