:root{color-scheme:dark;--grafito:#1e1e24;--panel:#2a2a33;--texto:#ececf1;--suave:#a9a9b8;--violeta:#6d4fd8;--ambar:#f5a524;--error:#ff8a80}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:grid;place-items:center;background:var(--grafito);color:var(--texto);font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif}
main{width:100%;max-width:26rem;padding:1.5rem}
h1{font-size:1.4rem;margin:.25rem 0 1rem}h2{font-size:1.1rem}
.etiqueta{display:inline-block;margin:0;padding:.1rem .6rem;border-radius:1rem;background:var(--violeta);font-size:.8rem}
form{display:grid;gap:.9rem;background:var(--panel);padding:1.1rem;border-radius:.75rem}
label{display:grid;gap:.25rem;font-size:.9rem;color:var(--suave)}
input{font:inherit;padding:.6rem .7rem;border-radius:.5rem;border:1px solid #44445a;background:#17171c;color:var(--texto)}
input:focus-visible,button:focus-visible{outline:2px solid var(--ambar);outline-offset:2px}
button{font:inherit;padding:.65rem 1rem;border:0;border-radius:.5rem;background:var(--violeta);color:#fff;cursor:pointer}
button:disabled{opacity:.6;cursor:wait}
.mensaje{min-height:1.4em;margin:0;color:var(--error);font-size:.9rem}
.suave{color:var(--suave)}
.aviso{margin-top:1.5rem;font-size:.85rem;color:var(--suave)}.aviso strong{color:var(--ambar)}
[hidden]{display:none!important}