/* NeoCity app theme tokens */
:root {
  --bg: #0b0f14;
  --surface: #121821;
  --surface-2: #151d27;
  --surface-3: #1a2430;
  --text: rgba(242, 245, 248, 0.95);
  --muted: rgba(188, 198, 210, 0.7);
  --line: rgba(255, 255, 255, 0.09);
  --accent: #7ad4ff;
  --accent-2: #6fe6c8;
  --amber: #fbbf24;
  --danger: #f87171;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --page-max: 480px;
  --nav-height: 56px;
  --pad: 20px;
  --top-icon-visible-edge-inset: 15px;
  --top-icon-visible-size: 22px;
  --top-icon-hitbox-size: 44px;
  --top-icon-half-hitbox-size: 22px;
  --top-icon-gap: 4px;
  --top-icon-hitbox-gutter: 11px;
  --top-icon-hitbox-edge-inset: calc(var(--top-icon-visible-edge-inset) - var(--top-icon-hitbox-gutter));
  --top-profile-avatar-visible-half-size: 18px;
  --top-left-icon-column-center: calc(var(--top-icon-visible-edge-inset) + var(--top-profile-avatar-visible-half-size));
  --top-left-icon-hitbox-inset: calc(var(--top-left-icon-column-center) - var(--top-icon-half-hitbox-size));
  --top-content-icon-surface-offset: 3px;
  --top-content-left-icon-hitbox-inset: calc(var(--top-left-icon-hitbox-inset) - var(--top-content-icon-surface-offset));
  --top-content-right-icon-hitbox-inset: calc(var(--top-icon-hitbox-edge-inset) + var(--top-content-icon-surface-offset));
  --shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
  --shadow-soft: 0 10px 24px rgba(0, 0, 0, 0.22);
  --skeleton-fill:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025));
  --skeleton-highlight:
    linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 42%, transparent 64%);
  --skeleton-duration: 1.25s;
  --skeleton-easing: ease-in-out;
  --skeleton-surface-opacity: 1;
  --skeleton-highlight-opacity: 1;
  --skeleton-radius-tight: 7px;
  --skeleton-radius-small: 8px;
  --skeleton-radius-compact: 9px;
  --skeleton-radius-medium: 12px;
  --skeleton-radius-large: 18px;
  --skeleton-radius-pill: 999px;
  --premium-avatar-bg:
    radial-gradient(circle at 28% 18%, rgba(116, 145, 174, 0.24), transparent 34%),
    radial-gradient(circle at 76% 84%, rgba(54, 76, 98, 0.2), transparent 42%),
    linear-gradient(145deg, rgba(28, 33, 42, 0.96), rgba(12, 16, 23, 0.98) 58%, rgba(20, 24, 31, 0.98));
  --premium-avatar-noise:
    radial-gradient(circle at 20% 24%, rgba(255, 255, 255, 0.08), transparent 2px),
    radial-gradient(circle at 78% 18%, rgba(255, 255, 255, 0.045), transparent 1.5px),
    radial-gradient(circle at 62% 78%, rgba(255, 255, 255, 0.04), transparent 2px);
  --premium-avatar-border: rgba(255, 255, 255, 0.105);
  --premium-avatar-initial: rgba(234, 240, 248, 0.9);
  --premium-chip-bg: rgba(255, 255, 255, 0.035);
  --premium-chip-border: rgba(255, 255, 255, 0.085);
  --premium-blue-bg: rgba(82, 126, 158, 0.12);
  --premium-blue-border: rgba(145, 184, 212, 0.18);

  /* Legacy tokens for existing components */
  --panel: var(--surface);
  --panel-soft: var(--surface-2);
  --panel-muted: var(--surface-3);
  --ink: var(--text);
  --neon: var(--accent-2);
  --neon-2: var(--accent);
  --radius: var(--radius-md);
}

@media (max-width: 640px) {
  :root {
    --top-profile-avatar-visible-half-size: 17px;
  }
}

:root[data-app-theme="dark"] {
  color-scheme: dark;
}

:root[data-app-theme="light"] {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #fafafa;
  --surface-3: #efefef;
  --text: #0f1419;
  --muted: #737373;
  --line: #dbdbdb;
  --accent: #0095f6;
  --accent-2: #0095f6;
  --danger: #ed4956;
  --shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
  --shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.06);
  --skeleton-fill: linear-gradient(180deg, #f3f4f6, #e9ecef);
  --skeleton-highlight: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.72) 42%, transparent 64%);
  --premium-avatar-bg:
    radial-gradient(circle at 28% 18%, rgba(0, 149, 246, 0.13), transparent 34%),
    linear-gradient(145deg, #f8fafc, #eef2f7 58%, #ffffff);
  --premium-avatar-noise: none;
  --premium-avatar-border: rgba(15, 20, 25, 0.12);
  --premium-avatar-initial: #262626;
  --premium-chip-bg: rgba(15, 20, 25, 0.04);
  --premium-chip-border: rgba(15, 20, 25, 0.1);
  --premium-blue-bg: rgba(0, 149, 246, 0.08);
  --premium-blue-border: rgba(0, 149, 246, 0.18);
  --dock-bg: rgba(255, 255, 255, 0.96);
  --dock-border: rgba(15, 20, 25, 0.1);
  --dock-text: #737373;
  --dock-icon: #262626;
  --file-bg: #ffffff;
  --file-panel: #ffffff;
  --file-ink: #0f1419;
  --file-muted: #737373;
  --file-line: #dbdbdb;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "SF Pro Text", "SF Pro Display", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; color: var(--text); line-height: 1.25; }
h1 { font-size: 24px; }
h2 { font-size: 20px; }
h3 { font-size: 18px; }

p { margin: 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

img { display: block; max-width: 100%; }

label { display: block; margin-bottom: 6px; font-size: 13px; color: var(--muted); letter-spacing: 0.02em; }

input, textarea, select, button { font: inherit; }

input, textarea, select {
  width: 100%;
  padding: 12px;
  min-height: 44px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
}

input::placeholder, textarea::placeholder { color: rgba(226, 232, 240, 0.55); }

button, .btn {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(122, 212, 255, 0.35);
  background: rgba(122, 212, 255, 0.12);
  color: var(--text);
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 150ms ease, border-color 150ms ease, background 150ms ease;
}

button:hover, .btn:hover { transform: translateY(-1px); border-color: rgba(122, 212, 255, 0.5); box-shadow: 0 6px 16px rgba(122, 212, 255, 0.16); }
button:active, .btn:active { transform: translateY(0); }
.btn-secondary {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.05);
}
.btn-ghost {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
}

.error { color: var(--danger); font-weight: 700; font-size: 13px; margin: 4px 0 10px; }

.center-card {
  width: 100%;
  max-width: 480px;
  margin: 32px auto;
  padding: 20px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}

.subtitle { color: var(--muted); margin-bottom: 12px; }

/* Auth flow shell */
.auth-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 16px;
  background:
    radial-gradient(circle at 14% 12%, rgba(122, 212, 255, 0.14), transparent 38%),
    radial-gradient(circle at 88% 4%, rgba(111, 255, 233, 0.1), transparent 30%),
    linear-gradient(180deg, rgba(5, 8, 12, 0.98), rgba(8, 12, 18, 1));
}

.auth-card {
  width: 100%;
  max-width: 460px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(180deg, rgba(15, 22, 32, 0.96), rgba(10, 16, 24, 0.98));
  box-shadow: 0 18px 56px rgba(0, 0, 0, 0.5);
  padding: 26px 22px 22px;
}

.auth-title {
  margin: 0 0 8px;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.auth-subtitle {
  margin: 0 0 18px;
  color: rgba(226, 232, 240, 0.86);
  font-size: 14px;
  line-height: 1.45;
}

.auth-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(122, 212, 255, 0.3);
  color: rgba(122, 212, 255, 0.95);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.auth-form { display: grid; gap: 14px; }
.auth-field { display: grid; gap: 6px; }

.auth-input,
.auth-form input,
.auth-form textarea,
.auth-form select {
  width: 100%;
  min-height: 46px;
  padding: 12px 13px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(15, 23, 36, 0.92);
  color: #f4f8ff;
  caret-color: #8fe4ff;
  font-size: 15px;
  line-height: 1.4;
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

.auth-input::placeholder,
.auth-form input::placeholder,
.auth-form textarea::placeholder {
  color: rgba(208, 220, 236, 0.64);
}

.auth-input:focus,
.auth-form input:focus,
.auth-form textarea:focus,
.auth-form select:focus {
  outline: none;
  border-color: rgba(122, 212, 255, 0.88);
  box-shadow: 0 0 0 3px rgba(122, 212, 255, 0.2);
  background: rgba(18, 28, 42, 0.96);
}

.auth-input:-webkit-autofill,
.auth-form input:-webkit-autofill,
.auth-form textarea:-webkit-autofill,
.auth-form select:-webkit-autofill {
  -webkit-text-fill-color: #f4f8ff;
  caret-color: #8fe4ff;
  -webkit-box-shadow: 0 0 0 1000px rgba(18, 28, 42, 0.98) inset;
  box-shadow: 0 0 0 1000px rgba(18, 28, 42, 0.98) inset;
  transition: background-color 9999s ease-in-out 0s;
}

.auth-button {
  min-height: 46px;
  width: 100%;
  border-radius: 12px;
  font-weight: 700;
}

.auth-button-secondary {
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.08);
  color: #f4f8ff;
}

.auth-links {
  margin-top: 14px;
  display: grid;
  gap: 8px;
  font-size: 14px;
  color: rgba(226, 232, 240, 0.78);
}

.auth-hint {
  font-size: 12px;
  color: rgba(226, 232, 240, 0.72);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* —— Premium auth (hero + overlapping sheet), mobile-first —— */
.auth-screen--premium {
  display: block;
  min-height: 100dvh;
  padding: 0;
  padding-bottom: env(safe-area-inset-bottom, 0);
  align-items: stretch;
  justify-content: flex-start;
  background: #03060c;
  overflow-x: hidden;
}

.auth-premium-root {
  --auth-hero-overlap: 52px;
  display: flex;
  flex-direction: column;
  /* min-height, not height: the column grows with its content and the document
     scrolls.

     This was `height: 100dvh` so that .auth-card-scroll could be the scroller.
     An earlier attempt at page scrolling changed only this line and broke touch:
     .auth-card-scroll stayed a scroll container with `overscroll-behavior:
     contain` while having nothing left to scroll, so it swallowed the drag
     instead of passing it to the page, and the fields below the fold became
     unreachable on a phone.

     The missing half of that change is here now -- .auth-card-scroll is no
     longer a scroll container at all (no overflow, no overscroll-behavior), so
     there is nothing to swallow the gesture and the page scrolls normally.
     Both halves have to move together; changing either alone reintroduces one
     of the two bugs. 100vh is the fallback for browsers without dvh. */
  min-height: 100vh;
  min-height: 100dvh;
  max-width: 520px;
  margin: 0 auto;
}

@media (min-width: 720px) {
  .auth-premium-root {
    max-width: 440px;
    margin: 0 auto;
    padding: 24px 0 40px;
  }
}

/* Premium perceived-speed primitives */
.appFrame {
  -webkit-tap-highlight-color: transparent;
}

.appFrame a,
.appFrame button,
.appFrame [role="button"] {
  transition: transform 95ms ease, opacity 120ms ease, background-color 120ms ease, border-color 120ms ease;
  touch-action: manipulation;
}

.appFrame a:active,
.appFrame button:active,
.appFrame [role="button"]:active {
  transform: scale(0.98);
}

.appFrame.is-navigating .appContent {
  opacity: 1;
}

.appFrame.has-modal-sheet-open {
  overflow: hidden;
  touch-action: none;
  scrollbar-gutter: stable;
}

.feedSkeletonStack,
.neoSkeletonStack {
  pointer-events: none;
}

.neoSkeletonStack {
  display: grid;
  gap: 12px;
}

.feedLoadSentinel {
  width: 1px;
  height: 1px;
}

.skeletonPostCard {
  position: relative;
  min-height: min(78vh, 720px);
  border-radius: 0;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025)),
    #0b0f16;
}

.is-media-missing {
  display: none !important;
}

.neoSkeleton::before,
.skeletonPostCard::before,
.notificationSkeletonRow::before,
.messageSkeletonRow::before,
.activityRailSkeleton::before,
.profileGridSkeleton::before,
.mapSheetSkeleton::before,
.adminTableSkeleton::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--skeleton-highlight);
  transform: translateX(-100%);
  opacity: var(--skeleton-highlight-opacity);
  animation: neocitySkeletonSweep var(--skeleton-duration) var(--skeleton-easing) infinite;
  pointer-events: none;
}

.skeletonPostCard--inline,
.skeletonPostCard--initial {
  flex: 0 0 100%;
  height: 100%;
  min-height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.citySnapFeed .skeletonPostCard--inline,
.citySnapFeed .skeletonPostCard--initial {
  flex: 0 0 var(--city-post-h, 100%);
  height: var(--city-post-h, 100%);
  min-height: var(--city-post-h, 100%);
}

.citySnapFeed,
.activityViewerFeedRoot.activityViewerSequence,
.postViewerCanvas.postViewerSequence {
  overflow-anchor: none;
}

.reelPaginationBoundary {
  width: 100%;
  flex-shrink: 0;
}

.reelPaginationBoundary.is-retry::before {
  animation: none;
  opacity: 0;
}

.reelPaginationRetry {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: rgba(248,251,255,.8);
  font-size: 14px;
}

.reelPaginationRetry button {
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 20px;
  background: rgba(255,255,255,.08);
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.skeletonPostMedia,
.skeletonPostRail,
.skeletonPostText {
  position: absolute;
  border-radius: 18px;
  background: rgba(255,255,255,0.075);
}

.skeletonPostMedia {
  inset: 0;
  border-radius: 0;
}

.skeletonPostRail {
  right: 18px;
  bottom: 96px;
  width: 48px;
  height: 230px;
}

.skeletonPostText {
  left: 18px;
  right: 84px;
  bottom: 42px;
  height: 74px;
}

.notificationSkeletonRow,
.messageSkeletonRow,
.activityRailSkeleton,
.profileGridSkeleton,
.mapSheetSkeleton,
.adminTableSkeleton {
  position: relative;
  overflow: hidden;
  border-radius: var(--skeleton-radius-medium);
  background: var(--skeleton-fill);
  opacity: var(--skeleton-surface-opacity);
}

.notificationSkeletonRow,
.messageSkeletonRow {
  min-height: 64px;
}

.activityRailSkeleton {
  min-height: 180px;
}

.profileGridSkeleton {
  aspect-ratio: 1;
}

.mapSheetSkeleton {
  min-height: 260px;
}

.adminTableSkeleton {
  min-height: 320px;
}

.chat-row.is-pending,
.dmMessageRow.is-pending {
  opacity: 0.74;
}

.dmMessageRow.is-failed {
  opacity: 0.9;
}

.dmChatOlder .back-link {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.dmChatOlder .back-link:disabled {
  cursor: default;
  opacity: 0.62;
}

.dmChatOlder .back-link.appRecoveryRefresh {
  min-height: 34px;
  width: 34px;
  color: rgba(244, 249, 255, 0.94);
}

.dmMessageRow--skeleton {
  --skeleton-local-radius: var(--skeleton-radius-large);
  width: min(72%, 360px);
  margin: 8px 0;
  border-radius: var(--skeleton-radius-large);
}

/* A real thread is not a column of identical blocks, so the placeholder varies
   its bubble widths. Without this the loading state reads as a grey rectangle
   rather than as messages about to arrive. */
.dmMessageRow--skeleton:nth-of-type(3n + 1) {
  width: min(54%, 268px);
}

.dmMessageRow--skeleton:nth-of-type(3n + 2) {
  width: min(70%, 340px);
}

.dmMessageRow--skeleton:nth-of-type(3n) {
  width: min(42%, 212px);
}

/* Alignment follows the class the builders actually set. It keyed off
   nth-of-type(2n) while the shell marks every third row as outgoing, so the
   right-aligned bar and the outgoing bar were never the same bar. */
.dmMessageRow--skeleton.mine {
  justify-self: end;
  margin-left: auto;
}

.notificationsLoadMore {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  gap: 9px;
  min-height: 36px;
  margin: 24px auto 12px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: rgba(194, 205, 216, 0.7);
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
}

.notificationsLoadMore:hover {
  color: rgba(248,250,252,0.9);
  text-decoration: none;
}

.notificationsLoadMoreIcon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.notificationsLoadMoreIcon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes neocitySkeletonSweep {
  to {
    transform: translateX(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .appFrame a,
  .appFrame button,
  .appFrame [role="button"],
  .appContent {
    transition: none !important;
  }

  /* The action sheet panel is a div, so it matched none of the selectors above
     and kept sliding while the scrim's fade was suppressed -- a half-animated
     open rather than either intended behaviour. Drag still applies its own
     inline transition; that is user-driven, not decorative. */
  .cityPostActionSheetPanel,
  .cityPostActionSheetScrim,
  .mapItemMoreSheet .cityPostActionSheetPanel {
    transition: none !important;
  }
}

.auth-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  min-height: clamp(300px, 46vh, 440px);
  padding: calc(16px + env(safe-area-inset-top, 0)) 0 0;
  overflow: hidden;
}

.auth-hero__layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.auth-hero__layer--base {
  background:
    radial-gradient(ellipse 90% 70% at 50% 55%, rgba(32, 88, 155, 0.1), transparent 55%),
    linear-gradient(180deg, #03060d 0%, #060a12 48%, #0b111c 100%);
}

.auth-hero__layer--grid {
  opacity: 0.36;
  background-image:
    linear-gradient(rgba(110, 165, 220, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110, 165, 220, 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 92% 85% at 50% 48%, #000 22%, transparent 72%);
}

.auth-hero__layer--glow {
  background: radial-gradient(ellipse 55% 45% at 50% 52%, rgba(60, 150, 230, 0.09), transparent 62%);
}

/*
  Map stage = grid: row 1 text only (start); row 2 = full-width “map canvas” only.
  Pin is centered in row 2 by layout (place-items), not absolute pixel offsets.
*/
.auth-hero__map-stage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
  gap: clamp(12px, 2.8vh, 24px);
  flex: 1 1 auto;
  width: 100%;
  min-height: clamp(260px, 42vh, 420px);
  padding: 0 20px;
  box-sizing: border-box;
}

.auth-hero__copy {
  grid-row: 1;
  grid-column: 1;
  justify-self: start;
  align-self: start;
  position: relative;
  z-index: 2;
  max-width: 17rem;
  padding: 0;
  pointer-events: none;
}

.auth-hero__pin-layer {
  grid-row: 2;
  grid-column: 1;
  position: relative;
  z-index: 1;
  min-height: clamp(168px, 26vh, 280px);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  place-content: center;
  pointer-events: none;
}

.auth-hero__overlap-shim {
  flex: 0 0 auto;
  height: var(--auth-hero-overlap);
  min-height: var(--auth-hero-overlap);
  pointer-events: none;
}

.auth-hero__focal {
  position: relative;
  width: min(240px, 78vw);
  height: min(240px, 78vw);
  max-width: 240px;
  max-height: 240px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
}

/* Soft persistent halo — geometric center of focal (map focal point) */
.auth-hero__halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 120px;
  height: 120px;
  margin: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    rgba(110, 210, 255, 0.38) 0%,
    rgba(70, 165, 230, 0.14) 45%,
    transparent 70%
  );
  filter: blur(6px);
  z-index: 0;
}

.auth-hero__ripple {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 128px;
  height: 128px;
  margin: 0;
  margin-left: -64px;
  margin-top: -64px;
  border-radius: 50%;
  border: 1px solid rgba(150, 225, 255, 0.3);
  box-shadow: 0 0 40px rgba(100, 200, 255, 0.28);
  animation: auth-hero-ripple 3.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
  opacity: 0;
  z-index: 0;
}

.auth-hero__ripple--late {
  animation-delay: 1.45s;
}

@keyframes auth-hero-ripple {
  0% {
    transform: scale(0.18);
    opacity: 0;
  }
  12% {
    opacity: 0.45;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

.auth-hero__pin {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  filter:
    drop-shadow(0 0 18px rgba(130, 220, 255, 1))
    drop-shadow(0 0 42px rgba(90, 195, 255, 0.75))
    drop-shadow(0 6px 28px rgba(40, 130, 200, 0.5));
  animation: auth-hero-pin-float 3.4s ease-in-out infinite;
}

.auth-hero__pin svg {
  display: block;
}

@keyframes auth-hero-pin-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-hero__ripple,
  .auth-hero__ripple--late {
    animation: none;
    opacity: 0.22;
    transform: scale(0.62);
  }

  .auth-hero__pin {
    animation: none;
  }

  .auth-card--sheet {
    animation: none !important;
  }
}

.auth-hero__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(200, 210, 230, 0.55);
  margin-bottom: 10px;
}

.auth-hero__brand-mark {
  display: block;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 14px;
}

.auth-hero__headline {
  margin: 0 0 6px;
  font-size: clamp(26px, 7.5vw, 32px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: #f5f8ff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

.auth-hero__tagline {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: linear-gradient(92deg, #a8cfff 0%, #6ec8ff 45%, #5ee0d0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 14px rgba(100, 190, 255, 0.22));
}

.auth-card-overlap {
  /* `1 0 auto` and no `min-height: 0`: the sheet still fills the screen when the
     form is short, but grows past it when the form is long instead of trapping
     the overflow. See .auth-card-scroll. */
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  margin-top: calc(-1 * var(--auth-hero-overlap));
  z-index: 4;
  padding: 0 0 calc(12px + env(safe-area-inset-bottom, 0));
}

@media (min-width: 720px) {
  .auth-premium-root {
    --auth-hero-overlap: 48px;
  }
}

.auth-screen--premium .auth-card {
  max-width: none;
}

.auth-card--sheet {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  transform-origin: 50% 100%;
  border-radius: 28px 28px 22px 22px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.11);
  background: linear-gradient(180deg, rgba(24, 30, 44, 0.98) 0%, rgba(9, 13, 20, 0.995) 100%);
  box-shadow:
    0 -24px 64px rgba(0, 0, 0, 0.62),
    0 -8px 32px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 1px 0 rgba(255, 255, 255, 0.07) inset;
  animation: auth-sheet-rise 0.88s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes auth-sheet-rise {
  from {
    opacity: 0.9;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.auth-sheet-handle {
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  margin: 10px auto 4px;
  flex-shrink: 0;
}

/* Sign-in and sign-up scroll as a page, not as a sheet.
   These screens are taller than the viewport on a phone once the hero, the
   fields, the legal copy and the provider buttons are stacked. The content used
   to sit in its own `overflow-y: auto` box pinned to 100dvh, so the document
   never scrolled: the page looked static while a small inner region moved,
   address-bar chrome never collapsed, and the sheet edges cropped the form.
   Letting the height run and the document scroll fixes all three. The sheet
   styling is unchanged -- only where the scrolling happens. */
.auth-card-scroll {
  flex: 1 0 auto;
  padding: 8px 22px 28px;
}

.auth-screen--premium .auth-title {
  font-size: 24px;
  font-weight: 750;
}

.auth-screen--premium .auth-subtitle {
  color: rgba(186, 198, 218, 0.88);
}

.auth-input-wrap {
  display: flex;
  align-items: stretch;
  gap: 0;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(12, 18, 30, 0.95);
  min-height: 48px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.auth-input-wrap:focus-within {
  border-color: rgba(122, 212, 255, 0.88);
  box-shadow: 0 0 0 3px rgba(122, 212, 255, 0.2);
}

.auth-input-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  flex-shrink: 0;
  color: rgba(200, 214, 235, 0.72);
}

.auth-input-icon svg {
  display: block;
}

.auth-input--bare {
  flex: 1 1 auto;
  width: auto !important;
  min-width: 0;
  min-height: 46px !important;
  padding: 12px 8px !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.auth-input--bare:focus {
  box-shadow: none !important;
}

.auth-input-toggle {
  flex-shrink: 0;
  width: 46px;
  min-height: 46px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  color: rgba(200, 214, 235, 0.72);
  border-radius: 0 12px 12px 0 !important;
  box-shadow: none !important;
}

.auth-input-toggle:hover {
  color: rgba(230, 240, 255, 0.95);
  transform: none;
}

.auth-input-toggle:focus-visible {
  outline: 2px solid rgba(122, 212, 255, 0.7);
  outline-offset: -2px;
}

.auth-forgot-row {
  display: flex;
  justify-content: flex-end;
  margin-top: -4px;
  margin-bottom: 4px;
}

.auth-forgot-row a {
  font-size: 13px;
  font-weight: 600;
  color: #a8c8ff;
}

.auth-button--gradient {
  border: none !important;
  background: linear-gradient(92deg, #8b5cf6 0%, #6366f1 38%, #3b82f6 72%, #22d3ee 110%) !important;
  color: #fff !important;
  box-shadow:
    0 4px 22px rgba(99, 102, 241, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset !important;
  border-radius: 14px !important;
  min-height: 50px !important;
  font-size: 16px !important;
}

.auth-button--gradient:hover {
  transform: translateY(-1px);
  box-shadow:
    0 8px 28px rgba(99, 102, 241, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset !important;
}

.auth-signup-wizard .signup-form label {
  color: rgba(200, 210, 228, 0.92);
}

.auth-signup-wizard .signup-form input[type='text'],
.auth-signup-wizard .signup-form input[type='email'],
.auth-signup-wizard .signup-form input[type='password'],
.auth-signup-wizard .signup-form input[type='date'],
.auth-signup-wizard .signup-form textarea {
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(12, 18, 30, 0.95);
  color: #f4f8ff;
}

.auth-signup-wizard .signup-form button[type='submit'] {
  margin-top: 22px;
  border: none;
  border-radius: 14px;
  min-height: 50px;
  font-size: 16px;
  font-weight: 700;
  background: linear-gradient(92deg, #8b5cf6 0%, #6366f1 38%, #3b82f6 72%, #22d3ee 110%);
  color: #fff;
  box-shadow: 0 4px 22px rgba(99, 102, 241, 0.45);
}

.auth-signup-wizard .signup-form .hint {
  color: rgba(186, 198, 218, 0.78);
}

.auth-signup-wizard .signup-check {
  color: rgba(226, 232, 240, 0.92);
}

.auth-signup-wizard .signup-check input[type='checkbox'] {
  accent-color: #6366f1;
}

.auth-signup-wizard .signup-check a {
  color: #a8c8ff;
}

.auth-signup-wizard .signup-footer {
  color: rgba(186, 198, 218, 0.85);
}

.auth-signup-wizard .signup-footer a {
  color: #a8c8ff;
  font-weight: 600;
}

.auth-wizard-header .signup-steps i {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(200, 210, 230, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.auth-wizard-header .signup-steps i.done {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.5), rgba(59, 130, 246, 0.45));
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}

.auth-wizard-header .signup-steps i.current {
  box-shadow: 0 0 0 2px rgba(122, 212, 255, 0.55);
  background: rgba(122, 212, 255, 0.15);
  color: #e8f4ff;
}

.auth-wizard-header .signup-brand {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(200, 210, 230, 0.55);
  margin-bottom: 10px;
  text-align: center;
}

.auth-wizard-header .signup-h1 {
  font-size: 1.45rem;
  font-weight: 750;
  margin: 0 0 8px;
  text-align: center;
  color: #f5f8ff;
}

.auth-wizard-header .signup-sub {
  color: rgba(186, 198, 218, 0.88);
  font-size: 14px;
  line-height: 1.45;
  margin: 0 0 22px;
  text-align: center;
}

.admin-header { display: flex; justify-content: space-between; align-items: center; padding: var(--pad); background: var(--surface); border-bottom: 1px solid var(--line); }
.admin-header nav a { margin-left: 12px; color: var(--muted); text-decoration: none; }
.admin-main { padding: var(--pad); }
.stats { display: flex; gap: 12px; margin-bottom: 16px; }
.district-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.district-card { background: var(--surface); border-radius: var(--radius-md); padding: 12px; border: 1px solid var(--line); }

.app-shell, .appShell {
  position: relative;
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: none;
  border-radius: 0;
  overflow: visible;
}

.app-content, .appContent { flex: 1; display: flex; flex-direction: column; padding-bottom: var(--nav-height); overflow: visible; }
.content { flex: 1; padding: 16px 16px 96px; background: var(--bg); }

@media (min-width: 720px) {
  .content { padding: 24px 24px 120px; }
}

.pageHeader, .top-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(10, 13, 18, 0.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  overflow: visible;
}
.pageHeader .right, .top-bar-right { display: flex; align-items: center; gap: 10px; }
.pageHeader .left, .top-bar-left { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pageTitle, .top-bar-title { font-size: 17px; font-weight: 700; letter-spacing: 0.01em; }
.pageMeta, .top-bar-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }

.missionHeader { background: rgba(10, 13, 18, 0.92); border-bottom: 1px solid var(--line); }
.missionHeaderLeft { display: flex; flex-direction: column; gap: 6px; }
.districtLabel { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.missionMetricRow { display: flex; align-items: baseline; gap: 10px; }
.missionLevel { font-size: 28px; font-weight: 700; letter-spacing: 0.06em; color: var(--text); }
.missionPoints { font-size: 20px; font-weight: 600; color: var(--text); }
.missionStatusRow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.statusPill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,0.03); font-size: 11px; letter-spacing: 0.04em; }
.pillActive { border-color: rgba(122, 212, 255, 0.35); background: rgba(122, 212, 255, 0.12); color: var(--text); }
.pillDormant { border-color: rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.06); color: var(--muted); }
.pillSoft { color: var(--muted); }
.missionSubline { color: var(--muted); font-size: 13px; }
.missionMetaLink { color: var(--muted); font-size: 13px; text-decoration: none; }
.missionMetaLink:hover { color: var(--accent); text-decoration: underline; }

.chip, .top-badge, .players-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-decoration: none;
}

.chip.level { border-color: rgba(122, 212, 255, 0.35); background: rgba(122, 212, 255, 0.12); }
.chip.muted { color: var(--muted); }
.dot { color: var(--muted); font-weight: 700; }
.statusDot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  display: inline-block;
  background: rgba(255, 255, 255, 0.4);
}
.statusDot.is-active { background: var(--accent-2); }
.statusDot.is-dormant { background: rgba(255, 255, 255, 0.3); }

.menu-toggle {
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
}

.headerActions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.headerIconRow {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.headerActionBtn,
.headerMenuBtn {
  position: relative;
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  display: inline-grid;
  place-items: center;
  text-decoration: none;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.headerActionBtn:hover,
.headerActionBtn:focus-visible,
.headerMenuBtn:hover,
.headerMenuBtn:focus-visible {
  text-decoration: none;
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
  outline: none;
}

.headerActionBtn.is-active {
  color: var(--text);
  background: rgba(122, 212, 255, 0.12);
  border-color: rgba(122, 212, 255, 0.22);
}

.headerActionIcon {
  width: 14px;
  height: 14px;
  display: grid;
  place-items: center;
}

.headerActionIcon svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.headerActionBadge {
  position: absolute;
  top: 5px;
  right: 4px;
  min-width: 12px;
  height: 12px;
  padding: 0 3px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  line-height: 12px;
  text-align: center;
  letter-spacing: 0.02em;
}

.headerMenuBtn {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1;
}

/* Sheets */
.sheet {
  position: fixed;
  inset: 0;
  display: none;
  align-items: flex-end;
  justify-content: center;
  z-index: 120;
}
.sheet.is-open { display: flex; }
.sheetBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 7, 11, 0.7);
  backdrop-filter: blur(10px);
}
.sheetCard {
  position: relative;
  z-index: 2;
  width: min(92vw, 420px);
  background: var(--surface);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border: 1px solid var(--line);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--shadow-soft);
}
.sheetHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.sheetTitle { font-size: 16px; font-weight: 700; }
.sheetClose {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.sheetBody { display: flex; flex-direction: column; gap: 8px; }
.sheetRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 13px;
  color: var(--text);
}

.menuWrap { position: relative; }
.dropdown { position: absolute; right: 0; left: auto; top: calc(100% + 8px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); min-width: 180px; padding: 8px; display: none; flex-direction: column; gap: 6px; z-index: 200; }
.dropdown.appMenu { position: absolute; right: 0; top: calc(100% + 8px); }
.dropdown.visible { display: flex; }
.dropdown.open { display: flex; }
.dropdown a,
.dropdown button { font-size: 13px; color: var(--text); padding: 8px 10px; border-radius: 10px; }
.dropdown a:hover,
.dropdown button:hover { background: rgba(255, 255, 255, 0.05); text-decoration: none; }
.dropdown a.danger { color: var(--danger); font-weight: 700; }
.dropdown button.danger { color: var(--danger); font-weight: 700; }
.dropdown .menuItemDisabled {
  display: block;
  font-size: 13px;
  color: var(--muted);
  padding: 8px 10px;
  border-radius: 10px;
  cursor: default;
}
.appMenuBtn {
  width: 100%;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.appMenuBtn:hover {
  transform: none;
  box-shadow: none;
  border-color: transparent;
}

.banner { padding: 10px 16px; font-size: 12px; background: rgba(98, 245, 210, 0.08); border-bottom: 1px solid var(--line); color: var(--ink); }

.tab-panel { display: none; }
.tab-panel.active { display: block; }
.hidden { display: none !important; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); }
.sectionTitle { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }

/* Shared layout primitives */
.page { width: 100%; max-width: var(--page-max); margin: 0 auto; padding: 16px; }
@media (min-width: 720px) { .page { padding: 24px; } }
.topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: rgba(10, 13, 18, 0.92); border-bottom: 1px solid var(--line); backdrop-filter: blur(16px); }
.tabs { display: flex; gap: 8px; padding: 8px 0; }
.tab { border: 1px solid transparent; background: transparent; color: var(--muted); padding: 6px 14px; border-radius: 999px; font-weight: 600; cursor: pointer; }
.tab.is-active { border-color: rgba(122, 212, 255, 0.35); background: rgba(122, 212, 255, 0.12); color: var(--text); }
.list { display: flex; flex-direction: column; gap: 8px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface); }
.divider { height: 1px; background: var(--line); width: 100%; }
.input { width: 100%; min-height: 44px; padding: 12px 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); color: var(--text); }
.btn-primary { border-color: rgba(122, 212, 255, 0.35); background: rgba(122, 212, 255, 0.12); color: var(--text); }

.missionHub { display: flex; flex-direction: column; gap: 10px; }
.missionGrid { display: flex; flex-direction: column; gap: 12px; }
.missionCard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 14px; box-shadow: none; position: relative; overflow: hidden; }
.missionCard::before { display: none; }
.missionCard-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.missionType { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 999px; background: rgba(122, 212, 255, 0.12); border: 1px solid rgba(122, 212, 255, 0.3); color: var(--text); font-size: 11px; letter-spacing: 0.05em; }
.missionStatus { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); font-size: 11px; letter-spacing: 0.05em; color: var(--muted); }
.missionStatus.active { color: var(--neon); border-color: rgba(98, 245, 210, 0.45); }
.missionStatus.expired { color: var(--muted); border-color: rgba(255, 255, 255, 0.12); }
.missionTitle { margin: 0 0 6px; font-size: 18px; }
.missionDesc { margin: 0 0 10px; color: var(--muted); }
.missionMeta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.metaChip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 12px; background: rgba(255,255,255,0.04); border: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.metaChip.reward { border-color: rgba(251, 191, 36, 0.4); color: #fcd34d; }
.metaChip.coords { border-color: rgba(125, 211, 252, 0.4); color: var(--neon-2); }
.missionThumb { border-radius: 12px; overflow: hidden; border: 1px solid var(--line); margin-bottom: 10px; }
.missionThumb img { width: 100%; height: auto; display: block; }
.missionFooter { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.missionWindow { font-size: 13px; color: var(--muted); }
.missionButton { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(122, 212, 255, 0.35); background: rgba(122, 212, 255, 0.12); color: var(--text); text-decoration: none; font-weight: 600; letter-spacing: 0.02em; }
.missionButton:hover { text-decoration: none; border-color: rgba(122, 212, 255, 0.55); }
.status-active { border-color: rgba(98, 245, 210, 0.3); }
.status-expired { border-color: rgba(255, 255, 255, 0.08); opacity: 0.85; }
.missionCard.status-active .missionStatus { color: var(--accent); border-color: rgba(122, 212, 255, 0.5); }
.missionCard.status-expired { opacity: 0.8; }
.missionCard.status-expired .missionStatus { color: var(--muted); border-color: rgba(255,255,255,0.1); }

.missionDetail { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.missionDetail-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.missionHeroImage {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 4 / 3;
  background: #0b1018;
}
.missionHeroImage img,
.missionHeroImage video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.missionWindowDetail { font-size: 14px; color: var(--muted); }

.feed-card { padding: 14px; margin-bottom: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.feed-meta { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; letter-spacing: 0.02em; margin-bottom: 8px; }
.meta-source { font-weight: 800; color: var(--ink); background: rgba(255, 255, 255, 0.06); padding: 4px 8px; border-radius: 999px; font-size: 11px; letter-spacing: 0.06em; }
.feed-title { font-size: 16px; margin: 4px 0 8px 0; }
.feed-body { font-size: 14px; color: var(--ink); line-height: 1.6; }
.feed-image {
  margin-top: 10px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 4 / 3;
  background: #0b1018;
}
.feed-image img,
.feed-image video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border: 0;
  border-radius: 0;
  max-height: none;
}
.feed-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--muted); }
.pill-group { display: flex; gap: 8px; flex-wrap: wrap; }
.pill { flex: 1 1 30%; min-height: 40px; border-radius: 999px; padding: 0 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); color: var(--text); cursor: pointer; text-transform: uppercase; transition: all 0.15s ease; }
.pill-like { border-color: rgba(122, 212, 255, 0.5); }
.pill-dislike { border-color: rgba(248, 113, 113, 0.5); color: #fecdd3; }
.pill-neutral { color: var(--muted); }
.pill:hover { transform: translateY(-1px); }
.feed-counts { color: var(--muted); font-weight: 600; }

.comment-list { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.comment-item { font-size: 13px; color: var(--ink); }
.comment-form { margin-top: 8px; }
.comment-form input { width: 100%; padding: 12px; border-radius: 12px; border: 1px solid var(--line); font-size: 14px; background: var(--panel-muted); color: var(--ink); }
.comment-form input::placeholder { color: rgba(226, 232, 240, 0.55); }
.empty-state { font-size: 13px; color: var(--muted); margin: 6px 0 10px; }

.chat-shell { display: flex; flex-direction: column; gap: 10px; min-height: 320px; position: relative; }
.chat-list, .global-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px 0 12px; max-height: 60vh; }
.chat-row { display: flex; }
.chat-row.player { justify-content: flex-end; }
.bubble { max-width: 90%; padding: 10px 12px; border-radius: 16px; font-size: 13px; line-height: 1.45; background: var(--surface-2); color: var(--text); border: 1px solid var(--line); box-shadow: none; }
.chat-row.player .bubble { background: rgba(122, 212, 255, 0.12); border-radius: 16px 16px 4px 16px; border: 1px solid rgba(122, 212, 255, 0.35); }
.chat-row.admin .bubble { background: rgba(255, 255, 255, 0.04); border-radius: 16px 16px 16px 4px; }
.bubble .meta { display: block; font-size: 11px; color: var(--muted); margin-top: 6px; }
.bubble-image {
  margin-top: 6px;
  width: min(100%, 240px);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 12px;
  background: #0b1018;
}
.bubble-image img,
.bubble-image video {
  width: 100%;
  height: 100%;
  max-width: none;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid var(--line);
  display: block;
}
.message-input, .global-input { display: flex; gap: 8px; align-items: center; padding: 10px 0 4px; border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(12, 17, 26, 0.92), rgba(7, 9, 14, 0.95)); position: sticky; bottom: 0; }
.message-input input, .global-input input { flex: 1; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); font-size: 14px; background: var(--panel); color: var(--ink); }
.message-input button, .global-input button { width: auto; padding: 0 16px; }
.message-input button:hover, .global-input button:hover { transform: translateY(-1px); }

/* Comms hub layout */
.comms-shell { display: flex; flex-direction: column; gap: 0; min-height: calc(100vh - var(--nav-height) - 120px); max-height: calc(100vh - var(--nav-height) - 36px); border-radius: var(--radius); overflow: hidden; }
.comms-top { position: sticky; top: 0; left: 0; right: 0; padding: 14px 14px 10px; display: flex; flex-direction: column; gap: 10px; background: var(--panel-soft); border-bottom: 1px solid var(--line); z-index: 3; }
.comms-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.comms-title { font-size: 18px; font-weight: 800; letter-spacing: 0.02em; }
.comms-sub { font-size: 12px; color: var(--muted); letter-spacing: 0.04em; }
.comms-search input { background: var(--panel-muted); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.comms-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 6px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); }
.comms-tab { border: 1px solid transparent; background: transparent; color: var(--muted); font-weight: 700; letter-spacing: 0.04em; padding: 10px 8px; border-radius: 10px; cursor: pointer; }
.comms-tab.active { background: rgba(98, 245, 210, 0.1); border-color: rgba(98, 245, 210, 0.35); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); }
.comms-body { flex: 1; overflow-y: auto; padding: 12px 14px 6px; display: flex; flex-direction: column; gap: 14px; }
.comms-panel { display: none; flex-direction: column; gap: 12px; min-height: 280px; }
.comms-panel.active { display: flex; }
.comms-channel-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.comms-channel-title { font-size: 15px; font-weight: 800; }
.comms-channel-sub { font-size: 12px; color: var(--muted); }
.comms-dm-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dm-requests { font-size: 12px; color: var(--neon-2); text-decoration: none; }
.dm-requests:hover { text-decoration: underline; }
.comms-actions-row { display: flex; gap: 8px; flex-wrap: wrap; }
.comms-cta { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); color: var(--ink); font-weight: 700; text-decoration: none; letter-spacing: 0.02em; }
.comms-cta:hover { border-color: rgba(98, 245, 210, 0.35); text-decoration: none; }
.comms-input-rail { position: sticky; bottom: 0; left: 0; right: 0; padding: 10px 14px 14px; border-top: 1px solid var(--line); background: rgba(8, 10, 14, 0.9); display: flex; flex-direction: column; gap: 8px; z-index: 3; }
.comms-input-rail.hidden { display: none; }
#tab-comms .message-input, #tab-comms .global-input { position: static; padding: 0; background: transparent; border-top: none; }
#tab-comms .message-input input, #tab-comms .global-input input { background: var(--panel); }
#tab-comms .message-input button, #tab-comms .global-input button { min-width: 92px; }
#tab-comms .chat-list, #tab-comms .global-list { max-height: none; overflow: visible; padding: 0 0 10px; }
#tab-comms .bubble { max-width: 100%; }
.dm-list { display: flex; flex-direction: column; gap: 10px; }
.dm-row { display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 10px 12px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface); color: var(--text); text-decoration: none; align-items: center; }
.dm-row:hover { border-color: rgba(122, 212, 255, 0.35); text-decoration: none; }
.dm-avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line); font-weight: 700; letter-spacing: 0.02em; color: var(--text); }
.dm-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dm-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.dm-name { font-weight: 800; font-size: 14px; }
.dm-time { font-size: 12px; color: var(--muted); }
.dm-bottom { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); min-width: 0; }
.dm-preview { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: none; flex-shrink: 0; }

.commsInboxPage {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 10px;
  padding-bottom: 112px;
}

.commsFlat {
  gap: 0;
  padding-top: 4px;
}

.commsFlatList {
  list-style: none;
  margin: 0;
  padding: 0;
}

.commsFlatRow {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: var(--text);
  text-decoration: none;
  transition: background 0.12s ease;
}

.commsFlatRow:hover,
.commsFlatRow:focus-visible {
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  text-decoration: none;
  outline: none;
}

.commsFlatMain {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.commsFlatEmpty {
  margin: 48px 24px 0;
  text-align: center;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(186, 198, 214, 0.78);
}

.commsFlatEmptyAction {
  margin: 12px 24px 0;
  text-align: center;
}

.commsFlatEmptyAction a {
  color: rgba(122, 212, 255, 0.92);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.commsFlatEmptyAction a:hover {
  text-decoration: underline;
}

.commsFlatHint {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 500;
  color: rgba(160, 174, 192, 0.55);
}

.commsAvatarWrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
}

/* Sits inline before the name rather than on the avatar. Green is deliberate:
   blue is reserved here for read receipts and the unread indicator, so an
   online state must not compete with them. */
.commsPresenceDot {
  display: inline-block;
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  vertical-align: middle;
  border-radius: 50%;
  background: #34c759;
  box-shadow: 0 0 5px rgba(52, 199, 89, 0.55);
}

.commsPreviewLine {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  flex: 1;
}

/* Only rendered for the viewer's own last message. Sent and delivered stay
   muted so they read as metadata; seen is the only state that earns colour. */
.commsSentMark {
  flex-shrink: 0;
  font-size: 12px;
  line-height: 1;
  letter-spacing: -1px;
  color: rgba(201, 210, 223, 0.5);
  font-weight: 600;
}

.commsSentMark.is-seen {
  color: var(--accent);
}

.commsUnreadDot {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
}

/* Unread has to survive a fast scan, so the contrast is built from both ends:
   the unread row pushes up to full white and heavier weight, and the read row
   settles back. Reading the conversation clears data-unread and every part of
   this reverts with no extra work. */
[data-dm-row][data-unread="0"] .commsInboxName {
  color: rgba(233, 239, 246, 0.82);
  font-weight: 500;
}

[data-dm-row][data-unread="0"] .commsInboxPreview {
  color: rgba(198, 208, 221, 0.6);
}

[data-dm-row][data-unread="1"] .commsInboxName {
  color: #ffffff;
  font-weight: 700;
}

[data-dm-row][data-unread="1"] .commsInboxPreview {
  color: rgba(248, 251, 255, 0.97);
  font-weight: 600;
}

[data-dm-row][data-unread="1"] .commsInboxTime {
  color: var(--accent);
  font-weight: 600;
}

/* A count only appears past a single unread; one message stays a plain dot so
   the row does not gain a number for every reply. */
.commsUnreadBadge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--accent);
  color: #04212e;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.commsPreviewAttachment {
  width: 14px;
  height: 11px;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  opacity: 0.5;
  flex-shrink: 0;
}

.commsPreviewPlaceholder {
  opacity: 0.35;
}

.commsDistrictAvatarFlat {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font-size: 17px;
  font-weight: 700;
  color: rgba(245, 247, 250, 0.95);
  background: rgba(122, 212, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.commsFlat .commsInboxAvatar,
.commsFlat .commsDistrictAvatarFlat {
  width: 48px;
  height: 48px;
}

.commsFlat .commsAvatarWrap {
  width: 48px;
  height: 48px;
  flex-basis: 48px;
}

.commsFlatRow .commsInboxAvatar,
.commsFlatRow .commsDistrictAvatarFlat {
  display: block;
}

.commsFlat .commsDistrictAvatarFlat {
  font-size: 16px;
}

.commsInboxHeader .pageMeta {
  display: flex;
  align-items: center;
}

.commsInboxHeader .pageSubtitle {
  margin-top: 2px;
  color: rgba(201, 210, 223, 0.68);
  font-size: 13px;
  font-weight: 650;
}

.commsInboxSurface,
.commsDistrictSection {
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015)),
    rgba(12, 16, 23, 0.96);
  overflow: hidden;
  box-shadow: 0 18px 34px rgba(3, 8, 16, 0.18);
}

.commsInboxSectionHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 12px;
}

.commsInboxSectionHead.is-secondary {
  padding-bottom: 10px;
}

.commsInboxSectionMeta {
  margin-top: 4px;
  color: rgba(201, 210, 223, 0.72);
  font-size: 13px;
  line-height: 1.5;
}

.commsInboxList {
  display: flex;
  flex-direction: column;
}

.commsInboxRow,
.commsDistrictRow {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 74px;
  padding: 14px 18px;
  color: var(--text);
  text-decoration: none;
}

.commsInboxList .commsInboxRow + .commsInboxRow,
.commsDistrictRow {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.commsInboxRow:hover,
.commsInboxRow:focus-visible,
.commsDistrictRow:hover,
.commsDistrictRow:focus-visible {
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  text-decoration: none;
  outline: none;
}

.commsInboxAvatar,
.commsDistrictAvatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  flex-shrink: 0;
}

.commsInboxAvatar {
  object-fit: cover;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.commsInboxAvatar.is-fallback,
.commsDistrictAvatar {
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at top, rgba(122, 212, 255, 0.22), transparent 58%),
    rgba(255, 255, 255, 0.04);
  color: rgba(245, 247, 250, 0.95);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.commsInboxMain,
.commsDistrictMain {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.commsInboxTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.commsInboxBottom,
.commsDistrictBottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.commsInboxName {
  /* flex:1 with min-width:0 is what lets a long name ellipsize instead of
     pushing the timestamp out of the row. */
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 600;
  color: rgba(245, 248, 252, 0.98);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.commsIdentityBadge {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(122, 212, 255, 0.12);
  color: rgba(191, 231, 255, 0.94);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}

.commsInboxTime {
  flex-shrink: 0;
  font-size: 12px;
  color: rgba(201, 210, 223, 0.58);
}

.commsInboxPreview {
  min-width: 0;
  font-size: 13px;
  color: rgba(206, 215, 226, 0.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.commsInboxPreview.is-unread {
  color: rgba(245, 248, 252, 0.94);
  font-weight: 600;
}

.commsInboxUnread {
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #2f80ff;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.01em;
  flex-shrink: 0;
}

.commsInboxChevron {
  width: 18px;
  min-width: 18px;
  color: rgba(201, 210, 223, 0.44);
}

.commsInboxChevron svg {
  width: 18px;
  height: 18px;
  display: block;
}

.commsDistrictPill {
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(251, 191, 36, 0.16);
  background: rgba(251, 191, 36, 0.1);
  color: rgba(254, 240, 198, 0.96);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
}

.commsInboxEmpty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 18px;
}

.commsInboxEmptyTitle {
  font-size: 18px;
  font-weight: 700;
  color: rgba(246, 248, 251, 0.98);
}

.commsInboxEmptyMeta {
  color: rgba(201, 210, 223, 0.72);
  font-size: 14px;
  line-height: 1.6;
}

.commsInboxEmptyAction {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(245, 247, 250, 0.94);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

.commsInboxEmptyAction:hover,
.commsInboxEmptyAction:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(248, 250, 252, 0.98);
  text-decoration: none;
  outline: none;
}

.dmInboxPage {
  gap: 6px;
  padding-top: 6px;
}

.commsFlat.dmInboxPage {
  gap: 0;
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  padding-left: 0;
  padding-right: 0;
}

.commsInboxHeader.pageHeader {
  padding-bottom: 8px;
}

.dmRequestNotice {
  margin: 0 16px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.dmRequestNoticeBody {
  min-width: 0;
}

.dmRequestNoticeTitle {
  font-size: 14px;
  font-weight: 700;
  color: rgba(244, 248, 255, 0.96);
}

.dmRequestNoticeText {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(191, 202, 218, 0.84);
}

.dmRequestNoticeActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.dmRequestNoticeState {
  font-size: 12px;
  font-weight: 600;
  color: rgba(191, 202, 218, 0.86);
}

.msgSearchPanel.activitySearchPanel--prime {
  padding: 0;
}

.msgSearchInner.activitySearchInner {
  max-width: none;
}

.dmInboxPage .msgTopTabs {
  flex-shrink: 0;
  margin-bottom: 0;
  padding: 0 var(--top-icon-visible-edge-inset) 6px;
}

.dmInboxPage .commsFlatList {
  padding-top: 4px;
}

.dmInboxPage .commsFlatRow {
  min-height: 76px;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 14px;
  margin: 0 6px;
  padding: 11px 12px;
  border-radius: 18px;
}

.dmInboxPage .commsFlatRow:hover,
.dmInboxPage .commsFlatRow:focus-visible {
  background: rgba(255, 255, 255, 0.045);
}

.dmInboxPage .commsFlatRow .commsInboxAvatar,
.dmInboxPage .commsFlatRow .commsDistrictAvatarFlat,
.dmInboxPage .commsAvatarWrap {
  width: 56px;
  height: 56px;
  flex-basis: 56px;
}

.dmInboxPage .commsInboxName {
  font-size: 16px;
  font-weight: 780;
}

.dmInboxPage .commsInboxTime {
  font-size: 13px;
  color: rgba(210, 218, 231, 0.62);
}

.dmInboxPage .commsInboxPreview {
  font-size: 14px;
  color: rgba(204, 213, 226, 0.66);
}

.dmInboxPage .commsPreviewAttachment {
  width: auto;
  height: auto;
  border: 0;
  opacity: 1;
}

.dmInboxPage .commsUnreadDot {
  width: 10px;
  height: 10px;
}

.commsFlatRequest {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.commsFlatRequestMain {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.commsFlatRequestText {
  min-width: 0;
}

.commsFlatRequestActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.msgTopTabs {
  display: flex;
  gap: 18px;
  padding: 0 14px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 2px;
}

.msgTopTab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(160, 174, 192, 0.72);
  text-decoration: none;
  font-size: 14px;
  font-weight: 560;
  letter-spacing: 0.01em;
  padding: 6px 0 10px;
}

.msgTopTabBadge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: #2f80ff;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.msgTopTab:hover {
  text-decoration: none;
  color: rgba(206, 216, 230, 0.9);
}

.msgTopTab.is-active {
  color: rgba(248, 250, 255, 0.96);
  font-weight: 720;
}

.msgTopTab.is-active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: rgba(122, 212, 255, 0.9);
}

.msgTabsSearchInput {
  width: 100%;
  box-sizing: border-box;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(245, 250, 255, 0.96);
  padding: 0 14px 0 38px;
  min-height: 38px;
  font-size: 14px;
  font-weight: 450;
  outline: none;
  box-shadow: none;
  transition: none;
}

.msgTabsSearchInput::placeholder {
  color: rgba(219, 229, 242, 0.46);
}

.msgTabsSearchInput:focus {
  border-color: transparent;
  background: transparent;
}

.commsFlatRow.is-selected {
  background: rgba(122, 212, 255, 0.12);
}

.commsFlatEmptySub {
  margin: 6px 24px 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(170, 184, 202, 0.76);
}

.msgRequestRow {
  align-items: flex-start;
}

.msgRequestItem .commsFlatRow {
  pointer-events: auto;
}

.msgRequestActions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.dmRequestSectionTitle {
  padding: 14px 16px 7px;
  color: rgba(238, 244, 252, 0.9);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dmFilterEmpty {
  margin: 0 14px 4px;
  font-size: 13px;
  color: rgba(170, 184, 202, 0.76);
}

.commsFlat.dmInboxPage {
  padding-top: 0;
}

.dmStatusMenuRoot {
  position: relative;
  grid-column: 2;
  justify-self: stretch;
  min-width: 0;
  display: flex;
  justify-content: center;
}

.dmHeaderTitleButton {
  position: relative;
  width: auto;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0 24px 5px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(244, 248, 252, 0.96);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1;
  cursor: pointer;
  transition: color 150ms ease, background-color 150ms ease;
}

.dmHeaderTitleButton svg {
  position: absolute;
  right: 7px;
  top: 50%;
  width: 15px;
  height: 15px;
  margin-top: 0;
  transform: translateY(calc(-50% - 2px));
  color: rgba(205, 216, 230, 0.78);
}

.dmHeaderTitleButton:hover,
.dmHeaderTitleButton:focus-visible {
  color: rgba(248, 251, 255, 0.98);
  background: rgba(255, 255, 255, 0.05);
  outline: none;
}

.dmStatusMenu {
  position: absolute;
  left: 50%;
  top: calc(100% + 2px);
  z-index: 50;
  width: 148px;
  padding: 7px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(10, 14, 20, 0.98);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.36);
  transform: translateX(-50%);
  backdrop-filter: blur(16px);
}

.dmStatusMenu:not([hidden]) {
  animation: activityFilterPopoverIn 140ms ease-out;
}

.dmStatusMenuItem {
  width: 100%;
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: rgba(218, 227, 239, 0.84);
  font-size: 13px;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}

.dmStatusMenuItem:hover,
.dmStatusMenuItem:focus-visible,
.dmStatusMenuItem.is-active {
  color: rgba(248, 251, 255, 0.96);
  background: rgba(255, 255, 255, 0.06);
  outline: none;
}

.dmStatusDot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.72);
}

.dmStatusDot.is-active {
  background: #4ade80;
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.12);
}

.dmStatusDot.is-offline {
  background: rgba(148, 163, 184, 0.7);
}

.dmMoreMenu {
  position: relative;
  flex: 0 0 auto;
}

.dmChatMenu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 70;
  min-width: 190px;
  padding: 8px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(10, 14, 20, 0.98);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
  display: flex;
  flex-direction: column;
  gap: 6px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  contain: layout paint;
}

.dmChatMenu[hidden] {
  display: none !important;
}

.dmChatMenu:not([hidden]),
.dmChatMenu.is-open {
  animation: activityFilterPopoverIn 120ms ease-out;
}

.dmChatMenu a,
.dmChatMenu button {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: rgba(238, 244, 252, 0.94);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
  box-shadow: none;
}

.dmChatMenu a:hover,
.dmChatMenu a:focus-visible,
.dmChatMenu button:hover,
.dmChatMenu button:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  outline: none;
  text-decoration: none;
}

.dmInboxPage .msgTopTabs {
  margin-top: -2px;
  padding: 0 var(--top-icon-visible-edge-inset) 5px;
}

@media (max-width: 540px) {
  .dmRequestNotice {
    margin: 0 14px 10px;
  }
}

.dmActionCard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 18px 18px;
}

.dmActionIdentity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.dmActionButtons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.dmChatPage {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 10px;
  padding-bottom: calc(var(--nav-height) + 16px);
}

.dmChatSurface {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - var(--nav-height) - 138px);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.01)),
    rgba(8, 12, 18, 0.98);
  overflow: hidden;
  box-shadow: 0 18px 34px rgba(3, 8, 16, 0.22);
}

.dmChatHeader {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
}

.dmChatHeader.is-clickable {
  cursor: pointer;
}

.dmChatAvatarButton {
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  text-decoration: none;
}

.dmChatAvatarButton:focus-visible {
  outline: 2px solid rgba(122, 212, 255, 0.5);
  outline-offset: 3px;
}

.dmChatIdentityButton {
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
}

.dmHeaderActions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.dmHeaderActionButton,
.dmInfoButton {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(245, 248, 252, 0.92);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  text-decoration: none;
}

.dmHeaderActionButton svg,
.dmInfoButton svg {
  width: 18px;
  height: 18px;
}

.dmHeaderActionButton:disabled {
  opacity: 0.38;
  cursor: default;
}

.dmHeaderActionButton:disabled:hover,
.dmHeaderActionButton:disabled:focus-visible {
  background: transparent;
}

.dmHeaderActionButton:hover,
.dmHeaderActionButton:focus-visible,
.dmInfoButton:hover,
.dmInfoButton:focus-visible {
  background: rgba(255, 255, 255, 0.07);
  outline: none;
}

.dmChatBack,
.dmAttachBtn,
.dmSendBtn,
.dmComposerPreviewClear {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(245, 248, 252, 0.95);
  display: inline-grid;
  place-items: center;
  text-decoration: none;
  transition: transform 140ms ease, border-color 160ms ease, background 160ms ease;
}

.dmChatBack {
  width: 36px;
  height: 36px;
  border-radius: 12px;
}

.dmChatBack:hover,
.dmAttachBtn:hover,
.dmSendBtn:hover,
.dmComposerPreviewClear:hover {
  text-decoration: none;
  transform: translateY(-1px);
  border-color: rgba(122, 212, 255, 0.26);
  background: rgba(122, 212, 255, 0.12);
}

.dmChatBack svg,
.dmAttachBtn svg,
.dmSendBtn svg {
  width: 18px;
  height: 18px;
}

.dmChatAvatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}

.dmChatAvatar.is-fallback {
  display: grid;
  place-items: center;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: rgba(245, 248, 252, 0.96);
  background:
    radial-gradient(circle at top, rgba(122, 212, 255, 0.24), transparent 58%),
    rgba(255, 255, 255, 0.04);
}

.dmChatIdentity {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dmChatName {
  min-width: 0;
  font-size: 16px;
  font-weight: 800;
  color: rgba(245, 248, 252, 0.98);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dmChatPresence {
  min-height: 16px;
  font-size: 12px;
  color: rgba(201, 210, 223, 0.7);
}

.dmChatRequestBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(122, 212, 255, 0.05);
}

.dmChatRequestBar--restricted {
  background: rgba(255, 255, 255, 0.04);
}

.dmSafetyBanner {
  margin: 0 16px 12px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.045);
  color: rgba(245, 248, 252, 0.95);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.dmSafetyBanner strong {
  font-size: 13px;
}

.dmSafetyActions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.dmSheetOverlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(0, 0, 0, 0.42);
}

.dmInfoSheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 91;
  max-width: 640px;
  margin: 0 auto;
  padding: 10px 16px calc(18px + env(safe-area-inset-bottom));
  max-height: min(84svh, 760px);
  overflow-y: auto;
  border-radius: 20px 20px 0 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 0;
  background: rgba(10, 14, 21, 0.98);
  box-shadow: 0 -20px 44px rgba(0, 0, 0, 0.35);
}

.dmInfoSheetHandle {
  width: 42px;
  height: 4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.18);
  margin: 0 auto 14px;
}

.dmInfoSheetProfile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 2px 14px;
}

.dmInfoSheetHero {
  flex-direction: column;
  text-align: center;
  gap: 10px;
  padding-bottom: 16px;
}

.dmInfoSheetHero .dmChatAvatar {
  width: 78px;
  height: 78px;
  font-size: 27px;
}

.dmInfoSheetHeroText {
  min-width: 0;
}

.dmInfoSheetName {
  font-size: 17px;
  font-weight: 820;
  color: rgba(248, 250, 255, 0.98);
}

.dmInfoSheetMeta,
.dmInfoSheetNote {
  margin-top: 3px;
  font-size: 13px;
  color: rgba(190, 202, 219, 0.78);
}

.dmInfoTopActions {
  display: flex;
  gap: 10px;
  padding: 0 0 12px;
}

.dmInfoPill {
  flex: 1 1 0;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-radius: 14px;
  border: 1px solid rgba(122, 212, 255, 0.18);
  background: rgba(122, 212, 255, 0.1);
  color: rgba(245, 250, 255, 0.96);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.dmInfoPill:hover,
.dmInfoPill:focus-visible {
  border-color: rgba(122, 212, 255, 0.34);
  background: rgba(122, 212, 255, 0.16);
  text-decoration: none;
  outline: none;
}

.dmInfoStateBanner {
  margin: 0 0 10px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(244, 248, 252, 0.92);
  font-size: 13px;
  line-height: 1.35;
}

.dmInfoSectionLabel {
  padding: 6px 2px 4px;
  color: rgba(190, 202, 219, 0.66);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dmInfoSheetGroup {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding: 8px 0;
}

.dmInfoAction {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: rgba(244, 248, 252, 0.95);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}

.dmInfoActionStatic {
  justify-content: space-between;
  gap: 16px;
  cursor: default;
}

.dmInfoActionStatic:hover,
.dmInfoActionStatic:focus-visible {
  color: rgba(244, 248, 252, 0.95);
}

.dmInfoAction.is-selected {
  color: rgba(122, 212, 255, 0.98);
}

.dmInfoMediaGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 6px 0 4px;
}

.dmInfoMediaThumb {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
}

.dmInfoMediaThumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dmInfoMemberList {
  display: grid;
  gap: 8px;
  padding: 6px 0;
}

.dmInfoMemberRow {
  min-height: 38px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  color: rgba(244, 248, 252, 0.92);
  font-size: 13px;
}

.dmInfoMemberRow span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chatInfoScreen {
  background:
    radial-gradient(circle at 50% -10%, rgba(122, 212, 255, 0.12), transparent 34%),
    #060a0f;
  color: rgba(245, 248, 252, 0.96);
}

.chatInfoPage {
  width: min(100%, 720px);
  min-height: 100svh;
  margin: 0 auto;
  padding: calc(12px + env(safe-area-inset-top)) 18px calc(var(--nav-height) + 26px);
}

.chatInfoTopBar {
  min-height: 44px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.chatInfoTopTitle {
  min-width: 0;
  text-align: center;
  font-size: 14px;
  font-weight: 850;
  color: rgba(229, 235, 244, 0.86);
}

.chatInfoBack,
.chatInfoTopMenu {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(245, 248, 252, 0.95);
  text-decoration: none;
}

.chatInfoTopSpacer {
  width: 42px;
  height: 42px;
  display: block;
}

.chatInfoBack:hover,
.chatInfoBack:focus-visible,
.chatInfoTopMenu:hover,
.chatInfoTopMenu:focus-visible {
  background: rgba(255, 255, 255, 0.07);
  outline: none;
  text-decoration: none;
}

.chatInfoBack svg,
.chatInfoTopMenu svg {
  width: 24px;
  height: 24px;
}

.chatInfoHero {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 10px;
  padding: 12px 0 20px;
}

.chatInfoAvatar {
  width: 118px;
  height: 118px;
  border-radius: 50%;
  object-fit: cover;
  border: 0;
  background: rgba(255, 255, 255, 0.055);
}

.chatInfoAvatar.is-fallback {
  display: grid;
  place-items: center;
  font-size: 50px;
  font-weight: 850;
  color: rgba(255, 161, 126, 0.98);
  background:
    radial-gradient(circle at top, rgba(255, 161, 126, 0.16), transparent 62%),
    rgba(77, 39, 39, 0.72);
}

.chatInfoHero h1 {
  max-width: min(100%, 620px);
  margin: 4px 0 0;
  color: rgba(248, 250, 255, 0.98);
  font-size: clamp(27px, 7vw, 38px);
  line-height: 1.08;
  font-weight: 560;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.chatInfoHero p {
  margin: 0;
  color: rgba(171, 181, 195, 0.88);
  font-size: 17px;
  line-height: 1.3;
}

.chatInfoActionGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 10px;
  margin: 2px 0 24px;
}

.chatInfoActionForm {
  margin: 0;
}

.chatInfoActionCard {
  width: 100%;
  min-height: 76px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  border-radius: 16px;
  border: 0;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(245, 248, 252, 0.96);
  text-decoration: none;
  font-size: 14px;
  font-weight: 760;
  cursor: pointer;
}

.chatInfoActionCard:hover,
.chatInfoActionCard:focus-visible {
  border-color: rgba(43, 213, 118, 0.26);
  background: rgba(43, 213, 118, 0.08);
  outline: none;
  text-decoration: none;
}

.chatInfoActionIcon {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  color: rgba(43, 213, 118, 0.98);
  background: transparent;
  font-size: 14px;
  font-weight: 900;
}

.chatInfoActionIcon svg,
.chatInfoRowIcon svg {
  width: 22px;
  height: 22px;
}

.chatInfoInlineNotice {
  margin: 0 0 12px;
}

.chatInfoNotice,
.chatInfoStatusCard {
  margin: 0 0 18px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(238, 243, 250, 0.94);
}

.chatInfoNotice {
  display: grid;
  gap: 8px;
}

.chatInfoNotice strong,
.chatInfoStatusCard strong {
  font-size: 15px;
  font-weight: 820;
}

.chatInfoNotice span,
.chatInfoStatusCard span {
  color: rgba(184, 195, 210, 0.78);
  font-size: 13px;
  line-height: 1.35;
}

.chatInfoNoticeActions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.chatInfoInlineAction {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(245, 248, 252, 0.95);
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.chatInfoInlineAction.is-danger,
.chatInfoInlineAction:hover,
.chatInfoInlineAction:focus-visible {
  text-decoration: none;
}

.chatInfoInlineAction:hover,
.chatInfoInlineAction:focus-visible {
  border-color: rgba(43, 213, 118, 0.22);
  background: rgba(43, 213, 118, 0.08);
  outline: none;
}

.chatInfoInlineAction.is-danger {
  color: rgba(255, 104, 104, 0.98);
}

.chatInfoSection {
  margin: 0 0 18px;
  padding: 4px 0;
}

.chatInfoSectionTitle {
  padding: 7px 2px 8px;
  color: rgba(171, 181, 195, 0.7);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0;
}

.chatInfoRow {
  width: 100%;
  min-height: 60px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  background: transparent;
  color: rgba(245, 248, 252, 0.96);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.chatInfoRow:last-child {
  border-bottom: 0;
}

.chatInfoRow:hover,
.chatInfoRow:focus-visible {
  background: rgba(255, 255, 255, 0.035);
  outline: none;
  text-decoration: none;
}

.chatInfoRowIcon {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  color: rgba(177, 187, 202, 0.9);
  background: transparent;
  font-size: 13px;
  font-weight: 900;
}

.chatInfoRowBody {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.chatInfoRowBody strong {
  min-width: 0;
  color: rgba(248, 250, 255, 0.98);
  font-size: 16px;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chatInfoRowBody small {
  min-width: 0;
  color: rgba(169, 181, 197, 0.74);
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.chatInfoRowValue,
.chatInfoChevron {
  color: rgba(169, 181, 197, 0.76);
  font-size: 14px;
}

.chatInfoChevron {
  font-size: 28px;
  line-height: 1;
}

.chatInfoRow.is-selected .chatInfoRowBody strong,
.chatInfoRow.is-selected .chatInfoRowValue {
  color: rgba(43, 213, 118, 0.98);
}

.chatInfoRow.is-danger .chatInfoRowIcon {
  color: rgba(255, 104, 104, 0.98);
  background: rgba(255, 104, 104, 0.09);
}

.chatInfoRow.is-danger .chatInfoRowBody strong,
.chatInfoRow.is-danger .chatInfoChevron {
  color: rgba(255, 104, 104, 0.98);
}

.chatInfoMediaGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 10px 2px 2px 56px;
}

.chatInfoMediaGrid a {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.045);
}

.chatInfoMediaGrid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.chatInfoMemberList {
  display: grid;
  gap: 4px;
  padding: 4px 0 0;
}

.chatInfoMemberRow {
  min-height: 48px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 6px 2px 6px 56px;
  color: rgba(245, 248, 252, 0.95);
  text-decoration: none;
}

.chatInfoMemberRow:hover,
.chatInfoMemberRow:focus-visible {
  background: rgba(255, 255, 255, 0.035);
  outline: none;
  text-decoration: none;
}

.chatInfoMemberRow img,
.chatInfoMemberRow > span:first-child {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.055);
  color: rgba(245, 248, 252, 0.95);
  font-size: 13px;
  font-weight: 850;
}

.chatInfoMemberRow strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 700;
}

.chatInfoMemberRow small {
  color: rgba(169, 181, 197, 0.7);
  font-size: 12px;
  font-weight: 750;
}

@media (max-width: 560px) {
  .chatInfoPage {
    padding-left: 16px;
    padding-right: 16px;
  }

  .chatInfoAvatar {
    width: 116px;
    height: 116px;
  }

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

  .chatInfoMediaGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-left: 0;
  }

  .chatInfoMemberRow {
    padding-left: 2px;
  }
}

.dmChatInfoScreen {
  background: #05070b;
}

.dmChatInfoScreen .chatInfoPage {
  width: min(100%, 540px);
  padding: calc(6px + env(safe-area-inset-top)) 16px calc(var(--nav-height) + 18px + env(safe-area-inset-bottom));
}

.dmChatInfoScreen .chatInfoTopBar {
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0 0 6px;
}

.dmChatInfoScreen .chatInfoTopTitle,
.dmChatInfoScreen .chatInfoTopSpacer {
  display: none;
}

.dmChatInfoScreen .chatInfoBack {
  width: 36px;
  height: 36px;
  margin-left: -8px;
  border-radius: 0;
  background: transparent;
}

.dmChatInfoScreen .chatInfoBack:hover,
.dmChatInfoScreen .chatInfoBack:focus-visible {
  background: transparent;
  color: #fff;
}

.dmChatInfoScreen .chatInfoBack svg {
  width: 25px;
  height: 25px;
}

.dmChatInfoScreen .chatInfoHero {
  gap: 8px;
  padding: 8px 0 20px;
}

.dmChatInfoScreen .chatInfoAvatar {
  width: 96px;
  height: 96px;
}

.dmChatInfoScreen .chatInfoAvatar.is-fallback {
  font-size: 40px;
}

.dmChatInfoScreen .chatInfoHero h1 {
  max-width: 100%;
  margin: 0;
  font-size: 22px;
  line-height: 1.16;
  font-weight: 700;
}

.dmChatInfoScreen .chatInfoHero p,
.dmChatInfoScreen .chatInfoActionGrid,
.dmChatInfoScreen .chatInfoSectionTitle,
.dmChatInfoScreen .chatInfoRowBody small {
  display: none;
}

.dmChatInfoScreen .chatInfoInlineNotice {
  margin: 0 0 8px;
}

.dmChatInfoScreen .chatInfoNotice {
  margin: 0 0 10px;
  padding: 10px 0;
  border-radius: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: transparent;
}

.dmChatInfoScreen .chatInfoNotice strong {
  font-size: 14px;
  font-weight: 620;
}

.dmChatInfoScreen .chatInfoNotice > span {
  display: none;
}

.dmChatInfoScreen .chatInfoNoticeActions {
  gap: 6px;
  margin-top: 0;
}

.dmChatInfoScreen .chatInfoInlineAction {
  min-height: 30px;
  padding: 0 10px;
  border-color: rgba(255, 255, 255, 0.1);
  background: transparent;
  font-size: 13px;
  font-weight: 650;
}

.dmChatInfoScreen .chatInfoSection {
  margin: 0;
  padding: 0;
  border-top: 8px solid rgba(255, 255, 255, 0.025);
}

.dmChatInfoScreen .chatInfoHero + .chatInfoSection,
.dmChatInfoScreen .chatInfoNotice + .chatInfoSection {
  border-top-width: 0;
}

.dmChatInfoScreen .chatInfoRow {
  min-height: 50px;
  grid-template-columns: 32px minmax(0, 1fr) auto auto;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.065);
  background: transparent;
}

.dmChatInfoScreen .chatInfoRow:hover,
.dmChatInfoScreen .chatInfoRow:focus-visible {
  background: transparent;
}

.dmChatInfoScreen .chatInfoSection > form:last-child .chatInfoRow,
.dmChatInfoScreen .chatInfoSection > .chatInfoRow:last-child {
  border-bottom: 0;
}

.dmChatInfoScreen .chatInfoRowIcon {
  width: 30px;
  height: 30px;
  color: rgba(226, 232, 241, 0.84);
  background: transparent;
}

.dmChatInfoScreen .chatInfoActionIcon svg,
.dmChatInfoScreen .chatInfoRowIcon svg {
  width: 20px;
  height: 20px;
}

.dmChatInfoScreen .chatInfoRowBody {
  display: block;
}

.dmChatInfoScreen .chatInfoRowBody strong {
  font-size: 15px;
  line-height: 1.25;
  font-weight: 540;
}

.dmChatInfoScreen .chatInfoRowValue {
  font-size: 13px;
  color: rgba(176, 185, 198, 0.72);
}

.dmChatInfoScreen .chatInfoChevron {
  font-size: 24px;
  color: rgba(176, 185, 198, 0.58);
}

.dmChatInfoScreen .chatInfoRow.is-danger .chatInfoRowIcon {
  color: rgba(255, 94, 94, 0.98);
  background: transparent;
}

.dmChatInfoScreen .chatInfoRow.is-danger .chatInfoRowBody strong,
.dmChatInfoScreen .chatInfoRow.is-danger .chatInfoChevron {
  color: rgba(255, 94, 94, 0.98);
}

.dmChatInfoScreen .chatInfoMuteForm[data-busy="true"] .chatInfoRow {
  opacity: 0.7;
}

.dmChatInfoScreen .chatInfoMediaGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  padding: 8px 0 0;
}

.dmChatInfoScreen .chatInfoMediaGrid a {
  border-radius: 2px;
}

@media (min-width: 561px) {
  .dmChatInfoScreen .chatInfoPage {
    padding-left: 18px;
    padding-right: 18px;
  }
}

.dmInfoAction:hover,
.dmInfoAction:focus-visible {
  color: rgba(122, 212, 255, 0.95);
  text-decoration: none;
  outline: none;
}

.dmInfoAction.is-danger {
  color: rgba(255, 104, 104, 0.96);
}

.dockItem {
  position: relative;
}

.dockBadge {
  position: absolute;
  top: 5px;
  right: 18%;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: #2f80ff;
  color: #fff;
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
  box-shadow: 0 0 0 2px rgba(7, 10, 15, 0.95);
}

.dmChatRequestCopy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dmChatRequestCopy strong {
  font-size: 13px;
  color: rgba(245, 248, 252, 0.98);
}

.dmChatRequestCopy span {
  font-size: 12px;
  line-height: 1.4;
  color: rgba(201, 210, 223, 0.78);
}

.dmChatStream {
  flex: 1;
  overflow-y: auto;
  padding: 16px 14px 20px;
  gap: 10px;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
  background:
    radial-gradient(circle at top, rgba(122, 212, 255, 0.05), transparent 36%),
    linear-gradient(180deg, rgba(7, 10, 15, 0.94), rgba(5, 7, 11, 0.98));
}

.dmMessageRow {
  align-items: flex-end;
}

.dmBubble {
  max-width: min(84%, 340px);
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(244, 248, 252, 0.96);
  box-shadow: 0 10px 22px rgba(2, 6, 12, 0.22);
}

.dmChatStream .chat-row.player .dmBubble {
  border-color: rgba(122, 212, 255, 0.28);
  border-radius: 18px 18px 6px 18px;
  background: linear-gradient(180deg, rgba(32, 109, 255, 0.3), rgba(32, 109, 255, 0.18));
}

.dmChatStream .chat-row.other .dmBubble,
.dmChatStream .chat-row.admin .dmBubble {
  border-radius: 18px 18px 18px 6px;
  background: rgba(255, 255, 255, 0.05);
}

.dmBubbleBody {
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.dmBubbleImage {
  margin-top: 8px;
}

.dmMediaOpen {
  display: block;
  width: auto;
  max-width: 100%;
  margin: 8px 0 0;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  overflow: hidden;
}

.dmMediaOpen:first-child {
  margin-top: 0;
}

.dmMediaOpen:focus-visible {
  outline: 2px solid rgba(122, 212, 255, 0.6);
  outline-offset: 2px;
}

.dmBubble.is-media-only {
  padding: 0;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.dmBubbleImage img {
  display: block;
  width: auto;
  max-width: min(240px, 100%);
  max-height: 320px;
  border-radius: 14px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.dmBubbleMeta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
  font-size: 11px;
  color: rgba(221, 228, 237, 0.72);
}

.dmBubbleStatus {
  font-weight: 700;
  color: rgba(147, 197, 253, 0.96);
}

.dmComposer {
  position: sticky;
  bottom: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  border-top: 0;
  background:
    linear-gradient(180deg, rgba(7, 10, 15, 0.72), rgba(5, 7, 11, 0.97));
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.dmComposerPreview {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}

.dmComposerPreviewThumbWrap {
  width: 46px;
  height: 46px;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}

.dmComposerPreviewThumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dmComposerPreviewMeta {
  min-width: 0;
}

.dmComposerPreviewLabel {
  font-size: 12px;
  font-weight: 700;
  color: rgba(245, 248, 252, 0.96);
}

.dmComposerPreviewName {
  margin-top: 4px;
  font-size: 12px;
  color: rgba(201, 210, 223, 0.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dmComposerPreviewClear {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  cursor: pointer;
}

.dmComposerField {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 5px 5px 5px 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(17, 19, 24, 0.96);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 8px 18px rgba(0, 0, 0, 0.16);
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

/* dmComposerField lays out three columns -- attach | input | send -- because
   the DM composer has a photo button. A composer without one fills only two of
   them, so the text input landed in the leading auto column, sized to its
   content instead of expanding, and the send button was stretched across the
   1fr. Two children need two columns. Event and community chat are text only
   (EventChatMessage has just a body column), so they opt into this. */
.dmComposerField.is-textOnly {
  grid-template-columns: minmax(0, 1fr) auto;
}

.dmComposerField:focus-within {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(20, 23, 29, 0.98);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 8px 18px rgba(0, 0, 0, 0.18);
}

.dmAttachBtn,
.dmSendBtn {
  width: 34px;
  height: 34px;
  min-height: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  transition: color 150ms ease, background 150ms ease, opacity 150ms ease, transform 120ms ease;
}

.dmAttachBtn {
  background: rgba(242, 247, 255, 0.98);
  color: #58a8ff;
}

.dmSendBtn {
  background: transparent;
  color: rgba(242, 247, 255, 0.42);
  opacity: 0.72;
}

.dmComposerField .dmAttachBtn:hover,
.dmComposerField .dmAttachBtn:focus-visible {
  border-color: transparent;
  background: #fff;
  box-shadow: none;
  color: #4a9dff;
  outline: none;
  transform: none;
}

.dmComposerField .dmSendBtn:hover,
.dmComposerField .dmSendBtn:focus-visible {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: rgba(242, 247, 255, 0.42);
  outline: none;
  transform: none;
}

.dmComposerField .dmAttachBtn:active,
.dmComposerField .dmSendBtn:active {
  transform: scale(0.96);
}

.dmComposer.has-draft .dmSendBtn {
  background: #4a9dff;
  color: #fff;
  opacity: 1;
}

.dmComposer.has-draft .dmSendBtn:hover,
.dmComposer.has-draft .dmSendBtn:focus-visible {
  background: #5babff;
  color: #fff;
}

.dmComposer.is-disabled .dmAttachBtn,
.dmComposer.is-disabled .dmSendBtn,
.dmComposerField .dmSendBtn:disabled {
  background: transparent;
  color: rgba(242, 247, 255, 0.24);
  cursor: default;
  opacity: 0.6;
}

.dmComposer.is-disabled .dmAttachBtn {
  background: rgba(242, 247, 255, 0.18);
  pointer-events: none;
}

.dmComposer.is-disabled .dmSendBtn:hover,
.dmComposer.is-disabled .dmSendBtn:focus-visible,
.dmComposerField .dmSendBtn:disabled:hover,
.dmComposerField .dmSendBtn:disabled:focus-visible {
  background: transparent;
  color: rgba(242, 247, 255, 0.24);
  transform: none;
}

.dmComposerField input[type="text"] {
  min-width: 0;
  min-height: 34px;
  padding: 0 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(245, 248, 252, 0.96);
  font-size: 14px;
  line-height: 1.35;
}

.dmComposerField input[type="text"]:focus {
  outline: none;
  border-color: transparent;
  box-shadow: none;
}

.dmComposerField input[type="text"]::placeholder {
  color: rgba(214, 220, 232, 0.58);
}

.dmComposerStatus {
  min-height: 0;
  padding: 0 12px;
  font-size: 12px;
  line-height: 16px;
  color: rgba(201, 210, 223, 0.68);
}

.dmComposerStatus:not(:empty) {
  min-height: 16px;
}

.dmComposerStatus.is-error {
  color: #fca5a5;
}

/* Comms refresh */
body.comms-mode .pageHeader { display: none; }
body.comms-mode .content { padding-top: 0; }

.comms-shell {
  min-height: calc(100vh - var(--nav-height) - 24px);
  max-height: none;
  border-radius: 0;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
}

.commsTopBar {
  position: sticky;
  top: 0;
  z-index: 6;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  background: rgba(10, 14, 20, 0.94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}
.commsTopTitle { font-size: 16px; font-weight: 800; letter-spacing: 0.02em; }
.commsTopSearch input {
  min-height: 40px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 10px 14px;
}

@media (max-width: 640px) {
  .commsInboxPage {
    gap: 12px;
    padding-top: 8px;
  }

  .commsFlat.dmInboxPage {
    gap: 0;
  }

  .commsFlatRow {
    grid-template-columns: 46px minmax(0, 1fr);
    padding-left: 14px;
    padding-right: 14px;
  }

  .commsFlatRequest {
    padding-left: 14px;
    padding-right: 14px;
  }

  .commsInboxSurface,
  .commsDistrictSection {
    border-radius: 20px;
  }

  .commsInboxSectionHead,
  .commsInboxRow,
  .commsDistrictRow,
  .commsInboxEmpty {
    padding-left: 14px;
    padding-right: 14px;
  }

  .commsInboxAvatar,
  .commsDistrictAvatar {
    width: 46px;
    height: 46px;
  }

  .commsFlat .commsInboxAvatar,
  .commsFlat .commsDistrictAvatarFlat {
    width: 46px;
    height: 46px;
  }

  .commsFlat .commsAvatarWrap {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
  }

  /* The DM inbox keeps its full-size avatar on narrow screens. This block
     otherwise wins on source order over the .dmInboxPage sizing and squashed
     the row to 46px, which is smaller than the surrounding chat apps and
     leaves the two text lines looking unanchored. */
  .dmInboxPage.commsFlat .commsInboxAvatar,
  .dmInboxPage .commsFlat .commsInboxAvatar,
  .dmInboxPage .commsFlatRow .commsInboxAvatar,
  .dmInboxPage .commsFlatRow .commsDistrictAvatarFlat {
    width: 56px;
    height: 56px;
  }

  .dmInboxPage.commsFlat .commsAvatarWrap,
  .dmInboxPage .commsFlat .commsAvatarWrap,
  .dmInboxPage .commsAvatarWrap {
    width: 56px;
    height: 56px;
    flex-basis: 56px;
  }

  .commsInboxName {
    font-size: 15px;
  }

  .dmActionCard {
    flex-direction: column;
    align-items: stretch;
    padding-left: 14px;
    padding-right: 14px;
  }

  .dmActionButtons {
    justify-content: flex-start;
  }

  .dmChatSurface {
    min-height: calc(100svh - var(--nav-height) - 124px);
    border-radius: 20px;
  }

  .dmChatHeader {
    padding: 12px 14px;
  }

  .dmChatStream {
    padding: 14px 12px 18px;
  }

  .dmBubble {
    max-width: 88%;
  }
}
.commsTopMenu { justify-self: end; }
.commsMenuBtn {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
  font-size: 16px;
  padding: 0;
}
.commsMenu { min-width: 200px; }

.commsTabs {
  display: flex;
  gap: 8px;
  padding: 10px 16px 6px;
  border-bottom: 1px solid var(--line);
  background: rgba(5, 7, 12, 0.4);
}
.comms-tab {
  width: auto;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 0.03em;
}
.comms-tab.active {
  border-color: rgba(98, 245, 210, 0.35);
  background: rgba(98, 245, 210, 0.12);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.comms-body { flex: 1; overflow: hidden; }
.commsLayout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
  min-height: calc(100vh - var(--nav-height) - 120px);
}
.commsList {
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  padding: 14px 12px;
  background: rgba(10, 14, 20, 0.4);
  overflow: auto;
}
.commsList .dm-row {
  background: transparent;
  border-color: transparent;
  padding: 10px 8px;
}
.commsList .dm-row:hover {
  border-color: rgba(98, 245, 210, 0.2);
  background: rgba(98, 245, 210, 0.06);
  text-decoration: none;
}
.commsListHeader {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.commsRow {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.commsRow.is-active {
  border-color: rgba(98, 245, 210, 0.2);
  background: rgba(98, 245, 210, 0.08);
}
.commsRowAvatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  font-weight: 700;
}
.commsRowMain { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.commsRowTop { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.commsRowName { font-weight: 700; }
.commsRowTime { font-size: 12px; color: var(--muted); }
.commsRowPreview {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.commsChat {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: rgba(5, 8, 12, 0.35);
}
.commsChatHeader {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.commsChatTitle { font-size: 15px; font-weight: 700; }
.commsInfoBtn {
  width: 36px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  text-decoration: none;
  font-size: 12px;
  display: grid;
  place-items: center;
}
.commsBackBtn {
  display: none;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.commsChatBody {
  flex: 1;
  padding: 12px 14px 60px;
  overflow: auto;
}
.commsChat .chat-list,
.commsChat .global-list {
  flex: 1;
  overflow: auto;
  padding: 12px 14px 80px;
}
.commsChat .bubble { box-shadow: none; }

.comms-input-rail {
  position: sticky;
  bottom: 0;
  padding: 10px 12px 12px;
  background: rgba(5, 8, 12, 0.85);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.comms-input-rail .message-input,
.comms-input-rail .global-input {
  display: flex;
  gap: 8px;
  align-items: center;
}
.comms-input-rail input {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 999px;
}
.comms-input-rail button {
  width: auto;
  min-width: 86px;
  border-radius: 999px;
}

@media (max-width: 900px) {
  .commsLayout { grid-template-columns: 1fr; }
  .commsList { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
  .commsBackBtn { display: inline-flex; }
  .comms-panel[data-mobile-view="list"] .commsChat { display: none; }
  .comms-panel[data-mobile-view="chat"] .commsList { display: none; }
}

:root { --dock-bg: rgba(10, 12, 16, 0.9); --dock-border: rgba(255, 255, 255, 0.06); --dock-text: rgba(255, 255, 255, 0.48); --dock-icon: rgba(255, 255, 255, 0.6); }
.appFrame, .appShell, .app-shell, .phoneFrame, .containerApp { position: relative; }
.appUtilityBar {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 12px);
  right: max(12px, calc((100vw - var(--page-max)) / 2 + 12px));
  z-index: 42;
  display: flex;
  align-items: center;
  gap: 8px;
}

.appUtilityWrap {
  position: relative;
}

.appUtilityBtn {
  position: relative;
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(10, 14, 20, 0.9);
  color: var(--text);
  display: inline-grid;
  place-items: center;
  text-decoration: none;
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

.appUtilityBtn:hover {
  text-decoration: none;
  transform: translateY(-1px);
}

.appUtilityBtn.is-active {
  border-color: rgba(122, 212, 255, 0.38);
  background: rgba(122, 212, 255, 0.14);
}

.appUtilityIcon {
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
}

.appUtilityIcon svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.appUtilityBadge {
  position: absolute;
  top: -5px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  letter-spacing: 0.02em;
}

.appUtilityPanel {
  position: absolute;
  top: 42px;
  right: 0;
  width: min(320px, calc(100vw - 24px));
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(10, 14, 20, 0.96);
  backdrop-filter: blur(18px);
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.34);
}

.appUtilityPanelHead,
.appUtilityItemTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.appUtilityPanelTitle {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.appUtilityPanelAction,
.appUtilityFooterLink {
  font-size: 11px;
  color: var(--text);
  text-decoration: none;
  border: none;
  background: transparent;
  padding: 0;
}

.appUtilityPanelAction {
  cursor: pointer;
}

.appUtilityEmpty {
  padding: 10px 2px 4px;
  color: var(--muted);
  font-size: 12px;
}

.appUtilityList {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.appUtilityItem {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 9px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.03);
  text-decoration: none;
  color: var(--text);
}

.appUtilityItem:hover {
  text-decoration: none;
  border-color: rgba(122, 212, 255, 0.18);
}

.appUtilityItemLabel {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.appUtilityItemTime {
  font-size: 10px;
  color: rgba(193, 202, 214, 0.68);
}

.appUtilityItemBody {
  font-size: 12px;
  line-height: 1.35;
  color: rgba(241, 246, 252, 0.92);
}

.appUtilityFooterLink {
  display: inline-flex;
  margin-top: 8px;
}

.headerUtilityBar {
  position: absolute;
  top: 50%;
  right: 44px;
  transform: translateY(-50%);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.headerUtilityBtn {
  position: relative;
  width: 22px;
  min-width: 22px;
  height: 22px;
  min-height: 22px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  display: inline-grid;
  place-items: center;
  text-decoration: none;
}

.headerUtilityBtn:hover {
  text-decoration: none;
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
}

.headerUtilityBtn.is-active {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
}

.headerUtilityIcon {
  width: 13px;
  height: 13px;
  display: grid;
  place-items: center;
}

.headerUtilityIcon svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
}

.headerUtilityBadge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 12px;
  height: 12px;
  padding: 0 2px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  line-height: 12px;
  text-align: center;
  letter-spacing: 0.02em;
}

.headerUtilityPanel {
  top: calc(100% + 10px);
  right: -6px;
}

.dock { position: sticky; bottom: 0; left: 0; right: 0; height: var(--nav-height); display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; gap: 6px; background: var(--dock-bg); border-top: 1px solid var(--dock-border); padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); backdrop-filter: blur(14px); box-shadow: none; z-index: 30; }
.dockItem { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; color: var(--dock-text); opacity: 0.78; border-radius: 10px; transition: transform 140ms ease, color 160ms ease, background 160ms ease, box-shadow 200ms ease; user-select: none; }
.dockIcon { width: 22px; height: 22px; display: grid; place-items: center; margin-bottom: 2px; }
.dockIcon svg { width: 22px; height: 22px; fill: var(--dock-icon); transition: filter 200ms ease, fill 200ms ease, transform 150ms ease; }
.dockLabel { font-size: 10px; letter-spacing: 0.08em; opacity: 0.65; text-transform: uppercase; }
.dockItem:active { transform: translateY(0) scale(0.98); }
.dockItem.is-navigating,
.dockItem.tap-active {
  transform: translateY(0) scale(0.97);
  background: rgba(122, 212, 255, 0.14);
}
.dockItem:hover { transform: translateY(-1px); }
.dockItem.isActive { color: rgba(255, 255, 255, 0.94); background: rgba(122, 212, 255, 0.12); box-shadow: none; opacity: 1; }
.dockItem.is-active { color: rgba(255, 255, 255, 0.94); background: rgba(122, 212, 255, 0.12); box-shadow: none; opacity: 1; }
.dockItem.isActive .dockIcon svg { fill: var(--accent); filter: none; transform: translateY(-1px) scale(1.03); }
.dockItem.is-active .dockIcon svg { fill: var(--accent); filter: none; transform: translateY(-1px) scale(1.03); }
.dockItem.dockItem--primary:not(.isActive):not(.is-active) {
  opacity: 0.9;
}
.dockItem.dockItem--primary .dockIcon {
  width: 24px;
  height: 24px;
}
.dockItem.dockItem--primary .dockIcon svg {
  width: 24px;
  height: 24px;
}
.dockItem.dockItem--primary:not(.isActive):not(.is-active) .dockLabel {
  opacity: 0.78;
  font-weight: 700;
}
.dockItem.isDisabled { opacity: 0.35; pointer-events: none; filter: grayscale(1); }
@media (max-width: 480px) { .dockLabel { display: none; } :root { --nav-height: 56px; } }
@media (min-width: 768px) { :root { --nav-height: 64px; } }

:root { --file-bg: var(--bg); --file-panel: var(--panel-soft); --file-ink: var(--ink); --file-muted: var(--muted); --file-line: var(--line); --file-accent: var(--neon); }
body.filePage { background: radial-gradient(1200px 900px at 30% 0%, rgba(98, 245, 210, 0.08), transparent 60%), var(--file-bg); color: var(--file-ink); min-height: 100vh; }
.fileShell { position: relative; min-height: 100vh; padding: 16px 12px 112px; display: flex; justify-content: center; }
.fileContainer { width: 100%; max-width: 640px; display: flex; flex-direction: column; gap: 12px; }
.fileHeader, .fileSection { background: var(--file-panel); border: 1px solid var(--file-line); border-radius: 16px; padding: 16px; box-shadow: var(--shadow); }
.fileHeaderTop { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--file-line); }
.fileTag { font-family: "SFMono-Regular","Consolas","Liberation Mono",monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--file-muted); }
.fileActions { display: flex; gap: 6px; }
.fileCard { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.fileAvatar { width: 140px; height: 140px; background: #0f121a; border: 1px solid var(--file-line); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), inset 0 -8px 16px rgba(0, 0, 0, 0.45), 0 16px 28px rgba(0, 0, 0, 0.32); overflow: hidden; border-radius: 12px; }
.fileAvatar img, .fileAvatar span { width: 100%; height: 100%; object-fit: cover; display: grid; place-items: center; color: var(--file-muted); letter-spacing: 0.18em; font-size: 18px; }
.fileIdentity { display: flex; flex-direction: column; gap: 8px; }
.fileHandleRow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.fileHandle { font-size: 20px; letter-spacing: 0.04em; }
.fileStatusPill { font-family: "SFMono-Regular","Consolas","Liberation Mono",monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; padding: 4px 10px; border: 1px solid rgba(98, 245, 210, 0.3); color: var(--file-accent); background: rgba(98, 245, 210, 0.08); }
.fileLabelRow { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13px; border-bottom: 1px solid var(--file-line); padding: 8px 0; }
.fileLabel { font-family: "SFMono-Regular","Consolas","Liberation Mono",monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--file-muted); }
.fileValue { color: var(--file-ink); letter-spacing: 0.04em; }
.fileNote { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.fileNoteText { font-size: 14px; line-height: 1.5; color: var(--file-muted); min-height: 42px; padding: 12px; border: 1px dashed var(--file-line); background: rgba(255, 255, 255, 0.02); }
.fileStatsRow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--file-line); border-radius: 12px; overflow: hidden; }
.statItem { padding: 12px; text-align: center; border-right: 1px solid var(--file-line); }
.statItem:last-child { border-right: none; }
.statLabel { display: block; font-family: "SFMono-Regular","Consolas","Liberation Mono",monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--file-muted); }
.statValue { display: block; margin-top: 6px; font-size: 16px; letter-spacing: 0.04em; }
.fileSection { border-left: 2px solid rgba(255, 255, 255, 0.06); }
.fileArchive { padding-top: 4px; display: flex; flex-direction: column; gap: 6px; }
.logEntry { padding: 8px 4px; border-bottom: 1px solid var(--file-line); }
.logMeta { display: flex; justify-content: space-between; gap: 10px; font-family: "SFMono-Regular","Consolas","Liberation Mono",monospace; font-size: 11px; letter-spacing: 0.1em; color: var(--file-muted); }
.entryText { margin-top: 6px; font-size: 13px; color: var(--file-ink); }
.entryImg { width: 100%; margin-top: 8px; border: 1px solid var(--file-line); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4); border-radius: 10px; }
.fileEmpty { font-family: "SFMono-Regular","Consolas","Liberation Mono",monospace; font-size: 11px; letter-spacing: 0.05em; color: var(--file-muted); padding: 6px 2px; }
.fileFeed { display: flex; flex-direction: column; gap: 10px; }
.feedEntry { padding: 10px 2px; border-bottom: 1px solid var(--file-line); }
.feedMeta { display: flex; justify-content: space-between; font-family: "SFMono-Regular","Consolas","Liberation Mono",monospace; font-size: 11px; letter-spacing: 0.08em; color: var(--file-muted); }
.feedImg { width: 100%; margin-top: 8px; border-radius: 10px; border: 1px solid var(--file-line); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.36); }
.feedText { margin-top: 8px; font-size: 13px; color: var(--file-ink); line-height: 1.5; }
.fileForm { display: flex; flex-direction: column; gap: 10px; }
.fileForm label { font-family: "SFMono-Regular","Consolas","Liberation Mono",monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--file-muted); }
.fileForm input, .fileForm textarea { background: var(--panel-muted); border: 1px solid var(--file-line); border-radius: 10px; padding: 12px; color: var(--file-ink); }
.fileForm textarea { min-height: 96px; resize: vertical; }
.fileForm input:focus, .fileForm textarea:focus { outline: none; border-color: rgba(98, 245, 210, 0.3); box-shadow: 0 0 0 2px rgba(98, 245, 210, 0.12); }
body.filePage .miniBtn { height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--file-line); background: rgba(255, 255, 255, 0.04); color: var(--file-ink); font-family: "SFMono-Regular","Consolas","Liberation Mono",monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; opacity: 0.85; }
body.filePage .miniBtn:hover { opacity: 1; }
body.filePage .miniBtn.subtle { background: rgba(255, 255, 255, 0.02); }
body.filePage .primaryBtn { height: 44px; border-radius: 10px; border: 1px solid var(--file-line); background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%); color: var(--file-ink); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
@media (min-width: 720px) { .fileCard { flex-direction: row; align-items: flex-start; } .fileAvatar { width: 120px; height: 120px; } .fileShell { padding: 18px 12px 124px; } }

.lb-shell { padding: 16px 16px 28px; }
.lb-list { display: flex; flex-direction: column; gap: 0; }
.lb-card {
  --lb-accent-rgb: 61, 214, 160;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 18px 4px;
  background:
    radial-gradient(circle at 92% 50%, rgba(var(--lb-accent-rgb), 0.11), transparent 34%),
    linear-gradient(90deg, rgba(var(--lb-accent-rgb), 0) 52%, rgba(var(--lb-accent-rgb), 0.046) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.022), rgba(255, 255, 255, 0.012));
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.lb-card::after {
  content: "";
  position: absolute;
  left: 78px;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
}
.lb-card:last-child::after,
.lb-card--empty::after,
.lb-card--viewer::after {
  display: none;
}
.lb-card--podium {
  padding-top: 20px;
  padding-bottom: 20px;
}
.lb-card--podium-1 {
  --lb-accent-rgb: 214, 176, 86;
}
.lb-card--podium-2 {
  --lb-accent-rgb: 176, 186, 201;
}
.lb-card--podium-3 {
  --lb-accent-rgb: 168, 120, 92;
}
.lb-card--viewer {
  --lb-accent-rgb: 61, 214, 160;
  margin-top: 4px;
  padding: 18px 14px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 92% 50%, rgba(var(--lb-accent-rgb), 0.14), transparent 34%),
    linear-gradient(90deg, rgba(var(--lb-accent-rgb), 0) 50%, rgba(var(--lb-accent-rgb), 0.064) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.038), rgba(255, 255, 255, 0.016));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.lb-card--viewer.lb-card--podium-1 {
  --lb-accent-rgb: 214, 176, 86;
}
.lb-card--viewer.lb-card--podium-2 {
  --lb-accent-rgb: 176, 186, 201;
}
.lb-card--viewer.lb-card--podium-3 {
  --lb-accent-rgb: 168, 120, 92;
}
.lb-card--anonymous .lb-name {
  color: rgba(242, 245, 250, 0.9);
}
.lb-left { display: flex; flex-direction: column; gap: 4px; }
.lb-left,
.lb-score,
.lb-youCol {
  position: relative;
  z-index: 1;
}
.lb-rank { font-size: 12px; letter-spacing: 0.12em; color: var(--muted); text-transform: uppercase; }
.lb-name { font-size: 18px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.lb-left.lb-left--row {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.lb-rankBlock {
  min-width: 58px;
  display: grid;
  gap: 4px;
  align-items: start;
}
.lb-rankMeta {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(214, 220, 217, 0.66);
}
.lb-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lb-nameRow {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}
.lb-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.lb-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lb-avatar--anonymous {
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.08), transparent 40%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
}
.lb-avatarFallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
}
.lb-avatarMask {
  display: block;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 50% 34%, rgba(240, 245, 252, 0.88) 0 16%, transparent 17%),
    radial-gradient(circle at 50% 78%, rgba(240, 245, 252, 0.82) 0 34%, transparent 35%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  opacity: 0.7;
}
.lb-anonPill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(235, 239, 245, 0.84);
  background: rgba(255, 255, 255, 0.05);
}
.lb-youCol {
  text-align: right;
  flex-shrink: 0;
}
.lb-score {
  min-width: 74px;
  display: grid;
  gap: 1px;
  justify-items: end;
}
.lb-scoreValue {
  font-size: 26px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.05em;
  color: var(--ink);
}
.lb-card--podium .lb-scoreValue,
.lb-card--viewer .lb-scoreValue {
  text-shadow: 0 0 18px rgba(var(--lb-accent-rgb), 0.16);
}
.lb-scoreLabel {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.lb-card.lb-card--empty {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
  background: transparent;
}
.lb-card.lb-card--empty .lb-name {
  font-weight: 600;
  font-size: 15px;
  color: var(--muted);
}
.lb-rank.lb-rank--muted {
  text-transform: none;
  letter-spacing: 0.04em;
}
.lb-rank.lb-rank--col {
  min-width: 0;
  font-size: 22px;
  line-height: 1;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.04em;
  text-transform: none;
}
.lb-titleRow {
  margin-top: 2px;
}
.lb-titlePill {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(240, 245, 252, 0.9);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.lb-lede {
  font-size: 13px;
  margin: 0 0 14px;
  line-height: 1.5;
}
.pill.me { background: rgba(98, 245, 210, 0.12); border-color: rgba(98, 245, 210, 0.5); color: var(--ink); }

.section { padding: 14px; }
.member-list { display: flex; flex-direction: column; gap: 10px; }
.member-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-muted); }
.member-name { font-weight: 700; color: var(--ink); font-size: 15px; }
.member-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.role-pill { padding: 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: var(--ink); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid var(--line); }
.role-pill.soft { background: rgba(255, 255, 255, 0.03); color: var(--muted); }
.role-pill.soft { background: rgba(255, 255, 255, 0.03); color: var(--muted); }
.peopleSearchPanel {
  padding: 0 0 6px;
}
.peopleSearchForm {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}
.peopleSearchForm input {
  width: 100%;
}
.peopleDiscovery {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 18px;
}
.peopleSection {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.peopleSectionHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.peopleEmpty {
  margin: 0;
  padding: 12px 2px;
}
.peopleEntityList {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}
.peopleEntityRow {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 74px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-muted);
}
.peopleEntityAvatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  overflow: hidden;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}
.peopleEntityRow--user .peopleEntityAvatar {
  border-radius: 50%;
}
.peopleEntityAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.peopleEntityMain {
  min-width: 0;
}
.peopleEntityTitleLine {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.peopleEntityTitle {
  min-width: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
}
.peopleEntityTitle:hover {
  text-decoration: underline;
}
.peopleVerified {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #7ad4ff;
  box-shadow: 0 0 0 2px rgba(122, 212, 255, 0.18);
}
.peopleKind {
  flex: 0 0 auto;
  padding: 3px 6px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(232, 238, 248, 0.72);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}
.peopleEntityMeta,
.peopleEntityStats {
  margin-top: 3px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}
.peopleEntityStats {
  color: rgba(198, 208, 222, 0.78);
}
.peopleEntityActions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  max-width: 160px;
}
.peopleEntityActionForm {
  margin: 0;
}
.peopleEntityOpen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 12px;
  text-decoration: none;
}
@media (max-width: 560px) {
  .peopleEntityList {
    grid-template-columns: minmax(0, 1fr);
  }
  .peopleEntityRow {
    grid-template-columns: 46px minmax(0, 1fr);
  }
  .peopleEntityAvatar {
    width: 46px;
    height: 46px;
  }
  .peopleEntityActions {
    grid-column: 2;
    justify-content: flex-start;
    max-width: none;
  }
}
.back-link { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; color: var(--text); background: rgba(255, 255, 255, 0.04); font-weight: 600; font-size: 12px; letter-spacing: 0.02em; }
.muted { color: var(--muted); }

.cityPage .app-content { padding-bottom: calc(var(--nav-height) + 8px); }
.cityTopBar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: rgba(10, 14, 20, 0.92);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}
.cityTopLeft { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cityTopTitle { font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.cityTopBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(98, 245, 210, 0.12);
  border: 1px solid rgba(98, 245, 210, 0.4);
  color: var(--ink);
  font-size: 12px;
  letter-spacing: 0.12em;
  font-weight: 700;
}
.cityTopSearch {
  position: relative;
  grid-column: 1 / -1;
}
.cityTopSearch input {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px 10px 38px;
  border-radius: 999px;
  background: rgba(18, 24, 33, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.citySearchIcon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: var(--muted);
  pointer-events: none;
}
.citySearchIcon svg {
  width: 16px;
  height: 16px;
  display: block;
}
.cityTopMenu { justify-self: end; }
.cityTopBar .headerActions {
  justify-self: end;
  grid-column: 2;
  grid-row: 1;
}
.cityMenuBtn,
.iconBtn {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  font-size: 16px;
  padding: 0;
}

.city-search { position: relative; }
.city-search input { width: 100%; box-sizing: border-box; }
.city-search-results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: var(--panel-soft); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; max-height: 280px; overflow-y: auto; z-index: 20; }
.city-search-row { display: block; padding: 10px 12px; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line); }
.city-search-row:last-child { border-bottom: none; }
.city-search-name { font-weight: 700; font-size: 14px; }
.city-search-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }

.cityContent { padding-top: 12px; }
.city-feed { display: flex; flex-direction: column; gap: 10px; }
.cityEmpty {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--shadow-soft);
}
.cityEmptyTitle { font-size: 18px; font-weight: 800; }
.cityEmptyText { color: var(--muted); font-size: 13px; }
.cityEmptyBtn { width: auto; align-self: flex-start; }

.broadcast-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow-soft);
}
.broadcast-card.is-admin {
  border-color: rgba(122, 212, 255, 0.3);
  box-shadow: 0 14px 28px rgba(122, 212, 255, 0.08);
}

.broadcast-card.is-company {
  border-color: rgba(111, 230, 200, 0.24);
}
.broadcast-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}
.broadcast-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  font-weight: 800;
  background: radial-gradient(140% 140% at 30% 20%, rgba(98, 245, 210, 0.2), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(98, 245, 210, 0.35);
  color: var(--ink);
  font-size: 12px;
  letter-spacing: 0.1em;
}
.broadcast-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cityTopSearchAuth {
  display: flex;
  justify-content: flex-end;
}
.broadcast-scope-chip {
  margin-left: 0;
}
.broadcast-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.broadcast-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.broadcast-author { font-weight: 800; font-size: 15px; }
.broadcast-badge {
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(125, 211, 252, 0.4);
  color: var(--neon-2);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.broadcast-sub { font-size: 12px; color: var(--muted); }
.broadcast-body { white-space: pre-wrap; color: var(--ink); font-size: 14px; line-height: 1.6; }
.broadcast-link {
  text-decoration: none;
  color: inherit;
}
.broadcast-link:hover {
  color: var(--text);
  text-decoration: none;
}
.broadcast-media {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.03);
  aspect-ratio: 4 / 3;
}
.broadcast-media img,
.broadcast-media video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.broadcast-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.broadcast-actions.is-single {
  grid-template-columns: 1fr;
}
.actionBtn {
  min-height: 40px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: transform 120ms ease, border-color 160ms ease, background 160ms ease;
}
.actionBtn:hover { transform: translateY(-1px); border-color: rgba(98, 245, 210, 0.35); text-decoration: none; }
.actionBtn.is-active { border-color: rgba(248, 113, 113, 0.6); background: rgba(248, 113, 113, 0.12); }
.broadcast-action {
  min-height: 40px;
  padding: 0 12px;
  border-radius: 0;
  justify-content: flex-start;
  background: transparent;
  border-color: transparent;
  font-size: 13px;
}
.broadcast-action.is-active {
  border-color: transparent;
  background: transparent;
  color: rgba(245, 251, 255, 0.96);
}
.broadcast-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(238, 245, 255, 0.94);
}
.broadcast-action-icon svg {
  width: 17px;
  height: 17px;
}
.broadcast-action-count {
  margin-left: auto;
  min-width: 20px;
  padding: 2px 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}
.broadcast-action,
.broadcast-action:hover,
.broadcast-action:focus,
.broadcast-action:focus-visible,
.broadcast-action:active,
.broadcast-action.is-active,
.actionBtn.broadcast-action,
.actionBtn.broadcast-action:hover,
.actionBtn.broadcast-action:focus,
.actionBtn.broadcast-action:focus-visible,
.actionBtn.broadcast-action:active,
.actionBtn.broadcast-action.is-active {
  border: 0 !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
  transform: none !important;
}
.broadcast-action::before,
.broadcast-action::after,
.broadcast-action-icon::before,
.broadcast-action-icon::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
}
.actionIcon { font-size: 14px; }
.actionIcon svg {
  width: 16px;
  height: 16px;
  display: block;
}

.broadcast-counts {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--muted);
}
.view-comments {
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
}
.view-comments:disabled { opacity: 0.5; cursor: default; }
.broadcast-comments {
  padding-top: 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.broadcast-comments-message,
.broadcast-comments-empty,
.broadcast-comments-login {
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  font-size: 12px;
}
.broadcast-comments-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.broadcast-comment-item {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.025);
}
.broadcast-comment-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.broadcast-comment-actions {
  margin-top: 4px;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  width: fit-content;
  max-width: 100%;
}
.broadcast-comment-actionGroup {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 11px;
  width: fit-content;
  max-width: 100%;
}
.broadcast-comment-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.broadcast-comment-author {
  font-size: 13px;
  font-weight: 700;
  color: rgba(245, 251, 255, 0.96);
}
.broadcast-comment-time {
  font-size: 11px;
  color: var(--muted);
}
.broadcast-comment-text {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.broadcast-comment-delete {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: rgba(248, 113, 113, 0.92);
  cursor: pointer;
  white-space: nowrap;
  min-height: 0;
}
.broadcast-comment-form {
  display: block;
}
.cityCommentsInputBar {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}
.broadcast-comment-form input {
  width: 100%;
  min-height: 46px;
  padding: 0 52px 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.055);
  color: var(--ink);
  line-height: 46px;
}
.broadcast-comment-form input::placeholder {
  color: rgba(226, 232, 240, 0.48);
}
.broadcast-comment-submit {
  position: absolute;
  right: 6px;
  top: 50%;
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border-radius: 999px;
  border: 0;
  background: rgba(255, 255, 255, 0.14);
  color: rgba(244, 249, 255, 0.62);
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  z-index: 2;
  cursor: default;
  transition: background 0.14s ease, color 0.14s ease, opacity 0.14s ease, transform 0.14s ease;
}
.broadcast-comment-submit svg {
  width: 19px;
  height: 19px;
  display: block;
}
.broadcast-comment-submit[aria-disabled="false"]:not(:disabled) {
  background: rgba(244, 249, 255, 0.95);
  color: rgba(3, 7, 13, 0.96);
  cursor: pointer;
}
.broadcast-comment-submit[aria-disabled="false"]:not(:disabled):hover,
.broadcast-comment-submit[aria-disabled="false"]:not(:disabled):focus-visible {
  background: #ffffff;
  transform: translateY(-50%) scale(1.03);
}
.broadcast-comment-submit[aria-disabled="true"],
.broadcast-comment-submit:disabled {
  opacity: 0.52;
}

.comment-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--ink);
}
.comment-item { color: var(--ink); }
.comment-author { font-weight: 700; margin-right: 6px; }
.comment-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.comment-composer input {
  min-height: 40px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
}
.comment-composer button {
  width: auto;
  min-height: 40px;
  border-radius: 999px;
  padding: 0 16px;
}

.cityModal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 120;
}
.cityModal.is-open { display: flex; }
.cityModalBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 7, 11, 0.85);
  backdrop-filter: blur(12px);
}
.cityModalCard {
  position: relative;
  z-index: 2;
  width: min(92vw, 420px);
  background: var(--panel);
  border-radius: 18px;
  border: 1px solid var(--line);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cityModalTitle { font-size: 18px; font-weight: 800; }
.cityModalBody { font-size: 13px; }
.cityModalActions { display: flex; gap: 10px; }
.cityModalActions .btn { width: auto; }

.cityPage .dock {
  background: linear-gradient(180deg, rgba(3, 5, 8, 0.7), rgba(3, 5, 8, 0.92));
  border-top: none;
  box-shadow: none;
}
.cityPage .dockItem { opacity: 1; }
.cityPage .dockItem.dockItem--primary:not(.isActive):not(.is-active) {
  opacity: 1;
}
.cityPage .dockItem.isActive,
.cityPage .dockItem.is-active { opacity: 1; }

@media (max-width: 560px) {
  .appUtilityBar {
    top: calc(env(safe-area-inset-top) + 10px);
    right: 10px;
    gap: 6px;
  }

  .appUtilityBtn {
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
  }

  .appUtilityPanel {
    right: -2px;
  }

  .pageHeader, .top-bar {
    padding: 12px;
  }

  .cityTopBar { gap: 10px; padding: 10px 12px; }
  .cityTopLeft,
  .cityTopSearch {
    grid-column: 1 / -1;
  }
  .cityTopBar .headerActions {
    grid-column: 2;
    grid-row: 1;
  }
  .cityTopTitle { font-size: 11px; }
  .cityTopBadge { min-width: 40px; padding: 5px 8px; font-size: 10px; }
  .broadcast-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .activitySegment {
    flex-basis: 100%;
  }
  .activitySheetToggle {
    width: 100%;
    justify-content: space-between;
  }
}

.mapPage {
  --map-viewport-height: 100dvh;
  --map-chrome-surface: linear-gradient(
    165deg,
    rgba(18, 24, 34, 0.94) 0%,
    rgba(10, 14, 22, 0.92) 100%
  );
  --map-chrome-border: rgba(255, 255, 255, 0.11);
  --map-chrome-border-strong: rgba(122, 212, 255, 0.28);
  --map-chrome-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 12px 28px rgba(0, 0, 0, 0.38);
  --map-chrome-inset: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --map-live-on: rgba(111, 230, 200, 0.95);
  --map-live-on-dim: rgba(111, 230, 200, 0.14);
  --map-live-on-edge: rgba(111, 230, 200, 0.42);
  min-height: var(--map-viewport-height);
}

.mapPage .app-shell,
.mapPage .appShell {
  min-height: var(--map-viewport-height);
}

.mapPage .appContent {
  padding-bottom: 0;
  min-height: 0;
  overflow: hidden;
}

.mapPage .mapContent {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.mapPage .appUtilityBar {
  top: calc(env(safe-area-inset-top) + 64px);
}

.mapTopBar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(8, 12, 18, 0.92);
  backdrop-filter: blur(14px);
}

.mapTopLeft {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mapTitle {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.mapBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid rgba(122, 212, 255, 0.38);
  background:
    linear-gradient(180deg, rgba(122, 212, 255, 0.14) 0%, rgba(122, 212, 255, 0.06) 100%);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(248, 250, 255, 0.96);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.mapState {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
}

.mapState.is-on {
  color: rgba(235, 245, 255, 0.94);
  border-color: rgba(111, 230, 200, 0.46);
  background: rgba(111, 230, 200, 0.14);
}

.mapState.is-off {
  color: rgba(238, 194, 138, 0.9);
  border-color: rgba(238, 194, 138, 0.36);
  background: rgba(238, 194, 138, 0.12);
}

.mapStage {
  position: relative;
  min-height: 0;
  height: 100%;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
  background: #0b0f14;
}

.mapCanvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  z-index: 0;
  background: #0b0f14;
}

/* The canvas extends behind the dock. Keep map credits below the top toolbar
   so their expanded panel cannot be clipped by the bottom navigation. */
.mapPage .mapCanvas .maplibregl-ctrl-bottom-right {
  top: calc(env(safe-area-inset-top, 0px) + 56px);
  bottom: auto;
}

.mapInitialSkeleton,
.instantMapSkeleton {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  background: #0b0f14;
}

.mapInitialSkeleton[hidden],
.instantMapSkeleton[hidden] {
  display: none;
}

.mapInitialSkeletonGrid {
  position: absolute;
  inset: 0;
  opacity: 0.34;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 54px 54px;
}

.mapInitialSkeletonPin {
  position: absolute;
  width: 42px;
  height: 42px;
  border-radius: 999px;
}

.mapInitialSkeletonPin--one {
  left: 24%;
  top: 29%;
}

.mapInitialSkeletonPin--two {
  right: 22%;
  top: 39%;
}

.mapInitialSkeletonPin--three {
  left: 51%;
  top: 58%;
}

.mapInitialSkeletonSheet {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: calc(var(--nav-height) + 18px + env(safe-area-inset-bottom));
  min-height: 132px;
  border-radius: 22px;
}

@media (max-width: 719px) {
  .mapPage .app-shell,
  .mapPage .appShell {
    height: var(--map-viewport-height);
    min-height: var(--map-viewport-height);
  }

  .mapPage .appContent,
  .mapPage .mapContent {
    height: 100%;
  }

  .mapStage {
    height: calc(var(--map-viewport-height) - var(--nav-height) - env(safe-area-inset-bottom));
    min-height: calc(var(--map-viewport-height) - var(--nav-height) - env(safe-area-inset-bottom));
  }
}

@supports not (height: 100dvh) {
  .mapPage {
    --map-viewport-height: 100vh;
  }
}

.mapFloatChrome {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 10px);
  left: max(10px, env(safe-area-inset-left));
  right: max(10px, env(safe-area-inset-right));
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  pointer-events: none;
}

.mapFloatRight {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  pointer-events: auto;
}

.mapFloatBtn {
  position: relative;
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 0;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.92);
  font-size: 16px;
  line-height: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  -webkit-appearance: none;
  touch-action: manipulation;
  user-select: none;
  transition: color 120ms ease;
}

.mapFloatBtn::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.mapFloatBtn:focus:not(:focus-visible) {
  outline: none;
  background: transparent;
  box-shadow: none;
}

.mapFloatBtn:hover {
  color: #fff;
}

.mapFloatBtn:active {
  transform: none;
  opacity: 1;
  color: rgba(122, 212, 255, 0.96);
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.mapFloatBtn:focus-visible {
  outline: 1px solid rgba(122, 212, 255, 0.4);
  outline-offset: 3px;
  box-shadow: none;
  border-radius: 0;
}

.mapFloatBtn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.mapFloatBtn.is-active {
  border: none;
  background: transparent;
  box-shadow: none;
  color: rgba(111, 230, 200, 0.98);
}

.mapFloatBtn.mapShareLocationBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: normal;
  text-transform: none;
  white-space: normal;
  border-radius: 0;
}

.mapFloatBtn.mapShareLocationBtn:not(.is-active) {
  color: rgba(255, 255, 255, 0.92);
}

.mapFloatBtn.mapShareLocationBtn.is-active {
  border: none;
  background: transparent;
  color: rgba(122, 212, 255, 0.96);
  box-shadow: none;
}

.mapFloatBtn.mapShareLocationBtn.is-active:active {
  color: rgba(122, 212, 255, 0.96);
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.mapControlRail {
  position: absolute;
  right: max(10px, env(safe-area-inset-right));
  bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px) + 14px);
  z-index: 12;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  pointer-events: none;
}

.mapControlFab {
  width: 48px;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  border-radius: 0;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.92);
  font-size: 18px;
  line-height: 0;
  box-shadow: none;
  backdrop-filter: none;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  -webkit-appearance: none;
  touch-action: manipulation;
  user-select: none;
  transition: color 120ms ease;
}

.mapControlFab::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.mapControlFab:focus:not(:focus-visible) {
  outline: none;
  background: transparent;
  box-shadow: none;
}

.mapControlFab:hover {
  color: #fff;
}

.mapControlFab:active:not(:disabled) {
  transform: none;
  opacity: 1;
  color: rgba(122, 212, 255, 0.96);
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.mapControlFab:focus-visible {
  outline: 1px solid rgba(122, 212, 255, 0.4);
  outline-offset: 3px;
  box-shadow: none;
  border-radius: 0;
}

.mapControlFab.is-follow-armed {
  border: none;
  background: transparent;
  color: rgba(122, 212, 255, 0.96);
  box-shadow: none;
}

.mapControlFab:disabled {
  opacity: 0.36;
  cursor: default;
  transform: none;
  pointer-events: none;
}

.mapHud {
  position: absolute;
  top: 14px;
  left: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.mapSegment {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 7px;
  border-radius: 16px;
  border: 1px solid var(--map-chrome-border);
  background: rgba(10, 14, 22, 0.88);
  box-shadow: var(--map-chrome-inset);
  backdrop-filter: blur(16px) saturate(1.1);
  pointer-events: auto;
}

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

.mapSegBtn {
  min-height: 42px;
  padding: 0 8px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(226, 234, 246, 0.88);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition:
    background 140ms ease,
    border-color 140ms ease,
    color 140ms ease,
    transform 120ms ease;
}

.mapSegBtn:hover {
  transform: none;
  box-shadow: none;
  background: rgba(255, 255, 255, 0.07);
}

.mapSegBtn:active {
  transform: scale(0.98);
}

.mapSegBtn:focus-visible {
  outline: none;
  border-color: rgba(122, 212, 255, 0.35);
  box-shadow: 0 0 0 2px rgba(122, 212, 255, 0.2);
}

.mapSegBtn.is-active {
  border-color: var(--map-live-on-edge);
  background:
    linear-gradient(180deg, rgba(111, 230, 200, 0.26) 0%, rgba(111, 230, 200, 0.1) 100%);
  color: rgba(252, 255, 254, 0.99);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.mapHudRow {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  pointer-events: auto;
}

.mapHudPrimary {
  align-items: stretch;
}

.mapShareBtn {
  min-height: 42px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(111, 230, 200, 0.24);
  background: rgba(8, 12, 18, 0.86);
  color: rgba(241, 249, 255, 0.96);
  font-size: 13px;
  letter-spacing: 0.02em;
}

.mapShareBtn.is-on {
  border-color: rgba(111, 230, 200, 0.36);
  background: rgba(111, 230, 200, 0.14);
}

.mapShareBtn.is-off {
  border-color: rgba(255, 255, 255, 0.14);
}

.mapIconBtn {
  width: 42px;
  min-width: 42px;
  min-height: 42px;
  padding: 0;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(8, 12, 18, 0.86);
  color: rgba(241, 249, 255, 0.96);
  font-size: 17px;
  line-height: 1;
}

.mapSettingsPanel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(8, 12, 18, 0.82);
  backdrop-filter: blur(12px);
  pointer-events: auto;
}

.mapFollowBtn {
  min-height: 42px;
  min-width: 110px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(111, 230, 200, 0.36);
  background: rgba(111, 230, 200, 0.12);
  color: rgba(241, 249, 255, 0.95);
  font-size: 12px;
  letter-spacing: 0.03em;
}

.mapFollowBtn.is-off {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(214, 223, 236, 0.9);
}

.mapFollowBtn:disabled {
  opacity: 0.6;
  cursor: default;
}

.mapLegend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  pointer-events: auto;
}

.mapLegendChip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(8, 12, 18, 0.76);
  color: rgba(233, 239, 247, 0.82);
  font-size: 11px;
  letter-spacing: 0.04em;
}

.mapLegendDot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  display: inline-block;
}

.mapLegendDot.is-friend {
  background: rgba(111, 230, 200, 0.92);
}

.mapLegendDot.is-event {
  background: rgba(122, 212, 255, 0.92);
}

.mapLegendDot.is-mission {
  background: rgba(251, 191, 36, 0.92);
}

.mapHint {
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(190, 202, 218, 0.84);
  font-size: 11px;
  line-height: 1.4;
}

.mapStatus {
  position: absolute;
  bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px) + 18px);
  left: 50%;
  z-index: 32;
  width: min(calc(100vw - 28px), 360px);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 15px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(180deg, rgba(20, 26, 36, 0.96) 0%, rgba(10, 14, 20, 0.98) 100%);
  color: rgba(236, 242, 250, 0.94);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.01em;
  box-shadow:
    0 8px 8px rgba(0, 0, 0, 0.1),
    0 20px 40px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(18px) saturate(1.1);
  pointer-events: auto;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 10px);
  transition:
    opacity 200ms ease,
    transform 200ms ease,
    visibility 200ms linear;
}

.mapStatus.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.mapStatus.is-hiding {
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 10px);
}

.mapStatus.is-warning {
  border-color: rgba(255, 176, 94, 0.28);
  background:
    linear-gradient(180deg, rgba(44, 28, 18, 0.94), rgba(17, 14, 18, 0.96));
  color: rgba(255, 235, 214, 0.96);
}

.mapStatus.is-success {
  border-color: rgba(111, 230, 200, 0.35);
  background:
    linear-gradient(180deg, rgba(16, 42, 36, 0.95), rgba(10, 22, 22, 0.97));
  color: rgba(230, 255, 246, 0.96);
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 28px rgba(111, 230, 200, 0.1);
}

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

.mapStatusClose {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: -1px -2px 0 0;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  font-size: 12px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.mapStatusClose:hover {
  background: rgba(255, 255, 255, 0.1);
}

.mapStatusClose:focus-visible {
  outline: 2px solid rgba(122, 212, 255, 0.66);
  outline-offset: 2px;
}

.mapStatus [hidden] { display: none !important; }
.mapStatusAction {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  margin: -4px 0 -4px 0;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(122, 212, 255, 0.22);
  background: rgba(122, 212, 255, 0.12);
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.mapStatusAction:hover {
  background: rgba(122, 212, 255, 0.18);
}

.mapStatusAction:focus-visible {
  outline: 2px solid rgba(122, 212, 255, 0.66);
  outline-offset: 2px;
}

.mapStatusAction svg {
  width: 15px;
  height: 15px;
}

@media (max-width: 560px) {
  .mapStatus {
    width: min(calc(100vw - 24px), 320px);
    bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px) + 14px);
    padding: 10px 12px;
  }
}

.mapLiveMarker {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  cursor: pointer;
}
.mapLiveMarker:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 50%; }
.mapLiveMarker.is-me { pointer-events: none; cursor: default; }
/* Geographic marker placement must never inherit the app's button animation. */
.mapLiveMarker:not(.is-me) {
  position: absolute;
  top: 0;
  left: 0;
  transition: none;
  box-shadow: none;
}
.mapLiveMarkerLabel {
  position: absolute;
  top: calc(50% + var(--map-live-friend-size, 34px) / 2 + 5px);
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 2px;
  width: max-content;
  max-width: 128px;
  transform: translateX(-50%);
  pointer-events: none;
  white-space: nowrap;
}
.mapLiveMarkerName,
.mapLiveMarkerTimestamp {
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  color: var(--text);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.2;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.mapLiveMarkerTimestamp { display: none; font-size: 10px; font-weight: 500; color: var(--muted); }
.mapLiveMarker.is-stale:not(.is-me) .mapLiveMarkerTimestamp { display: block; }
.mapLiveMarker.is-me .mapLiveMarkerLabel { top: calc(50% + 13px); }
.mapLiveMarker[aria-expanded="true"] { z-index: 1; }
.mapLiveMarker[aria-expanded="true"] .mapLiveMarkerName { border-color: var(--accent-2); }
.mapLiveMarker:not(.is-me) .mapLiveMarkerPosition::after {
  content: "";
  position: absolute;
  z-index: 2;
  right: -1px;
  bottom: -1px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--accent-2);
  pointer-events: none;
}
.mapLiveMarker.is-stale .mapLiveMarkerPosition::after { background: #8794a5; }
.mapLiveMarkerPosition {
  position: relative;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.mapLiveMarkerAccuracy {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -2;
  width: var(--map-live-accuracy-size, 0px);
  height: var(--map-live-accuracy-size, 0px);
  border: 1px solid rgba(122, 212, 255, 0.24);
  border-radius: 50%;
  background: rgba(122, 212, 255, 0.06);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: width 320ms ease, height 320ms ease, opacity 220ms ease;
}
.mapLiveMarker.is-me.has-low-accuracy .mapLiveMarkerAccuracy { opacity: 1; }
.mapLiveMarkerHeading { display: none; }
.mapLiveMarker.is-me.has-heading .mapLiveMarkerHeading {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: 84px;
  height: 84px;
  pointer-events: none;
  background: conic-gradient(from -38deg, transparent 0deg, rgba(101, 190, 255, 0.34) 12deg, rgba(101, 190, 255, 0.44) 38deg, rgba(101, 190, 255, 0.34) 64deg, transparent 76deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 22%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 22%, transparent 100%);
  transform: translate(-50%, -50%) rotate(var(--map-live-heading, 0deg));
  transition: transform 220ms linear;
}
@media (prefers-reduced-motion: reduce) {
  .mapLiveMarker.is-me.has-heading .mapLiveMarkerHeading { transition: none; }
}
.mapLiveMarker .mapLiveMarkerAvatar {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 2px solid var(--accent-2);
  border-radius: 50%;
  overflow: hidden;
  font-size: 12px;
  line-height: 1;
  font-weight: 650;
  box-sizing: border-box;
  box-shadow: 0 0 0 2px rgba(11, 15, 20, 0.85), 0 2px 8px rgba(0, 0, 0, 0.25);
}
.mapLiveMarkerAvatar img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; }
.mapLiveMarker:not(.is-me) .mapLiveMarkerPosition {
  width: var(--map-live-friend-size, 34px);
  height: var(--map-live-friend-size, 34px);
}
.mapPage .mapLiveMarker:not(.is-me) .mapLiveMarkerAvatar {
  width: 100%;
  height: 100%;
  font-size: calc(var(--map-live-friend-size, 34px) * 0.375);
  border-color: var(--accent-2);
  box-shadow: 0 0 0 1px var(--surface), 0 2px 5px rgba(0, 0, 0, 0.22);
}
.mapPage .mapLiveMarker.is-stale:not(.is-me) .mapLiveMarkerAvatar { border-color: #8794a5; }
.mapLiveMarker.is-me .mapLiveMarkerAvatar {
  width: 14px;
  height: 14px;
  border: 2px solid #fff;
  background: #65beff;
  box-shadow: 0 0 0 4px rgba(101, 190, 255, 0.15);
}
@media (prefers-reduced-motion: no-preference) {
  .mapLiveMarker.is-me .mapLiveMarkerAvatar { animation: mapLivePulse 2.8s ease-out infinite; }
}
@keyframes mapLivePulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(101, 190, 255, 0.12); }
  60% { box-shadow: 0 0 0 8px rgba(101, 190, 255, 0); }
}

.mapPopupCard {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 170px;
}

.mapPopupName {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.mapPopupMeta {
  font-size: 11px;
  color: rgba(183, 197, 215, 0.8);
}

.mapPopupActions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mapPopupBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  text-decoration: none;
  font-size: 11px;
  letter-spacing: 0.04em;
}

.mapPopupBtn.is-primary {
  border-color: rgba(122, 212, 255, 0.38);
  background: rgba(122, 212, 255, 0.14);
}

.mapPopupBtn:hover {
  text-decoration: none;
}

.mapPage .maplibregl-popup-content {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(13, 17, 24, 0.96);
  color: var(--text);
  box-shadow: none;
}

.mapPage .maplibregl-popup-tip {
  border-top-color: rgba(13, 17, 24, 0.96);
}

.mapShareSheet {
  --map-location-safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--safe-area-inset-bottom, 0px));
  position: fixed;
  inset: 0;
  z-index: 80;
}
.mapSharingStatus {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px) + 76px);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 9px;
  width: max-content;
  max-width: calc(100% - 32px);
  min-height: 44px;
  margin: 0 auto;
  padding: 9px 13px;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  color: var(--text);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
  font: inherit;
  font-size: 12px;
  line-height: 1.4;
  cursor: pointer;
  transform: none;
}
.mapPage .mapSharingStatus:is(:hover, :active) { transform: none; }
.mapSharingStatus svg { flex: 0 0 auto; color: var(--accent); }
.mapSharingStatus span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mapSharingStatus[hidden],
.mapStage--selectionActive .mapSharingStatus,
.mapShareSheetOpen .mapSharingStatus { display: none !important; }
.mapSharingStatus:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.mapSharingStatus:disabled { cursor: wait; }
.mapShareSheet[hidden],
.mapShareSheet [hidden] { display: none !important; }
.mapShareBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 8, 12, 0.22);
}
.mapSharePanel {
  position: absolute;
  inset: auto 0 0;
  width: min(100%, 520px);
  margin-inline: auto;
  height: min(86dvh, 660px);
  max-height: min(92dvh, 720px);
  min-height: 220px;
  display: flex;
  flex-direction: column;
  padding: 0 20px;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 28px 28px 0 0;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.3);
  transform: translateY(104%);
  transition: transform 240ms cubic-bezier(0.32, 0.72, 0, 1);
  overflow: hidden;
  box-sizing: border-box;
}
.mapShareSheet.is-open .mapSharePanel { transform: translateY(0); }
.mapSharePanel:focus { outline: none; }
.mapShareSheetGrab {
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  margin-inline: -20px;
  touch-action: none;
  cursor: grab;
  -webkit-tap-highlight-color: transparent;
}
.mapShareSheetGrab:active { cursor: grabbing; }
.mapShareHandle {
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: var(--muted);
  opacity: 0.4;
  pointer-events: none;
}
.mapShareSheetBody {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.mapShareSheetHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  flex-shrink: 0;
  padding-bottom: 18px;
}
.mapShareSheetTitle {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 750;
  letter-spacing: -0.035em;
  color: var(--text);
}
.mapShareSubtitle {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 32ch;
}
.mapLocationClose {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  margin: -10px -10px 0 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.mapLocationClose:hover { background: var(--surface-3); color: var(--text); }
.mapShareDuration {
  display: flex;
  flex-shrink: 0;
  gap: 8px;
}
.mapShareDurationBtn {
  flex: 1;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}
.mapShareDurationBtn.is-active,
.mapShareDurationBtn[aria-checked="true"] {
  border-color: color-mix(in srgb, var(--accent) 65%, transparent);
  background: var(--accent);
  color: var(--bg);
}
.mapShareInfo { flex-shrink: 0; margin: 12px 0 8px; }
.mapShareDisclosure {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.mapSharePrivacy { font-size: 12px; color: var(--muted); }
.mapSharePrivacy summary {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--accent);
  cursor: pointer;
  list-style: none;
}
.mapSharePrivacy summary::-webkit-details-marker { display: none; }
.mapSharePrivacy summary::before { content: "ⓘ"; margin-right: 5px; }
.mapSharePrivacy p { margin: 0 0 6px; line-height: 1.5; max-height: 84px; overflow: auto; }
.mapShareActive {
  margin: 0;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 12px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  color: var(--accent);
  font-size: 16px;
  font-weight: 650;
  line-height: 1.5;
}
.mapShareActive svg { flex: 0 0 auto; }
.mapShareActive small { display: block; color: var(--muted); font-size: 12px; font-weight: 400; }
.mapFriendStatus.is-live::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
}
.mapShareSheetFriends {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 64px;
  overflow: hidden;
}
.mapShareSheetFriendsTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  min-height: 44px;
}
.mapShareSheetSectionLabel {
  margin: 0;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 650;
  color: var(--text);
}
.mapShareSheetLinkBtn {
  width: auto;
  flex: 0 0 auto;
  border: 0;
  background: none;
  min-height: 44px;
  padding: 0 2px 0 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
}
.mapFriendsSearch {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  margin: 2px 0 8px;
  padding: 0 12px;
  min-height: 42px;
  border-radius: 12px;
  background: var(--surface-3);
  color: var(--muted);
}
.mapShareSheet .mapFriendsSearch input[type="search"] {
  min-width: 0;
  flex: 1;
  width: 100%;
  margin: 0;
  padding: 10px 0;
  border: 0;
  box-shadow: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 16px;
}
.mapShareSheetPicker.mapPickerList {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  margin: 0 -6px;
  padding: 0 6px;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.mapShareSheet .mapPickerItem {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 24px;
  align-items: center;
  flex: 0 0 auto;
  gap: 12px;
  min-height: 64px;
  padding: 6px;
  margin: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  box-sizing: border-box;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mapShareSheet .mapPickerItem:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.mapShareSheet .mapPickerItem:has(input:disabled) { cursor: default; }
.mapShareSheet .mapPickerItem:has(input:checked) .mapLocationAvatar {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--accent-2);
}
.mapShareSheet .mapPickerItem input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  min-height: 22px;
  min-width: 22px;
  margin: 0;
  padding: 0;
  border: 1.5px solid color-mix(in srgb, var(--muted) 70%, transparent);
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  display: grid;
  place-content: center;
  justify-self: end;
  cursor: pointer;
  opacity: 1;
}
.mapShareSheet .mapPickerItem input:checked {
  border-color: var(--accent-2);
  background: var(--accent-2);
}
.mapShareSheet .mapPickerItem input:checked::after {
  content: "";
  width: 8px;
  height: 4px;
  border-left: 2px solid var(--bg);
  border-bottom: 2px solid var(--bg);
  transform: translateY(-1px) rotate(-45deg);
}
.mapShareSheet .mapPickerName {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: 15px;
  font-weight: 550;
}
.mapLocationAvatar.profileSocialAvatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
}
.mapLocationAvatar img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; }
.mapShareSheet .mapPickerEmpty {
  border: 0;
  margin: auto 0;
  padding: 18px 2px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}
.mapShareFooter {
  flex: 0 0 auto;
  padding: 12px 0 calc(16px + var(--map-location-safe-bottom));
  background: var(--surface);
  position: sticky;
  bottom: 0;
  z-index: 1;
}
.mapShareSheetSaveRow {
  width: 100%;
  min-height: 50px;
  margin: 0;
  padding: 12px 16px;
  border: 0;
  border-radius: 16px;
  background: var(--accent);
  color: var(--bg);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 140ms ease;
}
.mapShareSheetSaveRow:disabled { opacity: 0.35; cursor: default; }
.mapShareSheetSaveRow.is-stop { min-height: 44px; margin-top: 4px; background: transparent; color: var(--danger); }
.mapShareSheet :is(button, input, a, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.mapShareError { color: var(--danger); font-size: 12px; line-height: 1.4; margin: 0 0 10px; }
.mapShareSheetOpen, .mapShareSheetOpen body { overflow: hidden; }
.mapFriendSheet { pointer-events: none; }
.mapFriendPanel {
  pointer-events: auto;
  touch-action: none;
  height: auto;
  min-height: 0;
  padding-bottom: calc(20px + var(--map-location-safe-bottom));
}
.mapFriendIdentity { display: flex; align-items: center; gap: 12px; }
.mapFriendIdentity > div { min-width: 0; }
.mapFriendIdentity .mapShareSheetTitle { font-size: 20px; overflow-wrap: anywhere; }
.mapFriendIdentity .mapLocationAvatar {
  width: 48px;
  height: 48px;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px #8794a5;
}
.mapFriendIdentity:has(.mapFriendStatus.is-live) .mapLocationAvatar {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent-2);
}
.mapFriendIdentity .mapLocationClose { margin: 0 -8px 0 auto; align-self: flex-start; }
.mapFriendStatus { margin: 5px 0 0; font-size: 13px; color: var(--muted); }
.mapFriendStatus.is-live { color: var(--accent-2); }
.mapFriendUpdated { margin: 16px 0 4px; color: var(--text); font-size: 13px; }
.mapFriendExpiry { margin: 0; color: var(--muted); font-size: 12px; }
.mapFriendActions { display: flex; gap: 8px; margin-top: 16px; }
.mapFriendActions a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 64px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-3);
  color: var(--text);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
}
.mapFriendActions svg { color: var(--accent); }
.mapShareSheet.is-compact .mapShareSheetBody { overflow-y: auto; overscroll-behavior: contain; }
.mapShareSheet.is-compact .mapShareSheetFriends { flex: 0 0 auto; min-height: 100px; overflow: visible; }
.mapShareSheet.is-compact .mapShareSheetPicker { max-height: 190px; flex: 0 0 auto; }
@media (max-height: 620px), (orientation: landscape) {
  .mapShareSheetBody { overflow-y: auto; overscroll-behavior: contain; }
  .mapShareSheetFriends { flex: 0 0 auto; min-height: 100px; overflow: visible; }
  .mapShareSheetPicker.mapPickerList { max-height: 190px; flex: 0 0 auto; }
  .mapShareSheetHeader { padding-bottom: 12px; }
  .mapShareSubtitle { margin-top: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .mapSharePanel { transition: none; }
}

.mapOnboarding {
  position: absolute;
  left: 10px;
  right: auto;
  bottom: calc(var(--nav-height) + 66px);
  max-width: min(280px, calc(100vw - 20px));
  z-index: 4;
  padding: 10px 11px;
  border-radius: 16px;
  border: 1px solid rgba(122, 212, 255, 0.24);
  background: rgba(8, 12, 18, 0.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.32);
}

.mapOnboarding.is-visible {
  animation: commsPanelIn 170ms ease-out;
}

.mapOnboardingTitle {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.mapOnboardingList {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: rgba(190, 202, 218, 0.84);
  font-size: 12px;
  line-height: 1.45;
}

.mapOnboardingBtn {
  margin-top: 10px;
  min-height: 36px;
  width: auto;
  padding: 0 12px;
  border-radius: 999px;
}

@media (max-width: 560px) {
  .mapFloatChrome {
    top: calc(env(safe-area-inset-top, 0px) + 8px);
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
  }

  .mapFloatRight {
    gap: 2px;
  }

  .mapFloatBtn {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  .mapFloatBtn.mapShareLocationBtn {
    min-width: 44px;
    padding: 0;
  }

  .mapControlFab {
    width: 48px;
    min-width: 48px;
    min-height: 48px;
  }

  .mapOnboarding {
    width: 100%;
    max-width: calc(100vw - 20px);
  }
}

.activityContent {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.activityFilters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.activityFilterStrip {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.activitySegment {
  flex: 1 1 240px;
  min-width: 0;
  display: inline-grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(16, 22, 32, 0.46);
  backdrop-filter: blur(20px);
}

.activitySegment .activityFilterBtn {
  min-height: 36px;
  padding: 0 10px;
  border: none;
  background: transparent;
  border-radius: 14px;
}

.activitySegment .activityFilterBtn.is-active {
  border: none;
  background: rgba(255, 255, 255, 0.1);
}

.activityFilterBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-decoration: none;
}

.activityFilterBtn.is-active {
  border-color: rgba(122, 212, 255, 0.45);
  background: rgba(122, 212, 255, 0.18);
}

.activitySheetToggle {
  width: auto;
  min-height: 38px;
  padding: 0 12px;
  gap: 8px;
  border-radius: 999px;
  border-color: rgba(255, 255, 255, 0.06);
  background: rgba(16, 22, 32, 0.46);
  backdrop-filter: blur(20px);
  cursor: pointer;
}

.activitySheetToggle:hover,
.activitySheetToggle:focus-visible {
  transform: none;
  box-shadow: none;
}

.activityFilterValue {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.02em;
}

.activityList {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.activityBrowseList,
.activitySubmissionList {
  gap: 6px;
}

.hostEventCard {
  gap: 14px;
}

.hostEventGuests {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hostEventRow {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hostEventLabel {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.hostEventPeople {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.hostEventChip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(122, 212, 255, 0.24);
  background: rgba(122, 212, 255, 0.1);
  color: var(--text);
  text-decoration: none;
  font-size: 12px;
}

.hostEventChip:hover {
  text-decoration: none;
}

.hostEventChip.is-muted {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
}

.activityCard {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.activityListCard {
  position: relative;
  overflow: hidden;
  padding: 11px 12px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015)),
    rgba(14, 20, 29, 0.58);
  backdrop-filter: blur(20px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 14px 24px rgba(0, 0, 0, 0.18);
}

.activityListCard::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 2px;
  border-radius: 999px;
  background: rgba(184, 196, 212, 0.22);
}

.activityListCard.is-mission::before {
  width: 4px;
  background: linear-gradient(180deg, rgba(150, 214, 255, 0.9), rgba(85, 154, 214, 0.3));
}

.activityListCard.is-music {
  border-color: rgba(163, 115, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 14px 24px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(163, 115, 255, 0.05);
}

.activityListCard.is-sport {
  border-color: rgba(255, 161, 68, 0.16);
}

.activityListCard.is-food {
  border-color: rgba(86, 210, 147, 0.16);
}

.activityListCard.is-meetup {
  border-color: rgba(104, 182, 255, 0.16);
}

.activityListCard.is-other {
  border-color: rgba(203, 213, 225, 0.08);
}

.activityCardLink {
  color: inherit;
  text-decoration: none;
}

.activityCardLink:hover,
.activityCardLink:focus-visible {
  text-decoration: none;
  border-color: rgba(122, 212, 255, 0.2);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.02)),
    rgba(18, 25, 36, 0.64);
  outline: none;
}

.activityCardTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.activityTypeBadge,
.activityCategoryBadge,
.activityStatusPill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.activityTypeBadge {
  color: rgba(225, 236, 248, 0.92);
  background: rgba(77, 117, 166, 0.16);
  border-color: rgba(123, 171, 227, 0.18);
}

.activityTypeBadge.is-mission {
  background: rgba(122, 212, 255, 0.14);
  border-color: rgba(122, 212, 255, 0.24);
}

.activityTypeBadge.is-event {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
}

.activityCategoryBadge {
  color: rgba(232, 238, 247, 0.92);
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
}

.activityCategoryBadge.is-music {
  color: #dec8ff;
  background: rgba(136, 83, 246, 0.16);
  border-color: rgba(163, 115, 255, 0.22);
}

.activityCategoryBadge.is-sport {
  color: #ffd9b0;
  background: rgba(255, 141, 40, 0.16);
  border-color: rgba(255, 166, 87, 0.22);
}

.activityCategoryBadge.is-food {
  color: #caf6dd;
  background: rgba(44, 173, 110, 0.16);
  border-color: rgba(86, 210, 147, 0.22);
}

.activityCategoryBadge.is-meetup {
  color: #d3ebff;
  background: rgba(59, 130, 246, 0.16);
  border-color: rgba(104, 182, 255, 0.22);
}

.activityCategoryBadge.is-other {
  color: rgba(228, 232, 240, 0.88);
  background: rgba(148, 163, 184, 0.14);
  border-color: rgba(203, 213, 225, 0.14);
}

.activityBadgeIcon,
.activityMetaIcon {
  width: 12px;
  height: 12px;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
}

.activityBadgeIcon svg,
.activityMetaIcon svg {
  width: 12px;
  height: 12px;
  display: block;
}

.activityCardHead {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.activityMetaLine {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.activityCardTitle {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
  color: rgba(245, 248, 252, 0.96);
}

.activityCardSubline {
  display: flex;
  align-items: center;
  gap: 6px;
}

.activityStatusPill {
  color: rgba(219, 227, 238, 0.86);
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.07);
}

.activityCardMeta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}

.activityMetaCluster {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.activityMetaPill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  min-width: 0;
  max-width: 100%;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.05);
  color: rgba(224, 232, 242, 0.76);
  font-size: 11px;
}

.activityMetaValue {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.activityCardActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.activityCardActions form {
  margin: 0;
}

.activityInlineForm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.activityBuyForm {
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
}

.activityQtyLabel {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.activityQtyInput {
  width: 52px;
  min-height: 32px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  text-align: center;
}

.activityCardActions .missionButton,
.activityCardActions .mapItemBtn {
  width: auto;
}

.activityCreateBtn {
  width: auto;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
}

.activityThumbLink {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
}

.activityThumb {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
}

.activitySheetBody {
  gap: 6px;
}

.activitySheetLink {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 0 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
}

.activitySheetLink:hover,
.activitySheetLink:focus-visible {
  text-decoration: none;
  outline: none;
  border-color: rgba(122, 212, 255, 0.18);
}

.activitySheetLink.is-active {
  border-color: rgba(122, 212, 255, 0.32);
  background: rgba(122, 212, 255, 0.12);
}

.activityForm {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.activityFormGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.activityMapPanel {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.activityMapActions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.activityMapActions .missionButton {
  width: auto;
}

.activityPickerMap {
  width: 100%;
  min-height: 230px;
  border-radius: 12px;
  border: 1px solid var(--line);
  overflow: hidden;
}

.activityDetailCard {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.activityDetailTitle {
  margin: 0;
  font-size: 24px;
}

.activityDetailMeta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  color: var(--muted);
}

.activityDetailDescription {
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
  white-space: pre-wrap;
}

.myEventManagePage {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 10px;
  padding-bottom: 112px;
}

.myEventManageHeroCard {
  padding: 0;
  overflow: hidden;
  border-color: rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at top right, rgba(122, 212, 255, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(19, 24, 34, 0.98), rgba(13, 18, 27, 0.98));
  box-shadow: 0 24px 44px rgba(3, 8, 16, 0.22);
}

.myEventManageHeroPanel {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  min-height: 320px;
}

.myEventManageHeroPanel.is-compact {
  grid-template-columns: 1fr;
  min-height: 0;
}

.myEventManageHeroMedia {
  position: relative;
  min-height: 320px;
  background: rgba(255, 255, 255, 0.04);
}

.myEventManageHeroMedia::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 10, 16, 0.06), rgba(6, 10, 16, 0.38));
  pointer-events: none;
}

.myEventManageHeroMedia img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.myEventManageHeroMedia video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.myEventManageHeroBody {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px;
}

.myEventManageBackLink {
  width: fit-content;
  color: rgba(206, 215, 226, 0.74);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
}

.myEventManageBackLink:hover,
.myEventManageBackLink:focus-visible {
  color: rgba(244, 247, 250, 0.94);
  text-decoration: none;
  outline: none;
}

.myEventManageBadgeRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.myEventManageHeroContent {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.myEventManageTitle {
  margin: 0;
  font-size: 34px;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: rgba(248, 250, 252, 0.98);
}

.myEventManageLead {
  margin: 0;
  max-width: 62ch;
  color: rgba(216, 224, 233, 0.82);
  font-size: 14px;
  line-height: 1.65;
  white-space: pre-wrap;
}

.myEventManageMetaCluster {
  gap: 8px;
}

.myEventManageMetaPill {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(236, 241, 246, 0.86);
}

.myEventManageSplit {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.82fr);
  gap: 14px;
  align-items: start;
}

.myEventManageSection {
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-color: rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.02)),
    rgba(15, 19, 27, 0.96);
}

.myEventManageManageCard {
  position: sticky;
  top: 16px;
}

.myEventManageEditorCard {
  scroll-margin-top: 18px;
}

.myEventManageSectionHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.myEventManageSectionMeta {
  color: rgba(201, 210, 223, 0.72);
  font-size: 13px;
  line-height: 1.55;
}

.myEventManageDetailGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.myEventManageDetailItem {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.03);
}

.myEventManageDetailItem.is-wide {
  grid-column: 1 / -1;
}

.myEventManageDetailLabel {
  color: rgba(201, 210, 223, 0.56);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.myEventManageDetailValue {
  color: rgba(244, 247, 250, 0.94);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  word-break: break-word;
}

.myEventManageDescriptionBlock {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.myEventManageMessage {
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(122, 212, 255, 0.12);
  background: rgba(122, 212, 255, 0.08);
  color: rgba(228, 238, 248, 0.9);
  font-size: 13px;
  line-height: 1.55;
}

.myEventManageMessage.is-warning {
  border-color: rgba(251, 191, 36, 0.18);
  background: rgba(251, 191, 36, 0.1);
  color: rgba(254, 240, 198, 0.96);
}

.myEventAttendeeList {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.myEventAttendeeRow {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  text-decoration: none;
}

.myEventAttendeeRow:hover,
.myEventAttendeeRow:focus-visible {
  text-decoration: none;
  border-color: rgba(122, 212, 255, 0.18);
  outline: none;
}

.myEventAttendeeAvatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}

.myEventAttendeeAvatar.is-fallback {
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(122, 212, 255, 0.16);
  background: rgba(122, 212, 255, 0.12);
  color: rgba(241, 245, 249, 0.94);
  font-size: 12px;
  font-weight: 700;
}

.myEventGeocodeRow {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.myEventGeocodeStatus {
  font-size: 12px;
  color: var(--muted);
}

.myEventManageActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.myEventManageActions .missionButton {
  width: auto;
  min-width: 156px;
}

.myEventDangerBtn {
  border-color: rgba(248, 113, 113, 0.28);
  background: rgba(248, 113, 113, 0.1);
  color: rgba(254, 226, 226, 0.96);
}

.myEventManageActionBar {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.myEventManageActionBar .missionButton {
  width: 100%;
}

.myEventManageActionNote {
  color: rgba(201, 210, 223, 0.72);
  font-size: 13px;
  line-height: 1.6;
}

.myEventManageForm {
  gap: 14px;
}

.myEventManageFormGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.myEventManageFieldBlock {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.myEventManageGallery {
  grid-auto-columns: minmax(240px, 46%);
  gap: 12px;
}

.myEventManageGalleryImage {
  height: clamp(220px, 46vw, 320px);
  max-height: none;
  background: rgba(255, 255, 255, 0.04);
}

@media (max-width: 900px) {
  .myEventManageHeroPanel,
  .myEventManageSplit {
    grid-template-columns: 1fr;
  }

  .myEventManageManageCard {
    position: static;
  }

  .myEventManageHeroMedia {
    min-height: 240px;
  }
}

@media (max-width: 640px) {
  .myEventManagePage {
    gap: 12px;
    padding-top: 8px;
  }

  .myEventManageHeroBody {
    padding: 18px;
  }

  .myEventManageTitle {
    font-size: 28px;
  }

  .myEventManageDetailGrid,
  .myEventManageFormGrid {
    grid-template-columns: 1fr;
  }

  .myEventManageGallery {
    grid-auto-columns: 88%;
  }
}

.activityCarouselWrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.activityCarouselHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.activityCarouselActions {
  display: flex;
  gap: 8px;
}

.activityCarouselActions .missionButton {
  width: auto;
  min-height: 32px;
  padding: 0 12px;
}

.activityCarousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 84%;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 4px;
}

.activityCarouselImage,
.activityCarouselVideo {
  width: 100%;
  height: clamp(220px, 48vw, 300px);
  border-radius: 12px;
  border: 1px solid var(--line);
  object-fit: cover;
  max-height: none;
  display: block;
  scroll-snap-align: start;
  background: #0b1018;
}

.activityCarouselVideo {
  pointer-events: auto;
}

.mapItemSheet {
  position: absolute;
  inset: 0;
  z-index: 28;
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms ease;
}

.mapItemSheet.is-open {
  opacity: 1;
  pointer-events: auto;
}

.mapItemBackdrop {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(3, 7, 12, 0) 0%, rgba(3, 7, 12, 0.12) 40%, rgba(3, 7, 12, 0.4) 100%);
  opacity: 0;
  transition: opacity 220ms ease;
  pointer-events: auto;
}

.mapItemSheet.is-open .mapItemBackdrop {
  opacity: 1;
}

.mapItemCard {
  --map-item-sheet-translate: 0px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  min-height: 0;
  border-radius: 22px 22px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(9, 13, 20, 0.985);
  display: flex;
  flex-direction: column;
  box-shadow: none;
  overflow: hidden;
  transform: translateY(var(--map-item-sheet-translate));
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 260ms ease;
  pointer-events: auto;
}

.mapItemCard.is-full {
  box-shadow: none;
}

.mapItemCard.is-dragging,
.mapItemCard.is-instant {
  transition: none;
}

.mapItemHero {
  position: relative;
  flex: 0 0 clamp(220px, 28vh, 300px);
  min-height: clamp(220px, 28vh, 300px);
  background: #0f141d;
}

.mapItemDragStrip {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 5px 16px 4px;
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.mapItemGrabPill {
  display: block;
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.42);
}

.mapItemBody {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding: 18px 18px calc(28px + env(safe-area-inset-bottom, 0px));
  background: rgba(10, 13, 20, 0.97);
}

@media (max-width: 719px) {
  .mapItemBody {
    padding: 18px 18px calc(28px + var(--nav-height, 56px) + env(safe-area-inset-bottom, 0px));
  }
}

.mapItemHead {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.mapItemClose {
  position: absolute;
  top: calc(8px + env(safe-area-inset-top, 0px));
  right: 12px;
  z-index: 4;
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border-radius: 999px;
  border: none;
  background: rgba(8, 12, 18, 0.42);
  backdrop-filter: blur(18px);
  color: rgba(247, 250, 255, 0.94);
  font-size: 15px;
  line-height: 1;
}

.mapItemTitleWrap {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.mapItemTitle {
  margin: 0;
  font-size: 30px;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.mapItemSubtitle {
  font-size: 15px;
  color: rgba(212, 221, 232, 0.8);
  line-height: 1.45;
}

.mapItemMetaLine {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.mapItemMetaLine .chip {
  min-height: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: rgba(187, 199, 214, 0.8);
  font-size: 12px;
}

.mapItemGallery {
  height: 100%;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  touch-action: pan-x pinch-zoom;
  overscroll-behavior-x: contain;
}

.mapItemGallery::-webkit-scrollbar {
  display: none;
}

.mapItemGallerySlide {
  position: relative;
  height: 100%;
  scroll-snap-align: start;
  overflow: hidden;
}

.mapItemGallerySlide::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(3, 8, 13, 0.2) 0%, rgba(3, 8, 13, 0.04) 30%, rgba(3, 8, 13, 0.38) 100%);
}

.mapItemGalleryImg,
.mapItemGallerySlide > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #0b1018;
}

.mapItemGalleryCount {
  position: absolute;
  right: 14px;
  bottom: 16px;
  z-index: 4;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(7, 10, 16, 0.52);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(248, 250, 255, 0.96);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
}

.mapItemGalleryDots {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transform: translateX(-50%);
}

.mapItemGalleryDot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.36);
  transition: transform 140ms ease, background 140ms ease;
}

.mapItemGalleryDot.is-active {
  transform: scale(1.18);
  background: rgba(255, 255, 255, 0.96);
}

.mapItemGallery.is-placeholder {
  overflow: hidden;
}

.mapItemGalleryFallback {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  padding: 32px 22px 26px;
  color: rgba(248, 250, 255, 0.96);
}

.mapItemGalleryFallback.is-event {
  background:
    radial-gradient(circle at top right, rgba(255, 94, 94, 0.32), transparent 32%),
    linear-gradient(135deg, rgba(56, 91, 155, 0.86), rgba(17, 28, 43, 0.98));
}

.mapItemGalleryFallback.is-place {
  background:
    radial-gradient(circle at top right, rgba(225, 237, 250, 0.18), transparent 30%),
    linear-gradient(135deg, rgba(46, 58, 74, 0.94), rgba(14, 20, 28, 0.98));
}

.mapItemGalleryFallbackEyebrow {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.66);
}

.mapItemGalleryFallbackTitle {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.mapItemGalleryFallbackCopy {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.74);
}

.mapItemActions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
  padding-bottom: 2px;
}

.mapItemActions.is-place {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mapItemBtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 8px 6px;
  border-radius: 12px;
  border: none;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(245, 248, 255, 0.96);
  text-decoration: none;
  font-size: 11px;
  font-weight: 600;
  gap: 4px;
}

.mapItemBtn span[aria-hidden="true"] {
  font-size: 16px;
  line-height: 1;
}

.mapItemPrimaryBtn {
  min-height: 48px;
  border-radius: 13px;
  font-weight: 650;
  background: linear-gradient(180deg, rgba(96, 178, 228, 0.4), rgba(72, 140, 198, 0.32));
}

.mapItemBtn.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.mapItemInfoGrid {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.mapItemInfoRow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.mapItemInfoRow:first-child {
  border-top: none;
}

.mapItemInfoCopy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mapItemInfoLabel {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(188, 200, 214, 0.58);
}

.mapItemInfoValue {
  font-size: 16px;
  line-height: 1.4;
  color: rgba(247, 250, 255, 0.98);
  text-align: left;
}

.mapItemInfoMeta {
  font-size: 13px;
  line-height: 1.4;
  color: rgba(188, 200, 214, 0.74);
  text-align: right;
  max-width: 42%;
}

.mapItemSection {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.mapItemSectionHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mapItemSectionTitle {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(168, 182, 202, 0.62);
}

.mapItemInlineBtn {
  width: auto;
  min-height: 20px;
  padding: 0;
  border: none;
  background: transparent;
  font-size: 12px;
  color: var(--accent);
  justify-content: flex-start;
}

.mapItemDescription {
  margin: 0;
  font-size: 15px;
  color: rgba(238, 243, 250, 0.92);
  line-height: 1.7;
  white-space: pre-wrap;
}

.mapItemDescription.mapItemDescription--expandable:not(.is-expanded) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.mapItemDescription.mapItemDescription--expandable.is-expanded {
  display: block;
  -webkit-line-clamp: unset;
  max-height: min(48vh, 360px);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: neoCaptionExpandIn 0.3s ease;
}

.mapItemLinkedCard {
  width: 100%;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 0;
  border: none;
  background: transparent;
  text-align: left;
}

.mapItemLinkedMedia {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  display: grid;
  place-items: center;
  color: rgba(247, 250, 255, 0.88);
}

.mapItemLinkedMedia.is-placeholder.is-event {
  background: linear-gradient(135deg, rgba(148, 97, 255, 0.36), rgba(255, 93, 93, 0.26));
}

.mapItemLinkedMedia.is-placeholder.is-place {
  background: linear-gradient(135deg, rgba(112, 130, 153, 0.34), rgba(54, 67, 85, 0.28));
}

.mapItemLinkedImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mapItemLinkedBody {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mapItemLinkedLabel {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(188, 200, 214, 0.62);
}

.mapItemLinkedTitle {
  font-size: 18px;
  line-height: 1.15;
  color: rgba(247, 250, 255, 0.98);
}

.mapItemLinkedSubtitle {
  font-size: 13px;
  line-height: 1.45;
  color: rgba(188, 200, 214, 0.78);
}

.mapItemLinkedChevron {
  font-size: 24px;
  line-height: 1;
  color: rgba(188, 200, 214, 0.52);
}

@media (max-width: 560px) {
  .mapItemCard {
    border-radius: 20px 20px 0 0;
  }

  .mapItemHero {
    flex-basis: 200px;
    min-height: 200px;
  }

  .mapItemBody {
    gap: 18px;
    padding: 18px 16px calc(26px + var(--nav-height, 56px) + env(safe-area-inset-bottom, 0px));
  }

  .mapItemTitle {
    font-size: 26px;
  }

  .mapItemActionRail {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .mapItemActions.is-place {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mapItemBtn {
    min-height: 44px;
  }

  .mapItemBtn span:last-child {
    font-size: 11px;
  }

  .mapItemInfoRow {
    flex-direction: column;
    gap: 6px;
  }

  .mapItemInfoMeta {
    max-width: none;
    text-align: left;
  }

  .mapItemLinkedCard {
    grid-template-columns: 68px minmax(0, 1fr) auto;
  }

  .mapItemLinkedMedia {
    width: 68px;
    height: 68px;
  }
}

.mapCreateFab {
  position: absolute;
  left: 10px;
  right: auto;
  bottom: calc(var(--nav-height) + 14px);
  z-index: 25;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.52);
  background: transparent;
  color: rgba(255, 255, 255, 0.94);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 500;
  line-height: 0;
  text-decoration: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  -webkit-appearance: none;
  touch-action: manipulation;
  user-select: none;
  transition: color 120ms ease, border-color 120ms ease;
}

.mapCreateFab::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.mapCreateFab:focus:not(:focus-visible) {
  outline: none;
  background: transparent;
  box-shadow: none;
}

.mapCreateFab:hover {
  text-decoration: none;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.72);
}

.mapCreateFab:active {
  transform: none;
  opacity: 1;
  color: rgba(122, 212, 255, 0.96);
  border-color: rgba(122, 212, 255, 0.55);
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.mapCreateFab:focus-visible {
  outline: 1px solid rgba(122, 212, 255, 0.45);
  outline-offset: 3px;
  box-shadow: none;
}

@media (max-width: 560px) {
  .activityFormGrid {
    grid-template-columns: 1fr;
  }
}

.profilePage,
.idPage {
  --font-display: "SF Pro Display", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  --font-body: "SF Pro Text", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Cascadia Mono", "Cascadia Code", "SFMono-Regular", "Consolas", "Liberation Mono", monospace;
  --bg: #0b0e13;
  --panel: #13161d;
  --panel-soft: #181c25;
  --panel-muted: #1e232d;
  --ink: rgba(235, 239, 246, 0.92);
  --muted: rgba(180, 188, 200, 0.72);
  --line: rgba(255, 255, 255, 0.08);
  --neon: #5ed1b2;
  --neon-2: #8ea6ff;
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.42);
  --radius: 16px;
}

.profilePage,
.idPage {
  font-family: var(--font-body);
  background: radial-gradient(1200px at top center, #151a23 0%, #0b0e11 60%), #0b0e11;
  color: var(--ink);
}

.profilePage {
  position: relative;
}

.profilePage::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 4px);
  opacity: 0.02;
  z-index: 0;
}

.profilePage .app-shell {
  position: relative;
  z-index: 1;
  border: none;
  background: transparent;
  box-shadow: none;
}

.profilePage .pageTitle,
.profilePage .sectionTitle,
.profilePage .statValue,
.profilePage .member-name,
.profilePage .profileHandle,
.idPage .idTitle,
.idPage .idTopTag {
  font-family: var(--font-display);
}

.profilePage .fileLabel,
.profilePage .statLabel,
.profilePage .fileForm label,
.profilePage .profileMetaLabel,
.profilePage .profileStatus,
.idPage .idLabel,
.idPage .idQrCode {
  font-family: var(--font-mono);
}

.profilePage .content {
  padding: 10px 14px 110px;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.profilePage .card {
  background: transparent;
  border: none;
  box-shadow: none;
}

.profilePage .fileSection {
  border-left: none;
}

.profileHeader {
  position: sticky;
  top: 0;
  z-index: 5;
  height: 54px;
  padding: 0 14px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
  align-items: center;
}

.profileHeaderRow {
  display: flex;
  align-items: center;
  gap: 12px;
}

.profileBack {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.035);
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}

.profilePage .pageTitle {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.menuDots {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-align: center;
  padding: 0;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: none;
}

.menuDots:hover {
  background: rgba(255, 255, 255, 0.1);
}

.profileCard {
  border-radius: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.profileHero {
  padding: 2px 0 0;
}

.profileHeroCard {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
    rgba(14, 18, 26, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 14px 28px rgba(0, 0, 0, 0.18);
}

.profileHeroInfo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.profileAvatar {
  width: 100%;
  height: 100%;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(18, 24, 34, 0.95), rgba(10, 13, 19, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.22);
  overflow: hidden;
  display: grid;
  place-items: center;
}

.profileAvatarLg {
  width: 116px;
  height: 116px;
}

.profileAvatar img,
.profileAvatar span {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: grid;
  place-items: center;
}

.profileHandleRow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.profileHandle {
  font-size: 28px;
  font-weight: 780;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: rgba(247, 251, 255, 0.98);
}

.profileMetaRow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
}

.profileMetaLabel {
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.profileStatus {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid rgba(94, 209, 178, 0.2);
  color: rgba(185, 243, 227, 0.65);
  background: rgba(94, 209, 178, 0.06);
}

.profileDistrict {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(180, 188, 200, 0.6);
}

.profileBio {
  font-size: 14px;
  color: rgba(200, 208, 220, 0.82);
  line-height: 1.5;
  max-width: none;
}

.profileActions {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 6px;
}

.profileHandleRow .statusDot {
  width: 8px;
  height: 8px;
  box-shadow: 0 0 0 5px rgba(94, 209, 178, 0.12);
}

.profileVisibilityBadge,
.profileRoleBadge,
.profileStatusBadge {
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.profileVisibilityBadge {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}

.profileRoleBadge {
  border-color: rgba(122, 212, 255, 0.2);
  background: rgba(122, 212, 255, 0.1);
}

.profileStatusBadge {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
}

.profileDistrictBar {
  display: flex;
  align-items: center;
}

.profileDistrictChip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(94, 209, 178, 0.18);
  background: rgba(94, 209, 178, 0.08);
  color: rgba(222, 245, 239, 0.84);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.profileCompanyName {
  align-self: flex-start;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.035);
  color: rgba(214, 223, 236, 0.84);
  font-size: 11px;
  letter-spacing: 0.04em;
}

.profileIdCard {
  padding-top: 2px;
}

.profileIdBody {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-wrap: nowrap;
}

.profileIdBody > * {
  width: 100%;
}

.profilePrimaryBtn {
  width: auto;
  min-height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(94, 209, 178, 0.26);
  background: rgba(94, 209, 178, 0.1);
  color: rgba(241, 248, 245, 0.96);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  padding: 0 14px;
  cursor: pointer;
  box-shadow: none;
}

.profilePrimaryBtn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.profilePrimaryBtn:hover,
.profileSecondaryBtn:hover {
  box-shadow: none;
  border-color: rgba(255, 255, 255, 0.14);
}

.profileSecondaryBtn {
  width: auto;
  min-height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
  color: rgba(235, 240, 248, 0.92);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  padding: 0 14px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.profileStatsInline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  gap: 8px;
  margin: 4px 0 0;
  border: none;
  background: transparent;
}

.profileStatInline {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 8px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.028);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.profileStatInline:last-child {
  border-right: none;
}

.profileStatInline .profileStatValue {
  font-size: 18px;
  font-weight: 760;
  letter-spacing: -0.02em;
  color: rgba(246, 250, 255, 0.96);
}

.profileStatInline .profileStatLabel {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(180, 188, 200, 0.65);
}

.profilePosts {
  padding: 6px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.postsHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
}

.postsSeeAll {
  font-size: 12px;
  color: var(--muted);
}

.postsGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.postThumbBtn {
  border: none;
  padding: 0;
  background: transparent;
  cursor: pointer;
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

.postThumb {
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(18, 24, 34, 0.9), rgba(10, 13, 19, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.05);
  aspect-ratio: 1 / 1;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.16);
}

.postThumb img,
.postThumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.profileEmpty {
  font-size: 13px;
  color: rgba(196, 204, 216, 0.72);
  min-height: 116px;
  border-radius: 18px;
  border: 1px dashed rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.profileSecondary {
  padding: 8px 0 0;
  color: var(--muted);
  display: none;
}

.profilePage .profileEdit {
  margin-top: 2px;
  padding: 16px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015)),
    rgba(14, 18, 26, 0.36);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 14px 28px rgba(0, 0, 0, 0.14);
}

.profilePage .profileEdit .fileForm {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 14px;
  margin-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.profilePage .profileEdit .fileForm:first-of-type {
  margin-top: 6px;
  padding-top: 0;
  border-top: none;
}

.profilePage .profileEdit input,
.profilePage .profileEdit textarea,
.profilePage .profileEdit select {
  border-radius: 16px;
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
}

.profilePage .profileEdit textarea {
  min-height: 108px;
  resize: vertical;
}

.profilePage .profileEdit .primaryBtn {
  width: auto;
  align-self: flex-start;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
}

.profileModal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 120;
}

.profileModal.is-open {
  display: flex;
}

.profileModalBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 8, 12, 0.88);
  backdrop-filter: blur(12px);
}

.profileModalCard {
  position: relative;
  z-index: 2;
  width: min(92vw, 420px);
  background: var(--panel);
  border-radius: 20px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.profileModalQr {
  width: 240px;
  height: 240px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: #0f131a;
}

.profileModalName {
  font-size: 18px;
  font-weight: 700;
}

.profileModalMeta {
  font-size: 12px;
  color: var(--muted);
}

.profileModalClose {
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.postModal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 130;
}

.postModal.is-open {
  display: flex;
}

.postModalBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 8, 12, 0.88);
  backdrop-filter: blur(12px);
}

.postModalCard {
  position: relative;
  z-index: 2;
  width: min(92vw, 520px);
  background: var(--panel);
  border-radius: 18px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.postModalCard #post-modal-media {
  width: 100%;
}

.postModalImg {
  width: 100%;
  height: clamp(280px, 62vh, 560px);
  border-radius: 14px;
  object-fit: cover;
  max-height: none;
  display: block;
  background: #0b1018;
}

.postModalClose {
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

@media (max-width: 560px) {
  .profileAvatarLg {
    width: 104px;
    height: 104px;
  }

  .postsGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .profileModalQr {
    width: 220px;
    height: 220px;
  }

  .profileHeroCard {
    gap: 12px;
    padding: 12px;
  }

  .profileHandle {
    font-size: 24px;
  }
}

/* Profile app-consistent override */
.profilePage {
  --bg: #0b0d12;
  --panel: var(--surface);
  --panel-soft: var(--surface-2);
  --panel-muted: var(--surface-3);
  --ink: var(--text);
  --muted: rgba(188, 198, 210, 0.72);
  --line: rgba(255, 255, 255, 0.08);
  --neon: var(--accent-2);
  --neon-2: var(--accent);
  background: var(--bg);
  color: var(--text);
}

.profilePage::before {
  display: none;
}

.profilePage .app-shell {
  border: none;
  background: var(--bg);
  box-shadow: none;
  max-width: var(--page-max);
}

.profilePage .content {
  padding: 14px 14px 112px;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.profileHeader {
  height: auto;
  min-height: 0;
  padding: 12px 16px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
}

.profileHeaderRow {
  gap: 10px;
}

.profileBack {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}

.profilePage .pageTitle {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text);
}

.profileViewPage--visitor .profileHeader {
  padding-left: 10px;
  padding-right: 10px;
}

.profileViewPage--visitor .profileHeader .left {
  flex-direction: row;
  align-items: center;
  gap: 6px;
}

.profileBackButton {
  display: inline-grid;
  place-items: center;
  width: 38px;
  min-width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(242, 247, 255, 0.94);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.profileBackButton:hover,
.profileBackButton:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.055);
  text-decoration: none;
}

.profileBackButton:active {
  color: rgba(122, 212, 255, 0.96);
  background: rgba(122, 212, 255, 0.1);
}

.profileBackButton svg {
  display: block;
  width: 22px;
  height: 22px;
}

.profilePage .profileHeader .headerActions,
.profilePage .profileHeader .headerIconRow {
  display: inline-flex;
  align-items: center;
  gap: var(--top-icon-gap);
}

.profilePage .profileHeader .headerActions {
  position: absolute;
  top: 50%;
  right: var(--top-icon-hitbox-edge-inset);
  transform: translateY(-50%);
}

.profilePage .profileHeader .headerActionBtn,
.profilePage .profileHeader .headerMenuBtn {
  position: relative;
  width: var(--top-icon-hitbox-size);
  min-width: var(--top-icon-hitbox-size);
  height: var(--top-icon-hitbox-size);
  min-height: var(--top-icon-hitbox-size);
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.92);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  text-decoration: none;
  transition: color 120ms ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.profilePage .profileHeader .headerActionBtn:hover,
.profilePage .profileHeader .headerActionBtn:focus-visible,
.profilePage .profileHeader .headerMenuBtn:hover,
.profilePage .profileHeader .headerMenuBtn:focus-visible {
  color: #fff;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  text-decoration: none;
}

.profilePage .profileHeader .headerActionBtn:active,
.profilePage .profileHeader .headerMenuBtn:active {
  color: rgba(122, 212, 255, 0.96);
  background: transparent !important;
  box-shadow: none !important;
  transform: none;
}

.profilePage .profileHeader .headerActionBtn:focus-visible,
.profilePage .profileHeader .headerMenuBtn:focus-visible {
  outline: 1px solid rgba(122, 212, 255, 0.4);
  outline-offset: 3px;
}

.profilePage .profileHeader .headerActionIcon,
.profilePage .profileHeader .headerMoreLauncherGlyph {
  width: var(--top-icon-visible-size);
  height: var(--top-icon-visible-size);
  display: grid;
  place-items: center;
  opacity: 0.94;
}

.profilePage .profileHeader .headerActionIcon svg,
.profilePage .profileHeader .headerMoreLauncherGlyph svg {
  width: var(--top-icon-visible-size);
  height: var(--top-icon-visible-size);
  display: block;
  fill: none;
}

.profilePage .profileHeader .headerActionIcon::before,
.profilePage .profileHeader .headerMoreLauncherGlyph::before {
  content: none;
  display: none;
}

.profilePage .profileHeader .headerActionBadge {
  top: 9px;
  right: 8px;
  width: 7px;
  min-width: 7px;
  height: 7px;
  padding: 0;
  border-radius: 50%;
  background: #0a84ff;
  color: transparent;
  font-size: 0;
  line-height: 0;
  letter-spacing: 0;
  overflow: hidden;
}

.profileCard {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.profileHero {
  padding: 0;
}

.profileHeroCard {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.profileAvatar,
.profileAvatarLg {
  width: 78px;
  height: 78px;
  flex: 0 0 78px;
}

.profileAvatar {
  border-radius: 50%;
  border: 2px solid rgba(111, 230, 200, 0.55);
  background: rgba(255, 255, 255, 0.04);
  box-shadow:
    0 0 0 4px rgba(111, 230, 200, 0.08),
    0 10px 24px rgba(0, 0, 0, 0.2);
}

.profileHeroInfo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  align-items: flex-start;
}

.profileHandleRow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.profileHandle {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--text);
}

.profileHandleRow .statusDot {
  display: none;
}

.profileVisibilityBadge,
.profileRoleBadge,
.profileStatusBadge {
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: none;
}

.profileVisibilityBadge {
  border-color: rgba(111, 230, 200, 0.22);
  background: rgba(111, 230, 200, 0.08);
}

.profileRoleBadge {
  border-color: rgba(122, 212, 255, 0.2);
  background: rgba(122, 212, 255, 0.1);
}

.profileStatusBadge,
.profileCompanyName {
  color: var(--muted);
}

.profileDistrictBar {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(111, 230, 200, 0.24);
  background: rgba(111, 230, 200, 0.08);
}

.profileDistrictChip {
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.profileCompanyName {
  align-self: flex-start;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  font-size: 11px;
  letter-spacing: 0.03em;
}

.profileBio {
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 48ch;
}

.profileTabs {
  display: none;
}

.profileStatsInline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  justify-content: stretch;
  gap: 8px;
  padding: 14px;
  margin: 0;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.profileStatInline {
  position: relative;
  flex: 1 1 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
}

.profileStatInline:not(:last-child)::after {
  display: none;
}

.profileStatInline .profileStatValue {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}

.profileStatInline .profileStatLabel {
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.profileIdCard {
  padding-top: 0;
}

.profileIdBody {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.profileIdBody > * {
  flex: 1 1 0;
}

.profilePrimaryBtn,
.profileSecondaryBtn {
  min-height: 40px;
  border-radius: 12px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: none;
  justify-content: center;
}

.profilePrimaryBtn {
  border: 1px solid rgba(111, 230, 200, 0.32);
  background: rgba(111, 230, 200, 0.12);
  color: var(--text);
}

.profileSecondaryBtn {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
}

.profilePrimaryBtn:hover,
.profileSecondaryBtn:hover {
  transform: none;
  box-shadow: none;
}

.profilePosts {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.postsHeader {
  margin-bottom: 0;
}

.profilePage .profilePosts .sectionTitle,
.profilePage .profileEdit .sectionTitle,
.profilePage .profileSecondary .sectionTitle {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0;
}

.postsGrid {
  gap: 8px;
}

.postThumbBtn {
  border-radius: 14px;
}

.postThumb {
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: none;
}

.profileEmpty {
  min-height: 72px;
  border-radius: 16px;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.02);
  color: var(--muted);
  font-size: 14px;
}

.profilePage .profileEdit {
  margin-top: 4px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.profilePage .profileEdit .fileForm {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.profilePage .profileEdit input,
.profilePage .profileEdit textarea,
.profilePage .profileEdit select {
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
}

.profilePage .profileEdit .primaryBtn {
  width: auto;
  align-self: flex-start;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 12px;
}

@media (min-width: 720px) {
  .profilePage .content {
    padding: 24px 24px 120px;
  }
}

@media (max-width: 560px) {
  .profilePage .content {
    padding: 12px 12px 108px;
  }

  .profileHeroCard {
    grid-template-columns: 1fr;
    align-items: flex-start;
  }

  .profileAvatar,
  .profileAvatarLg {
    width: 88px;
    height: 88px;
    flex-basis: 88px;
  }

  .profileHandle {
    font-size: 20px;
  }

  .profileStatsInline {
    grid-template-columns: 1fr;
  }

  .profileIdBody {
    flex-direction: column;
  }

  .profileIdBody > * {
    width: 100%;
  }
}

.profileOwnerPage .content {
  padding: 12px 12px 110px;
  gap: 12px;
}

.profileOwnerPage .profileOwnerOverview {
  gap: 10px;
}

.profileOwnerPage .profileOwnerHeroCard,
.profileOwnerPage .profileSectionCard,
.profileOwnerPage .profileOwnerContentCard,
.profileOwnerPage .profileOwnerEditCard {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  background:
    radial-gradient(circle at top right, rgba(122, 212, 255, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
    rgba(11, 16, 24, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 16px 34px rgba(0, 0, 0, 0.2);
}

.profileOwnerPage .profileOwnerHeroCard::before {
  content: "";
  position: absolute;
  top: -56px;
  right: -40px;
  width: 148px;
  height: 148px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(111, 230, 200, 0.14) 0%, rgba(111, 230, 200, 0) 72%);
  pointer-events: none;
}

.profileOwnerPage .profileOwnerHeroCard,
.profileOwnerPage .profileOwnerContentCard,
.profileOwnerPage .profileOwnerEditCard {
  padding: 14px;
}

.profileOwnerPage .profileSectionCard {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
}

.profileOwnerPage .profileSectionHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.profileOwnerPage .profileSectionCard .sectionTitle,
.profileOwnerPage .profilePosts .sectionTitle,
.profileOwnerPage .profileEdit .sectionTitle {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(186, 197, 210, 0.68);
}

.profileOwnerPage .profileSectionLead {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: rgba(244, 249, 255, 0.94);
}

.profileOwnerPage .profileOwnerIdentity {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.profileOwnerPage .profileAvatarHalo {
  width: 84px;
  height: 84px;
  padding: 3px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(122, 212, 255, 0.96), rgba(111, 230, 200, 0.94));
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 16px 32px rgba(8, 14, 24, 0.34),
    0 0 28px rgba(111, 230, 200, 0.12);
}

.profileOwnerPage .profileAvatar,
.profileOwnerPage .profileAvatarLg {
  width: 100%;
  height: 100%;
  flex: none;
}

.profileOwnerPage .profileAvatar {
  border: none;
  border-radius: 50%;
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.16), transparent 42%),
    linear-gradient(180deg, rgba(14, 20, 30, 0.98), rgba(7, 10, 16, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 24px rgba(0, 0, 0, 0.22);
}

.profileOwnerPage .profileOwnerHeroInfo {
  gap: 6px;
  align-items: flex-start;
}

.profileOwnerPage .profileOwnerTitleRow {
  gap: 7px;
}

.profileOwnerPage .profileOwnerName {
  font-size: clamp(23px, 5.5vw, 29px);
  font-weight: 790;
  letter-spacing: -0.04em;
  line-height: 1.02;
}

.profileOwnerPage .profileVisibilityBadgeCompact {
  min-height: 22px;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.profileOwnerPage .profileOwnerMeta {
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(195, 205, 216, 0.74);
}

.profileOwnerPage .profileOwnerHandle {
  color: rgba(244, 248, 255, 0.92);
  font-weight: 620;
}

.profileOwnerPage .profileMetaDot {
  color: rgba(154, 166, 179, 0.54);
}

.profileOwnerPage .profileOwnerBadgeRow {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.profileOwnerPage .profileDistrictBar {
  min-height: 26px;
  padding: 0 10px;
}

.profileOwnerPage .profileDistrictChip,
.profileOwnerPage .profileRoleBadge,
.profileOwnerPage .profileStatusBadge,
.profileOwnerPage .profileCompanyName {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.profileOwnerPage .profileRoleBadge,
.profileOwnerPage .profileStatusBadge,
.profileOwnerPage .profileCompanyName {
  min-height: 26px;
  padding: 0 9px;
}

.profileOwnerPage .profileBio {
  margin-top: 2px;
  max-width: none;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(206, 215, 227, 0.8);
}

.profileOwnerPage .profileActionRow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.profileOwnerPage .profileQuickActionBtn {
  min-height: 38px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.025)),
    rgba(255, 255, 255, 0.02);
  color: rgba(242, 247, 252, 0.94);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.profileOwnerPage .profileQuickActionBtn:hover {
  transform: translateY(-1px);
  text-decoration: none;
  border-color: rgba(255, 255, 255, 0.14);
}

.profileOwnerPage .profileQuickActionBtn.is-primary {
  border-color: rgba(111, 230, 200, 0.34);
  background:
    linear-gradient(180deg, rgba(111, 230, 200, 0.22), rgba(111, 230, 200, 0.12)),
    rgba(111, 230, 200, 0.08);
  color: rgba(247, 251, 255, 0.98);
}

.profileOwnerPage .profileQuickActionBtn:disabled {
  opacity: 0.48;
  cursor: not-allowed;
  transform: none;
}

.profileOwnerPage .profileOwnerStatsInline {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 0;
  gap: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.profileOwnerPage .profileOwnerStatsInline .profileStatInline {
  padding: 2px 10px 0;
}

.profileOwnerPage .profileOwnerStatsInline .profileStatInline:not(:last-child)::after {
  display: block;
  content: "";
  position: absolute;
  top: 10px;
  right: 0;
  bottom: 10px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.14), transparent);
}

.profileOwnerPage .profileOwnerStatsInline .profileStatValue {
  font-size: 26px;
  font-weight: 780;
  letter-spacing: -0.04em;
  line-height: 1;
}

.profileOwnerPage .profileOwnerStatsInline .profileStatLabel {
  margin-top: 5px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: rgba(184, 195, 208, 0.66);
}

.profileOwnerPage .profileOwnerContentCard,
.profileOwnerPage .profileOwnerEditCard {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.profileOwnerPage .postsGrid {
  gap: 8px;
}

.profileOwnerPage .postThumbBtn,
.profileOwnerPage .postThumb {
  border-radius: 18px;
}

.profileOwnerPage .postThumb {
  border: 1px solid rgba(255, 255, 255, 0.06);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015)),
    rgba(12, 17, 24, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 12px 24px rgba(0, 0, 0, 0.16);
}

.profileOwnerPage .profileEmpty {
  min-height: 96px;
  padding: 16px;
  border-radius: 18px;
  font-size: 13px;
}

.profileOwnerPage .profileEdit .fileForm {
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
}

.profileOwnerPage .profileEdit label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(184, 195, 208, 0.7);
}

.profileOwnerPage .profileEdit input,
.profileOwnerPage .profileEdit textarea,
.profileOwnerPage .profileEdit select {
  min-height: 44px;
  padding: 11px 13px;
}

.profileOwnerPage .profileEdit textarea {
  min-height: 110px;
}

.profileOwnerPage .profileEdit .primaryBtn {
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
}

@media (min-width: 720px) {
  .profileOwnerPage .content {
    padding: 14px 14px 118px;
  }
}

@media (max-width: 560px) {
  .profileOwnerPage .content {
    padding: 12px 12px 108px;
    gap: 10px;
  }

  .profileOwnerPage .profileOwnerHeroCard,
  .profileOwnerPage .profileSectionCard,
  .profileOwnerPage .profileOwnerContentCard,
  .profileOwnerPage .profileOwnerEditCard {
    border-radius: 18px;
  }

  .profileOwnerPage .profileOwnerHeroCard,
  .profileOwnerPage .profileOwnerContentCard,
  .profileOwnerPage .profileOwnerEditCard {
    padding: 12px;
  }

  .profileOwnerPage .profileSectionCard {
    padding: 11px 12px;
  }

  .profileOwnerPage .profileOwnerIdentity {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 10px;
    align-items: flex-start;
  }

  .profileOwnerPage .profileAvatarHalo {
    width: 76px;
    height: 76px;
  }

  .profileOwnerPage .profileOwnerName {
    font-size: 24px;
  }

  .profileOwnerPage .profileOwnerStatsInline .profileStatInline {
    padding: 2px 6px 0;
  }
}

.profileViewContent {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.profileViewNotice {
  padding: 0 0 14px;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
  box-shadow: none;
}

.profilePublicActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.profilePublicActions > * {
  flex: 1 1 100%;
  margin: 0;
}

.profilePublicActions .role-pill {
  min-height: 40px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.profilePublicHeroCard {
  position: relative;
  padding-right: 56px;
}

.profileSafetyMenuWrap {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
}

.profileMenuBtn {
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border-radius: 12px;
  font-size: 18px;
  line-height: 1;
}

.profileSafetyMenu {
  min-width: 160px;
}

.profileSafetyMenu form {
  margin: 0;
}

.profilePublicMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

.profilePublicStats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.profilePublicPanel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.profilePublicPanel .sectionTitle {
  margin-bottom: 0;
}

.profilePublicLockup {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  grid-column: 1 / -1;
}

@media (max-width: 560px) {
  .profilePublicStats {
    grid-template-columns: 1fr;
  }
}

.idShell {
  max-width: 560px;
  margin: 18px auto 28px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.idTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.idTopTag {
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}

.idCard {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.idCardHeader {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.idLabel {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.idTitle {
  font-size: 20px;
  letter-spacing: 0.03em;
}

.idSub {
  font-size: 13px;
  color: var(--muted);
}

.idGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.idGridItem {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.idValue {
  font-size: 14px;
  color: var(--ink);
}

.idQrBlock {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 16px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
}

.idQrBlock img {
  width: 200px;
  height: 200px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #0b0f16;
}

.idQrText {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.idQrTitle {
  font-size: 14px;
  font-weight: 700;
}

.idQrDesc {
  font-size: 12px;
  color: var(--muted);
}

.idQrCode {
  font-size: 11px;
  color: var(--muted);
  word-break: break-all;
}

.idFooter {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.idCtaBody {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.idCtaText {
  color: var(--muted);
  font-size: 13px;
  max-width: 320px;
}

.idCtaBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(125, 211, 252, 0.45);
  background: rgba(125, 211, 252, 0.12);
  color: var(--ink);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}

.idCtaBtn:hover {
  text-decoration: none;
  border-color: rgba(125, 211, 252, 0.6);
}

@media (max-width: 560px) {
  .idShell {
    margin: 0;
    padding: 12px;
  }

  .idQrBlock {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }

  .idQrBlock img {
    width: 220px;
    height: 220px;
  }
}

/* Comms iPhone-style refactor */
body.comms-mode .content {
  padding: 0 0 calc(var(--nav-height) + env(safe-area-inset-bottom));
}

#tab-comms {
  height: calc(100vh - var(--nav-height) - env(safe-area-inset-bottom));
}

#tab-comms .comms-shell {
  --comms-left-pane: clamp(320px, 33vw, 360px);
  --comms-chat-max: 840px;
  width: 100%;
  max-width: 980px;
  height: 100%;
  min-height: 0;
  margin: 0 auto;
  border-radius: 0;
  background: rgba(8, 11, 17, 0.94);
  overflow: hidden;
}

#tab-comms .commsTopBar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 152px 10px 12px;
  background: rgba(8, 11, 17, 0.92);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

#tab-comms .commsTopTitle {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

#tab-comms .commsTopSearch {
  position: relative;
  display: block;
  margin: 0;
}

#tab-comms .commsSearchIcon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(235, 238, 243, 0.52);
  pointer-events: none;
}

#tab-comms .commsSearchIcon svg {
  width: 16px;
  height: 16px;
  display: block;
}

#tab-comms .commsTopSearch input {
  min-height: 36px;
  padding: 8px 12px 8px 34px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: rgba(118, 118, 128, 0.24);
  color: var(--text);
}

#tab-comms .commsTopSearch input:focus {
  outline: none;
  border-color: rgba(122, 212, 255, 0.45);
  background: rgba(118, 118, 128, 0.3);
}

#tab-comms .commsTopActions {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 6px;
}

#tab-comms .commsIconBtn {
  width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  display: inline-grid;
  place-items: center;
  line-height: 1;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  box-shadow: none;
}

#tab-comms .commsIconBtn:hover {
  text-decoration: none;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.22);
  transform: none;
}

#tab-comms .commsTopMenu {
  position: relative;
}

#tab-comms .commsMenu {
  min-width: 150px;
}

#tab-comms .commsTabs {
  display: flex;
  gap: 16px;
  padding: 0 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(8, 11, 17, 0.9);
}

#tab-comms .comms-tab {
  position: relative;
  width: auto;
  min-height: 42px;
  padding: 0 8px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: rgba(235, 238, 243, 0.58);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: color 150ms ease, background 160ms ease;
}

#tab-comms .comms-tab::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 4px;
  height: 2px;
  border-radius: 999px;
  background: var(--accent);
  opacity: 0;
  transform: scaleX(0.45);
  transition: opacity 170ms ease, transform 170ms ease;
}

#tab-comms .comms-tab.active {
  color: var(--text);
  font-weight: 700;
  background: rgba(122, 212, 255, 0.1);
  box-shadow: none;
}

#tab-comms .comms-tab.active::after {
  opacity: 1;
  transform: scaleX(1);
}

#tab-comms .comms-body {
  flex: 1;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

#tab-comms .comms-panel {
  display: none;
  min-height: 0;
  flex: 1;
}

#tab-comms .comms-panel.active {
  display: flex;
  animation: commsPanelIn 170ms ease-out;
}

@keyframes commsPanelIn {
  from {
    opacity: 0;
    transform: translateY(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#tab-comms .commsLayout {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--comms-left-pane) minmax(0, 1fr);
}

#tab-comms .commsList {
  min-height: 0;
  overflow-y: auto;
  padding: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.02);
  background: rgba(255, 255, 255, 0.02);
}

#tab-comms .dm-list {
  gap: 0;
}

#tab-comms .dm-row,
#tab-comms .commsRow {
  border: none;
  border-radius: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
  padding: 11px 12px;
}

#tab-comms .dm-row:hover,
#tab-comms .commsRow:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
}

#tab-comms .commsRow.is-active {
  background: rgba(122, 212, 255, 0.08);
}

#tab-comms .dm-avatar,
#tab-comms .commsRowAvatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(122, 212, 255, 0.16);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

#tab-comms .dm-main,
#tab-comms .commsRowMain {
  gap: 4px;
}

#tab-comms .dm-name,
#tab-comms .commsRowName {
  font-size: 14px;
  font-weight: 600;
}

#tab-comms .dm-time,
#tab-comms .commsRowTime {
  font-size: 11px;
  color: rgba(235, 238, 243, 0.44);
}

#tab-comms .dm-preview,
#tab-comms .commsRowPreview {
  font-size: 12px;
  color: rgba(235, 238, 243, 0.62);
}

#tab-comms .dm-dot {
  width: 7px;
  height: 7px;
}

#tab-comms .commsChat {
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.01);
}

#tab-comms .commsChatHeader {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(8, 11, 17, 0.88);
}

#tab-comms .commsChatTitle {
  font-size: 15px;
  font-weight: 600;
}

#tab-comms .commsBackBtn {
  display: none;
  width: auto;
  min-height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--accent);
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
}

#tab-comms .commsChatBody {
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 24px 18px 80px;
}

#tab-comms .commsEmpty {
  margin: 0;
  font-size: 13px;
  color: rgba(235, 238, 243, 0.56);
}

#tab-comms .chat-list,
#tab-comms .global-list {
  flex: 1;
  min-height: 0;
  width: min(100%, var(--comms-chat-max));
  margin: 0;
  margin-inline: auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 14px 84px;
}

#tab-comms .chat-row {
  width: 100%;
  display: flex;
}

#tab-comms .chat-row.mine {
  justify-content: flex-end;
}

#tab-comms .chat-row.other,
#tab-comms .chat-row.admin {
  justify-content: flex-start;
}

#tab-comms .bubble {
  max-width: 68%;
  border: none;
  border-radius: 15px;
  padding: 8px 11px 6px;
  box-shadow: none;
  font-size: 14px;
  line-height: 1.35;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

#tab-comms .chat-row.mine .bubble {
  background: rgba(122, 212, 255, 0.28);
  color: #ffffff;
  border-bottom-right-radius: 5px;
}

#tab-comms .chat-row.other .bubble,
#tab-comms .chat-row.admin .bubble,
#tab-comms .global-bubble {
  background: rgba(255, 255, 255, 0.11);
  border-bottom-left-radius: 5px;
}

#tab-comms .bubble .meta {
  margin-top: 3px;
  font-size: 9px;
  line-height: 1.2;
  opacity: 0.48;
  color: currentColor;
}

#tab-comms .chat-row.mine .bubble .meta {
  opacity: 0.58;
  text-align: right;
}

#tab-comms .bubble-image {
  margin-top: 6px;
}

#tab-comms .bubble-image img,
#tab-comms .bubble-image video {
  border: none;
  border-radius: 12px;
}

#tab-comms .comms-input-rail {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(12, 16, 24, 0.95);
  box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(12px);
}

#tab-comms .comms-input-rail .message-input,
#tab-comms .comms-input-rail .global-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  width: min(100%, var(--comms-chat-max));
  margin: 0 auto;
}

#tab-comms .comms-input-rail input {
  min-height: 40px;
  padding: 10px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(118, 118, 128, 0.26);
  font-size: 14px;
}

#tab-comms .commsSendBtn {
  width: 32px;
  height: 32px;
  min-height: 32px;
  min-width: 32px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(233, 238, 246, 0.92);
  display: inline-grid;
  place-items: center;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

#tab-comms .commsSendBtn:hover {
  border-color: rgba(122, 212, 255, 0.42);
  color: rgba(122, 212, 255, 0.95);
  background: rgba(122, 212, 255, 0.12);
  box-shadow: none;
  transform: none;
}

#tab-comms .commsSendBtn svg {
  width: 13px;
  height: 13px;
  display: block;
}

#tab-comms .commsList,
#tab-comms .chat-list,
#tab-comms .global-list,
body {
  scrollbar-width: thin;
  scrollbar-color: rgba(235, 238, 243, 0.24) transparent;
}

body::-webkit-scrollbar,
#tab-comms .commsList::-webkit-scrollbar,
#tab-comms .chat-list::-webkit-scrollbar,
#tab-comms .global-list::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

body::-webkit-scrollbar-track,
#tab-comms .commsList::-webkit-scrollbar-track,
#tab-comms .chat-list::-webkit-scrollbar-track,
#tab-comms .global-list::-webkit-scrollbar-track {
  background: transparent;
}

body::-webkit-scrollbar-thumb,
#tab-comms .commsList::-webkit-scrollbar-thumb,
#tab-comms .chat-list::-webkit-scrollbar-thumb,
#tab-comms .global-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
  background-color: rgba(235, 238, 243, 0.22);
}

body::-webkit-scrollbar-thumb:hover,
#tab-comms .commsList::-webkit-scrollbar-thumb:hover,
#tab-comms .chat-list::-webkit-scrollbar-thumb:hover,
#tab-comms .global-list::-webkit-scrollbar-thumb:hover {
  background-color: rgba(235, 238, 243, 0.34);
}

/* A 9px scrollbar reads fine with a mouse. On a phone it is a permanent strip
   down the edge of the screen, because a touch browser would otherwise overlay a
   transient scrollbar only while the finger is moving -- asking for a sized one
   opts out of that and reserves real estate instead.

   Applied to every scroll container rather than just body: the app styles the
   body bar explicitly and leaves dozens of inner regions on the browser default,
   and any of them can show the same strip. A phone should never render a
   persistent scrollbar anywhere, so scope it by input type and let the platform
   supply its own overlay. Desktop is untouched and keeps the styled bar. */
@media (pointer: coarse) {
  * {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  *::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
}

/* Hide native chrome on app-internal scroll regions while preserving scroll behavior. */
.activityDiscoverySearchRail,
.activityPrimeTrack--postsRail,
.activityPrimeTrack--peopleRail,
.activityFilterPopover,
.activityViewerCommentsList,
.city-search-results,
.cityPostCaption.is-expanded,
.cityPostActionSheetBody,
.auth-card-scroll,
.dmInfoSheet,
.dmChatStream,
body.dmChatScreen .dmChatStream,
.mapShareSheetPicker,
.mapItemBody,
.mapItemDescription,
.profileSocialList,
.profileIdentityMenu,
.cpSheetCard {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.activityDiscoverySearchRail::-webkit-scrollbar,
.activityPrimeTrack--postsRail::-webkit-scrollbar,
.activityPrimeTrack--peopleRail::-webkit-scrollbar,
.activityFilterPopover::-webkit-scrollbar,
.activityViewerCommentsList::-webkit-scrollbar,
.city-search-results::-webkit-scrollbar,
.cityPostCaption.is-expanded::-webkit-scrollbar,
.cityPostActionSheetBody::-webkit-scrollbar,
.auth-card-scroll::-webkit-scrollbar,
.dmInfoSheet::-webkit-scrollbar,
.dmChatStream::-webkit-scrollbar,
body.dmChatScreen .dmChatStream::-webkit-scrollbar,
.mapShareSheetPicker::-webkit-scrollbar,
.mapItemBody::-webkit-scrollbar,
.mapItemDescription::-webkit-scrollbar,
.profileSocialList::-webkit-scrollbar,
.profileIdentityMenu::-webkit-scrollbar,
.cpSheetCard::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

@media (max-width: 900px) {
  #tab-comms .commsLayout {
    grid-template-columns: 1fr;
  }

  #tab-comms .commsList {
    border-right: none;
  }

  #tab-comms .commsBackBtn {
    display: inline-flex;
    align-items: center;
  }

  #tab-comms .comms-panel[data-mobile-view="list"] .commsChat {
    display: none;
  }

  #tab-comms .comms-panel[data-mobile-view="chat"] .commsList {
    display: none;
  }

  #tab-comms .chat-list,
  #tab-comms .global-list {
    width: 100%;
    padding: 8px 10px 82px;
  }

  #tab-comms .bubble {
    max-width: 84%;
  }
}

.creatorHubPage,
.creatorBuilderPage {
  --creator-panel: linear-gradient(180deg, rgba(20, 29, 43, 0.96), rgba(12, 18, 28, 0.98));
  --creator-panel-soft: rgba(255, 255, 255, 0.04);
  --creator-line: rgba(255, 255, 255, 0.08);
  --creator-accent: #7ad4ff;
  --creator-accent-strong: #9fe1ff;
  --creator-warm: #ffb65b;
  --creator-danger: #ff8f8f;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.creatorHero,
.creatorBuilderHero,
.creatorFilterGroup,
.creatorStepCard,
.creatorEmptyState,
.creatorItemCard,
.creatorCreateSheet,
.creatorMiniPlace,
.creatorMapBlock,
.creatorReviewCard {
  background: var(--creator-panel);
  border: 1px solid var(--creator-line);
  box-shadow: 0 18px 42px rgba(3, 8, 16, 0.26);
}

.creatorHero,
.creatorBuilderHero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  overflow: hidden;
  background:
    radial-gradient(circle at top right, rgba(122, 212, 255, 0.14), transparent 42%),
    linear-gradient(180deg, rgba(20, 29, 43, 0.98), rgba(11, 17, 27, 0.98));
}

.creatorHeroCopy,
.creatorBuilderHeroCopy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.creatorHeroEyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(159, 225, 255, 0.86);
}

.creatorHeroTitle {
  margin: 0;
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: rgba(248, 250, 252, 0.98);
}

.creatorHeroMeta,
.creatorStepMeta,
.creatorSectionMeta,
.creatorSheetMeta,
.creatorEmptyMeta,
.creatorCreateChoiceMeta,
.creatorPlacePickMeta,
.creatorModeMeta,
.creatorMiniPlaceMeta,
.creatorLocationMeta,
.creatorFieldHint,
.creatorInlineHint {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(206, 215, 226, 0.76);
}

.creatorPrimaryAction {
  width: auto;
  min-width: 116px;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(12, 80, 112, 0.28);
}

.creatorQuickStats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.creatorStatCard {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 14px 16px;
  border-radius: 18px;
  text-decoration: none;
  color: var(--text);
  background: linear-gradient(180deg, rgba(18, 26, 38, 0.92), rgba(13, 18, 28, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.creatorStatCard.is-active,
.creatorStatCard:hover,
.creatorStatCard:focus-visible {
  text-decoration: none;
  border-color: rgba(122, 212, 255, 0.28);
  background: linear-gradient(180deg, rgba(20, 32, 47, 0.98), rgba(13, 20, 31, 0.98));
  outline: none;
}

.creatorStatLabel {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(201, 210, 223, 0.68);
}

.creatorStatValue {
  font-size: 24px;
  line-height: 1;
  color: rgba(248, 250, 252, 0.98);
}

.creatorFilterGroup,
.creatorStepCard {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.creatorFilterHeader,
.creatorStepHeader,
.creatorMiniPlaceHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.creatorSectionTitle,
.creatorStepTitle {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: rgba(246, 248, 252, 0.98);
}

.creatorFilterRow,
.creatorChoiceGrid,
.creatorLocationModes,
.creatorCreateChoices,
.creatorPlacePickerList,
.creatorInfoGrid,
.creatorActionRow,
.creatorInlineActions,
.creatorTypeSwitch {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.creatorFilterTab,
.creatorChoiceCard,
.creatorModeCard,
.creatorTypeSwitchBtn,
.creatorCreateChoice,
.creatorPlacePickBtn,
.creatorActionBtn {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
  color: rgba(237, 242, 247, 0.92);
  border-radius: 16px;
  text-decoration: none;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.creatorFilterTab:hover,
.creatorFilterTab:focus-visible,
.creatorChoiceCard:hover,
.creatorChoiceCard:focus-visible,
.creatorModeCard:hover,
.creatorModeCard:focus-visible,
.creatorTypeSwitchBtn:hover,
.creatorTypeSwitchBtn:focus-visible,
.creatorCreateChoice:hover,
.creatorCreateChoice:focus-visible,
.creatorPlacePickBtn:hover,
.creatorPlacePickBtn:focus-visible,
.creatorActionBtn:hover,
.creatorActionBtn:focus-visible {
  text-decoration: none;
  border-color: rgba(122, 212, 255, 0.24);
  background: rgba(122, 212, 255, 0.09);
  outline: none;
  transform: translateY(-1px);
}

.creatorFilterTab,
.creatorChoiceCard,
.creatorTypeSwitchBtn {
  min-height: 40px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
}

.creatorFilterTab {
  flex: 1 1 0;
}

.creatorFilterCount {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  font-size: 11px;
}

.creatorFilterTab.is-active,
.creatorChoiceCard.is-active,
.creatorModeCard.is-active,
.creatorPlacePickBtn.is-active,
.creatorTypeSwitchBtn.is-active {
  border-color: rgba(122, 212, 255, 0.3);
  background: linear-gradient(180deg, rgba(122, 212, 255, 0.18), rgba(65, 132, 170, 0.1));
  color: rgba(248, 250, 252, 0.98);
}

.creatorChoiceGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.creatorChoiceGrid.is-compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.creatorOtherCategoryField {
  display: grid;
  gap: 8px;
}

.creatorLocationSecondary,
.creatorLocationBranch {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.creatorLocationSecondary {
  align-items: flex-start;
}

.creatorPlacePickerList {
  flex-direction: column;
  flex-wrap: nowrap;
}

.creatorChoiceCard,
.creatorModeCard,
.creatorCreateChoice,
.creatorPlacePickBtn {
  min-height: 58px;
  padding: 12px 14px;
  text-align: left;
}

.creatorChoiceLabel,
.creatorModeTitle,
.creatorCreateChoiceTitle,
.creatorPlacePickTitle,
.creatorItemTitle {
  font-size: 15px;
  font-weight: 800;
  color: rgba(246, 248, 252, 0.98);
}

.creatorModeCard,
.creatorCreateChoice,
.creatorPlacePickBtn {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 0;
}

.creatorSecondaryLinkBtn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--creator-accent-strong);
  font-size: 13px;
  font-weight: 700;
}

.creatorSecondaryLinkBtn:hover,
.creatorSecondaryLinkBtn:focus-visible {
  text-decoration: underline;
  outline: none;
}

.creatorTypeSwitch {
  padding: 4px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.creatorTypeSwitchBtn {
  min-width: 92px;
}

.creatorLocationCard,
.creatorCallout,
.creatorAudienceBlock,
.creatorReviewCard,
.creatorInfoPill {
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
}

.creatorLocationCard,
.creatorCallout,
.creatorAudienceBlock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
}

.creatorLocationLabel,
.creatorReviewLabel {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(201, 210, 223, 0.68);
}

.creatorLocationTitle,
.creatorAudienceTitle {
  font-size: 15px;
  font-weight: 800;
  color: rgba(248, 250, 252, 0.98);
}

.creatorLocationDetails {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.creatorLocationCoords {
  font-size: 12px;
  color: rgba(206, 215, 226, 0.68);
}

.creatorTextBtn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--creator-accent-strong);
  font-size: 13px;
  font-weight: 700;
  padding: 0;
}

.creatorMapBlock,
.creatorMiniPlace {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
}

.creatorMapToolbar {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.creatorSearchField {
  flex: 1 1 220px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.creatorMapToolbar .missionButton,
.creatorInlineActions .missionButton,
.creatorSubmitRow .missionButton {
  width: auto;
}

.creatorPickerMap {
  min-height: 260px;
  border-radius: 16px;
  overflow: hidden;
}

.creatorInlineHint.is-error {
  color: #ffb0b0;
}

.creatorVisibilityBlock,
.creatorBuilderForm {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.creatorCallout {
  align-items: flex-start;
  justify-content: flex-start;
}

.creatorCalloutIcon {
  width: 18px;
  height: 18px;
  color: var(--creator-warm);
  flex-shrink: 0;
}

.creatorCalloutIcon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.creatorDisclosure {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  padding: 0 14px;
}

.creatorDisclosure summary {
  cursor: pointer;
  min-height: 48px;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
  color: rgba(243, 246, 250, 0.94);
}

.creatorDisclosureBody {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0 0 14px;
}

.creatorReviewCard {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
}

.creatorReviewRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}

.creatorReviewRow strong {
  text-align: right;
  color: rgba(246, 248, 252, 0.98);
}

.creatorSubmitRow {
  justify-content: flex-end;
}

.creatorItemList {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.creatorItemCard {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  border-radius: 20px;
}

.creatorItemCard.is-event {
  background:
    radial-gradient(circle at top right, rgba(122, 212, 255, 0.08), transparent 38%),
    var(--creator-panel);
}

.creatorItemCard.is-mission {
  background:
    radial-gradient(circle at top right, rgba(255, 182, 91, 0.08), transparent 38%),
    var(--creator-panel);
}

.creatorItemTop,
.creatorItemHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.creatorBadgeRow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.creatorEditLink {
  color: var(--creator-accent-strong);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.creatorItemBody {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.creatorItemTitle {
  margin: 0;
}

.creatorItemType,
.creatorRejectionNote {
  font-size: 13px;
  color: rgba(214, 222, 234, 0.76);
}

.creatorRejectionNote {
  color: #ffb0b0;
}

.creatorInfoGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.creatorInfoPill {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  min-width: 0;
}

.creatorActionRow {
  align-items: center;
}

.creatorActionRow form {
  margin: 0;
}

.creatorActionBtn {
  min-height: 38px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}

.creatorActionBtn.is-danger {
  border-color: rgba(255, 143, 143, 0.2);
  color: #ffd0d0;
}

.creatorActionBtn[disabled] {
  opacity: 0.45;
  pointer-events: none;
}

.creatorEmptyState,
.creatorEmptyPicker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 18px;
  text-align: center;
}

.creatorEmptyIcon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--creator-accent-strong);
  background: rgba(122, 212, 255, 0.1);
}

.creatorEmptyIcon svg {
  width: 20px;
  height: 20px;
  display: block;
}

.creatorEmptyTitle {
  font-size: 18px;
  font-weight: 800;
  color: rgba(248, 250, 252, 0.98);
}

.creatorCreateSheet .sheetBody {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.creatorCreateChoice,
.creatorPlacePickBtn {
  width: 100%;
}

.creatorHubPage {
  gap: 18px;
  padding-bottom: 108px;
}

.creatorCreateLaunch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 8px 0 2px;
  text-align: center;
}

.creatorLaunchCopy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 520px;
}

.creatorLaunchTitle {
  margin: 0;
  font-size: clamp(30px, 7vw, 44px);
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: rgba(248, 250, 252, 0.98);
}

.creatorLaunchMeta {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(206, 215, 226, 0.76);
}

.creatorLaunchActions {
  width: 100%;
  max-width: 720px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.creatorLaunchButton {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 22px;
  border-radius: 22px;
  text-decoration: none;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: rgba(248, 250, 252, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 16px 34px rgba(3, 8, 16, 0.22);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.creatorLaunchButton.is-event {
  background: linear-gradient(135deg, rgba(87, 168, 245, 0.96), rgba(48, 112, 181, 0.96));
}

.creatorLaunchButton.is-place {
  background: linear-gradient(135deg, rgba(242, 158, 79, 0.96), rgba(188, 110, 41, 0.96));
}

.creatorLaunchButton:hover,
.creatorLaunchButton:focus-visible {
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 18px 36px rgba(3, 8, 16, 0.28);
  border-color: rgba(255, 255, 255, 0.16);
  outline: none;
}

.creatorStatRow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.creatorStatLink {
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 14px;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(237, 242, 247, 0.92);
}

.creatorStatLink.is-active,
.creatorStatLink:hover,
.creatorStatLink:focus-visible {
  text-decoration: none;
  border-color: rgba(122, 212, 255, 0.28);
  background: rgba(122, 212, 255, 0.08);
  outline: none;
}

.creatorStatText {
  font-size: 12px;
  font-weight: 700;
  color: rgba(214, 222, 234, 0.76);
}

.creatorStatNumber {
  font-size: 16px;
  line-height: 1;
  color: rgba(248, 250, 252, 0.98);
}

.creatorFilterStack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.creatorPickerFilters {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.creatorHubFilterRow {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.creatorHubFilterRow::-webkit-scrollbar {
  display: none;
}

.creatorHubFilterLink {
  min-height: 36px;
  flex: 1 0 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.02);
  color: rgba(218, 227, 239, 0.82);
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.creatorHubFilterRow.is-status .creatorHubFilterLink {
  min-width: 86px;
}

.creatorHubFilterLink.is-active,
.creatorHubFilterLink:hover,
.creatorHubFilterLink:focus-visible {
  text-decoration: none;
  color: rgba(248, 250, 252, 0.98);
  border-color: rgba(122, 212, 255, 0.28);
  background: rgba(122, 212, 255, 0.1);
  outline: none;
}

.creatorPickerButton {
  appearance: none;
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.025);
  color: rgba(237, 242, 247, 0.92);
}

.creatorPickerButton:hover,
.creatorPickerButton:focus-visible {
  border-color: rgba(122, 212, 255, 0.24);
  background: rgba(122, 212, 255, 0.06);
  outline: none;
}

.creatorPickerLabel {
  font-size: 13px;
  font-weight: 700;
  color: rgba(206, 215, 226, 0.74);
}

.creatorPickerValueGroup {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.creatorPickerValue {
  font-size: 14px;
  font-weight: 700;
  color: rgba(248, 250, 252, 0.96);
}

.creatorPickerIcon {
  width: 14px;
  height: 14px;
  color: rgba(206, 215, 226, 0.62);
  flex-shrink: 0;
}

.creatorPickerIcon svg {
  width: 14px;
  height: 14px;
  display: block;
}

.creatorFilterSheet .sheetBody {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.creatorFilterChoice {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  text-decoration: none;
  color: rgba(237, 242, 247, 0.92);
  font-size: 14px;
  font-weight: 700;
}

.creatorFilterChoice.is-active,
.creatorFilterChoice:hover,
.creatorFilterChoice:focus-visible {
  text-decoration: none;
  color: rgba(248, 250, 252, 0.98);
  border-color: rgba(122, 212, 255, 0.28);
  background: rgba(122, 212, 255, 0.08);
  outline: none;
}

.creatorItemList {
  gap: 10px;
}

.creatorHubCard {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px 15px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(14, 20, 31, 0.88);
  box-shadow: 0 12px 24px rgba(3, 8, 16, 0.18);
}

.creatorHubCard.is-event {
  border-color: rgba(122, 212, 255, 0.16);
}

.creatorHubCard.is-mission {
  border-color: rgba(255, 182, 91, 0.16);
}

.creatorHubCard.is-post {
  border-color: rgba(196, 181, 253, 0.2);
}

.creatorHubCard .creatorItemBody {
  gap: 10px;
}

.creatorHubCard .creatorItemTitle {
  font-size: 18px;
  line-height: 1.25;
}

.creatorCardMetaList {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.creatorCardMetaItem {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.creatorCardMetaLabel {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(201, 210, 223, 0.68);
}

.creatorCardMetaValue {
  font-size: 14px;
  line-height: 1.45;
  color: rgba(242, 246, 250, 0.92);
}

.creatorCardActions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}

.creatorCardActions::-webkit-scrollbar {
  display: none;
}

.creatorCardActions form {
  margin: 0;
}

.creatorCardAction {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--creator-accent-strong);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
}

.creatorCardAction:hover,
.creatorCardAction:focus-visible {
  text-decoration: none;
  color: #c1ebff;
  outline: none;
}

.creatorCardAction[disabled] {
  opacity: 0.45;
  pointer-events: none;
}

.creatorCardActionDivider {
  color: rgba(201, 210, 223, 0.42);
}

.creatorHubEmptyState {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px 18px;
  border-radius: 20px;
  border: 1px dashed rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.03);
  text-align: center;
}

.creatorEmptyAction {
  width: auto;
  min-width: 220px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 16px;
}

.creatorFab {
  position: fixed;
  right: max(18px, calc(env(safe-area-inset-right) + 18px));
  bottom: calc(env(safe-area-inset-bottom) + 92px);
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(122, 212, 255, 0.22);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(87, 168, 245, 0.98), rgba(47, 112, 183, 0.98));
  color: #fff;
  box-shadow: 0 18px 36px rgba(17, 73, 117, 0.34);
  font-size: 34px;
  line-height: 1;
  z-index: 40;
}

.creatorFab:hover,
.creatorFab:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 20px 40px rgba(17, 73, 117, 0.4);
  outline: none;
}

.activityStatusPill.is-approved {
  color: #c5f7d8;
  background: rgba(45, 173, 110, 0.16);
  border-color: rgba(86, 210, 147, 0.22);
}

.activityStatusPill.is-pending {
  color: #ffe0ab;
  background: rgba(255, 166, 54, 0.14);
  border-color: rgba(255, 191, 89, 0.22);
}

.activityStatusPill.is-rejected {
  color: #ffd0d0;
  background: rgba(248, 113, 113, 0.14);
  border-color: rgba(252, 165, 165, 0.22);
}

.activityStatusPill.is-draft {
  color: #d7e5ff;
  background: rgba(96, 165, 250, 0.14);
  border-color: rgba(147, 197, 253, 0.22);
}

.activityStatusPill.is-archived {
  color: rgba(226, 232, 240, 0.88);
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(203, 213, 225, 0.14);
}

.activityStatusPill.is-ended {
  color: #ffd8a8;
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(251, 191, 36, 0.2);
}

.activityStatusPill.is-sponsored {
  color: #ffe5b8;
  background: rgba(246, 193, 115, 0.16);
  border-color: rgba(246, 193, 115, 0.26);
}

.activityStatusPill.is-full {
  color: #fecaca;
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(248, 113, 113, 0.22);
}

.activityStatusPill.is-hidden-review {
  color: #ffd9e7;
  background: rgba(190, 24, 93, 0.16);
  border-color: rgba(244, 114, 182, 0.24);
}

.activityStatusPill.is-private {
  color: #dec8ff;
  background: rgba(136, 83, 246, 0.14);
  border-color: rgba(163, 115, 255, 0.2);
}

.activityStatusPill.is-public {
  color: #c7f9ea;
  background: rgba(45, 173, 110, 0.14);
  border-color: rgba(86, 210, 147, 0.18);
}

.activityStatusPill.is-friends {
  color: #ddd6fe;
  background: rgba(167, 139, 250, 0.16);
  border-color: rgba(196, 181, 253, 0.2);
}

@media (max-width: 720px) {
  .creatorHero,
  .creatorBuilderHero,
  .creatorStepHeader,
  .creatorFilterHeader,
  .creatorItemTop,
  .creatorItemHead,
  .creatorLocationCard,
  .creatorMapToolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .creatorQuickStats,
  .creatorInfoGrid,
  .creatorChoiceGrid,
  .creatorChoiceGrid.is-compact {
    grid-template-columns: 1fr 1fr;
  }

  .creatorFilterTab,
  .creatorModeCard,
  .creatorChoiceCard,
  .creatorActionBtn {
    flex: 1 1 calc(50% - 4px);
  }

  .creatorReviewRow {
    flex-direction: column;
    align-items: flex-start;
  }

  .creatorReviewRow strong {
    text-align: left;
  }
}

@media (max-width: 520px) {
  .creatorQuickStats,
  .creatorInfoGrid,
  .creatorChoiceGrid,
  .creatorChoiceGrid.is-compact {
    grid-template-columns: 1fr;
  }

  .creatorFilterRow,
  .creatorLocationModes,
  .creatorActionRow,
  .creatorInlineActions {
    gap: 6px;
  }

  .creatorFilterTab,
  .creatorModeCard,
  .creatorChoiceCard,
  .creatorActionBtn,
  .creatorTypeSwitchBtn {
    width: 100%;
  }

  .creatorPrimaryAction {
    width: 100%;
  }
}

@media (max-width: 720px) {
  .creatorLaunchActions {
    grid-template-columns: 1fr;
  }

  .creatorFab {
    bottom: calc(env(safe-area-inset-bottom) + 86px);
  }
}

@media (max-width: 520px) {
  .creatorHubPage {
    padding-bottom: 112px;
  }

  .creatorLaunchButton {
    min-height: 68px;
    font-size: 17px;
  }

  .creatorStatLink {
    min-height: 42px;
    padding: 10px;
  }

  .creatorStatText {
    font-size: 11px;
  }

  .creatorHubFilterLink {
    min-width: 84px;
  }
}

/* Saved list & hub-style cards: compact layout */
.creatorHubPage {
  gap: 10px;
  padding-top: 8px;
  padding-bottom: 104px;
}

.creatorPageHeader .left {
  gap: 3px;
}

.creatorPageHeader .pageTitle {
  font-size: 18px;
  letter-spacing: -0.01em;
}

.creatorPageHeader .pageMeta {
  font-size: 11px;
}

.creatorCreatePopover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 132px;
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(14, 17, 24, 0.96);
  box-shadow: 0 18px 32px rgba(3, 8, 16, 0.32);
  backdrop-filter: blur(18px);
  z-index: 140;
}

.creatorCreatePopover.is-open {
  display: flex;
}

.creatorCreatePopoverAction {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 12px;
  border-radius: 12px;
  color: rgba(245, 247, 250, 0.94);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.creatorCreatePopoverAction:hover,
.creatorCreatePopoverAction:focus-visible {
  color: rgba(248, 250, 252, 0.98);
  background: rgba(255, 255, 255, 0.08);
  text-decoration: none;
  outline: none;
}

.creatorFilterStack {
  gap: 6px;
}

.creatorHubFilterRow {
  gap: 6px;
}

.creatorHubFilterLink {
  min-height: 34px;
  border-radius: 11px;
  border-color: rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(214, 222, 234, 0.76);
  font-size: 12px;
  font-weight: 700;
}

.creatorHubFilterLink.is-active,
.creatorHubFilterLink:hover,
.creatorHubFilterLink:focus-visible {
  color: rgba(248, 250, 252, 0.96);
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
}

.creatorStatRow {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.creatorStatLink {
  min-height: 40px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 12px;
  border-radius: 12px;
  background: var(--surface);
  border-color: var(--line);
  box-shadow: var(--shadow-soft);
}

.creatorStatLink.is-active,
.creatorStatLink:hover,
.creatorStatLink:focus-visible {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
}

.creatorStatText {
  font-size: 12px;
  font-weight: 600;
  color: rgba(214, 222, 234, 0.72);
}

.creatorStatNumber {
  font-size: 13px;
  font-weight: 700;
  color: rgba(248, 250, 252, 0.96);
}

.creatorFilterSheet .sheetBody {
  gap: 6px;
}

.creatorFilterChoice {
  min-height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  border-color: rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.03);
  font-size: 14px;
  font-weight: 600;
}

.creatorFilterChoice.is-active,
.creatorFilterChoice:hover,
.creatorFilterChoice:focus-visible {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
}

.creatorFilterStack {
  overflow: visible;
}

.creatorItemList {
  gap: 8px;
}

.creatorHubCard {
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  border-color: var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.creatorHubCard.is-event,
.creatorHubCard.is-mission {
  border-color: rgba(255, 255, 255, 0.06);
}

.creatorHubCard .creatorItemBody {
  gap: 8px;
}

.creatorHubCard .creatorItemTitle {
  font-size: 16px;
}

.creatorHubCardLink {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at top right, rgba(122, 212, 255, 0.08), transparent 42%),
    var(--surface);
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.creatorHubCardLink:hover,
.creatorHubCardLink:focus-visible {
  text-decoration: none;
  color: inherit;
  border-color: rgba(122, 212, 255, 0.2);
  background:
    radial-gradient(circle at top right, rgba(122, 212, 255, 0.14), transparent 42%),
    rgba(21, 26, 36, 0.98);
  box-shadow: 0 18px 34px rgba(3, 8, 16, 0.26);
  transform: translateY(-1px);
  outline: none;
}

.creatorHubCardMedia {
  width: 100%;
  min-width: 0;
  height: 172px;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
}

.creatorHubCardMedia img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  display: block;
}

.creatorHubCardMedia video {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  display: block;
}

.creatorHubCardMain {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.creatorHubCardTop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.creatorHubCardChevron {
  width: 18px;
  min-width: 18px;
  color: rgba(206, 215, 226, 0.48);
}

.creatorHubCardChevron svg {
  width: 18px;
  height: 18px;
  display: block;
}

.creatorHubMetaStack {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.creatorHubMetaLine {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.creatorHubMetaLabel {
  min-width: 54px;
  color: rgba(201, 210, 223, 0.58);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.creatorHubMetaValue {
  min-width: 0;
  color: rgba(239, 243, 247, 0.9);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.creatorCardMetaList {
  gap: 6px;
}

.creatorCardMetaLabel {
  font-size: 10px;
  letter-spacing: 0.1em;
}

.creatorCardMetaValue {
  font-size: 13px;
}

.creatorCardActions {
  gap: 8px;
}

.creatorCardAction {
  color: rgba(222, 230, 238, 0.84);
}

.creatorCardAction:hover,
.creatorCardAction:focus-visible {
  color: rgba(248, 250, 252, 0.98);
}

.creatorHubEmptyState {
  gap: 8px;
  padding: 22px 16px;
  border-radius: 16px;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.creatorEmptyTitle {
  font-size: 16px;
  font-weight: 700;
}

.creatorEmptyMeta {
  font-size: 13px;
  color: rgba(201, 210, 223, 0.72);
}

.creatorEmptyAction {
  width: auto;
  min-width: 0;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(245, 247, 250, 0.94);
  box-shadow: none;
}

.creatorEmptyAction:hover,
.creatorEmptyAction:focus-visible {
  transform: none;
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
  outline: none;
}

.creatorHubPage .activityTypeBadge,
.creatorHubPage .activityStatusPill {
  min-height: 22px;
  padding: 0 8px;
  border-color: rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(219, 227, 236, 0.78);
  letter-spacing: 0.06em;
}

.creatorHubPage .activityTypeBadge.is-event,
.creatorHubPage .activityTypeBadge.is-mission,
.creatorHubPage .activityTypeBadge.is-post,
.creatorHubPage .activityStatusPill.is-private,
.creatorHubPage .activityStatusPill.is-public,
.creatorHubPage .activityStatusPill.is-archived {
  border-color: rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(219, 227, 236, 0.78);
}

.creatorHubPage .activityStatusPill.is-draft {
  border-color: rgba(151, 163, 187, 0.22);
  background: rgba(105, 117, 141, 0.18);
  color: rgba(230, 235, 244, 0.9);
}

.creatorHubPage .activityStatusPill.is-pending {
  border-color: rgba(162, 143, 110, 0.24);
  background: rgba(104, 92, 71, 0.22);
  color: rgba(238, 230, 214, 0.9);
}

.creatorHubPage .activityStatusPill.is-approved {
  border-color: rgba(112, 136, 124, 0.24);
  background: rgba(70, 88, 79, 0.22);
  color: rgba(220, 232, 225, 0.9);
}

.creatorHubPage .activityStatusPill.is-rejected {
  border-color: rgba(145, 112, 112, 0.24);
  background: rgba(92, 67, 67, 0.22);
  color: rgba(239, 224, 224, 0.9);
}

@media (max-width: 720px) {
  .creatorStatRow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .creatorHubPage {
    gap: 10px;
    padding-top: 8px;
    padding-bottom: 104px;
  }

  .creatorPageHeader {
    align-items: flex-start;
  }

  .creatorPageHeader .pageMeta {
    display: none;
  }

  .creatorHubCardLink {
    flex-direction: column;
    gap: 10px;
  }

  .creatorHubCardMedia {
    height: 156px;
  }

  .creatorStatLink {
    min-height: 38px;
    padding: 0 10px;
  }

  .creatorStatText,
  .creatorStatNumber,
  .creatorHubFilterLink {
    font-size: 12px;
  }
}

/* Creator wizard */
.creatorWizardForm {
  gap: 12px;
}

.creatorWizardProgress {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(16, 20, 29, 0.92);
  box-shadow: 0 12px 30px rgba(3, 8, 16, 0.18);
}

.creatorWizardProgressTop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.creatorWizardProgressLabel {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(201, 210, 223, 0.7);
}

.creatorWizardProgressTitle {
  margin: 4px 0 0;
  font-size: 22px;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: rgba(248, 250, 252, 0.98);
}

.creatorWizardProgressMeta {
  font-size: 13px;
  color: rgba(206, 215, 226, 0.72);
  white-space: nowrap;
}

.creatorWizardTrack {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.creatorWizardFill {
  display: block;
  width: 16.6667%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(151, 203, 255, 0.95), rgba(111, 183, 239, 0.95));
  transition: width 0.2s ease;
}

.creatorWizardDots {
  display: flex;
  gap: 6px;
}

.creatorWizardDot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  transition: background 0.18s ease, transform 0.18s ease;
}

.creatorWizardDot.is-active {
  background: rgba(248, 250, 252, 0.96);
  transform: scale(1.05);
}

.creatorWizardDot.is-complete {
  background: rgba(151, 203, 255, 0.74);
}

.creatorWizardMessage {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 143, 143, 0.2);
  background: rgba(255, 143, 143, 0.08);
  color: rgba(255, 220, 220, 0.94);
  font-size: 13px;
  font-weight: 600;
  white-space: pre-line;
}

.creatorWizardStep[hidden] {
  display: none !important;
}

.creatorWizardStep.is-active .creatorStepCard {
  animation: creatorWizardFade 0.18s ease;
}

.creatorStepEyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(159, 225, 255, 0.82);
}

.creatorWizardHint {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(214, 222, 234, 0.76);
  font-size: 13px;
}

.creatorWizardNav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.creatorWizardNav .missionButton {
  width: auto;
}

.creatorWizardSpacer {
  flex: 1 1 auto;
}

.creatorWizardNav--submit {
  align-items: flex-end;
}

.creatorWizardSubmitActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.creatorWizardSubmitActions .missionButton {
  width: auto;
}

.creatorReviewStack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.creatorReviewSection {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.creatorReviewSectionHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.creatorReviewSectionTitle {
  font-size: 15px;
  font-weight: 700;
  color: rgba(248, 250, 252, 0.98);
}

.creatorReviewEditBtn {
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(159, 225, 255, 0.92);
  padding: 0;
  font-size: 13px;
  font-weight: 700;
}

.creatorReviewEditBtn:hover,
.creatorReviewEditBtn:focus-visible {
  color: rgba(248, 250, 252, 0.98);
  outline: none;
}

.creatorReviewRow--stacked {
  align-items: flex-start;
  flex-direction: column;
}

.creatorReviewRow--stacked strong {
  display: block;
  width: 100%;
  text-align: left;
}

@keyframes creatorWizardFade {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 720px) {
  .creatorWizardProgressTop,
  .creatorReviewSectionHeader,
  .creatorWizardNav--submit {
    flex-direction: column;
    align-items: stretch;
  }

  .creatorWizardProgressMeta {
    white-space: normal;
  }

  .creatorWizardSubmitActions {
    width: 100%;
    justify-content: stretch;
  }

  .creatorWizardSubmitActions .missionButton {
    flex: 1 1 calc(50% - 5px);
  }
}

@media (max-width: 520px) {
  .creatorWizardProgressTitle {
    font-size: 20px;
  }

  .creatorWizardNav {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .creatorWizardNav--submit {
    flex-direction: column;
  }

  .creatorWizardNav .missionButton,
  .creatorWizardSubmitActions .missionButton {
    width: 100%;
  }

  .creatorWizardSpacer {
    display: none;
  }

  .creatorWizardSubmitActions {
    width: 100%;
  }
}

/* Launch settings + support pages */
.settingsContent {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.settingsGroup {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.settingsGroupTitle {
  padding: 0 4px;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(156, 170, 188, 0.82);
}

.settingsNotice {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.04);
  font-size: 14px;
}

.settingsNoticeSuccess {
  border-color: rgba(52, 199, 89, 0.28);
  color: var(--text);
}

.settingsNoticeError {
  border-color: rgba(248, 113, 113, 0.28);
  color: var(--danger);
}

.settingsNoticeInfo {
  border-color: rgba(122, 212, 255, 0.22);
  background:
    linear-gradient(135deg, rgba(122, 212, 255, 0.1), rgba(255, 255, 255, 0.02)),
    var(--surface);
  color: var(--text);
}

.settingsPanel {
  background: rgba(22, 26, 34, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 18px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22);
}

.settingsFormPanel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px;
}

/* A flatter alternative to settingsRowsPanel for screens that are a menu
   rather than a form: no card around the group, hairline separators between
   rows, and more room per row. The row internals are unchanged, so
   settingsNavRow / settingsStaticRow still apply inside it. */
/* The auth shell has no settings panel behind the code boxes, so the shared
   component gets its own spacing there. The boxes themselves are unchanged. */
.authVerifyScreen {
  display: block;
  margin-top: 4px;
}

.authVerifyScreen .verifyCodeInputs {
  margin: 14px 0 16px;
}

.authVerifyFooter {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.authVerifyScreen .verifyCodeActions {
  margin-top: 12px;
}

/* Verification code entry, shared by every code screen. One box per digit so
   the shape of the code is visible, and wide enough to stay tappable on a
   360px screen without the row wrapping. */
.verifyCodeInputs {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 4px 0 18px;
}

.verifyCodeDigit {
  width: 44px;
  height: 56px;
  flex: 0 1 44px;
  min-width: 0;
  text-align: center;
  font-size: 1.35rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0;
}

.verifyCodeDigit:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(0, 149, 246, 0.25);
}

.verifyCodeActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 14px;
}

@media (max-width: 380px) {
  .verifyCodeDigit { width: 40px; height: 52px; flex-basis: 40px; }
  .verifyCodeInputs { gap: 6px; }
}

.settingsFlatList {
  display: flex;
  flex-direction: column;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
}

.settingsFlatList > .settingsNavRow,
.settingsFlatList > .settingsStaticRow {
  padding: 16px 4px;
  border-radius: 0;
  margin: 0;
  border-bottom: 1px solid var(--line);
}

.settingsFlatList > :last-child {
  border-bottom: 0;
}

.settingsFlatList > .settingsNavRow:hover,
.settingsFlatList > .settingsNavRow:focus-visible {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
}

/* The value a row is reporting -- an address, a device count, a date -- sits
   under its label rather than opposite it, so long values do not squeeze the
   chevron off narrow screens. */
.settingsFlatList .settingsRowCopy {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* Destructive rows keep their own colour without becoming a red card. */
.settingsFlatList > .settingsNavRow.is-danger .settingsRowTitle {
  color: var(--danger);
}

.settingsFlatList > .settingsNavRow.is-danger .settingsRowIcon {
  color: var(--danger);
}

.settingsSectionHeading {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 26px 4px 6px;
}

.settingsRowsPanel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 8px 10px;
  overflow: visible;
}

.settingsPanel.is-focused {
  border-color: rgba(122, 212, 255, 0.22);
  box-shadow:
    0 0 0 1px rgba(122, 212, 255, 0.1),
    0 16px 40px rgba(0, 0, 0, 0.2);
}

.settingsPanelTitle {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}

.settingsPanelCopy {
  font-size: 14px;
  color: var(--muted);
}

.settingsPanelHeader {
  padding: 14px 18px 10px;
  border-bottom: none;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.05);
}

.settingsAvatarRow {
  display: flex;
  align-items: center;
  gap: 14px;
}

.settingsAvatar {
  width: 68px;
  height: 68px;
  flex: 0 0 68px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  display: grid;
  place-items: center;
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
}

.settingsAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.settingsAvatarMeta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.settingsFileInput {
  padding: 10px 12px;
  font-size: 14px;
}

.settingsFieldGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.settingsField {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}

.settingsFieldWide {
  grid-column: 1 / -1;
}

.settingsFieldLabel {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.settingsFormFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.settingsPanel.settingsRowsPanel > .settingsFormFooter {
  margin-top: 8px;
  padding: 16px 12px 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.settingsFormFooter form {
  display: inline-flex;
}

.settingsFormFooter form button {
  width: auto;
}

.settingsInlineMeta {
  font-size: 13px;
  color: var(--muted);
}

.settingsStaticRow,
.settingsNavRow,
.settingsToggleRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 14px;
  color: inherit;
  text-decoration: none;
  border-radius: 12px;
}

.settingsPanel.settingsRowsPanel > .settingsStaticRow,
.settingsPanel.settingsRowsPanel > .settingsNavRow,
.settingsPanel.settingsRowsPanel > .settingsToggleRow,
.settingsPanel.settingsRowsPanel > .settingsBlockedRow {
  margin: 0 2px;
}

.settingsRowsPanel > .settingsStaticRow,
.settingsRowsPanel > .settingsNavRow,
.settingsRowsPanel > .settingsToggleRow,
.settingsRowsPanel > .settingsBlockedRow {
  margin: 0;
}

.settingsNavRow:hover {
  background: rgba(255, 255, 255, 0.05);
  text-decoration: none;
}

:root[data-app-theme="light"] .settingsNavRow:hover {
  background: rgba(17, 24, 39, 0.04);
}

:root[data-app-theme="light"] .settingsPanel {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
}

:root[data-app-theme="light"] .settingsPanel.is-focused {
  border-color: rgba(59, 130, 246, 0.28);
  box-shadow:
    0 0 0 1px rgba(59, 130, 246, 0.08),
    0 18px 44px rgba(15, 23, 42, 0.08);
}

:root[data-app-theme="light"] .settingsPanelHeader {
  box-shadow: inset 0 -1px 0 rgba(15, 23, 42, 0.05);
}

:root[data-app-theme="light"] .settingsPanel.settingsRowsPanel > .settingsFormFooter {
  box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.05);
}

:root[data-app-theme="light"] .settingsMiniCard {
  border: 1px solid rgba(15, 23, 42, 0.06);
  background: rgba(255, 255, 255, 0.82);
}

:root[data-app-theme="light"] .settingsToggleStack {
  border-color: rgba(15, 23, 42, 0.06);
  background: rgba(15, 23, 42, 0.025);
}

:root[data-app-theme="light"] .settingsSideNavGroup,
:root[data-app-theme="light"] .settingsHubGroupCard {
  border: 1px solid rgba(15, 23, 42, 0.06);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
}

:root[data-app-theme="light"] .settingsHubNavCard {
  border: 1px solid rgba(15, 23, 42, 0.05);
  background: rgba(255, 255, 255, 0.78);
}

:root[data-app-theme="light"] .settingsAvatar,
:root[data-app-theme="light"] .settingsBlockedAvatar {
  border-color: rgba(15, 23, 42, 0.08);
}

:root[data-app-theme="light"] .settingsPanel.settingsDangerPanel {
  border-color: rgba(248, 113, 113, 0.32);
}

:root[data-app-theme="light"] .settingsGroupTitle {
  color: rgba(71, 85, 105, 0.88);
}

.settingsRowMain {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.settingsRowTitle {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.settingsRowCopy {
  font-size: 13px;
  color: var(--muted);
}

.settingsRowValue {
  flex: 0 0 auto;
  font-size: 13px;
  color: var(--muted);
  text-align: right;
}

.settingsSwitch {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.settingsSwitch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.settingsSwitchTrack {
  width: 52px;
  height: 32px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.12);
  position: relative;
  transition: background 140ms ease, border-color 140ms ease;
}

.settingsSwitchTrack::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  transition: transform 140ms ease;
}

.settingsSwitch input:checked + .settingsSwitchTrack {
  background: var(--accent-2);
  border-color: transparent;
}

.settingsSwitch input:checked + .settingsSwitchTrack::after {
  transform: translateX(20px);
}

.settingsDangerPanel {
  border-color: rgba(248, 113, 113, 0.24);
}

.settingsDangerButton {
  border-color: rgba(248, 113, 113, 0.35);
  background: rgba(248, 113, 113, 0.12);
  color: var(--danger);
}

.settingsDangerButton:hover {
  border-color: rgba(248, 113, 113, 0.5);
  box-shadow: 0 6px 16px rgba(248, 113, 113, 0.16);
}

.settingsSystemContent {
  display: flex;
  flex-direction: column;
  gap: 18px;
  /* Settings no longer renders the dock, so the flow owns the bottom inset
     itself rather than inheriting the space the dock used to occupy. */
  padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
}

.settingsSystemBanner {
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(248, 113, 113, 0.22);
  background:
    linear-gradient(180deg, rgba(248, 113, 113, 0.12), rgba(248, 113, 113, 0.04)),
    var(--surface);
}

.settingsSystemBannerTitle {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.settingsSystemBannerCopy {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

.settingsIdentityBanner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(122, 212, 255, 0.22);
  background:
    radial-gradient(circle at 100% 0%, rgba(122, 212, 255, 0.16), transparent 30%),
    linear-gradient(180deg, rgba(122, 212, 255, 0.09), rgba(255, 255, 255, 0.02)),
    var(--surface);
}

.settingsIdentityAvatar {
  width: 48px;
  height: 48px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(122, 212, 255, 0.22);
  background: rgba(122, 212, 255, 0.1);
  color: var(--text);
  font-weight: 800;
}

.settingsIdentityAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.settingsIdentityCopy {
  min-width: 0;
}

.settingsIdentityKicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(122, 212, 255, 0.9);
}

.settingsIdentityTitle {
  margin-top: 2px;
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
}

.settingsIdentityMeta {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

.settingsIdentityActions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.settingsIdentityActions form {
  margin: 0;
}

.settingsIdentityNotice {
  margin-bottom: 12px;
  display: grid;
  gap: 8px;
  padding: 16px 18px;
}

.settingsIdentityHeader {
  margin-bottom: 18px;
}

body.appFrame.settingsScreen .settingsIdentitySwitcher {
  display: block;
}

body.appFrame.settingsScreen .settingsIdentityTrigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 12px 14px;
  border-radius: 22px;
  border: 1px solid rgba(122, 212, 255, 0.18);
  background:
    radial-gradient(circle at top right, rgba(122, 212, 255, 0.14), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015)),
    var(--surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

body.appFrame.settingsScreen .settingsIdentitySwitcher[open] .settingsIdentityTrigger,
body.appFrame.settingsScreen .settingsIdentityTrigger:hover,
body.appFrame.settingsScreen .settingsIdentityTrigger:focus-visible {
  border-color: rgba(122, 212, 255, 0.34);
  background:
    radial-gradient(circle at top right, rgba(122, 212, 255, 0.18), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
    var(--surface);
}

body.appFrame.settingsScreen .settingsIdentityTriggerAvatar {
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 18px;
  background:
    radial-gradient(circle at 22% 20%, rgba(104, 204, 255, 0.88), rgba(104, 204, 255, 0.1) 42%),
    linear-gradient(145deg, rgba(35, 39, 48, 0.98), rgba(16, 19, 27, 0.98));
  color: #f5eed8;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.04em;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

body.appFrame.settingsScreen .settingsIdentityTriggerAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.appFrame.settingsScreen .settingsIdentityTriggerCopy {
  min-width: 0;
  flex: 1 1 auto;
  display: grid;
  gap: 4px;
}

body.appFrame.settingsScreen .settingsIdentityTriggerTop {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

body.appFrame.settingsScreen .settingsIdentityTriggerTop strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 800;
  color: rgba(248, 250, 252, 0.98);
}

body.appFrame.settingsScreen .settingsIdentityTriggerPill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(214, 220, 217, 0.82);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body.appFrame.settingsScreen .settingsIdentityTriggerMeta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: rgba(214, 220, 217, 0.72);
}

body.appFrame.settingsScreen .settingsIdentityTriggerCaret {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: #68ccff;
}

body.appFrame.settingsScreen .settingsIdentityTriggerCaret svg {
  width: 12px;
  height: 12px;
}

body.appFrame.settingsScreen .settingsIdentityMenu {
  left: 0;
  right: 0;
  width: auto;
  max-width: none;
}

.settingsSystemHero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 20px;
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at top right, rgba(122, 212, 255, 0.18), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
    rgba(10, 15, 22, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 20px 38px rgba(0, 0, 0, 0.18);
}

.settingsSystemHeroIcon {
  width: 64px;
  height: 64px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(122, 212, 255, 0.24);
  background:
    radial-gradient(circle at 30% 25%, rgba(122, 212, 255, 0.22), transparent 48%),
    rgba(122, 212, 255, 0.08);
  color: rgba(233, 245, 255, 0.96);
}

.settingsSystemHeroIcon svg {
  width: 28px;
  height: 28px;
}

.settingsSystemHeroCopy {
  min-width: 0;
}

.settingsSystemBackLink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(147, 197, 253, 0.92);
  text-decoration: none;
}

.settingsSystemHeroTitle {
  margin: 0;
  font-size: clamp(26px, 7vw, 38px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  color: rgba(245, 250, 255, 0.98);
}

.settingsSystemHeroDescription {
  margin: 8px 0 0;
  max-width: 640px;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(196, 206, 219, 0.78);
}

.settingsSystemLayout {
  display: grid;
  grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.settingsSystemLayout.is-hub {
  grid-template-columns: minmax(0, 1fr);
}

.settingsSystemSidebar,
.settingsSystemMain {
  min-width: 0;
}

.settingsSideNav {
  position: sticky;
  top: 84px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.settingsSideNavGroup {
  padding: 14px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(22, 26, 34, 0.72);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}

.settingsSideNavTitle {
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.settingsSideNavList {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.settingsSideNavItem {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 11px;
  border-radius: 16px;
  color: inherit;
  text-decoration: none;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.settingsSideNavItem.is-active {
  background: rgba(122, 212, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(122, 212, 255, 0.18);
}

.settingsSideNavIcon,
.settingsHubNavIcon {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: rgba(240, 247, 255, 0.98);
  background:
    radial-gradient(circle at 30% 30%, rgba(122, 212, 255, 0.18), transparent 48%),
    rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.settingsSideNavIcon svg,
.settingsHubNavIcon svg {
  width: 18px;
  height: 18px;
}

.settingsSideNavCopy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.settingsSideNavLabel {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.settingsSideNavMeta {
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}

.settingsSideNavBadge,
.settingsHubNavBadge {
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  background: rgba(122, 212, 255, 0.16);
  color: rgba(227, 241, 255, 0.98);
}

.settingsHubGrid {
  display: grid;
  gap: 16px;
}

.settingsHubGroupCard {
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(22, 26, 34, 0.72);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}

.settingsHubGroupHeader {
  margin-bottom: 12px;
}

.settingsHubGroupTitle {
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
}

.settingsHubGroupList {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.settingsHubNavCard {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: rgba(255, 255, 255, 0.03);
  color: inherit;
  text-decoration: none;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.settingsHubNavCopy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.settingsHubNavLabel {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.settingsHubNavMeta {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

.settingsHubActionRow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.settingsActionPill,
.settingsSecondaryButton {
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02)),
    rgba(255, 255, 255, 0.018);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 700;
}

.settingsActionPill.is-danger {
  border-color: rgba(248, 113, 113, 0.32);
  color: rgba(254, 202, 202, 0.98);
}

.settingsCardGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.settingsMiniCard {
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: none;
}

.settingsMiniLabel {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.settingsMiniValue {
  margin-top: 8px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--text);
  word-break: break-word;
}

.settingsToggleStack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  border-radius: 16px;
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: rgba(255, 255, 255, 0.02);
}

.settingsToggleStack .settingsToggleRow {
  border-radius: 12px;
}

.settingsToggleStack .settingsToggleRow + .settingsToggleRow {
  border-top: none;
}

.settingsBlockedRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 14px;
  border-radius: 12px;
}

.settingsBlockedRow + .settingsBlockedRow {
  border-top: none;
}

.settingsBlockedIdentity {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.settingsBlockedAvatar {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.04);
}

.settingsBlockedAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.settingsBlockedCopy {
  min-width: 0;
}

.settingsBlockedCopy .settingsRowTitle,
.settingsBlockedCopy .settingsRowCopy {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.settingsAvatarLarge {
  width: 78px;
  height: 78px;
  flex-basis: 78px;
  border-radius: 24px;
}

.settingsField textarea,
.settingsField input,
.settingsField select {
  width: 100%;
}

@media (hover: hover) and (pointer: fine) {
  .settingsSideNavItem:hover,
  .settingsHubNavCard:hover,
  .settingsActionPill:hover,
  .settingsSecondaryButton:hover {
    transform: translateY(-1px);
    text-decoration: none;
    border-color: rgba(122, 212, 255, 0.18);
    background:
      linear-gradient(180deg, rgba(122, 212, 255, 0.07), rgba(255, 255, 255, 0.02)),
      rgba(255, 255, 255, 0.02);
  }
}

@media (max-width: 900px) {
  .settingsSystemLayout {
    grid-template-columns: minmax(0, 1fr);
  }

  .settingsSideNav {
    position: static;
  }
}

@media (max-width: 640px) {
  .settingsSystemHero {
    grid-template-columns: 1fr;
    align-items: start;
    padding: 18px;
    border-radius: 22px;
  }

  .settingsSystemHeroIcon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
  }

  .settingsCardGrid {
    grid-template-columns: 1fr;
  }

  .settingsHubGroupCard {
    padding: 16px;
    border-radius: 20px;
  }

  .settingsHubNavCard,
  .settingsSideNavItem {
    padding: 12px;
  }

  .settingsBlockedRow {
    flex-direction: column;
    align-items: stretch;
  }
}

.companyApplicationHero {
  gap: 10px;
}

.companyApplicationState {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.companyApplicationStateLabel {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

.companyApplicationMeta {
  font-size: 13px;
  color: var(--muted);
  word-break: break-word;
}

.infoFaqPanel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 8px 10px;
}

.infoFaqItem {
  padding: 0 10px;
  border-radius: 12px;
}

.infoFaqItem + .infoFaqItem {
  border-top: none;
}

.infoFaqItem summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.infoFaqItem summary::-webkit-details-marker {
  display: none;
}

.infoFaqItem p {
  padding: 0 8px 14px;
  font-size: 14px;
  color: var(--muted);
}

.infoFaqItem summary:hover {
  color: rgba(240, 247, 255, 0.98);
}

:root[data-app-theme="light"] .infoFaqItem summary:hover {
  color: var(--text);
}

.legalPanel {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.legalPanel h2 {
  font-size: 16px;
}

.legalPanel p {
  font-size: 14px;
  color: var(--text);
}

.logoutScreen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--bg);
}

.logoutCard {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}

.logoutEyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.logoutAccountSummary {
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
}

.logoutActions {
  margin-top: 4px;
}

.logoutCancelLink {
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
}

.logoutCancelLink:hover {
  color: var(--text);
  text-decoration: none;
}

@media (max-width: 720px) {
  .settingsFieldGrid {
    grid-template-columns: 1fr;
  }

  .settingsFormFooter,
  .settingsAvatarRow {
    flex-direction: column;
    align-items: stretch;
  }

  .settingsAvatar {
    margin: 0 auto;
  }

  .settingsRowValue {
    max-width: 132px;
  }
}

@media (max-width: 520px) {
  .settingsStaticRow,
  .settingsNavRow,
  .settingsToggleRow {
    align-items: flex-start;
    flex-direction: column;
  }

  .settingsRowValue,
  .settingsSwitch {
    align-self: flex-start;
  }

  .logoutScreen {
    padding: 16px;
  }
}

/* Mobile app shell + PWA overrides */
:root {
  --page-max: 480px;
  --nav-height: 58px;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
}

body {
  overscroll-behavior-y: contain;
  min-height: 100vh;
}

body.appFrame,
body.appFrame.mapPage,
body.appFrame.profilePage,
body.appFrame.cityPage,
body.appFrame.settingsScreen {
  background:
    radial-gradient(circle at top, rgba(26, 45, 63, 0.42), transparent 34%),
    #0b0f14;
}

@supports (min-height: 100dvh) {
  body,
  .app-shell,
  .appShell {
    min-height: 100dvh;
  }
}

input,
textarea,
select {
  font-size: 16px;
}

button,
.btn {
  min-height: 46px;
}

@media (max-width: 719px) {
  .center-card {
    max-width: none;
    min-height: 100vh;
    margin: 0;
    border-left: none;
    border-right: none;
    border-radius: 0;
    box-shadow: none;
  }
}

.app-shell,
.appShell {
  width: 100%;
  max-width: min(100%, var(--page-max));
  margin: 0 auto;
  border: none;
  border-radius: 0;
  background: var(--bg);
  overflow: hidden;
}

@media (min-width: 720px) {
  body.appFrame,
  body.appFrame.mapPage,
  body.appFrame.profilePage,
  body.appFrame.cityPage,
  body.appFrame.settingsScreen {
    padding: 18px 16px;
  }

  body.appFrame .app-shell,
  body.appFrame .appShell {
    margin: 0 auto;
    border: none;
    border-radius: 0;
    background: var(--bg);
    box-shadow: none;
    min-height: calc(100dvh - 36px);
  }
}

.app-content,
.appContent {
  padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom) + 14px);
}

.content {
  padding: 14px 14px calc(110px + env(safe-area-inset-bottom));
}

@media (min-width: 720px) {
  .content {
    padding: 16px 16px calc(124px + env(safe-area-inset-bottom));
  }
}

.pageHeader,
.top-bar {
  padding: calc(12px + env(safe-area-inset-top)) 14px 12px;
}

/* Shared PWA shell: one surface — no header rules, inset cards, or dock framing */
body.appFrame .pageHeader,
body.appFrame .top-bar {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
  box-shadow: none;
}

body.appFrame .app-content,
body.appFrame .appContent {
  background: transparent;
}

body.appFrame .content {
  background: transparent;
}

body.appFrame .profileHeader {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
  box-shadow: none;
}

body.appFrame .mapTopBar {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
  box-shadow: none;
}

body.appFrame.cityPage .cityTopBar {
  border-bottom: none;
}

body.appFrame .msgTopTabs {
  border-bottom: none;
}

body.appFrame .commsInboxSurface,
body.appFrame .commsDistrictSection {
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

body.appFrame .commsFlatRow {
  border-bottom: none;
}

body.appFrame .commsInboxList .commsInboxRow + .commsInboxRow,
body.appFrame .commsDistrictRow {
  border-top: none;
}

/* Settings area: flat native-style screens */
body.appFrame.settingsScreen,
body.appFrame.settingsScreen .app-shell,
body.appFrame.settingsScreen .appShell {
  background: var(--bg);
}

body.appFrame.settingsScreen {
  background-image: none;
}

body.appFrame.settingsScreen::before {
  opacity: 0;
  animation: none;
}

body.appFrame.settingsScreen .pageHeader {
  padding-bottom: 6px;
}

body.appFrame.settingsScreen .content {
  padding-top: 6px;
}

.settingsPageHeader {
  justify-content: flex-start;
}

.settingsPageHeaderLead {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.settingsPageBack,
.editProfileBack {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: 0 0 0 -6px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: rgba(245, 250, 255, 0.92);
  text-decoration: none;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.settingsPageBack:hover,
.settingsPageBack:focus-visible,
.editProfileBack:hover,
.editProfileBack:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  outline: none;
}

.settingsPageHeaderTitle,
.editProfileHeaderTitle {
  margin: 0;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: 0;
  color: rgba(248, 250, 252, 0.98);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.appFrame.settingsScreen .settingsSystemContent,
body.appFrame.settingsScreen .settingsContent {
  gap: 18px;
}

body.appFrame.settingsScreen .settingsSystemMain {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

body.appFrame.settingsScreen .settingsSystemHero {
  display: none;
}

body.appFrame.settingsScreen .settingsSystemLayout {
  display: block;
}

body.appFrame.settingsScreen .settingsGroup {
  gap: 4px;
}

body.appFrame.settingsScreen .settingsGroupTitle {
  padding: 0;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0;
  color: rgba(163, 174, 190, 0.68);
}

body.appFrame.settingsScreen .settingsPanel,
body.appFrame.settingsScreen .settingsSideNavGroup,
body.appFrame.settingsScreen .settingsHubGroupCard,
body.appFrame.settingsScreen .settingsHubNavCard,
body.appFrame.settingsScreen .settingsToggleStack,
body.appFrame.settingsScreen .settingsMiniCard {
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

body.appFrame.settingsScreen .settingsFormPanel,
body.appFrame.settingsScreen .settingsPageForm,
body.appFrame.settingsScreen .settingsInfoStack,
body.appFrame.settingsScreen .settingsSectionLead,
body.appFrame.settingsScreen .settingsRowsPanel,
body.appFrame.settingsScreen .settingsToggleStack,
body.appFrame.settingsScreen .settingsHubGroupList,
body.appFrame.settingsScreen .infoFaqPanel,
body.appFrame.settingsScreen .legalPanel {
  padding: 0;
}

body.appFrame.settingsScreen .settingsFormPanel {
  gap: 14px;
}

body.appFrame.settingsScreen .settingsPageForm {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

body.appFrame.settingsScreen .settingsPageForm > .settingsGroup {
  gap: 6px;
}

body.appFrame.settingsScreen .settingsInfoStack,
body.appFrame.settingsScreen .settingsSectionLead {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body.appFrame.settingsScreen .settingsRowsPanel,
body.appFrame.settingsScreen .settingsToggleStack,
body.appFrame.settingsScreen .infoFaqPanel {
  gap: 0;
}

body.appFrame.settingsScreen .settingsNotice,
body.appFrame.settingsScreen .settingsSystemBanner,
body.appFrame.settingsScreen .settingsIdentityBanner {
  margin: 0;
  padding: 12px 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

body.appFrame.settingsScreen .settingsNoticeSuccess {
  border-bottom-color: rgba(52, 199, 89, 0.24);
}

body.appFrame.settingsScreen .settingsNoticeError {
  border-bottom-color: rgba(248, 113, 113, 0.24);
}

body.appFrame.settingsScreen .settingsNoticeInfo {
  border-bottom-color: rgba(122, 212, 255, 0.2);
}

body.appFrame.settingsScreen .settingsSystemBanner {
  border-bottom-color: rgba(248, 113, 113, 0.2);
}

body.appFrame.settingsScreen .settingsIdentityBanner {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

body.appFrame.settingsScreen .settingsIdentityAvatar {
  display: none;
}

body.appFrame.settingsScreen .settingsIdentityActions {
  grid-column: 1 / -1;
  gap: 14px;
}

body.appFrame.settingsScreen .settingsIdentityActions form {
  display: inline-flex;
}

body.appFrame.settingsScreen .settingsSystemBannerTitle,
body.appFrame.settingsScreen .settingsIdentityTitle,
body.appFrame.settingsScreen .settingsPanelTitle,
body.appFrame.settingsScreen .settingsRowTitle,
body.appFrame.settingsScreen .infoFaqItem summary,
body.appFrame.settingsScreen .legalPanel h2,
body.appFrame.settingsScreen .companyApplicationStateLabel {
  color: rgba(248, 250, 252, 0.98);
}

body.appFrame.settingsScreen .settingsSystemBannerTitle,
body.appFrame.settingsScreen .settingsPanelTitle,
body.appFrame.settingsScreen .legalPanel h2,
body.appFrame.settingsScreen .companyApplicationStateLabel {
  font-size: 15px;
  font-weight: 650;
}

body.appFrame.settingsScreen .settingsPanelCopy,
body.appFrame.settingsScreen .settingsInlineMeta,
body.appFrame.settingsScreen .companyApplicationMeta,
body.appFrame.settingsScreen .settingsSystemBannerCopy,
body.appFrame.settingsScreen .settingsIdentityMeta,
body.appFrame.settingsScreen .settingsRowCopy,
body.appFrame.settingsScreen .infoFaqItem p,
body.appFrame.settingsScreen .legalPanel p {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(188, 198, 210, 0.72);
}

body.appFrame.settingsScreen .settingsIdentityKicker {
  color: rgba(147, 197, 253, 0.92);
  letter-spacing: 0;
}

body.appFrame.settingsScreen .settingsFieldGrid {
  gap: 16px 14px;
}

body.appFrame.settingsScreen .settingsField,
body.appFrame.settingsScreen .editProfileField {
  gap: 6px;
}

body.appFrame.settingsScreen .settingsFieldLabel,
body.appFrame.settingsScreen .editProfileLabel {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
  color: rgba(163, 174, 190, 0.72);
}

body.appFrame.settingsScreen .settingsField input,
body.appFrame.settingsScreen .settingsField select,
body.appFrame.settingsScreen .settingsField textarea,
body.appFrame.settingsScreen .editProfileInput,
body.appFrame.settingsScreen .editProfileForm .editProfileInput {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 8px 0 10px;
  min-height: 0;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: transparent;
  color: rgba(248, 250, 252, 0.98);
  box-shadow: none;
  outline: none;
  resize: vertical;
  font-size: 15px;
}

body.appFrame.settingsScreen .settingsField input:focus,
body.appFrame.settingsScreen .settingsField select:focus,
body.appFrame.settingsScreen .settingsField textarea:focus,
body.appFrame.settingsScreen .editProfileInput:focus {
  border-bottom-color: rgba(122, 212, 255, 0.34);
}

body.appFrame.settingsScreen .settingsField input::placeholder,
body.appFrame.settingsScreen .settingsField textarea::placeholder,
body.appFrame.settingsScreen .editProfileInput::placeholder {
  color: rgba(148, 163, 184, 0.45);
}

body.appFrame.settingsScreen .settingsField select {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(188, 198, 210, 0.7) 50%),
    linear-gradient(135deg, rgba(188, 198, 210, 0.7) 50%, transparent 50%);
  background-position:
    calc(100% - 12px) calc(50% - 2px),
    calc(100% - 8px) calc(50% - 2px);
  background-repeat: no-repeat;
  background-size: 4px 4px;
  padding-right: 22px;
}

body.appFrame.settingsScreen .settingsFileInput {
  padding: 8px 0;
  min-height: 0;
  border: none;
  background: transparent;
}

body.appFrame.settingsScreen .settingsFileInput::file-selector-button {
  margin-right: 12px;
  padding: 4px 10px;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(242, 245, 248, 0.88);
  cursor: pointer;
}

body.appFrame.settingsScreen .settingsStaticRow,
body.appFrame.settingsScreen .settingsNavRow,
body.appFrame.settingsScreen .settingsToggleRow,
body.appFrame.settingsScreen .settingsBlockedRow {
  align-items: center;
  flex-direction: row;
  padding: 14px 0;
  border-radius: 0;
  background: transparent;
}

body.appFrame.settingsScreen .settingsRowLead {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}

body.appFrame.settingsScreen .settingsRowIcon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: inline-grid;
  place-items: center;
  color: rgba(214, 223, 232, 0.6);
}

body.appFrame.settingsScreen .settingsRowIcon svg {
  width: 18px;
  height: 18px;
  display: block;
}

body.appFrame.settingsScreen .settingsRowsPanel > .settingsStaticRow + .settingsStaticRow,
body.appFrame.settingsScreen .settingsRowsPanel > .settingsNavRow + .settingsNavRow,
body.appFrame.settingsScreen .settingsRowsPanel > .settingsStaticRow + .settingsNavRow,
body.appFrame.settingsScreen .settingsRowsPanel > .settingsNavRow + .settingsStaticRow,
body.appFrame.settingsScreen .settingsRowsPanel > .settingsBlockedRow + .settingsBlockedRow,
body.appFrame.settingsScreen .settingsRowsPanel > .settingsFormFooter,
body.appFrame.settingsScreen .settingsToggleStack > .settingsToggleRow + .settingsToggleRow,
body.appFrame.settingsScreen .infoFaqPanel > .infoFaqItem + .infoFaqItem {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

body.appFrame.settingsScreen .settingsRowsPanel > .settingsFormFooter {
  margin-top: 0;
  padding: 14px 0 0;
  box-shadow: none;
}

body.appFrame.settingsScreen .settingsNavRow:hover,
body.appFrame.settingsScreen .settingsNavRow:focus-visible {
  background: transparent;
  text-decoration: none;
}

body.appFrame.settingsScreen .settingsNavRow:hover .settingsRowTitle,
body.appFrame.settingsScreen .settingsNavRow:focus-visible .settingsRowTitle,
body.appFrame.settingsScreen .settingsNavRow:hover .settingsRowIcon,
body.appFrame.settingsScreen .settingsNavRow:focus-visible .settingsRowIcon {
  color: rgba(191, 219, 254, 1);
}

body.appFrame.settingsScreen .settingsRowMain {
  gap: 4px;
  flex: 1;
}

body.appFrame.settingsScreen .settingsRowValue {
  max-width: none;
  color: rgba(163, 174, 190, 0.74);
  white-space: normal;
  word-break: break-word;
}

body.appFrame.settingsScreen .settingsChevron {
  font-size: 22px;
  line-height: 1;
}

body.appFrame.settingsScreen .settingsSwitch {
  align-self: center;
}

body.appFrame.settingsScreen .settingsSwitchTrack {
  width: 46px;
  height: 28px;
  border: none;
  background: rgba(255, 255, 255, 0.12);
}

body.appFrame.settingsScreen .settingsSwitchTrack::after {
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  box-shadow: none;
}

body.appFrame.settingsScreen .settingsSwitch input:checked + .settingsSwitchTrack {
  background: var(--accent);
}

body.appFrame.settingsScreen .settingsSwitch input:checked + .settingsSwitchTrack::after {
  transform: translateX(18px);
}

body.appFrame.settingsScreen button,
body.appFrame.settingsScreen .settingsActionPill,
body.appFrame.settingsScreen .settingsSecondaryButton {
  width: auto;
}

body.appFrame.settingsScreen .settingsActionPill,
body.appFrame.settingsScreen .settingsSecondaryButton,
body.appFrame.settingsScreen .settingsFormFooter > button,
body.appFrame.settingsScreen .settingsFormFooter > a,
body.appFrame.settingsScreen .settingsFormPanel > button,
body.appFrame.settingsScreen .editProfileSave {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  color: rgba(237, 242, 247, 0.96);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease,
    opacity 160ms ease,
    transform 160ms ease;
}

body.appFrame.settingsScreen .settingsPrimaryButton,
body.appFrame.settingsScreen .settingsFormFooter > button.settingsPrimaryButton,
body.appFrame.settingsScreen .settingsFormPanel > button.settingsPrimaryButton,
body.appFrame.settingsScreen .editProfileSave.settingsPrimaryButton,
body.appFrame.settingsScreen .settingsFormFooter > button:not(.settingsSecondaryButton):not(.settingsDangerButton),
body.appFrame.settingsScreen .settingsFormPanel > button:not(.settingsSecondaryButton):not(.settingsDangerButton) {
  border-color: rgba(96, 165, 250, 0.26);
  background:
    linear-gradient(180deg, rgba(96, 165, 250, 0.24), rgba(59, 130, 246, 0.18));
  color: rgba(248, 250, 252, 0.98);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 28px rgba(30, 64, 175, 0.22);
}

body.appFrame.settingsScreen .settingsSecondaryButton,
body.appFrame.settingsScreen .settingsActionPill,
body.appFrame.settingsScreen .settingsFormFooter > a {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(226, 232, 240, 0.94);
}

body.appFrame.settingsScreen .settingsActionPill.is-danger,
body.appFrame.settingsScreen .settingsDangerButton {
  border-color: rgba(248, 113, 113, 0.22);
  background: rgba(127, 29, 29, 0.24);
  color: rgba(254, 202, 202, 0.98);
}

body.appFrame.settingsScreen .settingsDangerPanel {
  border: none;
}

body.appFrame.settingsScreen .settingsDangerSection {
  gap: 12px;
}

body.appFrame.settingsScreen .settingsDangerSection .settingsPanelTitle,
body.appFrame.settingsScreen .settingsDangerButton {
  color: rgba(252, 165, 165, 0.98);
}

body.appFrame.settingsScreen .settingsActionPill:hover,
body.appFrame.settingsScreen .settingsSecondaryButton:hover,
body.appFrame.settingsScreen .settingsFormFooter > button:hover,
body.appFrame.settingsScreen .settingsFormFooter > a:hover,
body.appFrame.settingsScreen .settingsFormPanel > button:hover,
body.appFrame.settingsScreen button:hover,
body.appFrame.settingsScreen .settingsActionPill:focus-visible,
body.appFrame.settingsScreen .settingsSecondaryButton:focus-visible,
body.appFrame.settingsScreen .settingsFormFooter > button:focus-visible,
body.appFrame.settingsScreen .settingsFormFooter > a:focus-visible,
body.appFrame.settingsScreen .settingsFormPanel > button:focus-visible,
body.appFrame.settingsScreen button:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(148, 163, 184, 0.26);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 28px rgba(0, 0, 0, 0.18);
  text-decoration: none;
  outline: none;
}

body.appFrame.settingsScreen .settingsPrimaryButton:hover,
body.appFrame.settingsScreen .settingsPrimaryButton:focus-visible,
body.appFrame.settingsScreen .settingsFormFooter > button.settingsPrimaryButton:hover,
body.appFrame.settingsScreen .settingsFormFooter > button.settingsPrimaryButton:focus-visible,
body.appFrame.settingsScreen .settingsFormPanel > button.settingsPrimaryButton:hover,
body.appFrame.settingsScreen .settingsFormPanel > button.settingsPrimaryButton:focus-visible,
body.appFrame.settingsScreen .editProfileSave.settingsPrimaryButton:hover,
body.appFrame.settingsScreen .editProfileSave.settingsPrimaryButton:focus-visible,
body.appFrame.settingsScreen .settingsFormFooter > button:not(.settingsSecondaryButton):not(.settingsDangerButton):hover,
body.appFrame.settingsScreen .settingsFormFooter > button:not(.settingsSecondaryButton):not(.settingsDangerButton):focus-visible,
body.appFrame.settingsScreen .settingsFormPanel > button:not(.settingsSecondaryButton):not(.settingsDangerButton):hover,
body.appFrame.settingsScreen .settingsFormPanel > button:not(.settingsSecondaryButton):not(.settingsDangerButton):focus-visible {
  border-color: rgba(125, 211, 252, 0.34);
  background:
    linear-gradient(180deg, rgba(96, 165, 250, 0.3), rgba(59, 130, 246, 0.22));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 14px 30px rgba(30, 64, 175, 0.28);
}

body.appFrame.settingsScreen .settingsActionPill.is-danger:hover,
body.appFrame.settingsScreen .settingsActionPill.is-danger:focus-visible,
body.appFrame.settingsScreen .settingsDangerButton:hover,
body.appFrame.settingsScreen .settingsDangerButton:focus-visible {
  border-color: rgba(252, 165, 165, 0.28);
  background: rgba(153, 27, 27, 0.28);
  color: rgba(254, 202, 202, 0.98);
}

body.appFrame.settingsScreen .settingsActionPill[disabled],
body.appFrame.settingsScreen .settingsSecondaryButton[disabled],
body.appFrame.settingsScreen .settingsFormFooter > button[disabled],
body.appFrame.settingsScreen .settingsFormPanel > button[disabled],
body.appFrame.settingsScreen .editProfileSave[disabled] {
  opacity: 0.62;
  cursor: default;
  transform: none;
  box-shadow: none;
}

body.appFrame.settingsScreen .settingsFormFooter {
  align-items: center;
  justify-content: flex-start;
  gap: 6px 14px;
  padding-top: 2px;
}

body.appFrame.settingsScreen .settingsInlineMeta {
  flex: 1 1 220px;
  min-width: 0;
}

body.appFrame.settingsScreen .notificationSettingsToggleRow .settingsRowLead {
  gap: 14px;
}

body.appFrame.settingsScreen .notificationSettingsControls {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

body.appFrame.settingsScreen .notificationSettingsControl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(203, 213, 225, 0.72);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

body.appFrame.settingsScreen .notificationSettingsControl .settingsSwitchTrack {
  width: 42px;
  height: 24px;
}

body.appFrame.settingsScreen .notificationSettingsControl .settingsSwitchTrack::after {
  width: 20px;
  height: 20px;
}

body.appFrame.settingsScreen .notificationSettingsControl .settingsSwitch input:checked + .settingsSwitchTrack::after {
  transform: translateX(18px);
}

body.appFrame.settingsScreen .notificationSettingsFooter {
  padding-top: 12px;
}

@media (max-width: 560px) {
  body.appFrame.settingsScreen .notificationSettingsToggleRow {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  body.appFrame.settingsScreen .notificationSettingsControls {
    width: 100%;
    justify-content: flex-end;
  }
}

body.appFrame.settingsScreen .settingsHubGrid {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

body.appFrame.settingsScreen .settingsHubActionRow {
  padding-top: 4px;
}

body.appFrame.settingsScreen .settingsBlockedAvatar {
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}

body.appFrame.settingsScreen .settingsBlockedCopy .settingsRowTitle,
body.appFrame.settingsScreen .settingsBlockedCopy .settingsRowCopy {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

body.appFrame.settingsScreen .infoFaqItem {
  padding: 0;
  border-radius: 0;
}

body.appFrame.settingsScreen .infoFaqItem summary {
  padding: 14px 0;
}

body.appFrame.settingsScreen .infoFaqItem p {
  padding: 0 0 14px;
}

body.appFrame.settingsScreen .legalPanel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body.appFrame.settingsScreen .companyApplicationHero {
  gap: 4px;
}

body.appFrame.reportProblemScreen .app-content,
body.appFrame.reportProblemScreen .appContent {
  padding-bottom: 0;
}

body.appFrame.reportProblemScreen .reportPageHeader,
body.appFrame.reportProblemScreen .reportProblemContent {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  box-sizing: border-box;
}

body.appFrame.reportProblemScreen .reportPageHeader {
  justify-content: flex-start;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 14px 6px;
}

body.appFrame.reportProblemScreen .reportHeaderStack {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

body.appFrame.reportProblemScreen .reportHeaderTitleRow {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

body.appFrame.reportProblemScreen .reportPageBack {
  width: 40px;
  height: 40px;
  margin: 0 0 0 -6px;
  color: rgba(248, 250, 252, 0.94);
}

body.appFrame.reportProblemScreen .reportPageTitle {
  margin: 0;
  min-width: 0;
  color: rgba(248, 250, 252, 0.98);
  font-size: 17px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.appFrame.reportProblemScreen .reportProblemContent {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 8px 14px calc(54px + env(safe-area-inset-bottom, 0px));
}

body.appFrame.reportProblemScreen .settingsNotice {
  margin: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
}

body.appFrame.reportProblemScreen .reportProblemForm {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

body.appFrame.reportProblemScreen .reportFieldLabel {
  margin: 0;
  color: rgba(163, 174, 190, 0.72);
  font-size: 13px;
  font-weight: 760;
  letter-spacing: 0;
  line-height: 1.3;
  text-transform: uppercase;
}

body.appFrame.reportProblemScreen .reportFieldStack {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

body.appFrame.reportProblemScreen .reportField {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body.appFrame.reportProblemScreen .reportControl {
  width: 100%;
  box-sizing: border-box;
  min-height: 64px;
  margin: 0;
  padding: 0 20px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 12px;
  background: rgba(11, 15, 23, 0.36);
  color: rgba(248, 250, 252, 0.98);
  box-shadow: none;
  outline: none;
  font: inherit;
  font-size: 17px;
  line-height: 1.4;
  transition: border-color 150ms ease, background-color 150ms ease;
}

body.appFrame.reportProblemScreen .reportControl:focus {
  border-color: rgba(122, 212, 255, 0.24);
  background: rgba(13, 18, 27, 0.5);
}

body.appFrame.reportProblemScreen .reportControl::placeholder {
  color: rgba(174, 184, 198, 0.58);
}

body.appFrame.reportProblemScreen .reportSelect {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 48px;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(188, 198, 210, 0.78) 50%),
    linear-gradient(135deg, rgba(188, 198, 210, 0.78) 50%, transparent 50%);
  background-position:
    calc(100% - 34px) calc(50% + 2px),
    calc(100% - 26px) calc(50% + 2px);
  background-repeat: no-repeat;
  background-size: 8px 8px;
}

body.appFrame.reportProblemScreen .reportSelect option {
  background: #111722;
  color: rgba(248, 250, 252, 0.98);
}

body.appFrame.reportProblemScreen .reportTextareaWrap {
  position: relative;
}

body.appFrame.reportProblemScreen .reportTextarea {
  display: block;
  min-height: 158px;
  padding: 18px 20px 42px;
  resize: vertical;
}

body.appFrame.reportProblemScreen .reportDescriptionCount {
  position: absolute;
  right: 18px;
  bottom: 14px;
  color: rgba(188, 198, 210, 0.68);
  font-size: 14px;
  line-height: 1;
  pointer-events: none;
}

body.appFrame.reportProblemScreen .reportFileNative {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body.appFrame.reportProblemScreen .reportAttachmentDropzone {
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 18px;
  border-radius: 12px;
  border: 1px dashed rgba(188, 198, 210, 0.2);
  background: rgba(11, 15, 23, 0.24);
  color: rgba(214, 222, 233, 0.84);
  cursor: pointer;
  text-align: left;
  transition: border-color 150ms ease, background-color 150ms ease;
  -webkit-tap-highlight-color: transparent;
}

body.appFrame.reportProblemScreen .reportAttachmentDropzone:hover,
body.appFrame.reportProblemScreen .reportAttachmentDropzone:focus-within,
body.appFrame.reportProblemScreen .reportFileNative:focus + .reportAttachmentDropzone,
body.appFrame.reportProblemScreen .reportAttachmentDropzone.is-dragging {
  border-color: rgba(122, 212, 255, 0.32);
  background: rgba(122, 212, 255, 0.055);
}

body.appFrame.reportProblemScreen .reportAttachmentIcon {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: rgba(122, 212, 255, 0.94);
}

body.appFrame.reportProblemScreen .reportAttachmentIcon svg {
  width: 28px;
  height: 28px;
  display: block;
}

body.appFrame.reportProblemScreen .reportAttachmentText {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

body.appFrame.reportProblemScreen .reportAttachmentTitle {
  color: rgba(214, 222, 233, 0.9);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  word-break: break-word;
}

body.appFrame.reportProblemScreen .reportAttachmentMeta {
  color: rgba(163, 174, 190, 0.72);
  font-size: 13px;
  line-height: 1.25;
}

body.appFrame.reportProblemScreen .reportSubmitButton,
body.appFrame.settingsScreen .reportSubmitButton {
  width: 100%;
  min-height: 58px;
  margin: 16px 0 0;
  border: 1px solid rgba(122, 212, 255, 0.24);
  border-radius: 10px;
  background: rgba(122, 212, 255, 0.12);
  box-shadow: none;
  color: rgba(248, 250, 252, 0.98);
  font-size: 16px;
  font-weight: 760;
}

body.appFrame.reportProblemScreen .reportSubmitButton:hover,
body.appFrame.reportProblemScreen .reportSubmitButton:focus-visible {
  border-color: rgba(122, 212, 255, 0.38);
  background: rgba(122, 212, 255, 0.18);
  box-shadow: none;
}

@media (max-width: 520px) {
  body.appFrame.reportProblemScreen .reportPageHeader {
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
  }

  body.appFrame.reportProblemScreen .reportHeaderTitleRow {
    gap: 10px;
  }

  body.appFrame.reportProblemScreen .reportControl {
    min-height: 58px;
    padding-right: 16px;
    padding-left: 16px;
    font-size: 16px;
  }

  body.appFrame.reportProblemScreen .reportTextarea {
    padding-top: 16px;
    padding-bottom: 40px;
  }
}

body.appFrame.settingsSystemScreen.editProfileScreen .app-content,
body.appFrame.settingsSystemScreen.editProfileScreen .appContent,
body.appFrame.profileEditScreen .app-content,
body.appFrame.profileEditScreen .appContent {
  padding-bottom: 0;
}

body.appFrame.settingsSystemScreen.editProfileScreen .dock,
body.appFrame.profileEditScreen .dock {
  display: none;
}

body.appFrame.editProfileScreen .settingsSystemContent {
  gap: 12px;
}

.editProfilePageNotice {
  padding: 12px 0 4px;
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.editProfilePageNoticeText {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(196, 206, 219, 0.78);
}

.editProfilePageNoticeLink {
  font-size: 13px;
  font-weight: 600;
  color: rgba(147, 197, 253, 0.95);
  text-decoration: none;
  align-self: flex-start;
}

.editProfilePageNoticeLink:hover,
.editProfilePageNoticeLink:focus-visible {
  text-decoration: underline;
  outline: none;
}

.editProfileForm {
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 8px 0 28px;
  box-sizing: border-box;
}

.editProfileAvatarBlock {
  display: flex;
  justify-content: center;
  padding: 12px 0 8px;
}

/* Sits under the avatar, styled as a quiet text action rather than a button:
   removing your photo should be reachable but never compete with Save. Danger
   colour only on press, so the row does not read as a warning at rest. */
.editProfileAvatarActions {
  display: flex;
  justify-content: center;
  margin: -2px 0 6px;
}

.editProfileAvatarRemove {
  min-height: 0;
  padding: 6px 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: rgba(235, 238, 243, 0.62);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.editProfileAvatarRemove:hover,
.editProfileAvatarRemove:focus-visible {
  color: rgba(248, 113, 113, 0.96);
  background: rgba(248, 113, 113, 0.1);
}

.editProfileAvatarTap {
  position: relative;
  display: inline-flex;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border-radius: 999px;
}

.editProfileAvatarTap:focus-within {
  outline: 2px solid rgba(122, 212, 255, 0.45);
  outline-offset: 3px;
}

.editProfileAvatar {
  width: 96px;
  height: 96px;
  border-radius: 999px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(248, 250, 252, 0.98);
  font-size: 34px;
  font-weight: 700;
}

.editProfileAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.editProfileAvatarInitial {
  line-height: 1;
}

.editProfileAvatarCamera {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.94);
  color: #0a0a0a;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(0, 0, 0, 0.06);
  pointer-events: none;
}

.editProfileTextarea {
  min-height: 96px;
  resize: vertical;
}

.editProfileInputReadonly {
  opacity: 0.5;
  cursor: default;
}

.editProfileFooter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding-top: 8px;
}

.editProfileHandleMeta {
  font-size: 13px;
  color: rgba(148, 163, 184, 0.55);
}

@media (min-width: 720px) {
  body.appFrame.editProfileScreen {
    padding-left: 0;
    padding-right: 0;
    padding-top: 10px;
  }

  body.appFrame.editProfileScreen .app-shell,
  body.appFrame.editProfileScreen .appShell {
    min-height: calc(100dvh - 20px);
  }
}

@media (max-width: 520px) {
  body.appFrame.settingsScreen .settingsBlockedRow {
    align-items: flex-start;
  }
}

.menu-toggle,
.headerActionBtn,
.headerMenuBtn {
  min-height: 44px;
}

.headerActionBtn,
.headerMenuBtn {
  width: 44px;
  min-width: 44px;
  height: 44px;
}

.dropdown a,
.dropdown button,
.dropdown .menuItemDisabled {
  min-height: 44px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
}

.dock {
  position: fixed;
  left: 50%;
  right: auto;
  bottom: 0;
  transform: translateX(-50%);
  width: min(100%, var(--page-max));
  max-width: var(--page-max);
  min-height: calc(var(--nav-height) + env(safe-area-inset-bottom));
  height: auto;
  padding: 5px 10px calc(5px + env(safe-area-inset-bottom));
  background: rgba(8, 12, 18, 0.92);
  border-top: none;
  box-shadow: 0 -14px 32px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(18px);
  z-index: 80;
}

.dockItem {
  min-height: 40px;
  border-radius: 10px;
}

.dockIcon {
  width: 20px;
  height: 20px;
  margin-bottom: 1px;
}

.dockIcon svg {
  width: 20px;
  height: 20px;
}

.dockItem.dockItem--primary .dockIcon {
  width: 22px;
  height: 22px;
}

.dockItem.dockItem--primary .dockIcon svg {
  width: 22px;
  height: 22px;
}

.dockItem.isActive,
.dockItem.is-active {
  background: rgba(122, 212, 255, 0.08);
}

.dockItem.isActive .dockIcon svg,
.dockItem.is-active .dockIcon svg {
  transform: none;
}

@media (min-width: 720px) {
  .dock {
    bottom: 18px;
    width: min(var(--page-max), calc(100vw - 32px));
    border: none;
    border-radius: 22px;
  }
}

@media (max-width: 390px) {
  :root {
    --nav-height: 54px;
  }

  .dockLabel {
    display: none;
  }
}

.tap-active {
  filter: brightness(1.08);
}

.installPrompt {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(var(--nav-height) + env(safe-area-inset-bottom) + 12px);
  z-index: 120;
}

.installPromptCard {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: rgba(18, 21, 29, 0.94);
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow);
}

/* Transient action confirmations. Fixed above the dock so a confirmation never
   reflows the page underneath it, unlike the inline notices it replaces. */
.neocityGlobalToast {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(var(--nav-height) + env(safe-area-inset-bottom) + 12px);
  z-index: 220;
  margin: 0 auto;
  max-width: 420px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(18, 21, 29, 0.96);
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  color: var(--text);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.neocityGlobalToast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .neocityGlobalToast {
    transition: none;
    transform: none;
  }
}

.installPromptText {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.installPromptTitle {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
}

.installPromptCopy {
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}

.installPromptActions {
  display: flex;
  gap: 10px;
}

.installPromptPrimary,
.installPromptSecondary {
  flex: 1 1 0;
  min-height: 46px;
}

.installPromptSecondary {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.05);
}

@media (min-width: 720px) {
  .installPrompt {
    left: auto;
    right: 20px;
    width: min(360px, calc(100vw - 40px));
  }
}

@media (hover: hover) and (pointer: fine) {
  a:hover {
    text-decoration: underline;
  }

  button:hover,
  .btn:hover {
    transform: translateY(-1px);
    border-color: rgba(122, 212, 255, 0.5);
    box-shadow: 0 6px 16px rgba(122, 212, 255, 0.16);
  }

  .headerActionBtn:hover,
  .headerMenuBtn:hover {
    text-decoration: none;
    color: var(--text);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.08);
  }

  .dropdown a:hover,
  .dropdown button:hover {
    background: rgba(255, 255, 255, 0.05);
    text-decoration: none;
  }

  .dockItem:hover {
    transform: translateY(-1px);
  }
}

@media (hover: none) {
  a:hover,
  .dropdown a:hover,
  .dropdown button:hover {
    text-decoration: none;
    background: transparent;
  }

  button:hover,
  .btn:hover,
  .dockItem:hover,
  .headerActionBtn:hover,
  .headerMenuBtn:hover,
  .appMenuBtn:hover {
    transform: none;
    box-shadow: none;
  }
}

@media (pointer: coarse) {
  a,
  button,
  .btn,
  input,
  select,
  textarea,
  [role="button"],
  .dockItem,
  .menu-toggle,
  .headerActionBtn,
  .headerMenuBtn {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
}

/* Instagram/TikTok-style icon-only dock. Labels remain in DOM but are visually removed. */
.dock {
  --dock-nav-icon-edge-inset: 26px;
  --dock-nav-icon-center-inset: 40px;
  --dock-nav-quarter-center-offset: 20px;
  --dock-nav-edge-padding: 0px;
  --dock-active-icon: var(--accent);
  display: block;
  align-items: center;
  gap: 0;
  bottom: 0;
  min-height: calc(50px + env(safe-area-inset-bottom));
  padding: 0 var(--dock-nav-edge-padding) env(safe-area-inset-bottom);
  border-radius: 0;
  background: var(--bg);
  border-top: 1px solid rgba(255, 255, 255, 0.055);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.dockItem {
  position: absolute;
  top: 0;
  left: 50%;
  width: 44px;
  margin-left: -22px;
  height: 50px;
  min-height: 50px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  opacity: 1;
  color: #fff;
  transition: color 150ms ease, opacity 150ms ease, transform 150ms ease;
}

.dockItem[data-target="me"] {
  left: var(--dock-nav-icon-center-inset);
}

.dockItem[data-target="me"] .dockIcon {
  margin-left: 0;
}

.dockItem[data-target="city"] {
  left: calc(25% + var(--dock-nav-quarter-center-offset));
}

.dockItem[data-target="map"] {
  left: 50%;
}

.dockItem[data-target="activity"] {
  left: calc(75% - var(--dock-nav-quarter-center-offset));
}

.dockItem[data-target="messages"] {
  left: calc(100% - var(--dock-nav-icon-center-inset));
}

.dockItem[data-target="messages"] .dockIcon {
  margin-right: 0;
}

.dockLabel {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.dockIcon,
.dockItem.dockItem--primary .dockIcon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  margin-bottom: 0;
}

.dockIcon svg,
.dockItem.dockItem--primary .dockIcon svg {
  width: 28px;
  height: 28px;
  opacity: 1;
  transition: color 150ms ease, opacity 150ms ease, transform 150ms ease;
}

.dockSvg--outline,
.dockSvg--outline * {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dockSvg--filled,
.dockSvg--filled * {
  fill: currentColor;
  stroke: none;
}

.dockItem.isActive,
.dockItem.is-active {
  color: var(--dock-active-icon);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  transform: none;
}

.dockItem.dockItem--primary:not(.isActive):not(.is-active) {
  opacity: 1;
}

.dockItem.isActive .dockIcon svg,
.dockItem.is-active .dockIcon svg {
  opacity: 1;
  filter: none;
  transform: none;
}

.dockItem.isActive .dockSvg--outline,
.dockItem.isActive .dockSvg--outline *,
.dockItem.is-active .dockSvg--outline,
.dockItem.is-active .dockSvg--outline * {
  stroke: currentColor;
  fill: none;
}

.dockItem.isActive .dockSvg--filled,
.dockItem.isActive .dockSvg--filled *,
.dockItem.is-active .dockSvg--filled,
.dockItem.is-active .dockSvg--filled * {
  fill: currentColor;
  stroke: none;
}

.dockItem.is-navigating,
.dockItem.tap-active {
  background: transparent;
  box-shadow: none;
  transform: none;
}

.dockItem:hover,
.dockItem:active {
  background: transparent;
  box-shadow: none;
  transform: none;
}

.dockBadge {
  top: 4px;
  right: calc(50% - 22px);
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  font-size: 9px;
}

/* Governs cross-document navigation only -- a full page load. Client-side route
   changes go through document.startViewTransition() in pwa.js and are styled by
   the ::view-transition rules below, so this staying `none` does not disable
   them. Full loads are rare here and deliberately stay abrupt. */
@view-transition {
  navigation: none;
}

/* One horizontal slide per destination. Content replacing a loading shell and
   same-screen refreshes bypass the transition in pwa.js. The dock stays put. */
html[data-neocity-route-motion] .dock {
  view-transition-name: app-dock;
}

::view-transition {
  pointer-events: none;
}

::view-transition-group(root),
::view-transition-group(app-dock) {
  animation: none;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: 220ms cubic-bezier(0.22, 0.8, 0.25, 1) both;
  mix-blend-mode: normal;
  pointer-events: none;
}

html[data-neocity-route-motion="forward"]::view-transition-old(root) {
  animation-name: routeSlideOutLeft;
}
html[data-neocity-route-motion="forward"]::view-transition-new(root) {
  animation-name: routeSlideInRight;
}
html[data-neocity-route-motion="back"]::view-transition-old(root) {
  animation-name: routeSlideOutRight;
}
html[data-neocity-route-motion="back"]::view-transition-new(root) {
  animation-name: routeSlideInLeft;
}

::view-transition-old(app-dock) {
  animation: none;
  opacity: 0;
}
::view-transition-new(app-dock) {
  animation: none;
  mix-blend-mode: normal;
}

@keyframes routeSlideOutLeft {
  to { transform: translateX(-100%); }
}
@keyframes routeSlideInRight {
  from { transform: translateX(100%); }
}
@keyframes routeSlideOutRight {
  to { transform: translateX(100%); }
}
@keyframes routeSlideInLeft {
  from { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
  /* pwa.js already declines to start a transition under this preference; this
     is here so a transition begun before the setting changed still ends
     immediately rather than animating. */
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 1ms;
  }
}

body.appFrame::before,
body.appFrame.mapPage::before,
body.appFrame.profilePage::before,
body.appFrame.cityPage::before,
body.appFrame.settingsScreen::before {
  content: none !important;
  display: none !important;
  animation: none !important;
}

/* Normal app navigation is represented by destination content/skeletons only. */
#nprogress,
.nprogress,
.turbo-progress-bar,
[data-neocity-navigation-progress],
[data-neocity-route-progress] {
  display: none !important;
  visibility: hidden !important;
  animation: none !important;
}

html.app-routing .app-shell,
html.app-routing .appShell {
  opacity: 1;
  transform: none;
  transition: none;
}

.instantNavShell {
  width: min(100%, 760px);
  margin: 0 auto;
  padding: 18px 16px calc(var(--nav-height) + 24px);
  color: rgba(244, 247, 252, 0.92);
  animation: instantShellEnter 180ms cubic-bezier(.22, 1, .36, 1) both;
}

.instantNavTopline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  margin-bottom: 16px;
}

.instantNavTitle {
  font-size: 18px;
  font-weight: 800;
}

.instantNavPulse {
  width: 34px;
  height: 6px;
  border-radius: 999px;
  background: rgba(238, 245, 255, 0.22);
  animation: instantNavPulse 1.2s ease-in-out infinite alternate;
}

.instantNavSkeletonGrid {
  display: grid;
  gap: 12px;
}

.instantNavSkeletonBlock {
  min-height: 92px;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.045), rgba(255,255,255,.095), rgba(255,255,255,.045));
  background-size: 220% 100%;
  animation: instantNavShimmer 1.35s linear infinite;
}

.instantNavSkeletonBlock--hero {
  min-height: 188px;
  margin-bottom: 14px;
}

.instantFeedShell {
  width: min(100%, 760px);
  min-height: calc(100dvh - var(--nav-height));
  margin: 0 auto;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 14px calc(var(--nav-height) + 24px);
  animation: instantShellEnter 180ms cubic-bezier(.22, 1, .36, 1) both;
}

.instantFeedSkeletonGrid {
  display: grid;
  gap: 12px;
}

.instantFeedSkeletonCard {
  position: relative;
  min-height: 210px;
  border-radius: var(--skeleton-radius-small);
  overflow: hidden;
  background: var(--skeleton-fill);
  opacity: var(--skeleton-surface-opacity);
  contain: layout paint;
}

.instantFeedSkeletonCard--hero,
.instantFeedShellPage.cityPage .instantFeedSkeletonCard {
  min-height: min(72dvh, 680px);
}

.instantFeedSkeletonCard::before,
.instantFeedSkeletonMedia::before,
.instantFeedSkeletonRail::before,
.instantFeedSkeletonLine::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--skeleton-highlight);
  transform: translateX(-100%);
  opacity: var(--skeleton-highlight-opacity);
  animation: neocitySkeletonSweep var(--skeleton-duration) var(--skeleton-easing) infinite;
  pointer-events: none;
}

.instantFeedSkeletonMedia,
.instantFeedSkeletonRail,
.instantFeedSkeletonLine {
  position: absolute;
  overflow: hidden;
  border-radius: var(--skeleton-radius-medium);
  background: var(--skeleton-fill);
  opacity: var(--skeleton-surface-opacity);
}

.instantFeedSkeletonMedia {
  inset: 0;
  border-radius: 0;
}

.instantFeedSkeletonRail {
  right: 16px;
  bottom: 82px;
  width: 46px;
  height: 198px;
}

.instantFeedSkeletonLine {
  left: 16px;
  right: 84px;
  bottom: 48px;
  height: 12px;
  border-radius: var(--skeleton-radius-pill);
}

.instantFeedSkeletonLine--short {
  right: 46%;
  bottom: 27px;
}

.instantDmChatShellPage .dmChatSurface {
  min-height: 100dvh;
  animation: instantShellEnter 180ms cubic-bezier(.22, 1, .36, 1) both;
}

.instantDmShellPage .commsFlatList.neoSkeletonStack {
  gap: 2px;
  animation: instantShellEnter 180ms cubic-bezier(.22, 1, .36, 1) both;
}

.instantDmShellPage .commsFlatList.neoSkeletonStack .commsFlatRow {
  min-height: 72px;
  border-radius: 0;
  background: transparent;
}

.instantDmShellPage .commsFlatList.neoSkeletonStack .neoSkeleton--avatar {
  width: 48px;
  height: 48px;
}

.instantDmShellPage .commsFlatList.neoSkeletonStack .neoSkeleton--line {
  background: var(--skeleton-fill);
  opacity: var(--skeleton-surface-opacity);
}

.instantDmChatStream {
  min-height: 0;
}

/* Applied by an inline script the moment the stream markup is parsed and removed
   as soon as it is anchored, so the real conversation is never painted sitting
   at the top. The class is only ever added by script, so a browser without JS
   shows the messages normally rather than a blank pane. Header and composer stay
   visible throughout. */
.dmChatStream.is-dm-positioning {
  visibility: hidden;
}

/* Anchored to the bottom of the stream, where the newest messages will land, so
   the spinner does not sit where nothing is about to appear. */
.dmChatStreamLoader {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 0;
  margin-top: auto;
}

/* Held back so a fast response never flashes a spinner. */
.dmChatStreamSpinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-top-color: rgba(255, 255, 255, 0.55);
  opacity: 0;
  animation:
    appRecoverySpin 760ms linear infinite,
    dmChatSpinnerFadeIn 140ms linear 150ms forwards;
}

:root[data-app-theme="light"] .dmChatStreamSpinner {
  border-color: rgba(0, 0, 0, 0.1);
  border-top-color: rgba(0, 0, 0, 0.42);
}

/* Pagination loader: sits inline at the top of the thread and never covers or
   replaces the messages already rendered. */
.dmChatOlderLoader {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0 14px;
}

.dmChatOlderLoader .dmChatStreamSpinner {
  width: 26px;
  height: 26px;
}

@keyframes dmChatSpinnerFadeIn {
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .dmChatStreamSpinner {
    animation: dmChatSpinnerFadeIn 140ms linear 150ms forwards;
  }
}

.instantDmComposer {
  pointer-events: none;
}

.instantDmComposer .dmComposerField {
  align-items: center;
}

.instantSecondaryShellPage .instantNavShell {
  min-height: calc(100dvh - var(--nav-height));
}

.appRecoveryStatus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: rgba(238, 245, 255, 0.9);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0;
}

.appRecoverySpinner {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-top-color: rgba(122, 212, 255, 0.86);
  animation: appRecoverySpin 760ms linear infinite;
}

.is-hard-failure .appRecoverySpinner {
  display: none;
}

.appRecoveryRefresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.055);
  color: rgba(244, 249, 255, 0.94);
  cursor: pointer;
  box-shadow: none;
}

.appRecoveryRefresh[hidden] {
  display: none;
}

.appRecoveryRefresh svg {
  width: 18px;
  height: 18px;
}

.appRecoveryRefresh:hover {
  background: rgba(255, 255, 255, 0.09);
}

.appRecoveryRefresh:focus-visible {
  outline: 2px solid rgba(122, 212, 255, 0.65);
  outline-offset: 3px;
}

:root[data-app-theme="light"] .activityPaginationRetry.appRecoveryStatus {
  color: #262626;
}

:root[data-app-theme="light"] .activityPaginationRetry .appRecoveryRefresh {
  border-color: #dbdbdb;
  background: #f5f5f5;
  color: #262626;
}

:root[data-app-theme="light"] .activityPaginationRetry .appRecoveryRefresh:hover {
  background: #eeeeee;
}

@keyframes appRecoverySpin {
  to { transform: rotate(360deg); }
}

.instantNavRefresh {
  margin-top: 10px;
}

.instantKnownProfilePage .instantKnownProfileShell {
  min-height: calc(100vh - var(--nav-height) - 34px);
}

.instantKnownProfileRefresh {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  min-height: 16px;
  margin-top: 8px;
}

.instantKnownProfileRefresh span:not(.neoSkeleton) {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgba(122, 212, 255, 0.72);
  animation: instantKnownPulse 900ms ease-in-out infinite alternate;
}

.instantKnownProfileRefresh span:nth-child(2) {
  animation-delay: 120ms;
}

.instantKnownProfileRefresh span:nth-child(3) {
  animation-delay: 240ms;
}

.instantKnownProfileBlocks {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.instantKnownProfileBlocks span:not(.neoSkeleton) {
  display: block;
  position: relative;
  min-height: 82px;
  overflow: hidden;
  border-radius: var(--skeleton-radius-small);
  background: var(--skeleton-fill);
  opacity: var(--skeleton-surface-opacity);
}

@keyframes instantNavPulse {
  from { opacity: .36; transform: scaleX(.74); }
  to { opacity: .78; transform: scaleX(1); }
}

@keyframes instantNavShimmer {
  from { background-position: 120% 0; }
  to { background-position: -120% 0; }
}

/* The loading shell exists to fill the gap while a route is still arriving, so
   it must be visible on the frame it is inserted. It used to start at opacity 0
   with `both` fill, which meant the element was invisible from insertion until
   the animation finished -- 180ms of bare --bg, which is nearly black, showing
   before the very thing whose job was to cover it. Fading in a placeholder
   delays the reassurance it exists to give.

   The small rise is kept: translating does not leave a hole the way fading
   does. */
@keyframes instantShellEnter {
  from {
    opacity: 1;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.app-routing .app-shell,
  html.app-routing .appShell {
    transform: none;
  }

  .instantNavPulse,
  .instantNavSkeletonBlock,
  .instantFeedSkeletonCard::before,
  .instantFeedSkeletonMedia::before,
  .instantFeedSkeletonRail::before,
  .instantFeedSkeletonLine::before,
  .instantFeedShell,
  .instantNavShell,
  .instantDmChatShellPage .dmChatSurface,
  .instantDmShellPage .commsFlatList.neoSkeletonStack {
    animation: none;
  }
}

/* Dedicated DM chat screen */
body.dmChatScreen {
  --dm-chat-bg: #05070b;
  --dm-chat-muted: rgba(225, 231, 242, 0.55);
  /* Steps of the shared surface ladder rather than three unrelated darks, so
     the thread reads as page -> message -> composer. */
  --dm-chat-incoming: var(--surface-3);
  --dm-chat-composer: var(--surface);
  /* Your own messages are the most-looked-at element in the app, so they carry
     the brand accent instead of a generic blue. The accent is light, so the
     bubble takes dark text (13:1) rather than white. */
  --dm-chat-outgoing: var(--accent);
  --dm-chat-outgoing-text: #04212e;
  --dm-system-nav-guard: 0px;
  overflow: hidden;
  background: var(--dm-chat-bg);
}

@media (max-width: 719px) and (pointer: coarse) {
  body.dmChatScreen {
    --dm-system-nav-guard: 48px;
  }
}

body.dmChatScreen .app-content,
body.dmChatScreen .appContent {
  flex: 1;
  min-height: 0;
  padding-bottom: 0;
  overflow: hidden;
}

body.dmChatScreen .content {
  flex: 1;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

body.dmChatScreen .dmChatPage {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

body.dmChatScreen .dmChatPage > .error,
body.dmChatScreen .dmChatPage > .chip.level {
  margin: 12px 14px 0;
}

body.dmChatScreen .dmChatSurface {
  flex: 1;
  min-height: 0;
  height: 100%;
  border: none;
  border-radius: 0;
  background: var(--dm-chat-bg);
  box-shadow: none;
}

body.dmChatScreen .dmChatHeader {
  flex-shrink: 0;
  grid-template-columns: 34px 38px minmax(0, 1fr) auto;
  gap: 6px;
  padding:
    calc(7px + env(safe-area-inset-top))
    max(8px, calc(8px + env(safe-area-inset-right)))
    5px
    max(8px, calc(8px + env(safe-area-inset-left)));
  border-bottom: 0;
  background: var(--dm-chat-bg);
  box-shadow: none;
}

body.dmChatScreen .dmHeaderActions {
  gap: 2px;
}

body.dmChatScreen .dmChatBack {
  width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(245, 248, 252, 0.94);
  box-shadow: none;
}

body.dmChatScreen .dmChatBack:hover,
body.dmChatScreen .dmChatBack:focus-visible {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  outline: none;
  transform: none;
}

body.dmChatScreen .dmChatBack svg {
  width: 26px;
  height: 26px;
}

body.dmChatScreen .dmChatAvatarButton,
body.dmChatScreen .dmChatAvatar {
  width: 38px;
  height: 38px;
}

body.dmChatScreen .dmChatAvatar {
  border: 0;
  background: rgba(255, 255, 255, 0.06);
}

body.dmChatScreen .dmChatIdentity {
  gap: 0;
}

body.dmChatScreen .dmChatName {
  font-size: 17px;
  font-weight: 750;
  line-height: 1.18;
}

body.dmChatScreen .dmChatPresence {
  min-height: 15px;
  font-size: 12px;
  line-height: 15px;
  color: var(--dm-chat-muted);
}

body.dmChatScreen .dmHeaderActionButton,
body.dmChatScreen .dmInfoButton {
  width: 34px;
  height: 34px;
  min-height: 34px;
  border: 0;
  background: transparent;
  color: rgba(245, 248, 252, 0.78);
}

body.dmChatScreen .dmHeaderActionButton:hover,
body.dmChatScreen .dmHeaderActionButton:focus-visible,
body.dmChatScreen .dmInfoButton:hover,
body.dmChatScreen .dmInfoButton:focus-visible {
  background: transparent;
  color: rgba(245, 248, 252, 0.94);
  outline: none;
}

body.dmChatScreen .dmHeaderActionButton:disabled {
  color: rgba(245, 248, 252, 0.28);
}

body.dmChatScreen .dmChatStream {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  /* The base .dmChatStream sets scroll-behavior: smooth, and scrollTo with
     behavior 'auto' defers to that computed value rather than jumping. Opening
     the thread therefore animated from the oldest message down to the newest.
     Positioning here must be instant; only the explicit 'smooth' calls made
     when a new message arrives should ever animate. */
  scroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
  padding:
    2px
    max(2px, calc(2px + env(safe-area-inset-right)))
    3px
    max(2px, calc(2px + env(safe-area-inset-left)));
  gap: 5px;
  background: var(--dm-chat-bg);
}

body.dmChatScreen .dmTimestampSeparator {
  align-self: center;
  margin: 10px 0 6px;
  color: rgba(225, 231, 242, 0.46);
  font-size: 10px;
  font-weight: 550;
  line-height: 1.15;
}

body.dmChatScreen .dmMessageRow {
  width: 100%;
  align-items: flex-end;
}

body.dmChatScreen .dmMessageRow.other,
body.dmChatScreen .dmMessageRow.admin {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  column-gap: 6px;
  justify-content: start;
}

body.dmChatScreen .dmMessageRow.mine,
body.dmChatScreen .dmMessageRow.player {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
}

body.dmChatScreen .dmMessageRow.mine + .dmMessageRow.mine,
body.dmChatScreen .dmMessageRow.player + .dmMessageRow.player,
body.dmChatScreen .dmMessageRow.other + .dmMessageRow.other,
body.dmChatScreen .dmMessageRow.admin + .dmMessageRow.admin {
  margin-top: -2px;
}

body.dmChatScreen .dmMessageAvatarSlot {
  grid-column: 1;
  width: 30px;
  height: 30px;
  align-self: end;
  display: inline-grid;
  place-items: center;
  margin-bottom: 1px;
}

body.dmChatScreen .dmMessageAvatar {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.08);
}

body.dmChatScreen .dmMessageAvatar.is-fallback {
  display: grid;
  place-items: center;
  color: rgba(245, 248, 252, 0.9);
  font-size: 13px;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.12);
}

body.dmChatScreen .dmBubble {
  max-width: min(90%, 420px);
  padding: 9px 12px;
  border: 0;
  border-radius: 17px;
  box-shadow: none;
}

body.dmChatScreen .dmChatStream .chat-row.player .dmBubble,
body.dmChatScreen .dmChatStream .chat-row.mine .dmBubble {
  border: 0;
  border-radius: 17px 17px 5px 17px;
  background: var(--dm-chat-outgoing);
  color: var(--dm-chat-outgoing-text);
}

body.dmChatScreen .dmChatStream .chat-row.other .dmBubble,
body.dmChatScreen .dmChatStream .chat-row.admin .dmBubble {
  grid-column: 2;
  justify-self: start;
  border-radius: 17px 17px 17px 5px;
  background: var(--dm-chat-incoming);
  color: rgba(245, 248, 252, 0.95);
}

body.dmChatScreen .dmBubbleBody {
  font-size: 17px;
  /* 1.28 left ~22px leading at this size, which crowded multi-line messages. */
  line-height: 1.4;
}

body.dmChatScreen .dmBubbleImage {
  margin-top: 0;
}

body.dmChatScreen .dmBubbleBody + .dmBubbleImage {
  margin-top: 5px;
}

body.dmChatScreen .dmBubble.has-media {
  overflow: hidden;
}

body.dmChatScreen .dmChatStream .chat-row.player .dmBubble.is-media-only,
body.dmChatScreen .dmChatStream .chat-row.mine .dmBubble.is-media-only,
body.dmChatScreen .dmChatStream .chat-row.other .dmBubble.is-media-only,
body.dmChatScreen .dmChatStream .chat-row.admin .dmBubble.is-media-only {
  max-width: min(76vw, 330px);
  padding: 0;
  border-radius: 18px;
  background: transparent;
}

body.dmChatScreen .dmMediaOpen {
  display: block;
  width: auto;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  overflow: hidden;
}

body.dmChatScreen .dmMediaOpen:focus-visible {
  outline: 2px solid rgba(122, 212, 255, 0.72);
  outline-offset: 2px;
}

body.dmChatScreen .dmBubbleImage img {
  width: auto;
  height: auto;
  max-width: min(76vw, 330px);
  max-height: min(58vh, 430px);
  border: 0;
  border-radius: 18px;
  object-fit: contain;
  background: #111318;
}

body.dmChatScreen .dmBubbleMeta {
  display: none;
}

/* Group chats need what a DM does not: which of several people is talking.
   dmBubbleMeta above is display:none because a DM has exactly one other party
   and repeating their name on every bubble is noise -- but the event and
   community chats put the sender name inside it, so their names were in the DOM
   and invisible. The sender is shown here instead, once per run of consecutive
   messages, beside the avatar the row's grid already reserves a column for. */
body.dmChatScreen .dmGroupSender {
  margin: 0 0 2px;
  color: rgba(147, 197, 253, 0.96);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

/* Without a name the bubble starts flush against the avatar; with one the text
   needs to clear it. Only the first bubble of a run carries the label, so the
   rest of the run stays tight. */
body.dmChatScreen .dmChatStream .chat-row.other .dmBubble > .dmGroupSender:first-child,
body.dmChatScreen .dmChatStream .chat-row.admin .dmBubble > .dmGroupSender:first-child {
  margin-top: -1px;
}

/* Every outgoing row keeps its own label in the DOM so the right text is ready
   the moment it becomes the newest, but only the row marked by
   refreshOutgoingStatusVisibility is shown. Hidden with display:none so the
   collapsed rows take no vertical space and the thread does not shift when the
   indicator moves from one message to the next. */
body.dmChatScreen .dmMessageStatus {
  display: none;
}

/* A send that failed or is still in flight always shows, wherever it sits: that
   is actionable state about this specific message, not a delivery receipt. */
body.dmChatScreen .dmMessageRow.shows-status .dmMessageStatus,
body.dmChatScreen .dmMessageRow.is-failed .dmMessageStatus,
body.dmChatScreen .dmMessageRow.is-pending .dmMessageStatus {
  display: block;
  min-height: 14px;
  margin: 2px 6px 0 0;
  color: rgba(218, 226, 238, 0.48);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  text-align: right;
}

body.dmChatScreen .dmMessageRow.is-failed .dmMessageStatus {
  color: #fca5a5;
}

body.dmChatScreen .dmMessageRetry {
  margin-left: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #bfdbfe;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

body.dmChatScreen .dmNewMessagesButton {
  position: absolute;
  left: 50%;
  bottom: calc(62px + env(safe-area-inset-bottom));
  z-index: 7;
  transform: translateX(-50%);
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(122, 212, 255, 0.24);
  border-radius: 999px;
  background: rgba(20, 25, 33, 0.94);
  color: rgba(245, 248, 252, 0.94);
  font-size: 12px;
  font-weight: 750;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

body.dmChatScreen .dmNewMessagesButton[hidden] {
  display: none;
}

body.dmChatScreen .dmComposer {
  position: sticky;
  bottom: 0;
  flex-shrink: 0;
  /* The bar sat almost flush against the screen edges at 2-3px, which is a lot
     of what read as awkward. This gives it room without eating thread height. */
  padding:
    6px
    max(10px, calc(10px + env(safe-area-inset-right)))
    calc(8px + env(safe-area-inset-bottom))
    max(10px, calc(10px + env(safe-area-inset-left)));
  background: var(--dm-chat-bg);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* One rounded bar and nothing else. The border, inset highlight and drop
   shadow stacked three depth cues on a single pill, which is what made it look
   heavy; a flat fill against the thread background is enough separation. */
body.dmChatScreen .dmComposerField {
  min-height: 46px;
  gap: 2px;
  padding: 3px 4px 3px 8px;
  border-color: transparent;
  border-radius: 24px;
  background: var(--dm-chat-composer);
  box-shadow: none;
}

body.dmChatScreen .dmComposerField:focus-within {
  border-color: transparent;
  background: var(--surface-2);
  box-shadow: none;
}

/* The pill is the only container, so nested borders and fills on the icons
   just add weight. Bare glyphs, with feedback on press rather than at rest. */
/* Colours come from theme tokens, not literals: the light composer is near
   white, where a hardcoded pale icon would disappear. */
body.dmChatScreen .dmAttachBtn,
body.dmChatScreen .dmSendBtn {
  width: 38px;
  height: 38px;
  min-height: 38px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  opacity: 0.75;
}

body.dmChatScreen .dmAttachBtn:active,
body.dmChatScreen .dmSendBtn:active {
  background: rgba(127, 127, 127, 0.14);
}

/* Send stays quiet until there is something to send, then takes the accent.
   has-draft is already toggled by the composer's existing input handler. */
body.dmChatScreen .dmSendBtn {
  opacity: 0.4;
}

body.dmChatScreen .dmComposer.has-draft .dmSendBtn {
  background: var(--dm-chat-outgoing);
  color: var(--dm-chat-outgoing-text);
  opacity: 1;
}

body.dmChatScreen .dmComposerField input[type="text"] {
  min-height: 38px;
  padding: 0 2px;
  font-size: 16px;
  background: transparent;
}

body.dmChatScreen .app-shell,
body.dmChatScreen .appShell {
  height: calc(100vh - var(--dm-system-nav-guard));
}

@media (min-width: 720px) {
  body.dmChatScreen .app-shell,
  body.dmChatScreen .appShell {
    height: calc(100vh - 36px - var(--dm-system-nav-guard));
  }
}

@supports (height: 100dvh) {
  body.dmChatScreen .app-shell,
  body.dmChatScreen .appShell {
    height: calc(100dvh - var(--dm-system-nav-guard));
  }

  @media (min-width: 720px) {
    body.dmChatScreen .app-shell,
    body.dmChatScreen .appShell {
      height: calc(100dvh - 36px - var(--dm-system-nav-guard));
    }
  }
}

.dmMediaViewer,
.dmCallPanel {
  position: fixed;
  inset: 0;
  z-index: 120;
}

.dmMediaViewer[hidden],
.dmCallPanel[hidden] {
  display: none;
}

body.dmMediaViewerOpen,
body.dmCallOpen {
  overflow: hidden;
}

.dmMediaViewer {
  display: grid;
  place-items: center;
  padding:
    calc(18px + env(safe-area-inset-top))
    calc(14px + env(safe-area-inset-right))
    calc(18px + env(safe-area-inset-bottom))
    calc(14px + env(safe-area-inset-left));
  background: rgba(0, 0, 0, 0.9);
}

.dmMediaViewerBackdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
  cursor: zoom-out;
}

.dmMediaViewerStage {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.dmMediaViewerStage img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.48);
}

.dmMediaViewerActions {
  position: absolute;
  z-index: 2;
  top: calc(12px + env(safe-area-inset-top));
  right: calc(12px + env(safe-area-inset-right));
  display: inline-flex;
  gap: 8px;
}

.dmMediaViewerAction {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: rgba(26, 28, 34, 0.86);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

.dmMediaViewerAction:hover,
.dmMediaViewerAction:focus-visible {
  background: rgba(46, 50, 58, 0.96);
  color: #fff;
  outline: none;
  text-decoration: none;
}

.dmMediaViewerAction svg {
  width: 20px;
  height: 20px;
}

.dmCallPanel {
  display: grid;
  place-items: center;
  padding:
    calc(18px + env(safe-area-inset-top))
    calc(14px + env(safe-area-inset-right))
    calc(18px + env(safe-area-inset-bottom))
    calc(14px + env(safe-area-inset-left));
}

.dmCallBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
}

.dmCallSheet {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 22px 18px 18px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(13, 15, 20, 0.96);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.46);
}

.dmCallMedia {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  min-height: 260px;
  border-radius: 22px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at top, rgba(90, 168, 255, 0.18), transparent 50%),
    #111318;
}

.dmCallRemoteVideo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dmCallAvatar {
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(245, 248, 252, 0.96);
  font-size: 42px;
  font-weight: 800;
}

.dmCallAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dmCallLocalVideo {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 96px;
  height: 128px;
  border-radius: 16px;
  object-fit: cover;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.dmCallCopy {
  width: 100%;
  min-width: 0;
  text-align: center;
}

.dmCallTitle {
  font-size: 18px;
  font-weight: 800;
  color: rgba(248, 250, 252, 0.98);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dmCallStatus {
  margin-top: 5px;
  min-height: 18px;
  font-size: 13px;
  color: rgba(215, 223, 235, 0.68);
}

.dmCallActions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.dmCallControl {
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
}

.dmCallControl:hover,
.dmCallControl:focus-visible {
  background: rgba(255, 255, 255, 0.16);
  outline: none;
}

.dmCallControl[aria-pressed="true"] {
  background: rgba(255, 255, 255, 0.24);
}

.dmCallControl:disabled {
  opacity: 0.35;
  cursor: default;
}

.dmCallControl--accept {
  background: #24c268;
}

.dmCallControl--accept:hover,
.dmCallControl--accept:focus-visible {
  background: #2bd873;
}

.dmCallControl--end {
  background: #f04444;
}

.dmCallControl--end:hover,
.dmCallControl--end:focus-visible {
  background: #ff5555;
}

.dmCallControl svg {
  width: 22px;
  height: 22px;
}

/* Profile refresh */
.profileOwnerPage .content,
.profileViewPage .content {
  gap: 12px;
}

.profileOwnerPage .profileOwnerOverview,
.profileViewPage .profilePublicOverview {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.profilePage .profilePanelLite,
.profilePage .profileHeaderCardLite {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(122, 212, 255, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.038), rgba(255, 255, 255, 0.016)),
    rgba(10, 15, 22, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 14px 28px rgba(0, 0, 0, 0.18);
}

.profileOwnerPage .profileHeaderCardLite,
.profileViewPage .profileHeaderCardLite,
.profileOwnerPage .profilePanelLite,
.profileViewPage .profilePanelLite {
  padding: 14px;
}

.profilePage .profileSectionHead {
  align-items: center;
}

.profilePage .profileSectionLead {
  font-size: 14px;
  font-weight: 700;
  color: rgba(244, 249, 255, 0.94);
}

.profileOwnerPage .profileOwnerHeroCard::before {
  opacity: 0.72;
}

.profileOwnerPage .profileOwnerIdentity {
  align-items: center;
}

.profileOwnerPage .profileAvatarHalo {
  width: 78px;
  height: 78px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 12px 24px rgba(8, 14, 24, 0.28),
    0 0 24px rgba(111, 230, 200, 0.1);
}

.profileOwnerPage .profileOwnerHeroInfo,
.profileViewPage .profilePublicHeroInfo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.profileOwnerPage .profileOwnerName,
.profileViewPage .profileHandle {
  line-height: 1;
}

.profileOwnerPage .profileOwnerBadgeRow,
.profileViewPage .profilePublicBadgeRow {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.profileOwnerPage .profileBio,
.profileViewPage .profileBio {
  margin-top: 2px;
  max-width: none;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(206, 215, 227, 0.8);
}

.profileOwnerPage .profileOwnerUtilityRow {
  display: flex;
}

.profileUtilityBtn,
.profileActionButton {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.025)),
    rgba(255, 255, 255, 0.02);
  color: rgba(244, 249, 255, 0.96);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, opacity 160ms ease;
}

.profileUtilityBtn {
  min-height: 58px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  padding: 12px 14px;
}

.profileUtilityLabel {
  font-size: 14px;
  font-weight: 700;
}

.profileUtilityMeta {
  font-size: 12px;
  color: rgba(188, 198, 211, 0.72);
}

.profileActionButton.is-primary {
  border-color: rgba(111, 230, 200, 0.34);
  background:
    linear-gradient(180deg, rgba(111, 230, 200, 0.24), rgba(111, 230, 200, 0.12)),
    rgba(111, 230, 200, 0.08);
}

.profileActionButton:disabled,
.profileUtilityBtn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.profileOwnerPage .profileOwnerActionRow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.profileOwnerPage .profileOwnerActionRow .profileActionButton.is-primary {
  grid-column: 1 / -1;
}

.profileViewPage .profileRelationshipBar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.profileActionForm {
  margin: 0;
}

.profileActionForm > * {
  width: 100%;
}

.profileActionState {
  opacity: 0.88;
}

.profileStatsButtonRow {
  padding: 0;
  gap: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.profileStatsButtonRow .profileStatInline {
  position: relative;
  padding: 2px 8px 0;
}

.profileStatsButtonRow .profileStatInline:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 0;
  bottom: 10px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.12), transparent);
}

.profileStatButton {
  min-height: 84px;
  border: none;
  background: transparent;
  cursor: default;
  transition: transform 160ms ease, background 160ms ease;
}

.profileStatButton.is-interactive {
  cursor: pointer;
}

.profileStatButton.is-disabled {
  opacity: 0.84;
}

.profileStatButton .profileStatValue {
  font-size: 26px;
  font-weight: 780;
  letter-spacing: -0.04em;
  line-height: 1;
}

.profileStatButton .profileStatLabel {
  margin-top: 5px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: rgba(184, 195, 208, 0.66);
}

.profileOwnerPage .profileOwnerContentCard,
.profileOwnerPage .profileOwnerEditCard,
.profileViewPage .profileContentCard,
.profileViewPage .profileAccessCard,
.profileViewPage .profileVisibilityCard {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.profilePage .postsGrid {
  gap: 8px;
}

.profilePage .postThumbBtn,
.profilePage .postThumb {
  border-radius: 16px;
}

.profilePage .postThumb {
  border: 1px solid rgba(255, 255, 255, 0.06);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.032), rgba(255, 255, 255, 0.012)),
    rgba(12, 17, 24, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 10px 20px rgba(0, 0, 0, 0.14);
}

.profileEmptyState {
  min-height: 180px;
  padding: 20px 18px;
  border-radius: 18px;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0.006)),
    rgba(255, 255, 255, 0.012);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  box-shadow: none;
}

.profileEmptyIcon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: rgba(122, 212, 255, 0.88);
  background: rgba(122, 212, 255, 0.08);
  border: 1px solid rgba(122, 212, 255, 0.16);
}

.profileEmptyIcon svg {
  width: 24px;
  height: 24px;
}

.profileEmptyTitle {
  font-size: 15px;
  font-weight: 700;
  color: rgba(244, 249, 255, 0.96);
}

.profileEmptyMeta {
  max-width: 280px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(188, 198, 211, 0.72);
}

.profileEmptyAction {
  margin-top: 4px;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(111, 230, 200, 0.34);
  background:
    linear-gradient(180deg, rgba(111, 230, 200, 0.22), rgba(111, 230, 200, 0.1)),
    rgba(111, 230, 200, 0.06);
  color: rgba(247, 251, 255, 0.98);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.profileViewPage .profilePublicHeroCard {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding-right: 56px;
}

.profileViewPage .profileAvatar,
.profileViewPage .profileAvatarLg {
  width: 78px;
  height: 78px;
  flex: none;
}

.profileViewPage .profilePublicMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: rgba(195, 205, 216, 0.74);
  font-size: 13px;
}

.profileViewPage .profilePublicStats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.profileViewPage .profilePublicLockup {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.profileSocialSheet {
  position: fixed;
  inset: 0;
  display: none;
  pointer-events: none;
  z-index: 126;
}

.profileSocialSheet.is-open {
  display: block;
  pointer-events: auto;
}

.profileSocialBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 5, 9, 0.24);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.profileSocialPanel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(280px, 62vh, 760px);
  max-height: min(92vh, 760px);
  min-height: 280px;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 10px 18px calc(14px + env(safe-area-inset-bottom, 0px));
  border-radius: 28px 28px 0 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  background:
    linear-gradient(180deg, rgba(13, 18, 28, 0.99), rgba(5, 8, 14, 0.995));
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.28);
  transform: translateY(100%);
  transition: transform 220ms ease, height 220ms cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
  box-sizing: border-box;
  will-change: transform, height;
}

.profileSocialSheet.is-open .profileSocialPanel {
  transform: translateY(0);
}

.profileSocialGrab {
  flex-shrink: 0;
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin: 0 -18px;
  padding: 6px 18px 12px;
  min-height: 28px;
  box-sizing: border-box;
  touch-action: none;
  cursor: grab;
  -webkit-tap-highlight-color: transparent;
}

.profileSocialGrab:active {
  cursor: grabbing;
}

.profileSocialDragHandle {
  width: 42px;
  height: 5px;
  border-radius: 999px;
  background: rgba(145, 163, 186, 0.38);
  pointer-events: none;
}

.profileSocialHeader {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  margin: 0 -14px;
  padding: 0 0 12px;
  touch-action: none;
  cursor: grab;
  -webkit-tap-highlight-color: transparent;
}

.profileSocialHeader:active {
  cursor: grabbing;
}

.profileSocialHeaderRow {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  min-width: 0;
}

.profileSocialTitle {
  min-width: 0;
  font-size: 18px;
  line-height: 1.15;
  font-weight: 740;
  color: rgba(247, 251, 255, 0.96);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profileSocialCount {
  padding-left: 17px;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 560;
  color: rgba(188, 198, 211, 0.68);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profileSocialBack {
  flex: 0 0 auto;
  width: 28px;
  height: 36px;
  display: inline-grid;
  align-items: center;
  justify-items: start;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(247, 251, 255, 0.94);
  cursor: pointer;
  touch-action: manipulation;
}

.profileSocialBack svg {
  width: 24px;
  height: 24px;
  display: block;
  transform: translateX(-8px);
}

.profileSocialList {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  -webkit-overflow-scrolling: touch;
}

.profileSocialState {
  padding: 36px 8px;
  text-align: center;
}

.profileSocialState--skeleton {
  display: grid;
  gap: 12px;
  padding: 22px 4px;
  text-align: left;
}

.profileSocialSkeletonRow {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 54px;
}

.profileSocialSkeletonText {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.profileSocialState .appRecoverySpinner,
.profileSocialState .profileSocialRefresh {
  margin: 0 auto 12px;
}

.profileSocialStateTitle {
  font-size: 15px;
  font-weight: 720;
  color: rgba(244, 249, 255, 0.94);
}

.profileSocialStateMeta {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.35;
  color: rgba(188, 198, 211, 0.72);
}

.profileSocialState.is-error .profileSocialStateTitle {
  color: #fca5a5;
}

.profileSocialState .profileSocialRefresh {
  margin-top: 14px;
  margin-bottom: 0;
}

.profileSocialRow {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 68px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(244, 249, 255, 0.96);
  text-decoration: none;
  transition: background 160ms ease, transform 160ms ease;
}

.profileSocialRow:last-child {
  border-bottom: 0;
}

.profileSocialAvatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.055);
}

.profileSocialAvatarImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.profileSocialAvatarFallback {
  font-size: 14px;
  font-weight: 740;
  color: rgba(244, 249, 255, 0.96);
}

.profileSocialMain {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.profileSocialName {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  line-height: 1.15;
  font-weight: 720;
}

.profileSocialUsername {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  line-height: 1.2;
  color: rgba(188, 198, 211, 0.72);
}

.profileSocialOpen,
.profileSocialOpen body {
  overflow: hidden;
}

#profile-content,
#profile-edit,
#profile-details-form,
#profile-post-form {
  scroll-margin-top: 92px;
}

@media (hover: hover) and (pointer: fine) {
  .profileUtilityBtn:hover,
  .profileActionButton:hover {
    text-decoration: none;
    transform: translateY(-1px);
    border-color: rgba(122, 212, 255, 0.2);
    background:
      linear-gradient(180deg, rgba(122, 212, 255, 0.08), rgba(255, 255, 255, 0.02)),
      rgba(255, 255, 255, 0.02);
  }

  .profileSocialRow:hover,
  .profileSocialBack:hover {
    text-decoration: none;
    background: rgba(255, 255, 255, 0.045);
  }

  .profileStatButton.is-interactive:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.025);
  }
}

.profileUtilityBtn:active,
.profileActionButton:active,
.profileSocialRow:active,
.profileStatButton.is-interactive:active {
  transform: scale(0.99);
}

@media (max-width: 560px) {
  .profileOwnerPage .content,
  .profileViewPage .content {
    gap: 10px;
  }

  .profilePage .profilePanelLite,
  .profilePage .profileHeaderCardLite {
    border-radius: 16px;
    padding: 12px;
  }

  .profileOwnerPage .profileOwnerIdentity,
  .profileViewPage .profilePublicHeroCard {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 10px;
    align-items: flex-start;
  }

  .profileOwnerPage .profileAvatarHalo,
  .profileViewPage .profileAvatar,
  .profileViewPage .profileAvatarLg {
    width: 72px;
    height: 72px;
  }

  .profileOwnerPage .profileOwnerActionRow,
  .profileViewPage .profileRelationshipBar {
    grid-template-columns: 1fr;
  }

  .profileOwnerPage .profileOwnerActionRow .profileActionButton.is-primary {
    grid-column: auto;
  }

  .profileStatButton {
    min-height: 76px;
  }

  .profileStatButton .profileStatValue {
    font-size: 23px;
  }

  .profileSocialPanel {
    height: min(62vh, 620px);
    max-height: min(92vh, 760px);
  }
}

/* Profile social layout */
.profilePage {
  --profile-surface-bg: transparent;
  --profile-line: rgba(255, 255, 255, 0.08);
  --profile-line-soft: rgba(255, 255, 255, 0.06);
  --profile-line-strong: rgba(122, 212, 255, 0.24);
  --profile-muted: rgba(190, 200, 214, 0.74);
  --profile-soft: rgba(255, 255, 255, 0.024);
  --profile-accent: rgba(122, 212, 255, 0.96);
}

.profilePage .profilePageContent {
  gap: 10px;
  padding-bottom: calc(118px + env(safe-area-inset-bottom, 0px));
}

.profileViewPage--visitor .appContent {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.profileViewPage--visitor .profilePageContent {
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

.profilePage .profileSurface {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--profile-surface-bg);
  box-shadow: none;
}

.profilePage .profileSectionBlock {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  border-top: none;
}

.profilePage .profileSectionBlock:first-child {
  padding-top: 0;
}

.profilePage .profileSectionBlockTabs {
  gap: 10px;
  padding-bottom: 0;
}

.profilePage .profileSectionBlockStats {
  gap: 10px;
}

.profilePage .profileHeroBlock--stacked {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  overflow: visible;
}

.profilePage .profileHeroTop {
  --profile-hero-avatar-size: 120px;
  --profile-hero-avatar-bleed: 0px;
  --profile-hero-avatar-gap: 10px;
  display: grid;
  grid-template-columns: calc(var(--profile-hero-avatar-size) - var(--profile-hero-avatar-bleed)) minmax(0, 1fr);
  gap: var(--profile-hero-avatar-gap);
  align-items: start;
  overflow: visible;
}

.profilePage .profileHeroMedia {
  width: var(--profile-hero-avatar-size);
  margin-left: calc(var(--profile-hero-avatar-bleed) * -1);
  min-width: 0;
  overflow: visible;
}

.profilePage .profileHeroImageSquare {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 22px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background:
    radial-gradient(circle at 22% 18%, rgba(122, 212, 255, 0.18), transparent 48%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)),
    rgba(10, 15, 24, 0.82);
  box-shadow: 0 10px 22px rgba(2, 6, 12, 0.12);
}

@media (min-width: 720px) {
  .profilePage .profileHeroTop {
    --profile-hero-avatar-bleed: 10px;
  }
}

.profilePage .profileHeroImageSquare img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.profilePage .profileHeroImageSquare span {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: rgba(247, 251, 255, 0.96);
}

.profilePage .profileHeroCopy {
  align-self: stretch;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding-top: 2px;
}

.profilePage .profileHeroIdentityLine {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-self: stretch;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  gap: 6px 8px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--profile-muted);
}

.profilePage .profileHeroIdentitySep {
  color: rgba(255, 255, 255, 0.22);
  font-weight: 500;
}

.profilePage .profileHeroStatsLine {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
  align-self: flex-start;
  justify-content: flex-start;
  width: auto;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  column-gap: 18px;
  margin-top: 11px;
  font-size: clamp(10px, 2.1vw + 0.31rem, 14px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: rgba(220, 228, 240, 0.82);
  overflow: hidden;
  white-space: nowrap;
}

.profilePage .profileHeroStatMuted {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  flex-shrink: 0;
  white-space: nowrap;
  color: rgba(190, 200, 214, 0.62);
}

.profilePage .profileHeroStatMuted strong {
  margin-right: 0;
  font-weight: 650;
  color: rgba(220, 228, 240, 0.78);
}

.profilePage .profileHeroStatsLine .profileStatLink.profileStatLink--inline {
  position: static;
  display: inline-flex;
  flex-direction: row;
  flex: 0 0 auto;
  flex-shrink: 0;
  width: auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  align-items: baseline;
  justify-content: flex-start;
  gap: 4px;
  font: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
}

.profilePage .profileHeroStatsLine .profileStatLink.profileStatLink--inline::after,
.profilePage .profileHeroStatsLine .profileHeroStatMuted::after {
  position: static;
  top: auto;
  right: auto;
  bottom: auto;
  width: auto;
  background: none;
  display: inline-block;
}

.profilePage .profileHeroStatsLine .profileStatLink.profileStatLink--inline:not(:last-child)::after,
.profilePage .profileHeroStatsLine .profileHeroStatMuted:not(:last-child)::after {
  content: none;
}

.profilePage .profileHeroStatsLine .profileStatLink.profileStatLink--inline:last-child::after,
.profilePage .profileHeroStatsLine .profileHeroStatMuted:last-child::after {
  content: none;
}

.profilePage .profileHeroStatsLine .profileStatLink.profileStatLink--inline strong {
  display: inline;
  margin-right: 0;
  font-size: inherit;
  font-weight: 650;
  letter-spacing: 0;
  color: rgba(244, 248, 255, 0.92);
}

.profilePage .profileHeroStatsLine .profileStatLink.profileStatLink--inline.is-interactive {
  cursor: pointer;
  color: rgba(220, 228, 240, 0.88);
}

.profilePage .profileHeroStatsLine .profileStatLink.profileStatLink--inline.is-interactive strong {
  color: var(--profile-accent);
}

.profilePage .profileHeroStatsLine .profileStatLink.profileStatLink--inline:disabled {
  opacity: 0.72;
  cursor: default;
}

.profilePage .profileHeroStatsLine .profileStatLink.profileStatLink--inline:disabled strong {
  color: rgba(220, 228, 240, 0.78);
}

.profilePage .profileHeroBadgeRow:empty {
  display: none;
}

.profilePage .profileHeroTitleRow {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.profilePage .profileHeroTitleCluster {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

.profilePage .profileHeroTitleRow > .profileVisibilityBadge {
  flex-shrink: 0;
  margin-left: auto;
}

.profilePage .profileLifetimeTitlePill {
  display: inline;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(168, 204, 236, 0.72);
  flex-shrink: 0;
  vertical-align: baseline;
}

.profilePage .profileHeroTitle {
  min-width: 0;
  font-size: clamp(28px, 6vw, 34px);
  line-height: 1.02;
  letter-spacing: -0.05em;
  font-weight: 820;
  color: rgba(247, 251, 255, 0.98);
}

.profilePage .profileHeroMetaRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: var(--profile-muted);
}

.profilePage .profileHeroBadgeRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.profilePage .profileVisibilityBadge,
.profilePage .profileRoleBadge,
.profilePage .profileStatusBadge,
.profilePage .profileDistrictChip {
  min-height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.024);
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(228, 236, 246, 0.8);
}

.profilePage .profileVisibilityBadge.is-public {
  color: rgba(214, 247, 255, 0.96);
  border-color: rgba(122, 212, 255, 0.18);
  background: rgba(122, 212, 255, 0.08);
}

.profilePage .profileRoleBadge {
  color: rgba(255, 229, 182, 0.94);
  border-color: rgba(255, 188, 102, 0.16);
  background: rgba(255, 188, 102, 0.08);
}

.profilePage .profileCompanyName {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(231, 238, 246, 0.82);
}

.profilePage .profileBio {
  margin-top: 3px;
  max-width: 34rem;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(212, 221, 232, 0.78);
}

.profileOwnerPage .profileSurface {
  gap: 8px;
}

.profileOwnerPage .profileHeroBlock--stacked {
  gap: 6px;
}

.profileOwnerPage .profileHeroStatsLine {
  margin-top: 14px;
  font-size: clamp(11px, 2.2vw + 0.35rem, 15px);
}

.profileOwnerPage .profileBio {
  margin-top: 0;
  max-width: 100%;
  overflow: hidden;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.profileOwnerPage .profileQuickActionBar--hero {
  margin-top: 4px;
  padding-top: 0;
}

.profilePage .profileQuickActionBar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.profilePage .profileQuickActionBar--hero {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  width: 100%;
  box-sizing: border-box;
  padding-top: 2px;
}

.profilePage .profileQuickActionBar--hero .profileQuickActionForm,
.profilePage .profileQuickActionBar--hero > * {
  flex: 0 0 auto;
  min-width: 0;
}

.profilePage .profileQuickActionBar--hero .profileQuickActionForm > * {
  width: auto;
}

.profilePage .profileQuickActionBar--hero .profileQuickIconAction {
  width: auto;
  min-width: 0;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  gap: 7px;
  flex: 0 1 auto;
  border-color: rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.035);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.profilePage .profileQuickActionBar--hero .profileQuickIconAction .profileQuickIcon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--profile-accent);
}

.profilePage .profileQuickActionBar--hero .profileQuickIconAction .profileQuickIcon svg {
  width: 16px;
  height: 16px;
  display: block;
}

.profilePage .profileQuickActionBar--hero .profileQuickLabel {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.01em;
  color: rgba(247, 251, 255, 0.94);
  white-space: nowrap;
}

.profilePage .profileQuickActionBar--hero .profileQuickIconAction:active {
  background: rgba(122, 212, 255, 0.2);
  border-color: rgba(122, 212, 255, 0.45);
}

.profilePage .profileQuickActionBar--hero .profileQuickIconAction:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(122, 212, 255, 0.28);
  border-color: rgba(122, 212, 255, 0.4);
}

.profilePage .profileQuickActionBar--hero .profileQuickIconAction.is-primary .profileQuickIcon,
.profilePage .profileQuickActionBar--hero .profileQuickIconAction.is-state .profileQuickIcon {
  border: none;
  background: transparent;
}

.profilePage .profileQuickActionBar--hero .profileQuickIconAction.is-primary .profileQuickIcon {
  color: rgba(186, 238, 255, 0.98);
}

.profilePage .profileQuickActionBar--hero .profileQuickIconAction.is-state .profileQuickIcon {
  color: rgba(122, 212, 255, 0.42);
}

.profilePage .profileQuickActionForm,
.profilePage .profileQuickActionBar:not(.profileQuickActionBar--hero) > * {
  flex: 1 1 112px;
  min-width: 0;
  margin: 0;
}

.profilePage .profileQuickActionForm > * {
  width: 100%;
}

.profilePage .profileQuickActionBar--hero .profileQuickActionForm > * {
  width: auto;
}

.profilePage .profileQuickIconAction {
  width: 100%;
  min-height: 52px;
  padding: 0 12px;
  border-radius: 16px;
  border: 1px solid var(--profile-line);
  background: var(--profile-soft);
  color: rgba(247, 251, 255, 0.96);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: none;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    opacity 160ms ease;
}

.profilePage .profileQuickIcon {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--profile-accent);
  border: 1px solid rgba(122, 212, 255, 0.14);
  background: rgba(122, 212, 255, 0.08);
}

.profilePage .profileQuickIcon svg {
  width: 16px;
  height: 16px;
}

.profilePage .profileQuickIconAction.is-primary {
  border-color: rgba(111, 230, 200, 0.18);
  background: rgba(111, 230, 200, 0.08);
}

.profilePage .profileQuickIconAction.is-primary .profileQuickIcon {
  color: rgba(233, 255, 248, 0.96);
  border-color: rgba(111, 230, 200, 0.18);
  background: rgba(111, 230, 200, 0.14);
}

.profilePage .profileQuickIconAction.is-state {
  background: rgba(255, 255, 255, 0.018);
}

.profilePage .profileQuickIconAction:disabled {
  opacity: 0.58;
  cursor: not-allowed;
}

.profilePage .profileActionMenuWrap {
  position: relative;
}

.profilePage .profileActionMenu {
  top: calc(100% + 8px);
  right: 0;
  left: auto;
  min-width: 188px;
  z-index: 20;
}

.profilePage .profileStatsRow {
  display: grid;
  grid-template-columns: repeat(var(--profile-stat-cols, 3), minmax(0, 1fr));
  align-items: stretch;
  gap: 0;
  width: 100%;
  padding: 8px 0 6px;
  border: none;
}

.profilePage .profileStatLink {
  position: relative;
  min-height: 50px;
  padding: 8px 6px;
  border: 0;
  background: transparent;
  color: rgba(247, 251, 255, 0.96);
  font: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
  transition: transform 160ms ease, background 160ms ease, opacity 160ms ease;
}

.profilePage .profileStatLink:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 0;
  bottom: 12px;
  width: 1px;
  background: rgba(255, 255, 255, 0.06);
}

.profilePage .profileStatLink strong {
  display: block;
  font-size: 17px;
  line-height: 1.1;
  font-weight: 720;
  letter-spacing: -0.03em;
  color: rgba(248, 250, 255, 0.94);
}

.profilePage .profileStatLink span {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(176, 188, 206, 0.72);
}

.profilePage .profileStatLink.is-interactive {
  cursor: pointer;
}

.profilePage .profileStatLink:disabled {
  opacity: 0.78;
}

.profilePage .profileInlineStatus {
  min-height: 12px;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
  color: var(--profile-accent);
}

.profilePage .profileInlineStatus.is-error {
  color: #fca5a5;
}

.profilePage .profileTabBar {
  display: grid;
  grid-template-columns: repeat(var(--profile-tab-count, 3), minmax(0, 1fr));
  align-items: stretch;
  gap: 8px;
  width: 100%;
  padding-top: 0;
  border-bottom: none;
}

.profilePage .profileTabButton {
  position: relative;
  width: 100%;
  min-height: 44px;
  padding: 6px 4px 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(186, 197, 212, 0.82);
  font: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  text-decoration: none;
  transition:
    color 160ms ease,
    transform 160ms ease;
}

.profilePage .profileTabGlyph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: inherit;
  opacity: 0.72;
  flex-shrink: 0;
}

.profilePage .profileTabButton.is-active .profileTabGlyph {
  opacity: 1;
}

.profilePage .profileTabLabel {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.15;
  text-align: center;
  max-width: 100%;
}

.profilePage .profileTabButton::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  border-radius: 999px;
  background: transparent;
  transition: background 160ms ease;
}

.profilePage .profileTabButton.is-active {
  color: rgba(247, 251, 255, 0.98);
  background: transparent;
  box-shadow: none;
}

.profilePage a.profileTabButton {
  cursor: pointer;
}

.communityChatSurface {
  overflow: hidden;
}

.communityFeedBlock,
.communityChatBlock {
  padding: 0 20px 16px;
}

.communityFeedComposer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

.communityFeedComposer textarea {
  width: 100%;
  min-height: 92px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  resize: vertical;
}

.communityFeedComposerActions {
  display: flex;
  justify-content: flex-end;
}

.communityFeedComposerActions .missionButton {
  width: auto;
}

.communityFeedList {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.communityFeedCard {
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
}

.communityAdminBlock {
  margin-bottom: 14px;
}

.communityMemberList {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

.communityMemberRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
}

.communityMemberIdentity {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.communityMemberIdentity .commsInboxAvatar {
  width: 42px;
  height: 42px;
  flex: none;
}

.communityMemberName {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.communityMemberMeta {
  font-size: 12px;
  color: var(--muted);
}

.communityMemberRow form .missionButton {
  width: auto;
  min-height: 38px;
}

.communityFeedMeta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--muted);
}

.communityFeedBody {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
}

.profilePage .profileTabButton.is-active::after {
  background: var(--profile-accent);
}

.profilePage .profileTabPanels {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.profilePage .profileTabPanel {
  min-height: clamp(240px, 34vh, 420px);
}

.profilePage .profileTabPanel[hidden] {
  display: none !important;
}

.profilePage .postsGrid {
  gap: 8px;
}

.profilePage .postThumbBtn,
.profilePage .postThumb {
  border-radius: 20px;
}

.profilePage .profileEmptyState {
  min-height: clamp(240px, 34vh, 420px);
  padding: 24px 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
}

.profilePage .profileEmptyContent {
  max-width: 30rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.profilePage .profileEmptyIcon {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(122, 212, 255, 0.14);
  background: rgba(122, 212, 255, 0.08);
  color: rgba(214, 247, 255, 0.96);
}

.profilePage .profileEmptyTitle {
  font-size: 17px;
  font-weight: 760;
  line-height: 1.25;
  color: rgba(247, 251, 255, 0.96);
}

.profilePage .profilePostList > .profileEmptyState {
  grid-column: 1 / -1;
}

.profilePage:not(.savedPage) .profilePostList > .profileEmptyState {
  width: calc(100% - 28px);
  margin-inline: 14px;
}

.profilePage .profileEmptyMeta {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(192, 203, 216, 0.72);
}

.profilePage .profileEmptyAction {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--profile-accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.profilePage .profileTabPanel form .missionButton {
  width: auto;
}

.profilePage .profileEmptyLocked .profileEmptyIcon {
  color: rgba(255, 192, 132, 0.96);
  background: rgba(255, 192, 132, 0.09);
  border-color: rgba(255, 192, 132, 0.16);
}

.profilePage .profileActivityGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  gap: 2px;
}

.profilePage .profileActivityGrid--visual {
  width: calc(100% + 28px);
  margin-inline: -14px;
}

.normalEventCard.activityPrimeCard--activity {
  --normal-event-card-ratio: 1 / 1.57;
  --normal-event-card-radius: 18px;
  position: relative;
  display: block;
  width: 100%;
  min-height: 0;
  height: auto;
  aspect-ratio: var(--normal-event-card-ratio);
  border: 0;
  border-radius: var(--normal-event-card-radius);
  overflow: hidden;
  background: #070b12;
  color: inherit;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 12px 24px rgba(0, 0, 0, 0.14);
  contain: paint;
  transition: transform 160ms ease;
}

.normalEventCard.activityPrimeCard--activity .activityPrimeVisual {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

.normalEventCard.activityPrimeCard--activity .activityPrimeImage,
.normalEventCard.activityPrimeCard--activity .activityPrimeVisual video.activityPrimeImage,
.normalEventCard.activityPrimeCard--activity .activityPrimeFallback {
  width: 100%;
  height: 100%;
  min-height: 100%;
  display: block;
  object-fit: cover;
  background: rgba(11, 16, 24, 0.82);
}

.normalEventCard.activityPrimeCard--activity .activityPrimeVisualOverlay {
  z-index: 2;
  padding: 9px;
  background:
    linear-gradient(180deg, rgba(5, 8, 12, 0.22), rgba(5, 8, 12, 0.02) 42%, rgba(5, 8, 12, 0.34));
}

.normalEventCard.activityPrimeCard--activity .activityPrimeBody {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  gap: 1px;
  margin-top: 0;
  padding: 44px 10px 7px;
  background: linear-gradient(180deg, rgba(7, 11, 18, 0), rgba(7, 11, 18, 0.78) 42%, rgba(7, 11, 18, 0.98) 100%);
}

.normalEventCard.activityPrimeCard--activity .activityPrimeBody::before {
  display: none;
}

.normalEventCard.activityPrimeCard--activity .activityPrimeCardTitle {
  min-height: 0;
  font-size: 13.5px;
  font-weight: 560;
  line-height: 1.1;
  letter-spacing: 0;
  color: rgba(232, 240, 250, 0.86);
  overflow-wrap: anywhere;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.42);
}

.normalEventCard.activityPrimeCard--activity .activityPrimeCardMeta {
  min-height: 12px;
  font-size: 9.5px;
  line-height: 1.1;
  color: rgba(185, 198, 214, 0.7);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.38);
}

.normalEventCard.activityPrimeCard--activity .activityPrimeSignalRow,
.normalEventCard.activityPrimeCard--activity .activityPrimeCardStateRow {
  position: relative;
  z-index: 1;
  gap: 4px;
  margin-top: 0;
}

.normalEventCard.activityPrimeCard--activity .activityPrimeChipRow {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  gap: 3px;
  margin-top: 0;
  overflow: hidden;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.normalEventCard.activityPrimeCard--activity .activityPrimeBadge {
  min-height: 19px;
  max-width: 100%;
  padding: 0 7px;
  gap: 4px;
  font-size: 8px;
  letter-spacing: 0.06em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.normalEventCard.activityPrimeCard--activity .activityPrimeSignalPill,
.normalEventCard.activityPrimeCard--activity .activityStatusPill {
  min-height: 18px;
  padding: 0 6px;
  max-width: 100%;
  font-size: 8px;
  letter-spacing: 0.06em;
}

.normalEventCard.activityPrimeCard--activity .activityPrimeChipRow .activityPrimeSignalPill,
.normalEventCard.activityPrimeCard--activity .activityPrimeChipRow .activityStatusPill {
  flex: 0 1 auto;
  min-width: 0;
  min-height: 16px;
  max-width: 100%;
  padding: 0 5px;
  gap: 3px;
  overflow: hidden;
  font-size: 7.5px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.normalEventCard.activityPrimeCard--activity .activityPrimeChip--priority1 {
  flex-shrink: 0;
  max-width: 48%;
}

.normalEventCard.activityPrimeCard--activity .activityPrimeChip--priority2 {
  flex-shrink: 1;
  max-width: 36%;
}

.normalEventCard.activityPrimeCard--activity .activityPrimeChip--priority3 {
  flex-shrink: 2;
  max-width: 34%;
}

.normalEventCard.activityPrimeCard--activity .activityPrimeBadgeIcon svg,
.normalEventCard.activityPrimeCard--activity .activityPrimeMetaIcon svg {
  width: 10px;
  height: 10px;
}

.profilePage .profileActivityGrid--visual .normalEventCard {
  aspect-ratio: var(--normal-event-card-ratio);
  min-height: 0;
  border: 0;
  border-radius: var(--normal-event-card-radius);
  scroll-snap-align: none;
}

.profilePage .profileActivityGrid--visual .normalEventCard .activityPrimeBody {
  padding: 52px 8px 8px;
  pointer-events: none;
}

.profilePage .profileEditPanel {
  padding: 16px;
  border-radius: 24px;
  border: 1px solid var(--profile-line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.01)),
    rgba(8, 12, 19, 0.92);
}

.profilePage .activityStatusPill.is-friends {
  background: rgba(167, 139, 250, 0.16);
  color: rgba(221, 214, 254, 0.98);
  border-color: rgba(196, 181, 253, 0.2);
}

@media (hover: hover) and (pointer: fine) {
  .profilePage .profileQuickIconAction:not(:disabled):hover,
  .profilePage .profileStatLink.is-interactive:hover,
  .profilePage .profileTabButton:hover,
  .profilePage .profileActivityGrid--visual .normalEventCard:hover {
    transform: translateY(-1px);
  }

  .profilePage .profileQuickIconAction:not(:disabled):hover {
    border-color: var(--profile-line-strong);
    background: rgba(255, 255, 255, 0.032);
    text-decoration: none;
  }

  .profilePage .profileStatLink.is-interactive:hover,
  .profilePage .profileTabButton:hover {
    background: transparent;
    color: rgba(247, 251, 255, 0.96);
  }

  .profilePage .profileQuickActionBar--hero .profileQuickIconAction:not(:disabled):hover {
    border-color: rgba(122, 212, 255, 0.2);
    background: rgba(122, 212, 255, 0.07);
  }

  .profilePage .profileHeroStatsLine .profileStatLink.profileStatLink--inline.is-interactive:hover {
    transform: none;
    text-decoration: underline;
    text-underline-offset: 2px;
    color: rgba(247, 251, 255, 0.96);
  }
}

.profilePage .profileQuickIconAction:active,
.profilePage .profileStatLink.is-interactive:active,
.profilePage .profileTabButton:active,
.profilePage .profileActivityGrid--visual .normalEventCard:active {
  transform: scale(0.99);
}

.profilePage .profileHeroStatsLine .profileStatLink.profileStatLink--inline.is-interactive:active {
  transform: none;
}

@media (max-width: 640px) {
  .profilePage .profilePageContent {
    gap: 12px;
  }

  .profilePage .profileSectionBlock {
    padding: 0;
  }

  .profilePage .profileHeroTop {
    --profile-hero-avatar-size: 104px;
    --profile-hero-avatar-bleed: 0px;
    --profile-hero-avatar-gap: 10px;
  }

  .profilePage .profileHeroImageSquare {
    border-radius: 24px;
  }

  .profilePage .profileQuickActionBar {
    gap: 8px;
  }

  .profilePage .profileEmptyState {
    align-items: center;
  }
}

@media (max-width: 380px) {
  .profilePage .profileHeroTop {
    --profile-hero-avatar-size: 90px;
    --profile-hero-avatar-gap: 8px;
  }

  .profilePage .profileHeroTitle {
    font-size: 24px;
  }

  .profilePage .profileHeroStatsLine {
    font-size: 10px;
  }

  .profileOwnerPage .profileHeroStatsLine {
    font-size: 11px;
  }

  .profilePage .profileHeroStatsLine .profileStatLink.profileStatLink--inline:not(:last-child)::after,
  .profilePage .profileHeroStatsLine .profileHeroStatMuted:not(:last-child)::after {
    margin: 0 3px;
  }

  .profilePage .profileQuickActionBar {
    gap: 6px;
  }

  .profilePage .profileQuickIconAction {
    min-height: 48px;
    padding: 0 10px;
    font-size: 12px;
  }

  .profilePage .profileQuickActionBar--hero .profileQuickIconAction {
    min-height: 34px;
    padding: 0 10px;
    gap: 5px;
  }

  .profilePage .profileQuickActionBar--hero .profileQuickIconAction .profileQuickIcon svg {
    width: 14px;
    height: 14px;
  }

  .profilePage .profileQuickActionBar--hero .profileQuickLabel {
    font-size: 11px;
  }

  .profilePage .profileQuickIcon {
    width: 28px;
    height: 28px;
  }

  .profilePage .profileTabBar {
    gap: 12px;
  }
}

/* Profile edit and composer flows */
.profileFlowPage .profileFlowHeader {
  align-items: center;
  width: min(100%, 680px);
  margin: 0 auto;
  box-sizing: border-box;
}

.profileFlowPage .profileFlowHeaderLeft {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.profileFlowPage .profilePageContent {
  width: min(100%, 680px);
  margin: 0 auto;
  min-width: 0;
  box-sizing: border-box;
  padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
}

.profileFlowPage .profileFlowBackLink {
  min-height: 32px;
  padding: 0;
  border-radius: 0;
  border: 0;
  background: transparent;
  color: var(--profile-accent);
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.profileFlowPage .profileFlowSurface {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 100%;
  padding: 0;
  border-radius: 0;
  border: 0;
  background: transparent;
  box-sizing: border-box;
  overflow: visible;
  box-shadow: none;
}

.profileFlowPage .profileFlowIntro {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  max-width: 34rem;
}

.profileFlowPage .profileFlowEyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(168, 179, 193, 0.7);
}

.profileFlowPage .profileFlowTitle {
  font-size: clamp(28px, 6vw, 34px);
  line-height: 1.02;
  letter-spacing: -0.05em;
  font-weight: 820;
  color: rgba(247, 251, 255, 0.98);
}

.profileFlowPage .profileFlowCopy {
  max-width: 460px;
  font-size: 14px;
  line-height: 1.65;
  color: rgba(201, 211, 224, 0.76);
}

.profileFlowPage .profileFlowForm {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.profileFlowPage .profileFlowSection {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.profileFlowPage .profileFlowSectionIdentity {
  padding-top: 0;
  border-top: 0;
}

.profileFlowPage .profileFlowForm .profileFlowSection:first-child {
  padding-top: 0;
  border-top: 0;
}

.profileFlowPage .profileFlowFileInput {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.profileFlowPage .profileUploadField {
  position: relative;
}

.profileFlowPage .profileUploadCard {
  width: 100%;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.018);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  box-sizing: border-box;
  min-width: 0;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.profileFlowPage .profileUploadPreview {
  flex: none;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at top, rgba(122, 212, 255, 0.16), transparent 56%),
    rgba(255, 255, 255, 0.024);
  display: grid;
  place-items: center;
}

.profileFlowPage .profileUploadPreview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.profileFlowPage .profileUploadPreviewAvatar {
  width: 96px;
  aspect-ratio: 1;
}

.profileFlowPage .profileUploadPreviewMedia {
  width: 100%;
  aspect-ratio: 1 / 1.08;
}

.profileFlowPage .profileUploadCardAvatar .profileUploadContent {
  min-width: 0;
  flex: 1;
}

.profileFlowPage .profileUploadCardMedia {
  flex-direction: column;
  align-items: stretch;
}

.profileFlowPage .profileUploadCardMedia .profileUploadContent {
  width: 100%;
}

.profileFlowPage .profileUploadFallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: rgba(247, 251, 255, 0.96);
}

.profileFlowPage .profileUploadFallbackMedia {
  color: rgba(122, 212, 255, 0.96);
}

.profileFlowPage .profileUploadFallbackMedia svg {
  width: 34px;
  height: 34px;
}

.profileFlowPage .profileUploadContent {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.profileFlowPage .profileUploadTitle {
  font-size: 16px;
  font-weight: 720;
  color: rgba(247, 251, 255, 0.98);
}

.profileFlowPage .profileUploadMeta {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(193, 204, 217, 0.72);
  overflow-wrap: anywhere;
}

.profileFlowPage .profileUploadAction {
  margin-top: 2px;
  min-height: 34px;
  align-self: flex-start;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(111, 230, 200, 0.18);
  background: rgba(111, 230, 200, 0.08);
  display: inline-flex;
  align-items: center;
  color: rgba(244, 249, 255, 0.96);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.profileFlowPage .profileFormFieldGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.profileFlowPage .profileFlowField {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.profileFlowPage .profileFlowFieldWide {
  grid-column: 1 / -1;
}

.profileFlowPage .profileFlowLabel {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(181, 192, 206, 0.74);
}

.profileFlowPage .profileFlowField input,
.profileFlowPage .profileFlowField select,
.profileFlowPage .profileFlowField textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 52px;
  padding: 15px 15px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(5, 9, 15, 0.9);
  color: rgba(247, 251, 255, 0.96);
  font: inherit;
  font-size: 14px;
  box-shadow: none;
}

.profileFlowPage .profileFlowField textarea {
  min-height: 132px;
  resize: vertical;
}

.profileFlowPage .profileFlowField input[readonly] {
  color: rgba(220, 230, 241, 0.82);
}

.profileFlowPage .profileFlowHint {
  font-size: 12px;
  line-height: 1.45;
  color: rgba(170, 182, 196, 0.66);
}

.profileFlowPage .profileFlowFormFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.profileFlowPage .profileFlowFooterMeta {
  font-size: 13px;
  color: rgba(188, 198, 211, 0.72);
  min-width: 0;
  overflow-wrap: anywhere;
}

.profileFlowPage .profileFlowSubmit {
  min-width: 170px;
  min-height: 50px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(111, 230, 200, 0.22);
  background: rgba(111, 230, 200, 0.14);
  color: rgba(247, 251, 255, 0.98);
  font: inherit;
  font-size: 14px;
  font-weight: 780;
  letter-spacing: 0.01em;
}

.profileFlowPage .profileFlowSubmitStrong {
  min-width: 184px;
}

.profileFlowPage .profileComposerSurface {
  gap: 24px;
}

.profileFlowPage .profileComposerIdentity {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  border-radius: 0;
  border: 0;
  background: transparent;
  min-width: 0;
}

.profileFlowPage .profileComposerAvatar {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at top, rgba(122, 212, 255, 0.18), transparent 54%),
    rgba(255, 255, 255, 0.03);
  display: grid;
  place-items: center;
}

.profileFlowPage .profileComposerAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.profileFlowPage .profileComposerAvatar > span {
  font-size: 18px;
  font-weight: 800;
  color: rgba(247, 251, 255, 0.96);
}

.profileFlowPage .profileComposerIdentityMain {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.profileFlowPage .profileComposerIdentityMain strong {
  font-size: 16px;
  font-weight: 720;
  color: rgba(247, 251, 255, 0.98);
}

.profileFlowPage .profileComposerIdentityMain span {
  font-size: 13px;
  color: rgba(190, 200, 214, 0.72);
  overflow-wrap: anywhere;
}

@media (hover: hover) and (pointer: fine) {
  .profileFlowPage .profileFlowBackLink:hover {
    text-decoration: none;
    color: rgba(247, 251, 255, 0.98);
  }

  .profileFlowPage .profileUploadCard:hover {
    text-decoration: none;
    border-color: rgba(122, 212, 255, 0.2);
    transform: translateY(-1px);
  }
}

.profileFlowPage .profileUploadCard:active,
.profileFlowPage .profileFlowSubmit:active {
  transform: scale(0.99);
}

@media (max-width: 640px) {
  .profileFlowPage .profileFlowSurface {
    gap: 20px;
  }

  .profileFlowPage .profileUploadCard {
    padding: 12px;
  }

  .profileFlowPage .profileUploadPreviewAvatar {
    width: 78px;
  }

  .profileFlowPage .profileFormFieldGrid {
    grid-template-columns: 1fr;
  }

  .profileFlowPage .profileFlowFormFooter {
    flex-direction: column;
    align-items: stretch;
  }

  .profileFlowPage .profileFlowSubmit,
  .profileFlowPage .profileFlowSubmitStrong {
    width: 100%;
    min-width: 0;
  }
}

/* Activities browse refresh */
.activityBrowsePage .activityContent {
  gap: 18px;
  padding-bottom: calc(var(--nav-height) + 24px);
}

.activityBrowseHeader .left {
  min-width: 0;
}

body.appFrame.activityBrowsePage .activityBrowseHeader--tabsLead.pageHeader {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  gap: 8px;
  padding-top: calc(6px + env(safe-area-inset-top));
  padding-bottom: 4px;
  align-items: flex-end;
}

.activityBrowseHeader--tabsLead .left.activityBrowseHeaderTabs {
  grid-column: 2;
  grid-row: 1;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  justify-self: stretch;
  min-width: 0;
}

.activityBrowseHeader--tabsLead .activityAudienceTabsStretch--header {
  display: flex;
  justify-content: center;
  min-width: 0;
}

.activityBrowseHeader--tabsLead .msgTopTabs {
  justify-content: center;
  gap: clamp(16px, calc(5vw + 2px), 22px);
  padding: 0;
  margin-bottom: 0;
  border-bottom: none;
}

.activityBrowseHeader--tabsLead .msgTopTab {
  padding-bottom: 8px;
}

.activityBrowseHeader--tabsLead .headerActions {
  display: contents;
}

.activityBrowseHeader--tabsLead .headerIconRow {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  align-self: flex-end;
}

.activityBrowseHeader--tabsLead .headerMoreLauncher {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  align-self: flex-end;
}

.activityBrowseHeader--tabsLead .headerActionBtn,
.activityBrowseHeader--tabsLead .headerMenuBtn {
  color: rgba(220, 229, 241, 0.82);
  background: transparent;
  border-color: transparent;
}

.activityBrowseHeader--tabsLead .headerActionBtn:hover,
.activityBrowseHeader--tabsLead .headerActionBtn:focus-visible,
.activityBrowseHeader--tabsLead .headerMenuBtn:hover,
.activityBrowseHeader--tabsLead .headerMenuBtn:focus-visible {
  color: rgba(248, 250, 255, 0.96);
  background: transparent;
  border-color: transparent;
}

.activityBrowseHeader--tabsLead .headerActionBtn:focus-visible,
.activityBrowseHeader--tabsLead .headerMenuBtn:focus-visible {
  outline: 2px solid rgba(122, 212, 255, 0.44);
  outline-offset: 2px;
}

.activityBrowseHeader--tabsLead .headerActionIcon,
.activityBrowseHeader--tabsLead .headerMoreLauncherGlyph {
  width: 20px;
  height: 20px;
}

.activityBrowseHeader--tabsLead .headerActionIcon svg,
.activityBrowseHeader--tabsLead .headerMoreLauncherGlyph svg {
  display: none;
}

.activityBrowseHeader--tabsLead .headerActionIcon::before,
.activityBrowseHeader--tabsLead .headerMoreLauncherGlyph::before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  background: currentColor;
}

.activityBrowseHeader--tabsLead .headerActionIcon::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.268 21a2 2 0 0 0 3.464 0'/%3E%3Cpath d='M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.411 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.268 21a2 2 0 0 0 3.464 0'/%3E%3Cpath d='M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.411 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326'/%3E%3C/svg%3E") center / contain no-repeat;
}

.activityBrowseHeader--tabsLead .headerMoreLauncherGlyph::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round'%3E%3Cpath d='M5 7h14'/%3E%3Cpath d='M8 12h11'/%3E%3Cpath d='M5 17h14'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round'%3E%3Cpath d='M5 7h14'/%3E%3Cpath d='M8 12h11'/%3E%3Cpath d='M5 17h14'/%3E%3C/svg%3E") center / contain no-repeat;
}

.activityBrowseHeader--tabsLead .moderatorModeBanner {
  grid-column: 1 / -1;
  grid-row: 2;
}

.activityBrowseHeader .pageMeta {
  font-size: 11px;
  color: rgba(190, 200, 214, 0.66);
}

.activityBrowseHero {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, rgba(122, 212, 255, 0.14), transparent 38%),
    linear-gradient(180deg, rgba(18, 24, 34, 0.98), rgba(11, 16, 24, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 18px 36px rgba(0, 0, 0, 0.2);
}

.activityBrowseHeroCopy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.activityBrowseEyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(181, 192, 206, 0.62);
}

.activityBrowseTitle {
  margin: 0;
  font-size: 28px;
  line-height: 0.98;
  letter-spacing: -0.05em;
  color: rgba(247, 251, 255, 0.98);
}

.activityBrowseSummary {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(197, 207, 221, 0.76);
}

.activityBrowseFilterStrip {
  align-items: center;
  gap: 8px;
}

.activityBrowsePage .activitySegment {
  flex: 1 1 auto;
  min-width: 0;
  padding: 4px;
  border: none;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.016)),
    rgba(13, 18, 27, 0.88);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  backdrop-filter: none;
}

.activityBrowsePage .activitySegment .activityFilterBtn {
  min-height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  color: rgba(194, 204, 218, 0.76);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
}

.activityBrowsePage .activitySegment .activityFilterBtn.is-active {
  background:
    linear-gradient(180deg, rgba(122, 212, 255, 0.18), rgba(122, 212, 255, 0.08)),
    rgba(255, 255, 255, 0.04);
  color: rgba(247, 251, 255, 0.98);
}

.activityBrowsePage .activitySheetToggle {
  min-height: 42px;
  padding: 0 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.045);
  color: rgba(247, 251, 255, 0.94);
}

.activityBrowsePage .activityFilterValue {
  color: rgba(190, 200, 214, 0.66);
  font-size: 12px;
  letter-spacing: 0;
}

.activityResetLink {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  color: rgba(201, 210, 223, 0.72);
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
}

.activityResetLink:hover,
.activityResetLink:focus-visible {
  color: rgba(247, 251, 255, 0.96);
  text-decoration: none;
  outline: none;
}

.activityFilterSheetCard .sheetBody,
.activityBrowseSheetBody {
  gap: 14px;
}

.activitySheetGroup {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.activitySheetGroupTitle {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(181, 192, 206, 0.62);
}

.activityBrowseRows,
.activityBrowseGridSection {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.activityBrowseRailSection {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.activityBrowseRailHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.activityBrowseRailCopy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.activityBrowseRailTitle {
  margin: 0;
  font-size: 18px;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: rgba(247, 251, 255, 0.98);
}

.activityBrowseRailMeta {
  font-size: 12px;
  line-height: 1.45;
  color: rgba(190, 200, 214, 0.72);
}

.activityBrowseRail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 74%);
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding: 2px 2px 4px;
}

.activityBrowseRail::-webkit-scrollbar {
  display: none;
}

.activityBrowseCard {
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background:
    linear-gradient(180deg, rgba(18, 24, 34, 0.98), rgba(11, 16, 24, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 18px 34px rgba(0, 0, 0, 0.2);
  scroll-snap-align: start;
}

.activityBrowseCard:hover,
.activityBrowseCard:focus-visible {
  text-decoration: none;
  border-color: rgba(122, 212, 255, 0.2);
  outline: none;
}

.activityBrowseCardVisual {
  position: relative;
  aspect-ratio: 1.46 / 1;
  background: #0f141d;
  overflow: hidden;
}

.activityBrowseCardGrid .activityBrowseCardVisual {
  aspect-ratio: 0.92 / 1;
}

.activityBrowseCardImage {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.activityBrowseCardFallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px;
  background:
    radial-gradient(circle at top right, rgba(122, 212, 255, 0.22), transparent 40%),
    linear-gradient(180deg, rgba(24, 32, 45, 0.98), rgba(11, 16, 24, 0.98));
}

.activityBrowseCardFallbackGlow {
  position: absolute;
  top: 12%;
  right: -10%;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: rgba(122, 212, 255, 0.18);
  filter: blur(24px);
}

.activityBrowseCardFallbackIcon,
.activityBrowseEmptyIcon {
  position: relative;
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(247, 251, 255, 0.94);
}

.activityBrowseCardFallbackIcon svg,
.activityBrowseEmptyIcon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.activityBrowseCardFallbackLabel {
  position: relative;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(228, 236, 245, 0.82);
}

.activityBrowseCard.is-music .activityBrowseCardFallback {
  background:
    radial-gradient(circle at top right, rgba(163, 115, 255, 0.2), transparent 40%),
    linear-gradient(180deg, rgba(30, 22, 49, 0.98), rgba(14, 12, 26, 0.98));
}

.activityBrowseCard.is-sport .activityBrowseCardFallback {
  background:
    radial-gradient(circle at top right, rgba(255, 166, 87, 0.22), transparent 40%),
    linear-gradient(180deg, rgba(43, 29, 18, 0.98), rgba(19, 14, 10, 0.98));
}

.activityBrowseCard.is-food .activityBrowseCardFallback {
  background:
    radial-gradient(circle at top right, rgba(86, 210, 147, 0.22), transparent 40%),
    linear-gradient(180deg, rgba(18, 40, 27, 0.98), rgba(10, 19, 14, 0.98));
}

.activityBrowseCard.is-meetup .activityBrowseCardFallback {
  background:
    radial-gradient(circle at top right, rgba(104, 182, 255, 0.22), transparent 40%),
    linear-gradient(180deg, rgba(18, 30, 47, 0.98), rgba(10, 16, 27, 0.98));
}

.activityBrowseCard.is-place .activityBrowseCardFallback,
.activityBrowseCard.is-mission .activityBrowseCardFallback {
  background:
    radial-gradient(circle at top right, rgba(122, 212, 255, 0.22), transparent 40%),
    linear-gradient(180deg, rgba(18, 35, 48, 0.98), rgba(10, 18, 27, 0.98));
}

.activityBrowseCardOverlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 12px;
  background:
    linear-gradient(180deg, rgba(5, 8, 12, 0.34), rgba(5, 8, 12, 0.04) 36%, rgba(5, 8, 12, 0) 56%, rgba(5, 8, 12, 0.74));
}

.activityBrowseCardBadgeRow {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.activityBrowseCardBadge {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(8, 12, 18, 0.56);
  backdrop-filter: blur(12px);
  color: rgba(247, 251, 255, 0.96);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.activityBrowseCardBadge.is-ghost {
  color: rgba(225, 234, 244, 0.84);
  background: rgba(8, 12, 18, 0.42);
}

.activityBrowseCardBadge.is-music {
  border-color: rgba(163, 115, 255, 0.24);
}

.activityBrowseCardBadge.is-sport {
  border-color: rgba(255, 166, 87, 0.24);
}

.activityBrowseCardBadge.is-food {
  border-color: rgba(86, 210, 147, 0.24);
}

.activityBrowseCardBadge.is-meetup {
  border-color: rgba(104, 182, 255, 0.24);
}

.activityBrowseCardBadge.is-place {
  border-color: rgba(122, 212, 255, 0.24);
}

.activityBrowseCardBody {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 12px 14px;
}

.activityBrowseCardTitle {
  min-width: 0;
  font-size: 16px;
  font-weight: 760;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: rgba(247, 251, 255, 0.98);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.activityBrowseCardMeta,
.activityBrowseCardSubmeta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activityBrowseCardMeta {
  font-size: 13px;
  font-weight: 700;
  color: rgba(230, 238, 247, 0.88);
}

.activityBrowseCardSubmeta {
  font-size: 12px;
  color: rgba(190, 200, 214, 0.72);
}

.activityBrowseGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.activityBrowseEmpty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 20px 18px;
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(122, 212, 255, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.012)),
    rgba(11, 16, 24, 0.92);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.18);
}

.activityBrowseEmptyTitle {
  font-size: 20px;
  font-weight: 760;
  color: rgba(247, 251, 255, 0.98);
}

.activityBrowseEmptyMeta {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(190, 200, 214, 0.72);
}

.activityBrowseEmptyActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.activityBrowseEmptyBtn {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(122, 212, 255, 0.18), rgba(122, 212, 255, 0.08)),
    rgba(255, 255, 255, 0.04);
  color: rgba(247, 251, 255, 0.98);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
}

.activityBrowseEmptyBtn.is-secondary {
  background: rgba(255, 255, 255, 0.06);
}

.activityBrowseEmptyBtn:hover,
.activityBrowseEmptyBtn:focus-visible {
  text-decoration: none;
  outline: none;
}

@media (max-width: 640px) {
  .activityBrowseHero {
    padding: 16px 14px;
  }

  .activityBrowseTitle {
    font-size: 25px;
  }

  .activityBrowseRail {
    grid-auto-columns: minmax(0, 78%);
  }
}

@media (max-width: 520px) {
  .activityBrowseFilterStrip {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .activityBrowsePage .activitySegment {
    width: 100%;
    flex-basis: 100%;
  }

  .activityBrowsePage .activitySheetToggle {
    flex: 1 1 auto;
    justify-content: space-between;
  }

  .activityBrowseRail {
    grid-auto-columns: minmax(0, 82%);
  }

  .activityBrowseGrid {
    gap: 10px;
  }

  .activityBrowseCardBody {
    padding: 11px 11px 13px;
  }
}

/* Activities browse premium feed */
.activityBrowsePage {
  background:
    radial-gradient(circle at top center, rgba(30, 75, 132, 0.18), transparent 30%),
    linear-gradient(180deg, #060b13 0%, #07101b 40%, #050911 100%);
}

.activityBrowsePage .appContent {
  background: transparent;
}

.activityBrowsePage .app-shell,
.activityBrowsePage .appShell {
  overflow: visible;
}

/* Activities: icon-only filter (no boxed chrome). */
.activityBrowsePage .activityPrimeFilterToggle {
  width: auto;
  min-width: 40px;
  height: 40px;
  padding: 0 2px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: rgba(214, 222, 234, 0.82);
}

.activityBrowsePage .activityPrimeFilterToggle:hover,
.activityBrowsePage .activityPrimeFilterToggle:focus-visible {
  color: rgba(247, 251, 255, 0.96);
  background: rgba(255, 255, 255, 0.06);
}

.activityBrowsePage .activityPrimeFilterToggle svg {
  width: 20px;
  height: 20px;
}

.activityBrowsePage .activityPrimeFilterToggle.is-active {
  color: rgba(122, 212, 255, 0.95);
}

.activityBrowsePage .activityPrimeFilterToggle.is-active::after {
  top: 7px;
  right: 2px;
  width: 5px;
  height: 5px;
  box-shadow: 0 0 0 2px rgba(112, 200, 255, 0.12);
}

.activityBrowsePage .activityContent.activityPrimeContent {
  gap: 14px;
  padding: 8px 14px calc(var(--nav-height) + 18px);
}

.activityAudienceRow {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  min-height: 38px;
}

.activityAudienceTabsStretch {
  flex: 1;
  min-width: 0;
}

.activityAudienceRow .msgTopTabs {
  gap: 20px;
  padding: 2px 0 0;
  margin-bottom: 0;
  border-bottom: none;
}

.activityAudienceRow .msgTopTab {
  padding-bottom: 8px;
}

.activityFilterPopoverRoot {
  position: relative;
  flex-shrink: 0;
}

.activityFilterPopover {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: min(272px, calc(100vw - 28px));
  max-height: min(70vh, 420px);
  overflow-y: auto;
  padding: 10px 11px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(10, 14, 20, 0.97);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(16px);
  -webkit-overflow-scrolling: touch;
  z-index: 40;
}

.activityFilterPopover:not([hidden]) {
  animation: activityFilterPopoverIn 140ms ease-out;
}

@keyframes activityFilterPopoverIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.activityFilterPopoverBody {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.activityFilterPopoverGroupTitle {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(160, 174, 192, 0.72);
  margin-bottom: 2px;
}

.activityPrimeFilterLinks--popover {
  gap: 6px;
}

.activityPrimeFilterLinks--popover .activityPrimeFilterLink {
  min-height: 34px;
  padding: 0 11px;
  font-size: 11px;
}

.activityPrimeFilterToggle {
  position: relative;
  width: 40px;
  min-width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.045);
  color: rgba(247, 251, 255, 0.94);
}

.activityPrimeFilterToggle svg {
  width: 18px;
  height: 18px;
  display: block;
}

.activityPrimeFilterToggle.is-active::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #70c8ff;
  box-shadow: 0 0 0 3px rgba(112, 200, 255, 0.18);
}

.activityPrimeFilterSheet {
  border-radius: 24px;
}

.activityPrimeFilterLinks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.activityPrimeFilterLink {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-radius: 999px;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(228, 236, 245, 0.86);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.activityPrimeFilterLink.is-active,
.activityPrimeFilterLink:hover,
.activityPrimeFilterLink:focus-visible {
  color: rgba(247, 251, 255, 0.98);
  border-color: rgba(87, 170, 255, 0.22);
  background: rgba(87, 170, 255, 0.12);
  text-decoration: none;
  outline: none;
}

.activityPrimeFeed {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.activityPrimeSection {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.activityPrimeSectionTitle {
  margin: 0;
  font-size: 21px;
  font-weight: 330;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: rgba(222, 230, 240, 0.78);
}

.activityDeferredSecondary {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.activityDeferredSecondary--loading {
  display: grid;
  gap: 12px;
  overflow: hidden;
}

.activityDeferredRailPlaceholder {
  min-width: 0;
}

.activityDeferredTitleSkeleton.activityRailSkeleton {
  width: 132px;
  min-height: 18px;
  border-radius: 999px;
}

.activityDeferredTitleSkeleton.neoSkeleton {
  width: 132px;
}

.activityDeferredPlaceholderTrack {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(178px, 52.8vw);
  gap: 10px;
  overflow: hidden;
}

.activityDeferredPlaceholderTrack .activityRailSkeleton {
  min-height: 158px;
}

.activityDiscoveryHero {
  width: 100%;
  margin: 0 0 14px;
  overflow: hidden;
}

.activityDiscoveryHeroTrack {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(86vw, 420px);
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 0 16px 4px;
}

.activityDiscoveryHeroTrack::-webkit-scrollbar {
  display: none;
}

.activityDiscoveryHeroSlide {
  position: relative;
  min-height: 300px;
  aspect-ratio: 0.78 / 1;
  overflow: hidden;
  border-radius: 28px;
  background: #070b12;
  color: inherit;
  text-decoration: none;
  scroll-snap-align: start;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 22px 48px rgba(0, 0, 0, 0.32);
}

.activityDiscoveryHeroSlide:hover,
.activityDiscoveryHeroSlide:focus-visible {
  text-decoration: none;
  outline: none;
}

.activityDiscoveryHeroImage {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: #070b12;
}

.activityDiscoveryHeroShade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(3, 7, 13, 0.08), rgba(3, 7, 13, 0.14) 42%, rgba(3, 7, 13, 0.9) 100%),
    linear-gradient(90deg, rgba(3, 7, 13, 0.26), transparent 48%);
  pointer-events: none;
}

.activityDiscoveryHeroCopy {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.activityDiscoveryHeroBadge {
  align-self: flex-start;
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(117, 219, 255, 0.28);
  background: rgba(6, 14, 23, 0.48);
  color: rgba(222, 247, 255, 0.96);
  font-size: 10px;
  font-weight: 720;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  backdrop-filter: blur(14px);
}

.activityDiscoveryHeroTitle {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 29px;
  font-weight: 520;
  line-height: 0.98;
  color: rgba(248, 252, 255, 0.98);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
}

.activityDiscoveryHeroMeta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  color: rgba(226, 235, 245, 0.82);
}

.activityDiscoverySectionFeed {
  gap: 18px;
}

.activityDiscoveryPostPager {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding: 0 1px 2px;
}

.activityDiscoveryPostPager::-webkit-scrollbar {
  display: none;
}

.activityDiscoveryPostDenseGrid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(1, minmax(0, auto));
  grid-auto-columns: min(154px, 45vw);
  gap: 10px;
  width: max-content;
}

.activityDiscoveryPostDenseGrid .profilePostGridItem {
  width: 100%;
  scroll-snap-align: start;
}

/* Activities browse: one section rhythm with shared spacing across mixed card rails. */
.activityBrowsePage .activityPrimeFeed {
  gap: 0;
}

.activityBrowsePage .activityPrimeSection {
  gap: 0;
}

.activityBrowsePage .activityPrimeSection.activityPrimeSection--post,
.activityBrowsePage .activityPrimeSection.activityPrimeSection--people {
  gap: 0;
}

.activityBrowsePage .activityPrimeSectionTitle {
  margin: 12px 0 7px;
  font-size: 15.5px;
  font-weight: 760;
  letter-spacing: 0;
  line-height: 1.18;
  color: rgba(244, 248, 255, 0.9);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.38);
}

/* Event/place rails use the same bottom weight as post card rails. */
.activityBrowsePage .activityPrimeSection > .activityPrimeTrack.is-rail:not(.activityPrimeTrack--postsRail):not(.activityPrimeTrack--peopleRail) {
  padding: 2px 1px 4px;
}

.activityBrowsePage .activityPrimeTrack.is-rail.activityPrimeTrack--postsRail {
  display: flex;
  flex-direction: row;
  padding: 2px 1px 4px;
  gap: 10px;
  scroll-snap-type: x proximity;
}

.activityBrowsePage .activityPrimeTrack.is-rail.activityPrimeTrack--peopleRail {
  display: flex;
  flex-direction: row;
  padding: 0 1px 0;
  gap: 5px;
  scroll-snap-type: x proximity;
}

/* Shorter rails need a small optical pull so they do not read as farther away than Events. */
.activityBrowsePage .activityPrimeFeed > .activityPrimeSection.activityPrimeSection--post:not(:last-child) {
  margin-bottom: -4px;
}

.activityBrowsePage .activityPrimeFeed > .activityPrimeSection.activityPrimeSection--people:not(:last-child) {
  margin-bottom: -5px;
}

.activityBrowsePage .activityPrimeFeed > .activityPrimeSection.activityPrimeSection--beforePeople {
  margin-bottom: -7px;
}

.activityBrowsePage .activityPrimeFeed > .activityPrimeSection.activityPrimeSection--afterPosts {
  margin-top: -2px;
  padding-top: 0;
}

.activityPrimeTrack {
  min-width: 0;
}

.activityPrimeTrack.is-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(178px, 52.8vw);
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding: 2px 1px 5px;
}

.activityPrimeTrack.is-rail::-webkit-scrollbar {
  display: none;
}

.activityPrimeSection.is-single .activityPrimeTrack.is-rail {
  grid-auto-columns: min(178px, 52.8vw);
}

.activityPrimeCard {
  min-width: 0;
  color: inherit;
  text-decoration: none;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(11, 17, 27, 0.94);
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 14px 28px rgba(0, 0, 0, 0.22);
  scroll-snap-align: start;
}

.activityPrimeCard:hover,
.activityPrimeCard:focus-visible {
  text-decoration: none;
  border-color: rgba(87, 170, 255, 0.24);
  transform: translateY(-1px);
  outline: none;
}

.activityPrimeCard.has-image.is-rail-card,
.activityPrimeCard.has-fallback.is-rail-card {
  display: flex;
  flex-direction: column;
}

.activityPrimeVisual {
  position: relative;
  overflow: hidden;
  background: #0b1119;
  /* Wider frame than 1.08 — shorter cover height (~22–25% less than legacy) while staying premium */
  aspect-ratio: 1.34 / 1;
}

.activityPrimeCard.has-image.is-rail-card .activityPrimeVisual {
  aspect-ratio: 1.34 / 1;
}

.activityPrimeImage,
.activityPrimeVisual video.activityPrimeImage {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.activityPrimeVisual video.activityPrimeImage {
  background: #0b1119;
  pointer-events: none;
}

.activityPrimeVisualOverlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 12px;
  background:
    linear-gradient(180deg, rgba(5, 8, 12, 0.18), rgba(5, 8, 12, 0.04) 42%, rgba(5, 8, 12, 0.64));
}

.activityPrimeFallback {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px;
  background:
    radial-gradient(circle at top right, rgba(122, 212, 255, 0.2), transparent 34%),
    linear-gradient(180deg, rgba(18, 29, 46, 0.98), rgba(7, 11, 20, 0.98));
}

.activityPrimeFallback.is-meetup {
  background:
    radial-gradient(circle at top right, rgba(104, 182, 255, 0.24), transparent 34%),
    linear-gradient(180deg, rgba(15, 34, 57, 0.98), rgba(7, 11, 20, 0.98));
}

.activityPrimeFallback.is-music {
  background:
    radial-gradient(circle at top right, rgba(163, 115, 255, 0.24), transparent 34%),
    linear-gradient(180deg, rgba(28, 20, 49, 0.98), rgba(9, 10, 22, 0.98));
}

.activityPrimeFallback.is-sport {
  background:
    radial-gradient(circle at top right, rgba(255, 166, 87, 0.24), transparent 34%),
    linear-gradient(180deg, rgba(43, 29, 18, 0.98), rgba(16, 11, 10, 0.98));
}

.activityPrimeFallback.is-food {
  background:
    radial-gradient(circle at top right, rgba(86, 210, 147, 0.24), transparent 34%),
    linear-gradient(180deg, rgba(15, 36, 25, 0.98), rgba(9, 14, 12, 0.98));
}

.activityPrimeFallback.is-place {
  background:
    radial-gradient(circle at top right, rgba(122, 212, 255, 0.24), transparent 34%),
    linear-gradient(180deg, rgba(14, 30, 45, 0.98), rgba(8, 12, 21, 0.98));
}

.activityPrimeFallbackGlow {
  position: absolute;
  top: 10%;
  right: -8%;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: rgba(122, 212, 255, 0.18);
  filter: blur(24px);
}

.activityPrimeFallbackBody {
  position: relative;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.activityPrimeFallbackIconWrap {
  width: 48px;
  height: 48px;
  display: inline-grid;
  place-items: center;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.activityPrimeFallbackIcon {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  color: rgba(247, 251, 255, 0.92);
}

.activityPrimeFallbackIcon svg {
  width: 22px;
  height: 22px;
  display: block;
}

.activityPrimeFallbackLabel {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(225, 234, 244, 0.72);
}

.activityPrimeBody {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px 14px;
}

.activityPrimeBadge {
  align-self: flex-start;
  min-height: 20px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(247, 251, 255, 0.92);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.activityPrimeBadgeIcon,
.activityPrimeMetaIcon {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
}

.activityPrimeBadgeIcon svg,
.activityPrimeMetaIcon svg {
  width: 12px;
  height: 12px;
  display: block;
}

.activityPrimeBadge.is-meetup {
  border-color: rgba(104, 182, 255, 0.24);
  background: rgba(104, 182, 255, 0.12);
}

.activityPrimeBadge.is-place {
  border-color: rgba(122, 212, 255, 0.2);
  background: rgba(122, 212, 255, 0.1);
}

.activityPrimeBadge.is-music {
  border-color: rgba(163, 115, 255, 0.24);
  background: rgba(163, 115, 255, 0.12);
}

.activityPrimeBadge.is-sport {
  border-color: rgba(255, 166, 87, 0.24);
  background: rgba(255, 166, 87, 0.12);
}

.activityPrimeBadge.is-food {
  border-color: rgba(86, 210, 147, 0.24);
  background: rgba(86, 210, 147, 0.12);
}

.activityPrimeCardTitle {
  min-width: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 16px;
  font-weight: 610;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: rgba(247, 251, 255, 0.98);
}

.activityPrimeCardMeta {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: rgba(191, 201, 214, 0.76);
}

.activityPrimeCardMeta span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activityPrimeCardStateRow {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 10px;
}

.activityBrowsePage .activityPrimeTrack.is-rail:not(.activityPrimeTrack--postsRail):not(.activityPrimeTrack--peopleRail) {
  grid-auto-columns: min(154px, 45vw);
  gap: 10px;
  padding: 2px 1px 3px;
}

.activityBrowsePage .activityPrimeSection.is-single .activityPrimeTrack.is-rail:not(.activityPrimeTrack--postsRail):not(.activityPrimeTrack--peopleRail) {
  grid-auto-columns: min(154px, 45vw);
}

.activityBrowsePage .activityPrimeCard--activity {
  border-radius: 18px;
  background: rgba(8, 12, 20, 0.96);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 12px 24px rgba(0, 0, 0, 0.18);
}

.activityBrowsePage .activityPrimeCard--activity .activityPrimeVisual,
.activityBrowsePage .activityPrimeCard--activity.has-image.is-rail-card .activityPrimeVisual {
  aspect-ratio: 1 / 1;
}

.activityBrowsePage .activityPrimeCard--activity .activityPrimeVisualOverlay {
  padding: 10px;
  background:
    linear-gradient(180deg, rgba(5, 8, 12, 0.14), rgba(5, 8, 12, 0.03) 44%, rgba(5, 8, 12, 0.28));
}

.activityBrowsePage .activityPrimeCard--activity .activityPrimeBody {
  position: relative;
  gap: 4px;
  margin-top: -40px;
  padding: 0 10px 10px;
  z-index: 1;
}

.activityBrowsePage .activityPrimeCard--activity .activityPrimeBody::before {
  content: "";
  position: absolute;
  inset: -30px 0 0;
  background: linear-gradient(180deg, rgba(8, 12, 20, 0) 0%, rgba(8, 12, 20, 0.74) 36%, rgba(8, 12, 20, 0.96) 100%);
  pointer-events: none;
  z-index: -1;
}

.activityBrowsePage .activityPrimeCard--activity .activityPrimeBadge {
  min-height: 18px;
  gap: 4px;
  padding: 0 7px;
  font-size: 9px;
}

.activityBrowsePage .activityPrimeCard--activity .activityPrimeBadgeIcon svg,
.activityBrowsePage .activityPrimeCard--activity .activityPrimeMetaIcon svg {
  width: 11px;
  height: 11px;
}

.activityBrowsePage .activityPrimeCard--activity .activityPrimeCardTitle {
  font-size: 13.5px;
  line-height: 1.14;
  letter-spacing: -0.015em;
}

.activityBrowsePage .activityPrimeCard--activity .activityPrimeCardMeta {
  width: 100%;
  gap: 5px;
  font-size: 10px;
  line-height: 1.16;
  color: rgba(198, 209, 223, 0.82);
}

.activityBrowsePage .activityPrimeCard--activity .activityPrimeCardMeta span:last-child {
  flex: 1 1 auto;
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.activityBrowsePage .activityPrimeCard--activity .activityPrimeCardStateRow {
  gap: 4px;
  margin-top: 6px;
}

.activityBrowsePage .activityPrimeTrack.is-rail.activityPrimeTrack--wideEvents {
  grid-auto-columns: min(228px, 68vw);
  gap: 12px;
  padding: 2px 1px 5px;
}

.activityBrowsePage .activityPrimeTrack.is-rail.activityPrimeTrack--wideEvents .activityPrimeCard--activity .activityPrimeVisual,
.activityBrowsePage .activityPrimeTrack.is-rail.activityPrimeTrack--wideEvents .activityPrimeCard--activity.has-image.is-rail-card .activityPrimeVisual {
  aspect-ratio: 1.08 / 1;
}

.activityBrowsePage .activityPrimeTrack.is-rail.activityPrimeTrack--wideEvents .activityPrimeCard--activity .activityPrimeCardTitle {
  font-size: 15px;
}

@media (min-width: 640px) {
  .activityDiscoveryHeroTrack {
    grid-auto-columns: min(54vw, 520px);
    padding-left: 24px;
    padding-right: 24px;
  }

  .activityDiscoveryHeroSlide {
    min-height: 360px;
    aspect-ratio: 1.18 / 1;
  }

  .activityDiscoveryHeroTitle {
    font-size: 38px;
  }

  .activityDiscoveryPostDenseGrid {
    grid-auto-columns: 142px;
  }

  .activityBrowsePage .activityPrimeTrack.is-rail.activityPrimeTrack--wideEvents {
    grid-auto-columns: min(270px, 36vw);
  }
}

/* Phase 6 discovery visual system: cinematic event lead, denser posts, compact identity rail. */
.activityBrowsePage .activityDiscoveryHero {
  margin: 0 0 10px;
}

.activityBrowsePage .activityDiscoveryHeroTrack {
  grid-auto-columns: min(92vw, 520px);
  gap: 10px;
  padding: 0 14px 5px;
}

.activityBrowsePage .activityDiscoveryHeroSlide {
  min-height: 246px;
  aspect-ratio: 1.18 / 1;
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 34px rgba(0, 0, 0, 0.28);
}

.activityBrowsePage .activityDiscoveryHeroImage {
  transform: scale(1.01);
}

.activityBrowsePage .activityDiscoveryHeroShade {
  background:
    linear-gradient(180deg, rgba(3, 7, 13, 0.04), rgba(3, 7, 13, 0.12) 38%, rgba(3, 7, 13, 0.9) 100%),
    linear-gradient(90deg, rgba(3, 7, 13, 0.26), rgba(3, 7, 13, 0.02) 56%);
}

.activityBrowsePage .activityDiscoveryHeroCopy {
  left: 14px;
  right: 14px;
  bottom: 14px;
  gap: 8px;
}

.activityBrowsePage .activityDiscoveryHeroBadge {
  min-height: 21px;
  padding: 0 8px;
  border-radius: 8px;
  letter-spacing: 0;
  font-size: 10px;
  background: rgba(6, 14, 23, 0.62);
}

.activityBrowsePage .activityDiscoveryHeroTitle {
  font-size: 28px;
  line-height: 1.02;
  letter-spacing: 0;
}

.activityDiscoveryHeroChips {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.activityDiscoveryHeroChip {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 8px;
  background: rgba(244, 248, 255, 0.11);
  color: rgba(232, 240, 250, 0.9);
  font-size: 11px;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  backdrop-filter: blur(12px);
}

.activityDiscoveryHeroChip:nth-child(n+3) {
  display: inline-flex;
}

.activityDiscoveryHeroChip.activityPrimeChip--priority1 {
  flex-shrink: 0;
  max-width: 46%;
}

.activityDiscoveryHeroChip.activityPrimeChip--priority2 {
  flex-shrink: 1;
  max-width: 34%;
}

.activityDiscoveryHeroChip.activityPrimeChip--priority3 {
  flex-shrink: 2;
  max-width: 30%;
}

.activityBrowsePage .activityDiscoverySectionFeed {
  gap: 10px;
}

.activityBrowsePage .activityDiscoverySection {
  padding-top: 2px;
}

.activityBrowsePage .activityDiscoverySection--happeningSoon {
  padding-top: 0;
}

.activityBrowsePage .activityDiscoverySection--happeningSoon .activityPrimeSectionTitle {
  margin-top: 10px;
  font-size: 15.5px;
  font-weight: 760;
  letter-spacing: 0;
  color: rgba(244, 248, 255, 0.9);
}

.activityBrowsePage .activityDiscoverySection--thisWeekend .activityPrimeSectionTitle,
.activityBrowsePage .activityDiscoverySection--postsExplore .activityPrimeSectionTitle,
.activityBrowsePage .activityDiscoverySection--peoplePages .activityPrimeSectionTitle {
  letter-spacing: 0;
  font-weight: 760;
  color: rgba(244, 248, 255, 0.9);
}

.activityBrowsePage .activityPrimeTrack.is-rail.activityPrimeTrack--eventRail {
  grid-auto-columns: min(164px, 47vw);
  gap: 9px;
  padding: 1px 1px 4px;
}

.activityBrowsePage .activityPrimeTrack.is-rail.activityPrimeTrack--wideEvents {
  grid-auto-columns: min(246px, 73vw);
  gap: 10px;
  padding: 1px 1px 5px;
}

.activityBrowsePage .activityDiscoverySection--happeningSoon .activityPrimeTrack.is-rail.activityPrimeTrack--wideEvents {
  grid-auto-columns: min(266px, 78vw);
}

.activityBrowsePage .activityPrimeCard--activity {
  border-radius: 12px;
  border-color: rgba(255, 255, 255, 0.075);
}

.activityBrowsePage .activityPrimeCard--activity .activityPrimeVisual,
.activityBrowsePage .activityPrimeCard--activity.has-image.is-rail-card .activityPrimeVisual {
  aspect-ratio: 1.04 / 1;
}

.activityBrowsePage .activityPrimeTrack.is-rail.activityPrimeTrack--wideEvents .activityPrimeCard--activity .activityPrimeVisual,
.activityBrowsePage .activityPrimeTrack.is-rail.activityPrimeTrack--wideEvents .activityPrimeCard--activity.has-image.is-rail-card .activityPrimeVisual {
  aspect-ratio: 1.26 / 1;
}

.activityBrowsePage .activityPrimeCard--activity .activityPrimeBody {
  margin-top: -44px;
}

.activityPrimeSignalRow {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.activityPrimeChipRow {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 5px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.activityPrimeChipRow .activityPrimeSignalPill,
.activityPrimeChipRow .activityStatusPill {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activityPrimeChip--priority1 {
  flex-shrink: 0;
  max-width: 48%;
}

.activityPrimeChip--priority2 {
  flex-shrink: 1;
  max-width: 36%;
}

.activityPrimeChip--priority3 {
  flex-shrink: 2;
  max-width: 34%;
}

.activityPrimeSignalPill {
  max-width: 100%;
  min-height: 18px;
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(232, 240, 250, 0.88);
  font-size: 9.5px;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.activityBrowsePage .activityPrimeCard--activity .activityPrimeSignalRow {
  margin-top: 1px;
}

.activityBrowsePage .activityDiscoveryPostPager {
  padding: 0 0 4px;
}

.activityBrowsePage .activityDiscoveryPostDenseGrid {
  grid-template-rows: repeat(1, minmax(0, auto));
  grid-auto-columns: min(154px, 45vw);
  gap: 10px;
}

.activityBrowsePage .activityPrimeTrack.is-rail.activityPrimeTrack--peopleRail {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(3, minmax(0, auto));
  grid-auto-columns: 100%;
  align-items: stretch;
  column-gap: 12px;
  row-gap: 7px;
  padding: 0 1px 5px;
  scroll-snap-type: x mandatory;
}

.activityBrowsePage .activityDiscoveryPeopleCardRail {
  width: 100%;
  max-width: none;
  min-height: 48px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 2px 3px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  text-decoration: none;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.activityBrowsePage .activityDiscoveryPeopleCardRail:hover,
.activityBrowsePage .activityDiscoveryPeopleCardRail:focus-visible {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(117, 219, 255, 0.13);
  text-decoration: none;
  outline: none;
}

.activityBrowsePage .activityDiscoveryAvatar--rail {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.045);
}

.activityBrowsePage .activityDiscoveryAvatar--rail.activityDiscoveryAvatar--fallback {
  font-size: 11px;
  letter-spacing: 0.02em;
}

.activityDiscoveryPeopleCardRailText {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.activityBrowsePage .activityDiscoveryPeopleCardRailName {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  font-size: 13.5px;
  font-weight: 680;
  line-height: 1.15;
  color: rgba(247, 251, 255, 0.94);
}

.activityDiscoveryPeopleCardRailMeta {
  min-width: 0;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 560;
  line-height: 1.2;
  color: rgba(185, 198, 214, 0.72);
}

@media (min-width: 640px) {
  .activityBrowsePage .activityDiscoveryHeroTrack {
    grid-auto-columns: min(64vw, 680px);
    padding-left: 24px;
    padding-right: 24px;
  }

  .activityBrowsePage .activityDiscoveryHeroSlide {
    min-height: 330px;
    aspect-ratio: 1.58 / 1;
  }

  .activityBrowsePage .activityDiscoveryHeroTitle {
    font-size: 38px;
  }

  .activityBrowsePage .activityDiscoveryPostDenseGrid {
    grid-auto-columns: min(178px, 27vw);
  }

  .activityBrowsePage .activityPrimeTrack.is-rail.activityPrimeTrack--eventRail {
    grid-auto-columns: min(178px, 27vw);
  }

  .activityBrowsePage .activityPrimeTrack.is-rail.activityPrimeTrack--wideEvents,
  .activityBrowsePage .activityDiscoverySection--happeningSoon .activityPrimeTrack.is-rail.activityPrimeTrack--wideEvents {
    grid-auto-columns: min(288px, 34vw);
  }
}

.activityPrimeEmpty {
  min-height: 220px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(9, 14, 22, 0.9);
  color: rgba(247, 251, 255, 0.92);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.activityInitialRecovery {
  max-width: min(320px, 82vw);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0;
}

.activityInitialLoadState--loading {
  min-height: 0;
  display: block;
  padding: 0;
}

.activityInitialSkeleton {
  width: 100%;
  min-width: 0;
  display: block;
}

.activityBrowsePage .activityInitialSkeleton[hidden],
.activityBrowsePage [data-activity-initial-feed-loading][hidden],
.activityBrowsePage [data-activity-initial-feed-recovery][hidden],
.activityBrowsePage [data-activity-initial-feed-refresh][hidden] {
  display: none !important;
}

.activityInitialSkeleton[data-activity-skeleton] {
  width: 100%;
  min-width: 0;
}

.activitySkeletonMain,
.activitySkeletonModule {
  min-width: 0;
  display: grid;
}

.activitySkeletonMain {
  gap: 18px;
}

.activitySkeletonModule {
  gap: 8px;
}

.activitySkeletonHeading {
  --skeleton-local-radius: var(--skeleton-radius-pill);
  display: block;
  width: min(132px, 42%);
  height: 11px;
  min-height: 11px;
  border-radius: var(--skeleton-radius-pill);
}

.activitySkeletonModule:nth-child(2n) .activitySkeletonHeading {
  width: min(108px, 34%);
}

.activitySkeletonCardRail {
  min-width: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(154px, 45vw);
  gap: 10px;
  overflow: hidden;
  padding: 1px 0 2px;
}

.activitySkeletonCardRail--compact {
  grid-auto-columns: min(112px, 32vw);
  gap: 8px;
}

.activitySkeletonCard--portrait,
.activitySkeletonCard--square {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 0;
}

.activitySkeletonCard--portrait {
  --skeleton-local-radius: var(--skeleton-radius-large);
  aspect-ratio: 1 / 1.57;
}

.activitySkeletonCard--square {
  --skeleton-local-radius: var(--skeleton-radius-compact);
  aspect-ratio: 1;
}

.activitySkeletonFriendsWall {
  position: relative;
  display: grid;
  grid-template-columns: repeat(30, minmax(0, 1fr));
  grid-auto-rows: clamp(4.5px, 1.05vw, 6.5px);
  width: calc(100% + 32px);
  min-width: 0;
  margin-inline: -16px;
  gap: 0;
  padding: 18px 2px 64px;
  isolation: isolate;
}

.activitySkeletonFriendsCard {
  --skeleton-wall-col: 2;
  --skeleton-wall-row: 1;
  --skeleton-wall-span: 48;
  --skeleton-wall-x: 0px;
  --skeleton-wall-y: 0px;
  --skeleton-wall-tilt: 0deg;
  --skeleton-wall-label-x: 3px;
  position: relative;
  grid-column: var(--skeleton-wall-col) / span 8;
  grid-row: var(--skeleton-wall-row) / span var(--skeleton-wall-span);
  width: 100%;
  min-width: 0;
  margin: 0;
  padding-top: 14px;
  align-self: start;
  transform:
    translate3d(var(--skeleton-wall-x), var(--skeleton-wall-y), 0)
    rotate(var(--skeleton-wall-tilt));
  transform-origin: center 22px;
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.24));
}

.activitySkeletonFriendsCard:nth-child(1) {
  --skeleton-wall-col: 2;
  --skeleton-wall-row: 1;
  --skeleton-wall-span: 48;
  --skeleton-wall-x: 0px;
  --skeleton-wall-y: -1px;
  --skeleton-wall-tilt: -2.1deg;
}

.activitySkeletonFriendsCard:nth-child(2) {
  --skeleton-wall-col: 11;
  --skeleton-wall-row: 11;
  --skeleton-wall-span: 49;
  --skeleton-wall-x: 1px;
  --skeleton-wall-y: 2px;
  --skeleton-wall-tilt: -1.2deg;
  --skeleton-wall-label-x: 5px;
}

.activitySkeletonFriendsCard:nth-child(3) {
  --skeleton-wall-col: 21;
  --skeleton-wall-row: 5;
  --skeleton-wall-span: 50;
  --skeleton-wall-y: 1px;
  --skeleton-wall-tilt: 0.85deg;
  --skeleton-wall-label-x: 2px;
}

.activitySkeletonFriendsCard:nth-child(4) {
  --skeleton-wall-col: 3;
  --skeleton-wall-row: 75;
  --skeleton-wall-span: 47;
  --skeleton-wall-x: 2px;
  --skeleton-wall-y: 2px;
  --skeleton-wall-tilt: 1.65deg;
  --skeleton-wall-label-x: 7px;
}

.activitySkeletonFriendsCard:nth-child(5) {
  --skeleton-wall-col: 12;
  --skeleton-wall-row: 66;
  --skeleton-wall-span: 51;
  --skeleton-wall-x: -1px;
  --skeleton-wall-y: 1px;
  --skeleton-wall-tilt: -1.75deg;
}

.activitySkeletonFriendsCard:nth-child(6) {
  --skeleton-wall-col: 20;
  --skeleton-wall-row: 79;
  --skeleton-wall-span: 49;
  --skeleton-wall-x: 1px;
  --skeleton-wall-y: -1px;
  --skeleton-wall-tilt: 1.25deg;
  --skeleton-wall-label-x: 6px;
}

.activitySkeletonFriendsActor {
  position: absolute;
  top: 0;
  left: var(--skeleton-wall-label-x);
  z-index: 2;
  width: min(66px, calc(100% - var(--skeleton-wall-label-x)));
  min-width: 0;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
}

.activitySkeletonFriendsActor .neoSkeleton--avatar {
  width: 18px;
  height: 18px;
  min-width: 18px;
}

.activitySkeletonFriendsActor .neoSkeleton--line {
  width: 100%;
  height: 7px;
  min-height: 7px;
}

.activitySkeletonFriendsMedia {
  --skeleton-local-radius: var(--skeleton-radius-tight);
  display: block;
  width: 100%;
  min-width: 0;
  aspect-ratio: 1 / 1.32;
  border: 1px solid rgba(180, 192, 210, 0.14);
}

.activityInitialSkeleton--explore {
  overflow: visible;
}

.activitySkeletonExploreGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  width: calc(100% + 28px);
  min-width: 0;
  margin-inline: -14px;
  padding: 0 0 24px;
}

.activitySkeletonExploreTile {
  --skeleton-local-radius: var(--skeleton-radius-large);
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1 / 1.57;
}

.activityInitialLoadState--error {
  min-height: 148px;
  border: 0;
  background: transparent;
}

html.activityViewerOpen,
body.activityViewerOpen {
  overflow: hidden;
}

.activityViewer {
  position: fixed;
  inset: 0;
  z-index: 210;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.26s ease;
}

.activityViewer.is-open {
  opacity: 1;
  pointer-events: auto;
}

.activityViewerBackdrop {
  position: absolute;
  inset: 0;
  background: none;
  backdrop-filter: none;
}

.activityViewerStage {
  position: relative;
  width: 100%;
  height: 100%;
}

.activityViewerPost {
  width: 100%;
  height: 100%;
  min-height: 100%;
  opacity: 0;
  transition: opacity 0.16s ease;
}

.activityViewer.is-ready .activityViewerPost {
  opacity: 1;
}

.activityViewerFrame {
  background: #03070d;
}

.activityViewerMediaStrip {
  z-index: 0;
}

.activityViewerPlaceholder {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.activityViewerPlaceholder.is-idle .activityViewerLoading {
  display: none;
}

.activityViewerLoading {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(232, 239, 248, 0.68);
}

.activityViewerChromeTop {
  padding: calc(env(safe-area-inset-top, 0px) + 18px) 16px 0;
  align-items: flex-start;
}

.activityViewerTopBar {
  justify-content: flex-end;
}

.activityViewerTopSpacer {
  display: none;
}

.activityViewerInfo {
  max-width: min(calc(100% - 76px), 24rem);
}

.activityViewerCommentsClose {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(8, 13, 20, 0.24);
  color: rgba(246, 250, 255, 0.95);
  display: inline-grid;
  place-items: center;
  padding: 0;
}

.activityViewerClose {
  width: 52px;
  height: 52px;
  min-width: 44px;
  min-height: 44px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #fff;
  display: inline-grid;
  place-items: center;
  padding: 0;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.84));
}

.activityViewerClose svg {
  width: 32px;
  height: 32px;
  display: block;
}

.activityViewerCommentsClose svg {
  width: 18px;
  height: 18px;
  display: block;
}

.activityViewerChromeBottom {
  padding-inline: 16px;
  padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
}

.activityViewerBottomPanel {
  align-items: flex-end;
}

.activityViewerRail {
  gap: 12px;
}

.activityViewerFeedback {
  min-height: 15px;
  font-size: 11px;
  line-height: 1.25;
  color: rgba(208, 232, 255, 0.92);
  opacity: 0;
  transition: opacity 0.18s ease;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.44);
}

.activityViewerFeedback.is-visible {
  opacity: 1;
}

.activityViewerCommentsSheet {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: flex-end;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.activityViewerCommentsSheet.is-open {
  opacity: 1;
  pointer-events: auto;
}

.activityViewerCommentsBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 8, 13, 0.44);
}

.activityViewerCommentsCard {
  position: relative;
  width: 100%;
  max-height: min(74vh, 640px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  border-radius: 28px 28px 0 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(7, 12, 20, 0.98);
  box-shadow: 0 -18px 46px rgba(0, 0, 0, 0.3);
  transform: translateY(26px);
  transition: transform 0.24s ease;
}

.activityViewerCommentsSheet.is-open .activityViewerCommentsCard {
  transform: translateY(0);
}

.activityViewerCommentsHandle {
  width: 42px;
  height: 4px;
  margin: 0 auto;
  border-radius: 999px;
  background: rgba(238, 244, 250, 0.24);
}

.activityViewerCommentsHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.activityViewerCommentsHeading {
  min-width: 0;
}

.activityViewerCommentsHeading h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 650;
  color: rgba(247, 251, 255, 0.98);
}

.activityViewerCommentsHeading p {
  margin: 4px 0 0;
  font-size: 12px;
  color: rgba(189, 201, 214, 0.74);
}

.activityViewerCommentsList {
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.activityViewerCommentRow {
  padding: 12px 13px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.activityViewerCommentMeta {
  font-size: 11px;
  color: rgba(185, 197, 210, 0.68);
}

.activityViewerCommentBody {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(239, 244, 250, 0.92);
  white-space: pre-wrap;
}

.activityViewerCommentsEmpty {
  font-size: 13px;
  color: rgba(192, 203, 216, 0.7);
}

.activityViewerCommentsForm {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.activityViewerCommentsTextarea {
  width: 100%;
  min-height: 84px;
  max-height: 160px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(247, 251, 255, 0.96);
  resize: vertical;
}

.activityViewerCommentsFormFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.activityViewerCommentsNote {
  margin: 0;
  font-size: 11px;
  color: rgba(180, 192, 206, 0.66);
}

.activityViewerCommentsSubmit {
  min-height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(122, 212, 255, 0.24);
  background: rgba(122, 212, 255, 0.14);
  color: rgba(242, 248, 255, 0.96);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.activityViewerGhost {
  position: fixed;
  margin: 0;
  z-index: 211;
  overflow: hidden;
  pointer-events: none;
  border-radius: 24px;
  transition:
    left 0.32s cubic-bezier(0.2, 0.9, 0.2, 1),
    top 0.32s cubic-bezier(0.2, 0.9, 0.2, 1),
    width 0.32s cubic-bezier(0.2, 0.9, 0.2, 1),
    height 0.32s cubic-bezier(0.2, 0.9, 0.2, 1),
    border-radius 0.32s cubic-bezier(0.2, 0.9, 0.2, 1),
    opacity 0.18s ease;
}

.activityViewerGhost.is-expanded {
  border-radius: 0;
}

.activityViewerGhost.is-fading {
  opacity: 0;
}

.activityViewerGhost.is-closing .activityViewerTopBar {
  opacity: 0;
}

.activityViewer--legacy {
  display: none !important;
}

.activityViewerShell {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #03070d;
}

.activityViewerFeedRoot {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  --city-post-h: 100%;
  opacity: 0;
  transition: opacity 0.16s ease;
}

.activityViewerFeedRoot.activityViewerSequence,
.postViewerCanvas.postViewerSequence {
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  scroll-snap-type: y mandatory;
  scroll-padding: 0;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.activityViewerFeedRoot.activityViewerSequence::-webkit-scrollbar,
.postViewerCanvas.postViewerSequence::-webkit-scrollbar {
  display: none;
}

.activityViewerSequencePage,
.postViewerSequencePage,
.activityViewerFeedRoot.activityViewerSequence > .cityPost,
.postViewerCanvas.postViewerSequence > .cityPost,
.activityViewerFeedRoot.activityViewerSequence > .activityViewerInstantCard,
.postViewerCanvas.postViewerSequence > .postViewerInstantCard {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  min-height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.activityViewerSequencePage > *,
.postViewerSequencePage > * {
  width: 100%;
  height: 100%;
  min-height: 100%;
}

.activityViewerSequencePage > .reelCardRecovery,
.postViewerSequencePage > .reelCardRecovery {
  position: absolute;
  z-index: 5;
  inset: auto 16px 24px;
  width: auto;
  height: auto;
  min-height: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(15, 18, 25, .88);
  color: #f8fbff;
  font-size: 14px;
}

.reelCardRecovery button,
.reelCardRecovery a {
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 20px;
  background: rgba(255, 255, 255, .08);
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.has-reel-card-error .postViewerInstantRefresh {
  visibility: hidden;
  animation: none;
}

.has-reel-card-error .postViewerInstantRefresh::before {
  animation: none;
}

.activityViewer.is-ready .activityViewerFeedRoot {
  opacity: 1;
}

.activityViewerInstantCard {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  background: #03070d;
  color: rgba(248, 251, 255, 0.96);
}

.activityViewerInstantVisual,
.activityViewerInstantMedia,
.activityViewerInstantFallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.activityViewerInstantMedia {
  object-fit: cover;
  display: block;
}

.activityViewerInstantFallback {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 35% 25%, rgba(122, 212, 255, 0.22), transparent 42%),
    linear-gradient(160deg, rgba(16, 185, 129, 0.14), rgba(8, 13, 22, 0.96));
}

.activityViewerInstantFallback svg {
  width: min(28vw, 116px);
  height: min(28vw, 116px);
  opacity: 0.76;
}

.activityViewerInstantShade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(3, 7, 13, 0.1), rgba(3, 7, 13, 0.38) 48%, rgba(3, 7, 13, 0.92)),
    linear-gradient(90deg, rgba(3, 7, 13, 0.34), transparent 52%);
}

.activityViewerInstantCopy {
  position: absolute;
  left: 18px;
  right: 78px;
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.activityViewerInstantBadge {
  align-self: flex-start;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(122, 212, 255, 0.14);
  border: 1px solid rgba(122, 212, 255, 0.32);
  color: rgba(210, 243, 255, 0.96);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.activityViewerInstantCopy h2 {
  margin: 0;
  font-size: clamp(26px, 9vw, 46px);
  line-height: 0.98;
  letter-spacing: 0;
}

.activityViewerInstantCopy p {
  max-width: 32rem;
  margin: 0;
  color: rgba(236, 244, 255, 0.76);
  font-size: 14px;
  line-height: 1.38;
}

.activityViewerInstantRefresh,
.postViewerInstantRefresh {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  min-height: 14px;
}

.activityViewerInstantRefresh span,
.postViewerInstantRefresh span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(122, 212, 255, 0.72);
  animation: instantKnownPulse 900ms ease-in-out infinite alternate;
}

.activityViewerInstantRefresh span:nth-child(2),
.postViewerInstantRefresh span:nth-child(2) {
  animation-delay: 120ms;
}

.activityViewerInstantRefresh span:nth-child(3),
.postViewerInstantRefresh span:nth-child(3) {
  animation-delay: 240ms;
}

@keyframes instantKnownPulse {
  from { opacity: 0.35; transform: translateY(0); }
  to { opacity: 0.95; transform: translateY(-2px); }
}

.activityViewerFeedRoot .cityPost {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  min-height: 100%;
}

.activityViewerFeedRoot .cityPostFrame {
  background: #03070d;
}

.activityViewerTopBar {
  position: absolute;
  inset: 0 0 auto;
  z-index: 8;
  display: flex;
  justify-content: flex-start;
  padding: calc(var(--city-top-safe) + 12px) 0 0;
  pointer-events: none;
}

.activityViewerTopBar .activityViewerClose {
  pointer-events: auto;
}

.activityViewerFailure {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  background: #03070d;
  color: rgba(244, 249, 255, 0.92);
}

.activityViewerFailure[hidden] {
  display: none;
}

.activityViewerFailure p {
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
}

.activityViewerFailure .appRecoveryRefresh {
  margin: 0 auto;
}

.cityCommentsSheet--viewer {
  z-index: 260;
}

@media (min-width: 900px) {
  .activityPrimeTrack.is-rail {
    grid-auto-columns: min(178px, 52.8vw);
  }

  .activityPrimeSection.is-single .activityPrimeTrack.is-rail {
    grid-auto-columns: min(178px, 52.8vw);
  }

  .activityViewerChromeTop {
    padding-inline: 22px;
  }

  .activityViewerChromeBottom {
    padding-inline: 22px;
  }

  .activityViewerInfo {
    max-width: min(calc(100% - 76px), 24rem);
  }

  .activityViewerCommentsCard {
    max-width: 560px;
    margin: 0 auto;
  }
}

@media (max-width: 640px) {
  .activityBrowsePage .activityContent.activityPrimeContent {
    padding-left: 12px;
    padding-right: 12px;
  }

  .topTabsLink {
    min-height: 32px;
    padding: 0 12px;
    font-size: 10px;
  }

  .activityPrimeSectionTitle {
    font-size: 17px;
  }

  .activityPrimeTrack.is-rail {
    grid-auto-columns: min(178px, 52.8vw);
  }

  .activityPrimeSection.is-single .activityPrimeTrack.is-rail {
    grid-auto-columns: min(178px, 52.8vw);
  }

  .activityBrowsePage .activityPrimeTrack.is-rail:not(.activityPrimeTrack--postsRail):not(.activityPrimeTrack--peopleRail) {
    grid-auto-columns: min(148px, 45vw);
    gap: 8px;
  }

  .activityBrowsePage .activityPrimeSection.is-single .activityPrimeTrack.is-rail:not(.activityPrimeTrack--postsRail):not(.activityPrimeTrack--peopleRail) {
    grid-auto-columns: min(148px, 45vw);
  }

  .activityBrowsePage .activityPrimeTrack.is-rail.activityPrimeTrack--eventRail:not(.activityPrimeTrack--wideEvents) {
    grid-auto-columns: calc(min(100vw, var(--page-max, 480px)) / 3);
  }

  .activityPrimeVisualOverlay {
    padding: 11px;
  }

  .activityPrimeBody {
    padding: 11px 13px 13px;
  }

  .activityPrimeCardTitle {
    font-size: 15px;
  }

  .activityBrowsePage .activityPrimeCard--activity .activityPrimeVisualOverlay {
    padding: 9px;
  }

  .activityBrowsePage .activityPrimeCard--activity .activityPrimeBody {
    margin-top: -36px;
    padding: 0 9px 9px;
  }

  .activityBrowsePage .activityPrimeCard--activity .activityPrimeBody::before {
    inset: -27px 0 0;
  }

  .activityBrowsePage .activityPrimeCard--activity .activityPrimeCardTitle {
    font-size: 13px;
  }

  .activityBrowsePage .activityPrimeCard--activity .activityPrimeCardMeta {
    font-size: 9.5px;
  }

  .cityPostHeadline {
    font-size: 21px;
  }

  .activityViewerChromeTop {
    padding-top: calc(env(safe-area-inset-top, 0px) + 14px);
  }

  .activityViewerInfo {
    max-width: min(calc(100% - 76px), 24rem);
  }

  .activityViewerCommentsCard {
    max-height: min(78vh, 560px);
    padding-inline: 14px;
  }

  .activityViewerCommentsFormFooter {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Activity discovery card hardening: keep media/title visible and rails padded on mobile. */
.activityBrowsePage,
.activityBrowsePage .appContent,
.activityBrowsePage .app-content,
.activityBrowsePage .activityPrimeContent {
  max-width: 100%;
  overflow-x: hidden;
}

.activityBrowsePage .activityDiscoveryHeroTrack,
.activityBrowsePage .activityPrimeTrack.is-rail,
.activityBrowsePage .activityDiscoveryPostPager {
  margin-inline: -12px;
  max-width: calc(100% + 24px);
  padding-left: 12px;
  padding-right: 12px;
  scroll-padding-inline: 12px;
}

.activityBrowsePage .activityDiscoveryHeroFallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 10px;
  padding: 20px;
  background:
    radial-gradient(circle at 78% 12%, rgba(105, 190, 255, 0.24), transparent 34%),
    linear-gradient(180deg, rgba(18, 28, 44, 0.98), rgba(5, 8, 13, 0.98));
  color: rgba(247, 251, 255, 0.94);
}

.activityBrowsePage .activityDiscoveryHeroFallbackIcon {
  width: 46px;
  height: 46px;
  display: inline-grid;
  place-items: center;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
}

.activityBrowsePage .activityDiscoveryHeroFallbackIcon svg {
  width: 24px;
  height: 24px;
  display: block;
}

.activityBrowsePage .activityDiscoveryHeroFallbackLabel {
  font-size: 12px;
  font-weight: 760;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.activityBrowsePage .activityPrimeTrack.is-rail.activityPrimeTrack--eventRail,
.activityBrowsePage .activityPrimeTrack.is-rail.activityPrimeTrack--wideEvents {
  grid-auto-columns: minmax(158px, 47vw);
  gap: 10px;
}

.activityBrowsePage .activityPrimeTrack.is-rail.activityPrimeTrack--wideEvents,
.activityBrowsePage .activityDiscoverySection--happeningSoon .activityPrimeTrack.is-rail.activityPrimeTrack--wideEvents {
  grid-auto-columns: minmax(232px, 73vw);
}

.activityBrowsePage .activityPrimeCard--activity.has-image.is-rail-card,
.activityBrowsePage .activityPrimeCard--activity.has-fallback.is-rail-card {
  position: relative;
  display: block;
  min-height: 220px;
  overflow: hidden;
  border-radius: 12px;
  background: #070b12;
  contain: paint;
}

.activityBrowsePage .activityPrimeTrack--wideEvents .activityPrimeCard--activity.has-image.is-rail-card,
.activityBrowsePage .activityPrimeTrack--wideEvents .activityPrimeCard--activity.has-fallback.is-rail-card {
  min-height: 238px;
}

.activityBrowsePage .activityPrimeCard--activity .activityPrimeVisual,
.activityBrowsePage .activityPrimeCard--activity.has-image.is-rail-card .activityPrimeVisual,
.activityBrowsePage .activityPrimeCard--activity.has-fallback.is-rail-card .activityPrimeVisual,
.activityBrowsePage .activityPrimeTrack.is-rail.activityPrimeTrack--wideEvents .activityPrimeCard--activity .activityPrimeVisual,
.activityBrowsePage .activityPrimeTrack.is-rail.activityPrimeTrack--wideEvents .activityPrimeCard--activity.has-image.is-rail-card .activityPrimeVisual {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

.activityBrowsePage .activityPrimeCard--activity .activityPrimeImage,
.activityBrowsePage .activityPrimeCard--activity .activityPrimeVisual video.activityPrimeImage,
.activityBrowsePage .activityPrimeCard--activity .activityPrimeFallback {
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
}

.activityBrowsePage .activityPrimeCard--activity .activityPrimeVisualOverlay {
  z-index: 1;
  padding: 9px;
  background:
    linear-gradient(180deg, rgba(5, 8, 12, 0.22), rgba(5, 8, 12, 0.02) 42%, rgba(5, 8, 12, 0.34));
}

.activityBrowsePage .activityPrimeCard--activity .activityPrimeBody {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  margin-top: 0;
  gap: 1px;
  padding: 44px 10px 7px;
  background: linear-gradient(180deg, rgba(7, 11, 18, 0), rgba(7, 11, 18, 0.82) 42%, rgba(7, 11, 18, 0.98) 100%);
}

.activityBrowsePage .activityPrimeCard--activity .activityPrimeBody::before {
  display: none;
}

.activityBrowsePage .activityPrimeCard--activity .activityPrimeCardTitle {
  min-height: 0;
  font-size: 13.5px;
  font-weight: 560;
  line-height: 1.1;
  letter-spacing: 0;
  color: rgba(232, 240, 250, 0.86);
  overflow-wrap: anywhere;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.42);
}

.activityBrowsePage .activityPrimeTrack--wideEvents .activityPrimeCard--activity .activityPrimeCardTitle {
  font-size: 15px;
}

.activityBrowsePage .activityPrimeCard--activity .activityPrimeCardMeta {
  min-height: 12px;
  font-size: 9.5px;
  line-height: 1.1;
  color: rgba(185, 198, 214, 0.7);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.38);
}

.activityBrowsePage .activityPrimeCard--activity .activityPrimeSignalRow,
.activityBrowsePage .activityPrimeCard--activity .activityPrimeCardStateRow,
.activityBrowsePage .activityPrimeCard--activity .activityPrimeChipRow {
  position: relative;
  z-index: 1;
}

@media (min-width: 640px) {
  .activityBrowsePage .activityDiscoveryHeroTrack,
  .activityBrowsePage .activityPrimeTrack.is-rail,
  .activityBrowsePage .activityDiscoveryPostPager {
    margin-inline: -24px;
    max-width: calc(100% + 48px);
    padding-left: 24px;
    padding-right: 24px;
    scroll-padding-inline: 24px;
  }

  .activityBrowsePage .activityPrimeTrack.is-rail.activityPrimeTrack--eventRail {
    grid-auto-columns: minmax(178px, 27vw);
  }

  .activityBrowsePage .activityPrimeTrack.is-rail.activityPrimeTrack--wideEvents,
  .activityBrowsePage .activityDiscoverySection--happeningSoon .activityPrimeTrack.is-rail.activityPrimeTrack--wideEvents {
    grid-auto-columns: minmax(288px, 34vw);
  }

  .activityBrowsePage .activityPrimeCard--activity.has-image.is-rail-card,
  .activityBrowsePage .activityPrimeCard--activity.has-fallback.is-rail-card {
    min-height: 242px;
  }

  .activityBrowsePage .activityPrimeTrack--wideEvents .activityPrimeCard--activity.has-image.is-rail-card,
  .activityBrowsePage .activityPrimeTrack--wideEvents .activityPrimeCard--activity.has-fallback.is-rail-card {
    min-height: 266px;
  }
}

.activityBrowsePage:not(.activityBrowsePage--friends):not(.activityBrowsePage--explore) .activityDiscoveryHeroTrack {
  grid-auto-columns: 100%;
  gap: 12px;
  padding-bottom: 1px;
  scroll-snap-type: x mandatory;
}

.activityBrowsePage:not(.activityBrowsePage--friends):not(.activityBrowsePage--explore) [data-activity-hero-track] {
  padding-bottom: 1px;
}

.activityBrowsePage:not(.activityBrowsePage--friends):not(.activityBrowsePage--explore) .activityDiscoveryHeroSlide {
  min-height: 221px;
  aspect-ratio: 1.31 / 1;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.activityBrowsePage:not(.activityBrowsePage--friends):not(.activityBrowsePage--explore) .activityMainHeroDots {
  min-height: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0 16px;
}

.activityBrowsePage:not(.activityBrowsePage--friends):not(.activityBrowsePage--explore) .activityMainHeroDot {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  flex: 0 0 auto;
  box-sizing: content-box;
  width: 3px;
  height: 3px;
  min-width: 0;
  min-height: 0;
  max-height: 4px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(168, 178, 190, 0.22);
  box-shadow: none;
  color: transparent;
  cursor: pointer;
  font-size: 0;
  line-height: 0;
  letter-spacing: 0;
  opacity: 0.74;
  transition:
    width 180ms ease,
    height 180ms ease,
    background-color 180ms ease,
    opacity 180ms ease,
    box-shadow 180ms ease;
}

.activityBrowsePage:not(.activityBrowsePage--friends):not(.activityBrowsePage--explore) .activityMainHeroDot.is-active {
  width: 9px;
  height: 4px;
  background: rgba(247, 251, 255, 0.62);
  box-shadow: none;
  opacity: 0.92;
}

.activityBrowsePage:not(.activityBrowsePage--friends):not(.activityBrowsePage--explore) .activityMainHeroDot:focus-visible {
  outline: 2px solid rgba(122, 212, 255, 0.56);
  outline-offset: 4px;
}

@media (min-width: 640px) {
  .activityBrowsePage:not(.activityBrowsePage--friends):not(.activityBrowsePage--explore) .activityDiscoveryHeroTrack {
    gap: 24px;
  }

  .activityBrowsePage:not(.activityBrowsePage--friends):not(.activityBrowsePage--explore) .activityDiscoveryHeroSlide {
    min-height: 297px;
    aspect-ratio: 1.76 / 1;
  }
}

/* Shared visual Activity card skin; parent grids/rails still own layout width and flow. */
:is(.profilePage .profileActivityGrid--visual, .activityBrowsePage, .savedPage .myListsVisualGrid, .activityDiscoverySearchRail) .normalEventCard.activityPrimeCard--activity {
  position: relative;
  display: block;
  min-height: 0;
  height: auto;
  aspect-ratio: var(--normal-event-card-ratio);
  border: 0;
  border-radius: var(--normal-event-card-radius);
  overflow: hidden;
  background: #070b12;
  color: inherit;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 12px 24px rgba(0, 0, 0, 0.14);
  contain: paint;
}

:is(.profilePage .profileActivityGrid--visual, .activityBrowsePage, .savedPage .myListsVisualGrid, .activityDiscoverySearchRail) .normalEventCard.activityPrimeCard--activity .activityPrimeVisual {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

:is(.profilePage .profileActivityGrid--visual, .activityBrowsePage, .savedPage .myListsVisualGrid, .activityDiscoverySearchRail) .normalEventCard.activityPrimeCard--activity .activityPrimeImage,
:is(.profilePage .profileActivityGrid--visual, .activityBrowsePage, .savedPage .myListsVisualGrid, .activityDiscoverySearchRail) .normalEventCard.activityPrimeCard--activity .activityPrimeVisual video.activityPrimeImage,
:is(.profilePage .profileActivityGrid--visual, .activityBrowsePage, .savedPage .myListsVisualGrid, .activityDiscoverySearchRail) .normalEventCard.activityPrimeCard--activity .activityPrimeFallback {
  width: 100%;
  height: 100%;
  min-height: 100%;
  display: block;
  object-fit: cover;
}

:is(.profilePage .profileActivityGrid--visual, .activityBrowsePage, .savedPage .myListsVisualGrid, .activityDiscoverySearchRail) .normalEventCard.activityPrimeCard--activity .activityPrimeVisualOverlay {
  z-index: 2;
  padding: 9px;
  background:
    linear-gradient(180deg, rgba(5, 8, 12, 0.22), rgba(5, 8, 12, 0.02) 42%, rgba(5, 8, 12, 0.34));
}

:is(.profilePage .profileActivityGrid--visual, .activityBrowsePage, .savedPage .myListsVisualGrid, .activityDiscoverySearchRail) .normalEventCard.activityPrimeCard--activity .activityPrimeBody {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  gap: 1px;
  margin-top: 0;
  padding: 44px 10px 7px;
  background: linear-gradient(180deg, rgba(7, 11, 18, 0), rgba(7, 11, 18, 0.78) 42%, rgba(7, 11, 18, 0.98) 100%);
}

:is(.profilePage .profileActivityGrid--visual, .activityBrowsePage, .savedPage .myListsVisualGrid, .activityDiscoverySearchRail) .normalEventCard.activityPrimeCard--activity .activityPrimeBody::before {
  display: none;
}

:is(.profilePage .profileActivityGrid--visual, .activityBrowsePage, .savedPage .myListsVisualGrid, .activityDiscoverySearchRail) .normalEventCard.activityPrimeCard--activity .activityPrimeCardTitle {
  min-height: 0;
  font-size: 13.5px;
  font-weight: 560;
  line-height: 1.1;
  letter-spacing: 0;
  color: rgba(232, 240, 250, 0.86);
  overflow-wrap: anywhere;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.42);
}

:is(.profilePage .profileActivityGrid--visual, .activityBrowsePage, .savedPage .myListsVisualGrid, .activityDiscoverySearchRail) .normalEventCard.activityPrimeCard--activity .activityPrimeCardMeta {
  min-height: 12px;
  font-size: 9.5px;
  line-height: 1.1;
  color: rgba(185, 198, 214, 0.7);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.38);
}

:is(.profilePage .profileActivityGrid--visual, .activityBrowsePage, .savedPage .myListsVisualGrid, .activityDiscoverySearchRail) .normalEventCard.activityPrimeCard--activity .activityPrimeSignalRow,
:is(.profilePage .profileActivityGrid--visual, .activityBrowsePage, .savedPage .myListsVisualGrid, .activityDiscoverySearchRail) .normalEventCard.activityPrimeCard--activity .activityPrimeCardStateRow,
:is(.profilePage .profileActivityGrid--visual, .activityBrowsePage, .savedPage .myListsVisualGrid, .activityDiscoverySearchRail) .normalEventCard.activityPrimeCard--activity .activityPrimeChipRow {
  position: relative;
  z-index: 1;
  gap: 4px;
  margin-top: 0;
}

:is(.profilePage .profileActivityGrid--visual, .activityBrowsePage, .savedPage .myListsVisualGrid, .activityDiscoverySearchRail) .normalEventCard.activityPrimeCard--activity .activityPrimeChipRow {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  gap: 3px;
  overflow: hidden;
  flex-wrap: nowrap;
  white-space: nowrap;
}

:is(.profilePage .profileActivityGrid--visual, .activityBrowsePage, .savedPage .myListsVisualGrid, .activityDiscoverySearchRail) .normalEventCard.activityPrimeCard--activity .activityPrimeBadge {
  min-height: 19px;
  max-width: 100%;
  padding: 0 7px;
  gap: 4px;
  font-size: 8px;
  letter-spacing: 0.06em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

:is(.profilePage .profileActivityGrid--visual, .activityBrowsePage, .savedPage .myListsVisualGrid, .activityDiscoverySearchRail) .normalEventCard.activityPrimeCard--activity .activityPrimeSignalPill,
:is(.profilePage .profileActivityGrid--visual, .activityBrowsePage, .savedPage .myListsVisualGrid, .activityDiscoverySearchRail) .normalEventCard.activityPrimeCard--activity .activityStatusPill {
  min-height: 18px;
  padding: 0 6px;
  max-width: 100%;
  font-size: 8px;
  letter-spacing: 0.06em;
}

:is(.profilePage .profileActivityGrid--visual, .activityBrowsePage, .savedPage .myListsVisualGrid, .activityDiscoverySearchRail) .normalEventCard.activityPrimeCard--activity .activityPrimeChipRow .activityPrimeSignalPill,
:is(.profilePage .profileActivityGrid--visual, .activityBrowsePage, .savedPage .myListsVisualGrid, .activityDiscoverySearchRail) .normalEventCard.activityPrimeCard--activity .activityPrimeChipRow .activityStatusPill {
  flex: 0 1 auto;
  min-width: 0;
  min-height: 16px;
  max-width: 100%;
  padding: 0 5px;
  gap: 3px;
  overflow: hidden;
  font-size: 7.5px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(.profilePage .profileActivityGrid--visual, .activityBrowsePage, .savedPage .myListsVisualGrid, .activityDiscoverySearchRail) .normalEventCard.activityPrimeCard--activity .activityPrimeChip--priority1 {
  flex-shrink: 0;
  max-width: 48%;
}

:is(.profilePage .profileActivityGrid--visual, .activityBrowsePage, .savedPage .myListsVisualGrid, .activityDiscoverySearchRail) .normalEventCard.activityPrimeCard--activity .activityPrimeChip--priority2 {
  flex-shrink: 1;
  max-width: 36%;
}

:is(.profilePage .profileActivityGrid--visual, .activityBrowsePage, .savedPage .myListsVisualGrid, .activityDiscoverySearchRail) .normalEventCard.activityPrimeCard--activity .activityPrimeChip--priority3 {
  flex-shrink: 2;
  max-width: 34%;
}

:is(.profilePage .profileActivityGrid--visual, .activityBrowsePage, .savedPage .myListsVisualGrid, .activityDiscoverySearchRail) .normalEventCard.activityPrimeCard--activity .activityPrimeBadgeIcon svg,
:is(.profilePage .profileActivityGrid--visual, .activityBrowsePage, .savedPage .myListsVisualGrid, .activityDiscoverySearchRail) .normalEventCard.activityPrimeCard--activity .activityPrimeMetaIcon svg {
  width: 10px;
  height: 10px;
}

.activityBrowsePage.activityBrowsePage--explore {
  background: #030509;
}

.activityBrowsePage.activityBrowsePage--explore .activityPrimeContent {
  padding-left: 14px;
  padding-right: 14px;
}

.activityBrowsePage.activityBrowsePage--explore .activityExploreSurface,
.activityBrowsePage.activityBrowsePage--explore .activityExploreMoreSection {
  width: calc(100% + 28px);
  margin-inline: -14px;
}

.activityBrowsePage.activityBrowsePage--explore .activityExploreGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 0 0 24px;
}

.activityBrowsePage.activityBrowsePage--explore .activityExploreGrid--more {
  padding-top: 2px;
}

.activityBrowsePage.activityBrowsePage--explore .activityPrimeEmpty {
  margin: 24px 12px;
}

.activityBrowsePage.activityBrowsePage--friends .activityPrimeTrack.is-rail.activityPrimeTrack--activityRail {
  grid-auto-columns: minmax(220px, 78vw);
  gap: 12px;
}

.activityBrowsePage.activityBrowsePage--friends .activityContent.activityPrimeContent {
  gap: 0;
  padding: 0 14px calc(var(--nav-height) + 8px);
}

.activityBrowsePage.activityBrowsePage--friends .activityPrimeSection.is-single .activityPrimeTrack.is-rail.activityPrimeTrack--activityRail {
  grid-auto-columns: minmax(220px, 78vw);
}

.activityBrowsePage.activityBrowsePage--friends .activityPrimeCard--activity.has-image.is-rail-card,
.activityBrowsePage.activityBrowsePage--friends .activityPrimeCard--activity.has-fallback.is-rail-card {
  min-height: 318px;
}

.activityBrowsePage.activityBrowsePage--friends .activityPrimeTrack.is-rail.activityPrimeTrack--wideEvents .activityPrimeCard--activity.has-image.is-rail-card,
.activityBrowsePage.activityBrowsePage--friends .activityPrimeTrack.is-rail.activityPrimeTrack--wideEvents .activityPrimeCard--activity.has-fallback.is-rail-card {
  min-height: 338px;
}

.activityBrowsePage.activityBrowsePage--friends .activityPrimeTrack--postsRail .profilePostGridItem {
  width: min(260px, 78vw);
  max-width: 300px;
}

.activityBrowsePage.activityBrowsePage--friends .activityPrimeTrack--postsRail .profilePostThumbButton {
  aspect-ratio: var(--profile-post-card-ratio);
}

.activityBrowsePage.activityBrowsePage--friends .activityDiscoveryPostGrid .profilePostThumbButton {
  aspect-ratio: var(--profile-post-card-ratio);
}

.activityBrowsePage.activityBrowsePage--friends .activityFriendsSurface {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  isolation: isolate;
  padding-top: 0;
}

.activityBrowsePage.activityBrowsePage--friends .activityFriendsSurface > * {
  position: relative;
  z-index: 1;
}

.activityBrowsePage.activityBrowsePage--friends .activityFriendsRailSection {
  min-width: 0;
}

.activityBrowsePage.activityBrowsePage--friends .activityFriendsSectionTitle {
  margin: 8px 0 8px;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.2;
  color: rgba(245, 248, 252, 0.82);
}

.activityBrowsePage.activityBrowsePage--friends .activityFriendsGoingRail {
  padding-bottom: 6px;
}

.activityBrowsePage.activityBrowsePage--friends .activityFriendsFeed {
  position: relative;
  display: grid;
  grid-template-columns: repeat(30, minmax(0, 1fr));
  grid-auto-rows: clamp(4.5px, 1.05vw, 6.5px);
  width: calc(100% + 32px);
  margin-inline: -16px;
  gap: 0;
  padding: 18px 2px 64px;
  isolation: isolate;
}

.activityBrowsePage.activityBrowsePage--friends .activityFriendsWallDecor {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.activityBrowsePage.activityBrowsePage--friends .activityFriendsWallDecor--note {
  box-sizing: border-box;
  width: 40px;
  height: 48px;
  display: grid;
  place-items: center;
  padding: 6px 5px;
  border-radius: 4px 4px 8px 4px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.22), transparent 18px),
    linear-gradient(180deg, rgba(232, 224, 203, 0.9), rgba(186, 179, 160, 0.78));
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  color: rgba(16, 19, 23, 0.76);
  opacity: 0.82;
}

.activityBrowsePage.activityBrowsePage--friends .activityFriendsWallDecor--note span {
  display: block;
  max-width: 100%;
  overflow: hidden;
  font-family: "Comic Sans MS", "Segoe Print", cursive;
  font-size: 6.5px;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: 0;
  text-align: center;
  text-transform: lowercase;
}

.activityBrowsePage.activityBrowsePage--friends .activityFriendsWallDecor--note::before,
.activityBrowsePage.activityBrowsePage--friends .activityFriendsWallDecor--note::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  height: 1px;
  background: rgba(25, 30, 38, 0.24);
}

.activityBrowsePage.activityBrowsePage--friends .activityFriendsWallDecor--note::before {
  top: 17px;
}

.activityBrowsePage.activityBrowsePage--friends .activityFriendsWallDecor--note::after {
  top: 25px;
  right: 15px;
}

.activityBrowsePage.activityBrowsePage--friends .activityFriendsWallDecor--noteA {
  top: 0;
  left: 18%;
  width: 76px;
  height: 30px;
  z-index: 1;
  opacity: 0.64;
  transform: rotate(6deg);
}

.activityBrowsePage.activityBrowsePage--friends .activityFriendsWallDecor--noteB {
  top: 27%;
  left: 3px;
  width: 40px;
  height: 44px;
  z-index: 2;
  opacity: 0.7;
  transform: rotate(-5deg);
}

.activityBrowsePage.activityBrowsePage--friends .activityFriendsWallDecor--noteC {
  top: 71%;
  right: -5px;
  width: 46px;
  height: 56px;
  z-index: 2;
  opacity: 0.72;
  transform: rotate(8deg);
}

.activityBrowsePage.activityBrowsePage--friends .activityFriendsWallDecor--noteD {
  top: 32%;
  left: 66%;
  width: 46px;
  height: 48px;
  z-index: 1;
  opacity: 0.68;
  transform: rotate(10deg);
}

.activityBrowsePage.activityBrowsePage--friends .activityFriendsWallDecor--noteE {
  top: 1%;
  right: 3%;
  width: 46px;
  height: 50px;
  z-index: 1;
  opacity: 0.72;
  transform: rotate(-4deg);
}

.activityBrowsePage.activityBrowsePage--friends .activityFriendsWallDecor--noteF {
  top: 85%;
  left: -6px;
  width: 44px;
  height: 56px;
  z-index: 1;
  opacity: 0.72;
  transform: rotate(-8deg);
}

.activityBrowsePage.activityBrowsePage--friends .activityFriendsWallDecor--scrap {
  width: 48px;
  height: 30px;
  border-radius: 3px 8px 4px 6px;
  background:
    linear-gradient(150deg, transparent 0 72%, rgba(255, 255, 255, 0.24) 73%),
    linear-gradient(180deg, rgba(190, 196, 203, 0.38), rgba(136, 145, 156, 0.24));
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.24);
  opacity: 0.54;
}

.activityBrowsePage.activityBrowsePage--friends .activityFriendsWallDecor--scrapA {
  top: 78%;
  left: -16px;
  z-index: 1;
  transform: rotate(14deg);
}

.activityBrowsePage.activityBrowsePage--friends .activityFriendsWallDecor--tape {
  width: 44px;
  height: 12px;
  border-radius: 2px;
  background:
    linear-gradient(90deg, rgba(225, 217, 198, 0.08), rgba(225, 217, 198, 0.32), rgba(225, 217, 198, 0.12));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.24);
  opacity: 0.5;
}

.activityBrowsePage.activityBrowsePage--friends .activityFriendsWallDecor--tapeA {
  top: 18%;
  right: -10px;
  z-index: 2;
  transform: rotate(-9deg);
}

.activityBrowsePage.activityBrowsePage--friends .activityFriendsWallDecor--tapeB {
  top: 72%;
  left: -8px;
  z-index: 1;
  opacity: 0.4;
  transform: rotate(7deg);
}

.activityBrowsePage.activityBrowsePage--friends .activityFriendsWallDecor--tapeC {
  top: 37%;
  right: 24%;
  width: 38px;
  z-index: 2;
  opacity: 0.38;
  transform: rotate(-14deg);
}

.activityBrowsePage.activityBrowsePage--friends .activityFriendsWallDecor--tapeD {
  top: 0;
  right: 4%;
  width: 42px;
  z-index: 2;
  opacity: 0.42;
  transform: rotate(7deg);
}

.activityBrowsePage.activityBrowsePage--friends .activityFriendsWallDecor--pin {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(255, 190, 98, 0.86);
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.06),
    0 6px 12px rgba(0, 0, 0, 0.34),
    0 0 16px rgba(255, 190, 98, 0.26);
}

.activityBrowsePage.activityBrowsePage--friends .activityFriendsWallDecor--pinA {
  top: 48%;
  left: 78%;
}

.activityBrowsePage.activityBrowsePage--friends .activityFriendsWallDecor--pinB {
  top: 86%;
  left: 93%;
  width: 7px;
  height: 7px;
  background: rgba(122, 212, 255, 0.78);
}

.activityBrowsePage.activityBrowsePage--friends .activityFriendsWallDecor--doodle {
  opacity: 0.38;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.28));
}

.activityBrowsePage.activityBrowsePage--friends .activityFriendsWallDecor--heart {
  top: 13%;
  left: 68%;
  width: 24px;
  height: 24px;
  border: 2px solid rgba(233, 239, 248, 0.74);
  border-top: 0;
  border-left: 0;
  border-radius: 0 0 10px 0;
  transform: rotate(45deg);
}

.activityBrowsePage.activityBrowsePage--friends .activityFriendsWallDecor--heart::before,
.activityBrowsePage.activityBrowsePage--friends .activityFriendsWallDecor--heart::after {
  content: "";
  position: absolute;
  border: 2px solid rgba(233, 239, 248, 0.74);
  border-right: 0;
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
}

.activityBrowsePage.activityBrowsePage--friends .activityFriendsWallDecor--heart::before {
  width: 14px;
  height: 11px;
  left: -10px;
  top: 2px;
  transform: rotate(-45deg);
}

.activityBrowsePage.activityBrowsePage--friends .activityFriendsWallDecor--heart::after {
  width: 14px;
  height: 11px;
  right: -1px;
  top: -9px;
  transform: rotate(45deg);
}

.activityBrowsePage.activityBrowsePage--friends .activityFriendsWallDecor--star {
  top: 52%;
  right: -2px;
  width: 26px;
  height: 26px;
  background: rgba(233, 239, 248, 0.64);
  clip-path: polygon(50% 0, 61% 34%, 97% 35%, 68% 56%, 79% 91%, 50% 70%, 21% 91%, 32% 56%, 3% 35%, 39% 34%);
  transform: rotate(12deg);
}

.activityBrowsePage.activityBrowsePage--friends .activityFriendsWallDecor--scribble {
  top: 32%;
  right: -7px;
  width: 34px;
  height: 22px;
  border-top: 2px solid rgba(233, 239, 248, 0.48);
  border-radius: 50%;
  transform: rotate(-16deg);
}

.activityBrowsePage.activityBrowsePage--friends .activityFriendsWallDecor--scribble::before,
.activityBrowsePage.activityBrowsePage--friends .activityFriendsWallDecor--scribble::after {
  content: "";
  position: absolute;
  left: 5px;
  width: 25px;
  height: 12px;
  border-top: 2px solid rgba(233, 239, 248, 0.38);
  border-radius: 50%;
}

.activityBrowsePage.activityBrowsePage--friends .activityFriendsWallDecor--scribble::before {
  top: 5px;
}

.activityBrowsePage.activityBrowsePage--friends .activityFriendsWallDecor--scribble::after {
  top: 10px;
  width: 18px;
}

.activityBrowsePage.activityBrowsePage--friends .activityFriendsWallDecor--flower {
  top: 48%;
  left: 5%;
  width: 32px;
  height: 42px;
  opacity: 0.48;
  border-left: 2px solid rgba(233, 239, 248, 0.62);
  border-bottom: 2px solid rgba(233, 239, 248, 0.54);
  border-radius: 0 0 0 18px;
  transform: rotate(8deg);
}

.activityBrowsePage.activityBrowsePage--friends .activityFriendsWallDecor--flower::before,
.activityBrowsePage.activityBrowsePage--friends .activityFriendsWallDecor--flower::after {
  content: "";
  position: absolute;
  top: -5px;
  left: -10px;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(233, 239, 248, 0.7);
  border-radius: 999px 999px 999px 2px;
  transform: rotate(-24deg);
}

.activityBrowsePage.activityBrowsePage--friends .activityFriendsWallDecor--flower::after {
  top: 3px;
  left: -19px;
  width: 12px;
  height: 14px;
  opacity: 0.75;
  transform: rotate(22deg);
}

.activityBrowsePage.activityBrowsePage--friends .activityFriendsFeedCard {
  --wall-col: 1;
  --wall-row: 1;
  --wall-span: 49;
  --wall-lane: 0;
  --wall-x: 0px;
  --wall-y: 0px;
  --wall-tilt: 0deg;
  --wall-label-x: 3px;
  --wall-pin-x: 50%;
  --wall-tape-x: 42%;
  --wall-tape-tilt: -3deg;
  --wall-pin-rgb: 122, 212, 255;
  --wall-z: 1;
  --wall-shadow-y: 20px;
  --wall-shadow-blur: 32px;
  --wall-shadow-alpha: 0.28;
  position: relative;
  grid-column: var(--wall-col) / span 8;
  grid-row: var(--wall-row) / span var(--wall-span);
  z-index: var(--wall-z);
  width: 100%;
  min-width: 0;
  margin: 0;
  padding-top: 14px;
  align-self: start;
  scroll-snap-align: start;
  filter: drop-shadow(0 var(--wall-shadow-y) var(--wall-shadow-blur) rgba(0, 0, 0, var(--wall-shadow-alpha)));
  transform: translate3d(var(--wall-x), var(--wall-y), 0) rotate(var(--wall-tilt));
  transform-origin: center 22px;
  transition: transform 160ms ease, filter 160ms ease;
}

.activityBrowsePage.activityBrowsePage--friends .activityFriendsFeedCard::before {
  content: "";
  position: absolute;
  top: 15px;
  left: var(--wall-pin-x);
  z-index: 5;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  pointer-events: none;
  background: rgb(var(--wall-pin-rgb));
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.08),
    0 5px 10px rgba(0, 0, 0, 0.42),
    0 0 14px rgba(var(--wall-pin-rgb), 0.28);
  transform: translate(-50%, -50%);
}

.activityBrowsePage.activityBrowsePage--friends .activityFriendsFeedCard::after {
  content: "";
  position: absolute;
  top: 8px;
  left: var(--wall-tape-x);
  z-index: 3;
  width: 30px;
  height: 10px;
  border-radius: 2px;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(225, 235, 247, 0.1), rgba(225, 235, 247, 0.28), rgba(225, 235, 247, 0.12));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.24);
  opacity: 0.58;
  transform: translateX(-50%) rotate(var(--wall-tape-tilt));
}

@media (hover: hover) and (pointer: fine) {
  .activityBrowsePage.activityBrowsePage--friends .activityFriendsFeedCard:hover {
    z-index: 12;
    filter: drop-shadow(0 24px 44px rgba(0, 0, 0, 0.38));
    transform: translate3d(var(--wall-x), -2px, 0) rotate(var(--wall-tilt));
  }
}

.activityBrowsePage.activityBrowsePage--friends .activityFriendsActor {
  position: absolute;
  top: 0;
  left: calc(var(--wall-label-x) - 1px);
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: calc(100% - var(--wall-label-x) - 4px);
  min-width: 0;
  padding: 1px 6px 1px 2px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(2, 4, 8, 0.74);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.activityBrowsePage.activityBrowsePage--friends .activityFriendsAvatar {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(248, 251, 255, 0.9);
  font-size: 7px;
  font-weight: 780;
}

.activityBrowsePage.activityBrowsePage--friends .activityFriendsAvatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.activityBrowsePage.activityBrowsePage--friends .activityFriendsActorText {
  min-width: 0;
  display: block;
}

.activityBrowsePage.activityBrowsePage--friends .activityFriendsActorName {
  display: block;
  overflow: hidden;
  color: rgba(248, 251, 255, 0.92);
  font-size: 8.5px;
  font-weight: 760;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activityBrowsePage.activityBrowsePage--friends .activityFriendsFeedCard .activityPrimeCard--activity {
  --normal-event-card-radius: 7px;
  --normal-event-card-ratio: 1 / 1.32;
  width: 100%;
  min-height: 0;
  position: relative;
  z-index: 1;
  border: 1px solid rgba(180, 192, 210, 0.23);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 12px 24px rgba(0, 0, 0, 0.28);
}

.activityBrowsePage.activityBrowsePage--friends .activityFriendsFeedCard .activityPrimeCard--activity.has-image.is-rail-card,
.activityBrowsePage.activityBrowsePage--friends .activityFriendsFeedCard .activityPrimeCard--activity.has-fallback.is-rail-card {
  min-height: 0;
}

.activityBrowsePage.activityBrowsePage--friends .activityFriendsFeedCard .activityPrimeCard--activity .activityPrimeVisualOverlay {
  padding: 7px;
}

.activityBrowsePage.activityBrowsePage--friends .activityFriendsFeedCard .activityPrimeCard--activity .activityPrimeBody {
  gap: 1px;
  padding: 34px 8px 7px;
  background: linear-gradient(180deg, rgba(5, 8, 13, 0), rgba(5, 8, 13, 0.76) 38%, rgba(5, 8, 13, 0.98) 100%);
}

.activityBrowsePage.activityBrowsePage--friends .activityFriendsFeedCard .activityPrimeCard--activity .activityPrimeCardTitle {
  min-height: 0;
  font-size: 11.5px;
  font-weight: 560;
  line-height: 1.08;
  color: rgba(232, 240, 250, 0.86);
}

.activityBrowsePage.activityBrowsePage--friends .activityFriendsFeedCard .activityPrimeCard--activity .activityPrimeCardMeta {
  min-height: 9px;
  font-size: 7.5px;
  line-height: 1.08;
  color: rgba(185, 198, 214, 0.7);
}

.activityBrowsePage.activityBrowsePage--friends .activityFriendsFeedCard .activityPrimeCard--activity .activityPrimeMetaIcon svg,
.activityBrowsePage.activityBrowsePage--friends .activityFriendsFeedCard .activityPrimeCard--activity .activityPrimeBadgeIcon svg {
  width: 8px;
  height: 8px;
}

.activityBrowsePage.activityBrowsePage--friends .activityFriendsFeedCard .activityPrimeCard--activity .activityPrimeBadge {
  min-height: 17px;
  padding: 0 6px;
  gap: 3px;
  font-size: 7px;
}

.activityBrowsePage.activityBrowsePage--friends .activityFriendsFeedCard .activityPrimeCard--activity .activityPrimeChipRow {
  gap: 2px;
}

.activityBrowsePage.activityBrowsePage--friends .activityFriendsFeedCard .activityPrimeCard--activity .activityPrimeChipRow .activityPrimeSignalPill,
.activityBrowsePage.activityBrowsePage--friends .activityFriendsFeedCard .activityPrimeCard--activity .activityPrimeChipRow .activityStatusPill {
  min-height: 14px;
  padding: 0 4px;
  font-size: 6.5px;
}

.activityBrowsePage.activityBrowsePage--friends .activityFriendsFeedCard--post .profilePostGridItem {
  --profile-post-card-ratio: 1 / 1.32;
  --profile-post-card-radius: 7px;
  position: relative;
  z-index: 1;
  width: 100%;
}

.activityBrowsePage.activityBrowsePage--friends .activityFriendsFeedCard--post .profilePostThumbButton {
  aspect-ratio: var(--profile-post-card-ratio);
  border: 1px solid rgba(180, 192, 210, 0.23);
  border-radius: var(--profile-post-card-radius);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 12px 24px rgba(0, 0, 0, 0.28);
}

@media (min-width: 640px) {
  .activityBrowsePage.activityBrowsePage--friends .activityPrimeTrack.is-rail.activityPrimeTrack--activityRail {
    grid-auto-columns: minmax(260px, 36vw);
  }

  .activityBrowsePage.activityBrowsePage--friends .activityPrimeTrack.is-rail.activityPrimeTrack--wideEvents,
  .activityBrowsePage.activityBrowsePage--friends .activityDiscoverySection--happeningSoon .activityPrimeTrack.is-rail.activityPrimeTrack--wideEvents {
    grid-auto-columns: minmax(340px, 42vw);
  }

  .activityBrowsePage.activityBrowsePage--friends .activityPrimeCard--activity.has-image.is-rail-card,
  .activityBrowsePage.activityBrowsePage--friends .activityPrimeCard--activity.has-fallback.is-rail-card {
    min-height: 360px;
  }

  .activityBrowsePage.activityBrowsePage--friends .activityPrimeTrack--postsRail .profilePostGridItem {
    width: min(300px, 34vw);
  }

  .activityBrowsePage.activityBrowsePage--friends .activityFriendsSurface {
    max-width: 620px;
    margin: 0 auto;
  }

  .activityBrowsePage.activityBrowsePage--friends .activityFriendsRailSection {
    width: 100%;
  }

  .activityBrowsePage.activityBrowsePage--friends .activityFriendsFeedCard .activityPrimeCard--activity {
    min-height: 0;
  }
}

.cityPage {
  overflow: hidden;
}

.cityPage {
  --city-surface: rgba(9, 13, 20, 0.92);
  --city-surface-soft: rgba(18, 24, 36, 0.78);
  --city-line: rgba(255, 255, 255, 0.08);
  --city-line-strong: rgba(255, 255, 255, 0.14);
  --city-glow: rgba(91, 166, 255, 0.24);
  --city-shadow: 0 30px 60px rgba(0, 0, 0, 0.34);
  --city-top-safe: calc(env(safe-area-inset-top) + 8px);
}

.cityPage .app-shell,
.cityPage .appShell {
  margin: 0 auto;
  min-height: 100vh;
  height: 100vh;
  min-height: 100dvh;
  height: 100dvh;
  overflow: hidden;
  border-radius: 0;
  background:
    radial-gradient(circle at 20% 0%, rgba(36, 77, 133, 0.24), transparent 34%),
    radial-gradient(circle at 100% 18%, rgba(13, 70, 92, 0.22), transparent 32%),
    #05080d;
}

.cityPage .app-content,
.cityPage .appContent {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-bottom: 0;
  overflow: hidden;
  background: transparent;
}

.cityTopBar {
  position: relative;
  z-index: 40;
  flex-shrink: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "brand actions"
    "search search"
    "utility utility";
  gap: 10px 12px;
  padding: calc(var(--city-top-safe) + 2px) 14px 10px;
  background:
    linear-gradient(180deg, rgba(5, 8, 13, 0.96), rgba(5, 8, 13, 0.76) 86%, rgba(5, 8, 13, 0));
  backdrop-filter: blur(20px);
}

.cityTopBar--immersive {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: calc(var(--city-top-safe) + 4px) 14px 8px;
  grid-template: none;
}

.cityTopBar--immersive .cityTopSearch {
  display: none;
}

.cityTopBarMain {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.cityTopBarMain .cityFeedIndex {
  flex: 0 0 auto;
  text-align: right;
}

.cityTopBarMain .headerActions {
  flex: 0 0 auto;
}

.cityFeedTabRow {
  width: 100%;
}

.cityFeedTabRow .topTabs {
  width: 100%;
  justify-content: flex-start;
  gap: 6px;
}

.cityFeedTabRow .topTabsLink {
  min-height: 30px;
  padding: 0 12px;
  font-size: 10px;
  letter-spacing: 0.14em;
  border-color: rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.03);
}

.cityTopAuthRow {
  display: flex;
  justify-content: flex-end;
}

.cityTopLoginBtn {
  padding: 8px 14px;
  font-size: 12px;
}

.cityTopBrand {
  grid-area: brand;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.cityTopTitle {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(232, 240, 252, 0.68);
}

.cityTopBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(122, 212, 255, 0.3);
  background: rgba(122, 212, 255, 0.1);
  color: rgba(244, 249, 255, 0.96);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.cityTopBar .headerActions {
  grid-area: actions;
  justify-self: end;
  align-self: start;
}

.cityTopSearch {
  grid-area: search;
  position: relative;
}

.cityTopSearch input {
  width: 100%;
  min-height: 48px;
  padding: 0 16px 0 42px;
  border-radius: 999px;
  border: 1px solid var(--city-line);
  background: rgba(10, 14, 22, 0.94);
  color: rgba(245, 250, 255, 0.96);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.cityTopSearch input::placeholder {
  color: rgba(219, 229, 242, 0.46);
}

.cityTopSearchAuth {
  display: flex;
  align-items: center;
}

.citySearchIcon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(221, 230, 242, 0.52);
  pointer-events: none;
}

.citySearchIcon svg {
  width: 16px;
  height: 16px;
  display: block;
}

.city-search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  max-height: min(44vh, 320px);
  overflow-y: auto;
  border-radius: 18px;
  border: 1px solid var(--city-line);
  background: rgba(9, 12, 18, 0.98);
  box-shadow: 0 24px 44px rgba(0, 0, 0, 0.36);
  backdrop-filter: blur(18px);
  z-index: 70;
}

.city-search-row {
  display: block;
  padding: 12px 14px;
  text-decoration: none;
  color: rgba(245, 250, 255, 0.96);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.city-search-row:last-child {
  border-bottom: none;
}

.city-search-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.city-search-name {
  font-size: 14px;
  font-weight: 700;
}

.city-search-meta {
  margin-top: 4px;
  font-size: 12px;
  color: rgba(205, 218, 232, 0.72);
}

.city-search-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(122, 212, 255, 0.24);
  background: rgba(122, 212, 255, 0.12);
  color: rgba(228, 245, 255, 0.94);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Activities: in-page grouped discovery search */
.activitySearchResultsPage {
  display: block;
  padding: 8px 0 28px;
}

.activitySearchResultsPage.hidden {
  display: none !important;
}

.activitySearchResultsPage.activity-search-results--grouped {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.activitySearchResultsPage.activity-search-results--loading {
  display: block;
}

/* Holds a single spinner now rather than a stack of skeleton rows, so the card
   chrome that framed those rows would just be an empty box around it. */
.activitySearchLoadingPanel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  margin: 8px 0 0;
  padding: 14px;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

.activitySearchLoadingRow,
.activitySearchLoadingRail {
  min-width: 0;
}

.activitySearchLoadingRow {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 58px;
}

.activitySearchLoadingRow--person {
  padding-bottom: 2px;
}

.activitySearchLoadingAvatar,
.activitySearchLoadingThumb,
.activitySearchLoadingLine,
.activitySearchLoadingCard,
.neoSkeleton,
.neoSkeleton--feedCard,
.neoSkeleton--line,
.neoSkeleton--avatar,
.neoSkeleton--thumb,
.neoSkeleton--icon,
.neoSkeleton--railCard,
.neoSkeleton--profileTile,
.neoSkeleton--messageRow,
.neoSkeleton--mapSheet,
.profileGridSkeleton,
.dmMessageRow--skeleton,
.activitySkeletonHeading,
.activitySkeletonCard--portrait,
.activitySkeletonCard--square,
.activitySkeletonFriendsMedia,
.activitySkeletonExploreTile {
  position: relative;
  overflow: hidden;
  border-radius: var(--skeleton-local-radius, var(--skeleton-radius-medium));
  background: var(--skeleton-fill);
  color: transparent;
  opacity: var(--skeleton-surface-opacity);
}

.activitySearchLoadingAvatar,
.activitySearchLoadingThumb {
  width: 42px;
  height: 42px;
  --skeleton-local-radius: var(--skeleton-radius-pill);
}

.activitySearchLoadingThumb {
  --skeleton-local-radius: var(--skeleton-radius-medium);
}

.activitySearchLoadingText {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.activitySearchLoadingLine {
  display: block;
  height: 11px;
  --skeleton-local-radius: var(--skeleton-radius-pill);
}

.activitySearchLoadingLine.is-wide {
  width: min(72%, 320px);
}

.activitySearchLoadingLine.is-mid {
  width: min(54%, 240px);
}

.activitySearchLoadingLine.is-short {
  width: min(38%, 170px);
}

.activitySearchLoadingRail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.activitySearchLoadingCard {
  --skeleton-local-radius: var(--skeleton-radius-large);
  display: block;
  min-height: 132px;
}

.activitySearchLoadingAvatar::before,
.activitySearchLoadingThumb::before,
.activitySearchLoadingLine::before,
.activitySearchLoadingCard::before,
.neoSkeleton--feedCard::before,
.neoSkeleton--line::before,
.neoSkeleton--avatar::before,
.neoSkeleton--thumb::before,
.neoSkeleton--icon::before,
.neoSkeleton--railCard::before,
.neoSkeleton--profileTile::before,
.neoSkeleton--messageRow::before,
.neoSkeleton--mapSheet::before,
.dmMessageRow--skeleton::before,
.instantKnownProfileBlocks span:not(.neoSkeleton)::before,
.activitySkeletonHeading::before,
.activitySkeletonCard--portrait::before,
.activitySkeletonCard--square::before,
.activitySkeletonFriendsMedia::before,
.activitySkeletonExploreTile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--skeleton-highlight);
  transform: translateX(-100%);
  opacity: var(--skeleton-highlight-opacity);
  animation: neocitySkeletonSweep var(--skeleton-duration) var(--skeleton-easing) infinite;
  pointer-events: none;
}

.neoSkeleton--feedCard {
  --skeleton-local-radius: 0px;
  min-height: min(78vh, 720px);
}

.neoSkeleton--line {
  --skeleton-local-radius: var(--skeleton-radius-pill);
  display: block;
  height: 11px;
}

.neoSkeleton--lineWide {
  width: min(72%, 320px);
}

.neoSkeleton--lineMid {
  width: min(54%, 240px);
}

.neoSkeleton--lineShort {
  width: min(38%, 170px);
}

.neoSkeleton--avatar,
.neoSkeleton--thumb {
  width: 42px;
  height: 42px;
}

.neoSkeleton--avatar {
  --skeleton-local-radius: var(--skeleton-radius-pill);
}

.neoSkeleton--thumb {
  --skeleton-local-radius: var(--skeleton-radius-medium);
}

.neoSkeleton--icon {
  --skeleton-local-radius: var(--skeleton-radius-pill);
  width: 38px;
  height: 38px;
  min-width: 38px;
  display: inline-block;
}

.neoSkeleton--railCard {
  min-height: 180px;
}

.neoSkeleton--profileTile {
  aspect-ratio: 1;
}

.neoSkeleton--messageRow {
  min-height: 64px;
}

.neoSkeleton--mapSheet {
  min-height: 260px;
}

.neoSkeletonRow {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 58px;
}

.neoSkeletonText {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.neoSkeletonRail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.instantKnownProfileRefresh .neoSkeleton--line,
.postViewerInstantRefresh.neoSkeleton {
  width: 84px;
}

.postViewerInstantRefresh.neoSkeleton {
  display: block;
}

.neoSkeletonGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
}

.neoSkeletonMediaParts {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.neoSkeletonMediaParts .skeletonPostMedia,
.neoSkeletonMediaParts .skeletonPostRail,
.neoSkeletonMediaParts .skeletonPostText {
  display: block;
}

.activitySearchResultsState {
  margin: 8px 0 0;
  padding: 22px 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(205, 218, 232, 0.78);
  font-size: 14px;
  font-weight: 650;
  text-align: center;
}

.activitySearchResultsState.is-error {
  border-color: rgba(248, 113, 113, 0.24);
  background: rgba(248, 113, 113, 0.08);
  color: rgba(255, 226, 226, 0.92);
}

@media (max-width: 520px) {
  .activitySearchLoadingPanel {
    padding: 12px;
  }

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

  .activitySearchLoadingRail .activitySearchLoadingCard:nth-child(3) {
    display: none;
  }

  .activitySearchLoadingCard {
    min-height: 118px;
  }

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

  .neoSkeletonRail > .neoSkeleton:nth-child(3) {
    display: none;
  }
}

body.dmChatScreen .dmMessageRow.dmMessageRow--skeleton {
  width: min(72%, 360px);
  max-width: min(72%, 360px);
  display: block;
  flex: 0 0 auto;
  align-self: flex-start;
}

body.dmChatScreen .dmMessageRow.dmMessageRow--skeleton.mine,
body.dmChatScreen .dmMessageRow.dmMessageRow--skeleton.player,
body.dmChatScreen .dmMessageRow.dmMessageRow--skeleton:nth-of-type(2n) {
  align-self: flex-end;
  margin-left: auto;
}

@media (prefers-reduced-motion: reduce) {
  .is-reply-highlight .dmBubble {
    animation: none !important;
    outline: 2px solid #7ad4ff;
  }

  .neoSkeleton::before,
  .skeletonPostCard::before,
  .notificationSkeletonRow::before,
  .messageSkeletonRow::before,
  .activityRailSkeleton::before,
  .profileGridSkeleton::before,
  .mapSheetSkeleton::before,
  .adminTableSkeleton::before,
  .activitySearchLoadingAvatar::before,
  .activitySearchLoadingThumb::before,
  .activitySearchLoadingLine::before,
  .activitySearchLoadingCard::before,
  .neoSkeleton--feedCard::before,
  .neoSkeleton--line::before,
  .neoSkeleton--avatar::before,
  .neoSkeleton--thumb::before,
  .neoSkeleton--icon::before,
  .neoSkeleton--railCard::before,
  .neoSkeleton--profileTile::before,
  .neoSkeleton--messageRow::before,
  .neoSkeleton--mapSheet::before,
  .dmMessageRow--skeleton::before,
  .instantKnownProfileBlocks span:not(.neoSkeleton)::before,
  .activitySkeletonHeading::before,
  .activitySkeletonCard--portrait::before,
  .activitySkeletonCard--square::before,
  .activitySkeletonFriendsMedia::before,
  .activitySkeletonExploreTile::before,
  .instantFeedSkeletonCard::before,
  .instantFeedSkeletonMedia::before,
  .instantFeedSkeletonRail::before,
  .instantFeedSkeletonLine::before {
    animation: none !important;
    opacity: 0 !important;
  }

  .instantNavSkeletonBlock,
  .instantKnownProfileRefresh span:not(.neoSkeleton),
  .instantKnownProfileBlocks span:not(.neoSkeleton),
  .appRecoverySpinner {
    animation: none !important;
  }
}

.activitySearchInner.cityTopSearch:has(.activitySearchClear) input {
  padding-right: 44px;
}

.activitySearchClear {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  text-decoration: none;
  font-size: 20px;
  line-height: 1;
  color: rgba(200, 214, 232, 0.72);
  z-index: 5;
}

.activitySearchClear:hover,
.activitySearchClear:focus-visible {
  color: rgba(245, 250, 255, 0.96);
  background: rgba(255, 255, 255, 0.06);
}

.activityDiscoverySearchGroup {
  padding: 0 4px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.activityDiscoverySearchGroup:last-child {
  border-bottom: none;
  padding-bottom: 4px;
}

.activityDiscoverySearchGroupTitle {
  margin: 0 10px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(160, 174, 192, 0.72);
}

.activityDiscoveryPeopleList {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 6px;
}

.activityDiscoveryPeopleRow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px;
  border-radius: 14px;
  text-decoration: none;
  color: rgba(245, 250, 255, 0.96);
  border: 1px solid transparent;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.activityDiscoveryPeopleRow:hover,
.activityDiscoveryPeopleRow:focus-visible {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(87, 170, 255, 0.2);
  outline: none;
}

.activityDiscoveryAvatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.06);
}

.activityDiscoveryAvatar--img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.activityDiscoveryAvatar--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: rgba(228, 240, 255, 0.88);
}

.activityDiscoveryPeopleText {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.activityDiscoveryPeopleName {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}

.activityDiscoveryPeopleMeta {
  font-size: 12px;
  color: rgba(205, 218, 232, 0.72);
}

.activityDiscoveryPostList {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 6px;
}

.activityDiscoveryPostList--textOnly {
  margin-top: 10px;
}

.activityDiscoveryPostCardRail {
  align-items: stretch;
}

.activityDiscoveryPostCard .activityPrimeVisualOverlay {
  justify-content: space-between;
  gap: 8px;
}

.activityDiscoveryPostCard .activityPrimeCardMeta {
  min-height: auto;
}

.activityDiscoveryPostCard .activityDiscoveryPostMediaStrip,
.activityDiscoveryPostCard .profilePostThumbSlide,
.activityDiscoveryPostCard .profilePostThumbMedia {
  width: 100%;
  height: 100%;
  min-height: 100%;
}

.activityDiscoveryPostCard .profilePostThumbMedia {
  display: block;
  object-fit: cover;
}

.activityDiscoveryPostCard .activityDiscoveryPostMediaDots {
  z-index: 4;
  bottom: 58px;
}

.activityDiscoveryPostVideoPill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(5, 8, 12, 0.45);
  color: rgba(245, 250, 255, 0.92);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
}

.activityDiscoveryPostRow {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 14px;
  text-decoration: none;
  color: rgba(245, 250, 255, 0.96);
  border: 1px solid transparent;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.activityDiscoveryPostRow:hover,
.activityDiscoveryPostRow:focus-visible {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(87, 170, 255, 0.2);
  outline: none;
}

.activityDiscoveryPostThumb {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  flex-shrink: 0;
  overflow: hidden;
  background: rgba(8, 12, 20, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.activityDiscoveryPostThumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.activityDiscoveryPostThumb--video {
  position: relative;
}

.activityDiscoveryPostThumb--video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.35));
  pointer-events: none;
}

.activityDiscoveryPostThumb--empty {
  background:
    linear-gradient(135deg, rgba(122, 212, 255, 0.12), rgba(163, 115, 255, 0.1));
}

.activityDiscoveryPostText {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
}

.activityDiscoveryPostCaption {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: rgba(245, 250, 255, 0.94);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.activityDiscoveryPostAuthor {
  font-size: 11px;
  color: rgba(205, 218, 232, 0.65);
}

.activityDiscoveryBrowseShell {
  padding: 8px 0 24px;
}

.activityDiscoveryBrowseHeading {
  margin: 0 4px 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(160, 174, 192, 0.85);
}

.activityDiscoveryPeopleList--browse {
  padding: 0 2px;
}

.activityDiscoveryPostGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 0 2px 8px;
}

@media (min-width: 520px) {
  .activityDiscoveryPostGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.activityDiscoverySearchRail {
  display: flex;
  flex-direction: row;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 8px 10px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.activityDiscoverySearchRail .activityPrimeCard--discoveryInline {
  flex: 0 0 auto;
  width: min(240px, 78vw);
  max-width: 260px;
  scroll-snap-align: start;
}

.activitySearchResultsPage .activityDiscoverySearchRail .normalEventCard.activityPrimeCard--discoveryInline,
.activitySearchResultsPage .activityDiscoverySearchRail .activityDiscoveryPostCard.activityPrimeCard--discoveryInline {
  width: min(154px, 45vw);
  max-width: none;
}

.activitySearchResultsPage .activityDiscoverySearchRail .normalEventCard.activityPrimeCard--activity.activityPrimeCard--discoveryInline,
.activitySearchResultsPage .activityDiscoverySearchRail .activityDiscoveryPostCard.activityPrimeCard--activity.activityPrimeCard--discoveryInline {
  --normal-event-card-radius: 18px;
  --normal-event-card-ratio: 1 / 1.57;
  min-height: 0;
  aspect-ratio: var(--normal-event-card-ratio);
  border-radius: var(--normal-event-card-radius);
}

@media (min-width: 640px) {
  .activitySearchResultsPage .activityDiscoverySearchRail .normalEventCard.activityPrimeCard--discoveryInline,
  .activitySearchResultsPage .activityDiscoverySearchRail .activityDiscoveryPostCard.activityPrimeCard--discoveryInline {
    width: min(178px, 27vw);
  }
}

.activityPrimeTrack--postsRail {
  display: flex;
  flex-direction: row;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 8px 10px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.activityPrimeTrack--postsRail .profilePostGridItem {
  flex: 0 0 auto;
  width: min(154px, 45vw);
  max-width: none;
  scroll-snap-align: start;
}

.activityBrowsePage:not(.activityBrowsePage--explore):not(.activityBrowsePage--friends) .activityPrimeTrack--postsRail,
.activityBrowsePage:not(.activityBrowsePage--explore):not(.activityBrowsePage--friends) .activityDiscoveryPostPager {
  --activity-main-post-page-width: min(100vw, var(--page-max, 480px));
  width: var(--activity-main-post-page-width);
  max-width: var(--activity-main-post-page-width);
  margin-inline: -14px;
  padding: 0 0 4px;
  scroll-padding-inline: 0;
  scroll-snap-type: x mandatory;
}

.activityBrowsePage:not(.activityBrowsePage--explore):not(.activityBrowsePage--friends) .activityPrimeTrack--postsRail {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0;
  overflow-x: auto;
}

.activityBrowsePage:not(.activityBrowsePage--explore):not(.activityBrowsePage--friends) .activityDiscoveryPostDenseGrid {
  display: flex;
  flex-direction: row;
  gap: 0;
  width: auto;
}

.activityBrowsePage:not(.activityBrowsePage--explore):not(.activityBrowsePage--friends) .activityPostRailPage.activityMainPostTileGrid {
  flex: 0 0 var(--activity-main-post-page-width);
  width: var(--activity-main-post-page-width);
  max-width: var(--activity-main-post-page-width);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, auto);
  grid-auto-rows: auto;
  align-content: start;
  justify-content: start;
  gap: 7px;
  min-height: 0;
  height: auto;
  margin: 0;
  padding: 0 14px 2px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.activityBrowsePage:not(.activityBrowsePage--explore):not(.activityBrowsePage--friends) .activityPostRailPage .profilePostGridItem {
  flex: initial;
  width: 100%;
  max-width: none;
  min-width: 0;
  --profile-post-card-ratio: 1 / 1;
  --profile-post-card-radius: 9px;
  scroll-snap-align: none;
}

.activityBrowsePage:not(.activityBrowsePage--explore):not(.activityBrowsePage--friends) .activityPostRailPage .profilePostThumbButton {
  aspect-ratio: 1 / 1;
  border-radius: 9px;
}

.activityBrowsePage:not(.activityBrowsePage--explore):not(.activityBrowsePage--friends) .activityPostRailPage .profilePostGridItem--activityMainTile .profilePostThumbButton {
  box-shadow: none;
  background: #05080d;
}

.activityBrowsePage:not(.activityBrowsePage--explore):not(.activityBrowsePage--friends) .activityPostRailPage .profilePostGridItem--activityMainTile .profilePostThumbShade {
  opacity: 0;
  background: none;
}

.profilePostThumbTitle {
  display: none;
  pointer-events: none;
}

.activityBrowsePage:not(.activityBrowsePage--explore):not(.activityBrowsePage--friends) .activityPostRailPage .profilePostGridItem--activityMainTile .profilePostThumbTitle {
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 8px;
  z-index: 2;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.96);
  font-size: 12.5px;
  font-weight: 780;
  line-height: 1.08;
  letter-spacing: 0;
  text-align: left;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.72);
  pointer-events: none;
}

@media (min-width: 640px) {
  .activityPrimeTrack--postsRail .profilePostGridItem {
    width: min(178px, 27vw);
  }
}

.activityPrimeTrack--peopleRail {
  display: flex;
  flex-direction: row;
  gap: 14px;
  overflow-x: auto;
  padding: 6px 8px 12px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.activityDiscoveryPeopleCardRail {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: min(92px, 26vw);
  max-width: 104px;
  text-decoration: none;
  color: inherit;
  scroll-snap-align: start;
}

.activityDiscoveryAvatar--rail {
  width: 56px;
  height: 56px;
}

.activityDiscoveryPeopleCardRailName {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: rgba(226, 232, 240, 0.95);
}

.activityBrowsePage:not(.activityBrowsePage--explore):not(.activityBrowsePage--friends) .activityPeopleGroupedRail {
  display: flex;
  flex-direction: column;
  gap: 13px;
  min-width: 0;
  padding-bottom: 2px;
}

.activityBrowsePage:not(.activityBrowsePage--explore):not(.activityBrowsePage--friends) .activityPeopleGroup {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.activityBrowsePage:not(.activityBrowsePage--explore):not(.activityBrowsePage--friends) .activityPeopleGroupTitle {
  margin: 0;
  padding: 0 1px;
  font-size: 13px;
  font-weight: 680;
  line-height: 1.2;
  letter-spacing: 0;
  color: rgba(232, 240, 250, 0.72);
}

.activityBrowsePage:not(.activityBrowsePage--explore):not(.activityBrowsePage--friends) .activityPeopleGroupTrack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 10px;
  row-gap: 8px;
  min-width: 0;
}

.activityBrowsePage:not(.activityBrowsePage--explore):not(.activityBrowsePage--friends) .activityPeopleGroupTrack .activityDiscoveryPeopleCardRail {
  width: 100%;
  max-width: none;
  min-height: 66px;
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 3px 4px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  scroll-snap-align: none;
}

.activityBrowsePage:not(.activityBrowsePage--explore):not(.activityBrowsePage--friends) .activityPeopleGroupTrack .activityDiscoveryPeopleCardRail:hover,
.activityBrowsePage:not(.activityBrowsePage--explore):not(.activityBrowsePage--friends) .activityPeopleGroupTrack .activityDiscoveryPeopleCardRail:focus-visible {
  background: rgba(255, 255, 255, 0.036);
  border-color: rgba(122, 212, 255, 0.14);
}

.activityBrowsePage:not(.activityBrowsePage--explore):not(.activityBrowsePage--friends) .activityPeopleGroupTrack .activityDiscoveryAvatar--rail {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  border-color: rgba(255, 255, 255, 0.12);
}

.activityBrowsePage:not(.activityBrowsePage--explore):not(.activityBrowsePage--friends) .activityPeopleGroupTrack .activityDiscoveryAvatar--rail.activityDiscoveryAvatar--fallback {
  font-size: 16px;
}

.activityBrowsePage:not(.activityBrowsePage--explore):not(.activityBrowsePage--friends) .activityPeopleGroupTrack .activityDiscoveryPeopleCardRailText {
  gap: 1px;
}

.activityBrowsePage:not(.activityBrowsePage--explore):not(.activityBrowsePage--friends) .activityPeopleGroupTrack .activityDiscoveryPeopleCardRailName {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  text-align: left;
  font-size: 13px;
  font-weight: 720;
  line-height: 1.12;
  white-space: nowrap;
}

.activityBrowsePage:not(.activityBrowsePage--explore):not(.activityBrowsePage--friends) .activityPeopleGroupTrack .activityDiscoveryPeopleCardRailMeta {
  font-size: 10.5px;
  line-height: 1.18;
  color: rgba(185, 198, 214, 0.7);
}

.activityBrowsePage:not(.activityBrowsePage--explore):not(.activityBrowsePage--friends) .activityPrimeTrack.is-rail.activityPrimeTrack--peopleRail {
  --activity-main-people-page-width: min(100vw, var(--page-max, 480px));
  width: var(--activity-main-people-page-width);
  max-width: var(--activity-main-people-page-width);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0;
  margin-inline: -14px;
  padding: 0 0 5px;
  overflow-x: auto;
  scroll-padding-inline: 0;
  scroll-snap-type: x mandatory;
}

.activityBrowsePage:not(.activityBrowsePage--explore):not(.activityBrowsePage--friends) .activityPeopleRailPage {
  flex: 0 0 var(--activity-main-people-page-width);
  width: var(--activity-main-people-page-width);
  max-width: var(--activity-main-people-page-width);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(66px, auto);
  column-gap: 10px;
  row-gap: 8px;
  padding: 0 14px 2px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.activityBrowsePage:not(.activityBrowsePage--explore):not(.activityBrowsePage--friends) .activityPeopleRailPage .activityDiscoveryPeopleCardRail {
  width: 100%;
  max-width: none;
  min-height: 66px;
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 3px 4px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  scroll-snap-align: none;
}

.activityBrowsePage:not(.activityBrowsePage--explore):not(.activityBrowsePage--friends) .activityPeopleRailPage .activityDiscoveryPeopleCardRail:hover,
.activityBrowsePage:not(.activityBrowsePage--explore):not(.activityBrowsePage--friends) .activityPeopleRailPage .activityDiscoveryPeopleCardRail:focus-visible {
  background: rgba(255, 255, 255, 0.036);
  border-color: rgba(122, 212, 255, 0.14);
}

.activityBrowsePage:not(.activityBrowsePage--explore):not(.activityBrowsePage--friends) .activityPeopleRailPage .activityDiscoveryAvatar--rail {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  border-color: rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)),
    rgba(8, 13, 20, 0.9);
  box-shadow: 0 0 0 1px rgba(122, 212, 255, 0.04);
}

.activityBrowsePage:not(.activityBrowsePage--explore):not(.activityBrowsePage--friends) .activityPeopleRailPage .activityDiscoveryAvatar--rail.activityDiscoveryAvatar--fallback {
  font-size: 16px;
}

.activityBrowsePage:not(.activityBrowsePage--explore):not(.activityBrowsePage--friends) .activityPeopleRailPage .activityDiscoveryPeopleCardRailText {
  gap: 1px;
}

.activityBrowsePage:not(.activityBrowsePage--explore):not(.activityBrowsePage--friends) .activityPeopleRailPage .activityDiscoveryPeopleCardRailName {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  text-align: left;
  font-size: 13px;
  font-weight: 720;
  line-height: 1.12;
  white-space: nowrap;
}

.activityDiscoveryPeopleCardRailNameText {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activityBrowsePage:not(.activityBrowsePage--explore):not(.activityBrowsePage--friends) .activityPeopleRailPage .activityDiscoveryPeopleCardRailMeta {
  font-size: 10.5px;
  line-height: 1.18;
  color: rgba(185, 198, 214, 0.7);
}

.activityDiscoveryPeopleVerifiedBadge {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  color: #06111c;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.18) 30%, transparent 31%),
    linear-gradient(135deg, #82e6ff, #57aaff 48%, #8a7dff);
  box-shadow: 0 0 12px rgba(87, 170, 255, 0.28);
}

.activityDiscoveryPeopleVerifiedBadge svg {
  width: 10px;
  height: 10px;
  display: block;
}

.activityPrimeCard--discoveryInline .activityPrimeVisual {
  aspect-ratio: 1.25 / 1;
}

.activityPrimeCard--discoveryInline .activityPrimeCardTitle {
  font-size: 14px;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cityTopUtility {
  grid-area: utility;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}

.topTabs {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.topTabs::-webkit-scrollbar {
  display: none;
}

.topTabsLink {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(228, 236, 245, 0.82);
  text-decoration: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.topTabsLink:hover,
.topTabsLink:focus-visible,
.topTabsLink.is-active {
  color: rgba(247, 251, 255, 0.98);
  border-color: rgba(87, 170, 255, 0.24);
  background: rgba(87, 170, 255, 0.12);
  text-decoration: none;
  outline: none;
}

.cityTopUtility .topTabs {
  flex: 1 1 auto;
}

.activityBrowsePage .activitySearchPanel--prime {
  padding: 8px 16px 10px;
}

.activitySearchFilterRow {
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 2px 14px 8px;
  flex-shrink: 0;
  position: relative;
  z-index: 4;
}

.activitySearchFilterRow--searchOnly {
  padding: calc(8px + env(safe-area-inset-top, 0px)) 14px 4px;
}

.activitySearchFilterRow .activitySearchPanel--inline {
  flex: 1;
  min-width: 0;
  padding: 0;
  margin: 0;
}

.activitySearchFilterRow--searchOnly .activitySearchPanel--inline {
  width: 100%;
}

.activitySearchFilterRowFiller {
  flex: 1;
  min-width: 0;
}

.activitySearchFilterRow .activityFilterPopoverRoot {
  flex-shrink: 0;
  align-self: center;
}

.activityBrowsePage .activitySearchFilterRow .activityPrimeFilterToggle {
  min-width: 40px;
  height: 38px;
}

.activitySearchFilterRow .activitySearchInner.cityTopSearch input {
  min-height: 38px;
  padding: 0 14px 0 38px;
  font-size: 14px;
}

.activitySearchFilterRow .citySearchIcon {
  left: 13px;
}

.activitySearchFilterRow .activitySearchClear {
  right: 11px;
}

.activitySearchFilterRow .activitySearchInner.cityTopSearch:has(.activitySearchClear) input {
  padding-right: 40px;
}

.activitySearchHeader {
  --top-utility-filter-edge-offset: calc(var(--top-content-left-icon-hitbox-inset) - 6px);
  --top-utility-hitbox-size: var(--top-icon-hitbox-size);
  --top-utility-icon-size: var(--top-icon-visible-size);
  position: sticky;
  top: 0;
  flex-shrink: 0;
  min-height: calc(56px + env(safe-area-inset-top, 0px));
  padding: calc(5px + env(safe-area-inset-top, 0px)) 14px 3px;
  z-index: 60;
  overflow: visible;
  background: var(--bg);
  border-bottom: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.activitySearchHeaderLayer {
  position: absolute;
  left: var(--top-content-left-icon-hitbox-inset);
  right: var(--top-content-right-icon-hitbox-inset);
  top: calc(5px + env(safe-area-inset-top, 0px));
  min-height: 46px;
  transition:
    opacity 220ms ease-in-out,
    transform 220ms ease-in-out;
  will-change: opacity, transform;
}

.activitySearchTabsLayer {
  display: grid;
  grid-template-columns: var(--top-utility-hitbox-size) minmax(0, 1fr) var(--top-utility-hitbox-size);
  align-items: center;
  z-index: 2;
  pointer-events: auto;
  opacity: 1;
  transform: translateX(0);
}

.activitySearchInputLayer {
  left: 64px;
  z-index: 3;
  opacity: 0;
  transform: translateX(28px);
  pointer-events: none;
}

.activitySearchHeader.is-searching .activitySearchTabsLayer {
  opacity: 0;
  transform: translateX(-28px);
  pointer-events: none;
}

.activitySearchHeader.is-searching .activitySearchInputLayer {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.activityHeaderTabs {
  grid-column: 2;
  justify-self: stretch;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(22px, 6vw, 34px);
  white-space: nowrap;
}

.activityHeaderTabs .activityUnifiedFilterLink--primary {
  min-height: 46px;
  padding: 0 3px 10px;
  color: rgba(224, 234, 247, 0.86);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17.5px;
  font-weight: 500;
  letter-spacing: 0;
}

.activityHeaderTabs .activityUnifiedFilterLink--primary::after {
  left: 1px;
  right: 1px;
  bottom: 7px;
  height: 2px;
  transform: scaleX(0.5);
}

.activityHeaderTabs .activityUnifiedFilterLink--primary.is-active {
  font-weight: 600;
}

.activityHeaderTabs .activityUnifiedFilterLink--primary.is-active::after {
  transform: scaleX(0.72);
}

.activityHeaderFilterButton,
.activityHeaderSearchButton {
  position: relative;
  width: var(--top-utility-hitbox-size);
  height: var(--top-utility-hitbox-size);
  min-width: var(--top-utility-hitbox-size);
  min-height: var(--top-utility-hitbox-size);
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(224, 234, 247, 0.86);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto;
  transition: color 150ms ease, background-color 150ms ease;
}

.activityHeaderFilterButton {
  position: absolute;
  left: var(--top-utility-filter-edge-offset);
  top: calc(5px + env(safe-area-inset-top, 0px));
  z-index: 8;
}

.activityHeaderFilterButton::before,
.activityHeaderSearchButton::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  pointer-events: auto;
}

.activityHeaderFilterButton::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 10px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #58aaff;
  opacity: 0;
  pointer-events: none;
}

.activityHeaderSearchButton {
  grid-column: 3;
  justify-self: end;
  z-index: 5;
}

.activityHeaderFilterButton svg,
.activityHeaderSearchButton svg {
  width: var(--top-utility-icon-size);
  height: var(--top-utility-icon-size);
  display: block;
  position: relative;
  z-index: 1;
  transform: none;
  pointer-events: none;
}

.activityHeaderFilterButton svg path {
  stroke-width: 1.85;
}

.activityHeaderFilterButton svg :is(path, circle, line),
.activityHeaderSearchButton svg :is(path, circle, line) {
  stroke-width: 1.85;
}

.activityHeaderFilterButton.is-open,
.activityHeaderFilterButton.has-active-filters {
  color: rgba(244, 247, 251, 0.94);
  background: transparent;
}

.activityHeaderFilterButton.has-active-filters::after {
  opacity: 1;
}

.activityHeaderFilterButton:hover,
.activityHeaderFilterButton:focus-visible {
  color: rgba(247, 251, 255, 0.98);
  background: transparent;
  outline: none;
}

.activityHeaderSearchButton:hover,
.activityHeaderSearchButton:focus-visible {
  color: rgba(247, 251, 255, 0.98);
  background: transparent;
  outline: none;
}

.activityFilterPanel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 10;
  padding: 0 var(--top-icon-visible-edge-inset) 8px;
  border-radius: 0;
  border: 0;
  background: var(--bg);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transform-origin: top center;
  transition:
    opacity 220ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.activityFilterPanel.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.activityFilterPanel .activityUnifiedFilterRow--secondary {
  padding: 0;
  gap: 18px;
  align-items: flex-end;
}

.activityFilterPanel .activityUnifiedFilterLink--secondary {
  min-height: 30px;
  padding: 0 1px 7px;
  border-radius: 0;
  background: transparent;
  color: rgba(205, 215, 229, 0.78);
  font-size: 12.5px;
  font-weight: 650;
}

.activityFilterPanel .activityUnifiedFilterLink--secondary::after {
  display: block;
}

.activityFilterPanel .activityUnifiedFilterLink--secondary:hover,
.activityFilterPanel .activityUnifiedFilterLink--secondary:focus-visible {
  background: transparent;
}

.activityFilterPanel .activityUnifiedFilterLink--secondary.is-active {
  color: rgba(248, 250, 255, 0.96);
  background: transparent;
}

.activityFilterPanel .activityUnifiedFilterLink--secondary.is-active::after {
  background: rgba(184, 194, 208, 0.72);
  opacity: 1;
  transform: scaleX(0.82);
}

.activitySearchHeader .activitySearchPanel--inline {
  width: 100%;
  padding: 0;
  margin: 0;
}

.activitySearchHeader .activitySearchInner {
  max-width: none;
  margin: 0;
}

.activitySearchHeader .activitySearchInner.cityTopSearch input {
  min-height: 46px;
  padding: 0 50px 0 42px;
  font-size: 15px;
}

#activity-player-search::-webkit-search-cancel-button,
#activity-player-search::-webkit-search-decoration,
#activity-player-search::-webkit-search-results-button,
#activity-player-search::-webkit-search-results-decoration,
#msg-tabs-search::-webkit-search-cancel-button,
#msg-tabs-search::-webkit-search-decoration,
#msg-tabs-search::-webkit-search-results-button,
#msg-tabs-search::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

#activity-player-search::-ms-clear,
#msg-tabs-search::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}

.activitySearchHeader .citySearchIcon {
  left: 14px;
}

.dmSearchHeader .activityHeaderFilterButton,
.dmSearchHeader .activityHeaderSearchButton,
body.activityBrowsePage .activitySearchHeader .activityHeaderFilterButton,
body.activityBrowsePage .activitySearchHeader .activityHeaderSearchButton {
  color: #fff !important;
  border: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  outline: 0 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.dmSearchHeader .activityHeaderFilterButton::before,
.dmSearchHeader .activityHeaderSearchButton::before,
body.activityBrowsePage .activitySearchHeader .activityHeaderFilterButton::before,
body.activityBrowsePage .activitySearchHeader .activityHeaderSearchButton::before,
.dmSearchHeader .activityHeaderFilterButton::after,
.dmSearchHeader .activityHeaderSearchButton::after,
body.activityBrowsePage .activitySearchHeader .activityHeaderFilterButton::after,
body.activityBrowsePage .activitySearchHeader .activityHeaderSearchButton::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

.dmSearchHeader .activityHeaderFilterButton:hover,
.dmSearchHeader .activityHeaderFilterButton:focus,
.dmSearchHeader .activityHeaderFilterButton:focus-visible,
.dmSearchHeader .activityHeaderFilterButton:active,
.dmSearchHeader .activityHeaderFilterButton.is-open,
.dmSearchHeader .activityHeaderFilterButton.has-active-filters,
.dmSearchHeader .activityHeaderSearchButton:hover,
.dmSearchHeader .activityHeaderSearchButton:focus,
.dmSearchHeader .activityHeaderSearchButton:focus-visible,
.dmSearchHeader .activityHeaderSearchButton:active,
body.activityBrowsePage .activitySearchHeader .activityHeaderFilterButton:hover,
body.activityBrowsePage .activitySearchHeader .activityHeaderFilterButton:focus,
body.activityBrowsePage .activitySearchHeader .activityHeaderFilterButton:focus-visible,
body.activityBrowsePage .activitySearchHeader .activityHeaderFilterButton:active,
body.activityBrowsePage .activitySearchHeader .activityHeaderFilterButton.is-open,
body.activityBrowsePage .activitySearchHeader .activityHeaderFilterButton.has-active-filters,
body.activityBrowsePage .activitySearchHeader .activityHeaderSearchButton:hover,
body.activityBrowsePage .activitySearchHeader .activityHeaderSearchButton:focus,
body.activityBrowsePage .activitySearchHeader .activityHeaderSearchButton:focus-visible,
body.activityBrowsePage .activitySearchHeader .activityHeaderSearchButton:active {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  outline: 0 !important;
  border-color: transparent !important;
}

.dmSearchHeader .activityHeaderFilterButton svg,
.dmSearchHeader .activityHeaderSearchButton svg,
body.activityBrowsePage .activitySearchHeader .activityHeaderFilterButton svg,
body.activityBrowsePage .activitySearchHeader .activityHeaderSearchButton svg {
  transform: translateY(-2px);
}

.activitySearchExit {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  background-image: none;
  color: rgba(200, 214, 232, 0.76);
  cursor: pointer;
  z-index: 5;
  box-shadow: none;
  filter: none;
  transition: color 150ms ease;
}

.activitySearchExit svg {
  width: 19px;
  height: 19px;
  display: block;
}

.activitySearchExit:hover,
.activitySearchExit:focus,
.activitySearchExit:focus-visible {
  color: rgba(245, 250, 255, 0.96);
  background: transparent;
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  filter: none;
  transform: translateY(-50%);
  outline: none;
}

.activitySearchExit:active {
  background: transparent;
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  filter: none;
  transform: translateY(-50%);
}

.activityUnifiedFilterRow {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-shrink: 0;
  padding: 0 var(--top-icon-visible-edge-inset) 8px;
  white-space: nowrap;
}

.activityUnifiedFilterRow--secondary {
  position: relative;
  z-index: 1;
  padding: 2px var(--top-icon-visible-edge-inset) 12px;
  gap: 20px;
}

.activityUnifiedFilterRow::-webkit-scrollbar {
  display: none;
}

.activityUnifiedFilterLink {
  position: relative;
  flex: 0 0 auto;
  width: auto;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 1px 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(210, 220, 234, 0.72);
  cursor: pointer;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  transition: color 150ms ease, opacity 150ms ease;
}

.activityUnifiedFilterLink::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1px;
  height: 2px;
  border-radius: 999px;
  background: transparent;
  transform: scaleX(0.45);
  opacity: 0;
  transition: background-color 150ms ease, opacity 150ms ease, transform 150ms ease;
}

.activityUnifiedFilterLink:hover,
.activityUnifiedFilterLink:focus-visible {
  color: rgba(247, 251, 255, 0.96);
  border-color: transparent;
  box-shadow: none;
  transform: none;
  text-decoration: none;
  outline: none;
}

.activityUnifiedFilterLink:focus-visible::after {
  background: rgba(247, 251, 255, 0.36);
  opacity: 1;
  transform: scaleX(1);
}

.activityUnifiedFilterLink--primary {
  color: rgba(226, 235, 246, 0.82);
  font-weight: 800;
}

.activityUnifiedFilterLink--primary.is-active {
  color: rgba(247, 251, 255, 0.98);
}

.activityUnifiedFilterLink--primary.is-active::after {
  background: var(--accent);
  opacity: 1;
  transform: scaleX(1);
}

.activityUnifiedFilterLink--secondary {
  color: rgba(190, 201, 216, 0.72);
  min-height: 28px;
  padding: 0 1px 7px;
  font-size: 12px;
  font-weight: 700;
}

.activityUnifiedFilterLink--secondary.is-active {
  color: rgba(244, 247, 251, 0.94);
}

.activityUnifiedFilterLink--secondary.is-active::after {
  background: rgba(184, 194, 208, 0.88);
  opacity: 1;
  transform: scaleX(1);
}

@media (max-width: 360px) {
  .activitySearchTabsLayer {
    grid-template-columns: var(--top-utility-hitbox-size) minmax(0, 1fr) var(--top-utility-hitbox-size);
  }

  .activitySearchInputLayer {
    left: 60px;
  }

  .activityHeaderTabs {
    gap: 16px;
  }

  .activityHeaderTabs .activityUnifiedFilterLink--primary {
    font-size: 16.75px;
  }

  .activityHeaderFilterButton,
  .activityHeaderSearchButton {
    width: var(--top-utility-hitbox-size);
  }

  .activityHeaderSearchButton svg {
    width: var(--top-utility-icon-size);
    height: var(--top-utility-icon-size);
  }
}

.activityBrowseHero {
  flex-shrink: 0;
  padding: 0 14px 12px;
}

.activityBrowseHero--hidden {
  display: none !important;
}

.activityBrowseHeroTrack {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.activityBrowseHeroTrack::-webkit-scrollbar {
  display: none;
}

.activityBrowseHeroSlide {
  flex: 0 0 min(100%, calc(100vw - 28px));
  scroll-snap-align: start;
  min-width: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.32);
}

.activityBrowseHeroSlide:focus-visible {
  outline: 2px solid rgba(122, 212, 255, 0.45);
  outline-offset: 3px;
}

.activityBrowseHeroImage {
  display: block;
  width: 100%;
  height: clamp(148px, 32vw, 232px);
  object-fit: cover;
}

.activitySearchPanel {
  padding: 6px 16px 14px;
  flex-shrink: 0;
}

.activitySearchInner {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
}

.cityTopFilters {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.cityTopFilters::-webkit-scrollbar {
  display: none;
}

.cityTopFilter {
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(221, 231, 242, 0.8);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.cityTopFilter.is-active {
  border-color: rgba(122, 212, 255, 0.3);
  background: rgba(122, 212, 255, 0.14);
  color: rgba(245, 250, 255, 0.98);
}

.cityTopFilter:disabled {
  opacity: 0.32;
}

.cityFeedIndex {
  flex: 0 0 auto;
  min-width: 56px;
  text-align: right;
  color: rgba(222, 232, 243, 0.58);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.cityContent {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0;
  display: flex;
  overflow: hidden;
  background: transparent;
}

.cityFeedStage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  overflow: hidden;
  background: transparent;
  border: none;
  box-shadow: none;
}

.cityFeedOverlay {
  position: absolute;
  inset: 0 0 auto;
  z-index: 55;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: calc(env(safe-area-inset-top, 0px) + 5px) 14px 0;
  pointer-events: none;
}

.cityFeedOverlay::before {
  display: none;
}

.cityFeedOverlayRow {
  position: relative;
  min-height: 40px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.cityFeedOverlayMeta,
.cityFeedOverlayActions {
  position: absolute;
  top: 0;
  pointer-events: auto;
  z-index: 1;
}

.cityFeedOverlayMeta {
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.cityFeedOverlayActions {
  right: 0;
}

.cityFeedChip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(122, 212, 255, 0.24);
  background: rgba(6, 12, 20, 0.34);
  color: rgba(244, 249, 255, 0.94);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  backdrop-filter: blur(16px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.16);
}

.cityFeedIndex--overlay {
  min-width: 0;
  text-align: left;
  font-size: 9px;
  letter-spacing: 0.16em;
  color: rgba(231, 239, 249, 0.62);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}

.cityFeedOverlayTabs {
  position: relative;
  z-index: 1;
  width: auto;
  max-width: 100%;
  margin: 0 auto 12px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  pointer-events: auto;
}

.cityFeedOverlayTabs .topTabs {
  width: auto;
  justify-content: center;
  gap: clamp(22px, 6vw, 34px);
  overflow: visible;
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
}

.cityFeedOverlayTabs .topTabsLink {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 0;
  min-height: 46px;
  padding: 0 3px 10px;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(224, 234, 247, 0.86);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17.5px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  backdrop-filter: none;
}

.cityFeedOverlayTabs .topTabsLink::after {
  content: "";
  position: absolute;
  left: 1px;
  right: 1px;
  bottom: 7px;
  width: auto;
  height: 2px;
  border-radius: 999px;
  background: transparent;
  opacity: 0;
  transform: scaleX(0.5);
}

.cityFeedOverlayTabs .topTabsLink:hover {
  color: rgba(247, 251, 255, 0.96);
  text-decoration: none;
}

.cityFeedOverlayTabs .topTabsLink:focus-visible {
  color: rgba(247, 251, 255, 0.96);
  text-decoration: none;
  outline: 2px solid rgba(94, 200, 255, 0.72);
  outline-offset: 6px;
}

.cityFeedOverlayTabs .topTabsLink.is-active {
  color: rgba(247, 251, 255, 0.98);
  font-weight: 600;
  text-decoration: none;
}

.cityFeedOverlayTabs .topTabsLink.is-active::after {
  background: var(--accent, #5ec8ff);
  opacity: 1;
  transform: scaleX(0.72);
}

.cityFeedRefreshStatus {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 54px);
  left: 50%;
  z-index: 62;
  transform: translate(-50%, -6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

.cityFeedRefreshStatus.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.cityFeedRefreshStatus span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(8, 13, 21, 0.62);
  color: rgba(247, 251, 255, 0.94);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(16px);
}

.activityDiscoveryRefreshStatus {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 54px);
  left: 50%;
  z-index: 72;
  transform: translate(-50%, -6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

.activityDiscoveryRefreshStatus.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.activityDiscoveryRefreshStatus span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  background: rgba(255, 255, 255, 0.84);
  color: rgba(17, 24, 39, 0.92);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
  backdrop-filter: blur(16px);
}

.activityDiscoveryRefreshStatus.is-checking span::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 999px;
  background: #0ea5e9;
  box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.4);
  animation: activityDiscoveryRefreshPulse 900ms ease-out infinite;
}

@keyframes activityDiscoveryRefreshPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.42);
  }
  100% {
    box-shadow: 0 0 0 10px rgba(14, 165, 233, 0);
  }
}

.cityFeedOverlayActions .headerActions {
  margin-left: 0;
  gap: 6px;
}

.cityFeedOverlayActions .headerIconRow {
  gap: 6px;
}

.cityFeedOverlayActions .headerIconRow .headerActionBtn:nth-child(2) {
  display: none;
}

.cityFeedOverlayActions .headerActionBtn,
.cityFeedOverlayActions .headerMenuBtn {
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  border-radius: 14px;
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(7, 12, 20, 0.34);
  color: rgba(244, 249, 255, 0.92);
  backdrop-filter: blur(18px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
}

.cityFeedOverlayActions .headerActionBtn:hover,
.cityFeedOverlayActions .headerActionBtn:focus-visible,
.cityFeedOverlayActions .headerMenuBtn:hover,
.cityFeedOverlayActions .headerMenuBtn:focus-visible {
  background: rgba(10, 16, 26, 0.52);
  border-color: rgba(255, 255, 255, 0.12);
}

.cityFeedOverlayActions .headerActionBtn.is-active {
  background: rgba(122, 212, 255, 0.16);
  border-color: rgba(122, 212, 255, 0.22);
}

.cityFeedOverlayLogin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(7, 12, 20, 0.34);
  color: rgba(247, 251, 255, 0.94);
  text-decoration: none;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  backdrop-filter: blur(18px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
}

.cityFeedOverlayLogin:hover,
.cityFeedOverlayLogin:focus-visible {
  color: rgba(247, 251, 255, 0.98);
  text-decoration: none;
  background: rgba(10, 16, 26, 0.52);
  border-color: rgba(255, 255, 255, 0.12);
  outline: none;
}

.citySnapFeed {
  flex: 1;
  min-height: 0;
  height: var(--city-feed-viewport-h, 100%);
  max-height: var(--city-feed-viewport-h, 100%);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  scroll-snap-type: y mandatory;
  scroll-padding-top: 0;
  scroll-padding-bottom: 0;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  --city-post-h: 100%;
  background: transparent;
  border: none;
  box-shadow: none;
}

.citySnapFeed::-webkit-scrollbar {
  display: none;
}

.cityPost {
  position: relative;
  flex: 0 0 var(--city-post-h, 100%);
  height: var(--city-post-h, 100%);
  min-height: var(--city-post-h, 100%);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  padding: 0;
  display: flex;
}

.cityPost--immersive {
  box-shadow: none;
}

.cityPostFrame {
  position: relative;
  flex: 1;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  border-radius: 0;
  border: none;
  background: #030508;
  display: flex;
  flex-direction: column;
}

.cityPostMediaStrip {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  touch-action: pan-x pan-y pinch-zoom;
  overscroll-behavior-x: contain;
}

.cityPostMediaStrip::-webkit-scrollbar {
  display: none;
}

.cityMediaSlide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  height: 100%;
  scroll-snap-align: start;
  /* Without this a hard flick keeps its momentum straight past the neighbouring
     slide and lands two or three along. `always` makes every slide a mandatory
     stop, so one swipe moves exactly one item however hard it is thrown. The
     vertical feed slide (.cityPost) and the thumbnail strip
     (.profilePostThumbSlide) already do this; the media carousel was the one
     snap surface that missed it. */
  scroll-snap-stop: always;
  background: #05080d;
}

.cityMediaFill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.cityFeedVideoTapHint {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(4, 8, 14, 0.42);
  color: rgba(248, 250, 255, 0.95);
  pointer-events: none;
  opacity: 0;
  transition: opacity 240ms ease;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22);
}

.cityFeedVideoTapHint:not([hidden]) {
  opacity: 1;
}

.cityFeedVideoTapHint.is-hiding {
  opacity: 0;
}

.cityFeedVideoTapHintSvg {
  display: block;
  width: 24px;
  height: 24px;
}

/* The carousel position dots belong to the post's media strip. They sit inside
   the band the action sheet covers, so while the sheet is open they float over
   the rows and read as part of the menu. Hide them for the duration. */
.cityPost:has(.cityPostActionMenu.open) .cityMediaDots {
  opacity: 0;
  transition: opacity 140ms ease;
}

.cityMediaDots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(138px + env(safe-area-inset-bottom, 0px));
  z-index: 4;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}

.cityMediaDot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
  transition: transform 0.2s ease, background 0.2s ease;
}

.cityMediaDot.is-active {
  background: rgba(255, 255, 255, 0.95);
  transform: scale(1.15);
}

.cityPostChrome {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  pointer-events: none;
}

.cityPost--social .cityPostChrome {
  justify-content: space-between;
}

.cityPostChromeTop,
.cityPostChromeBottom {
  pointer-events: none;
}

.cityPostChromeTop :is(
  a,
  button,
  input,
  select,
  textarea,
  label,
  summary,
  [role="button"],
  [role="link"],
  [tabindex]:not([tabindex="-1"])
),
.cityPostChromeBottom :is(
  a,
  button,
  input,
  select,
  textarea,
  label,
  summary,
  [role="button"],
  [role="link"],
  [tabindex]:not([tabindex="-1"])
) {
  pointer-events: auto;
}

.cityPostChromeTop [data-post-menu],
.cityPostChromeTop [data-post-menu] *,
.cityPostChromeBottom [data-post-menu],
.cityPostChromeBottom [data-post-menu] *,
.cityPostChromeTop .cityPostActionSheetPanel,
.cityPostChromeTop .cityPostActionSheetPanel *,
.cityPostChromeBottom .cityPostActionSheetPanel,
.cityPostChromeBottom .cityPostActionSheetPanel * {
  pointer-events: auto;
}

.cityPostChromeTop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: calc(var(--city-top-safe) + 50px) 14px 0;
  gap: 10px;
}

.cityPage .cityPostChromeTop {
  padding: calc(var(--city-top-safe) + 38px) 14px 0;
}

.cityPostChromeBottom {
  position: relative;
  z-index: 1;
  padding: 0 14px 18px;
  padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cityPostChromeBottom::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: min(280px, 58vh);
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    to top,
    rgba(8, 12, 20, 0.92) 0%,
    rgba(8, 12, 20, 0.5) 48%,
    rgba(8, 12, 20, 0) 100%
  );
}

.cityPostChromeBottom > * {
  position: relative;
  z-index: 1;
}

.cityPostTopMain {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 4px;
}

.cityPostStatus--compact {
  flex-wrap: wrap;
  gap: 6px;
}

.cityPostStatus--overlay {
  min-height: 0;
  max-width: min(100%, 20rem);
  align-items: center;
}

.cityPostStatus--overlay .cityPostBadge,
.cityPostStatus--overlay .cityPostScope {
  min-height: 22px;
  padding: 0 9px;
  font-size: 9px;
  letter-spacing: 0.12em;
  background: rgba(5, 11, 19, 0.4);
  border-color: rgba(255, 255, 255, 0.08);
}

.cityPostStatus--empty {
  opacity: 0;
}

.cityPostMenuBtn {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: rgba(250, 252, 255, 0.9);
  font-size: 17px;
  line-height: 1;
  box-shadow: none;
  backdrop-filter: none;
  cursor: pointer;
  text-shadow: none;
}

.cityPostMenuBtn svg {
  width: 15px;
  height: 15px;
  display: block;
}

.cityPostMenuBtn:hover,
.cityPostMenuBtn:focus-visible {
  color: rgba(250, 252, 255, 0.98);
}

.cityPostInfo {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cityPostInfo--overlay {
  flex: 1 1 auto;
  min-width: 0;
  max-width: min(calc(100% - 76px), 24rem);
  gap: 4px;
  justify-content: flex-end;
}

.cityPostByline {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}

.cityPostBylineAuthor {
  font-size: 14px;
  font-weight: 650;
  line-height: 1.2;
  color: rgba(248, 251, 255, 0.98);
  text-decoration: none;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.44);
}

.cityPostBylineAuthor:hover,
.cityPostBylineAuthor:focus-visible {
  color: rgba(248, 251, 255, 0.98);
  text-decoration: none;
}

.cityPostBylineMeta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  color: rgba(224, 232, 242, 0.78);
  font-size: 11px;
  letter-spacing: 0.03em;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
}

.cityPostBylineMeta span {
  min-width: 0;
}

.cityPostTopMeta {
  flex: 1 1 auto;
  min-width: 0;
  max-width: min(calc(100% - 44px), 22rem);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cityPostAuthorBlock--topOverlay {
  align-items: center;
  gap: 10px;
}

.cityPostAuthorBlock--topOverlay .cityPostAvatar {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
}

.cityPostAuthorBlock--meta {
  gap: 0;
}

.cityPostAuthorBlock--inline {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.cityPostIdentity--overlay {
  gap: 4px;
}

.cityPostIdentity--topOverlay {
  gap: 3px;
}

.cityPostIdentity--topOverlay .cityPostAuthor {
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.56);
}

.cityPostAuthor.cityPostAuthor--overlayText {
  font-size: clamp(15px, 4vw, 17px);
  font-weight: 650;
  line-height: 1.14;
  color: rgba(250, 252, 255, 0.98);
  text-decoration: none;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.46);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cityPostAuthor.cityPostAuthor--overlayText:hover,
.cityPostAuthor.cityPostAuthor--overlayText:focus-visible {
  color: rgba(250, 252, 255, 0.98);
  text-decoration: none;
}

.cityPostMeta.cityPostMeta--topOverlay {
  color: rgba(230, 237, 245, 0.82);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.44);
}

.cityPostInfo--overlay .cityPostAuthor {
  font-size: 16px;
  font-weight: 700;
  color: rgba(247, 250, 255, 0.98);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}

.cityPostMeta.cityPostMeta--compact {
  font-size: 11px;
  opacity: 0.78;
}

.cityPostMeta.cityPostMeta--plain {
  gap: 4px;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: hidden;
}

.cityPostMeta.cityPostMeta--plain span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cityPostInfo--overlay .cityPostMeta {
  color: rgba(228, 236, 245, 0.78);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.52);
}

.cityPostHeadline--feed {
  font-size: clamp(18px, 4.9vw, 22px);
  font-weight: 650;
  line-height: 1.16;
  color: rgba(252, 252, 255, 0.98);
  text-decoration: none;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.62);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cityPostMetaLine.cityPostMetaLine--feed {
  font-size: 12px;
  line-height: 1.3;
  color: rgba(232, 238, 246, 0.84);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.44);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cityPostActivityTitle {
  color: rgba(252, 252, 255, 0.98);
  font-size: clamp(17px, 4.6vw, 20px);
  font-weight: 750;
  line-height: 1.18;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.62);
}

.cityPostEssentialMeta {
  min-width: 0;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.25;
  color: rgba(242, 247, 253, 0.94);
  font-weight: 650;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.44);
}

.cityPostEssentialMetaItem {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
}

.cityPostEssentialMetaIcon {
  width: 13px;
  height: 13px;
  display: inline-flex;
  flex: 0 0 13px;
  align-items: center;
  justify-content: center;
  color: rgba(224, 238, 251, 0.88);
}

.cityPostEssentialMetaIcon svg {
  width: 13px;
  height: 13px;
  display: block;
}

.cityPostEssentialMetaText {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cityPostActivityDescription {
  margin-top: 2px;
}

.cityPostMetaLine.cityPostMetaLine--hint {
  color: rgba(202, 232, 255, 0.9);
}

.cityPostCaption.cityPostCaption--feed {
  --caption-preview-lines: 2;
  --caption-line-height: 1.38em;
  font-size: 15px;
  line-height: 1.38;
  color: rgba(244, 247, 252, 0.95);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  transition: opacity 0.26s ease, transform 0.26s ease;
}

.cityPostCaption.cityPostCaption--feed.cityPostCaptionActivity {
  --caption-preview-lines: 1;
  -webkit-line-clamp: 1;
}

.cityPostCaption.cityPostCaption--feed.is-caption-inline-ready {
  display: block;
  max-height: calc(var(--caption-line-height, 1.38em) * var(--caption-preview-lines, 2));
  -webkit-line-clamp: unset;
  overflow: hidden;
}

.cityPostCaptionWrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  min-width: 0;
  max-width: 100%;
}

.cityPostCaption.is-expanded {
  display: block;
  -webkit-line-clamp: unset;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-height: min(42vh, 280px);
  opacity: 1;
  transform: translateY(0);
  animation: neoCaptionExpandIn 0.3s ease;
}

.cityPostCaption.cityPostCaption--feed.is-caption-inline-ready.is-expanded {
  max-height: none;
  overflow: visible;
}

@keyframes neoCaptionExpandIn {
  from {
    opacity: 0.92;
    transform: translateY(3px);
  }

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

.cityPostCaption.cityPostCaption--feed.is-caption-toggleable {
  cursor: pointer;
}

.cityPostCaptionArrow {
  display: inline;
  margin: 0 0 0 4px;
  color: rgba(202, 232, 255, 0.94);
  font-size: 0.82em;
  font-weight: 800;
  line-height: inherit;
  letter-spacing: 0;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
  vertical-align: baseline;
  pointer-events: none;
}

.cityPostCaptionArrow[hidden],
.cityPostCaptionToggle[hidden] {
  display: none !important;
}

.cityPostCaption.cityPostCaption--feed.is-caption-toggleable:hover .cityPostCaptionArrow,
.cityPostCaption.cityPostCaption--feed.is-caption-toggleable:focus-visible .cityPostCaptionArrow {
  color: rgba(233, 245, 255, 0.98);
}

.cityPostCaption.cityPostCaption--stacked {
  -webkit-line-clamp: 3;
}

.cityPostBottomPanel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: flex-end;
  gap: 12px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
}

.cityPost--activityCard .cityMediaDots {
  bottom: calc(128px + env(safe-area-inset-bottom, 0px));
}

.cityPost--activityCard .cityPostChromeBottom {
  gap: 4px;
  padding: 0 14px 14px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
}

.cityPost--activityCard .cityPostChromeBottom::before {
  height: min(280px, 58vh);
  background: linear-gradient(
    to top,
    rgba(8, 12, 20, 0.9) 0%,
    rgba(8, 12, 20, 0.44) 44%,
    rgba(8, 12, 20, 0) 100%
  );
}

.cityPost--activityCard .cityPostBottomPanel {
  gap: 10px;
}

.cityPost--activityCard .cityPostInfo--overlay {
  gap: 3px;
  max-width: min(calc(100% - 74px), 23rem);
}

.cityPost--activityCard .cityPostByline {
  gap: 5px;
}

.cityPost--activityCard .cityPostBylineAuthor {
  font-size: 13px;
  line-height: 1.16;
}

.cityPost--activityCard .cityPostBylineMeta {
  gap: 3px;
  font-size: 10px;
}

.cityPost--activityCard .cityPostCaptionWrap {
  gap: 2px;
}

.cityPost--activityCard .cityPostCaption.cityPostCaption--feed.cityPostCaptionActivity {
  font-size: 14px;
  line-height: 1.28;
  --caption-line-height: 1.28em;
  --caption-preview-lines: 1;
  -webkit-line-clamp: 1;
}

.cityPost--activityCard .cityPostMetaLine.cityPostMetaLine--feed {
  font-size: 11px;
  line-height: 1.24;
}

.cityPostRail--immersive {
  flex-direction: column;
  align-self: flex-end;
  align-items: center;
  justify-content: flex-end;
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  gap: 10px;
}

.cityPostGradient--top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 164px;
  background: none;
  pointer-events: none;
  z-index: 2;
}

.cityPostGradient--bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 320px;
  background: none;
  pointer-events: none;
  z-index: 2;
}

.cityPostTextSurface--calm {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 16%, rgba(119, 184, 255, 0.36), transparent 34%),
    radial-gradient(circle at 84% 80%, rgba(255, 187, 117, 0.22), transparent 30%),
    linear-gradient(180deg, #111922 0%, #06090d 100%);
}

.cityPostTextBackdrop--calm {
  display: none;
}

.cityPostShell {
  position: relative;
  flex: 1;
  min-height: 100%;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid var(--city-line);
  background: #0b1018;
  box-shadow: var(--city-shadow);
}

.cityPostCanvas,
.cityPostOverlay {
  min-height: 100%;
}

.cityPostCanvas {
  position: relative;
  background:
    radial-gradient(circle at 20% 18%, rgba(74, 124, 198, 0.22), transparent 36%),
    linear-gradient(180deg, rgba(10, 14, 22, 0.92), rgba(5, 8, 13, 0.98));
}

.cityPostVisual {
  position: absolute;
  inset: 0;
  background: #081018;
}

.cityPostVisual img,
.cityPostVisual video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.cityPostTextSurface {
  display: flex;
  align-items: flex-end;
  padding: 22px;
  background:
    radial-gradient(circle at 20% 20%, rgba(73, 126, 255, 0.22), transparent 30%),
    radial-gradient(circle at 82% 16%, rgba(49, 206, 255, 0.18), transparent 28%),
    linear-gradient(180deg, #0d1726 0%, #070b12 100%);
}

.cityPostGlow,
.cityPostGrid {
  position: absolute;
  pointer-events: none;
}

.cityPostGlow {
  width: 52vw;
  height: 52vw;
  max-width: 300px;
  max-height: 300px;
  border-radius: 50%;
  filter: blur(20px);
  opacity: 0.46;
}

.cityPostGlowA {
  top: -8%;
  left: -8%;
  background: rgba(53, 106, 218, 0.54);
}

.cityPostGlowB {
  right: -16%;
  bottom: 14%;
  background: rgba(54, 170, 212, 0.34);
}

.cityPostGrid {
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.94));
  opacity: 0.18;
}

.cityPostTextBackdrop {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: min(84%, 32rem);
}

.cityPostTextLabel {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(214, 225, 239, 0.66);
}

.cityPostTextHero {
  font-size: clamp(28px, 7vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: rgba(246, 250, 255, 0.96);
  text-wrap: balance;
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cityPostGradient {
  position: absolute;
  inset: auto 0 0;
  height: 54%;
  background: linear-gradient(180deg, rgba(5, 8, 13, 0) 0%, rgba(5, 8, 13, 0.96) 100%);
  z-index: 1;
}

.cityPostGradientTop {
  inset: 0 0 auto;
  height: 22%;
  background: linear-gradient(180deg, rgba(5, 8, 13, 0.76), rgba(5, 8, 13, 0));
}

.cityPostOverlay {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr auto;
  gap: 12px;
  padding: 16px 14px 22px;
}

.cityPostHeader {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.cityPostStatus {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.cityPostBadge,
.cityPostScope {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  backdrop-filter: blur(12px);
  background: rgba(5, 11, 19, 0.52);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(245, 250, 255, 0.94);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.cityPostMenu .iconBtn {
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  border-radius: 999px;
  background: rgba(3, 5, 8, 0.16);
  border-color: rgba(255, 255, 255, 0.05);
}

.cityPostBody {
  align-self: end;
  max-width: min(86%, 420px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cityPostAuthorBlock {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.cityPostAvatar {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: rgba(6, 10, 16, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(245, 250, 255, 0.94);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  backdrop-filter: blur(10px);
}

.cityPostAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cityPostIdentity {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cityPostAuthor {
  font-size: 16px;
  font-weight: 700;
  color: rgba(247, 250, 255, 0.98);
}

.cityPostMeta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  color: rgba(224, 232, 242, 0.74);
  font-size: 12px;
  letter-spacing: 0.03em;
}

.cityPostCaption {
  font-size: 14px;
  line-height: 1.45;
  color: rgba(236, 243, 252, 0.9);
  text-shadow: 0 1px 20px rgba(0, 0, 0, 0.28);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cityPostRail {
  align-self: end;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 0;
}

.cityPostRail--overlay {
  flex: 0 0 58px;
  min-width: 58px;
}

.cityPostAction {
  width: 56px;
  min-width: 56px;
  min-height: 0;
  padding: 0;
  border: none;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: rgba(242, 247, 255, 0.94);
  text-decoration: none;
  cursor: pointer;
}

.cityPostActionIcon {
  width: 40px;
  height: 40px;
  border-radius: 0;
  display: grid;
  place-items: center;
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
}

.cityPostActionIcon svg {
  width: 20px;
  height: 20px;
  display: block;
}

.cityPostActionIcon--avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  padding: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  background: rgba(10, 15, 23, 0.42);
}

.cityPostActionIcon--avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.cityPostActionAvatarText {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(245, 250, 255, 0.96);
}

.cityPostActionLabel {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(239, 244, 250, 0.9);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.44);
}

.cityPostActionLink:hover,
.cityPostActionLink:focus-visible {
  text-decoration: none;
  color: rgba(250, 252, 255, 0.98);
}

.cityPostAction--static {
  cursor: default;
}

.cityPostActionCount {
  min-width: 20px;
  text-align: center;
  color: rgba(239, 245, 252, 0.92);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.44);
}

.cityPostAction.is-active .cityPostActionIcon,
.cityPostAction[aria-pressed="true"] .cityPostActionIcon {
  background: transparent;
  border-color: transparent;
  color: rgba(122, 212, 255, 0.96);
}

.cityPostMenu--rail {
  position: relative;
  width: 56px;
  min-width: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cityPostMenu--rail [data-post-menu-toggle][aria-expanded="true"] .cityPostActionIcon {
  background: transparent;
  border-color: transparent;
  color: rgba(122, 212, 255, 0.96);
}

/* Feed post “More” must be a real full-viewport bottom sheet (not .dropdown.appMenu’s anchored strip). */
.dropdown.appMenu.cityPostActionMenu {
  position: fixed;
  inset: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  display: none;
  z-index: 220;
}

.dropdown.appMenu.cityPostActionMenu.open {
  display: block;
}

.dropdown.appMenu.cityPostActionMenu.is-instant-opening .cityPostActionSheetScrim {
  transition-duration: 120ms;
}

.dropdown.appMenu.cityPostActionMenu.is-instant-opening .cityPostActionSheetPanel {
  transition-duration: 160ms;
}

.cityPostActionSheetScrim {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  /* The sheet sits directly over post media. At 0.14 with no blur the artwork
     stayed fully legible behind the rows, which is what made multi-photo posts
     read as cluttered. */
  background: rgba(4, 8, 12, 0.58);
  backdrop-filter: saturate(120%) blur(2px);
  -webkit-backdrop-filter: saturate(120%) blur(2px);
  opacity: 0;
  transition: opacity 200ms ease;
  cursor: pointer;
}

.cityPostActionSheetPanel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  /* Size to the rows it actually has. A fixed 40vh left a two-row sheet mostly
     empty and a long one scrolling for no reason. */
  height: auto;
  max-height: min(80vh, 760px);
  min-height: 0;
  overflow: hidden;
  padding: 16px 20px calc(22px + env(safe-area-inset-bottom, 0px));
  border-radius: 28px 28px 0 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background:
    linear-gradient(180deg, rgba(14, 20, 32, 0.99), rgba(5, 8, 14, 0.995));
  box-shadow: 0 -14px 42px rgba(0, 0, 0, 0.34);
  transform: translate3d(0, 104%, 0);
  transition: transform 190ms cubic-bezier(0.32, 0.72, 0, 1);
  display: flex;
  flex-direction: column;
  gap: 0;
  will-change: transform;
  contain: layout paint;
  box-sizing: border-box;
}

.cityPostActionSheetBody {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.dropdown.appMenu.cityPostActionMenu.open .cityPostActionSheetScrim {
  opacity: 1;
}

.dropdown.appMenu.cityPostActionMenu.open .cityPostActionSheetPanel {
  transform: translate3d(0, 0, 0);
}

.cityPostActionSheetGrab {
  flex-shrink: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin: -6px -20px 0;
  padding: 10px 20px 14px;
  min-height: 56px;
  box-sizing: border-box;
  touch-action: none;
  cursor: grab;
  -webkit-tap-highlight-color: transparent;
}

.cityPostActionSheetGrab:active {
  cursor: grabbing;
}

.cityPostActionSheetHandle {
  width: 44px;
  height: 5px;
  margin: 0 auto 0;
  border-radius: 999px;
  background: rgba(145, 163, 186, 0.38);
  flex-shrink: 0;
  touch-action: none;
  pointer-events: none;
}

.cityPostActionSheetTile--danger,
button.cityPostActionSheetTile--danger {
  color: rgba(255, 200, 206, 0.98);
  background: rgba(255, 80, 102, 0.1);
}

.cityPostActionSheetTile--danger .cityPostActionSheetTileIcon,
button.cityPostActionSheetTile--danger .cityPostActionSheetTileIcon {
  color: rgba(255, 170, 184, 0.96);
}

.cityPostActionSheetTile--danger:hover,
.cityPostActionSheetTile--danger:focus-visible {
  background: rgba(255, 80, 102, 0.16);
}

.cityPostActionSheetHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.cityPostActionSheetTitleWrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.cityPostActionSheetEyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(160, 178, 201, 0.72);
}

.cityPostActionSheetTitle {
  font-size: 24px;
  line-height: 1.1;
  font-weight: 800;
  color: rgba(247, 250, 255, 0.98);
}

.cityPostActionSheetClose {
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(244, 248, 252, 0.92);
  display: grid;
  place-items: center;
}

.cityPostActionSheetClose svg {
  width: 18px;
  height: 18px;
  display: block;
}

.cityPostActionSheetSection {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cityPostActionSheetSectionLabel {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(155, 173, 195, 0.72);
}

.cityPostActionSheetTileGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 96px));
  justify-content: center;
  gap: 14px 16px;
  padding: 2px 0 4px;
}

.cityPostActionSheetTile,
a.cityPostActionSheetTile {
  width: 96px;
  min-height: 88px;
  padding: 12px 8px 10px;
  border-radius: 20px;
  border: 0;
  background: rgba(255, 255, 255, 0.055);
  color: rgba(244, 248, 252, 0.96);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  box-shadow: none;
}

.cityPostActionSheetTileIcon {
  width: 40px;
  height: 40px;
  border-radius: 0;
  display: grid;
  place-items: center;
  background: transparent;
  color: rgba(122, 212, 255, 0.92);
}

.cityPostActionSheetTileIcon svg,
.cityPostActionSheetRowIcon svg {
  width: 22px;
  height: 22px;
  display: block;
}

.cityPostActionSheetTileLabel {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}

.cityPostActionSheetTile.is-active,
.cityPostActionSheetTile[aria-pressed="true"] {
  background: rgba(122, 212, 255, 0.14);
}

.cityPostActionSheetTile.is-active .cityPostActionSheetTileIcon,
.cityPostActionSheetTile[aria-pressed="true"] .cityPostActionSheetTileIcon {
  background: transparent;
  color: rgba(247, 251, 255, 0.98);
}

.cityPostActionSheetList {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cityPostActionSheetList--plain {
  margin-top: 10px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.cityPostActionSheetBody > .cityPostActionSheetList--plain:first-child,
.cityPostActionSheetBody > .cityPostActionSheetGrab + .cityPostActionSheetList--plain {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.cityPostActionSheetList--rowsOnly.cityPostActionSheetList--plain > * + * {
  border-top-color: rgba(255, 255, 255, 0.04);
}

button.cityPostActionSheetRow {
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.dropdown.appMenu.cityPostActionMenu button.cityPostActionSheetRow[aria-pressed="true"] {
  color: rgba(122, 212, 255, 0.96);
}

.dropdown.appMenu.cityPostActionMenu button.cityPostActionSheetRow[aria-pressed="true"] .cityPostActionSheetRowIcon {
  color: rgba(122, 212, 255, 0.95);
}

.cityPostActionSheetModeratorBlock {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.cityPostActionSheetRow,
a.cityPostActionSheetRow {
  width: 100%;
  min-height: 56px;
  padding: 0 4px;
  margin: 0;
  border-radius: 0;
  border: 0;
  background: transparent;
  color: rgba(243, 248, 252, 0.96);
  text-decoration: none;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  text-align: left;
}

.cityPostActionSheetList--plain > * + * {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.cityPostActionSheetRowIcon {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: rgba(206, 223, 242, 0.9);
}

.cityPostActionSheetRowText {
  min-width: 0;
  font-size: 15px;
  line-height: 1.28;
  font-weight: 600;
}

/* Hairline separators between rows, native-sheet style: never above the first
   row, and inset to clear the icon column. */
.cityPostActionSheetBody > .cityPostActionSheetRow + .cityPostActionSheetRow,
.cityPostActionSheetBody > .cityPostActionSheetRow + .cityPostActionSheetNoteWrap,
.cityPostActionSheetBody > .cityPostActionSheetNoteWrap + .cityPostActionSheetRow,
.cityPostActionSheetBody > .cityPostActionSheetNoteWrap + .cityPostActionSheetNoteWrap {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.cityPostActionSheetRow--danger {
  color: rgba(255, 140, 158, 0.98);
  background: transparent;
}

.cityPostActionSheetRow--danger .cityPostActionSheetRowIcon {
  color: rgba(255, 140, 158, 0.98);
}

.cityPostActionSheetNoteWrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cityPostActionSheetNote {
  padding: 10px 0 2px;
  margin: 0 0 6px;
  border-radius: 0;
  border: 0;
  background: transparent;
  color: rgba(198, 210, 226, 0.82);
  font-size: 13px;
  line-height: 1.48;
}

.cityPostActionSheetModeratorForm {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cityPostActionSheetFieldLabel {
  font-size: 12px;
  font-weight: 700;
  color: rgba(210, 222, 237, 0.86);
}

.cityPostActionSheetField {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.24);
  color: rgba(244, 248, 252, 0.96);
}

.cityPostActionSheetField::placeholder {
  color: rgba(164, 182, 202, 0.62);
}

.cityPostActionSheetTile:hover,
.cityPostActionSheetTile:focus-visible,
.cityPostActionSheetRow:hover,
.cityPostActionSheetRow:focus-visible,
.cityPostActionSheetClose:hover,
.cityPostActionSheetClose:focus-visible {
  text-decoration: none;
  background: rgba(255, 255, 255, 0.05);
}

.cityPostActionSheetTile:hover,
.cityPostActionSheetTile:focus-visible {
  background: rgba(255, 255, 255, 0.08);
}

.cityPostActionSheetRow--danger:hover,
.cityPostActionSheetRow--danger:focus-visible {
  background: rgba(255, 80, 102, 0.08);
}

.profilePostList {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
}

.profilePage:not(.savedPage) .profilePostList {
  width: calc(100% + 28px);
  margin-inline: -14px;
}

.savedPage .profilePostList {
  gap: 10px;
}

.profilePostGridItem {
  --profile-post-card-ratio: var(--normal-event-card-ratio, 1 / 1.57);
  --profile-post-card-radius: var(--normal-event-card-radius, 18px);
  position: relative;
  min-width: 0;
}

.profilePostThumbButton {
  position: relative;
  display: block;
  width: 100%;
  min-height: 0;
  height: auto;
  aspect-ratio: var(--profile-post-card-ratio);
  padding: 0;
  border: 0;
  border-radius: var(--profile-post-card-radius);
  overflow: hidden;
  background: #070b12;
  color: inherit;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 12px 24px rgba(0, 0, 0, 0.14);
  contain: paint;
  transition: transform 160ms ease;
}

.profilePostThumbMedia {
  width: 100%;
  height: 100%;
  min-height: 100%;
  display: block;
  object-fit: cover;
  background: #070b12;
}

.profilePostThumbStrip {
  width: 100%;
  height: 100%;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.profilePostThumbStrip::-webkit-scrollbar {
  display: none;
}

.profilePostThumbSlide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  position: relative;
  overflow: hidden;
  background: #070b12;
}

.profilePostThumbDots {
  position: absolute;
  left: 50%;
  bottom: 10px;
  z-index: 3;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 7px;
  border-radius: 999px;
  background: rgba(5, 8, 14, 0.28);
  backdrop-filter: blur(12px);
  pointer-events: none;
}

.profilePostThumbFallback {
  width: 100%;
  height: 100%;
  min-height: 100%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at top, rgba(122, 212, 255, 0.16), transparent 56%),
    linear-gradient(180deg, rgba(24, 31, 43, 0.98), rgba(10, 14, 20, 0.98));
  color: rgba(244, 248, 252, 0.82);
}

.profilePostThumbFallback svg {
  width: 34px;
  height: 34px;
}

.profilePostThumbShade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2, 6, 12, 0.04), rgba(2, 6, 12, 0.2));
  opacity: 0;
  transition: opacity 140ms ease;
  pointer-events: none;
}

.profilePostThumbButton:hover .profilePostThumbShade,
.profilePostThumbButton:focus-visible .profilePostThumbShade {
  opacity: 1;
}

.profilePostThumbButton:focus-visible {
  outline: 2px solid rgba(122, 212, 255, 0.72);
  outline-offset: 2px;
}

.profilePostThumbBadge {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(7, 11, 17, 0.56);
  color: rgba(248, 251, 255, 0.94);
  backdrop-filter: blur(18px);
}

.profilePostThumbBadge svg {
  width: 14px;
  height: 14px;
}

.profilePostRecommendationReason {
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 9px;
  z-index: 3;
  display: -webkit-box;
  max-width: max-content;
  padding: 5px 8px;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.96);
  font-size: 10.5px;
  font-weight: 760;
  line-height: 1.2;
  text-align: left;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.72);
  background: rgba(5, 9, 16, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  backdrop-filter: blur(12px);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  pointer-events: none;
}

.profilePostList template {
  display: none !important;
}

@media (min-width: 760px) {
  .savedPage .profilePostList {
    gap: 12px;
  }
}

.cityPost--profileCard {
  padding: 0;
}

.cityPost--profileCard .cityPostFrame {
  min-height: min(72vh, 620px);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 18px 34px rgba(0, 0, 0, 0.24);
}

.cityPost--profileCard .cityPostChromeTop {
  padding: 14px 14px 0;
}

.cityPost--profileCard .cityPostChromeBottom {
  padding: 0 14px 14px;
}

.cityPost--profileCard .cityMediaDots {
  bottom: 128px;
}

.cityPost--profileCard .cityPostInfo--overlay {
  max-width: min(calc(100% - 82px), 30rem);
}

.cityPost--profileCard .cityPostActionIcon:not(.cityPostActionIcon--avatar) {
  background: transparent;
}

.cityPost--profileCard .cityPostMenuBtn {
  background: transparent;
}

.postViewerModal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 135;
}

.postViewerModal.is-open {
  display: flex;
}

.postViewerBackdrop {
  position: absolute;
  inset: 0;
  background: #03070d;
  backdrop-filter: none;
}

.postViewerShell {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  min-height: 100%;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  background: #03070d;
}

.postViewerStage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
}

.postViewerCanvas {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  --city-post-h: 100%;
}

.postViewerCanvas .cityPost {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  min-height: 100%;
}

.postViewerInstantCard {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  background: #03070d;
  color: rgba(248, 251, 255, 0.96);
}

.postViewerInstantVisual,
.postViewerInstantMedia,
.postViewerInstantFallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.postViewerInstantMedia {
  display: block;
  object-fit: cover;
}

.postViewerInstantFallback {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 20%, rgba(122, 212, 255, 0.18), transparent 44%),
    linear-gradient(160deg, rgba(15, 23, 42, 0.96), rgba(3, 7, 13, 1));
}

.postViewerInstantFallback svg {
  width: min(28vw, 116px);
  height: min(28vw, 116px);
  opacity: 0.76;
}

.postViewerInstantShade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(3, 7, 13, 0.08), rgba(3, 7, 13, 0.36) 48%, rgba(3, 7, 13, 0.92)),
    linear-gradient(90deg, rgba(3, 7, 13, 0.34), transparent 52%);
}

.postViewerInstantCopy {
  position: absolute;
  left: 18px;
  right: 78px;
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.postViewerInstantByline {
  color: rgba(210, 243, 255, 0.96);
  font-size: 13px;
  font-weight: 800;
}

.postViewerInstantCopy p {
  max-width: 32rem;
  margin: 0;
  color: rgba(248, 251, 255, 0.94);
  font-size: clamp(18px, 5vw, 28px);
  line-height: 1.1;
}

.postViewerCanvas .cityPostChrome {
  justify-content: space-between;
}

.postViewerCanvas .cityPostFrame {
  min-height: 0;
  border-radius: 0;
  background: #03070d;
}

.postViewerCanvas .cityPostChromeTop {
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--city-top-safe) + 38px) 14px 0;
  background: none;
  border-radius: 0;
}

.postViewerCanvas .cityPostChromeBottom {
  padding: 0 14px 18px;
  padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
}

.postViewerCanvas .cityMediaDots {
  bottom: calc(138px + env(safe-area-inset-bottom, 0px));
}

.postViewerCanvas .cityPostAction[data-open-post-viewer] {
  display: none;
}

.postViewerCanvas .cityPostMenu {
  align-self: center;
}

.postViewerCanvas .cityPostMenuBtn {
  width: 28px;
  height: 28px;
}

.postViewerClose {
  width: 52px;
  height: 52px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #fff;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.84));
}

.postViewerClose {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top, 0px));
  left: 0;
  z-index: 12;
}

.postViewerClose svg {
  width: 32px;
  height: 32px;
  display: block;
}

.postViewerClose:hover,
.postViewerClose:focus-visible,
.activityViewerClose:hover,
.activityViewerClose:focus-visible {
  color: rgba(248, 251, 255, 0.98);
}

.postViewerOpen,
.postViewerOpen body {
  overflow: hidden;
}

.postActionSheetOpen,
.postActionSheetOpen body {
  overflow: hidden;
}

.postActionModal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  /* Above both reel viewers, their comments, and the Map More sheet (360). */
  z-index: 370;
}

.postActionModal.is-open {
  display: flex;
}

.postActionModalBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 7, 11, 0.74);
  backdrop-filter: blur(14px);
}

.postActionModalCard {
  position: relative;
  z-index: 2;
  width: min(92vw, 420px);
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(18, 24, 34, 0.98), rgba(10, 14, 20, 0.98));
  box-shadow: 0 22px 42px rgba(0, 0, 0, 0.34);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.postActionModalEyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(201, 214, 230, 0.66);
}

.postActionModalTitle {
  margin: 0;
  font-size: 22px;
  line-height: 1.05;
  color: rgba(247, 251, 255, 0.98);
}

.postActionModalMeta {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(208, 217, 229, 0.74);
}

.postActionModalActions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.postActionModalActions .missionButton {
  width: auto;
}

.postReportForm {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.postReportLabel {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(201, 214, 230, 0.66);
}

.postReportForm textarea {
  min-height: 132px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(245, 250, 255, 0.96);
  resize: vertical;
}

.postActionToast {
  position: fixed;
  left: 50%;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 10px);
  min-width: 0;
  max-width: min(92vw, 360px);
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(9, 13, 19, 0.94);
  color: rgba(247, 251, 255, 0.96);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.32);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
  /* Errors must remain readable while a confirmation dialog is open. */
  z-index: 380;
}

.postActionToast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.postActionToast.is-error {
  border-color: rgba(255, 143, 143, 0.22);
  color: #ffd6d6;
}

.cityPost.is-text-only .cityPostBody {
  max-width: 52%;
}

.cityPostHeadline {
  display: block;
  color: rgba(247, 251, 255, 0.98);
  text-decoration: none;
  font-size: 24px;
  font-weight: 620;
  line-height: 1.04;
  letter-spacing: -0.03em;
}

.cityPostHeadline:hover,
.cityPostHeadline:focus-visible {
  text-decoration: none;
  color: rgba(247, 251, 255, 0.98);
  outline: none;
}

.cityPostMetaLine {
  font-size: 12px;
  line-height: 1.45;
  color: rgba(204, 214, 226, 0.8);
}

.cityPostCaptionActivity {
  margin-top: 2px;
}

.cityPostScopeState {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
}

.cityPost.is-text-only .cityPostCaption {
  display: none;
}

.cityPost--activityCard.is-text-only .cityPostCaptionActivity {
  display: -webkit-box;
}

.cityPost--activityCard.is-text-only .cityPostCaptionActivity.is-caption-inline-ready {
  display: block;
}

.cityEmpty {
  flex: 1;
  min-height: 100%;
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 24px 18px calc(var(--nav-height) + env(safe-area-inset-bottom) + 24px);
  text-align: center;
  border: none;
  background: transparent;
  box-shadow: none;
}

.cityEmptyTitle {
  font-size: 20px;
  font-weight: 700;
  color: rgba(245, 250, 255, 0.94);
}

.cityEmptyBtn {
  width: auto;
}

.cityFeedRetryState.appRecoveryStatus {
  display: flex;
  min-height: 100%;
}

.cityFeedRetryState .cityEmptyTitle {
  font-size: 14px;
  color: rgba(236, 244, 255, 0.84);
}

.cityCommentsSheet {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 120;
}

.cityCommentsSheet.cityCommentsSheet--viewer {
  z-index: 260;
}

.cityCommentsSheet.is-open {
  display: block;
}

.cityCommentsBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 5, 9, 0.22);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.cityCommentsPanel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(260px, 42vh, 680px);
  max-height: min(92vh, 760px);
  min-height: 220px;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 14px 20px calc(16px + env(safe-area-inset-bottom, 0px));
  border-radius: 28px 28px 0 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background:
    linear-gradient(180deg, rgba(12, 17, 28, 0.99), rgba(4, 7, 12, 0.995));
  box-shadow: 0 -16px 44px rgba(0, 0, 0, 0.38);
  transform: translateY(100%);
  transition: transform 220ms ease;
  overflow: hidden;
  box-sizing: border-box;
}

.cityCommentsSheet.is-open .cityCommentsPanel {
  transform: translateY(0);
}

.cityCommentsSheetGrab {
  flex-shrink: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin: 0 -20px;
  padding: 6px 20px 16px;
  min-height: 56px;
  box-sizing: border-box;
  touch-action: none;
  cursor: grab;
  -webkit-tap-highlight-color: transparent;
}

.cityCommentsSheetGrab:active {
  cursor: grabbing;
}

.cityCommentsHandle {
  width: 44px;
  height: 5px;
  border-radius: 999px;
  align-self: center;
  margin-bottom: 0;
  background: rgba(145, 163, 186, 0.38);
  flex-shrink: 0;
  touch-action: none;
  pointer-events: none;
}

.cityCommentsScroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.cityCommentsScroll::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.cityCommentsDescription {
  padding: 0 0 20px;
  margin-bottom: 0;
  border-bottom: 0;
}

.cityCommentsDescription.is-empty {
  display: none;
}

.cityCommentsDescLayout {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  column-gap: 17px;
  row-gap: 0;
  align-items: start;
}

.cityCommentsDescAvatar,
.cityCommentsDescContent {
  transform: translateX(-0.4px);
}

.cityCommentsDescAvatar {
  position: relative;
  width: 58px;
  height: 58px;
  margin-top: 1px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.07);
}

.cityCommentsDescAvatarButton {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  display: grid;
  place-items: center;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(255, 255, 255, 0.17);
  background: rgba(255, 255, 255, 0.07);
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.045);
  -webkit-tap-highlight-color: transparent;
}

.cityCommentsDescAvatarButton:focus-visible {
  outline: 2px solid rgba(56, 189, 248, 0.7);
  outline-offset: 3px;
}

.cityCommentsDescAvatarButton img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.cityCommentsDescAvatarFallback {
  font-size: 18px;
  line-height: 1;
  font-weight: 800;
  color: rgba(125, 211, 252, 0.94);
}

.cityCommentsDescOwnerLine {
  min-width: 0;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 7px;
}

.cityCommentsDescOwnerActionSlot {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
}

.cityCommentsDescOwnerAction {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(125, 211, 252, 0.42);
  background: linear-gradient(180deg, #38bdf8 0%, #0284c7 100%);
  color: #fff;
  font-size: 18px;
  font-weight: 760;
  line-height: 1;
  box-shadow: 0 5px 12px rgba(2, 132, 199, 0.24);
  cursor: pointer;
  padding: 0;
  transform: translateY(1px);
  -webkit-tap-highlight-color: transparent;
}

.cityCommentsDescOwnerAction.is-active {
  background: linear-gradient(180deg, #38bdf8 0%, #0369a1 100%);
  font-size: 20px;
}

.cityCommentsDescOwnerAction:disabled {
  opacity: 0.72;
  cursor: default;
}

.cityCommentsDescOwnerAction:focus-visible {
  outline: 2px solid rgba(125, 211, 252, 0.8);
  outline-offset: 2px;
}

.cityCommentsDescContent {
  min-width: 0;
  align-self: start;
}

.cityCommentsDescByline {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding-top: 6px;
}

.cityCommentsDescAuthor {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0;
  color: rgba(247, 250, 255, 0.98);
  line-height: 1.16;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cityCommentsDescMeta {
  font-size: 14px;
  font-weight: 570;
  line-height: 1.2;
  color: rgba(181, 193, 210, 0.58);
  white-space: nowrap;
}

.cityCommentsDescBody {
  grid-column: 1 / -1;
  min-width: 0;
  margin-top: 18px;
  transform: translateX(2px);
}

.cityCommentsDescBody > :first-child {
  margin-top: 0;
}

.cityCommentsDescHeadline {
  margin-top: 18px;
  font-size: 22px;
  font-weight: 820;
  letter-spacing: 0;
  color: rgba(247, 250, 255, 0.98);
  line-height: 1.16;
  overflow-wrap: anywhere;
}

.cityCommentsDescText {
  margin-top: 7.2px;
  font-size: 17px;
  line-height: 1.45;
  color: rgba(215, 224, 236, 0.72);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.cityCommentsDescText--post {
  margin-top: 14px;
  color: rgba(226, 234, 244, 0.84);
}

.cityCommentsDescDetailsMeta {
  margin-top: 11.7px;
  max-width: 100%;
  display: grid;
  gap: 7px;
  font-size: 13px;
  font-weight: 570;
  line-height: 1.35;
  color: rgba(190, 201, 218, 0.64);
}

.cityCommentsDescMetaItem {
  min-width: 0;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 7px;
}

.cityCommentsDescMetaIcon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: rgba(190, 201, 218, 0.78);
}

.cityCommentsDescMetaIcon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.cityCommentsDescMetaText {
  min-width: 0;
  overflow-wrap: anywhere;
}

.cityCommentsDescMetaDot {
  color: rgba(190, 201, 218, 0.42);
  font-size: 14px;
  line-height: 1;
}

.cityCommentsListWrap {
  padding-top: 16px;
  flex: 1 1 auto;
  min-height: 0;
}

.cityCommentsMessage,
.cityCommentsScroll .broadcast-comments-empty,
.cityCommentsLogin {
  padding: 10px 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(186, 198, 216, 0.78);
  font-size: 14px;
  line-height: 1.45;
}

.cityCommentsLogin {
  flex-shrink: 0;
}

.broadcast-comments-retry {
  appearance: none;
  margin-left: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent, #7ad4ff);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.cityCommentsScroll .broadcast-comments-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 4px 0 8px;
}

.cityCommentsScroll .broadcast-comment-thread {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.cityCommentsScroll .broadcast-comments-list > .broadcast-comment-thread {
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.cityCommentsScroll .broadcast-comments-list > .broadcast-comment-thread:last-child {
  margin-bottom: 0;
  padding-bottom: 4px;
  border-bottom: 0;
}

.cityCommentsScroll .broadcast-comment-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0 4px;
  margin: 0;
  border-radius: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.cityCommentsScroll .broadcast-comment-item--reply {
  padding-top: 8px;
}

.cityCommentsScroll .broadcast-comment-replies {
  padding: 2px 0 4px 12px;
  margin: 0 0 0 8px;
  border-left: 1px solid rgba(255, 255, 255, 0.07);
}

.cityCommentsScroll .broadcast-comment-replies .broadcast-comment-thread {
  margin-bottom: 6px;
  padding-bottom: 2px;
}

.cityCommentsScroll .broadcast-comment-replies .broadcast-comment-thread:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}

.cityCommentsScroll .broadcast-comment-replies .broadcast-comment-avatar {
  width: 28px;
  height: 28px;
}

.cityCommentsScroll .broadcast-comment-replies .broadcast-comment-avatarFallback {
  font-size: 11px;
}

.cityCommentsScroll .broadcast-comment-repliesToggle {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  width: fit-content;
  max-width: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: 0;
  color: rgba(168, 188, 214, 0.78);
  cursor: pointer;
  align-self: center;
  text-align: left;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  box-shadow: none;
  transition: color 0.12s ease, opacity 0.12s ease;
}

.cityCommentsScroll .broadcast-comments-list > .broadcast-comment-thread > .broadcast-comment-repliesToggle {
  padding-left: 48px;
}

.cityCommentsScroll .broadcast-comment-replies .broadcast-comment-thread > .broadcast-comment-repliesToggle {
  padding-left: 40px;
}

.cityCommentsScroll .broadcast-comment-repliesChevron {
  display: inline-flex;
  flex-shrink: 0;
  line-height: 0;
  transition: transform 0.18s ease;
  color: rgba(156, 176, 202, 0.88);
}

.cityCommentsScroll .broadcast-comment-repliesToggle.is-expanded .broadcast-comment-repliesChevron {
  transform: rotate(180deg);
}

.cityCommentsScroll .broadcast-comment-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  display: grid;
  place-items: center;
}

.cityCommentsScroll .broadcast-comment-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cityCommentsScroll .broadcast-comment-avatarFallback {
  font-size: 12px;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: rgba(122, 212, 255, 0.9);
}

.cityCommentsScroll .broadcast-comment-main {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
}

.cityCommentsScroll .broadcast-comment-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
}

.cityCommentsScroll .broadcast-comment-author {
  font-size: 14px;
  font-weight: 700;
  color: rgba(244, 248, 252, 0.96);
  text-decoration: none;
}

.cityCommentsScroll .broadcast-comment-time {
  font-size: 12px;
  font-weight: 500;
  color: rgba(168, 184, 204, 0.62);
}

.cityCommentsScroll .broadcast-comment-text {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(214, 224, 238, 0.9);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.cityCommentsScroll .broadcast-comment-actions {
  margin-top: 7px;
  display: inline-flex;
  width: auto;
  max-width: 100%;
  min-width: 0;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  flex-wrap: nowrap;
}

.cityCommentsScroll .broadcast-comment-actionGroup {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  width: fit-content;
  max-width: 100%;
}

.cityCommentsScroll .broadcast-comment-reply {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  color: rgba(186, 198, 216, 0.82);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: none;
  letter-spacing: 0;
  transition: color 0.12s ease, opacity 0.12s ease;
}

.cityCommentsScroll .broadcast-comment-like {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: rgba(186, 198, 216, 0.72);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: none;
  letter-spacing: 0;
  transition: color 0.12s ease, opacity 0.12s ease, transform 0.12s ease;
}

.cityCommentsScroll .broadcast-comment-like.is-active {
  color: rgba(122, 212, 255, 0.95);
}

.cityCommentsScroll .broadcast-comment-likeIcon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.cityCommentsScroll .broadcast-comment-likeCount {
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  color: currentColor;
}

.cityCommentsScroll .broadcast-comment-menu {
  flex: 0 0 auto;
  position: relative;
  align-self: flex-start;
  margin-top: -1px;
  margin-left: 2px;
}

.cityCommentsScroll .broadcast-comment-menuToggle {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  display: grid;
  place-items: center;
  color: rgba(186, 198, 216, 0.76);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: none;
  transition: color 0.12s ease, background 0.12s ease, opacity 0.12s ease;
}

.cityCommentsScroll .broadcast-comment-menuToggle svg {
  width: 18px;
  height: 18px;
  display: block;
}

.cityCommentsScroll .broadcast-comment-menu.is-open .broadcast-comment-menuToggle {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(244, 249, 255, 0.94);
}

.cityCommentsScroll .broadcast-comment-menuPanel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 8;
  min-width: 132px;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(13, 18, 28, 0.98);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34);
}

.cityCommentsScroll .broadcast-comment-menuPanel[hidden] {
  display: none !important;
}

.cityCommentsScroll .broadcast-comment-menuItem {
  width: 100%;
  min-height: 34px;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: rgba(229, 237, 248, 0.92);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.1;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
}

.cityCommentsScroll .broadcast-comment-menuItem.is-danger,
.cityCommentsScroll .broadcast-comment-delete {
  color: rgba(255, 140, 158, 0.94);
}

.cityCommentsScroll .broadcast-comment-reply:hover,
.cityCommentsScroll .broadcast-comment-like:hover,
.cityCommentsScroll .broadcast-comment-repliesToggle:hover {
  transform: none;
  box-shadow: none;
  border-color: transparent;
  background: transparent;
  color: rgba(229, 237, 248, 0.94);
}

.cityCommentsScroll .broadcast-comment-menuToggle:hover,
.cityCommentsScroll .broadcast-comment-menuItem:hover {
  transform: none;
  box-shadow: none;
  border-color: transparent;
  background: rgba(255, 255, 255, 0.055);
}

.cityCommentsScroll .broadcast-comment-reply:focus,
.cityCommentsScroll .broadcast-comment-reply:focus-visible,
.cityCommentsScroll .broadcast-comment-repliesToggle:focus,
.cityCommentsScroll .broadcast-comment-repliesToggle:focus-visible,
.cityCommentsScroll .broadcast-comment-like:focus,
.cityCommentsScroll .broadcast-comment-like:focus-visible,
.cityCommentsScroll .broadcast-comment-delete:focus,
.cityCommentsScroll .broadcast-comment-delete:focus-visible,
.cityCommentsScroll .broadcast-comment-menuToggle:focus,
.cityCommentsScroll .broadcast-comment-menuToggle:focus-visible,
.cityCommentsScroll .broadcast-comment-menuItem:focus,
.cityCommentsScroll .broadcast-comment-menuItem:focus-visible {
  outline: none;
  box-shadow: none;
}

.cityCommentsScroll .broadcast-comment-reply:active,
.cityCommentsScroll .broadcast-comment-repliesToggle:active {
  opacity: 0.82;
  transform: none;
}

.cityCommentsComposer {
  flex-shrink: 0;
  padding-top: 10px;
  margin-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.cityCommentsForm {
  margin-top: 0;
}

.cityCommentsOpen,
.cityCommentsOpen body {
  overflow: hidden;
}

.cityCommentsOpen .citySnapFeed {
  overflow: hidden;
}

body.appFrame.cityPage {
  overflow: hidden;
}

body.appFrame.cityPage .appShell,
body.appFrame.cityPage .app-shell {
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  overflow: hidden;
}

@supports (height: 100dvh) {
  body.appFrame.cityPage .appShell,
  body.appFrame.cityPage .app-shell {
    height: 100dvh;
    min-height: 100dvh;
    max-height: 100dvh;
  }
}

@media (min-width: 720px) {
  body.appFrame.cityPage .appShell,
  body.appFrame.cityPage .app-shell {
    height: calc(100vh - 36px);
    min-height: calc(100vh - 36px);
    max-height: calc(100vh - 36px);
  }
}

@supports (height: 100dvh) {
  @media (min-width: 720px) {
    body.appFrame.cityPage .appShell,
    body.appFrame.cityPage .app-shell {
      height: calc(100dvh - 36px);
      min-height: calc(100dvh - 36px);
      max-height: calc(100dvh - 36px);
    }
  }
}

body.appFrame.cityPage .appContent,
body.appFrame.cityPage .app-content {
  flex: 1 1 auto;
  min-height: 0;
  padding-bottom: 0;
  overflow: hidden;
}

body.appFrame.cityPage .cityContent {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

.cityPage .cityFeedStage {
  flex: 1 1 auto;
  min-height: 0;
}

.cityPage .dock {
  position: fixed;
  bottom: 0;
  flex: 0 0 auto;
  background: var(--bg);
  border-top: 1px solid rgba(255, 255, 255, 0.055);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  z-index: 90;
}

@media (max-width: 720px) {
  .cityTopBar {
    gap: 9px 10px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .cityTopBar .headerActions {
    transform: scale(0.96);
    transform-origin: top right;
  }

  .cityFeedOverlay {
    padding-left: 12px;
    padding-right: 12px;
  }

  .cityFeedOverlayTabs {
    width: auto;
    max-width: 100%;
  }

  .cityFeedOverlayTabs .topTabsLink {
    padding: 0 3px 10px;
  }

  .cityPost {
    padding: 0;
  }

  .cityMediaDots {
    bottom: calc(124px + env(safe-area-inset-bottom, 0px));
  }

  .cityPost--activityCard .cityMediaDots {
    bottom: calc(118px + env(safe-area-inset-bottom, 0px));
  }

  .cityPostChromeTop {
    padding: calc(var(--city-top-safe) + 48px) 12px 0;
  }

  .cityPage .cityPostChromeTop {
    padding: calc(var(--city-top-safe) + 36px) 12px 0;
  }

  .cityPostChromeBottom {
    padding: 0 12px 14px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }

  .cityPost--activityCard .cityPostChromeBottom {
    gap: 3px;
    padding: 0 12px 12px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }

  .cityPostStatus--overlay {
    max-width: min(100%, 16rem);
  }

  .cityPostInfo--overlay {
    max-width: min(calc(100% - 70px), 20rem);
    gap: 4px;
  }

  .cityPost--activityCard .cityPostInfo--overlay {
    gap: 3px;
  }

  .cityPost--activityCard .cityPostBylineAuthor {
    font-size: 12.5px;
  }

  .cityPost--activityCard .cityPostBylineMeta {
    font-size: 10px;
  }

  .cityPost--activityCard .cityPostMetaLine--feed {
    font-size: 10.5px;
  }

  .cityPost--activityCard .cityPostCaption--feed.cityPostCaptionActivity {
    --caption-preview-lines: 2;
    --caption-line-height: 1.24em;
    font-size: 13.5px;
    line-height: 1.24;
    -webkit-line-clamp: 2;
  }

  .cityPostRail--overlay {
    flex-basis: 56px;
    min-width: 56px;
    gap: 9px;
  }

  .cityPostAction {
    width: 52px;
    min-width: 52px;
  }

  .cityPostMenu--rail {
    width: 52px;
    min-width: 52px;
  }

  .cityPostActionIcon {
    width: 38px;
    height: 38px;
  }

  .cityPostActionIcon--avatar {
    width: 42px;
    height: 42px;
  }

  .cityPostShell {
    border-radius: 0;
  }

  .cityPostOverlay {
    padding: 14px 12px 18px;
    grid-template-columns: minmax(0, 1fr) 64px;
  }

  .cityPostBody {
    max-width: calc(100% - 20px);
  }

  .cityPost.is-text-only .cityPostBody {
    max-width: 60%;
  }

  .cityPostTextHero {
    font-size: clamp(24px, 8.6vw, 36px);
  }

  .cityPost--profileCard .cityPostFrame {
    min-height: min(68vh, 560px);
    border-radius: 22px;
  }

  .postViewerShell {
    padding: 0;
  }

  .postViewerStage {
    height: 100%;
  }

  .cityPostActionSheetPanel {
    max-height: min(88vh, 720px);
    padding: 14px 18px calc(20px + env(safe-area-inset-bottom, 0px));
  }

  .cityPostActionSheetTileGrid {
    grid-template-columns: repeat(3, minmax(0, 88px));
    gap: 12px;
  }

  .cityPostActionSheetTile,
  a.cityPostActionSheetTile {
    width: 88px;
    min-height: 84px;
    padding-left: 6px;
    padding-right: 6px;
  }
}

@media (max-width: 480px) {
  .cityTopBar {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand actions"
      "search search"
      "utility utility";
  }

  .cityTopBar .headerActions {
    align-self: center;
  }

  .cityFeedOverlay {
    padding-left: 10px;
    padding-right: 10px;
  }

  .cityFeedChip {
    min-height: 26px;
    padding: 0 9px;
    font-size: 9px;
  }

  .cityFeedOverlayTabs {
    width: auto;
    max-width: 100%;
  }

  .cityFeedOverlayTabs .topTabs {
    gap: clamp(22px, 6vw, 34px);
  }

  .cityFeedOverlayTabs .topTabsLink {
    min-height: 46px;
    padding: 0 3px 10px;
    font-size: 17.5px;
  }

  .cityFeedOverlayActions .headerActions,
  .cityFeedOverlayActions .headerIconRow {
    gap: 4px;
  }

  .cityFeedOverlayActions .headerActionBtn,
  .cityFeedOverlayActions .headerMenuBtn {
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
  }

  .cityFeedIndex {
    min-width: 44px;
    font-size: 9px;
  }

  .cityMediaDots {
    bottom: calc(108px + env(safe-area-inset-bottom, 0px));
  }

  .cityPost--activityCard .cityMediaDots {
    bottom: calc(102px + env(safe-area-inset-bottom, 0px));
  }

  .cityPostChromeTop {
    padding: calc(var(--city-top-safe) + 44px) 10px 0;
  }

  .cityPage .cityPostChromeTop {
    padding: calc(var(--city-top-safe) + 34px) 10px 0;
  }

  .cityPostChromeBottom {
    padding: 0 10px 12px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }

  .cityPost--activityCard .cityPostChromeBottom {
    gap: 3px;
    padding: 0 10px 10px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }

  .cityPostTopMain {
    gap: 6px;
    padding-right: 2px;
  }

  .cityPostStatus--overlay {
    max-width: calc(100% - 6px);
    gap: 4px;
  }

  .cityPostStatus--overlay .cityPostBadge,
  .cityPostStatus--overlay .cityPostScope {
    min-height: 20px;
    padding: 0 8px;
    font-size: 8px;
  }

  .cityPostInfo--overlay {
    max-width: calc(100% - 60px);
    gap: 4px;
  }

  .cityPost--activityCard .cityPostInfo--overlay {
    gap: 3px;
  }

  .cityPost--activityCard .cityPostBylineAuthor {
    font-size: 12.5px;
  }

  .cityPost--activityCard .cityPostBylineMeta {
    font-size: 9.5px;
  }

  .cityPostHeadline--feed {
    font-size: 17px;
  }

  .cityPostMetaLine--feed {
    font-size: 11px;
  }

  .cityPost--activityCard .cityPostMetaLine--feed {
    font-size: 10px;
    line-height: 1.2;
  }

  .cityPostCaption--feed {
    font-size: 13px;
    -webkit-line-clamp: 2;
  }

  .cityPostCaption--feed.cityPostCaptionActivity {
    -webkit-line-clamp: 3;
  }

  .cityPost--activityCard .cityPostCaption--feed.cityPostCaptionActivity {
    font-size: 13px;
    line-height: 1.22;
    -webkit-line-clamp: 2;
  }

  .cityPostRail {
    gap: 10px;
  }

  .cityPostRail--overlay {
    flex-basis: 52px;
    min-width: 52px;
    gap: 8px;
  }

  .cityPostAction {
    width: 48px;
    min-width: 48px;
  }

  .cityPostMenu--rail {
    width: 48px;
    min-width: 48px;
  }

  .cityPostActionIcon {
    width: 36px;
    height: 36px;
  }

  .cityPostActionIcon--avatar {
    width: 40px;
    height: 40px;
  }

  .cityPostActionLabel {
    font-size: 9px;
    letter-spacing: 0.02em;
  }

  .cityPostCaptionArrow {
    font-size: 0.82em;
  }

  .cityPostActionCount {
    font-size: 10px;
  }

  .cityCommentsPanel {
    max-height: 86vh;
    padding: 12px 18px calc(14px + env(safe-area-inset-bottom, 0px));
    border-radius: 28px 28px 0 0;
  }

  .cityCommentsDescLayout {
    grid-template-columns: 52px minmax(0, 1fr);
    column-gap: 14px;
  }

  .cityCommentsDescAvatar {
    width: 52px;
    height: 52px;
  }

  .cityCommentsDescOwnerLine {
    gap: 6px;
  }

  .cityCommentsDescOwnerAction {
    width: 21px;
    height: 21px;
    font-size: 17px;
  }

  .cityCommentsDescByline {
    gap: 4px;
    padding-top: 5px;
  }

  .cityCommentsDescAuthor {
    font-size: 17px;
  }

  .cityCommentsDescMeta {
    font-size: 13px;
  }

  .cityCommentsDescHeadline {
    margin-top: 16px;
    font-size: 20px;
  }

  .cityCommentsDescText {
    font-size: 16px;
  }

  .cityCommentsDescDetailsMeta {
    font-size: 12.5px;
  }

  .cityPost--profileCard .cityPostFrame {
    min-height: min(64vh, 480px);
    border-radius: 20px;
  }

  .cityPost--profileCard .cityPostChromeTop {
    padding: 12px 12px 0;
  }

  .cityPost--profileCard .cityPostChromeBottom {
    padding: 0 12px 12px;
  }

  .postViewerCanvas {
    width: 100%;
    height: 100%;
  }

  .postViewerCanvas .cityPostFrame {
    border-radius: 0;
  }

  .postViewerClose {
    top: calc(12px + env(safe-area-inset-top, 0px));
    right: auto;
    left: 0;
    width: 52px;
    height: 52px;
  }

  .postActionModalCard {
    padding: 16px;
    border-radius: 20px;
  }

  .postActionModalTitle {
    font-size: 20px;
  }

  .cityPostActionSheetPanel {
    padding: 16px 16px calc(20px + env(safe-area-inset-bottom, 0px));
    border-radius: 24px 24px 0 0;
    gap: 18px;
  }

  .cityPostActionSheetTitle {
    font-size: 22px;
  }

  .cityPostActionSheetTileGrid {
    gap: 10px;
  }

  .cityPostActionSheetTile,
  a.cityPostActionSheetTile {
    min-height: 82px;
    padding-top: 12px;
    padding-bottom: 11px;
  }

  .cityPostActionSheetTileIcon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }

  .cityPostActionSheetTileLabel {
    font-size: 13px;
  }

  .cityPostActionSheetRow,
  a.cityPostActionSheetRow {
    min-height: 54px;
    padding-left: 14px;
    padding-right: 14px;
  }

  .cityPostActionSheetRowText {
    font-size: 14px;
  }
}

@media (max-width: 360px) {
  .cityFeedOverlayTabs .topTabs {
    gap: 16px;
  }

  .cityFeedOverlayTabs .topTabsLink {
    font-size: 16.75px;
  }
}

.cityFeedCardRail .cityPostRail--overlay {
  --city-feed-rail-icon-size: 30px;
  --city-feed-rail-avatar-size: 40px;
  --city-feed-rail-slot-size: 54px;
  justify-self: end;
  align-items: center;
  flex: 0 0 auto;
  flex-basis: auto;
  width: var(--city-feed-rail-slot-size);
  min-width: 0;
  gap: 13px;
}

.cityFeedCardRail .cityPostChromeBottom {
  padding-right: 0;
}

.cityFeedCardRail .cityPost--activityCard .cityPostChromeBottom {
  padding-right: 0;
}

.cityFeedCardRail .cityPostBottomPanel {
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 8px;
}

.cityFeedCardRail .cityPostRail--overlay .cityPostAction,
.cityFeedCardRail .cityPostRail--overlay .cityPostMenu--rail {
  width: var(--city-feed-rail-slot-size);
  min-width: 0;
}

.cityFeedCardRail .cityPostRail--overlay .cityPostAction--profile {
  width: var(--city-feed-rail-slot-size);
}

.cityFeedCardRail .cityPostRail--overlay .cityPostAction {
  position: relative;
  min-height: 48px;
  padding: 4px 0;
  justify-content: center;
  align-items: center;
  gap: 2px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.cityFeedCardRail .cityPostRail--overlay .cityPostMenu--rail {
  align-items: center;
  min-height: 48px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.cityFeedCardRail .cityPostRail--overlay .cityPostMenu--rail [data-post-menu-toggle] {
  min-height: 48px;
  padding: 4px 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.cityFeedCardRail .cityPostRail--overlay .cityPostActionIcon:not(.cityPostActionIcon--avatar) {
  width: var(--city-feed-rail-icon-size);
  height: var(--city-feed-rail-icon-size);
}

.cityFeedCardRail .cityPostRail--overlay .cityPostActionIcon--avatar {
  width: var(--city-feed-rail-avatar-size);
  height: var(--city-feed-rail-avatar-size);
}

.cityFeedCardRail .cityPostRail--overlay .cityPostActionIcon:not(.cityPostActionIcon--avatar) {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.cityFeedCardRail .cityPostRail--overlay .cityPostActionIcon:not(.cityPostActionIcon--avatar) svg {
  width: 29.7px;
  height: 29.7px;
}

.cityFeedCardRail .cityPostRail--overlay .cityPostAction.is-active .cityPostActionIcon:not(.cityPostActionIcon--avatar),
.cityFeedCardRail .cityPostRail--overlay .cityPostAction[aria-pressed="true"] .cityPostActionIcon:not(.cityPostActionIcon--avatar),
.cityFeedCardRail .cityPostRail--overlay .cityPostMenu--rail [data-post-menu-toggle][aria-expanded="true"] .cityPostActionIcon:not(.cityPostActionIcon--avatar) {
  background: transparent;
  border-color: transparent;
  color: rgba(122, 212, 255, 0.96);
}

.cityFeedCardRail .cityPostRail--overlay .cityPostActionLabel {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.cityFeedCardRail .cityPostRail--overlay .cityPostActionCount {
  display: block;
  min-width: 0;
  max-width: 100%;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
  line-height: 1;
  font-weight: 750;
  letter-spacing: 0;
  color: rgba(244, 249, 255, 0.92);
  text-align: center;
  text-shadow: none;
}

.cityFeedCardRail .cityPostCaptionWrap {
  margin: -6px -4px;
  padding: 6px 4px;
}

.cityFeedCardRail .cityPostCaption.cityPostCaption--feed {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.cityPostRail .cityPostAction,
.cityPostRail .cityPostAction:hover,
.cityPostRail .cityPostAction:focus,
.cityPostRail .cityPostAction:focus-visible,
.cityPostRail .cityPostAction:active,
.cityPostRail .cityPostAction.is-active,
.cityPostRail .cityPostAction[aria-pressed="true"],
.cityPostRail .cityPostAction[aria-expanded="true"],
.cityPostMenu--rail [data-post-menu-toggle],
.cityPostMenu--rail [data-post-menu-toggle]:hover,
.cityPostMenu--rail [data-post-menu-toggle]:focus,
.cityPostMenu--rail [data-post-menu-toggle]:focus-visible,
.cityPostMenu--rail [data-post-menu-toggle]:active,
.cityPostMenu--rail [data-post-menu-toggle][aria-expanded="true"],
.cityPostMenu .iconBtn,
.cityPostMenu .iconBtn:hover,
.cityPostMenu .iconBtn:focus,
.cityPostMenu .iconBtn:focus-visible,
.cityPostMenu .iconBtn:active,
.cityPostMenuBtn,
.cityPostMenuBtn:hover,
.cityPostMenuBtn:focus,
.cityPostMenuBtn:focus-visible,
.cityPostMenuBtn:active,
.postViewerCanvas .cityPostMenuBtn,
.postViewerCanvas .cityPostMenuBtn:hover,
.postViewerCanvas .cityPostMenuBtn:focus,
.postViewerCanvas .cityPostMenuBtn:focus-visible,
.postViewerCanvas .cityPostMenuBtn:active,
.cityPost--activityCard .vibeAudioPlayBtn--overlay,
.cityPost--activityCard .vibeAudioPlayBtn--overlay:hover,
.cityPost--activityCard .vibeAudioPlayBtn--overlay:focus,
.cityPost--activityCard .vibeAudioPlayBtn--overlay:focus-visible,
.cityPost--activityCard .vibeAudioPlayBtn--overlay:active {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
  transform: none !important;
}

.cityPostRail .cityPostAction::before,
.cityPostRail .cityPostAction::after,
.cityPostRail .cityPostActionIcon:not(.cityPostActionIcon--avatar)::before,
.cityPostRail .cityPostActionIcon:not(.cityPostActionIcon--avatar)::after,
.cityPostMenu--rail [data-post-menu-toggle]::before,
.cityPostMenu--rail [data-post-menu-toggle]::after,
.cityPostMenuBtn::before,
.cityPostMenuBtn::after,
.cityPostMenu .iconBtn::before,
.cityPostMenu .iconBtn::after,
.cityPost--activityCard .vibeAudioPlayBtn--overlay::before,
.cityPost--activityCard .vibeAudioPlayBtn--overlay::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
}

.cityPostRail .cityPostActionIcon:not(.cityPostActionIcon--avatar),
.cityPostRail .cityPostAction:hover .cityPostActionIcon:not(.cityPostActionIcon--avatar),
.cityPostRail .cityPostAction:focus .cityPostActionIcon:not(.cityPostActionIcon--avatar),
.cityPostRail .cityPostAction:focus-visible .cityPostActionIcon:not(.cityPostActionIcon--avatar),
.cityPostRail .cityPostAction:active .cityPostActionIcon:not(.cityPostActionIcon--avatar),
.cityPostRail .cityPostAction.is-active .cityPostActionIcon:not(.cityPostActionIcon--avatar),
.cityPostRail .cityPostAction[aria-pressed="true"] .cityPostActionIcon:not(.cityPostActionIcon--avatar),
.cityPostMenu--rail [data-post-menu-toggle][aria-expanded="true"] .cityPostActionIcon:not(.cityPostActionIcon--avatar) {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
}

.cityPostRail .cityPostActionLabel,
.cityPostRail .cityPostActionCount {
  text-shadow: none !important;
}

.profileIdentityCard {
  display: none;
}

.profileIdentityCurrent {
  display: none;
}

.profileIdentityLabel {
  display: none;
}

.profileIdentitySwitcher {
  position: relative;
  z-index: 320;
  isolation: isolate;
}

.profileIdentitySwitcherHeader {
  flex: 0 0 auto;
}

.profileIdentitySwitcherButton {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  /* The global button rule sets min-height: 46px; without this override it
     wins over height and stretches the trigger tall, so the avatar crops to
     an oval instead of a circle. */
  min-height: 38px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: border-color 0.18s ease, background 0.18s ease;
  z-index: 4;
  outline: none;
}

.profileIdentitySwitcherButton:hover,
.profileIdentitySwitcherButton:focus-visible,
.profileIdentitySwitcherButton[aria-expanded="true"] {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.08);
}

.profileIdentityDrawer {
  position: fixed;
  inset: 0;
  z-index: 280;
  display: none;
  pointer-events: none;
  overflow: hidden;
}

.profileIdentityDrawer.is-open {
  display: block;
  pointer-events: auto;
}

.profileIdentityDrawerBackdrop {
  position: fixed;
  inset: 0;
  background: rgba(5, 9, 15, 0.4);
  opacity: 0;
  z-index: 0;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0;
  min-height: 0;
  min-width: 0;
  width: auto;
  height: auto;
  appearance: none;
  outline: none;
  cursor: default;
  touch-action: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 220ms ease;
  box-shadow: none;
}

.profileIdentityDrawer.is-open .profileIdentityDrawerBackdrop {
  opacity: 1;
}

.profileIdentityDrawerPanel {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(82vw, 420px);
  max-width: min(82vw, 420px);
  display: flex;
  flex-direction: column;
  gap: 0;
  padding:
    calc(4px + env(safe-area-inset-top, 0px))
    14px
    calc(12px + env(safe-area-inset-bottom, 0px))
    calc(12px + env(safe-area-inset-left, 0px));
  box-sizing: border-box;
  border-radius: 0 20px 0 0;
  border-right: none;
  background:
    linear-gradient(180deg, rgba(13, 18, 28, 0.99), rgba(5, 8, 14, 0.995));
  border-left: 0;
  border-top: 0;
  color: var(--text);
  outline: none;
  box-shadow: 0 0 28px rgba(0, 0, 0, 0.38);
  transform: translate3d(-100%, 0, 0);
  z-index: 2;
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease;
  overflow: hidden;
  will-change: transform, opacity;
  pointer-events: auto;
  opacity: 0;
}

.profileIdentityDrawer.is-open .profileIdentityDrawerPanel {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.profileIdentityDrawerHeading {
  display: grid;
  align-content: start;
  gap: 22px;
  margin: 0;
}

.profileIdentityActiveProfile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 0 0;
}

/* The name/handle block navigates; the caret dismisses. They sit on one line
   but must stay separate hit targets, so the link cannot wrap the caret. */
.profileIdentityActiveProfileLink {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px;
  margin: -2px;
  border-radius: 16px;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 160ms ease;
}

.profileIdentityActiveProfileLink:hover {
  text-decoration: none;
}

.profileIdentityActiveProfileLink:active {
  background: rgba(255, 255, 255, 0.05);
}

.profileIdentityActiveProfileLink:focus-visible {
  outline: 2px solid rgba(104, 204, 255, 0.8);
  outline-offset: 2px;
}

.profileIdentityActiveProfileAvatar {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 22% 20%, rgba(104, 204, 255, 0.9), rgba(104, 204, 255, 0.1) 42%),
    linear-gradient(145deg, rgba(35, 39, 48, 0.98), rgba(16, 19, 27, 0.98));
  color: #f5eed8;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.profileIdentityActiveProfileAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profileIdentityActiveProfileMeta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.profileIdentityActiveProfileName {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profileIdentityActiveProfileHandle {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.62);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profileIdentityActiveProfileCaret {
  position: relative;
  flex: 0 0 auto;
  margin-left: auto;
  width: 26px;
  height: 26px;
  /* Override the global button min-height (46px) that would stretch this into
     a tall oval. */
  min-height: 26px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.03);
  color: #68ccff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

/* Keep the visible circle the size the design asks for while the tappable
   area stays a full touch target. */
.profileIdentityActiveProfileCaret::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

.profileIdentityActiveProfileCaret:active {
  transform: scale(0.92);
  border-color: rgba(104, 204, 255, 0.45);
  background: rgba(104, 204, 255, 0.14);
}

.profileIdentityActiveProfileCaret:focus-visible {
  outline: 2px solid rgba(104, 204, 255, 0.8);
  outline-offset: 2px;
}

.profileIdentityActiveProfileCaret svg {
  width: 12px;
  height: 12px;
}

.profileIdentityCreditsSection {
  display: grid;
  gap: 10px;
}

.profileIdentityCreditsCard {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 0;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.profileIdentityCreditsCard:hover {
  text-decoration: none;
}

.profileIdentityCreditsCard:active {
  border-color: rgba(104, 204, 255, 0.35);
  background: rgba(104, 204, 255, 0.1);
}

.profileIdentityCreditsCard:focus-visible {
  outline: 2px solid rgba(104, 204, 255, 0.8);
  outline-offset: 2px;
}

.profileIdentityCreditsIcon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: rgba(104, 204, 255, 0.1);
  color: #68ccff;
}

.profileIdentityCreditsIcon svg {
  width: 20px;
  height: 20px;
}

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

.profileIdentityCreditsChevron {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.45);
}

.profileIdentityCreditsChevron svg {
  width: 15px;
  height: 15px;
}

.profileIdentityCreditsAmount {
  display: block;
  font-size: 24px;
  line-height: 1.08;
  font-weight: 730;
  color: var(--text);
  letter-spacing: 0;
}

.profileIdentityCreditsLabel {
  display: block;
  margin-top: 1px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.62);
  letter-spacing: 0;
}

.profileIdentityDrawerBody {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* The open sheet sets touch-action: none on the body to freeze the page
     behind it; the account list still has to pan on touch. */
  touch-action: pan-y;
  display: grid;
  align-content: start;
  gap: 10px;
  margin-top: 12px;
}

.profileIdentitySummaryAvatar {
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: inherit;
  background:
    radial-gradient(circle at 22% 20%, rgba(104, 204, 255, 0.9), rgba(104, 204, 255, 0.1) 42%),
    linear-gradient(145deg, rgba(35, 39, 48, 0.98), rgba(16, 19, 27, 0.98));
  color: #f5eed8;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.profileIdentitySummaryAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profileIdentitySummaryCaret {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(8, 11, 16, 0.96);
  color: #68ccff;
}

.profileIdentitySummaryCaret svg {
  width: 10px;
  height: 10px;
}

.profileIdentityMenu {
  display: grid;
  gap: 0;
  width: 100%;
  padding: 0;
  margin: 0;
}

/* The side drawer wears both classes, and the grid above would otherwise win on
   source order and stretch its rows to fill the full-height panel -- which is
   what swallowed every spacing value the sections set for themselves. */
.profileIdentityMenu.profileIdentityDrawerPanel {
  display: flex;
}

.profileIdentityMenu form {
  margin: 0;
}

.profileIdentityMenuLabel,
.profileIdentityDrawerLabel {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.profileIdentityOption {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  text-align: left;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.profileIdentityOption:disabled {
  opacity: 1;
  cursor: default;
}

.profileIdentityOption.is-active {
  border-color: rgba(104, 204, 255, 0.45);
  background: rgba(104, 204, 255, 0.12);
}

.profileIdentityOptionAvatar {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 999px;
  background:
    radial-gradient(circle at 22% 20%, rgba(104, 204, 255, 0.84), rgba(104, 204, 255, 0.1) 42%),
    linear-gradient(145deg, rgba(35, 39, 48, 0.98), rgba(16, 19, 27, 0.98));
  color: #f5eed8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.profileIdentityOptionAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profileIdentityOptionMain {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.profileIdentityOptionTop {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.profileIdentityOptionTop strong {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  font-weight: 700;
}

.profileIdentityOptionMeta {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.64);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profileIdentityOptionPill {
  flex: 0 0 auto;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(104, 204, 255, 0.18);
  color: #68ccff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.profileIdentityOptionCheck {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(104, 204, 255, 0.18);
  color: #68ccff;
  font-size: 13px;
  font-weight: 900;
}

.profileComposerAudience,
.creatorCustomAudienceWrap {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.profileComposerAudienceList,
.creatorAudienceGrid {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.profileComposerAudienceOption,
.creatorAudienceOption {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
}

.creatorIdentityNotice {
  margin-bottom: 18px;
}

.mapModeHint {
  margin-right: 6px;
  padding: 10px 4px;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  pointer-events: none;
  user-select: none;
}

@media (max-width: 640px) {
  .profileIdentitySwitcherButton {
    width: 36px;
    height: 36px;
    min-height: 36px;
  }

  .profileIdentityDrawerPanel {
    width: clamp(250px, 74vw, 390px);
    max-width: clamp(250px, 74vw, 390px);
    padding-left: calc(12px + env(safe-area-inset-left, 0px));
    padding-right: 12px;
    border-radius: 0 16px 0 0;
  }
}
.vibeAudioPlayBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(8, 12, 18, 0.72);
  color: rgba(247, 250, 255, 0.96);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  backdrop-filter: blur(16px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.vibeAudioPlayBtn:hover {
  text-decoration: none;
  background: rgba(12, 16, 24, 0.82);
}

.vibeAudioPlayBtn:focus-visible {
  outline: 2px solid rgba(122, 212, 255, 0.8);
  outline-offset: 2px;
}

.vibeAudioPlayBtn[hidden] {
  display: none !important;
}

.vibeAudioPlayBtn--overlay {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 4;
}

.vibeAudioPlayBtn--inline {
  margin-top: 12px;
}

.vibeAudioPlayBtn--compact {
  min-height: 32px;
  padding: 0 12px;
  font-size: 12px;
}

.vibeAudioControlBtn {
  position: absolute;
  left: 50%;
  top: calc(42% - 58px);
  z-index: 5;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  background: rgba(5, 9, 15, 0.58);
  color: rgba(255, 255, 255, 0.96);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.24);
  opacity: 1;
  transition: opacity 220ms ease, transform 220ms ease, background 160ms ease;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.vibeAudioControlBtn[hidden] {
  display: none !important;
}

.vibeAudioControlBtn:hover,
.vibeAudioControlBtn:focus-visible {
  background: rgba(5, 9, 15, 0.74);
}

.vibeAudioControlBtn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.72);
  outline-offset: 3px;
}

.vibeAudioControlBtn.is-muted {
  background: rgba(5, 9, 15, 0.78);
  color: rgba(255, 255, 255, 0.78);
}

.vibeAudioControlBtn.is-hiding {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -46%) scale(0.96);
}

.vibeAudioControlIcon,
.vibeAudioControlIcon svg {
  display: block;
  width: 19px;
  height: 19px;
}

.cityPost--activityCard .vibeAudioPlayBtn--overlay,
.cityPost--activityCard .vibeAudioPlayBtn--overlay:hover,
.cityPost--activityCard .vibeAudioPlayBtn--overlay:focus,
.cityPost--activityCard .vibeAudioPlayBtn--overlay:focus-visible,
.cityPost--activityCard .vibeAudioPlayBtn--overlay:active {
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  border-radius: 999px !important;
  background: rgba(7, 11, 18, 0.82) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.26) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  backdrop-filter: blur(16px) !important;
}

/* --- More hub (full-page shortcuts) --- */
body.morePage .app-content,
body.morePage .appContent,
body.moreFlowPage .app-content,
body.moreFlowPage .appContent {
  padding-bottom: 0;
}

body.moreFlowPage .content {
  padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
}

.moreFlowHeaderLead {
  align-items: flex-start;
}

.moreFlowHeaderText {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.postWizardFlowHeader {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: -4px 0 2px;
}

.postWizardFlowTitle {
  min-width: 0;
  overflow: hidden;
  color: rgba(248, 250, 252, 0.98);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.headerMenuBtn.headerMoreLauncher {
  letter-spacing: 0;
  text-decoration: none;
}

.headerMoreLauncherGlyph {
  display: grid;
  place-items: center;
}

.headerMoreLauncherGlyph svg {
  display: block;
}

.morePageContent {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

.moreSection {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.moreSection--utility {
  gap: 8px;
}

.moreSectionLabel {
  margin: 0;
  padding: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.34);
}

.moreFeatureGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 359px) {
  .moreFeatureGrid {
    grid-template-columns: 1fr;
  }
}

.moreFeatureCard {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 16px 12px;
  min-height: 144px;
  padding: 15px 15px 16px;
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(21, 23, 28, 0.92), rgba(14, 16, 20, 0.96));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 10px 24px rgba(0, 0, 0, 0.18);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
  overflow: hidden;
}

.moreFeatureCard::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0));
  opacity: 0.7;
  pointer-events: none;
}

.moreFeatureCard--featured,
.moreFeatureCard--wide {
  grid-column: 1 / -1;
  min-height: 92px;
  align-items: center;
  gap: 14px;
  padding: 15px 16px;
}

.moreFeatureCard:hover,
.moreFeatureCard:focus-visible {
  text-decoration: none;
  transform: translateY(-1px);
  border-color: rgba(186, 230, 255, 0.18);
  background: linear-gradient(180deg, rgba(25, 28, 34, 0.96), rgba(17, 19, 24, 0.98));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 14px 28px rgba(0, 0, 0, 0.22);
  outline: none;
}

.moreFeatureIcon {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  justify-self: start;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(122, 212, 255, 0.12), rgba(122, 212, 255, 0.04));
  border: 1px solid rgba(122, 212, 255, 0.16);
  color: rgba(198, 233, 255, 0.92);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.moreFeatureIcon svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.moreFeatureBody {
  grid-column: 1 / -1;
  grid-row: 2;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.moreFeatureTitleRow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.moreFeatureTitle {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--text);
  line-height: 1.25;
}

.moreFeatureSubtitle {
  font-size: 12px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.52);
}

.moreFeatureBadge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(122, 212, 255, 0.12);
  color: rgba(198, 233, 255, 0.92);
  border: 1px solid rgba(122, 212, 255, 0.18);
}

.moreFeatureBadge--status {
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.24);
  color: #fcd34d;
}

.moreRowChevron {
  display: grid;
  place-items: center;
  grid-column: 3;
  grid-row: 1;
  align-self: start;
  justify-self: end;
  color: rgba(186, 230, 255, 0.54);
  transition: transform 180ms ease, color 180ms ease;
}

.moreRowChevron svg {
  width: 18px;
  height: 18px;
}

.moreRowChevron--muted {
  color: rgba(255, 255, 255, 0.38);
}

.moreFeatureCard:hover .moreFeatureIcon,
.moreFeatureCard:focus-visible .moreFeatureIcon {
  transform: translateY(-1px) scale(1.02);
  border-color: rgba(122, 212, 255, 0.22);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 8px 18px rgba(0, 0, 0, 0.16);
}

.moreFeatureCard:hover .moreRowChevron,
.moreFeatureCard:focus-visible .moreRowChevron {
  transform: translateX(2px);
  color: rgba(198, 233, 255, 0.9);
}

.moreFeatureCard--featured .moreFeatureBody,
.moreFeatureCard--wide .moreFeatureBody {
  grid-column: 2;
  grid-row: 1;
}

.moreFeatureCard--featured .moreFeatureIcon,
.moreFeatureCard--wide .moreFeatureIcon,
.moreFeatureCard--featured .moreRowChevron,
.moreFeatureCard--wide .moreRowChevron {
  align-self: center;
}

.moreFeatureCard:active {
  transform: translateY(0) scale(0.995);
}

button.moreFeatureCard {
  width: 100%;
  margin: 0;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  appearance: none;
}

.moreFeatureCard--devLocked {
  opacity: 0.88;
  cursor: not-allowed;
}

.moreFeatureCard--devLocked:hover,
.moreFeatureCard--devLocked:focus-visible,
.moreFeatureCard--devLocked:active {
  transform: none;
  border-color: rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(21, 23, 28, 0.88), rgba(14, 16, 20, 0.92));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.03) inset,
    0 8px 20px rgba(0, 0, 0, 0.16);
}

.moreFeatureCard--devLocked:hover .moreFeatureIcon,
.moreFeatureCard--devLocked:focus-visible .moreFeatureIcon {
  transform: none;
  border-color: rgba(122, 212, 255, 0.12);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

.moreFeatureCard--devLocked:hover .moreRowChevron,
.moreFeatureCard--devLocked:focus-visible .moreRowChevron {
  transform: none;
  color: rgba(186, 230, 255, 0.38);
}

.moreFeatureDevLockBadge {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(248, 250, 252, 0.95);
  z-index: 2;
  pointer-events: none;
}

.moreFeatureDevLockBadge svg {
  width: 14px;
  height: 14px;
  display: block;
}

.moreRowChevron--devLock {
  color: rgba(186, 230, 255, 0.42);
}

.moreRowChevron--devLock svg {
  width: 16px;
  height: 16px;
}

.moreDevLockToast {
  position: fixed;
  left: 50%;
  bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 12px);
  min-width: 0;
  max-width: min(92vw, 380px);
  padding: 14px 18px;
  border-radius: 18px;
  border: 1px solid rgba(122, 212, 255, 0.14);
  background: rgba(9, 13, 19, 0.94);
  color: rgba(247, 251, 255, 0.96);
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.36),
    0 0 0 1px rgba(255, 255, 255, 0.04);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
  z-index: 160;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
  white-space: pre-line;
}

.moreDevLockToast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.moreWalletEntryCard {
  position: relative;
  min-height: 132px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(135deg, rgba(25, 28, 34, 0.98), rgba(9, 13, 18, 0.96));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 18px 38px rgba(0, 0, 0, 0.3);
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.moreWalletEntryCard:hover,
.moreWalletEntryCard:focus-visible {
  text-decoration: none;
  transform: translateY(-1px);
  border-color: rgba(246, 193, 115, 0.26);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 22px 42px rgba(0, 0, 0, 0.34);
  outline: none;
}

.moreWalletEntryArt {
  position: relative;
  width: 74px;
  height: 74px;
}

.moreWalletEntryCardStack {
  position: absolute;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.24);
}

.moreWalletEntryCardStack--back {
  inset: 15px 6px 10px 10px;
  background: linear-gradient(135deg, rgba(72, 187, 120, 0.42), rgba(45, 212, 191, 0.24));
  transform: rotate(-8deg);
}

.moreWalletEntryCardStack--front {
  inset: 9px 8px 18px 3px;
  background: linear-gradient(135deg, rgba(246, 193, 115, 0.88), rgba(245, 158, 11, 0.44));
  transform: rotate(7deg);
}

.moreWalletEntryCoin {
  position: absolute;
  right: 4px;
  bottom: 7px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 2px solid rgba(255, 236, 196, 0.9);
  background: rgba(245, 158, 11, 0.72);
  box-shadow: 0 6px 12px rgba(245, 158, 11, 0.16);
}

.moreWalletEntryText {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.moreWalletEntryTitle {
  font-size: 18px;
  font-weight: 850;
  line-height: 1.15;
  color: rgba(250, 252, 255, 0.98);
}

.moreWalletEntrySubtitle {
  font-size: 13px;
  line-height: 1.42;
  color: rgba(235, 241, 247, 0.62);
}

.walletPage .app-content,
.walletPage .appContent {
  width: min(100%, 720px);
}

.walletPageHeader {
  padding-bottom: 4px;
}

.walletPageContent {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
}

.walletNotice {
  padding: 12px 14px;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.4;
}

.walletNotice.is-success {
  border: 1px solid rgba(74, 222, 128, 0.18);
  background: rgba(22, 163, 74, 0.12);
  color: rgba(187, 247, 208, 0.94);
}

.walletNotice.is-error {
  border: 1px solid rgba(248, 113, 113, 0.2);
  background: rgba(185, 28, 28, 0.13);
  color: rgba(254, 202, 202, 0.96);
}

.walletHero {
  position: relative;
  min-height: 246px;
  padding: 24px;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(135deg, rgba(16, 20, 26, 0.98), rgba(7, 10, 15, 0.98)),
    linear-gradient(135deg, rgba(246, 193, 115, 0.16), rgba(45, 212, 191, 0.1));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 24px 54px rgba(0, 0, 0, 0.34);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 16px;
  align-items: center;
}

.walletHeroContent {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.walletHeroEyebrow,
.walletSectionKicker {
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(246, 193, 115, 0.82);
}

.walletHeroTitle {
  margin: 0;
  max-width: 420px;
  font-size: 40px;
  line-height: 0.98;
  letter-spacing: 0;
  color: rgba(250, 252, 255, 0.98);
}

.walletHeroCopy {
  margin: 0;
  max-width: 390px;
  color: rgba(235, 241, 247, 0.64);
  font-size: 14px;
  line-height: 1.55;
}

.walletHeroStats {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.walletHeroStats span {
  min-width: 122px;
  padding: 11px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: grid;
  gap: 2px;
}

.walletHeroStats strong {
  font-size: 18px;
  color: rgba(250, 252, 255, 0.98);
}

.walletHeroStats small {
  font-size: 11px;
  color: rgba(235, 241, 247, 0.56);
}

.walletHeroArt {
  position: relative;
  z-index: 1;
  min-height: 184px;
}

.walletHeroCard,
.walletHeroChip,
.walletHeroCoin {
  position: absolute;
  display: block;
}

.walletHeroCard {
  width: 164px;
  height: 104px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 24px 38px rgba(0, 0, 0, 0.34);
}

.walletHeroCard--back {
  right: 18px;
  top: 24px;
  background: linear-gradient(135deg, rgba(45, 212, 191, 0.58), rgba(14, 165, 233, 0.24));
  transform: rotate(-11deg);
}

.walletHeroCard--front {
  right: 0;
  top: 62px;
  background: linear-gradient(135deg, rgba(250, 204, 21, 0.88), rgba(245, 158, 11, 0.48));
  transform: rotate(8deg);
}

.walletHeroChip {
  right: 103px;
  top: 93px;
  width: 34px;
  height: 24px;
  border-radius: 8px;
  background: rgba(255, 247, 237, 0.72);
  transform: rotate(8deg);
}

.walletHeroCoin {
  border-radius: 999px;
  border: 2px solid rgba(255, 247, 237, 0.84);
  background: rgba(246, 193, 115, 0.76);
}

.walletHeroCoin--one {
  right: 20px;
  top: 23px;
  width: 34px;
  height: 34px;
}

.walletHeroCoin--two {
  right: 144px;
  top: 133px;
  width: 24px;
  height: 24px;
}

.walletOverview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.walletOverviewCard {
  min-height: 118px;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  color: inherit;
  text-decoration: none;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.walletOverviewCard--action {
  background: linear-gradient(135deg, rgba(72, 187, 120, 0.17), rgba(45, 212, 191, 0.08));
}

.walletOverviewCard:hover,
.walletOverviewCard:focus-visible {
  text-decoration: none;
  transform: translateY(-1px);
  border-color: rgba(122, 212, 255, 0.18);
  outline: none;
}

.walletOverviewLabel {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.42);
}

.walletOverviewCard strong {
  color: var(--text);
  font-size: 20px;
  line-height: 1.1;
}

.walletOverviewCard span:last-child {
  color: rgba(255, 255, 255, 0.52);
  font-size: 12px;
  line-height: 1.4;
}

.walletGatewayContent {
  gap: 22px;
}

.walletHero--gateway {
  min-height: 270px;
}

.walletManageSection {
  padding-top: 2px;
}

.walletManageGrid {
  display: grid;
  gap: 10px;
}

.walletManageCard {
  min-height: 78px;
  padding: 16px 18px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 14px;
  color: inherit;
  text-decoration: none;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

.walletManageCard:hover,
.walletManageCard:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(122, 212, 255, 0.16);
  background: rgba(255, 255, 255, 0.055);
  text-decoration: none;
  outline: none;
}

.walletManageIcon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.055);
  color: rgba(246, 193, 115, 0.92);
}

.walletManageIcon--credits {
  background: rgba(246, 193, 115, 0.12);
  color: rgba(255, 220, 170, 0.98);
}

.walletManageIcon--pro {
  background: rgba(45, 212, 191, 0.1);
  color: rgba(153, 246, 228, 0.94);
}

.walletManageIcon--history {
  background: rgba(96, 165, 250, 0.1);
  color: rgba(191, 219, 254, 0.94);
}

.walletManageIcon--billing {
  background: rgba(216, 180, 254, 0.1);
  color: rgba(233, 213, 255, 0.94);
}

.walletManageIcon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.walletManageText {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.walletManageCard strong {
  color: var(--text);
  font-size: 15px;
  font-weight: 850;
  line-height: 1.22;
}

.walletManageCard small {
  color: rgba(255, 255, 255, 0.52);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
}

.walletManageChevron {
  width: 22px;
  height: 22px;
  color: rgba(246, 193, 115, 0.82);
}

.walletSection {
  display: grid;
  gap: 14px;
  padding-top: 4px;
}

.walletSectionHeader {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 14px;
}

.walletSectionHeader h2 {
  margin: 2px 0 0;
  font-size: 22px;
  line-height: 1.12;
  letter-spacing: 0;
  color: var(--text);
}

.walletFocusedSection {
  gap: 16px;
}

.walletSubpageLead {
  display: grid;
  gap: 8px;
  padding-top: 4px;
}

.walletSubpageLead h1 {
  margin: 0;
  color: var(--text);
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: 0;
}

.walletSubpageLead p {
  margin: 0;
  max-width: 460px;
  color: rgba(255, 255, 255, 0.56);
  font-size: 14px;
  line-height: 1.5;
}

/* A balance owing is the only thing on this screen that is not simply
   informational: it is the reason public events are refused. It reads as a
   warning rather than another metric row. */
.walletDebtNotice {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  margin-bottom: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 176, 102, 0.35);
  background: rgba(255, 176, 102, 0.09);
  font-size: 14px;
  line-height: 1.45;
}

.walletDebtNotice span {
  opacity: 0.82;
}

.walletSimpleMetric {
  min-height: 112px;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(135deg, rgba(246, 193, 115, 0.12), rgba(45, 212, 191, 0.06)),
    rgba(255, 255, 255, 0.04);
  display: grid;
  align-content: center;
  gap: 6px;
}

.walletSimpleMetric span {
  color: rgba(255, 255, 255, 0.54);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.walletSimpleMetric strong {
  color: var(--text);
  font-size: 38px;
  line-height: 1;
}

.walletBalancePill,
.walletStatusPill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.walletStatusPill.is-good {
  border-color: rgba(74, 222, 128, 0.2);
  background: rgba(22, 163, 74, 0.14);
  color: rgba(187, 247, 208, 0.96);
}

.walletStatusPill.is-pending {
  border-color: rgba(250, 204, 21, 0.2);
  background: rgba(202, 138, 4, 0.14);
  color: rgba(254, 240, 138, 0.96);
}

.walletStatusPill.is-refunded {
  border-color: rgba(96, 165, 250, 0.22);
  background: rgba(37, 99, 235, 0.14);
  color: rgba(191, 219, 254, 0.96);
}

.walletStatusPill.is-muted {
  opacity: 0.72;
}

.walletCreditGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.walletPackageCard {
  min-height: 178px;
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025));
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.walletPackageCount {
  width: 46px;
  height: 46px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: rgba(246, 193, 115, 0.14);
  border: 1px solid rgba(246, 193, 115, 0.2);
  color: rgba(255, 220, 170, 0.98);
  font-size: 20px;
  font-weight: 900;
}

.walletPackageLabel {
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
}

.walletPackagePrice {
  color: rgba(255, 255, 255, 0.54);
  font-size: 13px;
}

.walletPrimaryButton,
.walletSecondaryButton {
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  text-decoration: none;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.walletPrimaryButton {
  margin-top: auto;
  background: linear-gradient(135deg, rgba(246, 193, 115, 0.96), rgba(245, 158, 11, 0.82));
  color: rgba(16, 20, 26, 0.96);
  box-shadow: 0 12px 22px rgba(245, 158, 11, 0.18);
}

.walletSecondaryButton {
  background: rgba(255, 255, 255, 0.055);
  color: rgba(245, 248, 255, 0.92);
}

.walletPrimaryButton:hover,
.walletPrimaryButton:focus-visible,
.walletSecondaryButton:hover,
.walletSecondaryButton:focus-visible {
  transform: translateY(-1px);
  text-decoration: none;
  outline: none;
}

.walletInfoPanel,
.walletSubscriptionCard,
.walletEmptyPanel,
.walletReceiptCard {
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}

.walletInfoPanel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  overflow: hidden;
}

.walletInfoPanel > div {
  padding: 16px;
}

.walletInfoPanel > div + div {
  border-left: 1px solid rgba(255, 255, 255, 0.07);
}

.walletInfoPanel h3 {
  margin: 0 0 10px;
  color: var(--text);
  font-size: 15px;
  line-height: 1.2;
}

.walletUseChips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.walletUseChips span {
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(45, 212, 191, 0.1);
  border: 1px solid rgba(45, 212, 191, 0.13);
  color: rgba(204, 251, 241, 0.88);
  font-size: 12px;
  font-weight: 750;
}

.walletMiniLedger {
  display: grid;
  gap: 8px;
}

.walletMiniLedgerRow {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: inherit;
  text-decoration: none;
  font-size: 13px;
}

.walletMiniLedgerRow span {
  color: rgba(255, 255, 255, 0.58);
}

.walletMiniLedgerRow strong {
  color: var(--text);
}

.walletEmptyText {
  margin: 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
}

.walletSubscriptionCard {
  padding: 18px;
  display: grid;
  gap: 16px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025)),
    linear-gradient(135deg, rgba(45, 212, 191, 0.08), rgba(246, 193, 115, 0.06));
}

.walletSubscriptionCard.is-active {
  border-color: rgba(74, 222, 128, 0.16);
}

.walletSubscriptionMain {
  display: grid;
  gap: 7px;
}

.walletSubscriptionPage {
  color: rgba(255, 255, 255, 0.54);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.walletSubscriptionMain strong {
  color: var(--text);
  font-size: 24px;
  line-height: 1.1;
}

.walletSubscriptionMain span:last-child,
.walletRenewalText {
  color: rgba(255, 255, 255, 0.56);
  font-size: 13px;
  line-height: 1.45;
}

.walletStatusLine {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.walletStatusLine span {
  color: rgba(255, 255, 255, 0.56);
  font-size: 13px;
  font-weight: 750;
}

.walletBenefitList {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.walletBenefitList span {
  min-height: 44px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.3;
}

.walletSubscriptionActions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.walletHistoryList {
  display: grid;
  gap: 8px;
}

.walletHistoryRow {
  min-height: 68px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.035);
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) 0.9fr auto auto auto;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

/* Payment history is the only route to an old receipt, so it pages rather than
   stopping at a fixed slice. Borrows the row's surface treatment so the pager
   reads as part of the list rather than as page furniture. */
.walletHistoryPager {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 14px;
}

.walletHistoryPagerLink {
  min-height: 44px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.045);
  color: inherit;
  font-size: 14px;
  text-decoration: none;
  transition: background 180ms ease, border-color 180ms ease;
}

.walletHistoryPagerLink:hover,
.walletHistoryPagerLink:focus-visible {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.2);
}

.walletHistoryRow:hover,
.walletHistoryRow:focus-visible {
  text-decoration: none;
  transform: translateY(-1px);
  border-color: rgba(122, 212, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  outline: none;
}

.walletHistoryType,
.walletHistoryAmount {
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
}

.walletHistoryDate,
.walletReceiptLink {
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  font-weight: 700;
}

.walletReceiptLink {
  color: rgba(186, 230, 255, 0.8);
}

.walletBillingList {
  display: grid;
  gap: 10px;
}

.walletBillingRow {
  min-height: 104px;
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.walletBillingRow div:first-child {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.walletBillingRow strong {
  color: var(--text);
  font-size: 15px;
  line-height: 1.25;
}

.walletBillingRow span {
  color: rgba(255, 255, 255, 0.52);
  font-size: 12px;
  font-weight: 700;
}

.walletBillingActions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.walletBillingActions a {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.055);
  color: rgba(245, 248, 255, 0.9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 12px;
  font-weight: 800;
}

.walletEmptyPanel {
  padding: 20px;
  color: rgba(255, 255, 255, 0.54);
  font-size: 14px;
}

.walletReceiptCard {
  max-width: 520px;
  width: 100%;
  margin: 10px auto 0;
  padding: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.035)),
    linear-gradient(135deg, rgba(246, 193, 115, 0.1), rgba(45, 212, 191, 0.06));
}

.walletReceiptTop {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.14);
}

.walletReceiptTop h1 {
  margin: 2px 0 0;
  color: var(--text);
  font-size: 24px;
  line-height: 1.1;
}

.walletReceiptMark {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: rgba(255, 220, 170, 0.95);
  background: rgba(246, 193, 115, 0.12);
  border: 1px solid rgba(246, 193, 115, 0.2);
}

.walletReceiptMark svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.walletReceiptFields {
  margin: 0;
  padding-top: 18px;
  display: grid;
  gap: 0;
}

.walletReceiptFields div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.walletReceiptFields div:last-child {
  border-bottom: none;
}

.walletReceiptFields dt {
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  font-weight: 700;
}

.walletReceiptFields dd {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
  text-align: right;
}

.walletReceiptActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 18px;
}

@media (max-width: 680px) {
  .walletHero {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .walletHeroTitle {
    font-size: 34px;
  }

  .walletHeroArt {
    min-height: 150px;
  }

  .walletOverview,
  .walletCreditGrid,
  .walletInfoPanel,
  .walletBenefitList {
    grid-template-columns: 1fr;
  }

  .walletInfoPanel > div + div {
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
  }

  .walletHistoryRow {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .walletHistoryDate,
  .walletReceiptLink {
    grid-column: 1;
  }

  .walletHistoryAmount,
  .walletStatusPill {
    justify-self: end;
  }

  .walletBillingRow {
    grid-template-columns: 1fr;
  }

  .walletBillingActions {
    justify-content: flex-start;
  }
}

button.commsFlatRow {
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  appearance: none;
}

.commsFlatRow--devLocked {
  position: relative;
  opacity: 0.88;
  cursor: not-allowed;
}

.commsFlatRow--devLocked:hover,
.commsFlatRow--devLocked:focus-visible {
  background: rgba(255, 255, 255, 0.02);
}

.commsFlatRowDevLockBadge {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(248, 250, 252, 0.95);
  z-index: 2;
  pointer-events: none;
}

.commsFlatRowDevLockBadge svg {
  width: 13px;
  height: 13px;
  display: block;
}

.profileTabButton--devLocked {
  opacity: 0.88;
  cursor: not-allowed;
}

.profileTabButton--devLocked:hover,
.profileTabButton--devLocked:focus-visible {
  transform: none;
}

.profileTabDevLock {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  vertical-align: middle;
  color: rgba(186, 230, 255, 0.75);
}

.profileCommunityDevLockShell {
  position: relative;
}

.profileCommunityDevLockCta {
  cursor: not-allowed;
  opacity: 0.92;
}

.profileCommunityDevLockCtaInner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.profileCommunityDevLockGlyph {
  display: inline-flex;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.profileCommunityDevLockGlyph svg {
  width: 16px;
  height: 16px;
  display: block;
}

.moreUtilityPanel {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
}

.moreUtilityRow {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 12px 0;
  text-decoration: none;
  color: inherit;
  border-radius: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 140ms ease, border-color 140ms ease;
}

.moreUtilityRow + .moreUtilityRow {
  border-top: none;
}

.moreUtilityRow:hover,
.moreUtilityRow:focus-visible {
  text-decoration: none;
  background: rgba(255, 255, 255, 0.02);
  border-bottom-color: rgba(255, 255, 255, 0.08);
  outline: none;
}

.moreUtilityRow--danger .moreUtilityTitle {
  color: #f87171;
}

.moreUtilityRow--danger .moreUtilityMeta,
.moreUtilityRow--danger .moreUtilityIcon {
  color: rgba(248, 113, 113, 0.82);
}

.moreUtilityIcon {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(122, 212, 255, 0.06);
  border: 1px solid rgba(122, 212, 255, 0.08);
  color: rgba(186, 230, 255, 0.72);
}

.moreUtilityIcon svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

.moreUtilityText {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 12px;
}

.moreUtilityTitle {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
}

.moreUtilityMeta {
  display: block;
  margin-top: 0;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.44);
}

.moreUtilityRow .moreRowChevron {
  align-self: center;
  flex: 0 0 auto;
}

.moreUtilityRow--disabled {
  opacity: 0.55;
  pointer-events: none;
}

.moreBackLink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  margin-bottom: 6px;
}

.moreBackLink:hover,
.moreBackLink:focus-visible {
  color: var(--text);
  text-decoration: none;
  outline: none;
}

.morePlaceholderContent {
  display: flex;
  justify-content: center;
  padding-top: 8px;
}

.morePlaceholderCard {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 28px 22px 26px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.03);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.morePlaceholderGlyph {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(122, 212, 255, 0.1);
  color: rgba(186, 230, 255, 0.92);
}

.morePlaceholderGlyph svg {
  width: 28px;
  height: 28px;
}

.morePlaceholderTitle {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}

.morePlaceholderCopy {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}

.morePlaceholderCta {
  margin-top: 8px;
}

:root[data-app-theme="light"] .moreFeatureCard {
  border-color: rgba(15, 23, 42, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 248, 250, 0.98));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 12px 24px rgba(15, 23, 42, 0.08);
}

:root[data-app-theme="light"] .moreFeatureCard:hover,
:root[data-app-theme="light"] .moreFeatureCard:focus-visible {
  border-color: rgba(59, 130, 246, 0.16);
}

:root[data-app-theme="light"] .moreFeatureCard--devLocked:hover,
:root[data-app-theme="light"] .moreFeatureCard--devLocked:focus-visible,
:root[data-app-theme="light"] .moreFeatureCard--devLocked:active {
  border-color: rgba(15, 23, 42, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(247, 248, 250, 0.96));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 10px 22px rgba(15, 23, 42, 0.07);
}

:root[data-app-theme="light"] .moreFeatureDevLockBadge {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(15, 23, 42, 0.1);
  color: rgba(15, 23, 42, 0.88);
}

:root[data-app-theme="light"] .moreDevLockToast {
  background: rgba(255, 255, 255, 0.96);
  color: rgba(15, 23, 42, 0.92);
  border-color: rgba(59, 130, 246, 0.18);
  box-shadow:
    0 18px 38px rgba(15, 23, 42, 0.12),
    0 0 0 1px rgba(15, 23, 42, 0.06);
}

:root[data-app-theme="light"] .moreWalletEntryCard,
:root[data-app-theme="light"] .walletHero {
  border-color: rgba(15, 23, 42, 0.08);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(239, 246, 255, 0.98));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 18px 36px rgba(15, 23, 42, 0.1);
}

:root[data-app-theme="light"] .moreWalletEntryTitle,
:root[data-app-theme="light"] .walletHeroTitle,
:root[data-app-theme="light"] .walletHeroStats strong {
  color: rgba(15, 23, 42, 0.96);
}

:root[data-app-theme="light"] .moreWalletEntrySubtitle,
:root[data-app-theme="light"] .walletHeroCopy,
:root[data-app-theme="light"] .walletHeroStats small {
  color: rgba(15, 23, 42, 0.58);
}

:root[data-app-theme="light"] .moreFeatureBadge--status {
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(217, 119, 6, 0.32);
  color: #92400e;
}

:root[data-app-theme="light"] .moreUtilityRow {
  border-bottom-color: rgba(15, 23, 42, 0.08);
}

:root[data-app-theme="light"] .moreUtilityRow:hover,
:root[data-app-theme="light"] .moreUtilityRow:focus-visible {
  background: rgba(17, 24, 39, 0.03);
}

:root[data-app-theme="light"] .walletNotice.is-success {
  background: rgba(22, 163, 74, 0.08);
  color: #166534;
}

:root[data-app-theme="light"] .walletNotice.is-error {
  background: rgba(220, 38, 38, 0.08);
  color: #991b1b;
}

:root[data-app-theme="light"] .walletHeroStats span,
:root[data-app-theme="light"] .walletOverviewCard,
:root[data-app-theme="light"] .walletManageCard,
:root[data-app-theme="light"] .walletSimpleMetric,
:root[data-app-theme="light"] .walletPackageCard,
:root[data-app-theme="light"] .walletInfoPanel,
:root[data-app-theme="light"] .walletSubscriptionCard,
:root[data-app-theme="light"] .walletHistoryRow,
:root[data-app-theme="light"] .walletBillingRow,
:root[data-app-theme="light"] .walletEmptyPanel,
:root[data-app-theme="light"] .walletReceiptCard {
  border-color: rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.72);
}

:root[data-app-theme="light"] .walletOverviewLabel,
:root[data-app-theme="light"] .walletOverviewCard span:last-child,
:root[data-app-theme="light"] .walletManageCard small,
:root[data-app-theme="light"] .walletSubpageLead p,
:root[data-app-theme="light"] .walletSimpleMetric span,
:root[data-app-theme="light"] .walletPackagePrice,
:root[data-app-theme="light"] .walletEmptyText,
:root[data-app-theme="light"] .walletMiniLedgerRow span,
:root[data-app-theme="light"] .walletSubscriptionMain span:last-child,
:root[data-app-theme="light"] .walletRenewalText,
:root[data-app-theme="light"] .walletStatusLine span,
:root[data-app-theme="light"] .walletHistoryDate,
:root[data-app-theme="light"] .walletBillingRow span,
:root[data-app-theme="light"] .walletReceiptFields dt {
  color: rgba(15, 23, 42, 0.56);
}

:root[data-app-theme="light"] .walletBenefitList span {
  background: rgba(15, 23, 42, 0.04);
  color: rgba(15, 23, 42, 0.68);
}

:root[data-app-theme="light"] .walletSecondaryButton {
  background: rgba(15, 23, 42, 0.05);
  color: rgba(15, 23, 42, 0.88);
}

:root[data-app-theme="light"] .walletBillingActions a {
  background: rgba(15, 23, 42, 0.05);
  color: rgba(15, 23, 42, 0.88);
}

:root[data-app-theme="light"] .walletManageIcon {
  border-color: rgba(15, 23, 42, 0.08);
}

:root[data-app-theme="light"] .walletManageIcon--credits {
  background: rgba(245, 158, 11, 0.12);
  color: #92400e;
}

:root[data-app-theme="light"] .walletManageIcon--pro {
  background: rgba(20, 184, 166, 0.11);
  color: #0f766e;
}

:root[data-app-theme="light"] .walletManageIcon--history {
  background: rgba(59, 130, 246, 0.1);
  color: #1d4ed8;
}

:root[data-app-theme="light"] .walletManageIcon--billing {
  background: rgba(147, 51, 234, 0.09);
  color: #7e22ce;
}

/* Saved page: profile tab rhythm + Activities-matched rails */
.savedPage .savedPageFeed.activityPrimeFeed {
  gap: 12px;
  padding: 4px 20px 108px;
}

.savedPage .savedPrimeSection.activityPrimeSection {
  gap: 6px;
}

.savedPage .savedPrimeSection .activityPrimeSectionTitle {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: rgba(240, 245, 252, 0.9);
}

.savedPage .savedPrimeSection > .activityPrimeTrack.is-rail {
  padding: 2px 1px 4px;
}

.savedPage .myListsVisualGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 2px 0 2px;
}

.savedPage .myListsVisualGrid .activityPrimeCard {
  width: 100%;
  height: 100%;
}

.savedPage .myListsVisualGrid .activityPrimeVisual,
.savedPage .myListsVisualGrid .activityPrimeCard.has-image.is-rail-card .activityPrimeVisual {
  aspect-ratio: 1 / 1;
}

.savedPage .myListsArchivedActivityItem {
  width: 100%;
}

.savedPage .myListsArchivedActivityItem .activityPrimeCard {
  width: 100%;
}

.savedPage .myListsArchivedActivityForm {
  margin: 8px 0 0;
}

.savedPage .myListsArchivedActivityAction {
  width: 100%;
  min-height: 36px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.72);
  color: rgba(240, 245, 252, 0.92);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.savedPage .myListsArchivedActivityAction:hover,
.savedPage .myListsArchivedActivityAction:focus-visible {
  background: rgba(31, 41, 55, 0.88);
  outline: none;
}

.savedPage .profileTabMeta {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(186, 197, 212, 0.55);
}

.savedPage .profileTabButton.is-active .profileTabMeta {
  color: rgba(210, 220, 234, 0.85);
}

.savedPage .savedFilterSection {
  padding: 0 20px 10px;
}

.savedPage .savedSectionEmpty {
  padding: 24px 18px;
}

.savedPage .savedPageEmpty {
  margin: 8px 0 20px;
}

/* My Lists: stacked state + type filters */
.savedPage.myListsPage .myListsStateSection {
  padding-bottom: 4px;
}

.savedPage.myListsPage .myListsTypeSection {
  padding-top: 0;
}

.savedPage.myListsPage .myListsStateBar .profileTabButton {
  justify-content: center;
  gap: 4px;
  padding-top: 8px;
  padding-bottom: 10px;
}

.savedPage.myListsPage .myListsStateBar .profileTabLabel {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  line-height: 1.25;
}

/* My Lists content-type row: icons only + counts; clear active state */
.savedPage.myListsPage .myListsTypeTabBar .myListsTypeTabButton {
  justify-content: center;
  gap: 6px;
  padding: 10px 6px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid transparent;
}

.savedPage.myListsPage .myListsTypeTabBar .myListsTypeTabButton:not(.is-active) {
  color: rgba(186, 197, 212, 0.62);
}

.savedPage.myListsPage .myListsTypeTabBar .myListsTypeTabButton:not(.is-active) .profileTabGlyph {
  opacity: 0.55;
}

.savedPage.myListsPage .myListsTypeTabBar .myListsTypeTabButton.is-active {
  color: rgba(247, 251, 255, 0.98);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.savedPage.myListsPage .myListsTypeTabBar .myListsTypeTabButton.is-active .profileTabGlyph {
  opacity: 1;
  transform: scale(1.06);
}

.savedPage.myListsPage .myListsTypeTabBar .myListsTypeTabButton .profileTabGlyph {
  width: 26px;
  height: 26px;
  transition: opacity 160ms ease, transform 160ms ease;
}

.savedPage.myListsPage .myListsTypeTabBar .myListsTypeTabButton .profileTabGlyph svg {
  width: 24px;
  height: 24px;
}

.savedPage.myListsPage .myListsTypeTabBar .myListsTypeTabButton .profileTabMeta {
  font-size: 10px;
  letter-spacing: 0.04em;
}

@media (min-width: 760px) {
  .savedPage .myListsVisualGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
}
/* Notifications Inbox */
body.notificationsInboxScreen .app-content,
body.notificationsInboxScreen .appContent {
  padding-bottom: 0;
}

body.notificationsInboxScreen .dock {
  display: none;
}

body.notificationsInboxScreen .pageHeader.notificationsPageHeader {
  justify-content: space-between;
  align-items: center;
  gap: 0;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 14px 8px;
  background: var(--bg, #0b0f14);
}

.notificationsHeaderLead {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.notificationsPageBack {
  width: 30px;
  height: 30px;
  margin: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(248, 250, 252, 0.94);
}

.notificationsPageBack svg {
  width: 20px;
  height: 20px;
}

.notificationsPageTitle {
  margin: 0;
  min-width: 0;
  color: rgba(248, 250, 252, 0.98);
  font-size: 16px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notificationsInboxContent {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 4px 16px calc(28px + env(safe-area-inset-bottom, 0px));
}

.notificationsFilters {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 2px -16px 8px;
  padding: 4px 16px 8px;
}

.notificationsFilters::-webkit-scrollbar {
  display: none;
}

.notificationsFilterChip {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 13px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  background: rgba(255,255,255,0.035);
  color: rgba(219,228,237,0.72);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
}

.notificationsFilterChip.is-active {
  border-color: rgba(87,189,255,0.38);
  background: rgba(47,143,235,0.16);
  color: #f7fbff;
}

.notificationsFilterCount {
  min-width: 19px;
  height: 19px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  font-size: 11px;
}

.dmComposerStatus.is-uploading {
  position: relative;
  overflow: hidden;
  min-height: 30px;
  padding: 7px 74px 7px 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent, #3897f0) 13%, transparent);
}

.dmComposerStatus.is-uploading::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  width: var(--dm-upload-progress, 0%);
  content: '';
  background: var(--accent, #3897f0);
  transition: width 160ms ease;
}

.dmComposerUploadCancel {
  position: absolute;
  top: 50%;
  right: 8px;
  z-index: 1;
  padding: 4px 8px;
  border: 0;
  border-radius: 999px;
  color: inherit;
  background: color-mix(in srgb, currentColor 12%, transparent);
  font: inherit;
  font-weight: 700;
  transform: translateY(-50%);
}

.managedUploadStatus {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 760px;
  margin: 10px auto;
  padding: 11px 12px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent, #3897f0) 28%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent, #3897f0) 10%, var(--surface, #11141a));
  color: inherit;
  font-size: 13px;
  font-weight: 650;
}

.managedUploadStatus.is-uploading::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: var(--managed-upload-progress, 0%);
  height: 3px;
  content: '';
  background: var(--accent, #3897f0);
  transition: width 160ms ease;
}

.managedUploadStatus.is-error {
  border-color: color-mix(in srgb, #ff5c6c 38%, transparent);
  background: color-mix(in srgb, #ff5c6c 10%, var(--surface, #11141a));
}

.managedUploadStatusAction {
  flex: 0 0 auto;
  padding: 6px 10px;
  border: 0;
  border-radius: 999px;
  color: inherit;
  background: color-mix(in srgb, currentColor 12%, transparent);
  font: inherit;
  font-weight: 800;
}

.notificationsDayGroup {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.notificationsDayLabel {
  margin: 12px 0 4px;
  color: rgba(210,220,230,0.62);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.notificationsList {
  display: flex;
  flex-direction: column;
}

.notificationRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  padding: 15px 0;
  border-bottom: 1px solid rgba(255,255,255,0.055);
}

.notificationRow.is-unread {
  margin-inline: -10px;
  padding-inline: 10px;
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(32,136,224,0.11), rgba(32,136,224,0.025) 72%, transparent);
}

.notificationRow.is-unread .notificationRowTitle {
  color: #f7fbff;
}

.notificationRowLink {
  min-width: 0;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  grid-column: 1;
  grid-row: 1;
  color: inherit;
  text-decoration: none;
}

.notificationRowLink:hover {
  text-decoration: none;
}

.notificationRow:hover {
  background: rgba(255,255,255,0.018);
}

.notificationRowMedia {
  width: 62px;
  height: 62px;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,0.05);
  flex: 0 0 auto;
}

.notificationRowMedia img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.notificationRowMedia--fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.055);
  color: rgba(248,250,252,0.82);
}

.notificationRowMediaInitial {
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}

.notificationRowCopy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.notificationRowTitleWrap {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.notificationRowUnreadDot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: none;
  flex: 0 0 auto;
}

.notificationRowTitle {
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
  color: rgba(242,245,248,0.92);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notificationRowSecondary {
  font-size: 13px;
  color: rgba(194, 205, 216, 0.66);
  line-height: 1.42;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.notificationRequestActions {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  grid-column: 1 / -1;
  grid-row: 2;
  padding-left: 75px;
  margin-top: -4px;
}

.notificationRequestActions form {
  margin: 0;
}

.notificationRequestAction {
  min-height: 34px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.055);
  color: rgba(248,250,252,0.88);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  box-shadow: none;
}

.notificationRequestAction--accept {
  border-color: rgba(89, 209, 255, 0.44);
  background: linear-gradient(135deg, rgba(33,150,243,0.76), rgba(14,165,233,0.46));
  color: #f7fbff;
}

.notificationRequestAction--cancel {
  border-color: rgba(148,163,184,0.22);
  background: rgba(255,255,255,0.045);
}

.notificationRequestAction:hover,
.notificationRequestAction:focus-visible {
  transform: translateY(-1px);
}

.notificationRequestAction[disabled] {
  opacity: 0.65;
  transform: none;
}

.notificationRowMeta {
  min-width: 44px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  grid-column: 2;
  grid-row: 1;
  padding-top: 2px;
}

.notificationRowTime {
  font-size: 12px;
  color: rgba(194, 205, 216, 0.58);
  white-space: nowrap;
  line-height: 1.25;
}

.notificationRowMenu {
  position: relative;
  align-self: flex-end;
}

.notificationRowMenu summary {
  list-style: none;
  width: 24px;
  height: 28px;
  border: 0;
  background: transparent;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5px;
  cursor: pointer;
  color: rgba(194, 205, 216, 0.58);
  padding: 0;
}

.notificationRowMenu summary::-webkit-details-marker {
  display: none;
}

.notificationRowMenu summary span {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
}

.notificationRowMenu[open] summary {
  color: rgba(248,250,252,0.86);
}

.notificationRowMenuPanel {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  min-width: 216px;
  padding: 7px;
  border-radius: 15px;
  border: 1px solid rgba(255,255,255,0.055);
  background: rgba(20, 24, 31, 0.82);
  box-shadow: 0 16px 36px rgba(0,0,0,0.28);
  backdrop-filter: blur(18px) saturate(135%);
  z-index: 20;
}

.notificationRowMenuPanel form + form {
  margin-top: 2px;
}

.notificationRowMenuPanel button {
  width: 100%;
  min-height: 42px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: rgba(248,250,252,0.92);
  box-shadow: none;
  text-align: left;
  justify-content: flex-start;
}

.notificationMenuAction {
  display: flex;
  align-items: center;
  gap: 12px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
}

.notificationMenuAction:hover,
.notificationMenuAction:focus-visible {
  background: rgba(255,255,255,0.055);
}

.notificationMenuActionIcon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: rgba(248,250,252,0.84);
}

.notificationMenuActionIcon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.notificationsEmptyState {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 48px 20px 24px;
  color: var(--muted);
}

.notificationsEmptyTitle {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

.notificationsEmptyCopy {
  max-width: 320px;
  font-size: 14px;
  line-height: 1.6;
}

/* Instagram-like notification timeline: clean rows, inline sentences, media/actions at right. */
body.notificationsInboxScreen {
  background: var(--bg, #0b0f14);
}

body.notificationsInboxScreen .pageHeader.notificationsPageHeader {
  width: 100%;
  max-width: 680px;
  min-height: 64px;
  margin-inline: auto;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 18px 8px;
  border-bottom: 0;
  background: var(--bg, #0b0f14);
}

.notificationsHeaderLead {
  flex: 1 1 auto;
  gap: 12px;
  overflow: visible;
}

.notificationsPageBack {
  width: 38px;
  height: 38px;
  color: var(--text, #f8fafc);
}

.notificationsPageBack svg {
  width: 30px;
  height: 30px;
}

.notificationsPageTitle {
  flex: 0 1 auto;
  color: var(--text, #f8fafc);
  font-size: 22px;
  font-weight: 780;
  letter-spacing: -0.02em;
  overflow: visible;
  text-overflow: clip;
}

.notificationsInboxContent {
  width: 100%;
  max-width: 680px;
  margin-inline: auto;
  padding: 2px 20px calc(34px + env(safe-area-inset-bottom, 0px));
}

.notificationsRecoveryBanner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 8px 0 16px;
  padding: 14px 15px;
  border: 1px solid color-mix(in srgb, var(--accent, #4f7cff) 32%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent, #4f7cff) 11%, var(--surface, #11151d));
}

.notificationsRecoveryBanner > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.notificationsRecoveryBanner strong {
  color: var(--text, #f8fafc);
  font-size: 14px;
  line-height: 1.25;
}

.notificationsRecoveryBanner span {
  color: var(--muted, #9aa3b2);
  font-size: 12px;
  line-height: 1.35;
}

.notificationsRecoveryBanner button {
  min-width: 100px;
  min-height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 11px;
  background: var(--accent, #4f7cff);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 760;
  white-space: nowrap;
}

.notificationsFilters { display: none; }

.notificationsDayGroup + .notificationsDayGroup { margin-top: 18px; }

.notificationsDayLabel {
  margin: 12px 0 10px;
  color: var(--text, #f8fafc);
  font-size: 18px;
  font-weight: 760;
  letter-spacing: -0.015em;
  text-transform: none;
}

.notificationRow {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  max-height: 180px;
  padding: 8px 0;
  border: 0;
  background: transparent;
  transition:
    opacity 180ms ease,
    background-color 150ms ease,
    transform 220ms cubic-bezier(.22, .8, .3, 1),
    max-height 240ms cubic-bezier(.4, 0, .2, 1),
    min-height 240ms cubic-bezier(.4, 0, .2, 1),
    padding 240ms cubic-bezier(.4, 0, .2, 1);
}

.notificationRow.is-deleting {
  opacity: 0.52;
  pointer-events: none;
}

.notificationRow.is-removing {
  min-height: 0;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateX(-18px) scale(.985);
  pointer-events: none;
}

.notificationsDayGroup {
  transition: opacity 180ms ease, max-height 180ms ease, margin 180ms ease;
}

.notificationsDayGroup.is-removing {
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  opacity: 0;
}

.notificationRow:hover { background: transparent; }

.notificationRow.is-unread {
  margin-inline: 0;
  padding-inline: 0;
  border-radius: 0;
  background: transparent;
}

.notificationRowLead {
  min-width: 0;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.notificationRowActorLink {
  width: 46px;
  height: 46px;
  display: block;
  border-radius: 50%;
  text-decoration: none;
}

.notificationRowMedia {
  width: 46px;
  height: 46px;
  display: block;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
}

.notificationRow.is-unread .notificationRowMedia {
  padding: 2px;
  background: conic-gradient(from 205deg, #ffb700, #ff3f6c 32%, #c629ff 58%, #5278ff 78%, #ffb700);
}

.notificationRowMedia img {
  width: 100%;
  height: 100%;
  border: 2px solid var(--background, #080b10);
  border-radius: 50%;
  object-fit: cover;
}

.notificationRow:not(.is-unread) .notificationRowMedia img { border-width: 0; }

.notificationRowMedia--fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text, #f8fafc);
}

.notificationRowLink {
  min-width: 0;
  display: block;
  grid-column: auto;
  grid-row: auto;
  grid-template-columns: none;
  align-items: initial;
  gap: 0;
  color: inherit;
  text-decoration: none;
}

.notificationRow.is-unread .notificationRowTitle { color: inherit; }

.notificationRowCopy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.notificationRowSentence {
  color: var(--text, #f8fafc);
  font-size: 14.25px;
  font-weight: 430;
  line-height: 1.35;
  letter-spacing: -0.008em;
  overflow-wrap: anywhere;
}

.notificationRowActor,
.notificationRowTitle {
  color: inherit;
  font: inherit;
  font-weight: 780;
}

.notificationRowAction { color: inherit; }

.notificationRowTime {
  display: inline;
  margin-left: 3px;
  color: var(--muted, rgba(194, 205, 216, 0.64));
  font-size: inherit;
  white-space: nowrap;
}

.notificationRowUnreadDot {
  width: 7px;
  height: 7px;
  display: inline-block;
  margin-left: 5px;
  border-radius: 50%;
  background: #0095f6;
  vertical-align: 1px;
}

.notificationRowSecondary {
  display: -webkit-box;
  color: var(--muted, rgba(194, 205, 216, 0.68));
  font-size: 13px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.notificationRowSide {
  min-width: 48px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.notificationContentThumbnail {
  width: 44px;
  height: 50px;
  display: block;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(255,255,255,0.07);
}

.notificationContentThumbnail img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.notificationQuickAction,
.notificationRequestAction {
  min-width: 86px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 0;
  border-radius: 9px;
  background: rgba(255,255,255,0.09);
  color: var(--text, #f8fafc);
  box-shadow: none;
  font: inherit;
  font-size: 13px;
  font-weight: 730;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.notificationQuickAction.is-primary,
.notificationRequestAction--accept {
  background: #4b5cff;
  color: #ffffff;
}

.notificationRequestActions {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  margin: 0;
}

.notificationRequestAction {
  min-width: 68px;
  min-height: 32px;
  padding-inline: 10px;
  font-size: 12px;
}

.notificationRequestAction--cancel {
  border: 0;
  background: rgba(255,255,255,0.08);
}

.notificationRowMenu {
  position: relative;
  align-self: center;
  flex: 0 0 auto;
}

.notificationRowMenu summary {
  width: 18px;
  height: 30px;
  opacity: 0.52;
}

.notificationRowMenuPanel { top: calc(100% + 4px); }

@media (max-width: 520px) {
  .notificationsInboxContent { padding-inline: 16px; }
  .notificationRow { gap: 8px; }
  .notificationRowLead {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 10px;
  }
  .notificationRowActorLink,
  .notificationRowMedia {
    width: 44px;
    height: 44px;
  }
  .notificationRowSentence { font-size: 13.75px; }
  .notificationRowSecondary { font-size: 12.75px; }
  .notificationQuickAction {
    min-width: 78px;
    min-height: 32px;
    padding-inline: 10px;
    font-size: 12px;
  }
  .notificationRequestActions {
    flex-direction: column;
    gap: 4px;
  }
  .notificationRequestAction {
    min-width: 76px;
    min-height: 32px;
  }
}

@media (max-width: 380px) {
  .notificationsInboxContent { padding-inline: 12px; }
  .notificationRowLead {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 9px;
  }
  .notificationRowActorLink,
  .notificationRowMedia {
    width: 40px;
    height: 40px;
  }
  .notificationQuickAction { min-width: 78px; }
  .notificationRowMenu summary { width: 16px; }
}

/* Notification settings */
.notificationsSettingsLead {
  margin-top: 6px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.notificationsSettingsForm {
  margin-top: 14px;
}

.notificationSettingsMatrixHead {
  display: none;
}

.notificationSettingsRow {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 0;
}

.notificationSettingsRow + .notificationSettingsRow {
  border-top: 1px solid rgba(255,255,255,0.06);
}

.notificationSettingsLead {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.notificationSettingsIcon,
.notificationSettingsAvatar {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--accent);
}

.notificationSettingsIcon svg {
  width: 20px;
  height: 20px;
}

.notificationSettingsAvatar {
  border-radius: 50%;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.notificationSettingsCopy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.notificationSettingsTitle {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.notificationSettingsDescription {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

.notificationSettingsChannels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.notificationChannelPill {
  position: relative;
  min-height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
}

.notificationChannelPill input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.notificationChannelPill.is-on {
  color: var(--text);
  border-color: rgba(111,230,200,0.28);
  background: linear-gradient(180deg, rgba(111,230,200,0.15), rgba(255,255,255,0.03));
}

.notificationSettingsFooter {
  margin-top: 18px;
}

.notificationPhonePanel {
  margin-top: 14px;
}

.notificationPhoneRow {
  align-items: center;
  gap: 14px;
}

.notificationPhoneButton {
  flex: 0 0 auto;
}

[data-push-status][data-tone="success"] {
  color: rgba(111, 230, 200, 0.92);
}

[data-push-status][data-tone="warning"] {
  color: rgba(255, 205, 122, 0.94);
}

[data-push-status][data-tone="error"] {
  color: rgba(255, 157, 157, 0.95);
}

@media (min-width: 720px) {
  .notificationSettingsMatrixHead {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 16px;
    padding-bottom: 10px;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .notificationSettingsMatrixChannels {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    text-align: center;
  }

  .notificationSettingsRow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 18px;
    align-items: center;
  }
}

/* Premium social refinements */
.activityDiscoveryPeopleName,
.activityDiscoveryPeopleCardRailName {
  min-width: 0;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1.15;
}

.activityBrowsePage .activityDiscoveryPeopleCardRailName,
.activityBrowsePage:not(.activityBrowsePage--explore):not(.activityBrowsePage--friends) .activityPeopleRailPage .activityDiscoveryPeopleCardRailName {
  display: inline-flex;
  align-items: center;
}

.activityDiscoveryPeopleNameText,
.activityDiscoveryPeopleCardRailNameText {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activityDiscoveryPeopleVerifiedBadge {
  width: 11px;
  height: 11px;
  flex: 0 0 11px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(199, 227, 245, 0.22);
  background:
    linear-gradient(180deg, rgba(103, 159, 193, 0.96), rgba(55, 118, 154, 0.96));
  color: rgba(248, 252, 255, 0.96);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  text-shadow: none;
  transform: translateY(0.5px);
}

.activityDiscoveryPeopleVerifiedBadge svg {
  width: 7px;
  height: 7px;
  display: block;
}

.profileHeroTitleCluster > .activityDiscoveryPeopleVerifiedBadge {
  width: 12px;
  height: 12px;
  flex-basis: 12px;
  margin-top: 2px;
  transform: translateY(0);
}

:is(.chip, .top-badge, .players-link, .statusPill) {
  border-color: var(--premium-chip-border);
  background: var(--premium-chip-bg);
  color: rgba(226, 233, 242, 0.84);
  box-shadow: none;
  text-shadow: none;
  font-weight: 620;
  letter-spacing: 0.01em;
}

:is(.chip.level, .pillActive) {
  border-color: var(--premium-blue-border);
  background: var(--premium-blue-bg);
  color: rgba(224, 238, 248, 0.9);
}

.profilePage .profileVisibilityBadge,
.profilePage .profileRoleBadge,
.profilePage .profileStatusBadge,
.profilePage .profileDistrictChip,
.activityPrimeBadge,
.activityPrimeSignalPill,
.cityPostBadge,
.cityPostScope {
  border-color: var(--premium-chip-border);
  background: var(--premium-chip-bg);
  color: rgba(226, 233, 242, 0.82);
  box-shadow: none;
  text-shadow: none;
  font-weight: 620;
  letter-spacing: 0.02em;
}

.profilePage .profileVisibilityBadge.is-public {
  border-color: var(--premium-blue-border);
  background: var(--premium-blue-bg);
  color: rgba(220, 238, 248, 0.92);
}

.profilePage .profileRoleBadge {
  border-color: rgba(224, 207, 174, 0.14);
  background: rgba(190, 166, 120, 0.08);
  color: rgba(235, 223, 200, 0.86);
}

:is(
  .activityDiscoveryAvatar--fallback,
  .commsInboxAvatar.is-fallback,
  .commsDistrictAvatar,
  .commsDistrictAvatarFlat,
  .dmChatAvatar.is-fallback,
  .chatInfoAvatar.is-fallback,
  body.dmChatScreen .dmMessageAvatar.is-fallback,
  .profileSocialAvatar,
  .profilePage .profileHeroImageSquare,
  .editProfileAvatar,
  .lb-avatar--anonymous,
  .cityPostAvatar,
  .cityPostActionIcon--avatar,
  .cityCommentsDescAvatarButton,
  .cityCommentsScroll .broadcast-comment-avatar,
  .profileIdentitySummaryAvatar,
  .profileIdentityOptionAvatar,
  .profileFlowPage .profileUploadPreviewAvatar,
  .profileFlowPage .profileComposerAvatar
) {
  position: relative;
  isolation: isolate;
  border-color: var(--premium-avatar-border);
  background: var(--premium-avatar-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
  color: var(--premium-avatar-initial);
  text-shadow: none;
}

:is(
  .activityDiscoveryAvatar--fallback,
  .commsInboxAvatar.is-fallback,
  .commsDistrictAvatar,
  .commsDistrictAvatarFlat,
  .dmChatAvatar.is-fallback,
  .chatInfoAvatar.is-fallback,
  body.dmChatScreen .dmMessageAvatar.is-fallback,
  .profileSocialAvatar,
  .profilePage .profileHeroImageSquare,
  .editProfileAvatar,
  .lb-avatar--anonymous,
  .cityPostAvatar,
  .cityPostActionIcon--avatar,
  .cityCommentsDescAvatarButton,
  .cityCommentsScroll .broadcast-comment-avatar,
  .profileIdentitySummaryAvatar,
  .profileIdentityOptionAvatar,
  .profileFlowPage .profileUploadPreviewAvatar,
  .profileFlowPage .profileComposerAvatar
)::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    var(--premium-avatar-noise),
    linear-gradient(135deg, rgba(255, 255, 255, 0.055), transparent 42%, rgba(255, 255, 255, 0.025));
  opacity: 0.56;
  pointer-events: none;
}

:is(
  .profileSocialAvatar,
  .profilePage .profileHeroImageSquare,
  .editProfileAvatar,
  .cityPostAvatar,
  .cityPostActionIcon--avatar,
  .cityCommentsDescAvatarButton,
  .cityCommentsScroll .broadcast-comment-avatar,
  .profileIdentitySummaryAvatar,
  .profileIdentityOptionAvatar,
  .profileFlowPage .profileUploadPreviewAvatar,
  .profileFlowPage .profileComposerAvatar
) img {
  position: relative;
  z-index: 1;
}

:is(
  .activityDiscoveryAvatar--fallback,
  .commsInboxAvatar.is-fallback,
  .commsDistrictAvatar,
  .commsDistrictAvatarFlat,
  .dmChatAvatar.is-fallback,
  .chatInfoAvatar.is-fallback,
  body.dmChatScreen .dmMessageAvatar.is-fallback,
  .profileSocialAvatarFallback,
  .profilePage .profileHeroImageSquare span,
  .editProfileAvatarInitial,
  .lb-avatarFallback,
  .cityPostAvatar,
  .cityPostActionAvatarText,
  .cityCommentsDescAvatarFallback,
  .cityCommentsScroll .broadcast-comment-avatarFallback,
  .profileIdentitySummaryAvatar,
  .profileIdentityOptionAvatar,
  .profileFlowPage .profileUploadPreviewAvatar,
  .profileFlowPage .profileComposerAvatar > span
) {
  color: var(--premium-avatar-initial);
  font-weight: 680;
  letter-spacing: 0;
  line-height: 1;
  text-shadow: none;
}

.profilePage .profileHeroImageSquare {
  border-radius: 20px;
}

.profilePage .profileHeroImageSquare span {
  font-size: 30px;
}

.chatInfoAvatar.is-fallback {
  font-size: 44px;
}

.activityDiscoveryAvatar--fallback,
.activityBrowsePage .activityDiscoveryAvatar--rail.activityDiscoveryAvatar--fallback {
  font-size: 11px;
}

:root {
  --neon-avatar-a: 35, 244, 255;
  --neon-avatar-b: 47, 124, 255;
  --neon-avatar-c: 195, 85, 255;
  /* The placeholder avatar is the most repeated element in the app -- a DM list
     shows eight at once -- so it has to sit behind names and messages rather
     than compete with them. The identity hue survives as a faint wash behind a
     neutral silhouette instead of colouring the figure itself, which also keeps
     the shape legible at 32px where a saturated gradient turned into a blob.
     Three glow layers (an outer 22px bloom, plus two on the figure) and a
     saturate(1.45) boost are gone; one hairline rim carries the hue. */
  --neon-avatar-bg:
    radial-gradient(circle at 50% 30%, rgba(var(--neon-avatar-a), 0.10), transparent 68%),
    linear-gradient(160deg, #1a2230, #131922);
  --neon-avatar-shadow:
    0 0 0 1px rgba(var(--neon-avatar-a), 0.14) inset;
  /* Single source of truth for the figure, so head and body cannot drift. */
  --neon-avatar-figure: rgba(202, 216, 234, 0.38);
  --neon-avatar-body-top: 62%;
  --neon-avatar-body-width: 82%;
  --neon-avatar-body-height: 54%;
  --neon-avatar-head-top: 24%;
  --neon-avatar-head-size: 32%;
}

.neonAvatar,
.profileHeroImageSquare.neonAvatar,
.cityPostActionIcon--avatar.neonAvatar,
.cityPostAvatar.neonAvatar,
:is(
  .activityDiscoveryAvatar--fallback,
  .commsInboxAvatar.is-fallback,
  .dmChatAvatar.is-fallback,
  .chatInfoAvatar.is-fallback,
  body.dmChatScreen .dmMessageAvatar.is-fallback,
  .dmCallAvatar.is-fallback,
  .myEventAttendeeAvatar.is-fallback,
  .lb-avatar--anonymous,
  .notificationRowMedia--fallback,
  .notificationSettingsAvatar
) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  border-color: rgba(var(--neon-avatar-a), 0.6);
  background: var(--neon-avatar-bg);
  color: transparent;
  font-size: 0;
  letter-spacing: 0;
  text-shadow: none;
  box-shadow: var(--neon-avatar-shadow);
}

.peopleEntityAvatar:not(:has(img)),
.settingsBlockedAvatar:not(:has(img)),
.profilePage .profileHeroImageSquare:not(:has(img)),
.editProfileAvatar:has(.editProfileAvatarInitial:not([hidden])),
.profileSocialAvatar:has(.profileSocialAvatarFallback),
.cityPostAvatar:not(:has(img)),
.cityPostActionIcon--avatar:has(.cityPostActionAvatarText):not(:has(img)),
.cityCommentsDescAvatarButton:has(.cityCommentsDescAvatarFallback):not(:has(img)),
.cityCommentsScroll .broadcast-comment-avatar:has(.broadcast-comment-avatarFallback):not(:has(img)),
.lb-avatar:has(.lb-avatarFallback):not(:has(img)),
.profileIdentitySummaryAvatar:not(:has(img)),
.profileIdentityOptionAvatar:not(:has(img)),
.profileFlowPage .profileUploadPreviewAvatar:not(:has(img)),
.profileFlowPage .profileComposerAvatar:not(:has(img)) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  border-color: rgba(var(--neon-avatar-a), 0.6);
  background: var(--neon-avatar-bg);
  color: transparent;
  font-size: 0;
  letter-spacing: 0;
  text-shadow: none;
  box-shadow: var(--neon-avatar-shadow);
}

.profileHeroImageSquare.neonAvatar {
  height: var(--profile-hero-avatar-size, 120px);
}

body.profilePage .profileHeroImageSquare.neonAvatar {
  width: 100%;
  height: var(--profile-hero-avatar-size, 120px);
  border-radius: 50%;
  border-color: rgba(var(--neon-avatar-a), 0.6);
  background: var(--neon-avatar-bg);
  color: transparent;
  font-size: 0;
  letter-spacing: 0;
  box-shadow: var(--neon-avatar-shadow);
}

body.appFrame .cityPostActionIcon--avatar.neonAvatar,
body.appFrame .cityPostAvatar.neonAvatar {
  border-radius: 50%;
  border-color: rgba(var(--neon-avatar-a), 0.6);
  background: var(--neon-avatar-bg);
  color: transparent;
  font-size: 0;
  letter-spacing: 0;
  box-shadow: var(--neon-avatar-shadow);
}

.neonAvatar::before,
.profileHeroImageSquare.neonAvatar::before,
.cityPostActionIcon--avatar.neonAvatar::before,
.cityPostAvatar.neonAvatar::before,
:is(
  .activityDiscoveryAvatar--fallback,
  .commsInboxAvatar.is-fallback,
  .dmChatAvatar.is-fallback,
  .chatInfoAvatar.is-fallback,
  body.dmChatScreen .dmMessageAvatar.is-fallback,
  .dmCallAvatar.is-fallback,
  .myEventAttendeeAvatar.is-fallback,
  .lb-avatar--anonymous,
  .notificationRowMedia--fallback,
  .notificationSettingsAvatar
)::before,
.peopleEntityAvatar:not(:has(img))::before,
.settingsBlockedAvatar:not(:has(img))::before,
.profilePage .profileHeroImageSquare:not(:has(img))::before,
.editProfileAvatar:has(.editProfileAvatarInitial:not([hidden]))::before,
.profileSocialAvatar:has(.profileSocialAvatarFallback)::before,
.cityPostAvatar:not(:has(img))::before,
.cityPostActionIcon--avatar:has(.cityPostActionAvatarText):not(:has(img))::before,
.cityCommentsDescAvatarButton:has(.cityCommentsDescAvatarFallback):not(:has(img))::before,
.cityCommentsScroll .broadcast-comment-avatar:has(.broadcast-comment-avatarFallback):not(:has(img))::before,
.lb-avatar:has(.lb-avatarFallback):not(:has(img))::before,
.profileIdentitySummaryAvatar:not(:has(img))::before,
.profileIdentityOptionAvatar:not(:has(img))::before,
.profileFlowPage .profileUploadPreviewAvatar:not(:has(img))::before,
.profileFlowPage .profileComposerAvatar:not(:has(img))::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: auto;
  left: 50%;
  top: var(--neon-avatar-body-top);
  width: var(--neon-avatar-body-width);
  height: var(--neon-avatar-body-height);
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--neon-avatar-figure);
  opacity: 1;
  pointer-events: none;
}

body.appFrame .cityPostActionIcon--avatar.neonAvatar::before,
body.appFrame .cityPostAvatar.neonAvatar::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: auto;
  left: 50%;
  top: var(--neon-avatar-body-top);
  width: var(--neon-avatar-body-width);
  height: var(--neon-avatar-body-height);
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--neon-avatar-figure);
  opacity: 1;
  pointer-events: none;
}

body.profilePage .profileHeroImageSquare.neonAvatar::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: auto;
  left: 50%;
  top: var(--neon-avatar-body-top);
  width: var(--neon-avatar-body-width);
  height: var(--neon-avatar-body-height);
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--neon-avatar-figure);
  opacity: 1;
  pointer-events: none;
}

.neonAvatar::after,
.profileHeroImageSquare.neonAvatar::after,
.cityPostActionIcon--avatar.neonAvatar::after,
.cityPostAvatar.neonAvatar::after,
:is(
  .activityDiscoveryAvatar--fallback,
  .commsInboxAvatar.is-fallback,
  .dmChatAvatar.is-fallback,
  .chatInfoAvatar.is-fallback,
  body.dmChatScreen .dmMessageAvatar.is-fallback,
  .dmCallAvatar.is-fallback,
  .myEventAttendeeAvatar.is-fallback,
  .lb-avatar--anonymous,
  .notificationRowMedia--fallback,
  .notificationSettingsAvatar
)::after,
.peopleEntityAvatar:not(:has(img))::after,
.settingsBlockedAvatar:not(:has(img))::after,
.profilePage .profileHeroImageSquare:not(:has(img))::after,
.editProfileAvatar:has(.editProfileAvatarInitial:not([hidden]))::after,
.profileSocialAvatar:has(.profileSocialAvatarFallback)::after,
.cityPostAvatar:not(:has(img))::after,
.cityPostActionIcon--avatar:has(.cityPostActionAvatarText):not(:has(img))::after,
.cityCommentsDescAvatarButton:has(.cityCommentsDescAvatarFallback):not(:has(img))::after,
.cityCommentsScroll .broadcast-comment-avatar:has(.broadcast-comment-avatarFallback):not(:has(img))::after,
.lb-avatar:has(.lb-avatarFallback):not(:has(img))::after,
.profileIdentitySummaryAvatar:not(:has(img))::after,
.profileIdentityOptionAvatar:not(:has(img))::after,
.profileFlowPage .profileUploadPreviewAvatar:not(:has(img))::after,
.profileFlowPage .profileComposerAvatar:not(:has(img))::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: auto;
  left: 50%;
  top: var(--neon-avatar-head-top);
  width: var(--neon-avatar-head-size);
  transform: translateX(-50%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--neon-avatar-figure);
  opacity: 1;
  pointer-events: none;
}

body.appFrame .cityPostActionIcon--avatar.neonAvatar::after,
body.appFrame .cityPostAvatar.neonAvatar::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: auto;
  left: 50%;
  top: var(--neon-avatar-head-top);
  width: var(--neon-avatar-head-size);
  transform: translateX(-50%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--neon-avatar-figure);
  opacity: 1;
  pointer-events: none;
}

body.profilePage .profileHeroImageSquare.neonAvatar::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: auto;
  left: 50%;
  top: var(--neon-avatar-head-top);
  width: var(--neon-avatar-head-size);
  transform: translateX(-50%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--neon-avatar-figure);
  opacity: 1;
  pointer-events: none;
}

:is(
  .activityDiscoveryAvatar--fallback,
  .commsInboxAvatar.is-fallback,
  .dmChatAvatar.is-fallback,
  .chatInfoAvatar.is-fallback,
  body.dmChatScreen .dmMessageAvatar.is-fallback,
  .dmCallAvatar.is-fallback,
  .myEventAttendeeAvatar.is-fallback,
  .lb-avatarFallback,
  .lb-avatar--anonymous .lb-avatarMask,
  .profileSocialAvatarFallback,
  .editProfileAvatarInitial,
  .cityPostActionAvatarText,
  .cityCommentsDescAvatarFallback,
  .cityCommentsScroll .broadcast-comment-avatarFallback,
  .notificationRowMediaInitial,
  .notificationSettingsAvatar,
  .profileHeroImageSquare.neonAvatar > span,
  .cityPostActionIcon--avatar.neonAvatar .cityPostActionAvatarText,
  .cityPostAvatar.neonAvatar > span,
  .peopleEntityAvatar:not(:has(img)) > span,
  .settingsBlockedAvatar:not(:has(img)) > span,
  .profilePage .profileHeroImageSquare:not(:has(img)) > span,
  .editProfileAvatar:has(.editProfileAvatarInitial:not([hidden])) .editProfileAvatarInitial,
  .profileSocialAvatar:has(.profileSocialAvatarFallback) .profileSocialAvatarFallback,
  .cityPostAvatar:not(:has(img)) > span,
  .cityPostActionIcon--avatar:has(.cityPostActionAvatarText):not(:has(img)) .cityPostActionAvatarText,
  .cityCommentsDescAvatarButton:has(.cityCommentsDescAvatarFallback):not(:has(img)) .cityCommentsDescAvatarFallback,
  .cityCommentsScroll .broadcast-comment-avatar:has(.broadcast-comment-avatarFallback):not(:has(img)) .broadcast-comment-avatarFallback,
  .lb-avatar:has(.lb-avatarFallback):not(:has(img)) .lb-avatarFallback,
  .profileIdentitySummaryAvatar:not(:has(img)) > span,
  .profileIdentityOptionAvatar:not(:has(img)) > span,
  .profileFlowPage .profileUploadPreviewAvatar:not(:has(img)) > span,
  .profileFlowPage .profileComposerAvatar:not(:has(img)) > span
) {
  color: transparent;
  font-size: 0;
  letter-spacing: 0;
  text-indent: -9999px;
}

body.appFrame .cityPostActionIcon--avatar.neonAvatar .cityPostActionAvatarText,
body.appFrame .cityPostAvatar.neonAvatar > span {
  color: transparent;
  font-size: 0;
  letter-spacing: 0;
  text-indent: -9999px;
}

body.profilePage .profileHeroImageSquare.neonAvatar > span {
  color: transparent;
  font-size: 0;
  letter-spacing: 0;
  text-indent: -9999px;
}

:is(
  .commsFlatList > li,
  .peopleEntityRow,
  .activityDiscoveryPeopleRow,
  .activityDiscoveryPeopleCardRail,
  .profileSocialRow,
  .settingsBlockedRow,
  .notificationRow,
  .myEventAttendeeRow,
  .lb-card,
  .broadcast-comment-thread,
  .broadcast-comment-item
):nth-child(20n+1) { --neon-avatar-a: 35, 244, 255; --neon-avatar-b: 47, 124, 255; --neon-avatar-c: 195, 85, 255; }
:is(
  .commsFlatList > li,
  .peopleEntityRow,
  .activityDiscoveryPeopleRow,
  .activityDiscoveryPeopleCardRail,
  .profileSocialRow,
  .settingsBlockedRow,
  .notificationRow,
  .myEventAttendeeRow,
  .lb-card,
  .broadcast-comment-thread,
  .broadcast-comment-item
):nth-child(20n+2) { --neon-avatar-a: 255, 58, 216; --neon-avatar-b: 255, 70, 126; --neon-avatar-c: 255, 145, 65; }
:is(
  .commsFlatList > li,
  .peopleEntityRow,
  .activityDiscoveryPeopleRow,
  .activityDiscoveryPeopleCardRail,
  .profileSocialRow,
  .settingsBlockedRow,
  .notificationRow,
  .myEventAttendeeRow,
  .lb-card,
  .broadcast-comment-thread,
  .broadcast-comment-item
):nth-child(20n+3) { --neon-avatar-a: 112, 255, 87; --neon-avatar-b: 20, 220, 151; --neon-avatar-c: 36, 248, 255; }
:is(
  .commsFlatList > li,
  .peopleEntityRow,
  .activityDiscoveryPeopleRow,
  .activityDiscoveryPeopleCardRail,
  .profileSocialRow,
  .settingsBlockedRow,
  .notificationRow,
  .myEventAttendeeRow,
  .lb-card,
  .broadcast-comment-thread,
  .broadcast-comment-item
):nth-child(20n+4) { --neon-avatar-a: 255, 229, 67; --neon-avatar-b: 255, 137, 42; --neon-avatar-c: 255, 63, 174; }
:is(
  .commsFlatList > li,
  .peopleEntityRow,
  .activityDiscoveryPeopleRow,
  .activityDiscoveryPeopleCardRail,
  .profileSocialRow,
  .settingsBlockedRow,
  .notificationRow,
  .myEventAttendeeRow,
  .lb-card,
  .broadcast-comment-thread,
  .broadcast-comment-item
):nth-child(20n+5) { --neon-avatar-a: 178, 103, 255; --neon-avatar-b: 118, 65, 255; --neon-avatar-c: 28, 231, 255; }
:is(
  .commsFlatList > li,
  .peopleEntityRow,
  .activityDiscoveryPeopleRow,
  .activityDiscoveryPeopleCardRail,
  .profileSocialRow,
  .settingsBlockedRow,
  .notificationRow,
  .myEventAttendeeRow,
  .lb-card,
  .broadcast-comment-thread,
  .broadcast-comment-item
):nth-child(20n+6) { --neon-avatar-a: 64, 169, 255; --neon-avatar-b: 28, 96, 255; --neon-avatar-c: 0, 255, 214; }
:is(
  .commsFlatList > li,
  .peopleEntityRow,
  .activityDiscoveryPeopleRow,
  .activityDiscoveryPeopleCardRail,
  .profileSocialRow,
  .settingsBlockedRow,
  .notificationRow,
  .myEventAttendeeRow,
  .lb-card,
  .broadcast-comment-thread,
  .broadcast-comment-item
):nth-child(20n+7) { --neon-avatar-a: 255, 82, 97; --neon-avatar-b: 255, 44, 172; --neon-avatar-c: 149, 72, 255; }
:is(
  .commsFlatList > li,
  .peopleEntityRow,
  .activityDiscoveryPeopleRow,
  .activityDiscoveryPeopleCardRail,
  .profileSocialRow,
  .settingsBlockedRow,
  .notificationRow,
  .myEventAttendeeRow,
  .lb-card,
  .broadcast-comment-thread,
  .broadcast-comment-item
):nth-child(20n+8) { --neon-avatar-a: 74, 255, 209; --neon-avatar-b: 29, 207, 255; --neon-avatar-c: 49, 112, 255; }

.neonAvatar--0 { --neon-avatar-a: 35, 244, 255; --neon-avatar-b: 47, 124, 255; --neon-avatar-c: 195, 85, 255; }
.neonAvatar--1 { --neon-avatar-a: 255, 58, 216; --neon-avatar-b: 255, 70, 126; --neon-avatar-c: 255, 145, 65; }
.neonAvatar--2 { --neon-avatar-a: 112, 255, 87; --neon-avatar-b: 20, 220, 151; --neon-avatar-c: 36, 248, 255; }
.neonAvatar--3 { --neon-avatar-a: 255, 229, 67; --neon-avatar-b: 255, 137, 42; --neon-avatar-c: 255, 63, 174; }
.neonAvatar--4 { --neon-avatar-a: 178, 103, 255; --neon-avatar-b: 118, 65, 255; --neon-avatar-c: 28, 231, 255; }
.neonAvatar--5 { --neon-avatar-a: 64, 169, 255; --neon-avatar-b: 28, 96, 255; --neon-avatar-c: 0, 255, 214; }
.neonAvatar--6 { --neon-avatar-a: 255, 82, 97; --neon-avatar-b: 255, 44, 172; --neon-avatar-c: 149, 72, 255; }
.neonAvatar--7 { --neon-avatar-a: 74, 255, 209; --neon-avatar-b: 29, 207, 255; --neon-avatar-c: 49, 112, 255; }
.neonAvatar--8 { --neon-avatar-a: 244, 255, 91; --neon-avatar-b: 133, 255, 50; --neon-avatar-c: 34, 215, 126; }
.neonAvatar--9 { --neon-avatar-a: 247, 81, 255; --neon-avatar-b: 153, 90, 255; --neon-avatar-c: 50, 153, 255; }
.neonAvatar--10 { --neon-avatar-a: 101, 226, 255; --neon-avatar-b: 62, 171, 255; --neon-avatar-c: 73, 255, 149; }
.neonAvatar--11 { --neon-avatar-a: 255, 111, 166; --neon-avatar-b: 255, 122, 66; --neon-avatar-c: 255, 219, 75; }
.neonAvatar--12 { --neon-avatar-a: 30, 255, 236; --neon-avatar-b: 156, 79, 255; --neon-avatar-c: 255, 54, 205; }
.neonAvatar--13 { --neon-avatar-a: 88, 255, 152; --neon-avatar-b: 206, 255, 65; --neon-avatar-c: 31, 230, 255; }
.neonAvatar--14 { --neon-avatar-a: 45, 116, 255; --neon-avatar-b: 42, 221, 255; --neon-avatar-c: 255, 60, 232; }
.neonAvatar--15 { --neon-avatar-a: 255, 122, 92; --neon-avatar-b: 255, 55, 92; --neon-avatar-c: 255, 62, 186; }
.neonAvatar--16 { --neon-avatar-a: 184, 255, 35; --neon-avatar-b: 38, 255, 218; --neon-avatar-c: 36, 130, 255; }
.neonAvatar--17 { --neon-avatar-a: 214, 159, 255; --neon-avatar-b: 255, 86, 198; --neon-avatar-c: 63, 236, 255; }
.neonAvatar--18 { --neon-avatar-a: 255, 175, 47; --neon-avatar-b: 255, 240, 69; --neon-avatar-c: 160, 74, 255; }
.neonAvatar--19 { --neon-avatar-a: 226, 249, 255; --neon-avatar-b: 62, 228, 255; --neon-avatar-c: 78, 124, 255; }

.activityPrimeVisualOverlay.activityPrimeVisualOverlay--iconBadge {
  padding: 8px;
  background:
    linear-gradient(180deg, rgba(5, 8, 12, 0.16), rgba(5, 8, 12, 0.02) 40%, rgba(5, 8, 12, 0.24));
}

.activityPrimeBadge.activityPrimeBadge--iconOnly,
.normalEventCard.activityPrimeCard--activity .activityPrimeBadge.activityPrimeBadge--iconOnly,
.activityBrowsePage .activityPrimeCard--activity .activityPrimeBadge.activityPrimeBadge--iconOnly,
:is(.profilePage .profileActivityGrid--visual, .activityBrowsePage, .savedPage .myListsVisualGrid, .activityDiscoverySearchRail) .normalEventCard.activityPrimeCard--activity .activityPrimeBadge.activityPrimeBadge--iconOnly,
.activityBrowsePage.activityBrowsePage--friends .activityFriendsFeedCard .activityPrimeCard--activity .activityPrimeBadge.activityPrimeBadge--iconOnly {
  width: 19px;
  height: 19px;
  min-width: 19px;
  min-height: 19px;
  max-width: 19px;
  display: inline-grid;
  place-items: center;
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  overflow: visible;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.48);
}

.activityPrimeBadge.activityPrimeBadge--iconOnly .activityPrimeBadgeIcon,
.normalEventCard.activityPrimeCard--activity .activityPrimeBadge.activityPrimeBadge--iconOnly .activityPrimeBadgeIcon,
:is(.profilePage .profileActivityGrid--visual, .activityBrowsePage, .savedPage .myListsVisualGrid, .activityDiscoverySearchRail) .normalEventCard.activityPrimeCard--activity .activityPrimeBadge.activityPrimeBadge--iconOnly .activityPrimeBadgeIcon {
  width: 19px;
  height: 19px;
  display: inline-grid;
  place-items: center;
}

.activityPrimeBadge.activityPrimeBadge--iconOnly .activityPrimeBadgeIcon svg,
.normalEventCard.activityPrimeCard--activity .activityPrimeBadge.activityPrimeBadge--iconOnly .activityPrimeBadgeIcon svg,
:is(.profilePage .profileActivityGrid--visual, .activityBrowsePage, .savedPage .myListsVisualGrid, .activityDiscoverySearchRail) .normalEventCard.activityPrimeCard--activity .activityPrimeBadge.activityPrimeBadge--iconOnly .activityPrimeBadgeIcon svg,
.activityBrowsePage.activityBrowsePage--friends .activityFriendsFeedCard .activityPrimeCard--activity .activityPrimeBadge.activityPrimeBadge--iconOnly .activityPrimeBadgeIcon svg {
  width: 15px;
  height: 15px;
  display: block;
}

.activityPrimeBadge.activityPrimeBadge--iconOnly.is-music {
  color: rgba(184, 146, 255, 0.96);
}

.activityPrimeBadge.activityPrimeBadge--iconOnly.is-place {
  color: rgba(126, 219, 255, 0.95);
}

.activityPrimeBadge.activityPrimeBadge--iconOnly.is-meetup {
  color: rgba(117, 196, 255, 0.95);
}

.activityPrimeBadge.activityPrimeBadge--iconOnly.is-sport {
  color: rgba(255, 178, 103, 0.95);
}

.activityPrimeBadge.activityPrimeBadge--iconOnly.is-food {
  color: rgba(92, 222, 157, 0.95);
}

.activityBrowsePage:not(.activityBrowsePage--explore):not(.activityBrowsePage--friends) .activityPeopleAvatarLine {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 14px;
  margin-inline: -14px;
  padding: 0 14px 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-padding-inline: 14px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  scrollbar-color: transparent transparent;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}

.activityBrowsePage:not(.activityBrowsePage--explore):not(.activityBrowsePage--friends) .activityPeopleAvatarLine::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.activityBrowsePage:not(.activityBrowsePage--explore):not(.activityBrowsePage--friends) .activityPeopleAvatarLine .activityDiscoveryPeopleCardRail--avatarLine {
  flex: 0 0 66px;
  width: 66px;
  max-width: 66px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  scroll-snap-align: start;
}

.activityBrowsePage:not(.activityBrowsePage--explore):not(.activityBrowsePage--friends) .activityPeopleAvatarLine .activityDiscoveryPeopleCardRail--avatarLine:hover,
.activityBrowsePage:not(.activityBrowsePage--explore):not(.activityBrowsePage--friends) .activityPeopleAvatarLine .activityDiscoveryPeopleCardRail--avatarLine:focus-visible {
  background: transparent;
  border-color: transparent;
}

.activityBrowsePage:not(.activityBrowsePage--explore):not(.activityBrowsePage--friends) .activityPeopleAvatarLine .activityDiscoveryAvatar--rail {
  width: 58px;
  height: 58px;
  border-radius: 999px;
  border-color: rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)),
    rgba(8, 13, 20, 0.9);
  box-shadow: 0 0 0 1px rgba(122, 212, 255, 0.04);
}

.activityBrowsePage:not(.activityBrowsePage--explore):not(.activityBrowsePage--friends) .activityPeopleAvatarLine .activityDiscoveryAvatar--rail.activityDiscoveryAvatar--fallback {
  font-size: 16px;
}

.activityBrowsePage .activityDiscoveryAvatar--rail.activityDiscoveryAvatar--fallback,
.activityBrowsePage:not(.activityBrowsePage--explore):not(.activityBrowsePage--friends) .activityPeopleGroupTrack .activityDiscoveryAvatar--rail.activityDiscoveryAvatar--fallback,
.activityBrowsePage:not(.activityBrowsePage--explore):not(.activityBrowsePage--friends) .activityPeopleRailPage .activityDiscoveryAvatar--rail.activityDiscoveryAvatar--fallback,
.activityBrowsePage:not(.activityBrowsePage--explore):not(.activityBrowsePage--friends) .activityPeopleAvatarLine .activityDiscoveryAvatar--rail.activityDiscoveryAvatar--fallback {
  border-radius: 50%;
  border-color: rgba(var(--neon-avatar-a), 0.6);
  background: var(--neon-avatar-bg);
  box-shadow: var(--neon-avatar-shadow);
}

.activityBrowsePage:not(.activityBrowsePage--explore):not(.activityBrowsePage--friends) .activityPeopleAvatarLine .activityDiscoveryPeopleCardRailText {
  width: 100%;
  min-width: 0;
  display: block;
}

.activityBrowsePage:not(.activityBrowsePage--explore):not(.activityBrowsePage--friends) .activityPeopleAvatarLine .activityDiscoveryPeopleCardRailName {
  width: 100%;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: center;
  white-space: normal;
  font-size: 11.5px;
  font-weight: 680;
  line-height: 1.12;
  color: rgba(247, 251, 255, 0.93);
}

.activityBrowsePage:not(.activityBrowsePage--explore):not(.activityBrowsePage--friends) .activityPeopleAvatarLine .activityDiscoveryPeopleCardRailNameText {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

/* =========================================================
   Instagram-inspired light theme
   White application chrome with dark, high-contrast type.
   Full-screen photo and video canvases intentionally stay dark.
   ========================================================= */

:root[data-app-theme="light"],
:root[data-app-theme="light"] body {
  background: #ffffff;
  color: var(--text);
}

:root[data-app-theme="light"] body.appFrame,
:root[data-app-theme="light"] body.appFrame.mapPage,
:root[data-app-theme="light"] body.appFrame.profilePage,
:root[data-app-theme="light"] body.appFrame.cityPage,
:root[data-app-theme="light"] body.appFrame.settingsScreen,
:root[data-app-theme="light"] body.filePage {
  background: #ffffff;
  background-image: none;
}

:root[data-app-theme="light"] :is(
  .app-shell,
  .appShell,
  .app-content,
  .appContent,
  .content,
  .center-card,
  .filePageShell,
  .settingsSystemContent,
  .settingsContent,
  .morePageContent,
  .walletPageContent,
  .notificationsInboxContent
) {
  background-color: #ffffff;
  color: var(--text);
}

:root[data-app-theme="light"] :is(h1, h2, h3, h4, h5, h6, .pageTitle, .sectionTitle) {
  color: var(--text);
}

:root[data-app-theme="light"] :is(input, textarea, select) {
  border-color: var(--line);
  background: #fafafa;
  color: var(--text);
  box-shadow: none;
}

:root[data-app-theme="light"] :is(input, textarea)::placeholder {
  color: #8e8e8e;
  opacity: 1;
}

:root[data-app-theme="light"] select option {
  background: #ffffff;
  color: var(--text);
}

:root[data-app-theme="light"] :is(
  .card,
  .row,
  .chip,
  .dropdown,
  .sheetCard,
  .center-card,
  .empty-state,
  .infoPanel,
  .modalCard
) {
  border-color: var(--line);
  background: #ffffff;
  color: var(--text);
  box-shadow: var(--shadow-soft);
}

:root[data-app-theme="light"] :is(.btn-secondary, .btn.ghost, .secondaryBtn, .miniBtn, .sheetRow) {
  border-color: var(--line);
  background: #fafafa;
  color: var(--text);
}

:root[data-app-theme="light"] :is(.pageHeader, .top-bar, .topbar) {
  border-bottom-color: var(--line);
  background: rgba(255, 255, 255, 0.96);
  color: var(--text);
  box-shadow: none;
}

:root[data-app-theme="light"] body.appFrame :is(.pageHeader, .top-bar, .profileHeader, .mapTopBar) {
  background: #ffffff;
}

:root[data-app-theme="light"] :is(.headerActionBtn, .headerMenuBtn, .menu-toggle, .appMenuBtn) {
  border-color: transparent;
  background: transparent;
  color: #262626;
  box-shadow: none;
}

:root[data-app-theme="light"] :is(.headerActionBtn, .headerMenuBtn, .menu-toggle, .appMenuBtn):is(:hover, :focus-visible) {
  border-color: transparent;
  background: #f5f5f5;
  color: #000000;
  box-shadow: none;
}

:root[data-app-theme="light"] :is(.dropdown, .appMenu, .profileIdentityMenu, .notificationRowMenuPanel, .broadcast-comment-menuPanel) {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.98);
  color: var(--text);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}

:root[data-app-theme="light"] :is(.dropdown a, .dropdown button, .profileIdentityOption, .notificationMenuAction) {
  color: var(--text);
}

:root[data-app-theme="light"] :is(.dropdown a, .dropdown button, .profileIdentityOption, .notificationMenuAction):is(:hover, :focus-visible) {
  background: #f5f5f5;
}

:root[data-app-theme="light"] .dropdown :is(a.danger, button.danger) {
  color: #ed4956;
}

:root[data-app-theme="light"] .dock {
  background: rgba(255, 255, 255, 0.97);
  border-top-color: var(--dock-border);
  box-shadow: 0 -1px 0 rgba(15, 20, 25, 0.04);
}

:root[data-app-theme="light"] .dockItem {
  color: var(--dock-icon);
}

:root[data-app-theme="light"] .dockItem:is(.isActive, .is-active) {
  color: var(--accent);
  background: transparent;
}

/* City keeps TikTok/Reels-style dark navigation under immersive media. */
:root[data-app-theme="light"] .cityPage .dock {
  background: #000000;
  border-top-color: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

:root[data-app-theme="light"] .cityPage .dockItem {
  color: rgba(255, 255, 255, 0.92);
}

:root[data-app-theme="light"] .cityPage .dockItem:is(.isActive, .is-active) {
  color: var(--accent);
}

:root[data-app-theme="light"] :is(.installPromptCard, .neocityGlobalToast) {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.97);
  color: var(--text);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

:root[data-app-theme="light"] .installPromptCopy {
  color: var(--muted);
}

:root[data-app-theme="light"] .installPromptPrimary {
  border-color: #0095f6;
  background: #0095f6;
  color: #ffffff;
}

:root[data-app-theme="light"] .installPromptSecondary {
  border-color: var(--line);
  background: #f5f5f5;
  color: var(--text);
}

/* Authentication */
:root[data-app-theme="light"] :is(.auth-screen, .auth-screen--premium, .auth-premium-root) {
  background: #ffffff;
  color: var(--text);
}

:root[data-app-theme="light"] :is(.auth-card, .auth-card--sheet, .auth-card-overlap) {
  border-color: var(--line);
  background: #ffffff;
  color: var(--text);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.08);
}

:root[data-app-theme="light"] .auth-hero__layer--base {
  background:
    radial-gradient(circle at 22% 10%, rgba(0, 149, 246, 0.14), transparent 38%),
    radial-gradient(circle at 82% 60%, rgba(111, 230, 200, 0.12), transparent 42%),
    #fafafa;
}

:root[data-app-theme="light"] .auth-hero__layer--grid {
  opacity: 0.2;
  filter: invert(1);
}

:root[data-app-theme="light"] :is(
  .auth-title,
  .auth-screen--premium .auth-title,
  .auth-hero__brand,
  .auth-hero__headline,
  .auth-wizard-header .signup-brand,
  .auth-wizard-header .signup-h1
) {
  color: var(--text);
}

:root[data-app-theme="light"] :is(
  .auth-subtitle,
  .auth-screen--premium .auth-subtitle,
  .auth-hero__tagline,
  .auth-hint,
  .auth-wizard-header .signup-sub,
  .auth-signup-wizard .signup-form .hint,
  .auth-signup-wizard .signup-footer
) {
  color: var(--muted);
}

:root[data-app-theme="light"] .auth-sheet-handle {
  background: #dbdbdb;
}

:root[data-app-theme="light"] .auth-signup-wizard .signup-form label,
:root[data-app-theme="light"] .auth-signup-wizard .signup-check {
  color: #262626;
}

:root[data-app-theme="light"] :is(
  .auth-forgot-row a,
  .auth-signup-wizard .signup-check a,
  .auth-signup-wizard .signup-footer a
) {
  color: #0095f6;
}

:root[data-app-theme="light"] :is(.auth-input-wrap, .auth-input, .auth-form input, .auth-form textarea, .auth-form select) {
  border-color: var(--line);
  background: #fafafa;
  color: var(--text);
}

:root[data-app-theme="light"] :is(
  .auth-input,
  .auth-form input,
  .auth-form textarea,
  .auth-form select
):-webkit-autofill {
  -webkit-text-fill-color: #0f1419;
  caret-color: #0f1419;
  -webkit-box-shadow: 0 0 0 1000px #fafafa inset;
  box-shadow: 0 0 0 1000px #fafafa inset;
}

:root[data-app-theme="light"] :is(.auth-input-icon, .auth-input-toggle) {
  color: #737373;
}

:root[data-app-theme="light"] :is(.auth-button--gradient, .auth-signup-wizard .signup-form button[type="submit"]) {
  border-color: #0095f6;
  background: #0095f6;
  color: #ffffff;
  box-shadow: none;
}

/* Messages and inbox */
:root[data-app-theme="light"] :is(.dmSearchHeader, .activitySearchHeader) {
  background: #ffffff;
  color: var(--text);
}

:root[data-app-theme="light"] :is(
  .comms-shell,
  .comms-top,
  .commsTopBar,
  .commsInboxSurface,
  .commsDistrictSection,
  .commsFlat,
  .commsFlatList,
  .commsList,
  .commsChat,
  .commsChatHeader,
  .comms-input-rail
) {
  border-color: var(--line);
  background: #ffffff;
  color: var(--text);
}

:root[data-app-theme="light"] :is(.commsFlatRow, .commsInboxRow, .commsDistrictRow, .commsRow, .commsFlatRequest) {
  border-color: var(--line);
  background: transparent;
  color: var(--text);
}

:root[data-app-theme="light"] :is(.commsFlatRow, .commsInboxRow, .commsDistrictRow, .commsRow):is(:hover, :focus-visible, .is-active, .is-selected) {
  background: #fafafa;
}

:root[data-app-theme="light"] :is(
  .comms-title,
  .comms-channel-title,
  .commsInboxName,
  .commsRowName,
  .commsInboxEmptyTitle,
  .commsFlatEmpty,
  .msgTopTab
) {
  color: var(--text);
}

:root[data-app-theme="light"] :is(
  .comms-sub,
  .comms-channel-sub,
  .commsInboxTime,
  .commsInboxPreview,
  .commsDistrictBottom,
  .commsFlatHint,
  .commsFlatEmptySub,
  .commsRowTime,
  .commsRowPreview
) {
  color: var(--muted);
}

:root[data-app-theme="light"] :is(.msgTopTabs, .topTabs) {
  border-color: var(--line);
  background: #ffffff;
}

:root[data-app-theme="light"] :is(.msgTopTab, .topTabsLink) {
  border-color: transparent;
  color: #737373;
}

:root[data-app-theme="light"] :is(.msgTopTab, .topTabsLink):is(.is-active, :hover, :focus-visible) {
  color: #262626;
}

:root[data-app-theme="light"] :is(.msgTopTab, .topTabsLink).is-active::after {
  background: #262626;
}

:root[data-app-theme="light"] .dmInboxPage .dmHeaderTitleButton {
  color: #0f1419;
}

:root[data-app-theme="light"] .dmInboxPage .dmHeaderTitleButton svg {
  color: #737373;
}

:root[data-app-theme="light"] .dmInboxPage .dmHeaderTitleButton:is(:hover, :focus-visible) {
  background: #f5f5f5;
  color: #000000;
}

:root[data-app-theme="light"] .dmSearchHeader :is(.activityHeaderFilterButton, .activityHeaderSearchButton) {
  color: #262626 !important;
}

:root[data-app-theme="light"] .dmSearchHeader :is(.activityHeaderFilterButton, .activityHeaderSearchButton):is(:hover, :focus, :focus-visible, :active, .is-open, .has-active-filters) {
  color: #000000 !important;
}

:root[data-app-theme="light"] .dmSearchHeader :is(.activitySearchExit, .citySearchIcon) {
  color: #737373;
}

:root[data-app-theme="light"] .dmInboxPage .dmStatusMenu {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.98);
  color: var(--text);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}

:root[data-app-theme="light"] .dmInboxPage .dmStatusMenuItem {
  color: #262626;
}

:root[data-app-theme="light"] .dmInboxPage .dmStatusMenuItem:is(:hover, :focus-visible, .is-active) {
  background: #f5f5f5;
  color: #0f1419;
}

:root[data-app-theme="light"] .dmInboxPage .activityFilterPanel .activityUnifiedFilterLink--secondary {
  color: #737373;
}

:root[data-app-theme="light"] .dmInboxPage .activityFilterPanel .activityUnifiedFilterLink--secondary.is-active {
  color: #0f1419;
}

:root[data-app-theme="light"] body.dmChatScreen {
  --dm-chat-bg: #ffffff;
  --dm-chat-muted: #737373;
  --dm-chat-incoming: #efefef;
  --dm-chat-composer: #ffffff;
  /* Light mode's accent is a mid blue rather than dark mode's cyan, so the
     bubble follows the theme instead of forcing one hue across both. It is
     deepened from #0095f6 because white on that accent is only 3.1:1 and
     fails AA; this reaches 4.7:1 while staying in the same family. */
  --dm-chat-outgoing: #0077c8;
  --dm-chat-outgoing-text: #ffffff;
  background: #ffffff;
  color: var(--text);
}

:root[data-app-theme="light"] body.dmChatScreen :is(.dmChatSurface, .dmChatHeader, .dmChatStream, .dmComposer) {
  border-color: var(--line);
  background: #ffffff;
}

:root[data-app-theme="light"] body.dmChatScreen :is(.dmChatBack, .dmHeaderActionButton, .dmInfoButton, .dmChatName) {
  color: #262626;
}

:root[data-app-theme="light"] body.dmChatScreen :is(.dmChatPresence, .dmTimestampSeparator, .dmBubbleMeta, .dmMessageStatus) {
  color: var(--dm-chat-muted);
}

:root[data-app-theme="light"] body.dmChatScreen .dmChatStream :is(.chat-row.other, .chat-row.admin) .dmBubble {
  background: var(--dm-chat-incoming);
  color: #262626;
}

:root[data-app-theme="light"] body.dmChatScreen .dmChatStream :is(.chat-row.player, .chat-row.mine) .dmBubble {
  background: var(--dm-chat-outgoing);
  color: var(--dm-chat-outgoing-text);
}

:root[data-app-theme="light"] body.dmChatScreen .dmComposerField {
  border-color: var(--line);
  background: #f5f5f5;
}

:root[data-app-theme="light"] body.dmChatScreen .dmComposerField input[type="text"] {
  background: transparent;
  color: var(--text);
}

/* Settings and account screens */
:root[data-app-theme="light"] body.appFrame.settingsScreen :is(
  .settingsPageBack,
  .editProfileBack,
  .settingsPageHeaderTitle,
  .editProfileHeaderTitle,
  .settingsSystemHeroTitle,
  .settingsSystemBannerTitle,
  .settingsIdentityTitle,
  .settingsPanelTitle,
  .settingsRowTitle,
  .infoFaqItem summary,
  .legalPanel h2,
  .companyApplicationStateLabel
) {
  color: var(--text);
}

:root[data-app-theme="light"] body.appFrame.settingsScreen :is(
  .settingsPanelCopy,
  .settingsInlineMeta,
  .companyApplicationMeta,
  .settingsSystemBannerCopy,
  .settingsIdentityMeta,
  .settingsRowCopy,
  .settingsRowValue,
  .settingsSystemHeroDescription,
  .infoFaqItem p,
  .legalPanel p,
  .notificationSettingsControl
) {
  color: var(--muted);
}

:root[data-app-theme="light"] body.appFrame.settingsScreen :is(.settingsGroupTitle, .settingsFieldLabel, .editProfileLabel) {
  color: #737373;
}

:root[data-app-theme="light"] body.appFrame.settingsScreen :is(
  .settingsPanel,
  .settingsSideNavGroup,
  .settingsHubGroupCard,
  .settingsHubNavCard,
  .settingsToggleStack,
  .settingsMiniCard,
  .settingsFormPanel,
  .settingsRowsPanel,
  .infoFaqPanel,
  .legalPanel
) {
  border-color: var(--line);
  background: #ffffff;
  color: var(--text);
  box-shadow: none;
}

:root[data-app-theme="light"] body.appFrame.settingsScreen :is(.settingsNotice, .settingsSystemBanner, .settingsIdentityBanner) {
  border-bottom-color: var(--line);
  background: transparent;
}

:root[data-app-theme="light"] body.appFrame.settingsScreen :is(.settingsStaticRow, .settingsNavRow, .settingsToggleRow, .settingsBlockedRow) {
  border-color: var(--line);
  background: transparent;
}

:root[data-app-theme="light"] body.appFrame.settingsScreen :is(.settingsRowsPanel, .settingsToggleStack, .infoFaqPanel) > * + * {
  border-top-color: var(--line);
}

:root[data-app-theme="light"] body.appFrame.settingsScreen :is(
  .settingsField input,
  .settingsField select,
  .settingsField textarea,
  .editProfileInput,
  .editProfileForm .editProfileInput
) {
  border-bottom-color: var(--line);
  background-color: transparent;
  color: var(--text);
}

:root[data-app-theme="light"] body.appFrame.settingsScreen .settingsSwitchTrack {
  background: #dbdbdb;
}

:root[data-app-theme="light"] body.appFrame.settingsScreen :is(.settingsActionPill, .settingsSecondaryButton, .settingsFormFooter > a) {
  border-color: var(--line);
  background: #f5f5f5;
  color: var(--text);
  box-shadow: none;
}

:root[data-app-theme="light"] body.appFrame.settingsScreen .settingsActionPill.is-danger {
  border-color: rgba(237, 73, 86, 0.28);
  background: rgba(237, 73, 86, 0.07);
  color: #ed4956;
}

:root[data-app-theme="light"] body.appFrame.settingsScreen :is(
  .settingsPrimaryButton,
  .settingsFormFooter > button.settingsPrimaryButton,
  .settingsFormPanel > button.settingsPrimaryButton,
  .editProfileSave.settingsPrimaryButton,
  .settingsFormFooter > button:not(.settingsSecondaryButton):not(.settingsDangerButton),
  .settingsFormPanel > button:not(.settingsSecondaryButton):not(.settingsDangerButton)
) {
  border-color: #0095f6;
  background: #0095f6;
  color: #ffffff;
  box-shadow: none;
}

/* Profile, identity picker, followers and following */
:root[data-app-theme="light"] .profilePage {
  --profile-line: rgba(15, 20, 25, 0.12);
  --profile-line-soft: rgba(15, 20, 25, 0.08);
  --profile-muted: #737373;
  --profile-soft: #fafafa;
  --profile-accent: #0095f6;
  background: #ffffff;
  color: var(--text);
}

:root[data-app-theme="light"] .profilePage::before {
  content: none;
}

:root[data-app-theme="light"] .profilePage :is(.profileSurface, .profileSectionBlock, .profilePanelLite, .profileHeaderCardLite) {
  border-color: var(--profile-line);
  background: #ffffff;
  color: var(--text);
  box-shadow: none;
}

:root[data-app-theme="light"] .profilePage :is(
  .profileHeroIdentityLine,
  .profileHeroStatsLine,
  .profileHeroStatsLine strong,
  .profileHeroTitle,
  .profileCompanyName,
  .profileBio,
  .profileQuickIconAction,
  .profileQuickLabel,
  .profileStatLink,
  .profileStatLink strong,
  .profileTabButton,
  .profileEmptyTitle,
  .profileActionMenu
) {
  color: var(--text);
}

:root[data-app-theme="light"] .profilePage :is(
  .profileHeroStatMuted,
  .profileHeroMetaRow,
  .profileStatLink span,
  .profileEmptyMeta,
  .profileSectionLead
) {
  color: var(--profile-muted);
}

:root[data-app-theme="light"] .profilePage .profileHeroIdentitySep {
  color: #a3a3a3;
}

:root[data-app-theme="light"] .profilePage .profileLifetimeTitlePill {
  color: #5f6368;
}

:root[data-app-theme="light"] .profilePage .profileHeroStatsLine .profileStatLink.profileStatLink--inline,
:root[data-app-theme="light"] .profilePage .profileHeroStatsLine .profileStatLink.profileStatLink--inline.is-interactive {
  color: #737373;
}

:root[data-app-theme="light"] .profilePage .profileHeroStatsLine .profileStatLink.profileStatLink--inline strong,
:root[data-app-theme="light"] .profilePage .profileHeroStatsLine .profileStatLink.profileStatLink--inline.is-interactive strong {
  color: #0077c8;
}

:root[data-app-theme="light"] .profilePage .profileHeroStatsLine .profileStatLink.profileStatLink--inline:disabled strong {
  color: #5f6368;
}

:root[data-app-theme="light"] .profilePage .profileBackButton {
  color: #262626;
}

:root[data-app-theme="light"] .profilePage .profileBackButton:is(:hover, :focus-visible) {
  background: #f5f5f5;
  color: #000000;
}

:root[data-app-theme="light"] .profilePage :is(.profileQuickIcon, .profileEmptyIcon) {
  border-color: var(--profile-line);
  background: #f5f5f5;
  color: #262626;
}

:root[data-app-theme="light"] .profilePage :is(.profileQuickIconAction.is-primary .profileQuickIcon, .profileQuickIconAction.is-state .profileQuickIcon) {
  border-color: rgba(0, 149, 246, 0.25);
  background: rgba(0, 149, 246, 0.1);
  color: #0095f6;
}

:root[data-app-theme="light"] .profilePage :is(.profileStatsRow, .profileTabBar, .profileEmptyState) {
  border-color: var(--profile-line);
  background: #ffffff;
  box-shadow: none;
}

:root[data-app-theme="light"] .profilePage .profileTabButton.is-active {
  color: #262626;
}

:root[data-app-theme="light"] .profilePage .profileTabButton.is-active::after {
  background: #262626;
}

:root[data-app-theme="light"] :is(.profileIdentitySwitcherButton, .profileIdentityOption) {
  border-color: var(--line);
  background: #ffffff;
  color: var(--text);
}

:root[data-app-theme="light"] .profileIdentityDrawerPanel {
  border-color: rgba(15, 20, 25, 0.12);
  border-right-color: rgba(15, 20, 25, 0.12);
  background: #ffffff;
  color: var(--text);
}

:root[data-app-theme="light"] .profileIdentitySummaryCaret {
  border-color: #ffffff;
  background: #262626;
  color: #ffffff;
}

:root[data-app-theme="light"] :is(.profileIdentityMenuLabel, .profileIdentityDrawerLabel, .profileIdentityCreditsLabel, .profileIdentityActiveProfileHandle, .profileIdentityOptionMeta) {
  color: var(--muted);
}

:root[data-app-theme="light"] .profileIdentityCreditsCard {
  border-color: var(--line);
  background: #ffffff;
  color: var(--text);
}

:root[data-app-theme="light"] .profileIdentityCreditsIcon {
  background: rgba(0, 149, 246, 0.1);
  color: #0095f6;
}

:root[data-app-theme="light"] .profileIdentityCreditsChevron {
  color: var(--muted);
}

:root[data-app-theme="light"] .profileIdentityActiveProfileCaret {
  border-color: var(--line);
  background: #ffffff;
  color: #0095f6;
}

:root[data-app-theme="light"] .profileIdentityActiveProfileLink:active {
  background: rgba(15, 20, 25, 0.05);
}

:root[data-app-theme="light"] .profileIdentityOption.is-active {
  border-color: rgba(0, 149, 246, 0.3);
  background: rgba(0, 149, 246, 0.08);
}

:root[data-app-theme="light"] .profileSocialPanel {
  border-top-color: var(--line);
  background: #ffffff;
  color: var(--text);
  box-shadow: 0 -14px 36px rgba(0, 0, 0, 0.12);
}

:root[data-app-theme="light"] :is(.profileSocialTitle, .profileSocialName, .profileSocialStateTitle, .profileSocialBack) {
  color: var(--text);
}

:root[data-app-theme="light"] :is(.profileSocialCount, .profileSocialUsername, .profileSocialStateMeta) {
  color: var(--muted);
}

:root[data-app-theme="light"] .profileSocialRow {
  border-color: var(--line);
}

/* Activity discovery and event feed */
:root[data-app-theme="light"] body.activityBrowsePage,
:root[data-app-theme="light"] .activityBrowsePage {
  background: #ffffff;
  background-image: none;
  color: var(--text);
}

:root[data-app-theme="light"] .activityBrowsePage :is(.activityContent, .activityPrimeContent, .activityPrimeFeed, .activityDiscoverySectionFeed) {
  background: #ffffff;
  color: var(--text);
}

:root[data-app-theme="light"] body.activityBrowsePage .activitySearchHeader {
  background: #ffffff;
  color: var(--text);
}

:root[data-app-theme="light"] body.activityBrowsePage .activityHeaderTabs .activityUnifiedFilterLink--primary {
  color: #737373;
}

:root[data-app-theme="light"] body.activityBrowsePage .activityHeaderTabs .activityUnifiedFilterLink--primary:is(:hover, :focus-visible, .is-active) {
  color: #0f1419;
}

:root[data-app-theme="light"] body.activityBrowsePage .activitySearchHeader :is(.activityHeaderFilterButton, .activityHeaderSearchButton) {
  color: #262626 !important;
}

:root[data-app-theme="light"] body.activityBrowsePage .activitySearchHeader :is(.activityHeaderFilterButton, .activityHeaderSearchButton):is(:hover, :focus, :focus-visible, :active, .is-open, .has-active-filters) {
  color: #000000 !important;
}

:root[data-app-theme="light"] body.activityBrowsePage .activitySearchHeader :is(.activitySearchExit, .citySearchIcon) {
  color: #737373;
}

:root[data-app-theme="light"] body.activityBrowsePage .activityFilterPanel .activityUnifiedFilterLink--secondary {
  color: #737373;
}

:root[data-app-theme="light"] body.activityBrowsePage .activityFilterPanel .activityUnifiedFilterLink--secondary.is-active {
  color: #0f1419;
}

:root[data-app-theme="light"] .activityBrowsePage :is(
  .activityPrimeSectionTitle,
  .activityFriendsSectionTitle,
  .activityDiscoveryPeopleCardRailName,
  .activityDiscoveryPeopleName,
  .activityPeopleGroupTitle,
  .activityInitialEmptyTitle
) {
  color: var(--text);
}

:root[data-app-theme="light"] .activityBrowsePage :is(
  .activityDiscoveryPeopleCardRailMeta,
  .activityDiscoveryPeopleMeta,
  .activityInitialEmptyMeta
) {
  color: var(--muted);
}

:root[data-app-theme="light"] :is(.activityFilterPopover, .activityPrimeFilterSheet, .activitySearchPanel--prime) {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.98);
  color: var(--text);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}

:root[data-app-theme="light"] :is(.activityFilterPopoverGroupTitle, .activityPrimeFilterLink, .activityPrimeFilterToggle) {
  color: #262626;
}

:root[data-app-theme="light"] .activityPrimeFilterLink {
  border-color: var(--line);
  background: #fafafa;
}

:root[data-app-theme="light"] .activityPrimeFilterLink:is(.is-active, :hover, :focus-visible),
:root[data-app-theme="light"] .activityPrimeFilterToggle.is-active {
  border-color: rgba(0, 149, 246, 0.28);
  background: rgba(0, 149, 246, 0.08);
  color: #0095f6;
}

:root[data-app-theme="light"] .activityBrowsePage :is(.activityDiscoveryPeopleCardRail, .activityDiscoveryPeopleRow) {
  border-color: var(--line);
  background: #ffffff;
  color: var(--text);
  box-shadow: none;
}

:root[data-app-theme="light"] .activityBrowsePage :is(.activityDiscoveryPeopleCardRail, .activityDiscoveryPeopleRow):is(:hover, :focus-visible) {
  background: #fafafa;
}

:root[data-app-theme="light"] .activityBrowsePage .activityPrimeEmpty {
  border-color: var(--line);
  background: #fafafa;
  color: var(--text);
}

:root[data-app-theme="light"] .activityBrowsePage .activityPrimeEmpty .activityInitialRecovery {
  color: var(--muted);
}

:root[data-app-theme="light"] .activityBrowsePage .activityDiscoveryAvatar--rail {
  border-color: var(--line);
  background: #f5f5f5;
  box-shadow: none;
}

:root[data-app-theme="light"] .activityBrowsePage:not(.activityBrowsePage--explore):not(.activityBrowsePage--friends) .activityPeopleAvatarLine .activityDiscoveryPeopleCardRailName,
:root[data-app-theme="light"] .activityBrowsePage:not(.activityBrowsePage--explore):not(.activityBrowsePage--friends) .activityPeopleRailPage .activityDiscoveryPeopleCardRailName,
:root[data-app-theme="light"] .activityBrowsePage:not(.activityBrowsePage--explore):not(.activityBrowsePage--friends) .activityPeopleGroupTrack .activityDiscoveryPeopleCardRailName {
  color: #262626;
}

:root[data-app-theme="light"] .activityBrowsePage:not(.activityBrowsePage--explore):not(.activityBrowsePage--friends) .activityPeopleRailPage .activityDiscoveryPeopleCardRailMeta,
:root[data-app-theme="light"] .activityBrowsePage:not(.activityBrowsePage--explore):not(.activityBrowsePage--friends) .activityPeopleGroupTrack .activityDiscoveryPeopleCardRailMeta {
  color: #737373;
}

:root[data-app-theme="light"] .activityBrowsePage.activityBrowsePage--friends :is(.activityFriendsSurface, .activityFriendsRailSection) {
  background: transparent;
  color: var(--text);
}

:root[data-app-theme="light"] .activityBrowsePage.activityBrowsePage--friends .activityFriendsFeedCard {
  border-color: var(--line);
  background: #ffffff;
  color: var(--text);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

:root[data-app-theme="light"] .activityBrowsePage.activityBrowsePage--friends .activityFriendsActorName {
  color: var(--text);
}

:root[data-app-theme="light"] .activityViewerCommentsCard {
  border-top-color: var(--line);
  background: #ffffff;
  color: var(--text);
  box-shadow: 0 -14px 36px rgba(0, 0, 0, 0.12);
}

:root[data-app-theme="light"] :is(.activityViewerCommentsHeading h2, .activityViewerCommentsClose) {
  color: var(--text);
}

:root[data-app-theme="light"] :is(.activityViewerCommentsHeading p, .activityViewerCommentsNote, .activityViewerCommentsEmpty) {
  color: var(--muted);
}

:root[data-app-theme="light"] .activityViewerCommentsTextarea {
  border-color: var(--line);
  background: #fafafa;
  color: var(--text);
}

:root[data-app-theme="light"] .activityViewerCommentRow {
  border-color: var(--line);
  background: #fafafa;
}

:root[data-app-theme="light"] .activityViewerCommentMeta {
  color: var(--muted);
}

:root[data-app-theme="light"] .activityViewerCommentBody {
  color: var(--text);
}

/* Tabs laid over City media remain transparent and high-contrast. */
:root[data-app-theme="light"] .cityFeedOverlayTabs .topTabs {
  border: 0;
  background: transparent;
  box-shadow: none;
}

:root[data-app-theme="light"] .cityFeedOverlayTabs .topTabsLink {
  background: transparent;
  color: rgba(224, 234, 247, 0.86);
}

:root[data-app-theme="light"] .cityFeedOverlayTabs .topTabsLink:is(:hover, :focus-visible, .is-active) {
  color: rgba(247, 251, 255, 0.98);
}

:root[data-app-theme="light"] .cityFeedOverlayTabs .topTabsLink.is-active::after {
  background: #5ec8ff;
}

/* City stays a dark Reels-style media canvas; its chrome and sheets are light. */
:root[data-app-theme="light"] body.appFrame.cityPage {
  background: #ffffff;
}

:root[data-app-theme="light"] .cityPage :is(.cityTopBar, .cityFeedHeader) {
  border-color: var(--line);
  background: #ffffff;
  color: var(--text);
}

:root[data-app-theme="light"] .cityPage :is(.cityEmptyTitle, .cityFeedRetryState .cityEmptyTitle) {
  color: var(--text);
}

:root[data-app-theme="light"] :is(.cityPostActionSheetPanel, .cityCommentsPanel, .postActionModalCard) {
  border-color: var(--line);
  background: #ffffff;
  color: var(--text);
  box-shadow: 0 -14px 36px rgba(0, 0, 0, 0.14);
}

:root[data-app-theme="light"] :is(
  .cityPostActionSheetTitle,
  .cityPostActionSheetTileLabel,
  .cityPostActionSheetRowText,
  .postActionModalTitle,
  .cityCommentsDescAuthor,
  .cityCommentsDescHeadline,
  .cityCommentsDescText,
  .cityCommentsScroll .broadcast-comment-author,
  .cityCommentsScroll .broadcast-comment-text
) {
  color: var(--text);
}

:root[data-app-theme="light"] :is(
  .cityPostActionSheetEyebrow,
  .cityPostActionSheetSectionLabel,
  .cityPostActionSheetNote,
  .postActionModalEyebrow,
  .postActionModalMeta,
  .cityCommentsDescMeta,
  .cityCommentsDescDetailsMeta,
  .cityCommentsScroll .broadcast-comment-time,
  .cityCommentsScroll .broadcast-comment-actions
) {
  color: var(--muted);
}

:root[data-app-theme="light"] :is(
  .cityPostActionSheetClose,
  .cityPostActionSheetTile,
  .cityPostActionSheetRow,
  .cityCommentsDescOwnerAction,
  .cityCommentsLogin,
  .cityCommentsScroll .broadcast-comment-menuToggle,
  .cityCommentsScroll .broadcast-comment-menuItem
) {
  border-color: var(--line);
  background: #fafafa;
  color: var(--text);
}

:root[data-app-theme="light"] :is(.cityPostActionSheetTile--danger, button.cityPostActionSheetTile--danger) {
  border-color: rgba(237, 73, 86, 0.24);
  background: rgba(237, 73, 86, 0.07);
  color: #ed4956;
}

:root[data-app-theme="light"] :is(.cityPostActionSheetTile--danger, button.cityPostActionSheetTile--danger) .cityPostActionSheetTileIcon,
:root[data-app-theme="light"] .cityPostActionSheetRow--danger,
:root[data-app-theme="light"] .cityPostActionSheetRow--danger .cityPostActionSheetRowIcon,
:root[data-app-theme="light"] .cityCommentsScroll :is(.broadcast-comment-menuItem.is-danger, .broadcast-comment-delete) {
  color: #ed4956;
}

:root[data-app-theme="light"] .cityPostActionSheetRow--danger {
  border-color: rgba(237, 73, 86, 0.2);
  background: rgba(237, 73, 86, 0.06);
}

:root[data-app-theme="light"] :is(.cityPostActionSheetList--plain, .cityPostActionSheetList--plain > * + *, .cityCommentsDescription, .cityCommentsScroll .broadcast-comment-thread) {
  border-color: var(--line);
}

:root[data-app-theme="light"] :is(.cityCommentsComposer, .cityCommentsForm) {
  border-color: var(--line);
  background: #ffffff;
}

/* Map basemap and loading canvas follow the theme; controls and sheets stay readable. */
:root[data-app-theme="light"] .mapPage {
  --map-chrome-surface: rgba(255, 255, 255, 0.96);
  --map-chrome-border: rgba(15, 20, 25, 0.12);
  --map-chrome-border-strong: rgba(0, 149, 246, 0.28);
  --map-chrome-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  --map-chrome-inset: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

:root[data-app-theme="light"] :is(.mapStage, .mapCanvas, .mapInitialSkeleton, .instantMapSkeleton) {
  background: #f3f5f7;
}

:root[data-app-theme="light"] .mapInitialSkeletonGrid {
  background-image:
    linear-gradient(rgba(15, 20, 25, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 20, 25, 0.06) 1px, transparent 1px);
}

:root[data-app-theme="light"] .mapPage :is(
  .mapFloatBtn,
  .mapControlFab,
  .mapHud,
  .mapSettingsPanel,
  .mapLegendChip,
  .mapStatus,
  .maplibregl-popup-content,
  .mapPopupBtn,
  .mapSharePanel,
  .mapItemCard
) {
  border-color: var(--map-chrome-border);
  background: rgba(255, 255, 255, 0.97);
  color: var(--text);
  box-shadow: var(--map-chrome-shadow);
}

:root[data-app-theme="light"] .mapPage :is(
  .mapLegendChip,
  .mapHint,
  .mapPopupMeta,
  .mapShareDisclosure,
  .mapShareSheetSectionLabel
) {
  color: var(--muted);
}

:root[data-app-theme="light"] .mapPage :is(.mapShareSheetTitle, .mapPickerName) {
  color: var(--text);
}

:root[data-app-theme="light"] .mapPage :is(.mapShareDurationBtn, .mapShareSheetFriends, .mapPickerItem) {
  border-color: var(--line);
  background-color: transparent;
}

:root[data-app-theme="light"] .mapPage .mapShareDurationBtn {
  background: #fafafa;
  color: var(--text);
}

:root[data-app-theme="light"] .mapPage .mapShareDurationBtn:is(.is-active, [aria-checked="true"]) {
  border-color: rgba(0, 149, 246, 0.28);
  background: rgba(0, 149, 246, 0.08);
  color: #0095f6;
}

:root[data-app-theme="light"] .mapPage .mapShareSheetSaveRow:not(.is-stop) { color: #fff; }

/* Event and place detail sheets use a white Instagram-style reading surface. */
:root[data-app-theme="light"] .mapPage .mapItemCard {
  --map-item-bg: #ffffff;
  border-color: var(--map-chrome-border);
  background: #ffffff;
  color: var(--text);
}

:root[data-app-theme="light"] .mapPage .mapItemScroll {
  background:
    radial-gradient(circle at 86% 28%, rgba(0, 149, 246, 0.06), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 56%, #ffffff 100%);
  background-color: #ffffff;
}

:root[data-app-theme="light"] .mapPage .mapItemBody {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.88) 42%, #ffffff 100%);
  background-color: rgba(255, 255, 255, 0.01);
  color: var(--text);
}

:root[data-app-theme="light"] .mapPage #map-item-card .mapItemSummary {
  text-shadow: none;
}

:root[data-app-theme="light"] .mapPage :is(.mapItemTitle, .mapItemDescription) {
  color: var(--text);
}

:root[data-app-theme="light"] .mapPage :is(
  .mapItemMetaText,
  .mapItemLocationLink .mapItemMetaText,
  #map-item-date-line,
  .mapItemAttendanceLine,
  .mapItemInfoMeta,
  .mapItemSectionTitle
) {
  color: var(--muted);
}

:root[data-app-theme="light"] .mapPage .mapItemSection {
  border-top-color: var(--line);
}

:root[data-app-theme="light"] .mapPage .mapItemMetaLine .chip {
  border-color: rgba(0, 149, 246, 0.2);
  background: rgba(0, 149, 246, 0.07);
  color: #0077c8;
}

:root[data-app-theme="light"] .mapPage #map-item-card .mapItemMetaLine .chip,
:root[data-app-theme="light"] .mapPage #map-item-promoted {
  border-color: rgba(0, 149, 246, 0.2);
  background: rgba(0, 149, 246, 0.07);
  color: #0077c8;
}

:root[data-app-theme="light"] .mapPage #map-item-card #map-item-category.mapItemTransparentPill,
:root[data-app-theme="light"] .mapPage #map-item-card #map-item-visibility.mapStatePill.is-friends {
  border-color: var(--line) !important;
  background: #f5f5f5 !important;
  color: #737373 !important;
}

:root[data-app-theme="light"] .mapPage #map-item-card .mapItemActionIconOnly {
  color: #262626;
}

:root[data-app-theme="light"] .mapPage #map-item-card .mapItemActionIconOnly:is(:hover, :focus-visible, :active) {
  background: #f5f5f5;
}

:root[data-app-theme="light"] .mapPage #map-item-card #map-item-cta:is(.is-disabled, :disabled) {
  background: #efefef;
  color: #737373;
}

:root[data-app-theme="light"] .mapPage #map-item-card #map-item-like[aria-pressed="true"] .mapItemBtnIcon svg path {
  fill: #ed4956;
}

:root[data-app-theme="light"] .mapPage .maplibregl-popup-tip {
  border-top-color: #ffffff;
}

/* More, wallet, notifications and utility lists */
:root[data-app-theme="light"] :is(.moreSectionLabel, .walletHeroCopy, .walletSubpageLead p, .notificationsEmptyCopy) {
  color: var(--muted);
}

:root[data-app-theme="light"] :is(.postWizardFlowTitle, .notificationsPageTitle, .notificationsEmptyTitle, .notificationRowTitle, .notificationSettingsTitle) {
  color: var(--text);
}

:root[data-app-theme="light"] :is(.notificationRow, .notificationSettingsRow, .notificationPhonePanel, .notificationsEmptyState) {
  border-color: var(--line);
  background: #ffffff;
  color: var(--text);
}

:root[data-app-theme="light"] :is(.notificationRowSecondary, .notificationRowMeta, .notificationRowTime, .notificationSettingsDescription, .notificationSettingsLead) {
  color: var(--muted);
}

:root[data-app-theme="light"] .notificationRow.is-unread {
  background: transparent;
}

:root[data-app-theme="light"] body.notificationsInboxScreen .pageHeader.notificationsPageHeader {
  background: #ffffff;
}

:root[data-app-theme="light"] .notificationRowMedia img {
  border-color: #ffffff;
}

:root[data-app-theme="light"] :is(.notificationQuickAction, .notificationRequestAction--cancel) {
  background: #efefef;
  color: #1c1c1e;
}

/* More and Settings light-mode foreground contrast */
:root[data-app-theme="light"] body.morePage .moreHeaderBack {
  color: #262626;
}

:root[data-app-theme="light"] body.morePage .moreHeaderBack:is(:hover, :focus-visible) {
  background: #f5f5f5;
}

:root[data-app-theme="light"] body.morePage :is(.moreFeatureSubtitle, .moreUtilityMeta) {
  color: var(--muted);
}

:root[data-app-theme="light"] body.morePage :is(.moreFeatureIcon, .moreUtilityIcon) {
  border-color: rgba(0, 119, 200, 0.16);
  background: rgba(0, 149, 246, 0.07);
  color: #0077c8;
  box-shadow: none;
}

:root[data-app-theme="light"] body.morePage .moreFeatureBadge:not(.moreFeatureBadge--status) {
  border-color: rgba(0, 119, 200, 0.2);
  background: rgba(0, 149, 246, 0.08);
  color: #0077c8;
}

:root[data-app-theme="light"] body.morePage .moreRowChevron {
  color: #737373;
}

:root[data-app-theme="light"] body.morePage .moreFeatureCard:is(:hover, :focus-visible) .moreRowChevron {
  color: #0077c8;
}

:root[data-app-theme="light"] body.morePage .moreFeatureCard--devLocked {
  opacity: 1;
}

:root[data-app-theme="light"] body.morePage .moreUtilityRow--danger :is(.moreUtilityTitle, .moreUtilityMeta) {
  color: #b42335;
}

:root[data-app-theme="light"] body.morePage .moreUtilityRow--danger .moreUtilityIcon {
  border-color: rgba(180, 35, 53, 0.18);
  background: #fff1f2;
  color: #b42335;
}

:root[data-app-theme="light"] body.appFrame.settingsScreen .settingsPageBack:is(:hover, :focus-visible) {
  background: #f5f5f5;
}

:root[data-app-theme="light"] body.appFrame.settingsScreen .settingsRowIcon {
  color: #737373;
}

:root[data-app-theme="light"] body.appFrame.settingsScreen .settingsNavRow:is(:hover, :focus-visible) .settingsRowIcon {
  color: #0077c8;
}

:root[data-app-theme="light"] body.appFrame.settingsScreen :is(
  .settingsField input,
  .settingsField textarea,
  .editProfileInput
)::placeholder {
  color: #737373;
  opacity: 1;
}

:root[data-app-theme="light"] body.appFrame.settingsScreen .settingsField select {
  background-image:
    linear-gradient(45deg, transparent 50%, #737373 50%),
    linear-gradient(135deg, #737373 50%, transparent 50%);
}

:root[data-app-theme="light"] body.appFrame.settingsScreen .settingsFileInput::file-selector-button {
  border: 1px solid var(--line);
  background: #f5f5f5;
  color: var(--text);
}

:root[data-app-theme="light"] body.appFrame.settingsScreen :is(.editProfileHandleMeta, .editProfileInputReadonly) {
  color: var(--muted);
  opacity: 1;
}

:root[data-app-theme="light"] body.appFrame.settingsScreen .settingsDangerSection .settingsPanelTitle {
  color: #b42335;
}

:root[data-app-theme="light"] body.appFrame.settingsScreen .settingsDangerButton {
  border-color: rgba(180, 35, 53, 0.28);
  background: #fff1f2;
  color: #b42335;
  box-shadow: none;
}

:root[data-app-theme="light"] body.appFrame.settingsScreen .settingsDangerButton:is(:hover, :focus-visible) {
  border-color: rgba(180, 35, 53, 0.4);
  background: #ffe4e6;
  color: #9f1239;
}

:root[data-app-theme="light"] body.appFrame.settingsScreen [data-push-status][data-tone="success"] {
  color: #166534;
}

:root[data-app-theme="light"] body.appFrame.settingsScreen [data-push-status][data-tone="warning"] {
  color: #92400e;
}

:root[data-app-theme="light"] body.appFrame.settingsScreen [data-push-status][data-tone="error"] {
  color: #b42335;
}

/* Settings child screens with custom dark-first components. */
:root[data-app-theme="light"] body.appFrame.reportProblemScreen :is(.reportPageBack, .reportPageTitle) {
  color: var(--text);
}

:root[data-app-theme="light"] body.appFrame.reportProblemScreen .reportFieldLabel {
  color: #595959;
}

:root[data-app-theme="light"] body.appFrame.reportProblemScreen .reportControl {
  border-color: var(--line);
  background-color: #ffffff;
  color: var(--text);
}

:root[data-app-theme="light"] body.appFrame.reportProblemScreen .reportControl:focus {
  border-color: rgba(0, 119, 200, 0.45);
  background-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(0, 149, 246, 0.1);
}

:root[data-app-theme="light"] body.appFrame.reportProblemScreen .reportControl::placeholder,
:root[data-app-theme="light"] body.appFrame.reportProblemScreen :is(.reportDescriptionCount, .reportAttachmentMeta) {
  color: #737373;
  opacity: 1;
}

:root[data-app-theme="light"] body.appFrame.reportProblemScreen .reportSelect {
  background-image:
    linear-gradient(45deg, transparent 50%, #737373 50%),
    linear-gradient(135deg, #737373 50%, transparent 50%);
}

:root[data-app-theme="light"] body.appFrame.reportProblemScreen .reportSelect option {
  background: #ffffff;
  color: var(--text);
}

:root[data-app-theme="light"] body.appFrame.reportProblemScreen .reportAttachmentDropzone {
  border-color: #c7c7c7;
  background: #fafafa;
  color: var(--text);
}

:root[data-app-theme="light"] body.appFrame.reportProblemScreen .reportAttachmentTitle {
  color: var(--text);
}

:root[data-app-theme="light"] body.appFrame.reportProblemScreen :is(.reportAttachmentDropzone:hover, .reportAttachmentDropzone:focus-within, .reportAttachmentDropzone.is-dragging) {
  border-color: rgba(0, 119, 200, 0.42);
  background: rgba(0, 149, 246, 0.055);
}

:root[data-app-theme="light"] body.appFrame.reportProblemScreen .reportSubmitButton {
  border-color: #0077c8;
  background: #0077c8;
  color: #ffffff;
}

:root[data-app-theme="light"] body.profileFlowPage :is(.profileFlowTitle, .profileUploadTitle) {
  color: var(--text);
}

:root[data-app-theme="light"] body.profileFlowPage :is(
  .profileFlowEyebrow,
  .profileFlowCopy,
  .profileFlowLabel,
  .profileFlowHint,
  .profileUploadMeta,
  .profileFlowFooterMeta
) {
  color: var(--muted);
}

:root[data-app-theme="light"] body.profileFlowPage :is(.profileFlowSection, .profileFlowFormFooter) {
  border-color: var(--line);
}

:root[data-app-theme="light"] body.profileFlowPage .profileUploadCard {
  border-color: var(--line);
  background: #ffffff;
}

:root[data-app-theme="light"] body.profileFlowPage .profileUploadPreview {
  border-color: var(--line);
  background: radial-gradient(circle at top, rgba(0, 149, 246, 0.12), transparent 56%), #f5f5f5;
}

:root[data-app-theme="light"] body.profileFlowPage .profileUploadFallback {
  color: #262626;
}

:root[data-app-theme="light"] body.profileFlowPage .profileUploadAction {
  border-color: rgba(0, 119, 200, 0.24);
  background: rgba(0, 149, 246, 0.08);
  color: #0077c8;
}

:root[data-app-theme="light"] body.profileFlowPage :is(
  .profileFlowField input,
  .profileFlowField select,
  .profileFlowField textarea
) {
  border-color: var(--line);
  background: #ffffff;
  color: var(--text);
}

:root[data-app-theme="light"] body.profileFlowPage .profileFlowField input[readonly] {
  background: #f5f5f5;
  color: #595959;
}

:root[data-app-theme="light"] body.profileFlowPage .profileFlowSubmit {
  border-color: #0077c8;
  background: #0077c8;
  color: #ffffff;
}

/* Keep immersive media presentation dark, matching Reels-style contrast. */
:root[data-app-theme="light"] :is(
  .postViewerBackdrop,
  .postViewerShell,
  .activityViewer,
  .activityViewerStage,
  .activityViewerMedia,
  .dmMediaViewer,
  .creatorMediaLightbox,
  .cityPostFrame,
  .cityPostMedia
) {
  background-color: #000000;
  color: #ffffff;
}
.aiMediaConsentOpen {
  overflow: hidden;
}

.aiMediaConsentModal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 20px;
}

.aiMediaConsentModal[hidden] {
  display: none;
}

.aiMediaConsentBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 6, 10, 0.78);
  backdrop-filter: blur(10px);
}

.aiMediaConsentCard {
  position: relative;
  width: min(100%, 480px);
  max-height: min(88vh, 720px);
  overflow: auto;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 24px;
  background: #12161d;
  color: #f7f9fc;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.48);
}

.aiMediaConsentCard h2 {
  margin: 0 0 12px;
  font-size: 22px;
}

.aiMediaConsentCard p {
  margin: 0 0 12px;
  color: rgba(239, 244, 250, 0.78);
  line-height: 1.55;
}

.aiMediaConsentCard > a {
  display: inline-block;
  margin-bottom: 18px;
  color: #8fd8ff;
  font-weight: 700;
}

.aiMediaConsentCheck {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  line-height: 1.45;
}

.aiMediaConsentCheck input {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  flex: 0 0 auto;
}

.aiMediaConsentError {
  margin-top: 12px !important;
  color: #ff9f9f !important;
  font-weight: 700;
}

.aiMediaConsentActions {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 10px;
  margin-top: 20px;
}

.aiMediaConsentActions button {
  min-height: 48px;
  border: 0;
  border-radius: 16px;
  font: inherit;
  font-weight: 800;
}

.aiMediaConsentCancel {
  background: rgba(255, 255, 255, 0.08);
  color: #f7f9fc;
}

.aiMediaConsentAllow {
  background: linear-gradient(135deg, #ffd277, #e8a514);
  color: #15110a;
}

.aiMediaConsentAllow:disabled {
  opacity: 0.45;
}

/* Contextual message actions and persistent replies, shared by DM and event chat. */
.dmMessageActions {
  position: fixed; z-index: 12000; min-width: 160px; padding: 5px;
  border: 1px solid rgba(255,255,255,.14); border-radius: 14px;
  background: #202d3a; color: #f5f8fc; box-shadow: 0 12px 36px rgba(0,0,0,.35);
}
.dmMessageActions[hidden], .dmReplyComposer[hidden] { display: none !important; }
.dmMessageActions :is(button,a) {
  display: flex; align-items: center; width: 100%; min-height: 44px;
  padding: 10px 14px; border: 0; border-radius: 9px; background: transparent;
  color: inherit; text-decoration: none; text-align: left; font: inherit; cursor: pointer;
}
.dmMessageActions :is(button,a):is(:hover,:focus-visible) { background: rgba(122,212,255,.16); outline: none; }
.dmMessageRow .dmBubble:focus-visible, .dmMessageRow.is-actions-selected .dmBubble {
  outline: 2px solid #7ad4ff; outline-offset: 3px;
}
body.dmChatScreen .dmBubble .dmReplyQuote {
  display: flex; flex-direction: column; gap: 3px; width: 100%; max-width: 100%; min-width: 0;
  margin: 0 0 7px; padding: 8px 10px; border: 0; border-left: 3px solid currentColor;
  border-radius: 6px; background: rgba(0,0,0,.13); color: inherit;
  font: inherit; font-size: 13px; line-height: 1.35; text-align: left; cursor: pointer;
}
body.dmChatScreen .dmReplyQuote strong, body.dmChatScreen .dmReplyQuote span {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
body.dmChatScreen .dmReplyQuote.is-unavailable { opacity: .7; cursor: default; }
body.dmChatScreen .dmBubble.is-media-only:has(.dmReplyQuote) { padding: 8px; background: var(--dm-chat-incoming); color: #f5f8fc; }
body.dmChatScreen .mine .dmBubble.is-media-only:has(.dmReplyQuote) { background: var(--dm-chat-outgoing); color: var(--dm-chat-outgoing-text); }
body.dmChatScreen .dmReplyComposer {
  display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0;
  margin-bottom: 7px; padding: 10px 12px; border-left: 3px solid #7ad4ff;
  border-radius: 9px; background: #192532; color: #f5f8fc;
}
body.dmChatScreen .dmReplyComposer > div { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; font-size: 13px; }
body.dmChatScreen .dmReplyComposer :is(strong,span) { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
body.dmChatScreen .dmReplyComposer strong { color: #7ad4ff; }
body.dmChatScreen .dmReplyComposer button { flex: 0 0 44px; height: 44px; border: 0; background: transparent; color: inherit; font-size: 25px; cursor: pointer; }
body.dmChatScreen .dmReplyComposer button:focus-visible, body.dmChatScreen .dmReplyQuote:focus-visible { outline: 2px solid #7ad4ff; outline-offset: 2px; }
.is-reply-highlight .dmBubble { animation: dmReplyHighlight 1.5s ease-out; }
@keyframes dmReplyHighlight { from { box-shadow: 0 0 0 5px rgba(122,212,255,.7); } to { box-shadow: 0 0 0 0 transparent; } }
:root[data-app-theme="light"] .dmMessageActions { background: #fff; color: #172333; border-color: #d4dfeb; }
:root[data-app-theme="light"] body.dmChatScreen .dmReplyComposer { background: #eaf3fa; color: #172333; }
:root[data-app-theme="light"] body.dmChatScreen .dmReplyComposer strong { color: #176084; }