@media (max-width: 900px) {

  /* =========================
     GLEE MOBILE CONTRACT v0.1
  ========================= */
  .glee-app-version-status {
    display: none !important;
    pointer-events: none !important;
    position: static !important;
  }

  :root{
    --m-screen-ref: 402px;
    --m-content-gutter: 10px;
    --m-content-max: 382px;
    --m-content-w: min(calc(100vw - (var(--m-content-gutter) * 2)), var(--m-content-max));
    --m-content-edge: max(var(--m-content-gutter), calc((100vw - var(--m-content-max)) / 2));
    --m-block-gap: 22px;
    --m-section-gap: 22px;
    --m-page-head-gap: 22px;
    --m-page-start-gap: 28px;
    --m-detail-start-gap: 18px;
    --m-feed-start-gap: 28px;
    --m-overlay-switcher-content-gap: 10px;
    --m-card-gap: 22px;
    --m-card-radius: var(--glee-radius-card);
    --m-card-inner-radius: var(--glee-radius-card-inner);
    --m-card-pad: 20px;
    --m-media-card-left-inset: 22px;
    --m-media-card-right-inset: 16px;
    --m-media-card-bottom-inset: 16px;

    --m-nav-gutter: clamp(14px, 3.61vw, 24px);
    --m-nav-max: 420px;
    --m-nav-w: min(calc(100vw - 29px), 373px);
    --m-nav-h: 65px;
    --mnav-pad: clamp(4px, calc(var(--m-nav-w) * 0.0134), 5px);
    --mnav-gap: clamp(3px, calc(var(--m-nav-w) * 0.0107), 4px);
    --m-nav-bottom: calc(10px + env(safe-area-inset-bottom));
    --m-bottom-content-pad: calc(110px + env(safe-area-inset-bottom));
    --m-fab-bottom: calc(83px + env(safe-area-inset-bottom));

    --m-page-title-fs: 20px;
    --m-page-title-lh: 24px;
    --m-page-title-fw: var(--fw-semibold);
    --m-page-title-ls: -0.04em;
    --m-section-title-fs: 17px;
    --m-section-title-lh: 22px;
    --m-section-title-fw: var(--fw-semibold);
    --m-section-title-ls: -0.02em;
    --m-section-title-color: var(--text-100);

    --m-body-fs: var(--glee-body-fs);
    --m-body-lh: var(--glee-body-lh);
    --m-body-fw: var(--glee-body-fw);
    --m-body-ls: var(--glee-body-ls);

    --m-small-fs: var(--glee-small-fs);
    --m-small-lh: var(--glee-small-lh);
    --m-small-fw: var(--glee-small-fw);
    --m-small-ls: var(--glee-small-ls);

  /* -------------------------
     Mobile typography tokens
  ------------------------- */

--m-ui-glass-bg: var(--glass-ui-bg);
--m-ui-glass-border: var(--glass-ui-stroke);
--m-ui-glass-blur: 16px;
--m-active-pill-bg: var(--switcher-active-bg);
--m-active-pill-color: var(--switcher-active-text);
--m-inactive-pill-color: var(--switcher-text);
    --m-switcher-sticky-offset: clamp(10px, 2.49vw, 12px);
    --m-switcher-sticky-top: calc(env(safe-area-inset-top) + var(--m-switcher-sticky-offset));

    --ui-switcher-w: 250px;
    --ui-switcher-h: 45px;
    --ui-switcher-pad: 3px;
    --ui-switcher-gap: 2px;
    --ui-switcher-tab-w: 121px;
    --ui-switcher-tab-h: 39px;
    --ui-switcher-radius: 999px;

    --feed-switcher-sticky-top: var(--m-switcher-sticky-top);

    --m-topbar-safe-top: calc(15px + env(safe-area-inset-top));
    --m-topbar-logo-fs: 35px;
    --m-topbar-logo-lh: 35px;
    --m-topbar-logo-fw: 800;
    --m-topbar-logo-ls: -0.06em;
    --m-topbar-height: calc(var(--m-topbar-safe-top) + var(--m-topbar-logo-lh));
    --m-topbar-action-size: 34px;
    --m-topbar-action-top-default: calc(10px + env(safe-area-inset-top));
    --m-topbar-action-top-with-switcher: calc(var(--m-switcher-sticky-top) + 5.5px);
    --m-topbar-action-center-correction: 0.5px;
    --m-topbar-action-top-final: calc(var(--m-topbar-safe-top) + var(--m-topbar-action-center-correction));
    --m-topbar-action-inline-inset: 16px;

    --m-fw-regular: 400;
    --m-fw-medium: 500;
    --m-fw-semibold: 600;

    --m-fs-h1: 20px;
    --m-lh-h1: 24px;

    --m-fs-h2: 16px;
    --m-lh-h2: 22px;

    --m-fs-body: 14px;
    --m-lh-body: 20px;

    --m-fs-meta: 13px;
    --m-lh-meta: 18px;

    --m-fs-caption: 12px;
    --m-lh-caption: 16px;

    --m-fs-nav: 11px;
    --m-lh-nav: 14px;

    --m-fs-button: var(--btn-blue-font);
    --m-lh-button: var(--btn-blue-lh);

    --m-text-primary: var(--text-100);
    --m-text-secondary: var(--text-70);

    --m-muted-color: var(--text-rgb);
    --m-muted-opacity: .70;

        /* tile label (under icon) - tighter than body */
    --m-fs-tile: 13px;
    --m-lh-tile: 16px;

    /* Squircle mask (Corner Smoothing ~60) */
    --m-icon-radius: 15px;
    --m-squircle-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%3E%3Cpath%20fill%3D%27black%27%20d%3D%27M100.000%2050.000%20L99.879%2065.654%20L99.517%2072.085%20L98.912%2076.939%20L98.059%2080.931%20L96.955%2084.329%20L95.592%2087.268%20L93.961%2089.824%20L92.050%2092.040%20L89.824%2093.961%20L87.268%2095.592%20L84.329%2096.955%20L80.931%2098.059%20L76.939%2098.912%20L72.085%2099.517%20L65.654%2099.879%20L50.000%20100.000%20L34.346%2099.879%20L27.915%2099.517%20L23.061%2098.912%20L19.069%2098.059%20L15.671%2096.955%20L12.732%2095.592%20L10.176%2093.961%20L7.960%2092.050%20L6.039%2089.824%20L4.408%2087.268%20L3.045%2084.329%20L1.941%2080.931%20L1.088%2076.939%20L0.483%2072.085%20L0.121%2065.654%20L0.000%2050.000%20L0.121%2034.346%20L0.483%2027.915%20L1.088%2023.061%20L1.941%2019.069%20L3.045%2015.671%20L4.408%2012.732%20L6.039%2010.176%20L7.960%207.960%20L10.176%206.039%20L12.732%204.408%20L15.671%203.045%20L19.069%201.941%20L23.061%201.088%20L27.915%200.483%20L34.346%200.121%20L50.000%200.000%20L65.654%200.121%20L72.085%200.483%20L76.939%201.088%20L80.931%201.941%20L84.329%203.045%20L87.268%204.408%20L89.824%206.039%20L92.050%207.960%20L93.961%2010.176%20L95.592%2012.732%20L96.955%2015.671%20L98.059%2019.069%20L98.912%2023.061%20L99.517%2027.915%20L99.879%2034.346%20Z%27%2F%3E%3C%2Fsvg%3E");

        /* Profile (mobile) */
    --m-profile-ava: 100px;
    --m-profile-ava-radius: 999px;

    /* Mobile Profile Header component contract */
    --m-profile-header-top: var(--m-detail-start-gap);
    --m-profile-header-bottom-gap: var(--m-block-gap);
    --m-profile-header-pad-bottom: 10px;

    --m-profile-header-banner-inset: 10px;
    --m-profile-header-avatar-overlap: -50px;

    --m-profile-gap-level-name: 20px;
    --m-profile-gap-name-username: 10px;
    --m-profile-gap-username-bio: 20px;
    --m-profile-gap-bio-stats: 30px;
    --m-profile-gap-stats-actions: 30px;

    --m-profile-main-copy-pad-x: 20px;
    --m-profile-bio-max-w: 310px;
    --m-profile-stats-max-w: 330px;
    --m-profile-action-gap: 8px;

    --m-featured-creator-avatar-size: 50px;
    --m-featured-creators-gap: 45px;
    --m-featured-creator-name-max-ch: 10ch;

    --m-gap-1: 10px;
    --m-gap-2: 12px;
    --m-gap-3: 16px;
  }

  /* =========================
     GLEE MOBILE CONTRACT CLASSES v0.1
  ========================= */
  .glee-page-shell {
    width: var(--m-content-w);
    max-width: var(--m-content-w);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }

  body.app .glee-page-shell {
    padding-top: var(--m-page-start-gap);
  }

  .glee-page-head {
    margin-bottom: var(--m-page-head-gap);
  }

  .glee-page-stack {
    gap: var(--m-block-gap);
  }

  .glee-page-title {
    font-size: var(--m-page-title-fs);
    line-height: var(--m-page-title-lh);
    font-weight: var(--m-page-title-fw);
    letter-spacing: var(--m-page-title-ls);
  }

  .glee-page-subtitle {
    display: none;
  }

  .glee-section-title {
    font-size: var(--m-section-title-fs);
    line-height: var(--m-section-title-lh);
    font-weight: var(--m-section-title-fw);
    letter-spacing: var(--m-section-title-ls);
  }

  .glee-body,
  .glee-body-muted {
    font-size: var(--m-body-fs);
    line-height: var(--m-body-lh);
    font-weight: var(--m-body-fw);
    letter-spacing: var(--m-body-ls);
  }

  .glee-card,
  .glee-media-card {
    border-radius: var(--m-card-radius);
  }

  .settings-section-title,
  .hub-section-title,
  .leaderboard-section-title,
  .events-section-title {
    font-family: var(--glee-font);
    color: var(--glee-text-100);
    font-size: var(--m-section-title-fs);
    line-height: var(--m-section-title-lh);
    font-weight: var(--m-section-title-fw);
    letter-spacing: var(--m-section-title-ls);
  }

/* Mobile pages own scrolling and sticky positioning. */
body.app-home,
body.app-profile,
body.app-leaderboard{
  min-width: 0 !important;
  height: auto !important;
  min-height: 100% !important;
  overflow: visible !important;
}

html{
  background: var(--bg);

  /* Mobile: enable overscroll (bounce / glow where supported) */
  overscroll-behavior-y: auto;
  overscroll-behavior-x: none;
}

  body.app{
    display: block !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    gap: 0 !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    margin: 0 !important;
  }

/* Make the scroll root truly fill the viewport on mobile */
/* Home uses an internal scroll container (SPA). Keep it in-flow. */
.home-scroll{
  position: relative;
  min-height: 100%;
  height: auto;
  overflow: visible;
  background: transparent;
}

html, body{
  height: auto;
  min-height: 100%;
  overflow-x: hidden;
  background: transparent;
}

html, body{
  height: 100%;
  background: var(--bg);

  /* Mobile: enable overscroll on the main scroll root */
  overscroll-behavior-y: auto;
  overscroll-behavior-x: none;
}

  /* body is a desktop grid in style.css, it centers SPA root vertically */
  body{
    display: block !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    gap: 0 !important;
    align-items: stretch !important;
    justify-items: stretch !important;
  }

/* The SPA root owns the mobile viewport height. */
#spaRoot{
  min-height: var(--vvh, 100svh) !important;
}

.spa-root{
  min-height: var(--vvh, 100svh) !important;
}

  /* -------------------------
     Base layout
  ------------------------- */
.app-shell,
body.app-collection-details .app-shell,
body.app-signals.is-signals-analyze .app-shell{
  max-width: none;

  padding-left: max(var(--m-content-gutter), env(safe-area-inset-left));
  padding-right: max(var(--m-content-gutter), env(safe-area-inset-right));
  /* Keep safe-area spacing off the scroll root to avoid iOS edge artifacts. */
  padding-top: 0;
  padding-bottom: 0;

  overflow-x: visible;

  /* IMPORTANT: anchor absolute Home topbar */
  position: relative;
}

/* keep horizontal clipping on the scroll container instead (safe) */
body.app-home .home-scroll{
  overflow-x: visible;
}

/* Home uses a scroll container. Leave space for bottom nav */
.home-scroll{
  /* minimal space so last card isn't hidden behind bottom nav + FAB */
  padding-bottom: var(--m-bottom-content-pad);

  /* Keep sticky elements inside the mobile scroll container. */
  -webkit-overflow-scrolling: touch;
  position: relative;
  padding-top: 0;
}

/* Home: do not push whole screen down */
body.app-home .home-scroll{
  padding-top: 0 !important;
  background: var(--bg);
}

/* Post page: keep the same bottom space as other pages (nav + FAB) */
body.app-post-details .home-scroll{
  padding-bottom: var(--m-bottom-content-pad);
}

  /* Release desktop sizing constraints on mobile. */
  .app.app-home{
    min-width: 0 !important;
    height: auto !important;
  }

body.app-post-details .post-comments{
  width: 100% !important;
  max-width: var(--m-content-w) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;

  padding-bottom: 0;
}

/* comments layout: prevent horizontal clipping */
body.app-post-details .post-comment-item{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

body.app-post-details .post-comment-item > div:last-child{
  min-width: 0;      /* KEY for wrapping inside flex */
  flex: 1 1 auto;
}

  /* -------------------------
     Mobile topbar support bits: icons, unread dot, desktop block hiding.
  ------------------------- */

  .mobile-topbar-action-icon{
    display: block;
    background: currentColor;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
  }

  .mobile-topbar-action-icon--settings{
    -webkit-mask-image: url("../assets/icons/settings.svg");
    mask-image: url("../assets/icons/settings.svg");
  }

  .mobile-topbar-action-icon--notifications{
    -webkit-mask-image: url("../assets/icons/notifications.svg");
    mask-image: url("../assets/icons/notifications.svg");
  }

  body.app .mobile-topbar-action .nav-unread-dot{
    position: absolute;
    top: 5px;
    right: 5px;
    width: 7px;
    height: 7px;
    box-sizing: border-box;
    border: 0;
    border-radius: 50%;
    background: var(--brand);
    display: none;
  }

  body.app .mobile-topbar-action[data-nav="notifications"].has-unread .mobile-topbar-action-icon{
    background: #1E56FA;
  }

  .mobile-switcher-shell{
    position: sticky !important;
    top: var(--m-switcher-sticky-top) !important;
    z-index: 70 !important;
    width: var(--m-content-w) !important;
    height: var(--ui-switcher-h) !important;
    margin: var(--m-overlay-switcher-content-gap) auto calc((var(--ui-switcher-h) + var(--m-overlay-switcher-content-gap)) * -1) !important;
    transform: none !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
  }

  /* hide desktop blocks on mobile */
  .topbar-right{
    display: none !important;
  }
  .topbar-center{
    display: none !important;
  }

  /* -------------------------
     Grid (one column)
  ------------------------- */
.home-grid{
  grid-template-columns: 1fr;
  gap: 18px;

  /* mobile: remove desktop top spacing that creates the "white block" */
  padding-top: 0 !important;
}

  .home-sidebar{
    display: none !important;
  }

    /* -------------------------
     Post page mobile (sticky creator + correct media)
  ------------------------- */
  body.app-post-details .home-grid{
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  body.app-post-details .page-center{
    order: 2;
  }

  /* Remove desktop centering of feed */
  .home-feed{
    justify-content: stretch !important;
  }
  .home-center{
    max-width: none !important;
  }
  .feed-grid{
    max-width: none !important;
  }

/* Featured Creators (mobile) */
.creators-list{
  display: flex;
  flex-wrap: nowrap;

  gap: clamp(8px, 3vw, 12px);

  width: 100%;
  overflow: hidden;          /* no scroll */
  padding-bottom: 0;

  justify-content: space-between;
}

body.app-home .creators-row{
  margin-bottom: 30px !important;
  padding-bottom: 0 !important;
}

body.app-home #feedGrid.feed-grid{
  margin-top: 0 !important;
}

/* Home switcher stays in normal flow until it reaches the shared sticky threshold. */
body.app-home .home-tabs{
  margin: 0 auto var(--home-feed-gap);
  transform: none;
}

/* Featured Creators */
.creators-title{
  font-size: var(--m-fs-h2);
  line-height: var(--m-lh-h2);
  font-weight: var(--m-fw-semibold);
}

body:not(.app-home):not(.app-profile) .post-card{
  position: relative;
  width: 100%;
  height: auto;
  display: block;
  border-radius: 28px;
  clip-path: inset(0 round 28px);
  overflow: hidden;
  background: transparent;
  box-shadow: none;
}

body:not(.app-home):not(.app-profile) .post-card .post-media{
  width: 100%;
  height: auto;
  overflow: hidden;
  background: transparent;
}

  body:not(.app-home):not(.app-profile) .post-card .post-media-img,
  body:not(.app-home):not(.app-profile) .post-card .post-media img,
  body:not(.app-home):not(.app-profile) .post-card .post-media video{
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
  }

body:not(.app-home):not(.app-profile) .post-card .post-card-tag {
  top: 18px;
  left: 18px;
  height: var(--app-content-tag-h);
  box-sizing: border-box;
  padding: 0 14px;
  gap: var(--app-content-tag-gap);
  font-size: var(--app-content-tag-fs) !important;
  line-height: var(--app-content-tag-lh) !important;
  font-weight: var(--app-content-tag-fw) !important;
  letter-spacing: var(--app-content-tag-ls) !important;
  color: var(--app-content-tag-color) !important;
}

  body:not(.app-home):not(.app-profile) .post-card .post-card-tag-dot {
    width: var(--app-content-tag-dot);
    height: var(--app-content-tag-dot);
    flex-basis: var(--app-content-tag-dot);
  }

body:not(.app-home):not(.app-profile) .post-card .post-card-blur,
body:not(.app-home):not(.app-profile) .post-card .post-card-blur::before,
body:not(.app-home):not(.app-profile) .post-card .post-card-blur::after,
body:not(.app-home):not(.app-profile) .post-card .post-card-blur-layer {
  display: none !important;
  content: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: transparent !important;
}

body:not(.app-home):not(.app-profile) .post-card .post-meta{
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 2;
  height: auto;
  box-sizing: border-box;
  padding: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: transparent;
}

body:not(.app-home):not(.app-profile) .post-card .post-author{
  width: fit-content;
  max-width: min(100%, 240px);
  height: 44px;
  box-sizing: border-box;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 0 12px 0 6px;
}

  body:not(.app-home):not(.app-profile) .post-card .post-title{
    margin: 0 0 10px;
  }

    /* Post meta typography (mobile) */
  body:not(.app-home):not(.app-profile) .post-card .post-meta,
  body:not(.app-home):not(.app-profile) .post-card .post-meta *{
    color: var(--text-inverse) !important;
  }

body:not(.app-home):not(.app-profile) .post-card .post-meta .post-title{
  font-size: var(--fs-post-card-title) !important;
  line-height: var(--lh-post-card-title) !important;
  font-weight: var(--fw-post-card-title) !important;
  letter-spacing: var(--ls-post-card-title) !important;
  color: var(--text-inverse) !important;
  margin: 0;
}

body:not(.app-home):not(.app-profile) .post-card .post-meta .post-author,
body:not(.app-home):not(.app-profile) .post-card .post-meta .post-author *{
  font-size: 15px !important;
  line-height: 22px !important;
  font-weight: var(--fw-medium) !important;
  letter-spacing: var(--ls-medium) !important;
  color: var(--text-inverse) !important;
}

body:not(.app-home):not(.app-profile) .post-card .post-author-name{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:not(.app-home):not(.app-profile) .post-card .post-author-ava{
  width: 32px !important;
  height: 32px !important;
  border-radius: 999px;
  flex: 0 0 32px;
  box-sizing: border-box;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  display: block;
}

  body:not(.app-home):not(.app-profile) .post-card .verified-badge {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
  }

  body:not(.app-home):not(.app-profile) .post-card .post-author-verified {
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 22px !important;
  }

  body:not(.app-home):not(.app-profile) .post-card .post-details-btn {
    display: none !important;
  }

.social-post-feed > .post-card {
  padding: 20px;
  gap: 24px;
  border-radius: 28px;
  overflow: visible;
  clip-path: none;
}

.social-post-feed .post-card-header {
  gap: 12px;
}

.social-post-feed .post-card-author {
  max-width: calc(100% - 72px);
}

.social-post-feed .post-card-media {
  gap: 8px;
  max-width: 100%;
  border-radius: 22px;
}

.social-post-feed .post-card-media.is-fit .post-card-media-item,
.social-post-feed .post-card-media.is-fill .post-card-media-item {
  max-width: 100%;
}

.social-post-feed .post-card-actions .post-more-menu {
  right: 0;
  max-width: min(200px, calc(100vw - 40px));
}

    /* -------------------------
     Post page (mobile layout like Figma)
  ------------------------- */

  /* Keep Post Details in the mobile content column. */
  body.app-post-details .home-grid{
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  body.app-post-details .page-center{
    order: 2;
  }

  /* Hide "Back to Home" on mobile */
  body.app-post-details .post-back{
    display: none !important;
  }

  /* Make the right card look like a plain section (not a sidebar card) */
  body.app-post-details .post-side{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  /* Hide "More" section on mobile (not in Figma) */
  body.app-post-details .post-side-divider{
    display: none !important;
  }
  body.app-post-details .post-side-divider + .post-side-title{
    display: none !important;
  }
  body.app-post-details #postMoreGrid{
    display: none !important;
  }

  /* Creator block spacing + sizes */
body.app-post-details .post-side-title{
  margin: 0 0 18px 0;
  font-size: var(--m-fs-h2);
  line-height: var(--m-lh-h2);
  font-weight: var(--m-fw-semibold);
  color: var(--m-text-secondary);
  letter-spacing: -0.02em;
}

/* Post Details uses the mobile content corridor. */
body.app-post-details .post-details-center{
  width: 100% !important;
  max-width: var(--m-content-w) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  overflow-x: hidden;
}

body.app-post-details .post-divider{
  width: 100% !important;
  max-width: var(--m-content-w) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

body.app-post-details .post-creator-name{
  font-size: var(--m-fs-h2);
  line-height: var(--m-lh-h2);
  font-weight: var(--m-fw-semibold);
  color: var(--m-text-secondary);
  letter-spacing: -0.02em;
}

body.app-post-details .post-creator-handle{
  margin-top: 2px;
  font-size: var(--m-fs-meta);
  line-height: var(--m-lh-meta);
  font-weight: var(--m-fw-regular);
  color: rgba(var(--text-rgb), var(--m-muted-opacity));
}

body.app-post-details .post-creator-bio{
  margin-top: 12px;
  font-size: var(--m-fs-body);
  line-height: var(--m-lh-body);
  font-weight: var(--m-fw-medium);
  color: rgba(var(--text-rgb), var(--m-muted-opacity));
}

  body.app-post-details .post-creator-actions{
    margin-top: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
  }

body.app-post-details .post-follow-btn{
  width: var(--btn-blue-w);
  height: var(--btn-blue-h);
  min-width: var(--btn-blue-min);
  box-sizing: border-box;
  padding: var(--btn-blue-pad);
  border-radius: var(--btn-blue-radius);
  font-size: var(--btn-blue-font);
  line-height: var(--btn-blue-lh);
  font-weight: var(--btn-blue-weight);
  letter-spacing: var(--btn-blue-ls);
}

body.app-post-details .post-view-profile{
  font-size: var(--m-fs-body);
  line-height: var(--m-lh-body);
  font-weight: var(--m-fw-medium);
}

  /* Center column should become full width */
  body.app-post-details .post-details-center{
    width: 100% !important;
  }

    body.app-post-details .page-center{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.app-post-details .post-details-center{
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Title + desc */
body.app-post-details .post-title{
  width: 100% !important;
  margin: 18px 0 10px;
  font-size: var(--glee-title-s-fs, 20px);
  line-height: var(--glee-title-s-lh, 25px);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--glee-title-s-ls, -0.02em);
  color: var(--text-100);
}

body.app-post-details .post-culture-tag{
  margin: 0 0 16px 0;
  flex-wrap: wrap;
}

body.app-post-details .post-culture-tag__chip{
  min-height: 28px;
  padding: 0 12px;
}

body.app-post-details .post-desc{
  width: 100% !important;
  margin: 0 0 34px;
  font-size: 15px;
  line-height: 22px;
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-medium);
  color: var(--text-100);
}

  /* Keep Post Details actions and comments inside the mobile corridor. */
body.app-post-details .post-actions{
  width: 100% !important;
  font-size: var(--m-fs-meta) !important;
  line-height: var(--m-lh-meta);
}

/* Post Details uses the shared 20px Home footer icon contract. */
body.app-post-details .post-actions-left .post-action[data-action="like"] .post-ico{
  width: 20px !important;
  height: 20px !important;
}

/* Post Details (mobile): simplify actions row */
body.app-post-details .post-action[data-action="comment"],
body.app-post-details .post-action[data-action="save"],
body.app-post-details .post-actions-right .post-action[aria-label="Share"]{
  display: none !important;
}

/* Remove divider between actions and comments */
body.app-post-details .post-divider{
  display: none !important;
}

/* DISCUSSION: bigger but lighter */
body.app-post-details .post-discussion{
  margin-top: 34px;
}

body.app-post-details .post-section-title{
  margin-top: 0;
  margin-bottom: 12px;

  font-size: 14px;
  line-height: 27px;
  font-weight: var(--fw-medium);

  color: var(--m-text-secondary);
}
/* Comment input: shared pill style */
body.app-post-details .post-comment-form{
  align-items: center;
  gap: 12px;
}

body.app-post-details .post-comment-input{
  background: #EBEBEB !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;

  padding: 0 18px !important;
  height: 44px !important;
}

body.app-post-details .post-comment-input::placeholder{
  color: rgba(var(--text-rgb), 0.50) !important;
}

body.app-post-details .post-comment-input{
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-regular);
}

/* Allow the comment text column to shrink without horizontal overflow. */
body.app-post-details .post-comment-form{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;

  display: flex;
  align-items: center;
  gap: 10px;
}

/* allow input to shrink inside flex row */
body.app-post-details .post-comment-input{
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  width: auto; /* important: don't force 100% inside flex */
}

body.app-post-details .post-comment-send{
  flex: 0 0 auto;
}

body.app-post-details .post-comment-input::placeholder{
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: var(--fw-regular);
}

body.app-post-details .post-comment{
  font-size: var(--m-fs-body) !important;
  line-height: var(--m-lh-body);
}

body.app-post-details .post-comment-text{
  font-size: 15px !important;
  line-height: 22px !important;
  font-weight: var(--fw-medium) !important;
  letter-spacing: var(--ls-medium) !important;
  color: var(--text-100) !important;
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

body.app-post-details .post-comment-item > div:last-child{
  min-width: 0;
}

body.app-post-details .post-comment-author{
  font-size: var(--m-fs-body) !important;
  line-height: var(--m-lh-body);
  font-weight: var(--m-fw-medium);
  color: var(--brand) !important;
}

body.app-post-details .post-comment-handle{
  display: none !important;
  font-size: var(--m-fs-caption) !important;
  line-height: var(--m-lh-caption);
}

  /* -------------------------
     Bottom nav (Figma 1:1)
     Bar: ~373 H65 at 402px viewport
     Icons: 18px
     Active pill: adaptive grid cell, ~69x55 at 402px
  ------------------------- */

.mobile-bottom-nav {
  position: fixed;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  bottom: var(--m-nav-bottom);
  z-index: 2000;

  width: var(--m-nav-w);
  max-width: var(--m-nav-max);
  margin: 0;

  height: var(--m-nav-h);
  box-sizing: border-box;
  border-radius: 100px;

  border: 0;
background: var(--glass-ui-bg);

-webkit-backdrop-filter: var(--glass-ui-filter);
backdrop-filter: var(--glass-ui-filter);

box-shadow: var(--switcher-glass-shadow);

  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: var(--mnav-gap);
  align-items: stretch;

  padding: var(--mnav-pad);
}

/* Animated active pill (single indicator) */
.mobile-bottom-nav{
  position: fixed;
  --mnav-indicator-x: 0px; /* updated by JS */
  --mnav-indicator-w: 0px; /* updated by JS */
}

html.is-kbd .mobile-bottom-nav {
  display: none;
}

.mobile-bottom-nav .mnav-indicator{
  position: absolute;
  top: var(--mnav-pad);
  bottom: var(--mnav-pad);
  left: 0;

  height: auto;
  width: var(--mnav-indicator-w, 0px);

  border-radius: 999px;
  background: var(--switcher-active-bg);

  transform: translate3d(var(--mnav-indicator-x, 0px), 0, 0);
  transition: transform 220ms cubic-bezier(0.2, 0.9, 0.2, 1),
              opacity 160ms ease;

  will-change: transform;
  pointer-events: none;
  z-index: 0;
}

.mobile-bottom-nav .mnav-indicator.is-hidden{
  opacity: 0;
}

  .mobile-bottom-nav .mnav-item{
    position: relative;
    width: 100%;
    height: calc(var(--m-nav-h) - (var(--mnav-pad) * 2));
    min-width: 0;
    box-sizing: border-box;
    border-radius: 999px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;

    text-decoration: none;
    color: var(--switcher-text);
   font-weight: var(--m-fw-medium);
   font-size: var(--m-fs-nav);
   line-height: var(--m-lh-nav);
   padding: 0;
   margin: 0;

   -webkit-tap-highlight-color: transparent;
   outline: none;
   user-select: none;
   -webkit-user-select: none;
  }

  .mobile-bottom-nav .mnav-item:focus,
.mobile-bottom-nav .mnav-item:focus-visible{
  outline: none;
}

.mobile-bottom-nav .mnav-item:active{
  background: transparent;
}

.mobile-bottom-nav .mnav-item .nav-ico{
  width: 18px;
  height: 18px;

  /* for mask-icon approach */
  background-color: currentColor;

  /* common for mask icons */
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

  .mobile-bottom-nav .nav-ico-feed {
    -webkit-mask-image: url("../assets/icons/feed-icon.svg");
    mask-image: url("../assets/icons/feed-icon.svg");
  }

  .mobile-bottom-nav .nav-ico-hub {
    -webkit-mask-image: url("../assets/icons/hub-icon.svg");
    mask-image: url("../assets/icons/hub-icon.svg");
  }

  .mobile-bottom-nav .nav-ico-signals {
    -webkit-mask-image: url("../assets/icons/signals-icon.svg");
    mask-image: url("../assets/icons/signals-icon.svg");
  }

  .mobile-bottom-nav .mnav-item:hover,
  .mobile-bottom-nav .mnav-item:focus,
  .mobile-bottom-nav .mnav-item:focus-visible,
  .mobile-bottom-nav .mnav-item:active {
    color: var(--switcher-text);
  }

  .mobile-bottom-nav .mnav-item.is-active{
    color: var(--switcher-active-text);
  }

  .mobile-bottom-nav .mnav-item.is-active:hover,
  .mobile-bottom-nav .mnav-item.is-active:focus,
  .mobile-bottom-nav .mnav-item.is-active:focus-visible,
  .mobile-bottom-nav .mnav-item.is-active:active {
    color: var(--switcher-active-text);
  }

  .mobile-bottom-nav .mnav-item.is-active .nav-ico{
  background-color: currentColor;
  filter: none;
}

  .mobile-bottom-nav .mnav-item .nav-ico,
  .mobile-bottom-nav .mnav-item span{
    position: relative;
    z-index: 2;
  }

  .mobile-bottom-nav .mnav-item.has-unread .nav-ico{
    filter: none;
  }
#postModal .cp-submit{
  width: 100%;
  font-weight: var(--m-fw-medium);
  font-size: var(--m-fs-button);
  line-height: var(--m-lh-button);
}

  /* -------------------------
     Create Post modal (mobile)
  ------------------------- */

  /* Hide bottom nav + FAB + left sidebar POST while modal open */
  body.modal-open .mobile-bottom-nav,
  body.modal-open .mobile-fab,
  body.modal-open #postBtn{
    display: none !important;
  }

  /* Make modal scrollable on mobile */
  #postModal.modal.is-open{
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    overflow-x: hidden;

    padding: 24px max(var(--m-content-gutter), env(safe-area-inset-left)) var(--m-bottom-content-pad) max(var(--m-content-gutter), env(safe-area-inset-right));
    box-sizing: border-box;
  }

  /* Narrow panel */
  #postModal .modal-panel{
    width: 100%;
    max-width: 420px;
    height: auto;
    max-height: none;
  }

  /* Modal box */
  #postModal .cp-modal{
    width: 100%;
    height: auto;
    padding: 56px 20px 20px;
    box-sizing: border-box;

  font-size: var(--m-fs-body);
  line-height: var(--m-lh-body);
  }

  /* Close button: own space above header row */
