/* Google Fonts are loaded via `<link rel="preload" as="style" onload="…">`
   in docs/source/_templates/layout.html so the stylesheet fetch happens
   in parallel with CSS parsing instead of blocking it. Keeping the
   @import here would re-introduce the blocking chain PSI flagged. */

/* --------------------------------------------------------------------------
   1. Global Variable & Typography Overrides
   -------------------------------------------------------------------------- */
:root {
  /* Brand Colors */
  --eegdash-primary: #006ca3;
  /* Blue */
  --eegdash-primary-dark: #004a76;
  --eegdash-accent: #f7941d;
  /* Orange */
  --eegdash-accent-hover: #d67a0e;
  --hf-sky: #4f8cff;
  --hf-sky-strong: #2f6fed;
  --hf-sun: #ffb347;
  --hf-sun-strong: #ff9f1a;
  --hf-mint: #22d3ee;
  --hf-sand: #fff3d1;
  --hf-grid-color: rgba(15, 23, 42, 0.03);
  --hf-card-border: rgba(15, 23, 42, 0.12);
  --hf-surface: rgba(255, 255, 255, 0.7);
  --hf-surface-strong: rgba(15, 23, 42, 0.95);
  --hf-text-muted: rgba(15, 23, 42, 0.7);

  /* Editorial display pairing: a variable serif for section rubrics and
     catalogue headings, paired with the existing Source Sans for body. */
  --eegdash-display: "Fraunces", "Source Serif 4", "Cambria", Georgia, serif;
  --eegdash-mono: "IBM Plex Mono", "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;

  /* Fonts */
  --pst-font-family-base: "Source Sans 3", "Noto Sans", "Helvetica Neue", "Segoe UI", sans-serif;
  --pst-font-family-heading: "Space Grotesk", var(--pst-font-family-base);
  --pst-font-family-monospace: "IBM Plex Mono", "SFMono-Regular", "Menlo", monospace;

  /* Theme Overrides for PyData */
  --pst-color-primary: var(--eegdash-primary);
  --pst-color-accent: var(--eegdash-accent);
  --sd-color-primary: var(--eegdash-primary);
  --sd-color-primary-highlight: var(--eegdash-primary-dark);

  /* Base sizing */
  --pst-font-size-base: 1.15rem;
  /* Larger font size like MOABB */
  --pst-line-height-base: 1.65;
}

html[data-theme="dark"] {
  --eegdash-primary: #3aa3d9;
  /* Lighter blue for dark mode contrast */
  --pst-color-primary: var(--eegdash-primary);
  --sd-color-primary: var(--eegdash-primary);
  --hf-grid-color: rgba(248, 250, 252, 0.04);
  --hf-card-border: rgba(148, 163, 184, 0.25);
  --hf-surface: rgba(15, 23, 42, 0.7);
  --hf-surface-strong: rgba(15, 23, 42, 0.9);
  --hf-text-muted: rgba(226, 232, 240, 0.7);
}

/* --------------------------------------------------------------------------
   2. Hero Section & General Layout
   -------------------------------------------------------------------------- */
.eegdash-hero {
  text-align: center;
  margin: 0 0 3rem;
  padding: 4rem 1rem;
  background: linear-gradient(135deg, rgba(0, 108, 163, 0.05) 0%, rgba(247, 148, 29, 0.05) 100%);
  border-radius: 1.5rem;
  border: 1px solid rgba(0, 0, 0, 0.03);
}

html[data-theme="dark"] .eegdash-hero {
  background: linear-gradient(135deg, rgba(0, 108, 163, 0.15) 0%, rgba(247, 148, 29, 0.1) 100%);
  border-color: rgba(255, 255, 255, 0.05);
}

.eegdash-hero__title {
  display: block;
  font-family: var(--pst-font-family-heading);
  font-weight: 800;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 1.1;
  margin: 0 0 1.5rem;
  color: var(--pst-color-text-base);
  letter-spacing: -0.02em;
}

.eegdash-hero img.logo.mainlogo {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.1));
}

/* --------------------------------------------------------------------------
   3. "Institutions" Logo Grid (Flexbox/Grid)
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   3. "Institutions" Logo Grid (Flexbox/Grid)
   -------------------------------------------------------------------------- */
.logos-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4rem;
  /* Increased gap */
  margin: 2rem auto;
  padding: 1rem;
}

.logo-item {
  flex: 0 1 auto;
  max-width: 300px;
  /* Slightly larger max width */
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0.85;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.logo-item:hover {
  opacity: 1;
  transform: translateY(-2px);
}

.logo-item img {
  width: auto;
  max-width: 100%;
  max-height: 80px;
  /* Constrain height to align better */
  display: block;
}

/* --------------------------------------------------------------------------
   4. Interactive Links & Buttons
   -------------------------------------------------------------------------- */
/* Content links */
article a:not(.btn):not(.headerlink):not(.sd-btn) {
  text-decoration: none;
  border-bottom: 2px solid rgba(0, 108, 163, 0.3);
  transition: all 0.2s ease;
  color: var(--pst-color-primary);
  font-weight: 500;
}

article a:not(.btn):not(.headerlink):not(.sd-btn):hover {
  border-bottom-color: var(--eegdash-accent);
  color: var(--pst-color-primary-highlight);
  background-color: rgba(0, 108, 163, 0.05);
  border-radius: 2px;
}

/* Buttons (sphinx-design) hover lift */
.sd-btn {
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.sd-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1) !important;
}

/* --------------------------------------------------------------------------
   5. Admonitions & Badges
   -------------------------------------------------------------------------- */
.admonition {
  border-left-width: 4px !important;
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-left-style: solid;
}

.admonition.note {
  background-color: rgba(0, 108, 163, 0.04);
  border-left-color: var(--eegdash-primary);
}

.admonition.warning,
.admonition.attention {
  background-color: rgba(247, 148, 29, 0.05);
  border-left-color: var(--eegdash-accent);
}

.bdg-danger,
.badge-danger {
  background-color: #ef4444;
  /* Brighter red */
  color: white;
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.85em;
  letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   6. Cards (Sphinx Design & Custom)
   -------------------------------------------------------------------------- */
.sd-card {
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 0.75rem !important;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.sd-card:hover {
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08) !important;
  transform: translateY(-4px);
  border-color: var(--eegdash-primary) !important;
}

/* API Landing Cards (Custom) */
.api-card {
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: var(--pst-color-surface);
}

.api-card .card-header {
  background: var(--eegdash-primary);
  color: white;
  padding: 1rem 1.25rem;
  font-family: var(--pst-font-family-heading);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.9rem;
}

.api-card__content {
  padding: 1.5rem;
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

.api-card__icon {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  background: rgba(0, 108, 163, 0.1);
  color: var(--eegdash-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}

/* API Reference Component Grid */
.api-grid-card-header,
.api-grid-card__header {
  padding: 1.35rem 1.5rem 1rem;
}

.api-grid-card__icon {
  font-size: 2.2rem;
}

.api-grid-card-title,
.api-grid-card__title {
  font-size: 1.3rem;
  margin: 0.35rem 0 0;
}

.api-grid-card-body .sd-card-text,
.api-grid-card__body .sd-card-text {
  font-size: 1.05rem;
}

.api-grid-card-footer,
.api-grid-card__footer {
  padding: 1rem 1.5rem 1.35rem;
}

.api-grid-card-button,
.api-grid-card__button {
  font-size: 1rem !important;
  padding: 0.65rem 1.4rem !important;
}

/* --------------------------------------------------------------------------
   7. Code Blocks & Code Aesthetics
   -------------------------------------------------------------------------- */
div.highlight {
  border-radius: 0.75rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.03);
  margin-bottom: 1.5rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  overflow: hidden;
  /* For radius */
}

div.highlight pre {
  padding: 1.25rem;
  font-family: var(--pst-font-family-monospace);
  font-size: 0.9em;
  line-height: 1.5;
}

html[data-theme="light"] div.highlight {
  background: #fafafa;
}

/* --------------------------------------------------------------------------
   8. Table Styling
   -------------------------------------------------------------------------- */
table.table,
.sd-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  margin-bottom: 2rem;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

table.table thead th,
.sd-table thead th {
  background-color: var(--eegdash-primary);
  color: #fff;
  font-weight: 600;
  padding: 0.85rem 1rem;
  border: none;
  font-family: var(--pst-font-family-heading);
  letter-spacing: 0.02em;
}

table.table tbody td,
.sd-table tbody td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  vertical-align: middle;
}

table.table tbody tr:last-child td {
  border-bottom: none;
}

table.table tbody tr:hover {
  background-color: rgba(0, 108, 163, 0.02);
}

/* Dataset Summary specific tweaks */
#datasets-table {
  font-size: 0.95rem;
}

/* --------------------------------------------------------------------------
   9. Footer & Branding
   -------------------------------------------------------------------------- */
.pst-footer-custom {
  margin-top: 4rem;
  padding: 3rem 1rem;
  background-color: var(--pst-color-surface-secondary, #f3f4f6);
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  text-align: center;
}

html[data-theme="dark"] .pst-footer-custom {
  background-color: #0f172a;
  /* Darker background for footer in dark mode */
}

.pst-footer-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.footer-brand-logo {
  height: 28px;
  width: auto;
  opacity: 0.6;
  filter: grayscale(100%);
  transition: all 0.3s ease;
}

.footer-brand-logo:hover {
  opacity: 1;
  filter: grayscale(0%);
}

/* --------------------------------------------------------------------------
   10. Navbar Polish
   -------------------------------------------------------------------------- */
.bd-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
}

html[data-theme="dark"] .bd-header {
  background-color: rgba(18, 24, 38, 0.9);
}

.navbar-nav .nav-link.active {
  font-weight: 700;
  color: var(--eegdash-primary) !important;
  position: relative;
}

.navbar-nav .nav-link.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0.5rem;
  right: 0.5rem;
  height: 3px;
  background-color: var(--eegdash-accent);
  border-radius: 2px 2px 0 0;
}

/* --------------------------------------------------------------------------
   Specific Element Fixes (Tags, Videos etc.)
   -------------------------------------------------------------------------- */
.tag {
  display: inline-block;
  padding: 3px 10px;
  margin: 2px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none !important;
  background: #e2e8f0;
  color: #475569;
  border: 1px solid transparent;
  transition: all 0.2s;
}

.tag:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Example Palette (preserving existing logic but modernizing colors) */
.tag-conv {
  background: #dcfce7;
  color: #166534;
  border-color: #86efac;
}

.tag-recurrent {
  background: #f3e8ff;
  color: #6b21a8;
  border-color: #d8b4fe;
}

.tag-channel {
  background: #f1f5f9;
  color: #334155;
  border-color: #cbd5e1;
}

/* Video Wrapper */
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  margin: 2rem 0;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Inline reading time badge for tutorials */
.eegdash-reading-time {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0.5rem 0 1.25rem;
  padding: 0.35rem 0.75rem;
  border-radius: 0.65rem;
  background: var(--sd-color-surface-secondary, rgba(0, 108, 163, 0.08));
  color: var(--pst-color-text-muted, #4b5563);
  font-size: 0.95rem;
  font-weight: 500;
}

.eegdash-reading-time__label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--sd-color-primary, #006ca3);
}

