*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg-primary: #f5f7fa;
  --bg-secondary: #ffffff;
  --bg-tertiary: #e9ecef;
  --text-primary: #212529;
  --text-secondary: #495057;
  --text-muted: #6c757d;
  --accent-primary: #e94560;
  --accent-secondary: #0f3460;
  --border-color: #dee2e6;
  --success: #28a745;
  --warning: #f59e0b;
  --danger: #e94560;
  --info: #3d85c6;
  --shadow: rgba(0, 0, 0, 0.1);
  --grid-line: rgba(0, 0, 0, 0.08);
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
}

[data-theme="dark"] {
  --bg-primary: #121212;
  --bg-secondary: #1e1e1e;
  --bg-tertiary: #2d2d2d;
  --text-primary: #e0e0e0;
  --text-secondary: #a0a0a0;
  --text-muted: #707070;
  --accent-primary: #e94560;
  --accent-secondary: #505050;
  --border-color: #3d3d3d;
  --shadow: rgba(0, 0, 0, 0.4);
  --grid-line: rgba(255, 255, 255, 0.08);
}

html {
  font-size: 16px;
  line-height: 1.5;
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: background-color var(--transition-normal), color var(--transition-normal);
}

.container {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  padding: var(--spacing-md);
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Header */
header {
  padding: var(--spacing-lg) 0;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: var(--spacing-lg);
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

header h1 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent-primary);
  margin: 0;
}

.tagline {
  color: var(--text-secondary);
  font-size: 0.875rem;
  margin: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  cursor: pointer;
  font-family: inherit;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.btn:hover {
  background-color: var(--border-color);
}

/* Main */
main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

section h2.section-heading {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--spacing-md);
}

/* Summary cards (overview stats) */
.summary-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--spacing-md);
}

.summary-card {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--spacing-md) var(--spacing-lg);
  box-shadow: 0 2px 4px var(--shadow);
}

.summary-card .label {
  color: var(--text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--spacing-xs);
}

.summary-card .value {
  color: var(--text-primary);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

/* Dashboard grid */
.dashboard {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--spacing-md);
}

.panel {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  box-shadow: 0 2px 4px var(--shadow);
  min-height: 320px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.panel.wide { grid-column: span 12; }
.panel.half { grid-column: span 6; }
.panel.third { grid-column: span 4; }
.panel.quarter { grid-column: span 3; }

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  flex-shrink: 0;
}

.panel-header h2 {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}

.panel-header select {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: 0.8125rem;
  cursor: pointer;
  font-family: inherit;
  transition: border-color var(--transition-fast);
}

.panel-header select:focus {
  outline: none;
  border-color: var(--accent-primary);
}

.chart-container {
  flex: 1;
  min-height: 0;
  position: relative;
}

/* Loading */
.panel .loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.875rem;
}

.panel .loading::after {
  content: '';
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-color);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-left: var(--spacing-sm);
}

@keyframes spin { to { transform: rotate(360deg); } }

.panel .error {
  color: var(--danger);
  font-size: 0.875rem;
  text-align: center;
  padding: var(--spacing-xl);
}