#postModal .cp-close{
  top: 16px;
  right: 20px;

  width: 25px;
  height: 25px;

  border-radius: 999px;
  background: #F8FAFC;
}

  /* Hide "Back to Home" */
  #postModal .cp-back{
    display: none !important;
  }

  /* Stack layout */
  #postModal .cp-content{
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  #postModal .cp-left,
  #postModal .cp-right{
    width: 100%;
  }

  /* Head row: "Media Assets" + counter */
#postModal .cp-left-title,
#postModal .cp-empty-title,
#postModal .cp-label{
  font-size: var(--m-fs-h2);
  line-height: var(--m-lh-h2);
  font-weight: var(--m-fw-semibold);
}

#postModal .cp-count,
#postModal .cp-empty-sub{
  font-size: var(--m-fs-body);
  line-height: var(--m-lh-body);
  font-weight: var(--m-fw-medium);
}

  /* Keep upload area square and responsive */
#postModal .cp-media{
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;

  background: #F8FAFC;
  border-radius: 24px;
  box-shadow: var(--tile-shadow);
  overflow: hidden;
}

#postModal .cp-media.has-files{
  background: transparent;
  box-shadow: none;
  overflow: visible;
  aspect-ratio: auto;
}

#postModal .cp-left-head{
  padding-right: 56px;
  box-sizing: border-box;
}

  #postModal .cp-dropzone{
    width: 100%;
    height: 100%;
  }

  /* Keep 3x3 grid, make tiles responsive */
  #postModal .cp-grid{
    width: 100%;
    grid-template-columns: repeat(3, 1fr);
  }

    /* Add tile (brand color) */
#postModal .cp-add{
  background: #F8FAFC;
  border-radius: 20px;

  color: var(--brand);
  font-weight: var(--m-fw-medium);
}

#postModal .cp-add-plus{
  font-size: var(--m-fs-h1);
  line-height: var(--m-lh-h1);
  font-weight: var(--m-fw-regular);
  color: var(--brand);
}

#postModal .cp-add div:last-child{
  font-size: var(--m-fs-meta);
  line-height: var(--m-lh-meta);
  font-weight: var(--m-fw-regular);
  margin-top: 1px;
  color: var(--brand);
}

  #postModal .cp-tile{
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  /* Recommended text */
  #postModal .cp-help{
    width: 100%;
    max-width: 100%;
    margin-top: 14px;
    padding: 0 6px;
    box-sizing: border-box;

    font-size: var(--m-fs-caption);
    font-weight: var(--m-fw-medium);
    line-height: var(--m-lh-caption);
    text-align: center;

    white-space: normal;
    word-break: break-word;
  }

#postModal .cp-input,
#postModal .cp-textarea{
  font-size: var(--m-fs-body);
  line-height: var(--m-lh-body);
  font-weight: var(--m-fw-medium);
}

#postModal .create-post-tag-options{
  gap: 8px;
  align-items: center;
}

#postModal .create-post-tag-chip{
  height: 34px;
  padding: 0 13px 0 10px;
  font-size: var(--m-fs-meta);
  gap: 7px;
  min-width: 0;
}

#postModal .create-post-tag-icon{
  width: 16px;
  height: 16px;
  flex-basis: 16px;
}

#postModal .create-post-tag-error{
  font-size: var(--m-fs-caption);
  line-height: var(--m-lh-caption);
}

  /* Button full width + correct weight */
#postModal .cp-post{
  width: 100%;
  height: var(--btn-blue-h);
  box-sizing: border-box;
  padding: var(--btn-blue-pad);
  font-size: var(--btn-blue-font);
  line-height: var(--btn-blue-lh);
  font-weight: var(--btn-blue-weight);
  letter-spacing: var(--btn-blue-ls);
}

/* iOS: prevent zoom on focus (font-size must be >= 16px) */
@media (max-width: 520px){
  #postModal .cp-input,
  #postModal .cp-textarea{
    font-size: 16px !important;
    line-height: 22px !important;
  }

  #postModal .cp-input::placeholder,
  #postModal .cp-textarea::placeholder{
    font-size: 16px !important;
    line-height: 22px !important;
  }
}

  /* -------------------------
     Floating + button
  ------------------------- */
  .mobile-fab,
  .mobile-create-post-fab{
  position: fixed;

  /* Anchor to the right edge of the adaptive bottom nav pill. */
  left: auto;
  transform: none;
  margin-left: 0;

  right: calc((100vw - var(--m-nav-w)) / 2);
  bottom: calc(var(--m-nav-bottom) + var(--m-nav-h) + 12px);

    width: 64px;
    height: 64px;

    border-radius: 999px;
    border: 0;
    background: var(--glass-ui-bg);
    color: var(--text-100);
    -webkit-backdrop-filter: var(--glass-ui-filter);
    backdrop-filter: var(--glass-ui-filter);

    display: grid;
    place-items: center;

    z-index: 2100;
    box-shadow: var(--switcher-glass-shadow);
  }

  body.app-home:not(.modal-open) .mobile-create-post-fab {
    display: grid !important;
  }

  body.modal-open .mobile-create-post-fab {
    display: none !important;
  }

  .mobile-fab svg,
  .mobile-create-post-fab svg{
    width: 24px;
    height: 24px;
    display: block;
  }

    /* -------------------------
     Community (mobile) - RESET (Figma hi-res)
  ------------------------- */

body.app-community .page-center{
  width: 100%;
}

body.app-community .community-wrap{
  padding-bottom: var(--m-bottom-content-pad);
  gap: 0;
}

body.app-community .community-hero{
  position: relative;
  width: 100% !important;
  height: var(--profile-mobile-banner-h);
  border-radius: var(--m-card-radius);
  overflow: hidden;
}

body.app-community .community-hero-media{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transform: scale(1.015);
  transform-origin: center;
  border-radius: inherit;
  z-index: 0;
}

body.app-community .community-hero::after{
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 1;
  pointer-events: none;
  background: var(--community-hero-gradient);
}

body.app-community .community-hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  padding: 14px var(--m-media-card-right-inset) var(--m-card-pad) 14px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--btn-blue-w);
  grid-template-rows: auto 1fr var(--btn-blue-h);
  column-gap: 12px;
}

body.app-community .community-hero-copy{
  display: contents;
}

body.app-community .community-pill{
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  height: var(--app-content-tag-h);
  margin: 0;
  padding: 0 var(--app-content-tag-pad-x);
  display: inline-flex;
  align-items: center;
  gap: var(--app-content-tag-gap);
  border-radius: 999px;
  font-size: var(--app-content-tag-fs);
  line-height: var(--app-content-tag-lh);
  font-weight: var(--app-content-tag-fw);
  letter-spacing: var(--app-content-tag-ls);
}

body.app-community .community-pill-dot{
  width: var(--app-content-tag-dot);
  height: var(--app-content-tag-dot);
  flex: 0 0 var(--app-content-tag-dot);
}

body.app-community .community-hero-title{
  position: static;
  grid-column: 1;
  grid-row: 3;
  align-self: center;
  min-width: 0;
  width: auto;
  margin: 0 0 0 calc(var(--m-media-card-left-inset) - 14px);
  font-size: 20px;
  line-height: 25px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-medium);
  color: var(--text-inverse);
  white-space: pre-line;
}

body.app-community .community-hero-desc{
  display: none;
}

body.app-community .community-hero-join{
  position: static;
  grid-column: 2;
  grid-row: 3;
  align-self: center;
  justify-self: end;
  width: var(--btn-blue-w);
  min-width: var(--btn-blue-min);
  max-width: var(--btn-blue-w);
  height: var(--btn-blue-h);
  min-height: var(--btn-blue-h);
  margin: 0;
  padding: var(--btn-blue-pad);
  box-sizing: border-box;
  border-radius: var(--btn-blue-radius);
  font-size: var(--btn-blue-font);
  line-height: var(--btn-blue-lh);
  font-weight: var(--btn-blue-weight);
  letter-spacing: var(--btn-blue-ls);
}

body.app-community .community-tiles{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: var(--m-block-gap);
  align-items: stretch;
}

body.app-community .community-tiles::after{
  content: none;
  display: none;
}

body.app-community .community-feature-card,
body.app-signals .signals-analyze-card{
  width: 100%;
  height: 105px;
  min-height: 105px;
  overflow: hidden;
}

body.app-community .community-feature-card .community-feature-img,
body.app-signals .signals-analyze-card .signals-analyze-card-img{
  position: absolute;
  top: auto;
  right: 0;
  bottom: 0;
  left: auto;
  width: 90px;
  height: 90px;
  display: block;
  object-fit: contain;
  object-position: right bottom;
}

body.app-community .community-feature-copy,
body.app-signals .signals-analyze-card-copy{
  max-width: calc(100% - 72px);
}

body.app-community .community-tile,
body.app-community .community-tile.is-disabled{
  position: relative;
  height: 105px;
  min-height: 105px;
  box-sizing: border-box;
  padding: 16px 18px;
  border-radius: 34px;
  overflow: hidden;
  display: block;
  text-align: left;
  box-shadow: none;
  transform: none;
}

body.app-community .community-tile:hover{
  transform: none;
}

body.app-community .community-feature-card--events{
  background: var(--community-events-gradient);
}

body.app-community .community-feature-card--leaderboard{
  background: #FFFFFF;
}

body.app-community .community-feature-copy{
  position: relative;
  z-index: 2;
}

body.app-community .community-tile-title{
  margin: 0;
  font-size: var(--glee-body-fs);
  line-height: var(--glee-body-lh);
  font-weight: var(--glee-body-medium-fw);
  letter-spacing: var(--glee-body-ls);
}

body.app-community .community-feature-card--events .community-tile-title{
  color: var(--text-inverse) !important;
}

body.app-community .community-feature-card--leaderboard .community-tile-title{
  color: #080D20;
}

body.app-community .community-tile-desc{
  display: block;
  margin: 4px 0 0;
  max-width: 86px;
  white-space: normal;
  font-size: var(--glee-small-fs);
  line-height: var(--glee-small-lh);
  font-weight: var(--glee-small-fw);
  letter-spacing: var(--glee-small-ls);
}

body.app-community .community-feature-card--events .community-tile-desc{
  color: rgba(255, 255, 255, .70) !important;
}

body.app-community .community-feature-card--leaderboard .community-tile-desc{
  color: rgba(8, 13, 32, 0.70);
}

body.app-community .community-tile-link,
body.app-community .community-tile-soon{
  display: none;
}

    /* -------------------------
     Events (mobile) - RESET (Figma hi-res)
     Desktop stays untouched because it's inside media query + body scope
  ------------------------- */

  body.app-events .events-wrap{
    max-width: 100% !important;
    padding-bottom: 0;
  }

  body.app-events .events-list{
    margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  body.app-events .event-card{
    display: none;
  }

  /* Mobile preview card (same ratio as Community hero on mobile) */
  body.app-events .m-event{
    width: 100%;
    aspect-ratio: 363 / 155;
    border-radius: var(--m-card-radius);
    overflow: hidden;
    position: relative;
  }

  body.app-events .m-event-media{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  /* Figma Campaign overlay; Social Hero keeps its separate shared gradient. */
  body.app-events .m-event::after{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
      90deg,
      rgba(10, 10, 22, 1) 0%,
      rgba(10, 10, 22, 0.49) 34%,
      rgba(10, 10, 22, 0) 63%
    );
    pointer-events: none;
  }
  
  body.app-events .m-event-overlay{
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 20px var(--m-media-card-right-inset) var(--m-media-card-bottom-inset) var(--m-media-card-left-inset);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  body.app-events .m-event-title{
    margin: 0;
    font-size: var(--m-fs-h1);
    line-height: var(--m-lh-h1);
    font-weight: var(--m-fw-semibold);
    letter-spacing: -0.02em;
    color: rgba(255,255,255,0.98);
    max-width: 72%;
  }

  body.app-events .m-event-title-line{
    display: block;
  }

  body.app-events .m-event-bottom{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  body.app-events .m-event-date{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,0.92);
    font-size: var(--m-fs-body);
    line-height: var(--m-lh-body);
    font-weight: var(--m-fw-medium);
    letter-spacing: -0.02em;
    min-width: 0;
  }

  body.app-events .m-event-date span{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.app-events .m-event-cal,
  body.app-event-details .campaign-calendar-icon{
    width: 22px;
    height: 22px;
    display: inline-flex;
    color: rgba(255,255,255,0.92);
    flex: 0 0 22px;
    background: currentColor;
    -webkit-mask: url("../assets/icons/event.svg") center / contain no-repeat;
    mask: url("../assets/icons/event.svg") center / contain no-repeat;
  }

  body.app-events .m-event-cal svg{
    width: 22px;
    height: 22px;
    display: block;
  }

body.app-events .m-event-join{
  width: var(--btn-blue-w);
  height: var(--btn-blue-h);
  min-width: var(--btn-blue-min);
  box-sizing: border-box;
  padding: var(--btn-blue-pad);
  border-radius: var(--btn-blue-radius);
  border: 0;
  cursor: pointer;

  background: var(--brand);
  color: #fff;

  font-size: var(--btn-blue-font);
  line-height: var(--btn-blue-lh);
  font-weight: var(--btn-blue-weight);
  letter-spacing: var(--btn-blue-ls);
}

  /* -------------------------
     Events Skeleton (mobile)
  ------------------------- */

  body.app-events.is-skeleton .m-event.is-skeleton,
  body.app-event-details.is-skeleton {
    pointer-events: none;
  }

  body.app-events.is-skeleton .m-event.is-skeleton::after{
    background: linear-gradient(90deg, transparent, var(--skel-shine), transparent) !important;
    transform: translateX(-120%);
    animation: skel-shimmer 1.1s infinite;
  }

  body.app-events.is-skeleton .m-event.is-skeleton .m-event-media{
    background: var(--skel) !important;
  }

  body.app-events.is-skeleton .m-event.is-skeleton .m-event-title,
  body.app-events.is-skeleton .m-event.is-skeleton .m-event-date,
  body.app-events.is-skeleton .m-event.is-skeleton .m-event-join{
    background: var(--skel) !important;
    color: transparent !important;
    border-radius: 999px;
    position: relative;
    overflow: hidden;
  }

  body.app-events.is-skeleton .m-event.is-skeleton .m-event-title{
    height: 20px;
    width: 70%;
    max-width: 70%;
  }

  body.app-events.is-skeleton .m-event.is-skeleton .m-event-date{
    height: 14px;
    width: 160px;
  }

  body.app-events.is-skeleton .m-event.is-skeleton .m-event-join{
    width: 92px;
    height: 37px;
    border: 0;
  }

  body.app-events.is-skeleton .m-event.is-skeleton .m-event-title::after,
  body.app-events.is-skeleton .m-event.is-skeleton .m-event-date::after,
  body.app-events.is-skeleton .m-event.is-skeleton .m-event-join::after,
  body.app-event-details.is-skeleton .event-hero::after,
  body.app-event-details.is-skeleton .event-title::after,
  body.app-event-details.is-skeleton .event-about-text:empty::after,
  body.app-event-details.is-skeleton .event-fact-value:empty::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, var(--skel-shine), transparent);
    transform: translateX(-120%);
    animation: skel-shimmer 1.1s infinite;
  }

  /* -------------------------
     Event Details page
  ------------------------- */

  body.app-event-details .home-grid{
    display: block;
    padding-bottom: 0;
  }

  body.app-event-details .event-details-center{
    padding-top: var(--m-detail-start-gap);
    padding-bottom: var(--m-bottom-content-pad);
  }

  body.app-event-details .event-details-content{
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  body.app-event-details .event-details-back{
    display: none;
  }

  body.app-event-details .event-hero{
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    margin-bottom: 28px;
    border-radius: 40px;
    overflow: hidden;
  }

  body.app-event-details .event-title-row{
    margin: 0 0 28px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
  }

  body.app-event-details .event-title{
    font-size: var(--glee-title-s-fs, 20px) !important;
    line-height: var(--glee-title-s-lh, 25px) !important;
    font-weight: var(--glee-title-s-fw, var(--fw-semibold)) !important;
    letter-spacing: var(--glee-title-s-ls, -0.02em) !important;
    color: var(--text-100) !important;
  }

  body.app-event-details .event-join-btn{
    flex: 0 0 auto;
    margin: 28px auto 0;
    align-self: center;
  }

  body.app-event-details .event-meta-row{
    margin-top: 0;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 18px;
    color: var(--text-70);
    font-size: var(--m-fs-body);
    line-height: var(--m-lh-body);
    font-weight: var(--fw-regular);
    letter-spacing: var(--ls-medium);
  }

  body.app-event-details .event-meta-item{
    display: inline-flex;
    align-items: center;
    gap: 14px;
    white-space: nowrap;
    color: var(--text-70);
    font-size: var(--m-fs-body);
    line-height: var(--m-lh-body);
    font-weight: var(--fw-regular);
    letter-spacing: var(--ls-medium);
  }

  body.app-event-details .event-meta-link {
    color: var(--brand);
    text-decoration: none;
  }

  body.app-event-details .event-meta-icon--host{
    width: 21px;
    height: 16px;
    background: var(--text-70);
  }

  body.app-event-details .event-meta-icon--discord{
    width: 19px;
    height: 15px;
    background: var(--text-70);
  }

  body.app-event-details .event-facts{
    width: 100%;
    margin-top: 28px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  body.app-event-details .event-fact-value{
    font-size: var(--glee-title-s-fs, 20px);
    line-height: var(--glee-title-s-lh, 25px);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--glee-title-s-ls, -0.02em);
    overflow-wrap: anywhere;
  }

  body.app-event-details .event-fact-label{
    margin-top: 8px;
    font-size: 15px;
    line-height: 22px;
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-medium);
    color: var(--text-70);
  }

  body.app-event-details .event-about{
    margin-top: 44px;
  }

  body.app-event-details .event-section-title{
    font-size: var(--m-section-title-fs);
    line-height: var(--m-section-title-lh);
    font-weight: var(--m-section-title-fw);
    letter-spacing: var(--m-section-title-ls);
    color: var(--m-section-title-color);
    margin-bottom: 10px;
  }

body.app-event-details .event-about-text{
  font-size: 15px;
  line-height: 22px;
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-medium);
  color: var(--text-70);
  margin-bottom: 20px;
}

  body.app-event-details .event-speakers-section{
    margin-top: 30px;
  }

  body.app-event-details .event-speakers{
    gap: 16px;
  }

  body.app-event-details .event-speaker-name {
    font-size: var(--m-fs-body);
    line-height: var(--m-lh-body);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-medium);
    color: var(--text-100);
  }

  body.app-event-details .event-speaker-role {
    font-size: var(--m-fs-body);
    line-height: var(--m-lh-body);
    font-weight: var(--fw-regular);
    letter-spacing: var(--ls-medium);
    color: var(--text-70);
  }
  
    /* -------------------------
     Event Details Skeleton (mobile)
  ------------------------- */

  body.app-event-details.is-skeleton .event-hero{
    position: relative;
    background: var(--skel) !important;
    overflow: hidden;
  }

  body.app-event-details.is-skeleton .event-hero img{
    opacity: 0 !important;
  }

  body.app-event-details.is-skeleton .event-title{
    height: 24px;
    width: 72%;
    border-radius: 999px;
    background: var(--skel) !important;
    color: transparent !important;
    position: relative;
    overflow: hidden;
  }

  body.app-event-details.is-skeleton .event-about-text:empty{
    height: 46px;
    border-radius: 14px;
    background: var(--skel) !important;
    position: relative;
    overflow: hidden;
  }

  body.app-event-details.is-skeleton .event-fact-value:empty{
    display: inline-block;
    height: 18px;
    width: 75%;
    border-radius: 999px;
    background: var(--skel) !important;
    color: transparent !important;
    position: relative;
    overflow: hidden;
  }

  
    /* Mobile tile consistency. */

  /* Same spacing under each Community tile icon. */
  body.app-community .community-tile{
    gap: 10px !important;
  }

  /* Also ensure Community icon wrapper has no margins */
  body.app-community .community-tile-icon{
    margin: 0 !important;
  }

  /* Keep the shared Community icon shape stable. */
