/*
 * Mecly UI stability layer.
 *
 * The main stylesheet contains historical release overrides. This file is the
 * single final contract for layout safety, media avatars, touch targets and
 * low-cost mobile surfaces. Keep new global fixes here instead of appending
 * another versioned block to style.css.
 */

:root {
  --ui-ink: #10262b;
  --ui-muted: #50656a;
  --ui-accent: #0b7b7e;
  --ui-accent-strong: #075d61;
  --ui-surface: rgba(250, 253, 252, .96);
  --ui-surface-solid: #f8fcfb;
  --ui-line: rgba(10, 72, 78, .14);
  --ui-shadow: 0 8px 18px rgba(9, 28, 36, .10);
  --ui-focus: rgba(11, 123, 126, .38);
}


.phone-shell.theme-light {
  --ui-surface: #f8fcfb;
  --ui-surface-solid: #f8fcfb;
  --ui-shadow: 0 4px 8px rgba(9, 28, 36, .08);
}

.phone-shell.theme-contrast {
  --ui-ink: #061316;
  --ui-muted: #243f45;
  --ui-accent: #006f73;
  --ui-accent-strong: #004f53;
  --ui-surface: #ffffff;
  --ui-surface-solid: #ffffff;
  --ui-line: #16363c;
  --ui-shadow: none;
  --ui-focus: #00aeb5;
}

