/* ============================================================
   Tesla Locksound Tools — Pure CSS (no Tailwind dependency)
   ============================================================ */

/* Design tokens — scoped to #tls-app to avoid leaking into theme */
#tls-app {
  /* Primary accent: burnished gold (candlelight, gilt frames) */
  --color-tesla-red: #B8860B;
  --color-tesla-red-light: #D4A843;
  --color-tesla-red-dark: #946D09;
  --color-tesla-red-50: #FBF5E6;
  --color-tesla-red-100: #F3E4BF;

  /* Secondary: velvet burgundy */
  --color-burgundy: #7A2E2E;
  --color-burgundy-50: #FDF2F2;

  /* Warm Parchment Surface System */
  --color-surface-50: #FFFDF8;
  --color-surface-100: #F8F3EB;
  --color-surface-150: #F0E8DA;
  --color-surface-200: #E2D5C1;
  --color-surface-300: #C9B99E;
  --color-surface-400: #A08B6D;
  --color-surface-500: #7A6B55;
  --color-surface-600: #5C4E3A;
  --color-surface-700: #3D3425;
  --color-surface-800: #2A2015;
  --color-surface-900: #1A1410;
}

/* ============================================================
   Theme Isolation — prevent WoodMart / parent theme conflicts.

   WoodMart base.min.css has aggressive global CSS resets:
     div, span, p, ... { margin: 0; padding: 0; }
     button { text-transform: uppercase; padding: ...; }
     h1-h6  { color: ...; font-family: ...; }
   We counter them with #tls-app scoping so our plugin CSS wins.
   ============================================================ */

/* Global resets for our app scope */
#tls-app, #tls-app *, #tls-app *::before, #tls-app *::after {
  box-sizing: border-box;
}

/* Typography isolation */
#tls-app { color: var(--color-surface-700); }
#tls-app a { color: inherit; text-decoration: none; }
#tls-app h1, #tls-app h2, #tls-app h3 { color: var(--color-surface-800); margin: 0; }

/* Layout utilities — un-layered overrides for Tailwind classes */
#tls-app .mx-auto { margin-left: auto; margin-right: auto; }
#tls-app .max-w-6xl { max-width: 1152px; }
#tls-app .max-w-4xl { max-width: 896px; }
#tls-app .max-w-2xl { max-width: 672px; }
#tls-app .max-w-xs { max-width: 320px; }
#tls-app .min-h-screen { min-height: 100vh; }

/* Spacing */
#tls-app .px-4 { padding-left: 1rem; padding-right: 1rem; }
#tls-app .px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
#tls-app .py-8 { padding-top: 2rem; padding-bottom: 2rem; }
#tls-app .p-4 { padding: 1rem; }
#tls-app .p-6 { padding: 1.5rem; }
#tls-app .mb-1 { margin-bottom: 0.25rem; }
#tls-app .mb-2 { margin-bottom: 0.5rem; }
#tls-app .mb-3 { margin-bottom: 0.75rem; }
#tls-app .mb-4 { margin-bottom: 1rem; }
#tls-app .mb-6 { margin-bottom: 1.5rem; }
#tls-app .mb-8 { margin-bottom: 2rem; }
#tls-app .mb-10 { margin-bottom: 2.5rem; }
#tls-app .mb-12 { margin-bottom: 3rem; }
#tls-app .mt-1 { margin-top: 0.25rem; }
#tls-app .mt-3 { margin-top: 0.75rem; }
#tls-app .mt-4 { margin-top: 1rem; }
#tls-app .mt-6 { margin-top: 1.5rem; }
#tls-app .mt-8 { margin-top: 2rem; }
#tls-app .mt-0\.5 { margin-top: 0.125rem; }
#tls-app .space-y-3 > * + * { margin-top: 0.75rem; }
#tls-app .space-y-4 > * + * { margin-top: 1rem; }

/* Flexbox & Grid */
#tls-app .flex { display: flex; }
#tls-app .flex-1 { flex: 1 1 0%; }
#tls-app .flex-col { flex-direction: column; }
#tls-app .flex-wrap { flex-wrap: wrap; }
#tls-app .flex-shrink-0 { flex-shrink: 0; }
#tls-app .items-center { align-items: center; }
#tls-app .items-start { align-items: flex-start; }
#tls-app .justify-center { justify-content: center; }
#tls-app .justify-between { justify-content: space-between; }
#tls-app .gap-2 { gap: 0.5rem; }
#tls-app .gap-3 { gap: 0.75rem; }
#tls-app .gap-4 { gap: 1rem; }
#tls-app .gap-5 { gap: 1.25rem; }
#tls-app .gap-6 { gap: 1.5rem; }
#tls-app .grid { display: grid; }
#tls-app .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
#tls-app .col-span-full { grid-column: 1 / -1; }
#tls-app .inline-block { display: inline-block; }
#tls-app .inline-flex { display: inline-flex; }

/* Visibility */
#tls-app .hidden { display: none; }

/* Text */
#tls-app .text-center { text-align: center; }
#tls-app .text-xs { font-size: 0.75rem; line-height: 1rem; }
#tls-app .text-sm { font-size: 0.875rem; line-height: 1.25rem; }
#tls-app .text-base { font-size: 1rem; line-height: 1.5rem; }
#tls-app .text-lg { font-size: 1.125rem; line-height: 1.75rem; }
#tls-app .text-xl { font-size: 1.25rem; line-height: 1.75rem; }
#tls-app .text-2xl { font-size: 1.5rem; line-height: 2rem; }
#tls-app .font-medium { font-weight: 500; }
#tls-app .font-semibold { font-weight: 600; }
#tls-app .font-bold { font-weight: 700; }
#tls-app .font-mono { font-family: ui-monospace, monospace; }
#tls-app .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tls-app .uppercase { text-transform: uppercase; }
#tls-app .tracking-wider { letter-spacing: 0.05em; }

/* Theme colors — text */
#tls-app .text-surface-300 { color: var(--color-surface-300); }
#tls-app .text-surface-400 { color: var(--color-surface-400); }
#tls-app .text-surface-500 { color: var(--color-surface-500); }
#tls-app .text-surface-600 { color: var(--color-surface-600); }
#tls-app .text-surface-800 { color: var(--color-surface-800); }
#tls-app .text-surface-900 { color: var(--color-surface-900); }
#tls-app .text-tesla-red { color: var(--color-tesla-red); }
#tls-app .text-yellow-500 { color: #EAB308; }
#tls-app .text-green-500 { color: #22C55E; }

/* Theme colors — background */
#tls-app .bg-surface-100 { background-color: var(--color-surface-100); }
#tls-app .bg-surface-150 { background-color: var(--color-surface-150); }
#tls-app .bg-tesla-red { background-color: var(--color-tesla-red); }
#tls-app .bg-white { background-color: #fff; }

/* Theme colors — border */
#tls-app .border { border: 1px solid var(--color-surface-200); }
#tls-app .border-surface-300 { border-color: var(--color-surface-300); }

/* Theme colors — hover */
#tls-app .hover\:bg-tesla-red-light:hover { background-color: var(--color-tesla-red-light); }
#tls-app .hover\:text-surface-800:hover { color: var(--color-surface-800); }
#tls-app .hover\:text-surface-900:hover { color: var(--color-surface-900); }

/* Theme colors — focus */
#tls-app .focus\:border-tesla-red:focus { border-color: var(--color-tesla-red); }
#tls-app .focus\:outline-none:focus { outline: none; }

/* Theme colors — placeholder */
#tls-app .placeholder-surface-400::placeholder { color: var(--color-surface-400); }