body.app-community .community-tile-icon{
  border-radius: var(--m-icon-radius) !important;
  overflow: hidden !important;

  -webkit-mask-image: var(--m-squircle-mask) !important;
  mask-image: var(--m-squircle-mask) !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
}

  /* -------------------------
     Community feature cards (mobile)
  ------------------------- */

body.app-community .community-wrap{
  gap: 0;
}

body.app-community .community-hero{
  height: var(--profile-mobile-banner-h) !important;
  border-radius: var(--m-card-radius) !important;
}

body.app-community .community-hero::after{
  background: var(--community-hero-gradient) !important;
}

body.app-community .community-pill{
  height: var(--app-content-tag-h);
  gap: var(--app-content-tag-gap);
  padding: 0 var(--app-content-tag-pad-x);
  margin: 0;
  font-size: var(--app-content-tag-fs);
  line-height: var(--app-content-tag-lh);
  font-weight: var(--app-content-tag-fw);
  letter-spacing: var(--app-content-tag-ls);
}

body.app-community .community-tiles{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-top: var(--m-block-gap) !important;
  align-items: stretch !important;
}

body.app-community .community-tiles::after{
  content: none !important;
  display: none !important;
}

body.app-community .community-tile,
body.app-community .community-tile.is-disabled{
  position: relative !important;
  display: block !important;
  height: 105px !important;
  min-height: 105px !important;
  padding: 16px 18px !important;
  border-radius: 34px !important;
  overflow: hidden !important;
  box-shadow: none !important;
  text-align: left !important;
  transform: none !important;
}

body.app-community .community-feature-card--events{
  background: var(--community-events-gradient) !important;
  color: var(--text-inverse) !important;
}

body.app-community .community-feature-card--leaderboard{
  background: #FFFFFF;
  color: #080D20;
}

body.app-community .community-tile-icon{
  display: none !important;
}

body.app-community .community-feature-copy{
  position: relative;
  z-index: 2;
}

body.app-community .community-feature-title{
  margin: 0 !important;
  font-size: var(--glee-body-fs) !important;
  line-height: var(--glee-body-lh) !important;
  font-weight: var(--glee-body-medium-fw) !important;
  letter-spacing: var(--glee-body-ls) !important;
}

body.app-community .community-feature-card--events .community-feature-title{
  color: var(--text-inverse) !important;
}

body.app-community .community-feature-card--leaderboard .community-feature-title{
  color: #080D20;
}

body.app-community .community-feature-subtitle{
  display: block !important;
  margin: 4px 0 0 !important;
  max-width: 86px;
  white-space: normal;
  font-size: var(--glee-small-fs) !important;
  line-height: var(--glee-small-lh) !important;
  font-weight: var(--glee-small-fw) !important;
  letter-spacing: var(--glee-small-ls) !important;
}

body.app-community .community-feature-card--events .community-feature-subtitle{
  color: rgba(255, 255, 255, 0.70) !important;
}

body.app-community .community-feature-card--leaderboard .community-feature-subtitle{
  color: rgba(8, 13, 32, 0.70);
}

body.app-community .community-feature-action{
  display: none !important;
}

body.app-community .community-feature-action > span:not(.community-feature-action-icon){
  display: none !important;
}

body.app-community .community-feature-action-icon{
  display: none !important;
}

body.app-community .community-feature-card--events .community-feature-action{
  color: var(--text-inverse) !important;
}

body.app-community .community-feature-card--leaderboard .community-feature-action{
  color: #080D20;
}

/* -------------------------
   Profile Skeleton (mobile)
------------------------- */

body.app-profile .profile-header.is-skeleton .profile-avatar-wrap::before{
  width: var(--profile-mobile-avatar-size) !important;
  height: var(--profile-mobile-avatar-size) !important;
  border: 2px solid var(--profile-avatar-stroke-color) !important;
  border-radius: 999px !important;
}

body.app-profile .profile-header.is-skeleton .profile-avatar-wrap::after{
  content: none;
  display: none;
}

body.app-profile .profile-header.is-skeleton::before{
  content: none;
}

body.app-profile .profile-header.is-skeleton .profile-banner-img{
  background: var(--skel) !important;
}

body.app-profile .profile-header.is-skeleton .profile-display-pill{
  width: auto !important;
  max-width: calc(100% - 40px) !important;
}

body.app-profile .profile-header.is-skeleton .skel-line--name{
  height: 20px !important;
  width: 100% !important;
  max-width: 160px !important;
}

body.app-profile .profile-header.is-skeleton .skel-line--user{
  height: 18px !important;
  width: 100% !important;
  max-width: 130px !important;
  margin-top: 0 !important;
}

body.app-profile .profile-header.is-skeleton .skel-line--bio1{
  height: 12px !important;
  width: 100% !important;
  max-width: 280px !important;
  margin-top: 12px !important;
}

body.app-profile .profile-header.is-skeleton .skel-line--bio2{
  height: 12px !important;
  width: 100% !important;
  max-width: 190px !important;
  margin-top: 8px !important;
}

body.app-profile .profile-header.is-skeleton .skel-line--stat{
  width: 58px !important;
}

  body.app-profile .creator-id-screen{
    gap: 30px;
  }

  body.app-profile .creator-id-title{
    margin-bottom: 14px;
    font-size: var(--m-fs-h2);
    line-height: var(--m-lh-h2);
  }

  body.app-profile .creator-passport-card{
    width: 100%;
    aspect-ratio: 3105 / 1955;
    position: relative;
    overflow: hidden;
    line-height: 0;
    margin-top: 0;
    border-radius: 0;
  }

body.app-profile .creator-passport-bg{
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
  opacity: 1;
  visibility: visible;
  pointer-events: none;
}

body.app-profile .creator-passport-overlay-wrap{
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

  body.app-profile .passport-overlay{
    position: absolute;
    inset: 0;
    box-sizing: border-box;
  }

  body.app-profile .passport-overlay--id{
    position: absolute;
    inset: 0;
  }

  body.app-profile .passport-id-avatar{
    left: 6.3%;
    top: 9.2%;
    width: 33.2%;
    height: 73.6%;
    transform: rotate(-0.83deg);
    transform-origin: center center;
  }

body.app-profile .passport-id-signature{
  left: 43.7%;
  top: 27.8%;
  width: 31%;
  font-family: "Caveat", cursive;
  font-size: clamp(19px, 5.8vw, 28px);
  line-height: 0.95;
  font-weight: 400;
  letter-spacing: 0;
  color: #3A479D;
}

  body.app-profile .passport-id-name{
    left: 43.7%;
    top: 41.6%;
    width: 39%;
    font-family: "IBM Plex Mono", monospace;
    font-size: clamp(9px, 2.7vw, 13px);
    line-height: 1;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: #132f82;
  }

  body.app-profile .passport-id-role{
    left: 43.7%;
    top: 50.9%;
    width: 43%;
    font-family: "IBM Plex Mono", monospace;
    font-size: clamp(9px, 2.7vw, 13px);
    line-height: 1;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: #132f82;
  }

  body.app-profile .passport-overlay--cover{
    display: none;
  }

  body.app-profile .passport-overlay--culture,
  body.app-profile .passport-overlay--visas{
    padding: 20px 18px;
  }

  body.app-profile .passport-culture-stamp,
  body.app-profile .passport-visa-card{
    position: absolute;
  }

body.app-profile .passport-culture-bio-text{
  left: 6.7%;
  top: 18.8%;
  width: 31.5%;
  max-height: 36%;
  font-size: clamp(17px, 3.75vw, 17px);
  line-height: 1.14;
  overflow: hidden;
}

  body.app-profile .passport-culture-proof-grid{
    left: 6.7%;
    top: 64.8%;
    width: 31.2%;
  }

  body.app-profile .passport-culture-stamp{
    left: 44.6%;
    top: 27.2%;
    width: 48.5%;
  }

  body.app-profile .passport-cover-main-title{
    display: none;
  }

  body.app-profile .passport-kicker{
    font-size: 8px;
  }

  body.app-profile .passport-cover-title,
  body.app-profile .passport-culture-name{
    font-size: 24px;
  }

  body.app-profile .passport-cover-meta,
  body.app-profile .passport-culture-bio,
  body.app-profile .passport-culture-proof{
    max-width: 240px;
    font-size: 10px;
  }

  body.app-profile .passport-culture-proof{
    margin-top: 10px;
    padding: 5px 8px;
  }

  body.app-profile .passport-visa-grid{
    margin-top: 10px;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }

  body.app-profile .passport-visa-stamp{
    min-height: 38px;
    border-radius: 8px;
    gap: 2px;
    padding: 5px 7px;
  }

  body.app-profile .passport-visa-stamp span{
    font-size: 14px;
  }

  body.app-profile .passport-visa-stamp strong,
  body.app-profile .passport-visa-stamp em{
    font-size: 7px;
  }

  body.app-profile .creator-passport-thumbs{
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 16px;
    align-items: end;
  }

  body.app-profile .creator-passport-thumb{
    min-width: 0;
    height: auto;
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    justify-items: center;
    column-gap: 0;
    row-gap: 4px;
  }

  body.app-profile .creator-passport-thumb:hover{
    transform: none;
  }

  body.app-profile .creator-passport-thumb-icon{
    grid-column: 1;
    grid-row: 1;
    width: 22px;
    height: 22px;
  }

  body.app-profile .creator-passport-thumb-label{
    grid-column: 1;
    grid-row: 2;
    font-size: 12px;
    line-height: 1.1;
    font-weight: var(--fw-semibold);
    white-space: nowrap;
  }

  body.app-profile .creator-passport-thumb-line{
    grid-column: 1;
    grid-row: 3;
    width: min(52px, 80%);
    height: 2px;
    margin-top: 0;
  }

  body.app-profile .creator-markets-grid{
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .creator-mint-modal.is-open{
    padding: 12px 0;
    align-items: center;
  }

  .creator-mint-modal__panel{
    width: 100%;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
  }

  .creator-mint-modal__card{
    min-height: 0;
    padding: var(--action-modal-padding);
    border-radius: var(--action-modal-radius);
  }

  .creator-mint-modal__title{
    font-size: 20px;
  }

  .creator-mint-modal__copy{
    margin: 10px auto 22px;
    font-size: 14px;
  }

  .creator-mint-modal__section-title{
    margin-bottom: 12px;
    font-size: 14px;
  }

  .creator-mint-modal__info-row{
    gap: 10px;
    margin-bottom: 18px;
  }

  .creator-mint-modal__info-main{
    font-size: 14px;
  }

  .creator-mint-modal__info-sub{
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.25;
  }

  .creator-mint-modal__input-row{
    min-height: 46px;
    grid-template-columns: minmax(0, 1fr) 112px;
    margin-top: 20px;
    padding: 4px 4px 4px 16px;
  }

  .creator-mint-modal__error{
    margin-left: 16px;
  }

  .creator-visa-modal.is-open{
    padding: 12px 0;
    align-items: center;
  }

  .creator-visa-modal__panel{
    width: 100%;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
  }

  .creator-visa-modal__card{
    padding: var(--action-modal-padding);
    border-radius: var(--action-modal-radius);
  }

  .creator-visa-modal__hero{
    gap: 14px;
    margin-bottom: 18px;
  }

  .creator-visa-modal__stamp{
    width: 88px;
    height: 88px;
  }

  .creator-country-modal-hero{
    height: 210px;
    margin-bottom: 18px;
  }

  .creator-visa-modal__hero{
    display: block;
  }

  .creator-visa-modal__stamp{
    display: none;
  }

  .creator-visa-modal__title{
    font-size: 20px;
  }

  .creator-visa-modal__subtitle{
    margin: 8px 0 22px;
    font-size: 14px;
  }

  .creator-visa-modal__section-title,
  .creator-visa-modal__divider{
    font-size: 14px;
  }

  .creator-visa-modal__section-title{
    margin-bottom: 18px;
  }

  .creator-visa-modal__divider{
    margin: 18px 0 14px;
  }

  .creator-visa-modal__path{
    gap: 10px;
  }

  .creator-visa-modal__path-main{
    font-size: 15px;
  }

  .creator-visa-modal__path-sub{
    margin-top: 4px;
    font-size: 13px;
  }

  .creator-visa-modal__referral-progress{
    margin: 0;
    justify-self: end;
    align-self: center;
    white-space: nowrap;
    font-size: var(--glee-small-fs);
    line-height: var(--glee-small-lh);
    font-weight: var(--glee-small-fw);
    letter-spacing: var(--glee-small-ls);
  }

  .creator-visa-modal__input-row{
    height: 43px;
    margin-top: 20px;
    padding-left: 16px;
  }

  .creator-visa-modal__error{
    margin-left: 16px;
  }

  body.app-profile .creator-loop-card{
    padding: 16px;
    border-radius: var(--m-card-radius);
  }

  body.app-profile .creator-loop-grid{
    grid-template-columns: 1fr;
    gap: 12px;
  }

  body.app-profile .creator-loop-step{
    display: grid;
    grid-template-columns: 44px 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    text-align: left;
    align-items: center;
  }

  body.app-profile .creator-loop-icon{
    grid-row: 1 / 3;
    width: 40px;
    height: 40px;
    margin: 0;
    font-size: 21px;
  }

  body.app-profile .creator-loop-title{
    font-size: 12px;
  }

  body.app-profile .creator-loop-text{
    margin-top: 3px;
    font-size: 11px;
  }

  body.app-profile .creator-loop-arrow{
    display: none;
  }

/* -------------------------
   Notifications (mobile)
------------------------- */

body.app-notifications .notif-wrap{
  /* Bottom-nav clearance is owned by .home-scroll. */
  padding-bottom: 0 !important;
}

/* Keep notifications list + items inside the shared content rail */
body.app-notifications .notif-list{
  width: 100% !important;
  max-width: var(--m-content-w) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

body.app-notifications .notif-item{
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Notifications: align avatar closer to the content rail edge */
body.app-notifications .notif-item{
  padding: 9px 14px 9px 9px !important;
  gap: 12px !important;
  box-shadow: none !important;
}

/* -------------------------
   Settings (mobile)
------------------------- */

body.app-settings .settings-wrap{
  /* Bottom-nav clearance is owned by .home-scroll. */
  padding-bottom: 0 !important;
}

body.app-settings .settings-section{
  margin-top: 0 !important;
}

body.app-settings .settings-section + .settings-section{
  margin-top: var(--m-block-gap) !important;
}

body.app-settings .settings-legal-footer{
  margin-top: var(--m-block-gap);
  padding-bottom: 0;
}

body.app-settings .settings-section-title{
  margin: 0 0 14px !important;
  font-size: var(--settings-section-title-fs) !important;
  line-height: var(--settings-section-title-lh) !important;
  font-weight: var(--settings-section-title-fw) !important;
  letter-spacing: var(--settings-section-title-ls) !important;
  color: var(--settings-section-title-color) !important;
}

body.app-settings .settings-field-label{
  font-size: var(--settings-label-fs) !important;
  line-height: var(--settings-label-lh) !important;
  font-weight: var(--settings-label-fw) !important;
  letter-spacing: var(--settings-label-ls) !important;
  color: var(--settings-label-color) !important;
}

body.app-settings .settings-row-title,
body.app-settings .settings-row-k{
  font-size: var(--settings-body-fs) !important;
  line-height: var(--settings-body-lh) !important;
  font-weight: var(--settings-body-fw) !important;
  letter-spacing: var(--settings-body-ls) !important;
  color: var(--settings-body-color) !important;
}

body.app-settings .settings-row--2col{
  grid-template-columns: 110px 1fr !important;
  gap: 12px !important;
}

body.app-settings .settings-link-inline,
body.app-settings .settings-link{
  font-size: var(--settings-body-fs) !important;
  line-height: var(--settings-body-lh) !important;
  font-weight: var(--settings-body-fw) !important;
  letter-spacing: var(--settings-body-ls) !important;
}

/* -------------------------
   AUTH (onboarding) mobile
   adaptive content rail + typography from mobile root
------------------------- */

body.auth:not(.onboarding-page) .auth-shell{
  min-height: var(--vvh, 100vh);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  /* same corridor logic as app-shell */
  padding-left: max(var(--m-content-gutter), env(safe-area-inset-left));
  padding-right: max(var(--m-content-gutter), env(safe-area-inset-right));
  padding-top: calc(16px + env(safe-area-inset-top));
  padding-bottom: calc(24px + env(safe-area-inset-bottom));

  box-sizing: border-box;
}

body.auth:not(.onboarding-page) .auth-center{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.auth:not(.onboarding-page) .auth-title{
  margin: 0 0 26px;

  font-size: var(--m-fs-h1);
  line-height: var(--m-lh-h1);
  font-weight: var(--m-fw-semibold);
  letter-spacing: -0.02em;
}

/* Form elements use corridor width */
body.auth:not(.onboarding-page) .auth-form{
  width: 100%;
  justify-items: stretch;
}

body.auth:not(.onboarding-page) .auth-input,
body.auth:not(.onboarding-page) .auth-help,
body.auth:not(.onboarding-page) .auth-error{
  width: 100% !important;
  max-width: 100% !important;
}

body.auth:not(.onboarding-page) .auth-input{
  height: 44px;
  font-size: 16px !important;
  line-height: var(--m-lh-body);
  font-weight: var(--m-fw-medium);
}

body.auth:not(.onboarding-page) .auth-help,
body.auth:not(.onboarding-page) .auth-footnote{
  font-size: var(--m-fs-body);
  line-height: var(--m-lh-body);
  font-weight: var(--m-fw-medium);
  margin: 6px 0 8px !important;
}

body.auth:not(.onboarding-page) .auth-error{
  font-size: var(--m-fs-meta);
  line-height: var(--m-lh-meta);
}

/* CTA button keeps desktop rules, but make it full width in the corridor */
body.auth:not(.onboarding-page) .auth-cta{
  width: 100%;
  font-weight: var(--m-fw-bold);
  font-size: var(--m-fs-body);
}

body.auth:not(.onboarding-page) .avatar-picker{
  margin: 18px 0 6px;
}

body.auth:not(.onboarding-page) .avatar-circle{
  width: 78px;
  height: 78px;
}

body.auth:not(.onboarding-page) .avatar-suggestions{
  margin-top: 14px;
}

body.auth:not(.onboarding-page) .avatar-suggestions-title{
  margin-bottom: 14px;
  font-size: var(--m-fs-meta);
  line-height: var(--m-lh-meta);
}

body.auth:not(.onboarding-page) .avatar-suggestion-grid{
  grid-template-columns: repeat(3, 64px);
  gap: 14px 18px;
}

body.auth:not(.onboarding-page) .avatar-suggestion-btn{
  width: 64px;
  height: 64px;
}

body.auth:not(.onboarding-page) .role-field{
  width: 100%;
}

body.auth:not(.onboarding-page) .role-label{
  font-size: var(--m-fs-body);
  line-height: var(--m-lh-body);
}

body.auth:not(.onboarding-page) .role-help{
  font-size: var(--m-fs-caption);
  line-height: var(--m-lh-caption);
}

body.auth:not(.onboarding-page) .role-selector{
  gap: 8px;
  margin-top: 12px;
}

body.auth:not(.onboarding-page) .role-chip{
  min-height: 32px;
  padding: 0 12px;
  font-size: var(--m-fs-caption);
}

/* -------------------------
   Loader mobile: hide progress bar, keep only logo
------------------------- */
body.auth-loader .loader-bottom{
  display: none !important;
}

/* make logo nicely centered with safe areas */
body.auth-loader,
body.auth-loader .loader-shell{
  background: var(--bg);
}

body.auth-loader .loader-shell{
  min-height: 100vh;
  background: var(--bg);
  padding-left: max(var(--m-content-gutter), env(safe-area-inset-left));
  padding-right: max(var(--m-content-gutter), env(safe-area-inset-right));
  padding-top: calc(16px + env(safe-area-inset-top));
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  box-sizing: border-box;
}

body.auth-loader .loader-logo{
  font-size: 50px !important;
  line-height: 53px;
  letter-spacing: var(--ls-title);
  color: var(--text-100);
}

body.auth:not(.onboarding-page) .auth-form{
  gap: 27px !important;
}

body.auth:not(.onboarding-page) .auth-help{
  margin-top: -22px !important;
  margin-bottom: 2px !important;
}

body.auth:not(.onboarding-page) .auth-error{
  min-height: 0 !important;
  margin: 0 !important;
}

body.auth:not(.onboarding-page) .auth-error:empty{
  display: none !important;
}

body.auth:not(.onboarding-page) .auth-cta{
  font-weight: 500 !important;
}

/* -------------------------
   Profile Edit modal (mobile)
------------------------- */
@media (max-width: 520px){
  body.app-profile #profileEditModal.modal{
    align-items: center !important;
    justify-content: center !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: calc(16px + env(safe-area-inset-top)) !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
  }

  body.app-profile #profileEditModal .modal-panel.profile-edit-panel{
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    height: auto !important;
    max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    margin: 0 auto !important;
  }

  body.app-profile #profileEditModal .pe-modal{
    height: auto !important;
    overflow: auto !important;
    border-radius: var(--action-modal-radius) !important;
    background: var(--surface-card);

    padding: var(--action-modal-padding) !important;
  }

  body.app-profile #profileEditModal .pe-inner{
    width: 100% !important;
    margin: 22px auto 0 !important;
  }

  body.app-profile #profileEditModal .pe-avatar.pe-avatar-lg{
    width: 112px !important;
    height: 112px !important;
  }

  body.app-profile #profileEditModal .pe-textarea{
    height: 140px !important;
  }

  body.app-profile #profileEditModal .pe-footer{
    margin-top: 22px !important;
    padding-bottom: 22px !important;
  }

  body.app-profile #profileEditModal .pe-save{
    width: 100% !important;
    min-width: 0 !important;
    height: var(--btn-blue-h) !important;
    box-sizing: border-box !important;
    padding: var(--btn-blue-pad) !important;
    border-radius: var(--btn-blue-radius) !important;
  }

    /* Profile Edit: typography must come from mobile root tokens */
  body.app-profile #profileEditModal .pe-change-link{
    font-size: var(--m-fs-body) !important;
    line-height: var(--m-lh-body) !important;
    font-weight: var(--m-fw-semibold) !important;
  }

  body.app-profile #profileEditModal .pe-label{
    font-size: var(--m-fs-h2) !important;
    line-height: var(--m-lh-h2) !important;
    font-weight: var(--m-fw-semibold) !important;
    color: var(--m-text-secondary) !important;
  }

body.app-profile #profileEditModal .pe-input,
body.app-profile #profileEditModal .pe-textarea{
  font-size: 16px !important;
  line-height: 22px !important;
  font-weight: var(--m-fw-medium) !important;
  color: var(--text-100) !important;
}

body.app-profile #profileEditModal .pe-input::placeholder,
body.app-profile #profileEditModal .pe-textarea::placeholder{
  font-size: 16px !important;
  line-height: 22px !important;
  font-weight: var(--m-fw-medium) !important;
  color: var(--text-50) !important;
}

  body.app-profile #profileEditModal .pe-save{
    font-size: var(--btn-blue-font) !important;
    line-height: var(--btn-blue-lh) !important;
    font-weight: var(--btn-blue-weight) !important;
    letter-spacing: var(--btn-blue-ls) !important;
  }
}
}

@media (max-width: 900px){
  .clickable, [data-click], .post-card{
    -webkit-tap-highlight-color: transparent;
  }

#spaRoot,
.spa-root,
.spa-view.is-active{
  height: 100%;
  min-height: 100%;
}

html.is-kbd .home-scroll{
  height: var(--vvh) !important;
}

/* Mobile: reduce zoom gestures where supported */
body{ touch-action: pan-x pan-y; }
a, button{ touch-action: manipulation; }
}

html.is-kbd .home-scroll{
  height: var(--vvh) !important;
}

/* =========================
   Mobile: Confirm dialogs
   (post delete and thread rename/delete)
========================= */
@media (max-width: 900px){
  .post-confirm{
    padding:
      max(12px, env(safe-area-inset-top))
      max(12px, env(safe-area-inset-right))
      max(12px, env(safe-area-inset-bottom))
      max(12px, env(safe-area-inset-left));
  }

  .post-confirm-card{
    width: min(420px, calc(100vw - 24px));
    max-width: min(420px, calc(100vw - 24px));
    border-radius: var(--action-modal-radius);
    overflow: hidden;
    background-clip: padding-box;
    -webkit-background-clip: padding-box;
    padding: var(--action-modal-padding);
    box-sizing: border-box;
  }

  .post-confirm-title,
  .hub-lootbox-confirm-title{
    margin: 0;
    font-size: var(--glee-title-s-fs) !important;
    line-height: var(--glee-title-s-lh) !important;
    font-weight: var(--glee-title-s-fw) !important;
    letter-spacing: var(--glee-title-s-ls) !important;
    color: var(--text-100) !important;
    word-break: break-word;
  }

  .post-confirm-actions{
    margin-top: 24px;
    justify-content: center;
    gap: 10px;
  }

  .post-confirm-btn,
  .hub-lootbox-modal-btn{
    width: var(--btn-blue-w);
    min-width: var(--btn-blue-min);
    max-width: var(--btn-blue-w);
    height: var(--btn-blue-h);
    min-height: var(--btn-blue-h);
    box-sizing: border-box;
    padding: var(--btn-blue-pad);
    border-radius: var(--btn-blue-radius);
    font-size: var(--btn-blue-font) !important;
    line-height: var(--btn-blue-lh) !important;
    font-weight: var(--btn-blue-weight) !important;
    letter-spacing: var(--btn-blue-ls) !important;
  }

  .post-confirm-btn.is-cancel{
    background: var(--modal-close-bg) !important;
    color: var(--modal-close-text) !important;
    border: 1px solid var(--modal-close-border) !important;
  }

  .post-confirm-btn.is-danger,
  .post-confirm-btn.is-primary{
    background: var(--btn-blue-bg) !important;
    color: var(--btn-blue-text) !important;
    border: 0 !important;
  }

  .post-report-card {
    width: min(420px, calc(100vw - 24px));
    max-width: min(420px, calc(100vw - 24px));
  }

  .post-report-reasons {
    margin-top: 22px;
    gap: 14px;
  }

  .post-report-reason {
    min-height: 24px;
    height: auto;
    padding: 0 0 0 30px;
    border-radius: 0;
    background: transparent !important;
    color: var(--text-100) !important;
    font-size: var(--glee-small-fs) !important;
    line-height: var(--glee-small-lh) !important;
    font-weight: var(--glee-small-fw) !important;
    letter-spacing: var(--glee-small-ls) !important;
  }

  .post-report-reason.is-selected {
    background: transparent !important;
    color: var(--text-100) !important;
  }

}