.eegdash-reading-time__value {
  font-weight: 700;
  color: var(--pst-color-text, #111827);
}

html[data-theme="dark"] .eegdash-reading-time {
  background: rgba(15, 118, 184, 0.22);
  color: var(--pst-color-text-muted, #d1d5db);
}

html[data-theme="dark"] .eegdash-reading-time__value {
  color: var(--pst-color-text, #f9fafb);
}

/* --------------------------------------------------------------------------
   11. Dataset Summary Page Enhancements
   -------------------------------------------------------------------------- */

/* Prevent table overflow */
.dataset-summary-page .bd-content {
  overflow-x: auto;
  font-size: 0.95rem;
  /* Slight compacting for dense data */
}

/* Ensure dataTable responsive scroll */
#datasets-table-container,
div.dataTables_wrapper {
  width: 100%;
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Make sticky headers work */
table.dataTable thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  /* Ensure background is opaque so scrolling content doesn't show through */
  background-color: var(--eegdash-primary) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Tabs Styling - Make them pop */
.sd-tab-set>input:checked+label {
  border-color: var(--eegdash-primary) !important;
  color: var(--eegdash-primary) !important;
  background-color: rgba(0, 108, 163, 0.05);
  font-weight: 700 !important;
}

.sd-tab-set>label {
  font-family: var(--pst-font-family-heading);
  font-weight: 600;
  padding: 0.75rem 1.25rem;
  transition: all 0.2s ease;
  border-radius: 6px 6px 0 0;
}

.sd-tab-set>label:hover {
  color: var(--eegdash-primary-dark);
  background-color: rgba(0, 0, 0, 0.02);
}

/* ------------------------------------------------------------------------
   Dataset summary page tab strip — replace the wrapping pill row with a
   compact underline-style horizontal rail. The pill design works for 3-4
   tabs but breaks down at 8 (it wraps to two rows and the active "filled"
   pill draws too much attention). The underline pattern keeps every tab on
   one row with a thin primary-blue underline marking the active section,
   which scales gracefully and stays editorial.
   ------------------------------------------------------------------------ */
.dataset-summary-page .sd-tab-set {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.1);
  margin-bottom: 1.5rem;
}
.dataset-summary-page .sd-tab-set > .sd-tab-content {
  flex-basis: 100%;
  border-top: none;
  margin-top: 0.25rem;
}
.dataset-summary-page .sd-tab-set > label.sd-tab-label,
.dataset-summary-page .sd-tab-set > label {
  flex: 0 0 auto !important;
  font-family: var(--pst-font-family-heading) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  padding: 0.7rem 1rem !important;
  margin-bottom: -1px !important; /* sit on the bottom rule */
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  color: var(--pst-color-text-muted, #64748b) !important;
  box-shadow: none !important;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
  cursor: pointer;
  white-space: nowrap;
}
.dataset-summary-page .sd-tab-set > label:hover {
  color: var(--eegdash-primary, #006ca3) !important;
  background: rgba(0, 108, 163, 0.04) !important;
  transform: none !important;
}
.dataset-summary-page .sd-tab-set > input:checked + label {
  color: var(--eegdash-primary, #006ca3) !important;
  border-bottom-color: var(--eegdash-primary, #006ca3) !important;
  background: transparent !important;
  background-image: none !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
html[data-theme="dark"].dataset-summary-page .sd-tab-set {
  border-bottom-color: rgba(148, 163, 184, 0.2);
}
html[data-theme="dark"].dataset-summary-page .sd-tab-set > label {
  color: rgba(206, 214, 221, 0.7) !important;
}
html[data-theme="dark"].dataset-summary-page .sd-tab-set > input:checked + label {
  color: var(--eegdash-primary, #3aa3d9) !important;
  border-bottom-color: var(--eegdash-primary, #3aa3d9) !important;
}

/* Charts sizing constraints */
.plotly-graph-div {
  width: 100% !important;
  min-height: 550px;
  margin-bottom: 2rem;
}

/* Ensure Back-top button doesn't cover data */
.pst-back-to-top {
  z-index: 900;
  transform: scale(0.9);
}

/* Fix for any oversized icons in headers if user report was about SVG */
.dataset-counter-svg {
  max-width: 3rem;
  max-height: 3rem;
  width: auto;
  height: auto;
}

/* --------------------------------------------------------------------------
   12. Homepage Overhaul (MOABB Style)
   -------------------------------------------------------------------------- */

.eegdash-badges img {
  margin: 0 4px 6px;
  height: 24px;
}

.eegdash-hero-subtitle {
  font-family: var(--pst-font-family-heading);
  font-size: 1.5rem;
  color: var(--pst-color-text-muted);
  margin-bottom: 2rem;
  font-weight: 300;
}

.feature-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: none !important;
  background: var(--pst-color-surface);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

/* --------------------------------------------------------------------------
   13. Dataset Summary Tweaks
   -------------------------------------------------------------------------- */

/* ==========================================================================
   Dataset-summary page — "Scientific Index" table redesign
   --------------------------------------------------------------------------
   Goal: a calm, airy editorial catalogue instead of a squeezed DataTables
   default. Full-viewport breakout, tabular-number alignment, monospace
   dataset IDs, thin rule-based header.
   ========================================================================== */

/* Full-viewport canvas for the table — keep the surrounding text at normal
   reading width but let the data grid use the whole screen. */
.dataset-summary-page .bd-container {
  max-width: 100% !important;
  padding-left: clamp(1rem, 2.5vw, 2.5rem);
  padding-right: clamp(1rem, 2.5vw, 2.5rem);
}

.dataset-summary-page .bd-sidebar-primary,
.dataset-summary-page .bd-sidebar-secondary {
  display: none !important;
}

/* The raw HTML table block is itself rendered inside a .bd-article column
   capped by the theme. Break the wrapper out to full width so the DataTables
   horizontal scroll only kicks in on very narrow viewports. */
.dataset-summary-page #datasets-table_wrapper,
.dataset-summary-page .dataTables_wrapper {
  width: 100%;
  margin-top: 1.5rem;
  position: relative;
}

/* On narrow viewports the Type column pushes the table past the wrapper.
   A thin fade on the right edge signals "scroll to see more". It lives
   on the outer <figure>, NOT on the overflow-x:auto wrapper itself —
   putting it on the wrapper would make position:absolute move with the
   scrolled content, so the hint disappears exactly when users need it.
   The is-overflowing class is toggled by the JS sync helper. */
.dataset-summary-page .eegdash-figure::after {
  content: "";
  position: absolute;
  top: 6rem;
  right: 0;
  bottom: 3rem;
  width: 1.75rem;
  background: linear-gradient(to left, var(--pst-color-background, #fff) 20%, transparent);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 2;
}
.dataset-summary-page .eegdash-figure.is-overflowing::after,
.dataset-summary-page .eegdash-figure:has(.dataTables_wrapper.is-overflowing)::after {
  opacity: 1;
}
html[data-theme="dark"].dataset-summary-page .eegdash-figure::after {
  background: linear-gradient(to left, var(--pst-color-background, #0f172a) 20%, transparent);
}

/* Sticky first column attempt — kept for browsers where it works, but
   current measurements show Chromium drops sticky inside a DataTables
   `<table>` + wrapper `overflow-x: auto` + `border-collapse: separate`
   combo when the table has dt-bulma/DataTables UI in place. The visual
   cue relied on by users is the right-edge fade gradient plus the
   natural scrollbar — that affordance is enough. Leaving the rules in
   place so sticky engages where supported. */
.dataset-summary-page #datasets-table thead th:first-child,
.dataset-summary-page #datasets-table tbody td:first-child,
.dataset-summary-page #datasets-table tfoot td:first-child {
  position: sticky;
  left: 0;
  background: var(--pst-color-background, #fff);
  z-index: 3;
}
.dataset-summary-page #datasets-table thead th:first-child {
  z-index: 4;
}
.dataset-summary-page #datasets-table tfoot td:first-child {
  z-index: 3;
  background: var(--pst-color-background, #fff) !important;
  border-top: 2px solid var(--pst-color-text-base) !important;
}
html[data-theme="dark"].dataset-summary-page #datasets-table tfoot td:first-child {
  background: var(--pst-color-background, #0f172a) !important;
}
.dataset-summary-page #datasets-table tbody tr:nth-child(even) td:first-child {
  background: #fafafa;
}
.dataset-summary-page #datasets-table tbody tr:hover td:first-child {
  background: #e6f1f6;
}
html[data-theme="dark"].dataset-summary-page #datasets-table thead th:first-child,
html[data-theme="dark"].dataset-summary-page #datasets-table tbody td:first-child {
  background: var(--pst-color-background, #0f172a);
}
html[data-theme="dark"].dataset-summary-page #datasets-table tbody tr:nth-child(even) td:first-child {
  background: #162033;
}

/* Header row — thin-rule editorial treatment. Sentence-case, tracked
   semibold sans for headers; numerics in a tabular variant. */
.dataset-summary-page table.dataTable thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--pst-color-background, #fff) !important;
  color: var(--pst-color-text-base, #111) !important;
  font-family: var(--pst-font-family-heading);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.9rem 0.85rem !important;
  border-bottom: 1px solid var(--pst-color-text-base, #111) !important;
  box-shadow: none !important;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
}

html[data-theme="dark"].dataset-summary-page table.dataTable thead th {
  background: var(--pst-color-background, #0f172a) !important;
  color: #e2e8f0 !important;
  border-bottom-color: #e2e8f0 !important;
}

/* Sort indicators — minimalist chevrons next to the header label. */
.dataset-summary-page table.dataTable thead th.sorting,
.dataset-summary-page table.dataTable thead th.sorting_asc,
.dataset-summary-page table.dataTable thead th.sorting_desc {
  background-image: none !important;
  padding-right: 1.6rem !important;
  position: sticky;
  cursor: pointer;
}
/* DataTables' CDN theme (dt-1.13.4/bm) paints its own up-triangle in the
   ::before pseudo-element. It shows up alongside our ::after arrow and
   reads as a duplicate sort icon. Suppress it. */
.dataset-summary-page table.dataTable thead th.sorting::before,
.dataset-summary-page table.dataTable thead th.sorting_asc::before,
.dataset-summary-page table.dataTable thead th.sorting_desc::before {
  content: none !important;
  display: none !important;
}
.dataset-summary-page table.dataTable thead th.sorting::after,
.dataset-summary-page table.dataTable thead th.sorting_asc::after,
.dataset-summary-page table.dataTable thead th.sorting_desc::after {
  position: absolute;
  right: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--pst-color-text-muted, #64748b);
  opacity: 0.4;
  line-height: 1;
}
.dataset-summary-page table.dataTable thead th.sorting:not(.sorting_asc):not(.sorting_desc)::after {
  content: "\2195"; /* up-down arrow, low contrast */
}
.dataset-summary-page table.dataTable thead th.sorting_asc::after {
  content: "\25B2"; /* solid up triangle */
  color: var(--eegdash-primary, #006ca3);
  opacity: 1;
}
.dataset-summary-page table.dataTable thead th.sorting_desc::after {
  content: "\25BC";
  color: var(--eegdash-primary, #006ca3);
  opacity: 1;
}

/* Body rows — airy vertical rhythm, thin dividers only.
   Target row height ~48px: short enough to scan many datasets at once,
   tall enough that the tag chips and sparkbars breathe. */
.dataset-summary-page table.dataTable tbody td {
  padding: 0.4rem 0.75rem !important;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  vertical-align: middle;
  font-size: 0.82rem !important;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "kern", "liga", "tnum";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Tokens like HBN_r7_bdf_mini need to break inside their cells so that
   toggling the Canonical column doesn't spill into the next column. The
   Dataset ID column is explicitly exempted below. */
.dataset-summary-page table.dataTable tbody td:not(:first-child) {
  overflow-wrap: anywhere;
  word-break: break-word;
}

html[data-theme="dark"].dataset-summary-page table.dataTable tbody td {
  border-top-color: rgba(255, 255, 255, 0.08);
}

.dataset-summary-page table.dataTable tbody tr {
  transition: box-shadow 0.15s ease;
}
.dataset-summary-page table.dataTable tbody tr:hover td {
  background-color: rgba(0, 108, 163, 0.04);
}
.dataset-summary-page table.dataTable tbody tr:hover td:first-child {
  box-shadow: inset 3px 0 0 var(--eegdash-primary, #006ca3);
}

/* Canonical column (hidden by default, revealed via ColVis) carries a
   comma-separated list of machine-generated identifiers. Render in the
   same monospace as the Dataset ID column so the two read as a
   continuous family of "catalogue shelf-marks". */
.dataset-summary-page #datasets-table tbody [data-col-key="canonical"] {
  font-family: var(--eegdash-mono);
  font-size: 0.78rem;
  letter-spacing: -0.01em;
  color: var(--pst-color-text-muted, #64748b);
}

/* Author (year) column gets a slightly heavier identity — still sans, so
   it reads as a byline rather than an identifier. */
.dataset-summary-page #datasets-table tbody [data-col-key="author-year"] {
  font-style: italic;
  font-size: 0.82rem;
}

/* Dataset ID (first column) — mono, primary text colour with a muted
   underline that shifts to primary blue on hover. Reads as catalogue
   shelf-marks, not as decorative links. */
.dataset-summary-page table.dataTable tbody td:first-child,
.dataset-summary-page table.dataTable tbody td:first-child a {
  font-family: var(--eegdash-mono);
  font-weight: 500;
  font-size: 0.78rem;
  color: var(--pst-color-text-base, #0f172a);
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: rgba(0, 0, 0, 0.15);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.dataset-summary-page table.dataTable tbody td:first-child a:hover {
  color: var(--eegdash-primary, #006ca3);
  text-decoration-color: var(--eegdash-primary, #006ca3);
  text-decoration-thickness: 2px;
}
.dataset-summary-page table.dataTable tbody td:first-child a:focus-visible {
  outline: 2px solid var(--eegdash-primary, #006ca3);
  outline-offset: 2px;
  border-radius: 2px;
}
/* Browsers lock :visited link colour for privacy; match the unvisited
   palette so the Dataset ID reads consistently regardless of history. */
.dataset-summary-page table.dataTable tbody td:first-child a:visited {
  color: var(--pst-color-text-base, #0f172a);
}
.dataset-summary-page table.dataTable tbody td:first-child a:visited:hover {
  color: var(--eegdash-primary, #006ca3);
}
html[data-theme="dark"].dataset-summary-page table.dataTable tbody td:first-child a,
html[data-theme="dark"].dataset-summary-page table.dataTable tbody td:first-child a:visited {
  color: #e2e8f0;
  text-decoration-color: rgba(255, 255, 255, 0.25);
}
html[data-theme="dark"].dataset-summary-page table.dataTable tbody td:first-child a:hover,
html[data-theme="dark"].dataset-summary-page table.dataTable tbody td:first-child a:visited:hover {
  color: #4fb5e2;
  text-decoration-color: #4fb5e2;
}

/* Numeric/size columns: right-align for easy magnitude comparison.
   Reserve the same 1.6rem right padding across thead / tbody / tfoot so
   the header label, body numbers, and Total-row sums share one right
   edge. Without matching padding on tfoot the Records sum
   "222,745" hung 16 px left of its own column.
   Target last 6 columns (Records, Subjects, Tasks, Channels, Sampling
   rate, Size); Type is a tag column and must stay left-aligned. */
.dataset-summary-page table.dataTable tbody td:nth-last-child(-n+6),
.dataset-summary-page table.dataTable thead th:nth-last-child(-n+6),
.dataset-summary-page table.dataTable tfoot td:nth-last-child(-n+6) {
  text-align: right;
}
.dataset-summary-page table.dataTable tbody td:nth-last-child(-n+6),
.dataset-summary-page table.dataTable tfoot td:nth-last-child(-n+6) {
  padding-right: 1.6rem !important;
}

/* Empty cells read as em-dash for a cleaner table feel.
   Scoped to <tbody> only so the <tfoot> Total row (whose blank cells are
   "not applicable" rather than "missing data") stays clean. */
.dataset-summary-page #datasets-table tbody td:empty::after {
  content: "—";
  color: rgba(0, 0, 0, 0.25);
  font-weight: 400;
}
html[data-theme="dark"].dataset-summary-page #datasets-table tbody td:empty::after {
  color: rgba(255, 255, 255, 0.3);
}

/* "Clear filters" chip — appears only when a filter narrows the view.
   Shares the FILTERS / COLUMNS chip styling but in a warm undo tint.
   The generic `html[data-theme="dark"] .dt-button` rule is more specific
   than the plain class in dark mode, so we also need a dark-mode rule
   here that still wins. */
.dataset-summary-page .dataTables_wrapper .dt-button.dt-clear-filters {
  border-color: rgba(215, 80, 30, 0.35) !important;
  color: rgb(180, 60, 15) !important;
  background: rgba(247, 148, 29, 0.06) !important;
  margin-left: 0.5rem;
}
.dataset-summary-page .dataTables_wrapper .dt-button.dt-clear-filters:hover {
  border-color: rgb(215, 80, 30) !important;
  background: rgba(247, 148, 29, 0.14) !important;
  color: rgb(160, 50, 10) !important;
}
html[data-theme="dark"].dataset-summary-page .dataTables_wrapper .dt-button.dt-clear-filters {
  border-color: rgba(247, 148, 29, 0.4) !important;
  color: rgb(255, 196, 120) !important;
  background: rgba(247, 148, 29, 0.12) !important;
}
html[data-theme="dark"].dataset-summary-page .dataTables_wrapper .dt-button.dt-clear-filters:hover {
  border-color: rgb(247, 148, 29) !important;
  color: rgb(255, 220, 170) !important;
  background: rgba(247, 148, 29, 0.22) !important;
}

/* Empty-state messages inside the tbody (DataTables "zeroRecords" /
   "emptyTable"). Presented as a centred editorial notice with an icon
   glyph and a soft background, instead of a bare "No matching records". */
.dataset-summary-page #datasets-table tbody td.dataTables_empty {
  text-align: center !important;
  padding: 3rem 1rem !important;
  color: var(--pst-color-text-muted, #64748b) !important;
  background: repeating-linear-gradient(
    45deg,
    transparent 0 8px,
    rgba(0, 108, 163, 0.03) 8px 9px
  ) !important;
  font-size: 0.95rem !important;
  line-height: 1.55;
}
.dataset-summary-page #datasets-table tbody td.dataTables_empty .no-match {
  display: inline-block;
  max-width: 40ch;
}
.dataset-summary-page #datasets-table tbody td.dataTables_empty .no-match::before {
  content: "∅";
  display: block;
  font-family: var(--eegdash-display);
  font-size: 2.4rem;
  font-weight: 400;
  color: var(--eegdash-primary, #006ca3);
  margin-bottom: 0.35rem;
  line-height: 1;
}
.dataset-summary-page #datasets-table tbody td.dataTables_empty strong {
  color: var(--pst-color-text-base);
  font-weight: 600;
}

/* ------------------------------------------------------------------------
   Sparkbars on #of subjects / records / size — the perceptual scale cue.
   Position encoding is more accurate than reading integers across a
   many-row table, and a thin bar under the number lets users compare
   orders-of-magnitude at a glance. The ``--pct`` variable is written on
   the span by the Python renderer.
   ------------------------------------------------------------------------ */
.dataset-summary-page .sparkbar {
  display: inline-block;
  position: relative;
  min-width: 8rem;
  padding: 0.3rem 0.7rem;
  /* Three-layer background:
     1. The filled portion (0 -> --pct)
     2. A faint track behind the remainder so empty bars still read as scale
     3. A 1px 50% reference tick for quick comparison */
  background:
    linear-gradient(to right, rgba(0, 108, 163, 0) calc(50% - 1px), rgba(0, 0, 0, 0.08) 50%, rgba(0, 108, 163, 0) calc(50% + 1px)),
    linear-gradient(to right,
      rgba(0, 108, 163, 0.18) 0%,
      rgba(0, 108, 163, 0.18) var(--pct, 0%),
      rgba(0, 108, 163, 0.04) var(--pct, 0%)
    );
  border-radius: 4px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  letter-spacing: 0;
}

.dataset-summary-page .sparkbar .sparkbar-label {
  position: relative;
  z-index: 1;
  font-weight: 600;
  color: var(--pst-color-text-base);
}

/* Missing-data sparkbars: drop the blue fill + track tick, just show the
   em-dash at muted colour. */
.dataset-summary-page .sparkbar[style*="--pct:0%"] {
  background: none;
}
.dataset-summary-page .sparkbar[style*="--pct:0%"] .sparkbar-label {
  color: rgba(0, 0, 0, 0.3);
  font-weight: 400;
}
html[data-theme="dark"].dataset-summary-page .sparkbar[style*="--pct:0%"] .sparkbar-label {
  color: rgba(255, 255, 255, 0.3);
}

/* The bar gets bolder on row hover so the selected row reads as primary. */
.dataset-summary-page table.dataTable tbody tr:hover .sparkbar {
  background:
    linear-gradient(
      to right,
      rgba(0, 108, 163, 0.32) 0%,
      rgba(0, 108, 163, 0.32) var(--pct, 0%),
      transparent var(--pct, 0%)
    );
}

html[data-theme="dark"].dataset-summary-page .sparkbar {
  background:
    linear-gradient(to right, rgba(86, 180, 233, 0) calc(50% - 1px), rgba(255, 255, 255, 0.12) 50%, rgba(86, 180, 233, 0) calc(50% + 1px)),
    linear-gradient(to right,
      rgba(86, 180, 233, 0.3) 0%,
      rgba(86, 180, 233, 0.3) var(--pct, 0%),
      rgba(86, 180, 233, 0.08) var(--pct, 0%)
    );
}
html[data-theme="dark"].dataset-summary-page .sparkbar .sparkbar-label {
  color: #e2e8f0;
}
html[data-theme="dark"].dataset-summary-page .sparkbar[style*="--pct:0%"] {
  background: none;
}

/* ------------------------------------------------------------------------
   Subtle column-group separator after the Dataset ID column so the
   identity anchor is visually distinct from the descriptive + numeric
   columns.
   ------------------------------------------------------------------------ */
.dataset-summary-page table.dataTable tbody td:first-child,
.dataset-summary-page table.dataTable thead th:first-child {
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  padding-right: 1rem !important;
}
.dataset-summary-page table.dataTable tbody td:nth-child(2),
.dataset-summary-page table.dataTable thead th:nth-child(2) {
  padding-left: 1rem !important;
}
html[data-theme="dark"].dataset-summary-page table.dataTable tbody td:first-child,
html[data-theme="dark"].dataset-summary-page table.dataTable thead th:first-child {
  border-right-color: rgba(255, 255, 255, 0.1);
}

/* Subtle zebra striping for longer scan sessions. Opaque colours so the
   sticky first column can match exactly (rgba over transparent renders
   differently on the sticky cell than on its neighbours otherwise). */
.dataset-summary-page table.dataTable tbody tr:nth-child(even) td {
  background-color: #fafafa;
}
.dataset-summary-page table.dataTable tbody tr:nth-child(even):hover td {
  background-color: rgba(0, 108, 163, 0.05);
}
html[data-theme="dark"].dataset-summary-page table.dataTable tbody tr:nth-child(even) td {
  background-color: #162033;
}

/* DataTables toolbar — chips on the left, search on the right, consistent
   heights. A thin rule underneath anchors the toolbar to the table. */
.dataset-summary-page .dataTables_wrapper {
  display: grid;
  /* minmax(0, 1fr) lets the 1fr column shrink below its content's min-size,
     which is critical here because the grid contains the 2372 px table
     (spanning all columns). With plain `1fr` the 1fr column stretched to
     the table's width, pushing the chips and filter input hundreds of
     pixels off-screen on narrow viewports. */
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: 1.25rem;
  row-gap: 0.75rem;
}
.dataset-summary-page .dataTables_wrapper .dt-buttons {
  grid-column: 1;
  grid-row: 1;
  display: inline-flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0 0 0.75rem 0 !important;
}
.dataset-summary-page .dataTables_wrapper .dataTables_filter {
  grid-column: 2;
  grid-row: 1;
  margin: 0 0 0.75rem 0 !important;
  text-align: right;
}
.dataset-summary-page .dataTables_wrapper > table {
  grid-column: 1 / -1;
  grid-row: 2;
}
.dataset-summary-page .dataTables_wrapper tfoot,
.dataset-summary-page .dataTables_wrapper thead {
  grid-column: 1 / -1;
}

/* Narrow viewports (phones / split panes): stack the toolbar vertically
   so the filter input doesn't push chips off-screen. The filter input's
   18rem min-width alone is wider than ~500 px; single-column grid fixes
   this cleanly without shrinking either control. */
@media (max-width: 720px) {
  .dataset-summary-page .dataTables_wrapper {
    grid-template-columns: minmax(0, 1fr);
  }
  .dataset-summary-page .dataTables_wrapper .dt-buttons,
  .dataset-summary-page .dataTables_wrapper .dataTables_filter {
    grid-column: 1;
    text-align: left;
  }
  .dataset-summary-page .dataTables_wrapper .dataTables_filter {
    grid-row: 2;
    margin-bottom: 1rem !important;
  }
  .dataset-summary-page .dataTables_wrapper .dataTables_filter {
    display: block;
  }
  .dataset-summary-page .dataTables_wrapper .dataTables_filter label {
    display: flex;
    width: 100%;
  }
  .dataset-summary-page .dataTables_wrapper .dataTables_filter input {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
  }
  .dataset-summary-page .dataTables_wrapper > table {
    grid-row: 3;
  }
}

.dataset-summary-page .dataTables_wrapper .dt-button {
  padding: 0.4rem 0.95rem !important;
  border: 1px solid rgba(0, 0, 0, 0.14) !important;
  background: var(--pst-color-background, #fff) !important;
  border-radius: 999px !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--pst-color-text-base) !important;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
}

.dataset-summary-page .dataTables_wrapper .dt-button:hover {
  border-color: var(--eegdash-primary, #006ca3) !important;
  color: var(--eegdash-primary, #006ca3) !important;
  background: rgba(0, 108, 163, 0.04) !important;
  box-shadow: 0 1px 0 rgba(0, 108, 163, 0.08);
}
.dataset-summary-page .dataTables_wrapper .dt-button:focus-visible {
  outline: none;
  border-color: var(--eegdash-primary, #006ca3) !important;
  box-shadow: 0 0 0 3px rgba(0, 108, 163, 0.2);
}

.dataset-summary-page .dataTables_wrapper .dt-button.buttons-colvis::before {
  content: "\2630"; /* trigram: compact icon */
  margin-right: 0.45rem;
  font-weight: 400;
  opacity: 0.7;
  display: inline-block;
  transform: translateY(-1px);
}
.dataset-summary-page .dataTables_wrapper .dt-button.buttons-searchPanes::before {
  content: "\26B2"; /* neuter/filter-ish glyph, small */
  margin-right: 0.45rem;
  font-weight: 400;
  opacity: 0.65;
}

/* Filter input — modest width, search-icon suffix via background. */
.dataset-summary-page .dataTables_wrapper .dataTables_filter label {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pst-color-text-muted);
  font-weight: 700;
  margin: 0;
}
.dataset-summary-page .dataTables_wrapper .dataTables_filter input {
  padding: 0.4rem 0.85rem;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 999px;
  width: 16rem;
  font-size: 0.82rem;
  margin: 0;
  background: var(--pst-color-background, #fff);
  color: var(--pst-color-text-base);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.dataset-summary-page .dataTables_wrapper .dataTables_filter input:focus {
  outline: none;
  border-color: var(--eegdash-primary, #006ca3);
  box-shadow: 0 0 0 3px rgba(0, 108, 163, 0.14);
}

/* Give the native webkit clear button a visible, brand-tinted glyph so
   users can see at a glance that a typed query can be cleared. Default is
   almost invisible on a styled input. */
.dataset-summary-page .dataTables_wrapper .dataTables_filter input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-left: 0.4rem;
  cursor: pointer;
  background-color: currentColor;
  color: var(--pst-color-text-muted, #64748b);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M6 6l8 8M14 6l-8 8' stroke='black' stroke-width='2' stroke-linecap='round' fill='none'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M6 6l8 8M14 6l-8 8' stroke='black' stroke-width='2' stroke-linecap='round' fill='none'/></svg>") center / contain no-repeat;
  opacity: 0.55;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.dataset-summary-page .dataTables_wrapper .dataTables_filter input[type="search"]::-webkit-search-cancel-button:hover {
  opacity: 1;
  color: var(--eegdash-primary, #006ca3);
}
.dataset-summary-page .dataTables_wrapper .dataTables_filter input::placeholder {
  color: var(--pst-color-text-muted);
  opacity: 0.6;
}

html[data-theme="dark"].dataset-summary-page .dataTables_wrapper .dt-button {
  border-color: rgba(255, 255, 255, 0.16) !important;
  background: rgba(255, 255, 255, 0.03) !important;
}
html[data-theme="dark"].dataset-summary-page .dataTables_wrapper .dataTables_filter input {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.16);
}

/* Tag chips in body cells — consistent 24px height, legible at-a-glance.
   Keep the variant-specific pastel fills (defined far below, per
   modality/pathology/type) so the colour-encoded data survives; the
   editorial change is shape (4px radius, not pill) + tight type.
   NOTE: `text-transform` is intentionally `none`. The renderer already
   supplies properly-cased text (e.g. "Healthy", "MEG", "iEEG") via
   _TAG_VALUE_FORMATTERS; forcing uppercase here would mangle acronyms
   ("iEEG" → "IEEG"). Cursor is pointer because tags are clickable —
   each one filters the column to its value. */
.dataset-summary-page #datasets-table tbody .tag {
  display: inline-block;
  padding: 0 9px !important;
  margin: 1px 3px !important;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  font-feature-settings: "kern", "liga";
  white-space: nowrap;
  line-height: 22px;
  height: 24px;
  vertical-align: middle;
  cursor: pointer;
  transition: filter 0.15s ease, box-shadow 0.15s ease;
}
.dataset-summary-page #datasets-table tbody .tag:hover {
  filter: brightness(0.96);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}
/* The tag currently driving a column filter — all matching tags in that
   column get a subtle primary-blue ring so users see which value is live. */
.dataset-summary-page #datasets-table tbody .tag.tag-filter-active {
  box-shadow: 0 0 0 2px var(--eegdash-primary, #006ca3);
  filter: brightness(1.02) saturate(1.15);
}

/* Header of a column with an active filter — thin primary-blue top rule
   + left ruby dot so the filter state is visible even when tags scroll
   off-screen. Clicking the header still just sorts (existing behaviour). */
.dataset-summary-page #datasets-table thead th.dt-col-filtered {
  border-top: 2px solid var(--eegdash-primary, #006ca3);
  background: rgba(0, 108, 163, 0.04) !important;
}
.dataset-summary-page #datasets-table thead th.dt-col-filtered::before {
  content: "";
  position: absolute;
  top: 0.55rem;
  left: 0.55rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--eegdash-primary, #006ca3);
}

/* Multi-tag cells (Type column "Clinical Intervention") — flex so the
   chips wrap with tidy gaps instead of collapsing on a single baseline. */
.dataset-summary-page #datasets-table tbody td:has(.tag + .tag) {
  display: table-cell;
  line-height: 1.8;
}

/* Type column carries multi-word compound values ("Clinical Intervention",
   "Resting-state") as 2+ chips. Without a floor width it squeezes to 81px
   and every such row wraps to 73px. Reserve room for two chips in one row. */
.dataset-summary-page #datasets-table [data-col-key="type"] {
  min-width: 12rem;
}

/* Total row — editorial closure. Strong upper rule, display serif on
   the summary label. The row is moved into <tfoot> by the init JS; we
   target <tfoot> exclusively so the legitimate last <tbody> row (just
   another dataset) keeps the regular row styling. */
.dataset-summary-page table.dataTable tfoot tr td {
  border-top: 2px solid var(--pst-color-text-base);
  font-weight: 700;
  font-size: 0.84rem !important;
  background: transparent !important;
  padding-top: 0.8rem !important;
  padding-bottom: 0.8rem !important;
}
.dataset-summary-page table.dataTable tfoot tr td:first-child {
  font-family: var(--eegdash-display);
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--pst-color-text-base);
  text-decoration: none;
}

/* Figure/caption frame around the table: more margin + drop the heavy
   border, rely on whitespace. */
.dataset-summary-page .eegdash-figure {
  margin: 1rem 0 3rem 0 !important;
  border: none;
  padding: 0;
  position: relative; /* anchor for the scroll-fade ::after */
}

/* Editorial figure-title block (above each chart). Replaces the old
   sphinx-design `.. rubric::` rendering — supports a real <h3> headline
   plus a muted subtitle paragraph, matching the styled titles we used to
   draw inside Plotly. The richer markup lives in the .rst now so it's
   editable from the docs source instead of buried in Python. */
.dataset-summary-page .eegdash-fig-title {
  margin: 0 0 0.85rem 0;
  padding: 0;
  border: none;
}
.dataset-summary-page .eegdash-fig-title h3 {
  margin: 0 0 0.25rem 0;
  font-family: var(--pst-font-family-heading);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--pst-color-text-base);
}
.dataset-summary-page .eegdash-fig-title p {
  margin: 0;
  max-width: none;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--pst-color-text-muted, #64748b);
}
html[data-theme="dark"].dataset-summary-page .eegdash-fig-title h3 {
  color: #e2e8f0;
}

/* ------------------------------------------------------------------------
   Print / PDF export — optimise for a plain black-on-white catalogue.
   Strip interactive chrome (filters / search / tabs / navbar / footer),
   drop the editorial drop-cap, expand the scroll wrapper so rows don't
   get clipped, and keep the table as one unbroken unit.
   ------------------------------------------------------------------------ */
@media print {
  .dataset-summary-page .dt-buttons,
  .dataset-summary-page .dataTables_filter,
  .dataset-summary-page .sd-tab-set > input,
  .dataset-summary-page .sd-tab-set > label,
  .dataset-summary-page .bd-sidebar-primary,
  .dataset-summary-page .bd-sidebar-secondary,
  .dataset-summary-page .bd-header,
  .dataset-summary-page .bd-footer,
  .dataset-summary-page .eegdash-figure::after {
    display: none !important;
  }

  /* Table: full contents on paper; no overflow clipping. */
  .dataset-summary-page #datasets-table_wrapper,
  .dataset-summary-page .dataTables_wrapper {
    overflow: visible !important;
    width: 100% !important;
    display: block !important;
  }
  .dataset-summary-page #datasets-table {
    width: 100% !important;
    font-size: 9pt !important;
  }
  .dataset-summary-page #datasets-table thead {
    display: table-header-group; /* repeat on each printed page */
  }
  .dataset-summary-page #datasets-table thead th {
    position: static !important; /* kill sticky for paper */
    background: transparent !important;
    color: #000 !important;
    border-bottom: 2px solid #000 !important;
  }
  .dataset-summary-page #datasets-table tbody tr {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .dataset-summary-page #datasets-table tbody td:first-child,
  .dataset-summary-page #datasets-table thead th:first-child {
    position: static !important; /* unset sticky left column */
    border-right: 1px solid #000 !important;
    background: transparent !important;
  }
  .dataset-summary-page #datasets-table tbody tr:nth-child(even) td {
    background-color: #f3f3f3 !important; /* lighter zebra for ink */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  /* Sparkbars: keep the fill so scale encoding survives printing. */
  .dataset-summary-page .sparkbar {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  /* Tags: flatten gradient to a solid border so they still read on ink. */
  .dataset-summary-page #datasets-table tbody .tag {
    background-image: none !important;
    background-color: transparent !important;
    border: 1px solid #333 !important;
    color: #000 !important;
  }
  /* Drop the editorial ornament — it doesn't survive a B/W print. */
  .dataset-summary-page .sd-tab-content > p.rubric + p::first-letter {
    font-size: inherit !important;
    float: none !important;
    padding: 0 !important;
    color: inherit !important;
  }
  /* Total row: keep its top rule prominent on paper. */
  .dataset-summary-page #datasets-table tfoot tr td {
    border-top: 2px solid #000 !important;
    background: transparent !important;
  }
}

/* ------------------------------------------------------------------------
   Intro block above the table — "Scientific Index" editorial treatment.
   A refined serif rubric with a thin hairline above; a lede paragraph
   with looser leading and slightly larger size; the rest of the intro
   capped at a 70ch reading width.
   ------------------------------------------------------------------------ */
.dataset-summary-page .sd-tab-content > p {
  /* Span the same width as the data table. Earlier iterations used a
     72ch cap for "readability" but it rendered the prose as a narrow
     column orphaned above a 1500px-wide table — the wider the data, the
     wider the intro should feel. */
  max-width: none;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--pst-color-text-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern", "liga", "onum";
}

/* Lede: the first non-rubric paragraph after the rubric — slightly larger,
   looser leading; subsequent paragraphs default to the rule above. */
.dataset-summary-page .sd-tab-content > p.rubric + p {
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--pst-color-text-base);
  max-width: none;
}
.dataset-summary-page .sd-tab-content > p.rubric + p::first-letter {
  font-family: var(--eegdash-display);
  font-size: 2.6em;
  font-weight: 600;
  float: left;
  line-height: 0.95;
  padding-right: 0.5rem;
  padding-top: 0.4rem;
  color: var(--eegdash-primary, #006ca3);
}

.dataset-summary-page .sd-tab-content > p.rubric {
  font-family: var(--eegdash-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  font-style: italic;
  color: var(--pst-color-text-muted, #64748b);
  margin: 1.5rem 0 1.25rem 0 !important;
  padding: 0.75rem 0 0 0;
  border-top: 1px solid rgba(0, 0, 0, 0.14);
  border-bottom: none;
  max-width: none;
  -webkit-font-smoothing: antialiased;
}

html[data-theme="dark"].dataset-summary-page .sd-tab-content > p.rubric {
  border-top-color: rgba(255, 255, 255, 0.18);
}

/* Keep the intro text + toolbar apart from each other. */
.dataset-summary-page .eegdash-figure > .dataTables_wrapper,
.dataset-summary-page .eegdash-figure > #datasets-table_wrapper {
  margin-top: 1.75rem;
}
.dataset-summary-page .eegdash-caption {
  font-size: 0.85rem;
  color: var(--pst-color-text-muted);
  margin-top: 0.9rem;
  /* Full width (same as the data table above). Narrow captions orphan
     themselves beneath a wide figure. */
  max-width: none;
  line-height: 1.55;
  text-align: left;
}

/* SearchPanes popup — match the editorial theme. */
.dataset-summary-page div.dtsp-panesContainer {
  background: var(--pst-color-background, #fff);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  padding: 1rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
}

/* Colvis dropdown — clean, aligned.
   Cap the dropdown height AND recompute the available space from its top
   edge at render time (the menu opens below the chip, which may sit low
   on short viewports). Without --dtc-top-offset the 14-item list overflowed
   off the bottom of the screen with most items unreachable. */
.dataset-summary-page div.dt-button-collection {
  background: var(--pst-color-background, #fff);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  padding: 0.4rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  max-height: calc(100vh - var(--dtc-top-offset, 4rem) - 1.5rem) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}
.dataset-summary-page div.dt-button-collection .dt-button {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  border: none !important;
  border-radius: 6px !important;
  padding-left: 2rem !important;
  position: relative;
}
/* Visible (active) column: prepend a checkmark, keep the primary-tint bg. */
.dataset-summary-page div.dt-button-collection .dt-button.dt-button-active {
  color: var(--eegdash-primary, #006ca3) !important;
  background: rgba(0, 108, 163, 0.1) !important;
  font-weight: 600;
}
.dataset-summary-page div.dt-button-collection .dt-button.dt-button-active::before {
  content: "✓";
  position: absolute;
  left: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--eegdash-primary, #006ca3);
  font-weight: 700;
}
/* Hidden column: calm, dim. */
.dataset-summary-page div.dt-button-collection .dt-button:not(.dt-button-active) {
  color: var(--pst-color-text-muted, #64748b) !important;
  background: transparent !important;
}
.dataset-summary-page div.dt-button-collection .dt-button:not(.dt-button-active):hover {
  background: rgba(0, 108, 163, 0.06) !important;
  color: var(--pst-color-text-base) !important;
}

/* Bigger Stats Cards */
.dataset-counter-card {
  padding: 2rem !important;
}

.dataset-counter-card .sd-card-text {
  font-size: 1.25rem;
}

.dataset-counter-card strong {
  font-size: 2.5rem;
  /* Massive numbers */
  color: var(--eegdash-primary);
  display: block;
  margin-top: 0.5rem;
}

/* --------------------------------------------------------------------------
   14. Homepage Specifics
   -------------------------------------------------------------------------- */
/* Larger icons in feature grid */
.feature-card .sd-octicon {
  font-size: 2.4rem !important;
}

.feature-card .hf-feature-logo {
  display: block;
  height: 2.4rem;
  width: auto;
  margin-bottom: 0.35rem;
}

html[data-theme="dark"] .feature-card .hf-feature-logo {
  filter: invert(1) grayscale(1) brightness(1.05);
}

/* --------------------------------------------------------------------------
   15. Hugging Face-inspired Homepage
   -------------------------------------------------------------------------- */
.hf-hero {
  position: relative;
  margin: 1.5rem 0 2.5rem;
  padding: clamp(2.25rem, 3.6vw, 3.5rem);
  border-radius: 28px;
  background: linear-gradient(140deg, rgba(79, 140, 255, 0.18), rgba(255, 179, 71, 0.2));
  border: 1px solid var(--hf-card-border);
  overflow: hidden;
  box-shadow: 0 28px 60px -48px rgba(15, 23, 42, 0.55);
}

html[data-theme="dark"] .hf-hero {
  background: linear-gradient(140deg, rgba(79, 140, 255, 0.22), rgba(255, 179, 71, 0.12));
  box-shadow: 0 28px 60px -48px rgba(2, 6, 23, 0.8);
}

.hf-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(79, 140, 255, 0.24), transparent 60%),
    radial-gradient(circle at 88% 5%, rgba(255, 179, 71, 0.24), transparent 55%),
    linear-gradient(var(--hf-grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--hf-grid-color) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 48px 48px, 48px 48px;
  opacity: 0.35;
  pointer-events: none;
}

.hf-hero::after {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  right: -120px;
  bottom: -140px;
  background: radial-gradient(circle, rgba(79, 140, 255, 0.22), transparent 65%);
  opacity: 0.6;
  pointer-events: none;
}

.hf-hero-grid {
  position: relative;
  z-index: 1;
  align-items: start;
}

.hf-hero-copy {
  position: relative;
  z-index: 1;
}

.hf-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--pst-color-text-base);
  background: var(--hf-surface);
  border: 1px solid var(--hf-card-border);
  margin: 0 0 1rem;
}

.hf-hero-title {
  font-family: var(--pst-font-family-heading);
  font-weight: 700;
  font-size: clamp(2.5rem, 4vw, 4.2rem);
  line-height: 1.05;
  margin: 0 0 1.25rem;
  color: var(--pst-color-text-base);
  letter-spacing: -0.02em;
}

.hf-hero-lede {
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--hf-text-muted);
  margin: 0 0 1.25rem;
  max-width: 32rem;
}

.hf-hero-note {
  font-size: 0.95rem;
  color: var(--hf-text-muted);
  margin: -0.75rem 0 1.25rem;
}

.hf-hero-note p {
  margin: 0;
}

.hf-hero-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 1.75rem;
  display: grid;
  gap: 0.65rem;
  color: var(--pst-color-text-base);
  font-weight: 600;
}

.hf-hero-bullets li {
  position: relative;
  padding-left: 1.4rem;
}

.hf-hero-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: linear-gradient(120deg, var(--hf-sky-strong), var(--hf-sun-strong));
}

.hf-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.hf-hero-link {
  display: inline-flex;
  margin-top: -0.75rem;
  font-weight: 600;
  color: var(--pst-color-text-base);
  text-decoration: none;
  border-bottom: 2px solid rgba(15, 23, 42, 0.2);
  padding-bottom: 0.15rem;
}

.hf-hero-link:hover {
  border-bottom-color: var(--hf-sun-strong);
}

.hf-hero-link:focus-visible {
  outline: 2px solid rgba(79, 140, 255, 0.6);
  outline-offset: 4px;
}

.hf-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;
}

.hf-search {
  display: grid;
  gap: 0.85rem;
  margin-bottom: 1.75rem;
}

.hf-search-input-wrap {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.85rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--hf-card-border);
  box-shadow: 0 12px 28px -24px rgba(15, 23, 42, 0.45);
}

html[data-theme="dark"] .hf-search-input-wrap {
  background: rgba(15, 23, 42, 0.9);
}

.hf-search-input-wrap:focus-within {
  border-color: rgba(79, 140, 255, 0.65);
  box-shadow: 0 0 0 3px rgba(79, 140, 255, 0.2);
}

.hf-search-icon {
  font-size: 1.1rem;
  opacity: 0.6;
}

.hf-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-size: 1rem;
  outline: none;
  color: var(--pst-color-text-base);
}

.hf-search-input::placeholder {
  color: rgba(15, 23, 42, 0.5);
}

html[data-theme="dark"] .hf-search-input::placeholder {
  color: rgba(226, 232, 240, 0.6);
}

.hf-search-submit {
  border: none;
  border-radius: 999px;
  background: var(--hf-surface-strong);
  color: #f8fafc;
  padding: 0.45rem 1rem;
  font-weight: 600;
  cursor: pointer;
}

html[data-theme="dark"] .hf-search-submit {
  background: #f8fafc;
  color: #0f172a;
}

.hf-search-submit:hover {
  filter: brightness(1.05);
}

.hf-search-submit:focus-visible {
  outline: 2px solid rgba(79, 140, 255, 0.8);
  outline-offset: 2px;
}

.hf-search-suggest {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.9rem;
}

.hf-suggest-label {
  color: var(--hf-text-muted);
  font-weight: 600;
}

.hf-suggest-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--hf-card-border);
  color: var(--pst-color-text-base);
  text-decoration: none;
  font-weight: 600;
  background: var(--hf-surface);
}

.hf-suggest-link:hover {
  border-color: rgba(79, 140, 255, 0.4);
  color: var(--hf-sky-strong);
}

.hf-suggest-link:focus-visible {
  outline: 2px solid rgba(79, 140, 255, 0.6);
  outline-offset: 2px;
}

.hf-search-filters {
  display: grid;
  gap: 0.75rem;
}

.hf-filter-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.hf-filter-title {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--hf-text-muted);
  margin-right: 0.35rem;
}

.hf-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--hf-card-border);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--hf-surface);
  color: var(--pst-color-text-base);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.hf-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.hf-chip input:checked+span,
.hf-chip input:checked {
  color: inherit;
}

.hf-chip:has(input:checked) {
  border-color: rgba(79, 140, 255, 0.6);
  background: rgba(79, 140, 255, 0.15);
  color: var(--hf-sky-strong);
}

.hf-chip-static {
  cursor: default;
  background: rgba(255, 179, 71, 0.2);
  border-color: rgba(255, 179, 71, 0.5);
}

.hf-chip:focus-within {
  outline: 2px solid rgba(79, 140, 255, 0.6);
  outline-offset: 2px;
}

.hf-btn {
  border-radius: 999px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
}

.hf-btn:focus-visible {
  outline: 2px solid rgba(79, 140, 255, 0.8);
  outline-offset: 2px;
}

.hf-btn-primary {
  background: var(--hf-surface-strong) !important;
  border: 1px solid rgba(15, 23, 42, 0.6) !important;
  color: #f8fafc !important;
  box-shadow: 0 12px 24px -16px rgba(15, 23, 42, 0.6);
}

.hf-btn-primary:hover {
  filter: brightness(1.05);
}

.hf-btn-secondary {
  background: var(--hf-surface) !important;
  border: 1px solid var(--hf-card-border) !important;
  color: var(--pst-color-text-base) !important;
}

.hf-btn-secondary:hover {
  border-color: rgba(15, 23, 42, 0.35) !important;
  transform: translateY(-1px);
}

.hf-btn-ghost {
  background: transparent !important;
  border: 1px solid rgba(248, 250, 252, 0.4) !important;
  color: #f8fafc !important;
}

.hf-btn-ghost:hover {
  border-color: rgba(248, 250, 252, 0.7) !important;
}

.hf-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.hf-pill {
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: var(--hf-surface);
  border: 1px solid var(--hf-card-border);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--pst-color-text-base);
}

.hf-pill p {
  margin: 0;
}

.hf-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1rem;
}

.hf-badges img {
  height: 26px;
  filter: saturate(0.9);
}

.hf-hero-panel {
  display: grid;
  gap: 1.5rem;
  align-content: start;
}

.hf-hero-card {
  position: relative;
  border-radius: 20px;
  padding: 1.75rem;
  background: var(--hf-surface-strong);
  color: #f8fafc;
  border: 1px solid rgba(148, 163, 184, 0.25);
  box-shadow: 0 24px 40px -32px rgba(15, 23, 42, 0.7);
  overflow: hidden;
}

.hf-hero-card.hf-quickstart {
  padding: 2.1rem;
}

.hf-hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 10% 20%, rgba(79, 140, 255, 0.35), transparent 55%);
  opacity: 0.6;
  pointer-events: none;
}

