/* Moonverse / Modern Subtle Design System — Master Edition v6
   Comprehensive, cohesive, stylish, compact, and subtle visual architecture across ALL pages and aspects of the site.
   - Zero bold/harsh outlines on entry fields (inputs, textareas, selects, search bars).
   - Standardized 1px subtle borders, dual-layer ambient lighting, and delicate glassmorphism.
   - Refined typography hierarchies, tabular-nums for stats, micro-badges, and compact segmented controls.
   - Complete card and surface coverage: Home (.mv-index-book, .mv-index-featured, .mv-home-return-story),
     Browse (.mve-book, .mve-toolbar), Story Detail (.mv-series-intro, .mv-series-panel, .mv-notes-pair),
     Library (.mva-library-book), Profile (.mvp-identity, .mvp-section, .mvp-reading-row),
     Bazaar (.mww-item), Reader (.lunaria-dock-bar), and Community (.mv-community-grid, .mv-thread-card, .mv-sidebar-card).
   - Seamless cohesion across Dark Obsidian, Light Alabaster, Sepia Parchment, and Midnight Sky themes.
*/

/* ==========================================================================
   1. GLOBAL SMOOTHING, OPTICAL NUMERICS & BASE CANVAS
   ========================================================================== */

/* C10: serif token referenced below (reader/explore headings) but never defined;
   declared once so every var(--mv-font-serif) consumer resolves deliberately. */
html {
  --mv-font-serif: "Cinzel", "Playfair Display", Georgia, serif;
}

html, body {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

/* Tabular numerals for stats, dates, scores, chapter counts to prevent layout jitter */
.mv-badge,
.mve-score,
.mv-badge-rating,
.mv-meta-chip,
.mve-meta-chip,
.mva-meta-chip,
.mv-coins-badge,
.mv-sidebar-card span,
.mv-thread-card span,
.mve-book-stats,
.mva-reading-progress,
[data-tabular="true"] {
  font-variant-numeric: tabular-nums !important;
}

/* ==========================================================================
   2. UNIVERSAL ENTRY FIELDS: Zero Bold Outlines & Subtle Ambient Focus
   ========================================================================== */

:is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]):not(.mvs-input-wrap input),
  textarea,
  select,
  .mvs-input-wrap,
  .mva-redeem input,
  .mv-conversation textarea,
  .mve-search-input,
  .mvr-input,
  .mva-toolbar input,
  .mve-toolbar input
) {
  outline: none !important;
  outline-offset: 0 !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: color-mix(in srgb, var(--border) 60%, transparent) !important;
  background-color: color-mix(in srgb, var(--card) 60%, transparent) !important;
  transition: border-color 0.18s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.18s ease !important;
  -webkit-appearance: none;
  appearance: none;
}

/* Focused state: subtle border tint with soft, low-contrast ambient halo */
:is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]):not(.mvs-input-wrap input),
  textarea,
  select,
  .mvs-input-wrap,
  .mva-redeem input,
  .mv-conversation textarea,
  .mve-search-input,
  .mvr-input,
  .mva-toolbar input,
  .mve-toolbar input
):focus,
:is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]):not(.mvs-input-wrap input),
  textarea,
  select,
  .mvs-input-wrap,
  .mva-redeem input,
  .mv-conversation textarea,
  .mve-search-input,
  .mvr-input,
  .mva-toolbar input,
  .mve-toolbar input
):focus-within,
:is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]):not(.mvs-input-wrap input),
  textarea,
  select,
  .mvs-input-wrap,
  .mva-redeem input,
  .mv-conversation textarea,
  .mve-search-input,
  .mvr-input,
  .mva-toolbar input,
  .mve-toolbar input
):focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
  border-color: color-mix(in srgb, var(--primary) 75%, var(--border)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent),
              0 1px 2px rgba(0, 0, 0, 0.04) !important;
  background-color: color-mix(in srgb, var(--card) 90%, transparent) !important;
}

/* Subtle placeholder styling */
::placeholder {
  color: color-mix(in srgb, var(--muted-foreground) 75%, transparent) !important;
  font-weight: 400;
}

/* Interactive elements: clean, non-chunky focus-visible rings */
:where(a, button, summary, [role="tab"], [role="switch"]):focus-visible {
  outline: 1.5px solid color-mix(in srgb, var(--ring, var(--primary)) 65%, transparent) !important;
  outline-offset: 2px !important;
}

/* Remove default focus outline on mouse clicks */
:where(a, button, [role="tab"]):focus:not(:focus-visible) {
  outline: none !important;
}

/* ==========================================================================
   3. WHOLE-SITE HEADER, NAVBAR & NAVIGATION DOCK
   ========================================================================== */

header.sticky,
.mv-header {
  border-bottom: 1px solid color-mix(in srgb, var(--border) 35%, transparent) !important;
  background: color-mix(in srgb, var(--background) 88%, transparent) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

/* Nav links: sleek rounded pill style */
.mv-header a,
.mv-header button {
  border-radius: 0.5rem !important;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Mobile bottom nav dock: sleek floating aesthetic */
nav[aria-label="Mobile"] {
  border-top: 1px solid color-mix(in srgb, var(--border) 40%, transparent) !important;
  background: color-mix(in srgb, var(--card) 92%, transparent) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: 0 -4px 20px -2px rgba(0, 0, 0, 0.12) !important;
}

/* Quick search trigger button in header */
.mvs-trigger-btn {
  border-radius: 0.625rem !important;
  border: 1px solid color-mix(in srgb, var(--border) 40%, transparent) !important;
  background: color-mix(in srgb, var(--card) 60%, transparent) !important;
  transition: all 0.15s ease !important;
}
.mvs-trigger-btn:hover {
  border-color: color-mix(in srgb, var(--primary) 40%, transparent) !important;
  background: color-mix(in srgb, var(--card) 90%, transparent) !important;
}

/* ==========================================================================
   4. UNIVERSAL CARD & SURFACE ARCHITECTURE ACROSS ALL PAGES
   ========================================================================== */

/* Universal Card Selectors across ALL rooms:
   - Community: .celestial-card, .mv-page-heading, .mv-thread-card, .mv-ann-card, .mv-sidebar-card
   - Home: .mv-index-featured, .mv-index-book, .mv-home-return-story, .mv-index-update, .mv-index-collection
   - Browse & Discover: .mve-card, .mve-book, .mve-trope-card
   - Story Detail: .mv-series-intro, .mv-series-identity, .mv-series-panel, .mv-story-synopsis, .mv-notes-pair, .mv-notes-body
   - Library: .mva-card, .mva-library-book, .mva-collection-card
   - Profile: .mvp-identity, .mvp-section, .mvp-reading-row, .mvp-favorites, .mvp-wallet-section
   - Bazaar: .mww-item, .mv-bazaar-item, .mva-shop-item, .mva-topup-tier
*/
:is(
  .celestial-card,
  .mv-page-heading,
  .mv-index-featured,
  .mv-home-return,
  .mv-index-updates,
  .mv-index-popular,
  .mv-index-tags,
  .mv-index-book,
  .mv-home-return-story,
  .mv-index-update,
  .mv-index-collection,
  .mve-card,
  .mve-book,
  .mve-trope-card,
  .mv-series-intro,
  .mv-series-panel,
  .mv-story-synopsis,
  .mv-notes-pair,
  .mv-notes-body,
  .mva-card,
  .mva-library-book,
  .mva-collection-card,
  .mvp-identity,
  .mvp-section,
  .mvp-reading-row,
  .mvp-favorites,
  .mvp-wallet-section,
  .mww-item,
  .mv-bazaar-item,
  .mva-shop-item,
  .mva-topup-tier,
  .mv-thread-card,
  .mv-ann-card,
  .mv-sidebar-card
) {
  border-width: 1px !important;
  border-style: solid !important;
  border-color: color-mix(in srgb, var(--border) 40%, transparent) !important;
  background-color: color-mix(in srgb, var(--card) 65%, transparent) !important;
  backdrop-filter: blur(14px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(180%) !important;
  border-radius: 0.875rem !important; /* Standard 14px radius */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05),
              0 1px 3px rgba(0, 0, 0, 0.03),
              0 4px 14px -3px rgba(0, 0, 0, 0.04) !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.2s ease,
              box-shadow 0.2s ease,
              background-color 0.2s ease !important;
}

/* Universal Hover Elevation on Interactive Cards */
:is(
  .mv-index-book,
  .mv-home-return-story,
  .mv-index-collection,
  .mve-card,
  .mve-book,
  .mva-card,
  .mva-library-book,
  .mva-collection-card,
  .mvp-reading-row,
  .mww-item,
  .mv-bazaar-item,
  .mva-shop-item,
  .mva-topup-tier,
  .mv-thread-card,
  .mv-ann-card,
  .mv-sidebar-card:hover,
  .hover-lift
):hover {
  transform: translateY(-2px) !important;
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border)) !important;
  background-color: color-mix(in srgb, var(--card) 85%, transparent) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08),
              0 8px 24px -4px rgba(0, 0, 0, 0.1),
              0 14px 32px -6px rgba(0, 0, 0, 0.06) !important;
}

/* Major Room Containers: 16px radius */
.mv-index-featured,
.mv-page-heading,
.mv-series-intro,
.mvp-identity {
  border-radius: 1rem !important;
}

/* Novel Cover Image Framing */
:is(
  .mv-index-cover img,
  .mve-cover img,
  .mve-cover-wrap img,
  .mv-story-card img,
  .mva-cover img,
  .mva-library-covers img,
  .mv-cover img,
  .mvp-cover img
) {
  border-radius: 0.625rem !important; /* 10px cover radius */
  border: 1px solid color-mix(in srgb, var(--border) 35%, transparent) !important;
  box-shadow: 0 2px 8px -1px rgba(0, 0, 0, 0.12) !important;
}

/* ==========================================================================
   5. TYPOGRAPHY HIERARCHIES, EYEBROWS & MICRO-BADGES
   ========================================================================== */

/* Universal Eyebrow labels */
.mv-eyebrow,
.mva-eyebrow,
.mve-eyebrow,
.mvp-eyebrow {
  font-size: 0.625rem !important; /* 10px */
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--muted-foreground) !important;
}

/* Badges: subtle, delicate, non-garish */
.mv-badge,
.mve-badge,
.mva-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem !important; /* 11px */
  font-weight: 700;
  padding: 0.125rem 0.4375rem !important;
  border-radius: 0.375rem !important;
  border-width: 1px;
  border-style: solid;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

/* Micro metadata chips */
.mv-meta-chip,
.mve-meta-chip,
.mva-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem;
  color: var(--muted-foreground);
  font-weight: 500;
}

/* Micro rating badges */
.mv-badge-rating,
.mve-score {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem !important;
  font-weight: 800 !important;
  padding: 0.125rem 0.375rem !important;
  border-radius: 0.375rem !important;
  background: color-mix(in srgb, var(--card) 90%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--border) 50%, transparent) !important;
}

/* ==========================================================================
   6. INTERACTIVE CONTROLS, SEGMENTED BARS & BUTTONS
   ========================================================================== */

/* Segmented Control Containers (Tabs, Filter Bars across ALL rooms) */
div[role="tablist"],
.mv-segmented-bar,
.mva-tabs,
.mva-shelves-nav,
.mve-status-tabs,
.mvp-navigation,
.mv-settings-nav {
  padding: 3px !important;
  border-radius: 0.75rem !important;
  background: color-mix(in srgb, var(--card) 85%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--border) 45%, transparent) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

div[role="tablist"] button[role="tab"],
.mv-segmented-bar button,
.mva-tabs button,
.mve-status-tabs button,
.mvp-navigation button,
.mv-settings-nav button {
  height: 2.25rem !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  border-radius: 0.625rem !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer;
}

div[role="tablist"] button[role="tab"][aria-selected="true"],
.mv-segmented-bar button.is-active,
.mva-tabs button.is-active,
.mve-status-tabs button[aria-pressed="true"],
.mv-settings-nav button.active {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08), 0 4px 10px -2px rgba(0, 0, 0, 0.06) !important;
}

/* Universal Button Polish */
.mv-button-primary,
button.btn-primary,
.mva-primary {
  border-radius: 0.625rem !important;
  font-weight: 700 !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.01em !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.mv-button-primary:hover,
button.btn-primary:hover,
.mva-primary:hover {
  transform: translateY(-0.5px);
  box-shadow: 0 4px 12px -2px rgba(var(--primary-rgb, 99, 102, 241), 0.35) !important;
}

/* Progress indicator on cards across all rooms */
.mv-progress-bar,
.mva-progress-bar,
.mva-reading-progress,
.mvp-reading-progress {
  height: 3px !important;
  border-radius: 9999px !important;
  background: color-mix(in srgb, var(--muted) 80%, transparent) !important;
  overflow: hidden;
}
.mv-progress-fill,
.mva-progress-fill,
.mva-reading-progress > div,
.mvp-reading-progress > div {
  height: 100% !important;
  border-radius: 9999px !important;
  background: linear-gradient(to right, var(--primary), color-mix(in srgb, var(--primary) 70%, #38bdf8)) !important;
}

/* ==========================================================================
   7. ROOM-SPECIFIC WIDTHS & CANVAS ALIGNMENT
   ========================================================================== */

/* Ensure all rooms fill the standard 1276px <main> container width seamlessly */
.mv-index,
.mve-explore,
.mv-series,
.mva-library,
.mvp-profile,
.mv-page-community,
.mv-settings-workspace,
.mv-bazaar,
.mv-membership {
  width: 100% !important;
  max-width: 100% !important;
}

/* ==========================================================================
   8. COMMUNITY PAVILION: Master Architectural & Aesthetic Overhaul
   ========================================================================== */

/* 1. Page Canvas & Layout */
#root main .mv-page-community,
.mv-page-community {
  max-width: 1240px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 16px 80px 16px !important;
  box-sizing: border-box !important;
}

@media (min-width: 768px) {
  #root main .mv-page-community,
  .mv-page-community {
    padding: 0 24px 90px 24px !important;
  }
}

.mv-community-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1.25rem !important;
  align-items: start !important;
  width: 100% !important;
}

.mv-community-main {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
  width: 100% !important;
}

.mv-community-sidebar {
  display: none !important;
  flex-direction: column !important;
  gap: 1rem !important;
  flex-shrink: 0 !important;
  width: 100% !important;
}

@media (min-width: 1024px) {
  .mv-community-grid {
    grid-template-columns: minmax(0, 1fr) 340px !important;
    gap: 1.75rem !important;
  }
  .mv-community-sidebar {
    display: flex !important;
    position: sticky !important;
    top: 5rem !important;
  }
}

@media (min-width: 1280px) {
  .mv-community-grid {
    grid-template-columns: minmax(0, 1fr) 360px !important;
    gap: 2rem !important;
  }
}

/* 2. Hero Header Banner (.mv-page-heading) */
#root main .mv-page-community .mv-page-heading,
.mv-page-community .mv-page-heading {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  padding: 24px 28px !important;
  border-radius: 16px !important;
  background: color-mix(in srgb, var(--card) 65%, transparent) linear-gradient(115deg, color-mix(in srgb, var(--primary) 8%, var(--card)), var(--card)) !important;
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent) !important;
  border-left: 1px solid color-mix(in srgb, var(--border) 60%, transparent) !important; /* overrides legacy 3px border */
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 20px -4px rgba(0, 0, 0, 0.15) !important;
  margin-bottom: 20px !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

@media (min-width: 640px) {
  #root main .mv-page-community .mv-page-heading,
  .mv-page-community .mv-page-heading {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
}

/* Ambient celestial glow in top right */
#root main .mv-page-community .mv-page-heading::after,
.mv-page-community .mv-page-heading::after {
  content: "" !important;
  position: absolute !important;
  top: -50px !important;
  right: -50px !important;
  width: 240px !important;
  height: 240px !important;
  background: radial-gradient(circle, color-mix(in srgb, var(--primary) 14%, transparent) 0%, transparent 70%) !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

/* Title h1 with Cinzel / Playfair serif typography */
#root main .mv-page-community .mv-page-heading h1,
.mv-page-community .mv-page-heading h1 {
  font-family: Cinzel, "Playfair Display", Georgia, serif !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
  color: var(--foreground) !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

@media (min-width: 768px) {
  #root main .mv-page-community .mv-page-heading h1,
  .mv-page-community .mv-page-heading h1 {
    font-size: 28px !important;
  }
}

#root main .mv-page-community .mv-page-heading h1 svg,
.mv-page-community .mv-page-heading h1 svg {
  width: 22px !important;
  height: 22px !important;
  color: var(--primary) !important;
  flex-shrink: 0 !important;
}

/* Subtitle */
#root main .mv-page-community .mv-page-heading p,
.mv-page-community .mv-page-heading p {
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: var(--muted-foreground) !important;
  margin: 4px 0 0 0 !important;
  max-width: 600px !important;
}

/* Action Button ("New Thread" / "Post Announcement") */
#root main .mv-page-community .mv-page-heading button,
.mv-page-community .mv-page-heading button {
  height: 38px !important;
  border-radius: 9999px !important;
  padding: 0 18px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
  border: none !important;
  box-shadow: 0 2px 10px -2px color-mix(in srgb, var(--primary) 45%, transparent) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

#root main .mv-page-community .mv-page-heading button:hover,
.mv-page-community .mv-page-heading button:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px -2px color-mix(in srgb, var(--primary) 55%, transparent) !important;
  filter: brightness(1.06) !important;
}

#root main .mv-page-community .mv-page-heading button:active,
.mv-page-community .mv-page-heading button:active {
  transform: translateY(0) !important;
}

/* 3. Section Tabs Navigation (iOS/macOS Segmented Track) */
#root main .mv-page-community [role="tablist"],
.mv-page-community [role="tablist"],
#root main .mv-page-community .grid.grid-cols-3,
.mv-page-community .grid.grid-cols-3 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  padding: 4px !important;
  border-radius: 12px !important;
  background: color-mix(in srgb, var(--card) 60%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--border) 50%, transparent) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  gap: 4px !important;
  margin-bottom: 20px !important;
}

#root main .mv-page-community [role="tablist"] [role="tab"],
.mv-page-community [role="tablist"] [role="tab"] {
  height: 38px !important;
  border-radius: 9px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 0 12px !important;
  background: transparent !important;
  color: var(--muted-foreground) !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  user-select: none !important;
}

#root main .mv-page-community [role="tablist"] [role="tab"]:hover,
.mv-page-community [role="tablist"] [role="tab"]:hover {
  color: var(--foreground) !important;
  background: color-mix(in srgb, var(--card) 50%, transparent) !important;
}

#root main .mv-page-community [role="tablist"] [role="tab"][aria-selected="true"],
.mv-page-community [role="tablist"] [role="tab"][aria-selected="true"] {
  background: color-mix(in srgb, var(--primary) 18%, var(--card)) !important;
  color: var(--primary) !important;
  font-weight: 700 !important;
  border-color: color-mix(in srgb, var(--primary) 45%, transparent) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12) !important;
}

#root main .mv-page-community [role="tablist"] [role="tab"] svg,
.mv-page-community [role="tablist"] [role="tab"] svg {
  width: 15px !important;
  height: 15px !important;
  flex-shrink: 0 !important;
}

/* Badges inside tab buttons */
#root main .mv-page-community [role="tablist"] [role="tab"] span:last-child,
.mv-page-community [role="tablist"] [role="tab"] span:last-child {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  padding: 1px 6px !important;
  border-radius: 9999px !important;
  line-height: 1 !important;
}

#root main .mv-page-community [role="tablist"] [role="tab"][aria-selected="true"] span:last-child,
.mv-page-community [role="tablist"] [role="tab"][aria-selected="true"] span:last-child {
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
}

#root main .mv-page-community [role="tablist"] [role="tab"][aria-selected="false"] span:last-child,
.mv-page-community [role="tablist"] [role="tab"][aria-selected="false"] span:last-child {
  background: color-mix(in srgb, var(--muted) 70%, transparent) !important;
  color: var(--muted-foreground) !important;
}

/* 4. Category Tags & Search Toolbar */
#root main .mv-page-community .mva-ann-toolbar,
.mv-page-community .mva-ann-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
  flex-wrap: nowrap !important;
}

#root main .mv-page-community .mva-ann-tags,
.mv-page-community .mva-ann-tags {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  flex: 1 1 0% !important;
  min-width: 0 !important;
  padding: 2px 0 !important;
}

#root main .mv-page-community .mva-ann-tags::-webkit-scrollbar,
.mv-page-community .mva-ann-tags::-webkit-scrollbar {
  display: none !important;
}

#root main .mv-page-community .mva-ann-tags button,
.mv-page-community .mva-ann-tags button {
  height: 34px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border-radius: 9999px !important;
  background: color-mix(in srgb, var(--card) 60%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--border) 50%, transparent) !important;
  color: var(--muted-foreground) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  flex-shrink: 0 !important;
}