/* Tooltip */
.plex-tooltip {
  position: fixed;
  pointer-events: none;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: 0.8125rem;
  color: var(--text-primary);
  z-index: 1000;
  max-width: 280px;
  box-shadow: 0 4px 16px var(--shadow);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.plex-tooltip.visible { opacity: 1; }

.plex-tooltip .tt-label {
  color: var(--text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}

.plex-tooltip .tt-value {
  font-weight: 600;
  color: var(--accent-primary);
  font-variant-numeric: tabular-nums;
}

/* D3 chart styles */
.axis text {
  fill: var(--text-secondary);
  font-size: 11px;
}

.axis line, .axis path {
  stroke: var(--border-color);
}

.grid line {
  stroke: var(--grid-line);
}

.grid path { stroke: none; }

/* Treemap */
#panel-treemap { max-height: 600px; }
#panel-treemap .chart-container { min-height: 0; overflow: hidden; }

.treemap-breadcrumb {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  cursor: pointer;
}

.treemap-breadcrumb:hover { color: var(--accent-primary); }

.treemap-cell text {
  fill: #fff;
  font-size: 11px;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* Heatmap */
.heatmap-cell {
  stroke: var(--bg-secondary);
  stroke-width: 2;
  rx: 3;
}

/* Footer */
footer {
  text-align: center;
  padding: var(--spacing-xl) 0;
  border-top: 1px solid var(--border-color);
  margin-top: var(--spacing-xl);
  color: var(--text-muted);
  font-size: 0.875rem;
}

footer a {
  color: var(--accent-primary);
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

footer a:hover {
  opacity: 0.8;
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 1200px) {
  .panel.half { grid-column: span 6; }
  .panel.third { grid-column: span 6; }
  .panel.quarter { grid-column: span 6; }
}

@media (max-width: 768px) {
  .container { padding: var(--spacing-sm); }
  .dashboard { grid-template-columns: 1fr; }
  .panel.wide, .panel.half, .panel.third, .panel.quarter { grid-column: span 1; }
  .summary-row { grid-template-columns: repeat(2, 1fr); }
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: var(--radius-sm);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* Upload panel */
.upload-panel {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  box-shadow: 0 2px 4px var(--shadow);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.upload-hint {
  color: var(--text-muted);
  font-size: 0.875rem;
}

.upload-controls {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.upload-file {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--text-secondary);
  padding: var(--spacing-xs) 0;
}

.upload-button {
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: 0.875rem;
  font-weight: 600;
}

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

.upload-progress {
  width: 100%;
  height: 6px;
  border: none;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background-color: var(--bg-tertiary);
  appearance: none;
}

.upload-progress::-webkit-progress-bar {
  background-color: var(--bg-tertiary);
  border-radius: var(--radius-sm);
}

.upload-progress::-webkit-progress-value {
  background-color: var(--info);
  border-radius: var(--radius-sm);
  transition: width var(--transition-fast);
}

.upload-progress::-moz-progress-bar {
  background-color: var(--info);
  border-radius: var(--radius-sm);
}

.upload-status {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.upload-status code {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  padding: 1px 4px;
  border-radius: var(--radius-sm);
}

.upload-status.upload-ok,
.upload-status .upload-ok {
  color: var(--success);
  font-weight: 600;
}

.upload-status.upload-err,
.upload-status .upload-err {
  color: var(--danger);
  font-weight: 600;
}

/* Import modal
 * ┌───────────────────────────────────────────┐
 * │ .modal  (full-viewport overlay, fixed)    │
 * │  ┌─ .modal-backdrop (click → close) ───┐  │
 * │  │   ┌─ .modal-card ──────────────┐    │  │
 * │  │   │ .modal-header   [×]        │    │  │
 * │  │   │ .modal-body (.upload-panel)│    │  │
 * │  │   └────────────────────────────┘    │  │
 * │  └─────────────────────────────────────┘  │
 * └───────────────────────────────────────────┘
 * The card is centered with flex on the overlay; the backdrop is a sibling
 * that fills the overlay and stays behind the card via z-index. */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
}

.modal.open {
  opacity: 1;
  pointer-events: auto;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 0;
}

.modal-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px var(--shadow);
  transform: translateY(-6px);
  transition: transform var(--transition-fast);
}

.modal.open .modal-card {
  transform: translateY(0);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--border-color);
}

.modal-header h2 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}

.modal-close {
  font-size: 1.25rem;
  line-height: 1;
  padding: 0 var(--spacing-sm);
  min-width: 1.75rem;
  height: 1.75rem;
}

/* The upload-panel rules above style the body. Inside the modal we drop
 * its own border / shadow / background so it doesn't double up with the
 * card chrome. */
.modal .upload-panel.modal-body {
  border: none;
  border-radius: 0;
  box-shadow: none;
  background-color: transparent;
}

/* Continue-Watching + Probably-Abandoned panels (bd vrh). List-style; no D3.
 * Reuse the existing card chrome — these add only the inner row layout and
 * the inline progress bar. */
.in-progress-list,
.abandoned-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.in-progress-item,
.abandoned-item {
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--border-color);
}

.in-progress-item:last-child,
.abandoned-item:last-child {
  border-bottom: 0;
}

.ip-title,
.ab-title {
  font-weight: 600;
  font-size: 0.95rem;
}

.ip-subtitle,
.ab-meta,
.ip-meta {
  color: var(--text-secondary);
  font-size: 0.8rem;
  margin-top: 2px;
}

.ip-progress {
  margin-top: 4px;
  height: 4px;
  background-color: var(--border-color);
  border-radius: 2px;
  overflow: hidden;
}

.ip-progress-bar {
  height: 100%;
  background-color: var(--accent-color, #4c8df6);
  transition: width 200ms ease;
}

.chart-container .empty {
  color: var(--text-secondary);
  font-size: 0.85rem;
  padding: var(--spacing-md);
}

/* Content-Rating panel (bd c8g) — the slider rides in the panel header
 * next to the title. Keep it visually quiet; this is a filter, not the
 * panel's hero feature. */
.age-slider-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.age-slider-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.age-slider-value {
  min-width: 2.5em;
  text-align: right;
  font-weight: 600;
  color: var(--text-primary);
}

.age-slider {
  width: 140px;
  cursor: pointer;
}

/* Donut + HTML legend layout. The legend lives outside the SVG so its row
 * count is not bounded by the donut's square height — content-rating
 * distributions have 15+ rows and would otherwise clip against either the
 * SVG viewport or the .panel's `overflow: hidden`. */
.chart-container.donut-layout {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-md);
  min-height: 0;
}

.chart-container.donut-layout .donut-svg {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chart-container.donut-layout .donut-legend {
  flex: 1 1 auto;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  max-height: 100%;
  min-width: 0;
}

.chart-container.donut-layout .donut-legend li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--text-primary);
  min-width: 0;
}

.chart-container.donut-layout .donut-legend-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  flex-shrink: 0;
}

