* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: #0e1320;
  color: #f3f5fa;
}

.container { max-width: 1200px; margin: 0 auto; padding: 20px; }
.card {
  background: #182037;
  border: 1px solid #2b3551;
  border-radius: 12px;
  padding: 16px;
}
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.col { flex: 1 1 360px; }
input, button, select, textarea {
  font: inherit;
}
input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #374568;
  background: #101828;
  color: #f3f5fa;
}
button {
  border: 0;
  border-radius: 8px;
  padding: 10px 14px;
  background: #4f7cff;
  color: #fff;
  cursor: pointer;
}
button.secondary {
  background: #2b3551;
}
h1, h2, h3 { margin-top: 0; }
.tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.tab { background: #2b3551; }
.tab.active { background: #4f7cff; }
.muted { color: #a8b3d1; }
.error { color: #ff8ca5; }
.ok { color: #83f5b0; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
th, td {
  text-align: left;
  border-bottom: 1px solid #2a3658;
  padding: 8px 6px;
  vertical-align: top;
}

.scroll { overflow: auto; max-height: 460px; }
.pill {
  border-radius: 999px;
  padding: 2px 10px;
  background: #243254;
  font-size: 12px;
  display: inline-block;
}