/* Mobile dynamic typography for HUB / XP / Donate / Leaderboard */
@media (max-width: 900px) {
  .donate-xp-title,
  .xp-tasks-title {
    font-size: var(--m-fs-h1);
    line-height: var(--m-lh-h1);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-title);
    color: var(--text-100);
  }

  .hub-lootbox-title,
  .hub-feed-title,
  .donate-xp-name,
  .xp-task-title {
    font-size: var(--m-fs-body);
    line-height: var(--m-lh-body);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-medium);
    color: var(--text-100);
  }

  .hub-lootbox-desc,
  .donate-xp-subtitle,
  .donate-xp-note,
  .xp-task-subtitle {
    font-size: var(--m-fs-body);
    line-height: var(--m-lh-body);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-medium);
    color: var(--text-70);
  }

  .hub-feed-likes,
  .hub-lootbox-price,
  .donate-xp-username,
  .donate-xp-balance-label,
  .donate-xp-fee,
  .xp-task-progress,
  .xp-task-empty {
    font-size: var(--m-fs-meta);
    line-height: var(--m-lh-meta);
    font-weight: var(--fw-regular);
    letter-spacing: var(--ls-regular);
    color: var(--text-55);
  }

  .donate-xp-balance-value,
  .hub-progress-tiles strong {
    font-size: var(--m-fs-body);
    line-height: var(--m-lh-body);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-medium);
    color: var(--text-100);
  }

  .hub-progress-xp {
    font-size: 40px;
    line-height: 44px;
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-title);
    color: var(--text-inverse);
  }

  .hub-progress-xp-label {
    font-size: var(--m-fs-h2);
    line-height: var(--m-lh-h2);
    font-weight: var(--fw-regular);
    letter-spacing: var(--ls-regular);
    color: var(--text-inverse-muted);
  }

  .donate-xp-input {
    font-size: 16px !important;
    line-height: 22px;
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-medium);
    color: var(--text-100);
  }

  .donate-xp-submit,
  .donate-xp-suggest button,
  .xp-task-row button,
  .hub-lootbox-bottom button {
    font-size: var(--btn-blue-font);
    line-height: var(--btn-blue-lh);
    font-weight: var(--btn-blue-weight);
    letter-spacing: var(--btn-blue-ls);
  }
}

/* =========================
   Mobile typography system
   Passport overlay/decorative text keeps its dedicated rules above.
========================= */
@media (max-width: 900px) {
  :root {
    --m-fw-regular: var(--fw-regular);
    --m-fw-medium: var(--fw-medium);
    --m-fw-semibold: var(--fw-semibold);
    --m-fw-bold: var(--fw-semibold);
    --m-text-primary: var(--text-100);
    --m-text-secondary: var(--text-70);
    --m-muted-color: rgb(var(--text-rgb));
    --m-muted-opacity: .70;
  }

  body,
  body.auth,
  .app-home {
    font-family: var(--font-main) !important;
    color: var(--text-100);
  }

.post-creator-bio,
.creator-id-subtitle,
.creator-loop-text {
  font-size: var(--m-fs-body) !important;
  line-height: var(--m-lh-body) !important;
  font-weight: var(--fw-medium) !important;
  letter-spacing: var(--ls-medium) !important;
  color: var(--text-70) !important;
}

  .event-title,
  .creator-id-title,
  .post-title,
  .post-creator-name,
  .creator-loop-title {
    font-size: var(--m-fs-h2) !important;
    line-height: var(--m-lh-h2) !important;
    font-weight: var(--fw-semibold) !important;
    letter-spacing: var(--ls-medium) !important;
    color: var(--text-100) !important;
  }

  .nav-item,
  .top-username {
    font-size: var(--m-fs-body) !important;
    line-height: var(--m-lh-body) !important;
    font-weight: var(--fw-medium) !important;
    letter-spacing: var(--ls-medium) !important;
    color: var(--text-70) !important;
  }

  .nav-item.is-active {
    color: var(--brand) !important;
  }

  .btn-blue,
  .btn-join,
  .btn-post,
  .app-events .btn-details:not(.is-ended),
.event-join-btn,
.app-event-details .event-join-btn,
.error-retry-btn,
.donate-xp-submit,
.xp-task-row button:not(:disabled),
.hub-lootbox-bottom button,
  .hub-event-join,
  .hub-explore-btn,
  .hub-xp-task-claim,
  #postModal .inline-post-submit {
    background-color: var(--btn-blue-bg) !important;
    color: var(--btn-blue-text) !important;
    font-size: var(--btn-blue-font) !important;
    line-height: var(--btn-blue-lh) !important;
    font-weight: var(--btn-blue-weight) !important;
    letter-spacing: var(--btn-blue-ls) !important;
  }

  .auth-input,
  .cp-input,
  .cp-textarea,
  .pe-input,
  .pe-textarea {
    font-family: var(--font-main) !important;
    font-size: 16px !important;
    line-height: 22px !important;
    font-weight: var(--fw-medium) !important;
    letter-spacing: var(--ls-medium) !important;
    color: var(--text-100) !important;
  }

  .search-input {
    font-family: var(--font-main) !important;
    font-size: 16px !important;
    line-height: 22px !important;
    font-weight: var(--fw-regular) !important;
    letter-spacing: var(--ls-medium) !important;
  }

  .auth-input::placeholder,
  .search-input::placeholder,
  .cp-input::placeholder,
  .cp-textarea::placeholder,
  .pe-input::placeholder,
  .pe-textarea::placeholder {
    color: var(--text-40) !important;
  }

  .role-label,
  .cp-label,
  .pe-label,
  .creator-mint-modal__section-title,
  .creator-visa-modal__section-title {
    font-size: var(--m-fs-body) !important;
    line-height: var(--m-lh-body) !important;
    font-weight: var(--fw-medium) !important;
    letter-spacing: var(--ls-medium) !important;
    color: var(--text-100) !important;
  }

  .post-author,
  .post-creator-handle,
  .event-meta,
  .creator-mint-modal__info-sub,
  .creator-visa-modal__path-sub {
    font-size: var(--m-fs-meta) !important;
    line-height: var(--m-lh-meta) !important;
    font-weight: var(--fw-regular) !important;
    letter-spacing: var(--ls-regular) !important;
    color: var(--text-55) !important;
  }

  .creator-mint-modal__title,
  .creator-visa-modal__title,
  .cp-title,
  .pe-title,
  .modal-title {
    font-size: var(--m-fs-h1) !important;
    line-height: var(--m-lh-h1) !important;
    font-weight: var(--fw-semibold) !important;
    letter-spacing: var(--ls-title) !important;
    color: var(--text-100) !important;
  }

  .loader-logo {
    font-family: var(--font-main) !important;
    font-weight: var(--fw-semibold) !important;
    color: var(--text-100) !important;
  }

  .auth-title {
    font-weight: var(--fw-semibold) !important;
    letter-spacing: var(--ls-title) !important;
    color: var(--text-100) !important;
  }

  .post-comment-handle {
    display: none !important;
    color: var(--text-55);
    font-weight: var(--fw-regular);
  }
}

/* =========================
   Standard blue CTA geometry
========================= */
@media (max-width: 900px) {
  .glee-primary-btn,
  .btn-blue,
  .btn-post,
  .btn-join,
  .post-card .post-details-btn,
  .app-events .btn-details,
  body.app-profile .profile-btn,
  body.app-post-details .post-follow-btn,
  .event-join-btn,
  .app-event-details .event-join-btn,
  .error-retry-btn,
  .post-confirm-btn,
  .donate-xp-submit,
  .xp-task-row button,
  .hub-lootbox-bottom button,
  .hub-event-join,
  .hub-explore-btn,
  .hub-xp-task-claim,
  #postModal .inline-post-submit {
    width: var(--btn-blue-w);
    min-width: var(--btn-blue-min);
    max-width: var(--btn-blue-w);
    height: var(--btn-blue-h);
    min-height: var(--btn-blue-h);
    box-sizing: border-box;
    padding: var(--btn-blue-pad);
    border-radius: var(--btn-blue-radius);
    font-family: var(--font-main);
    font-size: var(--btn-blue-font);
    line-height: var(--btn-blue-lh);
    font-weight: var(--btn-blue-weight);
    letter-spacing: var(--btn-blue-ls);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    text-decoration: none;
  }

  .glee-primary-btn,
  .btn-blue,
  .btn-post,
  .btn-join,
  .post-card .post-details-btn,
  .app-events .btn-details:not(.is-ended),
  body.app-profile .profile-btn,
  body.app-post-details .post-follow-btn,
.event-join-btn,
.app-event-details .event-join-btn,
.error-retry-btn,
.donate-xp-submit,
.xp-task-row button:not(:disabled),
.hub-lootbox-bottom button,
  .hub-event-join,
  .hub-explore-btn,
  .hub-xp-task-claim,
  #postModal .inline-post-submit {
    background: var(--btn-blue-bg);
    color: var(--btn-blue-text);
  }
}

/* =========================
   Post Details V2 mobile
========================= */
@media (max-width: 900px) {
  body.app-post-details .home-grid {
    display: block;
    padding-bottom: 0;
  }

  body.app-post-details .page-center,
  body.app-post-details .post-details-center,
  body.app-post-details .post-details-content {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  body.app-post-details .post-details-center {
    padding-bottom: 20px;
    overflow-x: visible;
  }

  body.app-post-details .post-details-back {
    display: none;
  }

  body.app-post-details .post-details-content {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
  }

  body.app-post-details .post-media-stack {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 28px;
  }

  body.app-post-details .post-media-item {
    width: 100%;
    min-width: 0;
    height: auto;
    overflow: hidden;
    border-radius: var(--m-card-radius, 25px);
  }

  body.app-post-details .post-media-stack.media-count-2 .post-media-item,
  body.app-post-details .post-media-stack.media-count-3 .post-media-item,
  body.app-post-details .post-media-stack.media-count-4 .post-media-item {
    height: auto;
    aspect-ratio: auto;
  }

  body.app-post-details .post-media-item .post-media-img,
  body.app-post-details .post-media-item .post-media-video {
    position: static;
    inset: auto;
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    object-position: center;
    transform: none;
  }

  body.app-post-details .post-title {
    margin: 20px 0 20px;
    font-size: var(--glee-title-s-fs, 20px) !important;
    line-height: var(--glee-title-s-lh, 25px) !important;
    font-weight: var(--fw-semibold) !important;
    letter-spacing: var(--glee-title-s-ls, -0.02em) !important;
    color: var(--text-100) !important;
  }

body.app-post-details .post-desc {
  margin: 0 0 18px;
  font-size: 15px !important;
  line-height: 22px !important;
  font-weight: var(--fw-medium) !important;
  letter-spacing: var(--ls-medium) !important;
  color: var(--text-100) !important;
}

  body.app-post-details .post-culture-tag {
    margin: 0 0 16px;
  }

  body.app-post-details .post-culture-tag__chip {
    min-height: 31px;
    padding: 0 13px 0 9px;
  }

  body.app-post-details.is-skeleton .post-media-stack,
  body.app-post-details.is-skeleton .post-media-item {
    min-height: 295px;
  }

}

/* Mobile inline composer modal. */

@media (max-width: 900px) {
  #postModal .modal-panel {
    width: min(100%, 430px) !important;
    max-width: 430px !important;
    margin: 0 auto !important;
  }

  #postModal .inline-post-modal {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #postModal .inline-post-modal .inline-post-composer {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 30px 22px 24px !important;
    border-radius: 28px !important;
  }

  #postModal .inline-post-top {
    gap: 16px !important;
  }

  #postModal .inline-post-avatar {
    width: 55px !important;
    height: 55px !important;
    flex-basis: 55px !important;
  }

  #postModal .inline-post-title {
    font-size: 18px !important;
    line-height: 24px !important;
  }

  #postModal .inline-post-caption {
    margin-top: 30px !important;
    font-size: 15px !important;
    line-height: 22px !important;
  }

  #postModal .inline-post-actions {
    align-items: flex-start !important;
    gap: 18px !important;
    flex-direction: column !important;
  }

  #postModal .inline-post-tags {
    width: 100% !important;
    gap: 10px !important;
  }

  #postModal .inline-post-tag {
    height: 31px !important;
    min-height: 31px !important;
    font-size: 15px !important;
    line-height: 22px !important;
  }

  #postModal .inline-post-submit {
    align-self: flex-end !important;
    width: var(--btn-blue-w) !important;
    min-width: var(--btn-blue-min) !important;
    height: var(--btn-blue-h) !important;
    min-height: var(--btn-blue-h) !important;
  }

  #postModal .inline-post-preview-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-top: 24px !important;
  }

  #postModal .inline-post-preview-item {
    border-radius: 16px !important;
  }

  #postModal .cp-legacy {
    display: none !important;
  }
}

@media (max-width: 900px) {
  /* Mobile Profile Creator ID. */

  body.app-profile .creator-passport-section > .creator-id-title {
    display: none !important;
  }

  body.app-profile .creator-passport-thumb {
    color: var(--text-70) !important;
    opacity: 1 !important;
  }

  body.app-profile .creator-passport-thumb.is-active {
    color: var(--brand) !important;
  }

  body.app-profile .creator-passport-thumb-icon,
  body.app-profile .creator-passport-thumb-line {
    background-color: currentColor !important;
  }

  body.app-profile .creator-passport-thumb-label {
    display: none !important;
  }

  body.app-profile .creator-markets-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: nowrap;
    margin-bottom: 14px;
  }

  body.app-profile .creator-markets-heading {
    min-width: 0;
    flex: 1 1 auto;
  }

  body.app-profile .creator-id-screen .creator-id-title,
  body.app-profile .creator-markets-section .culture-markets-title,
  body.app-profile .creator-markets-section > .creator-id-title {
    margin: 0 0 6px !important;
    font-size: var(--m-section-title-fs) !important;
    line-height: var(--m-section-title-lh) !important;
    font-weight: var(--m-section-title-fw) !important;
    letter-spacing: var(--m-section-title-ls) !important;
    color: var(--m-section-title-color) !important;
  }

  body.app-profile .creator-id-screen .creator-id-subtitle,
  body.app-profile .creator-markets-section .creator-id-subtitle {
    display: none !important;
  }

  body.app-profile .creator-markets-section .culture-markets-title {
    min-width: 0;
    margin: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

}

/* Mobile composer. */

@media (max-width: 900px) {
  #postModal .inline-post-modal .inline-post-composer {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 24px 18px 22px !important;
    border-radius: 28px !important;
  }

  #postModal .inline-post-modal .inline-post-composer:not(.is-expanded) {
    min-height: 0 !important;
  }

  #postModal .inline-post-modal .inline-post-expanded-content {
    display: block !important;
    margin-top: 24px !important;
  }

  #postModal .inline-post-modal .inline-post-media-btn {
    display: inline-flex !important;
  }

  #postModal .inline-post-top {
    display: grid !important;
    grid-template-columns: 55px minmax(0, 1fr) auto !important;
    column-gap: 16px !important;
    align-items: center !important;
  }

  #postModal .inline-post-caption {
    margin-top: 0 !important;
  }

  #postModal .inline-post-actions {
    margin-top: 22px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: end !important;
    gap: 16px !important;
  }

  #postModal .inline-post-tags {
    width: auto !important;
    min-width: 0 !important;
  }

  #postModal .inline-post-preview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-top: 22px !important;
  }
}

/* Mobile Create Post bottom sheet. */

@media (max-width: 900px) {
  #postModal.modal.is-open {
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  #postModal .modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
  }

  #postModal .modal-panel {
    width: 100vw !important;
    max-width: none !important;
    height: auto !important;
    max-height: 86svh !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  #postModal.modal.is-open .modal-panel {
    animation: mobileCreateSheetIn 180ms ease-out both !important;
  }

  #postModal .inline-post-modal {
    width: 100% !important;
    min-height: 80svh !important;
    max-height: 86svh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border-radius: 40px 40px 0 0 !important;
    background: var(--app-bg) !important;
    box-sizing: border-box !important;
    padding: 54px 24px calc(32px + env(safe-area-inset-bottom)) !important;
    position: relative !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #postModal .inline-post-modal::before {
    content: "" !important;
    position: absolute !important;
    top: 18px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 44px !important;
    height: 5px !important;
    border-radius: 999px !important;
    background: rgba(var(--text-rgb), 0.55) !important;
  }

  #postModal .inline-post-close {
    display: none !important;
  }

  #postModal .inline-post-modal .inline-post-composer {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

#postModal .inline-post-top {
  --composer-avatar-size: 50px;
  --composer-title-line-height: 22px;
  --composer-camera-size: 28px;
  --composer-first-line-offset: calc((var(--composer-avatar-size) - var(--composer-title-line-height)) * .5);
  --composer-camera-offset: calc((var(--composer-avatar-size) - var(--composer-camera-size)) * .5);
  display: grid !important;
  grid-template-columns: var(--composer-avatar-size) minmax(0, 1fr) 44px !important;
  column-gap: 18px !important;
  align-items: start !important;
  min-width: 0 !important;
}

  #postModal .inline-post-avatar {
    width: var(--composer-avatar-size) !important;
    height: var(--composer-avatar-size) !important;
    flex: 0 0 var(--composer-avatar-size) !important;
    border-radius: 999px !important;
  }

#postModal .inline-post-title,
#postModal .inline-post-caption {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;

  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;

  resize: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;

  color: var(--text-100) !important;
  font-size: 16px !important;
  line-height: var(--composer-title-line-height) !important;
  font-weight: var(--fw-medium) !important;
  letter-spacing: var(--ls-medium) !important;

  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  overflow: hidden !important;
}

  #postModal .inline-post-title::placeholder,
  #postModal .inline-post-caption::placeholder {
    color: rgba(var(--text-rgb), 0.62) !important;
    opacity: 1 !important;
  }

#postModal .inline-post-title {
  height: auto !important;
  min-height: var(--composer-avatar-size) !important;
  max-height: none !important;
  padding: var(--composer-first-line-offset) 0 0 !important;
  margin: 0 !important;

  display: block !important;
  align-self: start !important;
}

#postModal .inline-post-media-btn {
  width: var(--composer-camera-size) !important;
  height: var(--composer-camera-size) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: start !important;
  justify-self: center !important;
  margin-top: var(--composer-camera-offset) !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: rgba(var(--text-rgb), 0.50) !important;
}

  #postModal .inline-post-media-icon {
    width: 28px !important;
    height: 28px !important;
  }

  #postModal .inline-post-expanded-content {
    display: flex !important;
    flex-direction: column !important;
    margin-top: 22px !important;
    gap: 0 !important;
    align-items: stretch !important;
    min-width: 0 !important;
  }

  #postModal .inline-post-caption {
    min-height: 44px !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }

#postModal .inline-post-actions {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 18px !important;
  margin-top: 22px !important;
  min-width: 0 !important;
}

  #postModal .inline-post-tags {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    row-gap: 10px !important;
    column-gap: 10px !important;
  }

  #postModal .inline-post-error {
    min-height: 0 !important;
    margin: 0 !important;
  }

#postModal .inline-post-preview-grid {
  width: 100% !important;
  max-width: 100% !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-top: 22px !important;
}

#postModal .inline-post-submit {
  align-self: flex-end !important;

  flex: 0 0 auto !important;
  width: var(--btn-blue-w) !important;
  min-width: var(--btn-blue-min) !important;
  max-width: var(--btn-blue-w) !important;

  height: var(--btn-blue-h) !important;
  min-height: var(--btn-blue-h) !important;
  max-height: var(--btn-blue-h) !important;

  aspect-ratio: auto !important;

  box-sizing: border-box !important;
  padding: var(--btn-blue-pad) !important;
  margin: 0 !important;

  border: 0 !important;
  border-radius: var(--btn-blue-radius) !important;

  background: var(--btn-blue-bg) !important;
  color: var(--btn-blue-text) !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-family: var(--font-main) !important;
  font-size: var(--btn-blue-font) !important;
  line-height: var(--btn-blue-lh) !important;
  font-weight: var(--btn-blue-weight) !important;
  letter-spacing: var(--btn-blue-ls) !important;

  text-align: center !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  overflow: hidden !important;
}

  #postModal .cp-legacy {
    display: none !important;
  }

  @keyframes mobileCreateSheetIn {
    from {
      transform: translateY(24px);
    }

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

/* =========================
   Mobile Shared Content Glass Tags
   Canonical geometry for token-driven content tags and dots.
========================= */

@media (max-width: 900px) {
  .post-card .post-card-tag,
  .glee-content-tag,
  .app-content-tag,
  .content-tag,
  .app-events .event-card-tag,
  body.app-hub .hub-content-tag,
  body.app-hub .hub-event-tag,
  body.app-hub .hub-lootbox-media .hub-content-tag,
  body.app-hub .hub-event-date,
  .app-community .community-pill,
  .app-community .community-hero-tag,
  .creator-market-status,
  body.app-profile .creator-market-history-total-tag,
  .lootbox-rarity-pill {
    width: fit-content !important;
    max-width: calc(100% - 36px) !important;
    height: var(--app-content-tag-h) !important;
    min-height: var(--app-content-tag-h) !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--app-content-tag-gap) !important;
    padding: 0 var(--app-content-tag-pad-x) !important;
    border: var(--glass-content-border) !important;
    border-radius: var(--glass-content-radius) !important;
    background: var(--glass-content-bg) !important;
    -webkit-backdrop-filter: var(--glass-content-filter) !important;
    backdrop-filter: var(--glass-content-filter) !important;
    box-shadow: var(--glass-content-shadow) !important;
    font-size: var(--app-content-tag-fs) !important;
    line-height: var(--app-content-tag-lh) !important;
    font-weight: var(--app-content-tag-fw) !important;
    letter-spacing: var(--app-content-tag-ls) !important;
    color: var(--app-content-tag-color) !important;
    white-space: nowrap !important;
  }

  .post-card .post-card-tag-dot,
  .glee-content-tag-dot,
  .app-content-tag-dot,
  .content-tag-dot,
  .app-events .event-card-tag-dot,
  body.app-hub .hub-content-tag-dot,
  body.app-hub .hub-event-tag-dot,
  .app-community .community-pill-dot,
  .app-community .community-hero-tag-dot,
  .creator-market-status::before {
    width: var(--app-content-tag-dot) !important;
    height: var(--app-content-tag-dot) !important;
    flex: 0 0 var(--app-content-tag-dot) !important;
  }
}

/* =========================
   Mobile Home Top Feed
========================= */

