:root { --fond: #f4f5f7; --carte: #fff; --texte: #1d2330; --doux: #5b6475; --accent: #1f6feb; --erreur: #b42318; --bord: #d6dae1; }
@media (prefers-color-scheme: dark) {
  :root { --fond: #111418; --carte: #1b2027; --texte: #e6e9ee; --doux: #9aa4b2; --accent: #4c8dff; --erreur: #ff6b5e; --bord: #2c333d; }
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--fond); color: var(--texte); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; padding: 16px; }
.carte { width: 100%; max-width: 420px; background: var(--carte); border: 1px solid var(--bord); border-radius: 12px; padding: 28px; }
.marque { margin: 0 0 8px; font-weight: 700; letter-spacing: .04em; color: var(--accent); }
h1 { font-size: 1.35rem; margin: 0 0 16px; }
label { display: block; margin: 14px 0 4px; font-weight: 600; font-size: .95rem; }
input[type=text], input[type=email], input[type=password] { width: 100%; padding: 10px 12px; border: 1px solid var(--bord); border-radius: 8px; background: transparent; color: inherit; font-size: 1rem; }
button { margin-top: 20px; width: 100%; padding: 11px; border: 0; border-radius: 8px; background: var(--accent); color: #fff; font-size: 1rem; font-weight: 600; cursor: pointer; }
button.secondaire { background: transparent; color: var(--doux); border: 1px solid var(--bord); margin-top: 10px; }
.client { padding: 10px 12px; border-radius: 8px; border: 1px solid var(--bord); margin-bottom: 8px; }
.client strong { display: block; }
.erreur { color: var(--erreur); margin: 12px 0 0; }
.info { color: var(--doux); font-size: .92rem; }
.codes { font-family: ui-monospace, Consolas, monospace; columns: 2; padding-left: 18px; }
.qr { display: block; margin: 12px auto; width: 200px; height: 200px; image-rendering: pixelated; background: #fff; padding: 8px; border-radius: 8px; }
.cle { font-family: ui-monospace, Consolas, monospace; word-break: break-all; font-size: .9rem; }
a { color: var(--accent); }