:root {
  color-scheme: dark;
  --surface-lowest: #0a0e17;
  --surface-low: #181b25;
  --surface: #1c1f29;
  --surface-high: #262a34;
  --surface-highest: #31353f;
  --on-surface: #dfe2ef;
  --on-surface-variant: #bec8d2;
  --outline: #88929b;
  --outline-variant: #3e4850;
  --primary: #89ceff;
  --primary-container: #0ea5e9;
  --on-primary: #00344d;
  --up: #4edea3;
  --down: #ffb2b7;
  /* Diagramm-Chrome */
  --grid: #232834;
  --axis: #3e4850;
}

html, body { overscroll-behavior: none; }
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20; user-select: none; }

.kpi-label {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; line-height: 12px; letter-spacing: .05em;
  font-weight: 600; text-transform: uppercase; color: var(--outline);
}

.nav-link {
  padding: .5rem .75rem; border-radius: .25rem; color: var(--on-surface-variant); font-size: 13px; white-space: nowrap;
  transition: color .15s, background-color .15s;
}
.nav-link:hover { color: var(--on-surface); }
.nav-link[aria-current="page"] { background: var(--surface-high); color: var(--primary); font-weight: 600; }

.btn-primary, .btn-ghost {
  display: inline-flex; align-items: center; gap: .375rem; padding: .375rem .75rem; border-radius: .25rem;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; line-height: 14px; font-weight: 600;
  transition: opacity .15s, background-color .15s;
}
.btn-primary { background: var(--primary-container); color: #00202f; }
.btn-primary:hover { opacity: .92; }
.btn-primary:disabled { opacity: .5; cursor: progress; }
.btn-ghost { background: var(--surface); color: var(--on-surface); font-weight: 500; padding-inline: .5rem; }
.btn-ghost:hover { background: #353943; }
.btn-danger { color: #ffb4ab; }

.cur-btn, .mode-btn { color: var(--outline); transition: color .15s, background-color .15s; }
.cur-btn:hover, .mode-btn:hover { color: var(--on-surface); }
.cur-btn[aria-pressed="true"] { background: var(--surface-high); color: var(--on-surface); font-weight: 600; }
.mode-btn[aria-pressed="true"] { background: var(--surface-highest); color: var(--primary); }

.tab {
  padding: .375rem .75rem; border-radius: .25rem; flex-shrink: 0; white-space: nowrap;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; line-height: 14px; font-weight: 500;
  background: var(--surface); color: var(--on-surface-variant); transition: background-color .15s, color .15s;
}
.tab:hover { background: var(--surface-high); color: var(--on-surface); }
.tab[aria-selected="true"] { background: var(--primary-container); color: #00202f; }

.th { padding: .625rem .75rem; font-weight: 600; white-space: nowrap; }
.td { padding: .625rem .75rem; white-space: nowrap; }

.row { cursor: pointer; transition: background-color .12s; }
.row:hover { background: rgba(38, 42, 52, .55); }
.row:focus-visible { outline: 1px solid var(--primary); outline-offset: -1px; }
.row[aria-selected="true"] { background: rgba(14, 165, 233, .09); box-shadow: inset 2px 0 0 var(--primary-container); }
.row.alert { box-shadow: inset 2px 0 0 #ff697b; }

.input {
  background: var(--surface-low); color: var(--on-surface); border: 1px solid rgba(62, 72, 80, .6);
  border-radius: .25rem; padding: .4rem .6rem; font-size: 13px;
}
.input:focus { outline: none; border-color: var(--primary); }
.input::placeholder { color: var(--outline); }

.code { font-family: 'JetBrains Mono', monospace; font-size: 11px; background: var(--surface-high); padding: 0 .25rem; border-radius: .125rem; }

.dialog {
  width: min(560px, calc(100vw - 2rem)); padding: 1rem; border-radius: .5rem; color: var(--on-surface);
  background: var(--surface-high); border: 1px solid rgba(62, 72, 80, .6); box-shadow: 0 24px 64px rgba(0, 0, 0, .6);
  margin: 10vh auto auto;
}
.dialog::backdrop { background: rgba(5, 8, 14, .7); backdrop-filter: blur(2px); }

.chip {
  display: inline-flex; align-items: center; gap: .25rem; padding: .125rem .375rem; border-radius: .25rem;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; line-height: 14px; font-weight: 500;
}
.up { color: var(--up); }
.down { color: var(--down); }
.chip.up { background: rgba(0, 165, 114, .16); }
.chip.down { background: rgba(255, 105, 123, .14); }
.chip.flat { background: var(--surface); color: var(--outline); }

/* Diagramme */
.chart { position: relative; width: 100%; user-select: none; touch-action: pan-y; }
.chart svg { display: block; overflow: visible; }
.chart .grid-line { stroke: var(--grid); stroke-width: 1; }
.chart .axis-label { fill: var(--outline); font: 500 10px 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }
.chart .baseline { stroke: var(--axis); stroke-width: 1; }
.chart .ref-line { stroke: var(--outline); stroke-width: 1; stroke-dasharray: 3 3; opacity: .6; }
.chart .crosshair { stroke: var(--outline); stroke-width: 1; }
.chart-tip {
  position: absolute; pointer-events: none; z-index: 5; min-width: 120px; padding: .375rem .5rem; border-radius: .25rem;
  background: var(--surface-highest); border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
  font: 500 11px/1.35 'JetBrains Mono', monospace; color: var(--on-surface-variant); white-space: nowrap;
}
.chart-tip .tip-date { color: var(--outline); margin-bottom: .125rem; }
.chart-tip .tip-row { display: flex; align-items: center; gap: .375rem; }
.chart-tip .tip-key { width: 10px; height: 2px; border-radius: 1px; flex-shrink: 0; }
.chart-tip .tip-val { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.chart.loading svg { opacity: .45; transition: opacity .2s; }

.range-btn { padding: .125rem .5rem; border-radius: .25rem; font: 500 11px/16px 'JetBrains Mono', monospace; color: var(--outline); }
.range-btn:hover { color: var(--on-surface); }
.range-btn[aria-pressed="true"] { background: var(--surface-high); color: var(--primary); }

.legend-item {
  display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .5rem; border-radius: .25rem;
  font: 500 11px/14px 'JetBrains Mono', monospace; color: var(--on-surface-variant); background: var(--surface-low);
  border: 1px solid transparent;
}
.legend-item[aria-pressed="false"] { opacity: .45; }
.legend-item:hover { border-color: var(--outline-variant); }
.legend-key { width: 12px; height: 2px; border-radius: 1px; }

.tile { transition: transform .12s, box-shadow .12s; }
.tile:hover, .tile:focus-visible { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); outline: none; }

.range-track { position: relative; height: 4px; border-radius: 2px; background: var(--surface-highest); }
.range-fill { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 2px; background: rgba(137, 206, 255, .35); }
.range-dot { position: absolute; top: 50%; width: 8px; height: 8px; margin-left: -4px; margin-top: -4px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 2px var(--surface-lowest); }

.stat-cell { display: flex; flex-direction: column; gap: 2px; padding: .5rem .625rem; background: var(--surface-low); border-radius: .25rem; min-width: 0; }
.stat-cell dt { font: 600 10px/12px 'JetBrains Mono', monospace; letter-spacing: .05em; text-transform: uppercase; color: var(--outline); }
.stat-cell dd { font: 500 13px/16px 'JetBrains Mono', monospace; color: var(--on-surface); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }

.skeleton { background: linear-gradient(90deg, var(--surface-low), var(--surface-high), var(--surface-low)); background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: .25rem; }
@keyframes shimmer { to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}