/* Sizing */
#tls-app .w-full { width: 100%; }
#tls-app .w-3\.5 { width: 0.875rem; }
#tls-app .w-4 { width: 1rem; }
#tls-app .w-5 { width: 1.25rem; }
#tls-app .w-8 { width: 2rem; }
#tls-app .w-12 { width: 3rem; }
#tls-app .w-16 { width: 4rem; }
#tls-app .h-3\.5 { height: 0.875rem; }
#tls-app .h-4 { height: 1rem; }
#tls-app .h-5 { height: 1.25rem; }
#tls-app .h-8 { height: 2rem; }
#tls-app .h-12 { height: 3rem; }
#tls-app .h-16 { height: 4rem; }
#tls-app .min-w-0 { min-width: 0; }
#tls-app .max-w-none { max-width: none; }

/* Borders & Rounded */
#tls-app .rounded-lg { border-radius: 0.5rem; }
#tls-app .rounded-xl { border-radius: 0.75rem; }
#tls-app .rounded-2xl { border-radius: 1rem; }
#tls-app .rounded-full { border-radius: 9999px; }

/* Position */
#tls-app .relative { position: relative; }
#tls-app .absolute { position: absolute; }
#tls-app .top-4 { top: 1rem; }
#tls-app .right-4 { right: 1rem; }

/* Display */
#tls-app .block { display: block; }

/* Additional spacing */
#tls-app .p-5 { padding: 1.25rem; }
#tls-app .p-8 { padding: 2rem; }
#tls-app .px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; }
#tls-app .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
#tls-app .px-8 { padding-left: 2rem; padding-right: 2rem; }
#tls-app .py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
#tls-app .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
#tls-app .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
#tls-app .py-12 { padding-top: 3rem; padding-bottom: 3rem; }
#tls-app .mt-2 { margin-top: 0.5rem; }
#tls-app .mb-5 { margin-bottom: 1.25rem; }
#tls-app .gap-1\.5 { gap: 0.375rem; }
#tls-app .space-y-2\.5 > * + * { margin-top: 0.625rem; }

/* Misc */
#tls-app .transition-colors { transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; }
#tls-app .cursor-pointer { cursor: pointer; }
#tls-app .prose { line-height: 1.75; }
#tls-app .prose p { margin-bottom: 1em; }

/* Responsive */
@media (min-width: 640px) {
  #tls-app .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  #tls-app .md\:py-12 { padding-top: 3rem; padding-bottom: 3rem; }
  #tls-app .md\:p-8 { padding: 2rem; }
  #tls-app .md\:p-6 { padding: 1.5rem; }
  #tls-app .md\:flex-row { flex-direction: row; }
  #tls-app .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #tls-app .md\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
  #tls-app .md\:text-base { font-size: 1rem; line-height: 1.5rem; }
}
@media (min-width: 1024px) {
  #tls-app .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Hide TOC plugin inside our app */
#tls-app .ez-toc-container,
#tls-app [class*="ez-toc"],
#tls-app .lwptoc { display: none; }

/* ===== Cinematic UI — Beethoven / Immortal Beloved Base ===== */
#tls-app {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--color-surface-700);
  line-height: 1.7;
  font-weight: 300;
}

/* Parchment texture overlay on the app container */
#tls-app::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.4' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.025;
  mix-blend-mode: multiply;
}

#tls-app > * {
  position: relative;
  z-index: 1;
}

#tls-app *,
#tls-app *::before,
#tls-app *::after {
  box-sizing: border-box;
}

/* ===== Theme Compatibility Reset (WoodMart / heavy themes) ===== */

#tls-app button,
#tls-app [type="button"],
#tls-app [type="submit"] {
  text-transform: none;
  letter-spacing: normal;
  line-height: inherit;
  min-height: 0;
  height: auto;
  appearance: none;
  -webkit-appearance: none;
}

#tls-app h1,
#tls-app h2,
#tls-app h3,
#tls-app h4,
#tls-app h5,
#tls-app h6 {
  color: inherit;
  font-family: inherit;
  font-weight: inherit;
  font-style: normal;
  text-transform: none;
  line-height: 1.3;
  margin: 0;
}

#tls-app input,
#tls-app select,
#tls-app textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
}

#tls-app a {
  text-decoration: none;
}

/* Structural layout — explicit wrapper styles for WoodMart compatibility */
#tls-app > .max-w-6xl {
  max-width: 72rem;
  margin-left: auto;
  margin-right: auto;
  padding: 2rem 1rem;
}

@media (min-width: 768px) {
  #tls-app > .max-w-6xl {
    padding: 3rem 1rem;
  }
}

/* ===== Hero Section — Cinematic Opening ===== */
#tls-app .tls-hero {
  position: relative;
  padding: 3rem 0 2rem;
  text-align: center;
}

#tls-app .tls-hero h1 {
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-surface-900);
  margin: 0 0 0.5rem;
  line-height: 1.15;
  white-space: nowrap;
}

@media (min-width: 768px) {
  #tls-app .tls-hero h1 {
    font-size: 3.25rem;
  }
}

#tls-app .tls-hero p {
  color: var(--color-surface-500);
  font-size: 1rem;
  max-width: 36rem;
  margin: 0 auto;
  line-height: 1.7;
}

#tls-app .tls-hero-accent {
  display: block;
  width: 56px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-tesla-red), transparent);
  margin: 1.25rem auto 0;
}

#tls-app .tls-count-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-tesla-red);
  background: var(--color-tesla-red-50);
  border: 1px solid var(--color-tesla-red-100);
  margin-bottom: 1rem;
}

/* ===== Manuscript Cards (Beethoven — aged parchment) ===== */
.tls-glass,
#tls-app .tls-glass {
  background: var(--color-surface-50);
  border: 1px solid var(--color-surface-200);
  box-shadow: 0 1px 4px rgba(42, 32, 21, 0.06), 0 1px 2px rgba(42, 32, 21, 0.04);
}

.tls-glass-hover:hover,
#tls-app .tls-glass-hover:hover {
  background: var(--color-surface-50);
  border-color: var(--color-surface-300);
  box-shadow: 0 4px 16px rgba(42, 32, 21, 0.08);
}

/* ===== Search Wrapper ===== */
#tls-app .tls-search-wrap {
  max-width: 32rem;
  margin: 0 auto 2rem;
}

#tls-app .tls-search-wrap .tls-search-inner {
  position: relative;
  background: var(--color-surface-50);
  border: 1px solid var(--color-surface-200);
  border-radius: 14px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  transition: all 0.25s ease;
}

#tls-app .tls-search-wrap .tls-search-inner:focus-within {
  border-color: var(--color-tesla-red);
  box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.1), 0 2px 8px rgba(42, 32, 21, 0.06);
}

#tls-app .tls-search-wrap input[type="search"] {
  width: 100%;
  background: transparent;
  border: none;
  padding: 0.875rem 1rem 0.875rem 2.75rem;
  font-size: 0.9375rem;
  color: var(--color-surface-800);
  outline: none;
}

#tls-app .tls-search-wrap input[type="search"]::placeholder {
  color: var(--color-surface-400);
}

#tls-app .tls-search-wrap .tls-search-icon {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.125rem;
  height: 1.125rem;
  color: var(--color-surface-400);
  pointer-events: none;
}

/* ===== Filter Bar ===== */
#tls-app .tls-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  padding: 0.75rem 1rem;
  background: var(--color-surface-50);
  border: 1px solid var(--color-surface-200);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

/* ===== Punch Up — Tesla Red Accent (Restrained) ===== */
.tls-glow,
#tls-app .tls-glow {
  transition: box-shadow 0.3s ease, transform 0.2s ease;
}

.tls-glow:hover,
#tls-app .tls-glow:hover {
  box-shadow: 0 4px 16px rgba(184, 134, 11, 0.25), 0 2px 8px rgba(184, 134, 11, 0.12);
  transform: translateY(-1px);
}

.tls-glow:active,
#tls-app .tls-glow:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(184, 134, 11, 0.18);
}