.hf-hero-card>* {
  position: relative;
  z-index: 1;
}

.hf-card-title {
  font-size: 0.9rem;
  text-transform: none;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: rgba(248, 250, 252, 0.7);
  margin: 0 0 0.75rem;
}

.hf-quickstart .hf-card-title {
  font-size: 1.05rem;
}

.hf-quickstart .sd-tab-set>label {
  font-size: 0.95rem;
}

.hf-hero-card div.highlight {
  background: #0b1220;
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: none;
}

.hf-hero-card div.highlight pre {
  color: #f8fafc;
  font-size: 0.95rem;
  font-family: var(--pst-font-family-monospace);
}

.hf-quickstart .highlight button.copybtn {
  opacity: 1;
  border-color: rgba(248, 250, 252, 0.4);
  background-color: rgba(15, 23, 42, 0.85);
  color: #f8fafc;
}

.hf-quickstart .highlight button.copybtn:hover {
  background-color: rgba(30, 41, 59, 0.9);
}

.hf-quickstart .highlight button.copybtn:focus-visible {
  outline: 2px solid rgba(248, 250, 252, 0.7);
  outline-offset: 2px;
}

.hf-card-note {
  margin: 1rem 0 1.5rem;
  color: rgba(226, 232, 240, 0.85);
}

