:root {
  color-scheme: dark;
  --bg: #141414;
  --surface: #191919;
  --surface-raised: #222222;
  --control: #202020;
  --control-active: #303030;
  --topbar: #171717;
  --table-header: #171717;
  --row-hover: #1d1d1d;
  --control-hover-border: #575757;
  --show-hidden-bg: #1d1d1d;
  --show-hidden-checked-bg: #292929;
  --show-hidden-checked-text: #c4c4c4;
  --show-hidden-accent: #8c8c8c;
  --scanning-text: #c8ddf5;
  --scanning-ring: #34475b;
  --notice-border: #374557;
  --notice-bg: #17202a;
  --notice-text: #b8d8ff;
  --text: #f2f2f2;
  --muted: #9c9c9c;
  --faint: #6f6f6f;
  --border: #303030;
  --border-strong: #414141;
  --grid: #292929;
  --accent: #55aaff;
  --positive: #45cb7d;
  --danger: #ff7878;
  --radius: 7px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --bg: #f3f3f3;
    --surface: #ffffff;
    --surface-raised: #ffffff;
    --control: #ffffff;
    --control-active: #e8e8e8;
    --topbar: #fafafa;
    --table-header: #f7f7f7;
    --row-hover: #f0f0f0;
    --control-hover-border: #b0b0b0;
    --show-hidden-bg: #f5f5f5;
    --show-hidden-checked-bg: #e8e8e8;
    --show-hidden-checked-text: #333333;
    --show-hidden-accent: #6a6a6a;
    --scanning-text: #2a5a8a;
    --scanning-ring: #b8cce0;
    --notice-border: #b7c9dc;
    --notice-bg: #eef5fb;
    --notice-text: #1a4a7a;
    --text: #171717;
    --muted: #5c5c5c;
    --faint: #8a8a8a;
    --border: #e0e0e0;
    --border-strong: #c8c8c8;
    --grid: #e8e8e8;
    --accent: #0077e6;
    --positive: #1a9e4f;
    --danger: #d64545;
  }
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--text); }
button, input, select { font: inherit; }
button, select, input { color: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.topbar {
  min-height: 44px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--border);
  background: var(--topbar);
}

.brand {
  color: var(--muted);
  font-size: 1rem;
  font-weight: 520;
  letter-spacing: -0.015em;
  text-decoration: none;
}
.brand:hover { color: var(--text); }

.topbar-actions, .sync-state {
  display: flex;
  align-items: center;
}

.topbar-actions { gap: 12px; }
.sync-state { gap: 9px; color: var(--muted); font-size: 0.78rem; white-space: nowrap; }
.sync-ring { width: 12px; height: 12px; border: 3px solid var(--positive); border-radius: 50%; }
.sync-state.is-error .sync-ring { border-color: var(--danger); }
.sync-state.is-scanning { color: var(--scanning-text); }
.sync-state.is-scanning .sync-ring {
  width: 14px;
  height: 14px;
  border: 2px solid var(--scanning-ring);
  border-top-color: var(--accent);
  animation: sync-spin 0.75s linear infinite;
}
@keyframes sync-spin { to { transform: rotate(360deg); } }
.scan-history { position: relative; display: inline-flex; }
.scan-count {
  appearance: none;
  padding: 0 0 0 9px;
  cursor: pointer;
  border: 0;
  border-left: 1px solid var(--border-strong);
  border-radius: 0;
  background: transparent;
  color: var(--faint);
  font: inherit;
}

.scan-count:hover, .scan-count[aria-expanded="true"] { color: var(--text); }
.scan-popover {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 30;
  width: 235px;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-raised);
  color: var(--muted);
  font-size: 0.72rem;
  white-space: normal;
}

.scan-popover-section + .scan-popover-section {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--border);
}

.scan-popover-title { display: block; margin-bottom: 5px; color: var(--text); font-size: 0.74rem; font-weight: 600; }
.scan-time-list { margin: 0; padding: 0; list-style: none; }
.scan-time-list li + li { margin-top: 3px; }

.scan-button, select, input, .toggle-group {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--control);
}

.scan-button {
  min-height: 32px;
  padding: 6px 11px;
  cursor: pointer;
  color: var(--muted);
  border-color: var(--border);
  background: transparent;
  font-size: 0.76rem;
  font-weight: 540;
}

