:root { color-scheme: light; --surface: #fdfcf9; --surface-2: #f0efe9; --ink: #101419; --ink-soft: #2a3038; --muted: #6b7280; --line: #e6e5de; --coral: #ff5a3d; --coral-hover: #ee4a2c; --coral-soft: #ffece7; --coral-ink: #b83e28; }

* { box-sizing: border-box; }

html, body { height: 100%; }

body { margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background: radial-gradient(120% 80% at 50% 0%, #fff6f3 0%, var(--surface) 55%); color: var(--ink); display: grid; place-items: center; padding: 24px 16px; -webkit-font-smoothing: antialiased; }

.card { width: 100%; max-width: 400px; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 32px 28px 28px; box-shadow: 0 20px 60px rgba(16, 20, 25, .08); }

.mark { height: 28px; display: block; margin-bottom: 28px; }

h1 { font-size: 1.45rem; line-height: 1.2; letter-spacing: -.01em; margin: 0 0 8px; }

p { margin: 0 0 22px; color: var(--muted); line-height: 1.5; font-size: .97rem; }

label { display: block; font-size: .85rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 8px; }

input { width: 100%; font: inherit; font-size: 1.05rem; letter-spacing: .04em; padding: 13px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); outline: none; }

input:focus { border-color: var(--coral); box-shadow: 0 0 0 4px var(--coral-soft); background: #fff; }

button { margin-top: 14px; width: 100%; font: inherit; font-weight: 600; font-size: 1rem; padding: 13px 16px; border: 0; border-radius: 12px; color: #fff; background: linear-gradient(180deg, #ff6f55 0%, #ff5a3d 55%, #f5502f 100%); cursor: pointer; }

button:hover { filter: brightness(.96); }

.error { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; background: var(--coral-soft); color: var(--coral-ink); font-size: .9rem; line-height: 1.4; }

.foot { margin: 22px 0 0; font-size: .8rem; color: var(--muted); }

@media (prefers-color-scheme: dark) { :root { color-scheme: dark; --surface: #141920; --surface-2: #1c222b; --ink: #f4f3ee; --ink-soft: #d6d5cf; --muted: #9aa0a8; --line: #2a313b; --coral-soft: rgba(255, 90, 61, .16); --coral-ink: #ff8a73; } body { background: radial-gradient(120% 80% at 50% 0%, #1f1a1a 0%, var(--surface) 55%); } .card { background: var(--surface-2); box-shadow: 0 20px 60px rgba(0, 0, 0, .4); } input { background: var(--surface); } input:focus { background: var(--surface); } }