:root { --bg: #f4f6f4; --surface: #ffffff; --ink: #19231f; --muted: #5d6b65; --line: #d9e1dc; --accent: #0f6b58; --accent-ink: #ffffff; --danger: #b13a2e; --danger-soft: #f8e3e0; }
@media (prefers-color-scheme: dark) { :root { --bg: #111715; --surface: #18201d; --ink: #e5ece8; --muted: #9caaa4; --line: #2b3632; --accent: #52c1a5; --accent-ink: #0b1512; --danger: #f07a6c; --danger-soft: #3a1d1a; color-scheme: dark; } }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: var(--bg); color: var(--ink); font-family: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif; padding: 16px; }
form { width: min(360px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 28px 24px; display: grid; gap: 14px; }
h1 { margin: 0 0 4px; font-family: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif; font-size: 1.7rem; }
.eyebrow { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
label { display: grid; gap: 4px; font-size: .85rem; color: var(--muted); }
input { font: inherit; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
input:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button { font: inherit; font-weight: 600; background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 8px; padding: 11px; cursor: pointer; margin-top: 4px; }
.erro { margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--danger-soft); color: var(--danger); font-size: .9rem; }