/* ==== Quality Switches (Eg / Top / Delux) - HORIZONTAL VARIANT ==== */

.compact-quality-selector { margin-left: auto; width: 100%; }

.quality-switches-group {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px; /* more compact vertically */
  margin: 2px 0 6px 0;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2), 0 4px 10px rgba(0, 0, 0, 0.1);
  flex-direction: row !important; /* ensure horizontal */
  width: 100%;
}

.quality-switches {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  justify-content: center; /* center switches horizontally */
}

.quality-switch {
  --accent: #21c87a; /* overridden per quality */
  --track-w: 80px; /* wider horizontal track width */
  --track-h: 22px; /* taller track */
  --thumb: 14px; /* thumb size */
  --pad: 4px;
  position: relative;
  min-width: auto;
  border: none;
  outline: none;
  background: transparent;
  cursor: pointer;
  border-radius: 8px;
  display: flex;
  flex-direction: column-reverse; /* place label on top */
  align-items: center;
  justify-content: center;
  padding: 4px 6px;
  transition: transform 140ms ease;
  color: rgba(255,255,255,0.95);
  --switch-text-color: rgba(255,255,255,0.75); /* default muted white/gray color */
  gap: 6px;
  flex: 0 0 auto;
}

.quality-switch:focus-visible {
  box-shadow: 0 0 0 2px rgba(255,255,255,0.22);
  border-radius: 8px;
}

.quality-switch .switch-track .switch-text { 
  font-size: 12px; 
  opacity: 0.95; 
  margin: 0; 
  user-select: none; 
  line-height: 1; 
  text-align: center; 
  color: var(--switch-text-color);
  transition: color 160ms ease;
  text-shadow: 0 1px 0 rgba(0,0,0,0.35);
}

.quality-switch .switch-track {
  position: relative;
  width: var(--track-w);
  height: var(--track-h);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.05));
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.25), inset 0 -1px 6px rgba(0,0,0,0.25), 0 6px 14px rgba(0,0,0,0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: hidden;
  display: flex; /* center contents (thumb + text) */
  align-items: center;
  justify-content: center;
}

.quality-switch .switch-track::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 92%, #ffffff 8%), var(--accent));
  opacity: 0;
  transition: opacity 180ms ease;
  filter: saturate(115%);
  z-index: 1; /* ensure fill is below text and thumb */
}

.quality-switch.is-on .switch-track::after { opacity: 0.9; }

.quality-switch .switch-track .switch-thumb {
  position: absolute;
  top: 50%;
  left: var(--pad);
  width: var(--thumb);
  height: var(--thumb);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.7), rgba(255,255,255,0.35) 40%, rgba(0,0,0,0.25) 100%), var(--accent);
  box-shadow: 0 6px 12px rgba(0,0,0,0.32), inset 0 1px 2px rgba(255,255,255,0.25);
  transform: translateY(-50%);
  transition: left 160ms ease, background-color 160ms ease, box-shadow 160ms ease, filter 160ms ease;
  z-index: 3; /* place thumb on top of fill and text */
}

.quality-switch.is-on .switch-track .switch-thumb {
  /* keep the thumb colored by the accent (revert to accent) */
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.85), rgba(255,255,255,0.35) 40%), var(--accent);
  filter: saturate(90%);
  left: calc(var(--track-w) - var(--thumb) - var(--pad));
}

/* Place the text inside the track and ensure it's on top of the fill */
.quality-switch .switch-track .switch-text {
  position: relative; /* ensure z-index works */
  z-index: 2;
}

/* Change border color and text color on active */
.quality-switch.is-on { --switch-text-color: #fff; }
/* Slightly darker default switch text color for improved contrast on most backgrounds */
.quality-switch { --switch-text-color: rgba(255,255,255,0.9); }
/* Make selected quality switch label bolder for emphasis */
.quality-switch.is-on .switch-track .switch-text { font-weight: 800; }

/* .quality-switch.is-on already sets on-state variables above */

/* Hover nudge: move thumb slightly toward the opposite edge */
.quality-switch:not(.is-on):hover .switch-track .switch-thumb {
  left: calc(var(--pad) + 6px);
}
.quality-switch.is-on:hover .switch-track .switch-thumb {
  left: calc(var(--track-w) - var(--thumb) - var(--pad) - 6px);
}

/* While suppress-hover is present, prevent the hover nudge animation until user re-enters */
.quality-switch.suppress-hover:not(.is-on):hover .switch-track .switch-thumb {
  left: var(--pad);
}
  .quality-switch.suppress-hover.is-on:hover .switch-track .switch-thumb {
    left: calc(var(--track-w) - var(--thumb) - var(--pad));
  }

/* Per-quality accents */
.quality-switch[data-quality="eg"],
.quality-switch[data-quality="standard"],
.quality-switch[data-quality="normal"] { --accent: #5A78AA; }
.quality-switch[data-quality="top"] { --accent: #ff5a5f; }
.quality-switch[data-quality="delux"] { --accent: #d4af37; }

@media (max-width: 520px) {
  .quality-switch { --track-w: 64px; --track-h: 18px; --thumb: 12px; --pad: 4px; }
  .quality-switches { gap: 6px; }
  .quality-switches-group { gap: 6px; padding: 4px 6px; }
  .quality-switch .switch-track .switch-text { font-size: 11px; }
}
/* ===== MODERN REFINED FRAGRANCE BROWSER V2 ===== */

:root {
  --primary: #3b82f6;
  --primary-dark: #2563eb;
  --primary-light: #dbeafe;
  --accent: #f59e0b;
  --success: #10b981;
  --surface: #ffffff;
  --surface-dim: #f8fafc;
  --surface-hover: #f1f5f9;
  --border: #e2e8f0;
  --border-dark: #cbd5e1;
  --text-primary: #0f172a;
  --text-secondary: #64748b;
  --text-muted: #94a3b8;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --radius: 8px;
  --radius-sm: 6px;
  --radius-lg: 12px;
  --right-rail-base: 112px; /* default visible collapsed width (doubled) */
  --right-rail-reserve: 240px; /* legacy reserve (doubled) */
  --right-rail-max: 640px; /* maximum expanded width (doubled) */

  /* Theme Switcher Glass Variables */
  --c-glass: #bbbbbc;
  --c-light: #fff;
  --c-dark: #000;
  --c-content: #224;
  --c-action: #0052f5;
  --glass-reflex-dark: 1;
  --glass-reflex-light: 1;
  --saturation: 150%;
}

/* Theme-specific variables */
body {
  --theme-bg-image: url("https://i.imgur.com/4MuY3MR.png");
  --theme-text-color: #0f172a;
  --theme-text-secondary: #64748b;
}

body[data-theme="dark2"] {
  --theme-bg-image: url("https://i.imgur.com/4MuY3MR.png");
  --theme-text-color: #f8fafc;
  --theme-text-secondary: #cbd5e1;
}

body[data-theme="dark"] {
  --theme-bg-image: url("https://images.unsplash.com/photo-1519681393784-d120267933ba");
  --theme-text-color: #f8fafc;
  --theme-text-secondary: #cbd5e1;
}

body[data-theme="auto"] {
  --theme-bg-image: url("https://images.unsplash.com/photo-1506905925346-21bda4d32df4");
  --theme-text-color: #1e293b;
  --theme-text-secondary: #64748b;
}

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

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: var(--theme-bg-image) no-repeat fixed;
  background-size: cover;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  color: var(--theme-text-color);
  line-height: 1.5;
  transition: background-image 0.5s ease, color 0.3s ease;
  position: relative;
  overflow-x: auto;
  overflow-y: auto;
}

/* Mouse-following light removed (Hangarbrowser low-only) */

/* ===== THEME SWITCHER (LIQUID GLASS) ===== */
/* Performance Slider */
.performance-slider-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  margin-right: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.perf-slider-label {
  display: inline-block;
  cursor: pointer;
}

/* Bottom row: centered icon at left and label centered horizontally */
.perf-mode-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 2px;
}

.perf-icon {
  width: 18px;
  height: 18px;
  color: rgba(255, 255, 255, 0.8);
  flex: 0 0 auto;
}

.perf-mode-label {
  text-align: center;
  display: inline-block;
  font-size: 13px;
  color: inherit;
}

/* Simple, accessible screen-reader-only helper */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.performance-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 80px;
  height: 6px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}

.performance-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
}

.performance-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
}

.performance-slider::-webkit-slider-thumb:hover {
  background: #fff;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.6);
}

.performance-slider::-moz-range-thumb:hover {
  background: #fff;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.6);
}

/* Performance slider visuals are neutralized for Hangarbrowser; data-mode
   has no effect on site visuals. Keep a stable, neutral thumb/icon style. */
.performance-slider::-webkit-slider-thumb {
  background: linear-gradient(135deg, #d1d5db, #9ca3af);
}
.performance-slider::-moz-range-thumb {
  background: linear-gradient(135deg, #d1d5db, #9ca3af);
}
.perf-slider-label .perf-icon { color: inherit; filter: none; }

.perf-mode-label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  min-width: 40px;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.switcher {
  --track-size: clamp(8rem, 13vw, 10rem);
  --track-padding: 0.225rem;
  --track-inactive: rgba(var(--c-glass), 0.1);
  --thumb-color: hsl(0 0% 100% / 0.4);
  --thumb-color-highlight: hsl(0 0% 100% / 0.5);
  --thumb-color-dark: hsl(0 0% 0% / 0.5);
  --thumb-color-dark-highlight: hsl(0 0% 0% / 0.6);
  --thumb-size: calc((var(--track-size) / 3) - var(--track-padding) * 2);
  --thumb-offset: calc(var(--thumb-size) + var(--track-padding));
  --c: #666;

  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  padding: var(--track-padding);
  background: var(--track-inactive);
  border-radius: calc(var(--track-size) / 2);
  box-shadow: inset 0 0 0px 1px rgb(0 0 0 / 0.06);
  border: none;
  margin: 0;
}

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

.switcher__option {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  cursor: pointer;
  margin: 0;
}

.switcher__input {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: var(--thumb-size);
  height: var(--thumb-size);
  margin: 0;
  outline-offset: 3px;
  border-radius: calc(var(--track-size) / 2);
}

.switcher__input:hover + .switcher__icon {
  filter: saturate(var(--saturation));
}

.switcher__input:checked + .switcher__icon {
  --c: #fff;
}

.switcher__icon {
  pointer-events: none;
  width: var(--thumb-size);
  height: var(--thumb-size);
  color: var(--c);
  transition: filter 0.2s;
}

.switcher__bg {
  position: absolute;
  z-index: 1;
  top: var(--track-padding);
  left: var(--track-padding);
  width: var(--thumb-size);
  height: var(--thumb-size);
  border-radius: calc(var(--track-size) / 2);
  background: var(--thumb-color);
  filter: url(#glass-distortion);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.switcher__bg::before,
.switcher__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: calc(var(--track-size) / 2);
  pointer-events: none;
}

.switcher__bg::before {
  background: radial-gradient(
    circle at 50% 20%,
    hsl(0 0% 100% / calc(var(--glass-reflex-light) * 0.5)) 0%,
    transparent 60%
  );
  box-shadow: inset 0 -2px 2px hsl(0 0% 0% / 0.05),
              inset 0 3px 2px hsl(0 0% 100% / 0.8);
}

.switcher__bg::after {
  background: radial-gradient(
    circle at 50% 80%,
    hsl(0 0% 0% / calc(var(--glass-reflex-dark) * 0.08)) 0%,
    transparent 70%
  );
}

.switcher[c-previous="1"] .switcher__bg {
  transform: translateX(0);
}

.switcher[c-previous="2"] .switcher__bg {
  transform: translateX(var(--thumb-offset));
}

.switcher[c-previous="3"] .switcher__bg {
  transform: translateX(calc(var(--thumb-offset) * 2));
}

.switcher:has(input[c-option="1"]:checked) .switcher__bg {
  transform: translateX(0);
  background: var(--thumb-color);
}

.switcher:has(input[c-option="2"]:checked) .switcher__bg {
  transform: translateX(var(--thumb-offset));
  background: var(--thumb-color-dark);
}

.switcher:has(input[c-option="3"]:checked) .switcher__bg {
  transform: translateX(calc(var(--thumb-offset) * 2));
  background: linear-gradient(90deg, var(--thumb-color) 0%, var(--thumb-color) 50%, var(--thumb-color-dark) 50%, var(--thumb-color-dark) 100%);
}

/* Dropdown variant (keeps switcher visuals via icons) */
.switcher.switcher-dropdown {
  /* keep base behavior but use dropdown trigger/menu instead of inline radios */
}
.switcher-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px;
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.04);
  cursor: pointer;
  font-size: 13px;
  color: inherit;
}
.switcher-trigger:focus { outline: none; box-shadow: 0 6px 16px rgba(0,0,0,0.16); }
.switcher-trigger:hover { transform: translateY(-1px); background: rgba(255,255,255,0.04); }
.switcher-trigger .switcher-trigger-icon { width: 20px; height: 20px; }
.switcher-trigger .switcher-trigger-caret { font-size: 12px; opacity: 0.9; }

.switcher-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 160px;
  padding: 6px;
  border-radius: 10px;
  background: rgba(20,20,30,0.95);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  display: none;
  flex-direction: column;
  gap: 6px;
  z-index: 10050; /* place above match cards and other overlays */
  will-change: transform, opacity;
}
.switcher-menu[aria-hidden="false"] { display: flex; }
.switcher-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  color: inherit;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
}
.switcher-menu-item:hover { background: rgba(255,255,255,0.02); transform: translateY(-1px); }
.switcher-menu-item svg.switcher__icon { width: 20px; height: 20px; }

/* Ensure readable switcher menu text/icons when the 'auto' (Light) theme is active */
body[data-theme="auto"] .switcher-menu,
body[data-theme="auto"] .switcher-menu-item {
  color: #ffffff;
}
body[data-theme="auto"] .switcher-menu-item svg.switcher__icon path { fill: #ffffff; }

/* Keep legacy inputs hidden but available to JS (sr-only) */
.switcher-hidden { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Preserve BG helpers used by the old switcher logic but hide visuals for dropdown */
.switcher__bg { display: none; }

/* Main Card */
#app-card {
  width: 100%;
  height: clamp(750px, 90vh, 950px);
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  display: grid;
  grid-template-columns: 348px 1fr 480px;
  overflow: hidden;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

.app-shell {
  width: clamp(1200px, 95vw, 1600px);
  margin: 20px auto;
  position: relative;
  flex-shrink: 0;
}

/* ===== LEFT PANEL: FILTERS ===== */
#filters {
  /* Make container transparent so `.filter-content` translucency shows through on desktop */
  background: transparent;
  border-right: 1px solid rgba(255,255,255,0.04);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.filter-content {
  /* Match #details translucent/night glassy panel */
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  color: #fff;
}

/* Keep header/buttons readable on translucent background */
.filter-header {
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.filter-header h2 { color: #fff; }
.btn-clear { color: #cfe4ff; border-color: rgba(255,255,255,0.06); }
.btn-clear:hover { background: rgba(255,255,255,0.03); color: #fff; }

.filter-header {
  padding: 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: none; /* Hidden now - using compact-filter-bar instead */
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.filter-header h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  flex: 1;
  min-width: 120px;
}

.btn-clear {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s;
}

.btn-clear:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

/* Compact Filter Bar - Glassmorphism Redesign */
.compact-filter-bar {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1),
              inset 0 1px 1px rgba(255, 255, 255, 0.3);
  margin-bottom: 16px;
}

.compact-filter-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  z-index: 0;
  border-radius: inherit;
}

.compact-filter-bar > * {
  position: relative;
  z-index: 1;
}

.compact-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.15);
}

.compact-title {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  margin: 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  letter-spacing: -0.5px;
}

.btn-clear-compact {
  padding: 10px 18px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  margin-left: auto;
  order: 1000;
  box-sizing: border-box;
  min-height: 40px; /* align to select height */
  line-height: 1; /* consistent baseline */
}

/* Visual indicator when any filter is active (compact clear button) */
.btn-clear-compact.filter-active {
  color: #fff;
  background: linear-gradient(180deg, rgba(30,144,255,0.14), rgba(30,144,255,0.06));
  border-color: rgba(30,144,255,0.85);
  box-shadow: none;
}

/* Prevent selecting the language dropdown trigger label with the mouse */
.lang-dropdown-trigger {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Prevent selecting the matches search placeholder text with the mouse.
   Keep actual input text selectable (users can select typed text). */
#matches-search::placeholder {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Prevent selecting the performance mode label text */
.perf-mode-label {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* clear-compact-pulse animation removed (Hangarbrowser low-only) */

/* ===== LANGUAGE SELECT (GLASSY) ===== */
/* Custom element `main-lang-select` and its native select fallback */
main-lang-select {
  position: relative;
  display: inline-block;
  min-width: 160px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  color: var(--theme-text-color);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 6px 12px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.04);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  z-index: 5;
}

main-lang-select select,
main-lang-select .select-native {
  background: transparent;
  color: inherit;
  border: none;
  padding: 6px 34px 6px 8px;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

main-lang-select::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-40%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid currentColor;
  pointer-events: none;
  opacity: 0.95;
}

main-lang-select:hover {
  filter: saturate(130%);
}

main-lang-select:focus-within {
  outline: none;
  border-color: rgba(59,130,246,0.55);
  box-shadow: 0 10px 28px rgba(0,0,0,0.5), 0 0 0 4px rgba(59,130,246,0.08);
  transform: translateY(-1px);
}

/* Compact small variant */
main-lang-select.small {
  min-width: 120px;
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 600;
}

/* Ensure readable text for the alternate dark2 theme */
body[data-theme="dark2"] main-lang-select {
  color: #fff;
  border: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.25));
  box-shadow: 0 6px 18px rgba(0,0,0,0.36), inset 0 1px 0 rgba(255,255,255,0.02);
}

/* When placed in dark translucent panels, prefer lighter text */
body[data-theme="dark"] main-lang-select {
  color: #fff;
}

/* Native select fallback: target the actual element in the HTML */
select#main-lang-select,
select.lang-select-dropdown {
  min-width: 160px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  color: var(--theme-text-color);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 6px 34px 6px 8px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.04);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  z-index: 5;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px 6px;
  cursor: pointer;
}

/* arrow color for light/dark themes (data URI SVG) */
select#main-lang-select { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path fill='%23ffffff' d='M0 0l5 6 5-6z'/></svg>"); }
body[data-theme="dark2"] select#main-lang-select,
body[data-theme="dark2"] select.lang-select-dropdown {
  color: #fff;
  border: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(180deg, rgba(0,0,0,0.36), rgba(0,0,0,0.22));
  box-shadow: 0 8px 22px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.02);
}

body[data-theme="dark"] select#main-lang-select,
body[data-theme="dark"] select.lang-select-dropdown {
  color: #fff;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path fill='%23ffffff' d='M0 0l5 6 5-6z'/></svg>");
}

/* small variant for compact layouts */
select#main-lang-select.small,
select.lang-select-dropdown.small {
  min-width: 120px;
  border-radius: 8px;
  padding: 4px 30px 4px 8px;
  font-size: 13px;
  font-weight: 600;
}

.btn-clear-compact:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2),
              inset 0 1px 1px rgba(255, 255, 255, 0.5);
}

.compact-controls-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  position: relative;
}

/* Compact Actions Row - Sort + Gallery Button */
.compact-actions-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  margin-top: 8px;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2),
              0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Bottom bar inside compact controls: horizontal box with left sort and right clear-all */
.compact-bottom-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  position: relative; /* enable absolute overlay for centered title */
  margin-top: 8px;
  gap: 12px;
}

.compact-bottom-box .compact-sort-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.compact-bottom-box .compact-bottom-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
}

/* Position label inside clear wrapper as overlay like the sort label */
.compact-bottom-box .clear-compact-wrapper { position: relative; display: inline-block; }
/* Match the sort overlay label so the 'All' label is visually identical */
/* Shared overlay label for sort and clear so they look exactly the same */
.compact-overlay-label,
.compact-sort-selector .compact-label,
.clear-compact-wrapper .compact-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  white-space: nowrap;
  position: absolute;
  left: 50%;
  top: calc(100% + 2px); /* place below the control without affecting layout */
  transform: translateX(-50%);
  pointer-events: none; /* avoid interfering with clicks */
  z-index: 6;
}

/* Center title in the bottom box: glassy, bold, non-interactive overlay */
.compact-bottom-box .compact-bottom-title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scaleY(1.15);
  transform-origin: center center;
  pointer-events: none;
  z-index: 14;
  /* Use display font for the overlay (Lobster) - make the overlay itself use the Lobster family. */
  font-family: 'Lobster', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 300; /* make overlay visually thinner */
  font-synthesis: none; /* avoid synthetic bolding */
  font-size: var(--compact-bottom-title-font-size, 26px); /* dynamic via variable */
  text-transform: lowercase; /* render overlay in lowercase per UX request */
  padding: 0; /* plain text only */
  color: rgba(255,255,255,0.88); /* slightly muted white to draw less attention */
  opacity: 1; /* ensure it's fully opaque */
  background: transparent; /* plain text, no background */
  border: none; /* no border */
  box-shadow: none; /* no shadow */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  letter-spacing: 0.8px;
  line-height: 1.05; /* slightly taller baseline to match vertical stretch */
  /* subtle text deep shadow and glow to lift the overlay from background - reduced intensity for thinner appearance */
  text-shadow: 0 1px 0 rgba(255,255,255,0.06), 0 4px 12px rgba(0,0,0,0.24);
}

/* Back-shadow / under-shadow layered via pseudo-element for sharper depth */
.compact-bottom-box .compact-bottom-title::before {
  content: attr(data-text);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scaleY(1.02);
  z-index: 5;
  color: rgba(0,0,0,0.4);
  font-family: 'Lobster', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 300;
  filter: blur(6px);
  opacity: 0.9;
  pointer-events: none;
}
.compact-bottom-box .compact-bottom-title::after {
  content: attr(data-text);
  position: absolute;
  left: 50%;
  top: 52%; /* slightly lower to create under-shadow */
  transform: translate(-50%, -50%) scaleY(1.02);
  z-index: 6;
  color: rgba(0,0,0,0.18);
  font-family: 'Lobster', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 300;
  filter: blur(4px);
  opacity: 0.75;
  pointer-events: none;
}

.compact-bottom-box .compact-bottom-title-text {
  position: relative; /* ensure it stacks on top of pseudo-element shadows */
  z-index: 20;
  pointer-events: none; /* purely decorative overlay text */
  text-transform: inherit; /* keep inheritance; parent is lowercase */
  font-family: 'Lobster', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* Lobster for FILTERS */
  font-weight: 300; /* make text thinner */
  letter-spacing: 0.6px; /* small spacing to help uppercase legibility */
}

/* Mobile: compact bottom title size and minor vertical stretch. Keep a single responsive rule. */
@media (max-width: 520px) {
  .compact-bottom-box .compact-bottom-title {
    font-size: var(--compact-bottom-title-font-size, 18px);
    padding: 0;
    transform: translate(-50%, -50%) scaleY(1.08);
  }
}
@media (max-width: 520px) {
  /* Use the same horizontal layout on mobile as desktop, but tighten spacing and allow shrinking */
  .compact-bottom-box { flex-direction: row; align-items: center; flex-wrap: nowrap; gap: 8px; }
  .compact-bottom-box .compact-bottom-actions { justify-content: flex-end; }
  .compact-bottom-box .compact-bottom-actions .btn-clear-compact { width: auto; padding: 10px 14px; font-size: 14px; border-radius: 10px; }
  /* Make the sort select bigger on mobile so it's easier to tap */
  .compact-bottom-box .compact-sort-selector { flex: 0 0 auto; min-width: 120px; max-width: 60%; }
  .compact-bottom-box .compact-sort-selector select { font-size: 14px; padding: 10px 14px; }
  .compact-bottom-box .compact-bottom-actions { flex: 0 0 auto; }
  /* Desktop fallback font-size for the centered filters overlay */
  .compact-bottom-box .compact-bottom-title { font-size: var(--compact-bottom-title-font-size, 18px); }

  /* Slightly increase spacing for other compact controls to give the overlay room */
  .compact-controls-row { gap: 10px; }
  /* Smaller label spacing for mobile: match sort label behavior */
  .compact-sort-selector .compact-label,
  .clear-compact-wrapper .compact-label { font-size: 10px; top: calc(100% + 4px); }
  /* Center the controls row on mobile and align items centrally */
  .compact-controls-row { justify-content: center; align-items: center; }

  /* Larger quality switches for mobile — make them fill their container width */
  .quality-switches-group { padding: 2px 0; gap: 8px; }
  .quality-switches { gap: 10px; justify-content: stretch; align-items: stretch; }
  .quality-switch { flex: 1 1 0; padding: 8px 6px; }
  .quality-switch .switch-track { width: 100%; height: 36px; padding: 0 8px; box-sizing: border-box; }
  .quality-switch { --track-h: 36px; --thumb: 18px; }
  .quality-switch .switch-track .switch-thumb { width: var(--thumb); height: var(--thumb); left: var(--pad); right: auto; }
  /* For is-on state, move to the far-right edge by overriding left with auto and using right */
  .quality-switch.is-on .switch-track .switch-thumb { left: auto; right: var(--pad); }
  /* Style text larger for mobile */
  .quality-switch .switch-track .switch-text { font-size: 14px; }
  /* Ensure thumb transitions include both left and right so animation works with left:auto/right set styles */
  .quality-switch .switch-track .switch-thumb { transition: left 160ms ease, right 160ms ease, background-color 160ms ease, box-shadow 160ms ease, filter 160ms ease; }
  /* Hover behavior – move thumb slightly inward on hover, use left or right depending on state */
  .quality-switch:not(.is-on):hover .switch-track .switch-thumb { left: calc(var(--pad) + 6px); }
  .quality-switch.is-on:hover .switch-track .switch-thumb { right: calc(var(--pad) + 6px); }
  .quality-switch.suppress-hover.is-on:hover .switch-track .switch-thumb { left: auto; right: var(--pad); }
}

.compact-gallery-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  background: linear-gradient(135deg, rgba(218, 165, 32, 0.5) 0%, rgba(184, 134, 11, 0.5) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(218, 165, 32, 0.3),
              inset 0 1px 1px rgba(255, 255, 255, 0.3);
  flex: 1;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: inherit; /* ensure both use the same font family as body */
}

.compact-gallery-btn:hover {
  background: linear-gradient(135deg, rgba(218, 165, 32, 0.7) 0%, rgba(184, 134, 11, 0.7) 100%);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 20px rgba(218, 165, 32, 0.5),
              0 0 30px rgba(218, 165, 32, 0.4),
              inset 0 1px 1px rgba(255, 255, 255, 0.4);
}

.gallery-btn-icon {
  font-size: 14px;
}

.gallery-btn-text {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.compact-label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

/* Ensure overlay labels (Sort / All) match exactly - use Sort as the reference */
.compact-overlay-label,
.compact-sort-selector .compact-label,
.clear-compact-wrapper .compact-label {
  display: inline-block;
  font-size: 11px; /* match Sort */
  font-weight: 600; /* match Sort */
  color: rgba(255,255,255,0.9);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  position: absolute;
  left: 50%;
  /* use a consistent offset from the top of the control; when control heights match, this yields exact visual alignment */
  top: calc(100% + 2px); /* match Sort Y location */
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 6;
  line-height: 1; /* ensure consistent baseline spacing */
}

/* Language Selector */
.compact-lang-selector {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08),
              inset 0 1px 1px rgba(255, 255, 255, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.compact-lang-selector:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15),
              inset 0 1px 1px rgba(255, 255, 255, 0.4);
}

.lang-globe-icon {
  font-size: 18px;
  animation: spin 20s linear infinite;
}

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

.lang-select-dropdown {
  background: transparent;
  border: none;
  color: white;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  outline: none;
  padding: 0;
  letter-spacing: 0.3px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.lang-select-dropdown option {
  /* Neutral fallback so native dropdowns are legible by default */
  background: #e6e6e6;
  color: var(--text-primary);
  font-weight: 600;
}

/* Theme-specific option backgrounds to ensure contrast with native dropdown UI */
body[data-theme="dark"] .lang-select-dropdown option,
body[data-theme="dark"] select#main-lang-select option {
  background: rgba(20,20,20,0.95);
  color: #fff;
}

body[data-theme="dark2"] .lang-select-dropdown option,
body[data-theme="dark2"] select#main-lang-select option {
  background: rgba(20,20,20,0.95);
  color: #fff;
}

/* Rain Button Inspired Design */
.rain-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  position: relative;
  overflow: hidden;
}

.rain-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
  pointer-events: none;
}

.rain-btn:hover::before {
  width: 100%;
  height: 100%;
}

/* Inactive state - clearly dimmed */
.rain-btn:not(.active) {
  background: rgba(0, 0, 0, 0.2);
  border-color: rgba(255, 255, 255, 0.15);
  opacity: 0.6;
}

.rain-btn:not(.active) .rain-icon {
  opacity: 0.7;
}

/* Hover effects for inactive buttons - show outline */
.rain-btn:not(.active):hover {
  transform: scale(1.1);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
  opacity: 0.8;
  animation: outlineGrow 0.3s ease;
}

@keyframes outlineGrow {
  0% {
    box-shadow: 0 0 0 0px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
  }
}

.rain-btn:not(.active):hover::before {
  width: 60%;
  height: 60%;
}

/* Active state */
.rain-btn.active:hover {
  transform: scale(1.15) rotate(5deg);
  border-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

.rain-btn.active {
  background: rgba(255, 255, 255, 0.35);
  border-color: white;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.6), inset 0 0 10px rgba(255, 255, 255, 0.3);
  animation: pulse 2s ease-in-out infinite;
  opacity: 1;
}

@keyframes pulse {
  0%, 100% {
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.6), inset 0 0 10px rgba(255, 255, 255, 0.3);
  }
  50% {
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.8), inset 0 0 15px rgba(255, 255, 255, 0.5);
  }
}

.rain-icon {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
  transition: opacity 0.3s ease;
}

/* Gender and Season Filters - Separated with Titles */
.compact-gender-season-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 12px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.08) 100%);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3),
              0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Make gender slider SVG visible outside bounds for invisible hit path */
.round-slider-svg {
  overflow: visible;
}

.filter-group-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.filter-group-title {
  font-size: 10px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 20; /* render above slider */
  pointer-events: none; /* visible but non-interactive so it doesn't block the thumb */
}

.gender-buttons, .season-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  z-index: 4;
}

/* Season buttons 2x2 square grid on mobile */
@media (max-width: 520px), (max-height: 520px) and (orientation: landscape) {
  .season-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    width: 100%;
  }
}

.gender-filter-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.round-slider-container {
  position: absolute;
  width: 210px;
  height: 210px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Make the container visually above buttons but don't block clicks.
     Only the hit-circle (#sliderThumbHit) should receive pointer events. */
  pointer-events: none;
  z-index: 1; /* place the SVG arc visually behind the buttons */
}

/* Make gender slider easier to touch on mobile */
@media (max-width: 520px), (max-height: 520px) and (orientation: landscape) {
  /* Make gender and season buttons same size and bigger */
  .gender-buttons .filter-btn,
  .season-buttons .filter-btn {
    width: 54px;
    height: 54px;
    font-size: 24px;
  }
  /* Make compact-gender-season-container wider */
  .compact-gender-season-container {
    padding: 16px 12px;
    gap: 16px;
    min-width: auto;
    width: 100%;
    margin: 0 auto; /* center */
    justify-content: stretch;
    justify-items: stretch;
    align-items: stretch;
  }
  .compact-gender-season-container .filter-group-section { width: 100%; }
  /* Very small screens: make gender/season stack vertically to avoid overflow */
  @media (max-width: 380px) {
    .compact-gender-season-container { grid-template-columns: 1fr; }
  }
}

/* Desktop-mobile (portrait sub-HD on desktop): apply the same “wide + aligned” layout
   even when the viewport is >520px. */
body.desktop-mobile-mode .season-buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  width: 100%;
}
body.desktop-mobile-mode .gender-buttons .filter-btn,
body.desktop-mobile-mode .season-buttons .filter-btn {
  width: 54px;
  height: 54px;
  font-size: 24px;
}
body.desktop-mobile-mode .compact-gender-season-container {
  padding: 16px 12px;
  gap: 16px;
  min-width: auto;
  width: 100%;
  margin: 0 auto;
  justify-content: stretch;
  justify-items: stretch;
  align-items: stretch;
}
body.desktop-mobile-mode .compact-gender-season-container .filter-group-section { width: 100%; }

