:root{--fond:#f6f7f6;--carte:#fff;--encre:#111413;--encre-2:#4b524f;--ligne:#e3e6e4;--signal:#19c58f;--alerte:#b42318}
@media (prefers-color-scheme:dark){:root{--fond:#0f1110;--carte:#171a19;--encre:#eef1ef;--encre-2:#a7b0ac;--ligne:#2a2f2d;--alerte:#f97066}}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px;background:var(--fond);color:var(--encre);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
main{width:100%;max-width:420px;background:var(--carte);border:1px solid var(--ligne);border-radius:16px;padding:32px 28px}
.marque{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:-.02em;margin-bottom:24px}
.marque i{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--signal)}
h1{font-size:22px;line-height:1.25;margin:0 0 8px}
p{margin:0 0 16px;color:var(--encre-2)}
form{display:grid;gap:12px;margin-top:8px}
label{font-size:14px;font-weight:500}
input{width:100%;padding:12px 14px;font:inherit;border:1px solid var(--ligne);border-radius:10px;background:var(--fond);color:var(--encre)}
input.code{font-size:24px;letter-spacing:.3em;text-align:center;font-variant-numeric:tabular-nums}
button{padding:12px 16px;font:inherit;font-weight:600;border:0;border-radius:10px;background:var(--encre);color:var(--carte);cursor:pointer}
button.discret{background:none;color:var(--encre-2);font-weight:400;text-decoration:underline;padding:4px 0}
.erreur{color:var(--alerte);font-weight:500}
.resultats{list-style:none;padding:0;margin:0 0 16px;display:grid;gap:8px}
.resultats li{border:1px solid var(--ligne);border-radius:10px;padding:12px 14px;overflow-wrap:anywhere}
.resultats li.ferme{opacity:.6}
small{color:var(--encre-2)}