:root { color-scheme: light dark; --nen: #f5f5f5; --the: #fff; --chu: #1c1c1c; --vien: #bbb; --chinh: #0b5cad; --loi: #b00020; }
@media (prefers-color-scheme: dark) { :root { --nen: #161616; --the: #242424; --chu: #eee; --vien: #555; --chinh: #5aa2ee; --loi: #ff8a80; } }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--nen); color: var(--chu); font: 18px/1.4 system-ui, sans-serif; }
main { width: 100%; max-width: 380px; background: var(--the); padding: 24px; border-radius: 12px; }
h1 { margin: 0 0 16px; font-size: 24px; }
label { display: block; margin-bottom: 14px; font-weight: 600; }
input { display: block; width: 100%; margin-top: 6px; padding: 12px; font-size: 18px; border: 1px solid var(--vien); border-radius: 8px; background: transparent; color: inherit; }
button { width: 100%; min-height: 52px; font-size: 18px; font-weight: 700; border: 0; border-radius: 8px; background: var(--chinh); color: #fff; cursor: pointer; }
#loi { color: var(--loi); margin: 0 0 12px; }