.scan-button:hover, select:hover, input:hover { border-color: var(--control-hover-border); }
.scan-button:hover { color: var(--text); }
.scan-button:disabled { cursor: wait; color: var(--faint); }
button:focus-visible, select:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.shell { width: 100%; margin: 0; padding: 0; }
.notice { min-height: 0; }
.notice:not(:empty) {
  margin-bottom: 14px;
  padding: 10px 13px;
  border: 1px solid var(--notice-border);
  border-radius: var(--radius);
  background: var(--notice-bg);
  color: var(--notice-text);
  font-size: 0.8rem;
}

.workspace {
  position: relative;
  border: 0;
  background: var(--surface);
}

.workspace + .workspace { margin-top: 0; border-top: 1px solid var(--border); }
.chart-panel + .table-panel { border-top: 0; }
.section-bar {
  min-height: 66px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  border-bottom: 1px solid var(--border);
}

.section-copy { min-width: 220px; }
h1, h2 { margin: 0; font: inherit; }
.toggle-group { display: inline-flex; padding: 3px; }
.toggle-group button {
  min-height: 29px;
  padding: 5px 10px;
  border: 0;
  border-radius: 4px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 600;
}

.toggle-group button:hover { color: var(--text); }
.toggle-group button[aria-pressed="true"] { color: var(--accent); background: var(--control-active); }
select, input { min-height: 36px; padding: 7px 10px; }
select { cursor: pointer; }

.chart-toolbar {
  min-height: 48px;
  padding: 9px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--border);
}

.legend {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 3px 16px;
  flex: 1;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}

.legend::-webkit-scrollbar { display: none; }
.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.76rem;
  white-space: nowrap;
}
.legend-item label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
}
.legend-item:hover { color: var(--text); }
.legend-item:has(input:not(:checked)) { opacity: 0.38; }
.legend-item:has(input:not(:checked)) .legend-only { opacity: 1; }
.legend input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.legend-only {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--faint);
  cursor: pointer;
  font: inherit;
  font-size: 0.68rem;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legend-only:hover { color: var(--accent); }
.chart-toolbar-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.show-hidden-control {
  min-height: 29px;
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--show-hidden-bg);
  color: var(--muted);
  font-size: 0.7rem;
  white-space: nowrap;
}

.show-hidden-control:hover { border-color: var(--control-hover-border); color: var(--text); }
.show-hidden-control:has(input:checked) {
  background: var(--show-hidden-checked-bg);
  color: var(--show-hidden-checked-text);
}
.show-hidden-control input {
  width: 12px;
  height: 12px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  accent-color: var(--show-hidden-accent);
}