.chart-container.donut-layout .donut-legend-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Stale-metadata panel (bd av7). A row of buttons (one per threshold)
 * above an inline list of the worst offenders for the clicked threshold. */
#panel-stale-metadata .chart-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.stale-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.stale-badge {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--bg-tertiary, var(--bg-secondary));
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 100ms ease, border-color 100ms ease;
}

.stale-badge:hover {
  border-color: var(--accent-primary, #4c8df6);
}

.stale-badge.selected {
  border-color: var(--accent-primary, #4c8df6);
  background-color: var(--bg-secondary);
}

.stale-badge-count {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--accent-primary, #4c8df6);
}

.stale-badge-label {
  font-size: 0.72rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

.stale-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}

.stale-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-sm);
  font-size: 0.8rem;
  color: var(--text-primary);
  padding: 4px 0;
  border-bottom: 1px solid var(--border-color);
  min-width: 0;
}

.stale-list li:last-child { border-bottom: 0; }

.stale-list .stale-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stale-list .stale-meta {
  flex: 0 0 auto;
  color: var(--text-secondary);
  font-size: 0.72rem;
}

.stale-list .empty,
.stale-list .error {
  text-align: center;
  color: var(--text-secondary);
  padding: var(--spacing-md);
  list-style: none;
}

/* Backlog-age panel (bd 3il). The freshness stat sits as a one-liner
 * above the horizontal-bar histogram. */
#panel-backlog-age .chart-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.backlog-stat {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--border-color);
}

.backlog-stat-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--accent-primary, #4c8df6);
}

