/**
 * Dood Labs — mobile layout (375px+). Linked from key marketplace pages.
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  scrollbar-gutter: stable;
}

html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

body {
  width: 100%;
  font-size: 15px;
}

.hint,
.sub,
.k,
.nft-meta,
.by,
.disc-card .by {
  font-size: max(0.875rem, 14px);
}

/* Action rows */
.actions,
.disc-actions,
.form-actions,
.links-row,
.focus-actions,
.market-actions,
.market-grid .market-actions,
.chip-row,
.filter-bar,
.controlRow,
.topLine {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
}

@media (max-width: 480px) {
  .btn,
  .btn.secondary,
  .btn.danger,
  .btn-ghost,
  button.btn,
  a.btn {
    width: 100%;
    min-height: 44px;
    font-size: 14px;
    justify-content: center;
  }

  .lab-global-nav .btn-ghost,
  .lab-global-nav a.btn-ghost,
  .lab-global-nav button.btn-ghost,
  #addrPill,
  #navNotificationBell {
    width: auto;
    min-width: 44px;
  }

  .form-actions .btn,
  .form-actions .btn.secondary,
  .links-row .btn,
  .links-row a,
  .disc-actions .btn,
  .disc-actions a,
  .market-actions .btn {
    flex: 1 1 100%;
    min-width: 0;
  }
}

/* NFT / collection images */
img,
.cov,
.nft-hero-img,
.mediaHero img,
.tile .thumb img,
.listing-card img,
.focus-nft img,
.collection-cover,
.modal-item img,
.avatar {
  max-width: 100%;
}

.disc-card .cov,
.tile .thumb img,
.listing-card img,
.nft-flat img,
.sk-img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  height: auto;
}

.nft-hero-img {
  width: 100%;
  max-width: 100%;
  max-height: min(72vh, 520px);
  height: auto;
  object-fit: contain;
}

.mediaHero img {
  width: 100%;
  min-height: 200px;
  max-height: 56vh;
  object-fit: cover;
}

/* Price breakdown — stack on narrow screens */
@media (max-width: 600px) {
  .priceBox,
  .price-card,
  .detail-row,
  .kv {
    flex-direction: column;
    align-items: stretch;
  }

  .priceBox > * {
    width: 100%;
  }

  .price-card .line {
    width: 100%;
  }
}

/* Collection / NFT grids */
@media (max-width: 600px) {
  .grid,
  .disc-grid,
  .skeletonGrid,
  .listings-grid,
  .nft-flat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .collection-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 380px) {
  .grid,
  .disc-grid,
  .skeletonGrid,
  .listings-grid,
  .nft-flat-grid {
    grid-template-columns: 1fr !important;
  }

  .collection-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Xaman signing overlay */
#pageXamanOverlay {
  box-sizing: border-box;
  padding: max(12px, env(safe-area-inset-top, 0px)) 12px max(12px, env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#pageXamanOverlay .page-xaman-panel {
  width: min(100%, 360px);
  max-height: min(92dvh, 100%);
  overflow-y: auto;
  margin: auto;
  box-sizing: border-box;
}

#pageXamanQrImg {
  width: min(80vw, 280px) !important;
  height: auto !important;
  max-width: 80vw;
  aspect-ratio: 1;
  object-fit: contain;
}

#pageXamanOverlay .page-xaman-cancel {
  min-height: 44px;
  width: 100%;
  max-width: 280px;
}

/* Desktop nav links — centered, no horizontal scroll */
@media (min-width: 901px) {
  .lab-nav-center .lab-nav-desktop-links,
  .lab-nav-desktop-links {
    overflow-x: visible !important;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 100%;
  }
}

.appbar .row {
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.appbar .brand {
  flex: 1 1 auto;
  min-width: 0;
}

.wrap,
main.wrap {
  padding-left: max(12px, env(safe-area-inset-left, 0px));
  padding-right: max(12px, env(safe-area-inset-right, 0px));
}

/* Create mint */
body.create-page #createMain .form {
  max-width: 100%;
}