.round-slider-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.25));
}

/* Disabled visual state for the round gender slider: fully desaturated and slightly translucent */
.round-slider-svg.gender-slider-disabled {
  filter: grayscale(100%) saturate(0%) opacity(0.45) drop-shadow(0 4px 12px rgba(0,0,0,0.2));
}

/* The invisible hit path handles pointer events; visible paths don't need to */
#sliderArcPath { pointer-events: none; }
#sliderProgressPath { pointer-events: none; }

/* Only the transparent hit circle should capture pointer events; the visible
   thumb parts don't block clicks so underlying buttons remain clickable. */
#sliderThumbHit { pointer-events: none; }
#sliderThumbCircle, #sliderThumbInner { pointer-events: none; }

#sliderBackgroundTrack {
  transition: stroke 0.2s ease;
  stroke: rgba(255,255,255,0.22);
}

#sliderActiveTrack {
  transition: stroke 0.2s ease;
  filter: saturate(140%);
}

#sliderThumbHit {
  transition: filter 0.2s ease;
  pointer-events: none; /* overlay will handle input */
}

#sliderThumbHit:hover + #sliderThumbCircle,
#sliderThumbCircle:hover {
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.4));
}

#sliderThumbHit:active + #sliderThumbCircle,
#sliderThumbCircle:active {
  cursor: grabbing !important;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5));
}

#sliderThumbCircle {
  /* Deep glassy look (inspired by sillage-slider thumb) - optimized */
  backdrop-filter: blur(8px) saturate(150%);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  /* Stronger drop shadow + inner highlight to match the perf slider style */
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.35));
  transition: filter 0.18s ease, transform 0.18s ease;
}

#sliderThumbInner {
  /* Inner glow similar to perf sliders' thumb sheen */
  filter: drop-shadow(0 0 10px rgba(255,255,255,0.6));
  transition: filter 0.18s ease, transform 0.18s ease;
  transform-box: fill-box;
  transform-origin: center;
}

/* Scale-only hover state for the inner thumb when the overlay is hovered/touched.
   The class is toggled on the SVG via JS so the visual only appears during hover.
*/
.round-slider-svg.hit-hover #sliderThumbInner {
  /* Gentler, smoother spring effect: reduced peak, fewer oscillations */
  animation: thumbBounce 320ms cubic-bezier(0.25, 0.8, 0.25, 1) both;
}

@keyframes thumbBounce {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.30); }
  55%  { transform: scale(0.95); }
  80%  { transform: scale(1.12); }
 100%  { transform: scale(1.08); }
}

/* Persisted final state class: keeps the inner thumb at the final enlarged scale
   after the animation finishes. This works together with the JS handlers which
   toggle `hit-persist` on the SVG element when the animation ends.
*/
.round-slider-svg.hit-persist #sliderThumbInner {
  transform: scale(1.08);
  transition: transform 160ms ease-out;
} 

/* While user is actively dragging the slider, make the inner thumb slightly larger
   to provide stronger immediate feedback. This takes precedence over hover/persist.
*/
.round-slider-svg.dragging #sliderThumbInner {
  transform: scale(1.24) !important;
  transition: transform 120ms ease-out !important;
}

/* Progress path vibrancy — give the arc a subtle glassy rim */
#sliderProgressPath {
  transition: stroke-width 0.18s ease, filter 0.18s ease, stroke 0.18s ease;
  /* keep using the existing gradient but boost the glow slightly */
  filter: url(#glassGlow) saturate(140%);
}

/* Hover/active intensification similar to perf thumbs */
#sliderThumbHit:hover + #sliderThumbCircle,
#sliderThumbCircle:hover {
  filter: drop-shadow(0 10px 28px rgba(0,0,0,0.5));
  transform: translateY(-2px) scale(1.03);
}

#sliderThumbHit:active + #sliderThumbCircle,
#sliderThumbCircle:active {
  cursor: grabbing !important;
  filter: drop-shadow(0 12px 34px rgba(0,0,0,0.55));
  transform: translateY(0) scale(1.0);
}

.filter-btn.gender-hex-btn {
  pointer-events: all;
  position: relative;
  z-index: 3;
}

/* Disable text selection for UI labels and all filter content */
.no-select,
.no-select *,
.perf-label,
.slider-label,
.slider-label span,
.filter-group-title,
.season-buttons,
.season-buttons *,
#filters,
#filters *,
.compact-filter-bar,
.compact-filter-bar *,
.slider-group,
.slider-group *,
.gender-buttons,
.gender-buttons * {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* Protect type hierarchy icon images from being targeted by zoomers */
.type-hierarchy-image-container {
  position: relative;
}
.type-hierarchy-image-container::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: auto; /* intercepts interactions */
}

/* Mobile: ensure gender buttons stay in triangle formation */
@media (max-width: 768px) {
  .gender-buttons { 
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 6px;
    justify-items: center;
    width: 124px;
    margin: 0 auto;
  }
  /* Female on top-left, Male on top-right */
  .gender-buttons .filter-btn[data-gender="female"] { 
    grid-column: 1; 
    grid-row: 1;
  }
  .gender-buttons .filter-btn[data-gender="male"] { 
    grid-column: 2; 
    grid-row: 1;
  }
  /* Unisex centered on bottom row spanning both columns */
  .gender-buttons .filter-btn[data-gender="unisex"] { 
    grid-column: 1 / 3; 
    grid-row: 2;
    justify-self: center;
  }
  
  /* Ensure triangle arrangement is maintained */
  .gender-filter-wrapper {
    min-width: 140px;
  }
}

.filter-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  padding: 0;
  position: relative;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.filter-btn:hover {
  background: rgba(255, 255, 255, 0.24);
  border-color: rgba(255, 255, 255, 0.55);
  color: rgba(255, 255, 255, 0.9);
}

/* Gender-specific active colors */
.filter-btn[data-gender="male"].active {
  background: linear-gradient(135deg, rgba(64, 224, 208, 0.6) 0%, rgba(32, 178, 170, 0.6) 100%);
  border-color: rgba(64, 224, 208, 0.8);
  color: white;
  transform: none;
  box-shadow: none;
}

.filter-btn[data-gender="female"].active {
  background: linear-gradient(135deg, rgba(255, 182, 193, 0.6) 0%, rgba(255, 160, 180, 0.6) 100%);
  border-color: rgba(255, 182, 193, 0.8);
  color: white;
  transform: none;
  box-shadow: none;
}

.filter-btn[data-gender="unisex"].active {
  /* Half pink (left) and half blue/turquoise (right) */
  background: linear-gradient(90deg,
                rgba(255,150,170,0.6) 0%,
                rgba(255,150,170,0.6) 50%,
                rgba(64,224,208,0.6) 50%,
                rgba(64,224,208,0.6) 100%);
  border-color: rgba(255,150,170,0.0);
  color: white;
  transform: none;
  box-shadow: none;
}

/* Season-specific active colors */
.filter-btn[data-season="spring"].active {
  background: linear-gradient(135deg, rgba(255, 192, 203, 0.6) 0%, rgba(255, 160, 180, 0.6) 100%);
  border-color: rgba(255, 192, 203, 0.8);
  color: white;
  box-shadow: none;
}

.filter-btn[data-season="summer"].active {
  background: linear-gradient(135deg, rgba(255, 223, 0, 0.6) 0%, rgba(255, 200, 0, 0.6) 100%);
  border-color: rgba(255, 223, 0, 0.8);
  color: white;
  box-shadow: none;
}

.filter-btn[data-season="fall"].active {
  background: linear-gradient(135deg, rgba(255, 140, 0, 0.6) 0%, rgba(255, 100, 0, 0.6) 100%);
  border-color: rgba(255, 140, 0, 0.8);
  color: white;
  box-shadow: none;
}

.filter-btn[data-season="winter"].active {
  background: linear-gradient(135deg, rgba(175, 238, 238, 0.6) 0%, rgba(135, 206, 250, 0.6) 100%);
  border-color: rgba(175, 238, 238, 0.8);
  color: white;
  box-shadow: none;
}

/* Make quality switches glow like season/gender filter buttons when active */
.quality-switch.is-on {
  transform: none;
}
.quality-switch.is-on .switch-track {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Subtler glow on hover for active switches */
.quality-switch.is-on:hover .switch-track {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.hex-icon {
  line-height: 1;
}

/* Gender-specific icon colors when NOT active (unselected state) */
.filter-btn[data-gender="female"]:not(.active) .hex-icon {
  color: rgba(255, 150, 170, 0.9);
  text-shadow: none;
}

.filter-btn[data-gender="male"]:not(.active) .hex-icon {
  color: rgba(64, 224, 208, 0.9);
  text-shadow: none;
}

.filter-btn[data-gender="unisex"]:not(.active) .hex-icon {
  background: linear-gradient(90deg, rgba(255,150,170,1) 0%, rgba(255,150,170,1) 50%, rgba(64,224,208,1) 50%, rgba(64,224,208,1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: none;
}

/* Performance Sliders - Dramatic Glass Card Design */
.compact-performance-sliders {
  display: flex;
  gap: 16px;
  flex: 1;
  min-width: 240px;
}

.slider-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 14px;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3),
              0 4px 12px rgba(0, 0, 0, 0.12);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  touch-action: none; /* Capture all touch events */
  -webkit-tap-highlight-color: transparent;
}

.slider-group:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.12) 100%);
  transform: translateY(-2px);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35),
              0 8px 18px rgba(0, 0, 0, 0.15);
}

/* Compact variant for the quality switches slider-group */
.slider-group.quality-switches-group {
  padding: 6px 8px; /* compact padding */
  gap: 6px;
  border-radius: 10px;
  margin: 2px 0; /* reduce top/bottom margin to be compact */
}

.slider-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  color: white;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  pointer-events: none;
  cursor: pointer;
}

/* Longevity slider - vibrant blue */
#longevity-slider {
  background: linear-gradient(90deg, rgba(30, 144, 255, 0.3), rgba(0, 191, 255, 0.4));
}

#longevity-slider:hover {
  background: linear-gradient(90deg, rgba(30, 144, 255, 0.5), rgba(0, 191, 255, 0.6));
}

#longevity-slider::-webkit-slider-thumb {
  border-color: rgba(30, 144, 255, 0.8);
  box-shadow: 0 4px 12px rgba(30, 144, 255, 0.6),
              inset 0 1px 2px rgba(255, 255, 255, 0.8);
}

#longevity-slider::-webkit-slider-thumb:hover {
  box-shadow: 0 6px 20px rgba(30, 144, 255, 1),
              0 0 30px rgba(0, 191, 255, 0.8),
              inset 0 1px 2px rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 191, 255, 0.9);
}

#longevity-slider::-moz-range-thumb {
  border-color: rgba(30, 144, 255, 0.8);
  box-shadow: 0 4px 12px rgba(30, 144, 255, 0.6),
              inset 0 1px 2px rgba(255, 255, 255, 0.8);
}

#longevity-slider::-moz-range-thumb:hover {
  box-shadow: 0 6px 20px rgba(30, 144, 255, 1),
              0 0 30px rgba(0, 191, 255, 0.8),
              inset 0 1px 2px rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 191, 255, 0.9);
}

/* Sillage slider - bold red */
#sillage-slider {
  background: linear-gradient(90deg, rgba(220, 20, 60, 0.3), rgba(255, 69, 0, 0.4));
}

/* Visual disabled state for linear sliders (longevity / sillage).
   Uses the `slider-disabled` class applied by JS. Keep pointer-events
   enabled so a user can click/drag to re-enable the slider, but
   desaturate/soften the visuals to indicate it's not currently used
   to affect scoring. */
#longevity-slider.slider-disabled,
#sillage-slider.slider-disabled {
  filter: grayscale(100%) opacity(0.55);
  transition: filter 160ms ease, box-shadow 160ms ease;
}

/* Muted thumb appearance when disabled */
#longevity-slider.slider-disabled::-webkit-slider-thumb,
#sillage-slider.slider-disabled::-webkit-slider-thumb {
  box-shadow: 0 2px 6px rgba(0,0,0,0.2) inset;
  border-color: rgba(128,128,128,0.6);
}
#longevity-slider.slider-disabled::-moz-range-thumb,
#sillage-slider.slider-disabled::-moz-range-thumb {
  box-shadow: 0 2px 6px rgba(0,0,0,0.2) inset;
  border-color: rgba(128,128,128,0.6);
}

/* Slightly change cursor to indicate a subdued control */
#longevity-slider.slider-disabled,
#sillage-slider.slider-disabled {
  cursor: default;
}

#sillage-slider:hover {
  background: linear-gradient(90deg, rgba(220, 20, 60, 0.5), rgba(255, 69, 0, 0.6));
}

#sillage-slider::-webkit-slider-thumb {
  border-color: rgba(220, 20, 60, 0.8);
  box-shadow: 0 4px 12px rgba(220, 20, 60, 0.6),
              inset 0 1px 2px rgba(255, 255, 255, 0.8);
}

#sillage-slider::-webkit-slider-thumb:hover {
  box-shadow: 0 6px 20px rgba(220, 20, 60, 1),
              0 0 30px rgba(255, 69, 0, 0.8),
              inset 0 1px 2px rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 69, 0, 0.9);
}

#sillage-slider::-moz-range-thumb {
  border-color: rgba(220, 20, 60, 0.8);
  box-shadow: 0 4px 12px rgba(220, 20, 60, 0.6),
              inset 0 1px 2px rgba(255, 255, 255, 0.8);
}

#sillage-slider::-moz-range-thumb:hover {
  box-shadow: 0 6px 20px rgba(220, 20, 60, 1),
              0 0 30px rgba(255, 69, 0, 0.8),
              inset 0 1px 2px rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 69, 0, 0.9);
}

.slider-icon {
  font-size: 16px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.perf-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  backdrop-filter: blur(10px);
  outline: none;
  transition: all 0.3s;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
  pointer-events: auto;
  position: relative;
  z-index: 1;
}

.perf-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85));
  cursor: pointer;
  border: 2px solid rgba(200, 200, 200, 0.6);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3),
              inset 0 1px 2px rgba(255, 255, 255, 0.8);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.perf-slider::-webkit-slider-thumb:hover {
  transform: scale(1.25);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4),
              0 0 30px rgba(255, 255, 255, 0.6),
              inset 0 1px 2px rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.8);
}

.perf-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85));
  cursor: pointer;
  border: 2px solid rgba(200, 200, 200, 0.6);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3),
              inset 0 1px 2px rgba(255, 255, 255, 0.8);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.perf-slider::-moz-range-thumb:hover {
  transform: scale(1.25);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4),
              0 0 30px rgba(255, 255, 255, 0.6),
              inset 0 1px 2px rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.8);
}

/* Global Sort Selector */
.compact-sort-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 0;
  order: 999;
  position: relative; /* allow overlaying the label without layout changes */
}

@media (max-width: 520px) {
  .compact-sort-selector {
    width: auto;
  }
}

.compact-sort-selector .compact-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  white-space: nowrap;
  position: absolute;
  left: 50%;
  top: calc(100% + 2px); /* place below the select without shifting layout */
  transform: translateX(-50%);
  pointer-events: none; /* avoid interfering with select clicks */
  z-index: 6;
}

.global-sort-dropdown {
  padding: 10px 14px; /* match Clear button padding to align overlay Y position */
  font-size: 12px;
  font-weight: 600;
  color: white;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s;
  outline: none;
  flex: 1;
  /* Center the select text and make sure last-line is centered on Firefox */
  text-align: center;
  text-align-last: center;
  direction: ltr; /* ensure text isn't pushed to end in some RTL locales */
  box-sizing: border-box;
  min-height: 40px; /* ensure select height matches clear button so overlays align */
  line-height: 1; /* consistent baseline */
}

.global-sort-dropdown:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}

.global-sort-dropdown:focus {
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

.global-sort-dropdown option {
  background: #333;
  color: white;
  text-align: center; /* center text in options list */
}

/* Filter Tabs */
.filter-tabs {
  display: flex;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.15), rgba(118, 75, 162, 0.15));
  backdrop-filter: blur(10px);
  border-bottom: 2px solid rgba(102, 126, 234, 0.2);
  padding: 0 12px;
  gap: 4px;
}

.filter-tab {
  flex: 1;
  padding: 14px 16px;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  font-size: 13px;
  font-weight: 600;
  color: rgba(102, 126, 234, 0.7);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  position: relative;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.filter-tab::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, #667eea, #764ba2);
  transition: width 0.3s ease;
}

.filter-tab:hover {
  color: #667eea;
  background: rgba(102, 126, 234, 0.08);
  transform: translateY(-2px);
}

.filter-tab:hover::before {
  width: 80%;
}

.filter-tab.active {
  color: #667eea;
  border-bottom-color: #667eea;
  background: rgba(102, 126, 234, 0.12);
  font-weight: 700;
  box-shadow: inset 0 -3px 0 0 #667eea;
}

.filter-tab.active::before {
  width: 100%;
}

/* Tab Content */
.filter-tab-content {
  display: none;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

.filter-tab-content.active {
  display: flex;
  flex-direction: column;
}

/* Unified Filters */
.unified-filters {
  display: flex;
  flex-direction: column;
  padding: 20px;
  gap: 24px;
  overflow: hidden; /* No scrolling - fixed size */
  flex: 1;
  /* glassy compact-filter-bar look - optimized */
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1),
              inset 0 1px 1px rgba(255, 255, 255, 0.3);
}

/* Make type-hierarchy-list non-scrollable when in hierarchy tab */
#types-hierarchy-section {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.type-hierarchy-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  min-height: 0; /* Allow flex shrinking */
}

.type-hierarchy-list::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
  width: 0;
  height: 0;
}

.filter-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 280px;
  width: 100%;
  flex: 1;
  overflow: hidden;
}

.filter-section-title {
  display: none; /* Hidden - redundant with tabs */
}

.filter-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 280px;
  width: 100%;
}

.filter-section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--border);
}

.filter-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.rotated-tab {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: white;
  padding: 8px 6px;
  border-radius: 6px 6px 0 0;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  user-select: none;
}

.rotated-tab:hover {
  filter: brightness(1.15);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.rotated-tab.active {
  background: linear-gradient(135deg, var(--accent), var(--primary));
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
}

.accord-filter-dropdown {
  background: white;
  border: 2px solid var(--primary);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-lg);
}

.accord-filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

.clear-filter-btn {
  background: var(--primary);
  color: white;
  border: none;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.clear-filter-btn:hover {
  background: var(--primary-dark);
  transform: scale(1.05);
}

.accord-filter-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 300px;
  overflow-y: auto;
}

.accord-filter-item {
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.accord-filter-item:hover {
  background: var(--primary-light);
  border-color: var(--primary);
}

.accord-filter-item.selected {
  background: var(--primary);
  color: white;
  font-weight: 600;
  border-color: var(--primary-dark);
}

.accord-filter-item .accord-swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Search Box */
.match-grid {
  flex: 1;
  overflow: hidden; /* No scrolling - page-based navigation */
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  align-content: start;
  background: transparent; /* let cards carry their own backgrounds */
  border-radius: 12px;
}

.match-card {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 16px;
  overflow: visible; /* allow absolutely positioned children like .match-accords */
  transition: background-color 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  min-height: 340px;
  height: auto;
  position: relative;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  /* CSS containment for scroll performance - tells browser cards are independent */
  contain: layout style paint;
  content-visibility: auto;
  contain-intrinsic-size: auto 340px;
}
.match-card:hover {
  transform: none;
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.35);
}

.match-card.selected {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transform: none;
  animation: none;
  z-index: 10;
}

/* Add glassmorphism to card children */
.match-card > * {
  position: relative;
  z-index: 1;
}

/* Scroll snapping similar to gallery view: snap rows into place when scrolling.
   Use proximity to avoid sharp jumps on small gestures; align cards to the
   start of the scrolling container so rows land cleanly. */
/* Page-based navigation - no scroll snap needed */
.match-grid {
  touch-action: auto;
}

.btn-search {
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--surface);
  background: var(--primary);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s;
}

.btn-search:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.btn-search:active {
  transform: translateY(0);
}

/* Suggestions */
.suggestions {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  max-height: 200px;
  overflow-y: auto;
  box-shadow: var(--shadow);
}

.suggestions.show { display: flex; }

.suggestion {
  padding: 8px 10px;
  font-size: 12px;
  color: var(--text-primary);
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.15s;
}

.suggestion:hover {
  background: var(--primary-light);
  color: var(--primary-dark);
}

/* Selected Tags */
.selected-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 32px;
  max-height: 72px; /* limit vertical growth so adding tags doesn't push the whole panel down */
  padding: 8px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.selected-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--surface);
  background: var(--primary);
  border-radius: 999px;
  transition: all 0.2s;
}

.selected-tag:hover {
  background: var(--primary-dark);
}

/* Note filter tooltip - displays note description on hover */
.note-filter-tooltip {
  position: fixed;
  bottom: auto;
  left: 0;
  width: max-content;
  max-width: 380px;
  background: var(--tooltip-bg, rgba(15, 15, 25, 0.96));
  border: 1px solid var(--tooltip-border, rgba(255, 255, 255, 0.25));
  border-radius: 12px;
  padding: 14px 18px;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
  transform: translateY(5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 16px var(--tooltip-glow, rgba(139, 92, 246, 0.3));
  font-size: 14px;
  line-height: 1.6;
  color: var(--tooltip-text, rgba(255, 255, 255, 0.9));
}

.note-filter-tooltip.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* Tooltip image container for larger note preview - gallery style */
.note-filter-tooltip-image-container {
  position: relative;
  width: 100%;
  height: 200px;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--surface-dim);
  border-radius: 12px 12px 0 0;
  margin: -16px -16px 12px -16px;
  width: calc(100% + 32px);
}

.note-filter-tooltip-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.note-filter-tooltip-arrow {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid var(--tooltip-bg, rgba(15, 15, 25, 0.96));
  transition: left 0.1s ease;
}

.note-filter-tooltip-arrow::before {
  content: '';
  position: absolute;
  top: -8px;
  left: -8px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid var(--tooltip-border, rgba(255, 255, 255, 0.25));
  z-index: -1;
}

.note-filter-tooltip-name {
  font-weight: 600;
  font-size: 16px;
  color: var(--tooltip-name-color, rgba(255, 255, 255, 0.95));
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--tooltip-divider, rgba(255, 255, 255, 0.15));
}

/* English name inside note tooltip: smaller and semi-transparent */
.note-filter-tooltip-name .note-filter-tooltip-name-english {
  opacity: 0.65;
  font-size: 13px;
  font-weight: 400;
  margin-left: 6px;
  color: inherit;
}

/* Mobile tweak: keep english name legible but proportionally smaller */
@media (max-width: 620px) {
  .note-filter-tooltip-name .note-filter-tooltip-name-english {
    font-size: 12px;
    opacity: 0.7;
  }
}

.note-filter-tooltip-desc {
  font-size: 14px;
  color: var(--tooltip-desc-color, var(--tooltip-name-color, rgba(255, 255, 255, 0.85)));
  line-height: 1.6;
}

.note-filter-tooltip-desc.no-description {
  font-style: italic;
  opacity: 0.7;
}

/* Mobile adjustments for note filter tooltip */
@media (max-width: 620px) {
  .note-filter-tooltip {
    position: fixed;
    bottom: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    min-width: 220px;
    max-width: 300px;
    padding: 14px 16px;
    font-size: 13px;
  }
  
  .note-filter-tooltip-arrow {
    display: none;
  }
  
  .note-filter-tooltip.visible {
    transform: translate(-50%, -50%) scale(1);
  }
  
  .note-filter-tooltip-image-container {
    margin: -12px -12px 10px -12px;
    width: calc(100% + 24px);
    height: 160px;
  }
  
  .note-filter-tooltip-image {
    width: 100%;
    height: 100%;
  }
  
  .note-filter-tooltip-name {
    font-size: 15px;
  }
  
  .note-filter-tooltip-desc {
    font-size: 15px;
    color: var(--tooltip-name-color, rgba(255, 255, 255, 0.85));
    line-height: 1.6;
  }
}

/* Accord tooltip - displays accord description on click */
.accord-tooltip {
  position: fixed;
  bottom: auto;
  left: 0;
  width: max-content;
  max-width: 380px;
  background: var(--tooltip-bg, rgba(15, 15, 25, 0.96));
  border: 1px solid var(--tooltip-border, rgba(255, 255, 255, 0.25));
  border-radius: 12px;
  padding: 14px 18px;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
  transform: translateY(5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 16px var(--tooltip-glow, rgba(139, 92, 246, 0.3));
  font-size: 14px;
  line-height: 1.6;
  color: var(--tooltip-text, rgba(255, 255, 255, 0.9));
}

.accord-tooltip.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.accord-tooltip-arrow {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid var(--tooltip-bg, rgba(15, 15, 25, 0.96));
  transition: left 0.1s ease;
}

.accord-tooltip-name {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.accord-tooltip-desc {
  font-size: 14px;
  line-height: 1.6;
}

.accord-tooltip-desc.no-description {
  font-style: italic;
  opacity: 0.7;
}

/* Mobile adjustments for accord tooltip */
@media (max-width: 620px) {
  .accord-tooltip {
    position: fixed;
    min-width: 200px;
    max-width: calc(100vw - 20px);
    padding: 12px 14px;
    font-size: 13px;
  }
  
  .accord-tooltip-arrow {
    display: block;
  }
  
  .accord-tooltip.visible {
    transform: translateY(0);
  }
  
  .accord-tooltip-name {
    font-size: 14px;
  }
  
  .accord-tooltip-desc {
    font-size: 12px;
  }
}

.tag-remove {
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.tag-remove:hover { opacity: 1; }

.btn-clear-panel {
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s;
}

.btn-clear-panel:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

/* Node Cloud */
.node-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  max-height: 320px;
  overflow-y: auto;
}

.node-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  background: var(--surface-dim);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  /* Use targeted transitions (no layout-affecting properties) so size doesn't change */
  transition: outline-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease, background-color 150ms ease;
  font-size: 11px;
  /* Outline matches gallery card edge color; JS sets color inline */
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.node-item:hover {
  background: var(--surface-hover);
  border-color: var(--border-dark);
  /* Don't scale - keep the element's size stable. Use subtle shadow/outline instead. */
  box-shadow: var(--shadow-sm);
  outline-color: transparent;
}

.node-item.selected {
  /* Yellow glow effect matching type-hierarchy selections */
  border-color: rgba(250, 204, 21, 0.6);
  box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.5), 0 0 15px rgba(250, 204, 21, 0.4), inset 0 0 20px rgba(250, 204, 21, 0.15) !important;
  animation: nodeSelectPulse 2s ease-in-out infinite;
  outline: none !important;
  position: relative;
  z-index: 1;
}

@keyframes nodeSelectPulse {
  0%, 100% {
    box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.5), 0 0 15px rgba(250, 204, 21, 0.4), inset 0 0 20px rgba(250, 204, 21, 0.15) !important;
  }
  50% {
    box-shadow: 0 0 0 4px rgba(250, 204, 21, 0.7), 0 0 25px rgba(250, 204, 21, 0.6), inset 0 0 25px rgba(250, 204, 21, 0.2) !important;
  }
}

.node-swatch {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.1);
  flex-shrink: 0;
}

.node-thumbnail {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  object-fit: cover;
  border: 1px solid rgba(0,0,0,0.1);
  flex-shrink: 0;
}

.node-label {
  font-size: 11px;
  color: var(--text-primary);
  line-height: 1.3;
  white-space: nowrap;
  flex: 1;
}

.node-show-all-btn {
  width: 100%;
  padding: 10px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 12px;
}

.node-show-all-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}


.filter-section-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

/* Types Hierarchy Section */
#types-hierarchy-section {
  position: relative;
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Type hierarchy search overlay (scoped to unified-filters only) */
.unified-filters {
  position: relative;
}

.type-hierarchy-search-button {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.4);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), rgba(255,255,255,0.2));
  color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  z-index: 40;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.type-hierarchy-search-button:hover {
  transform: translateY(-1px) scale(1.05);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}

/* Apply button styled like the floating search button but compact */
.type-hierarchy-search-apply {
  min-width: 64px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.35);
  background: linear-gradient(135deg, rgba(255,255,255,0.92), rgba(255,255,255,0.28));
  color: #111;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0 10px;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(0,0,0,0.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.type-hierarchy-search-apply:hover { transform: translateY(-1px); }

.type-hierarchy-search-overlay {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  padding: 10px 14px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.88) 0%, rgba(30, 41, 59, 0.92) 100%);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 6px 24px rgba(0,0,0,0.3);
  border-radius: 14px 14px 0 0;
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  z-index: 45;
  transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 200ms ease;
}

.unified-filters .type-hierarchy-search-overlay.visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.type-hierarchy-search-field {
  position: relative;
  flex: 1 1 auto;
  min-width: 140px;
  height: 34px;
  display: flex;
  align-items: center;
}

.type-hierarchy-search-input {
  width: 100%;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.3);
  padding: 0 14px;
 
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(148,163,184,0.15) 100%);
  outline: none;
  box-shadow: 
    inset 0 2px 4px rgba(0,0,0,0.1),
    0 1px 0 rgba(255,255,255,0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
}

.type-hierarchy-search-input:focus {
  border-color: rgba(34, 197, 94, 0.6);
  box-shadow: 
    inset 0 2px 4px rgba(0,0,0,0.1),
    0 0 0 3px rgba(34, 197, 94, 0.2),
    0 0 20px rgba(34, 197, 94, 0.15);
  background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(148,163,184,0.2) 100%);
}

/* Mobile: avoid input zoom by ensuring font-size >= 16px on small screens */
@media (max-width: 520px) {
  .unified-filters .type-hierarchy-search-input,
  .type-hierarchy-search-input {
    font-size: 16px !important;
    padding-right: 96px; /* space for counter + apply */
  }
  .type-hierarchy-search-apply { min-width: 72px; }
}

/* Desktop: Counter positioned top-right, right below the search overlay, aligned with arrows */
.type-hierarchy-search-counter {
  position: absolute;
  right: 12px;
  top: 58px; /* Below the overlay, aligned with the arrows */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.95);
  font-weight: 700;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  z-index: 50;
  background: linear-gradient(135deg, rgba(15, 15, 25, 0.95), rgba(30, 30, 50, 0.9));
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  min-width: 50px;
  text-align: center;
  transition: opacity 200ms ease, transform 200ms ease;
  opacity: 0;
  transform: translateY(-4px);
}

/* Show counter only when search has content */
.type-hierarchy-search-counter:not(:empty) {
  opacity: 1;
  transform: translateY(0);
}

/* Counter states - found (green tint) */
.type-hierarchy-search-counter.found {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.35), rgba(15, 15, 25, 0.85));
  border-color: rgba(34, 197, 94, 0.5);
}

/* Counter states - error (red tint) */
.type-hierarchy-search-counter.error {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.35), rgba(15, 15, 25, 0.85));
  border-color: rgba(239, 68, 68, 0.5);
  color: rgba(255, 200, 200, 0.95);
}

/* Hiding state: used to animate counter out while preserving text until cleared by JS */
.type-hierarchy-search-counter.hiding {
  opacity: 0 !important;
  transform: translateY(-6px) !important;
  transition: opacity 200ms ease, transform 200ms ease !important;
}