.line-swatch { width: 14px; height: 2px; background: var(--series); }
/* GPU type picks the hue; provider picks the shade. */
.series-color-0 { --series-coreweave: #2f8fe8; --series-aws: #9dceff; --series-gcp: #6bb3f5; --series-other: #6bb3f5; }
.series-color-1 { --series-coreweave: #2fbe6d; --series-aws: #95e0b4; --series-gcp: #62d190; --series-other: #62d190; }
.series-color-2 { --series-coreweave: #ef8a3d; --series-aws: #ffc396; --series-gcp: #f5a866; --series-other: #f5a866; }
.series-color-3 { --series-coreweave: #8b6ce8; --series-aws: #c8b6ff; --series-gcp: #a992f0; --series-other: #a992f0; }
.series-color-4 { --series-coreweave: #e35a86; --series-aws: #f5a7c0; --series-gcp: #ea7ea3; --series-other: #ea7ea3; }
.series-color-5 { --series-coreweave: #2fadc0; --series-aws: #8fd8e4; --series-gcp: #5ec4d4; --series-other: #5ec4d4; }
.series-provider-coreweave { --series: var(--series-coreweave); }
.series-provider-aws { --series: var(--series-aws); }
.series-provider-gcp { --series: var(--series-gcp); }
.series-provider-other { --series: var(--series-other); }

.section-label {
  margin: 0;
  padding: 14px 18px 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 550;
  letter-spacing: -0.01em;
}
.chart-wrap {
  min-height: 385px;
  padding: 12px 16px 6px;
  overflow-x: auto;
  color: var(--muted);
  font-size: 0.82rem;
}
.price-chart-wrap {
  min-height: 290px;
  padding-bottom: 16px;
  border-top: 0;
}

.chart { display: block; width: 100%; min-width: 760px; height: auto; }
.grid-line { stroke: var(--grid); stroke-width: 1; }
.axis-label {
  fill: var(--faint);
  font-size: 10px;
}

.series-area { fill: var(--series); fill-opacity: 0.22; stroke: none; }
.series-line { fill: none; stroke: var(--series); stroke-width: 2; vector-effect: non-scaling-stroke; }
.hover-guide {
  stroke: var(--border-strong);
  stroke-width: 1;
  pointer-events: none;
  vector-effect: non-scaling-stroke;
}
.hover-area { fill: transparent; cursor: crosshair; pointer-events: all; }
.point-label {
  fill: var(--series);
  font-size: 10px;
  font-weight: 700;
  paint-order: stroke;
  stroke: var(--surface);
  stroke-width: 4px;
  stroke-linejoin: round;
}

.chart-tooltip {
  position: fixed;
  z-index: 20;
  width: 245px;
  max-width: calc(100vw - 20px);
  padding: 10px 12px;
  pointer-events: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-raised);
  font-size: 0.74rem;
}

.chart-tooltip-time {
  display: block;
  margin-bottom: 7px;
  color: var(--text);
  font-size: 0.76rem;
  font-weight: 620;
}

.chart-tooltip-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 22px;
  color: var(--muted);
}

.chart-tooltip-key { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.chart-tooltip-key span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-tooltip-value {
  flex: none;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.chart-tooltip-total {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
  color: var(--text);
  font-weight: 620;
}

.table-panel { overflow: hidden; }
.table-panel > .section-label { padding-bottom: 10px; }
.table-scroll {
  padding: 0 16px;
  overflow-x: auto;
}
.raw-data {
  margin: 18px 18px 28px;
}
.raw-data-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  list-style: none;
  color: var(--faint);
  cursor: pointer;
  user-select: none;
  font-size: 0.78rem;
  font-weight: 400;
}
.raw-data-toggle::-webkit-details-marker { display: none; }
.raw-data-toggle::after {
  content: "▸";
  font-size: 0.72rem;
}
.raw-data[open] > .raw-data-toggle::after { content: "▾"; }
.raw-data-toggle:hover { color: var(--muted); }
.raw-data-body {
  margin: 10px 0 0;
  padding: 12px 14px;
  overflow: auto;
  max-height: min(70vh, 720px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.72rem;
  line-height: 1.45;
  white-space: pre;
}
table { width: 100%; min-width: 760px; border-collapse: collapse; color: var(--text); }
th, td {
  padding: 8px 14px;
  border-top: 1px solid var(--border);
  color: inherit;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}
th:first-child, td:first-child { padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }
thead th { border-top: 0; }
th {
  height: 36px;
  background: var(--table-header);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

th button {
  appearance: none;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

th button:hover { opacity: 0.72; }
th button::after { content: ""; }
th button[aria-sort="ascending"]::after { content: " ↑"; opacity: 1; }
th button[aria-sort="descending"]::after { content: " ↓"; opacity: 1; }
td { height: 39px; font-size: 0.79rem; font-variant-numeric: tabular-nums; }
tbody tr { background: var(--surface); }
tbody tr:hover { background: var(--row-hover); }
.numeric {
  text-align: right;
}

.empty-row { padding: 34px 0; color: var(--muted); text-align: center; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 850px) {
  .topbar { min-height: 44px; }
  .sync-state { max-width: 46vw; }
  #updated-at { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .scan-count { display: none; }
  .section-bar { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 560px) {
  .topbar { padding: 0 14px; }
  .sync-state:not(.is-scanning) > .sync-ring,
  .sync-state:not(.is-scanning) > #updated-at { display: none; }
  .scan-count { padding-left: 0; border-left: 0; }
  .topbar-actions { margin-left: auto; }
  .section-bar { padding: 15px; }
  .chart-toolbar { padding-inline: 15px; gap: 12px; }
  .chart-wrap { padding-inline: 8px; }
  .table-scroll { padding-inline: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
  .sync-state.is-scanning .sync-ring { animation: none; }
}