#root main .mv-page-community .mva-ann-tags button:hover,
.mv-page-community .mva-ann-tags button:hover {
  color: var(--foreground) !important;
  border-color: color-mix(in srgb, var(--border) 80%, transparent) !important;
}

#root main .mv-page-community .mva-ann-tags button.bg-primary,
#root main .mv-page-community .mva-ann-tags button.bg-amber-500,
#root main .mv-page-community .mva-ann-tags button.font-bold,
.mv-page-community .mva-ann-tags button.bg-primary,
.mv-page-community .mva-ann-tags button.bg-amber-500,
.mv-page-community .mva-ann-tags button.font-bold {
  background: color-mix(in srgb, var(--primary) 18%, var(--card)) !important;
  border-color: color-mix(in srgb, var(--primary) 50%, transparent) !important;
  color: var(--primary) !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 4px color-mix(in srgb, var(--primary) 25%, transparent) !important;
}

#root main .mv-page-community .mva-ann-tags button span:last-child,
.mv-page-community .mva-ann-tags button span:last-child {
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 1px 6px !important;
  border-radius: 9999px !important;
  margin-left: 2px !important;
}

/* Search input */
#root main .mv-page-community .mva-ann-search,
.mv-page-community .mva-ann-search {
  position: relative !important;
  width: 220px !important;
  flex-shrink: 0 !important;
}

#root main .mv-page-community .mva-ann-search input,
.mv-page-community .mva-ann-search input {
  width: 100% !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: color-mix(in srgb, var(--card) 65%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  padding: 0 30px 0 34px !important;
  font-size: 12.5px !important;
  color: var(--foreground) !important;
  transition: all 0.2s ease !important;
}

#root main .mv-page-community .mva-ann-search input:focus,
.mv-page-community .mva-ann-search input:focus {
  border-color: color-mix(in srgb, var(--primary) 65%, var(--border)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent) !important;
  outline: none !important;
}

#root main .mv-page-community .mva-ann-search svg,
.mv-page-community .mva-ann-search svg {
  position: absolute !important;
  left: 11px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--muted-foreground) !important;
  pointer-events: none !important;
}

@media (max-width: 639px) {
  #root main .mv-page-community .mva-ann-toolbar,
  .mv-page-community .mva-ann-toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  #root main .mv-page-community .mva-ann-tags,
  .mv-page-community .mva-ann-tags {
    width: 100% !important;
  }
  #root main .mv-page-community .mva-ann-search,
  .mv-page-community .mva-ann-search {
    width: 100% !important;
  }
}

/* 5. Thread Cards & Announcement Cards */
#root main .mv-page-community .mv-thread-card,
#root main .mv-page-community .mv-ann-card,
.mv-page-community .mv-thread-card,
.mv-page-community .mv-ann-card {
  padding: 18px 20px !important;
  border-radius: 14px !important;
  background: color-mix(in srgb, var(--card) 60%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--border) 45%, transparent) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.12) !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
  text-decoration: none !important;
}

#root main .mv-page-community .mv-thread-card:hover,
#root main .mv-page-community .mv-ann-card:hover,
.mv-page-community .mv-thread-card:hover,
.mv-page-community .mv-ann-card:hover {
  transform: translateY(-2px) !important;
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border)) !important;
  background: color-mix(in srgb, var(--card) 80%, transparent) !important;
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.22) !important;
}

/* Pinned styles */
#root main .mv-page-community .mv-thread-card.is-pinned,
.mv-page-community .mv-thread-card.is-pinned {
  border-color: color-mix(in srgb, var(--primary) 40%, transparent) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 7%, var(--card)), color-mix(in srgb, var(--card) 65%, transparent)) !important;
}

#root main .mv-page-community .mv-ann-card.is-pinned,
.mv-page-community .mv-ann-card.is-pinned {
  border-color: color-mix(in srgb, #f59e0b 40%, transparent) !important;
  background: linear-gradient(135deg, color-mix(in srgb, #f59e0b 6%, var(--card)), color-mix(in srgb, var(--card) 65%, transparent)) !important;
}

/* Titles */
#root main .mv-page-community .mv-thread-card h3,
#root main .mv-page-community .mv-ann-card h3,
.mv-page-community .mv-thread-card h3,
.mv-page-community .mv-ann-card h3 {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--foreground) !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  transition: color 0.15s ease !important;
}

#root main .mv-page-community .mv-thread-card:hover h3,
.mv-page-community .mv-thread-card:hover h3 {
  color: var(--primary) !important;
}

#root main .mv-page-community .mv-ann-card:hover h3,
.mv-page-community .mv-ann-card:hover h3 {
  color: #f59e0b !important;
}

/* Snippet Preview */
#root main .mv-page-community .mv-thread-card p,
#root main .mv-page-community .mv-ann-card p,
.mv-page-community .mv-thread-card p,
.mv-page-community .mv-ann-card p {
  font-size: 12.5px !important;
  line-height: 1.6 !important;
  color: var(--muted-foreground) !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Card Header Badges Row */
#root main .mv-page-community .mv-thread-card > div:first-child,
#root main .mv-page-community .mv-ann-card > div:first-child,
.mv-page-community .mv-thread-card > div:first-child,
.mv-page-community .mv-ann-card > div:first-child {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

/* Card Footer Stats Row */
#root main .mv-page-community .mv-thread-card > div:last-child,
#root main .mv-page-community .mv-ann-card > div:last-child,
.mv-page-community .mv-thread-card > div:last-child,
.mv-page-community .mv-ann-card > div:last-child {
  border-top: 1px solid color-mix(in srgb, var(--border) 35%, transparent) !important;
  padding-top: 10px !important;
  margin-top: 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 11.5px !important;
  color: var(--muted-foreground) !important;
}

/* 6. Thread & Announcement Detail View */
#root main .mv-page-community .mv-community-main > .space-y-4 > article,
#root main .mv-page-community .mv-community-main > .space-y-6 > article,
#root main .mv-page-community article.celestial-card,
#root main .mv-page-community article.rounded-3xl,
.mv-page-community article.celestial-card,
.mv-page-community article.rounded-3xl {
  padding: 24px 28px !important;
  border-radius: 16px !important;
  background: color-mix(in srgb, var(--card) 65%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--border) 50%, transparent) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.18) !important;
  margin-top: 12px !important;
}

@media (max-width: 639px) {
  #root main .mv-page-community article.celestial-card,
  #root main .mv-page-community article.rounded-3xl,
  .mv-page-community article.celestial-card,
  .mv-page-community article.rounded-3xl {
    padding: 16px 18px !important;
  }
}

#root main .mv-page-community article h2,
.mv-page-community article h2 {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--foreground) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.35 !important;
  margin: 10px 0 !important;
}

@media (min-width: 640px) {
  #root main .mv-page-community article h2,
  .mv-page-community article h2 {
    font-size: 22px !important;
  }
}

/* Detail article body text */
#root main .mv-page-community article .whitespace-pre-line,
.mv-page-community article .whitespace-pre-line {
  font-size: 13.5px !important;
  line-height: 1.7 !important;
  color: var(--foreground) !important;
  opacity: 0.92 !important;
}

/* Back button */
#root main .mv-page-community .mv-community-main button:has(svg.lucide-arrow-left),
.mv-page-community .mv-community-main button:has(svg.lucide-arrow-left) {
  height: 34px !important;
  padding: 0 14px !important;
  border-radius: 9999px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  background: color-mix(in srgb, var(--card) 65%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent) !important;
  color: var(--foreground) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
}

#root main .mv-page-community .mv-community-main button:has(svg.lucide-arrow-left):hover,
.mv-page-community .mv-community-main button:has(svg.lucide-arrow-left):hover {
  background: color-mix(in srgb, var(--card) 85%, transparent) !important;
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border)) !important;
}

/* Reply Box & Form */
#root main .mv-page-community form:has(textarea),
.mv-page-community form:has(textarea) {
  padding: 20px 22px !important;
  border-radius: 14px !important;
  background: color-mix(in srgb, var(--card) 60%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--border) 50%, transparent) !important;
  backdrop-filter: blur(14px) !important;
}

#root main .mv-page-community textarea,
.mv-page-community textarea {
  border-radius: 10px !important;
  padding: 12px 14px !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: var(--foreground) !important;
  background: color-mix(in srgb, var(--card) 75%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent) !important;
  box-sizing: border-box !important;
}

#root main .mv-page-community textarea:focus,
.mv-page-community textarea:focus {
  border-color: color-mix(in srgb, var(--primary) 70%, var(--border)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent) !important;
}

/* Reply list cards */
#root main .mv-page-community .rounded-3xl:has(p.text-xs),
#root main .mv-page-community [class*="rounded-3xl"][class*="mt-6"],
.mv-page-community [class*="rounded-3xl"][class*="mt-6"] {
  padding: 18px 20px !important;
  border-radius: 14px !important;
  background: color-mix(in srgb, var(--card) 55%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--border) 45%, transparent) !important;
  box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.1) !important;
}

/* 7. Sidebar Cards */
#root main .mv-page-community .mv-sidebar-card,
.mv-page-community .mv-sidebar-card {
  padding: 16px 18px !important;
  border-radius: 14px !important;
  background: color-mix(in srgb, var(--card) 60%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--border) 45%, transparent) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.12) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
}

#root main .mv-page-community .mv-sidebar-card h3,
.mv-page-community .mv-sidebar-card h3 {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--foreground) !important;
  margin: 0 !important;
}

#root main .mv-page-community .mv-sidebar-card > div:first-child,
.mv-page-community .mv-sidebar-card > div:first-child {
  border-bottom: 1px solid color-mix(in srgb, var(--border) 35%, transparent) !important;
  padding-bottom: 8px !important;
}

/* 8. Leaderboard View Harmonization */
#root main .mv-page-leaderboard,
.mv-page-leaderboard {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

#root main .mv-page-leaderboard :is(.rounded-2xl, .rounded-3xl):has(table, [role="table"], .divide-y),
.mv-page-leaderboard :is(.rounded-2xl, .rounded-3xl):has(table, [role="table"], .divide-y) {
  border-radius: 14px !important;
  background: color-mix(in srgb, var(--card) 60%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--border) 45%, transparent) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  padding: 16px 20px !important;
}

/* 9. Community Theme Harmonization */
.theme-light .mv-page-community .mv-page-heading {
  background: rgba(255, 255, 255, 0.8) linear-gradient(115deg, rgba(99, 102, 241, 0.06), #ffffff) !important;
  border-color: rgba(226, 232, 240, 0.8) !important;
  box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.05) !important;
}

.theme-sepia .mv-page-community .mv-page-heading {
  background: rgba(249, 246, 240, 0.85) linear-gradient(115deg, rgba(180, 83, 9, 0.06), #f9f6f0) !important;
  border-color: rgba(224, 216, 202, 0.85) !important;
}

.theme-midnight .mv-page-community .mv-page-heading {
  background: rgba(11, 17, 32, 0.85) linear-gradient(115deg, rgba(245, 158, 11, 0.06), #0b1120) !important;
  border-color: rgba(30, 41, 59, 0.85) !important;
}

/* ==========================================================================
   9. CHAPTER READER WORKSPACE (/chapter/...)
   ========================================================================== */

/* Floating reader dock: modern pill aesthetic */
.mv-reader-dock,
.lunaria-dock-bar {
  border-radius: 9999px !important;
  border: 1px solid color-mix(in srgb, var(--border) 45%, transparent) !important;
  background: color-mix(in srgb, var(--card) 88%, transparent) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  box-shadow: 0 8px 30px -4px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
}

/* Reader top progress bar */
.mv-reader-progress {
  height: 2px !important;
  background: linear-gradient(to right, var(--primary), color-mix(in srgb, var(--primary) 70%, #38bdf8)) !important;
  box-shadow: 0 0 8px var(--primary) !important;
}

/* Reader TOC & Settings Drawers */
.mvr-drawer {
  border-radius: 1.125rem !important;
  border: 1px solid color-mix(in srgb, var(--border) 50%, transparent) !important;
  background: color-mix(in srgb, var(--card) 95%, transparent) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

/* ==========================================================================
   10. UNIVERSAL MODALS, SEARCH DIALOG & COMMAND PALETTE
   ========================================================================== */

dialog,
[role="dialog"] {
  border-radius: 1.125rem !important; /* 18px radius */
  border: 1px solid color-mix(in srgb, var(--border) 45%, transparent) !important;
  background-color: color-mix(in srgb, var(--card) 85%, transparent) !important;
  backdrop-filter: blur(20px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(190%) !important;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.45),
              inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

dialog::backdrop,
[role="dialog"]::backdrop {
  background: rgba(9, 11, 25, 0.65) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

[role="dialog"] > div {
  border-radius: 1.125rem !important; /* 18px modal radius */
  border: 1px solid color-mix(in srgb, var(--border) 45%, transparent) !important;
  box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.35),
              0 0 0 1px color-mix(in srgb, var(--border) 30%, transparent) !important;
}

/* ==========================================================================
   SEARCH MODAL / COMMAND PALETTE (.mvs-dialog)
   Tailored, Stylish, Compact & Subtle Design Architecture
   Fully Cohesive with Site-Wide Modern Obsidian / Alabaster Glass
   ========================================================================== */

dialog.mvs-dialog,
.mvs-dialog {
  position: fixed !important;
  inset: clamp(16px, 6vh, 52px) 0 auto !important;
  margin: 0 auto !important;
  padding: 0 !important;
  width: min(640px, calc(100vw - 24px)) !important;
  max-width: none !important;
  max-height: calc(100dvh - clamp(24px, 10vh, 96px)) !important;
  border-radius: 14px !important;
  border: 1px solid color-mix(in srgb, var(--border) 40%, rgba(255, 255, 255, 0.06)) !important;
  background: color-mix(in srgb, var(--background) 92%, var(--card) 8%) !important;
  backdrop-filter: blur(28px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
  color: var(--foreground) !important;
  font-family: var(--mv-ui-font, "Plus Jakarta Sans", Inter, -apple-system, sans-serif) !important;
  font-size: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 24px 64px -12px rgba(0, 0, 0, 0.55),
              0 0 0 1px rgba(255, 255, 255, 0.04),
              inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  display: flex !important;
  flex-direction: column !important;
  z-index: 60 !important;
}

.mvs-dialog::backdrop {
  background: rgba(8, 12, 20, 0.68) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* Modal Header Bar */
.mvs-dialog .mvs-header,
header.mvs-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  min-height: 52px !important;
  flex-shrink: 0 !important;
  background: transparent !important;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 25%, transparent) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Input Wrap & Inner Input */
.mvs-dialog .mvs-input-wrap {
  display: flex !important;
  flex: 1 !important;
  min-width: 0 !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  height: 38px !important;
  min-height: 38px !important;
  border-radius: 8px !important;
  border: 1px solid color-mix(in srgb, var(--border) 40%, transparent) !important;
  background: color-mix(in srgb, var(--card) 45%, transparent) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15) !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease !important;
}

.mvs-dialog .mvs-input-wrap:focus-within {
  border-color: color-mix(in srgb, var(--primary) 70%, var(--border)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent), inset 0 1px 2px rgba(0, 0, 0, 0.15) !important;
  background: color-mix(in srgb, var(--card) 75%, transparent) !important;
}

.mvs-dialog .mvs-input-wrap svg {
  color: var(--muted-foreground) !important;
  opacity: 0.85 !important;
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
}

.mvs-dialog .mvs-input-wrap input,
.mvs-dialog .mvs-input-wrap input:focus,
.mvs-dialog .mvs-input-wrap input:focus-visible {
  flex: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 34px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  font-size: 13.5px !important;
  color: var(--foreground) !important;
  line-height: 1.4 !important;
}

.mvs-dialog .mvs-input-wrap input::placeholder {
  color: var(--muted-foreground) !important;
  opacity: 0.75 !important;
}

.mvs-dialog .mvs-input-wrap button {
  width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  border-radius: 5px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--muted-foreground) !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: all 0.14s ease !important;
}

.mvs-dialog .mvs-input-wrap button:hover {
  background: color-mix(in srgb, var(--card) 80%, transparent) !important;
  color: var(--foreground) !important;
}

.mvs-dialog .mvs-close {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  border-radius: 8px !important;
  border: 1px solid color-mix(in srgb, var(--border) 35%, transparent) !important;
  background: color-mix(in srgb, var(--card) 45%, transparent) !important;
  color: var(--muted-foreground) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: all 0.15s ease !important;
}

.mvs-dialog .mvs-close:hover {
  background: color-mix(in srgb, var(--card) 85%, transparent) !important;
  color: var(--foreground) !important;
  border-color: color-mix(in srgb, var(--border) 60%, transparent) !important;
}

/* Toolbar: Scopes, Filter Toggle, Sort Dropdown */
.mvs-dialog .mvs-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
  padding: 6px 14px !important;
  min-height: 36px !important;
  background: transparent !important;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 20%, transparent) !important;
}

.mvs-dialog .mvs-scopes {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  border-radius: 7px !important;
  background: color-mix(in srgb, var(--card) 40%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--border) 35%, transparent) !important;
  padding: 2px !important;
  box-shadow: none !important;
}

.mvs-dialog .mvs-scopes button {
  min-height: 24px !important;
  padding: 2px 10px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  border-radius: 5px !important;
  color: var(--muted-foreground) !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  transition: all 0.14s ease !important;
  cursor: pointer !important;
}

.mvs-dialog .mvs-scopes button:hover:not([aria-pressed="true"]) {
  color: var(--foreground) !important;
  background: color-mix(in srgb, var(--card) 60%, transparent) !important;
}

.mvs-dialog .mvs-scopes button[aria-pressed="true"] {
  background: color-mix(in srgb, var(--card) 95%, transparent) !important;
  color: var(--foreground) !important;
  font-weight: 600 !important;
  border-color: color-mix(in srgb, var(--border) 50%, transparent) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}

.mvs-dialog .mvs-toolbar-actions {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
}

.mvs-dialog .mvs-filter-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  min-height: 26px !important;
  padding: 3px 9px !important;
  border-radius: 6px !important;
  border: 1px solid color-mix(in srgb, var(--border) 35%, transparent) !important;
  background: color-mix(in srgb, var(--card) 40%, transparent) !important;
  color: var(--muted-foreground) !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.mvs-dialog .mvs-filter-toggle:hover {
  background: color-mix(in srgb, var(--card) 75%, transparent) !important;
  color: var(--foreground) !important;
  border-color: color-mix(in srgb, var(--border) 55%, transparent) !important;
}

.mvs-dialog .mvs-filter-toggle.is-open,
.mvs-dialog .mvs-filter-toggle[aria-expanded="true"] {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  background: color-mix(in srgb, var(--primary) 12%, var(--card)) !important;
}

.mvs-dialog .mvs-filter-toggle b {
  font-size: 9.5px !important;
  font-weight: 700 !important;
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
  border-radius: 9999px !important;
  padding: 1px 5px !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums !important;
}

.mvs-dialog .mvs-sort {
  min-width: 0 !important;
  max-width: 135px !important;
  min-height: 26px !important;
  border-radius: 6px !important;
  border: 1px solid color-mix(in srgb, var(--border) 35%, transparent) !important;
  background: color-mix(in srgb, var(--card) 40%, transparent) !important;
  padding: 3px 20px 3px 8px !important;
  font-size: 11px !important;
  color: var(--muted-foreground) !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease !important;
  cursor: pointer !important;
}

.mvs-dialog .mvs-sort:hover,
.mvs-dialog .mvs-sort:focus {
  border-color: color-mix(in srgb, var(--border) 60%, transparent) !important;
  outline: none !important;
  color: var(--foreground) !important;
}

/* Advanced Filter Drawer */
.mvs-dialog .mvs-filters {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 10px 14px !important;
  background: color-mix(in srgb, var(--card) 30%, transparent) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 20%, transparent) !important;
}

.mvs-dialog .mvs-filter-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.mvs-dialog .mvs-filter-grid label {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  font-size: 10.5px !important;
  font-weight: 550 !important;
  color: var(--muted-foreground) !important;
}

.mvs-dialog .mvs-filter-grid select {
  height: 28px !important;
  font-size: 11px !important;
  border-radius: 6px !important;
  border: 1px solid color-mix(in srgb, var(--border) 40%, transparent) !important;
  background: color-mix(in srgb, var(--card) 60%, transparent) !important;
  color: var(--foreground) !important;
  padding: 0 8px !important;
}

.mvs-dialog .mvs-clear-filters {
  align-self: flex-start !important;
  font-size: 10.5px !important;
  color: var(--muted-foreground) !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  padding: 2px 4px !important;
  text-decoration: underline !important;
}

.mvs-dialog .mvs-clear-filters:hover {
  color: var(--foreground) !important;
}

/* ==========================================================================
   THE A–Z ALPHABET SCRUBBER RIBBON (.mvs-alphabet)
   Sleek, Compact, Subtle Horizontal Index Ribbon
   ========================================================================== */

.mvs-dialog .mvs-alphabet {
  display: grid !important;
  grid-template-columns: repeat(14, minmax(0, 1fr)) !important;
  gap: 2px !important;
  padding: 6px 14px 6px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 20%, transparent) !important;
  flex-shrink: 0 !important;
}

