:root {
  --gap: 1rem;
  --radius: 12px;
  --muted: #6b7280;
  --border: #e5e7eb;
  --bg: #f7f7fb;
  --ink: #111827;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: var(--bg); color: var(--ink); }
.topbar { position: sticky; top: 0; background: #fff; border-bottom: 1px solid var(--border); padding: .85rem var(--gap); display: flex; align-items: center; gap: var(--gap); z-index: 10; }
.topbar h1 { margin: 0; font-size: 1.1rem; }
.topbar nav { margin-left: auto; display: flex; gap: .5rem; }
.topbar a { text-decoration: none; color: #1f2937; padding: .35rem .6rem; border-radius: 8px; }
.topbar a[aria-current="page"], .topbar a:hover { background: #f3f4f6; }
.container { max-width: 1100px; margin: 2rem auto; padding: 0 var(--gap); }
.footer { margin: 2rem 0; text-align: center; color: var(--muted); }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--gap); }
.card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: var(--gap); }
.card img { width: 100%; height: 160px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); }
.card h3 { margin: .25rem 0 .5rem; font-size: 1rem; }
.card p { margin: 0 0 .5rem; color: #374151; }

.form label { display: grid; gap: .4rem; margin-bottom: .8rem; }
.form input, .form textarea, .form select { border: 1px solid #d1d5db; border-radius: 10px; padding: .65rem .75rem; font: inherit; background: #fff; }
.form button { border: 0; border-radius: 10px; padding: .6rem 1rem; cursor: pointer; background: #111827; color: #fff; font-weight: 600; }
.row { display: flex; gap: .5rem; align-items: center; }
.danger { background: #b91c1c; }
.msg { margin-top: .5rem; color: #065f46; }