* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: #0E1621; color: #D6DEE8; font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; display: flex; flex-direction: column; }
.cls { background: #2F7D4F; color: #F2FFF6; text-align: center; font: 600 11px ui-monospace, Menlo, monospace; letter-spacing: .14em; padding: 3px 8px; }
main { flex: 1; display: grid; place-items: center; padding: 24px; }
form { width: min(100%, 22rem); border: 1px solid #243649; background: #13202E; padding: 28px 24px; }
h1 { margin: 0 0 6px; font: 600 20px ui-monospace, Menlo, monospace; }
p { margin: 0 0 20px; color: #8296AB; font-size: 14px; line-height: 1.5; }
label { display: block; font: 12px ui-monospace, Menlo, monospace; color: #8296AB; margin-bottom: 6px; }
input { width: 100%; font: 16px ui-monospace, Menlo, monospace; padding: 12px; background: #0E1621; color: #D6DEE8; border: 1px solid #2E465E; margin-bottom: 16px; }
input:focus { outline: 2px solid #E8A33D; outline-offset: 0; }
button { width: 100%; font: 600 15px ui-monospace, Menlo, monospace; padding: 12px; background: #E8A33D; color: #1A1206; border: 0; cursor: pointer; }
button:focus-visible { outline: 2px solid #D6DEE8; outline-offset: 2px; }
.err { color: #E5484D; margin: -6px 0 14px; }
.fine { margin: 14px 0 0; font-size: 12px; }