.mvs-dialog .mvs-alphabet button {
  min-width: 0 !important;
  height: 22px !important;
  min-height: 22px !important;
  padding: 0 !important;
  font-size: 10.5px !important;
  font-weight: 550 !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--muted-foreground) !important;
  border-radius: 4px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.12s ease !important;
}

.mvs-dialog .mvs-alphabet button:hover:not(:disabled):not([aria-pressed="true"]) {
  background: color-mix(in srgb, var(--card) 75%, transparent) !important;
  color: var(--foreground) !important;
  border-color: color-mix(in srgb, var(--border) 35%, transparent) !important;
}

.mvs-dialog .mvs-alphabet button[aria-pressed="true"] {
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--primary) 30%, transparent) !important;
  border-color: transparent !important;
}

.mvs-dialog .mvs-alphabet button:disabled {
  opacity: 0.2 !important;
  cursor: default !important;
  pointer-events: none !important;
}

/* ==========================================================================
   CLEAR HIERARCHY DIVIDER & STATUS BRIDGE (.mvs-section-label)
   ========================================================================== */

.mvs-dialog .mvs-section-label {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 14px 4px !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  flex-shrink: 0 !important;
}

.mvs-section-heading-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
}

.mvs-index-badge.is-active {
  font-size: 10px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  background: color-mix(in srgb, var(--primary) 18%, transparent) !important;
  color: var(--primary) !important;
  border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent) !important;
}

.mvs-dialog .mvs-section-label h3 {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--muted-foreground) !important;
  margin: 0 !important;
}

.mvs-section-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.mvs-clear-index-btn {
  font-size: 10.5px !important;
  color: var(--muted-foreground) !important;
  background: transparent !important;
  border: 0 !important;
  cursor: pointer !important;
  padding: 2px 4px !important;
  border-radius: 4px !important;
  transition: color 0.15s ease !important;
}

.mvs-clear-index-btn:hover {
  color: var(--primary) !important;
  text-decoration: underline !important;
}

/* Scroll Area */
.mvs-dialog .mvs-scroll {
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  min-height: 0 !important;
  flex: 1 !important;
  padding: 4px 10px 10px !important;
  background: transparent !important;
  scrollbar-width: thin !important;
}

/* Recent Searches */
.mvs-dialog .mvs-recents {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 10px !important;
  margin-bottom: 6px !important;
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--card) 40%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--border) 25%, transparent) !important;
}

.mvs-dialog .mvs-recents svg {
  color: var(--muted-foreground) !important;
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0 !important;
}

.mvs-dialog .mvs-recents > div {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-wrap: wrap !important;
  flex: 1 !important;
}

.mvs-dialog .mvs-recents button {
  font-size: 10.5px !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  background: color-mix(in srgb, var(--card) 70%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--border) 35%, transparent) !important;
  color: var(--foreground) !important;
  cursor: pointer !important;
}

.mvs-dialog .mvs-recents button:hover {
  border-color: color-mix(in srgb, var(--primary) 50%, var(--border)) !important;
  color: var(--primary) !important;
}

.mvs-dialog .mvs-history-clear {
  font-size: 10px !important;
  color: var(--muted-foreground) !important;
  background: transparent !important;
  border: 0 !important;
  cursor: pointer !important;
  text-decoration: underline !important;
}

/* ==========================================================================
   STORY ROW LIST (.mvs-results & .mvs-result)
   Clean, Compact & Elegant Rows
   ========================================================================== */

.mvs-dialog .mvs-results {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  padding: 0 !important;
}

.mvs-dialog .mvs-result {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  text-decoration: none !important;
  color: inherit !important;
  cursor: pointer !important;
  transition: all 0.14s ease !important;
  position: relative !important;
}

.mvs-dialog .mvs-result:hover,
.mvs-dialog .mvs-result:focus,
.mvs-dialog .mvs-result[aria-selected="true"] {
  background: color-mix(in srgb, var(--card) 75%, transparent) !important;
  border-color: color-mix(in srgb, var(--border) 40%, transparent) !important;
  outline: none !important;
  transform: translateX(2px) !important;
}

/* Pristine Book Cover Thumbnail */
.mvs-dialog .mvs-cover {
  width: 32px !important;
  height: 44px !important;
  min-width: 32px !important;
  border-radius: 5px !important;
  overflow: hidden !important;
  border: 1px solid color-mix(in srgb, var(--border) 40%, rgba(255, 255, 255, 0.08)) !important;
  background: color-mix(in srgb, var(--card) 90%, transparent) !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
  flex-shrink: 0 !important;
}

.mvs-dialog .mvs-cover img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.mvs-dialog .mvs-cover svg {
  color: var(--muted-foreground) !important;
  opacity: 0.5 !important;
  width: 16px !important;
  height: 16px !important;
}

/* Page icon */
.mvs-dialog .mvs-page-icon {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 6px !important;
  background: color-mix(in srgb, var(--card) 80%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--border) 35%, transparent) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--primary) !important;
  flex-shrink: 0 !important;
}

.mvs-dialog .mvs-page-icon svg {
  width: 15px !important;
  height: 15px !important;
}

/* Story Text Details */
.mvs-dialog .mvs-result-copy {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
  flex: 1 !important;
}

.mvs-dialog .mvs-result-copy > strong {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--foreground) !important;
  line-height: 1.35 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.mvs-dialog .mvs-native {
  font-size: 10px !important;
  color: var(--muted-foreground) !important;
  opacity: 0.8 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.mvs-dialog .mvs-author {
  font-size: 11px !important;
  color: var(--muted-foreground) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.mvs-dialog .mvs-meta {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 1px !important;
  flex-wrap: wrap !important;
}

.mvs-dialog .mvs-meta span {
  font-size: 10px !important;
  color: var(--muted-foreground) !important;
  font-variant-numeric: tabular-nums !important;
}

/* Delicate Shelf & Progress Pills */
.mvs-dialog .mvs-shelf-badge,
.mvs-dialog .mvs-progress {
  font-size: 9.5px !important;
  font-weight: 600 !important;
  padding: 1.5px 7px !important;
  border-radius: 9999px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.02em !important;
  font-variant-numeric: tabular-nums !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  white-space: nowrap !important;
}

.mvs-dialog .mvs-shelf-badge {
  background: color-mix(in srgb, var(--card) 85%, transparent) !important;
  color: var(--muted-foreground) !important;
  border: 1px solid color-mix(in srgb, var(--border) 40%, transparent) !important;
}

.mvs-dialog .mvs-shelf-badge[data-shelf="reading"] {
  background: rgba(59, 130, 246, 0.14) !important;
  color: #60a5fa !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
}

.mvs-dialog .mvs-shelf-badge[data-shelf="completed"] {
  background: rgba(16, 185, 129, 0.14) !important;
  color: #34d399 !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
}

.mvs-dialog .mvs-shelf-badge[data-shelf="plan-to-read"] {
  background: rgba(245, 158, 11, 0.14) !important;
  color: #fbbf24 !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
}

.mvs-dialog .mvs-shelf-badge[data-shelf="on-hold"] {
  background: rgba(148, 163, 184, 0.14) !important;
  color: #cbd5e1 !important;
  border-color: rgba(148, 163, 184, 0.3) !important;
}

.mvs-dialog .mvs-shelf-badge[data-shelf="favorites"] {
  background: rgba(236, 72, 153, 0.14) !important;
  color: #f472b6 !important;
  border-color: rgba(236, 72, 153, 0.3) !important;
}

.mvs-dialog .mvs-progress {
  background: color-mix(in srgb, var(--card) 90%, transparent) !important;
  color: var(--muted-foreground) !important;
  border: 1px solid color-mix(in srgb, var(--border) 30%, transparent) !important;
}

/* Quick Bookmark Action */
.mvs-dialog .mvs-bookmark-btn {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border-radius: 6px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--muted-foreground) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: all 0.14s ease !important;
  flex-shrink: 0 !important;
}

.mvs-dialog .mvs-bookmark-btn:hover {
  background: color-mix(in srgb, var(--card) 85%, transparent) !important;
  color: var(--foreground) !important;
  border-color: color-mix(in srgb, var(--border) 40%, transparent) !important;
}

.mvs-dialog .mvs-bookmark-btn.is-active {
  color: var(--primary) !important;
}

/* Floating Shelf Popover */
.mvs-shelf-popover {
  position: absolute !important;
  z-index: 55 !important;
  border-radius: 10px !important;
  border: 1px solid color-mix(in srgb, var(--border) 45%, rgba(255, 255, 255, 0.08)) !important;
  background: color-mix(in srgb, var(--card) 95%, var(--background)) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.45) !important;
  padding: 4px !important;
  min-width: 170px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.mvs-shelf-popover button {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--foreground) !important;
  cursor: pointer !important;
  transition: background-color 0.12s ease !important;
}

.mvs-shelf-popover button:hover {
  background: color-mix(in srgb, var(--foreground) 8%, transparent) !important;
}

.mvs-shelf-popover button.is-active {
  font-weight: 600 !important;
  color: var(--primary) !important;
}

/* Footer Status Bar */
.mvs-dialog .mvs-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 5px 14px !important;
  min-height: 28px !important;
  flex-shrink: 0 !important;
  background: color-mix(in srgb, var(--card) 30%, transparent) !important;
  border-top: 1px solid color-mix(in srgb, var(--border) 20%, transparent) !important;
  font-size: 10.5px !important;
  color: var(--muted-foreground) !important;
}

.mvs-dialog .mvs-keys {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.mvs-dialog .mvs-keys kbd {
  font-family: inherit !important;
  font-size: 9.5px !important;
  padding: 1px 4px !important;
  border-radius: 3px !important;
  border: 1px solid color-mix(in srgb, var(--border) 40%, transparent) !important;
  background: color-mix(in srgb, var(--card) 60%, transparent) !important;
  color: var(--muted-foreground) !important;
}

.mvs-dialog .mvs-pagination {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
  justify-content: center !important;
  border-top: 1px solid color-mix(in srgb, var(--border) 18%, transparent) !important;
}

.mvs-dialog .mvs-pagination button {
  font-size: 11px !important;
  padding: 3px 10px !important;
  border-radius: 5px !important;
  border: 1px solid color-mix(in srgb, var(--border) 35%, transparent) !important;
  background: color-mix(in srgb, var(--card) 40%, transparent) !important;
  color: var(--foreground) !important;
  cursor: pointer !important;
}

.mvs-dialog .mvs-pagination button:hover:not(:disabled) {
  background: color-mix(in srgb, var(--card) 80%, transparent) !important;
}

.mvs-dialog .mvs-pagination button:disabled {
  opacity: 0.3 !important;
  cursor: default !important;
}

/* ==========================================================================
   THEME ADAPTATIONS (LIGHT, SEPIA, MIDNIGHT)
   ========================================================================== */

/* Light Theme: Pristine Crystalline Alabaster Glass */
.theme-light .mvs-dialog {
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
  color: #0f172a !important;
}

.theme-light .mvs-dialog::backdrop {
  background: rgba(15, 23, 42, 0.35) !important;
}

.theme-light .mvs-dialog .mvs-input-wrap {
  background: rgba(241, 245, 249, 0.8) !important;
  border-color: rgba(203, 213, 225, 0.8) !important;
}

.theme-light .mvs-dialog .mvs-result:hover {
  background: rgba(241, 245, 249, 0.85) !important;
  border-color: rgba(203, 213, 225, 0.6) !important;
}

/* Sepia Theme: Warm Ivory Parchment */
.theme-sepia .mvs-dialog {
  background: rgba(247, 243, 235, 0.95) !important;
  border: 1px solid rgba(180, 83, 9, 0.2) !important;
  box-shadow: 0 20px 50px -10px rgba(45, 20, 5, 0.15) !important;
  color: #2e1065 !important;
}

.theme-sepia .mvs-dialog::backdrop {
  background: rgba(45, 20, 5, 0.4) !important;
}

/* Midnight Theme: Pure OLED Obsidian */
.theme-midnight .mvs-dialog {
  background: rgba(7, 10, 16, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 24px 70px -12px rgba(0, 0, 0, 0.85) !important;
}

/* ==========================================================================
   MOBILE RESPONSIVENESS (<480px)
   ========================================================================== */

@media (max-width: 479px) {
  .mvs-dialog {
    width: calc(100vw - 16px) !important;
    inset: 8px 8px auto !important;
    border-radius: 12px !important;
    max-height: calc(100dvh - 16px) !important;
  }

  .mvs-dialog .mvs-alphabet {
    grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
    gap: 2px !important;
    padding: 4px 10px 6px !important;
  }

  .mvs-dialog .mvs-alphabet button {
    height: 20px !important;
    font-size: 10px !important;
  }

  .mvs-dialog .mvs-header {
    padding: 8px 10px !important;
    min-height: 48px !important;
  }

  .mvs-dialog .mvs-toolbar {
    padding: 4px 10px !important;
  }

  .mvs-dialog .mvs-filter-grid {
    grid-template-columns: 1fr !important;
  }

  .mvs-dialog .mvs-results {
    padding: 0 !important;
  }

  .mvs-dialog .mvs-result {
    padding: 6px 8px !important;
  }
}

/* ==========================================================================
   11. THEME-SPECIFIC HARMONY & CONTRAST
   ========================================================================== */

/* Sepia theme warm parchment adjustments */
.theme-sepia {
  --border: #e0d8ca;
  --card: #f9f6f0;
}

/* Midnight theme OLED deep dark adjustments */
.theme-midnight {
  --border: #1e293b;
  --card: #0b1120;
}

/* Light theme subtle border softening */
.theme-light {
  --border: #e2e8f0;
  --card: #ffffff;
}

/* ==========================================================================
   12. HOMEPAGE COMPREHENSIVE CARD ARCHITECTURE & GEOMETRY
   ========================================================================== */

/* 1. Major Homepage Containers (16px radius, unified glassmorphism) */
:is(
  .mv-index-featured,
  .mv-home-return,
  .mv-index-updates,
  .mv-index-popular,
  .mv-index-tags
) {
  border-width: 1px !important;
  border-style: solid !important;
  border-color: color-mix(in srgb, var(--border) 40%, transparent) !important;
  background-color: color-mix(in srgb, var(--card) 65%, transparent) !important;
  backdrop-filter: blur(14px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(180%) !important;
  border-radius: 1rem !important; /* 16px */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05),
              0 1px 3px rgba(0, 0, 0, 0.03),
              0 4px 14px -3px rgba(0, 0, 0, 0.04) !important;
}

/* 2. Featured Stories Container & Book Cards */
.mv-index-featured {
  padding: 18px 20px !important;
}

.mv-index-feature-grid {
  gap: 14px !important;
}

.mv-index-book {
  padding: 8px 8px 10px !important;
  border-radius: 12px !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: color-mix(in srgb, var(--border) 35%, transparent) !important;
  background-color: color-mix(in srgb, var(--card) 75%, transparent) !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04),
              inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.22s ease !important;
}

.mv-index-book:hover {
  transform: translateY(-3px) !important;
  border-color: color-mix(in srgb, var(--primary) 50%, var(--border)) !important;
  background-color: color-mix(in srgb, var(--card) 90%, transparent) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08),
              0 8px 22px -4px rgba(0, 0, 0, 0.16) !important;
}

.mv-index-cover {
  border-radius: 8px !important;
  overflow: hidden !important;
  aspect-ratio: 2/3 !important;
  width: 100% !important;
  height: auto !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14) !important;
  border: 1px solid color-mix(in srgb, var(--border) 40%, transparent) !important;
}

.mv-index-cover img {
  border-radius: 7px !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.25s ease !important;
}

.mv-index-book:hover .mv-index-cover img {
  transform: scale(1.03) !important;
}

.mv-index-chapters {
  font-variant-numeric: tabular-nums !important;
  border-radius: 4px !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  backdrop-filter: blur(8px) !important;
}

.mv-index-book h2 {
  margin-top: 8px !important;
  font-size: 11.5px !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;
  padding: 0 2px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 2.8em !important;
  transition: color 0.18s ease !important;
}

.mv-index-book:hover h2 {
  color: var(--primary) !important;
}

.mv-index-book-meta {
  margin-top: 4px !important;
  padding: 0 2px !important;
  font-size: 10px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  color: var(--muted-foreground) !important;
}

.mv-index-book-meta > span:last-child {
  color: #fbbf24 !important; /* Gold star */
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important;
}

/* 3. Continue Reading Shelf (.mv-home-return) */
.mv-home-return {
  padding: 10px 16px !important;
}

.mv-home-return-story {
  padding: 6px 12px !important;
  border-radius: 10px !important;
  border: 1px solid color-mix(in srgb, var(--border) 35%, transparent) !important;
  background-color: color-mix(in srgb, var(--card) 80%, transparent) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.mv-home-return-story:hover {
  transform: translateY(-2px) !important;
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border)) !important;
  background-color: color-mix(in srgb, var(--card) 95%, transparent) !important;
  box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.12) !important;
}

