* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin:0; }
.nav { display:flex; gap:1rem; padding:1rem; border-bottom:1px solid #eee; position:sticky; top:0; background:#fff; }
.nav a { text-decoration:none; color:#111; }
.container { max-width: 900px; margin: 1.5rem auto; padding: 0 1rem; }
.footer { border-top:1px solid #eee; padding:1rem; text-align:center; margin-top:2rem; color:#666; }
.alert { background:#f1f7ff; border:1px solid #cfe0ff; padding:.75rem 1rem; border-radius:.5rem; margin-bottom:1rem; }
.card { border:1px solid #eee; border-radius:.75rem; padding:1rem; }
.list { list-style:none; padding:0; margin:0; }
.list-item { display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #eee; padding:.75rem 0; }
.btn { display:inline-block; padding:.5rem .75rem; border:1px solid #111; border-radius:.5rem; text-decoration:none; color:#111; }
.form { display:grid; gap:.75rem; max-width:720px; }
.form input[type="text"], .form input[type="email"], .form textarea { width:100%; padding:.5rem .7rem; border:1px solid #ccc; border-radius:.5rem; }
.form button { padding:.6rem .9rem; border:1px solid #111; border-radius:.5rem; background:#111; color:#fff; cursor:pointer; }
.error { color:#b00020; font-size:.9rem; }
.checkbox { display:flex; gap:.5rem; align-items:center; }
.flex-between { display:flex; align-items:center; justify-content:space-between; }
.muted { color:#666; }
.pill { display:inline-block; padding:.1rem .5rem; border-radius:999px; border:1px solid #ddd; font-size:.8rem; color:#333; }
.prose { white-space:pre-wrap; }
code { background:#f6f6f6; padding:.1rem .3rem; border-radius:.3rem; }