:root { color-scheme: dark light; --bg: #171717; --card: #202020; --raise: #2b2b2b; --fg: #dedede; --mut: #9a9a9a; --acc: #f25623; --on-acc: #171717; --err: #dedede }
@media (prefers-color-scheme: light) { :root { --bg: #dedede; --card: #f4f4f4; --raise: #e8e8e8; --fg: #171717; --mut: #4d4d4d } }
* { box-sizing: border-box }
body { margin: 0; min-height: 100dvh; display: grid; place-items: center; padding: 16px; background: var(--bg); color: var(--fg); font: 16px/1.5 system-ui, "Segoe UI", sans-serif }
main { width: min(24rem, 100%); background: var(--card); border-radius: 20px; padding: 24px }
h1 { margin: 0 0 4px; font-size: 24px; font-weight: 600 }
.sub { margin: 0 0 20px; color: var(--mut); font-size: 14px }
form { display: grid; gap: 16px }
label { display: grid; gap: 6px; color: var(--mut); font-size: 14px }
input { min-height: 44px; border: 1px solid transparent; border-radius: 12px; background: var(--raise); color: var(--fg); padding: 8px 12px; font: inherit; outline: none }
input:focus { border-color: var(--acc) }
button { min-height: 44px; border: 0; border-radius: 999px; background: var(--acc); color: var(--on-acc); font: inherit; font-weight: 600; cursor: pointer }
button:disabled { opacity: .5 }
#msg { margin: 0; min-height: 1.5em; color: var(--fg); font-size: 14px }