/* Global font: Gilroy-Light as default body font */
    html, body {
      font-family: 'Gilroy-Light', 'Gilroy-Regular', 'Gilroy-Bold', -apple-system, BlinkMacSystemFont, "system-ui", "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    html { color-scheme: light; }
    /* Cross-platform scrollbar — thin overlay matching macOS */
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.18); border-radius: 3px; }
    ::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.3); }
    * { scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.18) transparent; }
    /* Remove contentWrapper ::after gap below reviews */
    [class*="_contentWrapper_"]::after {
      display: none !important;
    }
    /* Hide custom search patch on desktop, show only on mobile */

    /* ROCKET LOADER STYLES */
    .rocket-loader-wrap {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      min-height: 400px;
      width: 100%;
      position: relative;
      overflow: hidden;
    }
    .rocket-loader {
      position: absolute;
      top: 50%;
      margin-left: -50px;
      left: 50%;
      animation: rocketShake 0.4s linear infinite;
    }
    .rocket-loader > span {
      height: 5px;
      width: 35px;
      background: #0F45CF;
      position: absolute;
      top: -19px;
      left: 60px;
      border-radius: 2px 10px 1px 0;
    }
    .rocket-loader > span > span {
      position: absolute;
      width: 10px;
      height: 1px;
      background: #0F45CF;
      animation: rocketFazer1 0.2s linear infinite;
    }
    .rocket-loader > span > span:nth-child(2) {
      top: 3px;
      animation: rocketFazer2 0.4s linear infinite;
    }
    .rocket-loader > span > span:nth-child(3) {
      top: 1px;
      animation: rocketFazer3 0.4s linear infinite;
      animation-delay: -1s;
    }
    .rocket-loader > span > span:nth-child(4) {
      top: 4px;
      animation: rocketFazer4 1s linear infinite;
      animation-delay: -1s;
    }
    .rocket-base span {
      position: absolute;
      width: 0;
      height: 0;
      border-top: 6px solid transparent;
      border-right: 100px solid #0F45CF;
      border-bottom: 6px solid transparent;
    }
    .rocket-base span::before {
      content: "";
      height: 22px;
      width: 22px;
      border-radius: 50%;
      background: #0F45CF;
      position: absolute;
      right: -110px;
      top: -16px;
    }
    .rocket-base span::after {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      border-top: 0 solid transparent;
      border-right: 55px solid #0F45CF;
      border-bottom: 16px solid transparent;
      top: -16px;
      right: -98px;
    }
    .rocket-face {
      position: absolute;
      height: 12px;
      width: 20px;
      background: #0F45CF;
      border-radius: 20px 20px 0 0;
      transform: rotate(-40deg);
      right: -125px;
      top: -15px;
    }
    .rocket-face::after {
      content: "";
      height: 12px;
      width: 12px;
      background: #0F45CF;
      position: absolute;
      right: -10px;
      top: 4px;
      border-radius: 50%;
    }
    .rocket-lines {
      position: absolute;
      width: 100%;
      height: 100%;
    }
    .rocket-lines span {
      position: absolute;
      height: 2px;
      width: 20%;
      background: #0F45CF;
    }
    .rocket-lines span:nth-child(1) {
      top: 20%;
      animation: rocketLf 0.6s linear infinite;
      animation-delay: -5s;
    }
    .rocket-lines span:nth-child(2) {
      top: 40%;
      animation: rocketLf2 0.8s linear infinite;
      animation-delay: -1s;
    }
    .rocket-lines span:nth-child(3) {
      top: 60%;
      animation: rocketLf3 0.6s linear infinite;
    }
    .rocket-lines span:nth-child(4) {
      top: 80%;
      animation: rocketLf4 0.5s linear infinite;
      animation-delay: -3s;
    }
    @keyframes rocketFazer1 {
      0% { left: 0; }
      100% { left: -80px; opacity: 0; }
    }
    @keyframes rocketFazer2 {
      0% { left: 0; }
      100% { left: -100px; opacity: 0; }
    }
    @keyframes rocketFazer3 {
      0% { left: 0; }
      100% { left: -50px; opacity: 0; }
    }
    @keyframes rocketFazer4 {
      0% { left: 0; }
      100% { left: -150px; opacity: 0; }
    }
    @keyframes rocketShake {
      0% { transform: translate(2px, 1px) rotate(0deg); }
      10% { transform: translate(-1px, -3px) rotate(-1deg); }
      20% { transform: translate(-2px, 0px) rotate(1deg); }
      30% { transform: translate(1px, 2px) rotate(0deg); }
      40% { transform: translate(1px, -1px) rotate(1deg); }
      50% { transform: translate(-1px, 3px) rotate(-1deg); }
      60% { transform: translate(-1px, 1px) rotate(0deg); }
      70% { transform: translate(3px, 1px) rotate(-1deg); }
      80% { transform: translate(-2px, -1px) rotate(1deg); }
      90% { transform: translate(2px, 1px) rotate(0deg); }
      100% { transform: translate(1px, -2px) rotate(-1deg); }
    }
    @keyframes rocketLf {
      0% { left: 200%; }
      100% { left: -200%; opacity: 0; }
    }
    @keyframes rocketLf2 {
      0% { left: 200%; }
      100% { left: -200%; opacity: 0; }
    }
    @keyframes rocketLf3 {
      0% { left: 200%; }
      100% { left: -100%; opacity: 0; }
    }
    @keyframes rocketLf4 {
      0% { left: 200%; }
      100% { left: -100%; opacity: 0; }
    }

    .custom-search-patch {
      display: none !important;
    }

    @media (max-width: 768px) {
      .custom-search-patch {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        height: auto !important;
        margin: 4px 0 !important;
        /* Reduced margin from 16px */
        opacity: 1 !important;
        padding: 0 !important;
        pointer-events: auto !important;
      }
    }

    .custom-search-container {
      display: flex;
      align-items: center;
      background: #F3F4F6;
      border-radius: 32px;
      padding: 0 16px;
      width: 92%;
      height: 52px;
      overflow: hidden;
      cursor: text;
      border: 1px solid transparent;
      transition: all 0.2s ease;
    }

    .custom-search-container:focus-within {
      background: #ffffff;
      border: 1px solid #0F45CF;
      box-shadow: 0 0 0 4px rgba(15, 69, 207, 0.1);
    }

    .custom-search-input {
      border: none;
      outline: none;
      background: transparent;
      width: 100%;
      height: 100%;
      font-size: 15px;
      font-weight: 500;
      color: #1a1a1a;
      flex: 1;
      text-align: left;
      padding: 0 4px !important;
      line-height: 52px !important;
      /* Matches container height for perfect vertical centering */
    }


    .custom-search-container i.custom-search-icon {
      display: none;
      /* Ensure icon is hidden as requested */
    }

    /* Mobile Specific Overrides - HOME PAGE ONLY */
    @media (max-width: 768px) {

      /* Fix Parent Clipping */
      body.is-home-page [class*="_featuredSection_"] {
        overflow: visible !important;
        /* Allow the negative margin pull-up to show */
        position: relative !important;
        z-index: 5 !important;
        /* Ensure it sits above the background but below header if needed */
      }

      /* Entrance Animation Keyframes */
      @keyframes sheetSlideUp {
        0% {
          transform: translateY(100vh);
          opacity: 0;
        }

        100% {
          transform: translateY(0);
          opacity: 1;
        }
      }

      /* Fix Bottom Sheet Initial Position & Animate */
      body.is-home-page [class*="_contentSheet_"] {
        /* transform: none !important;  <-- Removed to allow animation */
        animation: sheetSlideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
        will-change: transform;

        padding-top: 12px !important;
        /* Reduced top padding */
        z-index: 50 !important;
      }

      /* Featured card layout — removed in v3 mobile rebuild.
         SPA module CSS in Home.module.css now controls the hero card layout.
         Old !important overrides forced 520px tall centered-text "editorial"
         design from CHANGELOG 1.8.0; they conflicted with the Figma v3
         layout (172px tall, right-aligned 176px text stack). */

      /* Shape adjustments for Event Cards without background images */
      body.is-home-page [class*="_topEventCard_"]:not([style*="background-image"]) {
        aspect-ratio: 1 / 1 !important;
        width: 140px !important;
        height: auto !important;
        min-width: unset !important;
      }

      /* _headerSpacerLarge_ — neutralized; mobile module CSS hides it. */

      .ev-feat-cta {
        position: absolute !important;
        bottom: 24px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 13px 28px !important;
        border-radius: 50px !important;
        border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
        background: rgba(255, 255, 255, 0.12) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        color: rgba(255, 255, 255, 0.92) !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        letter-spacing: 0.3px !important;
        pointer-events: none !important;
        z-index: 3 !important;
      }

      .ev-feat-bookmark {
        position: absolute !important;
        top: 16px !important;
        right: 16px !important;
        width: 38px !important;
        height: 38px !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.18) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 10 !important;
        border: 1px solid rgba(255, 255, 255, 0.25) !important;
        pointer-events: none !important;
      }

      /* Eliminate Bottom Gap & Infinite Feel */
      /* Mobile Home Layout Fixes */
      /* Mobile Home Layout Fixes - Global Lock */
      body.is-home-page,
      body.is-home-page #root {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        overscroll-behavior-x: none !important;
        /* Critical: Prevent bounce/swipe */
      }

      /* Contribute page — prevent horizontal overflow on mobile */
      body.is-contribute-page,
      body.is-contribute-page #root {
        overflow-x: hidden !important;
        overscroll-behavior-x: none !important;
      }

      /* Contribute page — lock platform scroll containers */
      body.is-contribute-page [class*="_main_13k91"],
      body.is-contribute-page [class*="_container_ivg9v"] {
        overflow-x: hidden !important;
      }

      /* Universal Carousel Swipe Fix */
      [class*="carousel"] img,
      [class*="slider"] img,
      [class*="gallery"] img,
      [class*="swiper"] img {
        -webkit-user-drag: none !important;
        /* Ensure taps still work, but drags don't ghost the image */
      }

      /* Reset Constraints - Lock Parents w/o altering visual layout */
      body.is-home-page [class*="wrapper"],
      body.is-home-page [class*="container"],
      body.is-home-page [class*="main"] {
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        /* Stop parent scrolling */
        touch-action: pan-y !important;
        /* Reinforce gesture lock */
      }

      /* Content Sheet - Lock Scroll Gesture Only */
      body.is-home-page [class*="contentSheet"] {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: none !important;

        /* Critical Lock - Blocks horizontal swipe */
        touch-action: pan-y !important;
        overflow-x: hidden !important;
        transform: translateZ(0) !important;

        border-radius: 24px 24px 0 0 !important;
        padding-bottom: 120px !important;
        min-height: 100vh !important;
        background-color: #eaeffe !important;
        box-sizing: border-box !important;
      }

      /* v30: Re-enable CategoryFilter chip horizontal scroll.
         Lines 399–410 lock every [class*="wrapper"|"container"] under is-home-page.
         Re-enable surgically on chip row scroll container + parent wrappers. */
      body.is-home-page [class*="contentSheet"] .shelf-scroll,
      body.is-home-page [class*="contentSheet"] .dense-grid-container,
      body.is-home-page [class*="_heroAndFilterSide_"] [class*="_wrapper_"],
      body.is-home-page [class*="_heroAndFilterSide_"] [class*="_scrollWrapper_"],
      body.is-home-page [class*="_heroAndFilterSide_"] [class*="_container_"],
      body.is-home-page [class*="swiper"] {
        touch-action: pan-x pan-y !important;
        overflow-x: auto !important;
      }

      /* CategoryFilter container — restore module-CSS padding (broad lock zeroed it) */
      body.is-home-page [class*="_heroAndFilterSide_"] [class*="_container_"] {
        padding: 0 12px !important;
        overflow-y: visible !important;
      }

      /* Outer drop-shadow wrapper allow overflow so chips render beyond viewport during scroll */
      body.is-home-page [class*="_heroAndFilterSide_"] [class*="_wrapper_"] {
        overflow: visible !important;
      }



      /* Unlock horizontal scroll for breakout containers */
      body.is-home-page [class*="contentSheet"] .dense-grid-container,
      body.is-home-page [class*="contentSheet"] .shelf-scroll {
        touch-action: pan-x pan-y !important;
        overflow-x: auto !important;
      }

      /* HIDE React app's default grid layout on mobile when shelves are active */
      body.show-mobile-shelves [class*="_grid_"],
      body.show-mobile-shelves [class*="_eventGrid_"],
      body.show-mobile-shelves [class*="_cardGrid_"] {
        display: none !important;
      }

      /* Force mobile shelves to be full width edge-to-edge */
      body.is-home-page .mobile-shelf-container {
        width: 100vw !important;
        margin-left: -24px !important;
        padding: 0 !important;
      }

      /* Ensure dense columns flow edge-to-edge (no left/right gaps) */
      body.is-home-page .dense-grid-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
      }

      body.is-home-page .dense-column {
        /* Allow cards to touch screen edges */
        padding-left: 24px !important;
        padding-right: 24px !important;
      }

      body.is-home-page .dense-column:first-child {
        margin-left: 0 !important;
      }

      body.is-home-page .mobile-shelf-container {
        padding-bottom: 120px !important;
        /* Room for bottom nav */
        background-color: #eaeffe !important;
        min-height: 100vh !important;
      }

      /* Hide original footer on mobile home page to prevent extra space */
      body.is-home-page [class*="_footer_"] {
        display: none !important;
      }

      /* v14: removed legacy _navContainer_ home override — module CSS owns the floating pill design */

      /* v29: removed legacy CategoryFilter overrides (icon 56px, pill 110px min-width, container -24/+48 breakout) — module CSS owns chip design per v6 Figma spec */
    }


    /* ========================================== */
    /* v39: hide legacy host-injected mobile booking bar — SPA now owns sticky CTA inside EventDetails */
    .mobile-booking-bar { display: none !important; }

    /* Mobile Booking Bar Styles (LEGACY — superseded by v39 SPA-owned CTA; kept for fallback) */
    /* ========================================== */
    @media (max-width: 768px) {
      .mobile-booking-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0 !important;
        /* Force bottom 0 */
        /* JS override for 'bottom' style needs to be disabled or handled. I will use !important here to override inline styles if JS sets it. */

        background: #FFFFFF;
        border-radius: 24px 24px 0 0;

        /* Padding: Top 16px, Side 16px, Bottom = Nav Height (approx 62px) + 16px padding = ~80px */
        /* JS sets inline style for bottom usually. I will rely on CSS `padding-bottom` updates or use a safe large value + env(safe-area-inset-bottom) */
        padding: 16px 16px calc(62px + env(safe-area-inset-bottom, 20px) + 12px) 16px;
        /* Ideally, JS should set this padding dynamically. */

        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
        /* Shadow pointing up, avoiding overlap downwards */
        /* Below Nav (usually 900-1000) so Nav sits ON TOP if needed, or if Nav is transparent... */
        /* User said: "Booking Container: zIndex: 1 (or lower). Tab Bar: ...".
           If Tab Bar is opaque, this sits BEHIND it? 
           User: "appear as if it is sliding up... sitting BEHIND or containing the tab bar area".
           If it sits BEHIND (lower z-index), and Tab Bar is transparent, we see this white background through it.
           If Tab Bar is White Opaque, and we sit BEHIND, we are hidden?
           User says "merging with the bottom navigation area". "no gap".
           
           I will try z-index: 900 (same as before) but use padding.
           Wait, if I set padding-bottom, the content is pushed up.
           If `bottom: 0` and I have large padding-bottom, the blue button sits above the nav area.
           The white background covers the nav area.
           If z-index is HIGH (900), it COVERS the nav bar. The Nav bar is hidden?
           User: "The button... sits visibly above the tabs... white background continues all the way down."
           If it covers the Nav Bar, the Nav Bar is not clickable?
           Ah, "Tab Bar: Ensure the tab bar itself has a transparent background...".
           So this white sheet REPLACES the Tab Bar background.
           
           So z-index must be LOWER than the Tab Icons, but HIGHER than general page content.
           Nav Container is usually high z-index.
           I need to make sure this bar is BEHIND the Nav Container (clickability).
           Nav Container is typically `zIndex: 1000`? Or I should check.
           I will set z-index: 800.
        */
        z-index: 800;

        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;

        /* Animation */
        transform: translateY(100%);
        animation: mobileBarSlideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        animation-delay: 0.2s;
      }

      @keyframes mobileBarSlideUp {
        from {
          transform: translateY(100%);
          opacity: 0;
        }

        to {
          transform: translateY(0);
          opacity: 1;
        }
      }

      /* v14: removed legacy white-background + 24px top-radius force on _navContainer_ — module CSS owns the floating glass pill */

      .mobile-booking-btn {
        width: 100%;
        background: #2563EB;
        color: #fff;
        border: none;
        border-radius: 12px;
        padding: 16px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.2s ease;
        text-align: center;
        display: block;
        text-decoration: none;
      }

      .mobile-booking-btn:active {
        background: #1D4ED8;
      }

      /* Booked State */
      .mobile-booking-booked-pill {
        background: #ECFDF5;
        border: 1px solid #10B981;
        color: #047857;
        border-radius: 24px;
        padding: 12px 20px;
        font-size: 14px;
        font-weight: 700;
        white-space: nowrap;
      }

      .mobile-booking-actions {
        display: flex;
        gap: 12px;
      }

      .mobile-booking-action-btn {
        width: 48px;
        height: 48px;
        background: #2563EB;
        border: none;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: white;
      }

      .mobile-booking-action-btn i {
        font-size: 20px;
      }

      /* Ticket Sheet Styles */
      .mobile-sheet-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1050;
        /* Above Nav (usually 1000) */
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
      }

      .mobile-sheet-overlay.active {
        opacity: 1;
        pointer-events: auto;
      }

      /* Date Sheet Styles */
      .date-sheet-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1050;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
      }

      .date-sheet-overlay.active {
        opacity: 1;
        pointer-events: auto;
      }

      .date-sheet-portal {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0 !important;
        background: #eaeffe;
        height: 75vh;
        border-radius: 24px 24px 0 0;
        z-index: 1200;
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        display: flex;
        flex-direction: column;
      }

      .date-sheet-portal.visible {
        transform: translateY(0);
      }

      .date-sheet-loader {
        position: relative;
        width: 120px;
        height: 90px;
        margin: 60px auto 0 auto;
      }
      .date-sheet-loader:before {
        content: "";
        position: absolute;
        bottom: 30px;
        left: 50px;
        height: 30px;
        width: 30px;
        border-radius: 50%;
        background: #0F45CF;
        animation: ds-bounce 0.5s ease-in-out infinite alternate;
      }
      .date-sheet-loader:after {
        content: "";
        position: absolute;
        right: 0;
        top: 0;
        height: 7px;
        width: 45px;
        border-radius: 4px;
        box-shadow: 0 5px 0 #d0d8f0, -35px 50px 0 #d0d8f0, -70px 95px 0 #d0d8f0;
        animation: ds-step 1s ease-in-out infinite;
      }
      @keyframes ds-bounce {
        0%   { transform: scale(1, 0.7); }
        40%  { transform: scale(0.8, 1.2); }
        60%  { transform: scale(1, 1); }
        100% { bottom: 140px; }
      }
      @keyframes ds-step {
        0% {
          box-shadow: 0 10px 0 rgba(0,0,0,0),
                      0 10px 0 #d0d8f0,
                      -35px 50px 0 #d0d8f0,
                      -70px 90px 0 #d0d8f0;
        }
        100% {
          box-shadow: 0 10px 0 #d0d8f0,
                      -35px 50px 0 #d0d8f0,
                      -70px 90px 0 #d0d8f0,
                      -70px 90px 0 rgba(0,0,0,0);
        }
      }

      .date-sheet-header {
        padding: 16px 24px;
        background: transparent;
        border-radius: 24px 24px 0 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .date-sheet-header h3 {
        margin: 0;
        font-family: 'Gilroy-Bold', sans-serif;
        font-size: 20px;
        font-weight: 700;
      }

      .date-sheet-close {
        width: 32px;
        height: 32px;
        background: rgba(0, 0, 0, 0.05);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        border: none;
        font-size: 16px;
        cursor: pointer;
      }

      .date-sheet-body {
        flex: 1;
        overflow-y: auto;
        padding: 0 24px 120px 24px;
      }

      .date-sheet-empty {
        background: white;
        border-radius: 12px;
        padding: 24px;
        text-align: center;
        font-size: 15px;
        color: #6B7280;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
      }

      /* Portal for Cloned Ticket Sheet */
      #mobile-sheet-portal {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0 !important;
        /* Force flush to bottom */
        z-index: 1200;
        /* Cover Booking Bar (800) */
        background: white;
        max-height: 85vh;
        border-radius: 24px 24px 0 0;
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2);
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        visibility: visible !important;
      }

      #mobile-sheet-portal.visible {
        transform: translateY(0);
      }

      /* Custom Ticket Modal Styles */
      .modal-scroll-area {
        padding: 24px 24px 0 24px;
        overflow-y: auto;
        flex: 1;
      }

      .modal-fixed-footer {
        padding: 16px 24px 24px 24px;
        background: white;
        border-top: 1px solid #F3F4F6;
        padding-bottom: max(24px, env(safe-area-inset-bottom));
      }

      /* Custom Ticket Modal Styles */
      .modal-header {
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 20px;
        color: #111827;
      }

      .ticket-list {
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin-bottom: 24px;
      }

      .ticket-item {
        border: 1px solid #E5E7EB;
        border-radius: 12px;
        padding: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .ticket-info h4 {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: #111827;
      }

      .ticket-info p {
        margin: 4px 0;
        font-size: 12px;
        color: #6B7280;
      }

      .ticket-price {
        color: #2563EB;
        font-weight: 700;
        font-size: 16px;
        margin-top: 4px;
      }

      .ticket-stepper {
        display: flex;
        align-items: center;
        background: #F3F4F6;
        border-radius: 24px;
        padding: 4px;
        min-width: 110px;
        justify-content: space-between;
      }

      .stepper-btn {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: none;
        background: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-weight: 600;
        cursor: pointer;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        color: #111827;
      }

      .stepper-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        color: #9CA3AF;
      }

      .stepper-val {
        width: 40px;
        text-align: center;
        font-weight: 600;
        font-size: 16px;
        color: #111827;
      }

      .modal-summary {
        border-top: 1px solid #E5E7EB;
        padding-top: 16px;
        margin-bottom: 24px;
      }

      .summary-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 8px;
        font-size: 14px;
        color: #374151;
      }

      .summary-total {
        display: flex;
        justify-content: space-between;
        font-weight: 700;
        font-size: 18px;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px dashed #E5E7EB;
        color: #111827;
      }

      .modal-proceed-btn {
        width: 100%;
        background: #2563EB;
        color: white;
        padding: 16px;
        border-radius: 12px;
        font-weight: 600;
        font-size: 16px;
        border: none;
        cursor: pointer;
        transition: opacity 0.2s;
      }

      .modal-proceed-btn:disabled {
        background: #9CA3AF;
        cursor: not-allowed;
      }

      /* Wrapper to force specificity over React Classes (Backup/Legacy) */
      body.has-mobile-event-ui [class*="_ticketCard_"].mobile-sheet-active,
      body.has-mobile-event-ui [class*="_stickySection_"].mobile-sheet-active {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        /* Bottom will be set by JS usually, or default to 80px */
        bottom: var(--sheet-bottom, 80px) !important;
        z-index: 1100 !important;
        /* Above Overlay */

        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        background: white !important;
        border-radius: 20px 20px 0 0 !important;
        padding: 24px !important;
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2) !important;
        max-height: 70vh !important;
        overflow-y: auto !important;
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        pointer-events: auto !important;
      }

      body.has-mobile-event-ui [class*="_ticketCard_"].mobile-sheet-active.visible,
      body.has-mobile-event-ui [class*="_stickySection_"].mobile-sheet-active.visible {
        transform: translateY(0);
      }
    }

    @media (min-width: 769px) {
      .mobile-booking-bar {
        display: none !important;
      }
    }

    /* --- Hide Mobile Elements on Desktop --- */
    @media (min-width: 769px) {

      #custom-calendar-modal,
      .custom-search-container,
      .custom-date-filter-container,
      .mobile-shelf-container {
        display: none !important;
      }
      /* Shelf lazy-load spinner */
      .shelf-loading-spinner {
        width: 32px; height: 32px;
        border: 3px solid #e5e7eb;
        border-top-color: #6366f1;
        border-radius: 50%;
        animation: shelf-spin 0.7s linear infinite;
      }
      @keyframes shelf-spin { to { transform: rotate(360deg); } }
      @media (prefers-reduced-motion: reduce) {
        .shelf-loading-spinner { animation: none; opacity: 0.5; }
      }

    }

    /* --- Copied Mobile Styles (Search, Filter, Calendar) - Scoped to Mobile --- */
    @media (max-width: 768px) {
      .custom-search-container {
        margin: 0 !important;
        /* Removed margin */
      }

      /* Date Filter Styles */
      .custom-date-filter-container {
        display: flex;
        gap: 12px;
        padding: 0 4px 4px;
        /* Reduced bottom padding */
        width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
        /* Firefox */
        margin-bottom: 4px !important;
        /* Minimize gap to next section */
        -ms-overflow-style: none;
        /* IE/Edge */
        white-space: nowrap;
      }

      /* Compact 'Top Events' Header */
      [class*="_sectionHeader_"] {
        margin-top: 4px !important;
        margin-bottom: 8px !important;
      }

      .custom-date-filter-container::-webkit-scrollbar {
        display: none;
        /* Chrome/Safari */
      }

      .custom-filter-chip {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 8px 16px;
        background: #F3F4F6;
        border-radius: 999px;
        font-size: 14px;
        font-weight: 600;
        color: #374151;
        /* box-shadow: 0 1px 2px rgba(0,0,0,0.05); */
        cursor: pointer;
        transition: all 0.2s ease;
        /* border: 1px solid #E5E7EB; */
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        height: 36px;
        /* Fixed height to prevent bounce */
        box-sizing: border-box;
        border: 1px solid transparent;
        /* Reserve space for border if needed */
      }

      .custom-filter-chip i {
        font-size: 16px;
        color: #6B7280;
        display: block;
        /* Ensure block layout */
        line-height: 1;
        animation: none !important;
        /* Neutralize inherited bounce animation */
        transform: none !important;
        transition: none !important;
      }

      .custom-filter-chip.active {
        background: #0F45CF;
        color: white;
        /* border-color: #0F45CF; */
        box-shadow: 0 4px 12px rgba(15, 69, 207, 0.2);
      }

      .custom-filter-chip.active i {
        color: white;
      }

      /* Calendar Popup Styles */
      .custom-calendar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        z-index: 9999;
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
      }

      .custom-calendar-overlay.open {
        opacity: 1;
        pointer-events: auto;
      }

      .custom-calendar-card {
        background: white;
        width: 340px;
        max-width: 90%;
        border-radius: 24px;
        padding: 24px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
        transform: scale(0.9);
        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
      }

      .custom-calendar-overlay.open .custom-calendar-card {
        transform: scale(1);
      }

      .calendar-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24px;
      }

      .calendar-title {
        font-size: 18px;
        font-weight: 700;
        color: #1a1a1a;
        font-family: 'Gilroy-Bold', sans-serif;
      }

      .calendar-nav-btn {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: 1px solid #E5E7EB;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: #374151;
        transition: all 0.2s;
      }

      .calendar-nav-btn:hover {
        background: #F3F4F6;
        border-color: #D1D5DB;
      }

      .calendar-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        row-gap: 12px;
        text-align: center;
      }

      .calendar-day-name {
        font-size: 13px;
        font-weight: 600;
        color: #9CA3AF;
        margin-bottom: 8px;
      }

      .calendar-date {
        width: 36px;
        height: 36px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        /* Soft square as per screenshot */
        font-size: 14px;
        font-weight: 600;
        color: #1F2937;
        cursor: pointer;
        margin: 0 auto;
        border: 2px solid transparent;
        /* Reserve border space */
        position: relative;
      }

      .calendar-date:hover {
        background: #F3F4F6;
      }

      .calendar-date.selected {
        background: #DBEAFE;
        color: #0F45CF;
        border-color: #0F45CF;
      }

      .calendar-date.has-event::after {
        content: '';
        position: absolute;
        bottom: 4px;
        width: 4px;
        height: 4px;
        background: #EF4444;
        /* Red dot */
        border-radius: 50%;
      }
    }

    /* --- Mobile Shelf Styles --- */
    @media (max-width: 768px) {
      /* Hide original grid when shelves are active (handled by JS, but add class support) */

      .mobile-shelf-container {
        width: 100%;
        padding-bottom: 80px;
        /* Space for bottom nav */
        display: flex;
        flex-direction: column;
        gap: 24px;
      }

      .shelf-section {
        width: 100%;
      }

      .shelf-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 4px 24px 16px 24px;
        /* Align with 24px gutter */
      }

      .shelf-header h3 {
        font-size: 22px;
        font-weight: 500;
        color: #1a1a1a;
        font-family: 'Gilroy', sans-serif;
        margin: 0;
      }

      .shelf-empty-card {
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        min-width: 200px; height: 180px; background: #f8fafc; border-radius: 16px;
        border: 2px dashed #e2e8f0; color: #94a3b8; gap: 8px; padding: 24px; margin: 0 4px;
      }
      .shelf-empty-card .shelf-empty-icon {
        width: 48px; height: 48px; background: #f1f5f9; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
      }
      .shelf-empty-card .shelf-empty-icon i { font-size: 22px; color: #cbd5e1; }
      .shelf-empty-card p { margin: 0; font-size: 15px; font-weight: 700; color: #64748b; font-family: 'Gilroy-Bold', sans-serif; }
      .shelf-empty-card span { font-size: 12px; color: #94a3b8; }
      .shelf-header .view-all {
        font-size: 16px;
        color: #0F45CF;
        font-weight: 600;
        cursor: pointer;
      }

      .shelf-section {
        margin-bottom: 32px;
      }

      .shelf-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
      }

      .shelf-header h3 {
        font-size: 18px;
        font-weight: 700;
        margin: 0;
        color: #111827;
      }

      /* Standardized Scroll Containers - Aligned with Headers (24px indent) */
      .shelf-scroll,
      .dense-grid-container {
        display: flex !important;
        overflow-x: auto !important;
        gap: 12px !important;

        /* Simple Padding Layout - First card aligns with section header */
        margin: 0 !important;
        width: 100% !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
        padding-top: 0 !important;
        padding-bottom: 8px !important;

        box-sizing: border-box !important;
        scrollbar-width: none;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
      }

      /* Hide scrollbar for Chrome/Safari */
      .shelf-scroll::-webkit-scrollbar,
      .dense-grid-container::-webkit-scrollbar {
        display: none;
      }

      /* Spacers to ensure last item has breathing room */
      .shelf-scroll::after,
      .dense-grid-container::after {
        content: "";
        display: block;
        min-width: 12px;
        height: 1px;
        flex-shrink: 0;
      }

      /* Section Headers - Match category button alignment */
      .shelf-section {
        margin-bottom: 24px !important;
        padding: 0 !important;
        /* Children handle their own padding */
      }

      .shelf-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-bottom: 16px !important;
        padding-left: 24px !important;
        /* Align with category buttons */
        padding-right: 24px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
      }

      .shelf-header h3 {
        font-size: 22px !important;
        font-weight: 500 !important;
        margin: 0 !important;
        color: #1F2937 !important;
      }

      .shelf-empty-card {
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        min-width: 200px; height: 180px; background: #f8fafc; border-radius: 16px;
        border: 2px dashed #e2e8f0; color: #94a3b8; gap: 8px; padding: 24px; margin: 0 4px;
      }
      .shelf-empty-card .shelf-empty-icon {
        width: 48px; height: 48px; background: #f1f5f9; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
      }
      .shelf-empty-card .shelf-empty-icon i { font-size: 22px; color: #cbd5e1; }
      .shelf-empty-card p { margin: 0; font-size: 15px; font-weight: 700; color: #64748b; font-family: 'Gilroy-Bold', sans-serif; }
      .shelf-empty-card span { font-size: 12px; color: #94a3b8; }
      .shelf-header .view-all {
        font-size: 16px !important;
        color: #2563EB !important;
        font-weight: 600 !important;
        cursor: pointer !important;
      }

      /* Dense Grid Specifics */
      .dense-column {
        display: flex;
        flex-direction: column;
        gap: 12px;
        min-width: 280px;
        /* Wider columns */
      }

      .dense-card {
        display: flex;
        align-items: center;
        gap: 12px;
        background: #fff;
        border-radius: 12px;
        padding: 8px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
      }

      .dense-card-image {
        width: 60px;
        height: 60px;
        border-radius: 8px;
        overflow: hidden;
        flex-shrink: 0;
      }

      .dense-card-image img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
      }

      .dense-card-content {
        flex: 1;
        min-width: 0;
      }

      .dense-card-title {
        font-size: 14px;
        font-weight: 600;
        margin: 0 0 4px 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #1F2937;
      }

      .dense-card-price {
        font-size: 13px;
        color: #0F45CF;
        font-weight: 600;
      }

      .dense-card-rating {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 11px;
        color: #6B7280;
        margin-top: 2px;
      }

      /* --- Single Row Shelf Styles --- */
      /* Unified Horizontal Scroll Layout (Bleed) */
      /* Unified Horizontal Scroll Layout (Viewport Breakout Bleed) */
      .shelf-scroll,
      .dense-grid-container,
      body.is-home-page [class*="_scroll_"],
      body.is-home-page [class*="_topEventsScroll_"] {
        /* Explicitly target reported container */
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;

        /* Force Full Viewport Width Breakout */
        width: 100vw !important;
        position: relative !important;
        left: 50% !important;
        right: 50% !important;
        margin-left: -50vw !important;
        margin-right: -50vw !important;

        /* Bleed Padding */
        padding-left: 24px !important;
        padding-right: 24px !important;

        padding-top: 8px !important;
        padding-bottom: 16px !important;
        gap: 12px !important;

        /* Scroll Physics */
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        box-sizing: border-box !important;

        /* Hide scrollbar */
        scrollbar-width: none;
        -ms-overflow-style: none;
      }

      /* v29: removed dead _container_149py_ Category Pills override — hash no longer exists in current build, module CSS handles chip scroll */

      body.is-home-page [class*="_topEventsScroll_"]::-webkit-scrollbar {
        display: none;
      }


      .shelf-scroll::-webkit-scrollbar,
      .dense-grid-container::-webkit-scrollbar,
      body.is-home-page [class*="_scroll_"]::-webkit-scrollbar {
        display: none;
      }

      /* Specific adjustments for shelf cards */
      /* Specific adjustments for shelf cards - Enable Scrolling */
      .shelf-card {
        margin-right: 0 !important;
        touch-action: pan-x pan-y !important;
      }

      /* Critical: Prevent images from capturing touch/drag, allowing scroll */
      .shelf-card img,
      .shelf-card-image,
      .dense-card img,
      .dense-card-image {
        pointer-events: none !important;
        -webkit-user-drag: none !important;
        -webkit-user-select: none !important;
           -moz-user-select: none !important;
                user-select: none !important;
      }

      .shelf-card {
        min-width: 240px;
        width: 240px;
        display: flex;
        flex-direction: column;
      }

      .shelf-img-container {
        width: 100%;
        height: 140px;
        border-radius: 12px;
        overflow: hidden;
        position: relative;
        background: #eee;
      }

      .shelf-img-container img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
      }

      .shelf-date-badge {
        position: absolute;
        top: 8px;
        right: 8px;
        background: rgba(255, 255, 255, 0.95);
        border-radius: 8px;
        padding: 4px 8px;
        text-align: center;
        font-size: 11px;
        font-weight: 700;
        color: #1a1a1a;
        line-height: 1.2;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }

      .shelf-content {
        padding-top: 8px;
      }

      .shelf-title {
        font-size: 15px;
        font-weight: 600;
        color: #1a1a1a;
        margin: 0 0 4px 0;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        /* Force consistent height for 2 lines */
        line-height: 1.3;
        height: 2.6em;
        /* 1.3 * 2 lines */
      }

      .shelf-meta {
        font-size: 13px;
        color: #6B7280;
        margin-bottom: 2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .shelf-price {
        font-size: 13px;
        font-weight: 700;
        color: #0F45CF;
      }



      .dense-column {
        display: flex;
        flex-direction: column;
        gap: 12px;
        /* Smaller width to show peek of next column (~40px visible) */
        min-width: calc(100vw - 64px);
        width: calc(100vw - 64px);
        flex-shrink: 0;
        padding: 0 !important;
        /* No internal padding */
      }

      .dense-card {
        display: flex;
        flex-direction: row;
        align-items: center;
        background: #fff;
        border-radius: 16px;
        padding: 12px;
        gap: 12px;
        position: relative;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
        width: 100%;
        margin: 0;
        box-sizing: border-box;
      }

      .dense-card-image {
        width: 80px;
        height: 80px;
        border-radius: 12px;
        overflow: hidden;
        flex-shrink: 0;
        background: #f3f4f6;
      }

      .dense-card-image img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
      }

      .dense-card-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 80px;
        padding-right: 32px;
        /* Space for heart */
      }

      .dense-card-title {
        font-size: 15px;
        font-weight: 700;
        color: #1a1a1a;
        margin: 0 0 6px 0;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .dense-card-price {
        font-size: 14px;
        color: #374151;
        margin: 0 0 4px 0;
        font-weight: 600;
      }

      .dense-card-rating {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 12px;
        color: #6B7280;
      }

      .dense-card-heart {
        position: absolute;
        top: 50%;
        right: 12px;
        transform: translateY(-50%);
        font-size: 20px;
        color: #D1D5DB;
        cursor: pointer;
        z-index: 2;
        background: transparent;
        padding: 4px;
        border-radius: 50%;
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: color 0.15s ease-out, transform 0.15s ease-out;
      }

      .dense-card-heart:hover {
        color: #EF4444;
      }

      .dense-card-heart.liked {
        color: #EF4444;
      }

      .dense-card-heart.liked:hover {
        color: #DC2626;
      }

      @media (prefers-reduced-motion: reduce) {
        .dense-card-heart { transition: none; }
      }

      /* Toggle Views: Shelves vs Original Grid */
      body.show-mobile-shelves .original-event-grid {
        display: none !important;
      }

      body:not(.show-mobile-shelves) .mobile-shelf-container {
        display: none !important;
      }
    }


    /* ── Responsive Fixes: Tablet & Small Desktop ──────── */

    /* Header profile area: prevent overflow at narrow widths */
    @media (min-width: 769px) and (max-width: 1280px) {
      [class*="_header_1ufy7"] {
        padding: 12px 20px !important;
        gap: 12px !important;
      }
      [class*="_searchWrapper_1ufy7"] {
        max-width: 280px !important;
        min-width: 180px !important;
      }
      [class*="_profileWrapper_1ufy7"],
      [class*="_rightSection_1ufy7"] {
        max-width: 180px !important;
        overflow: hidden !important;
      }
      [class*="_profileInfo_1ufy7"] {
        display: none !important;
      }
    }

    /* Sidebar: ensure sticky works in flex parent (prevent stretch) */
    @media (min-width: 769px) {
      [class*="_sidebar_1r1ma"] {
        align-self: flex-start !important;
        flex-shrink: 0 !important;
        position: sticky !important;
        top: 0 !important;
        height: 100vh !important;
        overflow-y: auto !important;
      }
    }

    /* Sidebar: tighter at narrow desktop */
    @media (min-width: 769px) and (max-width: 1024px) {
      [class*="_sidebar_1r1ma"] {
        width: 200px !important;
        min-width: 200px !important;
        padding: 24px 14px !important;
      }
      [class*="_sidebar_1r1ma"] [class*="_logo_1r1ma"] {
        font-size: 18px !important;
      }
      [class*="_header_1ufy7"] {
        padding: 10px 16px !important;
      }
      [class*="_searchWrapper_1ufy7"] {
        max-width: 220px !important;
      }
    }

    /* Bottom nav: hide on desktop/tablet (>768px) if sidebar is visible */
    @media (min-width: 769px) {
      [class*="_navContainer_suiqy"] {
        display: none !important;
      }
    }

    /* Hero slider: constrain height so content below is accessible */
    @media (min-width: 769px) and (max-width: 1280px) {
      #desktop-hero-mount [class*="dhs-"] {
        max-height: 65vh !important;
      }
    }

    /* Desktop: Contribute page — white bg, blue tab bar + contributor card */
    @media (min-width: 769px) {
      /* Page title */
      .is-contribute-page [class*="_mobileHeaderTop_ivg9v"] {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 24px 20px 16px !important;
        text-align: center !important;
      }
      .is-contribute-page [class*="_mobileHeaderTop_ivg9v"] h1 {
        color: #111827 !important;
        font-family: Gilroy, Gilroy-Bold, -apple-system, system-ui, sans-serif !important;
        font-size: 28px !important;
        font-weight: 700 !important;
        margin: 0 0 6px !important;
      }
      .is-contribute-page [class*="_mobileHeaderTop_ivg9v"] p {
        color: #6b7280 !important;
        font-size: 15px !important;
        margin: 0 !important;
      }
      /* Tab bar: blue pill background */
      .is-contribute-page .glass-radio-group {
        background: #0F45CF !important;
        border: 1px solid rgba(255,255,255,0.2) !important;
        border-radius: 16px !important;
        padding: 6px !important;
      }
      .is-contribute-page .glass-radio-group label {
        color: rgba(255,255,255,0.75) !important;
      }
      .is-contribute-page .glass-radio-group input:checked + label {
        color: #0F45CF !important;
      }
      .is-contribute-page .glass-glider {
        background: #fff !important;
        border-radius: 12px !important;
      }
      /* Contributor Level card: blue background */
      .is-contribute-page [class*="_container_ivg9v"] > .ev-contrib-level-card {
        background: linear-gradient(135deg, #0F45CF 0%, #3B82F6 100%) !important;
        border-radius: 20px !important;
        padding: 24px !important;
        border: 1px solid rgba(255,255,255,0.15) !important;
      }
      .is-contribute-page [class*="_container_ivg9v"] > .ev-contrib-level-card *:not(div) {
        color: #fff !important;
      }
      .is-contribute-page [class*="_container_ivg9v"] > .ev-contrib-level-card span {
        color: rgba(255,255,255,0.85) !important;
      }
      /* Form header */
      .is-contribute-page [class*="_formHeader_ivg9v"] h2 {
        color: #111827 !important;
        font-family: Gilroy, Gilroy-Bold, -apple-system, system-ui, sans-serif !important;
        font-weight: 700 !important;
        font-size: 26px !important;
      }
    }

    /* Star rating badge on event discovery cards */
    .ev-star-badge {
      position: absolute;
      top: 8px;
      right: 8px;
      background: rgba(0, 0, 0, 0.7);
      color: #fbbf24;
      font-family: Gilroy, -apple-system, sans-serif;
      font-size: 12px;
      font-weight: 700;
      padding: 4px 8px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      gap: 3px;
      z-index: 10;
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
    }

    /* Mobile: leaderboard inside contribute tab */
    .ev-leaderboard-mobile .ev-content,
    .ev-leaderboard-mobile .ev-content--embedded {
      padding: 12px 0 80px !important;
      max-width: 100% !important;
    }
    /* Hide stats cards on mobile contribute (contributor level card already shows rank/pts) */
    .ev-leaderboard-mobile .ev-stats {
      display: none !important;
    }
    /* Hide the title section (already under Contributor Dashboard heading) */
    .ev-leaderboard-mobile .ev-title-section {
      display: none !important;
    }
    /* Tighter podium for mobile */
    .ev-leaderboard-mobile .ev-podium {
      padding-top: 8px !important;
      margin-bottom: 16px !important;
    }
    /* Full-width districts scroll */
    .ev-leaderboard-mobile .ev-districts {
      padding: 0 0 12px !important;
    }
    /* Compact rows */
    .ev-leaderboard-mobile .ev-row {
      margin-left: 0 !important;
      margin-right: 0 !important;
      border-radius: 0 !important;
      border-left: none !important;
      border-right: none !important;
    }
    /* Filter toggle alignment */
    .ev-leaderboard-mobile .ev-filters {
      margin-bottom: 12px !important;
    }

    /* ── Inject: CSS-based suppression ─────────────────────────────────────
       Mount divs are now SIBLINGS of _tabContent_ivg9v (inserted after it).
       React can't remove them since they're outside tabContent's managed subtree.
       We hide tabContent ITSELF when our mount is present.
    ──────────────────────────────────────────────────────────────────────── */

    /* Hide the platform form when our contributor mount exists (MutationObserver replaces it) */
    body:has(#ev-contributor-mount) [class*="_form_ivg9v"] {
      display: none !important;
    }
    body:has(#ev-contributor-mount) [class*="_formHeader_ivg9v"] {
      display: none !important;
    }

    /* Hide tabContent when our achievements mount is in the DOM */
    body:has(#ev-achievements-mount) [class*="_tabContent_ivg9v"] {
      display: none !important;
    }