body.create-page #btnMintLaunch,
body.create-page #createWalletGateConnect {
  min-height: 44px;
}

body.create-page #mintLaunchHint {
  font-size: 0.9rem;
  line-height: 1.4;
  word-break: break-word;
}

body.create-page #previewMediaWrap img,
body.create-page #previewMediaImg,
body.create-page #mediaPreviewImg {
  max-width: 100%;
  height: auto;
}

body.create-page details#advancedMint summary {
  min-height: 44px;
  display: flex;
  align-items: center;
}

body.create-page #mintXummQrHost {
  max-width: 100%;
}

@media (max-width: 600px) {
  body.create-page #createMain .form {
    grid-template-columns: 1fr !important;
  }

  body.create-page .mint-step-card,
  body.create-page .card {
    padding: 12px;
  }
}

/* Profile / feed cards */
@media (max-width: 600px) {
  .profile-grid,
  .feed-card,
  .vault-section {
    max-width: 100%;
  }

  .feed-card .feed-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .feed-card .feed-actions .btn {
    width: 100%;
  }
}

/* Notification dropdown */
.lab-notif-panel,
#navNotificationPanel,
#navNotifDropdown {
  max-width: min(calc(100% - 24px), 360px);
  max-height: min(70dvh, 480px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Touch + safe-area baseline */
button,
a.btn,
.btn,
.btn-ghost,
.btn-nav-connect,
input,
select,
textarea,
summary,
[role="button"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Modals / overlays */
.modal,
.modal-panel,
.modal-content,
.drawer-panel,
.vault-modal,
.collection-modal,
[role="dialog"] {
  max-width: min(calc(100% - 16px), 720px);
  max-height: min(92dvh, 100%);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.modal-backdrop,
.overlay-backdrop {
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
    env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}

/* Tablet / small desktop — keep centered page column; do not force full-bleed .wrap */
@media (max-width: 900px) {
  .wrap,
  main.wrap,
  .page-wrap,
  .content-wrap {
    box-sizing: border-box;
    min-width: 0;
  }

  .hero,
  .hero-row,
  .split,
  .two-col,
  .detail-layout {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .filter-bar,
  .chip-row,
  .tabs,
  .admin-tabs {
    flex-wrap: wrap;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  table,
  .table-wrap {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .vault-grid,
  .profile-header,
  .feed-layout,
  .explore-layout {
    grid-template-columns: 1fr !important;
  }
}

/* Phone */
@media (max-width: 640px) {
  body {
    font-size: 15px;
  }

  .btn,
  .btn.secondary,
  .btn.danger,
  .btn-ghost,
  button.btn,
  a.btn,
  .market-actions .btn,
  .vault-actions .btn,
  .feed-actions .btn {
    min-height: 44px;
  }

  .modal,
  .modal-panel,
  .vault-modal {
    width: 100%;
    margin: 0;
    border-radius: 12px 12px 0 0;
  }

  .nft-detail,
  .collection-header,
  .profile-banner {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-dood-artists .tabs,
  .admin-dood-artists .tab-btn {
    min-height: 44px;
  }

  #navNotifDropdown {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    top: calc(56px + env(safe-area-inset-top, 0px)) !important;
    width: auto !important;
    min-width: 0 !important;
    z-index: var(--lab-z-nav-dropdown) !important;
  }
}

/* Small phone */
@media (max-width: 420px) {
  .grid,
  .disc-grid,
  .skeletonGrid,
  .listings-grid,
  .nft-flat-grid,
  .collection-grid,
  .vault-collections-grid {
    grid-template-columns: 1fr !important;
  }

  .lab-global-nav .btn-ghost {
    padding: 8px 10px;
    font-size: 0.82rem;
  }

  h1,
  .page-title {
    font-size: clamp(1.25rem, 5vw, 1.6rem);
    word-break: break-word;
  }
}

/* Admin control center */
@media (max-width: 640px) {
  body.admin-page .wrap,
  .admin-page .card {
    padding: 12px;
  }

  .admin-page .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .admin-page .result-item .row {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 420px) {
  .admin-page .stat-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Version diagnostic page */
body.version-page {
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}

body.version-page .card {
  max-width: 100%;
  box-sizing: border-box;
}

body.version-page button {
  width: 100%;
}

/* Mobile wallet connect fallback */
.lab-wallet-connect-fallback[hidden] {
  display: none !important;
}

.lab-wallet-connect-fallback.open {
  align-items: flex-end;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}

.lab-wallet-connect-fallback-panel {
  position: relative;
  z-index: 1;
  width: min(520px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  background: #0a1210;
  border: 1px solid #00ffcc55;
  border-radius: 16px 16px 12px 12px;
  padding: 16px;
  color: #eafffb;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.55);
  box-sizing: border-box;
  pointer-events: auto;
}

.lab-wallet-connect-fallback-panel strong {
  display: block;
  color: #00ff99;
  font-size: 1.05rem;
  margin-bottom: 8px;
}

.lab-wallet-connect-fallback-panel p {
  margin: 0 0 8px;
  line-height: 1.45;
  font-size: 0.92rem;
}

.lab-wallet-connect-fallback-hint {
  opacity: 0.78;
  font-size: 0.85rem !important;
}

.lab-wallet-connect-fallback-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.lab-wallet-connect-fallback-actions .btn {
  width: 100%;
  min-height: 44px;
  justify-content: center;
  text-align: center;
  text-decoration: none;
}

/* Visible mobile wallet debug panel (?debugMobile=1 or labDebugMobile=1) */
.lab-mobile-debug-panel {
  position: fixed;
  left: 8px;
  right: 8px;
  bottom: max(8px, env(safe-area-inset-bottom));
  z-index: calc(var(--lab-z-toast) + 50);
  max-height: min(52dvh, 420px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: rgba(6, 13, 11, 0.96);
  border: 1px solid #00ffcc66;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 11px;
  color: #eafffb;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.5);
}

.lab-mobile-debug-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  color: #00ff99;
}

.lab-mobile-debug-head button {
  background: transparent;
  border: 0;
  color: #eafffb;
  font-size: 1.2rem;
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
}

.lab-mobile-debug-meta {
  margin-bottom: 8px;
  line-height: 1.4;
  opacity: 0.9;
  word-break: break-all;
}

.lab-mobile-debug-meta code,
.lab-mobile-debug-row code {
  font-family: ui-monospace, monospace;
  font-size: 10px;
  color: #b9c7c4;
}

.lab-mobile-debug-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid #1a2a26;
}

.lab-mobile-debug-row.done span:first-child {
  color: #00ff99;
}

.lab-mobile-debug-error {
  margin-top: 8px;
  padding: 8px;
  border-radius: 8px;
  background: #2a1014;
  border: 1px solid #ff6677;
  color: #ffb4bc;
  word-break: break-word;
}

/* Marketplace action panels (NFT page, vault focus, explore) */
[data-na-offers-panel] {
  max-height: min(70vh, 480px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

[data-na-root] .na-act,
.na-wrap .na-act {
  min-height: 44px;
}

[data-na-inline-form] {
  max-width: 100%;
}

#pageXamanOverlay .page-xaman-panel {
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
}

/* ============================================================
   XRPL OS — mobile experience polish (nav, wallet, NFT, feed)
   ============================================================ */

html {
  -webkit-text-size-adjust: 100%;
}

html.lab-modal-open,
html.wallet-modal-open,
body.lab-modal-open,
body.wallet-modal-open {
  overflow: hidden !important;
  touch-action: none;
  overscroll-behavior: none;
  height: 100%;
}

/* Full-viewport wallet modal layer (portal on document.body) */
.lab-wallet-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.78);
  z-index: 0;
  pointer-events: auto;
}

@supports (height: 100dvh) {
  .lab-wallet-modal-backdrop {
    min-height: 100dvh;
  }
}

/* Wallet connect explanation (user gesture only — never on load) */
.lab-wallet-explain,
.lab-wallet-connect-fallback {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  margin: 0;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px))
    max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  box-sizing: border-box;
  z-index: var(--lab-z-wallet-modal);
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: transparent;
  pointer-events: none;
}

@supports (height: 100dvh) {
  .lab-wallet-explain,
  .lab-wallet-connect-fallback {
    min-height: 100dvh;
  }
}

.lab-wallet-explain.open,
.lab-wallet-connect-fallback.open {
  display: flex;
  pointer-events: auto;
}

.lab-wallet-explain-panel {
  position: relative;
  z-index: 1;
  width: min(520px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  background: #0d1a16;
  border: 1px solid #00ffcc55;
  border-radius: 16px;
  color: #eafffb;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  pointer-events: auto;
}

.lab-wallet-explain-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 18px 16px 12px;
}

.lab-wallet-explain-panel h2 {
  margin: 0 0 10px;
  font-size: 1.12rem;
  color: #00ff99;
}

.lab-wallet-explain-panel p {
  margin: 0 0 10px;
  font-size: 0.92rem;
  line-height: 1.5;
  opacity: 0.94;
}

.lab-wallet-explain-safe {
  font-size: 0.85rem !important;
  color: #9f9;
  border-left: 3px solid #14ff9e;
  padding-left: 10px;
  margin-bottom: 0 !important;
}

.lab-wallet-explain-actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px max(16px, env(safe-area-inset-bottom, 0px));
  border-top: 1px solid #00ffcc33;
  background: #0a1512;
}

.lab-wallet-explain-actions .btn {
  width: 100%;
  min-height: 48px;
}

@media (max-width: 640px) {
  .lab-wallet-explain.open {
    align-items: flex-end;
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
  }

  .lab-wallet-explain-panel {
    width: min(520px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    border-radius: 16px 16px 12px 12px;
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 12px);
  }

  .lab-wallet-connect-fallback-panel {
    width: min(520px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
  }
}

/* Z-index stack: content normal · header 1000 · mobile nav 9000/9100 · wallet 9500+ · toast 9600 */
:root {
  --lab-z-content: 1;
  --lab-z-header: 1000;
  --lab-z-nav-overlay: 9000;
  --lab-z-nav-drawer: 9100;
  --lab-z-nav-dropdown: 9150;
  --lab-z-wallet-modal: 9500;
  --lab-z-toast: 9600;
}

.lab-beta-banner {
  position: relative;
  z-index: calc(var(--lab-z-header) - 100);
}

#labGlobalHeader.appbar,
header.appbar.lab-shell-host,
#labGlobalHeader,
header.appbar.lab-shell-host {
  z-index: var(--lab-z-header) !important;
}

/* Global footer clearance */
body:has(#labGlobalFooter) main.wrap,
body:has(#labGlobalFooter) main {
  padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
}

/* Toasts — corner stack only; host must never block page clicks */
#toastHost {
  position: fixed;
  top: auto;
  left: auto;
  right: max(12px, env(safe-area-inset-right, 0px));
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  width: max-content;
  max-width: min(360px, calc(100% - 24px));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  z-index: var(--lab-z-toast);
  pointer-events: none;
}

#toastHost:empty {
  pointer-events: none;
}

#toastHost .toast,
#toastHost .toast-lab,
#toastHost [role="alert"],
#toastHost button,
#toastHost a {
  pointer-events: auto;
}

@media (max-width: 900px) {
  body:has(.nft-sticky-buy) #toastHost {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }
}

/* NFT page — media stage + marketplace actions */
@media (max-width: 900px) {
  .nft-layout {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .nft-col-left {
    order: 1;
  }

  .nft-col-right {
    order: 2;
  }

  .nft-media-stage {
    max-width: 100%;
    margin: 0 auto;
  }

  .nft-media-view {
    max-height: min(52vh, 480px);
  }

  .nft-media-body video,
  .nft-media-cinematic video {
    max-height: min(48vh, 420px);
    width: 100%;
    object-fit: contain;
  }

  .nft-media-pdf-frame {
    height: min(42vh, 360px);
  }

  .nft-media-album {
    grid-template-columns: 1fr !important;
  }

  .nft-actions-host,
  [data-na-root] {
    position: relative;
    z-index: 2;
    margin-top: 12px;
  }

  .nft-sticky-buy {
    display: block;
    z-index: 9500;
    padding: 10px max(14px, env(safe-area-inset-right, 0px))
      max(12px, env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px));
    backdrop-filter: blur(8px);
  }

  body:has(.nft-sticky-buy) {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }

  .nft-head-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .nft-tab-btn {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
  }
}

/* Marketplace modals / offer panels */
@media (max-width: 640px) {
  [data-na-offers-panel],
  [data-na-inline-form],
  .na-wrap .na-panel {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .na-wrap .na-act[disabled],
  [data-na-act][disabled] {
    opacity: 0.5;
    pointer-events: none;
  }

  [data-na-act][data-lab-touch-lock="1"] {
    opacity: 0.65;
    pointer-events: none;
  }
}

/* Create / mint — keyboard-friendly */
@media (max-width: 640px) {
  body.create-page input,
  body.create-page textarea,
  body.create-page select {
    scroll-margin-bottom: 120px;
    font-size: 16px;
  }

  body.create-page #previewMediaWrap video {
    max-height: min(40vh, 320px);
  }

  body.create-page #primaryPreviewVideo {
    max-height: min(40vh, 320px) !important;
  }
}

/* Feed + discovery — lightweight touch scroll */
@media (max-width: 680px) {
  .feed-curiosity-track,
  .disc-editorial-track {
    scroll-padding-inline: 12px;
    overscroll-behavior-x: contain;
  }

  .feed-card--collectible:hover,
  .disc-card:hover,
  .disc-editorial-card:hover {
    transform: none;
  }

  .disc-live-pulse {
    animation: none;
    opacity: 0.85;
  }
}

/* Report issue + beta modals */
@media (max-width: 640px) {
  .lab-report-modal {
    align-items: flex-end;
    padding: 0;
  }

  .lab-report-dialog {
    width: 100%;
    max-height: min(88dvh, 100%);
    border-radius: 16px 16px 0 0;
    padding: max(16px, env(safe-area-inset-top, 0px)) 16px
      max(16px, env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
  }

  .lab-report-actions {
    flex-direction: column-reverse;
  }

  .lab-report-actions .btn {
    width: 100%;
    min-height: 48px;
  }
}

/* Shell pages — legacy inline .appbar/.nav must not override shared lab-nav.js chrome */
body[data-lab-shell="1"] #labGlobalHeader.appbar,
body[data-lab-shell="1"] header#labGlobalHeader.lab-shell-host {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  z-index: var(--lab-z-header) !important;
  overflow-x: clip !important;
  overflow-y: visible !important;
  background: rgba(10, 10, 10, 0.92) !important;
  backdrop-filter: blur(6px);
  border-bottom: 1px solid #00ffcc33;
  box-sizing: border-box !important;
}

body[data-lab-shell="1"] #labGlobalHeader .row.lab-header-inner,
body[data-lab-shell="1"] #labGlobalHeader .lab-header-inner {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center;
  width: 100%;
  max-width: min(1100px, 100%);
  min-width: 0;
  box-sizing: border-box;
  overflow: visible !important;
}

body[data-lab-shell="1"] #labGlobalHeader .lab-nav-center {
  display: flex !important;
  justify-content: center;
  align-items: center;
  min-width: 0;
  overflow: visible !important;
}

