:root {
  /* New color variables used by JS */
  --background-color: #121212;
  --text-color: #fff;
  --secondary-text-color: #aaa;
  --grid-color: #444;
  --axis-color: #fff;
  --toolbar-bg: rgba(34, 41, 53, 0.8);
  --button-bg: #111111;
  --fallback-dark: darkgreen;
  --fallback-light: lightgreen;

  /* Provider colors */
  --openai-dark: #006400;
  --openai-light: #32cd32;
  --gemini-dark: #6403a9;
  --gemini-light: #9370db;
  --anthropic-dark: #888;
  --anthropic-light: #ddd;
  --deepseek-dark: #003366;
  --deepseek-light: #66ccff;
  --fireworks-dark: #5F25F5;
  --fireworks-light: #798af6;
  --together-dark: #027fa9;
  --together-light: #20b0df;
  --groq-dark: #cc5500;
  --groq-light: #ff8c00;
  --xai-dark: #7a0051;
  --xai-light: #a71175;

  /* Price filter */
  --active-price: #32cd32;
  --active-recent: #4d9ae6;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: Arial, sans-serif;
}

/* CSS Grid layout */
body {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

header h1 {
  text-align: center;
  margin: 1rem 0 8px;
}

header h2 {
  text-align: center;
  margin: 8px 0 24px 0;
  font-weight: 300;
  font-size: 1.125rem;
  color: #e0e0e0;

  strong {
    font-weight: 200;
    color: #fff;
  }

  a {
    color: #4d9ae6;
  }
}

header h3 {
  text-align: center;
  margin: 8px 0;
  font-size: 1.5rem;
  font-weight: 300;
}

#chartcontainer {
  margin: 16px;
  position: relative;
  min-height: 0;
}

/* Canvas fills container entirely */
canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* Tooltip styling */
#tooltip {
  position: absolute;
  background: rgba(50, 50, 50, 0.8);
  color: var(--text-color);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  pointer-events: none;
  display: none;
  z-index: 11;
}

/* Legend styling (placed above the chart area) */
#legend {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  display: grid;
  grid-auto-flow: column;
  gap: 8px;
}

.legend-item {
  background: #444;
  padding: 4px 8px;
  border-radius: 8px;
  color: var(--text-color);
  font-size: 18px;
  cursor: pointer;
  transition: opacity 0.3s, transform 0.1s;
}

.legend-item:active {
  transform: scale(0.95);
}

/* Combined controls bar styling */
#controls-bar {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  margin-top: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  background: var(--toolbar-bg);
  padding: 8px 16px;
  border-radius: 8px;
}

/* Price filter styling */
#price-filter {
  display: flex;
  gap: 8px;
}

.price-button {
  width: 60px;
  height: 32px;
  font-size: 18px;
  line-height: 32px;
  cursor: pointer;
  color: var(--text-color);
  background: var(--button-bg);
  border: 1px solid #333;
  border-radius: 8px;
  text-align: center;
  transition: color 0.3s, transform 0.1s;
  padding: 0;
}

.price-button:active {
  transform: scale(0.95);
}

.price-button.active {
  color: var(--active-price);
  border-color: var(--active-price);
}

/* Recent toggle button styling */
.toggle-button {
  width: 120px;
  height: 32px;
  font-size: 18px;
  line-height: 32px;
  cursor: pointer;
  color: var(--text-color);
  background: var(--button-bg);
  border: 1px solid #333;
  border-radius: 8px;
  text-align: center;
  transition: color 0.3s, transform 0.1s;
  padding: 0 12px;
}

.toggle-button:active {
  transform: scale(0.95);
}

.toggle-button.active {
  color: var(--active-recent);
  border-color: var(--active-recent);
}

/* Navigation buttons styling */
#navigation {
  display: flex;
  gap: 8px;
}

.nav-button {
  width: 60px;
  height: 32px;
  font-size: 18px;
  line-height: 32px;
  cursor: pointer;
  color: var(--text-color);
  background: var(--button-bg);
  border: 1px solid #777;
  border-radius: 8px;
  text-align: center;
  transition: transform 0.1s ease;
}

.nav-button:active {
  transform: scale(0.95);
}

.nav-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Remove unused toolbar styling */
#toolbar {
  display: none;
}