/* ===== Cinematic Entrance — Lighter, Subtler ===== */
.tls-entrance {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.tls-entrance.tls-visible {
  opacity: 1;
  transform: translateY(0);
}

.tls-entrance-scale {
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.tls-entrance-scale.tls-visible {
  opacity: 1;
  transform: scale(1);
}

.tls-entrance-slide {
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 0.45s ease-out, transform 0.45s ease-out;
}

.tls-entrance-slide.tls-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Stagger children */
.tls-stagger > .tls-entrance:nth-child(1) { transition-delay: 0s; }
.tls-stagger > .tls-entrance:nth-child(2) { transition-delay: 0.06s; }
.tls-stagger > .tls-entrance:nth-child(3) { transition-delay: 0.12s; }
.tls-stagger > .tls-entrance:nth-child(4) { transition-delay: 0.18s; }
.tls-stagger > .tls-entrance:nth-child(5) { transition-delay: 0.24s; }
.tls-stagger > .tls-entrance:nth-child(6) { transition-delay: 0.30s; }
.tls-stagger > .tls-entrance:nth-child(7) { transition-delay: 0.36s; }
.tls-stagger > .tls-entrance:nth-child(8) { transition-delay: 0.42s; }
.tls-stagger > .tls-entrance:nth-child(9) { transition-delay: 0.48s; }

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .tls-entrance, .tls-entrance-scale, .tls-entrance-slide {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .tls-glow:hover { transform: none; }
}

/* ===== Waveform Container ===== */
.tls-waveform,
#tls-app .tls-waveform {
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-surface-100);
  border: 1px solid var(--color-surface-200);
}

.tls-waveform canvas {
  display: block;
}

/* ===== Mini Waveform in Cards ===== */
#tls-app .tls-mini-waveform {
  background: var(--color-surface-100);
  border-radius: 10px;
  padding: 4px 0;
  overflow: hidden;
}

/* ===== Primary Button (Punch Up) ===== */
.tls-btn-primary,
#tls-app .tls-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--color-tesla-red);
  color: #fff;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.5;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  text-transform: none;
}

.tls-btn-primary:hover,
#tls-app .tls-btn-primary:hover {
  background: var(--color-tesla-red-dark);
  color: #fff;
  text-decoration: none;
}

.tls-btn-primary:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* ===== Ghost Button (Pull Back) ===== */
.tls-btn-ghost,
#tls-app .tls-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem !important;
  background: transparent !important;
  color: var(--color-surface-600) !important;
  border: 1px solid var(--color-surface-300) !important;
  border-radius: 10px !important;
  font-weight: 500;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  box-shadow: none !important;
  -webkit-appearance: none;
}

.tls-btn-ghost:hover,
#tls-app .tls-btn-ghost:hover {
  background: var(--color-surface-100) !important;
  border-color: var(--color-surface-400) !important;
  color: var(--color-surface-800) !important;
  text-decoration: none;
}

/* ===== Range Slider ===== */
.tls-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: var(--color-surface-200);
  border-radius: 2px;
  outline: none;
}

.tls-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-tesla-red);
  cursor: pointer;
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.tls-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-tesla-red);
  cursor: pointer;
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

/* ===== Region Handle Dots ===== */
.tls-region-handle {
  position: absolute;
  top: 2px;
  width: 24px;
  height: 24px;
  background: var(--color-tesla-red);
  border: 3px solid #fff;
  border-radius: 50%;
  cursor: grab;
  z-index: 5;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  transform: translateX(-50%);
  transition: box-shadow 0.15s, transform 0.15s;
}

.tls-region-handle:hover {
  box-shadow: 0 2px 10px rgba(184, 134, 11, 0.4);
  transform: translateX(-50%) scale(1.15);
}

.tls-region-handle:active,
.tls-region-handle.tls-dragging {
  cursor: grabbing;
  box-shadow: 0 3px 12px rgba(184, 134, 11, 0.5);
  transform: translateX(-50%) scale(1.1);
}

/* ===== Upload Drop Zone ===== */
.tls-dropzone {
  border: 2px dashed var(--color-surface-300);
  border-radius: 16px;
  padding: 3rem 2rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background: var(--color-surface-50);
}

.tls-dropzone:hover,
.tls-dropzone.tls-dragover {
  border-color: var(--color-tesla-red);
  background: var(--color-tesla-red-50);
}

.tls-dropzone.tls-dragover {
  transform: scale(1.005);
  box-shadow: 0 0 0 4px rgba(184, 134, 11, 0.08);
}

/* ===== Validation Badge ===== */
.tls-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
}

.tls-badge-pass {
  background: #ECFDF5;
  color: #059669;
}

.tls-badge-fail {
  background: #FEF2F2;
  color: #DC2626;
}

.tls-badge-pending {
  background: #FFFBEB;
  color: #D97706;
}

/* ===== Sound Card — Compact Horizontal Layout ===== */
#tls-app .tls-sound-card {
  background: var(--color-surface-50);
  border: 1px solid var(--color-surface-200);
  border-radius: 14px;
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

#tls-app .tls-sound-card:hover {
  border-color: var(--color-surface-300);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07), 0 2px 8px rgba(0, 0, 0, 0.03);
}

#tls-app .tls-sound-card .tls-card-body {
  padding: 0.875rem 1rem;
}

/* Player row: play btn + waveform + duration */
#tls-app .tls-card-player-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.625rem;
}

#tls-app .tls-card-waveform-col {
  flex: 1;
  min-width: 0;
}

#tls-app .tls-card-duration {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-surface-400);
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

/* Play button */
#tls-app .tls-mini-play-btn {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px;
  max-height: 32px !important;
  border-radius: 50% !important;
  background: var(--color-tesla-red) !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  gap: 0 !important;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  padding: 0 !important;
  box-shadow: 0 2px 6px rgba(184, 134, 11, 0.25);
}

#tls-app .tls-mini-play-btn:hover {
  background: var(--color-tesla-red-dark) !important;
  transform: scale(1.08);
  box-shadow: 0 3px 10px rgba(184, 134, 11, 0.35);
}

#tls-app .tls-mini-play-btn:active {
  transform: scale(1.02);
}

#tls-app .tls-mini-play-btn svg {
  width: 12px;
  height: 12px;
  fill: white;
}

/* Single page play button override — keep larger */
#tls-app .tls-btn-primary.tls-mini-play-btn {
  width: auto !important;
  height: auto !important;
  border-radius: 10px !important;
  padding: 0.75rem 1.5rem !important;
}

#tls-app .tls-btn-primary.tls-mini-play-btn svg {
  width: 16px;
  height: 16px;
}

/* Info row: title + meta + arrow */
#tls-app .tls-card-info-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#tls-app .tls-card-info-left {
  flex: 1;
  min-width: 0;
}

#tls-app .tls-sound-card .tls-card-title {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-surface-800);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0 0 0.125rem;
  line-height: 1.3;
}

#tls-app .tls-sound-card .tls-card-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}

#tls-app .tls-sound-card .tls-card-title a:hover {
  color: var(--color-tesla-red);
}

/* Card meta */
#tls-app .tls-sound-card .tls-card-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.6875rem;
  color: var(--color-surface-400);
}

#tls-app .tls-sound-card .tls-card-category {
  padding: 0.0625rem 0.375rem;
  border-radius: 4px;
  background: var(--color-surface-100);
  color: var(--color-surface-500);
  font-weight: 500;
}

#tls-app .tls-sound-card .tls-rating {
  color: #F59E0B;
}

#tls-app .tls-card-dl {
  color: var(--color-surface-400);
}

/* Detail arrow button */
#tls-app .tls-card-detail-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: var(--color-surface-400);
  background: var(--color-surface-100);
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
  text-decoration: none;
}

#tls-app .tls-card-detail-btn:hover {
  color: var(--color-tesla-red);
  background: var(--color-tesla-red-50);
}

/* ===== Tag Quick Filter (centered, above search) ===== */
#tls-app .tls-hero-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.375rem;
  margin-bottom: 1.5rem;
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}

#tls-app .tls-tag-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-surface-500);
  background: var(--color-surface-50);
  border: 1px solid var(--color-surface-200);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  text-transform: none;
}