body[data-lab-shell="1"] #labGlobalHeader .lab-nav-desktop-links {
  justify-content: center;
  overflow-x: visible !important;
  flex-wrap: wrap;
}

body[data-lab-shell="1"] #labGlobalHeader .lab-header-actions {
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
  min-width: 0;
}

/* Wallet connect slot — always visible (desktop right column, mobile actions row) */
body[data-lab-shell="1"] #labGlobalHeader .lab-wallet-action-slot,
body[data-lab-shell="1"] #labGlobalHeader #labNavAuth,
body[data-lab-shell="1"] #labGlobalHeader .lab-header-actions .lab-wallet-action-slot {
  display: inline-flex !important;
  flex-shrink: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  z-index: calc(var(--lab-z-header) + 8) !important;
  margin-left: 0 !important;
}

body[data-lab-shell="1"] #labGlobalHeader .lab-wallet-connect-btn,
body[data-lab-shell="1"] #labGlobalHeader #btnConnectHeader,
body[data-lab-shell="1"] #labGlobalHeader .btn-nav-connect {
  display: inline-flex !important;
  visibility: visible !important;
}

@media (max-width: 900px) {
  body[data-lab-shell="1"] #labGlobalHeader .row.lab-header-inner,
  body[data-lab-shell="1"] #labGlobalHeader .lab-header-inner {
    grid-template-columns: 1fr auto !important;
  }

  body[data-lab-shell="1"] #labGlobalHeader .lab-nav-center {
    display: none !important;
  }

  body[data-lab-shell="1"] #labGlobalHeader .lab-nav-hamburger {
    display: inline-flex !important;
  }
}

