:root {
  --color-background: 0 0% 8%;
  --color-foreground: 0 0% 92%;
  --color-border: 0 0% 20%;
  --color-muted: 0 0% 12%;
  --color-muted-foreground: 0 0% 60%;
  --color-accent: 0 0% 14%;

  --color-success: 142 71% 50%;
  --color-warning: 38 92% 55%;
  --color-error: 0 84% 65%;

  --space-xs: 0.25rem;
  --space-sm: 0.375rem;
  --space-md: 0.5rem;
  --space-lg: 0.75rem;
  --space-xl: 1rem;
  --space-2xl: 1.5rem;
  --space-3xl: 2rem;

  --radius: 0.125rem;

  --font-mono: 'SF Mono', 'Roboto Mono', 'Consolas', monospace;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-mono);
  background: hsl(var(--color-background));
  color: hsl(var(--color-foreground));
  line-height: 1.4;
  max-width: 100%;
  padding: var(--space-lg);
  font-size: 0.8125rem;
}

header {
  border-bottom: 1px solid hsl(var(--color-border));
  padding-block: var(--space-md);
  margin-bottom: var(--space-xl);

  & h1 {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: hsl(var(--color-muted-foreground));
  }
}

main {
  margin-bottom: var(--space-2xl);

  & h2 {
    font-size: 0.75rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-block: 0 var(--space-md);
    color: hsl(var(--color-muted-foreground));
  }
}

.stats-section {
  margin-bottom: var(--space-2xl);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.stat-card {
  border: 1px solid hsl(var(--color-border));
  padding: var(--space-lg);
  background: hsl(var(--color-muted));

  & .stat-label {
    font-size: 0.625rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: hsl(var(--color-muted-foreground));
    margin-bottom: var(--space-sm);
  }

  & .stat-value {
    font-size: 1.75rem;
    font-weight: 600;
    color: hsl(var(--color-foreground));
    font-variant-numeric: tabular-nums;
  }
}

.chart-container {
  border: 1px solid hsl(var(--color-border));
  padding: var(--space-xl);
  background: hsl(var(--color-muted));
  height: 16rem;
}

section {
  & > div {
    overflow-x: auto;
    border: 1px solid hsl(var(--color-border));
  }

  & > p {
    text-align: center;
    padding: var(--space-xl) var(--space-lg);
    color: hsl(var(--color-muted-foreground));
  }
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;

  & thead {
    background: hsl(var(--color-muted));
    border-bottom: 2px solid hsl(var(--color-border));
  }

  & th {
    padding: var(--space-sm) var(--space-md);
    text-align: left;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.6875rem;
    color: hsl(var(--color-muted-foreground));

    &:nth-child(4) {
      text-align: right;
    }
  }

  & td {
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid hsl(var(--color-border));

    &:first-child {
      color: hsl(var(--color-muted-foreground));
      width: 5rem;
    }

    &:nth-child(2) {
      color: hsl(var(--color-foreground));
    }

    &:nth-child(3) span {
      display: inline-block;
      padding: 2px var(--space-sm);
      font-size: 0.6875rem;
      font-weight: 700;
      letter-spacing: 0.025em;
    }

    &:nth-child(4) {
      color: hsl(var(--color-foreground));
      font-size: 0.6875rem;
      text-align: right;
      font-variant-numeric: tabular-nums;
    }

    &:nth-child(5) {
      color: hsl(var(--color-muted-foreground));
      font-size: 0.6875rem;
    }

    &:nth-child(6) {
      color: hsl(var(--color-foreground));
      font-size: 0.6875rem;
      font-weight: 600;
    }
  }

  & tbody tr {
    &:hover {
      background: hsl(var(--color-accent));
    }

    &:last-child td {
      border-bottom: none;
    }
  }
}

footer {
  padding-block: var(--space-md);
  border-top: 1px solid hsl(var(--color-border));
  color: hsl(var(--color-muted-foreground));
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;

  & p {
    margin: 0;
  }
}

.status-2xx {
  background: hsl(var(--color-success) / 0.15);
  color: hsl(var(--color-success));
  border: 1px solid hsl(var(--color-success) / 0.3);
}

.status-3xx {
  background: hsl(var(--color-warning) / 0.15);
  color: hsl(var(--color-warning));
  border: 1px solid hsl(var(--color-warning) / 0.3);
}

.status-4xx,
.status-5xx {
  background: hsl(var(--color-error) / 0.15);
  color: hsl(var(--color-error));
  border: 1px solid hsl(var(--color-error) / 0.3);
}