/* Mobile: Counter inline in search field */
@media (max-width: 520px) {
  .type-hierarchy-search-counter {
    position: absolute;
    right: 10px;
    top: 50%;
    left: auto;
    bottom: auto;
    transform: translateY(-50%);
    z-index: 46;
    background: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0.05));
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: none;
    font-size: 11px;
    opacity: 1;
  }
  
  .type-hierarchy-search-counter:empty {
    opacity: 0;
  }
  
  .type-hierarchy-search-input.found + .type-hierarchy-search-counter {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.25), rgba(255,255,255,0.1));
    border-color: rgba(34, 197, 94, 0.4);
  }
  
  .type-hierarchy-search-input.error + .type-hierarchy-search-counter {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.25), rgba(255,255,255,0.05));
    border-color: rgba(239, 68, 68, 0.4);
    color: rgba(255, 200, 200, 0.95);
  }
}

/* Highlight matched types/notes in the hierarchy */
.type-hierarchy-search-match {
  /* Elegant glass glow effect for matches - GREEN */
  position: relative;
  filter: brightness(1.05) saturate(1.1);
  box-shadow: 
    0 0 0 2px rgba(34, 197, 94, 0.25),
    0 4px 16px rgba(34, 197, 94, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1);
  animation: searchMatchGlow 3s ease-in-out infinite;
  /* Scroll margins for proper positioning */
  scroll-margin-top: 100px;
  scroll-margin-bottom: 30px;
  z-index: 2;
}

.type-hierarchy-search-match::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.12) 0%, transparent 60%);
  pointer-events: none;
  opacity: 0.8;
}

/* Apply search match glow to the type button when item is matched (works when expanded) */
.type-hierarchy-item.type-hierarchy-search-match > .type-hierarchy-btn,
.type-hierarchy-item.__search-hit > .type-hierarchy-btn {
  box-shadow: 
    0 0 0 3px rgba(34, 197, 94, 0.5),
    0 0 20px rgba(34, 197, 94, 0.4),
    inset 0 0 20px rgba(34, 197, 94, 0.1) !important;
  animation: searchMatchGlow 3s ease-in-out infinite;
}

.type-hierarchy-item.type-hierarchy-search-match.__search-hit > .type-hierarchy-btn {
  box-shadow: 
    0 0 0 3px rgba(34, 197, 94, 0.6),
    0 0 25px rgba(34, 197, 94, 0.5),
    inset 0 0 25px rgba(34, 197, 94, 0.15) !important;
  animation: searchHitPulse 1.5s ease-in-out infinite;
}

/* Current navigated match - prominent green glow */
.type-hierarchy-search-match.__search-hit,
.__search-hit.type-hierarchy-search-match {
  filter: brightness(1.15) saturate(1.15);
  animation: searchHitPulse 1.5s ease-in-out infinite;
  box-shadow: 
    0 0 0 3px rgba(34, 197, 94, 0.6),
    0 0 20px rgba(34, 197, 94, 0.45),
    0 8px 32px rgba(34, 197, 94, 0.25),
    inset 0 0 20px rgba(34, 197, 94, 0.15);
  outline: none;
  transform: scale(1.01);
  z-index: 10;
}

/* Standalone hit class (when navigating) */
.__search-hit:not(.type-hierarchy-search-match) {
  animation: searchHitPulse 1.5s ease-in-out infinite;
  box-shadow: 
    0 0 0 3px rgba(34, 197, 94, 0.6),
    0 0 20px rgba(34, 197, 94, 0.45);
  z-index: 10;
}

/* Enhanced highlight for current hit's text - GREEN */
.type-hierarchy-search-match.__search-hit .type-hierarchy-text-highlight,
.__search-hit .type-hierarchy-text-highlight {
  background: linear-gradient(135deg, rgba(187, 247, 208, 0.6) 0%, rgba(34, 197, 94, 0.85) 100%);
  box-shadow: 
    0 0 0 2px rgba(34, 197, 94, 0.8),
    0 2px 12px rgba(34, 197, 94, 0.5);
  color: #111;
  font-weight: 700;
  animation: none;
}

@keyframes searchMatchGlow {
  0%, 100% {
    filter: brightness(1.02) saturate(1.05);
    box-shadow: 
      0 0 0 1px rgba(34, 197, 94, 0.15),
      0 2px 8px rgba(34, 197, 94, 0.08);
  }
  50% {
    filter: brightness(1.08) saturate(1.12);
    box-shadow: 
      0 0 0 2px rgba(34, 197, 94, 0.3),
      0 4px 16px rgba(34, 197, 94, 0.2);
  }
}

@keyframes searchHitPulse {
  0%, 100% {
    filter: brightness(1.12) saturate(1.1);
    box-shadow: 
      0 0 0 3px rgba(34, 197, 94, 0.5),
      0 0 15px rgba(34, 197, 94, 0.35),
      0 6px 24px rgba(34, 197, 94, 0.2);
    transform: scale(1.005);
  }
  50% {
    filter: brightness(1.2) saturate(1.2);
    box-shadow: 
      0 0 0 4px rgba(34, 197, 94, 0.7),
      0 0 30px rgba(34, 197, 94, 0.5),
      0 8px 32px rgba(34, 197, 94, 0.3);
    transform: scale(1.015);
  }
}

.type-hierarchy-search-input::placeholder {
  color: rgba(15,23,42,0.55);
}

.type-hierarchy-search-input.found {
  animation: typeHierarchySearchFlash 520ms ease-out;
}

.type-hierarchy-search-input.error {
  border-color: #ef4444;
  box-shadow: 0 0 0 1px rgba(248,113,113,0.7), 0 0 12px rgba(248,113,113,0.6);
}

.type-hierarchy-search-close {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.25);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
}

.type-hierarchy-search-close:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.25); }

.type-hierarchy-search-overlay { padding-left: 12px; }

@keyframes typeHierarchySearchFlash {
  0%   { 
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1), 0 0 0 0 rgba(34, 197, 94, 0);
    border-color: rgba(255,255,255,0.3);
  }
  30%  { 
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1), 0 0 0 4px rgba(34, 197, 94, 0.5), 0 0 30px rgba(34, 197, 94, 0.4);
    border-color: rgba(34, 197, 94, 0.8);
  }
  100% { 
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1), 0 0 0 0 rgba(34, 197, 94, 0);
    border-color: rgba(255,255,255,0.3);
  }
}

.type-hierarchy-search-nav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
  flex: 0 0 auto;
}

.type-hierarchy-search-arrow {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.3);
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.05) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  transition: all 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.type-hierarchy-search-arrow:hover {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.35) 0%, rgba(255,255,255,0.15) 100%);
  border-color: rgba(34, 197, 94, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.35), 0 0 12px rgba(34, 197, 94, 0.25);
}

.type-hierarchy-search-arrow:active {
  transform: translateY(0) scale(0.95);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.type-hierarchy-search-arrow:disabled {
  opacity: 0.4;
  cursor: default;
  transform: none;
  box-shadow: none;
}

/* Inline text highlight inside type/note labels for matched substring - GREEN */
.type-hierarchy-text-highlight {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.25) 0%, rgba(74, 222, 128, 0.45) 100%);
  box-shadow: 
    0 0 0 1px rgba(34, 197, 94, 0.5),
    0 1px 4px rgba(34, 197, 94, 0.3);
  border-radius: 4px;
  padding: 1px 4px;
  margin: 0 1px;
  color: inherit;
  font-weight: 600;
  position: relative;
  display: inline;
  animation: highlightShimmer 2s ease-in-out infinite;
}

/* Exact start match - strongest highlight */
.type-hierarchy-text-highlight.exact-start {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.4) 0%, rgba(74, 222, 128, 0.6) 100%);
  box-shadow: 
    0 0 0 2px rgba(34, 197, 94, 0.5),
    0 2px 8px rgba(34, 197, 94, 0.4),
    0 0 12px rgba(34, 197, 94, 0.25);
}

/* Word boundary match - medium highlight */
.type-hierarchy-text-highlight.word-start {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.25) 0%, rgba(34, 197, 94, 0.45) 100%);
  box-shadow: 
    0 0 0 1px rgba(59, 130, 246, 0.4),
    0 1px 6px rgba(34, 197, 94, 0.3);
}

@keyframes highlightShimmer {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.15);
  }
}

/* Dark theme adjustments for highlights */
[data-theme="dark"] .type-hierarchy-text-highlight,
.dark .type-hierarchy-text-highlight {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.35) 0%, rgba(74, 222, 128, 0.55) 100%);
  color: #111;
}

[data-theme="dark"] .type-hierarchy-text-highlight.exact-start,
.dark .type-hierarchy-text-highlight.exact-start {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.5) 0%, rgba(74, 222, 128, 0.7) 100%);
  color: #111;
}

/* Types Hierarchy List */
.type-hierarchy-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  max-height: calc(100vh - 320px);
  overflow-y: auto;
    padding: 0;
    /* Allow the list content to extend fully to the right edge so the scrubber
      can overlap it visually. The scrubber is positioned absolutely inside
      `#types-hierarchy-section` and will sit above the list. */
    padding-right: 0;
  /* glassy panel to match notes/badges */
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  position: relative;
  flex: 1;
  /* Hide scrollbar while maintaining functionality */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.type-hierarchy-list::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.type-hierarchy-item {
  display: flex;
  flex-direction: column;
  /* glassy row appearance, keep rectangular edges */
  /* increased translucency */
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(4px) saturate(120%);
  -webkit-backdrop-filter: blur(4px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.02);
  border-radius: 0; /* keep sharp corners as requested */
  overflow: visible;
  width: 100%; /* ensure item fills the list width so children can stretch */
  transition: all 200ms ease;
  flex-shrink: 0;
  /* Ensure proper scroll positioning for search results */
  scroll-margin-top: 80px;
  scroll-margin-bottom: 20px;
}

.type-hierarchy-item:first-child {
  border-top: 1px solid #e0e0e0;
}

.type-hierarchy-item.expanded {
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.05);
}

.type-hierarchy-btn {
  display: flex;
  align-items: center;
  width: auto; /* allow align-self to control stretching */
  align-self: stretch; /* ensure the button fills its parent's width */
  min-width: 0; /* allow the label to shrink when needed */
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
  height: 80px;
  min-height: 80px;
  flex-shrink: 0;
  transition: filter 200ms ease;
}

.type-hierarchy-btn:hover {
  filter: brightness(1.08);
}

.type-hierarchy-btn:active {
  filter: brightness(0.92);
}

/* Type button selected state - yellow glow matching note selection */
.type-hierarchy-btn.selected {
  position: relative;
  z-index: 1;
  border-color: rgba(250, 204, 21, 0.6);
  box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.5), 0 0 15px rgba(250, 204, 21, 0.4), inset 0 0 20px rgba(250, 204, 21, 0.15) !important;
  animation: typeSelectPulse 2s ease-in-out infinite;
  outline: none !important;
}

@keyframes typeSelectPulse {
  0%, 100% {
    box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.5), 0 0 15px rgba(250, 204, 21, 0.4), inset 0 0 20px rgba(250, 204, 21, 0.15) !important;
  }
  50% {
    box-shadow: 0 0 0 4px rgba(250, 204, 21, 0.7), 0 0 25px rgba(250, 204, 21, 0.6), inset 0 0 25px rgba(250, 204, 21, 0.2) !important;
  }
}

/* Type button partial selection state - orange glow */
.type-hierarchy-btn.partial {
  position: relative;
  z-index: 1;
  border-color: rgba(249, 115, 22, 0.6);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.5), 0 0 15px rgba(249, 115, 22, 0.4), inset 0 0 20px rgba(249, 115, 22, 0.15) !important;
  animation: typePartialPulse 2s ease-in-out infinite;
  outline: none !important;
}

@keyframes typePartialPulse {
  0%, 100% {
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.5), 0 0 15px rgba(249, 115, 22, 0.4), inset 0 0 20px rgba(249, 115, 22, 0.15) !important;
  }
  50% {
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.7), 0 0 25px rgba(249, 115, 22, 0.6), inset 0 0 25px rgba(249, 115, 22, 0.2) !important;
  }
}

.type-hierarchy-image-container {
  width: 140px;
  min-width: 140px;
  height: 80px;
  min-height: 80px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;

}

.type-hierarchy-image {
  width: 140px;
  height: 80px;
  min-width: 140px;
  min-height: 80px;
  object-fit: cover;
  object-position: center;
  display: block;
  mask-image: linear-gradient(to right, black 0%, black 75%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, black 0%, black 75%, transparent 100%);
}

.type-hierarchy-label {
  flex: 1;
  min-width: 0; /* allow text to truncate/shrink so the row can expand */
  padding: 0 16px 0 8px;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  color: #fff;
  /* Default shadow - will be overridden by JS based on image brightness */
  text-shadow: 0 1px 3px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.3);
  position: relative;
  z-index: 1;
  line-height: 1.4;
  margin-left: -32px;
}

.type-hierarchy-occurrence-badge {
  padding: 4px 12px;
  margin-right: 48px;
  font-size: 12px;
  font-weight: 700;
  color: white;
  background-color: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 20px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
  contain: paint;
  transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.type-hierarchy-occurrence-badge:hover {
  background-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}

/* Note occurrence badge - match type occurrence badge styling */
.type-hierarchy-note-occurrence-badge {
  padding: 4px 12px;
  margin-right: 48px;
  font-size: 12px;
  font-weight: 700;
  color: white;
  background-color: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 20px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
  contain: paint;
  transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.type-hierarchy-note-occurrence-badge:hover {
  background-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}

.type-hierarchy-expand-icon {
  /* Hidden by default: will pop in when the row is hovered (or when expanded) */
  position: absolute;
  left: 6px; /* near the far left */
  top: 50%;
  /* start slightly left and small so it can pop-in */
  transform: translateY(-50%) translateX(-10px) scale(0.9);
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: white;
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  z-index: 6;
  cursor: pointer;
  contain: paint;
  transition: transform 180ms cubic-bezier(.2,.8,.2,1), background-color 140ms ease, opacity 160ms ease;
  opacity: 0;
  pointer-events: none;
}

/* Low performance mode: keep UI but avoid extra paints/animations */
.low-performance-mode .type-hierarchy-occurrence-badge,
.low-performance-mode .type-hierarchy-note-occurrence-badge {
  box-shadow: none;
  text-shadow: none;
  transition: none;
}

.low-performance-mode .type-hierarchy-expand-icon,
.low-performance-mode .type-hierarchy-expand-icon.select-all,
.low-performance-mode .type-hierarchy-expand-icon.partial {
  box-shadow: none;
  text-shadow: none;
  transition: none;
}

/* Hover state */
.type-hierarchy-expand-icon:hover {
  background-color: rgba(255, 255, 255, 0.06);
  transform: translateY(-50%) translateX(0) scale(1.12);
}

/* When the row is hovered, show only a subtle hint of the icon (not the full pop-in).
   Full pop-in should occur only when hovering the image itself (see sibling rule below). */
.type-hierarchy-btn:hover .type-hierarchy-expand-icon {
  /* faint visibility so users are hinted the control exists */
  opacity: 0.18;
  pointer-events: none;
  transform: translateY(-50%) translateX(-8px) scale(0.95);
}

/* Hovering the image (or its container) triggers the full existing animation so the
   expand icon pops in and becomes interactive. Use the general sibling selector
   because the icon is later in the DOM tree inside the same button. */
.type-hierarchy-image-container:hover ~ .type-hierarchy-expand-icon,
.type-hierarchy-image-container:focus-within ~ .type-hierarchy-expand-icon {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0) scale(1.08);
}

/* Hovering or focusing the expand icon itself should show it fully (same as image hover) */
.type-hierarchy-expand-icon:hover,
.type-hierarchy-expand-icon:focus {
  /* Maintain current visual state; explicit no-op for linters */
  outline: none;
}

/* When a type is explicitly selected (via clicking non-image area), keep icon fully visible */
.type-hierarchy-item.type-selected .type-hierarchy-expand-icon,
.type-hierarchy-item.type-selected .type-hierarchy-expand-icon.select-all {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(-50%) translateX(0) scale(1.08) !important;
}

/* Strong override: when a type is selected, the expand icon must remain straight
   regardless of hover or expanded state. This rule is placed after rotate rules
   and uses !important to take precedence. */
.type-hierarchy-item.type-selected .type-hierarchy-expand-icon,
.type-hierarchy-item.type-selected .type-hierarchy-expand-icon.select-all,
.type-hierarchy-item.type-selected .type-hierarchy-expand-icon:hover,
.type-hierarchy-item.type-selected .type-hierarchy-expand-icon:active,
.type-hierarchy-item.type-selected .type-hierarchy-btn:hover .type-hierarchy-expand-icon {
  transform: translateY(-50%) translateX(0) rotate(0deg) scale(1.08) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Ensure that even when the item is expanded, a selected type's icon does not rotate. */
.type-hierarchy-item.type-selected.expanded .type-hierarchy-expand-icon {
  transform: translateY(-50%) translateX(0) rotate(0deg) scale(1.08) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Prevent rotation when the expand icon shows ✓ (select-all active) or ◐ (partial).
   Only â–º should rotate when expanded. */
.type-hierarchy-expand-icon.select-all.active,
.type-hierarchy-item.expanded .type-hierarchy-expand-icon.select-all.active,
.type-hierarchy-item.type-selected .type-hierarchy-expand-icon.select-all.active,
.type-hierarchy-item.type-selected.expanded .type-hierarchy-expand-icon.select-all.active {
  transform: translateY(-50%) translateX(0) rotate(0deg) scale(1.08) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Prevent rotation when the expand icon shows ◐ (partial selection) */
.type-hierarchy-expand-icon.partial,
.type-hierarchy-item.expanded .type-hierarchy-expand-icon.partial,
.type-hierarchy-item.type-selected .type-hierarchy-expand-icon.partial,
.type-hierarchy-item.type-selected.expanded .type-hierarchy-expand-icon.partial {
  transform: translateY(-50%) translateX(0) rotate(0deg) scale(1.08) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* When expanded, show the icon and rotate it (but only if it's ► - see overrides above for ✓ and ◐) */
.type-hierarchy-item.expanded .type-hierarchy-expand-icon {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) rotate(90deg);
}

/* Ensure select-all / partial icons still show the down (rotated) arrow when
   their parent is expanded, but remain unrotated when the parent is not expanded. */
.type-hierarchy-item.expanded .type-hierarchy-expand-icon.select-all.active,
.type-hierarchy-item.expanded .type-hierarchy-expand-icon.partial {
  transform: translateY(-50%) rotate(90deg) scale(1.08) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* When expanded and the row is hovered, rotate and pop/scale together (only for â–º) */
.type-hierarchy-item.expanded .type-hierarchy-btn:hover .type-hierarchy-expand-icon {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0) rotate(90deg) scale(1.08);
}

/* Mobile: always show expand icon in a subtle hint state so users know it's a dropdown */
@media (max-width: 768px) {
  .type-hierarchy-expand-icon {
    opacity: 0.35;
    pointer-events: auto;
    transform: translateY(-50%) translateX(-4px) scale(0.95);
  }
  /* When expanded on mobile, show fully */
  .type-hierarchy-item.expanded .type-hierarchy-expand-icon {
    opacity: 1;
    transform: translateY(-50%) rotate(90deg) scale(1);
  }
}

/* When the expand icon is reused as the select-all control, apply these styles */
.type-hierarchy-expand-icon.select-all {
  width: 32px;
  height: 32px;
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255,255,255,0.9);
  contain: paint;
  transition: transform 0.18s ease, background-color 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}

/* Partial selection state when at least one child is selected but not all.
   The icon shows a subtle partial glyph and stays visible (select-mode). */
.type-hierarchy-expand-icon.partial {
  width: 32px;
  height: 32px;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.95);
  border: 1px solid rgba(255,255,255,0.12);
  contain: paint;
  transition: transform 0.18s ease, background-color 0.18s ease, color 0.18s ease, opacity 0.18s ease;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.type-hierarchy-expand-icon.select-mode {
  /* ensure the icon is visible whenever it represents selection state */
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Hover behavior for the expand icon is conditional:
   - If the row is expanded, hovering the icon rotates it down (90deg).
   - If the row is not expanded, hovering the icon keeps it facing forward.
   - If the type is explicitly selected, the icon stays straight regardless. */
.type-hierarchy-item.expanded .type-hierarchy-expand-icon:hover,
.type-hierarchy-item.expanded .type-hierarchy-btn:hover .type-hierarchy-expand-icon:hover {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(-50%) rotate(90deg) scale(1.08) !important;
}

.type-hierarchy-item:not(.expanded) .type-hierarchy-expand-icon:hover,
.type-hierarchy-item:not(.expanded) .type-hierarchy-btn:hover .type-hierarchy-expand-icon:hover {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(-50%) translateX(0) scale(1.08) !important;
}

/* Prevent select-all / partial icons from rotating on hover when not expanded. */
.type-hierarchy-expand-icon.select-all:hover,
.type-hierarchy-expand-icon.partial:hover {
  transform: translateY(-50%) translateX(0) scale(1.08) !important;
}

/* If the type is selected, keep the icon straight and fully visible. */
.type-hierarchy-item.type-selected .type-hierarchy-expand-icon,
.type-hierarchy-item.type-selected .type-hierarchy-expand-icon.select-all {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(-50%) translateX(0) scale(1.08) !important;
}

.type-hierarchy-expand-icon.select-all:hover {
  background: rgba(255,255,255,0.25);
  color: white;
  transform: translateY(-50%) scale(1.15);
}

.type-hierarchy-expand-icon.select-all.active {
  background: rgba(255, 255, 255, 0.95);
  color: #667eea;
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.25);
}

.type-hierarchy-item.expanded .type-hierarchy-expand-icon {
  transform: translateY(-50%) rotate(90deg);
  opacity: 1;
}

.type-hierarchy-notes {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: transparent;
  /* Use animated collapse instead of display:none so expand/collapse can animate */
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  transition: max-height 260ms cubic-bezier(.2,.9,.2,1), opacity 180ms ease, transform 220ms cubic-bezier(.2,.9,.2,1);
  flex-shrink: 0;
}

/* When expanded, allow the notes to reveal with a smooth downward animation */
.type-hierarchy-item.expanded .type-hierarchy-notes {
  max-height: none; /* allow full height for any number of notes */
  opacity: 1;
  transform: translateY(0);
  overflow: visible;
}

.type-hierarchy-note {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 0 0 12px;
  /* glassy card style (matches occurrence badge glass look) */
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  cursor: pointer;
  transition: all 150ms ease;
  outline: 2px solid transparent;
  outline-offset: -2px;
  height: 80px;
  min-height: 80px;
  flex-shrink: 0;
  margin-left: 20px;
  margin-right: 0;
  /* Ensure proper scroll positioning for search results */
  scroll-margin-top: 80px;
  scroll-margin-bottom: 20px;
}

.type-hierarchy-note:hover {
  background: rgba(255, 255, 255, 0.22);
  outline-color: rgba(0, 0, 0, 0.06);
  transform: translateX(6px);
}

.type-hierarchy-note.selected {
  outline: none !important;
  background: #fff;
  transform: scale(1.01);
  border-color: rgba(250, 204, 21, 0.6);
  box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.5), 0 0 15px rgba(250, 204, 21, 0.4), inset 0 0 20px rgba(250, 204, 21, 0.15) !important;
  animation: noteSelectPulse 2s ease-in-out infinite;
  position: relative;
  z-index: 1;
}

@keyframes noteSelectPulse {
  0%, 100% {
    box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.5), 0 0 15px rgba(250, 204, 21, 0.4), inset 0 0 20px rgba(250, 204, 21, 0.15) !important;
  }
  50% {
    box-shadow: 0 0 0 4px rgba(250, 204, 21, 0.7), 0 0 25px rgba(250, 204, 21, 0.6), inset 0 0 25px rgba(250, 204, 21, 0.2) !important;
  }
}

.type-hierarchy-note-image-container {
  width: 64px;
  height: 64px;
  min-width: 64px;
  min-height: 64px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  border: 2px solid rgba(0,0,0,0.1);
}
.type-hierarchy-note-image-container::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  pointer-events: auto;
}

.type-hierarchy-note-image {
  width: 64px;
  height: 64px;
  min-width: 64px;
  min-height: 64px;
  object-fit: cover;
  object-position: center;
  display: block;
}

.type-hierarchy-note-label {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  max-width: 100%;
}

/* Mobile Type Scrubber for Hierarchy List */
#type-hierarchy-scrubber {
  /* Positioned overlay that sits on top of the list (doesn't consume layout space). */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 40px; /* touch-friendly width */
  z-index: 30; /* above the list */
  display: none;
  touch-action: none;
}

@media (max-width: 900px) and (hover: none) and (pointer: coarse), (orientation: portrait) and (max-width: 720px) and (max-height: 1280px) {
  
  .type-hierarchy-list {
    padding-right: 40px;
    position: relative;
  }
  
  /* Make type hierarchy fill screen on mobile */
  #types-hierarchy-section {
    max-height: 70vh;
  }
  
  .type-hierarchy-note {
    margin-left: 10px;
  }
  
  .type-hierarchy-image-container {
    width: 140px;
    min-width: 140px;
  }
  
  .type-hierarchy-image {
    width: 140px;
    min-width: 140px;
  }
  
  .type-hierarchy-note-image-container {
    width: 140px;
    height: 80px;
    min-width: 140px;
    min-height: 80px;
  }
  
  .type-hierarchy-note-image {
    width: 140px;
    height: 80px;
    min-width: 140px;
    min-height: 80px;
    mask-image: linear-gradient(to right, black 0%, black 75%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 0%, black 75%, transparent 100%);
    min-width: 72px;
    min-height: 72px;
  }
}

#type-hierarchy-scrubber {
  /* overlay variant — keep pointer events so the track can be used */
  display: none;
  position: absolute;
  top: 0;
  bottom: 0; /* Extend to full height */
  height: auto;
  right: 0;
  width: 40px; /* Wider touch zone */
  z-index: 30;
  pointer-events: auto; /* Make entire scrubber area interactive */
  transition: top 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Adjust scrubber position when search overlay is visible */
#types-hierarchy-section.search-overlay-visible #type-hierarchy-scrubber {
  top: 54px; /* Height of search overlay + some padding */
}

#type-hierarchy-scrubber .track {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 12px;
  width: 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.45);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
  pointer-events: auto;
  cursor: pointer;
}

#type-hierarchy-scrubber .tick {
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(0,0,0,0.25);
  border-radius: 1px;
  opacity: 0.7;
  transition: background 200ms ease, height 150ms ease, opacity 150ms ease;
}

#type-hierarchy-scrubber .tick.active {
  height: 4px;
  background: rgba(0,0,0,0.65);
  opacity: 1;
}

/* When the underlying type is fully selected, show yellow accent */
#type-hierarchy-scrubber .tick.selected {
  height: 4px;
  background: rgba(250, 204, 21, 0.9);
  opacity: 1;
  box-shadow: 0 0 6px rgba(250, 204, 21, 0.6);
}

/* When the underlying type is partially selected, show orange accent */
#type-hierarchy-scrubber .tick.partial {
  height: 4px;
  background: rgba(249, 115, 22, 0.9);
  opacity: 1;
  box-shadow: 0 0 6px rgba(249, 115, 22, 0.6);
}

/* When the tick corresponds to a search match, show green accent */
#type-hierarchy-scrubber .tick.search-match {
  height: 5px;
  background: rgba(34, 197, 94, 0.9);
  opacity: 1;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.7);
}

/* When a tick is both the active one and its type is selected, make it stronger/brighter */
#type-hierarchy-scrubber .tick.active.selected {
  background: rgba(250, 204, 21, 1);
  box-shadow: 0 0 10px rgba(250, 204, 21, 0.8);
}

/* Active + partial */
#type-hierarchy-scrubber .tick.active.partial {
  background: rgba(249, 115, 22, 1);
  box-shadow: 0 0 10px rgba(249, 115, 22, 0.8);
}

/* Active + search match */
#type-hierarchy-scrubber .tick.active.search-match {
  background: rgba(34, 197, 94, 1);
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.9);
}

#type-hierarchy-scrubber .indicator {
  position: absolute;
  right: 28px; /* Closer to the scrubber track */
  /* top position is set dynamically by JavaScript */
  transform: translateY(-50%) scale(0.98);
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(8px);
  color: #333;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease, transform 120ms ease, top 120ms ease;
  white-space: nowrap;
  z-index: 12;
  min-width: 40px;
  text-align: center;
}

#type-hierarchy-scrubber .indicator.show {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

.filter-section-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.filter-sort-select {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-sm);
  font-size: 11px;
  background: var(--surface);
  color: var(--text-primary);
  cursor: pointer;
}

.filter-sort-select:focus {
  outline: none;
  border-color: var(--primary);
}

/* Season Grid */
.season-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.season-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.2s;
}

.season-btn:hover {
  border-color: var(--border-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.season-btn.selected {
  background: var(--primary-light);
  border-color: var(--primary);
}

.season-icon {
  font-size: 32px;
}

.season-btn span:last-child {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

/* Performance Controls */
.perf-control {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.perf-control label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.perf-control select {
  padding: 10px 12px;
  font-size: 13px;
  color: var(--text-primary);
  background: var(--surface);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s;
}

.perf-control select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}

/* Gender Grid */
.gender-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.gender-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 12px;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.2s;
}

.gender-btn:hover {
  border-color: var(--border-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.gender-btn.selected {
  background: var(--primary-light);
  border-color: var(--primary);
}

.gender-icon {
  font-size: 28px;
}

.gender-btn span:last-child {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

/* ===== CENTER PANEL: MATCHES ===== */
#results {
  display: flex;
  flex-direction: column;
  background: transparent;
  overflow: hidden;
}

/* Desktop: page-based navigation without scrollbar */
@media (min-width: 900px) {
  #results { min-height: 0; }
  .match-grid { min-height: 0; overflow: hidden; }
}

.results-header {
  padding: 6px 8px; /* reduced to very small paddings per request */
  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  min-height: 64px;
}

/* Optimize transform performance for mobile header sliding */
.results-header {
  will-change: transform;
}

/* Right-aligned controls within results header (in-flow, not overlay) */
.results-header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

/* Let title take remaining space so right-side controls stay right-aligned */
.results-title {
  flex: 1 1 auto;
}

.results-header-dropdown-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px; /* tighter */
  margin: 0;
  padding: 0;
  font-size: 12px; /* reduce inherited sizing */
}

.results-header-dropdown-stack .lang-dropdown-trigger,
.results-header-dropdown-stack .sort-dropdown-trigger {
  padding: 4px;
  margin: 0;
}

.results-header-dropdown-stack .lang-globe-icon { font-size: 14px; }
.results-header-dropdown-stack .lang-code { font-size: 9px; }
.results-header-dropdown-stack .sort-icon-trigger { width: 16px; height: 16px; }

/* Slightly tighten right-side controls */
.results-header-right .btn-shop {
  gap: 6px;
  padding: 5px 8px;
  font-size: 12px;
}

.results-header-right .shop-icon { font-size: 14px; }

.results-header-right .shop-badge {
  min-width: 18px;
  padding: 1px 6px;
  font-size: 11px;
}

.results-header-right .performance-slider-container {
  gap: 5px;
  padding: 6px 8px;
  border-radius: 16px;
}

.results-header-right .performance-slider {
  width: 64px;
  height: 5px;
}

.results-header-right .perf-icon {
  width: 16px;
  height: 16px;
}

.results-header-right .perf-mode-label {
  font-size: 12px;
}

.results-header-right .switcher-trigger {
  padding: 4px;
  border-radius: 9px;
  font-size: 12px;
}

.results-header-right .switcher-trigger .switcher-trigger-icon { width: 18px; height: 18px; }
.results-header-right .switcher-trigger .switcher-trigger-caret { font-size: 11px; }

/* Keep language and sort triggers same size */
.results-sort-dropdown,
.results-lang-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 40px; /* smaller */
}

.sort-dropdown-trigger,
.lang-dropdown-trigger {
  width: 40px;
  min-width: 40px;
  padding: 4px; /* tighter */
  height: 36px;
}

.lang-dropdown-trigger {
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 6px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 180ms ease;
}

.lang-globe-icon { font-size: 18px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.22)); }
.lang-code { font-size: 10px; font-weight: 800; letter-spacing: 0.06em; color: rgba(255,255,255,0.95); line-height: 1; text-shadow: 0 1px 2px rgba(0,0,0,0.65); }

/* Shop button (now a dropdown trigger) */
.btn-shop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  color: inherit;
  cursor: pointer;
  font-size: 13px;
}