@media (min-width: 901px) {
  body[data-lab-shell="1"] #labGlobalHeader .lab-nav-hamburger {
    display: none !important;
  }

  body[data-lab-shell="1"] #labGlobalHeader .lab-nav-center {
    display: flex !important;
  }

  body[data-lab-shell="1"] #labGlobalHeader .brand {
    max-width: none;
  }
}

body[data-lab-shell="1"] main,
body[data-lab-shell="1"] main.wrap,
body[data-lab-shell="1"] .wrap {
  position: relative;
  z-index: 0;
}

body[data-lab-shell="1"] .mobile-nav-overlay.lab-nav-drawer-backdrop.open,
body[data-lab-shell="1"] .lab-nav-drawer-backdrop.mobile-nav-overlay.open {
  z-index: var(--lab-z-nav-overlay) !important;
  background: rgba(0, 0, 0, 0.72) !important;
}

body[data-lab-shell="1"] .mobile-nav-drawer.lab-nav-drawer.open,
body[data-lab-shell="1"] .lab-nav-drawer.mobile-nav-drawer.open {
  z-index: var(--lab-z-nav-drawer) !important;
  background: #0a0a0a !important;
  color: #eafffb;
}

/* Mobile nav open — dark theme, no white flash, drawer above page content */
body.mobile-nav-open,
body:has(.lab-nav-drawer.open),
body:has(.mobile-nav-drawer.open) {
  overflow: hidden !important;
  overflow-x: hidden !important;
  width: 100%;
  background: #060d0b !important;
  color: #eafffb;
}

