/* ================================
   JFSN NAV — CLEANED + CONSOLIDATED
   ================================ */

/* Reset any default margins/padding that could create space above navbar */
html, body {
  margin: 0 !important;
  padding: 0 !important;
}

/* -------- Theme + safe-area vars */
:root{
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --navbar-offset: 56px;
    --chipbar-height: 48px;
    --chip-gap: .6rem;
    --noise-bg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.15'/></svg>");
  }
  
  /* -------- Solid navbar (single definition) */
  .navbar-enhanced{
    background: #ffffff;
    /* backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); */
    border: 0;
    box-shadow: 
      0 20px 60px rgba(0,0,0,.25),
      0 10px 30px rgba(0,0,0,.18),
      0 5px 15px rgba(0,0,0,.12);
    padding: .5rem 0;
    position: -webkit-sticky;
    position: sticky;
    top: 0; 
    left: 0;
    right: 0;
    z-index: 1050; 
    isolation: isolate;
    width: 100%;
    transition: transform .35s ease, padding .25s ease, box-shadow .35s ease;
    will-change: transform;
  }
  .navbar-enhanced::before{
    content:none; /* DISABLED to fix white space issue */
    /* content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius: inherit;
    background-image:
      var(--noise-bg),
      linear-gradient(to bottom, rgba(255,255,255,.55), rgba(255,255,255,0)) 0 0/100% 30% no-repeat;
    background-blend-mode: overlay; */
  }
  .header.navbar.navbar-enhanced.navbar-hidden{ transform: translateY(-100%); }
  .header.navbar.navbar-enhanced.navbar-compact{ padding-top:.25rem; padding-bottom:.25rem; }
  
  [data-bs-theme="dark"] .navbar-enhanced{
    background: #0b0f19;
    box-shadow: 
      0 20px 60px rgba(0,0,0,.65),
      0 10px 30px rgba(0,0,0,.50),
      0 5px 15px rgba(0,0,0,.35);
  }
  [data-bs-theme="dark"] .navbar-enhanced::before{
    content:none; /* DISABLED to fix white space issue */
    /* background-image:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.15'/></svg>"),
      linear-gradient(to bottom, rgba(255,255,255,.12), rgba(255,255,255,0)) 0 0/100% 30% no-repeat; */
  }
  
  /* Brand / links */
  .navbar-brand{ 
    font-weight: 600; 
    font-size: 1rem; 
    color: #2d3748;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem;
  }
  [data-bs-theme="dark"] .navbar-brand{ 
    color: #e2e8f0; 
  }
  
  /* Navbar logo styling */
  .navbar-logo {
    height: 32px !important;
    width: auto !important;
    display: inline-block !important;
  }
  
  /* Navbar brand text */
  .navbar-brand-text {
    font-size: 1.375rem !important;
    font-weight: 800 !important;
    color: #1a1a1a !important;
  }
  
  [data-bs-theme="dark"] .navbar-brand-text {
    color: #e2e8f0 !important;
  }
  
  /* Navbar scrolled state - enhanced shadow */
  .navbar-enhanced.navbar-scrolled {
    box-shadow: 
      0 25px 70px rgba(0,0,0,.30),
      0 12px 35px rgba(0,0,0,.22),
      0 6px 18px rgba(0,0,0,.15);
  }
  
  [data-bs-theme="dark"] .navbar-enhanced.navbar-scrolled {
    box-shadow: 
      0 25px 70px rgba(0,0,0,.75),
      0 12px 35px rgba(0,0,0,.60),
      0 6px 18px rgba(0,0,0,.45);
  }
  
  .navbar-nav .nav-link{
    color:#4a5568 !important; 
    font-weight:600; 
    padding:.75rem 1rem; 
    border-radius:999px; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
  }
  
  /* Hover effect with subtle background */
  .navbar-nav .nav-link:hover{ 
    color:#6366f1 !important; 
    background:rgba(99,102,241,.10);
    transform: translateY(-2px);
  }
  
  /* Active page indicator - gradient background + underline */
  .navbar-nav .nav-link.active{ 
    color:#fff !important; 
    background:linear-gradient(90deg,#6366f1,#a855f7);
    box-shadow: 0 4px 12px rgba(99,102,241,.3);
  }
  
  /* Active page underline accent */
  .navbar-nav .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 3px;
    background: linear-gradient(90deg, #6366f1, #a855f7);
    border-radius: 2px 2px 0 0;
    box-shadow: 0 2px 8px rgba(99,102,241,.4);
  }
  
  /* Dark mode navigation links - better contrast */
  [data-bs-theme="dark"] .navbar-nav .nav-link{
    color:#e2e8f0 !important; font-weight:600;
  }
  [data-bs-theme="dark"] .navbar-nav .nav-link:hover{ 
    color:#a5b4fc !important; 
    background:rgba(129,140,248,.15) !important; 
  }
  [data-bs-theme="dark"] .navbar-nav .nav-link.active{ 
    color:#ffffff !important; 
    background:linear-gradient(90deg,#818cf8,#c084fc) !important; 
  }
  
  /* Dropdown - Enhanced with smooth reveal */
  .dropdown-menu{
    background: #ffffff;
    /* backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); */
    border: 0; 
    border-radius: 20px; 
    box-shadow: 0 25px 50px rgba(0,0,0,.15);
    overflow:hidden; 
    position:relative; 
    opacity: 0;
    transform: translateY(-10px) scale(0.96);
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    margin-top: 0.5rem;
  }
  
  /* Show dropdown with smooth animation */
  .dropdown:hover .dropdown-menu,
  .dropdown-menu.show {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    animation: dropdownSlideIn .35s ease;
  }
  .dropdown-menu::before{
    content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit; background-image: var(--noise-bg);
    background-size:200px 200px; mix-blend-mode: overlay; opacity:.8;
  }
  [data-bs-theme="dark"] .dropdown-menu{ background: rgba(11,15,25,.55); box-shadow: 0 25px 50px rgba(0,0,0,.35); }
  
  .dropdown-menu .dropdown-item{
    padding:.75rem 1.25rem; color:#4a5568 !important; border-radius:10px; margin:.25rem .75rem; 
    transition: all .25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
  }
  .dropdown-menu .dropdown-item::before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, #6366f1, #a855f7);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform .25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 8px rgba(99,102,241,0.3);
  }
  .dropdown-menu .dropdown-item:hover{ 
    background: rgba(99,102,241,.12); 
    color:#6366f1 !important; 
    transform: translateX(8px) scale(1.02);
    box-shadow: 0 8px 25px rgba(99,102,241,.2);
    border-left: 3px solid transparent;
  }
  .dropdown-menu .dropdown-item:hover::before{
    transform: scaleY(1);
    box-shadow: 0 0 12px rgba(99,102,241,0.5);
  }
  [data-bs-theme="dark"] .dropdown-menu .dropdown-item{ 
    color:#e2e8f0 !important; 
    font-weight: 500;
  }
  [data-bs-theme="dark"] .dropdown-menu .dropdown-item::before{
    background: linear-gradient(180deg, #818cf8, #a855f7);
    box-shadow: 0 0 8px rgba(129,140,248,0.3);
  }
  [data-bs-theme="dark"] .dropdown-menu .dropdown-item:hover{ 
    background: rgba(129,140,248,.25) !important; 
    color:#a5b4fc !important; 
    transform: translateX(8px) scale(1.02);
    box-shadow: 0 8px 25px rgba(129,140,248,.3);
  }
  [data-bs-theme="dark"] .dropdown-menu .dropdown-item:hover::before{
    box-shadow: 0 0 12px rgba(129,140,248,0.5);
  }
  
  .mega-dropdown-column{ min-width:16rem; padding:1rem; }
  .mega-dropdown-image{padding:0.5rem!important;margin:0.25rem!important}
  .mega-dropdown-image img{margin:0.5rem 0!important;max-width:150px!important;width:120px!important;height:auto!important;aspect-ratio:unset!important}
  
  /* Theme toggle */
  .theme-toggle-btn{
    border:1px solid rgba(99,102,241,.25); background: rgba(99,102,241,.06);
    border-radius:999px; padding:.4rem .75rem; min-height:36px; min-width:44px; font-weight:600;
    margin-right: 12px;
  }
  [data-bs-theme="dark"] .theme-toggle-btn{ color:#cbd5e0; border-color:rgba(129,140,248,.25); background: rgba(129,140,248,.08); }
  
  /* -------- Chipbar (shared look; mobile-first legibility) */
  .chipbar{ position:fixed; left:0; right:0; top:0; z-index:1030; background: rgba(255,255,255,.92); border:0; box-shadow: 0 1px 0 rgba(0,0,0,.06); isolation:isolate; } /* FIXED: Removed calc(80px + var(--safe-top)) causing white space */
  [data-bs-theme="dark"] .chipbar{ background:#0f1320e0; box-shadow: 0 1px 0 rgba(255,255,255,.06); }
  
  .chipbar-track{
    height: var(--chipbar-height);
    display:flex; align-items:center; gap: var(--chip-gap);
    padding:.5rem .9rem;
    overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity; scroll-behavior:smooth; flex-wrap: nowrap;
  }
  .chipbar-track::-webkit-scrollbar{ height:6px; }
  .chipbar-track::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.15); border-radius:3px; }
  @media (hover:none) and (pointer:coarse){ .chipbar-track{ scrollbar-width:none; } .chipbar-track::-webkit-scrollbar{ display:none; } }
  
  /* Chips */
  .chip{
    flex:0 0 auto; scroll-snap-align:start;
    font-weight:600; font-size:1rem; line-height:1.1;
    padding:.6rem 1rem; min-height:44px; min-width:44px;
    border-radius:999px; border:1px solid rgba(0,0,0,.06);
    background:#fff; color:#1f2937; box-shadow:0 1px 6px rgba(0,0,0,.06);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:45vw;
  }
  @media (min-width:768px) and (max-width:1024px){ .chip{ max-width:32vw; } }
  [data-bs-theme="dark"] .chip{ background:#161a23; color:#e6eaf3; border-color:rgba(255,255,255,.08); box-shadow:0 1px 6px rgba(0,0,0,.4); }
  .chip:hover{ box-shadow: 0 6px 18px rgba(99,102,241,.16); }
  .chip.active{ color:#fff; background:linear-gradient(90deg,#6366f1,#a855f7); border-color:transparent; box-shadow:0 8px 22px rgba(99,102,241,.30); }
  
  /* Fades to hint overflow */
  .chipbar::before, .chipbar::after{
    content:""; position:absolute; top:0; bottom:0; width:28px; pointer-events:none; opacity:0; transition:opacity .2s ease;
    background: linear-gradient(to right, rgba(0,0,0,.08), rgba(0,0,0,0));
  }
  .chipbar::before{ left:0; transform:scaleX(-1); }
  .chipbar::after{ right:0; }
  .chipbar[data-overflow="true"]::before, .chipbar[data-overflow="true"]::after{ opacity:.6; }
  .chipbar[data-overflow-left="false"]::before{ opacity:0; }
  .chipbar[data-overflow-right="false"]::after{ opacity:0; }
  [data-bs-theme="dark"] .chipbar::before, [data-bs-theme="dark"] .chipbar::after{ background: linear-gradient(to right, rgba(255,255,255,.10), rgba(255,255,255,0)); }
  
  /* Hide chipbar while offcanvas is open */
  body.offcanvas-open .chipbar{ opacity:0; pointer-events:none; transition: opacity .18s ease; }
  body:not(.offcanvas-open) .chipbar{ opacity:1; transition: opacity .18s ease; }
  
  /* -------- Slim scroll progress */
  .scroll-progress{ position:fixed; left:0; right:0; top:0; height:3px; z-index:1080; pointer-events:none; } /* FIXED: Removed 56px offset causing white space */
  .scroll-progress__bar{ width:100%; height:100%; transform-origin:left center; transform:scaleX(0); transition: transform .08s linear; background: linear-gradient(90deg,#6366f1,#a855f7); box-shadow:none; }
  [data-bs-theme="dark"] .scroll-progress__bar{ box-shadow:none; }
  
  /* -------- Offcanvas + mobile controls */
  .offcanvas{ 
    background: rgba(255,255,255,.95); 
    backdrop-filter: blur(20px); 
    -webkit-backdrop-filter: blur(20px); 
    z-index: 9999 !important;
    position: fixed !important;
  }
  [data-bs-theme="dark"] .offcanvas{ background: rgba(11,15,25,.95); }
  
  /* -------- Enhanced Accessibility - WCAG AAA Focus Indicators */
  .nav-link:focus-visible, 
  .dropdown-item:focus-visible, 
  .navbar-toggler:focus-visible, 
  .mobile-dropdown-toggle:focus-visible, 
  .theme-toggle-btn:focus-visible, 
  .chip:focus-visible,
  .navbar-brand:focus-visible {
    outline: 3px solid #6366f1; 
    outline-offset: 3px; 
    box-shadow: 0 0 0 6px rgba(99,102,241,.2);
    border-radius: 8px;
    z-index: 10;
    position: relative;
  }
  
  [data-bs-theme="dark"] .nav-link:focus-visible, 
  [data-bs-theme="dark"] .dropdown-item:focus-visible, 
  [data-bs-theme="dark"] .navbar-toggler:focus-visible, 
  [data-bs-theme="dark"] .mobile-dropdown-toggle:focus-visible, 
  [data-bs-theme="dark"] .theme-toggle-btn:focus-visible, 
  [data-bs-theme="dark"] .chip:focus-visible,
  [data-bs-theme="dark"] .navbar-brand:focus-visible {
    outline-color: #818cf8; 
    box-shadow: 0 0 0 6px rgba(129,140,248,.25);
  }
  
  /* Keyboard navigation indicator for dropdowns */
  .dropdown-toggle:focus-visible::after {
    border-top-color: #6366f1;
  }
  
  /* Skip to content link - accessibility */
  .skip-to-content {
    position: absolute;
    left: -9999px;
    z-index: 999999;
    padding: 1rem 2rem;
    background: #6366f1;
    color: white;
    text-decoration: none;
    border-radius: 0 0 8px 8px;
    font-weight: 600;
    transition: all 0.2s ease;
  }
  
  .skip-to-content:focus {
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    outline: 3px solid #fff;
    outline-offset: 3px;
  }
  
  /* -------- Responsive toggles */
  @media (max-width: 991.98px){
    .navbar-collapse{ display:none !important; }
    .navbar-toggler{ 
      display:flex !important; 
      border:0; 
      padding:.5rem; 
      border-radius:12px; 
      min-height:48px; 
      min-width:48px;
      justify-content: center;
      align-items: center;
    }
  }
  
  /* -------- Mobile Touch Targets - WCAG AAA (44px minimum) */
  @media (max-width: 768px) {
    .nav-link,
    .dropdown-item,
    .navbar-toggler,
    .theme-toggle-btn,
    .navbar-brand {
      min-height: 44px !important;
      min-width: 44px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      touch-action: manipulation; /* Disable double-tap zoom */
    }
    
    /* Improve tap target spacing on mobile */
    .navbar-nav .nav-link {
      padding: 0.875rem 1.25rem !important;
      margin: 0.25rem 0;
    }
    
    .dropdown-item {
      padding: 1rem 1.5rem !important;
      margin: 0.5rem 0.75rem !important;
    }
    
    /* Larger touch-friendly dropdowns on mobile */
    .dropdown-toggle::after {
      margin-left: 0.5rem;
      border-width: 0.35em;
    }
    
    /* Theme toggle - larger on mobile */
    .theme-toggle-btn {
      min-height: 44px !important;
      min-width: 44px !important;
      padding: 0.625rem 1rem !important;
      margin-right: 0.75rem !important;
    }
    
    /* Prevent text selection on tap (better UX) */
    .nav-link,
    .navbar-brand,
    .navbar-toggler {
      -webkit-user-select: none;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
    }
  }

  /* -------- Mobile sticky navbar fixes - ONLY for navbar, not filter bar */
  @media (max-width: 768px) {
    .navbar-enhanced,
    .header.navbar,
    nav.navbar-enhanced {
      position: fixed !important;
      position: -webkit-sticky !important;
      position: sticky !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      width: 100% !important;
      z-index: 1050 !important;
      transform: none !important;
      -webkit-transform: none !important;
      backdrop-filter: blur(20px) saturate(160%) !important;
      -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
      box-shadow: 
        0 20px 60px rgba(0,0,0,.25),
        0 10px 30px rgba(0,0,0,.18),
        0 5px 15px rgba(0,0,0,.12) !important;
    }
    
    [data-bs-theme="dark"] .navbar-enhanced,
    [data-bs-theme="dark"] .header.navbar,
    [data-bs-theme="dark"] nav.navbar-enhanced {
      box-shadow: 
        0 20px 60px rgba(0,0,0,.65),
        0 10px 30px rgba(0,0,0,.50),
        0 5px 15px rgba(0,0,0,.35) !important;
    }
    
    /* Ensure body has proper padding for fixed navbar */
    body {
      padding-top: 0 !important;
    }
    
    /* Override any JavaScript that tries to move the navbar */
    .navbar-enhanced[style*="top"],
    .header.navbar[style*="top"],
    nav.navbar-enhanced[style*="top"] {
      top: 0 !important;
    }
    
    /* Mobile navbar brand sizing */
    .navbar-brand {
      font-size: 0.9rem !important;
      font-weight: 700 !important;
    }
    
    /* Mobile navbar toggler */
    .navbar-toggler {
      border: 1px solid rgba(99, 102, 241, 0.2) !important;
      background: rgba(99, 102, 241, 0.05) !important;
      border-radius: 8px !important;
      padding: 0.5rem !important;
      min-height: 44px !important;
      min-width: 44px !important;
    }
    
    .navbar-toggler:focus {
      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25) !important;
    }
  }

  /* -------- Safari mobile sticky fix - ONLY for navbar */
  @supports (-webkit-touch-callout: none) {
    @media (max-width: 768px) {
      .navbar-enhanced,
      .header.navbar,
      nav.navbar-enhanced {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 0 !important;
      }
    }
  }
  
  /* -------- Animations */
  @keyframes dropdownSlideIn{ from{opacity:0; transform: translateY(-10px) scale(.96);} to{opacity:1; transform: translateY(0) scale(1);} }
  @keyframes mobileDropdownSlideIn{ from{opacity:0; transform: translateX(-16px); max-height:0;} to{opacity:1; transform: translateX(0); max-height:500px;} }
  
  /* Reduced motion */
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  }

  /* ========================================
     MOBILE UI ENHANCEMENTS - Award-Winning UX
     ======================================== */
  
  /* -------- iOS Safe Area Support */
  :root {
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
  }
  
  /* -------- Bottom Navigation Bar - Thumb Zone Optimization */
  .mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
    display: none !important;
    z-index: 1040;
    padding-bottom: var(--safe-area-bottom);
    padding-left: var(--safe-area-left);
    padding-right: var(--safe-area-right);
  }
  
  @media (max-width: 768px) {
    .mobile-bottom-nav {
      display: flex !important;
      justify-content: space-around;
      align-items: center;
    }
    
    body {
      margin-bottom: calc(60px + var(--safe-area-bottom));
    }
  }
  
  @media (min-width: 769px) {
    .mobile-bottom-nav {
      display: none !important;
    }
    
    body {
      margin-bottom: 0;
    }
  }
  
  .mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 0.5rem;
    text-decoration: none;
    color: #64748b;
    min-width: 44px;
    min-height: 44px;
    position: relative;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }
  
  .mobile-nav-item.active {
    color: #6366f1;
  }
  
  .mobile-nav-item.active::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 3px;
    background: linear-gradient(90deg, #6366f1, #a855f7);
    border-radius: 0 0 3px 3px;
  }
  
  .mobile-nav-icon {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
    transition: transform 0.2s ease;
  }
  
  .mobile-nav-item:active .mobile-nav-icon {
    transform: scale(0.9);
  }
  
  .mobile-nav-label {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  
  [data-bs-theme="dark"] .mobile-bottom-nav {
    background: rgba(15, 15, 25, 0.95);
    border-top-color: rgba(255, 255, 255, 0.1);
  }
  
  [data-bs-theme="dark"] .mobile-nav-item {
    color: #94a3b8;
  }
  
  [data-bs-theme="dark"] .mobile-nav-item.active {
    color: #a5b4fc;
  }
  
  /* -------- Animated Hamburger Menu */
  @media (max-width: 768px) {
    .navbar-toggler {
      padding: 0;
      width: 48px;
      height: 48px;
      position: relative;
      border: none;
      background: transparent;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .navbar-toggler-icon {
      display: block;
      position: relative;
      width: 24px;
      height: 2px;
      background: currentColor;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .navbar-toggler-icon::before,
    .navbar-toggler-icon::after {
      content: '';
      position: absolute;
      left: 0;
      width: 24px;
      height: 2px;
      background: currentColor;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .navbar-toggler-icon::before {
      top: -8px;
    }
    
    .navbar-toggler-icon::after {
      bottom: -8px;
    }
    
    .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
      background: transparent;
    }
    
    .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
      top: 0;
      transform: rotate(45deg);
    }
    
    .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
      bottom: 0;
      transform: rotate(-45deg);
    }
  }
  
  /* -------- Enhanced Mobile Offcanvas */
  @media (max-width: 768px) {
    .offcanvas {
      width: 100% !important;
      max-width: 100%;
      background: rgba(255, 255, 255, 0.98);
      backdrop-filter: blur(40px) saturate(180%);
      -webkit-backdrop-filter: blur(40px) saturate(180%);
      padding-top: var(--safe-area-top);
    }
    
    [data-bs-theme="dark"] .offcanvas {
      background: rgba(15, 15, 25, 0.98);
    }
    
    .offcanvas-header {
      padding: 1.5rem;
      padding-top: calc(1.5rem + var(--safe-area-top));
      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }
    
    [data-bs-theme="dark"] .offcanvas-header {
      border-bottom-color: rgba(255, 255, 255, 0.1);
    }
    
    .offcanvas-body {
      padding: 2rem 1.5rem;
      padding-bottom: calc(80px + var(--safe-area-bottom));
    }
    
    .offcanvas .nav-link,
    .offcanvas .mobile-nav-link {
      font-size: 1.25rem;
      padding: 1rem 1.5rem;
      margin: 0.5rem 0;
      border-radius: 12px;
      display: flex;
      align-items: center;
      gap: 1rem;
      position: relative;
      overflow: hidden;
    }
    
    .offcanvas .nav-link::before,
    .offcanvas .mobile-nav-link::before {
      content: '→';
      opacity: 0;
      transform: translateX(-10px);
      transition: all 0.3s ease;
    }
    
    .offcanvas .nav-link:active::before,
    .offcanvas .mobile-nav-link:active::before {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  /* -------- Floating Action Button (FAB) */
  .mobile-fab {
    position: fixed;
    bottom: calc(80px + var(--safe-area-bottom));
    right: 20px;
    z-index: 1050;
    display: none !important;
  }
  
  @media (max-width: 768px) {
    .mobile-fab {
      display: block !important;
    }
  }
  
  @media (min-width: 769px) {
    .mobile-fab {
      display: none !important;
    }
  }
  
  .fab-main {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    color: white;
    border: none;
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-tap-highlight-color: transparent;
  }
  
  .fab-main:active {
    transform: scale(0.95);
  }
  
  .fab-actions {
    position: absolute;
    bottom: 70px;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .mobile-fab.active .fab-actions {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  
  .fab-action {
    display: flex;
    align-items: center;
    gap: 12px;
    background: white;
    padding: 12px 16px;
    border-radius: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    text-decoration: none;
    color: #1e293b;
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
  }
  
  [data-bs-theme="dark"] .fab-action {
    background: rgba(30, 30, 30, 0.95);
    color: #e2e8f0;
  }
  
  .fab-action-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
  }
  
  /* -------- Loading Skeleton Screens */
  .skeleton {
    background: linear-gradient(
      90deg,
      #f0f0f0 25%,
      #e0e0e0 50%,
      #f0f0f0 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 8px;
  }
  
  [data-bs-theme="dark"] .skeleton {
    background: linear-gradient(
      90deg,
      #2d3748 25%,
      #1a202c 50%,
      #2d3748 75%
    );
  }
  
  @keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }
  
  .skeleton-text {
    height: 16px;
    margin: 8px 0;
  }
  
  .skeleton-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
  }
  
  .skeleton-card {
    height: 200px;
    margin: 16px 0;
  }
  
  /* -------- Pull-to-Refresh Indicator */
  .pull-to-refresh-indicator {
    position: fixed;
    top: calc(60px + var(--safe-area-top));
    left: 50%;
    transform: translateX(-50%) translateY(-100px);
    background: rgba(99, 102, 241, 0.9);
    color: white;
    padding: 12px 24px;
    border-radius: 24px;
    font-size: 0.875rem;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 9999;
  }
  
  body.pull-to-refresh-active .pull-to-refresh-indicator {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
  
  /* -------- Mobile Image Lazy Loading */
  .mobile-image-container {
    position: relative;
    overflow: hidden;
    background: #f3f4f6;
  }
  
  [data-bs-theme="dark"] .mobile-image-container {
    background: #1f2937;
  }
  
  .mobile-image-placeholder {
    filter: blur(20px);
    transform: scale(1.1);
    transition: opacity 0.4s ease;
  }
  
  .mobile-image-full {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.4s ease;
  }
  
  .mobile-image-full.loaded {
    opacity: 1;
  }
  
  .mobile-image-full.loaded ~ .mobile-image-placeholder {
    opacity: 0;
  }
  
  /* -------- Safe Area Adjustments */
  @media (max-width: 768px) {
    .navbar-enhanced {
      padding-top: calc(0.5rem + var(--safe-area-top));
      padding-left: var(--safe-area-left);
      padding-right: var(--safe-area-right);
    }
    
    .navbar-enhanced.scrolled {
      padding-top: calc(0.25rem + var(--safe-area-top));
      padding-bottom: 0.25rem;
      box-shadow: 
        0 25px 70px rgba(0,0,0,.30),
        0 12px 35px rgba(0,0,0,.22),
        0 6px 18px rgba(0,0,0,.15) !important;
    }
    
    [data-bs-theme="dark"] .navbar-enhanced.scrolled {
      box-shadow: 
        0 25px 70px rgba(0,0,0,.75),
        0 12px 35px rgba(0,0,0,.60),
        0 6px 18px rgba(0,0,0,.45) !important;
    }
    
    .navbar-enhanced.scrolled .navbar-logo {
      height: 28px !important;
    }
    
    .navbar-enhanced.scrolled .navbar-brand-text {
      font-size: 1.125rem !important;
    }
  }