@media (max-width: 900px) {
  body.app-home .creators-row {
    --featured-creator-avatar-size: var(--m-featured-creator-avatar-size);
    --featured-creator-slot-w: min(90px, 100%);
    margin-top: var(--m-feed-start-gap) !important;
    margin-bottom: 30px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  body.app-home .creators-title,
  body.app-home .creators-subtitle,
  body.app-home .featured-creator-username {
    display: none !important;
  }

  body.app-home .creators-list {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
    align-items: start !important;
    justify-content: center !important;
    justify-items: center !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  body.app-home .creators-list .featured-creator-card:nth-child(n+5) {
    display: none !important;
  }

  body.app-home .featured-creator-card {
    width: var(--featured-creator-slot-w) !important;
    max-width: var(--featured-creator-slot-w) !important;
    min-width: 0 !important;
    flex: 0 0 var(--featured-creator-slot-w) !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    overflow: visible !important;
  }

  body.app-home .featured-creator-avatar-wrap {
    width: var(--featured-creator-avatar-size) !important;
    height: var(--featured-creator-avatar-size) !important;
    flex: 0 0 var(--featured-creator-avatar-size) !important;
  }

  body.app-home .featured-creator-avatar {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 999px !important;
  }

  body.app-home .featured-creator-name-row {
    width: var(--featured-creator-slot-w) !important;
    max-width: var(--featured-creator-slot-w) !important;
    margin-top: 7px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  body.app-home .featured-creator-name {
    min-width: 0 !important;
    max-width: min(var(--m-featured-creator-name-max-ch), calc(100% - 22px)) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;

    font-size: 15px !important;
    line-height: 22px !important;
    font-weight: var(--fw-medium) !important;
    letter-spacing: var(--ls-medium) !important;
    color: var(--text-100) !important;
  }

  body.app-home .featured-creator-verified {
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 22px !important;
    display: block !important;
  }
}

/* Mobile Home search. */

@media (max-width: 900px) {
  body.app-home .home-topbar {
    z-index: 120 !important;
  }

  body.app-home .topbar-center,
  body.app-home .topbar-center-inner,
  body.app-home .search {
    overflow: visible !important;
  }

  body.app-home .home-topbar .topbar-center-inner,
  body.app-home .home-topbar.is-search-hidden .topbar-center-inner {
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: none !important;
  }

  body.app-home .search-input {
    box-shadow: none !important;
  }

  body.app-home .search-input::placeholder {
    color: rgba(var(--text-rgb), 0.50) !important;
    font-weight: var(--fw-regular) !important;
    letter-spacing: var(--ls-medium) !important;
  }

  body.app-home .search-dd {
    z-index: 300 !important;
  }

  body.app-home .search-dd-inner {
    box-shadow: none !important;
  }

  body.app-home .search-dd-divider {
    display: none !important;
  }
}

/* Mobile Creator ID market history cards. */
@media (max-width: 900px) {
  body.app-profile .creator-market-history-section {
    width: 100%;
  }

  body.app-profile .creator-market-history-section-head {
    margin: 0 0 14px;
  }

  body.app-profile .creator-market-history-section-title {
    margin: 0;
    font-size: var(--m-section-title-fs);
    line-height: var(--m-section-title-lh);
    font-weight: var(--m-section-title-fw);
    letter-spacing: var(--m-section-title-ls);
    color: var(--m-section-title-color);
  }

  body.app-profile .creator-market-history-section-subtitle {
    display: none !important;
  }

  body.app-profile .creator-market-history-grid {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--market-history-grid-gap);
  }

  body.app-profile .creator-markets-empty,
  body.app-profile .market-history-empty {
    align-items: center;
    padding: 0;
    margin: 0;
    gap: 0;
  }

  body.app-profile .creator-markets-empty-title,
  body.app-profile .market-history-empty-title {
    height: 37px;
    padding: 0 16px;
    background: var(--market-empty-pill-bg);
    font-family: var(--font-main);
    font-size: var(--m-small-fs);
    line-height: var(--m-small-lh);
    font-weight: var(--m-small-fw);
    letter-spacing: var(--m-small-ls);
    color: var(--market-empty-pill-text);
  }

  body.app-profile .creator-market-history-card {
    width: 100%;
    min-width: 0;
    aspect-ratio: var(--market-history-card-aspect);
  }

  body.app-profile .creator-market-history-card-head {
    top: clamp(16px, 7.6%, 24px);
    left: clamp(16px, 7.1%, 24px);
    gap: clamp(10px, 3.6%, 16px);
  }

  body.app-profile .creator-market-history-card-flag {
    width: clamp(60px, 21%, 78px);
    max-height: 54px;
  }

  body.app-profile .creator-market-history-card-sales {
    left: clamp(16px, 7.1%, 24px);
    bottom: clamp(66px, 33%, 76px);
    font-size: clamp(26px, 8vw, var(--market-history-sales-fs));
    line-height: 1.1;
  }

  body.app-profile .creator-market-history-total-tag {
    left: clamp(16px, 7.1%, 24px);
    bottom: clamp(16px, 6.6%, 22px);
  }
}

@media (min-width: 901px) {
  .mobile-topbar-action {
    display: none !important;
  }
}

/* =========================
   Signals mobile
========================= */
@media (max-width: 900px) {
  body.app-signals .signals-wrap {
    padding-bottom: calc(var(--m-bottom-content-pad) + 18px);
  }

  body.app-signals .signals-analyze-center {
    padding-bottom: 42px;
  }

  body.app-signals .signals-access-stage {
    width: 100%;
    padding-top: 30px;
  }

  body.app-signals .signals-access-card {
    width: 100%;
    max-width: var(--m-content-w);
    height: auto;
    min-height: 500px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body.app-signals .signals-access-card {
    flex: 0 1 auto;
    padding: 44px 16px 24px;
  }

  body.app-signals .signals-access-logo {
    margin-top: 0;
  }

  body.app-signals .signals-access-title {
    margin-top: 24px;
  }

  body.app-signals .signals-access-code-field {
    margin-top: 50px;
  }

  html[data-resolved-theme="light"] body.app-signals .signals-access-code-cell {
    background: #FFFFFF;
  }

  body.app-signals .signals-access-error {
    position: static;
    width: 100%;
    min-height: 20px;
    margin: 10px 0 -30px;
  }

  body.app-signals .signals-access-submit {
    margin-top: 50px;
  }

  body.app-signals .signals-access-helper {
    display: none;
    position: static;
    width: 100%;
    margin-top: 55px;
  }

  body.app-signals .signals-head {
    width: 100%;
    box-sizing: border-box;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }

  body.app-signals .signals-title {
    min-width: 0;
    white-space: nowrap;
  }

  body.app-signals .signals-head-action {
    width: 37px;
    min-width: 37px;
    max-width: 37px;
    height: 37px;
    flex: 0 0 37px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
  }

  body.app-signals .signals-list {
    gap: 16px;
  }

  body.app-signals .signals-list.is-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.app-signals .signals-discover-toolbar {
    flex-wrap: wrap;
    gap: 14px;
  }

  body.app-signals .signals-new-signals-pill {
    top: calc(var(--m-topbar-height) + var(--m-content-gutter));
  }

  body.app-signals .signals-filter-group {
    width: 100%;
    flex-wrap: wrap;
    gap: 10px;
  }

  body.app-signals .signals-filter-pill {
    padding-left: 16px;
    padding-right: 16px;
  }

  body.app-signals .signals-filter[data-signals-filter="sort"] .signals-filter-panel {
    right: 0;
    left: auto;
    max-width: var(--m-content-w);
  }

  body.app-signals .signals-head-action .signals-toolbar-analyze {
    width: 37px;
    min-width: 37px;
    max-width: 37px;
    height: 37px;
    min-height: 37px;
    max-height: 37px;
    aspect-ratio: 1 / 1;
    flex: 0 0 37px;
    display: inline-flex;
    box-sizing: border-box;
    gap: 0;
    padding: 0;
    border-radius: 50%;
    background: var(--brand);
    align-items: center;
    justify-content: center;
    align-self: center;
    line-height: 0;
  }

  body.app-signals .signals-head-action .signals-toolbar-analyze > span {
    display: none;
  }

  body.app-signals .signals-grid-card {
    width: 100%;
    height: 481px;
    grid-template-rows: 90px minmax(37px, auto) minmax(46px, auto) minmax(54px, auto) 37px;
  }

  body.app-signals .signals-grid-card-header {
    height: 90px;
    grid-template-columns: 90px minmax(0, 1fr);
  }

  body.app-signals .signals-grid-card-avatar {
    width: 90px;
    height: 90px;
  }

  body.app-signals .signals-grid-card-stats.signals-collection-stats {
    width: 100%;
    max-width: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 0;
    column-gap: 8px;
  }

  body.app-signals .signals-grid-card-why.signals-collection-why {
    max-width: none;
    text-align: left;
  }

  body.app-signals .signals-grid-card-footer {
    width: 100%;
  }

  body.app-signals .signals-details-btn {
    width: var(--btn-blue-w);
    min-width: var(--btn-blue-min);
    max-width: var(--btn-blue-w);
    height: var(--btn-blue-h);
    min-height: var(--btn-blue-h);
    padding: var(--btn-blue-pad);
    border-radius: var(--btn-blue-radius);
    font-size: var(--btn-blue-font);
    line-height: var(--btn-blue-lh);
    font-weight: var(--btn-blue-weight);
    letter-spacing: var(--btn-blue-ls);
  }

  body.app-signals .signals-opensea-action {
    width: var(--btn-blue-h);
    height: var(--btn-blue-h);
    flex-basis: var(--btn-blue-h);
  }

  body.app-signals .signals-primary-pill {
    height: var(--glee-tag-h);
    min-height: var(--glee-tag-h);
    padding: 0 var(--glee-tag-pad-x);
  }

  body.app-signals .signals-collection-stat-value {
    font-size: var(--glee-title-s-fs, 20px);
    line-height: var(--glee-title-s-lh, 25px);
    font-weight: var(--fw-semibold);
  }

  body.app-signals .signals-collection-stat-label {
    margin-top: 10px;
    font-size: 15px;
    line-height: 22px;
    font-weight: var(--fw-medium);
  }

  body.app-signals .signals-analyze-landing {
    padding-top: 30px;
  }

  body.app-signals .signals-analyze-title {
    font-size: var(--m-page-title-fs);
    line-height: var(--m-page-title-lh);
    letter-spacing: var(--m-page-title-ls);
  }

  body.app-signals .signals-analyze-form {
    height: 100px;
    margin-top: var(--m-block-gap);
    padding: 0;
    border-radius: var(--m-card-radius);
  }

  body.app-signals .signals-analyze-input {
    height: 57px;
    padding: 0 148px 0 18px;
    font-size: 14px;
  }

  body.app-signals .signals-analyze-submit {
    width: var(--btn-blue-w);
    min-width: var(--btn-blue-min);
    max-width: var(--btn-blue-w);
  }

  body.app-signals .signals-analyze-benefits {
    margin-top: calc(var(--m-block-gap) * 2);
  }

  body.app-signals .signals-analyze-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: var(--m-block-gap);
  }

  body.app-signals .signals-analyze-card {
    height: 105px;
    min-height: 105px;
    padding: 16px 18px;
    border-radius: 34px;
    transform: none;
  }

  body.app-signals .signals-analyze-card:hover {
    transform: none;
  }

  body.app-signals .signals-analyze-card-title,
  body.app-signals .signals-analyze-card-subtitle {
    max-width: 100%;
  }

  body.app-signals .signals-analyze-copy-desktop {
    display: none;
  }

  body.app-signals .signals-analyze-copy-mobile {
    display: inline;
  }

  body.app-signals .signals-analyze-card-title {
    font-size: var(--glee-body-fs);
    line-height: var(--glee-body-lh);
    font-weight: var(--glee-body-medium-fw);
    letter-spacing: var(--glee-body-ls);
  }

  body.app-signals .signals-analyze-card-subtitle {
    margin-top: 4px;
    font-size: var(--glee-small-fs);
    line-height: var(--glee-small-lh);
    font-weight: var(--glee-small-fw);
    letter-spacing: var(--glee-small-ls);
  }

  body.app-signals .signals-analyze-card--light .signals-analyze-card-subtitle {
    color: var(--text-70);
  }

  body.app-signals .signals-analyze-card--blue .signals-analyze-card-subtitle,
  body.app-signals .signals-analyze-card--dark .signals-analyze-card-subtitle {
    color: rgba(255, 255, 255, 0.70);
  }

  body.app-signals .signals-analyze-card-action {
    display: none;
  }

  body.app-collection-details {
    --collection-details-header-edge-inset: 14px;
    --collection-details-section-gap: 18px;
    --collection-details-block-pad: 16px;
    --collection-details-market-card-h: 110px;
    --collection-details-market-padding: 18px;
    --collection-details-score-size: 199px;
    --collection-details-score-track: 18px;
    --collection-details-score-progress: 14px;
    --profile-avatar-size: var(--profile-mobile-avatar-size);
    --profile-avatar-stroke: 3px;
  }

  body.app-collection-details .home-grid {
    display: block;
    padding-bottom: 0;
  }

  body.app-collection-details .page-center,
  body.app-collection-details .collection-details-center,
  body.app-collection-details .collection-details-root {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  body.app-collection-details .collection-details-center {
    padding-bottom: calc(var(--m-bottom-nav-safe-pad) + 24px);
    overflow-x: visible;
  }

  body.app-collection-details .collection-details-back,
  body.app-signals .signals-analyze-center > .collection-details-back {
    display: none;
  }

  body.app-collection-details .signals-state-card {
    padding: 16px;
    border-radius: var(--m-card-radius);
  }

  body.app-collection-details .signals-details-banner {
    height: var(--profile-mobile-banner-h);
    border-radius: var(--profile-banner-radius);
  }

  body.app-collection-details .signals-details-header-body {
    margin-top: calc(var(--profile-avatar-size) * -0.5);
    padding: 0 var(--collection-details-header-edge-inset) 16px;
    display: flex;
    flex-direction: column;
  }

  body.app-collection-details .signals-details-identity,
  body.app-collection-details .signals-details-title-row {
    display: contents;
  }

  body.app-collection-details .signals-details-title-main {
    order: 1;
    width: auto;
    min-width: 0;
    height: var(--profile-avatar-size);
    box-sizing: border-box;
    padding-top: calc(var(--profile-avatar-size) * 0.5);
    margin-left: calc(var(--profile-avatar-size) + 14px);
  }

  body.app-collection-details .signals-details-avatar-wrap,
  body.app-collection-details .signals-details-avatar {
    width: var(--profile-avatar-size);
    height: var(--profile-avatar-size);
    flex-basis: var(--profile-avatar-size);
  }

  body.app-collection-details .signals-details-avatar {
    border-width: 3px;
    border-color: var(--profile-avatar-stroke-color);
  }

  body.app-collection-details .signals-details-title {
    flex: 0 1 auto;
    min-width: 0;
    font-family: var(--font-main);
    font-size: var(--glee-title-s-fs);
    line-height: var(--glee-title-s-lh);
    font-weight: var(--fw-medium);
    letter-spacing: var(--profile-display-ls);
    color: var(--text-100);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: normal;
  }

  body.app-collection-details .signals-details-title-main .signals-collection-verified {
    flex-shrink: 0;
  }

  body.app-collection-details .signals-details-title-row > .signals-collection-chain {
    order: 3;
    align-self: flex-start;
    margin-top: 16px;
  }

  body.app-collection-details .signals-details-opensea-action {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    right: 18px;
    bottom: 16px;
  }

  body.app-collection-details .signals-details-section {
    margin-top: var(--collection-details-section-gap);
  }

  body.app-collection-details .signals-overview-layout {
    align-items: flex-start;
  }

  body.app-collection-details .signals-detail-pill-row {
    justify-content: flex-start;
    margin-top: 16px;
  }

  body.app-collection-details .signals-details-evidence-list {
    margin-top: 16px;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  body.app-collection-details .signals-overview-layout {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 20px;
  }

  body.app-collection-details .signals-market-grid {
    order: 2;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  body.app-collection-details .signals-score-ring {
    justify-self: center;
  }

  body.app-collection-details .signals-overview-copy {
    width: 100%;
  }

  body.app-collection-details .signals-overview-title {
    text-align: center;
  }

  body.app-collection-details .signals-market-tile {
    min-height: var(--collection-details-market-card-h);
    border-radius: var(--profile-banner-radius);
    padding: var(--collection-details-market-padding);
  }

  body.app-collection-details .signals-market-value {
    font-size: var(--glee-value-m-fs);
    line-height: var(--glee-value-m-lh);
    font-weight: var(--glee-value-m-fw);
    letter-spacing: var(--glee-value-m-ls);
  }

  body.app-collection-details .signals-details-skel-banner {
    height: var(--profile-mobile-banner-h);
    border-radius: var(--profile-banner-radius);
  }

  body.app-collection-details .signals-details-skel-header {
    grid-template-columns: var(--profile-avatar-size) 1fr;
    margin-top: calc(var(--profile-avatar-size) * -0.5);
    padding: 0 var(--collection-details-header-edge-inset);
  }

  body.app-collection-details .signals-details-skel-header span:first-child {
    width: var(--profile-avatar-size);
    height: var(--profile-avatar-size);
    border-color: var(--profile-avatar-stroke-color);
  }

  body.app-collection-details .signals-details-skel-header span:last-child {
    margin-bottom: 12px;
  }

  body.app-collection-details .signals-details-skel-market {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  body.app-collection-details .signals-details-skel-market span {
    height: var(--collection-details-market-card-h);
    border-radius: var(--profile-banner-radius);
  }

  body.app-collection-details .signals-details-skel-overview {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  body.app-collection-details .signals-details-skel-overview span:first-child {
    grid-row: auto;
  }

  body.app-collection-details .signals-details-skel-evidence {
    grid-template-columns: 1fr;
  }

  body.app-collection-details .signals-details-skel-evidence span {
    height: 130px;
  }
}

/* =========================
   Mobile global navigation + segmented UI states
========================= */
@media (max-width: 900px) {
  body.app-home .mobile-switcher-shell > .home-tabs,
  body.app-hub .mobile-switcher-shell > .hub-switch,
  body.app-hub .mobile-switcher-shell > .hub-progress-switch {
    position: relative !important;
    top: auto !important;
    z-index: 1 !important;
    margin: 0 auto !important;
    transform: none !important;
    pointer-events: auto !important;
  }

body.app-home .mobile-switcher-shell > .home-tabs,
body.app-hub .mobile-switcher-shell > .hub-switch,
body.app-hub .mobile-switcher-shell > .hub-progress-switch {
  grid-template-columns: var(--ui-switcher-tab-w) var(--ui-switcher-tab-w) !important;
}

body.app-home .mobile-switcher-shell > .home-tabs .home-tab,
body.app-hub .mobile-switcher-shell > .hub-switch button,
body.app-hub .mobile-switcher-shell > .hub-progress-switch button {
  flex: 0 0 var(--ui-switcher-tab-w) !important;
  width: var(--ui-switcher-tab-w) !important;
  min-width: var(--ui-switcher-tab-w) !important;
  max-width: var(--ui-switcher-tab-w) !important;
}

  body.app-home .home-tabs,
  body.app-profile .profile-tabs,
  body.app-hub .hub-switch,
  body.app-hub .hub-progress-switch,
  body.app-leaderboard .leaderboard-switch {
    width: var(--ui-switcher-w) !important;
    max-width: min(var(--ui-switcher-w), 100%) !important;
    height: var(--ui-switcher-h) !important;
    box-sizing: border-box !important;

    display: grid !important;
    grid-template-columns: var(--ui-switcher-tab-w) var(--ui-switcher-tab-w) !important;
    column-gap: var(--ui-switcher-gap) !important;
    align-items: center !important;
    justify-content: center !important;

    padding: var(--ui-switcher-pad) !important;
    gap: var(--ui-switcher-gap) !important;
    overflow: hidden !important;

    border: 0 !important;
    border-radius: var(--ui-switcher-radius) !important;
    background: var(--glass-ui-bg) !important;

    -webkit-backdrop-filter: var(--glass-ui-filter) !important;
    backdrop-filter: var(--glass-ui-filter) !important;

    box-shadow: var(--switcher-glass-shadow) !important;
  }

  body.app-home .home-tabs,
  body.app-profile .profile-tabs,
  body.app-leaderboard .leaderboard-switch {
    position: sticky !important;
    top: var(--feed-switcher-sticky-top) !important;
  }

  body.app-home .home-tabs {
    z-index: 50 !important;
    margin: 0 auto var(--home-feed-gap) !important;
  }

  body.app-profile .profile-tabs {
    z-index: 60 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 8px !important;
    margin-bottom: 15px !important;
    transform: none !important;
  }

  body.app-home .home-tabs .tabs-indicator,
  body.app-profile .profile-tabs .tabs-indicator {
    display: none !important;
  }

  body.app-home .home-tabs .home-tab,
  body.app-profile .profile-tabs .profile-tab,
  body.app-hub .hub-switch button,
  body.app-hub .hub-progress-switch button,
  body.app-leaderboard .leaderboard-switch button {
    width: var(--ui-switcher-tab-w) !important;
    min-width: var(--ui-switcher-tab-w) !important;
    max-width: var(--ui-switcher-tab-w) !important;

    height: var(--ui-switcher-tab-h) !important;
    min-height: var(--ui-switcher-tab-h) !important;
    max-height: var(--ui-switcher-tab-h) !important;

    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: var(--ui-switcher-radius) !important;

    background: transparent !important;
    color: var(--switcher-text) !important;

    font-family: var(--font-main) !important;
    font-size: var(--switcher-font-size) !important;
    line-height: var(--switcher-line-height) !important;
    font-weight: var(--switcher-font-weight) !important;
    letter-spacing: var(--switcher-letter-spacing) !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
    appearance: none !important;
    cursor: pointer;
  }

  body.app-home .home-tabs .home-tab.is-active,
  body.app-profile .profile-tabs .profile-tab.is-active,
  body.app-hub .hub-switch button.is-active,
  body.app-hub .hub-progress-switch button.is-active,
  body.app-leaderboard .leaderboard-switch button.is-active {
    border-radius: var(--ui-switcher-radius) !important;
    background: var(--switcher-active-bg) !important;
    color: var(--switcher-active-text) !important;
  }

  body.app-home .home-tabs .home-tab:hover,
  body.app-home .home-tabs .home-tab:focus,
  body.app-profile .profile-tabs .profile-tab:hover,
  body.app-profile .profile-tabs .profile-tab:focus,
  body.app-hub .hub-switch button:hover,
  body.app-hub .hub-switch button:focus,
  body.app-hub .hub-progress-switch button:hover,
  body.app-hub .hub-progress-switch button:focus,
  body.app-leaderboard .leaderboard-switch button:hover,
  body.app-leaderboard .leaderboard-switch button:focus {
    color: var(--switcher-text) !important;
  }

  body.app-home .home-tabs .home-tab.is-active:hover,
  body.app-home .home-tabs .home-tab.is-active:focus,
  body.app-profile .profile-tabs .profile-tab.is-active:hover,
  body.app-profile .profile-tabs .profile-tab.is-active:focus,
  body.app-hub .hub-switch button.is-active:hover,
  body.app-hub .hub-switch button.is-active:focus,
  body.app-hub .hub-progress-switch button.is-active:hover,
  body.app-hub .hub-progress-switch button.is-active:focus,
  body.app-leaderboard .leaderboard-switch button.is-active:hover,
  body.app-leaderboard .leaderboard-switch button.is-active:focus {
    color: var(--switcher-active-text) !important;
  }

  body.app-home .home-tabs .home-tab::before,
  body.app-home .home-tabs .home-tab.is-active::before,
  body.app-home .home-tabs .home-tab::after,
  body.app-home .home-tabs .home-tab.is-active::after,
  body.app-profile .profile-tabs .profile-tab::before,
  body.app-profile .profile-tabs .profile-tab.is-active::before,
  body.app-profile .profile-tabs .profile-tab::after,
  body.app-profile .profile-tabs .profile-tab.is-active::after {
    display: none !important;
    content: none !important;
  }
}

/* Creator ID country modals: responsive companion to the desktop redesign. */
@media (max-width: 900px) {
  .creator-mint-modal.is-open,
  .creator-visa-modal.is-open {
    box-sizing: border-box;
    height: 100vh;
    height: 100dvh;
    padding: 16px;
    padding-top: max(16px, env(safe-area-inset-top));
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    align-items: center;
    justify-content: center;
    overflow-x: hidden;
    overflow-y: hidden;
  }

  .creator-modal__panel.creator-mint-modal__panel,
  .creator-modal__panel.creator-visa-modal__panel {
    width: min(100%, calc(100vw - 32px));
    max-width: min(100%, calc(100vw - 32px));
    height: auto;
    min-height: 0;
    max-height: min(82vh, calc(100vh - 32px));
    max-height: min(82vh, calc(100dvh - 32px));
    border-radius: var(--creator-modal-radius);
    overflow: hidden;
  }

  .creator-modal__card.creator-mint-modal__card,
  .creator-modal__card.creator-visa-modal__card {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: min(82vh, calc(100vh - 32px));
    max-height: min(82vh, calc(100dvh - 32px));
    padding: var(--action-modal-padding);
    border-radius: var(--creator-modal-radius);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    box-shadow: none;
  }

  .creator-modal__hero.creator-country-modal-hero {
    width: 100%;
    height: auto;
    aspect-ratio: 1.9 / 1;
    margin: 0;
    border-radius: var(--creator-modal-hero-radius);
  }

  .creator-country-pill {
    top: 14px;
    right: 16px;
    width: max-content;
    max-width: calc(100% - 32px);
    height: 50px;
    border-radius: 20px;
  }

  .creator-country-pill__flag {
    width: auto;
    max-width: 60px;
    height: 40px;
    flex-basis: auto;
    border-radius: 15px;
  }

  .creator-mint-modal__title,
  .creator-visa-modal__title {
    margin: 22px 0 0 !important;
    font-size: var(--hub-section-title-fs) !important;
    line-height: var(--hub-section-title-lh) !important;
    font-weight: var(--hub-section-title-fw) !important;
    letter-spacing: var(--hub-section-title-ls) !important;
  }

  .creator-mint-modal__copy,
  .creator-visa-modal__subtitle {
    margin: 16px 0 0 !important;
    font-size: var(--hub-section-subtitle-fs) !important;
    line-height: var(--hub-section-subtitle-lh) !important;
    font-weight: var(--hub-section-subtitle-fw) !important;
    letter-spacing: var(--hub-section-subtitle-ls) !important;
    color: var(--text-100) !important;
  }

  .creator-mint-modal__section-title,
  .creator-visa-modal__section-title {
    margin: 24px 0 16px;
    font-size: var(--hub-section-title-fs) !important;
    line-height: var(--hub-section-title-lh) !important;
    font-weight: var(--hub-section-title-fw) !important;
    letter-spacing: var(--hub-section-title-ls) !important;
    color: var(--brand) !important;
  }

  .creator-visa-modal__divider {
    margin: 12px 0;
    font-size: var(--glee-small-fs);
    line-height: var(--glee-small-lh);
    font-weight: var(--glee-small-fw);
    letter-spacing: var(--glee-small-ls);
    color: var(--text-70);
    text-align: center;
  }

  .creator-mint-modal__info-row,
  .creator-visa-modal__path {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 82px;
    box-sizing: border-box;
    margin: 0;
    padding: 14px 18px;
    border: 1px solid var(--creator-modal-info-border);
    border-radius: 40px;
    background: var(--creator-modal-info-bg);
  }

  .creator-visa-modal__path--with-progress {
    grid-template-columns: 50px minmax(0, 1fr) auto;
  }

  .creator-mint-modal__icon,
  .creator-visa-modal__icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
    flex: 0 0 50px;
    border-radius: 12px;
    background: var(--creator-modal-icon-bg);
  }

  .creator-mint-modal__icon img {
    width: 28px;
    height: 28px;
    display: block;
    object-fit: contain;
  }

  .creator-visa-modal__icon img {
    width: 28px;
    height: 28px;
    display: block;
    object-fit: contain;
    filter: none;
  }

  .creator-mint-modal__info-main,
  .creator-visa-modal__path-main {
    font-size: var(--settings-body-fs) !important;
    line-height: var(--settings-body-lh) !important;
    font-weight: var(--settings-body-fw) !important;
    letter-spacing: var(--settings-body-ls) !important;
  }

  .creator-mint-modal__info-sub,
  .creator-visa-modal__path-sub {
    margin-top: 5px;
    font-size: var(--event-meta-fs) !important;
    line-height: var(--event-meta-lh) !important;
    font-weight: var(--event-meta-fw) !important;
    letter-spacing: var(--event-meta-ls) !important;
    color: var(--text-70) !important;
  }

  .creator-mint-modal__input-row,
  .creator-visa-modal__input-row {
    width: 100%;
    height: 47px;
    min-height: 47px;
    margin-top: 24px;
    padding: 5px 5px 5px 16px;
    gap: 8px;
    border: 0;
    border-radius: 999px;
    background: var(--modal-neutral-surface);
  }

  .creator-visa-modal__footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 15px;
    margin-top: 24px;
  }

  .creator-visa-modal__footer--with-input .creator-visa-modal__input-row {
    width: 100%;
    min-width: 0;
    margin-top: 0;
  }

  .creator-visa-modal__check {
    flex: 0 0 auto;
    margin: 0;
  }

  .creator-mint-modal__error,
  .creator-visa-modal__error {
    display: none !important;
    margin: 0 !important;
    min-height: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  .creator-wl-claimed-modal.is-open {
    box-sizing: border-box;
    padding: max(12px, env(safe-area-inset-top)) 0 max(12px, env(safe-area-inset-bottom));
    align-items: center;
    justify-content: center;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .creator-wl-claimed-panel {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    height: auto;
    min-height: 0;
    max-height: calc(100svh - 24px);
    border-radius: 34px;
    overflow: visible;
  }

  .creator-wl-claimed-card {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: calc(100svh - 24px);
    padding: var(--creator-modal-pad-mobile);
    border-radius: 34px;
    overflow-x: hidden;
    overflow-y: auto;
    box-shadow: none;
  }

  .creator-wl-claimed-title {
    font-size: var(--hub-section-title-fs) !important;
    line-height: var(--hub-section-title-lh) !important;
    font-weight: var(--hub-section-title-fw) !important;
    letter-spacing: var(--hub-section-title-ls) !important;
  }

  .creator-wl-claimed-title-icon {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
  }

  .creator-wl-claimed-subtitle {
    margin-top: 10px !important;
    font-size: var(--hub-section-subtitle-fs) !important;
    line-height: var(--hub-section-subtitle-lh) !important;
    font-weight: var(--hub-section-subtitle-fw) !important;
    letter-spacing: var(--hub-section-subtitle-ls) !important;
  }

  .creator-wl-claimed-passport {
    margin-top: 20px;
  }

  .creator-wl-claimed-actions {
    margin-top: 20px;
  }

  .creator-wl-claimed-download {
    max-width: 100%;
    white-space: nowrap;
  }
}

@media (max-width: 520px) {
  .creator-mint-modal__input-row,
  .creator-visa-modal__input-row {
    padding-left: 16px;
  }

}

/* =========================
   Culture Hub: narrow fallback
========================= */
@media (max-width: 900px) {
  body.app-hub .hub-page,
  body.app-hub .hub-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  body.app-hub .hub-wrap {
    padding-bottom: 0;
  }

  body.app-hub .hub-hero {
    min-height: 0;
    aspect-ratio: 191 / 116;
  }

  body.app-hub .hub-hero-image {
    object-position: center center;
  }

  body.app-hub .hub-hero-copy {
    left: 20px;
    right: 20px;
    top: auto;
    bottom: 22px;
    width: auto;
    transform: none;
  }

  body.app-hub .hub-hero-copy h2 {
    font-size: 34px;
  }

  body.app-hub .hub-hero-copy p {
    display: none;
  }

  body.app-hub .hub-explore-btn {
    position: absolute;
    right: 0;
    bottom: 0;
    margin-top: 0;
  }

  body.app-hub .hub-section {
    margin-top: 38px;
  }

  body.app-hub .hub-section-head {
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 14px;
  }

  body.app-hub .hub-section-title {
    font-size: var(--hub-section-title-fs) !important;
    line-height: var(--hub-section-title-lh) !important;
  }

  body.app-hub .hub-section-subtitle {
    display: none !important;
  }

  body.app-hub .hub-top-signals-section .hub-section-head {
    flex-wrap: nowrap;
    align-items: center;
  }

  body.app-hub .hub-top-signals-scope {
    gap: 22px;
    margin-top: 0;
  }

  body.app-hub .hub-top-signals-card {
    padding: 20px;
  }

  body.app-hub .hub-top-signals-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  body.app-hub .hub-top-signals-scroll::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  body.app-hub .hub-top-signals-columns,
  body.app-hub .hub-top-signals-body {
    min-width: 755px;
    row-gap: 12px;
  }

  body.app-hub .hub-top-signals-columns > span {
    font-size: 16px;
    font-weight: var(--fw-medium);
  }

  body.app-hub .hub-top-signals-name,
  body.app-hub .hub-top-signals-primary {
    font-size: 16px;
  }

  body.app-hub .hub-top-signals-collection {
    grid-template-columns: 57px 129px;
  }

  body.app-hub .hub-top-signals-avatar {
    width: 57px;
    height: 57px;
  }

  body.app-hub .hub-top-signals-state {
    min-height: 260px;
  }

  .hub-info-modal.is-open,
  .glee-app-info-modal.is-open {
    align-items: center;
    padding: 16px;
  }

  .hub-info-modal-panel,
  .glee-app-info-panel {
    width: min(100%, calc(100vw - 32px));
    max-width: min(100%, calc(100vw - 32px));
    max-height: min(82vh, calc(100vh - 32px));
    max-height: min(82vh, calc(100dvh - 32px));
  }

  .hub-info-modal-card,
  .glee-app-info-card {
    max-height: min(82vh, calc(100vh - 32px));
    max-height: min(82vh, calc(100dvh - 32px));
    padding: 28px 22px;
    border-radius: 24px;
  }

  .hub-info-modal-title,
  .glee-app-info-title {
    font-size: var(--glee-title-s-fs);
    line-height: var(--glee-title-s-lh);
    font-weight: var(--glee-title-s-fw);
    letter-spacing: var(--glee-title-s-ls);
  }

  .hub-info-modal-body,
  .glee-app-info-body {
    margin-top: 20px;
    padding-right: 4px;
  }

  .ha-wallet-pagination {
    gap: 8px;
  }

  .hub-info-step,
  .glee-app-info-section,
  .glee-app-info-section + .glee-app-info-section {
    gap: 12px;
    padding: 15px 0;
  }

  .hub-info-tabs {
    height: var(--ui-switcher-h);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: var(--ui-switcher-gap);
    padding: var(--ui-switcher-pad);
  }

  .hub-info-tab {
    justify-content: center;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: var(--ui-switcher-tab-h);
    min-height: var(--ui-switcher-tab-h);
    max-height: var(--ui-switcher-tab-h);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .hub-info-lootbox-head {
    height: 76px;
    align-items: center;
    gap: 14px;
  }

  .hub-info-lootbox-art {
    width: 66px;
    height: 66px;
    flex-basis: 66px;
  }

  .hub-info-grid {
    grid-template-columns: 1fr;
  }

  /* Canonical mobile Culture Market component. */
  body.app-hub .creator-market-card,
  body.app-event-details .creator-market-card,
  body.app-profile .creator-market-card {
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    overflow: hidden;
    border-radius: var(--app-tile-radius);
    background-color: var(--surface-card);
    box-shadow: none;
    color: var(--text-100);
    padding: 0;
  }

  body.app-hub .creator-market-hero,
  body.app-event-details .creator-market-hero,
  body.app-profile .creator-market-hero {
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 0;
    aspect-ratio: 191 / 108;
    overflow: hidden;
    background: #EAF0FF;
    border-radius: var(--app-tile-radius) var(--app-tile-radius) 0 0;
  }

  body.app-hub .creator-market-hero-img,
  body.app-event-details .creator-market-hero-img,
  body.app-profile .creator-market-hero-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }

  :is(body.app-profile, body.app-hub, body.app-event-details) .creator-market-status-pill {
    position: absolute;
    top: 16px;
    left: 16px;
    right: auto;
    z-index: 2;
    width: fit-content;
    max-width: calc(100% - 36px);
    height: var(--app-content-tag-h);
    min-height: var(--app-content-tag-h);
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--app-content-tag-gap);
    padding: 0 var(--app-content-tag-pad-x);
    border: var(--glass-content-border);
    border-radius: var(--glass-content-radius);
    background: var(--glass-content-bg);
    -webkit-backdrop-filter: var(--glass-content-filter);
    backdrop-filter: var(--glass-content-filter);
    box-shadow: var(--glass-content-shadow);
    color: var(--app-content-tag-color);
    font-size: var(--app-content-tag-fs);
    line-height: var(--app-content-tag-lh);
    font-weight: var(--app-content-tag-fw);
    letter-spacing: var(--app-content-tag-ls);
    white-space: nowrap;
  }

  :is(body.app-profile, body.app-hub, body.app-event-details) .creator-market-status-pill::before {
    content: "";
    width: var(--app-content-tag-dot);
    height: var(--app-content-tag-dot);
    flex: 0 0 var(--app-content-tag-dot);
    border-radius: 999px;
  }

  :is(body.app-profile, body.app-hub, body.app-event-details) .creator-market-status-pill[hidden] {
    display: none !important;
  }

  body.app-hub .creator-market-body,
  body.app-event-details .creator-market-body,
  body.app-profile .creator-market-body {
    min-width: 0;
    min-height: 156px;
    height: auto;
    box-sizing: border-box;
    padding: 14px 20px 20px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(var(--btn-blue-min), var(--btn-blue-w));
    grid-template-rows: auto auto 1fr;
    column-gap: 14px;
    row-gap: 8px;
  }

  body.app-hub .creator-market-bottom,
  body.app-event-details .creator-market-bottom,
  body.app-profile .creator-market-bottom {
    display: contents;
    margin-top: 0;
  }

  body.app-hub .creator-market-topline,
  body.app-event-details .creator-market-topline,
  body.app-profile .creator-market-topline {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }

  body.app-hub .creator-market-country-line,
  body.app-event-details .creator-market-country-line,
  body.app-profile .creator-market-country-line {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  body.app-hub .creator-market-inline-flag,
  body.app-event-details .creator-market-inline-flag,
  body.app-profile .creator-market-inline-flag {
    width: 22px;
    height: 15px;
    flex: 0 0 22px;
    object-fit: contain;
  }

  body.app-hub .creator-market-country,
  body.app-event-details .creator-market-country,
  body.app-profile .creator-market-country {
    min-width: 0;
    font-size: 14px;
    line-height: 20px;
    font-weight: var(--fw-regular);
    letter-spacing: var(--ls-medium);
    color: var(--text-100);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.app-hub .creator-market-visa,
  body.app-event-details .creator-market-visa,
  body.app-profile .creator-market-visa {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
    margin: 0;
    font-size: 15px;
    line-height: 22px;
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-medium);
    color: var(--text-100);
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  body.app-hub .creator-market-progress-block,
  body.app-event-details .creator-market-progress-block,
  body.app-profile .creator-market-progress-block {
    grid-column: 1;
    grid-row: 3;
    min-width: 0;
    align-self: end;
  }

  body.app-hub .creator-market-session-block,
  body.app-event-details .creator-market-session-block,
  body.app-profile .creator-market-session-block {
    grid-column: 2;
    grid-row: 1 / span 2;
    min-width: 0;
    align-self: start;
    text-align: right;
  }

  body.app-hub .creator-market-meta-label,
  body.app-event-details .creator-market-meta-label,
  body.app-profile .creator-market-meta-label {
    margin: 0 0 4px;
    font-size: 14px;
    line-height: 20px;
    font-weight: var(--fw-regular);
    letter-spacing: var(--ls-medium);
    color: var(--text-70);
  }

  body.app-hub .creator-market-progress-value,
  body.app-event-details .creator-market-progress-value,
  body.app-profile .creator-market-progress-value,
  body.app-hub .creator-market-session,
  body.app-event-details .creator-market-session,
  body.app-profile .creator-market-session {
    margin: 0;
    font-size: 15px;
    line-height: 22px;
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-medium);
    color: var(--text-100);
    white-space: nowrap;
  }

  body.app-hub .creator-market-session.is-live,
  body.app-event-details .creator-market-session.is-live,
  body.app-profile .creator-market-session.is-live {
    color: var(--brand);
  }

  body.app-hub .creator-market-progress-track,
  body.app-event-details .creator-market-progress-track,
  body.app-profile .creator-market-progress-track {
    width: 100%;
    max-width: 210px;
    height: 6px;
    margin-top: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--surface-secondary);
  }

  body.app-hub .creator-market-progress-fill,
  body.app-event-details .creator-market-progress-fill,
  body.app-profile .creator-market-progress-fill {
    height: 100%;
    border-radius: inherit;
    background: var(--brand);
  }

  body.app-hub .creator-market-btn,
  body.app-event-details .creator-market-btn,
  body.app-profile .creator-market-btn {
    grid-column: 2;
    grid-row: 3;
    align-self: end;
    justify-self: end;
    margin: 0;
    width: var(--btn-blue-w);
    min-width: var(--btn-blue-min);
    max-width: var(--btn-blue-w);
    height: var(--btn-blue-h);
    min-height: var(--btn-blue-h);
    box-sizing: border-box;
    padding: var(--btn-blue-pad);
    border-radius: var(--btn-blue-radius);
    font-family: var(--font-main);
    font-size: var(--btn-blue-font);
    line-height: var(--btn-blue-lh);
    font-weight: var(--btn-blue-weight);
    letter-spacing: var(--btn-blue-ls);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    text-decoration: none;
  }

  body.app-hub .creator-market-btn--filled,
  body.app-event-details .creator-market-btn--filled,
  body.app-profile .creator-market-btn--filled {
    border-color: var(--cta-primary-border) !important;
    background: var(--cta-primary-bg) !important;
    color: var(--cta-primary-text) !important;
  }

  body.app-hub .creator-market-btn--outline-blue,
  body.app-event-details .creator-market-btn--outline-blue,
  body.app-profile .creator-market-btn--outline-blue {
    border-color: var(--cta-brand-outline-border) !important;
    background: var(--cta-brand-outline-bg) !important;
    color: var(--cta-brand-outline-text) !important;
  }

  body.app-hub .creator-market-btn--outline-muted,
  body.app-event-details .creator-market-btn--outline-muted,
  body.app-profile .creator-market-btn--outline-muted {
    border-color: var(--cta-neutral-outline-border) !important;
    background: var(--cta-neutral-outline-bg) !important;
    color: var(--cta-neutral-outline-text) !important;
  }

  /* Campaign Details composes the existing mobile Details, identity, market and Progress primitives. */
  body.app-event-details .campaign-details-content,
  body.app-event-details .campaign-details-content > * {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  body.app-event-details .event-hero {
    border-radius: var(--m-card-radius);
  }

  body.app-event-details .campaign-host-row {
    width: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--m-gap-2);
  }

  body.app-event-details .campaign-host {
    min-width: 0;
    max-width: 100%;
    flex: 0 1 auto;
    padding: 0;
    border: 0;
    background: transparent;
    display: flex;
    align-items: center;
    gap: var(--m-gap-2);
    color: inherit;
    cursor: pointer;
    text-align: left;
  }

  body.app-event-details .campaign-host-avatar,
  body.app-event-details .campaign-user-avatar {
    width: var(--m-featured-creator-avatar-size);
    height: var(--m-featured-creator-avatar-size);
    flex: 0 0 var(--m-featured-creator-avatar-size);
    border-radius: 50%;
    object-fit: cover;
  }

  body.app-event-details .campaign-host-copy {
    min-width: 0;
    overflow: hidden;
    display: inline-flex;
    flex: 1 1 auto;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
  }

  body.app-event-details .campaign-host-label {
    font-size: var(--glee-small-fs);
    line-height: var(--glee-small-lh);
    font-weight: var(--glee-small-fw);
    letter-spacing: var(--glee-small-ls);
    color: var(--text-70);
  }

  body.app-event-details :is(.campaign-host, .campaign-user) .featured-creator-name-row {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    overflow: visible !important;
  }

  body.app-event-details :is(.campaign-host, .campaign-user) .featured-creator-name {
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: var(--glee-body-fs) !important;
    line-height: var(--glee-body-lh) !important;
    font-weight: var(--glee-body-medium-fw) !important;
    letter-spacing: var(--glee-body-ls) !important;
    color: var(--text-100) !important;
  }

  body.app-event-details :is(.campaign-host, .campaign-user) .featured-creator-verified {
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 22px !important;
    margin: 0 !important;
    display: block !important;
  }

  body.app-event-details [data-campaign-host-badge] {
    display: inline-flex;
    align-items: center;
  }

  body.app-event-details .campaign-host-label {
    flex: 0 0 auto;
  }

  body.app-event-details .campaign-host-identity {
    flex: 1 1 auto;
    flex-wrap: nowrap;
  }

  body.app-event-details .campaign-timing {
    min-width: 0;
    flex: 0 0 auto;
    margin-left: auto;
    white-space: nowrap;
    color: var(--text-70);
  }

  body.app-event-details .campaign-calendar-icon {
    color: inherit;
    background-color: currentColor;
  }

  body.app-event-details .event-about,
  body.app-event-details .campaign-how-it-works,
  body.app-event-details .campaign-whitelist-status,
  body.app-event-details .campaign-creator-status:not([hidden]) {
    margin-top: var(--m-section-gap);
  }

  body.app-event-details .event-about > .glee-section-title {
    margin-bottom: 18px;
  }

  body.app-event-details .event-about-text {
    margin-bottom: var(--m-gap-2);
    white-space: pre-line;
    font-size: var(--m-body-fs);
    line-height: var(--m-body-lh);
    font-weight: var(--m-body-fw);
    letter-spacing: var(--m-body-ls);
    color: var(--text-70);
  }

  body.app-event-details .campaign-section-subtitle {
    margin: 6px 0 18px;
    font-size: var(--m-body-fs);
    line-height: var(--m-body-lh);
    font-weight: var(--m-body-fw);
    letter-spacing: var(--m-body-ls);
    color: var(--text-70);
  }

  body.app-event-details .campaign-steps {
    display: grid;
    gap: var(--m-card-gap);
  }

  body.app-event-details .campaign-step {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: var(--m-gap-3);
  }

  body.app-event-details .campaign-step-pill {
    width: 55px;
    height: var(--btn-blue-h);
    flex: 0 0 55px;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--glee-body-fs);
    line-height: var(--glee-body-lh);
    font-weight: var(--glee-body-medium-fw);
    letter-spacing: var(--glee-body-ls);
  }

  body.app-event-details .campaign-step-copy {
    min-width: 0;
    display: grid;
    grid-template-rows: var(--btn-blue-h) auto;
    row-gap: 3px;
  }

  body.app-event-details .campaign-step-title {
    align-self: center;
    font-size: 17px;
    line-height: 22px;
    font-weight: var(--fw-medium);
    letter-spacing: var(--glee-body-ls);
    color: var(--text-100);
  }

  body.app-event-details .campaign-step-description {
    font-size: var(--glee-body-fs);
    line-height: var(--glee-body-lh);
    font-weight: var(--glee-body-medium-fw);
    letter-spacing: var(--glee-body-ls);
    color: var(--text-70);
  }

  body.app-event-details .campaign-user {
    min-width: 0;
    margin: 0 0 var(--m-card-gap);
    display: flex;
    align-items: center;
    gap: var(--m-gap-2);
  }

  body.app-event-details .campaign-market-list {
    min-width: 0;
    display: grid;
    gap: var(--m-card-gap);
  }

  body.app-event-details .campaign-creator-status:not([hidden]) {
    display: block;
  }

  body.app-event-details .campaign-creator-card {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: var(--m-card-pad);
    border: 0;
    border-radius: var(--m-card-radius);
    background: var(--surface-card);
    box-shadow: none;
    display: flex;
    flex-direction: column;
  }

  body.app-event-details .campaign-creator-identity {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--m-gap-2);
  }

  body.app-event-details .campaign-creator-card .hub-level-progress {
    width: 100%;
    margin-top: var(--m-card-gap);
  }

  body.app-event-details .campaign-creator-card .hub-level-progress-row,
  body.app-event-details .campaign-creator-card .hub-progress-stat-label {
    color: var(--text-70);
  }

  body.app-event-details .campaign-creator-card .hub-progress-stat-value {
    color: var(--text-100);
  }

  body.app-event-details .campaign-creator-card .hub-progress-stats {
    width: 100%;
    min-width: 0;
    gap: var(--m-gap-2);
    margin-top: var(--m-card-gap);
  }

  body.app-event-details .campaign-creator-actions {
    min-width: 0;
    margin-top: var(--m-card-gap);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--m-gap-3);
  }

  body.app-event-details .campaign-creator-card .hub-view-rankings {
    margin: 0;
    color: var(--text-100);
  }

  body.app-event-details .campaign-creator-card .hub-level-track {
    background: var(--surface-secondary) !important;
  }

  body.app-event-details .event-loading-block,
  body.app-event-details .campaign-host.is-skeleton,
  body.app-event-details.is-skeleton .campaign-timing,
  body.app-event-details.is-skeleton .campaign-details-content .glee-section-title {
    position: relative;
    overflow: hidden;
    border-radius: var(--m-card-radius);
    background: var(--skel) !important;
    color: transparent !important;
    pointer-events: none;
  }

  body.app-event-details .event-loading-block::after,
  body.app-event-details .campaign-host.is-skeleton::after,
  body.app-event-details.is-skeleton .campaign-timing::after,
  body.app-event-details.is-skeleton .campaign-details-content .glee-section-title::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, var(--skel-shine), transparent);
    transform: translateX(-120%);
    animation: skel-shimmer 1.1s infinite;
  }

  body.app-event-details .campaign-host.is-skeleton > *,
  body.app-event-details.is-skeleton .campaign-timing > * {
    visibility: hidden;
  }

  body.app-event-details .event-loading-block {
    width: 100%;
    min-height: var(--glee-body-lh);
    display: block;
  }

  body.app-event-details .campaign-step-copy:has(.event-loading-block) {
    flex: 1;
  }

  body.app-event-details .campaign-host.is-skeleton {
    min-width: 0;
    min-height: var(--m-featured-creator-avatar-size);
  }

  body.app-event-details.is-skeleton .campaign-timing {
    max-width: 100%;
    min-height: var(--m-body-lh);
  }

  body.app-event-details .campaign-whitelist-status.is-skeleton,
  body.app-event-details .campaign-creator-status.is-skeleton {
    pointer-events: none;
  }

  body.app-event-details .campaign-user > .event-loading-block {
    height: var(--m-featured-creator-avatar-size);
    max-width: 240px;
  }

  body.app-event-details .campaign-creator-identity > .event-loading-block:first-child {
    width: var(--m-featured-creator-avatar-size);
    height: var(--m-featured-creator-avatar-size);
    flex: 0 0 var(--m-featured-creator-avatar-size);
    border-radius: 50%;
  }

  body.app-event-details .campaign-creator-card .hub-level-track.event-loading-block {
    min-height: 8px;
  }

  body.app-hub .hub-lootbox-grid,
  body.app-hub .hub-events-grid {
    grid-template-columns: 1fr;
  }

  body.app-hub .hub-lootbox-card {
    max-width: 100%;
  }

  body.app-hub .hub-lootbox-copy {
    min-height: 148px;
    padding: 20px;
  }

  body.app-hub .hub-lootbox-card-desc {
    margin-top: 8px;
  }

  body.app-hub .hub-featured-grid {
    grid-template-columns: 1fr;
  }

  body.app-hub .hub-featured-main {
    aspect-ratio: 1 / 1;
  }

  body.app-hub .hub-featured-small {
    min-height: 148px;
  }

  body.app-hub .hub-event-date {
    left: 14px;
    bottom: 14px;
    padding: 0 12px;
  }

  body.app-hub .hub-event-join {
    right: 14px;
    bottom: 14px;
  }
}

/* Responsive Profile Edit modal. */
@media (max-width: 900px) {
  body.app-profile #profileEditModal.modal.is-open {
    box-sizing: border-box;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 0 !important;
    overflow-x: hidden;
    overflow-y: auto;
  }

  body.app-profile #profileEditModal .modal-panel.profile-edit-panel {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 auto !important;
    overflow: visible !important;
    border-radius: var(--action-modal-radius) !important;
  }

  body.app-profile #profileEditModal .pe-modal {
    width: 100%;
    height: auto !important;
    min-height: 0;
    max-height: none;
    padding: var(--action-modal-padding) !important;
    overflow: visible !important;
    border-radius: var(--action-modal-radius) !important;
    background: var(--surface-card);
  }

  body.app-profile #profileEditModal .pe-inner {
    width: 100% !important;
    margin: 0 !important;
  }

  body.app-profile #profileEditModal .profile-edit-modal__media {
    margin-bottom: 22px;
  }

  body.app-profile #profileEditModal .profile-edit-modal__banner {
    aspect-ratio: 2.35 / 1;
    border-radius: var(--action-modal-radius);
  }

  body.app-profile #profileEditModal .profile-edit-modal__banner-upload {
    width: 48px;
    height: 48px;
    border-radius: 16px;
  }

  body.app-profile #profileEditModal .profile-edit-modal__banner-upload img {
    width: 24px;
    height: 22px;
  }

  body.app-profile #profileEditModal .profile-edit-modal__avatar-wrap {
    width: 96px;
    height: 96px;
    margin: -48px 0 0 20px;
  }

  body.app-profile #profileEditModal .pe-avatar.pe-avatar-lg {
    width: 96px !important;
    height: 96px !important;
    border-width: 4px;
  }

  body.app-profile #profileEditModal .pe-field {
    gap: 10px;
  }

  body.app-profile #profileEditModal .pe-field + .pe-field {
    margin-top: 22px;
  }

  body.app-profile #profileEditModal .pe-label {
    font-size: var(--event-meta-fs) !important;
    line-height: var(--event-meta-lh) !important;
    font-weight: var(--event-meta-fw) !important;
    letter-spacing: var(--event-meta-ls) !important;
    color: var(--text-100) !important;
  }

  body.app-profile #profileEditModal .pe-input,
  body.app-profile #profileEditModal .pe-textarea {
    font-size: var(--settings-body-fs) !important;
    line-height: var(--settings-body-lh) !important;
    font-weight: var(--settings-body-fw) !important;
    letter-spacing: var(--settings-body-ls) !important;
    color: var(--text-100) !important;
  }

  body.app-profile #profileEditModal .pe-input,
  body.app-profile #profileEditModal .pe-textarea {
    height: 47px !important;
    min-height: 47px !important;
    border: 0;
    border-radius: 15px;
    background: var(--modal-neutral-surface);
    color: var(--text-100) !important;
    box-shadow: none;
  }

  body.app-profile #profileEditModal .pe-input::placeholder,
  body.app-profile #profileEditModal .pe-textarea::placeholder {
    color: var(--text-50) !important;
  }

  body.app-profile #profileEditModal .pe-input:focus,
  body.app-profile #profileEditModal .pe-textarea:focus {
    border: 0;
    box-shadow: 0 0 0 2px rgba(30, 86, 250, 0.18);
  }

  body.app-profile #profileEditModal .pe-input {
    padding: 0 20px;
  }

  body.app-profile #profileEditModal .pe-textarea {
    padding: 12px 20px;
    overflow: hidden !important;
    white-space: nowrap;
  }

  body.app-profile #profileEditModal .pe-footer {
    margin-top: 24px !important;
    padding-bottom: 0 !important;
  }

  body.app-profile #profileEditModal .pe-save {
    width: var(--btn-blue-w) !important;
    min-width: var(--btn-blue-min) !important;
    max-width: var(--btn-blue-w) !important;
    height: var(--btn-blue-h) !important;
    min-height: var(--btn-blue-h) !important;
    padding: var(--btn-blue-pad) !important;
    border-radius: var(--btn-blue-radius) !important;
    font-size: var(--btn-blue-font) !important;
    line-height: var(--btn-blue-lh) !important;
    font-weight: var(--btn-blue-weight) !important;
    letter-spacing: var(--btn-blue-ls) !important;
  }
}