html:has(body.mobile-nav-open) {
  background: #060d0b !important;
}

.mobile-nav-overlay.lab-nav-drawer-backdrop,
.lab-nav-drawer-backdrop.mobile-nav-overlay {
  z-index: var(--lab-z-nav-overlay) !important;
  background: rgba(0, 0, 0, 0.72) !important;
}

.mobile-nav-drawer.lab-nav-drawer,
.lab-nav-drawer.mobile-nav-drawer {
  z-index: var(--lab-z-nav-drawer) !important;
  background: #0a0a0a !important;
  color: #eafffb;
}

/* Global overlay click safety — closed layers must not capture pointer events */
.lab-nav-drawer:not(.open),
.lab-nav-drawer-backdrop:not(.open),
.lab-wallet-explain:not(.open),
.lab-report-modal[hidden],
.lab-wallet-connect-fallback:not(.open),
.lab-wallet-connect-fallback[hidden] {
  pointer-events: none !important;
  visibility: hidden !important;
}

.lab-nav-drawer:not(.open),
.lab-nav-drawer-backdrop:not(.open) {
  display: none !important;
}

.lab-nav-drawer:not(.open) *,
.lab-nav-drawer-backdrop:not(.open) *,
.lab-wallet-explain:not(.open) *,
.lab-report-modal[hidden],
.lab-report-modal[hidden] * {
  pointer-events: none !important;
}

