:root { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
body { margin: 0; background: #f6f7f9; color: #111; }
.topbar { display:flex; justify-content:space-between; align-items:center; padding: 12px 16px; background:#fff; border-bottom:1px solid #e5e7eb; }
.tabs { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.tab {
  background: #2563eb;          /* Blue (Tailwind blue-600 equivalent) */
  border: 1px solid #1e40af;    /* Darker blue border */
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  color: #ffffff;              /* White text */
  font-weight: 500;
}
.tab:hover {
  background: #1d4ed8;          /* Slightly darker on hover */
}

.tab:active {
  background: #1e40af;          /* Even darker when clicked */
}
.container { max-width: 1100px; margin: 20px auto; padding: 0 14px; }
.card { background:#fff; border:1px solid #e5e7eb; border-radius: 10px; padding: 18px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.card.wide { width: 100%; }
.grid { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:10px; align-items:center; margin: 10px 0; }
.grid input, .grid select { padding: 10px; border:1px solid #d1d5db; border-radius: 8px; }
.inline { display:flex; gap:8px; align-items:center; }
button, .btn { padding: 10px 12px; border:0; border-radius: 8px; background:#111; color:#fff; cursor:pointer; text-decoration:none; display:inline-block; }
.tbl { width:100%; border-collapse: collapse; margin-top: 10px; }
.tbl th, .tbl td { border-bottom:1px solid #e5e7eb; padding: 8px; text-align:left; vertical-align: top; }
.msg { color:#b91c1c; }
.muted { color:#6b7280; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin: 10px 0; }
.danger { background:#991b1b; }
.small { font-size: 12px; }
h3 { grid-column: 1 / -1; margin: 10px 0 0 0; }