.btn-shop:hover { transform: translateY(-1px); }

.btn-shop.active {
  background: rgba(255,255,255,0.06);
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}

.shop-badge {
  display: inline-block;
  min-width: 20px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  font-size: 12px;
  color: inherit;
  text-align: center;
}

.shop-icon { font-size: 16px; }

/* Clear-cart small button (now inside shop dropdown panel) */
.btn-shop-clear {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.04);
  color: inherit;
  cursor: pointer;
  font-size: 12px;
}

.btn-shop-clear:hover { transform: translateY(-1px); }

.btn-shop-clear.disabled,
.btn-shop-clear:disabled {
  opacity: 0.5;
  cursor: default;
  transform: none;
}

.shop-clear-icon { font-size: 14px; }

/* Shop dropdown panel */
/* Hide cart UI when cart system is disabled in admin (body.cart-disabled) */
body.cart-disabled .shop-dropdown,
body.cart-disabled #detail-cart-overlay,
body.cart-disabled .match-footer,
body.cart-disabled a[href="checkout.php"] {
  display: none !important;
}

.shop-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
}

.shop-dropdown-panel {
  /* Render as a floating fixed panel so it can escape parent stacking contexts */
  position: fixed;
  top: 0; /* positioned by JS when opened */
  left: 0;
  min-width: 160px;
  padding: 6px;
  border-radius: 10px;
  background: rgba(20,20,30,0.95);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  /* float above everything (use very high z-index consistent with other overlays) */
  z-index: 100500;
  display: none;
  will-change: transform, opacity;
}

.shop-dropdown.open .shop-dropdown-panel {
  display: block;
}

/* Also support aria-hidden for programmatic show/hide like .switcher-menu */
.shop-dropdown-panel[aria-hidden="false"] {
  display: flex;
  flex-direction: column;
}

.shop-dropdown-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

/* Small toggle button to show only cart items */
.btn-shop-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.04);
  color: inherit;
  cursor: pointer;
  font-size: 12px;
  position: relative;
}
.btn-shop-filter[aria-pressed="true"], .btn-shop-filter.selected { background: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.04)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.02); }
.btn-shop-filter .shop-filter-label { display: none; }
@media (min-width: 720px){ .btn-shop-filter .shop-filter-label { display: inline; } }

/* On/Off pill indicator */
.shop-filter-indicator {
  margin-left: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.03);
  transition: all 160ms ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  text-align: center;
}

/* Active state */
.btn-shop-filter[aria-pressed="true"] .shop-filter-indicator {
  background: linear-gradient(135deg, #24b47e, #1da464);
  color: white;
  box-shadow: 0 6px 12px rgba(29,164,100,0.18);
}
.btn-shop-filter[aria-pressed="true"] .shop-filter-indicator::after { content: none; }

/* Inactive state */
.btn-shop-filter[aria-pressed="false"] .shop-filter-indicator::after { content: none; }

.btn-shop-filter:focus-visible { outline: 2px solid rgba(139,92,246,0.28); outline-offset: 2px; }

.btn-shop-checkout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  color: inherit;
  cursor: pointer;
  font-size: 12px;
}

.shop-items-scroll {
  max-height: 220px;
  overflow: auto;
  padding-right: 4px;
}

.shop-items-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.shop-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}

.shop-item-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.shop-item-name {
  font-size: 12px;
  line-height: 1.15;
  color: rgba(255,255,255,0.95);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shop-item-meta {
  font-size: 11px;
  color: rgba(255,255,255,0.75);
}

.shop-item-price { font-weight: 600; color: rgba(255,255,255,0.95); }
.shop-item-price-note { font-size: 11px; color: rgba(255,255,255,0.68); margin-left: 8px; white-space: nowrap; }

.shop-dropdown-footer { border-top: 1px solid rgba(255,255,255,0.04); margin-top: 10px; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.shop-total-row { display:flex; align-items:center; gap:10px; }
.shop-total-label { font-size:12px; color: rgba(255,255,255,0.85); }
.shop-total-amount { font-weight:700; font-size:14px; color: rgba(255,255,255,0.96); }

.btn-shop-checkout-primary {
  --btn-bg-1: #7b61ff;
  --btn-bg-2: #5b46d8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--btn-bg-1), var(--btn-bg-2));
  color: white;
  border: none;
  box-shadow: 0 6px 18px rgba(91,70,216,0.22), 0 1px 0 rgba(255,255,255,0.04) inset;
  cursor: pointer;
  font-weight:600;
  transition: transform 140ms ease, box-shadow 140ms ease, opacity 120ms ease;
}
.btn-shop-checkout-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(91,70,216,0.28); }
.btn-shop-checkout-primary.disabled, .btn-shop-checkout-primary:disabled { opacity: 0.45; cursor: default; transform: none; box-shadow: none; }

@media (max-width: 480px) {
  .shop-dropdown-footer { flex-direction: column-reverse; align-items: stretch; }
  .btn-shop-checkout-primary { width: 100%; }
}
.shop-item-remove {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  color: inherit;
  cursor: pointer;
}

.shop-item-remove:hover {
  background: rgba(255,255,255,0.05);
}

/* When the mobile results header is fully hidden, ensure header-attached menus/controls also disappear */
@media (max-width: 900px) and (hover: none) and (pointer: coarse), (orientation: portrait) and (max-width: 720px) and (max-height: 1280px) {
  /* hide header controls when header hidden (menus are closed via JS) */
  body.mobile-results-header-hidden .results-lang-dropdown,
  body.mobile-results-header-hidden .results-lang-dropdown .lang-dropdown-trigger,
  body.mobile-results-header-hidden .results-sort-dropdown,
  body.mobile-results-header-hidden .results-sort-dropdown .sort-dropdown-trigger {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

.lang-dropdown-trigger:focus { outline: none; box-shadow: 0 6px 16px rgba(0,0,0,0.16); }

.lang-dropdown-trigger:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.lang-dropdown-trigger[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

.lang-globe-icon { font-size: 16px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.22)); }
.lang-code { font-size: 10px; font-weight: 800; letter-spacing: 0.06em; color: rgba(255,255,255,0.95); line-height: 1; text-shadow: 0 1px 2px rgba(0,0,0,0.65); }

.lang-dropdown-menu {
  min-width: 180px; /* match sort menu width */
  padding: 6px;
  border-radius: 10px;
  background: rgba(20,20,30,0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.2);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transform-origin: top right;
  transition: transform 160ms ease, opacity 160ms ease;
}

/* Hide the menu when aria-hidden is true; show when false - match sort dropdown behavior */
.lang-dropdown-menu[aria-hidden="true"] {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  pointer-events: none;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.lang-dropdown-menu[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.lang-dropdown-item {
  text-align: left;
  padding: 10px 12px; /* match sort item spacing */
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  border: none;
}

.lang-dropdown-item:hover { background: rgba(255,255,255,0.03); transform: translateY(-1px); }

/* make items match sort dropdown hover/active visuals */
.lang-dropdown-item.active { background: rgba(139,92,246,0.12); color: #a78bfa; font-weight:600; }

/* Hide legacy selector if present */
.results-lang-selector { display: none !important; }

.sort-dropdown-trigger {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--text-muted);
}

.sort-dropdown-trigger:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.sort-dropdown-trigger[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

.sort-icon-trigger {
  width: 18px;
  height: 18px;
  transition: transform 0.25s;
}

.sort-dropdown-trigger[aria-expanded="true"] .sort-icon-trigger {
  transform: rotate(90deg);
}

.sort-dropdown-menu {
  position: absolute;
  /* Open downward from the trigger (place menu below trigger) */
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  background: rgba(20, 20, 30, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  /* start slightly higher so it animates down into place */
  transform: translateY(-8px);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

.sort-dropdown-menu[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.sort-dropdown-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
  font-size: 13px;
}

.sort-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}

.sort-dropdown-item.active {
  background: rgba(139, 92, 246, 0.15);
  color: #a78bfa;
  font-weight: 600;
}

.sort-dropdown-item.active .sort-item-icon {
  color: #a78bfa;
}

.sort-item-icon {
  flex-shrink: 0;
  opacity: 0.8;
  transition: all 0.2s;
}

.sort-dropdown-item:hover .sort-item-icon {
  opacity: 1;
  transform: scale(1.1);
}

.sort-item-text {
  flex: 1;
}

/* Ensure layout remains responsive: move dropdown under title on narrow screens */
@media (max-width: 520px) {
  .results-header-right {
    gap: 10px;
  }
}

.results-title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.results-title h3 {
  font-size: 30px;
  font-weight: 700;
  color: #fff;
}

/* Language Selector in Results Header */
.results-lang-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08),
              inset 0 1px 1px rgba(255, 255, 255, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.results-lang-selector:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12),
              inset 0 1px 1px rgba(255, 255, 255, 0.4);
}

.results-lang-selector .lang-globe-icon {
  font-size: 16px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.results-lang-selector .lang-select-dropdown {
  font-size: 12px;
}

.matches-search-inline {
  width: 180px;
  height: 28px;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 500;
  color: black;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 14px;
  transition: all 0.3s ease;
  outline: none;
}

.matches-search-inline::placeholder {
  color: rgba(0, 0, 0, 0.5);
}

.matches-search-inline:focus {
  background: rgba(255, 255, 255, 0.35);
  border-color: rgba(139, 92, 246, 0.6);
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.3);
}

.count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: rgba(139, 92, 246, 0.8);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: 999px;
}

/* `.results-controls` was removed from the HTML; no styles needed. */

.matches-search-box {
  padding: 0 20px 16px 20px;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.matches-search-box input {
  width: 100%;
  padding: 10px 16px;
  font-size: 14px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #000;
  transition: all 0.2s;
}

.matches-search-box input:focus {
  outline: none;
  border-color: rgba(139, 92, 246, 0.8);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
}

.nav-btn {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  font-size: 20px;
  color: #000;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s;
}

.nav-btn:hover:not([disabled]) {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(139, 92, 246, 0.8);
  color: rgba(139, 92, 246, 1);
}

.nav-btn[disabled] {
  opacity: 0.3;
  cursor: not-allowed;
}

.page-info {
  font-size: 13px;
  font-weight: 600;
  color: #000;
  min-width: 70px;
  text-align: center;
}

.btn-clear-sm {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #000;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s;
}

.btn-clear-sm:hover {
  background: rgba(255, 255, 255, 0.8);
  color: rgba(139, 92, 246, 1);
}

/* Match Grid */
.match-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 8px;
  overflow-y: auto;
  flex: 1;
}

/* Match-list smooth scrollbox + bottom shadow gradient */
#match-list {
  position: relative; /* needed for ::after overlay */
  --matchListShadowOpacity: 0;
  /* Ensure #match-list acts as the scroll container and not a grid itself.
     This prevents the outer `.match-grid` rule from placing the single
     `.match-list-smooth-content` wrapper into one grid cell. */
  display: block;
  overflow-y: auto;
  /* Enable native smooth scrolling for programmatic and anchor navigation */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  flex: 1;
}

/* Use a CSS-driven responsive grid: `auto-fit` with a CSS variable
   `--match-min-width` controls the minimum card width. JS updates
   `--match-min-width` via `updateMatchesColumns()` so the grid can
   naturally layout 1..3 columns depending on the container size. */
#match-list .match-list-smooth-content {
  display: grid;
  /* reduce the default minimum card width so fewer columns are forced,
     and tighten gaps/padding so each card gets more horizontal space */
  grid-template-columns: repeat(auto-fit, minmax(var(--match-min-width, 280px), 1fr));
  gap: 4px;
  padding: 4px;
  will-change: transform;
}

/* Friendly no-results overlay inside the smooth-content host. We use
   a separate class so we can avoid destroying list DOM and the sentinel
   when there are zero results. */
#match-list .match-list-no-results-overlay {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--text-muted);
  text-align: center;
  font-size: 15px;
  z-index: 3; /* make sure it's above other grid children */
  position: absolute; /* overlay the whole match-list */
  left: 0; right: 0; top: 0; bottom: 0;
  display: flex; /* already set, but explicitly state to ensure it's centered */
  pointer-events: auto;
  background: rgba(0,0,0,0.02); /* subtle fallback background */
}
#match-list .match-list-no-results-overlay .match-list-no-results-title { line-height: 1.3; }

/* Ensure mobile always shows a single column and full-width cards.
   Inline styles from JS may update columns, but this provides a robust
   CSS fallback for narrow viewports or in environments where JS runs
   later than CSS. */
@media (max-width: 520px) {
  #match-list .match-list-smooth-content {
    grid-template-columns: 1fr !important;
    padding: 8px !important;
    gap: 8px !important;
  }
  #match-list .match-list-smooth-content .match-card {
    width: 100% !important;
    display: block !important;
  }

  /* Keep match cards taller on mobile to match desktop visual density */
  .match-card {
    min-height: 420px !important; /* mirror desktop min-height */
    padding-bottom: 80px !important; /* ensure footer space */
  }

  /* If cards are virtualized/slimmed, still allow them to reserve full height */
  .match-card--slim, .match-card.match-card--slim {
    min-height: 420px !important;
  }
}

/* Mobile compact filter overlay styling */
@media (max-width: 520px), (max-height: 520px) and (orientation: landscape) {
  .compact-filter-bar {
    position: fixed;
    left: 12px;
    right: 12px;
    top: 0;
    width: calc(100% - 24px);
    border-radius: 12px;
    transform: translateY(-90%);
    transition: transform 220ms cubic-bezier(.2,.9,.2,1), box-shadow 180ms ease;
    z-index: 2000;
    will-change: transform;
    padding-bottom: 48px; /* Extra space for drag handle */
  }
  /* compact-overlay-visible: transform is now controlled entirely by JS during drag */
  .compact-filter-bar .compact-drag-handle {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 12px;
    width: 80px;
    height: 6px;
    border-radius: 6px;
    background: rgba(255,255,255,0.35);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
    cursor: grab;
    z-index: 3;
    touch-action: pan-y;
  }
  /* Larger invisible hitbox for easier touch */
  .compact-filter-bar .compact-drag-handle::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 60px;
    background: transparent;
    cursor: grab;
  }
  .compact-filter-bar.compact-drag-handle:active,
  .compact-filter-bar .compact-drag-handle:active::before { cursor: grabbing; }
  
  /* Note: compact-overlay-visible class is toggled by JS; transform is controlled by JS during drag */
}

/* Desktop-mobile (portrait sub-HD on desktop): reuse the same compact overlay UX even when
   the viewport width is >520px. Without this, the compact-filter-bar looks/behaves like a
   desktop dropdown and the layout feels “decentered” due to mixed mobile/desktop styles. */
body.desktop-mobile-mode .compact-filter-bar {
  position: fixed;
  left: 12px;
  right: 12px;
  top: 0;
  width: calc(100% - 24px);
  border-radius: 12px;
  transform: translateY(-90%);
  transition: transform 220ms cubic-bezier(.2,.9,.2,1), box-shadow 180ms ease;
  z-index: 2000;
  will-change: transform;
  padding-bottom: 48px;
}
body.desktop-mobile-mode .compact-filter-bar .compact-drag-handle {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 12px;
  width: 80px;
  height: 6px;
  border-radius: 6px;
  background: rgba(255,255,255,0.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
  cursor: grab;
  z-index: 3;
  touch-action: pan-y;
}
body.desktop-mobile-mode .compact-filter-bar .compact-drag-handle::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 60px;
  background: transparent;
  cursor: grab;
}
body.desktop-mobile-mode .compact-filter-bar.compact-drag-handle:active,
body.desktop-mobile-mode .compact-filter-bar .compact-drag-handle:active::before { cursor: grabbing; }

/* Make unified-filters occupy the full filter area on mobile so the compact bar can overlay it */
@media (max-width: 520px), (max-height: 520px) and (orientation: landscape) {
  /* Ensure the scroll container is positioned for absolute children */
  .filter-content {
    position: relative;
    height: 100dvh;
    overflow: hidden;
    -webkit-overflow-scrolling: auto;
  }

  /* Let unified-filters fill the content area and be independently scrollable */
  .filter-content > .unified-filters {
    position: absolute;
    inset: 0 0 0 0; /* top/right/bottom/left = 0 */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    padding: 12px;
    z-index: 1; /* behind the compact overlay */
    display: flex;
    flex-direction: column;
  }

  /* Make the filter-section fill the parent */
  .unified-filters > .filter-section {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
  }

  /* Mobile: hide the floating search button (redundant on small screens)
     and use scroll-driven overlay behavior: the overlay is positioned
     at the bottom and shown/hidden by JS via the `.visible` class. */
  .unified-filters .type-hierarchy-search-button {
    display: none !important;
  }

  /* Ensure the overlay styles also apply when the overlay has been
     moved to `document.body` (JS moves it on mobile). This duplicates
     the fixed-bottom behavior keyed to the global selector so the
     rules apply regardless of the overlay's parent. */
  .type-hierarchy-search-button {
    display: none !important;
  }

  .unified-filters .type-hierarchy-search-overlay {
    /* use fixed positioning on mobile so the overlay is outside the
       scrollable list and reliably focusable */
    position: fixed !important;
    top: auto !important;
    bottom: 12px !important;
    left: 12px !important;
    right: 12px !important;
    border-radius: 12px !important;
    padding: 12px !important;
    /* hide below the viewport by default when anchored to bottom */
    transform: translateY(110%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: 3000 !important;
    transition: transform 200ms cubic-bezier(.2,.8,.2,1), opacity 200ms ease;
  }

  /* Global overlay rule for when the overlay is attached to body */
  .type-hierarchy-search-overlay {
    position: fixed !important;
    top: auto !important;
    bottom: 12px !important;
    left: 12px !important;
    right: 12px !important;
    border-radius: 12px !important;
    padding: 12px !important;
    transform: translateY(110%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: 3000 !important;
    transition: transform 200ms cubic-bezier(.2,.8,.2,1), opacity 200ms ease;
  }

  /* Hide the small in-bar arrows on mobile - we'll show larger floating ones */
  .unified-filters .type-hierarchy-search-arrow { display: none !important; }

  /* Floating mobile arrows: attached to the overlay and placed just above it.
     Hidden by default; JS toggles `.visible` when a search with matches is active. */
  .type-hierarchy-mobile-arrows {
    position: absolute;
    right: 12px;
    bottom: calc(100% + 8px);
    display: none;
    flex-direction: column;
    gap: 10px;
    z-index: 4001;
    pointer-events: auto;
  }

  .type-hierarchy-mobile-arrows.visible { display: flex; }

  .type-hierarchy-mobile-arrow {
    width: 64px;
    height: 64px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.28);
    background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.72));
    color: #111;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.32);
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    cursor: pointer;
  }

  .type-hierarchy-mobile-arrow:active { transform: translateY(1px) scale(0.98); }

  /* When JS toggles `.visible` the overlay will slide up into view */
  .unified-filters .type-hierarchy-search-overlay.visible {
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Give the list a safe bottom padding so the last items aren't obscured */
  .unified-filters .type-hierarchy-list {
    /* account for the fixed overlay height + safe area; keep room so
       last items are tappable */
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Make the search input larger and easier to tap on mobile */
  .unified-filters .type-hierarchy-search-input {
    height: 48px !important;
    font-size: 16px !important;
    padding: 0 16px 0 16px !important;
    border-radius: 10px !important;
    padding-right: 80px !important; /* reserve space for counter/nav */
    box-sizing: border-box !important;
  }

  .unified-filters .type-hierarchy-search-field { height: 48px !important; }
  
  
  /* Ensure types-hierarchy-section takes full height */
  .unified-filters > #types-hierarchy-section {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    max-height: none; /* override earlier max-height rules */
    height: 100%;
  }

  /* Make type-hierarchy-list fill the section */
  #types-hierarchy-section > #type-hierarchy-list {
    /* Position absolutely to exactly match the scrubber height and fill the section */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
  }
  
  /* Ensure any residual max-height or positioning on the class selector is cleared */
  .unified-filters .type-hierarchy-list {
    max-height: none !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    overflow-y: auto !important;
  }

  /* Ensure other elements such as the header don't visually overlap; keep header above unified-filters but below the compact-bar */
  .filter-content > .filter-header {
    position: relative;
    z-index: 2;
  }

  /* When the compact bar is visible it should sit above everything */
  .compact-filter-bar {
    z-index: 2000;
    pointer-events: auto;
  }
}

/* Desktop-mobile needs the same filter-content/unified-filters overlay structure as mobile. */
body.desktop-mobile-mode .filter-content {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  overflow: hidden;
  -webkit-overflow-scrolling: auto;
}
body.desktop-mobile-mode .filter-content > .unified-filters {
  position: absolute;
  inset: 0 0 0 0;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  padding: 12px;
  z-index: 1;
  display: flex;
  flex-direction: column;
}
body.desktop-mobile-mode .unified-filters > .filter-section {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
body.desktop-mobile-mode .unified-filters .type-hierarchy-search-button {
  display: none !important;
}

/* Desktop-mobile: the types hierarchy should fill the whole filters pane.
   Override mobile tuning like `max-height: 70vh` that leaves empty space. */
body.desktop-mobile-mode #types-hierarchy-section {
  flex: 1 1 auto;
  min-height: 0;
  height: 100% !important;
  max-height: none !important;
  overflow: hidden;
  position: relative;
}

body.desktop-mobile-mode #type-hierarchy-list,
body.desktop-mobile-mode .type-hierarchy-list {
  flex: 1 1 auto;
  min-height: 0;
  height: 100% !important;
  max-height: none !important;
  overflow-y: auto;
  padding-right: 40px;
  position: relative;
}

/* Desktop-mobile: ensure list fills the section even if mobile rules used an
   ID>ID selector with higher specificity. */
body.desktop-mobile-mode #types-hierarchy-section > #type-hierarchy-list {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 40px;
}

body.desktop-mobile-mode #type-hierarchy-scrubber {
  top: 0;
  bottom: 0;
  height: auto;
}

/* Desktop-mobile: when the compact overlay is minimized, the visible grab strip
   can sit on top of the filters pane. Offset the type hierarchy list + scrubber
   so top items/ticks remain reachable. */
body.desktop-mobile-mode:not(.compact-overlay-open) #types-hierarchy-section {
  padding-top: var(--compact-grab-height, 28px);
}
body.desktop-mobile-mode:not(.compact-overlay-open) #type-hierarchy-list,
body.desktop-mobile-mode:not(.compact-overlay-open) .type-hierarchy-list {
  scroll-padding-top: var(--compact-grab-height, 28px);
}
body.desktop-mobile-mode:not(.compact-overlay-open) #types-hierarchy-section > #type-hierarchy-list {
  top: var(--compact-grab-height, 28px);
}
body.desktop-mobile-mode:not(.compact-overlay-open) #type-hierarchy-scrubber {
  top: var(--compact-grab-height, 28px);
}
body.desktop-mobile-mode:not(.compact-overlay-open) #types-hierarchy-section.search-overlay-visible #type-hierarchy-scrubber {
  top: calc(54px + var(--compact-grab-height, 28px));
}

/* Desktop-mobile: force the same “single-column, full-width cards” behavior as mobile.
   (Some list layouts are keyed off max-width:520px, which won't match here.) */
body.desktop-mobile-mode #match-list .match-list-smooth-content {
  grid-template-columns: 1fr !important;
  padding: 8px !important;
  gap: 8px !important;
}
body.desktop-mobile-mode #match-list .match-list-smooth-content .match-card {
  width: 100% !important;
  display: block !important;
}

/* Skeleton shimmer for slimmed match cards */
.match-virt-placeholder {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: linear-gradient(0deg, rgba(255,255,255,0.08), rgba(255,255,255,0.14));
}
.match-virt-placeholder::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  animation: matchShimmer 1.25s infinite;
}
@keyframes matchShimmer {
  100% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .match-virt-placeholder::before { animation: none; display: none; }
  /* Ensure match cards are visible when animations are reduced */
  .match-card--new {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
}

#match-list::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 56px; /* shadow height */
  pointer-events: none;
  /* Darken bottom with vertical gradient; opacity is driven by JS via CSS var */
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%);
  opacity: var(--matchListShadowOpacity, 0);
  transition: opacity 120ms ease;
  z-index: 2; /* above cards */
}

/* =============================
   Match-card styling (MatchCardTest design)
   ============================= */

.match-card{
  /* make card surface largely transparent while keeping the splatter gradient overlay */
  /* background can be customized via --card-bg (set by JS to the primary accord color) */
  background: var(--card-bg, transparent);
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  border: 1.5px solid transparent;
  border-radius: var(--radius, 16px);
  padding: 12px 12px 80px;
  min-height: 420px;
  cursor: pointer;
  transition: transform 200ms ease, background 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
  position: relative;
  overflow: hidden;
  box-shadow: 
    inset 2px 2px 5px rgba(255, 255, 255, 0.05),
    inset -2px -2px 5px rgba(0, 0, 0, 0.3),
    0 12px 24px rgba(0, 0, 0, 0.4);
  will-change: transform, box-shadow, border-color, backdrop-filter;
  contain: content;
}

/* Quality-based Glassy Neumorphic Borders */
.match-card[data-quality="top"] {
  --quality-outline: rgba(255, 90, 95, 0.95);
  box-shadow: 
    inset 0 0 20px rgba(255, 90, 95, 0.12),
    inset 2px 2px 5px rgba(255, 255, 255, 0.1),
    0 15px 35px rgba(255, 90, 95, 0.18);
}

.match-card[data-quality="delux"],
.match-card[data-quality="deluxe"] {
  --quality-outline: rgba(212, 175, 55, 0.95);
  box-shadow: 
    inset 0 0 20px rgba(212, 175, 55, 0.12),
    inset 2px 2px 5px rgba(255, 255, 255, 0.1),
    0 15px 35px rgba(212, 175, 55, 0.18);
}

/* Premium Gold Border for DELUX */
.match-card[data-quality="delux"]::after,
.match-card[data-quality="deluxe"]::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(
    110deg, 
    #b8860b 0%, 
    #e6be8a 15%, 
    #d4af37 30%, 
    #fff9aa 45%, 
    #fff9aa 55%,
    #d4af37 70%, 
    #e6be8a 85%, 
    #b8860b 100%
  );
  background-size: 200% auto;
  -webkit-mask: 
     linear-gradient(#fff 0 0) content-box, 
     linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 400ms ease;
  pointer-events: none;
  z-index: 3;
  will-change: opacity, background-position;
}

.match-card[data-quality="eg"], .match-card[data-quality="standard"], .match-card[data-quality="normal"] {
  --quality-outline: rgba(90, 120, 170, 0.95);
  box-shadow: 
    inset 0 0 20px rgba(90,120,170,0.12),
    inset 2px 2px 5px rgba(255, 255, 255, 0.1),
    0 15px 35px rgba(90,120,170,0.18);
} 

.match-card:hover{
  transform: translateY(-4px) scale(1.01);
  box-shadow: 
    inset 3px 3px 7px rgba(255, 255, 255, 0.08),
    inset -3px -3px 7px rgba(0, 0, 0, 0.4),
    0 20px 40px rgba(0, 0, 0, 0.5);
}

.match-card[data-quality="top"]:hover {
  border-color: rgba(255, 90, 95, 0.45);
  box-shadow: 
    inset 0 0 25px rgba(255, 90, 95, 0.18),
    inset 3px 3px 7px rgba(255, 255, 255, 0.12),
    0 20px 45px rgba(255, 90, 95, 0.25);
}

.match-card[data-quality="delux"]:hover,
.match-card[data-quality="deluxe"]:hover {
  box-shadow: 
    inset 0 0 30px rgba(212, 175, 55, 0.25),
    inset 3px 3px 7px rgba(255, 255, 255, 0.15),
    0 25px 50px rgba(212, 175, 55, 0.3),
    0 0 15px rgba(212, 175, 55, 0.2);
}

.match-card[data-quality="delux"]:hover::after,
.match-card[data-quality="deluxe"]:hover::after {
  opacity: 1;
  animation: gold-shimmer 3s linear infinite;
}

@keyframes gold-shimmer {
  0% { background-position: 200% center; }
  100% { background-position: -200% center; }
}

.match-card[data-quality="eg"]:hover, .match-card[data-quality="standard"]:hover, .match-card[data-quality="normal"]:hover {
  border-color: rgba(90,120,170,0.45);
  box-shadow: 
    inset 0 0 25px rgba(90,120,170,0.18),
    inset 3px 3px 7px rgba(255, 255, 255, 0.12),
    0 20px 45px rgba(90,120,170,0.25);
}

.match-card::before{
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.28;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.10) 0%, transparent 60%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.02) 100%);
  z-index: 0;
}

.match-card > *{ position: relative; z-index: 2; }

/* Selected card base - purple background (default). Quality-specific rules still control border/glow */
.match-card.selected {
  transform: translateY(-6px) scale(1.03);
  animation: liquidPulse 2.5s ease-in-out infinite;
  z-index: 10;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.5) 0%, rgba(168, 85, 247, 0.45) 50%, rgba(102, 126, 234, 0.5) 100%);
  border-color: rgba(255, 255, 255, 0.8);
  box-shadow:
    0 0 0 3px rgba(139, 92, 246, 0.7),
    0 0 30px rgba(139, 92, 246, 0.4),
    0 12px 32px rgba(0, 0, 0, 0.15);
}

/* Keep selected card purple on hover */
.match-card.selected:hover { background: linear-gradient(135deg, rgba(139, 92, 246, 0.55) 0%, rgba(168, 85, 247, 0.5) 50%, rgba(102, 126, 234, 0.55) 100%); }

/* Selected styling that matches the card's quality color (only border/glow/box-shadow) */
.match-card.selected[data-quality="top"] {
  border-color: rgba(255,90,95,0.9);
  box-shadow:
    0 0 0 3px rgba(255,90,95,0.7),
    0 0 30px rgba(255,90,95,0.4),
    0 12px 32px rgba(0, 0, 0, 0.15);
}

.match-card.selected[data-quality="delux"],
.match-card.selected[data-quality="deluxe"] {
  border-color: rgba(212,175,55,0.9);
  box-shadow:
    0 0 0 3px rgba(212,175,55,0.6),
    0 0 30px rgba(212,175,55,0.3),
    0 12px 32px rgba(0, 0, 0, 0.15);
}

/* Show gold shimmer overlay for selected DELUX cards */
.match-card.selected[data-quality="delux"]::after,
.match-card.selected[data-quality="deluxe"]::after {
  opacity: 1;
}

.match-card.selected[data-quality="eg"],
.match-card.selected[data-quality="standard"],
.match-card.selected[data-quality="normal"] {
  border-color: rgba(90,120,170,0.9);
  box-shadow:
    0 0 0 3px rgba(90,120,170,0.7),
    0 0 30px rgba(90,120,170,0.35),
    0 12px 32px rgba(0, 0, 0, 0.15);
}

/* Cube background container for accord shapes */
.match-card-cubes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  opacity: 0.28;
  filter: blur(6px);
  -webkit-filter: blur(6px);
  will-change: filter, opacity;
}

.bg-cube {
  position: absolute;
  background: var(--cube-color, rgba(255,255,255,0.1));
  border-radius: 4px;
  box-shadow: 
    inset 0 1px 1px rgba(255,255,255,0.2),
    0 4px 12px rgba(0,0,0,0.2);
  transition: transform 0.3s ease;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(255,255,255,0.1);
}

/* Circular shapes for female fragrances */
.bg-circle {
  position: absolute;
  background: var(--cube-color, rgba(255,255,255,0.12));
  border-radius: 50%;
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.2), 0 6px 16px rgba(0,0,0,0.18);
  transition: transform 0.3s ease;
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* X-shaped mark for unisex fragrances (uses pseudo elements) */
.bg-x {
  position: absolute;
  width: var(--x-size, 40px);
  height: var(--x-size, 40px);
  pointer-events: none;
}
.bg-x::before, .bg-x::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: center;
  width: 70%;
  height: 18%;
  background: var(--cube-color, rgba(255,255,255,0.12));
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  filter: blur(2px);
}
.bg-x::before { transform: translate(-50%, -50%) rotate(45deg); }
.bg-x::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* Notes overlay background (left side preview) */
.match-notes-bg{
  position: absolute;
  top: auto;
  bottom: 6px;
  /* align overlay content with the card's inner content (card padding = 20px) */
  left: 20px;

  /* reduce padding to bring content closer to the left and tighten vertical gap */
  padding: 8px 8px 8px 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.92;
  -webkit-mask-image: none;
  mask-image: none;
  user-select: none;
  box-sizing: border-box;
}