.mv-home-return-cover {
  border-radius: 6px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18) !important;
}

/* 4. Genre Navigation Filter Bar (.mv-index-genres) */
.mv-index-genres {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 2px 0 !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}

.mv-index-genre {
  padding: 5px 14px !important;
  border-radius: 9999px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  border: 1px solid color-mix(in srgb, var(--border) 45%, transparent) !important;
  background-color: color-mix(in srgb, var(--card) 60%, transparent) !important;
  color: var(--muted-foreground) !important;
  white-space: nowrap !important;
  transition: all 0.18s ease !important;
}

.mv-index-genre:hover,
.mv-index-genre.is-active {
  color: var(--foreground) !important;
  border-color: color-mix(in srgb, var(--primary) 50%, var(--border)) !important;
  background-color: color-mix(in srgb, var(--primary) 12%, var(--card)) !important;
}

/* 5. Latest Updates Container & Rows (.mv-index-updates) */
.mv-index-columns {
  display: grid !important;
  gap: 18px !important;
}

.mv-index-updates {
  padding: 16px 18px !important;
}

.mv-index-filters button {
  padding: 3px 10px !important;
  border-radius: 9999px !important;
  font-size: 10.5px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--muted-foreground) !important;
  transition: all 0.18s ease !important;
}

.mv-index-filters button.is-active {
  background: color-mix(in srgb, var(--primary) 18%, var(--card)) !important;
  border-color: color-mix(in srgb, var(--primary) 50%, var(--border)) !important;
  color: var(--foreground) !important;
  font-weight: 600 !important;
}

.mv-index-update-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin-top: 10px !important;
  border-top: none !important;
}

.mv-index-update {
  padding: 9px 12px !important;
  border-radius: 10px !important;
  border: 1px solid color-mix(in srgb, var(--border) 25%, transparent) !important;
  background-color: color-mix(in srgb, var(--card) 55%, transparent) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.mv-index-update:hover {
  transform: translateX(3px) !important;
  background-color: color-mix(in srgb, var(--primary) 8%, var(--card)) !important;
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border)) !important;
  box-shadow: 0 3px 10px -2px rgba(0, 0, 0, 0.08) !important;
}

.mv-index-update img {
  border-radius: 6px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16) !important;
}

.mv-index-update-data span {
  font-variant-numeric: tabular-nums !important;
}

.mv-index-free {
  color: #34d399 !important; /* Emerald */
  font-weight: 600 !important;
}

.mv-index-price {
  color: #fbbf24 !important; /* Amber */
  font-weight: 600 !important;
}

/* 6. Popular Sidebar Container & Ranked Items (.mv-index-popular) */
.mv-index-popular {
  padding: 16px 18px !important;
}

.mv-index-popular ol {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  margin-top: 10px !important;
  padding: 0 !important;
  list-style: none !important;
}

.mv-index-popular li a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 7px 10px !important;
  border-radius: 8px !important;
  border: 1px solid transparent !important;
  transition: all 0.18s ease !important;
}

.mv-index-popular li a:hover {
  background-color: color-mix(in srgb, var(--primary) 8%, transparent) !important;
  border-color: color-mix(in srgb, var(--primary) 30%, transparent) !important;
}

.mv-index-rank {
  font-variant-numeric: tabular-nums !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  color: var(--primary) !important;
  width: 20px !important;
  text-align: center !important;
  flex-shrink: 0 !important;
}

.mv-index-popular img {
  border-radius: 6px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16) !important;
}

.mv-index-popular-copy strong {
  font-size: 11.5px !important;
  font-weight: 600 !important;
}

.mv-index-popular-copy span {
  font-size: 10px !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--muted-foreground) !important;
}

/* 7. Curated Collections (.mv-index-collection) */
.mv-index-collection-grid {
  display: grid !important;
  gap: 14px !important;
  margin-top: 12px !important;
}

.mv-index-collection {
  padding: 14px 16px !important;
  border-radius: 14px !important;
  border: 1px solid color-mix(in srgb, var(--border) 35%, transparent) !important;
  background-color: color-mix(in srgb, var(--card) 65%, transparent) !important;
  backdrop-filter: blur(14px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(180%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05),
              0 1px 3px rgba(0, 0, 0, 0.03) !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.22s ease !important;
}

.mv-index-collection:hover {
  transform: translateY(-2px) !important;
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border)) !important;
  background-color: color-mix(in srgb, var(--card) 85%, transparent) !important;
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.12) !important;
}

.mv-index-mini-covers img {
  border-radius: 5px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22) !important;
}

/* 8. Explore Themes Bar (.mv-index-tags) */
.mv-index-tags {
  padding: 12px 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

.mv-index-tags h2 {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--foreground) !important;
  white-space: nowrap !important;
}

.mv-index-tags > div {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.mv-index-tags a {
  padding: 4px 12px !important;
  border-radius: 9999px !important;
  font-size: 11px !important;
  border: 1px solid color-mix(in srgb, var(--border) 40%, transparent) !important;
  background-color: color-mix(in srgb, var(--card) 70%, transparent) !important;
  color: var(--muted-foreground) !important;
  transition: all 0.18s ease !important;
}

.mv-index-tags a:hover {
  color: var(--primary) !important;
  border-color: color-mix(in srgb, var(--primary) 50%, var(--border)) !important;
  background-color: color-mix(in srgb, var(--primary) 10%, var(--card)) !important;
  transform: translateY(-1px) !important;
}



/* ==========================================================================
   14. STORY & SERIES DETAIL WORKSPACE (.mv-series)
   Stylish, Subtle, Compact & Cohesive Master Design Architecture
   ========================================================================== */

/* 1. Breadcrumbs */
.mv-series-breadcrumb {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  font-size: 11px !important;
  color: var(--muted-foreground) !important;
  padding: 2px 2px 4px !important;
}

.mv-series-breadcrumb a {
  color: var(--muted-foreground) !important;
  transition: color 0.15s ease !important;
  text-decoration: none !important;
}

.mv-series-breadcrumb a:hover {
  color: var(--primary) !important;
}

.mv-series-breadcrumb span[aria-current="page"] {
  color: var(--foreground) !important;
  font-weight: 550 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* 2. Hero Room Container (.mv-series-intro) */
.mv-series-intro {
  display: grid !important;
  grid-template-columns: 104px minmax(0, 1fr) !important;
  column-gap: 16px !important;
  row-gap: 10px !important;
  align-items: start !important;
  padding: 14px 18px !important;
  border-radius: 12px !important;
  border: 1px solid color-mix(in srgb, var(--border) 28%, transparent) !important;
  background: color-mix(in srgb, var(--card) 55%, transparent) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  box-shadow: 0 2px 12px -2px rgba(0, 0, 0, 0.2),
              inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  position: relative !important;
}

/* Inner Identity Reset: completely transparent, clean flex flow, zero double cards */
.mv-series-identity {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  min-width: 0 !important;
}

/* Novel Cover Thumbnail */
main button.mv-series-cover {
  width: 104px !important;
  height: 148px !important;
  min-height: 148px !important;
  padding: 0 !important;
  border-radius: 7px !important;
  overflow: hidden !important;
  border: 1px solid color-mix(in srgb, var(--border) 35%, rgba(255, 255, 255, 0.1)) !important;
  background: color-mix(in srgb, var(--card) 90%, transparent) !important;
  box-shadow: 0 4px 14px -3px rgba(0, 0, 0, 0.3),
              0 1px 3px rgba(0, 0, 0, 0.2) !important;
  cursor: zoom-in !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.22s ease !important;
  display: block !important;
}

main button.mv-series-cover:hover {
  transform: scale(1.02) !important;
  box-shadow: 0 8px 20px -3px rgba(0, 0, 0, 0.4) !important;
}

.mv-series-cover img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* 3. Titleline & Byline */
.mv-series-titleline {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.mv-series-titleline h1 {
  font-family: var(--mv-font-serif, "Literata", Georgia, serif) !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
  color: var(--foreground) !important;
}

.mv-series-status {
  font-size: 9.5px !important;
  font-weight: 600 !important;
  padding: 2px 7px !important;
  border-radius: 9999px !important;
  background: color-mix(in srgb, var(--primary) 12%, transparent) !important;
  color: var(--primary) !important;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, transparent) !important;
  white-space: nowrap !important;
}

.mv-series-adult {
  font-size: 9px !important;
  font-weight: 700 !important;
  padding: 1.5px 6px !important;
  border-radius: 9999px !important;
  background: rgba(244, 63, 94, 0.12) !important;
  color: #fb7185 !important;
  border: 1px solid rgba(244, 63, 94, 0.25) !important;
}

.mv-series-byline {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px 10px !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
  color: var(--muted-foreground) !important;
}

.mv-series-byline > :first-child {
  color: var(--foreground) !important;
  font-weight: 550 !important;
}

.mv-series-byline > span[lang="ko"] {
  color: var(--muted-foreground) !important;
  font-size: 10.5px !important;
  opacity: 0.8 !important;
}

.mv-series-byline > a {
  color: var(--primary) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: color 0.14s ease !important;
}

.mv-series-byline > a:hover {
  text-decoration: underline !important;
}

/* 4. Metrics & Stats Shelf (.mv-series-metrics) */
.mv-series-metrics {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px 14px !important;
  padding: 4px 10px !important;
  margin: 1px 0 !important;
  border-radius: 7px !important;
  background: color-mix(in srgb, var(--background) 45%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--border) 25%, transparent) !important;
  width: fit-content !important;
  max-width: 100% !important;
}

.mv-series-metrics > div {
  display: flex !important;
  align-items: baseline !important;
  gap: 4px !important;
}

.mv-series-metrics dt {
  color: var(--muted-foreground) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
}

.mv-series-metrics dd {
  color: var(--foreground) !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  font-variant-numeric: tabular-nums !important;
}

.mv-series-metrics > div:first-child dd {
  color: #fbbf24 !important; /* Gold rating star */
  font-weight: 700 !important;
}

/* 5. Summary Snippet */
.mv-series-summary {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.mv-series-summary p {
  min-width: 0 !important;
  font-size: 11.5px !important;
  line-height: 1.55 !important;
  color: var(--muted-foreground) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

main .mv-series-summary button {
  min-height: 20px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  flex-shrink: 0 !important;
  color: var(--primary) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.14s ease !important;
}

main .mv-series-summary button:hover {
  text-decoration: underline !important;
}

/* 6. Action Buttons Bar (.mv-story-actions) */
.mv-series .mv-story-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 3px 0 0 !important;
  padding: 0 !important;
}

/* Primary Read / Continue Button */
.mv-series .mv-story-actions > a:first-child,
.mv-series .mv-story-actions > button:first-child {
  min-height: 32px !important;
  padding: 0 14px !important;
  border-radius: 7px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
  border: 1px solid transparent !important;
  box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--primary) 35%, transparent) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  cursor: pointer !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  text-decoration: none !important;
}

.mv-series .mv-story-actions > a:first-child:hover,
.mv-series .mv-story-actions > button:first-child:hover {
  filter: brightness(1.08) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 10px -2px color-mix(in srgb, var(--primary) 45%, transparent) !important;
}

/* Secondary Action Buttons (Shelf Status, EPUB, Collection) */
.mv-series .mv-story-actions > :where(a:not(:first-child), button:not(:first-child)),
.mv-series .mv-story-actions > div > button {
  min-height: 32px !important;
  padding: 0 11px !important;
  border-radius: 7px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  border: 1px solid color-mix(in srgb, var(--border) 35%, transparent) !important;
  background: color-mix(in srgb, var(--card) 55%, transparent) !important;
  color: var(--foreground) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  cursor: pointer !important;
  transition: all 0.16s ease !important;
  text-decoration: none !important;
}

.mv-series .mv-story-actions > :where(a:not(:first-child), button:not(:first-child)):hover,
.mv-series .mv-story-actions > div > button:hover {
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border)) !important;
  background: color-mix(in srgb, var(--card) 85%, transparent) !important;
  transform: translateY(-1px) !important;
}

/* 7. Context: Genre Pills & Content Warnings */
.mv-series-context {
  grid-column: 1 / -1 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px 10px !important;
  align-items: center !important;
  padding-top: 10px !important;
  border-top: 1px solid color-mix(in srgb, var(--border) 25%, transparent) !important;
  margin-top: 2px !important;
  font-size: 10.5px !important;
  color: var(--muted-foreground) !important;
}

.mv-series-genres {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  align-items: center !important;
}

.mv-series-genres a {
  padding: 2.5px 9px !important;
  border-radius: 9999px !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  color: var(--muted-foreground) !important;
  background: color-mix(in srgb, var(--card) 50%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--border) 30%, transparent) !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
  display: inline-flex !important;
  align-items: center !important;
}

.mv-series-genres a:hover {
  color: var(--foreground) !important;
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border)) !important;
  background: color-mix(in srgb, var(--primary) 10%, var(--card)) !important;
  transform: translateY(-1px) !important;
}

.mv-series-warning {
  font-size: 10px !important;
  padding: 2px 8px !important;
  border-radius: 5px !important;
  background: rgba(245, 158, 11, 0.08) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(245, 158, 11, 0.2) !important;
  margin: 0 !important;
}

.mv-series-shelf {
  font-size: 10px !important;
  font-weight: 550 !important;
  color: var(--primary) !important;
  margin-left: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* 8. Main Workspace Grid & Tabs */
.mv-series-workspace {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 260px !important;
  gap: 18px !important;
  align-items: start !important;
  margin-top: 6px !important;
}

/* Modern Segmented Tab Bar */
#root main .mv-series-tabs,
.mv-series-tabs {
  display: flex !important;
  gap: 3px !important;
  padding: 3px !important;
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--card) 50%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--border) 28%, transparent) !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin-bottom: 12px !important;
}

#root main .mv-series-tabs button,
main .mv-series-tabs button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  min-height: 26px !important;
  padding: 2px 10px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  border: 0 !important;
  color: var(--muted-foreground) !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: all 0.14s ease !important;
}

#root main .mv-series-tabs button:hover:not([aria-selected="true"]),
main .mv-series-tabs button:hover:not([aria-selected="true"]) {
  color: var(--foreground) !important;
  background: color-mix(in srgb, var(--foreground) 5%, transparent) !important;
}

#root main .mv-series-tabs button[aria-selected="true"],
main .mv-series-tabs button[aria-selected="true"] {
  background: color-mix(in srgb, var(--card) 95%, transparent) !important;
  color: var(--foreground) !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12),
              inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

#root main .mv-series-tabs button > span,
.mv-series-tabs button > span {
  padding: 0.5px 5px !important;
  border-radius: 9999px !important;
  font-size: 9.5px !important;
  font-weight: 650 !important;
  font-variant-numeric: tabular-nums !important;
  background: color-mix(in srgb, var(--border) 50%, transparent) !important;
  color: var(--muted-foreground) !important;
  line-height: 1.2 !important;
}

#root main .mv-series-tabs button[aria-selected="true"] > span,
main .mv-series-tabs button[aria-selected="true"] > span {
  background: color-mix(in srgb, var(--primary) 18%, transparent) !important;
  color: var(--primary) !important;
}

/* 9. Chapter Catalog (.mvc-catalog) */
.mvc-catalog {
  background: color-mix(in srgb, var(--card) 55%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--border) 28%, transparent) !important;
  border-radius: 12px !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  overflow: hidden !important;
  box-shadow: 0 2px 12px -2px rgba(0, 0, 0, 0.2) !important;
}

.mvc-toolbar {
  padding: 8px 12px !important;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 25%, transparent) !important;
  background: color-mix(in srgb, var(--card) 40%, transparent) !important;
}

.mvc-access button {
  min-height: 26px !important;
  padding: 2px 9px !important;
  border-radius: 5px !important;
  font-size: 10.5px !important;
  font-weight: 550 !important;
  color: var(--muted-foreground) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  transition: all 0.14s ease !important;
}

.mvc-access button:hover {
  background: color-mix(in srgb, var(--card) 75%, transparent) !important;
  color: var(--foreground) !important;
}

.mvc-access button[aria-pressed="true"] {
  background: color-mix(in srgb, var(--primary) 14%, transparent) !important;
  color: var(--primary) !important;
  border-color: color-mix(in srgb, var(--primary) 30%, transparent) !important;
}

.mvc-search input {
  height: 28px !important;
  background: color-mix(in srgb, var(--background) 55%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--border) 30%, transparent) !important;
  border-radius: 5px !important;
  font-size: 11px !important;
  color: var(--foreground) !important;
}

.mvc-filters select {
  height: 26px !important;
  border-radius: 5px !important;
  font-size: 10.5px !important;
  border: 1px solid color-mix(in srgb, var(--border) 30%, transparent) !important;
  background: color-mix(in srgb, var(--background) 55%, transparent) !important;
  color: var(--foreground) !important;
  padding: 0 6px !important;
}

.mvc-row {
  display: flex !important;
  align-items: center !important;
  padding: 8px 12px !important;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 18%, transparent) !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: all 0.14s ease !important;
}

.mvc-row:hover {
  background: color-mix(in srgb, var(--card) 85%, transparent) !important;
  transform: translateX(2px) !important;
}

.mvc-row.is-current {
  background: color-mix(in srgb, var(--primary) 8%, var(--card)) !important;
  border-left: 2px solid var(--primary) !important;
}

.mvc-number {
  font-variant-numeric: tabular-nums !important;
  font-weight: 650 !important;
  font-size: 10.5px !important;
  color: var(--primary) !important;
  min-width: 26px !important;
}

.mvc-title {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--foreground) !important;
}

.mvc-free {
  color: #34d399 !important; /* Mint */
  font-weight: 600 !important;
  font-size: 10px !important;
}

.mvc-status.locked {
  color: #fbbf24 !important; /* Gold Lumina */
  font-weight: 600 !important;
  font-size: 10px !important;
}

/* 10. Series Panel About Luxury Redesign (#series-panel-about) */

/* 10.1 Panel Container: Compact, subtle card plane, zero double borders */
#series-panel-about.mv-series-panel {
  padding: 14px 16px !important;
  border-radius: 12px !important;
  background: color-mix(in srgb, var(--card) 55%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--border) 28%, transparent) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  box-shadow: 0 2px 12px -2px rgba(0, 0, 0, 0.2),
              inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  box-sizing: border-box !important;
}

@media (max-width: 767px) {
  #series-panel-about.mv-series-panel {
    padding: 12px 14px !important;
    gap: 12px !important;
    border-radius: 10px !important;
  }
}

@media (max-width: 379px) {
  #series-panel-about.mv-series-panel {
    padding: 10px 11px !important;
    gap: 10px !important;
    border-radius: 9px !important;
  }
}

/* 10.2 Inner Synopsis Container: Seamless flow, zero nested border clashing */
#series-panel-about .mv-story-synopsis {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

/* 10.3 Synopsis Header Bar */
#series-panel-about .mv-story-synopsis > div:first-child {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-bottom: 8px !important;
  margin-bottom: 0 !important;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 25%, transparent) !important;
}

#series-panel-about .mv-story-synopsis > div:first-child > div:first-child {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
}

/* Starlight / Lore Icon Badge */
#series-panel-about .mv-story-synopsis > div:first-child > div > div {
  display: flex !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 6px !important;
  background: color-mix(in srgb, var(--primary) 10%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent) !important;
  color: var(--primary) !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

#series-panel-about .mv-story-synopsis > div:first-child h3 {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--foreground) !important;
  margin: 0 !important;
}

/* Story Lore Micro-Badge */
#series-panel-about .mv-story-synopsis > div:first-child > span {
  display: inline-flex !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  padding: 1.5px 6px !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--primary) 8%, transparent) !important;
  color: var(--primary) !important;
  border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent) !important;
  letter-spacing: 0.02em !important;
}

