/* ==========================================================================
   SLIM TOP NAVBAR, INTUITIVE MOBILE DROPDOWN & UNIVERSAL SUB-MENUS (v2.21.0)
   ========================================================================== */

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

/* Body lock when Live Search is open */
body.fcn-search-modal-open {
  overflow: hidden !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;
}

/* Logout Button in Toolbar */
.fcn-logout-btn {
  color: var(--fg-400, #cbd5e1) !important;
  transition: all 120ms ease !important;
}

.fcn-logout-btn:hover {
  color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.12) !important;
}

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

html[data-mode="light"] .fcn-logout-btn:hover {
  color: #dc2626 !important;
  background: rgba(220, 38, 38, 0.08) !important;
}

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

/* Override and disable parent theme's :not(:hover) sub-menu hiding */
:is(.main-navigation, .icon-menu) .menu-item:not(:hover) .sub-menu,
:is(.main-navigation, .icon-menu) .sub-menu {
  transform: none;
  content-visibility: visible !important;
}

/* 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 Base */
.main-navigation .sub-menu,
.fcn-nav-pill-list .sub-menu,
.fcn-user-submenu {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  min-width: 195px !important;
  padding: 6px !important;
  margin: 0 !important;
  border-radius: 10px !important;
  background: rgba(18, 20, 26, 0.98) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  z-index: 9999999 !important;
  display: none !important;
  flex-direction: column !important;
  gap: 3px !important;
  list-style: none !important;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  content-visibility: visible !important;
  transform: translateY(-4px) scale(0.98);
  transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease !important;
}

/* 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 (Desktop) or JS .is-open Class (Desktop, Tablet & Mobile) */
@media (min-width: 768px) {
  .main-navigation .menu-item-has-children:hover > .sub-menu,
  .main-navigation .menu-item-has-children:focus-within > .sub-menu,
  .icon-menu-account:hover > .sub-menu {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
  }
}

.main-navigation .menu-item-has-children.is-open > .sub-menu,
.icon-menu-account.is-open > .sub-menu,
.icon-menu-account.is-open > .fcn-user-submenu {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
}

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