/* Notes overlay: layered (top/middle/base) image-only, with note-layer-title design */
.notes-overlay-layer{
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 10px 18px rgba(0,0,0,0.16);
}

.note-layer-title{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.78);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  text-align: center;
}

.note-layer-icon{
  width: 18px;
  height: 18px;
  display: inline-block;
}

.note-layer-icon .tri-outline{
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  opacity: 0.85;
}

.note-layer-icon .tri-seg{
  fill: transparent;
  opacity: 0.9;
}

.note-layer-title--top .note-layer-icon .tri-seg--top{ fill: currentColor; opacity: 0.85; }
.note-layer-title--middle .note-layer-icon .tri-seg--mid{ fill: currentColor; opacity: 0.85; }
.note-layer-title--base .note-layer-icon .tri-seg--bot{ fill: currentColor; opacity: 0.85; }

.note-layer-text{ line-height: 1; }

.note-layer-images{
  display: flex;
  justify-content: space-evenly;
}

/* When note/type filters are active and match-filter-matches is present,
   truncate the notes overlay footprint so the meta panel can use the space. */
.match-card.truncate-notes-bg .match-notes-bg{
  left: 20px !important;
  top: auto !important;
  bottom: 6px !important;
  padding: 6px 6px 6px 0;
  gap: 6px;
}

.match-card.truncate-notes-bg .match-notes-bg .notes-overlay-layer{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 6px 6px;
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.04);
  width: auto;
}

.match-card.truncate-notes-bg .match-notes-bg .note-layer-text{ display: none; }

.match-card.truncate-notes-bg .match-notes-bg .note-layer-images{
  justify-content: center;
}

.match-card.truncate-notes-bg .match-notes-bg .note-layer-images .note-layer-image-container .note-layer-img{ display: none; }
.match-card.truncate-notes-bg .match-notes-bg .note-layer-images .note-layer-image-container:first-child .note-layer-img{ display: block; }

.match-card.truncate-notes-bg .match-notes-bg{ max-width: 80px; }
.match-card.truncate-notes-bg .match-meta{
  position: absolute;
  right: 12px;
  /* Anchor from the bottom so the panel grows upward. Keep a
     safe gap above footer/accord elements using a clamped offset. */
  bottom: clamp(64px, 6vh, 110px);
  transform: translateY(0);
  /* Keep meta confined to the right and reserve room for the (truncated)
    notes overlay on the left by limiting the width instead of stretching
    with a large left inset. */
  /* In truncation mode, the notes overlay footprint is tiny. Allow the meta
     panel to expand left to use the available space, while still reserving
     enough room so it doesn't overlap the notes overlay. */
  width: min(280px, calc(100% - 120px));
  max-width: min(280px, calc(100% - 120px));
  /* Ensure meta sits above accord overlay so child tooltips can escape */
  z-index: 80;
  background: transparent;
  border: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
  /* Allow the block to grow upward until it reaches the accord zone.
    Prevent any overlap by clamping height and letting inner panels scroll. */
  /* Give a tiny bit more room above so the meta can grow slightly taller */
  max-height: calc(100% - 130px);
  /* Tooltips should be able to escape the meta panel. Scrolling is handled
     by inner elements (e.g. .filter-match-items). */
  overflow: visible;
  min-height: 0;
}

/* Slightly reduce the visual size of the whole card when truncation is active
   so the meta panel appears to cover ~76% from the right. Keep transform-origin
   on the right so cards shrink toward the meta area. */
.match-card.truncate-notes-bg{
  transform: scale(0.96);
  transform-origin: right center;
}

/* Grid layout for combined "ALL" notes variant: 3 columns, up to 5 rows visible */
.notes-overlay-layer.all-notes .note-layer-images{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  align-items: start;
  justify-items: center;
  overflow: hidden;
  padding: 6px 4px 8px 4px;
}

.notes-overlay-layer.all-notes .note-layer-image-container .note-layer-img{
  width: 44px;
  height: 44px;
  border-radius: 12px;
}

.note-layer-image-container {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.06);
}
.note-layer-image-container::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  /* Keep the pseudo-element interactive so hover/preview extensions
     (e.g. Imagus) cannot target the underlying <img>. Matches
     behavior used by .type-hierarchy-note-image-container. */
  pointer-events: auto;
}

.note-layer-img{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.16);
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.06), 0 8px 16px rgba(0,0,0,0.16);
  /* Ensure note thumbnails can receive pointer events even when their host uses pointer-events:none */
  pointer-events: auto;
  cursor: pointer;
} 

.match-header{
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 14px;
  border-bottom: none;
}

.match-header__row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.match-header__row--sub{ 
  justify-content: flex-start; 
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

/* Constrain seasons and perf UI to the left half
   of the header so they never extend into the accords area on the right. */
.match-header__row--sub > .season-badges,
.match-header__row--sub .meta-perf-group,
.match-header__row--sub .meta-gender-slider {
  width: 50%;
  max-width: 50%;
  box-sizing: border-box;
}

/* Ensure the gender-track-wrapper fills the perf group (so gender track
   is the same width as other perf sliders when moved into the header). */
.match-header__row--sub .meta-perf-group .gender-track-wrapper,
.meta-perf-group .gender-track-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* Ensure internal perf controls fill their container when moved into header */
.meta-perf-group { width: 100%; }
.gender-track-wrapper { width: 100%; }

/* Reduce vertical gap so seasons and perf controls sit closer */
.match-header__row--sub { gap: 4px; }

.match-turkish-name{
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  line-height: 1.05;
  letter-spacing: -0.2px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.35);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
  user-select: none;
}

.match-title-wrap{ display:flex; align-items:center; gap:12px; min-width:0; }

/* Quality badge in header */
.quality-badge{
  padding: 6px 10px; /* slightly smaller */
  border-radius: 999px;
  font-size: 11px; /* slightly smaller */
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: rgba(255,255,255,0.95);
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.18), inset 0 1px 2px rgba(255,255,255,0.18);
  user-select: none;
}

/* Normal (formerly Eg) uses a muted blue */
.quality-badge[data-quality="eg"],
.quality-badge[data-quality="standard"],
.quality-badge[data-quality="normal"]{ background: rgba(90, 120, 170, 0.72); border-color: rgba(90, 120, 170, 0.55); }
.quality-badge[data-quality="top"]{ background: rgba(255, 90, 95, 0.72); border-color: rgba(255, 90, 95, 0.55); }
.quality-badge[data-quality="delux"],
.quality-badge[data-quality="deluxe"]{ background: rgba(212, 175, 55, 0.72); border-color: rgba(212, 175, 55, 0.55); }

/* Season badges in header */
.season-badges.season-badges--header{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
}

/* Default (compact) season badge used in match cards */
.season-badge{
  width: 26px;
  height: 26px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1;
  user-select: none;
}

/* Slightly smaller header badges */
.season-badges.season-badges--header .season-badge {
  width: 25px;
  height: 25px;
  font-size: 14px;
  border-radius: 7px;
}

/* Detail panel seasons (larger and distinct) */
#d-seasons .season-badge {
  width: 44px;
  height: 44px;
  font-size: 20px;
  border-radius: 10px;
}

/* Center season badges inside the details panel as a 2×2 grid */
#d-seasons {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 6px; /* small gap so badges are clumped */
  justify-content: center; /* center the grid block horizontally */
  align-content: center; /* center the grid block vertically */
  justify-items: center; /* center each badge within its grid cell */
  padding: 0;
}

#d-seasons .season-badge {
  margin: 0; /* remove any extra spacing from badge elements */
}


.season-badge.strong{ color:#fff; box-shadow: inset 0 1px 2px rgba(255,255,255,0.35), 0 6px 14px rgba(0,0,0,0.18); }
.season-badge.strong[data-season="spring"]{ background: linear-gradient(135deg, rgba(255, 192, 203, 0.6), rgba(255, 160, 180, 0.6)); border-color: rgba(255, 192, 203, 0.8); }
.season-badge.strong[data-season="summer"]{ background: linear-gradient(135deg, rgba(255, 223, 0, 0.6), rgba(255, 200, 0, 0.6)); border-color: rgba(255, 223, 0, 0.8); }
.season-badge.strong[data-season="fall"]{ background: linear-gradient(135deg, rgba(255, 140, 0, 0.6), rgba(255, 100, 0, 0.6)); border-color: rgba(255, 140, 0, 0.8); }
.season-badge.strong[data-season="winter"]{ background: linear-gradient(135deg, rgba(175, 238, 238, 0.6), rgba(135, 206, 250, 0.6)); border-color: rgba(175, 238, 238, 0.8); }

/* Accords overlay - positioned right side */
.match-accords {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-end;
  /* widen to reach approximately the middle of the match-card */
  width: 48%;
  max-width: 48%;
  pointer-events: auto;
  z-index: 60;
}

.accord-chip {
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 12px 0 16px;
  font-size: 13px;
  font-weight: 800;
  color: rgba(255,255,255,0.96);
  position: relative;
  overflow: visible;
  border-radius: 999px;
  white-space: nowrap;
  z-index: 18;
  /* Glassy pill: translucent tint + specular highlight */
  transition: transform 180ms cubic-bezier(.2,.9,.2,1), box-shadow 180ms ease, width 220ms ease, border-color 180ms ease, background 180ms ease;
  user-select: none;
  cursor: pointer;

  -webkit-font-smoothing: antialiased;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  letter-spacing: 0.15px;

  /* Translucent tint from accord color.
     Key idea: keep the chip-color saturation and let the gloss layers blend INTO it
     (multiply/overlay) instead of stacking extra white over an already-glassy card. */
  background:
    /* specular streak (kept subtle; multiplied into the tint) */
    linear-gradient(180deg,
      rgba(255,255,255,0.18) 0%,
      rgba(255,255,255,0.06) 36%,
      rgba(0,0,0,0.10) 100%),
    /* edge sheen (overlay gives contrast without washing out) */
    linear-gradient(135deg,
      rgba(255,255,255,0.08) 0%,
      rgba(255,255,255,0.00) 55%),
    /* tinted glass body (more saturated, less white) */
    color-mix(in srgb, var(--chip-color, #6cc6ff) 70%, transparent);
  background-blend-mode: multiply, overlay, normal;

  backdrop-filter: blur(12px) saturate(175%);
  -webkit-backdrop-filter: blur(12px) saturate(175%);

  border: 1px solid color-mix(in srgb, var(--chip-color, #6cc6ff) 26%, rgba(255,255,255,0.14));
  box-shadow:
    /* inner specular edges */
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    /* inner depth */
    inset 0 10px 18px rgba(0,0,0,0.20),
    /* outer lift */
    0 10px 22px rgba(0,0,0,0.16),
    0 1px 2px rgba(0,0,0,0.12);
}

.accord-chip::before{
  content: '';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  /* Grayer, less-bright dot placed behind the text */
  background: rgba(255,255,255,0.30);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.35), 0 1px 2px rgba(0,0,0,0.12);
  mix-blend-mode: none;
  pointer-events: none;
  opacity: 0.95;
  z-index: 0;
}

.accord-chip::after{
  content: '';
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  filter: blur(14px);
  background: var(--chip-color, rgba(255,255,255,0.12));
  opacity: 0.18;
  mix-blend-mode: soft-light;
  z-index: 0;
  pointer-events: none;
}

.accord-chip:hover{
  transform: translateX(-4px) scale(1.01);
  /* Hover lifts slightly out of the pressed state */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    inset 0 8px 16px rgba(0,0,0,0.16),
    0 16px 34px rgba(0,0,0,0.20);
  border-color: color-mix(in srgb, var(--chip-color, #6cc6ff) 26%, rgba(255,255,255,0.24));
}

/* Match-meta positioned on right side with perf sliders */
.match-meta{
  position: absolute;
  right: 12px;
  /* Start above the footer and grow upward; avoids touching accord elements. */
  bottom: clamp(64px, 6vh, 110px);
  transform: translateY(0);
  width: min(220px, 48%);
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  /* Ensure meta sits above accord overlay so child tooltips can escape */
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 8px;
      /* Prevent the meta panel from growing so tall it can overlap top-mounted accord chips.
        Increase the top safety gap so meta cannot touch the accord chips mounted at the card header. */
      max-height: calc(100% - 140px);
    overflow: auto;
    padding-bottom: 0;
}

/* Original title and brand become secondary / muted */
.match-name {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  line-height: 1.2;
  letter-spacing: -0.2px;
}

.match-brand {
  font-size: 11px;
  color: rgba(255,255,255,0.68);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.meta-perf-group{ display:flex; flex-direction:column; gap:4px; align-items:stretch; width:100%; }
.meta-perf-slider{ display:flex; align-items:center; gap:6px; width:100%; }

.perf-track{
  position:relative;
  width:100%;
  height:12px;
  background: var(--perf-bg, rgba(255,255,255,0.06));
  border-radius: 999px;
  overflow: visible;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: inset 0 6px 14px rgba(0,0,0,0.40), 0 6px 18px rgba(0,0,0,0.18);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.perf-fill{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:0%;
  border-radius: 999px;
  background: var(--perf-fill, linear-gradient(90deg, rgba(255,255,255,0.9), rgba(255,255,255,0.6)));
  transition: width 220ms cubic-bezier(0.2,0.9,0.2,1);
  box-shadow: inset 0 2px 8px rgba(255,255,255,0.06), inset 0 -6px 12px rgba(0,0,0,0.35);
}

.perf-thumb{
  position:absolute;
  top:50%;
  transform: translate(-50%, -50%);
  width:14px;
  height:14px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(240,240,240,0.88));
  box-shadow: 0 8px 18px rgba(0,0,0,0.35), inset 0 1px 2px rgba(255,255,255,0.85);
  border: 2px solid rgba(255,255,255,0.22);
}

.gender-track-wrapper{ display:flex; flex-direction:column; width:100%; gap:2px; }
.gender-symbols-row{ display:flex; justify-content:space-between; width:100%; padding:0 2px; font-size:10px; opacity:0.7; user-select: none; }
.gender-symbol{ font-size:11px; line-height:1; }
.gender-symbol.male{ color:#4169e1; }
.gender-symbol.unisex{ color:#9b59b6; }
.gender-symbol.female{ color:#ff69b4; }

.gender-track{ background: linear-gradient(90deg, rgba(255, 105, 180, 0.3), rgba(155, 89, 182, 0.35), rgba(65, 105, 225, 0.3)) !important; }
.gender-thumb{ border-color: #9b59b6 !important; }

/* Footer: add-to-cart + price */
.match-card .match-footer {
  position: absolute !important;
  left: 12px !important;
  right: 12px !important;
  bottom: 12px !important;
  z-index: 50 !important;
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  justify-content: flex-end !important;
  pointer-events: auto !important;
}

.match-card .match-price {
  background: rgba(255,255,255,0.06);
  color: #ffffff;
  padding: 6px 10px;
  border-radius: 8px;
  font-weight: 900;
  font-size: 13px;
  border: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
  text-shadow: 0 1px 3px rgba(0,0,0,0.35);
  order: 1;
  margin: 0;
  user-select: none;
}

.match-card .match-price {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  transition: padding 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.match-card .match-price .match-price-unit {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  font-weight: 600;
  font-size: 12px;
  margin-left: 8px;
  opacity: 0.95;
  color: #ffffff;
  /* Collapse smoothly to sync with add-cart-btn width extrusion */
  max-width: 80px;
  transition:
    max-width 280ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 280ms cubic-bezier(0.4, 0, 0.2, 1),
    margin-left 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* When add-to-cart extrudes, shrink the price badge from the right in sync */
.match-footer .add-cart-btn:hover ~ .match-price,
.match-footer .add-cart-btn.expanded ~ .match-price {
  padding-right: 8px;
}
.match-footer .add-cart-btn:hover ~ .match-price .match-price-unit,
.match-footer .add-cart-btn.expanded ~ .match-price .match-price-unit {
  max-width: 0;
  opacity: 0;
  margin-left: 0;
}

.match-footer .add-cart-btn:hover ~ .match-price .match-price-kdv,
.match-footer .add-cart-btn.expanded ~ .match-price .match-price-kdv {
  max-width: 0;
  opacity: 0;
  margin-left: 0;
}

.add-cart-btn{
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  height: 36px;
  width: 36px;
  padding: 0;
  padding-left: 8px;
  padding-right: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
  cursor: pointer;
  transition: width 280ms cubic-bezier(0.4, 0, 0.2, 1), background 280ms ease, box-shadow 280ms ease;
  position: relative;
  transform-origin: right center;
  order: 2;
  user-select: none;
}

.add-cart-btn::before{
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 260ms ease;
  filter: blur(8px);
  background: radial-gradient(circle at center, rgba(255,255,255,0.08), transparent 40%);
}

.add-cart-btn .icon{
  font-weight: 900;
  font-size: 16px;
  display: inline-block;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.add-cart-btn .label{
  white-space: nowrap;
  opacity: 0;
  transform: translateX(10px);
  transition: opacity 220ms cubic-bezier(0.4, 0, 0.2, 1) 60ms, transform 220ms cubic-bezier(0.4, 0, 0.2, 1) 60ms;
  font-weight: 800;
  font-size: 13px;
  padding-right: 12px;
  flex-shrink: 0;
}

.add-cart-btn:hover{
  width: 120px;
  background: rgba(255,255,255,0.06);
  box-shadow: 0 10px 30px rgba(0,0,0,0.28), 0 0 18px rgba(255,255,255,0.04);
}
.add-cart-btn:hover::before, .add-cart-btn.expanded::before { opacity: 1; }
.add-cart-btn:hover .label, .add-cart-btn.expanded .label { opacity: 1; transform: translateX(0); }

.add-cart-btn[data-in-cart="true"]{
  background: rgba(16, 185, 129, 0.18);
  border-color: rgba(16, 185, 129, 0.25);
}

/* Perf target and delta indicators */
.perf-target{
  position:absolute;
  top:0px;
  width:2px;
  height:14px;
  border-radius:2px;
  transform:translateX(-50%);
  pointer-events:none;
  background-image: repeating-linear-gradient(45deg, var(--filter-color) 0 3px, rgba(255,255,255,0.14) 3px 6px);
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.perf-delta{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  height:4px;
  opacity:0.95;
  border-radius:3px;
  pointer-events:none;
  background-image: repeating-linear-gradient(45deg, var(--delta-color, var(--filter-color)) 0 2px, rgba(255,255,255,0.14) 2px 4px);
  box-shadow: 0 1px 2px rgba(0,0,0,0.16) inset;
}

/* Disabled visual state when global filter slider is not active */
.meta-perf-slider .perf-track.disabled{ opacity:0.7; cursor:default; }
.meta-perf-slider .perf-track.disabled,
.meta-perf-slider .perf-track.disabled .perf-fill{
  filter: opacity(0.7) !important;
}

/* Meta when filter matches are shown - restore normal flow for match-filter-matches */
.match-meta.with-filter-matches {
  /* Keep the meta panel visually confined to the card's right side
     and anchor from bottom so it expands upward when showing matches. */
  position: absolute;
  right: 12px;
  /* Sit a bit closer to the footer while still staying above it */
  bottom: clamp(52px, 5vh, 96px);
  transform: translateY(0);
  /* Keep it tight on the right; on narrow cards, shrink instead of
     expanding left into the notes area. */
  /* Slightly wider than default, but keep it compact. */
  width: min(240px, calc(100% - 128px));
  max-width: min(240px, calc(100% - 128px));
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Grow upward until just below the accord chips (top is reserved by
     the base .match-meta rule). Give a tiny bit more room vertically. */
  max-height: calc(100% - 130px);
  /* Allow filter-match tooltips to overflow beyond this panel. */
  overflow: visible;
  min-height: 0; 
  background: transparent;
  border: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
}

/* When truncation is active, let the meta panel use the freed left space. */
.match-card.truncate-notes-bg .match-meta.with-filter-matches {
  /* Grow left into the freed space as the card gets wider. */
  width: calc(100% - 120px);
  max-width: calc(100% - 120px);
  bottom: clamp(52px, 5vh, 96px);
}

/* Filter Matches Section - shows matching types/notes from active filter */
.match-filter-matches {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  background: rgba(20, 20, 30, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  margin-top: 0;
  position: relative;
  /* Ensure this container sits above the accord overlay so its tooltips can be above them */
  z-index: 80;
  overflow: visible; 
  width: 100%;
  /* Keep tooltips unclipped; scroll happens in .filter-match-items. */
  flex: 0 0 auto;
  box-sizing: border-box;
}

.filter-match-count {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  background: rgba(0, 0, 0, 0.3);
  padding: 6px 14px;
  border-radius: 6px;
  margin-bottom: 4px;
}

.filter-match-count .match-label {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  margin-right: 4px;
}

.filter-match-count .match-x {
  color: #34d399;
  font-size: 16px;
  font-weight: 700;
}

.filter-match-count .match-y {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 600;
}

.filter-match-items {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  /* Keep the list compact; scroll inside the list instead of making the
     whole meta panel taller. */
  max-height: clamp(64px, 16vh, 120px);
  overflow-y: auto;
  padding-right: 4px; /* space for scrollbar */
}

/* Scrollbar styling for filter-match-items */
.filter-match-items::-webkit-scrollbar {
  width: 6px;
}

.filter-match-items::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.filter-match-items::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

.filter-match-items::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

.filter-match-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 14px;
  background: var(--item-color, #666);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  transition: all 0.2s ease;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.filter-match-item .item-name {
  color: inherit;
}

.filter-match-item.matched {
  background: var(--item-color, #10b981);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.5), 0 0 20px rgba(16, 185, 129, 0.25);
}

.filter-match-item.unmatched {
  opacity: 0.5;
  filter: grayscale(60%) brightness(0.7);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: none;
}

.filter-match-item .type-icon {
  font-size: 10px;
}

.filter-match-item[data-is-type="true"] {
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 5px 12px;
  border-radius: 16px;
}

.filter-match-item[data-is-type="true"].matched {
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.5), 0 0 24px rgba(139, 92, 246, 0.25);
  border-color: rgba(255, 255, 255, 0.6);
  position: static;
  cursor: pointer;
}

/* Type tooltip for showing matching notes within a type */
.filter-type-tooltip {
  position: absolute;
  bottom: auto; /* JS controls vertical position */
  left: 0;
  right: 0;
  width: auto;
  background: rgba(15, 15, 25, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  padding: 10px;
  /* Ensure type tooltips appear above overlays like accords */
  z-index: 1200;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
  transform: translateY(5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 12px rgba(139, 92, 246, 0.2);
} 

/* Dynamic arrow element - positioned via JS */
.filter-type-tooltip-arrow {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid rgba(15, 15, 25, 0.96);
  transition: left 0.15s ease;
}

/* Add a subtle border effect to the arrow */
.filter-type-tooltip-arrow::before {
  content: '';
  position: absolute;
  top: -8px;
  left: -8px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid rgba(255, 255, 255, 0.25);
  z-index: -1;
}

.filter-type-tooltip.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.filter-type-tooltip-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}

/* Counter chip as first element in tooltip notes */
.filter-type-tooltip-counter {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 12px;
  background: rgba(139, 92, 246, 0.35);
  border: 1px solid rgba(139, 92, 246, 0.5);
  color: rgba(255, 255, 255, 0.95);
}

.filter-type-tooltip-counter .counter-x {
  color: #34d399;
  font-size: 14px;
}

.filter-type-tooltip-counter .counter-y {
  color: rgba(255, 255, 255, 0.7);
}

.filter-type-tooltip-note {
  font-size: 11px;
  font-weight: 500;
  padding: 4px 9px;
  border-radius: 12px;
  background: var(--note-color, #666);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.3);
  white-space: nowrap;
}

/* Mobile adjustments */
@media (max-width: 620px) {
  .match-filter-matches {
    padding: 6px 8px;
  }
  
  .filter-match-count {
    font-size: 11px;
    padding: 4px 8px;
  }
  
  .filter-match-items {
    max-height: 160px; /* Smaller max-height on mobile */
  }
  
  .filter-match-item {
    font-size: 9px;
    padding: 3px 7px;
  }
  
  .filter-type-tooltip {
    /* Allow JS to position the tooltip relative to match-filter-matches
       (same behavior as desktop) instead of forcing a centered modal. */
    position: fixed;
    left: 0;
    right: auto;
    top: 0;
    bottom: auto;
    max-width: calc(100vw - 16px);
    padding: 10px;
    transform: translateY(5px);
  }
  
  .filter-type-tooltip-arrow {
    display: block;
  }
  
  .filter-type-tooltip.visible {
    transform: translateY(0);
  }
  
  .filter-type-tooltip-counter {
    font-size: 14px;
    padding: 5px 12px;
  }
  
  .filter-type-tooltip-counter .counter-x {
    font-size: 15px;
  }
  
  .filter-type-tooltip-note {
    font-size: 10px;
    padding: 4px 8px;
  }
}

.meta-icon {
  font-size: 16px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

/* Compact gender slider used in match cards */
.meta-gender-slider {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

/* When the global round gender slider is disabled, render match-card mini-sliders desaturated and semi-transparent */
.meta-gender-slider.disabled {
  filter: grayscale(100%);
  opacity: 0.45;
}
.gender-slider-track {
  position: relative;
  height: 8px;
  background: rgba(255,255,255,0.06);
  border-radius: 8px;
  overflow: visible;
}
.gender-slider-track.large { height: 12px; }
.gender-slider-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 50%;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(255,105,180,0.85), rgba(65,105,225,0.85));
  transition: width 0.35s ease;
}
.gender-slider-unisex{
  /* Match the left/right label styling so the symbol looks identical */
  font-size: 11px;
  color: rgba(255,255,255,0.85);
  display: inline-block;
  width: 28px;
  text-align: center;
  line-height: 1;
}

/* Label layout: left and right labels expand, center stays centered */
.gender-slider-labels{
  display:flex;
  align-items:center;
}
.gender-slider-labels .gender-left{ flex:1; text-align:left; }
.gender-slider-labels .gender-right{ flex:1; text-align:right; }
.gender-slider-labels .gender-slider-unisex{ flex:0 0 28px; }
.gender-slider-thumb {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  border: 2px solid rgba(0,0,0,0.12);
}
.gender-slider-thumb.large { width: 18px; height: 18px; }
.gender-slider-labels{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:11px;
  color: rgba(255,255,255,0.85);
}
.gender-slider-labels.large{ font-size:12px; }
.gender-slider-labels .gender-percent{ font-weight:800; color: #fff; }

/* Detail header original gender */
.detail-gender-original{
  font-size:12px;
  color: var(--text-muted);
  margin-left:8px;
  align-self:center;
}

/* match-score removed — visual summary handled by accord chips */
/* Footer anchored to bottom-right of each match card for price and add-to-cart */
.match-card .match-footer {
  position: absolute !important;
  /* Anchor the footer at the middle->right so it only occupies the
     right half of the card instead of spanning full width. */
  left: 50% !important;
  right: 12px !important;
  bottom: 12px !important;
  z-index: 30 !important;
  display: flex !important;
  gap: 6px !important;
  align-items: center !important;
  justify-content: flex-end !important; /* keep controls aligned to the right edge */
  pointer-events: auto !important;
}

/* Hide footer when card is virtualized (slimmed) */
.match-card--slim .match-footer,
.match-card.match-card--slim .match-footer {
  display: none !important;
}

.match-card .match-price {
  background: rgba(255,255,255,0.06);
  color: #ffffff;
  padding: 4px 8px;
  border-radius: 8px;
  font-weight: 800;
  font-size: 13px;
  border: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}

.match-card .match-price .match-price-unit {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  font-weight: 600;
  font-size: 11px;
  margin-left: 0;
  margin-right: 4px;
  opacity: 0.95;
  color: #ffffff;
  max-width: 80px;
  transition:
    max-width 280ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 280ms cubic-bezier(0.4, 0, 0.2, 1),
    margin-left 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.match-card .match-price .match-price-kdv{
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  font-weight: 600;
  font-size: 11px;
  margin-left: 4px;
  opacity: 0.95;
  color: #ffffff;
  max-width: 80px;
  transition:
    max-width 280ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 280ms cubic-bezier(0.4, 0, 0.2, 1),
    margin-left 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ensure unit styling is consistent also for non .match-card contexts (detail view) */
.match-price .match-price-unit {
  font-size: 11px;
  margin-left: 0;
  margin-right: 4px;
}

.match-price .match-price-kdv {
  font-size: 11px;
  margin-left: 4px;
}

/* Ensure footer doesn't push card height when card uses auto-height layouts */
.match-card {
  position: relative; /* reinforce relative positioning for card containers */
}

/* Add-to-cart button: compact '+' until hover, then expand to reveal label sliding in with a subtle glow */
.add-cart-btn{
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  height: 36px;
  width: 36px;
  padding: 0;
  padding-left: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
  cursor: pointer;
  transition: width 280ms cubic-bezier(0.4, 0, 0.2, 1), background 280ms ease, box-shadow 280ms ease;
  position: relative;
  transform-origin: left center; /* ensure expansion grows to the right */
}
.add-cart-btn::before{
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 260ms ease;
  filter: blur(8px);
  background: radial-gradient(circle at center, rgba(255,255,255,0.08), transparent 40%);
}
.add-cart-btn .icon{ 
  font-weight: 900; 
  font-size: 16px; 
  display: inline-block; 
  width: 18px; 
  text-align: center;
  flex-shrink: 0;
  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.add-cart-btn .label{ 
  white-space: nowrap; 
  opacity: 0;
  transform: translateX(10px);
  transition: opacity 220ms cubic-bezier(0.4, 0, 0.2, 1) 60ms, transform 220ms cubic-bezier(0.4, 0, 0.2, 1) 60ms;
  font-weight: 700; 
  font-size: 13px;
  padding-right: 12px;
  flex-shrink: 0;
}
.add-cart-btn:hover{ 
  /* fallback when JS is not available: modest expansion */
  width: 120px;
  background: rgba(255,255,255,0.06);
  box-shadow: 0 10px 30px rgba(0,0,0,0.28), 0 0 18px rgba(255,255,255,0.04);
}
.add-cart-btn:hover::before, .add-cart-btn.expanded::before { opacity: 1; }
.add-cart-btn:hover .label, .add-cart-btn.expanded .label { 
  opacity: 1; 
  transform: translateX(0);
}
.add-cart-btn:hover .icon{
  transform: translateX(0);
}
.add-cart-btn:hover .label{ 
  opacity: 1; 
  transform: translateX(0);
}
.add-cart-btn:hover .icon{
  transform: translateX(0);
}


/* Animated multi-radial gradient overlay for `.match-card` when JS has
   derived gradient colors. The overlay lives on the card's ::before so the
   `.match-accords` element remains fully transparent and can show chip
   backgrounds without obstruction. */
.match-card.match-card-gradient::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.45;
  mix-blend-mode: screen;
  background-color: var(--grad-color-1, #bb99ff);
  /* Use the three CSS vars the JS sets on the card. Provide fallbacks. */
  /* Use multiple radial gradients so the card displays several accord
     colors at once (no color-mangling). These use the JS-set vars. */
  background-image:
    radial-gradient(circle at 96% 8%, var(--grad-color-1, rgba(139,92,246,0.9)) 0%, transparent 40%),
    radial-gradient(circle at 32% 8%, var(--grad-color-2, rgba(49,130,206,0.9)) 0%, transparent 40%),
    radial-gradient(circle at 64% 88%, var(--grad-color-3, rgba(236,72,153,0.9)) 0%, transparent 40%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255,255,255,0.06));
  background-size: 100% 100%;
  z-index: 0;
}

/* Use the accord-chip derived vars to tint the card background while
   preserving the glassy overlay. First background layer is the derived
   gradient (uses the rgba values JS sets), second layer is the existing
   glass gradient to keep highlights and translucency. */
/* match-card-gradient removed (Hangarbrowser low-only) */

.meta-perf-group{ display:flex; flex-direction:column; gap:4px; align-items:stretch; margin-top:4px; width:100%; }
.meta-perf-slider{ display:flex; align-items:center; gap:6px; width:100%; }
.perf-track{ position:relative; width:100%; height:12px; background: var(--perf-bg, rgba(255,255,255,0.06)); border-radius:8px; overflow:visible; cursor:default; pointer-events:none;
  /* glassy surface - optimized */
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
.perf-fill{ position:absolute; left:0; top:0; bottom:0; width:0%; border-radius:8px; background: var(--perf-fill, linear-gradient(90deg, rgba(255,255,255,0.9), rgba(255,255,255,0.6))); transition: width 180ms ease; pointer-events:none;
  /* subtle inner glow to make the fill feel glossy */
  box-shadow: inset 0 1px 4px rgba(255,255,255,0.04);
}
.perf-thumb{ position:absolute; top:50%; transform:translate(-50%,-50%); width:14px; height:14px; border-radius:50%; background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.85)); box-shadow:0 4px 12px rgba(0,0,0,0.25); border:2px solid var(--filter-color, rgba(0,0,0,0.12)); pointer-events:none; }
.perf-target{
  position:absolute;
  top:0px; /* align with track top */
  width:2px; /* slim line */
  height:14px; /* shorter */
  border-radius:2px;
  transform:translateX(-50%);
  pointer-events:none;
  /* Striped indicator using the filter color passed by JS via --filter-color */
  background-image: repeating-linear-gradient(45deg, var(--filter-color) 0 3px, rgba(255,255,255,0.14) 3px 6px);
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.perf-delta{
  position:absolute;
  /* center vertically and make a little thinner */
  top:50%;
  transform:translateY(-50%);
  height:4px; /* slightly thinner */
  opacity:0.95;
  border-radius:3px;
  pointer-events:none;
  /* Striped overlay: use --delta-color (green/red), fallback to --filter-color */
  background-image: repeating-linear-gradient(45deg, var(--delta-color, var(--filter-color)) 0 2px, rgba(255,255,255,0.14) 2px 4px);
  box-shadow: 0 1px 2px rgba(0,0,0,0.16) inset;
}

/* Disabled visual state when global filter slider is not active */
/* Disabled visual state when global filter slider is not active */
.meta-perf-slider .perf-track.disabled{ opacity:0.7; cursor:default; }
.meta-perf-slider .perf-track.disabled,
.meta-perf-slider .perf-track.disabled .perf-fill{
  /* keep color visible even when the global filter is deactivated; make slightly muted but not desaturated */
  filter: opacity(0.7) !important;
}

/* Gender slider specific styles */
.meta-gender-slider {
  align-items: flex-start;
}

.gender-track-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 2px;
}

.gender-symbols-row {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0 2px;
  font-size: 10px;
  opacity: 0.7;
}

.gender-symbol {
  font-size: 11px;
  line-height: 1;
}

.gender-symbol.male {
  color: #4169e1;
}

.gender-symbol.unisex {
  color: #9b59b6;
}

.gender-symbol.female {
  color: #ff69b4;
}

.gender-track {
  background: linear-gradient(90deg, rgba(255, 105, 180, 0.3), rgba(155, 89, 182, 0.35), rgba(65, 105, 225, 0.3)) !important;
}

/* gender-fill background is set inline by JS to show only the corresponding gradient portion */

.gender-thumb {
  border-color: #9b59b6 !important;
}


/* ===== RIGHT PANEL: DETAILS ===== */
#details {
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  color: #fff;
}

#detail-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: rgba(255, 255, 255, 0.6);
}

.placeholder-icon {
  font-size: 64px;
  opacity: 0.3;
}

#detail-placeholder p {
  font-size: 14px;
  font-weight: 500;
}

#detail-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  height: 100%;
  overflow: hidden;
  position: relative; /* anchor for overlay button */
}

/* Detail Header */
.section-header {
  /* tightened to reduce empty spacing around the title */
  padding: 8px 12px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.55) 0%, rgba(168, 85, 247, 0.55) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.detail-header-title {
  font-size: 16px; /* increase as far as it goes */
  font-weight: 700;
  /* Use the same display font as compact-bottom-title for visual harmony */
  font-family: 'Lobster', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Allow title to take remaining space and truncate before gender/seasons */
  flex: 1 1 0;
  min-width: 0;
}

.detail-header-gender {
  font-size: 16px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  margin-left: 8px; /* snug up the gender next to the title */
}

/* Seasons in header: compact perfect squares (no header growth) */
.season-badges--header {
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.season-badges--header .season-badge {
  width: 20px;
  height: 20px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  border-radius: 6px; /* still a square; just softly rounded */
}

.season-badges--header .season-badge.strong {
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.35), 0 6px 14px rgba(0,0,0,0.18);
}

.detail-header-quality {
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: rgba(255,255,255,0.95);
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.16);
  flex-shrink: 0;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.18), inset 0 1px 2px rgba(255,255,255,0.18);
  user-select: none;
}

/* Gender slider containers */
.meta-gender-slider {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* The details-panel gender slider (moved into Details section) should be full width */
#d-gender-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Make large slider tracks more visible in header */
.gender-slider-track.large {
  height: 16px;
  width: 140px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: inset 0 6px 12px rgba(0,0,0,0.45), 0 6px 14px rgba(0,0,0,0.22);
  position: relative;
  overflow: hidden;
}
.gender-slider-fill {
  border-radius: 10px;
  box-shadow: inset 0 2px 6px rgba(255,255,255,0.06), inset 0 -6px 12px rgba(0,0,0,0.35);
  transition: width 420ms cubic-bezier(0.2,0.9,0.2,1), box-shadow 200ms ease;
}
.gender-slider-thumb.large {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(240,240,240,0.9));
  box-shadow: 0 6px 14px rgba(0,0,0,0.45), inset 0 1px 2px rgba(255,255,255,0.9);
  transform: translateX(-50%);
  transition: box-shadow 160ms ease, transform 160ms ease;
}

.detail-header-quality[data-quality="eg"],
.detail-header-quality[data-quality="standard"],
.detail-header-quality[data-quality="normal"] {
  background: rgba(90,120,170,0.8);
  border: 1px solid rgba(90,120,170,0.6);
}

.detail-header-quality[data-quality="top"] {
  background: rgba(255, 90, 95, 0.8);
  border: 1px solid rgba(255, 90, 95, 0.6);
}

.detail-header-quality[data-quality="delux"] {
  background: rgba(212, 175, 55, 0.8);
  border: 1px solid rgba(212, 175, 55, 0.6);
}

/* Detail Grid */
.detail-grid {
  display: grid;
  grid-template-columns: var(--detail-grid-col-left, 1fr) var(--detail-grid-col-notes, 1fr);
  grid-template-areas: "left notes";
  gap: 16px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  align-items: stretch;
}

.left-column {
  grid-area: left;
  display: grid;
  /* two rows: top and bottom. JS will assign --detail-panel-top-h and --detail-panel-bottom-h */
  grid-template-rows: var(--detail-panel-top-h, 1fr) var(--detail-panel-bottom-h, 1fr);
  gap: 16px;
  min-height: 0;
}

.accords-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Unified Details Section */
.details-section {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.details-content {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 0px; /* reduced to bring longevity/sillage closer to seasons */
  overflow-y: auto;
}

.details-subsection {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#d-accords {
  width: 100%;
}
.notes-section { 
  display: flex;
  flex-direction: column;
  min-height: 0;
  grid-area: notes;
}

/* Rounded glass sheen (no comic corners) */
.detail-section { position: relative; }
.detail-section::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  opacity: 0.5;
}

.details-gender-subsection {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

/* Detail Sections */
.detail-section {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  overflow: hidden;
}

.section-header {
  padding: 8px 12px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.55) 0%, rgba(168, 85, 247, 0.55) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.section-header[data-quality="eg"],
.section-header[data-quality="standard"],
.section-header[data-quality="normal"] {
  background: linear-gradient(135deg, rgba(90,120,170,0.42) 0%, rgba(70,110,150,0.42) 100%);
}

.section-header[data-quality="top"] {
  background: linear-gradient(135deg, rgba(255, 90, 95, 0.6) 0%, rgba(239, 68, 68, 0.6) 100%);
}

.section-header[data-quality="delux"] {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.6) 0%, rgba(234, 179, 8, 0.6) 100%);
}

.section-header h4 {
  font-size: 18px;
  font-weight: 400;
  color: #fff;
  /* Use Lobster display font (same as compact-bottom-title) for a decorative header */
  font-family: 'Lobster', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  /* Show as lowercase for Notes and Accords */
  text-transform: lowercase;
  letter-spacing: 0.2px;
  margin: 0;
  line-height: 1;
}

/* Detail Footer */
.detail-footer {
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  flex-shrink: 0;
}

/* Use Lobster display font for the results title H3 to match other display elements */
.results-title h3 {
  font-family: 'Lobster', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.detail-price {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  align-self: center;
}

.detail-add-cart-btn {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  height: 44px;
  width: 44px;
  padding: 0;
  padding-left: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
  cursor: pointer;
  transition: width 280ms cubic-bezier(0.4, 0, 0.2, 1), background 280ms ease, box-shadow 280ms ease;
  position: relative;
}

.detail-add-cart-btn::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 260ms ease;
  filter: blur(8px);
  background: radial-gradient(circle at center, rgba(255,255,255,0.08), transparent 40%);
}

.detail-add-cart-btn .icon {
  font-weight: 900;
  font-size: 16px;
  display: inline-block;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.detail-add-cart-btn .label {
  white-space: nowrap;
  opacity: 0;
  transform: translateX(10px);
  transition: opacity 220ms cubic-bezier(0.4, 0, 0.2, 1) 60ms, transform 220ms cubic-bezier(0.4, 0, 0.2, 1) 60ms;
  font-weight: 700;
  font-size: 13px;
  padding-right: 12px;
  flex-shrink: 0;
}

.detail-add-cart-btn:hover {
  /* fallback when JS is not available: modest expansion */
  width: 160px;
  background: rgba(255,255,255,0.06);
  box-shadow: 0 10px 30px rgba(0,0,0,0.28), 0 0 18px rgba(255,255,255,0.04);
}

.detail-add-cart-btn:hover::before, .detail-add-cart-btn.expanded::before { opacity: 1; }
.detail-add-cart-btn:hover .label, .detail-add-cart-btn.expanded .label { opacity: 1; transform: translateX(0); }

.detail-add-cart-btn:hover .icon {
  transform: translateX(0);
}

/* Cart controls live inside the left column (not an overlay). */
.detail-cart-overlay{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  /* render children in reverse visual order so DOM can remain (button then price)
     while displaying price on the left and button on the right */
  flex-direction: row-reverse;
}

/* When cart controls are inside the notes section header, push them to the right */
.notes-section .section-header{
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Cart controls pinned to the bottom of the Notes section */
.notes-section > .detail-cart-overlay{
  margin: 0 12px 12px;
  align-self: flex-end;
}

.detail-cart-overlay .detail-add-cart-btn{
  position: static;
  transform-origin: right center; /* expand toward left (match footer behavior) */
  z-index: 2;
}

.detail-cart-overlay .detail-match-price{
  background: rgba(255,255,255,0.06);
  color: #ffffff;
  height: 44px;
  padding: 0 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 13px;
  border: 1px solid rgba(255,255,255,0.06);
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  user-select: none;
}

.detail-cart-overlay .detail-match-price .match-price-unit{
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  font-weight: 600;
  font-size: 11px;
  margin-left: 0;
  margin-right: 4px;
  opacity: 0.95;
  color: #ffffff;
  max-width: 80px;
  transition:
    max-width 280ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 280ms cubic-bezier(0.4, 0, 0.2, 1),
    margin-left 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.detail-cart-overlay .detail-match-price .match-price-kdv{
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  font-weight: 600;
  font-size: 11px;
  margin-left: 4px;
  opacity: 0.95;
  color: #ffffff;
  max-width: 80px;
  transition:
    max-width 280ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 280ms cubic-bezier(0.4, 0, 0.2, 1),
    margin-left 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Detail is reverse direction: button expands left->right, so collapse unit smoothly next to it. */
.detail-cart-overlay .detail-add-cart-btn:hover + .detail-match-price .match-price-unit,
.detail-cart-overlay .detail-add-cart-btn.expanded + .detail-match-price .match-price-unit{
  max-width: 0;
  opacity: 0;
  margin-left: 0;
}

.detail-cart-overlay .detail-add-cart-btn:hover + .detail-match-price .match-price-kdv,
.detail-cart-overlay .detail-add-cart-btn.expanded + .detail-match-price .match-price-kdv{
  max-width: 0;
  opacity: 0;
  margin-left: 0;
}

.detail-add-cart-btn .price {
  font-weight: 800;
  margin-left: 8px;
  white-space: nowrap;
  font-size: 14px;
}

/* Accords List */
.accord-list {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.accord-bar-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.accord-bar-label {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.55);
}

.accord-bar-container {
  height: 28px;
  /* match perf-bar-wrap glass + neumorphism */
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: inset 0 6px 14px rgba(0,0,0,0.45), 0 6px 18px rgba(0,0,0,0.28);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

.accord-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.42s cubic-bezier(0.2,0.9,0.2,1), box-shadow 200ms ease;
  position: relative;
  background-clip: padding-box;
  box-shadow: inset 0 2px 8px rgba(255,255,255,0.06), inset 0 -6px 12px rgba(0,0,0,0.35);
}

.accord-bar-fill::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 6px;
  right: 6px;
  height: 40%;
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02));
  border-radius: 999px;
  pointer-events: none;
  opacity: 0.6;
}

/* Season Badges */
.season-badges {
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

/* Header seasons override (must win over generic .season-badges grid rule) */
.season-badges.season-badges--header {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
}

.season-badge {
  padding: 10px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-sm);
  text-align: center;
  font-size: 20px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1;
}

/* Details: use the global `.season-badges` / `.season-badge` styles
   so `#d-seasons` follows the same 2×2 grid as other season controls. */
.details-section .season-badges {
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.details-section .season-badge {
  /* restore default badge sizing/appearance (no forced square) */
  padding: 10px;
  font-size: 20px;
  border-radius: var(--radius-sm);
}

.season-badge.strong[data-season="spring"] {
  background: linear-gradient(135deg, rgba(255, 192, 203, 0.6) 0%, rgba(255, 160, 180, 0.6) 100%);
  border-color: rgba(255, 192, 203, 0.8);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.5),
              0 0 30px rgba(255, 192, 203, 0.5),
              0 8px 24px rgba(255, 192, 203, 0.3);
}

.season-badge.strong[data-season="summer"] {
  background: linear-gradient(135deg, rgba(255, 223, 0, 0.6) 0%, rgba(255, 200, 0, 0.6) 100%);
  border-color: rgba(255, 223, 0, 0.8);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.5),
              0 0 30px rgba(255, 223, 0, 0.5),
              0 8px 24px rgba(255, 223, 0, 0.3);
}

.season-badge.strong[data-season="fall"] {
  background: linear-gradient(135deg, rgba(255, 140, 0, 0.6) 0%, rgba(255, 100, 0, 0.6) 100%);
  border-color: rgba(255, 140, 0, 0.8);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.5),
              0 0 30px rgba(255, 140, 0, 0.5),
              0 8px 24px rgba(255, 140, 0, 0.3);
}

.season-badge.strong[data-season="winter"] {
  background: linear-gradient(135deg, rgba(175, 238, 238, 0.6) 0%, rgba(135, 206, 250, 0.6) 100%);
  border-color: rgba(175, 238, 238, 0.8);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.5),
              0 0 30px rgba(175, 238, 238, 0.5),
              0 8px 24px rgba(175, 238, 238, 0.3);
}

.season-badge.strong {
  color: #fff;
}

/* Performance Metrics */
.perf-metrics {
  /* tightened so longevity/sillage bars sit closer to side walls */
  padding: 6px 6px 4px 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.perf-metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ------------------
   Glass + Neumorphism Scrollbars & Slider Visuals
   Applies to match-list, accord-list, details-content, notes-pyramid
   Provides a frosted glass track and soft, pill-shaped thumb with subtle inner/outer shadows.
   ------------------ */

/* Target scrollable containers */
#match-list, .accord-list, .details-content, .notes-pyramid {
  /* give a subtle backdrop so scrollbars sit on a glassy surface */
  background-clip: padding-box;
  border-radius: 12px;
}

/* WebKit-based browsers (Chrome, Edge, Safari) */
#match-list::-webkit-scrollbar, .accord-list::-webkit-scrollbar, .details-content::-webkit-scrollbar, .notes-pyramid::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

#match-list::-webkit-scrollbar-track, .accord-list::-webkit-scrollbar-track, .details-content::-webkit-scrollbar-track, .notes-pyramid::-webkit-scrollbar-track {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius: 999px;
  box-shadow: inset 0 4px 10px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.02);
  margin: 6px 0;
}

#match-list::-webkit-scrollbar-thumb, .accord-list::-webkit-scrollbar-thumb, .details-content::-webkit-scrollbar-thumb, .notes-pyramid::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03));
  border-radius: 999px;
  border: 3px solid rgba(255,255,255,0.02); /* creates a soft padding area */
  background-clip: padding-box;
  box-shadow: inset 0 2px 6px rgba(255,255,255,0.08), inset 0 -6px 12px rgba(0,0,0,0.35), 0 6px 18px rgba(0,0,0,0.45);
  transition: box-shadow 200ms ease, transform 160ms ease;
}

#match-list::-webkit-scrollbar-thumb:hover, .accord-list::-webkit-scrollbar-thumb:hover, .details-content::-webkit-scrollbar-thumb:hover, .notes-pyramid::-webkit-scrollbar-thumb:hover {
  box-shadow: inset 0 3px 8px rgba(255,255,255,0.12), inset 0 -8px 18px rgba(0,0,0,0.45), 0 8px 24px rgba(0,0,0,0.5);
  transform: translateX(-1px);
}

/* Firefox scrollbar settings */
#match-list, .accord-list, .details-content, .notes-pyramid {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.12) rgba(255,255,255,0.02);
}

/* Neumorphic / glassy effect for perf tracks and bars */
.perf-bar-wrap {
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: inset 0 6px 14px rgba(0,0,0,0.45), 0 6px 18px rgba(0,0,0,0.28);
  border-radius: 999px;
}

.perf-bar {
  background-clip: padding-box;
  border-radius: 999px;
  box-shadow: inset 0 2px 8px rgba(255,255,255,0.06), inset 0 -6px 12px rgba(0,0,0,0.35);
  transition: width 420ms cubic-bezier(0.2,0.9,0.2,1), box-shadow 200ms ease;
}

.perf-bar::after {
  /* subtle glossy highlight */
  content: '';
  position: absolute;
  top: 2px;
  left: 6px;
  right: 6px;
  height: 40%;
  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.02));
  border-radius: 999px;
  pointer-events: none;
  opacity: 0.6;
}

/* Perf track for cards (non-interactive) */
.perf-track {
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(0,0,0,0.06), rgba(255,255,255,0.02));
  box-shadow: inset 0 3px 10px rgba(0,0,0,0.45);
  position: relative;
  overflow: hidden;
}

.perf-thumb {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(240,240,240,0.9));
  box-shadow: 0 6px 14px rgba(0,0,0,0.45), inset 0 1px 2px rgba(255,255,255,0.9);
  transform: translateX(-50%);
  transition: box-shadow 160ms ease, transform 160ms ease;
}

.perf-thumb:hover {
  box-shadow: 0 10px 26px rgba(0,0,0,0.55), inset 0 1px 2px rgba(255,255,255,0.95);
  transform: translateX(-50%) scale(1.06);
}

/* Ensure thumbs inside match cards are vertically centered */
.match-card .perf-thumb {
  position: absolute; /* allow top:50% to position relative to .perf-track */
  top: 50%;
  transform: translate(-50%,-50%); /* center horizontally and vertically */
  pointer-events: none;
}

/* Slightly more compact scrollbar on small screens */
@media (max-width: 520px) {
  #match-list::-webkit-scrollbar, .accord-list::-webkit-scrollbar, .details-content::-webkit-scrollbar, .notes-pyramid::-webkit-scrollbar { width: 10px; }
  #match-list, .accord-list, .details-content, .notes-pyramid { border-radius: 10px; }
}

/* End of glassy/neumorphic scrollbar and perf control styles */

.perf-metric .perf-label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.perf-bar-wrap {
  height: 20px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: 999px;
  overflow: hidden;
}

.perf-bar {
  height: 100%;
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.8), rgba(168, 85, 247, 0.8));
  border-radius: 999px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 8px;
  font-size: 11px;
  font-weight: 600;
  color: white;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  white-space: nowrap;
  overflow: visible;
}