#tls-app .tls-tag-pill:hover {
  color: var(--color-surface-700);
  border-color: var(--color-surface-300);
}

#tls-app .tls-tag-pill.tls-active {
  background: var(--color-surface-800);
  border-color: var(--color-surface-800);
  color: #fff;
}

#tls-app .tls-tag-pill .tls-tag-count {
  font-size: 0.625rem;
  margin-left: 0.25rem;
  opacity: 0.6;
}

/* ===== Modal ===== */
#tls-app .tls-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

#tls-app .tls-modal-overlay.tls-active {
  opacity: 1;
  visibility: visible;
}

#tls-app .tls-modal {
  background: var(--color-surface-50) !important;
  border: 1px solid var(--color-surface-200) !important;
  border-radius: 20px !important;
  padding: 2rem !important;
  max-width: 480px !important;
  width: 90% !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12) !important;
  transform: scale(0.97) translateY(8px);
  transition: transform 0.3s ease;
  position: relative !important;
}

#tls-app .tls-modal-overlay.tls-active .tls-modal {
  transform: scale(1) translateY(0);
}

/* Modal — Close button */
#tls-app .tls-modal-close {
  position: absolute !important;
  top: 1rem !important;
  right: 1rem !important;
  left: auto !important;
  bottom: auto !important;
  color: var(--color-surface-400);
  background: none !important;
  border: none !important;
  padding: 0.25rem !important;
  margin: 0 !important;
  cursor: pointer;
  line-height: 1 !important;
  min-height: 0 !important;
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

#tls-app .tls-modal-close:hover {
  color: var(--color-surface-900);
}

/* Modal — QR variant */
#tls-app .tls-modal-qr {
  text-align: center !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 2.5rem 2rem 2rem !important;
}

#tls-app .tls-modal-title {
  font-weight: 700 !important;
  font-size: 1.125rem !important;
  margin: 0 0 1.25rem !important;
  padding: 0 !important;
  color: var(--color-surface-800) !important;
  text-align: center !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  line-height: 1.4 !important;
  width: 100%;
}

#tls-app .tls-qr-canvas {
  display: inline-block !important;
  background: #FFFFFF !important;
  border-radius: 12px !important;
  padding: 1rem !important;
  margin: 0 auto 1.25rem !important;
}

#tls-app .tls-modal-hint {
  color: var(--color-surface-400) !important;
  font-size: 0.875rem !important;
  margin: 0 !important;
  text-align: center !important;
}

/* ===== File Size Warning Banner ===== */
#tls-app .tls-size-warning {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-surface-100);
  border: 1px solid var(--color-surface-200);
  border-radius: 10px;
  padding: 0.625rem 0.875rem;
  margin-bottom: 0.75rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--color-surface-500);
}

#tls-app .tls-size-warning svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: var(--color-tesla-red);
  opacity: 0.8;
}

#tls-app .tls-size-warning strong {
  font-weight: 600;
  color: var(--color-surface-700);
}

#tls-app .tls-size-warning-link {
  color: var(--color-tesla-red) !important;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

#tls-app .tls-size-warning-link:hover {
  text-decoration: underline;
}

/* ===== Oversize Modal ===== */
#tls-app .tls-oversize-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-surface-100);
  color: var(--color-tesla-red);
  margin: 0 auto 1.25rem;
}

#tls-app .tls-oversize-icon svg {
  width: 24px;
  height: 24px;
}

#tls-app .tls-oversize-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

/* ===== Pagination ===== */
#tls-app .tls-pagination {
  display: flex;
  gap: 0.375rem;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

#tls-app .tls-page-dots {
  color: var(--color-surface-400);
  font-size: 0.875rem;
  padding: 0 0.125rem;
  user-select: none;
}

#tls-app .tls-page-arrow {
  font-size: 1.125rem;
  font-weight: 600;
}

#tls-app .tls-page-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

@media (max-width: 639px) {
  #tls-app .tls-page-btn {
    width: 34px;
    height: 34px;
    font-size: 0.75rem;
  }
}

#tls-app .tls-page-btn {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-surface-600);
  background: var(--color-surface-50);
  border: 1px solid var(--color-surface-200);
  cursor: pointer;
  transition: all 0.2s ease;
}

#tls-app .tls-page-btn:hover {
  background: var(--color-surface-100);
  color: var(--color-surface-800);
  border-color: var(--color-surface-300);
}

#tls-app .tls-page-btn.tls-active {
  background: var(--color-tesla-red);
  border-color: var(--color-tesla-red);
  color: #fff;
  box-shadow: 0 2px 8px rgba(184, 134, 11, 0.25);
}

/* ===== Category Pills ===== */
#tls-app .tls-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.4375rem 1rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-surface-600);
  background: var(--color-surface-100);
  border: 1px solid var(--color-surface-200);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  text-transform: none;
}

#tls-app .tls-pill:hover {
  background: var(--color-surface-150);
  color: var(--color-surface-800);
  border-color: var(--color-surface-300);
}

#tls-app .tls-pill.tls-active {
  background: var(--color-tesla-red-50);
  border-color: var(--color-tesla-red);
  color: var(--color-tesla-red);
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(184, 134, 11, 0.12);
}

#tls-app .tls-pill .tls-pill-count {
  font-size: 0.6875rem;
  color: var(--color-surface-400);
  margin-left: 0.25rem;
}

#tls-app .tls-pill.tls-active .tls-pill-count {
  color: rgba(184, 134, 11, 0.6);
}

/* ===== Sort Select ===== */
#tls-app .tls-sort-select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--color-surface-50);
  border: 1px solid var(--color-surface-200);
  border-radius: 10px;
  padding: 0.5rem 2.25rem 0.5rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-surface-600);
  cursor: pointer;
  transition: all 0.2s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.625rem center;
  background-size: 16px;
  width: auto !important;
  flex-shrink: 0;
}

#tls-app .tls-sort-select:hover {
  border-color: var(--color-surface-300);
}

#tls-app .tls-sort-select:focus {
  outline: none;
  border-color: var(--color-tesla-red);
  box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.08);
}

/* ===== Star Rating ===== */
.tls-stars,
#tls-app .tls-stars {
  display: inline-flex !important;
  gap: 4px !important;
}

.tls-star,
#tls-app .tls-star {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  cursor: pointer;
  color: var(--color-surface-300);
  transition: color 0.15s ease;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0;
  outline: none;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
}

#tls-app .tls-star svg {
  width: 24px !important;
  height: 24px !important;
  display: block !important;
}

.tls-star.tls-filled,
#tls-app .tls-star.tls-filled {
  color: #F59E0B;
}

.tls-star:hover,
#tls-app .tls-star:hover {
  color: #FBBF24;
}

/* Mobile: larger touch targets */
@media (max-width: 767px) {
  #tls-app .tls-star {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }
  #tls-app .tls-star svg {
    width: 28px !important;
    height: 28px !important;
  }
}

/* ===== Step Indicator ===== */
.tls-step {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: 14px;
  border: 1px solid var(--color-surface-200);
  background: var(--color-surface-50);
  transition: all 0.25s ease;
}

.tls-step:hover,
.tls-step.tls-step-active {
  border-color: var(--color-tesla-red-100);
  background: var(--color-tesla-red-50);
}

.tls-step-number {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.875rem;
  background: var(--color-surface-150);
  color: var(--color-surface-600);
  flex-shrink: 0;
}

.tls-step-active .tls-step-number,
.tls-step:hover .tls-step-number {
  background: var(--color-tesla-red);
  color: #fff;
}

/* ===== Spinner ===== */
.tls-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--color-surface-200);
  border-top-color: var(--color-tesla-red);
  border-radius: 50%;
  animation: tls-spin 0.6s linear infinite;
}

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

/* ===== Progress Bar ===== */
.tls-progress {
  height: 4px;
  background: var(--color-surface-200);
  border-radius: 2px;
  overflow: hidden;
}