/* Donate XP modal: compact responsive layout, scoped to this modal only. */
@media (max-width: 900px) {
  .donate-xp-modal.is-open {
    align-items: center;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 12px 0;
  }

  .donate-xp-panel {
    width: calc(100vw - 24px);
    max-width: 635px;
    height: auto;
    max-height: none;
    overflow: visible;
    border-radius: var(--action-modal-radius);
  }

  .donate-xp-card {
    padding: var(--action-modal-padding);
    border-radius: var(--action-modal-radius);
  }

  .donate-xp-title {
    font-size: var(--hub-card-title-fs);
    line-height: var(--hub-card-title-lh);
    font-weight: var(--hub-card-title-fw);
    letter-spacing: var(--ls-medium);
  }

  .donate-xp-subtitle {
    font-size: var(--settings-body-fs);
    line-height: var(--settings-body-lh);
    font-weight: var(--settings-body-fw);
    letter-spacing: var(--settings-body-ls);
  }

  .donate-xp-user,
  .donate-xp-balance,
  .donate-xp-label {
    margin-top: 22px;
  }

  .donate-xp-user {
    align-items: center;
  }

  .donate-xp-avatar {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    flex: 0 0 58px !important;
    aspect-ratio: 1 / 1;
    display: block;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    overflow: hidden;
    box-sizing: border-box;
  }

  .donate-xp-balance-value {
    font-size: var(--app-page-title-fs);
    line-height: var(--app-page-title-lh);
    font-weight: var(--app-page-title-fw);
    letter-spacing: var(--app-page-title-ls);
  }

  .donate-xp-suggest {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .donate-xp-note {
    margin-top: 20px;
  }

  .donate-xp-fee {
    padding: 16px;
  }

  .donate-xp-actions {
    margin-top: 24px;
  }

  .donate-xp-submit {
    width: var(--btn-blue-w) !important;
    min-width: var(--btn-blue-min) !important;
    max-width: var(--btn-blue-w) !important;
    height: var(--btn-blue-h) !important;
    min-height: var(--btn-blue-h) !important;
    padding: var(--btn-blue-pad) !important;
    border-radius: var(--btn-blue-radius) !important;
    font-size: var(--btn-blue-font) !important;
    line-height: var(--btn-blue-lh) !important;
    font-weight: var(--btn-blue-weight) !important;
    letter-spacing: var(--btn-blue-ls) !important;
  }

}

@media (max-width: 900px) and (max-height: 820px) {
  .donate-xp-modal.is-open {
    align-items: flex-start;
  }
}

/* Lootbox modal: scoped mobile fit and safe viewport sizing. */
@media (max-width: 900px) {
  .hub-lootbox-modal.is-open {
    align-items: center;
    justify-content: center;
    padding: 12px;
    overflow: hidden;
  }

  .hub-lootbox-panel {
    width: auto;
    max-width: none;
    height: auto;
    max-height: none;
    margin: 0 auto;
    overflow: visible;
  }

  .hub-lootbox-confirm-card {
    width: calc(100vw - 24px);
    padding: var(--action-modal-padding);
    border-radius: var(--action-modal-radius);
  }

  .hub-lootbox-confirm-item {
    margin-top: 24px;
    gap: 14px;
  }

  .hub-lootbox-confirm-preview {
    width: 62px;
    height: 62px;
    flex-basis: 62px;
    border-radius: 18px;
  }

  .hub-lootbox-confirm-price {
    margin-top: 24px;
  }

  .hub-lootbox-confirm-price strong {
    font-size: var(--glee-title-m-fs);
    line-height: var(--glee-title-m-lh);
    font-weight: var(--glee-title-m-fw);
    letter-spacing: var(--glee-title-m-ls);
  }

  .hub-lootbox-confirm-actions,
  .hub-lootbox-reward-actions {
    margin-top: 24px;
  }

  .hub-lootbox-opening-stage {
    width: min(calc(100vw - 20px), calc(100vh - 96px));
    aspect-ratio: 1 / 1;
    border-radius: 34px;
  }

  @supports (height: 100dvh) {
    .hub-lootbox-opening-stage {
      width: min(calc(100vw - 20px), calc(100dvh - 96px));
    }
  }

  .hub-lootbox-reward-card {
    width: calc(100% - 28px);
    padding: 18px;
    border-radius: 34px;
  }

  .hub-lootbox-reward-title {
    font-size: 20px;
    line-height: 25px;
  }

  .hub-lootbox-reward-body {
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: center;
    margin-top: 14px;
    gap: 12px;
    padding: 12px;
    border-radius: 28px;
  }

  .hub-lootbox-reward-art {
    width: 112px;
    height: 112px;
    flex-basis: 112px;
    border-radius: 22px;
  }

  .hub-lootbox-reward-art img {
    width: 100%;
    height: 100%;
  }

  .hub-lootbox-reward-copy {
    padding: 0;
  }

  .hub-lootbox-reward-copy h3 {
    font-size: 17px;
    line-height: 22px;
  }

  .hub-lootbox-contact-input {
    height: 42px;
    font-family: var(--font-main);
    font-size: var(--glee-small-fs);
    line-height: var(--glee-small-lh);
    font-weight: var(--glee-small-fw);
    letter-spacing: var(--glee-small-ls);
    color: rgba(255,255,255,.82);
  }

  .hub-lootbox-contact-input::placeholder {
    color: rgba(255,255,255,.50);
  }
}

@media (max-width: 520px) {
  .hub-lootbox-reward-body {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
    text-align: left;
  }

  .hub-lootbox-reward-art {
    width: 92px;
    height: 92px;
    flex-basis: 92px;
    border-radius: 20px;
  }

  .hub-lootbox-reward-art img {
    width: 100%;
    height: 100%;
  }

  .hub-lootbox-reward-copy {
    width: 100%;
  }
}

/* Keep global toasts fixed to the mobile viewport. */
@media (max-width: 900px) {
  #glee-toast-root.glee-toast-root {
    top: calc(env(safe-area-inset-top) + 16px);
    left: 50%;
    right: auto;
    bottom: auto;
    width: calc(100vw - 24px);
    transform: translateX(-50%);
  }

  #glee-toast-root .glee-toast {
    min-height: 68px;
    padding: 8px 20px 8px 8px;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    column-gap: 12px;
  }

  #glee-toast-root .glee-toast-media {
    width: 52px;
    height: 52px;
  }
}