.hf-card-note p {
  margin: 0;
}

.hf-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.hf-quickstart .hf-btn-primary {
  background: #f8fafc !important;
  color: #0f172a !important;
  border-color: rgba(248, 250, 252, 0.9) !important;
}

.hf-card-link {
  display: inline-flex;
  margin-top: 0.75rem;
  color: rgba(226, 232, 240, 0.8);
  text-decoration: none;
  font-weight: 600;
}

.hf-card-link:hover {
  color: #f8fafc;
}

.hf-card-link:focus-visible {
  outline: 2px solid rgba(248, 250, 252, 0.8);
  outline-offset: 2px;
}

.sd-tab-set.hf-code-tabs {
  margin-bottom: 0;
}

.sd-tab-set.hf-code-tabs>label {
  color: #1f2937;
  background: #f8fafc;
  border: 1px solid rgba(148, 163, 184, 0.6);
  border-bottom: 0;
  font-weight: 600;
  padding: 0.6rem 1.1rem;
  margin-right: 0.4rem;
}

.sd-tab-set.hf-code-tabs>label:hover {
  color: var(--eegdash-primary-dark);
  background: #ffffff;
}

.sd-tab-set.hf-code-tabs>input:checked+label {
  background: #ffffff;
  color: var(--eegdash-primary);
  border-color: rgba(0, 108, 163, 0.75);
}