/* Make the detail panel's longevity and sillage bars match the global slider gradients */
#d-longevity.perf-bar {
  background: linear-gradient(90deg, rgba(30, 144, 255, 0.9), rgba(0, 191, 255, 0.9));
}

#d-sillage.perf-bar {
  background: linear-gradient(90deg, rgba(220, 20, 60, 0.95), rgba(255, 69, 0, 0.95));
}

.gender-value {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: var(--radius-sm);
  display: inline-block;
}

/* Notes Pyramid */
.notes-pyramid {
  /* Hangarbrowser: simple centered list that doesn't stretch its
     children to fill vertical space. When content fits it is centered
     vertically; when content overflows it becomes a scrollbox. */
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;       /* center horizontally */
  justify-content: center;   /* center vertically when possible */
  align-content: center;
  gap: 12px;
  overflow-y: auto; /* single scrollbar for the whole list */
  -webkit-overflow-scrolling: touch; /* smooth native scrolling on mobile */
  overflow-x: hidden;
  flex: 1;
  min-height: 0;
}

/* Keep a visible max width so the centered list doesn't expand indefinitely */
.notes-pyramid > .note-layer { width: 100%; max-width: 560px; }

.note-layer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  width: 100%;
  max-width: 560px;
  flex: 0 0 auto; /* do not grow to fill parent */
} 

/* Allow each note group to scroll within its allocated zone */
.note-layer .note-badges {
  min-height: 0;
  overflow: visible; /* badges participate in the single parent scroll */
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center; /* center badges inside their layer */
}

/* Ensure the Notes panel clips rounded corners cleanly */
.notes-section {
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
}

.note-layer-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.78);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  text-align: center;
}

.note-layer-icon {
  width: 18px;
  height: 18px;
  display: inline-block;
}

.note-layer-icon .tri-outline {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  opacity: 0.85;
}

.note-layer-icon .tri-seg {
  fill: transparent;
  opacity: 0.9;
}

/* Fill only the requested segment per layer */
.note-layer-title--top .note-layer-icon .tri-seg--top { fill: currentColor; opacity: 0.85; }
.note-layer-title--middle .note-layer-icon .tri-seg--mid { fill: currentColor; opacity: 0.85; }
.note-layer-title--base .note-layer-icon .tri-seg--bot { fill: currentColor; opacity: 0.85; }

.note-layer-text { line-height: 1; }

.note-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

.note-badge {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  color: #000;
  border-radius: 999px;
  transition: all 0.2s;
  cursor: pointer;
}

.note-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

/* Highlight when a badge matches the active note filter */
.note-badge.filter-match {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 10px 36px rgba(34,197,94,0.26), 0 0 12px rgba(34,197,94,0.12);
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  z-index: 6;
}

/* When a note filter is active on the detail card, mute non-matching badges slightly */
#detail-card.note-filter-active .note-badge:not(.filter-match) {
  opacity: 0.6;
  filter: grayscale(30%) brightness(0.85);
  transform: none;
  transition: all 0.25s ease;
}

.top-notes .note-badge {
  background: rgba(255, 183, 77, 0.3);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 183, 77, 0.5);
}

.middle-notes .note-badge {
  background: rgba(255, 152, 0, 0.3);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 152, 0, 0.5);
}

.base-notes .note-badge {
  background: rgba(121, 85, 72, 0.3);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(121, 85, 72, 0.5);
}

/* Tooltip */
.tooltip {
  position: fixed;
  padding: 12px 16px;
  background: rgba(15, 23, 42, 0.95);
  color: var(--surface);
  font-size: 13px;
  line-height: 1.5;
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  pointer-events: none;
  z-index: 9999;
  max-width: 300px;
  backdrop-filter: blur(4px);
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.2s, transform 0.2s;
}

.tooltip.show {
  opacity: 1;
  transform: scale(1);
}

.tooltip.hidden {
  opacity: 0;
  transform: scale(0.95);
}

/* Overlay Error */
#overlay-error {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 10000;
}

.overlay-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 24px;
  width: min(90vw, 500px);
  box-shadow: var(--shadow-xl);
}

.overlay-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.overlay-body {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--surface-dim);
}

::-webkit-scrollbar-thumb {
  background: var(--border-dark);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* ===== NOTE GALLERY OVERLAY ===== */
#note-gallery-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(10px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Gallery Wrapper - Centers and contains all elements */
.gallery-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.gallery-container {
  position: relative;
  /* Allow the container to shrink with the viewport so rails + main can fit */
  width: clamp(1000px, 90vw, 2000px);
  height: clamp(750px, 90vh, 950px);
  background: transparent; /* moved visual styling to .gallery-grid */
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-direction: row;
  gap: 24px; /* consistent spacing between left rail, main, and right rail */
  overflow: visible; /* Allow sidebars to slide out to the left of container */
  z-index: 1;
}

/* Gallery Vertical Tabs - At 9% from left, 25% from top */
/* Gallery Vertical Tabs - attach to left edge of gallery-container */
.gallery-tabs {
  position: absolute;
  left: 0; /* On left edge of the container */
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 16; /* Above sidebars */
  pointer-events: none;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Move tabs left when sidebar is active */
/* Tabs are positioned outside the container via JS; no additional transform on active */

.gallery-tab {
  pointer-events: all;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  padding: 12px 8px;
  background: linear-gradient(135deg, rgba(102,126,234,0.9), rgba(118,75,162,0.9));
  color: white;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  border-right: 2px solid rgba(255,255,255,0.5);
  user-select: none;
  border-radius: 0 10px 10px 0; /* File cabinet/document tab shape */
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.2);
  position: relative;
}
/* The .gallery-bookmarks rail is defined below in the "Right Sidebar - Bookmarks" section.
  We deliberately avoid duplicating the declaration here. See the later definition for
  the fixed-width rules that ensure children expanding do not reflow the main layout. */

/* Gallery Sidebar - inside gallery-container, slides to page-left when active */
.gallery-sidebar {
  position: absolute;
  left: 0; /* Start at container left edge */
  top: auto; /* Will be set via JS to match gallery-main */
  bottom: auto;
  transform: translateX(-80%); /* Slightly left of container, will slide further left */
  width: var(--gallery-left-gap, 320px); /* Fill available gap to page-left */
  height: auto; /* Set via JS */
  max-height: none;
  background: rgba(255, 255, 255, 0.96);
  border: 2px solid var(--primary);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  flex-shrink: 0;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s, padding 0.2s;
  opacity: 0;
  pointer-events: none; /* Hidden by default */
  z-index: 0; /* Behind gallery container/main so it never overlaps */
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
}

.gallery-sidebar.active {
  /* Slide from container's left to the page's left edge by container offset */
  transform: translateX(calc(-1 * var(--gallery-container-left, 0px)));
  padding: 20px;
  overflow-y: auto;
  opacity: 1;
  pointer-events: all; /* Enable interaction when active */
}

/* Sidebar header and search input */
.gallery-sidebar-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.gallery-sidebar-search {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}

.gallery-sidebar-search input {
  width: 100%;
  border: none;
  outline: none;
  font-size: 12px;
}

/* Right Sidebar - Bookmarks rail as a flex child inside the container */
.gallery-bookmarks {
  position: relative;
  /* Fixed-width rail: reserve horizontal space so children can't reflow siblings.
     Use the CSS variable for base collapsed width; JS may expand this by setting
     an inline width up to --right-rail-max. Keep min/max to provide sensible bounds. */
  width: var(--right-rail-base);
  min-width: var(--right-rail-base);
  max-width: var(--right-rail-max);
  flex: 0 0 var(--right-rail-base); /* fixed flex-basis so layout doesn't shift */
  display: flex;
  flex-direction: row;
  align-items: stretch;
  align-self: stretch;
  /* Visual chrome moved to an overlaying canvas element so the rail can be
     transparent while the canvas provides the rounded canvas that expands
     as text grows. Keep the container layout-only (transparent). */
  background: transparent;
  border: none;
  border-radius: 12px;
  padding: 8px;
  gap: 8px;
  /* Allow visual overflow so bookmark items can expand on hover without
     pushing/sizing the surrounding layout. The rail itself remains a fixed size. */
  overflow: visible;
  z-index: 10;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
  scroll-behavior: smooth;
  scrollbar-width: none;
  transition: width 0.18s cubic-bezier(0.2,0.8,0.2,1), border-radius 0.18s ease, opacity 0.3s ease;
  /* Hidden by default; shown when grouping is active */
  opacity: 0;
  pointer-events: none;
}

/* Show bookmarks rail when "Group by type" is enabled */
.gallery-bookmarks.visible {
  opacity: 1;
  pointer-events: auto;
}/* The canvas provides a clean visual background for the bookmarks rail.
   It sits behind the bookmark items and scrollbar, filling the available
   inner space to create a unified aesthetic container. */
.gallery-bookmarks-canvas {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid rgba(102, 126, 234, 0.3);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
  z-index: 1; /* Behind the list and bookmark items */
  pointer-events: none; /* Allow scrolling & clicks through to the list */
  transition: opacity 200ms ease, box-shadow 200ms ease;
}/* Wrapper that contains the bookmarks rail and the spacer. By making the wrapper
   a fixed-size flex child (width = --right-rail-reserve) the inner bookmarks
   and spacer can resize/animate without changing the width of the gallery-main. */
/* (removed) previously-added .gallery-bookmarks-wrap - reverted to original layout */

/* Invisible spacer that reserves empty space on the right side of the rail.
   JS will shrink this spacer as bookmark labels grow so the visible label area
   increases without the rail stealing space from `.gallery-main`. If a label
   requires more space than the reserved rail, JS may expand the outer rail up
   to `--right-rail-max` as a fallback. */
.gallery-bookmarks-spacer {
  /* Hide spacer - bookmarks-list should take full width */
  display: none;
  flex: 0 0 0px;
  background: transparent;
  pointer-events: none;
  height: 0%;
  width: 0px;
  transition: width 160ms cubic-bezier(0.2,0.8,0.2,1);
}

/* Debug overlay for bookmark sizing (toggle with Ctrl+Shift+D) */
.bookmark-debug-overlay {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 100500;
  background: rgba(16,16,20,0.85);
  color: #e6eef8;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', monospace;
  font-size: 12px;
  line-height: 1.2;
  padding: 8px 10px;
  border-radius: 8px;
  max-width: 360px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
  display: none;
}
.bookmark-debug-overlay.visible { display: block; }
.bookmark-debug-overlay b { color: #9ad0ff; }
.bookmark-debug-overlay .row { margin-bottom: 6px; }
.bookmark-debug-overlay .muted { color: #9aa6b2; font-size: 11px; }

.gallery-bookmarks::-webkit-scrollbar {
  display: none;
}

.gallery-bookmarks-list {
  display: flex;
  flex-direction: column;
  align-items: center; /* Center nodes vertically */
  gap: 8px;
  padding: 0 10px;
  /* Full width within bookmarks container */
  flex: 1 1 auto;
  width: 100%; /* Take full width of parent */
  min-width: 0; /* allow shrinking below content width if necessary */
  overflow-y: auto; /* vertical scrolling within the list */
  overflow-x: visible; /* allow items to expand on hover */
  max-height: 100%;
  height: 100%; /* Fill parent height */
  position: relative;
  z-index: 10; /* Above the canvas background */
}

.gallery-bookmark-item {
  position: relative;
  min-width: 10px;
  width: 10px;
  height: 10px;
  background: var(--bookmark-color, rgba(102, 126, 234, 0.3));
  border-radius: 20px; /* Pill shape */
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  padding: 5px 8px;
  white-space: nowrap;
  transform-origin: center center; /* Expand from center */
  z-index: 15; /* Above the canvas and list container */
}

.gallery-bookmark-item:hover {
  background: var(--bookmark-color-strong, rgba(102, 126, 234, 0.6));
  width: auto;
  min-width: 80px;
  height: 20px;
  z-index: 100;
  padding: 5px 12px;
}

.gallery-bookmark-item.active {
  background: var(--bookmark-color-stronger, #667eea);
  width: auto;
  min-width: 60px;
  height: 18px;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
  padding: 5px 10px;
}

/* Text inside bookmark on hover - rendered by JS */
.gallery-bookmark-text {
  font-size: 0;
  font-weight: 700;
  color: #1a1a1a;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  text-align: center;
  text-shadow: 
    0 0 3px rgba(255, 255, 255, 0.9),
    0 0 5px rgba(255, 255, 255, 0.7),
    1px 1px 2px rgba(255, 255, 255, 0.8),
    -1px -1px 2px rgba(255, 255, 255, 0.8);
}

.gallery-bookmark-item:hover .gallery-bookmark-text {
  opacity: 1;
  font-size: 13px;
}

.gallery-bookmark-item.active .gallery-bookmark-text {
  opacity: 1;
  font-size: 12px;
}

/* Bookmark scroll arrows */
.bookmarks-arrow {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.85);
  border: 1px solid var(--border-dark);
  border-radius: 999px;
  color: var(--text-primary);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.bookmarks-arrow.show { opacity: 1; }
.bookmarks-arrow.show { pointer-events: auto; }
.bookmarks-arrow.top { top: 6px; }
.bookmarks-arrow.bottom { bottom: 6px; }

/* Proximity hover: treat nearest item as hovered when moving over the rail */
.gallery-bookmark-item.hover-near {
  background: var(--bookmark-color-strong, rgba(102, 126, 234, 0.6));
  width: auto;
  min-width: 80px;
  height: 20px;
  z-index: 100;
  padding: 5px 12px;
}
.gallery-bookmark-item.hover-near .gallery-bookmark-text {
  opacity: 1;
  font-size: 13px;
}

/* --- Arrow Overlay: keep SVG arrows always on top --- */
#gallery-arrows-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000; /* Above everything in overlay */
  pointer-events: none; /* Only children handle events */
}
.bookmarks-arrow.overlay {
  position: fixed; /* Positioned by JS */
}

/* --- Remove legacy tabs visually (we're replacing them). Keep .gallery-sidebar so grouped UI can use it. --- */
.gallery-tabs {
  display: none !important;
}

/* --- New compact popover controls for filters --- */
.gallery-pop-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.2);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(2px);
}
.gallery-pop-btn:hover {
  background: rgba(255,255,255,0.3);
}
.gallery-pop-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ef4444;
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.gallery-popover {
  position: fixed; /* Positioned by JS under its button */
  min-width: 320px;
  max-width: 420px;
  max-height: 70vh;
  overflow: auto;
  background: #fff;
  border: 2px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-xl);
  padding: 12px;
  z-index: 99999;
}
.gallery-popover-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.gallery-popover-search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}
.gallery-popover-search input {
  width: 100%;
  border: none;
  outline: none;
  font-size: 12px;
}
.gallery-popover-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* --- Left Filter Rail (flex child inside container) --- */
.gallery-left-rail {
  position: relative;
  width: 180px;
  flex: 0 0 180px;
  align-self: stretch;
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid rgba(102, 126, 234, 0.3);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0 8px 0;
  overflow: hidden;       /* vertical scroll handled by inner list */
  z-index: 10;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
  scrollbar-width: none;
}
.gallery-left-rail::-webkit-scrollbar { display: none; }
.gallery-left-rail .gallery-bookmarks-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0 10px;
  flex: 1;                /* take remaining height */
  overflow-y: auto;       /* scrollbar only for the list */
  overflow-x: hidden;     /* prevent horizontal scrollbar on list */
  overscroll-behavior-x: none;
}