/* 10.4 Synopsis Body Prose & Expand Toggle */
#series-panel-about .mv-story-synopsis .whitespace-pre-line {
  font-size: 12px !important;
  line-height: 1.65 !important;
  color: color-mix(in srgb, var(--foreground) 88%, transparent) !important;
}

#series-panel-about .mv-story-synopsis button.mv-story-synopsis-more {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--primary) !important;
  padding-top: 3px !important;
  cursor: pointer !important;
  transition: all 0.16s ease !important;
  background: transparent !important;
  border: 0 !important;
}

#series-panel-about .mv-story-synopsis button.mv-story-synopsis-more:hover {
  text-decoration: underline !important;
  filter: brightness(1.15) !important;
}

/* 10.5 Reading Notes & Details Card (.mv-story-extra.mv-story-notes) */
#series-panel-about .mv-story-notes {
  margin: 2px 0 0 !important;
  border-radius: 9px !important;
  border: 1px solid color-mix(in srgb, var(--border) 25%, transparent) !important;
  background: color-mix(in srgb, var(--card) 40%, transparent) !important;
  overflow: hidden !important;
  box-shadow: none !important;
  transition: border-color 0.18s ease !important;
}

#series-panel-about .mv-story-notes[open] {
  border-color: color-mix(in srgb, var(--primary) 30%, var(--border)) !important;
}

/* Interactive Details Summary Header */
#series-panel-about .mv-story-notes > summary {
  list-style: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 7px 11px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--foreground) !important;
  cursor: pointer !important;
  user-select: none !important;
  background: color-mix(in srgb, var(--card) 45%, transparent) !important;
  transition: all 0.16s ease !important;
}

#series-panel-about .mv-story-notes > summary::-webkit-details-marker {
  display: none !important;
}

#series-panel-about .mv-story-notes > summary::after {
  content: "▾" !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--muted-foreground) !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), color 0.18s ease !important;
}

#series-panel-about .mv-story-notes[open] > summary::after {
  transform: rotate(180deg) !important;
  color: var(--primary) !important;
}

#series-panel-about .mv-story-notes > summary:hover {
  background: color-mix(in srgb, var(--card) 70%, transparent) !important;
  color: var(--primary) !important;
}

/* Notes Body Container */
#series-panel-about .mv-notes-body {
  padding: 12px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  border-top: 1px solid color-mix(in srgb, var(--border) 22%, transparent) !important;
}

/* 10.6 Character Dynamics Section (.mv-notes-pair) */
#series-panel-about .mv-notes-pair {
  padding: 10px 12px !important;
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--card) 40%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--border) 25%, transparent) !important;
  margin: 0 !important;
}

#series-panel-about .mv-note-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  margin-bottom: 8px !important;
  flex-wrap: wrap !important;
}

#series-panel-about .mv-note-heading h3 {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--foreground) !important;
  margin: 0 !important;
}

#series-panel-about .mv-note-heading span {
  font-size: 9px !important;
  font-weight: 600 !important;
  padding: 1.5px 6px !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--primary) 10%, transparent) !important;
  color: var(--primary) !important;
  border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent) !important;
}

#series-panel-about .mv-notes-pair > dl {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 0 !important;
}

@media (max-width: 639px) {
  #series-panel-about .mv-notes-pair > dl {
    grid-template-columns: 1fr !important;
  }
}

#series-panel-about .mv-notes-pair > dl > div {
  padding: 7px 10px !important;
  border-radius: 6px !important;
  background: color-mix(in srgb, var(--card) 55%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--border) 22%, transparent) !important;
  border-left: 2px solid var(--primary) !important;
  min-width: 0 !important;
}

#series-panel-about .mv-notes-pair dt {
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--primary) !important;
  margin-bottom: 2px !important;
}

#series-panel-about .mv-notes-pair dd {
  font-size: 11px !important;
  font-weight: 550 !important;
  color: var(--foreground) !important;
  line-height: 1.45 !important;
  margin: 0 0 4px 0 !important;
}

/* Subtle Interactive Note Pills (.mv-note-tags) */
#series-panel-about .mv-note-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  margin: 0 !important;
}

#series-panel-about .mv-note-tags a {
  padding: 2px 6px !important;
  border-radius: 5px !important;
  font-size: 9.5px !important;
  font-weight: 500 !important;
  background: color-mix(in srgb, var(--primary) 8%, var(--muted)) !important;
  color: var(--primary) !important;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent) !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
  display: inline-flex !important;
  align-items: center !important;
}

#series-panel-about .mv-note-tags a:hover {
  background: color-mix(in srgb, var(--primary) 18%, var(--muted)) !important;
  border-color: var(--primary) !important;
  transform: translateY(-1px) !important;
}

/* 10.7 Atmosphere & Themes Section (.mv-notes-themes) */
#series-panel-about .mv-notes-themes {
  padding: 9px 12px !important;
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--card) 40%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--border) 25%, transparent) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
}

#series-panel-about .mv-notes-themes > div {
  display: grid !important;
  grid-template-columns: 100px minmax(0, 1fr) !important;
  gap: 8px !important;
  align-items: center !important;
}

@media (max-width: 599px) {
  #series-panel-about .mv-notes-themes > div {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }
}

#series-panel-about .mv-notes-themes h3 {
  font-size: 10px !important;
  font-weight: 650 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--muted-foreground) !important;
  margin: 0 !important;
}

/* 10.8 Reading Highlights & Memorable Quote (.mv-notes-reading) */
#series-panel-about .mv-notes-reading {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

@media (max-width: 767px) {
  #series-panel-about .mv-notes-reading {
    grid-template-columns: 1fr !important;
  }
}

/* Memorable Quote Editorial Card - Subtle, non-loud styling */
#series-panel-about .mv-note-quote {
  padding: 10px 12px !important;
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--card) 45%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--border) 25%, transparent) !important;
  border-left: 2px solid color-mix(in srgb, var(--primary) 50%, var(--border)) !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

#series-panel-about .mv-note-quote .mv-note-heading {
  margin-bottom: 6px !important;
}

#series-panel-about .mv-note-quote .mv-note-heading h3 {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--primary) !important;
}

#series-panel-about .mv-note-quote button {
  min-height: 22px !important;
  padding: 1px 7px !important;
  border-radius: 5px !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  background: color-mix(in srgb, var(--primary) 10%, transparent) !important;
  color: var(--primary) !important;
  border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

#series-panel-about .mv-note-quote button:hover {
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
}

#series-panel-about .mv-note-quote blockquote {
  font-family: Georgia, "Literata", "Merriweather", serif !important;
  font-style: italic !important;
  font-size: 11.5px !important;
  line-height: 1.58 !important;
  color: var(--foreground) !important;
  margin: 0 0 6px 0 !important;
  padding-left: 8px !important;
  border-left: 2px solid color-mix(in srgb, var(--primary) 35%, transparent) !important;
}

#series-panel-about .mv-note-quote figcaption {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: var(--muted-foreground) !important;
}

#series-panel-about .mv-note-quote figcaption span {
  font-size: 9.5px !important;
  font-weight: 450 !important;
  opacity: 0.8 !important;
  margin-left: 3px !important;
}

/* "Read this for" Checklist Section */
#series-panel-about .mv-note-reading:not(figure) {
  padding: 10px 12px !important;
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--card) 40%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--border) 25%, transparent) !important;
  margin: 0 !important;
}

#series-panel-about .mv-note-reading:not(figure) h3 {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--primary) !important;
  margin: 0 0 8px 0 !important;
}

#series-panel-about .mv-note-reading:not(figure) ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
}

#series-panel-about .mv-note-reading:not(figure) li {
  position: relative !important;
  padding-left: 14px !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
  color: var(--foreground) !important;
}

#series-panel-about .mv-note-reading:not(figure) li::before {
  content: "✦" !important;
  position: absolute !important;
  left: 0 !important;
  top: 1px !important;
  color: var(--primary) !important;
  font-size: 8.5px !important;
  line-height: 1.5 !important;
}

/* 10.9 Connected Works / Series Universe (.mv-series-related) */
#series-panel-about .mv-series-related {
  margin: 2px 0 0 !important;
  padding-top: 12px !important;
  border-top: 1px solid color-mix(in srgb, var(--border) 25%, transparent) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

#series-panel-about .mv-series-related h2 {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--foreground) !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}

#series-panel-about .mv-series-related > div {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
  gap: 8px !important;
}

@media (max-width: 359px) {
  #series-panel-about .mv-series-related > div {
    grid-template-columns: 1fr !important;
  }
}

#series-panel-about .mv-series-related a {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 7px 10px !important;
  border-radius: 7px !important;
  background: color-mix(in srgb, var(--card) 50%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--border) 30%, transparent) !important;
  text-decoration: none !important;
  transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1) !important;
  min-width: 0 !important;
}

#series-panel-about .mv-series-related a:hover {
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border)) !important;
  background: color-mix(in srgb, var(--card) 85%, transparent) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px -1px rgba(0, 0, 0, 0.15) !important;
}

/* Kind badge */
#series-panel-about .mv-series-related a > span:first-child {
  font-size: 8.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  background: color-mix(in srgb, var(--primary) 10%, transparent) !important;
  color: var(--primary) !important;
  border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent) !important;
  flex-shrink: 0 !important;
  width: auto !important;
}

/* Title text */
#series-panel-about .mv-series-related a > strong {
  font-size: 11px !important;
  font-weight: 550 !important;
  color: var(--foreground) !important;
  flex: 1 1 0% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Arrow indicator */
#series-panel-about .mv-series-related a > span:last-child {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--primary) !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
  transition: transform 0.16s ease !important;
}

#series-panel-about .mv-series-related a:hover > span:last-child {
  transform: translate(2px, -2px) !important;
}

/* 11. Sidebar Elements (.mv-series-aside) */
.mv-series-aside {
  border-left: 1px solid color-mix(in srgb, var(--border) 28%, transparent) !important;
  padding-left: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

.mv-series-section-title h2 {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--foreground) !important;
}

.mv-series-collection,
.mv-series-recommendation {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 8px !important;
  border-radius: 7px !important;
  border: 1px solid transparent !important;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 18%, transparent) !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: all 0.15s ease !important;
}

.mv-series-collection:hover,
.mv-series-recommendation:hover {
  background: color-mix(in srgb, var(--card) 65%, transparent) !important;
  border-color: color-mix(in srgb, var(--border) 28%, transparent) !important;
  transform: translateX(2px) !important;
}

