:root { --bg:#f5f5f4; --fg:#1c1917; --muted:#78716c; --card:#fff; --border:#d6d3d1; --accent:#2563eb; }
@media (prefers-color-scheme: dark) { :root { --bg:#1c1917; --fg:#f5f5f4; --muted:#a8a29e; --card:#292524; --border:#44403c; --accent:#60a5fa; } }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; display:flex; flex-direction:column; font-family:system-ui,sans-serif; background:var(--bg); color:var(--fg); }
nav { display:flex; gap:1.25rem; padding:1rem 1.5rem; border-bottom:1px solid var(--border); }
nav a { color:var(--muted); text-decoration:none; font-weight:500; }
nav a:hover, nav a[aria-current="page"] { color:var(--accent); }
main { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:2rem 1rem; }
h1 { font-size:3rem; margin:0; }
.card { width:100%; max-width:28rem; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:1.5rem; }
.card h1 { font-size:1.75rem; margin-bottom:1rem; }
label { display:block; margin:.75rem 0 .25rem; font-size:.9rem; color:var(--muted); }
input, textarea { width:100%; padding:.6rem .75rem; font:inherit; color:var(--fg); background:var(--bg); border:1px solid var(--border); border-radius:8px; }
textarea { min-height:8rem; resize:vertical; }
button { margin-top:1rem; padding:.65rem 1.25rem; font:inherit; font-weight:600; color:#fff; background:var(--accent); border:0; border-radius:8px; cursor:pointer; }
.note { margin-top:1rem; font-size:.85rem; color:var(--muted); }