:root {
  --bg-0: #040a1a;
  --bg-1: #0a1735;
  --card: #0d1f45;
  --card-2: #102957;
  --text: #dce7ff;
  --muted: #8fa6d8;
  --good: #00c48c;
  --warn: #ffb020;
  --bad: #ff5d5d;
  --accent: #33b1ff;
  --line: rgba(140, 168, 220, 0.2);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: "IBM Plex Sans", sans-serif;
  background: radial-gradient(circle at 20% -10%, #1f3e82 0%, transparent 45%),
    radial-gradient(circle at 110% 10%, #0d5f6b 0%, transparent 40%),
    linear-gradient(170deg, var(--bg-0), var(--bg-1));
}

.app-shell {
  width: min(1300px, 95vw);
  margin: 1.25rem auto 1.5rem;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1rem;
  margin-bottom: 1rem;
}

.eyebrow {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  font-size: 0.75rem;
}

h1 {
  margin: 0.2rem 0 0;
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.35rem, 2vw, 2rem);
}

.meta {
  color: var(--muted);
  font-size: 0.92rem;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.kpi {
  padding: 0.95rem 1rem;
  border-radius: 14px;
  background: linear-gradient(155deg, #0e2148 0%, #0a1739 100%);
  border: 1px solid var(--line);
}

.kpi-value {
  margin: 0;
  font-size: clamp(1.1rem, 2.1vw, 1.8rem);
  font-family: "Manrope", sans-serif;
  font-weight: 800;
}

.kpi-label {
  margin: 0.2rem 0 0;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.72rem;
}

.sheet-area {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(16, 41, 87, 0.86), rgba(8, 18, 38, 0.94));
  overflow: hidden;
}

.tabs {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
}

.tab-btn {
  border: none;
  background: transparent;
  color: var(--muted);
  padding: 0.85rem 1rem;
  cursor: pointer;
  font-weight: 600;
  border-right: 1px solid rgba(143, 166, 216, 0.1);
  min-width: 150px;
}

.tab-btn.active {
  color: var(--text);
  background: linear-gradient(180deg, rgba(51, 177, 255, 0.28), rgba(51, 177, 255, 0.05));
}

.sheet-content {
  padding: 1rem;
}

.sheet {
  display: none;
  animation: fadeIn 0.24s ease;
}

.sheet.active {
  display: block;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.panel {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(170deg, rgba(9, 24, 54, 0.85), rgba(8, 17, 36, 0.85));
  padding: 0.85rem;
}

.panel h3 {
  margin: 0 0 0.65rem;
  font-family: "Manrope", sans-serif;
  font-size: 1rem;
}

.metric-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.metric-table th,
.metric-table td {
  padding: 0.45rem;
  border-bottom: 1px solid rgba(140, 168, 220, 0.16);
  text-align: left;
}

.metric-table th {
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bar-row {
  display: grid;
  grid-template-columns: 120px 1fr 55px;
  gap: 0.55rem;
  align-items: center;
  margin-bottom: 0.55rem;
}

.bar-row span {
  font-size: 0.85rem;
}

.track {
  height: 0.65rem;
  border-radius: 10px;
  background: rgba(146, 167, 216, 0.18);
  position: relative;
  overflow: hidden;
}

.fill {
  height: 100%;
  border-radius: 10px;
  background: linear-gradient(90deg, #43d08a, #33b1ff);
}

.legend {
  display: flex;
  gap: 0.8rem;
  color: var(--muted);
  font-size: 0.83rem;
  margin-top: 0.35rem;
}

.dot {
  width: 0.58rem;
  height: 0.58rem;
  border-radius: 100%;
  display: inline-block;
  margin-right: 0.35rem;
}

.chart-shell {
  width: 100%;
  overflow-x: auto;
}

svg text {
  fill: var(--muted);
  font-size: 11px;
  font-family: "IBM Plex Sans", sans-serif;
}

.footnote {
  margin-top: 0.75rem;
  color: var(--muted);
  font-size: 0.78rem;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1024px) {
  .kpi-grid,
  .grid-2 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 720px) {
  .topbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .kpi-grid,
  .grid-2 {
    grid-template-columns: 1fr;
  }

  .bar-row {
    grid-template-columns: 95px 1fr 45px;
  }

  .tab-btn {
    min-width: 125px;
  }
}