:root {
    color-scheme: light;
    --surface-1: #ffffff;
    --surface-2: #f8fafc;
    --plane: #f1f5f9;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --border: #e2e8f0;
    --border-strong: #cbd5e1;
    --accent: #00566a;
    --accent-ink: #ffffff;
    --accent-soft: rgba(6, 172, 191, .14);
    --brand-aqua: #06acbf;
    --critical: #b81230;
    --shadow: 0 1px 3px rgba(11,15,25,.06), 0 12px 32px rgba(11,15,25,.08);
  }
  @media (prefers-color-scheme: dark) {
    :root:where(:not([data-theme="light"])) {
      color-scheme: dark;
      --surface-1: #1e293b;
      --surface-2: #172033;
      --plane: #020817;
      --text-primary: #f8fafc;
      --text-secondary: #cbd5e1;
      --text-muted: #94a3b8;
      --border: #334155;
      --border-strong: #3f4d63;
      --accent: #06acbf;
      --accent-ink: #04212a;
      --accent-soft: rgba(6, 172, 191, .20);
      --shadow: none;
    }
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; height: 100%; }
  body {
    background: var(--plane);
    color: var(--text-primary);
    font: 15px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    display: flex; align-items: center; justify-content: center;
    padding: 24px 16px;
  }
  /* léger halo aqua, discret, qui rappelle la charte */
  body::before {
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background: radial-gradient(60rem 30rem at 50% -10rem, var(--accent-soft), transparent 70%);
  }
  .card {
    position: relative; z-index: 1;
    width: 100%; max-width: 430px;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
    padding: 32px 28px 26px;
    text-align: center;
  }
  .logo { height: 110px; width: auto; max-width: 280px; margin: 0 auto 20px; display: block; }
  .brand-mark {
    display: inline-flex; align-items: center; justify-content: center;
    height: 44px; padding: 0 14px; border-radius: 10px; margin-bottom: 18px;
    background: var(--accent); color: var(--accent-ink); font-weight: 700; letter-spacing: .08em;
  }
  h1 { font-size: 19px; font-weight: 650; margin: 0 0 4px; letter-spacing: -.01em; }
  p.sub { margin: 0 0 22px; color: var(--text-muted); font-size: 13.5px; }
  button.primary {
    font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
    width: 100%; padding: 12px 18px; border-radius: 10px; border: 1px solid transparent;
    background: var(--accent); color: var(--accent-ink); transition: filter .15s;
  }
  button.primary:hover { filter: brightness(1.08); }
  button.primary:disabled { opacity: .5; cursor: not-allowed; }
  .meta { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-muted); }
  .meta .row { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }
  .meta .row span:last-child { color: var(--text-secondary); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
  .alert {
    text-align: left; font-size: 13px; line-height: 1.5;
    border: 1px solid color-mix(in srgb, var(--critical) 45%, var(--border-strong));
    background: color-mix(in srgb, var(--critical) 7%, var(--surface-1));
    color: var(--text-primary);
    border-radius: 10px; padding: 11px 13px; margin-bottom: 18px;
  }
  .alert b { color: var(--critical); }
  .footnote { margin-top: 14px; font-size: 12px; color: var(--text-muted); }
  button.secondary {
    font: inherit; font-size: 13.5px; font-weight: 550; cursor: pointer;
    width: 100%; padding: 10px 16px; margin-top: 10px; border-radius: 10px;
    background: transparent; color: var(--text-secondary); border: 1px solid var(--border-strong);
  }
  button.secondary:hover { color: var(--text-primary); }