:root { --brand: #5b3a8c; --bg: #faf8fd; --fg: #1f1a2b; --muted: #5d5670; --err: #8a1c1c; }
@media (prefers-color-scheme: dark) { :root { --brand: #b79be6; --bg: #17131f; --fg: #eee9f7; --muted: #aaa3bd; --err: #ff9b9b; } }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.7 system-ui, "Hiragino Sans", "Noto Sans JP", sans-serif; }
main { max-width: 48rem; margin: 0 auto; padding: 1.5rem 1rem; }
h1 { font-size: 1.4rem; color: var(--brand); }
button { min-height: 44px; padding: 0.5rem 1.25rem; border: 0; border-radius: 10px; background: var(--brand); color: var(--bg); font: inherit; cursor: pointer; }
.secondary button { background: transparent; color: var(--brand); border: 1px solid var(--brand); margin-top: 1rem; }
input[type=password], input[type=text] { display: block; width: 100%; box-sizing: border-box; min-height: 44px; margin: 0.25rem 0 1rem; padding: 0.5rem; font: inherit; }
.error { color: var(--err); font-weight: 600; }
.notice { font-weight: 600; }
.message { color: var(--muted); min-height: 1.7em; }