.backlog-stat-label {
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.backlog-chart-host {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}

.backlog-chart-host .chart-container {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
}

/* Audio-language panel (bd qgk) — same shape as backlog-age (one-liner
 * stat over the histogram). The shared visual class keeps both panels
 * consistent. */
#panel-audio-languages .chart-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.audiolang-stat {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--border-color);
}

.audiolang-stat-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--accent-primary, #4c8df6);
}

.audiolang-stat-label {
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.audiolang-chart-host {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}

.audiolang-chart-host .chart-container {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
}

/* Subtitle coverage panel (bd a6j) — two thin progress bars + an
 * extras line + a horizontal bar of language counts. */
#panel-subtitle-coverage .chart-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.sub-summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--border-color);
}

.sub-row {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: var(--spacing-sm);
  align-items: center;
  font-size: 0.78rem;
}

.sub-label {
  color: var(--text-secondary);
}

.sub-bar {
  height: 6px;
  background-color: var(--border-color);
  border-radius: 3px;
  overflow: hidden;
}

.sub-bar-fill {
  height: 100%;
  background-color: var(--accent-primary, #4c8df6);
  transition: width 200ms ease;
}

.sub-value {
  text-align: right;
  font-weight: 600;
  color: var(--text-primary);
}

.sub-extras {
  font-size: 0.72rem;
  color: var(--text-secondary);
  padding-top: 4px;
}

.sub-chart-host {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}

.sub-chart-host .chart-container {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
}

/* Taste panel (bd 55w) — correlation stat above a square-ish scatter. */
#panel-taste .chart-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.taste-stat {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--border-color);
}

.taste-stat-corr {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--accent-primary, #4c8df6);
}

.taste-stat-label {
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.taste-plot-host {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
}

/* Tab bar (bd 9kf) — file-folder style. A horizontal baseline runs across
   the strip; each tab is a rounded-top rectangle that sits ON the baseline.
   The active tab gets a subtly-lighter background (--bg-secondary, same
   surface as the panels below it) plus a 1px border on top + sides, with
   margin-bottom: -1px so its bottom edge covers the baseline beneath it —
   producing the "this tab is pulled forward, attached to the content" look.
   Inactive tabs are transparent text-only buttons with thin vertical
   dividers between them. */
.tab-bar {
  display: flex;
  gap: 0;
  margin: var(--spacing-lg) 0 var(--spacing-md);
  list-style: none;
  border-bottom: 1px solid var(--border-color);
}

.tab-button {
  /* Each tab takes an equal share of the bar's width — 4 tabs => 25%
     each, 10 tabs => 10% each. min-width: 0 lets long labels truncate
     instead of overflowing the share. */
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  margin-bottom: -1px;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast);
}

/* Thin vertical divider between adjacent inactive tabs — same trick as
   the reference image. Drawn on the right edge of each inactive tab,
   suppressed when the tab is the last one OR when its next sibling is
   the active tab (the active tab's left border handles the separation
   there). :has() is supported in all current browsers. */
.tab-button:not(.active):not(:last-of-type):not(:has(+ .tab-button.active))::after {
  content: '';
  position: absolute;
  right: 0;
  top: 25%;
  bottom: 25%;
  width: 1px;
  background: var(--border-color);
}

.tab-button:hover {
  color: var(--text-primary);
}

.tab-button.active,
.tab-button[aria-selected="true"] {
  color: var(--text-primary);
  background: var(--bg-secondary);
  border-color: var(--border-color);
  font-weight: 600;
}

.tab-button:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

/* Tab panels — only one visible at a time. `hidden` is the source of
   truth; the selector is just an explicit hook so subsequent rules can't
   accidentally override the hide. */
.tab-panel[hidden] { display: none; }

.tab-panel-empty {
  margin: 0;
  padding: var(--spacing-xl) var(--spacing-lg);
  color: var(--text-muted);
  text-align: center;
  font-style: italic;
}