:root { color-scheme: dark; }
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: #0f1115; color: #e7e9ee; font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.tarjeta { width: 100%; max-width: 320px; padding: 0 16px; }
.icono { width: 48px; height: 48px; border-radius: 12px; background: #3b6ea5; display: grid; place-items: center; margin: 0 auto 12px; font-size: 20px; }
h1 { font-size: 18px; text-align: center; margin: 0 0 4px; }
p.subt { text-align: center; color: #9aa1ad; font-size: 13px; margin: 0 0 20px; }
.panel { background: #171a21; border: 1px solid #2a2f3a; border-radius: 12px; padding: 20px; }
label { display: block; font-size: 12px; color: #9aa1ad; margin-bottom: 4px; }
input { width: 100%; height: 38px; border-radius: 8px; border: 1px solid #2a2f3a; background: #0f1115; color: #e7e9ee; padding: 0 10px; margin-bottom: 14px; font-size: 14px; }
input:focus { outline: none; border-color: #3b6ea5; }
button { width: 100%; height: 38px; border-radius: 8px; border: none; background: #3b6ea5; color: white; font-size: 14px; font-weight: 600; cursor: pointer; }
button:disabled { opacity: .6; cursor: default; }
.error { background: rgba(200,60,60,.15); color: #ff9a9a; border-radius: 8px; padding: 8px 10px; font-size: 13px; margin-bottom: 14px; }