/* Hide horizontal scrollbar track (WebKit) inside the left list */
.gallery-left-rail .gallery-bookmarks-list::-webkit-scrollbar:horizontal {
  height: 0;
}
.left-rail-title {
  width: 100%;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--text-primary);
  padding: 8px 6px 10px 6px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.95);
  flex-shrink: 0;
}
.left-rail-footer {
  display: flex;
  flex-direction: column;   /* vertical list */
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
  padding: 8px;
  border-top: 1px solid var(--border);
  background: rgba(255,255,255,0.9);
  flex-shrink: 0;           /* stay visible, do not scroll */
}
.left-rail-mode {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 8px;
}

.gallery-sidebar-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--primary);
  margin: 0 0 12px 0;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--border);
}

.gallery-clear-btn {
  background: var(--primary);
  color: white;
  border: none;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 16px;
  transition: all 0.2s;
}

.gallery-clear-btn:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.gallery-accord-filter-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gallery-accord-filter-item {
  padding: 10px 14px;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
}

.gallery-accord-filter-item:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  transform: translateX(4px);
}

.gallery-accord-filter-item.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary-dark);
  font-weight: 700;
}

.gallery-accord-filter-swatch {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.gallery-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: auto; /* allow internal scroll when constrained */
  min-width: 320px;
  width: auto;
}

/* Make gallery-main a positioning context so the header can be absolutely
   positioned and clipped relative to it. */
.gallery-main { position: relative; }

.gallery-close {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border: none;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  z-index: 9999;
}

.gallery-close:hover {
  background: rgba(0, 0, 0, 0.8);
  transform: scale(1.1);
}

.gallery-header {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px 24px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  z-index: 50;
  /* Transparent, non-intrusive overlay */
  background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0.25), rgba(0,0,0,0.0));
  backdrop-filter: blur(4px);
  pointer-events: auto; /* interactive */
  transition: transform 220ms ease, opacity 220ms ease;
}

/* By default keep the header mostly hidden (truncated) — leave a small
   visible strip so users can discover it. When the bottom-trigger is hovered
   (mouse near bottom), reveal the full header. */
.gallery-main .gallery-header {
  transform: translateY(calc(100% - 44px)); /* show ~44px strip */
.type-hierarchy-image-container:hover ~ .type-hierarchy-expand-icon,
.type-hierarchy-image-container:focus-within ~ .type-hierarchy-expand-icon {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0) scale(1.08);
}

/* Hover/focus on the expand icon itself is intentionally disabled to avoid
   mouse-collision pop-ins. The icon's visibility is driven by image hover
   or when the type is explicitly selected (see `.type-selected`). */
  z-index: 40;
}

/* Reveal header when the trigger or header itself is hovered */
.gallery-main-bottom-trigger:hover + .gallery-header,
.gallery-main .gallery-header:hover {
  transform: translateY(0);
  opacity: 1;
}

.gallery-header h2 {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
}

.gallery-header-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Hide-on-scroll utility for mobile */
.gallery-header.gallery-header--hidden { transform: translateY(100%); opacity: 0.0; }

.gallery-toggle-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s;
}

.gallery-toggle-label:hover {
  background: rgba(255, 255, 255, 0.3);
}

.gallery-toggle-checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.gallery-toggle-text {
  color: white;
  font-size: 14px;
  font-weight: 500;
  user-select: none;
}

#gallery-search {
  flex: 0 0 300px;
  padding: 10px 16px;
  border: none;
  border-radius: 999px;
  font-size: 14px;
  outline: none;
  background: rgba(255, 255, 255, 0.95);
  transition: all 0.2s;
}

#gallery-search:focus {
  background: white;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

.gallery-btn {
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.gallery-btn option {
  background: var(--surface);
  color: var(--text-primary);
}

.gallery-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
}

.gallery-grid {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  /* Reserve space at the bottom so the header never overlaps */
  padding-bottom: calc(24px + var(--gallery-header-reserve, 0px));
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  align-content: start;
  /* Removed scroll-behavior and scroll-snap to use custom row-based scrolling */
  /* Visual background moved from .gallery-container so the grid shows the card color */
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 20px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
  /* Hide scrollbars across browsers */
  scrollbar-width: none;           /* Firefox */
  -ms-overflow-style: none;        /* IE 10+ */
}
.gallery-grid::-webkit-scrollbar { display: none; } /* WebKit */

.gallery-parent-header {
  scroll-snap-align: start;
  scroll-margin-top: 100px;
}

.gallery-note-card {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 14px;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  min-height: 380px;
  height: auto;
  position: relative;
}

.gallery-note-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(102, 126, 234, 0.05) 0%,
    rgba(118, 75, 162, 0.05) 100%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  border-radius: inherit;
}

/* Make lazy-loaded gallery cards carry a neutral outline (same as their background)
   so we can swap the outline-color on selection without introducing new layout
   (this preserves the existing size/transform and only changes color). */
.gallery-note-card.lazy-card {
  outline: none;
  outline-offset: 0;
  -webkit-outline-offset: 0;
  transition: all 0.3s ease;
}
/* Increase gallery card min-height on desktop so lazy cards look taller */
@media (min-width: 1024px) {
  .gallery-note-card.lazy-card {
    min-height: 520px; /* taller cards on desktop */
  }
}

/* Also increase the min-height for mobile so lazy cards appear taller on phones
   without changing desktop behavior. Keep the breakpoint conservative so
   small tablets are unaffected. */
@media (max-width: 767px) {
  .gallery-note-card.lazy-card {
    min-height: 480px; /* taller cards on mobile */
  }
}
.gallery-parent-header {
  grid-column: 1 / -1;
  padding: 16px 0;
  margin-top: 24px;
  margin-bottom: 8px;
  border-bottom: 2px solid var(--primary);
  font-size: 1.5em;
  font-weight: 700;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 12px;
}

.gallery-parent-header:first-child {
  margin-top: 0;
}

.gallery-parent-count {
  font-size: 0.7em;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--surface-dim);
  padding: 4px 12px;
  border-radius: 16px;
}

.gallery-note-card:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  border-color: rgba(102, 126, 234, 0.4);
}

.gallery-note-card:hover::before {
  opacity: 1;
}

/* Image container that holds the image and overlaid accords */
.gallery-note-image-container {
  position: relative;
  width: 100%;
  height: 200px; /* reduce image height so interpretation area gets more space */
  flex-shrink: 0;
  overflow: hidden; /* clip any overflow inside the image area */
  background: var(--surface-dim);
}

.gallery-note-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Stronger rule to override legacy/duplicate selectors that set a fixed image height.
   Ensures the image always fills the image container and stays positioned correctly. */
.gallery-note-image-container > .gallery-note-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.gallery-note-info {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto; /* Allow natural growth */
  overflow-y: visible; /* Allow content to expand vertically */
  min-height: 0; /* allow children to shrink inside flex layout */
}

.gallery-note-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--primary);
  margin: 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.gallery-note-interp {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
  overflow: visible; /* Allow natural expansion */
  flex: 1 1 auto; /* Prefer to take remaining vertical space so interpretation has priority */
  min-height: 0; /* allow flex child to shrink properly */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Gallery note accords section - overlaid on image */
.gallery-note-accords {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  z-index: 2;
  pointer-events: none;
}

/* Make accords appear inside the image container specifically */
.gallery-note-image-container {
  /* ensure stacking context and positioning is explicit for mobile browsers */
  position: relative !important;
  display: block !important;
  z-index: 0;
}

.gallery-note-image-container > .gallery-note-accords {
  position: absolute !important;
  bottom: 8px !important;
  left: 8px !important;
  right: 8px !important;
  z-index: 10 !important; /* sit above the image */
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  pointer-events: none !important;
}

/* Responsive tweaks: reduce image height on small screens to favor interpretation */
@media (max-width: 767px) {
  /* Increase mobile image height to be more visually prominent on phones */
  .gallery-note-image-container { height: 240px; }
}

@media (min-width: 1024px) {
  .gallery-note-image-container { height: 220px; }
}

.gallery-accords-title {
  display: none; /* Hide the title */
}

.gallery-accords-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
}

.gallery-accord-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.4);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 8px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  opacity: 0.85;
}

.gallery-note-card.selected {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(102, 126, 234, 0.6);
  box-shadow: 
    0 0 0 2px rgba(102, 126, 234, 0.5),
    0 8px 24px rgba(102, 126, 234, 0.3);
  outline: none;
  outline-offset: 0;
  animation: liquidPulse 2.5s ease-in-out infinite;
}

.gallery-note-card.selected::before {
  opacity: 1;
  background: linear-gradient(
    135deg,
    rgba(102, 126, 234, 0.15) 0%,
    rgba(118, 75, 162, 0.15) 100%
  );
}

/* --- Left rail: always-visible items + black outline on selection --- */
.gallery-left-rail .gallery-bookmark-item {
  /* Always show labels fully; don't collapse to dots */
  min-width: 0;
  width: auto;
  height: 20px;
  padding: 5px 12px;
  max-width: none;
  overflow: visible;
}

.gallery-left-rail .gallery-bookmark-text {
  /* Make text visible at rest (no hover needed) */
  opacity: 1;
  font-size: 13px;
  overflow: visible;
  text-overflow: clip;
}

.gallery-left-rail .gallery-bookmark-item:hover {
  /* Keep width stable on hover; right rail expands but left rail stays constant */
  width: auto;
  min-width: 0;
}

.gallery-left-rail .gallery-bookmark-item.active {
  /* Selected state: black outline as requested */
  outline: 2px solid #000;
  outline-offset: 0;
}

/* --- Arrow Overlay: transparent SVG arrows centered on the bookmark rail --- */
/* Arrows now live inside the bookmarks container and scroll with it */

.bookmarks-arrow {
  position: absolute; /* Position within the bookmarks container */
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  /* Transparent background so arrows overlay cleanly on the rail */
  background: transparent;
  border: none;
  border-radius: 999px;
  /* Arrow color (stroke) - keep it subtle over the rail */
  color: rgba(15,23,42,0.9);
  box-shadow: none;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.1s;
  z-index: 200; /* Above bookmark items */
}

.bookmarks-arrow.top {
  top: 6px;
}

.bookmarks-arrow.bottom {
  bottom: 6px;
}

.bookmarks-arrow.show {
  opacity: 1;
  pointer-events: auto;
}

.bookmarks-arrow:hover {
  transform: translateX(-50%) scale(1.1);
  color: rgba(15,23,42,1);
}

.bookmarks-arrow:active {
  transform: translateX(-50%) scale(0.95);
}

/* --- Mobile responsiveness for gallery view --- */
@media (max-width: 900px) and (hover: none) and (pointer: coarse), (orientation: portrait) and (max-width: 720px) and (max-height: 1280px) {
  /* Keep the same background experience on mobile */
  body {
    padding: 0;
    display: block;
    place-items: initial;
    min-height: 100dvh;
    /* Keep theme background image and glassmorphism */
    background: var(--theme-bg-image) no-repeat fixed;
    background-size: cover;
  }

  /* Ensure the mobile three-pane canvas truly fills the viewport.
     The desktop shell uses clamped width + margins which would otherwise
     prevent 100vw/100dvh panes from occupying the full screen. */
  .app-shell {
    width: 100vw;
    max-width: 100vw;
    margin: 0;
  }

  /* Compact filter bar responsive */
  /* Mobile-specific fixes for background visibility and performance */
  @media (max-width: 768px) {
    .match-card {
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(220, 220, 220, 0.2) 50%, rgba(255, 255, 255, 0.25) 100%);
      backdrop-filter: blur(20px) saturate(150%);
      -webkit-backdrop-filter: blur(20px) saturate(150%);
      /* Disable expensive filters on mobile */
      filter: none;
    }
    
    .compact-filter-bar {
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(200, 200, 200, 0.5) 100%);
      backdrop-filter: blur(20px) saturate(150%);
      -webkit-backdrop-filter: blur(20px) saturate(150%);
      filter: none;
    }
    
    .compact-filter-bar::before {
      background: rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(15px) saturate(150%);
      -webkit-backdrop-filter: blur(15px) saturate(150%);
    }
    
    /* Simplify animations on mobile */
    .match-card:hover {
      transform: translateY(-4px) scale(1.01);
    }
    
    .filter-btn:hover {
      transform: scale(1.1);
    }
  }

  .compact-filter-bar {
    padding: 16px 12px;
  }
  
  .compact-header-row {
    flex-wrap: wrap;
  }
  
  .compact-title {
    font-size: 16px;
  }
  
  .btn-clear-compact {
    padding: 6px 12px;
    font-size: 12px;
  }
  
  .compact-controls-row {
    flex-direction: column;
    width: 100%;
    gap: 12px;
  }
  
  .compact-lang-selector,
  .compact-gender-selector,
  .compact-season-selector {
    width: 100%;
    justify-content: center;
  }
  
  .compact-lang-selector {
    padding: 10px 16px;
  }
  
  .compact-performance-sliders {
    flex-direction: column;
    gap: 12px;
    min-width: 100%;
    width: 100%;
  }
  
  .slider-group {
    width: 100%;
  }
  
  .gender-rain-buttons,
  .season-rain-buttons {
    justify-content: center;
  }
  
  .compact-gallery-btn {
    font-size: 12px;
    padding: 8px 14px;
    width: auto;
  }
  
  .gallery-btn-icon {
    font-size: 14px;
  }

  /* App card: switch to single-column mobile canvas */
  .filter-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  
  .filter-tabs::-webkit-scrollbar {
    display: none;
  }
  
  .filter-tab {
    white-space: nowrap;
    font-size: 12px;
    padding: 10px 12px;
  }
  
  .rain-btn {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }

  /* App card: switch to single-column mobile canvas with glassmorphism */
  #app-card {
    width: 100vw;
    height: 100dvh;
    max-width: 100vw;
    max-height: 100dvh;
    border-radius: 0;
    grid-template-columns: 1fr;
    position: relative;
    /* Keep transparent to show background */
    background: transparent;
  }

  /* Center results take full screen by default */
  #results {
    z-index: 1;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    /* Keep glassmorphism transparent background */
    background: transparent;
    position: relative; /* anchor the overlay header */
  }

  /* Mobile: header must be an overlay (not taking layout space) so it doesn't
     push #match-list and interfere with the scroll-driven row snap system. */
  .results-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 6;
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    /* Allow a full-width mobile header row above the results controls */
    flex-wrap: wrap;
  }

  /* Ensure grid scrolls independently */
  .match-grid {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* On mobile show one card per row so each card can be viewed fully */
    grid-template-columns: 1fr;
  }

  /* Extra small phones: make match-cards taller like desktop for better content display */
  @media (max-width: 520px) {
    .match-card {
      min-height: 340px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      gap: 12px;
      height: auto;
    }
    .match-grid { padding: 12px; gap: 12px; }
  }

  /* Loading spinner used by the infinite-scroll sentinel */
  .matches-loading-spinner{
    width: 36px; height: 36px; margin: 6px auto; border-radius: 50%;
    border: 4px solid rgba(0,0,0,0.06); border-top-color: var(--primary);
    box-sizing: border-box; animation: matches-spin 900ms linear infinite;
  }
  @keyframes matches-spin{ from{ transform: rotate(0deg) } to{ transform: rotate(360deg) } }

  /* Fancy entrance animation for newly loaded elements - Enhanced glassmorphism reveal */
  .match-card--new{
    opacity: 0;
    transform: translateY(40px) scale(0.88) rotateX(12deg);
    transform-origin: center bottom;
    /* Dramatic liquid glass entrance with smooth elastic bounce and subtle blur */
    animation: match-card-fancy-in 800ms cubic-bezier(.34,1.56,.64,1) forwards;
    filter: blur(6px);
  }
  @keyframes match-card-fancy-in{
    0% { 
      opacity: 0; 
      transform: translateY(40px) scale(0.88) rotateX(12deg);
      filter: blur(6px);
    }
    35% { 
      opacity: 0.5; 
      transform: translateY(-8px) scale(1.04) rotateX(-3deg);
      filter: blur(2px);
    }
    60% { 
      opacity: 0.9; 
      transform: translateY(3px) scale(0.98) rotateX(1deg);
      filter: blur(0.5px);
    }
    85% { 
      opacity: 1; 
      transform: translateY(-1px) scale(1.01) rotateX(-0.5deg);
      filter: blur(0px);
    }
    100% { 
      opacity: 1; 
      transform: translateY(0) scale(1) rotateX(0deg);
      filter: blur(0px);
    }
  }

  /* Small shimmer while content is considered 'loading' (used optionally) */
  .match-card.loading::after{
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    background-size: 200% 100%;
    animation: match-shimmer 1.2s linear infinite;
    border-radius: inherit;
    pointer-events: none;
  }
  @keyframes match-shimmer{ 0%{ background-position:200% 0 } 100%{ background-position:-200% 0 } }

  /* Switch to horizontal app-like scroll with three panes */
  #app-card {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0; /* seamless panels */
  }

  /* Desktop-mobile drag emulation: disable snap while dragging so motion is smooth.
     JS will snap to the nearest pane on release. */
  #app-card.drag-scrolling-x {
    scroll-snap-type: none !important;
    cursor: grabbing;
    user-select: none;
  }
  #app-card::-webkit-scrollbar { display: none; }

  /* Each pane is one screen with glassmorphism */
  #filters, #results, #details {
    position: relative !important;
    min-width: 100vw;
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    scroll-snap-align: center;
    transform: none !important;
    pointer-events: auto !important;
    z-index: auto !important;
    /* Keep glassmorphism backgrounds */
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Prevent overscroll bounce that allows swiping past edge panels */
    overscroll-behavior-x: contain;
  }
  
  /* Prevent swiping left from filters (leftmost panel) */
  #filters {
    scroll-snap-stop: always;
  }
  
  /* Prevent swiping right from details (rightmost panel) */
  #details {
    scroll-snap-stop: always;
  }
  
  /* Ensure filter-content fills #filters on mobile */
  #filters > .filter-content {
    flex: 1 1 auto;
    min-height: 0;
  }

  /* Results header: show mobile toggles */
  .mobile-only { display: inline-flex; }

  .mobile-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3),
                0 2px 8px rgba(0, 0, 0, 0.1);
  }

  /* Mobile performance slider */
  .mobile-performance-slider-container {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3),
                0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .mobile-perf-label {
    display: flex;
    align-items: center;
    cursor: pointer;
  }

  .perf-icon-mobile {
    width: 16px;
    height: 16px;
    color: rgba(255, 255, 255, 0.9);
  }

  .mobile-performance-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 60px;
    height: 5px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
  }

  .mobile-performance-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  }

  .mobile-performance-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  }

  /* Mobile performance slider visuals neutralized; data-mode has no effect. */
  .mobile-performance-slider::-webkit-slider-thumb { background: linear-gradient(135deg, #d1d5db, #9ca3af); }
  .mobile-performance-slider::-moz-range-thumb { background: linear-gradient(135deg, #d1d5db, #9ca3af); }
  .perf-icon-mobile { color: inherit; filter: none; }

  /* Backdrop behind drawers */
  .app-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms ease;
  }
  .app-backdrop.show { opacity: 1; visibility: visible; }
  /* Backdrop unused in scroll mode; keep hidden */
  .app-backdrop { display: none; }

  /* Drawer top bars and close buttons with glassmorphism */
  .mobile-details-bar {
    position: sticky;
    top: 0;
    z-index: 5;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .mobile-drag-handle {
    width: 44px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.4);
    margin: 4px auto 8px auto;
  }
  .mobile-close-btn {
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-weight: 700;
    font-size: 12px;
    color: #fff;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3),
                0 2px 8px rgba(0, 0, 0, 0.15);
  }

  /* Floating app FABs */
  .app-fab {
    position: fixed;
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 1000;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #fff;
    border: none;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  }
  .app-fab-filters { left: 16px; }
  .app-fab-details { right: 16px; }

  /* Edge peeks to hint scroll */
  .edge-peek {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    padding: 8px 10px;
    background: rgba(255,255,255,0.9);
    border: 1px solid var(--border-dark);
    color: var(--text-primary);
    border-radius: 12px;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 6px 16px rgba(0,0,0,0.25);
    opacity: 0.9;
  }
  #edge-peek-filters { left: 6px; }
  #edge-peek-details { right: 6px; }
}

/* Hide mobile-only controls on desktop */
.mobile-only { display: none; }
.mobile-toggle-btn { display: none; }
@media (max-width: 900px) and (hover: none) and (pointer: coarse), (orientation: portrait) and (max-width: 720px) and (max-height: 1280px) {
  :root {
    /* Very thin right rail on small screens */
    --right-rail-base: 18px;
    --right-rail-reserve: 96px;
    --right-rail-max: 160px;
  }

  #note-gallery-overlay {
    padding: 0; /* full-bleed on mobile */
  }

  .gallery-container {
    width: 100vw;
    height: 100vh;
    gap: 0; /* let main fill full screen */
  }

  .gallery-header {
    padding: 16px;
    gap: 8px;
    flex-wrap: wrap;
  }

  .gallery-header h2 {
    font-size: 18px;
  }

  .gallery-header-controls {
    gap: 8px;
    flex-wrap: wrap;
  }

  #gallery-search {
    flex: 1 1 100%;
    min-width: 0;
  }

  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    padding: 12px;
    gap: 12px;
  }

  .gallery-note-card {
    min-height: 420px;
  }

  .gallery-note-image {
    height: 180px;
  }

  /* Hide arrows and left rail on mobile; replace right rail with scrubber overlay */
  .bookmarks-arrow { display: none !important; }
  #gallery-left-rail { display: none !important; }
  /* Make right rail a thin, non-interactive visual on mobile (avoid scroll traps) */
  .gallery-bookmarks { pointer-events: none; }
  .gallery-bookmarks-list { overflow: hidden; }
  /* Larger active label on mobile right rail for readability */
  .gallery-bookmark-item .gallery-bookmark-text { font-size: 12px; font-weight: 700; }
  .gallery-bookmark-item.active .gallery-bookmark-text { font-size: 14px; font-weight: 900; }
  /* Show Filters FAB on small screens */
  .mobile-filters-fab { display: inline-flex !important; }
  /* Ensure legacy Types FAB stays hidden for the new design */
  .mobile-bookmarks-fab { display: none !important; }
  /* Let gallery-main consume full screen */
  .gallery-main { width: 100vw; height: 100vh; min-width: 100vw; min-height: 100vh; }
}

/* Larger touch targets for mobile devices */
@media (pointer: coarse) {
  .bookmarks-arrow {
    width: 36px;
    height: 36px;
  }

  /* Mobile header slots (site header duplicated into filters + results) */
  .mobile-header-slot {
    width: 100%;
    flex: 0 0 100%;
  }
}

/* --- Mobile Bookmarks FAB & Bottom Sheet --- */
.mobile-bookmarks-fab {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 100010;
  display: none; /* enabled via media query */
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.mobile-bookmarks-fab:active { transform: scale(0.98); }

.mobile-bookmarks-sheet {
  position: fixed;
  inset: 0;
  z-index: 100009;
  display: none; /* toggled to block when active */
}
.mobile-bookmarks-sheet .sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
}
.mobile-bookmarks-sheet .sheet {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: #fff;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  border: 2px solid var(--border);
  box-shadow: 0 -12px 32px rgba(0,0,0,0.35);
  transform: translateY(100%);
  transition: transform 0.25s ease;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
}
.mobile-bookmarks-sheet.open .sheet { transform: translateY(0%); }

.mobile-bookmarks-sheet .sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.mobile-bookmarks-sheet .sheet-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-primary);
}
.mobile-bookmarks-sheet .sheet-close {
  width: 36px; height: 36px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 16px;
  cursor: pointer;
}
.mobile-bookmarks-sheet .sheet-content {
  padding: 10px;
  overflow: auto;
}

/* Ensure the mobile list uses vertical scroll nicely */
#mobile-bookmarks-list {
  max-height: 56vh;
  overflow-y: auto;
}

/* --- Mobile Type Scrubber (right edge overlay) --- */
.mobile-type-scrubber {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 36px; /* larger touch slab */
  z-index: 100008;
  display: none; /* shown only on mobile + grouped */
  touch-action: none;
}
@media (max-width: 900px) and (hover: none) and (pointer: coarse), (orientation: portrait) and (max-width: 720px) and (max-height: 1280px) {
  .mobile-type-scrubber { display: block; }
}
.mobile-type-scrubber .track {
  position: absolute;
  top: 12px;
  bottom: 12px;
  right: 8px;
  width: 12px; /* thicker track for easier touch */
  border-radius: 999px;
  background: rgba(255,255,255,0.45);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}
.mobile-type-scrubber .tick {
  position: absolute;
  left: 0;
  right: 0;
  height: 3px; /* larger default tick */
  background: rgba(0,0,0,0.25);
  border-radius: 1px;
  opacity: 0.7;
}
.mobile-type-scrubber .tick.active { height: 4px; background: rgba(0,0,0,0.65); opacity: 1; }

.mobile-type-scrubber .indicator {
  position: fixed;
  right: 32px;
  top: 50%;
  transform: translateY(-50%) scale(0.98);
  /* Make the outer indicator container transparent so only the inner
     type-cloud (.node-item) provides visible background. This prevents
     a dark rounded box from appearing behind the cloud when previewing
     from the bookmarks on the right. */
  background: transparent;
  backdrop-filter: none;
  color: inherit;
  padding: 0; /* rely on inner .node-item padding */
  border-radius: 0;
  font-size: 16px;
  font-weight: 900;
  box-shadow: none;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease, transform 120ms ease;
  max-width: 60vw;
  white-space: nowrap;
  overflow: visible;
  text-overflow: ellipsis;
}
.mobile-type-scrubber .indicator.show { opacity: 1; transform: translateY(-50%) scale(1); }

/* Increase the tappable/hit area for the mobile-type-scrubber while in the
   gallery overlay. This makes the touch slab wider so it's easier to hit on
   phones/tablets, but it does not change the visible track/indicator styles
   (the track is still positioned with `right: 8px` and `width: 12px`). */
#note-gallery-overlay .mobile-type-scrubber {
  width: 72px; /* wider invisible slab for touch input only */
}

/* Mobile inline chip for opening Types directly from header */
.mobile-inline-chip { display: none; }
@media (max-width: 900px) and (hover: none) and (pointer: coarse), (orientation: portrait) and (max-width: 720px) and (max-height: 1280px) { .mobile-inline-chip { display: inline-flex; } }

/* --- Mobile Filters FAB & Bottom Sheet --- */
.mobile-filters-fab {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 100010;
  display: none; /* enabled via media query */
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.mobile-filters-fab:active { transform: scale(0.98); }

.mobile-filters-sheet {
  position: fixed;
  inset: 0;
  z-index: 100009;
  display: none; /* toggled to block when active */
}
.mobile-filters-sheet .sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
}
.mobile-filters-sheet .sheet {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: #fff;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  border: 2px solid var(--border);
  box-shadow: 0 -12px 32px rgba(0,0,0,0.35);
  transform: translateY(100%);
  transition: transform 0.25s ease;
  max-height: 78vh;
  display: flex;
  flex-direction: column;
}
.mobile-filters-sheet.open .sheet { transform: translateY(0%); }

.mobile-filters-sheet .sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.mobile-filters-sheet .sheet-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-primary);
}
.mobile-filters-sheet .sheet-close {
  width: 36px; height: 36px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 16px;
  cursor: pointer;
}
.mobile-filters-sheet .sheet-content {
  padding: 10px;
  overflow: auto;
}
.mobile-filters-sheet .mobile-filter-block + .mobile-filter-block { margin-top: 12px; }

/* Mobile Types list (node-item style, left-aligned) */
#mobile-types-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
#mobile-types-list .node-item { cursor: pointer; }

/* --- Selection ripple effect for gallery note cards --- */
/* Ensure container can clip the ripple */
.gallery-note-card { position: relative; overflow: hidden; }

.ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: ripple 600ms linear;
  background: rgba(59, 130, 246, 0.28); /* primary with alpha */
  pointer-events: none;
}

@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* Reduce/eliminate transform-based selection animation; keep color changes */
/* (Handled in the primary .gallery-note-card.selected rule above) */