.sd-tab-set.hf-code-tabs .sd-tab-content {
  background: #f8fafc;
  border: 2px solid rgba(0, 108, 163, 0.45);
  border-radius: 0 12px 12px 12px;
  color: #0f172a;
  padding: 0.8rem 1.05rem;
}

html[data-theme="dark"] .sd-tab-set.hf-code-tabs>label {
  background: rgba(30, 41, 59, 0.5);
  color: var(--pst-color-text-muted);
  border-color: rgba(148, 163, 184, 0.2);
}

html[data-theme="dark"] .sd-tab-set.hf-code-tabs>label:hover {
  background: rgba(30, 41, 59, 1);
  color: var(--eegdash-primary);
}

html[data-theme="dark"] .sd-tab-set.hf-code-tabs>input:checked+label {
  background: rgba(15, 23, 42, 1);
  color: var(--eegdash-primary);
  border-color: var(--eegdash-primary);
  border-bottom: 2px solid var(--eegdash-primary);
}

html[data-theme="dark"] .sd-tab-set.hf-code-tabs .sd-tab-content {
  background: rgba(15, 23, 42, 0.8);
  border-color: var(--eegdash-primary);
  color: var(--pst-color-text-base);
}

.hf-preview-card {
  background: var(--hf-surface);
  border: 1px solid var(--hf-card-border);
  border-radius: 18px;
  padding: 1.5rem;
  box-shadow: 0 18px 40px -32px rgba(15, 23, 42, 0.35);
}

