/* Magnetfolio native Android layout layer. Loaded only inside the Capacitor bundle. */

@media (max-width: 760px) {
  html.magnetfolio-mobile-app,
  html.magnetfolio-mobile-app body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    background: #07070d !important;
    font-size: 14px !important;
  }

  html.magnetfolio-mobile-app * {
    box-sizing: border-box !important;
    min-width: 0 !important;
    letter-spacing: 0 !important;
  }

  html.magnetfolio-mobile-app body {
    padding: 0 0 calc(76px + env(safe-area-inset-bottom)) !important;
  }

  html.magnetfolio-mobile-app .wall-sidebar,
  html.magnetfolio-mobile-app .vault-preview,
  html.magnetfolio-mobile-app .wall-mobile-nav,
  html.magnetfolio-mobile-app .header-actions {
    display: none !important;
  }

  html.magnetfolio-mobile-app .wall-shell,
  html.magnetfolio-mobile-app main,
  html.magnetfolio-mobile-app .wall-main,
  html.magnetfolio-mobile-app .feature-shell,
  html.magnetfolio-mobile-app main.collection-container.vault-experience {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 8px 8px calc(86px + env(safe-area-inset-bottom)) !important;
  }

  html.magnetfolio-mobile-app .wall-topbar,
  html.magnetfolio-mobile-app .app-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 54px !important;
    margin: 0 0 8px !important;
    padding: 7px 8px !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    border-radius: 8px !important;
    background: rgba(9, 10, 18, .94) !important;
    backdrop-filter: blur(14px) !important;
  }

  html.magnetfolio-mobile-app .wall-brand-lockup,
  html.magnetfolio-mobile-app .brand-header-lockup {
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    max-width: 112px !important;
  }

  html.magnetfolio-mobile-app .wall-brand-logo,
  html.magnetfolio-mobile-app .brand-header-lockup img {
    width: 104px !important;
    max-width: 104px !important;
    height: auto !important;
    object-fit: contain !important;
  }

  html.magnetfolio-mobile-app .wall-brand-lockup div,
  html.magnetfolio-mobile-app .page-title-lockup {
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app .wall-brand-lockup h1,
  html.magnetfolio-mobile-app .page-title-lockup h1 {
    margin: 0 !important;
    font-size: 17px !important;
    line-height: 1.06 !important;
    white-space: nowrap !important;
  }

  html.magnetfolio-mobile-app .wall-brand-lockup p,
  html.magnetfolio-mobile-app .wall-brand-lockup small,
  html.magnetfolio-mobile-app .page-title-lockup p {
    margin: 2px 0 0 !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    color: #aeb6c9 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html.magnetfolio-mobile-app .wall-controls {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  html.magnetfolio-mobile-app .wall-search,
  html.magnetfolio-mobile-app .wall-search input,
  html.magnetfolio-mobile-app #searchInput {
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
  }

  html.magnetfolio-mobile-app .wall-world-hero,
  html.magnetfolio-mobile-app .feature-hero,
  html.magnetfolio-mobile-app .reward-gift-panel {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 0 !important;
    margin: 0 0 8px !important;
    padding: 10px !important;
    border-radius: 8px !important;
  }

  html.magnetfolio-mobile-app .feature-hero,
  html.magnetfolio-mobile-app .reward-gift-panel {
    grid-template-columns: 1fr !important;
  }

  html.magnetfolio-mobile-app .hero-kicker,
  html.magnetfolio-mobile-app .section-kicker {
    font-size: 9px !important;
    line-height: 1.1 !important;
  }

  html.magnetfolio-mobile-app .wall-world-copy h2,
  html.magnetfolio-mobile-app .feature-hero h2,
  html.magnetfolio-mobile-app .reward-gift-panel h2,
  html.magnetfolio-mobile-app .section-title h2 {
    margin: 2px 0 !important;
    font-size: 18px !important;
    line-height: 1.05 !important;
  }

  html.magnetfolio-mobile-app .wall-world-copy p,
  html.magnetfolio-mobile-app .feature-hero p,
  html.magnetfolio-mobile-app .reward-gift-panel p,
  html.magnetfolio-mobile-app .section-title p {
    margin: 4px 0 0 !important;
    font-size: 10.5px !important;
    line-height: 1.35 !important;
  }

  html.magnetfolio-mobile-app .wall-globe-launch,
  html.magnetfolio-mobile-app .premium-globe.wall-hero-globe {
    width: 84px !important;
    height: 84px !important;
    max-width: 84px !important;
    margin: 0 !important;
  }

  html.magnetfolio-mobile-app #citiesContainer.magnet-wall-grid,
  html.magnetfolio-mobile-app .gift-grid,
  html.magnetfolio-mobile-app .gift-catalog-grid,
  html.magnetfolio-mobile-app .gift-collection-grid,
  html.magnetfolio-mobile-app .milestone-progress-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  html.magnetfolio-mobile-app article.wall-magnet-card.city-card,
  html.magnetfolio-mobile-app .gift-card,
  html.magnetfolio-mobile-app .gift-catalog-card,
  html.magnetfolio-mobile-app .gift-collection-card,
  html.magnetfolio-mobile-app .milestone-card {
    display: grid !important;
    grid-template-rows: auto minmax(36px, auto) auto !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    padding: 7px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app article.wall-magnet-card.city-card[hidden] {
    display: none !important;
  }

  html.magnetfolio-mobile-app .wall-card-art,
  html.magnetfolio-mobile-app .gift-card-art,
  html.magnetfolio-mobile-app .gift-collection-art {
    width: 100% !important;
    height: 86px !important;
    min-height: 86px !important;
    border-radius: 7px !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app .wall-card-art img,
  html.magnetfolio-mobile-app .gift-card-art img,
  html.magnetfolio-mobile-app .gift-collection-art img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  html.magnetfolio-mobile-app .wall-card-copy strong,
  html.magnetfolio-mobile-app .gift-card-copy h3,
  html.magnetfolio-mobile-app .milestone-card h3 {
    display: block !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.12 !important;
    overflow-wrap: anywhere !important;
  }

  html.magnetfolio-mobile-app .wall-card-copy small,
  html.magnetfolio-mobile-app .gift-card-copy p,
  html.magnetfolio-mobile-app .milestone-card p {
    display: block !important;
    margin: 2px 0 0 !important;
    font-size: 9.5px !important;
    line-height: 1.2 !important;
    color: #aeb6c9 !important;
  }

  html.magnetfolio-mobile-app .wall-card-actions,
  html.magnetfolio-mobile-app .gift-tier-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 5px !important;
    align-items: stretch !important;
  }

  html.magnetfolio-mobile-app .tier-price {
    display: flex !important;
    gap: 4px !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
  }

  html.magnetfolio-mobile-app .tier-chip,
  html.magnetfolio-mobile-app .price-chip,
  html.magnetfolio-mobile-app .gift-price {
    max-width: 100% !important;
    padding: 3px 5px !important;
    border-radius: 999px !important;
    font-size: 8.5px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }

  html.magnetfolio-mobile-app .collect-btn,
  html.magnetfolio-mobile-app .gift-card button,
  html.magnetfolio-mobile-app .reward-claim-button,
  html.magnetfolio-mobile-app .vault-showcase-actions button,
  html.magnetfolio-mobile-app .passport-preview-actions button {
    width: 100% !important;
    min-width: 0 !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 7px !important;
    border-radius: 7px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html.magnetfolio-mobile-app .new-pill {
    top: 5px !important;
    right: 5px !important;
    padding: 3px 5px !important;
    font-size: 8px !important;
  }

  html.magnetfolio-mobile-app .premium-vault-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 86px !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 0 8px !important;
    padding: 10px !important;
    border-radius: 8px !important;
  }

  html.magnetfolio-mobile-app .vault-collector-copy h2 {
    margin: 3px 0 !important;
    font-size: 20px !important;
    line-height: 1.05 !important;
  }

  html.magnetfolio-mobile-app .vault-collector-copy p {
    margin: 0 0 7px !important;
    font-size: 10.5px !important;
    line-height: 1.35 !important;
  }

  html.magnetfolio-mobile-app .vault-showcase-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  html.magnetfolio-mobile-app .vault-empty-medallion,
  html.magnetfolio-mobile-app .vault-progress-ring {
    width: 82px !important;
    height: 82px !important;
    min-width: 82px !important;
    border-radius: 8px !important;
  }

  html.magnetfolio-mobile-app .vault-medallion-emblem {
    width: 32px !important;
    height: 32px !important;
    object-fit: contain !important;
  }

  html.magnetfolio-mobile-app .vault-empty-medallion strong,
  html.magnetfolio-mobile-app .vault-progress-ring strong {
    font-size: 18px !important;
  }

  html.magnetfolio-mobile-app .vault-empty-roadmap {
    display: none !important;
  }

  html.magnetfolio-mobile-app .passport-anchor-block,
  html.magnetfolio-mobile-app .custom-vault-entry,
  html.magnetfolio-mobile-app .gift-collection-stage,
  html.magnetfolio-mobile-app .milestone-progress-panel,
  html.magnetfolio-mobile-app .gift-studio {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 8px !important;
    padding: 10px !important;
    border-radius: 8px !important;
  }

  html.magnetfolio-mobile-app .vault-room-title,
  html.magnetfolio-mobile-app .compact-section-title {
    margin: 0 0 8px !important;
    padding: 0 !important;
  }

  html.magnetfolio-mobile-app .passport-clean-stage {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  html.magnetfolio-mobile-app .passport-clean-collection,
  html.magnetfolio-mobile-app .passport-clean-book {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 12px !important;
    border-radius: 8px !important;
    transform: none !important;
  }

  html.magnetfolio-mobile-app .passport-clean-collection-empty {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: center !important;
  }

  html.magnetfolio-mobile-app .passport-clean-collection-empty button {
    grid-column: 1 / -1 !important;
  }

  html.magnetfolio-mobile-app .passport-clean-cover {
    min-height: 300px !important;
    padding: 14px !important;
    border-radius: 8px !important;
  }

  html.magnetfolio-mobile-app .passport-clean-emblem {
    width: 68px !important;
    height: 68px !important;
  }

  html.magnetfolio-mobile-app .passport-clean-cover h3 {
    margin: 8px 0 !important;
    font-size: 30px !important;
    line-height: .94 !important;
  }

  html.magnetfolio-mobile-app .passport-clean-cover p,
  html.magnetfolio-mobile-app .passport-clean-cover-lines span {
    font-size: 10px !important;
    line-height: 1.25 !important;
  }

  html.magnetfolio-mobile-app .custom-vault-entry {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    align-items: center !important;
  }

  html.magnetfolio-mobile-app .custom-vault-entry h2 {
    margin: 2px 0 !important;
    font-size: 17px !important;
    line-height: 1.1 !important;
  }

  html.magnetfolio-mobile-app .custom-vault-entry p {
    margin: 0 !important;
    font-size: 10px !important;
    line-height: 1.3 !important;
  }

  html.magnetfolio-mobile-app .custom-vault-entry-action {
    min-width: 88px !important;
  }

  html.magnetfolio-mobile-app .gift-free-panel,
  html.magnetfolio-mobile-app .gift-search-panel {
    grid-column: 1 / -1 !important;
    padding: 10px !important;
    border-radius: 8px !important;
  }

  html.magnetfolio-mobile-app .gift-search input {
    height: 38px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
  }

  html.magnetfolio-mobile-app .app-bottom-nav,
  html.magnetfolio-mobile-app .app-bottom-nav.app-bottom-nav-compact.with-vault {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    z-index: 9999 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: center !important;
    gap: 2px !important;
    width: auto !important;
    height: 60px !important;
    min-height: 60px !important;
    padding: 5px !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    border-radius: 8px !important;
    background: rgba(8, 9, 16, .96) !important;
    box-shadow: 0 14px 32px rgba(0, 0, 0, .42) !important;
    backdrop-filter: blur(16px) !important;
  }

  html.magnetfolio-mobile-app .app-bottom-nav a,
  html.magnetfolio-mobile-app .app-bottom-nav.app-bottom-nav-compact.with-vault a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    width: 100% !important;
    height: 50px !important;
    min-height: 50px !important;
    padding: 0 !important;
    border-radius: 7px !important;
    transform: none !important;
  }

  html.magnetfolio-mobile-app .app-bottom-nav a span {
    display: grid !important;
    place-items: center !important;
    width: 28px !important;
    height: 28px !important;
    margin: 0 !important;
    transform: none !important;
  }

  html.magnetfolio-mobile-app .app-bottom-nav a svg {
    width: 18px !important;
    height: 18px !important;
  }

  html.magnetfolio-mobile-app .app-bottom-nav a b {
    display: block !important;
    max-width: 100% !important;
    font-size: 8.5px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
  }

  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab > span,
  html.magnetfolio-mobile-app .app-bottom-nav.app-bottom-nav-compact.with-vault a.mark-tab > span {
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    transform: none !important;
    background: #ffffff !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .32) !important;
  }

  html.magnetfolio-mobile-app .app-bottom-nav .nav-mark-emblem {
    display: block !important;
    width: 44px !important;
    height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    object-fit: contain !important;
    transform: none !important;
  }
}

/* FINAL FIX 20260720-wall-clean-shadow-eof-v194: this must stay after the older
   My Magnet Wall overrides so PNG magnets do not inherit square drop shadows. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.magnetfolio-mobile-app-body.vault-feature-page #vaultRoom #collectionShareCard.collection-display-case.my-magnet-wall .passport-clean-collection-magnet.my-magnet-wall-tile,
  html.magnetfolio-mobile-app body.magnetfolio-mobile-app-body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.collection-display-case.my-magnet-wall .passport-clean-collection-magnet.my-magnet-wall-tile,
  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.vault-fullscreen-collection.my-magnet-wall .my-magnet-wall-tile {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: none !important;
  }

  html.magnetfolio-mobile-app body.magnetfolio-mobile-app-body.vault-feature-page #vaultRoom #collectionShareCard.collection-display-case.my-magnet-wall .passport-clean-collection-magnet.my-magnet-wall-tile img,
  html.magnetfolio-mobile-app body.magnetfolio-mobile-app-body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.collection-display-case.my-magnet-wall .passport-clean-collection-magnet.my-magnet-wall-tile img,
  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.vault-fullscreen-collection.my-magnet-wall .my-magnet-wall-tile img {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: none !important;
  }
}

/* FINAL FIX 20260720-my-magnet-wall-v183: apply the approved wall treatment to
   the real Capacitor body class used on installed Android builds. */
@media (max-width: 760px) {
  body.magnetfolio-mobile-app-body.vault-feature-page .my-magnet-wall-stage {
    display: block !important;
    width: 100% !important;
    margin: 18px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body.magnetfolio-mobile-app-body.vault-feature-page #vaultRoom #collectionShareCard.my-magnet-wall {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 430px !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 14px 12px 22px !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
      linear-gradient(90deg, rgba(255,255,255,.035), transparent 14%, rgba(230,186,92,.04) 58%, transparent 92%),
      radial-gradient(circle at 18% 0%, rgba(231, 202, 128, .10), transparent 34%),
      radial-gradient(circle at 84% 4%, rgba(120, 86, 154, .10), transparent 32%),
      linear-gradient(160deg, #101116 0%, #0a0b10 48%, #05070b 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 238, 180, .12), inset 0 -34px 70px rgba(0,0,0,.26) !important;
  }

  body.magnetfolio-mobile-app-body.vault-feature-page #vaultRoom #collectionShareCard.my-magnet-wall::before {
    content: "MAGNETFOLIO" !important;
    position: absolute !important;
    right: 12px !important;
    bottom: 18px !important;
    color: rgba(255, 235, 176, .075) !important;
    font-size: 32px !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
    transform: rotate(-90deg) translateX(22%) !important;
    transform-origin: right bottom !important;
    pointer-events: none !important;
  }

  body.magnetfolio-mobile-app-body.vault-feature-page #vaultRoom #collectionShareCard.my-magnet-wall .my-magnet-wall-head {
    display: grid !important;
    gap: 4px !important;
    margin: 0 0 18px !important;
    padding: 0 2px 10px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(226, 186, 92, .20) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: left !important;
  }

  body.magnetfolio-mobile-app-body.vault-feature-page #vaultRoom #collectionShareCard.my-magnet-wall .my-magnet-wall-head span {
    color: #e7bd57 !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
  }

  body.magnetfolio-mobile-app-body.vault-feature-page #vaultRoom #collectionShareCard.my-magnet-wall .my-magnet-wall-head strong {
    color: #fff4dc !important;
    font-size: 34px !important;
    line-height: .98 !important;
    letter-spacing: 0 !important;
    text-shadow: 0 3px 16px rgba(0,0,0,.48) !important;
  }

  body.magnetfolio-mobile-app-body.vault-feature-page #vaultRoom #collectionShareCard.my-magnet-wall .my-magnet-wall-head small {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: rgba(255, 232, 178, .88) !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
  }

  body.magnetfolio-mobile-app-body.vault-feature-page #vaultRoom #collectionShareCard.my-magnet-wall .my-magnet-wall-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-items: center !important;
    align-items: start !important;
    gap: 26px 22px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 14px 4px 24px !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body.magnetfolio-mobile-app-body.vault-feature-page #vaultRoom #collectionShareCard.my-magnet-wall .my-magnet-wall-tile {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: rotate(-1.2deg) !important;
  }

  body.magnetfolio-mobile-app-body.vault-feature-page #vaultRoom #collectionShareCard.my-magnet-wall .my-magnet-wall-tile:nth-child(2n) {
    transform: rotate(1.35deg) !important;
  }

  body.magnetfolio-mobile-app-body.vault-feature-page #vaultRoom #collectionShareCard.my-magnet-wall .my-magnet-wall-tile:nth-child(3n) {
    transform: rotate(.55deg) !important;
  }

  body.magnetfolio-mobile-app-body.vault-feature-page #vaultRoom #collectionShareCard.my-magnet-wall .my-magnet-wall-tile img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    border-radius: 12px !important;
    clip-path: inset(5px round 12px) !important;
    filter: none !important;
  }

  body.magnetfolio-mobile-app-body.vault-feature-page #vaultRoom #collectionShareCard.my-magnet-wall .my-magnet-wall-tile span {
    display: none !important;
  }

  body.magnetfolio-mobile-app-body.vault-feature-page .my-magnet-wall-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 10px 0 0 !important;
    padding: 0 10px !important;
  }

  body.magnetfolio-mobile-app-body.vault-feature-page .my-magnet-wall-actions .collection-share-story-btn {
    grid-column: 1 / -1 !important;
  }

  body.magnetfolio-mobile-app-body.vault-feature-page .my-magnet-wall-actions button {
    min-height: 36px !important;
    border-radius: 999px !important;
    font-size: 10px !important;
  }
}

/* FINAL FIX 20260720-vault-progress-wall-clean-v194: make the first Vault block
   read as premium progress, and remove the square optical shadow around Wall magnets. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-progress-card {
    width: 100% !important;
    margin: 0 0 10px !important;
    padding: 13px 14px 12px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(246, 202, 111, .30) !important;
    background:
      radial-gradient(circle at 12% 0%, rgba(246, 202, 111, .16), transparent 34%),
      linear-gradient(145deg, rgba(80, 22, 38, .98), rgba(34, 18, 29, .99) 58%, rgba(13, 12, 16, .99)) !important;
    box-shadow: 0 18px 34px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 236, 186, .11) !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-progress-top {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 64px !important;
    align-items: center !important;
    gap: 12px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-progress-title {
    min-width: 0 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-progress-title span {
    display: block !important;
    margin: 0 0 4px !important;
    color: rgba(255, 230, 169, .74) !important;
    font-size: 10px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-progress-title strong {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: #fff6df !important;
    font-size: 23px !important;
    font-weight: 950 !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-progress-percent {
    display: grid !important;
    place-items: center !important;
    width: 64px !important;
    height: 64px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: 1px solid rgba(246, 202, 111, .44) !important;
    background: rgba(255, 242, 202, .08) !important;
    box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .035) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-progress-percent b {
    color: #f7cf72 !important;
    font-size: 18px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-progress-percent small {
    color: rgba(255, 246, 223, .62) !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-progress-track {
    height: 9px !important;
    margin: 12px 0 11px !important;
    border-radius: 999px !important;
    background: rgba(0, 0, 0, .28) !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-progress-track i {
    display: block !important;
    height: 100% !important;
    min-width: 4px !important;
    border-radius: inherit !important;
    background: linear-gradient(90deg, #b6782d, #f4ca6a 62%, #fff0a8) !important;
    box-shadow: 0 0 14px rgba(246, 202, 111, .32) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-progress-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-progress-stats article {
    min-width: 0 !important;
    padding: 8px 6px !important;
    border-radius: 12px !important;
    background: rgba(255, 247, 220, .065) !important;
    border: 1px solid rgba(255, 232, 168, .14) !important;
    text-align: center !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-progress-stats b {
    display: block !important;
    color: #fff7e4 !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    line-height: 1.05 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-progress-stats span {
    display: block !important;
    margin-top: 3px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: rgba(255, 244, 216, .62) !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-progress-nudge {
    margin: 10px 0 0 !important;
    color: rgba(255, 246, 222, .78) !important;
    font-size: 11px !important;
    font-weight: 750 !important;
    line-height: 1.25 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-progress-new {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 9px !important;
    padding: 7px 9px !important;
    border-radius: 999px !important;
    background: rgba(246, 202, 111, .12) !important;
    border: 1px solid rgba(246, 202, 111, .22) !important;
    color: #fff3ca !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    line-height: 1.1 !important;
    text-decoration: none !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-progress-new b {
    flex: 0 0 auto !important;
    padding: 3px 7px !important;
    border-radius: 999px !important;
    background: #f1c86a !important;
    color: #25120b !important;
    font-size: 9px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-progress-new span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard.collection-display-case.my-magnet-wall .passport-clean-collection-magnet.my-magnet-wall-tile,
  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.collection-display-case.my-magnet-wall .passport-clean-collection-magnet.my-magnet-wall-tile {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: none !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard.collection-display-case.my-magnet-wall .passport-clean-collection-magnet.my-magnet-wall-tile img,
  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.collection-display-case.my-magnet-wall .passport-clean-collection-magnet.my-magnet-wall-tile img,
  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.vault-fullscreen-collection.my-magnet-wall .my-magnet-wall-tile img {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: none !important;
  }
}

/* FINAL FIX 20260720-my-magnet-wall-v190: EOF override for opened My Magnet
   Wall, after all legacy fullscreen collection rules. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-shell.vault-fullscreen-collection .vault-fullscreen-floating-close {
    position: absolute !important;
    z-index: 30 !important;
    top: max(10px, env(safe-area-inset-top)) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    display: grid !important;
    place-items: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 231, 164, .42) !important;
    border-radius: 999px !important;
    background: rgba(15, 16, 22, .84) !important;
    color: #ffe8a4 !important;
    box-shadow: 0 10px 22px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.10) !important;
    font-size: 28px !important;
    font-weight: 750 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }

  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.passport-clean-collection.collection-display-case.my-magnet-wall.vault-fullscreen-collection {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 18px 12px 28px !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
      linear-gradient(90deg, rgba(255,255,255,.045), transparent 14%, rgba(230,186,92,.045) 58%, transparent 92%),
      radial-gradient(circle at 18% 0%, rgba(231, 202, 128, .12), transparent 34%),
      radial-gradient(circle at 84% 4%, rgba(120, 86, 154, .13), transparent 32%),
      linear-gradient(160deg, #3b3031 0%, #221f24 42%, #10151c 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 238, 180, .12), inset 0 -34px 70px rgba(0,0,0,.26) !important;
  }

  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.passport-clean-collection.collection-display-case.my-magnet-wall.vault-fullscreen-collection .passport-clean-collection-head.my-magnet-wall-head {
    display: grid !important;
    gap: 5px !important;
    margin: 0 54px 18px 0 !important;
    padding: 0 2px 11px !important;
    overflow: visible !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(226, 186, 92, .20) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: left !important;
  }

  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.passport-clean-collection.collection-display-case.my-magnet-wall.vault-fullscreen-collection .passport-clean-collection-grid.my-magnet-wall-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-items: center !important;
    align-items: start !important;
    gap: 26px 22px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 14px 4px 24px !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.passport-clean-collection.collection-display-case.my-magnet-wall.vault-fullscreen-collection .passport-clean-collection-magnet.my-magnet-wall-tile {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.passport-clean-collection.collection-display-case.my-magnet-wall.vault-fullscreen-collection .passport-clean-collection-magnet.my-magnet-wall-tile img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    filter: none !important;
  }

  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.passport-clean-collection.collection-display-case.my-magnet-wall.vault-fullscreen-collection .passport-clean-collection-magnet.my-magnet-wall-tile span {
    display: none !important;
  }
}

/* FINAL FIX 20260720-my-magnet-wall-v191: collector placement. Magnets sit like
   a hand-arranged collection, with no extra tile frame around the PNG art. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-open) #vaultRoom #collectionShareCard.my-magnet-wall .my-magnet-wall-grid,
  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.my-magnet-wall .my-magnet-wall-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px 18px !important;
    align-items: start !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-open) #vaultRoom #collectionShareCard.my-magnet-wall .my-magnet-wall-tile,
  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.my-magnet-wall .my-magnet-wall-tile {
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    overflow: visible !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-open) #vaultRoom #collectionShareCard.my-magnet-wall .my-magnet-wall-tile img,
  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.my-magnet-wall .my-magnet-wall-tile img {
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    filter: drop-shadow(0 14px 14px rgba(0,0,0,.48)) drop-shadow(0 2px 0 rgba(255,232,160,.12)) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-open) #vaultRoom #collectionShareCard.my-magnet-wall .my-magnet-wall-tile:nth-child(6n+1),
  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.my-magnet-wall .my-magnet-wall-tile:nth-child(6n+1) {
    transform: translate(2px, 0) rotate(-2.1deg) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-open) #vaultRoom #collectionShareCard.my-magnet-wall .my-magnet-wall-tile:nth-child(6n+2),
  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.my-magnet-wall .my-magnet-wall-tile:nth-child(6n+2) {
    transform: translate(-1px, 9px) rotate(1.4deg) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-open) #vaultRoom #collectionShareCard.my-magnet-wall .my-magnet-wall-tile:nth-child(6n+3),
  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.my-magnet-wall .my-magnet-wall-tile:nth-child(6n+3) {
    transform: translate(8px, -2px) rotate(.7deg) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-open) #vaultRoom #collectionShareCard.my-magnet-wall .my-magnet-wall-tile:nth-child(6n+4),
  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.my-magnet-wall .my-magnet-wall-tile:nth-child(6n+4) {
    transform: translate(-7px, 14px) rotate(-1.3deg) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-open) #vaultRoom #collectionShareCard.my-magnet-wall .my-magnet-wall-tile:nth-child(6n+5),
  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.my-magnet-wall .my-magnet-wall-tile:nth-child(6n+5) {
    transform: translate(14px, 3px) rotate(2.2deg) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-open) #vaultRoom #collectionShareCard.my-magnet-wall .my-magnet-wall-tile:nth-child(6n),
  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.my-magnet-wall .my-magnet-wall-tile:nth-child(6n) {
    transform: translate(-10px, 8px) rotate(-.5deg) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-open) #vaultRoom #collectionShareCard.my-magnet-wall .my-magnet-wall-tile span,
  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.my-magnet-wall .my-magnet-wall-tile span {
    display: none !important;
  }
}

/* FINAL FIX 20260720-my-magnet-wall-v185: beat legacy collection-display-case
   mobile rules that were forcing 3 columns and visible city labels. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.magnetfolio-mobile-app-body.vault-feature-page:not(.vault-fullscreen-open):not(.vault-fullscreen-collection-open) #vaultRoom #collectionShareCard.collection-display-case.my-magnet-wall:not(.vault-fullscreen-card) {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 430px !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 14px 12px 22px !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
      linear-gradient(90deg, rgba(255,255,255,.045), transparent 14%, rgba(230,186,92,.045) 58%, transparent 92%),
      radial-gradient(circle at 18% 0%, rgba(231, 202, 128, .12), transparent 34%),
      radial-gradient(circle at 84% 4%, rgba(120, 86, 154, .13), transparent 32%),
      linear-gradient(160deg, #3b3031 0%, #221f24 42%, #10151c 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 238, 180, .12), inset 0 -34px 70px rgba(0,0,0,.26) !important;
  }

  html.magnetfolio-mobile-app body.magnetfolio-mobile-app-body.vault-feature-page:not(.vault-fullscreen-open):not(.vault-fullscreen-collection-open) #vaultRoom #collectionShareCard.collection-display-case.my-magnet-wall:not(.vault-fullscreen-card) .passport-clean-collection-grid.my-magnet-wall-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-items: center !important;
    align-items: start !important;
    gap: 26px 22px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 14px 4px 24px !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  html.magnetfolio-mobile-app body.magnetfolio-mobile-app-body.vault-feature-page:not(.vault-fullscreen-open):not(.vault-fullscreen-collection-open) #vaultRoom #collectionShareCard.collection-display-case.my-magnet-wall:not(.vault-fullscreen-card) .passport-clean-collection-magnet.my-magnet-wall-tile {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: rotate(-1.2deg) !important;
  }

  html.magnetfolio-mobile-app body.magnetfolio-mobile-app-body.vault-feature-page:not(.vault-fullscreen-open):not(.vault-fullscreen-collection-open) #vaultRoom #collectionShareCard.collection-display-case.my-magnet-wall:not(.vault-fullscreen-card) .passport-clean-collection-magnet.my-magnet-wall-tile:nth-child(2n) {
    transform: rotate(1.35deg) !important;
  }

  html.magnetfolio-mobile-app body.magnetfolio-mobile-app-body.vault-feature-page:not(.vault-fullscreen-open):not(.vault-fullscreen-collection-open) #vaultRoom #collectionShareCard.collection-display-case.my-magnet-wall:not(.vault-fullscreen-card) .passport-clean-collection-magnet.my-magnet-wall-tile:nth-child(3n) {
    transform: rotate(.55deg) !important;
  }

  html.magnetfolio-mobile-app body.magnetfolio-mobile-app-body.vault-feature-page:not(.vault-fullscreen-open):not(.vault-fullscreen-collection-open) #vaultRoom #collectionShareCard.collection-display-case.my-magnet-wall:not(.vault-fullscreen-card) .passport-clean-collection-magnet.my-magnet-wall-tile img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    filter: none !important;
  }

  html.magnetfolio-mobile-app body.magnetfolio-mobile-app-body.vault-feature-page:not(.vault-fullscreen-open):not(.vault-fullscreen-collection-open) #vaultRoom #collectionShareCard.collection-display-case.my-magnet-wall:not(.vault-fullscreen-card) .passport-clean-collection-magnet.my-magnet-wall-tile span {
    display: none !important;
  }
}

/* FINAL FIX 20260720-my-magnet-wall-v186: remove the legacy header card from
   My Magnet Wall and keep share controls clear of the mobile nav. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.magnetfolio-mobile-app-body.vault-feature-page:not(.vault-fullscreen-open):not(.vault-fullscreen-collection-open) #vaultRoom #collectionShareCard.collection-display-case.my-magnet-wall:not(.vault-fullscreen-card) .passport-clean-collection-head.my-magnet-wall-head {
    display: grid !important;
    gap: 5px !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 0 18px !important;
    padding: 0 2px 11px !important;
    overflow: visible !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(226, 186, 92, .20) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: left !important;
  }

  html.magnetfolio-mobile-app body.magnetfolio-mobile-app-body.vault-feature-page:not(.vault-fullscreen-open):not(.vault-fullscreen-collection-open) #vaultRoom #collectionShareCard.collection-display-case.my-magnet-wall:not(.vault-fullscreen-card) .passport-clean-collection-head.my-magnet-wall-head span {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #e7bd57 !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    text-align: left !important;
  }

  html.magnetfolio-mobile-app body.magnetfolio-mobile-app-body.vault-feature-page:not(.vault-fullscreen-open):not(.vault-fullscreen-collection-open) #vaultRoom #collectionShareCard.collection-display-case.my-magnet-wall:not(.vault-fullscreen-card) .passport-clean-collection-head.my-magnet-wall-head strong {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #fff4dc !important;
    font-size: 32px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    text-shadow: 0 3px 16px rgba(0,0,0,.48) !important;
    white-space: normal !important;
  }

  html.magnetfolio-mobile-app body.magnetfolio-mobile-app-body.vault-feature-page:not(.vault-fullscreen-open):not(.vault-fullscreen-collection-open) #vaultRoom #collectionShareCard.collection-display-case.my-magnet-wall:not(.vault-fullscreen-card) .passport-clean-collection-head.my-magnet-wall-head small {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    color: rgba(255, 232, 178, .88) !important;
    font-size: 10px !important;
    font-weight: 850 !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    text-transform: uppercase !important;
    white-space: normal !important;
  }

  html.magnetfolio-mobile-app body.magnetfolio-mobile-app-body.vault-feature-page .my-magnet-wall-stage {
    margin-bottom: 112px !important;
  }

  html.magnetfolio-mobile-app body.magnetfolio-mobile-app-body.vault-feature-page .my-magnet-wall-actions {
    margin: 12px 0 112px !important;
  }
}

/* FINAL FIX 20260720-my-magnet-wall-v187: add a non-captured close affordance
   for leaving My Magnet Wall without Android Back. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.magnetfolio-mobile-app-body.vault-feature-page .my-magnet-wall-stage {
    position: relative !important;
  }

  html.magnetfolio-mobile-app body.magnetfolio-mobile-app-body.vault-feature-page .my-magnet-wall-close {
    position: absolute !important;
    z-index: 4 !important;
    top: 10px !important;
    right: 10px !important;
    display: grid !important;
    place-items: center !important;
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 231, 164, .36) !important;
    border-radius: 999px !important;
    background: rgba(15, 16, 22, .76) !important;
    color: #ffe8a4 !important;
    box-shadow: 0 10px 22px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.10) !important;
    font-size: 24px !important;
    font-weight: 750 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }

  html.magnetfolio-mobile-app body.magnetfolio-mobile-app-body.vault-feature-page .my-magnet-wall-close:active {
    transform: scale(.96) !important;
  }
}

/* FINAL FIX 20260720-my-magnet-wall-v188: close affordance belongs to the
   opened Wall fullscreen view, not the first Collection page. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-shell.vault-fullscreen-collection .vault-fullscreen-close {
    display: grid !important;
    place-items: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 231, 164, .38) !important;
    border-radius: 999px !important;
    background: rgba(15, 16, 22, .82) !important;
    color: #ffe8a4 !important;
    box-shadow: 0 10px 22px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.10) !important;
    font-size: 0 !important;
    line-height: 1 !important;
  }

  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-shell.vault-fullscreen-collection .vault-fullscreen-close::before {
    content: "×" !important;
    font-size: 28px !important;
    font-weight: 750 !important;
    line-height: 1 !important;
  }

  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-shell.vault-fullscreen-collection .vault-fullscreen-close:active {
    transform: scale(.96) !important;
  }
}

/* FINAL FIX 20260720-my-magnet-wall-v189: the opened Wall view gets its own
   floating close button and keeps the same premium wall layout. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app .vault-fullscreen-floating-close {
    display: none !important;
  }

  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-shell.vault-fullscreen-collection {
    position: relative !important;
  }

  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-shell.vault-fullscreen-collection .vault-fullscreen-floating-close {
    position: absolute !important;
    z-index: 20 !important;
    top: max(10px, env(safe-area-inset-top)) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    display: grid !important;
    place-items: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 231, 164, .42) !important;
    border-radius: 999px !important;
    background: rgba(15, 16, 22, .84) !important;
    color: #ffe8a4 !important;
    box-shadow: 0 10px 22px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.10) !important;
    font-size: 28px !important;
    font-weight: 750 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }

  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.my-magnet-wall,
  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.vault-fullscreen-collection.my-magnet-wall {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 18px 12px 28px !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
      linear-gradient(90deg, rgba(255,255,255,.045), transparent 14%, rgba(230,186,92,.045) 58%, transparent 92%),
      radial-gradient(circle at 18% 0%, rgba(231, 202, 128, .12), transparent 34%),
      radial-gradient(circle at 84% 4%, rgba(120, 86, 154, .13), transparent 32%),
      linear-gradient(160deg, #3b3031 0%, #221f24 42%, #10151c 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 238, 180, .12), inset 0 -34px 70px rgba(0,0,0,.26) !important;
  }

  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.my-magnet-wall .passport-clean-collection-head.my-magnet-wall-head {
    display: grid !important;
    gap: 5px !important;
    margin: 0 54px 18px 0 !important;
    padding: 0 2px 11px !important;
    overflow: visible !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(226, 186, 92, .20) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: left !important;
  }

  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.my-magnet-wall .passport-clean-collection-head.my-magnet-wall-head span {
    display: block !important;
    color: #e7bd57 !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
  }

  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.my-magnet-wall .passport-clean-collection-head.my-magnet-wall-head strong {
    display: block !important;
    color: #fff4dc !important;
    font-size: 31px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-shadow: 0 3px 16px rgba(0,0,0,.48) !important;
    white-space: normal !important;
  }

  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.my-magnet-wall .passport-clean-collection-head.my-magnet-wall-head small {
    display: block !important;
    color: rgba(255, 232, 178, .88) !important;
    font-size: 10px !important;
    font-weight: 850 !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
    white-space: normal !important;
  }

  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.my-magnet-wall .passport-clean-collection-grid.my-magnet-wall-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-items: center !important;
    align-items: start !important;
    gap: 26px 22px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 14px 4px 24px !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.my-magnet-wall .passport-clean-collection-magnet.my-magnet-wall-tile {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.my-magnet-wall .passport-clean-collection-magnet.my-magnet-wall-tile img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    filter: none !important;
  }

  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.my-magnet-wall .passport-clean-collection-magnet.my-magnet-wall-tile span {
    display: none !important;
  }
}


/* FINAL FIX 20260716-collection-inline-align-v143: match the better-centered
   fullscreen collection rhythm in the inline Collection card. Three balanced
   columns keep magnets on a clean axis instead of drifting left in wide tiles. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-open):not(.vault-fullscreen-collection-open) #vaultRoom #collectionShareCard.collection-display-case:not(.vault-fullscreen-card) .passport-clean-collection-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    justify-items: center !important;
    align-items: start !important;
    gap: 22px 18px !important;
    padding: 22px 16px 20px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-open):not(.vault-fullscreen-collection-open) #vaultRoom #collectionShareCard.collection-display-case:not(.vault-fullscreen-card) .passport-clean-collection-magnet {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: auto auto !important;
    justify-items: center !important;
    align-items: start !important;
    padding: 0 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-open):not(.vault-fullscreen-collection-open) #vaultRoom #collectionShareCard.collection-display-case:not(.vault-fullscreen-card) .passport-clean-collection-magnet img {
    display: block !important;
    width: auto !important;
    height: min(92px, 24vw) !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    object-fit: contain !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-open):not(.vault-fullscreen-collection-open) #vaultRoom #collectionShareCard.collection-display-case:not(.vault-fullscreen-card) .passport-clean-collection-magnet span {
    width: 100% !important;
    min-height: 0 !important;
    margin-top: 7px !important;
    font-size: clamp(12px, 3.4vw, 15px) !important;
    line-height: 1.08 !important;
    text-align: center !important;
  }
}

/* FINAL FIX 20260716-collection-fullscreen-tight-v147: keep the smoked
   collection backing premium without stretching into an empty metal slab. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.passport-clean-collection .passport-clean-collection-grid,
  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.vault-fullscreen-collection .passport-clean-collection-grid {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: min(58vh, 620px) !important;
    overflow-y: auto !important;
    align-content: start !important;
    grid-auto-rows: max-content !important;
    padding: 18px 14px 20px !important;
    gap: 24px 18px !important;
  }
}

/* FINAL FIX 20260708-world-map-atlas-v79: correct v78's over-tall atlas frame.
   v78 made #worldMap flex-grow inside the card while the SVG remains a 2:1 world map,
   so Android rendered the map as a narrow band with large empty ocean above/below.
   Keep the compact title, bottom-left counter, and global pins, but restore a deliberate
   proportional map frame so the actual map is the hero instead of dead space. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.feature-page .map-panel.feature-map-panel {
    min-height: 0 !important;
    display: block !important;
    padding: 12px !important;
  }

  html.magnetfolio-mobile-app body.feature-page .map-panel .section-title {
    margin-bottom: 9px !important;
  }

  html.magnetfolio-mobile-app body.feature-page .map-panel .section-title h2 {
    font-size: 20px !important;
    line-height: 1.08 !important;
    margin: 3px 0 0 !important;
  }

  html.magnetfolio-mobile-app body.feature-page .map-panel .section-title p {
    display: none !important;
  }

  html.magnetfolio-mobile-app body.feature-page .map-stage {
    display: block !important;
    min-height: 0 !important;
  }

  html.magnetfolio-mobile-app body.feature-page #worldMap.visual-world-map {
    display: block !important;
    flex: none !important;
    width: 100% !important;
    height: clamp(252px, 68vw, 310px) !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  html.magnetfolio-mobile-app body.feature-page #worldMap .mobile-world-map-progress-badge {
    top: auto !important;
    bottom: 10px !important;
    left: 10px !important;
  }
}

/* FINAL FIX 20260705: premium Vault previews plus fullscreen mobile viewer. */
html.magnetfolio-mobile-app body.vault-fullscreen-open {
  overflow: hidden !important;
  touch-action: none !important;
}

html.magnetfolio-mobile-app .vault-fullscreen-trigger {
  cursor: zoom-in !important;
  -webkit-tap-highlight-color: transparent !important;
}

html.magnetfolio-mobile-app .vault-fullscreen-trigger:focus-visible {
  outline: 2px solid rgba(255, 223, 139, .9) !important;
  outline-offset: 4px !important;
}

html.magnetfolio-mobile-app .vault-fullscreen-preview {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  display: none !important;
  padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 220, 135, .18), transparent 31%),
    radial-gradient(circle at 90% 16%, rgba(94, 168, 255, .12), transparent 30%),
    linear-gradient(145deg, rgba(9, 13, 25, .98), rgba(20, 21, 31, .99) 52%, rgba(5, 7, 15, .98)) !important;
  color: #fff6df !important;
}

html.magnetfolio-mobile-app .vault-fullscreen-preview.show {
  display: flex !important;
}

html.magnetfolio-mobile-app .vault-fullscreen-shell {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: 10px !important;
  width: min(1180px, 100%) !important;
  height: 100% !important;
  margin: 0 auto !important;
  min-height: 0 !important;
}

html.magnetfolio-mobile-app .vault-fullscreen-head,
html.magnetfolio-mobile-app .vault-fullscreen-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  flex: 0 0 auto !important;
}

html.magnetfolio-mobile-app .vault-fullscreen-head {
  min-height: 48px !important;
}

html.magnetfolio-mobile-app .vault-fullscreen-head div {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
}

html.magnetfolio-mobile-app .vault-fullscreen-head span {
  color: rgba(255, 230, 172, .72) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

html.magnetfolio-mobile-app .vault-fullscreen-head strong {
  color: #fff4dc !important;
  font-size: 21px !important;
  font-weight: 900 !important;
  line-height: 1.02 !important;
  white-space: nowrap !important;
}

html.magnetfolio-mobile-app .vault-fullscreen-close {
  display: grid !important;
  place-items: center !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 224, 151, .3) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .08) !important;
  color: #fff6df !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

html.magnetfolio-mobile-app .vault-fullscreen-stage {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html.magnetfolio-mobile-app .vault-fullscreen-card {
  pointer-events: none !important;
  max-width: 100% !important;
  max-height: 100% !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .52), 0 0 0 1px rgba(255, 218, 136, .2) !important;
}

html.magnetfolio-mobile-app .vault-fullscreen-card .share-actions,
html.magnetfolio-mobile-app .vault-fullscreen-card .passport-clean-controls {
  display: none !important;
}

html.magnetfolio-mobile-app .vault-fullscreen-actions {
  min-height: 52px !important;
}

html.magnetfolio-mobile-app .vault-fullscreen-actions button {
  flex: 1 1 0 !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(255, 221, 145, .26) !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, rgba(255, 232, 166, .94), rgba(218, 161, 64, .96)) !important;
  color: #17100a !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom .passport-separated-stage,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom .collection-display-stage {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book {
    display: grid !important;
    grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr) !important;
    gap: 7px !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 7px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 219, 135, .26) !important;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)),
      linear-gradient(145deg, rgba(22, 26, 41, .98), rgba(9, 11, 20, .98)) !important;
    overflow: hidden !important;
    transform: none !important;
    zoom: 1 !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .32) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-cover {
    display: grid !important;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto !important;
    align-content: stretch !important;
    gap: 5px !important;
    min-height: 214px !important;
    height: auto !important;
    padding: 8px !important;
    border-radius: 9px !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-emblem {
    display: none !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-mark {
    justify-self: start !important;
    font-size: 7px !important;
    line-height: 1 !important;
    letter-spacing: .14em !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-cover h3 {
    max-width: 100% !important;
    margin: 0 !important;
    font-size: 18px !important;
    line-height: .92 !important;
    text-align: left !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-cover p {
    max-width: 100% !important;
    margin: 0 !important;
    font-size: 7.8px !important;
    line-height: 1.12 !important;
    text-align: left !important;
    white-space: normal !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-cover-lines {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-content: start !important;
    gap: 4px !important;
    width: 100% !important;
    margin: 0 !important;
    min-height: 0 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-cover-lines span {
    min-height: 22px !important;
    padding: 4px 5px !important;
    border-radius: 6px !important;
    font-size: 7.4px !important;
    line-height: 1.05 !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-controls,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-share-actions {
    position: static !important;
    width: 100% !important;
    margin: 0 !important;
    transform: none !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-controls {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    gap: 4px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-share-actions {
    display: none !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-controls button {
    height: 24px !important;
    min-height: 24px !important;
    padding: 0 5px !important;
    border-radius: 7px !important;
    font-size: 0 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-controls button:first-child::after {
    content: "Prev";
    font-size: 8px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-controls button:last-child::after {
    content: "Next";
    font-size: 8px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-controls span {
    min-width: 42px !important;
    font-size: 7.8px !important;
    line-height: 24px !important;
    white-space: nowrap !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-spread {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
    width: 100% !important;
    min-height: 214px !important;
    height: auto !important;
    padding: 5px !important;
    border-radius: 9px !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-page,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-page-slots,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .holo-country-slot {
    min-height: 204px !important;
    height: auto !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .holo-country-slot {
    padding: 6px !important;
    border-radius: 7px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .holo-country-slot h4 {
    max-width: 100% !important;
    font-size: 10.5px !important;
    line-height: 1.02 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-hero-sticker {
    width: 52px !important;
    height: 72px !important;
    top: 44px !important;
    right: 5px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-hero-sticker img {
    height: 48px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-stamp,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-stickers,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-page-footer {
    transform: scale(.58) !important;
    transform-origin: left top !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard.collection-display-case {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 14px 0 0 !important;
    padding: 10px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 219, 135, .26) !important;
    background:
      linear-gradient(135deg, rgba(255, 245, 213, .09), rgba(255, 255, 255, .02)),
      linear-gradient(145deg, rgba(19, 23, 38, .98), rgba(8, 10, 18, .98)) !important;
    overflow: hidden !important;
    transform: none !important;
    zoom: 1 !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .32) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard .passport-clean-collection-head {
    gap: 3px !important;
    margin-bottom: 9px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard .passport-clean-collection-head span {
    font-size: 8px !important;
    letter-spacing: .13em !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard .passport-clean-collection-head strong {
    font-size: 21px !important;
    line-height: 1 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard .passport-clean-collection-head small {
    font-size: 9px !important;
    line-height: 1.15 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard .passport-clean-collection-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard .passport-clean-collection-magnet {
    min-height: 122px !important;
    padding: 7px !important;
    border-radius: 9px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard .passport-clean-collection-magnet img {
    height: 76px !important;
    max-width: 100% !important;
    object-fit: contain !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-preview {
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-shell {
    gap: 8px !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-head {
    min-height: 44px !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-head strong {
    font-size: 19px !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-close {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.passport-clean-book {
    display: grid !important;
    grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr) !important;
    gap: 7px !important;
    width: 100% !important;
    height: auto !important;
    max-height: 100% !important;
    padding: 7px !important;
    border-radius: 13px !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.passport-clean-book .passport-clean-cover,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.passport-clean-book .passport-clean-spread {
    min-height: min(58vh, 470px) !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.passport-clean-book .passport-clean-cover {
    padding: 10px !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.passport-clean-book .passport-clean-cover h3 {
    font-size: clamp(20px, 7vw, 34px) !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.passport-clean-book .passport-clean-cover-lines span {
    min-height: 28px !important;
    font-size: clamp(8px, 2.15vw, 11px) !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.passport-clean-book .holo-country-slot h4 {
    font-size: clamp(12px, 3.25vw, 18px) !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.passport-clean-collection {
    width: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.passport-clean-collection .passport-clean-collection-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.passport-clean-collection .passport-clean-collection-magnet {
    min-height: min(24vh, 185px) !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.passport-clean-collection .passport-clean-collection-magnet img {
    height: min(15vh, 118px) !important;
  }
}

/* FINAL FIX 20260704-B: structural split, 50/50 Passport, visible Collection. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom .passport-separated-stage {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 0 10px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 7px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 7px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    transform: none !important;
    zoom: 1 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-cover {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-content: start !important;
    justify-items: start !important;
    gap: 6px !important;
    min-height: 214px !important;
    height: auto !important;
    padding: 9px !important;
    border-radius: 8px !important;
    text-align: left !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-emblem {
    display: none !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-mark {
    justify-self: start !important;
    font-size: 7.5px !important;
    line-height: 1 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-cover h3 {
    max-width: 100% !important;
    margin: 0 !important;
    font-size: 20px !important;
    line-height: .95 !important;
    text-align: left !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-cover p {
    max-width: 100% !important;
    margin: 0 !important;
    font-size: 8.2px !important;
    line-height: 1.16 !important;
    text-align: left !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-cover-lines {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 4px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-cover-lines span {
    min-height: 26px !important;
    padding: 4px !important;
    border-radius: 6px !important;
    font-size: 7.4px !important;
    line-height: 1.08 !important;
    text-align: left !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-controls {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    gap: 4px !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
    position: static !important;
    transform: none !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-controls button {
    height: 24px !important;
    min-height: 24px !important;
    padding: 0 4px !important;
    border-radius: 6px !important;
    font-size: 8px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-controls span {
    min-width: 52px !important;
    font-size: 7.5px !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-share-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 4px !important;
    width: 100% !important;
    margin: 0 !important;
    position: static !important;
    transform: none !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-share-actions button {
    height: 24px !important;
    min-height: 24px !important;
    padding: 0 4px !important;
    border-radius: 6px !important;
    font-size: 8px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-share-actions button:first-child,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-share-actions button:nth-child(2) {
    font-size: 0 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-share-actions button:first-child::after {
    content: "Share";
    font-size: 8px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-share-actions button:nth-child(2)::after {
    content: "PNG";
    font-size: 8px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-share-actions button:nth-child(5) {
    grid-column: 1 / -1 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-spread {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: 100% !important;
    min-height: 214px !important;
    height: auto !important;
    padding: 5px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-page,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-page-slots,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .holo-country-slot {
    min-height: 202px !important;
    height: auto !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .holo-country-slot {
    padding: 6px !important;
    border-radius: 7px !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .holo-country-slot h4 {
    max-width: 100% !important;
    font-size: 11px !important;
    line-height: 1.05 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-hero-sticker {
    width: 54px !important;
    height: 74px !important;
    top: 42px !important;
    right: 5px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-hero-sticker img {
    height: 52px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-stamp,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-stickers,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-page-footer {
    transform: scale(.58) !important;
    transform-origin: left top !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom .collection-display-stage {
    display: block !important;
    width: 100% !important;
    margin: 12px 0 0 !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(255, 216, 123, .22) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard.collection-display-case {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 10px !important;
    border-radius: 10px !important;
    transform: none !important;
    zoom: 1 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard .passport-clean-collection-head strong {
    font-size: 22px !important;
    line-height: 1.02 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard .passport-clean-collection-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard .passport-clean-collection-magnet {
    min-height: 128px !important;
    padding: 7px !important;
    border-radius: 8px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard .passport-clean-collection-magnet img {
    height: 80px !important;
    object-fit: contain !important;
  }
}

/* MVP mobile polish pass: clear Passport/Collection split and readable Wall header. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.wall-page .wall-topbar {
    padding: 7px 6px !important;
  }

  html.magnetfolio-mobile-app body.wall-page .wall-brand-lockup {
    grid-template-columns: 96px minmax(0, 1fr) !important;
    gap: 6px !important;
  }

  html.magnetfolio-mobile-app body.wall-page .wall-brand-logo {
    width: 88px !important;
    max-width: 88px !important;
  }

  html.magnetfolio-mobile-app body.wall-page .wall-brand-lockup h1 {
    font-size: 19px !important;
  }

  html.magnetfolio-mobile-app body.wall-page .wall-brand-lockup p {
    font-size: 10.5px !important;
  }

  html.magnetfolio-mobile-app body.wall-page .wall-brand-lockup .reward-tagline {
    font-size: 8.8px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom .passport-separated-stage {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    width: 100% !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book {
    order: 1 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 8px !important;
    border-radius: 10px !important;
    transform: none !important;
    zoom: 1 !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-cover {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 12px !important;
    border-radius: 9px !important;
    justify-items: stretch !important;
    align-content: start !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-emblem {
    display: none !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-mark {
    justify-self: start !important;
    font-size: 9px !important;
    line-height: 1 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-cover h3 {
    max-width: 100% !important;
    margin: 0 !important;
    font-size: 28px !important;
    line-height: .95 !important;
    text-align: left !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-cover p {
    max-width: 100% !important;
    margin: 0 !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    text-align: left !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-cover-lines {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-cover-lines span {
    min-height: 32px !important;
    padding: 6px !important;
    border-radius: 7px !important;
    font-size: 9px !important;
    line-height: 1.08 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-controls {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    gap: 6px !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
    position: static !important;
    transform: none !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-controls button,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-share-actions button {
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 6px !important;
    border-radius: 7px !important;
    font-size: 9.5px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-controls span {
    min-width: 68px !important;
    font-size: 9.5px !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-share-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    margin: 0 !important;
    position: static !important;
    transform: none !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-share-actions button:first-child {
    font-size: 0 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-share-actions button:first-child::after {
    content: "Share";
    font-size: 9.5px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-share-actions button:nth-child(2) {
    font-size: 0 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-share-actions button:nth-child(2)::after {
    content: "PNG";
    font-size: 9.5px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-share-actions button:nth-child(5) {
    grid-column: 1 / -1 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-spread {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 7px !important;
    border-radius: 9px !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-page,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-page-slots,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .holo-country-slot {
    min-height: 188px !important;
    height: auto !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .holo-country-slot {
    padding: 8px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .holo-country-slot h4 {
    max-width: 100% !important;
    font-size: 14px !important;
    line-height: 1.05 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-hero-sticker {
    width: 70px !important;
    height: 96px !important;
    top: 48px !important;
    right: 7px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-hero-sticker img {
    height: 68px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-stamp,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-stickers,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-page-footer {
    transform: scale(.72) !important;
    transform-origin: left top !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard.collection-display-case {
    order: 2 !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 12px 0 0 !important;
    padding: 10px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255, 216, 123, .28) !important;
    transform: none !important;
    zoom: 1 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard .passport-clean-collection-head strong {
    font-size: 22px !important;
    line-height: 1.02 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard .passport-clean-collection-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard .passport-clean-collection-magnet {
    min-height: 130px !important;
    padding: 7px !important;
    border-radius: 8px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard .passport-clean-collection-magnet img {
    height: 82px !important;
    object-fit: contain !important;
  }
}

/* FINAL FIX 20260705-C: true EOF mobile Vault layout. */
html.magnetfolio-mobile-app body.vault-fullscreen-open {
  overflow: hidden !important;
  touch-action: none !important;
}

html.magnetfolio-mobile-app .vault-fullscreen-preview {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  display: none !important;
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important;
  background: linear-gradient(145deg, rgba(9, 12, 22, .99), rgba(22, 22, 32, .99) 54%, rgba(5, 7, 14, .99)) !important;
  color: #fff6df !important;
}

html.magnetfolio-mobile-app .vault-fullscreen-preview.show {
  display: flex !important;
}

html.magnetfolio-mobile-app .vault-fullscreen-shell {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: 8px !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}

html.magnetfolio-mobile-app .vault-fullscreen-head,
html.magnetfolio-mobile-app .vault-fullscreen-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

html.magnetfolio-mobile-app .vault-fullscreen-head span {
  display: block !important;
  color: rgba(255, 230, 172, .72) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

html.magnetfolio-mobile-app .vault-fullscreen-head strong {
  color: #fff4dc !important;
  font-size: 19px !important;
  font-weight: 900 !important;
  line-height: 1.02 !important;
  white-space: nowrap !important;
}

html.magnetfolio-mobile-app .vault-fullscreen-close {
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 224, 151, .3) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .08) !important;
  color: #fff6df !important;
  font-size: 16px !important;
  font-weight: 900 !important;
}

html.magnetfolio-mobile-app .vault-fullscreen-stage {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html.magnetfolio-mobile-app .vault-fullscreen-card {
  pointer-events: none !important;
  max-width: 100% !important;
  max-height: 100% !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .52), 0 0 0 1px rgba(255, 218, 136, .2) !important;
}

html.magnetfolio-mobile-app .vault-fullscreen-card .share-actions,
html.magnetfolio-mobile-app .vault-fullscreen-card .passport-clean-controls {
  display: none !important;
}

html.magnetfolio-mobile-app .vault-fullscreen-actions button {
  flex: 1 1 0 !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(255, 221, 145, .26) !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, rgba(255, 232, 166, .94), rgba(218, 161, 64, .96)) !important;
  color: #17100a !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 8px !important;
    border-radius: 13px !important;
    border: 1px solid rgba(255, 219, 135, .26) !important;
    background: linear-gradient(145deg, rgba(22, 26, 41, .98), rgba(9, 11, 20, .98)) !important;
    overflow: hidden !important;
    transform: none !important;
    zoom: 1 !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .32) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-cover {
    display: none !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-spread {
    position: relative !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: column !important;
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: min(78vw, 342px) !important;
    min-height: 268px !important;
    max-height: 342px !important;
    padding: 6px !important;
    border-radius: 11px !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-spread::before {
    display: block !important;
    width: 8px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-page,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-page-slots,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .holo-country-slot {
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-page {
    padding: 6px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .holo-country-slot {
    padding: 7px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .holo-country-slot h4 {
    max-width: 100% !important;
    font-size: 12px !important;
    line-height: 1.02 !important;
    overflow-wrap: anywhere !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-hero-sticker {
    width: 54px !important;
    height: 74px !important;
    top: 72px !important;
    right: 8px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-hero-sticker img {
    height: 48px !important;
    object-fit: contain !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-stamp {
    width: 96px !important;
    margin: 2px auto 8px !important;
    padding: 5px 8px !important;
    transform: scale(.7) !important;
    transform-origin: center top !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-stamp strong {
    font-size: 13px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-stickers,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-page-footer {
    transform: scale(.58) !important;
    transform-origin: left top !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard.collection-display-case {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 14px 0 0 !important;
    padding: 10px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 219, 135, .26) !important;
    background: linear-gradient(145deg, rgba(19, 23, 38, .98), rgba(8, 10, 18, .98)) !important;
    overflow: hidden !important;
    transform: none !important;
    zoom: 1 !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .32) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard .passport-clean-collection-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard .passport-clean-collection-magnet {
    min-height: 122px !important;
    padding: 7px !important;
    border-radius: 9px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard .passport-clean-collection-magnet img {
    height: 76px !important;
    max-width: 100% !important;
    object-fit: contain !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.passport-clean-book .passport-clean-spread {
    height: min(72vh, 560px) !important;
    max-height: 560px !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.passport-clean-book .passport-hero-sticker {
    width: 72px !important;
    height: 98px !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.passport-clean-book .passport-hero-sticker img {
    height: 64px !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.passport-clean-collection {
    width: 100% !important;
    max-height: 100% !important;
  }
}

/* FINAL FIX 20260705-B: last-pass mobile Vault preview polish. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom .passport-separated-stage,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom .collection-display-stage {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book {
    display: grid !important;
    grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr) !important;
    gap: 7px !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 7px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 219, 135, .26) !important;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)),
      linear-gradient(145deg, rgba(22, 26, 41, .98), rgba(9, 11, 20, .98)) !important;
    overflow: hidden !important;
    transform: none !important;
    zoom: 1 !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .32) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-cover {
    display: grid !important;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto !important;
    align-content: stretch !important;
    gap: 5px !important;
    min-height: 214px !important;
    height: auto !important;
    padding: 8px !important;
    border-radius: 9px !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-emblem {
    display: none !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-mark {
    justify-self: start !important;
    font-size: 7px !important;
    line-height: 1 !important;
    letter-spacing: .14em !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-cover h3 {
    max-width: 100% !important;
    margin: 0 !important;
    font-size: 18px !important;
    line-height: .92 !important;
    text-align: left !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-cover p {
    max-width: 100% !important;
    margin: 0 !important;
    font-size: 7.8px !important;
    line-height: 1.12 !important;
    text-align: left !important;
    white-space: normal !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-cover-lines {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-content: start !important;
    gap: 4px !important;
    width: 100% !important;
    margin: 0 !important;
    min-height: 0 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-cover-lines span {
    min-height: 22px !important;
    padding: 4px 5px !important;
    border-radius: 6px !important;
    font-size: 7.4px !important;
    line-height: 1.05 !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-controls {
    position: static !important;
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    gap: 4px !important;
    width: 100% !important;
    margin: 0 !important;
    transform: none !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-share-actions {
    display: none !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-controls button {
    height: 24px !important;
    min-height: 24px !important;
    padding: 0 5px !important;
    border-radius: 7px !important;
    font-size: 0 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-controls button:first-child::after {
    content: "Prev";
    font-size: 8px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-controls button:last-child::after {
    content: "Next";
    font-size: 8px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-controls span {
    min-width: 42px !important;
    font-size: 7.8px !important;
    line-height: 24px !important;
    white-space: nowrap !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-spread {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
    width: 100% !important;
    min-height: 214px !important;
    height: auto !important;
    padding: 5px !important;
    border-radius: 9px !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-page,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-page-slots,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .holo-country-slot {
    min-height: 204px !important;
    height: auto !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .holo-country-slot {
    padding: 6px !important;
    border-radius: 7px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .holo-country-slot h4 {
    max-width: 100% !important;
    font-size: 10.5px !important;
    line-height: 1.02 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-hero-sticker {
    width: 52px !important;
    height: 72px !important;
    top: 44px !important;
    right: 5px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-hero-sticker img {
    height: 48px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-stamp,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-stickers,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-page-footer {
    transform: scale(.58) !important;
    transform-origin: left top !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard.collection-display-case {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 14px 0 0 !important;
    padding: 10px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 219, 135, .26) !important;
    background:
      linear-gradient(135deg, rgba(255, 245, 213, .09), rgba(255, 255, 255, .02)),
      linear-gradient(145deg, rgba(19, 23, 38, .98), rgba(8, 10, 18, .98)) !important;
    overflow: hidden !important;
    transform: none !important;
    zoom: 1 !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .32) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard .passport-clean-collection-head {
    gap: 3px !important;
    margin-bottom: 9px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard .passport-clean-collection-head span {
    font-size: 8px !important;
    letter-spacing: .13em !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard .passport-clean-collection-head strong {
    font-size: 21px !important;
    line-height: 1 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard .passport-clean-collection-head small {
    font-size: 9px !important;
    line-height: 1.15 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard .passport-clean-collection-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard .passport-clean-collection-magnet {
    min-height: 122px !important;
    padding: 7px !important;
    border-radius: 9px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard .passport-clean-collection-magnet img {
    height: 76px !important;
    max-width: 100% !important;
    object-fit: contain !important;
  }
}

/* Wall header text must stay readable, not clipped into fragments. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.wall-page .wall-topbar {
    grid-template-columns: 1fr !important;
  }

  html.magnetfolio-mobile-app body.wall-page .wall-brand-lockup {
    display: grid !important;
    grid-template-columns: 112px minmax(0, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    align-items: center !important;
  }

  html.magnetfolio-mobile-app body.wall-page .wall-brand-lockup div {
    min-width: 0 !important;
    width: 100% !important;
    overflow: visible !important;
  }

  html.magnetfolio-mobile-app body.wall-page .wall-brand-lockup h1 {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    font-size: 20px !important;
    line-height: 1.08 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  html.magnetfolio-mobile-app body.wall-page .wall-brand-lockup p {
    display: block !important;
    width: 100% !important;
    margin: 2px 0 0 !important;
    font-size: 11px !important;
    line-height: 1.16 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  html.magnetfolio-mobile-app body.wall-page .wall-brand-lockup .reward-tagline {
    display: block !important;
    width: 100% !important;
    margin-top: 2px !important;
    font-size: 9.5px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* Definitive mobile separation: Passport is not the Collection display case. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom .passport-separated-stage {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book {
    order: 1 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 10px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    transform: none !important;
    zoom: 1 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-clean-cover {
    grid-column: auto !important;
    grid-row: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 360px !important;
    height: auto !important;
    padding: 14px !important;
    border-radius: 10px !important;
    align-content: start !important;
    justify-items: center !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-clean-mark {
    justify-self: start !important;
    font-size: 9px !important;
    line-height: 1 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-clean-emblem {
    width: 72px !important;
    height: 72px !important;
    margin: 0 auto !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-clean-emblem img {
    width: 64px !important;
    height: 64px !important;
    object-fit: contain !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-clean-cover h3 {
    max-width: 240px !important;
    margin: 0 !important;
    font-size: 34px !important;
    line-height: .92 !important;
    text-align: center !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-clean-cover p {
    max-width: 240px !important;
    margin: 0 !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    text-align: center !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-clean-cover-lines {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-clean-cover-lines span {
    display: flex !important;
    align-items: center !important;
    min-height: 36px !important;
    padding: 6px !important;
    border-radius: 7px !important;
    font-size: 9.5px !important;
    line-height: 1.12 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-clean-controls,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-share-actions {
    position: static !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    margin: 0 !important;
    transform: none !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-clean-controls {
    grid-template-columns: 1fr auto 1fr !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-clean-controls button,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-share-actions button {
    width: 100% !important;
    min-width: 0 !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 7px !important;
    border-radius: 7px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-clean-controls span {
    min-width: 74px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-share-actions button:nth-child(1)::after {
    content: "Share";
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-share-actions button:nth-child(2)::after {
    content: "PNG";
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-share-actions button:nth-child(1),
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-share-actions button:nth-child(2) {
    font-size: 0 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-share-actions button:nth-child(1)::after,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-share-actions button:nth-child(2)::after {
    font-size: 10px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-share-actions button:nth-child(5) {
    grid-column: 1 / -1 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-clean-spread {
    grid-column: auto !important;
    grid-row: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 8px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-clean-page,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-page-slots,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .holo-country-slot {
    min-height: 230px !important;
    height: auto !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .holo-country-slot {
    padding: 10px !important;
    border-radius: 10px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .holo-country-slot h4 {
    max-width: 100% !important;
    font-size: 20px !important;
    line-height: 1.05 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-hero-sticker {
    width: 96px !important;
    height: 132px !important;
    top: 54px !important;
    right: 10px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-hero-sticker img {
    height: 96px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard.collection-display-case {
    order: 2 !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 10px !important;
    border-radius: 10px !important;
    transform: none !important;
    zoom: 1 !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard .passport-clean-collection-head strong {
    font-size: 24px !important;
    line-height: 1.02 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard .passport-clean-collection-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard .passport-clean-collection-magnet {
    min-height: 138px !important;
    padding: 8px !important;
    border-radius: 8px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard .passport-clean-collection-magnet img {
    height: 86px !important;
    object-fit: contain !important;
  }
}

/* Final mobile Passport rule: keep the desktop book shape and scale it down. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom .passport-clean-stage {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book {
    order: 1 !important;
    display: grid !important;
    grid-template-columns: 250px 430px !important;
    gap: 12px !important;
    width: 710px !important;
    max-width: none !important;
    min-width: 710px !important;
    min-height: 420px !important;
    height: 420px !important;
    margin: 0 auto -204px !important;
    padding: 12px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    transform: scale(.49) !important;
    transform-origin: top center !important;
    zoom: 1 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-clean-cover {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto auto auto auto !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 396px !important;
    height: 396px !important;
    padding: 18px 16px 14px !important;
    border-radius: 16px !important;
    align-content: start !important;
    justify-items: center !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-clean-mark {
    justify-self: start !important;
    font-size: 10px !important;
    line-height: 1 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-clean-emblem {
    width: 76px !important;
    height: 76px !important;
    margin: 0 auto !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-clean-emblem img {
    width: 68px !important;
    height: 68px !important;
    object-fit: contain !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-clean-cover h3 {
    max-width: 210px !important;
    margin: 0 !important;
    font-size: 34px !important;
    line-height: .92 !important;
    text-align: center !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-clean-cover p {
    max-width: 210px !important;
    margin: 0 !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    text-align: center !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-clean-cover-lines {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-clean-cover-lines span {
    min-height: 34px !important;
    padding: 6px !important;
    border-radius: 8px !important;
    font-size: 10px !important;
    line-height: 1.08 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-clean-controls {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    margin: 0 !important;
    position: static !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-clean-controls button {
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 8px !important;
    border-radius: 8px !important;
    font-size: 10px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-clean-controls span {
    min-width: 80px !important;
    font-size: 11px !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-share-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    width: 100% !important;
    margin: 0 !important;
    position: static !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-share-actions button {
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 8px !important;
    border-radius: 8px !important;
    font-size: 10px !important;
    white-space: nowrap !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-share-actions button:nth-child(5) {
    grid-column: 1 / -1 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-clean-spread {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 396px !important;
    height: 396px !important;
    padding: 10px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-clean-page,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-page-slots,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .holo-country-slot {
    min-height: 376px !important;
    height: 376px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .holo-country-slot {
    padding: 12px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .holo-country-slot h4 {
    max-width: 100% !important;
    font-size: 20px !important;
    line-height: 1.05 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-hero-sticker {
    width: 104px !important;
    height: 146px !important;
    top: 64px !important;
    right: 10px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-hero-sticker img {
    height: 108px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard.passport-clean-collection {
    order: 2 !important;
    display: none !important;
  }
}

@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page #passportAnchorBlock {
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom .passport-clean-stage {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book {
    display: grid !important;
    grid-template-columns: 260px minmax(0, 1fr) !important;
    gap: 14px !important;
    width: 680px !important;
    max-width: none !important;
    min-height: 560px !important;
    margin: 0 auto 10px !important;
    padding: 14px !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    zoom: .48 !important;
    transform: none !important;
    transform-origin: top center !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book::before,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book::after {
    inset: 8px !important;
    border-radius: 18px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-clean-cover {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto auto auto auto !important;
    gap: 12px !important;
    min-height: 528px !important;
    height: auto !important;
    padding: 24px 20px 18px !important;
    border-radius: 18px !important;
    justify-items: center !important;
    align-content: start !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-clean-cover::before {
    inset: 12px !important;
    border-radius: 15px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-clean-mark {
    justify-self: start !important;
    font-size: 11px !important;
    line-height: 1 !important;
    letter-spacing: 4px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-clean-emblem {
    width: 112px !important;
    height: 112px !important;
    margin: 2px auto 0 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-clean-emblem img {
    width: 100px !important;
    height: 100px !important;
    object-fit: contain !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-clean-cover h3 {
    max-width: 220px !important;
    margin: 0 !important;
    font-size: 42px !important;
    line-height: .92 !important;
    text-align: center !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-clean-cover p {
    max-width: 220px !important;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-clean-cover-lines {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-clean-cover-lines span {
    display: flex !important;
    align-items: center !important;
    min-height: 46px !important;
    padding: 9px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    text-align: left !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-clean-controls {
    position: static !important;
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
    transform: none !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-clean-controls button {
    width: 100% !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 10px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    color: #1b1306 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-clean-controls span {
    min-width: 94px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-share-actions {
    position: static !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
    transform: none !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-share-actions button {
    width: 100% !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 10px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-share-actions button:nth-child(5) {
    grid-column: 1 / -1 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-clean-spread {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    min-height: 528px !important;
    padding: 12px !important;
    border-radius: 18px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-clean-page,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-page-slots,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .holo-country-slot {
    min-height: 500px !important;
    height: auto !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .holo-country-slot {
    padding: 14px !important;
    border-radius: 14px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .holo-country-slot h4 {
    max-width: 100% !important;
    font-size: 24px !important;
    line-height: 1.05 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-hero-sticker {
    width: 118px !important;
    height: 164px !important;
    top: 72px !important;
    right: 12px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-hero-sticker img {
    height: 124px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard.passport-clean-collection {
    width: 620px !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 auto 12px !important;
    padding: 16px !important;
    border-radius: 22px !important;
    zoom: .52 !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard .passport-clean-collection-head {
    display: grid !important;
    gap: 8px !important;
    padding: 0 0 14px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard .passport-clean-collection-head span {
    font-size: 12px !important;
    line-height: 1 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard .passport-clean-collection-head strong {
    font-size: 44px !important;
    line-height: .95 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard .passport-clean-collection-head small {
    width: 100% !important;
    padding: 12px 16px !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard .collection-share-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 0 14px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard .collection-share-actions button {
    width: 100% !important;
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard .collection-share-actions button:nth-child(5) {
    grid-column: 1 / -1 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard .passport-clean-collection-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard .passport-clean-collection-magnet {
    min-height: 190px !important;
    padding: 12px !important;
    border-radius: 18px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard .passport-clean-collection-magnet img {
    height: 124px !important;
    object-fit: contain !important;
  }
}

@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.feature-page .app-header,
  html.magnetfolio-mobile-app body.vault-feature-page .app-header {
    min-height: 58px !important;
    padding: 8px !important;
    gap: 8px !important;
  }

  html.magnetfolio-mobile-app body.feature-page .brand-header-lockup,
  html.magnetfolio-mobile-app body.vault-feature-page .brand-header-lockup {
    width: 118px !important;
    max-width: 118px !important;
    height: 54px !important;
    padding: 5px !important;
    border-radius: 8px !important;
  }

  html.magnetfolio-mobile-app body.feature-page .brand-header-lockup img,
  html.magnetfolio-mobile-app body.vault-feature-page .brand-header-lockup img {
    width: 94px !important;
    max-width: 94px !important;
  }

  html.magnetfolio-mobile-app body.feature-page .page-title-lockup h1,
  html.magnetfolio-mobile-app body.vault-feature-page .page-title-lockup h1 {
    font-size: 23px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html.magnetfolio-mobile-app body.feature-page .page-title-lockup p,
  html.magnetfolio-mobile-app body.vault-feature-page .page-title-lockup p {
    font-size: 10px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html.magnetfolio-mobile-app body.feature-page .feature-shell,
  html.magnetfolio-mobile-app body.vault-feature-page main.collection-container.vault-experience {
    padding-top: 8px !important;
  }

  html.magnetfolio-mobile-app body.feature-page .feature-hero,
  html.magnetfolio-mobile-app body.feature-page .reward-gift-panel,
  html.magnetfolio-mobile-app body.feature-page .milestone-progress-panel {
    min-height: 0 !important;
    margin: 0 0 8px !important;
    padding: 10px !important;
    border-radius: 8px !important;
  }

  html.magnetfolio-mobile-app body.feature-page .feature-hero h2,
  html.magnetfolio-mobile-app body.feature-page .reward-gift-panel h2,
  html.magnetfolio-mobile-app body.feature-page .section-title h2 {
    font-size: 20px !important;
    line-height: 1.08 !important;
    max-width: 100% !important;
  }

  html.magnetfolio-mobile-app body.feature-page .feature-hero p,
  html.magnetfolio-mobile-app body.feature-page .reward-gift-panel p,
  html.magnetfolio-mobile-app body.feature-page .section-title p {
    font-size: 11px !important;
    line-height: 1.3 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultShowcase .premium-vault-hero {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    min-height: 0 !important;
    margin: 0 0 8px !important;
    padding: 10px !important;
    border-radius: 8px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultShowcase .vault-collector-copy h2 {
    font-size: 25px !important;
    line-height: 1 !important;
    margin: 4px 0 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultShowcase .vault-collector-copy p {
    font-size: 11px !important;
    line-height: 1.25 !important;
    margin: 0 0 7px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultShowcase .vault-hero-magnet {
    display: none !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultShowcase .vault-progress-panel {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 6px 0 0 !important;
    padding: 8px !important;
    border-radius: 8px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultShowcase .vault-progress-ring {
    width: 68px !important;
    height: 68px !important;
    min-width: 68px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultShowcase .vault-progress-ring strong {
    font-size: 18px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultShowcase .vault-progress-metrics {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultShowcase .vault-progress-metrics span {
    padding: 6px !important;
    border-radius: 7px !important;
    font-size: 9px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultShowcase .vault-recent-strip,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultShowcase .vault-country-strip {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin-top: 8px !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultShowcase .vault-recent-strip button,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultShowcase .vault-country-strip button {
    width: 100% !important;
    min-height: 42px !important;
    padding: 5px !important;
    border-radius: 7px !important;
    font-size: 9px !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultShowcase .vault-recent-strip img {
    width: 100% !important;
    height: 46px !important;
    object-fit: cover !important;
    border-radius: 6px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .passport-anchor-block,
  html.magnetfolio-mobile-app body.vault-feature-page .custom-vault-entry,
  html.magnetfolio-mobile-app body.vault-feature-page .gift-collection-stage {
    padding: 9px !important;
    margin-bottom: 8px !important;
  }

  html.magnetfolio-mobile-app body.feature-page .milestone-progress-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html.magnetfolio-mobile-app body.feature-page .milestone-card {
    min-height: 176px !important;
    padding: 9px !important;
  }

  html.magnetfolio-mobile-app body.feature-page .milestone-card h3 {
    font-size: 12px !important;
    line-height: 1.1 !important;
  }

  html.magnetfolio-mobile-app body.feature-page .milestone-card p {
    font-size: 9.5px !important;
    line-height: 1.22 !important;
  }

  html.magnetfolio-mobile-app body.feature-page .milestone-reward {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 52px !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: 58px !important;
    padding: 7px !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app body.feature-page .milestone-reward span,
  html.magnetfolio-mobile-app body.feature-page .milestone-reward strong {
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
    overflow-wrap: anywhere !important;
  }

  html.magnetfolio-mobile-app body.feature-page .milestone-reward .reward-claim-button {
    justify-self: end !important;
    width: 52px !important;
    max-width: 52px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    overflow: hidden !important;
    font-size: 0 !important;
    color: transparent !important;
  }

  html.magnetfolio-mobile-app body.feature-page .milestone-reward .reward-claim-button::after {
    content: "Claim";
    font-size: 10px !important;
    line-height: 1 !important;
    color: #17110b !important;
  }

  html.magnetfolio-mobile-app body.feature-page .gift-free-panel strong,
  html.magnetfolio-mobile-app body.feature-page .gift-free-panel p {
    font-size: 11px !important;
    line-height: 1.28 !important;
  }

  html.magnetfolio-mobile-app body.feature-page .gift-card-copy button {
    font-size: 0 !important;
    color: transparent !important;
  }

  html.magnetfolio-mobile-app body.feature-page .gift-card-copy button::after {
    content: "Gift";
    font-size: 10px !important;
    color: #17110b !important;
  }

  html.magnetfolio-mobile-app body.feature-page .map-hero,
  html.magnetfolio-mobile-app body.feature-page .world-map-panel,
  html.magnetfolio-mobile-app body.feature-page .map-panel {
    min-height: 0 !important;
    padding: 10px !important;
    border-radius: 8px !important;
  }

  html.magnetfolio-mobile-app body.feature-page .world-map-panel h2,
  html.magnetfolio-mobile-app body.feature-page .map-panel h2 {
    font-size: 20px !important;
    line-height: 1.08 !important;
  }

  html.magnetfolio-mobile-app body.feature-page #worldMap,
  html.magnetfolio-mobile-app body.feature-page .world-map {
    max-height: 460px !important;
    border-radius: 8px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: min(336px, 100%) !important;
    max-width: 336px !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 8px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book::before,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book::after {
    inset: 4px !important;
    border-radius: 10px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-clean-cover {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto auto auto auto !important;
    justify-items: center !important;
    gap: 7px !important;
    min-height: 500px !important;
    height: auto !important;
    padding: 14px 12px 12px !important;
    border-radius: 10px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-clean-cover::before {
    inset: 8px !important;
    border-radius: 9px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-clean-mark {
    justify-self: start !important;
    font-size: 9px !important;
    line-height: 1 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-clean-emblem {
    width: 70px !important;
    height: 70px !important;
    margin: 2px auto 0 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-clean-emblem img {
    width: 62px !important;
    height: 62px !important;
    object-fit: contain !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-clean-cover h3 {
    max-width: 230px !important;
    margin: 0 !important;
    font-size: 30px !important;
    line-height: .94 !important;
    text-align: center !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-clean-cover p {
    max-width: 210px !important;
    margin: 0 !important;
    font-size: 9.5px !important;
    line-height: 1.25 !important;
    text-align: center !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-clean-cover-lines {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 6px 0 0 !important;
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
    align-self: auto !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-clean-cover-lines span {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 38px !important;
    padding: 6px 7px !important;
    border-radius: 7px !important;
    font-size: 9.5px !important;
    line-height: 1.12 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    text-align: left !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-clean-controls {
    position: static !important;
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 4px 0 0 !important;
    grid-column: 1 / -1 !important;
    align-self: auto !important;
    justify-self: stretch !important;
    transform: none !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-clean-controls button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 6px !important;
    border-radius: 7px !important;
    font-size: 0 !important;
    color: transparent !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-clean-controls button:first-child::after {
    content: "Prev";
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-clean-controls button:last-child::after {
    content: "Next";
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-clean-controls button::after {
    font-size: 9.5px !important;
    color: #1c1406 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-clean-controls span {
    order: 0 !important;
    min-width: 70px !important;
    padding: 0 !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-share-actions {
    position: static !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 4px 0 0 !important;
    grid-column: 1 / -1 !important;
    align-self: auto !important;
    justify-self: stretch !important;
    transform: none !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-share-actions button {
    width: 100% !important;
    min-width: 0 !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 7px !important;
    border-radius: 7px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-share-actions button:nth-child(1) {
    font-size: 0 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-share-actions button:nth-child(1)::after {
    content: "Share";
    font-size: 10px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-share-actions button:nth-child(2) {
    font-size: 0 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-share-actions button:nth-child(2)::after {
    content: "PNG";
    font-size: 10px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-share-actions button:nth-child(5) {
    grid-column: 1 / -1 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-clean-spread {
    min-height: 0 !important;
    padding: 8px !important;
    border-radius: 10px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-clean-page,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-page-slots,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .holo-country-slot {
    min-height: 220px !important;
    height: auto !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .holo-country-slot {
    padding: 10px !important;
    border-radius: 10px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .holo-country-slot h4 {
    font-size: 18px !important;
    line-height: 1.05 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-hero-sticker {
    width: 92px !important;
    height: 126px !important;
    top: 42px !important;
    right: 8px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-hero-sticker img {
    height: 94px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-clean-stickers,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-clean-stamp,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-page-footer {
    transform: scale(.82) !important;
    transform-origin: left top !important;
  }
}

/* FINAL OVERRIDE 20260704: wins over all previous mobile Passport experiments. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.wall-page .wall-topbar {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  html.magnetfolio-mobile-app body.wall-page .wall-brand-lockup {
    grid-template-columns: 94px minmax(0, 1fr) !important;
    gap: 6px !important;
  }

  html.magnetfolio-mobile-app body.wall-page .wall-brand-logo {
    width: 86px !important;
    max-width: 86px !important;
  }

  html.magnetfolio-mobile-app body.wall-page .wall-brand-lockup h1 {
    font-size: 21px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html.magnetfolio-mobile-app body.wall-page .wall-brand-lockup p {
    font-size: 8.8px !important;
    line-height: 1.08 !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  html.magnetfolio-mobile-app body.wall-page .wall-brand-lockup .reward-tagline {
    font-size: 7.2px !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom .passport-separated-stage {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    width: 100% !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book {
    order: 1 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 8px !important;
    border-radius: 10px !important;
    transform: none !important;
    zoom: 1 !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-cover {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 12px !important;
    border-radius: 9px !important;
    justify-items: stretch !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-emblem {
    display: none !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-mark {
    justify-self: start !important;
    font-size: 9px !important;
    line-height: 1 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-cover h3 {
    margin: 0 !important;
    font-size: 28px !important;
    line-height: .95 !important;
    text-align: left !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-cover p {
    margin: 0 !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    text-align: left !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-cover-lines {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-cover-lines span {
    min-height: 32px !important;
    padding: 6px !important;
    border-radius: 7px !important;
    font-size: 9px !important;
    line-height: 1.08 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-controls,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-share-actions {
    position: static !important;
    display: grid !important;
    gap: 6px !important;
    width: 100% !important;
    margin: 0 !important;
    transform: none !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-controls {
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-share-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-controls button,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-share-actions button {
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 6px !important;
    border-radius: 7px !important;
    font-size: 9.5px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-controls span {
    min-width: 68px !important;
    font-size: 9.5px !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-share-actions button:first-child,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-share-actions button:nth-child(2) {
    font-size: 0 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-share-actions button:first-child::after {
    content: "Share";
    font-size: 9.5px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-share-actions button:nth-child(2)::after {
    content: "PNG";
    font-size: 9.5px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-share-actions button:nth-child(5) {
    grid-column: 1 / -1 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-spread {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 7px !important;
    border-radius: 9px !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-page,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-page-slots,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .holo-country-slot {
    min-height: 188px !important;
    height: auto !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .holo-country-slot {
    padding: 8px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .holo-country-slot h4 {
    max-width: 100% !important;
    font-size: 14px !important;
    line-height: 1.05 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-hero-sticker {
    width: 70px !important;
    height: 96px !important;
    top: 48px !important;
    right: 7px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-hero-sticker img {
    height: 68px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-stamp,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-stickers,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-page-footer {
    transform: scale(.72) !important;
    transform-origin: left top !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard.collection-display-case {
    order: 2 !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 12px 0 0 !important;
    padding: 10px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255, 216, 123, .28) !important;
    transform: none !important;
    zoom: 1 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard .passport-clean-collection-head strong {
    font-size: 22px !important;
    line-height: 1.02 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard .passport-clean-collection-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard .passport-clean-collection-magnet {
    min-height: 130px !important;
    padding: 7px !important;
    border-radius: 8px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard .passport-clean-collection-magnet img {
    height: 82px !important;
    object-fit: contain !important;
  }
}

/* FINAL FIX 20260705-D: true EOF mobile Vault layout. */
html.magnetfolio-mobile-app body.vault-fullscreen-open {
  overflow: hidden !important;
  touch-action: none !important;
}

html.magnetfolio-mobile-app .vault-fullscreen-preview {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  display: none !important;
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important;
  background: linear-gradient(145deg, rgba(9, 12, 22, .99), rgba(22, 22, 32, .99) 54%, rgba(5, 7, 14, .99)) !important;
  color: #fff6df !important;
}

html.magnetfolio-mobile-app .vault-fullscreen-preview.show {
  display: flex !important;
}

html.magnetfolio-mobile-app .vault-fullscreen-shell {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: 8px !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}

html.magnetfolio-mobile-app .vault-fullscreen-head,
html.magnetfolio-mobile-app .vault-fullscreen-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

html.magnetfolio-mobile-app .vault-fullscreen-head span {
  display: block !important;
  color: rgba(255, 230, 172, .72) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

html.magnetfolio-mobile-app .vault-fullscreen-head strong {
  color: #fff4dc !important;
  font-size: 19px !important;
  font-weight: 900 !important;
  line-height: 1.02 !important;
  white-space: nowrap !important;
}

html.magnetfolio-mobile-app .vault-fullscreen-close {
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 224, 151, .3) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .08) !important;
  color: #fff6df !important;
  font-size: 16px !important;
  font-weight: 900 !important;
}

html.magnetfolio-mobile-app .vault-fullscreen-stage {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html.magnetfolio-mobile-app .vault-fullscreen-card {
  pointer-events: none !important;
  max-width: 100% !important;
  max-height: 100% !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .52), 0 0 0 1px rgba(255, 218, 136, .2) !important;
}

html.magnetfolio-mobile-app .vault-fullscreen-card .share-actions,
html.magnetfolio-mobile-app .vault-fullscreen-card .passport-clean-controls {
  display: none !important;
}

html.magnetfolio-mobile-app .vault-fullscreen-actions button {
  flex: 1 1 0 !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(255, 221, 145, .26) !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, rgba(255, 232, 166, .94), rgba(218, 161, 64, .96)) !important;
  color: #17100a !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 8px !important;
    border-radius: 13px !important;
    border: 1px solid rgba(255, 219, 135, .26) !important;
    background: linear-gradient(145deg, rgba(22, 26, 41, .98), rgba(9, 11, 20, .98)) !important;
    overflow: hidden !important;
    transform: none !important;
    zoom: 1 !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .32) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-cover {
    display: none !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-spread {
    position: relative !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: column !important;
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: min(78vw, 342px) !important;
    min-height: 268px !important;
    max-height: 342px !important;
    padding: 6px !important;
    border-radius: 11px !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-spread::before {
    display: block !important;
    width: 8px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-page,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-page-slots,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .holo-country-slot {
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-page {
    padding: 6px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .holo-country-slot {
    padding: 7px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .holo-country-slot h4 {
    max-width: 100% !important;
    font-size: 12px !important;
    line-height: 1.02 !important;
    overflow-wrap: anywhere !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-hero-sticker {
    width: 54px !important;
    height: 74px !important;
    top: 72px !important;
    right: 8px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-hero-sticker img {
    height: 48px !important;
    object-fit: contain !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-stamp {
    width: 96px !important;
    margin: 2px auto 8px !important;
    padding: 5px 8px !important;
    transform: scale(.7) !important;
    transform-origin: center top !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-stamp strong {
    font-size: 13px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-clean-stickers,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard .passport-page-footer {
    transform: scale(.58) !important;
    transform-origin: left top !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard.collection-display-case {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 14px 0 0 !important;
    padding: 10px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 219, 135, .26) !important;
    background: linear-gradient(145deg, rgba(19, 23, 38, .98), rgba(8, 10, 18, .98)) !important;
    overflow: hidden !important;
    transform: none !important;
    zoom: 1 !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .32) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard .passport-clean-collection-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard .passport-clean-collection-magnet {
    min-height: 122px !important;
    padding: 7px !important;
    border-radius: 9px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard .passport-clean-collection-magnet img {
    height: 76px !important;
    max-width: 100% !important;
    object-fit: contain !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.passport-clean-book .passport-clean-spread {
    height: min(72vh, 560px) !important;
    max-height: 560px !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.passport-clean-book .passport-hero-sticker {
    width: 72px !important;
    height: 98px !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.passport-clean-book .passport-hero-sticker img {
    height: 64px !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.passport-clean-collection {
    width: 100% !important;
    max-height: 100% !important;
  }
}

/* FINAL FIX 20260705-E: target Passport wherever the Vault renderer places it. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.passport-clean-book {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 8px !important;
    border-radius: 13px !important;
    overflow: hidden !important;
    transform: none !important;
    zoom: 1 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.passport-clean-book .passport-clean-cover {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.passport-clean-book .passport-clean-spread {
    position: relative !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: column !important;
    grid-column: auto !important;
    grid-row: auto !important;
    gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: min(78vw, 342px) !important;
    min-height: 268px !important;
    max-height: 342px !important;
    padding: 6px !important;
    border-radius: 11px !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.passport-clean-book .passport-clean-page,
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.passport-clean-book .passport-page-slots,
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.passport-clean-book .holo-country-slot {
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.passport-clean-book .passport-clean-page {
    padding: 6px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.passport-clean-book .holo-country-slot {
    padding: 7px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.passport-clean-book .holo-country-slot h4 {
    max-width: 100% !important;
    font-size: 12px !important;
    line-height: 1.02 !important;
    overflow-wrap: anywhere !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.passport-clean-book .passport-hero-sticker {
    width: 54px !important;
    height: 74px !important;
    top: 72px !important;
    right: 8px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.passport-clean-book .passport-hero-sticker img {
    height: 48px !important;
    object-fit: contain !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.passport-clean-book .passport-clean-stamp {
    width: 96px !important;
    margin: 2px auto 8px !important;
    padding: 5px 8px !important;
    transform: scale(.7) !important;
    transform-origin: center top !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.passport-clean-book .passport-clean-stickers,
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.passport-clean-book .passport-page-footer {
    transform: scale(.58) !important;
    transform-origin: left top !important;
  }
}

/* FINAL FIX 20260705-F: native mobile Passport component. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page .mobile-passport-stage {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 10px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255, 220, 142, .32) !important;
    background:
      linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.015)),
      linear-gradient(145deg, rgba(20, 25, 39, .98), rgba(7, 9, 17, .98)) !important;
    overflow: hidden !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .34) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .mobile-passport-head {
    display: grid !important;
    gap: 3px !important;
    text-align: left !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .mobile-passport-head span {
    color: #e5bd63 !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: .18em !important;
    line-height: 1 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .mobile-passport-head strong {
    color: #fff2d3 !important;
    font-size: 23px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .mobile-passport-head small {
    color: rgba(255, 244, 218, .74) !important;
    font-size: 9.5px !important;
    font-weight: 750 !important;
    line-height: 1.18 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .mobile-passport-spread {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    min-height: 258px !important;
    padding: 6px !important;
    border-radius: 11px !important;
    background:
      linear-gradient(90deg, transparent calc(50% - 1px), rgba(255, 226, 159, .36) 50%, transparent calc(50% + 1px)),
      linear-gradient(135deg, rgba(248, 227, 171, .16), rgba(255,255,255,.04)) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 219, 139, .2) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .mobile-passport-page {
    position: relative !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto auto !important;
    gap: 6px !important;
    min-height: 246px !important;
    padding: 8px !important;
    border-radius: 9px !important;
    background:
      linear-gradient(145deg, rgba(255, 241, 195, .96), rgba(233, 207, 139, .92)) !important;
    color: #211609 !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .mobile-passport-page::after {
    content: "PASSPORT" !important;
    position: absolute !important;
    right: -14px !important;
    bottom: 28px !important;
    color: rgba(91, 61, 22, .08) !important;
    font-size: 36px !important;
    font-weight: 950 !important;
    transform: rotate(-18deg) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .mobile-passport-page.is-empty {
    place-items: center !important;
    color: rgba(56, 41, 18, .45) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .mobile-passport-page-top {
    position: relative !important;
    z-index: 1 !important;
    display: grid !important;
    gap: 2px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .mobile-passport-page-top span {
    color: #9a6b24 !important;
    font-size: 8px !important;
    font-weight: 950 !important;
    letter-spacing: .12em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .mobile-passport-page-top b {
    color: #1d160d !important;
    font-size: 16px !important;
    font-weight: 950 !important;
    line-height: 1.02 !important;
    overflow-wrap: anywhere !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .mobile-passport-sticker {
    position: relative !important;
    z-index: 1 !important;
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    min-height: 112px !important;
    padding: 6px !important;
    border: 1px solid rgba(255,255,255,.66) !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.55) !important;
    box-shadow: 0 16px 26px rgba(76, 48, 8, .16) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .mobile-passport-sticker img {
    width: 94px !important;
    max-width: 100% !important;
    height: 86px !important;
    object-fit: contain !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .mobile-passport-page > strong {
    position: relative !important;
    z-index: 1 !important;
    color: #211609 !important;
    font-size: 14px !important;
    font-weight: 950 !important;
    line-height: 1.02 !important;
    overflow-wrap: anywhere !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .mobile-passport-page > small {
    position: relative !important;
    z-index: 1 !important;
    justify-self: start !important;
    padding: 4px 8px !important;
    border: 1px solid rgba(255, 96, 120, .65) !important;
    border-radius: 999px !important;
    color: #d95b6d !important;
    font-size: 9px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .mobile-passport-controls {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    gap: 6px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .mobile-passport-controls button {
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 8px !important;
    border: 1px solid rgba(255, 220, 142, .32) !important;
    border-radius: 9px !important;
    background: linear-gradient(135deg, #ffe891, #d9a23c) !important;
    color: #1b1206 !important;
    font-size: 10px !important;
    font-weight: 950 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .mobile-passport-controls button:disabled {
    opacity: .42 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .mobile-passport-controls span {
    color: #f5cf71 !important;
    font-size: 10px !important;
    font-weight: 950 !important;
    white-space: nowrap !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage #passportShareCard.mobile-passport-book,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .mobile-passport-book.vault-fullscreen-card {
    max-height: 100% !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .mobile-passport-book .mobile-passport-spread {
    min-height: min(64vh, 560px) !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .mobile-passport-book .mobile-passport-page {
    min-height: min(62vh, 540px) !important;
  }
}

/* FINAL FIX 20260705-G: clean Passport fullscreen composition. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    align-content: stretch !important;
    gap: 10px !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    padding: 10px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    transform: none !important;
    zoom: 1 !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-head {
    display: grid !important;
    gap: 3px !important;
    padding: 0 0 8px !important;
    border-bottom: 1px solid rgba(255, 221, 145, .2) !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-head span {
    font-size: 9px !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-head strong {
    font-size: 22px !important;
    line-height: 1 !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-head small {
    font-size: 9px !important;
    line-height: 1.12 !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-controls {
    display: none !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-spread {
    align-self: stretch !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 6px !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-page {
    min-height: 0 !important;
    height: 100% !important;
    padding: 8px !important;
    gap: 6px !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-sticker {
    min-height: 0 !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-sticker img {
    width: min(118px, 92%) !important;
    height: min(17vh, 112px) !important;
  }
}

/* FINAL FIX 20260705-H: denser premium Passport fullscreen pages. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-page {
    grid-template-rows: auto auto auto auto !important;
    align-content: start !important;
    gap: 10px !important;
    padding: 10px !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-sticker {
    align-self: start !important;
    min-height: 0 !important;
    height: min(26vh, 230px) !important;
    padding: 10px !important;
    border-radius: 14px !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-sticker img {
    width: min(172px, 96%) !important;
    height: min(20vh, 156px) !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-page-top b {
    font-size: 22px !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-page > strong {
    font-size: 20px !important;
    line-height: 1.02 !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-page > small {
    font-size: 10px !important;
    padding: 6px 10px !important;
  }
}

/* FINAL FIX 20260705-I: reduce white magnet frame and polish rewards/collection density. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page .mobile-passport-sticker {
    min-height: 96px !important;
    padding: 5px !important;
    border-radius: 11px !important;
    background:
      radial-gradient(circle at 50% 18%, rgba(255, 255, 255, .82), rgba(255, 252, 238, .5) 48%, rgba(255, 243, 205, .24) 100%) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .52), 0 10px 20px rgba(76, 48, 8, .12) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .mobile-passport-sticker img {
    width: min(118px, 96%) !important;
    height: 88px !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-page {
    gap: 8px !important;
    padding: 10px !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-sticker {
    width: min(250px, 100%) !important;
    height: auto !important;
    min-height: 0 !important;
    justify-self: center !important;
    padding: 10px !important;
    border-radius: 14px !important;
    background:
      radial-gradient(circle at 50% 20%, rgba(255, 255, 255, .86), rgba(255, 251, 236, .5) 54%, rgba(255, 240, 198, .22) 100%) !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-sticker img {
    width: min(190px, 100%) !important;
    height: min(18vh, 150px) !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-page-top b {
    font-size: 21px !important;
  }

  html.magnetfolio-mobile-app body.rewards-page .reward-card,
  html.magnetfolio-mobile-app body.rewards-page .milestone-card {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app body.rewards-page .reward-card button,
  html.magnetfolio-mobile-app body.rewards-page .milestone-card button {
    min-width: 0 !important;
    white-space: nowrap !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #collectionShareCard .passport-clean-collection-magnet {
    overflow: hidden !important;
  }
}

/* FINAL FIX 20260705-J: tighten the Passport magnet plate. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page .mobile-passport-sticker {
    justify-self: center !important;
    width: min(176px, 92%) !important;
    min-height: 0 !important;
    padding: 7px !important;
    border-radius: 12px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .mobile-passport-sticker img {
    width: min(150px, 100%) !important;
    height: 104px !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-sticker {
    width: min(218px, 90%) !important;
    padding: 8px !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-sticker img {
    width: min(190px, 100%) !important;
    height: min(17vh, 142px) !important;
  }
}

/* FINAL FIX 20260705-K: prevent Collection summary truncation on mobile. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page #collectionShareCard .passport-clean-collection-head small {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 12px !important;
    font-size: 8.4px !important;
    line-height: 1.2 !important;
    letter-spacing: .08em !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
}

/* FINAL FIX 20260705-L: fullscreen viewer must fit the phone, not become a long page. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app .vault-fullscreen-preview {
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-shell {
    grid-template-rows: 60px minmax(0, 1fr) 58px !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    gap: 8px !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-head {
    min-height: 0 !important;
    height: 60px !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-head strong {
    font-size: 18px !important;
    line-height: 1 !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-close {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage {
    align-items: stretch !important;
    justify-content: center !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-actions {
    height: 58px !important;
    min-height: 58px !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-actions button {
    height: 48px !important;
    min-height: 48px !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book {
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    grid-template-rows: 76px minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-head {
    min-height: 0 !important;
    height: 76px !important;
    padding-bottom: 6px !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-head strong {
    font-size: 20px !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-head small {
    font-size: 8.4px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-spread {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    align-self: stretch !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-page {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
    grid-template-rows: auto auto auto auto !important;
    align-content: start !important;
    gap: 7px !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-sticker {
    width: min(206px, 92%) !important;
    max-height: 150px !important;
    padding: 8px !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-sticker img {
    width: min(176px, 100%) !important;
    height: min(15vh, 124px) !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-page > strong {
    font-size: 18px !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-page > small {
    font-size: 9px !important;
    padding: 5px 9px !important;
  }
}

/* FINAL FIX 20260705-M: one-stamp passport pages should not render an empty half in fullscreen. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode {
    min-height: 0 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .mobile-passport-spread,
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .single-stamp-spread {
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    align-items: stretch !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .mobile-passport-page.is-featured-single {
    width: 100% !important;
    max-width: 360px !important;
    justify-self: center !important;
    min-height: 0 !important;
    padding: 12px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .mobile-passport-page.is-featured-single .mobile-passport-sticker {
    width: min(214px, 88%) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .mobile-passport-page.is-featured-single .mobile-passport-sticker img {
    width: min(184px, 100%) !important;
    height: 128px !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode {
    grid-template-rows: 74px minmax(0, 1fr) !important;
    align-content: stretch !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .mobile-passport-spread,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .single-stamp-spread {
    grid-template-columns: minmax(0, 1fr) !important;
    place-items: center !important;
    padding: 8px 10px 10px !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .mobile-passport-page.is-featured-single {
    width: min(390px, 100%) !important;
    height: auto !important;
    max-height: 100% !important;
    min-height: 0 !important;
    align-content: center !important;
    justify-self: center !important;
    padding: 14px !important;
    gap: 10px !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .mobile-passport-page.is-featured-single .mobile-passport-page-top b {
    font-size: 24px !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .mobile-passport-page.is-featured-single .mobile-passport-sticker {
    width: min(282px, 88%) !important;
    max-height: none !important;
    padding: 10px !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .mobile-passport-page.is-featured-single .mobile-passport-sticker img {
    width: min(242px, 100%) !important;
    height: min(22vh, 176px) !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .mobile-passport-page.is-featured-single > strong {
    font-size: 22px !important;
    line-height: 1.05 !important;
  }
}

/* FINAL FIX 20260705-N: Passport fullscreen should be compact, not tall empty paper. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app .vault-fullscreen-stage {
    align-items: center !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book {
    height: auto !important;
    max-height: 100% !important;
    align-self: center !important;
    grid-template-rows: auto auto !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-head {
    height: auto !important;
    min-height: 0 !important;
    padding: 12px 10px 10px !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-spread {
    height: auto !important;
    max-height: none !important;
    align-items: start !important;
    padding: 8px 10px 12px !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-page {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    align-content: start !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-page-top b {
    font-size: 22px !important;
    line-height: .96 !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-sticker {
    width: min(220px, 90%) !important;
    padding: 8px !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-sticker img {
    width: min(188px, 100%) !important;
    height: min(18vh, 148px) !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-page > strong {
    font-size: 20px !important;
    line-height: 1.02 !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .mobile-passport-page.is-featured-single {
    height: auto !important;
    align-content: start !important;
  }
}

/* FINAL FIX 20260705-O: Mobile Vault Hero compact */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-hero-compact {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 8px !important;
    padding: 10px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 219, 135, .26) !important;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015)),
      linear-gradient(145deg, rgba(22, 26, 41, .98), rgba(9, 11, 20, .98)) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .3) !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-hero-row {
    display: grid !important;
    grid-template-columns: 68px 68px minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-progress-ring {
    position: relative !important;
    display: grid !important;
    justify-items: center !important;
    align-content: center !important;
    gap: 1px !important;
    width: 68px !important;
    height: 68px !important;
    border-radius: 50% !important;
    background: conic-gradient(#f5cf71 calc(var(--vault-ring-pct, 0) * 1%), rgba(255, 255, 255, .08) 0) !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-progress-ring::before {
    content: "" !important;
    position: absolute !important;
    inset: 6px !important;
    border-radius: 50% !important;
    background: linear-gradient(145deg, rgba(22, 26, 41, .98), rgba(9, 11, 20, .98)) !important;
    border: 1px solid rgba(255, 219, 135, .22) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-progress-ring strong {
    position: relative !important;
    z-index: 1 !important;
    font-size: 13px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    color: #f5cf71 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-progress-ring span {
    position: relative !important;
    z-index: 1 !important;
    font-size: 7px !important;
    font-weight: 800 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, .55) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-globe-btn {
    display: grid !important;
    grid-template-rows: auto auto auto !important;
    justify-items: center !important;
    align-content: center !important;
    gap: 2px !important;
    width: 68px !important;
    height: 68px !important;
    margin: 0 !important;
    padding: 6px 2px !important;
    border: 1px solid rgba(255, 219, 135, .22) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, .03) !important;
    color: inherit !important;
    font: inherit !important;
    appearance: none !important;
    -webkit-appearance: none !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-globe-btn strong {
    font-size: 9px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    color: #f5cf71 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-globe-btn small {
    font-size: 6.5px !important;
    font-weight: 800 !important;
    letter-spacing: .05em !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, .5) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-globe {
    position: relative !important;
    display: block !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle at 32% 28%, rgba(255, 232, 178, .95), rgba(139, 101, 32, .5) 55%, rgba(10, 8, 4, .95) 100%) !important;
    box-shadow: inset -3px -3px 6px rgba(0, 0, 0, .5), 0 0 8px rgba(255, 214, 140, .3) !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-globe::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 50% !important;
    background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0) 0 6px, rgba(0, 0, 0, .2) 6px 7px) !important;
    mix-blend-mode: multiply !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-globe::after {
    content: "" !important;
    position: absolute !important;
    inset: -3px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255, 219, 135, .3) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-guide {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-content: center !important;
    gap: 3px !important;
    min-width: 0 !important;
    padding: 2px 0 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-guide article {
    display: grid !important;
    grid-template-columns: 14px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 6px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-guide article b {
    display: grid !important;
    place-items: center !important;
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #ffe891, #d9a23c) !important;
    color: #1b1206 !important;
    font-size: 8px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-guide article span {
    overflow: hidden !important;
    color: rgba(255, 255, 255, .82) !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* FINAL FIX 20260705-P: Compact inline mobile Passport below Vault Hero. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book {
    display: grid !important;
    grid-template-rows: auto auto auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-head {
    display: grid !important;
    gap: 2px !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 10px 10px 8px !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-head span {
    font-size: 8px !important;
    line-height: 1 !important;
    letter-spacing: .08em !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-head strong {
    font-size: 19px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-head small {
    font-size: 8px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-spread {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: start !important;
    gap: 6px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 8px !important;
    overflow: visible !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-page {
    display: grid !important;
    grid-template-rows: auto auto auto auto !important;
    align-content: start !important;
    justify-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 8px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-page-top {
    width: 100% !important;
    min-height: 0 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-page-top b {
    font-size: 17px !important;
    line-height: .96 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-page-top span {
    font-size: 7.5px !important;
    line-height: 1 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-sticker {
    width: min(136px, 92%) !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 6px !important;
    border-radius: 10px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-sticker img {
    width: min(118px, 100%) !important;
    height: 82px !important;
    object-fit: contain !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-page > strong {
    width: 100% !important;
    font-size: 14px !important;
    line-height: 1.02 !important;
    text-align: center !important;
    overflow-wrap: anywhere !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-page > small {
    max-width: 100% !important;
    padding: 4px 7px !important;
    font-size: 7.5px !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-controls {
    height: auto !important;
    min-height: 0 !important;
    padding: 7px 8px 9px !important;
    gap: 6px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .mobile-passport-spread,
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .single-stamp-spread {
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    padding: 8px 10px 10px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .mobile-passport-page.is-featured-single {
    width: 100% !important;
    max-width: 276px !important;
    padding: 10px !important;
    gap: 7px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .mobile-passport-page.is-featured-single .mobile-passport-sticker {
    width: min(154px, 86%) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .mobile-passport-page.is-featured-single .mobile-passport-sticker img {
    width: min(132px, 100%) !important;
    height: 92px !important;
  }
}

/* FINAL FIX 20260705-Q: Mobile Passport height guard */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page #passportAnchorBlock,
  html.magnetfolio-mobile-app body.vault-feature-page #passportAnchorBlock.is-empty-vault,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom {
    min-height: 0 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-clean-cover,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #passportShareCard.passport-clean-book .passport-clean-spread {
    min-height: 0 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.passport-preview-book .passport-clean-cover {
    min-height: 0 !important;
    padding: 12px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .passport-clean-cover,
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .passport-clean-spread {
    display: none !important;
  }
}

/* FINAL FIX 20260705-R: Mobile Passport page-turn micro animation */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page .mobile-passport-spread {
    transform-origin: center center;
    backface-visibility: hidden;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .mobile-passport-spread.is-page-enter-forward {
    animation: magnetfolioPassportPageEnterForward .26s ease-out;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .mobile-passport-spread.is-page-enter-back {
    animation: magnetfolioPassportPageEnterBack .26s ease-out;
  }

  @keyframes magnetfolioPassportPageEnterForward {
    from {
      opacity: 0;
      transform: rotateY(8deg) translateX(10px);
    }
    to {
      opacity: 1;
      transform: rotateY(0deg) translateX(0);
    }
  }

  @keyframes magnetfolioPassportPageEnterBack {
    from {
      opacity: 0;
      transform: rotateY(-8deg) translateX(-10px);
    }
    to {
      opacity: 1;
      transform: rotateY(0deg) translateX(0);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    html.magnetfolio-mobile-app body.vault-feature-page .mobile-passport-spread.is-page-enter-forward,
    html.magnetfolio-mobile-app body.vault-feature-page .mobile-passport-spread.is-page-enter-back {
      animation: none;
    }
  }
}

/* FINAL FIX 20260705-S: Mobile Passport share button */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page .mobile-passport-share {
    display: grid;
    margin-top: 6px;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .mobile-passport-share button {
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 8px !important;
    border: 1px solid rgba(255, 220, 142, .32) !important;
    border-radius: 9px !important;
    background: linear-gradient(135deg, #ffe891, #d9a23c) !important;
    color: #1b1206 !important;
    font-size: 10px !important;
    font-weight: 950 !important;
    text-transform: uppercase !important;
    letter-spacing: .02em !important;
  }
}

/* FINAL FIX 20260705-T: Stamp received micro press feedback */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app .stamp-received-pop.is-stamp-press .stamp-received-card {
    animation: magnetfolioStampPress .4s ease-out;
  }

  @keyframes magnetfolioStampPress {
    0% {
      transform: scale(.9);
    }
    45% {
      transform: scale(1.06);
    }
    100% {
      transform: scale(1);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    html.magnetfolio-mobile-app .stamp-received-pop.is-stamp-press .stamp-received-card {
      animation: none;
    }
  }
}

/* FINAL FIX 20260705-U: Vault mobile discovery strip + progress nudge */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-new-strip {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    margin: 6px 0 0 !important;
    padding: 6px 8px !important;
    border-radius: 9px !important;
    border: 1px solid rgba(255, 219, 135, .3) !important;
    background: linear-gradient(135deg, rgba(255, 219, 135, .14), rgba(255, 219, 135, .04)) !important;
    color: rgba(255, 255, 255, .88) !important;
    text-decoration: none !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-new-strip span:last-child {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-new-strip .new-pill {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    padding: 2px 6px !important;
    border-radius: 6px !important;
    background: linear-gradient(135deg, #ffe891, #d9a23c) !important;
    color: #1b1206 !important;
    font-size: 8.5px !important;
    font-weight: 950 !important;
    text-transform: uppercase !important;
    letter-spacing: .02em !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-nudge {
    width: 100% !important;
    margin: 6px 0 0 !important;
    padding: 0 2px !important;
    overflow: hidden !important;
    color: rgba(255, 219, 135, .82) !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* FINAL FIX 20260706-V: Mobile Polish - hero density, share position, passport nav, title compact */

/* V1: compact the New strip + progress nudge into one denser row so the hero does not push the Passport down. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-hero-compact {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 8px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-hero-row {
    flex: 1 1 100% !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-new-strip {
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: 62% !important;
    margin: 0 !important;
    padding: 3px 7px !important;
    font-size: 9px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-new-strip .new-pill {
    padding: 1px 5px !important;
    font-size: 7px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-nudge {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 8.5px !important;
    line-height: 1.15 !important;
    text-align: left !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-new-strip + .vault-mobile-nudge {
    text-align: right !important;
  }
}

/* V2: keep the Passport Share button clear of the fixed bottom nav. CSS-only spacing (no DOM move) to avoid
   any risk of shifting element order inside #passportShareCard, which is also cloned as-is into the
   fullscreen preview (.vault-fullscreen-card) - these selectors are ID-scoped so they never reach that clone. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-share {
    margin: 10px 0 6px !important;
    padding-bottom: max(6px, env(safe-area-inset-bottom, 0px)) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-share button {
    position: relative !important;
    z-index: 20 !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .35) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .mobile-passport-stage {
    margin-bottom: 16px !important;
  }
}

/* V3: bigger, higher-contrast Prev/Next tap targets with clearer directional cues. Visual only - onclick,
   disabled logic and the page-flip animation (FINAL FIX 20260705-R) stay untouched. ID-scoped so the
   fullscreen preview clone keeps its own existing sizing. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-controls {
    gap: 8px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-controls button {
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 14px !important;
    border: 1.5px solid rgba(255, 236, 194, .6) !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #ffedac, #d9a23c) !important;
    color: #241708 !important;
    font-size: 11.5px !important;
    font-weight: 950 !important;
    letter-spacing: .02em !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .3) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-controls button:disabled {
    box-shadow: none !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-controls button:first-of-type::before {
    content: "\2039\00a0" !important;
    font-weight: 950 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-controls button:last-of-type::after {
    content: "\00a0\203A" !important;
    font-weight: 950 !important;
  }
}

/* V4: compact the static "Your collector passport" heading block (collection.html is not editable in this
   task, so this is CSS-only via the existing .passport-main-title selector). */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page .passport-main-title {
    margin: 0 0 4px !important;
    padding: 0 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .passport-main-title .section-kicker {
    font-size: 8px !important;
    line-height: 1 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .passport-main-title h2 {
    margin: 2px 0 !important;
    font-size: 15px !important;
    line-height: 1.05 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .passport-main-title p {
    margin: 3px 0 0 !important;
    font-size: 9.5px !important;
    line-height: 1.2 !important;
  }
}

/* FINAL FIX 20260706-W: Passport Share button - real, confirmed clearance above the fixed
   bottom nav. Real device test of the V2 fix (16px flat buffer) showed Share Passport still
   partially covered. Investigation of the actual mobile bottom nav
   (html.magnetfolio-mobile-app .app-bottom-nav / .app-bottom-nav-compact.with-vault, see rule
   near the top of this file) confirms its real on-screen footprint is NOT just 16px:
     height: 60px, bottom offset: calc(8px + env(safe-area-inset-bottom))
   -> total space it occupies from the viewport bottom = 60px + 8px + env(safe-area-inset-bottom)
      = 68px + safe-area-inset-bottom.
   No overflow:hidden/fixed-height clipping was found on #passportShareCard.mobile-passport-book
   or its ancestors that would clip this margin (the card's height is auto, and
   #passportAnchorBlock/#vaultRoom have padding, which stops margin-collapse and correctly
   folds the child's margin-bottom into their own auto height) - the only real problem was that
   the previous buffer (16px) was far smaller than the nav's real 68px+ footprint. This block
   replaces the effective spacing with 68px (confirmed nav footprint) + 16px (safety buffer) +
   env(safe-area-inset-bottom) via source order (later than V2, same selector), without deleting
   the V2 block above. CSS-only, ID-scoped exactly like V2, so the fullscreen preview clone
   (.vault-fullscreen-card) is unaffected. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page .mobile-passport-stage {
    margin-bottom: calc(68px + 16px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* FINAL FIX 20260706-X: Mobile Passport Share CTA belongs inside the card header, not below
   the page controls. v22 proved bottom spacing alone cannot prevent the fixed bottom nav from
   covering the button at normal scroll positions, so keep it high in the Passport card. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-head {
    order: 1 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-share {
    order: 2 !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-share button {
    min-height: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
    font-size: 10.5px !important;
    letter-spacing: .08em !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-spread {
    order: 3 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-controls {
    order: 4 !important;
  }
}

/* FINAL FIX 20260706-Y: Wow Moment - onboarding, first-collect CTA, passport payoff,
   memory score. Compact/premium styling that reuses the existing .unlock-popup /
   .scratch-reveal-modal visual language; scoped to html.magnetfolio-mobile-app so desktop
   is untouched. */
html.magnetfolio-mobile-app .mobile-onboarding-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10050 !important;
  display: grid !important;
  place-items: center !important;
  padding: 20px !important;
  background: rgba(2, 4, 12, .82) !important;
  backdrop-filter: blur(16px) !important;
  opacity: 0 !important;
  transform: scale(.97) !important;
  transition: opacity .24s ease, transform .24s ease !important;
}

html.magnetfolio-mobile-app .mobile-onboarding-modal.show {
  opacity: 1 !important;
  transform: scale(1) !important;
}

html.magnetfolio-mobile-app .mobile-onboarding-shell {
  position: relative !important;
  width: min(400px, 100%) !important;
  max-height: min(640px, calc(100vh - 40px)) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 30px 22px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
  border-radius: 28px !important;
  border: 1px solid rgba(245, 196, 81, .32) !important;
  background: linear-gradient(160deg, rgba(24, 19, 10, .97), rgba(9, 10, 18, .98)) !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .55), 0 0 40px rgba(245, 196, 81, .14) !important;
}

html.magnetfolio-mobile-app .mobile-onboarding-skip {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  min-height: 32px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  background: rgba(255, 255, 255, .06) !important;
  color: #d8def0 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
}

html.magnetfolio-mobile-app .mobile-onboarding-screens {
  position: relative !important;
  width: 100% !important;
  min-height: 220px !important;
  display: grid !important;
  align-items: center !important;
  margin-top: 12px !important;
}

html.magnetfolio-mobile-app .mobile-onboarding-screen {
  grid-area: 1 / 1 !important;
  display: none !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  opacity: 0 !important;
  transform: translateY(6px) !important;
  transition: opacity .22s ease, transform .22s ease !important;
}

html.magnetfolio-mobile-app .mobile-onboarding-screen.is-active {
  display: flex !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
}

html.magnetfolio-mobile-app .mobile-onboarding-icon {
  width: 68px !important;
  height: 68px !important;
  display: grid !important;
  place-items: center !important;
  font-size: 32px !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, #ffe891, #d9a23c) !important;
  box-shadow: 0 16px 34px rgba(245, 196, 81, .28) !important;
}

html.magnetfolio-mobile-app .mobile-onboarding-screen h2 {
  margin: 4px 0 0 !important;
  color: #f5cf71 !important;
  font-size: 22px !important;
}

html.magnetfolio-mobile-app .mobile-onboarding-screen p {
  margin: 0 !important;
  color: #d8def0 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  max-width: 300px !important;
}

html.magnetfolio-mobile-app .mobile-onboarding-dots {
  display: flex !important;
  gap: 8px !important;
  margin-top: 18px !important;
}

html.magnetfolio-mobile-app .mobile-onboarding-dots button {
  width: 8px !important;
  height: 8px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: none !important;
  background: rgba(255, 255, 255, .22) !important;
}

html.magnetfolio-mobile-app .mobile-onboarding-dots button.is-active {
  width: 22px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #ffe891, #d9a23c) !important;
}

html.magnetfolio-mobile-app .mobile-onboarding-next {
  margin-top: 20px !important;
  min-height: 46px !important;
  width: 100% !important;
  border: none !important;
  border-radius: 999px !important;
  color: #1b1206 !important;
  font-weight: 950 !important;
  font-size: 14px !important;
  letter-spacing: .02em !important;
  background: linear-gradient(135deg, #ffe891, #d9a23c) !important;
  box-shadow: 0 16px 38px rgba(245, 196, 81, .22) !important;
}

/* First-collect CTA banner above the mobile Wall grid. */
html.magnetfolio-mobile-app body.wall-page .mobile-first-collect-banner {
  grid-column: 1 / -1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  margin-bottom: 4px !important;
  padding: 12px 14px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(245, 196, 81, .34) !important;
  background: linear-gradient(135deg, rgba(255, 232, 145, .16), rgba(217, 162, 60, .10)) !important;
  color: #fff7df !important;
  text-align: left !important;
}

html.magnetfolio-mobile-app body.wall-page .mobile-first-collect-banner-icon {
  flex: 0 0 auto !important;
  width: 38px !important;
  height: 38px !important;
  display: grid !important;
  place-items: center !important;
  font-size: 18px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #ffe891, #d9a23c) !important;
}

html.magnetfolio-mobile-app body.wall-page .mobile-first-collect-banner-copy {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}

html.magnetfolio-mobile-app body.wall-page .mobile-first-collect-banner-copy strong {
  font-size: 13.5px !important;
  color: #f5cf71 !important;
}

html.magnetfolio-mobile-app body.wall-page .mobile-first-collect-banner-copy small {
  font-size: 11.5px !important;
  color: #d8def0 !important;
}

html.magnetfolio-mobile-app .wall-magnet-card.mobile-first-collect-pulse {
  animation: magnetfolioFirstCollectPulse 1.4s ease-out 2 !important;
}

@keyframes magnetfolioFirstCollectPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 196, 81, 0); }
  50% { box-shadow: 0 0 0 6px rgba(245, 196, 81, .28); }
}

/* First-collect Passport payoff card: reuses .unlock-popup, adds the Memory Score chip. */
html.magnetfolio-mobile-app .unlock-popup.mobile-first-stamp-payoff {
  z-index: 10010 !important;
}

html.magnetfolio-mobile-app .mobile-memory-score-chip {
  display: inline-block !important;
  margin: 10px 0 2px !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
  color: #1b1206 !important;
  background: linear-gradient(135deg, #ffe891, #d9a23c) !important;
}

@media (prefers-reduced-motion: reduce) {
  html.magnetfolio-mobile-app .mobile-onboarding-modal,
  html.magnetfolio-mobile-app .mobile-onboarding-screen {
    transition: none !important;
  }

  html.magnetfolio-mobile-app .wall-magnet-card.mobile-first-collect-pulse {
    animation: none !important;
  }
}

/* FINAL FIX 20260706-Z: Cinematic Collect Moment v28. Fullscreen premium black/gold
   overlay that fires on EVERY successful collect (not just the first ever). Purely
   additive: does not restyle .unlock-popup, .stamp-received-pop, or .scratch-reveal-modal,
   which stay untouched and are sequenced (never overlapped) via the app.js callback in
   addToWallet(). Reuses .mobile-memory-score-chip (defined above) for the score badge. */
html.magnetfolio-mobile-app .mobile-cinematic-collect {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10090 !important;
  display: grid !important;
  place-items: center !important;
  padding: 24px !important;
  background: radial-gradient(circle at 50% 32%, rgba(48, 34, 10, .92), rgba(2, 3, 8, .96)) !important;
  backdrop-filter: blur(18px) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .32s ease !important;
}

html.magnetfolio-mobile-app .mobile-cinematic-collect.show {
  opacity: 1 !important;
  pointer-events: auto !important;
}

html.magnetfolio-mobile-app .mobile-cinematic-collect.hide {
  opacity: 0 !important;
}

html.magnetfolio-mobile-app .mobile-cinematic-collect-shell {
  position: relative !important;
  width: min(320px, 100%) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 6px !important;
  padding: 30px 22px calc(22px + env(safe-area-inset-bottom, 0px)) !important;
  border-radius: 26px !important;
  border: 1px solid rgba(245, 196, 81, .38) !important;
  background: linear-gradient(160deg, rgba(26, 20, 10, .96), rgba(8, 9, 16, .98)) !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .6), 0 0 50px rgba(245, 196, 81, .18) !important;
  transform: scale(.92) translateY(10px) !important;
  transition: transform .38s cubic-bezier(.2, .8, .2, 1) !important;
  overflow: hidden !important;
}

html.magnetfolio-mobile-app .mobile-cinematic-collect.show .mobile-cinematic-collect-shell {
  transform: scale(1) translateY(0) !important;
}

html.magnetfolio-mobile-app .mobile-cinematic-collect-glow {
  position: absolute !important;
  top: -34px !important;
  left: 50% !important;
  width: 190px !important;
  height: 190px !important;
  margin-left: -95px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(245, 196, 81, .5), rgba(245, 196, 81, 0) 68%) !important;
  opacity: .8 !important;
  animation: magnetfolioCinematicGlowPulse 1.8s ease-in-out infinite !important;
  pointer-events: none !important;
}

@keyframes magnetfolioCinematicGlowPulse {
  0%, 100% { transform: scale(1); opacity: .6; }
  50% { transform: scale(1.14); opacity: .92; }
}

html.magnetfolio-mobile-app .mobile-cinematic-collect-particles {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
  border-radius: inherit !important;
  pointer-events: none !important;
}

html.magnetfolio-mobile-app .mobile-cinematic-collect-particles span {
  position: absolute !important;
  bottom: 10% !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: #ffe891 !important;
  box-shadow: 0 0 8px 1px rgba(245, 196, 81, .8) !important;
  opacity: 0 !important;
  animation: magnetfolioCinematicParticleRise 2.1s ease-out infinite !important;
}

html.magnetfolio-mobile-app .mobile-cinematic-collect-particles span:nth-child(1) { left: 12%; animation-delay: 0s; }
html.magnetfolio-mobile-app .mobile-cinematic-collect-particles span:nth-child(2) { left: 28%; animation-delay: .25s; }
html.magnetfolio-mobile-app .mobile-cinematic-collect-particles span:nth-child(3) { left: 46%; animation-delay: .5s; }
html.magnetfolio-mobile-app .mobile-cinematic-collect-particles span:nth-child(4) { left: 62%; animation-delay: .15s; }
html.magnetfolio-mobile-app .mobile-cinematic-collect-particles span:nth-child(5) { left: 78%; animation-delay: .4s; }
html.magnetfolio-mobile-app .mobile-cinematic-collect-particles span:nth-child(6) { left: 90%; animation-delay: .65s; }

@keyframes magnetfolioCinematicParticleRise {
  0% { transform: translateY(0) scale(.6); opacity: 0; }
  18% { opacity: 1; }
  100% { transform: translateY(-160px) scale(1); opacity: 0; }
}

html.magnetfolio-mobile-app .mobile-cinematic-collect-art {
  position: relative !important;
  width: 108px !important;
  height: 108px !important;
  display: grid !important;
  place-items: center !important;
  margin-bottom: 6px !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, .05) !important;
  border: 1px solid rgba(245, 196, 81, .3) !important;
  animation: magnetfolioCinematicStampPress .5s ease-out !important;
}

@keyframes magnetfolioCinematicStampPress {
  0% { transform: scale(.7); box-shadow: 0 0 0 rgba(245, 196, 81, 0); }
  55% { transform: scale(1.08); box-shadow: 0 0 30px rgba(245, 196, 81, .5); }
  100% { transform: scale(1); box-shadow: 0 0 16px rgba(245, 196, 81, .28); }
}

html.magnetfolio-mobile-app .mobile-cinematic-collect-art img {
  max-width: 84% !important;
  max-height: 84% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .5)) !important;
}

html.magnetfolio-mobile-app .mobile-cinematic-collect-title {
  font-size: 19px !important;
  color: #fff7df !important;
  letter-spacing: .01em !important;
}

html.magnetfolio-mobile-app .mobile-cinematic-collect-subtitle {
  font-size: 12.5px !important;
  color: #b7c0da !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
}

html.magnetfolio-mobile-app .mobile-cinematic-collect-caption {
  margin: 6px 0 0 !important;
  font-size: 13px !important;
  color: #d8def0 !important;
}

html.magnetfolio-mobile-app .mobile-cinematic-collect .mobile-memory-score-chip {
  margin-top: 12px !important;
}

@media (prefers-reduced-motion: reduce) {
  html.magnetfolio-mobile-app .mobile-cinematic-collect,
  html.magnetfolio-mobile-app .mobile-cinematic-collect-shell {
    transition: none !important;
  }

  html.magnetfolio-mobile-app .mobile-cinematic-collect-glow,
  html.magnetfolio-mobile-app .mobile-cinematic-collect-art,
  html.magnetfolio-mobile-app .mobile-cinematic-collect-particles span {
    animation: none !important;
  }

  html.magnetfolio-mobile-app .mobile-cinematic-collect-particles span {
    display: none !important;
  }
}

/* FINAL FIX 20260706-AA: Cinematic Milestone Celebrations v29. Fullscreen overlays for the
   two biggest emotional milestones - a country fully collected (.is-country) and a
   continent fully collected (.is-continent, scaled up further: bigger glow, more particles,
   richer gradient). Purely additive: does not restyle .mobile-cinematic-collect (v28),
   .unlock-popup, .stamp-received-pop, or .scratch-reveal-modal, which stay untouched and
   are sequenced (never overlapped) via the app.js callback chain in addToWallet(). Reuses
   .mobile-memory-score-chip (defined above) for the "N/N cities" pill on the country tier. */
html.magnetfolio-mobile-app .mobile-cinematic-milestone {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10095 !important;
  display: grid !important;
  place-items: center !important;
  padding: 24px !important;
  background: radial-gradient(circle at 50% 30%, rgba(48, 34, 10, .94), rgba(2, 3, 8, .97)) !important;
  backdrop-filter: blur(20px) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .34s ease !important;
}

html.magnetfolio-mobile-app .mobile-cinematic-milestone.is-continent {
  background: radial-gradient(circle at 50% 28%, rgba(38, 30, 12, .95), rgba(4, 8, 18, .98)) !important;
}

html.magnetfolio-mobile-app .mobile-cinematic-milestone.show {
  opacity: 1 !important;
  pointer-events: auto !important;
}

html.magnetfolio-mobile-app .mobile-cinematic-milestone.hide {
  opacity: 0 !important;
}

html.magnetfolio-mobile-app .mobile-cinematic-milestone-shell {
  position: relative !important;
  width: min(330px, 100%) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 7px !important;
  padding: 34px 22px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  border-radius: 28px !important;
  border: 1px solid rgba(245, 196, 81, .42) !important;
  background: linear-gradient(160deg, rgba(28, 21, 10, .97), rgba(7, 8, 15, .99)) !important;
  box-shadow: 0 34px 100px rgba(0, 0, 0, .65), 0 0 60px rgba(245, 196, 81, .22) !important;
  transform: scale(.9) translateY(12px) !important;
  transition: transform .4s cubic-bezier(.2, .8, .2, 1) !important;
  overflow: hidden !important;
}

html.magnetfolio-mobile-app .mobile-cinematic-milestone.is-continent .mobile-cinematic-milestone-shell {
  border-color: rgba(140, 196, 245, .38) !important;
  box-shadow: 0 34px 100px rgba(0, 0, 0, .65), 0 0 70px rgba(245, 196, 81, .2), 0 0 40px rgba(120, 180, 245, .16) !important;
}

html.magnetfolio-mobile-app .mobile-cinematic-milestone.show .mobile-cinematic-milestone-shell {
  transform: scale(1) translateY(0) !important;
}

html.magnetfolio-mobile-app .mobile-cinematic-milestone-glow {
  position: absolute !important;
  top: -40px !important;
  left: 50% !important;
  width: 220px !important;
  height: 220px !important;
  margin-left: -110px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(245, 196, 81, .55), rgba(245, 196, 81, 0) 68%) !important;
  opacity: .85 !important;
  animation: magnetfolioMilestoneGlowPulse 1.6s ease-in-out infinite !important;
  pointer-events: none !important;
}

html.magnetfolio-mobile-app .mobile-cinematic-milestone.is-continent .mobile-cinematic-milestone-glow {
  width: 260px !important;
  height: 260px !important;
  margin-left: -130px !important;
  background: radial-gradient(circle, rgba(245, 196, 81, .5), rgba(120, 180, 245, .22) 55%, rgba(120, 180, 245, 0) 72%) !important;
}

@keyframes magnetfolioMilestoneGlowPulse {
  0%, 100% { transform: scale(1); opacity: .65; }
  50% { transform: scale(1.18); opacity: .96; }
}

html.magnetfolio-mobile-app .mobile-cinematic-milestone-particles {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
  border-radius: inherit !important;
  pointer-events: none !important;
}

html.magnetfolio-mobile-app .mobile-cinematic-milestone-particles span {
  position: absolute !important;
  bottom: 8% !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #ffe891 !important;
  box-shadow: 0 0 10px 2px rgba(245, 196, 81, .85) !important;
  opacity: 0 !important;
  animation: magnetfolioMilestoneParticleRise 2.3s ease-out infinite !important;
}

html.magnetfolio-mobile-app .mobile-cinematic-milestone.is-continent .mobile-cinematic-milestone-particles span {
  width: 7px !important;
  height: 7px !important;
  animation-duration: 2.6s !important;
}

html.magnetfolio-mobile-app .mobile-cinematic-milestone-particles span:nth-child(1) { left: 6%; animation-delay: 0s; }
html.magnetfolio-mobile-app .mobile-cinematic-milestone-particles span:nth-child(2) { left: 18%; animation-delay: .2s; }
html.magnetfolio-mobile-app .mobile-cinematic-milestone-particles span:nth-child(3) { left: 30%; animation-delay: .4s; }
html.magnetfolio-mobile-app .mobile-cinematic-milestone-particles span:nth-child(4) { left: 42%; animation-delay: .1s; }
html.magnetfolio-mobile-app .mobile-cinematic-milestone-particles span:nth-child(5) { left: 54%; animation-delay: .55s; }
html.magnetfolio-mobile-app .mobile-cinematic-milestone-particles span:nth-child(6) { left: 66%; animation-delay: .3s; }
html.magnetfolio-mobile-app .mobile-cinematic-milestone-particles span:nth-child(7) { left: 78%; animation-delay: .5s; }
html.magnetfolio-mobile-app .mobile-cinematic-milestone-particles span:nth-child(8) { left: 90%; animation-delay: .15s; }
html.magnetfolio-mobile-app .mobile-cinematic-milestone-particles span:nth-child(9) { left: 96%; animation-delay: .65s; }
html.magnetfolio-mobile-app .mobile-cinematic-milestone-particles span:nth-child(10) { left: 12%; animation-delay: .75s; }

@keyframes magnetfolioMilestoneParticleRise {
  0% { transform: translateY(0) scale(.6); opacity: 0; }
  16% { opacity: 1; }
  100% { transform: translateY(-190px) scale(1); opacity: 0; }
}

html.magnetfolio-mobile-app .mobile-cinematic-milestone-badge {
  position: relative !important;
  width: 84px !important;
  height: 84px !important;
  display: grid !important;
  place-items: center !important;
  margin-bottom: 4px !important;
  border-radius: 50% !important;
  font-size: 40px !important;
  line-height: 1 !important;
  background: radial-gradient(circle, rgba(255, 232, 145, .22), rgba(255, 232, 145, 0) 72%) !important;
  border: 1px solid rgba(245, 196, 81, .4) !important;
  animation: magnetfolioMilestoneBadgePress .55s ease-out !important;
}

html.magnetfolio-mobile-app .mobile-cinematic-milestone.is-continent .mobile-cinematic-milestone-badge {
  width: 96px !important;
  height: 96px !important;
  font-size: 46px !important;
}

@keyframes magnetfolioMilestoneBadgePress {
  0% { transform: scale(.6) rotate(-8deg); box-shadow: 0 0 0 rgba(245, 196, 81, 0); }
  60% { transform: scale(1.12) rotate(3deg); box-shadow: 0 0 36px rgba(245, 196, 81, .55); }
  100% { transform: scale(1) rotate(0deg); box-shadow: 0 0 20px rgba(245, 196, 81, .32); }
}

html.magnetfolio-mobile-app .mobile-cinematic-milestone-kicker {
  font-size: 11.5px !important;
  color: #f5c451 !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
  font-weight: 800 !important;
}

html.magnetfolio-mobile-app .mobile-cinematic-milestone-title {
  font-size: 21px !important;
  color: #fff7df !important;
  letter-spacing: .01em !important;
}

html.magnetfolio-mobile-app .mobile-cinematic-milestone.is-continent .mobile-cinematic-milestone-title {
  font-size: 23px !important;
}

html.magnetfolio-mobile-app .mobile-cinematic-milestone-caption {
  margin: 6px 0 0 !important;
  font-size: 13px !important;
  color: #d8def0 !important;
  line-height: 1.4 !important;
}

html.magnetfolio-mobile-app .mobile-cinematic-milestone .mobile-memory-score-chip {
  margin-top: 12px !important;
}

@media (prefers-reduced-motion: reduce) {
  html.magnetfolio-mobile-app .mobile-cinematic-milestone,
  html.magnetfolio-mobile-app .mobile-cinematic-milestone-shell {
    transition: none !important;
  }

  html.magnetfolio-mobile-app .mobile-cinematic-milestone-glow,
  html.magnetfolio-mobile-app .mobile-cinematic-milestone-badge,
  html.magnetfolio-mobile-app .mobile-cinematic-milestone-particles span {
    animation: none !important;
  }

  html.magnetfolio-mobile-app .mobile-cinematic-milestone-particles span {
    display: none !important;
  }
}

/* FINAL FIX 20260706-AA: Cinematic Collect v29 - stronger wow pass.
   v28 was clean but too quiet on device; this keeps the same JS/wallet flow and makes
   the moment feel like a premium stamp event: larger magnet, brand crest, visible
   stamped seal, warmer glow and stronger safe mobile framing. */
html.magnetfolio-mobile-app .mobile-cinematic-collect {
  background:
    radial-gradient(circle at 50% 23%, rgba(255, 207, 86, .30), transparent 30%),
    radial-gradient(circle at 50% 64%, rgba(112, 59, 255, .14), transparent 42%),
    linear-gradient(180deg, rgba(8, 6, 2, .95), rgba(2, 3, 8, .98)) !important;
  padding: calc(22px + env(safe-area-inset-top, 0px)) 18px calc(28px + env(safe-area-inset-bottom, 0px)) !important;
}

html.magnetfolio-mobile-app .mobile-cinematic-collect-shell {
  width: min(350px, 100%) !important;
  min-height: min(560px, calc(100vh - 120px)) !important;
  padding: 74px 22px 28px !important;
  border: 1.6px solid rgba(255, 218, 120, .62) !important;
  border-radius: 30px !important;
  background:
    linear-gradient(180deg, rgba(255, 236, 168, .10), rgba(255,255,255,.025) 34%, rgba(0,0,0,.18)),
    radial-gradient(circle at 50% 18%, rgba(255, 212, 91, .20), transparent 38%),
    linear-gradient(145deg, rgba(20, 17, 10, .98), rgba(5, 7, 14, .98)) !important;
  box-shadow:
    0 0 0 1px rgba(255, 245, 198, .08) inset,
    0 28px 80px rgba(0, 0, 0, .76),
    0 0 70px rgba(232, 177, 55, .18) !important;
}

html.magnetfolio-mobile-app .mobile-cinematic-collect-shell::before {
  content: "M" !important;
  position: absolute !important;
  top: 18px !important;
  left: 50% !important;
  width: 44px !important;
  height: 44px !important;
  transform: translateX(-50%) !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 224, 133, .78) !important;
  color: #241407 !important;
  font-size: 22px !important;
  font-weight: 1000 !important;
  font-family: Georgia, serif !important;
  background: radial-gradient(circle at 35% 25%, #fff6bf, #e2a930 78%) !important;
  box-shadow: 0 10px 28px rgba(233, 177, 54, .34) !important;
  z-index: 4 !important;
}

html.magnetfolio-mobile-app .mobile-cinematic-collect-art {
  width: 158px !important;
  height: 158px !important;
  border-radius: 25px !important;
  border: 2px solid rgba(255, 223, 137, .82) !important;
  background:
    linear-gradient(145deg, rgba(255, 240, 182, .22), rgba(255,255,255,.04)),
    rgba(5, 7, 12, .86) !important;
  box-shadow:
    0 18px 42px rgba(0, 0, 0, .56),
    0 0 46px rgba(242, 190, 65, .24) !important;
}

html.magnetfolio-mobile-app .mobile-cinematic-collect-art::after {
  content: "STAMPED" !important;
  position: absolute !important;
  right: -24px !important;
  bottom: -14px !important;
  transform: rotate(-10deg) !important;
  padding: 8px 13px !important;
  border: 2px solid rgba(255, 89, 117, .72) !important;
  border-radius: 999px !important;
  color: #ff6f88 !important;
  background: rgba(16, 8, 14, .78) !important;
  font-size: 10px !important;
  font-weight: 1000 !important;
  letter-spacing: .14em !important;
  text-shadow: 0 0 12px rgba(255, 89, 117, .38) !important;
  box-shadow: 0 0 22px rgba(255, 89, 117, .18) !important;
}

html.magnetfolio-mobile-app .mobile-cinematic-collect-art img {
  max-width: 88% !important;
  max-height: 88% !important;
}

html.magnetfolio-mobile-app .mobile-cinematic-collect-title {
  margin-top: 22px !important;
  font-size: 25px !important;
  line-height: 1.02 !important;
  text-shadow: 0 0 24px rgba(255, 221, 142, .22) !important;
}

html.magnetfolio-mobile-app .mobile-cinematic-collect-subtitle {
  margin-top: 4px !important;
  font-size: 13px !important;
  letter-spacing: .20em !important;
  color: #d6dcee !important;
}

html.magnetfolio-mobile-app .mobile-cinematic-collect-caption {
  margin: 18px 0 0 !important;
  padding: 10px 14px !important;
  border-radius: 999px !important;
  color: #fff2d4 !important;
  background: rgba(255, 214, 116, .10) !important;
  border: 1px solid rgba(255, 224, 145, .26) !important;
  font-size: 13.5px !important;
  font-weight: 900 !important;
}

html.magnetfolio-mobile-app .mobile-cinematic-collect .mobile-memory-score-chip {
  width: 100% !important;
  margin-top: 18px !important;
  padding: 13px 15px !important;
  border-radius: 18px !important;
  font-size: 13px !important;
  box-shadow: 0 12px 32px rgba(213, 151, 35, .22) !important;
}

html.magnetfolio-mobile-app .mobile-cinematic-collect-glow {
  top: 34px !important;
  width: 230px !important;
  height: 230px !important;
  opacity: .72 !important;
}

html.magnetfolio-mobile-app .mobile-cinematic-collect-particles span {
  width: 5px !important;
  height: 18px !important;
  background: linear-gradient(180deg, rgba(255, 244, 178, 1), rgba(232, 169, 44, 0)) !important;
  box-shadow: 0 0 16px rgba(255, 214, 101, .72) !important;
}

@media (prefers-reduced-motion: reduce) {
  html.magnetfolio-mobile-app .mobile-cinematic-collect-art::after {
    transform: rotate(-10deg) !important;
  }
}

/* FINAL FIX 20260706-BB: Shareable Milestone Recap Card v30. Adds a small secondary "Share"
   CTA to the existing country/continent celebration overlays (.mobile-cinematic-milestone,
   defined above in FINAL FIX 20260706-AA) and styles the off-screen recap card that button
   feeds into shareMagnetfolioCard(). Purely additive: does not touch .mobile-cinematic-collect,
   .mobile-cinematic-milestone-*, .stamp-received-pop, or any existing share-card styling for
   #passportShareCard / #collectionShareCard. */
html.magnetfolio-mobile-app .mobile-milestone-share-btn {
  position: relative !important;
  z-index: 5 !important;
  margin-top: 14px !important;
  padding: 9px 22px !important;
  border: 1px solid rgba(255, 220, 142, .38) !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #ffe891, #d9a23c) !important;
  color: #1b1206 !important;
  font-size: 11.5px !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .35) !important;
}

html.magnetfolio-mobile-app .mobile-milestone-share-btn:active {
  transform: scale(.96) !important;
}

/* Off-screen recap card: rendered off-canvas (never visible, never overlapping the live
   celebration overlay above it) but fully laid out - renderElementToPng() needs real
   getBoundingClientRect()/getComputedStyle() values, so this intentionally avoids
   display:none/visibility:hidden. */
html.magnetfolio-mobile-app .mobile-milestone-share-card {
  position: fixed !important;
  top: 0 !important;
  left: -9999px !important;
  z-index: -1 !important;
  width: 420px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 8px !important;
  padding: 40px 30px !important;
  background: linear-gradient(160deg, rgba(28, 21, 10, 1), rgba(7, 8, 15, 1)) !important;
  border: 1px solid rgba(245, 196, 81, .42) !important;
  border-radius: 30px !important;
  pointer-events: none !important;
}

html.magnetfolio-mobile-app .mobile-milestone-share-card.is-continent {
  border-color: rgba(140, 196, 245, .38) !important;
}

html.magnetfolio-mobile-app .mobile-milestone-share-card .mobile-milestone-share-mark {
  font-size: 12px !important;
  color: #f5c451 !important;
  font-weight: 900 !important;
  letter-spacing: .3em !important;
}

html.magnetfolio-mobile-app .mobile-milestone-share-card .mobile-milestone-share-badge {
  width: 92px !important;
  height: 92px !important;
  margin-top: 10px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  font-size: 44px !important;
  line-height: 1 !important;
  background: radial-gradient(circle, rgba(255, 232, 145, .26), rgba(255, 232, 145, 0) 72%) !important;
  border: 1px solid rgba(245, 196, 81, .4) !important;
}

html.magnetfolio-mobile-app .mobile-milestone-share-card .mobile-milestone-share-kicker {
  font-size: 12.5px !important;
  color: #f5c451 !important;
  text-transform: uppercase !important;
  letter-spacing: .14em !important;
  font-weight: 800 !important;
}

html.magnetfolio-mobile-app .mobile-milestone-share-card .mobile-milestone-share-title {
  font-size: 26px !important;
  color: #fff7df !important;
  letter-spacing: .01em !important;
  line-height: 1.15 !important;
}

html.magnetfolio-mobile-app .mobile-milestone-share-card .mobile-milestone-share-art {
  width: 150px !important;
  height: 150px !important;
  margin-top: 6px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  background: rgba(255, 255, 255, .05) !important;
  border: 1px solid rgba(255, 220, 142, .3) !important;
}

html.magnetfolio-mobile-app .mobile-milestone-share-card .mobile-milestone-share-art img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

html.magnetfolio-mobile-app .mobile-milestone-share-card .mobile-milestone-share-meta {
  font-size: 14px !important;
  color: #d8def0 !important;
}

html.magnetfolio-mobile-app .mobile-milestone-share-card .mobile-milestone-share-score {
  margin-top: 10px !important;
  padding: 11px 18px !important;
  border-radius: 999px !important;
  color: #fff2d4 !important;
  background: rgba(255, 214, 116, .12) !important;
  border: 1px solid rgba(255, 224, 145, .3) !important;
  font-size: 13.5px !important;
  font-weight: 900 !important;
}

html.magnetfolio-mobile-app .mobile-milestone-share-card .mobile-milestone-share-footer {
  width: 100% !important;
  margin-top: 18px !important;
  padding-top: 14px !important;
  display: flex !important;
  justify-content: space-between !important;
  border-top: 1px solid rgba(255, 255, 255, .12) !important;
  font-size: 11px !important;
  color: #a9b0c4 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
}

/* FINAL FIX 20260706-CC: Milestone Share Card polish v31. Richer background/border/glow so the
   off-screen recap card (FINAL FIX 20260706-BB, v30) reads as a genuine "story card" rather than a
   flat panel, plus a letterhead-style rule under the wordmark and a "Stamped <date>" line (real
   text nodes only - renderElementToPng()/copyComputedStyles() only inline real elements' computed
   styles, not ::before/::after generated content, so every visual addition here uses real elements/
   real element properties, never pseudo-element content). Purely additive: does not change card
   width/structure/copy already relied on by shareMobileMilestoneCard(), and does not touch the
   live .mobile-cinematic-milestone-* celebration overlay styling from FINAL FIX 20260706-AA. */
html.magnetfolio-mobile-app .mobile-milestone-share-card {
  background:
    radial-gradient(circle at 50% 8%, rgba(255, 224, 145, .16), transparent 46%),
    linear-gradient(180deg, rgba(255, 236, 168, .07), rgba(255, 255, 255, .015) 30%, rgba(0, 0, 0, .12)),
    linear-gradient(160deg, rgba(28, 21, 10, 1), rgba(7, 8, 15, 1)) !important;
  border: 1.4px solid rgba(255, 220, 142, .5) !important;
  box-shadow:
    0 0 0 1px rgba(255, 245, 198, .06) inset,
    0 34px 90px rgba(0, 0, 0, .55),
    0 0 60px rgba(232, 177, 55, .16) !important;
}

html.magnetfolio-mobile-app .mobile-milestone-share-card.is-continent {
  box-shadow:
    0 0 0 1px rgba(255, 245, 198, .06) inset,
    0 34px 90px rgba(0, 0, 0, .55),
    0 0 60px rgba(232, 177, 55, .12),
    0 0 40px rgba(120, 180, 245, .14) !important;
}

html.magnetfolio-mobile-app .mobile-milestone-share-card .mobile-milestone-share-mark {
  align-self: stretch !important;
  padding-bottom: 12px !important;
  margin-bottom: 2px !important;
  border-bottom: 1px solid rgba(245, 196, 81, .26) !important;
  text-align: center !important;
}

html.magnetfolio-mobile-app .mobile-milestone-share-card .mobile-milestone-share-title {
  font-weight: 900 !important;
  text-shadow: 0 0 22px rgba(255, 221, 142, .24) !important;
}

html.magnetfolio-mobile-app .mobile-milestone-share-card .mobile-milestone-share-meta {
  margin-top: 2px !important;
  font-weight: 700 !important;
}

html.magnetfolio-mobile-app .mobile-milestone-share-card .mobile-milestone-share-date {
  margin-top: -4px !important;
  color: #8f97ad !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
}

/* FINAL FIX 20260706-DD: Collect flow overlap/clip safety. .mobile-cinematic-collect-shell and
   .mobile-cinematic-milestone-shell (FINAL FIX 20260706-Z/AA) size purely to their content with no
   max-height cap; on a very short viewport (small/older device, or a long wrapped country name)
   their last child - including the v30 Share button - could in theory render past the top/bottom of
   the screen, since the outer overlay is a plain `display:grid; place-items:center` box that does
   not clip or scroll oversized content. This adds a safe max-height + scroll fallback that only
   engages if content would not otherwise fit; it changes nothing in the common case. overflow-x
   stays hidden so the existing particle animations remain clipped to the card's rounded corners. */
html.magnetfolio-mobile-app .mobile-cinematic-collect-shell,
html.magnetfolio-mobile-app .mobile-cinematic-milestone-shell {
  max-height: calc(100vh - 20px) !important;
  max-height: calc(100dvh - 20px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* FINAL FIX 20260706-EE: prevent iOS Safari/WebView's automatic zoom-on-focus for text inputs on
   the Account (sign in / create account) and Settings/Custom Magnet screens (Settings profile
   fields, Custom Magnet location/year fields both use .settings-field). Those screens rely on the
   shared desktop .auth-field/.settings-field input styling, which inherits the app's compact 14px
   mobile base font-size (set at the top of this file) - any font-size under 16px on a focused text
   input triggers an unwanted auto-zoom on iOS. Scoped to just these text fields (not the compact
   Wall search box or other already hand-tuned mobile inputs) and only bumps font-size, so layout
   stays effectively unchanged (inputs already reserve >=52px height for their text). */
html.magnetfolio-mobile-app .settings-field input,
html.magnetfolio-mobile-app .settings-field select,
html.magnetfolio-mobile-app .auth-field input {
  font-size: 16px !important;
}

/* FINAL FIX 20260706-FF: the Rewards screen's "Available free magnets" hero count
   (.reward-credit-banner strong) gets shrunk to 10.5px by a very broad `@media (max-width: 760px)`
   rule in style.css - effectively every phone - which is illegible for what is meant to be the
   headline stat of that banner (compare its non-mobile size: 38px). Restoring a readable size here
   is a pure legibility fix; the banner's other (already-compact) label/button text sizes and the
   single-column layout introduced by that same style.css rule are untouched. */
html.magnetfolio-mobile-app body.feature-page .reward-credit-banner strong {
  font-size: 26px !important;
  line-height: 1.1 !important;
}

/* FINAL FIX 20260706-GG: Rewards "Trophy Room" hierarchy. Real-device review found the milestone
   cards read as a flat, repetitive checklist - locked, claimable, and already-claimed cards were
   all the same size/opacity and only differed by the Claim/Locked/Claimed button color. This pass
   makes the three states unmistakable at a glance on mobile only:
   - claimable-now cards (.milestone-card.complete:not(.is-claimed)) get an elevated gold
     border/glow with a gentle pulse (paused under prefers-reduced-motion), reusing the same
     gold (rgba(245,196,81,*)) language as the cinematic collect/milestone overlays above;
   - locked/in-progress cards (.milestone-card:not(.complete)) recede - dimmer, slightly
     desaturated and scaled down a touch (transform only, so the grid layout/gap never shifts);
   - already-claimed cards (.milestone-card.is-claimed) get a distinct teal "done" treatment plus
     a small checkmark seal badge, separate from both other states.
   Also adds a small additive summary strip ("N rewards ready" / "X/Y milestones unlocked") above
   the credit banner, built in app.js renderCollectionMilestones() purely from progress/claimed
   data that function already computes - no new data plumbing, no change to claim logic, milestone
   targets, or reward amounts. Does not touch style.css or any desktop presentation. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.feature-page .reward-summary-strip {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 0 8px !important;
  }

  html.magnetfolio-mobile-app body.feature-page .reward-summary-stat {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1px !important;
    min-height: 0 !important;
    padding: 8px 6px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    background: rgba(255, 255, 255, .04) !important;
    text-align: center !important;
  }

  html.magnetfolio-mobile-app body.feature-page .reward-summary-stat strong {
    font-size: 18px !important;
    line-height: 1.1 !important;
    color: #fff7df !important;
  }

  html.magnetfolio-mobile-app body.feature-page .reward-summary-stat span {
    margin: 1px 0 0 !important;
    font-size: 8.5px !important;
    line-height: 1.2 !important;
    color: #aeb6c9 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
  }

  html.magnetfolio-mobile-app body.feature-page .reward-summary-stat.is-ready {
    border-color: rgba(245, 196, 81, .55) !important;
    background: linear-gradient(135deg, rgba(245, 196, 81, .22), rgba(122, 44, 255, .10)) !important;
  }

  html.magnetfolio-mobile-app body.feature-page .reward-summary-stat.is-ready strong {
    color: #ffe58f !important;
  }

  html.magnetfolio-mobile-app body.feature-page .milestone-card:not(.complete) {
    opacity: .66 !important;
    transform: scale(.96) !important;
    filter: saturate(.7) !important;
  }

  html.magnetfolio-mobile-app body.feature-page .milestone-card:not(.complete) .milestone-bar i {
    background: rgba(255, 255, 255, .22) !important;
  }

  html.magnetfolio-mobile-app body.feature-page .milestone-card.complete:not(.is-claimed) {
    position: relative !important;
    overflow: visible !important;
    opacity: 1 !important;
    transform: scale(1) !important;
    filter: none !important;
    border-color: rgba(245, 196, 81, .65) !important;
    background: linear-gradient(135deg, rgba(245, 196, 81, .24), rgba(122, 44, 255, .10)) !important;
    box-shadow: 0 0 0 1px rgba(245, 196, 81, .28) inset, 0 10px 26px rgba(245, 196, 81, .2) !important;
    animation: magnetfolioRewardReadyPulse 2.4s ease-in-out infinite !important;
  }

  html.magnetfolio-mobile-app body.feature-page .milestone-card.complete:not(.is-claimed) .reward-claim-button {
    box-shadow: 0 0 14px rgba(245, 196, 81, .55) !important;
  }

  html.magnetfolio-mobile-app body.feature-page .milestone-card.is-claimed {
    position: relative !important;
    opacity: 1 !important;
    transform: scale(1) !important;
    filter: none !important;
    border-color: rgba(142, 230, 223, .5) !important;
    background: linear-gradient(135deg, rgba(142, 230, 223, .14), rgba(255, 255, 255, .03)) !important;
  }

  html.magnetfolio-mobile-app body.feature-page .milestone-card.is-claimed::after {
    content: "\2713" !important;
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    width: 18px !important;
    height: 18px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    background: rgba(142, 230, 223, .92) !important;
    color: #08211f !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  @keyframes magnetfolioRewardReadyPulse {
    0%, 100% { box-shadow: 0 0 0 1px rgba(245, 196, 81, .28) inset, 0 10px 26px rgba(245, 196, 81, .2); }
    50% { box-shadow: 0 0 0 1px rgba(245, 196, 81, .44) inset, 0 10px 34px rgba(245, 196, 81, .36); }
  }

  @media (prefers-reduced-motion: reduce) {
    html.magnetfolio-mobile-app body.feature-page .milestone-card.complete:not(.is-claimed) {
      animation: none !important;
    }
  }
}

/* FINAL FIX 20260706-HH: World Map centerpiece pass. Real-device review found the 2D map rendered
   small relative to its header text inside a plain bordered box, feeling like an afterthought
   rather than the "wow, look how much of the world I've collected" moment it's meant to be. Mobile
   only, additive on top of the existing #worldMap sizing rule above (FINAL FIX-era max-height
   460px): tightens the section-title header spacing specifically on the map screen (scoped to
   .map-panel .section-title so World Map's own header shrinks without touching wallet.html or
   settings.html, which also use .section-title), gives the map container materially more height
   so it reads as the hero content, and adds a soft gold border/glow consistent with the app's
   premium framing language elsewhere. Does not touch loadWorldMap()/ensureGeoMap() or any of the
   country/city rendering logic - purely container sizing and framing. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.feature-page .map-panel .section-title {
    margin: 0 0 6px !important;
  }

  html.magnetfolio-mobile-app body.feature-page .map-panel .section-title h2 {
    font-size: 17px !important;
  }

  html.magnetfolio-mobile-app body.feature-page .map-panel .section-title p {
    margin: 2px 0 0 !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
  }

  html.magnetfolio-mobile-app body.feature-page #worldMap,
  html.magnetfolio-mobile-app body.feature-page .world-map {
    min-height: 60vh !important;
    max-height: 620px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(245, 196, 81, .3) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .4), 0 0 30px rgba(245, 196, 81, .16) !important;
  }

  html.magnetfolio-mobile-app body.feature-page .map-panel,
  html.magnetfolio-mobile-app body.feature-page .feature-map-panel {
    padding-bottom: 12px !important;
  }
}

/* FINAL FIX 20260708-world-map-premium-v77: mobile World Map polish after device review.
   Root cause: the 2:1 SVG sat inside an over-tall mobile frame, creating dead black space.
   This keeps the map proportional, darkens the ocean, adds a collection counter, and scopes
   everything to the native mobile World Map page only. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.feature-page .feature-map-panel {
    padding: 14px !important;
    border-color: rgba(245, 196, 81, .18) !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(245, 196, 81, .10), transparent 44%),
      linear-gradient(180deg, rgba(10, 14, 25, .98), rgba(4, 7, 14, .98)) !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 232, 160, .08) !important;
  }

  html.magnetfolio-mobile-app body.feature-page .map-panel .section-title {
    margin-bottom: 10px !important;
  }

  html.magnetfolio-mobile-app body.feature-page .map-panel .section-title .section-kicker {
    color: #f6d36d !important;
    letter-spacing: .20em !important;
  }

  html.magnetfolio-mobile-app body.feature-page .map-panel .section-title h2 {
    font-size: 25px !important;
    line-height: 1.05 !important;
    max-width: 11.5em !important;
    margin-inline: auto !important;
  }

  html.magnetfolio-mobile-app body.feature-page .map-panel .section-title p {
    font-size: 13px !important;
    line-height: 1.32 !important;
    max-width: 25em !important;
    margin-inline: auto !important;
  }

  html.magnetfolio-mobile-app body.feature-page .map-stage {
    display: block !important;
    gap: 0 !important;
  }

  html.magnetfolio-mobile-app body.feature-page #worldMap.visual-world-map {
    height: clamp(232px, 58vw, 292px) !important;
    min-height: 0 !important;
    max-height: none !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    border: 1px solid rgba(245, 196, 81, .36) !important;
    background:
      radial-gradient(circle at 55% 42%, rgba(32, 119, 145, .16), transparent 48%),
      linear-gradient(180deg, #071827 0%, #05111d 58%, #030912 100%) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255, 241, 190, .08),
      0 18px 34px rgba(0, 0, 0, .38),
      0 0 28px rgba(245, 196, 81, .08) !important;
  }

  html.magnetfolio-mobile-app body.feature-page #worldMap.visual-world-map::before,
  html.magnetfolio-mobile-app body.feature-page #worldMap.visual-world-map::after {
    opacity: .42 !important;
    inset: 0 !important;
    pointer-events: none !important;
  }

  html.magnetfolio-mobile-app body.feature-page #worldMap .geo-world-svg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  html.magnetfolio-mobile-app body.feature-page #worldMap .geo-ocean {
    fill: #061523 !important;
  }

  html.magnetfolio-mobile-app body.feature-page #worldMap .geo-country {
    fill: #384e48 !important;
    stroke: rgba(230, 214, 158, .34) !important;
    stroke-width: .62 !important;
    opacity: .9 !important;
  }

  html.magnetfolio-mobile-app body.feature-page #worldMap .geo-country.country-collected {
    fill: #f4c65f !important;
    stroke: #fff0a8 !important;
    stroke-width: 1.15 !important;
    filter: drop-shadow(0 0 7px rgba(245, 196, 81, .85)) drop-shadow(0 0 16px rgba(245, 196, 81, .25)) !important;
    opacity: 1 !important;
  }

  html.magnetfolio-mobile-app body.feature-page #worldMap .geo-city-pin {
    fill: rgba(229, 238, 232, .72) !important;
    stroke: rgba(2, 8, 15, .72) !important;
    stroke-width: .55 !important;
  }

  html.magnetfolio-mobile-app body.feature-page #worldMap .geo-city-pin.collected {
    fill: #fff2a9 !important;
    filter: drop-shadow(0 0 5px rgba(245, 196, 81, .78)) !important;
  }

  html.magnetfolio-mobile-app body.feature-page #worldMap .mobile-world-map-progress-badge {
    position: absolute !important;
    left: 12px !important;
    top: 12px !important;
    z-index: 4 !important;
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 7px !important;
    padding: 8px 11px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(245, 196, 81, .42) !important;
    background: rgba(3, 7, 14, .78) !important;
    color: #f7e7b2 !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
    backdrop-filter: blur(12px) !important;
  }

  html.magnetfolio-mobile-app body.feature-page #worldMap .mobile-world-map-progress-badge strong {
    color: #ffe177 !important;
    font-size: 15px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }

  html.magnetfolio-mobile-app body.feature-page #worldMap .mobile-world-map-progress-badge span {
    color: rgba(255, 246, 216, .82) !important;
    font-size: 10px !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
  }
}

/* FINAL FIX 20260706-II: Account + Settings premium black/gold pass. Real-device review found
   these two screens sitting right next to Vault/Passport/Rewards via the bottom nav but still
   reading as a plain, generic app: their section-title kickers ("Magnetfolio ID", "Profile",
   "Preferences", etc.) already use the shared .section-kicker class so those already render gold
   site-wide - the actual gap was the small inline <span> labels INSIDE the info/status boxes
   ("Account", "Cloud save", "Email security", "Personal edition", "Account status"), which are
   plain <span> elements (not .section-kicker) styled with a flat muted-gray color in style.css,
   plus those same boxes (.settings-account-summary, .cloud-status-panel, .account-security-grid,
   .account-status) rendering as flat bordered rectangles with no elevation, unlike the
   gold-tinted gradient card treatment already used for Vault/Rewards/.custom-magnet-settings-card.
   Mobile only, additive on top of the existing desktop rules in style.css (colors/paddings there
   are untouched):
   - Scoping for account.html: "body.account-page:not(.auth-action-page)" - account.html and
     auth-action.html are the only two pages sharing the "account-page" body class, and only
     account.html additionally lacks "auth-action-page", so this excludes auth-action.html
     precisely without needing to touch either HTML file.
   - Scoping for settings.html: settings.html has no unique body class (just "feature-page", also
     shared by world-map/gift/achievements/wallet/terms/privacy/custom-magnet), so instead this
     scopes directly to .settings-account-summary / .cloud-status-panel / .account-security-grid /
     .custom-magnet-settings-card / .settings-toggle-row, which are verified page-unique class
     names that only exist in settings.html markup - the same "unique descendant class under
     body.feature-page" convention already used for Rewards (FINAL FIX 20260706-GG,
     .reward-summary-strip/.milestone-card) and World Map (FINAL FIX 20260706-HH, .map-panel)
     above, so terms.html/privacy.html/custom-magnet.html (which reuse the broader .settings-panel/
     .settings-actions classes) are completely unaffected.
   - Does NOT touch .primary-cta, .secondary-cta, .auth-field, .settings-field, or .section-kicker
     themselves (those stay exactly as styled for every other page that reuses them) - only adds
     new, more specific selectors nested under the scopes above. The one exception is the single
     #verifyEmailButton (a unique id that only exists in settings.html), which is re-skinned gold
     via that id selector because it is functionally the primary action of the Email security
     card despite currently being marked up with .secondary-cta - every other .secondary-cta
     element everywhere else in the app is completely unaffected.
   - Does NOT touch cloudStatusIndicator's state-* class logic in app.js/updateCloudStatus(), the
     verifyEmail/resetPassword/signOut handlers, or any Firebase/auth behavior - purely visual. */
@media (max-width: 760px) {
  /* -- Gold kicker-style labels for the small in-card <span> tags -- */
  html.magnetfolio-mobile-app body.account-page:not(.auth-action-page) .account-status > span,
  html.magnetfolio-mobile-app body.feature-page .settings-account-summary > div > span,
  html.magnetfolio-mobile-app body.feature-page .cloud-status-panel > div > span,
  html.magnetfolio-mobile-app body.feature-page .account-security-grid > div > span,
  html.magnetfolio-mobile-app body.feature-page .custom-magnet-settings-card > div > span {
    color: #ffe39a !important;
    letter-spacing: .1em !important;
  }

  /* -- Elevated card treatment for the account/cloud/security info boxes -- */
  html.magnetfolio-mobile-app body.account-page:not(.auth-action-page) .account-status {
    margin: 22px 0 !important;
    padding: 14px !important;
    border: 1px solid rgba(245, 196, 81, .26) !important;
    border-radius: 14px !important;
    background:
      radial-gradient(circle at 0 0, rgba(245, 196, 81, .14), transparent 42%),
      linear-gradient(135deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)) !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .05) !important;
  }

  html.magnetfolio-mobile-app body.feature-page .settings-account-summary,
  html.magnetfolio-mobile-app body.feature-page .cloud-status-panel {
    border-radius: 14px !important;
    border-color: rgba(245, 196, 81, .26) !important;
    background:
      radial-gradient(circle at 0 0, rgba(245, 196, 81, .14), transparent 42%),
      linear-gradient(135deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)) !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .05) !important;
  }

  html.magnetfolio-mobile-app body.feature-page .account-security-grid {
    border-radius: 14px !important;
    border-color: rgba(245, 196, 81, .28) !important;
    background:
      radial-gradient(circle at 0 0, rgba(245, 196, 81, .16), transparent 42%),
      linear-gradient(135deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02)),
      rgba(8, 9, 16, .54) !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .05) !important;
  }

  /* -- Preferences toggle rows: soft individual card treatment instead of a plain divider list -- */
  html.magnetfolio-mobile-app body.feature-page .settings-toggle-row {
    margin: 0 0 8px !important;
    padding: 12px 10px !important;
    border: 1px solid rgba(245, 196, 81, .16) !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)) !important;
  }

  html.magnetfolio-mobile-app body.feature-page .settings-toggle-row:last-child {
    margin-bottom: 0 !important;
  }

  /* -- Cloud Save status dot: small premium seal-style glow instead of a plain dot -- */
  html.magnetfolio-mobile-app body.feature-page .cloud-status-indicator.state-connected,
  html.magnetfolio-mobile-app body.feature-page .cloud-status-indicator.state-synced {
    box-shadow:
      0 0 0 4px rgba(113, 224, 201, .16),
      0 0 0 1px rgba(245, 196, 81, .35),
      0 0 12px rgba(245, 196, 81, .35) !important;
  }

  /* -- "Verify email" is functionally the primary next step in the Email security card but is
     currently marked up with .secondary-cta - re-skin just this one, unique-ID button (does not
     touch the .secondary-cta class or its onclick/verify handler in settings-account.js) so it
     reads as the same premium gold CTA as Save Settings / Open account. */
  html.magnetfolio-mobile-app body.feature-page .account-security-grid #verifyEmailButton:not(:disabled) {
    border: none !important;
    background: linear-gradient(135deg, var(--gold2), var(--gold)) !important;
    color: #14110a !important;
    box-shadow: 0 10px 24px rgba(245, 196, 81, .26) !important;
  }
}

/* FINAL FIX 20260706-A: Page header subtitle/tagline truncation bug. Real-device screenshots
   showed the descriptive text directly under every page's <h1> title getting cut off mid-word
   with a trailing "..." (e.g. World Map: "COUNTRIES, PROGRESS AND MISSING ...", Rewards:
   "MILESTONES, FREE MAGNETS AND GIFT...", Wall of Magnets: ".../.../Explore the ..."). Root
   cause: `html.magnetfolio-mobile-app body.feature-page .page-title-lockup p` /
   `body.vault-feature-page .page-title-lockup p` (the #tagline paragraph under every
   feature-page/vault-feature-page <h1> - World Map, Rewards, Vault, Globe, Custom Magnet, Gift,
   Settings, Account) and `body.wall-page .wall-brand-lockup .reward-tagline` /
   `.wall-brand-lockup p` (the Wall of Magnets header) were forced to
   `white-space: nowrap; overflow: hidden; text-overflow: ellipsis` by earlier mobile passes -
   correct for a single short label, wrong for a full descriptive sentence. Same defect also hit
   `.feature-hero p` (style.css, unscoped -webkit-line-clamp:2 - used for the Rewards/Globe/Gift
   "hero" intro paragraph directly under their <h2>) and `.wall-world-copy p` (style.css, the Wall
   globe-teaser paragraph), both clamped to 2 lines with an automatic ellipsis on overflow. This
   block only restores normal wrapping for those specific page-header/hero description contexts -
   it does NOT touch single-line list/card ellipsis truncation used elsewhere on purpose (city/
   country names in .wall-magnet-card, .milestone-reward, .tier-chip, passport chips, etc.), and it
   does NOT touch style.css or any desktop behavior (every selector below is still gated by
   html.magnetfolio-mobile-app and only overrides the specific overflow/white-space/clamp
   properties, leaving font-size/line-height/margin from the existing rules above untouched).
   Appended at end of file so it wins the cascade over the earlier equal-specificity rules above
   without deleting or editing them. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app .page-title-lockup p,
  html.magnetfolio-mobile-app body.feature-page .page-title-lockup p,
  html.magnetfolio-mobile-app body.vault-feature-page .page-title-lockup p {
    display: block !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
  }

  html.magnetfolio-mobile-app .wall-brand-lockup p,
  html.magnetfolio-mobile-app body.wall-page .wall-brand-lockup p,
  html.magnetfolio-mobile-app .wall-brand-lockup small,
  html.magnetfolio-mobile-app .wall-brand-lockup .reward-tagline,
  html.magnetfolio-mobile-app body.wall-page .wall-brand-lockup .reward-tagline {
    display: block !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
  }

  html.magnetfolio-mobile-app .feature-hero p,
  html.magnetfolio-mobile-app body.feature-page .feature-hero p {
    display: block !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
  }

  html.magnetfolio-mobile-app body.wall-page .wall-world-copy p {
    display: block !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
  }
}

/* FINAL FIX 20260706-B: The same nowrap+ellipsis pattern fixed above in 20260706-A was also
   applied to the page <h1> title itself (`.page-title-lockup h1`, `.wall-brand-lockup h1`). Most
   titles are short enough that this was invisible, but longer ones ("Custom Magnet Studio",
   "Collector Account") measure wider than the header's title column at the existing font-size and
   silently clip to "Custom Magnet Stud…" on real phone widths - the same broken-looking truncation
   as the subtitle bug, just less obvious because it only affects the longer titles. Fix: let the
   title wrap to a second line instead of clipping (the header uses min-height, not a fixed height,
   so a two-line title simply makes the sticky header slightly taller instead of overlapping or
   cutting text). Does not change font-size/weight/color or the emblem/logo, only the overflow
   behavior, and only for feature-page/vault-feature-page/wall-page headers on mobile. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app .page-title-lockup h1,
  html.magnetfolio-mobile-app body.feature-page .page-title-lockup h1,
  html.magnetfolio-mobile-app body.vault-feature-page .page-title-lockup h1 {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    line-height: 1.05 !important;
  }

  html.magnetfolio-mobile-app .wall-brand-lockup h1,
  html.magnetfolio-mobile-app body.wall-page .wall-brand-lockup h1 {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    line-height: 1.05 !important;
  }
}

/* FINAL FIX 20260706-C: City detail escape + safe Wall tap targets.
   Mobile-only: city detail now has a visible X/Back control, magnet preview close stays
   above the image, and Wall card navigation is visually tied to image/title instead of
   the whole card competing with Collect. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body:not(.wall-page) .mobile-city-close {
    position: absolute !important;
    top: calc(10px + env(safe-area-inset-top, 0px)) !important;
    right: 10px !important;
    z-index: 80 !important;
    display: grid !important;
    place-items: center !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(245, 196, 81, .55) !important;
    background: linear-gradient(145deg, rgba(6, 7, 13, .96), rgba(33, 25, 9, .95)) !important;
    color: #fff7df !important;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .45), 0 0 22px rgba(245, 196, 81, .18) !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  html.magnetfolio-mobile-app body:not(.wall-page):not(.vault-feature-page) .app-header {
    padding-right: 58px !important;
  }

  html.magnetfolio-mobile-app body.wall-page article.wall-magnet-card.city-card .wall-card-art,
  html.magnetfolio-mobile-app body.wall-page article.wall-magnet-card.city-card .wall-card-copy {
    cursor: pointer !important;
    -webkit-tap-highlight-color: rgba(245, 196, 81, .16) !important;
  }

  html.magnetfolio-mobile-app body.wall-page article.wall-magnet-card.city-card .wall-card-actions,
  html.magnetfolio-mobile-app body.wall-page article.wall-magnet-card.city-card .collect-btn {
    position: relative !important;
    z-index: 2 !important;
  }

  html.magnetfolio-mobile-app .magnet-modal.show {
    display: grid !important;
    place-items: center !important;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 10px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 14000 !important;
  }

  html.magnetfolio-mobile-app .magnet-modal .modal-content {
    width: min(430px, calc(100vw - 20px)) !important;
    max-height: calc(100dvh - 32px) !important;
    padding: 14px !important;
    overflow: visible !important;
  }

  html.magnetfolio-mobile-app .magnet-modal .panel-close {
    position: fixed !important;
    top: calc(12px + env(safe-area-inset-top, 0px)) !important;
    right: 12px !important;
    z-index: 14020 !important;
    display: grid !important;
    place-items: center !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(245, 196, 81, .64) !important;
    background: linear-gradient(145deg, rgba(6, 7, 13, .98), rgba(35, 24, 8, .96)) !important;
    color: #fff7df !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .5), 0 0 24px rgba(245, 196, 81, .22) !important;
    font-size: 20px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
  }
}

/* FINAL FIX 20260706-D: Collected magnets should read as stamped, not collectible again. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app .collect-btn.collect-stamped-action {
    background: linear-gradient(135deg, rgba(20, 20, 28, .98), rgba(70, 52, 18, .92)) !important;
    color: #ffe8a8 !important;
    border: 1px solid rgba(245, 196, 81, .65) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 8px 22px rgba(0, 0, 0, .28) !important;
  }

  html.magnetfolio-mobile-app .magnet-card.is-owned-magnet {
    border-color: rgba(245, 196, 81, .46) !important;
  }
}

/* FINAL FIX 20260706-JJ: Story Share 9:16 v36. Off-screen vertical story card for
   shareMobileStoryCard() plus a prominent "Share Story" CTA in the Vault Display Case share row.
   Purely additive: does not change milestone share cards, passport/collection share cards, or
   desktop markup. */
html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard .collection-share-actions .collection-share-story-btn {
  grid-column: 1 / -1 !important;
  min-height: 40px !important;
  height: 40px !important;
  border: 1px solid rgba(255, 220, 142, .42) !important;
  background: linear-gradient(135deg, #ffe891, #d9a23c) !important;
  color: #1b1206 !important;
  font-weight: 950 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .28) !important;
}

html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard .collection-share-actions .collection-share-story-btn ~ button:nth-child(5) {
  grid-column: auto !important;
}

html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard .collection-share-actions .collection-share-story-btn ~ button:nth-child(6) {
  grid-column: 1 / -1 !important;
}

html.magnetfolio-mobile-app .mobile-story-share-card {
  position: fixed !important;
  top: 0 !important;
  left: -9999px !important;
  z-index: -1 !important;
  width: 540px !important;
  height: 960px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 14px !important;
  padding: 52px 36px 40px !important;
  box-sizing: border-box !important;
  background:
    radial-gradient(circle at 50% 10%, rgba(255, 224, 145, .18), transparent 48%),
    linear-gradient(180deg, rgba(255, 236, 168, .08), rgba(255, 255, 255, .015) 28%, rgba(0, 0, 0, .14)),
    linear-gradient(165deg, rgba(18, 14, 8, 1), rgba(5, 6, 12, 1)) !important;
  border: 1.5px solid rgba(255, 220, 142, .52) !important;
  border-radius: 0 !important;
  box-shadow:
    0 0 0 1px rgba(255, 245, 198, .06) inset,
    0 40px 100px rgba(0, 0, 0, .58),
    0 0 70px rgba(232, 177, 55, .18) !important;
  pointer-events: none !important;
}

html.magnetfolio-mobile-app .mobile-story-share-card .mobile-story-share-mark {
  align-self: stretch !important;
  padding-bottom: 14px !important;
  margin-bottom: 4px !important;
  border-bottom: 1px solid rgba(245, 196, 81, .28) !important;
  font-size: 13px !important;
  color: #f5c451 !important;
  font-weight: 900 !important;
  letter-spacing: .32em !important;
}

html.magnetfolio-mobile-app .mobile-story-share-card .mobile-story-share-headline {
  font-size: 34px !important;
  line-height: 1.12 !important;
  color: #fff7df !important;
  font-weight: 900 !important;
  letter-spacing: .01em !important;
  text-shadow: 0 0 24px rgba(255, 221, 142, .22) !important;
  max-width: 100% !important;
}

html.magnetfolio-mobile-app .mobile-story-share-card .mobile-story-share-stats {
  font-size: 15px !important;
  line-height: 1.35 !important;
  color: #c8d0e4 !important;
  font-weight: 700 !important;
  max-width: 100% !important;
}

html.magnetfolio-mobile-app .mobile-story-share-card .mobile-story-share-grid {
  width: 100% !important;
  flex: 1 1 auto !important;
  display: grid !important;
  gap: 14px !important;
  align-content: center !important;
  margin-top: 8px !important;
}

html.magnetfolio-mobile-app .mobile-story-share-card .mobile-story-share-grid.is-two {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: 1fr !important;
}

html.magnetfolio-mobile-app .mobile-story-share-card .mobile-story-share-grid.is-three {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
}

html.magnetfolio-mobile-app .mobile-story-share-card .mobile-story-share-grid.is-three .mobile-story-share-magnet:first-child {
  grid-column: 1 / -1 !important;
}

html.magnetfolio-mobile-app .mobile-story-share-card .mobile-story-share-grid.is-four {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
}

html.magnetfolio-mobile-app .mobile-story-share-card .mobile-story-share-magnet {
  display: grid !important;
  place-items: center !important;
  min-height: 180px !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  background: rgba(255, 255, 255, .05) !important;
  border: 1px solid rgba(255, 220, 142, .32) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .32) !important;
}

html.magnetfolio-mobile-app .mobile-story-share-card .mobile-story-share-magnet img {
  width: 100% !important;
  height: 100% !important;
  min-height: 180px !important;
  object-fit: cover !important;
}

html.magnetfolio-mobile-app .mobile-story-share-card .mobile-story-share-empty {
  flex: 1 1 auto !important;
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  min-height: 320px !important;
  border-radius: 24px !important;
  border: 1px dashed rgba(255, 220, 142, .28) !important;
  color: #a9b0c4 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

html.magnetfolio-mobile-app .mobile-story-share-card .mobile-story-share-score-chip {
  margin-top: auto !important;
  padding: 12px 20px !important;
  border-radius: 999px !important;
  color: #fff2d4 !important;
  background: rgba(255, 214, 116, .12) !important;
  border: 1px solid rgba(255, 224, 145, .3) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

html.magnetfolio-mobile-app .mobile-story-share-card .mobile-story-share-footer {
  width: 100% !important;
  padding-top: 16px !important;
  display: flex !important;
  justify-content: space-between !important;
  border-top: 1px solid rgba(255, 255, 255, .12) !important;
  font-size: 11px !important;
  color: #8f97ad !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
}

/* FINAL FIX 20260706-KK: Permanent Vault Memory Score chip v39. Always-visible black/gold
   badge in the mobile Vault hero (.vault-mobile-hero-compact). Reuses computeVaultMemoryScore()
   in app.js (same wow/tier math as computeMemoryScorePreview(), without the one-time collect
   bonus). Purely additive - does not restyle .mobile-memory-score-chip used by collect/milestone
   popups. Includes optional .vault-mobile-welcome-back one-liner when daysSinceLastOpen >= 1. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-memory-score-chip {
    display: inline-flex !important;
    flex: 1 1 100% !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 2px 0 0 !important;
    padding: 5px 12px !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: .04em !important;
    color: #fff2d4 !important;
    background: linear-gradient(135deg, rgba(255, 214, 116, .18), rgba(217, 162, 60, .1)) !important;
    border: 1px solid rgba(255, 224, 145, .34) !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .22) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-welcome-back {
    flex: 1 1 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: rgba(255, 236, 196, .88) !important;
    text-align: center !important;
  }
}

/* FINAL FIX 20260706-LL: Country Scratch modal after reveal on mobile (BUG-001). Compact shell/card,
   responsive title, post-reveal copy via .scratch-reveal-status in app.js, Vault full-width CTA row. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app .scratch-reveal-modal {
    padding: 14px 12px !important;
  }

  html.magnetfolio-mobile-app .scratch-reveal-modal .scratch-reveal-shell {
    width: min(100%, 360px) !important;
    max-height: calc(100vh - 28px) !important;
    padding: 16px 14px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 22px !important;
  }

  html.magnetfolio-mobile-app .scratch-reveal-modal .scratch-reveal-copy {
    max-width: none !important;
    margin-bottom: 10px !important;
  }

  html.magnetfolio-mobile-app .scratch-reveal-modal .scratch-reveal-copy h2 {
    font-size: clamp(20px, 5.6vw, 28px) !important;
    line-height: 1.08 !important;
    margin: 4px 0 6px !important;
    padding-right: 40px !important;
    letter-spacing: -.02em !important;
  }

  html.magnetfolio-mobile-app .scratch-reveal-modal .scratch-reveal-copy p {
    font-size: 13px !important;
    line-height: 1.45 !important;
    margin: 0 !important;
  }

  html.magnetfolio-mobile-app .scratch-reveal-modal .scratch-reveal-close {
    top: 12px !important;
    right: 12px !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 22px !important;
  }

  html.magnetfolio-mobile-app .scratch-reveal-modal .reveal-country-card {
    width: min(100%, 196px) !important;
    min-width: 0 !important;
    max-width: 196px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 auto !important;
    grid-template-rows: 148px 1fr !important;
    gap: 8px !important;
    padding: 8px !important;
    border-radius: 18px !important;
  }

  html.magnetfolio-mobile-app .scratch-reveal-modal .reveal-country-card .scratch-country-visual {
    height: 148px !important;
    min-height: 148px !important;
    max-height: 148px !important;
    border-radius: 14px !important;
  }

  html.magnetfolio-mobile-app .scratch-reveal-modal .reveal-country-card .scratch-country-content h3 {
    font-size: 18px !important;
  }

  html.magnetfolio-mobile-app .scratch-reveal-modal .reveal-country-card .scratch-label {
    font-size: 8px !important;
    padding: 4px 7px !important;
    margin-bottom: 4px !important;
  }

  html.magnetfolio-mobile-app .scratch-reveal-modal .reveal-country-card .scratch-country-content p {
    font-size: 11px !important;
    margin: 4px 0 8px !important;
  }

  html.magnetfolio-mobile-app .scratch-reveal-modal .reveal-country-card .scratch-city-list {
    gap: 6px !important;
  }

  html.magnetfolio-mobile-app .scratch-reveal-modal .reveal-country-card .scratch-city-list button {
    min-height: 28px !important;
    font-size: 11px !important;
    padding: 0 10px !important;
  }

  html.magnetfolio-mobile-app .scratch-reveal-modal .scratch-reveal-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-top: 12px !important;
  }

  html.magnetfolio-mobile-app .scratch-reveal-modal .scratch-reveal-actions button {
    width: 100% !important;
    min-height: 42px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
  }

  html.magnetfolio-mobile-app .scratch-reveal-modal .scratch-reveal-actions button:first-child {
    grid-column: 1 / -1 !important;
  }
}

/* FINAL FIX 20260706-country-scratch-footer-v41: Country Scratch card footer on mobile (BUG-002).
   Compact integrated status panel; smaller title/city rows; icon alignment. Builds on v40 LL. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app .scratch-reveal-modal .reveal-country-card {
    gap: 0 !important;
    padding: 6px !important;
    overflow: hidden !important;
    background:
      radial-gradient(circle at 50% 0, rgba(245, 196, 81, .14), transparent 42%),
      linear-gradient(180deg, rgba(18, 20, 30, .98), rgba(8, 10, 16, 1)) !important;
  }

  html.magnetfolio-mobile-app .scratch-reveal-modal .reveal-country-card .scratch-country-visual {
    border-radius: 12px 12px 0 0 !important;
    margin-bottom: 0 !important;
  }

  html.magnetfolio-mobile-app .scratch-reveal-modal .reveal-country-card .scratch-country-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    margin: 0 !important;
    padding: 5px 7px 7px !important;
    border-radius: 0 0 12px 12px !important;
    background: linear-gradient(180deg, rgba(12, 14, 22, .72) 0%, rgba(8, 10, 16, .96) 100%) !important;
    border-top: 1px solid rgba(255, 255, 255, .06) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03) !important;
    grid-template-rows: unset !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app .scratch-reveal-modal .reveal-country-card .scratch-label {
    align-self: flex-start !important;
    max-width: 100% !important;
    font-size: 7px !important;
    padding: 3px 6px !important;
    margin: 0 0 2px !important;
    letter-spacing: .06em !important;
    line-height: 1 !important;
  }

  html.magnetfolio-mobile-app .scratch-reveal-modal .reveal-country-card .scratch-country-content h3 {
    font-size: 14px !important;
    line-height: 1.1 !important;
    letter-spacing: -.01em !important;
    font-weight: 800 !important;
  }

  html.magnetfolio-mobile-app .scratch-reveal-modal .reveal-country-card .scratch-country-content p {
    font-size: 10px !important;
    line-height: 1.2 !important;
    margin: 0 0 4px !important;
    font-weight: 600 !important;
    color: rgba(199, 191, 217, .88) !important;
  }

  html.magnetfolio-mobile-app .scratch-reveal-modal .reveal-country-card .scratch-city-list {
    gap: 4px !important;
    padding: 0 !important;
  }

  html.magnetfolio-mobile-app .scratch-reveal-modal .reveal-country-card .scratch-city-list button {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    min-height: 22px !important;
    height: 22px !important;
    max-height: 22px !important;
    padding: 0 7px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, .04) !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
  }

  html.magnetfolio-mobile-app .scratch-reveal-modal .reveal-country-card .scratch-city-list button.owned {
    background: rgba(245, 196, 81, .08) !important;
    border-color: rgba(245, 196, 81, .22) !important;
  }

  html.magnetfolio-mobile-app .scratch-reveal-modal .reveal-country-card .scratch-city-list button span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 14px !important;
    min-width: 14px !important;
    flex: 0 0 14px !important;
    font-size: 9px !important;
    line-height: 1 !important;
    text-align: center !important;
  }
}

/* FINAL FIX 20260706-country-scratch-image-v42: Country Scratch post-reveal magnet image (BUG-004).
   Full magnet visible incl. bottom label; unlock badge flows below image. Builds on v40/v41. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app .scratch-reveal-modal .reveal-country-card {
    display: flex !important;
    flex-direction: column !important;
    grid-template-rows: unset !important;
    grid-template-columns: unset !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app .scratch-reveal-modal .reveal-country-card .scratch-country-visual {
    flex: 0 0 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    display: block !important;
    border-radius: 12px 12px 0 0 !important;
    margin-bottom: 0 !important;
  }

  html.magnetfolio-mobile-app .scratch-reveal-modal .reveal-country-card .scratch-country-visual img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center top !important;
    display: block !important;
  }

  html.magnetfolio-mobile-app .scratch-reveal-modal .reveal-country-card .scratch-country-content {
    flex: 0 0 auto !important;
    position: static !important;
    margin-top: 0 !important;
    padding: 4px 7px 6px !important;
    overflow: visible !important;
  }

  html.magnetfolio-mobile-app .scratch-reveal-modal .reveal-country-card .scratch-label {
    position: static !important;
    transform: none !important;
    margin: 0 0 2px !important;
  }

  html.magnetfolio-mobile-app .scratch-reveal-modal .reveal-country-card .scratch-city-list button {
    min-height: 20px !important;
    height: 20px !important;
    max-height: 20px !important;
  }
}

/* FINAL FIX 20260706-collection-display-v43: Collection Display Case fullscreen overlay scroll/layout (BUG-005).
   Header top, actions bottom, scrollable magnet grid middle; cards uniform with 2-line titles. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.vault-fullscreen-collection {
    pointer-events: auto !important;
    touch-action: pan-y !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 8px !important;
    border-radius: 14px !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.vault-fullscreen-collection .passport-clean-collection-head {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    margin: 0 0 8px !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.vault-fullscreen-collection .passport-clean-collection-head strong {
    font-size: 20px !important;
    line-height: 1.05 !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.vault-fullscreen-collection .passport-clean-collection-head small {
    font-size: 8.4px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.vault-fullscreen-collection .passport-clean-collection-grid {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    gap: 8px !important;
    align-items: start !important;
    align-content: start !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    padding: 4px 2px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.vault-fullscreen-collection .passport-clean-collection-magnet {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) 2.35em !important;
    gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 6px !important;
    border-radius: 10px !important;
    align-content: start !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.vault-fullscreen-collection .passport-clean-collection-magnet img {
    width: 100% !important;
    height: auto !important;
    max-height: 72px !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: contain !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.vault-fullscreen-collection .passport-clean-collection-magnet span {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
    font-size: 9px !important;
    line-height: 1.15 !important;
    text-align: center !important;
    min-height: 2.3em !important;
    max-height: 2.35em !important;
    margin: 0 !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-preview:has(.vault-fullscreen-collection) .vault-fullscreen-actions {
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
}

/* FINAL FIX 20260706-collection-display-v44: Collection Display Case card polish (BUG-006).
   Remove gray pill/rectangle backgrounds behind magnet cards in fullscreen overlay. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.vault-fullscreen-collection .passport-clean-collection-magnet,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.vault-fullscreen-collection .passport-clean-collection-magnet:nth-child(-n+5),
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.vault-fullscreen-collection .passport-clean-collection-magnet:nth-child(-n+7),
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.vault-fullscreen-collection .passport-clean-collection-magnet:nth-child(n+8) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
    overflow: visible !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.vault-fullscreen-collection .passport-clean-collection-magnet::before,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.vault-fullscreen-collection .passport-clean-collection-magnet::after {
    display: none !important;
    content: none !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.vault-fullscreen-collection .passport-clean-collection-magnet img {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: none !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.vault-fullscreen-collection .passport-clean-collection-magnet:hover,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.vault-fullscreen-collection .passport-clean-collection-magnet:focus {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
  }
}

/* FINAL FIX 20260706-collection-display-v46: Collection Display Case overlay scope + vault restore (BUG-008).
   Gate every overlay grid/card rule to the active collection fullscreen only; restore Vault layout on close. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-open) {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    touch-action: manipulation !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-collection-open) #vaultRoom .collection-display-stage {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-collection-open) #vaultRoom #collectionShareCard.collection-display-case,
  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-collection-open) #vaultRoom #collectionShareCard.passport-clean-collection {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin: 14px 0 0 !important;
    padding: 10px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    transform: none !important;
    zoom: 1 !important;
    flex: unset !important;
    flex-direction: unset !important;
    pointer-events: auto !important;
    touch-action: auto !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-collection-open) #vaultRoom #collectionShareCard .passport-clean-collection-head {
    flex: unset !important;
    min-height: 0 !important;
    margin: 0 0 9px !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-collection-open) #vaultRoom #collectionShareCard .passport-clean-collection-head strong {
    font-size: 21px !important;
    line-height: 1 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-collection-open) #vaultRoom #collectionShareCard .passport-clean-collection-head small {
    font-size: 9px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-collection-open) #vaultRoom #collectionShareCard .passport-clean-collection-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    gap: 8px !important;
    align-items: stretch !important;
    align-content: start !important;
    flex: unset !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    overscroll-behavior: auto !important;
    touch-action: auto !important;
    padding: 0 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-collection-open) #vaultRoom #collectionShareCard .passport-clean-collection-magnet {
    display: block !important;
    grid-template-rows: unset !important;
    gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 122px !important;
    height: auto !important;
    max-height: none !important;
    padding: 7px !important;
    border-radius: 9px !important;
    align-content: unset !important;
    background: unset !important;
    border: unset !important;
    box-shadow: unset !important;
    transform: none !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-collection-open) #vaultRoom #collectionShareCard .passport-clean-collection-magnet::before,
  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-collection-open) #vaultRoom #collectionShareCard .passport-clean-collection-magnet::after {
    display: unset !important;
    content: unset !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-collection-open) #vaultRoom #collectionShareCard .passport-clean-collection-magnet img {
    display: block !important;
    width: auto !important;
    height: 76px !important;
    max-width: 100% !important;
    max-height: none !important;
    aspect-ratio: unset !important;
    object-fit: contain !important;
    background: unset !important;
    border-radius: unset !important;
    box-shadow: unset !important;
    filter: unset !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-collection-open) #vaultRoom #collectionShareCard .passport-clean-collection-magnet span {
    display: block !important;
    -webkit-box-orient: unset !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    font-size: inherit !important;
    line-height: inherit !important;
    text-align: inherit !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
  }

  html.magnetfolio-mobile-app body.vault-fullscreen-open.vault-fullscreen-collection-open .vault-fullscreen-preview.show .vault-fullscreen-shell.vault-fullscreen-collection .vault-fullscreen-stage .vault-fullscreen-card.vault-fullscreen-collection {
    pointer-events: auto !important;
    touch-action: pan-y !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 8px !important;
    border-radius: 14px !important;
    isolation: isolate !important;
  }

  html.magnetfolio-mobile-app body.vault-fullscreen-open.vault-fullscreen-collection-open .vault-fullscreen-preview.show .vault-fullscreen-shell.vault-fullscreen-collection .vault-fullscreen-stage .vault-fullscreen-card.vault-fullscreen-collection .passport-clean-collection-head {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    margin: 0 0 8px !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
  }

  html.magnetfolio-mobile-app body.vault-fullscreen-open.vault-fullscreen-collection-open .vault-fullscreen-preview.show .vault-fullscreen-shell.vault-fullscreen-collection .vault-fullscreen-stage .vault-fullscreen-card.vault-fullscreen-collection .passport-clean-collection-head strong {
    font-size: 20px !important;
    line-height: 1.05 !important;
  }

  html.magnetfolio-mobile-app body.vault-fullscreen-open.vault-fullscreen-collection-open .vault-fullscreen-preview.show .vault-fullscreen-shell.vault-fullscreen-collection .vault-fullscreen-stage .vault-fullscreen-card.vault-fullscreen-collection .passport-clean-collection-head small {
    font-size: 8.4px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
  }

  html.magnetfolio-mobile-app body.vault-fullscreen-open.vault-fullscreen-collection-open .vault-fullscreen-preview.show .vault-fullscreen-shell.vault-fullscreen-collection .vault-fullscreen-stage .vault-fullscreen-card.vault-fullscreen-collection .passport-clean-collection-grid {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    gap: 8px !important;
    align-items: start !important;
    align-content: start !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    padding: 4px 2px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }

  html.magnetfolio-mobile-app body.vault-fullscreen-open.vault-fullscreen-collection-open .vault-fullscreen-preview.show .vault-fullscreen-shell.vault-fullscreen-collection .vault-fullscreen-stage .vault-fullscreen-card.vault-fullscreen-collection .passport-clean-collection-magnet,
  html.magnetfolio-mobile-app body.vault-fullscreen-open.vault-fullscreen-collection-open .vault-fullscreen-preview.show .vault-fullscreen-shell.vault-fullscreen-collection .vault-fullscreen-stage .vault-fullscreen-card.vault-fullscreen-collection .passport-clean-collection-magnet:nth-child(-n+5),
  html.magnetfolio-mobile-app body.vault-fullscreen-open.vault-fullscreen-collection-open .vault-fullscreen-preview.show .vault-fullscreen-shell.vault-fullscreen-collection .vault-fullscreen-stage .vault-fullscreen-card.vault-fullscreen-collection .passport-clean-collection-magnet:nth-child(-n+7),
  html.magnetfolio-mobile-app body.vault-fullscreen-open.vault-fullscreen-collection-open .vault-fullscreen-preview.show .vault-fullscreen-shell.vault-fullscreen-collection .vault-fullscreen-stage .vault-fullscreen-card.vault-fullscreen-collection .passport-clean-collection-magnet:nth-child(n+8) {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) 2.35em !important;
    gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 6px !important;
    border-radius: 10px !important;
    align-content: start !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
    overflow: visible !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  html.magnetfolio-mobile-app body.vault-fullscreen-open.vault-fullscreen-collection-open .vault-fullscreen-preview.show .vault-fullscreen-shell.vault-fullscreen-collection .vault-fullscreen-stage .vault-fullscreen-card.vault-fullscreen-collection .passport-clean-collection-magnet::before,
  html.magnetfolio-mobile-app body.vault-fullscreen-open.vault-fullscreen-collection-open .vault-fullscreen-preview.show .vault-fullscreen-shell.vault-fullscreen-collection .vault-fullscreen-stage .vault-fullscreen-card.vault-fullscreen-collection .passport-clean-collection-magnet::after {
    display: none !important;
    content: none !important;
  }

  html.magnetfolio-mobile-app body.vault-fullscreen-open.vault-fullscreen-collection-open .vault-fullscreen-preview.show .vault-fullscreen-shell.vault-fullscreen-collection .vault-fullscreen-stage .vault-fullscreen-card.vault-fullscreen-collection .passport-clean-collection-magnet img {
    width: 100% !important;
    height: auto !important;
    max-height: 72px !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: contain !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: none !important;
  }

  html.magnetfolio-mobile-app body.vault-fullscreen-open.vault-fullscreen-collection-open .vault-fullscreen-preview.show .vault-fullscreen-shell.vault-fullscreen-collection .vault-fullscreen-stage .vault-fullscreen-card.vault-fullscreen-collection .passport-clean-collection-magnet span {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
    font-size: 9px !important;
    line-height: 1.15 !important;
    text-align: center !important;
    min-height: 2.3em !important;
    max-height: 2.35em !important;
    margin: 0 !important;
  }

  html.magnetfolio-mobile-app body.vault-fullscreen-open.vault-fullscreen-collection-open .vault-fullscreen-preview.show .vault-fullscreen-shell.vault-fullscreen-collection .vault-fullscreen-actions {
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
}

/* FINAL FIX 20260706-collection-display-v47: Vault Display Case restore after overlay close (BUG-009).
   v46 resets were insufficient: overlay grid/card styles and passport-final grid spans still leaked
   into #vaultRoom once body classes dropped. Force compact 2-column cards only when NOT fullscreen. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-open):not(.vault-fullscreen-collection-open) {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    touch-action: manipulation !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-open):not(.vault-fullscreen-collection-open) #vaultRoom .collection-display-stage {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 0 calc(68px + 16px + env(safe-area-inset-bottom, 0px)) !important;
    overflow: visible !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-open):not(.vault-fullscreen-collection-open) #vaultRoom #collectionShareCard.collection-display-case:not(.vault-fullscreen-card),
  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-open):not(.vault-fullscreen-collection-open) #vaultRoom #collectionShareCard.passport-clean-collection:not(.vault-fullscreen-card) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin: 14px 0 0 !important;
    padding: 10px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    transform: none !important;
    zoom: 1 !important;
    flex: none !important;
    flex-direction: unset !important;
    pointer-events: auto !important;
    touch-action: auto !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-open):not(.vault-fullscreen-collection-open) #vaultRoom #collectionShareCard:not(.vault-fullscreen-card) .passport-clean-collection-head {
    display: block !important;
    flex: none !important;
    min-height: 0 !important;
    margin: 0 0 9px !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-open):not(.vault-fullscreen-collection-open) #vaultRoom #collectionShareCard:not(.vault-fullscreen-card) .passport-clean-collection-head strong {
    font-size: 21px !important;
    line-height: 1 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-open):not(.vault-fullscreen-collection-open) #vaultRoom #collectionShareCard:not(.vault-fullscreen-card) .passport-clean-collection-head small {
    font-size: 9px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-open):not(.vault-fullscreen-collection-open) #vaultRoom #collectionShareCard:not(.vault-fullscreen-card) .passport-clean-collection-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    grid-auto-flow: row !important;
    gap: 8px !important;
    align-items: stretch !important;
    align-content: start !important;
    flex: none !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    overscroll-behavior: auto !important;
    touch-action: auto !important;
    padding: 0 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-open):not(.vault-fullscreen-collection-open) #vaultRoom #collectionShareCard:not(.vault-fullscreen-card) .passport-clean-collection-magnet,
  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-open):not(.vault-fullscreen-collection-open) #vaultRoom #collectionShareCard:not(.vault-fullscreen-card) .passport-clean-collection-magnet:nth-child(-n+5),
  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-open):not(.vault-fullscreen-collection-open) #vaultRoom #collectionShareCard:not(.vault-fullscreen-card) .passport-clean-collection-magnet:nth-child(-n+7),
  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-open):not(.vault-fullscreen-collection-open) #vaultRoom #collectionShareCard:not(.vault-fullscreen-card) .passport-clean-collection-magnet:nth-child(n+8) {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    grid-template-rows: none !important;
    grid-template-columns: none !important;
    grid-column: auto !important;
    grid-row: auto !important;
    gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 122px !important;
    height: auto !important;
    max-height: none !important;
    padding: 7px !important;
    border-radius: 9px !important;
    align-content: unset !important;
    background: rgba(255, 255, 255, .055) !important;
    border: 1px solid rgba(232, 190, 99, .2) !important;
    box-shadow: 0 12px 26px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
    transform: none !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-open):not(.vault-fullscreen-collection-open) #vaultRoom #collectionShareCard:not(.vault-fullscreen-card) .passport-clean-collection-magnet::before,
  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-open):not(.vault-fullscreen-collection-open) #vaultRoom #collectionShareCard:not(.vault-fullscreen-card) .passport-clean-collection-magnet::after {
    display: none !important;
    content: none !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-open):not(.vault-fullscreen-collection-open) #vaultRoom #collectionShareCard:not(.vault-fullscreen-card) .passport-clean-collection-magnet img {
    display: block !important;
    width: auto !important;
    height: 76px !important;
    max-width: 100% !important;
    max-height: none !important;
    aspect-ratio: unset !important;
    object-fit: contain !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: none !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-open):not(.vault-fullscreen-collection-open) #vaultRoom #collectionShareCard:not(.vault-fullscreen-card) .passport-clean-collection-magnet span {
    display: block !important;
    -webkit-box-orient: unset !important;
    -webkit-line-clamp: unset !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 10px !important;
    line-height: 1.05 !important;
    text-align: center !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 4px 0 0 !important;
    padding: 0 !important;
  }
}

/* FINAL FIX 20260706-passport-premium-v48: POLISH-011 World Passport premium book pass.
   Scoped to passport anchor + mobile passport card only. Centers intro/title, open-book spread
   with shared spine, equal pages, paper texture, imperfect airport stamps, wireframe globe. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page .passport-anchor-block .passport-main-title {
    display: grid !important;
    justify-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 8px !important;
    padding: 0 6px !important;
    text-align: center !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .passport-anchor-block .passport-main-title .section-kicker,
  html.magnetfolio-mobile-app body.vault-feature-page .passport-anchor-block .passport-main-title h2,
  html.magnetfolio-mobile-app body.vault-feature-page .passport-anchor-block .passport-main-title p {
    width: 100% !important;
    max-width: 34ch !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-head {
    justify-items: center !important;
    text-align: center !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-head strong,
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-head small {
    max-width: 100% !important;
    text-align: center !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-progress-ring {
    border-radius: 50% !important;
    background:
      conic-gradient(from 210deg, #f5cf71 calc(var(--vault-ring-pct, 0) * 1%), rgba(255, 219, 135, .12) 0) !important;
    box-shadow: 0 0 0 1px rgba(255, 219, 135, .28), inset 0 0 12px rgba(0, 0, 0, .35) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-progress-ring::before {
    inset: 5px !important;
    background:
      radial-gradient(circle at 50% 50%, rgba(8, 10, 18, .98) 58%, rgba(8, 10, 18, .88) 100%),
      repeating-linear-gradient(0deg, rgba(255, 219, 135, 0) 0 7px, rgba(255, 219, 135, .14) 7px 8px),
      repeating-linear-gradient(90deg, rgba(255, 219, 135, 0) 0 7px, rgba(255, 219, 135, .1) 7px 8px) !important;
    border: 1px solid rgba(255, 219, 135, .24) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-progress-ring::after {
    content: "" !important;
    position: absolute !important;
    inset: 14px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255, 219, 135, .22) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 219, 135, .08) !important;
    pointer-events: none !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-globe {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    background: transparent !important;
    border: 1.5px solid rgba(245, 207, 115, .62) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255, 219, 135, .12),
      0 0 10px rgba(255, 214, 140, .18) !important;
    overflow: visible !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-globe::before {
    inset: 3px !important;
    border-radius: 50% !important;
    background:
      repeating-linear-gradient(0deg, rgba(255, 219, 135, 0) 0 5px, rgba(255, 219, 135, .22) 5px 6px),
      repeating-linear-gradient(90deg, rgba(255, 219, 135, 0) 0 5px, rgba(255, 219, 135, .16) 5px 6px) !important;
    mix-blend-mode: normal !important;
    opacity: .95 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-globe::after {
    inset: -1px !important;
    border-radius: 50% !important;
    border: 1px dashed rgba(255, 219, 135, .34) !important;
    background: transparent !important;
    transform: rotate(18deg) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-spread {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 0 !important;
    min-height: 252px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background:
      linear-gradient(90deg, rgba(0, 0, 0, .22) calc(50% - 1px), rgba(255, 226, 159, .55) 50%, rgba(0, 0, 0, .28) calc(50% + 1px)),
      linear-gradient(180deg, rgba(248, 227, 171, .2), rgba(214, 186, 120, .12)) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255, 219, 139, .24),
      inset 0 1px 0 rgba(255, 255, 255, .16),
      0 10px 24px rgba(0, 0, 0, .22) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-spread::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 50% !important;
    width: 3px !important;
    transform: translateX(-50%) !important;
    background: linear-gradient(180deg, rgba(0, 0, 0, .08), rgba(0, 0, 0, .34) 45%, rgba(0, 0, 0, .08)) !important;
    box-shadow:
      -1px 0 0 rgba(255, 255, 255, .08),
      1px 0 0 rgba(0, 0, 0, .18) !important;
    pointer-events: none !important;
    z-index: 2 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-spread {
    position: relative !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-page {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    align-content: start !important;
    justify-items: center !important;
    gap: 5px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 252px !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 8px 7px 10px !important;
    border: none !important;
    border-radius: 0 !important;
    background:
      radial-gradient(circle at 18% 12%, rgba(255, 255, 255, .34), transparent 38%),
      repeating-linear-gradient(135deg, rgba(120, 88, 34, .03) 0 2px, rgba(120, 88, 34, 0) 2px 5px),
      linear-gradient(165deg, rgba(255, 244, 205, .98), rgba(232, 205, 142, .94)) !important;
    box-shadow: inset -8px 0 14px rgba(0, 0, 0, .04) !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-page:first-child:not(:only-child) {
    border-radius: 9px 0 0 9px !important;
    box-shadow: inset -10px 0 16px rgba(0, 0, 0, .06) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-page:last-child:not(:only-child) {
    border-radius: 0 9px 9px 0 !important;
    box-shadow: inset 8px 0 14px rgba(0, 0, 0, .05) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-page::after {
    right: -10px !important;
    bottom: 24px !important;
    font-size: 32px !important;
    opacity: .55 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-page-top {
    width: 100% !important;
    z-index: 4 !important;
    padding-right: 28px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-sticker {
    position: relative !important;
    z-index: 1 !important;
    width: min(132px, 92%) !important;
    min-height: 96px !important;
    margin-top: 2px !important;
    padding: 5px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, .62) !important;
    box-shadow: 0 10px 18px rgba(76, 48, 8, .14) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp {
    position: absolute !important;
    top: calc(52px + var(--passport-stamp-y, 0px)) !important;
    right: calc(6px + var(--passport-stamp-x, 0px)) !important;
    z-index: 3 !important;
    display: grid !important;
    gap: 1px !important;
    justify-items: center !important;
    padding: 3px 7px 4px !important;
    border: 2px solid rgba(217, 91, 109, .72) !important;
    border-radius: 4px !important;
    background: rgba(255, 248, 244, .78) !important;
    color: #c94a5d !important;
    box-shadow: 0 2px 8px rgba(76, 20, 28, .16) !important;
    transform: rotate(var(--passport-stamp-rotate, -8deg)) !important;
    transform-origin: 72% 78% !important;
    pointer-events: none !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp strong {
    font-size: 7px !important;
    font-weight: 950 !important;
    letter-spacing: .08em !important;
    line-height: 1 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp small {
    font-size: 6px !important;
    font-weight: 900 !important;
    letter-spacing: .04em !important;
    line-height: 1 !important;
    color: rgba(201, 74, 93, .88) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-city,
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-page > strong {
    position: relative !important;
    z-index: 4 !important;
    width: 100% !important;
    margin-top: 4px !important;
    padding: 0 4px !important;
    text-align: center !important;
    font-size: 13px !important;
    line-height: 1.05 !important;
    overflow-wrap: anywhere !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .mobile-passport-spread,
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .single-stamp-spread {
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 0 !important;
    padding: 0 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .mobile-passport-spread::before {
    display: none !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .mobile-passport-page.is-featured-single {
    min-height: 0 !important;
    height: auto !important;
    border-radius: 9px !important;
    box-shadow: none !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-spread {
    min-height: min(52vh, 360px) !important;
    gap: 0 !important;
    padding: 0 !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-page {
    min-height: min(52vh, 360px) !important;
    height: 100% !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-stamp {
    top: calc(58px + var(--passport-stamp-y, 0px)) !important;
    right: calc(10px + var(--passport-stamp-x, 0px)) !important;
  }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  html.magnetfolio-mobile-app body.vault-feature-page .mobile-passport-spread.is-page-enter-forward,
  html.magnetfolio-mobile-app body.vault-feature-page .mobile-passport-spread.is-page-enter-back {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-globe::after {
    transform: none !important;
  }
}

/* FINAL FIX 20260706-passport-premium-v48: POLISH-011 World Passport premium book feel.
   Mobile-only, scoped to vault passport card + hero globe/progress (not Display Case/Scratch/Rewards/Wall). */
@media (max-width: 760px) {
  /* V48-1: Hero globe reads as world/travel — ocean sphere with latitude + meridian rings, not a basketball. */
  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-globe {
    background:
      radial-gradient(circle at 34% 28%, rgba(120, 198, 255, .92), rgba(28, 92, 158, .88) 42%, rgba(8, 32, 58, .98) 100%) !important;
    box-shadow:
      inset -4px -5px 10px rgba(0, 0, 0, .45),
      inset 3px 3px 8px rgba(160, 220, 255, .28),
      0 0 10px rgba(72, 156, 220, .35) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-globe::before {
    background:
      repeating-linear-gradient(0deg, rgba(255, 255, 255, 0) 0 5px, rgba(255, 255, 255, .14) 5px 6px),
      repeating-linear-gradient(90deg, rgba(0, 0, 0, 0) 0 7px, rgba(0, 0, 0, .16) 7px 8px) !important;
    mix-blend-mode: soft-light !important;
    opacity: .85 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-globe::after {
    inset: 3px !important;
    border: 1px solid rgba(140, 210, 255, .35) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, .12),
      inset -6px 0 8px rgba(0, 0, 0, .22) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-progress-ring::after {
    content: "" !important;
    position: absolute !important;
    inset: 10px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(120, 190, 255, .22) !important;
    background:
      repeating-linear-gradient(0deg, rgba(255, 255, 255, 0) 0 4px, rgba(255, 255, 255, .08) 4px 5px),
      repeating-linear-gradient(90deg, rgba(0, 0, 0, 0) 0 5px, rgba(0, 0, 0, .12) 5px 6px) !important;
    opacity: .55 !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }

  /* V48-2: Centered premium passport intro/title block. */
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-head {
    display: grid !important;
    justify-items: center !important;
    text-align: center !important;
    padding: 12px 14px 8px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-head span,
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-head strong,
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-head small {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-share {
    justify-self: center !important;
    width: min(100%, 280px) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-share button {
    width: 100% !important;
  }

  /* V48-3: Open passport book — equal pages, shared spine, paper texture, matched heights. */
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book {
    padding: 0 0 10px !important;
    border-radius: 14px !important;
    background:
      linear-gradient(180deg, rgba(18, 22, 34, .98), rgba(8, 10, 18, .98)) !important;
    box-shadow:
      0 20px 44px rgba(0, 0, 0, .38),
      inset 0 1px 0 rgba(255, 219, 135, .16) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-spread {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: calc(100% - 16px) !important;
    min-height: 272px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background:
      linear-gradient(90deg, rgba(0, 0, 0, .14) 0, transparent 6%, transparent 94%, rgba(0, 0, 0, .14) 100%),
      linear-gradient(180deg, rgba(255, 248, 230, .98), rgba(236, 214, 162, .94)) !important;
    box-shadow:
      inset 0 0 0 1px rgba(120, 88, 36, .22),
      inset 0 8px 18px rgba(255, 255, 255, .28),
      inset 0 -10px 16px rgba(92, 66, 24, .12),
      0 10px 22px rgba(0, 0, 0, .22) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-spread::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 50% !important;
    width: 5px !important;
    transform: translateX(-50%) !important;
    background:
      linear-gradient(90deg, rgba(72, 48, 18, .28), rgba(24, 16, 8, .55) 50%, rgba(72, 48, 18, .28)) !important;
    box-shadow:
      -1px 0 0 rgba(255, 255, 255, .18),
      1px 0 0 rgba(0, 0, 0, .18) !important;
    z-index: 3 !important;
    pointer-events: none !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-spread {
    position: relative !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-page {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    align-content: start !important;
    justify-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 272px !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 10px 8px 12px !important;
    border: none !important;
    border-radius: 0 !important;
    background:
      repeating-linear-gradient(0deg, rgba(120, 88, 36, 0) 0 3px, rgba(120, 88, 36, .035) 3px 4px),
      linear-gradient(155deg, rgba(255, 246, 220, .98), rgba(241, 219, 166, .94)) !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-page:first-child {
    box-shadow: inset -8px 0 12px rgba(72, 48, 18, .08) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-page:last-child {
    box-shadow: inset 8px 0 12px rgba(72, 48, 18, .08) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-page-top {
    width: 100% !important;
    z-index: 6 !important;
    text-align: center !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-sticker {
    position: relative !important;
    z-index: 2 !important;
    width: min(128px, 88%) !important;
    margin: 4px 0 0 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-city {
    position: relative !important;
    z-index: 6 !important;
    width: 100% !important;
    margin-top: 8px !important;
    text-align: center !important;
    font-size: 13px !important;
    line-height: 1.05 !important;
    overflow-wrap: anywhere !important;
  }

  /* V48-4: Imperfect airport stamp — per-country CSS vars from app.js, overlaps magnet corner, not labels. */
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp {
    position: absolute !important;
    top: calc(46% + var(--passport-stamp-y, 0px)) !important;
    right: calc(10% - var(--passport-stamp-x, 0px)) !important;
    z-index: 4 !important;
    display: grid !important;
    gap: 1px !important;
    justify-items: center !important;
    width: 52px !important;
    padding: 4px 5px 3px !important;
    border: 2px solid rgba(198, 58, 72, .72) !important;
    border-radius: 4px !important;
    background: rgba(255, 252, 245, .78) !important;
    color: rgba(176, 42, 58, .92) !important;
    transform: rotate(var(--passport-stamp-rotate, -8deg)) !important;
    transform-origin: 50% 50% !important;
    box-shadow: 0 2px 6px rgba(76, 24, 8, .16) !important;
    pointer-events: none !important;
    mix-blend-mode: multiply !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp strong {
    font-size: 7px !important;
    font-weight: 950 !important;
    letter-spacing: .08em !important;
    line-height: 1 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp small {
    font-size: 6px !important;
    font-weight: 900 !important;
    letter-spacing: .04em !important;
    line-height: 1 !important;
  }

  /* Single-stamp spread: one centered page, no empty half. */
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .mobile-passport-spread,
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .single-stamp-spread {
    grid-template-columns: minmax(0, 1fr) !important;
    width: min(100%, 320px) !important;
    margin: 0 auto !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .mobile-passport-spread::before {
    display: none !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .mobile-passport-page.is-featured-single {
    border-radius: 10px !important;
    box-shadow: inset 0 0 0 1px rgba(120, 88, 36, .14) !important;
  }

  /* Fullscreen passport clone inherits the same book/spine/stamp rules. */
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-head {
    justify-items: center !important;
    text-align: center !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-spread {
    gap: 0 !important;
    min-height: 272px !important;
    position: relative !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-page {
    min-height: 272px !important;
    height: 100% !important;
    border-radius: 0 !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-stamp {
    position: absolute !important;
    top: calc(46% + var(--passport-stamp-y, 0px)) !important;
    right: calc(10% - var(--passport-stamp-x, 0px)) !important;
    transform: rotate(var(--passport-stamp-rotate, -8deg)) !important;
    z-index: 4 !important;
  }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-spread.is-page-enter-forward,
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-spread.is-page-enter-back {
    animation: none !important;
    transition: none !important;
  }
}

/* FINAL FIX 20260706-passport-premium-v49: BUG-013 World Passport mobile controls/stamp/layout.
   Keep v48 open-book spread/spine/paper. Fix muddy center stamp, tall pages, hidden pagination,
   and Display Case-style fullscreen action bar overlapping the passport card. Mobile + World Passport only. */
@media (max-width: 760px) {
  /* V49-1: Compact header row — Share lives beside the collector name, not below the book. */
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 8px 10px 10px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto auto !important;
    align-items: center !important;
    gap: 2px 8px !important;
    order: 1 !important;
    padding: 6px 8px 4px !important;
    border-bottom: 1px solid rgba(255, 221, 145, .16) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-head > span {
    grid-column: 1 / -1 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-head > strong {
    grid-column: 1 !important;
    min-width: 0 !important;
    font-size: 17px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-head > small {
    grid-column: 1 / -1 !important;
    margin: 0 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-head .mobile-passport-share {
    grid-column: 2 !important;
    grid-row: 2 !important;
    order: unset !important;
    display: grid !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    justify-self: end !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-head .mobile-passport-share button {
    width: auto !important;
    min-width: 0 !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    font-size: 9px !important;
    letter-spacing: .06em !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .28) !important;
  }

  /* V49-2: Shorter open-book pages that fit the mobile viewport (keep v48 spine/texture). */
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-spread {
    order: 2 !important;
    min-height: min(34vh, 208px) !important;
    max-height: min(38vh, 228px) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-page {
    min-height: min(34vh, 208px) !important;
    max-height: min(38vh, 228px) !important;
    padding: 7px 6px 8px !important;
    grid-template-rows: auto auto auto !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .mobile-passport-spread,
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .mobile-passport-page.is-featured-single {
    min-height: min(32vh, 196px) !important;
    max-height: min(36vh, 216px) !important;
  }

  /* V49-3: Airport stamp on magnet corner — smaller, opaque, varied angle, not over city label. */
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-sticker-wrap {
    position: relative !important;
    width: min(116px, 86%) !important;
    margin: 2px 0 0 !important;
    z-index: 2 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-sticker {
    width: 100% !important;
    min-height: 76px !important;
    padding: 4px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-sticker img {
    width: 80px !important;
    height: 68px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp {
    position: absolute !important;
    top: auto !important;
    left: auto !important;
    bottom: calc(1px + var(--passport-stamp-y, 0px)) !important;
    right: calc(-3px + var(--passport-stamp-x, 0px)) !important;
    width: 36px !important;
    padding: 2px 4px 2px !important;
    border: 2px solid rgba(168, 28, 44, .92) !important;
    border-radius: 3px !important;
    background: rgba(255, 251, 244, .97) !important;
    color: rgba(154, 24, 40, .98) !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, .65) inset,
      0 2px 4px rgba(72, 18, 24, .24) !important;
    transform: rotate(var(--passport-stamp-rotate, -11deg)) !important;
    transform-origin: 84% 90% !important;
    z-index: 5 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp strong {
    font-size: 6px !important;
    letter-spacing: .06em !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp small {
    font-size: 5.5px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-city {
    margin-top: 4px !important;
    font-size: 12px !important;
    z-index: 6 !important;
  }

  /* V49-4: Pagination always visible below the spread, above bottom nav. */
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-controls {
    order: 3 !important;
    display: grid !important;
    position: relative !important;
    z-index: 14 !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 2px 4px 0 !important;
    padding: 0 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .mobile-passport-stage {
    margin-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    padding-bottom: 2px !important;
  }

  /* V49-5: Fullscreen passport — hide Display Case-style bottom bar; use in-card header share + pagination. */
  html.magnetfolio-mobile-app body.vault-fullscreen-passport-open .vault-fullscreen-preview .vault-fullscreen-actions {
    display: none !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    gap: 6px !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    padding: 8px !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-controls {
    display: grid !important;
    position: relative !important;
    z-index: 12 !important;
    margin: 0 !important;
    padding: 0 2px 2px !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-spread {
    min-height: min(40vh, 214px) !important;
    max-height: min(44vh, 232px) !important;
    height: auto !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-page {
    min-height: min(40vh, 214px) !important;
    max-height: min(44vh, 232px) !important;
    height: auto !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-stamp {
    top: auto !important;
    bottom: calc(1px + var(--passport-stamp-y, 0px)) !important;
    right: calc(-3px + var(--passport-stamp-x, 0px)) !important;
    mix-blend-mode: normal !important;
    opacity: 1 !important;
  }
}

/* FINAL FIX 20260706-passport-premium-v50: BUG-014 border-control stamp variants.
   Keep v48/v49 open-book, pagination, compact Share. Replace horizontal text banner with
   compact round/oval/angled stamps on magnet corner — dusty rose ink, never clipped. Mobile + World Passport only. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-page,
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-spread {
    overflow: visible !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-sticker-wrap {
    overflow: visible !important;
    padding: 10px 14px 2px 2px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp {
    position: absolute !important;
    top: calc(-4px + var(--passport-stamp-y, 0px)) !important;
    bottom: auto !important;
    left: auto !important;
    right: calc(-10px + var(--passport-stamp-x, 0px)) !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: rotate(var(--passport-stamp-rotate, -12deg)) !important;
    transform-origin: 72% 28% !important;
    z-index: 5 !important;
    pointer-events: none !important;
    mix-blend-mode: multiply !important;
    opacity: .9 !important;
    color: rgba(148, 34, 52, .94) !important;
    filter: saturate(.88) contrast(1.06) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp-core {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1px !important;
    text-align: center !important;
    line-height: 1 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp em {
    font-style: normal !important;
    font-size: 4.2px !important;
    font-weight: 850 !important;
    letter-spacing: .14em !important;
    opacity: .88 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp strong {
    font-size: 10px !important;
    font-weight: 950 !important;
    letter-spacing: .04em !important;
    line-height: 1 !important;
    text-shadow: 0 0 .4px rgba(148, 34, 52, .55) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp small {
    font-size: 6.5px !important;
    font-weight: 850 !important;
    letter-spacing: .06em !important;
    line-height: 1 !important;
    opacity: .86 !important;
  }

  /* V50-1: Round border-control stamp (~60% of pages). */
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp--round {
    width: 62px !important;
    height: 62px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp--round .mobile-passport-stamp-ring {
    position: absolute !important;
    inset: 0 !important;
    border: 2px solid rgba(162, 38, 54, .78) !important;
    border-radius: 50% !important;
    box-shadow:
      inset 0 0 0 1.5px rgba(162, 38, 54, .52),
      0 0 0 .5px rgba(162, 38, 54, .35) !important;
    opacity: .94 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp--round .mobile-passport-stamp-ring::after {
    content: "" !important;
    position: absolute !important;
    inset: 5px !important;
    border: 1.5px solid rgba(162, 38, 54, .62) !important;
    border-radius: 50% !important;
    opacity: .82 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp--round .mobile-passport-stamp-core strong {
    font-size: 11px !important;
  }

  /* V50-2: Oval airport stamp. */
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp--oval {
    width: 64px !important;
    height: 44px !important;
    border: 2px solid rgba(162, 38, 54, .76) !important;
    border-radius: 50% / 42% !important;
    box-shadow:
      inset 0 0 0 1px rgba(162, 38, 54, .48),
      0 1px 2px rgba(72, 18, 24, .16) !important;
    background: rgba(255, 250, 246, .08) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp--oval .mobile-passport-stamp-core em {
    font-size: 3.8px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp--oval .mobile-passport-stamp-core strong {
    font-size: 8px !important;
    letter-spacing: .1em !important;
  }

  /* V50-3: Small angled entry stamp. */
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp--angled {
    width: 48px !important;
    min-height: 34px !important;
    padding: 4px 5px 3px !important;
    border: 2px double rgba(162, 38, 54, .8) !important;
    border-radius: 2px !important;
    flex-direction: column !important;
    gap: 2px !important;
    background: rgba(255, 250, 246, .06) !important;
    box-shadow: 0 1px 2px rgba(72, 18, 24, .14) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp--angled strong {
    font-size: 7px !important;
    letter-spacing: .12em !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp--angled small {
    font-size: 6px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-city {
    position: relative !important;
    z-index: 6 !important;
    margin-top: 5px !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-sticker-wrap {
    overflow: visible !important;
    padding: 10px 14px 2px 2px !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-stamp {
    top: calc(-4px + var(--passport-stamp-y, 0px)) !important;
    bottom: auto !important;
    right: calc(-10px + var(--passport-stamp-x, 0px)) !important;
    mix-blend-mode: multiply !important;
    opacity: .9 !important;
  }
}

/* FINAL FIX 20260706-passport-premium-v51: POLISH-015 hero page interior + unbranded stamps.
   Keep v48-v50 open-book spread, spine, pagination. Magnet is hero; city + tiny meta below.
   Remove country title, white magnet boxes, MAGNETFOLIO stamp text. Mobile + World Passport only. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-page {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    grid-template-rows: unset !important;
    gap: 0 !important;
    padding: 6px 5px 7px !important;
    overflow: visible !important;
    background:
      radial-gradient(circle at 18% 12%, rgba(255, 255, 255, .28), transparent 42%),
      radial-gradient(circle at 82% 88%, rgba(120, 88, 38, .08), transparent 38%),
      linear-gradient(158deg, rgba(252, 241, 205, .97), rgba(228, 203, 142, .94)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .55),
      inset 0 -2px 6px rgba(92, 64, 22, .08),
      inset 2px 0 4px rgba(92, 64, 22, .04),
      inset -2px 0 4px rgba(92, 64, 22, .04) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-page-top {
    display: none !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    width: 100% !important;
    min-height: 0 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-sticker-wrap {
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 2px 16px 0 0 !important;
    overflow: visible !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-sticker {
    display: grid !important;
    place-items: center !important;
    width: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-sticker img {
    width: min(112px, 84%) !important;
    max-width: 112px !important;
    height: auto !important;
    min-height: 92px !important;
    max-height: 118px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 10px 16px rgba(72, 46, 10, .24)) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-city {
    position: relative !important;
    z-index: 2 !important;
    margin: 2px 0 0 !important;
    padding: 0 4px !important;
    color: #1a140c !important;
    font-size: 11.5px !important;
    font-weight: 900 !important;
    line-height: 1.12 !important;
    letter-spacing: .01em !important;
    text-align: center !important;
    overflow-wrap: anywhere !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-meta {
    position: relative !important;
    z-index: 2 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: rgba(56, 41, 18, .52) !important;
    font-size: 7.5px !important;
    font-weight: 800 !important;
    letter-spacing: .12em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    text-align: center !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp {
    top: calc(2px + var(--passport-stamp-y, 0px)) !important;
    right: calc(-6px + var(--passport-stamp-x, 0px)) !important;
    transform-origin: 70% 24% !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp--round .mobile-passport-stamp-core strong {
    font-size: 9px !important;
    letter-spacing: .08em !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp--oval .mobile-passport-stamp-core strong {
    font-size: 7.5px !important;
    letter-spacing: .1em !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp--oval .mobile-passport-stamp-core small,
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp--angled small {
    font-size: 5.8px !important;
    letter-spacing: .04em !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .mobile-passport-page.is-featured-single .mobile-passport-sticker img {
    width: min(128px, 72%) !important;
    max-width: 128px !important;
    min-height: 104px !important;
    max-height: 132px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .mobile-passport-page.is-featured-single .mobile-passport-city {
    font-size: 13px !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-page {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-sticker {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-sticker img {
    width: min(120px, 84%) !important;
    max-width: 120px !important;
    min-height: 98px !important;
    max-height: 126px !important;
    filter: drop-shadow(0 10px 16px rgba(72, 46, 10, .24)) !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-meta {
    border: none !important;
    background: transparent !important;
    color: rgba(56, 41, 18, .52) !important;
    font-size: 7.5px !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
  }
}

/* FINAL FIX 20260706-passport-premium-v52: POLISH-016 holistic World Passport premium pass.
   Keep v48-v51 open-book spread, spine, pagination, unbranded stamps. Fix portrait/landscape hero
   balance, corner-attached border-control stamps, white boxes, muddy watermark, empty beige pages.
   Mobile + World Passport only. Share PNG clones #passportShareCard with same computed styles. */
@media (max-width: 760px) {
  /* V52-1: Compact spread — no tall empty paper; equal pages keep shared spine. */
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-spread {
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-page {
    position: relative !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    padding: 5px 4px 6px !important;
    background:
      radial-gradient(circle at 20% 14%, rgba(255, 255, 255, .22), transparent 44%),
      radial-gradient(circle at 78% 86%, rgba(108, 78, 34, .06), transparent 40%),
      repeating-linear-gradient(135deg, rgba(98, 72, 28, .025) 0 2px, rgba(98, 72, 28, 0) 2px 6px),
      linear-gradient(158deg, rgba(251, 238, 198, .98), rgba(226, 200, 138, .95)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .48),
      inset 0 -1px 4px rgba(88, 62, 22, .06) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-page::after {
    display: none !important;
  }

  /* V52-2: Hero magnet frame — portrait + landscape share one balanced box, no white plate. */
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-hero {
    gap: 4px !important;
    width: 100% !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-sticker-wrap {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: min(118px, 90%) !important;
    height: 114px !important;
    margin: 0 auto !important;
    padding: 0 12px 0 0 !important;
    overflow: visible !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-sticker {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-sticker img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: min(104px, 100%) !important;
    max-height: 104px !important;
    min-width: 68px !important;
    min-height: 68px !important;
    object-fit: contain !important;
    object-position: center center !important;
    filter: drop-shadow(0 8px 14px rgba(72, 46, 10, .22)) !important;
  }

  /* V52-3: Border-control stamp on magnet corner — dusty rose, never over place name. */
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp {
    top: auto !important;
    bottom: calc(10px + var(--passport-stamp-y, 0px)) !important;
    right: calc(0px + var(--passport-stamp-x, 0px)) !important;
    transform: rotate(var(--passport-stamp-rotate, -10deg)) !important;
    transform-origin: 82% 88% !important;
    mix-blend-mode: multiply !important;
    opacity: .92 !important;
    color: rgba(142, 36, 54, .94) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp--round {
    width: 56px !important;
    height: 56px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp--oval {
    width: 58px !important;
    height: 40px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp--angled {
    width: 44px !important;
    min-height: 30px !important;
  }

  /* V52-4: Place name + tiny metadata — balanced spacing below hero. */
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-city {
    margin: 1px 0 0 !important;
    padding: 0 3px !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1.14 !important;
    z-index: 6 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-meta {
    margin: 1px 0 0 !important;
    font-size: 7px !important;
    letter-spacing: .1em !important;
    opacity: .72 !important;
    z-index: 6 !important;
  }

  /* V52-5: Single-stamp centered spread — slightly larger hero, still compact. */
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .mobile-passport-spread,
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .mobile-passport-page.is-featured-single {
    min-height: 0 !important;
    max-height: none !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .mobile-passport-sticker-wrap {
    width: min(132px, 68%) !important;
    height: 126px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .mobile-passport-sticker img {
    max-width: min(118px, 100%) !important;
    max-height: 118px !important;
    min-width: 76px !important;
    min-height: 76px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .mobile-passport-page.is-featured-single .mobile-passport-city {
    font-size: 12.5px !important;
  }

  /* V52-6: Pagination + stage clearance above bottom nav; Share stays in header row. */
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-controls {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 4px 2px 0 !important;
    padding: 0 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .mobile-passport-stage {
    margin-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* V52-7: Fullscreen passport mirrors inline card styling. */
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-page::after {
    display: none !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-sticker-wrap {
    width: min(124px, 72%) !important;
    height: 120px !important;
    padding: 0 12px 0 0 !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-sticker {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-sticker img {
    width: auto !important;
    height: auto !important;
    max-width: min(110px, 100%) !important;
    max-height: 110px !important;
    min-width: 72px !important;
    min-height: 72px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 8px 14px rgba(72, 46, 10, .22)) !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-stamp {
    top: auto !important;
    bottom: calc(10px + var(--passport-stamp-y, 0px)) !important;
    right: calc(0px + var(--passport-stamp-x, 0px)) !important;
    transform-origin: 82% 88% !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-controls {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* FINAL FIX 20260706-passport-premium-v53: POLISH-017 stamp ownership.
   The stamp now belongs to the magnet button itself, not the paper page. This keeps both
   spread pages share-ready: each hero magnet gets one compact border-control stamp. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-sticker-wrap,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-sticker-wrap {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: min(132px, 92%) !important;
    height: 124px !important;
    margin: 0 auto !important;
    padding: 9px 9px 7px !important;
    overflow: visible !important;
    isolation: isolate !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-sticker,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-sticker {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    max-width: 112px !important;
    max-height: 106px !important;
    min-width: 72px !important;
    min-height: 72px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    transform: none !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-sticker img,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-sticker img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 112px !important;
    max-height: 106px !important;
    min-width: 70px !important;
    min-height: 70px !important;
    object-fit: contain !important;
    object-position: center center !important;
    filter: drop-shadow(0 9px 13px rgba(72, 46, 10, .24)) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-stamp {
    position: absolute !important;
    top: -8px !important;
    right: -9px !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 12 !important;
    pointer-events: none !important;
    color: rgba(139, 35, 53, .95) !important;
    opacity: .9 !important;
    mix-blend-mode: multiply !important;
    transform: rotate(var(--passport-stamp-rotate, -11deg)) !important;
    transform-origin: 50% 50% !important;
    filter: none !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-slot-1 .mobile-passport-stamp,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-slot-1 .mobile-passport-stamp {
    right: auto !important;
    left: -9px !important;
    top: -7px !important;
    transform: rotate(calc(var(--passport-stamp-rotate, 10deg) * -1)) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp--round,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-stamp--round {
    width: 48px !important;
    height: 48px !important;
    border-width: 2px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp--oval,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-stamp--oval {
    width: 52px !important;
    height: 34px !important;
    border-width: 2px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp--angled,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-stamp--angled {
    width: 48px !important;
    min-height: 31px !important;
    border-width: 2px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp strong,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-stamp strong {
    font-size: 7.5px !important;
    line-height: 1 !important;
    letter-spacing: .09em !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp small,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-stamp small {
    font-size: 5.8px !important;
    line-height: 1 !important;
    letter-spacing: .04em !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-city,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-city {
    margin-top: 2px !important;
    max-width: 94% !important;
    font-size: 11.5px !important;
    line-height: 1.12 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .mobile-passport-sticker-wrap,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .mobile-passport-sticker-wrap {
    width: min(148px, 76%) !important;
    height: 138px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .mobile-passport-sticker,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .mobile-passport-sticker {
    max-width: 126px !important;
    max-height: 120px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .mobile-passport-sticker img,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .mobile-passport-sticker img {
    max-width: 126px !important;
    max-height: 120px !important;
  }
}

/* FINAL FIX 20260706-passport-premium-v54: POLISH-018 official, readable passport stamps.
   Keep v53 DOM ownership, but place stamps fully inside each magnet corner with two clean variants. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-sticker,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-sticker {
    overflow: visible !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-stamp {
    top: 4px !important;
    right: 4px !important;
    bottom: auto !important;
    left: auto !important;
    transform: rotate(-10deg) !important;
    transform-origin: 50% 50% !important;
    color: rgba(150, 31, 50, .94) !important;
    opacity: .88 !important;
    mix-blend-mode: multiply !important;
    z-index: 20 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-slot-1 .mobile-passport-stamp,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-slot-1 .mobile-passport-stamp {
    top: 5px !important;
    right: auto !important;
    left: 5px !important;
    transform: rotate(8deg) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp--round,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-stamp--round {
    width: 42px !important;
    height: 42px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp--round .mobile-passport-stamp-ring,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-stamp--round .mobile-passport-stamp-ring {
    border-width: 1.8px !important;
    box-shadow: inset 0 0 0 1px rgba(150, 31, 50, .5) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp--round .mobile-passport-stamp-ring::after,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-stamp--round .mobile-passport-stamp-ring::after {
    inset: 4px !important;
    border-width: 1px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp--oval,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-stamp--oval {
    width: 46px !important;
    height: 30px !important;
    border-width: 1.8px !important;
    border-radius: 50% / 42% !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp-core,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-stamp-core {
    gap: 1px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp strong,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-stamp strong {
    display: block !important;
    font-size: 7px !important;
    font-weight: 950 !important;
    line-height: .95 !important;
    letter-spacing: .06em !important;
    white-space: nowrap !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp small,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-stamp small {
    display: block !important;
    font-size: 5.6px !important;
    font-weight: 900 !important;
    line-height: .95 !important;
    letter-spacing: .05em !important;
    white-space: nowrap !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp--oval .mobile-passport-stamp-core strong,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-stamp--oval .mobile-passport-stamp-core strong {
    font-size: 6px !important;
    letter-spacing: .04em !important;
  }
}

/* FINAL FIX 20260706-passport-premium-v55: POLISH-019 readable ink on dark magnets.
   Keep v54 placement, but make both stamps read as official border ink on light and dark artwork. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-stamp {
    color: rgba(156, 26, 45, .96) !important;
    opacity: .96 !important;
    mix-blend-mode: normal !important;
    background: rgba(255, 241, 216, .28) !important;
    box-shadow:
      0 0 0 1px rgba(255, 238, 205, .18),
      0 1px 2px rgba(52, 18, 22, .16) !important;
    text-shadow:
      0 0 1px rgba(255, 238, 205, .75),
      0 .5px 0 rgba(80, 12, 20, .18) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp--round,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-stamp--round,
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp--oval,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-stamp--oval {
    background: rgba(255, 241, 216, .3) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp--round .mobile-passport-stamp-ring,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-stamp--round .mobile-passport-stamp-ring,
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp--round .mobile-passport-stamp-ring::after,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-stamp--round .mobile-passport-stamp-ring::after {
    border-color: rgba(156, 26, 45, .86) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp--oval,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-stamp--oval {
    border-color: rgba(156, 26, 45, .86) !important;
  }
}

/* FINAL FIX 20260706-passport-premium-v56: POLISH-020 crisp SVG border stamps.
   Replace muddy CSS/text stamps with scalable official-looking ink marks on both magnets. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-stamp {
    position: absolute !important;
    top: 5px !important;
    right: 5px !important;
    bottom: auto !important;
    left: auto !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #a5162d !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
    overflow: visible !important;
    z-index: 30 !important;
    transform: rotate(-9deg) !important;
    filter:
      drop-shadow(0 0 .75px rgba(255, 232, 190, .95))
      drop-shadow(0 1px 1px rgba(38, 8, 14, .28)) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-slot-1 .mobile-passport-stamp,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-slot-1 .mobile-passport-stamp {
    top: 5px !important;
    right: auto !important;
    left: 5px !important;
    transform: rotate(8deg) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp--round,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-stamp--round {
    width: 50px !important;
    height: 50px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp--oval,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-stamp--oval {
    width: 56px !important;
    height: 36px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp-line,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-stamp-line {
    fill: rgba(255, 241, 212, .16) !important;
    stroke: currentColor !important;
    stroke-width: 3 !important;
    vector-effect: non-scaling-stroke !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp-line.is-inner,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-stamp-line.is-inner {
    fill: none !important;
    stroke-width: 2 !important;
    opacity: .9 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp-text,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-stamp-text {
    fill: currentColor !important;
    stroke: rgba(255, 232, 190, .62) !important;
    stroke-width: .75px !important;
    paint-order: stroke fill !important;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-weight: 950 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp-text.is-main,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-stamp-text.is-main {
    font-size: 11px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp-text.is-year,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-stamp-text.is-year {
    font-size: 9px !important;
    letter-spacing: .06em !important;
  }
}

/* FINAL FIX 20260706-passport-premium-v57: POLISH-021 real date inside stamp.
   Remove loose country/year meta from the page and make the stamp carry the official date. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp--round,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-stamp--round {
    width: 56px !important;
    height: 56px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp--oval,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-stamp--oval {
    width: 64px !important;
    height: 40px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp-text.is-main,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-stamp-text.is-main {
    font-size: 10px !important;
    letter-spacing: .07em !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp-text.is-date,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-stamp-text.is-date {
    fill: currentColor !important;
    stroke: rgba(255, 232, 190, .62) !important;
    stroke-width: .65px !important;
    paint-order: stroke fill !important;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 6.2px !important;
    font-weight: 950 !important;
    letter-spacing: .02em !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-meta,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-meta {
    display: none !important;
  }
}

/* FINAL FIX 20260706-passport-premium-v58: POLISH-022 corner passport stamps.
   Keep the clear SVG date stamps, but move them to the magnet corners so they only bite
   a small part of the artwork, like a real passport mark on a photo corner. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-sticker-wrap,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-sticker-wrap,
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-sticker,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-sticker {
    overflow: visible !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-stamp {
    top: -11px !important;
    right: -11px !important;
    bottom: auto !important;
    left: auto !important;
    transform: rotate(-8deg) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-slot-1 .mobile-passport-stamp,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-slot-1 .mobile-passport-stamp {
    top: -11px !important;
    right: auto !important;
    left: -11px !important;
    transform: rotate(8deg) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp--round,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-stamp--round {
    width: 50px !important;
    height: 50px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp--oval,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-stamp--oval {
    width: 58px !important;
    height: 36px !important;
  }
}

/* FINAL FIX 20260706-passport-premium-v59: POLISH-023 final stamp corner balance + live fullscreen pagination. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-stamp {
    top: -8px !important;
    right: -8px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-slot-1 .mobile-passport-stamp,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-slot-1 .mobile-passport-stamp {
    top: 1px !important;
    left: -8px !important;
    right: auto !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp--round,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-stamp--round {
    width: 46px !important;
    height: 46px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-stamp--oval,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-stamp--oval {
    width: 54px !important;
    height: 34px !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-controls,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-controls button {
    pointer-events: auto !important;
  }
}

/* FINAL FIX 20260707-vault-polish-v60: globe + Display Case header polish only.
   Do not touch Passport spread/stamps. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-globe {
    background:
      radial-gradient(circle at 34% 26%, rgba(255, 232, 156, .34), transparent 22%),
      radial-gradient(circle at 58% 58%, rgba(33, 109, 128, .9), rgba(10, 45, 62, .96) 56%, rgba(5, 18, 28, .98) 100%) !important;
    border: 1.5px solid rgba(245, 207, 115, .72) !important;
    box-shadow:
      inset -5px -6px 10px rgba(0, 0, 0, .42),
      inset 3px 3px 7px rgba(255, 232, 156, .18),
      0 0 0 1px rgba(255, 240, 188, .12),
      0 0 12px rgba(245, 196, 81, .18) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-globe::before {
    background:
      repeating-linear-gradient(0deg, rgba(255, 223, 142, 0) 0 5px, rgba(255, 223, 142, .18) 5px 6px),
      repeating-linear-gradient(90deg, rgba(255, 223, 142, 0) 0 7px, rgba(255, 223, 142, .14) 7px 8px) !important;
    mix-blend-mode: screen !important;
    opacity: .82 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-globe::after {
    inset: -2px !important;
    border: 1px dashed rgba(245, 207, 115, .44) !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: rotate(18deg) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard .passport-clean-collection-head,
  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-open):not(.vault-fullscreen-collection-open) #vaultRoom #collectionShareCard:not(.vault-fullscreen-card) .passport-clean-collection-head {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    align-items: start !important;
    margin: 0 0 12px !important;
    padding: 0 0 12px !important;
    border-bottom: 1px solid rgba(245, 196, 81, .18) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard .passport-clean-collection-head span,
  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-open):not(.vault-fullscreen-collection-open) #vaultRoom #collectionShareCard:not(.vault-fullscreen-card) .passport-clean-collection-head span {
    display: block !important;
    font-size: 11px !important;
    line-height: 1 !important;
    letter-spacing: .18em !important;
    white-space: nowrap !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard .passport-clean-collection-head strong,
  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-open):not(.vault-fullscreen-collection-open) #vaultRoom #collectionShareCard:not(.vault-fullscreen-card) .passport-clean-collection-head strong {
    display: block !important;
    max-width: 100% !important;
    font-size: clamp(28px, 8.8vw, 38px) !important;
    line-height: .94 !important;
    letter-spacing: 0 !important;
    overflow-wrap: normal !important;
    white-space: normal !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard .passport-clean-collection-head small,
  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-open):not(.vault-fullscreen-collection-open) #vaultRoom #collectionShareCard:not(.vault-fullscreen-card) .passport-clean-collection-head small {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 42px !important;
    padding: 10px 12px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
}

/* FINAL FIX 20260707-display-case-header-v61: compact normal Vault Display Case only.
   Keep Passport/stamps/fullscreen untouched. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-open):not(.vault-fullscreen-collection-open) .collection-display-stage {
    margin-top: 18px !important;
    padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-open):not(.vault-fullscreen-collection-open) #vaultRoom #collectionShareCard.collection-display-case:not(.vault-fullscreen-card) {
    padding: 18px 16px 20px !important;
    overflow: visible !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-open):not(.vault-fullscreen-collection-open) #vaultRoom #collectionShareCard.collection-display-case:not(.vault-fullscreen-card) .passport-clean-collection-head {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 5px !important;
    margin: 0 0 12px !important;
    padding: 0 0 12px !important;
    text-align: left !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-open):not(.vault-fullscreen-collection-open) #vaultRoom #collectionShareCard.collection-display-case:not(.vault-fullscreen-card) .passport-clean-collection-head span {
    font-size: 11px !important;
    line-height: 1 !important;
    letter-spacing: .18em !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-open):not(.vault-fullscreen-collection-open) #vaultRoom #collectionShareCard.collection-display-case:not(.vault-fullscreen-card) .passport-clean-collection-head strong {
    font-size: clamp(27px, 7vw, 31px) !important;
    line-height: 1.02 !important;
    letter-spacing: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-open):not(.vault-fullscreen-collection-open) #vaultRoom #collectionShareCard.collection-display-case:not(.vault-fullscreen-card) .passport-clean-collection-head small {
    width: auto !important;
    min-height: 0 !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    justify-self: start !important;
    text-align: left !important;
  }
}

/* FINAL FIX 20260707-mobile-globe-pins-v68: smaller mobile globe pins only.
   Do not redraw globes; only reduce the dots/glow when many collected places are visible. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.wall-page .wall-hero-globe .globe-pin,
  html.magnetfolio-mobile-app body.wall-page #heroGlobePins .globe-pin,
  html.magnetfolio-mobile-app body.vault-feature-page .globe-pin,
  html.magnetfolio-mobile-app #globeCities .globe-pin {
    width: 3px !important;
    height: 3px !important;
    background: rgba(255, 224, 137, .92) !important;
    box-shadow:
      0 0 0 1.25px rgba(245, 196, 81, .16),
      0 0 5px rgba(245, 196, 81, .58) !important;
    opacity: .86 !important;
    animation: mobilePinPulseSoft 3.4s ease-in-out infinite !important;
  }

  html.magnetfolio-mobile-app body.wall-page .wall-hero-globe .globe-pin:nth-child(2n),
  html.magnetfolio-mobile-app body.vault-feature-page .globe-pin:nth-child(2n),
  html.magnetfolio-mobile-app #globeCities .globe-pin:nth-child(2n) {
    opacity: .68 !important;
    box-shadow:
      0 0 0 1px rgba(245, 196, 81, .12),
      0 0 4px rgba(245, 196, 81, .42) !important;
  }

  html.magnetfolio-mobile-app body.wall-page .wall-hero-globe .globe-pins,
  html.magnetfolio-mobile-app body.vault-feature-page .globe-pins,
  html.magnetfolio-mobile-app #globeCities {
    overflow: hidden !important;
  }
}

@keyframes mobilePinPulseSoft {
  50% {
    transform: translate(-50%, -50%) scale(1.18);
    opacity: .74;
  }
}

/* FINAL FIX 20260707-vault-globe-nav-v69: only the tiny Vault globe + center M stability. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-globe {
    background:
      radial-gradient(circle at 34% 26%, rgba(255, 232, 156, .24), transparent 18%),
      radial-gradient(circle at 58% 58%, rgba(27, 91, 108, .9), rgba(8, 39, 54, .96) 58%, rgba(5, 15, 24, .98) 100%) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-globe::before {
    inset: 4px !important;
    background:
      repeating-linear-gradient(0deg, rgba(255, 223, 142, 0) 0 8px, rgba(255, 223, 142, .1) 8px 9px),
      repeating-linear-gradient(90deg, rgba(255, 223, 142, 0) 0 10px, rgba(255, 223, 142, .08) 10px 11px) !important;
    opacity: .56 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-globe::after {
    inset: -1px !important;
    border-color: rgba(245, 207, 115, .28) !important;
    opacity: .72 !important;
    transform: none !important;
  }

  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab,
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab:hover,
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab:focus,
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab:active,
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab.active,
  html.magnetfolio-mobile-app .app-bottom-nav.app-bottom-nav-compact.with-vault a.mark-tab,
  html.magnetfolio-mobile-app .app-bottom-nav.app-bottom-nav-compact.with-vault a.mark-tab:hover,
  html.magnetfolio-mobile-app .app-bottom-nav.app-bottom-nav-compact.with-vault a.mark-tab:focus,
  html.magnetfolio-mobile-app .app-bottom-nav.app-bottom-nav-compact.with-vault a.mark-tab:active,
  html.magnetfolio-mobile-app .app-bottom-nav.app-bottom-nav-compact.with-vault a.mark-tab.active {
    width: 100% !important;
    height: 50px !important;
    min-height: 50px !important;
    transform: none !important;
    scale: 1 !important;
  }

  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab > span,
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab:hover > span,
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab:focus > span,
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab:active > span,
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab.active > span,
  html.magnetfolio-mobile-app .app-bottom-nav.app-bottom-nav-compact.with-vault a.mark-tab > span,
  html.magnetfolio-mobile-app .app-bottom-nav.app-bottom-nav-compact.with-vault a.mark-tab:hover > span,
  html.magnetfolio-mobile-app .app-bottom-nav.app-bottom-nav-compact.with-vault a.mark-tab:focus > span,
  html.magnetfolio-mobile-app .app-bottom-nav.app-bottom-nav-compact.with-vault a.mark-tab:active > span,
  html.magnetfolio-mobile-app .app-bottom-nav.app-bottom-nav-compact.with-vault a.mark-tab.active > span {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    transform: none !important;
    scale: 1 !important;
  }

  html.magnetfolio-mobile-app .app-bottom-nav .nav-mark-emblem,
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab img.nav-mark-emblem,
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab:hover img.nav-mark-emblem,
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab:focus img.nav-mark-emblem,
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab:active img.nav-mark-emblem,
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab.active img.nav-mark-emblem {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    transform: none !important;
    scale: 1 !important;
    object-fit: contain !important;
  }
}

/* FINAL FIX 20260707-vault-globe-nav-v70: authoritative reset of globe ::before blend-mode (v60 screen
   mode made v69's faint gradients invisible) + hard-locked M button sizing in all states/pages.
   Mobile-only. Do NOT touch Passport, Rewards, Scratch, Wall globe, Firebase/Auth/Payments. */
@media (max-width: 760px) {
  /* Globe: reset mix-blend-mode left by v60 so grid lines are actually visible; clean size/overflow. */
  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-globe {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    background:
      radial-gradient(circle at 34% 26%, rgba(255, 232, 156, .28), transparent 20%),
      radial-gradient(circle at 58% 58%, rgba(27, 91, 108, .92), rgba(8, 39, 54, .97) 58%, rgba(5, 15, 24, .99) 100%) !important;
    border: 1.5px solid rgba(245, 207, 115, .65) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255, 240, 188, .1),
      0 0 10px rgba(245, 196, 81, .16) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-globe::before {
    content: "" !important;
    position: absolute !important;
    inset: 2px !important;
    border-radius: 50% !important;
    background:
      repeating-linear-gradient(0deg, rgba(255, 223, 142, 0) 0 5px, rgba(255, 223, 142, .22) 5px 6px),
      repeating-linear-gradient(90deg, rgba(255, 223, 142, 0) 0 7px, rgba(255, 223, 142, .18) 7px 8px) !important;
    mix-blend-mode: normal !important;
    opacity: .82 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-globe::after {
    content: "" !important;
    position: absolute !important;
    inset: -2px !important;
    border-radius: 50% !important;
    border: 1px dashed rgba(245, 207, 115, .38) !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: .8 !important;
    transform: none !important;
  }

  /* M button: hard-lock size + white circle in every state on every page. */
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab,
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab:hover,
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab:focus,
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab:active,
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab.active,
  html.magnetfolio-mobile-app .app-bottom-nav.app-bottom-nav-compact.with-vault a.mark-tab,
  html.magnetfolio-mobile-app .app-bottom-nav.app-bottom-nav-compact.with-vault a.mark-tab:hover,
  html.magnetfolio-mobile-app .app-bottom-nav.app-bottom-nav-compact.with-vault a.mark-tab:focus,
  html.magnetfolio-mobile-app .app-bottom-nav.app-bottom-nav-compact.with-vault a.mark-tab:active,
  html.magnetfolio-mobile-app .app-bottom-nav.app-bottom-nav-compact.with-vault a.mark-tab.active {
    width: 100% !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    padding: 0 !important;
    transform: none !important;
    scale: 1 !important;
    flex-shrink: 0 !important;
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
  }

  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab > span,
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab:hover > span,
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab:focus > span,
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab:active > span,
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab.active > span,
  html.magnetfolio-mobile-app .app-bottom-nav.app-bottom-nav-compact.with-vault a.mark-tab > span,
  html.magnetfolio-mobile-app .app-bottom-nav.app-bottom-nav-compact.with-vault a.mark-tab:hover > span,
  html.magnetfolio-mobile-app .app-bottom-nav.app-bottom-nav-compact.with-vault a.mark-tab:focus > span,
  html.magnetfolio-mobile-app .app-bottom-nav.app-bottom-nav-compact.with-vault a.mark-tab:active > span,
  html.magnetfolio-mobile-app .app-bottom-nav.app-bottom-nav-compact.with-vault a.mark-tab.active > span {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .32) !important;
    transform: none !important;
    scale: 1 !important;
    flex-shrink: 0 !important;
  }

  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab img.nav-mark-emblem,
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab:hover img.nav-mark-emblem,
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab:focus img.nav-mark-emblem,
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab:active img.nav-mark-emblem,
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab.active img.nav-mark-emblem,
  html.magnetfolio-mobile-app .app-bottom-nav.app-bottom-nav-compact.with-vault a.mark-tab img.nav-mark-emblem,
  html.magnetfolio-mobile-app .app-bottom-nav.app-bottom-nav-compact.with-vault a.mark-tab:hover img.nav-mark-emblem,
  html.magnetfolio-mobile-app .app-bottom-nav.app-bottom-nav-compact.with-vault a.mark-tab:focus img.nav-mark-emblem,
  html.magnetfolio-mobile-app .app-bottom-nav.app-bottom-nav-compact.with-vault a.mark-tab:active img.nav-mark-emblem,
  html.magnetfolio-mobile-app .app-bottom-nav.app-bottom-nav-compact.with-vault a.mark-tab.active img.nav-mark-emblem {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    transform: none !important;
    scale: 1 !important;
    object-fit: contain !important;
  }
}

/* FINAL FIX 20260707-vault-globe-nav-v71: premium dark globe — deep navy ocean, subtle land blobs,
   gold accent ring. Replaces basketball blue. Mobile Vault only. v70 M-button lock untouched. */
@media (max-width: 760px) {
  /* Deep navy ocean — NOT bright blue. Warm specular at top-left. Gold border for premium feel. */
  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-globe {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    border: 1.5px solid rgba(245, 207, 115, .72) !important;
    background:
      radial-gradient(circle at 28% 22%, rgba(255, 228, 168, .30), transparent 15%),
      radial-gradient(circle at 66% 76%, rgba(0, 5, 14, .72), transparent 34%),
      radial-gradient(circle at 47% 48%, #0a1e34 0 32%, #051020 60%, #020c1a 100%) !important;
    box-shadow:
      inset -5px -6px 10px rgba(0, 0, 0, .64),
      inset 2px 2px 5px rgba(80, 150, 210, .14),
      0 0 0 1px rgba(255, 232, 167, .11),
      0 0 10px rgba(245, 196, 81, .15) !important;
  }

  /* Continent blobs: muted greens + warm ochre hint. No black grid lines. */
  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-globe::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 50% !important;
    background:
      radial-gradient(ellipse at 33% 35%, rgba(68, 116, 64, .78) 0 10%, transparent 12%),
      radial-gradient(ellipse at 55% 38%, rgba(56, 104, 58, .68) 0 8%, transparent 10%),
      radial-gradient(ellipse at 46% 64%, rgba(64, 112, 60, .72) 0 11%, transparent 13%),
      radial-gradient(ellipse at 69% 57%, rgba(174, 148, 58, .44) 0 6%, transparent 8%),
      linear-gradient(118deg, rgba(255, 255, 255, .12), transparent 24%, transparent 74%, rgba(0, 0, 0, .16)) !important;
    mix-blend-mode: normal !important;
    opacity: .90 !important;
  }

  /* Glossy top-left specular + edge shadow; no basketball lines. */
  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-globe::after {
    content: "" !important;
    position: absolute !important;
    inset: 1px !important;
    border-radius: 50% !important;
    border: 0 !important;
    background:
      radial-gradient(circle at 30% 24%, rgba(255, 252, 230, .20), transparent 15%),
      linear-gradient(124deg, rgba(255, 255, 255, .09), transparent 30%, transparent 68%, rgba(0, 0, 0, .28)) !important;
    box-shadow: inset -3px -3px 6px rgba(0, 0, 0, .26) !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-globe::after {
    transform: none !important;
  }
}

/* FINAL FIX 20260707-vault-countries-medallion-v72: stop forcing a tiny globe.
   At 30px it reads cheap; use a clean premium countries status badge instead. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-globe-btn {
    width: 74px !important;
    min-width: 74px !important;
    height: 74px !important;
    min-height: 74px !important;
    display: grid !important;
    grid-template-rows: 1fr auto !important;
    align-items: center !important;
    justify-items: center !important;
    gap: 1px !important;
    padding: 7px 5px 6px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(245, 207, 115, .48) !important;
    background:
      radial-gradient(circle at 50% 18%, rgba(245, 207, 115, .18), transparent 34%),
      linear-gradient(180deg, rgba(19, 23, 34, .98), rgba(7, 9, 15, .98)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 237, 185, .12),
      inset 0 -1px 0 rgba(0, 0, 0, .45),
      0 10px 24px rgba(0, 0, 0, .18) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-globe {
    display: none !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-globe-btn strong {
    align-self: end !important;
    font-size: 16px !important;
    line-height: .95 !important;
    font-weight: 950 !important;
    letter-spacing: -.01em !important;
    color: #f8d978 !important;
    text-shadow: 0 1px 10px rgba(245, 196, 81, .22) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-globe-btn small {
    align-self: start !important;
    font-size: 7px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: .11em !important;
    color: rgba(255, 246, 218, .58) !important;
  }
}

/* FINAL FIX 20260707-vault-map-medallion-v73: premium folded-map icon for Countries.
   Replaces the removed mini globe with a crisp travel/status symbol that reads at 30px. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-globe-btn {
    width: 76px !important;
    min-width: 76px !important;
    height: 76px !important;
    min-height: 76px !important;
    grid-template-rows: 24px auto auto !important;
    gap: 2px !important;
    padding: 8px 5px 6px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(245, 207, 115, .52) !important;
    background:
      radial-gradient(circle at 50% 12%, rgba(245, 207, 115, .22), transparent 34%),
      linear-gradient(180deg, rgba(20, 23, 32, .98), rgba(7, 8, 13, .98)) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-globe {
    position: relative !important;
    display: block !important;
    width: 32px !important;
    height: 22px !important;
    border-radius: 5px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 226, 142, .7) !important;
    background:
      linear-gradient(90deg,
        rgba(245, 207, 115, .2) 0 31%,
        rgba(255, 242, 190, .08) 31% 34%,
        rgba(16, 21, 31, .96) 34% 66%,
        rgba(255, 242, 190, .08) 66% 69%,
        rgba(78, 62, 32, .42) 69% 100%),
      linear-gradient(135deg, rgba(255, 236, 168, .32), rgba(10, 12, 18, .98)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 246, 218, .18),
      inset 0 -1px 0 rgba(0, 0, 0, .46),
      0 0 8px rgba(245, 196, 81, .12) !important;
    transform: rotate(-2deg) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-globe::before {
    content: "" !important;
    position: absolute !important;
    left: 5px !important;
    top: 6px !important;
    width: 22px !important;
    height: 8px !important;
    border: 1.5px solid rgba(248, 216, 126, .72) !important;
    border-left: 0 !important;
    border-bottom: 0 !important;
    border-radius: 0 8px 0 0 !important;
    background: transparent !important;
    opacity: .92 !important;
    transform: rotate(-7deg) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-globe::after {
    content: "" !important;
    position: absolute !important;
    right: 6px !important;
    top: 5px !important;
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% 50% 50% 0 !important;
    border: 1px solid rgba(8, 9, 13, .72) !important;
    background: #f8d978 !important;
    box-shadow: 0 0 5px rgba(245, 196, 81, .42) !important;
    opacity: .95 !important;
    transform: rotate(-45deg) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-globe-btn strong {
    font-size: 15px !important;
    line-height: .95 !important;
  }
}

/* FINAL FIX 20260707-vault-globe-png-v74: replace all CSS-drawn globe with PNG icon.
   Scoped to vault mobile globe only. Do NOT touch Passport, Rewards, Scratch, Wall globe, Firebase/Auth/Payments. */
@media (max-width: 760px) {
  /* Kill every CSS-drawn globe effect from all previous FINAL FIX blocks */
  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-globe {
    display: none !important;
    background: none !important;
    box-shadow: none !important;
    border: none !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-globe::before,
  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-globe::after {
    display: none !important;
    content: none !important;
    background: none !important;
  }

  /* PNG icon replaces the old CSS globe */
  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-globe-img {
    width: 40px !important;
    height: 40px !important;
    object-fit: contain !important;
    display: block !important;
    border: none !important;
    background: none !important;
    flex-shrink: 0 !important;
  }
}

/* FINAL FIX 20260707-vault-globe-png-v75: black backing under PNG icon so any
   residual edge transparency reads as premium dark, never white. Vault mobile only. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page .vault-mobile-globe-img {
    width: 42px !important;
    height: 42px !important;
    padding: 1px !important;
    border-radius: 50% !important;
    background:
      radial-gradient(circle at 38% 28%, rgba(245, 207, 115, .14), transparent 30%),
      #05070d !important;
    box-shadow:
      0 0 0 1px rgba(245, 207, 115, .18),
      0 0 10px rgba(0, 0, 0, .28) !important;
  }
}

/* FINAL FIX 20260708-world-map-final-v78: mobile World Map premium atlas pass.
   Root causes confirmed from device screenshot (v77):
   (1) .section-title consumed ~100px: h2 at 25px wrapped to 2 lines + subtitle p (13px × 2
       lines) + margins, leaving ~380px dead black below the card before the bottom nav;
   (2) #worldMap clamped to clamp(232px, 58vw, 292px) — on a 390px phone ≈ 232px — far less
       than the ~700px available after chrome; (3) progress badge rendered as a top-left
       floating pill sitting above/at the map edge rather than as an integrated atlas overlay;
   (4) .feature-map-panel did not fill available viewport height.
   Fix: card becomes flex column + min-height fills viewport; map stage flex-grows into card;
   section title compacted (h2 → 17px, p description hidden); badge moves to bottom-left.
   world-map page only (.map-panel.feature-map-panel selector is unique to world-map.html).
   Additive — all previous FINAL FIX blocks above are kept intact. */
@media (max-width: 760px) {
  /* ── Card fills the viewport height ────────────────────────────────
     Chrome budget: app-header min-height(58px) + header-padding(14px) + header-margin(8px)
     + feature-shell padding-top(8px) + feature-shell padding-bottom(86px) = 174px. */
  html.magnetfolio-mobile-app body.feature-page .map-panel.feature-map-panel {
    min-height: calc(100dvh - 174px) !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 12px !important;
  }

  /* ── Title block: compact — kicker + h2 only ──────────────────── */
  html.magnetfolio-mobile-app body.feature-page .map-panel .section-title {
    flex: 0 0 auto !important;
    margin-bottom: 8px !important;
  }

  html.magnetfolio-mobile-app body.feature-page .map-panel .section-title h2 {
    font-size: 17px !important;
    line-height: 1.1 !important;
    margin: 2px 0 0 !important;
    max-width: none !important;
  }

  /* Subtitle description hidden: saves ~44px — functionality and glow hint remain on map */
  html.magnetfolio-mobile-app body.feature-page .map-panel .section-title p {
    display: none !important;
  }

  /* ── Map stage: flex column, fills remaining card height ───────── */
  html.magnetfolio-mobile-app body.feature-page .map-stage {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    gap: 0 !important;
  }

  /* ── Map: abandon clamp height, grow to fill the stage ─────────── */
  html.magnetfolio-mobile-app body.feature-page #worldMap.visual-world-map {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 220px !important;
    max-height: none !important;
  }

  /* ── Counter badge: bottom-left atlas overlay, not floating top pill */
  html.magnetfolio-mobile-app body.feature-page #worldMap .mobile-world-map-progress-badge {
    top: auto !important;
    bottom: 10px !important;
    left: 10px !important;
    padding: 6px 10px !important;
  }

  /* Keep city pins readable globally on mobile. SVG user-unit radii render sub-pixel
     on phone viewports, so CSS geometry pins them to real screen pixels. */
  html.magnetfolio-mobile-app body.feature-page #worldMap .geo-city-pin {
    r: 2px !important;
    fill: rgba(227, 231, 216, .82) !important;
    stroke: rgba(2, 8, 15, .88) !important;
    stroke-width: .7px !important;
    filter: drop-shadow(0 0 2px rgba(255, 244, 190, .28)) !important;
    opacity: .9 !important;
  }

  html.magnetfolio-mobile-app body.feature-page #worldMap .geo-city-pin.collected {
    r: 4.5px !important;
    fill: #fff1a4 !important;
    stroke: #2b2108 !important;
    stroke-width: .9px !important;
    filter: drop-shadow(0 0 5px rgba(245, 196, 81, .82)) drop-shadow(0 0 10px rgba(245, 196, 81, .25)) !important;
    opacity: 1 !important;
  }
}

/* FINAL FIX 20260708-world-map-premium-v79: fix map centering, pins, title period.
   Root causes from v78 device screenshot:
   (1) MAP TOO LOW: v78's flex:1 1 auto on #worldMap made the div portrait-tall (~576px) while
       the SVG viewBox is 2:1 landscape; preserveAspectRatio="xMidYMid meet" letterboxed the map
       with ~205px dead space above and below continents.
   (2) HORIZONTAL BAND: ocean rect fill (#061523) differed visibly from the worldMap background
       gradient (#071827→#030912) at the SVG content boundary, revealing the letterbox edge.
   (3) CITY PINS: sizes too large (4.5px/2px); reduce to 3.5px/1.8px per spec.
   (4) TITLE: removed trailing period in world-map.html and app.js viewBox cropped to "0 30 1000
       440" (crops Arctic/Antarctic dead ocean, aspect ~2.27:1).
   Fix: worldMap gets aspect-ratio:1000/440 matching the new viewBox → zero letterboxing, no
   dead-space bands. Card min-height removed so card shrinks to map content. Ocean background on
   worldMap matches SVG ocean color for a seamless fill. City pins refined.
   worldMap page only (.map-panel.feature-map-panel + #worldMap selectors are unique to
   world-map.html). Additive — all FINAL FIX blocks above kept intact. */
@media (max-width: 760px) {
  /* ── Card: let content determine height, no forced tall viewport fill ─── */
  html.magnetfolio-mobile-app body.feature-page .map-panel.feature-map-panel {
    min-height: 0 !important;
    height: auto !important;
  }

  /* ── Map stage: reset to auto (no flex-grow) ────────────────────────── */
  html.magnetfolio-mobile-app body.feature-page .map-stage {
    flex: 0 0 auto !important;
  }

  /* ── Map: aspect-ratio matches new viewBox (1000/440) — zero letterbox ─
     The worldMap div width-fills the card; height is derived from the ratio.
     Background matches SVG ocean color so any residual edge is invisible. */
  html.magnetfolio-mobile-app body.feature-page #worldMap.visual-world-map {
    flex: none !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1000 / 440 !important;
    min-height: 0 !important;
    max-height: none !important;
    background:
      radial-gradient(ellipse at 52% 46%, rgba(22, 90, 120, .22), transparent 52%),
      #061523 !important;
  }

  /* ── Counter badge: bottom-left atlas overlay ───────────────────────── */
  html.magnetfolio-mobile-app body.feature-page #worldMap .mobile-world-map-progress-badge {
    bottom: 8px !important;
    left: 8px !important;
  }

  /* ── City pins: ALL cities shown; uncollected muted ivory, no glow ───── */
  html.magnetfolio-mobile-app body.feature-page #worldMap .geo-city-pin {
    r: 1.8px !important;
    fill: rgba(210, 218, 205, .60) !important;
    stroke: none !important;
    filter: none !important;
    opacity: .85 !important;
  }

  /* ── Collected city: warm gold dot with subtle glow ring ──────────────── */
  html.magnetfolio-mobile-app body.feature-page #worldMap .geo-city-pin.collected {
    r: 3.5px !important;
    fill: #ffd54f !important;
    stroke: rgba(255, 243, 170, .72) !important;
    stroke-width: 1.4px !important;
    filter: drop-shadow(0 0 3px rgba(245, 196, 81, .78)) !important;
    opacity: 1 !important;
  }
}

/* FINAL FIX 20260708-world-map-explorer-v80: make World Map usable, not just decorative.
   v79 fixed the SVG crop but left the page with a large dead black area below the card, and
   finding a specific country/city still required manually hunting tiny pins. v80 keeps the
   atlas map/pins/counter intact, fills the mobile viewport with a deliberate card, and adds a
   compact finder wired to the existing selectCountry() panel. Mobile World Map only. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.feature-page .map-panel.feature-map-panel {
    min-height: calc(100dvh - 174px) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 12px !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app body.feature-page .map-panel .section-title {
    margin: 0 0 2px !important;
    flex: 0 0 auto !important;
  }

  html.magnetfolio-mobile-app body.feature-page .map-panel .section-title h2 {
    font-size: 22px !important;
    line-height: 1.06 !important;
    margin: 2px 0 0 !important;
  }

  html.magnetfolio-mobile-app body.feature-page .map-stage {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important;
  }

  html.magnetfolio-mobile-app body.feature-page .mobile-world-map-finder {
    flex: 0 0 auto !important;
    display: grid !important;
    gap: 7px !important;
  }

  html.magnetfolio-mobile-app body.feature-page .mobile-world-map-search {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    min-height: 42px !important;
    padding: 6px 11px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(245, 196, 81, .28) !important;
    background: linear-gradient(180deg, rgba(255, 238, 174, .09), rgba(3, 8, 17, .62)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 26px rgba(0,0,0,.22) !important;
  }

  html.magnetfolio-mobile-app body.feature-page .mobile-world-map-search span {
    flex: 0 0 auto !important;
    color: #f7d66f !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
  }

  html.magnetfolio-mobile-app body.feature-page .mobile-world-map-search input {
    width: 100% !important;
    min-width: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: #fff7dc !important;
    font: 800 15px/1.2 inherit !important;
    letter-spacing: 0 !important;
  }

  html.magnetfolio-mobile-app body.feature-page .mobile-world-map-search input::placeholder {
    color: rgba(238, 232, 218, .54) !important;
  }

  html.magnetfolio-mobile-app body.feature-page .mobile-world-map-search-zoom {
    flex: 0 0 auto !important;
    min-width: 62px !important;
    height: 30px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 225, 119, .42) !important;
    background: rgba(5, 9, 18, .72) !important;
    color: #ffe177 !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
  }

  html.magnetfolio-mobile-app body.feature-page .mobile-world-map-suggestions {
    display: flex !important;
    gap: 7px !important;
    min-height: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 0 !important;
    scrollbar-width: none !important;
  }

  html.magnetfolio-mobile-app body.feature-page .mobile-world-map-suggestions:empty {
    display: none !important;
  }

  html.magnetfolio-mobile-app body.feature-page .mobile-world-map-suggestions::-webkit-scrollbar {
    display: none !important;
  }

  html.magnetfolio-mobile-app body.feature-page .mobile-world-map-suggestion {
    flex: 0 0 auto !important;
    min-width: 106px !important;
    max-width: 148px !important;
    height: 34px !important;
    padding: 4px 10px !important;
    border: 1px solid rgba(245, 196, 81, .22) !important;
    border-radius: 999px !important;
    background: rgba(255, 238, 174, .07) !important;
    color: #fff6df !important;
    text-align: left !important;
    box-shadow: none !important;
  }

  html.magnetfolio-mobile-app body.feature-page .mobile-world-map-suggestion strong,
  html.magnetfolio-mobile-app body.feature-page .mobile-world-map-suggestion span {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html.magnetfolio-mobile-app body.feature-page .mobile-world-map-suggestion strong {
    font-size: 12px !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
  }

  html.magnetfolio-mobile-app body.feature-page .mobile-world-map-suggestion span {
    margin-top: 1px !important;
    color: rgba(238, 232, 218, .62) !important;
    font-size: 9px !important;
    line-height: 1 !important;
    letter-spacing: .05em !important;
    text-transform: uppercase !important;
  }

  html.magnetfolio-mobile-app body.feature-page #worldMap.visual-world-map {
    flex: 0 0 auto !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1000 / 440 !important;
    border-radius: 20px !important;
  }

  html.magnetfolio-mobile-app body.feature-page .map-stage::after {
    content: "" !important;
    flex: 1 1 auto !important;
    min-height: 38px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(245, 196, 81, .10) !important;
    background:
      radial-gradient(circle at 22% 30%, rgba(245, 196, 81, .12), transparent 28%),
      radial-gradient(circle at 72% 62%, rgba(75, 160, 190, .10), transparent 32%),
      linear-gradient(180deg, rgba(255,255,255,.025), rgba(0,0,0,.12)) !important;
    opacity: .78 !important;
  }

  html.magnetfolio-mobile-app body.feature-page .country-panel.show ~ .map-stage::after,
  html.magnetfolio-mobile-app body.feature-page .map-stage:has(.country-panel.show)::after {
    display: none !important;
  }
}

/* FINAL FIX 20260708-world-map-explorer-v81: remove the empty lower placeholder from v80.
   Search stays. The atlas itself becomes the usable object: taller, slightly zoomed, and
   horizontally pannable on narrow phones instead of leaving a large decorative blank panel. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.feature-page .map-panel.feature-map-panel {
    min-height: 0 !important;
    height: auto !important;
  }

  html.magnetfolio-mobile-app body.feature-page .map-stage {
    flex: 0 0 auto !important;
  }

  html.magnetfolio-mobile-app body.feature-page .map-stage::after {
    display: none !important;
  }

  html.magnetfolio-mobile-app body.feature-page #worldMap.visual-world-map {
    aspect-ratio: auto !important;
    height: clamp(350px, 48dvh, 430px) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    touch-action: pan-x !important;
    scrollbar-width: none !important;
  }

  html.magnetfolio-mobile-app body.feature-page #worldMap.visual-world-map::-webkit-scrollbar {
    display: none !important;
  }

  html.magnetfolio-mobile-app body.feature-page #worldMap .geo-world-svg {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 118% !important;
    min-width: 118% !important;
    height: 100% !important;
    max-width: none !important;
  }

  html.magnetfolio-mobile-app body.feature-page #worldMap .mobile-world-map-progress-badge {
    position: sticky !important;
    left: 8px !important;
  }
}

/* FINAL FIX 20260708-world-map-zoom-v83: explicit fit/zoom explorer control.
   v82 could pan horizontally, but users had no obvious way to enter a stronger country-search
   view. This adds a compact overlay control and a zoomed SVG width state; search selections
   enter zoom automatically. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.feature-page #worldMap.visual-world-map {
    position: relative !important;
  }

  html.magnetfolio-mobile-app body.feature-page #worldMap .mobile-world-map-zoom-toggle {
    position: sticky !important;
    top: 10px !important;
    left: calc(100% - 76px) !important;
    z-index: 6 !important;
    float: right !important;
    width: 64px !important;
    height: 32px !important;
    margin: 10px 10px -42px 0 !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 225, 119, .42) !important;
    background: rgba(5, 9, 18, .78) !important;
    color: #ffe177 !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.08) !important;
  }

  html.magnetfolio-mobile-app body.feature-page #worldMap.is-map-zoomed .geo-world-svg {
    width: 168% !important;
    min-width: 168% !important;
  }

  html.magnetfolio-mobile-app body.feature-page #worldMap.is-map-zoomed .geo-city-pin {
    r: 1.45px !important;
  }

  html.magnetfolio-mobile-app body.feature-page #worldMap.is-map-zoomed .geo-city-pin.collected {
    r: 2.8px !important;
  }
}

/* FINAL FIX 20260708-world-map-zoom-v84: make the zoom control visible and keep Fit uncut.
   v83 appended the control but sticky/float inside the horizontal map scroller did not render
   reliably above the SVG. v84 uses absolute overlay positioning and resets Fit width to 100%;
   only the explicit zoom state widens the SVG for panning. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.feature-page #worldMap.visual-world-map {
    position: relative !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  html.magnetfolio-mobile-app body.feature-page #worldMap .geo-world-svg {
    width: 100% !important;
    min-width: 100% !important;
    height: 100% !important;
  }

  html.magnetfolio-mobile-app body.feature-page #worldMap .mobile-world-map-zoom-toggle {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    z-index: 40 !important;
    float: none !important;
    width: auto !important;
    min-width: 74px !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 0 13px !important;
    display: grid !important;
    place-items: center !important;
    pointer-events: auto !important;
  }

  html.magnetfolio-mobile-app body.feature-page #worldMap.is-map-zoomed .geo-world-svg {
    width: 168% !important;
    min-width: 168% !important;
  }
}

/* FINAL FIX 20260708-world-map-explorer-v85: tap map opens a fullscreen explorer.
   This replaces the small zoom-button idea with a natural mobile interaction: tap the map,
   view it fullscreen, drag horizontally, close with X. Search remains clean and separate. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.world-map-explorer-open {
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app body.feature-page #worldMap .mobile-world-map-search-zoom,
  html.magnetfolio-mobile-app body.feature-page #worldMap .mobile-world-map-zoom-toggle {
    display: none !important;
  }

  html.magnetfolio-mobile-app body.feature-page #worldMap .mobile-world-map-explore-hint {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 8 !important;
    padding: 7px 10px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 225, 119, .34) !important;
    background: rgba(5, 9, 18, .72) !important;
    color: #ffe177 !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.28) !important;
    pointer-events: none !important;
  }

  html.magnetfolio-mobile-app body.feature-page #worldMap .mobile-world-map-explorer-close {
    display: none !important;
  }

  html.magnetfolio-mobile-app body.feature-page #worldMap.is-world-map-explorer {
    position: fixed !important;
    inset: calc(10px + env(safe-area-inset-top, 0px)) 10px calc(10px + env(safe-area-inset-bottom, 0px)) 10px !important;
    z-index: 30000 !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    border-radius: 24px !important;
    border: 1px solid rgba(255, 225, 119, .34) !important;
    background:
      radial-gradient(ellipse at 52% 44%, rgba(22, 90, 120, .18), transparent 52%),
      #061523 !important;
    box-shadow: 0 24px 80px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.08) !important;
    overflow: auto hidden !important;
    touch-action: pan-x !important;
  }

  html.magnetfolio-mobile-app body.feature-page #worldMap.is-world-map-explorer .geo-world-svg {
    width: 230% !important;
    min-width: 230% !important;
    height: 100% !important;
    max-width: none !important;
  }

  html.magnetfolio-mobile-app body.feature-page #worldMap.is-world-map-explorer .mobile-world-map-explore-hint {
    left: 16px !important;
    right: auto !important;
    top: 16px !important;
    pointer-events: none !important;
    content: none !important;
  }

  html.magnetfolio-mobile-app body.feature-page #worldMap.is-world-map-explorer .mobile-world-map-explore-hint {
    color: rgba(255, 246, 216, .82) !important;
    font-size: 0 !important;
  }

  html.magnetfolio-mobile-app body.feature-page #worldMap.is-world-map-explorer .mobile-world-map-explore-hint::before {
    content: "Drag map" !important;
    font-size: 10px !important;
  }

  html.magnetfolio-mobile-app body.feature-page #worldMap.is-world-map-explorer .mobile-world-map-explorer-close {
    display: grid !important;
    place-items: center !important;
    position: fixed !important;
    top: calc(18px + env(safe-area-inset-top, 0px)) !important;
    right: 18px !important;
    z-index: 30010 !important;
    width: 46px !important;
    height: 46px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 225, 119, .42) !important;
    background: rgba(5, 9, 18, .86) !important;
    color: #fff6df !important;
    font-size: 30px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.45) !important;
  }

  html.magnetfolio-mobile-app body.feature-page #worldMap.is-world-map-explorer .mobile-world-map-progress-badge {
    position: fixed !important;
    left: 22px !important;
    bottom: calc(22px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 30005 !important;
  }
}

/* FINAL FIX 20260708-passport-single-spread-v87: one stamp still opens like a real passport. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .mobile-passport-spread.single-stamp-spread,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .mobile-passport-spread.single-stamp-spread {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    min-height: 232px !important;
    padding: 0 !important;
    align-items: stretch !important;
    justify-items: stretch !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .mobile-passport-spread.single-stamp-spread::before,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .mobile-passport-spread.single-stamp-spread::before {
    display: block !important;
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 50% !important;
    width: 10px !important;
    transform: translateX(-50%) !important;
    z-index: 5 !important;
    pointer-events: none !important;
    background: linear-gradient(90deg, rgba(75, 48, 15, .26), rgba(255, 246, 202, .52) 45%, rgba(84, 54, 18, .22)) !important;
    box-shadow: -5px 0 12px rgba(77, 47, 11, .12), 5px 0 12px rgba(255, 245, 199, .18) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page {
    width: 100% !important;
    max-width: none !important;
    min-height: 232px !important;
    height: auto !important;
    border-radius: 0 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-empty,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-empty {
    display: block !important;
    overflow: hidden !important;
    color: transparent !important;
    background: radial-gradient(circle at 24% 18%, rgba(255, 247, 207, .88), transparent 34%), linear-gradient(135deg, #f6e5b9 0%, #e3c991 48%, #c9a260 100%) !important;
    box-shadow: inset -10px 0 18px rgba(70, 44, 12, .14), inset 0 0 0 1px rgba(117, 82, 31, .15) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-empty span,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-empty span {
    display: none !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-empty::before,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-empty::before {
    content: "" !important;
    position: absolute !important;
    inset: 18px 14px !important;
    border: 1px solid rgba(94, 65, 25, .16) !important;
    border-radius: 14px !important;
    background: linear-gradient(rgba(91, 61, 23, .09) 1px, transparent 1px) 0 28px / 100% 30px, radial-gradient(circle at 50% 52%, rgba(97, 67, 25, .08), transparent 34%) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-featured-single,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-featured-single {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    align-content: center !important;
    justify-items: center !important;
    padding: 14px 8px 12px !important;
    gap: 8px !important;
    background: radial-gradient(circle at 80% 18%, rgba(255, 246, 203, .64), transparent 32%), linear-gradient(135deg, #f3dfac 0%, #dfc383 48%, #bd8f45 100%) !important;
    box-shadow: inset 10px 0 18px rgba(72, 45, 12, .14), inset 0 0 0 1px rgba(105, 72, 25, .15) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-sticker,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-sticker {
    width: min(126px, 90%) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 5px !important;
    align-self: end !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-sticker img,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-sticker img {
    width: min(116px, 100%) !important;
    height: 104px !important;
    object-fit: contain !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-stamp,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-stamp {
    top: calc(12px + var(--passport-stamp-y, 0px)) !important;
    right: calc(-8px + var(--passport-stamp-x, 0px)) !important;
    transform: rotate(var(--passport-stamp-rotate, -8deg)) !important;
    opacity: .92 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-city,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-city {
    width: 100% !important;
    max-width: 96% !important;
    margin: 0 !important;
    color: #1c1409 !important;
    font-size: 11px !important;
    line-height: 1.05 !important;
    letter-spacing: .01em !important;
    text-align: center !important;
  }
}

/* FINAL FIX 20260708-passport-single-polish-v88: clean fullscreen header and larger stamped magnet. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    justify-items: start !important;
    row-gap: 3px !important;
    column-gap: 12px !important;
    padding: 18px 26px 10px !important;
    text-align: left !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-head > span {
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    line-height: 1 !important;
    font-size: 11px !important;
    letter-spacing: .16em !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-head > strong {
    grid-column: 1 !important;
    grid-row: 2 !important;
    margin: 0 !important;
    max-width: 100% !important;
    font-size: clamp(26px, 8vw, 36px) !important;
    line-height: .95 !important;
    text-align: left !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-head .mobile-passport-share {
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
    align-self: center !important;
    justify-self: end !important;
    position: static !important;
    margin: 0 !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-head > small {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    margin: 3px 0 0 !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
    text-align: left !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-sticker,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-sticker {
    width: min(152px, 94%) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-sticker img,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-sticker img {
    width: min(142px, 100%) !important;
    height: 128px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-stamp,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-stamp {
    top: calc(10px + var(--passport-stamp-y, 0px)) !important;
    right: calc(-10px + var(--passport-stamp-x, 0px)) !important;
  }
}

/* FINAL FIX 20260708-passport-single-right-blank-v89: stamped left page, clean blank right page. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-featured-single,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-featured-single {
    background:
      radial-gradient(circle at 22% 18%, rgba(255, 246, 203, .62), transparent 32%),
      linear-gradient(135deg, #f3dfac 0%, #dfc383 48%, #bd8f45 100%) !important;
    box-shadow:
      inset -10px 0 18px rgba(72, 45, 12, .14),
      inset 0 0 0 1px rgba(105, 72, 25, .15) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-empty,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-empty {
    background:
      radial-gradient(circle at 74% 16%, rgba(255, 249, 220, .72), transparent 34%),
      radial-gradient(circle at 54% 58%, rgba(112, 74, 26, .055), transparent 42%),
      linear-gradient(135deg, #efd8a1 0%, #ddbd79 50%, #c99b4b 100%) !important;
    box-shadow:
      inset 10px 0 18px rgba(70, 44, 12, .14),
      inset 0 0 0 1px rgba(117, 82, 31, .13) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-empty::before,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-empty::before {
    content: "" !important;
    position: absolute !important;
    inset: 18px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
      radial-gradient(ellipse at center, rgba(71, 48, 18, .06), transparent 42%),
      linear-gradient(135deg, transparent 0%, rgba(255,255,255,.12) 48%, transparent 100%) !important;
    opacity: .9 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-empty::after,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-empty::after {
    content: "" !important;
    position: absolute !important;
    right: 18px !important;
    bottom: 18px !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(101, 67, 24, .14) !important;
    background: radial-gradient(circle, rgba(255,255,255,.12), transparent 68%) !important;
    transform: rotate(-8deg) !important;
  }
}

/* FINAL FIX 20260708-passport-blank-clean-v90: remove inner frame from the empty passport page. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-empty::before,
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-empty::after,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-empty::before,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-empty::after {
    content: none !important;
    display: none !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-empty,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-empty {
    background:
      radial-gradient(circle at 78% 16%, rgba(255, 249, 220, .64), transparent 34%),
      radial-gradient(circle at 54% 58%, rgba(112, 74, 26, .045), transparent 44%),
      linear-gradient(135deg, #efd8a1 0%, #ddbd79 50%, #c99b4b 100%) !important;
  }
}

/* FINAL FIX 20260708-display-case-vitrine-v91: magnets sit in a premium case, not square tiles. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard.collection-display-case .passport-clean-collection-grid,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.passport-clean-collection .passport-clean-collection-grid {
    gap: 18px 18px !important;
    padding: 10px 2px 18px !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(255, 221, 122, .08), transparent 34%),
      linear-gradient(180deg, rgba(255,255,255,.035), transparent 22%, rgba(0,0,0,.18)) !important;
    border-radius: 18px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard.collection-display-case .passport-clean-collection-magnet,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.passport-clean-collection .passport-clean-collection-magnet {
    display: grid !important;
    grid-template-rows: minmax(112px, auto) auto !important;
    align-items: end !important;
    justify-items: center !important;
    min-height: 156px !important;
    height: auto !important;
    padding: 0 4px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: 0 !important;
    overflow: visible !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard.collection-display-case .passport-clean-collection-magnet::before,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard.collection-display-case .passport-clean-collection-magnet::after,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.passport-clean-collection .passport-clean-collection-magnet::before,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.passport-clean-collection .passport-clean-collection-magnet::after {
    content: none !important;
    display: none !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard.collection-display-case .passport-clean-collection-magnet img,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.passport-clean-collection .passport-clean-collection-magnet img {
    display: block !important;
    width: auto !important;
    height: min(112px, 28vw) !important;
    max-width: 94% !important;
    object-fit: contain !important;
    border-radius: 8px !important;
    filter: drop-shadow(0 14px 18px rgba(0,0,0,.42)) drop-shadow(0 0 10px rgba(255, 216, 118, .12)) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard.collection-display-case .passport-clean-collection-magnet span,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.passport-clean-collection .passport-clean-collection-magnet span {
    display: block !important;
    width: 100% !important;
    min-height: 34px !important;
    margin: 8px 0 0 !important;
    padding: 0 !important;
    color: #fff0c8 !important;
    font-size: clamp(15px, 4.4vw, 18px) !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-shadow: 0 2px 10px rgba(0,0,0,.5) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
}

/* FINAL FIX 20260708-display-case-vitrine-v92: confirmed on device that the older
   normal Vault selectors still overpowered v91 and restored gray square cards. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-open):not(.vault-fullscreen-collection-open) #vaultRoom #collectionShareCard.collection-display-case:not(.vault-fullscreen-card) .passport-clean-collection-magnet {
    display: grid !important;
    grid-template-rows: minmax(112px, auto) auto !important;
    align-items: end !important;
    justify-items: center !important;
    min-height: 156px !important;
    height: auto !important;
    padding: 0 4px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: 0 !important;
    overflow: visible !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-open):not(.vault-fullscreen-collection-open) #vaultRoom #collectionShareCard.collection-display-case:not(.vault-fullscreen-card) .passport-clean-collection-magnet::before,
  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-open):not(.vault-fullscreen-collection-open) #vaultRoom #collectionShareCard.collection-display-case:not(.vault-fullscreen-card) .passport-clean-collection-magnet::after {
    content: none !important;
    display: none !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-open):not(.vault-fullscreen-collection-open) #vaultRoom #collectionShareCard.collection-display-case:not(.vault-fullscreen-card) .passport-clean-collection-magnet img {
    display: block !important;
    width: auto !important;
    height: min(112px, 28vw) !important;
    max-width: 94% !important;
    max-height: none !important;
    aspect-ratio: unset !important;
    object-fit: contain !important;
    border-radius: 8px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: drop-shadow(0 14px 18px rgba(0,0,0,.42)) drop-shadow(0 0 10px rgba(255, 216, 118, .12)) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-open):not(.vault-fullscreen-collection-open) #vaultRoom #collectionShareCard.collection-display-case:not(.vault-fullscreen-card) .passport-clean-collection-magnet span {
    display: block !important;
    width: 100% !important;
    min-height: 34px !important;
    margin: 8px 0 0 !important;
    padding: 0 !important;
    color: #fff0c8 !important;
    font-size: clamp(15px, 4.4vw, 18px) !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-shadow: 0 2px 10px rgba(0,0,0,.5) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
}

/* FINAL FIX 20260708-display-case-passport-v93: keep Collection frameless and
   normalize the final single-stamp Passport page against regular two-stamp pages. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-featured-single,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-featured-single {
    grid-template-rows: minmax(0, 1fr) auto !important;
    align-content: center !important;
    justify-items: center !important;
    gap: 12px !important;
    padding: 16px 8px 14px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-hero,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-hero {
    width: 100% !important;
    height: 100% !important;
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    align-items: end !important;
    justify-items: center !important;
    gap: 12px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-sticker,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-sticker {
    width: min(224px, 96%) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 6px !important;
    align-self: end !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-sticker img,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-sticker img {
    width: min(212px, 100%) !important;
    height: clamp(154px, 46vw, 188px) !important;
    object-fit: contain !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-stamp,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-stamp {
    top: calc(12px + var(--passport-stamp-y, 0px)) !important;
    right: calc(-12px + var(--passport-stamp-x, 0px)) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-city,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-city {
    max-width: 98% !important;
    font-size: clamp(18px, 5vw, 24px) !important;
    line-height: 1.05 !important;
  }
}

/* FINAL FIX 20260708-passport-single-size-v94: device screenshot showed the
   last single-stamp magnet still smaller than normal two-stamp pages. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-sticker,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-sticker {
    width: min(320px, 98%) !important;
    padding: 6px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-sticker img,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-sticker img {
    width: min(308px, 100%) !important;
    height: clamp(220px, 58vw, 268px) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-city,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-city {
    font-size: clamp(20px, 5.6vw, 27px) !important;
  }
}

/* FINAL FIX 20260708-passport-equal-pages-v95: keep the final one-stamp spread
   on the same two-page grid as every previous Passport page. The right page is
   visually blank, but it still owns its column so the left page cannot resize. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .mobile-passport-spread,
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .single-stamp-spread,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .mobile-passport-spread,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .single-stamp-spread {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
    justify-items: stretch !important;
    align-items: stretch !important;
    padding: 0 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-featured-single,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-featured-single {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    align-content: stretch !important;
    justify-items: center !important;
    gap: 0 !important;
    padding: 12px 8px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-empty,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-empty {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-hero,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-hero {
    width: 100% !important;
    height: 100% !important;
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    align-items: end !important;
    justify-items: center !important;
    gap: 10px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-sticker,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-sticker {
    width: min(260px, 96%) !important;
    padding: 6px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-sticker img,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-sticker img {
    width: min(248px, 100%) !important;
    height: clamp(176px, 42vw, 216px) !important;
    object-fit: contain !important;
  }
}

/* FINAL FIX 20260708-passport-single-fix-v97: v96 was a no-op (only bumped bundleVersion, wrote
   zero CSS). v95 is the last real block and it locks in repeat(2,1fr) + visibility:visible on
   the empty page. This block comes AFTER v95 in the cascade and is the authoritative rule:
   - collapse the spread to one column so the single stamp fills the full width;
   - hide the empty right page entirely (display:none);
   - expand the featured page and its image to use all available space. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .mobile-passport-spread,
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .single-stamp-spread,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .mobile-passport-spread,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .single-stamp-spread {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: stretch !important;
    justify-items: stretch !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .mobile-passport-spread::before,
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .single-stamp-spread::before,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .mobile-passport-spread::before,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .single-stamp-spread::before {
    display: none !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .mobile-passport-spread .mobile-passport-page.is-empty,
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-empty,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .mobile-passport-spread .mobile-passport-page.is-empty,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-empty {
    display: none !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .mobile-passport-spread .mobile-passport-page.is-featured-single,
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-featured-single,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .mobile-passport-spread .mobile-passport-page.is-featured-single,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-featured-single {
    display: grid !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    align-content: center !important;
    justify-items: center !important;
    padding: 18px 16px 14px !important;
    gap: 10px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .mobile-passport-spread .mobile-passport-page.is-featured-single .mobile-passport-hero,
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-hero,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .mobile-passport-spread .mobile-passport-page.is-featured-single .mobile-passport-hero,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-hero {
    width: 100% !important;
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    align-items: end !important;
    justify-items: center !important;
    gap: 12px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .mobile-passport-spread .mobile-passport-page.is-featured-single .mobile-passport-sticker-wrap,
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-sticker-wrap,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .mobile-passport-spread .mobile-passport-page.is-featured-single .mobile-passport-sticker-wrap,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-sticker-wrap {
    width: min(280px, 88%) !important;
    height: auto !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .mobile-passport-spread .mobile-passport-page.is-featured-single .mobile-passport-sticker,
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-sticker,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .mobile-passport-spread .mobile-passport-page.is-featured-single .mobile-passport-sticker,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-sticker {
    width: min(272px, 90%) !important;
    max-width: none !important;
    max-height: none !important;
    padding: 8px !important;
    margin: 0 auto !important;
    align-self: center !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .mobile-passport-spread .mobile-passport-page.is-featured-single .mobile-passport-sticker img,
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-sticker img,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .mobile-passport-spread .mobile-passport-page.is-featured-single .mobile-passport-sticker img,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-sticker img {
    width: min(252px, 100%) !important;
    max-width: none !important;
    height: clamp(180px, 44vw, 248px) !important;
    max-height: none !important;
    object-fit: contain !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .mobile-passport-spread .mobile-passport-page.is-featured-single .mobile-passport-city,
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-city,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .mobile-passport-spread .mobile-passport-page.is-featured-single .mobile-passport-city,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-city {
    font-size: clamp(20px, 5.2vw, 28px) !important;
    text-align: center !important;
  }
}

/* FINAL FIX 20260708-passport-single-v98: definitive root-cause fix.
   Root cause: v87 block (line 10723) uses .mobile-passport-spread.single-stamp-spread
   (both classes on the same element) → specificity (1,6,2). Every prior fix (v95, v97)
   used only one class → specificity (1,5,2) → always lost to v87's repeat(2,1fr).
   JS also now drops the is-empty article entirely and injects inline !important style.
   This block uses the same combined-class selector as v87 and comes after it → wins.
   Also fixes Prev/Next hidden behind bottom nav. */
@media (max-width: 760px) {
  /* Force the spread to one column — beats v87's repeat(2,1fr) at (1,6,2). */
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .mobile-passport-spread.single-stamp-spread,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .mobile-passport-spread.single-stamp-spread {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: stretch !important;
    justify-items: stretch !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .mobile-passport-spread.single-stamp-spread::before,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .mobile-passport-spread.single-stamp-spread::before {
    display: none !important;
  }

  /* Featured single page fills the full spread width. */
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .mobile-passport-spread.single-stamp-spread .mobile-passport-page.is-featured-single,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .mobile-passport-spread.single-stamp-spread .mobile-passport-page.is-featured-single {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    align-content: center !important;
    justify-items: center !important;
    padding: 18px 16px 14px !important;
    gap: 10px !important;
  }

  /* Hero block fills the page vertically, centers magnet. */
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .mobile-passport-spread.single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-hero,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .mobile-passport-spread.single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-hero {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    width: 100% !important;
    height: 100% !important;
    align-items: center !important;
    justify-items: center !important;
    gap: 10px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .mobile-passport-spread.single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-sticker-wrap,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .mobile-passport-spread.single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-sticker-wrap {
    width: min(200px, 80%) !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .mobile-passport-spread.single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-sticker,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .mobile-passport-spread.single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-sticker {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 200px !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
    align-self: center !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .mobile-passport-spread.single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-sticker img,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .mobile-passport-spread.single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-sticker img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 180px !important;
    max-height: 164px !important;
    min-width: 100px !important;
    min-height: 80px !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .mobile-passport-spread.single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-city,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .mobile-passport-spread.single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-city {
    font-size: clamp(16px, 4.8vw, 22px) !important;
    text-align: center !important;
    max-width: 98% !important;
    line-height: 1.1 !important;
  }

  /* Prev/Next: push controls above the 72-px bottom nav. */
  html.magnetfolio-mobile-app body.vault-feature-page .mobile-passport-stage {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    margin-bottom: 0 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-controls {
    margin: 6px 0 0 !important;
    padding: 0 0 8px !important;
  }
}

/* FINAL FIX 20260708-passport-single-size-v99: single-stamp left page same magnet size as 2-stamp pages.
   v98 forced a single column (full-width spread) which made the magnet appear differently sized.
   v99 restores the 2-column grid: left = magnet (identical cell to a normal page), right = empty beige.
   Same combined-class selector specificity as v98 → later declaration wins. */
@media (max-width: 760px) {
  /* Restore 2-column grid — overrides v98's minmax(0,1fr) single column. */
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .mobile-passport-spread.single-stamp-spread,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .mobile-passport-spread.single-stamp-spread {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  /* Restore the book-spine ::before divider hidden by v98. */
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .mobile-passport-spread.single-stamp-spread::before,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .mobile-passport-spread.single-stamp-spread::before {
    display: block !important;
  }

  /* Featured single page: half-column cell, matches normal page padding/layout. */
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .mobile-passport-spread.single-stamp-spread .mobile-passport-page.is-featured-single,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .mobile-passport-spread.single-stamp-spread .mobile-passport-page.is-featured-single {
    width: 100% !important;
    max-width: none !important;
    padding: 7px 6px 8px !important;
    gap: 4px !important;
    align-content: center !important;
  }

  /* Hero: reset v98 grid back to normal flex column. */
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .mobile-passport-spread.single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-hero,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .mobile-passport-spread.single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    width: 100% !important;
    height: auto !important;
  }

  /* Sticker-wrap: exactly match normal 2-stamp page. */
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .mobile-passport-spread.single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-sticker-wrap,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .mobile-passport-spread.single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-sticker-wrap {
    width: min(116px, 86%) !important;
    margin: 2px 0 0 !important;
    padding: 2px 16px 0 0 !important;
    height: auto !important;
  }

  /* Sticker button: match normal page dimensions. */
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .mobile-passport-spread.single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-sticker,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .mobile-passport-spread.single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-sticker {
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    min-height: 76px !important;
    padding: 4px !important;
    margin: 0 !important;
    align-self: unset !important;
    border: unset !important;
    background: unset !important;
    box-shadow: unset !important;
  }

  /* Sticker image: exactly match normal 2-stamp page size (80px × 68px). */
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .mobile-passport-spread.single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-sticker img,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .mobile-passport-spread.single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-sticker img {
    width: 80px !important;
    height: 68px !important;
    max-width: none !important;
    max-height: none !important;
    min-width: unset !important;
    min-height: unset !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  /* City label: same size as normal page. */
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .mobile-passport-spread.single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-city,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .mobile-passport-spread.single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-city {
    margin-top: 4px !important;
    font-size: 12px !important;
    text-align: center !important;
    line-height: 1.05 !important;
  }
}

/* FINAL FIX 20260708-passport-single-match-v100: the last-page single magnet must look
   IDENTICAL to a magnet on a normal 2-stamp page (e.g. Swiss Alps, Cappadocia).
   v99 shrunk it to 80x68 and stripped the sticker frame. v100 restores exact match:
   sticker 136px wide with white frame + gold shadow, image 118x82, city 14px, sticker
   perfectly centered inside the left cell. Right cell stays beige as "Next stamp".
   Uses the same combined-class selector as v99 (specificity 1,6,1) placed LATER
   in cascade so it wins. */
@media (max-width: 760px) {
  /* Sticker-wrap: no artificial width/padding — full cell, centered content. */
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .mobile-passport-spread.single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-sticker-wrap,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .mobile-passport-spread.single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-sticker-wrap {
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* Sticker button: exactly match normal 2-stamp page. */
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .mobile-passport-spread.single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-sticker,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .mobile-passport-spread.single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-sticker {
    width: min(136px, 92%) !important;
    max-width: none !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    padding: 6px !important;
    margin: 0 auto !important;
    border: 1px solid rgba(255,255,255,.66) !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,.55) !important;
    box-shadow: 0 16px 26px rgba(76, 48, 8, .16) !important;
    align-self: center !important;
    display: grid !important;
    place-items: center !important;
  }

  /* Sticker image: exactly match normal 2-stamp page (118x82). */
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .mobile-passport-spread.single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-sticker img,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .mobile-passport-spread.single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-sticker img {
    width: min(118px, 100%) !important;
    height: 82px !important;
    max-width: 100% !important;
    max-height: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  /* City label: exactly match normal 2-stamp page (14px, dark brown). */
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book.single-stamp-mode .mobile-passport-spread.single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-city,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book.single-stamp-mode .mobile-passport-spread.single-stamp-spread .mobile-passport-page.is-featured-single .mobile-passport-city {
    color: #211609 !important;
    font-size: 14px !important;
    font-weight: 950 !important;
    line-height: 1.02 !important;
    margin-top: 6px !important;
    text-align: center !important;
    max-width: 96% !important;
  }
}

/* FINAL FIX 20260708-passport-spread-rule-v101: incomplete last spread (1 magnet, many countries)
   must use the same 2-column page shell as full spreads. JS no longer applies single-stamp-mode
   unless countries.length === 1 && pageCount === 1. Guard CSS so empty right slot matches left. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book:not(.single-stamp-mode) .mobile-passport-spread .mobile-passport-page.is-empty,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book:not(.single-stamp-mode) .mobile-passport-spread .mobile-passport-page.is-empty {
    display: grid !important;
    align-content: center !important;
    justify-items: center !important;
    width: 100% !important;
    min-height: 252px !important;
    height: 100% !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* FINAL FIX 20260708-passport-incomplete-spread-v102: last spread with one country among many
   must match a full 2-stamp page (e.g. 9/10). JS adds .incomplete-spread on the spread.
   Locks 2 equal columns, same paper shell, same hero box — any collection size. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-spread.incomplete-spread,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-spread.incomplete-spread {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100% !important;
    min-height: min(34vh, 208px) !important;
    max-height: min(38vh, 228px) !important;
    height: auto !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-spread.incomplete-spread {
    min-height: min(40vh, 214px) !important;
    max-height: min(44vh, 232px) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-spread.incomplete-spread .mobile-passport-page,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-spread.incomplete-spread .mobile-passport-page {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: min(34vh, 208px) !important;
    max-height: min(38vh, 228px) !important;
    height: 100% !important;
    padding: 5px 4px 6px !important;
    overflow: hidden !important;
    background:
      radial-gradient(circle at 20% 14%, rgba(255, 255, 255, .22), transparent 44%),
      radial-gradient(circle at 78% 86%, rgba(108, 78, 34, .06), transparent 40%),
      repeating-linear-gradient(135deg, rgba(98, 72, 28, .025) 0 2px, rgba(98, 72, 28, 0) 2px 6px),
      linear-gradient(158deg, rgba(251, 238, 198, .98), rgba(226, 200, 138, .95)) !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-spread.incomplete-spread .mobile-passport-page {
    min-height: min(40vh, 214px) !important;
    max-height: min(44vh, 232px) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-spread.incomplete-spread .mobile-passport-page:not(.is-empty) .mobile-passport-hero,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-spread.incomplete-spread .mobile-passport-page:not(.is-empty) .mobile-passport-hero {
    flex: 0 0 auto !important;
    width: 100% !important;
    gap: 4px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-spread.incomplete-spread .mobile-passport-page:not(.is-empty) .mobile-passport-sticker-wrap,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-spread.incomplete-spread .mobile-passport-page:not(.is-empty) .mobile-passport-sticker-wrap {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: min(132px, 92%) !important;
    height: 124px !important;
    max-height: 124px !important;
    margin: 0 auto !important;
    padding: 9px 9px 7px !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-spread.incomplete-spread .mobile-passport-page:not(.is-empty) .mobile-passport-sticker,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-spread.incomplete-spread .mobile-passport-page:not(.is-empty) .mobile-passport-sticker {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-spread.incomplete-spread .mobile-passport-page:not(.is-empty) .mobile-passport-sticker img,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-spread.incomplete-spread .mobile-passport-page:not(.is-empty) .mobile-passport-sticker img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 112px !important;
    max-height: 106px !important;
    min-width: 70px !important;
    min-height: 70px !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-spread.incomplete-spread .mobile-passport-page.is-empty,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-spread.incomplete-spread .mobile-passport-page.is-empty {
    place-items: center !important;
    color: rgba(56, 41, 18, .45) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
  }
}

/* FINAL FIX 20260708-passport-incomplete-inline-v103: inline vault preview only.
   v102 fixed min(34vh,208px) on incomplete pages; normal spreads shrink-wrap (v52) so
   page 10 looked smaller inside the card. Fullscreen v102 unchanged — already matches. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-spread.incomplete-spread {
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-spread.incomplete-spread .mobile-passport-page {
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-spread.incomplete-spread .mobile-passport-page:not(.is-empty) .mobile-passport-sticker-wrap {
    flex: unset !important;
    max-height: none !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-spread.incomplete-spread .mobile-passport-page:not(.is-empty) .mobile-passport-sticker {
    width: auto !important;
    height: auto !important;
    max-width: 112px !important;
    max-height: 106px !important;
    min-width: 72px !important;
    min-height: 72px !important;
  }
}

/* FINAL FIX 20260708-passport-incomplete-match-v104: last odd spread must use the
   exact normal 2-page passport shell. v101/v102 gave the empty page and
   .incomplete-spread their own min/max heights, so page 10 grew taller than page 9. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-spread.incomplete-spread {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-spread.incomplete-spread .mobile-passport-page {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    padding: 5px 4px 6px !important;
    overflow: visible !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-spread.incomplete-spread .mobile-passport-page.is-empty {
    min-height: 0 !important;
    height: auto !important;
    align-self: stretch !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-spread.incomplete-spread {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 0 !important;
    min-height: min(52vh, 360px) !important;
    max-height: none !important;
    height: auto !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-spread.incomplete-spread .mobile-passport-page {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: min(52vh, 360px) !important;
    max-height: none !important;
    height: 100% !important;
    padding: 5px 4px 6px !important;
    overflow: visible !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-spread.incomplete-spread .mobile-passport-page.is-empty {
    min-height: min(52vh, 360px) !important;
    height: 100% !important;
    align-self: stretch !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-spread.incomplete-spread .mobile-passport-page.is-empty span,
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-spread.incomplete-spread .mobile-passport-page.is-empty span {
    display: block !important;
  }
}

/* FINAL FIX 20260708-passport-fullscreen-incomplete-v105: v104 fixed the inline
   preview, but fullscreen still expanded the last odd spread because max-height
   was removed there. Keep only the fullscreen incomplete spread compact. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-spread.incomplete-spread {
    min-height: min(40vh, 214px) !important;
    max-height: min(44vh, 232px) !important;
    height: auto !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-spread.incomplete-spread .mobile-passport-page {
    min-height: min(40vh, 214px) !important;
    max-height: min(44vh, 232px) !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-spread.incomplete-spread .mobile-passport-page.is-empty {
    min-height: min(40vh, 214px) !important;
    max-height: min(44vh, 232px) !important;
    height: 100% !important;
  }
}

/* FINAL FIX 20260708-wall-search-layer-v109: Wall search dropdown painted behind
   .wall-world-hero and magnet cards. Cause: .wall-main overflow:hidden (style.css)
   plus .wall-topbar sticky z-index 40 — dropdown extended under hero/grid. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.wall-page .wall-main {
    overflow: visible !important;
  }

  html.magnetfolio-mobile-app body.wall-page .wall-topbar {
    overflow: visible !important;
    isolation: isolate !important;
  }

  html.magnetfolio-mobile-app body.wall-page .wall-controls,
  html.magnetfolio-mobile-app body.wall-page .wall-search {
    position: relative !important;
    overflow: visible !important;
  }

  html.magnetfolio-mobile-app body.wall-page .wall-search .search-results,
  html.magnetfolio-mobile-app body.wall-page #searchResults.search-results {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 5 !important;
    max-height: min(52vh, 360px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 8px !important;
    border-radius: 14px !important;
    background: rgba(10, 13, 24, .99) !important;
    border: 1px solid rgba(180, 108, 255, .34) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .62) !important;
  }

  html.magnetfolio-mobile-app body.wall-page.wall-search-open .wall-topbar {
    z-index: 12000 !important;
  }

  html.magnetfolio-mobile-app body.wall-page.wall-search-open .wall-world-hero,
  html.magnetfolio-mobile-app body.wall-page.wall-search-open #citiesContainer.magnet-wall-grid {
    position: relative !important;
    z-index: 0 !important;
  }
}

/* FINAL FIX 20260709-passport-fullscreen-title-v117: Passport fullscreen collector title
   was truncating to "Magnetfolio C..." from nowrap/ellipsis + fixed 76px head row.
   Scoped to fullscreen preview only — inline Vault passport layout unchanged. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-fullscreen-passport-open .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book {
    grid-template-rows: auto minmax(0, 1fr) !important;
  }

  html.magnetfolio-mobile-app body.vault-fullscreen-passport-open .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-head {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    align-items: start !important;
    padding-bottom: 10px !important;
  }

  html.magnetfolio-mobile-app body.vault-fullscreen-passport-open .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-head > strong {
    font-size: clamp(17px, 4.8vw, 22px) !important;
    line-height: 1.08 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    hyphens: auto !important;
    max-width: 100% !important;
  }
}

/* FINAL FIX 20260709-collection-compact-v117: tighten Display Case + share card when only
   a few magnets so small collections feel balanced without grey square tiles. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard.collection-display-case:has(.passport-clean-collection-magnet:nth-child(4):last-child),
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard.collection-display-case:has(.passport-clean-collection-magnet:nth-child(3):last-child),
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard.collection-display-case:has(.passport-clean-collection-magnet:nth-child(2):last-child) {
    padding-bottom: 12px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard.collection-display-case:has(.passport-clean-collection-magnet:nth-child(4):last-child) .passport-clean-collection-head,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard.collection-display-case:has(.passport-clean-collection-magnet:nth-child(3):last-child) .passport-clean-collection-head,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard.collection-display-case:has(.passport-clean-collection-magnet:nth-child(2):last-child) .passport-clean-collection-head {
    margin-bottom: 8px !important;
    padding-bottom: 8px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard.collection-display-case:has(.passport-clean-collection-magnet:nth-child(4):last-child) .collection-share-actions,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard.collection-display-case:has(.passport-clean-collection-magnet:nth-child(3):last-child) .collection-share-actions,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard.collection-display-case:has(.passport-clean-collection-magnet:nth-child(2):last-child) .collection-share-actions {
    margin-bottom: 8px !important;
    gap: 6px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard.collection-display-case:has(.passport-clean-collection-magnet:nth-child(4):last-child) .passport-clean-collection-grid,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard.collection-display-case:has(.passport-clean-collection-magnet:nth-child(3):last-child) .passport-clean-collection-grid,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard.collection-display-case:has(.passport-clean-collection-magnet:nth-child(2):last-child) .passport-clean-collection-grid {
    gap: 12px 16px !important;
    padding: 6px 4px 8px !important;
    align-content: start !important;
    min-height: 0 !important;
    height: auto !important;
    grid-auto-rows: auto !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard.collection-display-case:has(.passport-clean-collection-magnet:nth-child(4):last-child) .passport-clean-collection-magnet,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard.collection-display-case:has(.passport-clean-collection-magnet:nth-child(3):last-child) .passport-clean-collection-magnet,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard.collection-display-case:has(.passport-clean-collection-magnet:nth-child(2):last-child) .passport-clean-collection-magnet {
    min-height: 0 !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard.collection-display-case:has(.passport-clean-collection-magnet:nth-child(4):last-child) .passport-clean-collection-magnet img,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard.collection-display-case:has(.passport-clean-collection-magnet:nth-child(3):last-child) .passport-clean-collection-magnet img,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard.collection-display-case:has(.passport-clean-collection-magnet:nth-child(2):last-child) .passport-clean-collection-magnet img {
    height: min(96px, 24vw) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard.collection-display-case:has(.passport-clean-collection-magnet:nth-child(4):last-child) .passport-clean-collection-magnet span,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard.collection-display-case:has(.passport-clean-collection-magnet:nth-child(3):last-child) .passport-clean-collection-magnet span,
  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard.collection-display-case:has(.passport-clean-collection-magnet:nth-child(2):last-child) .passport-clean-collection-magnet span {
    min-height: 0 !important;
    margin-top: 6px !important;
  }
}

/* FINAL FIX 20260709-center-mark-v118: keep the white bottom-nav orb fixed,
   but center the Magnetfolio mark optically inside it instead of letting the
   44px image touch the circle edge. Mobile-only nav polish. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab,
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab:hover,
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab:focus,
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab:active,
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab.active,
  html.magnetfolio-mobile-app .app-bottom-nav.app-bottom-nav-compact.with-vault a.mark-tab,
  html.magnetfolio-mobile-app .app-bottom-nav.app-bottom-nav-compact.with-vault a.mark-tab:hover,
  html.magnetfolio-mobile-app .app-bottom-nav.app-bottom-nav-compact.with-vault a.mark-tab:focus,
  html.magnetfolio-mobile-app .app-bottom-nav.app-bottom-nav-compact.with-vault a.mark-tab:active,
  html.magnetfolio-mobile-app .app-bottom-nav.app-bottom-nav-compact.with-vault a.mark-tab.active {
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
  }

  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab > span,
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab:hover > span,
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab:focus > span,
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab:active > span,
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab.active > span,
  html.magnetfolio-mobile-app .app-bottom-nav.app-bottom-nav-compact.with-vault a.mark-tab > span,
  html.magnetfolio-mobile-app .app-bottom-nav.app-bottom-nav-compact.with-vault a.mark-tab:hover > span,
  html.magnetfolio-mobile-app .app-bottom-nav.app-bottom-nav-compact.with-vault a.mark-tab:focus > span,
  html.magnetfolio-mobile-app .app-bottom-nav.app-bottom-nav-compact.with-vault a.mark-tab:active > span,
  html.magnetfolio-mobile-app .app-bottom-nav.app-bottom-nav-compact.with-vault a.mark-tab.active > span {
    display: grid !important;
    place-items: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab img.nav-mark-emblem,
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab:hover img.nav-mark-emblem,
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab:focus img.nav-mark-emblem,
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab:active img.nav-mark-emblem,
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab.active img.nav-mark-emblem,
  html.magnetfolio-mobile-app .app-bottom-nav.app-bottom-nav-compact.with-vault a.mark-tab img.nav-mark-emblem,
  html.magnetfolio-mobile-app .app-bottom-nav.app-bottom-nav-compact.with-vault a.mark-tab:hover img.nav-mark-emblem,
  html.magnetfolio-mobile-app .app-bottom-nav.app-bottom-nav-compact.with-vault a.mark-tab:focus img.nav-mark-emblem,
  html.magnetfolio-mobile-app .app-bottom-nav.app-bottom-nav-compact.with-vault a.mark-tab:active img.nav-mark-emblem,
  html.magnetfolio-mobile-app .app-bottom-nav.app-bottom-nav-compact.with-vault a.mark-tab.active img.nav-mark-emblem {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin: 0 !important;
    transform: translateY(1px) !important;
  }
}

/* FINAL FIX 20260716-passport-gallery-strip-v139: add collected magnet cards
   between the Passport header band and the existing page spread. Page sizing
   is intentionally untouched. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page .passport-anchor-block .passport-main-title .section-kicker {
    color: #f0c25b !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book,
  html.magnetfolio-mobile-app body.vault-fullscreen-passport-open .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book {
    border-color: rgba(230, 184, 88, .30) !important;
    background:
      radial-gradient(circle at 18% 0%, rgba(255, 220, 122, .10), transparent 34%),
      linear-gradient(145deg, rgba(70, 14, 26, .98), rgba(31, 5, 12, .99) 62%, rgba(92, 20, 34, .96)) !important;
    box-shadow: 0 18px 36px rgba(20, 4, 9, .38), inset 0 1px 0 rgba(255, 230, 160, .12) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-head,
  html.magnetfolio-mobile-app body.vault-fullscreen-passport-open .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 4px 10px !important;
    align-items: center !important;
    padding: 9px 11px 8px !important;
    margin: 0 0 6px !important;
    border: 1px solid rgba(240, 194, 91, .28) !important;
    border-radius: 13px !important;
    background:
      radial-gradient(circle at 18% 0%, rgba(255, 221, 132, .10), transparent 38%),
      linear-gradient(145deg, rgba(78, 16, 30, .98), rgba(26, 5, 12, .99) 72%, rgba(92, 20, 34, .94)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 238, 180, .12), 0 8px 18px rgba(16, 2, 7, .30) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-head > span,
  html.magnetfolio-mobile-app body.vault-fullscreen-passport-open .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-head > span {
    grid-column: 1 / -1 !important;
    color: #f0c25b !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
    text-align: center !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-head > strong,
  html.magnetfolio-mobile-app body.vault-fullscreen-passport-open .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-head > strong {
    grid-column: 1 !important;
    color: #fff5dc !important;
    font-size: clamp(18px, 5.4vw, 23px) !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
  }

  html.magnetfolio-mobile-app body.vault-fullscreen-passport-open .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-head {
    padding: 9px 12px 8px !important;
    margin-bottom: 6px !important;
  }

  html.magnetfolio-mobile-app body.vault-fullscreen-passport-open .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-head > span {
    font-size: 11px !important;
  }

  html.magnetfolio-mobile-app body.vault-fullscreen-passport-open .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-head > strong {
    font-size: clamp(18px, 5vw, 24px) !important;
  }

  html.magnetfolio-mobile-app body.vault-fullscreen-passport-open .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-head > small {
    display: none !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-head > small,
  html.magnetfolio-mobile-app body.vault-fullscreen-passport-open .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-head > small {
    grid-column: 1 / -1 !important;
    color: rgba(255, 241, 208, .72) !important;
    font-size: 7px !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-head .mobile-passport-share,
  html.magnetfolio-mobile-app body.vault-fullscreen-passport-open .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-head .mobile-passport-share {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: center !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-spread.with-gallery,
  html.magnetfolio-mobile-app body.vault-fullscreen-passport-open .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-spread.with-gallery {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-gallery-strip,
  html.magnetfolio-mobile-app body.vault-fullscreen-passport-open .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-gallery-strip {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 5px !important;
    align-items: center !important;
    padding: 5px 6px 6px !important;
    margin: 0 0 6px !important;
    border: 1px solid rgba(245, 197, 66, .20) !important;
    border-radius: 14px !important;
    background:
      linear-gradient(180deg, rgba(91, 20, 34, .94), rgba(45, 7, 15, .98)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 226, 146, .12), 0 8px 18px rgba(18, 3, 8, .30) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-gallery-slot,
  html.magnetfolio-mobile-app body.vault-fullscreen-passport-open .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-gallery-slot {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 3px !important;
    border: 1px solid rgba(223, 190, 112, .42) !important;
    border-radius: 9px !important;
    background: linear-gradient(145deg, rgba(255, 249, 230, .90), rgba(210, 177, 106, .36)) !important;
    box-shadow: 0 5px 12px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .78) !important;
    overflow: hidden !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-gallery-slot.is-active,
  html.magnetfolio-mobile-app body.vault-fullscreen-passport-open .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-gallery-slot.is-active {
    border-color: rgba(245, 197, 66, .90) !important;
    box-shadow: 0 0 0 2px rgba(123, 70, 151, .38), 0 6px 14px rgba(0, 0, 0, .28) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-gallery-slot img,
  html.magnetfolio-mobile-app body.vault-fullscreen-passport-open .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-gallery-slot img {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 6px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #passportShareCard.mobile-passport-book .mobile-passport-gallery-slot.is-empty,
  html.magnetfolio-mobile-app body.vault-fullscreen-passport-open .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-gallery-slot.is-empty {
    border-style: dashed !important;
    background: rgba(255, 248, 225, .70) !important;
    color: rgba(91, 72, 35, .60) !important;
    font-size: 8px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
  }
}

/* FINAL FIX 20260716-passport-fullscreen-compact-v142: must be after the
   gallery strip block. Fullscreen Passport gets cover color on top and the
   book stops stretching empty burgundy space before Prev/Next. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-fullscreen-passport-open .vault-fullscreen-shell {
    gap: 8px !important;
  }

  html.magnetfolio-mobile-app body.vault-fullscreen-passport-open .vault-fullscreen-head {
    min-height: 0 !important;
    padding: 11px 12px !important;
    border: 1px solid rgba(230, 184, 88, .26) !important;
    border-radius: 18px !important;
    background:
      radial-gradient(circle at 16% 0%, rgba(255, 221, 132, .12), transparent 38%),
      linear-gradient(145deg, rgba(78, 16, 30, .98), rgba(26, 5, 12, .99) 70%, rgba(92, 20, 34, .94)) !important;
    box-shadow: 0 12px 26px rgba(18, 3, 8, .34), inset 0 1px 0 rgba(255, 235, 175, .12) !important;
  }

  html.magnetfolio-mobile-app body.vault-fullscreen-passport-open .vault-fullscreen-head span {
    color: rgba(240, 194, 91, .86) !important;
  }

  html.magnetfolio-mobile-app body.vault-fullscreen-passport-open .vault-fullscreen-close {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    border-color: rgba(240, 194, 91, .34) !important;
    background: rgba(8, 8, 14, .72) !important;
  }

  html.magnetfolio-mobile-app body.vault-fullscreen-passport-open .vault-fullscreen-stage {
    align-items: flex-start !important;
  }

  html.magnetfolio-mobile-app body.vault-fullscreen-passport-open .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book {
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 150px) !important;
    align-self: flex-start !important;
    align-content: start !important;
    grid-template-rows: auto auto auto !important;
    gap: 8px !important;
    overflow: visible !important;
  }

  html.magnetfolio-mobile-app body.vault-fullscreen-passport-open .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-spread.with-gallery {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: start !important;
  }

  html.magnetfolio-mobile-app body.vault-fullscreen-passport-open .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-page {
    min-height: 0 !important;
    height: auto !important;
  }

  html.magnetfolio-mobile-app body.vault-fullscreen-passport-open .vault-fullscreen-stage .vault-fullscreen-card.mobile-passport-book .mobile-passport-controls {
    margin-top: 0 !important;
    align-self: start !important;
  }
}

/* FINAL FIX 20260716-collection-smoked-metal-v145: replace the too-warm
   champagne test with a smoked petrol/graphite metal backing that keeps the
   collection premium and lets the magnet art carry the color. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-open):not(.vault-fullscreen-collection-open) #vaultRoom #collectionShareCard.collection-display-case:not(.vault-fullscreen-card) .passport-clean-collection-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    justify-items: center !important;
    align-items: start !important;
    gap: 22px 18px !important;
    padding: 22px 16px 20px !important;
    border: 1px solid rgba(177, 207, 204, .24) !important;
    border-radius: 20px !important;
    background:
      radial-gradient(circle at 18% 0%, rgba(222, 246, 240, .24), transparent 34%),
      linear-gradient(90deg, rgba(255, 255, 255, .07), transparent 10%, rgba(5, 23, 29, .18) 55%, transparent 88%),
      linear-gradient(145deg, #4f6668 0%, #263a42 46%, #111923 100%) !important;
    box-shadow: inset 0 1px 0 rgba(236, 255, 249, .20), inset 0 -18px 42px rgba(2, 8, 13, .28), 0 18px 32px rgba(0, 0, 0, .34) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-open):not(.vault-fullscreen-collection-open) #vaultRoom #collectionShareCard.collection-display-case:not(.vault-fullscreen-card) .passport-clean-collection-magnet {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: auto auto !important;
    justify-items: center !important;
    align-items: start !important;
    padding: 0 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-open):not(.vault-fullscreen-collection-open) #vaultRoom #collectionShareCard.collection-display-case:not(.vault-fullscreen-card) .passport-clean-collection-magnet img {
    display: block !important;
    width: auto !important;
    height: min(92px, 24vw) !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .44)) drop-shadow(0 0 9px rgba(214, 245, 235, .12)) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-open):not(.vault-fullscreen-collection-open) #vaultRoom #collectionShareCard.collection-display-case:not(.vault-fullscreen-card) .passport-clean-collection-magnet span {
    width: 100% !important;
    min-height: 0 !important;
    margin-top: 7px !important;
    color: #fff0c8 !important;
    font-size: clamp(12px, 3.4vw, 15px) !important;
    line-height: 1.08 !important;
    text-align: center !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .55) !important;
  }
}

/* FINAL FIX 20260716-collection-fullscreen-smoked-v146: apply the same smoked
   metal collection backing inside the fullscreen Collection preview. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.passport-clean-collection .passport-clean-collection-grid,
  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.vault-fullscreen-collection .passport-clean-collection-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    justify-items: center !important;
    align-items: start !important;
    gap: 22px 18px !important;
    padding: 22px 16px 20px !important;
    border: 1px solid rgba(177, 207, 204, .24) !important;
    border-radius: 20px !important;
    background:
      radial-gradient(circle at 18% 0%, rgba(222, 246, 240, .24), transparent 34%),
      linear-gradient(90deg, rgba(255, 255, 255, .07), transparent 10%, rgba(5, 23, 29, .18) 55%, transparent 88%),
      linear-gradient(145deg, #4f6668 0%, #263a42 46%, #111923 100%) !important;
    box-shadow: inset 0 1px 0 rgba(236, 255, 249, .20), inset 0 -18px 42px rgba(2, 8, 13, .28), 0 18px 32px rgba(0, 0, 0, .34) !important;
  }

  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.passport-clean-collection .passport-clean-collection-magnet,
  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.vault-fullscreen-collection .passport-clean-collection-magnet {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: auto auto !important;
    justify-items: center !important;
    align-items: start !important;
    padding: 0 !important;
  }

  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.passport-clean-collection .passport-clean-collection-magnet img,
  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.vault-fullscreen-collection .passport-clean-collection-magnet img {
    display: block !important;
    width: auto !important;
    height: min(92px, 24vw) !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .44)) drop-shadow(0 0 9px rgba(214, 245, 235, .12)) !important;
  }

  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.passport-clean-collection .passport-clean-collection-magnet span,
  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.vault-fullscreen-collection .passport-clean-collection-magnet span {
    width: 100% !important;
    min-height: 0 !important;
    margin-top: 7px !important;
    color: #fff0c8 !important;
    font-size: clamp(12px, 3.4vw, 15px) !important;
    line-height: 1.08 !important;
    text-align: center !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .55) !important;
  }
}

/* FINAL FIX 20260716-collection-identity-v148: make Collection read as its
   own premium object, not a generic black Display Case card. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-open):not(.vault-fullscreen-collection-open) #vaultRoom #collectionShareCard.collection-display-case:not(.vault-fullscreen-card),
  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.passport-clean-collection,
  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.vault-fullscreen-collection {
    background:
      radial-gradient(circle at 18% 0%, rgba(222, 246, 240, .12), transparent 34%),
      linear-gradient(145deg, rgba(14, 23, 31, .98), rgba(5, 8, 15, .98)) !important;
    border-color: rgba(213, 177, 84, .24) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-open):not(.vault-fullscreen-collection-open) #vaultRoom #collectionShareCard.collection-display-case:not(.vault-fullscreen-card) .passport-clean-collection-head,
  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.passport-clean-collection .passport-clean-collection-head,
  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.vault-fullscreen-collection .passport-clean-collection-head {
    margin: 0 0 14px !important;
    padding: 14px 16px 15px !important;
    border: 1px solid rgba(177, 207, 204, .22) !important;
    border-radius: 18px !important;
    background:
      linear-gradient(90deg, rgba(255, 255, 255, .06), transparent 22%, rgba(213, 177, 84, .06)),
      linear-gradient(145deg, rgba(67, 88, 91, .78), rgba(19, 31, 39, .88)) !important;
    box-shadow: inset 0 1px 0 rgba(236, 255, 249, .16), 0 14px 24px rgba(0, 0, 0, .25) !important;
    text-align: left !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-open):not(.vault-fullscreen-collection-open) #vaultRoom #collectionShareCard.collection-display-case:not(.vault-fullscreen-card) .passport-clean-collection-head span,
  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.passport-clean-collection .passport-clean-collection-head span,
  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.vault-fullscreen-collection .passport-clean-collection-head span {
    color: #e4c160 !important;
    font-size: 12px !important;
    line-height: 1 !important;
    letter-spacing: .26em !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .5) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-open):not(.vault-fullscreen-collection-open) #vaultRoom #collectionShareCard.collection-display-case:not(.vault-fullscreen-card) .passport-clean-collection-head strong,
  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.passport-clean-collection .passport-clean-collection-head strong,
  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.vault-fullscreen-collection .passport-clean-collection-head strong {
    color: #fff6df !important;
    font-size: clamp(34px, 9vw, 42px) !important;
    line-height: .98 !important;
    letter-spacing: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    text-shadow: 0 3px 14px rgba(0, 0, 0, .5) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page:not(.vault-fullscreen-open):not(.vault-fullscreen-collection-open) #vaultRoom #collectionShareCard.collection-display-case:not(.vault-fullscreen-card) .passport-clean-collection-head small,
  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.passport-clean-collection .passport-clean-collection-head small,
  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.vault-fullscreen-collection .passport-clean-collection-head small {
    justify-self: start !important;
    width: auto !important;
    min-height: 0 !important;
    margin-top: 2px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: rgba(255, 235, 184, .92) !important;
    font-size: 13px !important;
    line-height: 1.1 !important;
    letter-spacing: .14em !important;
    text-align: left !important;
    text-transform: uppercase !important;
  }

  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.passport-clean-collection .passport-clean-collection-grid,
  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.vault-fullscreen-collection .passport-clean-collection-grid {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: min(58vh, 620px) !important;
    overflow-y: auto !important;
    align-content: start !important;
    grid-auto-rows: max-content !important;
    padding: 18px 14px 20px !important;
    gap: 24px 18px !important;
  }
}

/* FINAL FIX 20260716-collection-fullscreen-fit-v149: override the older
   fullscreen flex-fill grid so five magnets do not leave a tall empty panel. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-fullscreen-open.vault-fullscreen-collection-open .vault-fullscreen-preview.show .vault-fullscreen-shell.vault-fullscreen-collection .vault-fullscreen-stage .vault-fullscreen-card.vault-fullscreen-collection .passport-clean-collection-grid,
  html.magnetfolio-mobile-app body.vault-fullscreen-open.vault-fullscreen-collection-open .vault-fullscreen-preview.show .vault-fullscreen-shell.vault-fullscreen-collection .vault-fullscreen-stage .vault-fullscreen-card.passport-clean-collection .passport-clean-collection-grid {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: min(38dvh, 760px) !important;
    overflow-y: auto !important;
    align-content: start !important;
    grid-auto-rows: max-content !important;
    padding: 18px 14px 20px !important;
    gap: 24px 18px !important;
  }
}

/* FINAL FIX 20260716-wall-no-black-art-v150: remove the black tray behind
   Wall magnets so the product art reads premium, like the Collection surface. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.wall-page #citiesContainer.magnet-wall-grid {
    gap: 10px !important;
  }

  html.magnetfolio-mobile-app body.wall-page article.wall-magnet-card.city-card {
    background:
      radial-gradient(circle at 18% 0%, rgba(222, 246, 240, .16), transparent 34%),
      linear-gradient(90deg, rgba(255, 255, 255, .055), transparent 18%, rgba(213, 177, 84, .055)),
      linear-gradient(145deg, rgba(79, 102, 104, .82), rgba(38, 58, 66, .92) 52%, rgba(17, 25, 35, .96)) !important;
    border: 1px solid rgba(177, 207, 204, .22) !important;
    box-shadow: inset 0 1px 0 rgba(236, 255, 249, .16), 0 16px 34px rgba(0, 0, 0, .36) !important;
  }

  html.magnetfolio-mobile-app body.wall-page article.wall-magnet-card.city-card.tier-luxury {
    background:
      radial-gradient(circle at 20% 0%, rgba(245, 196, 81, .18), transparent 34%),
      radial-gradient(circle at 86% 8%, rgba(122, 44, 255, .18), transparent 32%),
      linear-gradient(145deg, rgba(82, 101, 101, .84), rgba(40, 57, 67, .94) 52%, rgba(18, 25, 36, .96)) !important;
    border-color: rgba(213, 177, 84, .34) !important;
  }

  html.magnetfolio-mobile-app body.wall-page article.wall-magnet-card.city-card .wall-card-art,
  html.magnetfolio-mobile-app body.wall-page article.wall-magnet-card.city-card .wall-card-art.fit-contain {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html.magnetfolio-mobile-app body.wall-page article.wall-magnet-card.city-card .wall-card-art::before,
  html.magnetfolio-mobile-app body.wall-page article.wall-magnet-card.city-card .wall-card-art::after {
    content: none !important;
    display: none !important;
  }

  html.magnetfolio-mobile-app body.wall-page article.wall-magnet-card.city-card .wall-card-art img {
    background: transparent !important;
    filter: drop-shadow(0 12px 15px rgba(0, 0, 0, .48)) drop-shadow(0 0 8px rgba(236, 255, 249, .10)) !important;
  }
}

/* FINAL FIX 20260716-wall-hero-globe-free-v151: remove the blue square tray
   around the Wall hero globe; keep only the round world object. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.wall-page .wall-globe-launch {
    display: grid !important;
    place-items: center !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    border-radius: 50% !important;
  }

  html.magnetfolio-mobile-app body.wall-page .wall-hero-globe,
  html.magnetfolio-mobile-app body.wall-page .premium-globe.wall-hero-globe {
    position: relative !important;
    width: 74px !important;
    height: 74px !important;
    min-width: 74px !important;
    max-width: 74px !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .42)) drop-shadow(0 0 14px rgba(245, 196, 81, .18)) !important;
  }

  html.magnetfolio-mobile-app body.wall-page .wall-hero-globe .globe-atmosphere {
    display: block !important;
    position: absolute !important;
    inset: -10% !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(245, 196, 81, .14), transparent 62%) !important;
    box-shadow: none !important;
  }

  html.magnetfolio-mobile-app body.wall-page .wall-hero-globe .globe-sphere {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    clip-path: circle(50% at 50% 50%) !important;
    overflow: hidden !important;
    background-color: transparent !important;
    box-shadow: inset -18px -14px 28px rgba(0, 0, 0, .58), inset 8px 7px 16px rgba(255, 255, 255, .12), 0 0 0 1px rgba(245, 196, 81, .22) !important;
  }

  html.magnetfolio-mobile-app body.wall-page .wall-hero-globe .globe-pins {
    inset: 0 !important;
    border-radius: 50% !important;
    clip-path: circle(50% at 50% 50%) !important;
    overflow: hidden !important;
  }
}

/* FINAL FIX 20260716-brand-icon-globe-v164: align the center navigation mark
   with the black/gold world identity. This final override must stay after the
   older center-mark rules that forced a white circle. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab > span,
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab:hover > span,
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab:focus > span,
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab:active > span,
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab.active > span,
  html.magnetfolio-mobile-app .app-bottom-nav.app-bottom-nav-compact.with-vault a.mark-tab > span,
  html.magnetfolio-mobile-app .app-bottom-nav.app-bottom-nav-compact.with-vault a.mark-tab:hover > span,
  html.magnetfolio-mobile-app .app-bottom-nav.app-bottom-nav-compact.with-vault a.mark-tab:focus > span,
  html.magnetfolio-mobile-app .app-bottom-nav.app-bottom-nav-compact.with-vault a.mark-tab:active > span,
  html.magnetfolio-mobile-app .app-bottom-nav.app-bottom-nav-compact.with-vault a.mark-tab.active > span {
    background:
      radial-gradient(circle at 50% 42%, rgba(42, 34, 18, .96) 0%, rgba(8, 7, 7, .98) 62%, rgba(3, 3, 4, 1) 100%) !important;
    box-shadow:
      0 0 0 1px rgba(216, 171, 86, .58),
      inset 0 0 0 1px rgba(255, 226, 155, .12),
      inset 0 0 18px rgba(216, 171, 86, .10),
      0 10px 22px rgba(0, 0, 0, .38) !important;
  }

  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab img.nav-mark-emblem,
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab:hover img.nav-mark-emblem,
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab:focus img.nav-mark-emblem,
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab:active img.nav-mark-emblem,
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab.active img.nav-mark-emblem,
  html.magnetfolio-mobile-app .app-bottom-nav.app-bottom-nav-compact.with-vault a.mark-tab img.nav-mark-emblem,
  html.magnetfolio-mobile-app .app-bottom-nav.app-bottom-nav-compact.with-vault a.mark-tab:hover img.nav-mark-emblem,
  html.magnetfolio-mobile-app .app-bottom-nav.app-bottom-nav-compact.with-vault a.mark-tab:focus img.nav-mark-emblem,
  html.magnetfolio-mobile-app .app-bottom-nav.app-bottom-nav-compact.with-vault a.mark-tab:active img.nav-mark-emblem,
  html.magnetfolio-mobile-app .app-bottom-nav.app-bottom-nav-compact.with-vault a.mark-tab.active img.nav-mark-emblem {
    width: 31px !important;
    height: 31px !important;
    min-width: 31px !important;
    min-height: 31px !important;
    max-width: 31px !important;
    max-height: 31px !important;
    border-radius: 999px !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: translate(0, 0) !important;
  }
}

/* FINAL FIX 20260716-nav-live-globe-v165: use a real mini rotating globe in
   the center tab instead of a flat globe PNG. Keep it after the image rules. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab .nav-live-globe,
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab:hover .nav-live-globe,
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab:focus .nav-live-globe,
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab:active .nav-live-globe,
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab.active .nav-live-globe {
    position: relative !important;
    display: block !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    border-radius: 50% !important;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: translateZ(0) !important;
    isolation: isolate !important;
  }

  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab .nav-live-globe .globe-atmosphere {
    position: absolute !important;
    inset: -15% !important;
    display: block !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(245, 196, 81, .18), transparent 64%) !important;
    filter: blur(.2px) !important;
    pointer-events: none !important;
  }

  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab .nav-live-globe .globe-sphere {
    position: absolute !important;
    inset: 2px !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    background:
      radial-gradient(circle at 28% 22%, rgba(255, 255, 255, .55), transparent 13%),
      radial-gradient(circle at 76% 78%, rgba(0, 0, 0, .62), transparent 46%),
      linear-gradient(115deg, rgba(255, 220, 136, .15), transparent 30%, rgba(0, 0, 0, .40) 82%),
      url("images/earth-blue-marble-globe.webp") center / 185% 100% repeat-x,
      linear-gradient(120deg, #061b34, #0b5f88 48%, #03080f) !important;
    box-shadow:
      inset -9px -7px 16px rgba(0, 0, 0, .70),
      inset 4px 3px 7px rgba(255, 255, 255, .20),
      inset 0 0 0 1px rgba(255, 233, 160, .22),
      0 0 0 1px rgba(218, 171, 77, .72),
      0 6px 13px rgba(0, 0, 0, .42) !important;
    animation: magnetfolioNavGlobeTexture 22s linear infinite !important;
    transform: none !important;
  }

  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab .nav-live-globe .globe-sphere::before,
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab .nav-live-globe .continent,
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab .nav-live-globe .globe-grid-line {
    content: none !important;
    display: none !important;
  }

  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab .nav-live-globe .globe-sphere::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    border-radius: 50% !important;
    background:
      linear-gradient(90deg, transparent 47%, rgba(245, 196, 81, .18) 49%, transparent 52%),
      repeating-linear-gradient(0deg, transparent 0 8px, rgba(245, 196, 81, .10) 9px, transparent 10px),
      radial-gradient(circle at 30% 23%, rgba(255, 255, 255, .18), transparent 26%) !important;
    opacity: .70 !important;
  }

  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab .nav-live-globe .globe-pins {
    position: absolute !important;
    inset: 2px !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    animation: magnetfolioNavGlobeSpin 22s linear infinite !important;
    z-index: 3 !important;
  }

  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab .nav-live-globe .globe-pin {
    position: absolute !important;
    display: block !important;
    width: 3px !important;
    height: 3px !important;
    border-radius: 50% !important;
    background: rgba(255, 224, 138, .95) !important;
    box-shadow: 0 0 0 1px rgba(45, 23, 4, .30), 0 0 5px rgba(245, 196, 81, .72) !important;
    transform: translate(-50%, -50%) !important;
  }
}

@keyframes magnetfolioNavGlobeTexture {
  from { background-position: center, center, center, 0% center, center; }
  to { background-position: center, center, center, 185% center, center; }
}

@keyframes magnetfolioNavGlobeSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* FINAL FIX 20260717-nav-mini-wall-globe-v166: center tab uses the same globe
   object as the Wall hero, only scaled down. This overrides the experimental
   nav-live-globe attempt above without deleting the historical fix block. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab > span,
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab:hover > span,
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab:focus > span,
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab:active > span,
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab.active > span {
    display: grid !important;
    place-items: center !important;
    overflow: visible !important;
  }

  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab .nav-mini-globe,
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab:hover .nav-mini-globe,
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab:focus .nav-mini-globe,
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab:active .nav-mini-globe,
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab.active .nav-mini-globe {
    position: relative !important;
    display: block !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .46)) drop-shadow(0 0 10px rgba(245, 196, 81, .18)) !important;
  }

  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab .nav-mini-globe .globe-atmosphere {
    display: block !important;
    position: absolute !important;
    inset: -10% !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(245, 196, 81, .16), transparent 62%) !important;
    box-shadow: none !important;
  }

  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab .nav-mini-globe .globe-sphere {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    clip-path: circle(50% at 50% 50%) !important;
    overflow: hidden !important;
    background:
      radial-gradient(circle at 28% 22%, rgba(255, 255, 255, .30), transparent 16%),
      radial-gradient(circle at 75% 78%, rgba(0, 0, 0, .60), transparent 44%),
      linear-gradient(115deg, rgba(255, 255, 255, .12), transparent 28%, rgba(0, 0, 0, .34) 82%),
      url("images/earth-blue-marble-globe.webp") center / 185% 100% repeat-x,
      linear-gradient(120deg, #07254d, #0a5e9d 48%, #021328) !important;
    box-shadow:
      inset -10px -8px 18px rgba(0, 0, 0, .68),
      inset 4px 3px 7px rgba(255, 255, 255, .16),
      inset 0 0 0 1px rgba(255, 255, 255, .13),
      0 0 0 1px rgba(245, 196, 81, .24) !important;
    animation: magnetfolioNavMiniWallGlobe 34s linear infinite !important;
    transform-origin: 50% 50% !important;
  }

  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab .nav-mini-globe .globe-sphere::before,
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab .nav-mini-globe .continent,
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab .nav-mini-globe .globe-grid-line {
    content: none !important;
    display: none !important;
  }

  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab .nav-mini-globe .globe-sphere::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    border-radius: 50% !important;
    background:
      radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .14), transparent 24%),
      linear-gradient(110deg, rgba(255, 255, 255, .10), transparent 40%, rgba(0, 0, 0, .22)) !important;
    opacity: .72 !important;
  }

  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab .nav-mini-globe .globe-pins {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    clip-path: circle(50% at 50% 50%) !important;
    overflow: hidden !important;
    animation: magnetfolioNavMiniWallGlobeSpin 34s linear infinite !important;
    z-index: 5 !important;
  }

  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab .nav-mini-globe .globe-pin {
    position: absolute !important;
    display: block !important;
    width: 3px !important;
    height: 3px !important;
    min-width: 3px !important;
    min-height: 3px !important;
    max-width: 3px !important;
    max-height: 3px !important;
    border-radius: 50% !important;
    background: rgba(255, 224, 137, .94) !important;
    box-shadow:
      0 0 0 1px rgba(245, 196, 81, .15),
      0 0 5px rgba(245, 196, 81, .58) !important;
    transform: translate(-50%, -50%) !important;
  }
}

@keyframes magnetfolioNavMiniWallGlobe {
  from { background-position: center, center, center, 0% center, center; }
  to { background-position: center, center, center, 185% center, center; }
}

@keyframes magnetfolioNavMiniWallGlobeSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* FINAL FIX 20260717-nav-mini-globe-clean-v167: the center nav globe is a
   brand object only. Keep collected location pins on the large Wall globe. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab .nav-mini-globe .globe-pins,
  html.magnetfolio-mobile-app .app-bottom-nav a.mark-tab .nav-mini-globe .globe-pin {
    content: none !important;
    display: none !important;
  }
}

/* FINAL FIX 20260717-settings-stack-v168: make Settings a compact control
   surface instead of a tall hero page. Visual/layout only; auth handlers stay
   in settings-account.js. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.settings-page .settings-shell {
    display: grid !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 10px 112px !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-panel.settings-compact-panel {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 14px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(245, 196, 81, .20) !important;
    background:
      radial-gradient(circle at 0 0, rgba(245, 196, 81, .10), transparent 40%),
      linear-gradient(145deg, rgba(28, 28, 32, .96), rgba(10, 10, 16, .98)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 238, 182, .10), 0 14px 28px rgba(0, 0, 0, .24) !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-section-head {
    display: grid !important;
    gap: 2px !important;
    margin: 0 0 10px !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-section-head .section-kicker {
    color: #f0c25b !important;
    font-size: 11px !important;
    line-height: 1 !important;
    letter-spacing: .18em !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-section-head h2 {
    margin: 0 !important;
    color: #fff6df !important;
    font-size: 24px !important;
    line-height: 1.04 !important;
    letter-spacing: 0 !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-row,
  html.magnetfolio-mobile-app body.settings-page .settings-account-summary,
  html.magnetfolio-mobile-app body.settings-page .cloud-status-panel,
  html.magnetfolio-mobile-app body.settings-page .account-security-grid,
  html.magnetfolio-mobile-app body.settings-page .custom-magnet-settings-card,
  html.magnetfolio-mobile-app body.settings-page .settings-support-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 12px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(245, 196, 81, .18) !important;
    background:
      linear-gradient(90deg, rgba(255, 255, 255, .045), transparent 30%, rgba(245, 196, 81, .045)),
      rgba(255, 246, 220, .035) !important;
    box-shadow: inset 0 1px 0 rgba(255, 238, 182, .08) !important;
  }

  html.magnetfolio-mobile-app body.settings-page .cloud-status-panel {
    grid-template-columns: 18px minmax(0, 1fr) auto !important;
  }

  html.magnetfolio-mobile-app body.settings-page .account-security-grid {
    grid-template-columns: minmax(0, 1fr) repeat(3, auto) !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-row span,
  html.magnetfolio-mobile-app body.settings-page .settings-account-summary span,
  html.magnetfolio-mobile-app body.settings-page .cloud-status-panel span,
  html.magnetfolio-mobile-app body.settings-page .account-security-grid span,
  html.magnetfolio-mobile-app body.settings-page .custom-magnet-settings-card span {
    display: block !important;
    margin: 0 0 3px !important;
    color: #ffe39a !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-row strong,
  html.magnetfolio-mobile-app body.settings-page .settings-account-summary strong,
  html.magnetfolio-mobile-app body.settings-page .cloud-status-panel strong,
  html.magnetfolio-mobile-app body.settings-page .account-security-grid strong,
  html.magnetfolio-mobile-app body.settings-page .custom-magnet-settings-card strong {
    display: block !important;
    max-width: 100% !important;
    color: #fff6df !important;
    font-size: 18px !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
    overflow-wrap: anywhere !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-row small,
  html.magnetfolio-mobile-app body.settings-page .settings-account-summary small,
  html.magnetfolio-mobile-app body.settings-page .cloud-status-panel small,
  html.magnetfolio-mobile-app body.settings-page .account-security-grid small,
  html.magnetfolio-mobile-app body.settings-page .custom-magnet-settings-card small {
    display: block !important;
    margin-top: 4px !important;
    color: rgba(218, 214, 232, .78) !important;
    font-size: 12px !important;
    line-height: 1.28 !important;
    letter-spacing: 0 !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-row-action,
  html.magnetfolio-mobile-app body.settings-page .cloud-status-panel button,
  html.magnetfolio-mobile-app body.settings-page .account-security-grid button {
    display: inline-grid !important;
    place-items: center !important;
    min-width: 58px !important;
    height: 40px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(245, 196, 81, .32) !important;
    background: rgba(255, 246, 220, .07) !important;
    color: #ffe39a !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }

  html.magnetfolio-mobile-app body.settings-page .cloud-status-panel button:not(:disabled),
  html.magnetfolio-mobile-app body.settings-page .account-security-grid #verifyEmailButton:not(:disabled) {
    border: 0 !important;
    background: linear-gradient(135deg, var(--gold2), var(--gold)) !important;
    color: #14110a !important;
    box-shadow: 0 10px 22px rgba(245, 196, 81, .22) !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-account-message {
    position: static !important;
    display: block !important;
    min-height: 0 !important;
    margin: 10px 0 0 !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    background: rgba(255, 246, 220, .06) !important;
    color: #fff6df !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    text-align: left !important;
    transform: none !important;
    box-shadow: none !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-account-message:empty {
    display: none !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-field {
    margin: 0 0 10px !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-field span {
    font-size: 12px !important;
    color: #ffe39a !important;
    letter-spacing: .08em !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-field input,
  html.magnetfolio-mobile-app body.settings-page .settings-field select {
    min-height: 48px !important;
    border-radius: 13px !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-actions.settings-actions-compact {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 10px 0 0 !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-actions.settings-actions-compact button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    line-height: 1 !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-toggle-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 12px !important;
    align-items: center !important;
    margin: 0 0 8px !important;
    padding: 12px !important;
    border-radius: 14px !important;
    background: rgba(255, 246, 220, .035) !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-toggle-row:last-child {
    margin-bottom: 0 !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-toggle-row strong {
    font-size: 16px !important;
    line-height: 1.1 !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-toggle-row small {
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-legal-links {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 10px !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-legal-links a,
  html.magnetfolio-mobile-app body.settings-page .settings-legal-links span {
    display: grid !important;
    place-items: center !important;
    min-height: 38px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(245, 196, 81, .18) !important;
    background: rgba(255, 246, 220, .04) !important;
    color: #ffe39a !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    text-align: center !important;
  }

  html.magnetfolio-mobile-app body.settings-page .danger-cta {
    width: 100% !important;
    min-height: 42px !important;
    margin-top: 10px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
  }
}

/* FINAL FIX 20260717-settings-premium-v171: last mobile Settings pass,
   intentionally placed after v168 so compact QA sizing wins. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.settings-page header.app-header {
    display: grid !important;
    grid-template-columns: 104px minmax(0, 1fr) !important;
    align-items: center !important;
    min-height: 64px !important;
    padding: 7px 10px !important;
    gap: 10px !important;
    border-radius: 0 0 16px 16px !important;
    background: linear-gradient(135deg, rgba(45, 16, 72, .94), rgba(8, 8, 14, .96) 58%, rgba(96, 20, 42, .64)) !important;
    border-bottom: 1px solid rgba(245, 196, 81, .20) !important;
  }

  html.magnetfolio-mobile-app body.settings-page header.app-header .brand-header-lockup {
    width: 104px !important;
    min-width: 104px !important;
    height: 50px !important;
    max-height: 50px !important;
    padding: 5px 8px !important;
    border-radius: 12px !important;
  }

  html.magnetfolio-mobile-app body.settings-page header.app-header .brand-header-lockup img {
    width: auto !important;
    max-width: 82px !important;
    max-height: 36px !important;
  }

  html.magnetfolio-mobile-app body.settings-page header.app-header .page-title-lockup h1 {
    font-size: 27px !important;
    line-height: 1 !important;
  }

  html.magnetfolio-mobile-app body.settings-page header.app-header .page-title-lockup p {
    margin-top: 3px !important;
    font-size: 9px !important;
    line-height: 1.12 !important;
    letter-spacing: .11em !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-shell {
    gap: 8px !important;
    padding: 10px 10px 112px !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-panel.settings-compact-panel {
    gap: 9px !important;
    padding: 12px !important;
    border-radius: 16px !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-section-head {
    margin: 0 !important;
    gap: 1px !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-section-head .section-kicker {
    font-size: 9px !important;
    letter-spacing: .20em !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-section-head h2 {
    font-size: 20px !important;
    line-height: 1.03 !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-row,
  html.magnetfolio-mobile-app body.settings-page .settings-account-summary,
  html.magnetfolio-mobile-app body.settings-page .cloud-status-panel,
  html.magnetfolio-mobile-app body.settings-page .custom-magnet-settings-card,
  html.magnetfolio-mobile-app body.settings-page .settings-support-row {
    min-height: 74px !important;
    padding: 10px !important;
    border-radius: 13px !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-account-summary {
    grid-template-columns: minmax(0, 1fr) 54px !important;
  }

  html.magnetfolio-mobile-app body.settings-page .cloud-status-panel {
    grid-template-columns: 14px minmax(0, 1fr) 58px !important;
  }

  html.magnetfolio-mobile-app body.settings-page .account-security-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, .74fr) !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  html.magnetfolio-mobile-app body.settings-page .account-security-grid > div {
    grid-column: 1 / -1 !important;
  }

  html.magnetfolio-mobile-app body.settings-page .account-security-grid button {
    width: 100% !important;
    min-width: 0 !important;
    height: 36px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
  }

  html.magnetfolio-mobile-app body.settings-page .account-security-grid #signOutSettingsButton {
    grid-column: 1 / -1 !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-row span,
  html.magnetfolio-mobile-app body.settings-page .settings-account-summary span,
  html.magnetfolio-mobile-app body.settings-page .cloud-status-panel span,
  html.magnetfolio-mobile-app body.settings-page .account-security-grid span,
  html.magnetfolio-mobile-app body.settings-page .custom-magnet-settings-card span {
    font-size: 9px !important;
    margin-bottom: 2px !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-row strong,
  html.magnetfolio-mobile-app body.settings-page .settings-account-summary strong,
  html.magnetfolio-mobile-app body.settings-page .cloud-status-panel strong,
  html.magnetfolio-mobile-app body.settings-page .account-security-grid strong,
  html.magnetfolio-mobile-app body.settings-page .custom-magnet-settings-card strong {
    font-size: 16px !important;
    line-height: 1.08 !important;
  }

  html.magnetfolio-mobile-app body.settings-page #settingsAccountEmail,
  html.magnetfolio-mobile-app body.settings-page .settings-row small,
  html.magnetfolio-mobile-app body.settings-page .settings-account-summary small,
  html.magnetfolio-mobile-app body.settings-page .cloud-status-panel small,
  html.magnetfolio-mobile-app body.settings-page .account-security-grid small,
  html.magnetfolio-mobile-app body.settings-page .custom-magnet-settings-card small {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    overflow-wrap: normal !important;
    font-size: 11px !important;
    line-height: 1.22 !important;
  }

  html.magnetfolio-mobile-app body.settings-page #settingsAccountEmail {
    white-space: nowrap !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-row-action,
  html.magnetfolio-mobile-app body.settings-page .cloud-status-panel button {
    min-width: 0 !important;
    width: 54px !important;
    height: 36px !important;
    padding: 0 !important;
    font-size: 11px !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-actions.settings-actions-compact {
    gap: 7px !important;
    margin-top: 0 !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-actions.settings-actions-compact button {
    min-height: 38px !important;
    font-size: 12px !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-field {
    margin: 0 !important;
    gap: 5px !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-field input,
  html.magnetfolio-mobile-app body.settings-page .settings-field select {
    min-height: 42px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-toggle-row {
    min-height: 58px !important;
    margin: 0 !important;
    padding: 10px !important;
    border-radius: 13px !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-toggle-row + .settings-toggle-row {
    margin-top: 7px !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-toggle-row strong {
    font-size: 15px !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-toggle-row small {
    font-size: 11px !important;
  }

  html.magnetfolio-mobile-app body.settings-page .danger-cta {
    min-height: 38px !important;
    margin-top: 0 !important;
    font-size: 12px !important;
  }
}

/* FINAL FIX 20260717-settings-sync-row-v172: keep cloud action inline so
   Backup reads like a premium settings row instead of a tall form card. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.settings-page .cloud-status-panel {
    align-items: center !important;
  }

  html.magnetfolio-mobile-app body.settings-page .cloud-status-panel button {
    grid-column: auto !important;
    justify-self: end !important;
    align-self: center !important;
    margin: 0 !important;
  }
}

/* FINAL FIX 20260717-settings-list-premium-v175: Settings should read as a
   premium mobile control list, not oversized dashboard cards. Visual only. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.settings-page {
    background:
      radial-gradient(circle at 52% -16%, rgba(115, 58, 155, .20), transparent 32%),
      linear-gradient(180deg, #08070d 0%, #0c0a12 44%, #07070c 100%) !important;
  }

  html.magnetfolio-mobile-app body.settings-page header.app-header {
    display: grid !important;
    grid-template-columns: 76px minmax(0, 1fr) !important;
    min-height: 52px !important;
    padding: 6px 10px !important;
    gap: 9px !important;
    border-radius: 0 0 14px 14px !important;
    background: linear-gradient(135deg, rgba(36, 14, 58, .94), rgba(9, 8, 14, .98) 62%, rgba(75, 16, 34, .68)) !important;
  }

  html.magnetfolio-mobile-app body.settings-page header.app-header .brand-header-lockup {
    width: 76px !important;
    min-width: 76px !important;
    height: 40px !important;
    max-height: 40px !important;
    padding: 4px 6px !important;
    border-radius: 11px !important;
  }

  html.magnetfolio-mobile-app body.settings-page header.app-header .brand-header-lockup img {
    max-width: 62px !important;
    max-height: 28px !important;
  }

  html.magnetfolio-mobile-app body.settings-page header.app-header .page-title-lockup h1 {
    font-size: 22px !important;
    line-height: 1 !important;
  }

  html.magnetfolio-mobile-app body.settings-page header.app-header .page-title-lockup p {
    margin-top: 2px !important;
    font-size: 8px !important;
    letter-spacing: 0 !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-shell {
    display: grid !important;
    gap: 12px !important;
    padding: 10px 10px 112px !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-panel.settings-compact-panel {
    display: grid !important;
    gap: 6px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-section-head {
    display: grid !important;
    gap: 1px !important;
    margin: 0 4px 0 !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-section-head .section-kicker {
    color: #c7a859 !important;
    font-size: 8px !important;
    line-height: 1 !important;
    letter-spacing: .18em !important;
    font-weight: 900 !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-section-head h2 {
    color: #fff4dd !important;
    font-size: 15px !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-row,
  html.magnetfolio-mobile-app body.settings-page .settings-account-summary,
  html.magnetfolio-mobile-app body.settings-page .cloud-status-panel,
  html.magnetfolio-mobile-app body.settings-page .account-security-grid,
  html.magnetfolio-mobile-app body.settings-page .custom-magnet-settings-card,
  html.magnetfolio-mobile-app body.settings-page .settings-support-row,
  html.magnetfolio-mobile-app body.settings-page .settings-toggle-row,
  html.magnetfolio-mobile-app body.settings-page .settings-field {
    width: 100% !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(245, 196, 81, .15) !important;
    background:
      linear-gradient(90deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .025)),
      rgba(16, 15, 21, .94) !important;
    box-shadow: inset 0 1px 0 rgba(255, 236, 184, .08), 0 10px 20px rgba(0, 0, 0, .20) !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-account-summary,
  html.magnetfolio-mobile-app body.settings-page .custom-magnet-settings-card,
  html.magnetfolio-mobile-app body.settings-page .settings-support-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 52px !important;
    align-items: center !important;
    gap: 10px !important;
  }

  html.magnetfolio-mobile-app body.settings-page .cloud-status-panel {
    display: grid !important;
    grid-template-columns: 14px minmax(0, 1fr) 58px !important;
    align-items: center !important;
    gap: 10px !important;
  }

  html.magnetfolio-mobile-app body.settings-page .account-security-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) repeat(2, minmax(58px, auto)) !important;
    align-items: center !important;
    gap: 8px !important;
  }

  html.magnetfolio-mobile-app body.settings-page .account-security-grid > div {
    grid-column: 1 / -1 !important;
  }

  html.magnetfolio-mobile-app body.settings-page .account-security-grid #signOutSettingsButton {
    grid-column: auto !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-row span,
  html.magnetfolio-mobile-app body.settings-page .settings-account-summary span,
  html.magnetfolio-mobile-app body.settings-page .cloud-status-panel span,
  html.magnetfolio-mobile-app body.settings-page .account-security-grid span,
  html.magnetfolio-mobile-app body.settings-page .custom-magnet-settings-card span,
  html.magnetfolio-mobile-app body.settings-page .settings-field span {
    display: block !important;
    margin: 0 0 3px !important;
    color: #d9bc6a !important;
    font-size: 8px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-row strong,
  html.magnetfolio-mobile-app body.settings-page .settings-account-summary strong,
  html.magnetfolio-mobile-app body.settings-page .cloud-status-panel strong,
  html.magnetfolio-mobile-app body.settings-page .account-security-grid strong,
  html.magnetfolio-mobile-app body.settings-page .custom-magnet-settings-card strong,
  html.magnetfolio-mobile-app body.settings-page .settings-toggle-row strong {
    display: block !important;
    color: #fff5df !important;
    font-size: 14px !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
  }

  html.magnetfolio-mobile-app body.settings-page #settingsAccountEmail,
  html.magnetfolio-mobile-app body.settings-page .settings-row small,
  html.magnetfolio-mobile-app body.settings-page .settings-account-summary small,
  html.magnetfolio-mobile-app body.settings-page .cloud-status-panel small,
  html.magnetfolio-mobile-app body.settings-page .account-security-grid small,
  html.magnetfolio-mobile-app body.settings-page .custom-magnet-settings-card small,
  html.magnetfolio-mobile-app body.settings-page .settings-toggle-row small {
    display: block !important;
    max-width: 100% !important;
    margin-top: 3px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: rgba(218, 214, 232, .72) !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-row-action,
  html.magnetfolio-mobile-app body.settings-page .cloud-status-panel button,
  html.magnetfolio-mobile-app body.settings-page .account-security-grid button {
    display: inline-grid !important;
    place-items: center !important;
    min-width: 0 !important;
    width: 52px !important;
    height: 32px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html.magnetfolio-mobile-app body.settings-page .cloud-status-panel button {
    width: 58px !important;
    justify-self: end !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-actions.settings-actions-compact {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin: 0 !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-actions.settings-actions-compact button,
  html.magnetfolio-mobile-app body.settings-page .danger-cta {
    min-height: 36px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    line-height: 1 !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-field {
    display: grid !important;
    gap: 6px !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-field input,
  html.magnetfolio-mobile-app body.settings-page .settings-field select {
    min-height: 38px !important;
    border-radius: 11px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-toggle-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-toggle-row + .settings-toggle-row {
    margin-top: 6px !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-legal-links {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin: 0 !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-legal-links a,
  html.magnetfolio-mobile-app body.settings-page .settings-legal-links span {
    min-height: 34px !important;
    border-radius: 12px !important;
    font-size: 11px !important;
  }
}

/* FINAL FIX 20260717-settings-dense-premium-v176: phone QA showed v175 was
   still too loud. Make Settings a dense premium control surface. Visual only. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.settings-page header.app-header {
    grid-template-columns: 62px minmax(0, 1fr) !important;
    min-height: 46px !important;
    padding: 5px 9px !important;
    gap: 8px !important;
    border-radius: 0 0 12px 12px !important;
  }

  html.magnetfolio-mobile-app body.settings-page header.app-header .brand-header-lockup {
    width: 62px !important;
    min-width: 62px !important;
    height: 34px !important;
    max-height: 34px !important;
    padding: 3px 5px !important;
    border-radius: 9px !important;
  }

  html.magnetfolio-mobile-app body.settings-page header.app-header .brand-header-lockup img {
    max-width: 50px !important;
    max-height: 23px !important;
  }

  html.magnetfolio-mobile-app body.settings-page header.app-header .page-title-lockup h1 {
    font-size: 20px !important;
  }

  html.magnetfolio-mobile-app body.settings-page header.app-header .page-title-lockup p {
    font-size: 7px !important;
    letter-spacing: .14em !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-shell {
    gap: 9px !important;
    padding: 8px 10px 106px !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-panel.settings-compact-panel {
    gap: 5px !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-section-head {
    margin: 0 2px !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-section-head .section-kicker {
    font-size: 7px !important;
    letter-spacing: .18em !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-section-head h2 {
    font-size: 13px !important;
    line-height: 1 !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-row,
  html.magnetfolio-mobile-app body.settings-page .settings-account-summary,
  html.magnetfolio-mobile-app body.settings-page .cloud-status-panel,
  html.magnetfolio-mobile-app body.settings-page .account-security-grid,
  html.magnetfolio-mobile-app body.settings-page .custom-magnet-settings-card,
  html.magnetfolio-mobile-app body.settings-page .settings-support-row,
  html.magnetfolio-mobile-app body.settings-page .settings-toggle-row {
    min-height: 48px !important;
    padding: 8px 10px !important;
    border-radius: 12px !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-account-summary,
  html.magnetfolio-mobile-app body.settings-page .custom-magnet-settings-card,
  html.magnetfolio-mobile-app body.settings-page .settings-support-row {
    grid-template-columns: minmax(0, 1fr) 46px !important;
    gap: 8px !important;
  }

  html.magnetfolio-mobile-app body.settings-page .cloud-status-panel {
    grid-template-columns: 12px minmax(0, 1fr) 50px !important;
    gap: 8px !important;
  }

  html.magnetfolio-mobile-app body.settings-page .cloud-status-indicator {
    width: 10px !important;
    height: 10px !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-row span,
  html.magnetfolio-mobile-app body.settings-page .settings-account-summary span,
  html.magnetfolio-mobile-app body.settings-page .cloud-status-panel span,
  html.magnetfolio-mobile-app body.settings-page .account-security-grid span,
  html.magnetfolio-mobile-app body.settings-page .custom-magnet-settings-card span,
  html.magnetfolio-mobile-app body.settings-page .settings-field span {
    font-size: 7px !important;
    margin-bottom: 2px !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-row strong,
  html.magnetfolio-mobile-app body.settings-page .settings-account-summary strong,
  html.magnetfolio-mobile-app body.settings-page .cloud-status-panel strong,
  html.magnetfolio-mobile-app body.settings-page .account-security-grid strong,
  html.magnetfolio-mobile-app body.settings-page .custom-magnet-settings-card strong,
  html.magnetfolio-mobile-app body.settings-page .settings-toggle-row strong {
    font-size: 12px !important;
    line-height: 1.05 !important;
  }

  html.magnetfolio-mobile-app body.settings-page #settingsAccountEmail,
  html.magnetfolio-mobile-app body.settings-page .settings-row small,
  html.magnetfolio-mobile-app body.settings-page .settings-account-summary small,
  html.magnetfolio-mobile-app body.settings-page .cloud-status-panel small,
  html.magnetfolio-mobile-app body.settings-page .account-security-grid small,
  html.magnetfolio-mobile-app body.settings-page .custom-magnet-settings-card small,
  html.magnetfolio-mobile-app body.settings-page .settings-toggle-row small {
    margin-top: 2px !important;
    font-size: 9px !important;
    line-height: 1.1 !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-row-action,
  html.magnetfolio-mobile-app body.settings-page .cloud-status-panel button,
  html.magnetfolio-mobile-app body.settings-page .account-security-grid button {
    width: 46px !important;
    height: 28px !important;
    font-size: 9px !important;
  }

  html.magnetfolio-mobile-app body.settings-page .cloud-status-panel button {
    width: 50px !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-field {
    display: grid !important;
    grid-template-columns: 104px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 48px !important;
    padding: 8px 10px !important;
    border-radius: 12px !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-field span {
    margin: 0 !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-field input,
  html.magnetfolio-mobile-app body.settings-page .settings-field select {
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 10px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-actions.settings-actions-compact {
    gap: 6px !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-actions.settings-actions-compact button,
  html.magnetfolio-mobile-app body.settings-page .danger-cta {
    min-height: 32px !important;
    font-size: 10px !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-toggle-row {
    min-height: 46px !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-toggle-row input[type="checkbox"] {
    transform: scale(.86) !important;
    transform-origin: center !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-legal-links a,
  html.magnetfolio-mobile-app body.settings-page .settings-legal-links span {
    min-height: 30px !important;
    font-size: 10px !important;
  }
}

/* FINAL FIX 20260717-settings-hidden-security-v177: respect hidden auth
   controls after v176 button display overrides, and keep Security compact. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.settings-page [hidden] {
    display: none !important;
  }

  html.magnetfolio-mobile-app body.settings-page .account-security-grid {
    grid-template-columns: minmax(0, 1fr) repeat(2, 62px) !important;
    min-height: 0 !important;
    padding: 9px 10px !important;
    gap: 8px !important;
  }

  html.magnetfolio-mobile-app body.settings-page .account-security-grid > div {
    grid-column: 1 / -1 !important;
  }

  html.magnetfolio-mobile-app body.settings-page .account-security-grid button.secondary-cta {
    width: 62px !important;
    min-width: 0 !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    font-size: 9.5px !important;
    line-height: 1 !important;
  }

  html.magnetfolio-mobile-app body.settings-page .danger-cta {
    min-height: 32px !important;
    margin-top: 5px !important;
  }
}

/* FINAL FIX 20260717-settings-hidden-wins-v178: hidden must beat every
   Settings button display override. Confirmed by v37 phone QA. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.settings-page button[hidden],
  html.magnetfolio-mobile-app body.settings-page .account-security-grid button[hidden],
  html.magnetfolio-mobile-app body.settings-page .account-security-grid button.secondary-cta[hidden] {
    display: none !important;
  }
}


/* FINAL FIX 20260717-settings-polish-v179: phone QA approved v38 structure;
   finish Settings with custom switches, calmer headings, and cleaner Security. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.settings-page .settings-section-head h2 {
    font-size: 12px !important;
    letter-spacing: 0 !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-toggle-row input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    position: relative !important;
    width: 42px !important;
    height: 24px !important;
    min-width: 42px !important;
    border: 1px solid rgba(210, 167, 89, .42) !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, rgba(38, 20, 46, .96), rgba(78, 24, 36, .92)) !important;
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, .34), 0 8px 16px rgba(24, 10, 22, .2) !important;
    transform: none !important;
    cursor: pointer !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-toggle-row input[type="checkbox"]::after {
    content: "" !important;
    position: absolute !important;
    top: 2px !important;
    left: 2px !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255, 244, 215, .68) !important;
    background: linear-gradient(145deg, #fff5d0, #c9963f 58%, #6e4217) !important;
    box-shadow: 0 3px 7px rgba(0, 0, 0, .32) !important;
    transition: left .18s ease, box-shadow .18s ease !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-toggle-row input[type="checkbox"]:checked {
    border-color: rgba(246, 207, 122, .78) !important;
    background: linear-gradient(135deg, #4b1228, #7b2334 55%, #9b6a2d) !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-toggle-row input[type="checkbox"]:checked::after {
    left: 19px !important;
    box-shadow: 0 3px 9px rgba(246, 207, 122, .34) !important;
  }

  html.magnetfolio-mobile-app body.settings-page .account-security-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  html.magnetfolio-mobile-app body.settings-page .account-security-grid > div {
    grid-column: 1 / -1 !important;
    margin-bottom: 1px !important;
  }

  html.magnetfolio-mobile-app body.settings-page .account-security-grid button.secondary-cta {
    width: 100% !important;
    height: 34px !important;
    min-height: 34px !important;
    font-size: 10px !important;
  }

  html.magnetfolio-mobile-app body.settings-page .settings-support-row {
    min-height: 42px !important;
  }
}
/* FINAL FIX 20260720-collection-fullscreen-share-v180: v39 phone QA confirmed
   Collection fullscreen/share preview duplicated the title and left a tall dead
   panel below five magnets. Keep the source card intact; fix only the overlay. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-fullscreen-open.vault-fullscreen-collection-open .vault-fullscreen-preview.show .vault-fullscreen-shell.vault-fullscreen-collection {
    grid-template-rows: minmax(0, 1fr) auto !important;
    gap: 8px !important;
  }

  html.magnetfolio-mobile-app body.vault-fullscreen-open.vault-fullscreen-collection-open .vault-fullscreen-preview.show .vault-fullscreen-shell.vault-fullscreen-collection .vault-fullscreen-head {
    display: none !important;
  }

  html.magnetfolio-mobile-app body.vault-fullscreen-open.vault-fullscreen-collection-open .vault-fullscreen-preview.show .vault-fullscreen-shell.vault-fullscreen-collection .vault-fullscreen-stage {
    align-items: flex-start !important;
    justify-content: center !important;
    overflow-y: auto !important;
    padding: 0 !important;
  }

  html.magnetfolio-mobile-app body.vault-fullscreen-open.vault-fullscreen-collection-open .vault-fullscreen-preview.show .vault-fullscreen-shell.vault-fullscreen-collection .vault-fullscreen-card.vault-fullscreen-collection,
  html.magnetfolio-mobile-app body.vault-fullscreen-open.vault-fullscreen-collection-open .vault-fullscreen-preview.show .vault-fullscreen-shell.vault-fullscreen-collection .vault-fullscreen-card.passport-clean-collection {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: flex-start !important;
    overflow: visible !important;
  }

  html.magnetfolio-mobile-app body.vault-fullscreen-open.vault-fullscreen-collection-open .vault-fullscreen-preview.show .vault-fullscreen-shell.vault-fullscreen-collection .vault-fullscreen-card.vault-fullscreen-collection .passport-clean-collection-head,
  html.magnetfolio-mobile-app body.vault-fullscreen-open.vault-fullscreen-collection-open .vault-fullscreen-preview.show .vault-fullscreen-shell.vault-fullscreen-collection .vault-fullscreen-card.passport-clean-collection .passport-clean-collection-head {
    margin-bottom: 12px !important;
  }

  html.magnetfolio-mobile-app body.vault-fullscreen-open.vault-fullscreen-collection-open .vault-fullscreen-preview.show .vault-fullscreen-shell.vault-fullscreen-collection .vault-fullscreen-card.vault-fullscreen-collection .passport-clean-collection-grid,
  html.magnetfolio-mobile-app body.vault-fullscreen-open.vault-fullscreen-collection-open .vault-fullscreen-preview.show .vault-fullscreen-shell.vault-fullscreen-collection .vault-fullscreen-card.passport-clean-collection .passport-clean-collection-grid {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    align-content: start !important;
    padding: 18px 14px 20px !important;
    gap: 24px 18px !important;
  }
}
/* FINAL FIX 20260720-collection-fullscreen-autoheight-v181: v40 removed the
   duplicated Collection title; force the fullscreen card itself to shrink-wrap
   content instead of stretching to the preview stage height. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-fullscreen-open.vault-fullscreen-collection-open .vault-fullscreen-preview.show .vault-fullscreen-shell.vault-fullscreen-collection .vault-fullscreen-stage {
    align-items: flex-start !important;
  }

  html.magnetfolio-mobile-app body.vault-fullscreen-open.vault-fullscreen-collection-open .vault-fullscreen-preview.show .vault-fullscreen-shell.vault-fullscreen-collection .vault-fullscreen-card.vault-fullscreen-collection,
  html.magnetfolio-mobile-app body.vault-fullscreen-open.vault-fullscreen-collection-open .vault-fullscreen-preview.show .vault-fullscreen-shell.vault-fullscreen-collection .vault-fullscreen-card.passport-clean-collection {
    display: block !important;
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html.magnetfolio-mobile-app body.vault-fullscreen-open.vault-fullscreen-collection-open .vault-fullscreen-preview.show .vault-fullscreen-shell.vault-fullscreen-collection .vault-fullscreen-card.vault-fullscreen-collection .passport-clean-collection-grid,
  html.magnetfolio-mobile-app body.vault-fullscreen-open.vault-fullscreen-collection-open .vault-fullscreen-preview.show .vault-fullscreen-shell.vault-fullscreen-collection .vault-fullscreen-card.passport-clean-collection .passport-clean-collection-grid {
    flex: 0 0 auto !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
  }
}
/* FINAL FIX 20260720-my-magnet-wall-v182: approved product direction. Collection
   becomes My Magnet Wall: existing PNG magnets on one continuous mobile surface,
   actions outside the captured wall, no internal scroll, no Display Case chrome. */
@media (max-width: 760px) {
  html.magnetfolio-mobile-app body.vault-feature-page .my-magnet-wall-stage {
    display: block !important;
    width: 100% !important;
    margin: 18px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard.my-magnet-wall,
  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.my-magnet-wall,
  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.vault-fullscreen-collection {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 430px !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 14px 12px 22px !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
      linear-gradient(90deg, rgba(255,255,255,.045), transparent 14%, rgba(230,186,92,.045) 58%, transparent 92%),
      radial-gradient(circle at 18% 0%, rgba(231, 202, 128, .12), transparent 34%),
      radial-gradient(circle at 84% 4%, rgba(120, 86, 154, .13), transparent 32%),
      linear-gradient(160deg, #3b3031 0%, #221f24 42%, #10151c 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 238, 180, .12), inset 0 -34px 70px rgba(0,0,0,.26) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard.my-magnet-wall::before,
  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.my-magnet-wall::before,
  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.vault-fullscreen-collection::before {
    content: "MAGNETFOLIO" !important;
    position: absolute !important;
    right: 12px !important;
    bottom: 18px !important;
    color: rgba(255, 235, 176, .075) !important;
    font-size: 32px !important;
    font-weight: 950 !important;
    letter-spacing: .12em !important;
    transform: rotate(-90deg) translateX(22%) !important;
    transform-origin: right bottom !important;
    pointer-events: none !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard.my-magnet-wall .my-magnet-wall-head,
  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.my-magnet-wall .my-magnet-wall-head,
  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.vault-fullscreen-collection .passport-clean-collection-head {
    display: grid !important;
    gap: 4px !important;
    margin: 0 0 18px !important;
    padding: 0 2px 10px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(226, 186, 92, .20) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: left !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard.my-magnet-wall .my-magnet-wall-head span,
  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.my-magnet-wall .my-magnet-wall-head span,
  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.vault-fullscreen-collection .passport-clean-collection-head span {
    color: #e7bd57 !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard.my-magnet-wall .my-magnet-wall-head strong,
  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.my-magnet-wall .my-magnet-wall-head strong,
  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.vault-fullscreen-collection .passport-clean-collection-head strong {
    color: #fff4dc !important;
    font-size: 34px !important;
    line-height: .98 !important;
    letter-spacing: 0 !important;
    text-shadow: 0 3px 16px rgba(0,0,0,.48) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard.my-magnet-wall .my-magnet-wall-head small,
  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.my-magnet-wall .my-magnet-wall-head small,
  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.vault-fullscreen-collection .passport-clean-collection-head small {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: rgba(255, 232, 178, .88) !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard.my-magnet-wall .my-magnet-wall-grid,
  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.my-magnet-wall .my-magnet-wall-grid,
  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.vault-fullscreen-collection .passport-clean-collection-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-items: center !important;
    align-items: start !important;
    gap: 26px 22px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 14px 4px 24px !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard.my-magnet-wall .my-magnet-wall-tile,
  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.my-magnet-wall .my-magnet-wall-tile,
  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.vault-fullscreen-collection .passport-clean-collection-magnet {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: rotate(-1.2deg) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard.my-magnet-wall .my-magnet-wall-tile:nth-child(2n),
  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.my-magnet-wall .my-magnet-wall-tile:nth-child(2n),
  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.vault-fullscreen-collection .passport-clean-collection-magnet:nth-child(2n) {
    transform: rotate(1.35deg) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard.my-magnet-wall .my-magnet-wall-tile:nth-child(3n),
  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.my-magnet-wall .my-magnet-wall-tile:nth-child(3n),
  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.vault-fullscreen-collection .passport-clean-collection-magnet:nth-child(3n) {
    transform: rotate(.55deg) !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard.my-magnet-wall .my-magnet-wall-tile img,
  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.my-magnet-wall .my-magnet-wall-tile img,
  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.vault-fullscreen-collection .passport-clean-collection-magnet img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    filter: none !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page #vaultRoom #collectionShareCard.my-magnet-wall .my-magnet-wall-tile span,
  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.my-magnet-wall .my-magnet-wall-tile span,
  html.magnetfolio-mobile-app body.vault-fullscreen-collection-open .vault-fullscreen-stage .vault-fullscreen-card.vault-fullscreen-collection .passport-clean-collection-magnet span {
    display: none !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .my-magnet-wall-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 10px 0 0 !important;
    padding: 0 10px !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .my-magnet-wall-actions .collection-share-story-btn {
    grid-column: 1 / -1 !important;
  }

  html.magnetfolio-mobile-app body.vault-feature-page .my-magnet-wall-actions button {
    min-height: 36px !important;
    border-radius: 999px !important;
    font-size: 10px !important;
  }
}

/* FINAL FIX 20260720-my-magnet-wall-v184: installed Android WebView uses the
   body mobile class, so keep this EOF override after legacy collection rules. */
@media (max-width: 760px) {
  body.magnetfolio-mobile-app-body.vault-feature-page .my-magnet-wall-stage {
    display: block !important;
    width: 100% !important;
    margin: 18px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body.magnetfolio-mobile-app-body.vault-feature-page #vaultRoom #collectionShareCard.my-magnet-wall {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 430px !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 14px 12px 22px !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
      linear-gradient(90deg, rgba(255,255,255,.045), transparent 14%, rgba(230,186,92,.045) 58%, transparent 92%),
      radial-gradient(circle at 18% 0%, rgba(231, 202, 128, .12), transparent 34%),
      radial-gradient(circle at 84% 4%, rgba(120, 86, 154, .13), transparent 32%),
      linear-gradient(160deg, #3b3031 0%, #221f24 42%, #10151c 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 238, 180, .12), inset 0 -34px 70px rgba(0,0,0,.26) !important;
  }

  body.magnetfolio-mobile-app-body.vault-feature-page #vaultRoom #collectionShareCard.my-magnet-wall::before {
    content: "MAGNETFOLIO" !important;
    position: absolute !important;
    right: 12px !important;
    bottom: 18px !important;
    color: rgba(255, 235, 176, .075) !important;
    font-size: 32px !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
    transform: rotate(-90deg) translateX(22%) !important;
    transform-origin: right bottom !important;
    pointer-events: none !important;
  }

  body.magnetfolio-mobile-app-body.vault-feature-page #vaultRoom #collectionShareCard.my-magnet-wall .my-magnet-wall-head {
    display: grid !important;
    gap: 4px !important;
    margin: 0 0 18px !important;
    padding: 0 2px 10px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(226, 186, 92, .20) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: left !important;
  }

  body.magnetfolio-mobile-app-body.vault-feature-page #vaultRoom #collectionShareCard.my-magnet-wall .my-magnet-wall-head span {
    color: #e7bd57 !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
  }

  body.magnetfolio-mobile-app-body.vault-feature-page #vaultRoom #collectionShareCard.my-magnet-wall .my-magnet-wall-head strong {
    color: #fff4dc !important;
    font-size: 34px !important;
    line-height: .98 !important;
    letter-spacing: 0 !important;
    text-shadow: 0 3px 16px rgba(0,0,0,.48) !important;
  }

  body.magnetfolio-mobile-app-body.vault-feature-page #vaultRoom #collectionShareCard.my-magnet-wall .my-magnet-wall-head small {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: rgba(255, 232, 178, .88) !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
  }

  body.magnetfolio-mobile-app-body.vault-feature-page #vaultRoom #collectionShareCard.my-magnet-wall .my-magnet-wall-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-items: center !important;
    align-items: start !important;
    gap: 26px 22px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 14px 4px 24px !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body.magnetfolio-mobile-app-body.vault-feature-page #vaultRoom #collectionShareCard.my-magnet-wall .my-magnet-wall-tile {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: rotate(-1.2deg) !important;
  }

  body.magnetfolio-mobile-app-body.vault-feature-page #vaultRoom #collectionShareCard.my-magnet-wall .my-magnet-wall-tile:nth-child(2n) {
    transform: rotate(1.35deg) !important;
  }

  body.magnetfolio-mobile-app-body.vault-feature-page #vaultRoom #collectionShareCard.my-magnet-wall .my-magnet-wall-tile:nth-child(3n) {
    transform: rotate(.55deg) !important;
  }

  body.magnetfolio-mobile-app-body.vault-feature-page #vaultRoom #collectionShareCard.my-magnet-wall .my-magnet-wall-tile img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    filter: none !important;
  }

  body.magnetfolio-mobile-app-body.vault-feature-page #vaultRoom #collectionShareCard.my-magnet-wall .my-magnet-wall-tile span {
    display: none !important;
  }

  body.magnetfolio-mobile-app-body.vault-feature-page .my-magnet-wall-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 10px 0 0 !important;
    padding: 0 10px !important;
  }

  body.magnetfolio-mobile-app-body.vault-feature-page .my-magnet-wall-actions .collection-share-story-btn {
    grid-column: 1 / -1 !important;
  }

  body.magnetfolio-mobile-app-body.vault-feature-page .my-magnet-wall-actions button {
    min-height: 36px !important;
    border-radius: 999px !important;
    font-size: 10px !important;
  }
}

/* Android audit v72: centered brand mark; preserve Wall navigation. */
@media (max-width: 900px) {
  html.magnetfolio-mobile-app .app-bottom-nav.app-bottom-nav-compact.with-vault a.mark-tab > span,
  html.magnetfolio-mobile-app .app-bottom-nav.app-bottom-nav-compact.with-vault a.mark-tab:is(:hover,:focus,:active,.active) > span {
    width: 58px !important; height: 58px !important; min-width: 58px !important; min-height: 58px !important;
    border-radius: 50% !important; border: 1px solid rgba(241,198,96,.35) !important;
    background: #15121d !important; padding: 0 !important; transform: none !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    box-shadow: none !important; overflow: hidden !important;
  }
  html.magnetfolio-mobile-app .app-bottom-nav.app-bottom-nav-compact.with-vault a.mark-tab img.nav-mark-airplane {
    display: block !important; position: static !important; inset: auto !important; margin: 0 !important; flex-shrink: 0 !important; width: 44px !important; height: 44px !important;
    max-width: 44px !important; max-height: 44px !important; object-fit: contain !important;
    border: 0 !important; border-radius: 0 !important; transform: none !important; filter: none !important;
  }
}

/* Keep the brand button identical on every page and active state. */
@media (max-width:900px) {
 html.magnetfolio-mobile-app .app-bottom-nav.app-bottom-nav-compact.with-vault a.mark-tab,
 html.magnetfolio-mobile-app .app-bottom-nav.app-bottom-nav-compact.with-vault a.mark-tab:is(:hover,:focus,:active,.active) {
  position: relative !important; inset: auto !important; transform: none !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  width:58px !important; height:58px !important; min-height:58px !important;
  padding:0 !important; margin:0 !important; align-self:center !important;
 }
}

@media (max-width:900px) {
 html.magnetfolio-mobile-app body.magnetfolio-mobile-app-body .app-bottom-nav.app-bottom-nav-compact.with-vault {
  height:70px !important; min-height:70px !important; bottom:8px !important;
  padding:5px !important; grid-template-rows:58px !important; align-items:center !important; box-sizing:border-box !important;
 }
}

/* v76: warm white background gives the purple-and-gold mark clear contrast. */
@media(max-width:900px){
 html.magnetfolio-mobile-app .app-bottom-nav.app-bottom-nav-compact.with-vault a.mark-tab > span,
 html.magnetfolio-mobile-app .app-bottom-nav.app-bottom-nav-compact.with-vault a.mark-tab:is(:hover,:focus,:active,.active) > span {background:#fffaf0 !important; border-color:#d5ae54 !important;}
}

/* v76: location recommendations use the same cards as the main catalog. */
.nearby-discovery{margin:16px 0;padding:20px;border:1px solid rgba(241,198,96,.28);border-radius:22px;background:#11101a;}
.nearby-discovery h2{font-size:22px;margin:8px 0;color:#fff6de;}.nearby-discovery>p{font-size:13px;line-height:1.5;color:#b7b8cb;}
.nearby-location-actions{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0;}.nearby-location-actions button{min-height:44px;padding:10px 16px;}
.nearby-selectors{display:grid;grid-template-columns:1fr 1fr;gap:12px;}.nearby-selectors label{min-width:0;color:#f4d48a;font-size:12px;display:grid;gap:6px;}
.nearby-selectors select{width:100%;min-width:0;min-height:44px;border:1px solid #53505d;border-radius:12px;padding:8px;color:#fff;background:#1c1a27;}
.nearby-selectors select:disabled{opacity:.5;}.nearby-heading{color:#f4d48a;margin:20px 0 12px;font-size:19px;}.nearby-status,.nearby-empty{font-size:13px;line-height:1.5;color:#b7b8cb;}
.nearby-grid{margin-top:0!important;}.nearby-grid .wall-card-art{border:0;background:transparent;cursor:pointer;}.nearby-grid .tier-price{font-size:11px;font-weight:800;color:#f4d48a;}
@media(max-width:760px){html.magnetfolio-mobile-app .nearby-discovery{margin:12px 0;padding:14px;border-radius:18px;}}