/* --- Selection highlight for match cards (center list) --- */
.match-card.flash {
  animation: matchFlash 650ms ease;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.35), 0 10px 24px rgba(0,0,0,0.25);
}
@keyframes matchFlash {
  0% { transform: scale(1); }
  20% { transform: scale(1.03); }
  60% { transform: scale(1.01); }
  100% { transform: scale(1); }
}

/* Dynamic gradient variant: colors pulled from first three accord chips.
   We keep glass aesthetic by using gradient in ::before layer and translucent content above. */
.match-card-gradient {
  background: transparent !important; /* gradient handled by ::before */
  position: relative;
  overflow: hidden;
}
.match-card-gradient::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(-45deg,
    var(--grad-color-1, rgba(255,255,255,0.35)) 0%,
    var(--grad-color-2, rgba(255,255,255,0.28)) 50%,
    var(--grad-color-3, rgba(255,255,255,0.35)) 100%);
  background-size: 100% 100%;
  opacity: 0.85;
  z-index: 0;
  pointer-events: none;
  transition: filter 0.2s ease;
}
.match-card-gradient:hover::before { filter: brightness(1.1); }
.match-card-gradient.selected::before { filter: brightness(1.15) saturate(1.1); }
.match-card-gradient > * { position: relative; z-index: 1; }

/* === Mobile: make results visually primary and add scroll hints === */
@media (max-width: 900px) and (hover: none) and (pointer: coarse), (orientation: portrait) and (max-width: 720px) and (max-height: 1280px) {
  /* Elevate results so it reads as the main pane */
  #results {
    z-index: 3; /* above filters/details */
    box-shadow: 0 18px 40px rgba(15,23,42,0.12), 0 6px 18px rgba(15,23,42,0.06);
    border-left: 1px solid rgba(0,0,0,0.04);
    border-right: 1px solid rgba(0,0,0,0.04);
    transform: translateZ(0); /* create new stacking context */
  }

  /* We remove the pseudo-chevron arrows on the results pane for a cleaner look on mobile */
  #results::before, #results::after {
    display: none !important;
    content: none !important;
  }
  /* More subtle animation for the edge-peek buttons (already present in HTML) */
  #edge-peek-filters, #edge-peek-details {
    transition: transform 300ms ease, opacity 300ms ease;
    will-change: transform;
    opacity: 0.98;
  }
  #edge-peek-filters { animation: edgePeekPulseLeft 2200ms ease-in-out infinite; }
  #edge-peek-details { animation: edgePeekPulseRight 2200ms ease-in-out infinite; }

  /* hintSlide keyframes removed (pseudo-chevrons disabled) */

  @keyframes edgePeekPulseLeft {
    0% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    50% { transform: translateX(0); }
    75% { transform: translateX(-3px); }
    100% { transform: translateX(0); }
  }
  @keyframes edgePeekPulseRight {
    0% { transform: translateX(0); }
    25% { transform: translateX(6px); }
    50% { transform: translateX(0); }
    75% { transform: translateX(3px); }
    100% { transform: translateX(0); }
  }

  /* Reduce hint prominence when user interacts (touches) -- JS can add .no-hint to stop animation */
  #app-card.no-hint #results::before,
  #app-card.no-hint #results::after,
  #app-card.no-hint #edge-peek-filters,
  #app-card.no-hint #edge-peek-details {
    animation: none !important;
    opacity: 0.7;
  }
}

  /* Mobile override: thin tall edge-peek tabs flush to the window edge */
  @media (max-width: 900px) and (hover: none) and (pointer: coarse), (orientation: portrait) and (max-width: 720px) and (max-height: 1280px) {
    /* Make the edge-peeks a thin tall rectangle aligned to the very edge */
    #edge-peek-filters, #edge-peek-details {
      position: fixed;
      top: 50%;
      transform: translateY(-50%);
      z-index: 1200;
  width: 28px; /* extra thin */
  height: 140px; /* taller slab */
  padding: 4px 2px;
      /* hidden by default; shown only when results pane is active via .results-active */
      display: none;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      background: rgba(255,255,255,0.95);
      color: var(--text-primary);
      border: 1px solid rgba(0,0,0,0.06);
      box-shadow: 0 8px 18px rgba(0,0,0,0.12);
  font-weight: 800;
  font-size: 12px;
      writing-mode: vertical-rl; /* vertical text to fit the tall slab */
      text-orientation: mixed;
  gap: 4px;
      cursor: pointer;
      user-select: none;
    }
    /* Flush to the left/right walls */
    #edge-peek-filters { left: 0; border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
    #edge-peek-details { right: 0; border-top-left-radius: 8px; border-bottom-left-radius: 8px; }

    /* When a side is not possible, hide it via classes added to #app-card */
    #app-card.no-left #edge-peek-filters { display: none !important; }
    #app-card.no-right #edge-peek-details { display: none !important; }

  /* Show the edge-peeks only when the results pane is active (centered) */
  #app-card.results-active #edge-peek-filters,
  #app-card.results-active #edge-peek-details { display: inline-flex; }

  /* Also show them when neither side is marked as impossible (no-left/no-right).
    This covers cases where the JS `results-active` class wasn't added but the
    computed state still indicates the center/results pane (both sides possible). */
  #app-card:not(.no-left):not(.no-right) #edge-peek-filters,
  #app-card:not(.no-left):not(.no-right) #edge-peek-details { display: inline-flex; }

    /* Slightly reduce prominence when only one side remains */
    #app-card.no-left #edge-peek-details,
    #app-card.no-right #edge-peek-filters {
      box-shadow: 0 6px 14px rgba(0,0,0,0.14);
    }
  }

  /* Tiny directional arrows under the vertical text on the thin slabs */
  @media (max-width: 900px) and (hover: none) and (pointer: coarse), (orientation: portrait) and (max-width: 720px) and (max-height: 1280px) {
    #edge-peek-filters::after,
    #edge-peek-details::after {
      content: '';
      position: absolute;
      width: 0;
      height: 0;
      pointer-events: none;
      opacity: 0.95;
    }

    /* Left slab: arrow points right (toward content) and sits under the text */
    #edge-peek-filters::after {
      left: 6px; /* sit near outer edge of the slab */
      bottom: 10px; /* under the vertical text */
      border-top: 6px solid transparent;
      border-bottom: 6px solid transparent;
      border-right: 8px solid rgba(15,23,42,0.9); /* point outward (left) */
    }

    /* Right slab: arrow points left (toward content) and sits under the text */
    #edge-peek-details::after {
      right: 6px; /* sit near outer edge of the slab */
      bottom: 10px; /* under the vertical text */
      border-top: 6px solid transparent;
      border-bottom: 6px solid transparent;
      border-left: 8px solid rgba(15,23,42,0.9); /* point outward (right) */
    }
  }

/* ===== LOW PERFORMANCE MODE ===== */
/* Disable expensive visual effects for low-end hardware */
body.low-performance-mode #mouse-light {
  /* Fully disable the mouse-following light in low-performance mode.
     Ensure it does not consume compositing/paint work (display:none)
     and also neutralize any transitions or blend modes as a safety net. */
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: none !important;
  transform: none !important;
  mix-blend-mode: normal !important;
  background: transparent !important;
  width: 0 !important;
  height: 0 !important;
}

body.low-performance-mode #app-card,
body.low-performance-mode .filter-content,
body.low-performance-mode .compact-filter-bar::before,
body.low-performance-mode .unified-filters,
body.low-performance-mode #details {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.low-performance-mode .compact-filter-bar,
body.low-performance-mode .unified-filters,
body.low-performance-mode #app-card,
body.low-performance-mode .match-card,
body.low-performance-mode .type-item,
body.low-performance-mode .filter-btn,
body.low-performance-mode .switcher__bg {
  filter: none !important;
}

body.low-performance-mode * {
  /* Keep heavy keyframe animations disabled in low mode, but allow
     simple CSS transitions (eg. opacity fades) so newly loaded cards
     can still reveal with a lightweight transparency animation. */
  animation: none !important;
}

/* Ensure match cards with the --new animation class are visible in low-performance mode
   since animation is disabled and animationend won't fire */
body.low-performance-mode .match-card--new {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

body.low-performance-mode .match-card,
body.low-performance-mode .type-item,
body.low-performance-mode .nav-btn,
body.low-performance-mode .btn-clear-compact,
body.low-performance-mode .performance-slider-container,
body.low-performance-mode .mobile-performance-slider-container {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

/* Filter buttons: simple shadow for inactive, but allow active glow effects */
body.low-performance-mode .filter-btn:not(.active) {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

/* ===== LOW PERFORMANCE MODE: Gender & Season Button Glow Effects =====
   Keep the colorful glow on active filter buttons for visual feedback */

/* Gender buttons - active glow */
body.low-performance-mode .filter-btn[data-gender="male"].active {
  background: linear-gradient(135deg, rgba(64, 224, 208, 0.6) 0%, rgba(32, 178, 170, 0.6) 100%) !important;
  border-color: rgba(64, 224, 208, 0.8) !important;
  box-shadow: 0 0 20px rgba(64, 224, 208, 0.6), 0 4px 12px rgba(64, 224, 208, 0.3) !important;
}

body.low-performance-mode .filter-btn[data-gender="female"].active {
  background: linear-gradient(135deg, rgba(255, 182, 193, 0.6) 0%, rgba(255, 160, 180, 0.6) 100%) !important;
  border-color: rgba(255, 182, 193, 0.8) !important;
  box-shadow: 0 0 20px rgba(255, 182, 193, 0.6), 0 4px 12px rgba(255, 182, 193, 0.3) !important;
}

body.low-performance-mode .filter-btn[data-gender="unisex"].active {
  background: linear-gradient(90deg, rgba(255,150,170,0.85) 0%, rgba(255,150,170,0.85) 50%, rgba(64,224,208,0.85) 50%, rgba(64,224,208,0.85) 100%) !important;
  border-color: rgba(180,180,200,0.9) !important;
  box-shadow: 0 0 25px rgba(255,150,170,0.5), 0 0 25px rgba(64,224,208,0.5), 0 6px 18px rgba(0,0,0,0.2) !important;
}

/* Season buttons - active glow */
body.low-performance-mode .filter-btn[data-season="spring"].active {
  background: linear-gradient(135deg, rgba(255, 192, 203, 0.6) 0%, rgba(255, 160, 180, 0.6) 100%) !important;
  border-color: rgba(255, 192, 203, 0.8) !important;
  box-shadow: 0 0 20px rgba(255, 192, 203, 0.6), 0 4px 12px rgba(255, 192, 203, 0.3) !important;
}

body.low-performance-mode .filter-btn[data-season="summer"].active {
  background: linear-gradient(135deg, rgba(255, 223, 0, 0.6) 0%, rgba(255, 200, 0, 0.6) 100%) !important;
  border-color: rgba(255, 223, 0, 0.8) !important;
  box-shadow: 0 0 20px rgba(255, 223, 0, 0.6), 0 4px 12px rgba(255, 223, 0, 0.3) !important;
}

body.low-performance-mode .filter-btn[data-season="fall"].active {
  background: linear-gradient(135deg, rgba(255, 140, 0, 0.6) 0%, rgba(255, 100, 0, 0.6) 100%) !important;
  border-color: rgba(255, 140, 0, 0.8) !important;
  box-shadow: 0 0 20px rgba(255, 140, 0, 0.6), 0 4px 12px rgba(255, 140, 0, 0.3) !important;
}

body.low-performance-mode .filter-btn[data-season="winter"].active {
  background: linear-gradient(135deg, rgba(175, 238, 238, 0.6) 0%, rgba(135, 206, 250, 0.6) 100%) !important;
  border-color: rgba(175, 238, 238, 0.8) !important;
  box-shadow: 0 0 20px rgba(175, 238, 238, 0.6), 0 4px 12px rgba(175, 238, 238, 0.3) !important;
}

/* Low performance: reduce heavy glow for quality switches too */
body.low-performance-mode .quality-switch.is-on .switch-track {
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.45), 0 0 14px rgba(0,0,0,0.1) !important;
}


/* Overlay border rendered on a pseudo-element so it doesn't affect layout
   or cause children to reflow. Uses border on ::before (box-sizing:border-box)
   so the visual border sits above the card without changing its box model. */
body.low-performance-mode .match-card.selected::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-sizing: border-box;
  /* Use quality-specific outline color when provided, fall back to --accent */
  border: 4px solid var(--quality-outline, var(--accent));
  z-index: 20;
  transform: translateZ(0);
}

/* ===== LOW PERFORMANCE MODE: Sliders & Perf Tracks ===== */
/* Disable expensive GPU effects on filter sliders (longevity/sillage)
   but keep the colorful gradients and allow grayscale on disabled state */
body.low-performance-mode #longevity-slider,
body.low-performance-mode #sillage-slider {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  /* Don't override filter - allow grayscale on .slider-disabled */
}

/* Keep colored glow on slider thumbs (simplified) */
body.low-performance-mode #longevity-slider::-webkit-slider-thumb {
  box-shadow: 0 2px 8px rgba(30, 144, 255, 0.5) !important;
  border-color: rgba(30, 144, 255, 0.7) !important;
}

body.low-performance-mode #sillage-slider::-webkit-slider-thumb {
  box-shadow: 0 2px 8px rgba(220, 20, 60, 0.5) !important;
  border-color: rgba(220, 20, 60, 0.7) !important;
}

body.low-performance-mode #longevity-slider::-moz-range-thumb {
  box-shadow: 0 2px 8px rgba(30, 144, 255, 0.5) !important;
  border-color: rgba(30, 144, 255, 0.7) !important;
}

body.low-performance-mode #sillage-slider::-moz-range-thumb {
  box-shadow: 0 2px 8px rgba(220, 20, 60, 0.5) !important;
  border-color: rgba(220, 20, 60, 0.7) !important;
}

/* Disabled sliders should be grayscale in low-performance mode too */
body.low-performance-mode #longevity-slider.slider-disabled,
body.low-performance-mode #sillage-slider.slider-disabled {
  filter: grayscale(100%) opacity(0.55) !important;
}

body.low-performance-mode #longevity-slider.slider-disabled::-webkit-slider-thumb,
body.low-performance-mode #sillage-slider.slider-disabled::-webkit-slider-thumb {
  box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
  border-color: rgba(128,128,128,0.5) !important;
}

body.low-performance-mode #longevity-slider.slider-disabled::-moz-range-thumb,
body.low-performance-mode #sillage-slider.slider-disabled::-moz-range-thumb {
  box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
  border-color: rgba(128,128,128,0.5) !important;
}

/* Disable expensive GPU effects on performance track sliders inside match cards */
body.low-performance-mode .perf-track {
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important;
  opacity: 1 !important;
}

body.low-performance-mode .perf-track.disabled {
  opacity: 0.6 !important;
  filter: none !important;
}

body.low-performance-mode .perf-fill {
  filter: none !important;
  box-shadow: none !important;
}

body.low-performance-mode .perf-thumb {
  box-shadow: 0 2px 4px rgba(0,0,0,0.25) !important;
}

/* ===== LOW PERFORMANCE MODE: Type Hierarchy, Match Cards, Tooltips ===== */
/* Disable expensive effects on type-hierarchy-item.expanded (huge render area) */
body.low-performance-mode .type-hierarchy-item.expanded {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: inset 0 0 4px rgba(0,0,0,0.05) !important;
}

/* Reduce expensive effects on match-card-gradient (large, many instances) */
/* Keep a light blur for visual consistency, but reduce intensity */
body.low-performance-mode .match-card.match-card-gradient {
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

body.low-performance-mode .match-card.match-card-gradient::before {
  animation: none !important;
  will-change: auto !important;
  mix-blend-mode: normal !important;
}

/* Disable expensive effects on tooltips */
body.low-performance-mode .tooltip {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
  transform: none !important;
}

body.low-performance-mode .tooltip.show {
  transform: none !important;
}

body.low-performance-mode .filter-type-tooltip {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
}

/* Subtle selection flash: a brief bright spark overlay when a card is selected.
   Implemented via a pseudo-element and a transient class so it doesn't affect layout.
   Duration: ~150ms (controlled by JS removal of `.match-card--flash`). */
.match-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 24;
  /* Subtle spark — keep tinted and not full-white to reduce photosensitivity risk. */
  /* The radial uses a soft white center; blend a touch of the quality color if present. */
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.22) 10%, rgba(255,255,255,0.0) 45%);
  opacity: 0;
  transform: scale(0.996);
  transition: opacity 120ms ease-in-out, transform 150ms ease-out;
}

.match-card.match-card--flash::before {
  /* Slightly brighter but still subtle; short-lived (JS removes class after 150ms).
     Using opacity 0.7 gives a small but visible spark without being harsh. */
  opacity: 0.7;
  transform: scale(1.01);
}



body.low-performance-mode #app-card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

body.low-performance-mode .compact-filter-bar,
body.low-performance-mode .compact-filter-bar::before,
body.low-performance-mode .unified-filters {
  background: rgba(128, 128, 128, 0.25) !important;
}

body.low-performance-mode .filter-content,
body.low-performance-mode #details {
  background: rgba(0, 0, 0, 0.4) !important;
}

/* Reload animation helper toggled from JS when filters change. Disabled in low-performance-mode. */
.match-list--reloading .match-card {
  opacity: 0.24;
  transform: scale(0.995);
  filter: blur(1px) saturate(0.9);
  transition: opacity 260ms ease, transform 260ms ease, filter 260ms ease;
}
/* In low-performance mode we avoid expensive transforms/filters but still
   allow a cheap opacity fade so the UI visually indicates that a reload
   is happening. Keep this a simple opacity transition only. */
body.low-performance-mode .match-list--reloading .match-card {
  opacity: 0.32;
  transform: none;
  filter: none;
  transition: opacity 220ms ease;
}

/* ========== IDLE MODE ==========
   When user is idle (no mouse/keyboard/scroll activity), pause all
   continuous animations to reduce CPU/GPU usage while preserving
   visual appearance. This is automatically toggled via JS. */

/* Pause all infinite animations when idle */
body.idle-mode * {
  animation-play-state: paused !important;
}

/* Specific elements that always run animations - pause them when idle */
body.idle-mode .lang-globe-icon {
  animation-play-state: paused !important;
}

body.idle-mode .rain-btn.active {
  animation-play-state: paused !important;
}

body.idle-mode .filter-btn.active {
  animation-play-state: paused !important;
}

body.idle-mode .match-card.selected {
  animation-play-state: paused !important;
}

body.idle-mode .match-card.selected::after {
  animation-play-state: paused !important;
}

body.idle-mode #edge-peek-filters,
body.idle-mode #edge-peek-details {
  animation-play-state: paused !important;
}

/* Reduce GPU compositing when idle by removing will-change */
body.idle-mode .match-card,
body.idle-mode .match-card::before,
body.idle-mode .match-card::after,
body.idle-mode .match-card-gradient::before {
  will-change: auto !important;
}

/* ========== END IDLE MODE ========== */

/* Pause animations on virtualized (slimmed) cards to reduce GPU work when cards are off-screen */
.match-card--slim::before,
.match-card--slim::after,
.match-card.match-card--slim * {
  animation-play-state: paused !important;
}

/* Also pause animations on cards with the slim marker class */
.match-card-slim::before,
.match-card-slim::after {
  animation: none !important;
}

/* MatchCardTest background (applied when theme switcher is set to 'dark2')
   Note: gradients don't transition smoothly when set on `background`, so we
   fade them via pseudo-elements (opacity is animatable). */

body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(1200px 800px at 20% 10%, #243a66 0%, transparent 55%),
              radial-gradient(900px 700px at 85% 25%, #4a2a6d 0%, transparent 55%),
              linear-gradient(180deg, #0b1020, #111c33);
  background-attachment: fixed;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: -2;
}

body::before {
  content: '';
  position: fixed;
  inset: -80px;
  background:
    radial-gradient(closest-side at 15% 30%, rgba(90,163,255,.16), transparent 60%),
    radial-gradient(closest-side at 75% 35%, rgba(255,122,221,.14), transparent 62%),
    radial-gradient(closest-side at 55% 80%, rgba(110,255,205,.10), transparent 60%);
  filter: blur(10px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: -1;
}

body.matchcardtest-bg::after,
body.matchcardtest-bg::before {
  opacity: 1;
}


/* ==================================== */
/* ======= SITE HEADER & FOOTER ======= */
/* ==================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  background: rgba(15, 15, 25, 0.7);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 
    0 4px 30px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.site-header-inner {
  width: clamp(1200px, 95vw, 1600px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
}

.site-header .brand {
  font-size: 1.6rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  background: linear-gradient(135deg, #e8b4ff 0%, #9b59b6 40%, #e74c3c 70%, #f39c12 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
  letter-spacing: 0.5px;
}

.site-header nav {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.site-header .btn {
  padding: 0.6rem 1.2rem;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.site-header .btn:hover {
  background: rgba(155, 89, 182, 0.25);
  border-color: rgba(155, 89, 182, 0.4);
  transform: translateY(-2px);
  box-shadow: 
    0 6px 20px rgba(155, 89, 182, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Footer overlay trigger/button (mobile only) */
.footer-overlay-open-btn { display: none; }
.footer-overlay-open-btn .footer-overlay-open-icon { margin-right: 6px; }

/* Footer overlay helpers (mobile only) */
.mobile-footer-backdrop,
.mobile-footer-close {
  display: none;
}

/* Site Footer - Glassmorphic Design */
.site-footer.glass-footer {
  width: 100%;
  background: rgba(10, 10, 20, 0.75);
  backdrop-filter: blur(25px) saturate(150%);
  -webkit-backdrop-filter: blur(25px) saturate(150%);
  padding: 0;
  margin-top: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 
    0 -4px 30px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.footer-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2.5rem 2rem;
}

.visit-section {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 3rem;
  align-items: start;
}

.visit-info {
  color: rgba(255, 255, 255, 0.85);
}

.visit-info h4 {
  font-size: 1.3rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.visit-info .address {
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 1rem;
  color: rgba(255, 255, 255, 0.75);
}

.visit-info .phone,
.visit-info .hours {
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
  color: rgba(255, 255, 255, 0.8);
}

.visit-info .phone a {
  color: #bb86fc;
  text-decoration: none;
  transition: color 0.2s;
}

.visit-info .phone a:hover {
  color: #e8b4ff;
  text-decoration: underline;
}

.btn-map {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  padding: 0.65rem 1.3rem;
  background: rgba(155, 89, 182, 0.15);
  border: 1px solid rgba(155, 89, 182, 0.35);
  color: #bb86fc;
  border-radius: 10px;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.btn-map:hover {
  background: rgba(155, 89, 182, 0.3);
  border-color: rgba(155, 89, 182, 0.6);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(155, 89, 182, 0.3);
  color: #e8b4ff;
}

/* WhatsApp inline icon using the PNG (no green circle) */
.visit-info .phone a.whatsapp-inline {
  display: inline-block;
  margin-left: 0.8rem;
  background: transparent;
  color: inherit;
  border-radius: 0;
  text-decoration: none;
  padding: 0;
  font-size: 1rem;
  line-height: 1;
  vertical-align: middle;
  transition: transform 0.15s ease;
}

.visit-info .phone a.whatsapp-inline .icon-whatsapp,
.visit-info .phone a.whatsapp-inline img {
  width: 28px;
  height: 28px;
  display: block;
  fill: currentColor;
  object-fit: contain;
  border: 0;
}

/* Slightly smaller on narrow screens */
@media (max-width: 480px) {
  .visit-info .phone a.whatsapp-inline .icon-whatsapp,
  .visit-info .phone a.whatsapp-inline img {
    width: 22px;
    height: 22px;
  }
}

.visit-info .phone a.whatsapp-inline:hover {
  transform: translateY(-2px) scale(1.06);
}

.visit-map {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.4),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.visit-map iframe {
  width: 100%;
  height: 280px;
  border: none;
  filter: brightness(0.85) contrast(1.1);
  transition: filter 0.3s;
}

.visit-map:hover iframe {
  filter: brightness(1) contrast(1);
}

.footer-bottom {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.85rem;
}

/* Designer Credit - Fancy Glass Style */
.designer-credit {
  position: absolute;
  bottom: 12px;
  right: 16px;
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.3px;
  box-shadow: 
    0 2px 12px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10;
}

.designer-credit:hover {
  background: rgba(155, 89, 182, 0.15);
  border-color: rgba(155, 89, 182, 0.3);
  color: rgba(255, 255, 255, 0.85);
  transform: translateY(-1px);
  box-shadow: 
    0 4px 16px rgba(155, 89, 182, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* Footer Responsive */
@media (max-width: 900px) {
  .visit-section {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .visit-map iframe {
    height: 220px;
  }
}

@media (max-width: 768px) {
  .site-header {
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
  }

  .site-header-inner {
    width: 100%;
    padding: 0;
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .site-header nav {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .site-header .btn {
    padding: 0.5rem 0.9rem;
    font-size: 0.85rem;
  }
  
  .footer-container {
    padding: 2rem 1.5rem;
  }
  
  .designer-credit {
    position: static;
    display: block;
    text-align: center;
    margin: 1rem auto 0;
    width: fit-content;
  }



  /* On mobile we hide the original top header and render a compact version
     inside the filters compact controls row and the results header. */
  header.site-header { display: none; }

  /* Style the cloned header so it stays compact in-panel */
  .compact-controls-row .mobile-header-slot .site-header-inner,
  .results-header .mobile-header-slot .site-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 10px 10px;
    box-sizing: border-box;
    flex-direction: row;
    border-radius: 16px;
    background: rgba(10, 10, 20, 0.55);
    backdrop-filter: blur(18px) saturate(170%);
    -webkit-backdrop-filter: blur(18px) saturate(170%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow:
      0 10px 26px rgba(0, 0, 0, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }

  /* Explicitly target the mobile clone state mentioned in the request */
  .compact-controls-row .mobile-header-slot .site-header-inner.moved-to-compact,
  .results-header .mobile-header-slot .site-header-inner.moved-to-compact {
    position: relative;
  }

  .compact-controls-row .mobile-header-slot .site-header-inner .brand,
  .results-header .mobile-header-slot .site-header-inner .brand { font-size: 1rem; }

  .compact-controls-row .mobile-header-slot .mobile-designer-credit,
  .results-header .mobile-header-slot .mobile-designer-credit {
    display: block;
    margin-top: 2px;
    font-size: 10px; /* even smaller */
    font-weight: 300;
    line-height: 1.0;
    color: rgba(255, 255, 255, 0.56);
    letter-spacing: 0.08px;
    opacity: 0.95;
  }

  /* Vertical box for brand + credit on mobile */
  .compact-controls-row .mobile-header-slot .mobile-brand-box,
  .results-header .mobile-header-slot .mobile-brand-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 6px 10px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
  }

  .compact-controls-row .mobile-header-slot .mobile-brand-box .brand,
  .results-header .mobile-header-slot .mobile-brand-box .brand {
    font-size: 1rem;
    line-height: 1;
    margin: 0;
  }

  .compact-controls-row .mobile-header-slot .site-header-inner nav,
  .results-header .mobile-header-slot .site-header-inner nav {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .compact-controls-row .mobile-header-slot .site-header-inner nav .btn,
  .results-header .mobile-header-slot .site-header-inner nav .btn {
    padding: 0.35rem 0.6rem;
    font-size: 0.85rem;
  }

  /* Show + style the footer button inside the compact cloned header */
  .compact-controls-row .mobile-header-slot .footer-overlay-open-btn,
  .results-header .mobile-header-slot .footer-overlay-open-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    margin: 0;
    padding: 0.35rem 0.65rem;
    font-size: 0.85rem;
    border-radius: 999px;
    white-space: nowrap;
  }

  .compact-controls-row .mobile-header-slot button.site-footer.glass-footer.footer-overlay-open-btn,
  .results-header .mobile-header-slot button.site-footer.glass-footer.footer-overlay-open-btn {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.92);
    box-shadow:
      0 6px 18px rgba(0, 0, 0, 0.25),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  /* Mobile footer becomes an overlay opened from the header */
  .site-footer.glass-footer {
    display: none;
  }

  body.mobile-footer-open { overflow: hidden; }

  body.mobile-footer-open #mobile-footer {
    display: block;
    position: fixed;
    inset: 14px;
    z-index: 2050;
    margin: 0;
    border-radius: 18px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.mobile-footer-open #mobile-footer .footer-container {
    padding: 1.75rem 1.25rem;
  }

  body.mobile-footer-open .mobile-footer-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 2040;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  body.mobile-footer-open .mobile-footer-close {
    display: inline-flex;
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 2060;
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    cursor: pointer;
  }
}

/* Designer credit section under app-card */
.designer-credit-section {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 8px 18px;
  margin-top: 8px;
  box-sizing: border-box;
}

.designer-credit {
  position: relative;
  display: inline-block;
  text-align: center;
  margin: 0;
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  background: rgba(0,0,0,0.14);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.06);
  z-index: 10;
}

@media (max-width: 768px) {
  .designer-credit-section { justify-content: center; }
  .designer-credit { font-size: 12px; padding: 5px 8px; }
}

/* ==== Offline Mode Styles ==== */
body.offline-mode::before {
  content: '📴 Offline Mode';
  position: fixed;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 100, 100, 0.9);
  color: white;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  z-index: 10000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  animation: offline-pulse 2s ease-in-out infinite;
}

@keyframes offline-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* No results overlay with refresh button */
.match-list-no-results-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.match-list-no-results-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.match-list-no-results-actions .btn {
  background: linear-gradient(135deg, rgba(100, 200, 150, 0.9), rgba(70, 170, 120, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.match-list-no-results-actions .btn:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.match-list-no-results-actions .btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* ==== End Offline Mode Styles ==== */

/* ===== Mobile: Detail grid as vertical scrollable list ===== */
@media (max-width: 900px) and (hover: none) and (pointer: coarse), (orientation: portrait) and (max-width: 720px) and (max-height: 1280px) {
  #detail-card {
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    -webkit-overflow-scrolling: touch;
  }

  .detail-grid {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
    overflow: visible !important;
    gap: 12px;
    min-height: min-content;
  }

  .left-column {
    display: flex !important;
    flex-direction: column !important;
    grid-template-rows: none !important;
    gap: 12px;
    min-height: auto;
  }

  .detail-section {
    flex-shrink: 0;
    overflow: visible !important;
    min-height: auto;
  }

  .details-section,
  .accords-section,
  .notes-section {
    width: 100%;
    max-height: none;
    overflow: visible !important;
  }

  .notes-section {
    grid-area: unset;
  }

  .left-column {
    --detail-panel-top-h: auto !important;
    --detail-panel-bottom-h: auto !important;
  }

  .detail-grid {
    --detail-grid-col-left: none !important;
    --detail-grid-col-notes: none !important;
  }

  #d-accords,
  .notes-pyramid,
  .details-content {
    overflow: visible !important;
    max-height: none !important;
  }
}

/* Desktop-mobile (portrait sub-HD on desktop): same vertical list layout */
body.desktop-mobile-mode #detail-card {
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  -webkit-overflow-scrolling: touch;
}

body.desktop-mobile-mode .detail-grid {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  grid-template-areas: none !important;
  overflow: visible !important;
  gap: 12px;
  min-height: min-content;
}

body.desktop-mobile-mode .left-column {
  display: flex !important;
  flex-direction: column !important;
  grid-template-rows: none !important;
  gap: 12px;
  min-height: auto;
  --detail-panel-top-h: auto !important;
  --detail-panel-bottom-h: auto !important;
}

body.desktop-mobile-mode .detail-section {
  flex-shrink: 0;
  overflow: visible !important;
  min-height: auto;
}

body.desktop-mobile-mode .details-section,
body.desktop-mobile-mode .accords-section,
body.desktop-mobile-mode .notes-section {
  width: 100%;
  max-height: none;
  overflow: visible !important;
}

body.desktop-mobile-mode .notes-section {
  grid-area: unset;
}

body.desktop-mobile-mode .detail-grid {
  --detail-grid-col-left: none !important;
  --detail-grid-col-notes: none !important;
}

body.desktop-mobile-mode #d-accords,
body.desktop-mobile-mode .notes-pyramid,
body.desktop-mobile-mode .details-content {
  overflow: visible !important;
  max-height: none !important;
}