.tls-progress-bar {
  height: 100%;
  background: var(--color-tesla-red);
  border-radius: 2px;
  transition: width 0.3s ease;
}

/* ===== Breadcrumbs ===== */
/* ===== Breadcrumb Bar ===== */
#tls-app .tls-breadcrumb-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.tls-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--color-surface-400);
}

.tls-breadcrumbs a {
  color: var(--color-surface-500);
  text-decoration: none;
  transition: color 0.2s;
}

.tls-breadcrumbs a:hover {
  color: var(--color-tesla-red);
}

.tls-breadcrumbs .tls-separator {
  color: var(--color-surface-300);
}

#tls-app .tls-breadcrumb-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3125rem 0.75rem;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-tesla-red);
  background: var(--color-tesla-red-50);
  border: 1px solid var(--color-tesla-red-100);
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

#tls-app .tls-breadcrumb-cta:hover {
  background: var(--color-tesla-red-100);
  color: var(--color-tesla-red-dark);
}

/* ===== Form Inputs (Light) ===== */
.tls-input {
  width: 100%;
  background: var(--color-surface-50);
  border: 1px solid var(--color-surface-300);
  border-radius: 10px;
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  color: var(--color-surface-800);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.tls-input::placeholder {
  color: var(--color-surface-400);
}

.tls-input:focus {
  outline: none;
  border-color: var(--color-tesla-red);
  box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.08);
}

/* ===== Section Divider ===== */
.tls-divider {
  height: 1px;
  background: var(--color-surface-200);
  border: none;
  margin: 2rem 0;
}

/* ===== CTA Section — Dark Rounded Card ===== */
#tls-app .tls-cta-section {
  background: #171C28;
  border: none;
  border-radius: 20px;
  padding: 2.5rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

#tls-app .tls-cta-section h2 {
  font-size: 1.375rem !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  margin: 0 0 0.5rem !important;
}

#tls-app .tls-cta-section p {
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 0.9375rem !important;
  margin: 0 0 1.5rem !important;
}

/* ===== FAQ Section ===== */
#tls-app .tls-faq-section {
  background: var(--color-surface-50);
  border: 1px solid var(--color-surface-200);
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

@media (min-width: 768px) {
  #tls-app .tls-faq-section {
    padding: 2.5rem;
  }
}

#tls-app .tls-faq-section h2 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 1.5rem;
  color: var(--color-surface-800);
}

#tls-app .tls-faq-item {
  padding: 1rem 0;
  border-bottom: 1px solid var(--color-surface-200);
}

#tls-app .tls-faq-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

#tls-app .tls-faq-item h3 {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-surface-700);
  margin: 0 0 0.5rem;
}

#tls-app .tls-faq-item .tls-faq-answer {
  font-size: 0.875rem;
  color: var(--color-surface-500);
  line-height: 1.7;
  margin: 0;
}

/* ===== Empty State ===== */
#tls-app .tls-empty-state {
  text-align: center;
  padding: 4rem 2rem;
}

#tls-app .tls-empty-state .tls-empty-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 1rem;
  color: var(--color-surface-300);
}

#tls-app .tls-empty-state p {
  color: var(--color-surface-400);
  font-size: 0.9375rem;
}

/* ===== WordPress Theme Overrides ===== */
#tls-app a {
  text-decoration: none;
}

#tls-app h1,
#tls-app h2,
#tls-app h3 {
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  line-height: 1.25;
  font-weight: 700;
  color: var(--color-surface-800);
}

#tls-app button {
  font-family: inherit;
}

#tls-app select {
  font-family: inherit;
}

/* Reset WordPress pagination styles */
#tls-app .nav-links {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
}

#tls-app .nav-links .page-numbers {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-surface-600);
  background: var(--color-surface-50);
  border: 1px solid var(--color-surface-200);
  text-decoration: none;
  transition: all 0.2s ease;
}

#tls-app .nav-links .page-numbers:hover {
  background: var(--color-surface-100);
  color: var(--color-surface-800);
  border-color: var(--color-surface-300);
}

#tls-app .nav-links .page-numbers.current {
  background: var(--color-tesla-red);
  border-color: var(--color-tesla-red);
  color: #fff;
  box-shadow: 0 2px 8px rgba(184, 134, 11, 0.25);
}

#tls-app .nav-links .prev,
#tls-app .nav-links .next {
  width: auto;
  padding: 0 0.75rem;
}

/* ===== Loading Overlay for Grid ===== */
#tls-app #tls-library-grid {
  transition: opacity 0.25s ease;
}

/* ============================================================
   THEME: TRON LEGACY — Cybernetic Dark + Cyan Glow
   Director: Joseph Kosinski | Film: Tron Legacy (2010)
   ============================================================ */
#tls-app[data-tls-theme="tron"] {
  --color-tesla-red: #00D4FF;
  --color-tesla-red-light: #33DFFF;
  --color-tesla-red-dark: #00A8CC;
  --color-tesla-red-50: rgba(0, 212, 255, 0.08);
  --color-tesla-red-100: rgba(0, 212, 255, 0.15);

  --color-surface-50: #0A0A0F;
  --color-surface-100: #0D0D14;
  --color-surface-150: #12121A;
  --color-surface-200: #1A1A25;
  --color-surface-300: #252535;
  --color-surface-400: #555570;
  --color-surface-500: #7878A0;
  --color-surface-600: #A0A0C0;
  --color-surface-700: #C8C8E0;
  --color-surface-800: #E0E0F0;
  --color-surface-900: #F0F0FF;

  font-family: 'Rajdhani', 'Segoe UI', sans-serif;
  color: var(--color-surface-700);
  font-weight: 400;
}

/* Tron: grid texture overlay */
#tls-app[data-tls-theme="tron"]::before {
  background-image:
    linear-gradient(rgba(0, 212, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 212, 255, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 1;
  mix-blend-mode: normal;
}

#tls-app[data-tls-theme="tron"] h1,
#tls-app[data-tls-theme="tron"] h2,
#tls-app[data-tls-theme="tron"] h3 {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  color: var(--color-surface-900);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#tls-app[data-tls-theme="tron"] .tls-hero h1 {
  font-size: 2.5rem;
  letter-spacing: 0.12em;
  text-shadow: 0 0 20px rgba(0, 212, 255, 0.3), 0 0 60px rgba(0, 212, 255, 0.1);
}

@media (min-width: 768px) {
  #tls-app[data-tls-theme="tron"] .tls-hero h1 {
    font-size: 3rem;
  }
}

#tls-app[data-tls-theme="tron"] .tls-hero-accent {
  background: linear-gradient(90deg, transparent, #00D4FF, transparent);
  box-shadow: 0 0 12px rgba(0, 212, 255, 0.4);
}

#tls-app[data-tls-theme="tron"] .tls-count-badge {
  border-color: rgba(0, 212, 255, 0.3);
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.1);
}

/* Tron: glass cards become dark panels with cyan edge glow */
#tls-app[data-tls-theme="tron"] .tls-glass,
#tls-app[data-tls-theme="tron"] .tls-sound-card,
#tls-app[data-tls-theme="tron"] .tls-filter-bar,
#tls-app[data-tls-theme="tron"] .tls-search-wrap .tls-search-inner,
#tls-app[data-tls-theme="tron"] .tls-faq-section {
  background: rgba(10, 10, 18, 0.85);
  border-color: rgba(0, 212, 255, 0.12);
  box-shadow: 0 0 1px rgba(0, 212, 255, 0.2), inset 0 0 1px rgba(0, 212, 255, 0.05);
}

#tls-app[data-tls-theme="tron"] .tls-sound-card:hover {
  border-color: rgba(0, 212, 255, 0.3);
  box-shadow: 0 0 16px rgba(0, 212, 255, 0.12), 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* Tron: play button glow */
