/* ==========================================================================
   SLIM TOP NAVBAR & INTUITIVE MOBILE DROPDOWN (v2.9.0)
   ========================================================================== */

/* Zero-lag theme transition lock */
.fcn-switching-theme,
.fcn-switching-theme * {
  transition: none !important;
}

/* --------------------------------------------------------------------------
   Sticky Modern Top Navbar Header (Slim Single Row)
   -------------------------------------------------------------------------- */
.main-navigation.fcn-modern-navbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
  width: 100% !important;
  height: 48px !important;
  background: var(--bg-900, #12141a) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35) !important;
}

html[data-mode="light"] .main-navigation.fcn-modern-navbar {
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
}

/* Hide old burger menu elements completely */
.mobile-menu-button,
#mobile-menu,
.mobile-menu,
.fcn-mobile-matrix-bar,
.fcn-mobile-dock {
  display: none !important;
}

.fcn-navbar-container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: .5rem !important;
  width: 100% !important;
  height: 100% !important;
  max-width: var(--layout-width-main, 1200px) !important;
  margin: 0 auto !important;
  padding: 0 .75rem !important;
  box-sizing: border-box !important;
}

/* Desktop Navigation Pills */
.fcn-nav-desktop-primary {
  display: flex !important;
  align-items: center !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.fcn-nav-pill-list {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: .25rem !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.fcn-nav-pill-list > li {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
}

.fcn-nav-pill-list > li > a {
  display: inline-flex !important;
  align-items: center !important;
  gap: .4rem !important;
  padding: .35rem .65rem !important;
  border-radius: 6px !important;
  color: var(--fg-400, #cbd5e1) !important;
  font-size: .84rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  transition: background 120ms ease, color 120ms ease !important;
}

.fcn-nav-pill-list > li > a:hover,
.fcn-nav-pill-list > li.current-menu-item > a,
.fcn-nav-pill-list > li.current-page-ancestor > a {
  color: var(--fg-100, #ffffff) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

html[data-mode="light"] .fcn-nav-pill-list > li > a {
  color: var(--fg-700, #334155) !important;
}

html[data-mode="light"] .fcn-nav-pill-list > li > a:hover,
html[data-mode="light"] .fcn-nav-pill-list > li.current-menu-item > a {
  color: var(--fg-900, #0f172a) !important;
  background: rgba(0, 0, 0, 0.06) !important;
}

.nav-item__icon {
  font-size: .85rem !important;
  opacity: .85 !important;
}

/* Mobile Brand Title */
.fcn-mobile-brand {
  display: none;
}

/* Right-Side Utility Toolbar */
.fcn-nav-toolbar {
  display: flex !important;
  align-items: center !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

.fcn-toolbar-icons {
  display: flex !important;
  align-items: center !important;
  gap: .25rem !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.fcn-toolbar-icons .menu-item {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 2rem !important;
  height: 2rem !important;
}

.fcn-toolbar-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2rem !important;
  height: 2rem !important;
  padding: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--fg-400, #cbd5e1) !important;
  font-size: .95rem !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background 100ms ease, color 100ms ease !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.fcn-toolbar-btn:hover {
  color: var(--fg-100, #ffffff) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

html[data-mode="light"] .fcn-toolbar-btn {
  color: var(--fg-700, #334155) !important;
}

html[data-mode="light"] .fcn-toolbar-btn:hover {
  color: var(--fg-900, #0f172a) !important;
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Instant Theme Toggle Button & Direct Icon Visibility */
.fcn-theme-toggle-btn i {
  font-size: 1rem !important;
  pointer-events: none !important;
  transition: transform 100ms ease !important;
}

.fcn-theme-toggle-btn:active i {
  transform: scale(0.85) !important;
}

html[data-mode="dark"] .fcn-theme-toggle-btn .only-lightmode,
html:not([data-mode="light"]) .fcn-theme-toggle-btn .only-lightmode,
html[data-mode="dark"] .toggle-light-mode .only-lightmode,
html:not([data-mode="light"]) .toggle-light-mode .only-lightmode {
  display: none !important;
}

html[data-mode="dark"] .fcn-theme-toggle-btn .only-darkmode,
html:not([data-mode="light"]) .fcn-theme-toggle-btn .only-darkmode,
html[data-mode="dark"] .toggle-light-mode .only-darkmode,
html:not([data-mode="light"]) .toggle-light-mode .only-darkmode {
  display: inline-block !important;
  color: #facc15 !important;
}

html[data-mode="light"] .fcn-theme-toggle-btn .only-darkmode,
html[data-mode="light"] .toggle-light-mode .only-darkmode {
  display: none !important;
}

html[data-mode="light"] .fcn-theme-toggle-btn .only-lightmode,
html[data-mode="light"] .toggle-light-mode .only-lightmode {
  display: inline-block !important;
  color: #6366f1 !important;
}

/* User Avatar */
.fcn-avatar-btn {
  position: relative !important;
}

.fcn-avatar-btn .user-icon {
  font-size: 1.15rem !important;
}

.fcn-avatar-btn img.user-profile-image {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  object-fit: cover !important;
}

.fcn-avatar-btn img.user-profile-image ~ img.user-profile-image {
  display: none !important;
}

/* ==========================================================================
   UNIVERSAL SUB-MENU SYSTEM (Desktop Primary & Account Dropdowns)
   ========================================================================== */

/* Parent items with child menus */
.main-navigation .menu-item-has-children,
.fcn-nav-pill-list > li.menu-item-has-children,
.icon-menu-account {
  position: relative !important;
}

/* Dropdown arrow for desktop parent items */
.fcn-nav-pill-list > li.menu-item-has-children > a::after {
  content: "\f107";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: .68rem;
  margin-left: 4px;
  opacity: .7;
  transition: transform 120ms ease;
}

.fcn-nav-pill-list > li.menu-item-has-children:hover > a::after,
.fcn-nav-pill-list > li.menu-item-has-children.is-open > a::after {
  transform: rotate(180deg);
}

/* Universal Sub-Menu Styling */
.main-navigation .sub-menu,
.fcn-nav-pill-list .sub-menu,
.fcn-user-submenu {
  position: absolute !important;
  top: calc(100% + 4px) !important;
  left: 0 !important;
  min-width: 185px !important;
  padding: 6px !important;
  margin: 0 !important;
  border-radius: 8px !important;
  background: rgba(18, 20, 26, 0.98) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  z-index: 999999 !important;
  display: none;
  flex-direction: column !important;
  gap: 2px !important;
  list-style: none !important;
  animation: fcnSubmenuIn 140ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes fcnSubmenuIn {
  from { opacity: 0; transform: translateY(-5px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Account Dropdown Right-Alignment */
.icon-menu-account .sub-menu,
.icon-menu-account .fcn-user-submenu {
  left: auto !important;
  right: 0 !important;
}

/* Display sub-menu on Hover, Focus-Within, or JS .is-open Class (Touch/Click) */
.main-navigation .menu-item-has-children:hover > .sub-menu,
.main-navigation .menu-item-has-children:focus-within > .sub-menu,
.main-navigation .menu-item-has-children.is-open > .sub-menu,
.icon-menu-account:hover > .sub-menu,
.icon-menu-account:focus-within > .sub-menu,
.icon-menu-account.is-open > .sub-menu {
  display: flex !important;
}

/* Sub-menu Items & Links */
.main-navigation .sub-menu li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: block !important;
  width: 100% !important;
}

.main-navigation .sub-menu a {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 7px 10px !important;
  border-radius: 6px !important;
  font-size: .82rem !important;
  font-weight: 600 !important;
  color: var(--fg-300, #cbd5e1) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: background 100ms ease, color 100ms ease !important;
}

.main-navigation .sub-menu a:hover,
.main-navigation .sub-menu a:focus {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

/* Light Mode Overrides */
html[data-mode="light"] .main-navigation .sub-menu,
html[data-mode="light"] .fcn-user-submenu {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12) !important;
}

html[data-mode="light"] .main-navigation .sub-menu a {
  color: #334155 !important;
}

html[data-mode="light"] .main-navigation .sub-menu a:hover,
html[data-mode="light"] .main-navigation .sub-menu a:focus {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

/* Guest Login Button */
.fcn-login-btn {
  width: auto !important;
  height: 1.85rem !important;
  padding: 0 .6rem !important;
  gap: .35rem !important;
  border-radius: 5px !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--fg-100, #ffffff) !important;
  font-size: .78rem !important;
  font-weight: 700 !important;
}

.fcn-login-btn:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
}

html[data-mode="light"] .fcn-login-btn {
  border-color: #cbd5e1 !important;
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

/* Responsive Visibility Helpers */
.fcn-show-mobile {
  display: none !important;
}
.fcn-hide-mobile {
  display: inline-flex !important;
}

/* --------------------------------------------------------------------------
   INTUITIVE MOBILE DROPDOWN MENU (Compact Floating Sheet)
   -------------------------------------------------------------------------- */
.fcn-mobile-dropdown {
  position: absolute !important;
  top: 48px !important;
  right: 8px !important;
  width: min(280px, calc(100vw - 16px)) !important;
  border-radius: 10px !important;
  background: rgba(18, 20, 26, 0.98) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6) !important;
  padding: .5rem !important;
  box-sizing: border-box !important;
  z-index: 99999 !important;
  animation: fcnDropdownSlide 160ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes fcnDropdownSlide {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.fcn-mobile-dropdown[hidden] {
  display: none !important;
}

html[data-mode="light"] .fcn-mobile-dropdown {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12) !important;
}

.fcn-mobile-dropdown__inner {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

.fcn-dropdown-item {
  display: flex !important;
  align-items: center !important;
  gap: .65rem !important;
  padding: .55rem .75rem !important;
  border-radius: 6px !important;
  color: var(--fg-300, #cbd5e1) !important;
  font-size: .80rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: background 100ms ease, color 100ms ease !important;
}

.fcn-dropdown-item i {
  font-size: .95rem !important;
  width: 1.2rem !important;
  text-align: center !important;
  color: var(--primary-accent, #38bdf8) !important;
}

.fcn-dropdown-item:hover,
.fcn-dropdown-item.is-active {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

html[data-mode="light"] .fcn-dropdown-item {
  color: #334155 !important;
}

html[data-mode="light"] .fcn-dropdown-item:hover,
html[data-mode="light"] .fcn-dropdown-item.is-active {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

/* Mobile Media Query Rules */
@media (max-width: 767px) {
  .fcn-nav-desktop-primary {
    display: none !important;
  }

  .fcn-hide-mobile {
    display: none !important;
  }

  .fcn-show-mobile {
    display: inline-flex !important;
  }

  .fcn-mobile-brand {
    display: flex !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .fcn-mobile-brand__link {
    display: inline-flex !important;
    align-items: center !important;
    gap: .4rem !important;
    color: var(--fg-100, #ffffff) !important;
    text-decoration: none !important;
    font-size: .92rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html[data-mode="light"] .fcn-mobile-brand__link {
    color: #0f172a !important;
  }

  .fcn-mobile-brand__icon {
    font-size: .9rem !important;
    color: var(--primary-accent, #38bdf8) !important;
  }
}

/* --------------------------------------------------------------------------
   DUAL-MODE LIVE SEARCH & A-Z INDEX MODAL
   -------------------------------------------------------------------------- */
.fcn-live-search-modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 999999 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: min(5vh, 3rem) 1rem 2rem !important;
  background: rgba(0, 0, 0, 0.78) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-sizing: border-box !important;
}

.fcn-live-search-modal[hidden] {
  display: none !important;
}

.fcn-search-card {
  display: flex !important;
  flex-direction: column !important;
  width: min(640px, 96vw) !important;
  max-height: calc(88vh - 1.5rem) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  background: rgba(18, 20, 26, 0.98) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.65) !important;
  overflow: hidden !important;
}

html[data-mode="light"] .fcn-search-card {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
}

/* Top Mode Switcher Bar */
.fcn-modal-mode-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: .5rem .75rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.02) !important;
}

html[data-mode="light"] .fcn-modal-mode-bar {
  border-bottom-color: #f1f5f9 !important;
  background: #f8fafc !important;
}

.fcn-mode-switcher {
  display: inline-flex !important;
  align-items: center !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  padding: 2px !important;
  gap: 2px !important;
}

html[data-mode="light"] .fcn-mode-switcher {
  background: #e2e8f0 !important;
  border-color: #cbd5e1 !important;
}

.fcn-mode-tab {
  display: inline-flex !important;
  align-items: center !important;
  gap: .35rem !important;
  padding: .25rem .65rem !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--fg-400, #94a3b8) !important;
  font-size: .74rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background 120ms ease, color 120ms ease !important;
}

.fcn-mode-tab.is-active {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}

html[data-mode="light"] .fcn-mode-tab {
  color: #64748b !important;
}

html[data-mode="light"] .fcn-mode-tab.is-active {
  background: #ffffff !important;
  color: #0f172a !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
}

.fcn-mode-full-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: .3rem !important;
  color: var(--primary-accent, #38bdf8) !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  margin-left: auto !important;
  margin-right: .6rem !important;
  padding: .2rem .4rem !important;
  border-radius: 4px !important;
}

.fcn-mode-full-link:hover {
  background: rgba(56, 189, 248, 0.1) !important;
}

.fcn-search-close {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  cursor: pointer !important;
}

.fcn-search-key {
  display: inline-grid !important;
  place-items: center !important;
  padding: .18rem .38rem !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 4px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--fg-500, #8b90a0) !important;
  font-size: .62rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

/* Search Header */
.fcn-search-header {
  display: flex !important;
  align-items: center !important;
  gap: .65rem !important;
  padding: .65rem 1rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html[data-mode="light"] .fcn-search-header {
  border-bottom-color: #e2e8f0 !important;
}

.fcn-search-header__icon {
  font-size: 1.1rem !important;
  color: var(--fg-500, #8b90a0) !important;
}

.fcn-search-input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 2.2rem !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--fg-100, #ffffff) !important;
  font-size: .95rem !important;
  font-weight: 500 !important;
  outline: none !important;
  box-shadow: none !important;
}

html[data-mode="light"] .fcn-search-input {
  color: #0f172a !important;
}

.fcn-search-clear {
  display: inline-grid !important;
  place-items: center !important;
  width: 1.5rem !important;
  height: 1.5rem !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: #cbd5e1 !important;
  font-size: 1rem !important;
  cursor: pointer !important;
}

/* Unified Filter Toolbar */
.fcn-search-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: .4rem !important;
  padding: .4rem .75rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  background: rgba(255, 255, 255, 0.015) !important;
}

.fcn-search-filters {
  display: flex !important;
  align-items: center !important;
  gap: .25rem !important;
}

.fcn-filter-chip {
  padding: .2rem .55rem !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: var(--fg-400, #8b90a0) !important;
  font-size: .68rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 120ms ease !important;
}

.fcn-filter-chip:hover,
.fcn-filter-chip.is-active {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

html[data-mode="light"] .fcn-filter-chip {
  border-color: #e2e8f0 !important;
  color: #64748b !important;
}

html[data-mode="light"] .fcn-filter-chip:hover,
html[data-mode="light"] .fcn-filter-chip.is-active {
  background: #e2e8f0 !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

/* BL Filter Button */
.fcn-bl-filter-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: .35rem !important;
  padding: .22rem .55rem !important;
  border-radius: 5px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--fg-300, #cbd5e1) !important;
  font-size: .68rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 120ms ease !important;
}

.fcn-bl-filter-btn:hover,
.fcn-bl-filter-btn.is-active,
.fcn-bl-filter-btn.has-filters {
  background: rgba(56, 189, 248, 0.12) !important;
  border-color: rgba(56, 189, 248, 0.3) !important;
  color: var(--primary-accent, #38bdf8) !important;
}

.fcn-bl-active-count {
  display: inline-grid !important;
  place-items: center !important;
  padding: 0 .3rem !important;
  height: 1.1rem !important;
  border-radius: 10px !important;
  background: var(--primary-accent, #38bdf8) !important;
  color: #0f172a !important;
  font-size: .58rem !important;
  font-weight: 800 !important;
}

/* Compact BL Taxonomy Popover Panel */
.fcn-bl-taxonomy-panel {
  display: flex !important;
  flex-direction: column !important;
  gap: .35rem !important;
  padding: .5rem .75rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(18, 20, 26, 0.95) !important;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.fcn-bl-taxonomy-panel[hidden] {
  display: none !important;
}

html[data-mode="light"] .fcn-bl-taxonomy-panel {
  background: #f8fafc !important;
  border-bottom-color: #e2e8f0 !important;
}

.fcn-bl-taxonomy-nav {
  display: flex !important;
  align-items: center !important;
  gap: .25rem !important;
}

/* Category Tabs */
.fcn-bl-tab {
  display: inline-flex !important;
  align-items: center !important;
  gap: .3rem !important;
  padding: .2rem .55rem !important;
  border-radius: 5px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  font-size: .66rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 120ms ease !important;
}

.fcn-bl-tab._cat-tropes { color: #c084fc !important; }
.fcn-bl-tab._cat-tropes:hover, .fcn-bl-tab._cat-tropes.is-active { background: rgba(192, 132, 252, 0.16) !important; border-color: rgba(192, 132, 252, 0.35) !important; color: #e9d5ff !important; }

.fcn-bl-tab._cat-tops { color: #38bdf8 !important; }
.fcn-bl-tab._cat-tops:hover, .fcn-bl-tab._cat-tops.is-active { background: rgba(56, 189, 248, 0.16) !important; border-color: rgba(56, 189, 248, 0.35) !important; color: #bae6fd !important; }

.fcn-bl-tab._cat-bottoms { color: #f472b6 !important; }
.fcn-bl-tab._cat-bottoms:hover, .fcn-bl-tab._cat-bottoms.is-active { background: rgba(244, 114, 182, 0.16) !important; border-color: rgba(244, 114, 182, 0.35) !important; color: #fbcfe8 !important; }

.fcn-bl-tab._cat-backgrounds { color: #34d399 !important; }
.fcn-bl-tab._cat-backgrounds:hover, .fcn-bl-tab._cat-backgrounds.is-active { background: rgba(52, 211, 153, 0.16) !important; border-color: rgba(52, 211, 153, 0.35) !important; color: #a7f3d0 !important; }

html[data-mode="light"] .fcn-bl-tab._cat-tropes { color: #9333ea !important; }
html[data-mode="light"] .fcn-bl-tab._cat-tropes.is-active { background: #faf5ff !important; border-color: #d8b4fe !important; }

html[data-mode="light"] .fcn-bl-tab._cat-tops { color: #0284c7 !important; }
html[data-mode="light"] .fcn-bl-tab._cat-tops.is-active { background: #f0f9ff !important; border-color: #bae6fd !important; }

html[data-mode="light"] .fcn-bl-tab._cat-bottoms { color: #db2777 !important; }
html[data-mode="light"] .fcn-bl-tab._cat-bottoms.is-active { background: #fdf2f8 !important; border-color: #fbcfe8 !important; }

html[data-mode="light"] .fcn-bl-tab._cat-backgrounds { color: #059669 !important; }
html[data-mode="light"] .fcn-bl-tab._cat-backgrounds.is-active { background: #ecfdf5 !important; border-color: #a7f3d0 !important; }

.fcn-bl-clear-btn {
  margin-left: auto !important;
  padding: .15rem .45rem !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: rgba(239, 68, 68, 0.12) !important;
  color: #ef4444 !important;
  font-size: .62rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

/* Category Tag Chips */
.fcn-bl-tag-cloud {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  max-height: 120px !important;
  overflow-y: auto !important;
  padding: .35rem .15rem .15rem !important;
}

.fcn-bl-tag-chip {
  padding: .2rem .5rem !important;
  border-radius: 5px !important;
  font-size: .66rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 120ms ease !important;
}

.fcn-bl-tag-chip._cat-tropes { border: 1px solid rgba(192, 132, 252, 0.25) !important; background: rgba(192, 132, 252, 0.08) !important; color: #e9d5ff !important; }
.fcn-bl-tag-chip._cat-tropes:hover { background: rgba(192, 132, 252, 0.18) !important; border-color: rgba(192, 132, 252, 0.45) !important; }
.fcn-bl-tag-chip._cat-tropes.is-selected { background: #9333ea !important; border-color: #c084fc !important; color: #ffffff !important; box-shadow: 0 2px 8px rgba(147, 51, 234, 0.4) !important; }

.fcn-bl-tag-chip._cat-tops { border: 1px solid rgba(56, 189, 248, 0.25) !important; background: rgba(56, 189, 248, 0.08) !important; color: #bae6fd !important; }
.fcn-bl-tag-chip._cat-tops:hover { background: rgba(56, 189, 248, 0.18) !important; border-color: rgba(56, 189, 248, 0.45) !important; }
.fcn-bl-tag-chip._cat-tops.is-selected { background: #0284c7 !important; border-color: #38bdf8 !important; color: #ffffff !important; box-shadow: 0 2px 8px rgba(2, 132, 199, 0.4) !important; }

.fcn-bl-tag-chip._cat-bottoms { border: 1px solid rgba(244, 114, 182, 0.25) !important; background: rgba(244, 114, 182, 0.08) !important; color: #fbcfe8 !important; }
.fcn-bl-tag-chip._cat-bottoms:hover { background: rgba(244, 114, 182, 0.18) !important; border-color: rgba(244, 114, 182, 0.45) !important; }
.fcn-bl-tag-chip._cat-bottoms.is-selected { background: #db2777 !important; border-color: #f472b6 !important; color: #ffffff !important; box-shadow: 0 2px 8px rgba(219, 39, 119, 0.4) !important; }

.fcn-bl-tag-chip._cat-backgrounds { border: 1px solid rgba(52, 211, 153, 0.25) !important; background: rgba(52, 211, 153, 0.08) !important; color: #a7f3d0 !important; }
.fcn-bl-tag-chip._cat-backgrounds:hover { background: rgba(52, 211, 153, 0.18) !important; border-color: rgba(52, 211, 153, 0.45) !important; }
.fcn-bl-tag-chip._cat-backgrounds.is-selected { background: #059669 !important; border-color: #34d399 !important; color: #ffffff !important; box-shadow: 0 2px 8px rgba(5, 150, 105, 0.4) !important; }

html[data-mode="light"] .fcn-bl-tag-chip._cat-tropes { background: #faf5ff !important; border-color: #d8b4fe !important; color: #7e22ce !important; }
html[data-mode="light"] .fcn-bl-tag-chip._cat-tropes.is-selected { background: #9333ea !important; color: #ffffff !important; }

html[data-mode="light"] .fcn-bl-tag-chip._cat-tops { background: #f0f9ff !important; border-color: #bae6fd !important; color: #0369a1 !important; }
html[data-mode="light"] .fcn-bl-tag-chip._cat-tops.is-selected { background: #0284c7 !important; color: #ffffff !important; }

html[data-mode="light"] .fcn-bl-tag-chip._cat-bottoms { background: #fdf2f8 !important; border-color: #fbcfe8 !important; color: #be185d !important; }
html[data-mode="light"] .fcn-bl-tag-chip._cat-bottoms.is-selected { background: #db2777 !important; color: #ffffff !important; }

html[data-mode="light"] .fcn-bl-tag-chip._cat-backgrounds { background: #ecfdf5 !important; border-color: #a7f3d0 !important; color: #047857 !important; }
html[data-mode="light"] .fcn-bl-tag-chip._cat-backgrounds.is-selected { background: #059669 !important; color: #ffffff !important; }

/* Alphabet Strip (Index Mode with Dimmed Empty Letters) */
.fcn-index-alphabet-strip {
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  padding: .4rem .65rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.02) !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}

.fcn-index-alphabet-strip::-webkit-scrollbar {
  display: none;
}

.fcn-index-alphabet-strip[hidden] {
  display: none !important;
}

.fcn-letter-chip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 1.6rem !important;
  height: 1.6rem !important;
  padding: 0 .3rem !important;
  border: 1px solid transparent !important;
  border-radius: 4px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--fg-400, #94a3b8) !important;
  font-size: .68rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: all 120ms ease !important;
}

.fcn-letter-chip:hover,
.fcn-letter-chip.is-active {
  background: var(--primary-accent, #38bdf8) !important;
  color: #0f172a !important;
  font-weight: 800 !important;
}

.fcn-letter-chip.is-disabled,
.fcn-letter-chip:disabled {
  opacity: 0.22 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  background: transparent !important;
}

html[data-mode="light"] .fcn-letter-chip {
  background: #f1f5f9 !important;
  color: #475569 !important;
}

html[data-mode="light"] .fcn-letter-chip:hover,
html[data-mode="light"] .fcn-letter-chip.is-active {
  background: #0284c7 !important;
  color: #ffffff !important;
}

/* Scrollable Body */
.fcn-search-body {
  overflow-y: auto !important;
  max-height: 420px !important;
  padding: .35rem 0 !important;
  scrollbar-width: thin !important;
}

.fcn-search-results {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  padding: 0 .45rem !important;
}

/* Search Items */
.fcn-search-item {
  display: flex !important;
  align-items: center !important;
  gap: .65rem !important;
  padding: .45rem .6rem !important;
  border-radius: 6px !important;
  color: inherit !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background 100ms ease !important;
}

.fcn-search-item:hover,
.fcn-search-item.is-selected {
  background: rgba(255, 255, 255, 0.06) !important;
}

html[data-mode="light"] .fcn-search-item:hover,
html[data-mode="light"] .fcn-search-item.is-selected {
  background: #f1f5f9 !important;
}

.fcn-search-item__cover {
  width: 30px !important;
  height: 44px !important;
  border-radius: 3px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
}

.fcn-search-item__info {
  display: flex !important;
  flex-direction: column !important;
  gap: .15rem !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.fcn-search-item__title {
  font-size: .84rem !important;
  font-weight: 700 !important;
  color: var(--fg-100, #ffffff) !important;
  line-height: 1.25 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-mode="light"] .fcn-search-item__title {
  color: #0f172a !important;
}

.fcn-search-item__title mark {
  background: transparent !important;
  color: var(--primary-accent, #38bdf8) !important;
  font-weight: 800 !important;
}

.fcn-search-item__meta {
  display: flex !important;
  align-items: center !important;
  gap: .35rem !important;
  font-size: .65rem !important;
  color: var(--fg-500, #8b90a0) !important;
}

.fcn-search-item__status {
  display: inline-flex !important;
  align-items: center !important;
  gap: .2rem !important;
  padding: .02rem .25rem !important;
  border-radius: 3px !important;
  font-weight: 700 !important;
  font-size: .58rem !important;
  text-transform: capitalize !important;
}

.fcn-search-item__status._ongoing { background: rgba(16, 185, 129, 0.12) !important; color: #10b981 !important; }
.fcn-search-item__status._completed { background: rgba(14, 165, 233, 0.12) !important; color: #0ea5e9 !important; }
.fcn-search-item__status._hiatus { background: rgba(245, 158, 11, 0.12) !important; color: #f59e0b !important; }

.fcn-search-overflow-note {
  text-align: center !important;
  padding: .65rem !important;
  font-size: .72rem !important;
  color: var(--fg-500, #8b90a0) !important;
}

/* --------------------------------------------------------------------------
   A-Z INDEX MODE LAYOUT
   -------------------------------------------------------------------------- */
.fcn-index-group-list {
  display: flex !important;
  flex-direction: column !important;
  gap: .75rem !important;
  padding: .25rem 0 !important;
}

.fcn-index-letter-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.fcn-index-letter-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: .3rem .6rem !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(8px) !important;
  margin: 0 .2rem .2rem !important;
}

html[data-mode="light"] .fcn-index-letter-header {
  background: #f1f5f9 !important;
}

.fcn-index-letter-badge {
  display: inline-grid !important;
  place-items: center !important;
  width: 1.4rem !important;
  height: 1.4rem !important;
  border-radius: 4px !important;
  background: var(--primary-accent, #38bdf8) !important;
  color: #0f172a !important;
  font-size: .74rem !important;
  font-weight: 800 !important;
}

.fcn-index-letter-count {
  font-size: .65rem !important;
  color: var(--fg-500, #8b90a0) !important;
  font-weight: 600 !important;
}

.fcn-index-letter-items {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.fcn-index-item {
  display: flex !important;
  align-items: center !important;
  gap: .65rem !important;
  padding: .35rem .6rem !important;
  border-radius: 6px !important;
  color: inherit !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background 100ms ease !important;
}

.fcn-index-item:hover,
.fcn-index-item.is-selected {
  background: rgba(255, 255, 255, 0.06) !important;
}

html[data-mode="light"] .fcn-index-item:hover,
html[data-mode="light"] .fcn-index-item.is-selected {
  background: #f1f5f9 !important;
}

.fcn-index-item__cover {
  width: 26px !important;
  height: 38px !important;
  border-radius: 3px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
}

.fcn-index-item__info {
  display: flex !important;
  flex-direction: column !important;
  gap: .1rem !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.fcn-index-item__title {
  font-size: .82rem !important;
  font-weight: 700 !important;
  color: var(--fg-100, #ffffff) !important;
  line-height: 1.25 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-mode="light"] .fcn-index-item__title {
  color: #0f172a !important;
}

.fcn-index-item__meta {
  display: flex !important;
  align-items: center !important;
  gap: .35rem !important;
  font-size: .62rem !important;
  color: var(--fg-500, #8b90a0) !important;
}

.fcn-index-item__arrow {
  color: var(--fg-500, #8b90a0) !important;
  font-size: .72rem !important;
  margin-left: auto !important;
}

/* Empty State */
.fcn-search-empty {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .5rem !important;
  padding: 2.5rem 1rem !important;
  text-align: center !important;
  color: var(--fg-500, #8b90a0) !important;
  font-size: .84rem !important;
}

.fcn-search-empty i {
  font-size: 2rem !important;
  opacity: .5 !important;
}

.fcn-search-empty a {
  color: var(--primary-accent, #38bdf8) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

/* Modal Footer */
.fcn-search-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: .5rem .85rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.02) !important;
  font-size: .65rem !important;
  color: var(--fg-500, #8b90a0) !important;
}

html[data-mode="light"] .fcn-search-footer {
  border-top-color: #e2e8f0 !important;
  background: #f8fafc !important;
}

.fcn-search-hints {
  display: flex !important;
  align-items: center !important;
  gap: .65rem !important;
}

.fcn-search-hints kbd {
  padding: .1rem .28rem !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 3px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  font-family: inherit !important;
  font-weight: 700 !important;
}

html[data-mode="light"] .fcn-search-hints kbd {
  border-color: #cbd5e1 !important;
  background: #ffffff !important;
}


/* ==========================================================================
   NOTION-LIKE MINIMALIST BREADCRUMBS (Chapter Top - Above Main & Polygon)
   ========================================================================== */

.fcn-chapter-breadcrumbs-container {
  display: block !important;
  position: relative !important;
  z-index: 100 !important;
  width: 100% !important;
  max-width: var(--layout-width-main, 1200px) !important;
  margin: 1rem auto 0.4rem auto !important;
  padding: 0 1rem !important;
  box-sizing: border-box !important;
}

.fcn-notion-breadcrumbs {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

.fcn-notion-breadcrumbs__list {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 0.25rem !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 0.8125rem !important;
  line-height: 1.4 !important;
}

.fcn-notion-breadcrumbs__list::-webkit-scrollbar {
  display: none !important;
}

.fcn-notion-breadcrumbs__item {
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.fcn-notion-breadcrumbs__item--story {
  max-width: 240px !important;
}

.fcn-notion-breadcrumbs__item--current {
  max-width: 320px !important;
  flex-shrink: 1 !important;
  min-width: 0 !important;
}

.fcn-notion-breadcrumbs__link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 3px 6px !important;
  border-radius: 4px !important;
  color: var(--fg-400, #8b949e) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: background 120ms ease, color 120ms ease !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
}

.fcn-notion-breadcrumbs__home-icon {
  font-size: 0.75rem !important;
  opacity: 0.85 !important;
}

.fcn-notion-breadcrumbs__link:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--fg-100, #ffffff) !important;
}

.fcn-notion-breadcrumbs__separator {
  color: var(--fg-600, #484f58) !important;
  opacity: 0.55 !important;
  font-size: 0.72rem !important;
  margin: 0 1px !important;
  user-select: none !important;
  flex-shrink: 0 !important;
}

.fcn-notion-breadcrumbs__current {
  display: inline-block !important;
  padding: 3px 6px !important;
  color: var(--fg-200, #e6edf3) !important;
  font-weight: 500 !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

/* Light Mode */
html[data-mode="light"] .fcn-notion-breadcrumbs__link {
  color: #64748b !important;
}

html[data-mode="light"] .fcn-notion-breadcrumbs__link:hover {
  background: rgba(0, 0, 0, 0.05) !important;
  color: #0f172a !important;
}

html[data-mode="light"] .fcn-notion-breadcrumbs__separator {
  color: #94a3b8 !important;
  opacity: 0.65 !important;
}

html[data-mode="light"] .fcn-notion-breadcrumbs__current {
  color: #1e293b !important;
}

/* Hide default bottom footer breadcrumbs on chapter pages */
body.single-fcn_chapter .footer .nav-breadcrumbs {
  display: none !important;
}

@media screen and (max-width: 640px) {
  .fcn-chapter-breadcrumbs-container {
    margin: 0.65rem auto 0.2rem auto !important;
    padding: 0 0.75rem !important;
  }
  .fcn-notion-breadcrumbs__item--story {
    max-width: 130px !important;
  }
  .fcn-notion-breadcrumbs__item--current {
    max-width: 160px !important;
  }
}
/* Light Mode Notion Breadcrumbs */
html[data-mode="light"] .fcn-notion-breadcrumbs__link {
  color: #64748b !important;
}

html[data-mode="light"] .fcn-notion-breadcrumbs__link:hover {
  background: rgba(0, 0, 0, 0.05) !important;
  color: #0f172a !important;
}

html[data-mode="light"] .fcn-notion-breadcrumbs__separator {
  color: #94a3b8 !important;
  opacity: 0.6 !important;
}

html[data-mode="light"] .fcn-notion-breadcrumbs__current {
  color: #1e293b !important;
}

@media screen and (max-width: 640px) {
  .fcn-chapter-breadcrumbs-container {
    margin: 0.5rem auto 0.2rem auto !important;
    padding: 0 0.75rem !important;
  }
  .fcn-notion-breadcrumbs__item--story {
    max-width: 140px !important;
  }
  .fcn-notion-breadcrumbs__item--current {
    max-width: 180px !important;
  }
}