.mv-series-collection img,
.mv-series-recommendation img {
  width: 28px !important;
  height: 38px !important;
  border-radius: 4px !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

.mv-series-collection strong,
.mv-series-recommendation strong {
  font-size: 11px !important;
  font-weight: 550 !important;
  line-height: 1.35 !important;
}

.mv-series-collection > div > span,
.mv-series-recommendation > div > span {
  font-size: 9.5px !important;
  color: var(--muted-foreground) !important;
  font-variant-numeric: tabular-nums !important;
}

/* 12. Responsive Refinements */
@media (max-width: 999px) {
  .mv-series-intro {
    grid-template-columns: 92px minmax(0, 1fr) !important;
    gap: 12px 14px !important;
    padding: 12px 14px !important;
  }

  main button.mv-series-cover {
    width: 92px !important;
    height: 132px !important;
    min-height: 132px !important;
  }

  .mv-series-workspace {
    grid-template-columns: minmax(0, 1fr) 220px !important;
    gap: 14px !important;
  }
}

@media (max-width: 759px) {
  .mv-series-intro {
    grid-template-columns: 84px minmax(0, 1fr) !important;
    gap: 10px 12px !important;
    padding: 10px 12px !important;
  }

  main button.mv-series-cover {
    width: 84px !important;
    height: 120px !important;
    min-height: 120px !important;
  }

  .mv-series-titleline h1 {
    font-size: 17px !important;
  }

  .mv-series-metrics {
    gap: 5px 10px !important;
    padding: 3px 8px !important;
    font-size: 9.5px !important;
  }

  .mv-series-workspace {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .mv-series-aside {
    border-left: 0 !important;
    border-top: 1px solid color-mix(in srgb, var(--border) 25%, transparent) !important;
    padding-left: 0 !important;
    padding-top: 12px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}

@media (max-width: 639px) {
  .mv-series {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .mv-series-intro {
    display: grid !important;
    grid-template-columns: 80px minmax(0, 1fr) !important;
    gap: 8px 10px !important;
    padding: 10px 12px !important;
    align-items: start !important;
    box-sizing: border-box !important;
  }

  .mv-series-identity {
    display: contents !important;
  }

  main button.mv-series-cover {
    grid-column: 1 !important;
    grid-row: 1 / span 3 !important;
    width: 80px !important;
    height: 114px !important;
    min-height: 114px !important;
    margin: 0 !important;
  }

  .mv-series-titleline,
  .mv-series-byline,
  .mv-series-metrics {
    grid-column: 2 !important;
    min-width: 0 !important;
  }

  .mv-series-summary {
    grid-column: 1 / -1 !important;
    margin-top: 2px !important;
  }

  /* Compact yet stylish 2-tier ergonomic story actions */
  .mv-series .mv-story-actions {
    grid-column: 1 / -1 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 5px !important;
    width: 100% !important;
    margin: 4px 0 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .mv-series .mv-story-actions > * {
    width: auto !important;
    margin: 0 !important;
  }

  /* Tier 1: Primary Read/Continue CTA & Shelf Dropdown */
  .mv-series .mv-story-actions > a:first-child,
  .mv-series .mv-story-actions > button:first-child {
    flex: 1 1 calc(50% - 2.5px) !important;
    min-width: 0 !important;
    max-width: calc(50% - 2.5px) !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
    border-radius: 7px !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
  }

  .mv-series .mv-story-actions > div:first-child,
  .mv-series .mv-story-actions > div:nth-child(2) {
    flex: 1 1 calc(50% - 2.5px) !important;
    min-width: 0 !important;
    max-width: calc(50% - 2.5px) !important;
    height: 34px !important;
    box-sizing: border-box !important;
  }

  .mv-series .mv-story-actions > div > button {
    width: 100% !important;
    height: 100% !important;
    min-height: 34px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
    border-radius: 7px !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    gap: 4px !important;
  }

  /* When Shelf is the primary/only action on Row 1 (e.g. no chapters yet) */
  .mv-series .mv-story-actions:not(:has(> a:first-child)) > div:first-child {
    flex: 1 1 auto !important;
    max-width: 100% !important;
  }

  /* Tier 2: Supporting Actions (EPUB, Collection, Share) */
  .mv-series .mv-story-actions > a:not(:first-child) {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 8px !important;
    font-size: 10.5px !important;
    border-radius: 7px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    box-sizing: border-box !important;
  }

  .mv-series .mv-story-actions > a[title*="EPUB"] span {
    display: inline !important;
  }

  .mv-series .mv-story-actions > button {
    height: 32px !important;
    min-height: 32px !important;
    border-radius: 7px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .mv-series .mv-story-actions > button:not([title*="Share"]) {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    padding: 0 8px !important;
    gap: 4px !important;
    font-size: 10.5px !important;
  }

  .mv-series .mv-story-actions > button:not([title*="Share"]) span {
    display: inline !important;
  }

  .mv-series .mv-story-actions > button[title*="Share"] {
    flex: 0 0 32px !important;
    width: 32px !important;
    padding: 0 !important;
  }

  .mv-series-context {
    grid-column: 1 / -1 !important;
  }

  #root main .mv-series-tabs,
  .mv-series-tabs {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 2.5px !important;
    padding: 2.5px !important;
    box-sizing: border-box !important;
  }

  #root main .mv-series-tabs button,
  .mv-series-tabs button {
    padding: 3px 2px !important;
    font-size: 10px !important;
    min-width: 0 !important;
    justify-content: center !important;
    gap: 3px !important;
  }

  #root main .mv-series-tabs button > span,
  .mv-series-tabs button > span {
    padding: 0 3px !important;
    font-size: 8.5px !important;
  }

  .mv-series-aside {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 359px) {
  .mv-series-intro {
    grid-template-columns: 72px minmax(0, 1fr) !important;
    gap: 6px 8px !important;
    padding: 8px 10px !important;
  }

  main button.mv-series-cover {
    width: 72px !important;
    height: 102px !important;
    min-height: 102px !important;
  }

  .mv-series .mv-story-actions > a:first-child,
  .mv-series .mv-story-actions > button:first-child {
    font-size: 10.5px !important;
    padding: 0 6px !important;
  }

  .mv-series .mv-story-actions > div > button {
    font-size: 10.5px !important;
    padding: 0 6px !important;
  }
}


/* ==========================================================================
   SECTION 15: BROWSE STORIES LUXURY OVERHAUL (.mve-explore, .mve-browse)
   Celestial Obsidian & Alabaster Glass Design Standard
   ========================================================================== */

/* 1. Root Container & Spacing */
#root main .mve-explore.mve-browse,
.mve-explore.mve-browse {
  gap: 16px !important;
  padding-bottom: 32px !important;
  max-width: 1320px !important;
  margin: 0 auto !important;
}

/* 2. Page Header Banner (.mve-heading) */
#root main .mve-heading,
.mve-explore .mve-heading {
  background: linear-gradient(135deg, color-mix(in srgb, var(--card) 80%, transparent), color-mix(in srgb, var(--background) 90%, transparent)) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid color-mix(in srgb, var(--border) 65%, transparent) !important;
  border-radius: 16px !important;
  padding: 22px 26px !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 8px 30px -10px rgba(0, 0, 0, 0.25) !important;
}

#root main .mve-heading::before,
.mve-explore .mve-heading::before {
  content: "" !important;
  position: absolute !important;
  top: -40% !important;
  right: -10% !important;
  width: 320px !important;
  height: 240px !important;
  background: radial-gradient(circle, color-mix(in srgb, var(--primary) 14%, transparent) 0%, transparent 70%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

#root main .mve-heading > *,
.mve-explore .mve-heading > * {
  position: relative !important;
  z-index: 1 !important;
}

#root main .mve-heading .mve-title-line,
.mve-explore .mve-heading .mve-title-line {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

#root main .mve-heading h1,
.mve-explore .mve-heading h1 {
  font-family: var(--font-serif, "Cinzel", "Playfair Display", Georgia, serif) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--foreground) !important;
  line-height: 1.15 !important;
  margin: 0 !important;
}

#root main .mve-heading .mve-kicker,
.mve-explore .mve-heading .mve-kicker {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--primary) !important;
  background: color-mix(in srgb, var(--primary) 12%, transparent) !important;
  padding: 3px 9px !important;
  border-radius: 9999px !important;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, transparent) !important;
}

#root main .mve-heading p,
.mve-explore .mve-heading p {
  font-size: 13.5px !important;
  color: var(--muted-foreground) !important;
  margin: 5px 0 0 0 !important;
  line-height: 1.45 !important;
}

#root main .mve-secondary.mve-random,
.mve-explore .mve-secondary.mve-random {
  height: 38px !important;
  border-radius: 9999px !important;
  padding: 0 18px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  background: color-mix(in srgb, var(--card) 60%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent) !important;
  color: var(--foreground) !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

#root main .mve-secondary.mve-random:hover:not(:disabled),
.mve-explore .mve-secondary.mve-random:hover:not(:disabled) {
  background: color-mix(in srgb, var(--primary) 16%, var(--card)) !important;
  border-color: color-mix(in srgb, var(--primary) 45%, transparent) !important;
  color: var(--primary) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 18%, transparent) !important;
}

/* 3. Search & Toolbar (.mve-toolbar) */
#root main .mve-toolbar,
.mve-explore .mve-toolbar {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  margin: 0 0 4px 0 !important;
}

#root main .mve-toolbar .mve-search,
.mve-explore .mve-toolbar .mve-search {
  flex: 1 !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}

#root main .mve-toolbar .mve-search input,
.mve-explore .mve-toolbar .mve-search input {
  width: 100% !important;
  height: 42px !important;
  border-radius: 10px !important;
  background: color-mix(in srgb, var(--card) 65%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  padding: 0 14px 0 38px !important;
  font-size: 13.5px !important;
  color: var(--foreground) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#root main .mve-toolbar .mve-search input:focus,
.mve-explore .mve-toolbar .mve-search input:focus {
  border-color: color-mix(in srgb, var(--primary) 65%, var(--border)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent), 0 2px 8px color-mix(in srgb, var(--primary) 8%, transparent) !important;
  outline: none !important;
  background: color-mix(in srgb, var(--card) 85%, transparent) !important;
}

#root main .mve-toolbar .mve-search svg,
.mve-explore .mve-toolbar .mve-search svg {
  position: absolute !important;
  left: 13px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--muted-foreground) !important;
  pointer-events: none !important;
}

/* Sort Control Component (.mve-sort-control) */
#root main .mve-toolbar .mve-sort-control,
.mve-explore .mve-toolbar .mve-sort-control {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 42px !important;
  border-radius: 10px !important;
  background: color-mix(in srgb, var(--card) 65%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  padding: 0 14px !important;
  cursor: pointer !important;
  color: var(--foreground) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  user-select: none !important;
  flex-shrink: 0 !important;
}

#root main .mve-toolbar .mve-sort-control:hover,
.mve-explore .mve-toolbar .mve-sort-control:hover {
  background: color-mix(in srgb, var(--card) 85%, transparent) !important;
  border-color: color-mix(in srgb, var(--border) 80%, transparent) !important;
}

#root main .mve-toolbar .mve-sort-control:focus-within,
.mve-explore .mve-toolbar .mve-sort-control:focus-within {
  border-color: color-mix(in srgb, var(--primary) 65%, var(--border)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent) !important;
}

#root main .mve-toolbar .mve-sort-control > svg:first-child,
.mve-explore .mve-toolbar .mve-sort-control > svg:first-child {
  width: 15px !important;
  height: 15px !important;
  color: var(--muted-foreground) !important;
  flex-shrink: 0 !important;
  pointer-events: none !important;
  transition: color 0.15s ease !important;
}

#root main .mve-toolbar .mve-sort-control:hover > svg:first-child,
.mve-explore .mve-toolbar .mve-sort-control:hover > svg:first-child {
  color: var(--foreground) !important;
}

#root main .mve-toolbar .mve-sort-control .mve-sort-text,
.mve-explore .mve-toolbar .mve-sort-control .mve-sort-text {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 5px !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}

#root main .mve-toolbar .mve-sort-control .mve-sort-label,
.mve-explore .mve-toolbar .mve-sort-control .mve-sort-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--muted-foreground) !important;
  pointer-events: none !important;
}

#root main .mve-toolbar .mve-sort-control .mve-sort-val,
.mve-explore .mve-toolbar .mve-sort-control .mve-sort-val {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--foreground) !important;
  pointer-events: none !important;
}

#root main .mve-toolbar .mve-sort-control > svg:last-of-type,
.mve-explore .mve-toolbar .mve-sort-control > svg:last-of-type {
  width: 13px !important;
  height: 13px !important;
  color: var(--muted-foreground) !important;
  flex-shrink: 0 !important;
  pointer-events: none !important;
  margin-left: 2px !important;
  transition: color 0.15s ease !important;
}

#root main .mve-toolbar .mve-sort-control:hover > svg:last-of-type,
.mve-explore .mve-toolbar .mve-sort-control:hover > svg:last-of-type {
  color: var(--foreground) !important;
}

#root main .mve-toolbar .mve-sort-control .mve-sort-native-select,
.mve-explore .mve-toolbar .mve-sort-control .mve-sort-native-select {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  cursor: pointer !important;
  z-index: 2 !important;
  border: none !important;
  background: transparent !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Backwards compatibility for bare .mve-select */
#root main .mve-toolbar .mve-select,
.mve-explore .mve-toolbar .mve-select {
  position: relative !important;
}

#root main .mve-toolbar .mve-select select,
.mve-explore .mve-toolbar .mve-select select {
  height: 42px !important;
  border-radius: 10px !important;
  background: color-mix(in srgb, var(--card) 65%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  padding: 0 34px 0 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--foreground) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

#root main .mve-toolbar .mve-select select:focus,
.mve-explore .mve-toolbar .mve-select select:focus {
  border-color: color-mix(in srgb, var(--primary) 65%, var(--border)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent) !important;
  outline: none !important;
}

/* Filters Button Toggle (.mve-filter-toggle) */
#root main .mve-toolbar .mve-filter-toggle,
.mve-explore .mve-toolbar .mve-filter-toggle {
  height: 42px !important;
  border-radius: 10px !important;
  padding: 0 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  background: color-mix(in srgb, var(--card) 65%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  color: var(--foreground) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  user-select: none !important;
  flex-shrink: 0 !important;
}

#root main .mve-toolbar .mve-filter-toggle svg,
.mve-explore .mve-toolbar .mve-filter-toggle svg {
  width: 15px !important;
  height: 15px !important;
  color: var(--muted-foreground) !important;
  flex-shrink: 0 !important;
  transition: color 0.15s ease !important;
}

#root main .mve-toolbar .mve-filter-toggle:hover,
.mve-explore .mve-toolbar .mve-filter-toggle:hover {
  background: color-mix(in srgb, var(--card) 85%, transparent) !important;
  border-color: color-mix(in srgb, var(--border) 80%, transparent) !important;
}

#root main .mve-toolbar .mve-filter-toggle:hover svg,
.mve-explore .mve-toolbar .mve-filter-toggle:hover svg {
  color: var(--foreground) !important;
}

#root main .mve-toolbar .mve-filter-toggle.is-active,
.mve-explore .mve-toolbar .mve-filter-toggle.is-active {
  background: color-mix(in srgb, var(--primary) 16%, var(--card)) !important;
  border-color: color-mix(in srgb, var(--primary) 50%, transparent) !important;
  color: var(--primary) !important;
}

#root main .mve-toolbar .mve-filter-toggle.is-active svg,
.mve-explore .mve-toolbar .mve-filter-toggle.is-active svg {
  color: var(--primary) !important;
}

#root main .mve-toolbar .mve-filter-toggle .mve-filter-btn-text,
.mve-explore .mve-toolbar .mve-filter-toggle .mve-filter-btn-text {
  font-size: 13px !important;
  font-weight: 600 !important;
  background: transparent !important;
  color: inherit !important;
  padding: 0 !important;
  line-height: 1 !important;
}

#root main .mve-toolbar .mve-filter-toggle .mve-filter-badge,
.mve-explore .mve-toolbar .mve-filter-toggle .mve-filter-badge {
  font-size: 11px !important;
  font-weight: 700 !important;
  min-width: 19px !important;
  height: 19px !important;
  padding: 0 5px !important;
  border-radius: 9999px !important;
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  box-shadow: 0 1px 4px color-mix(in srgb, var(--primary) 40%, transparent) !important;
}

/* 4. Browse Layout & Sidebar (.mve-browse-layout, .mve-filter-rail) */
#root main .mve-browse-layout,
.mve-explore .mve-browse-layout {
  display: grid !important;
  grid-template-columns: 215px minmax(0, 1fr) !important;
  gap: 24px !important;
  align-items: start !important;
  transition: grid-template-columns 0.25s ease !important;
}

#root main .mve-browse-layout.is-sidebar-collapsed,
.mve-explore .mve-browse-layout.is-sidebar-collapsed {
  grid-template-columns: 1fr !important;
}

@media (min-width: 1024px) {
  #root main .mve-filter-rail,
  .mve-explore .mve-filter-rail {
    position: sticky !important;
    top: 76px !important;
    border: none !important;
    padding: 0 !important;
    display: block !important;
  }
}

#root main .mve-filter-content,
.mve-explore .mve-filter-content {
  background: color-mix(in srgb, var(--card) 55%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent) !important;
  border-radius: 14px !important;
  padding: 16px !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.15) !important;
}

#root main .mve-filter-heading,
.mve-explore .mve-filter-heading {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 12px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 40%, transparent) !important;
}

#root main .mve-filter-heading h2,
.mve-explore .mve-filter-heading h2 {
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--foreground) !important;
  margin: 0 !important;
}

#root main .mve-filter-heading button,
.mve-explore .mve-filter-heading button {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--primary) !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  transition: opacity 0.15s ease !important;
}

#root main .mve-filter-heading button:hover,
.mve-explore .mve-filter-heading button:hover {
  text-decoration: underline !important;
}

#root main .mve-genre-field,
.mve-explore .mve-genre-field {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#root main .mve-genre-field legend,
.mve-explore .mve-genre-field legend {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--muted-foreground) !important;
  margin-bottom: 8px !important;
}

#root main .mve-genre-field > button,
.mve-explore .mve-genre-field > button {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  background: color-mix(in srgb, var(--card) 60%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--border) 50%, transparent) !important;
  color: var(--foreground) !important;
  margin-bottom: 6px !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
}

#root main .mve-genre-field > button:hover,
.mve-explore .mve-genre-field > button:hover {
  background: color-mix(in srgb, var(--card) 85%, transparent) !important;
  border-color: color-mix(in srgb, var(--border) 75%, transparent) !important;
}

#root main .mve-genre-field > button[aria-pressed="true"],
.mve-explore .mve-genre-field > button[aria-pressed="true"] {
  background: color-mix(in srgb, var(--primary) 18%, var(--card)) !important;
  border-color: color-mix(in srgb, var(--primary) 50%, transparent) !important;
  color: var(--primary) !important;
  font-weight: 600 !important;
}

#root main .mve-genre-field > button small,
.mve-explore .mve-genre-field > button small {
  font-size: 10px !important;
  padding: 1px 6px !important;
  border-radius: 9999px !important;
  background: color-mix(in srgb, var(--primary) 20%, transparent) !important;
  color: var(--primary) !important;
  font-weight: 600 !important;
}

#root main .mve-genre-options,
.mve-explore .mve-genre-options {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 5px !important;
}

#root main .mve-genre-options button,
.mve-explore .mve-genre-options button {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 5px 8px !important;
  border-radius: 7px !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  background: color-mix(in srgb, var(--card) 45%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--border) 40%, transparent) !important;
  color: var(--foreground) !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
}

#root main .mve-genre-options button:hover,
.mve-explore .mve-genre-options button:hover {
  background: color-mix(in srgb, var(--card) 85%, transparent) !important;
  border-color: color-mix(in srgb, var(--border) 70%, transparent) !important;
  transform: translateY(-1px) !important;
}

#root main .mve-genre-options button[aria-pressed="true"],
.mve-explore .mve-genre-options button[aria-pressed="true"] {
  background: color-mix(in srgb, var(--primary) 18%, var(--card)) !important;
  border-color: color-mix(in srgb, var(--primary) 50%, transparent) !important;
  color: var(--primary) !important;
  font-weight: 600 !important;
}

#root main .mve-genre-options button small,
.mve-explore .mve-genre-options button small {
  font-size: 9.5px !important;
  padding: 1px 5px !important;
  border-radius: 9999px !important;
  background: color-mix(in srgb, var(--muted) 35%, transparent) !important;
  color: var(--muted-foreground) !important;
}

#root main .mve-genre-options button[aria-pressed="true"] small,
.mve-explore .mve-genre-options button[aria-pressed="true"] small {
  background: color-mix(in srgb, var(--primary) 25%, transparent) !important;
  color: var(--primary) !important;
}

#root main details.mve-more-genres summary,
.mve-explore details.mve-more-genres summary {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--primary) !important;
  cursor: pointer !important;
  padding: 6px 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

#root main .mve-filter-field,
.mve-explore .mve-filter-field {
  margin-top: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

#root main .mve-filter-field span,
.mve-explore .mve-filter-field span {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--muted-foreground) !important;
}

#root main .mve-filter-field select,
.mve-explore .mve-filter-field select {
  height: 36px !important;
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--card) 60%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--border) 50%, transparent) !important;
  padding: 0 26px 0 10px !important;
  font-size: 12px !important;
  color: var(--foreground) !important;
  cursor: pointer !important;
}

#root main .mve-filter-field select:focus,
.mve-explore .mve-filter-field select:focus {
  border-color: color-mix(in srgb, var(--primary) 65%, var(--border)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent) !important;
  outline: none !important;
}

/* 5. Results Section & Results Toolbar (.mve-results-toolbar) */
#root main .mve-results-toolbar,
.mve-explore .mve-results-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 45%, transparent) !important;
  margin-bottom: 14px !important;
  flex-wrap: nowrap !important;
}

#root main .mve-quick-filters,
.mve-explore .mve-quick-filters {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

#root main .mve-status-tabs,
.mve-explore .mve-status-tabs {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px !important;
  border-radius: 9999px !important;
  background: color-mix(in srgb, var(--card) 60%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--border) 50%, transparent) !important;
  gap: 2px !important;
  flex-shrink: 0 !important;
}

#root main .mve-pill-prefix,
.mve-explore .mve-pill-prefix {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--muted-foreground) !important;
  padding: 0 4px 0 10px !important;
  user-select: none !important;
  opacity: 0.85 !important;
}

#root main .mve-status-tabs button,
.mve-explore .mve-status-tabs button {
  padding: 4px 14px !important;
  border-radius: 9999px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--muted-foreground) !important;
  background: transparent !important;
  border: none !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

#root main .mve-status-tabs button:hover,
.mve-explore .mve-status-tabs button:hover {
  color: var(--foreground) !important;
}

#root main .mve-status-tabs button[aria-pressed="true"],
.mve-explore .mve-status-tabs button[aria-pressed="true"] {
  background: color-mix(in srgb, var(--primary) 20%, var(--card)) !important;
  color: var(--primary) !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
}

#root main .mve-library-filter,
.mve-explore .mve-library-filter {
  padding: 5px 13px !important;
  border-radius: 9999px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  background: color-mix(in srgb, var(--card) 55%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--border) 50%, transparent) !important;
  color: var(--muted-foreground) !important;
  transition: all 0.18s ease !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
}

#root main .mve-library-filter svg,
.mve-explore .mve-library-filter svg {
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0 !important;
}

#root main .mve-library-filter:hover,
.mve-explore .mve-library-filter:hover {
  color: var(--foreground) !important;
  border-color: color-mix(in srgb, var(--border) 75%, transparent) !important;
}

#root main .mve-library-filter.is-active,
#root main .mve-library-filter[aria-pressed="true"],
.mve-explore .mve-library-filter.is-active,
.mve-explore .mve-library-filter[aria-pressed="true"] {
  background: color-mix(in srgb, var(--primary) 18%, var(--card)) !important;
  border-color: color-mix(in srgb, var(--primary) 50%, transparent) !important;
  color: var(--primary) !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 4px color-mix(in srgb, var(--primary) 25%, transparent) !important;
}

#root main .mve-result-controls,
.mve-explore .mve-result-controls {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
}

#root main .mve-quick-count,
.mve-explore .mve-quick-count {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--muted-foreground) !important;
  white-space: nowrap !important;
  padding-right: 4px !important;
}

#root main .mve-view-switch,
.mve-explore .mve-view-switch {
  display: inline-flex !important;
  padding: 3px !important;
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--card) 60%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--border) 50%, transparent) !important;
  gap: 2px !important;
}

#root main .mve-view-switch button,
.mve-explore .mve-view-switch button {
  width: 28px !important;
  height: 28px !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--muted-foreground) !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

#root main .mve-view-switch button:hover,
.mve-explore .mve-view-switch button:hover {
  color: var(--foreground) !important;
}

#root main .mve-view-switch button[aria-pressed="true"],
.mve-explore .mve-view-switch button[aria-pressed="true"] {
  background: color-mix(in srgb, var(--primary) 20%, var(--card)) !important;
  color: var(--primary) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* 6. Result Summary & Active Filters (.mve-result-summary, .mve-active-filters) */
#root main .mve-result-summary,
.mve-explore .mve-result-summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 12px !important;
  color: var(--muted-foreground) !important;
  margin-bottom: 10px !important;
}

#root main .mve-result-summary button,
.mve-explore .mve-result-summary button {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--primary) !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  padding: 2px 4px !important;
}

#root main .mve-result-summary button:hover,
.mve-explore .mve-result-summary button:hover {
  text-decoration: underline !important;
}

#root main .mve-active-filters,
.mve-explore .mve-active-filters {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-bottom: 14px !important;
}

#root main .mve-active-filters button,
.mve-explore .mve-active-filters button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 10px 4px 12px !important;
  border-radius: 9999px !important;
  font-size: 12px !important;
  background: color-mix(in srgb, var(--primary) 10%, var(--card)) !important;
  border: 1px solid color-mix(in srgb, var(--primary) 32%, transparent) !important;
  color: var(--foreground) !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
}

#root main .mve-active-filters button:hover,
.mve-explore .mve-active-filters button:hover {
  background: color-mix(in srgb, var(--destructive) 14%, var(--card)) !important;
  border-color: color-mix(in srgb, var(--destructive) 45%, transparent) !important;
}

#root main .mve-active-filters .mve-chip-cat,
.mve-explore .mve-active-filters .mve-chip-cat {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--primary) !important;
  opacity: 0.9 !important;
}

#root main .mve-active-filters .mve-chip-val,
.mve-explore .mve-active-filters .mve-chip-val {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--foreground) !important;
}

#root main .mve-active-filters .mve-chip-x,
.mve-explore .mve-active-filters .mve-chip-x {
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  margin-left: 2px !important;
  color: var(--muted-foreground) !important;
  transition: color 0.15s ease !important;
}

#root main .mve-active-filters button:hover .mve-chip-x,
.mve-explore .mve-active-filters button:hover .mve-chip-x {
  color: var(--destructive) !important;
}

/* 7. Book Cards: Covers Mode (.mve-books-covers, .mve-book-covers) */
#root main .mve-books-covers,
.mve-explore .mve-books-covers {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)) !important;
  gap: 22px 14px !important;
}

#root main .mve-book.mve-book-covers,
.mve-explore .mve-book.mve-book-covers {
  display: flex !important;
  flex-direction: column !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  position: relative !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#root main .mve-book.mve-book-covers:hover,
.mve-explore .mve-book.mve-book-covers:hover {
  transform: translateY(-4px) !important;
}

#root main .mve-book-covers .mve-cover,
.mve-explore .mve-book-covers .mve-cover {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 2 / 3 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: color-mix(in srgb, var(--card) 80%, black) !important;
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.35), 0 0 0 1px color-mix(in srgb, var(--border) 40%, transparent) !important;
  transition: box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: block !important;
}

#root main .mve-book.mve-book-covers:hover .mve-cover,
.mve-explore .mve-book.mve-book-covers:hover .mve-cover {
  box-shadow: 0 10px 24px -4px rgba(0, 0, 0, 0.45), 0 0 0 1px color-mix(in srgb, var(--primary) 40%, transparent) !important;
}

#root main .mve-book-covers .mve-cover img,
.mve-explore .mve-book-covers .mve-cover img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.35s ease !important;
}

#root main .mve-book.mve-book-covers:hover .mve-cover img,
.mve-explore .mve-book.mve-book-covers:hover .mve-cover img {
  transform: scale(1.03) !important;
}

#root main .mve-book-covers .mve-cover::after,
.mve-explore .mve-book-covers .mve-cover::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, transparent 28%, transparent 70%, rgba(0,0,0,0.65) 100%) !important;
  opacity: 0.7 !important;
  transition: opacity 0.2s ease !important;
}

