:root {
  --brand: #05585D;
  --brand-light: #0A7A7F;
  --accent: #38E4DE;
  --bg: #f4f7f8;
  --card: #fff;
  --ink: #1a2b2e;
  --muted: #5B6F76;
  --border: #d8e2e4;
  --error: #c0392b;
  --success: #1e7e4a;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #08161A;
    --card: #0F2429;
    --ink: #E6EFF1;
    --muted: #7B8E94;
    --border: rgba(255,255,255,.1);
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
}
a { color: var(--brand-light); }
.topbar {
  background: var(--brand);
  color: #fff;
  padding: .75rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.topbar a { color: #fff; text-decoration: none; margin-right: 1rem; }
.topbar .brand { font-weight: 700; margin-right: auto; }
.container { max-width: 1100px; margin: 0 auto; padding: 1.25rem; }
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { padding: .5rem .4rem; border-bottom: 1px solid var(--border); text-align: left; }
.btn {
  display: inline-block;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: .45rem .9rem;
  cursor: pointer;
  text-decoration: none;
  font-size: .9rem;
}
.btn.secondary { background: var(--muted); }
.btn.danger { background: var(--error); }
input, select, textarea {
  width: 100%;
  padding: .5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card);
  color: var(--ink);
}
.form-row { margin-bottom: .75rem; }
label { display: block; font-size: .85rem; color: var(--muted); margin-bottom: .25rem; }
.badge {
  display: inline-block;
  font-size: .75rem;
  padding: .15rem .45rem;
  border-radius: 999px;
  background: var(--border);
}
.badge.ok { background: #c8f0dc; color: #145a32; }
.badge.warn { background: #fdebd0; color: #7d6608; }
.badge.bad { background: #fadbd8; color: #922b21; }
.stats { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.stat { flex: 1; min-width: 120px; }
.tabs { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.tabs a { padding: .4rem .75rem; border-radius: 6px; text-decoration: none; color: var(--ink); border: 1px solid var(--border); }
.tabs a.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.alert { padding: .75rem; border-radius: 6px; margin-bottom: 1rem; }
.alert.error { background: #fadbd8; color: #922b21; }
@media (max-width: 700px) {
  table, thead, tbody, th, td, tr { display: block; }
  thead { display: none; }
  tr { margin-bottom: .75rem; border: 1px solid var(--border); border-radius: 8px; padding: .5rem; }
  td { border: none; }
  td::before { content: attr(data-label); font-weight: 600; display: block; font-size: .75rem; color: var(--muted); }
}