:root { color-scheme: dark; --bg:#0b0c0a; --surface:#151613; --line:rgba(255,255,255,.1); --ink:#f4f5ef; --muted:#858880; --verde:#c6f062; --erro:#ff6b61; }
@media (prefers-color-scheme: light) { :root { color-scheme: light; --bg:#eef0e9; --surface:#fff; --line:rgba(16,17,14,.1); --ink:#10110e; --muted:#6f7269; --verde:#b8e650; --erro:#d23f36; } }
* { box-sizing: border-box; }
body { margin:0; min-height:100dvh; display:grid; place-items:center; background:var(--bg); color:var(--ink); font-family:'Inter',system-ui,-apple-system,sans-serif; padding:16px; }
form { width:100%; max-width:360px; background:var(--surface); border:1px solid var(--line); border-radius:28px; padding:28px 22px; display:grid; gap:14px; }
.logo { display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.logo img { width:44px; height:44px; border-radius:12px; }
h1 { margin:0; font-size:28px; letter-spacing:-.03em; }
p { margin:0; color:var(--muted); font-size:13px; }
label { display:grid; gap:6px; font-size:13px; color:var(--muted); }
input { height:48px; border-radius:14px; border:1px solid var(--line); background:transparent; color:var(--ink); padding:0 14px; font:inherit; font-size:16px; }
input:focus { outline:2px solid var(--ink); outline-offset:1px; }
button { height:50px; border:0; border-radius:999px; background:var(--verde); color:#0b0c0a; font:inherit; font-weight:600; font-size:15px; cursor:pointer; margin-top:6px; }
.erro { color:var(--ink); background:color-mix(in srgb, var(--erro) 16%, transparent); border-radius:12px; padding:10px 12px; font-size:13px; display:none; }
.erro.on { display:block; }