* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin:0; background:#fafafa; color:#222; }
.container { max-width: 1100px; margin: 0 auto; padding: 16px; }
.topbar { background:#0e7490; color:white; }
.topbar h1 { margin:0; }
.topbar nav a { color:white; margin-right:12px; text-decoration:none; }
.topbar .container { display:flex; align-items:center; justify-content:space-between; }
.footer { background:#f1f5f9; margin-top:24px; padding:12px 0; color:#555; }

h1, h2, h3 { margin: 12px 0; }
.card { background:white; padding: 16px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); margin: 12px 0; }
.table { width: 100%; border-collapse: collapse; background:white; border-radius: 12px; overflow: hidden; }
.table th, .table td { border-bottom: 1px solid #e5e7eb; padding: 10px 12px; text-align:left; }
.table thead { background:#e2e8f0; }
.table tr:hover { background:#f8fafc; }

.inline-form { display:inline-block; margin: 0 6px 6px 0; }
.grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.btn, button, input[type=submit] { background:#0ea5e9; color:white; border:none; border-radius: 8px; padding: 8px 12px; cursor:pointer; }
.btn:disabled, button:disabled { background:#93c5fd; cursor:not-allowed; }
.muted { color:#6b7280; }
.tag { display:inline-block; background:#eef2ff; border:1px solid #c7d2fe; color:#3730a3; padding: 2px 6px; margin: 2px; border-radius: 6px; font-size: 12px; }

.flash-area { margin: 8px 0; }
.flash { padding: 8px 12px; border-radius: 8px; margin-bottom: 6px; }
.flash.success { background:#dcfce7; border:1px solid #86efac; }
.flash.info { background:#e0f2fe; border:1px solid #7dd3fc; }
.flash.error { background:#fee2e2; border:1px solid #fecaca; }