.main-navigation .sub-menu a,
.main-navigation .sub-menu button,
.fcn-user-submenu a,
.fcn-user-submenu button {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  font-size: .84rem !important;
  font-weight: 600 !important;
  color: var(--fg-300, #cbd5e1) !important;
  background: transparent !important;
  border: 0 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: left !important;
  transition: background 100ms ease, color 100ms ease !important;
}

.main-navigation .sub-menu a:hover,
.main-navigation .sub-menu button:hover,
.fcn-user-submenu a:hover,
.fcn-user-submenu button:hover {
  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 16px 40px rgba(0, 0, 0, 0.15) !important;
}

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

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

/* ==========================================================================
   COMPACT MOBILE DROPDOWN MENU (Lightweight, Modern & Clean Alignment)
   ========================================================================== */

.fcn-mobile-dropdown {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 99999 !important;
  background: rgba(18, 20, 26, 0.98) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  animation: fcnDropdownSlide 160ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

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

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

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

.fcn-mobile-dropdown__inner {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  max-width: var(--layout-width-main, 1200px) !important;
  margin: 0 auto !important;
  padding: .75rem 1rem !important;
  box-sizing: border-box !important;
}

/* Clean Flex Alignment for Mobile Dropdown Items: Left aligned with tight, elegant 10px gap */
.fcn-mobile-dropdown a,
.fcn-mobile-dropdown .fcn-dropdown-item,
.fcn-mobile-nav-list a,
.fcn-mobile-nav-list > li > a {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important; /* Left-aligned, NOT space-between */
  gap: 10px !important;                 /* Tight 10px spacing between icon & text */
  padding: 10px 14px !important;
  border-radius: 8px !important;
  color: var(--fg-200, #f1f5f9) !important;
  font-size: .9rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: background 120ms ease, color 120ms ease !important;
}

.fcn-mobile-dropdown a i,
.fcn-mobile-dropdown a .nav-item__icon,
.fcn-mobile-dropdown .fcn-dropdown-item i,
.fcn-mobile-dropdown .fcn-dropdown-item .nav-item__icon,
.fcn-mobile-nav-list a i,
.fcn-mobile-nav-list a .nav-item__icon,
.fcn-mobile-nav-list > li > a i,
.fcn-mobile-nav-list > li > a .nav-item__icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  font-size: .95rem !important;
  opacity: .85 !important;
  flex-shrink: 0 !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

.fcn-mobile-dropdown a span,
.fcn-mobile-dropdown .fcn-dropdown-item span,
.fcn-mobile-nav-list a span,
.fcn-mobile-nav-list > li > a span {
  display: inline-block !important;
  flex: 0 1 auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

.fcn-dropdown-item:hover,
.fcn-dropdown-item.is-active,
.fcn-mobile-nav-list > li > a:hover,
.fcn-mobile-nav-list > li.current-menu-item > a {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

html[data-mode="light"] .fcn-dropdown-item,
html[data-mode="light"] .fcn-mobile-nav-list > li > a {
  color: #334155 !important;
}

html[data-mode="light"] .fcn-dropdown-item:hover,
html[data-mode="light"] .fcn-dropdown-item.is-active,
html[data-mode="light"] .fcn-mobile-nav-list > li > a:hover,
html[data-mode="light"] .fcn-mobile-nav-list > li.current-menu-item > a {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

/* Mobile Accordion Sub-Menu items */
.fcn-mobile-nav-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  width: 100% !important;
}

.fcn-mobile-nav-list li {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  width: 100% !important;
}

.fcn-mobile-nav-list .sub-menu {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  display: none !important;
  flex-direction: column !important;
  gap: 2px !important;
  margin: 4px 0 6px 1.5rem !important;
  padding: 4px 0 4px 10px !important;
  border-left: 2px solid rgba(255, 255, 255, 0.15) !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  z-index: 10 !important;
}

.fcn-mobile-nav-list li.is-open > .sub-menu {
  display: flex !important;
  animation: fcnMobileSubmenuIn 160ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes fcnMobileSubmenuIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.fcn-mobile-nav-list .sub-menu li a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  padding: 7px 10px !important;
  border-radius: 6px !important;
  color: var(--fg-400, #94a3b8) !important;
  font-size: .84rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.fcn-mobile-nav-list .sub-menu li a:hover,
.fcn-mobile-nav-list .sub-menu li.current-menu-item a {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
}

html[data-mode="light"] .fcn-mobile-nav-list .sub-menu {
  border-left-color: #cbd5e1 !important;
}

html[data-mode="light"] .fcn-mobile-nav-list .sub-menu li a {
  color: #64748b !important;
}

html[data-mode="light"] .fcn-mobile-nav-list .sub-menu li a:hover {
  background: rgba(0, 0, 0, 0.05) !important;
  color: #0f172a !important;
}

/* Accordion chevron on parent items: Pushed to far right */
.fcn-mobile-nav-list li.menu-item-has-children > a::after {
  content: "\f107";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: .75rem;
  margin-left: auto !important; /* Push chevron to the right */
  opacity: .7;
  transition: transform 140ms ease;
}

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

/* ==========================================================================
   MOBILE & TABLET MEDIA QUERIES (<= 767px)
   ========================================================================== */
@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;
  }

  /* Account Sub-Menu Popup on Mobile */
  .icon-menu-account:not(.is-open) > .sub-menu,
  .icon-menu-account:not(.is-open) > .fcn-user-submenu {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .icon-menu-account.is-open > .sub-menu,
  .icon-menu-account.is-open > .fcn-user-submenu {
    position: fixed !important;
    top: 52px !important;
    right: 12px !important;
    left: auto !important;
    width: 220px !important;
    max-width: calc(100vw - 24px) !important;
    background: rgba(18, 20, 26, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8) !important;
    border-radius: 12px !important;
    z-index: 9999999 !important;
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
    animation: fcnUserMenuMobileIn 160ms cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

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

  html[data-mode="light"] .icon-menu-account.is-open > .sub-menu,
  html[data-mode="light"] .icon-menu-account.is-open > .fcn-user-submenu {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.22) !important;
  }
}

/* ==========================================================================
   DUAL-MODE LIVE SEARCH & A-Z INDEX MODAL (Refined Frosted Glass)
   ========================================================================== */

.fcn-live-search-modal {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 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: clamp(4.5rem, 12vh, 7.5rem) 1rem 2rem !important;
  background: rgba(8, 10, 16, 0.68) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  contain: none !important;
  box-sizing: border-box !important;
  animation: fcnModalFadeIn 180ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

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

html[data-mode="light"] .fcn-live-search-modal {
  background: rgba(15, 23, 42, 0.38) !important;
  backdrop-filter: blur(16px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(150%) !important;
}

@keyframes fcnModalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.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.14) !important;
  border-radius: 14px !important;
  background: rgba(16, 19, 28, 0.96) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(28px) !important;
  -webkit-backdrop-filter: blur(28px) !important;
  overflow: hidden !important;
  animation: fcnCardSlideIn 200ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

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

html[data-mode="light"] .fcn-search-card {
  background: rgba(255, 255, 255, 0.98) !important;
  border-color: rgba(226, 232, 240, 0.95) !important;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.9) !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-400, #94a3b8) !important;
  font-size: .65rem !important;
  font-weight: 800 !important;
  font-family: inherit !important;
}

html[data-mode="light"] .fcn-search-key {
  border-color: #cbd5e1 !important;
  background: #f1f5f9 !important;
  color: #64748b !important;
}

/* Search Header Input */
.fcn-search-header {
  position: relative !important;
  padding: .75rem 1rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

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

.fcn-search-input-wrap {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}

.fcn-search-icon {
  position: absolute !important;
  left: .85rem !important;
  color: var(--fg-500, #64748b) !important;
  font-size: .95rem !important;
  pointer-events: none !important;
}

.fcn-search-input {
  width: 100% !important;
  height: 44px !important;
  padding: 0 2.4rem 0 2.5rem !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  background: rgba(0, 0, 0, 0.25) !important;
  color: #ffffff !important;
  font-size: .95rem !important;
  font-weight: 500 !important;
  outline: none !important;
  transition: border-color 120ms ease, box-shadow 120ms ease !important;
}

.fcn-search-input:focus {
  border-color: var(--primary-accent, #38bdf8) !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15) !important;
}

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

html[data-mode="light"] .fcn-search-input:focus {
  background: #ffffff !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15) !important;
}

.fcn-search-clear {
  position: absolute !important;
  right: .75rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: #cbd5e1 !important;
  font-size: .75rem !important;
  cursor: pointer !important;
}

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

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

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

.fcn-filter-chips {
  display: inline-flex !important;
  align-items: center !important;
  gap: .3rem !important;
  flex-wrap: wrap !important;
}

.fcn-chip {
  padding: .2rem .55rem !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--fg-400, #94a3b8) !important;
  font-size: .7rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 120ms ease !important;
}

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

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

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

.fcn-bl-filter-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: .35rem !important;
  padding: .25rem .6rem !important;
  border: 1px solid rgba(168, 85, 247, 0.3) !important;
  border-radius: 8px !important;
  background: rgba(168, 85, 247, 0.08) !important;
  color: #c084fc !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 120ms ease !important;
}

.fcn-bl-filter-btn:hover,
.fcn-bl-filter-btn.is-active {
  background: rgba(168, 85, 247, 0.2) !important;
  color: #ffffff !important;
  border-color: rgba(168, 85, 247, 0.5) !important;
}

.fcn-bl-count-badge {
  display: inline-grid !important;
  place-items: center !important;
  min-width: 16px !important;
  height: 16px !important;
  padding: 0 4px !important;
  border-radius: 999px !important;
  background: #a855f7 !important;
  color: #ffffff !important;
  font-size: .62rem !important;
  font-weight: 800 !important;
}

.fcn-bl-count-badge[hidden] {
  display: none !important;
}

/* BL Taxonomy Expandable Panel */
.fcn-bl-panel {
  padding: .65rem 1rem !important;
  background: rgba(0, 0, 0, 0.25) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

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

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

.fcn-bl-subtabs {
  display: flex !important;
  align-items: center !important;
  gap: .3rem !important;
  margin-bottom: .5rem !important;
}

.fcn-bl-tab {
  padding: .2rem .5rem !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--fg-400, #94a3b8) !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

.fcn-bl-tab.is-active {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

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

html[data-mode="light"] .fcn-bl-tab.is-active {
  background: #ffffff !important;
  color: #0f172a !important;
}

.fcn-bl-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: .3rem !important;
  max-height: 100px !important;
  overflow-y: auto !important;
}

.fcn-bl-tag {
  padding: .15rem .45rem !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  color: var(--fg-300, #cbd5e1) !important;
  font-size: .7rem !important;
  cursor: pointer !important;
  transition: all 120ms ease !important;
}

.fcn-bl-tag:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

.fcn-bl-tag.is-active {
  background: #a855f7 !important;
  color: #ffffff !important;
  border-color: #a855f7 !important;
}

html[data-mode="light"] .fcn-bl-tag {
  border-color: #cbd5e1 !important;
  background: #ffffff !important;
  color: #475569 !important;
}

html[data-mode="light"] .fcn-bl-tag.is-active {
  background: #9333ea !important;
  color: #ffffff !important;
  border-color: #9333ea !important;
}

/* Alphabet Strip for A-Z Index */
.fcn-alphabet-strip {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  padding: .35rem .75rem !important;
  background: rgba(0, 0, 0, 0.2) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}

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

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

html[data-mode="light"] .fcn-alphabet-strip {
  background: #f1f5f9 !important;
  border-bottom-color: #e2e8f0 !important;
}

.fcn-alpha-btn {
  display: inline-grid !important;
  place-items: center !important;
  min-width: 22px !important;
  height: 22px !important;
  padding: 0 3px !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: var(--fg-400, #94a3b8) !important;
  font-size: .68rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

.fcn-alpha-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

.fcn-alpha-btn.is-active {
  background: var(--primary-accent, #38bdf8) !important;
  color: #0f172a !important;
}

.fcn-alpha-btn.is-disabled {
  opacity: .3 !important;
  cursor: default !important;
  pointer-events: none !important;
}

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

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

/* Results Container */
.fcn-search-results {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  max-height: calc(75vh - 120px) !important;
  padding: .5rem !important;
}

.fcn-story-card-link {
  display: flex !important;
  align-items: center !important;
  gap: .75rem !important;
  padding: .55rem .75rem !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: background 100ms ease !important;
}

.fcn-story-card-link:hover,
.fcn-story-card-link.is-selected {
  background: rgba(255, 255, 255, 0.06) !important;
}

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

.fcn-story-thumb {
  width: 44px !important;
  height: 60px !important;
  border-radius: 6px !important;
  object-fit: cover !important;
  background: rgba(255, 255, 255, 0.05) !important;
  flex-shrink: 0 !important;
}

.fcn-story-details {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.fcn-story-title-row {
  display: flex !important;
  align-items: center !important;
  gap: .5rem !important;
  margin-bottom: .2rem !important;
}

.fcn-story-title {
  font-size: .88rem !important;
  font-weight: 700 !important;
  color: var(--fg-100, #ffffff) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

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

.fcn-story-status-badge {
  font-size: .62rem !important;
  font-weight: 700 !important;
  padding: .1rem .35rem !important;
  border-radius: 4px !important;
  text-transform: uppercase !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #94a3b8 !important;
}

.fcn-story-meta-row {
  display: flex !important;
  align-items: center !important;
  gap: .6rem !important;
  color: var(--fg-500, #64748b) !important;
  font-size: .72rem !important;
  font-weight: 500 !important;
}

.fcn-story-tags-row {
  display: flex !important;
  align-items: center !important;
  gap: .3rem !important;
  margin-top: .25rem !important;
  overflow: hidden !important;
}

.fcn-mini-tag {
  font-size: .62rem !important;
  padding: .08rem .3rem !important;
  border-radius: 4px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--fg-400, #94a3b8) !important;
  white-space: nowrap !important;
}

html[data-mode="light"] .fcn-mini-tag {
  background: #e2e8f0 !important;
  color: #475569 !important;
}

/* Modal Footer */
.fcn-search-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: .45rem .85rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  background: rgba(0, 0, 0, 0.2) !important;
  color: var(--fg-500, #64748b) !important;
  font-size: .7rem !important;
}

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

.fcn-search-hints {
  display: flex !important;
  align-items: center !important;
  gap: .5rem !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;
  }
}


@media (max-width: 640px) {
  .fcn-live-search-modal {
    padding: 3.5rem 0.75rem 1.5rem !important;
  }
}


/* ==========================================================================
   CLEAN FOOTER STYLING & _footer-isolated FIX
   ========================================================================== */

.footer,
.footer.layout-links,
.footer._footer-isolated {
  position: relative !important;
  width: 100% !important;
  margin: 2rem 0 0 0 !important;
  padding: 1.5rem 1rem !important;
  background: transparent !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

html[data-mode="light"] .footer,
html[data-mode="light"] .footer.layout-links,
html[data-mode="light"] .footer._footer-isolated {
  background: transparent !important;
  border-top-color: #e2e8f0 !important;
}

.footer__wrapper {
  max-width: var(--layout-width-main, 1200px) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.75rem !important;
}

.footer:empty,
.footer__wrapper:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}