#tls-app[data-tls-theme="tron"] .tls-mini-play-btn {
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.4), 0 0 3px rgba(0, 212, 255, 0.6) !important;
}

#tls-app[data-tls-theme="tron"] .tls-mini-play-btn:hover {
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.5), 0 0 6px rgba(0, 212, 255, 0.8) !important;
}

/* Tron: CTA section */
#tls-app[data-tls-theme="tron"] .tls-cta-section {
  background: #0A0A12;
  border: 1px solid rgba(0, 212, 255, 0.15);
}

/* Tron: pill overrides */
#tls-app[data-tls-theme="tron"] .tls-pill.tls-active {
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.2);
}

#tls-app[data-tls-theme="tron"] .tls-tag-pill.tls-active {
  background: #00D4FF;
  border-color: #00D4FF;
  color: #0A0A0F;
}

/* Tron: search focus */
#tls-app[data-tls-theme="tron"] .tls-search-wrap .tls-search-inner:focus-within {
  border-color: #00D4FF;
  box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.15), 0 0 16px rgba(0, 212, 255, 0.08);
}

/* Tron: pagination */
#tls-app[data-tls-theme="tron"] .tls-page-btn.tls-active,
#tls-app[data-tls-theme="tron"] .nav-links .page-numbers.current {
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
}

/* Tron: star rating */
#tls-app[data-tls-theme="tron"] .tls-star.tls-filled {
  color: #00D4FF;
}

/* Tron: glow effects */
#tls-app[data-tls-theme="tron"] .tls-glow:hover {
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.35), 0 0 6px rgba(0, 212, 255, 0.5);
}

/* Tron: sort select */
#tls-app[data-tls-theme="tron"] .tls-sort-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2300D4FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* Tron: waveform background */
#tls-app[data-tls-theme="tron"] .tls-mini-waveform {
  background: rgba(0, 212, 255, 0.04);
}


/* ============================================================
   THEME: INCEPTION — Architectural Gravity + Silver Mist
   Director: Christopher Nolan | Film: Inception (2010)
   ============================================================ */
#tls-app[data-tls-theme="inception"] {
  --color-tesla-red: #6B7FA3;
  --color-tesla-red-light: #8A9DBF;
  --color-tesla-red-dark: #506485;
  --color-tesla-red-50: #F0F3F7;
  --color-tesla-red-100: #DCE3ED;

  --color-surface-50: #FAFBFC;
  --color-surface-100: #F1F3F5;
  --color-surface-150: #E8EBED;
  --color-surface-200: #D5D9DF;
  --color-surface-300: #B0B7C3;
  --color-surface-400: #8892A2;
  --color-surface-500: #6B7280;
  --color-surface-600: #4E5564;
  --color-surface-700: #353B48;
  --color-surface-800: #1E2330;
  --color-surface-900: #0F1319;

  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--color-surface-600);
  font-weight: 400;
  letter-spacing: 0.005em;
}

/* Inception: no texture overlay — clean architectural void */
#tls-app[data-tls-theme="inception"]::before {
  display: none;
}

#tls-app[data-tls-theme="inception"] h1,
#tls-app[data-tls-theme="inception"] h2,
#tls-app[data-tls-theme="inception"] h3 {
  font-family: 'Playfair Display', 'Georgia', serif;
  font-weight: 700;
  color: var(--color-surface-800);
  letter-spacing: -0.01em;
  text-transform: none;
}

#tls-app[data-tls-theme="inception"] .tls-hero h1 {
  font-size: 2.5rem;
  font-weight: 900;
  letter-spacing: -0.025em;
  color: var(--color-surface-900);
}

@media (min-width: 768px) {
  #tls-app[data-tls-theme="inception"] .tls-hero h1 {
    font-size: 3.25rem;
  }
}

#tls-app[data-tls-theme="inception"] .tls-hero-accent {
  background: linear-gradient(90deg, transparent, var(--color-surface-300), transparent);
}

/* Inception: glass cards — frosted silver */
#tls-app[data-tls-theme="inception"] .tls-glass,
#tls-app[data-tls-theme="inception"] .tls-sound-card,
#tls-app[data-tls-theme="inception"] .tls-filter-bar,
#tls-app[data-tls-theme="inception"] .tls-search-wrap .tls-search-inner,
#tls-app[data-tls-theme="inception"] .tls-faq-section {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: var(--color-surface-200);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

/* Inception: CTA section */
#tls-app[data-tls-theme="inception"] .tls-cta-section {
  background: #1A1D26;
  border: 1px solid rgba(180, 180, 200, 0.12);
}

/* Inception: tag active — slate blue */
#tls-app[data-tls-theme="inception"] .tls-tag-pill.tls-active {
  background: var(--color-surface-800);
  border-color: var(--color-surface-800);
  color: #fff;
}

/* Inception: pill active */
#tls-app[data-tls-theme="inception"] .tls-pill.tls-active {
  background: var(--color-tesla-red-50);
  border-color: var(--color-tesla-red);
  color: var(--color-tesla-red-dark);
}

/* Inception: star rating — warm amber (the spinning top) */
#tls-app[data-tls-theme="inception"] .tls-star.tls-filled {
  color: #D4A843;
}

/* Inception: sort select */
#tls-app[data-tls-theme="inception"] .tls-sort-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7FA3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}


/* ============================================================
   THEME: HER — Soft Minimalism + Warm Blush
   Director: Spike Jonze | Film: Her (2013) + 2001 influence
   Palette: warm whites, soft coral/peach, muted rose, airy
   ============================================================ */
#tls-app[data-tls-theme="her"] {
  --color-tesla-red: #E8836B;
  --color-tesla-red-light: #F0A08D;
  --color-tesla-red-dark: #D06A55;
  --color-tesla-red-50: #FFF5F2;
  --color-tesla-red-100: #FDE8E2;

  --color-surface-50: #FFFCFB;
  --color-surface-100: #FFF8F5;
  --color-surface-150: #FFF0EB;
  --color-surface-200: #F5E0D8;
  --color-surface-300: #E0C8BF;
  --color-surface-400: #B8A098;
  --color-surface-500: #8E7E78;
  --color-surface-600: #6B5D58;
  --color-surface-700: #4A3E3A;
  --color-surface-800: #332A27;
  --color-surface-900: #1E1816;

  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--color-surface-600);
  font-weight: 300;
  letter-spacing: 0.01em;
  line-height: 1.75;
}

/* Her: no texture — pure clean void */
#tls-app[data-tls-theme="her"]::before {
  display: none;
}

#tls-app[data-tls-theme="her"] h1,
#tls-app[data-tls-theme="her"] h2,
#tls-app[data-tls-theme="her"] h3 {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  color: var(--color-surface-800);
  letter-spacing: -0.01em;
  text-transform: none;
}

#tls-app[data-tls-theme="her"] .tls-hero h1 {
  font-size: 2.25rem;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--color-surface-700);
}

@media (min-width: 768px) {
  #tls-app[data-tls-theme="her"] .tls-hero h1 {
    font-size: 3rem;
  }
}

#tls-app[data-tls-theme="her"] .tls-hero-accent {
  background: linear-gradient(90deg, transparent, var(--color-tesla-red), transparent);
  height: 1px;
  opacity: 0.5;
}

/* Her: cards — warm white, barely-there border, soft shadow */
#tls-app[data-tls-theme="her"] .tls-glass,
#tls-app[data-tls-theme="her"] .tls-sound-card,
#tls-app[data-tls-theme="her"] .tls-filter-bar,
#tls-app[data-tls-theme="her"] .tls-search-wrap .tls-search-inner,
#tls-app[data-tls-theme="her"] .tls-faq-section {
  background: rgba(255, 252, 251, 0.9);
  border-color: rgba(224, 200, 191, 0.4);
  box-shadow: 0 2px 12px rgba(51, 42, 39, 0.04);
}