.lab-nav-drawer.open,
.lab-nav-drawer-backdrop.open,
.lab-wallet-explain.open,
.lab-report-modal:not([hidden]),
.lab-report-modal[aria-hidden="false"] {
  visibility: visible;
}

.lab-nav-drawer.open {
  display: flex !important;
  pointer-events: auto;
}

.lab-nav-drawer-backdrop.open {
  display: block !important;
  pointer-events: auto;
}

.lab-wallet-explain.open,
.lab-wallet-connect-fallback.open,
.lab-report-modal:not([hidden]) {
  pointer-events: auto;
}

#pageXamanOverlay.open,
#pageXamanOverlay[data-open="true"] {
  pointer-events: auto;
  visibility: visible;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .lab-nav-drawer {
    transition: none;
  }

  .feed-card--collectible,
  .disc-card,
  .disc-editorial-card {
    transition: none;
  }

  .nav-status-dot {
    animation: none !important;
  }
}

/* --- LAB viewport containment (overflow lock + centered content column) --- */
:root {
  --lab-content-max: 1100px;
}

body.create-page {
  --lab-content-max: 1180px;
}

body.feed-page {
  --lab-content-max: 1080px;
}

body[data-lab-shell="1"] {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body[data-lab-shell="1"] main.wrap,
body[data-lab-shell="1"] .wrap,
body[data-lab-shell="1"] .page-wrap,
body[data-lab-shell="1"] .content-wrap,
body[data-lab-shell="1"] .asu-page {
  width: 100%;
  max-width: min(var(--lab-content-max, 1100px), 100%);
  margin-left: auto;
  margin-right: auto;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}

body[data-lab-shell="1"] main {
  min-width: 0;
  box-sizing: border-box;
}

body[data-lab-shell="1"] #labGlobalHeader.appbar,
body[data-lab-shell="1"] header#labGlobalHeader.lab-shell-host {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: clip !important;
  overflow-y: visible !important;
}