.phone-shell.theme-light :is(
  .live-topbar,
  .event-discovery-bar,
  .live-map-sheet,
  .bottom-nav,
  .simple-header,
  .chat-header,
  .people-hero,
  .people-dating-entry,
  .people-search,
  .people-card,
  .dating-hero,
  .dating-card,
  .market-hero,
  .market-create-entry,
  .market-search,
  .market-card,
  .chat-hub-card,
  .chat-hub-row,
  .profile-card,
  .settings-card.app-settings-card
) {
  background: var(--ui-surface-solid) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.phone-shell.theme-contrast :is(
  .live-topbar,
  .event-discovery-bar,
  .live-map-sheet,
  .bottom-nav,
  .simple-header,
  .chat-header,
  .people-hero,
  .people-dating-entry,
  .people-search,
  .people-card,
  .dating-hero,
  .dating-card,
  .market-hero,
  .market-create-entry,
  .market-search,
  .market-card,
  .chat-hub-card,
  .chat-hub-row,
  .profile-card,
  .settings-card.app-settings-card,
  .settings-card .settings-section[data-settings-panel]
) {
  color: var(--ui-ink) !important;
  background: #ffffff !important;
  border-color: var(--ui-line) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.phone-shell.theme-contrast :where(button, a, input, select, textarea):focus-visible {
  outline-color: var(--ui-focus) !important;
  outline-width: 4px !important;
}

.phone-shell,
.phone-shell * {
  box-sizing: border-box;
}

.phone-shell :where(button, a, input, select, textarea):focus-visible {
  outline: 3px solid var(--ui-focus) !important;
  outline-offset: 2px !important;
}

/* Media avatars keep initials underneath so a failed remote image is safe. */
.people-avatar,
.person-avatar,
.chat-hub-avatar,
.friend-profile-avatar,
.invite-person-row .person-avatar {
  position: relative !important;
  isolation: isolate;
}

.people-avatar .avatar-fallback,
.person-avatar .avatar-fallback,
.chat-hub-avatar .avatar-fallback,
.friend-profile-avatar .avatar-fallback {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0;
  display: grid !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  place-items: center;
  color: #fff;
  border-radius: inherit;
  line-height: 1 !important;
}

.people-avatar img,
.person-avatar img,
.chat-hub-avatar img,
.friend-profile-avatar img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  object-position: center;
}

.people-avatar.online::after {
  z-index: 3 !important;
}

/* Leaflet media markers: photo first, meaningful fallback and a count badge. */
.leaflet-marker-icon.mecly-map-pin {
  display: grid !important;
  width: 44px !important;
  height: 44px !important;
  margin-top: -22px !important;
  margin-left: -22px !important;
  padding: 3px !important;
  place-items: center;
  color: #fff !important;
  background: #fff !important;
  border: 2px solid rgba(255, 255, 255, .98) !important;
  border-radius: 50% !important;
  box-shadow: 0 7px 16px rgba(6, 35, 43, .24) !important;
}

.mecly-map-pin .map-pin-media {
  position: relative !important;
  display: grid !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  place-items: center;
  overflow: visible;
  border-radius: 50%;
  background: linear-gradient(145deg, #168bff, #0b7b7e);
}

.mecly-map-pin .map-pin-symbol {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0;
  display: grid !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  place-items: center;
  color: #fff;
  border-radius: 50%;
  font-size: .72rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.mecly-map-pin .map-pin-media img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
}

.mecly-map-pin .map-pin-media small {
  position: absolute !important;
  right: -6px;
  bottom: -5px;
  z-index: 2;
  display: grid !important;
  width: 19px !important;
  min-width: 19px !important;
  height: 19px !important;
  min-height: 19px !important;
  margin: 0 !important;
  place-items: center;
  color: #fff !important;
  background: var(--ui-accent-strong) !important;
  border: 2px solid #fff;
  border-radius: 50%;
  font-size: .61rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.leaflet-marker-icon.mecly-map-pin:focus-visible {
  outline: 3px solid rgba(11, 123, 126, .55) !important;
  outline-offset: 3px !important;
}

.leaflet-marker-icon.mecly-map-pin.selected,
.leaflet-marker-icon.mecly-map-pin.just-created {
  border-color: #0b7b7e !important;
  box-shadow: 0 0 0 6px rgba(11, 123, 126, .16), 0 8px 18px rgba(6, 35, 43, .26) !important;
}

.leaflet-marker-icon.background-pin {
  opacity: .48 !important;
}

/* Closed transient surfaces must leave both the visual and accessibility tree. */
.market-detail-sheet[aria-hidden="true"],
.market-create-sheet[aria-hidden="true"],
.map-action-sheet[aria-hidden="true"],
.user-mini-profile-panel[aria-hidden="true"],
.notification-center-panel[aria-hidden="true"],
.nav-create-menu[aria-hidden="true"] {
  visibility: hidden !important;
}

/* One calm component vocabulary for the list-heavy product screens. */
.people-hero,
.people-dating-entry,
.people-search,
.people-card,
.dating-hero,
.dating-card,
.market-hero,
.market-create-entry,
.market-search,
.market-card,
.chat-hub-card,
.chat-hub-row,
.settings-card .settings-section[data-settings-panel] {
  color: var(--ui-ink) !important;
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-line) !important;
  box-shadow: var(--ui-shadow) !important;
}

.people-card,
.dating-card,
.market-card,
.chat-hub-row,
.settings-card .settings-section[data-settings-panel] {
  border-radius: 16px !important;
}

.people-dating-entry,
.market-create-entry {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  gap: 2px 10px !important;
  align-items: center !important;
  min-height: 64px !important;
  padding: 9px 11px !important;
  text-align: left !important;
}

.people-dating-entry > span:first-child,
.market-create-entry > span:first-child {
  grid-row: 1 / span 2 !important;
  grid-column: 1 !important;
  width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
}

.people-dating-entry > b,
.market-create-entry > b {
  grid-row: 1 !important;
  grid-column: 2 !important;
  min-width: 0;
  align-self: end;
}

.people-dating-entry > small,
.market-create-entry > small {
  grid-row: 2 !important;
  grid-column: 2 !important;
  display: block !important;
  min-width: 0 !important;
  width: auto !important;
  overflow: visible !important;
  color: var(--ui-muted) !important;
  line-height: 1.25 !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

.market-load-more {
  display: grid;
  width: 100%;
  min-height: 48px;
  place-items: center;
  gap: 2px;
  color: #fff;
  background: var(--ui-accent);
  border: 0;
  border-radius: 14px;
  font-weight: 800;
}

.market-load-more small {
  color: rgba(255, 255, 255, .78);
  font-size: .68rem;
  font-weight: 700;
}

@media (max-width: 900px) {
  .dating-filter-row button {
    min-width: 44px !important;
  }

  button.sheet-handle.small {
    position: relative !important;
    display: block !important;
    min-width: 96px !important;
    width: 96px !important;
    max-width: 96px !important;
    min-height: 44px !important;
    height: 44px !important;
    max-height: 44px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  button.sheet-handle.small::before {
    content: "";
    position: absolute !important;
    top: 19px !important;
    left: 50% !important;
    width: 48px !important;
    height: 5px !important;
    background: rgba(15, 23, 42, .82) !important;
    border-radius: 999px !important;
    transform: translateX(-50%) !important;
  }

  body .phone-shell:not(.sheet-open):not(.event-selected) button.sheet-handle.small {
    background: transparent !important;
  }

  .market-create-head button,
  .notification-center-head button,
  .user-mini-profile-head button,
  .invite-friends-head button,
  .create-group-head button {
    min-width: 44px !important;
    width: 44px !important;
    min-height: 44px !important;
    height: 44px !important;
  }

  body .phone-shell.event-selected:has(.map-profile-screen.active) .map-profile-screen.active .live-map-sheet > .sheet-handle,
  body .phone-shell.event-selected .map-profile-screen.active .live-map-sheet > .sheet-handle {
    min-width: 96px !important;
    width: 96px !important;
    max-width: 96px !important;
    min-height: 44px !important;
    height: 44px !important;
    max-height: 44px !important;
  }
}

/* Tablet portrait keeps the desktop composition but still needs touch targets. */
@media (min-width: 701px) and (max-width: 900px) {
  .live-topbar,
  .live-topbar .search-pill,
  .live-topbar .search-pill input,
  .live-topbar .round-ghost,
  .live-topbar .locate-button,
  .live-topbar .distance-button,
  .event-discovery-bar,
  .event-discovery-scroll,
  .event-discovery-scroll button,
  .people-filter-row button,
  .dating-filter-row button,
  .market-filter-row button,
  .chat-hub-tabs button,
  .settings-group-nav button {
    min-height: 44px !important;
    height: 44px !important;
  }

  .live-topbar .round-ghost,
  .live-topbar .locate-button,
  .live-topbar .distance-button,
  .user-mini-profile-trigger,
  .notification-center-trigger,
  .simple-header .round-ghost,
  .chat-header .round-ghost,
  .event-room-header .round-ghost,
  .event-recap-header .round-ghost {
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    height: 44px !important;
  }

  .live-topbar .distance-button {
    width: auto !important;
  }

  body .phone-shell:has(.map-profile-screen.active):not(.sheet-open):not(.event-selected):not(.map-picker-open):not(.map-point-intent-open) .map-profile-screen.active .live-map-sheet,
  body .phone-shell:not(.sheet-open):not(.event-selected):not(.map-picker-open):not(.map-point-intent-open) .map-profile-screen.active .live-map-sheet {
    min-height: 44px !important;
    height: 44px !important;
    max-height: 44px !important;
  }

  body .phone-shell:has(.map-profile-screen.active):not(.sheet-open):not(.event-selected):not(.map-picker-open):not(.map-point-intent-open) .map-profile-screen.active .live-map-sheet > .sheet-handle,
  body .phone-shell:not(.sheet-open):not(.event-selected):not(.map-picker-open):not(.map-point-intent-open) .map-profile-screen.active .live-map-sheet > .sheet-handle {
    min-width: 96px !important;
    width: 96px !important;
    max-width: 96px !important;
    min-height: 44px !important;
    height: 44px !important;
    max-height: 44px !important;
  }

  .people-actions button,
  .dating-actions button,
  .dating-profile-link,
  .market-card-actions button,
  .profile-card button,
  .settings-card.app-settings-card button {
    min-height: 44px !important;
    height: auto !important;
    max-height: none !important;
  }

  .people-filter-row button {
    min-width: 44px !important;
  }

  .profile-card .cover-edit {
    min-width: 44px !important;
    width: 44px !important;
  }
}

@media (max-width: 700px) {
  .live-topbar {
    top: max(8px, env(safe-area-inset-top)) !important;
    right: 8px !important;
    left: 8px !important;
    grid-template-columns: minmax(0, 1fr) 44px 54px 44px !important;
    gap: 4px !important;
    width: auto !important;
    max-width: none !important;
    min-height: 44px !important;
  }

  .live-topbar .search-pill,
  .live-topbar .search-pill input,
  .live-topbar .round-ghost,
  .live-topbar .locate-button,
  .live-topbar .distance-button {
    min-height: 44px !important;
    height: 44px !important;
  }

  .live-topbar .round-ghost,
  .live-topbar .locate-button,
  .live-topbar .distance-button {
    min-width: 44px !important;
  }

  .event-discovery-bar {
    top: calc(60px + env(safe-area-inset-top)) !important;
    right: 8px !important;
    left: 8px !important;
    width: auto !important;
    height: 44px !important;
    overflow: hidden !important;
  }

  .event-discovery-scroll {
    min-height: 44px !important;
    height: 44px !important;
    gap: 5px !important;
    padding: 0 !important;
  }

  .event-discovery-scroll button,
  .people-filter-row button,
  .dating-filter-row button,
  .market-filter-row button,
  .chat-hub-tabs button,
  .settings-group-nav button {
    min-height: 44px !important;
    height: 44px !important;
  }

  .people-filter-row button {
    min-width: 44px !important;
  }

  .user-mini-profile-trigger {
    top: calc(118px + env(safe-area-inset-top)) !important;
  }

  .notification-center-trigger {
    top: calc(170px + env(safe-area-inset-top)) !important;
  }

  body .phone-shell:has(.map-profile-screen.active):not(.sheet-open):not(.event-selected):not(.map-picker-open):not(.map-point-intent-open) .map-profile-screen.active .live-map-sheet,
  body .phone-shell:not(.sheet-open):not(.event-selected):not(.map-picker-open):not(.map-point-intent-open) .map-profile-screen.active .live-map-sheet {
    min-height: 44px !important;
    height: 44px !important;
    max-height: 44px !important;
  }

  body .phone-shell:has(.map-profile-screen.active):not(.sheet-open):not(.event-selected):not(.map-picker-open):not(.map-point-intent-open) .map-profile-screen.active .live-map-sheet > .sheet-handle,
  body .phone-shell:not(.sheet-open):not(.event-selected):not(.map-picker-open):not(.map-point-intent-open) .map-profile-screen.active .live-map-sheet > .sheet-handle {
    min-width: 96px !important;
    width: 96px !important;
    max-width: 96px !important;
    min-height: 44px !important;
    height: 44px !important;
    max-height: 44px !important;
  }

  .simple-header .round-ghost,
  .chat-header .round-ghost,
  .event-room-header .round-ghost,
  .event-recap-header .round-ghost {
    min-width: 44px !important;
    width: 44px !important;
    min-height: 44px !important;
    height: 44px !important;
  }

  .search-screen .simple-header .round-ghost,
  .saved-screen .simple-header .round-ghost,
  .profile-screen .simple-header .round-ghost,
  .settings-screen .simple-header .round-ghost,
  .profile-edit-screen .simple-header .round-ghost,
  .create-screen .simple-header .round-ghost {
    min-width: 44px !important;
    width: 44px !important;
    min-height: 44px !important;
    height: 44px !important;
  }

  .simple-header,
  .chat-header,
  .event-room-header,
  .event-recap-header {
    right: auto !important;
    left: auto !important;
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    margin-right: auto !important;
    margin-left: auto !important;
    min-height: 54px !important;
    background: rgba(248, 252, 251, .94) !important;
    border-color: var(--ui-line) !important;
    box-shadow: 0 5px 14px rgba(9, 28, 36, .08) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .chat-screen .chat-header {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .people-hub,
  .dating-hub,
  .market-hub,
  .chat-hub-card,
  .profile-card,
  .settings-card.app-settings-card {
    min-width: 0 !important;
    max-width: calc(100vw - 20px) !important;
  }

  .people-hub,
  .dating-hub,
  .market-hub {
    width: calc(100vw - 20px) !important;
    margin-right: auto !important;
    margin-left: auto !important;
    overflow-x: clip !important;
  }

  .people-list,
  .dating-list,
  .market-list,
  .market-card,
  .market-card-main,
  .market-card-body {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .market-card-main {
    grid-template-columns: 98px minmax(0, 1fr) !important;
  }

  .market-photo {
    width: 98px !important;
    height: 112px !important;
  }

  .people-actions button,
  .dating-actions button,
  .dating-profile-link,
  .market-card-actions button,
  .profile-card button,
  .settings-card .account-actions-card button,
  .settings-card .firebase-auth-actions button {
    min-height: 44px !important;
    height: auto !important;
  }

  .profile-card .cover-edit {
    min-width: 44px !important;
    width: 44px !important;
    height: 44px !important;
  }

  .people-card-main,
  .market-card-main,
  .chat-hub-row {
    min-height: 56px !important;
  }

  /* Repeated blur layers caused black/flickering columns on mobile GPUs. */
  .people-hero,
  .people-dating-entry,
  .people-search,
  .people-card,
  .dating-hero,
  .dating-card,
  .market-hero,
  .market-create-entry,
  .market-search,
  .market-card,
  .chat-hub-card,
  .chat-hub-row,
  .settings-card.app-settings-card,
  .settings-card .settings-section[data-settings-panel],
  .settings-card .account-actions-card,
  .settings-card .firebase-auth-card,
  .settings-card .auth-status-card {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .chat-hub-card {
    background: rgba(245, 250, 248, .97) !important;
  }

  .chat-hub-row {
    background: #fff !important;
  }

  .chat-hub-row {
    min-height: 72px !important;
    height: auto !important;
    align-items: center !important;
  }

  .chat-hub-body,
  .chat-hub-side {
    min-width: 0 !important;
  }

  .settings-card.app-settings-card {
    background: rgba(247, 251, 249, .98) !important;
  }

  .leaflet-marker-icon.mecly-map-pin {
    width: 46px !important;
    height: 46px !important;
    margin-top: -23px !important;
    margin-left: -23px !important;
  }
}

@media (max-width: 360px) {
  .live-topbar {
    grid-template-columns: minmax(0, 1fr) 44px 50px 44px !important;
  }

  .market-card-main {
    grid-template-columns: 88px minmax(0, 1fr) !important;
  }

  .market-photo {
    width: 88px !important;
  }

  .market-card-body > b {
    overflow: visible !important;
    line-height: 1.2 !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  .profile-action-row button {
    min-height: 48px !important;
    padding-right: 8px !important;
    padding-left: 8px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
  }
}

/* Specificity seal for legacy release selectors that still use !important. */
@media (max-width: 900px) {
  body .phone-shell .people-screen.active .people-hub .people-hero,
  body .phone-shell .dating-screen.active .dating-hub .dating-hero,
  body .phone-shell .market-screen.active .market-hub .market-hero {
    flex: 0 0 auto !important;
    min-height: 80px !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body .phone-shell .dating-screen.active .dating-hub .dating-hero {
    min-height: 96px !important;
  }

  body .phone-shell.event-selected:has(.map-profile-screen.active) .map-profile-screen.active .live-map-sheet.detail-open .event-detail:not([hidden]) {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 0 30px !important;
    background: var(--app-canvas) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  body .phone-shell.event-selected:has(.map-profile-screen.active) .map-profile-screen.active .live-map-sheet.detail-open .event-detail .event-cover {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  body .phone-shell.event-selected:has(.map-profile-screen.active) .map-profile-screen.active .live-map-sheet.detail-open .event-detail :is(
    .event-headline,
    .event-face-summary,
    .event-storyline,
    .event-host-strip,
    .event-moments,
    .event-quick-facts,
    .event-actions,
    .event-detail-grid,
    .event-route-preview,
    .event-modules
  ) {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  body .phone-shell.event-selected:has(.map-profile-screen.active) .map-profile-screen.active .live-map-sheet.detail-open .event-detail .event-face-summary {
    padding: 12px 16px !important;
    background: var(--app-canvas) !important;
    border: 0 !important;
  }

  body .phone-shell.event-selected:has(.map-profile-screen.active) .map-profile-screen.active .live-map-sheet.detail-open .event-detail .event-face-summary > span {
    min-height: 58px !important;
    padding: 10px 12px !important;
    background: var(--app-panel) !important;
    border: 1px solid var(--app-border) !important;
    border-radius: var(--app-control-radius) !important;
    box-shadow: none !important;
  }

  body .phone-shell.event-selected:has(.map-profile-screen.active) .map-profile-screen.active .live-map-sheet.detail-open .event-detail .event-actions {
    display: grid !important;
    padding: 16px !important;
    gap: 8px !important;
    background: var(--app-panel) !important;
    border-top: 1px solid var(--app-border) !important;
    border-bottom: 1px solid var(--app-border) !important;
  }

  body .phone-shell.event-selected:has(.map-profile-screen.active) .map-profile-screen.active .live-map-sheet.detail-open .event-detail .event-actions button {
    min-height: 48px !important;
    height: auto !important;
    margin: 0 !important;
    border-radius: var(--app-control-radius) !important;
    box-shadow: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .phone-shell *,
  .phone-shell *::before,
  .phone-shell *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .mecly-map-pin,
  .people-card,
  .dating-card,
  .market-card,
  .chat-hub-row {
    animation: none !important;
    transition: none !important;
  }
}

/*
 * Unified mobile product shell (v215).
 *
 * The map remains the visual surface only on Map. Task screens use one solid
 * canvas, one header contract and one navigation contract so Chat, People,
 * Market, Profile and Settings feel like parts of the same application.
 */
:root {
  --app-canvas: #f2f6f5;
  --app-panel: #ffffff;
  --app-panel-muted: #e9f0ef;
  --app-border: #d4dfdd;
  --app-text: #10272c;
  --app-text-muted: #51666b;
  --app-brand: #087d82;
  --app-brand-strong: #05666b;
  --app-brand-soft: #d9f0ef;
  --app-danger: #a23945;
  --app-radius: 14px;
  --app-control-radius: 12px;
  --app-header-height: 64px;
  --app-nav-height: 64px;
  --app-ease: cubic-bezier(.22, 1, .36, 1);
}

.phone-shell.theme-light {
  --app-canvas: #f7faf9;
  --app-panel: #ffffff;
  --app-panel-muted: #edf3f2;
}

.phone-shell.theme-contrast {
  --app-canvas: #ffffff;
  --app-panel: #ffffff;
  --app-panel-muted: #eef8f8;
  --app-border: #17383e;
  --app-text: #061316;
  --app-text-muted: #29464c;
  --app-brand: #006f73;
  --app-brand-strong: #004f53;
  --app-brand-soft: #d9ffff;
  --app-danger: #8c1423;
}

@media (max-width: 900px) {
  .phone-shell {
    color: var(--app-text) !important;
    background: var(--app-canvas) !important;
  }

  :is(
    .chat-screen,
    .people-screen,
    .dating-screen,
    .market-screen,
    .profile-screen,
    .settings-screen,
    .saved-screen,
    .search-screen,
    .event-room-screen,
    .event-recap-screen,
    .direct-message-screen,
    .profile-edit-screen,
    .create-screen
  ).active {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100% !important;
    padding: 0 !important;
    overflow: hidden !important;
    color: var(--app-text) !important;
    background: var(--app-canvas) !important;
  }

  :is(
    .chat-screen,
    .people-screen,
    .dating-screen,
    .market-screen,
    .profile-screen,
    .settings-screen,
    .saved-screen,
    .search-screen,
    .event-room-screen,
    .event-recap-screen,
    .direct-message-screen,
    .profile-edit-screen
  ) > :is(.blur-photo, .profile-bg, .map-texture) {
    display: none !important;
  }

  /* One edge-to-edge header across every task screen. */
  body .phone-shell :is(
    .simple-header,
    .chat-header,
    .event-room-header,
    .event-recap-header,
    .direct-message-header
  ) {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    z-index: 35 !important;
    flex: 0 0 var(--app-header-height) !important;
    width: 100% !important;
    max-width: none !important;
    min-height: var(--app-header-height) !important;
    height: var(--app-header-height) !important;
    margin: 0 !important;
    padding: 10px 14px !important;
    color: var(--app-text) !important;
    background: var(--app-panel) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--app-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  body .phone-shell :is(
    .simple-header,
    .chat-header,
    .event-room-header,
    .event-recap-header,
    .direct-message-header
  ) strong {
    color: var(--app-text) !important;
    font-size: 1.05rem !important;
    font-weight: 750 !important;
    letter-spacing: -.015em !important;
    line-height: 1.2 !important;
  }

  body .phone-shell :is(
    .simple-header,
    .chat-header,
    .event-room-header,
    .event-recap-header,
    .direct-message-header
  ) .round-ghost,
  body .phone-shell .simple-header > button {
    display: grid !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    place-items: center !important;
    color: var(--app-text) !important;
    background: var(--app-panel-muted) !important;
    border: 0 !important;
    border-radius: var(--app-control-radius) !important;
    box-shadow: none !important;
  }

  body .phone-shell :is(
    .simple-header,
    .chat-header,
    .event-room-header,
    .event-recap-header,
    .direct-message-header
  ) .round-ghost:active,
  body .phone-shell .simple-header > button:active {
    background: #dce6e4 !important;
    transform: scale(.97);
  }

  .chat-header [data-chat-count] {
    display: grid !important;
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 10px !important;
    place-items: center !important;
    color: var(--app-text) !important;
    background: var(--app-panel-muted) !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-size: .82rem !important;
    font-weight: 750 !important;
  }

  /* Solid, stable bottom navigation. */
  body .phone-shell .bottom-nav {
    position: absolute !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 45 !important;
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
    min-height: var(--app-nav-height) !important;
    height: calc(var(--app-nav-height) + env(safe-area-inset-bottom, 0px)) !important;
    margin: 0 !important;
    padding: 6px 10px max(6px, env(safe-area-inset-bottom, 0px)) !important;
    color: var(--app-text-muted) !important;
    background: var(--app-panel) !important;
    border: 0 !important;
    border-top: 1px solid var(--app-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  body .phone-shell .bottom-nav button {
    min-width: 44px !important;
    min-height: 50px !important;
    padding: 3px 5px !important;
    gap: 2px !important;
    color: var(--app-text-muted) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
  }

  body .phone-shell .bottom-nav button.current {
    color: var(--app-brand-strong) !important;
    background: var(--app-brand-soft) !important;
  }

  body .phone-shell .bottom-nav button span {
    font-size: .7rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
  }

  body .phone-shell .bottom-nav .create-button {
    background: transparent !important;
  }

  body .phone-shell .bottom-nav .create-button .plus {
    display: grid !important;
    width: 44px !important;
    height: 44px !important;
    margin: -7px auto 0 !important;
    place-items: center !important;
    color: #fff !important;
    background: var(--app-brand) !important;
    border: 0 !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 8px rgba(5, 80, 84, .2) !important;
  }

  /* Full-width content areas; the screen is the surface, not a floating card. */
  body .phone-shell :is(
    .chat-hub-card,
    .people-hub,
    .dating-hub,
    .market-hub,
    .profile-card,
    .settings-card.app-settings-card,
    .saved-hub,
    .search-card
  ) {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    color: var(--app-text) !important;
    background: var(--app-canvas) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  body .phone-shell :is(.people-hub, .dating-hub, .market-hub, .settings-card.app-settings-card, .saved-hub, .search-card) {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 16px 16px calc(var(--app-nav-height) + 22px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  /* Shared search field and horizontal filter vocabulary. */
  body .phone-shell :is(.chat-hub-search, .people-search, .market-search) {
    display: flex !important;
    width: 100% !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    align-items: center !important;
    gap: 10px !important;
    color: var(--app-text-muted) !important;
    background: var(--app-panel) !important;
    border: 1px solid var(--app-border) !important;
    border-radius: var(--app-control-radius) !important;
    box-shadow: none !important;
  }

  body .phone-shell :is(.chat-hub-search, .people-search, .market-search) svg {
    flex: 0 0 20px !important;
    width: 20px !important;
    height: 20px !important;
    color: var(--app-text-muted) !important;
    stroke: currentColor !important;
  }

  body .phone-shell :is(.chat-hub-search, .people-search, .market-search) input {
    min-width: 0 !important;
    height: 46px !important;
    padding: 0 !important;
    color: var(--app-text) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: .95rem !important;
  }

  body .phone-shell :is(.chat-hub-search, .people-search, .market-search) input::placeholder {
    color: #5c6f73 !important;
    opacity: 1 !important;
  }

  body .phone-shell :is(
    .chat-hub-tabs,
    .people-filter-row,
    .dating-filter-row,
    .market-filter-row,
    .settings-group-nav,
    .profile-tabs
  ) {
    scrollbar-width: none;
  }

  body .phone-shell :is(
    .chat-hub-tabs,
    .people-filter-row,
    .dating-filter-row,
    .market-filter-row
  ) button {
    min-width: 44px !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 14px !important;
    color: var(--app-text-muted) !important;
    background: var(--app-panel) !important;
    border: 1px solid var(--app-border) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    font-size: .82rem !important;
    font-weight: 700 !important;
  }

  body .phone-shell :is(
    .chat-hub-tabs,
    .people-filter-row,
    .dating-filter-row,
    .market-filter-row
  ) button:is(.selected, .active, [aria-pressed="true"]) {
    color: #fff !important;
    background: var(--app-text) !important;
    border-color: var(--app-text) !important;
  }

  /* Chat: one compact command area and one continuous conversation list. */
  body .phone-shell .chat-hub-card {
    display: flex !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 14px 16px calc(var(--app-nav-height) + 14px) !important;
    gap: 12px !important;
    overflow: hidden !important;
  }

  .chat-hub-tabs {
    display: flex !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 8px !important;
    overflow-x: auto !important;
  }

  .chat-hub-tabs button em {
    display: inline-grid !important;
    min-width: 20px !important;
    height: 20px !important;
    margin-left: 5px !important;
    padding: 0 5px !important;
    place-items: center !important;
    color: inherit !important;
    background: rgba(80, 102, 107, .1) !important;
    border-radius: 999px !important;
    font-size: .68rem !important;
  }

  .chat-hub-tabs button.selected em {
    background: rgba(255, 255, 255, .18) !important;
  }

  .chat-hub-actions {
    display: grid !important;
    flex: 0 0 auto !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    margin: 0 !important;
    gap: 8px !important;
  }

  .chat-hub-actions button {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    min-height: 72px !important;
    padding: 8px !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    color: var(--app-text) !important;
    text-align: center !important;
    background: var(--app-panel) !important;
    border: 1px solid var(--app-border) !important;
    border-radius: var(--app-radius) !important;
    box-shadow: none !important;
  }

  .chat-hub-actions button span {
    display: grid !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    place-items: center !important;
    color: #fff !important;
    background: var(--app-brand) !important;
    border-radius: 11px !important;
    font-size: 1rem !important;
  }

  .chat-hub-actions button b {
    min-width: 0 !important;
    color: var(--app-text) !important;
    font-size: .72rem !important;
    font-weight: 750 !important;
    line-height: 1.1 !important;
    overflow-wrap: anywhere;
  }

  .chat-hub-list {
    display: block !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: var(--app-panel) !important;
    border: 1px solid var(--app-border) !important;
    border-radius: var(--app-radius) !important;
    box-shadow: none !important;
  }

  .chat-hub-row {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) auto !important;
    width: 100% !important;
    min-height: 76px !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    align-items: center !important;
    gap: 10px !important;
    color: var(--app-text) !important;
    text-align: left !important;
    background: var(--app-panel) !important;
    border: 0 !important;
    border-bottom: 1px solid #e5ecea !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .chat-hub-row:last-child {
    border-bottom: 0 !important;
  }

  .chat-hub-row.unread {
    background: #f3fbfa !important;
  }

  .chat-hub-avatar {
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    border: 0 !important;
    border-radius: 13px !important;
    box-shadow: none !important;
  }

  .chat-hub-body {
    min-width: 0 !important;
  }

  .chat-hub-body b {
    color: var(--app-text) !important;
    font-size: .94rem !important;
    line-height: 1.2 !important;
  }

  .chat-hub-body b i {
    color: var(--app-text-muted) !important;
    background: var(--app-panel-muted) !important;
    border: 0 !important;
    font-size: .66rem !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  .chat-hub-body small,
  .chat-hub-body em {
    display: block !important;
    max-width: 100% !important;
    color: var(--app-text-muted) !important;
    font-size: .78rem !important;
    line-height: 1.3 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .chat-hub-side {
    min-width: 0 !important;
    align-items: flex-end !important;
    gap: 5px !important;
  }

  .chat-hub-side time {
    color: var(--app-text-muted) !important;
    font-size: .66rem !important;
  }

  .chat-action-chip {
    min-height: 26px !important;
    padding: 5px 8px !important;
    color: var(--app-brand-strong) !important;
    background: var(--app-brand-soft) !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-size: .68rem !important;
    font-weight: 750 !important;
  }

  /* People and Market share the same content rhythm. */
  :is(.people-hero, .dating-hero, .market-hero) {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 0 14px !important;
    padding: 2px 0 !important;
    color: var(--app-text) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  :is(.people-hero, .dating-hero, .market-hero) small {
    color: var(--app-text-muted) !important;
    font-size: .78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  :is(.people-hero, .dating-hero, .market-hero) h1 {
    max-width: 19ch !important;
    margin: 4px 0 0 !important;
    color: var(--app-text) !important;
    font-size: 1.42rem !important;
    font-weight: 780 !important;
    letter-spacing: -.025em !important;
    line-height: 1.14 !important;
    padding-bottom: 2px !important;
    text-wrap: balance;
  }

  :is(.people-hero, .market-hero) > span {
    display: grid !important;
    min-width: 62px !important;
    min-height: 38px !important;
    padding: 0 12px !important;
    place-items: center !important;
    color: #fff !important;
    background: var(--app-text) !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-size: .76rem !important;
    font-weight: 750 !important;
  }

  :is(.people-dating-entry, .market-create-entry) {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-height: 68px !important;
    margin: 0 0 12px !important;
    padding: 10px 12px !important;
    color: var(--app-text) !important;
    text-align: left !important;
    background: var(--app-panel) !important;
    border: 1px solid var(--app-border) !important;
    border-radius: var(--app-radius) !important;
    box-shadow: none !important;
  }

  .market-create-entry {
    color: #fff !important;
    background: var(--app-brand) !important;
    border-color: var(--app-brand) !important;
  }

  :is(.people-dating-entry, .market-create-entry) > span {
    display: grid !important;
    width: 42px !important;
    height: 42px !important;
    place-items: center !important;
    color: #fff !important;
    background: var(--app-brand) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
  }

  .market-create-entry > span {
    color: var(--app-brand-strong) !important;
    background: #fff !important;
  }

  :is(.people-dating-entry, .market-create-entry) b {
    color: inherit !important;
    font-size: .94rem !important;
    line-height: 1.2 !important;
  }

  :is(.people-dating-entry, .market-create-entry) small {
    color: inherit !important;
    font-size: .75rem !important;
    line-height: 1.25 !important;
    opacity: .76;
  }

  .people-search,
  .market-search {
    flex: 0 0 auto !important;
    margin-bottom: 10px !important;
  }

  :is(.people-filter-row, .dating-filter-row, .market-filter-row) {
    flex: 0 0 auto !important;
    display: flex !important;
    width: 100% !important;
    min-height: 44px !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    gap: 8px !important;
    overflow-x: auto !important;
  }

  :is(.people-list, .dating-list, .market-list) {
    flex: 0 0 auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 12px !important;
  }

  :is(.people-card, .dating-card, .market-card) {
    width: 100% !important;
    margin: 0 !important;
    color: var(--app-text) !important;
    background: var(--app-panel) !important;
    border: 1px solid var(--app-border) !important;
    border-radius: var(--app-radius) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .market-card-main {
    grid-template-columns: 104px minmax(0, 1fr) !important;
    width: 100% !important;
    min-height: 132px !important;
    padding: 10px !important;
    align-items: stretch !important;
    gap: 12px !important;
    color: var(--app-text) !important;
    text-align: left !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .market-photo {
    width: 104px !important;
    height: 112px !important;
    border-radius: 11px !important;
  }

  .market-card-body {
    min-width: 0 !important;
    gap: 3px !important;
  }

  .market-card-body small,
  .market-card-body span,
  .market-card-body strong em {
    color: var(--app-text-muted) !important;
  }

  .market-card-body > b {
    color: var(--app-text) !important;
    font-size: .98rem !important;
    line-height: 1.22 !important;
    white-space: normal !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere;
  }

  .market-card-body > span {
    display: -webkit-box !important;
    overflow: hidden !important;
    font-size: .78rem !important;
    line-height: 1.3 !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .market-card-body strong {
    color: var(--app-brand-strong) !important;
    font-size: .94rem !important;
  }

  .market-card-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    padding: 8px !important;
    gap: 6px !important;
    border-top: 1px solid #e5ecea !important;
  }

  .market-card-actions button {
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 8px !important;
    color: var(--app-text) !important;
    background: var(--app-panel-muted) !important;
    border: 0 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    font-size: .82rem !important;
    font-weight: 700 !important;
  }

  .market-card-actions button:nth-child(2) {
    color: #fff !important;
    background: var(--app-brand) !important;
  }

  .market-card-actions button.saved {
    color: var(--app-brand-strong) !important;
    background: var(--app-brand-soft) !important;
  }

  /* Profile and Settings use the same solid canvas and component shapes. */
  .profile-card {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding-bottom: calc(var(--app-nav-height) + 20px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .profile-cover {
    width: calc(100% - 32px) !important;
    margin: 16px 16px 0 !important;
    border-radius: var(--app-radius) !important;
    box-shadow: none !important;
  }

  .profile-identity,
  .profile-action-row,
  .profile-stats-line,
  .profile-achievement-preview,
  .profile-tabs,
  .profile-tab-frame {
    width: calc(100% - 32px) !important;
    margin-right: 16px !important;
    margin-left: 16px !important;
  }

  .profile-action-row button,
  .settings-card button,
  .settings-card :is(input, select, textarea) {
    min-height: 44px !important;
    border-radius: var(--app-control-radius) !important;
    box-shadow: none !important;
  }

  .settings-group-nav,
  .profile-tabs {
    display: flex !important;
    overflow-x: auto !important;
    gap: 8px !important;
  }

  .settings-group-nav button,
  .profile-tabs button {
    flex: 0 0 auto !important;
    min-height: 44px !important;
    padding: 0 14px !important;
    color: var(--app-text-muted) !important;
    background: var(--app-panel) !important;
    border: 1px solid var(--app-border) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
  }

  .settings-group-nav button:is(.active, [aria-selected="true"]),
  .profile-tabs button:is(.selected, [aria-selected="true"]) {
    color: #fff !important;
    background: var(--app-text) !important;
    border-color: var(--app-text) !important;
  }

  .settings-card .settings-section[data-settings-panel] {
    color: var(--app-text) !important;
    background: var(--app-panel) !important;
    border: 1px solid var(--app-border) !important;
    border-radius: var(--app-radius) !important;
    box-shadow: none !important;
  }

  /* Meetup detail becomes a real full-screen mobile route. */
  body .phone-shell.event-selected .map-profile-screen.active .live-map-sheet.detail-open {
    position: absolute !important;
    inset: 0 !important;
    z-index: 70 !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 100% !important;
    height: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    color: var(--app-text) !important;
    background: var(--app-canvas) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  body .phone-shell.event-selected .live-map-sheet.detail-open > :is(.sheet-handle, .sheet-title) {
    display: none !important;
  }

  body .phone-shell.event-selected .live-map-sheet.detail-open .event-detail:not([hidden]) {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 0 30px !important;
    gap: 0 !important;
    color: var(--app-text) !important;
    background: var(--app-canvas) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  body .phone-shell.event-selected .live-map-sheet.detail-open .event-detail-close {
    position: fixed !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 95 !important;
    display: grid !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    place-items: center !important;
    color: var(--app-text) !important;
    background: #fff !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: 0 3px 8px rgba(9, 28, 36, .18) !important;
    font-size: 1.35rem !important;
    font-weight: 600 !important;
  }

  body .phone-shell.event-selected .event-detail .event-cover {
    flex: 0 0 auto !important;
    width: 100% !important;
    height: min(38vh, 320px) !important;
    min-height: 250px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  body .phone-shell.event-selected .event-cover .event-face-data {
    right: 12px !important;
    bottom: 12px !important;
    left: 12px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: rgba(9, 31, 37, .88) !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
  }

  body .phone-shell.event-selected .event-cover .event-face-data span {
    min-height: 56px !important;
    padding: 10px 12px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  body .phone-shell.event-selected .event-cover .event-face-data span:last-child {
    grid-column: 1 / -1 !important;
    border-top: 1px solid rgba(255, 255, 255, .12) !important;
  }

  body .phone-shell.event-selected .event-cover .event-face-data :is(b, small) {
    color: #fff !important;
  }

  body .phone-shell.event-selected .event-detail .event-headline {
    width: 100% !important;
    margin: 0 !important;
    padding: 20px 16px 18px !important;
    color: var(--app-text) !important;
    background: var(--app-panel) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--app-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  body .phone-shell.event-selected .event-detail .event-headline h2 {
    margin: 8px 0 4px !important;
    color: var(--app-text) !important;
    font-size: 1.55rem !important;
    font-weight: 790 !important;
    letter-spacing: -.025em !important;
    line-height: 1.15 !important;
    text-wrap: balance;
  }

  body .phone-shell.event-selected .event-detail .event-headline :is([data-event-meta], [data-event-description]) {
    color: var(--app-text-muted) !important;
    font-size: .92rem !important;
    line-height: 1.45 !important;
  }

  body .phone-shell.event-selected .event-detail .event-headline [data-event-description] {
    margin-top: 8px !important;
  }

  body .phone-shell.event-selected .event-detail :is(small, em) {
    color: var(--app-text-muted) !important;
  }

  body .phone-shell.event-selected .event-face-summary {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 12px 16px !important;
    gap: 8px !important;
    background: var(--app-canvas) !important;
  }

  body .phone-shell.event-selected .event-face-summary > span {
    display: grid !important;
    grid-template-columns: 68px minmax(0, 1fr) !important;
    min-height: 58px !important;
    padding: 10px 12px !important;
    align-items: center !important;
    gap: 10px !important;
    color: var(--app-text) !important;
    background: var(--app-panel) !important;
    border: 1px solid var(--app-border) !important;
    border-radius: var(--app-control-radius) !important;
    box-shadow: none !important;
  }

  body .phone-shell.event-selected .event-face-summary > span b {
    min-width: 0 !important;
    color: var(--app-text) !important;
    font-size: .92rem !important;
    line-height: 1.25 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  body .phone-shell.event-selected .event-face-summary > span em {
    grid-column: 2 !important;
    color: var(--app-text-muted) !important;
    font-size: .72rem !important;
    line-height: 1.25 !important;
  }

  body .phone-shell.event-selected :is(
    .event-storyline,
    .event-host-strip,
    .event-moments,
    .event-quick-facts,
    .event-actions,
    .event-detail-grid,
    .event-route-preview,
    .event-modules
  ) {
    width: 100% !important;
    margin: 8px 0 0 !important;
    padding: 16px !important;
    color: var(--app-text) !important;
    background: var(--app-panel) !important;
    border: 0 !important;
    border-top: 1px solid var(--app-border) !important;
    border-bottom: 1px solid var(--app-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  body .phone-shell.event-selected .event-storyline ul {
    margin: 12px 0 0 !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  body .phone-shell.event-selected .event-storyline li {
    min-height: 64px !important;
    margin: 0 !important;
    padding: 10px 0 !important;
    gap: 12px !important;
    color: var(--app-text) !important;
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid #e5ecea !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  body .phone-shell.event-selected .event-storyline li > span {
    display: grid !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    place-items: center !important;
    color: var(--app-brand-strong) !important;
    background: var(--app-brand-soft) !important;
    border: 0 !important;
    border-radius: 11px !important;
  }

  body .phone-shell.event-selected .event-storyline li b {
    color: var(--app-text) !important;
    font-size: .94rem !important;
  }

  body .phone-shell.event-selected .event-storyline li small {
    color: var(--app-text-muted) !important;
    font-size: .8rem !important;
    line-height: 1.35 !important;
  }

  body .phone-shell.event-selected .event-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body .phone-shell.event-selected .event-action-group {
    display: grid !important;
    grid-column: 1 / -1 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 8px !important;
    background: transparent !important;
    border: 0 !important;
  }

  body .phone-shell.event-selected .event-actions button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    color: var(--app-text) !important;
    background: var(--app-panel-muted) !important;
    border: 0 !important;
    border-radius: var(--app-control-radius) !important;
    box-shadow: none !important;
    font-size: .88rem !important;
    font-weight: 750 !important;
  }

  body .phone-shell.event-selected .event-actions button:is([data-join-event], [data-event-place-route-action], [data-open-event-chat]) {
    color: #fff !important;
    background: var(--app-brand) !important;
  }

  body .phone-shell.event-selected .event-actions button[data-leave-event] {
    grid-column: 1 / -1 !important;
    color: var(--app-danger) !important;
    background: #f9e9eb !important;
  }

  body .phone-shell.event-selected .event-action-group-manage button {
    color: var(--app-text-muted) !important;
    background: transparent !important;
    border: 1px solid var(--app-border) !important;
  }

  body .phone-shell.event-selected .event-detail-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body .phone-shell.event-selected .event-detail-grid > span {
    min-width: 0 !important;
    min-height: 72px !important;
    margin: 0 !important;
    padding: 11px 12px !important;
    color: var(--app-text) !important;
    background: var(--app-canvas) !important;
    border: 0 !important;
    border-radius: var(--app-control-radius) !important;
    box-shadow: none !important;
  }

  body .phone-shell.event-selected .event-detail-grid > span.wide {
    grid-column: 1 / -1 !important;
  }

  body .phone-shell.event-selected .event-detail-grid :is(b, em) {
    color: var(--app-text) !important;
    overflow-wrap: anywhere;
  }

  /* Full-screen overlays share the same shell instead of unrelated sheets. */
  body .phone-shell :is(
    .market-detail-sheet,
    .market-create-sheet,
    .nav-create-menu,
    .friend-profile-sheet,
    .group-detail-sheet,
    .create-group-sheet,
    .invite-friends-sheet,
    .post-composer-sheet,
    .profile-list-drawer
  )[aria-hidden="false"] {
    position: fixed !important;
    inset: 0 !important;
    z-index: 80 !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 100% !important;
    height: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    color: var(--app-text) !important;
    background: var(--app-canvas) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .market-create-sheet[aria-hidden="false"] > .sheet-handle {
    display: none !important;
  }

  body .phone-shell.event-selected .live-map-sheet.detail-open {
    scrollbar-width: none !important;
  }

  body .phone-shell.event-selected .live-map-sheet.detail-open::-webkit-scrollbar,
  body .phone-shell :is(
    .market-detail-sheet,
    .market-create-sheet,
    .nav-create-menu,
    .friend-profile-sheet,
    .group-detail-sheet,
    .create-group-sheet,
    .invite-friends-sheet,
    .post-composer-sheet,
    .profile-list-drawer
  )[aria-hidden="false"]::-webkit-scrollbar {
    display: none !important;
  }

  .market-detail-close,
  .market-create-head > button,
  .nav-create-menu-head > button {
    display: grid !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    place-items: center !important;
    color: var(--app-text) !important;
    background: var(--app-panel-muted) !important;
    border: 0 !important;
    border-radius: var(--app-control-radius) !important;
    box-shadow: none !important;
  }

  .market-detail-content,
  .market-create-form {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 16px !important;
    color: var(--app-text) !important;
    background: var(--app-canvas) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .market-create-form {
    padding-bottom: 32px !important;
  }

  .market-create-form label > span {
    color: var(--app-text-muted) !important;
    font-size: .8rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
  }

  .market-create-head,
  .nav-create-menu-head {
    position: sticky !important;
    top: 0 !important;
    z-index: 5 !important;
    min-height: var(--app-header-height) !important;
    margin: -16px -16px 16px !important;
    padding: 10px 14px !important;
    color: var(--app-text) !important;
    background: var(--app-panel) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--app-border) !important;
  }

  .nav-create-menu {
    display: block !important;
    padding: 0 16px 24px !important;
  }

  .nav-create-menu-head {
    display: flex !important;
    width: auto !important;
    min-height: var(--app-header-height) !important;
    height: var(--app-header-height) !important;
    max-height: var(--app-header-height) !important;
    margin: 0 -16px 16px !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  .nav-create-menu-head > div {
    display: flex !important;
    min-width: 0 !important;
    flex-direction: column !important;
    gap: 1px !important;
  }

  .nav-create-menu-head small {
    color: var(--app-text-muted) !important;
    font-size: .72rem !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  .nav-create-menu-head strong {
    color: var(--app-text) !important;
    font-size: 1.03rem !important;
    line-height: 1.2 !important;
  }

  .nav-create-menu > button {
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    width: 100% !important;
    min-height: 68px !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 0 8px !important;
    padding: 12px !important;
    align-items: center !important;
    column-gap: 12px !important;
    row-gap: 2px !important;
    color: var(--app-text) !important;
    text-align: left !important;
    background: var(--app-panel) !important;
    border: 1px solid var(--app-border) !important;
    border-radius: var(--app-radius) !important;
    box-shadow: none !important;
  }

  .nav-create-menu > button span {
    grid-row: 1 / 3 !important;
    display: grid !important;
    width: 42px !important;
    height: 42px !important;
    place-items: center !important;
    color: var(--app-brand-strong) !important;
    background: var(--app-brand-soft) !important;
    border-radius: 11px !important;
  }

  .nav-create-menu > button b {
    color: var(--app-text) !important;
    font-size: .92rem !important;
    font-weight: 750 !important;
    line-height: 1.2 !important;
  }

  .nav-create-menu > button small {
    color: var(--app-text-muted) !important;
    font-size: .76rem !important;
    line-height: 1.25 !important;
  }
}

@media (max-width: 360px) {
  body .phone-shell .people-screen.active .people-hub .people-hero,
  body .phone-shell .market-screen.active .market-hub .market-hero {
    min-height: 100px !important;
  }

  .chat-hub-actions button {
    padding: 6px !important;
    gap: 6px !important;
  }

  .chat-hub-actions button span {
    width: 32px !important;
    height: 32px !important;
  }

  .market-card-main {
    grid-template-columns: 88px minmax(0, 1fr) !important;
  }

  .market-photo {
    width: 88px !important;
  }
}

@media (max-width: 900px) {
  body .phone-shell.create-actions-open .nav-create-menu[aria-hidden="false"] {
    display: block !important;
    padding: 0 16px 24px !important;
    transform: none !important;
  }

  body .phone-shell.create-actions-open .nav-create-menu[aria-hidden="false"] .nav-create-menu-head {
    display: flex !important;
    width: auto !important;
    min-height: var(--app-header-height) !important;
    height: var(--app-header-height) !important;
    max-height: var(--app-header-height) !important;
    grid-template-columns: none !important;
  }

  body .phone-shell.create-actions-open .nav-create-menu[aria-hidden="false"] > button {
    display: grid !important;
    min-height: 68px !important;
    height: auto !important;
    max-height: none !important;
  }

  body .phone-shell:has(.screen.active) .screen.active > :is(
    .simple-header,
    .chat-header,
    .event-room-header,
    .event-recap-header,
    .direct-message-header
  ) {
    right: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
  }

  body .phone-shell .profile-screen.active .profile-card {
    padding: 0 0 calc(var(--app-nav-height) + 20px) !important;
  }

  body .phone-shell .saved-screen.active .saved-hub {
    padding: 16px 16px calc(var(--app-nav-height) + 22px) !important;
  }

  body .phone-shell .saved-screen.active :is(.saved-hero, .saved-section) {
    width: 100% !important;
    margin: 0 0 12px !important;
    color: var(--app-text) !important;
    background: var(--app-panel) !important;
    border: 1px solid var(--app-border) !important;
    border-radius: var(--app-radius) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  body .phone-shell .saved-screen.active .saved-hero {
    min-height: 96px !important;
    padding: 16px !important;
  }

  body .phone-shell .saved-screen.active :is(
    .saved-section-head button,
    .saved-empty button,
    .activation-empty-actions button
  ) {
    min-height: 44px !important;
    height: auto !important;
    padding: 8px 14px !important;
    border-radius: var(--app-control-radius) !important;
    box-shadow: none !important;
  }

  body .phone-shell .search-screen.active .search-panel {
    display: flex !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 16px 16px calc(var(--app-nav-height) + 22px) !important;
    flex-direction: column !important;
    gap: 12px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    color: var(--app-text) !important;
    background: var(--app-canvas) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  body .phone-shell .search-screen.active .global-search-field {
    display: flex !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    align-items: center !important;
    gap: 10px !important;
    color: var(--app-text-muted) !important;
    background: var(--app-panel) !important;
    border: 1px solid var(--app-border) !important;
    border-radius: var(--app-control-radius) !important;
    box-shadow: none !important;
  }

  body .phone-shell .search-screen.active .global-search-field svg {
    flex: 0 0 20px !important;
    width: 20px !important;
    height: 20px !important;
    stroke: currentColor !important;
  }

  body .phone-shell .search-screen.active .global-search-field input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    min-height: 46px !important;
    height: 46px !important;
    padding: 0 !important;
    color: var(--app-text) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: .95rem !important;
  }

  body .phone-shell .search-screen.active .search-filter-row {
    display: flex !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }

  body .phone-shell .search-screen.active .search-filter-row select {
    flex: 0 0 auto !important;
    min-width: 138px !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 30px 0 12px !important;
    color: var(--app-text) !important;
    background-color: var(--app-panel) !important;
    border: 1px solid var(--app-border) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    font-size: .8rem !important;
    font-weight: 700 !important;
  }

  body .phone-shell .search-screen.active .search-results {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body .phone-shell .search-screen.active .search-result-group {
    width: 100% !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    color: var(--app-text) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  body .phone-shell .search-screen.active .search-result-group h2 {
    margin: 4px 2px 8px !important;
    color: var(--app-text-muted) !important;
    font-size: .8rem !important;
    font-weight: 750 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  body .phone-shell .search-screen.active :is(
    .search-result-group > button,
    .person-result-main,
    .person-result-actions button,
    .activation-empty-actions button
  ) {
    min-height: 44px !important;
    height: auto !important;
    border-radius: var(--app-control-radius) !important;
    box-shadow: none !important;
  }

  body .phone-shell .search-screen.active .search-result-group > button {
    display: grid !important;
    width: 100% !important;
    margin: 0 0 8px !important;
    padding: 12px 14px !important;
    color: var(--app-text) !important;
    text-align: left !important;
    background: var(--app-panel) !important;
    border: 1px solid var(--app-border) !important;
    border-radius: var(--app-radius) !important;
    box-shadow: none !important;
  }

  body .phone-shell .search-screen.active .person-result-row {
    width: 100% !important;
    margin: 0 0 10px !important;
    padding: 10px !important;
    color: var(--app-text) !important;
    background: var(--app-panel) !important;
    border: 1px solid var(--app-border) !important;
    border-radius: var(--app-radius) !important;
    box-shadow: none !important;
  }

  body .phone-shell .search-screen.active .person-result-actions button {
    color: var(--app-text) !important;
    background: var(--app-panel-muted) !important;
    border: 0 !important;
  }
}

/*
 * v216: compact glass mobile shell.
 *
 * Glass is reserved for navigation and contextual sheets where the map gives
 * useful place context. Content stays readable through an opaque-enough base,
 * one border tone and a restrained shadow.
 */
:root {
  --mecly-glass: rgba(248, 252, 251, .76);
  --mecly-glass-strong: rgba(249, 253, 252, .88);
  --mecly-glass-soft: rgba(238, 247, 245, .70);
  --mecly-glass-line: rgba(255, 255, 255, .74);
  --mecly-glass-shadow: 0 8px 14px rgba(9, 28, 36, .13);
  --mecly-glass-blur: blur(18px) saturate(1.08);
}

@media (max-width: 900px) {
  /* Map controls: one compact rail, one category rail, no duplicate profile control. */
  body .phone-shell .live-topbar {
    top: max(8px, env(safe-area-inset-top)) !important;
    right: 10px !important;
    left: 10px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 44px 56px 44px !important;
    min-height: 44px !important;
    height: 44px !important;
    gap: 6px !important;
    background: transparent !important;
  }

  body .phone-shell .live-topbar :is(.search-pill, .round-ghost) {
    height: 44px !important;
    min-height: 44px !important;
    color: var(--app-text) !important;
    background: var(--mecly-glass-strong) !important;
    border: 1px solid var(--mecly-glass-line) !important;
    border-radius: 14px !important;
    box-shadow: var(--mecly-glass-shadow) !important;
    -webkit-backdrop-filter: var(--mecly-glass-blur) !important;
    backdrop-filter: var(--mecly-glass-blur) !important;
  }

  body .phone-shell .live-topbar .search-pill {
    padding: 0 12px !important;
  }

  body .phone-shell .live-topbar .distance-button {
    width: 56px !important;
    min-width: 56px !important;
    font-size: .72rem !important;
    font-weight: 780 !important;
  }

  body .phone-shell .live-topbar .topbar-notification-trigger {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    width: 44px !important;
    min-width: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    place-items: center !important;
  }

  body .phone-shell .live-topbar .topbar-notification-trigger svg {
    width: 20px !important;
    height: 20px !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
  }

  body .phone-shell .live-topbar .topbar-notification-trigger b {
    position: absolute !important;
    top: 3px !important;
    right: 3px !important;
    min-width: 17px !important;
    height: 17px !important;
    padding: 0 4px !important;
    color: #fff !important;
    background: var(--app-danger) !important;
    border: 2px solid rgba(255, 255, 255, .9) !important;
    border-radius: 999px !important;
    font-size: .56rem !important;
    line-height: 13px !important;
  }

  body .phone-shell .map-profile-screen.active > .user-mini-profile-trigger {
    display: none !important;
  }

  body .phone-shell .event-discovery-bar {
    top: calc(58px + env(safe-area-inset-top)) !important;
    right: 10px !important;
    left: 10px !important;
    width: auto !important;
    height: 44px !important;
    padding: 3px !important;
    background: var(--mecly-glass) !important;
    border: 1px solid var(--mecly-glass-line) !important;
    border-radius: 14px !important;
    box-shadow: 0 5px 10px rgba(9, 28, 36, .09) !important;
    -webkit-backdrop-filter: var(--mecly-glass-blur) !important;
    backdrop-filter: var(--mecly-glass-blur) !important;
  }

  body .phone-shell .event-discovery-scroll,
  body .phone-shell .event-discovery-scroll button {
    min-height: 36px !important;
    height: 36px !important;
  }

  body .phone-shell .event-discovery-scroll button {
    padding: 0 9px !important;
    color: var(--app-text) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 10px !important;
    font-size: .68rem !important;
  }

  body .phone-shell .event-discovery-scroll button:is(.active, .selected, [aria-pressed="true"]) {
    color: #fff !important;
    background: rgba(8, 46, 52, .92) !important;
  }

  body .phone-shell .viewport-discovery-control {
    top: calc(108px + env(safe-area-inset-top)) !important;
  }

  /* Five balanced destinations with Create in the physical center. */
  body .phone-shell .bottom-nav {
    right: 10px !important;
    bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
    left: 10px !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    width: auto !important;
    min-height: 70px !important;
    height: 70px !important;
    padding: 6px !important;
    gap: 2px !important;
    background: var(--mecly-glass-strong) !important;
    border: 1px solid var(--mecly-glass-line) !important;
    border-radius: 18px !important;
    box-shadow: var(--mecly-glass-shadow) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.1) !important;
    backdrop-filter: blur(20px) saturate(1.1) !important;
  }

  body .phone-shell .bottom-nav button {
    display: grid !important;
    grid-template-rows: 27px 16px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 56px !important;
    height: 56px !important;
    padding: 4px 2px 2px !important;
    place-items: center !important;
    color: #263d43 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 12px !important;
  }

  body .phone-shell .bottom-nav button.current {
    color: var(--app-brand-strong) !important;
    background: rgba(207, 237, 234, .72) !important;
  }

  body .phone-shell .bottom-nav button svg {
    width: 22px !important;
    height: 22px !important;
    stroke-width: 1.8 !important;
  }

  body .phone-shell .bottom-nav button > span:last-child {
    font-size: .66rem !important;
    font-weight: 730 !important;
  }

  body .phone-shell .bottom-nav .create-button {
    display: grid !important;
    grid-template-rows: 1fr !important;
    background: transparent !important;
  }

  body .phone-shell .bottom-nav .create-button .plus {
    display: grid !important;
    width: 46px !important;
    height: 46px !important;
    margin: 0 !important;
    place-items: center !important;
    color: #fff !important;
    background: var(--app-brand) !important;
    border: 0 !important;
    border-radius: 14px !important;
    box-shadow: 0 5px 10px rgba(5, 80, 84, .22) !important;
  }

  body .phone-shell .bottom-nav .create-button > span:last-child {
    display: none !important;
  }

  /* Market stays a separate product surface, entered from the People hub. */
  .people-destination-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 10px !important;
  }

  body .phone-shell .people-destination-entry {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 64px !important;
    margin: 0 !important;
    padding: 10px !important;
    align-items: center !important;
    gap: 1px 9px !important;
    color: var(--app-text) !important;
    text-align: left !important;
    background: var(--mecly-glass-strong) !important;
    border: 1px solid var(--mecly-glass-line) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 8px rgba(9, 28, 36, .08) !important;
    -webkit-backdrop-filter: var(--mecly-glass-blur) !important;
    backdrop-filter: var(--mecly-glass-blur) !important;
  }

  body .phone-shell .people-destination-entry > span:first-child {
    grid-row: 1 / span 2 !important;
    display: grid !important;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    place-items: center !important;
    color: #9d174d !important;
    background: rgba(244, 198, 219, .58) !important;
    border-radius: 11px !important;
    font-size: 1.05rem !important;
    font-weight: 850 !important;
  }

  body .phone-shell .people-market-entry > span:first-child {
    color: var(--app-brand-strong) !important;
    background: rgba(190, 231, 227, .72) !important;
    font-size: .88rem !important;
  }

  body .phone-shell .people-destination-entry :is(b, small) {
    grid-column: 2 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body .phone-shell .people-destination-entry b {
    align-self: end !important;
    color: var(--app-text) !important;
    font-size: .82rem !important;
    line-height: 1.15 !important;
  }

  body .phone-shell .people-destination-entry small {
    align-self: start !important;
    color: var(--app-text-muted) !important;
    font-size: .67rem !important;
  }

  /* Profile and Saved: restore place context and symmetric glass spacing. */
  body .phone-shell .profile-screen.active {
    background: transparent !important;
  }

  body .phone-shell .profile-screen.active > .profile-bg {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    opacity: .48 !important;
    filter: saturate(.82) brightness(1.08) !important;
    pointer-events: none !important;
  }

  body .phone-shell .profile-screen.active > .simple-header {
    flex-basis: 60px !important;
    width: calc(100% - 20px) !important;
    min-height: 60px !important;
    height: 60px !important;
    margin: 8px 10px 0 !important;
    padding: 8px 10px !important;
    background: var(--mecly-glass-strong) !important;
    border: 1px solid var(--mecly-glass-line) !important;
    border-radius: 16px !important;
    box-shadow: var(--mecly-glass-shadow) !important;
    -webkit-backdrop-filter: var(--mecly-glass-blur) !important;
    backdrop-filter: var(--mecly-glass-blur) !important;
  }

  body .phone-shell .profile-screen.active .profile-card {
    width: calc(100% - 20px) !important;
    margin: 8px 10px 0 !important;
    padding-bottom: calc(var(--app-nav-height) + 30px) !important;
    background: rgba(248, 252, 251, .66) !important;
    border: 1px solid var(--mecly-glass-line) !important;
    border-radius: 18px 18px 0 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.05) !important;
    backdrop-filter: blur(20px) saturate(1.05) !important;
  }

  body .phone-shell .profile-tabs {
    width: calc(100% - 28px) !important;
    margin: 12px 14px 8px !important;
    padding: 2px 0 6px !important;
    gap: 8px !important;
    scroll-padding-inline: 0 !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  body .phone-shell .profile-tabs button {
    min-width: 82px !important;
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 13px !important;
    background: rgba(249, 253, 252, .70) !important;
    border: 1px solid rgba(255, 255, 255, .76) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
  }

  body .phone-shell .profile-tabs button:is(.selected, [aria-selected="true"]) {
    color: #fff !important;
    background: rgba(8, 46, 52, .94) !important;
    border-color: transparent !important;
  }

  body .phone-shell .profile-tab-frame {
    width: calc(100% - 28px) !important;
    margin: 0 14px !important;
  }

  body .phone-shell .saved-panel:not([hidden]) {
    display: grid !important;
    width: 100% !important;
    gap: 16px !important;
  }

  body .phone-shell .saved-panel > section {
    display: grid !important;
    gap: 7px !important;
  }

  body .phone-shell .saved-panel h3 {
    margin: 0 2px 3px !important;
    color: var(--app-text) !important;
    font-size: .9rem !important;
    font-weight: 780 !important;
  }

  body .phone-shell .saved-panel article {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "title action" "meta action" !important;
    width: 100% !important;
    min-height: 68px !important;
    margin: 0 !important;
    padding: 10px 10px 10px 13px !important;
    align-items: center !important;
    gap: 2px 10px !important;
    color: var(--app-text) !important;
    background: var(--mecly-glass-strong) !important;
    border: 1px solid var(--mecly-glass-line) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 8px rgba(9, 28, 36, .07) !important;
    -webkit-backdrop-filter: var(--mecly-glass-blur) !important;
    backdrop-filter: var(--mecly-glass-blur) !important;
  }

  body .phone-shell .saved-panel article > b {
    grid-area: title !important;
    min-width: 0 !important;
    overflow: hidden !important;
    color: var(--app-text) !important;
    font-size: .9rem !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body .phone-shell .saved-panel article > span {
    grid-area: meta !important;
    min-width: 0 !important;
    overflow: hidden !important;
    color: var(--app-text-muted) !important;
    font-size: .72rem !important;
    line-height: 1.25 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body .phone-shell .saved-panel article > button {
    grid-area: action !important;
    width: auto !important;
    min-width: 72px !important;
    min-height: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    color: var(--app-danger) !important;
    background: rgba(255, 255, 255, .48) !important;
    border: 0 !important;
    border-radius: 11px !important;
    box-shadow: none !important;
    font-size: .72rem !important;
    font-weight: 760 !important;
  }

  body .phone-shell .saved-panel [data-saved-empty] {
    grid-template-areas: "title" "meta" !important;
    grid-template-columns: 1fr !important;
    min-height: 88px !important;
    text-align: center !important;
  }

  /* Share moment is a true bottom sheet, not an edge-to-edge page. */
  body .phone-shell .post-composer-sheet[aria-hidden="false"] {
    position: fixed !important;
    inset: auto 10px max(10px, env(safe-area-inset-bottom, 0px)) 10px !important;
    display: grid !important;
    width: auto !important;
    max-width: 560px !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: min(78dvh, 680px) !important;
    margin: 0 auto !important;
    padding: 6px 14px 14px !important;
    gap: 10px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    color: var(--app-text) !important;
    background: var(--mecly-glass-strong) !important;
    border: 1px solid var(--mecly-glass-line) !important;
    border-radius: 18px !important;
    box-shadow: var(--mecly-glass-shadow) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.08) !important;
    backdrop-filter: blur(22px) saturate(1.08) !important;
  }

  body .phone-shell .post-composer-sheet > .sheet-handle.small {
    flex: 0 0 44px !important;
    width: 88px !important;
    min-width: 88px !important;
    height: 44px !important;
    margin: -2px auto -8px !important;
  }

  body .phone-shell .post-composer-head {
    display: grid !important;
    width: 100% !important;
    gap: 1px !important;
  }

  body .phone-shell .post-composer-head small {
    color: var(--app-brand-strong) !important;
    font-size: .7rem !important;
    font-weight: 760 !important;
  }

  body .phone-shell .post-composer-head strong {
    color: var(--app-text) !important;
    font-size: 1.08rem !important;
    line-height: 1.2 !important;
  }

  body .phone-shell .post-composer-sheet > label {
    display: grid !important;
    gap: 6px !important;
  }

  body .phone-shell .post-composer-sheet > label > span {
    color: var(--app-text) !important;
    font-size: .8rem !important;
    font-weight: 760 !important;
  }

  body .phone-shell .post-composer-sheet textarea {
    width: 100% !important;
    min-height: 112px !important;
    max-height: 28dvh !important;
    padding: 12px !important;
    color: var(--app-text) !important;
    background: rgba(255, 255, 255, .66) !important;
    border: 1px solid rgba(8, 125, 130, .34) !important;
    border-radius: 13px !important;
    box-shadow: none !important;
    font-size: .86rem !important;
    line-height: 1.4 !important;
    resize: vertical !important;
  }

  body .phone-shell .post-composer-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 7px !important;
  }

  body .phone-shell .post-composer-grid button {
    min-width: 0 !important;
    min-height: 46px !important;
    height: auto !important;
    padding: 7px 6px !important;
    color: var(--app-text) !important;
    background: rgba(255, 255, 255, .56) !important;
    border: 0 !important;
    border-radius: 11px !important;
    box-shadow: none !important;
    font-size: .7rem !important;
    font-weight: 720 !important;
    line-height: 1.15 !important;
  }

  body .phone-shell .post-composer-meta {
    display: -webkit-box !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: var(--app-text-muted) !important;
    font-size: .7rem !important;
    line-height: 1.3 !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body .phone-shell .post-composer-sheet > .primary-action {
    width: 100% !important;
    min-height: 46px !important;
    margin: 0 !important;
    color: #fff !important;
    background: var(--app-brand) !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
  }

  /* Meetup detail: compact hierarchy, one action row and progressive options. */
  body .phone-shell.event-selected .map-profile-screen.active .live-map-sheet.detail-open {
    position: absolute !important;
    inset: max(8px, env(safe-area-inset-top)) 8px 8px !important;
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: rgba(238, 247, 245, .74) !important;
    border: 1px solid var(--mecly-glass-line) !important;
    border-radius: 18px !important;
    box-shadow: var(--mecly-glass-shadow) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.08) !important;
    backdrop-filter: blur(22px) saturate(1.08) !important;
  }

  body .phone-shell.event-selected .live-map-sheet.detail-open .event-detail:not([hidden]) {
    display: flex !important;
    width: 100% !important;
    min-height: 100% !important;
    padding: 10px 10px 24px !important;
    gap: 10px !important;
    background: transparent !important;
  }

  body .phone-shell.event-selected .live-map-sheet.detail-open .event-detail-close {
    position: fixed !important;
    top: max(18px, calc(env(safe-area-inset-top) + 10px)) !important;
    right: 18px !important;
    z-index: 95 !important;
    color: var(--app-text) !important;
    background: rgba(249, 253, 252, .88) !important;
    border: 1px solid var(--mecly-glass-line) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 8px rgba(9, 28, 36, .13) !important;
    -webkit-backdrop-filter: var(--mecly-glass-blur) !important;
    backdrop-filter: var(--mecly-glass-blur) !important;
  }

  body .phone-shell.event-selected .event-detail .event-cover {
    width: 100% !important;
    height: 210px !important;
    min-height: 210px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 14px !important;
    box-shadow: none !important;
  }

  body .phone-shell.event-selected .event-detail .event-headline,
  body .phone-shell.event-selected .event-detail :is(
    .event-face-summary,
    .event-actions,
    .event-storyline,
    .event-host-strip,
    .event-moments,
    .event-detail-grid,
    .event-route-preview,
    .event-modules
  ) {
    width: 100% !important;
    margin: 0 !important;
    padding: 12px !important;
    color: var(--app-text) !important;
    background: var(--mecly-glass-strong) !important;
    border: 1px solid var(--mecly-glass-line) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: var(--mecly-glass-blur) !important;
    backdrop-filter: var(--mecly-glass-blur) !important;
  }

  body .phone-shell.event-selected .event-detail .event-headline {
    padding: 14px !important;
  }

  body .phone-shell.event-selected .event-detail .event-headline h2 {
    margin: 6px 0 3px !important;
    font-size: 1.32rem !important;
    font-weight: 790 !important;
    letter-spacing: -.02em !important;
    line-height: 1.16 !important;
  }

  body .phone-shell.event-selected .event-detail .event-headline [data-event-description] {
    display: -webkit-box !important;
    margin-top: 5px !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body .phone-shell.event-selected .event-face-summary {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  body .phone-shell.event-selected .event-face-summary > span {
    display: grid !important;
    grid-template-columns: 1fr !important;
    min-width: 0 !important;
    min-height: 68px !important;
    padding: 10px 11px !important;
    align-content: center !important;
    gap: 2px !important;
    background: var(--mecly-glass-strong) !important;
    border: 1px solid var(--mecly-glass-line) !important;
    border-radius: 13px !important;
    box-shadow: none !important;
  }

  body .phone-shell.event-selected .event-face-summary > span:last-child {
    grid-column: 1 / -1 !important;
  }

  body .phone-shell.event-selected .event-face-summary > span :is(small, b, em) {
    grid-column: auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body .phone-shell.event-selected .event-face-summary > span b {
    font-size: .83rem !important;
  }

  body .phone-shell.event-selected .event-face-summary > span em {
    font-size: .66rem !important;
  }

  body .phone-shell.event-selected .event-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  body .phone-shell.event-selected .event-action-group {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 7px !important;
  }

  body .phone-shell.event-selected .event-action-label {
    grid-column: 1 / -1 !important;
    color: var(--app-text-muted) !important;
    font-size: .69rem !important;
    font-weight: 760 !important;
    line-height: 1.2 !important;
  }

  body .phone-shell.event-selected .event-actions button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    color: var(--app-text) !important;
    background: rgba(232, 241, 239, .84) !important;
    border: 0 !important;
    border-radius: 11px !important;
    box-shadow: none !important;
    font-size: .8rem !important;
    font-weight: 760 !important;
  }

  body .phone-shell.event-selected .event-actions button:is([data-join-event], [data-event-place-route-action], [data-open-event-chat]) {
    color: #fff !important;
    background: var(--app-brand) !important;
  }

  body .phone-shell.event-selected .event-actions button[data-leave-event] {
    color: var(--app-danger) !important;
    background: rgba(249, 229, 232, .88) !important;
  }

  body .phone-shell.event-selected .event-action-more {
    width: 100% !important;
  }

  body .phone-shell.event-selected .event-action-more > summary {
    display: grid !important;
    min-height: 44px !important;
    padding: 0 12px !important;
    place-items: center !important;
    color: var(--app-text-muted) !important;
    background: rgba(255, 255, 255, .48) !important;
    border: 0 !important;
    border-radius: 11px !important;
    cursor: pointer !important;
    font-size: .78rem !important;
    font-weight: 760 !important;
    list-style: none !important;
  }

  body .phone-shell.event-selected .event-action-more > summary::-webkit-details-marker {
    display: none !important;
  }

  body .phone-shell.event-selected .event-action-more > summary::after {
    margin-left: 7px !important;
    content: "+" !important;
  }

  body .phone-shell.event-selected .event-action-more[open] > summary::after {
    content: "−" !important;
  }

  body .phone-shell.event-selected .event-action-more-body {
    display: grid !important;
    width: 100% !important;
    padding-top: 10px !important;
    gap: 12px !important;
  }

  body .phone-shell.event-selected .event-storyline ul {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    margin: 9px 0 0 !important;
    padding: 0 !important;
    gap: 7px !important;
  }

  body .phone-shell.event-selected .event-storyline li {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    min-width: 0 !important;
    min-height: 86px !important;
    margin: 0 !important;
    padding: 9px !important;
    align-items: start !important;
    gap: 8px !important;
    background: rgba(242, 248, 247, .72) !important;
    border: 0 !important;
    border-radius: 11px !important;
    box-shadow: none !important;
  }

  body .phone-shell.event-selected .event-storyline li > span {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    color: var(--app-brand-strong) !important;
    background: var(--app-brand-soft) !important;
    border-radius: 10px !important;
  }

  body .phone-shell.event-selected .event-storyline li b {
    font-size: .78rem !important;
    line-height: 1.2 !important;
  }

  body .phone-shell.event-selected .event-storyline li small {
    display: -webkit-box !important;
    margin-top: 2px !important;
    overflow: hidden !important;
    font-size: .67rem !important;
    line-height: 1.28 !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body .phone-shell.event-selected .event-host-strip {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  body .phone-shell.event-selected .event-host-strip > span {
    width: 42px !important;
    height: 42px !important;
    color: #fff !important;
    background: var(--app-brand) !important;
    border-radius: 11px !important;
  }

  body .phone-shell.event-selected .event-host-strip em {
    color: var(--app-text-muted) !important;
  }

  body .phone-shell.event-selected .event-moments-head button {
    min-height: 44px !important;
    height: 44px !important;
    color: #fff !important;
    background: var(--app-brand) !important;
    border: 0 !important;
    border-radius: 11px !important;
  }

  body .phone-shell.event-selected .event-moments-head button:disabled {
    color: var(--app-text-muted) !important;
    background: rgba(232, 241, 239, .84) !important;
  }

  body .phone-shell.event-selected .event-quick-facts {
    display: none !important;
  }

  body .phone-shell.event-selected .event-detail-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  body .phone-shell.event-selected .event-detail-grid > span {
    min-width: 0 !important;
    min-height: 64px !important;
    padding: 9px 10px !important;
    background: rgba(242, 248, 247, .72) !important;
    border: 0 !important;
    border-radius: 11px !important;
  }

  /* Category rings make map photos distinguishable without changing marker shape. */
  .leaflet-marker-icon.mecly-map-pin.pin-coffee {
    --map-pin-tone: #9a5a24;
  }

  .leaflet-marker-icon.mecly-map-pin.pin-gallery {
    --map-pin-tone: #6f4fa0;
  }

  .leaflet-marker-icon.mecly-map-pin.pin-ride {
    --map-pin-tone: #176f79;
  }

  .leaflet-marker-icon.mecly-map-pin[class*="pin-"] {
    border-color: color-mix(in srgb, var(--map-pin-tone, var(--app-brand)) 54%, #fff) !important;
  }

  .leaflet-marker-icon.mecly-map-pin[class*="pin-"] .map-pin-symbol {
    background: var(--map-pin-tone, var(--app-brand)) !important;
  }

  .phone-shell.theme-contrast :is(
    .live-topbar .search-pill,
    .live-topbar .round-ghost,
    .event-discovery-bar,
    .bottom-nav,
    .people-destination-entry,
    .profile-screen.active > .simple-header,
    .profile-screen.active .profile-card,
    .saved-panel article,
    .post-composer-sheet[aria-hidden="false"],
    .live-map-sheet.detail-open,
    .event-detail .event-headline,
    .event-detail .event-actions,
    .event-detail .event-storyline,
    .event-detail .event-host-strip,
    .event-detail .event-moments,
    .event-detail .event-detail-grid
  ) {
    background: #fff !important;
    border-color: var(--app-border) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

@media (max-width: 360px) {
  body .phone-shell .live-topbar {
    right: 8px !important;
    left: 8px !important;
    grid-template-columns: minmax(0, 1fr) 44px 52px 44px !important;
    gap: 4px !important;
  }

  body .phone-shell .live-topbar .distance-button {
    width: 52px !important;
    min-width: 52px !important;
  }

  body .phone-shell .people-destination-entry {
    grid-template-columns: 36px minmax(0, 1fr) !important;
    padding: 8px !important;
    gap: 1px 7px !important;
  }

  body .phone-shell .people-destination-entry > span:first-child {
    width: 36px !important;
    height: 36px !important;
  }

  body .phone-shell.event-selected .event-storyline ul {
    grid-template-columns: 1fr !important;
  }
}

/* v216 QA corrections: specificity-safe composer and fully symmetric tab/action rows. */
@media (max-width: 900px) {
  body .phone-shell .people-destination-entry > span:first-child::before {
    content: none !important;
  }

  body .phone-shell .profile-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    overflow: visible !important;
  }

  body .phone-shell .profile-tabs button {
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 7px !important;
    font-size: .7rem !important;
  }

  body .phone-shell.post-composer-open .post-composer-sheet[aria-hidden="false"] {
    position: fixed !important;
    inset: auto 10px max(10px, env(safe-area-inset-bottom, 0px)) 10px !important;
    width: auto !important;
    max-width: 560px !important;
    min-height: 0 !important;
    height: fit-content !important;
    max-height: calc(100dvh - 100px) !important;
    margin: 0 auto !important;
    padding: 6px 14px 14px !important;
    align-content: start !important;
    gap: 10px !important;
    border-radius: 18px !important;
  }

  body .phone-shell.post-composer-open .post-composer-sheet .sheet-handle.small {
    margin: -2px auto -8px !important;
    background: transparent !important;
  }

  body .phone-shell.post-composer-open .post-composer-grid,
  body .phone-shell.post-composer-open .post-composer-sheet.moment-mode .post-composer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body .phone-shell.post-composer-open .post-composer-grid button {
    min-height: 46px !important;
    border-radius: 11px !important;
    font-size: .7rem !important;
  }

  body .phone-shell.post-composer-open .post-composer-sheet .primary-action {
    min-height: 46px !important;
    border-radius: 12px !important;
    font-size: .84rem !important;
  }

  body .phone-shell.event-selected .event-detail .event-cover {
    height: 190px !important;
    min-height: 190px !important;
  }

  body .phone-shell.event-selected .event-face-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body .phone-shell.event-selected .event-face-summary > span:last-child {
    grid-column: auto !important;
  }

  body .phone-shell.event-selected .event-action-more > summary {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  body .phone-shell.event-selected .event-action-more > summary::after {
    margin-left: 10px !important;
  }
}

@media (max-width: 360px) {
  body .phone-shell .profile-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* v216 final mobile alignment: visible compact controls keep full touch targets. */
@media (max-width: 900px) {
  body .phone-shell .event-discovery-bar {
    padding: 0 3px !important;
  }

  body .phone-shell .event-discovery-scroll {
    width: 100% !important;
    min-height: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    scroll-padding-inline: 3px !important;
  }

  body .phone-shell .event-discovery-scroll button {
    min-height: 44px !important;
    height: 44px !important;
  }

  body .phone-shell .profile-tabs button {
    min-height: 44px !important;
    height: 44px !important;
  }
}