html[data-theme="dark"] .hf-preview-card {
  background: rgba(15, 23, 42, 0.8);
}

.hf-preview-title {
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 1rem;
  color: var(--hf-text-muted);
}

.hf-preview-item {
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.hf-preview-item:last-of-type {
  border-bottom: none;
}

.hf-preview-name {
  font-weight: 700;
  color: var(--pst-color-text-base);
}

.hf-preview-meta {
  font-size: 0.85rem;
  color: var(--hf-text-muted);
  margin-bottom: 0.5rem;
}

.hf-preview-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.hf-preview-link {
  display: inline-flex;
  margin-top: 1rem;
  font-weight: 600;
  color: var(--hf-sky-strong);
  text-decoration: none;
}

.hf-preview-link:hover {
  text-decoration: underline;
}

.hf-preview-link:focus-visible {
  outline: 2px solid rgba(79, 140, 255, 0.6);
  outline-offset: 2px;
}

.hf-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.hf-stat {
  background: var(--hf-surface);
  border: 1px solid var(--hf-card-border);
  border-radius: 16px;
  padding: 1rem;
  text-align: left;
}

.hf-stat-value {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--pst-color-text-base);
  margin: 0 0 0.25rem;
}

.hf-stat-logo {
  display: inline-block;
  height: 32px;
  width: auto;
}

.hf-stat-label {
  margin: 0;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hf-text-muted);
}

.hf-section-title {
  font-family: var(--pst-font-family-heading);
  font-size: clamp(1.8rem, 2.7vw, 2.6rem);
  margin: 2.25rem 0 0.75rem;
  color: var(--pst-color-text-base);
  letter-spacing: -0.02em;
}

.hf-section-title-center {
  text-align: center;
}

.hf-section-subtitle {
  margin: 0 0 1.5rem;
  color: var(--hf-text-muted);
  max-width: 48rem;
}

.hf-stat-grid {
  margin-bottom: 2rem;
}

.hf-stat-card {
  border-radius: 20px !important;
  border: 1px solid var(--hf-card-border) !important;
  background: var(--hf-surface);
  box-shadow: 0 18px 40px -32px rgba(15, 23, 42, 0.35);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

.hf-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px -36px rgba(15, 23, 42, 0.45);
}

html[data-theme="dark"] .hf-stat-card {
  background: rgba(15, 23, 42, 0.75);
}

.hf-stat-card .sd-card-body {
  padding: 1.5rem;
}

.hf-stat-card .sd-card-header {
  background: transparent;
  border: none;
  font-weight: 600;
  color: var(--hf-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 1.25rem 1.5rem 0;
}

.hf-stat-text {
  margin: 0;
  color: var(--hf-text-muted);
  font-size: 0.95rem;
}

.hf-trust {
  margin: 2.25rem 0 2.75rem;
  padding: 2rem;
  border-radius: 24px;
  background: var(--hf-surface);
  border: 1px solid var(--hf-card-border);
  box-shadow: 0 18px 40px -32px rgba(15, 23, 42, 0.3);
  display: grid;
  gap: 1.5rem;
}

html[data-theme="dark"] .hf-trust {
  background: rgba(15, 23, 42, 0.75);
}

.hf-trust-title {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0;
  color: var(--pst-color-text-base);
}

.hf-trust-title p {
  margin: 0;
}

.hf-trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

.hf-trust-badges img {
  height: 24px;
}

.hf-trust-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.hf-trending {
  margin-bottom: 2.5rem;
}

.hf-trending .hf-section-title {
  margin-top: 0;
}

.hf-trending .hf-section-subtitle {
  margin-bottom: 1.25rem;
}

.hf-trending-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.hf-trending-card {
  display: grid;
  gap: 0.75rem;
  padding: 1.5rem;
  border-radius: 18px;
  background: var(--hf-surface);
  border: 1px solid var(--hf-card-border);
  box-shadow: 0 18px 40px -32px rgba(15, 23, 42, 0.35);
}

html[data-theme="dark"] .hf-trending-card {
  background: rgba(15, 23, 42, 0.75);
}

.hf-trending-title {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--pst-color-text-base);
}

.hf-trending-meta {
  font-size: 0.85rem;
  color: var(--hf-text-muted);
  margin-top: -0.4rem;
}

.hf-trending-item {
  display: grid;
  gap: 0.2rem;
  padding: 0.65rem 0.75rem;
  border-radius: 12px;
  border: 1px solid transparent;
  text-decoration: none;
  color: var(--pst-color-text-base);
  background: rgba(148, 163, 184, 0.12);
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.hf-trending-item:hover {
  border-color: rgba(79, 140, 255, 0.35);
  background: rgba(79, 140, 255, 0.12);
  transform: translateY(-1px);
}

.hf-trending-item:focus-visible {
  outline: 2px solid rgba(79, 140, 255, 0.6);
  outline-offset: 2px;
}

.hf-trending-name {
  font-weight: 600;
}

.hf-trending-desc {
  font-size: 0.85rem;
  color: var(--hf-text-muted);
}

.hf-trending-link {
  display: inline-flex;
  margin-top: 0.25rem;
  font-weight: 600;
  color: var(--hf-sky-strong);
  text-decoration: none;
}

.hf-trending-link:hover {
  text-decoration: underline;
}

.hf-trending-link:focus-visible {
  outline: 2px solid rgba(79, 140, 255, 0.6);
  outline-offset: 2px;
}

.hf-workflow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin: 0 0 2.5rem;
}

.hf-workflow-step {
  position: relative;
  padding: 1.5rem;
  border-radius: 18px;
  border: 1px solid var(--hf-card-border);
  background: var(--hf-surface);
  box-shadow: 0 16px 36px -30px rgba(15, 23, 42, 0.35);
}

html[data-theme="dark"] .hf-workflow-step {
  background: rgba(15, 23, 42, 0.7);
}

.hf-workflow-step:not(:last-child)::after {
  content: "->";
  position: absolute;
  right: -1.2rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--hf-text-muted);
  font-weight: 700;
}

.hf-workflow-title {
  font-weight: 700;
  font-size: 1.05rem;
  margin: 0 0 0.65rem;
  color: var(--pst-color-text-base);
}

.hf-workflow-text {
  margin: 0;
  color: var(--hf-text-muted);
  font-size: 0.95rem;
}

.hf-dataset-grid {
  margin-bottom: 3rem;
}

.hf-dataset-card {
  border-radius: 20px !important;
  border: 1px solid var(--hf-card-border) !important;
  background: #fff;
  box-shadow: 0 18px 40px -32px rgba(15, 23, 42, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

html[data-theme="dark"] .hf-dataset-card {
  background: rgba(15, 23, 42, 0.75);
}

.hf-dataset-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px -36px rgba(15, 23, 42, 0.45);
}

.hf-dataset-card .sd-card-body {
  padding: 1.5rem;
}

.hf-dataset-card .sd-card-header {
  background: transparent;
  border: none;
  font-weight: 700;
  color: var(--pst-color-text-base);
  padding: 1.25rem 1.5rem 0;
}

.hf-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.75rem;
}

.hf-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--hf-text-muted);
  background: rgba(148, 163, 184, 0.12);
}

body[data-page="index"] .feature-card {
  border-radius: 22px !important;
  border: 1px solid var(--hf-card-border) !important;
  background: #fff;
  box-shadow: 0 18px 40px -32px rgba(15, 23, 42, 0.35);
  overflow: hidden;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

html[data-theme="dark"] body[data-page="index"] .feature-card {
  background: rgba(15, 23, 42, 0.75);
}

body[data-page="index"] .feature-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--hf-sky-strong), var(--hf-sun-strong));
}

body[data-page="index"] .feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px -36px rgba(15, 23, 42, 0.45);
  border-color: rgba(79, 140, 255, 0.45) !important;
}

body[data-page="index"] .feature-card .sd-card-body {
  padding: 1.75rem;
}

body[data-page="index"] .feature-card .sd-octicon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem !important;
  padding: 0.6rem;
  border-radius: 14px;
  background: rgba(79, 140, 255, 0.12);
  color: var(--hf-sky-strong);
}

.hf-step-grid {
  margin-bottom: 3rem;
}

.hf-step {
  padding: 1.5rem;
  border-radius: 18px;
  background: var(--hf-surface);
  border: 1px solid var(--hf-card-border);
  box-shadow: 0 16px 36px -30px rgba(15, 23, 42, 0.35);
}

html[data-theme="dark"] .hf-step {
  background: rgba(15, 23, 42, 0.7);
}

.hf-step-title {
  font-weight: 700;
  font-size: 1.1rem;
  margin: 0 0 0.75rem;
  color: var(--pst-color-text-base);
}

.hf-step-text {
  margin: 0;
  color: var(--hf-text-muted);
}

.hf-logo-cloud {
  border-radius: 22px;
  padding: 2rem;
  background: var(--hf-surface);
  border: 1px solid var(--hf-card-border);
  box-shadow: 0 18px 40px -32px rgba(15, 23, 42, 0.3);
}

.hf-trust .logos-container {
  margin: 0;
  gap: 2.5rem;
}

html[data-theme="dark"] .hf-logo-cloud {
  background: rgba(15, 23, 42, 0.7);
}

.hf-callout {
  position: relative;
  margin: 2.5rem 0 2rem;
  padding: 2.5rem;
  border-radius: 24px;
  background: linear-gradient(120deg, rgba(79, 140, 255, 0.18), rgba(255, 179, 71, 0.2));
  border: 1px solid var(--hf-card-border);
  text-align: center;
  overflow: hidden;
  box-shadow: 0 24px 50px -40px rgba(15, 23, 42, 0.4);
}

html[data-theme="dark"] .hf-callout {
  background: linear-gradient(120deg, rgba(79, 140, 255, 0.08), rgba(255, 179, 71, 0.08));
  box-shadow: 0 24px 50px -40px rgba(0, 0, 0, 0.4);
}

.hf-callout::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(79, 140, 255, 0.3), transparent 55%),
    radial-gradient(circle at 85% 80%, rgba(255, 179, 71, 0.25), transparent 55%);
  opacity: 0.7;
  pointer-events: none;
}

.hf-callout>* {
  position: relative;
  z-index: 1;
}

.hf-callout-title {
  font-family: var(--pst-font-family-heading);
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
  color: var(--pst-color-text-base);
}

.hf-callout-text {
  margin: 0 auto 1.5rem;
  max-width: 40rem;
  color: var(--hf-text-muted);
}

.hf-callout-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

.hf-callout-support,
.hf-callout-funders {
  margin: 1.4rem 0 0.75rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hf-text-muted);
  position: relative;
  padding-top: 1.1rem;
}

.hf-callout-support::before,
.hf-callout-funders::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  height: 1px;
  background: rgba(148, 163, 184, 0.4);
}

.hf-supporter-line {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.25rem;
  margin: 1.35rem 0 0.6rem;
}

.hf-supporter-logo {
  width: 92px;
  height: auto;
  opacity: 0.95;
  filter: drop-shadow(0 6px 12px rgba(15, 23, 42, 0.15));
}

.hf-supporter-text {
  margin: 0;
  font-family: var(--pst-font-family-heading);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--pst-color-text-base);
  max-width: 12.5rem;
  line-height: 1.15;
  text-align: left;
}

html[data-theme="dark"] .hf-supporter-logo {
  filter: drop-shadow(0 8px 16px rgba(15, 23, 42, 0.35));
}

html[data-theme="dark"] .hf-callout-support::before,
html[data-theme="dark"] .hf-callout-funders::before {
  background: rgba(148, 163, 184, 0.3);
}