body[data-lab-shell="1"] #labGlobalHeader .row.lab-header-inner,
body[data-lab-shell="1"] #labGlobalHeader .lab-header-inner {
  width: 100%;
  max-width: min(1100px, 100%);
  min-width: 0;
  box-sizing: border-box;
  gap: 8px;
}

body[data-lab-shell="1"] #labGlobalHeader .brand {
  min-width: 0;
  overflow: hidden;
}

body[data-lab-shell="1"] #labGlobalHeader .brand > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-lab-shell="1"] #labGlobalHeader .lab-nav-center {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow-x: visible !important;
  overflow-y: visible !important;
}

body[data-lab-shell="1"] #labGlobalHeader .lab-wallet-action-slot,
body[data-lab-shell="1"] #labGlobalHeader #labNavAuth {
  min-width: 0 !important;
  max-width: 100%;
}

body[data-lab-shell="1"] #labGlobalHeader .lab-wallet-connect-btn,
body[data-lab-shell="1"] #labGlobalHeader .btn-nav-connect,
body[data-lab-shell="1"] #labGlobalHeader #btnConnectHeader {
  max-width: 100%;
  flex-shrink: 0;
}

body[data-lab-shell="1"] #labGlobalHeader .lab-nav-hamburger {
  flex-shrink: 0;
  max-width: 100%;
}