/* Mobile authentication and onboarding. */
@media (max-width: 600px) {
  body.auth:not(.onboarding-page) .auth-shell {
    min-height: var(--vvh, 100svh);
    padding:
      calc(20px + env(safe-area-inset-top))
      max(16px, env(safe-area-inset-right))
      calc(24px + env(safe-area-inset-bottom))
      max(16px, env(safe-area-inset-left));
    align-items: center;
  }

  body.auth:not(.onboarding-page) .auth-center {
    width: min(100%, 455px);
  }

  body.auth:not(.onboarding-page) .auth-block,
  body.auth:not(.onboarding-page) .auth-card {
    width: 100%;
    max-width: 455px;
    padding: 34px 28px 30px;
    border-radius: 32px;
    background: #fff;
  }

  body.auth:not(.onboarding-page) .auth-block::before,
  body.auth:not(.onboarding-page) .auth-block::after {
    content: none;
    display: none;
  }

  body.auth:not(.onboarding-page) .auth-icon-pill {
    width: 40px;
    height: 40px;
    margin-bottom: 24px;
  }

  body.auth:not(.onboarding-page) .auth-title {
    margin-bottom: 38px;
    font-size: 20px !important;
    line-height: 25px !important;
    letter-spacing: var(--ls-title) !important;
  }

  body.auth:not(.onboarding-page) .auth-input {
    width: 100% !important;
    height: 42px;
    font-size: 16px !important;
    line-height: 22px !important;
    font-weight: var(--fw-regular) !important;
  }

  body.auth:not(.onboarding-page) .auth-help,
  body.auth:not(.onboarding-page) .auth-footnote,
  body.auth:not(.onboarding-page) .avatar-suggestions-title {
    margin-left: 0 !important;
    margin-right: 0 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: var(--fw-regular) !important;
  }

  body.auth:not(.onboarding-page) .auth-help {
    margin-top: 20px !important;
    margin-bottom: 26px !important;
  }

  body.auth:not(.onboarding-page) .auth-cta {
    width: var(--btn-blue-w);
    min-width: var(--btn-blue-min);
    max-width: var(--btn-blue-w);
    height: var(--btn-blue-h);
    min-height: var(--btn-blue-h);
    padding: var(--btn-blue-pad);
    font-size: var(--btn-blue-font) !important;
    line-height: var(--btn-blue-lh) !important;
    font-weight: var(--btn-blue-weight) !important;
  }

  body.auth:not(.onboarding-page) .auth-outside-note {
    margin-top: 22px !important;
  }

  body.auth-username:not(.onboarding-page) .auth-title,
  body.auth-avatar:not(.onboarding-page) .auth-title,
  body.auth-bio:not(.onboarding-page) .auth-title {
    margin-bottom: 36px;
  }

  body.auth-username:not(.onboarding-page) .auth-input + .auth-input {
    margin-top: 22px;
  }

  body.auth-username:not(.onboarding-page) .auth-help {
    margin-top: 18px !important;
    margin-bottom: 28px !important;
  }

  body.auth-avatar:not(.onboarding-page) .avatar-picker {
    margin: 0;
  }

  body.auth-avatar:not(.onboarding-page) .avatar-circle {
    width: 88px;
    height: 88px;
  }

  body.auth-avatar:not(.onboarding-page) .avatar-suggestions {
    margin-top: 26px;
  }

  body.auth-avatar:not(.onboarding-page) .avatar-suggestion-grid {
    height: 110px;
  }

  body.auth-avatar:not(.onboarding-page) .avatar-suggestion-btn {
    width: 82px;
    height: 100px;
    flex-basis: 82px;
  }

  body.auth-avatar:not(.onboarding-page) .avatar-suggestion-btn:nth-child(2) {
    width: 92px;
    height: 110px;
    flex-basis: 92px;
  }

  body.auth-avatar:not(.onboarding-page) .auth-cta {
    margin-top: 28px;
  }

  body.auth-bio:not(.onboarding-page) .role-field {
    margin-top: 30px;
  }

  body.auth-bio:not(.onboarding-page) .role-selector {
    gap: 8px 6px;
    margin-top: 14px;
  }

  body.auth-bio:not(.onboarding-page) .role-chip {
    min-height: 37px;
    height: 37px;
    padding: 0 12px;
    font-size: 13px;
    line-height: 18px;
  }

  body.auth-bio:not(.onboarding-page) .auth-cta {
    margin-top: 30px;
  }

  body.auth-loader .loader-logo {
    font-size: clamp(44px, 13vw, 50px) !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: -0.06em !important;
  }
}

@media (max-height: 760px) {
  body.auth:not(.auth-loader):not(.onboarding-page) .auth-shell {
    align-items: flex-start;
  }
}

