/*
 * GlobeSpotter page compositions
 * Loaded after every historical stylesheet. Keep page mechanics here so
 * Spot, Trips and Clubs each have exactly one scrolling surface.
 */

@media (max-width: 768px) {
  /* ---------------------------------------------------------------
     SPOT DETAIL
     --------------------------------------------------------------- */
  html body #sidePanel.detail-panel.gallery-panel,
  html body #sidePanel.detail-panel.gallery-panel.open {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    max-height: none !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 28px 28px 0 0 !important;
    background: #05090c !important;
  }

  html body #sidePanel.detail-panel.gallery-panel > #panelClose {
    display: none !important;
  }

  html body #sidePanel.detail-panel.gallery-panel > .panel-scroller {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    touch-action: pan-y !important;
    overscroll-behavior-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  html body #sidePanel.detail-panel.gallery-panel > .panel-scroller::-webkit-scrollbar {
    display: none !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader.panel-header {
    position: relative !important;
    inset: auto !important;
    z-index: 2 !important;
    display: block !important;
    width: 100% !important;
    height: clamp(355px, 45dvh, 500px) !important;
    min-height: 355px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: auto !important;
    border: 0 !important;
    border-radius: 28px 28px 0 0 !important;
    background: #05090c !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader.panel-header::after {
    content: "" !important;
    position: absolute !important;
    inset: auto 0 0 !important;
    z-index: 3 !important;
    height: 35% !important;
    pointer-events: none !important;
    background: linear-gradient(180deg, transparent, rgba(5, 9, 12, .74)) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero,
  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-media,
  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image {
    object-fit: cover !important;
    object-position: center !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-mini-gallery,
  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-content {
    display: none !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-top {
    position: absolute !important;
    top: calc(15px + env(safe-area-inset-top, 0px)) !important;
    right: 16px !important;
    left: 16px !important;
    z-index: 1000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: auto !important;
    height: 48px !important;
    pointer-events: none !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-back,
  html body #sidePanel.detail-panel.gallery-panel #galleryHeader #spotHeroMoreBtn {
    position: relative !important;
    inset: auto !important;
    z-index: 1002 !important;
    display: grid !important;
    flex: 0 0 46px !important;
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    place-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    border: 0 !important;
    border-radius: 50% !important;
    outline: 0 !important;
    color: #fff !important;
    background: rgba(6, 11, 14, .82) !important;
    box-shadow: 0 7px 20px rgba(0, 0, 0, .28) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    backdrop-filter: blur(12px) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-actions {
    position: relative !important;
    z-index: 1002 !important;
    display: block !important;
    width: 46px !important;
    height: 46px !important;
    pointer-events: auto !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-actions-menu {
    position: absolute !important;
    top: 53px !important;
    right: 0 !important;
    z-index: 1010 !important;
    pointer-events: auto !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryList.card-list.mobile-content {
    position: relative !important;
    inset: auto !important;
    z-index: 10 !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: -62px 0 0 !important;
    padding: 0 14px calc(42px + env(safe-area-inset-bottom, 0px)) !important;
    overflow: visible !important;
    touch-action: pan-y !important;
    border: 0 !important;
    background: transparent !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spotastic-spot-overview {
    position: relative !important;
    z-index: 11 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 20px 18px 17px !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 25px !important;
    outline: 0 !important;
    color: #f7f8f9 !important;
    background: rgba(7, 12, 15, .985) !important;
    box-shadow: 0 -10px 34px rgba(0, 0, 0, .34) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    backdrop-filter: blur(18px) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spotastic-detail-heading {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 44px !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 0 7px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spotastic-detail-heading h2 {
    min-width: 0 !important;
    margin: 0 !important;
    color: #fff !important;
    font-size: clamp(25px, 7vw, 32px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em !important;
    overflow-wrap: anywhere !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spotastic-detail-like {
    display: grid !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    place-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    color: #ff684f !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 27px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spotastic-detail-meta-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    margin: 0 0 12px !important;
    color: #aeb5ba !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spotastic-detail-meta-row > span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spotastic-detail-distance em {
    font-style: normal !important;
    font-weight: 400 !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #spotDetailInfo {
    display: block !important;
    margin: 0 !important;
    padding: 14px 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, .09) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .09) !important;
    border-radius: 0 !important;
    color: #c2c7cb !important;
    background: transparent !important;
    font-size: 13px !important;
    line-height: 1.58 !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-reference-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: 62px !important;
    margin: 0 !important;
    padding: 10px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .09) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-reference-stats > span:not(.spot-reference-visitors) {
    display: grid !important;
    grid-template-columns: 18px auto !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    justify-content: start !important;
    column-gap: 4px !important;
    color: #fff !important;
    font-size: 13px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-reference-stats > span:not(.spot-reference-visitors) i {
    grid-row: 1 / span 2 !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-reference-stats small {
    color: #7f8990 !important;
    font-size: 8px !important;
    line-height: 1 !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-reference-visitors {
    display: flex !important;
    justify-content: flex-end !important;
    min-width: 58px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-reference-visitors .avatar,
  html body #sidePanel.detail-panel.gallery-panel .spot-reference-visitors img,
  html body #sidePanel.detail-panel.gallery-panel .spot-reference-visitors em {
    width: 29px !important;
    min-width: 29px !important;
    height: 29px !important;
    margin-left: -8px !important;
    border: 2px solid #11181d !important;
    border-radius: 50% !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-reference-publisher {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 12px 0 0 !important;
    padding: 11px 12px !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: #10171c !important;
    box-shadow: none !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-reference-owner,
  html body #sidePanel.detail-panel.gallery-panel .spot-reference-club {
    min-width: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spotastic-live-checkin-slot,
  html body #sidePanel.detail-panel.gallery-panel .spotastic-spot-primary-actions {
    width: auto !important;
    margin: 11px 2px 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spotastic-live-checkin-slot button,
  html body #sidePanel.detail-panel.gallery-panel .spotastic-spot-primary-actions > button {
    width: 100% !important;
    min-height: 54px !important;
    border: 0 !important;
    border-radius: 18px !important;
    color: #080c0f !important;
    background: linear-gradient(135deg, #ff694f, #ff8456) !important;
    box-shadow: none !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spotastic-last-visit {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 11px !important;
    width: auto !important;
    margin: 10px 2px 0 !important;
    padding: 12px 14px !important;
    border: 0 !important;
    border-radius: 17px !important;
    background: #10171c !important;
    box-shadow: none !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spotastic-last-visit-check {
    display: grid !important;
    width: 36px !important;
    height: 36px !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 50% !important;
    color: #8ce3b5 !important;
    background: rgba(60, 160, 110, .2) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity.card.media-card.spotastic-moments {
    width: auto !important;
    margin: 10px 2px 0 !important;
    padding: 14px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: #0d1419 !important;
    box-shadow: none !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .media-grid-wrapper {
    width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .spotastic-media-wall.media-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 7px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .spotastic-media-wall > .grid-item {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 10px !important;
  }

  /* ---------------------------------------------------------------
     TRIPS ROOT + DETAIL
     --------------------------------------------------------------- */
  html body.trips-embedded-root #sidePanel.trips-panel,
  html body.trips-embedded-root #sidePanel.trips-panel.open {
    position: fixed !important;
    top: calc(112px + env(safe-area-inset-top, 0px)) !important;
    right: 0 !important;
    bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 24px 24px 0 0 !important;
    background: #071014 !important;
  }

  html body.trips-embedded-root #sidePanel.trips-panel > .panel-scroller {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html body.trips-embedded-root #sidePanel.trips-panel #galleryHeader.trips-root-header-hidden {
    display: none !important;
  }

  html body.trips-embedded-root #sidePanel.trips-panel #galleryList.trips-root-list {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 18px 14px 38px !important;
    overflow: visible !important;
  }

  html body.trips-embedded-root #sidePanel.trips-panel .trips-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 0 !important;
  }

  html body.trips-embedded-root #sidePanel.trips-panel .trip-card {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    min-height: 230px !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 20px !important;
    background: #11191e !important;
    box-shadow: none !important;
  }

  html body.trips-embedded-root #sidePanel.trips-panel .trip-card-preview {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1.18 / 1 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  html body.trips-embedded-root #sidePanel.trips-panel .trip-card-preview img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  html body.trips-detail-open #sidePanel.trips-panel,
  html body.trips-detail-open #sidePanel.trips-panel.open {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    max-height: none !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 28px 28px 0 0 !important;
    background: #071014 !important;
  }

  html body.trips-detail-open #sidePanel.trips-panel > .panel-scroller {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  html body.trips-detail-open #sidePanel.trips-panel #galleryHeader {
    position: relative !important;
    inset: auto !important;
    z-index: 40 !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    height: calc(94px + env(safe-area-inset-top, 0px)) !important;
    pointer-events: auto !important;
    border: 0 !important;
    background: #071014 !important;
  }

  html body.trips-detail-open #sidePanel.trips-panel #galleryList.trips-detail-list {
    position: relative !important;
    inset: auto !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 12px 14px calc(38px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ---------------------------------------------------------------
     CLUBS ROOT + DETAIL
     --------------------------------------------------------------- */
  html body #sidePanel.clubs-panel,
  html body #sidePanel.clubs-panel.open {
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 28px 28px 0 0 !important;
    background: #071014 !important;
  }

  html body #sidePanel.clubs-panel > .panel-scroller {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  html body #sidePanel.clubs-panel #galleryHeader {
    position: relative !important;
    inset: auto !important;
    z-index: 50 !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    pointer-events: auto !important;
    border: 0 !important;
    background: #071014 !important;
  }

  html body #sidePanel.clubs-panel #galleryList {
    position: relative !important;
    inset: auto !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding-bottom: calc(42px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html body #sidePanel.clubs-panel .clubs-header-inner .trips-header-row {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) auto !important;
    align-items: center !important;
    column-gap: 18px !important;
  }

  html body #sidePanel.clubs-panel .trips-header-text {
    min-width: 0 !important;
    padding-left: 4px !important;
  }

  html body #sidePanel.clubs-panel .club-dashboard {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 13px !important;
    width: 100% !important;
    overflow: visible !important;
  }

  html body #sidePanel.clubs-panel .club-dashboard-card {
    width: 100% !important;
    min-height: 210px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 20px !important;
    background: #11191e !important;
    box-shadow: none !important;
  }

  html body #sidePanel.clubs-panel .club-detail-tabs {
    position: sticky !important;
    top: 0 !important;
    z-index: 45 !important;
    width: 100% !important;
    margin: 16px 0 0 !important;
    padding: 10px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: rgba(7, 16, 20, .985) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    backdrop-filter: blur(16px) !important;
  }

  html body #sidePanel.clubs-panel .club-detail-tabs .tab {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body #sidePanel.clubs-panel .club-detail .club-activity-item,
  html body #sidePanel.clubs-panel .club-detail .club-forum-item,
  html body #sidePanel.clubs-panel .club-detail .forum-topic,
  html body #sidePanel.clubs-panel .club-detail .club-spot-row {
    width: 100% !important;
    margin-left: 0 !important;
    transform: none !important;
    border-left: 0 !important;
    border-right: 0 !important;
    box-shadow: none !important;
  }

  html body #sidePanel.clubs-panel .club-spot-list {
    padding-bottom: 46px !important;
  }

  html body #sidePanel.clubs-panel .forum-topic-head {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) auto auto !important;
    align-items: center !important;
    gap: 10px !important;
  }
}

/* Spot check-in presentation: final precedence. The personal visit note lives
   over the heart while the cover is expanded and leaves with that cover. */
@media (max-width: 768px) {
  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-own-checkin {
    position: absolute !important;
    right: -1px !important;
    bottom: calc(100% + 11px) !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: 190px !important;
    min-height: 36px !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 9px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    color: #fff !important;
    opacity: var(--spot-hero-header-like-opacity, 1) !important;
    visibility: visible !important;
    transform: translate3d(0, 0, 0) !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .95) !important;
    pointer-events: none !important;
    will-change: opacity !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero.is-collapsed .spot-hero-own-checkin {
    opacity: 0 !important;
    visibility: hidden !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-own-checkin > div {
    min-width: 0 !important;
    display: grid !important;
    gap: 2px !important;
    text-align: right !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-own-checkin b {
    color: #fff !important;
    font: 780 11px/1.08 "Sora", sans-serif !important;
    letter-spacing: -.01em !important;
    text-transform: none !important;
    white-space: nowrap !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-own-checkin small {
    color: #ff7658 !important;
    font: 720 9px/1 "Sora", sans-serif !important;
    letter-spacing: .015em !important;
    text-transform: none !important;
    white-space: nowrap !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-own-checkin > span {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    border-radius: 50% !important;
    background: #ff7658 !important;
    color: #070b0d !important;
    box-shadow: 0 7px 20px rgba(0, 0, 0, .34), 0 0 0 3px rgba(255, 118, 88, .14) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-own-checkin > span i {
    color: #070b0d !important;
    font-size: 17px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #checkinBar.spotastic-inline-checkin.is-ready .checkin-cta {
    position: relative !important;
    min-height: 60px !important;
    padding: 9px 19px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, .22) !important;
    border-radius: 20px !important;
    background: linear-gradient(118deg, #ff7057 0%, #ff8267 52%, #ff6b51 100%) !important;
    color: #080c0e !important;
    box-shadow: 0 11px 28px rgba(255, 93, 69, .22), inset 0 1px 0 rgba(255, 255, 255, .34), inset 0 -1px 0 rgba(7, 11, 13, .1) !important;
    text-align: center !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #checkinBar.spotastic-inline-checkin.is-ready .checkin-cta > i {
    position: relative !important;
    z-index: 1 !important;
    width: 35px !important;
    height: 35px !important;
    flex: 0 0 35px !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 !important;
    border-radius: 50% !important;
    background: rgba(7, 11, 13, .09) !important;
    color: #080c0e !important;
    font-size: 21px !important;
    line-height: 1 !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #checkinBar.spotastic-inline-checkin.is-ready .checkin-cta > span {
    position: relative !important;
    z-index: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    flex: 0 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 3px !important;
    color: #080c0e !important;
    text-align: center !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #checkinBar.spotastic-inline-checkin.is-ready .checkin-cta b {
    color: #080c0e !important;
    font: 820 15px/1.05 "Sora", sans-serif !important;
    letter-spacing: -.02em !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #checkinBar.spotastic-inline-checkin.is-ready .checkin-cta small {
    color: rgba(8, 12, 14, .64) !important;
    font: 670 9px/1.1 "Sora", sans-serif !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #checkinBar.spotastic-inline-checkin.is-ready .checkin-cta::after {
    content: "" !important;
    position: absolute !important;
    z-index: 0 !important;
    top: -55% !important;
    bottom: -55% !important;
    left: -38% !important;
    width: 20% !important;
    border-radius: 50% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .38), transparent) !important;
    transform: skewX(-17deg) translate3d(0, 0, 0) !important;
    animation: gs-checkin-soft-glint 3.8s ease-in-out infinite 1.2s !important;
    pointer-events: none !important;
  }
}

@keyframes gs-checkin-soft-glint {
  0%, 58% { transform: skewX(-17deg) translate3d(0, 0, 0); opacity: 0; }
  65% { opacity: .65; }
  79%, 100% { transform: skewX(-17deg) translate3d(730%, 0, 0); opacity: 0; }
}

/* 2026-09 Spot ownership, check-in and viewer-layer polish. */
.modal.modal-over-media-lightbox,
.modal.modal-over-media-lightbox.opening,
.modal.modal-over-media-lightbox.is-open,
.modal.modal-over-media-lightbox.closing {
  z-index: 2147483500 !important;
}

.modal.modal-over-media-lightbox:not(.hidden) {
  display: flex !important;
  visibility: visible !important;
}

.modal.modal-over-media-lightbox.opening,
.modal.modal-over-media-lightbox.is-open {
  opacity: 1 !important;
  pointer-events: auto !important;
}

@media (max-width: 768px) {
  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-actions {
    overflow: visible !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-own-checkin {
    position: absolute !important;
    right: 0 !important;
    bottom: calc(100% + 9px) !important;
    width: max-content !important;
    min-width: 144px !important;
    max-width: 190px !important;
    min-height: 48px !important;
    padding: 7px 11px 7px 7px !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    border: 0 !important;
    border-radius: 17px !important;
    background: rgba(7, 11, 13, .9) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
    backdrop-filter: blur(12px) !important;
    color: #fff !important;
    pointer-events: none !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-own-checkin > span {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    background: var(--accent, #ff6b4a) !important;
    color: #070b0d !important;
    box-shadow: 0 0 0 3px rgba(255, 107, 74, .18) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-own-checkin > span i {
    font-size: 18px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-own-checkin > div {
    min-width: 0 !important;
    display: grid !important;
    gap: 3px !important;
    text-align: left !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-own-checkin b {
    color: #fff !important;
    font: 850 11px/1.05 "Sora", sans-serif !important;
    letter-spacing: .045em !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-own-checkin small {
    color: var(--accent, #ff6b4a) !important;
    font: 800 9px/1 "Sora", sans-serif !important;
    letter-spacing: .055em !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-reference-owner > span > b {
    color: #fff !important;
    font-size: 20px !important;
    line-height: 1.12 !important;
    letter-spacing: -.025em !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-reference-owner > span > em {
    margin-top: 5px !important;
    font-size: 10px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #checkinBar.is-ready .checkin-cta {
    position: relative !important;
    justify-content: center !important;
    gap: 11px !important;
    overflow: hidden !important;
    color: #090d0f !important;
    text-align: left !important;
    box-shadow: 0 13px 32px rgba(255, 101, 72, .25), inset 0 1px 0 rgba(255, 255, 255, .4) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #checkinBar.is-ready .checkin-cta > i {
    flex: 0 0 auto !important;
    margin: 0 !important;
    color: #090d0f !important;
    font-size: 23px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #checkinBar.is-ready .checkin-cta > span {
    width: auto !important;
    flex: 0 1 auto !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #checkinBar.is-ready .checkin-cta :is(b, small) {
    color: #090d0f !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #checkinBar.is-ready .checkin-cta::after {
    content: "" !important;
    position: absolute !important;
    top: -30% !important;
    bottom: -30% !important;
    left: -48% !important;
    width: 34% !important;
    border-radius: 50% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent) !important;
    transform: skewX(-18deg) translateX(0) !important;
    animation: gs-checkin-reflection 3.2s ease-in-out infinite 1s !important;
    pointer-events: none !important;
  }
}

@keyframes gs-checkin-reflection {
  0%, 54% { transform: skewX(-18deg) translateX(0); opacity: 0; }
  61% { opacity: .75; }
  78% { transform: skewX(-18deg) translateX(520%); opacity: 0; }
  100% { transform: skewX(-18deg) translateX(520%); opacity: 0; }
}

/* Android WebView: suppress the native blue rectangle that briefly paints the
   tapped DOM subtree. Inputs and editable canvas text remain selectable. */
html,
body,
body * {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

:is(button, a, [role="button"], [data-act], [data-action], [data-no-drag], .card, .modal, .modal-card, .detail-panel) {
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

:is(input, textarea, select, [contenteditable="true"], .postcard-editor-text-layer) {
  -webkit-user-select: text !important;
  user-select: text !important;
}

/* 2026-09-01 · Trip details are a destination, never a partially expanded
   bottom sheet. This final guard intentionally follows all historic panel
   variants and overrides both snap classes and inline panel geometry. */
@media (max-width: 768px) {
  html body.trips-detail-open #sidePanel.detail-panel.trips-panel:not(.panel-closing),
  html body.trips-detail-open #sidePanel.detail-panel.trips-panel.open:not(.panel-closing),
  html body.trips-detail-open #sidePanel.detail-panel.trips-panel.open.peek:not(.panel-closing),
  html body.trips-detail-open #sidePanel.detail-panel.trips-panel.open.expanded:not(.panel-closing) {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    translate: 0 0 !important;
    transform: translate3d(0, 0, 0) !important;
    background: #071014 !important;
  }

  html body.trips-detail-open #sidePanel.detail-panel.trips-panel:not(.panel-closing) > .panel-scroller {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    transform: none !important;
    background: #071014 !important;
  }

  html body.trips-detail-open #sidePanel.detail-panel.trips-panel:not(.panel-closing) #galleryHeader.trips-detail-overlay-header {
    position: absolute !important;
    inset: 0 0 auto !important;
    flex: none !important;
  }

  html body.trips-detail-open #sidePanel.detail-panel.trips-panel:not(.panel-closing) #galleryList.trips-detail-list {
    position: relative !important;
    inset: auto !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding-bottom: calc(38px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ABSOLUTE FINAL Spot check-in composition. Keep below the Trip guard. */
@media (max-width: 768px) {
  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-actions .spot-hero-own-checkin {
    position: absolute !important;
    right: 1px !important;
    bottom: calc(100% + 11px) !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: 190px !important;
    min-height: 36px !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 9px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    color: #fff !important;
    opacity: var(--spot-hero-header-like-opacity, 1) !important;
    visibility: visible !important;
    transform: translate3d(0, 0, 0) !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .95) !important;
    pointer-events: none !important;
    will-change: opacity !important;
  }
  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero.is-collapsed .spot-hero-image-actions .spot-hero-own-checkin {
    opacity: 0 !important;
    visibility: hidden !important;
  }
  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-actions .spot-hero-own-checkin > div {
    min-width: 0 !important;
    display: grid !important;
    gap: 2px !important;
    text-align: right !important;
  }
  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-actions .spot-hero-own-checkin b {
    color: #fff !important;
    font: 780 11px/1.08 "Sora", sans-serif !important;
    letter-spacing: -.01em !important;
    text-transform: none !important;
    white-space: nowrap !important;
  }
  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-actions .spot-hero-own-checkin small {
    color: #ff7658 !important;
    font: 720 9px/1 "Sora", sans-serif !important;
    letter-spacing: .015em !important;
    text-transform: none !important;
    white-space: nowrap !important;
  }
  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-actions .spot-hero-own-checkin > span {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    border-radius: 50% !important;
    background: #ff7658 !important;
    color: #fff !important;
    box-shadow: 0 7px 20px rgba(0, 0, 0, .34), 0 0 0 3px rgba(255, 118, 88, .14) !important;
  }
  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-actions .spot-hero-own-checkin > span i {
    color: #fff !important;
    font-size: 17px !important;
  }
  html body #sidePanel.detail-panel.gallery-panel #checkinBar.spotastic-inline-checkin.is-ready .checkin-cta {
    position: relative !important;
    min-height: 60px !important;
    padding: 9px 19px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, .22) !important;
    border-radius: 20px !important;
    background: linear-gradient(118deg, #ff7057 0%, #ff8267 52%, #ff6b51 100%) !important;
    color: #080c0e !important;
    box-shadow: 0 11px 28px rgba(255, 93, 69, .22), inset 0 1px 0 rgba(255, 255, 255, .34), inset 0 -1px 0 rgba(7, 11, 13, .1) !important;
    text-align: center !important;
  }
  html body #sidePanel.detail-panel.gallery-panel #checkinBar.spotastic-inline-checkin.is-ready .checkin-cta > i {
    position: relative !important;
    z-index: 1 !important;
    width: 35px !important;
    height: 35px !important;
    flex: 0 0 35px !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 !important;
    border-radius: 50% !important;
    background: rgba(7, 11, 13, .09) !important;
    color: #080c0e !important;
    font-size: 21px !important;
    line-height: 1 !important;
  }
  html body #sidePanel.detail-panel.gallery-panel #checkinBar.spotastic-inline-checkin.is-ready .checkin-cta > span {
    position: relative !important;
    z-index: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    flex: 0 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 3px !important;
    color: #080c0e !important;
    text-align: center !important;
  }
  html body #sidePanel.detail-panel.gallery-panel #checkinBar.spotastic-inline-checkin.is-ready .checkin-cta b {
    color: #080c0e !important;
    font: 820 15px/1.05 "Sora", sans-serif !important;
    letter-spacing: -.02em !important;
  }
  html body #sidePanel.detail-panel.gallery-panel #checkinBar.spotastic-inline-checkin.is-ready .checkin-cta small {
    color: rgba(8, 12, 14, .64) !important;
    font: 670 9px/1.1 "Sora", sans-serif !important;
  }
  html body #sidePanel.detail-panel.gallery-panel #checkinBar.spotastic-inline-checkin.is-ready .checkin-cta::after {
    content: "" !important;
    position: absolute !important;
    z-index: 0 !important;
    top: -55% !important;
    bottom: -55% !important;
    left: -38% !important;
    width: 20% !important;
    border-radius: 50% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .38), transparent) !important;
    transform: skewX(-17deg) translate3d(0, 0, 0) !important;
    animation: gs-checkin-soft-glint 3.8s ease-in-out infinite 1.2s !important;
    pointer-events: none !important;
  }
}

/* Keep the current Spot-detail decisions at EOF; older compatibility layers
   above intentionally contain superseded variants of these controls. */
@media (max-width: 768px) {
  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-actions {
    overflow: visible !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-reference-owner > span > b {
    color: #fff !important;
    font-size: 20px !important;
    line-height: 1.12 !important;
    letter-spacing: -.025em !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #checkinBar.is-ready .checkin-cta {
    position: relative !important;
    justify-content: center !important;
    gap: 11px !important;
    overflow: hidden !important;
    color: #090d0f !important;
    text-align: left !important;
    box-shadow: 0 13px 32px rgba(255, 101, 72, .25), inset 0 1px 0 rgba(255, 255, 255, .4) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #checkinBar.is-ready .checkin-cta > i {
    flex: 0 0 30px !important;
    width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
    color: #090d0f !important;
    background: transparent !important;
    font-size: 24px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #checkinBar.is-ready .checkin-cta > span {
    width: auto !important;
    flex: 0 1 auto !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #checkinBar.is-ready .checkin-cta :is(b, small) {
    color: #090d0f !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #checkinBar.is-ready .checkin-cta::after {
    content: "" !important;
    position: absolute !important;
    top: -30% !important;
    bottom: -30% !important;
    left: -48% !important;
    width: 34% !important;
    border-radius: 50% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent) !important;
    transform: skewX(-18deg) translateX(0) !important;
    animation: gs-checkin-reflection 3.2s ease-in-out infinite 1s !important;
    pointer-events: none !important;
  }
}

/* Postcard Story Studio --------------------------------------------------
   The editor is a camera-first canvas. All controls float above the media;
   detailed tools arrive as native bottom drawers instead of form sections. */
html body .modal.postcard-composer-modal #modalBody {
  overflow: hidden !important;
  background: #000 !important;
}

html body .postcard-composer-v2 {
  position: relative !important;
  width: 100% !important;
  height: var(--gs-modal-viewport-height, 100dvh) !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #000 !important;
  color: #fff !important;
}

html body .postcard-composer-v2 .postcard-editor-stage {
  position: absolute !important;
  z-index: 1 !important;
  inset: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: linear-gradient(145deg, #ff765c, #76214c) !important;
  box-shadow: none !important;
  touch-action: none !important;
}

html body .postcard-composer-v2 .postcard-editor-stage :is(canvas, video) {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover;
  border-radius: 0 !important;
}

html body .postcard-composer-v2 .postcard-editor-stage :is(canvas, video).hidden { display: none !important; }

.postcard-story-toolbar {
  position: absolute !important;
  z-index: 80 !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  min-height: 0 !important;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  pointer-events: none !important;
  background: linear-gradient(180deg, rgba(0, 0, 0, .48), transparent) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.postcard-story-toolbar-actions { display: flex !important; align-items: center !important; gap: 7px !important; pointer-events: auto !important; }
.postcard-story-tool {
  width: 45px !important;
  height: 45px !important;
  min-height: 45px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 45px !important;
  border: 0 !important;
  border-radius: 50% !important;
  color: #fff !important;
  background: rgba(22, 17, 18, .76) !important;
  box-shadow: 0 5px 18px rgba(0, 0, 0, .24) !important;
  -webkit-backdrop-filter: blur(13px) !important;
  backdrop-filter: blur(13px) !important;
  pointer-events: auto !important;
  font-size: 20px !important;
  transform: translateZ(0);
  transition: transform .18s ease, background .18s ease !important;
}
.postcard-story-tool:active { transform: scale(.9) !important; }
.postcard-story-tool.active { background: var(--accent, #ff6b4a) !important; }
.postcard-story-back { width: 48px !important; height: 48px !important; flex-basis: 48px !important; font-size: 23px !important; }
.postcard-aa { font: 600 22px/1 Georgia, serif !important; letter-spacing: -.07em !important; }

.postcard-editor-empty-hint {
  position: absolute !important;
  z-index: 5 !important;
  top: 50% !important;
  left: 50% !important;
  width: min(76%, 310px) !important;
  display: grid !important;
  justify-items: center !important;
  gap: 8px !important;
  text-align: center !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none !important;
  text-shadow: 0 3px 15px rgba(0, 0, 0, .34) !important;
}
.postcard-editor-empty-hint.hidden { display: none !important; }
.postcard-editor-empty-hint > i { margin-bottom: 7px !important; font-size: 38px !important; }
.postcard-editor-empty-hint > b { font: 800 17px/1.2 "Sora", sans-serif !important; }
.postcard-editor-empty-hint > small { color: rgba(255, 255, 255, .74) !important; font: 550 10px/1.5 "Sora", sans-serif !important; }

.postcard-story-library,
.postcard-story-next {
  position: absolute !important;
  z-index: 72 !important;
  bottom: calc(15px + env(safe-area-inset-bottom, 0px)) !important;
  min-height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border: 0 !important;
  border-radius: 999px !important;
  font: 800 11px/1 "Sora", sans-serif !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .34) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
  transition: transform .18s ease, opacity .18s ease !important;
}
.postcard-story-library { left: 14px !important; padding: 0 17px !important; color: #fff !important; background: rgba(19, 20, 22, .78) !important; }
.postcard-story-next { right: 14px !important; padding: 0 19px !important; color: #071014 !important; background: var(--accent, #ff6b4a) !important; }
.postcard-story-next:disabled { opacity: .42 !important; }
.postcard-story-library:active, .postcard-story-next:active { transform: scale(.94) !important; }
.postcard-composer-v2 > .postcard-publish { display: none !important; }

.postcard-tool-panel {
  position: absolute !important;
  z-index: 110 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  max-width: none !important;
  max-height: min(58dvh, 560px) !important;
  margin: 0 !important;
  padding: 12px 15px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
  display: block !important;
  overflow: auto !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(255, 255, 255, .09) !important;
  border-bottom: 0 !important;
  border-radius: 26px 26px 0 0 !important;
  background: rgba(9, 13, 16, .94) !important;
  box-shadow: 0 -24px 70px rgba(0, 0, 0, .55) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.2) !important;
  backdrop-filter: blur(24px) saturate(1.2) !important;
  opacity: 1 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translate3d(0, 112%, 0) !important;
  transition: transform .34s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .34s !important;
}
.postcard-tool-panel.is-open {
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate3d(0, 0, 0) !important;
  transition: transform .34s cubic-bezier(.22, 1, .36, 1), visibility 0s !important;
}
.postcard-tool-panel::before { content: ""; width: 38px; height: 4px; margin: 0 auto 10px; display: block; border-radius: 99px; background: #485157; }
.postcard-tool-panel-head { margin-bottom: 13px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; }
.postcard-tool-panel-head > b { color: #fff !important; font: 800 16px/1 "Sora", sans-serif !important; }
.postcard-tool-panel-head > button { width: 38px !important; height: 38px !important; padding: 0 !important; display: grid !important; place-items: center !important; border: 0 !important; border-radius: 50% !important; color: #fff !important; background: #1b2429 !important; }

.postcard-media-modes { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
.postcard-media-modes > button,
.postcard-more-actions > :is(button, label) { min-height: 54px !important; padding: 9px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; border: 0 !important; border-radius: 15px !important; background: #141d21 !important; color: #fff !important; font: 700 10px/1.2 "Sora", sans-serif !important; }
.postcard-media-modes > button.active { color: var(--accent, #ff6b4a) !important; background: rgba(255, 107, 74, .13) !important; }
.postcard-composer-v2 .postcard-editor-tools { padding: 12px 15px calc(18px + env(safe-area-inset-bottom, 0px)) !important; }
.postcard-composer-v2 .postcard-backgrounds { margin-top: 12px !important; }
.postcard-composer-v2 .postcard-add-media,
.postcard-composer-v2 .postcard-media-remove { margin-top: 10px !important; }
.postcard-composer-v2 .postcard-media-zoom { width: 100% !important; margin-top: 13px !important; }
.postcard-composer-v2 .postcard-trim-tools { position: relative !important; z-index: 112 !important; margin: 10px 0 0 !important; }

.postcard-sticker-grid { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 9px !important; }
.postcard-sticker-grid > button { aspect-ratio: 1 !important; padding: 0 !important; display: grid !important; place-items: center !important; border: 0 !important; border-radius: 15px !important; background: #151e22 !important; color: #fff !important; font-size: 26px !important; }
.postcard-sticker-grid > button:active { transform: scale(.9) !important; }
.postcard-sticker-grid > button.is-word { font: 900 11px/1 "Sora", sans-serif !important; }
.postcard-layer-transform { margin-top: 14px !important; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px !important; align-items: end !important; gap: 10px !important; }
.postcard-layer-transform > label { display: grid !important; gap: 7px !important; color: #929ca1 !important; font: 700 8px/1 "Sora", sans-serif !important; }
.postcard-layer-transform input { width: 100% !important; accent-color: var(--accent, #ff6b4a) !important; }
.postcard-layer-transform > button { width: 44px !important; height: 44px !important; padding: 0 !important; border: 0 !important; border-radius: 14px !important; color: #ff6d62 !important; background: rgba(255, 77, 82, .1) !important; }
.postcard-text-transform { grid-template-columns: 1fr 1fr !important; }

.postcard-filter-strip { display: flex !important; gap: 14px !important; overflow-x: auto !important; padding: 2px 2px 10px !important; scrollbar-width: none !important; }
.postcard-filter-strip > button { flex: 0 0 66px !important; padding: 0 !important; display: grid !important; justify-items: center !important; gap: 7px !important; border: 0 !important; background: transparent !important; color: #aab1b5 !important; font: 650 9px/1 "Sora", sans-serif !important; }
.postcard-filter-strip > button > i { width: 58px !important; height: 58px !important; display: block !important; border: 2px solid transparent !important; border-radius: 50% !important; background: linear-gradient(145deg, #e7a66e, #543154) !important; box-shadow: inset 0 0 0 3px #0b1114 !important; }
.postcard-filter-strip > button:nth-child(2) > i { filter: grayscale(1) contrast(1.18); }
.postcard-filter-strip > button:nth-child(3) > i { filter: sepia(.22) saturate(1.65) hue-rotate(-8deg); }
.postcard-filter-strip > button:nth-child(4) > i { filter: sepia(.35) saturate(1.35); }
.postcard-filter-strip > button:nth-child(5) > i { filter: hue-rotate(18deg) saturate(1.2); }
.postcard-filter-strip > button:nth-child(6) > i { filter: sepia(.2) contrast(1.2) saturate(.75); }
.postcard-filter-strip > button:nth-child(7) > i { filter: saturate(2) contrast(1.15); }
.postcard-filter-strip > button.active { color: #fff !important; }
.postcard-filter-strip > button.active > i { border-color: var(--accent, #ff6b4a) !important; }
.postcard-effect-strength { display: flex !important; align-items: center !important; gap: 11px !important; }
.postcard-effect-strength > i { color: var(--accent, #ff6b4a) !important; }
.postcard-effect-strength input { width: 100% !important; accent-color: var(--accent, #ff6b4a) !important; }
.postcard-more-actions { display: grid !important; gap: 8px !important; }
.postcard-more-actions > :is(button, label) { justify-content: flex-start !important; min-height: 58px !important; padding: 0 16px !important; font-size: 11px !important; }
.postcard-more-actions i { width: 25px !important; color: var(--accent, #ff6b4a) !important; text-align: center !important; font-size: 17px !important; }

.postcard-editor-layer-host { z-index: 22 !important; }
.postcard-editor-text-layer,
.postcard-editor-sticker-layer { position: absolute !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; transform-origin: center !important; touch-action: none !important; user-select: none !important; -webkit-user-select: none !important; text-shadow: 0 3px 16px rgba(0, 0, 0, .55) !important; }
.postcard-editor-sticker-layer { font-size: 56px !important; line-height: 1 !important; }
.postcard-editor-sticker-layer.is-active,
.postcard-editor-text-layer.is-active { outline: 1px dashed rgba(255, 255, 255, .86) !important; outline-offset: 8px !important; }
.postcard-design-sticker { font-size: clamp(34px, 15vw, 90px) !important; line-height: 1 !important; }

.postcard-tool-open .postcard-story-library,
.postcard-tool-open .postcard-story-next { transform: translate3d(0, 120px, 0) !important; opacity: 0 !important; pointer-events: none !important; }
.postcard-composer-v2 > .status { position: absolute !important; z-index: 150 !important; right: 16px !important; bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important; left: 16px !important; margin: 0 !important; color: #fff !important; text-align: center !important; text-shadow: 0 2px 8px #000 !important; }
.postcard-publish-sheet { z-index: 180 !important; }

@media (max-width: 430px) {
  .postcard-story-toolbar-actions { gap: 5px !important; }
  .postcard-story-tool { width: 42px !important; height: 42px !important; min-height: 42px !important; flex-basis: 42px !important; }
  .postcard-story-back { width: 46px !important; height: 46px !important; flex-basis: 46px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .postcard-tool-panel,
  .postcard-story-library,
  .postcard-story-next,
  .postcard-story-tool { transition: none !important; }
}

/* 2026-08-31 · Final navigation, forum and contextual map-filter pass. */
.map-filter-badge {
  display: none !important;
}

.map-panel.has-map-filter-badge {
  --map-filter-badge-offset: 0px !important;
}

#mapFilterButton.has-context-filter {
  overflow: visible !important;
  color: #fff !important;
  border-color: transparent !important;
  background: transparent !important;
}

#mapFilterButton.has-context-filter > i {
  font-size: 23px !important;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .9)) !important;
}

#mapFilterButton .map-context-filter-button-image {
  width: 36px !important;
  height: 36px !important;
  display: block !important;
  border: 2px solid rgba(255, 255, 255, .92) !important;
  border-radius: 50% !important;
  background: #10181c !important;
  object-fit: cover !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .48) !important;
}

.map-context-filter-menu {
  position: absolute !important;
  z-index: 1180 !important;
  box-sizing: border-box !important;
  width: min(254px, calc(100vw - 28px)) !important;
  padding: 10px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, .11) !important;
  border-radius: 20px !important;
  color: #fff !important;
  background: rgba(8, 14, 17, .975) !important;
  box-shadow: 0 20px 52px rgba(0, 0, 0, .58) !important;
  opacity: 0;
  transform: translate3d(10px, -8px, 0) scale(.94);
  transform-origin: right top;
  transition: opacity .18s ease, transform .24s cubic-bezier(.2, .8, .2, 1);
  pointer-events: none;
  -webkit-backdrop-filter: blur(18px) saturate(1.1) !important;
  backdrop-filter: blur(18px) saturate(1.1) !important;
}

.map-context-filter-menu.is-open {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
  pointer-events: auto !important;
}

.map-context-filter-heading {
  min-width: 0 !important;
  padding: 2px 3px 10px !important;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 9px !important;
}

.map-context-filter-heading > span {
  width: 34px !important;
  height: 34px !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  border-radius: 50% !important;
  color: var(--accent, #ff6b4a) !important;
  background: rgba(255, 107, 74, .12) !important;
  font-size: 16px !important;
}

.map-context-filter-heading img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.map-context-filter-heading b {
  min-width: 0 !important;
  overflow: hidden !important;
  color: #fff !important;
  font: 760 12px/1.25 "Sora", sans-serif !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.map-context-filter-actions {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

.map-context-filter-actions button {
  min-width: 0 !important;
  min-height: 40px !important;
  padding: 7px 5px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  border: 0 !important;
  border-radius: 12px !important;
  color: #aeb6ba !important;
  background: #151e22 !important;
  box-shadow: none !important;
  font: 710 10px/1.15 "Sora", sans-serif !important;
}

.map-context-filter-actions button.active {
  color: #0b1114 !important;
  background: var(--accent, #ff6b4a) !important;
}

.map-context-filter-actions .map-context-more {
  grid-column: 1 / -1 !important;
  min-height: 43px !important;
  color: #fff !important;
  background: rgba(255, 255, 255, .075) !important;
  font-size: 11px !important;
}

@media (max-width: 768px) {
  html body.trips-detail-open #sidePanel.trips-panel .spotastic-trip-tabs {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    z-index: 2 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
  }

  html body #sidePanel.clubs-panel #galleryHeader.clubs-detail-overlay-header .clubs-detail-nav-title {
    align-self: start !important;
    min-width: 0 !important;
    height: 46px !important;
    padding: 0 5px !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
    color: #fff !important;
    opacity: var(--club-header-fade, 0) !important;
    font: 780 14px/1.15 "Sora", sans-serif !important;
    letter-spacing: -.02em !important;
    text-decoration: none !important;
    text-overflow: ellipsis !important;
    text-shadow: 0 2px 9px rgba(0, 0, 0, .9) !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    transition: opacity .12s linear !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-hero-title-row {
    align-items: center !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-icon-wrap {
    align-self: center !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list :is(.forum-composer, #forumList, .forum-topic, .forum-topic-copy, .forum-topic-author) a,
  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list #tab-forum a,
  html body #modal.club-thread-comments-modal a {
    text-decoration: none !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .forum-composer > header b {
    font-size: 14px !important;
    line-height: 1.25 !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .forum-composer > header small {
    font-size: 10px !important;
    line-height: 1.35 !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .forum-composer > input,
  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .forum-composer-message textarea {
    font-size: 16px !important;
    line-height: 1.4 !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .forum-topic-author a {
    font-size: 13px !important;
    line-height: 1.25 !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .forum-topic-author time {
    font-size: 10px !important;
    line-height: 1.25 !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .forum-topic-replies {
    font-size: 10px !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .forum-topic-copy h4 {
    margin-bottom: 6px !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .forum-topic-copy p {
    font-size: 13px !important;
    line-height: 1.52 !important;
  }

  .modal.club-thread-comments-modal .club-thread-title {
    font-size: 18px !important;
    line-height: 1.25 !important;
  }

  .modal.club-thread-comments-modal .club-thread-sub {
    font-size: 10px !important;
  }

  .modal.club-thread-comments-modal :is(.club-thread-question-meta, .club-thread-post .meta) a {
    font-size: 12px !important;
  }

  .modal.club-thread-comments-modal :is(.club-thread-question-meta, .club-thread-post .meta) .time {
    font-size: 9px !important;
  }

  .modal.club-thread-comments-modal .club-thread-question-meta .pill {
    font-size: 9px !important;
  }

  .modal.club-thread-comments-modal :is(.club-thread-question-body, .club-thread-body) {
    font-size: 13px !important;
    line-height: 1.52 !important;
  }
}

/* Final Story Studio geometry overrides (kept last to defeat legacy composer
   rules that still support old saved Postcards). */
html body .modal.postcard-composer-modal #modalBody { overflow: hidden !important; background: #000 !important; }
html body .modal.postcard-composer-modal .postcard-composer-v2 { position: relative !important; width: 100% !important; height: var(--gs-modal-viewport-height, 100dvh) !important; min-height: 0 !important; padding: 0 !important; overflow: hidden !important; background: #000 !important; }
html body .modal.postcard-composer-modal .postcard-story-toolbar { position: absolute !important; z-index: 80 !important; top: 0 !important; right: 0 !important; left: 0 !important; min-height: 0 !important; padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 8px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; pointer-events: none !important; background: linear-gradient(180deg, rgba(0,0,0,.48), transparent) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html body .modal.postcard-composer-modal .postcard-story-toolbar-actions { display: flex !important; align-items: center !important; gap: 7px !important; pointer-events: auto !important; }
html body .modal.postcard-composer-modal .postcard-editor-stage { position: absolute !important; z-index: 1 !important; inset: 0 !important; width: 100% !important; max-width: none !important; height: 100% !important; min-height: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; }
html body .modal.postcard-composer-modal .postcard-tool-panel { position: absolute !important; z-index: 110 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: 100% !important; max-width: none !important; margin: 0 !important; transform: translate3d(0,112%,0) !important; }
html body .modal.postcard-composer-modal .postcard-tool-panel.is-open { transform: translate3d(0,0,0) !important; }

/* App-style surface choreography. Panels enter horizontally with softly
   staggered content; dismissal remains a physical downward movement. */
#sidePanel.surface-enter-forward #galleryHeader > *,
#sidePanel.surface-enter-forward #galleryList > * {
  animation: gsSurfaceContentIn .46s cubic-bezier(.22,1,.36,1) both;
}
#sidePanel.surface-enter-forward #galleryList > :nth-child(2) { animation-delay: 35ms; }
#sidePanel.surface-enter-forward #galleryList > :nth-child(3) { animation-delay: 70ms; }
#sidePanel.surface-enter-forward #galleryList > :nth-child(4) { animation-delay: 105ms; }
#sidePanel.surface-enter-forward #galleryList > :nth-child(n+5) { animation-delay: 135ms; }
#sidePanel.panel-closing #galleryHeader > *,
#sidePanel.panel-closing #galleryList > * { transform: translate3d(0,24px,0); opacity: .72; transition: transform .24s ease, opacity .2s ease !important; }

.modal.opening:not(.postcard-composer-modal) #modalBody > :first-child > :is(header,section,div,label,button):not(:only-child) { animation: gsModalPieceIn .4s cubic-bezier(.22,1,.36,1) both; }
.modal.opening:not(.postcard-composer-modal) #modalBody > :first-child > :nth-child(2) { animation-delay: 35ms; }
.modal.opening:not(.postcard-composer-modal) #modalBody > :first-child > :nth-child(3) { animation-delay: 70ms; }
.modal.opening:not(.postcard-composer-modal) #modalBody > :first-child > :nth-child(4) { animation-delay: 105ms; }
.modal.closing:not(.postcard-composer-modal) #modalBody > :first-child { transform: translate3d(0,28px,0) !important; opacity: .72 !important; transition: transform .22s ease, opacity .18s ease !important; }

.postcard-composer-modal.opening .postcard-editor-stage { animation: gsStoryCanvasIn .42s cubic-bezier(.22,1,.36,1) both; }
.postcard-composer-modal.opening .postcard-story-tool { animation: gsStoryToolIn .38s cubic-bezier(.22,1,.36,1) both; }
.postcard-composer-modal.opening .postcard-story-toolbar-actions > :nth-child(2) { animation-delay: 35ms; }
.postcard-composer-modal.opening .postcard-story-toolbar-actions > :nth-child(3) { animation-delay: 70ms; }
.postcard-composer-modal.opening .postcard-story-toolbar-actions > :nth-child(4) { animation-delay: 105ms; }
.postcard-composer-modal.opening .postcard-story-toolbar-actions > :nth-child(5) { animation-delay: 140ms; }
.postcard-composer-modal.closing .postcard-composer-v2 { transform: translate3d(0,100dvh,0) !important; transition: transform .28s cubic-bezier(.4,0,.8,.2) !important; }

@keyframes gsSurfaceContentIn { from { opacity: .2; transform: translate3d(44px,0,0); } to { opacity: 1; transform: none; } }
@keyframes gsModalPieceIn { from { opacity: .15; transform: translate3d(34px,0,0); } to { opacity: 1; transform: none; } }
@keyframes gsStoryCanvasIn { from { opacity: .3; transform: scale(1.035); } to { opacity: 1; transform: scale(1); } }
@keyframes gsStoryToolIn { from { opacity: 0; transform: translate3d(22px,-8px,0) scale(.8); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  #sidePanel.surface-enter-forward #galleryHeader > *,
  #sidePanel.surface-enter-forward #galleryList > *,
  .modal.opening #modalBody > :first-child > *,
  .postcard-composer-modal.opening .postcard-editor-stage,
  .postcard-composer-modal.opening .postcard-story-tool { animation: none !important; }
}

/* 2026-08-31 · contextual camera, creation and editor finish. */
.map-context-filter-actions .map-context-fit {
  grid-column: 1 / -1 !important;
  min-height: 44px !important;
  color: #fff !important;
  background: rgba(255, 107, 74, .13) !important;
  font-size: 10px !important;
}

.map-context-filter-actions .map-context-fit > i {
  color: var(--accent, #ff6b4a) !important;
  font-size: 13px !important;
}

.spotastic-drop-flow #dropWizardClose {
  transform: translateX(7px) !important;
}

html body #sidePanel.detail-panel.gallery-panel .spot-hero-visited-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #fff !important;
  white-space: nowrap !important;
}

html body #sidePanel.detail-panel.gallery-panel .spot-hero-visited-badge > i {
  color: var(--accent, #ff6b4a) !important;
  font-size: 15px !important;
}

html body #sidePanel.detail-panel.gallery-panel .spot-hero-visited-badge > b {
  color: rgba(255, 255, 255, .9) !important;
  font: 720 9px/1 "Sora", sans-serif !important;
}

/* Collection detail is a dark app page with its own navigation. */
.modal.collection-detail-modal {
  z-index: 4300 !important;
  align-items: stretch !important;
  padding: 0 !important;
  background: #081014 !important;
}

.modal.collection-detail-modal > .modal-content {
  width: 100% !important;
  max-width: none !important;
  height: var(--gs-modal-viewport-height, 100dvh) !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #081014 !important;
  box-shadow: none !important;
}

.modal.collection-detail-modal > .modal-content > #modalClose {
  display: none !important;
}

.modal.collection-detail-modal #modalBody {
  height: 100% !important;
  max-height: none !important;
  padding: 0 16px calc(28px + env(safe-area-inset-bottom, 0px)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  color: #fff !important;
  background: #081014 !important;
}

.collection-info-modal {
  width: 100% !important;
  max-width: 620px !important;
  margin: 0 auto !important;
  padding-bottom: 18px !important;
}

.collection-info-nav {
  position: sticky !important;
  z-index: 12 !important;
  top: 0 !important;
  min-height: calc(56px + env(safe-area-inset-top, 0px)) !important;
  margin: 0 -16px 16px !important;
  padding: env(safe-area-inset-top, 0px) 16px 0 !important;
  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr) 46px !important;
  align-items: center !important;
  color: #fff !important;
  background: rgba(8, 16, 20, .94) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  backdrop-filter: blur(18px) !important;
}

.collection-info-nav > button {
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  background: transparent !important;
  color: #fff !important;
  font-size: 21px !important;
}

.collection-info-nav > span { min-width: 0 !important; display: grid !important; text-align: center !important; }
.collection-info-nav > span small { color: var(--accent, #ff6b4a) !important; font: 850 8px/1 "Sora", sans-serif !important; letter-spacing: .14em !important; }
.collection-info-nav > span b { margin-top: 3px !important; color: #fff !important; font: 760 14px/1.1 "Sora", sans-serif !important; }
.collection-info-nav > i { justify-self: end !important; color: var(--accent, #ff6b4a) !important; font-size: 18px !important; }

.collection-info-hero { padding: 4px 4px 18px !important; text-align: left !important; }
.collection-info-hero .achievement-badge { width: 86px !important; height: 86px !important; margin: 0 0 14px !important; border-radius: 24px !important; }
.collection-info-hero h3 { margin: 0 !important; color: #fff !important; font: 820 26px/1.12 "Sora", sans-serif !important; letter-spacing: -.04em !important; }
.collection-info-hero .muted { margin-top: 7px !important; color: #8e999f !important; font-size: 10px !important; }
.collection-info-description { margin: 0 4px 22px !important; color: #c0c7cb !important; font-size: 13px !important; line-height: 1.6 !important; }

.collection-info-card {
  margin: 0 0 18px !important;
  padding: 16px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, .09) !important;
  border-radius: 21px !important;
  color: #fff !important;
  background: #10191d !important;
  box-shadow: none !important;
}

.collection-info-card > header { margin-bottom: 14px !important; display: flex !important; align-items: center !important; gap: 11px !important; }
.collection-info-card > header > i { width: 38px !important; height: 38px !important; display: grid !important; place-items: center !important; border-radius: 13px !important; color: var(--accent, #ff6b4a) !important; background: rgba(255, 107, 74, .11) !important; }
.collection-info-card > header > span { display: grid !important; gap: 3px !important; }
.collection-info-card > header small { color: var(--accent, #ff6b4a) !important; font: 850 8px/1 "Sora", sans-serif !important; letter-spacing: .13em !important; }
.collection-info-card > header b { color: #fff !important; font: 750 15px/1.1 "Sora", sans-serif !important; }
.collection-info-spots-card { padding: 16px 0 0 !important; }
.collection-info-spots-card > header { padding: 0 16px !important; }
.collection-info-spots-card .ach-info-map { border-radius: 0 !important; }
.collection-info-spots-card .ach-info-spot-list { padding: 10px 12px 14px !important; background: #10191d !important; }
.collection-info-spots-card .ach-info-spot,
.collection-info-spots-card .ach-info-spot-btn {
  border-color: rgba(255, 255, 255, .08) !important;
  color: #fff !important;
  background: #151f24 !important;
  box-shadow: none !important;
}

/* Instagram-like full-screen Postcard workspace. */
.modal.postcard-composer-modal {
  z-index: 4400 !important;
  align-items: stretch !important;
  padding: 0 !important;
  background: #05090b !important;
}

.modal.postcard-composer-modal > .modal-content {
  width: 100% !important;
  max-width: none !important;
  height: var(--gs-modal-viewport-height, 100dvh) !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #05090b !important;
  box-shadow: none !important;
}

.modal.postcard-composer-modal > .modal-content > #modalClose { display: none !important; }
.modal.postcard-composer-modal #modalBody { height: 100% !important; max-height: none !important; padding: 0 !important; overflow-y: auto !important; background: #05090b !important; }
.postcard-composer-v2 { min-height: 100% !important; padding: 0 0 calc(24px + env(safe-area-inset-bottom, 0px)) !important; box-sizing: border-box !important; }

.postcard-composer-nav {
  position: sticky !important;
  z-index: 30 !important;
  top: 0 !important;
  min-height: calc(58px + env(safe-area-inset-top, 0px)) !important;
  padding: env(safe-area-inset-top, 0px) 14px 0 !important;
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) 64px !important;
  align-items: center !important;
  color: #fff !important;
  background: rgba(5, 9, 11, .93) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  backdrop-filter: blur(18px) !important;
}

.postcard-composer-nav > button { min-height: 44px !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: #fff !important; font: 760 12px/1 "Sora", sans-serif !important; }
.postcard-composer-nav > button:first-child { justify-self: start !important; width: 44px !important; font-size: 21px !important; }
.postcard-composer-nav > button:last-child { justify-self: end !important; color: var(--accent, #ff6b4a) !important; }
.postcard-composer-nav > b { overflow: hidden !important; font: 760 15px/1 "Sora", sans-serif !important; text-align: center !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.postcard-composer-head { display: none !important; }

.postcard-composer-v2 .postcard-editor-stage {
  width: 100% !important;
  max-width: 620px !important;
  height: min(65dvh, 720px) !important;
  min-height: 420px !important;
  aspect-ratio: auto !important;
  margin: 0 auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #11181c !important;
  box-shadow: none !important;
  touch-action: none !important;
}

.postcard-composer-v2 .postcard-editor-stage canvas,
.postcard-composer-v2 .postcard-editor-stage video { transform-origin: center !important; will-change: transform !important; }
.postcard-composer-v2 .postcard-editor-tools,
.postcard-composer-v2 .postcard-trim-tools,
.postcard-composer-v2 .postcard-layer-editor,
.postcard-composer-v2 > .status,
.postcard-composer-v2 > .postcard-publish { max-width: 620px !important; margin-right: auto !important; margin-left: auto !important; box-sizing: border-box !important; }
.postcard-composer-v2 .postcard-editor-tools { padding: 13px 14px 3px !important; }
.postcard-media-zoom { min-width: 118px !important; display: inline-flex !important; align-items: center !important; gap: 7px !important; color: #fff !important; }
.postcard-media-zoom > i { color: var(--accent, #ff6b4a) !important; font-size: 11px !important; }
.postcard-media-zoom > input { min-width: 80px !important; width: 100% !important; accent-color: var(--accent, #ff6b4a) !important; }
.postcard-composer-v2 .postcard-layer-editor,
.postcard-composer-v2 .postcard-trim-tools { margin-right: 14px !important; margin-left: 14px !important; }
.postcard-caption-source { display: none !important; }
.postcard-composer-v2 > .postcard-publish { width: calc(100% - 28px) !important; min-height: 52px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; border-radius: 16px !important; }

.postcard-publish-sheet {
  position: fixed !important;
  z-index: 80 !important;
  inset: 0 !important;
  display: grid !important;
  align-items: end !important;
  pointer-events: none !important;
}
.postcard-publish-sheet.hidden { display: none !important; }
.postcard-publish-sheet.is-open { pointer-events: auto !important; }
.postcard-publish-sheet-backdrop { position: absolute !important; inset: 0 !important; border: 0 !important; background: rgba(0, 0, 0, .62) !important; opacity: 0; transition: opacity .22s ease !important; }
.postcard-publish-sheet.is-open .postcard-publish-sheet-backdrop { opacity: 1; }
.postcard-publish-sheet > div { position: relative !important; z-index: 1 !important; padding: 10px 16px calc(18px + env(safe-area-inset-bottom, 0px)) !important; border-radius: 26px 26px 0 0 !important; background: #11191d !important; box-shadow: 0 -24px 70px rgba(0, 0, 0, .58) !important; transform: translate3d(0, 105%, 0); transition: transform .3s cubic-bezier(.22, 1, .36, 1) !important; }
.postcard-publish-sheet.is-open > div { transform: translate3d(0, 0, 0); }
.postcard-sheet-handle { width: 38px !important; height: 4px !important; margin: 0 auto 13px !important; display: block !important; border-radius: 99px !important; background: #465157 !important; }
.postcard-publish-sheet header { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 14px !important; }
.postcard-publish-sheet header small { color: var(--accent, #ff6b4a) !important; font: 850 8px/1 "Sora", sans-serif !important; letter-spacing: .13em !important; }
.postcard-publish-sheet header h3 { margin: 4px 0 0 !important; color: #fff !important; font: 790 20px/1.1 "Sora", sans-serif !important; }
.postcard-publish-sheet header button { width: 42px !important; height: 42px !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: #fff !important; font-size: 20px !important; }
.postcard-publish-sheet label { margin-top: 17px !important; display: grid !important; gap: 7px !important; color: #dce1e3 !important; font: 700 10px/1 "Sora", sans-serif !important; }
.postcard-publish-sheet textarea { width: 100% !important; min-height: 108px !important; padding: 13px !important; box-sizing: border-box !important; resize: none !important; border: 1px solid rgba(255, 255, 255, .1) !important; border-radius: 16px !important; outline: 0 !important; background: #081014 !important; color: #fff !important; font-size: 16px !important; line-height: 1.45 !important; }
.postcard-publish-confirm { width: 100% !important; min-height: 52px !important; margin-top: 13px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 9px !important; border: 0 !important; border-radius: 16px !important; background: linear-gradient(135deg, var(--accent, #ff6b4a), #ff8d63) !important; color: #0a1114 !important; font-weight: 850 !important; }

/* App surfaces enter from the side; dismissing a modal follows the finger down. */
.modal.opening .modal-content { opacity: 1 !important; transform: translate3d(0, 88px, 0) scale(.985) !important; }
.modal.is-open .modal-content { opacity: 1 !important; transform: translate3d(0, 0, 0) scale(1) !important; transition: transform .32s cubic-bezier(.22, 1, .36, 1) !important; }
.modal.closing .modal-content { opacity: 1 !important; transform: translate3d(0, 105dvh, 0) scale(.985) !important; transition: transform .24s cubic-bezier(.4, 0, .8, .2) !important; }
.modal.opening #modalBody > :first-child { animation: gsModalContentIn .34s .04s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes gsModalContentIn { from { opacity: .55; transform: translate3d(34px, 0, 0); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .modal.opening .modal-content,
  .modal.is-open .modal-content,
  .modal.closing .modal-content,
  .modal.opening #modalBody > :first-child,
  .postcard-publish-sheet > div { animation: none !important; transition: none !important; }
}

/* Absolute last guard for the Spot media wall: three identical square cells,
   true viewport width and no inherited rounding on wrappers or images. */
html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity.card.media-card.spotastic-moments {
  width: calc(100% + 28px) !important;
  max-width: none !important;
  margin-right: -14px !important;
  margin-left: -14px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .media-grid-wrapper,
html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .spotastic-media-wall.media-grid.photowall-grid {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
}

html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .spotastic-media-wall.media-grid.photowall-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: auto !important;
  gap: 2px !important;
}

html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .spotastic-media-wall.media-grid.photowall-grid > .grid-item {
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}

html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .spotastic-media-wall.media-grid.photowall-grid > .grid-item.span-2 { aspect-ratio: 2 / 1 !important; }
html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .spotastic-media-wall.media-grid.photowall-grid > .grid-item.span-3 { aspect-ratio: 3 / 1 !important; }
html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .spotastic-media-wall.media-grid.photowall-grid :is(.grid-item, img, video, .mini-thumb-fallback, .reported-blur-target) {
  border-radius: 0 !important;
  clip-path: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}

/* Confirmed check-ins use one semantic marker-with-check symbol everywhere. */
.checkin-marker-glyph {
  position: relative !important;
  display: inline-block !important;
  overflow: visible !important;
}

.checkin-marker-glyph::after {
  content: none !important;
  display: none !important;
}

.spotastic-map-card-facts .spot-checkin-stat.has-checkins > i {
  color: var(--accent, #ff6b4a) !important;
}

.spotastic-map-card-facts .spot-checkin-stat.no-checkins > i {
  color: #fff !important;
}

.ww-marker__badge--capture,
.ww-marker--far .ww-marker__badge--capture {
  right: -10px !important;
  bottom: -9px !important;
  width: 27px !important;
  height: 27px !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 50% !important;
  color: var(--accent, #ff6b4a) !important;
  background: #fff !important;
  box-shadow: 0 3px 8px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.8) !important;
}

.ww-marker__badge--capture > i {
  color: var(--accent, #ff6b4a) !important;
  font-size: 15px !important;
  line-height: 1 !important;
  filter: none !important;
}

.ww-marker__badge--capture .checkin-marker-glyph::after {
  content: none !important;
  display: none !important;
}

.ww-marker--far .ww-marker__badge--capture {
  right: -7px !important;
  bottom: -8px !important;
  width: 23px !important;
  height: 23px !important;
}

.ww-marker--far .ww-marker__badge--capture > i {
  font-size: 13px !important;
}

/* A Trip in "Alle" mode keeps every marker opaque and marks only its own
   spots with a coral frame and a compact suitcase. */
.pin-wrap.entity-filter-trip .ww-marker {
  opacity: 1 !important;
  filter: none !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .48), 0 0 0 3px var(--accent, #ff6b4a), 0 0 0 6px rgba(255, 107, 74, .22) !important;
}

.pin-wrap.entity-filter-trip .ww-marker::after {
  background: var(--accent, #ff6b4a) !important;
}

.ww-marker__trip-context {
  position: absolute !important;
  z-index: 8 !important;
  top: -9px !important;
  left: -9px !important;
  width: 21px !important;
  height: 21px !important;
  display: grid !important;
  place-items: center !important;
  border: 2px solid #fff !important;
  border-radius: 50% !important;
  color: #11171a !important;
  background: var(--accent, #ff6b4a) !important;
  box-shadow: 0 5px 12px rgba(0, 0, 0, .42) !important;
  font-size: 8px !important;
  pointer-events: none !important;
}

.ww-marker--far .ww-marker__trip-context {
  top: -7px !important;
  left: -7px !important;
  width: 18px !important;
  height: 18px !important;
  font-size: 7px !important;
}

.ww-cluster__trip-context {
  position: absolute !important;
  z-index: 9 !important;
  top: -7px !important;
  left: -8px !important;
  min-width: 24px !important;
  height: 22px !important;
  padding: 0 5px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  border: 2px solid #fff !important;
  border-radius: 999px !important;
  color: #11171a !important;
  background: var(--accent, #ff6b4a) !important;
  box-shadow: 0 5px 13px rgba(0, 0, 0, .42) !important;
  font: 820 7px/1 "Sora", sans-serif !important;
}

/* The active map context reads as a persistent, connected filter control. */
#mapFilterButton.has-context-filter {
  box-sizing: border-box !important;
  padding: 6px !important;
  overflow: visible !important;
  border: 2px solid var(--accent, #ff6b4a) !important;
  color: #fff !important;
  background: rgba(44, 23, 21, .94) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .42), 0 0 0 3px rgba(255, 107, 74, .14) !important;
}

#mapFilterButton.has-context-filter > i {
  font-size: 20px !important;
  line-height: 1 !important;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .82)) !important;
}

#mapFilterButton .map-context-filter-button-image {
  width: 25px !important;
  height: 25px !important;
  border: 1.5px solid rgba(255, 255, 255, .94) !important;
  box-shadow: 0 3px 9px rgba(0, 0, 0, .42) !important;
}

.map-context-filter-active-label {
  position: absolute !important;
  top: 50% !important;
  right: calc(100% + 8px) !important;
  box-sizing: border-box !important;
  width: min(154px, calc(100vw - 86px)) !important;
  min-height: 42px !important;
  padding: 7px 11px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 2px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 107, 74, .52) !important;
  border-radius: 14px !important;
  color: #fff !important;
  background: rgba(8, 14, 17, .95) !important;
  box-shadow: 0 9px 25px rgba(0, 0, 0, .38) !important;
  text-align: left !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
}

.map-context-filter-active-label small {
  color: var(--accent, #ff6b4a) !important;
  font: 850 7px/1 "Sora", sans-serif !important;
  letter-spacing: .11em !important;
}

.map-context-filter-active-label b {
  width: 100% !important;
  overflow: hidden !important;
  color: #fff !important;
  font: 740 10px/1.15 "Sora", sans-serif !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.map-context-filter-heading.is-clickable {
  box-sizing: border-box !important;
  width: 100% !important;
  grid-template-columns: 34px minmax(0, 1fr) 14px !important;
  border: 0 !important;
  border-radius: 13px !important;
  color: #fff !important;
  background: rgba(255, 255, 255, .055) !important;
  box-shadow: none !important;
  text-align: left !important;
}

.map-context-filter-heading.is-clickable > i:last-child {
  color: var(--accent, #ff6b4a) !important;
  font-size: 10px !important;
}

/* Spot community gallery: use the exact edge-to-edge geometry of the profile
   photo wall. This final guard also applies when an embedded WebView reports a
   desktop media-query width during rotation or viewport restoration. */
html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity.card.media-card.spotastic-moments {
  width: calc(100% + 28px) !important;
  max-width: none !important;
  margin-right: -14px !important;
  margin-left: -14px !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .media-grid-wrapper {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .spotastic-media-wall.media-grid.photowall-grid {
  --spot-community-cell: calc((min(100vw, 560px) - 4px) / 3);
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: var(--spot-community-cell) !important;
  gap: 2px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .spotastic-media-wall.media-grid.photowall-grid > .grid-item,
html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .spotastic-media-wall.media-grid.photowall-grid > .grid-item:first-child,
html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .spotastic-media-wall.media-grid.photowall-grid > .grid-item.more {
  position: relative !important;
  display: block !important;
  grid-column: auto !important;
  grid-row: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  background: #151d21 !important;
  box-shadow: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}

html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .spotastic-media-wall.media-grid.photowall-grid > .grid-item > img,
html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .spotastic-media-wall.media-grid.photowall-grid > .grid-item > video,
html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .spotastic-media-wall.media-grid.photowall-grid > .grid-item > .mini-thumb-fallback {
  display: block !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: cover !important;
  image-orientation: from-image !important;
  clip-path: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}

html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .spotastic-media-wall.media-grid.photowall-grid > .spot-community-add-tile {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 12px !important;
  border: 1px dashed rgba(255, 107, 74, .58) !important;
  border-radius: 0 !important;
}

html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .spotastic-media-wall.media-grid.photowall-grid > .spot-community-add-tile.span-2 {
  grid-column: span 2 !important;
}

html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .spotastic-media-wall.media-grid.photowall-grid > .spot-community-add-tile.span-3 {
  grid-column: span 3 !important;
}

/* 2026-08-31 · Trip/Club polish. */
@media (max-width: 768px) {
  html body.trips-detail-open #sidePanel.trips-panel #galleryHeader.trips-detail-overlay-header {
    position: absolute !important;
    inset: 0 0 auto !important;
    z-index: 110 !important;
    flex: none !important;
    width: 100% !important;
    height: calc(58px + env(safe-area-inset-top, 0px)) !important;
    min-height: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-bottom: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html body.trips-detail-open #sidePanel.trips-panel #galleryHeader.trips-detail-overlay-header::before,
  html body.trips-detail-open #sidePanel.trips-panel #galleryHeader.trips-detail-overlay-header::after,
  html body.trips-detail-open #sidePanel.trips-panel #galleryHeader.trips-detail-overlay-header .trips-header-inner::before,
  html body.trips-detail-open #sidePanel.trips-panel #galleryHeader.trips-detail-overlay-header .trips-header-inner::after {
    content: none !important;
    display: none !important;
  }

  html body.trips-detail-open #sidePanel.trips-panel #galleryHeader.trips-detail-overlay-header .trips-header-inner,
  html body.trips-detail-open #sidePanel.trips-panel #galleryHeader.trips-detail-overlay-header .trips-header-row {
    height: 100% !important;
    min-height: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.trips-detail-open #sidePanel.trips-panel #galleryHeader.trips-detail-overlay-header .trips-header-row {
    padding: calc(6px + env(safe-area-inset-top, 0px)) 12px 0 !important;
  }

  html body.trips-detail-open #sidePanel.trips-panel #galleryHeader.trips-detail-overlay-header .trips-header-btn {
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
  }

  html body.trips-detail-open #sidePanel.trips-panel .spotastic-trip-tabs {
    top: calc(58px + env(safe-area-inset-top, 0px)) !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
  }

  html body #sidePanel.clubs-panel #galleryHeader.clubs-detail-overlay-header {
    background: rgba(7, 16, 20, var(--club-header-fade, 0)) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    will-change: background-color !important;
  }

  html body.trips-embedded-root #sidePanel.trips-panel .trip-card-meta {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  html body.trips-embedded-root #sidePanel.trips-panel .trip-card-shared-avatars {
    min-width: 0 !important;
    height: 29px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding-left: 1px !important;
    color: var(--accent, #ff6b4a) !important;
  }

  html body.trips-embedded-root #sidePanel.trips-panel .trip-card-shared-avatars > :is(img, span) {
    flex: 0 0 27px !important;
    width: 27px !important;
    height: 27px !important;
    display: grid !important;
    place-items: center !important;
    margin-left: -7px !important;
    overflow: hidden !important;
    border: 2px solid #111a1f !important;
    border-radius: 50% !important;
    background: #293239 !important;
    color: #fff !important;
    object-fit: cover !important;
    font: 780 8px/1 "Sora", sans-serif !important;
  }

  html body.trips-embedded-root #sidePanel.trips-panel .trip-card-shared-avatars > :is(img, span):first-child {
    margin-left: 0 !important;
  }

  html body.trips-embedded-root #sidePanel.trips-panel .trip-card-shared-avatars > .trip-card-avatar-more {
    color: var(--accent, #ff6b4a) !important;
    background: #20282d !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-activity-list {
    display: grid !important;
    gap: 0 !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-activity-item {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 14px 0 !important;
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 10px !important;
    overflow: visible !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .075) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-activity-item > .avatar {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    border-radius: 50% !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-activity-main {
    min-width: 0 !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-activity-meta {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-activity-author {
    min-width: 0 !important;
    display: grid !important;
    gap: 3px !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-activity-type {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 2px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--accent, #ff6b4a) !important;
    background: transparent !important;
    font: 720 8px/1.2 "Sora", sans-serif !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-activity-content {
    width: 100% !important;
    min-width: 0 !important;
    margin: 8px 0 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-activity-content:has(.club-activity-media) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 72px !important;
    align-items: center !important;
    gap: 10px !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-activity-media {
    width: 72px !important;
    height: 56px !important;
    margin: 0 !important;
    border-radius: 9px !important;
    object-fit: cover !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-activity-title {
    min-width: 0 !important;
    color: #d5dade !important;
    font: 570 10px/1.45 "Sora", sans-serif !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list #tab-forum {
    padding-top: 12px !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .forum-composer {
    margin: 0 0 12px !important;
    padding: 0 0 14px !important;
    display: grid !important;
    gap: 9px !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .forum-composer > header {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .forum-composer > header > i {
    width: 34px !important;
    height: 34px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    color: var(--accent, #ff6b4a) !important;
    background: rgba(255, 107, 74, .1) !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .forum-composer > header > span {
    display: grid !important;
    gap: 2px !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .forum-composer > header b {
    color: #fff !important;
    font-size: 11px !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .forum-composer > header small {
    color: #7f8990 !important;
    font-size: 8px !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .forum-composer > input {
    min-height: 38px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: #151d21 !important;
    font-size: 10px !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .forum-composer-message {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 42px !important;
    align-items: end !important;
    gap: 8px !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .forum-composer-message textarea {
    min-height: 42px !important;
    max-height: 100px !important;
    padding: 12px 14px !important;
    resize: none !important;
    border: 1px solid rgba(255, 255, 255, .1) !important;
    border-radius: 21px !important;
    background: #151d21 !important;
    font-size: 10px !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .forum-composer-message button {
    width: 42px !important;
    height: 42px !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--accent, #ff6b4a) !important;
    color: #111 !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list #forumList {
    display: grid !important;
    gap: 0 !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .forum-topic {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 14px 0 !important;
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 10px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .075) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .forum-topic-avatar > .avatar {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    border-radius: 50% !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .forum-topic-main {
    min-width: 0 !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .forum-topic-head {
    min-width: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .forum-topic-author {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    display: grid !important;
    gap: 3px !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .forum-topic-author a {
    color: #fff !important;
    font: 720 10px/1.2 "Sora", sans-serif !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .forum-topic-author time {
    color: #78838a !important;
    font: 570 7px/1.2 "Sora", sans-serif !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .forum-topic-replies {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 3px 0 !important;
    color: #8d979d !important;
    font-size: 8px !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .forum-topic-copy {
    margin-top: 7px !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .forum-topic-copy h4 {
    margin: 0 0 4px !important;
    color: #eef1f2 !important;
    font: 690 11px/1.35 "Sora", sans-serif !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .forum-topic-copy p {
    display: -webkit-box !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: #a4acb1 !important;
    font: 520 9px/1.45 "Sora", sans-serif !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .forum-topic-delete {
    flex: 0 0 28px !important;
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    margin: -5px -4px 0 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}

html body #modal.club-thread-comments-modal {
  align-items: flex-end !important;
  padding: 0 !important;
  background: rgba(1, 4, 6, .7) !important;
}

html body #modal.club-thread-comments-modal > .modal-content {
  width: min(100%, 560px) !important;
  max-width: none !important;
  height: min(76dvh, 680px) !important;
  max-height: calc(var(--gs-modal-viewport-height, 100dvh) - 20px) !important;
  margin: 0 auto !important;
  padding: 18px 16px max(14px, env(safe-area-inset-bottom, 0px)) !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 26px 26px 0 0 !important;
  background: #0a1014 !important;
  box-shadow: 0 -18px 50px rgba(0, 0, 0, .42) !important;
}

html body #modal.club-thread-comments-modal #modalClose {
  z-index: 4 !important;
  top: 12px !important;
  right: 12px !important;
  width: 38px !important;
  height: 38px !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #fff !important;
  font-size: 25px !important;
  box-shadow: none !important;
}

.modal.club-thread-comments-modal #modalBody,
.modal.club-thread-comments-modal .club-thread-modal {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}

.modal.club-thread-comments-modal .club-thread-modal {
  display: grid !important;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto !important;
  gap: 8px !important;
  overflow: hidden !important;
}

.modal.club-thread-comments-modal .club-thread-head {
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 44px 10px 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
}

.modal.club-thread-comments-modal .club-thread-title {
  color: #fff !important;
  font: 760 15px/1.25 "Sora", sans-serif !important;
}

.modal.club-thread-comments-modal .club-thread-sub {
  margin-top: 3px !important;
  color: var(--accent, #ff6b4a) !important;
  font: 660 8px/1.2 "Sora", sans-serif !important;
}

.modal.club-thread-comments-modal .club-thread-question,
.modal.club-thread-comments-modal .club-thread-post {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 10px 0 !important;
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 9px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.modal.club-thread-comments-modal :is(.club-thread-question, .club-thread-post) > .avatar {
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  margin: 0 !important;
  border-radius: 50% !important;
}

.modal.club-thread-comments-modal .club-thread-question {
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
}

.modal.club-thread-comments-modal :is(.club-thread-question-main, .club-thread-post-main) {
  min-width: 0 !important;
}

.modal.club-thread-comments-modal .club-thread-question-meta,
.modal.club-thread-comments-modal .club-thread-post .meta {
  min-width: 0 !important;
  margin: 0 0 4px !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
}

.modal.club-thread-comments-modal :is(.club-thread-question-meta, .club-thread-post .meta) a {
  min-width: 0 !important;
  overflow: hidden !important;
  color: #fff !important;
  font: 720 9px/1.2 "Sora", sans-serif !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.modal.club-thread-comments-modal :is(.club-thread-question-meta, .club-thread-post .meta) .time {
  margin-left: auto !important;
  color: #778188 !important;
  font: 560 7px/1.2 "Sora", sans-serif !important;
}

.modal.club-thread-comments-modal .club-thread-question-meta .pill {
  margin-left: 0 !important;
  padding: 4px 6px !important;
  color: var(--accent, #ff6b4a) !important;
  background: rgba(255, 107, 74, .1) !important;
  font-size: 7px !important;
}

.modal.club-thread-comments-modal :is(.club-thread-question-body, .club-thread-body) {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #d1d7da !important;
  background: transparent !important;
  font: 520 10px/1.48 "Sora", sans-serif !important;
}

.modal.club-thread-comments-modal .club-thread-posts {
  min-height: 0 !important;
  display: grid !important;
  align-content: start !important;
  gap: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.modal.club-thread-comments-modal .club-thread-compose {
  position: relative !important;
  padding: 10px 0 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 44px !important;
  align-items: end !important;
  gap: 8px !important;
  border-top: 1px solid rgba(255, 255, 255, .08) !important;
}

.modal.club-thread-comments-modal .club-thread-compose textarea {
  min-height: 44px !important;
  max-height: 110px !important;
  padding: 13px 15px !important;
  resize: none !important;
  border: 1px solid rgba(255, 255, 255, .11) !important;
  border-radius: 22px !important;
  background: #171e22 !important;
  color: #fff !important;
  font-size: 16px !important;
}

.modal.club-thread-comments-modal .club-thread-compose > button {
  width: 44px !important;
  height: 44px !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--accent, #ff6b4a) !important;
  color: #111 !important;
}

.modal.club-thread-comments-modal .club-thread-compose > .status {
  grid-column: 1 / -1 !important;
  min-height: 0 !important;
}

/* 2026-08-31 · Fullscreen Trips navigation, photo-led Trip detail and unified
   form modal chrome. Kept in the final stylesheet so older panel rules cannot
   turn the header back into a map-layer element or a compact card. */
@media (max-width: 768px) {
  html body.trips-embedded-root.trips-embedded-open #sidePanel.trips-panel #galleryHeader.trips-root-header-visible {
    position: sticky !important;
    inset: 0 auto auto !important;
    z-index: 90 !important;
    display: block !important;
    width: 100% !important;
    height: calc(122px + env(safe-area-inset-top, 0px)) !important;
    min-height: calc(122px + env(safe-area-inset-top, 0px)) !important;
    padding: env(safe-area-inset-top, 0px) 14px 10px !important;
    border: 0 !important;
    background: linear-gradient(180deg, #080d10 0%, #080d10 84%, rgba(8, 13, 16, .94) 100%) !important;
    box-shadow: none !important;
    pointer-events: auto !important;
  }

  html body.trips-embedded-root.trips-embedded-open #sidePanel.trips-panel .trips-root-header-inner {
    height: 112px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  html body.trips-embedded-root.trips-embedded-open #sidePanel.trips-panel .trips-root-wordmark.gs-wordmark {
    width: auto !important;
    margin: 10px auto 12px !important;
    font-size: 27px !important;
  }

  html body.trips-embedded-root.trips-embedded-open #sidePanel.trips-panel .trips-root-primary-tabs {
    flex: 0 0 auto !important;
    width: min(292px, calc(100vw - 52px)) !important;
    margin: 0 auto !important;
  }

  html body.trips-embedded-root.trips-embedded-open #sidePanel.trips-panel #galleryList.trips-root-list {
    min-height: calc(100dvh - 122px - env(safe-area-inset-top, 0px)) !important;
    padding: 16px 14px calc(112px + env(safe-area-inset-bottom, 0px)) !important;
  }

  html body.trips-detail-open #sidePanel.trips-panel,
  html body.trips-detail-open #sidePanel.trips-panel.open {
    border-radius: 0 !important;
  }

  html body.trips-detail-open #sidePanel.trips-panel #galleryHeader.trips-detail-overlay-header {
    position: absolute !important;
    inset: 0 0 auto !important;
    z-index: 90 !important;
    width: 100% !important;
    height: calc(78px + env(safe-area-inset-top, 0px)) !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: linear-gradient(180deg, rgba(3, 6, 8, .76), rgba(3, 6, 8, 0)) !important;
    box-shadow: none !important;
    pointer-events: none !important;
  }

  html body.trips-detail-open #sidePanel.trips-panel #galleryHeader.trips-detail-overlay-header .trips-header-inner,
  html body.trips-detail-open #sidePanel.trips-panel #galleryHeader.trips-detail-overlay-header .trips-header-row {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  html body.trips-detail-open #sidePanel.trips-panel #galleryHeader.trips-detail-overlay-header .trips-header-row {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) 48px !important;
    align-items: start !important;
    gap: 8px !important;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 0 !important;
  }

  html body.trips-detail-open #sidePanel.trips-panel #galleryHeader.trips-detail-overlay-header .trips-detail-title-spacer {
    display: block !important;
    width: auto !important;
    height: 1px !important;
  }

  html body.trips-detail-open #sidePanel.trips-panel #galleryHeader.trips-detail-overlay-header .trips-header-btn {
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: #fff !important;
    font-size: 22px !important;
    text-shadow: 0 2px 9px rgba(0, 0, 0, .94) !important;
    box-shadow: none !important;
    pointer-events: auto !important;
  }

  html body.trips-detail-open #sidePanel.trips-panel #galleryHeader.trips-detail-overlay-header .trips-close {
    justify-self: end !important;
  }

  html body.trips-detail-open #sidePanel.trips-panel #galleryList.trips-detail-list {
    flex: 1 1 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 14px calc(144px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scroll-padding-top: calc(72px + env(safe-area-inset-top, 0px)) !important;
    scroll-padding-bottom: calc(144px + env(safe-area-inset-bottom, 0px)) !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html body.trips-detail-open #sidePanel.trips-panel #galleryList.trips-detail-list::-webkit-scrollbar {
    display: none !important;
  }

  html body.trips-detail-open #sidePanel.trips-panel #galleryList.trips-detail-list > .spotastic-trip-hero {
    position: relative !important;
    width: calc(100% + 28px) !important;
    height: clamp(300px, 43dvh, 390px) !important;
    min-height: 300px !important;
    margin: 0 -14px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #11181c !important;
  }

  html body.trips-detail-open #sidePanel.trips-panel .spotastic-trip-hero > img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
    object-fit: cover !important;
  }

  html body.trips-detail-open #sidePanel.trips-panel .spotastic-trip-hero::after {
    content: "" !important;
    position: absolute !important;
    z-index: 1 !important;
    inset: 20% 0 0 !important;
    background: linear-gradient(180deg, transparent 0%, rgba(4, 8, 10, .18) 28%, #080d10 100%) !important;
    pointer-events: none !important;
  }

  html body.trips-detail-open #sidePanel.trips-panel .spotastic-trip-hero > .spotastic-trip-hero-copy {
    position: absolute !important;
    z-index: 2 !important;
    inset: auto 0 0 !important;
    display: block !important;
    padding: 90px 20px 24px !important;
    background: none !important;
  }

  html body.trips-detail-open #sidePanel.trips-panel .spotastic-trip-hero-kicker {
    display: block !important;
    margin: 0 0 8px !important;
    color: var(--accent, #ff6b4a) !important;
    font: 850 11px/1 "Sora", sans-serif !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
  }

  html body.trips-detail-open #sidePanel.trips-panel .spotastic-trip-hero h2 {
    margin: 0 0 7px !important;
    overflow: visible !important;
    color: #fff !important;
    font: 800 clamp(28px, 8vw, 38px)/1.06 "Sora", sans-serif !important;
    letter-spacing: -.045em !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  html body.trips-detail-open #sidePanel.trips-panel .spotastic-trip-hero p {
    margin: 0 !important;
    color: rgba(255, 255, 255, .78) !important;
    font: 600 12px/1.35 "Sora", sans-serif !important;
  }

  html body.trips-detail-open #sidePanel.trips-panel .spotastic-trip-badge {
    display: none !important;
  }

  html body.trips-detail-open #sidePanel.trips-panel .spotastic-trip-tabs {
    top: calc(64px + env(safe-area-inset-top, 0px)) !important;
  }

  html body.trips-detail-open #sidePanel.trips-panel #galleryList.trips-detail-list > :last-child {
    margin-bottom: 20px !important;
  }

  .modal.spotastic-photo-checkin-modal,
  .modal.spotastic-spot-edit-modal {
    align-items: stretch !important;
    padding: 0 !important;
    background: rgba(2, 5, 7, .88) !important;
  }

  .modal.spotastic-photo-checkin-modal .modal-content,
  .modal.spotastic-spot-edit-modal .modal-content {
    width: 100% !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #080d10 !important;
    box-shadow: none !important;
  }

  .modal.spotastic-photo-checkin-modal .modal-content > #modalClose,
  .modal.spotastic-spot-edit-modal .modal-content > #modalClose {
    display: none !important;
  }

  .modal.spotastic-photo-checkin-modal #modalBody,
  .modal.spotastic-spot-edit-modal #modalBody {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .modal.spotastic-photo-checkin-modal #modalBody::-webkit-scrollbar,
  .modal.spotastic-spot-edit-modal #modalBody::-webkit-scrollbar {
    display: none !important;
  }

  .modal .spotastic-exif-checkin,
  .modal .spot-edit-modal {
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 100% !important;
    padding: 0 16px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .modal .spotastic-modal-topbar {
    position: sticky !important;
    z-index: 60 !important;
    top: 0 !important;
    width: calc(100% + 32px) !important;
    min-height: calc(64px + env(safe-area-inset-top, 0px)) !important;
    margin: 0 -16px 18px !important;
    padding: env(safe-area-inset-top, 0px) 10px 0 16px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: linear-gradient(180deg, rgba(8, 13, 16, .99) 0%, rgba(8, 13, 16, .94) 76%, rgba(8, 13, 16, 0) 100%) !important;
    backdrop-filter: blur(18px) !important;
  }

  .modal .spotastic-modal-topbar .spotastic-modal-brand.gs-wordmark {
    width: auto !important;
    font-size: 23px !important;
  }

  .modal .spotastic-modal-topbar-close {
    flex: 0 0 48px !important;
    width: 48px !important;
    height: 48px !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: #fff !important;
    font-size: 22px !important;
    line-height: 1 !important;
    text-shadow: 0 2px 9px rgba(0, 0, 0, .9) !important;
    box-shadow: none !important;
  }

  .modal.spotastic-photo-checkin-modal .spotastic-exif-head {
    margin-top: 2px !important;
  }

  .modal.spotastic-spot-edit-modal .spotastic-form-hero.compact {
    margin-top: 0 !important;
  }
}

/* Trips root is a viewport destination like Entdecken, not a rounded map
   sheet. The shared wordmark, primary tabs and bottom navigation remain above
   this dark page shell. */
@media (max-width: 768px) {
  html body.trips-embedded-root.trips-embedded-open #sidePanel.detail-panel.trips-panel,
  html body.trips-embedded-root.trips-embedded-open #sidePanel.detail-panel.trips-panel.open,
  html body.trips-embedded-root.trips-embedded-open #sidePanel.detail-panel.trips-panel.open.peek,
  html body.trips-embedded-root.trips-embedded-open #sidePanel.detail-panel.trips-panel.open.expanded {
    position: fixed !important;
    inset: 0 !important;
    z-index: 965 !important;
    width: 100% !important;
    height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #080d10 !important;
    opacity: 1 !important;
    translate: none !important;
    transform: none !important;
    animation: none !important;
  }

  html body.trips-embedded-root.trips-embedded-open #sidePanel.trips-panel > .panel-scroller {
    width: 100% !important;
    height: 100dvh !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border-radius: 0 !important;
    background: #080d10 !important;
    touch-action: pan-y !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html body.trips-embedded-root.trips-embedded-open #sidePanel.trips-panel > .panel-scroller::-webkit-scrollbar {
    display: none !important;
  }

  html body.trips-embedded-root.trips-embedded-open #sidePanel.trips-panel #galleryList.trips-root-list {
    width: 100% !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: calc(130px + env(safe-area-inset-top, 0px)) 14px calc(108px + env(safe-area-inset-bottom, 0px)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }
}

/* 2026-08-31 · Spot detail content rail, sticky stats and unclipped actions. */
@media (max-width: 768px) {
  /* Keep the dark photographic transition attached to the currently visible
     lower edge while the immutable cover is clipped by the scroll animation. */
  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-overlay-bottom {
    transform: translate3d(0, var(--spot-hero-gradient-shift-y, 0px), 0) scaleY(var(--spot-hero-gradient-scale-y, 1)) !important;
    transform-origin: center bottom !important;
    will-change: transform !important;
  }

  /* Expanded title/actions disappear as one unit; the same actions return only
     once the compact title is established in the top control row. */
  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-actions {
    opacity: var(--spot-hero-actions-opacity, 1) !important;
    will-change: transform, opacity !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryList.card-list.mobile-content {
    box-sizing: border-box !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-detail-sticky-stats {
    position: sticky !important;
    top: var(--spot-hero-compact-height, 116px) !important;
    z-index: 74 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    width: calc(100% + 28px) !important;
    min-height: 70px !important;
    align-items: stretch !important;
    margin: 0 -14px !important;
    padding: 0 16px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #fff !important;
    background: rgba(5, 9, 12, .97) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .34) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
    backdrop-filter: blur(18px) saturate(1.08) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-detail-sticky-stats > :is(span, button) {
    position: relative !important;
    display: inline-flex !important;
    min-width: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    color: #fff !important;
    background: transparent !important;
    box-shadow: none !important;
    font-family: "Sora", sans-serif !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-detail-sticky-stats > :is(span, button) + :is(span, button)::before {
    content: "" !important;
    position: absolute !important;
    top: 19px !important;
    bottom: 19px !important;
    left: 0 !important;
    width: 1px !important;
    background: rgba(255, 255, 255, .1) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-detail-sticky-stats i {
    color: #fff !important;
    font-size: 20px !important;
    line-height: 1 !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-detail-sticky-stats > .is-liked i {
    color: #ff5260 !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-detail-sticky-stats > .spot-rating-stat i {
    color: #ffc857 !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-detail-sticky-stats b {
    color: #fff !important;
    font: 760 16px/1 "Sora", sans-serif !important;
    letter-spacing: -.02em !important;
  }

  /* The former avatar/check-in row is replaced by the full-width stats rail. */
  html body #sidePanel.detail-panel.gallery-panel .spot-overview-visitors,
  html body #sidePanel.detail-panel.gallery-panel .spotastic-live-checkin-slot {
    display: none !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spotastic-spot-overview {
    margin-top: 0 !important;
    padding-top: 24px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity.card.media-card.spotastic-moments,
  html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .media-grid-wrapper,
  html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .spotastic-media-wall,
  html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .spotastic-media-wall > .grid-item,
  html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .spotastic-media-wall > .grid-item > img,
  html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .mini-thumb-fallback {
    border-radius: 0 !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-reference-links {
    width: auto !important;
    margin: 28px 4px 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-reference-links > header {
    display: block !important;
    margin: 0 0 13px !important;
    padding: 0 !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-reference-links > header small {
    display: block !important;
    margin: 0 0 5px !important;
    color: #ff6754 !important;
    font: 760 9px/1 "Sora", sans-serif !important;
    letter-spacing: .11em !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-reference-links > header h2 {
    margin: 0 !important;
    color: #fff !important;
    font: 760 19px/1.15 "Sora", sans-serif !important;
    letter-spacing: -.025em !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-reference-links .chip-scroll {
    display: flex !important;
    gap: 9px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 0 4px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-reference-links .chip-scroll::-webkit-scrollbar {
    display: none !important;
  }

  /* The menu is portalled to the panel root so neither the animated cover clip
     nor the fixed Check-in CTA can cover it. */
  html body #sidePanel.detail-panel.gallery-panel > .spot-actions-menu-portal {
    position: fixed !important;
    right: 14px !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 9000 !important;
    display: flex !important;
    width: min(230px, calc(100vw - 24px)) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 24px) !important;
    flex-direction: column !important;
    gap: 5px !important;
    padding: 7px !important;
    overflow: visible !important;
    pointer-events: auto !important;
    border: 1px solid rgba(255, 255, 255, .1) !important;
    border-radius: 17px !important;
    color: #fff !important;
    background: rgba(12, 18, 22, .985) !important;
    box-shadow: 0 24px 58px rgba(0, 0, 0, .64) !important;
    transform: none !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.12) !important;
    backdrop-filter: blur(22px) saturate(1.12) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel > .spot-actions-menu-portal.hidden {
    display: none !important;
  }

  html body #sidePanel.detail-panel.gallery-panel > .spot-actions-menu-portal > button {
    min-height: 42px !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    border: 0 !important;
    border-radius: 11px !important;
    color: #fff !important;
    background: rgba(255, 255, 255, .045) !important;
    box-shadow: none !important;
  }
}

/* 2026-08-31 · WKWebView touch lifecycle and precise Spot header geometry. */
@media (max-width: 768px) {
  /* `.panel-open` historically sets touch-action:none on body. Since touch
     actions are intersected through the ancestor chain, that disables the
     otherwise valid pan-y scroller in WKWebView. */
  html body.panel-open.spot-detail-open {
    touch-action: pan-y !important;
  }

  html body.panel-open.spot-detail-open #sidePanel.gallery-panel,
  html body.panel-open.spot-detail-open #sidePanel.gallery-panel > .panel-scroller.mobile-body,
  html body.panel-open.spot-detail-open #sidePanel.gallery-panel #galleryHeader,
  html body.panel-open.spot-detail-open #sidePanel.gallery-panel .spot-hero,
  html body.panel-open.spot-detail-open #sidePanel.gallery-panel #galleryList.mobile-content {
    touch-action: pan-y !important;
  }

  html body #sidePanel.detail-panel.gallery-panel,
  html body #sidePanel.detail-panel.gallery-panel.open {
    --spot-hero-title-size: 28px;
    --spot-hero-identity-bottom: 148px;
    --spot-hero-identity-left: 20px;
    --spot-hero-identity-right: 20px;
    --spot-hero-actions-bottom: 270px;
    --spot-hero-actions-right: 24px;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-top {
    right: 16px !important;
    left: 16px !important;
    height: 42px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader :is(.spot-hero-back, .spot-hero-close),
  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-actions #spotHeroMoreBtn,
  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-actions #spotHeroLikeBtn,
  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-actions #spotHeroLikeBtn:not(.active),
  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-actions #spotHeroLikeBtn.active {
    flex: 0 0 42px !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-actions {
    gap: 8px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader :is(.spot-hero-back, .spot-hero-close) i,
  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-actions :is(#spotHeroMoreBtn, #spotHeroLikeBtn) i {
    font-size: 20px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader #spotHeroLikeBtn i {
    font-size: 23px !important;
  }

  /* Both images remain composited during a swipe so the header never flashes. */
  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image {
    transition: transform .34s cubic-bezier(.2, .78, .24, 1), opacity .28s ease !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-next {
    z-index: 1 !important;
    opacity: 0 !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-next.from-right {
    transform: translate3d(16%, var(--spot-hero-image-shift-y, 0px), 0) scale(var(--spot-hero-image-scale)) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-next.from-left {
    transform: translate3d(-16%, var(--spot-hero-image-shift-y, 0px), 0) scale(var(--spot-hero-image-scale)) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-next.is-active {
    opacity: 1 !important;
    transform: translate3d(0, var(--spot-hero-image-shift-y, 0px), 0) scale(var(--spot-hero-image-scale)) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader #spotHeroImg.is-sliding.to-left {
    opacity: .18 !important;
    transform: translate3d(-10%, var(--spot-hero-image-shift-y, 0px), 0) scale(var(--spot-hero-image-scale)) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader #spotHeroImg.is-sliding.to-right {
    opacity: .18 !important;
    transform: translate3d(10%, var(--spot-hero-image-shift-y, 0px), 0) scale(var(--spot-hero-image-scale)) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader #spotHeroImg.is-swap-commit {
    opacity: 1 !important;
    transition: none !important;
    transform: translate3d(0, 0, 0) scale(var(--spot-hero-image-scale)) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #checkinBar.spotastic-inline-checkin .checkin-cta {
    gap: 13px !important;
    padding: 11px 14px 11px 16px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #checkinBar.spotastic-inline-checkin .checkin-cta > i {
    align-self: center !important;
    flex-basis: 40px !important;
    width: 40px !important;
    height: 40px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #checkinBar.spotastic-inline-checkin .checkin-cta > span {
    flex: 1 1 auto !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #checkinBar .checkin-route-badge {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    gap: 5px !important;
    min-height: 28px !important;
    padding: 0 9px !important;
    border: 1px solid rgba(255, 255, 255, .15) !important;
    border-radius: 999px !important;
    color: rgba(255, 255, 255, .92) !important;
    background: rgba(255, 255, 255, .08) !important;
    font: 680 9px/1 "Sora", sans-serif !important;
    font-style: normal !important;
    white-space: nowrap !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #checkinBar .checkin-route-badge i {
    color: inherit !important;
    font-size: 10px !important;
  }
}

/* 2026-08-31 · compact Spot story controls and frameless mobile icon buttons */
body:not(.spot-detail-open) #checkinBar,
#sidePanel:not(.gallery-panel) > #checkinBar {
  display: none !important;
}

@media (max-width: 768px) {
  html body #sidePanel.detail-panel.gallery-panel,
  html body #sidePanel.detail-panel.gallery-panel.open {
    --spot-hero-title-size: 34px;
    --spot-hero-identity-right: 96px;
    --spot-hero-actions-bottom: 180px;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-actions {
    gap: 5px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-actions #spotHeroMoreBtn,
  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-actions #spotHeroLikeBtn,
  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-actions #spotHeroLikeBtn:not(.active),
  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-actions #spotHeroLikeBtn.active {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-actions #spotHeroMoreBtn i {
    color: #fff !important;
    font-size: 20px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-actions #spotHeroLikeBtn i,
  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-actions #spotHeroLikeBtn:not(.active) i {
    color: #fff !important;
    font-size: 26px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-actions #spotHeroLikeBtn.active,
  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-actions #spotHeroLikeBtn.active > i {
    color: #ff5260 !important;
    background: transparent !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-actions-menu {
    bottom: calc(var(--spot-hero-actions-bottom) + 40px) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero-stats {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    width: 100% !important;
    max-height: var(--spot-hero-stats-height, 30px) !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: rgba(247, 249, 250, .94) !important;
    opacity: var(--spot-hero-detail-factor) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero-stats > span {
    display: inline-flex !important;
    min-width: 0 !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero-stats i {
    color: rgba(255, 255, 255, .9) !important;
    font-size: 10px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero-stats > span:first-child i {
    color: #ff5260 !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero-stats b {
    color: #fff !important;
    font: 720 11px/1 "Sora", sans-serif !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero-stats small {
    color: rgba(233, 237, 239, .68) !important;
    font: 560 9px/1 "Sora", sans-serif !important;
  }

  /* Keep the hit targets, but let white controls sit directly on their page. */
  html body :is(
    .mobile-actions .action-btn:not(.active),
    .trips-header-btn,
    button.icon-btn,
    .lightbox-close,
    .postcard-viewer-close,
    .postcard-more,
    .postcard-share,
    .lb-more-btn,
    .spotastic-camera-top,
    .spotastic-wizard-back,
    .spotastic-wizard-close,
    .gs-onboarding-round-button,
    .collections-overview-close,
    .trip-share-close,
    .spotastic-report-close,
    .spotastic-insights-x,
    .spotastic-form-back,
    .spotastic-map-card-more,
    .spot-hero-back,
    .spot-hero-close,
    .spotastic-showcase-header button,
    .notification-center header button,
    .ranking-panel header button,
    .ad-booking header button,
    .sponsor-profile header > button,
    .award-detail > header button,
    .map-filter-sheet > header button,
    .quick-comment-sheet > header button,
    #navOverlay .nav-close,
    #modalClose,
    #checkinBack,
    #checkinClose
  ) {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html body :is(
    .mobile-actions .action-btn,
    .trips-header-btn,
    button.icon-btn,
    .lightbox-close,
    .postcard-viewer-close,
    .postcard-more,
    .postcard-share,
    .lb-more-btn,
    .spotastic-camera-top,
    .spotastic-wizard-back,
    .spotastic-wizard-close,
    .gs-onboarding-round-button,
    .collections-overview-close,
    .trip-share-close,
    .spotastic-report-close,
    .spotastic-insights-x,
    .spotastic-form-back,
    .spotastic-map-card-more,
    .spot-hero-back,
    .spot-hero-close,
    .spotastic-showcase-header button,
    .notification-center header button,
    .ranking-panel header button,
    .ad-booking header button,
    .sponsor-profile header > button,
    .award-detail > header button,
    .map-filter-sheet > header button,
    .quick-comment-sheet > header button,
    #navOverlay .nav-close,
    #checkinBack,
    #checkinClose
  ) > i:first-child {
    font-size: 19px !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .68) !important;
  }
}

/* -----------------------------------------------------------------
   SPOT DETAIL — immersive cover, collapsing header and native sheet
   Keep this block last: it supersedes the earlier fixed split layout.
   ----------------------------------------------------------------- */
@media (max-width: 768px) {
  html body #sidePanel.detail-panel.gallery-panel,
  html body #sidePanel.detail-panel.gallery-panel.open {
    --spot-hero-current-height: 100dvh;
    --spot-hero-spacer-height: 0px;
    --spot-hero-detail-factor: 1;
    --spot-hero-title-size: 40px;
    --spot-hero-identity-bottom: 106px;
    --spot-hero-identity-left: 20px;
    --spot-hero-identity-right: 116px;
    --spot-hero-actions-bottom: 196px;
    --spot-hero-actions-right: 18px;
    --spot-hero-image-scale: 1;
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    max-height: none !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #05090c !important;
    transform-origin: center top !important;
    will-change: transform, border-radius !important;
  }

  html body #sidePanel.detail-panel.gallery-panel.spot-detail-pulling {
    border-radius: calc(28px * var(--spot-detail-pull-progress, 0)) !important;
    box-shadow: 0 -12px 44px rgba(0, 0, 0, calc(.34 * var(--spot-detail-pull-progress, 0))) !important;
    transition: none !important;
  }

  html body #sidePanel.detail-panel.gallery-panel.spot-detail-settling {
    border-radius: 0 !important;
    transition: transform .42s cubic-bezier(.2, .9, .22, 1), border-radius .32s ease !important;
  }

  html body #sidePanel.detail-panel.gallery-panel.spot-detail-pull-dismiss {
    border-radius: 30px !important;
    opacity: .35 !important;
    transition: transform .27s cubic-bezier(.32, 0, .72, .24), opacity .24s ease !important;
  }

  html body #sidePanel.detail-panel.gallery-panel.spot-detail-exit {
    transform: translate3d(0, 102dvh, 0) scale(.98) !important;
    border-radius: 28px !important;
    opacity: .3 !important;
    transition: transform .34s cubic-bezier(.32, 0, .72, .24), opacity .28s ease !important;
  }

  html body #sidePanel.detail-panel.gallery-panel > #panelClose {
    display: none !important;
  }

  html body #sidePanel.detail-panel.gallery-panel > .panel-scroller.mobile-body {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    touch-action: pan-y !important;
    overscroll-behavior-y: none !important;
    -webkit-overflow-scrolling: touch !important;
    background: #05090c !important;
    scrollbar-width: none !important;
  }

  html body #sidePanel.detail-panel.gallery-panel > .panel-scroller.mobile-body::-webkit-scrollbar {
    display: none !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader.panel-header {
    position: sticky !important;
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 80 !important;
    display: block !important;
    width: 100% !important;
    height: var(--spot-hero-current-height) !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #05090c !important;
    transform: translateZ(0) !important;
    will-change: height !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader.panel-header::after {
    display: none !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero,
  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-media,
  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image,
  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .private-place-hero-visual,
  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-empty {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image {
    z-index: 1 !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: scale(var(--spot-hero-image-scale)) !important;
    transform-origin: center center !important;
    will-change: transform !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-overlay-top {
    position: absolute !important;
    inset: 0 0 auto !important;
    z-index: 2 !important;
    display: block !important;
    height: 27% !important;
    pointer-events: none !important;
    background: linear-gradient(180deg, rgba(1, 4, 6, .66), transparent) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-overlay-bottom {
    position: absolute !important;
    inset: auto 0 0 !important;
    z-index: 2 !important;
    display: block !important;
    height: 74% !important;
    pointer-events: none !important;
    background: linear-gradient(180deg, transparent 0%, rgba(3, 7, 9, .62) 46%, rgba(3, 7, 9, .98) 100%) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-mini-gallery,
  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-content {
    display: none !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-top {
    position: absolute !important;
    top: calc(12px + env(safe-area-inset-top, 0px)) !important;
    right: 16px !important;
    left: 16px !important;
    z-index: 120 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: auto !important;
    height: 46px !important;
    pointer-events: none !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-back,
  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-close {
    position: relative !important;
    inset: auto !important;
    z-index: 2 !important;
    display: grid !important;
    flex: 0 0 46px !important;
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    place-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    border: 1px solid rgba(255, 255, 255, .11) !important;
    border-radius: 50% !important;
    outline: 0 !important;
    color: #fff !important;
    background: rgba(5, 9, 12, .64) !important;
    box-shadow: 0 7px 22px rgba(0, 0, 0, .24) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    backdrop-filter: blur(14px) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-back i,
  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-close i {
    color: #fff !important;
    font-size: 18px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-actions {
    position: absolute !important;
    right: var(--spot-hero-actions-right) !important;
    bottom: var(--spot-hero-actions-bottom) !important;
    z-index: 125 !important;
    display: flex !important;
    align-items: center !important;
    gap: 13px !important;
    pointer-events: auto !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-actions #spotHeroMoreBtn,
  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-actions #spotHeroLikeBtn,
  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-actions #spotHeroLikeBtn:not(.active),
  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-actions #spotHeroLikeBtn.active {
    position: static !important;
    inset: auto !important;
    display: grid !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    place-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    color: #fff !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-actions #spotHeroMoreBtn i {
    color: #fff !important;
    font-size: 23px !important;
    text-shadow: 0 3px 14px rgba(0, 0, 0, .82) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-actions #spotHeroLikeBtn i,
  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-actions #spotHeroLikeBtn:not(.active) i,
  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-actions #spotHeroLikeBtn.active i {
    display: block !important;
    color: #fff !important;
    font-size: 31px !important;
    line-height: 1 !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-shadow: 0 3px 18px rgba(0, 0, 0, .9) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-actions-menu {
    position: absolute !important;
    top: auto !important;
    right: var(--spot-hero-actions-right) !important;
    bottom: calc(var(--spot-hero-actions-bottom) + 48px) !important;
    left: auto !important;
    z-index: 150 !important;
    pointer-events: auto !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-identity {
    position: absolute !important;
    right: var(--spot-hero-identity-right) !important;
    bottom: var(--spot-hero-identity-bottom) !important;
    left: var(--spot-hero-identity-left) !important;
    z-index: 110 !important;
    display: flex !important;
    min-width: 0 !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: var(--spot-hero-detail-gap, 9px) !important;
    color: #fff !important;
    pointer-events: none !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero-category {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: max-content !important;
    max-width: 100% !important;
    max-height: var(--spot-hero-category-height, 24px) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #ff6a55 !important;
    background: transparent !important;
    font: 760 10px/1.2 "Sora", sans-serif !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    opacity: var(--spot-hero-detail-factor) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero-heading {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero-heading h1 {
    display: -webkit-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-height: 2.13em !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    color: #fff !important;
    font: 790 var(--spot-hero-title-size)/1.065 "Sora", sans-serif !important;
    letter-spacing: -.047em !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    text-shadow: 0 3px 24px rgba(0, 0, 0, .78) !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero.is-collapsed .spot-hero-heading h1 {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero-location {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-height: var(--spot-hero-location-height, 30px) !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: rgba(245, 247, 248, .9) !important;
    font: 520 12px/1.3 "Sora", sans-serif !important;
    opacity: var(--spot-hero-detail-factor) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero-location > span {
    display: inline-flex !important;
    min-width: 0 !important;
    align-items: center !important;
    gap: 5px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero-location > span:first-child {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero-location .spot-hero-distance-badge {
    flex: 0 0 auto !important;
    min-height: 24px !important;
    padding: 4px 8px !important;
    border: 0 !important;
    border-radius: 999px !important;
    color: #fff !important;
    background: rgba(255, 255, 255, .15) !important;
    font: 650 10px/1 "Sora", sans-serif !important;
    -webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero-location i,
  html body #sidePanel.detail-panel.gallery-panel .spot-hero-location b {
    color: inherit !important;
    font: inherit !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero-checkin-state {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    max-height: var(--spot-hero-checkin-height, 46px) !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: rgba(255, 255, 255, .92) !important;
    opacity: var(--spot-hero-detail-factor) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero-checkin-state > i {
    display: grid !important;
    flex: 0 0 30px !important;
    width: 30px !important;
    height: 30px !important;
    place-items: center !important;
    border-radius: 50% !important;
    color: #fff !important;
    background: rgba(255, 255, 255, .14) !important;
    font-size: 13px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero-checkin-state.is-ready > i {
    background: #ff5c49 !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero-checkin-state > span {
    display: flex !important;
    min-width: 0 !important;
    flex-direction: column !important;
    gap: 3px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero-checkin-state b {
    overflow: hidden !important;
    color: #fff !important;
    font: 670 11px/1.15 "Sora", sans-serif !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero-checkin-state small {
    overflow: hidden !important;
    color: rgba(231, 235, 237, .68) !important;
    font: 500 9px/1.15 "Sora", sans-serif !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryList.card-list.mobile-content {
    position: relative !important;
    inset: auto !important;
    z-index: 10 !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: calc(var(--spot-hero-expanded-height, 100dvh) - var(--spot-hero-compact-height, 128px)) !important;
    max-height: none !important;
    margin: 0 !important;
    padding: var(--spot-hero-spacer-height) 14px calc(118px + env(safe-area-inset-bottom, 0px)) !important;
    overflow: visible !important;
    touch-action: pan-y !important;
    border: 0 !important;
    box-sizing: content-box !important;
    background: #05090c !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spotastic-spot-overview {
    width: 100% !important;
    margin: 0 !important;
    padding: 22px 4px 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #f7f8f9 !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-detail-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: center !important;
    gap: 0 !important;
    width: 100% !important;
    margin: 0 0 10px !important;
    padding: 13px 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, .09) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .09) !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-detail-stats > span {
    position: relative !important;
    display: grid !important;
    grid-template-columns: auto auto !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    justify-content: center !important;
    column-gap: 6px !important;
    min-width: 0 !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-detail-stats > span + span::before {
    content: "" !important;
    position: absolute !important;
    top: 3px !important;
    bottom: 3px !important;
    left: 0 !important;
    width: 1px !important;
    background: rgba(255, 255, 255, .09) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-detail-stats i {
    grid-row: 1 / 3 !important;
    color: #aab2b7 !important;
    font-size: 14px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-detail-stats b {
    color: #fff !important;
    font: 720 12px/1.1 "Sora", sans-serif !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-detail-stats small {
    color: #7e898f !important;
    font: 520 8px/1.1 "Sora", sans-serif !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-overview-visitors {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    width: 100% !important;
    min-height: 42px !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #fff !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: left !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-overview-visitors .spot-hero-visitor-count {
    color: #fff !important;
    font: 730 12px/1 "Sora", sans-serif !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-overview-visitors .spot-hero-avatar-stack {
    display: flex !important;
    align-items: center !important;
    padding-left: 6px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-overview-visitors .spot-hero-avatar-stack:empty {
    display: none !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-overview-visitors .spot-hero-avatar-stack .avatar {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    margin-left: -6px !important;
    border: 2px solid #05090c !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    font-size: 9px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-overview-visitors .spot-hero-visitor-extra {
    color: #b9c0c4 !important;
    font: 650 10px/1 "Sora", sans-serif !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-overview-visitors .spot-hero-visitors-all {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin-left: auto !important;
    color: #ff705a !important;
    font: 680 10px/1 "Sora", sans-serif !important;
    white-space: nowrap !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spotastic-live-checkin-slot {
    display: none !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #checkinBar.spotastic-inline-checkin {
    position: fixed !important;
    right: 12px !important;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    left: 12px !important;
    z-index: 5000 !important;
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    pointer-events: auto !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #checkinBar.spotastic-inline-checkin .checkin-cta {
    display: flex !important;
    width: 100% !important;
    min-height: 64px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 9px 17px !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    border-radius: 20px !important;
    color: #fff !important;
    background: rgba(13, 19, 23, .94) !important;
    box-shadow: 0 13px 34px rgba(0, 0, 0, .42) !important;
    text-align: left !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.15) !important;
    backdrop-filter: blur(18px) saturate(1.15) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #checkinBar.is-ready .checkin-cta {
    border-color: transparent !important;
    background: linear-gradient(135deg, #ff6852, #ff493f) !important;
    box-shadow: 0 14px 34px rgba(255, 73, 63, .28) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #checkinBar.spotastic-inline-checkin.is-too-far .checkin-cta {
    border-color: rgba(255, 255, 255, .13) !important;
    background: rgba(12, 18, 22, .94) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #checkinBar.spotastic-inline-checkin .checkin-cta > i {
    display: grid !important;
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 38px !important;
    place-items: center !important;
    margin: 0 !important;
    border-radius: 50% !important;
    color: #fff !important;
    background: rgba(255, 255, 255, .11) !important;
    font-size: 17px !important;
    line-height: 1 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #checkinBar.is-ready .checkin-cta > i {
    color: #ff5947 !important;
    background: #fff !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #checkinBar.spotastic-inline-checkin .checkin-cta > span {
    display: flex !important;
    min-width: 0 !important;
    flex-direction: column !important;
    gap: 4px !important;
    color: inherit !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #checkinBar.spotastic-inline-checkin .checkin-cta b {
    overflow: hidden !important;
    color: #fff !important;
    font: 740 13px/1.1 "Sora", sans-serif !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #checkinBar.spotastic-inline-checkin .checkin-cta small {
    overflow: hidden !important;
    color: rgba(232, 236, 238, .65) !important;
    font: 520 9px/1.15 "Sora", sans-serif !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #checkinBar.is-ready .checkin-cta small {
    color: rgba(255, 255, 255, .78) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity.card.media-card.spotastic-moments {
    margin-top: 22px !important;
    padding: 0 4px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .spotastic-media-wall.media-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    gap: 3px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .spotastic-media-wall > .grid-item,
  html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .spotastic-media-wall > .grid-item:first-child {
    position: relative !important;
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 4px !important;
    background: #11171b !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .spotastic-media-wall > .grid-item > img,
  html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .spotastic-media-wall > .grid-item > .mini-thumb-fallback {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .spot-community-media-stats {
    position: absolute !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 4 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    padding: 18px 7px 6px !important;
    color: #fff !important;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .76)) !important;
    font: 650 8px/1 "Sora", sans-serif !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .spot-community-media-stats > span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .media-delete,
  html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .community-media-author,
  html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .badge {
    display: none !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .spot-community-more > b {
    position: absolute !important;
    inset: 0 !important;
    z-index: 5 !important;
    display: grid !important;
    place-items: center !important;
    color: #fff !important;
    background: rgba(2, 6, 8, .56) !important;
    font: 760 22px/1 "Sora", sans-serif !important;
  }
}

/* Spot detail polish: compact social proof, profile-style community grid. */
@media (max-width: 768px) {
  html body #sidePanel.detail-panel.gallery-panel #galleryHeader #spotHeroLikeBtn,
  html body #sidePanel.detail-panel.gallery-panel #galleryHeader #spotHeroLikeBtn:not(.active) {
    border: 0 !important;
    color: #fff !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader #spotHeroLikeBtn:not(.active) > i {
    color: #fff !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader #spotHeroLikeBtn.active,
  html body #sidePanel.detail-panel.gallery-panel #galleryHeader #spotHeroLikeBtn.active > i {
    color: #ff5260 !important;
    background: transparent !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero-location > .spot-hero-distance-badge {
    flex: 0 0 auto !important;
    min-height: 24px !important;
    padding: 4px 8px !important;
    border: 0 !important;
    border-radius: 999px !important;
    color: #fff !important;
    background: rgba(4, 8, 11, .62) !important;
    box-shadow: none !important;
    font: 720 9px/1 "Sora", sans-serif !important;
    -webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero-location > .spot-hero-distance-badge i {
    color: #fff !important;
    font-size: 9px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero-visitors {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center !important;
    gap: 7px !important;
    min-height: 34px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero-visitor-count {
    flex: 0 0 auto !important;
    color: #fff !important;
    font: 780 11px/1 "Sora", sans-serif !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero-avatar-stack {
    flex: 0 0 auto !important;
    padding-left: 6px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero-avatar-stack .avatar {
    width: 29px !important;
    min-width: 29px !important;
    height: 29px !important;
    margin-left: -6px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero-visitor-extra {
    display: grid !important;
    flex: 0 0 auto !important;
    min-width: 27px !important;
    height: 27px !important;
    padding: 0 4px !important;
    place-items: center !important;
    margin-left: -12px !important;
    border: 2px solid rgba(7, 12, 15, .96) !important;
    border-radius: 50% !important;
    color: #fff !important;
    background: #2a3338 !important;
    font: 750 8px/1 "Sora", sans-serif !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero-visitors-all {
    margin-left: auto !important;
    text-align: right !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spotastic-spot-overview {
    padding-top: 0 !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-detail-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: calc(100% + 8px) !important;
    min-height: 66px !important;
    margin: 0 -4px 24px !important;
    padding: 11px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .09) !important;
    background: transparent !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-detail-stats > span {
    position: relative !important;
    display: grid !important;
    grid-template-columns: auto auto !important;
    grid-template-rows: auto auto !important;
    align-content: center !important;
    justify-content: center !important;
    column-gap: 6px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-detail-stats > span + span::before {
    content: "" !important;
    position: absolute !important;
    top: 5px !important;
    bottom: 5px !important;
    left: 0 !important;
    width: 1px !important;
    background: rgba(255, 255, 255, .08) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-detail-stats i {
    grid-row: 1 / 3 !important;
    align-self: center !important;
    color: #ff705a !important;
    font-size: 14px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-detail-stats b {
    color: #f7f8f9 !important;
    font: 750 12px/1.1 "Sora", sans-serif !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-detail-stats small {
    color: #77838a !important;
    font: 600 7px/1.2 "Sora", sans-serif !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-reference-associations {
    display: grid !important;
    gap: 8px !important;
    margin: 17px 0 0 !important;
    padding: 15px 0 0 !important;
    border-top: 1px solid rgba(255, 255, 255, .07) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-reference-associations > small {
    color: #758188 !important;
    font: 700 8px/1 "Sora", sans-serif !important;
    letter-spacing: .09em !important;
    text-transform: uppercase !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-reference-associations .chip-scroll {
    display: flex !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 0 0 2px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-reference-associations .chip-scroll::-webkit-scrollbar {
    display: none !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-reference-associations .chip {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: 32px !important;
    padding: 0 10px !important;
    border: 0 !important;
    border-radius: 999px !important;
    color: #d9dee1 !important;
    background: rgba(255, 255, 255, .07) !important;
    box-shadow: none !important;
    font: 650 9px/1 "Sora", sans-serif !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-reference-associations .chip i {
    color: #ff705a !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity.card.media-card.spotastic-moments {
    width: calc(100% + 28px) !important;
    margin: 24px -14px 0 !important;
    padding: 0 0 18px !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-community-gallery-head {
    display: flex !important;
    align-items: end !important;
    justify-content: space-between !important;
    gap: 12px !important;
    min-height: 54px !important;
    padding: 0 18px 12px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-community-gallery-head > div {
    display: grid !important;
    gap: 3px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-community-gallery-head small {
    color: #ff705a !important;
    font: 750 7px/1 "Sora", sans-serif !important;
    letter-spacing: .11em !important;
    text-transform: uppercase !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-community-gallery-head h2 {
    margin: 0 !important;
    color: #fff !important;
    font: 740 17px/1.1 "Sora", sans-serif !important;
    letter-spacing: -.025em !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-community-gallery-head #communityAllBtn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    min-height: 32px !important;
    padding: 0 !important;
    border: 0 !important;
    color: #ff705a !important;
    background: transparent !important;
    box-shadow: none !important;
    font: 700 9px/1 "Sora", sans-serif !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .media-grid-wrapper {
    width: 100% !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .spotastic-media-wall.media-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 2px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .spotastic-media-wall > .grid-item,
  html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .spotastic-media-wall > .grid-item:first-child {
    position: relative !important;
    display: block !important;
    grid-column: auto !important;
    grid-row: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #151d21 !important;
    box-shadow: none !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .spotastic-media-wall > .grid-item > img,
  html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .spotastic-media-wall > .grid-item > .mini-thumb-fallback {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-community-media-stats {
    position: absolute !important;
    z-index: 4 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 30px !important;
    padding: 10px 7px 5px !important;
    color: #fff !important;
    background: linear-gradient(transparent, rgba(0, 0, 0, .74)) !important;
    font: 700 8px/1 "Sora", sans-serif !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .8) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-community-media-stats > span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-community-media-stats i {
    font-size: 8px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-community-more > img {
    opacity: .35 !important;
    filter: saturate(.55) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-community-more > b {
    position: absolute !important;
    z-index: 5 !important;
    inset: 0 !important;
    display: grid !important;
    place-items: center !important;
    color: #fff !important;
    font: 780 20px/1 "Sora", sans-serif !important;
    text-shadow: 0 2px 12px #000 !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .media-delete,
  html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .community-media-author,
  html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .badge {
    display: none !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .community-media-video {
    top: 7px !important;
    right: 7px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .spotastic-moment-add {
    width: calc(100% - 28px) !important;
    margin: 13px 14px 0 !important;
  }
}

/* -----------------------------------------------------------------
   SPOT DETAIL — fixed cover story (2026-08-29)
   The cover and its navigation are viewport chrome. Only #galleryList
   scrolls; this intentionally supersedes the older sticky-sheet rules.
   ----------------------------------------------------------------- */
@media (max-width: 768px) {
  html body #sidePanel.detail-panel.gallery-panel > .panel-scroller {
    display: grid !important;
    grid-template-rows: clamp(370px, 48dvh, 510px) minmax(0, 1fr) !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
    touch-action: pan-y !important;
    background: #060b0e !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader.panel-header {
    position: relative !important;
    inset: auto !important;
    z-index: 20 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 28px 28px 0 0 !important;
    transform: translateZ(0) !important;
    will-change: auto !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader.panel-header::after {
    display: none !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-overlay-top {
    position: absolute !important;
    inset: 0 0 auto !important;
    z-index: 2 !important;
    height: 32% !important;
    pointer-events: none !important;
    background: linear-gradient(180deg, rgba(1, 4, 6, .72), transparent) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-overlay-bottom {
    position: absolute !important;
    inset: auto 0 0 !important;
    z-index: 2 !important;
    height: 72% !important;
    pointer-events: none !important;
    background: linear-gradient(180deg, transparent, rgba(4, 8, 10, .96)) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero,
  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image {
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
    transform: none !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-identity {
    position: absolute !important;
    right: 18px !important;
    bottom: 18px !important;
    left: 18px !important;
    z-index: 30 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 9px !important;
    min-width: 0 !important;
    color: #fff !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-top .spot-hero-actions {
    position: relative !important;
    inset: auto !important;
    z-index: 1002 !important;
    display: block !important;
    flex: 0 0 46px !important;
    width: 46px !important;
    height: 46px !important;
    margin: 0 0 0 auto !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader #spotHeroMoreBtn {
    position: absolute !important;
    top: calc(15px + env(safe-area-inset-top, 0px)) !important;
    right: 16px !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 1004 !important;
    display: grid !important;
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    place-items: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    border: 0 !important;
    border-radius: 50% !important;
    color: #fff !important;
    background: rgba(6, 11, 14, .82) !important;
    box-shadow: 0 7px 20px rgba(0, 0, 0, .28) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    backdrop-filter: blur(12px) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero-category {
    display: inline-flex !important;
    align-self: flex-start !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: 25px !important;
    padding: 5px 9px !important;
    border: 1px solid rgba(255, 255, 255, .24) !important;
    border-radius: 999px !important;
    color: #ff745d !important;
    background: rgba(5, 9, 12, .42) !important;
    font: 750 9px/1 "Sora", sans-serif !important;
    letter-spacing: .105em !important;
    text-transform: uppercase !important;
    -webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero-heading {
    position: relative !important;
    display: block !important;
    align-items: center !important;
    min-width: 0 !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero-heading h1 {
    display: -webkit-box !important;
    min-width: 0 !important;
    max-height: 2.16em !important;
    margin: 0 !important;
    padding-right: 70px !important;
    overflow: hidden !important;
    color: #fff !important;
    font: 780 clamp(24px, 6.8vw, 32px)/1.06 "Sora", sans-serif !important;
    letter-spacing: -.045em !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    text-shadow: 0 3px 24px rgba(0, 0, 0, .72) !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader #spotHeroLikeBtn {
    position: absolute !important;
    top: auto !important;
    right: 18px !important;
    bottom: 102px !important;
    left: auto !important;
    z-index: 100 !important;
    display: grid !important;
    width: 58px !important;
    min-width: 58px !important;
    height: 58px !important;
    min-height: 58px !important;
    place-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    color: #ff6653 !important;
    background: rgba(6, 10, 13, .72) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .3) !important;
    font-size: 28px !important;
    -webkit-backdrop-filter: blur(12px) !important;
    backdrop-filter: blur(12px) !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader #spotHeroLikeBtn.active {
    background: rgba(255, 102, 83, .16) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader #spotHeroLikeBtn > i {
    display: block !important;
    color: #ff6653 !important;
    font-size: 28px !important;
    line-height: 1 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero-location {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-width: 0 !important;
    color: rgba(245, 247, 248, .88) !important;
    font: 520 11px/1.25 "Sora", sans-serif !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero-location > span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    min-width: 0 !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero-location > span:first-child {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero-location > span:last-child {
    flex: 0 0 auto !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero-location i {
    color: #d4dade !important;
    font-size: 12px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero-location em,
  html body #sidePanel.detail-panel.gallery-panel .spot-hero-location small {
    color: rgba(231, 235, 237, .68) !important;
    font: inherit !important;
    font-style: normal !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero-visitors {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #fff !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: left !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero-avatar-stack {
    display: flex !important;
    align-items: center !important;
    padding-left: 7px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero-avatar-stack:empty {
    display: none !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero-avatar-stack .avatar {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    margin-left: -7px !important;
    border: 2px solid rgba(7, 12, 15, .96) !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    font-size: 10px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero-visitor-copy {
    display: flex !important;
    min-width: 0 !important;
    flex-direction: column !important;
    gap: 3px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero-visitor-copy b {
    overflow: hidden !important;
    color: #fff !important;
    font: 650 10px/1.2 "Sora", sans-serif !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero-visitor-copy small {
    color: rgba(223, 228, 231, .6) !important;
    font: 500 8px/1.15 "Sora", sans-serif !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero-visitors-all {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    color: #ff735b !important;
    font: 700 9px/1 "Sora", sans-serif !important;
    white-space: nowrap !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryList.card-list.mobile-content {
    position: relative !important;
    inset: auto !important;
    z-index: 10 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 14px calc(42px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    touch-action: pan-y !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch !important;
    background: #060b0e !important;
    scrollbar-width: none !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryList.card-list.mobile-content::-webkit-scrollbar {
    display: none !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spotastic-spot-overview {
    width: 100% !important;
    margin: 0 !important;
    padding: 24px 4px 6px !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #f7f8f9 !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spotastic-section-title {
    margin: 0 0 9px !important;
    color: #fff !important;
    font: 700 17px/1.25 "Sora", sans-serif !important;
    letter-spacing: -.02em !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #spotDetailInfo {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    color: #b8c0c5 !important;
    background: transparent !important;
    font: 450 12px/1.65 "Sora", sans-serif !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-reference-publisher {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
    margin: 19px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-reference-publisher.has-club {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-reference-owner,
  html body #sidePanel.detail-panel.gallery-panel .spot-reference-club {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 9px !important;
    min-width: 0 !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #fff !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: left !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-reference-owner .avatar,
  html body #sidePanel.detail-panel.gallery-panel .spot-reference-club-avatar {
    display: grid !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    place-items: center !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 50% !important;
    color: #ff735b !important;
    background: rgba(255, 255, 255, .08) !important;
    object-fit: cover !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-reference-club-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-reference-owner > span,
  html body #sidePanel.detail-panel.gallery-panel .spot-reference-club > span:not(.spot-reference-club-avatar) {
    display: flex !important;
    min-width: 0 !important;
    flex-direction: column !important;
    gap: 3px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-reference-publisher small {
    color: #78848b !important;
    font: 600 8px/1 "Sora", sans-serif !important;
    letter-spacing: .05em !important;
    text-transform: uppercase !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-reference-publisher b {
    overflow: hidden !important;
    color: #eef1f2 !important;
    font: 650 10px/1.15 "Sora", sans-serif !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-reference-publisher em {
    color: #6f7b82 !important;
    font: 500 8px/1 "Sora", sans-serif !important;
    font-style: normal !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-reference-owner > i,
  html body #sidePanel.detail-panel.gallery-panel .spot-reference-club > i {
    color: #626e75 !important;
    font-size: 9px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spotastic-live-checkin-slot {
    margin-top: 15px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #checkinBar.spotastic-inline-checkin .checkin-cta {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 11px !important;
    min-height: 56px !important;
    color: #fff !important;
    background: linear-gradient(135deg, #ff6651, #ff493f) !important;
    font: 750 14px/1 "Sora", sans-serif !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #checkinBar.spotastic-inline-checkin .checkin-cta > i {
    display: grid !important;
    flex: 0 0 28px !important;
    width: 28px !important;
    height: 28px !important;
    place-items: center !important;
    margin: 0 !important;
    color: #fff !important;
    font-size: 22px !important;
    line-height: 1 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #checkinBar.spotastic-inline-checkin .checkin-cta > span {
    display: inline-flex !important;
    color: inherit !important;
  }
}

/* Must remain last: the cover-story guard above predates these controls. */
@media (max-width: 768px) {
  html body #sidePanel.detail-panel.gallery-panel #galleryHeader #spotHeroLikeBtn,
  html body #sidePanel.detail-panel.gallery-panel #galleryHeader #spotHeroLikeBtn:not(.active),
  html body #sidePanel.detail-panel.gallery-panel #galleryHeader #spotHeroLikeBtn.active {
    border: 0 !important;
    color: #fff !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader #spotHeroLikeBtn:not(.active) > i {
    color: #fff !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader #spotHeroLikeBtn.active,
  html body #sidePanel.detail-panel.gallery-panel #galleryHeader #spotHeroLikeBtn.active > i {
    color: #ff5260 !important;
    background: transparent !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero-visitors {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center !important;
    gap: 7px !important;
    min-height: 34px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero-avatar-stack .avatar {
    width: 29px !important;
    min-width: 29px !important;
    height: 29px !important;
    margin-left: -6px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero-visitors-all {
    margin-left: auto !important;
    text-align: right !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spotastic-spot-overview {
    padding-top: 0 !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-community-gallery-head #communityAllBtn {
    width: auto !important;
    min-width: max-content !important;
    white-space: nowrap !important;
  }

  html body .lightbox .media-comments-panel {
    z-index: 120 !important;
  }
}

/* Final cascade guard for the immersive Spot detail mechanics. */
@media (max-width: 768px) {
  html body #sidePanel.detail-panel.gallery-panel,
  html body #sidePanel.detail-panel.gallery-panel.open {
    min-width: 0 !important;
    max-width: none !important;
  }

  html body #sidePanel.detail-panel.gallery-panel > .panel-scroller.mobile-body {
    display: block !important;
    grid-template-rows: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: none !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader.panel-header {
    position: sticky !important;
    top: 0 !important;
    inset: 0 auto auto !important;
    height: var(--spot-hero-current-height) !important;
    min-height: 0 !important;
    max-height: none !important;
    border-radius: 0 !important;
    will-change: height !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image {
    transform: scale(var(--spot-hero-image-scale)) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-identity {
    right: var(--spot-hero-identity-right) !important;
    bottom: var(--spot-hero-identity-bottom) !important;
    left: var(--spot-hero-identity-left) !important;
    gap: var(--spot-hero-detail-gap, 9px) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero-category {
    max-height: var(--spot-hero-category-height, 24px) !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    font: 760 10px/1.2 "Sora", sans-serif !important;
    opacity: var(--spot-hero-detail-factor) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero-heading h1 {
    padding: 0 !important;
    font: 790 var(--spot-hero-title-size)/1.065 "Sora", sans-serif !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero-location {
    max-height: var(--spot-hero-location-height, 30px) !important;
    overflow: hidden !important;
    font: 520 12px/1.3 "Sora", sans-serif !important;
    opacity: var(--spot-hero-detail-factor) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero-location > .spot-hero-distance-badge {
    min-height: 24px !important;
    padding: 4px 8px !important;
    font: 650 10px/1 "Sora", sans-serif !important;
    text-shadow: none !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryList.card-list.mobile-content {
    height: auto !important;
    min-height: calc(var(--spot-hero-expanded-height, 100dvh) - var(--spot-hero-compact-height, 128px)) !important;
    margin: 0 !important;
    padding: var(--spot-hero-spacer-height) 14px calc(118px + env(safe-area-inset-bottom, 0px)) !important;
    overflow: visible !important;
    overscroll-behavior-y: auto !important;
    box-sizing: content-box !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spotastic-spot-overview {
    padding: 22px 4px 8px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #checkinBar.spotastic-inline-checkin .checkin-cta {
    min-height: 64px !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    padding: 9px 17px !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    border-radius: 20px !important;
    background: rgba(13, 19, 23, .94) !important;
    text-align: left !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #checkinBar.is-ready .checkin-cta {
    border-color: transparent !important;
    background: linear-gradient(135deg, #ff6852, #ff493f) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #checkinBar.spotastic-inline-checkin .checkin-cta > span {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-actions #spotHeroLikeBtn,
  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-actions #spotHeroLikeBtn.active,
  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-actions #spotHeroLikeBtn > i,
  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-actions #spotHeroLikeBtn.active > i {
    color: #fff !important;
    background: transparent !important;
  }
}

/* Final compact Spot-detail override; keep after every historical guard. */
@media (max-width: 768px) {
  html body #sidePanel.detail-panel.gallery-panel,
  html body #sidePanel.detail-panel.gallery-panel.open {
    --spot-hero-title-size: 34px;
    --spot-hero-identity-right: 96px;
    --spot-hero-actions-bottom: 180px;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-actions {
    gap: 5px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-actions #spotHeroMoreBtn,
  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-actions #spotHeroLikeBtn,
  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-actions #spotHeroLikeBtn:not(.active),
  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-actions #spotHeroLikeBtn.active {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-actions #spotHeroMoreBtn i {
    color: #fff !important;
    font-size: 20px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-actions #spotHeroLikeBtn i,
  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-actions #spotHeroLikeBtn:not(.active) i {
    color: #fff !important;
    font-size: 26px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-actions #spotHeroLikeBtn.active,
  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-actions #spotHeroLikeBtn.active > i {
    color: #ff5260 !important;
    background: transparent !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader :is(.spot-hero-back, .spot-hero-close) {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-actions-menu {
    bottom: calc(var(--spot-hero-actions-bottom) + 40px) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero-stats {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    width: 100% !important;
    max-height: var(--spot-hero-stats-height, 30px) !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: rgba(247, 249, 250, .94) !important;
    opacity: var(--spot-hero-detail-factor) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero-stats > span {
    display: inline-flex !important;
    min-width: 0 !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero-stats i {
    color: rgba(255, 255, 255, .9) !important;
    font-size: 10px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero-stats > span:first-child i {
    color: #ff5260 !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero-stats b {
    color: #fff !important;
    font: 720 11px/1 "Sora", sans-serif !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero-stats small {
    color: rgba(233, 237, 239, .68) !important;
    font: 560 9px/1 "Sora", sans-serif !important;
  }
}

/* Layout-stable Spot collapse: the flow stays fixed while only the cover animates. */
@media (max-width: 768px) {
  html body #sidePanel.detail-panel.gallery-panel,
  html body #sidePanel.detail-panel.gallery-panel.open {
    --spot-hero-title-size: 28px;
    --spot-hero-identity-bottom: 148px;
    --spot-hero-identity-right: 108px;
    --spot-hero-actions-bottom: 222px;
    --spot-hero-actions-right: 28px;
  }

  html body #sidePanel.detail-panel.gallery-panel > .panel-scroller.mobile-body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overflow-anchor: none !important;
    overscroll-behavior-y: contain !important;
    scroll-behavior: auto !important;
    scroll-snap-type: none !important;
    touch-action: pan-y !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader.panel-header {
    height: var(--spot-hero-compact-height, 128px) !important;
    overflow: visible !important;
    background: transparent !important;
    will-change: auto !important;
    overflow-anchor: none !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero {
    position: absolute !important;
    inset: 0 0 auto !important;
    width: 100% !important;
    height: var(--spot-hero-current-height, 100dvh) !important;
    min-height: var(--spot-hero-compact-height, 128px) !important;
    overflow: hidden !important;
    contain: layout paint style !important;
    transition: none !important;
    will-change: height !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryList.card-list.mobile-content {
    min-height: calc(var(--spot-hero-expanded-height, 100dvh) - var(--spot-hero-compact-height, 128px)) !important;
    padding: var(--spot-hero-content-offset, calc(100dvh - 128px)) 14px calc(118px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-anchor: none !important;
    touch-action: pan-y !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero-stats {
    gap: 18px !important;
    max-height: var(--spot-hero-stats-height, 22px) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero-stats i,
  html body #sidePanel.detail-panel.gallery-panel .spot-hero-stats > span:first-child i {
    color: #fff !important;
    font-size: 11px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero-stats > span.is-liked i {
    color: #ff5260 !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero-stats b {
    font-size: 11px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero-stats small {
    display: none !important;
  }

  /* Historical font shorthands replaced the Font Awesome family on some icons. */
  html body #sidePanel.detail-panel.gallery-panel i:is(.fa, .fas, .fa-solid) {
    font-family: "Font Awesome 6 Free" !important;
    font-style: normal !important;
    font-weight: 900 !important;
  }

  html body #sidePanel.detail-panel.gallery-panel i:is(.far, .fa-regular) {
    font-family: "Font Awesome 6 Free" !important;
    font-style: normal !important;
    font-weight: 400 !important;
  }

  html body #sidePanel.detail-panel.gallery-panel i:is(.fab, .fa-brands) {
    font-family: "Font Awesome 6 Brands" !important;
    font-style: normal !important;
    font-weight: 400 !important;
  }

  /* Explicitly cover the four destinations that still had older round controls. */
  html body #sidePanel:is(.clubs-panel, .feed-panel, .wishlist-panel, .trips-panel) #galleryHeader .trips-header-btn,
  html body .topbar .actions > :is(#btnClubs, #btnTrips, #btnWishlist),
  html body .mobile-nav .nav-btn .nav-ico {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html body #sidePanel:is(.clubs-panel, .feed-panel, .wishlist-panel, .trips-panel) #galleryHeader .trips-header-btn > i,
  html body .topbar .actions > :is(#btnClubs, #btnTrips, #btnWishlist) > i,
  html body .mobile-nav .nav-btn .nav-ico > i {
    font-size: 21px !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .72) !important;
  }

  html body :is(
    .mobile-actions .action-btn,
    .trips-header-btn,
    button.icon-btn,
    .lightbox-close,
    .postcard-viewer-close,
    .postcard-more,
    .postcard-share,
    .lb-more-btn,
    .spotastic-camera-top,
    .spotastic-wizard-back,
    .spotastic-wizard-close,
    .gs-onboarding-round-button,
    .collections-overview-close,
    .trip-share-close,
    .spotastic-report-close,
    .spotastic-insights-x,
    .spotastic-form-back,
    .spotastic-map-card-more,
    .spot-hero-back,
    .spot-hero-close,
    .spotastic-showcase-header button,
    #navOverlay .nav-close,
    #checkinBack,
    #checkinClose
  ) > i:first-child {
    font-size: 21px !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .72) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-actions #spotHeroMoreBtn i {
    font-size: 19px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-actions #spotHeroLikeBtn i {
    font-size: 25px !important;
  }
}

/* Final WKWebView touch and Spot-header guard. Keep this at EOF. */
@media (max-width: 768px) {
  /* Every page panel shares the same body. Freezing the fixed body must not
     disable the native scroller in the next panel lifecycle. */
  html body.panel-open,
  html body.panel-open #sidePanel > .panel-scroller {
    touch-action: pan-y !important;
  }

  /* The visual cover keeps one immutable layout size. Collapse only changes
     its compositor clip and transforms, avoiding a full layout on each frame. */
  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero {
    height: var(--spot-hero-expanded-height, 100dvh) !important;
    min-height: var(--spot-hero-expanded-height, 100dvh) !important;
    clip-path: inset(0 0 var(--spot-hero-clip-bottom, 0px) 0) !important;
    contain: paint style !important;
    transition: none !important;
    will-change: clip-path !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image {
    transform: translate3d(0, var(--spot-hero-image-shift-y, 0px), 0) scale(var(--spot-hero-image-scale)) !important;
    will-change: transform, opacity !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero > .spot-hero-image-next.from-right {
    transform: translate3d(16%, var(--spot-hero-image-shift-y, 0px), 0) scale(var(--spot-hero-image-scale)) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero > .spot-hero-image-next.from-left {
    transform: translate3d(-16%, var(--spot-hero-image-shift-y, 0px), 0) scale(var(--spot-hero-image-scale)) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero > .spot-hero-image-next.is-active,
  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero > #spotHeroImg.is-swap-commit {
    transform: translate3d(0, var(--spot-hero-image-shift-y, 0px), 0) scale(var(--spot-hero-image-scale)) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero > #spotHeroImg.is-sliding.to-left {
    transform: translate3d(-10%, var(--spot-hero-image-shift-y, 0px), 0) scale(var(--spot-hero-image-scale)) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero > #spotHeroImg.is-sliding.to-right {
    transform: translate3d(10%, var(--spot-hero-image-shift-y, 0px), 0) scale(var(--spot-hero-image-scale)) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-identity {
    top: var(--spot-hero-identity-base-top, calc(100dvh - 282px)) !important;
    bottom: auto !important;
    opacity: var(--spot-hero-expanded-opacity, 1) !important;
    transform: translate3d(var(--spot-hero-identity-shift-x, 0px), var(--spot-hero-identity-shift-y, 0px), 0) !important;
    will-change: transform, opacity !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-actions {
    top: var(--spot-hero-actions-base-top, calc(100dvh - 297px)) !important;
    bottom: auto !important;
    transform: translate3d(var(--spot-hero-actions-shift-x, 0px), var(--spot-hero-actions-shift-y, 0px), 0) !important;
    will-change: transform !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-actions-menu {
    top: var(--spot-hero-menu-base-top, calc(100dvh - 249px)) !important;
    bottom: auto !important;
    transform: translate3d(var(--spot-hero-actions-shift-x, 0px), var(--spot-hero-actions-shift-y, 0px), 0) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-compact-title {
    position: absolute !important;
    top: var(--spot-hero-compact-title-top, calc(12px + env(safe-area-inset-top, 0px) + 12px)) !important;
    right: var(--spot-hero-compact-title-right, 166px) !important;
    left: var(--spot-hero-compact-title-left, 70px) !important;
    z-index: 122 !important;
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    color: #fff !important;
    opacity: var(--spot-hero-compact-opacity, 0) !important;
    transform: translate3d(0, var(--spot-hero-compact-title-shift-y, 7px), 0) !important;
    will-change: transform, opacity !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-compact-title > span {
    display: block !important;
    overflow: hidden !important;
    color: inherit !important;
    font: 790 17px/1.065 "Sora", sans-serif !important;
    letter-spacing: -.035em !important;
    text-overflow: ellipsis !important;
    text-shadow: 0 3px 18px rgba(0, 0, 0, .8) !important;
    white-space: nowrap !important;
  }

  html body.panel-open.spot-detail-open {
    touch-action: pan-y !important;
  }

  html body.panel-open.spot-detail-open #sidePanel.gallery-panel,
  html body.panel-open.spot-detail-open #sidePanel.gallery-panel > .panel-scroller.mobile-body,
  html body.panel-open.spot-detail-open #sidePanel.gallery-panel #galleryHeader,
  html body.panel-open.spot-detail-open #sidePanel.gallery-panel .spot-hero,
  html body.panel-open.spot-detail-open #sidePanel.gallery-panel #galleryList.mobile-content {
    touch-action: pan-y !important;
  }

  html body #sidePanel.detail-panel.gallery-panel,
  html body #sidePanel.detail-panel.gallery-panel.open {
    --spot-hero-title-size: 28px;
    --spot-hero-identity-bottom: 148px;
    --spot-hero-identity-left: 20px;
    --spot-hero-identity-right: 20px;
    --spot-hero-actions-bottom: 270px;
    --spot-hero-actions-right: 24px;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-top {
    right: 16px !important;
    left: 16px !important;
    height: 42px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader :is(.spot-hero-back, .spot-hero-close),
  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-actions #spotHeroMoreBtn,
  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-actions #spotHeroLikeBtn,
  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-actions #spotHeroLikeBtn:not(.active),
  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-actions #spotHeroLikeBtn.active {
    flex: 0 0 42px !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-actions {
    gap: 8px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader :is(.spot-hero-back, .spot-hero-close) i,
  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-actions :is(#spotHeroMoreBtn, #spotHeroLikeBtn) i {
    font-size: 20px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader #spotHeroLikeBtn i {
    font-size: 23px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image {
    transition: transform .34s cubic-bezier(.2, .78, .24, 1), opacity .28s ease !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-next {
    z-index: 1 !important;
    opacity: 0 !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-next.from-right {
    transform: translate3d(16%, 0, 0) scale(var(--spot-hero-image-scale)) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-next.from-left {
    transform: translate3d(-16%, 0, 0) scale(var(--spot-hero-image-scale)) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-next.is-active {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) scale(var(--spot-hero-image-scale)) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader #spotHeroImg.is-sliding.to-left {
    opacity: .18 !important;
    transform: translate3d(-10%, 0, 0) scale(var(--spot-hero-image-scale)) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader #spotHeroImg.is-sliding.to-right {
    opacity: .18 !important;
    transform: translate3d(10%, 0, 0) scale(var(--spot-hero-image-scale)) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #checkinBar.spotastic-inline-checkin .checkin-cta {
    gap: 13px !important;
    padding: 11px 14px 11px 16px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #checkinBar.spotastic-inline-checkin .checkin-cta > i {
    align-self: center !important;
    flex-basis: 40px !important;
    width: 40px !important;
    height: 40px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #checkinBar.spotastic-inline-checkin .checkin-cta > span {
    flex: 1 1 auto !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #checkinBar .checkin-route-badge {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    gap: 5px !important;
    min-height: 28px !important;
    padding: 0 9px !important;
    border: 1px solid rgba(255, 255, 255, .15) !important;
    border-radius: 999px !important;
    color: rgba(255, 255, 255, .92) !important;
    background: rgba(255, 255, 255, .08) !important;
    font: 680 9px/1 "Sora", sans-serif !important;
    font-style: normal !important;
    white-space: nowrap !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #checkinBar .checkin-route-badge i {
    color: inherit !important;
    font-size: 10px !important;
  }
}

/* Absolute final precedence for the current Spot detail composition. */
@media (max-width: 768px) {
  html body #sidePanel.detail-panel.gallery-panel #galleryList.card-list.mobile-content {
    box-sizing: border-box !important;
    min-height: calc(var(--spot-hero-expanded-height, 100dvh) + var(--spot-hero-content-offset, calc(100dvh - 116px)) - var(--spot-hero-compact-height, 116px)) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-detail-sticky-stats {
    width: calc(100% + 28px) !important;
    max-width: none !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-overlay-bottom {
    transform: translate3d(0, var(--spot-hero-gradient-shift-y, 0px), 0) scaleY(var(--spot-hero-gradient-scale-y, 1)) !important;
    transform-origin: center bottom !important;
    will-change: transform !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero-stats {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 18px !important;
    width: auto !important;
    max-width: 100% !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-hero-stats > span {
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-stats > .spot-rating-stat i,
  html body #sidePanel.detail-panel.gallery-panel .spot-detail-sticky-stats > .spot-rating-stat i {
    color: #ffc857 !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-actions {
    opacity: var(--spot-hero-actions-opacity, 1) !important;
    will-change: transform, opacity !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spotastic-spot-overview {
    margin-top: 0 !important;
    padding-top: 24px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity.card.media-card.spotastic-moments,
  html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .media-grid-wrapper,
  html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .spotastic-media-wall,
  html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .spotastic-media-wall > .grid-item,
  html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .spotastic-media-wall > .grid-item > img,
  html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .mini-thumb-fallback {
    border-radius: 0 !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #checkinBar.is-ready .checkin-cta > i {
    display: grid !important;
    place-items: center !important;
    color: #ff5947 !important;
    background: #fff !important;
    font-family: "Font Awesome 6 Free" !important;
    font-style: normal !important;
    font-weight: 900 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Spot detail sections follow the typography and spacing of Entdecken. */
  html body #sidePanel.detail-panel.gallery-panel .spot-detail-section {
    display: grid !important;
    gap: 19px !important;
    width: 100% !important;
    margin: 42px 0 0 !important;
    padding: 0 4px !important;
    border: 0 !important;
    background: transparent !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-detail-section-head {
    display: flex !important;
    min-height: 0 !important;
    align-items: end !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 3px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-detail-section-head > div {
    display: grid !important;
    gap: 3px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-detail-section-head small {
    color: var(--accent, #ff6b4a) !important;
    font: 850 9px/1 "Sora", sans-serif !important;
    letter-spacing: .15em !important;
    text-transform: uppercase !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-detail-section-head h2 {
    margin: 3px 0 0 !important;
    color: #fff !important;
    font: 750 19px/1.15 "Sora", sans-serif !important;
    letter-spacing: -.025em !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-detail-info-section .spotastic-spot-overview {
    margin: 0 !important;
    padding: 0 3px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-detail-publisher-section .spot-reference-publisher,
  html body #sidePanel.detail-panel.gallery-panel .spot-detail-visit-section .spotastic-last-visit {
    margin: 0 !important;
  }

  html body #sidePanel.detail-panel.gallery-panel .spot-reference-associations.spot-detail-section {
    gap: 19px !important;
    margin-top: 42px !important;
    padding: 0 4px !important;
    border-top: 0 !important;
  }

  /* The gallery is an edge-to-edge profile-style grid. Legacy carousel rules
     must not constrain the card or reintroduce rounded image corners. */
  html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity.card.media-card.spotastic-moments {
    width: calc(100% + 28px) !important;
    max-width: none !important;
    margin: 42px -14px 0 !important;
    padding: 0 0 18px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .spot-community-gallery-head {
    padding: 0 18px 13px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .media-grid-wrapper {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .spotastic-media-wall.media-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    gap: 2px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .spotastic-media-wall > .grid-item,
  html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .spotastic-media-wall > .grid-item:first-child,
  html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .spotastic-media-wall > .grid-item.more {
    display: block !important;
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #151d21 !important;
    box-shadow: none !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity :is(
    .grid-item,
    .grid-item > img,
    .grid-item > video,
    .mini-thumb-fallback,
    .reported-blur-target
  ) {
    border-radius: 0 !important;
    clip-path: none !important;
    -webkit-mask: none !important;
    mask: none !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .spotastic-media-wall > .grid-item > :is(img, video, .mini-thumb-fallback) {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .community-media-video {
    position: absolute !important;
    inset: 50% auto auto 50% !important;
    display: grid !important;
    width: 38px !important;
    height: 38px !important;
    place-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .community-media-video > i {
    display: block !important;
    margin: 0 !important;
    transform: translateX(1px) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .spot-community-add-tile {
    display: flex !important;
    min-width: 0 !important;
    min-height: calc((100vw - 4px) / 3) !important;
    height: auto !important;
    aspect-ratio: auto !important;
    align-self: stretch !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 12px !important;
    border: 1px dashed rgba(255, 107, 74, .58) !important;
    border-radius: 0 !important;
    color: #fff !important;
    background: rgba(255, 107, 74, .075) !important;
    text-align: left !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .spot-community-add-tile.span-2 {
    grid-column: span 2 !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .spot-community-add-tile.span-3 {
    grid-column: span 3 !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .spot-community-add-tile > i {
    color: var(--accent, #ff6b4a) !important;
    font-size: 21px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .spot-community-add-tile > span {
    display: grid !important;
    gap: 3px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .spot-community-add-tile b {
    color: #fff !important;
    font: 750 11px/1.1 "Sora", sans-serif !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .spot-community-add-tile small {
    color: var(--accent, #ff6b4a) !important;
    font: 700 8px/1 "Sora", sans-serif !important;
  }

  /* Higher specificity than the historical generic .grid-item rules. */
  html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .spotastic-media-wall > .grid-item.spot-community-add-tile {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: calc((100vw - 4px) / 3) !important;
    height: auto !important;
    aspect-ratio: auto !important;
    align-self: stretch !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 12px !important;
    border: 1px dashed rgba(255, 107, 74, .58) !important;
    border-radius: 0 !important;
    color: #fff !important;
    background: rgba(255, 107, 74, .075) !important;
    text-align: left !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .spotastic-media-wall > .grid-item.spot-community-add-tile.span-2 {
    grid-column: span 2 !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .spotastic-media-wall > .grid-item.spot-community-add-tile.span-3 {
    grid-column: span 3 !important;
  }

  /* The compact header already has the sticky like action below it. */
  html body #sidePanel.detail-panel.gallery-panel #galleryHeader #spotHeroLikeBtn {
    opacity: var(--spot-hero-header-like-opacity, 1) !important;
    transform: scale(var(--spot-hero-header-like-opacity, 1)) !important;
    transform-origin: center !important;
    will-change: opacity, transform !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-stats > .spot-rating-stat i,
  html body #sidePanel.detail-panel.gallery-panel .spot-detail-sticky-stats > .spot-rating-stat i {
    color: var(--accent, #ff6b4a) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #checkinBar.spotastic-inline-checkin .checkin-cta {
    min-height: 68px !important;
    gap: 14px !important;
    padding: 10px 16px !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #checkinBar.spotastic-inline-checkin .checkin-cta > i,
  html body #sidePanel.detail-panel.gallery-panel #checkinBar.is-ready .checkin-cta > i {
    display: grid !important;
    flex: 0 0 42px !important;
    width: 42px !important;
    height: 42px !important;
    place-items: center !important;
    align-self: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    font-size: 18px !important;
    line-height: 1 !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #checkinBar.spotastic-inline-checkin .checkin-cta > i::before {
    display: block !important;
    transform: translateY(-.5px) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #checkinBar.spotastic-inline-checkin .checkin-cta b {
    font: 760 15px/1.12 "Sora", sans-serif !important;
    letter-spacing: -.015em !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #checkinBar.spotastic-inline-checkin .checkin-cta small {
    font: 540 10px/1.2 "Sora", sans-serif !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #checkinBar.spotastic-inline-checkin.is-too-far .checkin-cta {
    border-color: rgba(255, 107, 74, .72) !important;
    box-shadow: 0 13px 34px rgba(0, 0, 0, .42), inset 0 0 0 1px rgba(255, 107, 74, .08) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #checkinBar.is-ready .checkin-cta {
    justify-content: center !important;
    text-align: center !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #checkinBar.is-ready .checkin-cta > span {
    flex: 0 1 auto !important;
    align-items: center !important;
    text-align: center !important;
  }
}

/* The root header participates in the Trips scroller, so content only needs
   its normal page inset below it (the earlier fullscreen shell reserved space
   for the former map-level header). */
@media (max-width: 768px) {
  html body.trips-embedded-open #sidePanel.trips-panel > .panel-scroller {
    padding-bottom: 0 !important;
  }

  html body.trips-embedded-root.trips-embedded-open #sidePanel.trips-panel #galleryList.trips-root-list {
    min-height: calc(100dvh - 122px - env(safe-area-inset-top, 0px)) !important;
    padding: 16px 14px calc(112px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* 2026-08-31 · Trip/Club finishing pass: remove the inherited sheet handle,
   keep form controls above the software keyboard and make both destinations
   use deterministic viewport geometry. */
@media (max-width: 768px) {
  html body.trips-detail-open #sidePanel.trips-panel #galleryHeader.trips-detail-overlay-header,
  html body.trips-detail-open #sidePanel.trips-panel #galleryHeader.trips-detail-overlay-header .trips-header-inner,
  html body.trips-detail-open #sidePanel.trips-panel #galleryHeader.trips-detail-overlay-header .trips-header-row {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.trips-detail-open #sidePanel.trips-panel #galleryHeader.trips-detail-overlay-header::before,
  html body.trips-detail-open #sidePanel.trips-panel #galleryHeader.trips-detail-overlay-header::after,
  html body.trips-detail-open #sidePanel.trips-panel #galleryHeader.trips-detail-overlay-header .trips-header-inner::before,
  html body.trips-detail-open #sidePanel.trips-panel #galleryHeader.trips-detail-overlay-header .trips-header-inner::after {
    content: none !important;
    display: none !important;
  }

  html body.trips-detail-open #sidePanel.trips-panel .trips-detail-right {
    align-items: center !important;
    gap: 3px !important;
    overflow: visible !important;
  }

  html body.trips-detail-open #sidePanel.trips-panel .trips-detail-right .trip-card-btn {
    flex: 0 0 42px !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    outline: 0 !important;
    background: transparent !important;
    color: #fff !important;
    font-size: 18px !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .75) !important;
    box-shadow: none !important;
  }

  html body.trips-detail-open #sidePanel.trips-panel .trips-detail-right .trip-card-btn.danger {
    color: var(--accent, #ff6b4a) !important;
  }

  html body.trips-embedded-root #sidePanel.trips-panel .trip-card-meta {
    width: 100% !important;
    min-height: 27px !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 9px !important;
  }

  html body.trips-embedded-root #sidePanel.trips-panel .trip-card-meta .pill {
    box-sizing: border-box !important;
    height: 27px !important;
    min-height: 27px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    border-radius: 999px !important;
    font: 700 8px/1 "Sora", sans-serif !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body.trips-embedded-root #sidePanel.trips-panel .trip-card-meta .pill-trip {
    min-width: 0 !important;
    justify-self: stretch !important;
  }

  html body.trips-embedded-root #sidePanel.trips-panel .trip-card-meta .pill:last-child {
    justify-self: end !important;
  }

  .modal.spotastic-keyboard-sheet:not(.spotastic-spot-edit-modal):not(.spotastic-checkin-active):not(.spotastic-onboarding-modal) {
    position: fixed !important;
    inset: var(--gs-modal-viewport-top, 0px) 0 auto !important;
    width: 100vw !important;
    height: var(--gs-modal-viewport-height, 100dvh) !important;
    min-height: 0 !important;
    padding: 10px 10px max(10px, env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
    align-items: flex-end !important;
    overflow: hidden !important;
  }

  .modal.spotastic-keyboard-sheet:not(.spotastic-spot-edit-modal):not(.spotastic-checkin-active):not(.spotastic-onboarding-modal) > .modal-content {
    width: min(520px, 100%) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(var(--gs-modal-viewport-height, 100dvh) - 20px) !important;
    margin: auto auto 0 !important;
    padding-bottom: max(14px, env(safe-area-inset-bottom, 0px)) !important;
    overflow: hidden !important;
  }

  .modal.spotastic-keyboard-sheet:not(.spotastic-spot-edit-modal):not(.spotastic-checkin-active):not(.spotastic-onboarding-modal) #modalBody {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: calc(var(--gs-modal-viewport-height, 100dvh) - 48px) !important;
    padding-bottom: 8px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .modal.spotastic-keyboard-sheet:not(.spotastic-spot-edit-modal):not(.spotastic-checkin-active):not(.spotastic-onboarding-modal) #modalBody::-webkit-scrollbar {
    display: none !important;
  }

  .modal.trip-share-modal-open #modalBody {
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-x: none !important;
    touch-action: pan-y !important;
  }

  .modal.trip-share-modal-open .trip-share-modal,
  .modal.trip-share-modal-open .trip-share-modal > *,
  .modal.trip-share-modal-open .trip-share-card,
  .modal.trip-share-modal-open .trip-share-link-wrap,
  .modal.trip-share-modal-open .trip-share-member-list,
  .modal.trip-share-modal-open .trip-share-member {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overscroll-behavior-x: none !important;
  }

  .modal.trip-share-modal-open .trip-share-modal {
    overflow-x: hidden !important;
    touch-action: pan-y !important;
  }

  .modal.trip-share-modal-open .trip-share-link-wrap .input {
    width: 100% !important;
    min-width: 0 !important;
  }

  html body #sidePanel.clubs-panel.open,
  html body #sidePanel.clubs-panel.open.peek,
  html body #sidePanel.clubs-panel.open.expanded {
    position: fixed !important;
    inset: 0 !important;
    z-index: 880 !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #071014 !important;
    translate: none !important;
    transform: none !important;
  }

  html body #sidePanel.clubs-panel.open > .panel-scroller {
    width: 100% !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
  }

  html body #sidePanel.clubs-panel.open #galleryList {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html body #sidePanel.clubs-panel.open #galleryList::-webkit-scrollbar {
    display: none !important;
  }
}

/* 2026-08-31 · Photo check-in alignment, image-led Club detail and reliable
   compact Spot header hit targets. */
@media (max-width: 768px) {
  .modal.spotastic-photo-checkin-modal .spotastic-exif-checkin {
    display: flex !important;
    min-height: 100% !important;
    flex-direction: column !important;
    padding: 0 18px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .modal.spotastic-photo-checkin-modal .spotastic-modal-topbar {
    width: calc(100% + 36px) !important;
    min-height: calc(68px + env(safe-area-inset-top, 0px)) !important;
    margin: 0 -18px 12px !important;
    padding: env(safe-area-inset-top, 0px) 12px 0 !important;
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) 48px !important;
    align-items: center !important;
    background: linear-gradient(180deg, rgba(8, 13, 16, .99) 0%, rgba(8, 13, 16, .88) 72%, rgba(8, 13, 16, 0) 100%) !important;
  }

  .modal.spotastic-photo-checkin-modal .spotastic-modal-brand {
    grid-column: 2 !important;
    justify-self: center !important;
    margin: 0 !important;
    font-size: 23px !important;
  }

  .modal.spotastic-photo-checkin-modal .spotastic-modal-topbar-close {
    grid-column: 3 !important;
    justify-self: end !important;
    width: 48px !important;
    height: 48px !important;
    font-size: 22px !important;
  }

  .modal.spotastic-photo-checkin-modal .spotastic-exif-head {
    width: 100% !important;
    max-width: 360px !important;
    margin: 10px auto 22px !important;
    display: grid !important;
    justify-items: center !important;
    gap: 12px !important;
    text-align: center !important;
  }

  .modal.spotastic-photo-checkin-modal .spotastic-exif-head > i {
    width: 60px !important;
    height: 60px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    color: var(--accent, #ff6b4a) !important;
    background: rgba(255, 107, 74, .14) !important;
    font-size: 25px !important;
  }

  .modal.spotastic-photo-checkin-modal .spotastic-exif-head > div {
    display: grid !important;
    justify-items: center !important;
    gap: 5px !important;
  }

  .modal.spotastic-photo-checkin-modal .spotastic-exif-kicker {
    color: var(--accent, #ff6b4a) !important;
    font: 850 9px/1 "Sora", sans-serif !important;
    letter-spacing: .15em !important;
  }

  .modal.spotastic-photo-checkin-modal .spotastic-exif-head h3 {
    max-width: 320px !important;
    margin: 0 !important;
    color: #fff !important;
    font: 820 25px/1.08 "Sora", sans-serif !important;
    letter-spacing: -.035em !important;
  }

  .modal.spotastic-photo-checkin-modal .spotastic-exif-head p {
    max-width: 340px !important;
    margin: 0 !important;
    color: #929ba1 !important;
    font: 600 12px/1.45 "Sora", sans-serif !important;
  }

  .modal.spotastic-photo-checkin-modal .spotastic-exif-spot {
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 92px !important;
    margin: 0 !important;
    padding: 10px !important;
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 13px !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    border-radius: 20px !important;
    background: #11191e !important;
    text-align: left !important;
  }

  .modal.spotastic-photo-checkin-modal .spotastic-exif-spot > img,
  .modal.spotastic-photo-checkin-modal .spotastic-exif-spot > .spotastic-no-photo {
    width: 72px !important;
    height: 72px !important;
    border-radius: 16px !important;
  }

  .modal.spotastic-photo-checkin-modal .spotastic-exif-spot-copy {
    min-width: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  .modal.spotastic-photo-checkin-modal .spotastic-exif-spot-copy b {
    max-width: 100% !important;
    overflow: hidden !important;
    color: #fff !important;
    font: 780 16px/1.18 "Sora", sans-serif !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .modal.spotastic-photo-checkin-modal .spotastic-exif-spot-copy small {
    margin-top: 5px !important;
    color: #8e989e !important;
    font: 580 10px/1.4 "Sora", sans-serif !important;
  }

  .modal.spotastic-photo-checkin-modal .spotastic-exif-preview {
    width: 100% !important;
    min-height: 210px !important;
    max-height: 34dvh !important;
    margin: 16px 0 0 !important;
    border-radius: 18px !important;
  }

  .modal.spotastic-photo-checkin-modal .spotastic-exif-steps {
    width: 100% !important;
    margin: 22px 0 14px !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
  }

  .modal.spotastic-photo-checkin-modal .spotastic-exif-steps span,
  .modal.spotastic-photo-checkin-modal .spotastic-exif-steps span.active,
  .modal.spotastic-photo-checkin-modal .spotastic-exif-steps span.done {
    position: relative !important;
    min-width: 0 !important;
    padding: 0 3px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #8e989e !important;
    background: transparent !important;
    font: 700 9px/1.2 "Sora", sans-serif !important;
    text-align: center !important;
  }

  .modal.spotastic-photo-checkin-modal .spotastic-exif-steps span:not(:last-child)::after {
    content: "" !important;
    position: absolute !important;
    z-index: 0 !important;
    top: 21px !important;
    left: calc(50% + 25px) !important;
    width: calc(100% - 50px) !important;
    height: 1px !important;
    background: rgba(255, 255, 255, .14) !important;
  }

  .modal.spotastic-photo-checkin-modal .spotastic-exif-steps i {
    position: relative !important;
    z-index: 1 !important;
    width: 42px !important;
    height: 42px !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid rgba(255, 255, 255, .13) !important;
    border-radius: 50% !important;
    color: #a5adb2 !important;
    background: #11191e !important;
    font-size: 15px !important;
  }

  .modal.spotastic-photo-checkin-modal .spotastic-exif-steps span.active,
  .modal.spotastic-photo-checkin-modal .spotastic-exif-steps span.done {
    color: #fff !important;
  }

  .modal.spotastic-photo-checkin-modal .spotastic-exif-steps span.active i {
    border-color: rgba(255, 107, 74, .6) !important;
    color: var(--accent, #ff6b4a) !important;
    background: rgba(255, 107, 74, .13) !important;
  }

  .modal.spotastic-photo-checkin-modal .spotastic-exif-steps span.done i {
    border-color: rgba(169, 227, 77, .42) !important;
    color: #c8ff68 !important;
    background: rgba(169, 227, 77, .1) !important;
  }

  .modal.spotastic-photo-checkin-modal #btnPickCheckinPhoto {
    width: 100% !important;
    min-height: 60px !important;
    margin: 8px 0 0 !important;
    border: 0 !important;
    border-radius: 20px !important;
    font: 820 15px/1 "Sora", sans-serif !important;
  }

  .modal.spotastic-photo-checkin-modal #photoCheckinStatus {
    min-height: 22px !important;
    margin: 8px 0 0 !important;
    text-align: center !important;
  }

  html body #sidePanel.clubs-panel #galleryHeader.clubs-detail-overlay-header {
    position: absolute !important;
    inset: 0 0 auto !important;
    z-index: 100 !important;
    width: 100% !important;
    height: calc(78px + env(safe-area-inset-top, 0px)) !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: none !important;
  }

  html body #sidePanel.clubs-panel #galleryHeader.clubs-detail-overlay-header::before,
  html body #sidePanel.clubs-panel #galleryHeader.clubs-detail-overlay-header::after,
  html body #sidePanel.clubs-panel #galleryHeader.clubs-detail-overlay-header .clubs-header-inner::before,
  html body #sidePanel.clubs-panel #galleryHeader.clubs-detail-overlay-header .clubs-header-inner::after {
    content: none !important;
    display: none !important;
  }

  html body #sidePanel.clubs-panel #galleryHeader.clubs-detail-overlay-header .clubs-header-inner,
  html body #sidePanel.clubs-panel #galleryHeader.clubs-detail-overlay-header .trips-header-row {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body #sidePanel.clubs-panel #galleryHeader.clubs-detail-overlay-header .trips-header-row {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 8px !important;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 0 !important;
  }

  html body #sidePanel.clubs-panel #galleryHeader.clubs-detail-overlay-header .clubs-detail-title-spacer {
    display: block !important;
    min-width: 0 !important;
    height: 1px !important;
  }

  html body #sidePanel.clubs-panel #galleryHeader.clubs-detail-overlay-header .trips-header-actions {
    width: auto !important;
    min-width: 46px !important;
    display: flex !important;
    align-items: center !important;
    justify-self: end !important;
    gap: 2px !important;
  }

  html body #sidePanel.clubs-panel #galleryHeader.clubs-detail-overlay-header .trips-header-btn {
    flex: 0 0 46px !important;
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    color: #fff !important;
    background: transparent !important;
    font-size: 20px !important;
    text-shadow: 0 2px 9px rgba(0, 0, 0, .94) !important;
    box-shadow: none !important;
    pointer-events: auto !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list {
    display: block !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 0 calc(116px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scroll-padding-top: calc(72px + env(safe-area-inset-top, 0px)) !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list > .club-detail {
    width: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 0 28px !important;
    overflow: visible !important;
    background: #071014 !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-hero {
    position: relative !important;
    width: 100% !important;
    height: clamp(330px, 46dvh, 420px) !important;
    min-height: 330px !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #11191e !important;
    box-shadow: none !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-hero-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    object-fit: cover !important;
    transform: none !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-hero-img.placeholder {
    background: radial-gradient(circle at 22% 20%, color-mix(in srgb, var(--club-accent) 50%, #25333a), #071014 72%) !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-hero-shade {
    position: absolute !important;
    z-index: 1 !important;
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(2, 5, 7, .52) 0%, rgba(2, 5, 7, .04) 30%, rgba(7, 16, 20, .18) 56%, #071014 100%) !important;
    pointer-events: none !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-hero-copy {
    position: absolute !important;
    z-index: 2 !important;
    inset: auto 0 0 !important;
    padding: 86px 18px 24px !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-hero-kicker {
    display: block !important;
    margin: 0 0 9px !important;
    color: var(--accent, #ff6b4a) !important;
    font: 850 10px/1 "Sora", sans-serif !important;
    letter-spacing: .16em !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-hero-title-row {
    display: flex !important;
    min-width: 0 !important;
    align-items: center !important;
    gap: 13px !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-icon-wrap {
    position: relative !important;
    flex: 0 0 58px !important;
    width: 58px !important;
    height: 58px !important;
    margin: 0 !important;
    border: 2px solid rgba(255, 255, 255, .88) !important;
    border-radius: 17px !important;
    background: #11191e !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .32) !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-hero-title-copy {
    min-width: 0 !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-name {
    max-width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: #fff !important;
    font: 820 clamp(27px, 8vw, 38px)/1.05 "Sora", sans-serif !important;
    letter-spacing: -.045em !important;
    text-align: left !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-hero-title-copy small {
    display: block !important;
    margin-top: 6px !important;
    color: rgba(255, 255, 255, .74) !important;
    font: 620 10px/1.2 "Sora", sans-serif !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-desc {
    max-width: none !important;
    margin: 0 !important;
    padding: 22px 16px 10px !important;
    color: #aab1b5 !important;
    font: 570 12px/1.55 "Sora", sans-serif !important;
    text-align: left !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-stats {
    justify-content: flex-start !important;
    margin: 12px 16px !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-actions {
    justify-content: flex-start !important;
    margin: 12px 16px !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-exclusive-notice {
    margin-right: 16px !important;
    margin-left: 16px !important;
  }

  /* The collapsed More-actions container remains wider after its Like child
     disappears. Keep the top navigation in the higher stacking context so X
     is still the hit target at maximum scroll. */
  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-top {
    z-index: 320 !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader :is(.spot-hero-back, .spot-hero-close) {
    isolation: isolate !important;
  }
}

/* 2026-08-31 · Authoritative Club composition. The directory starts directly
   below its header; Club details use one solid content rail, an early sticky
   tab bar and non-overlapping activity rows. */
@media (max-width: 768px) {
  html body #sidePanel.clubs-panel #galleryHeader.clubs-drag:not(.clubs-detail-overlay-header) {
    min-height: calc(80px + env(safe-area-inset-top, 0px)) !important;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px !important;
  }

  html body #sidePanel.clubs-panel #galleryHeader.clubs-drag:not(.clubs-detail-overlay-header) .trips-header-row {
    min-height: 54px !important;
  }

  html body #sidePanel.clubs-panel #galleryHeader.clubs-drag:not(.clubs-detail-overlay-header) .clubs-header-mark {
    width: 48px !important;
    height: 48px !important;
    border-radius: 16px !important;
    font-size: 18px !important;
  }

  html body #sidePanel.clubs-panel #galleryList:not(.clubs-detail-list) {
    padding-top: 0 !important;
  }

  html body #sidePanel.clubs-panel #galleryList:not(.clubs-detail-list) .clubs-index-tabs {
    top: 0 !important;
    min-height: 54px !important;
    margin: 0 0 12px !important;
    padding: 3px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .07) !important;
    background: rgba(7, 16, 20, .985) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html body #sidePanel.clubs-panel #galleryList:not(.clubs-detail-list) .clubs-index-tabs button {
    min-height: 48px !important;
    padding: 4px 5px !important;
  }

  html body #sidePanel.clubs-panel #galleryHeader.clubs-detail-overlay-header,
  html body #sidePanel.clubs-panel #galleryHeader.clubs-detail-overlay-header .clubs-header-inner,
  html body #sidePanel.clubs-panel #galleryHeader.clubs-detail-overlay-header .trips-header-row {
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    filter: none !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-hero-shade {
    background: linear-gradient(180deg, rgba(1, 4, 6, .28) 0%, rgba(1, 4, 6, 0) 28%, rgba(7, 16, 20, .14) 56%, #071014 100%) !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-hero-copy {
    padding: 78px 18px 24px !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-hero-title-row {
    align-items: flex-end !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-name {
    display: -webkit-box !important;
    overflow: hidden !important;
    font-size: clamp(27px, 8vw, 35px) !important;
    line-height: 1.02 !important;
    text-overflow: clip !important;
    white-space: normal !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-desc {
    margin: 0 !important;
    padding: 22px 16px 20px !important;
    color: #b3babf !important;
    font-size: 13px !important;
    font-weight: 560 !important;
    line-height: 1.55 !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-stats {
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 78px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, .08) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
    background: transparent !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-stat {
    position: relative !important;
    min-width: 0 !important;
    padding: 12px 4px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    color: #fff !important;
    text-align: center !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-stat + .club-stat::before {
    content: "" !important;
    position: absolute !important;
    top: 18px !important;
    bottom: 18px !important;
    left: 0 !important;
    width: 1px !important;
    background: rgba(255, 255, 255, .08) !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-stat > i {
    color: var(--accent, #ff6b4a) !important;
    font-size: 16px !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-stat > span {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 3px !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-stat b {
    max-width: 100% !important;
    overflow: hidden !important;
    color: #fff !important;
    font: 780 12px/1 "Sora", sans-serif !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-stat small {
    max-width: 100% !important;
    overflow: hidden !important;
    color: #818c93 !important;
    font: 650 8px/1 "Sora", sans-serif !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-exclusive-notice {
    margin: 0 16px !important;
    padding: 15px 0 !important;
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    gap: 11px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-exclusive-notice > i {
    width: 38px !important;
    height: 38px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 13px !important;
    color: var(--accent, #ff6b4a) !important;
    background: rgba(255, 107, 74, .1) !important;
    font-size: 16px !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-exclusive-notice b {
    color: #fff !important;
    font-size: 12px !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-exclusive-notice small {
    color: #89939a !important;
    font-size: 9px !important;
    line-height: 1.4 !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-detail-tabs {
    position: sticky !important;
    top: calc(64px + env(safe-area-inset-top, 0px)) !important;
    z-index: 90 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 56px !important;
    margin: 8px 0 0 !important;
    padding: 0 8px !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .09) !important;
    border-radius: 0 !important;
    background: #071014 !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .18) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-detail-tabs .tab {
    position: relative !important;
    min-width: 0 !important;
    min-height: 56px !important;
    margin: 0 !important;
    padding: 0 3px !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #8c969c !important;
    background: transparent !important;
    font: 720 10px/1 "Sora", sans-serif !important;
    box-shadow: none !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-detail-tabs .tab.active {
    color: #fff !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-detail-tabs .tab.active::after {
    content: "" !important;
    position: absolute !important;
    right: 16px !important;
    bottom: 0 !important;
    left: 16px !important;
    height: 3px !important;
    border-radius: 999px 999px 0 0 !important;
    background: var(--accent, #ff6b4a) !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .tab-content {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 16px !important;
    overflow: visible !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .tab-pane {
    width: 100% !important;
    min-width: 0 !important;
    padding: 20px 0 calc(40px + env(safe-area-inset-bottom, 0px)) !important;
    overflow: visible !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-activity-heading {
    margin: 0 0 14px !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-activity-heading h3 {
    margin: 0 !important;
    color: #fff !important;
    font: 780 22px/1.12 "Sora", sans-serif !important;
    letter-spacing: -.035em !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-activity-list {
    display: grid !important;
    gap: 0 !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-activity-item,
  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-activity-list .activity-item {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 14px 0 !important;
    display: block !important;
    overflow: visible !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 0 !important;
    color: #fff !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-activity-meta {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-activity-meta > .avatar {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    margin: 0 !important;
    border-radius: 50% !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-activity-author {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-activity-author a {
    max-width: 100% !important;
    overflow: hidden !important;
    color: #fff !important;
    font: 720 12px/1.15 "Sora", sans-serif !important;
    text-decoration: none !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-activity-author time {
    max-width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: #79848b !important;
    font: 600 8px/1 "Sora", sans-serif !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-activity-type {
    max-width: 112px !important;
    min-height: 25px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 999px !important;
    color: var(--accent, #ff6b4a) !important;
    background: rgba(255, 107, 74, .1) !important;
    font: 720 8px/1 "Sora", sans-serif !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-activity-content {
    width: calc(100% - 52px) !important;
    min-width: 0 !important;
    margin: 10px 0 0 52px !important;
    display: block !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-activity-content:has(.club-activity-media) {
    display: grid !important;
    grid-template-columns: 92px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 11px !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-activity-media {
    width: 92px !important;
    height: 72px !important;
    display: block !important;
    object-fit: cover !important;
    border-radius: 13px !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-activity-title {
    min-width: 0 !important;
    overflow: hidden !important;
    color: #dce1e4 !important;
    font: 680 11px/1.4 "Sora", sans-serif !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list #tab-spots .club-dashboard {
    width: 100% !important;
    margin: 0 0 24px !important;
    display: grid !important;
    gap: 22px !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list #tab-spots .club-dashboard-card {
    width: 100% !important;
    min-height: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list #tab-spots .club-dashboard-card > header {
    padding: 0 0 11px !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list #tab-spots .club-dashboard-card > header b {
    color: #fff !important;
    font-size: 17px !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list #tab-spots .club-map-card .ach-info-map {
    width: 100% !important;
    height: 230px !important;
    min-height: 230px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 18px !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list #tab-spots .club-map-card footer {
    margin: 8px 0 0 !important;
    padding: 0 !important;
    color: var(--accent, #ff6b4a) !important;
    background: transparent !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list #tab-spots .club-highlight-grid {
    height: 200px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 18px !important;
  }
}

/* FINAL Spot media geometry. Keep this after all historical page variants. */
html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity.card.media-card.spotastic-moments {
  width: calc(100% + 28px) !important;
  max-width: none !important;
  margin-right: -14px !important;
  margin-left: -14px !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .media-grid-wrapper {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .spotastic-media-wall.media-grid.photowall-grid {
  --spot-community-cell: calc((min(100vw, 560px) - 4px) / 3);
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: var(--spot-community-cell) !important;
  gap: 2px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .spotastic-media-wall.media-grid.photowall-grid > .grid-item,
html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .spotastic-media-wall.media-grid.photowall-grid > .grid-item:first-child,
html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .spotastic-media-wall.media-grid.photowall-grid > .grid-item.more {
  position: relative !important;
  display: block !important;
  grid-column: auto !important;
  grid-row: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  background: #151d21 !important;
  box-shadow: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}

html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .spotastic-media-wall.media-grid.photowall-grid > .grid-item > img,
html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .spotastic-media-wall.media-grid.photowall-grid > .grid-item > video,
html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .spotastic-media-wall.media-grid.photowall-grid > .grid-item > .mini-thumb-fallback {
  display: block !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: cover !important;
  image-orientation: from-image !important;
  clip-path: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}

html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .spotastic-media-wall.media-grid.photowall-grid > .spot-community-add-tile {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 12px !important;
  border: 1px dashed rgba(255, 107, 74, .58) !important;
  border-radius: 0 !important;
}

html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .spotastic-media-wall.media-grid.photowall-grid > .spot-community-add-tile.span-2 {
  grid-column: span 2 !important;
}

html body #sidePanel.detail-panel.gallery-panel #spotDetailCommunity .spotastic-media-wall.media-grid.photowall-grid > .spot-community-add-tile.span-3 {
  grid-column: span 3 !important;
}

/* FINAL Trip/Club geometry. Keep after every historical page variant. */
@media (max-width: 768px) {
  html body.trips-detail-open #sidePanel.trips-panel #galleryHeader.trips-detail-overlay-header {
    position: absolute !important;
    inset: 0 0 auto !important;
    z-index: 110 !important;
    flex: none !important;
    width: 100% !important;
    height: calc(58px + env(safe-area-inset-top, 0px)) !important;
    min-height: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-bottom: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html body.trips-detail-open #sidePanel.trips-panel #galleryHeader.trips-detail-overlay-header::before,
  html body.trips-detail-open #sidePanel.trips-panel #galleryHeader.trips-detail-overlay-header::after,
  html body.trips-detail-open #sidePanel.trips-panel #galleryHeader.trips-detail-overlay-header .trips-header-inner::before,
  html body.trips-detail-open #sidePanel.trips-panel #galleryHeader.trips-detail-overlay-header .trips-header-inner::after {
    content: none !important;
    display: none !important;
  }

  html body.trips-detail-open #sidePanel.trips-panel #galleryHeader.trips-detail-overlay-header .trips-header-inner,
  html body.trips-detail-open #sidePanel.trips-panel #galleryHeader.trips-detail-overlay-header .trips-header-row {
    height: 100% !important;
    min-height: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.trips-detail-open #sidePanel.trips-panel #galleryHeader.trips-detail-overlay-header .trips-header-row {
    padding: calc(6px + env(safe-area-inset-top, 0px)) 12px 0 !important;
  }

  html body.trips-detail-open #sidePanel.trips-panel #galleryHeader.trips-detail-overlay-header .trips-header-btn {
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
  }

  html body.trips-detail-open #sidePanel.trips-panel .spotastic-trip-tabs {
    top: calc(58px + env(safe-area-inset-top, 0px)) !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
  }

  html body #sidePanel.clubs-panel #galleryHeader.clubs-detail-overlay-header {
    background: rgba(7, 16, 20, var(--club-header-fade, 0)) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    will-change: background-color !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-activity-list {
    display: grid !important;
    gap: 0 !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-activity-item,
  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-activity-list .activity-item {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 14px 0 !important;
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 10px !important;
    overflow: visible !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .075) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-activity-item > .avatar {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    border-radius: 50% !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-activity-main {
    min-width: 0 !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-activity-meta {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    grid-template-columns: none !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-activity-author {
    min-width: 0 !important;
    display: grid !important;
    gap: 3px !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-activity-type {
    flex: 0 0 auto !important;
    max-width: 120px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 2px 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--accent, #ff6b4a) !important;
    background: transparent !important;
    font: 720 8px/1.2 "Sora", sans-serif !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-activity-content,
  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-activity-content:has(.club-activity-media) {
    width: 100% !important;
    min-width: 0 !important;
    margin: 8px 0 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-activity-media {
    width: 72px !important;
    height: 56px !important;
    margin: 0 !important;
    border-radius: 9px !important;
    object-fit: cover !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-activity-title {
    min-width: 0 !important;
    overflow: visible !important;
    color: #d5dade !important;
    font: 570 10px/1.45 "Sora", sans-serif !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }
}

/* Final confirmed-checkin color contract. A recorded visit is coral; an empty
   counter stays white. These selectors intentionally follow all historic spot
   detail overrides in this file. */
.gs-discovery-spot-image em .checkin-marker-glyph,
.gs-discovery-spot-image em .checkin-marker-glyph:last-child {
  position: relative !important;
  right: auto !important;
  bottom: auto !important;
  color: var(--accent, #ff6b4a) !important;
  font-size: 19px !important;
}

html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-stats > .has-checkins i,
html body #sidePanel.detail-panel.gallery-panel .spot-detail-sticky-stats > .has-checkins i,
.profile-insights-totals > .has-checkins i {
  color: var(--accent, #ff6b4a) !important;
}

html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-stats > .no-checkins i,
html body #sidePanel.detail-panel.gallery-panel .spot-detail-sticky-stats > .no-checkins i,
.profile-insights-totals > .no-checkins i {
  color: #fff !important;
}

/* Final Postcard Studio cascade: placed after keyboard-sheet compatibility. */
html body .modal.postcard-composer-modal {
  padding: 0 !important;
  align-items: stretch !important;
  background: #000 !important;
}
html body .modal.postcard-composer-modal > .modal-content {
  width: 100% !important;
  max-width: none !important;
  height: var(--gs-modal-viewport-height, 100dvh) !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #000 !important;
}
html body .modal.postcard-composer-modal #modalBody,
html body .modal.postcard-composer-modal .postcard-composer-v2 {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #000 !important;
}
html body .modal.postcard-composer-modal .postcard-story-toolbar {
  position: absolute !important;
  z-index: 80 !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  min-height: 0 !important;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  pointer-events: none !important;
  background: linear-gradient(180deg, rgba(0,0,0,.48), transparent) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html body .modal.postcard-composer-modal .postcard-story-toolbar-actions { display: flex !important; align-items: center !important; gap: 7px !important; pointer-events: auto !important; }
html body .modal.postcard-composer-modal .postcard-story-back { background: rgba(22,17,18,.76) !important; }
html body .modal.postcard-composer-modal .postcard-editor-stage {
  position: absolute !important;
  z-index: 1 !important;
  inset: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
}
html body .modal.postcard-composer-modal .postcard-tool-panel {
  position: absolute !important;
  z-index: 110 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  transform: translate3d(0,112%,0) !important;
}
html body .modal.postcard-composer-modal .postcard-tool-panel.is-open { transform: translate3d(0,0,0) !important; }

/* Authoritative last-word overrides for the current detail compositions. */
@media (max-width: 768px) {
  html body.trips-detail-open #sidePanel.trips-panel .spotastic-trip-tabs {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    z-index: 2 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
  }

  html body #sidePanel.clubs-panel #galleryHeader.clubs-detail-overlay-header .clubs-detail-nav-title {
    align-self: start !important;
    min-width: 0 !important;
    height: 46px !important;
    padding: 0 5px !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
    color: #fff !important;
    opacity: var(--club-header-fade, 0) !important;
    font: 780 14px/1.15 "Sora", sans-serif !important;
    letter-spacing: -.02em !important;
    text-decoration: none !important;
    text-overflow: ellipsis !important;
    text-shadow: 0 2px 9px rgba(0, 0, 0, .9) !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    transition: opacity .12s linear !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-hero-title-row {
    align-items: center !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .club-icon-wrap {
    align-self: center !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list #tab-forum a,
  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .forum-topic a,
  html body #modal.club-thread-comments-modal a {
    text-decoration: none !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .forum-composer > header b {
    font-size: 14px !important;
    line-height: 1.25 !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .forum-composer > header small {
    font-size: 10px !important;
    line-height: 1.35 !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .forum-composer > input,
  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .forum-composer-message textarea {
    font-size: 16px !important;
    line-height: 1.4 !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .forum-topic-author a {
    font-size: 13px !important;
    line-height: 1.25 !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .forum-topic-author time {
    font-size: 10px !important;
    line-height: 1.25 !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .forum-topic-replies {
    font-size: 10px !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .forum-topic-copy h4 {
    margin-bottom: 6px !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
  }

  html body #sidePanel.clubs-panel #galleryList.clubs-detail-list .forum-topic-copy p {
    font-size: 13px !important;
    line-height: 1.52 !important;
  }

  .modal.club-thread-comments-modal .club-thread-title {
    font-size: 18px !important;
    line-height: 1.25 !important;
  }

  .modal.club-thread-comments-modal .club-thread-sub {
    font-size: 10px !important;
  }

  .modal.club-thread-comments-modal :is(.club-thread-question-meta, .club-thread-post .meta) a {
    font-size: 12px !important;
  }

  .modal.club-thread-comments-modal :is(.club-thread-question-meta, .club-thread-post .meta) .time {
    font-size: 9px !important;
  }

  .modal.club-thread-comments-modal .club-thread-question-meta .pill {
    font-size: 9px !important;
  }

  .modal.club-thread-comments-modal :is(.club-thread-question-body, .club-thread-body) {
    font-size: 13px !important;
    line-height: 1.52 !important;
  }
}

/* Mobile full-screen pages leave the viewport as a surface, not as fading
   content on top of a static black layer. */
@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
  html body #sidePanel.panel-closing {
    transform: translate3d(0, 104dvh, 0) !important;
    transition: transform .32s cubic-bezier(.4,0,.8,.2) !important;
    will-change: transform !important;
  }
}

/* Account deletion is intentionally isolated from ordinary profile settings. */
.settings-account-delete {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 16px;
  padding: 20px;
  border: 1px solid rgba(255, 118, 88, .35);
  border-radius: 22px;
  background: rgba(255, 118, 88, .055);
}
.settings-account-delete-icon { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,118,88,.14); color: #ff7658; font-size: 24px; }
.settings-account-delete h3 { margin: 2px 0 7px; color: #fff; font-size: 20px; }
.settings-account-delete p { margin: 0; color: #aab2b7; line-height: 1.55; }
.settings-account-delete ul { grid-column: 1 / -1; margin: 2px 0 0; padding-left: 21px; color: #c1c7ca; line-height: 1.55; }
.settings-delete-account-btn { grid-column: 1 / -1; min-height: 54px; border: 1px solid #ff7658; border-radius: 16px; display: flex; align-items: center; justify-content: center; gap: 10px; background: transparent; color: #ff7658; font-size: 15px; font-weight: 850; }
.settings-delete-account-btn:disabled { opacity: .68; }
.settings-account-delete > .status { grid-column: 1 / -1; margin: 0; }
.deleted-account-info { min-height: 58vh; padding: 64px 28px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.deleted-account-info img { width: 104px; height: 104px; border-radius: 50%; }
.deleted-account-info h2 { margin: 20px 0 8px; color: #fff; font-size: 28px; }
.deleted-account-info p { max-width: 480px; margin: 0; color: #9fa8ad; line-height: 1.6; }
.deleted-account-info span { margin-top: 22px; display: inline-flex; align-items: center; gap: 8px; color: #ff7658; font-size: 13px; font-weight: 800; }

/* Check-in counters: coral only when at least one check-in exists. */
.has-checkins > .checkin-marker-glyph,
.has-checkins > i.checkin-marker-glyph { color: var(--accent, #ff7658) !important; }
.no-checkins > .checkin-marker-glyph,
.no-checkins > i.checkin-marker-glyph { color: #fff !important; }
/* September 2026 navigation, gestures and motion pass. */
@media (max-width:768px) {
  body.activity-embedded-root #sidePanel.feed-panel {
    inset:0 !important;
    width:100% !important;
    height:100dvh !important;
    max-height:none !important;
    border-radius:0 !important;
    background:#080d10 !important;
  }
  body.activity-embedded-root #sidePanel.feed-panel .panel-scroller { padding:0 !important; }
  body.activity-embedded-root #sidePanel.feed-panel #galleryHeader {
    position:sticky !important;
    z-index:45 !important;
    top:0 !important;
    padding:calc(18px + env(safe-area-inset-top,0px)) 16px 13px !important;
    background:linear-gradient(180deg,#0b1115 0%,rgba(8,13,16,.985) 100%) !important;
  }
  .activity-root-header-inner { display:grid !important; justify-items:center; gap:14px; }
  .activity-root-header-inner .trips-root-wordmark { font-size:31px !important; }
  .activity-root-header-inner .trips-root-primary-tabs { width:min(590px,100%) !important; }
  .activity-root-copy { margin:18px 4px 12px; display:grid; gap:3px; }
  .activity-root-copy b { color:#fff; font-size:25px; line-height:1.05; }
  .activity-root-copy small { color:#89939a; font-size:12px; }
  body.activity-embedded-root #sidePanel.feed-panel #galleryList { padding:0 14px calc(110px + env(safe-area-inset-bottom,0px)) !important; }

  .feed-pull-refresh {
    height:0;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    overflow:visible;
    color:#8d979d;
    font-size:11px;
    font-weight:800;
    opacity:0;
    translate:0 -46px;
    transition:color .16s ease,opacity .16s ease;
    pointer-events:none;
  }
  .feed-pull-refresh.is-ready,.feed-pull-refresh.is-refreshing { color:var(--accent); opacity:1; }
  .feed-pull-refresh.is-ready i { rotate:180deg; }
  .feed-pull-refresh.is-refreshing i { animation:gs-feed-refresh-spin .72s linear infinite; }
  @keyframes gs-feed-refresh-spin { to { rotate:360deg; } }

  .spot-reference-owner > span > b { font-size:15px !important; line-height:1.15 !important; }
  .spot-reference-owner > span > em { margin-top:4px !important; font-size:10px !important; }
  .spotastic-map-card-position { justify-content:center !important; padding-inline:0 !important; }
  .spotastic-map-card-position > button { display:none !important; }

  #sidePanel.detail-panel.panel-closing,
  #sidePanel.detail-panel.open.panel-closing {
    transform:translate3d(0,108dvh,0) !important;
    translate:0 0 !important;
    scale:1 !important;
    opacity:1 !important;
    filter:none !important;
    transition:transform .3s cubic-bezier(.45,0,1,1) .14s !important;
    pointer-events:none !important;
  }
  #sidePanel.panel-closing #galleryHeader > *,
  #sidePanel.panel-closing #galleryList > * {
    opacity:0 !important;
    transform:translate3d(0,34px,0) !important;
    filter:none !important;
    transition:transform .14s cubic-bezier(.4,0,1,1),opacity .11s ease !important;
  }
  #sidePanel.panel-closing #galleryHeader > *:nth-child(2),
  #sidePanel.panel-closing #galleryList > *:nth-child(2) { transition-delay:.025s !important; }
  #sidePanel.panel-closing #galleryHeader > *:nth-child(3),
  #sidePanel.panel-closing #galleryList > *:nth-child(3) { transition-delay:.05s !important; }
  #sidePanel.panel-closing #galleryList > *:nth-child(4) { transition-delay:.075s !important; }
  #sidePanel.panel-closing #galleryList > *:nth-child(n+5) { transition-delay:.1s !important; }

  #sidePanel.surface-enter-forward #galleryHeader > *,
  #sidePanel.surface-enter-forward #galleryList > * {
    animation:gs-surface-child-in .32s cubic-bezier(.2,.82,.25,1) both;
  }
  #sidePanel.surface-enter-forward #galleryList > *:nth-child(2) { animation-delay:.035s; }
  #sidePanel.surface-enter-forward #galleryList > *:nth-child(3) { animation-delay:.07s; }
  #sidePanel.surface-enter-forward #galleryList > *:nth-child(4) { animation-delay:.105s; }
  #sidePanel.surface-enter-forward #galleryList > *:nth-child(n+5) { animation-delay:.14s; }
  @keyframes gs-surface-child-in {
    from { opacity:0; transform:translate3d(24px,18px,0); }
    to { opacity:1; transform:translate3d(0,0,0); }
  }

  .lightbox.is-closing { opacity:1 !important; filter:none !important; transition:none !important; }
  .lightbox.is-closing .lightbox-frame {
    transform:translate3d(0,108dvh,0) !important;
    filter:none !important;
    transition:transform .28s cubic-bezier(.45,0,1,1) .12s !important;
  }
  .lightbox.is-closing .lightbox-close,
  .lightbox.is-closing .lightbox-location-card,
  .lightbox.is-closing .lightbox-bottom-ui,
  .lightbox.is-closing .lightbox-bar {
    opacity:0 !important;
    transform:translate3d(0,30px,0) !important;
    filter:none !important;
    transition:transform .13s ease,opacity .1s ease !important;
  }
  .postcard-viewer.is-closing { opacity:1 !important; filter:none !important; }
  .postcard-viewer.is-closing .postcard-viewer-bar,
  .postcard-viewer.is-closing .postcard-caption-card { opacity:0 !important; transform:translateY(32px) !important; transition:.13s ease !important; }
  .postcard-viewer.is-closing .postcard-viewer-stage { transform:translateY(108dvh) !important; transition:transform .28s cubic-bezier(.45,0,1,1) .12s !important; }
}

@media (prefers-reduced-motion:reduce) {
  #sidePanel.surface-enter-forward #galleryHeader > *,
  #sidePanel.surface-enter-forward #galleryList > *,
  .feed-pull-refresh.is-refreshing i { animation:none !important; }
}

/* 2026-09-01 · Android startup, Activity/Trips destination geometry and
   dismissal polish. These are final precedence rules by design. */
#panelLoader.panel-loader {
  background: #080d10 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

@media (max-width: 768px) {
  /* Activity uses the exact same brand and primary-tab dimensions as Map and
     Discover, followed immediately by its local scope tabs. */
  html body.activity-embedded-root #sidePanel.feed-panel,
  html body.activity-embedded-root #sidePanel.feed-panel.open {
    position: fixed !important;
    inset: 0 !important;
    z-index: 965 !important;
    width: 100% !important;
    height: 100dvh !important;
    max-height: none !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #080d10 !important;
    transform: none !important;
  }

  html body.activity-embedded-root #sidePanel.feed-panel > .panel-scroller {
    display: flex !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 0 !important;
    flex-direction: column !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #080d10 !important;
  }

  html body.activity-embedded-root #sidePanel.feed-panel #galleryHeader {
    position: relative !important;
    z-index: 45 !important;
    top: auto !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: calc(13px + env(safe-area-inset-top, 0px)) 14px 0 !important;
    box-sizing: border-box !important;
    background: #080d10 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .activity-map-header {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .activity-map-header > .activity-map-brand.spotastic-map-brand {
    position: static !important;
    inset: auto !important;
    width: min(174px, calc(100vw - 150px)) !important;
    min-height: 29px !important;
    margin: 0 auto !important;
    display: flex !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: none !important;
  }

  .activity-map-header > .activity-map-brand .gs-wordmark {
    width: 100% !important;
    font-size: 25px !important;
  }

  .activity-map-header > .activity-map-brand small { display: none !important; }

  .activity-map-header > .activity-primary-tabs.map-primary-tabs {
    position: static !important;
    inset: auto !important;
    width: min(292px, calc(100vw - 94px)) !important;
    min-height: 36px !important;
    margin: 7px auto 0 !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  html body.activity-embedded-root #sidePanel.feed-panel #galleryHeader .spotastic-feed-filters {
    position: relative !important;
    inset: auto !important;
    width: calc(100% + 28px) !important;
    min-height: 48px !important;
    margin: 8px -14px 0 !important;
    padding: 4px 6px !important;
    box-sizing: border-box !important;
    background: #0b1115 !important;
  }

  html body.activity-embedded-root #sidePanel.feed-panel #galleryList {
    position: relative !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 14px 14px calc(110px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .feed-pull-refresh {
    position: absolute !important;
    z-index: 2 !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    height: 48px !important;
    margin: 0 !important;
    translate: none !important;
    transform: translate3d(0, -48px, 0);
  }

  .feed-pull-surface {
    position: relative !important;
    z-index: 1 !important;
    min-height: 100% !important;
    transition: transform .2s cubic-bezier(.2, .75, .3, 1) !important;
    will-change: transform !important;
  }

  .feed-pull-surface.is-pulling { transition: none !important; }

  /* Trips mirrors the Clubs overview: one fullscreen dark surface, a compact
     icon/title header and an independently scrolling card grid. */
  html body.trips-embedded-root.trips-embedded-open #sidePanel.trips-panel,
  html body.trips-embedded-root.trips-embedded-open #sidePanel.trips-panel.open,
  html body.trips-embedded-root.trips-embedded-open #sidePanel.trips-panel.open.peek,
  html body.trips-embedded-root.trips-embedded-open #sidePanel.trips-panel.open.expanded {
    position: fixed !important;
    inset: 0 !important;
    z-index: 880 !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #071014 !important;
    translate: none !important;
    transform: none !important;
  }

  html body.trips-embedded-root.trips-embedded-open #sidePanel.trips-panel > .panel-scroller {
    display: flex !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: none !important;
    flex-direction: column !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #071014 !important;
  }

  html body.trips-embedded-root.trips-embedded-open #sidePanel.trips-panel #galleryHeader.trips-root-header-visible {
    position: relative !important;
    inset: auto !important;
    z-index: 45 !important;
    display: block !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: calc(84px + env(safe-area-inset-top, 0px)) !important;
    margin: 0 !important;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px !important;
    box-sizing: border-box !important;
    border: 0 !important;
    background: #071014 !important;
    box-shadow: none !important;
  }

  html body.trips-embedded-root.trips-embedded-open #sidePanel.trips-panel .trips-overview-header-inner,
  html body.trips-embedded-root.trips-embedded-open #sidePanel.trips-panel .trips-overview-header-inner .trips-header-row {
    width: 100% !important;
    min-height: 64px !important;
  }

  html body.trips-embedded-root.trips-embedded-open #sidePanel.trips-panel .trips-overview-header-inner .trips-header-row {
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) 48px !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  html body.trips-embedded-root.trips-embedded-open #sidePanel.trips-panel .trips-header-mark {
    width: 58px !important;
    height: 58px !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid rgba(255, 107, 74, .42) !important;
    border-radius: 19px !important;
    background: rgba(255, 107, 74, .1) !important;
    color: var(--accent, #ff6b4a) !important;
    font-size: 23px !important;
  }

  html body.trips-embedded-root.trips-embedded-open #sidePanel.trips-panel .trips-overview-header-inner .trips-header-text {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
  }

  html body.trips-embedded-root.trips-embedded-open #sidePanel.trips-panel .trips-overview-header-inner .trips-header-title {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    color: #fff !important;
    font: 800 25px/1.05 "Sora", sans-serif !important;
    letter-spacing: -.04em !important;
  }

  html body.trips-embedded-root.trips-embedded-open #sidePanel.trips-panel .trips-overview-header-inner .trips-header-title-text,
  html body.trips-embedded-root.trips-embedded-open #sidePanel.trips-panel .trips-overview-header-inner .trips-header-sub {
    display: block !important;
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
  }

  html body.trips-embedded-root.trips-embedded-open #sidePanel.trips-panel .trips-overview-header-inner .trips-header-sub {
    margin: 0 !important;
    color: #949da2 !important;
    font: 550 11px/1.25 "Sora", sans-serif !important;
    text-align: left !important;
  }

  html body.trips-embedded-root.trips-embedded-open #sidePanel.trips-panel .trips-overview-header-inner .trips-header-actions {
    justify-self: end !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    display: grid !important;
    place-items: center !important;
    gap: 0 !important;
  }

  html body.trips-embedded-root.trips-embedded-open #sidePanel.trips-panel .trips-overview-header-inner .trips-header-btn {
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: #fff !important;
    font-size: 22px !important;
    box-shadow: none !important;
  }

  html body.trips-embedded-root.trips-embedded-open #sidePanel.trips-panel #galleryList.trips-root-list {
    position: relative !important;
    inset: auto !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 14px 14px calc(112px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    background: #071014 !important;
  }

  #sidePanel .panel-page-loader {
    width: 100% !important;
    min-height: min(56dvh, 480px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 11px !important;
    padding: 28px !important;
    box-sizing: border-box !important;
    color: #8f989e !important;
    font: 700 11px/1.3 "Sora", sans-serif !important;
    text-align: center !important;
  }

  #sidePanel .trips-list > .panel-page-loader {
    grid-column: 1 / -1 !important;
  }

  #sidePanel .panel-page-loader-icon {
    width: 46px !important;
    height: 46px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    background: rgba(255, 107, 74, .1) !important;
    color: var(--accent, #ff6b4a) !important;
    font-size: 19px !important;
  }

  /* Animate one composited surface instead of every card. Large trip and club
     lists otherwise create dozens of competing layers and visibly stutter. */
  #sidePanel.panel-closing,
  #sidePanel.detail-panel.panel-closing,
  #sidePanel.detail-panel.open.panel-closing {
    transform: translate3d(0, 108dvh, 0) !important;
    opacity: 1 !important;
    transition: transform .32s cubic-bezier(.32, .02, .55, 1) .045s !important;
    pointer-events: none !important;
    will-change: transform !important;
  }

  html body #sidePanel.clubs-panel.open.panel-closing,
  html body #sidePanel.clubs-panel.open.peek.panel-closing,
  html body #sidePanel.clubs-panel.open.expanded.panel-closing,
  html body.trips-embedded-root.trips-embedded-open #sidePanel.trips-panel.open.panel-closing,
  html body.trips-embedded-root.trips-embedded-open #sidePanel.trips-panel.open.peek.panel-closing,
  html body.trips-embedded-root.trips-embedded-open #sidePanel.trips-panel.open.expanded.panel-closing {
    translate: 0 0 !important;
    transform: translate3d(0, 108dvh, 0) !important;
    transition: transform .32s cubic-bezier(.32, .02, .55, 1) .045s !important;
  }

  #sidePanel.panel-closing #galleryHeader > *,
  #sidePanel.panel-closing #galleryList > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  #sidePanel.panel-closing > .panel-scroller {
    transform: translate3d(0, 12px, 0) !important;
    transition: transform .12s cubic-bezier(.35, 0, .7, 1) !important;
    will-change: transform !important;
  }
}

/* 2026-09-01 · Exact shared action axis for visit confirmation and like. */
@media (max-width: 768px) {
  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-actions .spot-hero-own-checkin {
    /* The visit disc is 34px wide, the like action 42px. Four pixels align
       their centers exactly against the same right-hand action rail. */
    right: 4px !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .34) !important;
  }

  html body #sidePanel.detail-panel.gallery-panel #galleryHeader .spot-hero-image-actions .spot-hero-own-checkin > span {
    box-shadow: 0 2px 7px rgba(0, 0, 0, .14) !important;
  }
}

/* FINAL trip-detail viewport guard. Keep this at EOF. */
@media (max-width: 768px) {
  html body.trips-detail-open #sidePanel.detail-panel.trips-panel:not(.panel-closing),
  html body.trips-detail-open #sidePanel.detail-panel.trips-panel.open:not(.panel-closing),
  html body.trips-detail-open #sidePanel.detail-panel.trips-panel.open.peek:not(.panel-closing),
  html body.trips-detail-open #sidePanel.detail-panel.trips-panel.open.expanded:not(.panel-closing) {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    translate: 0 0 !important;
    transform: translate3d(0, 0, 0) !important;
    background: #071014 !important;
  }

  html body.trips-detail-open #sidePanel.detail-panel.trips-panel:not(.panel-closing) > .panel-scroller {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    transform: none !important;
    background: #071014 !important;
  }

  html body.trips-detail-open #sidePanel.detail-panel.trips-panel:not(.panel-closing) #galleryHeader.trips-detail-overlay-header {
    position: absolute !important;
    inset: 0 0 auto !important;
    flex: none !important;
  }

  html body.trips-detail-open #sidePanel.detail-panel.trips-panel:not(.panel-closing) #galleryList.trips-detail-list {
    position: relative !important;
    inset: auto !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding-bottom: calc(38px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
  }
}