#root main .mve-book-covers .mve-cover small,
.mve-explore .mve-book-covers .mve-cover small {
  position: absolute !important;
  bottom: 8px !important;
  left: 8px !important;
  z-index: 5 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  background: rgba(239, 68, 68, 0.85) !important;
  color: #fff !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
}

/* Tactile Frosted Glass Roundels for Book Actions on Covers */
#root main .mve-book-covers .mve-book-actions,
.mve-explore .mve-book-covers .mve-book-actions {
  position: absolute !important;
  top: 7px !important;
  right: 7px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  z-index: 5 !important;
}

#root main .mve-book-covers .mve-book-actions button.mva-save,
#root main .mve-book-covers .mve-book-actions button.mve-icon,
.mve-explore .mve-book-covers .mve-book-actions button.mva-save,
.mve-explore .mve-book-covers .mve-book-actions button.mve-icon {
  width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  border-radius: 9999px !important;
  background: rgba(12, 16, 24, 0.72) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  padding: 0 !important;
}

#root main .mve-book-covers .mve-book-actions button.mva-save:hover,
#root main .mve-book-covers .mve-book-actions button.mve-icon:hover,
.mve-explore .mve-book-covers .mve-book-actions button.mva-save:hover,
.mve-explore .mve-book-covers .mve-book-actions button.mve-icon:hover {
  background: rgba(20, 26, 38, 0.95) !important;
  transform: scale(1.08) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #fff !important;
}

#root main .mve-book-covers .mve-book-actions button.mva-save[data-saved="true"],
.mve-explore .mve-book-covers .mve-book-actions button.mva-save[data-saved="true"] {
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
  border-color: var(--primary) !important;
}

#root main .mve-book-covers .mve-book-actions svg,
.mve-explore .mve-book-covers .mve-book-actions svg {
  width: 14px !important;
  height: 14px !important;
}

#root main .mve-book-covers .mve-book-copy,
.mve-explore .mve-book-covers .mve-book-copy {
  margin-top: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

#root main .mve-book-covers .mve-book-topline,
.mve-explore .mve-book-covers .mve-book-topline {
  display: none !important;
}

#root main .mve-book-covers .mve-book-copy h2,
.mve-explore .mve-book-covers .mve-book-copy h2 {
  font-size: 13px !important;
  line-height: 1.35 !important;
  min-height: 2.7em !important;
  height: auto !important;
  margin: 0 !important;
}

#root main .mve-book-covers .mve-book-copy h2 a,
.mve-explore .mve-book-covers .mve-book-copy h2 a {
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: var(--foreground) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

#root main .mve-book-covers .mve-book-copy h2 a:hover,
.mve-explore .mve-book-covers .mve-book-copy h2 a:hover {
  color: var(--primary) !important;
}

#root main .mve-book-covers .mve-book-author,
.mve-explore .mve-book-covers .mve-book-author {
  font-size: 11.5px !important;
  color: var(--muted-foreground) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin: 0 !important;
}

#root main .mve-book-covers .mve-book-stats,
.mve-explore .mve-book-covers .mve-book-stats {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11px !important;
  color: var(--muted-foreground) !important;
  margin-top: 2px !important;
}

#root main .mve-book-covers .mve-rating,
.mve-explore .mve-book-covers .mve-rating {
  font-weight: 600 !important;
  color: #fbbf24 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
}

/* 8. Book Cards: Cards Mode (.mve-books-cards, .mve-book-cards) */
#root main .mve-books-cards,
.mve-explore .mve-books-cards {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)) !important;
  gap: 14px !important;
}

#root main .mve-book.mve-book-cards,
.mve-explore .mve-book.mve-book-cards {
  display: grid !important;
  grid-template-columns: 88px 1fr auto !important;
  gap: 14px !important;
  padding: 14px !important;
  border-radius: 14px !important;
  background: color-mix(in srgb, var(--card) 55%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--border) 45%, transparent) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  align-items: start !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.15) !important;
}

#root main .mve-book.mve-book-cards:hover,
.mve-explore .mve-book.mve-book-cards:hover {
  background: color-mix(in srgb, var(--card) 80%, transparent) !important;
  border-color: color-mix(in srgb, var(--primary) 30%, var(--border)) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.25) !important;
}

#root main .mve-book-cards .mve-cover,
.mve-explore .mve-book-cards .mve-cover {
  width: 88px !important;
  aspect-ratio: 2 / 3 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3) !important;
  display: block !important;
}

#root main .mve-book-cards .mve-cover img,
.mve-explore .mve-book-cards .mve-cover img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

#root main .mve-book-cards .mve-book-topline,
.mve-explore .mve-book-cards .mve-book-topline {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 4px !important;
}

#root main .mve-book-cards .mve-book-topline span:first-child,
.mve-explore .mve-book-cards .mve-book-topline span:first-child {
  padding: 2px 8px !important;
  border-radius: 9999px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  background: color-mix(in srgb, var(--primary) 14%, transparent) !important;
  color: var(--primary) !important;
}

#root main .mve-book-cards .mve-status,
.mve-explore .mve-book-cards .mve-status {
  font-size: 10px !important;
  color: var(--muted-foreground) !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  background: color-mix(in srgb, var(--muted) 35%, transparent) !important;
}

#root main .mve-book-cards .mve-status.is-complete,
.mve-explore .mve-book-cards .mve-status.is-complete {
  color: #10b981 !important;
  background: rgba(16, 185, 129, 0.12) !important;
}

#root main .mve-book-cards .mve-book-copy h2,
.mve-explore .mve-book-cards .mve-book-copy h2 {
  margin: 0 !important;
}

#root main .mve-book-cards .mve-book-copy h2 a,
.mve-explore .mve-book-cards .mve-book-copy h2 a {
  font-size: 14px !important;
  font-weight: 650 !important;
  color: var(--foreground) !important;
  text-decoration: none !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  line-height: 1.35 !important;
}

#root main .mve-book-cards .mve-book-copy h2 a:hover,
.mve-explore .mve-book-cards .mve-book-copy h2 a:hover {
  color: var(--primary) !important;
}

#root main .mve-book-cards .mve-book-author,
.mve-explore .mve-book-cards .mve-book-author {
  font-size: 12px !important;
  color: var(--muted-foreground) !important;
  margin: 3px 0 0 0 !important;
}

#root main .mve-book-cards .mve-book-stats,
.mve-explore .mve-book-cards .mve-book-stats {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 11.5px !important;
  color: var(--muted-foreground) !important;
  margin-top: 8px !important;
}

#root main .mve-book-cards .mve-rating,
.mve-explore .mve-book-cards .mve-rating {
  font-weight: 600 !important;
  color: #fbbf24 !important;
}

#root main .mve-book-cards .mve-book-actions,
.mve-explore .mve-book-cards .mve-book-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  align-items: center !important;
}

#root main .mve-book-cards .mve-book-actions button.mva-save,
#root main .mve-book-cards .mve-book-actions button.mve-icon,
.mve-explore .mve-book-cards .mve-book-actions button.mva-save,
.mve-explore .mve-book-cards .mve-book-actions button.mve-icon {
  width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--card) 60%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--border) 50%, transparent) !important;
  color: var(--foreground) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

#root main .mve-book-cards .mve-book-actions button.mva-save:hover,
#root main .mve-book-cards .mve-book-actions button.mve-icon:hover,
.mve-explore .mve-book-cards .mve-book-actions button.mva-save:hover,
.mve-explore .mve-book-cards .mve-book-actions button.mve-icon:hover {
  background: color-mix(in srgb, var(--primary) 15%, var(--card)) !important;
  border-color: color-mix(in srgb, var(--primary) 40%, transparent) !important;
  color: var(--primary) !important;
}

#root main .mve-book-cards .mve-book-actions button.mva-save[data-saved="true"],
.mve-explore .mve-book-cards .mve-book-actions button.mva-save[data-saved="true"] {
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
  border-color: var(--primary) !important;
}

/* 9. Book Cards: List Mode (.mve-books-list, .mve-book-list) */
#root main .mve-books-list,
.mve-explore .mve-books-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  border: none !important;
}

#root main .mve-book.mve-book-list,
.mve-explore .mve-book.mve-book-list {
  display: grid !important;
  grid-template-columns: 72px 1fr auto !important;
  gap: 16px !important;
  padding: 14px 16px !important;
  border-radius: 12px !important;
  background: color-mix(in srgb, var(--card) 45%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--border) 40%, transparent) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  align-items: start !important;
  transition: all 0.2s ease !important;
}

#root main .mve-book.mve-book-list:hover,
.mve-explore .mve-book.mve-book-list:hover {
  background: color-mix(in srgb, var(--card) 75%, transparent) !important;
  border-color: color-mix(in srgb, var(--primary) 28%, var(--border)) !important;
}

#root main .mve-book-list .mve-cover,
.mve-explore .mve-book-list .mve-cover {
  width: 72px !important;
  aspect-ratio: 2 / 3 !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
  display: block !important;
}

#root main .mve-book-list .mve-cover img,
.mve-explore .mve-book-list .mve-cover img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

#root main .mve-book-list .mve-book-copy h2 a,
.mve-explore .mve-book-list .mve-book-copy h2 a {
  font-size: 14.5px !important;
  font-weight: 650 !important;
  color: var(--foreground) !important;
  text-decoration: none !important;
}

#root main .mve-book-list .mve-book-copy h2 a:hover,
.mve-explore .mve-book-list .mve-book-copy h2 a:hover {
  color: var(--primary) !important;
}

#root main .mve-book-list .mve-book-description,
.mve-explore .mve-book-list .mve-book-description {
  font-size: 12.5px !important;
  line-height: 1.5 !important;
  color: var(--muted-foreground) !important;
  margin-top: 6px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* 10. Quick Preview Drawer (.mve-drawer, .mve-drawer-preview) */
#root main .mve-overlay,
.mve-explore .mve-overlay {
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  background: rgba(0, 0, 0, 0.65) !important;
}

#root main .mve-drawer,
.mve-explore .mve-drawer {
  background: color-mix(in srgb, var(--card) 95%, black) !important;
  border-left: 1px solid color-mix(in srgb, var(--border) 60%, transparent) !important;
  box-shadow: -12px 0 36px rgba(0, 0, 0, 0.55) !important;
}

#root main .mve-drawer-heading,
.mve-explore .mve-drawer-heading {
  border-bottom: 1px solid color-mix(in srgb, var(--border) 45%, transparent) !important;
  padding: 18px 22px !important;
}

#root main .mve-drawer-heading h2,
.mve-explore .mve-drawer-heading h2 {
  font-family: var(--font-serif, "Cinzel", "Playfair Display", Georgia, serif) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--foreground) !important;
}

#root main .mve-drawer-actions button,
.mve-explore .mve-drawer-actions button,
#root main .mve-drawer-actions a,
.mve-explore .mve-drawer-actions a {
  border-radius: 9px !important;
  height: 38px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}

#root main .mve-drawer-tags button,
.mve-explore .mve-drawer-tags button {
  padding: 4px 10px !important;
  border-radius: 9999px !important;
  font-size: 11.5px !important;
  background: color-mix(in srgb, var(--primary) 12%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, transparent) !important;
  color: var(--primary) !important;
}

/* 11. Responsive Breakpoints & Mobile Optimization */
@media (max-width: 1023px) {
  #root main .mve-browse-layout,
  .mve-explore .mve-browse-layout {
    display: block !important;
  }

  #root main .mve-filter-rail,
  .mve-explore .mve-filter-rail {
    display: none !important;
  }

  #root main .mve-filter-rail.is-open,
  .mve-explore .mve-filter-rail.is-open {
    display: flex !important;
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-height: none !important;
    z-index: 55 !important;
    justify-content: flex-end !important;
    align-items: stretch !important;
    background: rgba(0, 0, 0, 0.65) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: none !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  #root main .mve-filter-rail.is-open .mve-filter-content,
  .mve-explore .mve-filter-rail.is-open .mve-filter-content {
    width: min(340px, 92vw) !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    background: color-mix(in srgb, var(--card) 96%, black) !important;
    border-left: 1px solid color-mix(in srgb, var(--border) 60%, transparent) !important;
    box-shadow: -12px 0 36px rgba(0, 0, 0, 0.55) !important;
    border-radius: 0 !important;
    padding: 18px 20px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
  }

  #root main .mve-filter-footer,
  .mve-explore .mve-filter-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-top: auto !important;
    padding-top: 16px !important;
    border-top: 1px solid color-mix(in srgb, var(--border) 50%, transparent) !important;
    position: sticky !important;
    bottom: 0 !important;
    background: color-mix(in srgb, var(--card) 96%, black) !important;
    z-index: 10 !important;
  }

  #root main .mve-filter-footer button,
  .mve-explore .mve-filter-footer button {
    height: 38px !important;
    border-radius: 9px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 0 16px !important;
    cursor: pointer !important;
  }

  #root main .mve-filter-footer button.mve-primary,
  .mve-explore .mve-filter-footer button.mve-primary {
    background: var(--primary) !important;
    color: var(--primary-foreground) !important;
    border: none !important;
  }
}

@media (max-width: 767px) {
  #root main .mve-heading,
  .mve-explore .mve-heading {
    padding: 16px 18px !important;
    border-radius: 12px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  #root main .mve-heading .mve-heading-actions,
  .mve-explore .mve-heading .mve-heading-actions {
    width: 100% !important;
  }

  #root main .mve-secondary.mve-random,
  .mve-explore .mve-secondary.mve-random {
    width: 100% !important;
    justify-content: center !important;
  }

  #root main .mve-toolbar,
  .mve-explore .mve-toolbar {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  #root main .mve-toolbar .mve-search,
  .mve-explore .mve-toolbar .mve-search {
    width: 100% !important;
    flex: none !important;
  }

  #root main .mve-toolbar .mve-sort-control,
  .mve-explore .mve-toolbar .mve-sort-control,
  #root main .mve-toolbar .mve-select,
  .mve-explore .mve-toolbar .mve-select {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }

  #root main .mve-toolbar .mve-sort-control .mve-sort-text,
  .mve-explore .mve-toolbar .mve-sort-control .mve-sort-text {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  #root main .mve-toolbar .mve-sort-control .mve-sort-val,
  .mve-explore .mve-toolbar .mve-sort-control .mve-sort-val {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #root main .mve-toolbar .mve-select select,
  .mve-explore .mve-toolbar .mve-select select {
    width: 100% !important;
  }

  #root main .mve-toolbar .mve-filter-toggle,
  .mve-explore .mve-toolbar .mve-filter-toggle {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    justify-content: center !important;
  }

  /* Critical Mobile Fix: Segmented status tabs stack cleanly above controls */
  #root main .mve-results-toolbar,
  .mve-explore .mve-results-toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  #root main .mve-quick-filters,
  .mve-explore .mve-quick-filters {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  #root main .mve-status-tabs,
  .mve-explore .mve-status-tabs {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }

  #root main .mve-pill-prefix,
  .mve-explore .mve-pill-prefix {
    flex-shrink: 0 !important;
    padding: 0 4px 0 8px !important;
  }

  #root main .mve-status-tabs button,
  .mve-explore .mve-status-tabs button {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 6px 4px !important;
    font-size: 11.5px !important;
  }

  #root main .mve-library-filter,
  .mve-explore .mve-library-filter {
    width: 100% !important;
    justify-content: center !important;
    padding: 7px 12px !important;
  }

  #root main .mve-result-controls,
  .mve-explore .mve-result-controls {
    width: 100% !important;
    justify-content: space-between !important;
  }

  /* 2-Column Mobile Book Grid */
  #root main .mve-books-covers,
  .mve-explore .mve-books-covers {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px 12px !important;
  }
}

@media (max-width: 480px) {
  #root main .mve-books-covers,
  .mve-explore .mve-books-covers {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px 10px !important;
  }

  #root main .mve-book.mve-book-cards,
  .mve-explore .mve-book.mve-book-cards {
    grid-template-columns: 76px 1fr !important;
    padding: 10px !important;
  }

  #root main .mve-book.mve-book-cards .mve-book-actions,
  .mve-explore .mve-book.mve-book-cards .mve-book-actions {
    grid-column: 1 / -1 !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    margin-top: 6px !important;
  }

  #root main .mve-book.mve-book-list,
  .mve-explore .mve-book.mve-book-list {
    grid-template-columns: 64px 1fr !important;
    padding: 10px 12px !important;
  }

  #root main .mve-book.mve-book-list .mve-book-actions,
  .mve-explore .mve-book.mve-book-list .mve-book-actions {
    grid-column: 1 / -1 !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    margin-top: 6px !important;
  }
}

@media (max-width: 360px) {
  #root main .mve-heading h1,
  .mve-explore .mve-heading h1 {
    font-size: 22px !important;
  }

  #root main .mve-pill-prefix,
  .mve-explore .mve-pill-prefix {
    display: none !important;
  }

  #root main .mve-books-covers,
  .mve-explore .mve-books-covers {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px 8px !important;
  }

  #root main .mve-status-tabs button,
  .mve-explore .mve-status-tabs button {
    padding: 5px 2px !important;
    font-size: 10.5px !important;
  }
}

/* ==========================================================================
   SECTION 16: CONVERSATION & REVIEW SYSTEM LUXURY OVERHAUL (.mv-conversation)
   Modern Subtle Specification · Compact, stylish, subtle, calm in every palette,
   iOS-grade micro-segmented controls, radiant golden star ratings, and hairline
   thread architecture with zero boxed-comment clutter.
   ========================================================================== */

/* 1. Root & Heading Architecture */
#root main .mv-conversation,
.mv-conversation {
  color: var(--foreground) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  gap: 12px !important;
  -webkit-font-smoothing: antialiased;
}

#root main .mv-talk-heading,
.mv-talk-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 8px 12px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent) !important;
}

#root main .mv-talk-heading > h2,
.mv-talk-heading > h2 {
  font-size: 14.5px !important;
  font-weight: 650 !important;
  letter-spacing: -0.01em !important;
  color: var(--foreground) !important;
}

/* Micro-segmented Switcher (Series discussion vs Reader reviews) */
#root main .mv-talk-segments,
.mv-talk-segments {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  padding: 2.5px !important;
  background: color-mix(in srgb, var(--muted) 55%, var(--background)) !important;
  border: 1px solid color-mix(in srgb, var(--border) 50%, transparent) !important;
  border-radius: 9px !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

#root main .mv-talk-segments button,
.mv-talk-segments button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-height: 29px !important;
  height: 29px !important;
  padding: 4px 10px !important;
  border-radius: 7px !important;
  font-size: 11.5px !important;
  font-weight: 550 !important;
  color: var(--muted-foreground) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#root main .mv-talk-segments button:hover,
.mv-talk-segments button:hover {
  color: var(--foreground) !important;
  background: color-mix(in srgb, var(--card) 45%, transparent) !important;
}

#root main .mv-talk-segments button[aria-pressed='true'],
.mv-talk-segments button[aria-pressed='true'] {
  color: var(--foreground) !important;
  background: var(--card) !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07), 0 0 0 1px color-mix(in srgb, var(--border) 70%, transparent) !important;
}

#root main .mv-talk-segments button > svg,
.mv-talk-segments button > svg {
  width: 13px !important;
  height: 13px !important;
  color: currentColor !important;
  opacity: 0.85 !important;
}

#root main .mv-talk-segments button[aria-pressed='true'] > svg {
  color: var(--primary) !important;
  opacity: 1 !important;
}

#root main .mv-talk-segment-count,
.mv-talk-segment-count {
  font-size: 9.5px !important;
  font-weight: 650 !important;
  font-variant-numeric: tabular-nums !important;
  padding: 1.5px 6px !important;
  border-radius: 9999px !important;
  background: color-mix(in srgb, var(--primary) 10%, transparent) !important;
  color: var(--primary) !important;
  line-height: 1.2 !important;
}

#root main .mv-talk-segments button[aria-pressed='true'] .mv-talk-segment-count {
  background: color-mix(in srgb, var(--primary) 16%, transparent) !important;
  color: var(--primary) !important;
}

/* 2. Compact Dropdowns (Sort & Rating filter) */
#root main .mv-conversation select,
.mv-conversation select,
#root main .mv-talk-heading select,
#root main .mv-talk-review-filter select {
  min-height: 30px !important;
  height: 30px !important;
  padding: 0 26px 0 10px !important;
  font-size: 11px !important;
  font-weight: 550 !important;
  line-height: 30px !important;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent) !important;
  border-radius: 7px !important;
  background-color: color-mix(in srgb, var(--card) 80%, var(--background)) !important;
  color: var(--foreground) !important;
  cursor: pointer !important;
  max-width: 136px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  background-size: 11px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.15s ease !important;
}

