:root { --primary-color: #0abab5; --white: #fff; }
* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; max-width: 380px; margin: 96px auto; padding: 0 24px; background: #f4f4f5; color: #1a1a1a; }
h1 { font-size: 1.4rem; margin-bottom: 4px; text-align: center; }
p.sub { color: #666; margin-top: 0; margin-bottom: 28px; font-size: 0.9rem; text-align: center; }
.card { background: var(--white); padding: 28px 28px 24px; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
label { display: block; font-size: 0.85rem; font-weight: 500; margin-bottom: 6px; color: #444; }
.form-row { margin-bottom: 14px; }
input { width: 100%; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.95rem; font-family: inherit; }
input:focus { outline: 2px solid var(--primary-color); border-color: transparent; }
button { width: 100%; margin-top: 6px; background: var(--primary-color); color: var(--white); border: none; padding: 11px; border-radius: 6px; cursor: pointer; font-size: 0.95rem; font-weight: 500; }
button:hover { background: #089794; }
button:disabled { opacity: .6; cursor: not-allowed; }
.msg { margin-top: 14px; padding: 10px 12px; border-radius: 6px; font-size: 0.9rem; display: none; }
.msg.err { display: block; background: #fee2e2; color: #991b1b; }
.hint { margin-top: 18px; text-align: center; color: #999; font-size: 0.8rem; }
.hint code { background: #ececec; padding: 1px 5px; border-radius: 3px; font-size: 0.85em; }