#tls-app[data-tls-theme="her"] .tls-sound-card:hover {
  border-color: rgba(232, 131, 107, 0.25);
  box-shadow: 0 6px 24px rgba(232, 131, 107, 0.08);
}

/* Her: CTA */
#tls-app[data-tls-theme="her"] .tls-cta-section {
  background: #2A1F1D;
  border: 1px solid rgba(232, 131, 107, 0.15);
}

/* Her: play button — soft coral circle */
#tls-app[data-tls-theme="her"] .tls-mini-play-btn {
  box-shadow: 0 2px 8px rgba(232, 131, 107, 0.2) !important;
}

/* Her: pill active — soft rose */
#tls-app[data-tls-theme="her"] .tls-pill.tls-active {
  box-shadow: none;
}

#tls-app[data-tls-theme="her"] .tls-tag-pill.tls-active {
  background: var(--color-tesla-red);
  border-color: var(--color-tesla-red);
  color: #fff;
}

/* Her: search focus */
#tls-app[data-tls-theme="her"] .tls-search-wrap .tls-search-inner:focus-within {
  border-color: var(--color-tesla-red);
  box-shadow: 0 0 0 3px rgba(232, 131, 107, 0.08);
}

/* Her: stars — warm coral */
#tls-app[data-tls-theme="her"] .tls-star.tls-filled {
  color: #E8836B;
}

/* Her: sort select */
#tls-app[data-tls-theme="her"] .tls-sort-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23E8836B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* Her: waveform container */
#tls-app[data-tls-theme="her"] .tls-mini-waveform {
  background: rgba(255, 240, 235, 0.5);
}

/* Her: count badge */
#tls-app[data-tls-theme="her"] .tls-count-badge {
  border-color: rgba(232, 131, 107, 0.25);
}


/* ============================================================
   THEME: MINIONS — Retro Pop + Meme Yellow
   Director: Pierre Coffin | Film: Minions / Despicable Me
   Palette: banana yellow, denim blue, bold black, playful
   ============================================================ */
#tls-app[data-tls-theme="minions"] {
  --color-tesla-red: #FFD200;
  --color-tesla-red-light: #FFE04A;
  --color-tesla-red-dark: #E0B800;
  --color-tesla-red-50: #FFFDE6;
  --color-tesla-red-100: #FFF8B3;

  --color-surface-50: #FFFEF5;
  --color-surface-100: #FFFCE8;
  --color-surface-150: #FFF8D4;
  --color-surface-200: #EEEADC;
  --color-surface-300: #D4CFBF;
  --color-surface-400: #8E8878;
  --color-surface-500: #6B6658;
  --color-surface-600: #45413A;
  --color-surface-700: #2D2A25;
  --color-surface-800: #1A1815;
  --color-surface-900: #0D0C0A;

  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--color-surface-600);
  font-weight: 400;
  line-height: 1.65;
}

/* Minions: fun dot-matrix texture */
#tls-app[data-tls-theme="minions"]::before {
  background-image: radial-gradient(circle, rgba(255, 210, 0, 0.04) 1px, transparent 1px);
  background-size: 16px 16px;
  opacity: 1;
  mix-blend-mode: normal;
}

#tls-app[data-tls-theme="minions"] h1,
#tls-app[data-tls-theme="minions"] h2,
#tls-app[data-tls-theme="minions"] h3 {
  font-family: 'Lilita One', cursive;
  font-weight: 400;
  color: var(--color-surface-800);
  letter-spacing: 0.02em;
  text-transform: none;
}

#tls-app[data-tls-theme="minions"] .tls-hero h1 {
  font-size: 2.75rem;
  color: var(--color-surface-900);
  text-shadow: 2px 2px 0 rgba(255, 210, 0, 0.3);
}

@media (min-width: 768px) {
  #tls-app[data-tls-theme="minions"] .tls-hero h1 {
    font-size: 3.5rem;
  }
}

#tls-app[data-tls-theme="minions"] .tls-hero-accent {
  background: #FFD200;
  height: 4px;
  border-radius: 2px;
  width: 64px;
  box-shadow: 0 2px 0 rgba(0,0,0,0.1);
}

/* Minions: cards — bright white with thick playful borders */
#tls-app[data-tls-theme="minions"] .tls-glass,
#tls-app[data-tls-theme="minions"] .tls-sound-card,
#tls-app[data-tls-theme="minions"] .tls-filter-bar,
#tls-app[data-tls-theme="minions"] .tls-search-wrap .tls-search-inner,
#tls-app[data-tls-theme="minions"] .tls-faq-section {
  background: #FFFEF5;
  border: 2px solid var(--color-surface-200);
  border-radius: 16px;
  box-shadow: 3px 3px 0 var(--color-surface-200);
}

#tls-app[data-tls-theme="minions"] .tls-sound-card:hover {
  border-color: #FFD200;
  box-shadow: 4px 4px 0 rgba(255, 210, 0, 0.3);
  transform: translateY(-3px);
}

/* Minions: play button — bright yellow with black icon */
#tls-app[data-tls-theme="minions"] .tls-mini-play-btn {
  box-shadow: 2px 2px 0 rgba(0,0,0,0.15) !important;
}

#tls-app[data-tls-theme="minions"] .tls-mini-play-btn svg {
  fill: #1A1815 !important;
}

/* Minions: primary button — yellow with dark text */
#tls-app[data-tls-theme="minions"] .tls-btn-primary {
  color: #1A1815;
  font-weight: 700;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.12);
  border-radius: 12px;
}

#tls-app[data-tls-theme="minions"] .tls-btn-primary:hover {
  color: #1A1815;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.15);
}

/* Minions: CTA */
#tls-app[data-tls-theme="minions"] .tls-cta-section {
  background: #1A1815;
  border: 2px solid #FFD200;
  box-shadow: 4px 4px 0 rgba(255, 210, 0, 0.2);
}

/* Minions: pill active — denim blue (overalls!) */
#tls-app[data-tls-theme="minions"] .tls-pill.tls-active {
  background: #4A6FA5;
  border-color: #4A6FA5;
  color: #fff;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.1);
}

#tls-app[data-tls-theme="minions"] .tls-tag-pill.tls-active {
  background: #4A6FA5;
  border-color: #4A6FA5;
  color: #fff;
}

/* Minions: count badge — yellow */
#tls-app[data-tls-theme="minions"] .tls-count-badge {
  background: #FFD200;
  border-color: #E0B800;
  color: #1A1815;
  font-weight: 700;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.08);
}

/* Minions: search focus — denim blue */
#tls-app[data-tls-theme="minions"] .tls-search-wrap .tls-search-inner:focus-within {
  border-color: #4A6FA5;
  box-shadow: 0 0 0 3px rgba(74, 111, 165, 0.12);
}

/* Minions: stars — banana yellow */
#tls-app[data-tls-theme="minions"] .tls-star.tls-filled {
  color: #FFD200;
}

/* Minions: glow → drop shadow (no glow, retro pop) */
#tls-app[data-tls-theme="minions"] .tls-glow:hover {
  box-shadow: 4px 4px 0 rgba(255, 210, 0, 0.3);
}

/* Minions: sort select — denim arrow */
#tls-app[data-tls-theme="minions"] .tls-sort-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234A6FA5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  border: 2px solid var(--color-surface-200);
  border-radius: 12px;
  box-shadow: 2px 2px 0 var(--color-surface-200);
}

/* Minions: page buttons — chunky */
#tls-app[data-tls-theme="minions"] .tls-page-btn {
  border: 2px solid var(--color-surface-200);
  border-radius: 10px;
  font-weight: 700;
}

#tls-app[data-tls-theme="minions"] .tls-page-btn.tls-active {
  background: #4A6FA5;
  border-color: #4A6FA5;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.1);
}

/* Minions: detail arrow — denim */
#tls-app[data-tls-theme="minions"] .tls-card-detail-btn:hover {
  background: #4A6FA5;
  color: #fff;
}


