:root {
  --sidebar: #290e4a;
  --bg: #050608;
  --bg2: #0b0d12;
  --panel: #0f1319;
  --panel2: #10151e;
  --text: #e8eaee;
  --muted: #9aa0aa;
  --border: #1f2631;
  --accent: #ff8a00;
  --satcom: #44e4ff;
  --kyberdyne: #ff8a00;
  --picogrid: #8b5cf6;
  --external: #7f8794;
  --good: #1faa68;
  --bad: #d64545;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Space Grotesk", "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(900px 500px at 100% -10%, #121722, #07090d 45%, #040507 100%),
    linear-gradient(180deg, #050608, #050608);
}

.layout {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 240px;
  background: linear-gradient(180deg, #2a0f50 0%, #1b0a35 28%, #10061f 62%, #09050f 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: 8px 18px 24px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.logo-wrap {
  height: 102px;
  display: flex;
  align-items: flex-start;
  width: 100%;
}

.logo {
  width: 100%;
  max-width: none;
  max-height: 89px;
  object-fit: contain;
}

.nav {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nav-link {
  color: #d9d0ea;
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 8px;
  font-weight: 500;
}

.nav-link:hover {
  background: rgba(255, 255, 255, 0.1);
}

.nav-link.active {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.main {
  flex: 1;
  padding: 24px 28px 36px;
}

.hero h1 {
  margin: 0 0 6px;
  font-size: 30px;
  letter-spacing: 0.02em;
}

.subtitle {
  margin: 0;
  color: var(--muted);
}

.cards {
  margin-top: 18px;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.card {
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.32);
}

.card .label {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.card .value {
  font-size: 28px;
  font-weight: 650;
  margin-top: 8px;
}

.card-sub {
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
}

.multiline-sub {
  white-space: normal;
}

.status-up { color: #2fda88; }
.status-degraded { color: #ffb34d; }
.status-down { color: #ff6b6b; }
.status-none { color: #8a9099; }

.panel {
  margin-top: 16px;
  background: linear-gradient(180deg, #0f131a, #0d1118);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  width: 100%;
}

.panel-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 10px;
}

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

.panel-body {
  color: var(--muted);
}

.report-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.monitor-controls {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-bottom: 14px;
}

.monitor-control {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}

.monitor-control input {
  border: 1px solid var(--border);
  background: #111722;
  color: var(--text);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
}

.monitor-summary-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-bottom: 14px;
}

.monitor-summary-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #10151d;
  padding: 10px 12px;
}

.monitor-summary-label {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.monitor-summary-value {
  margin-top: 6px;
  font-size: 20px;
  font-weight: 650;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.range-controls {
  display: flex;
  gap: 8px;
}

.range-btn {
  border: 1px solid var(--border);
  background: #111722;
  color: #cfd4dd;
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
}

.range-btn.active {
  border-color: #2f3d55;
  background: #172235;
  color: #fff;
}

.legend {
  display: flex;
  gap: 18px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.legend .dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
}

.legend .satcom { background: var(--satcom); }
.legend .kyberdyne { background: var(--kyberdyne); }
.legend .picogrid { background: var(--picogrid); }
.legend .external { background: var(--external); }

.throughput-chart {
  display: block;
  width: 100%;
}

.infra-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.infra-table th,
.infra-table td {
  text-align: left;
  padding: 10px 8px;
  border-bottom: 1px solid var(--border);
}

.pill {
  display: inline-block;
  border-radius: 999px;
  padding: 4px 9px;
  border: 1px solid var(--border);
  background: #121925;
}

.pill.healthy { color: #2fda88; border-color: rgba(47, 218, 136, 0.25); }
.pill.degraded { color: #ff8a80; border-color: rgba(255, 138, 128, 0.25); }
.pill.none { color: #98a0ab; border-color: rgba(152, 160, 171, 0.25); }

.inventory-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px;
}

.inventory-table th,
.inventory-table td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
}

.active-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.active-table th,
.active-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  white-space: nowrap;
}

.status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #999;
}

.status-ground { background: #2e7d32; }
.status-flight { background: #1976d2; }
.status-terminated { background: #8b5a2b; }

.sub-status {
  display: inline-block;
}

.map-canvas {
  width: 100%;
  height: 460px;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-top: 10px;
  background: #0d1118;
  overflow: hidden;
}

.map-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 14px;
}

@media (max-width: 1200px) {
  .cards { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
}

@media (max-width: 900px) {
  .layout { flex-direction: column; }
  .sidebar { width: 100%; }
  .main { padding: 18px 14px 28px; }
  .cards { grid-template-columns: 1fr; }
}