@media (max-width: 900px) {
  body[data-lab-shell="1"] #labGlobalHeader .row.lab-header-inner,
  body[data-lab-shell="1"] #labGlobalHeader .lab-header-inner {
    padding-left: max(10px, env(safe-area-inset-left, 0px));
    padding-right: max(10px, env(safe-area-inset-right, 0px));
  }

  body[data-lab-shell="1"] #labGlobalHeader .lab-wallet-connect-btn,
  body[data-lab-shell="1"] #labGlobalHeader .btn-nav-connect {
    padding: 8px 10px;
    font-size: 0.82rem;
  }
}

@media (max-width: 400px) {
  body[data-lab-shell="1"] #labGlobalHeader .lab-nav-desktop-links {
    gap: 6px;
  }

  body[data-lab-shell="1"] #labGlobalHeader .lab-nav-drawer a {
    padding: 10px 12px;
    margin-bottom: 6px;
  }

  body[data-lab-shell="1"] #labGlobalHeader .nav-label-full {
    display: none;
  }

  body[data-lab-shell="1"] #labGlobalHeader .nav-label-short {
    display: inline;
  }
}

@media (max-width: 380px) {
  body[data-lab-shell="1"] #labGlobalHeader .lab-nav-hamburger {
    padding: 8px 10px;
    font-size: 0.8rem;
  }

  body[data-lab-shell="1"] #labGlobalHeader .lab-mobile-shop-chip {
    padding: 8px 10px;
    font-size: 0.82rem;
  }

  body[data-lab-shell="1"] #labGlobalHeader .lab-wallet-connect-btn,
  body[data-lab-shell="1"] #labGlobalHeader .btn-nav-connect {
    padding: 8px;
    font-size: 0.78rem;
  }
}

body[data-lab-shell="1"] #labGlobalHeader .lab-mobile-shop-chip {
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-height: 44px;
  min-width: 44px;
  touch-action: manipulation;
}

@media (max-width: 900px) {
  body[data-lab-shell="1"] #labGlobalHeader .lab-mobile-shop-chip {
    display: inline-flex !important;
  }

  body[data-lab-shell="1"] #labGlobalHeader .lab-header-actions {
    gap: 6px;
  }
}

body.mobile-nav-open,
body:has(.lab-nav-drawer.open),
body:has(.mobile-nav-drawer.open) {
  width: 100%;
  max-width: 100%;
  left: 0;
  right: 0;
}

.mobile-nav-overlay.lab-nav-drawer-backdrop,
.lab-nav-drawer-backdrop.mobile-nav-overlay,
.mobile-nav-drawer.lab-nav-drawer,
.lab-nav-drawer.mobile-nav-drawer {
  max-width: 100%;
  box-sizing: border-box;
}

/* Homepage / hub cards — single column, no min-width blowout */
@media (max-width: 640px) {
  .mp-grid,
  #homeStatsChips,
  .mp-hero-grid {
    grid-template-columns: 1fr !important;
    min-width: 0;
  }

  .mp-cta-row,
  .mp-section-head,
  .controlRow,
  .topLine,
  .filter-bar {
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
  }

  .pill,
  .status-chip {
    white-space: normal;
    flex-wrap: wrap;
    max-width: 100%;
    min-width: 0;
  }

  .hub-card,
  .mp-collection-card,
  .mp-artist-card {
    min-width: 0;
    max-width: 100%;
  }
}

body.feed-page #feedAppContent,
body.feed-page #feedWalletGate {
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* Debug overflow outlines (enable via ?debugOverflow=1) */
body.debug-mobile-overflow * {
  outline: 1px solid rgba(255, 48, 48, 0.45);
}

body.debug-mobile-overflow #labGlobalHeader,
body.debug-mobile-overflow #labGlobalHeader * {
  outline-color: rgba(255, 196, 0, 0.65);
}