/* ============================================================
   THEME: TESLA — Precision Noir + Electric Blue
   Director: Denis Villeneuve | Film: Blade Runner 2049 (2017)
   Reference: teslano1.com — cold blacks, clean white content,
   deep blue (#0F4C81) accent, negative space, sans-serif
   ============================================================ */
#tls-app[data-tls-theme="tesla"] {
  --color-tesla-red: #0F4C81;
  --color-tesla-red-light: #1A6BB5;
  --color-tesla-red-dark: #0A3660;
  --color-tesla-red-50: #EDF3F9;
  --color-tesla-red-100: #D0E0F0;

  /* Surface: light mode with deep dark hero contrast */
  --color-surface-50: #FFFFFF;
  --color-surface-100: #F6F7F9;
  --color-surface-150: #EEF0F3;
  --color-surface-200: #E2E5EA;
  --color-surface-300: #C8CDD6;
  --color-surface-400: #8892A2;
  --color-surface-500: #5F6A7D;
  --color-surface-600: #3E4555;
  --color-surface-700: #2A2F3B;
  --color-surface-800: #1A1E28;
  --color-surface-900: #0C0E14;

  font-family: 'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--color-surface-600);
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* Tesla: no texture — pure precision void */
#tls-app[data-tls-theme="tesla"]::before {
  display: none;
}

/* Tesla: headings — clean, weighted, no-nonsense */
#tls-app[data-tls-theme="tesla"] h1,
#tls-app[data-tls-theme="tesla"] h2,
#tls-app[data-tls-theme="tesla"] h3 {
  font-family: 'Inter', 'Noto Sans TC', sans-serif;
  font-weight: 700;
  color: var(--color-surface-800);
  letter-spacing: -0.02em;
  text-transform: none;
}

/* Tesla: hero — dark rounded card */
#tls-app[data-tls-theme="tesla"] .tls-hero {
  background: #0C0E14;
  border-radius: 20px;
  padding: 3rem 1.5rem 2.5rem;
  margin-bottom: 1.5rem;
}

#tls-app[data-tls-theme="tesla"] .tls-hero h1 {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #FFFFFF;
  text-shadow: none;
}

@media (min-width: 768px) {
  #tls-app[data-tls-theme="tesla"] .tls-hero h1 {
    font-size: 3.4rem;
  }
}

#tls-app[data-tls-theme="tesla"] .tls-hero p {
  color: rgba(255, 255, 255, 0.6);
}

#tls-app[data-tls-theme="tesla"] .tls-hero-accent {
  background: linear-gradient(90deg, transparent, #0F4C81, transparent);
  opacity: 0.8;
}

#tls-app[data-tls-theme="tesla"] .tls-count-badge {
  background: rgba(15, 76, 129, 0.12);
  border-color: rgba(15, 76, 129, 0.25);
  color: #FFFFFF;
}

#tls-app[data-tls-theme="tesla"] .tls-tag-pill {
  background: #FFFFFF;
  border-color: var(--color-surface-200);
  color: var(--color-surface-600);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

#tls-app[data-tls-theme="tesla"] .tls-tag-pill .tls-tag-count {
  color: var(--color-surface-400);
}

#tls-app[data-tls-theme="tesla"] .tls-tag-pill:hover {
  background: #EDF3F9;
  border-color: #0F4C81;
  color: #0F4C81;
}

#tls-app[data-tls-theme="tesla"] .tls-tag-pill.tls-active {
  background: #0F4C81;
  border-color: #0F4C81;
  color: #FFFFFF;
}

#tls-app[data-tls-theme="tesla"] .tls-tag-pill.tls-active .tls-tag-count {
  color: rgba(255, 255, 255, 0.7);
}

/* Tesla: glass cards — clean white with precise shadow */
#tls-app[data-tls-theme="tesla"] .tls-glass,
#tls-app[data-tls-theme="tesla"] .tls-sound-card,
#tls-app[data-tls-theme="tesla"] .tls-filter-bar,
#tls-app[data-tls-theme="tesla"] .tls-search-wrap .tls-search-inner,
#tls-app[data-tls-theme="tesla"] .tls-faq-section {
  background: #FFFFFF;
  border-color: var(--color-surface-200);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03);
}

#tls-app[data-tls-theme="tesla"] .tls-sound-card:hover {
  border-color: rgba(15, 76, 129, 0.3);
  box-shadow: 0 4px 20px rgba(15, 76, 129, 0.08), 0 8px 32px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}

/* Tesla: search focus — blue precision ring */
#tls-app[data-tls-theme="tesla"] .tls-search-wrap .tls-search-inner:focus-within {
  border-color: #0F4C81;
  box-shadow: 0 0 0 3px rgba(15, 76, 129, 0.1), 0 4px 16px rgba(15, 76, 129, 0.06);
}

/* Tesla: play button — solid blue, no nonsense */
#tls-app[data-tls-theme="tesla"] .tls-mini-play-btn {
  background: #0F4C81 !important;
  box-shadow: 0 2px 8px rgba(15, 76, 129, 0.3) !important;
}

#tls-app[data-tls-theme="tesla"] .tls-mini-play-btn:hover {
  background: #1A6BB5 !important;
  box-shadow: 0 4px 16px rgba(15, 76, 129, 0.4) !important;
}

/* Tesla: waveform — cold blue tones */
#tls-app[data-tls-theme="tesla"] .tls-mini-waveform {
  background: var(--color-surface-100);
  border-radius: 6px;
}

/* Tesla: pills — clean, corporate */
#tls-app[data-tls-theme="tesla"] .tls-pill.tls-active {
  background: #0F4C81;
  color: #FFFFFF;
  border-color: #0F4C81;
  box-shadow: 0 2px 8px rgba(15, 76, 129, 0.2);
}

#tls-app[data-tls-theme="tesla"] .tls-pill.tls-active .tls-pill-count {
  color: rgba(255, 255, 255, 0.85) !important;
  opacity: 1;
}

/* Tesla: CTA section */
#tls-app[data-tls-theme="tesla"] .tls-cta-section {
  background: #0C0E14;
  border: 1px solid rgba(15, 76, 129, 0.2);
}

/* Tesla: primary button */
#tls-app[data-tls-theme="tesla"] .tls-btn-primary {
  background: #0F4C81;
  color: #FFFFFF;
}

#tls-app[data-tls-theme="tesla"] .tls-btn-primary:hover {
  background: #1A6BB5;
}

/* Tesla: glow — subtle blue corona */
#tls-app[data-tls-theme="tesla"] .tls-glow:hover {
  box-shadow: 0 0 24px rgba(15, 76, 129, 0.25), 0 0 8px rgba(15, 76, 129, 0.15);
}

/* Tesla: star rating */
#tls-app[data-tls-theme="tesla"] .tls-star.tls-filled {
  color: #0F4C81;
}

/* Tesla: pagination */
#tls-app[data-tls-theme="tesla"] .tls-page-btn.tls-active,
#tls-app[data-tls-theme="tesla"] .nav-links .page-numbers.current {
  background: #0F4C81;
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(15, 76, 129, 0.25);
}

/* Tesla: sort select */
#tls-app[data-tls-theme="tesla"] .tls-sort-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230F4C81' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* Tesla: breadcrumb CTA */
#tls-app[data-tls-theme="tesla"] .tls-breadcrumb-cta {
  color: #0F4C81;
}

#tls-app[data-tls-theme="tesla"] .tls-breadcrumb-cta:hover {
  background: rgba(15, 76, 129, 0.08);
}

/* Tesla: card detail arrow */
#tls-app[data-tls-theme="tesla"] .tls-card-detail-btn:hover {
  background: #0F4C81;
  color: #FFFFFF;
}

/* Tesla: FAQ items */
#tls-app[data-tls-theme="tesla"] .tls-faq-item summary {
  color: var(--color-surface-700);
}

#tls-app[data-tls-theme="tesla"] .tls-faq-item summary:hover {
  color: #0F4C81;
}