:root {
  --bg-page: #071a2a !important;
  --bg-card: #09243a !important;
  --bg-input: #071a2a !important;
  --border: #21445f !important;
  --text-bright: #fff9e9 !important;
  --text-body: #e8e2d2 !important;
  --text-dim: #b8c7d1 !important;
  --text-muted: #91a8b8 !important;
  --accent: #28c7d8 !important;
  --accent-deep: #1667b1 !important;
  --accent-light: #c6a6ff !important;
  --green: #28c7d8 !important;
  --gold: #ffc861 !important;
  --coral: #f26b5b !important;
  --magenta: #c6a6ff !important;
  --lavender: #c6a6ff !important;
  --cyan: #28c7d8 !important;
  --pink: #f26b5b !important;
  --chrome: #152f48 !important;
  --shadow-card: 5px 5px 0 #1667b1 !important;
}

html,
body {
  background: var(--bg-page) !important;
  color: var(--text-body) !important;
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}

.graph-card,
.dashboard-window,
.card,
.ribbon {
  border: 2px solid var(--border) !important;
  border-radius: 0 !important;
  box-shadow: var(--shadow-card) !important;
}

.window-chrome,
.header {
  background: #152f48 !important;
}

.accent-bar,
.gradient-accent {
  border-radius: 0 !important;
  background: linear-gradient(90deg, #f26b5b, #ffc861, #28c7d8) !important;
}

button,
select,
input,
.chip,
.pill,
.compliance-badge {
  border-radius: 0 !important;
  min-height: 48px;
}

button:focus-visible,
select:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 3px solid #28c7d8 !important;
  outline-offset: 4px !important;
}

canvas {
  max-width: 100%;
}

.chart-data-view {
  margin: 16px 0 0;
  border: 2px solid var(--border);
  background: var(--bg-input);
  color: var(--text-body);
  font: 0.75rem/1.5 var(--font-head, sans-serif);
}

.chart-data-view summary {
  cursor: pointer;
  min-height: 48px;
  padding: 14px 16px;
  color: var(--text-bright);
  font-weight: 700;
}

.chart-data-scroll {
  overflow-x: auto;
  padding: 0 16px 16px;
}

.chart-data-view table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.chart-data-view th,
.chart-data-view td {
  border-bottom: 1px solid var(--border);
  padding: 8px;
  white-space: nowrap;
}

.chart-data-view th {
  color: var(--text-bright);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}