#root main .mv-conversation select:hover {
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border)) !important;
}

#root main .mv-conversation select:focus,
#root main .mv-conversation select:focus-visible {
  outline: none !important;
  border-color: color-mix(in srgb, var(--primary) 70%, var(--border)) !important;
  box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--primary) 12%, transparent) !important;
}

/* 3. Modern Compact Glass Composer */
#root main .mv-talk-composer,
.mv-talk-composer {
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent) !important;
  border-radius: 12px !important;
  background: linear-gradient(145deg, color-mix(in srgb, var(--card) 85%, transparent), color-mix(in srgb, var(--card) 55%, var(--background))) !important;
  padding: 12px 14px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}

#root main .mv-talk-composer:focus-within,
.mv-talk-composer:focus-within {
  border-color: color-mix(in srgb, var(--primary) 60%, var(--border)) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05), 0 0 0 2.5px color-mix(in srgb, var(--primary) 12%, transparent) !important;
}

/* Strip inner borders from textarea inside composer */
#root main .mv-talk-composer textarea,
#root main .mv-conversation textarea,
.mv-talk-composer textarea {
  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  border-radius: 0 !important;
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  background-color: transparent !important;
  color: var(--foreground) !important;
  font-size: 12.5px !important;
  line-height: 1.65 !important;
  padding: 4px 2px 8px !important;
}

#root main .mv-talk-composer:not(.is-review):not(.is-reply) textarea {
  min-height: 72px !important;
  height: 72px !important;
}

#root main .mv-talk-composer.is-review textarea {
  min-height: 96px !important;
  height: 96px !important;
}

#root main .mv-talk-composer.is-reply textarea {
  min-height: 60px !important;
  height: 60px !important;
}

/* Review Headline Input */
#root main .mv-conversation .mv-talk-review-title,
.mv-conversation .mv-talk-review-title {
  width: 100% !important;
  min-height: 32px !important;
  height: 32px !important;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent) !important;
  background: color-mix(in srgb, var(--background) 50%, var(--card)) !important;
  color: var(--foreground) !important;
  border-radius: 7px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 0 10px !important;
  margin: 2px 0 8px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

#root main .mv-conversation .mv-talk-review-title:focus {
  border-color: color-mix(in srgb, var(--primary) 70%, var(--border)) !important;
  box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--primary) 12%, transparent) !important;
}

/* 4. Radiant Gold Stars & Rating Picker */
#root main .mv-talk-stars,
.mv-talk-stars {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2.5px !important;
  color: color-mix(in srgb, var(--border) 75%, transparent) !important;
}

#root main .mv-talk-stars svg,
.mv-talk-stars svg {
  width: 13px !important;
  height: 13px !important;
}

#root main .mv-talk-stars .is-filled,
#root main .mv-talk-stars .is-filled svg,
.mv-talk-stars .is-filled,
.mv-talk-stars .is-filled svg {
  color: #f59e0b !important;
  fill: #f59e0b !important;
}

#root main .mv-talk-rating-picker button,
.mv-talk-rating-picker button {
  width: 30px !important;
  min-height: 30px !important;
  height: 30px !important;
  padding: 4px !important;
  border: 1px solid color-mix(in srgb, var(--border) 65%, transparent) !important;
  background: color-mix(in srgb, var(--muted) 45%, var(--card)) !important;
  color: color-mix(in srgb, var(--muted-foreground) 80%, transparent) !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.15s ease !important;
}

#root main .mv-talk-rating-picker button:hover {
  color: #f59e0b !important;
  border-color: color-mix(in srgb, #f59e0b 35%, var(--border)) !important;
  background: color-mix(in srgb, #f59e0b 8%, var(--card)) !important;
  transform: scale(1.04) !important;
}

#root main .mv-talk-rating-picker button.is-selected {
  color: #f59e0b !important;
  border-color: color-mix(in srgb, #f59e0b 45%, var(--border)) !important;
  background: color-mix(in srgb, #f59e0b 12%, var(--card)) !important;
  box-shadow: 0 1px 6px rgba(245, 158, 11, 0.18) !important;
}

#root main .mv-talk-rating-value {
  font-size: 11px !important;
  font-weight: 650 !important;
  color: #f59e0b !important;
  margin-left: 2px !important;
}

/* 5. Review Overview Breakdown Card (Compact, Balanced, Subtle) */
#root main .mv-talk-review-overview,
.mv-talk-review-overview {
  display: grid !important;
  grid-template-columns: 100px minmax(140px, 1fr) auto !important;
  gap: 16px !important;
  align-items: center !important;
  padding: 14px 18px !important;
  border: 1px solid color-mix(in srgb, var(--border) 65%, transparent) !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--card) 85%, transparent), color-mix(in srgb, var(--card) 60%, var(--background))) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

#root main .mv-talk-average > strong {
  font-size: 30px !important;
  letter-spacing: -0.04em !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  color: var(--foreground) !important;
}

#root main .mv-talk-distribution button,
.mv-talk-distribution button {
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) 22px !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 20px !important;
  height: 20px !important;
  font-size: 10.5px !important;
  font-weight: 550 !important;
  color: var(--muted-foreground) !important;
  padding: 1px 4px !important;
  border-radius: 5px !important;
  background: transparent !important;
  border: 0 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

#root main .mv-talk-distribution button:hover {
  background: color-mix(in srgb, var(--muted) 40%, transparent) !important;
  color: var(--foreground) !important;
}

#root main .mv-talk-distribution button[aria-pressed='true'] {
  color: var(--primary) !important;
  font-weight: 650 !important;
  background: color-mix(in srgb, var(--primary) 8%, transparent) !important;
}

#root main .mv-talk-rating-track,
.mv-talk-rating-track {
  height: 4px !important;
  border-radius: 9999px !important;
  overflow: hidden !important;
  background: color-mix(in srgb, var(--muted) 75%, transparent) !important;
}

#root main .mv-talk-rating-track > span,
.mv-talk-rating-track > span {
  display: block !important;
  height: 100% !important;
  background: linear-gradient(90deg, #f59e0b, #fbbf24) !important;
  border-radius: 9999px !important;
}

/* 6. Comment and Review Hairline Thread Items (Neutralizing Depth.css Boxed Cards) */
#root main .mv-talk-list > .mv-talk-item,
#root main .mv-talk-item,
.mv-talk-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 13px 2px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 45%, transparent) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#root main .mv-talk-list > .mv-talk-item:hover,
#root main .mv-talk-item:hover {
  border-color: color-mix(in srgb, var(--border) 60%, transparent) !important;
  background: transparent !important;
}

#root main .mv-talk-list > .mv-talk-item:first-child,
#root main .mv-talk-item:first-child {
  padding-top: 6px !important;
}

#root main .mv-talk-list > .mv-talk-item:last-child,
#root main .mv-talk-item:last-child {
  border-bottom: 0 !important;
}

#root main .mv-talk-author > strong {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--foreground) !important;
}

#root main .mv-talk-content > p {
  font-size: 12.5px !important;
  line-height: 1.68 !important;
  color: var(--foreground) !important;
}

#root main .mv-talk-review h3 {
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1.4 !important;
  margin: 4px 0 3px !important;
  color: var(--foreground) !important;
}

/* 7. Action Buttons */
#root main .mv-talk-primary,
.mv-talk-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-height: 30px !important;
  height: 30px !important;
  padding: 5px 13px !important;
  border: 1px solid var(--primary) !important;
  border-radius: 7px !important;
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  box-shadow: 0 1px 5px color-mix(in srgb, var(--primary) 25%, transparent) !important;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#root main .mv-talk-primary:hover {
  background: var(--primary-hover) !important;
  transform: translateY(-0.5px) !important;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 35%, transparent) !important;
}

#root main .mv-talk-primary:active {
  transform: translateY(0) !important;
}

#root main .mv-talk-primary:disabled {
  opacity: 0.45 !important;
  cursor: default !important;
  transform: none !important;
  box-shadow: none !important;
}

#root main .mv-talk-action,
#root main .mv-talk-reply-toggle,
.mv-talk-action,
.mv-talk-reply-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  min-height: 26px !important;
  height: 26px !important;
  padding: 2px 7px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  font-size: 11px !important;
  font-weight: 550 !important;
  color: var(--muted-foreground) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

#root main .mv-talk-action:hover,
#root main .mv-talk-reply-toggle:hover {
  color: var(--foreground) !important;
  background: color-mix(in srgb, var(--muted) 50%, transparent) !important;
}

#root main .mv-talk-action[aria-pressed='true'] {
  color: var(--primary) !important;
  background: color-mix(in srgb, var(--primary) 9%, transparent) !important;
  font-weight: 600 !important;
}

/* 8. Responsive Adjustments */
@media (max-width: 1050px) {
  #root main .mv-talk-review-overview {
    grid-template-columns: 95px minmax(0, 1fr) !important;
    gap: 14px !important;
  }
  #root main .mv-talk-review-overview > .mv-talk-primary {
    grid-column: 1 / -1 !important;
    justify-self: start !important;
    width: 100% !important;
  }
}

@media (max-width: 640px) {
  #root main .mv-talk-review-overview {
    padding: 12px 14px !important;
    grid-template-columns: 88px minmax(0, 1fr) !important;
    gap: 12px !important;
  }
  #root main .mv-talk-average > strong {
    font-size: 26px !important;
  }
}

@media (max-width: 479px) {
  #root main .mv-talk-heading {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  #root main .mv-talk-segments {
    width: auto !important;
    flex: 1 !important;
  }
  #root main .mv-talk-segments button {
    padding: 4px 6px !important;
    gap: 4px !important;
    font-size: 10.5px !important;
    min-height: 28px !important;
    height: 28px !important;
  }
  #root main .mv-talk-heading > select {
    width: 106px !important;
    max-width: 106px !important;
    flex: 0 0 106px !important;
    font-size: 10.5px !important;
    padding: 0 22px 0 7px !important;
  }
  #root main .mv-talk-composer {
    padding: 10px 12px !important;
    border-radius: 10px !important;
  }
  #root main .mv-talk-item {
    gap: 8px !important;
    padding: 11px 0 !important;
  }
  #root main .mv-talk-content > p {
    font-size: 11.5px !important;
    line-height: 1.62 !important;
  }
  #root main .mv-talk-review-overview {
    padding: 10px 12px !important;
    grid-template-columns: 80px minmax(0, 1fr) !important;
    gap: 10px !important;
  }
  #root main .mv-talk-average > strong {
    font-size: 24px !important;
  }
}

@media (max-width: 340px) {
  #root main .mv-talk-segments button {
    padding: 3px 4px !important;
    font-size: 9.5px !important;
  }
  #root main .mv-talk-segment-count {
    padding: 1px 4px !important;
    font-size: 9px !important;
  }
  #root main .mv-talk-heading > select {
    width: 92px !important;
    max-width: 92px !important;
    flex: 0 0 92px !important;
    font-size: 9.5px !important;
  }
  #root main .mv-talk-review-overview {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  #root main .mv-talk-average {
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
  }
}

/* ==========================================================================
   SECTION 17: FLOATING QUICK READING NAVIGATION DOCK (.mv-story-quick-nav)
   Inspired by Cherrymist's ergonomic responsive floating dock architecture:
   - Desktop (>= 768px): Centered pill (max-w-[560px], fixed bottom-4), pointer-events-none outer, pointer-events-auto inner.
   - Mobile (< 768px): Fixed inset-x-3 bottom-3 z-50 with safe-area-inset padding, rounded-full geometry.
   ========================================================================== */

/* 1. Desktop Dock Wrapper */
.mv-story-quick-nav-desktop {
  display: block !important;
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 1rem !important; /* bottom-4 */
  z-index: 40 !important;
  pointer-events: none !important;
  animation: mvFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

@media (max-width: 767px) {
  .mv-story-quick-nav-desktop {
    display: none !important;
  }
}

/* 2. Mobile Dock Wrapper */
.mv-story-quick-nav-mobile {
  display: block !important;
  position: fixed !important;
  left: 0.75rem !important; /* inset-x-3 */
  right: 0.75rem !important;
  bottom: 0.75rem !important; /* bottom-3 */
  z-index: 50 !important;
  animation: mvFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) both !important;
  padding-bottom: max(0px, calc(env(safe-area-inset-bottom) - 0.75rem)) !important;
}

@media (min-width: 768px) {
  .mv-story-quick-nav-mobile {
    display: none !important;
  }
}

/* 3. The Pill Card */
.mv-quick-nav-pill {
  width: 100% !important;
  max-width: 560px !important;
  margin-inline: auto !important;
  pointer-events: auto !important;
  border-radius: 9999px !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent) !important;
  background: color-mix(in srgb, var(--card) 85%, transparent) !important;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.38), 0 0 0 1px color-mix(in srgb, var(--primary) 12%, transparent) !important;
  display: flex !important;
  align-items: center !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.mv-story-quick-nav-desktop .mv-quick-nav-pill {
  height: 64px !important;
  padding-inline: 12px !important;
}

.mv-story-quick-nav-mobile .mv-quick-nav-pill {
  height: 68px !important;
  padding-inline: 10px !important;
}

/* Inner elements container */
.mv-quick-nav-row {
  position: relative !important;
  width: 100% !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

@media (min-width: 768px) {
  .mv-quick-nav-row {
    gap: 10px !important;
  }
}

/* 4. Circular Progress Indicator (44x44) */
.mv-quick-nav-progress {
  position: relative !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  flex-shrink: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 9999px !important;
  text-decoration: none !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.mv-quick-nav-progress:hover {
  transform: scale(1.06) !important;
}

.mv-quick-nav-progress:active {
  transform: scale(0.94) !important;
}

.mv-quick-nav-progress svg {
  transform: rotate(-90deg) !important;
  width: 44px !important;
  height: 44px !important;
}

.mv-quick-nav-progress .stroke-muted {
  stroke: color-mix(in srgb, var(--muted-foreground) 25%, transparent) !important;
}

.mv-quick-nav-progress .stroke-primary {
  stroke: var(--primary) !important;
  transition: stroke-dashoffset 0.5s ease-out !important;
}

.mv-quick-nav-progress span {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--primary) !important;
  letter-spacing: -0.02em !important;
}

/* 5. Primary Start / Continue Reading Button */
.mv-quick-nav-cta {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  height: 44px !important;
  min-height: 44px !important;
  border-radius: 9999px !important;
  background: var(--primary) !important;
  color: var(--primary-foreground, #0d0f14) !important;
  font-size: 13.5px !important;
  font-weight: 650 !important;
  padding: 0 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px -3px color-mix(in srgb, var(--primary) 50%, transparent) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.mv-quick-nav-cta:hover {
  background: color-mix(in srgb, var(--primary) 92%, #fff) !important;
  transform: scale(1.02) !important;
  box-shadow: 0 6px 20px -3px color-mix(in srgb, var(--primary) 65%, transparent) !important;
}

.mv-quick-nav-cta:active {
  transform: scale(0.98) !important;
}

.mv-quick-nav-cta svg {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
}

/* 6. Notification / Track Bell Button */
.mv-quick-nav-track {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  flex-shrink: 0 !important;
  border-radius: 9999px !important;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent) !important;
  background: color-mix(in srgb, var(--card) 60%, transparent) !important;
  color: var(--foreground) !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.mv-quick-nav-track:hover {
  background: color-mix(in srgb, var(--card) 85%, transparent) !important;
  border-color: color-mix(in srgb, var(--primary) 50%, transparent) !important;
  transform: scale(1.02) !important;
}

.mv-quick-nav-track:active {
  transform: scale(0.98) !important;
}

.mv-quick-nav-track[aria-pressed="true"],
.mv-quick-nav-track.is-tracked {
  border-color: color-mix(in srgb, var(--primary) 55%, transparent) !important;
  background: color-mix(in srgb, var(--primary) 15%, transparent) !important;
  color: var(--primary) !important;
  box-shadow: 0 0 12px color-mix(in srgb, var(--primary) 25%, transparent) !important;
}

.mv-quick-nav-track svg {
  width: 16px !important;
  height: 16px !important;
}

/* 7. Library / Shelf Button */
.mv-quick-nav-library {
  height: 44px !important;
  min-height: 44px !important;
  flex-shrink: 0 !important;
  border-radius: 9999px !important;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent) !important;
  background: color-mix(in srgb, var(--card) 60%, transparent) !important;
  color: var(--foreground) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0 13px !important;
  cursor: pointer !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.mv-quick-nav-library:hover {
  background: color-mix(in srgb, var(--card) 85%, transparent) !important;
  border-color: color-mix(in srgb, var(--primary) 50%, transparent) !important;
  transform: scale(1.02) !important;
}

.mv-quick-nav-library:active {
  transform: scale(0.98) !important;
}

.mv-quick-nav-library.is-saved {
  border-color: color-mix(in srgb, var(--primary) 40%, transparent) !important;
  background: color-mix(in srgb, var(--primary) 14%, transparent) !important;
  color: var(--primary) !important;
}

.mv-quick-nav-library svg {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
}

/* 8. Hide global mobile bottom nav on story detail pages to avoid obstruction */
body:has(.mv-story-quick-nav) nav[aria-label="Mobile"],
.mv-story-page-active nav[aria-label="Mobile"] {
  display: none !important;
}

/* Story page bottom padding clearance */
.mv-story-page,
.mv-series {
  padding-bottom: 96px !important;
}

@media (max-width: 767px) {
  .mv-story-page,
  .mv-series {
    padding-bottom: 110px !important;
  }
  .mv-quick-nav-cta {
    font-size: 12px !important;
    padding: 0 10px !important;
    gap: 5px !important;
  }
  .mv-quick-nav-cta svg {
    width: 14px !important;
    height: 14px !important;
  }
  .mv-quick-nav-track {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }
  .mv-quick-nav-library {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 10px !important;
    gap: 4px !important;
  }
  .mv-quick-nav-progress {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }
}

@media (max-width: 360px) {
  .mv-quick-nav-pill {
    padding-inline: 6px !important;
  }
  .mv-quick-nav-row {
    gap: 5px !important;
  }
  .mv-quick-nav-progress {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
  }
  .mv-quick-nav-progress svg {
    width: 38px !important;
    height: 38px !important;
  }
  .mv-quick-nav-progress circle {
    cx: 19 !important;
    cy: 19 !important;
    r: 17.5 !important;
  }
  .mv-quick-nav-cta {
    font-size: 11.5px !important;
    padding: 0 8px !important;
  }
  .mv-quick-nav-track {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
  }
  .mv-quick-nav-library {
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 8px !important;
  }
}