/* Shared mobile onboarding shell */
@media (max-width: 900px) {
  html:has(body.onboarding-page),
  body.onboarding-page {
    width: 100%;
    min-height: 100%;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--bg);
  }

  body.onboarding-page {
    --onboarding-corridor: 82.6%;
    --onboarding-brand-track: 21 / 43;
    --onboarding-form-track: 45 / 66;
    --onboarding-cta-track: 78 / 84;
    --onboarding-helper-track: 93 / 99;
    --onboarding-form-helper-gap: 16px;
    --onboarding-status-top: 11.5%;
    --onboarding-error-slot-height: 56px;
    --onboarding-placeholder-color: var(--text-30);
    --onboarding-helper-color: var(--text-50);
    --onboarding-title-size: 35px;
  }

  body.onboarding-page.auth-signup,
  body.onboarding-page.auth-login {
    --onboarding-account-link-track: 8 / 14;
  }

  body.onboarding-page .onboarding-shell {
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    height: 100svh;
    min-height: 100svh;
    height: 100dvh;
    min-height: 100dvh;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
    display: block;
    position: relative;
    overflow: visible;
  }

  body.onboarding-page .onboarding-shell > .onboarding-logo,
  body.onboarding-page .onboarding-preview {
    display: none;
  }

  body.onboarding-page .onboarding-stage {
    position: relative;
    width: 100%;
    min-height: 0;
    height: 100%;
    max-width: none;
    display: block;
  }

  body.onboarding-page .onboarding-card {
    width: 100%;
    min-height: 0;
    height: 100%;
    aspect-ratio: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    display: block;
    background: transparent;
    overflow: visible;
  }

  body.onboarding-page .onboarding-card .onboarding-panel {
    position: relative;
    width: 100%;
    min-height: 0;
    height: 100%;
    padding: 0;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(100, minmax(0, 1fr));
    align-items: stretch;
    justify-items: center;
    background: transparent;
    overflow: visible;
  }

  body.onboarding-page .onboarding-card .onboarding-panel-content {
    display: contents;
  }

  body.onboarding-page .brand-block {
    grid-column: 1;
    grid-row: var(--onboarding-brand-track);
    align-self: start;
    width: var(--onboarding-corridor);
    margin-top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  body.onboarding-page .onboarding-brand-logo {
    width: 40px;
    height: 40px;
    margin: 0 0 40px;
    display: block;
    flex: 0 0 auto;
  }

  body.onboarding-page .onboarding-title {
    margin: 0 0 14px;
    line-height: 1.08;
    font-weight: var(--fw-semibold);
    letter-spacing: -0.04em;
  }

  body.onboarding-page .onboarding-subtitle {
    margin: 0;
    font-family: var(--font-main);
    font-size: 15px;
    line-height: 22px;
    font-weight: var(--fw-medium);
    letter-spacing: -0.02em;
    color: var(--text-70);
  }

  body.onboarding-page .onboarding-panel .form-block {
    grid-column: 1;
    grid-row: var(--onboarding-form-track);
    place-self: center;
    width: var(--onboarding-corridor);
    max-width: none;
    margin: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  body.onboarding-page .form-block > .onboarding-input + .onboarding-input {
    margin-top: 12px;
  }

  body.onboarding-page .form-helper {
    --onboarding-helper-margin: var(--onboarding-form-helper-gap) 0 0;
    width: 100%;
  }

  body.onboarding-page .onboarding-input {
    width: 100%;
    max-width: none;
    height: 44px;
    min-height: 44px;
    padding: 0 18px;
    box-sizing: border-box;
    border: 0;
    border-radius: 15px;
    background: #f2f2f2;
    font-family: var(--font-main);
    font-size: 14px;
    line-height: 20px;
    font-weight: var(--fw-regular);
    letter-spacing: var(--ls-regular);
  }

  body.onboarding-page .onboarding-input::placeholder {
    font-family: var(--font-main);
    font-size: 14px;
    line-height: 20px;
    font-weight: var(--fw-regular);
    letter-spacing: var(--ls-regular);
  }

  body.onboarding-page .action-block {
    display: contents;
  }

  body.onboarding-page .action-block .onboarding-cta {
    grid-column: 1;
    grid-row: var(--onboarding-cta-track);
    place-self: center;
    position: static;
    width: var(--btn-blue-w);
    min-width: var(--btn-blue-min);
    max-width: var(--btn-blue-w);
    height: var(--btn-blue-h);
    min-height: var(--btn-blue-h);
    margin: 0;
    padding: var(--btn-blue-pad);
    border-radius: var(--btn-blue-radius);
    transform: none;
    flex: 0 0 auto;
  }

  body.onboarding-page .action-block .onboarding-cta:disabled:not(.is-async-loading) {
    opacity: 0.6;
  }

  body.onboarding-page .action-block .onboarding-cta.is-async-loading:disabled {
    opacity: 1;
  }

  body.onboarding-page.auth-signup .action-block > .auth-google-block,
  body.onboarding-page.auth-login .action-block > .auth-google-block {
    position: absolute;
    top: auto;
    right: auto;
    bottom: 34px;
    left: 50%;
    height: auto;
    transform: translateX(-50%);
  }

  body.onboarding-page .action-block > .onboarding-helper,
  body.onboarding-page:not(.auth-signup):not(.auth-login) .action-block > .onboarding-top-link {
    grid-column: 1;
    grid-row: var(--onboarding-helper-track);
    place-self: center;
    width: var(--onboarding-corridor);
    padding-bottom: 0;
    box-sizing: border-box;
  }

  body.onboarding-page.auth-signup .action-block > .onboarding-top-link,
  body.onboarding-page.auth-login .action-block > .onboarding-top-link {
    grid-column: 1;
    grid-row: var(--onboarding-account-link-track);
    place-self: center;
    width: var(--onboarding-corridor);
    padding-bottom: 0;
    box-sizing: border-box;
  }

  body.onboarding-page .onboarding-helper {
    position: static;
    width: 100%;
    min-height: 20px;
    margin: 0;
    padding: 0;
    text-align: center;
    font-family: var(--font-main);
    font-size: 14px;
    line-height: 20px;
    font-weight: var(--fw-regular);
    letter-spacing: -0.02em;
  }

  body.onboarding-page .onboarding-helper:empty {
    display: none;
  }

  body.onboarding-page .onboarding-top-link {
    position: static;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
    white-space: normal;
    font-family: var(--font-main);
    font-size: 14px;
    line-height: 20px;
    font-weight: var(--fw-regular);
    letter-spacing: -0.02em;
  }

  body.onboarding-page .onboarding-top-link--placeholder {
    min-height: 20px;
    visibility: hidden;
    pointer-events: none;
  }

  body.onboarding-page .onboarding-top-link--context {
    display: none;
  }

  body.onboarding-page .onboarding-error {
    position: absolute;
    top: var(--onboarding-status-top);
    right: auto;
    bottom: auto;
    left: 50%;
    width: fit-content;
    max-width: calc(100vw - 30px);
    height: auto;
    min-height: 48px;
    max-height: var(--onboarding-error-slot-height);
    margin: 0;
    padding: 7px 18px 7px 9px;
    box-sizing: border-box;
    transform: translateX(-50%);
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    z-index: 5;
  }

  body.onboarding-page .onboarding-error::before {
    position: static;
    width: 34px;
    height: 34px;
    min-width: 34px;
    flex: 0 0 34px;
  }

  body.onboarding-page .onboarding-error:not(:empty) {
    display: inline-flex;
  }

  body.onboarding-page .onboarding-error:empty {
    display: none;
  }

  body.onboarding-page.auth-avatar .avatar-picker {
    margin: 0;
  }

  body.app-event-details .creator-market-bottom > .campaign-market-state-slot {
    grid-column: 2;
    grid-row: 3;
    align-self: end;
    justify-self: center;
  }

  body.onboarding-page.auth-avatar .avatar-circle {
    width: 120px;
    height: 120px;
    background: #F2F2F2;
  }

  body.onboarding-page.auth-avatar .avatar-plus {
    width: 28px;
    height: 28px;
    display: block;
    font-size: 0;
    background-color: var(--brand);
    -webkit-mask: url("../assets/icons/camera-icon.svg") no-repeat center / contain;
    mask: url("../assets/icons/camera-icon.svg") no-repeat center / contain;
  }

  body.onboarding-page.auth-avatar .avatar-suggestions {
    display: none;
  }

  body.onboarding-page.auth-bio .role-field {
    width: 100%;
    margin-top: 24px;
  }

  body.onboarding-page.auth-bio .role-selector {
    max-width: 100%;
    margin: 14px auto 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 6px;
    overflow: visible;
  }

  body.onboarding-page.auth-bio .role-chip {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    height: 37px;
    min-height: 37px;
    padding: 0 14px;
    font-size: 15px;
    line-height: 22px;
    font-weight: var(--fw-medium);
    letter-spacing: -0.02em;
    white-space: nowrap;
  }

  body.onboarding-page.auth-bio .role-chip:not(.is-selected) {
    background: #F2F2F2;
  }

  body.onboarding-page.auth-bio .auth-help--validation {
    margin-top: 10px;
    margin-bottom: 0;
  }

  body.onboarding-page.is-signal {
    --onboarding-brand-track: 17 / 38;
    --onboarding-form-track: 40 / 78;
    --onboarding-cta-track: 82 / 88;
    --onboarding-helper-track: 93 / 99;
    --onboarding-status-top: 8%;
  }
}

@media (max-width: 900px) and (max-height: 760px) {
  body.onboarding-page.auth-signup,
  body.onboarding-page.auth-login {
    --onboarding-account-link-track: 5 / 12;
  }

  body.onboarding-page {
    --onboarding-brand-track: 14 / 42;
    --onboarding-form-track: 45 / 67;
    --onboarding-cta-track: 78 / 85;
    --onboarding-helper-track: 93 / 99;
    --onboarding-status-top: 2%;
  }

  body.onboarding-page.is-signal {
    --onboarding-brand-track: 10 / 34;
    --onboarding-form-track: 42 / 80;
    --onboarding-cta-track: 86 / 92;
    --onboarding-helper-track: 94 / 100;
    --onboarding-status-top: 0%;
  }
}

@media (max-width: 900px) and (max-height: 600px) {
  body.onboarding-page.auth-signup,
  body.onboarding-page.auth-login {
    --onboarding-account-link-track: 2 / 9;
  }

  body.onboarding-page {
    --onboarding-brand-track: 11 / 38;
    --onboarding-status-top: 0%;
  }

  body.onboarding-page.auth-signup .action-block > .auth-google-block,
  body.onboarding-page.auth-login .action-block > .auth-google-block {
    bottom: 8px;
  }

  body.onboarding-page.is-signal .onboarding-shell {
    min-height: 700px;
  }
}

@media (max-height: 760px) and (min-width: 901px) {
  body.onboarding-page .onboarding-shell {
    padding-top: 110px;
    align-items: flex-start;
  }

  body.onboarding-page .onboarding-logo {
    top: 30px;
  }
}

/* Keep loader immune to auth/onboarding mobile padding and overflow. */
html:has(body.auth-loader),
body.auth-loader {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

body.auth-loader {
  position: fixed !important;
  inset: 0 !important;
}

body.auth-loader .loader-shell {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100svh !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: grid !important;
  place-items: center !important;
}

body.auth-loader .loader-center {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
}

body.auth-loader .loader-logo {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 70px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: -0.06em !important;
  color: var(--text-100) !important;
}

/* =========================
   Mobile Content Rail Foundation
   Canonical width/margin rail for existing page wrappers.
========================= */
@media (max-width: 900px) {
  .home-grid,
  body.app-home:not(.app-post-details):not(.app-event-details) .home-feed,
  body.app-home:not(.app-post-details):not(.app-event-details) .home-center,
  body.app-home:not(.app-post-details):not(.app-event-details) .feed-grid,
  body.app-community .page-center,
  body.app-community .community-wrap,
  body.app-events .page-center,
  body.app-events .events-wrap,
  body.app-hub .page-center,
  body.app-hub .hub-page,
  body.app-hub .hub-wrap,
  body.app-hub .hub-progress,
  body.app-signals .page-center,
  body.app-signals .signals-page,
  body.app-signals .signals-wrap,
  body.app-leaderboard .page-center,
  body.app-leaderboard .leaderboard-page,
  body.app-leaderboard .leaderboard-wrap,
  body.app-profile .page-center,
  body.app-profile .profile-wrap,
  body.app-post-details .page-center,
  body.app-post-details .post-details-center,
  body.app-post-details .post-details-content,
  body.app-post-details .post-comments,
  body.app-event-details .page-center,
  body.app-event-details .event-details-center,
  body.app-event-details .event-details-content,
  body.app-collection-details .page-center,
  body.app-collection-details .collection-details-center,
  body.app-collection-details .collection-details-root,
  body.app-notifications .page-center,
  body.app-notifications .notif-wrap,
  body.app-settings .page-center,
  body.app-settings .settings-wrap {
    width: var(--m-content-w) !important;
    max-width: var(--m-content-w) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 900px) {
  body.app-leaderboard .leaderboard-wrap,
  body.app-hub .hub-progress {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* =========================
     Mobile HUB Switcher Placement
     Source of truth: shared Feed sticky contract
  ========================= */
  body.app-hub .hub-hero {
    position: relative !important;
  }

  body.app-hub .hub-switcher-shell {
    position: sticky !important;
    top: var(--feed-switcher-sticky-top) !important;
    z-index: 70 !important;
    width: var(--m-content-w) !important;
    height: var(--ui-switcher-h) !important;
    margin: 0 auto var(--home-feed-gap) !important;
    pointer-events: none !important;
    box-sizing: border-box !important;
  }

  body.app-hub .hub-switcher-shell > .hub-switch {
    display: grid !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    z-index: 1 !important;
    width: var(--ui-switcher-w) !important;
    max-width: min(var(--ui-switcher-w), calc(100% - 28px)) !important;
    height: var(--ui-switcher-h) !important;
    margin: 0 auto !important;
    pointer-events: auto !important;
    box-sizing: border-box !important;
  }

  body.app-hub .hub-progress-switch {
    display: none !important;
  }

  body.app-hub .hub-progress-summary {
    padding-top: 0 !important;
  }

  body.app-hub .hub-xp-task-row {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) var(--btn-blue-w) !important;
    grid-template-rows: auto auto auto !important;
    align-items: start !important;
    column-gap: 12px !important;
    row-gap: 12px !important;
    overflow: hidden !important;
  }

  body.app-hub .hub-xp-task-icon {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    flex: 0 0 40px !important;
    border-radius: 10px !important;
  }

  body.app-hub .hub-xp-task-icon::before {
    inset: 9px 10px !important;
  }

  body.app-hub .hub-xp-task-icon span {
    top: 14px !important;
    left: 15px !important;
  }

  body.app-hub .hub-xp-task-copy {
    display: contents !important;
    min-width: 0 !important;
  }

  body.app-hub .hub-xp-task-title {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    align-self: center !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
  }

  body.app-hub .hub-xp-task-desc,
  body.app-hub .hub-xp-task-subtitle {
    display: none !important;
  }

  body.app-hub .hub-xp-task-reward {
    grid-column: 3 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    justify-self: end !important;
    align-self: center !important;
    color: var(--brand) !important;
    text-align: right !important;
    white-space: nowrap !important;
  }

  body.app-hub .hub-xp-task-progress {
    grid-column: 1 / span 2 !important;
    grid-row: 2 !important;
    min-width: 0 !important;
    align-items: flex-start !important;
  }

  body.app-hub .hub-xp-task-track {
    width: min(112px, 100%) !important;
  }

  body.app-hub .hub-xp-task-claim {
    grid-column: 3 !important;
    grid-row: 2 !important;
    justify-self: end !important;
    align-self: center !important;
  }

  body.app-hub .hub-xp-task-referral-link {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    width: fit-content !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-top: 0 !important;
    overflow-wrap: anywhere !important;
  }

  body.app-hub.is-hub-progress .hub-view-frame.is-progress .hub-title,
  body.app-hub .hub-view-frame.is-progress .hub-title,
  body.app-hub.is-hub-progress .hub-progress-title,
  body.app-hub .hub-progress-title {
    color: #FFFFFF !important;
  }

  body.app-settings .settings-section:first-of-type {
    margin-top: var(--m-block-gap) !important;
  }

body.app-notifications .notif-list {
  margin-top: 0 !important;
}

  /* =========================
  Mobile Section Title Contract
  ========================= */
  body.app-hub .hub-section-title,
  body.app-hub .hub-lootbox-title,
  body.app-hub .hub-feed-title,
  body.app-hub .hub-events-title,
  body.app-hub .hub-featured-title,
  body.app-hub .hub-xp-tasks-title,
  body.app-leaderboard .leaderboard-title,
  body.app-settings .settings-section-title,
  body.app-events .events-section-title,
  body.app-post-details .post-section-title,
  .creators-title,
  .lootboxes-title,
  .featured-feed-title,
  .featured-event-title,
  .featured-creators-title,
  .culture-markets-title,
  .xp-tasks-title {
    font-family: var(--font-main) !important;
    font-size: var(--m-section-title-fs) !important;
    line-height: var(--m-section-title-lh) !important;
    font-weight: var(--m-section-title-fw) !important;
    letter-spacing: var(--m-section-title-ls) !important;
    color: var(--m-section-title-color) !important;
  }

body.app-hub,
body.app-leaderboard,
body.app-profile {
  height: auto !important;
  min-height: 100% !important;
  overflow: visible !important;
  background: var(--bg) !important;
}

body.app-hub .home-scroll,
body.app-leaderboard .home-scroll,
body.app-profile .home-scroll {
  min-height: 100%;
  height: auto !important;
  overflow-y: visible !important;
  overflow-x: visible !important;
  padding-bottom: var(--m-bottom-content-pad) !important;
  -webkit-overflow-scrolling: touch;
  background: var(--bg) !important;
}

body.app-hub .home-grid,
body.app-leaderboard .home-grid,
body.app-profile .home-grid {
  display: block;
  min-height: auto !important;
  height: auto !important;
  overflow: visible !important;
  padding-bottom: 0;
}

body.app-hub .page-center,
body.app-leaderboard .page-center,
body.app-profile .page-center {
  min-height: auto !important;
  height: auto !important;
  overflow: visible !important;
  background: transparent !important;
}
}

/* =========================
   Mobile Topbar Contract
   Source of truth for regular mobile app topbar
========================= */
@media (max-width: 900px) {
  body.app .home-topbar {
    display: grid !important;
    grid-template-columns: var(--m-topbar-action-size) minmax(0, 1fr) var(--m-topbar-action-size) !important;
    align-items: start !important;
    justify-items: center !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: var(--m-content-w) !important;
    margin: 0 auto !important;
    min-height: var(--m-topbar-height) !important;
    height: var(--m-topbar-height) !important;
    padding-top: var(--m-topbar-safe-top) !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
    top: auto !important;
    background: transparent !important;
  }

  body.app .home-topbar .topbar-left {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
  }

  body.app .home-topbar .brand,
  body.app .brand {
    margin: 0 auto !important;
    font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: var(--m-topbar-logo-fs) !important;
    line-height: var(--m-topbar-logo-lh) !important;
    font-weight: var(--m-topbar-logo-fw) !important;
    letter-spacing: var(--m-topbar-logo-ls) !important;
    color: var(--text-100) !important;
    text-align: center !important;
    transform: none !important;
    font-style: normal !important;
    font-synthesis: none !important;
  }

  body.app-hub.is-hub-progress .home-topbar .brand,
  body.app-hub.is-hub-progress .brand {
    color: #FFFFFF !important;
  }

  body.app .mobile-topbar-action,
  body.app .home-topbar > .mobile-topbar-action {
    position: fixed !important;
    top: var(--m-topbar-action-top-final) !important;
    z-index: 180 !important;
    width: var(--m-topbar-action-size) !important;
    height: var(--m-topbar-action-size) !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--glass-ui-bg) !important;
    color: var(--switcher-text) !important;
    -webkit-backdrop-filter: var(--glass-ui-filter) !important;
    backdrop-filter: var(--glass-ui-filter) !important;
    box-shadow: var(--switcher-glass-shadow) !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  body.app .mobile-topbar-action--left {
    left: calc(var(--m-content-edge) + var(--m-topbar-action-inline-inset)) !important;
  }

  body.app .mobile-topbar-action--right {
    right: calc(var(--m-content-edge) + var(--m-topbar-action-inline-inset)) !important;
  }

  body.app .mobile-topbar-action-icon {
    width: 18px !important;
    height: 18px !important;
  }

  body.app .mobile-topbar-action.is-active,
  body.app .mobile-topbar-action[aria-current="page"] {
    background: var(--glass-ui-bg) !important;
    color: var(--switcher-text) !important;
    -webkit-backdrop-filter: var(--glass-ui-filter) !important;
    backdrop-filter: var(--glass-ui-filter) !important;
    box-shadow: var(--switcher-glass-shadow) !important;
  }
}

/* Mobile Settings spacing. */
@media (max-width: 900px) {
  body.app-settings .settings-section:first-of-type {
    margin-top: 0 !important;
  }
}

/* =========================
   Mobile Shared Profile Header Component
========================= */
@media (max-width: 900px) {
  :root {
    --m-profile-gap-level-name: 20px;
    --m-profile-gap-name-username: 10px;
    --m-profile-gap-username-bio: 20px;
    --m-profile-gap-bio-stats: 30px;
    --m-profile-gap-stats-actions: 30px;
    --m-profile-header-pad-bottom: 10px;
    --m-post-author-gap-name-actions: 30px;
  }

  body.app-profile .profile-wrap,
  body.app-post-details .post-details-center {
    width: var(--m-content-w) !important;
    max-width: var(--m-content-w) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: var(--m-profile-header-top) !important;
    box-sizing: border-box !important;
  }

  body.app-profile .profile-wrap {
    gap: 0 !important;
    padding-bottom: 30px;
  }

  body.app-profile .profile-header,
  body.app-post-details .post-author-header {
    width: 100% !important;
    max-width: var(--m-content-w) !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto var(--m-profile-header-bottom-gap) !important;
    padding-bottom: var(--m-profile-header-pad-bottom) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    position: relative !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    border-radius: 40px !important;
    background: var(--profile-header-card-bg) !important;
    color: var(--text-100) !important;
    text-align: center !important;
  }

  body.app-profile .profile-banner,
  body.app-profile .profile-body,
  body.app-profile .profile-head-left,
  body.app-profile .profile-head-meta,
  body.app-post-details .post-author-banner,
  body.app-post-details .post-author-body {
    display: contents !important;
  }

  body.app-profile .profile-header.is-skeleton .profile-banner,
  body.app-post-details.is-skeleton .post-author-banner {
    order: 1 !important;
    position: relative !important;
    display: block !important;
    width: calc(100% - (var(--m-profile-header-banner-inset) * 2)) !important;
    height: var(--profile-mobile-banner-h) !important;
    margin: var(--m-profile-header-banner-inset) auto 0 !important;
    border-radius: 34px !important;
    overflow: hidden !important;
    background: var(--skel) !important;
  }

  body.app-profile .profile-header.is-skeleton .profile-banner::after,
  body.app-post-details.is-skeleton .post-author-banner::after,
  body.app-profile .profile-header.is-skeleton .profile-level-pill.glee-level-pill::after,
  body.app-post-details.is-skeleton .post-author-display-pill::after,
  body.app-profile .profile-header.is-skeleton .profile-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, var(--skel-shine), transparent);
    transform: translateX(-120%);
    animation: skel-shimmer 1.1s infinite;
    pointer-events: none;
  }

  body.app-profile .profile-banner-img,
  body.app-post-details .post-author-banner-img {
    order: 1 !important;
    width: calc(100% - (var(--m-profile-header-banner-inset) * 2)) !important;
    height: var(--profile-mobile-banner-h) !important;
    margin: var(--m-profile-header-banner-inset) auto 0 !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 34px !important;
    background: rgba(var(--text-rgb), 0.08) !important;
  }

  body.app-profile .profile-header.is-skeleton .profile-banner-img,
  body.app-post-details.is-skeleton .post-author-banner-img {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }

  body.app-profile .profile-banner-overlay {
    display: none !important;
  }

  body.app-profile .profile-banner-tags,
  body.app-post-details .profile-banner-tags {
    position: absolute !important;
    top: 24px !important;
    left: 26px !important;
    z-index: 2 !important;
  }

  body.app-profile .profile-banner-tags,
  body.app-post-details .profile-banner-tags {
    max-width: calc(100% - 52px) !important;
  }

  body.app-profile .profile-banner-tag,
  body.app-post-details .profile-banner-tag {
    height: var(--app-content-tag-h) !important;
    min-height: var(--app-content-tag-h) !important;
    padding: 0 var(--app-content-tag-pad-x) !important;
    gap: var(--app-content-tag-gap) !important;
    display: inline-flex !important;
    align-items: center !important;
    font-size: var(--app-content-tag-fs) !important;
    line-height: var(--app-content-tag-lh) !important;
    font-weight: var(--app-content-tag-fw) !important;
    letter-spacing: var(--app-content-tag-ls) !important;
    color: var(--app-content-tag-color) !important;
  }

  body.app-profile .profile-banner-tag[hidden],
  body.app-profile .profile-display-verified[hidden],
  body.app-profile .profile-level-pill[hidden],
  body.app-post-details .profile-banner-tags[hidden],
  body.app-post-details .profile-banner-tag[hidden],
  body.app-post-details .profile-display-verified[hidden],
  body.app-post-details .post-author-level-pill[hidden] {
    display: none !important;
  }

  body.app-profile .profile-banner-tag-dot,
  body.app-post-details .profile-banner-tag-dot {
    width: var(--app-content-tag-dot) !important;
    height: var(--app-content-tag-dot) !important;
    flex: 0 0 var(--app-content-tag-dot) !important;
    border-radius: 999px !important;
  }

  body.app-profile .profile-avatar-wrap,
  body.app-post-details .post-author-avatar-wrap {
    order: 2 !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    z-index: 3 !important;
    width: var(--profile-mobile-avatar-size) !important;
    margin: var(--m-profile-header-avatar-overlap) auto 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  body.app-profile .profile-header.is-skeleton .profile-avatar-wrap::before,
  body.app-post-details.is-skeleton .post-author-avatar-wrap::before {
    width: var(--profile-mobile-avatar-size) !important;
    height: var(--profile-mobile-avatar-size) !important;
    border: 2px solid var(--profile-avatar-stroke-color) !important;
    border-radius: 999px !important;
  }

  body.app-profile .profile-header.is-skeleton .profile-avatar-wrap::after,
  body.app-post-details.is-skeleton .post-author-avatar-wrap::after {
    content: none !important;
    display: none !important;
  }

  body.app-post-details .post-author-avatar-link {
    display: block !important;
    border-radius: 999px !important;
  }

  body.app-post-details.is-skeleton .post-author-avatar-link.post-view-profile {
    width: var(--profile-mobile-avatar-size) !important;
    height: var(--profile-mobile-avatar-size) !important;
  }

  body.app-profile .profile-avatar,
  body.app-post-details .post-author-avatar {
    width: var(--profile-mobile-avatar-size) !important;
    height: var(--profile-mobile-avatar-size) !important;
    flex: 0 0 var(--profile-mobile-avatar-size) !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center !important;
    box-sizing: border-box !important;
    border: 2px solid var(--profile-avatar-stroke-color) !important;
    border-radius: 999px !important;
    background: var(--surface-tertiary) !important;
  }

  body.app-profile .profile-level-pill,
  body.app-post-details .post-author-level-pill {
    margin-top: -19px !important;
    align-self: center !important;
  }

  body.app-profile .profile-level-pill.glee-level-pill,
  body.app-post-details .post-author-level-pill.glee-level-pill {
    width: 70px !important;
    min-width: 70px !important;
    height: 25px !important;
    min-height: 25px !important;
    box-sizing: border-box !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    line-height: 15px !important;
    font-weight: var(--fw-medium) !important;
    letter-spacing: var(--ls-medium) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body.app-profile .profile-header.is-skeleton .profile-level-pill.glee-level-pill {
    position: relative !important;
    display: inline-flex !important;
    visibility: visible !important;
    background: var(--skel) !important;
    color: transparent !important;
    overflow: hidden !important;
  }

  body.app-profile .profile-display-pill,
  body.app-post-details .post-author-display-pill {
    order: 3 !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    max-width: calc(100% - 40px) !important;
    height: auto !important;
    min-height: 0 !important;
    margin: var(--m-profile-gap-level-name) auto 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    overflow: visible !important;
    text-decoration: none !important;
  }

  body.app-post-details.is-skeleton .post-author-display-pill {
    position: relative !important;
    width: min(160px, 70%) !important;
    max-width: min(160px, 70%) !important;
    height: var(--glee-title-s-lh, 25px) !important;
    min-height: var(--glee-title-s-lh, 25px) !important;
    border-radius: 999px !important;
    background: var(--skel) !important;
    overflow: hidden !important;
  }

  body.app-profile .profile-display,
  body.app-post-details .post-author-display {
    margin: 0 !important;
    min-width: 0 !important;
    font-size: var(--glee-title-s-fs, 20px) !important;
    line-height: var(--glee-title-s-lh, 25px) !important;
    font-weight: var(--fw-semibold) !important;
    letter-spacing: var(--glee-title-s-ls, -0.02em) !important;
    color: var(--text-100) !important;
    text-align: center !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  body.app-profile .profile-display-verified,
  body.app-post-details .profile-display-verified {
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 22px !important;
  }

  body.app-profile .profile-main-copy {
    order: 4 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-top: var(--m-profile-gap-name-username) !important;
    padding: 0 var(--m-profile-main-copy-pad-x) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    row-gap: var(--m-profile-gap-username-bio) !important;
    text-align: center !important;
  }

  body.app-profile .profile-username,
  body.app-profile .profile-bio {
    margin: 0 !important;
  }

  body.app-profile .profile-username {
    font-size: var(--glee-small-fs, 14px) !important;
    line-height: var(--glee-small-lh, 20px) !important;
    font-weight: var(--fw-regular) !important;
    letter-spacing: var(--ls-medium) !important;
    text-align: center !important;
    color: var(--text-70) !important;
  }

  body.app-profile .profile-bio {
    max-width: var(--m-profile-bio-max-w) !important;
    text-align: center !important;
    font-size: 15px !important;
    line-height: 22px !important;
    font-weight: var(--fw-medium) !important;
    letter-spacing: var(--ls-medium) !important;
    color: var(--text-100) !important;
  }

  body.app-post-details .post-author-copy {
    order: 4 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-top: var(--m-profile-gap-name-username) !important;
    padding: 0 var(--m-profile-main-copy-pad-x) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    row-gap: var(--m-profile-gap-username-bio) !important;
    text-align: center !important;
  }

  body.app-post-details .post-author-username {
    display: block !important;
    margin: 0 !important;
    font-size: var(--glee-small-fs, 14px) !important;
    line-height: var(--glee-small-lh, 20px) !important;
    font-weight: var(--fw-regular) !important;
    letter-spacing: var(--ls-medium) !important;
    color: var(--text-70) !important;
    text-align: center !important;
  }

  body.app-post-details .post-author-bio {
    display: block !important;
    max-width: var(--m-profile-bio-max-w) !important;
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 22px !important;
    font-weight: var(--fw-medium) !important;
    letter-spacing: var(--ls-medium) !important;
    color: var(--text-100) !important;
    text-align: center !important;
  }

  body.app-post-details.is-skeleton .post-author-copy,
  body.app-post-details.is-skeleton .post-author-username,
  body.app-post-details.is-skeleton .post-author-bio {
    display: none !important;
  }

  body.app-profile .profile-stats-row {
    order: 5 !important;
    position: static !important;
    transform: none !important;
    width: 100% !important;
    max-width: var(--m-profile-stats-max-w) !important;
    margin: var(--m-profile-gap-bio-stats) auto 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  body.app-profile .profile-stat {
    text-align: center !important;
  }

  body.app-profile .profile-stat-value {
    font-size: var(--glee-title-s-fs, 20px) !important;
    line-height: var(--glee-title-s-lh, 25px) !important;
    font-weight: var(--fw-semibold) !important;
    letter-spacing: var(--glee-title-s-ls, -0.02em) !important;
    color: var(--text-100) !important;
  }

  body.app-profile .profile-stat-label {
    margin-top: 10px !important;
    font-size: 15px !important;
    line-height: 22px !important;
    font-weight: var(--fw-medium) !important;
    letter-spacing: var(--ls-medium) !important;
    color: var(--text-70) !important;
  }

  body.app-profile .profile-head-actions,
  body.app-post-details .post-author-actions {
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--m-profile-action-gap) !important;
  }

  body.app-profile .profile-head-actions {
    order: 6 !important;
    margin: var(--m-profile-gap-stats-actions) auto 0 !important;
  }

  body.app-post-details .post-author-actions {
    order: 5 !important;
    margin: var(--m-profile-gap-stats-actions) auto 0 !important;
  }

  body.app-profile .profile-btn,
  body.app-post-details .post-follow-btn {
    width: var(--btn-blue-w) !important;
    min-width: var(--btn-blue-min) !important;
    max-width: var(--btn-blue-w) !important;
    height: var(--btn-blue-h) !important;
    min-height: var(--btn-blue-h) !important;
    box-sizing: border-box !important;
    padding: var(--btn-blue-pad) !important;
    border-radius: var(--btn-blue-radius) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: var(--btn-blue-font) !important;
    line-height: var(--btn-blue-lh) !important;
    font-weight: var(--btn-blue-weight) !important;
    letter-spacing: var(--btn-blue-ls) !important;
  }

  body.app-profile .profile-header.is-skeleton .profile-btn {
    position: relative !important;
    overflow: hidden !important;
    background: var(--skel) !important;
    color: transparent !important;
  }

  body.app-profile .profile-donate-xp,
  body.app-post-details .profile-donate-xp {
    width: var(--btn-blue-h) !important;
    height: var(--btn-blue-h) !important;
    flex: 0 0 var(--btn-blue-h) !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--brand) !important;
    padding: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body.app-profile .profile-donate-xp img,
  body.app-post-details .profile-donate-xp img {
    width: 21px !important;
    height: 21px !important;
    display: block !important;
    filter: brightness(0) invert(1) !important;
  }

  body.app-profile .profile-settings-btn {
    display: none !important;
  }

  body.app-profile .profile-btn:active {
    transform: translateY(1px) !important;
  }

  body.app-post-details .post-details-content {
    margin-top: 0 !important;
  }
}

/* Authenticated dark theme mobile overrides */
@media (max-width: 900px) {
  html[data-resolved-theme="dark"],
  html[data-resolved-theme="dark"] body.app,
  html[data-resolved-theme="dark"] .spa-root,
  html[data-resolved-theme="dark"] .spa-view,
  html[data-resolved-theme="dark"] body.app .home-scroll,
  html[data-resolved-theme="dark"] body.app .app-shell {
    background: var(--app-bg) !important;
    color: var(--text-100);
  }

  html[data-resolved-theme="dark"] body.app :where(
    .glee-card,
    .leaderboard-row,
    .hub-card,
    .post-confirm-card,
    .search-dd-inner,
    .profile-card,
    .profile-header-card,
    .lootbox-card,
    .reward-card,
    .error-card,
    .empty-card:not(.signals-state-card--empty)
  ) {
    background-color: var(--surface-card) !important;
    color: var(--text-100) !important;
  }

  html[data-resolved-theme="dark"] body.app :where(
    .search-input,
    .settings-input,
    .cp-input,
    .cp-textarea,
    .pe-input,
    .pe-textarea,
    .post-comment-input
  ) {
    background-color: var(--surface-input) !important;
    color: var(--text-100) !important;
    border-color: var(--border-subtle) !important;
  }

  html[data-resolved-theme="dark"] body.app :where(input, textarea)::placeholder {
    color: var(--placeholder-color) !important;
  }

  html[data-resolved-theme="dark"] body.app :where(
    .mobile-bottom-nav,
    .mobile-topbar-action,
    .home-tabs,
    .profile-tabs,
    .hub-switch,
    .leaderboard-switch
  ) {
    background: var(--glass-ui-bg) !important;
    border-color: var(--glass-ui-stroke) !important;
    box-shadow: var(--switcher-glass-shadow) !important;
  }

  html[data-resolved-theme="dark"] body.app :where(
    .mnav-item.is-active,
    .mobile-topbar-action.is-active,
    .home-tab.is-active,
    .profile-tab.is-active,
    .hub-switch button.is-active,
    .leaderboard-switch button.is-active
  ) {
    background: var(--surface-active) !important;
  }

  html[data-resolved-theme="dark"] body.app :where(
    .row-divider,
    .settings-divider,
    .post-side-divider,
    .leaderboard-divider
  ) {
    background-color: var(--border-subtle) !important;
  }

}

/* Keep canonical CTA state rules last in the mobile cascade. */
@media (max-width: 900px) {
  .glee-cta[hidden] { display: none !important; }

  .glee-cta,
  .glee-primary-btn:not(.signals-toolbar-analyze),
  #postModal .cp-post,
  body.app-profile #profileEditModal .pe-save {
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    height: 37px !important;
    min-height: 37px !important;
    border-radius: 999px !important;
    padding: 0 !important;
    font-size: 15px !important;
    line-height: 22px !important;
    font-weight: 400 !important;
    letter-spacing: -0.02em !important;
  }

  .glee-cta--primary,
  .glee-primary-btn,
  #postModal .cp-post,
  body.app-profile #profileEditModal .pe-save {
    border: 1px solid var(--cta-primary-border) !important;
    background: var(--cta-primary-bg) !important;
    color: var(--cta-primary-text) !important;
  }

  .glee-cta--brand-outline {
    border: 1px solid var(--cta-brand-outline-border) !important;
    background: var(--cta-brand-outline-bg) !important;
    color: var(--cta-brand-outline-text) !important;
  }

  .glee-cta--neutral-outline {
    border: 1px solid var(--cta-neutral-outline-border) !important;
    background: var(--cta-neutral-outline-bg) !important;
    color: var(--cta-neutral-outline-text) !important;
  }

  .glee-cta--danger {
    border: 1px solid var(--cta-danger-outline-border) !important;
    background: var(--cta-danger-outline-bg) !important;
    color: var(--cta-danger-outline-text) !important;
  }

  .glee-cta--disabled,
  body.app-signals .signals-analyze-submit:disabled,
  .glee-cta.is-loading,
  .glee-cta.is-async-loading,
  .glee-primary-btn.is-loading,
  .glee-primary-btn.is-async-loading,
  #postModal .cp-post.is-loading,
  #postModal .cp-post.is-async-loading,
  body.app-profile #profileEditModal .pe-save.is-loading,
  body.app-profile #profileEditModal .pe-save.is-async-loading {
    border-color: var(--cta-disabled-border) !important;
    background: var(--cta-disabled-bg) !important;
    color: var(--cta-disabled-text) !important;
    opacity: 1 !important;
    pointer-events: none !important;
  }

  .glee-cta:hover,
  .glee-cta:active,
  .glee-cta:focus-visible,
  .glee-primary-btn:hover,
  .glee-primary-btn:active,
  #postModal .cp-post:hover,
  #postModal .cp-post:active,
  body.app-profile #profileEditModal .pe-save:hover,
  body.app-profile #profileEditModal .pe-save:active {
    box-shadow: none !important;
    transform: none !important;
  }

  body.app-community .community-activity {
    margin-top: var(--m-section-gap);
    padding-bottom: 0;
  }

  body.app-community .community-activity-title {
    margin-bottom: 14px;
  }

  body.app-community .community-activity-list {
    gap: 30px;
  }

  body.app-community .community-activity-row {
    grid-template-columns: 50px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    min-height: 50px;
    padding: 0;
  }

  body.app-community .community-activity-copy {
    align-self: start;
    padding-top: 3px;
  }

  body.app-community .community-activity-avatar {
    width: 50px;
    height: 50px;
  }

}

/* Canonical mobile bottom clearance: the scroll container is the sole owner. */
@media (max-width: 900px) {
  body.app .home-scroll {
    padding-bottom: var(--m-bottom-content-pad);
  }

  body.app .community-wrap,
  body.app .events-wrap,
  body.app .hub-wrap,
  body.app .hub-progress,
  body.app .signals-wrap,
  body.app .leaderboard-wrap,
  body.app .profile-wrap,
  body.app .post-details-center,
  body.app .event-details-center,
  body.app .collection-details-center,
  body.app .notif-wrap,
  body.app .settings-wrap {
    padding-bottom: 0;
  }
}