:root {
  --bg: #0b1020;
  --panel: #131a2e;
  --panel-soft: #1a2340;
  --text: #edf2ff;
  --muted: #9eabc7;
  --accent: #5fa8ff;
  --accent-2: #7af0d8;
  --ok: #57d38c;
  --warn: #f2c66d;
  --bad: #ff7d87;
  --border: #2c3a60;
  --radius: 14px;
  --shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--text);
  background: radial-gradient(1200px 800px at 20% -10%, #233567 0, var(--bg) 55%);
}

.shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.brand { font-weight: 700; letter-spacing: .4px; }

.nav {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.nav a, .button {
  text-decoration: none;
  color: var(--text);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.02);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 14px;
}

.nav a.active, .button.primary {
  border-color: transparent;
  background: linear-gradient(120deg, var(--accent), #829fff);
  color: #071227;
  font-weight: 600;
}

.grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(12, 1fr);
}

.card {
  grid-column: span 12;
  background: linear-gradient(180deg, var(--panel), #10172a);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
}

@media (min-width: 860px) {
  .span-4 { grid-column: span 4; }
  .span-5 { grid-column: span 5; }
  .span-6 { grid-column: span 6; }
  .span-7 { grid-column: span 7; }
  .span-8 { grid-column: span 8; }
}

h1, h2, h3, p { margin: 0 0 10px; }
h1 { font-size: 28px; }
h2 { font-size: 20px; }

.kpi {
  display: grid;
  gap: 2px;
}
.kpi .value { font-size: 32px; font-weight: 700; }
.muted { color: var(--muted); font-size: 14px; }

.table {
  width: 100%;
  border-collapse: collapse;
}
.table th, .table td {
  border-bottom: 1px solid var(--border);
  text-align: left;
  padding: 10px 8px;
  font-size: 14px;
}

.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
}
.badge.ok { background: rgba(87, 211, 140, 0.18); color: var(--ok); }
.badge.warn { background: rgba(242, 198, 109, 0.2); color: var(--warn); }
.badge.bad { background: rgba(255, 125, 135, 0.2); color: var(--bad); }

.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.log {
  background: #0a1020;
  border: 1px solid var(--border);
  border-radius: 10px;
  max-height: 260px;
  overflow: auto;
  padding: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}

input, select {
  background: #0f1630;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  padding: 8px 10px;
}

.button { cursor: pointer; }
.button.ghost { background: transparent; }

a.tile {
  display: block;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 16px;
  color: var(--text);
  text-decoration: none;
  background: linear-gradient(180deg, #17213f, #11182c);
}

.small { font-size: 12px; color: var(--muted); }