.hf-callout .hf-logo-cloud {
  padding: 1rem 0 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

html[data-theme="dark"] .hf-callout .hf-logo-cloud {
  background: transparent;
}

@media (max-width: 900px) {
  .hf-hero {
    padding: 2.5rem 2rem;
  }

  .hf-hero-title {
    font-size: clamp(2.2rem, 6vw, 3.2rem);
  }

  .hf-hero-stats {
    grid-template-columns: 1fr;
  }

  .hf-badges img {
    height: 24px;
  }

  .hf-workflow {
    grid-template-columns: 1fr;
  }

  .hf-workflow-step:not(:last-child)::after {
    content: none;
  }

  .hf-trust {
    padding: 1.5rem;
  }

  .hf-trending-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .hf-hero {
    padding: 2.25rem 1.5rem;
  }

  .hf-hero-actions,
  .hf-card-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hf-callout {
    padding: 2rem 1.5rem;
  }

  .hf-search-input-wrap {
    flex-direction: column;
    align-items: stretch;
  }

  .hf-search-submit {
    width: 100%;
  }

  .hf-filter-title {
    flex: 1 1 100%;
  }

  .hf-trust-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* --------------------------------------------------------------------------
   16. Homepage Motion
   -------------------------------------------------------------------------- */

/* Isolate layout recomputation inside each revealed block so the
   animation can't push other content down. `contain: layout` scopes
   the browser's layout pass to this subtree, which is what kills the
   Cumulative Layout Shift penalty PageSpeed flagged. */
body[data-page="index"] .hf-reveal {
  opacity: 0;
  transform: translateY(12px);
  animation: hf-fade-up 0.8s ease forwards;
  will-change: opacity, transform;
  contain: layout;
}

/* Pre-reserve min-heights so the grid items don't collapse to zero
   before their content paints. Matches the typical rendered height of
   each block so visual layout is stable from FCP onwards. */
body[data-page="index"] .hf-hero-copy { min-height: 460px; }
body[data-page="index"] .hf-hero-panel { min-height: 380px; }
body[data-page="index"] .hf-stat-card { min-height: 160px; }

@media (max-width: 768px) {
  body[data-page="index"] .hf-hero-copy { min-height: 520px; }
  body[data-page="index"] .hf-hero-panel { min-height: 340px; }
}

body[data-page="index"] .hf-delay-1 {
  animation-delay: 0.1s;
}

body[data-page="index"] .hf-delay-2 {
  animation-delay: 0.2s;
}

body[data-page="index"] .hf-delay-3 {
  animation-delay: 0.3s;
}

@keyframes hf-fade-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="index"] .hf-reveal {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   17. Dataset Summary Page Modern Enhancements (HuggingFace / React.dev inspired)
   ========================================================================== */

/* 1. Hero Title Gradient Text Effect (React.dev style) */
.dataset-summary-article h1 {
  background: linear-gradient(135deg, var(--eegdash-primary) 0%, var(--hf-sky-strong) 50%, var(--eegdash-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  padding-bottom: 0.25rem;
}

html[data-theme="dark"] .dataset-summary-article h1 {
  background: linear-gradient(135deg, var(--hf-sky) 0%, var(--hf-mint) 50%, var(--hf-sun) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* 2. Glassmorphism Stat Cards */
.dataset-summary-page .dataset-counter-card {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.65) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow:
    0 8px 32px rgba(0, 108, 163, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  padding: 0 !important;
}

.dataset-summary-page .dataset-counter-card .sd-card-title {
  font-size: 1.35rem;
  letter-spacing: 0.04em;
}

.dataset-summary-page .dataset-counter-card .sd-octicon {
  font-size: 2.1em !important;
}

.dataset-summary-page .dataset-counter-card strong {
  font-size: 2.35rem;
  letter-spacing: -0.01em;
}

.dataset-summary-page .dataset-counter-card .sd-card-body {
  padding: 1.35rem 1.25rem 1.55rem;
}

.dataset-summary-page .dataset-counter-card .sd-card-text {
  margin: 0.45rem 0;
}

.dataset-summary-page .dataset-counter-svg {
  max-width: 3.2rem;
  max-height: 3.2rem;
}

.dataset-summary-page .dataset-counter-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow:
    0 20px 40px rgba(0, 108, 163, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

html[data-theme="dark"].dataset-summary-page .dataset-counter-card {
  background: rgba(30, 41, 59, 0.75) !important;
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* 3. Pill-Style Tab Navigation (React.dev style) */
.dataset-summary-page .sd-tab-set>label {
  border-radius: 999px !important;
  margin: 0 0.5rem 0.4rem 0;
  padding: 0.65rem 1.5rem !important;
  background: rgba(0, 108, 163, 0.06);
  border: 1px solid transparent !important;
  font-size: 0.95rem;
}

.dataset-summary-page .sd-tab-set>input:checked+label {
  background: linear-gradient(135deg, var(--eegdash-primary), var(--hf-sky-strong)) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 15px rgba(0, 108, 163, 0.3);
}

.dataset-summary-page .sd-tab-set>label:hover:not(:has(+ input:checked)) {
  background: rgba(0, 108, 163, 0.12);
  border-color: rgba(0, 108, 163, 0.2) !important;
}

html[data-theme="dark"].dataset-summary-page .sd-tab-set>label {
  background: rgba(79, 140, 255, 0.1);
}

/* 4. Table Row Focus State (Accessibility) */
#datasets-table tbody tr:focus-within {
  outline: 2px solid var(--hf-sky-strong);
  outline-offset: -2px;
  border-radius: 4px;
}

#datasets-table tbody tr:focus-within td {
  background: rgba(79, 140, 255, 0.06);
}

/* 5. Table Row Hover with Left Accent Border */
#datasets-table tbody tr {
  transition: all 0.2s ease;
  border-left: 3px solid transparent;
}

#datasets-table tbody tr:hover {
  background: linear-gradient(90deg, rgba(0, 108, 163, 0.06), rgba(79, 140, 255, 0.03)) !important;
  border-left-color: var(--eegdash-primary);
  box-shadow: 0 4px 16px rgba(0, 108, 163, 0.1);
}

html[data-theme="dark"] #datasets-table tbody tr:hover {
  background: linear-gradient(90deg, rgba(79, 140, 255, 0.12), rgba(79, 140, 255, 0.04)) !important;
}

/* 6. Floating Search Bar Styling */
.dataset-search-hero,
.dataset-summary-page .search-field {
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 0.75rem 1.5rem;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--hf-card-border);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.dataset-search-hero:focus-within,
.dataset-summary-page .search-field:focus-within {
  border-color: var(--hf-sky-strong);
  box-shadow: 0 8px 32px rgba(79, 140, 255, 0.15), 0 0 0 3px rgba(79, 140, 255, 0.1);
}

/* ==========================================================================
   AUTO-GENERATED TAG COLORS - matches colours.py
   Regenerate with: cd docs && python -c 'from plot_dataset.colours import generate_css_tag_styles; print(generate_css_tag_styles())'
   ========================================================================== */

/* Recording Modality Tags */
.tag[data-tag-value="eeg"] {
  background: linear-gradient(135deg, #e1ecfd, #c4d9fc);
  border: 1px solid #3b82f6 !important;
  color: #0032a6;
}

.tag[data-tag-value="ieeg"] {
  background: linear-gradient(135deg, #ede6fd, #dccefc);
  border: 1px solid #8b5cf6 !important;
  color: #3b0ca6;
}

.tag[data-tag-value="meg"] {
  background: linear-gradient(135deg, #f1e5fd, #e4ccfc);
  border: 1px solid #a855f7 !important;
  color: #5805a7;
}

.tag[data-tag-value="fnirs"] {
  background: linear-gradient(135deg, #feeadc, #fdd5b9);
  border: 1px solid #f97316 !important;
  color: #a92300;
}

.tag[data-tag-value="emg"] {
  background: linear-gradient(135deg, #dbf4ec, #b7ead9);
  border: 1px solid #10b981 !important;
  color: #006931;
}

.tag[data-tag-value="fmri"] {
  background: linear-gradient(135deg, #d9f4f8, #b4e9f2);
  border: 1px solid #06b6d4 !important;
  color: #006684;
}

.tag[data-tag-value="mri"] {
  background: linear-gradient(135deg, #d9eef3, #b4dee7);
  border: 1px solid #0891b2 !important;
  color: #004162;
}

.tag[data-tag-value="ecg"] {
  background: linear-gradient(135deg, #fce2e2, #fac6c6);
  border: 1px solid #ef4444 !important;
  color: #9f0000;
}

.tag[data-tag-value="behavior"] {
  background: linear-gradient(135deg, #ecf7dc, #daefb9);
  border: 1px solid #84cc16 !important;
  color: #347c00;
}

/* Pathology Tags */
.tag-pathology-healthy {
  background: linear-gradient(135deg, #ddf6e6, #bcedce);
  border: 1px solid #22c55e !important;
  color: #00750e;
}

.tag-pathology-clinical {
  background: linear-gradient(135deg, #fce2e2, #fac6c6);
  border: 1px solid #ef4444 !important;
  color: #9f0000;
}

.tag-pathology-generic {
  background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
  border: 1px solid #94a3b8 !important;
  color: #475569;
}

/* Experimental Modality Tags */
.tag-modality-visual {
  background: linear-gradient(135deg, #dee7fc, #bdd0f9);
  border: 1px solid #2563eb !important;
  color: #00139b;
}

.tag-modality-auditory {
  background: linear-gradient(135deg, #daf1fb, #b6e4f8);
  border: 1px solid #0ea5e9 !important;
  color: #005599;
}

.tag-modality-tactile,
.tag-modality-somatosensory {
  background: linear-gradient(135deg, #dbf4f1, #b8e9e4);
  border: 1px solid #14b8a6 !important;
  color: #006856;
}

.tag-modality-multisensory {
  background: linear-gradient(135deg, #fce3ef, #f9c8e0);
  border: 1px solid #ec4899 !important;
  color: #9c0049;
}

.tag-modality-motor {
  background: linear-gradient(135deg, #fdf0da, #fce1b5);
  border: 1px solid #f59e0b !important;
  color: #a54e00;
}

.tag-modality-rest,
.tag-modality-resting-state {
  background: linear-gradient(135deg, #e7e8fc, #d0d1fa);
  border: 1px solid #6366f1 !important;
  color: #1316a1;
}

.tag-modality-sleep {
  background: linear-gradient(135deg, #ebe1fc, #d7c3f9);
  border: 1px solid #7c3aed !important;
  color: #2c009d;
}

.tag-modality-generic {
  background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
  border: 1px solid #94a3b8 !important;
  color: #475569;
}

/* Experiment Type Tags */
.tag-type-perception {
  background: linear-gradient(135deg, #e1ecfd, #c4d9fc);
  border: 1px solid #3b82f6 !important;
  color: #0032a6;
}

.tag-type-decision,
.tag-type-decision-making {
  background: linear-gradient(135deg, #fbf3d9, #f8e8b4);
  border: 1px solid #eab308 !important;
  color: #9a6300;
}

.tag-type-rest,
.tag-type-resting-state {
  background: linear-gradient(135deg, #dcf1e3, #b9e3c8);
  border: 1px solid #16a34a !important;
  color: #005300;
}

.tag-type-sleep {
  background: linear-gradient(135deg, #ede6fd, #dccefc);
  border: 1px solid #8b5cf6 !important;
  color: #3b0ca6;
}

.tag-type-cognitive {
  background: linear-gradient(135deg, #e7e8fc, #d0d1fa);
  border: 1px solid #6366f1 !important;
  color: #1316a1;
}

.tag-type-clinical {
  background: linear-gradient(135deg, #fce2e2, #fac6c6);
  border: 1px solid #ef4444 !important;
  color: #9f0000;
}

.tag-type-generic {
  background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
  border: 1px solid #94a3b8 !important;
  color: #475569;
}

/* Dark mode overrides for tags */
html[data-theme="dark"] .tag[data-tag-value="eeg"] {
  background: rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.5) !important;
  color: #93c5fd;
}

html[data-theme="dark"] .tag[data-tag-value="meg"] {
  background: rgba(168, 85, 247, 0.2);
  border-color: rgba(168, 85, 247, 0.5) !important;
  color: #d8b4fe;
}

html[data-theme="dark"] .tag[data-tag-value="ieeg"] {
  background: rgba(139, 92, 246, 0.2);
  border-color: rgba(139, 92, 246, 0.5) !important;
  color: #c4b5fd;
}

html[data-theme="dark"] .tag[data-tag-value="fnirs"] {
  background: rgba(249, 115, 22, 0.2);
  border-color: rgba(249, 115, 22, 0.5) !important;
  color: #fdba74;
}

html[data-theme="dark"] .tag[data-tag-value="emg"] {
  background: rgba(16, 185, 129, 0.2);
  border-color: rgba(16, 185, 129, 0.5) !important;
  color: #6ee7b7;
}

/* 8. Page Fade-in Animation
   Intentionally NOT applied to .dataset-summary-article or .sd-tab-set:
   their translateY(20px → 0) keyframe leaves a lingering `transform:
   matrix(…)` on the element even after the animation ends, which makes
   those ancestors a new containing block for `position: sticky`. That
   silently broke the sticky first column of the catalogue table. Keep
   the animation only on the lightweight stats-card container, which is
   not an ancestor of the sticky sparkline cells. */
.dataset-summary-page .sd-container-fluid {
  animation: dataset-fade-up 0.5s ease-out;
  animation-delay: 0.1s;
  animation-fill-mode: both;
}

@keyframes dataset-fade-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {

  .dataset-summary-article,
  .dataset-summary-page .sd-container-fluid,
  .dataset-summary-page .sd-tab-set {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* 9. Modern DataTables Buttons
   bg + border use color-mix() on --eegdash-primary so they adapt between
   light (#006ca3) and dark (#3aa3d9) themes. Hard-coded rgba(0,108,163,…)
   left dark-mode chips reading as near-black on near-black. */
.dataTables_wrapper .dt-buttons .dt-button {
  border-radius: 8px !important;
  padding: 0.5rem 1rem !important;
  background: color-mix(in srgb, var(--eegdash-primary) 10%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--eegdash-primary) 22%, transparent) !important;
  color: var(--eegdash-primary) !important;
  font-weight: 600;
  transition: all 0.2s ease !important;
}

.dataTables_wrapper .dt-buttons .dt-button:hover {
  background: var(--eegdash-primary) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--eegdash-primary) 28%, transparent);
}

.dataTables_wrapper .dataTables_filter input {
  border-radius: 999px !important;
  padding: 0.5rem 1rem !important;
  border: 1px solid var(--hf-card-border) !important;
  transition: all 0.2s ease;
}

.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--hf-sky-strong) !important;
  box-shadow: 0 0 0 3px rgba(79, 140, 255, 0.15);
  outline: none;
}

/* 10. Responsive Card Grid Breakpoints */
@media (max-width: 768px) {
  .dataset-summary-page .dataset-counter-card {
    padding: 1.25rem !important;
  }

  .dataset-summary-page .dataset-counter-card strong {
    font-size: 1.8rem;
  }

  .dataset-summary-page .dataset-counter-card .sd-card-title {
    font-size: 0.9rem;
  }

  .dataset-summary-page .sd-tab-set>label {
    padding: 0.5rem 1rem !important;
    font-size: 0.85rem;
    margin: 0.25rem;
  }
}

@media (max-width: 480px) {
  .dataset-summary-article h1 {
    font-size: 1.8rem;
  }

  .dataset-summary-page .sd-row {
    gap: 0.75rem;
  }
}

/* 11. Chart Container Styling */
.dataset-summary-page .plotly-graph-div {
  border-radius: 20px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--hf-card-border);
  overflow: hidden;
  background: #fff;
}

html[data-theme="dark"].dataset-summary-page .plotly-graph-div {
  background: rgba(15, 23, 42, 0.6);
  border-color: rgba(148, 163, 184, 0.25);
}

/* 12. Beta Badge Pulse Animation */
.dataset-summary-page .bdg-danger,
.dataset-summary-article .bdg-danger {
  animation: badge-pulse 2.5s ease-in-out infinite;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.dataset-summary-page .bdg-danger::before {
  content: "";
  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 50%;
  animation: badge-dot-pulse 1.5s ease-in-out infinite;
}

@keyframes badge-pulse {

  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
  }

  50% {
    transform: scale(1.03);
    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
  }
}

@keyframes badge-dot-pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dataset-summary-page .bdg-danger {
    animation: none;
  }

  .dataset-summary-page .bdg-danger::before {
    animation: none;
  }
}

/* 14. Sticky Stats Bar on Scroll */
@media (min-width: 1024px) {
  .dataset-summary-page .sd-container-fluid:first-of-type {
    position: sticky;
    top: 65px;
    z-index: 50;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding-top: 1rem;
    padding-bottom: 1rem;
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.3s ease;
  }

  .dataset-summary-page .sd-container-fluid:first-of-type:has(~ .sd-tab-set) {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  }

  html[data-theme="dark"].dataset-summary-page .sd-container-fluid:first-of-type {
    background: rgba(15, 23, 42, 0.92);
    border-bottom-color: rgba(148, 163, 184, 0.15);
  }
}

/* 15. Dark Mode Refinements */
html[data-theme="dark"].dataset-summary-page .dataset-counter-card:hover {
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] #datasets-table {
  border-color: rgba(148, 163, 184, 0.2);
}

html[data-theme="dark"] #datasets-table tbody td {
  border-bottom-color: rgba(148, 163, 184, 0.1);
}

html[data-theme="dark"].dataset-summary-page .sd-tab-set>input:checked+label {
  background: linear-gradient(135deg, var(--hf-sky-strong), var(--hf-mint)) !important;
  box-shadow: 0 4px 15px rgba(79, 140, 255, 0.4);
}

html[data-theme="dark"] .dataTables_wrapper .dt-buttons .dt-button {
  background: rgba(79, 140, 255, 0.15) !important;
  border-color: rgba(79, 140, 255, 0.3) !important;
  color: #4f8cff !important;
}
/* DataTables renders the chip label inside a nested <span>; on Chromium
   the <button> itself keeps a user-agent-ish color even under author
   !important (observed: "color: red !important" on the button resolves
   to #006ca3 on dark macOS). Setting the span's color directly actually
   sticks, so ensure the visible text carries the dark-mode primary. */
html[data-theme="dark"] .dataTables_wrapper .dt-buttons .dt-button > * {
  color: #4f8cff !important;
}
.dataTables_wrapper .dt-buttons .dt-button > * {
  color: inherit;
}

html[data-theme="dark"] .dataTables_wrapper .dt-buttons .dt-button:hover {
  background: var(--hf-sky-strong) !important;
  color: #fff !important;
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_filter input {
  background: rgba(15, 23, 42, 0.8);
  border-color: rgba(148, 163, 184, 0.3) !important;
  color: #f8fafc;
}

/* ==========================================================================
   18. Round 2 Improvements: Landing Page & Global UI Polish
   ========================================================================== */

/* 1. Hero Section "Alive" Background */
.hf-hero {
  background:
    radial-gradient(circle at 10% 20%, rgba(79, 140, 255, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(255, 179, 71, 0.08) 0%, transparent 40%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.6) 100%);
  position: relative;
  overflow: hidden;
  border-radius: 24px;
}

.hf-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(79, 140, 255, 0.05) 0%, transparent 60%);
  animation: hero-pulse 15s ease-in-out infinite alternate;
  z-index: 0;
  pointer-events: none;
}

@keyframes hero-pulse {
  0% {
    transform: translate(0, 0) scale(1);
  }

  100% {
    transform: translate(-10%, -10%) scale(1.1);
  }
}

html[data-theme="dark"] .hf-hero {
  background:
    radial-gradient(circle at 10% 20%, rgba(79, 140, 255, 0.05) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(255, 179, 71, 0.05) 0%, transparent 40%),
    linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.8) 100%);
}

/* 2. Modern Sidebar Navigation */
.bd-sidebar .nav-link {
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  transition: all 0.2s ease;
  margin-bottom: 2px;
}

.bd-sidebar .nav-link:hover {
  background: rgba(0, 108, 163, 0.04);
  color: var(--eegdash-primary);
}

.bd-sidebar .nav-link.active {
  background: rgba(0, 108, 163, 0.08);
  color: var(--eegdash-primary);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--eegdash-primary);
}

html[data-theme="dark"] .bd-sidebar .nav-link.active {
  background: rgba(79, 140, 255, 0.1);
  color: var(--hf-sky);
  box-shadow: inset 3px 0 0 var(--hf-sky);
}

/* 3. Glassmorphic Admonitions */
.admonition {
  border: 1px solid rgba(0, 108, 163, 0.08);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 12px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  margin-bottom: 1.5rem;
}

.admonition .admonition-title {
  background: transparent !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  font-weight: 700;
  padding: 0.75rem 1rem;
}

.admonition.note {
  border-left: 4px solid var(--eegdash-primary);
}

.admonition.warning {
  border-left: 4px solid #f59e0b;
}

.admonition.tip {
  border-left: 4px solid #10b981;
}

html[data-theme="dark"] .admonition {
  background: rgba(30, 41, 59, 0.6);
  border-color: rgba(148, 163, 184, 0.1);
}

/* 4. Enhanced Landing Page Cards */
.hf-trending-card,
.feature-card,
.hf-dataset-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-radius: 20px !important;
  border: 1px solid var(--hf-card-border);
  background: #fff;
  overflow: hidden;
}

.hf-trending-card:hover,
.feature-card:hover,
.hf-dataset-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 108, 163, 0.12);
  border-color: var(--eegdash-primary);
}

html[data-theme="dark"] .hf-trending-card,
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .hf-dataset-card {
  background: rgba(30, 41, 59, 0.8);
  border-color: rgba(148, 163, 184, 0.2);
}

html[data-theme="dark"] .hf-trending-card:hover,
html[data-theme="dark"] .feature-card:hover,
html[data-theme="dark"] .hf-dataset-card:hover {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
  border-color: var(--hf-sky);
}

/* 5. Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #94a3b8;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background-color: #475569;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background-color: #64748b;
}

/* 6. Footer Polish */
footer.bd-footer {
  margin-top: 4rem;
  border-top: 1px solid var(--hf-card-border);
  padding: 3rem 0;
  background: linear-gradient(to bottom, transparent, rgba(0, 108, 163, 0.02));
}

html[data-theme="dark"] footer.bd-footer {
  border-top-color: rgba(148, 163, 184, 0.1);
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.2));
}

/* 7. Code Block Contrast Boost */
.hf-quickstart .highlight {
  background: #f8fafc !important;
  border: 1px solid rgba(15, 23, 42, 0.2);
  border-radius: 12px;
  color: #0f172a !important;
  box-shadow: inset 0 0 0 1px rgba(0, 108, 163, 0.08);
}

.hf-quickstart .highlight pre {
  margin: 0;
  padding: 0.9rem 1rem;
  color: #0f172a !important;
  font-size: 1.15rem;
}

.hf-quickstart .highlight code,
.hf-quickstart .highlight span {
  color: #0f172a !important;
  font-size: 1.15rem;
}

.hf-quickstart .highlight .k,
.hf-quickstart .highlight .kd,
.hf-quickstart .highlight .kn,
.hf-quickstart .highlight .kt {
  color: #1d4ed8 !important;
}

.hf-quickstart .highlight .nf,
.hf-quickstart .highlight .nb,
.hf-quickstart .highlight .nc {
  color: #0f766e !important;
}

.hf-quickstart .highlight .s,
.hf-quickstart .highlight .s1,
.hf-quickstart .highlight .s2,
.hf-quickstart .highlight .sa,
.hf-quickstart .highlight .sb,
.hf-quickstart .highlight .sc,
.hf-quickstart .highlight .sd,
.hf-quickstart .highlight .se,
.hf-quickstart .highlight .sh,
.hf-quickstart .highlight .si,
.hf-quickstart .highlight .sr,
.hf-quickstart .highlight .ss {
  color: #b45309 !important;
}

.hf-quickstart .highlight .c,
.hf-quickstart .highlight .c1,
.hf-quickstart .highlight .cm,
.hf-quickstart .highlight .cp,
.hf-quickstart .highlight .cs {
  color: #64748b !important;
}

html[data-theme="dark"] .hf-quickstart .highlight {
  background: linear-gradient(135deg, rgba(11, 18, 32, 0.98), rgba(15, 32, 58, 0.95)) !important;
  border: 1px solid rgba(79, 140, 255, 0.45);
  color: #e2e8f0 !important;
  box-shadow: inset 0 0 0 1px rgba(247, 148, 29, 0.08);
}

html[data-theme="dark"] .hf-quickstart .highlight pre {
  color: #e2e8f0 !important;
}

html[data-theme="dark"] .hf-quickstart .highlight code,
html[data-theme="dark"] .hf-quickstart .highlight span {
  color: #e2e8f0 !important;
}

html[data-theme="dark"] .hf-quickstart .highlight .k,
html[data-theme="dark"] .hf-quickstart .highlight .kd,
html[data-theme="dark"] .hf-quickstart .highlight .kn,
html[data-theme="dark"] .hf-quickstart .highlight .kt {
  color: #7dd3fc !important;
}

html[data-theme="dark"] .hf-quickstart .highlight .nf,
html[data-theme="dark"] .hf-quickstart .highlight .nb,
html[data-theme="dark"] .hf-quickstart .highlight .nc {
  color: #34d399 !important;
}

html[data-theme="dark"] .hf-quickstart .highlight .s,
html[data-theme="dark"] .hf-quickstart .highlight .s1,
html[data-theme="dark"] .hf-quickstart .highlight .s2,
html[data-theme="dark"] .hf-quickstart .highlight .sa,
html[data-theme="dark"] .hf-quickstart .highlight .sb,
html[data-theme="dark"] .hf-quickstart .highlight .sc,
html[data-theme="dark"] .hf-quickstart .highlight .sd,
html[data-theme="dark"] .hf-quickstart .highlight .se,
html[data-theme="dark"] .hf-quickstart .highlight .sh,
html[data-theme="dark"] .hf-quickstart .highlight .si,
html[data-theme="dark"] .hf-quickstart .highlight .sr,
html[data-theme="dark"] .hf-quickstart .highlight .ss {
  color: #fbbf24 !important;
}

html[data-theme="dark"] .hf-quickstart .highlight .c,
html[data-theme="dark"] .hf-quickstart .highlight .c1,
html[data-theme="dark"] .hf-quickstart .highlight .cm,
html[data-theme="dark"] .hf-quickstart .highlight .cp,
html[data-theme="dark"] .hf-quickstart .highlight .cs {
  color: #94a3b8 !important;
}